velloo 0.0.0 → 0.2.0

package/pkgs/shadcn-snapshot/src/components/ui/chart-option.ts

@@ -0,0 +1,250 @@
+// echarts → SVG string for the design-mode Chart preview.
+//
+// Why echarts (and not recharts): the renderer SSRs components with
+// `renderToString` — static HTML, no client JS to hydrate or measure. A
+// measurement-based lib (recharts' ResponsiveContainer) renders an empty
+// shell under SSR; echarts' headless SSR mode produces a complete SVG
+// synchronously from one declarative options object, across every chart type.
+//
+// Colors are CSS variables (`var(--color-*)`) — the same tokens themeToCss
+// emits — so the SVG theme-flips under `.dark` with no re-render (Chromium
+// resolves var() in SVG presentation attributes). The tree-shakeable `core`
+// API keeps only the chart types we register.
+import { BarChart, LineChart, PieChart, ScatterChart } from "echarts/charts";
+import { GridComponent, LegendComponent } from "echarts/components";
+import type { EChartsCoreOption } from "echarts/core";
+import * as echarts from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
+
+echarts.use([
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  GridComponent,
+  LegendComponent,
+  SVGRenderer,
+]);
+
+export type ChartKind = "bar" | "line" | "area" | "pie" | "scatter";
+export type ChartColor = "primary" | "accent" | "muted";
+export type TickFormat = "number" | "compact" | "currency" | "percent";
+
+export interface ChartSpec {
+  kind?: ChartKind | undefined;
+  /** Single-series convenience: a list of `{ x label, y value }` points. */
+  data?: { x: string | number; y: number }[] | undefined;
+  /** Multi-series: shared categories + named series. Takes precedence over `data`. */
+  categories?: (string | number)[] | undefined;
+  series?: { name?: string | undefined; data: number[] }[] | undefined;
+  /** Axis titles. */
+  xLabel?: string | undefined;
+  yLabel?: string | undefined;
+  /** Y-axis tick formatting. */
+  tickFormat?: TickFormat | undefined;
+  /** Accent for single-series charts; multi-series cycles a fixed palette. */
+  color?: ChartColor | undefined;
+  /** Force the legend on/off; defaults on for multi-series, off otherwise. */
+  legend?: boolean | undefined;
+  /** Stack multiple bar/area series into cumulative totals; default off. */
+  stacked?: boolean | undefined;
+  /** Show axes, tick labels, and gridlines; set false for sparkline mode. */
+  axes?: boolean | undefined;
+}
+
+const AXIS = "var(--color-muted-foreground)";
+const GRID = "var(--color-border)";
+const SINGLE: Record<ChartColor, string> = {
+  primary: "var(--color-primary)",
+  accent: "var(--color-accent)",
+  muted: "var(--color-muted-foreground)",
+};
+// Distinct, theme-flipping hues for multi-series — all tokens themeToCss emits.
+// Deliberately excludes destructive: an error hue must never be auto-assigned
+// to ordinary data (a 3-series chart would paint one series alarm-red).
+const PALETTE = [
+  "var(--color-primary)",
+  "var(--color-accent)",
+  "var(--color-secondary)",
+  "var(--color-muted-foreground)",
+  "var(--color-foreground)",
+];
+
+const FORMATTERS: Record<TickFormat, ((v: number) => string) | undefined> = {
+  number: undefined,
+  compact: (v) => new Intl.NumberFormat("en", { notation: "compact" }).format(v),
+  currency: (v) =>
+    new Intl.NumberFormat("en", {
+      style: "currency",
+      currency: "USD",
+      notation: "compact",
+    }).format(v),
+  percent: (v) => `${v}%`,
+};
+
+function normalize(spec: ChartSpec): {
+  categories: (string | number)[];
+  series: { name?: string | undefined; data: number[] }[];
+} {
+  if (spec.series && spec.series.length > 0) {
+    const first = spec.series[0];
+    const categories = spec.categories ?? (first ? first.data.map((_, i) => i + 1) : []);
+    return { categories, series: spec.series };
+  }
+  const data = spec.data ?? [];
+  return { categories: data.map((d) => d.x), series: [{ data: data.map((d) => d.y) }] };
+}
+
+export function buildChartOption(spec: ChartSpec): EChartsCoreOption {
+  const kind = spec.kind ?? "bar";
+  const { categories, series } = normalize(spec);
+  const multi = series.length > 1;
+  const showLegend = spec.legend ?? multi;
+  const showAxes = spec.axes ?? true;
+  const stacked = (spec.stacked ?? false) && multi && (kind === "bar" || kind === "area");
+  const formatter = spec.tickFormat ? FORMATTERS[spec.tickFormat] : undefined;
+
+  const base: Record<string, unknown> = {
+    animation: false,
+    color: PALETTE,
+    ...(showLegend
+      ? {
+          legend: {
+            top: 0,
+            icon: "roundRect",
+            itemHeight: 8,
+            itemWidth: 8,
+            textStyle: { color: AXIS, fontSize: 10 },
+          },
+        }
+      : {}),
+  };
+
+  if (kind === "pie") {
+    const points = spec.data ?? categories.map((c, i) => ({ x: c, y: series[0]?.data[i] ?? 0 }));
+    return {
+      ...base,
+      series: [
+        {
+          type: "pie",
+          radius: ["40%", "70%"],
+          data: points.map((p) => ({ name: String(p.x), value: p.y })),
+          label: { color: AXIS, fontSize: 10 },
+          itemStyle: { borderColor: "var(--color-background)", borderWidth: 2 },
+        },
+      ],
+    } as EChartsCoreOption;
+  }
+
+  const isScatter = kind === "scatter";
+  const cartesianSeries = series.map((s, i) => {
+    const tint = multi ? PALETTE[i % PALETTE.length] : SINGLE[spec.color ?? "primary"];
+    if (kind === "line" || kind === "area") {
+      return {
+        type: "line",
+        name: s.name,
+        data: s.data,
+        smooth: true,
+        showSymbol: false,
+        lineStyle: { color: tint, width: 2 },
+        itemStyle: { color: tint },
+        ...(kind === "area" ? { areaStyle: { color: tint, opacity: 0.18 } } : {}),
+        ...(stacked ? { stack: "total" } : {}),
+      };
+    }
+    if (isScatter) {
+      return {
+        type: "scatter",
+        name: s.name,
+        symbolSize: 8,
+        itemStyle: { color: tint },
+        data: s.data.map((y, j) => [categories[j] ?? j, y]),
+      };
+    }
+    return {
+      type: "bar",
+      name: s.name,
+      data: s.data,
+      // No rounded tops when stacked — every segment would get one, notching the seams.
+      itemStyle: { color: tint, ...(stacked ? {} : { borderRadius: [3, 3, 0, 0] }) },
+      ...(stacked ? { stack: "total" } : {}),
+    };
+  });
+
+  return {
+    ...base,
+    grid: showAxes
+      ? {
+          left: spec.yLabel ? 52 : 44,
+          right: 14,
+          top: showLegend ? 30 : 16,
+          bottom: spec.xLabel ? 38 : 24,
+        }
+      : // Sparkline mode: marks fill the box edge-to-edge.
+        { left: 2, right: 2, top: showLegend ? 30 : 2, bottom: 2 },
+    xAxis: {
+      type: isScatter ? "value" : "category",
+      ...(isScatter ? {} : { data: categories }),
+      ...(showAxes
+        ? {
+            ...(spec.xLabel ? { name: spec.xLabel, nameLocation: "middle", nameGap: 22 } : {}),
+            nameTextStyle: { color: AXIS, fontSize: 10 },
+            axisLabel: { color: AXIS, fontSize: 10 },
+            axisLine: { lineStyle: { color: GRID } },
+            axisTick: { show: false },
+          }
+        : { show: false }),
+    },
+    yAxis: {
+      type: "value",
+      ...(showAxes
+        ? {
+            ...(spec.yLabel ? { name: spec.yLabel } : {}),
+            nameTextStyle: { color: AXIS, fontSize: 10 },
+            axisLabel: { color: AXIS, fontSize: 10, ...(formatter ? { formatter } : {}) },
+            splitLine: { lineStyle: { color: GRID, opacity: 0.5 } },
+          }
+        : // `show: false` alone leaves gridlines on — splitLine needs its own off switch.
+          { show: false, splitLine: { show: false } }),
+    },
+    series: cartesianSeries,
+  } as EChartsCoreOption;
+}
+
+const DEFAULT_W = 480;
+const DEFAULT_H = 270;
+const MIN_ASPECT = 0.25;
+const MAX_ASPECT = 20;
+
+/**
+ * Render size for a width÷height `aspect` ratio, clamped to 0.25–20 so a bad
+ * value can't produce a degenerate SVG. No aspect keeps the 16:9 default.
+ */
+export function chartSize(aspect?: number): { width: number; height: number } {
+  if (aspect === undefined || !Number.isFinite(aspect)) {
+    return { width: DEFAULT_W, height: DEFAULT_H };
+  }
+  const clamped = Math.min(MAX_ASPECT, Math.max(MIN_ASPECT, aspect));
+  return { width: DEFAULT_W, height: Math.round(DEFAULT_W / clamped) };
+}
+
+/** Render a chart spec to a self-contained, responsive SVG string. */
+export function renderChartSvg(
+  spec: ChartSpec,
+  size?: { width?: number; height?: number },
+): string {
+  const chart = echarts.init(null, null, {
+    renderer: "svg",
+    ssr: true,
+    width: size?.width ?? DEFAULT_W,
+    height: size?.height ?? DEFAULT_H,
+  });
+  chart.setOption(buildChartOption(spec));
+  const svg = chart.renderToSVGString();
+  chart.dispose();
+  // Drop the fixed pixel size so the SVG scales to its container (viewBox kept).
+  return svg.replace(
+    /<svg([^>]*?)\swidth="\d+"\sheight="\d+"/,
+    '<svg$1 width="100%" height="100%" preserveAspectRatio="xMidYMid meet"',
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/chart.tsx

@@ -0,0 +1,177 @@
+// Velloo-flavored Chart. shadcn's `chart` is a recharts wrapper that needs a
+// measured DOM (ResponsiveContainer), so it renders nothing under the
+// renderer's static SSR. We render a realistic preview server-side via
+// echarts' headless SSR-to-SVG mode (see chart-option.ts) — bar/line/area/
+// pie/scatter, multi-series, axis labels + tick formatting — from one
+// normalized schema. Colors are theme tokens, so previews theme-flip.
+//
+// This built-in `Chart` always previews via echarts, and `emit_code` emits it
+// as a `Chart` component (the preview engine — NOT the app's chart lib). To
+// get the app's *own* chart (its exact recharts) — pixel-faithful in the
+// canvas AND emitted as a real import — register that component as a
+// `render:"live"` extension instead (live islands):
+// extensions emit a real `import` from their declared `importPath`.
+import type * as React from "react";
+import { cn } from "../../lib/utils.ts";
+import { chartSize, renderChartSvg } from "./chart-option.ts";
+
+export type { ChartColor, ChartKind, ChartSpec, TickFormat } from "./chart-option.ts";
+
+export interface ChartContainerProps extends React.ComponentProps<"div"> {
+  config?: Record<string, { label?: string; color?: string }>;
+}
+
+export function ChartContainer({
+  className,
+  config: _config,
+  children,
+  ...props
+}: ChartContainerProps) {
+  return (
+    <div
+      data-slot="chart-container"
+      className={cn(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Declared inline (not `extends ChartSpec`) so build.ts's manifest extraction
+// — which reads an interface's *own* members — surfaces every prop to agents.
+export interface ChartProps {
+  className?: string;
+  kind?: "bar" | "line" | "area" | "pie" | "scatter";
+  /** Single-series convenience: a list of `{ x label, y value }` points. */
+  data?: { x: string | number; y: number }[];
+  /** Multi-series: shared categories + named series. Takes precedence over `data`. */
+  categories?: (string | number)[];
+  series?: { name?: string; data: number[] }[];
+  /** Axis titles. */
+  xLabel?: string;
+  yLabel?: string;
+  /** Y-axis tick formatting. */
+  tickFormat?: "number" | "compact" | "currency" | "percent";
+  /** Accent for single-series charts; multi-series cycles a fixed palette. */
+  color?: "primary" | "accent" | "muted";
+  /** Force the legend on/off; defaults on for multi-series, off otherwise. */
+  legend?: boolean;
+  /** Stack multiple bar/area series into cumulative totals; default off. */
+  stacked?: boolean;
+  /** Width÷height ratio, e.g. 4 for a wide sparkline or 1 for square; defaults to 16:9. */
+  aspect?: number;
+  /** Show axes, tick labels, and gridlines; set false for sparkline mode. */
+  axes?: boolean;
+}
+
+/**
+ * Dashboard-grade chart preview. Renders server-side via echarts SSR→SVG
+ * (chart-option.ts) so it shows real geometry + axes in the static render
+ * path, and the SVG is injected as-is (no scripts/foreignObject). Empty
+ * `data`/`series` degrades to a sized blank slot.
+ */
+export function Chart({
+  className,
+  style,
+  kind,
+  data,
+  series,
+  categories,
+  xLabel,
+  yLabel,
+  tickFormat,
+  color,
+  legend,
+  stacked,
+  aspect,
+  axes,
+  ...rest
+}: ChartProps & React.ComponentProps<"div">) {
+  const size = chartSize(aspect);
+  // Derive the box ratio from the clamped render size so the container and
+  // the SVG geometry always agree; inline style beats the aspect-video class.
+  const boxStyle =
+    aspect === undefined ? style : { aspectRatio: size.width / size.height, ...style };
+  const hasData =
+    (Array.isArray(series) && series.length > 0) || (Array.isArray(data) && data.length > 0);
+  if (!hasData) {
+    return (
+      <div
+        data-slot="chart"
+        className={cn("aspect-video w-full", className)}
+        style={boxStyle}
+        {...rest}
+      />
+    );
+  }
+  const svg = renderChartSvg(
+    {
+      kind,
+      data,
+      series,
+      categories,
+      xLabel,
+      yLabel,
+      tickFormat,
+      color,
+      legend,
+      stacked,
+      axes,
+    },
+    size,
+  );
+  return (
+    <div
+      data-slot="chart"
+      className={cn("aspect-video w-full", className)}
+      style={boxStyle}
+      {...rest}
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: server-generated static echarts SVG (no scripts/foreignObject); see chart-option.ts
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}
+
+export function ChartLegend({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="chart-legend"
+      className={cn("flex items-center gap-4 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function ChartLegendContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="chart-legend-content"
+      className={cn("flex flex-wrap items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+export function ChartTooltip({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="chart-tooltip"
+      className={cn("rounded-md border bg-popover px-2 py-1 text-xs shadow-md", className)}
+      {...props}
+    />
+  );
+}
+
+export function ChartTooltipContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="chart-tooltip-content"
+      className={cn("flex flex-col gap-1", className)}
+      {...props}
+    />
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/checkbox.tsx

@@ -0,0 +1,41 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/checkbox).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Canvas-safe: a design ships `checked` to show a ticked state, with no handler
+// because nothing on the canvas is interactive. Radix would then hold the box
+// at that value and React would warn about the missing handler, so a handlerless
+// `checked` becomes `defaultChecked`.
+"use client";
+
+import { CheckIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils.ts";
+
+export function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  const { checked, ...rest } = props;
+  const isStaticControlled = checked !== undefined && props.onCheckedChange === undefined;
+  // Drop `checked` by omitting it, not by setting it to undefined: Radix reads
+  // "present but undefined" as a controlled component with no value.
+  const finalProps = isStaticControlled ? { ...rest, defaultChecked: checked } : props;
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed 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 group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        className,
+      )}
+      {...finalProps}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/collapsible.tsx

@@ -0,0 +1,32 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/collapsible).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Canvas-safe: nothing on the canvas is clickable, so a collapsible left at its
+// default would render as an unopenable header. With neither `open` nor
+// `defaultOpen` set, the content starts open so the design is previewable.
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import type * as React from "react";
+
+export function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  const designOpen = props.open === undefined && props.defaultOpen === undefined;
+  return (
+    <CollapsiblePrimitive.Root
+      data-slot="collapsible"
+      {...(designOpen ? { defaultOpen: true } : {})}
+      {...props}
+    />
+  );
+}
+
+export function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
+}
+
+export function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
+}

package/pkgs/shadcn-snapshot/src/components/ui/combobox.tsx

@@ -0,0 +1,196 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/combobox).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+//
+// Canvas-safe: see ../canvas-portal.tsx. Upstream's Combobox is the one shadcn
+// component built on Base UI rather than Radix, and all of it — filtering, the
+// highlighted item, the anchored popup — is runtime behaviour that a static
+// render has nothing to show for. Rendering the family as plain elements keeps
+// a second component library out of the dependency tree for a component whose
+// design surface is just "an input with a list under it". `emit_code` still
+// emits `Combobox`, so the app gets the real Base UI one from its own
+// components/ui/combobox.
+//
+// Sizing classes that read Base UI's anchor vars (`--anchor-width`,
+// `--available-height`) are dropped; nothing sets them without the positioner.
+"use client";
+
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "../../lib/utils.ts";
+import { inlineOpenAttrs } from "../canvas-portal.tsx";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.tsx";
+
+export function Combobox({ ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="combobox" {...props} />;
+}
+
+export function ComboboxValue({ ...props }: React.ComponentProps<"span">) {
+  return <span data-slot="combobox-value" {...props} />;
+}
+
+export function ComboboxTrigger({ className, children, ...props }: React.ComponentProps<"button">) {
+  return (
+    <button
+      type="button"
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </button>
+  );
+}
+
+export function ComboboxClear({ className, ...props }: React.ComponentProps<"button">) {
+  return (
+    <InputGroupButton
+      data-slot="combobox-clear"
+      variant="ghost"
+      size="icon-xs"
+      className={className}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </InputGroupButton>
+  );
+}
+
+export function ComboboxInput({
+  className,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: React.ComponentProps<"input"> & { showTrigger?: boolean; showClear?: boolean }) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <InputGroupInput disabled={disabled} {...props} />
+      <InputGroupAddon align="inline-end">
+        {showClear ? <ComboboxClear disabled={disabled} /> : null}
+        {showTrigger ? (
+          <InputGroupButton size="icon-xs" variant="ghost" disabled={disabled}>
+            <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+          </InputGroupButton>
+        ) : null}
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}
+
+export function ComboboxContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="combobox-content"
+      {...inlineOpenAttrs()}
+      className={cn(
+        "cn-menu-target cn-menu-translucent group/combobox-content relative overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxList({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxItem({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxGroup({ ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="combobox-group" {...props} />;
+}
+
+export function ComboboxLabel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxCollection({ children }: React.ComponentProps<"div">) {
+  return <>{children}</>;
+}
+
+export function ComboboxEmpty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxSeparator({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxChips({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxChip({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxChipsInput({ className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}