@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 epicbagel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,109 @@
-# Temporary Holding Version
+# @epicbagel/saas-kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The public base kit: accessible React primitives, layout components, hooks and
+design tokens for SaaS apps. Built on [Radix UI](https://www.radix-ui.com) and
+Tailwind CSS v4, in the shadcn/ui style, with one neutral palette and light and
+dark modes.
+
+## Install
+
+```bash
+npm install @epicbagel/saas-kit
+```
+
+Peer dependencies: `react` and `react-dom` (18 or 19), `lucide-react`
+(`>=0.400.0 <2`), `react-icons` (5) and `tailwindcss` (4.3 or later).
+
+## Styles
+
+If the app has no Tailwind entry of its own, import the complete stylesheet:
+
+```css
+@import "@epicbagel/saas-kit/styles/globals.css";
+```
+
+If it already imports Tailwind, add the kit's three entry points instead.
+The snippet imports `tw-animate-css` from the app's own stylesheet, so the app
+needs it as a direct dependency (`npm install tw-animate-css`); a strict
+installer such as pnpm won't resolve the kit's copy from there.
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@epicbagel/saas-kit/styles/tokens.css";    /* neutral palette, @theme token map, base rules */
+@import "@epicbagel/saas-kit/styles/utilities.css"; /* palette-free utilities, component classes, keyframes */
+@import "@epicbagel/saas-kit/styles/source.css";    /* registers the kit's dist as a Tailwind class source */
+```
+
+`source.css` points Tailwind at the package's own build, so the app needs no
+`@source` line for `node_modules`.
+
+The neutral palette sits in `@layer base`, so any unlayered `:root` (or
+`.dark`) override in the app wins without specificity tricks. Dark mode is the
+`.dark` class on an ancestor, usually `<html>`.
+
+## Use
+
+Every module is its own subpath export:
+
+```tsx
+import { Button } from "@epicbagel/saas-kit/primitives/button";
+import { Stack } from "@epicbagel/saas-kit/primitives/stack";
+import { useIsMobile } from "@epicbagel/saas-kit/hooks/use-mobile";
+import { cn } from "@epicbagel/saas-kit/lib/utils";
+
+export function Toolbar() {
+  return (
+    <Stack direction="horizontal" gap="sm">
+      <Button>Save</Button>
+      <Button variant="outline">Cancel</Button>
+    </Stack>
+  );
+}
+```
+
+Components ship as client modules (`"use client"`); the `lib/*` utilities are
+plain modules that are safe to call from React Server Components. Both ESM and
+CommonJS builds are included, each with type declarations.
+
+`primitives/chat` and `primitives/message-scroller` need React 19. They are
+built on `@shadcn/react`, which takes `ref` as a plain prop; on React 18 they
+render, but a ref passed to them is dropped with a warning.
+
+## Chat
+
+`primitives/chat` composes the kit's lifts of the shadcn/ui AI Elements parts
+(Message, Bubble, MessageScroller, Trace, Suggestion, InputGroup) into a
+conversation with plain props: no AI SDK, no streaming renderer. It became
+public in 1.1.0, and these were the decisions about its props then:
+
+- **Copy.** Every piece of built-in copy can be replaced: `pendingLabel`
+  ("Thinking…"), `scrollButtonLabel` ("Scroll to latest message"),
+  `uploadingLabel` ("Uploading…"), `voiceHeroLabel` ("Tap to speak"),
+  `voiceHeroSwitchLabel` ("or type instead"), `examplePromptsLabel` ("Try"),
+  `examplePromptsLoadingLabel` ("Loading suggestions…"), `addFilesLabel`,
+  `placeholder` and `activePlaceholder`. The defaults are plain English with
+  no product voice, and the empty state has no title unless you pass
+  `emptyTitle`. The icon buttons' accessible names ("Send", "Add to
+  conversation", "Remove" plus the file name) are fixed for now.
+- **Composer height.** `ChatInput` takes a `size` token (`sm`, `md`, `lg`)
+  for the textarea's starting height; there is no class-name or `rows` prop.
+  The textarea grows with its text (`field-sizing: content`).
+- **Example prompts.** `examplePromptsVariant` is `chips` (the default: chips
+  that wrap onto as many lines as they need), `row` (one line that scrolls
+  sideways) or `cards` (a two-column grid).
+- **Failed sends.** When `onSend` rejects, Chat puts the text back in the
+  composer and calls `onSendError`; without one it reports the rejection
+  through `reportError`, so a failure is never silent.
+- **Removed before 1.1.0,** having no callers: `hideExamples` (pass no
+  `examplePrompts`), `emptyFooterVisibility` (the footer always shows),
+  `voiceAlign` (the voice hero is centred) and `ChatInput`'s `rows` and
+  `minHeightClassName` (use `size`).
+- **Kept** as they were: the `embedded`, `application` and
+  `workspace` layouts, the voice-first empty state, the file drop target,
+  `compactEmptyState`, `threadMaxHeight` and the rest.
+
+## License
+
+MIT. Some components and styles are adapted from shadcn/ui; see
+`THIRD_PARTY_NOTICES.md`.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,53 @@
+# Third-party notices
+
+`@epicbagel/saas-kit` is MIT licensed (see `LICENSE`). Parts of it are adapted
+from the third-party projects below, whose notices are reproduced here as their
+licenses require. Runtime dependencies installed from npm (Radix UI, lucide,
+class-variance-authority and the rest) are not vendored and carry their own
+licenses in their own packages.
+
+## shadcn/ui
+
+Source: https://github.com/shadcn-ui/ui
+
+These modules are adapted from shadcn/ui components and styles. The compiled
+output under `dist/` includes code derived from them. The more recent lifts
+name their registry item, style and sync date in a header comment.
+
+- `primitives/`: alert, alert-dialog, aspect-ratio, attachment, avatar, badge,
+  bubble, button, calendar, card, checkbox, collapsible, dialog, drawer,
+  dropdown-menu, field, input, input-group, item, label, marker, message,
+  message-scroller, popover, progress, radio-group, scroll-area, select,
+  separator, sheet, skeleton, spinner, switch, tabs, textarea, toggle,
+  toggle-group, tooltip, trace
+- `primitives/suggestion`, adapted from the shadcn/ui AI Elements "Suggestion"
+  pattern (https://ui.shadcn.com/docs/ai-elements)
+- `primitives/chat`, composed after the shadcn/ui AI Elements "Chat",
+  "Message", "Prompt Input" and "Suggestion" patterns from the parts above
+- `lib/utils` (`cn`)
+- `src/styles/shadcn.css`, and in `src/styles/components/`: attachment.css,
+  bubble.css, marker.css, message.css and message-scroller.css
+
+```
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/dist/chunk-23UMHZ4S.cjs

@@ -0,0 +1,124 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+
+
+var _chunkL4DH72UFcjs = require('./chunk-L4DH72UF.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/alert-dialog.tsx
+var _reactalertdialog = require('@radix-ui/react-alert-dialog'); var AlertDialogPrimitive = _interopRequireWildcard(_reactalertdialog);
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _jsxruntime = require('react/jsx-runtime');
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+var AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  AlertDialogPrimitive.Overlay,
+  {
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+      "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AlertDialogPortal, { children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertDialogOverlay, {}),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    AlertDialogPrimitive.Content,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "fixed left-[50%] top-[50%] z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-md translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-xl border bg-background shadow-xl outline-none duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+var AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+      "flex flex-col gap-1.5 p-6 text-left",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+      "flex gap-3 border-t border-border bg-muted/30 px-6 py-4",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, "text-lg font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  AlertDialogPrimitive.Description,
+  {
+    ref,
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, "text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  AlertDialogPrimitive.Action,
+  {
+    ref,
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, _chunkL4DH72UFcjs.buttonVariants.call(void 0, ), "flex-1", className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+var AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+      _chunkL4DH72UFcjs.buttonVariants.call(void 0, { variant: "outline" }),
+      "flex-1",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.AlertDialog = AlertDialog; exports.AlertDialogTrigger = AlertDialogTrigger; exports.AlertDialogPortal = AlertDialogPortal; exports.AlertDialogOverlay = AlertDialogOverlay; exports.AlertDialogContent = AlertDialogContent; exports.AlertDialogHeader = AlertDialogHeader; exports.AlertDialogFooter = AlertDialogFooter; exports.AlertDialogTitle = AlertDialogTitle; exports.AlertDialogDescription = AlertDialogDescription; exports.AlertDialogAction = AlertDialogAction; exports.AlertDialogCancel = AlertDialogCancel;

package/dist/chunk-2AU7ZRGX.cjs

@@ -0,0 +1,96 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/message.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function MessageGroup({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "message-group",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "cn-message-group flex min-w-0 flex-col", className),
+      ...props
+    }
+  );
+}
+function Message({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "message",
+      "data-align": align,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "cn-message group/message relative flex w-full min-w-0 data-[align=end]:flex-row-reverse",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageAvatar({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "message-avatar",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "cn-message-avatar flex w-fit shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageContent({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "message-content",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "cn-message-content flex w-full min-w-0 flex-col wrap-break-word",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageHeader({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "message-header",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "cn-message-header flex max-w-full min-w-0 items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageFooter({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "message-footer",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "cn-message-footer flex max-w-full min-w-0 items-center group-data-[align=end]/message:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+
+
+
+
+
+
+
+exports.MessageGroup = MessageGroup; exports.Message = Message; exports.MessageAvatar = MessageAvatar; exports.MessageContent = MessageContent; exports.MessageHeader = MessageHeader; exports.MessageFooter = MessageFooter;

package/dist/chunk-2BHI5ZWJ.cjs

@@ -0,0 +1,117 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/drawer.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _vaul = require('vaul');
+var _jsxruntime = require('react/jsx-runtime');
+var Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _vaul.Drawer.Root,
+  {
+    shouldScaleBackground,
+    ...props
+  }
+);
+Drawer.displayName = "Drawer";
+var DrawerTrigger = _vaul.Drawer.Trigger;
+var DrawerPortal = _vaul.Drawer.Portal;
+var DrawerClose = _vaul.Drawer.Close;
+var DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _vaul.Drawer.Overlay,
+  {
+    ref,
+    "data-slot": "drawer-overlay",
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, "fixed inset-0 z-50 bg-black/80", className),
+    ...props
+  }
+));
+DrawerOverlay.displayName = _vaul.Drawer.Overlay.displayName;
+var DrawerContent = React.forwardRef(({ className, children, height = "auto", overflow = "visible", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DrawerPortal, { children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DrawerOverlay, {}),
+  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _vaul.Drawer.Content,
+    {
+      ref,
+      "data-slot": "drawer-content",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        height === "viewport-lg" && "h-[90dvh]",
+        overflow === "hidden" && "overflow-hidden",
+        overflow === "auto" && "overflow-auto",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+        children
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({
+  className,
+  align = "responsive",
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    "data-slot": "drawer-header",
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, "grid gap-1.5 p-4", align === "responsive" ? "text-center sm:text-left" : "text-left", className),
+    ...props
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    "data-slot": "drawer-footer",
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, "mt-auto flex flex-col gap-2 p-4", className),
+    ...props
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _vaul.Drawer.Title,
+  {
+    ref,
+    "data-slot": "drawer-title",
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DrawerTitle.displayName = _vaul.Drawer.Title.displayName;
+var DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _vaul.Drawer.Description,
+  {
+    ref,
+    "data-slot": "drawer-description",
+    className: _chunkKWLSBTB2cjs.cn.call(void 0, "text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = _vaul.Drawer.Description.displayName;
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Drawer = Drawer; exports.DrawerTrigger = DrawerTrigger; exports.DrawerPortal = DrawerPortal; exports.DrawerClose = DrawerClose; exports.DrawerOverlay = DrawerOverlay; exports.DrawerContent = DrawerContent; exports.DrawerHeader = DrawerHeader; exports.DrawerFooter = DrawerFooter; exports.DrawerTitle = DrawerTitle; exports.DrawerDescription = DrawerDescription;

package/dist/chunk-2BTDBZYN.cjs

@@ -0,0 +1,154 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+var _chunkW5HPHEE7cjs = require('./chunk-W5HPHEE7.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/trace.tsx
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+function Trace({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "trace",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex w-full min-w-0 flex-col gap-2 *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TraceLine({
+  className,
+  status,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "trace-line",
+      "data-status": status,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex w-fit max-w-full min-w-0 items-center gap-2 text-sm text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TraceIcon({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "trace-icon",
+      "aria-hidden": "true",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex size-4 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TraceTitle({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "trace-title",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-w-0 truncate motion-reduce:shimmer-none", className),
+      ...props
+    }
+  );
+}
+function TraceDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "trace-description",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "shrink-0 text-muted-foreground/70 tabular-nums",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TraceCollapsible({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkW5HPHEE7cjs.Collapsible,
+    {
+      "data-slot": "trace-collapsible",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex w-full min-w-0 flex-col", className),
+      ...props
+    }
+  );
+}
+function TraceCollapsibleTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkW5HPHEE7cjs.CollapsibleTrigger,
+    {
+      "data-slot": "trace-collapsible-trigger",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md text-left text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 has-[[data-status=error]]:text-destructive",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TraceIcon, { className: "transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, {}) })
+      ]
+    }
+  );
+}
+function TraceCollapsibleContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkW5HPHEE7cjs.CollapsibleContent,
+    {
+      "data-slot": "trace-collapsible-content",
+      className: "min-w-0 overflow-hidden duration-200 [--radix-accordion-content-height:var(--radix-collapsible-content-height)] data-open:animate-accordion-down data-closed:animate-accordion-up",
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          "data-slot": "trace-collapsible-content-inner",
+          className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+            "mt-2 mb-1 ml-[calc(--spacing(2)-1px)] min-w-0 border-l pr-1 pl-4 leading-relaxed wrap-break-word text-muted-foreground",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+
+
+
+
+
+
+
+
+
+
+exports.Trace = Trace; exports.TraceLine = TraceLine; exports.TraceIcon = TraceIcon; exports.TraceTitle = TraceTitle; exports.TraceDescription = TraceDescription; exports.TraceCollapsible = TraceCollapsible; exports.TraceCollapsibleTrigger = TraceCollapsibleTrigger; exports.TraceCollapsibleContent = TraceCollapsibleContent;