@cloudflare/kumo 1.8.0 → 1.10.0

package/dist/combobox-CJqgoue6.js

@@ -0,0 +1,336 @@
+"use client";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { CheckIcon as w, XIcon as d, CaretDownIcon as x } from "@phosphor-icons/react";
+import { createContext as T, useContext as u, Fragment as V } from "react";
+import { i as b, K as P } from "./input-BXn3ElmF.js";
+import { c as a } from "./cn-Bhsu1vx2.js";
+import { F as j } from "./field-BYaOyOtJ.js";
+import { a5 as G, a6 as L, a7 as M, a8 as F, a9 as _, aa as A, ab as p, ac as E, ad as K, ae as O, af as U, ag as W, ah as f, ai as D, aj as C, ak as N, al as H, am as X, an as q } from "./vendor-base-ui-DvXlzG7n.js";
+P.size;
+const h = T("base");
+function y({
+  label: o,
+  required: i,
+  labelTooltip: t,
+  description: n,
+  error: r,
+  children: s,
+  size: l = "base",
+  ...m
+}) {
+  const g = /* @__PURE__ */ e(h.Provider, { value: l, children: /* @__PURE__ */ e(L, { ...m, children: s }) });
+  return o ? /* @__PURE__ */ e(
+    j,
+    {
+      label: o,
+      required: i,
+      labelTooltip: t,
+      description: n,
+      error: r ? typeof r == "string" ? { message: r, match: !0 } : r : void 0,
+      children: g
+    }
+  ) : g;
+}
+function z({
+  children: o,
+  className: i,
+  align: t = "start",
+  sideOffset: n = 4,
+  alignOffset: r,
+  side: s
+}) {
+  return /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(
+    X,
+    {
+      className: "outline-none",
+      align: t,
+      sideOffset: n,
+      alignOffset: r,
+      side: s,
+      children: /* @__PURE__ */ e(
+        q,
+        {
+          className: a(
+            "flex flex-col",
+            // flexbox layout for sticky input + scrollable list
+            "max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5",
+            "bg-kumo-control text-kumo-default",
+            // background
+            "rounded-lg shadow-lg ring ring-kumo-line",
+            // border part
+            i
+          ),
+          children: o
+        }
+      )
+    }
+  ) });
+}
+const B = {
+  xs: { padding: "pr-5", iconSize: 12, iconRight: "right-1" },
+  sm: { padding: "pr-6", iconSize: 14, iconRight: "right-1.5" },
+  base: { padding: "pr-8", iconSize: 16, iconRight: "right-2" },
+  lg: { padding: "pr-10", iconSize: 18, iconRight: "right-3" }
+};
+function v({
+  className: o,
+  ...i
+}) {
+  const t = u(h), n = B[t];
+  return /* @__PURE__ */ c(
+    C,
+    {
+      className: a(
+        b({ size: t }),
+        "relative flex items-center",
+        n.padding,
+        o
+      ),
+      children: [
+        /* @__PURE__ */ e(f, { children: i.children }),
+        /* @__PURE__ */ e(
+          N,
+          {
+            className: a(
+              "absolute top-1/2 -translate-y-1/2",
+              n.iconRight
+            ),
+            children: /* @__PURE__ */ e(x, { size: n.iconSize, className: "fill-kumo-ring" })
+          }
+        )
+      ]
+    }
+  );
+}
+const J = {
+  xs: {
+    padding: "pr-7",
+    iconSize: 12,
+    clearRight: "right-5",
+    caretRight: "right-1"
+  },
+  sm: {
+    padding: "pr-9",
+    iconSize: 14,
+    clearRight: "right-6",
+    caretRight: "right-1.5"
+  },
+  base: {
+    padding: "pr-12",
+    iconSize: 16,
+    clearRight: "right-8",
+    caretRight: "right-2"
+  },
+  lg: {
+    padding: "pr-14",
+    iconSize: 18,
+    clearRight: "right-9",
+    caretRight: "right-3"
+  }
+};
+function R(o) {
+  const i = u(h), t = J[i];
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: a("relative inline-block w-full max-w-xs", o.className),
+      children: [
+        /* @__PURE__ */ e(
+          p,
+          {
+            ...o,
+            className: a(b({ size: i }), "w-full", t.padding)
+          }
+        ),
+        /* @__PURE__ */ e(
+          D,
+          {
+            className: a(
+              "absolute top-1/2 flex -translate-y-1/2 cursor-pointer bg-transparent p-0",
+              t.clearRight
+            ),
+            children: /* @__PURE__ */ e(d, { size: t.iconSize })
+          }
+        ),
+        /* @__PURE__ */ e(C, { className: "p-0", children: /* @__PURE__ */ e(
+          N,
+          {
+            className: a(
+              "absolute top-1/2 flex -translate-y-1/2 cursor-pointer",
+              t.caretRight
+            ),
+            children: /* @__PURE__ */ e(
+              x,
+              {
+                size: t.iconSize,
+                className: "fill-kumo-ring"
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+function I({ children: o, ...i }) {
+  return /* @__PURE__ */ c(
+    E,
+    {
+      ...i,
+      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-kumo-overlay",
+      children: [
+        /* @__PURE__ */ e("div", { className: "col-start-1", children: o }),
+        /* @__PURE__ */ e(K, { className: "col-start-2 flex items-center", children: /* @__PURE__ */ e(w, {}) })
+      ]
+    }
+  );
+}
+function Q(o) {
+  return /* @__PURE__ */ e(
+    A,
+    {
+      ...o,
+      className: a(
+        "mx-1.5 shrink-0 px-4 py-2 text-[0.925rem] leading-4 text-kumo-subtle empty:m-0 empty:p-0"
+      ),
+      children: o.children ?? "No labels found."
+    }
+  );
+}
+function Y(o) {
+  return /* @__PURE__ */ e(
+    p,
+    {
+      ...o,
+      className: a(
+        b(),
+        "mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2",
+        o.className
+      )
+    }
+  );
+}
+function Z({
+  className: o,
+  ...i
+}) {
+  return /* @__PURE__ */ e(
+    M,
+    {
+      ...i,
+      className: a(
+        "min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2",
+        o
+      )
+    }
+  );
+}
+function $(o) {
+  return /* @__PURE__ */ e(
+    _,
+    {
+      ...o,
+      className: a(
+        "mx-1.5 px-2 py-1.5 text-sm text-kumo-strong",
+        o.className
+      )
+    }
+  );
+}
+function oo(o) {
+  return /* @__PURE__ */ e(
+    F,
+    {
+      ...o,
+      className: "border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0"
+    }
+  );
+}
+function k(o) {
+  return /* @__PURE__ */ c(
+    O,
+    {
+      ...o,
+      className: "flex items-center gap-1 rounded-md bg-kumo-overlay px-2 py-1",
+      children: [
+        o.children,
+        /* @__PURE__ */ e(U, { className: "cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover", children: /* @__PURE__ */ e(d, { size: 12, weight: "bold" }) })
+      ]
+    }
+  );
+}
+const eo = {
+  xs: "min-h-5",
+  sm: "min-h-6.5",
+  base: "min-h-9",
+  lg: "min-h-10"
+};
+function S({
+  placeholder: o,
+  renderItem: i,
+  className: t,
+  inputSide: n = "right",
+  value: r
+}) {
+  const s = u(h), l = r;
+  return /* @__PURE__ */ c(
+    W,
+    {
+      className: a(
+        b({ size: s }),
+        a("flex flex-col", "gap-1 p-1", eo[s], "h-auto"),
+        t
+      ),
+      children: [
+        n === "top" && /* @__PURE__ */ e(
+          p,
+          {
+            placeholder: o,
+            className: "w-full px-2 py-1 outline-none"
+          }
+        ),
+        /* @__PURE__ */ c("div", { className: "flex flex-wrap gap-1", children: [
+          l !== void 0 && l.length > 0 && l.map((m) => i(m)),
+          /* @__PURE__ */ e(f, { children: (m) => l !== void 0 ? null : /* @__PURE__ */ e(V, { children: m.map((g) => i(g)) }) }),
+          n === "right" && /* @__PURE__ */ e(
+            p,
+            {
+              placeholder: o,
+              className: "min-w-[100px] flex-1 px-2 py-1 outline-none"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+y.displayName = "Combobox.Root";
+z.displayName = "Combobox.Content";
+v.displayName = "Combobox.TriggerValue";
+R.displayName = "Combobox.TriggerInput";
+I.displayName = "Combobox.Item";
+k.displayName = "Combobox.Chip";
+S.displayName = "Combobox.TriggerMultipleWithInput";
+const co = Object.assign(y, {
+  // Helper components
+  Content: z,
+  TriggerValue: v,
+  TriggerInput: R,
+  TriggerMultipleWithInput: S,
+  // Slightly modified BaseUI
+  Chip: k,
+  Item: I,
+  // Styled BaseUI
+  Input: Y,
+  Empty: Q,
+  GroupLabel: $,
+  Group: oo,
+  // Styled BaseUI
+  List: Z,
+  // BaseUI
+  Collection: G
+});
+export {
+  co as C
+};
+//# sourceMappingURL=combobox-CJqgoue6.js.map

package/dist/combobox-CJqgoue6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-CJqgoue6.js","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 {\n  Fragment,\n  createContext,\n  useContext,\n  type PropsWithChildren,\n  type ReactNode,\n} from \"react\";\nimport {\n  inputVariants,\n  KUMO_INPUT_VARIANTS,\n  type KumoInputSize,\n} from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Combobox variant definitions. */\nexport const KUMO_COMBOBOX_VARIANTS = {\n  size: KUMO_INPUT_VARIANTS.size,\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 KUMO_COMBOBOX_DEFAULT_VARIANTS = {\n  size: \"base\",\n  inputSide: \"right\",\n} as const;\n\n// Context to pass size down to sub-components\nconst ComboboxSizeContext = createContext<KumoInputSize>(\"base\");\n\n// Derived types from KUMO_COMBOBOX_VARIANTS\nexport type KumoComboboxSize = keyof typeof KUMO_COMBOBOX_VARIANTS.size;\nexport type KumoComboboxInputSide =\n  keyof typeof KUMO_COMBOBOX_VARIANTS.inputSide;\n\nexport interface KumoComboboxVariantsProps {\n  /**\n   * Size of the combobox trigger. Matches Input component sizes.\n   * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n   * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n   * - `\"base\"` — Default size (h-9 / 36px)\n   * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n   * @default \"base\"\n   */\n  size?: KumoComboboxSize;\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?: KumoComboboxInputSide;\n}\n\nexport function comboboxVariants({\n  inputSide = KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide,\n}: KumoComboboxVariantsProps = {}) {\n  return cn(KUMO_COMBOBOX_VARIANTS.inputSide[inputSide].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type ComboboxInputSide = KumoComboboxInputSide;\nexport type ComboboxSize = KumoComboboxSize;\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 KumoComboboxVariantsProps {\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  size = \"base\",\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  size?: KumoComboboxSize;\n}) {\n  const comboboxControl = (\n    <ComboboxSizeContext.Provider value={size}>\n      <ComboboxBase.Root {...props}>{children}</ComboboxBase.Root>\n    </ComboboxSizeContext.Provider>\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-kumo-control text-kumo-default\", // background\n            \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n            className,\n          )}\n        >\n          {children}\n        </ComboboxBase.Popup>\n      </ComboboxBase.Positioner>\n    </ComboboxBase.Portal>\n  );\n}\n\n// Size-dependent styles for TriggerValue icon\nconst triggerValueIconStyles: Record<\n  KumoComboboxSize,\n  { padding: string; iconSize: number; iconRight: string }\n> = {\n  xs: { padding: \"pr-5\", iconSize: 12, iconRight: \"right-1\" },\n  sm: { padding: \"pr-6\", iconSize: 14, iconRight: \"right-1.5\" },\n  base: { padding: \"pr-8\", iconSize: 16, iconRight: \"right-2\" },\n  lg: { padding: \"pr-10\", iconSize: 18, iconRight: \"right-3\" },\n};\n\nfunction TriggerValue({\n  className,\n  ...props\n}: ComboboxBase.Value.Props & { className?: string }) {\n  const size = useContext(ComboboxSizeContext);\n  const iconStyles = triggerValueIconStyles[size];\n\n  return (\n    <ComboboxBase.Trigger\n      className={cn(\n        inputVariants({ size }),\n        \"relative flex items-center\",\n        iconStyles.padding,\n        className,\n      )}\n    >\n      <ComboboxBase.Value>{props.children}</ComboboxBase.Value>\n      <ComboboxBase.Icon\n        className={cn(\n          \"absolute top-1/2 -translate-y-1/2\",\n          iconStyles.iconRight,\n        )}\n      >\n        <CaretDownIcon size={iconStyles.iconSize} className=\"fill-kumo-ring\" />\n      </ComboboxBase.Icon>\n    </ComboboxBase.Trigger>\n  );\n}\n\n// Size-dependent styles for TriggerInput icons\nconst triggerInputIconStyles: Record<\n  KumoComboboxSize,\n  { padding: string; iconSize: number; clearRight: string; caretRight: string }\n> = {\n  xs: {\n    padding: \"pr-7\",\n    iconSize: 12,\n    clearRight: \"right-5\",\n    caretRight: \"right-1\",\n  },\n  sm: {\n    padding: \"pr-9\",\n    iconSize: 14,\n    clearRight: \"right-6\",\n    caretRight: \"right-1.5\",\n  },\n  base: {\n    padding: \"pr-12\",\n    iconSize: 16,\n    clearRight: \"right-8\",\n    caretRight: \"right-2\",\n  },\n  lg: {\n    padding: \"pr-14\",\n    iconSize: 18,\n    clearRight: \"right-9\",\n    caretRight: \"right-3\",\n  },\n};\n\nfunction TriggerInput(props: ComboboxBase.Input.Props) {\n  const size = useContext(ComboboxSizeContext);\n  const iconStyles = triggerInputIconStyles[size];\n\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({ size }), \"w-full\", iconStyles.padding)}\n      />\n\n      <ComboboxBase.Clear\n        className={cn(\n          \"absolute top-1/2 flex -translate-y-1/2 cursor-pointer bg-transparent p-0\",\n          iconStyles.clearRight,\n        )}\n      >\n        <XIcon size={iconStyles.iconSize} />\n      </ComboboxBase.Clear>\n\n      <ComboboxBase.Trigger className=\"p-0\">\n        <ComboboxBase.Icon\n          className={cn(\n            \"absolute top-1/2 flex -translate-y-1/2 cursor-pointer\",\n            iconStyles.caretRight,\n          )}\n        >\n          <CaretDownIcon\n            size={iconStyles.iconSize}\n            className=\"fill-kumo-ring\"\n          />\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-kumo-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-kumo-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={cn(\n        \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n        props.className,\n      )}\n    />\n  );\n}\n\nfunction Group(props: ComboboxBase.Group.Props) {\n  return (\n    <ComboboxBase.Group\n      {...props}\n      className=\"border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n    />\n  );\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-kumo-overlay px-2 py-1\"\n    >\n      {props.children}\n      <ComboboxBase.ChipRemove className=\"cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover\">\n        <XIcon size={12} weight=\"bold\" />\n      </ComboboxBase.ChipRemove>\n    </ComboboxBase.Chip>\n  );\n}\n\n// Map size to min-height class for TriggerMultipleWithInput\nconst sizeToMinHeight: Record<KumoComboboxSize, string> = {\n  xs: \"min-h-5\",\n  sm: \"min-h-6.5\",\n  base: \"min-h-9\",\n  lg: \"min-h-10\",\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  const size = useContext(ComboboxSizeContext);\n  // Determine which value to use for rendering chips\n  const chipsToRender = controlledValue;\n\n  return (\n    <ComboboxBase.Chips\n      className={cn(\n        inputVariants({ size }),\n        cn(\"flex flex-col\", \"gap-1 p-1\", sizeToMinHeight[size], \"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"],"names":["KUMO_INPUT_VARIANTS","ComboboxSizeContext","createContext","Root","label","required","labelTooltip","description","error","children","size","props","comboboxControl","jsx","ComboboxBase.Root","Field","Content","className","align","sideOffset","alignOffset","side","ComboboxBase.Portal","ComboboxBase.Positioner","ComboboxBase.Popup","cn","triggerValueIconStyles","TriggerValue","useContext","iconStyles","jsxs","ComboboxBase.Trigger","inputVariants","ComboboxBase.Value","ComboboxBase.Icon","CaretDownIcon","triggerInputIconStyles","TriggerInput","ComboboxBase.Input","ComboboxBase.Clear","XIcon","Item","ComboboxBase.Item","ComboboxBase.ItemIndicator","CheckIcon","Empty","ComboboxBase.Empty","Input","List","ComboboxBase.List","GroupLabel","ComboboxBase.GroupLabel","Group","ComboboxBase.Group","Chip","ComboboxBase.Chip","ComboboxBase.ChipRemove","sizeToMinHeight","TriggerMultipleWithInput","placeholder","renderItem","inputSide","controlledValue","chipsToRender","ComboboxBase.Chips","item","internalValue","Fragment","Combobox","ComboboxBase.Collection"],"mappings":"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"}

package/dist/command-line/cli.js

@@ -497,6 +497,10 @@ function getRegistryPath4() {
 function getBlocksSourcePath() {
   const __dirname = dirname4(fileURLToPath4(import.meta.url));
   const possiblePaths = [
+    join5(__dirname, "..", "..", "blocks-source"),
+    join5(__dirname, "..", "blocks-source"),
+    join5(__dirname, "blocks-source"),
+    // Fallback to old location for backwards compatibility during development
     join5(__dirname, "..", "..", "src", "blocks"),
     join5(__dirname, "..", "src", "blocks"),
     join5(__dirname, "src", "blocks")

package/dist/command-line/commands/add.js

@@ -148,6 +148,10 @@ function getRegistryPath() {
 function getBlocksSourcePath() {
   const __dirname = dirname(fileURLToPath(import.meta.url));
   const possiblePaths = [
+    join2(__dirname, "..", "..", "blocks-source"),
+    join2(__dirname, "..", "blocks-source"),
+    join2(__dirname, "blocks-source"),
+    // Fallback to old location for backwards compatibility during development
     join2(__dirname, "..", "..", "src", "blocks"),
     join2(__dirname, "..", "src", "blocks"),
     join2(__dirname, "src", "blocks")