@signalflare-ai/ui 0.5.0

package/dist/code-DE1Yy1Cu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-DE1Yy1Cu.js","names":[],"sources":["../src/components/code/code.tsx"],"sourcesContent":["\"use client\";\n\nimport { type CSSProperties } from \"react\";\nimport { highlight } from \"sugar-high\";\n\nimport { cn } from \"../../utils/cn\";\nimport { highlightToTokens } from \"../../utils/highlight-to-react\";\n\n/** Code language variant definitions. */\nexport const SF_CODE_VARIANTS = {\n  lang: {\n    ts: {\n      classes: \"\",\n      description: \"TypeScript code\",\n    },\n    tsx: {\n      classes: \"\",\n      description: \"TypeScript JSX code\",\n    },\n    jsonc: {\n      classes: \"\",\n      description: \"JSON with comments\",\n    },\n    bash: {\n      classes: \"\",\n      description: \"Shell/Bash commands\",\n    },\n    css: {\n      classes: \"\",\n      description: \"CSS styles\",\n    },\n  },\n} as const;\n\nexport const SF_CODE_DEFAULT_VARIANTS = {\n  lang: \"ts\",\n} as const;\n\n/**\n * Styling metadata for Code component (for AI/Figma plugin consumption)\n */\nexport const SF_CODE_STYLING = {\n  /** Base semantic tokens used */\n  baseTokens: [\"text-sf-default\"],\n  /** Typography and layout */\n  typography: {\n    fontFamily: \"font-mono\",\n    fontSize: \"text-sm\",\n    lineHeight: \"leading-[20px]\",\n  },\n  /** Container dimensions */\n  dimensions: {\n    margin: \"m-0\",\n    padding: \"p-0\",\n    width: \"w-auto\",\n  },\n  /** Border and background */\n  appearance: {\n    borderRadius: \"rounded-none\",\n    border: \"border-none\",\n    background: \"bg-transparent\",\n  },\n} as const;\n\n/**\n * Styling metadata for CodeBlock component (for AI/Figma plugin consumption)\n */\nexport const SF_CODEBLOCK_STYLING = {\n  /** Base semantic tokens used */\n  baseTokens: [\"bg-sf-recessed\", \"border-sf-line\"],\n  /** Container styling */\n  container: {\n    minWidth: \"min-w-0\",\n    borderRadius: \"rounded-md\",\n    border: \"border border-sf-line\",\n    background: \"bg-sf-recessed\",\n  },\n  /** Inner code element padding */\n  innerPadding: \"[&>pre]:p-4\",\n  /** Parsed dimensions */\n  dimensions: {\n    borderRadius: 6,\n    padding: 16,\n  },\n} as const;\n\n// Derived types from SF_CODE_VARIANTS\nexport type SFCodeLang = keyof typeof SF_CODE_VARIANTS.lang;\n\nexport interface SFCodeVariantsProps {\n  /**\n   * Language hint for the code content.\n   * - `\"ts\"` — TypeScript code\n   * - `\"tsx\"` — TypeScript JSX code\n   * - `\"jsonc\"` — JSON with comments\n   * - `\"bash\"` — Shell/Bash commands\n   * - `\"css\"` — CSS styles\n   * @default \"ts\"\n   */\n  lang?: SFCodeLang;\n}\n\nexport function codeVariants({\n  lang = SF_CODE_DEFAULT_VARIANTS.lang,\n}: SFCodeVariantsProps = {}) {\n  return cn(\n    \"m-0 w-auto rounded-none border-none bg-transparent p-0 font-mono text-sm leading-[20px] text-sf-default\",\n    SF_CODE_VARIANTS.lang[lang].classes\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type CodeLang = SFCodeLang;\n\n/** @deprecated Use CodeLang instead */\nexport type BundledLanguage = CodeLang;\n\n/**\n * Code component props.\n *\n * @example\n * ```tsx\n * <Code code=\"const x = 1;\" lang=\"ts\" />\n * <Code code=\"export API_KEY={{apiKey}}\" lang=\"bash\"\n *   values={{ apiKey: { value: \"sk_live_123\", highlight: true } }}\n * />\n * ```\n */\nexport interface CodeProps extends SFCodeVariantsProps {\n  /** The code string to display. */\n  code: string;\n  /** Template values for `{{key}}` interpolation. Values with `highlight: true` are visually emphasized. */\n  values?: Record<\n    string,\n    {\n      value: string;\n      highlight?: boolean;\n    }\n  >;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Inline styles. */\n  style?: CSSProperties;\n}\n\n/**\n * Substitutes `{{key}}` placeholders in the raw code string before highlighting.\n * Returns the substituted code and a set of highlighted values to wrap post-highlight.\n */\nfunction applyValues(\n  code: string,\n  values?: CodeProps[\"values\"]\n): { code: string; highlights: Map<string, string> } {\n  const highlights = new Map<string, string>();\n  if (!values) return { code, highlights };\n  const substituted = code.replace(/\\{\\{(\\w+)\\}\\}/g, (_, key) => {\n    const entry = values[key as string];\n    if (!entry) return `{{${key}}}`;\n    if (entry.highlight) highlights.set(entry.value, entry.value);\n    return entry.value;\n  });\n  return { code: substituted, highlights };\n}\n\n/**\n * Syntax-highlighted code component powered by sugar-high.\n *\n * Renders code in a monospace font with token-level syntax highlighting.\n * For a bordered container version, use `Code.Block` or `CodeBlock`.\n *\n * **Styling:**\n * - Typography: `font-mono text-sm leading-[20px]`\n * - Colors: semantic `--sh-*` CSS variables (defined in SF theme)\n * - No borders or padding (use CodeBlock for styled container)\n */\nfunction CodeComponent({\n  code,\n  lang = SF_CODE_DEFAULT_VARIANTS.lang,\n  values,\n  className,\n  style,\n}: CodeProps) {\n  const { code: substituted } = applyValues(code, values);\n  const html = highlight(substituted);\n  const tokens = highlightToTokens(html);\n\n  return (\n    <pre className={cn(codeVariants({ lang }), className)} style={style}>\n      <code>{tokens}</code>\n    </pre>\n  );\n}\n\nCodeComponent.displayName = \"Code\";\n\n/**\n * CodeBlock component props — code inside a bordered container.\n *\n * @example\n * ```tsx\n * <CodeBlock lang=\"tsx\" code={`const greeting = \"Hello!\";`} />\n * ```\n */\nexport interface CodeBlockProps {\n  /** The code string to display. */\n  code: string;\n  /**\n   * Language hint for the code content.\n   * @default \"ts\"\n   */\n  lang?: CodeLang;\n}\n\n/**\n * Syntax-highlighted code block with border and background container.\n *\n * **Styling:**\n * - Container: `min-w-0 rounded-md border border-sf-line bg-sf-recessed`\n * - Inner padding: `p-4` (16px)\n */\nfunction CodeBlockComponent({ code, lang }: CodeBlockProps) {\n  return (\n    <div className=\"min-w-0 overflow-x-auto rounded-md border border-sf-line bg-sf-recessed [&>pre]:p-4\">\n      <CodeComponent lang={lang} code={code} />\n    </div>\n  );\n}\n\nCodeBlockComponent.displayName = \"CodeBlock\";\n\n// Export Code with Block sub-component (for registry detection)\nexport const Code = Object.assign(CodeComponent, {\n  Block: CodeBlockComponent,\n});\n\n// Backward-compatible standalone export\nexport const CodeBlock = CodeBlockComponent;\n"],"mappings":";;;;;;;AASA,IAAa,mBAAmB,EAC9B,MAAM;CACJ,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACD,KAAK;EACH,SAAS;EACT,aAAa;EACd;CACD,OAAO;EACL,SAAS;EACT,aAAa;EACd;CACD,MAAM;EACJ,SAAS;EACT,aAAa;EACd;CACD,KAAK;EACH,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,2BAA2B,EACtC,MAAM,MACP;AAkED,SAAgB,aAAa,EAC3B,OAAO,yBAAyB,SACT,EAAE,EAAE;AAC3B,QAAO,GACL,2GACA,iBAAiB,KAAK,MAAM,QAC7B;;;;;;AAyCH,SAAS,YACP,MACA,QACmD;CACnD,MAAM,6BAAa,IAAI,KAAqB;AAC5C,KAAI,CAAC,OAAQ,QAAO;EAAE;EAAM;EAAY;AAOxC,QAAO;EAAE,MANW,KAAK,QAAQ,mBAAmB,GAAG,QAAQ;GAC7D,MAAM,QAAQ,OAAO;AACrB,OAAI,CAAC,MAAO,QAAO,KAAK,IAAI;AAC5B,OAAI,MAAM,UAAW,YAAW,IAAI,MAAM,OAAO,MAAM,MAAM;AAC7D,UAAO,MAAM;IACb;EAC0B;EAAY;;;;;;;;;;;;;AAc1C,SAAS,cAAc,EACrB,MACA,OAAO,yBAAyB,MAChC,QACA,WACA,SACY;CACZ,MAAM,EAAE,MAAM,gBAAgB,YAAY,MAAM,OAAO;CAEvD,MAAM,SAAS,kBADF,UAAU,YAAY,CACG;AAEtC,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,EAAE,MAAM,CAAC,EAAE,UAAU;EAAS;YAC5D,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA;EACjB,CAAA;;AAIV,cAAc,cAAc;;;;;;;;AA2B5B,SAAS,mBAAmB,EAAE,MAAM,QAAwB;AAC1D,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,eAAD;GAAqB;GAAY;GAAQ,CAAA;EACrC,CAAA;;AAIV,mBAAmB,cAAc;AAGjC,IAAa,OAAO,OAAO,OAAO,eAAe,EAC/C,OAAO,oBACR,CAAC;AAGF,IAAa,YAAY"}

package/dist/collapsible-DWsXeXmS.js

@@ -0,0 +1,72 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { forwardRef, useCallback, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon } from "@phosphor-icons/react";
+//#region src/components/collapsible/collapsible.tsx
+function collapsibleVariants(_props = {}) {
+	return cn("flex cursor-pointer items-center gap-1 text-sm text-sf-link select-none");
+}
+/**
+* Collapsible component for showing/hiding content.
+*
+* Features:
+* - Animated chevron indicator (rotates 180° when open)
+* - Accessible with aria-expanded and aria-controls
+* - Content panel with left border accent
+*
+* @example
+* ```tsx
+* const [open, setOpen] = useState(false);
+*
+* <Collapsible label="Show details" open={open} onOpenChange={setOpen}>
+*   <Text>Hidden content revealed when expanded.</Text>
+* </Collapsible>
+* ```
+*
+* @example Controlled accordion pattern
+* ```tsx
+* const [activeIndex, setActiveIndex] = useState<number | null>(null);
+*
+* {items.map((item, i) => (
+*   <Collapsible
+*     key={i}
+*     label={item.title}
+*     open={activeIndex === i}
+*     onOpenChange={(open) => setActiveIndex(open ? i : null)}
+*   >
+*     {item.content}
+*   </Collapsible>
+* ))}
+* ```
+*/
+var Collapsible = forwardRef(({ label, open, onOpenChange, children, className }, ref) => {
+	const contentId = useId();
+	const handleOpen = useCallback(() => {
+		onOpenChange?.(!open);
+	}, [open, onOpenChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			"aria-controls": contentId,
+			className: collapsibleVariants(),
+			onClick: handleOpen,
+			children: [
+				label,
+				" ",
+				/* @__PURE__ */ jsx(CaretDownIcon, { className: cn("h-4 w-4 transition-transform", open && "rotate-180") })
+			]
+		}), open && /* @__PURE__ */ jsx("div", {
+			id: contentId,
+			className: cn("my-2 space-y-4 border-l-2 border-sf-fill pl-4", className),
+			children
+		})]
+	});
+});
+Collapsible.displayName = "Collapsible";
+//#endregion
+export { Collapsible as t };
+
+//# sourceMappingURL=collapsible-DWsXeXmS.js.map

package/dist/collapsible-DWsXeXmS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-DWsXeXmS.js","names":[],"sources":["../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react\";\nimport { type PropsWithChildren, forwardRef, useCallback, useId } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\nexport const SF_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const SF_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface SFCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: SFCollapsibleVariantsProps = {}) {\n  return cn(\n    // Base styles for the trigger\n    \"flex cursor-pointer items-center gap-1 text-sm text-sf-link select-none\"\n  );\n}\n\n/**\n * Collapsible component props.\n *\n * @example\n * ```tsx\n * <Collapsible label=\"Show details\" open={open} onOpenChange={setOpen}>\n *   <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible>\n * ```\n */\nexport type CollapsibleProps = PropsWithChildren<\n  SFCollapsibleVariantsProps & {\n    /** Text label displayed in the trigger button */\n    label: string;\n    /** Whether the collapsible content is visible */\n    open?: boolean;\n    /** Callback fired when the open state changes */\n    onOpenChange?: (open: boolean) => void;\n    /** Additional CSS classes for the content panel */\n    className?: string;\n  }\n>;\n\n/**\n * Collapsible component for showing/hiding content.\n *\n * Features:\n * - Animated chevron indicator (rotates 180° when open)\n * - Accessible with aria-expanded and aria-controls\n * - Content panel with left border accent\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible label=\"Show details\" open={open} onOpenChange={setOpen}>\n *   <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible>\n * ```\n *\n * @example Controlled accordion pattern\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n *   <Collapsible\n *     key={i}\n *     label={item.title}\n *     open={activeIndex === i}\n *     onOpenChange={(open) => setActiveIndex(open ? i : null)}\n *   >\n *     {item.content}\n *   </Collapsible>\n * ))}\n * ```\n */\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n  ({ label, open, onOpenChange, children, className }, ref) => {\n    const contentId = useId();\n\n    const handleOpen = useCallback(() => {\n      onOpenChange?.(!open);\n    }, [open, onOpenChange]);\n\n    return (\n      <div ref={ref}>\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          aria-controls={contentId}\n          className={collapsibleVariants()}\n          onClick={handleOpen}\n        >\n          {label}{\" \"}\n          <CaretDownIcon\n            className={cn(\"h-4 w-4 transition-transform\", open && \"rotate-180\")}\n          />\n        </button>\n        {open && (\n          <div\n            id={contentId}\n            className={cn(\n              \"my-2 space-y-4 border-l-2 border-sf-fill pl-4\",\n              className\n            )}\n          >\n            {children}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nCollapsible.displayName = \"Collapsible\";\n"],"mappings":";;;;;;AAWA,SAAgB,oBAAoB,SAAqC,EAAE,EAAE;AAC3E,QAAO,GAEL,0EACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DH,IAAa,cAAc,YACxB,EAAE,OAAO,MAAM,cAAc,UAAU,aAAa,QAAQ;CAC3D,MAAM,YAAY,OAAO;CAEzB,MAAM,aAAa,kBAAkB;AACnC,iBAAe,CAAC,KAAK;IACpB,CAAC,MAAM,aAAa,CAAC;AAExB,QACE,qBAAC,OAAD;EAAU;YAAV,CACE,qBAAC,UAAD;GACE,MAAK;GACL,iBAAe;GACf,iBAAe;GACf,WAAW,qBAAqB;GAChC,SAAS;aALX;IAOG;IAAO;IACR,oBAAC,eAAD,EACE,WAAW,GAAG,gCAAgC,QAAQ,aAAa,EACnE,CAAA;IACK;MACR,QACC,oBAAC,OAAD;GACE,IAAI;GACJ,WAAW,GACT,iDACA,UACD;GAEA;GACG,CAAA,CAEJ;;EAGX;AAED,YAAY,cAAc"}

package/dist/combobox-B0bLdsX8.js

@@ -0,0 +1,197 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Field } from "./field-Y_UK1_Cg.js";
+import { r as inputVariants } from "./input-BxQAnXki.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/combobox/combobox.tsx
+function Root({ label, required, labelTooltip, description, error, children, ...props }) {
+	const comboboxControl = /* @__PURE__ */ jsx(Combobox.Root, {
+		...props,
+		children
+	});
+	if (label) return /* @__PURE__ */ jsx(Field, {
+		label,
+		required,
+		labelTooltip,
+		description,
+		error: error ? typeof error === "string" ? {
+			message: error,
+			match: true
+		} : error : void 0,
+		children: comboboxControl
+	});
+	return comboboxControl;
+}
+function Content({ children, className, align = "start", sideOffset = 4, alignOffset, side }) {
+	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		className: "outline-none",
+		align,
+		sideOffset,
+		alignOffset,
+		side,
+		children: /* @__PURE__ */ jsx(Combobox.Popup, {
+			className: cn("flex flex-col", "max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5", "bg-sf-control text-sf-default", "rounded-lg shadow-lg ring ring-sf-line", className),
+			children
+		})
+	}) });
+}
+function TriggerValue({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
+		className: cn(inputVariants(), "relative flex items-center pr-8", className),
+		children: [/* @__PURE__ */ jsx(Combobox.Value, { children: props.children }), /* @__PURE__ */ jsx(Combobox.Icon, {
+			className: "absolute top-1/2 right-2 -translate-y-1/2",
+			children: /* @__PURE__ */ jsx(CaretDownIcon, { className: "fill-sf-ring" })
+		})]
+	});
+}
+function TriggerInput(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative inline-block w-full max-w-xs", props.className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox.Input, {
+				...props,
+				className: cn(inputVariants(), "w-full pr-12")
+			}),
+			/* @__PURE__ */ jsx(Combobox.Clear, {
+				className: "absolute top-1/2 right-8 flex -translate-y-1/2 cursor-pointer bg-transparent p-0",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Combobox.Trigger, {
+				className: "p-0",
+				children: /* @__PURE__ */ jsx(Combobox.Icon, {
+					className: "absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer",
+					children: /* @__PURE__ */ jsx(CaretDownIcon, { className: "fill-sf-ring" })
+				})
+			})
+		]
+	});
+}
+function Item({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		...props,
+		className: "group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-sf-overlay",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "col-start-1",
+			children
+		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			className: "col-start-2 flex items-center",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})]
+	});
+}
+function Empty(props) {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		...props,
+		className: cn("mx-1.5 shrink-0 px-4 py-2 text-[0.925rem] leading-4 text-sf-subtle empty:m-0 empty:p-0"),
+		children: props.children ?? "No labels found."
+	});
+}
+function Input(props) {
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		...props,
+		className: cn(inputVariants(), "mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2", props.className)
+	});
+}
+function List({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		...props,
+		className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2", className)
+	});
+}
+function GroupLabel(props) {
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		...props,
+		className: "mx-1.5 px-4 py-1.5 text-sm font-medium"
+	});
+}
+function Group(props) {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		...props,
+		className: "mt-2 first:mt-0"
+	});
+}
+function Chip(props) {
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		...props,
+		className: "flex items-center gap-1 rounded-md bg-sf-overlay px-2 py-1",
+		children: [props.children, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+			className: "cursor-pointer rounded-md p-1 hover:bg-sf-fill-hover",
+			children: /* @__PURE__ */ jsx(XIcon, {
+				size: 12,
+				weight: "bold"
+			})
+		})]
+	});
+}
+function TriggerMultipleWithInput({ placeholder, renderItem, className, inputSide = "right", value: controlledValue }) {
+	const chipsToRender = controlledValue;
+	return /* @__PURE__ */ jsxs(Combobox.Chips, {
+		className: cn(inputVariants(), cn("flex flex-col", "gap-1 p-1", "min-h-9", "h-auto"), className),
+		children: [inputSide === "top" && /* @__PURE__ */ jsx(Combobox.Input, {
+			placeholder,
+			className: "w-full px-2 py-1 outline-none"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap gap-1",
+			children: [
+				chipsToRender !== void 0 && chipsToRender.length > 0 && chipsToRender.map((item) => renderItem(item)),
+				/* @__PURE__ */ jsx(Combobox.Value, { children: (internalValue) => {
+					if (chipsToRender !== void 0) return null;
+					return /* @__PURE__ */ jsx(Fragment, { children: internalValue.map((item) => renderItem(item)) });
+				} }),
+				inputSide === "right" && /* @__PURE__ */ jsx(Combobox.Input, {
+					placeholder,
+					className: "min-w-[100px] flex-1 px-2 py-1 outline-none"
+				})
+			]
+		})]
+	});
+}
+Root.displayName = "Combobox.Root";
+Content.displayName = "Combobox.Content";
+TriggerValue.displayName = "Combobox.TriggerValue";
+TriggerInput.displayName = "Combobox.TriggerInput";
+Item.displayName = "Combobox.Item";
+Chip.displayName = "Combobox.Chip";
+TriggerMultipleWithInput.displayName = "Combobox.TriggerMultipleWithInput";
+/**
+* Combobox — autocomplete input with filterable dropdown list.
+*
+* Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`,
+* `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`,
+* `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.
+*
+* @example
+* ```tsx
+* <Combobox items={fruits} label="Fruit">
+*   <Combobox.TriggerInput placeholder="Pick a fruit…" />
+*   <Combobox.Content>
+*     <Combobox.List>
+*       {(item) => <Combobox.Item value={item}>{item}</Combobox.Item>}
+*     </Combobox.List>
+*   </Combobox.Content>
+* </Combobox>
+* ```
+*
+* @see https://base-ui.com/react/components/combobox
+*/
+var Combobox$1 = Object.assign(Root, {
+	Content,
+	TriggerValue,
+	TriggerInput,
+	TriggerMultipleWithInput,
+	Chip,
+	Item,
+	Input,
+	Empty,
+	GroupLabel,
+	Group,
+	List,
+	Collection: Combobox.Collection
+});
+//#endregion
+export { Combobox$1 as t };
+
+//# sourceMappingURL=combobox-B0bLdsX8.js.map

package/dist/combobox-B0bLdsX8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-B0bLdsX8.js","names":[],"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxBase } from \"@base-ui/react/combobox\";\nimport { CaretDownIcon, CheckIcon, XIcon } from \"@phosphor-icons/react\";\nimport { Fragment, type PropsWithChildren, type ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport { inputVariants } from \"../input/input\";\n\n/** Combobox input position variant definitions. */\nexport const SF_COMBOBOX_VARIANTS = {\n  inputSide: {\n    right: {\n      classes: \"\",\n      description: \"Input positioned inline to the right of chips\",\n    },\n    top: {\n      classes: \"\",\n      description: \"Input positioned above chips\",\n    },\n  },\n} as const;\n\nexport const SF_COMBOBOX_DEFAULT_VARIANTS = {\n  inputSide: \"right\",\n} as const;\n\n// Derived types from SF_COMBOBOX_VARIANTS\nexport type SFComboboxInputSide = keyof typeof SF_COMBOBOX_VARIANTS.inputSide;\n\nexport interface SFComboboxVariantsProps {\n  /**\n   * Position of the text input relative to chips in multi-select mode.\n   * - `\"right\"` — Input inline to the right of chips\n   * - `\"top\"` — Input above chips\n   * @default \"right\"\n   */\n  inputSide?: SFComboboxInputSide;\n}\n\nexport function comboboxVariants({\n  inputSide = SF_COMBOBOX_DEFAULT_VARIANTS.inputSide,\n}: SFComboboxVariantsProps = {}) {\n  return cn(SF_COMBOBOX_VARIANTS.inputSide[inputSide].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type ComboboxInputSide = SFComboboxInputSide;\n\nexport type ComboboxRootProps<\n  Value = unknown,\n  Multiple extends boolean | undefined = false,\n> = ComboboxBase.Root.Props<Value, Multiple>;\n\n/**\n * Combobox component props (simplified for documentation; the actual Root is generic).\n *\n * Combobox provides an autocomplete/typeahead input with a filterable dropdown.\n * Supports single-select, multi-select with chips, grouped items, and Field wrapper integration.\n *\n * @example\n * ```tsx\n * // Single-select with search input\n * <Combobox value={value} onValueChange={setValue} items={options}>\n *   <Combobox.TriggerInput placeholder=\"Search…\" />\n *   <Combobox.Content>\n *     <Combobox.List>\n *       {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n *     </Combobox.List>\n *     <Combobox.Empty>No results</Combobox.Empty>\n *   </Combobox.Content>\n * </Combobox>\n *\n * // Multi-select with chips\n * <Combobox multiple items={options} label=\"Tags\">\n *   <Combobox.TriggerMultipleWithInput\n *     placeholder=\"Add tag…\"\n *     renderItem={(item) => <Combobox.Chip value={item}>{item.label}</Combobox.Chip>}\n *   />\n *   <Combobox.Content>\n *     <Combobox.List>\n *       {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n *     </Combobox.List>\n *   </Combobox.Content>\n * </Combobox>\n * ```\n */\nexport interface ComboboxProps extends SFComboboxVariantsProps {\n  /** Array of items to display in the dropdown */\n  items: unknown[];\n  /** Currently selected value(s) */\n  value?: unknown;\n  /** Callback when selection changes */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode */\n  multiple?: boolean;\n  /** Combobox content (trigger, content, items) */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label content for the combobox (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Whether the combobox is required */\n  required?: boolean;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the combobox */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<Value, Multiple extends boolean | undefined = false>({\n  label,\n  required,\n  labelTooltip,\n  description,\n  error,\n  children,\n  ...props\n}: ComboboxBase.Root.Props<Value, Multiple> & {\n  label?: ReactNode;\n  required?: boolean;\n  labelTooltip?: ReactNode;\n  description?: ReactNode;\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n  const comboboxControl = (\n    <ComboboxBase.Root {...props}>{children}</ComboboxBase.Root>\n  );\n\n  // Render with Field wrapper if label, description, or error are provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {comboboxControl}\n      </Field>\n    );\n  }\n\n  // Render bare combobox without Field wrapper\n  return comboboxControl;\n}\n\nfunction Content({\n  children,\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  side,\n}: PropsWithChildren<{\n  className?: string;\n  align?: ComboboxBase.Positioner.Props[\"align\"];\n  alignOffset?: ComboboxBase.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxBase.Positioner.Props[\"side\"];\n  sideOffset?: ComboboxBase.Positioner.Props[\"sideOffset\"];\n}>) {\n  return (\n    <ComboboxBase.Portal>\n      <ComboboxBase.Positioner\n        className=\"outline-none\"\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        side={side}\n      >\n        <ComboboxBase.Popup\n          className={cn(\n            \"flex flex-col\", // flexbox layout for sticky input + scrollable list\n            \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n            \"bg-sf-control text-sf-default\", // background\n            \"rounded-lg shadow-lg ring ring-sf-line\", // border part\n            className\n          )}\n        >\n          {children}\n        </ComboboxBase.Popup>\n      </ComboboxBase.Positioner>\n    </ComboboxBase.Portal>\n  );\n}\n\nfunction TriggerValue({\n  className,\n  ...props\n}: ComboboxBase.Value.Props & { className?: string }) {\n  return (\n    <ComboboxBase.Trigger\n      className={cn(\n        inputVariants(),\n        \"relative flex items-center pr-8\",\n        className\n      )}\n    >\n      <ComboboxBase.Value>{props.children}</ComboboxBase.Value>\n      <ComboboxBase.Icon className=\"absolute top-1/2 right-2 -translate-y-1/2\">\n        <CaretDownIcon className=\"fill-sf-ring\" />\n      </ComboboxBase.Icon>\n    </ComboboxBase.Trigger>\n  );\n}\n\nfunction TriggerInput(props: ComboboxBase.Input.Props) {\n  return (\n    <div\n      className={cn(\"relative inline-block w-full max-w-xs\", props.className)}\n    >\n      <ComboboxBase.Input\n        {...props}\n        className={cn(inputVariants(), \"w-full pr-12\")}\n      />\n\n      <ComboboxBase.Clear className=\"absolute top-1/2 right-8 flex -translate-y-1/2 cursor-pointer bg-transparent p-0\">\n        <XIcon />\n      </ComboboxBase.Clear>\n\n      <ComboboxBase.Trigger className=\"p-0\">\n        <ComboboxBase.Icon className=\"absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer\">\n          <CaretDownIcon className=\"fill-sf-ring\" />\n        </ComboboxBase.Icon>\n      </ComboboxBase.Trigger>\n    </div>\n  );\n}\n\nfunction Item({ children, ...props }: ComboboxBase.Item.Props) {\n  return (\n    <ComboboxBase.Item\n      {...props}\n      className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-sf-overlay\"\n    >\n      <div className=\"col-start-1\">{children}</div>\n      <ComboboxBase.ItemIndicator className=\"col-start-2 flex items-center\">\n        <CheckIcon />\n      </ComboboxBase.ItemIndicator>\n    </ComboboxBase.Item>\n  );\n}\n\nfunction Empty(props: ComboboxBase.Empty.Props) {\n  return (\n    <ComboboxBase.Empty\n      {...props}\n      className={cn(\n        \"mx-1.5 shrink-0 px-4 py-2 text-[0.925rem] leading-4 text-sf-subtle empty:m-0 empty:p-0\"\n      )}\n      children={props.children ?? \"No labels found.\"}\n    />\n  );\n}\n\nfunction Input(props: ComboboxBase.Input.Props) {\n  return (\n    <ComboboxBase.Input\n      {...props}\n      className={cn(\n        inputVariants(),\n        \"mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2\",\n        props.className\n      )}\n    />\n  );\n}\n\nfunction List({\n  className,\n  ...props\n}: ComboboxBase.List.Props & { className?: string }) {\n  return (\n    <ComboboxBase.List\n      {...props}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n        className\n      )}\n    />\n  );\n}\n\nfunction GroupLabel(props: ComboboxBase.GroupLabel.Props) {\n  return (\n    <ComboboxBase.GroupLabel\n      {...props}\n      className=\"mx-1.5 px-4 py-1.5 text-sm font-medium\"\n    />\n  );\n}\n\nfunction Group(props: ComboboxBase.Group.Props) {\n  return <ComboboxBase.Group {...props} className=\"mt-2 first:mt-0\" />;\n}\n\nfunction Chip(props: ComboboxBase.Chip.Props) {\n  return (\n    <ComboboxBase.Chip\n      {...props}\n      className=\"flex items-center gap-1 rounded-md bg-sf-overlay px-2 py-1\"\n    >\n      {props.children}\n      <ComboboxBase.ChipRemove className=\"cursor-pointer rounded-md p-1 hover:bg-sf-fill-hover\">\n        <XIcon size={12} weight=\"bold\" />\n      </ComboboxBase.ChipRemove>\n    </ComboboxBase.Chip>\n  );\n}\n\nfunction TriggerMultipleWithInput<ValueType>({\n  placeholder,\n  renderItem,\n  className,\n  inputSide = \"right\",\n  value: controlledValue,\n}: {\n  placeholder?: string;\n  renderItem: (value: ValueType) => React.ReactNode;\n  className?: string;\n  inputSide?: \"right\" | \"top\";\n  /** Optional controlled value for rendering chips (use when pre-selecting values) */\n  value?: ValueType[];\n}) {\n  // Determine which value to use for rendering chips\n  const chipsToRender = controlledValue;\n\n  return (\n    <ComboboxBase.Chips\n      className={cn(\n        inputVariants(),\n        cn(\"flex flex-col\", \"gap-1 p-1\", \"min-h-9\", \"h-auto\"),\n        className\n      )}\n    >\n      {inputSide === \"top\" && (\n        <ComboboxBase.Input\n          placeholder={placeholder}\n          className=\"w-full px-2 py-1 outline-none\"\n        />\n      )}\n      {/* Chips container */}\n      <div className=\"flex flex-wrap gap-1\">\n        {/* Render chips from controlled value if provided */}\n        {chipsToRender !== undefined &&\n          chipsToRender.length > 0 &&\n          chipsToRender.map((item) => renderItem(item))}\n        {/* Also render from BaseUI's internal value for user selections */}\n        <ComboboxBase.Value>\n          {(internalValue: ValueType[]) => {\n            // Skip rendering if using controlled value (to avoid duplicates)\n            if (chipsToRender !== undefined) return null;\n            return (\n              <Fragment>\n                {internalValue.map((item) => renderItem(item))}\n              </Fragment>\n            );\n          }}\n        </ComboboxBase.Value>\n        {inputSide === \"right\" && (\n          <ComboboxBase.Input\n            placeholder={placeholder}\n            className=\"min-w-[100px] flex-1 px-2 py-1 outline-none\"\n          />\n        )}\n      </div>\n    </ComboboxBase.Chips>\n  );\n}\n\nRoot.displayName = \"Combobox.Root\";\nContent.displayName = \"Combobox.Content\";\nTriggerValue.displayName = \"Combobox.TriggerValue\";\nTriggerInput.displayName = \"Combobox.TriggerInput\";\nItem.displayName = \"Combobox.Item\";\nChip.displayName = \"Combobox.Chip\";\nTriggerMultipleWithInput.displayName = \"Combobox.TriggerMultipleWithInput\";\n\n/**\n * Combobox — autocomplete input with filterable dropdown list.\n *\n * Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`,\n * `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`,\n * `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.\n *\n * @example\n * ```tsx\n * <Combobox items={fruits} label=\"Fruit\">\n *   <Combobox.TriggerInput placeholder=\"Pick a fruit…\" />\n *   <Combobox.Content>\n *     <Combobox.List>\n *       {(item) => <Combobox.Item value={item}>{item}</Combobox.Item>}\n *     </Combobox.List>\n *   </Combobox.Content>\n * </Combobox>\n * ```\n *\n * @see https://base-ui.com/react/components/combobox\n */\nexport const Combobox = Object.assign(Root, {\n  // Helper components\n  Content,\n  TriggerValue,\n  TriggerInput,\n  TriggerMultipleWithInput,\n\n  // Slightly modified BaseUI\n  Chip,\n  Item,\n\n  // Styled BaseUI\n  Input,\n  Empty,\n  GroupLabel,\n  Group,\n\n  // Styled BaseUI\n  List,\n\n  // BaseUI\n  Collection: ComboboxBase.Collection,\n});\n"],"mappings":"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"}