@stasho/ds 0.13.1 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",
@@ -49,10 +49,15 @@
     "./copyable-text": "./src/components/copyable-text/copyable-text.tsx",
     "./dialog": "./src/components/dialog/dialog.tsx",
     "./drawer": "./src/components/drawer/drawer.tsx",
+    "./empty-state": "./src/components/empty-state/empty-state.tsx",
     "./logo": "./src/components/logo/logo.tsx",
     "./progress-bar": "./src/components/progress-bar/progress-bar.tsx",
     "./stepper": "./src/components/stepper/stepper.tsx",
     "./loader": "./src/components/loader/loader.tsx",
+    "./popover": "./src/components/popover/popover.tsx",
+    "./dropdown-menu": "./src/components/dropdown-menu/dropdown-menu.tsx",
+    "./sidebar": "./src/components/sidebar/sidebar.tsx",
+    "./header": "./src/components/header/header.tsx",
     "./lib/cn": "./src/lib/cn.ts",
     "./styles/tokens.css": "./src/styles/tokens.css"
   },

package/src/components/dialog/dialog.tsx

@@ -29,9 +29,8 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
       <DialogPrimitive.Overlay
         className={cn(
           "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-          "motion-reduce:animate-none",
+          "motion-safe:data-[state=open]:animate-overlay-in",
+          "motion-safe:data-[state=closed]:animate-overlay-out",
         )}
       />
       <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
@@ -39,9 +38,8 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
           ref={ref}
           className={cn(
             "relative w-full max-w-md rounded-xl border border-edge bg-surface p-6",
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-            "motion-reduce:animate-none",
+            "motion-safe:data-[state=open]:animate-pop-in",
+            "motion-safe:data-[state=closed]:animate-pop-out",
             className,
           )}
           {...(locked

package/src/components/drawer/drawer.tsx

@@ -48,9 +48,8 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
       <DialogPrimitive.Overlay
         className={cn(
           "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-          "motion-reduce:animate-none",
+          "motion-safe:data-[state=open]:animate-overlay-in",
+          "motion-safe:data-[state=closed]:animate-overlay-out",
         )}
       />
       <DialogPrimitive.Content

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { DropdownMenu as RadixMenu } from "radix-ui";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { cn } from "@ac/lib/cn";
+
+/** Non-modal by default: Radix's modal scroll-lock pads the body for the
+    missing scrollbar, visibly shifting the whole page when a menu opens. */
+export function DropdownMenu(
+  props: ComponentPropsWithoutRef<typeof RadixMenu.Root>,
+) {
+  return <RadixMenu.Root modal={false} {...props} />;
+}
+export const DropdownMenuTrigger = RadixMenu.Trigger;
+export const DropdownMenuPortal = RadixMenu.Portal;
+export const DropdownMenuGroup = RadixMenu.Group;
+export const DropdownMenuLabel = RadixMenu.Label;
+export const DropdownMenuSeparator = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof RadixMenu.Separator>
+>(function DropdownMenuSeparator({ className, ...props }, ref) {
+  return (
+    <RadixMenu.Separator
+      ref={ref}
+      className={cn("my-1 h-px bg-edge", className)}
+      {...props}
+    />
+  );
+});
+
+type ContentProps = ComponentPropsWithoutRef<typeof RadixMenu.Content>;
+
+export const DropdownMenuContent = forwardRef<HTMLDivElement, ContentProps>(
+  function DropdownMenuContent(
+    { className, side = "bottom", align = "start", sideOffset = 6, ...props },
+    ref,
+  ) {
+    return (
+      <RadixMenu.Portal>
+        <RadixMenu.Content
+          ref={ref}
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            "z-50 min-w-[12rem] rounded-md border border-edge bg-background p-1 shadow-lg",
+            "outline-none",
+            "motion-safe:data-[state=open]:animate-pop-in",
+            "motion-safe:data-[state=closed]:animate-pop-out",
+            className,
+          )}
+          {...props}
+        />
+      </RadixMenu.Portal>
+    );
+  },
+);
+
+type ItemProps = ComponentPropsWithoutRef<typeof RadixMenu.Item>;
+
+export const DropdownMenuItem = forwardRef<HTMLDivElement, ItemProps>(
+  function DropdownMenuItem({ className, ...props }, ref) {
+    return (
+      <RadixMenu.Item
+        ref={ref}
+        className={cn(
+          "flex cursor-pointer select-none items-center gap-2 rounded px-2 py-1.5 text-sm",
+          "outline-none",
+          "data-[highlighted]:bg-muted data-[highlighted]:text-foreground",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/empty-state/empty-state.tsx

@@ -0,0 +1,53 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@ac/lib/cn";
+
+type EmptyStateProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "title" | "children"
+> & {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
+};
+
+const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ title, description, icon, action, className, ...rest }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex flex-col items-center gap-4 px-6 py-12 text-center",
+        className,
+      )}
+      {...rest}
+    >
+      {icon ? (
+        <span
+          aria-hidden="true"
+          className="text-muted-foreground [&>svg]:size-8"
+        >
+          {icon}
+        </span>
+      ) : null}
+      <div className="flex flex-col gap-1.5">
+        <h3 className="font-heading font-bold text-lg text-foreground">
+          {title}
+        </h3>
+        {description ? (
+          <p className="mx-auto max-w-sm text-sm text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      {action ? (
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          {action}
+        </div>
+      ) : null}
+    </div>
+  ),
+);
+
+EmptyState.displayName = "EmptyState";
+
+export { EmptyState, type EmptyStateProps };

package/src/components/header/header.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Children, Fragment, type ReactNode } from "react";
+import { Slot } from "radix-ui";
+import { cn } from "@ac/lib/cn";
+
+/* ── Header ────────────────────────────────────── */
+
+export interface HeaderProps {
+  children?: ReactNode;
+  rightSlot?: ReactNode;
+  className?: string;
+}
+
+export function Header({ children, rightSlot, className }: HeaderProps) {
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-30",
+        "flex h-16 shrink-0 items-center gap-4",
+        "border-b border-edge bg-background px-4",
+        className,
+      )}
+    >
+      <a
+        href="#main"
+        className={cn(
+          "sr-only focus:not-sr-only",
+          "focus:absolute focus:left-2 focus:top-2 focus:z-50",
+          "focus:rounded focus:bg-accent focus:px-3 focus:py-1.5",
+          "focus:text-sm focus:font-bold focus:text-accent-foreground",
+          "focus:outline-none focus:ring-2 focus:ring-accent",
+        )}
+      >
+        Skip to content
+      </a>
+      <div className="flex min-w-0 flex-1 items-center gap-3">{children}</div>
+      {rightSlot && (
+        <div className="flex shrink-0 items-center">{rightSlot}</div>
+      )}
+    </header>
+  );
+}
+
+/* ── HeaderBreadcrumb ──────────────────────────── */
+
+export interface HeaderBreadcrumbProps {
+  children: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
+
+export function HeaderBreadcrumb({
+  children,
+  className,
+  ariaLabel = "Breadcrumb",
+}: HeaderBreadcrumbProps) {
+  const items = Children.toArray(children);
+  return (
+    <nav aria-label={ariaLabel} className={cn("min-w-0", className)}>
+      <ol className="flex items-center gap-2 text-sm text-foreground/80">
+        {items.map((child, idx) => (
+          <Fragment key={idx}>
+            {idx > 0 && (
+              <li aria-hidden="true" className="text-foreground/30">
+                /
+              </li>
+            )}
+            {child}
+          </Fragment>
+        ))}
+      </ol>
+    </nav>
+  );
+}
+
+/* ── HeaderBreadcrumbSegment ───────────────────── */
+
+export interface HeaderBreadcrumbSegmentProps {
+  children: ReactNode;
+  current?: boolean;
+  asChild?: boolean;
+  className?: string;
+}
+
+export function HeaderBreadcrumbSegment({
+  children,
+  current,
+  asChild,
+  className,
+}: HeaderBreadcrumbSegmentProps) {
+  const Comp = asChild ? Slot.Root : "span";
+  return (
+    <li className={cn("min-w-0 truncate", className)}>
+      <Comp
+        {...(current ? { "aria-current": "page" } : {})}
+        className="truncate text-foreground"
+      >
+        {children}
+      </Comp>
+    </li>
+  );
+}

package/src/components/popover/popover.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Popover as RadixPopover } from "radix-ui";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { cn } from "@ac/lib/cn";
+
+export const Popover = RadixPopover.Root;
+export const PopoverTrigger = RadixPopover.Trigger;
+export const PopoverAnchor = RadixPopover.Anchor;
+export const PopoverClose = RadixPopover.Close;
+
+type PopoverContentProps = ComponentPropsWithoutRef<typeof RadixPopover.Content>;
+
+export const PopoverContent = forwardRef<
+  HTMLDivElement,
+  PopoverContentProps
+>(function PopoverContent(
+  { className, side = "top", align = "start", sideOffset = 8, ...props },
+  ref,
+) {
+  return (
+    <RadixPopover.Portal>
+      <RadixPopover.Content
+        ref={ref}
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 rounded-md border border-edge bg-background p-3 shadow-lg",
+          "outline-none",
+          "motion-safe:data-[state=open]:animate-pop-in",
+          "motion-safe:data-[state=closed]:animate-pop-out",
+          className,
+        )}
+        {...props}
+      />
+    </RadixPopover.Portal>
+  );
+});
+
+export { type PopoverContentProps };

package/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,327 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import { CaretDoubleLeft, CaretDoubleRight } from "@phosphor-icons/react";
+import { LogoLetter, LogoWordmark } from "@ac/components/logo/logo";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@ac/components/tooltip/tooltip";
+import { cn } from "@ac/lib/cn";
+
+/* ── Sidebar (root + context) ──────────────────── */
+
+export interface SidebarProps {
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  storageKey?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+interface SidebarContextValue {
+  collapsed: boolean;
+  toggle: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+export function useSidebarContext(): SidebarContextValue {
+  const ctx = useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error(
+      "Sidebar subcomponents must be rendered inside <Sidebar>",
+    );
+  }
+  return ctx;
+}
+
+function readPersisted(storageKey: string | undefined): boolean | null {
+  if (typeof window === "undefined" || !storageKey) return null;
+  const raw = window.localStorage.getItem(storageKey);
+  if (raw === "true") return true;
+  if (raw === "false") return false;
+  return null;
+}
+
+export function Sidebar({
+  collapsed: controlled,
+  defaultCollapsed,
+  onCollapsedChange,
+  storageKey,
+  children,
+  className,
+}: SidebarProps) {
+  const isControlled = controlled !== undefined;
+  const [internal, setInternal] = useState<boolean>(() => {
+    if (isControlled) return controlled;
+    return defaultCollapsed ?? false;
+  });
+
+  // Hydrate uncontrolled state from localStorage on mount.
+  useEffect(() => {
+    if (isControlled || !storageKey) return;
+    const persisted = readPersisted(storageKey);
+    if (persisted !== null) setInternal(persisted);
+  }, [isControlled, storageKey]);
+
+  const collapsed = isControlled ? controlled : internal;
+
+  const toggle = useCallback(() => {
+    const next = !collapsed;
+    if (!isControlled) setInternal(next);
+    if (storageKey && typeof window !== "undefined") {
+      window.localStorage.setItem(storageKey, next ? "true" : "false");
+    }
+    onCollapsedChange?.(next);
+  }, [collapsed, isControlled, onCollapsedChange, storageKey]);
+
+  return (
+    <SidebarContext.Provider value={{ collapsed, toggle }}>
+      <aside
+        data-collapsed={collapsed || undefined}
+        className={cn(
+          "group/sidebar shrink-0",
+          "sticky top-0 z-40 h-screen",
+          "border-r border-edge bg-background",
+          "flex flex-col",
+          "transition-[width] duration-200 ease-out",
+          "motion-reduce:transition-none",
+          collapsed ? "w-14" : "w-60",
+          className,
+        )}
+      >
+        {children}
+      </aside>
+    </SidebarContext.Provider>
+  );
+}
+
+/* ── SidebarHeader ─────────────────────────────── */
+
+export interface SidebarHeaderProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export function SidebarHeader({ className, children }: SidebarHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex h-16 shrink-0 items-center px-4",
+        "border-b border-edge",
+        "group-data-[collapsed]/sidebar:justify-center",
+        className,
+      )}
+    >
+      {children ?? (
+        <>
+          <LogoWordmark
+            aria-label="Stasho"
+            className="h-7 text-foreground group-data-[collapsed]/sidebar:hidden"
+          />
+          <LogoLetter
+            aria-label="Stasho"
+            className="hidden h-7 text-foreground group-data-[collapsed]/sidebar:block"
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ── SidebarNav ────────────────────────────────── */
+
+export interface SidebarNavProps {
+  children: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
+
+export function SidebarNav({
+  children,
+  className,
+  ariaLabel = "Main",
+}: SidebarNavProps) {
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={cn("flex-1 overflow-y-auto p-2", className)}
+    >
+      <ul className="flex flex-col gap-1">{children}</ul>
+    </nav>
+  );
+}
+
+/* ── SidebarSection ────────────────────────────── */
+
+export interface SidebarSectionProps {
+  title?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function SidebarSection({
+  title,
+  children,
+  className,
+}: SidebarSectionProps) {
+  const { collapsed } = useSidebarContext();
+  return (
+    <div
+      role="group"
+      aria-label={title ?? "Section"}
+      className={cn("flex flex-col gap-1", className)}
+    >
+      {title && !collapsed && (
+        <div className="px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wider text-foreground/50">
+          {title}
+        </div>
+      )}
+      <ul className="flex flex-col gap-1">{children}</ul>
+    </div>
+  );
+}
+
+/* ── SidebarItem ───────────────────────────────── */
+
+export interface SidebarItemProps {
+  icon: ReactNode;
+  label: string;
+  href: string;
+  active?: boolean;
+  collapsed?: boolean;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  className?: string;
+  target?: string;
+  rel?: string;
+}
+
+export function SidebarItem({
+  icon,
+  label,
+  href,
+  active,
+  collapsed: collapsedProp,
+  onClick,
+  className,
+  target,
+  rel,
+}: SidebarItemProps) {
+  const ctx = useSidebarContext();
+  const collapsed = collapsedProp ?? ctx.collapsed;
+
+  const link = (
+    <a
+      href={href}
+      target={target}
+      rel={rel}
+      onClick={onClick}
+      aria-current={active ? "page" : undefined}
+      className={cn(
+        "group flex items-center gap-3 rounded-md",
+        "px-3 py-2 text-sm font-medium",
+        "transition-colors duration-150",
+        "focus-visible:outline-none focus-visible:ring-2",
+        "focus-visible:ring-accent focus-visible:ring-offset-2",
+        "motion-reduce:transition-none",
+        collapsed && "justify-center px-2",
+        active
+          ? "bg-accent/10 text-accent"
+          : "text-foreground/80 hover:bg-muted hover:text-foreground",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "shrink-0 flex items-center justify-center",
+          "[&>svg]:size-5",
+          active
+            ? "text-accent"
+            : "text-foreground/60 group-hover:text-foreground",
+        )}
+        aria-hidden="true"
+      >
+        {icon}
+      </span>
+      <span className={cn("truncate", collapsed && "sr-only")}>{label}</span>
+    </a>
+  );
+
+  return (
+    <li>
+      {collapsed ? (
+        <Tooltip>
+          <TooltipTrigger asChild>{link}</TooltipTrigger>
+          <TooltipContent side="right">{label}</TooltipContent>
+        </Tooltip>
+      ) : (
+        link
+      )}
+    </li>
+  );
+}
+
+/* ── SidebarFooter ─────────────────────────────── */
+
+export interface SidebarFooterProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function SidebarFooter({ children, className }: SidebarFooterProps) {
+  return (
+    <div className={cn("shrink-0 px-3 py-2 empty:hidden", className)}>
+      {children}
+    </div>
+  );
+}
+
+/* ── SidebarCollapseToggle ─────────────────────── */
+
+export interface SidebarCollapseToggleProps {
+  className?: string;
+}
+
+export function SidebarCollapseToggle({
+  className,
+}: SidebarCollapseToggleProps) {
+  const { collapsed, toggle } = useSidebarContext();
+  return (
+    <div className={cn("shrink-0 border-t border-edge p-2", className)}>
+      <button
+        type="button"
+        onClick={toggle}
+        aria-expanded={!collapsed}
+        aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        className={cn(
+          "flex w-full items-center gap-3 rounded-md px-3 py-2",
+          "text-sm font-medium text-foreground/80",
+          "transition-colors duration-150",
+          "hover:bg-muted hover:text-foreground",
+          "focus-visible:outline-none focus-visible:ring-2",
+          "focus-visible:ring-accent focus-visible:ring-offset-2",
+          "motion-reduce:transition-none",
+          collapsed ? "justify-center px-2" : "justify-end",
+        )}
+      >
+        <span
+          aria-hidden="true"
+          className="shrink-0 flex items-center justify-center text-foreground/60 [&>svg]:size-4"
+        >
+          {collapsed ? <CaretDoubleRight /> : <CaretDoubleLeft />}
+        </span>
+      </button>
+    </div>
+  );
+}

package/src/components/tooltip/tooltip.tsx

@@ -18,10 +18,8 @@ const TooltipContent = forwardRef<
         [
           "z-50 max-w-[260px] rounded-sm bg-popover-bg border border-popover-border px-3 py-1.5",
           "text-xs leading-snug text-foreground shadow-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",
+          "motion-safe:animate-pop-in",
+          "motion-safe:data-[state=closed]:animate-pop-out",
         ].join(" "),
         className,
       )}

package/src/styles/tokens.css

@@ -443,4 +443,40 @@
 @keyframes drawer-out-right {
   from { transform: translateX(0); }
   to   { transform: translateX(100%); }
+}
+
+/* ── Overlay fade + pop (fade + 95% zoom) ──────── */
+
+/* Same @theme-registered-utility mechanism as Accordion/Drawer above so the
+   `data-[state=...]:` variant composes and reduced motion is honored by gating
+   the animation INTO motion-safe. `overlay-*` is the frosted-scrim fade shared
+   by the Dialog and Drawer overlays; `pop-*` is the fade + 95% zoom shared by
+   Dialog content and Tooltip. Replaces the inert tw-animate-css class strings
+   (`animate-in`/`fade-in-0`/`zoom-in-95`) those components used to carry — the
+   DS has no tw-animate-css, so those resolved to nothing. */
+@theme {
+  --animate-overlay-in: overlay-in 200ms ease-out;
+  --animate-overlay-out: overlay-out 150ms ease-in;
+  --animate-pop-in: pop-in 200ms ease-out;
+  --animate-pop-out: pop-out 150ms ease-in;
+}
+
+@keyframes overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes overlay-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+@keyframes pop-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes pop-out {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.95); }
 }