@epicbagel/saas-kit 1.32.0 → 1.34.0

package/dist/primitives/settings-section.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  SettingsListContext
+} from "../chunk-2DCJ2SFU.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/settings-section.tsx
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsSection({
+  heading,
+  description,
+  action,
+  children,
+  className
+}) {
+  const { single } = useContext(SettingsListContext);
+  const showHeader = !single && (heading || action || description);
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-4", className), children: [
+    showHeader && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      (heading || action) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        heading && /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium tracking-tight min-w-0", children: heading }),
+        action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+export {
+  SettingsSection
+};

package/dist/primitives/sheet.d.cts

@@ -1,18 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
-declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
-declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
     side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
     /**
      * Suppress the default top-right close (×) button. Useful when the
      * consumer renders its own close affordance or relies on overlay-tap /
@@ -39,10 +39,10 @@ declare const SheetFooter: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
-interface SheetTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+interface SheetTitleProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> {
     display?: "block" | "inline-flex";
 }
 declare const SheetTitle: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, SheetOverlay, SheetPortal, SheetTitle, type SheetTitleProps, SheetTrigger };

package/dist/primitives/sheet.d.ts

@@ -1,18 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
-declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
-declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
     side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
     /**
      * Suppress the default top-right close (×) button. Useful when the
      * consumer renders its own close affordance or relies on overlay-tap /
@@ -39,10 +39,10 @@ declare const SheetFooter: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
-interface SheetTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+interface SheetTitleProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> {
     display?: "block" | "inline-flex";
 }
 declare const SheetTitle: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, SheetOverlay, SheetPortal, SheetTitle, type SheetTitleProps, SheetTrigger };

package/dist/primitives/short-video.cjs

@@ -0,0 +1,110 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/short-video.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+function formatDuration(sec) {
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function ShortVideo({
+  src,
+  poster,
+  durationSec,
+  orientation = "portrait",
+  caption,
+  maxWidth = 320,
+  className
+}) {
+  const videoRef = _react.useRef.call(void 0, null);
+  const [playing, setPlaying] = _react.useState.call(void 0, false);
+  const [muted, setMuted] = _react.useState.call(void 0, false);
+  const [started, setStarted] = _react.useState.call(void 0, false);
+  const togglePlay = () => {
+    const el = videoRef.current;
+    if (!el) return;
+    if (el.paused) {
+      void el.play();
+      setStarted(true);
+    } else {
+      el.pause();
+    }
+  };
+  const toggleMute = () => {
+    const el = videoRef.current;
+    if (!el) return;
+    el.muted = !el.muted;
+    setMuted(el.muted);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "figure", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex flex-col gap-2", className), style: { maxWidth }, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "group relative overflow-hidden rounded-2xl border bg-muted",
+          orientation === "portrait" ? "aspect-[9/16]" : "aspect-video"
+        ),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "video",
+            {
+              ref: videoRef,
+              src,
+              poster,
+              preload: "metadata",
+              playsInline: true,
+              className: "h-full w-full object-cover",
+              onPlay: () => setPlaying(true),
+              onPause: () => setPlaying(false),
+              onEnded: () => setPlaying(false),
+              onClick: togglePlay
+            }
+          ),
+          !started && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              onClick: togglePlay,
+              "aria-label": "Play video",
+              className: "absolute inset-0 flex items-center justify-center bg-black/20 transition-colors hover:bg-black/30",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex size-16 items-center justify-center rounded-full bg-background/90 shadow-lg backdrop-blur-sm transition-transform group-hover:scale-105", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Play, { className: "ml-1 size-7 text-foreground" }) })
+            }
+          ),
+          !started && durationSec ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute bottom-3 right-3 rounded-full bg-black/60 px-2 py-0.5 font-mono text-[11px] font-medium text-white", children: formatDuration(durationSec) }) : null,
+          started && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/60 to-transparent p-3 opacity-0 transition-opacity group-hover:opacity-100", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                onClick: togglePlay,
+                "aria-label": playing ? "Pause" : "Play",
+                className: "flex size-9 items-center justify-center rounded-full bg-background/90 text-foreground",
+                children: playing ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Pause, { className: "size-4" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Play, { className: "ml-0.5 size-4" })
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                onClick: toggleMute,
+                "aria-label": muted ? "Unmute" : "Mute",
+                className: "flex size-9 items-center justify-center rounded-full bg-background/90 text-foreground",
+                children: muted ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.VolumeX, { className: "size-4" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Volume2, { className: "size-4" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    caption && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "figcaption", { className: "text-sm text-muted-foreground", children: caption })
+  ] });
+}
+
+
+exports.ShortVideo = ShortVideo;

package/dist/primitives/short-video.d.cts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ShortVideoProps {
+    /** Video source (mp4/webm). */
+    src: string;
+    /** Poster frame shown before play. */
+    poster?: string;
+    /** Duration in seconds — rendered as a small badge. */
+    durationSec?: number;
+    /** 9:16 by default; "landscape" switches to 16:9. */
+    orientation?: "portrait" | "landscape";
+    /** Optional caption under the player. */
+    caption?: ReactNode;
+    /** Constrain width (portrait videos get tall fast). Default 320px. */
+    maxWidth?: number;
+    className?: string;
+}
+/**
+ * ShortVideo — an inline, vertical-first video player for marketing /
+ * portal feeds (the "Shorts-style" clip). Tap-to-play with a poster
+ * frame, a play/pause affordance and a mute toggle. Lazy (preload
+ * metadata only) so a feed of these stays light. Portrait by default;
+ * pass orientation="landscape" for 16:9.
+ *
+ * Caller owns the source + poster; render captions via `caption`.
+ */
+declare function ShortVideo({ src, poster, durationSec, orientation, caption, maxWidth, className, }: ShortVideoProps): react_jsx_runtime.JSX.Element;
+
+export { ShortVideo, type ShortVideoProps };

package/dist/primitives/short-video.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ShortVideoProps {
+    /** Video source (mp4/webm). */
+    src: string;
+    /** Poster frame shown before play. */
+    poster?: string;
+    /** Duration in seconds — rendered as a small badge. */
+    durationSec?: number;
+    /** 9:16 by default; "landscape" switches to 16:9. */
+    orientation?: "portrait" | "landscape";
+    /** Optional caption under the player. */
+    caption?: ReactNode;
+    /** Constrain width (portrait videos get tall fast). Default 320px. */
+    maxWidth?: number;
+    className?: string;
+}
+/**
+ * ShortVideo — an inline, vertical-first video player for marketing /
+ * portal feeds (the "Shorts-style" clip). Tap-to-play with a poster
+ * frame, a play/pause affordance and a mute toggle. Lazy (preload
+ * metadata only) so a feed of these stays light. Portrait by default;
+ * pass orientation="landscape" for 16:9.
+ *
+ * Caller owns the source + poster; render captions via `caption`.
+ */
+declare function ShortVideo({ src, poster, durationSec, orientation, caption, maxWidth, className, }: ShortVideoProps): react_jsx_runtime.JSX.Element;
+
+export { ShortVideo, type ShortVideoProps };

package/dist/primitives/short-video.js

@@ -0,0 +1,110 @@
+"use client";
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/short-video.tsx
+import { useRef, useState } from "react";
+import { Play, Pause, Volume2, VolumeX } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatDuration(sec) {
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function ShortVideo({
+  src,
+  poster,
+  durationSec,
+  orientation = "portrait",
+  caption,
+  maxWidth = 320,
+  className
+}) {
+  const videoRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [muted, setMuted] = useState(false);
+  const [started, setStarted] = useState(false);
+  const togglePlay = () => {
+    const el = videoRef.current;
+    if (!el) return;
+    if (el.paused) {
+      void el.play();
+      setStarted(true);
+    } else {
+      el.pause();
+    }
+  };
+  const toggleMute = () => {
+    const el = videoRef.current;
+    if (!el) return;
+    el.muted = !el.muted;
+    setMuted(el.muted);
+  };
+  return /* @__PURE__ */ jsxs("figure", { className: cn("flex flex-col gap-2", className), style: { maxWidth }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group relative overflow-hidden rounded-2xl border bg-muted",
+          orientation === "portrait" ? "aspect-[9/16]" : "aspect-video"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              ref: videoRef,
+              src,
+              poster,
+              preload: "metadata",
+              playsInline: true,
+              className: "h-full w-full object-cover",
+              onPlay: () => setPlaying(true),
+              onPause: () => setPlaying(false),
+              onEnded: () => setPlaying(false),
+              onClick: togglePlay
+            }
+          ),
+          !started && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: togglePlay,
+              "aria-label": "Play video",
+              className: "absolute inset-0 flex items-center justify-center bg-black/20 transition-colors hover:bg-black/30",
+              children: /* @__PURE__ */ jsx("span", { className: "flex size-16 items-center justify-center rounded-full bg-background/90 shadow-lg backdrop-blur-sm transition-transform group-hover:scale-105", children: /* @__PURE__ */ jsx(Play, { className: "ml-1 size-7 text-foreground" }) })
+            }
+          ),
+          !started && durationSec ? /* @__PURE__ */ jsx("span", { className: "absolute bottom-3 right-3 rounded-full bg-black/60 px-2 py-0.5 font-mono text-[11px] font-medium text-white", children: formatDuration(durationSec) }) : null,
+          started && /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/60 to-transparent p-3 opacity-0 transition-opacity group-hover:opacity-100", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: togglePlay,
+                "aria-label": playing ? "Pause" : "Play",
+                className: "flex size-9 items-center justify-center rounded-full bg-background/90 text-foreground",
+                children: playing ? /* @__PURE__ */ jsx(Pause, { className: "size-4" }) : /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toggleMute,
+                "aria-label": muted ? "Unmute" : "Mute",
+                className: "flex size-9 items-center justify-center rounded-full bg-background/90 text-foreground",
+                children: muted ? /* @__PURE__ */ jsx(VolumeX, { className: "size-4" }) : /* @__PURE__ */ jsx(Volume2, { className: "size-4" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    caption && /* @__PURE__ */ jsx("figcaption", { className: "text-sm text-muted-foreground", children: caption })
+  ] });
+}
+export {
+  ShortVideo
+};

package/dist/primitives/stats-card.cjs

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+
+var _chunkR3DQS6U4cjs = require('../chunk-R3DQS6U4.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/stats-card.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+function StatsCard({
+  title,
+  value,
+  icon,
+  change,
+  changeType
+}) {
+  const iconNode = _react.isValidElement.call(void 0, icon) ? icon : /* @__PURE__ */ (() => {
+    const Icon = icon;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: "h-4 w-4 text-muted-foreground" });
+  })();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR3DQS6U4cjs.Card, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR3DQS6U4cjs.CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR3DQS6U4cjs.CardTitle, { className: "text-sm font-medium", children: title }),
+      iconNode
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR3DQS6U4cjs.CardContent, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-2xl font-bold", children: value }),
+      change && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "p",
+        {
+          className: `text-xs ${changeType === "positive" ? "text-green-500" : "text-red-500"}`,
+          children: [
+            change,
+            " from last month"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+
+exports.StatsCard = StatsCard;

package/dist/primitives/stats-card.d.cts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface StatsCardProps {
+    title: string;
+    value: string;
+    /**
+     * Lucide component reference OR an instantiated element. Pass an
+     * element when calling from a server component (component references
+     * can't cross the server→client boundary).
+     */
+    icon: LucideIcon | ReactNode;
+    change?: string;
+    changeType?: "positive" | "negative";
+}
+declare function StatsCard({ title, value, icon, change, changeType, }: StatsCardProps): react_jsx_runtime.JSX.Element;
+
+export { StatsCard };

package/dist/primitives/stats-card.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface StatsCardProps {
+    title: string;
+    value: string;
+    /**
+     * Lucide component reference OR an instantiated element. Pass an
+     * element when calling from a server component (component references
+     * can't cross the server→client boundary).
+     */
+    icon: LucideIcon | ReactNode;
+    change?: string;
+    changeType?: "positive" | "negative";
+}
+declare function StatsCard({ title, value, icon, change, changeType, }: StatsCardProps): react_jsx_runtime.JSX.Element;
+
+export { StatsCard };

package/dist/primitives/stats-card.js

@@ -0,0 +1,46 @@
+"use client";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "../chunk-35YMAIEL.js";
+import "../chunk-G6SRSWXB.js";
+
+// src/primitives/stats-card.tsx
+import { isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatsCard({
+  title,
+  value,
+  icon,
+  change,
+  changeType
+}) {
+  const iconNode = isValidElement(icon) ? icon : /* @__PURE__ */ (() => {
+    const Icon = icon;
+    return /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" });
+  })();
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: title }),
+      iconNode
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: value }),
+      change && /* @__PURE__ */ jsxs(
+        "p",
+        {
+          className: `text-xs ${changeType === "positive" ? "text-green-500" : "text-red-500"}`,
+          children: [
+            change,
+            " from last month"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  StatsCard
+};

package/dist/primitives/stats-strip.cjs

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+
+var _chunkR3DQS6U4cjs = require('../chunk-R3DQS6U4.cjs');
+
+
+var _chunkEJP2L5QVcjs = require('../chunk-EJP2L5QV.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/stats-strip.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var COLS = {
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6"
+};
+function StatsStrip({ items, columns = 5, className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "grid grid-cols-2 gap-2", _nullishCoalesce(COLS[columns], () => ( COLS[5])), className), children: items.map((item, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR3DQS6U4cjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR3DQS6U4cjs.CardContent, { className: "py-3 px-4", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: item.label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "text-2xl font-semibold",
+          item.tone ? _chunkEJP2L5QVcjs.statusColors[item.tone].icon : "text-foreground"
+        ),
+        children: item.value
+      }
+    )
+  ] }) }, i)) });
+}
+
+
+exports.StatsStrip = StatsStrip;

package/dist/primitives/stats-strip.d.cts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { StatusColorKey } from '../lib/status-colors.cjs';
+
+interface StatsStripItem {
+    label: ReactNode;
+    value: ReactNode;
+    /** Tone for the value text. Maps to the kit's standard token palette. */
+    tone?: StatusColorKey;
+}
+interface StatsStripProps {
+    items: StatsStripItem[];
+    /** Columns at the `sm:` breakpoint. Mobile is always 2 cols. */
+    columns?: 3 | 4 | 5 | 6;
+    className?: string;
+}
+/**
+ * Horizontal strip of metric cards — useful for "X total / Y this week
+ * / Z verified" page headers. Each card is composed of `Card` +
+ * `CardContent`; coloured tones map to `status-colors`.
+ */
+declare function StatsStrip({ items, columns, className }: StatsStripProps): react_jsx_runtime.JSX.Element;
+
+export { StatsStrip, type StatsStripItem, type StatsStripProps };

package/dist/primitives/stats-strip.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { StatusColorKey } from '../lib/status-colors.js';
+
+interface StatsStripItem {
+    label: ReactNode;
+    value: ReactNode;
+    /** Tone for the value text. Maps to the kit's standard token palette. */
+    tone?: StatusColorKey;
+}
+interface StatsStripProps {
+    items: StatsStripItem[];
+    /** Columns at the `sm:` breakpoint. Mobile is always 2 cols. */
+    columns?: 3 | 4 | 5 | 6;
+    className?: string;
+}
+/**
+ * Horizontal strip of metric cards — useful for "X total / Y this week
+ * / Z verified" page headers. Each card is composed of `Card` +
+ * `CardContent`; coloured tones map to `status-colors`.
+ */
+declare function StatsStrip({ items, columns, className }: StatsStripProps): react_jsx_runtime.JSX.Element;
+
+export { StatsStrip, type StatsStripItem, type StatsStripProps };

package/dist/primitives/stats-strip.js

@@ -0,0 +1,38 @@
+"use client";
+import {
+  Card,
+  CardContent
+} from "../chunk-35YMAIEL.js";
+import {
+  statusColors
+} from "../chunk-F7JHSZNT.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/stats-strip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var COLS = {
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6"
+};
+function StatsStrip({ items, columns = 5, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-2", COLS[columns] ?? COLS[5], className), children: items.map((item, i) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "py-3 px-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: item.label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "text-2xl font-semibold",
+          item.tone ? statusColors[item.tone].icon : "text-foreground"
+        ),
+        children: item.value
+      }
+    )
+  ] }) }, i)) });
+}
+export {
+  StatsStrip
+};