@preset.nz/ux-kit 0.0.0-stage → 0.1.1

package/src/components/breadcrumb.tsx

@@ -0,0 +1,100 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react"
+import type * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+// Plain anchor by default. Pass `render={<RouterLink to="..." />}` for a router link.
+function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      { className: cn("transition-colors hover:text-foreground", className) },
+      props,
+    ),
+    render,
+    state: { slot: "breadcrumb-link" },
+  })
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: the current page is a disabled link (WAI-ARIA breadcrumb pattern), so it is not focusable
+    // biome-ignore lint/a11y/useSemanticElements: a disabled link has no native element; role="link" with aria-disabled is the breadcrumb pattern
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <CaretRightIcon />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <DotsThreeIcon className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+}

package/src/components/button.tsx

@@ -0,0 +1,56 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-sm border border-transparent bg-clip-padding font-heading text-xs font-medium tracking-wide uppercase whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-sm px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-sm px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-sm [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-sm",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/card.tsx

@@ -0,0 +1,75 @@
+import type * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-4 shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("px-4", className)} {...props} />
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-4 [.border-t]:pt-4", className)}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

package/src/components/checkbox.tsx

@@ -0,0 +1,25 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+import { CheckIcon } from "@phosphor-icons/react"
+import { cn } from "../lib/utils"
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-none border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/components/color-field.tsx

@@ -0,0 +1,261 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import { ColorSwatch } from "./color-swatch"
+import { Input } from "./input"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+
+// ColorField: swatch, hex text, optional alpha, preset grid, native picker.
+// Union of M&T's ColorField (presets, hex input), Oblique's colour renderers
+// (native picker, read-only hex, one picker session = one undo step via
+// onPickStart/onPickEnd, optional colour), and Strata's swatch popover
+// (clearable, no-colour chip). Values are hex strings: #rrggbb, or #rrggbbaa
+// when `alpha` is set. The palette engine (presets and derivation) is app
+// domain data and stays in the app; it feeds `presets` and nothing more.
+
+interface Rgba {
+  r: number
+  g: number
+  b: number
+  a: number
+}
+
+/** Parses #rgb, #rgba, #rrggbb or #rrggbbaa (leading # optional). Alpha is 0 to 1. */
+function parseHex(input: string): Rgba | null {
+  let h = input.trim().replace(/^#/, "")
+  if (!/^[0-9a-f]+$/i.test(h)) return null
+  if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("")
+  if (h.length !== 6 && h.length !== 8) return null
+  const n = (i: number) => parseInt(h.slice(i, i + 2), 16)
+  return { r: n(0), g: n(2), b: n(4), a: h.length === 8 ? n(6) / 255 : 1 }
+}
+
+function toHex({ r, g, b, a }: Rgba, withAlpha: boolean): string {
+  const p = (v: number) => Math.round(v).toString(16).padStart(2, "0")
+  return `#${p(r)}${p(g)}${p(b)}${withAlpha ? p(a * 255) : ""}`
+}
+
+interface ColorFieldProps extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> {
+  /** #rrggbb or #rrggbbaa. `null` shows the empty chip and a dash. */
+  value: string | null
+  /** Called with a normalised lowercase hex, or null from the clear button. */
+  onChange?: (value: string | null) => void
+  label?: string
+  /** Shows an alpha percentage field; output is #rrggbbaa. Default false. */
+  alpha?: boolean
+  /** Preset colours as hex. Omit for none. */
+  presets?: string[]
+  /** Adds a "no colour" chip to the popover that calls `onChange(null)`. */
+  clearable?: boolean
+  /** Shows the colour and hex but cannot change them. Also the state when `onChange` is missing. */
+  readOnly?: boolean
+  disabled?: boolean
+  /** The colour a null value falls back to for the native picker. Default #000000. */
+  fallback?: string
+  /** The native picker opened or closed: the app's undo transaction boundary. */
+  onPickStart?: () => void
+  onPickEnd?: () => void
+  /** Extra controls after the fields, e.g. an eyedropper button. */
+  trailing?: React.ReactNode
+}
+
+function ColorField({
+  value: valueProp,
+  onChange,
+  label,
+  alpha = false,
+  presets,
+  clearable = false,
+  readOnly,
+  disabled,
+  fallback = "#000000",
+  onPickStart,
+  onPickEnd,
+  trailing,
+  id,
+  className,
+  ...props
+}: ColorFieldProps) {
+  const generatedId = React.useId()
+  const inputId = id ?? generatedId
+  const locked = !!readOnly || !onChange
+  // During a picker session the field shows only the colour picked so far and ignores incoming
+  // `value` props (an app that round-trips each change would fight the picker); on the picker
+  // closing it re-syncs to the prop.
+  const [live, setLive] = React.useState<string | null>(null)
+  const value = live ?? valueProp
+  const rgba = value ? parseHex(value) : null
+  const shown = value ? (rgba ? toHex(rgba, alpha) : value) : ""
+
+  const [draft, setDraft] = React.useState<string | null>(null)
+  const [alphaDraft, setAlphaDraft] = React.useState<string | null>(null)
+
+  const emit = (next: Rgba) => onChange?.(toHex(next, alpha))
+
+  const commitHex = () => {
+    if (draft === null) return
+    const parsed = parseHex(draft)
+    setDraft(null)
+    if (!parsed) return // invalid text reverts to the current value
+    // An entry without alpha digits keeps the existing alpha.
+    const digits = draft.trim().replace(/^#/, "").length
+    const hasAlpha = digits === 4 || digits === 8
+    emit(alpha && rgba && !hasAlpha ? { ...parsed, a: rgba.a } : parsed)
+  }
+
+  const commitAlpha = () => {
+    if (alphaDraft === null) return
+    const pct = Number(alphaDraft)
+    setAlphaDraft(null)
+    if (!Number.isFinite(pct)) return
+    const base = rgba ?? parseHex(fallback)
+    if (!base) return
+    emit({ ...base, a: Math.min(100, Math.max(0, pct)) / 100 })
+  }
+
+  const pick = (hex: string, session = false) => {
+    const parsed = parseHex(hex)
+    if (!parsed) return
+    if (session) setLive(toHex(parsed, false))
+    // Presets and the native picker carry no alpha of their own unless 8-digit.
+    emit(hex.replace(/^#/, "").length === 8 || !rgba ? parsed : { ...parsed, a: rgba.a })
+  }
+
+  const swatchLabel = label ? `${label} colour` : "Colour"
+  const chip = <ColorSwatch color={value} size="lg" className="size-7" />
+
+  return (
+    <div data-slot="color-field" className={cn("flex flex-col gap-1", className)} {...props}>
+      {label ? (
+        <label
+          htmlFor={inputId}
+          className="text-[11px] font-medium tracking-wide text-muted-foreground"
+        >
+          {label}
+        </label>
+      ) : null}
+      <div className={cn("flex items-center gap-2", disabled && "opacity-50")}>
+        {locked || disabled ? (
+          chip
+        ) : !presets?.length && !clearable ? (
+          // Nothing to offer but the picker: the swatch opens it directly.
+          <label
+            className="relative shrink-0 cursor-pointer rounded-sm focus-within:ring-1 focus-within:ring-ring"
+            title={swatchLabel}
+          >
+            {chip}
+            <input
+              type="color"
+              aria-label={`${swatchLabel} picker`}
+              value={
+                rgba
+                  ? toHex(rgba, false)
+                  : toHex(parseHex(fallback) ?? { r: 0, g: 0, b: 0, a: 1 }, false)
+              }
+              onChange={(e) => pick(e.target.value, true)}
+              onFocus={onPickStart}
+              onBlur={() => {
+                setLive(null)
+                onPickEnd?.()
+              }}
+              className="absolute inset-0 size-full cursor-pointer opacity-0"
+            />
+          </label>
+        ) : (
+          <Popover>
+            <PopoverTrigger
+              aria-label={swatchLabel}
+              className="shrink-0 rounded-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            >
+              {chip}
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-auto gap-2 p-2">
+              {presets?.length || clearable ? (
+                // biome-ignore lint/a11y/useSemanticElements: a div keeps the swatch grid layout; role="group" labels it
+                <div className="grid grid-cols-7 gap-1" role="group" aria-label="Presets">
+                  {presets?.map((c) => (
+                    <button
+                      key={c}
+                      type="button"
+                      aria-label={c}
+                      aria-pressed={value?.toLowerCase() === c.toLowerCase()}
+                      onClick={() => pick(c)}
+                      className="rounded-xs outline-none hover:scale-110 focus-visible:ring-1 focus-visible:ring-ring aria-pressed:ring-2 aria-pressed:ring-foreground/40"
+                    >
+                      <ColorSwatch color={c} size="lg" />
+                    </button>
+                  ))}
+                  {clearable ? (
+                    <button
+                      type="button"
+                      aria-label="No colour"
+                      onClick={() => onChange?.(null)}
+                      className="rounded-xs outline-none hover:scale-110 focus-visible:ring-1 focus-visible:ring-ring"
+                    >
+                      <ColorSwatch color={null} size="lg" />
+                    </button>
+                  ) : null}
+                </div>
+              ) : null}
+              <input
+                type="color"
+                aria-label={`${swatchLabel} picker`}
+                value={
+                  rgba
+                    ? toHex(rgba, false)
+                    : toHex(parseHex(fallback) ?? { r: 0, g: 0, b: 0, a: 1 }, false)
+                }
+                onChange={(e) => pick(e.target.value, true)}
+                onFocus={onPickStart}
+                onBlur={() => {
+                  setLive(null)
+                  onPickEnd?.()
+                }}
+                className="h-8 w-full cursor-pointer rounded-xs border border-border bg-transparent"
+              />
+            </PopoverContent>
+          </Popover>
+        )}
+        <Input
+          id={inputId}
+          value={draft ?? (value ? shown : "")}
+          placeholder="—"
+          readOnly={locked}
+          disabled={disabled}
+          spellCheck={false}
+          aria-label={label ? `${label} hex` : "Hex"}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commitHex}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commitHex()
+            if (e.key === "Escape") setDraft(null)
+          }}
+          className="flex-1 font-mono"
+        />
+        {alpha ? (
+          <div className="flex w-16 shrink-0 items-center gap-1 text-xs text-muted-foreground">
+            <Input
+              inputMode="numeric"
+              value={alphaDraft ?? (rgba ? String(Math.round(rgba.a * 100)) : "")}
+              readOnly={locked}
+              disabled={disabled}
+              aria-label={label ? `${label} alpha` : "Alpha"}
+              onChange={(e) => setAlphaDraft(e.target.value)}
+              onBlur={commitAlpha}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") commitAlpha()
+                if (e.key === "Escape") setAlphaDraft(null)
+              }}
+              className="text-right tabular-nums"
+            />
+            %
+          </div>
+        ) : null}
+        {trailing}
+      </div>
+    </div>
+  )
+}
+
+export type { ColorFieldProps }
+export { ColorField, parseHex, toHex }

package/src/components/color-swatch.tsx

@@ -0,0 +1,52 @@
+import type * as React from "react"
+
+import { cn } from "../lib/utils"
+
+// A colour chip. Any CSS colour string works; `null` draws the dashed "no
+// colour" chip (Strata's colour label, Oblique's disabled optional colour).
+// A checkerboard sits under the colour so transparency reads as transparency.
+
+const CHECKER =
+  "conic-gradient(var(--muted) 25%, transparent 0 50%, var(--muted) 0 75%, transparent 0) 0 0 / 8px 8px"
+
+interface ColorSwatchProps extends Omit<React.ComponentProps<"span">, "color"> {
+  /** A CSS colour (#rrggbbaa, rgb(), a variable), or null for none. */
+  color?: string | null
+  /** `sm` 12px, `md` 16px, `lg` 24px. */
+  size?: "sm" | "md" | "lg"
+  shape?: "square" | "round"
+}
+
+function ColorSwatch({
+  color,
+  size = "md",
+  shape = "square",
+  className,
+  style,
+  ...props
+}: ColorSwatchProps) {
+  return (
+    <span
+      data-slot="color-swatch"
+      data-empty={color ? undefined : ""}
+      role={props["aria-label"] ? "img" : undefined}
+      aria-hidden={props["aria-label"] ? undefined : true}
+      className={cn(
+        "relative inline-block shrink-0 overflow-hidden border border-border",
+        size === "sm" && "size-3",
+        size === "md" && "size-4",
+        size === "lg" && "size-6",
+        shape === "round" ? "rounded-full" : "rounded-xs",
+        !color && "border-dashed border-muted-foreground/60",
+        className,
+      )}
+      style={color ? { background: CHECKER, ...style } : style}
+      {...props}
+    >
+      {color ? <span className="absolute inset-0" style={{ backgroundColor: color }} /> : null}
+    </span>
+  )
+}
+
+export type { ColorSwatchProps }
+export { ColorSwatch }