@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/dist/primitives/editable-list.cjs

@@ -0,0 +1,108 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+var _chunkW5I4FN7Gcjs = require('../chunk-W5I4FN7G.cjs');
+
+
+var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
+
+
+var _chunkPQUSJEXLcjs = require('../chunk-PQUSJEXL.cjs');
+
+
+var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
+require('../chunk-EJP2L5QV.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/editable-list.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+function EditableList({
+  label,
+  items,
+  onChange,
+  sentiment = "neutral",
+  itemName = "item",
+  emptyText = "None set",
+  placeholder = `Add ${itemName}\u2026`,
+  className
+}) {
+  const [draft, setDraft] = _react.useState.call(void 0, "");
+  const [editing, setEditing] = _react.useState.call(void 0, null);
+  const readOnly = !onChange;
+  if (readOnly && items.length === 0) return null;
+  const add = () => {
+    const value = draft.trim();
+    if (!value || !onChange) return;
+    onChange([...items, value]);
+    setDraft("");
+  };
+  const commitEdit = () => {
+    const value = _optionalChain([editing, 'optionalAccess', _2 => _2.value, 'access', _3 => _3.trim, 'call', _4 => _4()]);
+    if (editing && value && onChange) {
+      onChange(items.map((item, index) => index === editing.index ? value : item));
+    }
+    setEditing(null);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "border-t border-border pt-4", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { as: "span", variant: "caption", className: "text-xs font-medium uppercase tracking-wider", children: label }),
+    items.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { variant: "caption", className: "mt-3 italic", children: emptyText }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "mt-3 space-y-3", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "group flex items-start gap-3", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkW5I4FN7Gcjs.SentimentDot, { sentiment, className: "mt-[5px] shrink-0" }),
+      !readOnly && _optionalChain([editing, 'optionalAccess', _5 => _5.index]) === index ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkPQUSJEXLcjs.Input,
+          {
+            autoFocus: true,
+            value: editing.value,
+            "aria-label": `Edit ${itemName}`,
+            onChange: (event) => setEditing({ index, value: event.target.value }),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                commitEdit();
+              }
+              if (event.key === "Escape") setEditing(null);
+            },
+            grow: true
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL4DH72UFcjs.Button, { type: "button", variant: "ghost", size: "icon-sm", shrink: true, className: "text-emerald-600", "aria-label": `Save ${itemName}`, onClick: commitEdit, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL4DH72UFcjs.Button, { type: "button", variant: "quiet", size: "icon-sm", shrink: true, marginEnd: "negative-xs", "aria-label": `Cancel editing ${itemName}`, onClick: () => setEditing(null), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { className: "h-4 w-4" }) })
+      ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { as: "span", variant: "small", className: "flex-1 leading-snug", children: item }),
+        !readOnly && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL4DH72UFcjs.Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Edit ${itemName}`, onClick: () => setEditing({ index, value: item }), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Pencil, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL4DH72UFcjs.Button, { type: "button", variant: "ghost", size: "icon", className: "-mr-1 h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Remove ${itemName}`, onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { className: "h-4 w-4" }) })
+        ] })
+      ] })
+    ] }, `${item}-${index}`)) }),
+    !readOnly && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-3 flex items-center gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkPQUSJEXLcjs.Input,
+        {
+          value: draft,
+          "aria-label": `New ${itemName}`,
+          onChange: (event) => setDraft(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              add();
+            }
+          },
+          placeholder,
+          grow: true
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkL4DH72UFcjs.Button, { type: "button", size: "sm", variant: "outline", shrink: true, disabled: !draft.trim(), onClick: add, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Plus, { className: "mr-1 h-4 w-4" }),
+        " Add"
+      ] })
+    ] })
+  ] });
+}
+
+
+exports.EditableList = EditableList;

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

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Sentiment } from './sentiment-dot.cjs';
+import '../lib/status-colors.cjs';
+
+interface EditableListProps {
+    label: ReactNode;
+    items: string[];
+    onChange?: (items: string[]) => void;
+    sentiment?: Sentiment;
+    itemName?: string;
+    emptyText?: string;
+    placeholder?: string;
+    className?: string;
+}
+/**
+ * A compact string list with optional inline add, edit and remove controls.
+ * Omit `onChange` for a read-only list. Domain labels and meaning stay with
+ * the consumer.
+ */
+declare function EditableList({ label, items, onChange, sentiment, itemName, emptyText, placeholder, className, }: EditableListProps): react_jsx_runtime.JSX.Element | null;
+
+export { EditableList, type EditableListProps };

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

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Sentiment } from './sentiment-dot.js';
+import '../lib/status-colors.js';
+
+interface EditableListProps {
+    label: ReactNode;
+    items: string[];
+    onChange?: (items: string[]) => void;
+    sentiment?: Sentiment;
+    itemName?: string;
+    emptyText?: string;
+    placeholder?: string;
+    className?: string;
+}
+/**
+ * A compact string list with optional inline add, edit and remove controls.
+ * Omit `onChange` for a read-only list. Domain labels and meaning stay with
+ * the consumer.
+ */
+declare function EditableList({ label, items, onChange, sentiment, itemName, emptyText, placeholder, className, }: EditableListProps): react_jsx_runtime.JSX.Element | null;
+
+export { EditableList, type EditableListProps };

package/dist/primitives/editable-list.js

@@ -0,0 +1,108 @@
+"use client";
+import {
+  SentimentDot
+} from "../chunk-YWAQRAXP.js";
+import {
+  Text
+} from "../chunk-EIY5LLSP.js";
+import {
+  Input
+} from "../chunk-QMA3WVB7.js";
+import {
+  Button
+} from "../chunk-HQRWRRZJ.js";
+import "../chunk-F7JHSZNT.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/editable-list.tsx
+import { useState } from "react";
+import { Check, Pencil, Plus, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function EditableList({
+  label,
+  items,
+  onChange,
+  sentiment = "neutral",
+  itemName = "item",
+  emptyText = "None set",
+  placeholder = `Add ${itemName}\u2026`,
+  className
+}) {
+  const [draft, setDraft] = useState("");
+  const [editing, setEditing] = useState(null);
+  const readOnly = !onChange;
+  if (readOnly && items.length === 0) return null;
+  const add = () => {
+    const value = draft.trim();
+    if (!value || !onChange) return;
+    onChange([...items, value]);
+    setDraft("");
+  };
+  const commitEdit = () => {
+    const value = editing?.value.trim();
+    if (editing && value && onChange) {
+      onChange(items.map((item, index) => index === editing.index ? value : item));
+    }
+    setEditing(null);
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cn("border-t border-border pt-4", className), children: [
+    /* @__PURE__ */ jsx(Text, { as: "span", variant: "caption", className: "text-xs font-medium uppercase tracking-wider", children: label }),
+    items.length === 0 ? /* @__PURE__ */ jsx(Text, { variant: "caption", className: "mt-3 italic", children: emptyText }) : /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-3", children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "group flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(SentimentDot, { sentiment, className: "mt-[5px] shrink-0" }),
+      !readOnly && editing?.index === index ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            autoFocus: true,
+            value: editing.value,
+            "aria-label": `Edit ${itemName}`,
+            onChange: (event) => setEditing({ index, value: event.target.value }),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                commitEdit();
+              }
+              if (event.key === "Escape") setEditing(null);
+            },
+            grow: true
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", shrink: true, className: "text-emerald-600", "aria-label": `Save ${itemName}`, onClick: commitEdit, children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "quiet", size: "icon-sm", shrink: true, marginEnd: "negative-xs", "aria-label": `Cancel editing ${itemName}`, onClick: () => setEditing(null), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { as: "span", variant: "small", className: "flex-1 leading-snug", children: item }),
+        !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Edit ${itemName}`, onClick: () => setEditing({ index, value: item }), children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "-mr-1 h-8 w-8 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100", "aria-label": `Remove ${itemName}`, onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+        ] })
+      ] })
+    ] }, `${item}-${index}`)) }),
+    !readOnly && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: draft,
+          "aria-label": `New ${itemName}`,
+          onChange: (event) => setDraft(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              add();
+            }
+          },
+          placeholder,
+          grow: true
+        }
+      ),
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "outline", shrink: true, disabled: !draft.trim(), onClick: add, children: [
+        /* @__PURE__ */ jsx(Plus, { className: "mr-1 h-4 w-4" }),
+        " Add"
+      ] })
+    ] })
+  ] });
+}
+export {
+  EditableList
+};

package/dist/primitives/empty-state.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkG54TQV2Rcjs = require('../chunk-G54TQV2R.cjs');
+require('../chunk-L4DH72UF.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.EmptyState = _chunkG54TQV2Rcjs.EmptyState;

package/dist/primitives/empty-state.d.cts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface EmptyStateProps {
+    /** Visual variant for different scenarios */
+    variant?: "select" | "search" | "empty" | "error" | "success";
+    /**
+     * Icon to display. Accepts either a Lucide component reference
+     * (`Inbox`) or an already-instantiated React element (`<Inbox />`).
+     *
+     * **Pass an element when calling from a server component** — Component
+     * references can't cross the server→client boundary, but elements can.
+     */
+    icon?: LucideIcon | ReactNode;
+    /** Canonical motion for loading or in-progress blank slates. */
+    iconMotion?: "none" | "spin" | "pulse";
+    /** Main heading text */
+    title?: string;
+    /** Supporting description text */
+    description?: string;
+    /** Optional action button */
+    action?: {
+        label: string;
+        onClick: () => void;
+        variant?: "default" | "outline" | "secondary";
+    };
+    /** Entity type for auto-generated title (e.g., "note", "file") */
+    entityType?: string;
+    /** Enable gentle animations */
+    animated?: boolean;
+    /**
+     * Placement density. `inline` is for an empty subsection inside an otherwise
+     * populated surface; the other sizes are centred panel/page blank slates.
+     */
+    size?: "inline" | "sm" | "md" | "lg";
+    /** Optional rich starter content, rendered below the canonical heading. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Show decorative background gradient */
+    showGradient?: boolean;
+    /**
+     * Visual containment for the blank slate. `subtle` is the default so an
+     * empty area reads as an intentional product surface instead of floating
+     * copy; use `plain` only when an existing parent already owns the surface.
+     */
+    surface?: "plain" | "subtle";
+    minHeight?: "none" | "viewport";
+    paddingY?: "none" | "lg" | "xl";
+}
+declare function EmptyState({ variant, icon: Icon, iconMotion, title, description, action, entityType, animated, size, children, className, showGradient, surface, minHeight, paddingY, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+export { EmptyState, type EmptyStateProps };

package/dist/primitives/empty-state.d.ts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface EmptyStateProps {
+    /** Visual variant for different scenarios */
+    variant?: "select" | "search" | "empty" | "error" | "success";
+    /**
+     * Icon to display. Accepts either a Lucide component reference
+     * (`Inbox`) or an already-instantiated React element (`<Inbox />`).
+     *
+     * **Pass an element when calling from a server component** — Component
+     * references can't cross the server→client boundary, but elements can.
+     */
+    icon?: LucideIcon | ReactNode;
+    /** Canonical motion for loading or in-progress blank slates. */
+    iconMotion?: "none" | "spin" | "pulse";
+    /** Main heading text */
+    title?: string;
+    /** Supporting description text */
+    description?: string;
+    /** Optional action button */
+    action?: {
+        label: string;
+        onClick: () => void;
+        variant?: "default" | "outline" | "secondary";
+    };
+    /** Entity type for auto-generated title (e.g., "note", "file") */
+    entityType?: string;
+    /** Enable gentle animations */
+    animated?: boolean;
+    /**
+     * Placement density. `inline` is for an empty subsection inside an otherwise
+     * populated surface; the other sizes are centred panel/page blank slates.
+     */
+    size?: "inline" | "sm" | "md" | "lg";
+    /** Optional rich starter content, rendered below the canonical heading. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Show decorative background gradient */
+    showGradient?: boolean;
+    /**
+     * Visual containment for the blank slate. `subtle` is the default so an
+     * empty area reads as an intentional product surface instead of floating
+     * copy; use `plain` only when an existing parent already owns the surface.
+     */
+    surface?: "plain" | "subtle";
+    minHeight?: "none" | "viewport";
+    paddingY?: "none" | "lg" | "xl";
+}
+declare function EmptyState({ variant, icon: Icon, iconMotion, title, description, action, entityType, animated, size, children, className, showGradient, surface, minHeight, paddingY, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+export { EmptyState, type EmptyStateProps };

package/dist/primitives/empty-state.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  EmptyState
+} from "../chunk-4NN7EA3W.js";
+import "../chunk-HQRWRRZJ.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  EmptyState
+};

package/dist/primitives/eyebrow.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunk6T2EULKNcjs = require('../chunk-6T2EULKN.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.Eyebrow = _chunk6T2EULKNcjs.Eyebrow;

package/dist/primitives/eyebrow.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+/**
+ * Eyebrow — small uppercase label that sits above a heading
+ * or section ("GETTING STARTED", "QUICK FILTERS").
+ *
+ * Mono font, generous tracking, muted color. One canonical
+ * treatment so every eyebrow matches.
+ */
+interface EyebrowProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Override the rendered tag. Defaults to <span>. */
+    as?: ElementType;
+    /** Prefix the label with a small accent dot (the brand kicker treatment). */
+    dot?: boolean;
+    display?: "inline" | "block";
+    marginBottom?: "none" | "sm" | "md";
+}
+declare const Eyebrow: React.ForwardRefExoticComponent<EyebrowProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Eyebrow };

package/dist/primitives/eyebrow.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+/**
+ * Eyebrow — small uppercase label that sits above a heading
+ * or section ("GETTING STARTED", "QUICK FILTERS").
+ *
+ * Mono font, generous tracking, muted color. One canonical
+ * treatment so every eyebrow matches.
+ */
+interface EyebrowProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Override the rendered tag. Defaults to <span>. */
+    as?: ElementType;
+    /** Prefix the label with a small accent dot (the brand kicker treatment). */
+    dot?: boolean;
+    display?: "inline" | "block";
+    marginBottom?: "none" | "sm" | "md";
+}
+declare const Eyebrow: React.ForwardRefExoticComponent<EyebrowProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Eyebrow };

package/dist/primitives/eyebrow.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  Eyebrow
+} from "../chunk-LIE6W3QT.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  Eyebrow
+};

package/dist/primitives/feature-empty-state.cjs

@@ -0,0 +1,133 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunk6T2EULKNcjs = require('../chunk-6T2EULKN.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/feature-empty-state.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function FeatureEmptyState({
+  eyebrow,
+  icon,
+  title,
+  description,
+  actions,
+  note,
+  preview,
+  previewLabel,
+  steps,
+  className
+}) {
+  const hasIntroMeta = icon || eyebrow;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "section",
+    {
+      "data-slot": "feature-empty-state",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "overflow-hidden rounded-xl border border-border bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+              "grid",
+              preview && "lg:grid-cols-[minmax(0,0.9fr)_minmax(24rem,1.1fr)]"
+            ),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "div",
+                {
+                  "data-slot": "feature-empty-state-intro",
+                  className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                    "flex flex-col justify-center px-6 py-9 sm:px-9 sm:py-12",
+                    !preview && "mx-auto max-w-3xl text-center sm:px-12"
+                  ),
+                  children: [
+                    hasIntroMeta && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                      "div",
+                      {
+                        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                          "mb-5 flex items-center gap-3",
+                          !preview && "justify-center"
+                        ),
+                        children: [
+                          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary [&_svg]:h-5 [&_svg]:w-5", children: icon }),
+                          eyebrow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6T2EULKNcjs.Eyebrow, { children: eyebrow })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-3xl font-medium leading-tight tracking-tight text-foreground sm:text-4xl", children: title }),
+                    description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "p",
+                      {
+                        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                          "mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg",
+                          !preview && "mx-auto max-w-2xl"
+                        ),
+                        children: description
+                      }
+                    ),
+                    actions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "div",
+                      {
+                        "data-slot": "feature-empty-state-actions",
+                        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                          "mt-7 flex flex-wrap items-center gap-3",
+                          !preview && "justify-center"
+                        ),
+                        children: actions
+                      }
+                    ),
+                    note && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-4 text-xs leading-relaxed text-muted-foreground", children: note })
+                  ]
+                }
+              ),
+              preview && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "div",
+                {
+                  "data-slot": "feature-empty-state-preview",
+                  className: "flex min-w-0 flex-col justify-center border-t border-border bg-muted/30 p-5 sm:p-7 lg:border-l lg:border-t-0",
+                  children: [
+                    previewLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6T2EULKNcjs.Eyebrow, { className: "mb-3 block", children: previewLabel }),
+                    preview
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        steps && steps.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "ol",
+          {
+            "data-slot": "feature-empty-state-steps",
+            className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+              "grid border-t border-border bg-background/40",
+              steps.length === 2 ? "md:grid-cols-2" : "md:grid-cols-3"
+            ),
+            children: steps.map((step, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "li",
+              {
+                className: "flex gap-3 border-t border-border px-6 py-5 first:border-t-0 md:border-l md:border-t-0 md:first:border-l-0",
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted font-mono text-xs text-muted-foreground [&_svg]:h-4 [&_svg]:w-4", children: _nullishCoalesce(step.icon, () => ( String(index + 1).padStart(2, "0"))) }),
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "min-w-0", children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "block text-sm font-medium text-foreground", children: step.title }),
+                    step.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "mt-1 block text-xs leading-relaxed text-muted-foreground", children: step.description })
+                  ] })
+                ]
+              },
+              index
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+exports.FeatureEmptyState = FeatureEmptyState;

package/dist/primitives/feature-empty-state.d.cts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FeatureEmptyStateStep {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Optional rendered icon. When omitted, the step number is shown. */
+    icon?: ReactNode;
+}
+interface FeatureEmptyStateProps {
+    /** Quiet product or workflow label above the main promise. */
+    eyebrow?: ReactNode;
+    /** Optional rendered icon beside the eyebrow. */
+    icon?: ReactNode;
+    /** The user-facing outcome, not a description of the missing data. */
+    title: ReactNode;
+    /** A concise explanation of why the feature is useful. */
+    description?: ReactNode;
+    /** Primary and secondary kit buttons. */
+    actions?: ReactNode;
+    /** Small reassurance or constraint beneath the actions. */
+    note?: ReactNode;
+    /** Product mock, example record, browser preview, or other visual proof. */
+    preview?: ReactNode;
+    /** Label above the preview, such as “What you’ll get”. */
+    previewLabel?: ReactNode;
+    /** Optional three-step explanation of the first-run workflow. */
+    steps?: FeatureEmptyStateStep[];
+    className?: string;
+}
+/**
+ * A first-run, feature-level empty state for major product areas.
+ *
+ * This is intentionally separate from `EmptyState`: use `EmptyState` for
+ * local absence (no notes, no search results, no history) and this component
+ * when an entire feature needs to explain its value before the user begins.
+ * The slots stay product-agnostic so consumers can compose truthful previews
+ * from BrowserPreview, ResourceCard, FileDropzone, and other primitives.
+ */
+declare function FeatureEmptyState({ eyebrow, icon, title, description, actions, note, preview, previewLabel, steps, className, }: FeatureEmptyStateProps): react_jsx_runtime.JSX.Element;
+
+export { FeatureEmptyState, type FeatureEmptyStateProps, type FeatureEmptyStateStep };