@vvedantb/ui 0.0.0-stage → 0.1.1

package/src/ui/spinner.tsx

@@ -0,0 +1,27 @@
+import { IconLoader2 } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+
+const sizeClasses = {
+  sm: "size-4",
+  md: "size-6",
+  lg: "size-8",
+};
+
+function Spinner({
+  size = "md",
+  className,
+  ...props
+}: Omit<React.ComponentPropsWithoutRef<"svg">, "size" | "stroke"> & {
+  size?: "sm" | "md" | "lg";
+}) {
+  return (
+    <IconLoader2
+      role="status"
+      aria-label="Loading"
+      className={cn("animate-spin text-muted", sizeClasses[size], className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/src/ui/surface-classes.ts

@@ -0,0 +1,55 @@
+export const overlaySurfaceClass =
+  "bg-overlay text-overlay-foreground smooth-shadow-ring-xl";
+
+export const modalBackdropClass = "bg-backdrop backdrop-blur-md";
+
+export const staticSurfaceClass =
+  "bg-surface-secondary text-surface-foreground border-0 shadow-none backdrop-blur-none";
+
+export const flatElevatedSurfaceClass =
+  "bg-surface text-surface-foreground border-0 shadow-none backdrop-blur-none";
+
+export const flatElevatedSurfaceHoverClass =
+  "transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary";
+
+export const flatElevatedSurfaceFocusClass = "focus-within:outline-hidden";
+
+export const chatInputContainerClass =
+  "bg-surface-secondary text-foreground shadow-none backdrop-blur-none";
+
+export const flatPanelSubtleClass =
+  "bg-surface-secondary text-foreground border-0 shadow-none backdrop-blur-none";
+
+export const flatPanelSubtleHoverClass =
+  "transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-tertiary";
+
+export const flatInteractiveClass =
+  "border-0 bg-transparent shadow-none backdrop-blur-none transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-secondary hover:text-foreground";
+
+export const segmentActiveClass = "bg-segment text-segment-foreground";
+
+export const segmentActiveStateClass =
+  "data-[state=active]:bg-segment data-[state=active]:text-segment-foreground";
+
+export const segmentOpenStateClass =
+  "data-[state=open]:bg-segment data-[state=open]:text-segment-foreground";
+
+export const segmentExpandedStateClass =
+  "aria-expanded:bg-segment aria-expanded:text-segment-foreground";
+
+export const defaultActiveClass = "bg-default text-default-foreground";
+
+export const defaultSelectedStateClass =
+  "data-[state=selected]:bg-default data-[state=selected]:text-default-foreground";
+
+export const defaultActiveStateClass =
+  "data-[state=active]:bg-default data-[state=active]:text-default-foreground";
+
+export const menuItemHighlightClass =
+  "focus:bg-surface-tertiary focus:text-foreground data-highlighted:bg-surface-tertiary data-highlighted:text-foreground";
+
+export const menuItemEmphasisHighlightClass =
+  "focus:bg-default focus:text-default-foreground data-highlighted:bg-default data-highlighted:text-default-foreground data-[state=open]:bg-default data-[state=open]:text-default-foreground";
+
+export const menuListSelectedClass =
+  "data-[selected=true]:bg-default data-[selected=true]:text-default-foreground";

package/src/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../utils/cn";
+
+const Switch = React.forwardRef<
+  React.ComponentRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(
+      "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-border bg-default transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=unchecked]:bg-default before:absolute before:inset-[-8px] before:content-['']",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-[transform,background-color] duration-200 ease-smooth data-[state=checked]:translate-x-4 data-[state=checked]:bg-accent-foreground data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

package/src/ui/table.tsx

@@ -0,0 +1,123 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto rounded-lg max-sm:min-w-0 max-sm:max-w-full">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn("[&_tr]:border-b [&_tr]:border-separator", className)}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t border-separator bg-surface-secondary/30 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-separator transition-colors duration-200 ease-smooth hover:bg-surface-tertiary/50 data-[state=selected]:bg-surface-secondary",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-widest text-muted [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/src/ui/tabs.tsx

@@ -0,0 +1,140 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../utils/cn";
+import { assignRef } from "../utils/ref";
+import { syncTabsPill } from "./tabsSliding";
+
+const Tabs = TabsPrimitive.Root;
+
+// `pills` (default): isolated rounded pills with a gap, no shared track.
+// `segmented`: connected bar with a sliding pill, kept for marketing surfaces.
+type TabsListVariant = "pills" | "segmented";
+
+const TabsList = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: TabsListVariant;
+  }
+>(({ className, children, variant = "pills", ...props }, ref) => {
+  const listRef = React.useRef<React.ComponentRef<
+    typeof TabsPrimitive.List
+  > | null>(null);
+  const pillRef = React.useRef<HTMLSpanElement>(null);
+  const pillReadyRef = React.useRef(false);
+
+  const mergedRef = React.useCallback(
+    (node: React.ComponentRef<typeof TabsPrimitive.List> | null) => {
+      listRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref],
+  );
+
+  React.useLayoutEffect(() => {
+    const list = listRef.current;
+    const pill = pillRef.current;
+    if (!list || !pill) {
+      return;
+    }
+
+    const snap = () => {
+      syncTabsPill(list, pill, false);
+    };
+
+    const animate = () => {
+      syncTabsPill(list, pill, true);
+    };
+
+    snap();
+
+    requestAnimationFrame(() => {
+      pillReadyRef.current = true;
+    });
+
+    const onWindowResize = () => {
+      snap();
+    };
+    window.addEventListener("resize", onWindowResize);
+
+    const resizeObserver = new ResizeObserver(() => {
+      snap();
+    });
+    resizeObserver.observe(list);
+
+    const mutationObserver = new MutationObserver(() => {
+      if (pillReadyRef.current) {
+        animate();
+      } else {
+        snap();
+      }
+    });
+    mutationObserver.observe(list, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-state", "aria-selected"],
+    });
+
+    return () => {
+      window.removeEventListener("resize", onWindowResize);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [variant]);
+
+  return (
+    <TabsPrimitive.List
+      ref={mergedRef}
+      className={cn(
+        "t-tabs max-sm:max-w-full max-sm:justify-center-safe max-sm:overflow-x-auto max-sm:scrollbar-none",
+        variant === "segmented" ? "t-tabs--segmented" : "t-tabs--pills",
+        className,
+      )}
+      data-variant={variant}
+      {...props}
+    >
+      {variant === "segmented" ? (
+        <span ref={pillRef} className="t-tabs-pill" aria-hidden="true" />
+      ) : null}
+      {children}
+    </TabsPrimitive.List>
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "t-tab inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// raw radix primitives, use these when you need a tabs layout that the
+// styled `tabs`/`tabslist`/`tabstrigger`/`tabscontent` defaults don't fit
+// (e.g a vertical sidebar of tabs inside a popover) the styled exports
+// above are tuned for horizontal pill, style tab bars
+export { TabsPrimitive };
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/ui/tabsSliding.ts

@@ -0,0 +1,56 @@
+// transitions.dev tabs sliding, see 16, tabs, sliding.md
+
+function findActiveTab(list: HTMLElement): HTMLElement | null {
+  const tabs = list.querySelectorAll<HTMLElement>(".t-tab");
+  for (const tab of tabs) {
+    if (
+      tab.getAttribute("aria-selected") === "true" ||
+      tab.getAttribute("data-state") === "active"
+    ) {
+      return tab;
+    }
+  }
+  if (tabs.length === 0) {
+    return null;
+  }
+  return tabs[0] ?? null;
+}
+
+function moveTabsPill(
+  pill: HTMLElement,
+  tab: HTMLElement,
+  animate: boolean,
+): void {
+  const left = tab.offsetLeft;
+  const width = tab.offsetWidth;
+  const top = tab.offsetTop;
+  const height = tab.offsetHeight;
+
+  if (!animate) {
+    const previousTransition = pill.style.transition;
+    pill.style.transition = "none";
+    pill.style.transform = `translateX(${left}px)`;
+    pill.style.width = `${width}px`;
+    pill.style.top = `${top}px`;
+    pill.style.height = `${height}px`;
+    void pill.offsetWidth;
+    pill.style.transition = previousTransition;
+    return;
+  }
+
+  pill.style.transform = `translateX(${left}px)`;
+  pill.style.width = `${width}px`;
+  pill.style.top = `${top}px`;
+  pill.style.height = `${height}px`;
+}
+
+export function syncTabsPill(
+  list: HTMLElement,
+  pill: HTMLElement,
+  animate: boolean,
+): void {
+  const tab = findActiveTab(list);
+  if (tab) {
+    moveTabsPill(pill, tab, animate);
+  }
+}

package/src/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-20 w-full max-sm:min-w-0 rounded-none border border-border bg-field-background px-3.5 py-2.5 text-base sm:text-sm placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/ui/time-picker.tsx

@@ -0,0 +1,170 @@
+import * as React from "react";
+import { IconClock } from "@tabler/icons-react";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { cn } from "../utils/cn";
+
+// custom 24, hour "hh:mm" time picker replaces `<input type="time">` because the native picker varies wildly
+// across browsers and platforms (chrome/firefox/safari each render a
+// different control, and the spinner buttons feel laggy on windows) ux:, the trigger is styled like an input, same height/border/radius, so it slots into forms without bespoke alignment work, clicking the trigger (or its clock icon) opens a popover with two scrollable columns: hours 00, 23 on the left, minutes 00, 59 on the right click an item to select, the popover stays open so users can set both halves in one trip, selected items use the same `bg, surface, tertiary` treatment used elsewhere for active states, no rings or borders, matching the design system the component is fully controlled, `value` is always "hh:mm" 24h and
+// the consumer is responsible for any local↔utc conversion that keeps
+// the picker free of timezone logic and matches how the rest of the
+// codebase (e.g dream mode) shapes scheduling values
+interface TimePickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  // width of the trigger button defaults to a compact 110px
+  triggerClassName?: string;
+}
+
+const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
+const MINUTES = Array.from({ length: 60 }, (_, i) =>
+  String(i).padStart(2, "0"),
+);
+
+function parseValue(value: string): { hour: string; minute: string } {
+  const match = /^(\d{2}):(\d{2})$/.exec(value);
+  if (match) {
+    const hour = match[1];
+    const minute = match[2];
+    if (hour !== undefined && minute !== undefined) {
+      return { hour, minute };
+    }
+  }
+  return { hour: "00", minute: "00" };
+}
+
+// auto, scroll a column to its selected item when the popover opens using
+// `scrollintoview({ block: "centre" })` is good enough, the popover only
+// has 2 columns and a fixed height, so we don't need a custom scroll calc
+function useScrollSelectedIntoView(
+  ref: React.RefObject<HTMLDivElement | null>,
+  selector: string,
+  open: boolean,
+): void {
+  React.useEffect(() => {
+    if (!open) return;
+    const root = ref.current;
+    if (!root) return;
+    const target = root.querySelector(selector);
+    if (target instanceof HTMLElement) {
+      target.scrollIntoView({ block: "center", behavior: "auto" });
+    }
+  }, [open, ref, selector]);
+}
+
+const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
+  (
+    { value, onChange, className, disabled, ariaLabel, triggerClassName },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const { hour, minute } = parseValue(value);
+    const hoursRef = React.useRef<HTMLDivElement | null>(null);
+    const minutesRef = React.useRef<HTMLDivElement | null>(null);
+
+    useScrollSelectedIntoView(hoursRef, `[data-time-value="${hour}"]`, open);
+    useScrollSelectedIntoView(
+      minutesRef,
+      `[data-time-value="${minute}"]`,
+      open,
+    );
+
+    const handleHourSelect = (h: string) => {
+      onChange(`${h}:${minute}`);
+    };
+    const handleMinuteSelect = (m: string) => {
+      onChange(`${hour}:${m}`);
+    };
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={ref}
+            type="button"
+            disabled={disabled}
+            aria-label={ariaLabel}
+            className={cn(
+              "inline-flex h-8 items-center justify-between gap-2 rounded-field border border-border bg-field-background px-2.5 text-xs font-medium tabular-nums transition-[border-color,box-shadow,background-color] duration-200 ease-smooth hover:bg-field-background/90 focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+              triggerClassName ?? "w-[110px]",
+              className,
+            )}
+          >
+            <span>{`${hour}:${minute}`}</span>
+            <IconClock className="h-3.5 w-3.5 text-muted" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="end"
+          sideOffset={4}
+          className="flex w-auto gap-1 p-2"
+        >
+          <TimeColumn
+            ref={hoursRef}
+            label="Hours"
+            values={HOURS}
+            selected={hour}
+            onSelect={handleHourSelect}
+          />
+          <TimeColumn
+            ref={minutesRef}
+            label="Minutes"
+            values={MINUTES}
+            selected={minute}
+            onSelect={handleMinuteSelect}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+TimePicker.displayName = "TimePicker";
+
+interface TimeColumnProps {
+  label: string;
+  values: string[];
+  selected: string;
+  onSelect: (value: string) => void;
+}
+
+const TimeColumn = React.forwardRef<HTMLDivElement, TimeColumnProps>(
+  ({ label, values, selected, onSelect }, ref) => {
+    return (
+      <div className="flex w-14 flex-col">
+        <div className="px-2 pb-1 text-[10px] uppercase tracking-wider text-muted">
+          {label}
+        </div>
+        <div
+          ref={ref}
+          className="h-48 overflow-y-auto rounded-lg bg-segment py-1"
+        >
+          {values.map((v) => {
+            const isSelected = v === selected;
+            return (
+              <button
+                key={v}
+                type="button"
+                data-time-value={v}
+                onClick={() => onSelect(v)}
+                className={cn(
+                  "flex h-7 w-full items-center justify-center text-xs tabular-nums transition-colors",
+                  isSelected
+                    ? "bg-accent text-accent-foreground"
+                    : "text-foreground/80 hover:bg-surface-tertiary/50",
+                )}
+              >
+                {v}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+TimeColumn.displayName = "TimeColumn";
+
+export { TimePicker };

package/src/ui/tooltip.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../utils/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg bg-overlay px-2.5 py-1.5 text-xs text-overlay-foreground smooth-shadow-ring-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/ui/visually-hidden.tsx

@@ -0,0 +1,3 @@
+"use client";
+
+export { Root as VisuallyHidden } from "@radix-ui/react-visually-hidden";

package/src/utils/cn.ts

@@ -0,0 +1,16 @@
+import { type ClassValue, clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+// `rounded-field` is a custom radius token — teach twMerge it conflicts with
+// `rounded-none` / `rounded-md` / etc. so Input overrides actually win.
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      borderRadius: ["field"],
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/ref.ts

@@ -0,0 +1,10 @@
+import type { Ref } from "react";
+
+// forward a node to a callback or object ref (the two shapes forwardRef hands us)
+export function assignRef<T>(ref: Ref<T> | undefined, node: T): void {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.