@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/dist/primitives/call-card.js

@@ -0,0 +1,195 @@
+"use client";
+"use client";
+import {
+  Eyebrow
+} from "../chunk-LIE6W3QT.js";
+import {
+  Text
+} from "../chunk-EIY5LLSP.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../chunk-NBUWGRQO.js";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "../chunk-3OWGL4Q2.js";
+import {
+  Skeleton
+} from "../chunk-YEW65ASC.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/call-card.tsx
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { ChevronRight, PhoneCall } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CallCard = forwardRef(
+  function CallCard2({
+    title,
+    source,
+    timestamp,
+    duration,
+    participants,
+    summary,
+    summaryClampLines = 4,
+    segments,
+    transcript,
+    headerAside,
+    actions,
+    transcriptLabel = "Show transcript",
+    defaultTranscriptOpen = false,
+    transcriptOpen,
+    onTranscriptOpenChange,
+    onLoadTranscript,
+    loading = false,
+    className
+  }, ref) {
+    const [internalOpen, setInternalOpen] = useState(defaultTranscriptOpen);
+    const [loadedOnce, setLoadedOnce] = useState(defaultTranscriptOpen);
+    const open = transcriptOpen ?? internalOpen;
+    const summaryRef = useRef(null);
+    const [summaryExpanded, setSummaryExpanded] = useState(false);
+    const [summaryOverflows, setSummaryOverflows] = useState(false);
+    useEffect(() => {
+      const el = summaryRef.current;
+      if (el) setSummaryOverflows(el.scrollHeight - el.clientHeight > 4);
+    }, [summary]);
+    function handleOpenChange(next) {
+      if (next && !loadedOnce) {
+        setLoadedOnce(true);
+        onLoadTranscript?.();
+      }
+      if (transcriptOpen === void 0) setInternalOpen(next);
+      onTranscriptOpenChange?.(next);
+    }
+    const meta = [timestamp, source, duration].filter(Boolean);
+    const hasTranscript = segments && segments.length > 0 || transcript != null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "overflow-hidden rounded-xl border border-border bg-card text-card-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4 md:p-5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "grid h-9 w-9 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground",
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsx(PhoneCall, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" }) : /* @__PURE__ */ jsx("h3", { className: "min-w-0 flex-1 truncate text-sm font-semibold leading-tight", children: title ?? "Untitled call" }),
+                headerAside && /* @__PURE__ */ jsx("div", { className: "-mt-1 shrink-0", children: headerAside })
+              ] }),
+              meta.length > 0 && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs text-muted-foreground", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { children: [
+                i > 0 && /* @__PURE__ */ jsx("span", { className: "px-1.5 opacity-50", children: "\xB7" }),
+                m
+              ] }, i)) })
+            ] })
+          ] }),
+          participants && participants.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-5 gap-y-3 border-t border-border px-4 py-3 md:px-5", children: participants.map((p, i) => {
+            const label = p.name || p.email || "Unknown";
+            return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsxs(Avatar, { className: "h-7 w-7 text-[10px]", children: [
+                p.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: p.avatarUrl, alt: label }) : null,
+                /* @__PURE__ */ jsx(AvatarFallback, { children: initials(label) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 leading-tight", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: label }),
+                p.email && p.name && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: p.email })
+              ] })
+            ] }, i);
+          }) }),
+          (summary || loading && !title) && /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-4 py-3 md:px-5", children: [
+            /* @__PURE__ */ jsx(Eyebrow, { className: "mb-1.5", children: "Summary" }),
+            loading ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-4/5" })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: summaryRef,
+                  className: "whitespace-pre-wrap text-sm leading-relaxed text-muted-foreground",
+                  style: summaryExpanded ? void 0 : {
+                    display: "-webkit-box",
+                    WebkitLineClamp: summaryClampLines,
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden"
+                  },
+                  children: summary
+                }
+              ),
+              summaryOverflows && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSummaryExpanded((v) => !v),
+                  className: "mt-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+                  children: summaryExpanded ? "Show less" : "Show more"
+                }
+              )
+            ] })
+          ] }),
+          hasTranscript && /* @__PURE__ */ jsxs(
+            Collapsible,
+            {
+              open,
+              onOpenChange: handleOpenChange,
+              className: "border-t border-border",
+              children: [
+                /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex w-full items-center gap-1.5 px-4 py-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground md:px-5",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        ChevronRight,
+                        {
+                          className: cn(
+                            "h-3.5 w-3.5 transition-transform",
+                            open && "rotate-90"
+                          )
+                        }
+                      ),
+                      open ? "Hide transcript" : transcriptLabel
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "max-h-80 space-y-3 overflow-y-auto px-4 pb-4 md:px-5", children: segments && segments.length > 0 ? segments.map((s, i) => /* @__PURE__ */ jsxs("div", { children: [
+                  s.speaker && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-foreground", children: s.speaker }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-0.5 whitespace-pre-wrap text-sm leading-relaxed text-muted-foreground", children: s.text })
+                ] }, i)) : /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    variant: "muted",
+                    className: "whitespace-pre-wrap text-sm leading-relaxed",
+                    children: transcript
+                  }
+                ) }) })
+              ]
+            }
+          ),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-2 border-t border-border bg-muted/30 px-4 py-3 md:px-5", children: actions })
+        ]
+      }
+    );
+  }
+);
+function initials(value) {
+  return value.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
+}
+export {
+  CallCard
+};

package/dist/primitives/callout.cjs

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

package/dist/primitives/callout.d.cts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type CalloutPointer = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
+type CalloutPadding = "none" | "sm" | "compact" | "md" | "lg";
+interface CalloutProps {
+    /**
+     * Optional pointer (small triangle on the edge) tying the callout to
+     * a related element on the page. Omit for a standalone well.
+     *
+     * - `top` / `bottom` / `left` / `right` — centered on that edge
+     * - `top-left`, `top-right`, etc — aligned near the start/end of the edge
+     */
+    pointer?: CalloutPointer;
+    /** Internal padding. Defaults to `md`. */
+    padding?: CalloutPadding;
+    children: ReactNode;
+    className?: string;
+    tone?: "default" | "warning";
+    marginBottom?: "none" | "md";
+    textSize?: "inherit" | "micro";
+}
+/**
+ * A muted well/card with an optional pointer triangle, used to visually
+ * tie a block of related content to a target element on the page.
+ *
+ * Common uses:
+ * - Suggestion / example pills under an input (pointer="top")
+ * - Inline help text under a form field (pointer="top")
+ * - Quick-action chips after a state change ("nice — what next?")
+ * - Onboarding nudges that point at a specific UI element
+ *
+ * Pointer-less callouts are valid too — drop the `pointer` prop for a
+ * generic muted well that just groups related content.
+ *
+ * Styling: subtle border + `bg-muted/40` so it reads as related-to
+ * rather than primary content. Override via `className`.
+ */
+declare function Callout({ pointer, padding, children, className, tone, marginBottom, textSize, }: CalloutProps): react_jsx_runtime.JSX.Element;
+
+export { Callout, type CalloutPadding, type CalloutPointer, type CalloutProps };

package/dist/primitives/callout.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type CalloutPointer = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
+type CalloutPadding = "none" | "sm" | "compact" | "md" | "lg";
+interface CalloutProps {
+    /**
+     * Optional pointer (small triangle on the edge) tying the callout to
+     * a related element on the page. Omit for a standalone well.
+     *
+     * - `top` / `bottom` / `left` / `right` — centered on that edge
+     * - `top-left`, `top-right`, etc — aligned near the start/end of the edge
+     */
+    pointer?: CalloutPointer;
+    /** Internal padding. Defaults to `md`. */
+    padding?: CalloutPadding;
+    children: ReactNode;
+    className?: string;
+    tone?: "default" | "warning";
+    marginBottom?: "none" | "md";
+    textSize?: "inherit" | "micro";
+}
+/**
+ * A muted well/card with an optional pointer triangle, used to visually
+ * tie a block of related content to a target element on the page.
+ *
+ * Common uses:
+ * - Suggestion / example pills under an input (pointer="top")
+ * - Inline help text under a form field (pointer="top")
+ * - Quick-action chips after a state change ("nice — what next?")
+ * - Onboarding nudges that point at a specific UI element
+ *
+ * Pointer-less callouts are valid too — drop the `pointer` prop for a
+ * generic muted well that just groups related content.
+ *
+ * Styling: subtle border + `bg-muted/40` so it reads as related-to
+ * rather than primary content. Override via `className`.
+ */
+declare function Callout({ pointer, padding, children, className, tone, marginBottom, textSize, }: CalloutProps): react_jsx_runtime.JSX.Element;
+
+export { Callout, type CalloutPadding, type CalloutPointer, type CalloutProps };

package/dist/primitives/callout.js

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

package/dist/primitives/card.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+
+
+
+var _chunkR3DQS6U4cjs = require('../chunk-R3DQS6U4.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+
+
+
+
+
+exports.Card = _chunkR3DQS6U4cjs.Card; exports.CardContent = _chunkR3DQS6U4cjs.CardContent; exports.CardDescription = _chunkR3DQS6U4cjs.CardDescription; exports.CardFooter = _chunkR3DQS6U4cjs.CardFooter; exports.CardHeader = _chunkR3DQS6U4cjs.CardHeader; exports.CardTitle = _chunkR3DQS6U4cjs.CardTitle;

package/dist/primitives/card.d.cts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: "none" | "xs" | "compact" | "row" | "sm" | "md" | "lg" | "responsive";
+    overflow?: "visible" | "hidden";
+    align?: "start" | "center";
+    radius?: "md" | "lg" | "xl";
+    spacing?: "none" | "compact" | "md";
+    width?: "auto" | "full";
+    surface?: "card" | "muted";
+    marginBottom?: "none" | "md" | "lg";
+    printMode?: "default" | "flat";
+    textSize?: "inherit" | "xs";
+    interaction?: "none" | "group";
+    borderStyle?: "solid" | "dashed";
+    divided?: boolean;
+    /** Flatten the card into a full-bleed application surface on mobile. */
+    mobileTreatment?: "card" | "flat";
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    paddingBottom?: "default" | "compact";
+    padding?: "default" | "spacious";
+    direction?: "column" | "row";
+    justify?: "start" | "between";
+    border?: "none" | "bottom";
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    size?: "default" | "section" | "base" | "sm";
+    display?: "block" | "inline-flex";
+}
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    marginTop?: "none" | "xs";
+}
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: "default" | "compact" | "spacious";
+    textSize?: "inherit" | "sm";
+    align?: "start" | "center";
+    spacing?: "none" | "compact" | "md" | "lg";
+    layout?: "block" | "empty-state";
+}
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    justify?: "start" | "center";
+    border?: "none" | "top";
+    padding?: "default" | "compact";
+    printVisibility?: "visible" | "hidden";
+}
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps };

package/dist/primitives/card.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: "none" | "xs" | "compact" | "row" | "sm" | "md" | "lg" | "responsive";
+    overflow?: "visible" | "hidden";
+    align?: "start" | "center";
+    radius?: "md" | "lg" | "xl";
+    spacing?: "none" | "compact" | "md";
+    width?: "auto" | "full";
+    surface?: "card" | "muted";
+    marginBottom?: "none" | "md" | "lg";
+    printMode?: "default" | "flat";
+    textSize?: "inherit" | "xs";
+    interaction?: "none" | "group";
+    borderStyle?: "solid" | "dashed";
+    divided?: boolean;
+    /** Flatten the card into a full-bleed application surface on mobile. */
+    mobileTreatment?: "card" | "flat";
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    paddingBottom?: "default" | "compact";
+    padding?: "default" | "spacious";
+    direction?: "column" | "row";
+    justify?: "start" | "between";
+    border?: "none" | "bottom";
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    size?: "default" | "section" | "base" | "sm";
+    display?: "block" | "inline-flex";
+}
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    marginTop?: "none" | "xs";
+}
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: "default" | "compact" | "spacious";
+    textSize?: "inherit" | "sm";
+    align?: "start" | "center";
+    spacing?: "none" | "compact" | "md" | "lg";
+    layout?: "block" | "empty-state";
+}
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    justify?: "start" | "center";
+    border?: "none" | "top";
+    padding?: "default" | "compact";
+    printVisibility?: "visible" | "hidden";
+}
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps };

package/dist/primitives/card.js

@@ -0,0 +1,18 @@
+"use client";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "../chunk-35YMAIEL.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};

package/dist/primitives/checkbox.cjs

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

package/dist/primitives/checkbox.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    /**
+     * Visual shape. `square` (default) is the standard form checkbox; `circle`
+     * suits to-do / completion toggles where a round tick reads better.
+     */
+    shape?: "square" | "circle";
+};
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /**
+     * Visual shape. `square` (default) is the standard form checkbox; `circle`
+     * suits to-do / completion toggles where a round tick reads better.
+     */
+    shape?: "square" | "circle";
+} & React.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/primitives/checkbox.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    /**
+     * Visual shape. `square` (default) is the standard form checkbox; `circle`
+     * suits to-do / completion toggles where a round tick reads better.
+     */
+    shape?: "square" | "circle";
+};
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /**
+     * Visual shape. `square` (default) is the standard form checkbox; `circle`
+     * suits to-do / completion toggles where a round tick reads better.
+     */
+    shape?: "square" | "circle";
+} & React.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/primitives/checkbox.js

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

package/dist/primitives/chip-tabs.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKGFL3VWYcjs = require('../chunk-KGFL3VWY.cjs');
+require('../chunk-VGTINL5Q.cjs');
+require('../chunk-I6GUOEBO.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.ChipTabs = _chunkKGFL3VWYcjs.ChipTabs;

package/dist/primitives/chip-tabs.d.cts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ChipTabItem {
+    id: string;
+    label: ReactNode;
+    /** Optional count rendered after the label in a neutral count badge. */
+    count?: number;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+}
+interface ChipTabsProps {
+    items: ChipTabItem[];
+    /** The currently-selected chip id. */
+    value: string;
+    onChange: (id: string) => void;
+    /** Visual density. Defaults to `sm`. `md` is a roomier, touch-friendly
+     *  size for primary tab strips (bigger hit area + breathing room). */
+    size?: "xs" | "sm" | "md";
+    /** `outline` is clearer on large editorial and onboarding surfaces. */
+    variant?: "soft" | "outline";
+    /** Optional trailing slot — actions / "Save current" buttons. */
+    trailing?: ReactNode;
+    className?: string;
+    marginBottom?: "none" | "lg";
+    placement?: "inline" | "panel";
+    disabled?: boolean;
+    /** Visually guides attention to one option without selecting it. */
+    guidedValue?: string;
+}
+/**
+ * Pill-style tab strip — toggle row of chips with active/inactive states
+ * and an optional trailing actions slot. Distinct from `Tabs` (which
+ * uses an underlined trigger row for page-level navigation). Use this
+ * for compact filter / view selectors inside popovers, sidebars, etc.
+ */
+declare function ChipTabs({ items, value, onChange, size, variant, trailing, className, marginBottom, placement, disabled, guidedValue, }: ChipTabsProps): react_jsx_runtime.JSX.Element;
+
+export { type ChipTabItem, ChipTabs, type ChipTabsProps };

package/dist/primitives/chip-tabs.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ChipTabItem {
+    id: string;
+    label: ReactNode;
+    /** Optional count rendered after the label in a neutral count badge. */
+    count?: number;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+}
+interface ChipTabsProps {
+    items: ChipTabItem[];
+    /** The currently-selected chip id. */
+    value: string;
+    onChange: (id: string) => void;
+    /** Visual density. Defaults to `sm`. `md` is a roomier, touch-friendly
+     *  size for primary tab strips (bigger hit area + breathing room). */
+    size?: "xs" | "sm" | "md";
+    /** `outline` is clearer on large editorial and onboarding surfaces. */
+    variant?: "soft" | "outline";
+    /** Optional trailing slot — actions / "Save current" buttons. */
+    trailing?: ReactNode;
+    className?: string;
+    marginBottom?: "none" | "lg";
+    placement?: "inline" | "panel";
+    disabled?: boolean;
+    /** Visually guides attention to one option without selecting it. */
+    guidedValue?: string;
+}
+/**
+ * Pill-style tab strip — toggle row of chips with active/inactive states
+ * and an optional trailing actions slot. Distinct from `Tabs` (which
+ * uses an underlined trigger row for page-level navigation). Use this
+ * for compact filter / view selectors inside popovers, sidebars, etc.
+ */
+declare function ChipTabs({ items, value, onChange, size, variant, trailing, className, marginBottom, placement, disabled, guidedValue, }: ChipTabsProps): react_jsx_runtime.JSX.Element;
+
+export { type ChipTabItem, ChipTabs, type ChipTabsProps };

package/dist/primitives/chip-tabs.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  ChipTabs
+} from "../chunk-QD63LB2F.js";
+import "../chunk-H7TETFLB.js";
+import "../chunk-D4ZL2OEQ.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  ChipTabs
+};