@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/dist/primitives/avatar.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+interface AvatarProps extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    shape?: "circle" | "square";
+    border?: boolean;
+    surface?: "default" | "muted";
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarImageProps extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+    fit?: "cover" | "contain";
+}
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+    shape?: "circle" | "square";
+    textSize?: "default" | "micro";
+}
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };

package/dist/primitives/avatar.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "../chunk-3OWGL4Q2.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+};

package/dist/primitives/badge.cjs

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

package/dist/primitives/badge.d.cts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ElementType } from 'react';
+
+declare const badgeVariants: (props?: ({
+    variant?: "error" | "success" | "default" | "secondary" | "destructive" | "outline" | "warning" | "info" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    weight?: "normal" | "semibold" | "bold";
+    gap?: "none" | "xs";
+    size?: "default" | "compact" | "micro" | "micro-compact" | "tiny" | "counter" | "tile" | "rule";
+    padding?: "default" | "roomy";
+    shrink?: boolean;
+    interactive?: boolean;
+    marginStart?: "none" | "md";
+    transform?: "none" | "uppercase";
+    shape?: "pill" | "rounded";
+    marginTop?: "none" | "tight";
+    as?: ElementType;
+    font?: "sans" | "mono";
+    titleCase?: "preserve" | "capitalize";
+}
+type BadgeVariant = NonNullable<BadgeProps["variant"]>;
+declare function Badge({ className, variant, weight, gap, size, padding, shrink, interactive, marginStart, transform, shape, marginTop, font, titleCase, as, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps, type BadgeVariant, badgeVariants };

package/dist/primitives/badge.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ElementType } from 'react';
+
+declare const badgeVariants: (props?: ({
+    variant?: "error" | "success" | "default" | "secondary" | "destructive" | "outline" | "warning" | "info" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    weight?: "normal" | "semibold" | "bold";
+    gap?: "none" | "xs";
+    size?: "default" | "compact" | "micro" | "micro-compact" | "tiny" | "counter" | "tile" | "rule";
+    padding?: "default" | "roomy";
+    shrink?: boolean;
+    interactive?: boolean;
+    marginStart?: "none" | "md";
+    transform?: "none" | "uppercase";
+    shape?: "pill" | "rounded";
+    marginTop?: "none" | "tight";
+    as?: ElementType;
+    font?: "sans" | "mono";
+    titleCase?: "preserve" | "capitalize";
+}
+type BadgeVariant = NonNullable<BadgeProps["variant"]>;
+declare function Badge({ className, variant, weight, gap, size, padding, shrink, interactive, marginStart, transform, shape, marginTop, font, titleCase, as, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps, type BadgeVariant, badgeVariants };

package/dist/primitives/badge.js

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

package/dist/primitives/board-view-internals.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use client";
+
+
+
+var _chunkYYFVG5A6cjs = require('../chunk-YYFVG5A6.cjs');
+require('../chunk-XLIAY56V.cjs');
+require('../chunk-V5SPFLKW.cjs');
+require('../chunk-VGTINL5Q.cjs');
+require('../chunk-I6GUOEBO.cjs');
+require('../chunk-VBPPFC7X.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+
+exports.BoardColumnComponent = _chunkYYFVG5A6cjs.BoardColumnComponent; exports.MobileBoardView = _chunkYYFVG5A6cjs.MobileBoardView;

package/dist/primitives/board-view-internals.d.cts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BoardColumn {
+    id: string;
+    label: string;
+}
+declare function BoardColumnComponent<T>({ column, items, loading, getItemId, renderCard, renderColumnHeader, renderEmpty, dragItemId, onDragStart, onDragEnd, onMove, columnMinHeight, }: {
+    column: BoardColumn;
+    items: T[];
+    loading: boolean;
+    getItemId: (_item: T) => string | number;
+    renderCard: (_item: T, _columnId: string) => React.ReactNode;
+    renderColumnHeader?: (_column: BoardColumn, _items: T[]) => React.ReactNode;
+    renderEmpty?: (_column: BoardColumn) => React.ReactNode;
+    dragItemId: string | number | null;
+    onDragStart: (_id: string | number) => void;
+    onDragEnd: () => void;
+    onMove?: (_itemId: string | number, _fromColumn: string, _toColumn: string) => void;
+    columnMinHeight: string;
+}): react_jsx_runtime.JSX.Element;
+declare function MobileBoardView<T>({ columns, grouped, activeColumnId, onActiveColumnChange, loading, getItemId, renderCard, renderEmpty, onMove, }: {
+    columns: BoardColumn[];
+    grouped: Record<string, T[]>;
+    activeColumnId: string;
+    onActiveColumnChange: (_id: string) => void;
+    loading: boolean;
+    getItemId: (_item: T) => string | number;
+    renderCard: (_item: T, _columnId: string) => React.ReactNode;
+    renderEmpty?: (_column: BoardColumn) => React.ReactNode;
+    onMove?: (_itemId: string | number, _fromColumn: string, _toColumn: string) => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { type BoardColumn, BoardColumnComponent, MobileBoardView };

package/dist/primitives/board-view-internals.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BoardColumn {
+    id: string;
+    label: string;
+}
+declare function BoardColumnComponent<T>({ column, items, loading, getItemId, renderCard, renderColumnHeader, renderEmpty, dragItemId, onDragStart, onDragEnd, onMove, columnMinHeight, }: {
+    column: BoardColumn;
+    items: T[];
+    loading: boolean;
+    getItemId: (_item: T) => string | number;
+    renderCard: (_item: T, _columnId: string) => React.ReactNode;
+    renderColumnHeader?: (_column: BoardColumn, _items: T[]) => React.ReactNode;
+    renderEmpty?: (_column: BoardColumn) => React.ReactNode;
+    dragItemId: string | number | null;
+    onDragStart: (_id: string | number) => void;
+    onDragEnd: () => void;
+    onMove?: (_itemId: string | number, _fromColumn: string, _toColumn: string) => void;
+    columnMinHeight: string;
+}): react_jsx_runtime.JSX.Element;
+declare function MobileBoardView<T>({ columns, grouped, activeColumnId, onActiveColumnChange, loading, getItemId, renderCard, renderEmpty, onMove, }: {
+    columns: BoardColumn[];
+    grouped: Record<string, T[]>;
+    activeColumnId: string;
+    onActiveColumnChange: (_id: string) => void;
+    loading: boolean;
+    getItemId: (_item: T) => string | number;
+    renderCard: (_item: T, _columnId: string) => React.ReactNode;
+    renderEmpty?: (_column: BoardColumn) => React.ReactNode;
+    onMove?: (_itemId: string | number, _fromColumn: string, _toColumn: string) => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { type BoardColumn, BoardColumnComponent, MobileBoardView };

package/dist/primitives/board-view-internals.js

@@ -0,0 +1,16 @@
+"use client";
+"use client";
+import {
+  BoardColumnComponent,
+  MobileBoardView
+} from "../chunk-62UTAG2C.js";
+import "../chunk-LELFPLTE.js";
+import "../chunk-J6NXDZR5.js";
+import "../chunk-H7TETFLB.js";
+import "../chunk-D4ZL2OEQ.js";
+import "../chunk-YEW65ASC.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  BoardColumnComponent,
+  MobileBoardView
+};

package/dist/primitives/board-view.cjs

@@ -0,0 +1,108 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+"use client";
+
+
+var _chunkRWWOFWLPcjs = require('../chunk-RWWOFWLP.cjs');
+require('../chunk-PNWNU6JW.cjs');
+require('../chunk-FNDBM67K.cjs');
+require('../chunk-U2NES7VR.cjs');
+require('../chunk-SGW4FWBX.cjs');
+require('../chunk-PPX2VPGI.cjs');
+require('../chunk-WNXVGUBF.cjs');
+require('../chunk-IQZLUT2Y.cjs');
+require('../chunk-LELBCBDT.cjs');
+require('../chunk-R5L4CM6V.cjs');
+require('../chunk-JH4GAGOQ.cjs');
+require('../chunk-YYFVG5A6.cjs');
+require('../chunk-XLIAY56V.cjs');
+require('../chunk-V5SPFLKW.cjs');
+require('../chunk-PQUSJEXL.cjs');
+require('../chunk-VGTINL5Q.cjs');
+require('../chunk-I6GUOEBO.cjs');
+require('../chunk-VBPPFC7X.cjs');
+require('../chunk-L4DH72UF.cjs');
+require('../chunk-R35FT53G.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/board-view.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function BoardView({
+  columns,
+  data,
+  getColumnId,
+  getItemId,
+  renderCard,
+  renderColumnHeader,
+  renderEmpty,
+  filterSchema,
+  filters,
+  onFiltersChange,
+  quickFilters,
+  searchTerm,
+  onSearchChange,
+  searchPlaceholder,
+  showSearch,
+  showFilters,
+  searchFields,
+  searchPredicate,
+  filterPredicate,
+  onMove,
+  loading = false,
+  columnWidth,
+  columnMinHeight,
+  className,
+  actions,
+  sortOptions,
+  sortValue,
+  onSortChange
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkRWWOFWLPcjs.ResourceList,
+    {
+      data,
+      loading,
+      error: null,
+      refetch: () => {
+      },
+      filterSchema: _nullishCoalesce(filterSchema, () => ( [])),
+      filters: _nullishCoalesce(filters, () => ( {})),
+      onFiltersChange: _nullishCoalesce(onFiltersChange, () => ( (() => {
+      }))),
+      quickFilters,
+      searchTerm,
+      onSearchChange,
+      enableServerSearch: searchTerm !== void 0 && !!onSearchChange,
+      searchPlaceholder,
+      showSearch,
+      showFilters,
+      showTitle: false,
+      title: "",
+      showViewToggle: false,
+      viewMode: "board",
+      variant: "flush",
+      className,
+      searchFields,
+      searchPredicate,
+      filterPredicate,
+      renderItem: () => null,
+      boardConfig: {
+        columns,
+        getColumnId,
+        getItemId,
+        renderCard,
+        renderColumnHeader,
+        renderColumnEmpty: renderEmpty,
+        onMove,
+        columnWidth,
+        columnMinHeight
+      },
+      actions,
+      sortOptions,
+      sortValue,
+      onSortChange
+    }
+  );
+}
+
+
+exports.BoardView = BoardView;

package/dist/primitives/board-view.d.cts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FilterDefinition } from '../lib/filter-types.cjs';
+import { QuickFilter } from './quick-filters.cjs';
+import { BoardConfig } from './resource-list.cjs';
+export { BoardColumn } from './board-view-internals.cjs';
+
+interface BoardViewProps<T> {
+    columns: BoardConfig<T>["columns"];
+    data: T[] | undefined;
+    getColumnId: BoardConfig<T>["getColumnId"];
+    getItemId: BoardConfig<T>["getItemId"];
+    renderCard: BoardConfig<T>["renderCard"];
+    renderColumnHeader?: BoardConfig<T>["renderColumnHeader"];
+    renderEmpty?: BoardConfig<T>["renderColumnEmpty"];
+    filterSchema?: FilterDefinition[];
+    filters?: Record<string, any>;
+    onFiltersChange?: (_filters: Record<string, any>) => void;
+    quickFilters?: QuickFilter[];
+    searchTerm?: string;
+    onSearchChange?: (_term: string) => void;
+    searchPlaceholder?: string;
+    showSearch?: boolean;
+    showFilters?: boolean;
+    searchFields?: string[];
+    searchPredicate?: (_item: T, _query: string) => boolean;
+    filterPredicate?: (_item: T, _filters: Record<string, any>) => boolean;
+    onMove?: BoardConfig<T>["onMove"];
+    loading?: boolean;
+    columnWidth?: string;
+    columnMinHeight?: string;
+    className?: string;
+    actions?: React.ReactNode;
+    sortOptions?: any[];
+    sortValue?: string;
+    onSortChange?: (_value: string) => void;
+}
+declare function BoardView<T>({ columns, data, getColumnId, getItemId, renderCard, renderColumnHeader, renderEmpty, filterSchema, filters, onFiltersChange, quickFilters, searchTerm, onSearchChange, searchPlaceholder, showSearch, showFilters, searchFields, searchPredicate, filterPredicate, onMove, loading, columnWidth, columnMinHeight, className, actions, sortOptions, sortValue, onSortChange, }: BoardViewProps<T>): react_jsx_runtime.JSX.Element;
+
+export { BoardView, type BoardViewProps };

package/dist/primitives/board-view.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FilterDefinition } from '../lib/filter-types.js';
+import { QuickFilter } from './quick-filters.js';
+import { BoardConfig } from './resource-list.js';
+export { BoardColumn } from './board-view-internals.js';
+
+interface BoardViewProps<T> {
+    columns: BoardConfig<T>["columns"];
+    data: T[] | undefined;
+    getColumnId: BoardConfig<T>["getColumnId"];
+    getItemId: BoardConfig<T>["getItemId"];
+    renderCard: BoardConfig<T>["renderCard"];
+    renderColumnHeader?: BoardConfig<T>["renderColumnHeader"];
+    renderEmpty?: BoardConfig<T>["renderColumnEmpty"];
+    filterSchema?: FilterDefinition[];
+    filters?: Record<string, any>;
+    onFiltersChange?: (_filters: Record<string, any>) => void;
+    quickFilters?: QuickFilter[];
+    searchTerm?: string;
+    onSearchChange?: (_term: string) => void;
+    searchPlaceholder?: string;
+    showSearch?: boolean;
+    showFilters?: boolean;
+    searchFields?: string[];
+    searchPredicate?: (_item: T, _query: string) => boolean;
+    filterPredicate?: (_item: T, _filters: Record<string, any>) => boolean;
+    onMove?: BoardConfig<T>["onMove"];
+    loading?: boolean;
+    columnWidth?: string;
+    columnMinHeight?: string;
+    className?: string;
+    actions?: React.ReactNode;
+    sortOptions?: any[];
+    sortValue?: string;
+    onSortChange?: (_value: string) => void;
+}
+declare function BoardView<T>({ columns, data, getColumnId, getItemId, renderCard, renderColumnHeader, renderEmpty, filterSchema, filters, onFiltersChange, quickFilters, searchTerm, onSearchChange, searchPlaceholder, showSearch, showFilters, searchFields, searchPredicate, filterPredicate, onMove, loading, columnWidth, columnMinHeight, className, actions, sortOptions, sortValue, onSortChange, }: BoardViewProps<T>): react_jsx_runtime.JSX.Element;
+
+export { BoardView, type BoardViewProps };

package/dist/primitives/board-view.js

@@ -0,0 +1,108 @@
+"use client";
+"use client";
+import {
+  ResourceList
+} from "../chunk-UGF2K6NR.js";
+import "../chunk-LI5EOSQG.js";
+import "../chunk-J3GQXM37.js";
+import "../chunk-ZRLUUZHK.js";
+import "../chunk-MLHNYRFX.js";
+import "../chunk-G76JANB4.js";
+import "../chunk-YG7FBJRM.js";
+import "../chunk-E2TQMDO7.js";
+import "../chunk-H2O6NMLZ.js";
+import "../chunk-RRRD5EUI.js";
+import "../chunk-OICAYRVH.js";
+import "../chunk-62UTAG2C.js";
+import "../chunk-LELFPLTE.js";
+import "../chunk-J6NXDZR5.js";
+import "../chunk-QMA3WVB7.js";
+import "../chunk-H7TETFLB.js";
+import "../chunk-D4ZL2OEQ.js";
+import "../chunk-YEW65ASC.js";
+import "../chunk-HQRWRRZJ.js";
+import "../chunk-PIU5SSUV.js";
+import "../chunk-G6SRSWXB.js";
+
+// src/primitives/board-view.tsx
+import { jsx } from "react/jsx-runtime";
+function BoardView({
+  columns,
+  data,
+  getColumnId,
+  getItemId,
+  renderCard,
+  renderColumnHeader,
+  renderEmpty,
+  filterSchema,
+  filters,
+  onFiltersChange,
+  quickFilters,
+  searchTerm,
+  onSearchChange,
+  searchPlaceholder,
+  showSearch,
+  showFilters,
+  searchFields,
+  searchPredicate,
+  filterPredicate,
+  onMove,
+  loading = false,
+  columnWidth,
+  columnMinHeight,
+  className,
+  actions,
+  sortOptions,
+  sortValue,
+  onSortChange
+}) {
+  return /* @__PURE__ */ jsx(
+    ResourceList,
+    {
+      data,
+      loading,
+      error: null,
+      refetch: () => {
+      },
+      filterSchema: filterSchema ?? [],
+      filters: filters ?? {},
+      onFiltersChange: onFiltersChange ?? (() => {
+      }),
+      quickFilters,
+      searchTerm,
+      onSearchChange,
+      enableServerSearch: searchTerm !== void 0 && !!onSearchChange,
+      searchPlaceholder,
+      showSearch,
+      showFilters,
+      showTitle: false,
+      title: "",
+      showViewToggle: false,
+      viewMode: "board",
+      variant: "flush",
+      className,
+      searchFields,
+      searchPredicate,
+      filterPredicate,
+      renderItem: () => null,
+      boardConfig: {
+        columns,
+        getColumnId,
+        getItemId,
+        renderCard,
+        renderColumnHeader,
+        renderColumnEmpty: renderEmpty,
+        onMove,
+        columnWidth,
+        columnMinHeight
+      },
+      actions,
+      sortOptions,
+      sortValue,
+      onSortChange
+    }
+  );
+}
+export {
+  BoardView
+};

package/dist/primitives/browser-preview.cjs

@@ -0,0 +1,62 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/browser-preview.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function BrowserPreview({
+  url,
+  label,
+  children,
+  dots = true,
+  watermark = false,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "border border-border bg-card overflow-hidden rounded-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3 px-3 py-2 bg-muted border-b border-border", children: [
+          dots && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", "aria-hidden": true, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-2.5 h-2.5 rounded-full bg-muted-foreground/50 inline-block" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-2.5 h-2.5 rounded-full bg-muted-foreground/50 inline-block" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-2.5 h-2.5 rounded-full bg-muted-foreground/50 inline-block" })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 border border-border bg-background px-3 py-1 font-mono text-xs text-muted-foreground truncate rounded-sm", children: url }),
+          label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-mono text-xs uppercase tracking-wider text-muted-foreground whitespace-nowrap", children: label })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative bg-background", children: [
+          children,
+          watermark && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                "aria-hidden": true,
+                className: "absolute inset-0 pointer-events-none opacity-[0.04]",
+                style: {
+                  backgroundImage: "repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 10px)"
+                }
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                "aria-hidden": true,
+                className: "absolute top-3 right-3 pointer-events-none",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-mono text-[0.65rem] uppercase tracking-widest text-muted-foreground/70 bg-background/80 border border-border/60 px-2 py-0.5 rounded-sm", children: "Preview" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+
+exports.BrowserPreview = BrowserPreview;

package/dist/primitives/browser-preview.d.cts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface BrowserPreviewProps {
+    /** The URL string shown in the mock URL bar. Can include React nodes for styled segments (e.g. an italic <id> placeholder). */
+    url: ReactNode;
+    /** Optional small label shown to the right of the URL bar (e.g. "preview"). */
+    label?: ReactNode;
+    /** The mocked page contents. */
+    children: ReactNode;
+    /** Show three traffic-light dots on the left of the chrome. Defaults to true. */
+    dots?: boolean;
+    /**
+     * Adds a subtle diagonal-stripes overlay across the content + a
+     * "PREVIEW" watermark badge. Use this when the contents *look* like
+     * an interactive page (e.g. a styled CTA button) and you need to
+     * visually communicate that the user is previewing, not on the page.
+     *
+     * The overlay is `pointer-events: none`, so any genuinely interactive
+     * elements inside (e.g. inline EditableField triggers for the user to
+     * tweak preview values) stay clickable.
+     */
+    watermark?: boolean;
+    className?: string;
+}
+/**
+ * Renders a faux browser window — title chrome with three dots, a URL bar,
+ * and the supplied children as the rendered page. Useful in onboarding and
+ * marketing surfaces to show "what your page will look like" without
+ * actually iframing the real page.
+ *
+ * Visual treatment uses semantic tokens (`bg-muted`, `border-border`,
+ * `text-muted-foreground`) so the chrome matches whichever theme is active.
+ *
+ * Pass `watermark` to add a striped preview overlay + badge when the
+ * contents are styled to look like a real interactive page (and you
+ * need the user to know they're not on it).
+ */
+declare function BrowserPreview({ url, label, children, dots, watermark, className, }: BrowserPreviewProps): react_jsx_runtime.JSX.Element;
+
+export { BrowserPreview, type BrowserPreviewProps };

package/dist/primitives/browser-preview.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface BrowserPreviewProps {
+    /** The URL string shown in the mock URL bar. Can include React nodes for styled segments (e.g. an italic <id> placeholder). */
+    url: ReactNode;
+    /** Optional small label shown to the right of the URL bar (e.g. "preview"). */
+    label?: ReactNode;
+    /** The mocked page contents. */
+    children: ReactNode;
+    /** Show three traffic-light dots on the left of the chrome. Defaults to true. */
+    dots?: boolean;
+    /**
+     * Adds a subtle diagonal-stripes overlay across the content + a
+     * "PREVIEW" watermark badge. Use this when the contents *look* like
+     * an interactive page (e.g. a styled CTA button) and you need to
+     * visually communicate that the user is previewing, not on the page.
+     *
+     * The overlay is `pointer-events: none`, so any genuinely interactive
+     * elements inside (e.g. inline EditableField triggers for the user to
+     * tweak preview values) stay clickable.
+     */
+    watermark?: boolean;
+    className?: string;
+}
+/**
+ * Renders a faux browser window — title chrome with three dots, a URL bar,
+ * and the supplied children as the rendered page. Useful in onboarding and
+ * marketing surfaces to show "what your page will look like" without
+ * actually iframing the real page.
+ *
+ * Visual treatment uses semantic tokens (`bg-muted`, `border-border`,
+ * `text-muted-foreground`) so the chrome matches whichever theme is active.
+ *
+ * Pass `watermark` to add a striped preview overlay + badge when the
+ * contents are styled to look like a real interactive page (and you
+ * need the user to know they're not on it).
+ */
+declare function BrowserPreview({ url, label, children, dots, watermark, className, }: BrowserPreviewProps): react_jsx_runtime.JSX.Element;
+
+export { BrowserPreview, type BrowserPreviewProps };