@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-textarea.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../textarea/src/textarea.ts", "../../textarea/src/textarea.styles.ts", "../../react-textarea/src/textarea.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface TextareaProps {\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  'aria-invalid'?: boolean\n  rows?: number\n  maxRows?: number\n}\n\nexport interface TextareaAPI {\n  /** ARIA attributes to spread on the element */\n  ariaProps: Partial<AccessibilityProps> & { 'aria-invalid'?: boolean; 'aria-required'?: boolean }\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n}\n\nexport function createTextarea(props: TextareaProps = {}): TextareaAPI {\n  const {\n    disabled = false,\n    readOnly = false,\n    required = false,\n    'aria-invalid': ariaInvalid,\n  } = props\n\n  const ariaProps: TextareaAPI['ariaProps'] = {}\n\n  if (disabled) {\n    ariaProps['aria-disabled'] = true\n  }\n\n  if (ariaInvalid) {\n    ariaProps['aria-invalid'] = true\n  }\n\n  if (required) {\n    ariaProps['aria-required'] = true\n  }\n\n  const dataAttributes: Record<string, string> = {}\n\n  if (disabled) {\n    dataAttributes['data-disabled'] = ''\n  }\n\n  if (readOnly) {\n    dataAttributes['data-readonly'] = ''\n  }\n\n  if (ariaInvalid) {\n    dataAttributes['data-invalid'] = ''\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const textareaVariants = cva({\n  base: 'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n  variants: {\n    size: {\n      sm: 'min-h-[40px] text-xs',\n      default: 'min-h-[60px]',\n      lg: 'min-h-[80px] text-base',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createTextarea,\n  textareaVariants,\n} from '@refraction-ui/textarea'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {\n  size?: 'sm' | 'default' | 'lg'\n  maxRows?: number\n}\n\n/**\n * Textarea component — renders a styled textarea with size support.\n *\n * Uses the headless @refraction-ui/textarea core for state, ARIA, and data attributes.\n * Styling via Tailwind utility classes (no external CSS-in-JS).\n */\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea({ size, className, disabled, readOnly, required, rows, maxRows, 'aria-invalid': ariaInvalid, ...props }, ref) {\n    const api = createTextarea({\n      disabled,\n      readOnly,\n      required,\n      rows,\n      maxRows,\n      'aria-invalid': ariaInvalid === true ? true : undefined,\n    })\n\n    const classes = cn(textareaVariants({ size }), className)\n\n    return (\n      <textarea\n        ref={ref}\n        className={classes}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        rows={rows}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAkBO,SAAS,eAAe,QAAuB,CAAA,GAAiB;AACrE,QAAM;IACJ,WAAW;IACX,WAAW;IACX,WAAW;IACX,gBAAgB;EAAA,IACd;AAEJ,QAAM,YAAsC,CAAA;AAE5C,MAAI,UAAU;AACZ,cAAU,eAAe,IAAI;EAC/B;AAEA,MAAI,aAAa;AACf,cAAU,cAAc,IAAI;EAC9B;AAEA,MAAI,UAAU;AACZ,cAAU,eAAe,IAAI;EAC/B;AAEA,QAAM,iBAAyC,CAAA;AAE/C,MAAI,UAAU;AACZ,mBAAe,eAAe,IAAI;EACpC;AAEA,MAAI,UAAU;AACZ,mBAAe,eAAe,IAAI;EACpC;AAEA,MAAI,aAAa;AACf,mBAAe,cAAc,IAAI;EACnC;AAEA,SAAO;IACL;IACA;EAAA;AAEJ;ACxDO,IAAM,mBAAmB,IAAI;EAClC,MAAM;EACN,UAAU;IACR,MAAM;MACJ,IAAI;MACJ,SAAS;MACT,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;;;;ACIM,IAAM,WAAiB;EAC5B,SAASA,UAAS,EAAE,MAAM,WAAW,UAAU,UAAU,UAAU,MAAM,SAAS,gBAAgB,aAAa,GAAG,MAAA,GAAS,KAAK;AAC9H,UAAM,MAAM,eAAe;MACzB;MACA;MACA;MACA;MACA;MACA,gBAAgB,gBAAgB,OAAO,OAAO;IAAA,CAC/C;AAED,UAAM,UAAU,GAAG,iBAAiB,EAAE,KAAA,CAAM,GAAG,SAAS;AAExD,WACE;MAAC;MAAA;QACC;QACA,WAAW;QACX;QACA;QACA;QACA;QACC,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;",
+  "names": ["Textarea"]
+}

package/dist/react-thread-view.js

@@ -0,0 +1,139 @@
+import {
+  createThreadView,
+  formatRelativeTime,
+  formatTimestamp,
+  threadActionsStyles,
+  threadAttachmentStyles,
+  threadAuthorStyles,
+  threadAvatarStyles,
+  threadBodyStyles,
+  threadContainerStyles,
+  threadContentStyles,
+  threadEditedStyles,
+  threadMessageStyles,
+  threadReactionsStyles,
+  threadReplyIndicatorStyles,
+  threadTimestampStyles
+} from "./chunk-ONACRMG4.js";
+import {
+  cn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-thread-view/dist/index.js
+import * as React from "react";
+function MessageComponent({
+  message,
+  api
+}) {
+  return React.createElement(
+    "div",
+    { className: threadMessageStyles, ...api.getMessageAriaProps(message) },
+    // Avatar
+    React.createElement(
+      "div",
+      { className: threadAvatarStyles },
+      message.author.avatarUrl ? React.createElement("img", {
+        src: message.author.avatarUrl,
+        alt: message.author.name,
+        className: "h-full w-full object-cover"
+      }) : message.author.name.charAt(0).toUpperCase()
+    ),
+    // Content
+    React.createElement(
+      "div",
+      { className: threadContentStyles },
+      React.createElement(
+        "div",
+        { className: "flex items-baseline" },
+        React.createElement("span", { className: threadAuthorStyles }, message.author.name),
+        React.createElement(
+          "span",
+          { className: threadTimestampStyles },
+          api.formatTimestamp(message.timestamp)
+        ),
+        message.edited && React.createElement("span", { className: threadEditedStyles }, "(edited)")
+      ),
+      React.createElement("div", { className: threadBodyStyles }, message.content),
+      // Reactions
+      message.reactions && message.reactions.length > 0 && React.createElement(
+        "div",
+        { className: threadReactionsStyles },
+        message.reactions.map(
+          (reaction, i) => React.createElement(
+            "button",
+            {
+              key: `${reaction.emoji}-${i}`,
+              type: "button",
+              className: cn(
+                "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-xs cursor-pointer",
+                reaction.userReacted ? "border-primary bg-primary/10" : "border-border"
+              ),
+              onClick: () => api.react(message.id, reaction.emoji)
+            },
+            `${reaction.emoji} ${reaction.count}`
+          )
+        )
+      ),
+      // Reply indicator
+      message.replies && message.replies.length > 0 && React.createElement(
+        "div",
+        { className: threadReplyIndicatorStyles },
+        `${message.replies.length} ${message.replies.length === 1 ? "reply" : "replies"}`
+      ),
+      // Attachments
+      message.attachments && message.attachments.map(
+        (attachment) => React.createElement(
+          "div",
+          { key: attachment.id, className: threadAttachmentStyles },
+          React.createElement("span", null, "\u{1F4CE}"),
+          React.createElement("span", { className: "truncate" }, attachment.name)
+        )
+      ),
+      // Actions (reply button)
+      React.createElement(
+        "div",
+        { className: threadActionsStyles },
+        React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "text-xs text-muted-foreground hover:text-foreground cursor-pointer",
+            onClick: () => api.startReply(message.id),
+            ...api.getReplyButtonAriaProps(message.id)
+          },
+          "Reply"
+        )
+      )
+    )
+  );
+}
+var ThreadView = React.forwardRef(
+  function ThreadView2({ messages, onReply, onReact, currentUserId, className }, ref) {
+    const api = createThreadView({ messages, onReply, onReact, currentUserId });
+    return React.createElement(
+      "div",
+      { ref, ...api.ariaProps, className: cn(threadContainerStyles, className) },
+      messages.map(
+        (message) => React.createElement(MessageComponent, {
+          key: message.id,
+          message,
+          api
+        })
+      )
+    );
+  }
+);
+export {
+  ThreadView,
+  formatRelativeTime,
+  formatTimestamp,
+  threadAuthorStyles,
+  threadAvatarStyles,
+  threadBodyStyles,
+  threadContainerStyles,
+  threadContentStyles,
+  threadMessageStyles,
+  threadReactionsStyles,
+  threadTimestampStyles
+};
+//# sourceMappingURL=react-thread-view.js.map

package/dist/react-thread-view.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../react-thread-view/src/thread-view.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport {\n  createThreadView,\n  threadContainerStyles,\n  threadMessageStyles,\n  threadAvatarStyles,\n  threadContentStyles,\n  threadAuthorStyles,\n  threadTimestampStyles,\n  threadBodyStyles,\n  threadReactionsStyles,\n  threadReplyIndicatorStyles,\n  threadActionsStyles,\n  threadAttachmentStyles,\n  threadEditedStyles,\n  type MessageData,\n  type MessageReaction,\n} from '@refraction-ui/thread-view'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface ThreadViewProps {\n  messages: MessageData[]\n  onReply?: (messageId: string, content: string) => void\n  onReact?: (messageId: string, emoji: string) => void\n  currentUserId?: string\n  className?: string\n}\n\nfunction MessageComponent({\n  message,\n  api,\n}: {\n  message: MessageData\n  api: ReturnType<typeof createThreadView>\n}) {\n  return React.createElement(\n    'div',\n    { className: threadMessageStyles, ...api.getMessageAriaProps(message) },\n    // Avatar\n    React.createElement(\n      'div',\n      { className: threadAvatarStyles },\n      message.author.avatarUrl\n        ? React.createElement('img', {\n            src: message.author.avatarUrl,\n            alt: message.author.name,\n            className: 'h-full w-full object-cover',\n          })\n        : message.author.name.charAt(0).toUpperCase(),\n    ),\n    // Content\n    React.createElement(\n      'div',\n      { className: threadContentStyles },\n      React.createElement(\n        'div',\n        { className: 'flex items-baseline' },\n        React.createElement('span', { className: threadAuthorStyles }, message.author.name),\n        React.createElement(\n          'span',\n          { className: threadTimestampStyles },\n          api.formatTimestamp(message.timestamp),\n        ),\n        message.edited &&\n          React.createElement('span', { className: threadEditedStyles }, '(edited)'),\n      ),\n      React.createElement('div', { className: threadBodyStyles }, message.content),\n      // Reactions\n      message.reactions &&\n        message.reactions.length > 0 &&\n        React.createElement(\n          'div',\n          { className: threadReactionsStyles },\n          message.reactions.map((reaction, i) =>\n            React.createElement(\n              'button',\n              {\n                key: `${reaction.emoji}-${i}`,\n                type: 'button',\n                className: cn(\n                  'inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-xs cursor-pointer',\n                  reaction.userReacted ? 'border-primary bg-primary/10' : 'border-border',\n                ),\n                onClick: () => api.react(message.id, reaction.emoji),\n              },\n              `${reaction.emoji} ${reaction.count}`,\n            ),\n          ),\n        ),\n      // Reply indicator\n      message.replies &&\n        message.replies.length > 0 &&\n        React.createElement(\n          'div',\n          { className: threadReplyIndicatorStyles },\n          `${message.replies.length} ${message.replies.length === 1 ? 'reply' : 'replies'}`,\n        ),\n      // Attachments\n      message.attachments &&\n        message.attachments.map((attachment) =>\n          React.createElement(\n            'div',\n            { key: attachment.id, className: threadAttachmentStyles },\n            React.createElement('span', null, '\\u{1F4CE}'),\n            React.createElement('span', { className: 'truncate' }, attachment.name),\n          ),\n        ),\n      // Actions (reply button)\n      React.createElement(\n        'div',\n        { className: threadActionsStyles },\n        React.createElement(\n          'button',\n          {\n            type: 'button',\n            className: 'text-xs text-muted-foreground hover:text-foreground cursor-pointer',\n            onClick: () => api.startReply(message.id),\n            ...api.getReplyButtonAriaProps(message.id),\n          },\n          'Reply',\n        ),\n      ),\n    ),\n  )\n}\n\nexport const ThreadView = React.forwardRef<HTMLDivElement, ThreadViewProps>(\n  function ThreadView({ messages, onReply, onReact, currentUserId, className }, ref) {\n  const api = createThreadView({ messages, onReply, onReact, currentUserId })\n\n  return React.createElement(\n    'div',\n    { ref, ...api.ariaProps, className: cn(threadContainerStyles, className) },\n    messages.map((message) =>\n      React.createElement(MessageComponent, {\n        key: message.id,\n        message,\n        api,\n      }),\n    ),\n  )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAS,iBAAiB;EACxB;EACA;AACF,GAGG;AACD,SAAa;IACX;IACA,EAAE,WAAW,qBAAqB,GAAG,IAAI,oBAAoB,OAAO,EAAA;;IAE9D;MACJ;MACA,EAAE,WAAW,mBAAA;MACb,QAAQ,OAAO,YACL,oBAAc,OAAO;QACzB,KAAK,QAAQ,OAAO;QACpB,KAAK,QAAQ,OAAO;QACpB,WAAW;MAAA,CACZ,IACD,QAAQ,OAAO,KAAK,OAAO,CAAC,EAAE,YAAA;IAAY;;IAG1C;MACJ;MACA,EAAE,WAAW,oBAAA;MACP;QACJ;QACA,EAAE,WAAW,sBAAA;QACP,oBAAc,QAAQ,EAAE,WAAW,mBAAA,GAAsB,QAAQ,OAAO,IAAI;QAC5E;UACJ;UACA,EAAE,WAAW,sBAAA;UACb,IAAI,gBAAgB,QAAQ,SAAS;QAAA;QAEvC,QAAQ,UACA,oBAAc,QAAQ,EAAE,WAAW,mBAAA,GAAsB,UAAU;MAAA;MAEvE,oBAAc,OAAO,EAAE,WAAW,iBAAA,GAAoB,QAAQ,OAAO;;MAE3E,QAAQ,aACN,QAAQ,UAAU,SAAS,KACrB;QACJ;QACA,EAAE,WAAW,sBAAA;QACb,QAAQ,UAAU;UAAI,CAAC,UAAU,MACzB;YACJ;YACA;cACE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;cAC3B,MAAM;cACN,WAAW;gBACT;gBACA,SAAS,cAAc,iCAAiC;cAAA;cAE1D,SAAS,MAAM,IAAI,MAAM,QAAQ,IAAI,SAAS,KAAK;YAAA;YAErD,GAAG,SAAS,KAAK,IAAI,SAAS,KAAK;UAAA;QACrC;MACF;;MAGJ,QAAQ,WACN,QAAQ,QAAQ,SAAS,KACnB;QACJ;QACA,EAAE,WAAW,2BAAA;QACb,GAAG,QAAQ,QAAQ,MAAM,IAAI,QAAQ,QAAQ,WAAW,IAAI,UAAU,SAAS;MAAA;;MAGnF,QAAQ,eACN,QAAQ,YAAY;QAAI,CAAC,eACjB;UACJ;UACA,EAAE,KAAK,WAAW,IAAI,WAAW,uBAAA;UAC3B,oBAAc,QAAQ,MAAM,WAAW;UACvC,oBAAc,QAAQ,EAAE,WAAW,WAAA,GAAc,WAAW,IAAI;QAAA;MACxE;;MAGE;QACJ;QACA,EAAE,WAAW,oBAAA;QACP;UACJ;UACA;YACE,MAAM;YACN,WAAW;YACX,SAAS,MAAM,IAAI,WAAW,QAAQ,EAAE;YACxC,GAAG,IAAI,wBAAwB,QAAQ,EAAE;UAAA;UAE3C;QAAA;MACF;IACF;EACF;AAEJ;AAEO,IAAM,aAAmB;EAC9B,SAASA,YAAW,EAAE,UAAU,SAAS,SAAS,eAAe,UAAA,GAAa,KAAK;AACnF,UAAM,MAAM,iBAAiB,EAAE,UAAU,SAAS,SAAS,cAAA,CAAe;AAE1E,WAAa;MACX;MACA,EAAE,KAAK,GAAG,IAAI,WAAW,WAAW,GAAG,uBAAuB,SAAS,EAAA;MACvE,SAAS;QAAI,CAAC,YACN,oBAAc,kBAAkB;UACpC,KAAK,QAAQ;UACb;UACA;QAAA,CACD;MAAA;IACH;EAEF;AACF;",
+  "names": ["ThreadView"]
+}

package/dist/react-timeline.js

@@ -0,0 +1,153 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-timeline/dist/index.js
+import * as React from "react";
+
+// ../timeline/dist/index.js
+function createTimeline(props = {}) {
+  const { orientation = "vertical" } = props;
+  const ariaProps = {
+    role: "list"
+  };
+  const dataAttributes = {
+    "data-orientation": orientation
+  };
+  return { ariaProps, dataAttributes };
+}
+function getTimelineItemAria() {
+  return { role: "listitem" };
+}
+function resolveTimelineItems(items) {
+  return items.map((item) => ({
+    ...item,
+    status: item.status ?? "default",
+    time: item.time ?? "",
+    description: item.description ?? ""
+  }));
+}
+var timelineVariants = cva({
+  base: "relative",
+  variants: {
+    orientation: {
+      vertical: "flex flex-col",
+      horizontal: "flex flex-row items-start overflow-x-auto"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var timelineItemVariants = cva({
+  base: "relative flex gap-4",
+  variants: {
+    orientation: {
+      vertical: "flex-row pb-8 last:pb-0",
+      horizontal: "flex-col items-center flex-1 px-2"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var timelineMarkerVariants = cva({
+  base: [
+    "relative z-10 flex shrink-0 items-center justify-center",
+    "size-3 rounded-full border-2",
+    "transition-colors"
+  ].join(" "),
+  variants: {
+    status: {
+      done: "bg-primary border-primary",
+      current: "bg-background border-primary ring-2 ring-primary ring-offset-2 ring-offset-background",
+      upcoming: "bg-muted border-muted-foreground/30",
+      default: "bg-background border-border"
+    }
+  },
+  defaultVariants: {
+    status: "default"
+  }
+});
+var timelineConnectorVariants = cva({
+  base: "absolute bg-border",
+  variants: {
+    orientation: {
+      vertical: "left-[5px] top-3 w-0.5 h-full",
+      horizontal: "top-[5px] left-1/2 w-full h-0.5"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var timelineGutterClass = "relative flex flex-col items-center";
+var timelineTimeClass = "text-xs text-muted-foreground tabular-nums";
+var timelineTitleClass = "text-sm font-medium text-foreground leading-snug";
+var timelineDescriptionClass = "mt-0.5 text-xs text-muted-foreground leading-relaxed";
+var timelineContentClass = "flex flex-col min-w-0";
+
+// ../react-timeline/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var TimelineItem = React.forwardRef(
+  function TimelineItem2({ item, orientation, isLast }, ref) {
+    const itemAria = getTimelineItemAria();
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        ...itemAria,
+        className: timelineItemVariants({ orientation }),
+        "data-status": item.status,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: timelineGutterClass, children: [
+            /* @__PURE__ */ jsx("div", { className: timelineMarkerVariants({ status: item.status }) }),
+            !isLast && /* @__PURE__ */ jsx("div", { className: timelineConnectorVariants({ orientation }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: timelineContentClass, children: [
+            item.time && /* @__PURE__ */ jsx("span", { className: timelineTimeClass, children: item.time }),
+            /* @__PURE__ */ jsx("span", { className: timelineTitleClass, children: item.title }),
+            item.description && /* @__PURE__ */ jsx("p", { className: timelineDescriptionClass, children: item.description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var Timeline = React.forwardRef(
+  function Timeline2({ items, orientation = "vertical", renderItem, className, ...props }, ref) {
+    const resolved = React.useMemo(() => resolveTimelineItems(items), [items]);
+    const api = createTimeline({ orientation });
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        className: cn(timelineVariants({ orientation }), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: resolved.map((item, index) => {
+          const isLast = index === resolved.length - 1;
+          if (renderItem) {
+            return /* @__PURE__ */ jsx(React.Fragment, { children: renderItem(item, index, isLast) }, item.id);
+          }
+          return /* @__PURE__ */ jsx(
+            TimelineItem,
+            {
+              item,
+              orientation,
+              isLast
+            },
+            item.id
+          );
+        })
+      }
+    );
+  }
+);
+export {
+  Timeline,
+  TimelineItem
+};
+//# sourceMappingURL=react-timeline.js.map

package/dist/react-timeline.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../timeline/src/timeline.ts", "../../timeline/src/timeline.styles.ts", "../../react-timeline/src/timeline.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\n/** Layout orientation of the timeline. */\nexport type TimelineOrientation = 'vertical' | 'horizontal'\n\n/** Visual status of a single timeline item. */\nexport type TimelineItemStatus = 'done' | 'current' | 'upcoming' | 'default'\n\n/** Data describing a single event in the timeline. */\nexport interface TimelineItemData {\n  /** Unique identifier for the item. */\n  id: string\n  /** Primary label shown beside the marker. */\n  title: string\n  /** Optional timestamp / date string shown near the marker. */\n  time?: string\n  /** Additional detail text rendered below the title. */\n  description?: string\n  /** Visual status of this item. Defaults to `'default'` when omitted. */\n  status?: TimelineItemStatus\n}\n\nexport interface TimelineProps {\n  /** Ordered list of events to display. */\n  items: TimelineItemData[]\n  /** Layout direction. */\n  orientation?: TimelineOrientation\n}\n\nexport interface TimelineAPI {\n  /** ARIA attributes to spread on the list container (`role=\"list\"`). */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic container props for a timeline.\n *\n * Returns `role=\"list\"` (the items carry `role=\"listitem\"`) plus a\n * `data-orientation` attribute. The function is JSX-free so it can run in\n * any environment including server-side Node and Astro SSR.\n */\nexport function createTimeline(\n  props: Pick<TimelineProps, 'orientation'> = {},\n): TimelineAPI {\n  const { orientation = 'vertical' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'list',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-orientation': orientation,\n  }\n\n  return { ariaProps, dataAttributes }\n}\n\n/**\n * Accessibility props for a single timeline item.\n *\n * Every item gets `role=\"listitem\"` regardless of status so screen readers\n * announce the full list correctly.\n */\nexport function getTimelineItemAria(): Partial<AccessibilityProps> {\n  return { role: 'listitem' }\n}\n\n/**\n * Normalise a raw list of timeline items so every entry has an explicit\n * `status`. Items without a status receive `'default'`.\n *\n * This is the single source of truth shared by every adapter — call it once\n * at render time and iterate over the result.\n */\nexport function resolveTimelineItems(\n  items: TimelineItemData[],\n): Required<TimelineItemData>[] {\n  return items.map((item) => ({\n    ...item,\n    status: item.status ?? 'default',\n    time: item.time ?? '',\n    description: item.description ?? '',\n  }))\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Outer rail / list container.\n *\n * Vertical: a single column; horizontal: a row so items sit side-by-side.\n */\nexport const timelineVariants = cva({\n  base: 'relative',\n  variants: {\n    orientation: {\n      vertical: 'flex flex-col',\n      horizontal: 'flex flex-row items-start overflow-x-auto',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\n/**\n * A single event row / column.\n *\n * In vertical mode items stack with a left gutter for the marker + connector.\n * In horizontal mode each item takes equal width and the connector runs above.\n */\nexport const timelineItemVariants = cva({\n  base: 'relative flex gap-4',\n  variants: {\n    orientation: {\n      vertical: 'flex-row pb-8 last:pb-0',\n      horizontal: 'flex-col items-center flex-1 px-2',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\n/**\n * The marker / dot that represents the event on the rail.\n *\n * Status variants map directly to semantic token colours so theming is\n * handled at the design-token level, not inline.\n */\nexport const timelineMarkerVariants = cva({\n  base: [\n    'relative z-10 flex shrink-0 items-center justify-center',\n    'size-3 rounded-full border-2',\n    'transition-colors',\n  ].join(' '),\n  variants: {\n    status: {\n      done: 'bg-primary border-primary',\n      current: 'bg-background border-primary ring-2 ring-primary ring-offset-2 ring-offset-background',\n      upcoming: 'bg-muted border-muted-foreground/30',\n      default: 'bg-background border-border',\n    },\n  },\n  defaultVariants: {\n    status: 'default',\n  },\n})\n\n/**\n * The connector line drawn between adjacent markers.\n *\n * Vertical: a thin vertical stripe anchored to the left gutter.\n * Horizontal: a thin horizontal stripe anchored above the content row.\n * The last item hides its connector so the rail terminates cleanly.\n */\nexport const timelineConnectorVariants = cva({\n  base: 'absolute bg-border',\n  variants: {\n    orientation: {\n      vertical: 'left-[5px] top-3 w-0.5 h-full',\n      horizontal: 'top-[5px] left-1/2 w-full h-0.5',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\n/** Wrapper that holds the marker + connector in the gutter column/row. */\nexport const timelineGutterClass = 'relative flex flex-col items-center'\n\n/** Time / date label rendered near the marker. */\nexport const timelineTimeClass = 'text-xs text-muted-foreground tabular-nums'\n\n/** Primary event title. */\nexport const timelineTitleClass = 'text-sm font-medium text-foreground leading-snug'\n\n/** Secondary description text. */\nexport const timelineDescriptionClass = 'mt-0.5 text-xs text-muted-foreground leading-relaxed'\n\n/** Content block (title + description) next to or below the marker. */\nexport const timelineContentClass = 'flex flex-col min-w-0'\n", "import * as React from 'react'\nimport {\n  createTimeline,\n  getTimelineItemAria,\n  resolveTimelineItems,\n  timelineVariants,\n  timelineItemVariants,\n  timelineMarkerVariants,\n  timelineConnectorVariants,\n  timelineGutterClass,\n  timelineTimeClass,\n  timelineTitleClass,\n  timelineDescriptionClass,\n  timelineContentClass,\n  type TimelineOrientation,\n  type TimelineItemData,\n  type TimelineItemStatus,\n} from '@refraction-ui/timeline'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { TimelineOrientation, TimelineItemData, TimelineItemStatus }\n\nexport interface TimelineItemProps {\n  /** The normalised item data. */\n  item: Required<TimelineItemData>\n  /** Orientation inherited from the parent Timeline. */\n  orientation: TimelineOrientation\n  /** True when this is the last item (hides the trailing connector). */\n  isLast: boolean\n}\n\n/** A single event entry inside a Timeline. */\nexport const TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  function TimelineItem({ item, orientation, isLast }, ref) {\n    const itemAria = getTimelineItemAria()\n    return (\n      <li\n        ref={ref}\n        {...itemAria}\n        className={timelineItemVariants({ orientation })}\n        data-status={item.status}\n      >\n        {/* Gutter: marker dot + connector line */}\n        <div className={timelineGutterClass}>\n          <div className={timelineMarkerVariants({ status: item.status })} />\n          {!isLast && (\n            <div className={timelineConnectorVariants({ orientation })} />\n          )}\n        </div>\n\n        {/* Content */}\n        <div className={timelineContentClass}>\n          {item.time && (\n            <span className={timelineTimeClass}>{item.time}</span>\n          )}\n          <span className={timelineTitleClass}>{item.title}</span>\n          {item.description && (\n            <p className={timelineDescriptionClass}>{item.description}</p>\n          )}\n        </div>\n      </li>\n    )\n  },\n)\n\nexport interface TimelineProps\n  extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {\n  /** Ordered list of events to render. */\n  items: TimelineItemData[]\n  /** Layout direction. Defaults to `'vertical'`. */\n  orientation?: TimelineOrientation\n  /**\n   * Optional render-prop override for a single item.\n   * Receives the normalised item and its index; return a React node.\n   */\n  renderItem?: (\n    item: Required<TimelineItemData>,\n    index: number,\n    isLast: boolean,\n  ) => React.ReactNode\n}\n\n/**\n * Timeline — a time-ordered list of events with a marker rail.\n *\n * Renders `role=\"list\"`; each item carries `role=\"listitem\"`.\n * Supports vertical (default) and horizontal orientations.\n * Pass `renderItem` to take full control of individual entries.\n */\nexport const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(\n  function Timeline({ items, orientation = 'vertical', renderItem, className, ...props }, ref) {\n    const resolved = React.useMemo(() => resolveTimelineItems(items), [items])\n    const api = createTimeline({ orientation })\n\n    return (\n      <ul\n        ref={ref}\n        className={cn(timelineVariants({ orientation }), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {resolved.map((item, index) => {\n          const isLast = index === resolved.length - 1\n          if (renderItem) {\n            return (\n              <React.Fragment key={item.id}>\n                {renderItem(item, index, isLast)}\n              </React.Fragment>\n            )\n          }\n          return (\n            <TimelineItem\n              key={item.id}\n              item={item}\n              orientation={orientation}\n              isLast={isLast}\n            />\n          )\n        })}\n      </ul>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["TimelineItem", "Timeline"]
+}

package/dist/react-toast.js

@@ -0,0 +1,253 @@
+import {
+  cn,
+  cva,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-toast/dist/index.js
+import * as React from "react";
+
+// ../toast/dist/index.js
+function createToast(props = {}) {
+  const {
+    variant = "default",
+    duration = 3e3,
+    open: controlledOpen,
+    onOpenChange
+  } = props;
+  const now = props.now ?? (() => Date.now());
+  let isOpen = controlledOpen ?? true;
+  let timerId = null;
+  let remaining = duration;
+  let startedAt = 0;
+  function dismiss() {
+    clearTimer();
+    isOpen = false;
+    onOpenChange?.(false);
+  }
+  function clearTimer() {
+    if (timerId !== null) {
+      clearTimeout(timerId);
+      timerId = null;
+    }
+  }
+  function startTimer() {
+    if (duration <= 0) return;
+    clearTimer();
+    remaining = duration;
+    startedAt = now();
+    timerId = setTimeout(dismiss, remaining);
+  }
+  function pauseTimer() {
+    if (timerId === null) return;
+    clearTimer();
+    remaining = remaining - (now() - startedAt);
+    if (remaining < 0) remaining = 0;
+  }
+  function resumeTimer() {
+    if (duration <= 0 || remaining <= 0) return;
+    clearTimer();
+    startedAt = now();
+    timerId = setTimeout(dismiss, remaining);
+  }
+  const ariaProps = {
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": true
+  };
+  return {
+    state: {
+      get open() {
+        return controlledOpen !== void 0 ? controlledOpen : isOpen;
+      },
+      variant
+    },
+    ariaProps,
+    dismiss,
+    startTimer,
+    pauseTimer,
+    resumeTimer
+  };
+}
+function createToastManager(config = {}) {
+  const now = config.now ?? (() => Date.now());
+  let toasts = [];
+  const listeners = /* @__PURE__ */ new Set();
+  const timers = /* @__PURE__ */ new Map();
+  function notify() {
+    const snapshot = [...toasts];
+    for (const fn of listeners) {
+      fn(snapshot);
+    }
+  }
+  function dismiss(id) {
+    const timer = timers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.delete(id);
+    }
+    toasts = toasts.filter((t) => t.id !== id);
+    notify();
+  }
+  function toast(message, opts) {
+    const id = generateId("rfr-toast");
+    const variant = opts?.variant ?? "default";
+    const duration = opts?.duration ?? 3e3;
+    const entry = {
+      id,
+      message,
+      variant,
+      duration,
+      createdAt: now()
+    };
+    toasts = [...toasts, entry];
+    notify();
+    if (duration > 0) {
+      const timer = setTimeout(() => dismiss(id), duration);
+      timers.set(id, timer);
+    }
+    return id;
+  }
+  function subscribe(fn) {
+    listeners.add(fn);
+    return () => {
+      listeners.delete(fn);
+    };
+  }
+  return {
+    toast,
+    dismiss,
+    get toasts() {
+      return toasts;
+    },
+    subscribe
+  };
+}
+var toastVariants = cva({
+  base: "pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border p-4 shadow-lg transition-all",
+  variants: {
+    variant: {
+      default: "border bg-background text-foreground",
+      success: "border-l-4 border-success/50 bg-success/10 text-success",
+      error: "border-l-4 border-destructive/50 bg-destructive/10 text-destructive",
+      warning: "border-l-4 border-warning/50 bg-warning/10 text-warning"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+// ../react-toast/dist/index.js
+var ToastContext = React.createContext(null);
+function useToastContext() {
+  const ctx = React.useContext(ToastContext);
+  if (!ctx) {
+    devWarn(
+      "react-toast/use-toast-outside-provider",
+      "useToast() was called outside a <ToastProvider>. Wrap your app (or the consuming subtree) in <ToastProvider> so the toast context is available."
+    );
+    throw new Error("useToast must be used within a <ToastProvider>");
+  }
+  return ctx;
+}
+function ToastProvider({ children }) {
+  const managerRef = React.useRef(null);
+  if (managerRef.current === null) {
+    managerRef.current = createToastManager();
+  }
+  const ctx = React.useMemo(
+    () => ({ manager: managerRef.current }),
+    []
+  );
+  return React.createElement(ToastContext.Provider, { value: ctx }, children);
+}
+function useToast() {
+  const { manager } = useToastContext();
+  const [toasts, setToasts] = React.useState(manager.toasts);
+  React.useEffect(() => {
+    setToasts(manager.toasts);
+    const unsub = manager.subscribe(setToasts);
+    return unsub;
+  }, [manager]);
+  return {
+    toast: manager.toast,
+    dismiss: manager.dismiss,
+    toasts
+  };
+}
+var Toast = React.forwardRef(
+  function Toast2({ entry, onDismiss, className, children, onMouseEnter, onMouseLeave, ...props }, ref) {
+    const api = React.useMemo(
+      () => createToast({ variant: entry.variant, duration: entry.duration }),
+      [entry.variant, entry.duration]
+    );
+    React.useEffect(() => {
+      api.startTimer();
+      return () => api.pauseTimer();
+    }, [api]);
+    const handleMouseEnter = (e) => {
+      api.pauseTimer();
+      onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+      api.resumeTimer();
+      onMouseLeave?.(e);
+    };
+    return React.createElement(
+      "div",
+      {
+        ref,
+        className: cn(toastVariants({ variant: entry.variant }), className),
+        ...api.ariaProps,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props
+      },
+      React.createElement("div", { className: "flex-1" }, entry.message),
+      children,
+      onDismiss && React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "shrink-0",
+          onClick: () => onDismiss(entry.id),
+          "aria-label": "Dismiss"
+        },
+        "\xD7"
+      )
+    );
+  }
+);
+var Toaster = React.forwardRef(
+  function Toaster2({ className, ...props }, ref) {
+    const { toasts, dismiss } = useToast();
+    return React.createElement(
+      "div",
+      {
+        ref,
+        className: cn(
+          "fixed bottom-4 right-4 z-50 flex flex-col gap-2 w-full max-w-sm pointer-events-none",
+          className
+        ),
+        ...props
+      },
+      toasts.map(
+        (entry) => React.createElement(Toast, {
+          key: entry.id,
+          entry,
+          onDismiss: dismiss
+        })
+      )
+    );
+  }
+);
+export {
+  Toast,
+  ToastProvider,
+  Toaster,
+  toastVariants,
+  useToast
+};
+//# sourceMappingURL=react-toast.js.map

package/dist/react-toast.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../toast/src/toast.ts", "../../toast/src/toast.styles.ts", "../../react-toast/src/toast.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\nimport { generateId } from '@refraction-ui/shared'\n\nexport type ToastVariant = 'default' | 'success' | 'error' | 'warning'\n\n/** Icon name for each toast variant — non-color indicator for colorblind safety */\nconst TOAST_ICONS: Record<ToastVariant, string> = {\n  default: 'info-circle',\n  success: 'check-circle',\n  error: 'x-circle',\n  warning: 'alert-triangle',\n}\n\n/** Get the icon name for a toast variant (colorblind-safe: meaning not conveyed by color alone) */\nexport function getToastIcon(variant: ToastVariant): string {\n  return TOAST_ICONS[variant]\n}\n\nexport interface ToastProps {\n  /** Visual variant */\n  variant?: ToastVariant\n  /** Auto-dismiss duration in ms (default: 3000). Set to 0 to disable. */\n  duration?: number\n  /** Whether the toast is open (controlled) */\n  open?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Elapsed-time clock for timer pause/resume math (ms). Default: ambient `Date.now()` — inject for deterministic tests. */\n  now?: () => number\n}\n\nexport interface ToastState {\n  open: boolean\n  variant: ToastVariant\n}\n\nexport interface ToastAPI {\n  /** Current toast state */\n  state: ToastState\n  /** ARIA attributes for the toast element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Dismiss the toast */\n  dismiss(): void\n  /** Start the auto-dismiss timer */\n  startTimer(): void\n  /** Pause the auto-dismiss timer (e.g. on hover) */\n  pauseTimer(): void\n  /** Resume the auto-dismiss timer */\n  resumeTimer(): void\n}\n\nexport function createToast(props: ToastProps = {}): ToastAPI {\n  const {\n    variant = 'default',\n    duration = 3000,\n    open: controlledOpen,\n    onOpenChange,\n  } = props\n\n  // Injection boundary: ambient time is the default; inject `now` for deterministic timer math.\n  const now = props.now ?? (() => Date.now())\n  let isOpen = controlledOpen ?? true\n  let timerId: ReturnType<typeof setTimeout> | null = null\n  let remaining = duration\n  let startedAt = 0\n\n  function dismiss(): void {\n    clearTimer()\n    isOpen = false\n    onOpenChange?.(false)\n  }\n\n  function clearTimer(): void {\n    if (timerId !== null) {\n      clearTimeout(timerId)\n      timerId = null\n    }\n  }\n\n  function startTimer(): void {\n    if (duration <= 0) return\n    clearTimer()\n    remaining = duration\n    startedAt = now()\n    timerId = setTimeout(dismiss, remaining)\n  }\n\n  function pauseTimer(): void {\n    if (timerId === null) return\n    clearTimer()\n    remaining = remaining - (now() - startedAt)\n    if (remaining < 0) remaining = 0\n  }\n\n  function resumeTimer(): void {\n    if (duration <= 0 || remaining <= 0) return\n    clearTimer()\n    startedAt = now()\n    timerId = setTimeout(dismiss, remaining)\n  }\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'alert',\n    'aria-live': 'assertive',\n    'aria-atomic': true,\n  }\n\n  return {\n    state: {\n      get open() {\n        return controlledOpen !== undefined ? controlledOpen : isOpen\n      },\n      variant,\n    },\n    ariaProps,\n    dismiss,\n    startTimer,\n    pauseTimer,\n    resumeTimer,\n  }\n}\n\n/** Entry in the toast manager */\nexport interface ToastEntry {\n  id: string\n  message: string\n  variant: ToastVariant\n  duration: number\n  createdAt: number\n}\n\nexport interface ToastManagerAPI {\n  /** Add a new toast. Returns the toast id. */\n  toast(message: string, opts?: { variant?: ToastVariant; duration?: number }): string\n  /** Dismiss a toast by id */\n  dismiss(id: string): void\n  /** Current toast list (read-only) */\n  readonly toasts: ReadonlyArray<ToastEntry>\n  /** Subscribe to toast list changes. Returns unsubscribe function. */\n  subscribe(fn: (toasts: ReadonlyArray<ToastEntry>) => void): () => void\n}\n\nexport interface ToastManagerConfig {\n  /** Clock for entry `createdAt` stamps (ms). Default: ambient `Date.now()` — inject for deterministic tests. */\n  now?: () => number\n}\n\nexport function createToastManager(config: ToastManagerConfig = {}): ToastManagerAPI {\n  // Injection boundary: ambient time is the default; inject `now` for deterministic createdAt.\n  const now = config.now ?? (() => Date.now())\n  let toasts: ToastEntry[] = []\n  const listeners = new Set<(toasts: ReadonlyArray<ToastEntry>) => void>()\n  const timers = new Map<string, ReturnType<typeof setTimeout>>()\n\n  function notify(): void {\n    const snapshot = [...toasts]\n    for (const fn of listeners) {\n      fn(snapshot)\n    }\n  }\n\n  function dismiss(id: string): void {\n    const timer = timers.get(id)\n    if (timer) {\n      clearTimeout(timer)\n      timers.delete(id)\n    }\n    toasts = toasts.filter((t) => t.id !== id)\n    notify()\n  }\n\n  function toast(\n    message: string,\n    opts?: { variant?: ToastVariant; duration?: number },\n  ): string {\n    const id = generateId('rfr-toast')\n    const variant = opts?.variant ?? 'default'\n    const duration = opts?.duration ?? 3000\n\n    const entry: ToastEntry = {\n      id,\n      message,\n      variant,\n      duration,\n      createdAt: now(),\n    }\n\n    toasts = [...toasts, entry]\n    notify()\n\n    if (duration > 0) {\n      const timer = setTimeout(() => dismiss(id), duration)\n      timers.set(id, timer)\n    }\n\n    return id\n  }\n\n  function subscribe(fn: (toasts: ReadonlyArray<ToastEntry>) => void): () => void {\n    listeners.add(fn)\n    return () => {\n      listeners.delete(fn)\n    }\n  }\n\n  return {\n    toast,\n    dismiss,\n    get toasts() {\n      return toasts\n    },\n    subscribe,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const toastVariants = cva({\n  base: 'pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border p-4 shadow-lg transition-all',\n  variants: {\n    variant: {\n      default: 'border bg-background text-foreground',\n      success: 'border-l-4 border-success/50 bg-success/10 text-success',\n      error: 'border-l-4 border-destructive/50 bg-destructive/10 text-destructive',\n      warning: 'border-l-4 border-warning/50 bg-warning/10 text-warning',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createToast,\n  createToastManager,\n  toastVariants,\n  type ToastVariant,\n  type ToastEntry,\n  type ToastManagerAPI,\n} from '@refraction-ui/toast'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface ToastContextValue {\n  manager: ToastManagerAPI\n}\n\nconst ToastContext = React.createContext<ToastContextValue | null>(null)\n\nfunction useToastContext(): ToastContextValue {\n  const ctx = React.useContext(ToastContext)\n  if (!ctx) {\n    devWarn(\n      'react-toast/use-toast-outside-provider',\n      'useToast() was called outside a <ToastProvider>. Wrap your app (or the consuming subtree) in <ToastProvider> so the toast context is available.',\n    )\n    throw new Error('useToast must be used within a <ToastProvider>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// ToastProvider\n// ---------------------------------------------------------------------------\n\nexport interface ToastProviderProps {\n  children?: React.ReactNode\n}\n\nexport function ToastProvider({ children }: ToastProviderProps) {\n  const managerRef = React.useRef<ToastManagerAPI | null>(null)\n  if (managerRef.current === null) {\n    managerRef.current = createToastManager()\n  }\n\n  const ctx = React.useMemo<ToastContextValue>(\n    () => ({ manager: managerRef.current! }),\n    [],\n  )\n\n  return React.createElement(ToastContext.Provider, { value: ctx }, children)\n}\n\n// ---------------------------------------------------------------------------\n// useToast hook\n// ---------------------------------------------------------------------------\n\nexport interface UseToastReturn {\n  /** Show a new toast */\n  toast: (message: string, opts?: { variant?: ToastVariant; duration?: number }) => string\n  /** Dismiss a toast by id */\n  dismiss: (id: string) => void\n  /** Current toast entries */\n  toasts: ReadonlyArray<ToastEntry>\n}\n\nexport function useToast(): UseToastReturn {\n  const { manager } = useToastContext()\n  const [toasts, setToasts] = React.useState<ReadonlyArray<ToastEntry>>(manager.toasts)\n\n  React.useEffect(() => {\n    // Sync initial state\n    setToasts(manager.toasts)\n    const unsub = manager.subscribe(setToasts)\n    return unsub\n  }, [manager])\n\n  return {\n    toast: manager.toast,\n    dismiss: manager.dismiss,\n    toasts,\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Toast (individual toast component)\n// ---------------------------------------------------------------------------\n\nexport interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {\n  entry: ToastEntry\n  onDismiss?: (id: string) => void\n}\n\nexport const Toast = React.forwardRef<HTMLDivElement, ToastProps>(\n  function Toast({ entry, onDismiss, className, children, onMouseEnter, onMouseLeave, ...props }, ref) {\n    const api = React.useMemo(\n      () => createToast({ variant: entry.variant, duration: entry.duration }),\n      [entry.variant, entry.duration],\n    )\n\n    // Start auto-dismiss timer on mount\n    React.useEffect(() => {\n      api.startTimer()\n      return () => api.pauseTimer()\n    }, [api])\n\n    const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n      api.pauseTimer()\n      onMouseEnter?.(e)\n    }\n\n    const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n      api.resumeTimer()\n      onMouseLeave?.(e)\n    }\n\n    return React.createElement(\n      'div',\n      {\n        ref,\n        className: cn(toastVariants({ variant: entry.variant }), className),\n        ...api.ariaProps,\n        onMouseEnter: handleMouseEnter,\n        onMouseLeave: handleMouseLeave,\n        ...props,\n      },\n      React.createElement('div', { className: 'flex-1' }, entry.message),\n      children,\n      onDismiss &&\n        React.createElement(\n          'button',\n          {\n            type: 'button',\n            className: 'shrink-0',\n            onClick: () => onDismiss(entry.id),\n            'aria-label': 'Dismiss',\n          },\n          '\\u00d7',\n        ),\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// Toaster (container that renders all active toasts)\n// ---------------------------------------------------------------------------\n\nexport interface ToasterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>(\n  function Toaster({ className, ...props }, ref) {\n    const { toasts, dismiss } = useToast()\n\n    return React.createElement(\n      'div',\n      {\n        ref,\n        className: cn(\n          'fixed bottom-4 right-4 z-50 flex flex-col gap-2 w-full max-w-sm pointer-events-none',\n          className,\n        ),\n        ...props,\n      },\n      toasts.map((entry) =>\n        React.createElement(Toast, {\n          key: entry.id,\n          entry,\n          onDismiss: dismiss,\n        }),\n      ),\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["Toast", "Toaster"]
+}