@marktiderman/genesis-ui 1.3.0 → 2.0.0

package/dist/AppShell-BJarYZzz.d.ts

@@ -0,0 +1,198 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { V as ViewMode } from './view-toggle-DDe_Luj2.js';
+import { Density } from './hooks/use-view-settings.js';
+import { L as LinkComponent } from './navigation-CpOEyUSb.js';
+
+/**
+ * Declarative chrome for PageHeader — developer defaults + optional
+ * in-header user toggles (Notion/Linear “customize view” pattern).
+ *
+ * @stability Beta
+ */
+interface PageHeaderOptions {
+    showIcon?: boolean;
+    showSubtitle?: boolean;
+    showCount?: boolean;
+    showViewToggle?: boolean;
+    showViewSettings?: boolean;
+    showCreate?: boolean;
+    /** Ghost ListFilter control in the actions cluster */
+    showDetailsToggle?: boolean;
+    /** Quiet hint beside actions while details are collapsed */
+    showDetailsHint?: boolean;
+    /** Move subtitle into the details panel (default true when details exist) */
+    subtitleInDetails?: boolean;
+    defaultDetailsOpen?: boolean;
+    detailsLabel?: string;
+    /**
+     * Show the in-header Header options popover so users can customize chrome.
+     * Default true when the header has more than one chrome affordance.
+     */
+    configurable?: boolean;
+}
+interface PageHeaderProps {
+    title: string;
+    subtitle?: string;
+    icon?: LucideIcon;
+    /**
+     * Header chrome config (developer defaults). Merged under user picks from
+     * the in-header options menu when `options.configurable` / storage is on.
+     */
+    options?: PageHeaderOptions;
+    /** Persist user header-option overrides (localStorage) */
+    optionsStorageKey?: string;
+    /** Extra trailing actions (after create); prefer first-class slots below */
+    actions?: ReactNode;
+    /** Collapsible details region below the title row */
+    details?: ReactNode;
+    detailsOpen?: boolean;
+    onDetailsOpenChange?: (open: boolean) => void;
+    detailsActive?: boolean;
+    detailsHint?: ReactNode;
+    /** Count badge */
+    count?: number;
+    totalCount?: number;
+    /** Singular entity for “N rows” copy when unfiltered */
+    entityName?: string;
+    countActive?: boolean;
+    viewMode?: ViewMode;
+    onViewModeChange?: (mode: ViewMode) => void;
+    pageSize?: number;
+    onPageSizeChange?: (size: number) => void;
+    density?: Density;
+    onDensityChange?: (density: Density) => void;
+    createAction?: ReactNode;
+}
+declare function PageHeader({ title, subtitle, icon: Icon, options: optionsProp, optionsStorageKey, actions, details, detailsOpen, onDetailsOpenChange, detailsActive, detailsHint, count, totalCount, entityName, countActive, viewMode, onViewModeChange, pageSize, onPageSizeChange, density, onDensityChange, createAction, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface NavItem {
+    to: string;
+    icon: LucideIcon;
+    label: string;
+    /** Nested items — rendered as a collapsible group when the rail is expanded */
+    children?: NavItem[];
+    badge?: string | number;
+    disabled?: boolean;
+    /** Exact-match active state (e.g. overview `/`) */
+    end?: boolean;
+}
+/**
+ * Declarative chrome for AppShell — developer defaults + optional
+ * in-sidebar user toggles (Notion/Linear “customize chrome” pattern).
+ *
+ * @stability Beta
+ */
+interface AppShellOptions {
+    showLogo?: boolean;
+    showAppName?: boolean;
+    showThemeToggle?: boolean;
+    /** Desktop rail collapse control */
+    showCollapse?: boolean;
+    showUserSlot?: boolean;
+    showFooter?: boolean;
+    showSecondaryNav?: boolean;
+    /** Mobile fixed bottom tab bar */
+    showMobileBottomNav?: boolean;
+    defaultCollapsed?: boolean;
+    /**
+     * Show the in-sidebar Sidebar options popover so users can customize chrome.
+     * Default true when collapse / secondary / theme / slots are available.
+     */
+    configurable?: boolean;
+    /**
+     * Toggle keys the developer has decided on and users may not override —
+     * e.g. hiding `showThemeToggle` for a brand that manages theme elsewhere.
+     * Locked keys are dropped from the options popover and any stored user
+     * override for them is ignored on resolve.
+     */
+    lockedOptions?: (keyof AppShellOptions)[];
+    /** Comfortable (default) vs compact row padding */
+    density?: "comfortable" | "compact";
+    /** Expanded rail width in rem-ish tokens: narrow ≈ 13rem, wide ≈ 16rem */
+    railWidth?: "narrow" | "wide";
+    /**
+     * Where page content scrolls.
+     * - `container` (default): main panel scrolls — classic app-shell chrome.
+     * - `window`: document/window scrolls with a sticky rail so React Router
+     *   `ScrollRestoration` keeps working (dashboard dogfood).
+     */
+    scrollRoot?: "container" | "window";
+}
+/**
+ * @stability Beta
+ */
+interface AppShellProps {
+    /** App name shown in sidebar header */
+    appName: string;
+    /** App logo letter or short text (ignored when `logo` is set) */
+    appLogo?: string;
+    /** Custom logo node — preferred over `appLogo` letter tile */
+    logo?: ReactNode;
+    /** Primary navigation items */
+    navItems: NavItem[];
+    /** Secondary nav (e.g. “More”) — rendered below a divider when shown */
+    secondaryNavItems?: NavItem[];
+    /** Label above secondary nav (default “More”) */
+    secondaryNavLabel?: string;
+    /**
+     * Items for the mobile bottom tab bar. Defaults to top-level `navItems`
+     * (no children). Pass a short list for apps with large sidebars; pass `[]`
+     * and set `options.showMobileBottomNav: false` to hide.
+     */
+    mobileNavItems?: NavItem[];
+    /** Slot below the logo row (product switcher, workspace picker, …) */
+    headerSlot?: ReactNode;
+    /**
+     * Compact slot shown in the **collapsed** desktop rail, where `headerSlot`
+     * is hidden for space. Use it to keep a core affordance reachable without
+     * expanding — e.g. an icon-only product switcher. Omit to hide the header
+     * region entirely while collapsed.
+     */
+    collapsedHeaderSlot?: ReactNode;
+    /** Footer region above the user slot (version, links) */
+    footer?: ReactNode;
+    /**
+     * User / account block at the bottom of the sidebar. When the rail is
+     * collapsed, AppShell hides any descendant carrying the
+     * `data-shell-user-detail` attribute (e.g. name/email text) so only a
+     * compact element (avatar, initial) remains — tag the detail wrapper you
+     * want hidden in the collapsed rail with that attribute.
+     */
+    userSlot?: ReactNode;
+    /** Page content */
+    children: ReactNode;
+    /**
+     * @deprecated Prefer `options.showThemeToggle`. Kept for sample-app
+     * back-compat; merges into resolved options when `options` omits it.
+     */
+    showThemeToggle?: boolean;
+    /** Chrome config (developer defaults + optional in-sidebar menu) */
+    options?: AppShellOptions;
+    /** Persist user sidebar-option overrides + collapse state (localStorage) */
+    optionsStorageKey?: string;
+    /** Controlled collapse (desktop rail) */
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Injectable link component. Defaults to a plain `<a>` (no router). Pass a
+     * router adapter — e.g. React Router `({ href, ...p }) => <Link to={href} {...p} />`
+     * or Next.js `next/link` — to get client-side navigation.
+     */
+    linkComponent?: LinkComponent;
+    /**
+     * Current path used to highlight the active nav item. Router consumers pass
+     * `useLocation().pathname` (RR) or `usePathname()` (Next). Omit to disable
+     * active highlighting.
+     */
+    activePath?: string;
+    /**
+     * Optional custom active-state matcher. Defaults to a prefix match (with `/`
+     * treated as exact), mirroring React Router `NavLink`.
+     */
+    isActive?: (to: string, activePath?: string) => boolean;
+}
+declare function AppShell({ appName, appLogo, logo, navItems, secondaryNavItems, secondaryNavLabel, mobileNavItems, headerSlot, collapsedHeaderSlot, footer, userSlot, children, showThemeToggle: showThemeToggleProp, options: optionsProp, optionsStorageKey, collapsed: collapsedProp, onCollapsedChange, linkComponent, activePath, isActive, }: AppShellProps): react_jsx_runtime.JSX.Element;
+
+export { AppShell as A, type NavItem as N, PageHeader as P, type AppShellOptions as a, type AppShellProps as b, type PageHeaderOptions as c, type PageHeaderProps as d };

package/dist/{chunk-NJMO3VPA.js → chunk-22XB3Q6H.js}

@@ -1,13 +1,13 @@
 "use client";
 import { cn } from './chunk-NZ5WBA4R.js';
 import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Popover as Popover$1 } from 'radix-ui';
 import { jsx } from 'react/jsx-runtime';
 
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.Content,
+var Popover = Popover$1.Root;
+var PopoverTrigger = Popover$1.Trigger;
+var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+  Popover$1.Content,
   {
     ref,
     align,
@@ -19,8 +19,8 @@ var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset
     ...props
   }
 ) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+PopoverContent.displayName = Popover$1.Content.displayName;
 
 export { Popover, PopoverContent, PopoverTrigger };
-//# sourceMappingURL=chunk-NJMO3VPA.js.map
-//# sourceMappingURL=chunk-NJMO3VPA.js.map
+//# sourceMappingURL=chunk-22XB3Q6H.js.map
+//# sourceMappingURL=chunk-22XB3Q6H.js.map

package/dist/chunk-22XB3Q6H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/popover.tsx"],"names":["PopoverPrimitive"],"mappings":";;;;;AAOA,IAAM,UAAUA,SAAA,CAAiB;AACjC,IAAM,iBAAiBA,SAAA,CAAiB;AAExC,IAAM,iBAAuB,KAAA,CAAA,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,QAAQ,QAAA,EAAU,UAAA,GAAa,CAAA,EAAG,GAAG,OAAM,EAAG,GAAA,qBAC5D,GAAA,CAACA,SAAA,CAAiB,QAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,EAACA,SAAA,CAAiB,OAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,4aAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CAAA,EACF,CACD;AACD,cAAA,CAAe,WAAA,GAAcA,UAAiB,OAAA,CAAQ,WAAA","file":"chunk-22XB3Q6H.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\n\nimport { cn } from \"../../utils\";\n\nconst Popover = PopoverPrimitive.Root;\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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\",\n        className,\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverTrigger, PopoverContent };\n"]}

package/dist/{chunk-2MXMWBDV.js → chunk-27ELYTGE.js}

@@ -1,11 +1,11 @@
 "use client";
 import { cn } from './chunk-NZ5WBA4R.js';
 import * as React from 'react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { Switch as Switch$1 } from 'radix-ui';
 import { jsx } from 'react/jsx-runtime';
 
 var Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SwitchPrimitive.Root,
+  Switch$1.Root,
   {
     className: cn(
       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
@@ -14,7 +14,7 @@ var Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ...props,
     ref,
     children: /* @__PURE__ */ jsx(
-      SwitchPrimitive.Thumb,
+      Switch$1.Thumb,
       {
         className: cn(
           "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
@@ -23,8 +23,8 @@ var Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     )
   }
 ));
-Switch.displayName = SwitchPrimitive.Root.displayName;
+Switch.displayName = Switch$1.Root.displayName;
 
 export { Switch };
-//# sourceMappingURL=chunk-2MXMWBDV.js.map
-//# sourceMappingURL=chunk-2MXMWBDV.js.map
+//# sourceMappingURL=chunk-27ELYTGE.js.map
+//# sourceMappingURL=chunk-27ELYTGE.js.map

package/dist/chunk-27ELYTGE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/switch.tsx"],"names":["SwitchPrimitive"],"mappings":";;;;;AAMA,IAAM,MAAA,GAAe,iBAGnB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1B,GAAA;AAAA,EAACA,QAAA,CAAgB,IAAA;AAAA,EAAhB;AAAA,IACC,SAAA,EAAW,EAAA;AAAA,MACT,oXAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAA,kBAAA,GAAA;AAAA,MAACA,QAAA,CAAgB,KAAA;AAAA,MAAhB;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT;AAAA;AACF;AAAA;AACF;AACF,CACD;AACD,MAAA,CAAO,WAAA,GAAcA,SAAgB,IAAA,CAAK,WAAA","file":"chunk-27ELYTGE.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport { cn } from \"../../utils\";\n\nconst Switch = React.forwardRef<\n  React.ComponentRef<typeof SwitchPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitive.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n      className,\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitive.Thumb\n      className={cn(\n        \"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n      )}\n    />\n  </SwitchPrimitive.Root>\n));\nSwitch.displayName = SwitchPrimitive.Root.displayName;\n\nexport { Switch };\n"]}

package/dist/chunk-46TZGMFW.js

@@ -0,0 +1,159 @@
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-FK42ZGGV.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-22XB3Q6H.js';
+import { Button } from './chunk-NWSCYLPT.js';
+import { LayoutGrid, Table2, List, Settings2 } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+function ViewToggle({ viewMode, onViewModeChange }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center border rounded-lg overflow-hidden",
+      role: "group",
+      "aria-label": "View mode",
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: viewMode === "grid" ? "default" : "ghost",
+            size: "icon",
+            className: "h-8 w-8 rounded-none",
+            onClick: () => onViewModeChange("grid"),
+            title: "Grid view",
+            "aria-label": "Grid view",
+            "aria-pressed": viewMode === "grid",
+            testID: "view-toggle-grid",
+            children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: viewMode === "table" ? "default" : "ghost",
+            size: "icon",
+            className: "h-8 w-8 rounded-none",
+            onClick: () => onViewModeChange("table"),
+            title: "Table view",
+            "aria-label": "Table view",
+            "aria-pressed": viewMode === "table",
+            testID: "view-toggle-table",
+            children: /* @__PURE__ */ jsx(Table2, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: viewMode === "list" ? "default" : "ghost",
+            size: "icon",
+            className: "h-8 w-8 rounded-none",
+            onClick: () => onViewModeChange("list"),
+            title: "List view",
+            "aria-label": "List view",
+            "aria-pressed": viewMode === "list",
+            testID: "view-toggle-list",
+            children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+var PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+var DENSITY_OPTIONS = [
+  { value: "compact", label: "Compact" },
+  { value: "comfortable", label: "Comfortable" },
+  { value: "spacious", label: "Spacious" }
+];
+function ViewSettings({
+  pageSize,
+  onPageSizeChange,
+  density,
+  onDensityChange
+}) {
+  const baseId = useId();
+  const pageSizeLabelId = `${baseId}-page-size`;
+  const densityLabelId = `${baseId}-density`;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-8 w-8",
+        title: "View settings",
+        "aria-label": "View settings",
+        testID: "view-settings-trigger",
+        children: /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4", "aria-hidden": "true" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-56 space-y-4", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Display Settings" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: pageSizeLabelId,
+            className: "block text-xs text-muted-foreground",
+            children: "Page size"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: String(pageSize),
+            onValueChange: (v) => onPageSizeChange(Number(v)),
+            children: [
+              /* @__PURE__ */ jsx(
+                SelectTrigger,
+                {
+                  className: "h-8 text-xs",
+                  "aria-labelledby": pageSizeLabelId,
+                  "data-testid": "view-settings-page-size",
+                  children: /* @__PURE__ */ jsx(SelectValue, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: PAGE_SIZE_OPTIONS.map((n) => /* @__PURE__ */ jsxs(SelectItem, { value: String(n), children: [
+                n,
+                " items"
+              ] }, n)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: densityLabelId,
+            className: "block text-xs text-muted-foreground",
+            children: "Density"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: density,
+            onValueChange: (v) => onDensityChange(v),
+            children: [
+              /* @__PURE__ */ jsx(
+                SelectTrigger,
+                {
+                  className: "h-8 text-xs",
+                  "aria-labelledby": densityLabelId,
+                  "data-testid": "view-settings-density",
+                  children: /* @__PURE__ */ jsx(SelectValue, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: DENSITY_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export { ViewSettings, ViewToggle };
+//# sourceMappingURL=chunk-46TZGMFW.js.map
+//# sourceMappingURL=chunk-46TZGMFW.js.map

package/dist/chunk-46TZGMFW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/patterns/view-toggle.tsx","../src/components/patterns/view-settings.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-46TZGMFW.js","sourcesContent":["import { Button } from \"../ui/button\";\nimport { LayoutGrid, Table2, List } from \"lucide-react\";\n\nexport type ViewMode = \"grid\" | \"table\" | \"list\";\n\ninterface ViewToggleProps {\n  viewMode: ViewMode;\n  onViewModeChange: (mode: ViewMode) => void;\n}\n\nexport function ViewToggle({ viewMode, onViewModeChange }: ViewToggleProps) {\n  // Each button is icon-only, so `aria-label` supplies the accessible name\n  // (`title` alone is not a reliable one) and `aria-pressed` reports which of\n  // the three is current — the `default`/`ghost` variant swap conveys that to\n  // sighted users only.\n  return (\n    <div\n      className=\"flex items-center border rounded-lg overflow-hidden\"\n      role=\"group\"\n      aria-label=\"View mode\"\n    >\n      <Button\n        variant={viewMode === \"grid\" ? \"default\" : \"ghost\"}\n        size=\"icon\"\n        className=\"h-8 w-8 rounded-none\"\n        onClick={() => onViewModeChange(\"grid\")}\n        title=\"Grid view\"\n        aria-label=\"Grid view\"\n        aria-pressed={viewMode === \"grid\"}\n        testID=\"view-toggle-grid\"\n      >\n        <LayoutGrid className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </Button>\n      <Button\n        variant={viewMode === \"table\" ? \"default\" : \"ghost\"}\n        size=\"icon\"\n        className=\"h-8 w-8 rounded-none\"\n        onClick={() => onViewModeChange(\"table\")}\n        title=\"Table view\"\n        aria-label=\"Table view\"\n        aria-pressed={viewMode === \"table\"}\n        testID=\"view-toggle-table\"\n      >\n        <Table2 className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </Button>\n      <Button\n        variant={viewMode === \"list\" ? \"default\" : \"ghost\"}\n        size=\"icon\"\n        className=\"h-8 w-8 rounded-none\"\n        onClick={() => onViewModeChange(\"list\")}\n        title=\"List view\"\n        aria-label=\"List view\"\n        aria-pressed={viewMode === \"list\"}\n        testID=\"view-toggle-list\"\n      >\n        <List className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </Button>\n    </div>\n  );\n}\n","import { useId } from \"react\";\nimport { Settings2 } from \"lucide-react\";\nimport { Button } from \"../ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../ui/select\";\nimport type { Density } from \"../../hooks/use-view-settings\";\n\ninterface ViewSettingsProps {\n  pageSize: number;\n  onPageSizeChange: (size: number) => void;\n  density: Density;\n  onDensityChange: (density: Density) => void;\n}\n\nconst PAGE_SIZE_OPTIONS = [10, 25, 50, 100];\nconst DENSITY_OPTIONS: { value: Density; label: string }[] = [\n  { value: \"compact\", label: \"Compact\" },\n  { value: \"comfortable\", label: \"Comfortable\" },\n  { value: \"spacious\", label: \"Spacious\" },\n];\n\nexport function ViewSettings({\n  pageSize,\n  onPageSizeChange,\n  density,\n  onDensityChange,\n}: ViewSettingsProps) {\n  // Radix renders each `SelectTrigger` as a <button>, and a <label> cannot be\n  // associated with a button via `htmlFor`. `aria-labelledby` pointing at the\n  // visible label is the association that actually reaches assistive tech.\n  // `useId` keeps the ids unique when more than one ViewSettings is mounted.\n  const baseId = useId();\n  const pageSizeLabelId = `${baseId}-page-size`;\n  const densityLabelId = `${baseId}-density`;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"h-8 w-8\"\n          title=\"View settings\"\n          // Icon-only trigger: `title` is not a dependable accessible name.\n          aria-label=\"View settings\"\n          testID=\"view-settings-trigger\"\n        >\n          <Settings2 className=\"h-4 w-4\" aria-hidden=\"true\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-56 space-y-4\">\n        <h4 className=\"text-sm font-semibold\">Display Settings</h4>\n\n        <div className=\"space-y-2\">\n          <span\n            id={pageSizeLabelId}\n            className=\"block text-xs text-muted-foreground\"\n          >\n            Page size\n          </span>\n          <Select\n            value={String(pageSize)}\n            onValueChange={(v) => onPageSizeChange(Number(v))}\n          >\n            <SelectTrigger\n              className=\"h-8 text-xs\"\n              aria-labelledby={pageSizeLabelId}\n              data-testid=\"view-settings-page-size\"\n            >\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent className=\"bg-popover z-50\">\n              {PAGE_SIZE_OPTIONS.map((n) => (\n                <SelectItem key={n} value={String(n)}>\n                  {n} items\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div className=\"space-y-2\">\n          <span\n            id={densityLabelId}\n            className=\"block text-xs text-muted-foreground\"\n          >\n            Density\n          </span>\n          <Select\n            value={density}\n            onValueChange={(v) => onDensityChange(v as Density)}\n          >\n            <SelectTrigger\n              className=\"h-8 text-xs\"\n              aria-labelledby={densityLabelId}\n              data-testid=\"view-settings-density\"\n            >\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent className=\"bg-popover z-50\">\n              {DENSITY_OPTIONS.map((opt) => (\n                <SelectItem key={opt.value} value={opt.value}>\n                  {opt.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"]}

package/dist/chunk-4CQHPWJD.js

@@ -0,0 +1,117 @@
+import { GAP_CLASSES } from './chunk-AVFZ4P4B.js';
+import { cn } from './chunk-NZ5WBA4R.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var stackVariants = cva("flex", {
+  variants: {
+    direction: {
+      row: "flex-row",
+      column: "flex-col"
+    },
+    gap: GAP_CLASSES,
+    // Exactly `@marktiderman/genesis-ui-native`'s `FlexAlign` / `FlexJustify`
+    // — see `./spacing` for why the two surfaces share one vocabulary.
+    // Web flexbox also supports `baseline` and `space-evenly`, and an
+    // earlier draft offered both; they are deliberately NOT here, because
+    // native's Yoga vocabulary has neither, so a spec written against them
+    // could not be applied to the native surface. Since `align`/`justify`
+    // emit nothing when unset, `className="items-baseline"` reaches them
+    // with no class to fight. Widening is additive and can happen later on
+    // BOTH surfaces at once; shipping them here first and withdrawing them
+    // to restore parity would be a breaking change.
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around"
+    },
+    wrap: {
+      true: "flex-wrap",
+      // Empty, not `flex-nowrap`: nowrap is already flexbox's initial value,
+      // so emitting it would only add noise. Same reasoning as the
+      // undefaulted `align`/`justify` below.
+      false: ""
+    }
+  },
+  // `align` and `justify` have NO default on purpose. Defaulting them would
+  // emit `items-stretch`/`justify-start` on every Stack ever rendered — the
+  // browser's own initial values — which is noise in the DOM and, worse,
+  // beats a consumer's `className` at equal specificity for anyone not
+  // going through `cn()`. Unset means "whatever flexbox already does".
+  defaultVariants: {
+    direction: "column",
+    gap: "md",
+    wrap: false
+  }
+});
+var Stack = React.forwardRef(
+  ({ className, direction, gap, align, justify, wrap, testID, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "stack",
+      "data-testid": testID,
+      className: cn(
+        stackVariants({ direction, gap, align, justify, wrap }),
+        className
+      ),
+      ...props
+    }
+  )
+);
+Stack.displayName = "Stack";
+var containerVariants = cva("mx-auto w-full", {
+  variants: {
+    // A deliberately short list. Named widths are a shared decision — five
+    // of them means two pages can't be 4px apart for no reason, which is
+    // exactly what happens once `max-w-[1180px]` is on the table.
+    size: {
+      /** Forms, settings, single-column detail. */
+      sm: "max-w-3xl",
+      /** Standard content pages. */
+      md: "max-w-5xl",
+      /** Application pages — the default. */
+      lg: "max-w-7xl",
+      /** Dashboards and wide tables: gutters, no ceiling. */
+      full: "max-w-none",
+      /** Long-form reading, capped by character count rather than width. */
+      prose: "max-w-prose"
+    },
+    // The three steps are the design system's own page spacing token
+    // (`spacing.page` = 1rem / 1.5rem / 2rem) expressed as utilities.
+    gutter: {
+      true: "px-4 sm:px-6 lg:px-8",
+      false: "px-0"
+    }
+  },
+  defaultVariants: {
+    size: "lg",
+    gutter: true
+  }
+});
+var Container = React.forwardRef(
+  ({ className, size, gutter, testID, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "container",
+      "data-testid": testID,
+      className: cn(containerVariants({ size, gutter }), className),
+      ...props
+    }
+  )
+);
+Container.displayName = "Container";
+
+export { Container, Stack, containerVariants, stackVariants };
+//# sourceMappingURL=chunk-4CQHPWJD.js.map
+//# sourceMappingURL=chunk-4CQHPWJD.js.map

package/dist/chunk-4CQHPWJD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/stack.tsx","../src/components/layout/container.tsx"],"names":["cva","React2","jsx"],"mappings":";;;;;;AAKA,IAAM,aAAA,GAAgB,IAAI,MAAA,EAAQ;AAAA,EAChC,QAAA,EAAU;AAAA,IACR,SAAA,EAAW;AAAA,MACT,GAAA,EAAK,UAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,GAAA,EAAK,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWL,KAAA,EAAO;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAK,WAAA;AAAA,MACL,OAAA,EAAS;AAAA,KACX;AAAA,IACA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,eAAA;AAAA,MACP,MAAA,EAAQ,gBAAA;AAAA,MACR,GAAA,EAAK,aAAA;AAAA,MACL,OAAA,EAAS,iBAAA;AAAA,MACT,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,WAAA;AAAA;AAAA;AAAA;AAAA,MAIN,KAAA,EAAO;AAAA;AACT,GACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAA,EAAiB;AAAA,IACf,SAAA,EAAW,QAAA;AAAA,IACX,GAAA,EAAK,IAAA;AAAA,IACL,IAAA,EAAM;AAAA;AAEV,CAAC;AA6CM,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EACzB,CACE,EAAE,SAAA,EAAW,SAAA,EAAW,GAAA,EAAK,KAAA,EAAO,OAAA,EAAS,IAAA,EAAM,MAAA,EAAQ,GAAG,KAAA,EAAM,EACpE,GAAA,qBAEA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,OAAA;AAAA,MACV,aAAA,EAAa,MAAA;AAAA,MACb,SAAA,EAAW,EAAA;AAAA,QACT,cAAc,EAAE,SAAA,EAAW,KAAK,KAAA,EAAO,OAAA,EAAS,MAAM,CAAA;AAAA,QACtD;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA;AAGV;AACA,KAAA,CAAM,WAAA,GAAc,OAAA;AC/GpB,IAAM,iBAAA,GAAoBA,IAAI,gBAAA,EAAkB;AAAA,EAC9C,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA,IAIR,IAAA,EAAM;AAAA;AAAA,MAEJ,EAAA,EAAI,WAAA;AAAA;AAAA,MAEJ,EAAA,EAAI,WAAA;AAAA;AAAA,MAEJ,EAAA,EAAI,WAAA;AAAA;AAAA,MAEJ,IAAA,EAAM,YAAA;AAAA;AAAA,MAEN,KAAA,EAAO;AAAA,KACT;AAAA;AAAA;AAAA,IAGA,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM,sBAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,MAAA,EAAQ;AAAA;AAEZ,CAAC;AAkCM,IAAM,SAAA,GAAkBC,KAAA,CAAA,UAAA;AAAA,EAC7B,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,MAAA,EAAQ,QAAQ,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC9CC,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,aAAA,EAAa,MAAA;AAAA,MACb,SAAA,EAAW,GAAG,iBAAA,CAAkB,EAAE,MAAM,MAAA,EAAQ,GAAG,SAAS,CAAA;AAAA,MAC3D,GAAG;AAAA;AAAA;AAGV;AACA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-4CQHPWJD.js","sourcesContent":["import * as React from \"react\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { cn } from \"../../utils\";\nimport { GAP_CLASSES } from \"./spacing\";\n\nconst stackVariants = cva(\"flex\", {\n  variants: {\n    direction: {\n      row: \"flex-row\",\n      column: \"flex-col\",\n    },\n    gap: GAP_CLASSES,\n    // Exactly `@marktiderman/genesis-ui-native`'s `FlexAlign` / `FlexJustify`\n    // — see `./spacing` for why the two surfaces share one vocabulary.\n    // Web flexbox also supports `baseline` and `space-evenly`, and an\n    // earlier draft offered both; they are deliberately NOT here, because\n    // native's Yoga vocabulary has neither, so a spec written against them\n    // could not be applied to the native surface. Since `align`/`justify`\n    // emit nothing when unset, `className=\"items-baseline\"` reaches them\n    // with no class to fight. Widening is additive and can happen later on\n    // BOTH surfaces at once; shipping them here first and withdrawing them\n    // to restore parity would be a breaking change.\n    align: {\n      start: \"items-start\",\n      center: \"items-center\",\n      end: \"items-end\",\n      stretch: \"items-stretch\",\n    },\n    justify: {\n      start: \"justify-start\",\n      center: \"justify-center\",\n      end: \"justify-end\",\n      between: \"justify-between\",\n      around: \"justify-around\",\n    },\n    wrap: {\n      true: \"flex-wrap\",\n      // Empty, not `flex-nowrap`: nowrap is already flexbox's initial value,\n      // so emitting it would only add noise. Same reasoning as the\n      // undefaulted `align`/`justify` below.\n      false: \"\",\n    },\n  },\n  // `align` and `justify` have NO default on purpose. Defaulting them would\n  // emit `items-stretch`/`justify-start` on every Stack ever rendered — the\n  // browser's own initial values — which is noise in the DOM and, worse,\n  // beats a consumer's `className` at equal specificity for anyone not\n  // going through `cn()`. Unset means \"whatever flexbox already does\".\n  defaultVariants: {\n    direction: \"column\",\n    gap: \"md\",\n    wrap: false,\n  },\n});\n\nexport interface StackProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof stackVariants> {\n  /** Stable test/automation selector (emitted as `data-testid`). */\n  testID?: string;\n}\n\n/**\n * Stack — one-dimensional flow. The single most-repeated shape in any\n * application: a run of things in a line, evenly spaced.\n *\n * It replaces the `flex flex-col gap-4` / `flex items-center gap-2` strings\n * that otherwise get retyped in every file, and it is the reason `gap`\n * stays on the shared `SpaceToken` scale (see `./spacing`) instead of\n * drifting per page.\n *\n * ```tsx\n * <Stack gap=\"lg\">\n *   <Card />\n *   <Card />\n * </Stack>\n *\n * <Stack direction=\"row\" align=\"center\" justify=\"between\" gap=\"sm\">\n *   <h2>Members</h2>\n *   <Button>Invite</Button>\n * </Stack>\n * ```\n *\n * Deliberately NOT here: responsive per-breakpoint directions. A layout\n * that changes axis at a breakpoint is a `Split`, which owns that idea and\n * names the breakpoint explicitly.\n *\n * Note for consumers of both surfaces: `@marktiderman/genesis-ui-native`\n * splits this shape into two components, `Stack` (column) and `Inline`\n * (row). On web they are one component with a `direction` prop, which is\n * the established web idiom. The `gap` / `align` / `justify` vocabulary is\n * identical either way — deliberately, and enforced by a test that reads\n * the native definitions directly — so a spec written once still reads the\n * same on both. That means the web unions are the SHARED vocabulary, not\n * everything web flexbox can do; see the note on `align` below.\n *\n * @stability Beta\n */\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(\n  (\n    { className, direction, gap, align, justify, wrap, testID, ...props },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      data-slot=\"stack\"\n      data-testid={testID}\n      className={cn(\n        stackVariants({ direction, gap, align, justify, wrap }),\n        className\n      )}\n      {...props}\n    />\n  )\n);\nStack.displayName = \"Stack\";\n\nexport { stackVariants };\n","import * as React from \"react\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { cn } from \"../../utils\";\n\nconst containerVariants = cva(\"mx-auto w-full\", {\n  variants: {\n    // A deliberately short list. Named widths are a shared decision — five\n    // of them means two pages can't be 4px apart for no reason, which is\n    // exactly what happens once `max-w-[1180px]` is on the table.\n    size: {\n      /** Forms, settings, single-column detail. */\n      sm: \"max-w-3xl\",\n      /** Standard content pages. */\n      md: \"max-w-5xl\",\n      /** Application pages — the default. */\n      lg: \"max-w-7xl\",\n      /** Dashboards and wide tables: gutters, no ceiling. */\n      full: \"max-w-none\",\n      /** Long-form reading, capped by character count rather than width. */\n      prose: \"max-w-prose\",\n    },\n    // The three steps are the design system's own page spacing token\n    // (`spacing.page` = 1rem / 1.5rem / 2rem) expressed as utilities.\n    gutter: {\n      true: \"px-4 sm:px-6 lg:px-8\",\n      false: \"px-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"lg\",\n    gutter: true,\n  },\n});\n\nexport interface ContainerProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof containerVariants> {\n  /** Stable test/automation selector (emitted as `data-testid`). */\n  testID?: string;\n}\n\n/**\n * Container — the page gutter: a centered column with a named maximum\n * width and responsive side padding.\n *\n * ```tsx\n * <Container>\n *   <Section title=\"Overview\">{…}</Section>\n * </Container>\n *\n * <Container size=\"sm\">\n *   <SettingsForm />\n * </Container>\n *\n * <Container size=\"full\" gutter={false}>\n *   <FullBleedMap />\n * </Container>\n * ```\n *\n * `gutter` is a real prop rather than a `className` override because the\n * padding is responsive: passing `px-0` would only cancel the base step\n * and leave `sm:px-6` and `lg:px-8` intact, so the escape hatch that looks\n * like it should work silently doesn't.\n *\n * @stability Beta\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ className, size, gutter, testID, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"container\"\n      data-testid={testID}\n      className={cn(containerVariants({ size, gutter }), className)}\n      {...props}\n    />\n  )\n);\nContainer.displayName = \"Container\";\n\nexport { containerVariants };\n"]}

package/dist/{chunk-ZDAT5JDH.js → chunk-65SPT7EA.js}

@@ -1,14 +1,32 @@
+import { Button } from './chunk-NWSCYLPT.js';
 import { cn } from './chunk-NZ5WBA4R.js';
 import { FileQuestion, Lightbulb, MessageSquare, Search } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_TITLE = "No results found";
+var FILTERED_TITLE = "No results match your filters";
 function EmptyState({
   icon: Icon = FileQuestion,
   title,
   description,
   action,
-  className
+  className,
+  message,
+  hasFilters = false,
+  onClearFilters
 }) {
+  const resolvedTitle = hasFilters ? FILTERED_TITLE : title ?? message ?? DEFAULT_TITLE;
+  const resolvedDescription = hasFilters ? void 0 : description;
+  const resolvedAction = hasFilters && onClearFilters ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "link",
+      size: "sm",
+      testID: "empty-state-clear-filters",
+      onClick: onClearFilters,
+      children: "Clear all filters"
+    }
+  ) : action;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -18,9 +36,9 @@ function EmptyState({
       ),
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: "h-8 w-8 text-muted-foreground", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx("h3", { className: "mt-4 text-lg font-semibold", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground max-w-sm", children: description }),
-        action && /* @__PURE__ */ jsx("div", { className: "mt-6", children: action })
+        /* @__PURE__ */ jsx("h3", { className: "mt-4 text-lg font-semibold", children: resolvedTitle }),
+        resolvedDescription && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground max-w-sm", children: resolvedDescription }),
+        resolvedAction && /* @__PURE__ */ jsx("div", { className: "mt-6", children: resolvedAction })
       ]
     }
   );
@@ -78,5 +96,5 @@ function NoSearchResults({
 }
 
 export { EmptyState, NoFeaturesFound, NoFeedbackFound, NoSearchResults };
-//# sourceMappingURL=chunk-ZDAT5JDH.js.map
-//# sourceMappingURL=chunk-ZDAT5JDH.js.map
+//# sourceMappingURL=chunk-65SPT7EA.js.map
+//# sourceMappingURL=chunk-65SPT7EA.js.map