@bloomneo/uikit 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -2,6 +2,91 @@
 
 All notable changes to UIKit will be documented in this file.
 
+## [1.5.1] - 2026-04-11
+
+A focused follow-up to 1.5.0. Fixes the one publicly-documented type bug from
+the AI-ready release, plus lands four small "production reliability + missing
+primitives" items from real-world feedback. Pure additive — no breaking
+changes, no migration needed.
+
+### Fixed
+
+- **`<DataTable<T>>` generic erasure** — `DataTable` was exported via
+  `forwardRef<HTMLTableElement, DataTableProps>`, which erases the row
+  generic at the value level. Consumers writing `<DataTable<User> data={...} />`
+  (the exact pattern from `examples/data-table.tsx`) hit
+  `TS2558: Expected 0 type arguments, but got 1`. The fix is the canonical
+  generic-forwardRef recipe: cast the forwardRef result to a generic call
+  signature so `T` propagates from the JSX type argument back into `data`,
+  `columns`, `actions`, `getRowId`, and the cell renderers. Same runtime
+  behavior, type-safe consumer API.
+- **README example count** — README claimed 13 example files; `examples/`
+  actually shipped 12. Updated to match reality (now 15 with the new files
+  added below).
+
+### Added — production reliability (FBCA template)
+
+These three fixes apply to the `bin/templates/fbca/.../page-router.tsx`
+template that gets copied into newly-scaffolded projects. Existing scaffolded
+projects need to either re-scaffold or apply the diff manually.
+
+- **Default branded 404 page** — the old fallback rendered a debug message
+  that **leaked the full route map to end users** (a security smell on every
+  scaffolded site). Replaced with a theme-aware 404 page (logo-friendly, "back
+  to home" CTA, uses CSS variables so it follows the active theme). Pass
+  `<PageRouter notFound={<Custom404 />}>` to override.
+- **Default error boundary** — a single page throwing a runtime error used
+  to white-screen the entire SPA. The router now wraps every route in a
+  default error boundary that shows a branded "Something went wrong / reload"
+  page. Override with `<PageRouter errorBoundary={<MyError />} onError={(err) => sendToSentry(err)} />`.
+- **Code splitting per route by default** — `import.meta.glob` now uses
+  lazy mode (`{ eager: false }`), each page is wrapped in `React.lazy()` +
+  `Suspense`, and the router supplies a default loading fallback. Tiny apps
+  that prefer the old eager behavior can opt out with `<PageRouter eager />`.
+
+### Added — runtime primitives
+
+- **`<PermissionGate>` + `<PermissionProvider>` + `usePermission()`** —
+  unopinionated role-gating primitive for multi-role apps. Bring your own
+  auth source via a `check(permission: string) => boolean` function on the
+  provider; `<PermissionGate when="admin">`, `when={['admin', 'mod']}` (OR),
+  or `when={() => predicate}` are all supported. Replaces the
+  `{user.roles.includes('admin') && <Button />}` pattern that gets repeated
+  dozens of times in any admin app. See `examples/permission-gate.tsx`.
+- **`usePagination()` hook** — pagination state machine. The
+  `<Pagination>` UI component already shipped, but the state (current page,
+  total, hasNext, hasPrev, ellipsis logic, page-link compression) was DIY in
+  every list view. Returns `page`, `pageCount`, `startIndex`, `endIndex`,
+  `hasNext`, `hasPrev`, `pages` (with `'ellipsis-start'` / `'ellipsis-end'`
+  markers), and `goTo` / `next` / `prev` / `first` / `last` callbacks.
+  See `examples/use-pagination.tsx`.
+- **`<Combobox>` searchable Select** — for dropdowns with more than ~20
+  options where typing-to-filter beats scrolling. Built on the existing
+  `Command` (cmdk) + `Popover` primitives so no new dependencies. API is
+  intentionally close to `<Select>`: `value` / `onChange` / `options` with
+  `{ value, label }` shape. Supports `clearable`, `disabled`, custom
+  `renderOption`, and configurable popover width. See `examples/combobox.tsx`.
+
+### Verified, not changed
+
+- **HeaderNav mobile hamburger** (1.5 feedback #17) — verified the existing
+  v1.5.0 implementation already ships a working hamburger menu with body
+  scroll lock, dropdown handling, and a `<md` breakpoint. The original
+  feedback was based on outdated source. A `collapseAt` prop for
+  configurable breakpoints is a nice-to-have for a future release; it's
+  not closing a real production gap today.
+
+### Numbers
+
+| Metric | 1.5.0 | 1.5.1 |
+|---|---|---|
+| Public exports | 236 | ~248 |
+| Example files | 12 | 15 |
+| New UI components | — | 2 (PermissionGate, Combobox) |
+| New hooks | — | 1 (usePagination) |
+| Template fixes | — | 3 (404, error boundary, code splitting) |
+| Type bugs fixed | — | 1 (DataTable generic erasure) |
+
 ## [1.5.0] - 2026-04-11
 
 > **🔁 Scope change.** Starting with this release the package lives at

package/README.md

@@ -57,7 +57,7 @@ theme classes are on `<html>` before React mounts.
 
 - **Generated `llms.txt`**: One canonical, machine-readable index of every export, every example, every cookbook recipe — regenerated on every build from `src/index.ts`, `examples/`, and `cookbook/`. Agents read one file and know everything.
 - **Zero `any` in public types**: Full generic inference for `DataTable<User>`, `RowAction<User>`, formatters, hooks. Agent autocomplete actually works.
-- **One copy-pasteable example per primitive**: 13 minimal `.tsx` files in `examples/` plus 5 composed page recipes in `cookbook/` (CRUD, dashboard, settings, login, delete-flow). Agents pattern-match instead of inventing prop shapes.
+- **One copy-pasteable example per primitive**: 15 minimal `.tsx` files in `examples/` plus 5 composed page recipes in `cookbook/` (CRUD, dashboard, settings, login, delete-flow). Agents pattern-match instead of inventing prop shapes.
 - **Educational runtime errors**: Misuse a component and you get `[@bloomneo/uikit] <DataTable> expects \`data\` to be an array …` linking to the docs entry. Agents read errors and self-correct.
 
 **🚀 For rapid development**

package/bin/templates/fbca/src/web/lib/page-router.tsx.template

@@ -1,134 +1,248 @@
 /**
  * Page Router
- * Auto-discovers routes using Vite glob imports and file-based conventions
+ *
+ * Auto-discovers routes using Vite glob imports and file-based conventions.
+ *
+ * v1.5.1 production-reliability fixes:
+ *   • Code-splitting per route via React.lazy + Suspense (was eager).
+ *     Pass <PageRouter eager /> to opt back into the eager behavior for tiny apps.
+ *   • Default branded 404 page that uses theme tokens. The old debug message
+ *     leaked the full route map to end users — gone.
+ *   • Default error boundary so a single page throwing no longer white-screens
+ *     the whole app. Override with <PageRouter errorBoundary={<MyError/>} />.
+ *
+ * Override props:
+ *   <PageRouter
+ *     notFound={<Custom404 />}             // override the default 404 element
+ *     errorBoundary={<CustomError />}      // override the default error UI
+ *     onError={(err, info) => report(err)} // hook into errors
+ *     fallback={<MySpinner />}             // override the lazy-loading fallback
+ *     eager                                // disable code-splitting
+ *   />
  */
 
-import React, { useEffect } from 'react';
+import React, { Component, Suspense, type ErrorInfo, type ReactNode, useEffect } from 'react';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
-// Auto-discover all page files using Vite glob import (including nested) - eager loading
-const pageFiles = import.meta.glob('../features/*/pages/**/*.{tsx,jsx}', { eager: true });
-
-function generateRoutes() {
-  const routes: Array<{ path: string; component: React.ComponentType<any> }> = [];
-
-  // Process each discovered page file
-  Object.entries(pageFiles).forEach(([filePath, module]) => {
-    // Extract feature and nested path from file path
-    // Examples:
-    // ../features/main/pages/index.tsx -> feature: main, nested: ['index']
-    // ../features/gallery/pages/new/cat.tsx -> feature: gallery, nested: ['new', 'cat']
-    // ../features/gallery/pages/[animal].tsx -> feature: gallery, nested: ['[animal]']
-    // ../features/blog/pages/[...slug].tsx -> feature: blog, nested: ['[...slug]']
-    const match = filePath.match(/\.\.\/features\/([^/]+)\/pages\/(.+)\.tsx?$/);
-
-    if (!match) return;
-
-    const [, feature, nestedPath] = match;
-    const pathSegments = nestedPath.split('/');
-
-    // Convention-based routing logic
-    let routePath: string;
-
-    if (feature === 'main') {
-      // Main feature gets priority routes
-      if (pathSegments.length === 1 && pathSegments[0] === 'index') {
-        routePath = '/';
-      } else {
-        // Convert nested path: about/details -> /about/details
-        routePath = '/' + pathSegments
-          .map(segment => segment === 'index' ? '' : segment.toLowerCase())
-          .filter(Boolean)
-          .map(segment => {
-            // Handle catch-all routes: [...slug] -> *
-            if (segment.startsWith('[...') && segment.endsWith(']')) {
-              return '*';
-            }
-            // Handle dynamic params: [animal] -> :animal
-            if (segment.startsWith('[') && segment.endsWith(']')) {
-              return ':' + segment.slice(1, -1);
-            }
-            return segment;
-          })
-          .join('/');
-      }
-    } else {
-      // Other features: /feature/nested/path
-      const nestedRoute = pathSegments
-        .map(segment => segment === 'index' ? '' : segment.toLowerCase())
-        .filter(Boolean)
-        .map(segment => {
-          // Handle catch-all routes: [...slug] -> *
-          if (segment.startsWith('[...') && segment.endsWith(']')) {
-            return '*';
-          }
-          // Handle dynamic params: [animal] -> :animal
-          if (segment.startsWith('[') && segment.endsWith(']')) {
-            return ':' + segment.slice(1, -1);
-          }
-          return segment;
-        })
-        .join('/');
-
-      if (pathSegments.length === 1 && pathSegments[0] === 'index') {
-        routePath = `/${feature}`;
-      } else {
-        routePath = `/${feature}${nestedRoute ? '/' + nestedRoute : ''}`;
-      }
-    }
+/* -------------------------------------------------------------------------- */
+/* Route discovery                                                            */
+/* -------------------------------------------------------------------------- */
 
-    routes.push({
-      path: routePath,
-      component: (module as any).default
-    });
-  });
+// Eager glob — used when <PageRouter eager />
+const eagerPageFiles = import.meta.glob('../features/*/pages/**/*.{tsx,jsx}', { eager: true });
+
+// Lazy glob — default. Each match returns a `() => import('...')` factory.
+const lazyPageFiles = import.meta.glob('../features/*/pages/**/*.{tsx,jsx}');
 
-  // Sort routes so more specific ones come first
-  routes.sort((a, b) => {
-    // Root route should be last for proper matching
+type LoadedModule = { default: React.ComponentType<unknown> };
+
+interface DiscoveredRoute {
+  path: string;
+  component: React.ComponentType<unknown>;
+}
+
+function pathFromFile(filePath: string): string | null {
+  const match = filePath.match(/\.\.\/features\/([^/]+)\/pages\/(.+)\.tsx?$/);
+  if (!match) return null;
+
+  const [, feature, nestedPath] = match;
+  const pathSegments = nestedPath.split('/');
+
+  const segmentToRoute = (segment: string) => {
+    if (segment.startsWith('[...') && segment.endsWith(']')) return '*';
+    if (segment.startsWith('[') && segment.endsWith(']')) return ':' + segment.slice(1, -1);
+    return segment;
+  };
+
+  if (feature === 'main') {
+    if (pathSegments.length === 1 && pathSegments[0] === 'index') return '/';
+    return '/' + pathSegments
+      .map(s => s === 'index' ? '' : s.toLowerCase())
+      .filter(Boolean)
+      .map(segmentToRoute)
+      .join('/');
+  }
+
+  const nestedRoute = pathSegments
+    .map(s => s === 'index' ? '' : s.toLowerCase())
+    .filter(Boolean)
+    .map(segmentToRoute)
+    .join('/');
+
+  if (pathSegments.length === 1 && pathSegments[0] === 'index') return `/${feature}`;
+  return `/${feature}${nestedRoute ? '/' + nestedRoute : ''}`;
+}
+
+function sortRoutes(routes: DiscoveredRoute[]): DiscoveredRoute[] {
+  return routes.sort((a, b) => {
     if (a.path === '/') return 1;
     if (b.path === '/') return -1;
     return b.path.length - a.path.length;
   });
+}
 
-  console.log('🚀 Auto-discovered routes:');
-  routes.forEach(route => console.log(`  ${route.path}`));
+function generateEagerRoutes(): DiscoveredRoute[] {
+  const routes: DiscoveredRoute[] = [];
+  Object.entries(eagerPageFiles).forEach(([filePath, mod]) => {
+    const path = pathFromFile(filePath);
+    if (!path) return;
+    routes.push({ path, component: (mod as LoadedModule).default });
+  });
+  return sortRoutes(routes);
+}
 
-  return routes;
+function generateLazyRoutes(): DiscoveredRoute[] {
+  const routes: DiscoveredRoute[] = [];
+  Object.entries(lazyPageFiles).forEach(([filePath, importer]) => {
+    const path = pathFromFile(filePath);
+    if (!path) return;
+    routes.push({
+      path,
+      component: React.lazy(importer as () => Promise<LoadedModule>),
+    });
+  });
+  return sortRoutes(routes);
 }
 
-// Component to handle scroll to top on route change
-const ScrollToTop: React.FC = () => {
-  const { pathname } = useLocation();
+/* -------------------------------------------------------------------------- */
+/* Default 404                                                                */
+/* -------------------------------------------------------------------------- */
+
+const DefaultNotFound: React.FC = () => (
+  <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 px-6 py-16 text-center">
+    <p className="text-sm font-medium text-muted-foreground">404</p>
+    <h1 className="text-3xl font-semibold tracking-tight text-foreground">Page not found</h1>
+    <p className="max-w-md text-sm text-muted-foreground">
+      The page you’re looking for doesn’t exist or has moved.
+    </p>
+    <a
+      href="/"
+      className="mt-2 inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      Back to home
+    </a>
+  </div>
+);
+
+/* -------------------------------------------------------------------------- */
+/* Default error boundary                                                     */
+/* -------------------------------------------------------------------------- */
+
+interface ErrorBoundaryProps {
+  fallback: ReactNode;
+  onError?: (error: Error, info: ErrorInfo) => void;
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class RouteErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false };
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    this.props.onError?.(error, info);
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('[PageRouter] Page threw:', error, info);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) return this.props.fallback;
+    return this.props.children;
+  }
+}
 
+const DefaultErrorElement: React.FC = () => (
+  <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 px-6 py-16 text-center">
+    <p className="text-sm font-medium text-destructive">Something went wrong</p>
+    <h1 className="text-3xl font-semibold tracking-tight text-foreground">An error occurred</h1>
+    <p className="max-w-md text-sm text-muted-foreground">
+      Please refresh the page. If the problem persists, contact support.
+    </p>
+    <button
+      type="button"
+      onClick={() => window.location.reload()}
+      className="mt-2 inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      Reload page
+    </button>
+  </div>
+);
+
+const DefaultLazyFallback: React.FC = () => (
+  <div className="flex min-h-[30vh] items-center justify-center" aria-label="Loading">
+    <div className="size-6 animate-spin rounded-full border-2 border-muted border-t-primary" />
+  </div>
+);
+
+/* -------------------------------------------------------------------------- */
+/* ScrollToTop                                                                */
+/* -------------------------------------------------------------------------- */
+
+const ScrollToTop: React.FC = () => {
+  const { pathname } = useLocation();
+  useEffect(() => { window.scrollTo(0, 0); }, [pathname]);
   return null;
 };
 
-export const PageRouter: React.FC = () => {
-  const routes = generateRoutes();
+/* -------------------------------------------------------------------------- */
+/* PageRouter                                                                 */
+/* -------------------------------------------------------------------------- */
+
+export interface PageRouterProps {
+  /** Custom 404 element. Defaults to a branded theme-aware 404 page. */
+  notFound?: ReactNode;
+  /** Custom error boundary fallback element. */
+  errorBoundary?: ReactNode;
+  /** Called when any page throws. Useful for Sentry / observability. */
+  onError?: (error: Error, info: ErrorInfo) => void;
+  /** Loading fallback shown while a lazy route chunk is fetched. */
+  fallback?: ReactNode;
+  /** Disable code-splitting and load every page eagerly. Default: false. */
+  eager?: boolean;
+}
+
+export const PageRouter: React.FC<PageRouterProps> = ({
+  notFound,
+  errorBoundary,
+  onError,
+  fallback,
+  eager = false,
+}) => {
+  const routes = eager ? generateEagerRoutes() : generateLazyRoutes();
+
+  // In dev, log discovered routes for visibility (unchanged from previous behavior).
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.log('🚀 Auto-discovered routes:');
+    routes.forEach(route => {
+      // eslint-disable-next-line no-console
+      console.log(`  ${route.path}`);
+    });
+  }
+
+  const errorElement = errorBoundary ?? <DefaultErrorElement />;
+  const notFoundElement = notFound ?? <DefaultNotFound />;
+  const lazyFallback = fallback ?? <DefaultLazyFallback />;
 
   return (
-    <>
+    <RouteErrorBoundary fallback={errorElement} onError={onError}>
       <ScrollToTop />
-      <Routes>
-        {routes.map(({ path, component: Component }) => (
-          <Route key={path} path={path} element={<Component />} />
-        ))}
-        {/* Fallback for 404 */}
-        <Route path="*" element={
-          <div className="text-center py-12 text-muted-foreground">
-            <h1 className="text-4xl font-bold mb-4">404</h1>
-            <p>Page not found - Route not discovered</p>
-            <div className="mt-4 text-sm">
-              Available routes: {routes.map(r => r.path).join(', ')}
-            </div>
-          </div>
-        } />
-      </Routes>
-    </>
+      <Suspense fallback={lazyFallback}>
+        <Routes>
+          {routes.map(({ path, component: Component }) => (
+            <Route key={path} path={path} element={<Component />} />
+          ))}
+          <Route path="*" element={notFoundElement} />
+        </Routes>
+      </Suspense>
+    </RouteErrorBoundary>
   );
-};
+};

package/dist/combobox.js

@@ -0,0 +1,119 @@
+import { jsxs as a, jsx as r, Fragment as N } from "react/jsx-runtime";
+import * as h from "react";
+import { c as i } from "./utils-CwJPJKOE.js";
+import { Button as w } from "./button.js";
+import { Command as k, CommandInput as S, CommandList as j, CommandEmpty as z, CommandGroup as I, CommandItem as P } from "./command.js";
+import { Popover as D, PopoverTrigger as L, PopoverContent as U } from "./popover.js";
+import { X as B } from "./x-BxwubQiM.js";
+import { c as E } from "./createLucideIcon-B45kRl5r.js";
+import { C as F } from "./check-DXouwtzp.js";
+/**
+ * @license lucide-react v0.468.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const G = E("ChevronsUpDown", [
+  ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
+  ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
+]);
+function J({
+  value: t,
+  onChange: o,
+  options: n,
+  placeholder: g = "Select…",
+  searchPlaceholder: x = "Search…",
+  emptyMessage: C = "No results.",
+  clearable: m = !1,
+  disabled: c = !1,
+  renderOption: d,
+  className: b,
+  contentWidth: s = "trigger"
+}) {
+  const [p, u] = h.useState(!1), l = h.useMemo(
+    () => n.find((e) => e.value === t),
+    [n, t]
+  ), v = (e) => {
+    o?.(e === t && m ? void 0 : e), u(!1);
+  }, y = (e) => {
+    e.stopPropagation(), o?.(void 0);
+  };
+  return /* @__PURE__ */ a(D, { open: p, onOpenChange: u, children: [
+    /* @__PURE__ */ r(L, { asChild: !0, children: /* @__PURE__ */ a(
+      w,
+      {
+        type: "button",
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": p,
+        "aria-haspopup": "listbox",
+        disabled: c,
+        className: i(
+          "w-full justify-between font-normal",
+          !l && "text-muted-foreground",
+          b
+        ),
+        children: [
+          /* @__PURE__ */ r("span", { className: "truncate", children: l ? l.label : g }),
+          /* @__PURE__ */ a("span", { className: "ml-2 flex shrink-0 items-center gap-1", children: [
+            m && l && !c && /* @__PURE__ */ r(
+              "span",
+              {
+                role: "button",
+                tabIndex: -1,
+                "aria-label": "Clear selection",
+                onClick: y,
+                className: "inline-flex size-4 items-center justify-center rounded text-muted-foreground hover:text-foreground",
+                children: /* @__PURE__ */ r(B, { className: "size-3" })
+              }
+            ),
+            /* @__PURE__ */ r(G, { className: "size-4 opacity-50" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ r(
+      U,
+      {
+        className: i("p-0", s === "trigger" && "w-[var(--radix-popover-trigger-width)]"),
+        style: s !== "trigger" && s !== "auto" ? { width: s } : void 0,
+        align: "start",
+        children: /* @__PURE__ */ a(k, { children: [
+          /* @__PURE__ */ r(S, { placeholder: x }),
+          /* @__PURE__ */ a(j, { children: [
+            /* @__PURE__ */ r(z, { children: C }),
+            /* @__PURE__ */ r(I, { children: n.map((e) => {
+              const f = e.value === t;
+              return /* @__PURE__ */ r(
+                P,
+                {
+                  value: e.label,
+                  disabled: e.disabled,
+                  onSelect: () => v(e.value),
+                  className: "flex items-center justify-between gap-2",
+                  children: d ? d(e, f) : /* @__PURE__ */ a(N, { children: [
+                    /* @__PURE__ */ r("span", { className: "truncate", children: e.label }),
+                    /* @__PURE__ */ r(
+                      F,
+                      {
+                        className: i(
+                          "size-4 shrink-0",
+                          f ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    )
+                  ] })
+                },
+                e.value
+              );
+            }) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  J as Combobox
+};
+//# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","sources":["../node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js","../src/components/ui/combobox.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.468.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst ChevronsUpDown = createLucideIcon(\"ChevronsUpDown\", [\n  [\"path\", { d: \"m7 15 5 5 5-5\", key: \"1hf1tw\" }],\n  [\"path\", { d: \"m7 9 5-5 5 5\", key: \"sgt6xg\" }]\n]);\n\nexport { ChevronsUpDown as default };\n//# sourceMappingURL=chevrons-up-down.js.map\n","/**\n * <Combobox> — searchable Select.\n *\n * For dropdowns with more than ~20 options where typing-to-filter beats\n * scrolling. Built on the existing Command (cmdk) + Popover primitives so it\n * doesn't add new dependencies.\n *\n * The API is intentionally close to <Select>:\n *\n *   <Combobox\n *     value={country}\n *     onChange={setCountry}\n *     options={[\n *       { value: 'us', label: 'United States' },\n *       { value: 'in', label: 'India' },\n *       { value: 'uk', label: 'United Kingdom' },\n *     ]}\n *     placeholder=\"Select a country\"\n *     searchPlaceholder=\"Search countries…\"\n *   />\n *\n * Pass `clearable` to allow setting back to undefined. Pass `disabled` to\n * lock. Pass `renderOption` if you need icons / two-line entries.\n */\n\nimport * as React from 'react';\nimport { Check, ChevronsUpDown, X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  /** Disable this specific option. */\n  disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n  /** Currently-selected value, or undefined for \"no selection\". */\n  value?: string;\n  /** Called when the user picks an option. Receives undefined when cleared. */\n  onChange?: (value: string | undefined) => void;\n  /** The full list of options. */\n  options: ComboboxOption[];\n  /** Placeholder shown in the trigger when no value is selected. */\n  placeholder?: string;\n  /** Placeholder for the search input inside the popover. */\n  searchPlaceholder?: string;\n  /** Text shown when the search finds no results. */\n  emptyMessage?: string;\n  /** Allow the user to clear the selection (shows an X button). */\n  clearable?: boolean;\n  /** Disable the entire combobox. */\n  disabled?: boolean;\n  /** Custom option renderer. Receives the option and the selected state. */\n  renderOption?: (option: ComboboxOption, isSelected: boolean) => React.ReactNode;\n  /** Class name on the trigger button. */\n  className?: string;\n  /** Width of the popover content. Default: matches the trigger. */\n  contentWidth?: 'trigger' | 'auto' | string;\n}\n\nexport function Combobox({\n  value,\n  onChange,\n  options,\n  placeholder = 'Select…',\n  searchPlaceholder = 'Search…',\n  emptyMessage = 'No results.',\n  clearable = false,\n  disabled = false,\n  renderOption,\n  className,\n  contentWidth = 'trigger',\n}: ComboboxProps): React.JSX.Element {\n  const [open, setOpen] = React.useState(false);\n\n  const selected = React.useMemo(\n    () => options.find((o) => o.value === value),\n    [options, value]\n  );\n\n  const handleSelect = (next: string) => {\n    if (next === value && clearable) {\n      onChange?.(undefined);\n    } else {\n      onChange?.(next);\n    }\n    setOpen(false);\n  };\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.(undefined);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-haspopup=\"listbox\"\n          disabled={disabled}\n          className={cn(\n            'w-full justify-between font-normal',\n            !selected && 'text-muted-foreground',\n            className\n          )}\n        >\n          <span className=\"truncate\">{selected ? selected.label : placeholder}</span>\n          <span className=\"ml-2 flex shrink-0 items-center gap-1\">\n            {clearable && selected && !disabled && (\n              <span\n                role=\"button\"\n                tabIndex={-1}\n                aria-label=\"Clear selection\"\n                onClick={handleClear}\n                className=\"inline-flex size-4 items-center justify-center rounded text-muted-foreground hover:text-foreground\"\n              >\n                <X className=\"size-3\" />\n              </span>\n            )}\n            <ChevronsUpDown className=\"size-4 opacity-50\" />\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        className={cn('p-0', contentWidth === 'trigger' && 'w-[var(--radix-popover-trigger-width)]')}\n        style={contentWidth !== 'trigger' && contentWidth !== 'auto' ? { width: contentWidth } : undefined}\n        align=\"start\"\n      >\n        <Command>\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const isSelected = option.value === value;\n                return (\n                  <CommandItem\n                    key={option.value}\n                    value={option.label}\n                    disabled={option.disabled}\n                    onSelect={() => handleSelect(option.value)}\n                    className=\"flex items-center justify-between gap-2\"\n                  >\n                    {renderOption ? (\n                      renderOption(option, isSelected)\n                    ) : (\n                      <>\n                        <span className=\"truncate\">{option.label}</span>\n                        <Check\n                          className={cn(\n                            'size-4 shrink-0',\n                            isSelected ? 'opacity-100' : 'opacity-0'\n                          )}\n                        />\n                      </>\n                    )}\n                  </CommandItem>\n                );\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["ChevronsUpDown","createLucideIcon","Combobox","value","onChange","options","placeholder","searchPlaceholder","emptyMessage","clearable","disabled","renderOption","className","contentWidth","open","setOpen","React","selected","o","handleSelect","next","handleClear","jsxs","Popover","jsx","PopoverTrigger","Button","cn","X","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","option","isSelected","CommandItem","Fragment","Check"],"mappings":"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","x_google_ignoreList":[0]}