@webjsdev/ui 0.3.1 → 0.3.3

package/packages/registry/components/breadcrumb.ts

@@ -0,0 +1,43 @@
+/**
+ * Breadcrumb: semantic nav with breadcrumb list. Tier-1 class helpers;
+ * compose with native `<nav>` + `<ol>` + `<li>` + `<a>` / `<span>`.
+ *
+ * shadcn parity:
+ *   Breadcrumb           → <nav aria-label="breadcrumb" data-slot="breadcrumb">
+ *   BreadcrumbList       → breadcrumbListClass()
+ *   BreadcrumbItem       → breadcrumbItemClass()
+ *   BreadcrumbLink       → breadcrumbLinkClass()
+ *   BreadcrumbPage       → breadcrumbPageClass() (with aria-current="page")
+ *   BreadcrumbSeparator  → breadcrumbSeparatorClass() (aria-hidden + role="presentation")
+ *   BreadcrumbEllipsis   → breadcrumbEllipsisClass()
+ *
+ * Usage:
+ *   <nav aria-label="breadcrumb" data-slot="breadcrumb">
+ *     <ol class=${breadcrumbListClass()}>
+ *       <li class=${breadcrumbItemClass()}>
+ *         <a class=${breadcrumbLinkClass()} href="/">Home</a>
+ *       </li>
+ *       <li class=${breadcrumbSeparatorClass()} role="presentation" aria-hidden="true">
+ *         <svg>›</svg>
+ *       </li>
+ *       <li class=${breadcrumbItemClass()}>
+ *         <span class=${breadcrumbPageClass()} aria-current="page">Posts</span>
+ *       </li>
+ *     </ol>
+ *   </nav>
+ *
+ * Design tokens used: --muted-foreground, --foreground.
+ */
+
+export const breadcrumbListClass = (): string =>
+  'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5';
+
+export const breadcrumbItemClass = (): string => 'inline-flex items-center gap-1.5';
+
+export const breadcrumbLinkClass = (): string => 'transition-colors hover:text-foreground';
+
+export const breadcrumbPageClass = (): string => 'font-normal text-foreground';
+
+export const breadcrumbSeparatorClass = (): string => '[&>svg]:size-3.5';
+
+export const breadcrumbEllipsisClass = (): string => 'flex size-9 items-center justify-center';

package/packages/registry/components/button.ts

@@ -0,0 +1,72 @@
+/**
+ * Button: styled native `<button>`. Tier-1 class helper. Compose with a
+ * real `<button>` (or `<a>` for link-styled buttons) so form submission,
+ * focus, keyboard activation, and screen-reader semantics all "just work".
+ *
+ * shadcn parity:
+ *   Button (variant: default | destructive | outline | secondary | ghost | link)
+ *         (size:    default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg)
+ *                                            → buttonClass({ variant, size })
+ *
+ * Usage:
+ *   <button class=${buttonClass()} type="submit">Save</button>
+ *   <button class=${buttonClass({ variant: 'outline', size: 'sm' })}>Cancel</button>
+ *   <button class=${buttonClass({ size: 'icon' })} aria-label="Settings">⚙</button>
+ *   <a       class=${buttonClass({ variant: 'link' })} href="/about">About</a>
+ *
+ * shadcn React's `asChild` (Slot) prop has no equivalent here: just call
+ * `buttonClass(...)` and spread the classes onto whatever element you want.
+ *
+ * Design tokens used: --primary, --primary-foreground, --destructive,
+ * --secondary, --secondary-foreground, --accent, --accent-foreground,
+ * --background, --input, --ring.
+ */
+import { cn } from '../lib/utils.ts';
+
+// cursor-pointer is on the BASE so every variant (default, outline,
+// ghost, link, …) gets the right hover affordance. Native <button>
+// defaults to the OS arrow cursor in Chromium and Firefox: fine for
+// native chrome but unusual for app buttons; shadcn's modern Button
+// has long since gravitated toward an explicit cursor-pointer in the
+// real world (see the open issue shadcn-ui/ui#1791). disabled:pointer-
+// events-none below already suppresses cursor on disabled buttons by
+// virtue of the element not receiving pointer events at all.
+const BASE =
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+
+const VARIANTS = {
+  default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  destructive:
+    'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+  outline:
+    'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+  link: 'text-primary underline-offset-4 hover:underline',
+} as const;
+
+const SIZES = {
+  default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+  xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+  sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+  lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+  icon: 'size-9',
+  'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+  'icon-sm': 'size-8',
+  'icon-lg': 'size-10',
+} as const;
+
+export type ButtonVariant = keyof typeof VARIANTS;
+export type ButtonSize = keyof typeof SIZES;
+
+export interface ButtonClassOptions {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+/** Compose Tailwind classes for a button. Stable shape: object-arg, both optional. */
+export function buttonClass(opts: ButtonClassOptions = {}): string {
+  const variant = opts.variant ?? 'default';
+  const size = opts.size ?? 'default';
+  return cn(BASE, VARIANTS[variant], SIZES[size]);
+}

package/packages/registry/components/card.ts

@@ -0,0 +1,86 @@
+/**
+ * Card: visual container. Tier-1 class helpers; compose with `<div>`
+ * (or any element) for each subpart.
+ *
+ * shadcn parity:
+ *   Card (size: default | sm)  → cardClass({ size })
+ *   CardHeader                 → cardHeaderClass()
+ *   CardTitle                  → cardTitleClass()
+ *   CardDescription            → cardDescriptionClass()
+ *   CardAction                 → cardActionClass()
+ *   CardContent                → cardContentClass()
+ *   CardFooter                 → cardFooterClass()
+ *
+ * Usage:
+ *   <div class=${cardClass()}>
+ *     <div class=${cardHeaderClass()}>
+ *       <div class=${cardTitleClass()}>Notifications</div>
+ *       <div class=${cardDescriptionClass()}>You have 3 unread messages.</div>
+ *       <div class=${cardActionClass()}>
+ *         <button class=${buttonClass({ variant: 'ghost', size: 'sm' })}>Mark all read</button>
+ *       </div>
+ *     </div>
+ *     <div class=${cardContentClass()}>…</div>
+ *     <div class=${cardFooterClass()}>
+ *       <button class=${buttonClass()}>Save</button>
+ *     </div>
+ *   </div>
+ *
+ * Design tokens used: --card, --card-foreground, --muted-foreground, --border.
+ */
+
+export type CardSize = 'default' | 'sm';
+
+/**
+ * Card root. shadcn ships `size?: "default" | "sm"` on Card across
+ * 14/15 style families (only new-york-v4 omits it). The class string
+ * uses `group/card` so the header / title / content / footer helpers
+ * can read the parent card's data-size and adjust their own padding
+ * + gap.
+ *
+ * USAGE: pass size to cardClass AND set data-size="<size>" on the
+ * same host element so the group-data-[size=...]/card child rules
+ * fire. Set `data-slot="card"` for shadcn parity.
+ *
+ *   <div class=${cardClass({ size: 'sm' })} data-slot="card" data-size="sm">
+ *     <div class=${cardHeaderClass()}>...</div>
+ *     ...
+ *   </div>
+ *
+ * Sizes:
+ *   default: gap-6 / py-6 (shadcn new-york-v4 default)
+ *   sm:     gap-3 / py-3 (shadcn radix-nova + base-* defaults)
+ */
+export const cardClass = (opts: { size?: CardSize } = {}): string => {
+  const size = opts.size ?? 'default';
+  const base =
+    'group/card flex flex-col rounded-xl border bg-card text-card-foreground shadow-sm';
+  return size === 'sm' ? base + ' gap-3 py-3' : base + ' gap-6 py-6';
+};
+
+/**
+ * Card header: supports an optional `CardAction` slot via grid layout.
+ * group-data-[size=sm]/card rules pick up the compact layout when the
+ * root card carries data-size="sm".
+ */
+export const cardHeaderClass = (): string =>
+  '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:gap-1 group-data-[size=sm]/card:[.border-b]:pb-3';
+
+/** Card title: heading text within the header. Smaller when card is data-size="sm". */
+export const cardTitleClass = (): string =>
+  'leading-none font-semibold group-data-[size=sm]/card:text-sm';
+
+/** Card description: subdued caption beneath the title. */
+export const cardDescriptionClass = (): string => 'text-sm text-muted-foreground';
+
+/** Card action: right-aligned controls inside the header (matches shadcn CardAction). */
+export const cardActionClass = (): string =>
+  'col-start-2 row-span-2 row-start-1 self-start justify-self-end';
+
+/** Card content: the main body region. Tighter padding when card is data-size="sm". */
+export const cardContentClass = (): string =>
+  'px-6 group-data-[size=sm]/card:px-4';
+
+/** Card footer: trailing controls or actions. Tighter padding when card is data-size="sm". */
+export const cardFooterClass = (): string =>
+  'flex items-center px-6 [.border-t]:pt-6 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:[.border-t]:pt-3';

package/packages/registry/components/checkbox.ts

@@ -0,0 +1,97 @@
+/**
+ * Checkbox: styled native `<input type="checkbox">`. Tier-1 class
+ * helper. Uses `appearance: none` + an inline-SVG `background-image` for
+ * the checkmark when `:checked`, so it remains a real form control
+ * (participates in `<form>` submission, no ElementInternals required).
+ *
+ * shadcn parity:
+ *   Checkbox  → checkboxClass()  (visual: size-4, rounded, primary fill
+ *                                 when checked, inset shadow, focus ring;
+ *                                 bypasses Radix)
+ *
+ * Usage:
+ *   <input type="checkbox" name="terms" id="terms" class=${checkboxClass()}>
+ *   <label class=${labelClass()} for="terms">I accept the terms</label>
+ *
+ * Design tokens used: --input, --primary, --primary-foreground, --background,
+ * --ring, --destructive.
+ */
+import { cn } from '../lib/utils.ts';
+
+// Inline SVG checkmark used as background when :checked. Encoded for url().
+//
+// Two variants because shadcn flips `--primary` (and therefore the checked-
+// state box colour) between light + dark: in light mode the box is dark
+// (`oklch(0.205 0 0)`) and the checkmark needs to be light (white); in dark
+// mode the box is light (`oklch(0.922 0 0)`) and the checkmark needs to be
+// dark (black). `currentColor` inside a data:url SVG does NOT inherit from
+// the host element when used as a background-image: that's a long-
+// standing browser limitation: and pseudo-elements (::before/::after) on
+// `<input>` aren't reliable cross-browser, so the simplest correct fix is
+// to ship two SVGs and toggle them via a theme selector.
+const CHECKMARK_LIGHT =
+  'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\' fill=\'white\'><path d=\'M16.704 5.293a1 1 0 010 1.414l-7.001 7a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L9 11.586l6.29-6.293a1 1 0 011.414 0z\'/></svg>")';
+const CHECKMARK_DARK =
+  'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\' fill=\'black\'><path d=\'M16.704 5.293a1 1 0 010 1.414l-7.001 7a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L9 11.586l6.29-6.293a1 1 0 011.414 0z\'/></svg>")';
+
+const CHECKBOX_CLASS =
+  'peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-transparent shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 checked:border-primary checked:bg-primary checked:bg-no-repeat checked:bg-center dark:bg-input/30 dark:aria-invalid:ring-destructive/40';
+
+// Inject style once for the checkmark background-image when :checked.
+//
+// Theme selectors are kept in sync with what shadcn's components.json
+// scaffolds for theme switching: explicit `[data-theme='dark']` /
+// `.dark` on `<html>` (set by toggle scripts), AND `prefers-color-
+// scheme: dark` gated by `:not([data-theme='light']):not(.light)` so
+// an explicit-light toggle still wins over the OS preference. Matches
+// the same pattern used elsewhere in the registry.
+const STYLES = `
+input[type="checkbox"][data-slot="checkbox"]:checked {
+  background-image: ${CHECKMARK_LIGHT};
+  background-size: 80%;
+}
+input[type="checkbox"][data-slot="checkbox"]:indeterminate {
+  background-color: var(--primary);
+  background-image: linear-gradient(to right, white, white);
+  background-size: 60% 2px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']):not(.light) input[type="checkbox"][data-slot="checkbox"]:checked {
+    background-image: ${CHECKMARK_DARK};
+  }
+  :root:not([data-theme='light']):not(.light) input[type="checkbox"][data-slot="checkbox"]:indeterminate {
+    background-image: linear-gradient(to right, black, black);
+  }
+}
+:root[data-theme='dark'] input[type="checkbox"][data-slot="checkbox"]:checked,
+:root.dark input[type="checkbox"][data-slot="checkbox"]:checked {
+  background-image: ${CHECKMARK_DARK};
+}
+:root[data-theme='dark'] input[type="checkbox"][data-slot="checkbox"]:indeterminate,
+:root.dark input[type="checkbox"][data-slot="checkbox"]:indeterminate {
+  background-image: linear-gradient(to right, black, black);
+}
+`;
+
+let installed = false;
+export function installCheckboxStyles(): void {
+  if (installed || typeof document === 'undefined') return;
+  if (document.getElementById('ui-checkbox-styles')) {
+    installed = true;
+    return;
+  }
+  const style = document.createElement('style');
+  style.id = 'ui-checkbox-styles';
+  style.textContent = STYLES;
+  document.head.appendChild(style);
+  installed = true;
+}
+
+if (typeof document !== 'undefined') installCheckboxStyles();
+
+/** Tailwind classes for a styled native `<input type="checkbox">`. Add `data-slot="checkbox"` for the checkmark style to apply. */
+export function checkboxClass(): string {
+  return cn(CHECKBOX_CLASS);
+}

package/packages/registry/components/collapsible.ts

@@ -0,0 +1,60 @@
+/**
+ * Collapsible: togglable content panel built on native <details>/<summary>.
+ *
+ * Tier-1 (no custom element). The browser handles open/close state,
+ * keyboard activation (Enter / Space on <summary>), focus management,
+ * and disclosure-widget accessibility, nothing to ship in JS.
+ *
+ * shadcn parity:
+ *   Collapsible         → <details class=${collapsibleClass()}>
+ *   CollapsibleTrigger  → <summary class=${collapsibleTriggerClass()}>
+ *   CollapsibleContent  → <div class=${collapsibleContentClass()}>
+ *
+ * Usage:
+ *   <details class=${collapsibleClass()}>
+ *     <summary class=${collapsibleTriggerClass()}>
+ *       Show details
+ *       <svg class="size-4 transition-transform group-open:rotate-180">…</svg>
+ *     </summary>
+ *     <div class=${collapsibleContentClass()}>
+ *       Hidden until <summary> is clicked, Enter / Space pressed, or the
+ *       <details> element's `open` property is set via JS.
+ *     </div>
+ *   </details>
+ *
+ * Initial state: add `open` on <details> to render expanded on first
+ * paint. Programmatic toggling: `el.open = true | false`. Migrated from
+ * the prior <ui-collapsible> custom element; the trigger class hides
+ * the native disclosure marker so callers can render their own chevron.
+ *
+ * Design tokens used: --border, --ring, --foreground.
+ */
+
+/**
+ * Root: marks the disclosure widget as a `group` so descendants can use
+ * Tailwind's `group-open:` variant to react to the `[open]` attribute
+ * (which `<details>` sets natively). No visual styling of its own.
+ */
+export const collapsibleClass = (): string => 'group';
+
+/**
+ * Trigger: hides the native ::marker (and the WebKit -details-marker shim)
+ * so the disclosure triangle does not appear; callers wrap their own
+ * chevron icon and rotate it on open via `group-open:rotate-180`.
+ *
+ * `disabled: true` returns the visual disabled state. Native <details>
+ * has no `disabled` attribute, so for full keyboard prevention add the
+ * standard `inert` attribute on the <details> element. shadcn's React
+ * `disabled` prop combines both visual and behavior; we split them.
+ */
+export const collapsibleTriggerClass = (opts: { disabled?: boolean } = {}): string => {
+  const base = 'flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-2 focus-visible:ring-ring/50 marker:hidden [&::-webkit-details-marker]:hidden';
+  if (opts.disabled) return `${base} pointer-events-none cursor-not-allowed opacity-50`;
+  return base;
+};
+
+/**
+ * Content: <details> already hides children other than <summary> when
+ * not [open], so this is purely typographic spacing. No display rules.
+ */
+export const collapsibleContentClass = (): string => 'text-sm';