@epicbagel/saas-kit 1.31.0 → 1.33.0

package/dist/primitives/command.js

@@ -0,0 +1,129 @@
+"use client";
+import {
+  Dialog,
+  DialogContent
+} from "../chunk-3QT5VYZ3.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/command.tsx
+import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Command = React.forwardRef(({ className, height = "full", surface = "plain", ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive,
+  {
+    ref,
+    className: cn(
+      "flex w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      height === "full" && "h-full",
+      surface === "bordered" && "border",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
+var CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
+};
+var CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx(
+    CommandPrimitive.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-[16px] md:text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+var CommandList = React.forwardRef(({ className, maxHeight = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.List,
+  {
+    ref,
+    className: cn(
+      maxHeight === "default" ? "max-h-[300px]" : "max-h-44",
+      "overflow-y-auto overflow-x-hidden",
+      className
+    ),
+    ...props
+  }
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+var CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-border", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React.forwardRef(({ className, gap = "none", ...props }, ref) => /* @__PURE__ */ jsx(
+  CommandPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[disabled=false]:pointer-events-auto data-[disabled=false]:opacity-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      gap === "sm" && "gap-2",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+var CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+};

package/dist/primitives/compact-list.cjs

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkR3DQS6U4cjs = require('../chunk-R3DQS6U4.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/compact-list.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function CompactList({ items, className }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR3DQS6U4cjs.Card, { className: _chunkKWLSBTB2cjs.cn.call(void 0, "divide-y divide-border", className), children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3 px-3 py-2.5", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "truncate text-sm font-medium", children: item.title }),
+      item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "truncate text-xs text-muted-foreground", children: item.description })
+    ] }),
+    item.meta && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "shrink-0 text-sm text-muted-foreground", children: item.meta }),
+    item.actions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex shrink-0 items-center gap-1", children: item.actions })
+  ] }, item.id)) });
+}
+
+
+exports.CompactList = CompactList;

package/dist/primitives/compact-list.d.cts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface CompactListItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+    actions?: ReactNode;
+}
+interface CompactListProps {
+    items: CompactListItem[];
+    className?: string;
+}
+/** Dense rows with optional metadata and trailing actions. */
+declare function CompactList({ items, className }: CompactListProps): react_jsx_runtime.JSX.Element | null;
+
+export { CompactList, type CompactListItem, type CompactListProps };

package/dist/primitives/compact-list.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface CompactListItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+    actions?: ReactNode;
+}
+interface CompactListProps {
+    items: CompactListItem[];
+    className?: string;
+}
+/** Dense rows with optional metadata and trailing actions. */
+declare function CompactList({ items, className }: CompactListProps): react_jsx_runtime.JSX.Element | null;
+
+export { CompactList, type CompactListItem, type CompactListProps };

package/dist/primitives/compact-list.js

@@ -0,0 +1,24 @@
+"use client";
+import {
+  Card
+} from "../chunk-35YMAIEL.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/compact-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CompactList({ items, className }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(Card, { className: cn("divide-y divide-border", className), children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-3 py-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: item.title }),
+      item.description && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: item.description })
+    ] }),
+    item.meta && /* @__PURE__ */ jsx("div", { className: "shrink-0 text-sm text-muted-foreground", children: item.meta }),
+    item.actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: item.actions })
+  ] }, item.id)) });
+}
+export {
+  CompactList
+};

package/dist/primitives/connection.cjs

@@ -12,28 +12,28 @@ var _chunkAU5GUDOWcjs = require('../chunk-AU5GUDOW.cjs');
 
 
 var _chunkWDXEJDMOcjs = require('../chunk-WDXEJDMO.cjs');
-require('../chunk-ZAITUDYD.cjs');
 
 
-var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
+var _chunkCTYOW3V2cjs = require('../chunk-CTYOW3V2.cjs');
+require('../chunk-ZAITUDYD.cjs');
 
 
-var _chunkCTYOW3V2cjs = require('../chunk-CTYOW3V2.cjs');
+var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
 
 
 
-var _chunk667ZCM4Xcjs = require('../chunk-667ZCM4X.cjs');
-require('../chunk-I6GUOEBO.cjs');
 
 
 
 
 
 
+var _chunkLIUYHYFNcjs = require('../chunk-LIUYHYFN.cjs');
 
 
 
-var _chunkLIUYHYFNcjs = require('../chunk-LIUYHYFN.cjs');
+var _chunk667ZCM4Xcjs = require('../chunk-667ZCM4X.cjs');
+require('../chunk-I6GUOEBO.cjs');
 
 
 var _chunkJDEXZGIYcjs = require('../chunk-JDEXZGIY.cjs');

package/dist/primitives/connection.js

@@ -12,18 +12,13 @@ import {
   DialogHeader,
   DialogTitle
 } from "../chunk-3QT5VYZ3.js";
-import "../chunk-V4LE2HWP.js";
-import {
-  Text
-} from "../chunk-EIY5LLSP.js";
 import {
   Callout
 } from "../chunk-GL5CV4FF.js";
+import "../chunk-V4LE2HWP.js";
 import {
-  Alert,
-  AlertDescription
-} from "../chunk-R4AIM3BQ.js";
-import "../chunk-D4ZL2OEQ.js";
+  Text
+} from "../chunk-EIY5LLSP.js";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -34,6 +29,11 @@ import {
   AlertDialogHeader,
   AlertDialogTitle
 } from "../chunk-ZLU32SRP.js";
+import {
+  Alert,
+  AlertDescription
+} from "../chunk-R4AIM3BQ.js";
+import "../chunk-D4ZL2OEQ.js";
 import {
   buttonVariants
 } from "../chunk-W326GKML.js";

package/dist/primitives/context-bar.cjs

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/context-bar.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var TONES = {
+  /** Inverted/solid — the strongest "you are in a special mode" signal (preview, impersonation). */
+  dark: "bg-foreground text-background",
+  /** Quiet, in-flow notice. */
+  muted: "bg-muted text-muted-foreground",
+  /** Caution — staging, destructive context, "this is live data". */
+  warning: "bg-amber-500 text-black",
+  /** Branded/informational. */
+  info: "bg-primary text-primary-foreground"
+};
+function ContextBar({
+  label,
+  icon,
+  children,
+  actions,
+  tone = "dark",
+  sticky = false,
+  frosted = false,
+  className,
+  maxWidth
+}) {
+  const frostedMuted = frosted && tone === "muted";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "context-bar",
+      "data-frosted-surface": frostedMuted ? "muted" : void 0,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "w-full", frostedMuted ? "text-foreground" : TONES[tone], sticky && "sticky top-0 z-40", className),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+            "mx-auto flex w-full items-center gap-x-3 gap-y-2 px-4 py-3 sm:px-6",
+            maxWidth
+          ),
+          children: [
+            icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex shrink-0 items-center opacity-80 [&_svg]:size-4", children: icon }),
+            label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0 font-mono text-xs font-medium uppercase tracking-[0.2em]", children: label }),
+            children ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-w-0 flex-1 truncate text-sm", !frostedMuted && "opacity-90"), children }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-1" }),
+            actions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex shrink-0 items-center gap-2", children: actions })
+          ]
+        }
+      )
+    }
+  );
+}
+
+
+exports.ContextBar = ContextBar;

package/dist/primitives/context-bar.d.cts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+declare const TONES: {
+    /** Inverted/solid — the strongest "you are in a special mode" signal (preview, impersonation). */
+    readonly dark: "bg-foreground text-background";
+    /** Quiet, in-flow notice. */
+    readonly muted: "bg-muted text-muted-foreground";
+    /** Caution — staging, destructive context, "this is live data". */
+    readonly warning: "bg-amber-500 text-black";
+    /** Branded/informational. */
+    readonly info: "bg-primary text-primary-foreground";
+};
+interface ContextBarProps {
+    /**
+     * Short tag rendered in mono uppercase, e.g. `"Preview"`, `"Staging"`, `"Viewing as"`. The "what
+     * mode is this" label.
+     */
+    label?: ReactNode;
+    /** Leading icon (sized to 1rem). */
+    icon?: ReactNode;
+    /** The message — a sentence explaining the context. */
+    children?: ReactNode;
+    /** Right-aligned controls — a toggle, a button, a dismiss. */
+    actions?: ReactNode;
+    /** Visual tone. Default `"dark"` (inverted). */
+    tone?: keyof typeof TONES;
+    /** Pin to the top of the scroll container. Default `false`. */
+    sticky?: boolean;
+    /** Blurred translucent muted tone; warning, info and dark tones stay solid for contrast. */
+    frosted?: boolean;
+    className?: string;
+    /** Constrain the inner row to a max width (else full-bleed). e.g. `"max-w-5xl"`. */
+    maxWidth?: string;
+}
+/**
+ * A full-width bar that announces the **current mode/context** of a view — a preview, an
+ * impersonation session, a staging environment, a draft — with an optional label, message, and
+ * right-aligned actions. App-agnostic: the booking preview is one use; "Viewing as {user}",
+ * "Staging — not real data", and "Draft — unpublished" are others.
+ *
+ * ```tsx
+ * <ContextBar tone="dark" icon={<Eye />} label="Preview" actions={<CopyButton … />}>
+ *   This is exactly what your recipient sees — nothing is booked here.
+ * </ContextBar>
+ * ```
+ */
+declare function ContextBar({ label, icon, children, actions, tone, sticky, frosted, className, maxWidth, }: ContextBarProps): react_jsx_runtime.JSX.Element;
+
+export { ContextBar, type ContextBarProps };

package/dist/primitives/context-bar.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+declare const TONES: {
+    /** Inverted/solid — the strongest "you are in a special mode" signal (preview, impersonation). */
+    readonly dark: "bg-foreground text-background";
+    /** Quiet, in-flow notice. */
+    readonly muted: "bg-muted text-muted-foreground";
+    /** Caution — staging, destructive context, "this is live data". */
+    readonly warning: "bg-amber-500 text-black";
+    /** Branded/informational. */
+    readonly info: "bg-primary text-primary-foreground";
+};
+interface ContextBarProps {
+    /**
+     * Short tag rendered in mono uppercase, e.g. `"Preview"`, `"Staging"`, `"Viewing as"`. The "what
+     * mode is this" label.
+     */
+    label?: ReactNode;
+    /** Leading icon (sized to 1rem). */
+    icon?: ReactNode;
+    /** The message — a sentence explaining the context. */
+    children?: ReactNode;
+    /** Right-aligned controls — a toggle, a button, a dismiss. */
+    actions?: ReactNode;
+    /** Visual tone. Default `"dark"` (inverted). */
+    tone?: keyof typeof TONES;
+    /** Pin to the top of the scroll container. Default `false`. */
+    sticky?: boolean;
+    /** Blurred translucent muted tone; warning, info and dark tones stay solid for contrast. */
+    frosted?: boolean;
+    className?: string;
+    /** Constrain the inner row to a max width (else full-bleed). e.g. `"max-w-5xl"`. */
+    maxWidth?: string;
+}
+/**
+ * A full-width bar that announces the **current mode/context** of a view — a preview, an
+ * impersonation session, a staging environment, a draft — with an optional label, message, and
+ * right-aligned actions. App-agnostic: the booking preview is one use; "Viewing as {user}",
+ * "Staging — not real data", and "Draft — unpublished" are others.
+ *
+ * ```tsx
+ * <ContextBar tone="dark" icon={<Eye />} label="Preview" actions={<CopyButton … />}>
+ *   This is exactly what your recipient sees — nothing is booked here.
+ * </ContextBar>
+ * ```
+ */
+declare function ContextBar({ label, icon, children, actions, tone, sticky, frosted, className, maxWidth, }: ContextBarProps): react_jsx_runtime.JSX.Element;
+
+export { ContextBar, type ContextBarProps };

package/dist/primitives/context-bar.js

@@ -0,0 +1,57 @@
+"use client";
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/context-bar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TONES = {
+  /** Inverted/solid — the strongest "you are in a special mode" signal (preview, impersonation). */
+  dark: "bg-foreground text-background",
+  /** Quiet, in-flow notice. */
+  muted: "bg-muted text-muted-foreground",
+  /** Caution — staging, destructive context, "this is live data". */
+  warning: "bg-amber-500 text-black",
+  /** Branded/informational. */
+  info: "bg-primary text-primary-foreground"
+};
+function ContextBar({
+  label,
+  icon,
+  children,
+  actions,
+  tone = "dark",
+  sticky = false,
+  frosted = false,
+  className,
+  maxWidth
+}) {
+  const frostedMuted = frosted && tone === "muted";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "context-bar",
+      "data-frosted-surface": frostedMuted ? "muted" : void 0,
+      className: cn("w-full", frostedMuted ? "text-foreground" : TONES[tone], sticky && "sticky top-0 z-40", className),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "mx-auto flex w-full items-center gap-x-3 gap-y-2 px-4 py-3 sm:px-6",
+            maxWidth
+          ),
+          children: [
+            icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center opacity-80 [&_svg]:size-4", children: icon }),
+            label && /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs font-medium uppercase tracking-[0.2em]", children: label }),
+            children ? /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate text-sm", !frostedMuted && "opacity-90"), children }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+            actions && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-2", children: actions })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ContextBar
+};

package/dist/primitives/copy-button.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkFARCLWLUcjs = require('../chunk-FARCLWLU.cjs');
+var _chunkHHF5DEKMcjs = require('../chunk-HHF5DEKM.cjs');
+require('../chunk-4LXN6GLZ.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
-require('../chunk-4LXN6GLZ.cjs');
 
 
-exports.CopyButton = _chunkFARCLWLUcjs.CopyButton;
+exports.CopyButton = _chunkHHF5DEKMcjs.CopyButton;

package/dist/primitives/copy-button.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   CopyButton
-} from "../chunk-DILYV4FI.js";
+} from "../chunk-7ZRFXJVN.js";
+import "../chunk-ZWZAAGQF.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
-import "../chunk-ZWZAAGQF.js";
 export {
   CopyButton
 };

package/dist/primitives/cycling-prompt.cjs

@@ -0,0 +1,102 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/cycling-prompt.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var TYPE_MS = 45;
+var DELETE_MS = 22;
+var HOLD_MS = 1800;
+function CyclingPrompt({
+  prompts,
+  className
+}) {
+  const [idx, setIdx] = _react.useState.call(void 0, 0);
+  const [text, setText] = _react.useState.call(void 0, "");
+  const [phase, setPhase] = _react.useState.call(void 0, 
+    "typing"
+  );
+  const [reducedMotion, setReducedMotion] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(mq.matches);
+    const onChange = () => setReducedMotion(mq.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    if (reducedMotion || prompts.length === 0) return;
+    const current = _nullishCoalesce(prompts[idx], () => ( ""));
+    if (phase === "typing") {
+      if (text.length < current.length) {
+        const t2 = setTimeout(
+          () => setText(current.slice(0, text.length + 1)),
+          TYPE_MS
+        );
+        return () => clearTimeout(t2);
+      }
+      const t = setTimeout(() => setPhase("deleting"), HOLD_MS);
+      return () => clearTimeout(t);
+    }
+    if (phase === "deleting") {
+      if (text.length > 0) {
+        const t = setTimeout(() => setText(text.slice(0, -1)), DELETE_MS);
+        return () => clearTimeout(t);
+      }
+      setIdx((i) => (i + 1) % prompts.length);
+      setPhase("typing");
+    }
+  }, [text, phase, idx, reducedMotion, prompts]);
+  const display = reducedMotion ? _nullishCoalesce(prompts[0], () => ( "")) : text;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "inline-flex items-baseline", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: display }),
+    !reducedMotion && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        "aria-hidden": true,
+        className: "ml-0.5 inline-block h-[1em] w-[2px] translate-y-[0.15em] animate-pulse bg-current"
+      }
+    )
+  ] });
+}
+function TypewriterText({
+  text,
+  active = true,
+  speedMs = 24,
+  onComplete,
+  className
+}) {
+  const [length, setLength] = _react.useState.call(void 0, active ? 0 : text.length);
+  const completed = _react.useRef.call(void 0, false);
+  const onCompleteRef = _react.useRef.call(void 0, onComplete);
+  _react.useEffect.call(void 0, () => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+  _react.useEffect.call(void 0, () => {
+    setLength(active ? 0 : text.length);
+    completed.current = false;
+  }, [active, text]);
+  _react.useEffect.call(void 0, () => {
+    if (!active || length >= text.length) {
+      if (length >= text.length && !completed.current) {
+        completed.current = true;
+        _optionalChain([onCompleteRef, 'access', _ => _.current, 'optionalCall', _2 => _2()]);
+      }
+      return;
+    }
+    const timer = window.setTimeout(() => setLength((value) => value + 1), speedMs);
+    return () => window.clearTimeout(timer);
+  }, [active, length, speedMs, text.length]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "whitespace-pre-wrap", className), "aria-label": text, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": true, children: text.slice(0, length) }),
+    active && length < text.length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": true, className: "ml-0.5 inline-block h-[1em] w-px animate-pulse bg-current motion-reduce:hidden" })
+  ] });
+}
+
+
+
+exports.CyclingPrompt = CyclingPrompt; exports.TypewriterText = TypewriterText;

package/dist/primitives/cycling-prompt.d.cts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * CyclingPrompt — typewriter caption that types, holds, deletes, and
+ * advances through a list of phrases. Pure useEffect state machine.
+ * Honors prefers-reduced-motion by showing the first phrase statically.
+ *
+ * Phrases are caller-supplied so each app shows its own examples.
+ */
+declare function CyclingPrompt({ prompts, className, }: {
+    prompts: string[];
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+interface TypewriterTextProps {
+    text: string;
+    active?: boolean;
+    speedMs?: number;
+    onComplete?: () => void;
+    className?: string;
+}
+/** One-shot, accessible typewriter text for guided product demonstrations. */
+declare function TypewriterText({ text, active, speedMs, onComplete, className, }: TypewriterTextProps): react_jsx_runtime.JSX.Element;
+
+export { CyclingPrompt, TypewriterText, type TypewriterTextProps };