@preset.nz/ux-kit 0.1.0 → 0.1.2

package/src/components/breadcrumb.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
 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"
 
@@ -15,7 +15,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"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
+        className,
       )}
       {...props}
     />
@@ -33,16 +33,12 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 // Plain anchor by default. Pass `render={<RouterLink to="..." />}` for a router link.
-function BreadcrumbLink({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"a">) {
+function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">) {
   return useRender({
     defaultTagName: "a",
     props: mergeProps<"a">(
       { className: cn("transition-colors hover:text-foreground", className) },
-      props
+      props,
     ),
     render,
     state: { slot: "breadcrumb-link" },
@@ -51,6 +47,8 @@ function BreadcrumbLink({
 
 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"
@@ -93,10 +91,10 @@ function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span"
 
 export {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
 }

package/src/components/button.tsx

@@ -35,7 +35,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 )
 
 function Button({

package/src/components/card.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
@@ -52,23 +52,14 @@ 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,
-      )}
+      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}
-    />
-  )
+  return <div data-slot="card-content" className={cn("px-4", className)} {...props} />
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -81,12 +72,4 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

package/src/components/checkbox.tsx

@@ -1,7 +1,6 @@
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
-
-import { cn } from "../lib/utils"
 import { CheckIcon } from "@phosphor-icons/react"
+import { cn } from "../lib/utils"
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
@@ -9,7 +8,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
       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
+        className,
       )}
       {...props}
     >
@@ -17,8 +16,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <CheckIcon
-        />
+        <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

package/src/components/color-field.tsx

@@ -35,8 +35,7 @@ function toHex({ r, g, b, a }: Rgba, withAlpha: boolean): string {
   return `#${p(r)}${p(g)}${p(b)}${withAlpha ? p(a * 255) : ""}`
 }
 
-interface ColorFieldProps
-  extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> {
+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. */
@@ -109,7 +108,9 @@ function ColorField({
     const pct = Number(alphaDraft)
     setAlphaDraft(null)
     if (!Number.isFinite(pct)) return
-    emit({ ...(rgba ?? parseHex(fallback)!), a: Math.min(100, Math.max(0, pct)) / 100 })
+    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) => {
@@ -126,7 +127,10 @@ function ColorField({
   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
+          htmlFor={inputId}
+          className="text-[11px] font-medium tracking-wide text-muted-foreground"
+        >
           {label}
         </label>
       ) : null}
@@ -143,7 +147,11 @@ function ColorField({
             <input
               type="color"
               aria-label={`${swatchLabel} picker`}
-              value={rgba ? toHex(rgba, false) : toHex(parseHex(fallback) ?? { r: 0, g: 0, b: 0, a: 1 }, false)}
+              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={() => {
@@ -163,6 +171,7 @@ function ColorField({
             </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
@@ -191,7 +200,11 @@ function ColorField({
               <input
                 type="color"
                 aria-label={`${swatchLabel} picker`}
-                value={rgba ? toHex(rgba, false) : toHex(parseHex(fallback) ?? { r: 0, g: 0, b: 0, a: 1 }, false)}
+                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={() => {
@@ -244,5 +257,5 @@ function ColorField({
   )
 }
 
-export { ColorField, parseHex, toHex }
 export type { ColorFieldProps }
+export { ColorField, parseHex, toHex }

package/src/components/color-swatch.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
@@ -38,7 +38,7 @@ function ColorSwatch({
         size === "lg" && "size-6",
         shape === "round" ? "rounded-full" : "rounded-xs",
         !color && "border-dashed border-muted-foreground/60",
-        className
+        className,
       )}
       style={color ? { background: CHECKER, ...style } : style}
       {...props}
@@ -48,5 +48,5 @@ function ColorSwatch({
   )
 }
 
-export { ColorSwatch }
 export type { ColorSwatchProps }
+export { ColorSwatch }

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,93 @@
+import * as React from "react"
+import { AlertShell } from "./alert-shell"
+import { Button } from "./button"
+
+// ConfirmDialog: ask before something that can't be taken back. Controlled
+// only; the caller owns `open`. It is answered, not dismissed: no close "x",
+// and a click outside does nothing, so Cancel and Escape are the ways out.
+
+interface ConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  /** The body: text, or a node (a list of apps, a size). */
+  children?: React.ReactNode
+  /** What the action is called: "Remove", never "OK". */
+  confirmLabel: string
+  /** Defaults to "Cancel". */
+  cancelLabel?: string
+  /** Confirm uses the destructive Button variant and initial focus is Cancel. */
+  destructive?: boolean
+  /** While a returned promise is pending the dialog stays open; a rejection keeps it open. */
+  onConfirm: () => void | Promise<void>
+}
+
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  children,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  destructive = false,
+  onConfirm,
+}: ConfirmDialogProps) {
+  const [pending, setPending] = React.useState(false)
+  const cancelRef = React.useRef<HTMLButtonElement>(null)
+  const confirmRef = React.useRef<HTMLButtonElement>(null)
+
+  // Nothing closes the dialog while the action runs.
+  const handleOpenChange = (next: boolean) => {
+    if (pending && !next) return
+    onOpenChange(next)
+  }
+
+  const handleConfirm = async () => {
+    if (pending) return
+    setPending(true)
+    try {
+      await onConfirm()
+    } catch {
+      // The caller shows its own failure; the dialog stays open.
+      setPending(false)
+      return
+    }
+    setPending(false)
+    onOpenChange(false)
+  }
+
+  return (
+    <AlertShell
+      open={open}
+      onDismiss={() => handleOpenChange(false)}
+      title={title}
+      initialFocus={destructive ? cancelRef : confirmRef}
+      footer={
+        <>
+          <Button
+            ref={cancelRef}
+            variant="outline"
+            disabled={pending}
+            onClick={() => handleOpenChange(false)}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            ref={confirmRef}
+            variant={destructive ? "destructive" : "default"}
+            disabled={pending}
+            focusableWhenDisabled
+            onClick={handleConfirm}
+          >
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      {children}
+    </AlertShell>
+  )
+}
+
+export type { ConfirmDialogProps }
+export { ConfirmDialog }

package/src/components/context-menu.tsx

@@ -1,9 +1,12 @@
-import * as React from "react"
 import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
 import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
+// Base UI: `ContextMenuLabel` is Base UI's `GroupLabel`, so it must sit inside a `ContextMenuGroup`.
+// Same shape as DropdownMenu.
+
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
 }
@@ -44,7 +47,7 @@ function ContextMenuContent({
           data-slot="context-menu-content"
           className={cn(
             "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
+            className,
           )}
           {...props}
         />
@@ -68,7 +71,7 @@ function ContextMenuLabel({
       data-inset={inset}
       className={cn(
         "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8",
-        className
+        className,
       )}
       {...props}
     />
@@ -91,7 +94,7 @@ function ContextMenuItem({
       data-variant={variant}
       className={cn(
         "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
-        className
+        className,
       )}
       {...props}
     />
@@ -114,7 +117,7 @@ function ContextMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -157,7 +160,7 @@ function ContextMenuCheckboxItem({
       data-inset={inset}
       className={cn(
         "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -190,7 +193,7 @@ function ContextMenuRadioItem({
       data-inset={inset}
       className={cn(
         "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -223,7 +226,7 @@ function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span
       data-slot="context-menu-shortcut"
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
-        className
+        className,
       )}
       {...props}
     />
@@ -232,18 +235,18 @@ function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span
 
 export {
   ContextMenu,
-  ContextMenuPortal,
-  ContextMenuTrigger,
+  ContextMenuCheckboxItem,
   ContextMenuContent,
   ContextMenuGroup,
-  ContextMenuLabel,
   ContextMenuItem,
-  ContextMenuCheckboxItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
   ContextMenuSeparator,
   ContextMenuShortcut,
   ContextMenuSub,
-  ContextMenuSubTrigger,
   ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
 }

package/src/components/dialog.tsx

@@ -1,10 +1,13 @@
-import * as React from "react"
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 import { XIcon } from "@phosphor-icons/react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 import { Button } from "./button"
 
+// Dialog: Base UI Dialog in the kit's theme. Triggers and closers take
+// `render={<Button />}` where Radix used `asChild`.
+
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
@@ -27,7 +30,7 @@ function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props)
       data-slot="dialog-overlay"
       className={cn(
         "fixed inset-0 isolate z-50 bg-foreground/15 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -49,7 +52,7 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
+          className,
         )}
         {...props}
       >
@@ -70,11 +73,7 @@ function DialogContent({
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
+    <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />
   )
 }
 
@@ -116,7 +115,7 @@ function DialogDescription({ className, ...props }: DialogPrimitive.Description.
       data-slot="dialog-description"
       className={cn(
         "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/download-prompt.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import { AlertShell } from "./alert-shell"
+import { Button } from "./button"
+import { formatBytes, Progress } from "./progress"
+
+// DownloadPrompt: one dialog for a download, in three states the caller drives:
+// ask first, show progress, offer Retry. It owns no timer and no network; the
+// caller sets `state` to null when the download is done. Escape always means
+// "stop": Not now, Cancel, Close.
+
+type DownloadPromptProps = {
+  /** `null` is closed. */
+  state: "ask" | "downloading" | "failed" | null
+  /** "Smart Select needs a model". */
+  title: string
+  /** What is being downloaded: "MobileSAM". */
+  name: string
+  /** Formatted by the caller; an omitted fact is left out of the line. */
+  facts: { size?: string; licence?: string; host?: string }
+  /** Bytes, while downloading. Without it the bar is indeterminate. */
+  progress?: { done: number; total: number }
+  /** One line, when failed. */
+  reason?: string
+  /** ask: Download. */
+  onDownload: () => void
+  /** ask: Not now. failed: Close. */
+  onDismiss: () => void
+  /** downloading: Cancel. */
+  onCancel: () => void
+  /** failed: Retry. */
+  onRetry: () => void
+}
+
+function DownloadPrompt(props: DownloadPromptProps) {
+  // Keep the last open props so the closing animation shows the old content, not a blank dialog.
+  const last = React.useRef<DownloadPromptProps & { state: "ask" | "downloading" | "failed" }>(null)
+  if (props.state !== null) last.current = { ...props, state: props.state }
+  const shown = last.current
+  const focusRef = React.useRef<HTMLButtonElement>(null)
+
+  // initialFocus only acts on open. A state change swaps the buttons out from under the focus,
+  // so move it to the new state's default button.
+  React.useEffect(() => {
+    if (props.state !== null) focusRef.current?.focus()
+  }, [props.state])
+
+  if (shown === null) return null
+  const { state, title, name, facts, progress, reason } = shown
+  // Callbacks come from the live props: the stored copy may be a render old.
+  const live = props
+  const onEscape = state === "downloading" ? live.onCancel : live.onDismiss
+
+  const factLine = [facts.size, facts.licence, facts.host ? `from ${facts.host}` : undefined]
+    .filter(Boolean)
+    .join(" · ")
+
+  return (
+    <AlertShell
+      open={props.state !== null}
+      onDismiss={onEscape}
+      title={title}
+      initialFocus={focusRef}
+      footer={
+        state === "ask" ? (
+          <>
+            <Button variant="outline" onClick={live.onDismiss}>
+              Not now
+            </Button>
+            <Button ref={focusRef} onClick={live.onDownload}>
+              Download
+            </Button>
+          </>
+        ) : state === "downloading" ? (
+          <Button ref={focusRef} variant="outline" onClick={live.onCancel}>
+            Cancel
+          </Button>
+        ) : (
+          <>
+            <Button variant="outline" onClick={live.onDismiss}>
+              Close
+            </Button>
+            <Button ref={focusRef} onClick={live.onRetry}>
+              Retry
+            </Button>
+          </>
+        )
+      }
+    >
+      <p className="font-medium text-foreground">{name}</p>
+      {state === "ask" && factLine ? <p className="mt-1">{factLine}</p> : null}
+      {state === "downloading" ? (
+        <Progress
+          className="mt-3"
+          label={name}
+          value={progress ? progress.done : null}
+          max={progress?.total}
+          detail={
+            progress ? `${formatBytes(progress.done)} / ${formatBytes(progress.total)}` : undefined
+          }
+        />
+      ) : null}
+      {state === "failed" && reason ? <p className="mt-1">{reason}</p> : null}
+    </AlertShell>
+  )
+}
+
+export type { DownloadPromptProps }
+export { DownloadPrompt }