@epicbagel/saas-kit 1.26.0 → 1.28.0

package/README.md

@@ -567,6 +567,32 @@ turn. The thread draws the avatar and name above the first of each run of
 turns by the same person on the same side, and again after a time marker, so
 a conversation with several people in it says who said what.
 
+### Next steps in the empty state (1.27.0)
+
+`Chat` takes `emptyActions`, an array of `ChatEmptyAction`: what a returning
+user can pick up, shown under the empty-state composer and before any
+`examplePrompts`.
+
+```tsx
+<Chat
+  messages={[]}
+  onSend={send}
+  emptyActions={[
+    { id: "review", icon: Users, label: "Review 3 new people", detail: "Head of Sales · Northwind", onSelect: openReview },
+    { id: "answer", icon: MessageCircleQuestion, label: "London", detail: "Where is the role based? · VP Finance", onSelect: answer },
+  ]}
+/>
+```
+
+- **A row** is a button: the icon, the `label` and the muted `detail`, on one
+  line where there is room.
+- **A pick** calls `onSelect` and sends nothing. Return a promise to show the
+  row's spinner and disable every row until it settles; a rejection
+  re-enables them and goes to `onSendError` (else `reportError`).
+- **The heading** is `emptyActionsLabel`, default "Pick up where you left
+  off". `""` hides it and keeps the default as the list's accessible name.
+- It hides while `pending` and once the conversation has started.
+
 ## Notes
 
 `primitives/notes` provides a reusable `Notes` area and `NoteComposer` for any

package/dist/chunk-DHXKCMKY.cjs

@@ -0,0 +1,198 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkNQK5ZWC7cjs = require('./chunk-NQK5ZWC7.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/item.tsx
+var _classvarianceauthority = require('class-variance-authority');
+var _radixui = require('radix-ui');
+var _jsxruntime = require('react/jsx-runtime');
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkNQK5ZWC7cjs.Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "my-2", className),
+      ...props
+    }
+  );
+}
+var itemVariants = _classvarianceauthority.cva.call(void 0, 
+  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50"
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? _radixui.Slot.Root : "div";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = _classvarianceauthority.cva.call(void 0, 
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-content",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-title",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "p",
+    {
+      "data-slot": "item-description",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-header",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+exports.ItemGroup = ItemGroup; exports.ItemSeparator = ItemSeparator; exports.Item = Item; exports.ItemMedia = ItemMedia; exports.ItemContent = ItemContent; exports.ItemTitle = ItemTitle; exports.ItemDescription = ItemDescription; exports.ItemActions = ItemActions; exports.ItemHeader = ItemHeader; exports.ItemFooter = ItemFooter;

package/dist/chunk-MP64UGRF.js

@@ -0,0 +1,72 @@
+"use client";
+import {
+  CountBadge
+} from "./chunk-H7TETFLB.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/chip-tabs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChipTabs({
+  items,
+  value,
+  onChange,
+  size = "sm",
+  variant = "soft",
+  trailing,
+  className,
+  marginBottom = "none",
+  placement = "inline",
+  disabled = false,
+  guidedValue,
+  label,
+  labelledBy
+}) {
+  const padClass = size === "xs" ? "px-1.5 py-0.5" : size === "md" ? "px-3.5 py-2" : "px-2 py-1";
+  const textClass = size === "xs" ? "text-[11px]" : size === "md" ? "text-sm" : "text-xs";
+  const gapClass = size === "md" ? "gap-2" : "gap-1";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", gapClass, marginBottom === "lg" && "mb-6", placement === "panel" && "border-b px-3 py-2", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex min-w-0 flex-wrap", gapClass),
+        ...label || labelledBy ? { role: "group", "aria-label": labelledBy ? void 0 : label, "aria-labelledby": labelledBy } : {},
+        children: items.map((item) => {
+          const active = item.id === value;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": active,
+              disabled,
+              onClick: () => onChange(item.id),
+              className: cn(
+                "rounded-md transition-colors inline-flex items-center gap-1 disabled:pointer-events-none disabled:opacity-60",
+                textClass,
+                padClass,
+                variant === "outline" && "border",
+                item.id === guidedValue && "ring-2 ring-destructive/60 ring-offset-2 ring-offset-background animate-pulse-once motion-reduce:animate-none",
+                active && variant === "soft" && "bg-accent text-accent-foreground font-medium",
+                !active && variant === "soft" && "text-muted-foreground hover:bg-accent/50",
+                active && variant === "outline" && "border-primary bg-primary/10 text-foreground font-medium",
+                !active && variant === "outline" && "border-muted-foreground/50 bg-background text-muted-foreground hover:border-foreground/60 hover:text-foreground"
+              ),
+              children: [
+                item.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "contents", children: item.icon }),
+                item.label,
+                item.count != null && item.count > 0 && /* @__PURE__ */ jsx(CountBadge, { value: item.count, variant: "secondary" })
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    ),
+    trailing && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1", children: trailing })
+  ] });
+}
+
+export {
+  ChipTabs
+};

package/dist/chunk-PPYHNJMV.cjs

@@ -0,0 +1,72 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkVGTINL5Qcjs = require('./chunk-VGTINL5Q.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/chip-tabs.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function ChipTabs({
+  items,
+  value,
+  onChange,
+  size = "sm",
+  variant = "soft",
+  trailing,
+  className,
+  marginBottom = "none",
+  placement = "inline",
+  disabled = false,
+  guidedValue,
+  label,
+  labelledBy
+}) {
+  const padClass = size === "xs" ? "px-1.5 py-0.5" : size === "md" ? "px-3.5 py-2" : "px-2 py-1";
+  const textClass = size === "xs" ? "text-[11px]" : size === "md" ? "text-sm" : "text-xs";
+  const gapClass = size === "md" ? "gap-2" : "gap-1";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex items-center", gapClass, marginBottom === "lg" && "mb-6", placement === "panel" && "border-b px-3 py-2", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex min-w-0 flex-wrap", gapClass),
+        ...label || labelledBy ? { role: "group", "aria-label": labelledBy ? void 0 : label, "aria-labelledby": labelledBy } : {},
+        children: items.map((item) => {
+          const active = item.id === value;
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "button",
+            {
+              type: "button",
+              "aria-pressed": active,
+              disabled,
+              onClick: () => onChange(item.id),
+              className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                "rounded-md transition-colors inline-flex items-center gap-1 disabled:pointer-events-none disabled:opacity-60",
+                textClass,
+                padClass,
+                variant === "outline" && "border",
+                item.id === guidedValue && "ring-2 ring-destructive/60 ring-offset-2 ring-offset-background animate-pulse-once motion-reduce:animate-none",
+                active && variant === "soft" && "bg-accent text-accent-foreground font-medium",
+                !active && variant === "soft" && "text-muted-foreground hover:bg-accent/50",
+                active && variant === "outline" && "border-primary bg-primary/10 text-foreground font-medium",
+                !active && variant === "outline" && "border-muted-foreground/50 bg-background text-muted-foreground hover:border-foreground/60 hover:text-foreground"
+              ),
+              children: [
+                item.icon != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": "true", className: "contents", children: item.icon }),
+                item.label,
+                item.count != null && item.count > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVGTINL5Qcjs.CountBadge, { value: item.count, variant: "secondary" })
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    ),
+    trailing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ml-auto flex items-center gap-1", children: trailing })
+  ] });
+}
+
+
+
+exports.ChipTabs = ChipTabs;

package/dist/chunk-SG4ZE2EN.js

@@ -0,0 +1,198 @@
+"use client";
+import {
+  Separator
+} from "./chunk-HYTILYE5.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/item.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn("my-2", className),
+      ...props
+    }
+  );
+}
+var itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50"
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export {
+  ItemGroup,
+  ItemSeparator,
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemTitle,
+  ItemDescription,
+  ItemActions,
+  ItemHeader,
+  ItemFooter
+};

package/dist/{chunk-NXFZULS3.js → chunk-T5AFBLP2.js}

@@ -24,19 +24,21 @@ function PersonAvatar({
   size,
   className,
   fallbackClassName,
-  fallbackSize = "default"
+  fallbackSize = "default",
+  decorative = false
 }) {
   return /* @__PURE__ */ jsxs(
     Avatar,
     {
       className: cn("shrink-0 overflow-hidden rounded-full bg-muted", className),
       style: size != null ? { width: size, height: size } : void 0,
+      ...decorative ? { "aria-hidden": true } : {},
       children: [
         photoUrl ? /* @__PURE__ */ jsx(
           AvatarImage,
           {
             src: photoUrl,
-            alt: name,
+            alt: decorative ? "" : name,
             className: "h-full w-full object-cover"
           }
         ) : null,

package/dist/{chunk-U7XNNLVP.cjs → chunk-WP7CKIPE.cjs}

@@ -24,19 +24,21 @@ function PersonAvatar({
   size,
   className,
   fallbackClassName,
-  fallbackSize = "default"
+  fallbackSize = "default",
+  decorative = false
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _chunkWABCLRBRcjs.Avatar,
     {
       className: _chunkKWLSBTB2cjs.cn.call(void 0, "shrink-0 overflow-hidden rounded-full bg-muted", className),
       style: size != null ? { width: size, height: size } : void 0,
+      ...decorative ? { "aria-hidden": true } : {},
       children: [
         photoUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _chunkWABCLRBRcjs.AvatarImage,
           {
             src: photoUrl,
-            alt: name,
+            alt: decorative ? "" : name,
             className: "h-full w-full object-cover"
           }
         ) : null,

package/dist/primitives/activity-feed.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
 
 
-var _chunkKGFL3VWYcjs = require('../chunk-KGFL3VWY.cjs');
+var _chunkPPYHNJMVcjs = require('../chunk-PPYHNJMV.cjs');
 
 
 var _chunkPQUSJEXLcjs = require('../chunk-PQUSJEXL.cjs');
@@ -40,7 +40,7 @@ function ActivityFeedToolbar({
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex flex-col gap-2 rounded-lg border bg-card p-2 lg:flex-row lg:items-center", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkKGFL3VWYcjs.ChipTabs,
+      _chunkPPYHNJMVcjs.ChipTabs,
       {
         items: categories,
         value: category,

package/dist/primitives/activity-feed.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   ChipTabs
-} from "../chunk-QD63LB2F.js";
+} from "../chunk-MP64UGRF.js";
 import {
   Input
 } from "../chunk-QMA3WVB7.js";