@stasho/ds 0.1.0

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,493 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from "react";
+import { Tabs as TabsPrimitive, DropdownMenu } from "radix-ui";
+import { DotsThree } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+/* ── Root (direct re-export) ─────────────────── */
+
+const Tabs = TabsPrimitive.Root;
+
+/* ── List (with sliding indicator) ───────────── */
+
+type TabsVariant = "underline" | "pill";
+type TabsSize = "sm" | "md";
+
+type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+  variant?: TabsVariant;
+  size?: TabsSize;
+  overflow?: "collapse";
+  maxVisible?: number;
+};
+
+/* ── Overflow hook ───────────────────────────── */
+
+function useOverflow(
+  listRef: React.RefObject<HTMLElement | null>,
+  overflowTriggerRef: React.RefObject<HTMLElement | null>,
+  enabled: boolean,
+  maxVisible: number | undefined,
+) {
+  const [hiddenTabs, setHiddenTabs] = useState<HiddenTab[]>([]);
+  const [hasActiveHidden, setHasActiveHidden] = useState(false);
+
+  const measure = useCallback(() => {
+    const list = listRef.current;
+    const trigger = overflowTriggerRef.current;
+    if (!list || !trigger || !enabled) {
+      setHiddenTabs([]);
+      setHasActiveHidden(false);
+      return;
+    }
+
+    const tabs = Array.from(
+      list.querySelectorAll<HTMLElement>('[role="tab"]'),
+    );
+
+    // Reset all tabs to normal flow for measurement
+    for (const tab of tabs) {
+      tab.style.visibility = "";
+      tab.style.position = "";
+      tab.style.pointerEvents = "";
+    }
+    list.style.minHeight = "";
+
+    // Snapshot container height before hiding tabs so the tallest
+    // tab's height is captured. Applied as min-height after hiding
+    // to prevent layout collapse when the tallest tab overflows.
+    const containerHeight = list.offsetHeight;
+    const containerLeft = list.getBoundingClientRect().left;
+    const containerWidth = list.clientWidth;
+    const triggerWidth = trigger.offsetWidth;
+
+    let widthBreakIndex: number | null = null;
+
+    for (let i = 0; i < tabs.length; i++) {
+      const tab = tabs[i] as HTMLElement;
+      const tabRight = tab.getBoundingClientRect().right - containerLeft;
+      if (tabRight + triggerWidth > containerWidth) {
+        widthBreakIndex = i;
+        break;
+      }
+    }
+
+    // Final break index — stricter of width-based and count-based limits.
+    // null means no overflow.
+    let newBreakIndex: number | null = null;
+    if (widthBreakIndex !== null && maxVisible !== undefined) {
+      newBreakIndex = Math.min(widthBreakIndex, maxVisible);
+    } else if (widthBreakIndex !== null) {
+      newBreakIndex = widthBreakIndex;
+    } else if (maxVisible !== undefined && maxVisible < tabs.length) {
+      newBreakIndex = maxVisible;
+    }
+
+    // All tabs fit by width — verify last tab actually fits before bailing
+    if (newBreakIndex === null) {
+      const lastTab = tabs[tabs.length - 1];
+      if (lastTab) {
+        const lastRight =
+          lastTab.getBoundingClientRect().right - containerLeft;
+        if (lastRight <= containerWidth) {
+          setHiddenTabs([]);
+          setHasActiveHidden(false);
+          return;
+        }
+      }
+      setHiddenTabs([]);
+      setHasActiveHidden(false);
+      return;
+    }
+
+    // Hide overflowed tabs
+    for (let i = newBreakIndex; i < tabs.length; i++) {
+      const tab = tabs[i] as HTMLElement;
+      tab.style.visibility = "hidden";
+      tab.style.position = "absolute";
+      tab.style.pointerEvents = "none";
+    }
+
+    // Lock container height so it doesn't collapse when the
+    // tallest tab is removed from flow by position:absolute
+    list.style.minHeight = `${String(containerHeight)}px`;
+
+    // Focus management: move focus to trigger if focused tab overflowed
+    const focused = document.activeElement;
+    if (focused instanceof HTMLElement) {
+      for (let i = newBreakIndex; i < tabs.length; i++) {
+        const tab = tabs[i] as HTMLElement;
+        if (tab === focused || tab.contains(focused)) {
+          trigger.focus();
+          break;
+        }
+      }
+    }
+
+    // Build hiddenTabs array
+    const newHidden: HiddenTab[] = [];
+    let activeHidden = false;
+    for (let i = newBreakIndex; i < tabs.length; i++) {
+      const tab = tabs[i] as HTMLElement;
+      newHidden.push({
+        value: tab.getAttribute("data-value") ?? tab.id ?? "",
+        label: tab.textContent ?? "",
+        disabled: tab.hasAttribute("disabled"),
+        triggerEl: tab,
+      });
+      if (tab.dataset["state"] === "active") activeHidden = true;
+    }
+
+    setHiddenTabs(newHidden);
+    setHasActiveHidden(activeHidden);
+  }, [listRef, overflowTriggerRef, enabled, maxVisible]);
+
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list || !enabled) return;
+
+    measure();
+
+    const resizeObserver = new ResizeObserver(measure);
+    resizeObserver.observe(list);
+
+    const mutationObserver = new MutationObserver(measure);
+    mutationObserver.observe(list, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ["data-state"],
+    });
+
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [enabled, measure]);
+
+  return { hiddenTabs, hasActiveHidden };
+}
+
+/* ── Overflow types & trigger ────────────────── */
+
+type HiddenTab = {
+  value: string;
+  label: string;
+  disabled: boolean;
+  triggerEl: HTMLElement;
+};
+
+type OverflowTriggerProps = {
+  isPill: boolean;
+  isSmall: boolean;
+  hiddenTabs: HiddenTab[];
+  hasActiveHidden: boolean;
+  visible: boolean;
+};
+
+const OverflowTrigger = forwardRef<HTMLButtonElement, OverflowTriggerProps>(
+  ({ isPill, isSmall, hiddenTabs, hasActiveHidden, visible }, ref) => (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          ref={ref}
+          type="button"
+          aria-label="More tabs"
+          className={cn(
+            "inline-flex items-center justify-center shrink-0",
+            "font-heading font-bold",
+            hasActiveHidden && isPill
+              ? "text-white"
+              : hasActiveHidden
+                ? "text-primary-600 dark:text-primary-400"
+                : "text-muted-foreground",
+            "transition-colors duration-200",
+            "hover:text-primary-600 dark:hover:text-primary-400",
+            "focus-visible:outline-none focus-visible:ring-2",
+            "focus-visible:ring-primary-400 focus-visible:ring-offset-2",
+            "motion-reduce:transition-none",
+            isPill
+              ? cn(
+                  "relative z-10 rounded-full",
+                  isSmall ? "px-2 py-0.5 text-xs" : "px-3 py-1.5 text-sm",
+                )
+              : isSmall
+                ? "px-3 py-1.5 text-sm"
+                : "px-4 py-3 text-lg",
+            !visible && "invisible",
+          )}
+        >
+          <DotsThree weight="bold" className="size-5" aria-hidden="true" />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className={cn(
+            "z-50 min-w-[8rem]",
+            "rounded-md bg-surface border border-edge shadow-brand",
+            "p-1",
+            "motion-reduce:transition-none",
+          )}
+          sideOffset={4}
+          align="end"
+        >
+          {hiddenTabs.map((tab) => (
+            <DropdownMenu.Item
+              key={tab.value}
+              disabled={tab.disabled}
+              onSelect={() => {
+                const el = tab.triggerEl;
+                // Defer focus until after DropdownMenu closes and
+                // releases its focus trap. Restoring visibility lets
+                // the trigger receive focus, which activates the tab
+                // via Radix. measure() re-hides via MutationObserver
+                // after data-state updates.
+                requestAnimationFrame(() => {
+                  el.style.visibility = "";
+                  el.style.pointerEvents = "";
+                  el.focus();
+                });
+              }}
+              className={cn(
+                "flex w-full items-center rounded-sm px-3 py-2",
+                "text-sm text-foreground cursor-pointer select-none",
+                "outline-none",
+                "hover:bg-muted focus-visible:bg-muted",
+                "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+                tab.triggerEl.dataset["state"] === "active" &&
+                  "text-primary-600 dark:text-primary-400 font-bold",
+              )}
+            >
+              {tab.label}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  ),
+);
+
+OverflowTrigger.displayName = "OverflowTrigger";
+
+const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
+  ({ className, children, variant = "underline", size = "md", overflow, maxVisible, ...rest }, ref) => {
+    const innerRef = useRef<HTMLDivElement>(null);
+    const indicatorRef = useRef<HTMLDivElement>(null);
+    const overflowTriggerRef = useRef<HTMLButtonElement>(null);
+    const [ready, setReady] = useState(false);
+    const isPill = variant === "pill";
+    const isSmall = size === "sm";
+    const isCollapse = overflow === "collapse";
+    // maxVisible activates the same overflow code path; isCollapse stays
+    // bound to overflow="collapse" so layout (full-width pill) only changes
+    // when the consumer opts into width-based collapse.
+    const showOverflow = isCollapse || maxVisible !== undefined;
+
+    const setRefs = (node: HTMLDivElement | null) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+
+    const { hiddenTabs, hasActiveHidden } = useOverflow(
+      innerRef,
+      overflowTriggerRef,
+      showOverflow,
+      maxVisible,
+    );
+
+    useEffect(() => {
+      const list = innerRef.current;
+      const indicator = indicatorRef.current;
+      if (!list || !indicator) return;
+
+      function updateIndicator() {
+        const activeTab = list!.querySelector<HTMLElement>(
+          '[data-state="active"]',
+        );
+        if (!activeTab || !indicator) return;
+
+        // When the active tab is overflowed, slide the indicator
+        // behind the "..." trigger instead of hiding it
+        if (activeTab.style.visibility === "hidden") {
+          const trigger = overflowTriggerRef.current;
+          if (trigger) {
+            indicator.style.opacity = "";
+            indicator.style.transform = `translateX(${String(trigger.offsetLeft)}px)`;
+            indicator.style.width = `${String(trigger.offsetWidth)}px`;
+            if (!ready) setReady(true);
+          } else {
+            indicator.style.opacity = "0";
+          }
+          return;
+        }
+        indicator.style.opacity = "";
+
+        const left = activeTab.offsetLeft;
+        const width = activeTab.offsetWidth;
+        indicator.style.transform = `translateX(${String(left)}px)`;
+        indicator.style.width = `${String(width)}px`;
+        if (!ready) setReady(true);
+      }
+
+      updateIndicator();
+
+      const observer = new MutationObserver(updateIndicator);
+      observer.observe(list, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ["data-state"],
+      });
+
+      const resizeObserver = new ResizeObserver(updateIndicator);
+      resizeObserver.observe(list);
+
+      return () => {
+        observer.disconnect();
+        resizeObserver.disconnect();
+      };
+    }, [ready]);
+
+    return (
+      <TabsPrimitive.List
+        ref={setRefs}
+        data-variant={variant}
+        data-size={size}
+        className={cn(
+          "group relative flex",
+          isPill
+            ? [
+                "rounded-full bg-muted",
+                isSmall ? "p-0.5" : "p-1",
+                !isCollapse && "inline-flex",
+              ]
+            : isSmall
+              ? "border-b-2 border-edge/40"
+              : "border-b-4 border-edge/40",
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+        {showOverflow && (
+          <OverflowTrigger
+            ref={overflowTriggerRef}
+            isPill={isPill}
+            isSmall={isSmall}
+            hiddenTabs={hiddenTabs}
+            hasActiveHidden={hasActiveHidden}
+            visible={hiddenTabs.length > 0}
+          />
+        )}
+        <div
+          ref={indicatorRef}
+          className={cn(
+            "absolute left-0",
+            isPill
+              ? [
+                  isSmall ? "inset-y-0.5" : "inset-y-1",
+                  "rounded-full bg-primary-600 dark:bg-primary-500",
+                  ready ? "opacity-100" : "opacity-0",
+                  ready
+                    ? "transition-[transform,width,opacity] duration-200 ease-out"
+                    : "",
+                ]
+              : [
+                  isSmall ? "-bottom-0.5 h-0.5" : "-bottom-1 h-1",
+                  "bg-primary-600 dark:bg-primary-400",
+                  ready
+                    ? "transition-[transform,width] duration-200 ease-out"
+                    : "",
+                ],
+            "motion-reduce:transition-none",
+          )}
+          aria-hidden
+        />
+      </TabsPrimitive.List>
+    );
+  },
+);
+
+TabsList.displayName = "TabsList";
+
+/* ── Trigger ─────────────────────────────────── */
+
+const TabsTrigger = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...rest }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      [
+        "inline-flex items-center gap-2 px-4 py-3",
+        "font-heading font-bold text-lg",
+        "text-foreground",
+        "transition-[color,transform] duration-200 ease-out",
+        "hover:text-primary-600 dark:hover:text-primary-400",
+        "data-[state=active]:text-primary-600",
+        "dark:data-[state=active]:text-primary-400",
+        "data-[state=active]:-translate-y-0.5",
+        "disabled:opacity-20 disabled:pointer-events-none",
+        "focus-visible:outline-none focus-visible:ring-2",
+        "focus-visible:ring-primary-400 focus-visible:ring-offset-2",
+        "motion-reduce:transition-none",
+        // Small size overrides (underline)
+        "group-data-[size=sm]:px-3 group-data-[size=sm]:py-1.5",
+        "group-data-[size=sm]:text-sm group-data-[size=sm]:gap-1.5",
+        // Pill variant overrides (via group data attribute on TabsList)
+        "group-data-[variant=pill]:relative group-data-[variant=pill]:z-10",
+        "group-data-[variant=pill]:rounded-full",
+        "group-data-[variant=pill]:px-5 group-data-[variant=pill]:py-1.5",
+        "group-data-[variant=pill]:text-sm",
+        "group-data-[variant=pill]:text-muted-foreground",
+        "group-data-[variant=pill]:translate-y-0",
+        "group-data-[variant=pill]:hover:text-foreground",
+        "group-data-[variant=pill]:data-[state=active]:text-white",
+        "group-data-[variant=pill]:data-[state=active]:translate-y-0",
+        "group-data-[variant=pill]:focus-visible:ring-offset-0",
+        // Small pill overrides (compound group selector)
+        "group-[[data-variant=pill][data-size=sm]]:px-3",
+        "group-[[data-variant=pill][data-size=sm]]:py-1",
+        "group-[[data-variant=pill][data-size=sm]]:text-xs",
+      ].join(" "),
+      className,
+    )}
+    {...rest}
+  />
+));
+
+TabsTrigger.displayName = "TabsTrigger";
+
+/* ── Content ─────────────────────────────────── */
+
+const TabsContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...rest }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn("mt-4", className)}
+    {...rest}
+  />
+));
+
+TabsContent.displayName = "TabsContent";
+
+/* ── Exports ─────────────────────────────────── */
+
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  type TabsListProps,
+  type TabsSize,
+  type TabsVariant,
+};

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const textareaVariants = cva(
+  [
+    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
+    "border-0 rounded-2xl",
+    "placeholder:text-muted-foreground",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "ring-0 resize-y transition-colors",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-1.5 px-4 text-sm",
+        md: "py-2 px-5 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type TextareaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "size"
+> &
+  VariantProps<typeof textareaVariants> & {
+    error?: boolean;
+  };
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ size, error = false, rows = 4, className, ...rest }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        rows={rows}
+        className={cn(
+          textareaVariants({ size }),
+          error && "border-3 border-error-400 hover:border-error-500",
+          className,
+        )}
+        aria-invalid={error || undefined}
+        {...rest}
+      />
+    );
+  },
+);
+
+Textarea.displayName = "Textarea";
+
+export { Textarea, textareaVariants, type TextareaProps };

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn } from "@ac/lib/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...rest }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        [
+          "z-50 rounded-lg bg-neutral-900 dark:bg-base-800 px-3 py-1.5",
+          "text-sm text-white shadow-brand-sm",
+          "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",
+          "motion-reduce:animate-none",
+        ].join(" "),
+        className,
+      )}
+      {...rest}
+    />
+  </TooltipPrimitive.Portal>
+));
+
+TooltipContent.displayName = "TooltipContent";
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@ac/lib/cn";
+
+type SkeletonProps = HTMLAttributes<HTMLDivElement>;
+
+const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        className={cn("animate-pulse motion-reduce:animate-none rounded-md bg-muted", className)}
+        {...rest}
+      />
+    );
+  },
+);
+
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton, type SkeletonProps };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@ac/lib/cn";
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <svg
+      className={cn("animate-spin motion-reduce:animate-none", className)}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+  );
+}

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}