@noambz/ui 0.7.0

package/dist/components/organisms/charts/bar-chart.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Bar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { cn } from "../../../utils/cn.js";
+const DEFAULT_HEIGHT_PX = 240;
+const DEFAULT_BAR_RADIUS = 4;
+function BarChart({
+  data,
+  color = "#2563eb",
+  heightPx = DEFAULT_HEIGHT_PX,
+  yFormatter,
+  tooltipValueFormatter,
+  className,
+  ariaLabel,
+  showGrid = true,
+  showLabels = true
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), style: { height: heightPx }, role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RechartsBarChart, { data: [...data], margin: { top: 10, right: 12, bottom: 8, left: 0 }, children: [
+    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "stroke-border-base", vertical: false }) : null,
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: "label",
+        hide: !showLabels,
+        tickLine: false,
+        axisLine: false,
+        tick: { fontSize: 11 },
+        stroke: "currentColor",
+        className: "text-muted-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        tickLine: false,
+        axisLine: false,
+        tick: { fontSize: 11 },
+        width: 48,
+        stroke: "currentColor",
+        className: "text-muted-foreground",
+        tickFormatter: yFormatter
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: (args) => /* @__PURE__ */ jsx(
+          BarChartTooltip,
+          {
+            active: args.active,
+            payload: args.payload,
+            label: args.label,
+            tooltipValueFormatter
+          }
+        ),
+        cursor: { fill: "rgba(0,0,0,0.04)" }
+      }
+    ),
+    /* @__PURE__ */ jsx(Bar, { dataKey: "value", radius: [DEFAULT_BAR_RADIUS, DEFAULT_BAR_RADIUS, 0, 0], isAnimationActive: false, children: data.map((datum, index) => /* @__PURE__ */ jsx(Cell, { fill: datum.color ?? color }, index)) })
+  ] }) }) });
+}
+function BarChartTooltip({ active, payload, label, tooltipValueFormatter }) {
+  if (!active || !payload || payload.length === 0) return null;
+  const rawValue = payload[0].value;
+  const value = typeof rawValue === "number" ? rawValue : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border-base bg-surface px-3 py-2 text-xs shadow-md", children: [
+    /* @__PURE__ */ jsx("div", { className: "font-medium", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: value !== void 0 ? tooltipValueFormatter ? tooltipValueFormatter(value) : value : "" })
+  ] });
+}
+export {
+  BarChart
+};
+//# sourceMappingURL=bar-chart.js.map

package/dist/components/organisms/charts/bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/charts/bar-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  Cell,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { cn } from \"../../../utils/cn.js\";\n\ninterface IChartTooltipPayloadItem {\n  value?: string | number | ReadonlyArray<string | number>;\n}\n\ninterface IChartTooltipRenderArgs {\n  active?: boolean;\n  payload?: ReadonlyArray<IChartTooltipPayloadItem>;\n  label?: string | number;\n}\n\nconst DEFAULT_HEIGHT_PX = 240;\nconst DEFAULT_BAR_RADIUS = 4;\n\nexport interface IBarChartDatum {\n  label: string;\n  value: number;\n  /** Per-bar color override (otherwise uses the chart's default color). */\n  color?: string;\n}\n\nexport interface IBarChartProps {\n  data: ReadonlyArray<IBarChartDatum>;\n  /** Default bar color when a datum doesn't set its own. */\n  color?: string;\n  heightPx?: number;\n  yFormatter?: (value: number) => string;\n  tooltipValueFormatter?: (value: number) => string;\n  className?: string;\n  ariaLabel?: string;\n  showGrid?: boolean;\n  /** Show the x-axis category labels. */\n  showLabels?: boolean;\n}\n\n/**\n * Simple categorical bar chart. Use for signal counts, breakdowns by tag, etc.\n */\nexport function BarChart({\n  data,\n  color = \"#2563eb\",\n  heightPx = DEFAULT_HEIGHT_PX,\n  yFormatter,\n  tooltipValueFormatter,\n  className,\n  ariaLabel,\n  showGrid = true,\n  showLabels = true,\n}: IBarChartProps) {\n  return (\n    <div className={cn(\"w-full\", className)} style={{ height: heightPx }} role=\"img\" aria-label={ariaLabel}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RechartsBarChart data={[...data]} margin={{ top: 10, right: 12, bottom: 8, left: 0 }}>\n          {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-border-base\" vertical={false} /> : null}\n          <XAxis\n            dataKey=\"label\"\n            hide={!showLabels}\n            tickLine={false}\n            axisLine={false}\n            tick={{ fontSize: 11 }}\n            stroke=\"currentColor\"\n            className=\"text-muted-foreground\"\n          />\n          <YAxis\n            tickLine={false}\n            axisLine={false}\n            tick={{ fontSize: 11 }}\n            width={48}\n            stroke=\"currentColor\"\n            className=\"text-muted-foreground\"\n            tickFormatter={yFormatter}\n          />\n          <Tooltip\n            content={(args: IChartTooltipRenderArgs) => (\n              <BarChartTooltip\n                active={args.active}\n                payload={args.payload}\n                label={args.label}\n                tooltipValueFormatter={tooltipValueFormatter}\n              />\n            )}\n            cursor={{ fill: \"rgba(0,0,0,0.04)\" }}\n          />\n          <Bar dataKey=\"value\" radius={[DEFAULT_BAR_RADIUS, DEFAULT_BAR_RADIUS, 0, 0]} isAnimationActive={false}>\n            {data.map((datum, index) => (\n              <Cell key={index} fill={datum.color ?? color} />\n            ))}\n          </Bar>\n        </RechartsBarChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n\ninterface IBarChartTooltipProps extends IChartTooltipRenderArgs {\n  tooltipValueFormatter?: (value: number) => string;\n}\n\nfunction BarChartTooltip({ active, payload, label, tooltipValueFormatter }: IBarChartTooltipProps) {\n  if (!active || !payload || payload.length === 0) return null;\n  const rawValue = payload[0].value;\n  const value = typeof rawValue === \"number\" ? rawValue : undefined;\n  return (\n    <div className=\"rounded-md border border-border-base bg-surface px-3 py-2 text-xs shadow-md\">\n      <div className=\"font-medium\">{label}</div>\n      <div className=\"text-muted-foreground\">{value !== undefined ? (tooltipValueFormatter ? tooltipValueFormatter(value) : value) : \"\"}</div>\n    </div>\n  );\n}\n"],"mappings":";AAiEQ,SACc,KADd;AA/DR;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAYnB,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AA0BpB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AACf,GAAmB;AACjB,SACE,oBAAC,SAAI,WAAW,GAAG,UAAU,SAAS,GAAG,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAK,OAAM,cAAY,WAC3F,8BAAC,uBAAoB,OAAM,QAAO,QAAO,QACvC,+BAAC,oBAAiB,MAAM,CAAC,GAAG,IAAI,GAAG,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,GAAG,MAAM,EAAE,GACjF;AAAA,eAAW,oBAAC,iBAAc,iBAAgB,OAAM,WAAU,sBAAqB,UAAU,OAAO,IAAK;AAAA,IACtG;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAM,CAAC;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAM,EAAE,UAAU,GAAG;AAAA,QACrB,QAAO;AAAA,QACP,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAM,EAAE,UAAU,GAAG;AAAA,QACrB,OAAO;AAAA,QACP,QAAO;AAAA,QACP,WAAU;AAAA,QACV,eAAe;AAAA;AAAA,IACjB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,CAAC,SACR;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,KAAK;AAAA,YACb,SAAS,KAAK;AAAA,YACd,OAAO,KAAK;AAAA,YACZ;AAAA;AAAA,QACF;AAAA,QAEF,QAAQ,EAAE,MAAM,mBAAmB;AAAA;AAAA,IACrC;AAAA,IACA,oBAAC,OAAI,SAAQ,SAAQ,QAAQ,CAAC,oBAAoB,oBAAoB,GAAG,CAAC,GAAG,mBAAmB,OAC7F,eAAK,IAAI,CAAC,OAAO,UAChB,oBAAC,QAAiB,MAAM,MAAM,SAAS,SAA5B,KAAmC,CAC/C,GACH;AAAA,KACF,GACF,GACF;AAEJ;AAMA,SAAS,gBAAgB,EAAE,QAAQ,SAAS,OAAO,sBAAsB,GAA0B;AACjG,MAAI,CAAC,UAAU,CAAC,WAAW,QAAQ,WAAW,EAAG,QAAO;AACxD,QAAM,WAAW,QAAQ,CAAC,EAAE;AAC5B,QAAM,QAAQ,OAAO,aAAa,WAAW,WAAW;AACxD,SACE,qBAAC,SAAI,WAAU,+EACb;AAAA,wBAAC,SAAI,WAAU,eAAe,iBAAM;AAAA,IACpC,oBAAC,SAAI,WAAU,yBAAyB,oBAAU,SAAa,wBAAwB,sBAAsB,KAAK,IAAI,QAAS,IAAG;AAAA,KACpI;AAEJ;","names":[]}

package/dist/components/organisms/charts/charts.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const LineChartStory: Story;
+export declare const SparklineStory: Story;
+export declare const BarChartStory: Story;
+//# sourceMappingURL=charts.stories.d.ts.map

package/dist/components/organisms/charts/charts.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/charts/charts.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAiBtB,eAAO,MAAM,cAAc,EAAE,KAiB5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAwB5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAC"}

package/dist/components/organisms/charts/index.d.ts

@@ -0,0 +1,7 @@
+export { Sparkline } from "./sparkline.js";
+export type { ISparklineProps } from "./sparkline.js";
+export { LineChart } from "./line-chart.js";
+export type { ILineChartProps, ILineChartSeries } from "./line-chart.js";
+export { BarChart } from "./bar-chart.js";
+export type { IBarChartProps, IBarChartDatum } from "./bar-chart.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/organisms/charts/index.js

@@ -0,0 +1,9 @@
+import { Sparkline } from "./sparkline.js";
+import { LineChart } from "./line-chart.js";
+import { BarChart } from "./bar-chart.js";
+export {
+  BarChart,
+  LineChart,
+  Sparkline
+};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/charts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/charts/index.ts"],"sourcesContent":["export { Sparkline } from \"./sparkline.js\";\nexport type { ISparklineProps } from \"./sparkline.js\";\nexport { LineChart } from \"./line-chart.js\";\nexport type { ILineChartProps, ILineChartSeries } from \"./line-chart.js\";\nexport { BarChart } from \"./bar-chart.js\";\nexport type { IBarChartProps, IBarChartDatum } from \"./bar-chart.js\";\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB;AAE1B,SAAS,gBAAgB;","names":[]}

package/dist/components/organisms/charts/line-chart.d.ts

@@ -0,0 +1,27 @@
+export interface ILineChartSeries<TDatum> {
+    key: string;
+    label?: string;
+    accessor: (datum: TDatum) => number;
+    color: string;
+    strokeWidth?: number;
+    dashed?: boolean;
+}
+export interface ILineChartProps<TDatum> {
+    data: ReadonlyArray<TDatum>;
+    xAccessor: (datum: TDatum) => string | number;
+    xLabel?: (datum: TDatum) => string;
+    series: ReadonlyArray<ILineChartSeries<TDatum>>;
+    heightPx?: number;
+    className?: string;
+    ariaLabel?: string;
+    yDomain?: [number | "auto", number | "auto"];
+    yFormatter?: (value: number) => string;
+    tooltipValueFormatter?: (value: number, seriesKey: string) => string;
+    showGrid?: boolean;
+}
+/**
+ * General-purpose line chart for price history, time series, metrics dashboards.
+ * Supports multiple series, custom formatters, and inherits theme via CSS vars.
+ */
+export declare function LineChart<TDatum>({ data, xAccessor, xLabel, series, heightPx, className, ariaLabel, yDomain, yFormatter, tooltipValueFormatter, showGrid, }: ILineChartProps<TDatum>): import("react").JSX.Element;
+//# sourceMappingURL=line-chart.d.ts.map

package/dist/components/organisms/charts/line-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/charts/line-chart.tsx"],"names":[],"mappings":"AA2BA,MAAM,WAAW,gBAAgB,CAAC,MAAM;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,MAAM;IACrC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAC9C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,MAAM,EAAE,aAAa,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,EAChC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAA4B,EAC5B,SAAS,EACT,SAAS,EACT,OAA0B,EAC1B,UAAU,EACV,qBAAqB,EACrB,QAAe,GAChB,EAAE,eAAe,CAAC,MAAM,CAAC,+BA6DzB"}

package/dist/components/organisms/charts/line-chart.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  CartesianGrid,
+  Line,
+  LineChart as RechartsLineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { cn } from "../../../utils/cn.js";
+const DEFAULT_HEIGHT_PX = 240;
+function LineChart({
+  data,
+  xAccessor,
+  xLabel,
+  series,
+  heightPx = DEFAULT_HEIGHT_PX,
+  className,
+  ariaLabel,
+  yDomain = ["auto", "auto"],
+  yFormatter,
+  tooltipValueFormatter,
+  showGrid = true
+}) {
+  const chartData = data.map((datum, index) => {
+    const row = {
+      x: xAccessor(datum),
+      xLabel: xLabel ? xLabel(datum) : String(xAccessor(datum)),
+      index
+    };
+    for (const s of series) row[s.key] = s.accessor(datum);
+    return row;
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), style: { height: heightPx }, role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RechartsLineChart, { data: chartData, margin: { top: 10, right: 12, bottom: 8, left: 0 }, children: [
+    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "stroke-border-base", vertical: false }) : null,
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: "xLabel",
+        tickLine: false,
+        axisLine: false,
+        tick: { fontSize: 11 },
+        stroke: "currentColor",
+        className: "text-muted-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        domain: yDomain,
+        tickLine: false,
+        axisLine: false,
+        tick: { fontSize: 11 },
+        width: 48,
+        stroke: "currentColor",
+        className: "text-muted-foreground",
+        tickFormatter: yFormatter
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: (args) => /* @__PURE__ */ jsx(
+          LineChartTooltip,
+          {
+            active: args.active,
+            payload: args.payload,
+            label: args.label,
+            tooltipValueFormatter,
+            seriesLabels: Object.fromEntries(series.map((s) => [s.key, s.label ?? s.key]))
+          }
+        )
+      }
+    ),
+    series.map((s) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: "monotone",
+        dataKey: s.key,
+        stroke: s.color,
+        strokeWidth: s.strokeWidth ?? 2,
+        strokeDasharray: s.dashed ? "4 4" : void 0,
+        dot: false,
+        isAnimationActive: false
+      },
+      s.key
+    ))
+  ] }) }) });
+}
+function LineChartTooltip({ active, payload, label, tooltipValueFormatter, seriesLabels }) {
+  if (!active || !payload || payload.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border-base bg-surface px-3 py-2 text-xs shadow-md", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1 font-medium", children: label }),
+    /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: payload.map((entry) => {
+      const key = typeof entry.dataKey === "string" || typeof entry.dataKey === "number" ? String(entry.dataKey) : "";
+      const numericValue = typeof entry.value === "number" ? entry.value : void 0;
+      if (numericValue === void 0) return null;
+      return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full", style: { backgroundColor: entry.color } }),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          seriesLabels[key] ?? key,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: tooltipValueFormatter ? tooltipValueFormatter(numericValue, key) : numericValue })
+      ] }, key);
+    }) })
+  ] });
+}
+export {
+  LineChart
+};
+//# sourceMappingURL=line-chart.js.map

package/dist/components/organisms/charts/line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/charts/line-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  CartesianGrid,\n  Line,\n  LineChart as RechartsLineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { cn } from \"../../../utils/cn.js\";\n\ninterface IChartTooltipPayloadItem {\n  dataKey?: string | number | ((obj: unknown) => unknown);\n  value?: string | number | ReadonlyArray<string | number>;\n  color?: string;\n}\n\ninterface IChartTooltipRenderArgs {\n  active?: boolean;\n  payload?: ReadonlyArray<IChartTooltipPayloadItem>;\n  label?: string | number;\n}\n\nconst DEFAULT_HEIGHT_PX = 240;\n\nexport interface ILineChartSeries<TDatum> {\n  key: string;\n  label?: string;\n  accessor: (datum: TDatum) => number;\n  color: string;\n  strokeWidth?: number;\n  dashed?: boolean;\n}\n\nexport interface ILineChartProps<TDatum> {\n  data: ReadonlyArray<TDatum>;\n  xAccessor: (datum: TDatum) => string | number;\n  xLabel?: (datum: TDatum) => string;\n  series: ReadonlyArray<ILineChartSeries<TDatum>>;\n  heightPx?: number;\n  className?: string;\n  ariaLabel?: string;\n  yDomain?: [number | \"auto\", number | \"auto\"];\n  yFormatter?: (value: number) => string;\n  tooltipValueFormatter?: (value: number, seriesKey: string) => string;\n  showGrid?: boolean;\n}\n\n/**\n * General-purpose line chart for price history, time series, metrics dashboards.\n * Supports multiple series, custom formatters, and inherits theme via CSS vars.\n */\nexport function LineChart<TDatum>({\n  data,\n  xAccessor,\n  xLabel,\n  series,\n  heightPx = DEFAULT_HEIGHT_PX,\n  className,\n  ariaLabel,\n  yDomain = [\"auto\", \"auto\"],\n  yFormatter,\n  tooltipValueFormatter,\n  showGrid = true,\n}: ILineChartProps<TDatum>) {\n  const chartData = data.map((datum, index) => {\n    const row: Record<string, string | number> = {\n      x: xAccessor(datum),\n      xLabel: xLabel ? xLabel(datum) : String(xAccessor(datum)),\n      index,\n    };\n    for (const s of series) row[s.key] = s.accessor(datum);\n    return row;\n  });\n\n  return (\n    <div className={cn(\"w-full\", className)} style={{ height: heightPx }} role=\"img\" aria-label={ariaLabel}>\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RechartsLineChart data={chartData} margin={{ top: 10, right: 12, bottom: 8, left: 0 }}>\n          {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-border-base\" vertical={false} /> : null}\n          <XAxis\n            dataKey=\"xLabel\"\n            tickLine={false}\n            axisLine={false}\n            tick={{ fontSize: 11 }}\n            stroke=\"currentColor\"\n            className=\"text-muted-foreground\"\n          />\n          <YAxis\n            domain={yDomain}\n            tickLine={false}\n            axisLine={false}\n            tick={{ fontSize: 11 }}\n            width={48}\n            stroke=\"currentColor\"\n            className=\"text-muted-foreground\"\n            tickFormatter={yFormatter}\n          />\n          <Tooltip\n            content={(args: IChartTooltipRenderArgs) => (\n              <LineChartTooltip\n                active={args.active}\n                payload={args.payload}\n                label={args.label}\n                tooltipValueFormatter={tooltipValueFormatter}\n                seriesLabels={Object.fromEntries(series.map((s) => [s.key, s.label ?? s.key]))}\n              />\n            )}\n          />\n          {series.map((s) => (\n            <Line\n              key={s.key}\n              type=\"monotone\"\n              dataKey={s.key}\n              stroke={s.color}\n              strokeWidth={s.strokeWidth ?? 2}\n              strokeDasharray={s.dashed ? \"4 4\" : undefined}\n              dot={false}\n              isAnimationActive={false}\n            />\n          ))}\n        </RechartsLineChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n\ninterface ILineChartTooltipProps extends IChartTooltipRenderArgs {\n  tooltipValueFormatter?: (value: number, seriesKey: string) => string;\n  seriesLabels: Record<string, string>;\n}\n\nfunction LineChartTooltip({ active, payload, label, tooltipValueFormatter, seriesLabels }: ILineChartTooltipProps) {\n  if (!active || !payload || payload.length === 0) return null;\n  return (\n    <div className=\"rounded-md border border-border-base bg-surface px-3 py-2 text-xs shadow-md\">\n      <div className=\"mb-1 font-medium\">{label}</div>\n      <ul className=\"space-y-0.5\">\n        {payload.map((entry) => {\n          const key = typeof entry.dataKey === \"string\" || typeof entry.dataKey === \"number\" ? String(entry.dataKey) : \"\";\n          const numericValue = typeof entry.value === \"number\" ? entry.value : undefined;\n          if (numericValue === undefined) return null;\n          return (\n            <li key={key} className=\"flex items-center gap-2\">\n              <span className=\"h-2 w-2 rounded-full\" style={{ backgroundColor: entry.color }} />\n              <span className=\"text-muted-foreground\">{seriesLabels[key] ?? key}:</span>\n              <span className=\"font-medium\">\n                {tooltipValueFormatter ? tooltipValueFormatter(numericValue, key) : numericValue}\n              </span>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/organisms/charts/sparkline.d.ts

@@ -0,0 +1,19 @@
+export interface ISparklineProps<TDatum> {
+    data: ReadonlyArray<TDatum>;
+    accessor: (datum: TDatum) => number;
+    /** Explicit pixel height. Defaults to 40. */
+    heightPx?: number;
+    /** Tailwind color token, e.g. `stroke-blue-500`. Applied via inline style; falls back to currentColor. */
+    color?: string;
+    strokeWidth?: number;
+    /** Render a filled area under the line. */
+    filled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+}
+/**
+ * Minimal inline sparkline for row-level trends. Hides axes/legends/tooltips
+ * and auto-fits via ResponsiveContainer.
+ */
+export declare function Sparkline<TDatum>({ data, accessor, heightPx, color, strokeWidth, filled, className, ariaLabel, }: ISparklineProps<TDatum>): import("react").JSX.Element;
+//# sourceMappingURL=sparkline.d.ts.map

package/dist/components/organisms/charts/sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/charts/sparkline.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe,CAAC,MAAM;IACrC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,EAChC,IAAI,EACJ,QAAQ,EACR,QAA4B,EAC5B,KAAsB,EACtB,WAAkC,EAClC,MAAc,EACd,SAAS,EACT,SAAS,GACV,EAAE,eAAe,CAAC,MAAM,CAAC,+BAkCzB"}

package/dist/components/organisms/charts/sparkline.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, ResponsiveContainer, YAxis } from "recharts";
+import { cn } from "../../../utils/cn.js";
+const DEFAULT_HEIGHT_PX = 40;
+const DEFAULT_STROKE_WIDTH = 2;
+function Sparkline({
+  data,
+  accessor,
+  heightPx = DEFAULT_HEIGHT_PX,
+  color = "currentColor",
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  filled = false,
+  className,
+  ariaLabel
+}) {
+  const gradientId = `sparkline-gradient-${color.replace(/[^a-z0-9]/gi, "")}`;
+  const chartData = data.map((datum, index) => ({ value: accessor(datum), index }));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("w-full", className),
+      style: { height: heightPx },
+      role: "img",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data: chartData, margin: { top: 2, right: 0, bottom: 2, left: 0 }, children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.3 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ jsx(YAxis, { hide: true, domain: ["dataMin", "dataMax"] }),
+        /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: "value",
+            stroke: color,
+            strokeWidth,
+            fill: filled ? `url(#${gradientId})` : "none",
+            isAnimationActive: false,
+            dot: false,
+            activeDot: false
+          }
+        )
+      ] }) })
+    }
+  );
+}
+export {
+  Sparkline
+};
+//# sourceMappingURL=sparkline.js.map

package/dist/components/organisms/charts/sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/charts/sparkline.tsx"],"sourcesContent":["\"use client\";\n\nimport { Area, AreaChart, ResponsiveContainer, YAxis } from \"recharts\";\nimport { cn } from \"../../../utils/cn.js\";\n\nconst DEFAULT_HEIGHT_PX = 40;\nconst DEFAULT_STROKE_WIDTH = 2;\n\nexport interface ISparklineProps<TDatum> {\n  data: ReadonlyArray<TDatum>;\n  accessor: (datum: TDatum) => number;\n  /** Explicit pixel height. Defaults to 40. */\n  heightPx?: number;\n  /** Tailwind color token, e.g. `stroke-blue-500`. Applied via inline style; falls back to currentColor. */\n  color?: string;\n  strokeWidth?: number;\n  /** Render a filled area under the line. */\n  filled?: boolean;\n  className?: string;\n  ariaLabel?: string;\n}\n\n/**\n * Minimal inline sparkline for row-level trends. Hides axes/legends/tooltips\n * and auto-fits via ResponsiveContainer.\n */\nexport function Sparkline<TDatum>({\n  data,\n  accessor,\n  heightPx = DEFAULT_HEIGHT_PX,\n  color = \"currentColor\",\n  strokeWidth = DEFAULT_STROKE_WIDTH,\n  filled = false,\n  className,\n  ariaLabel,\n}: ISparklineProps<TDatum>) {\n  const gradientId = `sparkline-gradient-${color.replace(/[^a-z0-9]/gi, \"\")}`;\n  const chartData = data.map((datum, index) => ({ value: accessor(datum), index }));\n\n  return (\n    <div\n      className={cn(\"w-full\", className)}\n      style={{ height: heightPx }}\n      role=\"img\"\n      aria-label={ariaLabel}\n    >\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <AreaChart data={chartData} margin={{ top: 2, right: 0, bottom: 2, left: 0 }}>\n          <defs>\n            <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor={color} stopOpacity={0.3} />\n              <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n            </linearGradient>\n          </defs>\n          <YAxis hide domain={[\"dataMin\", \"dataMax\"]} />\n          <Area\n            type=\"monotone\"\n            dataKey=\"value\"\n            stroke={color}\n            strokeWidth={strokeWidth}\n            fill={filled ? `url(#${gradientId})` : \"none\"}\n            isAnimationActive={false}\n            dot={false}\n            activeDot={false}\n          />\n        </AreaChart>\n      </ResponsiveContainer>\n    </div>\n  );\n}\n"],"mappings":";AAiDY,SACE,KADF;AA/CZ,SAAS,MAAM,WAAW,qBAAqB,aAAa;AAC5D,SAAS,UAAU;AAEnB,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAoBtB,SAAS,UAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,aAAa,sBAAsB,MAAM,QAAQ,eAAe,EAAE,CAAC;AACzE,QAAM,YAAY,KAAK,IAAI,CAAC,OAAO,WAAW,EAAE,OAAO,SAAS,KAAK,GAAG,MAAM,EAAE;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,OAAO,EAAE,QAAQ,SAAS;AAAA,MAC1B,MAAK;AAAA,MACL,cAAY;AAAA,MAEZ,8BAAC,uBAAoB,OAAM,QAAO,QAAO,QACvC,+BAAC,aAAU,MAAM,WAAW,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE,GACzE;AAAA,4BAAC,UACC,+BAAC,oBAAe,IAAI,YAAY,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KACtD;AAAA,8BAAC,UAAK,QAAO,MAAK,WAAW,OAAO,aAAa,KAAK;AAAA,UACtD,oBAAC,UAAK,QAAO,QAAO,WAAW,OAAO,aAAa,GAAG;AAAA,WACxD,GACF;AAAA,QACA,oBAAC,SAAM,MAAI,MAAC,QAAQ,CAAC,WAAW,SAAS,GAAG;AAAA,QAC5C;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,QAAQ;AAAA,YACR;AAAA,YACA,MAAM,SAAS,QAAQ,UAAU,MAAM;AAAA,YACvC,mBAAmB;AAAA,YACnB,KAAK;AAAA,YACL,WAAW;AAAA;AAAA,QACb;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/organisms/command-palette/command-palette.d.ts

@@ -0,0 +1,94 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+/**
+ * Root `cmdk` command menu. Wraps `Command` from cmdk — works standalone
+ * (inline list) or nested inside `CommandPaletteDialog`.
+ */
+export declare const CommandPalette: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface ICommandPaletteDialogProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+    title?: ReactNode;
+    description?: ReactNode;
+    children: ReactNode;
+    /** Content className override. */
+    contentClassName?: string;
+}
+/**
+ * Dialog-hosted command palette. Renders an overlay + centered panel with
+ * `<Command>` inside so consumers can drop `CommandPaletteInput`,
+ * `CommandPaletteList`, `CommandPaletteGroup`, and `CommandPaletteItem`
+ * as children.
+ */
+export declare function CommandPaletteDialog({ title, description, children, contentClassName, ...props }: ICommandPaletteDialogProps): import("react").JSX.Element;
+export declare const CommandPaletteInput: import("react").ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const CommandPaletteList: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandPaletteEmpty: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandPaletteGroup: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandPaletteItem: import("react").ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CommandPaletteSeparator: import("react").ForwardRefExoticComponent<Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function CommandPaletteShortcut({ className, ...props }: ComponentPropsWithoutRef<"span">): import("react").JSX.Element;
+//# sourceMappingURL=command-palette.d.ts.map

package/dist/components/organisms/command-palette/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/command-palette/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAEL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;0GAYzB,CAAC;AAGH,MAAM,WAAW,0BACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAsB,EACtB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,0BAA0B,+BAqB5B;AAED,eAAO,MAAM,mBAAmB;;;;;;;8GAkB9B,CAAC;AAGH,eAAO,MAAM,kBAAkB;;;;;;;;0GAS7B,CAAC;AAGH,eAAO,MAAM,mBAAmB;;;;;;qLAS9B,CAAC;AAGH,eAAO,MAAM,mBAAmB;;;;;;;;;;0GAa9B,CAAC;AAGH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;0GAe7B,CAAC;AAGH,eAAO,MAAM,uBAAuB;;;;;;0GASlC,CAAC;AAGH,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,CAAC,MAAM,CAAC,+BAU/F"}

package/dist/components/organisms/command-palette/command-palette.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Command } from "cmdk";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../../utils/cn.js";
+const CommandPalette = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-xl bg-surface text-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandPalette.displayName = "CommandPalette";
+function CommandPaletteDialog({
+  title = "Command menu",
+  description,
+  children,
+  contentClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        className: cn(
+          "fixed left-1/2 top-[30%] z-50 w-full max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border border-border-base bg-surface shadow-2xl",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          contentClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: title }),
+          description ? /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "sr-only", children: description }) : null,
+          /* @__PURE__ */ jsx(Command, { className: "flex max-h-[70vh] flex-col", children })
+        ]
+      }
+    )
+  ] }) });
+}
+const CommandPaletteInput = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border-base px-3", children: [
+  /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4 text-muted-foreground", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+  ] }),
+  /* @__PURE__ */ jsx(
+    Command.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-11 w-full bg-transparent py-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandPaletteInput.displayName = "CommandPaletteInput";
+const CommandPaletteList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.List,
+  {
+    ref,
+    className: cn("flex-1 overflow-y-auto overflow-x-hidden p-2", className),
+    ...props
+  }
+));
+CommandPaletteList.displayName = "CommandPaletteList";
+const CommandPaletteEmpty = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Empty,
+  {
+    ref,
+    className: cn("py-8 text-center text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CommandPaletteEmpty.displayName = "CommandPaletteEmpty";
+const CommandPaletteGroup = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Group,
+  {
+    ref,
+    className: cn(
+      "text-foreground",
+      "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandPaletteGroup.displayName = "CommandPaletteGroup";
+const CommandPaletteItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-2 text-sm text-foreground outline-none",
+      "data-[selected=true]:bg-surface-muted data-[selected=true]:text-foreground",
+      "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      "[&_svg]:h-4 [&_svg]:w-4 [&_svg]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandPaletteItem.displayName = "CommandPaletteItem";
+const CommandPaletteSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border-base", className),
+    ...props
+  }
+));
+CommandPaletteSeparator.displayName = "CommandPaletteSeparator";
+function CommandPaletteShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  CommandPalette,
+  CommandPaletteDialog,
+  CommandPaletteEmpty,
+  CommandPaletteGroup,
+  CommandPaletteInput,
+  CommandPaletteItem,
+  CommandPaletteList,
+  CommandPaletteSeparator,
+  CommandPaletteShortcut
+};
+//# sourceMappingURL=command-palette.js.map