@exxatdesignux/ui 0.2.18 → 0.3.0

package/dist/components/ui/coach-mark.js

@@ -0,0 +1,306 @@
+"use client";
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { Popover } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var coachMarkVariants = cva(
+  "z-[60] flex flex-col overflow-hidden rounded-xl bg-brand-deep text-white shadow-xl outline-none hc:!bg-background hc:!text-foreground hc:!border-2 hc:!border-foreground hc:!shadow-none",
+  {
+    variants: {
+      size: {
+        default: "w-[320px]",
+        sm: "w-[260px]",
+        lg: "w-[400px]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function CoachMarkImage({
+  src,
+  alt
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className: "h-[160px] w-full object-cover"
+    }
+  ) });
+}
+function CoachMarkStepIndicator({
+  current,
+  total
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center gap-1",
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": `Step ${current + 1} of ${total}`,
+      children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-1.5 rounded-full transition-all duration-200",
+            i === current ? "w-4 bg-white hc:bg-foreground" : "w-1.5 bg-white/30 hc:bg-foreground/40"
+          ),
+          "aria-hidden": "true"
+        },
+        i
+      ))
+    }
+  );
+}
+function SpotlightOverlay({
+  rect,
+  maskId
+}) {
+  const padding = 6;
+  const borderRadius = 8;
+  const x = rect.x - padding;
+  const y = rect.y - padding;
+  const w = rect.width + padding * 2;
+  const h = rect.height + padding * 2;
+  const maskUrl = `url(#${maskId})`;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-[55]",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsxs("svg", { className: "absolute inset-0 w-full h-full", children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
+              /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "white" }),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x,
+                  y,
+                  width: w,
+                  height: h,
+                  rx: borderRadius,
+                  ry: borderRadius,
+                  fill: "black"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                width: "100%",
+                height: "100%",
+                fill: "rgba(0,0,0,0.5)",
+                mask: maskUrl
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute rounded-lg ring-2 ring-brand hc:ring-foreground shadow-[0_0_0_4px_rgba(0,0,0,0.3)] hc:shadow-none",
+              style: {
+                left: x,
+                top: y,
+                width: w,
+                height: h,
+                borderRadius
+              }
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function CoachMark({
+  state,
+  side = "bottom",
+  align = "center",
+  sideOffset = 12,
+  nextLabel,
+  skipLabel = "Skip",
+  size,
+  className
+}) {
+  const spotlightMaskId = React.useId().replace(/:/g, "");
+  const {
+    isOpen,
+    step,
+    currentStep,
+    totalSteps,
+    isFlow,
+    isFirst,
+    isLast,
+    next,
+    prev,
+    skip,
+    anchorRect
+  } = state;
+  if (!isOpen || !step) return null;
+  if (!anchorRect) return null;
+  const titleId = `coach-mark-title-${step.id}`;
+  const descId = `coach-mark-desc-${step.id}`;
+  const hasImage = Boolean(step.image);
+  const primaryLabel = nextLabel ?? (isLast ? "Got it" : "Next");
+  const resolvedSide = step.side ?? side;
+  const resolvedAlign = step.align ?? align;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpotlightOverlay, { rect: anchorRect, maskId: `coach-spotlight-${spotlightMaskId}` }),
+    /* @__PURE__ */ jsxs(Popover.Root, { open: true, children: [
+      /* @__PURE__ */ jsx(
+        Popover.Anchor,
+        {
+          virtualRef: {
+            current: {
+              getBoundingClientRect: () => ({
+                x: anchorRect.x,
+                y: anchorRect.y,
+                top: anchorRect.y,
+                left: anchorRect.x,
+                bottom: anchorRect.y + anchorRect.height,
+                right: anchorRect.x + anchorRect.width,
+                width: anchorRect.width,
+                height: anchorRect.height,
+                toJSON: () => {
+                }
+              })
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+        Popover.Content,
+        {
+          "data-slot": "coach-mark",
+          side: resolvedSide,
+          align: resolvedAlign,
+          sideOffset,
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onInteractOutside: (e) => e.preventDefault(),
+          onEscapeKeyDown: () => skip(),
+          "aria-labelledby": titleId,
+          "aria-describedby": descId,
+          className: cn(
+            coachMarkVariants({ size }),
+            /* animations */
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+            "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+            className
+          ),
+          children: [
+            hasImage && /* @__PURE__ */ jsx(
+              CoachMarkImage,
+              {
+                src: step.image,
+                alt: step.imageAlt ?? step.title
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    id: titleId,
+                    className: "text-sm font-semibold text-white leading-snug",
+                    children: step.title
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: skip,
+                    className: "shrink-0 -mt-0.5 -me-1 flex h-6 w-6 items-center justify-center rounded-md text-white/60 hover:bg-white/15 hover:text-white transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!text-foreground hc:hover:!bg-foreground/10",
+                    "aria-label": "Dismiss",
+                    children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-xmark text-xs", "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: descId,
+                  className: "text-sm text-white/80 leading-relaxed",
+                  children: step.description
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 pt-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex-1", children: isFlow && /* @__PURE__ */ jsx(
+                  CoachMarkStepIndicator,
+                  {
+                    current: currentStep,
+                    total: totalSteps
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                  isFlow && !isLast && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: skip,
+                      className: "h-8 px-3 text-xs font-medium text-white/60 hover:text-white transition-colors rounded-md focus-visible:outline-2 focus-visible:outline-white hc:!text-foreground hc:hover:!text-foreground/80",
+                      children: skipLabel
+                    }
+                  ),
+                  isFlow && !isFirst && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: prev,
+                      className: "inline-flex items-center gap-1.5 h-8 px-3 text-xs font-medium text-white bg-white/15 hover:bg-white/25 rounded-md border border-white/20 transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!bg-background hc:!text-foreground hc:!border-foreground",
+                      children: [
+                        /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-left text-xs", "aria-hidden": "true" }),
+                        "Back"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: next,
+                      className: "inline-flex items-center gap-1.5 h-8 px-3 text-xs font-medium text-brand-deep bg-white hover:bg-white/90 rounded-md transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!bg-foreground hc:!text-background hc:border hc:border-foreground",
+                      children: [
+                        primaryLabel,
+                        isFlow && !isLast && /* @__PURE__ */ jsx("i", { className: "fa-light fa-arrow-right text-xs", "aria-hidden": "true" })
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Popover.Arrow,
+              {
+                className: "fill-brand-deep drop-shadow-sm hc:fill-background",
+                width: 12,
+                height: 6
+              }
+            )
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+
+export { CoachMark };
+//# sourceMappingURL=coach-mark.js.map
+//# sourceMappingURL=coach-mark.js.map

package/dist/components/ui/coach-mark.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/coach-mark.tsx"],"names":["PopoverPrimitive"],"mappings":"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","file":"coach-mark.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\n/**\n * CoachMark — contextual onboarding / feature-discovery popover\n *\n * Targets elements by CSS selector, scrolls them into view, and positions\n * the popover relative to the target using Radix's virtual anchor.\n *\n * Variants:\n *   • single   — standalone tip anchored to a target element\n *   • flow     — multi-step walkthrough with prev/next and step indicator\n *   • image    — includes a hero image above the content\n *   • no-image — text-only (title + description)\n *\n * Brand-colored background with spotlight overlay on the target element.\n *\n * WCAG 2.1 AA:\n *   • Focus trapped inside while open\n *   • Escape dismisses\n *   • aria-labelledby / aria-describedby wired automatically\n *   • Step indicator announced via aria-live\n */\n\nimport * as React from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Button } from \"./button\"\nimport { cn } from \"../../lib/utils\"\nimport type { CoachMarkState } from \"../../hooks/use-coach-mark\"\n\n/* ── Variant styles ─────────────────────────────────────────────────────── */\n\nconst coachMarkVariants = cva(\n  \"z-[60] flex flex-col overflow-hidden rounded-xl bg-brand-deep text-white shadow-xl outline-none hc:!bg-background hc:!text-foreground hc:!border-2 hc:!border-foreground hc:!shadow-none\",\n  {\n    variants: {\n      size: {\n        default: \"w-[320px]\",\n        sm: \"w-[260px]\",\n        lg: \"w-[400px]\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\n/* ── Sub-components ─────────────────────────────────────────────────────── */\n\nfunction CoachMarkImage({\n  src,\n  alt,\n}: {\n  src: string\n  alt: string\n}) {\n  return (\n    <div className=\"relative w-full overflow-hidden\">\n      <img\n        src={src}\n        alt={alt}\n        className=\"h-[160px] w-full object-cover\"\n      />\n    </div>\n  )\n}\n\nfunction CoachMarkStepIndicator({\n  current,\n  total,\n}: {\n  current: number\n  total: number\n}) {\n  return (\n    <div\n      className=\"flex items-center gap-1\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={`Step ${current + 1} of ${total}`}\n    >\n      {Array.from({ length: total }, (_, i) => (\n        <span\n          key={i}\n          className={cn(\n            \"h-1.5 rounded-full transition-all duration-200\",\n            i === current\n              ? \"w-4 bg-white hc:bg-foreground\"\n              : \"w-1.5 bg-white/30 hc:bg-foreground/40\"\n          )}\n          aria-hidden=\"true\"\n        />\n      ))}\n    </div>\n  )\n}\n\n/* ── Spotlight overlay — highlights the target element ──────────────────── */\n\nfunction SpotlightOverlay({\n  rect,\n  maskId,\n}: {\n  rect: { x: number; y: number; width: number; height: number }\n  /** Unique per coach instance — multiple flows on one page must not duplicate SVG mask ids. */\n  maskId: string\n}) {\n  const padding = 6\n  const borderRadius = 8\n  const x = rect.x - padding\n  const y = rect.y - padding\n  const w = rect.width + padding * 2\n  const h = rect.height + padding * 2\n  const maskUrl = `url(#${maskId})`\n\n  return createPortal(\n    <div\n      className=\"fixed inset-0 z-[55]\"\n      aria-hidden=\"true\"\n    >\n      {/* Semi-transparent overlay with a cutout for the target */}\n      <svg className=\"absolute inset-0 w-full h-full\">\n        <defs>\n          <mask id={maskId}>\n            <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n            <rect\n              x={x}\n              y={y}\n              width={w}\n              height={h}\n              rx={borderRadius}\n              ry={borderRadius}\n              fill=\"black\"\n            />\n          </mask>\n        </defs>\n        <rect\n          width=\"100%\"\n          height=\"100%\"\n          fill=\"rgba(0,0,0,0.5)\"\n          mask={maskUrl}\n        />\n      </svg>\n\n      {/* Highlight ring around the target */}\n      <div\n        className=\"absolute rounded-lg ring-2 ring-brand hc:ring-foreground shadow-[0_0_0_4px_rgba(0,0,0,0.3)] hc:shadow-none\"\n        style={{\n          left: x,\n          top: y,\n          width: w,\n          height: h,\n          borderRadius,\n        }}\n      />\n    </div>,\n    document.body\n  )\n}\n\n/* ── Main component ─────────────────────────────────────────────────────── */\n\nexport interface CoachMarkProps\n  extends VariantProps<typeof coachMarkVariants> {\n  /** State from useCoachMark hook */\n  state: CoachMarkState\n  /** Default popover placement side (step-level side takes priority) */\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\"\n  /** Default popover alignment (step-level align takes priority) */\n  align?: \"start\" | \"center\" | \"end\"\n  /** Offset from anchor element in px */\n  sideOffset?: number\n  /** Label for the primary (next/done) button — defaults to \"Next\" / \"Got it\" */\n  nextLabel?: string\n  /** Label for the skip button — defaults to \"Skip\" */\n  skipLabel?: string\n  /** Extra className for the content container */\n  className?: string\n}\n\nexport function CoachMark({\n  state,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 12,\n  nextLabel,\n  skipLabel = \"Skip\",\n  size,\n  className,\n}: CoachMarkProps) {\n  const spotlightMaskId = React.useId().replace(/:/g, \"\")\n  const {\n    isOpen,\n    step,\n    currentStep,\n    totalSteps,\n    isFlow,\n    isFirst,\n    isLast,\n    next,\n    prev,\n    skip,\n    anchorRect,\n  } = state\n\n  if (!isOpen || !step) return null\n  if (!anchorRect) return null\n\n  const titleId = `coach-mark-title-${step.id}`\n  const descId = `coach-mark-desc-${step.id}`\n  const hasImage = Boolean(step.image)\n  const primaryLabel = nextLabel ?? (isLast ? \"Got it\" : \"Next\")\n  const resolvedSide = step.side ?? side\n  const resolvedAlign = step.align ?? align\n\n  return (\n    <>\n      {/* Spotlight overlay */}\n      <SpotlightOverlay rect={anchorRect} maskId={`coach-spotlight-${spotlightMaskId}`} />\n\n      {/* Popover with virtual anchor */}\n      <PopoverPrimitive.Root open>\n        <PopoverPrimitive.Anchor\n          virtualRef={{\n            current: {\n              getBoundingClientRect: () => ({\n                x: anchorRect.x,\n                y: anchorRect.y,\n                top: anchorRect.y,\n                left: anchorRect.x,\n                bottom: anchorRect.y + anchorRect.height,\n                right: anchorRect.x + anchorRect.width,\n                width: anchorRect.width,\n                height: anchorRect.height,\n                toJSON: () => {},\n              }),\n            },\n          }}\n        />\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            data-slot=\"coach-mark\"\n            side={resolvedSide}\n            align={resolvedAlign}\n            sideOffset={sideOffset}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            onInteractOutside={(e) => e.preventDefault()}\n            onEscapeKeyDown={() => skip()}\n            aria-labelledby={titleId}\n            aria-describedby={descId}\n            className={cn(\n              coachMarkVariants({ size }),\n              /* animations */\n              \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n              \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n              \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n              \"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n              className\n            )}\n          >\n            {/* Image (optional) */}\n            {hasImage && (\n              <CoachMarkImage\n                src={step.image!}\n                alt={step.imageAlt ?? step.title}\n              />\n            )}\n\n            {/* Body */}\n            <div className=\"flex flex-col gap-3 p-4\">\n              {/* Title + close */}\n              <div className=\"flex items-start gap-2\">\n                <div className=\"flex-1 min-w-0\">\n                  <h3\n                    id={titleId}\n                    className=\"text-sm font-semibold text-white leading-snug\"\n                  >\n                    {step.title}\n                  </h3>\n                </div>\n                <button\n                  type=\"button\"\n                  onClick={skip}\n                  className=\"shrink-0 -mt-0.5 -me-1 flex h-6 w-6 items-center justify-center rounded-md text-white/60 hover:bg-white/15 hover:text-white transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!text-foreground hc:hover:!bg-foreground/10\"\n                  aria-label=\"Dismiss\"\n                >\n                  <i className=\"fa-light fa-xmark text-xs\" aria-hidden=\"true\" />\n                </button>\n              </div>\n\n              {/* Description */}\n              <p\n                id={descId}\n                className=\"text-sm text-white/80 leading-relaxed\"\n              >\n                {step.description}\n              </p>\n\n              {/* Footer: step indicator + actions */}\n              <div className=\"flex items-center justify-between gap-3 pt-1\">\n                {/* Left: step dots (flow only) */}\n                <div className=\"flex-1\">\n                  {isFlow && (\n                    <CoachMarkStepIndicator\n                      current={currentStep}\n                      total={totalSteps}\n                    />\n                  )}\n                </div>\n\n                {/* Right: buttons */}\n                <div className=\"flex items-center gap-2 shrink-0\">\n                  {isFlow && !isLast && (\n                    <button\n                      type=\"button\"\n                      onClick={skip}\n                      className=\"h-8 px-3 text-xs font-medium text-white/60 hover:text-white transition-colors rounded-md focus-visible:outline-2 focus-visible:outline-white hc:!text-foreground hc:hover:!text-foreground/80\"\n                    >\n                      {skipLabel}\n                    </button>\n                  )}\n                  {isFlow && !isFirst && (\n                    <button\n                      type=\"button\"\n                      onClick={prev}\n                      className=\"inline-flex items-center gap-1.5 h-8 px-3 text-xs font-medium text-white bg-white/15 hover:bg-white/25 rounded-md border border-white/20 transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!bg-background hc:!text-foreground hc:!border-foreground\"\n                    >\n                      <i className=\"fa-light fa-arrow-left text-xs\" aria-hidden=\"true\" />\n                      Back\n                    </button>\n                  )}\n                  <button\n                    type=\"button\"\n                    onClick={next}\n                    className=\"inline-flex items-center gap-1.5 h-8 px-3 text-xs font-medium text-brand-deep bg-white hover:bg-white/90 rounded-md transition-colors focus-visible:outline-2 focus-visible:outline-white hc:!bg-foreground hc:!text-background hc:border hc:border-foreground\"\n                  >\n                    {primaryLabel}\n                    {isFlow && !isLast && (\n                      <i className=\"fa-light fa-arrow-right text-xs\" aria-hidden=\"true\" />\n                    )}\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            {/* Arrow */}\n            <PopoverPrimitive.Arrow\n              className=\"fill-brand-deep drop-shadow-sm hc:fill-background\"\n              width={12}\n              height={6}\n            />\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    </>\n  )\n}\n"]}

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

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible as Collapsible$1 } from 'radix-ui';
+
+declare function Collapsible({ ...props }: React.ComponentProps<typeof Collapsible$1.Root>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof Collapsible$1.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof Collapsible$1.CollapsibleContent>): react_jsx_runtime.JSX.Element;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/ui/collapsible.js

@@ -0,0 +1,35 @@
+"use client";
+import { Collapsible as Collapsible$1 } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+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
+    }
+  );
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+//# sourceMappingURL=collapsible.js.map
+//# sourceMappingURL=collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/collapsible.tsx"],"names":["CollapsiblePrimitive"],"mappings":";;;AAIA,SAAS,WAAA,CAAY;AAAA,EACnB,GAAG;AACL,CAAA,EAA2D;AACzD,EAAA,2BAAQA,aAAA,CAAqB,IAAA,EAArB,EAA0B,WAAA,EAAU,aAAA,EAAe,GAAG,KAAA,EAAO,CAAA;AACvE;AAEA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,GAAG;AACL,CAAA,EAAyE;AACvE,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,qBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,GAAG;AACL,CAAA,EAAyE;AACvE,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,qBAAA;AAAA,MACf,GAAG;AAAA;AAAA,GACA;AAEJ","file":"collapsible.js","sourcesContent":["\"use client\"\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"]}

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

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Command as Command$1 } from 'cmdk';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+declare function Command({ className, ...props }: React.ComponentProps<typeof Command$1>): react_jsx_runtime.JSX.Element;
+declare function CommandDialog({ title, description, children, className, overlayClassName, showCloseButton: _showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Root> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    /** Backdrop — default is invisible (no dim/blur) but still captures outside clicks for modal behavior */
+    overlayClassName?: string;
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement> & {
+    /**
+     * `palette` — flat header row (icon + field) for ⌘K dialogs; matches blocks.so command-menu-02.
+     * `default` — pill `InputGroup` for embedded / library previews.
+     */
+    variant?: "default" | "palette";
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof Command$1.List>): react_jsx_runtime.JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof Command$1.Empty>): react_jsx_runtime.JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof Command$1.Group>): react_jsx_runtime.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof Command$1.Separator>): react_jsx_runtime.JSX.Element;
+declare function CommandItem({ className, children, ...props }: React.ComponentProps<typeof Command$1.Item>): react_jsx_runtime.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };