@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/popover.js

@@ -0,0 +1,144 @@
+import { cn } from "../../lib/utils.js";
+import { getPortalContainer } from "../../lib/scope.js";
+import * as React from "react";
+import { Popover as Popover$1 } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/popover.tsx
+/**
+* Popover — floating panel anchored to a trigger, opened by click.
+*
+* Built on the Radix Popover primitive. Adds PopoverHeader/PopoverTitle/
+* PopoverDescription slots, matching the Header/Title/Description pattern
+* used across this overlay family (Sheet, AlertDialog, Drawer).
+*/
+var PopoverIdContext = React.createContext(null);
+function Popover({ ...props }) {
+	const [titleId, setTitleId] = React.useState(null);
+	const [descriptionId, setDescriptionId] = React.useState(null);
+	const idContext = React.useMemo(() => ({
+		titleId,
+		setTitleId,
+		descriptionId,
+		setDescriptionId
+	}), [titleId, descriptionId]);
+	return /* @__PURE__ */ jsx(PopoverIdContext.Provider, {
+		value: idContext,
+		children: /* @__PURE__ */ jsx(Popover$1.Root, {
+			"data-slot": "popover",
+			...props
+		})
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }) {
+	const idContext = React.useContext(PopoverIdContext);
+	const resolvedLabelledby = ariaLabelledby ?? (!props["aria-label"] ? idContext?.titleId ?? void 0 : void 0);
+	const resolvedDescribedby = ariaDescribedby ?? idContext?.descriptionId ?? void 0;
+	return /* @__PURE__ */ jsx(Popover$1.Portal, {
+		container: getPortalContainer(),
+		children: /* @__PURE__ */ jsx(Popover$1.Content, {
+			"data-slot": "popover-content",
+			align,
+			sideOffset,
+			"aria-labelledby": resolvedLabelledby,
+			"aria-describedby": resolvedDescribedby,
+			className: cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-popover ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className),
+			...props
+		})
+	});
+}
+function PopoverAnchor({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Anchor, {
+		"data-slot": "popover-anchor",
+		...props
+	});
+}
+function PopoverHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: cn("flex flex-col gap-0.5 text-sm", className),
+		...props
+	});
+}
+function PopoverTitle({ className, id, ...props }) {
+	const generatedId = React.useId();
+	const titleId = id ?? generatedId;
+	const idContext = React.useContext(PopoverIdContext);
+	React.useLayoutEffect(() => {
+		idContext?.setTitleId(titleId);
+		return () => idContext?.setTitleId(null);
+	}, [titleId]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-title",
+		id: titleId,
+		className: cn("font-medium", className),
+		...props
+	});
+}
+function PopoverDescription({ className, id, ...props }) {
+	const generatedId = React.useId();
+	const descriptionId = id ?? generatedId;
+	const idContext = React.useContext(PopoverIdContext);
+	React.useLayoutEffect(() => {
+		idContext?.setDescriptionId(descriptionId);
+		return () => idContext?.setDescriptionId(null);
+	}, [descriptionId]);
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "popover-description",
+		id: descriptionId,
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Controls or detail anchored to an element that the user opts into by
+*   clicking — date pickers, filter forms, quick-edit panels
+* - Content that's interactive (inputs, buttons) but doesn't need full
+*   modal focus-trapping
+*
+* NOT WHEN
+* - A plain, non-interactive hover label — use Tooltip
+* - A richer hover-triggered preview with no click required — use HoverCard
+* - The interaction must interrupt the page and trap focus — use Dialog
+*
+* KEY RULES
+* - Opens on click via PopoverTrigger, not hover — this is the trigger
+*   mechanism that separates it from Tooltip/HoverCard
+* - `align` defaults to "center", `sideOffset` defaults to 4
+* - PopoverContent is 18rem (w-72) wide by default; override via className
+* - PopoverAnchor lets you anchor the content to a different element than
+*   the trigger (e.g. anchor to an input while triggering from a button)
+* - PopoverContent's `role="dialog"` picks up `aria-labelledby`/`aria-describedby` automatically
+*   from PopoverTitle/PopoverDescription rendered anywhere inside the same Popover — pass an
+*   explicit `aria-label`/`aria-labelledby` yourself only to override that default
+*
+* USAGE
+* <Popover>
+*   <PopoverTrigger asChild><Button variant="outline">Open popover</Button></PopoverTrigger>
+*   <PopoverContent className="w-72">
+*     <PopoverHeader>
+*       <PopoverTitle>Dimensions</PopoverTitle>
+*       <PopoverDescription>Set the layout dimensions.</PopoverDescription>
+*     </PopoverHeader>
+*     <div className="grid gap-3">
+*       <div className="grid gap-2">
+*         <Label htmlFor="width">Width</Label>
+*         <Input id="width" defaultValue="100%" />
+*       </div>
+*     </div>
+*   </PopoverContent>
+* </Popover>
+*
+* // Placement
+* <PopoverContent side="right">Anchored right.</PopoverContent>
+*/
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+
+//# sourceMappingURL=popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["/**\n * Popover — floating panel anchored to a trigger, opened by click.\n *\n * Built on the Radix Popover primitive. Adds PopoverHeader/PopoverTitle/\n * PopoverDescription slots, matching the Header/Title/Description pattern\n * used across this overlay family (Sheet, AlertDialog, Drawer).\n */\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { getPortalContainer } from \"@/lib/scope\"\n\n// Radix's Popover (unlike Dialog) has no Title/Description parts or\n// context of its own — PopoverTitle/PopoverDescription are plain MMDS\n// slots with no id-wiring by default, so PopoverContent's role=\"dialog\"\n// would otherwise ship with no accessible name/description even when a\n// consumer follows the documented Header/Title/Description pattern.\nconst PopoverIdContext = React.createContext<{\n  titleId: string | null\n  setTitleId: (id: string | null) => void\n  descriptionId: string | null\n  setDescriptionId: (id: string | null) => void\n} | null>(null)\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  const [titleId, setTitleId] = React.useState<string | null>(null)\n  const [descriptionId, setDescriptionId] = React.useState<string | null>(\n    null\n  )\n  const idContext = React.useMemo(\n    () => ({ titleId, setTitleId, descriptionId, setDescriptionId }),\n    [titleId, descriptionId]\n  )\n\n  return (\n    <PopoverIdContext.Provider value={idContext}>\n      <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n    </PopoverIdContext.Provider>\n  )\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  \"aria-labelledby\": ariaLabelledby,\n  \"aria-describedby\": ariaDescribedby,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  const idContext = React.useContext(PopoverIdContext)\n  const resolvedLabelledby =\n    ariaLabelledby ??\n    (!props[\"aria-label\"] ? idContext?.titleId ?? undefined : undefined)\n  const resolvedDescribedby = ariaDescribedby ?? idContext?.descriptionId ?? undefined\n\n  return (\n    <PopoverPrimitive.Portal container={getPortalContainer()}>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        aria-labelledby={resolvedLabelledby}\n        aria-describedby={resolvedDescribedby}\n        className={cn(\n          \"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-popover ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-0.5 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({\n  className,\n  id,\n  ...props\n}: React.ComponentProps<\"h2\">) {\n  const generatedId = React.useId()\n  const titleId = id ?? generatedId\n  const idContext = React.useContext(PopoverIdContext)\n\n  React.useLayoutEffect(() => {\n    idContext?.setTitleId(titleId)\n    return () => idContext?.setTitleId(null)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [titleId])\n\n  return (\n    <div\n      data-slot=\"popover-title\"\n      id={titleId}\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  id,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  const generatedId = React.useId()\n  const descriptionId = id ?? generatedId\n  const idContext = React.useContext(PopoverIdContext)\n\n  React.useLayoutEffect(() => {\n    idContext?.setDescriptionId(descriptionId)\n    return () => idContext?.setDescriptionId(null)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [descriptionId])\n\n  return (\n    <p\n      data-slot=\"popover-description\"\n      id={descriptionId}\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n\n/**\n * WHEN TO USE\n * - Controls or detail anchored to an element that the user opts into by\n *   clicking — date pickers, filter forms, quick-edit panels\n * - Content that's interactive (inputs, buttons) but doesn't need full\n *   modal focus-trapping\n *\n * NOT WHEN\n * - A plain, non-interactive hover label — use Tooltip\n * - A richer hover-triggered preview with no click required — use HoverCard\n * - The interaction must interrupt the page and trap focus — use Dialog\n *\n * KEY RULES\n * - Opens on click via PopoverTrigger, not hover — this is the trigger\n *   mechanism that separates it from Tooltip/HoverCard\n * - `align` defaults to \"center\", `sideOffset` defaults to 4\n * - PopoverContent is 18rem (w-72) wide by default; override via className\n * - PopoverAnchor lets you anchor the content to a different element than\n *   the trigger (e.g. anchor to an input while triggering from a button)\n * - PopoverContent's `role=\"dialog\"` picks up `aria-labelledby`/`aria-describedby` automatically\n *   from PopoverTitle/PopoverDescription rendered anywhere inside the same Popover — pass an\n *   explicit `aria-label`/`aria-labelledby` yourself only to override that default\n *\n * USAGE\n * <Popover>\n *   <PopoverTrigger asChild><Button variant=\"outline\">Open popover</Button></PopoverTrigger>\n *   <PopoverContent className=\"w-72\">\n *     <PopoverHeader>\n *       <PopoverTitle>Dimensions</PopoverTitle>\n *       <PopoverDescription>Set the layout dimensions.</PopoverDescription>\n *     </PopoverHeader>\n *     <div className=\"grid gap-3\">\n *       <div className=\"grid gap-2\">\n *         <Label htmlFor=\"width\">Width</Label>\n *         <Input id=\"width\" defaultValue=\"100%\" />\n *       </div>\n *     </div>\n *   </PopoverContent>\n * </Popover>\n *\n * // Placement\n * <PopoverContent side=\"right\">Anchored right.</PopoverContent>\n */\n"],"mappings":";;;;;;;;;;;;;AAkBA,IAAM,mBAAmB,MAAM,cAKrB,IAAI;AAEd,SAAS,QAAQ,EACf,GAAG,SACkD;CACrD,MAAM,CAAC,SAAS,cAAc,MAAM,SAAwB,IAAI;CAChE,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAC9C,IACF;CACA,MAAM,YAAY,MAAM,eACf;EAAE;EAAS;EAAY;EAAe;CAAiB,IAC9D,CAAC,SAAS,aAAa,CACzB;CAEA,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;EAChC,UAAA,oBAAC,UAAiB,MAAlB;GAAuB,aAAU;GAAU,GAAI;EAAQ,CAAA;CAC9B,CAAA;AAE/B;AAEA,SAAS,eAAe,EACtB,GAAG,SACqD;CACxD,OAAO,oBAAC,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,mBAAmB,gBACnB,oBAAoB,iBACpB,GAAG,SACqD;CACxD,MAAM,YAAY,MAAM,WAAW,gBAAgB;CACnD,MAAM,qBACJ,mBACC,CAAC,MAAM,gBAAgB,WAAW,WAAW,KAAA,IAAY,KAAA;CAC5D,MAAM,sBAAsB,mBAAmB,WAAW,iBAAiB,KAAA;CAE3E,OACE,oBAAC,UAAiB,QAAlB;EAAyB,WAAW,mBAAmB;EACrD,UAAA,oBAAC,UAAiB,SAAlB;GACE,aAAU;GACH;GACK;GACZ,mBAAiB;GACjB,oBAAkB;GAClB,WAAW,GACT,uiBACA,SACF;GACA,GAAI;EACL,CAAA;CACsB,CAAA;AAE7B;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAAC,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,IACA,GAAG,SAC0B;CAC7B,MAAM,cAAc,MAAM,MAAM;CAChC,MAAM,UAAU,MAAM;CACtB,MAAM,YAAY,MAAM,WAAW,gBAAgB;CAEnD,MAAM,sBAAsB;EAC1B,WAAW,WAAW,OAAO;EAC7B,aAAa,WAAW,WAAW,IAAI;CAEzC,GAAG,CAAC,OAAO,CAAC;CAEZ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,IAAI;EACJ,WAAW,GAAG,eAAe,SAAS;EACtC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,mBAAmB,EAC1B,WACA,IACA,GAAG,SACyB;CAC5B,MAAM,cAAc,MAAM,MAAM;CAChC,MAAM,gBAAgB,MAAM;CAC5B,MAAM,YAAY,MAAM,WAAW,gBAAgB;CAEnD,MAAM,sBAAsB;EAC1B,WAAW,iBAAiB,aAAa;EACzC,aAAa,WAAW,iBAAiB,IAAI;CAE/C,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,KAAD;EACE,aAAU;EACV,IAAI;EACJ,WAAW,GAAG,yBAAyB,SAAS;EAChD,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,35 @@
+/**
+ * Progress — determinate horizontal bar showing measurable task completion.
+ *
+ * Fill width is driven by a `translateX` transform computed from `value`.
+ * Built on the Radix Progress primitive with a single-element shape (just
+ * Root + Indicator, no separate Track/Label/Value parts).
+ */
+import * as React from "react";
+import { Progress as ProgressPrimitive } from "radix-ui";
+declare function Progress({ className, value, "aria-label": ariaLabel, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): React.JSX.Element;
+export { Progress };
+/**
+ * WHEN TO USE
+ * - Showing measurable completion with a known percentage — upload progress, quota consumed, goal progress.
+ * - Any case where `value` (0–100) changes over time or is set once from a known total.
+ *
+ * NOT WHEN
+ * - Duration is unknown or indeterminate — use Spinner (inline) or Skeleton (whole region) instead.
+ * - Showing step position in a multi-step flow — use a dedicated stepper/questionnaire progress indicator instead.
+ *
+ * KEY RULES
+ * - `value` is a plain number 0–100; there is no built-in clamping, so pass values already within range.
+ * - Omitting `value` renders the bar at 0% (indicator fully translated out of view) — it does not show an indeterminate/animated state.
+ * - Track height (`h-1`) and full-rounding are set by the component; only override via `className` if the design truly requires a different scale.
+ * - Always pass `aria-label` describing what's progressing (e.g. "Upload progress") — the
+ *   underlying `role="progressbar"` has no accessible name of its own otherwise.
+ *
+ * USAGE
+ * <Progress value={60} aria-label="Upload progress" />
+ *
+ * // Animated / polling progress
+ * const [value, setValue] = React.useState(10)
+ * <Progress value={value} />
+ */
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAIxD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,qBAqBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AAEnB;;;;;;;;;;;;;;;;;;;;;;GAsBG"}

package/dist/components/ui/progress.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import "react";
+import { Progress as Progress$1 } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/progress.tsx
+function Progress({ className, value, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Root, {
+		"data-slot": "progress",
+		"aria-label": ariaLabel ?? "Progress",
+		className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Progress$1.Indicator, {
+			"data-slot": "progress-indicator",
+			className: "size-full flex-1 bg-primary transition-transform",
+			style: { transform: `translateX(-${100 - (value || 0)}%)` }
+		})
+	});
+}
+/**
+* WHEN TO USE
+* - Showing measurable completion with a known percentage — upload progress, quota consumed, goal progress.
+* - Any case where `value` (0–100) changes over time or is set once from a known total.
+*
+* NOT WHEN
+* - Duration is unknown or indeterminate — use Spinner (inline) or Skeleton (whole region) instead.
+* - Showing step position in a multi-step flow — use a dedicated stepper/questionnaire progress indicator instead.
+*
+* KEY RULES
+* - `value` is a plain number 0–100; there is no built-in clamping, so pass values already within range.
+* - Omitting `value` renders the bar at 0% (indicator fully translated out of view) — it does not show an indeterminate/animated state.
+* - Track height (`h-1`) and full-rounding are set by the component; only override via `className` if the design truly requires a different scale.
+* - Always pass `aria-label` describing what's progressing (e.g. "Upload progress") — the
+*   underlying `role="progressbar"` has no accessible name of its own otherwise.
+*
+* USAGE
+* <Progress value={60} aria-label="Upload progress" />
+*
+* // Animated / polling progress
+* const [value, setValue] = React.useState(10)
+* <Progress value={value} />
+*/
+//#endregion
+export { Progress };
+
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":[],"sources":["../../../src/components/ui/progress.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Progress — determinate horizontal bar showing measurable task completion.\n *\n * Fill width is driven by a `translateX` transform computed from `value`.\n * Built on the Radix Progress primitive with a single-element shape (just\n * Root + Indicator, no separate Track/Label/Value parts).\n */\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  \"aria-label\": ariaLabel,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      // Falls back to a generic accessible name when the consumer forgets\n      // one — `role=\"progressbar\"` has no accessible name otherwise (4.1.2).\n      // Prefer passing a real one describing what's progressing.\n      aria-label={ariaLabel ?? \"Progress\"}\n      className={cn(\n        \"relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"size-full flex-1 bg-primary transition-transform\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n\n/**\n * WHEN TO USE\n * - Showing measurable completion with a known percentage — upload progress, quota consumed, goal progress.\n * - Any case where `value` (0–100) changes over time or is set once from a known total.\n *\n * NOT WHEN\n * - Duration is unknown or indeterminate — use Spinner (inline) or Skeleton (whole region) instead.\n * - Showing step position in a multi-step flow — use a dedicated stepper/questionnaire progress indicator instead.\n *\n * KEY RULES\n * - `value` is a plain number 0–100; there is no built-in clamping, so pass values already within range.\n * - Omitting `value` renders the bar at 0% (indicator fully translated out of view) — it does not show an indeterminate/animated state.\n * - Track height (`h-1`) and full-rounding are set by the component; only override via `className` if the design truly requires a different scale.\n * - Always pass `aria-label` describing what's progressing (e.g. \"Upload progress\") — the\n *   underlying `role=\"progressbar\"` has no accessible name of its own otherwise.\n *\n * USAGE\n * <Progress value={60} aria-label=\"Upload progress\" />\n *\n * // Animated / polling progress\n * const [value, setValue] = React.useState(10)\n * <Progress value={value} />\n */\n"],"mappings":";;;;;;AAeA,SAAS,SAAS,EAChB,WACA,OACA,cAAc,WACd,GAAG,SACmD;CACtD,OACE,oBAAC,WAAkB,MAAnB;EACE,aAAU;EAIV,cAAY,aAAa;EACzB,WAAW,GACT,iFACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,WAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GACV,OAAO,EAAE,WAAW,eAAe,OAAO,SAAS,GAAG,IAAI;EAC3D,CAAA;CACqB,CAAA;AAE5B"}

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

@@ -0,0 +1,92 @@
+/**
+ * Questionnaire — multi-step form that shows one question at a time.
+ *
+ * Wraps the `@shadcn/react` Questionnaire primitive (Root, Item, Choice,
+ * Input, Previous/Skip/Next/Submit), which handles step sequencing,
+ * navigation, and validation; the root renders a <form> that tracks the
+ * active item. MMDS styles choices as bordered, checkbox/radio-style cards
+ * and lays out Previous/Skip/Next/Submit in a fixed 3-column grid.
+ */
+import * as React from "react";
+import { Questionnaire as QuestionnairePrimitive } from "@shadcn/react/questionnaire";
+import { type Button } from "../../components/ui/button";
+declare function Questionnaire({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Root>): React.JSX.Element;
+declare function QuestionnaireProgress({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Progress>): React.JSX.Element;
+declare function QuestionnaireItem({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Item>): React.JSX.Element;
+declare function QuestionnaireTitle({ className, id, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Title>): React.JSX.Element;
+declare function QuestionnaireDescription({ className, id, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Description>): React.JSX.Element;
+declare function QuestionnaireChoices({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Choices>): React.JSX.Element;
+declare function QuestionnaireChoice({ children, className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Choice>): React.JSX.Element;
+declare function QuestionnaireChoiceDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function QuestionnaireInput({ className, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Input>): React.JSX.Element;
+declare function QuestionnaireError({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Error>): React.JSX.Element;
+declare function QuestionnaireActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function QuestionnairePrevious({ children, className, size, variant, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Previous> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
+declare function QuestionnaireSkip({ children, className, size, variant, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Skip> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
+declare function QuestionnaireNext({ children, className, size, variant, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Next> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
+declare function QuestionnaireSubmit({ children, className, size, variant, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Submit> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">): React.JSX.Element;
+export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, };
+/**
+ * WHEN TO USE
+ * - Guided multi-step intake, onboarding, or surveys where only one question is shown at a time.
+ * - Flows that need per-step required/skip logic and a progress indicator.
+ *
+ * NOT WHEN
+ * - All fields should be visible at once in a single form — use Field + FieldSet instead.
+ * - Sections don't need to be shown in sequence — use Tabs instead.
+ *
+ * KEY RULES
+ * - `items` on Questionnaire declares the sequence of entries and which are `required`; each QuestionnaireItem matches an entry by `name`.
+ * - A QuestionnaireItem's `required`/`multiple` props should match its entry in `items` — `multiple` renders a checkbox-style choice group instead of radio-style.
+ * - `shortcuts="letters"` on Questionnaire adds A/B/C key hints to each QuestionnaireChoice.
+ * - QuestionnairePrevious / QuestionnaireSkip / QuestionnaireNext / QuestionnaireSubmit manage their own visibility based on step position — render all of them and let the primitive decide which shows.
+ * - QuestionnaireError only renders when the active item fails validation (e.g. a required choice wasn't picked).
+ * - QuestionnaireInput automatically picks up `aria-labelledby`/`aria-describedby` from the
+ *   QuestionnaireTitle/QuestionnaireDescription rendered in the same QuestionnaireItem (unlike
+ *   Choice steps, a free-text step has no native `<label>` wrapping it) — pass an explicit
+ *   `aria-label`/`aria-labelledby` yourself only if you need to override that default.
+ *
+ * USAGE
+ * <Questionnaire
+ *   items={[
+ *     { name: "base", required: true, choices: [{ value: "radix" }, { value: "base-ui" }] },
+ *     { name: "notes" },
+ *   ]}
+ * >
+ *   <QuestionnaireProgress />
+ *   <QuestionnaireItem name="base" required>
+ *     <QuestionnaireTitle>Which primitive base do you use?</QuestionnaireTitle>
+ *     <QuestionnaireChoices>
+ *       <QuestionnaireChoice value="radix">Radix UI</QuestionnaireChoice>
+ *       <QuestionnaireChoice value="base-ui">Base UI</QuestionnaireChoice>
+ *     </QuestionnaireChoices>
+ *     <QuestionnaireError>Pick one to continue.</QuestionnaireError>
+ *   </QuestionnaireItem>
+ *   <QuestionnaireItem name="notes">
+ *     <QuestionnaireTitle>Anything else?</QuestionnaireTitle>
+ *     <QuestionnaireInput type="text" placeholder="Optional" />
+ *   </QuestionnaireItem>
+ *   <QuestionnaireActions>
+ *     <QuestionnairePrevious>Back</QuestionnairePrevious>
+ *     <QuestionnaireNext>Next</QuestionnaireNext>
+ *     <QuestionnaireSubmit>Submit</QuestionnaireSubmit>
+ *   </QuestionnaireActions>
+ * </Questionnaire>
+ *
+ * // Letter shortcuts (A/B/C hints on choices)
+ * <Questionnaire
+ *   shortcuts="letters"
+ *   items={[{ name: "spice", required: true, choices: [{ value: "turmeric" }] }]}
+ * >
+ *   <QuestionnaireItem name="spice" required>
+ *     <QuestionnaireTitle>Pick a spice</QuestionnaireTitle>
+ *     <QuestionnaireChoices>
+ *       <QuestionnaireChoice value="turmeric">Turmeric</QuestionnaireChoice>
+ *     </QuestionnaireChoices>
+ *   </QuestionnaireItem>
+ *   <QuestionnaireActions>
+ *     <QuestionnaireSubmit>Submit</QuestionnaireSubmit>
+ *   </QuestionnaireActions>
+ * </Questionnaire>
+ */
+//# sourceMappingURL=questionnaire.d.ts.map

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

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

package/dist/components/ui/questionnaire.js

@@ -0,0 +1,277 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { buttonVariants } from "./button.js";
+import * as React from "react";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Questionnaire as Questionnaire$1 } from "@shadcn/react/questionnaire";
+//#region src/components/ui/questionnaire.tsx
+/**
+* Questionnaire — multi-step form that shows one question at a time.
+*
+* Wraps the `@shadcn/react` Questionnaire primitive (Root, Item, Choice,
+* Input, Previous/Skip/Next/Submit), which handles step sequencing,
+* navigation, and validation; the root renders a <form> that tracks the
+* active item. MMDS styles choices as bordered, checkbox/radio-style cards
+* and lays out Previous/Skip/Next/Submit in a fixed 3-column grid.
+*/
+var QuestionnaireLabelContext = React.createContext(null);
+function Questionnaire({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Root, {
+		"data-slot": "questionnaire",
+		className: cn("flex w-full min-w-0 flex-col gap-4", className),
+		...props
+	});
+}
+function QuestionnaireProgress({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Progress, {
+		"data-slot": "questionnaire-progress",
+		className: cn("min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums", className),
+		...props
+	});
+}
+function QuestionnaireItem({ className, ...props }) {
+	const [titleId, setTitleId] = React.useState(null);
+	const [descriptionId, setDescriptionId] = React.useState(null);
+	const labelContext = React.useMemo(() => ({
+		titleId,
+		setTitleId,
+		descriptionId,
+		setDescriptionId
+	}), [titleId, descriptionId]);
+	return /* @__PURE__ */ jsx(QuestionnaireLabelContext.Provider, {
+		value: labelContext,
+		children: /* @__PURE__ */ jsx(Questionnaire$1.Item, {
+			"data-slot": "questionnaire-item",
+			className: cn("flex min-w-0 flex-col gap-4 border-0 p-0 outline-none", className),
+			...props
+		})
+	});
+}
+function QuestionnaireTitle({ className, id, ...props }) {
+	const generatedId = React.useId();
+	const titleId = id ?? generatedId;
+	const labelContext = React.useContext(QuestionnaireLabelContext);
+	React.useLayoutEffect(() => {
+		labelContext?.setTitleId(titleId);
+		return () => labelContext?.setTitleId(null);
+	}, [titleId]);
+	return /* @__PURE__ */ jsx(Questionnaire$1.Title, {
+		"data-slot": "questionnaire-title",
+		id: titleId,
+		className: cn("text-base leading-snug font-medium text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4", className),
+		...props
+	});
+}
+function QuestionnaireDescription({ className, id, ...props }) {
+	const generatedId = React.useId();
+	const descriptionId = id ?? generatedId;
+	const labelContext = React.useContext(QuestionnaireLabelContext);
+	React.useLayoutEffect(() => {
+		labelContext?.setDescriptionId(descriptionId);
+		return () => labelContext?.setDescriptionId(null);
+	}, [descriptionId]);
+	return /* @__PURE__ */ jsx(Questionnaire$1.Description, {
+		"data-slot": "questionnaire-description",
+		id: descriptionId,
+		className: cn("text-sm text-pretty text-muted-foreground", className),
+		...props
+	});
+}
+function QuestionnaireChoices({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Choices, {
+		"data-slot": "questionnaire-choices",
+		className: cn("group/questionnaire-choices grid min-w-0 gap-2", className),
+		...props
+	});
+}
+function QuestionnaireChoice({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Questionnaire$1.Choice, {
+		"data-slot": "questionnaire-choice",
+		className: cn("group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-lg border border-input bg-transparent px-3 py-2.5 text-start text-sm transition-colors outline-none select-none hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive dark:bg-input/20 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Questionnaire$1.ChoiceInput, {
+				"data-slot": "questionnaire-choice-input",
+				className: "absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				"data-slot": "questionnaire-choice-indicator",
+				className: "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "questionnaire-choice-indicator-dot",
+					className: "hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+				}), /* @__PURE__ */ jsx(CheckIcon, {
+					"data-slot": "questionnaire-choice-indicator-check",
+					className: "hidden size-3.5 group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Questionnaire$1.ChoiceLabel, {
+				"data-slot": "questionnaire-choice-label",
+				className: "flex min-w-0 flex-1 flex-col gap-0.5 leading-snug",
+				children
+			}),
+			/* @__PURE__ */ jsx(Questionnaire$1.ChoiceShortcut, {
+				"data-slot": "questionnaire-choice-shortcut",
+				className: "pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-md border border-input bg-background font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
+			})
+		]
+	});
+}
+function QuestionnaireChoiceDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "questionnaire-choice-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+}
+function QuestionnaireInput({ className, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }) {
+	const labelContext = React.useContext(QuestionnaireLabelContext);
+	const resolvedLabelledby = ariaLabelledby ?? (!props["aria-label"] ? labelContext?.titleId ?? void 0 : void 0);
+	const resolvedDescribedby = ariaDescribedby ?? labelContext?.descriptionId ?? void 0;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "questionnaire-input-wrapper",
+		className: "group/questionnaire-input relative w-full min-w-0",
+		children: /* @__PURE__ */ jsx(Questionnaire$1.Input, {
+			"data-slot": "questionnaire-input",
+			"aria-labelledby": resolvedLabelledby,
+			"aria-describedby": resolvedDescribedby,
+			className: cn("h-8 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground", className),
+			...props
+		})
+	});
+}
+function QuestionnaireError({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Error, {
+		"data-slot": "questionnaire-error",
+		className: cn("mt-2 text-sm text-destructive", className),
+		...props
+	});
+}
+function QuestionnaireActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "questionnaire-actions",
+		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8", className),
+		...props
+	});
+}
+function QuestionnairePrevious({ children, className, size = "default", variant = "outline", ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Previous, {
+		"data-slot": "questionnaire-previous",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0", className),
+		...props,
+		children: children ?? "Previous"
+	});
+}
+function QuestionnaireSkip({ children, className, size = "default", variant = "outline", ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Skip, {
+		"data-slot": "questionnaire-skip",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0", className),
+		...props,
+		children: children ?? "Skip"
+	});
+}
+function QuestionnaireNext({ children, className, size = "default", variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Next, {
+		"data-slot": "questionnaire-next",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0", className),
+		...props,
+		children: children ?? "Next"
+	});
+}
+function QuestionnaireSubmit({ children, className, size = "default", variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Questionnaire$1.Submit, {
+		"data-slot": "questionnaire-submit",
+		"data-size": size,
+		"data-variant": variant,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0", className),
+		...props,
+		children: children ?? "Submit"
+	});
+}
+/**
+* WHEN TO USE
+* - Guided multi-step intake, onboarding, or surveys where only one question is shown at a time.
+* - Flows that need per-step required/skip logic and a progress indicator.
+*
+* NOT WHEN
+* - All fields should be visible at once in a single form — use Field + FieldSet instead.
+* - Sections don't need to be shown in sequence — use Tabs instead.
+*
+* KEY RULES
+* - `items` on Questionnaire declares the sequence of entries and which are `required`; each QuestionnaireItem matches an entry by `name`.
+* - A QuestionnaireItem's `required`/`multiple` props should match its entry in `items` — `multiple` renders a checkbox-style choice group instead of radio-style.
+* - `shortcuts="letters"` on Questionnaire adds A/B/C key hints to each QuestionnaireChoice.
+* - QuestionnairePrevious / QuestionnaireSkip / QuestionnaireNext / QuestionnaireSubmit manage their own visibility based on step position — render all of them and let the primitive decide which shows.
+* - QuestionnaireError only renders when the active item fails validation (e.g. a required choice wasn't picked).
+* - QuestionnaireInput automatically picks up `aria-labelledby`/`aria-describedby` from the
+*   QuestionnaireTitle/QuestionnaireDescription rendered in the same QuestionnaireItem (unlike
+*   Choice steps, a free-text step has no native `<label>` wrapping it) — pass an explicit
+*   `aria-label`/`aria-labelledby` yourself only if you need to override that default.
+*
+* USAGE
+* <Questionnaire
+*   items={[
+*     { name: "base", required: true, choices: [{ value: "radix" }, { value: "base-ui" }] },
+*     { name: "notes" },
+*   ]}
+* >
+*   <QuestionnaireProgress />
+*   <QuestionnaireItem name="base" required>
+*     <QuestionnaireTitle>Which primitive base do you use?</QuestionnaireTitle>
+*     <QuestionnaireChoices>
+*       <QuestionnaireChoice value="radix">Radix UI</QuestionnaireChoice>
+*       <QuestionnaireChoice value="base-ui">Base UI</QuestionnaireChoice>
+*     </QuestionnaireChoices>
+*     <QuestionnaireError>Pick one to continue.</QuestionnaireError>
+*   </QuestionnaireItem>
+*   <QuestionnaireItem name="notes">
+*     <QuestionnaireTitle>Anything else?</QuestionnaireTitle>
+*     <QuestionnaireInput type="text" placeholder="Optional" />
+*   </QuestionnaireItem>
+*   <QuestionnaireActions>
+*     <QuestionnairePrevious>Back</QuestionnairePrevious>
+*     <QuestionnaireNext>Next</QuestionnaireNext>
+*     <QuestionnaireSubmit>Submit</QuestionnaireSubmit>
+*   </QuestionnaireActions>
+* </Questionnaire>
+*
+* // Letter shortcuts (A/B/C hints on choices)
+* <Questionnaire
+*   shortcuts="letters"
+*   items={[{ name: "spice", required: true, choices: [{ value: "turmeric" }] }]}
+* >
+*   <QuestionnaireItem name="spice" required>
+*     <QuestionnaireTitle>Pick a spice</QuestionnaireTitle>
+*     <QuestionnaireChoices>
+*       <QuestionnaireChoice value="turmeric">Turmeric</QuestionnaireChoice>
+*     </QuestionnaireChoices>
+*   </QuestionnaireItem>
+*   <QuestionnaireActions>
+*     <QuestionnaireSubmit>Submit</QuestionnaireSubmit>
+*   </QuestionnaireActions>
+* </Questionnaire>
+*/
+//#endregion
+export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle };
+
+//# sourceMappingURL=questionnaire.js.map