@krizaka/ui 2.2.0 → 2.4.0

package/dist/chunk-RUPNPMP3.js

@@ -0,0 +1,103 @@
+"use client";
+import {
+  LoaderGlyph
+} from "./chunk-WEVYKZIF.js";
+
+// src/button/button.tsx
+import { Slot } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = tv({
+  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] [&[data-loading]]:opacity-100",
+  variants: {
+    variant: {
+      primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
+      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).
+      gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110",
+      secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
+      outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent",
+      ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
+      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest
+      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).
+      danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
+    },
+    size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
+    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the
+    // focus ring and the hover follow the cut, unlike a clip-path.
+    shape: { rounded: "rounded-lg", pill: "rounded-full", cut: "rounded-[10px] [corner-shape:bevel]" }
+  },
+  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
+});
+var STATUS_TEXT = { success: "text-fg-success", error: "text-fg-danger" };
+function Button({
+  asChild,
+  loading,
+  progress,
+  status,
+  announce,
+  indicator = true,
+  shimmer,
+  magnetic,
+  variant,
+  size,
+  shape,
+  className,
+  disabled,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  const known = loading && typeof progress === "number" && Number.isFinite(progress);
+  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;
+  const glyph = indicator && !asChild && (loading || status) ? status ?? "loading" : null;
+  const filled = variant === "primary" || variant === "gradient";
+  const button = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      "aria-busy": loading || void 0,
+      "data-loading": loading ? "" : void 0,
+      "data-variant": variant ?? "secondary",
+      "data-kz-status": status ?? void 0,
+      "data-kz-magnetic": magnetic ? "" : void 0,
+      disabled: asChild ? void 0 : disabled || loading,
+      "aria-disabled": asChild && (disabled || loading) ? true : void 0,
+      className: buttonVariants({
+        variant,
+        size,
+        shape,
+        className: [known && "relative isolate overflow-hidden", shimmer && "kz-sheen", className].filter(Boolean).join(" ") || void 0
+      }),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        known && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500", style: { width: `${ratio * 100}%` } }),
+        glyph && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-slot": "indicator",
+            className: "-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0",
+            children: /* @__PURE__ */ jsx("span", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(LoaderGlyph, { state: glyph, value: known ? ratio : null, className: ["h-4 w-4", glyph !== "loading" && !filled && STATUS_TEXT[glyph]].filter(Boolean).join(" ") }) })
+          }
+        ),
+        children
+      ] })
+    }
+  );
+  if (announce === void 0 || asChild) return button;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    button,
+    /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: announce })
+  ] });
+}
+function IconButton({ label, size = "icon", children, ...props }) {
+  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);
+  return /* @__PURE__ */ jsx(Button, { "aria-label": label, title: label, size, ...props, children: swap ? null : children });
+}
+
+export {
+  buttonVariants,
+  Button,
+  IconButton
+};
+//# sourceMappingURL=chunk-RUPNPMP3.js.map

package/dist/chunk-RUPNPMP3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const buttonVariants = tv({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] \" +\n    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the\n    // focus ring and the hover follow the cut, unlike a clip-path.\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\", cut: \"rounded-[10px] [corner-shape:bevel]\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * rounded · pill · cut (45° corners, the Krizaka chamfer).\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** A sheen of light crosses the button on hover — for the one action a page is about. */\n    shimmer?: boolean;\n    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer,\n  magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      data-kz-magnetic={magnetic ? \"\" : undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: [known && \"relative isolate overflow-hidden\", shimmer && \"kz-sheen\", className].filter(Boolean).join(\" \") || undefined,\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={[\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph]].filter(Boolean).join(\" \")} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-RUPRYJ45.js

@@ -0,0 +1,82 @@
+"use client";
+
+// src/slider/slider.tsx
+import { Slider as SliderPrimitive } from "radix-ui";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var slider = tv({
+  slots: {
+    root: "flex flex-col gap-2",
+    header: "flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary",
+    value: "font-mono text-[11px] tabular-nums text-fg-secondary",
+    control: "relative flex h-6 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40",
+    track: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-3",
+    range: "absolute h-full rounded-full bg-linear-to-r from-accent to-accent-2",
+    thumb: "block h-5 w-5 cursor-grab rounded-full border border-border-strong bg-fg-on-media shadow-md transition-[box-shadow] focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring/50 active:cursor-grabbing"
+  }
+});
+var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : v;
+function Slider({
+  value,
+  defaultValue,
+  onValueChange,
+  onValueCommit,
+  label,
+  thumbLabels,
+  formatValue = String,
+  showLabel,
+  origin,
+  min = 0,
+  max = 100,
+  className,
+  ...props
+}) {
+  const s = slider();
+  const range = Array.isArray(value ?? defaultValue);
+  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);
+  const current = toArray(value) ?? inner;
+  const out = (next) => range ? next : next[0];
+  const pct = (v) => (v - min) / (max - min || 1) * 100;
+  const fill = origin !== void 0 && !range ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` } : void 0;
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), "data-range": range ? "" : void 0, children: [
+    showLabel && /* @__PURE__ */ jsxs("div", { className: s.header(), children: [
+      /* @__PURE__ */ jsx("span", { id: `${id}-label`, children: label }),
+      /* @__PURE__ */ jsx("span", { className: s.value(), "aria-hidden": true, children: current.map(formatValue).join(" \u2013 ") })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        min,
+        max,
+        value: current,
+        onValueChange: (next) => {
+          if (value === void 0) setInner(next);
+          onValueChange?.(out(next));
+        },
+        onValueCommit: onValueCommit && ((next) => onValueCommit(out(next))),
+        className: s.control(),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: s.track(), children: fill ? /* @__PURE__ */ jsx("span", { "data-origin": "", className: s.range(), style: fill }) : /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: s.range() }) }),
+          current.map((v, i) => /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              "aria-label": range ? thumbLabels?.[i] ?? label : showLabel ? void 0 : label,
+              "aria-labelledby": !range && showLabel ? `${id}-label` : void 0,
+              "aria-valuetext": formatValue(v),
+              className: s.thumb()
+            },
+            i
+          ))
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Slider
+};
+//# sourceMappingURL=chunk-RUPRYJ45.js.map

package/dist/chunk-RUPRYJ45.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider/slider.tsx"],"sourcesContent":["// Client. Radix Slider: role=\"slider\" on each thumb, arrows / Page Up / Page Down / Home / End, a range with two\n// thumbs. The words arrive as props: `label` names the thumb(s), `formatValue` gives the aria-valuetext and the value\n// shown next to a visible label.\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const slider = tv({\n  slots: {\n    root: \"flex flex-col gap-2\",\n    header: \"flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary\",\n    value: \"font-mono text-[11px] tabular-nums text-fg-secondary\",\n    control:\n      \"relative flex h-6 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40\",\n    track: \"relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-3\",\n    range: \"absolute h-full rounded-full bg-linear-to-r from-accent to-accent-2\",\n    thumb:\n      \"block h-5 w-5 cursor-grab rounded-full border border-border-strong bg-fg-on-media shadow-md transition-[box-shadow] \" +\n      \"focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring/50 active:cursor-grabbing\",\n  },\n});\n\nexport type SliderValue = number | [number, number];\n\nexport type SliderProps<V extends SliderValue = number> = Omit<\n  React.ComponentProps<typeof SliderPrimitive.Root>,\n  \"value\" | \"defaultValue\" | \"onValueChange\" | \"onValueCommit\" | \"children\"\n> & {\n  /** One number (a thumb) or two (a range). Controlled with `onValueChange`. */\n  value?: V;\n  /** The value at first, uncontrolled: one number, or two for a range. */\n  defaultValue?: V;\n  /** Called on every move, with one number or two. */\n  onValueChange?: (value: V) => void;\n  /** Called once the drag or the key press ends. */\n  onValueCommit?: (value: V) => void;\n  /** The accessible name — of the thumb, or of both thumbs of a range — passed translated. */\n  label: string;\n  /** For a range: each thumb's own name ([\"Minimum\", \"Maximum\"]), passed translated. */\n  thumbLabels?: [string, string];\n  /** The value as words (aria-valuetext) and as shown: \"1.5×\", \"−12 %\", \"3 min\". */\n  formatValue?: (value: number) => string;\n  /** Shows the label and the value above the track. Without it, `label` only names the thumb. */\n  showLabel?: boolean;\n  /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One thumb only. */\n  origin?: number;\n};\n\nconst toArray = (v: SliderValue | undefined) => (v === undefined ? undefined : typeof v === \"number\" ? [v] : v);\n\n/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`. */\nexport function Slider<V extends SliderValue = number>({\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  label,\n  thumbLabels,\n  formatValue = String,\n  showLabel,\n  origin,\n  min = 0,\n  max = 100,\n  className,\n  ...props\n}: SliderProps<V>) {\n  const s = slider();\n  const range = Array.isArray(value ?? defaultValue);\n  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);\n  const current = toArray(value) ?? inner;\n  const out = (next: number[]) => (range ? next : next[0]) as V;\n  const pct = (v: number) => ((v - min) / (max - min || 1)) * 100;\n  const fill =\n    origin !== undefined && !range\n      ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` }\n      : undefined;\n  const id = React.useId();\n  return (\n    <div className={s.root({ className })} data-range={range ? \"\" : undefined}>\n      {showLabel && (\n        <div className={s.header()}>\n          <span id={`${id}-label`}>{label}</span>\n          <span className={s.value()} aria-hidden>\n            {current.map(formatValue).join(\" – \")}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        min={min}\n        max={max}\n        value={current}\n        onValueChange={(next) => {\n          if (value === undefined) setInner(next);\n          onValueChange?.(out(next));\n        }}\n        onValueCommit={onValueCommit && ((next) => onValueCommit(out(next)))}\n        className={s.control()}\n        {...props}\n      >\n        <SliderPrimitive.Track className={s.track()}>\n          {fill ? <span data-origin=\"\" className={s.range()} style={fill} /> : <SliderPrimitive.Range className={s.range()} />}\n        </SliderPrimitive.Track>\n        {current.map((v, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            aria-label={range ? (thumbLabels?.[i] ?? label) : showLabel ? undefined : label}\n            aria-labelledby={!range && showLabel ? `${id}-label` : undefined}\n            aria-valuetext={formatValue(v)}\n            className={s.thumb()}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,UAAU,uBAAuB;AAC1C,YAAY,WAAW;AACvB,SAAS,UAAU;AA2EX,SACE,KADF;AAzED,IAAM,SAAS,GAAG;AAAA,EACvB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SACE;AAAA,IACF,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OACE;AAAA,EAEJ;AACF,CAAC;AA4BD,IAAM,UAAU,CAAC,MAAgC,MAAM,SAAY,SAAY,OAAO,MAAM,WAAW,CAAC,CAAC,IAAI;AAGtG,SAAS,OAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,IAAI,OAAO;AACjB,QAAM,QAAQ,MAAM,QAAQ,SAAS,YAAY;AACjD,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,MAAM,QAAQ,YAAY,KAAK,CAAC,GAAG,CAAC;AAC7E,QAAM,UAAU,QAAQ,KAAK,KAAK;AAClC,QAAM,MAAM,CAAC,SAAoB,QAAQ,OAAO,KAAK,CAAC;AACtD,QAAM,MAAM,CAAC,OAAgB,IAAI,QAAQ,MAAM,OAAO,KAAM;AAC5D,QAAM,OACJ,WAAW,UAAa,CAAC,QACrB,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI,MAAM,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,MAAM,KAAK,IAAI,IAAI,MAAM,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,IAChH;AACN,QAAM,KAAW,YAAM;AACvB,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,cAAY,QAAQ,KAAK,QAC7D;AAAA,iBACC,qBAAC,SAAI,WAAW,EAAE,OAAO,GACvB;AAAA,0BAAC,UAAK,IAAI,GAAG,EAAE,UAAW,iBAAM;AAAA,MAChC,oBAAC,UAAK,WAAW,EAAE,MAAM,GAAG,eAAW,MACpC,kBAAQ,IAAI,WAAW,EAAE,KAAK,UAAK,GACtC;AAAA,OACF;AAAA,IAEF;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe,CAAC,SAAS;AACvB,cAAI,UAAU,OAAW,UAAS,IAAI;AACtC,0BAAgB,IAAI,IAAI,CAAC;AAAA,QAC3B;AAAA,QACA,eAAe,kBAAkB,CAAC,SAAS,cAAc,IAAI,IAAI,CAAC;AAAA,QAClE,WAAW,EAAE,QAAQ;AAAA,QACpB,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GACvC,iBAAO,oBAAC,UAAK,eAAY,IAAG,WAAW,EAAE,MAAM,GAAG,OAAO,MAAM,IAAK,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GAAG,GACpH;AAAA,UACC,QAAQ,IAAI,CAAC,GAAG,MACf;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEC,cAAY,QAAS,cAAc,CAAC,KAAK,QAAS,YAAY,SAAY;AAAA,cAC1E,mBAAiB,CAAC,SAAS,YAAY,GAAG,EAAE,WAAW;AAAA,cACvD,kBAAgB,YAAY,CAAC;AAAA,cAC7B,WAAW,EAAE,MAAM;AAAA;AAAA,YAJd;AAAA,UAKP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-VDR2EP6K.js

@@ -0,0 +1,49 @@
+"use client";
+
+// src/sliding-indicator.ts
+import * as React from "react";
+var useIsoLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function useSlidingIndicator({ item, active, follow = false }) {
+  const ref = React.useRef(null);
+  const place = React.useCallback((target) => {
+    const list = ref.current;
+    if (!list) return;
+    if (!(target instanceof HTMLElement) || !list.contains(target)) {
+      list.removeAttribute("data-indicator");
+      return;
+    }
+    const a = target.getBoundingClientRect();
+    const b = list.getBoundingClientRect();
+    list.style.setProperty("--kz-ind-x", `${a.left - b.left + list.scrollLeft}px`);
+    list.style.setProperty("--kz-ind-y", `${a.top - b.top + list.scrollTop}px`);
+    list.style.setProperty("--kz-ind-w", `${a.width}px`);
+    list.style.setProperty("--kz-ind-h", `${a.height}px`);
+    list.setAttribute("data-indicator", "on");
+  }, []);
+  const rest = React.useCallback(() => place(ref.current?.querySelector(active) ?? null), [place, active]);
+  useIsoLayoutEffect(() => {
+    const list = ref.current;
+    if (!list) return;
+    rest();
+    const resize = new ResizeObserver(rest);
+    resize.observe(list);
+    const changes = new MutationObserver(rest);
+    changes.observe(list, { subtree: true, attributes: true, attributeFilter: ["data-state", "aria-current", "data-active"] });
+    return () => {
+      resize.disconnect();
+      changes.disconnect();
+    };
+  }, [rest]);
+  const handlers = follow ? {
+    onPointerOver: (e) => place(e.target.closest(item)),
+    onPointerLeave: rest,
+    onFocus: (e) => place(e.target.closest(item)),
+    onBlur: rest
+  } : {};
+  return { ref, handlers };
+}
+
+export {
+  useSlidingIndicator
+};
+//# sourceMappingURL=chunk-VDR2EP6K.js.map

package/dist/chunk-VDR2EP6K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sliding-indicator.ts"],"sourcesContent":["// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, follow = false }: { item: string; active: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(() => place(ref.current?.querySelector(active) ?? null), [place, active]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => place((e.target as Element).closest(item)),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => place((e.target as Element).closest(item)),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n"],"mappings":";;;AAIA,YAAY,WAAW;AAEvB,IAAM,qBAAqB,OAAO,WAAW,cAAoB,kBAAkB;AAE5E,SAAS,oBAA2C,EAAE,MAAM,QAAQ,SAAS,MAAM,GAAuD;AAC/I,QAAM,MAAY,aAAU,IAAI;AAChC,QAAM,QAAc,kBAAY,CAAC,WAA2B;AAC1D,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AACX,QAAI,EAAE,kBAAkB,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG;AAC9D,WAAK,gBAAgB,gBAAgB;AACrC;AAAA,IACF;AACA,UAAM,IAAI,OAAO,sBAAsB;AACvC,UAAM,IAAI,KAAK,sBAAsB;AACrC,SAAK,MAAM,YAAY,cAAc,GAAG,EAAE,OAAO,EAAE,OAAO,KAAK,UAAU,IAAI;AAC7E,SAAK,MAAM,YAAY,cAAc,GAAG,EAAE,MAAM,EAAE,MAAM,KAAK,SAAS,IAAI;AAC1E,SAAK,MAAM,YAAY,cAAc,GAAG,EAAE,KAAK,IAAI;AACnD,SAAK,MAAM,YAAY,cAAc,GAAG,EAAE,MAAM,IAAI;AACpD,SAAK,aAAa,kBAAkB,IAAI;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,QAAM,OAAa,kBAAY,MAAM,MAAM,IAAI,SAAS,cAAc,MAAM,KAAK,IAAI,GAAG,CAAC,OAAO,MAAM,CAAC;AAEvG,qBAAmB,MAAM;AACvB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AACX,SAAK;AACL,UAAM,SAAS,IAAI,eAAe,IAAI;AACtC,WAAO,QAAQ,IAAI;AACnB,UAAM,UAAU,IAAI,iBAAiB,IAAI;AACzC,YAAQ,QAAQ,MAAM,EAAE,SAAS,MAAM,YAAY,MAAM,iBAAiB,CAAC,cAAc,gBAAgB,aAAa,EAAE,CAAC;AACzH,WAAO,MAAM;AACX,aAAO,WAAW;AAClB,cAAQ,WAAW;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,WAAW,SACb;AAAA,IACE,eAAe,CAAC,MAA0B,MAAO,EAAE,OAAmB,QAAQ,IAAI,CAAC;AAAA,IACnF,gBAAgB;AAAA,IAChB,SAAS,CAAC,MAAwB,MAAO,EAAE,OAAmB,QAAQ,IAAI,CAAC;AAAA,IAC3E,QAAQ;AAAA,EACV,IACA,CAAC;AACL,SAAO,EAAE,KAAK,SAAS;AACzB;","names":[]}

package/dist/chunk-WEVYKZIF.js

@@ -0,0 +1,33 @@
+"use client";
+
+// src/spinner/glyph.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var HEX = "M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z";
+function LoaderGlyph({ state = "loading", value, ...props }) {
+  const known = typeof value === "number" && Number.isFinite(value);
+  const fill = state !== "loading" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, "data-state": state, "data-progress": fill === null ? void 0 : fill, ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: HEX, stroke: "currentColor", strokeOpacity: "0.22", strokeWidth: "2.2", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: HEX,
+        pathLength: 100,
+        stroke: "currentColor",
+        strokeWidth: "2.2",
+        strokeLinejoin: "round",
+        strokeLinecap: "round",
+        className: "kz-loader-trace",
+        strokeDasharray: fill === null ? void 0 : `${fill} ${100 - fill}`
+      }
+    ),
+    state === "loading" && /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.6", fill: "currentColor", className: "kz-loader-node" }),
+    state === "success" && /* @__PURE__ */ jsx("path", { d: "M8.3 12.3l2.6 2.6 4.9-5.3", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", className: "kz-loader-mark" }),
+    state === "error" && /* @__PURE__ */ jsx("path", { d: "M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", className: "kz-loader-mark" })
+  ] });
+}
+
+export {
+  LoaderGlyph
+};
+//# sourceMappingURL=chunk-WEVYKZIF.js.map

package/dist/chunk-WEVYKZIF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner/glyph.tsx"],"sourcesContent":["// The Krizaka loader glyph, server-safe: a hexagon (the marks' shape) traced by a segment of light around a node that\n// breathes; determinate, it fills to its value; done, the trace closes and a check (or a cross) draws itself. Animated by\n// motion.css (`kz-loader-*`); still under prefers-reduced-motion — a segment at rest and the node lit, never blank.\nimport type * as React from \"react\";\n\n/** The hexagon, pointy top, radius 9 around (12, 12). */\nconst HEX = \"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\";\n\n/** What the glyph shows: a wait (with an optional value), or how it ended. */\nexport type LoaderGlyphState = \"loading\" | \"success\" | \"error\";\n\nexport interface LoaderGlyphProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** loading · success · error. */\n  state?: LoaderGlyphState;\n  /** Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. */\n  value?: number | null;\n}\n\n/** The glyph alone (decorative): the Spinner, the Loader and the Button's `loading` draw it. */\nexport function LoaderGlyph({ state = \"loading\", value, ...props }: LoaderGlyphProps) {\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const fill = state !== \"loading\" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden data-state={state} data-progress={fill === null ? undefined : fill} {...props}>\n      <path d={HEX} stroke=\"currentColor\" strokeOpacity=\"0.22\" strokeWidth=\"2.2\" strokeLinejoin=\"round\" />\n      <path\n        d={HEX}\n        pathLength={100}\n        stroke=\"currentColor\"\n        strokeWidth=\"2.2\"\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        className=\"kz-loader-trace\"\n        strokeDasharray={fill === null ? undefined : `${fill} ${100 - fill}`}\n      />\n      {state === \"loading\" && <circle cx=\"12\" cy=\"12\" r=\"2.6\" fill=\"currentColor\" className=\"kz-loader-node\" />}\n      {state === \"success\" && <path d=\"M8.3 12.3l2.6 2.6 4.9-5.3\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"kz-loader-mark\" />}\n      {state === \"error\" && <path d=\"M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" className=\"kz-loader-mark\" />}\n    </svg>\n  );\n}\n"],"mappings":";;;AAuBI,SACE,KADF;AAjBJ,IAAM,MAAM;AAaL,SAAS,YAAY,EAAE,QAAQ,WAAW,OAAO,GAAG,MAAM,GAAqB;AACpF,QAAM,QAAQ,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK;AAChE,QAAM,OAAO,UAAU,YAAY,MAAM,QAAQ,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,IAAI,GAAG,IAAI;AACrG,SACE,qBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,eAAW,MAAC,cAAY,OAAO,iBAAe,SAAS,OAAO,SAAY,MAAO,GAAG,OACvH;AAAA,wBAAC,UAAK,GAAG,KAAK,QAAO,gBAAe,eAAc,QAAO,aAAY,OAAM,gBAAe,SAAQ;AAAA,IAClG;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACH,YAAY;AAAA,QACZ,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,gBAAe;AAAA,QACf,eAAc;AAAA,QACd,WAAU;AAAA,QACV,iBAAiB,SAAS,OAAO,SAAY,GAAG,IAAI,IAAI,MAAM,IAAI;AAAA;AAAA,IACpE;AAAA,IACC,UAAU,aAAa,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM,MAAK,gBAAe,WAAU,kBAAiB;AAAA,IACtG,UAAU,aAAa,oBAAC,UAAK,GAAE,6BAA4B,YAAY,IAAI,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,WAAU,kBAAiB;AAAA,IAC3L,UAAU,WAAW,oBAAC,UAAK,GAAE,sCAAqC,YAAY,IAAI,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,WAAU,kBAAiB;AAAA,KAC9K;AAEJ;","names":[]}

package/dist/chunk-XUMJA5ZI.js

@@ -0,0 +1,283 @@
+"use client";
+import {
+  Chip
+} from "./chunk-YH4LMWRU.js";
+import {
+  useListbox
+} from "./chunk-ZIXB33X7.js";
+import {
+  useControllable,
+  useDebouncedCallback
+} from "./chunk-EUPTXKH7.js";
+import {
+  CheckGlyph,
+  ChevronGlyph,
+  CloseGlyph,
+  PlusGlyph
+} from "./chunk-YX6CNVJA.js";
+
+// src/combobox/combobox.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var combobox = tv({
+  slots: {
+    root: "relative flex w-full flex-col gap-1.5",
+    label: "text-xs font-semibold text-fg-secondary",
+    control: "flex min-h-11 w-full flex-wrap items-center gap-1.5 rounded-lg border border-border-default bg-surface-2 py-1.5 pl-2 pr-1 text-sm text-fg transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring data-[invalid]:border-danger data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+    input: "h-8 min-w-24 flex-1 bg-transparent px-1 text-sm text-fg outline-hidden placeholder:text-fg-muted disabled:cursor-not-allowed",
+    icon: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    list: "absolute inset-x-0 top-full z-50 mt-1 max-h-64 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg",
+    option: "flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg data-[active]:bg-surface-3 aria-disabled:cursor-not-allowed aria-disabled:opacity-40",
+    check: "h-4 w-4 shrink-0 text-fg-accent",
+    description: "block text-xs text-fg-secondary",
+    status: "px-2.5 py-3 text-sm text-fg-secondary",
+    hint: "text-xs text-fg-secondary",
+    error: "flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger"
+  }
+});
+var comboboxLabels = {
+  empty: "No results",
+  loading: "Searching\u2026",
+  error: "Search unavailable",
+  create: (query) => `Create \u201C${query}\u201D`,
+  remove: (label) => `Remove ${label}`,
+  clear: "Clear",
+  toggle: "Show options",
+  results: (count) => count === 1 ? "1 result" : `${count} results`
+};
+var fold = (text) => text.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+var defaultFilter = (option, query) => fold(option.label).includes(fold(query.trim()));
+function Combobox(props) {
+  const {
+    label,
+    hideLabel,
+    options,
+    onSearch,
+    debounce = 250,
+    filter = defaultFilter,
+    creatable,
+    onCreate = (query2) => ({ value: query2, label: query2 }),
+    separators,
+    placeholder,
+    hint,
+    error,
+    disabled,
+    name,
+    labels: given,
+    className,
+    id: givenId
+  } = props;
+  const labels = { ...comboboxLabels, ...given };
+  const s = combobox();
+  const autoId = React.useId();
+  const inputId = givenId ?? `${autoId}-input`;
+  const hintId = `${autoId}-hint`;
+  const errorId = `${autoId}-error`;
+  const multiple = props.multiple === true;
+  const [values, setValues] = useControllable(
+    props.value === void 0 ? void 0 : multiple ? props.value : props.value ? [props.value] : [],
+    multiple ? props.defaultValue ?? [] : props.defaultValue ? [props.defaultValue] : [],
+    (next) => multiple ? props.onValueChange?.([...next]) : props.onValueChange?.(next[0] ?? null)
+  );
+  const single = multiple ? null : values[0] ?? null;
+  const [query, setQuery] = React.useState(single?.label ?? "");
+  const [editing, setEditing] = React.useState(false);
+  const [open, setOpenState] = React.useState(false);
+  const [remote, setRemote] = React.useState({ query: "", options: [], state: "idle" });
+  const request = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const shownQuery = !multiple && !editing ? single?.label ?? "" : query;
+  const searchQuery = editing ? query : "";
+  const search = useDebouncedCallback((text) => {
+    if (!onSearch) return;
+    request.current?.abort();
+    const controller = new AbortController();
+    request.current = controller;
+    onSearch(text, controller.signal).then(
+      (found) => !controller.signal.aborted && setRemote({ query: text, options: found, state: "idle" }),
+      () => !controller.signal.aborted && setRemote({ query: text, options: [], state: "error" })
+    );
+  }, debounce);
+  React.useEffect(() => () => request.current?.abort(), []);
+  const setOpen = (next) => {
+    if (next && onSearch && remote.state === "idle" && remote.query !== searchQuery) {
+      setRemote((r) => ({ ...r, state: "loading" }));
+      search(searchQuery);
+    }
+    setOpenState(next);
+  };
+  const chosen = new Set(values.map((v) => v.value));
+  const source = onSearch ? remote.options : (options ?? []).filter((o) => !searchQuery.trim() || filter(o, searchQuery));
+  const full = multiple && props.maxSelected !== void 0 && values.length >= props.maxSelected;
+  const trimmed = searchQuery.trim();
+  const exact = [...source, ...values].some((o) => fold(o.label) === fold(trimmed));
+  const items = [
+    ...source.map((option) => ({ kind: "option", option })),
+    ...creatable && trimmed && !exact && !full ? [{ kind: "create", query: trimmed }] : []
+  ];
+  const isDisabled = (i) => {
+    const item = items[i];
+    if (!item) return true;
+    if (item.kind === "create") return false;
+    return Boolean(item.option.disabled) || full && !chosen.has(item.option.value);
+  };
+  const commit = (option) => {
+    if (multiple) {
+      setValues(chosen.has(option.value) ? values.filter((v) => v.value !== option.value) : [...values, option]);
+      setQuery("");
+      listbox.setActive(-1);
+    } else {
+      setValues([option]);
+      setQuery(option.label);
+      setEditing(false);
+      setOpenState(false);
+    }
+  };
+  const create = (text) => {
+    const clean = text.trim();
+    if (!clean || full) return;
+    const existing = [...source, ...values].find((o) => fold(o.label) === fold(clean));
+    if (multiple && existing && chosen.has(existing.value)) {
+      setQuery("");
+      return;
+    }
+    commit(existing ?? onCreate(clean));
+  };
+  const pick = (i) => {
+    const item = items[i];
+    if (!item) return;
+    if (item.kind === "create") create(item.query);
+    else commit(item.option);
+  };
+  const listbox = useListbox({ count: items.length, isDisabled, onPick: pick, open, setOpen });
+  const onChange = (text) => {
+    setQuery(text);
+    setEditing(true);
+    listbox.setActive(-1);
+    if (onSearch) {
+      setRemote((r) => ({ ...r, state: "loading" }));
+      search(text);
+    }
+    setOpenState(true);
+    if (!multiple && text === "" && single) setValues([]);
+  };
+  const onKeyDown = (event) => {
+    if (separators?.includes(event.key) && query.trim()) {
+      event.preventDefault();
+      create(query);
+      return;
+    }
+    if (listbox.onKeyDown(event)) return;
+    if (event.key === "Enter" && creatable && query.trim()) {
+      event.preventDefault();
+      create(query);
+    } else if (event.key === "Backspace" && multiple && query === "" && values.length > 0) {
+      setValues(values.slice(0, -1));
+    } else if (event.key === "Escape" && !multiple && editing) {
+      setEditing(false);
+      setQuery(single?.label ?? "");
+    }
+  };
+  const onPaste = (event) => {
+    if (!separators?.length || !multiple) return;
+    const text = event.clipboardData.getData("text");
+    const parts = text.split(new RegExp(`[${separators.map((c) => c.replace(/[\\\]^-]/g, "\\$&")).join("")}\\n]`)).map((p) => p.trim()).filter(Boolean);
+    if (parts.length < 2) return;
+    event.preventDefault();
+    const next = [...values];
+    for (const part of parts) {
+      if (props.maxSelected !== void 0 && next.length >= props.maxSelected) break;
+      if (next.some((v) => fold(v.label) === fold(part))) continue;
+      next.push((options ?? []).find((o) => fold(o.label) === fold(part)) ?? onCreate(part));
+    }
+    setValues(next);
+  };
+  const loading = Boolean(onSearch) && remote.state === "loading";
+  const failed = Boolean(onSearch) && remote.state === "error";
+  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.root({ className }),
+      onBlur: (event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) return;
+        setOpenState(false);
+        if (!multiple) {
+          setEditing(false);
+          setQuery(single?.label ?? "");
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: hideLabel ? "sr-only" : s.label(), children: label }),
+        /* @__PURE__ */ jsxs("div", { className: s.control(), "data-invalid": error ? "" : void 0, "data-disabled": disabled ? "" : void 0, onMouseDown: (event) => {
+          if (event.target === event.currentTarget) {
+            event.preventDefault();
+            inputRef.current?.focus();
+          }
+        }, children: [
+          multiple && values.map((option) => /* @__PURE__ */ jsx(Chip, { size: "sm", removable: true, removeLabel: labels.remove(option.label), disabled, onRemove: () => setValues(values.filter((v) => v.value !== option.value)), children: option.label }, option.value)),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: inputId,
+              type: "text",
+              autoComplete: "off",
+              spellCheck: false,
+              ...listbox.inputProps,
+              "aria-describedby": describedBy,
+              "aria-invalid": error ? true : void 0,
+              "aria-busy": loading || void 0,
+              value: shownQuery,
+              placeholder: multiple && values.length > 0 ? void 0 : placeholder,
+              disabled,
+              className: s.input(),
+              onChange: (event) => onChange(event.target.value),
+              onKeyDown,
+              onPaste,
+              onClick: () => !open && setOpen(true)
+            }
+          ),
+          !multiple && single && !disabled ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels.clear, className: s.icon(), onClick: () => {
+            setValues([]);
+            setQuery("");
+            inputRef.current?.focus();
+          }, children: /* @__PURE__ */ jsx(CloseGlyph, { className: "h-4 w-4" }) }) : null,
+          /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, "aria-label": labels.toggle, "aria-expanded": open, "aria-controls": listbox.listId, disabled, className: s.icon(), onClick: () => {
+            setOpen(!open);
+            inputRef.current?.focus();
+          }, children: /* @__PURE__ */ jsx(ChevronGlyph, { direction: open ? "up" : "down", className: "h-4 w-4" }) })
+        ] }),
+        name && values.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v.value }, v.value)),
+        /* @__PURE__ */ jsxs("div", { id: listbox.listId, role: "listbox", "aria-label": label, "aria-multiselectable": multiple || void 0, hidden: !open || items.length === 0 && !loading && !failed && !labels.empty, className: s.list(), children: [
+          open && loading && items.length === 0 ? /* @__PURE__ */ jsx("div", { className: s.status(), children: labels.loading }) : null,
+          open && failed ? /* @__PURE__ */ jsx("div", { className: s.status(), children: labels.error }) : null,
+          open && !loading && !failed && items.length === 0 && labels.empty ? /* @__PURE__ */ jsx("div", { className: s.status(), children: labels.empty }) : null,
+          open && items.map(
+            (item, i) => item.kind === "create" ? /* @__PURE__ */ jsxs("div", { ...listbox.optionProps(i, false), className: s.option(), children: [
+              /* @__PURE__ */ jsx(PlusGlyph, { className: s.check() }),
+              labels.create(item.query)
+            ] }, "__create") : /* @__PURE__ */ jsxs("div", { ...listbox.optionProps(i, chosen.has(item.option.value)), className: s.option(), children: [
+              /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: chosen.has(item.option.value) ? /* @__PURE__ */ jsx(CheckGlyph, { className: s.check() }) : null }),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                item.option.label,
+                item.option.description ? /* @__PURE__ */ jsx("span", { className: s.description(), children: item.option.description }) : null
+              ] })
+            ] }, item.option.value)
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": true, children: open && !loading ? labels.results(items.length) : "" }),
+        hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: s.hint(), children: hint }) : null,
+        error ? /* @__PURE__ */ jsx("p", { id: errorId, className: s.error(), children: error }) : null
+      ]
+    }
+  );
+}
+
+export {
+  combobox,
+  comboboxLabels,
+  Combobox
+};
+//# sourceMappingURL=chunk-XUMJA5ZI.js.map