@lfrprazeres/ui 0.1.0 → 0.3.0

package/dist/charts/types.d.ts

@@ -0,0 +1,35 @@
+//#region src/charts/types.d.ts
+/** Shared prop shapes for the chart layer. */
+interface ChartSlice {
+  /** Overrides this slice's position in the chart ramp. */
+  color?: string;
+  /** Display text, when it differs from the identity. */
+  label?: string;
+  /** Stable identity, and the default display text. */
+  name: string;
+  value: number;
+}
+/** One plotted series in a cartesian chart, keyed into each row. */
+interface ChartSeries {
+  color?: string;
+  key: string;
+  label?: string;
+}
+type ChartRow = Record<string, number | string | null | undefined>;
+/** Every chart takes these. `label` is required on purpose. */
+interface ChartBaseProps {
+  className?: string;
+  /** Message shown instead of the chart when there is nothing to draw. */
+  emptyLabel?: string;
+  /** Formats values in the tooltip, legend and data table. */
+  formatValue?: (value: number) => string;
+  /**
+   * Accessible name for the chart. Required because a chart with no name is
+   * announced as "image" and nothing else.
+   */
+  label: string;
+  legend?: boolean;
+}
+//#endregion
+export { ChartBaseProps, ChartRow, ChartSeries, ChartSlice };
+//# sourceMappingURL=types.d.ts.map

package/dist/charts/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/charts/types.ts"],"mappings":";;UAEiB;;EAEf;;EAEA;;EAEA;EACA;;;UAIe;EACf;EACA;EACA;;KAGU,WAAW;;UAGN;EACf;;EAEA;;EAEA,eAAe;;;;;EAKf;EACA"}

package/dist/charts/use-cartesian-chart.d.ts

@@ -0,0 +1,35 @@
+import { ChartConfig } from "../elements/chart.js";
+import { ChartRow, ChartSeries } from "./types.js";
+//#region src/charts/use-cartesian-chart.d.ts
+interface CartesianChartInput {
+  data: ChartRow[];
+  formatValue?: (value: number) => string;
+  series: ChartSeries[];
+  xKey: string;
+}
+/**
+ * Derives everything the cartesian charts share: the recharts config, the
+ * resolved ramp colours, the legend entries and the rows of the text
+ * alternative.
+ *
+ * The axes and grid are deliberately *not* abstracted into a component.
+ * recharts inspects its direct children by type to work out what to render, so
+ * wrapping `XAxis` and friends in a helper component makes them invisible to
+ * it. They stay inline in each chart on purpose.
+ */
+declare function useCartesianChart({ data, formatValue, series, xKey }: CartesianChartInput): {
+  colors: string[];
+  columns: string[];
+  config: ChartConfig;
+  legendItems: {
+    color: string;
+    label: string;
+  }[];
+  rows: {
+    cells: string[];
+    header: string;
+  }[];
+};
+//#endregion
+export { CartesianChartInput, useCartesianChart };
+//# sourceMappingURL=use-cartesian-chart.d.ts.map

package/dist/charts/use-cartesian-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cartesian-chart.d.ts","names":[],"sources":["../../src/charts/use-cartesian-chart.ts"],"mappings":";;;UAOiB;EACf,MAAM;EACN,eAAe;EACf,QAAQ;EACR;;;;;;;;;;;;iBAac,oBACd,MACA,aACA,QACA,QACC"}

package/dist/charts/use-cartesian-chart.js

@@ -0,0 +1,48 @@
+"use client";
+import { rampColor } from "./chart-ramp.js";
+import { useMemo } from "react";
+//#region src/charts/use-cartesian-chart.ts
+/**
+* Derives everything the cartesian charts share: the recharts config, the
+* resolved ramp colours, the legend entries and the rows of the text
+* alternative.
+*
+* The axes and grid are deliberately *not* abstracted into a component.
+* recharts inspects its direct children by type to work out what to render, so
+* wrapping `XAxis` and friends in a helper component makes them invisible to
+* it. They stay inline in each chart on purpose.
+*/
+function useCartesianChart({ data, formatValue, series, xKey }) {
+	const format = useMemo(() => formatValue ?? ((value) => value.toLocaleString()), [formatValue]);
+	const colors = useMemo(() => series.map((entry, index) => rampColor(index, entry.color)), [series]);
+	const config = useMemo(() => Object.fromEntries(series.map((entry, index) => [entry.key, {
+		color: rampColor(index, entry.color),
+		label: entry.label ?? entry.key
+	}])), [series]);
+	const legendItems = useMemo(() => series.map((entry, index) => ({
+		color: rampColor(index, entry.color),
+		label: entry.label ?? entry.key
+	})), [series]);
+	return {
+		colors,
+		columns: useMemo(() => [xKey, ...series.map((entry) => entry.label ?? entry.key)], [series, xKey]),
+		config,
+		legendItems,
+		rows: useMemo(() => data.map((row) => ({
+			cells: series.map((entry) => {
+				const value = row[entry.key];
+				return typeof value === "number" ? format(value) : String(value ?? "");
+			}),
+			header: String(row[xKey] ?? "")
+		})), [
+			data,
+			format,
+			series,
+			xKey
+		])
+	};
+}
+//#endregion
+export { useCartesianChart };
+
+//# sourceMappingURL=use-cartesian-chart.js.map

package/dist/charts/use-cartesian-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cartesian-chart.js","names":[],"sources":["../../src/charts/use-cartesian-chart.ts"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport { rampColor } from \"@/charts/chart-ramp\";\nimport type { ChartRow, ChartSeries } from \"@/charts/types\";\nimport type { ChartConfig } from \"@/elements/chart\";\n\nexport interface CartesianChartInput {\n  data: ChartRow[];\n  formatValue?: (value: number) => string;\n  series: ChartSeries[];\n  xKey: string;\n}\n\n/**\n * Derives everything the cartesian charts share: the recharts config, the\n * resolved ramp colours, the legend entries and the rows of the text\n * alternative.\n *\n * The axes and grid are deliberately *not* abstracted into a component.\n * recharts inspects its direct children by type to work out what to render, so\n * wrapping `XAxis` and friends in a helper component makes them invisible to\n * it. They stay inline in each chart on purpose.\n */\nexport function useCartesianChart({\n  data,\n  formatValue,\n  series,\n  xKey,\n}: CartesianChartInput) {\n  const format = useMemo(\n    () => formatValue ?? ((value: number) => value.toLocaleString()),\n    [formatValue]\n  );\n\n  const colors = useMemo(\n    () => series.map((entry, index) => rampColor(index, entry.color)),\n    [series]\n  );\n\n  const config = useMemo<ChartConfig>(\n    () =>\n      Object.fromEntries(\n        series.map((entry, index) => [\n          entry.key,\n          {\n            color: rampColor(index, entry.color),\n            label: entry.label ?? entry.key,\n          },\n        ])\n      ),\n    [series]\n  );\n\n  const legendItems = useMemo(\n    () =>\n      series.map((entry, index) => ({\n        color: rampColor(index, entry.color),\n        label: entry.label ?? entry.key,\n      })),\n    [series]\n  );\n\n  const columns = useMemo(\n    () => [xKey, ...series.map((entry) => entry.label ?? entry.key)],\n    [series, xKey]\n  );\n\n  const rows = useMemo(\n    () =>\n      data.map((row) => ({\n        cells: series.map((entry) => {\n          const value = row[entry.key];\n          return typeof value === \"number\"\n            ? format(value)\n            : String(value ?? \"\");\n        }),\n        header: String(row[xKey] ?? \"\"),\n      })),\n    [data, format, series, xKey]\n  );\n\n  return { colors, columns, config, legendItems, rows };\n}\n"],"mappings":";;;;;;;;;;;;;;AAwBA,SAAgB,kBAAkB,EAChC,MACA,aACA,QACA,QACsB;CACtB,MAAM,SAAS,cACP,iBAAiB,UAAkB,MAAM,eAAe,IAC9D,CAAC,WAAW,CACd;CAEA,MAAM,SAAS,cACP,OAAO,KAAK,OAAO,UAAU,UAAU,OAAO,MAAM,KAAK,CAAC,GAChE,CAAC,MAAM,CACT;CAEA,MAAM,SAAS,cAEX,OAAO,YACL,OAAO,KAAK,OAAO,UAAU,CAC3B,MAAM,KACN;EACE,OAAO,UAAU,OAAO,MAAM,KAAK;EACnC,OAAO,MAAM,SAAS,MAAM;CAC9B,CACF,CAAC,CACH,GACF,CAAC,MAAM,CACT;CAEA,MAAM,cAAc,cAEhB,OAAO,KAAK,OAAO,WAAW;EAC5B,OAAO,UAAU,OAAO,MAAM,KAAK;EACnC,OAAO,MAAM,SAAS,MAAM;CAC9B,EAAE,GACJ,CAAC,MAAM,CACT;CAqBA,OAAO;EAAE;EAAQ,SAnBD,cACR,CAAC,MAAM,GAAG,OAAO,KAAK,UAAU,MAAM,SAAS,MAAM,GAAG,CAAC,GAC/D,CAAC,QAAQ,IAAI,CAiBQ;EAAG;EAAQ;EAAa,MAdlC,cAET,KAAK,KAAK,SAAS;GACjB,OAAO,OAAO,KAAK,UAAU;IAC3B,MAAM,QAAQ,IAAI,MAAM;IACxB,OAAO,OAAO,UAAU,WACpB,OAAO,KAAK,IACZ,OAAO,SAAS,EAAE;GACxB,CAAC;GACD,QAAQ,OAAO,IAAI,SAAS,EAAE;EAChC,EAAE,GACJ;GAAC;GAAM;GAAQ;GAAQ;EAAI,CAGqB;CAAE;AACtD"}

package/dist/components/chip.d.ts

@@ -5,12 +5,15 @@ declare const chipVariants: (props?: ({
   size?: "default" | "sm" | null | undefined;
   variant?: "default" | "accent" | "muted" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type ChipProps = ComponentProps<"span"> & VariantProps<typeof chipVariants> & {
+type ChipOwnProps = VariantProps<typeof chipVariants> & {
   icon?: ReactNode;
-  /** Renders as an anchor when set, keeping the same visual treatment. */
-  href?: string;
 };
-declare function Chip({ className, variant, size, icon, href, children, ...props }: ChipProps): import("react").JSX.Element;
+type ChipProps = ChipOwnProps & (({
+  href: string;
+} & Omit<ComponentProps<"a">, "href">) | ({
+  href?: never;
+} & ComponentProps<"span">));
+declare function Chip({ className, variant, size, icon, children, ...rest }: ChipProps): import("react").JSX.Element;
 //#endregion
 export { Chip, ChipProps, chipVariants };
 //# sourceMappingURL=chip.d.ts.map

package/dist/components/chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","names":[],"sources":["../../src/components/chip.tsx"],"mappings":";;;cAIM,eAAY;;;6CAoBjB;KAEW,YAAY,yBACtB,oBAAoB;EAClB,OAAO;;EAEP;;iBAGY,OACd,WACA,SACA,MACA,MACA,MACA,aACG,SACF,4BAAS,IAAA"}
+{"version":3,"file":"chip.d.ts","names":[],"sources":["../../src/components/chip.tsx"],"mappings":";;;cAIM,eAAY;;;6CAoBjB;KAEI,eAAe,oBAAoB;EACtC,OAAO;;KAQG,YAAY;EAEf;IAAiB,KAAK;EACtB;IAAiB;iBAGV,OACd,WACA,SACA,MACA,MACA,aACG,QACF,4BAAS,IAAA"}

package/dist/components/chip.js

@@ -20,26 +20,30 @@ const chipVariants = cva("inline-flex max-w-full items-center gap-1.5 rounded-fu
 		}
 	}
 });
-function Chip({ className, variant, size, icon, href, children, ...props }) {
+function Chip({ className, variant, size, icon, children, ...rest }) {
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsx("span", {
 		className: "truncate",
 		children
 	})] });
-	if (href) return /* @__PURE__ */ jsx("a", {
-		className: cn(chipVariants({
-			size,
-			variant
-		}), "hover:bg-accent hover:text-accent-foreground", className),
-		href,
-		...props,
-		children: content
-	});
+	if (rest.href !== void 0) {
+		const { href, ...anchorProps } = rest;
+		return /* @__PURE__ */ jsx("a", {
+			className: cn(chipVariants({
+				size,
+				variant
+			}), "hover:bg-accent hover:text-accent-foreground", className),
+			href,
+			...anchorProps,
+			children: content
+		});
+	}
+	const { href: _omitted, ...spanProps } = rest;
 	return /* @__PURE__ */ jsx("span", {
 		className: cn(chipVariants({
 			size,
 			variant
 		}), className),
-		...props,
+		...spanProps,
 		children: content
 	});
 }

package/dist/components/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","names":[],"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nconst chipVariants = cva(\n  \"inline-flex max-w-full items-center gap-1.5 rounded-full border font-medium text-xs transition-colors [&_svg]:size-3 [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"px-2.5 py-1\",\n        sm: \"px-2 py-0.5 text-[11px]\",\n      },\n      variant: {\n        accent: \"border-transparent bg-accent text-accent-foreground\",\n        default: \"border-border bg-card text-card-foreground\",\n        muted: \"border-transparent bg-muted text-muted-foreground\",\n        outline: \"border-border bg-transparent text-foreground\",\n      },\n    },\n  }\n);\n\nexport type ChipProps = ComponentProps<\"span\"> &\n  VariantProps<typeof chipVariants> & {\n    icon?: ReactNode;\n    /** Renders as an anchor when set, keeping the same visual treatment. */\n    href?: string;\n  };\n\nexport function Chip({\n  className,\n  variant,\n  size,\n  icon,\n  href,\n  children,\n  ...props\n}: ChipProps) {\n  const content = (\n    <>\n      {icon}\n      <span className=\"truncate\">{children}</span>\n    </>\n  );\n\n  if (href) {\n    return (\n      <a\n        className={cn(\n          chipVariants({ size, variant }),\n          \"hover:bg-accent hover:text-accent-foreground\",\n          className\n        )}\n        href={href}\n        {...(props as ComponentProps<\"a\">)}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  return (\n    <span className={cn(chipVariants({ size, variant }), className)} {...props}>\n      {content}\n    </span>\n  );\n}\n\nexport { chipVariants };\n"],"mappings":";;;;AAIA,MAAM,eAAe,IACnB,yIACA;CACE,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,SAAS;GACT,IAAI;EACN;EACA,SAAS;GACP,QAAQ;GACR,SAAS;GACT,OAAO;GACP,SAAS;EACX;CACF;AACF,CACF;AASA,SAAgB,KAAK,EACnB,WACA,SACA,MACA,MACA,MACA,UACA,GAAG,SACS;CACZ,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,MACD,oBAAC,QAAD;EAAM,WAAU;EAAY;CAAe,CAAA,CAC3C,EAAA,CAAA;CAGJ,IAAI,MACF,OACE,oBAAC,KAAD;EACE,WAAW,GACT,aAAa;GAAE;GAAM;EAAQ,CAAC,GAC9B,gDACA,SACF;EACM;EACN,GAAK;EAEJ,UAAA;CACA,CAAA;CAIP,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,aAAa;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;EAClE,UAAA;CACG,CAAA;AAEV"}
+{"version":3,"file":"chip.js","names":[],"sources":["../../src/components/chip.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nconst chipVariants = cva(\n  \"inline-flex max-w-full items-center gap-1.5 rounded-full border font-medium text-xs transition-colors [&_svg]:size-3 [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"px-2.5 py-1\",\n        sm: \"px-2 py-0.5 text-[11px]\",\n      },\n      variant: {\n        accent: \"border-transparent bg-accent text-accent-foreground\",\n        default: \"border-border bg-card text-card-foreground\",\n        muted: \"border-transparent bg-muted text-muted-foreground\",\n        outline: \"border-border bg-transparent text-foreground\",\n      },\n    },\n  }\n);\n\ntype ChipOwnProps = VariantProps<typeof chipVariants> & {\n  icon?: ReactNode;\n};\n\n/*\n * Discriminated on `href`, so the anchor branch accepts anchor attributes such\n * as `target` and `rel`. Typing the whole thing as a span made those a type\n * error on the very element that renders as a link.\n */\nexport type ChipProps = ChipOwnProps &\n  (\n    | ({ href: string } & Omit<ComponentProps<\"a\">, \"href\">)\n    | ({ href?: never } & ComponentProps<\"span\">)\n  );\n\nexport function Chip({\n  className,\n  variant,\n  size,\n  icon,\n  children,\n  ...rest\n}: ChipProps) {\n  const content = (\n    <>\n      {icon}\n      <span className=\"truncate\">{children}</span>\n    </>\n  );\n\n  if (rest.href !== undefined) {\n    const { href, ...anchorProps } = rest;\n    return (\n      <a\n        className={cn(\n          chipVariants({ size, variant }),\n          \"hover:bg-accent hover:text-accent-foreground\",\n          className\n        )}\n        href={href}\n        {...anchorProps}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  const { href: _omitted, ...spanProps } = rest;\n  return (\n    <span\n      className={cn(chipVariants({ size, variant }), className)}\n      {...spanProps}\n    >\n      {content}\n    </span>\n  );\n}\n\nexport { chipVariants };\n"],"mappings":";;;;AAIA,MAAM,eAAe,IACnB,yIACA;CACE,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,SAAS;GACT,IAAI;EACN;EACA,SAAS;GACP,QAAQ;GACR,SAAS;GACT,OAAO;GACP,SAAS;EACX;CACF;AACF,CACF;AAiBA,SAAgB,KAAK,EACnB,WACA,SACA,MACA,MACA,UACA,GAAG,QACS;CACZ,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,MACD,oBAAC,QAAD;EAAM,WAAU;EAAY;CAAe,CAAA,CAC3C,EAAA,CAAA;CAGJ,IAAI,KAAK,SAAS,KAAA,GAAW;EAC3B,MAAM,EAAE,MAAM,GAAG,gBAAgB;EACjC,OACE,oBAAC,KAAD;GACE,WAAW,GACT,aAAa;IAAE;IAAM;GAAQ,CAAC,GAC9B,gDACA,SACF;GACM;GACN,GAAI;GAEH,UAAA;EACA,CAAA;CAEP;CAEA,MAAM,EAAE,MAAM,UAAU,GAAG,cAAc;CACzC,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EACxD,GAAI;EAEH,UAAA;CACG,CAAA;AAEV"}

package/dist/components/file-dropzone.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+//#region src/components/file-dropzone.d.ts
+interface FileDropzoneProps {
+  /** Mirrors the file input's accept attribute, e.g. ".csv,.pdf". */
+  accept?: string;
+  className?: string;
+  disabled?: boolean;
+  /** Secondary line, typically the accepted formats or a size limit. */
+  hint?: ReactNode;
+  icon?: ReactNode;
+  /** Primary line. Swap it for a progress message while work is in flight. */
+  label: ReactNode;
+  multiple?: boolean;
+  onFiles: (files: File[]) => void;
+}
+/**
+ * A drop target that is also a button, so pointer, touch and keyboard all
+ * reach the same file picker. It owns no upload logic: the caller receives the
+ * chosen files and decides what happens next.
+ */
+declare function FileDropzone({ accept, className, disabled, hint, icon, label, multiple, onFiles }: FileDropzoneProps): import("react").JSX.Element;
+//#endregion
+export { FileDropzone, FileDropzoneProps };
+//# sourceMappingURL=file-dropzone.d.ts.map

package/dist/components/file-dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-dropzone.d.ts","names":[],"sources":["../../src/components/file-dropzone.tsx"],"mappings":";;UAWiB;;EAEf;EACA;EACA;;EAEA,OAAO;EACP,OAAO;;EAEP,OAAO;EACP;EACA,UAAU,OAAO;;;;;;;iBAQH,eACd,QACA,WACA,UACA,MACA,MACA,OACA,UACA,WACC,oCAAiB,IAAA"}

package/dist/components/file-dropzone.js

@@ -0,0 +1,70 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { UploadIcon } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+//#region src/components/file-dropzone.tsx
+/**
+* A drop target that is also a button, so pointer, touch and keyboard all
+* reach the same file picker. It owns no upload logic: the caller receives the
+* chosen files and decides what happens next.
+*/
+function FileDropzone({ accept, className, disabled = false, hint, icon, label, multiple = false, onFiles }) {
+	const inputRef = useRef(null);
+	const [dragOver, setDragOver] = useState(false);
+	const emit = useCallback((list) => {
+		if (!list || list.length === 0) return;
+		onFiles(Array.from(list));
+	}, [onFiles]);
+	const handlePick = useCallback((event) => {
+		emit(event.target.files);
+		event.target.value = "";
+	}, [emit]);
+	const handleDrop = useCallback((event) => {
+		event.preventDefault();
+		setDragOver(false);
+		if (!disabled) emit(event.dataTransfer.files);
+	}, [disabled, emit]);
+	const handleDragOver = useCallback((event) => {
+		event.preventDefault();
+		setDragOver(true);
+	}, []);
+	const handleDragLeave = useCallback(() => setDragOver(false), []);
+	const openPicker = useCallback(() => inputRef.current?.click(), []);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		className: cn("flex w-full flex-col items-center justify-center gap-2 rounded-md border-2 border-border border-dashed bg-card px-6 py-8 text-center transition-colors", "hover:border-primary/50 hover:bg-accent/30", "focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/50", "disabled:pointer-events-none disabled:opacity-50", dragOver && "border-primary bg-primary/5", className),
+		disabled,
+		onClick: openPicker,
+		onDragLeave: handleDragLeave,
+		onDragOver: handleDragOver,
+		onDrop: handleDrop,
+		type: "button",
+		children: [
+			icon ?? /* @__PURE__ */ jsx(UploadIcon, {
+				"aria-hidden": "true",
+				className: "size-6 text-muted-foreground"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground text-sm",
+				children: label
+			}),
+			hint ? /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: hint
+			}) : null
+		]
+	}), /* @__PURE__ */ jsx("input", {
+		accept,
+		"aria-hidden": "true",
+		className: "hidden",
+		multiple,
+		onChange: handlePick,
+		ref: inputRef,
+		tabIndex: -1,
+		type: "file"
+	})] });
+}
+//#endregion
+export { FileDropzone };
+
+//# sourceMappingURL=file-dropzone.js.map

package/dist/components/file-dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-dropzone.js","names":[],"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["\"use client\";\n\nimport { UploadIcon } from \"lucide-react\";\nimport type {\n  DragEvent,\n  ChangeEvent as ReactChangeEvent,\n  ReactNode,\n} from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface FileDropzoneProps {\n  /** Mirrors the file input's accept attribute, e.g. \".csv,.pdf\". */\n  accept?: string;\n  className?: string;\n  disabled?: boolean;\n  /** Secondary line, typically the accepted formats or a size limit. */\n  hint?: ReactNode;\n  icon?: ReactNode;\n  /** Primary line. Swap it for a progress message while work is in flight. */\n  label: ReactNode;\n  multiple?: boolean;\n  onFiles: (files: File[]) => void;\n}\n\n/**\n * A drop target that is also a button, so pointer, touch and keyboard all\n * reach the same file picker. It owns no upload logic: the caller receives the\n * chosen files and decides what happens next.\n */\nexport function FileDropzone({\n  accept,\n  className,\n  disabled = false,\n  hint,\n  icon,\n  label,\n  multiple = false,\n  onFiles,\n}: FileDropzoneProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [dragOver, setDragOver] = useState(false);\n\n  const emit = useCallback(\n    (list: FileList | null) => {\n      if (!list || list.length === 0) {\n        return;\n      }\n      onFiles(Array.from(list));\n    },\n    [onFiles]\n  );\n\n  const handlePick = useCallback(\n    (event: ReactChangeEvent<HTMLInputElement>) => {\n      emit(event.target.files);\n      // Re-picking the same file fires no change event unless the value resets.\n      event.target.value = \"\";\n    },\n    [emit]\n  );\n\n  const handleDrop = useCallback(\n    (event: DragEvent<HTMLButtonElement>) => {\n      event.preventDefault();\n      setDragOver(false);\n      if (!disabled) {\n        emit(event.dataTransfer.files);\n      }\n    },\n    [disabled, emit]\n  );\n\n  const handleDragOver = useCallback((event: DragEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    setDragOver(true);\n  }, []);\n\n  const handleDragLeave = useCallback(() => setDragOver(false), []);\n\n  const openPicker = useCallback(() => inputRef.current?.click(), []);\n\n  return (\n    <>\n      <button\n        className={cn(\n          \"flex w-full flex-col items-center justify-center gap-2 rounded-md border-2 border-border border-dashed bg-card px-6 py-8 text-center transition-colors\",\n          \"hover:border-primary/50 hover:bg-accent/30\",\n          \"focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          dragOver && \"border-primary bg-primary/5\",\n          className\n        )}\n        disabled={disabled}\n        onClick={openPicker}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        type=\"button\"\n      >\n        {icon ?? (\n          <UploadIcon\n            aria-hidden=\"true\"\n            className=\"size-6 text-muted-foreground\"\n          />\n        )}\n        <span className=\"font-medium text-foreground text-sm\">{label}</span>\n        {hint ? (\n          <span className=\"text-muted-foreground text-xs\">{hint}</span>\n        ) : null}\n      </button>\n      {/*\n       * The button above is the control users see and operate. This input is\n       * only the mechanism that opens the picker, so it stays out of the\n       * accessibility tree rather than carrying a duplicate label.\n       */}\n      <input\n        accept={accept}\n        aria-hidden=\"true\"\n        className=\"hidden\"\n        multiple={multiple}\n        onChange={handlePick}\n        ref={inputRef}\n        tabIndex={-1}\n        type=\"file\"\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA8BA,SAAgB,aAAa,EAC3B,QACA,WACA,WAAW,OACX,MACA,MACA,OACA,WAAW,OACX,WACoB;CACpB,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,MAAM,OAAO,aACV,SAA0B;EACzB,IAAI,CAAC,QAAQ,KAAK,WAAW,GAC3B;EAEF,QAAQ,MAAM,KAAK,IAAI,CAAC;CAC1B,GACA,CAAC,OAAO,CACV;CAEA,MAAM,aAAa,aAChB,UAA8C;EAC7C,KAAK,MAAM,OAAO,KAAK;EAEvB,MAAM,OAAO,QAAQ;CACvB,GACA,CAAC,IAAI,CACP;CAEA,MAAM,aAAa,aAChB,UAAwC;EACvC,MAAM,eAAe;EACrB,YAAY,KAAK;EACjB,IAAI,CAAC,UACH,KAAK,MAAM,aAAa,KAAK;CAEjC,GACA,CAAC,UAAU,IAAI,CACjB;CAEA,MAAM,iBAAiB,aAAa,UAAwC;EAC1E,MAAM,eAAe;EACrB,YAAY,IAAI;CAClB,GAAG,CAAC,CAAC;CAEL,MAAM,kBAAkB,kBAAkB,YAAY,KAAK,GAAG,CAAC,CAAC;CAEhE,MAAM,aAAa,kBAAkB,SAAS,SAAS,MAAM,GAAG,CAAC,CAAC;CAElE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,UAAD;EACE,WAAW,GACT,0JACA,8CACA,8GACA,oDACA,YAAY,+BACZ,SACF;EACU;EACV,SAAS;EACT,aAAa;EACb,YAAY;EACZ,QAAQ;EACR,MAAK;EAdP,UAAA;GAgBG,QACC,oBAAC,YAAD;IACE,eAAY;IACZ,WAAU;GACX,CAAA;GAEH,oBAAC,QAAD;IAAM,WAAU;IAAuC,UAAA;GAAY,CAAA;GAClE,OACC,oBAAC,QAAD;IAAM,WAAU;IAAiC,UAAA;GAAW,CAAA,IAC1D;EACE;CAMR,CAAA,GAAA,oBAAC,SAAD;EACU;EACR,eAAY;EACZ,WAAU;EACA;EACV,UAAU;EACV,KAAK;EACL,UAAU;EACV,MAAK;CACN,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/components/index.d.ts

@@ -1,8 +1,10 @@
 import { Chip, ChipProps, chipVariants } from "./chip.js";
+import { FileDropzone, FileDropzoneProps } from "./file-dropzone.js";
 import { LanguageOption, LanguageSwitcher, LanguageSwitcherProps } from "./language-switcher.js";
 import { Marquee, MarqueeProps } from "./marquee.js";
 import { MessageBubble, MessageBubbleProps, MessageRole } from "./message-bubble.js";
+import { SearchCombobox, SearchComboboxProps } from "./search-combobox.js";
 import { StatDirection, StatTile, StatTileProps } from "./stat-tile.js";
 import { StreamingDots, StreamingDotsProps } from "./streaming-dots.js";
-import { ThemeMode, ThemeToggle, ThemeToggleProps } from "./theme-toggle.js";
-export { Chip, ChipProps, LanguageOption, LanguageSwitcher, LanguageSwitcherProps, Marquee, MarqueeProps, MessageBubble, MessageBubbleProps, MessageRole, StatDirection, StatTile, StatTileProps, StreamingDots, StreamingDotsProps, ThemeMode, ThemeToggle, ThemeToggleProps, chipVariants };
+import { ThemeMode, ThemeToggle, ThemeToggleLabels, ThemeToggleProps } from "./theme-toggle.js";
+export { Chip, ChipProps, FileDropzone, FileDropzoneProps, LanguageOption, LanguageSwitcher, LanguageSwitcherProps, Marquee, MarqueeProps, MessageBubble, MessageBubbleProps, MessageRole, SearchCombobox, SearchComboboxProps, StatDirection, StatTile, StatTileProps, StreamingDots, StreamingDotsProps, ThemeMode, ThemeToggle, ThemeToggleLabels, ThemeToggleProps, chipVariants };

package/dist/components/index.js

@@ -1,8 +1,10 @@
 import { Chip, chipVariants } from "./chip.js";
+import { FileDropzone } from "./file-dropzone.js";
 import { LanguageSwitcher } from "./language-switcher.js";
 import { Marquee } from "./marquee.js";
 import { MessageBubble } from "./message-bubble.js";
+import { SearchCombobox } from "./search-combobox.js";
 import { StatTile } from "./stat-tile.js";
 import { StreamingDots } from "./streaming-dots.js";
 import { ThemeToggle } from "./theme-toggle.js";
-export { Chip, LanguageSwitcher, Marquee, MessageBubble, StatTile, StreamingDots, ThemeToggle, chipVariants };
+export { Chip, FileDropzone, LanguageSwitcher, Marquee, MessageBubble, SearchCombobox, StatTile, StreamingDots, ThemeToggle, chipVariants };

package/dist/components/marquee.d.ts

@@ -7,17 +7,23 @@ interface MarqueeProps {
   duration?: number;
   /** Fade the leading and trailing edges into the background. */
   fade?: boolean;
+  /** Hold the strip still while the pointer is over it. */
+  pauseOnHover?: boolean;
   /** Scroll direction. */
   reverse?: boolean;
 }
 /**
  * A continuously scrolling strip.
  *
+ * Driven frame by frame rather than by a keyframe animation, because that is
+ * what makes `pauseOnHover` able to stop and resume mid-travel instead of
+ * snapping back to the start.
+ *
  * Under reduced motion this suppresses the animation and becomes a scrollable
  * region, rather than using the duration tokens. A loop has no final state to
  * land on, so collapsing its duration to zero would be an infinite speed.
  */
-declare function Marquee({ children, duration, reverse, fade, className }: MarqueeProps): import("react").JSX.Element;
+declare function Marquee({ children, className, duration, fade, pauseOnHover, reverse }: MarqueeProps): import("react").JSX.Element;
 //#endregion
 export { Marquee, MarqueeProps };
 //# sourceMappingURL=marquee.d.ts.map

package/dist/components/marquee.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.d.ts","names":[],"sources":["../../src/components/marquee.tsx"],"mappings":";;UAMiB;EACf,UAAU;EACV;;EAEA;;EAEA;;EAEA;;;;;;;;;iBAac,UACd,UACA,UACA,SACA,MACA,aACC,+BAAY,IAAA"}
+{"version":3,"file":"marquee.d.ts","names":[],"sources":["../../src/components/marquee.tsx"],"mappings":";;UAaiB;EACf,UAAU;EACV;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;;;;;;;iBAoBc,UACd,UACA,WACA,UACA,MACA,cACA,WACC,+BAAY,IAAA"}

package/dist/components/marquee.js

@@ -1,20 +1,45 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useReducedMotion } from "motion/react";
+import { useCallback, useState } from "react";
+import { motion, useAnimationFrame, useMotionValue, useReducedMotion, useTransform } from "motion/react";
 //#region src/components/marquee.tsx
 const FADE_MASK = "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]";
+/** The track is duplicated, so one pass is half the total width. */
+const PASS_PERCENT = 50;
 /**
 * A continuously scrolling strip.
 *
+* Driven frame by frame rather than by a keyframe animation, because that is
+* what makes `pauseOnHover` able to stop and resume mid-travel instead of
+* snapping back to the start.
+*
 * Under reduced motion this suppresses the animation and becomes a scrollable
 * region, rather than using the duration tokens. A loop has no final state to
 * land on, so collapsing its duration to zero would be an infinite speed.
 */
-function Marquee({ children, duration = 30, reverse = false, fade = false, className }) {
+function Marquee({ children, className, duration = 30, fade = false, pauseOnHover = false, reverse = false }) {
 	const reduced = useReducedMotion();
+	const [paused, setPaused] = useState(false);
+	const offset = useMotionValue(0);
+	const translate = useTransform(offset, (value) => `${value}%`);
+	const pause = useCallback(() => setPaused(true), []);
+	const resume = useCallback(() => setPaused(false), []);
+	useAnimationFrame((_time, delta) => {
+		if (paused || reduced) return;
+		const travelled = PASS_PERCENT / (duration * 1e3) * delta;
+		const next = offset.get() + (reverse ? travelled : -travelled);
+		if (next <= -50) {
+			offset.set(next + PASS_PERCENT);
+			return;
+		}
+		if (next >= 0 && reverse) {
+			offset.set(next - PASS_PERCENT);
+			return;
+		}
+		offset.set(next);
+	});
 	const track = /* @__PURE__ */ jsx("div", {
-		"aria-hidden": void 0,
 		className: "flex shrink-0 items-center gap-6 pr-6",
 		children
 	});
@@ -27,14 +52,13 @@ function Marquee({ children, duration = 30, reverse = false, fade = false, class
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("overflow-hidden", fade && FADE_MASK, className),
+		onBlurCapture: pauseOnHover ? resume : void 0,
+		onFocusCapture: pauseOnHover ? pause : void 0,
+		onPointerEnter: pauseOnHover ? pause : void 0,
+		onPointerLeave: pauseOnHover ? resume : void 0,
 		children: /* @__PURE__ */ jsxs(motion.div, {
-			animate: { x: reverse ? ["-50%", "0%"] : ["0%", "-50%"] },
 			className: "flex w-max items-center",
-			transition: {
-				duration,
-				ease: "linear",
-				repeat: Number.POSITIVE_INFINITY
-			},
+			style: { x: translate },
 			children: [track, /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
 				className: "flex shrink-0 items-center gap-6 pr-6",

package/dist/components/marquee.js.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.js","names":[],"sources":["../../src/components/marquee.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface MarqueeProps {\n  children: ReactNode;\n  className?: string;\n  /** Seconds for one full pass. Larger is slower. */\n  duration?: number;\n  /** Fade the leading and trailing edges into the background. */\n  fade?: boolean;\n  /** Scroll direction. */\n  reverse?: boolean;\n}\n\nconst FADE_MASK =\n  \"[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]\";\n\n/**\n * A continuously scrolling strip.\n *\n * Under reduced motion this suppresses the animation and becomes a scrollable\n * region, rather than using the duration tokens. A loop has no final state to\n * land on, so collapsing its duration to zero would be an infinite speed.\n */\nexport function Marquee({\n  children,\n  duration = 30,\n  reverse = false,\n  fade = false,\n  className,\n}: MarqueeProps) {\n  const reduced = useReducedMotion();\n\n  const track = (\n    <div\n      aria-hidden={undefined}\n      className=\"flex shrink-0 items-center gap-6 pr-6\"\n    >\n      {children}\n    </div>\n  );\n\n  if (reduced) {\n    return (\n      <div className={cn(\"overflow-x-auto\", className)}>\n        <div className=\"flex w-max items-center\">{track}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"overflow-hidden\", fade && FADE_MASK, className)}>\n      <motion.div\n        animate={{ x: reverse ? [\"-50%\", \"0%\"] : [\"0%\", \"-50%\"] }}\n        className=\"flex w-max items-center\"\n        transition={{\n          duration,\n          ease: \"linear\",\n          repeat: Number.POSITIVE_INFINITY,\n        }}\n      >\n        {track}\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center gap-6 pr-6\"\n        >\n          {children}\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,MAAM,YACJ;;;;;;;;AASF,SAAgB,QAAQ,EACtB,UACA,WAAW,IACX,UAAU,OACV,OAAO,OACP,aACe;CACf,MAAM,UAAU,iBAAiB;CAEjC,MAAM,QACJ,oBAAC,OAAD;EACE,eAAa,KAAA;EACb,WAAU;EAET;CACE,CAAA;CAGP,IAAI,SACF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,SAAS;EAC7C,UAAA,oBAAC,OAAD;GAAK,WAAU;GAA2B,UAAA;EAAW,CAAA;CAClD,CAAA;CAIT,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,QAAQ,WAAW,SAAS;EAChE,UAAA,qBAAC,OAAO,KAAR;GACE,SAAS,EAAE,GAAG,UAAU,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,MAAM,EAAE;GACxD,WAAU;GACV,YAAY;IACV;IACA,MAAM;IACN,QAAQ,OAAO;GACjB;GAPF,UAAA,CASG,OACD,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IAET;GACE,CAAA,CACK;;CACT,CAAA;AAET"}
+{"version":3,"file":"marquee.js","names":[],"sources":["../../src/components/marquee.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  motion,\n  useAnimationFrame,\n  useMotionValue,\n  useReducedMotion,\n  useTransform,\n} from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { useCallback, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface MarqueeProps {\n  children: ReactNode;\n  className?: string;\n  /** Seconds for one full pass. Larger is slower. */\n  duration?: number;\n  /** Fade the leading and trailing edges into the background. */\n  fade?: boolean;\n  /** Hold the strip still while the pointer is over it. */\n  pauseOnHover?: boolean;\n  /** Scroll direction. */\n  reverse?: boolean;\n}\n\nconst FADE_MASK =\n  \"[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]\";\n\n/** The track is duplicated, so one pass is half the total width. */\nconst PASS_PERCENT = 50;\n\n/**\n * A continuously scrolling strip.\n *\n * Driven frame by frame rather than by a keyframe animation, because that is\n * what makes `pauseOnHover` able to stop and resume mid-travel instead of\n * snapping back to the start.\n *\n * Under reduced motion this suppresses the animation and becomes a scrollable\n * region, rather than using the duration tokens. A loop has no final state to\n * land on, so collapsing its duration to zero would be an infinite speed.\n */\nexport function Marquee({\n  children,\n  className,\n  duration = 30,\n  fade = false,\n  pauseOnHover = false,\n  reverse = false,\n}: MarqueeProps) {\n  const reduced = useReducedMotion();\n  const [paused, setPaused] = useState(false);\n  const offset = useMotionValue(0);\n  const translate = useTransform(offset, (value) => `${value}%`);\n\n  const pause = useCallback(() => setPaused(true), []);\n  const resume = useCallback(() => setPaused(false), []);\n\n  useAnimationFrame((_time, delta) => {\n    if (paused || reduced) {\n      return;\n    }\n    const travelled = (PASS_PERCENT / (duration * 1000)) * delta;\n    const next = offset.get() + (reverse ? travelled : -travelled);\n    if (next <= -PASS_PERCENT) {\n      offset.set(next + PASS_PERCENT);\n      return;\n    }\n    if (next >= 0 && reverse) {\n      offset.set(next - PASS_PERCENT);\n      return;\n    }\n    offset.set(next);\n  });\n\n  const track = (\n    <div className=\"flex shrink-0 items-center gap-6 pr-6\">{children}</div>\n  );\n\n  if (reduced) {\n    return (\n      <div className={cn(\"overflow-x-auto\", className)}>\n        <div className=\"flex w-max items-center\">{track}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\"overflow-hidden\", fade && FADE_MASK, className)}\n      onBlurCapture={pauseOnHover ? resume : undefined}\n      onFocusCapture={pauseOnHover ? pause : undefined}\n      onPointerEnter={pauseOnHover ? pause : undefined}\n      onPointerLeave={pauseOnHover ? resume : undefined}\n    >\n      <motion.div className=\"flex w-max items-center\" style={{ x: translate }}>\n        {track}\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center gap-6 pr-6\"\n        >\n          {children}\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA0BA,MAAM,YACJ;;AAGF,MAAM,eAAe;;;;;;;;;;;;AAarB,SAAgB,QAAQ,EACtB,UACA,WACA,WAAW,IACX,OAAO,OACP,eAAe,OACf,UAAU,SACK;CACf,MAAM,UAAU,iBAAiB;CACjC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,SAAS,eAAe,CAAC;CAC/B,MAAM,YAAY,aAAa,SAAS,UAAU,GAAG,MAAM,EAAE;CAE7D,MAAM,QAAQ,kBAAkB,UAAU,IAAI,GAAG,CAAC,CAAC;CACnD,MAAM,SAAS,kBAAkB,UAAU,KAAK,GAAG,CAAC,CAAC;CAErD,mBAAmB,OAAO,UAAU;EAClC,IAAI,UAAU,SACZ;EAEF,MAAM,YAAa,gBAAgB,WAAW,OAAS;EACvD,MAAM,OAAO,OAAO,IAAI,KAAK,UAAU,YAAY,CAAC;EACpD,IAAI,QAAQ,KAAe;GACzB,OAAO,IAAI,OAAO,YAAY;GAC9B;EACF;EACA,IAAI,QAAQ,KAAK,SAAS;GACxB,OAAO,IAAI,OAAO,YAAY;GAC9B;EACF;EACA,OAAO,IAAI,IAAI;CACjB,CAAC;CAED,MAAM,QACJ,oBAAC,OAAD;EAAK,WAAU;EAAyC;CAAc,CAAA;CAGxE,IAAI,SACF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,SAAS;EAC7C,UAAA,oBAAC,OAAD;GAAK,WAAU;GAA2B,UAAA;EAAW,CAAA;CAClD,CAAA;CAIT,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,mBAAmB,QAAQ,WAAW,SAAS;EAC7D,eAAe,eAAe,SAAS,KAAA;EACvC,gBAAgB,eAAe,QAAQ,KAAA;EACvC,gBAAgB,eAAe,QAAQ,KAAA;EACvC,gBAAgB,eAAe,SAAS,KAAA;EAExC,UAAA,qBAAC,OAAO,KAAR;GAAY,WAAU;GAA0B,OAAO,EAAE,GAAG,UAAU;GAAtE,UAAA,CACG,OACD,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IAET;GACE,CAAA,CACK;;CACT,CAAA;AAET"}

package/dist/components/search-combobox-option.js

@@ -0,0 +1,24 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+//#region src/components/search-combobox-option.tsx
+/** Internal to SearchCombobox: holds the per-option handlers so they are stable. */
+function SearchComboboxOption({ active, id, index, onActivate, onChoose, option, render }) {
+	const handleClick = useCallback(() => onChoose(option), [onChoose, option]);
+	const handleMouseEnter = useCallback(() => onActivate(index), [index, onActivate]);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-selected": active,
+		className: cn("flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-accent hover:text-accent-foreground", active && "bg-accent text-accent-foreground"),
+		id,
+		onClick: handleClick,
+		onMouseEnter: handleMouseEnter,
+		role: "option",
+		type: "button",
+		children: render(option, active)
+	});
+}
+//#endregion
+export { SearchComboboxOption };
+
+//# sourceMappingURL=search-combobox-option.js.map

package/dist/components/search-combobox-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-combobox-option.js","names":[],"sources":["../../src/components/search-combobox-option.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { useCallback } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface SearchComboboxOptionProps<T> {\n  active: boolean;\n  id: string;\n  index: number;\n  onActivate: (index: number) => void;\n  onChoose: (option: T) => void;\n  option: T;\n  render: (option: T, active: boolean) => ReactNode;\n}\n\n/** Internal to SearchCombobox: holds the per-option handlers so they are stable. */\nexport function SearchComboboxOption<T>({\n  active,\n  id,\n  index,\n  onActivate,\n  onChoose,\n  option,\n  render,\n}: SearchComboboxOptionProps<T>) {\n  const handleClick = useCallback(() => onChoose(option), [onChoose, option]);\n  const handleMouseEnter = useCallback(\n    () => onActivate(index),\n    [index, onActivate]\n  );\n\n  return (\n    <button\n      aria-selected={active}\n      className={cn(\n        \"flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-accent hover:text-accent-foreground\",\n        active && \"bg-accent text-accent-foreground\"\n      )}\n      id={id}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      role=\"option\"\n      type=\"button\"\n    >\n      {render(option, active)}\n    </button>\n  );\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,qBAAwB,EACtC,QACA,IACA,OACA,YACA,UACA,QACA,UAC+B;CAC/B,MAAM,cAAc,kBAAkB,SAAS,MAAM,GAAG,CAAC,UAAU,MAAM,CAAC;CAC1E,MAAM,mBAAmB,kBACjB,WAAW,KAAK,GACtB,CAAC,OAAO,UAAU,CACpB;CAEA,OACE,oBAAC,UAAD;EACE,iBAAe;EACf,WAAW,GACT,qHACA,UAAU,kCACZ;EACI;EACJ,SAAS;EACT,cAAc;EACd,MAAK;EACL,MAAK;EAEJ,UAAA,OAAO,QAAQ,MAAM;CAChB,CAAA;AAEZ"}

package/dist/components/search-combobox.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+//#region src/components/search-combobox.d.ts
+interface SearchComboboxProps<T> {
+  className?: string;
+  /** Shown when the query returned nothing. */
+  emptyLabel: ReactNode;
+  /** Stable identity for each option, used for keys and aria wiring. */
+  getOptionKey: (option: T) => string;
+  icon?: ReactNode;
+  /** Accessible name for the input. A placeholder is not a label. */
+  label: string;
+  /** Replaces the icon and list with a pending message. */
+  loading?: boolean;
+  loadingLabel?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+  onQueryChange: (query: string) => void;
+  onSelect: (option: T) => void;
+  /** Already filtered. This component matches nothing on its own. */
+  options: T[];
+  placeholder?: string;
+  query: string;
+  renderOption: (option: T, active: boolean) => ReactNode;
+}
+/**
+ * A combobox with a listbox popup, following the ARIA authoring practices:
+ * focus stays in the input and the active option is pointed at with
+ * `aria-activedescendant` rather than moved.
+ *
+ * Controlled and source-agnostic. Filtering, fetching and what a selection
+ * does all belong to the caller.
+ */
+declare function SearchCombobox<T>({ className, emptyLabel, getOptionKey, icon, label, loading, loadingLabel, onOpenChange, onQueryChange, onSelect, options, placeholder, query, renderOption }: SearchComboboxProps<T>): import("react").JSX.Element;
+//#endregion
+export { SearchCombobox, SearchComboboxProps };
+//# sourceMappingURL=search-combobox.d.ts.map

package/dist/components/search-combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-combobox.d.ts","names":[],"sources":["../../src/components/search-combobox.tsx"],"mappings":";;UAQiB,oBAAoB;EACnC;;EAEA,YAAY;;EAEZ,eAAe,QAAQ;EACvB,OAAO;;EAEP;;EAEA;EACA,eAAe;EACf,gBAAgB;EAChB,gBAAgB;EAChB,WAAW,QAAQ;;EAEnB,SAAS;EACT;EACA;EACA,eAAe,QAAQ,GAAG,oBAAoB;;;;;;;;;;iBAWhC,eAAe,KAC7B,WACA,YACA,cACA,MACA,OACA,SACA,cACA,cACA,eACA,UACA,SACA,aACA,OACA,gBACC,oBAAoB,qBAAE,IAAA"}