@acronis-platform/ui-react 0.57.1 → 0.60.0

package/dist/components/ui/filter-search/filter-search.js

@@ -1,79 +1,80 @@
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
 import * as a from "react";
-import { ChevronDownIcon as D } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as h } from "../../../lib/utils.js";
-import { deepEqual as A } from "../../../lib/deep-equal.js";
-import { Chip as P } from "../chip/chip.js";
-import { Button as d } from "../button/button.js";
-import { Popover as $, PopoverTrigger as E, PopoverContent as q } from "../popover/popover.js";
-const z = a.forwardRef(
-  ({ className: t, ...e }, n) => /* @__PURE__ */ o(
+import { ChevronDownIcon as A } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as u } from "../../../lib/utils.js";
+import { deepEqual as P } from "../../../lib/deep-equal.js";
+import { Chip as $ } from "../chip/chip.js";
+import { Button as p } from "../button/button.js";
+import { Popover as E, PopoverTrigger as q, PopoverContent as z } from "../popover/popover.js";
+const B = a.forwardRef(
+  ({ className: t, ...e }, r) => /* @__PURE__ */ n(
     "div",
     {
-      ref: n,
-      className: h("flex items-center gap-4", t),
+      ref: r,
+      className: u("flex items-center gap-4", t),
       ...e
     }
   )
 );
-z.displayName = "FilterSearch";
-const B = a.forwardRef(({ className: t, ...e }, n) => /* @__PURE__ */ o(
+B.displayName = "FilterSearch";
+const I = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ n(
   "div",
   {
-    ref: n,
-    className: h("flex h-8 min-w-px flex-1 items-center justify-end gap-4", t),
+    ref: r,
+    className: u("flex h-8 min-w-px flex-1 items-center justify-end gap-4", t),
     ...e
   }
 ));
-B.displayName = "FilterSearchActions";
-const S = a.createContext(null);
-function W() {
-  const t = a.useContext(S);
+I.displayName = "FilterSearchActions";
+const C = a.createContext(null);
+function X() {
+  const t = a.useContext(C);
   if (t === null)
     throw new Error(
       "useFilterSearchFilters must be used within a <FilterSearchFilters> popover."
     );
   return t;
 }
-const I = a.forwardRef(({ value: t, onValueChange: e, onApply: n, label: l = "Filters", children: u, className: b }, p) => {
-  const [x, r] = a.useState(!1), [i, m] = a.useState(t), C = (s) => {
-    m(t), r(s);
-  }, v = a.useCallback((s, F) => {
-    m((f) => {
-      if (F === void 0) {
-        if (!(s in f)) return f;
-        const g = { ...f };
-        return delete g[s], g;
+const J = a.forwardRef(({ value: t, onValueChange: e, onApply: r, label: s = "Filters", children: b, className: x, ...m }, v) => {
+  const [o, l] = a.useState(!1), [c, f] = a.useState(t), N = (i) => {
+    f(t), l(i);
+  }, F = a.useCallback((i, g) => {
+    f((h) => {
+      if (g === void 0) {
+        if (!(i in h)) return h;
+        const S = { ...h };
+        return delete S[i], S;
       }
-      return { ...f, [s]: F };
+      return { ...h, [i]: g };
     });
-  }, []), N = a.useMemo(
-    () => ({ filters: i, setFilter: v }),
-    [i, v]
-  ), y = () => m({}), w = () => {
-    m(t), r(!1);
-  }, R = () => {
-    e(i), n == null || n(i), r(!1);
-  }, j = Object.keys(i).length === 0, O = A(i, t);
-  return /* @__PURE__ */ c($, { open: x, onOpenChange: C, children: [
-    /* @__PURE__ */ c(
-      E,
+  }, []), y = a.useMemo(
+    () => ({ filters: c, setFilter: F }),
+    [c, F]
+  ), w = () => f({}), R = () => {
+    f(t), l(!1);
+  }, j = () => {
+    e(c), r == null || r(c), l(!1);
+  }, O = Object.keys(c).length === 0, D = P(c, t);
+  return /* @__PURE__ */ d(E, { open: o, onOpenChange: N, children: [
+    /* @__PURE__ */ d(
+      q,
       {
-        ref: p,
-        render: /* @__PURE__ */ o(
-          d,
+        ref: v,
+        render: /* @__PURE__ */ n(
+          p,
           {
             variant: "secondary",
-            className: h(
+            className: u(
               "group data-[popup-open]:border-[var(--ui-button-secondary-container-border-color-active)] data-[popup-open]:bg-[var(--ui-button-secondary-container-color-active)] data-[popup-open]:text-[var(--ui-button-secondary-label-color-active)]",
-              b
-            )
+              x
+            ),
+            ...m
           }
         ),
         children: [
-          l,
-          /* @__PURE__ */ o(
-            D,
+          s,
+          /* @__PURE__ */ n(
+            A,
             {
               size: 16,
               className: "transition-transform group-data-[popup-open]:rotate-180"
@@ -82,28 +83,28 @@ const I = a.forwardRef(({ value: t, onValueChange: e, onApply: n, label: l = "Fi
         ]
       }
     ),
-    /* @__PURE__ */ o(q, { align: "start", className: "w-96 p-0", children: /* @__PURE__ */ c(
+    /* @__PURE__ */ n(z, { align: "start", className: "w-96 p-0", children: /* @__PURE__ */ d(
       "form",
       {
-        onSubmit: (s) => {
-          s.preventDefault(), R();
+        onSubmit: (i) => {
+          i.preventDefault(), j();
         },
         children: [
-          /* @__PURE__ */ o("div", { className: "flex max-h-80 flex-col gap-4 overflow-y-auto p-4", children: /* @__PURE__ */ o(S.Provider, { value: N, children: u }) }),
-          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 border-t border-border p-4", children: [
-            /* @__PURE__ */ o(
-              d,
+          /* @__PURE__ */ n("div", { className: "flex max-h-80 flex-col gap-4 overflow-y-auto p-4", children: /* @__PURE__ */ n(C.Provider, { value: y, children: b }) }),
+          /* @__PURE__ */ d("div", { className: "flex items-center gap-2 border-t border-border p-4", children: [
+            /* @__PURE__ */ n(
+              p,
               {
                 type: "button",
                 variant: "ghost",
-                disabled: j,
-                onClick: y,
+                disabled: O,
+                onClick: w,
                 children: "Reset filters"
               }
             ),
-            /* @__PURE__ */ c("div", { className: "ms-auto flex items-center gap-2", children: [
-              /* @__PURE__ */ o(d, { type: "button", variant: "secondary", onClick: w, children: "Cancel" }),
-              /* @__PURE__ */ o(d, { type: "submit", variant: "default", disabled: O, children: "Apply" })
+            /* @__PURE__ */ d("div", { className: "ms-auto flex items-center gap-2", children: [
+              /* @__PURE__ */ n(p, { type: "button", variant: "secondary", onClick: R, children: "Cancel" }),
+              /* @__PURE__ */ n(p, { type: "submit", variant: "default", disabled: D, children: "Apply" })
             ] })
           ] })
         ]
@@ -111,41 +112,41 @@ const I = a.forwardRef(({ value: t, onValueChange: e, onApply: n, label: l = "Fi
     ) })
   ] });
 });
-I.displayName = "FilterSearchFilters";
-function J(t, e) {
-  const n = Array.isArray(e) ? e.map((l) => String(l)).join(", ") : typeof e == "object" && e !== null ? JSON.stringify(e) : String(e);
-  return `${t}: ${n}`;
+J.displayName = "FilterSearchFilters";
+function L(t, e) {
+  const r = Array.isArray(e) ? e.map((s) => String(s)).join(", ") : typeof e == "object" && e !== null ? JSON.stringify(e) : String(e);
+  return `${t}: ${r}`;
 }
-const L = a.forwardRef(({ className: t, filters: e, onValueChange: n, getFilterChipLabel: l, ...u }, b) => {
-  const p = Object.keys(e);
-  if (p.length === 0) return null;
-  const x = (r) => {
-    const i = { ...e };
-    delete i[r], n(i);
+const M = a.forwardRef(({ className: t, filters: e, onValueChange: r, getFilterChipLabel: s, ...b }, x) => {
+  const m = Object.keys(e);
+  if (m.length === 0) return null;
+  const v = (o) => {
+    const l = { ...e };
+    delete l[o], r(l);
   };
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: b,
-      className: h("flex flex-wrap items-center gap-3", t),
-      ...u,
+      ref: x,
+      className: u("flex flex-wrap items-center gap-3", t),
+      ...b,
       children: [
-        p.map((r) => /* @__PURE__ */ o(
-          P,
+        m.map((o) => /* @__PURE__ */ n(
+          $,
           {
             variant: "removable",
-            onRemove: () => x(r),
-            removeLabel: `Remove ${r} filter`,
-            children: l ? l(r, e[r]) : J(r, e[r])
+            onRemove: () => v(o),
+            removeLabel: `Remove ${o} filter`,
+            children: s ? s(o, e[o]) : L(o, e[o])
           },
-          r
+          o
         )),
-        /* @__PURE__ */ o(
-          d,
+        /* @__PURE__ */ n(
+          p,
           {
             type: "button",
             variant: "ghost",
-            onClick: () => n({}),
+            onClick: () => r({}),
             children: "Reset filters"
           }
         )
@@ -153,12 +154,12 @@ const L = a.forwardRef(({ className: t, filters: e, onValueChange: n, getFilterC
     }
   );
 });
-L.displayName = "FilterSearchAppliedFilters";
+M.displayName = "FilterSearchAppliedFilters";
 export {
-  z as FilterSearch,
-  B as FilterSearchActions,
-  L as FilterSearchAppliedFilters,
-  I as FilterSearchFilters,
-  W as useFilterSearchFilters
+  B as FilterSearch,
+  I as FilterSearchActions,
+  M as FilterSearchAppliedFilters,
+  J as FilterSearchFilters,
+  X as useFilterSearchFilters
 };
 //# sourceMappingURL=filter-search.js.map

package/dist/components/ui/filter-search/filter-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-search.js","sources":["../../../../src/components/ui/filter-search/filter-search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { deepEqual } from '@/lib/deep-equal';\nimport { Button } from '../button';\nimport { Chip } from '../chip';\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover';\n\n// A composable toolbar for data tables: arranges a search field, optional\n// filters button, optional tenant/scope switcher, and trailing action buttons\n// in a single horizontal row. Maps to the Figma \"FilterSearch\" component. The\n// root container uses 16px inter-item gap (Figma `gap/gap-16`) and centers\n// children vertically. `FilterSearchActions` is a right-aligned flex area that\n// pushes its content to the trailing edge.\n//\n// No dedicated token tier — spacing is the Figma `gap/gap-16` semantic token\n// (16px), and each child (Search, ButtonMenu, Select) brings its own\n// `--ui-*` tier.\n//\n// `FilterSearchFilters` and `FilterSearchAppliedFilters` are design-pending\n// additions (no Figma node yet, unlike the FilterSearch node itself): the\n// filter popover (trigger + form + Reset/Cancel/Apply) and the applied-filter\n// chip row + top-level \"Reset filters\" affordance. Compose `FilterSearchFilters`\n// as a child of `<FilterSearch>` in place of a plain filter trigger, and render\n// `<FilterSearchAppliedFilters>` as a sibling row below it. Reconcile against\n// the real design with `/figma-component FilterSearchFilters <url> --update`\n// once a mockup lands.\n\nexport type FilterSearchProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterSearch = React.forwardRef<HTMLDivElement, FilterSearchProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-4', className)}\n      {...props}\n    />\n  )\n);\nFilterSearch.displayName = 'FilterSearch';\n\nexport type FilterSearchActionsProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterSearchActions = React.forwardRef<\n  HTMLDivElement,\n  FilterSearchActionsProps\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex h-8 min-w-px flex-1 items-center justify-end gap-4', className)}\n    {...props}\n  />\n));\nFilterSearchActions.displayName = 'FilterSearchActions';\n\ninterface FilterSearchFiltersContextValue {\n  /** The current draft filters being edited inside the popover. */\n  filters: Record<string, unknown>;\n  /** Set a single draft filter value by key. */\n  setFilter: (key: string, value: unknown) => void;\n}\n\nconst FilterSearchFiltersContext =\n  React.createContext<FilterSearchFiltersContextValue | null>(null);\n\n/**\n * Bind a filter field child (rendered inside `FilterSearchFilters`'s popover) to\n * the component's draft filters. Returns the current draft map and a per-key\n * setter. Field children are plain JSX (no render prop) and wire their own\n * `onChange` to `setFilter`; Apply commits the draft, Cancel/dismiss reverts it.\n */\nexport function useFilterSearchFilters(): FilterSearchFiltersContextValue {\n  const context = React.useContext(FilterSearchFiltersContext);\n  if (context === null) {\n    throw new Error(\n      'useFilterSearchFilters must be used within a <FilterSearchFilters> popover.'\n    );\n  }\n  return context;\n}\n\nexport interface FilterSearchFiltersProps {\n  /** The applied filter values, keyed by an arbitrary consumer-chosen id. */\n  value: Record<string, unknown>;\n  /** Called with the committed filters when Apply is pressed. */\n  onValueChange: (next: Record<string, unknown>) => void;\n  /** Called with the newly applied filters when Apply is pressed (fires alongside `onValueChange`). */\n  onApply?: (filters: Record<string, unknown>) => void;\n  /** Label for the filter trigger button. */\n  label?: React.ReactNode;\n  /**\n   * Filter field children rendered inside the popover form. Plain children —\n   * wire each field to the draft via `useFilterSearchFilters`. Group fields with\n   * a `Separator` as a layout convention if desired.\n   */\n  children?: React.ReactNode;\n  /** Additional classes merged onto the trigger button. */\n  className?: string;\n}\n\nconst FilterSearchFilters = React.forwardRef<\n  HTMLButtonElement,\n  FilterSearchFiltersProps\n>(({ value, onValueChange, onApply, label = 'Filters', children, className }, ref) => {\n  const [open, setOpen] = React.useState(false);\n  const [draft, setDraft] = React.useState<Record<string, unknown>>(value);\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    // Snapshot the applied filters on open; revert the draft on any dismiss\n    // (outside press / Escape) so an un-applied edit never leaks out.\n    setDraft(value);\n    setOpen(nextOpen);\n  };\n\n  const setFilter = React.useCallback((key: string, filterValue: unknown) => {\n    setDraft((previous) => {\n      if (filterValue === undefined) {\n        if (!(key in previous)) return previous;\n        const next = { ...previous };\n        delete next[key];\n        return next;\n      }\n      return { ...previous, [key]: filterValue };\n    });\n  }, []);\n\n  const filterContext = React.useMemo<FilterSearchFiltersContextValue>(\n    () => ({ filters: draft, setFilter }),\n    [draft, setFilter]\n  );\n\n  const handleReset = () => setDraft({});\n\n  const handleCancel = () => {\n    setDraft(value);\n    setOpen(false);\n  };\n\n  const handleApply = () => {\n    onValueChange(draft);\n    onApply?.(draft);\n    setOpen(false);\n  };\n\n  const resetDisabled = Object.keys(draft).length === 0;\n  const applyDisabled = deepEqual(draft, value);\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange}>\n      <PopoverTrigger\n        ref={ref}\n        render={\n          <Button\n            variant=\"secondary\"\n            className={cn(\n              'group data-[popup-open]:border-[var(--ui-button-secondary-container-border-color-active)] data-[popup-open]:bg-[var(--ui-button-secondary-container-color-active)] data-[popup-open]:text-[var(--ui-button-secondary-label-color-active)]',\n              className\n            )}\n          />\n        }\n      >\n        {label}\n        <ChevronDownIcon\n          size={16}\n          className=\"transition-transform group-data-[popup-open]:rotate-180\"\n        />\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-96 p-0\">\n        <form\n          onSubmit={(event) => {\n            event.preventDefault();\n            handleApply();\n          }}\n        >\n          <div className=\"flex max-h-80 flex-col gap-4 overflow-y-auto p-4\">\n            <FilterSearchFiltersContext.Provider value={filterContext}>\n              {children}\n            </FilterSearchFiltersContext.Provider>\n          </div>\n          <div className=\"flex items-center gap-2 border-t border-border p-4\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={resetDisabled}\n              onClick={handleReset}\n            >\n              Reset filters\n            </Button>\n            <div className=\"ms-auto flex items-center gap-2\">\n              <Button type=\"button\" variant=\"secondary\" onClick={handleCancel}>\n                Cancel\n              </Button>\n              <Button type=\"submit\" variant=\"default\" disabled={applyDisabled}>\n                Apply\n              </Button>\n            </div>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n});\nFilterSearchFilters.displayName = 'FilterSearchFilters';\n\nfunction defaultFilterChipLabel(key: string, value: unknown): string {\n  const text = Array.isArray(value)\n    ? value.map((entry) => String(entry)).join(', ')\n    : typeof value === 'object' && value !== null\n      ? JSON.stringify(value)\n      : String(value);\n  return `${key}: ${text}`;\n}\n\nexport interface FilterSearchAppliedFiltersProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** The currently applied filter values, keyed by an arbitrary consumer-chosen id. */\n  filters: Record<string, unknown>;\n  /** Called with the remaining filters when a chip is removed or \"Reset filters\" clears all. */\n  onValueChange: (next: Record<string, unknown>) => void;\n  /** Format an applied-filter chip's label. Defaults to `\"<key>: <value>\"`. */\n  getFilterChipLabel?: (key: string, value: unknown) => React.ReactNode;\n}\n\n/**\n * Renders one removable chip per applied filter plus a \"Reset filters\" action\n * that clears all filters immediately (no popover involved). Renders nothing\n * when `filters` is empty.\n */\nconst FilterSearchAppliedFilters = React.forwardRef<\n  HTMLDivElement,\n  FilterSearchAppliedFiltersProps\n>(({ className, filters, onValueChange, getFilterChipLabel, ...props }, ref) => {\n  const keys = Object.keys(filters);\n  if (keys.length === 0) return null;\n\n  const handleRemove = (key: string) => {\n    const next = { ...filters };\n    delete next[key];\n    onValueChange(next);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-wrap items-center gap-3', className)}\n      {...props}\n    >\n      {keys.map((key) => (\n        <Chip\n          key={key}\n          variant=\"removable\"\n          onRemove={() => handleRemove(key)}\n          removeLabel={`Remove ${key} filter`}\n        >\n          {getFilterChipLabel\n            ? getFilterChipLabel(key, filters[key])\n            : defaultFilterChipLabel(key, filters[key])}\n        </Chip>\n      ))}\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        onClick={() => onValueChange({})}\n      >\n        Reset filters\n      </Button>\n    </div>\n  );\n});\nFilterSearchAppliedFilters.displayName = 'FilterSearchAppliedFilters';\n\nexport {\n  FilterSearch,\n  FilterSearchActions,\n  FilterSearchFilters,\n  FilterSearchAppliedFilters,\n};\n"],"names":["FilterSearch","React","className","props","ref","jsx","cn","FilterSearchActions","FilterSearchFiltersContext","useFilterSearchFilters","context","FilterSearchFilters","value","onValueChange","onApply","label","children","open","setOpen","draft","setDraft","handleOpenChange","nextOpen","setFilter","key","filterValue","previous","next","filterContext","handleReset","handleCancel","handleApply","resetDisabled","applyDisabled","deepEqual","jsxs","Popover","PopoverTrigger","Button","ChevronDownIcon","PopoverContent","event","defaultFilterChipLabel","text","entry","FilterSearchAppliedFilters","filters","getFilterChipLabel","keys","handleRemove","Chip"],"mappings":"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"}
+{"version":3,"file":"filter-search.js","sources":["../../../../src/components/ui/filter-search/filter-search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { deepEqual } from '@/lib/deep-equal';\nimport { Button } from '../button';\nimport { Chip } from '../chip';\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover';\n\n// A composable toolbar for data tables: arranges a search field, optional\n// filters button, optional tenant/scope switcher, and trailing action buttons\n// in a single horizontal row. Maps to the Figma \"FilterSearch\" component. The\n// root container uses 16px inter-item gap (Figma `gap/gap-16`) and centers\n// children vertically. `FilterSearchActions` is a right-aligned flex area that\n// pushes its content to the trailing edge.\n//\n// No dedicated token tier — spacing is the Figma `gap/gap-16` semantic token\n// (16px), and each child (Search, ButtonMenu, Select) brings its own\n// `--ui-*` tier.\n//\n// `FilterSearchFilters` and `FilterSearchAppliedFilters` are design-pending\n// additions (no Figma node yet, unlike the FilterSearch node itself): the\n// filter popover (trigger + form + Reset/Cancel/Apply) and the applied-filter\n// chip row + top-level \"Reset filters\" affordance. Compose `FilterSearchFilters`\n// as a child of `<FilterSearch>` in place of a plain filter trigger, and render\n// `<FilterSearchAppliedFilters>` as a sibling row below it. Reconcile against\n// the real design with `/figma-component FilterSearchFilters <url> --update`\n// once a mockup lands.\n\nexport type FilterSearchProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterSearch = React.forwardRef<HTMLDivElement, FilterSearchProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-4', className)}\n      {...props}\n    />\n  )\n);\nFilterSearch.displayName = 'FilterSearch';\n\nexport type FilterSearchActionsProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst FilterSearchActions = React.forwardRef<\n  HTMLDivElement,\n  FilterSearchActionsProps\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex h-8 min-w-px flex-1 items-center justify-end gap-4', className)}\n    {...props}\n  />\n));\nFilterSearchActions.displayName = 'FilterSearchActions';\n\ninterface FilterSearchFiltersContextValue {\n  /** The current draft filters being edited inside the popover. */\n  filters: Record<string, unknown>;\n  /** Set a single draft filter value by key. */\n  setFilter: (key: string, value: unknown) => void;\n}\n\nconst FilterSearchFiltersContext =\n  React.createContext<FilterSearchFiltersContextValue | null>(null);\n\n/**\n * Bind a filter field child (rendered inside `FilterSearchFilters`'s popover) to\n * the component's draft filters. Returns the current draft map and a per-key\n * setter. Field children are plain JSX (no render prop) and wire their own\n * `onChange` to `setFilter`; Apply commits the draft, Cancel/dismiss reverts it.\n */\nexport function useFilterSearchFilters(): FilterSearchFiltersContextValue {\n  const context = React.useContext(FilterSearchFiltersContext);\n  if (context === null) {\n    throw new Error(\n      'useFilterSearchFilters must be used within a <FilterSearchFilters> popover.'\n    );\n  }\n  return context;\n}\n\nexport interface FilterSearchFiltersProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'onValueChange'> {\n  /** The applied filter values, keyed by an arbitrary consumer-chosen id. */\n  value: Record<string, unknown>;\n  /** Called with the committed filters when Apply is pressed. */\n  onValueChange: (next: Record<string, unknown>) => void;\n  /** Called with the newly applied filters when Apply is pressed (fires alongside `onValueChange`). */\n  onApply?: (filters: Record<string, unknown>) => void;\n  /** Label for the filter trigger button. */\n  label?: React.ReactNode;\n  /**\n   * Filter field children rendered inside the popover form. Plain children —\n   * wire each field to the draft via `useFilterSearchFilters`. Group fields with\n   * a `Separator` as a layout convention if desired.\n   */\n  children?: React.ReactNode;\n  /** Additional classes merged onto the trigger button. */\n  className?: string;\n}\n\nconst FilterSearchFilters = React.forwardRef<\n  HTMLButtonElement,\n  FilterSearchFiltersProps\n>(({ value, onValueChange, onApply, label = 'Filters', children, className, ...rest }, ref) => {\n  const [open, setOpen] = React.useState(false);\n  const [draft, setDraft] = React.useState<Record<string, unknown>>(value);\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    // Snapshot the applied filters on open; revert the draft on any dismiss\n    // (outside press / Escape) so an un-applied edit never leaks out.\n    setDraft(value);\n    setOpen(nextOpen);\n  };\n\n  const setFilter = React.useCallback((key: string, filterValue: unknown) => {\n    setDraft((previous) => {\n      if (filterValue === undefined) {\n        if (!(key in previous)) return previous;\n        const next = { ...previous };\n        delete next[key];\n        return next;\n      }\n      return { ...previous, [key]: filterValue };\n    });\n  }, []);\n\n  const filterContext = React.useMemo<FilterSearchFiltersContextValue>(\n    () => ({ filters: draft, setFilter }),\n    [draft, setFilter]\n  );\n\n  const handleReset = () => setDraft({});\n\n  const handleCancel = () => {\n    setDraft(value);\n    setOpen(false);\n  };\n\n  const handleApply = () => {\n    onValueChange(draft);\n    onApply?.(draft);\n    setOpen(false);\n  };\n\n  const resetDisabled = Object.keys(draft).length === 0;\n  const applyDisabled = deepEqual(draft, value);\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange}>\n      <PopoverTrigger\n        ref={ref}\n        render={\n          <Button\n            variant=\"secondary\"\n            className={cn(\n              'group data-[popup-open]:border-[var(--ui-button-secondary-container-border-color-active)] data-[popup-open]:bg-[var(--ui-button-secondary-container-color-active)] data-[popup-open]:text-[var(--ui-button-secondary-label-color-active)]',\n              className\n            )}\n            {...rest}\n          />\n        }\n      >\n        {label}\n        <ChevronDownIcon\n          size={16}\n          className=\"transition-transform group-data-[popup-open]:rotate-180\"\n        />\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-96 p-0\">\n        <form\n          onSubmit={(event) => {\n            event.preventDefault();\n            handleApply();\n          }}\n        >\n          <div className=\"flex max-h-80 flex-col gap-4 overflow-y-auto p-4\">\n            <FilterSearchFiltersContext.Provider value={filterContext}>\n              {children}\n            </FilterSearchFiltersContext.Provider>\n          </div>\n          <div className=\"flex items-center gap-2 border-t border-border p-4\">\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={resetDisabled}\n              onClick={handleReset}\n            >\n              Reset filters\n            </Button>\n            <div className=\"ms-auto flex items-center gap-2\">\n              <Button type=\"button\" variant=\"secondary\" onClick={handleCancel}>\n                Cancel\n              </Button>\n              <Button type=\"submit\" variant=\"default\" disabled={applyDisabled}>\n                Apply\n              </Button>\n            </div>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n});\nFilterSearchFilters.displayName = 'FilterSearchFilters';\n\nfunction defaultFilterChipLabel(key: string, value: unknown): string {\n  const text = Array.isArray(value)\n    ? value.map((entry) => String(entry)).join(', ')\n    : typeof value === 'object' && value !== null\n      ? JSON.stringify(value)\n      : String(value);\n  return `${key}: ${text}`;\n}\n\nexport interface FilterSearchAppliedFiltersProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** The currently applied filter values, keyed by an arbitrary consumer-chosen id. */\n  filters: Record<string, unknown>;\n  /** Called with the remaining filters when a chip is removed or \"Reset filters\" clears all. */\n  onValueChange: (next: Record<string, unknown>) => void;\n  /** Format an applied-filter chip's label. Defaults to `\"<key>: <value>\"`. */\n  getFilterChipLabel?: (key: string, value: unknown) => React.ReactNode;\n}\n\n/**\n * Renders one removable chip per applied filter plus a \"Reset filters\" action\n * that clears all filters immediately (no popover involved). Renders nothing\n * when `filters` is empty.\n */\nconst FilterSearchAppliedFilters = React.forwardRef<\n  HTMLDivElement,\n  FilterSearchAppliedFiltersProps\n>(({ className, filters, onValueChange, getFilterChipLabel, ...props }, ref) => {\n  const keys = Object.keys(filters);\n  if (keys.length === 0) return null;\n\n  const handleRemove = (key: string) => {\n    const next = { ...filters };\n    delete next[key];\n    onValueChange(next);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-wrap items-center gap-3', className)}\n      {...props}\n    >\n      {keys.map((key) => (\n        <Chip\n          key={key}\n          variant=\"removable\"\n          onRemove={() => handleRemove(key)}\n          removeLabel={`Remove ${key} filter`}\n        >\n          {getFilterChipLabel\n            ? getFilterChipLabel(key, filters[key])\n            : defaultFilterChipLabel(key, filters[key])}\n        </Chip>\n      ))}\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        onClick={() => onValueChange({})}\n      >\n        Reset filters\n      </Button>\n    </div>\n  );\n});\nFilterSearchAppliedFilters.displayName = 'FilterSearchAppliedFilters';\n\nexport {\n  FilterSearch,\n  FilterSearchActions,\n  FilterSearchFilters,\n  FilterSearchAppliedFilters,\n};\n"],"names":["FilterSearch","React","className","props","ref","jsx","cn","FilterSearchActions","FilterSearchFiltersContext","useFilterSearchFilters","context","FilterSearchFilters","value","onValueChange","onApply","label","children","rest","open","setOpen","draft","setDraft","handleOpenChange","nextOpen","setFilter","key","filterValue","previous","next","filterContext","handleReset","handleCancel","handleApply","resetDisabled","applyDisabled","deepEqual","jsxs","Popover","PopoverTrigger","Button","ChevronDownIcon","PopoverContent","event","defaultFilterChipLabel","text","entry","FilterSearchAppliedFilters","filters","getFilterChipLabel","keys","handleRemove","Chip"],"mappings":"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"}

package/dist/components/ui/funnel-chart/funnel-chart.js

@@ -0,0 +1,87 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import * as g from "react";
+import { cva as v } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { FunnelChart as F, Funnel as N, Cell as b, LabelList as x } from "recharts";
+import { cn as L } from "../../../lib/utils.js";
+import { ChartContainer as T, ChartTooltip as $, ChartTooltipContent as j } from "../chart/chart.js";
+const A = v("", {
+  variants: {
+    lastShape: {
+      triangle: "",
+      rectangle: ""
+    }
+  },
+  defaultVariants: {
+    lastShape: "triangle"
+  }
+}), R = g.forwardRef(
+  ({
+    className: n,
+    config: o,
+    data: s,
+    dataKey: c,
+    nameKey: a,
+    lastShape: e = "triangle",
+    reversed: f = !1,
+    showLabels: h = !0,
+    showTooltip: m = !0,
+    tooltipContent: p,
+    ...d
+  }, u) => {
+    const l = s.map((r) => ({
+      ...r,
+      fill: `var(--color-${r[a]})`
+    }));
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: u,
+        "data-last-shape": e,
+        className: L(A({ lastShape: e }), n),
+        ...d,
+        children: /* @__PURE__ */ t(T, { config: o, className: "size-full", children: /* @__PURE__ */ i(F, { margin: { top: 8, right: 96, bottom: 8, left: 24 }, children: [
+          m && /* @__PURE__ */ t(
+            $,
+            {
+              content: p ?? /* @__PURE__ */ t(j, { nameKey: a, hideLabel: !0 })
+            }
+          ),
+          /* @__PURE__ */ i(
+            N,
+            {
+              dataKey: c,
+              nameKey: a,
+              data: l,
+              lastShapeType: e ?? "triangle",
+              reversed: f,
+              isAnimationActive: !1,
+              children: [
+                l.map((r, C) => (
+                  // Keyed by index, not the name: two stages could share a nameKey
+                  // value, which would collide as a React key. Same-named stages
+                  // intentionally share a color/config entry via `--color-<name>`.
+                  /* @__PURE__ */ t(b, { fill: `var(--color-${r[a]})` }, C)
+                )),
+                h && /* @__PURE__ */ t(
+                  x,
+                  {
+                    position: "right",
+                    dataKey: a,
+                    className: "fill-foreground",
+                    stroke: "none"
+                  }
+                )
+              ]
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+R.displayName = "FunnelChart";
+export {
+  R as FunnelChart,
+  A as funnelChartVariants
+};
+//# sourceMappingURL=funnel-chart.js.map

package/dist/components/ui/funnel-chart/funnel-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnel-chart.js","sources":["../../../../src/components/ui/funnel-chart/funnel-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Cell, Funnel, FunnelChart as RechartsFunnelChart, LabelList } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The single\n// CVA axis is the design's Funnel-chart variant set: `lastShape` (does the\n// funnel narrow to a point — `triangle` — or end flat — `rectangle`). The class\n// stays empty because recharts' SVG — not CSS — draws the funnel: `lastShape`\n// drives the `<Funnel>`'s `lastShapeType`. CVA is kept so the variant set is a\n// first-class, spec-conformant part of the API (matched against ui-spec's\n// api.yaml enums) and exposed via `VariantProps`; the resolved value is also\n// mirrored onto `data-last-shape`.\nconst funnelChartVariants = cva('', {\n  variants: {\n    lastShape: {\n      triangle: '',\n      rectangle: '',\n    },\n  },\n  defaultVariants: {\n    lastShape: 'triangle',\n  },\n});\n\nexport interface FunnelChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof funnelChartVariants> {\n  /** Row-per-stage data. Each object holds the stage's `nameKey` label + its `dataKey` numeric value. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-stage map of `label` / `color`, keyed by the stage's `nameKey` value\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each stage (the funnel narrows as it drops). */\n  dataKey: string;\n  /**\n   * Label field that names each stage (drives the legend, tooltip, on-chart\n   * labels, and the `--color-<name>` lookup). Values should be unique per chart —\n   * stages sharing a name share one `config`/color entry.\n   */\n  nameKey: string;\n  /** Flip the funnel so it widens toward the bottom instead of narrowing. */\n  reversed?: boolean;\n  /** Render each stage's name beside its segment. */\n  showLabels?: boolean;\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-series rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst FunnelChart = React.forwardRef<HTMLDivElement, FunnelChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKey,\n      nameKey,\n      lastShape = 'triangle',\n      reversed = false,\n      showLabels = true,\n      showTooltip = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Stamp each row with its `fill` (the shadcn data-driven pattern). A Funnel's\n    // default fill is grey (#808080) and recharts doesn't carry a per-segment\n    // color on the tooltip/legend payload item, so putting the color on the data\n    // row is what lets a real hover resolve each segment's color. (The forced-open\n    // `defaultIndex` VR snapshot can still show a neutral indicator — it\n    // synthesizes the open state without a pointer hover.)\n    const seriesData: Record<string, string | number>[] = data.map((row) => ({\n      ...row,\n      fill: `var(--color-${row[nameKey]})`,\n    }));\n\n    return (\n      <div\n        ref={ref}\n        data-last-shape={lastShape}\n        className={cn(funnelChartVariants({ lastShape }), className)}\n        {...props}\n      >\n        <ChartContainer config={config} className=\"size-full\">\n          <RechartsFunnelChart margin={{ top: 8, right: 96, bottom: 8, left: 24 }}>\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n            <Funnel\n              dataKey={dataKey}\n              nameKey={nameKey}\n              data={seriesData}\n              lastShapeType={lastShape ?? 'triangle'}\n              reversed={reversed}\n              isAnimationActive={false}\n            >\n              {seriesData.map((entry, index) => (\n                // Keyed by index, not the name: two stages could share a nameKey\n                // value, which would collide as a React key. Same-named stages\n                // intentionally share a color/config entry via `--color-<name>`.\n                <Cell key={index} fill={`var(--color-${entry[nameKey]})`} />\n              ))}\n              {showLabels && (\n                <LabelList\n                  position=\"right\"\n                  dataKey={nameKey}\n                  className=\"fill-foreground\"\n                  stroke=\"none\"\n                />\n              )}\n            </Funnel>\n          </RechartsFunnelChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nFunnelChart.displayName = 'FunnelChart';\n\nexport { FunnelChart, funnelChartVariants };\n"],"names":["funnelChartVariants","cva","FunnelChart","React","className","config","data","dataKey","nameKey","lastShape","reversed","showLabels","showTooltip","tooltipContent","props","ref","seriesData","row","jsx","cn","ChartContainer","RechartsFunnelChart","ChartTooltip","ChartTooltipContent","jsxs","Funnel","entry","index","Cell","LabelList"],"mappings":";;;;;;AAsBA,MAAMA,IAAsBC,EAAI,IAAI;AAAA,EAClC,UAAU;AAAA,IACR,WAAW;AAAA,MACT,UAAU;AAAA,MACV,WAAW;AAAA,IAAA;AAAA,EACb;AAAA,EAEF,iBAAiB;AAAA,IACf,WAAW;AAAA,EAAA;AAEf,CAAC,GAoCKC,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAOH,UAAMC,IAAgDV,EAAK,IAAI,CAACW,OAAS;AAAA,MACvE,GAAGA;AAAA,MACH,MAAM,eAAeA,EAAIT,CAAO,CAAC;AAAA,IAAA,EACjC;AAEF,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,mBAAiBN;AAAA,QACjB,WAAWU,EAAGnB,EAAoB,EAAE,WAAAS,EAAA,CAAW,GAAGL,CAAS;AAAA,QAC1D,GAAGU;AAAA,QAEJ,4BAACM,GAAA,EAAe,QAAAf,GAAgB,WAAU,aACxC,4BAACgB,GAAA,EAAoB,QAAQ,EAAE,KAAK,GAAG,OAAO,IAAI,QAAQ,GAAG,MAAM,MAChE,UAAA;AAAA,UAAAT,KACC,gBAAAM;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,SACET,KACE,gBAAAK,EAACK,GAAA,EAAoB,SAAAf,GAAkB,WAAS,GAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAKzD,gBAAAgB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,SAAAlB;AAAA,cACA,SAAAC;AAAA,cACA,MAAMQ;AAAA,cACN,eAAeP,KAAa;AAAA,cAC5B,UAAAC;AAAA,cACA,mBAAmB;AAAA,cAElB,UAAA;AAAA,gBAAAM,EAAW,IAAI,CAACU,GAAOC;AAAA;AAAA;AAAA;AAAA,kBAItB,gBAAAT,EAACU,KAAiB,MAAM,eAAeF,EAAMlB,CAAO,CAAC,OAA1CmB,CAA+C;AAAA,iBAC3D;AAAA,gBACAhB,KACC,gBAAAO;AAAA,kBAACW;AAAA,kBAAA;AAAA,oBACC,UAAS;AAAA,oBACT,SAASrB;AAAA,oBACT,WAAU;AAAA,oBACV,QAAO;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACT;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ,EAAA,CACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACAN,EAAY,cAAc;"}

package/dist/components/ui/histogram/histogram.js

@@ -0,0 +1,136 @@
+import { jsx as a, jsxs as _ } from "react/jsx-runtime";
+import * as k from "react";
+import { BarChart as E, CartesianGrid as W, XAxis as X, YAxis as Y, Bar as q } from "recharts";
+import { cn as I } from "../../../lib/utils.js";
+import { ChartContainer as J, ChartTooltip as L, ChartTooltipContent as O } from "../chart/chart.js";
+import { resolveAxisDomain as P } from "../chart/chart-format.js";
+const y = (l) => Number(l.toFixed(2));
+function Q(l, e, h) {
+  const i = l.filter(
+    (o) => typeof o == "number" && Number.isFinite(o)
+  );
+  if (i.length === 0 || e < 1) return [];
+  const [c, m] = h ?? [Math.min(...i), Math.max(...i)], t = Math.min(c, m), s = Math.max(c, m), f = t === s ? t + 1 : s, n = (f - t) / e, u = Array.from({ length: e }, (o, r) => {
+    const p = t + r * n, v = r === e - 1 ? f : t + (r + 1) * n;
+    return { x0: p, x1: v, label: `${y(p)}–${y(v)}`, count: 0 };
+  });
+  for (const o of i) {
+    if (o < t || o > f) continue;
+    let r = Math.floor((o - t) / n);
+    r >= e && (r = e - 1), u[r].count += 1;
+  }
+  return u;
+}
+const R = k.forwardRef(
+  ({
+    className: l,
+    config: e,
+    values: h,
+    dataKey: i = "count",
+    binCount: c = 10,
+    domain: m,
+    xAxisLabel: t,
+    yAxisLabel: s,
+    yUnit: f,
+    barRadius: n = 0,
+    showGrid: u = !0,
+    showTooltip: o = !0,
+    showXAxis: r = !0,
+    showYAxis: p = !0,
+    xTickFormatter: v,
+    yTickFormatter: x,
+    xAxisAngle: d,
+    xAxisInterval: M,
+    yAxisTickCount: N,
+    yAxisDomain: w,
+    gridDashed: B,
+    gridHorizontal: D,
+    gridVertical: F,
+    tooltipContent: H,
+    ...T
+  }, C) => {
+    const $ = t ? { value: t, position: "insideBottom", offset: 0 } : void 0, b = s ? {
+      value: s,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0, j = P(w), z = t || d != null ? 30 + (d != null ? 20 : 0) + (t ? 18 : 0) : void 0, G = k.useMemo(
+      () => Q(h, c, m),
+      [h, c, m]
+    ).map((g) => ({ label: g.label, [i]: g.count }));
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: C,
+        className: I(l),
+        ...T,
+        children: /* @__PURE__ */ a(
+          J,
+          {
+            config: e,
+            className: "size-full [&_.recharts-label]:fill-foreground",
+            children: /* @__PURE__ */ _(E, { data: G, barCategoryGap: 0, children: [
+              u && /* @__PURE__ */ a(
+                W,
+                {
+                  horizontal: D ?? !0,
+                  vertical: F ?? !1,
+                  strokeDasharray: B ? "3 3" : void 0
+                }
+              ),
+              /* @__PURE__ */ a(
+                X,
+                {
+                  dataKey: "label",
+                  hide: !r,
+                  tickLine: !1,
+                  axisLine: !1,
+                  tickFormatter: v,
+                  angle: d,
+                  interval: M,
+                  textAnchor: d != null ? d < 0 ? "end" : "start" : void 0,
+                  height: z,
+                  label: $
+                }
+              ),
+              /* @__PURE__ */ a(
+                Y,
+                {
+                  type: "number",
+                  hide: !p,
+                  tickLine: !1,
+                  axisLine: !1,
+                  allowDecimals: !1,
+                  unit: f,
+                  tickFormatter: x,
+                  tickCount: N,
+                  domain: j,
+                  width: s ? 72 : void 0,
+                  label: b
+                }
+              ),
+              o && /* @__PURE__ */ a(L, { content: H ?? /* @__PURE__ */ a(O, {}) }),
+              /* @__PURE__ */ a(
+                q,
+                {
+                  dataKey: i,
+                  fill: `var(--color-${i})`,
+                  stroke: "var(--ui-background-surface-primary)",
+                  strokeWidth: 1,
+                  radius: n > 0 ? [n, n, 0, 0] : void 0,
+                  isAnimationActive: !1
+                }
+              )
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+R.displayName = "Histogram";
+export {
+  R as Histogram,
+  Q as computeHistogramBins
+};
+//# sourceMappingURL=histogram.js.map

package/dist/components/ui/histogram/histogram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"histogram.js","sources":["../../../../src/components/ui/histogram/histogram.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAxisDomain,\n  type ChartConfig,\n  type CartesianChartProps,\n} from '../chart';\n\n// A histogram bins a set of continuous samples into equal-width ranges and plots\n// the frequency of each as contiguous bars — distinct from BarChart, whose bars\n// are pre-categorized. The binning is the component's job (a pure helper), so the\n// consumer passes raw `values`, not pre-aggregated rows. Built on the shared\n// `Chart` primitives; no new tokens (the single series' color is caller-supplied\n// via `config`, same `--color-<key>` mechanism as the other chart types).\n\nexport interface HistogramBin {\n  /** Lower bound of the bin (inclusive). */\n  x0: number;\n  /** Upper bound of the bin (exclusive, except the last bin which is inclusive). */\n  x1: number;\n  /** Human-readable range label, e.g. `\"0–10\"`. */\n  label: string;\n  /** How many samples fell in the bin. */\n  count: number;\n}\n\nconst roundEdge = (n: number) => Number(n.toFixed(2));\n\n/**\n * Split `values` into `binCount` equal-width bins and count the samples in each.\n * The range is `domain` if given, else the data's [min, max]; values outside the\n * domain are dropped, and the max value lands in the last (inclusive) bin.\n * Returns [] when there's nothing to bin. Exported for unit tests; not part of\n * the package's public API.\n */\nexport function computeHistogramBins(\n  values: ReadonlyArray<number>,\n  binCount: number,\n  domain?: [number, number]\n): HistogramBin[] {\n  const nums = values.filter(\n    (v): v is number => typeof v === 'number' && Number.isFinite(v)\n  );\n  if (nums.length === 0 || binCount < 1) return [];\n\n  const [d0, d1] = domain ?? [Math.min(...nums), Math.max(...nums)];\n  // Normalize an inverted domain ([max, min]) so binning stays robust.\n  const min = Math.min(d0, d1);\n  const hi = Math.max(d0, d1);\n  // A zero-width range (all values equal, or a degenerate domain) can't be\n  // divided — widen it by 1 so the single bin has extent.\n  const max = min === hi ? min + 1 : hi;\n  const width = (max - min) / binCount;\n\n  const bins: HistogramBin[] = Array.from({ length: binCount }, (_, i) => {\n    const x0 = min + i * width;\n    const x1 = i === binCount - 1 ? max : min + (i + 1) * width;\n    return { x0, x1, label: `${roundEdge(x0)}–${roundEdge(x1)}`, count: 0 };\n  });\n\n  for (const v of nums) {\n    if (v < min || v > max) continue;\n    let idx = Math.floor((v - min) / width);\n    if (idx >= binCount) idx = binCount - 1; // the max value\n    bins[idx].count += 1;\n  }\n  return bins;\n}\n\nexport interface HistogramProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps {\n  /** Raw continuous samples to bin (non-finite values are ignored). */\n  values: ReadonlyArray<number>;\n  /**\n   * Single-series map of `label` / `color`, keyed by `dataKey` (imported from\n   * the shared `Chart` primitives). Color is caller-supplied — reference an\n   * existing semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** `config` key that colors + labels the frequency bars. */\n  dataKey?: string;\n  /** Number of equal-width bins. */\n  binCount?: number;\n  /** Fix the binning range instead of deriving it from the data's min/max. */\n  domain?: [number, number];\n  /** Corner radius on the top of each bar. */\n  barRadius?: number;\n}\n\nconst Histogram = React.forwardRef<HTMLDivElement, HistogramProps>(\n  (\n    {\n      className,\n      config,\n      values,\n      dataKey = 'count',\n      binCount = 10,\n      domain,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      barRadius = 0,\n      showGrid = true,\n      showTooltip = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    const xAxisTitle = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    // Room for the X tick row: recharts' default 30, plus a rotated tick row\n    // (+20) and/or the axis title (+18). Additive — both can be present at once,\n    // which the old label-or-angle ternary under-allocated.\n    const xAxisHeight =\n      xAxisLabel || xAxisAngle != null\n        ? 30 + (xAxisAngle != null ? 20 : 0) + (xAxisLabel ? 18 : 0)\n        : undefined;\n\n    const bins = React.useMemo(\n      () => computeHistogramBins(values, binCount, domain),\n      [values, binCount, domain]\n    );\n    // Bars carry the bin `label` as the category and `count` under `dataKey`, so\n    // the tooltip resolves the frequency from `config[dataKey]`.\n    const data = bins.map((bin) => ({ label: bin.label, [dataKey]: bin.count }));\n\n    return (\n      <div\n        ref={ref}\n        className={cn(className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsBarChart data={data} barCategoryGap={0}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey=\"label\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={\n                xAxisAngle != null ? (xAxisAngle < 0 ? 'end' : 'start') : undefined\n              }\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              allowDecimals={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            <Bar\n              dataKey={dataKey}\n              fill={`var(--color-${dataKey})`}\n              // A hairline in the surface color separates the contiguous bars so\n              // they don't blend into one mass (same trick as the Treemap cells).\n              stroke=\"var(--ui-background-surface-primary)\"\n              strokeWidth={1}\n              radius={barRadius > 0 ? [barRadius, barRadius, 0, 0] : undefined}\n              isAnimationActive={false}\n            />\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nHistogram.displayName = 'Histogram';\n\nexport { Histogram };\n"],"names":["roundEdge","n","computeHistogramBins","values","binCount","domain","nums","v","d0","d1","min","hi","max","width","bins","_","i","x0","x1","idx","Histogram","React","className","config","dataKey","xAxisLabel","yAxisLabel","yUnit","barRadius","showGrid","showTooltip","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","tooltipContent","props","ref","xAxisTitle","yAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","data","bin","jsx","cn","ChartContainer","jsxs","RechartsBarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar"],"mappings":"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"}

package/dist/components/ui/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Internal primitive: the bare single-line input box behind the public\n// `InputText` field (which is also exported as `Input`). Not exported from the\n// package; consumed by `input-text`. Themed by the dedicated next-gen `--ui-input-text-*`\n// token tier from @acronis-platform/tokens-pd. The box fill (`global-box-color-*`)\n// and the normal border (`normal-box-border-color-*`) are wired per state: idle /\n// hover / focus / disabled. The `normal-box-border-color-*` tier has no `-active`,\n// so focus reuses `-hover` for the border, paired with a 3px `--ui-focus-primary`\n// ring. Value and placeholder text use `global-value-color-*` /\n// `global-placeholder-color-*`. The error state is driven by `aria-invalid` —\n// `error-msg-box-border-color-*` border and, on focus, a `--ui-focus-error` ring —\n// scoped with `not-aria-[invalid]` so it wins over the hover/focus border. Box\n// geometry (32px height, 4px radius, 12px padding-x) comes from\n// `--ui-input-text-global-box-*`. Label, description, and error message are\n// composed by the consumer (a Field component is future work).\nexport type InputBoxProps = React.ComponentPropsWithoutRef<'input'>;\n\nconst InputBox = React.forwardRef<HTMLInputElement, InputBoxProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        'h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nInputBox.displayName = 'InputBox';\n\nexport { InputBox };\n"],"names":["InputBox","React","className","type","props","ref","jsx","cn"],"mappings":";;;AAoBA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GAASC,MACvC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAF;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAS,cAAc;"}
+{"version":3,"file":"input.js","sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The bare single-line input box behind the public `InputText` field (which is\n// also exported as `Input`). Exported in its own right for pairing with `Field`\n// (`<FieldControl render={<InputBox />} />`) — use `InputText` when a bundled\n// label/description/error is wanted instead. Themed by the dedicated next-gen `--ui-input-text-*`\n// token tier from @acronis-platform/tokens-pd. The box fill (`global-box-color-*`)\n// and the normal border (`normal-box-border-color-*`) are wired per state: idle /\n// hover / focus / disabled. The `normal-box-border-color-*` tier has no `-active`,\n// so focus reuses `-hover` for the border, paired with a 3px `--ui-focus-primary`\n// ring. Value and placeholder text use `global-value-color-*` /\n// `global-placeholder-color-*`. The error state is driven by `aria-invalid` —\n// `error-msg-box-border-color-*` border and, on focus, a `--ui-focus-error` ring —\n// scoped with `not-aria-[invalid]` so it wins over the hover/focus border. Box\n// geometry (32px height, 4px radius, 12px padding-x) comes from\n// `--ui-input-text-global-box-*`. Label, description, and error message are\n// composed by the consumer (a Field component is future work).\nexport type InputBoxProps = React.ComponentPropsWithoutRef<'input'>;\n\nconst InputBox = React.forwardRef<HTMLInputElement, InputBoxProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        'h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nInputBox.displayName = 'InputBox';\n\nexport { InputBox };\n"],"names":["InputBox","React","className","type","props","ref","jsx","cn"],"mappings":";;;AAqBA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GAASC,MACvC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAF;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAS,cAAc;"}