@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/components/button/variants.ts

@@ -0,0 +1,166 @@
+// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `registry/base/button.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications:
+ * - The class recipe (`buttonVariants`) and the size aliases, split out of
+ *   `index.tsx` so server code can call them: no JSX, hooks or contexts here.
+ *   `index.tsx` re-exports them.
+ * - Styling reads DS tokens (see `index.tsx`).
+ * - Variants `outline` (an alias of `tertiary`), `destructive`, `success` and
+ *   `link`, and the `xs` size alias (→ `compact`), for hosts with a
+ *   shadcn-style API; see `index.tsx` for the look.
+ * - `buttonVariants` takes the size aliases too (resolved as the Button
+ *   resolves them), so a host can re-export it as is.
+ * - `surface: true` (local): the fill, ring, hover, press and disabled look
+ *   as root classes, for an element that is not a Button (`<a>`), which has
+ *   no surface layer of its own. Static: no press shrink, no loading morph.
+ *   The transition list moved into compounds so one element gets exactly one.
+ */
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outline' | 'ghost' | 'destructive' | 'success' | 'link'
+
+type SurfacedVariant = Exclude<ButtonVariant, 'link'>
+
+const SURFACED: SurfacedVariant[] = ['primary', 'secondary', 'tertiary', 'outline', 'ghost', 'destructive', 'success']
+
+/* The Button draws its fill on an inner layer 1px inside the root and fills
+   that pixel back out with a same-color spread. Without the layer the root
+   is the surface, so the fill sits on the root and the outline ring is an
+   inset hairline on the same edge. Same tokens and mixes as the layer
+   (`index.tsx` bgVariants); plain `hover:` / `active:` instead of `group-*`. */
+const surfaceVariants: Record<SurfacedVariant, string> = {
+  primary:
+    '[--btn-bg:var(--foreground)] hover:[--btn-bg:color-mix(in_oklab,var(--foreground)_90%,var(--background))] active:[--btn-bg:color-mix(in_oklab,var(--foreground)_80%,var(--background))] bg-[var(--btn-bg)]',
+  secondary:
+    '[--btn-bg:var(--accent)] hover:[--btn-bg:color-mix(in_oklab,var(--accent)_80%,var(--background))] active:[--btn-bg:var(--accent)] bg-[var(--btn-bg)]',
+  tertiary: 'shadow-[inset_0_0_0_1px_var(--border)] hover:bg-hover active:bg-active',
+  outline: 'shadow-[inset_0_0_0_1px_var(--border)] hover:bg-hover active:bg-active',
+  ghost: 'hover:bg-hover active:bg-active',
+  destructive: 'bg-destructive-wash hover:bg-destructive-wash-hover active:bg-destructive-wash-active',
+  success: 'bg-success-wash hover:bg-success-wash-hover active:bg-success-wash-active',
+}
+
+const buttonRecipe = cva(
+  [
+    'group relative isolate inline-flex items-center justify-center outline-none cursor-pointer',
+    'duration-fast',
+    'disabled:opacity-50 disabled:pointer-events-none',
+    'focus-visible:ring-1 focus-visible:ring-focus-ring',
+  ],
+  {
+    variants: {
+      variant: {
+        primary: 'text-background',
+        secondary: 'text-foreground',
+        tertiary: 'text-foreground',
+        outline: 'text-foreground',
+        ghost: 'text-muted-foreground hover:text-foreground',
+        destructive: 'text-destructive-strong',
+        success: 'text-success-strong',
+        // The underline is always drawn and fades its color in, so hovering
+        // never shifts a pixel of the label.
+        link: 'text-foreground underline underline-offset-4 decoration-transparent hover:decoration-current',
+      },
+      // The two-step size ladder shared by every control — see /docs/sizes.
+      // default = 36px control height, compact = 28px for dense surfaces.
+      size: {
+        default: 'h-9 px-4 text-body gap-1.5',
+        compact: 'h-7 px-3 text-body-compact gap-1',
+        icon: 'h-9 w-9 p-0 [&_svg]:h-4 [&_svg]:w-4',
+        'icon-compact': 'h-7 w-7 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5',
+      },
+      iconLeft: { true: '' },
+      iconRight: { true: '' },
+      // The fill and ring as root classes, for a non-Button host (an anchor).
+      surface: {
+        true: [
+          'rounded-lg',
+          'aria-disabled:opacity-50 aria-disabled:pointer-events-none',
+          '[&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast hover:[&_svg]:stroke-[2]',
+        ],
+        false: '',
+      },
+    },
+    // An icon sits 4px closer to its edge than text does: 12px default and
+    // 8px compact, against the 16px / 12px base padding.
+    compoundVariants: [
+      { size: 'compact', iconLeft: true, className: 'pl-2' },
+      { size: 'default', iconLeft: true, className: 'pl-3' },
+      { size: 'compact', iconRight: true, className: 'pr-2' },
+      { size: 'default', iconRight: true, className: 'pr-3' },
+      // A link is text: no surface to pad, but it keeps the control height so
+      // it still lines up with the buttons beside it.
+      { variant: 'link', size: ['default', 'compact'], className: 'px-0' },
+      // One transition list per element: a link fades its underline, a
+      // surface its fill and ring.
+      { variant: 'link', className: 'transition-[color,opacity,text-decoration-color]' },
+      { variant: SURFACED, surface: false, className: 'transition-[color,opacity]' },
+      {
+        variant: SURFACED,
+        surface: true,
+        className: 'no-underline transition-[color,opacity,background-color,box-shadow]',
+      },
+      ...SURFACED.map(variant => ({ variant, surface: true, className: surfaceVariants[variant] })),
+      // The Button sizes its icons by prop; children of a surface host are sized here.
+      { surface: true, size: 'default', className: '[&_svg]:size-4' },
+      { surface: true, size: 'compact', className: '[&_svg]:size-3.5' },
+    ],
+    defaultVariants: {
+      variant: 'primary',
+      size: 'default',
+      surface: false,
+    },
+  },
+)
+
+type ButtonSizeCanonical = 'default' | 'compact' | 'icon' | 'icon-compact'
+
+/** Public size values: the canonical two-size scale plus aliases, kept so
+ *  existing call sites keep compiling. Aliases resolve onto the canonical
+ *  ladder (sm, xs → compact; md/lg → default). The ladder has two steps, so
+ *  `xs` is compact rather than a third height. */
+type ButtonSize = ButtonSizeCanonical | 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-lg'
+
+const legacySizeAliases: Partial<Record<ButtonSize, ButtonSizeCanonical>> = {
+  xs: 'compact',
+  sm: 'compact',
+  md: 'default',
+  lg: 'default',
+  'icon-sm': 'icon-compact',
+  'icon-lg': 'icon',
+}
+
+type ButtonRecipeOptions = NonNullable<Parameters<typeof buttonRecipe>[0]>
+
+/** Options of `buttonVariants`: the Button's look, picked without rendering one. */
+interface ButtonVariantsOptions extends Omit<ButtonRecipeOptions, 'size'> {
+  /** Visual style. Defaults to `"primary"`. */
+  variant?: ButtonVariant | null
+  /** Step on the size ladder; the aliases resolve as on the Button (xs, sm → compact; md, lg → default; icon-sm → icon-compact; icon-lg → icon). Defaults to `"default"`. */
+  size?: ButtonSize | null
+  /** Draw the fill, ring, hover, press and disabled (`aria-disabled`) look on the element itself, for a host that is not a Button, such as an `<a>`. Static: no press shrink or loading morph — prefer `<Button asChild>` when you can render a component. Defaults to `false`. */
+  surface?: boolean | null
+}
+
+/**
+ * The Button's class recipe, callable from server code (no JSX, hooks or
+ * context). Without `surface` it returns the root classes the Button builds
+ * on: layout, label color, size, focus ring — the fill lives on the Button's
+ * inner layer, so on its own it reads as a bare label. With `surface: true`
+ * the fill and ring go on the element itself, for an anchor styled as a
+ * button. Size aliases resolve onto the ladder; the radius is the rounded
+ * shape's (pass `rounded-[20px]` or read `useShape().button` for pill).
+ */
+function buttonVariants({ size, ...options }: ButtonVariantsOptions = {}): string {
+  const canonical = size ? (legacySizeAliases[size] ?? (size as ButtonSizeCanonical)) : size
+  return buttonRecipe({ ...options, size: canonical } as ButtonRecipeOptions)
+}
+
+type ButtonVariantsProps = VariantProps<typeof buttonVariants>
+
+export type { ButtonSize, ButtonSizeCanonical, ButtonVariant, ButtonVariantsOptions, ButtonVariantsProps }
+export { buttonVariants, legacySizeAliases }

package/components/card/examples.mdx

@@ -0,0 +1,212 @@
+import Card from './index'
+import { Circle, Moon, Paintbrush, Palette, Shield, SquareLibrary } from 'lucide-react'
+
+# Basic
+
+Borderless inline list: icon + a ghost action, divided by hairlines.
+
+<div className="w-full max-w-[520px]">
+  <Card.Group orientation="inline">
+    {[
+      { icon: Circle, title: 'Fluid motion', description: 'Spring-tuned transitions calibrated across three tiers' },
+      { icon: Shield, title: 'Accessible by default', description: 'Focus-visible rings and ARIA roles in every part' },
+      { icon: Palette, title: 'Yours to theme', description: 'Swap radius, icons, and primitive at runtime' },
+      { icon: Moon, title: 'Dark mode ready', description: 'Tokens adapt to light and dark automatically' },
+    ].map((f) => (
+      <Card key={f.title} onClick={() => {}}>
+        <Card.Media icon={f.icon} />
+        <Card.Header>
+          <Card.Title>{f.title}</Card.Title>
+          <Card.Description>{f.description}</Card.Description>
+        </Card.Header>
+        <Card.Footer>
+          <Card.Button>Connect</Card.Button>
+        </Card.Footer>
+      </Card>
+    ))}
+  </Card.Group>
+</div>
+
+# Grid: 2-D fluid hover
+
+Two-column grid of image tiles — `columns` above 1 turns on 2-D fluid
+hover: the highlight springs to the nearest card across rows and columns.
+
+<div className="w-full max-w-[560px]">
+  <Card.Group columns={2} border="outlined" separated>
+    {[
+      { title: 'Fluid motion', description: 'Spring-tuned transitions calibrated across three tiers' },
+      { title: 'Accessible by default', description: 'Focus-visible rings and ARIA roles in every part' },
+      { title: 'Yours to theme', description: 'Swap radius, icons, and primitive at runtime' },
+      { title: 'Dark mode ready', description: 'Tokens adapt to light and dark automatically' },
+    ].map((f) => (
+      <Card key={f.title} onClick={() => {}}>
+        <Card.Image src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><radialGradient id='a' cx='.2' cy='.15' r='1'><stop stop-color='%236B97FF' stop-opacity='.9'/><stop offset='1' stop-color='%236B97FF' stop-opacity='.15'/></radialGradient><rect width='1' height='1' fill='white'/><rect width='1' height='1' fill='url(%23a)'/></svg>" />
+        <Card.Header>
+          <Card.Title>{f.title}</Card.Title>
+          <Card.Description>{f.description}</Card.Description>
+        </Card.Header>
+        <Card.Footer>
+          <Card.Button variant="primary">Get started</Card.Button>
+          <Card.Button variant="secondary">Learn more</Card.Button>
+        </Card.Footer>
+      </Card>
+    ))}
+  </Card.Group>
+</div>
+
+# Outlined group
+
+One shared outlined frame, rows split by dividers: logo + primary.
+Card.Media also accepts a [logoA, logoB] tuple for a connected pair.
+
+<div className="w-full max-w-[520px]">
+  <Card.Group orientation="inline" border="outlined">
+    {[
+      { title: 'Fluid motion', description: 'Spring-tuned transitions calibrated across three tiers' },
+      { title: 'Accessible by default', description: 'Focus-visible rings and ARIA roles in every part' },
+      { title: 'Yours to theme', description: 'Swap radius, icons, and primitive at runtime' },
+      { title: 'Dark mode ready', description: 'Tokens adapt to light and dark automatically' },
+    ].map((f) => (
+      <Card key={f.title} onClick={() => {}}>
+        <Card.Media logo="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><radialGradient id='a' cx='.2' cy='.15' r='1'><stop stop-color='%236B97FF' stop-opacity='.9'/><stop offset='1' stop-color='%236B97FF' stop-opacity='.15'/></radialGradient><rect width='1' height='1' fill='white'/><rect width='1' height='1' fill='url(%23a)'/></svg>" />
+        <Card.Header>
+          <Card.Title>{f.title}</Card.Title>
+          <Card.Description>{f.description}</Card.Description>
+        </Card.Header>
+        <Card.Footer>
+          <Card.Button variant="primary">Get started</Card.Button>
+        </Card.Footer>
+      </Card>
+    ))}
+  </Card.Group>
+</div>
+
+# Separated tiles
+
+Separated inline tiles with a full-height image; the action row drops
+below the text (primary, secondary, ghost).
+
+<div className="w-full max-w-[560px]">
+  <Card.Group orientation="inline" separated>
+    {[
+      { title: 'Fluid motion', description: 'Spring-tuned transitions calibrated across three tiers' },
+      { title: 'Accessible by default', description: 'Focus-visible rings and ARIA roles in every part' },
+      { title: 'Yours to theme', description: 'Swap radius, icons, and primitive at runtime' },
+      { title: 'Dark mode ready', description: 'Tokens adapt to light and dark automatically' },
+    ].map((f) => (
+      <Card key={f.title} onClick={() => {}}>
+        <Card.Image src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><radialGradient id='a' cx='.2' cy='.15' r='1'><stop stop-color='%236B97FF' stop-opacity='.9'/><stop offset='1' stop-color='%236B97FF' stop-opacity='.15'/></radialGradient><rect width='1' height='1' fill='white'/><rect width='1' height='1' fill='url(%23a)'/></svg>" />
+        <Card.Header>
+          <Card.Title>{f.title}</Card.Title>
+          <Card.Description>{f.description}</Card.Description>
+        </Card.Header>
+        <Card.Footer>
+          <Card.Button variant="primary">Get started</Card.Button>
+          <Card.Button variant="secondary">Learn more</Card.Button>
+          <Card.Button>Connect</Card.Button>
+        </Card.Footer>
+      </Card>
+    ))}
+  </Card.Group>
+</div>
+
+# Fully yours — compose anything
+
+A standalone promo card tuned to a narrow 300px column: banner, features,
+actions and a dismiss control revealed on hover or focus. (Upstream's demo
+hides the card on dismiss; here `onDismiss` is a no-op.)
+
+<div className="w-full max-w-[300px]">
+  <Card dismissible onDismiss={() => {}} className="border border-border/60 overflow-hidden rounded-xl">
+    <Card.Image src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><radialGradient id='a' cx='.2' cy='.15' r='1'><stop stop-color='%236B97FF' stop-opacity='.9'/><stop offset='1' stop-color='%236B97FF' stop-opacity='.15'/></radialGradient><rect width='1' height='1' fill='white'/><rect width='1' height='1' fill='url(%23a)'/></svg>" />
+    <Card.Header>
+      <Card.Title>Meet the new Card component</Card.Title>
+    </Card.Header>
+    <Card.Content className="flex flex-col gap-3">
+      <Card.Feature icon={Paintbrush} title="Always pixel-perfect" description="Renders your design exactly — token-driven and crisp in light and dark, at any radius" />
+      <Card.Feature icon={SquareLibrary} title="Stacked, inline, or grid" description="One compositional API — borderless by default, with separated tiles or a shared frame" />
+    </Card.Content>
+    <Card.Footer>
+      <Card.Button variant="primary">Get started</Card.Button>
+      <Card.Button variant="ghost">Learn more</Card.Button>
+    </Card.Footer>
+  </Card>
+</div>
+
+# Selected
+
+Clickable selection — one active card carries the fill, its title bolds,
+and the group drops the dividers around it. The selection here is fixed on
+the second card; drive `selected` from your own state to follow clicks.
+
+<div className="w-full max-w-[520px]">
+  <Card.Group orientation="inline">
+    {[
+      { icon: Circle, title: 'Fluid motion', description: 'Spring-tuned transitions calibrated across three tiers' },
+      { icon: Shield, title: 'Accessible by default', description: 'Focus-visible rings and ARIA roles in every part' },
+      { icon: Palette, title: 'Yours to theme', description: 'Swap radius, icons, and primitive at runtime' },
+      { icon: Moon, title: 'Dark mode ready', description: 'Tokens adapt to light and dark automatically' },
+    ].map((f, i) => (
+      <Card key={f.title} label={f.title} selected={i === 1} onClick={() => {}}>
+        <Card.Media icon={f.icon} />
+        <Card.Header>
+          <Card.Title>{f.title}</Card.Title>
+          <Card.Description>{f.description}</Card.Description>
+        </Card.Header>
+      </Card>
+    ))}
+  </Card.Group>
+</div>
+
+# Outlined
+
+`border="outlined"` frames a standalone card in a hairline, the same frame an
+outlined group gives its tiles. Borderless stays the default.
+
+<div className="w-full max-w-[360px]">
+  <Card border="outlined">
+    <Card.Header>
+      <Card.Title>Billing</Card.Title>
+      <Card.Description>Your plan renews on 1 November.</Card.Description>
+    </Card.Header>
+    <Card.Content className="text-body text-muted-foreground">Team plan, 12 seats, paid yearly.</Card.Content>
+    <Card.Footer>
+      <Card.Button variant="secondary">Change plan</Card.Button>
+      <Card.Button>View invoices</Card.Button>
+    </Card.Footer>
+  </Card>
+</div>
+
+# Divider
+
+`Card.Divider` runs a hairline across the card between two parts, edge to
+edge and spaced like the parts. In an inline card it stands upright.
+
+<div className="flex w-full max-w-[520px] flex-col gap-6">
+  <Card border="outlined" className="max-w-[360px]">
+    <Card.Header>
+      <Card.Title>Request #4182</Card.Title>
+      <Card.Description>Submitted by Ada Lovelace</Card.Description>
+    </Card.Header>
+    <Card.Content className="text-body text-muted-foreground">Three items, waiting for approval.</Card.Content>
+    <Card.Divider />
+    <Card.Footer>
+      <Card.Button variant="primary">Approve</Card.Button>
+      <Card.Button>Decline</Card.Button>
+    </Card.Footer>
+  </Card>
+  <Card.Group orientation="inline" border="outlined">
+    <Card>
+      <Card.Media icon={Shield} />
+      <Card.Header>
+        <Card.Title>Two-step sign-in</Card.Title>
+        <Card.Description>On for every member</Card.Description>
+      </Card.Header>
+      <Card.Divider />
+      <Card.Footer>
+        <Card.Button>Manage</Card.Button>
+      </Card.Footer>
+    </Card>
+  </Card.Group>
+</div>