@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/button/variants.ts

@@ -1,168 +0,0 @@
-// 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`). The `primary` variant reads the theme hooks
- *   `--primary*` and `--shadow-button-primary` (`tokens/colors.css`), also on the `surface`
- *   root (the shadow rides `shadow-[…]`, so it composes with the focus ring).
- * - 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(--primary)] hover:[--btn-bg:var(--primary-hover)] active:[--btn-bg:var(--primary-active)] bg-[var(--btn-bg)] shadow-[var(--shadow-button-primary)]',
-  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-primary-foreground',
-        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

@@ -1,251 +0,0 @@
-import Card from './index'
-import { Circle, Moon, Paintbrush, Palette, Shield, SquareLibrary } from 'lucide-react'
-
-# Basics
-
-## 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>
-
-## Heading level
-
-`Card.Title` is a `span` by default. `as` renders it as a heading level for the page's outline (`h2`, `h3`, …) or as another tag; the look stays the same. The title below is a third-level heading, since this docs page already has its own `h1` and `h2` sections.
-
-<div className="w-full max-w-[360px]">
-  <Card border="outlined">
-    <Card.Header>
-      <Card.Title as="h3">Notifications</Card.Title>
-      <Card.Description>Where we send what you subscribed to.</Card.Description>
-    </Card.Header>
-    <Card.Content bodyText className="text-muted-foreground">Email and push, daily digest.</Card.Content>
-  </Card>
-</div>
-
-## Body text
-
-`bodyText` on `Card.Content` sets the size ladder's body size (one step down in a compact region), so plain text inside no longer takes the size of the page around the card. It is off by default because content inherits its size, and a host that has been relying on that would see its text change. Both cards sit in a region set in the title size.
-
-<div className="flex w-full max-w-[560px] flex-col gap-4 text-title">
-  <Card border="outlined">
-    <Card.Header>
-      <Card.Title>Inherited</Card.Title>
-    </Card.Header>
-    <Card.Content className="text-muted-foreground">The content takes the title size of its surroundings.</Card.Content>
-  </Card>
-  <Card border="outlined">
-    <Card.Header>
-      <Card.Title>Body text</Card.Title>
-    </Card.Header>
-    <Card.Content bodyText className="text-muted-foreground">The content takes the ladder's body size.</Card.Content>
-  </Card>
-</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>
-
-# Variants
-
-## 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>
-
-## 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>
-
-# Layouts
-
-## 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>