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

package/src/components/slider.tsx

@@ -0,0 +1,71 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+// Pass a number for one thumb or an array for a range; one thumb per value.
+// While a thumb is dragged the slider shows only its own value and ignores incoming `value`
+// props (an app that round-trips every change would fight the pointer with stale values); on
+// release it re-syncs to the prop. The track and thumb are neutral, not the accent: a slider
+// is read at a glance and a coloured fill is noise next to the fields around it.
+function Slider({
+  className,
+  defaultValue,
+  value: valueProp,
+  onValueChange,
+  onValueCommitted,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const [live, setLive] = React.useState<typeof valueProp | null>(null)
+  const value = live ?? valueProp
+  const _values = React.useMemo(
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min]),
+    [value, defaultValue, min],
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      onValueChange={(v, d) => {
+        if (valueProp !== undefined) setLive(v)
+        onValueChange?.(v, d)
+      }}
+      onValueCommitted={(v, d) => {
+        setLive(null)
+        onValueCommitted?.(v, d)
+      }}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      className={cn("data-[orientation=vertical]:h-full", className)}
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-none bg-muted select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-muted-foreground/50 select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional; the count is fixed by the value array and they have no identity
+            key={index}
+            index={index}
+            className="block h-4 w-2 shrink-0 rounded-[1px] border border-muted-foreground bg-background ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden has-[:focus-visible]:ring-4 data-disabled:pointer-events-none data-disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/src/components/snackbar.tsx

@@ -0,0 +1,143 @@
+import { Toast } from "@base-ui/react/toast"
+import { CheckCircleIcon, WarningIcon, XCircleIcon, XIcon } from "@phosphor-icons/react"
+import type * as React from "react"
+
+import { cn } from "../lib/utils"
+
+// The kit's one toast: Strata's snackbar, on Base UI Toast.
+// One manager for the module, so `notify()` works outside React. Mount one provider per window.
+const manager = Toast.createToastManager()
+
+export function SnackbarProvider({ children }: { children: React.ReactNode }) {
+  return <Toast.Provider toastManager={manager}>{children}</Toast.Provider>
+}
+
+export function SnackbarViewport({ className }: { className?: string }) {
+  return (
+    <Toast.Viewport
+      className={cn(
+        "pointer-events-none absolute bottom-3 left-3 z-50 flex w-72 flex-col gap-2 outline-none",
+        className,
+      )}
+    >
+      <SnackbarList />
+    </Toast.Viewport>
+  )
+}
+
+export type SnackbarKind = "plain" | "success" | "warning" | "error"
+
+// Colour per kind, from the kit's tokens. Warning fills with `--warning`; the others keep the
+// popover surface and take the kind from the icon and a coloured leading edge.
+const KIND: Record<SnackbarKind, { root: string; icon: React.ReactNode | null }> = {
+  plain: { root: "", icon: null },
+  success: {
+    root: "border-l-2 border-l-primary",
+    icon: <CheckCircleIcon weight="fill" className="mt-px size-4 shrink-0 text-primary" />,
+  },
+  warning: {
+    root: "border-warning bg-warning text-warning-foreground",
+    icon: <WarningIcon weight="fill" className="mt-px size-4 shrink-0" />,
+  },
+  error: {
+    root: "border-l-2 border-l-destructive",
+    icon: <XCircleIcon weight="fill" className="mt-px size-4 shrink-0 text-destructive" />,
+  },
+}
+
+function SnackbarList() {
+  const { toasts } = Toast.useToastManager()
+  return (
+    <>
+      {toasts.map((t) => {
+        const kind = KIND[(t.type as SnackbarKind | undefined) ?? "plain"] ?? KIND.plain
+        return (
+          <Toast.Root
+            key={t.id}
+            toast={t}
+            className={cn(
+              "pointer-events-auto flex items-start gap-2 rounded-sm border border-border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-md outline-none",
+              "transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+              kind.root,
+            )}
+          >
+            {kind.icon}
+            <div className="min-w-0 flex-1">
+              <Toast.Title className="font-medium">{t.title}</Toast.Title>
+              {t.description && (
+                <Toast.Description className="mt-0.5 opacity-80">{t.description}</Toast.Description>
+              )}
+            </div>
+            <Toast.Action
+              className={cn(
+                "inline-flex items-center rounded-sm px-2 py-0.5 text-xs font-medium",
+                "text-current/80 hover:bg-foreground/10 hover:text-current",
+                "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+              )}
+            />
+            <Toast.Close
+              aria-label="Dismiss"
+              className={cn(
+                "inline-flex size-4 items-center justify-center rounded-sm",
+                "opacity-60 hover:bg-foreground/10 hover:opacity-100",
+                "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+              )}
+            >
+              <XIcon weight="bold" className="size-3" />
+            </Toast.Close>
+          </Toast.Root>
+        )
+      })}
+    </>
+  )
+}
+
+export type SnackbarOptions = {
+  message: string
+  /** A second line under the message. */
+  description?: React.ReactNode
+  /** Plain by default. */
+  kind?: SnackbarKind
+  action?: { label: string; onClick: () => void }
+  /** Milliseconds before it goes; 5000 by default. */
+  timeout?: number
+  /** Stays until dismissed (`dismiss(id)` or its close button). Wins over `timeout`. */
+  persistent?: boolean
+}
+
+type Manager = Pick<ReturnType<typeof Toast.createToastManager>, "add" | "close">
+
+const show = (m: Manager, opts: SnackbarOptions) =>
+  m.add({
+    title: opts.message,
+    description: opts.description,
+    type: opts.kind ?? "plain",
+    timeout: opts.persistent ? 0 : (opts.timeout ?? 5000),
+    actionProps: opts.action
+      ? { children: opts.action.label, onClick: opts.action.onClick }
+      : undefined,
+  })
+
+// Must be called under a SnackbarProvider.
+export function useSnackbar() {
+  const m = Toast.useToastManager()
+  return {
+    /** Returns the toast's id, for `dismiss`. */
+    show: (opts: SnackbarOptions) => show(m, opts),
+    /** One toast by id, or every toast with no id. */
+    dismiss: (id?: string) => m.close(id),
+  }
+}
+
+/**
+ * Raise a snackbar from anywhere, no hook: command handlers, stores, event listeners. Needs a
+ * mounted SnackbarProvider to show it. Same options as `useSnackbar().show`; returns the id.
+ */
+export function notify(opts: SnackbarOptions): string {
+  return show(manager, opts)
+}
+
+/** Dismiss one toast by id, or every toast with no id; the counterpart of `notify`. */
+export function dismissNotification(id?: string) {
+  manager.close(id)
+}

package/src/components/status-bar.tsx

@@ -0,0 +1,45 @@
+import type * as React from "react"
+
+import { cn } from "../lib/utils"
+
+// StatusBar: a thin bar at the bottom for document state, counts and transient
+// messages (ux-patterns.md). `StatusBar` is the strip, `StatusItem` one cell,
+// `StatusSpacer` pushes what follows to the right. Contents stay app-side.
+
+function StatusBar({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="status-bar"
+      role="status"
+      className={cn(
+        "flex h-6 shrink-0 items-center gap-3 border-t border-border bg-background px-3 text-xs text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+interface StatusItemProps extends React.ComponentProps<"span"> {
+  /** Small leading label, e.g. "Nodes". */
+  label?: string
+}
+
+function StatusItem({ label, className, children, ...props }: StatusItemProps) {
+  return (
+    <span
+      data-slot="status-item"
+      className={cn("flex items-center gap-1 tabular-nums", className)}
+      {...props}
+    >
+      {label ? <span className="opacity-70">{label}</span> : null}
+      <span className="text-foreground">{children}</span>
+    </span>
+  )
+}
+
+function StatusSpacer({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="status-spacer" className={cn("flex-1", className)} {...props} />
+}
+
+export { StatusBar, StatusItem, StatusSpacer }

package/src/components/tabs.tsx

@@ -0,0 +1,75 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      orientation={orientation}
+      className={cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+// Base UI calls the trigger `Tab` and the content `Panel`; the kit keeps the
+// shadcn names (TabsTrigger, TabsContent) so apps read the same.
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants }

package/src/components/textarea.tsx

@@ -0,0 +1,18 @@
+import type * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex min-h-20 w-full rounded-none border border-input bg-transparent px-2.5 py-2 text-xs transition-colors outline-none placeholder:text-muted-foreground 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 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/toggle-group.tsx

@@ -0,0 +1,86 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import type { VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import { toggleVariants } from "./toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal",
+})
+
+// Base UI: `value` is always an array and `multiple` replaces Radix's
+// `type="single" | "multiple"`. Items are keyed by their `value` prop.
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/toggle.tsx

@@ -0,0 +1,43 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground 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 data-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-muted",
+      },
+      size: {
+        default:
+          "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }