Merge branch 'main' into react-aria-1.4

.changeset/polite-plants-deliver.md

@@ -0,0 +1,13 @@
+---
+"@marigold/components": patch
+---
+
+feat(components): Expose `Selection` type for easy usage with `Table` and other components
+
+When working with a `<Table>` you can now use 
+
+```ts
+import type { Selection } from '@marigold/components';
+```
+
+instead of creating the type.

.changeset/serious-tables-prove.md

@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/theme-docs": patch
+---
+
+docs: add landing page to the site

.changeset/wet-parents-burn.md

@@ -0,0 +1,8 @@
+---
+"@marigold/components": minor
+"@marigold/types": minor
+---
+
+feat(components): Make `<Text>` and `<Headline>` accessible by allowing ARIA labelling props
+
+`<Text>` and `<Headline>` will no longer cause type errors when ARIA labelling is used (`aria-label`, `id`, ...).

.changeset/yellow-lies-bake.md

@@ -0,0 +1,7 @@
+---
+"@marigold/docs": patch
+---
+
+docs: Apply root styles to overlay portal so they are displayed correctly.
+
+Overlay components (e.g. `<Dialog>` did not display correctly in the docs.

config/eslint/package.json

@@ -19,12 +19,12 @@
     "directory": "config/eslint"
   },
   "dependencies": {
-    "@babel/core": "7.25.2",
+    "@babel/core": "7.25.7",
     "@babel/eslint-parser": "^7.24.8",
     "@babel/plugin-syntax-flow": "^7.24.7",
     "@babel/plugin-transform-react-jsx": "^7.24.7",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "8.8.0",
+    "@typescript-eslint/parser": "8.8.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",

config/jest/package.json

@@ -21,7 +21,7 @@
     "directory": "config/jest"
   },
   "dependencies": {
-    "@babel/core": "7.25.2",
+    "@babel/core": "7.25.7",
     "@swc/core": "1.7.26",
     "@swc/jest": "0.2.36",
     "@types/jest": "29.5.13",

docs/app/_components/SiteFooter.tsx → docs/app/[...slug]/_components/Footer.tsx

@@ -1,8 +1,8 @@
 import { siteConfig } from '@/lib/config';
 import { Logo } from '@/ui/Logo';
 
-export const SiteFooter = () => (
-  <footer className="border-secondary-200 prose mt-28 flex flex-col items-center justify-between gap-8 border-t py-4 md:flex-row xl:max-w-[70ch]">
+export const Footer = () => (
+  <footer className="border-secondary-200 prose mt-36 flex flex-col items-center justify-between gap-8 border-t py-4 md:flex-row xl:max-w-[70ch]">
     <div className="flex items-center gap-[0.5ch] text-xs">
       Build with 🥵, 🧡 and <Logo className="size-3" />
     </div>

docs/app/_components/SectionNavigation.tsx → docs/app/[...slug]/_components/SectionNavigation.tsx

@@ -2,8 +2,8 @@
 
 import { usePathname } from 'next/navigation';
 import { Badge } from '@marigold/components';
-import { NavLink } from './NavLink';
-import { useNavigation } from './Navigation';
+import { NavLink } from '@/ui/navigation/NavLink';
+import { useNavigation } from '@/ui/navigation/Navigation';
 
 export const SectionNavigation = () => {
   const navigation = useNavigation();

docs/app/[...slug]/layout.tsx

@@ -0,0 +1,35 @@
+import type { PropsWithChildren } from 'react';
+import { Footer } from './_components/Footer';
+import { SectionNavigation } from './_components/SectionNavigation';
+
+// Layout
+// ---------------
+const Layout = ({ children }: PropsWithChildren) => (
+  <>
+    <aside
+      className={[
+        'top-[--page-header-height]',
+        'py-[--page-sub-nav-padding] xl:py-[--page-sub-nav-padding-xl]',
+        'pl-[--page-padding-md] xl:pl-[--page-padding-xl]',
+        'h-[calc(100vh-var(--page-header-height))] w-[--page-sub-nav-width] xl:w-[--page-sub-nav-width-xl]',
+        'fixed z-10 hidden overflow-hidden hover:overflow-y-auto md:block',
+        'scrollbar-thin scrollbar-thumb-secondary-400 scrollbar-thumb-rounded-full scrollbar-track-transparent',
+        'border-secondary-200 border-r',
+      ].join(' ')}
+    >
+      <SectionNavigation />
+    </aside>
+    <main
+      className={[
+        'pt-[--page-main-padding] xl:pt-[--page-main-padding-xl]',
+        'px-[--page-padding] md:px-[--page-padding-md] xl:pr-[--page-padding-xl]',
+        'md:pl-[calc(var(--page-sub-nav-width)+var(--page-main-padding))] xl:pl-[calc(var(--page-sub-nav-width-xl)+var(--page-main-padding-xl))]',
+      ].join(' ')}
+    >
+      {children}
+      <Footer />
+    </main>
+  </>
+);
+
+export default Layout;

docs/app/_components/MobileNavigation.tsx

@@ -2,7 +2,7 @@
 
 import { Button, Dialog, Header } from '@/ui';
 import { Logo } from '@/ui/Logo';
-import { Navigation } from './Navigation';
+import { Navigation } from '@/ui/navigation/Navigation';
 
 // Helpers
 // ---------------

docs/app/_components/PortalContainer.tsx

@@ -3,11 +3,12 @@
 import { useThemeSwitch } from '@/ui/ThemeSwitch';
 
 export const PortalContaier = () => {
-  const { current } = useThemeSwitch();
+  const { current, themes } = useThemeSwitch();
+  const theme = themes[current];
 
   return (
     <div data-theme={current}>
-      <div id="portalContainer" className="not-prose" />
+      <div id="portalContainer" className={`not-prose ${theme.root?.()}`} />
     </div>
   );
 };

docs/app/_components/SiteNavigation.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
-import { NavLink } from './NavLink';
-import { useNavigation } from './Navigation';
+import { NavLink } from '@/ui/navigation/NavLink';
+import { useNavigation } from '@/ui/navigation/Navigation';
 
 export const SiteNavigation = () => {
   const navigation = useNavigation();

docs/app/_components/landingpage/AccessibiltySection.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { coreTheme } from '@/theme';
+import {
+  Badge,
+  Button,
+  FieldGroup,
+  Grid,
+  MarigoldProvider,
+  NumberField,
+  OverlayContainerProvider,
+  Radio,
+  Stack,
+  Switch,
+  Tag,
+  XLoader,
+} from '@/ui';
+import type { PropsWithChildren } from 'react';
+import { useResponsiveValue } from '@marigold/system';
+import { BlurFade } from '@/ui/BlurFade';
+import { StatusSelect } from './StatusSelect';
+
+const Block = ({
+  children,
+  name,
+  order,
+}: PropsWithChildren<{ name: string; order: number }>) => (
+  <Grid.Area name={name}>
+    <BlurFade
+      key={name}
+      className="bg-bg-surface grid h-full place-items-center rounded-lg border border-black/5 px-2 py-2 shadow"
+      delay={0.2 + order * 0.05}
+      inView
+    >
+      {children}
+    </BlurFade>
+  </Grid.Area>
+);
+
+export const AccessibiltySection = () => {
+  const isLargeScreeen = useResponsiveValue([false, false, false, true], 3);
+
+  const areas = isLargeScreeen
+    ? [
+        'select select radio radio',
+        'button badge radio radio',
+        'button badge loader switch',
+        'number-field badge loader switch',
+        'tag tag tag tag',
+      ]
+    : [
+        'select select select select',
+        'button button badge badge',
+        'button button badge badge',
+        'number-field number-field badge badge',
+        'tag tag tag tag',
+      ];
+  return (
+    <div data-theme="core" className="flex flex-col">
+      <OverlayContainerProvider value="portalContainer">
+        <MarigoldProvider theme={coreTheme} className="bg-transparent">
+          <Grid
+            areas={areas}
+            columns={[3, 2, 2, 1]}
+            rows={['70px', '40px', '10px', '50px', '70px']}
+            space={2}
+          >
+            <Block name="select" order={1}>
+              <StatusSelect />
+            </Block>
+            {isLargeScreeen ? (
+              <Block name="loader" order={2}>
+                <XLoader className="size-full" />
+              </Block>
+            ) : null}
+            {isLargeScreeen ? (
+              <Block name="radio" order={3}>
+                <FieldGroup labelWidth="75px">
+                  <Radio.Group label="Event type" defaultValue="concerts">
+                    <Radio value="concerts">Concerts</Radio>
+                    <Radio value="festival">Festival</Radio>
+                    <Radio value="sports">Sport</Radio>
+                    <Radio value="exhibition">Exhibition</Radio>
+                  </Radio.Group>
+                </FieldGroup>
+              </Block>
+            ) : null}
+            {isLargeScreeen ? (
+              <Block name="switch" order={4}>
+                <FieldGroup labelWidth="0px">
+                  <Switch aria-label="WiFi" defaultSelected width="fit" />
+                </FieldGroup>
+              </Block>
+            ) : null}
+            <Block name="button" order={5}>
+              <Button variant="primary">Buy ticket</Button>
+            </Block>
+            <Block name="number-field" order={7}>
+              <FieldGroup labelWidth="40px">
+                <NumberField
+                  label="Price"
+                  width={36}
+                  defaultValue={10}
+                  formatOptions={{
+                    style: 'currency',
+                    currency: 'EUR',
+                  }}
+                />
+              </FieldGroup>
+            </Block>
+            <Block name="badge" order={6}>
+              <Stack space={2} alignX="center">
+                <Badge variant="success">New arrival</Badge>
+                <Badge variant="warning">Selling fast</Badge>
+                <Badge variant="error">Sold out</Badge>
+              </Stack>
+            </Block>
+            <Block name="tag" order={8}>
+              <FieldGroup labelWidth="40px">
+                <Tag.Group label="Perks" selectionMode="multiple">
+                  <Tag id="parking-pass">Parking Pass</Tag>
+                  <Tag id="vip">VIP Access</Tag>
+                  <Tag id="glamping">Glamping Package</Tag>
+                  <Tag id="shuttle-service">Shuttle Service</Tag>
+                </Tag.Group>
+              </FieldGroup>
+            </Block>
+          </Grid>
+        </MarigoldProvider>
+      </OverlayContainerProvider>
+    </div>
+  );
+};

docs/app/_components/landingpage/CollaborationSection.tsx

@@ -0,0 +1,72 @@
+import { Card } from '@/ui';
+import { colors } from '@marigold/theme-core/tokens';
+import { BlurFade } from '@/ui/BlurFade';
+
+const Token = ({ name, value }: { name: string; value: string }) => (
+  <>
+    <code className="block text-xs">--{name}</code>
+    <div
+      className="size-5 rounded-full bg-[--token] shadow-md"
+      style={{ '--token': value } as any}
+    />
+  </>
+);
+
+export const CollaborationSection = () => {
+  /**
+   * Note: can not use Tailwind's "group" feature here for the hover effect,
+   * since our custom "group" matcher only works with data attributes.
+   */
+  return (
+    <BlurFade
+      className="grid items-end justify-center md:col-span-3 [&:hover>:nth-child(1)]:rotate-[-21deg] [&:hover>:nth-child(2)]:rotate-[-10deg] [&:hover>:nth-child(3)]:rotate-[7deg]"
+      inView
+      yOffset={16}
+      inViewMargin="-180px"
+    >
+      <div className="col-start-1 row-start-1 w-[300px] origin-bottom rotate-[-17deg] transition-transform duration-700">
+        <Card variant="image">
+          <div className="h-[500px] w-[300px] bg-[url(/ui-kit.jpg)] bg-[length:350px_auto]" />
+        </Card>
+      </div>
+      <div className="col-start-1 row-start-1 w-[300px] origin-bottom rotate-[-8deg] transition-transform duration-700">
+        <Card variant="image">
+          <div className="h-[500px] w-[300px] origin-bottom bg-[url(/storybook-sidebar.png)] bg-[length:350px_auto]" />
+        </Card>
+      </div>
+      <div className="col-start-1 row-start-1 w-[300px] origin-bottom rotate-6 transition-transform duration-700">
+        <Card px={6} py={4}>
+          <div className="grid grid-cols-[max-content,auto] items-center justify-between gap-5">
+            <Token name="text-base" value={colors.text.base.DEFAULT} />
+            <Token name="text-base-hover" value={colors.text.base.hover} />
+            <Token
+              name="text-base-disabled"
+              value={colors.text.base.disabled}
+            />
+            <Token name="text-inverted" value={colors.text.inverted.DEFAULT} />
+            <Token
+              name="text-inverted-hover"
+              value={colors.text.inverted.hover}
+            />
+            <Token
+              name="text-inverted-disabled"
+              value={colors.text.inverted.disabled}
+            />
+            <Token name="text-info" value={colors.text.info.DEFAULT} />
+            <Token name="text-info-hover" value={colors.text.info.hover} />
+            <Token name="text-success" value={colors.text.success.DEFAULT} />
+            <Token
+              name="text-success-hover"
+              value={colors.text.success.hover}
+            />
+            <Token name="text-warning" value={colors.text.warning.DEFAULT} />
+            <Token
+              name="text-warning-hover"
+              value={colors.text.warning.hover}
+            />
+          </div>
+        </Card>
+      </div>
+    </BlurFade>
+  );
+};