@exsto/ds 0.0.1-rc.13 → 0.0.1-rc.14

package/dist/ui/src/components/ui/chart/chart.js

@@ -0,0 +1,168 @@
+"use client";
+import { cn } from "../../../lib/utils.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as RechartsPrimitive from "recharts";
+//#region ../ui/src/components/ui/chart/chart.tsx
+var THEMES = {
+	light: "",
+	dark: ".dark"
+};
+var INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+var ChartContext = React.createContext(null);
+var useChart = () => {
+	const context = React.useContext(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+};
+var ChartContainer = ({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) => {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	const refContainer = React.useRef(null);
+	const [hasSize, setHasSize] = React.useState(false);
+	React.useLayoutEffect(() => {
+		const element = refContainer.current;
+		if (!element) return;
+		const update = () => {
+			const { width, height } = element.getBoundingClientRect();
+			setHasSize(width > 0 && height > 0);
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: refContainer,
+			"data-slot": "chart",
+			id,
+			"data-chart": chartId,
+			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(ChartStyle, {
+				id: chartId,
+				config
+			}), hasSize && /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+				initialDimension,
+				children
+			})]
+		})
+	});
+};
+var ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+	if (!colorConfig.length) return null;
+	const css = Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n");
+	return /* @__PURE__ */ jsx("style", { children: css });
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+var ChartTooltipContent = ({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) => {
+	const { config } = useChart();
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+				const itemConfig = getPayloadConfigFromPayload(config, item, key);
+				const indicatorColor = color ?? item.payload?.fill ?? item.color;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
+						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"w-1": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-medium text-foreground tabular-nums",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+						})]
+					})] })
+				}, `${key}-${String(item.value ?? "")}`);
+			})
+		})]
+	});
+};
+var ChartLegend = RechartsPrimitive.Legend;
+var ChartLegendContent = ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) => {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		children: payload.filter((item) => item.type !== "none").map((item) => {
+			const key = `${nameKey ?? item.dataKey ?? "value"}`;
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
+					className: "h-2 w-2 shrink-0 rounded-[2px]",
+					style: { backgroundColor: item.color }
+				}), itemConfig?.label]
+			}, `${key}-${String(item.value ?? "")}`);
+		})
+	});
+};
+var getPayloadConfigFromPayload = (config, payload, key) => {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+};
+//#endregion
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
+
+//# sourceMappingURL=chart.js.map

package/dist/ui/src/components/ui/chart/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../../../../../../../ui/src/components/ui/chart/chart.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport * as React from 'react';\nimport type { TooltipValueType } from 'recharts';\nimport * as RechartsPrimitive from 'recharts';\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: '', dark: '.dark' } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TTooltipName = number | string;\n\nexport type TChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })\n>;\n\ntype TChartContextProps = {\n  config: TChartConfig;\n};\n\nconst ChartContext = React.createContext<TChartContextProps | null>(null);\n\nconst useChart = () => {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n};\n\nexport const ChartContainer = ({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<'div'> & {\n  config: TChartConfig;\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) => {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const [hasSize, setHasSize] = React.useState(false);\n\n  React.useLayoutEffect(() => {\n    const element = refContainer.current;\n    if (!element) {\n      return;\n    }\n\n    const update = () => {\n      const { width, height } = element.getBoundingClientRect();\n      setHasSize(width > 0 && height > 0);\n    };\n\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        ref={refContainer}\n        data-slot=\"chart\"\n        id={id}\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        {hasSize && <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>{children}</RechartsPrimitive.ResponsiveContainer>}\n      </div>\n    </ChartContext.Provider>\n  );\n};\n\nexport const ChartStyle = ({ id, config }: { id: string; config: TChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  const css = Object.entries(THEMES)\n    .map(\n      ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join('\\n')}\n}\n`,\n    )\n    .join('\\n');\n\n  return <style>{css}</style>;\n};\n\nexport const ChartTooltip = RechartsPrimitive.Tooltip;\n\nexport const ChartTooltipContent = ({\n  active,\n  payload,\n  className,\n  indicator = 'dot',\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<'div'> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: 'line' | 'dot' | 'dashed';\n    nameKey?: string;\n    labelKey?: string;\n  } & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TTooltipName>, 'accessibilityLayer'>) => {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value = !labelKey && typeof label === 'string' ? (config[label]?.label ?? label) : itemConfig?.label;\n\n    if (labelFormatter) {\n      return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>;\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== 'dot';\n\n  return (\n    <div\n      className={cn('grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl', className)}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== 'none')\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                key={`${key}-${String(item.value ?? '')}`}\n                className={cn(\n                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n                  indicator === 'dot' && 'items-center',\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {\n                            'h-2.5 w-2.5': indicator === 'dot',\n                            'w-1': indicator === 'line',\n                            'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',\n                            'my-0.5': nestLabel && indicator === 'dashed',\n                          })}\n                          style={\n                            {\n                              '--color-bg': indicatorColor,\n                              '--color-border': indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div className={cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}>\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">{itemConfig?.label ?? item.name}</span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {typeof item.value === 'number' ? item.value.toLocaleString() : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n};\n\nexport const ChartLegend = RechartsPrimitive.Legend;\n\nexport const ChartLegendContent = ({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = 'bottom',\n  nameKey,\n}: React.ComponentProps<'div'> & {\n  hideIcon?: boolean;\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) => {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>\n      {payload\n        .filter((item) => item.type !== 'none')\n        .map((item) => {\n          const key = `${nameKey ?? item.dataKey ?? 'value'}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={`${key}-${String(item.value ?? '')}`}\n              className={cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground')}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n};\n\nconst getPayloadConfigFromPayload = (config: TChartConfig, payload: unknown, key: string) => {\n  if (typeof payload !== 'object' || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null ? payload.payload : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key as keyof typeof payloadPayload] === 'string') {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n};\n"],"mappings":"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"}

package/dist/ui/src/components/ui/checkbox/checkbox.js

@@ -0,0 +1,21 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconMinus } from "@tabler/icons-react";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region ../ui/src/components/ui/checkbox/checkbox.tsx
+var Checkbox$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "group/checkbox-indicator grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: [/* @__PURE__ */ jsx(IconCheck, { className: "group-data-indeterminate/checkbox-indicator:hidden" }), /* @__PURE__ */ jsx(IconMinus, { className: "hidden group-data-indeterminate/checkbox-indicator:block" })]
+		})
+	});
+};
+//#endregion
+export { Checkbox$1 as Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/ui/src/components/ui/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\n\nexport const Checkbox = ({ className, ...props }: CheckboxPrimitive.Root.Props) => {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group/checkbox-indicator grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconCheck className=\"group-data-indeterminate/checkbox-indicator:hidden\" />\n        <IconMinus className=\"hidden group-data-indeterminate/checkbox-indicator:block\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,cAAY,EAAE,WAAW,GAAG,YAA0C;CACjF,OACE,oBAAC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,woBACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAAC,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,WAAD,EAAW,WAAU,qDAAsD,CAAA,GAC3E,oBAAC,WAAD,EAAW,WAAU,2DAA4D,CAAA,CACtD;;CACP,CAAA;AAE5B"}

package/dist/ui/src/components/ui/collapsible/collapsible.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region ../ui/src/components/ui/collapsible/collapsible.tsx
+var Collapsible$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+};
+var CollapsibleTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+};
+var CollapsibleContent = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "collapsible-content",
+		"data-focus": "inset",
+		...props
+	});
+};
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };
+
+//# sourceMappingURL=collapsible.js.map

package/dist/ui/src/components/ui/collapsible/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","names":[],"sources":["../../../../../../../ui/src/components/ui/collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\n\nexport const Collapsible = ({ ...props }: CollapsiblePrimitive.Root.Props) => {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n};\n\nexport const CollapsibleTrigger = ({ ...props }: CollapsiblePrimitive.Trigger.Props) => {\n  return <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n};\n\nexport const CollapsibleContent = ({ ...props }: CollapsiblePrimitive.Panel.Props) => {\n  return <CollapsiblePrimitive.Panel data-slot=\"collapsible-content\" data-focus=\"inset\" {...props} />;\n};\n"],"mappings":";;;AAEA,IAAa,iBAAe,EAAE,GAAG,YAA6C;CAC5E,OAAO,oBAAC,YAAqB,MAAtB;EAA2B,aAAU;EAAc,GAAI;CAAQ,CAAA;AACxE;AAEA,IAAa,sBAAsB,EAAE,GAAG,YAAgD;CACtF,OAAO,oBAAC,YAAqB,SAAtB;EAA8B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AACnF;AAEA,IAAa,sBAAsB,EAAE,GAAG,YAA8C;CACpF,OAAO,oBAAC,YAAqB,OAAtB;EAA4B,aAAU;EAAsB,cAAW;EAAQ,GAAI;CAAQ,CAAA;AACpG"}

package/dist/ui/src/components/ui/combobox/combobox.js

@@ -0,0 +1,85 @@
+import { cn } from "../../../lib/utils.js";
+import { ScrollArea } from "../scroll-area/scroll-area.js";
+import { POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region ../ui/src/components/ui/combobox/combobox.tsx
+var Combobox$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Root, {
+		"data-slot": "combobox",
+		...props
+	});
+};
+var ComboboxInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsxs(Combobox.InputGroup, {
+		"data-slot": "combobox-input-group",
+		className: "relative flex w-full items-center",
+		children: [/* @__PURE__ */ jsx(Combobox.Input, {
+			"data-slot": "combobox-input",
+			className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 pr-8 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+			...props
+		}), /* @__PURE__ */ jsx(Combobox.Trigger, {
+			"data-slot": "combobox-trigger",
+			className: "absolute right-2 flex items-center text-muted-foreground disabled:pointer-events-none disabled:opacity-50",
+			tabIndex: -1,
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-4" })
+		})]
+	});
+};
+var ComboboxContent = ({ className, children, empty, portalContainer, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		"data-slot": "combobox-portal",
+		container: portalContainer,
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			"data-slot": "combobox-positioner",
+			sideOffset: 4,
+			align: "start",
+			className: "z-50",
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				"data-slot": "combobox-content",
+				className: cn(POPUP_LIST_WIDTH_CLASS, "overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md outline-none motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+				...props,
+				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }), /* @__PURE__ */ jsx(ScrollArea, {
+					type: "always",
+					fade: true,
+					fadeFrom: "popover",
+					className: "max-h-60",
+					children: /* @__PURE__ */ jsx(Combobox.List, {
+						"data-slot": "combobox-list",
+						className: "p-1",
+						children
+					})
+				})]
+			})
+		})
+	});
+};
+var ComboboxItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: cn(popupItemClass("base-ui", true), className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children
+		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			"data-slot": "combobox-item-indicator",
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			children: /* @__PURE__ */ jsx(IconCheck, { className: "size-3.5" })
+		})]
+	});
+};
+var ComboboxEmpty = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("py-4 text-center text-sm text-muted-foreground empty:py-0", className),
+		...props,
+		children: children ?? "No results found."
+	});
+};
+//#endregion
+export { Combobox$1 as Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem };
+
+//# sourceMappingURL=combobox.js.map

package/dist/ui/src/components/ui/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport { POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\nimport type { ReactNode } from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Combobox = <TValue,>({ ...props }: ComboboxPrimitive.Root.Props<TValue>) => {\n  return <ComboboxPrimitive.Root data-slot=\"combobox\" {...props} />;\n};\n\nexport const ComboboxInput = ({ className, ...props }: ComboboxPrimitive.Input.Props) => {\n  return (\n    <ComboboxPrimitive.InputGroup data-slot=\"combobox-input-group\" className=\"relative flex w-full items-center\">\n      <ComboboxPrimitive.Input\n        data-slot=\"combobox-input\"\n        className={cn(\n          'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 pr-8 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n          className,\n        )}\n        {...props}\n      />\n      <ComboboxPrimitive.Trigger\n        data-slot=\"combobox-trigger\"\n        className=\"absolute right-2 flex items-center text-muted-foreground disabled:pointer-events-none disabled:opacity-50\"\n        tabIndex={-1}\n        aria-hidden\n      >\n        <IconChevronDown className=\"size-4\" />\n      </ComboboxPrimitive.Trigger>\n    </ComboboxPrimitive.InputGroup>\n  );\n};\n\nexport interface IComboboxContentProps extends Omit<ComboboxPrimitive.Popup.Props, 'children'> {\n  /** Item nodes, or the Base UI function form `(item, index) => node` (requires `items` on the root). */\n  children?: ComboboxPrimitive.List.Props['children'];\n  /** Empty-state content; rendered (with the default text) only when the filtered list is empty. */\n  empty?: ReactNode;\n  /** Optional portal destination, used by shadow-DOM element wrappers. */\n  portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nexport const ComboboxContent = ({ className, children, empty, portalContainer, ...props }: IComboboxContentProps) => {\n  return (\n    <ComboboxPrimitive.Portal data-slot=\"combobox-portal\" container={portalContainer}>\n      <ComboboxPrimitive.Positioner data-slot=\"combobox-positioner\" sideOffset={4} align=\"start\" className=\"z-50\">\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          className={cn(\n            POPUP_LIST_WIDTH_CLASS,\n            'overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md outline-none motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        >\n          <ComboboxEmpty>{empty}</ComboboxEmpty>\n          {/* The ScrollArea, not the List, is the scroll container: a filtered list\n              that runs past the fold needs a bar and a fade to say so. Base UI\n              keeps the highlighted item in view through the nearest scrollable\n              ancestor, which is now the viewport. */}\n          <ScrollArea type=\"always\" fade fadeFrom=\"popover\" className=\"max-h-60\">\n            <ComboboxPrimitive.List data-slot=\"combobox-list\" className=\"p-1\">\n              {children}\n            </ComboboxPrimitive.List>\n          </ScrollArea>\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n};\n\nexport const ComboboxItem = ({ className, children, ...props }: ComboboxPrimitive.Item.Props) => {\n  return (\n    <ComboboxPrimitive.Item data-slot=\"combobox-item\" className={cn(popupItemClass('base-ui', true), className)} {...props}>\n      <span className=\"flex-1\">{children}</span>\n      <ComboboxPrimitive.ItemIndicator data-slot=\"combobox-item-indicator\" className={POPUP_ITEM_INDICATOR_CLASS}>\n        <IconCheck className=\"size-3.5\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n};\n\nexport const ComboboxEmpty = ({ className, children, ...props }: ComboboxPrimitive.Empty.Props) => {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      // empty:py-0 collapses the padding while the list has results: Base UI\n      // keeps this status element mounted and only fills it when the list is\n      // empty (and only when the root has `items` to derive emptiness from).\n      className={cn('py-4 text-center text-sm text-muted-foreground empty:py-0', className)}\n      {...props}\n    >\n      {children ?? 'No results found.'}\n    </ComboboxPrimitive.Empty>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,cAAqB,EAAE,GAAG,YAAkD;CACvF,OAAO,oBAAC,SAAkB,MAAnB;EAAwB,aAAU;EAAW,GAAI;CAAQ,CAAA;AAClE;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAA2C;CACvF,OACE,qBAAC,SAAkB,YAAnB;EAA8B,aAAU;EAAuB,WAAU;EAAzE,UAAA,CACE,oBAAC,SAAkB,OAAnB;GACE,aAAU;GACV,WAAW,GACT,qiBACA,SACF;GACA,GAAI;EACL,CAAA,GACD,oBAAC,SAAkB,SAAnB;GACE,aAAU;GACV,WAAU;GACV,UAAU;GACV,eAAA;GAEA,UAAA,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;EACZ,CAAA,CACC;;AAElC;AAWA,IAAa,mBAAmB,EAAE,WAAW,UAAU,OAAO,iBAAiB,GAAG,YAAmC;CACnH,OACE,oBAAC,SAAkB,QAAnB;EAA0B,aAAU;EAAkB,WAAW;EAC/D,UAAA,oBAAC,SAAkB,YAAnB;GAA8B,aAAU;GAAsB,YAAY;GAAG,OAAM;GAAQ,WAAU;GACnG,UAAA,qBAAC,SAAkB,OAAnB;IACE,aAAU;IACV,WAAW,GACT,wBACA,6QACA,SACF;IACA,GAAI;IAPN,UAAA,CASE,oBAAC,eAAD,EAAA,UAAgB,MAAqB,CAAA,GAKrC,oBAAC,YAAD;KAAY,MAAK;KAAS,MAAA;KAAK,UAAS;KAAU,WAAU;KAC1D,UAAA,oBAAC,SAAkB,MAAnB;MAAwB,aAAU;MAAgB,WAAU;MACzD;KACqB,CAAA;IACd,CAAA,CACW;;EACG,CAAA;CACN,CAAA;AAE9B;AAEA,IAAa,gBAAgB,EAAE,WAAW,UAAU,GAAG,YAA0C;CAC/F,OACE,qBAAC,SAAkB,MAAnB;EAAwB,aAAU;EAAgB,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,SAAS;EAAG,GAAI;EAAjH,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAAU;EAAe,CAAA,GACzC,oBAAC,SAAkB,eAAnB;GAAiC,aAAU;GAA0B,WAAW;GAC9E,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACF,CAAA,CACX;;AAE5B;AAEA,IAAa,iBAAiB,EAAE,WAAW,UAAU,GAAG,YAA2C;CACjG,OACE,oBAAC,SAAkB,OAAnB;EACE,aAAU;EAIV,WAAW,GAAG,6DAA6D,SAAS;EACpF,GAAI;EAEH,UAAA,YAAY;CACU,CAAA;AAE7B"}

package/dist/ui/src/components/ui/command/command.js

@@ -0,0 +1,118 @@
+"use client";
+import { cn } from "../../../lib/utils.js";
+import { ScrollArea } from "../scroll-area/scroll-area.js";
+import { popupItemClass } from "../../../lib/popup-list.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog/dialog.js";
+import { InputGroup, InputGroupAddon } from "../input-group/input-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconSearch } from "@tabler/icons-react";
+import { Command } from "cmdk";
+//#region ../ui/src/components/ui/command/command.tsx
+var Command$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command, {
+		"data-slot": "command",
+		className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className),
+		...props
+	});
+};
+var CommandDialog = ({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) => {
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...props,
+		children: [/* @__PURE__ */ jsxs(DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+		}), /* @__PURE__ */ jsx(DialogContent, {
+			className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className),
+			showCloseButton,
+			children
+		})]
+	});
+};
+var CommandInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-input-wrapper",
+		className: "border-b border-border p-1",
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			className: "h-8 border-transparent bg-transparent shadow-none *:data-[slot=input-group-addon]:pl-2 dark:bg-transparent",
+			children: [/* @__PURE__ */ jsx(Command.Input, {
+				"data-slot": "command-input",
+				className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+				...props
+			}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(IconSearch, { className: "size-4 shrink-0 opacity-50" }) })]
+		})
+	});
+};
+/**
+* The palette's results list. The scroll container is the DS ScrollArea rather
+* than the primitive's own `overflow-y-auto`, because a list of results that
+* continues past the fold with no bar and no fade reads as a complete list. The
+* cap stays overridable: `cn` lets a caller's own `max-h-*` replace the default.
+*
+* The ScrollArea wraps the list from OUTSIDE rather than lining it: cmdk's list
+* carries `role="listbox"`, and a listbox may not contain presentation wrappers
+* (axe flags that as a critical aria-required-children violation). The options
+* have to stay direct children of the element that holds the role.
+*
+* cmdk keeps the active item in view with `scrollIntoView({ block: 'nearest' })`
+* on the item, which acts on the nearest scrollable ancestor, so that keeps
+* working now that the viewport is the one that scrolls. `scroll-py-1` goes on
+* the viewport for the same reason: it is what pads that scroll.
+*/
+var CommandList = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		type: "always",
+		fade: true,
+		fadeFrom: "popover",
+		className: cn("max-h-72", className),
+		viewPortClassName: "scroll-py-1",
+		children: /* @__PURE__ */ jsx(Command.List, {
+			"data-slot": "command-list",
+			className: "outline-none",
+			...props,
+			children
+		})
+	});
+};
+var CommandEmpty = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Empty, {
+		"data-slot": "command-empty",
+		className: cn("py-6 text-center text-sm", className),
+		...props
+	});
+};
+var CommandGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Group, {
+		"data-slot": "command-group",
+		className: cn("overflow-hidden p-1 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
+	});
+};
+var CommandSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Command.Separator, {
+		"data-slot": "command-separator",
+		className: cn("-mx-1 h-px bg-border", className),
+		...props
+	});
+};
+var CommandItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Command.Item, {
+		"data-slot": "command-item",
+		className: cn("group/command-item", popupItemClass("cmdk"), className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(IconCheck, {
+			"data-slot": "command-item-indicator",
+			className: "ml-auto size-4 shrink-0 opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+		})]
+	});
+};
+var CommandShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className),
+		...props
+	});
+};
+//#endregion
+export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+
+//# sourceMappingURL=command.js.map

package/dist/ui/src/components/ui/command/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","names":[],"sources":["../../../../../../../ui/src/components/ui/command/command.tsx"],"sourcesContent":["'use client';\n\nimport { popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconSearch } from '@tabler/icons-react';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport type * as React from 'react';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../dialog';\nimport { InputGroup, InputGroupAddon } from '../input-group';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Command = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) => {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn('flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const CommandDialog = ({\n  title = 'Command Palette',\n  description = 'Search for a command to run...',\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n  children: React.ReactNode;\n}) => {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent className={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)} showCloseButton={showCloseButton}>\n        {children}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport const CommandInput = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) => {\n  return (\n    // Borderless, with a hairline under it: a grey block around the search field\n    // reads as a second surface inside the popup, and the caret already says\n    // where typing goes.\n    <div data-slot=\"command-input-wrapper\" className=\"border-b border-border p-1\">\n      <InputGroup className=\"h-8 border-transparent bg-transparent shadow-none *:data-[slot=input-group-addon]:pl-2 dark:bg-transparent\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className)}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconSearch className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n\n/**\n * The palette's results list. The scroll container is the DS ScrollArea rather\n * than the primitive's own `overflow-y-auto`, because a list of results that\n * continues past the fold with no bar and no fade reads as a complete list. The\n * cap stays overridable: `cn` lets a caller's own `max-h-*` replace the default.\n *\n * The ScrollArea wraps the list from OUTSIDE rather than lining it: cmdk's list\n * carries `role=\"listbox\"`, and a listbox may not contain presentation wrappers\n * (axe flags that as a critical aria-required-children violation). The options\n * have to stay direct children of the element that holds the role.\n *\n * cmdk keeps the active item in view with `scrollIntoView({ block: 'nearest' })`\n * on the item, which acts on the nearest scrollable ancestor, so that keeps\n * working now that the viewport is the one that scrolls. `scroll-py-1` goes on\n * the viewport for the same reason: it is what pads that scroll.\n */\nexport const CommandList = ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) => {\n  return (\n    <ScrollArea type=\"always\" fade fadeFrom=\"popover\" className={cn('max-h-72', className)} viewPortClassName=\"scroll-py-1\">\n      <CommandPrimitive.List data-slot=\"command-list\" className=\"outline-none\" {...props}>\n        {children}\n      </CommandPrimitive.List>\n    </ScrollArea>\n  );\n};\n\nexport const CommandEmpty = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) => {\n  return <CommandPrimitive.Empty data-slot=\"command-empty\" className={cn('py-6 text-center text-sm', className)} {...props} />;\n};\n\nexport const CommandGroup = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) => {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden p-1 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',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const CommandSeparator = ({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) => {\n  return <CommandPrimitive.Separator data-slot=\"command-separator\" className={cn('-mx-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const CommandItem = ({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) => {\n  return (\n    <CommandPrimitive.Item data-slot=\"command-item\" className={cn('group/command-item', popupItemClass('cmdk'), className)} {...props}>\n      {children}\n      {/* The check keeps the end of the item whether it is shown or not, except\n          where a shortcut has it, so the list does not shift as the choice moves. */}\n      <IconCheck\n        data-slot=\"command-item-indicator\"\n        className=\"ml-auto size-4 shrink-0 opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  );\n};\n\nexport const CommandShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAa,aAAW,EAAE,WAAW,GAAG,YAA2D;CACjG,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8FAA8F,SAAS;EACrH,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAC5B,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,kBAAkB,OAClB,GAAG,YAOC;CACJ,OACE,qBAAC,QAAD;EAAQ,GAAI;EAAZ,UAAA,CACE,qBAAC,cAAD;GAAc,WAAU;GAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;EACd,CAAA,GAAA,oBAAC,eAAD;GAAe,WAAW,GAAG,yDAAyD,SAAS;GAAoB;GAChH;EACY,CAAA,CACT;;AAEZ;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OAIE,oBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAC/C,UAAA,qBAAC,YAAD;GAAY,WAAU;GAAtB,UAAA,CACE,oBAAC,QAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GAAG,iFAAiF,SAAS;IACxG,GAAI;GACL,CAAA,GACD,oBAAC,iBAAD,EAAA,UACE,oBAAC,YAAD,EAAY,WAAU,6BAA8B,CAAA,EACrC,CAAA,CACP;;CACT,CAAA;AAET;;;;;;;;;;;;;;;;;AAkBA,IAAa,eAAe,EAAE,WAAW,UAAU,GAAG,YAAgE;CACpH,OACE,oBAAC,YAAD;EAAY,MAAK;EAAS,MAAA;EAAK,UAAS;EAAU,WAAW,GAAG,YAAY,SAAS;EAAG,mBAAkB;EACxG,UAAA,oBAAC,QAAiB,MAAlB;GAAuB,aAAU;GAAe,WAAU;GAAe,GAAI;GAC1E;EACoB,CAAA;CACb,CAAA;AAEhB;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OAAO,oBAAC,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7H;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAiE;CAC5G,OACE,oBAAC,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,+NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAqE;CACpH,OAAO,oBAAC,QAAiB,WAAlB;EAA4B,aAAU;EAAoB,WAAW,GAAG,wBAAwB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjI;AAEA,IAAa,eAAe,EAAE,WAAW,UAAU,GAAG,YAAgE;CACpH,OACE,qBAAC,QAAiB,MAAlB;EAAuB,aAAU;EAAe,WAAW,GAAG,sBAAsB,eAAe,MAAM,GAAG,SAAS;EAAG,GAAI;EAA5H,UAAA,CACG,UAGD,oBAAC,WAAD;GACE,aAAU;GACV,WAAU;EACX,CAAA,CACoB;;AAE3B;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAA0C;CACxF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,0GAA0G,SAAS;EACjI,GAAI;CACL,CAAA;AAEL"}