@epicbagel/saas-kit 1.11.1 → 1.13.0

package/dist/primitives/notes.js

@@ -0,0 +1,259 @@
+"use client";
+"use client";
+import {
+  SectionHeader
+} from "../chunk-SRIGG5I5.js";
+import {
+  PanelSection
+} from "../chunk-KI7SWNIN.js";
+import {
+  Card
+} from "../chunk-35YMAIEL.js";
+import {
+  Textarea
+} from "../chunk-6FC65AZQ.js";
+import {
+  Stack
+} from "../chunk-WNWBKEWV.js";
+import {
+  Text
+} from "../chunk-EIY5LLSP.js";
+import {
+  Icon
+} from "../chunk-KN4RPX35.js";
+import "../chunk-H7TETFLB.js";
+import {
+  Badge
+} from "../chunk-D4ZL2OEQ.js";
+import {
+  EmptyState
+} from "../chunk-ET4THLFX.js";
+import {
+  Skeleton
+} from "../chunk-YEW65ASC.js";
+import {
+  Button
+} from "../chunk-W326GKML.js";
+import "../chunk-G6SRSWXB.js";
+
+// src/primitives/notes.tsx
+import { Loader2, MessageSquare, Mic, Sparkles, StickyNote, Trash2 } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function present(value) {
+  return value != null && value !== false && value !== "";
+}
+function NoteList({
+  count,
+  loading = false,
+  title = "Notes",
+  empty = { title: "No notes yet" },
+  composer,
+  children,
+  border = "bottom",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(PanelSection, { "data-slot": "note-list", border, ...props, children: [
+    /* @__PURE__ */ jsx(SectionHeader, { label: title, count: loading ? void 0 : count }),
+    loading ? /* @__PURE__ */ jsx(Stack, { direction: "vertical", gap: "sm", marginTop: "md", children: /* @__PURE__ */ jsx(Skeleton, { preset: "row", radius: "xl" }) }) : count > 0 ? /* @__PURE__ */ jsx(Stack, { direction: "vertical", gap: "sm", marginTop: "md", children }) : /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: "empty",
+        size: "inline",
+        icon: StickyNote,
+        title: empty.title,
+        description: empty.description ?? ""
+      }
+    ),
+    composer
+  ] });
+}
+var NOTE_CARD_LABELS = {
+  voice: "\xB7 voice",
+  delete: "Delete note"
+};
+var NOTE_ICON = { voice: Mic, agent: Sparkles, note: MessageSquare };
+function NoteCard({
+  author,
+  kind = "note",
+  pinned,
+  scope,
+  date,
+  text,
+  onDelete,
+  revealDelete = "hover",
+  labels,
+  ...props
+}) {
+  const voiceLabel = labels?.voice !== void 0 ? labels.voice : NOTE_CARD_LABELS.voice;
+  const deleteLabel = labels?.delete ?? NOTE_CARD_LABELS.delete;
+  return /* @__PURE__ */ jsxs(Card, { interaction: "group", surface: pinned ? "card" : "muted", padding: "row", ...props, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", gap: "xs", align: "center", justify: "between", marginBottom: "md", minWidth: "zero", wrap: true, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", gap: "sm", align: "center", textSize: "xs", tone: "muted", minWidth: "zero", className: "max-w-full", wrap: true, children: [
+        /* @__PURE__ */ jsxs(Text, { variant: "inherit", as: "span", display: "inline-flex", weight: "medium", tone: "soft", minWidth: "zero", className: "max-w-full", children: [
+          /* @__PURE__ */ jsx(Icon, { icon: NOTE_ICON[kind], size: "xs" }),
+          /* @__PURE__ */ jsx(Text, { variant: "inherit", as: "span", minWidth: "zero", className: "[overflow-wrap:anywhere]", children: author })
+        ] }),
+        pinned && /* @__PURE__ */ jsx(Badge, { as: "span", variant: "info", size: "micro", weight: "semibold", title: pinned.title, className: "max-w-full whitespace-normal [overflow-wrap:anywhere]", children: pinned.label }),
+        kind === "voice" && present(voiceLabel) && /* @__PURE__ */ jsx(Text, { variant: "inherit", as: "span", tone: "subtle", children: voiceLabel }),
+        scope && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            as: "span",
+            variant: scope.highlighted ? "info" : "default",
+            size: "micro",
+            weight: "semibold",
+            title: scope.title,
+            className: "max-w-full whitespace-normal [overflow-wrap:anywhere]",
+            children: scope.label
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", gap: "xs", align: "center", minWidth: "zero", className: "max-w-full", children: [
+        present(date) ? /* @__PURE__ */ jsx(Text, { variant: "inherit", as: "span", size: "xs", tone: "muted", minWidth: "zero", className: "[overflow-wrap:anywhere]", children: date }) : null,
+        onDelete && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon-sm",
+            reveal: revealDelete === "always" ? "always" : "parent-hover-responsive",
+            variant: "ghost-destructive",
+            onClick: () => onDelete(),
+            title: deleteLabel,
+            children: /* @__PURE__ */ jsx(Icon, { icon: Trash2, size: "sm" })
+          }
+        )
+      ] })
+    ] }),
+    present(text) && /* @__PURE__ */ jsx(Text, { size: "sm", whitespace: "pre-wrap", className: "break-words [overflow-wrap:anywhere]", children: text })
+  ] });
+}
+function Notes({ notes, ...props }) {
+  return /* @__PURE__ */ jsx(NoteList, { "data-slot": "notes", count: notes.length, ...props, children: notes.map(({ id, ...note }) => /* @__PURE__ */ jsx(NoteCard, { ...note }, id)) });
+}
+var COMPOSER_LABELS = {
+  voice: "Tap to speak",
+  type: "or type instead",
+  input: "Note",
+  placeholder: "Type your note\u2026",
+  cancel: "Cancel",
+  submit: "Add note",
+  error: "Could not save your note. Try again."
+};
+function NoteComposer({
+  onVoice,
+  onSubmit,
+  suggestions = [],
+  labels,
+  value,
+  onValueChange,
+  editing,
+  onEditingChange,
+  onCancel,
+  disabled = false,
+  error,
+  maxLength,
+  ...props
+}) {
+  const copy = { ...COMPOSER_LABELS, ...labels };
+  const [draft, setDraft] = useState("");
+  const [localEditing, setLocalEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const pending = useRef(false);
+  const mounted = useRef(true);
+  const errorId = useId();
+  const text = value ?? draft;
+  const latestText = useRef(text);
+  latestText.current = text;
+  const busy = disabled || saving;
+  const message = error ?? (failed ? copy.error : null);
+  const typing = (editing ?? localEditing) || Boolean(text) || Boolean(message) || !onVoice;
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  function changeText(next) {
+    if (value === void 0) setDraft(next);
+    onValueChange?.(next);
+    latestText.current = next;
+  }
+  function changeEditing(next) {
+    if (editing === void 0) setLocalEditing(next);
+    onEditingChange?.(next);
+  }
+  function cancel() {
+    if (disabled || pending.current) return;
+    changeText("");
+    changeEditing(false);
+    setFailed(false);
+    onCancel?.();
+  }
+  async function submit(input) {
+    const trimmed = input.trim();
+    if (disabled || pending.current || !trimmed || maxLength != null && trimmed.length > maxLength) return;
+    pending.current = true;
+    setSaving(true);
+    setFailed(false);
+    const previous = latestText.current;
+    try {
+      await onSubmit(trimmed);
+      if (!mounted.current) return;
+      if (value === void 0 && latestText.current === previous) {
+        changeText("");
+        changeEditing(false);
+      }
+    } catch {
+      if (!mounted.current) return;
+      if (latestText.current === previous) changeText(input);
+      changeEditing(true);
+      setFailed(true);
+    } finally {
+      pending.current = false;
+      if (mounted.current) setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Stack, { "data-slot": "note-composer", direction: "vertical", gap: "sm", marginTop: "md", "aria-busy": saving, ...props, children: [
+    message ? /* @__PURE__ */ jsx(Text, { id: errorId, role: "alert", size: "sm", tone: "destructive", children: message }) : null,
+    typing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          "aria-label": copy.input,
+          "aria-describedby": message ? errorId : void 0,
+          resize: "vertical",
+          placeholder: copy.placeholder,
+          value: text,
+          onChange: (event) => changeText(event.target.value),
+          maxLength,
+          disabled: busy,
+          autoFocus: Boolean(onVoice)
+        }
+      ),
+      /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", gap: "sm", align: "center", wrap: true, children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: cancel, disabled: busy, children: copy.cancel }),
+        /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: () => void submit(text), disabled: busy || !text.trim() || maxLength != null && text.trim().length > maxLength, children: [
+          saving ? /* @__PURE__ */ jsx(Icon, { icon: Loader2, size: "sm", spin: true }) : null,
+          copy.submit
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "vertical", gap: "sm", align: "center", paddingY: "md", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "voice", "aria-label": copy.voice, disabled: busy, onClick: () => {
+          if (!pending.current && !disabled) onVoice?.();
+        }, children: /* @__PURE__ */ jsx(Icon, { icon: Mic, size: 28, tone: "muted" }) }),
+        /* @__PURE__ */ jsx(Text, { variant: "inherit", as: "span", size: "sm", weight: "medium", children: copy.voice }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "quiet", size: "bare", disabled: busy, onClick: () => changeEditing(true), children: copy.type })
+      ] }),
+      suggestions.length > 0 ? /* @__PURE__ */ jsx(Stack, { direction: "horizontal", gap: "xs", justify: "center", wrap: true, children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline-muted", size: "suggestion", disabled: busy, onClick: () => void submit(suggestion), children: suggestion }, suggestion)) }) : null
+    ] })
+  ] });
+}
+export {
+  NoteCard,
+  NoteComposer,
+  NoteList,
+  Notes
+};

package/dist/primitives/panel-section.cjs

@@ -1,52 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+var _chunkVKYRB37Ocjs = require('../chunk-VKYRB37O.cjs');
+require('../chunk-KWLSBTB2.cjs');
 
-// src/primitives/panel-section.tsx
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var borders = {
-  none: "",
-  top: "border-t",
-  bottom: "border-b"
-};
-var paddings = {
-  none: "",
-  compact: "px-[22px] py-[18px]",
-  default: "px-[26px] py-[26px]"
-};
-var PanelSection = _react.forwardRef.call(void 0, 
-  function PanelSection2({ as, border = "none", padding = "default", paddingX = "none", paddingTop = "none", paddingBottom = "none", paddingY = "none", surface = "default", layout = "block", gap = "none", shrink = true, className, ...props }, ref) {
-    const Component = _nullishCoalesce(as, () => ( "section"));
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      Component,
-      {
-        ref,
-        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-          borders[border],
-          paddings[padding],
-          paddingX === "md" && "px-[22px]",
-          paddingX === "lg" && "px-[26px]",
-          paddingTop === "sm" && "pt-2",
-          paddingTop === "md" && "pt-3",
-          paddingTop === "lg" && "pt-5",
-          paddingBottom === "xs" && "pb-1",
-          paddingBottom === "sm" && "pb-2",
-          paddingBottom === "md" && "pb-3",
-          paddingBottom === "lg" && "pb-4",
-          paddingY === "xl" && "py-12",
-          surface === "muted" && "bg-muted/40",
-          layout === "row" && "flex",
-          gap === "sm" && "gap-2",
-          !shrink && "shrink-0",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
 
-
-exports.PanelSection = PanelSection;
+exports.PanelSection = _chunkVKYRB37Ocjs.PanelSection;

package/dist/primitives/panel-section.js

@@ -1,52 +1,8 @@
 "use client";
 import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/panel-section.tsx
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var borders = {
-  none: "",
-  top: "border-t",
-  bottom: "border-b"
-};
-var paddings = {
-  none: "",
-  compact: "px-[22px] py-[18px]",
-  default: "px-[26px] py-[26px]"
-};
-var PanelSection = forwardRef(
-  function PanelSection2({ as, border = "none", padding = "default", paddingX = "none", paddingTop = "none", paddingBottom = "none", paddingY = "none", surface = "default", layout = "block", gap = "none", shrink = true, className, ...props }, ref) {
-    const Component = as ?? "section";
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className: cn(
-          borders[border],
-          paddings[padding],
-          paddingX === "md" && "px-[22px]",
-          paddingX === "lg" && "px-[26px]",
-          paddingTop === "sm" && "pt-2",
-          paddingTop === "md" && "pt-3",
-          paddingTop === "lg" && "pt-5",
-          paddingBottom === "xs" && "pb-1",
-          paddingBottom === "sm" && "pb-2",
-          paddingBottom === "md" && "pb-3",
-          paddingBottom === "lg" && "pb-4",
-          paddingY === "xl" && "py-12",
-          surface === "muted" && "bg-muted/40",
-          layout === "row" && "flex",
-          gap === "sm" && "gap-2",
-          !shrink && "shrink-0",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
+  PanelSection
+} from "../chunk-KI7SWNIN.js";
+import "../chunk-G6SRSWXB.js";
 export {
   PanelSection
 };

package/dist/primitives/section-header.cjs

@@ -1,51 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkVGTINL5Qcjs = require('../chunk-VGTINL5Q.cjs');
+var _chunkSJB4DPGQcjs = require('../chunk-SJB4DPGQ.cjs');
+require('../chunk-VGTINL5Q.cjs');
 require('../chunk-I6GUOEBO.cjs');
+require('../chunk-KWLSBTB2.cjs');
 
 
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
-
-// src/primitives/section-header.tsx
-var _react = require('react');
-var _classvarianceauthority = require('class-variance-authority');
-var _jsxruntime = require('react/jsx-runtime');
-var sectionHeaderVariants = _classvarianceauthority.cva.call(void 0, "flex items-center gap-1", {
-  variants: {
-    variant: {
-      muted: "text-xs font-semibold text-muted-foreground uppercase tracking-wide",
-      plain: "text-sm font-medium text-foreground"
-    },
-    spacing: {
-      tight: "mb-2",
-      loose: "mb-3",
-      none: ""
-    }
-  },
-  defaultVariants: {
-    variant: "muted",
-    spacing: "tight"
-  }
-});
-var SectionHeader = _react.forwardRef.call(void 0, 
-  function SectionHeader2({ icon, label, count, action, variant, spacing, className, ...rest }, ref) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "h3",
-      {
-        ref,
-        className: _chunkKWLSBTB2cjs.cn.call(void 0, sectionHeaderVariants({ variant, spacing }), className),
-        ...rest,
-        children: [
-          icon,
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: label }),
-          typeof count === "number" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVGTINL5Qcjs.CountBadge, { value: count, variant: "secondary" }),
-          action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-auto", children: action })
-        ]
-      }
-    );
-  }
-);
-
-
-exports.SectionHeader = SectionHeader;
+exports.SectionHeader = _chunkSJB4DPGQcjs.SectionHeader;

package/dist/primitives/section-header.js

@@ -1,51 +1,10 @@
 "use client";
 import {
-  CountBadge
-} from "../chunk-H7TETFLB.js";
+  SectionHeader
+} from "../chunk-SRIGG5I5.js";
+import "../chunk-H7TETFLB.js";
 import "../chunk-D4ZL2OEQ.js";
-import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/section-header.tsx
-import { forwardRef } from "react";
-import { cva } from "class-variance-authority";
-import { jsx, jsxs } from "react/jsx-runtime";
-var sectionHeaderVariants = cva("flex items-center gap-1", {
-  variants: {
-    variant: {
-      muted: "text-xs font-semibold text-muted-foreground uppercase tracking-wide",
-      plain: "text-sm font-medium text-foreground"
-    },
-    spacing: {
-      tight: "mb-2",
-      loose: "mb-3",
-      none: ""
-    }
-  },
-  defaultVariants: {
-    variant: "muted",
-    spacing: "tight"
-  }
-});
-var SectionHeader = forwardRef(
-  function SectionHeader2({ icon, label, count, action, variant, spacing, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs(
-      "h3",
-      {
-        ref,
-        className: cn(sectionHeaderVariants({ variant, spacing }), className),
-        ...rest,
-        children: [
-          icon,
-          /* @__PURE__ */ jsx("span", { children: label }),
-          typeof count === "number" && /* @__PURE__ */ jsx(CountBadge, { value: count, variant: "secondary" }),
-          action && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: action })
-        ]
-      }
-    );
-  }
-);
+import "../chunk-G6SRSWXB.js";
 export {
   SectionHeader
 };

package/dist/primitives/voice-dictation-button.cjs

@@ -2,12 +2,12 @@
 "use client";
 
 
-var _chunkD47AMKT4cjs = require('../chunk-D47AMKT4.cjs');
+var _chunkQWUMIAYDcjs = require('../chunk-QWUMIAYD.cjs');
 require('../chunk-NKWHDI4C.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 require('../chunk-2BSFYU22.cjs');
-require('../chunk-ZZ7ICQR2.cjs');
+require('../chunk-7Q4EFCUI.cjs');
 
 
-exports.VoiceDictationButton = _chunkD47AMKT4cjs.VoiceDictationButton;
+exports.VoiceDictationButton = _chunkQWUMIAYDcjs.VoiceDictationButton;

package/dist/primitives/voice-dictation-button.js

@@ -2,12 +2,12 @@
 "use client";
 import {
   VoiceDictationButton
-} from "../chunk-EDEN7TAL.js";
+} from "../chunk-JKVVTFAP.js";
 import "../chunk-5OF6D3GH.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 import "../chunk-GJ7S3L6R.js";
-import "../chunk-HLAHOVEI.js";
+import "../chunk-RPSRCB5O.js";
 export {
   VoiceDictationButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.11.1",
+  "version": "1.13.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [
@@ -770,6 +770,16 @@
         "default": "./dist/primitives/native-select.cjs"
       }
     },
+    "./primitives/notes": {
+      "import": {
+        "types": "./dist/primitives/notes.d.ts",
+        "default": "./dist/primitives/notes.js"
+      },
+      "require": {
+        "types": "./dist/primitives/notes.d.cts",
+        "default": "./dist/primitives/notes.cjs"
+      }
+    },
     "./primitives/page-header-actions": {
       "import": {
         "types": "./dist/primitives/page-header-actions.d.ts",