@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/carousel.js

@@ -0,0 +1,207 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/components/ui/carousel.tsx
+/**
+* Carousel — slide container with prev/next controls.
+*
+* Built on embla-carousel; opts/plugins/setApi pass straight through to the
+* underlying embla instance.
+* Arrow-key navigation is wired in via `onKeyDownCapture` on the root, on
+* top of embla's own drag/swipe handling.
+*/
+var CarouselContext = React.createContext(null);
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+}
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+	const [slidesInView, setSlidesInView] = React.useState([]);
+	const [announcement, setAnnouncement] = React.useState("");
+	const onSelect = React.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+		setAnnouncement(`Slide ${api.selectedScrollSnap() + 1} of ${api.scrollSnapList().length}`);
+	}, []);
+	const onSlidesInView = React.useCallback((api) => {
+		if (!api) return;
+		setSlidesInView(api.slidesInView());
+	}, []);
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const handleKeyDown = React.useCallback((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [scrollPrev, scrollNext]);
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	React.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		onSlidesInView(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		api.on("reInit", onSlidesInView);
+		api.on("slidesInView", onSlidesInView);
+		return () => {
+			api?.off("select", onSelect);
+			api?.off("reInit", onSelect);
+			api?.off("reInit", onSlidesInView);
+			api?.off("slidesInView", onSlidesInView);
+		};
+	}, [
+		api,
+		onSelect,
+		onSlidesInView
+	]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			opts,
+			orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+			scrollPrev,
+			scrollNext,
+			canScrollPrev,
+			canScrollNext,
+			slidesInView
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			onKeyDownCapture: handleKeyDown,
+			className: cn("relative", className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
+			...props,
+			children: [children, /* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: announcement
+			})]
+		})
+	});
+}
+function CarouselContent({ className, children, ...props }) {
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: "overflow-hidden",
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+			...props,
+			children: React.Children.map(children, (child, index) => React.isValidElement(child) ? React.cloneElement(child, { "data-slide-index": index }) : child)
+		})
+	});
+}
+function CarouselItem({ className, "data-slide-index": slideIndex, ...props }) {
+	const { orientation, slidesInView } = useCarousel();
+	const isOffscreen = slidesInView.length > 0 && slideIndex !== void 0 && !slidesInView.includes(slideIndex);
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-slot": "carousel-item",
+		inert: isOffscreen,
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+		...props
+	});
+}
+function CarouselPrevious({ className, variant = "outline", size = "sm", ...props }) {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-previous",
+		variant,
+		size,
+		iconOnly: true,
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		"aria-label": "Previous slide",
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+}
+function CarouselNext({ className, variant = "outline", size = "sm", ...props }) {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-next",
+		variant,
+		size,
+		iconOnly: true,
+		className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		"aria-label": "Next slide",
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+}
+/**
+* WHEN TO USE
+* - Paging horizontally (or vertically) through cards or media where
+*   showing everything at once is impractical — featured items, testimonials,
+*   image galleries.
+*
+* NOT WHEN
+* - Content users need to scan or compare side by side — use a grid; a
+*   carousel hides everything but the current slide(s).
+* - Essential content that must never be missed — carousels are easy to
+*   stop paging through.
+* - Paged tabular/list data — use Pagination, not slide-based paging.
+*
+* KEY RULES
+* - `orientation="vertical"` flips both the embla axis and the previous/next
+*   button placement (rotated 90°, stacked above/below instead of beside).
+* - Number of visible slides is controlled entirely by `basis-*` on
+*   CarouselItem (e.g. `basis-1/3` shows three) — there's no `slidesToShow` prop.
+* - `useCarousel()` throws outside a `<Carousel>` — only call it from a
+*   descendant of Carousel (as CarouselContent/Item/Previous/Next do).
+* - `setApi` is how you get imperative control (`api.scrollTo(i)`, listen to
+*   `"select"`) — pass a state setter and read the api once it's set.
+*
+* USAGE
+*   <Carousel className="w-64">
+*     <CarouselContent>
+*       {slides.map((s) => (
+*         <CarouselItem key={s}><Card>...</Card></CarouselItem>
+*       ))}
+*     </CarouselContent>
+*     <CarouselPrevious />
+*     <CarouselNext />
+*   </Carousel>
+*
+*   // Three slides visible at once
+*   <CarouselItem className="basis-1/3">...</CarouselItem>
+*/
+//#endregion
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
+
+//# sourceMappingURL=carousel.js.map

package/dist/components/ui/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","names":[],"sources":["../../../src/components/ui/carousel.tsx"],"sourcesContent":["/**\n * Carousel — slide container with prev/next controls.\n *\n * Built on embla-carousel; opts/plugins/setApi pass straight through to the\n * underlying embla instance.\n * Arrow-key navigation is wired in via `onKeyDownCapture` on the root, on\n * top of embla's own drag/swipe handling.\n */\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, type TextButtonSize } from \"@/components/ui/button\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n  /** Indices embla currently considers in view — CarouselItem uses this to `inert` itself while scrolled off-screen, since embla only ever transforms slide position, never removes/hides one from the tab order or accessibility tree on its own. */\n  slidesInView: number[]\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n  const [slidesInView, setSlidesInView] = React.useState<number[]>([])\n  // \"Slide X of N\" for screen reader users — sighted users get this from\n  // seeing which slide is visible; nothing else here announces a change\n  // triggered by Previous/Next, drag, keyboard, or an autoplay plugin.\n  const [announcement, setAnnouncement] = React.useState(\"\")\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n    setAnnouncement(\n      `Slide ${api.selectedScrollSnap() + 1} of ${api.scrollSnapList().length}`\n    )\n  }, [])\n\n  const onSlidesInView = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setSlidesInView(api.slidesInView())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    onSlidesInView(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n    api.on(\"reInit\", onSlidesInView)\n    api.on(\"slidesInView\", onSlidesInView)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n      api?.off(\"reInit\", onSelect)\n      api?.off(\"reInit\", onSlidesInView)\n      api?.off(\"slidesInView\", onSlidesInView)\n    }\n  }, [api, onSelect, onSlidesInView])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n        slidesInView,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n        <span role=\"status\" className=\"sr-only\">\n          {announcement}\n        </span>\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {/* Index by position, not by cloning a prop the consumer set —\n            embla's own slidesInView()/slideNodes() are index-based against\n            this exact DOM order, so this has to match it exactly regardless\n            of whatever key/props each CarouselItem already carries. */}\n        {React.Children.map(children, (child, index) =>\n          React.isValidElement(child)\n            ? React.cloneElement(\n                child as React.ReactElement<{ \"data-slide-index\"?: number }>,\n                { \"data-slide-index\": index }\n              )\n            : child\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction CarouselItem({\n  className,\n  \"data-slide-index\": slideIndex,\n  ...props\n}: React.ComponentProps<\"div\"> & { \"data-slide-index\"?: number }) {\n  const { orientation, slidesInView } = useCarousel()\n  // Only actually withhold once embla has reported an in-view set at all —\n  // before the first \"slidesInView\" event (or if this item's index is\n  // somehow missing) every slide would otherwise start `inert`, which is\n  // worse than never applying it.\n  const isOffscreen =\n    slidesInView.length > 0 &&\n    slideIndex !== undefined &&\n    !slidesInView.includes(slideIndex)\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      // embla only ever transforms slide position — scrolled-away slides\n      // stay in the tab order and accessibility tree unless something else\n      // removes them. `inert` does both at once (and is a no-op, harmless,\n      // for the slide(s) actually in view).\n      inert={isOffscreen}\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"sm\",\n  ...props\n}: Omit<\n  React.ComponentProps<typeof Button>,\n  \"size\" | \"iconOnly\" | \"asChild\" | \"aria-label\"\n> & {\n  /** Height step of the round icon-only control; it is always square (`iconOnly`). */\n  size?: TextButtonSize\n  \"aria-label\"?: string\n}) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      iconOnly\n      className={cn(\n        \"absolute touch-manipulation rounded-full\",\n        orientation === \"horizontal\"\n          ? \"inset-y-0 -left-12 my-auto\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      aria-label=\"Previous slide\"\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"sm\",\n  ...props\n}: Omit<\n  React.ComponentProps<typeof Button>,\n  \"size\" | \"iconOnly\" | \"asChild\" | \"aria-label\"\n> & {\n  /** Height step of the round icon-only control; it is always square (`iconOnly`). */\n  size?: TextButtonSize\n  \"aria-label\"?: string\n}) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      iconOnly\n      className={cn(\n        \"absolute touch-manipulation rounded-full\",\n        orientation === \"horizontal\"\n          ? \"inset-y-0 -right-12 my-auto\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      aria-label=\"Next slide\"\n      {...props}\n    >\n      <ChevronRightIcon />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n\n/**\n * WHEN TO USE\n * - Paging horizontally (or vertically) through cards or media where\n *   showing everything at once is impractical — featured items, testimonials,\n *   image galleries.\n *\n * NOT WHEN\n * - Content users need to scan or compare side by side — use a grid; a\n *   carousel hides everything but the current slide(s).\n * - Essential content that must never be missed — carousels are easy to\n *   stop paging through.\n * - Paged tabular/list data — use Pagination, not slide-based paging.\n *\n * KEY RULES\n * - `orientation=\"vertical\"` flips both the embla axis and the previous/next\n *   button placement (rotated 90°, stacked above/below instead of beside).\n * - Number of visible slides is controlled entirely by `basis-*` on\n *   CarouselItem (e.g. `basis-1/3` shows three) — there's no `slidesToShow` prop.\n * - `useCarousel()` throws outside a `<Carousel>` — only call it from a\n *   descendant of Carousel (as CarouselContent/Item/Previous/Next do).\n * - `setApi` is how you get imperative control (`api.scrollTo(i)`, listen to\n *   `\"select\"`) — pass a state setter and read the api once it's set.\n *\n * USAGE\n *   <Carousel className=\"w-64\">\n *     <CarouselContent>\n *       {slides.map((s) => (\n *         <CarouselItem key={s}><Card>...</Card></CarouselItem>\n *       ))}\n *     </CarouselContent>\n *     <CarouselPrevious />\n *     <CarouselNext />\n *   </Carousel>\n *\n *   // Three slides visible at once\n *   <CarouselItem className=\"basis-1/3\">...</CarouselItem>\n */\n"],"mappings":"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"}

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Checkbox — boolean toggle control.
+ *
+ * Built on the Radix Checkbox primitive. Error styling is driven off
+ * `aria-invalid` (no `error` prop), and a checked state of "indeterminate"
+ * is supported for parent-of-many selection patterns.
+ */
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+declare function Checkbox({ className, checked, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+export { Checkbox };
+/**
+ * WHEN TO USE
+ * - Toggling one independent boolean value: accepting terms, a single yes/no setting
+ * - Selecting rows in a list (multi-select), including a "select all" checkbox whose
+ *   own `checked` is set to "indeterminate" when some but not all children are checked
+ *
+ * NOT WHEN
+ * - Exclusive selection from a small set — use RadioGroup
+ * - A setting that takes effect immediately with no form submission — use Switch
+ *
+ * KEY RULES
+ * - `checked` accepts true, false, or "indeterminate" — indeterminate is visual only,
+ *   the app owns the tri-state logic for parent/child checkbox groups. It renders with
+ *   the same filled/primary treatment as `true`, but with a dash instead of a check —
+ *   distinct from both `true` and `false`, not just a `true` alias.
+ * - Error state is driven entirely by `aria-invalid` — there is no `error` prop
+ * - Not a standalone label — wrap in a Label (or pair via htmlFor/id) so the text is
+ *   clickable and screen readers announce it. Inside Field's horizontal FieldContent +
+ *   FieldTitle pattern (a standalone control beside a heading `<div>`, not a `<label>`),
+ *   Checkbox instead picks up FieldTitle as `aria-labelledby` and FieldDescription/
+ *   FieldError as `aria-describedby` automatically — pass your own aria-label/
+ *   aria-labelledby/aria-describedby only to override that default.
+ * - An AI-suggested (pre-checked) option is a plain composition, not a dedicated prop: put
+ *   `AILabel` (size="sm" — never the opt-in `iconOnly` by default) beside that option as a sibling of the Label,
+ *   never inside it — AILabelTrigger is a button, and a button nested in a label is invalid
+ *   HTML that would also toggle the checkbox on every click. Use the htmlFor/id pairing for
+ *   those rows instead of the wrapping Label. Pass AILabel `edited={!checked}` and an
+ *   `onRevert` that re-checks it, so flipping an AI-suggested option turns its marker into an
+ *   undo button (AILabel's own override/undo morph, same as Input/Select/Textarea). When most
+ *   options are AI-selected, put one AILabel beside the FieldLegend instead, with `edited`
+ *   true once the checked set differs from AI's and `onRevert` restoring the whole set. See
+ *   AI/Checkbox.
+ *
+ * USAGE
+ * <Label className="flex items-center gap-2">
+ *   <Checkbox />
+ *   Accept terms and conditions
+ * </Label>
+ *
+ * <Checkbox checked="indeterminate" />
+ * <Checkbox aria-invalid />
+ */
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/ui/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAMxD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAO,EACP,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,qBAuCrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG"}

package/dist/components/ui/checkbox.js

@@ -0,0 +1,78 @@
+import { cn } from "../../lib/utils.js";
+import { FieldIdContext } from "./field.js";
+import * as React from "react";
+import { Checkbox as Checkbox$1 } from "radix-ui";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/checkbox.tsx
+/**
+* Checkbox — boolean toggle control.
+*
+* Built on the Radix Checkbox primitive. Error styling is driven off
+* `aria-invalid` (no `error` prop), and a checked state of "indeterminate"
+* is supported for parent-of-many selection patterns.
+*/
+function Checkbox({ className, checked, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }) {
+	const idContext = React.useContext(FieldIdContext);
+	const resolvedLabelledby = ariaLabelledby ?? (!props["aria-label"] ? idContext?.titleId ?? void 0 : void 0);
+	const resolvedDescribedby = ariaDescribedby ?? ([idContext?.descriptionId, idContext?.errorId].filter(Boolean).join(" ") || void 0);
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		"data-slot": "checkbox",
+		checked,
+		"aria-labelledby": resolvedLabelledby,
+		"aria-describedby": resolvedDescribedby,
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:data-[state=checked]:bg-primary dark:data-[state=indeterminate]:bg-primary", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+		})
+	});
+}
+/**
+* WHEN TO USE
+* - Toggling one independent boolean value: accepting terms, a single yes/no setting
+* - Selecting rows in a list (multi-select), including a "select all" checkbox whose
+*   own `checked` is set to "indeterminate" when some but not all children are checked
+*
+* NOT WHEN
+* - Exclusive selection from a small set — use RadioGroup
+* - A setting that takes effect immediately with no form submission — use Switch
+*
+* KEY RULES
+* - `checked` accepts true, false, or "indeterminate" — indeterminate is visual only,
+*   the app owns the tri-state logic for parent/child checkbox groups. It renders with
+*   the same filled/primary treatment as `true`, but with a dash instead of a check —
+*   distinct from both `true` and `false`, not just a `true` alias.
+* - Error state is driven entirely by `aria-invalid` — there is no `error` prop
+* - Not a standalone label — wrap in a Label (or pair via htmlFor/id) so the text is
+*   clickable and screen readers announce it. Inside Field's horizontal FieldContent +
+*   FieldTitle pattern (a standalone control beside a heading `<div>`, not a `<label>`),
+*   Checkbox instead picks up FieldTitle as `aria-labelledby` and FieldDescription/
+*   FieldError as `aria-describedby` automatically — pass your own aria-label/
+*   aria-labelledby/aria-describedby only to override that default.
+* - An AI-suggested (pre-checked) option is a plain composition, not a dedicated prop: put
+*   `AILabel` (size="sm" — never the opt-in `iconOnly` by default) beside that option as a sibling of the Label,
+*   never inside it — AILabelTrigger is a button, and a button nested in a label is invalid
+*   HTML that would also toggle the checkbox on every click. Use the htmlFor/id pairing for
+*   those rows instead of the wrapping Label. Pass AILabel `edited={!checked}` and an
+*   `onRevert` that re-checks it, so flipping an AI-suggested option turns its marker into an
+*   undo button (AILabel's own override/undo morph, same as Input/Select/Textarea). When most
+*   options are AI-selected, put one AILabel beside the FieldLegend instead, with `edited`
+*   true once the checked set differs from AI's and `onRevert` restoring the whole set. See
+*   AI/Checkbox.
+*
+* USAGE
+* <Label className="flex items-center gap-2">
+*   <Checkbox />
+*   Accept terms and conditions
+* </Label>
+*
+* <Checkbox checked="indeterminate" />
+* <Checkbox aria-invalid />
+*/
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/ui/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["/**\n * Checkbox — boolean toggle control.\n *\n * Built on the Radix Checkbox primitive. Error styling is driven off\n * `aria-invalid` (no `error` prop), and a checked state of \"indeterminate\"\n * is supported for parent-of-many selection patterns.\n */\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon, MinusIcon } from \"lucide-react\"\nimport { FieldIdContext } from \"@/components/ui/field\"\n\nfunction Checkbox({\n  className,\n  checked,\n  \"aria-labelledby\": ariaLabelledby,\n  \"aria-describedby\": ariaDescribedby,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  // Inside Field's horizontal FieldContent+FieldTitle pattern, FieldTitle is\n  // a plain heading `<div>` with no `htmlFor`/id wiring of its own — without\n  // this, that documented pattern shipped an accessible-name-less checkbox.\n  // Falls back to FieldTitle/FieldDescription/FieldError ids only when the\n  // consumer hasn't already supplied their own.\n  const idContext = React.useContext(FieldIdContext)\n  const resolvedLabelledby =\n    ariaLabelledby ??\n    (!props[\"aria-label\"] ? idContext?.titleId ?? undefined : undefined)\n  const resolvedDescribedby =\n    ariaDescribedby ??\n    ([idContext?.descriptionId, idContext?.errorId].filter(Boolean).join(\" \") ||\n      undefined)\n\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      checked={checked}\n      aria-labelledby={resolvedLabelledby}\n      aria-describedby={resolvedDescribedby}\n      className={cn(\n        // Explicit data-[state=x]: for both truthy states — \"checked\" alone\n        // (or the data-checked: shorthand) doesn't also match\n        // data-state=\"indeterminate\", so indeterminate silently rendered as\n        // a plain unchecked box with a stray dark checkmark floating in it.\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:data-[state=checked]:bg-primary dark:data-[state=indeterminate]:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        {checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n\n/**\n * WHEN TO USE\n * - Toggling one independent boolean value: accepting terms, a single yes/no setting\n * - Selecting rows in a list (multi-select), including a \"select all\" checkbox whose\n *   own `checked` is set to \"indeterminate\" when some but not all children are checked\n *\n * NOT WHEN\n * - Exclusive selection from a small set — use RadioGroup\n * - A setting that takes effect immediately with no form submission — use Switch\n *\n * KEY RULES\n * - `checked` accepts true, false, or \"indeterminate\" — indeterminate is visual only,\n *   the app owns the tri-state logic for parent/child checkbox groups. It renders with\n *   the same filled/primary treatment as `true`, but with a dash instead of a check —\n *   distinct from both `true` and `false`, not just a `true` alias.\n * - Error state is driven entirely by `aria-invalid` — there is no `error` prop\n * - Not a standalone label — wrap in a Label (or pair via htmlFor/id) so the text is\n *   clickable and screen readers announce it. Inside Field's horizontal FieldContent +\n *   FieldTitle pattern (a standalone control beside a heading `<div>`, not a `<label>`),\n *   Checkbox instead picks up FieldTitle as `aria-labelledby` and FieldDescription/\n *   FieldError as `aria-describedby` automatically — pass your own aria-label/\n *   aria-labelledby/aria-describedby only to override that default.\n * - An AI-suggested (pre-checked) option is a plain composition, not a dedicated prop: put\n *   `AILabel` (size=\"sm\" — never the opt-in `iconOnly` by default) beside that option as a sibling of the Label,\n *   never inside it — AILabelTrigger is a button, and a button nested in a label is invalid\n *   HTML that would also toggle the checkbox on every click. Use the htmlFor/id pairing for\n *   those rows instead of the wrapping Label. Pass AILabel `edited={!checked}` and an\n *   `onRevert` that re-checks it, so flipping an AI-suggested option turns its marker into an\n *   undo button (AILabel's own override/undo morph, same as Input/Select/Textarea). When most\n *   options are AI-selected, put one AILabel beside the FieldLegend instead, with `edited`\n *   true once the checked set differs from AI's and `onRevert` restoring the whole set. See\n *   AI/Checkbox.\n *\n * USAGE\n * <Label className=\"flex items-center gap-2\">\n *   <Checkbox />\n *   Accept terms and conditions\n * </Label>\n *\n * <Checkbox checked=\"indeterminate\" />\n * <Checkbox aria-invalid />\n */\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAS,SAAS,EAChB,WACA,SACA,mBAAmB,gBACnB,oBAAoB,iBACpB,GAAG,SACmD;CAMtD,MAAM,YAAY,MAAM,WAAW,cAAc;CACjD,MAAM,qBACJ,mBACC,CAAC,MAAM,gBAAgB,WAAW,WAAW,KAAA,IAAY,KAAA;CAC5D,MAAM,sBACJ,oBACC,CAAC,WAAW,eAAe,WAAW,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KACtE,KAAA;CAEJ,OACE,oBAAC,WAAkB,MAAnB;EACE,aAAU;EACD;EACT,mBAAiB;EACjB,oBAAkB;EAClB,WAAW,GAKT,m3BACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,WAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAET,UAAA,YAAY,kBAAkB,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA;EAChC,CAAA;CACP,CAAA;AAE5B"}

package/dist/components/ui/collapsible.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Collapsible — single unstyled show/hide region.
+ *
+ * A thin wrapper over the Radix Collapsible primitive with no default
+ * classes of its own — it's the unopinionated building block Accordion is
+ * built on top of.
+ */
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react").JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+/**
+ * WHEN TO USE
+ * - One independent expandable region — an advanced-options block, a
+ *   "toggle details" row, a single FAQ-style disclosure with no siblings.
+ *
+ * NOT WHEN
+ * - Several sections that should coordinate (only one open at a time, or a
+ *   shared visual list of items) — use Accordion, which composes this
+ *   primitive with that coordination.
+ * - Content that should float above the page instead of pushing it down —
+ *   use Popover.
+ *
+ * KEY RULES
+ * - Uncontrolled by default (`defaultOpen`); pass `open`/`onOpenChange` to
+ *   control it externally.
+ * - Ships with no styling — width, spacing, and the open/close affordance
+ *   (chevron, etc.) are entirely the consumer's responsibility.
+ * - `CollapsibleTrigger asChild` lets any element (e.g. a Button) drive it.
+ *
+ * USAGE
+ *   <Collapsible className="w-80">
+ *     <div className="flex items-center justify-between">
+ *       <h4>Installed dependencies</h4>
+ *       <CollapsibleTrigger asChild>
+ *         <Button variant="ghost" size="sm" iconOnly aria-label="Toggle">
+ *           <ChevronsUpDownIcon />
+ *         </Button>
+ *       </CollapsibleTrigger>
+ *     </div>
+ *     <CollapsibleContent>...</CollapsibleContent>
+ *   </Collapsible>
+ */
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/components/ui/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAE9D,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,+BAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,+BAOtE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,+BAOtE;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG"}

package/dist/components/ui/collapsible.js

@@ -0,0 +1,65 @@
+"use client";
+import { Collapsible as Collapsible$1 } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/collapsible.tsx
+/**
+* Collapsible — single unstyled show/hide region.
+*
+* A thin wrapper over the Radix Collapsible primitive with no default
+* classes of its own — it's the unopinionated building block Accordion is
+* built on top of.
+*/
+function Collapsible({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+}
+function CollapsibleTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.CollapsibleTrigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+function CollapsibleContent({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible$1.CollapsibleContent, {
+		"data-slot": "collapsible-content",
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - One independent expandable region — an advanced-options block, a
+*   "toggle details" row, a single FAQ-style disclosure with no siblings.
+*
+* NOT WHEN
+* - Several sections that should coordinate (only one open at a time, or a
+*   shared visual list of items) — use Accordion, which composes this
+*   primitive with that coordination.
+* - Content that should float above the page instead of pushing it down —
+*   use Popover.
+*
+* KEY RULES
+* - Uncontrolled by default (`defaultOpen`); pass `open`/`onOpenChange` to
+*   control it externally.
+* - Ships with no styling — width, spacing, and the open/close affordance
+*   (chevron, etc.) are entirely the consumer's responsibility.
+* - `CollapsibleTrigger asChild` lets any element (e.g. a Button) drive it.
+*
+* USAGE
+*   <Collapsible className="w-80">
+*     <div className="flex items-center justify-between">
+*       <h4>Installed dependencies</h4>
+*       <CollapsibleTrigger asChild>
+*         <Button variant="ghost" size="sm" iconOnly aria-label="Toggle">
+*           <ChevronsUpDownIcon />
+*         </Button>
+*       </CollapsibleTrigger>
+*     </div>
+*     <CollapsibleContent>...</CollapsibleContent>
+*   </Collapsible>
+*/
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+
+//# sourceMappingURL=collapsible.js.map

package/dist/components/ui/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","names":[],"sources":["../../../src/components/ui/collapsible.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Collapsible — single unstyled show/hide region.\n *\n * A thin wrapper over the Radix Collapsible primitive with no default\n * classes of its own — it's the unopinionated building block Accordion is\n * built on top of.\n */\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n\n/**\n * WHEN TO USE\n * - One independent expandable region — an advanced-options block, a\n *   \"toggle details\" row, a single FAQ-style disclosure with no siblings.\n *\n * NOT WHEN\n * - Several sections that should coordinate (only one open at a time, or a\n *   shared visual list of items) — use Accordion, which composes this\n *   primitive with that coordination.\n * - Content that should float above the page instead of pushing it down —\n *   use Popover.\n *\n * KEY RULES\n * - Uncontrolled by default (`defaultOpen`); pass `open`/`onOpenChange` to\n *   control it externally.\n * - Ships with no styling — width, spacing, and the open/close affordance\n *   (chevron, etc.) are entirely the consumer's responsibility.\n * - `CollapsibleTrigger asChild` lets any element (e.g. a Button) drive it.\n *\n * USAGE\n *   <Collapsible className=\"w-80\">\n *     <div className=\"flex items-center justify-between\">\n *       <h4>Installed dependencies</h4>\n *       <CollapsibleTrigger asChild>\n *         <Button variant=\"ghost\" size=\"sm\" iconOnly aria-label=\"Toggle\">\n *           <ChevronsUpDownIcon />\n *         </Button>\n *       </CollapsibleTrigger>\n *     </div>\n *     <CollapsibleContent>...</CollapsibleContent>\n *   </Collapsible>\n */\n"],"mappings":";;;;;;;;;;;AAYA,SAAS,YAAY,EACnB,GAAG,SACsD;CACzD,OAAO,oBAAC,cAAqB,MAAtB;EAA2B,aAAU;EAAc,GAAI;CAAQ,CAAA;AACxE;AAEA,SAAS,mBAAmB,EAC1B,GAAG,SACoE;CACvE,OACE,oBAAC,cAAqB,oBAAtB;EACE,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,mBAAmB,EAC1B,GAAG,SACoE;CACvE,OACE,oBAAC,cAAqB,oBAAtB;EACE,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/combobox.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Combobox — searchable select that filters options as you type.
+ *
+ * Built on the Base UI Combobox primitive (Radix has no combobox primitive
+ * of its own). Composed of Combobox, ComboboxInput, ComboboxChips, etc.; the
+ * input/trigger/clear row renders through MMDS's own InputGroup component,
+ * and a useComboboxAnchor helper wires the popup to the chips container.
+ */
+import * as React from "react";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+declare const Combobox: typeof ComboboxPrimitive.Root;
+declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element;
+declare function ComboboxTrigger({ className, children, "aria-label": ariaLabel, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element;
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, size, ...props }: Omit<ComboboxPrimitive.Input.Props, "size"> & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+    size?: "default" | "sm" | "xs";
+}): React.JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
+declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element;
+declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element;
+declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element;
+declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
+    showRemove?: boolean;
+}): React.JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element;
+declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
+/**
+ * WHEN TO USE
+ * - Large or dynamic option lists where typing to filter matters.
+ * - Grouped options with headings (ComboboxGroup + ComboboxLabel).
+ * - Multi-value entry with removable chips — pass `multiple` to the root Combobox, and render ComboboxChips / ComboboxChip / ComboboxChipsInput instead of ComboboxInput; wire the popover's `anchor` to the chips container via useComboboxAnchor. See the "MultiSelect" story.
+ *
+ * NOT WHEN
+ * - The list is short and fixed — use Select, it's simpler with no search overhead.
+ * - It's free text with no option list at all — use Input.
+ * - It's a global command palette / action launcher rather than a form value — use Command.
+ * - It's a free-text search with no value to commit — results to act on, not a field to fill in
+ *   (a page-level "Search patients" box, an embedded search panel) — use Command directly (not
+ *   CommandDialog, which is the ⌘K-palette wrapper) instead of reaching for Combobox just
+ *   because it also filters as you type; Combobox always resolves to one selected item sitting
+ *   in the trigger, which a search box doesn't have.
+ *
+ * KEY RULES
+ * - Pass options through the `items` prop on the root Combobox; ComboboxList takes a render-function child, called once per item.
+ * - ComboboxContent is portaled and width-locked to the anchor via --anchor-width — don't give it a fixed width.
+ * - ComboboxInput has `showTrigger` (default true, shows the dropdown chevron button) and `showClear` (default false, shows a clear button — only useful once a value is set).
+ * - ComboboxInput's `size` is "default" | "sm" | "xs" (default "default") —
+ *   same default/sm/xs vocabulary as Select/Button/Tabs, not Combobox-specific
+ *   naming. Only affects the input row itself; ComboboxContent/ComboboxItem
+ *   stay fixed size, matching how Select's own `size` only sizes its trigger.
+ *   Omits the native `size` (character-width) attribute `<input>` normally
+ *   has — there's no way to set that one through ComboboxInput.
+ * - ComboboxItem renders its own CheckIcon selected-state indicator — don't add a second one.
+ *
+ * USAGE
+ * <Combobox items={spices}>
+ *   <ComboboxInput placeholder="Select a spice" />
+ *   <ComboboxContent>
+ *     <ComboboxEmpty>No spice found.</ComboboxEmpty>
+ *     <ComboboxList>
+ *       {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ *
+ * // Grouped options
+ * <Combobox items={spices}>
+ *   <ComboboxInput placeholder="Select a spice" />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxGroup>
+ *         <ComboboxLabel>Warm</ComboboxLabel>
+ *         <ComboboxItem value="Cinnamon">Cinnamon</ComboboxItem>
+ *       </ComboboxGroup>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ *
+ * // Default value with a clear button
+ * <Combobox items={spices} defaultValue="Cardamom">
+ *   <ComboboxInput placeholder="Select a spice" showClear />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ *
+ * // Multi-select with removable chips
+ * const [value, setValue] = React.useState<string[]>([])
+ * const anchorRef = useComboboxAnchor()
+ * <Combobox items={spices} multiple value={value} onValueChange={setValue}>
+ *   <ComboboxChips ref={anchorRef}>
+ *     {value.map((item) => <ComboboxChip key={item}>{item}</ComboboxChip>)}
+ *     <ComboboxChipsInput placeholder="Select spices" />
+ *   </ComboboxChips>
+ *   <ComboboxContent anchor={anchorRef}>
+ *     <ComboboxList>
+ *       {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ */
+//# sourceMappingURL=combobox.d.ts.map

package/dist/components/ui/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/combobox.tsx"],"names":[],"mappings":"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"}