@epicbagel/saas-kit 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,103 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FilterDefinition } from '../lib/filter-types.cjs';
+import { QuickFilter, QuickFiltersAppearance } from './quick-filters.cjs';
+import { BoardColumn } from './board-view-internals.cjs';
+
+interface BoardConfig<T> {
+    columns: BoardColumn[];
+    getColumnId: (_item: T) => string;
+    getItemId: (_item: T) => string | number;
+    renderCard: (_item: T, _columnId: string) => React.ReactNode;
+    renderColumnHeader?: (_column: BoardColumn, _items: T[]) => React.ReactNode;
+    renderColumnEmpty?: (_column: BoardColumn) => React.ReactNode;
+    onMove?: (_itemId: string | number, _fromColumn: string, _toColumn: string) => void;
+    columnWidth?: string;
+    columnMinHeight?: string;
+    viewport?: "auto" | "bounded";
+}
+interface ResourceListProps<T> {
+    data: T[] | undefined;
+    loading: boolean;
+    error: any;
+    refetch: () => void;
+    filterSchema: FilterDefinition[];
+    filters: Record<string, any>;
+    onFiltersChange: (_filters: Record<string, any>) => void;
+    quickFilters?: QuickFilter[];
+    /** Hide the "Quick filters:" label on the quick-filters row. */
+    quickFiltersShowLabel?: boolean;
+    /** Visual treatment for quick filters. Defaults to the compact surface. */
+    quickFiltersAppearance?: QuickFiltersAppearance;
+    searchTerm?: string;
+    onSearchChange?: (_searchTerm: string) => void;
+    enableServerSearch?: boolean;
+    searchFields?: string[];
+    searchPredicate?: (_item: T, _query: string) => boolean;
+    filterPredicate?: (_item: T, _filters: Record<string, any>) => boolean;
+    renderItem: (_item: T, _index: number) => React.ReactNode;
+    renderTable?: (_items: T[]) => React.ReactNode;
+    renderEmpty?: () => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    renderError?: (_error: any) => React.ReactNode;
+    title: string;
+    showTitle?: boolean;
+    totalCount?: number;
+    searchPlaceholder?: string;
+    showSearch?: boolean;
+    showFilters?: boolean;
+    showViewToggle?: boolean;
+    /** Height and padding for the search/action toolbar. Defaults to roomy 48px controls. */
+    toolbarSize?: "compact" | "roomy";
+    /** Suppress search/filter chrome when the backing collection is truly empty. */
+    hideControlsWhenEmpty?: boolean;
+    viewMode?: "card" | "table" | "board";
+    onViewModeChange?: (_mode: "card" | "table" | "board") => void;
+    boardConfig?: BoardConfig<T>;
+    actions?: React.ReactNode;
+    filterActions?: React.ReactNode;
+    sortOptions?: any[];
+    sortValue?: string;
+    onSortChange?: (_value: string) => void;
+    className?: string;
+    containerClassName?: string;
+    cardGridClassName?: string;
+    showPagination?: boolean;
+    currentPage?: number;
+    onPreviousPage?: () => void;
+    onNextPage?: () => void;
+    useCompactSearch?: boolean;
+    /**
+     * Layout shape.
+     *
+     * - `"panel"` (default) — admin-shell layout: full-height flex
+     *   container, padded `p-4 border-b` header, and a fixed-height
+     *   ScrollArea around the content. Use when the list IS the page,
+     *   inside an app shell that owns the chrome.
+     * - `"flush"` — inline layout: no padded header wrapper, no
+     *   ScrollArea, no enforced height. Header controls (search +
+     *   filters) sit flush with the page's own padding; content flows
+     *   in normal document order. Use when the list is one block on a
+     *   page that already has its own container and other sections
+     *   above/below.
+     */
+    variant?: "panel" | "flush";
+    /**
+     * Cursor-style "load more" footer below the content. Pair with a
+     * server action that appends the next page to `data`. The parent
+     * still owns the list — this is just the button. `hasMore` toggles
+     * between the button and the "all caught up" line. Omit entirely
+     * to suppress (useful when `showPagination` page-based controls
+     * are in use instead).
+     */
+    loadMore?: {
+        onClick: () => void;
+        hasMore: boolean;
+        loading?: boolean;
+        label?: React.ReactNode;
+        loadingLabel?: React.ReactNode;
+        doneLabel?: React.ReactNode;
+    };
+}
+declare function ResourceList<T>({ data, loading, error, refetch: _refetch, filterSchema, filters, onFiltersChange, quickFilters, quickFiltersAppearance, searchTerm: externalSearchTerm, onSearchChange, enableServerSearch, searchFields, searchPredicate, filterPredicate, renderItem, renderTable, renderEmpty, renderLoading, renderError, title, showTitle, totalCount, searchPlaceholder, showSearch, showFilters, showViewToggle, toolbarSize, hideControlsWhenEmpty, quickFiltersShowLabel, viewMode, onViewModeChange, boardConfig, actions, filterActions, sortOptions, sortValue, onSortChange, className, containerClassName, cardGridClassName, showPagination, currentPage, onPreviousPage, onNextPage, useCompactSearch, variant, loadMore, }: ResourceListProps<T>): react_jsx_runtime.JSX.Element;
+
+export { BoardColumn, type BoardConfig, ResourceList };

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

@@ -0,0 +1,103 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FilterDefinition } from '../lib/filter-types.js';
+import { QuickFilter, QuickFiltersAppearance } from './quick-filters.js';
+import { BoardColumn } from './board-view-internals.js';
+
+interface BoardConfig<T> {
+    columns: BoardColumn[];
+    getColumnId: (_item: T) => string;
+    getItemId: (_item: T) => string | number;
+    renderCard: (_item: T, _columnId: string) => React.ReactNode;
+    renderColumnHeader?: (_column: BoardColumn, _items: T[]) => React.ReactNode;
+    renderColumnEmpty?: (_column: BoardColumn) => React.ReactNode;
+    onMove?: (_itemId: string | number, _fromColumn: string, _toColumn: string) => void;
+    columnWidth?: string;
+    columnMinHeight?: string;
+    viewport?: "auto" | "bounded";
+}
+interface ResourceListProps<T> {
+    data: T[] | undefined;
+    loading: boolean;
+    error: any;
+    refetch: () => void;
+    filterSchema: FilterDefinition[];
+    filters: Record<string, any>;
+    onFiltersChange: (_filters: Record<string, any>) => void;
+    quickFilters?: QuickFilter[];
+    /** Hide the "Quick filters:" label on the quick-filters row. */
+    quickFiltersShowLabel?: boolean;
+    /** Visual treatment for quick filters. Defaults to the compact surface. */
+    quickFiltersAppearance?: QuickFiltersAppearance;
+    searchTerm?: string;
+    onSearchChange?: (_searchTerm: string) => void;
+    enableServerSearch?: boolean;
+    searchFields?: string[];
+    searchPredicate?: (_item: T, _query: string) => boolean;
+    filterPredicate?: (_item: T, _filters: Record<string, any>) => boolean;
+    renderItem: (_item: T, _index: number) => React.ReactNode;
+    renderTable?: (_items: T[]) => React.ReactNode;
+    renderEmpty?: () => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    renderError?: (_error: any) => React.ReactNode;
+    title: string;
+    showTitle?: boolean;
+    totalCount?: number;
+    searchPlaceholder?: string;
+    showSearch?: boolean;
+    showFilters?: boolean;
+    showViewToggle?: boolean;
+    /** Height and padding for the search/action toolbar. Defaults to roomy 48px controls. */
+    toolbarSize?: "compact" | "roomy";
+    /** Suppress search/filter chrome when the backing collection is truly empty. */
+    hideControlsWhenEmpty?: boolean;
+    viewMode?: "card" | "table" | "board";
+    onViewModeChange?: (_mode: "card" | "table" | "board") => void;
+    boardConfig?: BoardConfig<T>;
+    actions?: React.ReactNode;
+    filterActions?: React.ReactNode;
+    sortOptions?: any[];
+    sortValue?: string;
+    onSortChange?: (_value: string) => void;
+    className?: string;
+    containerClassName?: string;
+    cardGridClassName?: string;
+    showPagination?: boolean;
+    currentPage?: number;
+    onPreviousPage?: () => void;
+    onNextPage?: () => void;
+    useCompactSearch?: boolean;
+    /**
+     * Layout shape.
+     *
+     * - `"panel"` (default) — admin-shell layout: full-height flex
+     *   container, padded `p-4 border-b` header, and a fixed-height
+     *   ScrollArea around the content. Use when the list IS the page,
+     *   inside an app shell that owns the chrome.
+     * - `"flush"` — inline layout: no padded header wrapper, no
+     *   ScrollArea, no enforced height. Header controls (search +
+     *   filters) sit flush with the page's own padding; content flows
+     *   in normal document order. Use when the list is one block on a
+     *   page that already has its own container and other sections
+     *   above/below.
+     */
+    variant?: "panel" | "flush";
+    /**
+     * Cursor-style "load more" footer below the content. Pair with a
+     * server action that appends the next page to `data`. The parent
+     * still owns the list — this is just the button. `hasMore` toggles
+     * between the button and the "all caught up" line. Omit entirely
+     * to suppress (useful when `showPagination` page-based controls
+     * are in use instead).
+     */
+    loadMore?: {
+        onClick: () => void;
+        hasMore: boolean;
+        loading?: boolean;
+        label?: React.ReactNode;
+        loadingLabel?: React.ReactNode;
+        doneLabel?: React.ReactNode;
+    };
+}
+declare function ResourceList<T>({ data, loading, error, refetch: _refetch, filterSchema, filters, onFiltersChange, quickFilters, quickFiltersAppearance, searchTerm: externalSearchTerm, onSearchChange, enableServerSearch, searchFields, searchPredicate, filterPredicate, renderItem, renderTable, renderEmpty, renderLoading, renderError, title, showTitle, totalCount, searchPlaceholder, showSearch, showFilters, showViewToggle, toolbarSize, hideControlsWhenEmpty, quickFiltersShowLabel, viewMode, onViewModeChange, boardConfig, actions, filterActions, sortOptions, sortValue, onSortChange, className, containerClassName, cardGridClassName, showPagination, currentPage, onPreviousPage, onNextPage, useCompactSearch, variant, loadMore, }: ResourceListProps<T>): react_jsx_runtime.JSX.Element;
+
+export { BoardColumn, type BoardConfig, ResourceList };

package/dist/primitives/resource-list.js

@@ -0,0 +1,28 @@
+"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";
+export {
+  ResourceList
+};

package/dist/primitives/responsive-dialog.cjs

@@ -0,0 +1,142 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+
+
+
+
+
+
+
+
+
+var _chunk2BHI5ZWJcjs = require('../chunk-2BHI5ZWJ.cjs');
+
+
+
+
+
+
+
+
+
+var _chunkWDXEJDMOcjs = require('../chunk-WDXEJDMO.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/responsive-dialog.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _reactresponsive = require('react-responsive');
+var _jsxruntime = require('react/jsx-runtime');
+var DesktopContext = React.createContext(false);
+var useIsDesktop = () => React.useContext(DesktopContext);
+var DESKTOP_QUERY = { minWidth: 1024 };
+var ResponsiveDialog = ({ children, ...props }) => {
+  const isDesktop = _reactresponsive.useMediaQuery.call(void 0, DESKTOP_QUERY);
+  const Root = isDesktop ? _chunkWDXEJDMOcjs.Dialog : _chunk2BHI5ZWJcjs.Drawer;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DesktopContext.Provider, { value: isDesktop, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ...props, children }) });
+};
+ResponsiveDialog.displayName = "ResponsiveDialog";
+var ResponsiveDialogTrigger = ({
+  children,
+  ...props
+}) => {
+  const Trigger = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTrigger : _chunk2BHI5ZWJcjs.DrawerTrigger;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Trigger, { ...props, children });
+};
+ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
+var ResponsiveDialogClose = ({
+  children,
+  ...props
+}) => {
+  const Close = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogClose : _chunk2BHI5ZWJcjs.DrawerClose;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Close, { ...props, children });
+};
+ResponsiveDialogClose.displayName = "ResponsiveDialogClose";
+var ResponsiveDialogContent = React.forwardRef(({ className, children, presentation = "default", ...props }, ref) => {
+  if (useIsDesktop()) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkWDXEJDMOcjs.DialogContent,
+      {
+        ref,
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "flex max-h-[85vh] max-w-md flex-col gap-0 overflow-hidden p-0",
+          presentation === "preview" && "max-w-2xl sm:h-[85vh] [&>button:last-child]:hidden",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk2BHI5ZWJcjs.DrawerContent,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "max-h-[92vh]", className),
+      ...props,
+      children
+    }
+  );
+});
+ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
+var ResponsiveDialogHeader = ({
+  className,
+  visibility = "visible",
+  ...props
+}) => {
+  const Header = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogHeader : _chunk2BHI5ZWJcjs.DrawerHeader;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Header,
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, useIsDesktop() && "p-4", visibility === "screen-reader" && "sr-only", className),
+      ...props
+    }
+  );
+};
+ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
+var ResponsiveDialogBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0 flex-1 overflow-y-auto px-4 pb-6", className), ...props });
+ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
+var ResponsiveDialogFooter = ({
+  className,
+  layout = "auto",
+  ...props
+}) => {
+  const isDesktop = useIsDesktop();
+  const Footer = isDesktop ? _chunkWDXEJDMOcjs.DialogFooter : _chunk2BHI5ZWJcjs.DrawerFooter;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Footer,
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "mt-0 shrink-0 gap-2 border-t bg-background p-4",
+        layout === "fill" ? "flex-row space-x-0 [&>*]:min-w-0 [&>*]:flex-1" : isDesktop ? "flex-row justify-end space-x-0 [&>*]:flex-none" : "grid grid-cols-2 [&>*]:w-full",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
+var ResponsiveDialogTitle = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Title = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTitle : _chunk2BHI5ZWJcjs.DrawerTitle;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Title, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
+var ResponsiveDialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Description = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogDescription : _chunk2BHI5ZWJcjs.DrawerDescription;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
+
+
+
+
+
+
+
+
+
+
+exports.ResponsiveDialog = ResponsiveDialog; exports.ResponsiveDialogBody = ResponsiveDialogBody; exports.ResponsiveDialogClose = ResponsiveDialogClose; exports.ResponsiveDialogContent = ResponsiveDialogContent; exports.ResponsiveDialogDescription = ResponsiveDialogDescription; exports.ResponsiveDialogFooter = ResponsiveDialogFooter; exports.ResponsiveDialogHeader = ResponsiveDialogHeader; exports.ResponsiveDialogTitle = ResponsiveDialogTitle; exports.ResponsiveDialogTrigger = ResponsiveDialogTrigger;

package/dist/primitives/responsive-dialog.d.cts

@@ -0,0 +1,56 @@
+import { Dialog, DialogClose, DialogContent, DialogDescriptionProps, DialogTitleProps, DialogTrigger } from './dialog.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Drawer } from './drawer.cjs';
+import '@radix-ui/react-dialog';
+import 'vaul';
+
+type RootProps = React.ComponentProps<typeof Dialog> & React.ComponentProps<typeof Drawer>;
+declare const ResponsiveDialog: {
+    ({ children, ...props }: RootProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ResponsiveDialogTrigger: {
+    ({ children, ...props }: React.ComponentProps<typeof DialogTrigger>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ResponsiveDialogClose: {
+    ({ children, ...props }: React.ComponentProps<typeof DialogClose>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Content. Desktop is a compact centered card (`max-w-md`); mobile is a
+ * tall bottom sheet. Both clamp height and own no inner padding — pad via
+ * <ResponsiveDialogHeader> (p-4) and <ResponsiveDialogBody> so the two
+ * presentations line up. The desktop card keeps the Dialog's built-in
+ * close "X"; mobile keeps the drawer grabber.
+ */
+interface ResponsiveDialogContentProps extends React.ComponentProps<typeof DialogContent> {
+    presentation?: "default" | "preview";
+}
+declare const ResponsiveDialogContent: React.ForwardRefExoticComponent<Omit<ResponsiveDialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ResponsiveDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    visibility?: "visible" | "screen-reader";
+}
+declare const ResponsiveDialogHeader: {
+    ({ className, visibility, ...props }: ResponsiveDialogHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/** Padded, scrollable body — identical markup in both presentations. */
+declare const ResponsiveDialogBody: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+interface ResponsiveDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `fill` mirrors a review action dock: direct children share the full row. */
+    layout?: "auto" | "fill";
+}
+/** Persistent action row outside the scrollable body. */
+declare const ResponsiveDialogFooter: {
+    ({ className, layout, ...props }: ResponsiveDialogFooterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ResponsiveDialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ResponsiveDialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { ResponsiveDialog, ResponsiveDialogBody, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger };

package/dist/primitives/responsive-dialog.d.ts

@@ -0,0 +1,56 @@
+import { Dialog, DialogClose, DialogContent, DialogDescriptionProps, DialogTitleProps, DialogTrigger } from './dialog.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Drawer } from './drawer.js';
+import '@radix-ui/react-dialog';
+import 'vaul';
+
+type RootProps = React.ComponentProps<typeof Dialog> & React.ComponentProps<typeof Drawer>;
+declare const ResponsiveDialog: {
+    ({ children, ...props }: RootProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ResponsiveDialogTrigger: {
+    ({ children, ...props }: React.ComponentProps<typeof DialogTrigger>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ResponsiveDialogClose: {
+    ({ children, ...props }: React.ComponentProps<typeof DialogClose>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Content. Desktop is a compact centered card (`max-w-md`); mobile is a
+ * tall bottom sheet. Both clamp height and own no inner padding — pad via
+ * <ResponsiveDialogHeader> (p-4) and <ResponsiveDialogBody> so the two
+ * presentations line up. The desktop card keeps the Dialog's built-in
+ * close "X"; mobile keeps the drawer grabber.
+ */
+interface ResponsiveDialogContentProps extends React.ComponentProps<typeof DialogContent> {
+    presentation?: "default" | "preview";
+}
+declare const ResponsiveDialogContent: React.ForwardRefExoticComponent<Omit<ResponsiveDialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ResponsiveDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    visibility?: "visible" | "screen-reader";
+}
+declare const ResponsiveDialogHeader: {
+    ({ className, visibility, ...props }: ResponsiveDialogHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/** Padded, scrollable body — identical markup in both presentations. */
+declare const ResponsiveDialogBody: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+interface ResponsiveDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `fill` mirrors a review action dock: direct children share the full row. */
+    layout?: "auto" | "fill";
+}
+/** Persistent action row outside the scrollable body. */
+declare const ResponsiveDialogFooter: {
+    ({ className, layout, ...props }: ResponsiveDialogFooterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ResponsiveDialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ResponsiveDialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { ResponsiveDialog, ResponsiveDialogBody, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger };

package/dist/primitives/responsive-dialog.js

@@ -0,0 +1,142 @@
+"use client";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from "../chunk-4HWCNRK4.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../chunk-3QT5VYZ3.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/responsive-dialog.tsx
+import * as React from "react";
+import { useMediaQuery } from "react-responsive";
+import { jsx } from "react/jsx-runtime";
+var DesktopContext = React.createContext(false);
+var useIsDesktop = () => React.useContext(DesktopContext);
+var DESKTOP_QUERY = { minWidth: 1024 };
+var ResponsiveDialog = ({ children, ...props }) => {
+  const isDesktop = useMediaQuery(DESKTOP_QUERY);
+  const Root = isDesktop ? Dialog : Drawer;
+  return /* @__PURE__ */ jsx(DesktopContext.Provider, { value: isDesktop, children: /* @__PURE__ */ jsx(Root, { ...props, children }) });
+};
+ResponsiveDialog.displayName = "ResponsiveDialog";
+var ResponsiveDialogTrigger = ({
+  children,
+  ...props
+}) => {
+  const Trigger = useIsDesktop() ? DialogTrigger : DrawerTrigger;
+  return /* @__PURE__ */ jsx(Trigger, { ...props, children });
+};
+ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
+var ResponsiveDialogClose = ({
+  children,
+  ...props
+}) => {
+  const Close = useIsDesktop() ? DialogClose : DrawerClose;
+  return /* @__PURE__ */ jsx(Close, { ...props, children });
+};
+ResponsiveDialogClose.displayName = "ResponsiveDialogClose";
+var ResponsiveDialogContent = React.forwardRef(({ className, children, presentation = "default", ...props }, ref) => {
+  if (useIsDesktop()) {
+    return /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        ref,
+        className: cn(
+          "flex max-h-[85vh] max-w-md flex-col gap-0 overflow-hidden p-0",
+          presentation === "preview" && "max-w-2xl sm:h-[85vh] [&>button:last-child]:hidden",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DrawerContent,
+    {
+      ref,
+      className: cn("max-h-[92vh]", className),
+      ...props,
+      children
+    }
+  );
+});
+ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
+var ResponsiveDialogHeader = ({
+  className,
+  visibility = "visible",
+  ...props
+}) => {
+  const Header = useIsDesktop() ? DialogHeader : DrawerHeader;
+  return /* @__PURE__ */ jsx(
+    Header,
+    {
+      className: cn(useIsDesktop() && "p-4", visibility === "screen-reader" && "sr-only", className),
+      ...props
+    }
+  );
+};
+ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
+var ResponsiveDialogBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 pb-6", className), ...props });
+ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
+var ResponsiveDialogFooter = ({
+  className,
+  layout = "auto",
+  ...props
+}) => {
+  const isDesktop = useIsDesktop();
+  const Footer = isDesktop ? DialogFooter : DrawerFooter;
+  return /* @__PURE__ */ jsx(
+    Footer,
+    {
+      className: cn(
+        "mt-0 shrink-0 gap-2 border-t bg-background p-4",
+        layout === "fill" ? "flex-row space-x-0 [&>*]:min-w-0 [&>*]:flex-1" : isDesktop ? "flex-row justify-end space-x-0 [&>*]:flex-none" : "grid grid-cols-2 [&>*]:w-full",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
+var ResponsiveDialogTitle = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Title = useIsDesktop() ? DialogTitle : DrawerTitle;
+  return /* @__PURE__ */ jsx(Title, { ref, className: cn(visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
+var ResponsiveDialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Description = useIsDesktop() ? DialogDescription : DrawerDescription;
+  return /* @__PURE__ */ jsx(Description, { ref, className: cn(visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
+export {
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger
+};

package/dist/primitives/responsive-view.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+// src/primitives/responsive-view.tsx
+var _reactresponsive = require('react-responsive');
+var _jsxruntime = require('react/jsx-runtime');
+function ResponsiveView({ mobile, desktop }) {
+  const isMobile = _reactresponsive.useMediaQuery.call(void 0, { maxWidth: 1024 });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: "lg:hidden",
+        style: { display: isMobile ? void 0 : "none" },
+        children: mobile
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: "hidden lg:block",
+        style: { display: isMobile ? "none" : void 0 },
+        children: desktop
+      }
+    )
+  ] });
+}
+
+
+exports.ResponsiveView = ResponsiveView;

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ResponsiveViewProps {
+    mobile: ReactNode;
+    desktop: ReactNode;
+}
+declare function ResponsiveView({ mobile, desktop }: ResponsiveViewProps): react_jsx_runtime.JSX.Element;
+
+export { ResponsiveView };