@epicbagel/saas-kit 1.32.0 → 1.33.0

package/dist/primitives/save-bar.js

@@ -0,0 +1,91 @@
+"use client";
+"use client";
+import {
+  Button
+} from "../chunk-W326GKML.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/save-bar.tsx
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SaveBar({
+  isDirty,
+  saving = false,
+  onSave,
+  onDiscard,
+  saveLabel = "Save changes",
+  savingLabel = "Saving\u2026",
+  discardLabel = "Discard",
+  status,
+  containerClassName,
+  className,
+  width = "wide"
+}) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+  const bar = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": "Save changes",
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-sm",
+        // Lift above iOS home indicator / Safari URL bar
+        "pb-[env(safe-area-inset-bottom)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "mx-auto px-4 md:px-6 py-3 flex items-center justify-between gap-3",
+            containerClassName ?? (width === "narrow" ? "max-w-3xl" : "max-w-5xl")
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm truncate transition-colors",
+                  isDirty ? "text-foreground" : "text-muted-foreground"
+                ),
+                children: status ?? (isDirty ? "Unsaved changes" : "All changes saved")
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+              onDiscard && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onDiscard,
+                  disabled: saving || !isDirty,
+                  children: discardLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  onClick: onSave,
+                  disabled: saving || !isDirty,
+                  children: saving ? savingLabel : saveLabel
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+  return createPortal(bar, document.body);
+}
+export {
+  SaveBar
+};

package/dist/primitives/settings-list.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use client";
+
+
+
+var _chunkCXAFTEEPcjs = require('../chunk-CXAFTEEP.cjs');
+
+
+
+exports.SettingsList = _chunkCXAFTEEPcjs.SettingsList; exports.SettingsListContext = _chunkCXAFTEEPcjs.SettingsListContext;

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

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+declare const SettingsListContext: React.Context<{
+    /**
+     * True when the parent `<SettingsList>` contains exactly one section.
+     * Sections check this to suppress their own heading — the page's
+     * `<PageHeader>` already serves as the heading for a single-section
+     * page, and rendering a second one is "nested headers".
+     */
+    single: boolean;
+}>;
+interface SettingsListProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Wraps a vertical list of `<SettingsSection>`s.
+ *
+ * - One section: renders the section's content alone (heading suppressed
+ *   via context — the `<PageHeader>` already names the page).
+ * - Two or more: renders each section with `py-8` breathing room and a
+ *   `divide-y` horizontal line between them.
+ *
+ * Use this for EVERY settings/form page, even when there's only one
+ * section — the component decides whether to show structure.
+ */
+declare function SettingsList({ children, className }: SettingsListProps): react_jsx_runtime.JSX.Element | null;
+
+export { SettingsList, SettingsListContext, type SettingsListProps };

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

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+declare const SettingsListContext: React.Context<{
+    /**
+     * True when the parent `<SettingsList>` contains exactly one section.
+     * Sections check this to suppress their own heading — the page's
+     * `<PageHeader>` already serves as the heading for a single-section
+     * page, and rendering a second one is "nested headers".
+     */
+    single: boolean;
+}>;
+interface SettingsListProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Wraps a vertical list of `<SettingsSection>`s.
+ *
+ * - One section: renders the section's content alone (heading suppressed
+ *   via context — the `<PageHeader>` already names the page).
+ * - Two or more: renders each section with `py-8` breathing room and a
+ *   `divide-y` horizontal line between them.
+ *
+ * Use this for EVERY settings/form page, even when there's only one
+ * section — the component decides whether to show structure.
+ */
+declare function SettingsList({ children, className }: SettingsListProps): react_jsx_runtime.JSX.Element | null;
+
+export { SettingsList, SettingsListContext, type SettingsListProps };

package/dist/primitives/settings-list.js

@@ -0,0 +1,10 @@
+"use client";
+"use client";
+import {
+  SettingsList,
+  SettingsListContext
+} from "../chunk-2DCJ2SFU.js";
+export {
+  SettingsList,
+  SettingsListContext
+};

package/dist/primitives/settings-section.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkCXAFTEEPcjs = require('../chunk-CXAFTEEP.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/settings-section.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+function SettingsSection({
+  heading,
+  description,
+  action,
+  children,
+  className
+}) {
+  const { single } = _react.useContext.call(void 0, _chunkCXAFTEEPcjs.SettingsListContext);
+  const showHeader = !single && (heading || action || description);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "space-y-4", className), children: [
+    showHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-2", children: [
+      (heading || action) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-4", children: [
+        heading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-lg font-medium tracking-tight min-w-0", children: heading }),
+        action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "shrink-0", children: action })
+      ] }),
+      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children })
+  ] });
+}
+
+
+exports.SettingsSection = SettingsSection;

package/dist/primitives/settings-section.d.cts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface SettingsSectionProps {
+    /**
+     * Section heading. Sentence-case, scannable, h2-level. Rendered to the
+     * LEFT of the action slot. Suppressed automatically when this section
+     * is the only child of a `<SettingsList>` — the page's `<PageHeader>`
+     * already serves that role in that case.
+     */
+    heading?: ReactNode;
+    /**
+     * One-line context shown under the heading. Use sparingly — most
+     * sections explain themselves through their input labels.
+     */
+    description?: ReactNode;
+    /**
+     * Right-aligned action slot, vertically aligned with the heading.
+     * Typically a `<CopyButton>`, link, or small icon button.
+     */
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * The atom for every settings/form page. ALWAYS this shape:
+ *
+ * ┌─────────────────────────────────────┐
+ * │ heading              [action right] │
+ * │ description (optional)              │
+ * └─────────────────────────────────────┘
+ *  content below
+ *
+ * Wrap one or more of these in a `<SettingsList>` so dividers, padding,
+ * and single-section heading suppression all flow from one place.
+ *
+ * Pages that have only one concern should still wrap their single
+ * section in `<SettingsList>` — the list quietly hides the heading and
+ * the PageHeader handles it instead. Keeps the consumer code uniform
+ * regardless of how many sections the page ends up with.
+ */
+declare function SettingsSection({ heading, description, action, children, className, }: SettingsSectionProps): react_jsx_runtime.JSX.Element;
+
+export { SettingsSection, type SettingsSectionProps };

package/dist/primitives/settings-section.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface SettingsSectionProps {
+    /**
+     * Section heading. Sentence-case, scannable, h2-level. Rendered to the
+     * LEFT of the action slot. Suppressed automatically when this section
+     * is the only child of a `<SettingsList>` — the page's `<PageHeader>`
+     * already serves that role in that case.
+     */
+    heading?: ReactNode;
+    /**
+     * One-line context shown under the heading. Use sparingly — most
+     * sections explain themselves through their input labels.
+     */
+    description?: ReactNode;
+    /**
+     * Right-aligned action slot, vertically aligned with the heading.
+     * Typically a `<CopyButton>`, link, or small icon button.
+     */
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * The atom for every settings/form page. ALWAYS this shape:
+ *
+ * ┌─────────────────────────────────────┐
+ * │ heading              [action right] │
+ * │ description (optional)              │
+ * └─────────────────────────────────────┘
+ *  content below
+ *
+ * Wrap one or more of these in a `<SettingsList>` so dividers, padding,
+ * and single-section heading suppression all flow from one place.
+ *
+ * Pages that have only one concern should still wrap their single
+ * section in `<SettingsList>` — the list quietly hides the heading and
+ * the PageHeader handles it instead. Keeps the consumer code uniform
+ * regardless of how many sections the page ends up with.
+ */
+declare function SettingsSection({ heading, description, action, children, className, }: SettingsSectionProps): react_jsx_runtime.JSX.Element;
+
+export { SettingsSection, type SettingsSectionProps };

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 };