@stfrigerio/sito-template 0.1.35 → 0.1.36

package/dist/components/atoms/EmptyState/EmptyState.d.ts

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react';
+/**
+ * Props for the EmptyState component
+ * @interface EmptyStateProps
+ */
+export interface EmptyStateProps {
+    /** Optional icon (usually a lucide-react icon) rendered above the message */
+    icon?: ReactNode;
+    /** Optional heading shown above the message */
+    title?: string;
+    /** The main message describing why the state is empty and what to do next */
+    message: string;
+    /** Optional action slot (e.g. a Button CTA) rendered under the message */
+    action?: ReactNode;
+    /** Size variant — `compact` fits inline slots, `default` fills a panel, `large` fills the viewport */
+    size?: 'compact' | 'default' | 'large';
+}
+/**
+ * EmptyState Component
+ *
+ * @component
+ * @description
+ * A composable placeholder for empty lists, empty sidebars, and
+ * "nothing to show" panels. Renders an icon, optional title, message,
+ * and optional action CTA in a vertically-centered stack. Pure layout —
+ * no fetching, no state.
+ *
+ * @example
+ * // Minimal: just a message
+ * <EmptyState message="No documents yet." />
+ *
+ * @example
+ * // With an icon
+ * import { FileText } from 'lucide-react';
+ * <EmptyState
+ *   icon={<FileText size={32} />}
+ *   message="Select a document from the sidebar to start editing."
+ * />
+ *
+ * @example
+ * // Full: icon + title + message + action
+ * <EmptyState
+ *   icon={<FolderKanban size={40} />}
+ *   title="No projects"
+ *   message="Create your first project to get started."
+ *   action={<Button onClick={handleCreate}>New project</Button>}
+ * />
+ *
+ * @param {EmptyStateProps} props - The props for the EmptyState component
+ * @returns {JSX.Element} The rendered EmptyState component
+ */
+export declare const EmptyState: React.FC<EmptyStateProps>;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/atoms/EmptyState/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC/B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,OAAO,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sGAAsG;IACtG,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgBhD,CAAC"}

package/dist/components/atoms/EmptyState/index.d.ts

@@ -0,0 +1,3 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/EmptyState/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/atoms/Modal/Modal.d.ts

@@ -0,0 +1,61 @@
+import React, { ReactNode } from 'react';
+/**
+ * Props for the Modal component
+ * @interface ModalProps
+ */
+export interface ModalProps {
+    /** Whether the modal is currently visible */
+    open: boolean;
+    /** Title shown in the modal header */
+    title: string;
+    /** Callback fired when the user requests to close the modal (backdrop click, Escape, or X button) */
+    onClose: () => void;
+    /** Modal body content */
+    children: ReactNode;
+    /** Width variant. `default` fits typical forms; `compact` is narrower; `wide` is for editors */
+    size?: 'default' | 'compact' | 'wide';
+    /** Optional slot rendered in the header next to the close button (e.g. action buttons) */
+    actions?: ReactNode;
+    /** When true, the body is padded; when false, the body is flush to the edges */
+    padding?: boolean;
+}
+/**
+ * Modal Component
+ *
+ * @component
+ * @description
+ * An accessible overlay dialog with a backdrop, title header, optional
+ * header actions, and a flexible body. Renders into a React portal on
+ * `document.body`, animates in/out with Framer Motion, closes on Escape
+ * key or backdrop click, and clicks inside the dialog don't propagate
+ * to the backdrop.
+ *
+ * @example
+ * // Basic usage
+ * <Modal open={isOpen} title="Confirm" onClose={() => setIsOpen(false)}>
+ *   <p>Are you sure?</p>
+ * </Modal>
+ *
+ * @example
+ * // With header actions and wide size
+ * <Modal
+ *   open={isOpen}
+ *   title="Edit profile"
+ *   size="wide"
+ *   actions={<button onClick={save}>Save</button>}
+ *   onClose={handleClose}
+ * >
+ *   <ProfileForm />
+ * </Modal>
+ *
+ * @example
+ * // Flush body (no padding) for editors and full-bleed content
+ * <Modal open={isOpen} title="Document" padding={false} onClose={handleClose}>
+ *   <DocEditor content={content} onSave={save} />
+ * </Modal>
+ *
+ * @param {ModalProps} props - The props for the Modal component
+ * @returns {React.ReactPortal | null} A portal rendering the modal, or null on the server
+ */
+export declare const Modal: React.FC<ModalProps>;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/atoms/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAMpD;;;GAGG;AACH,MAAM,WAAW,UAAU;IAC1B,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,gGAAgG;IAChG,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACtC,0FAA0F;IAC1F,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsEtC,CAAC"}

package/dist/components/atoms/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/atoms/index.d.ts

@@ -2,6 +2,10 @@ export { Button } from './Button';
 export type { ButtonProps } from './Button';
 export { Card } from './Card';
 export type { CardProps } from './Card';
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export { DateInput } from './DateInput';

package/dist/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAIxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGpE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGpE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.esm.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo, memo } from 'react';
 import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
-import { Check, X, Edit } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { X, Check, Edit } from 'lucide-react';
 import * as d3 from 'd3';
 
 const ThemeContext$1 = createContext(undefined);
@@ -30,7 +31,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
     return (jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
 };
 
-var styles$s = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
+var styles$u = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
 
 const SOUND_PACKS = {
     digital: {
@@ -595,11 +596,11 @@ function useComponentSound(config, options) {
 const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, soundConfig, onClick, onMouseEnter, onFocus, ...rest }) => {
     const { handlers } = useComponentSound(soundConfig);
     const buttonClasses = [
-        styles$s.button,
-        styles$s[variant],
-        styles$s[size],
-        fullWidth && styles$s.fullWidth,
-        loading && styles$s.loading,
+        styles$u.button,
+        styles$u[variant],
+        styles$u[size],
+        fullWidth && styles$u.fullWidth,
+        loading && styles$u.loading,
         className
     ].filter(Boolean).join(' ');
     const handleClick = (e) => {
@@ -610,10 +611,10 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
         handlers.onMouseEnter?.();
         onMouseEnter?.(e);
     };
-    return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$s.spinner }), iconLeft && jsx("span", { className: styles$s.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$s.iconRight, children: iconRight })] }));
+    return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$u.spinner }), iconLeft && jsx("span", { className: styles$u.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$u.iconRight, children: iconRight })] }));
 };
 
-var styles$r = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
+var styles$t = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
 
 /**
  * Card Component
@@ -678,27 +679,131 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
         onExpandChange?.(newExpanded);
     };
     const cardClasses = [
-        styles$r.card,
-        styles$r[variant],
-        hoverable && styles$r.hoverable,
-        clickable && styles$r.clickable,
-        !padding && styles$r.noPadding,
-        expandable && styles$r.expandable,
+        styles$t.card,
+        styles$t[variant],
+        hoverable && styles$t.hoverable,
+        clickable && styles$t.clickable,
+        !padding && styles$t.noPadding,
+        expandable && styles$t.expandable,
         className
     ].filter(Boolean).join(' ');
     const renderHeader = () => {
         if (header) {
-            return (jsxs("div", { className: styles$r.header, children: [jsx("div", { className: styles$r.headerContent, children: header }), expandable && (jsx("button", { className: styles$r.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$r.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+            return (jsxs("div", { className: styles$t.header, children: [jsx("div", { className: styles$t.headerContent, children: header }), expandable && (jsx("button", { className: styles$t.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$t.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
         }
         if (title || subtitle) {
-            return (jsxs("div", { className: styles$r.header, children: [jsxs("div", { className: styles$r.headerContent, children: [title && jsx("h3", { className: styles$r.title, children: title }), subtitle && jsx("p", { className: styles$r.subtitle, children: subtitle })] }), expandable && (jsx("button", { className: styles$r.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$r.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+            return (jsxs("div", { className: styles$t.header, children: [jsxs("div", { className: styles$t.headerContent, children: [title && jsx("h3", { className: styles$t.title, children: title }), subtitle && jsx("p", { className: styles$t.subtitle, children: subtitle })] }), expandable && (jsx("button", { className: styles$t.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$t.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
         }
         return null;
     };
-    const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$r.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$r.image }) })), renderHeader(), jsx(AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxs(motion.div, { initial: expandable ? { height: 0, opacity: 0 } : undefined, animate: expandable ? { height: 'auto', opacity: 1 } : undefined, exit: expandable ? { height: 0, opacity: 0 } : undefined, transition: { duration: 0.3, ease: "easeInOut" }, className: styles$r.expandableContent, children: [children && (jsx("div", { className: padding ? styles$r.body : undefined, children: children })), footer && jsx("div", { className: styles$r.footer, children: footer })] }, "content")) })] }));
+    const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$t.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$t.image }) })), renderHeader(), jsx(AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxs(motion.div, { initial: expandable ? { height: 0, opacity: 0 } : undefined, animate: expandable ? { height: 'auto', opacity: 1 } : undefined, exit: expandable ? { height: 0, opacity: 0 } : undefined, transition: { duration: 0.3, ease: "easeInOut" }, className: styles$t.expandableContent, children: [children && (jsx("div", { className: padding ? styles$t.body : undefined, children: children })), footer && jsx("div", { className: styles$t.footer, children: footer })] }, "content")) })] }));
     return (jsx(motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
 };
 
+var styles$s = {"wrapper":"EmptyState-module_wrapper__h3Y2E","compact":"EmptyState-module_compact__HdYu1","default":"EmptyState-module_default__ACAbn","large":"EmptyState-module_large__H3ELo","icon":"EmptyState-module_icon__i7-3M","title":"EmptyState-module_title__xCyfH","message":"EmptyState-module_message__Bc5xK","action":"EmptyState-module_action__UpnvZ"};
+
+/**
+ * EmptyState Component
+ *
+ * @component
+ * @description
+ * A composable placeholder for empty lists, empty sidebars, and
+ * "nothing to show" panels. Renders an icon, optional title, message,
+ * and optional action CTA in a vertically-centered stack. Pure layout —
+ * no fetching, no state.
+ *
+ * @example
+ * // Minimal: just a message
+ * <EmptyState message="No documents yet." />
+ *
+ * @example
+ * // With an icon
+ * import { FileText } from 'lucide-react';
+ * <EmptyState
+ *   icon={<FileText size={32} />}
+ *   message="Select a document from the sidebar to start editing."
+ * />
+ *
+ * @example
+ * // Full: icon + title + message + action
+ * <EmptyState
+ *   icon={<FolderKanban size={40} />}
+ *   title="No projects"
+ *   message="Create your first project to get started."
+ *   action={<Button onClick={handleCreate}>New project</Button>}
+ * />
+ *
+ * @param {EmptyStateProps} props - The props for the EmptyState component
+ * @returns {JSX.Element} The rendered EmptyState component
+ */
+const EmptyState = ({ icon, title, message, action, size = 'default', }) => {
+    const wrapperClass = [styles$s.wrapper, styles$s[size]].filter(Boolean).join(' ');
+    return (jsxs("div", { className: wrapperClass, children: [icon && jsx("div", { className: styles$s.icon, children: icon }), title && jsx("h3", { className: styles$s.title, children: title }), jsx("p", { className: styles$s.message, children: message }), action && jsx("div", { className: styles$s.action, children: action })] }));
+};
+
+var styles$r = {"backdrop":"Modal-module_backdrop__yOx-a","dialog":"Modal-module_dialog__yEXTq","dialogCompact":"Modal-module_dialogCompact__z1Wxp","dialogWide":"Modal-module_dialogWide__9PTXK","header":"Modal-module_header__NHHKd","title":"Modal-module_title__i3R0x","headerActions":"Modal-module_headerActions__g28UN","closeButton":"Modal-module_closeButton__siC-1","body":"Modal-module_body__U7jvM","bodyFlush":"Modal-module_bodyFlush__wtk3q"};
+
+/**
+ * Modal Component
+ *
+ * @component
+ * @description
+ * An accessible overlay dialog with a backdrop, title header, optional
+ * header actions, and a flexible body. Renders into a React portal on
+ * `document.body`, animates in/out with Framer Motion, closes on Escape
+ * key or backdrop click, and clicks inside the dialog don't propagate
+ * to the backdrop.
+ *
+ * @example
+ * // Basic usage
+ * <Modal open={isOpen} title="Confirm" onClose={() => setIsOpen(false)}>
+ *   <p>Are you sure?</p>
+ * </Modal>
+ *
+ * @example
+ * // With header actions and wide size
+ * <Modal
+ *   open={isOpen}
+ *   title="Edit profile"
+ *   size="wide"
+ *   actions={<button onClick={save}>Save</button>}
+ *   onClose={handleClose}
+ * >
+ *   <ProfileForm />
+ * </Modal>
+ *
+ * @example
+ * // Flush body (no padding) for editors and full-bleed content
+ * <Modal open={isOpen} title="Document" padding={false} onClose={handleClose}>
+ *   <DocEditor content={content} onSave={save} />
+ * </Modal>
+ *
+ * @param {ModalProps} props - The props for the Modal component
+ * @returns {React.ReactPortal | null} A portal rendering the modal, or null on the server
+ */
+const Modal = ({ open, title, onClose, children, size = 'default', actions, padding = true, }) => {
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [open, onClose]);
+    if (typeof document === 'undefined')
+        return null;
+    const dialogClass = [
+        styles$r.dialog,
+        size === 'compact' && styles$r.dialogCompact,
+        size === 'wide' && styles$r.dialogWide,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return createPortal(jsx(AnimatePresence, { children: open && (jsx(motion.div, { className: styles$r.backdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, onClick: onClose, "aria-hidden": "true", children: jsxs(motion.div, { className: dialogClass, role: "dialog", "aria-modal": "true", "aria-label": title, initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.96, y: 8 }, transition: { duration: 0.15, ease: 'easeOut' }, onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: styles$r.header, children: [jsx("span", { className: styles$r.title, children: title }), actions && jsx("div", { className: styles$r.headerActions, children: actions }), jsx("button", { className: styles$r.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsx(X, { size: 16 }) })] }), jsx("div", { className: padding ? styles$r.body : styles$r.bodyFlush, children: children })] }) })) }), document.body);
+};
+
 var styles$q = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
 
 /**
@@ -5128,5 +5233,5 @@ function formatValue(value) {
 // Memoized Table component to prevent unnecessary re-renders
 const Table = memo(TableComponent);
 
-export { ArrayInput, BooleansHeatmap, Button, Calendar, Card, Checkbox, DateInput, EditFAB, ImageSlideshow, LoadingSpinner, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, Slider, SunburstChart, Table, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, soundManager, useComponentSound, useSound, useTheme$1 as useTheme };
+export { ArrayInput, BooleansHeatmap, Button, Calendar, Card, Checkbox, DateInput, EditFAB, EmptyState, ImageSlideshow, LoadingSpinner, Modal, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, Slider, SunburstChart, Table, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, soundManager, useComponentSound, useSound, useTheme$1 as useTheme };
 //# sourceMappingURL=index.esm.js.map