@papernote/ui 1.3.0 → 1.5.0

package/dist/components/ExpandablePanel.d.ts

@@ -0,0 +1,142 @@
+import { ReactNode } from 'react';
+export interface ExpandablePanelProps {
+    /** Content shown in the collapsed header bar */
+    collapsedContent: ReactNode;
+    /** Full content shown when expanded */
+    children: ReactNode;
+    /** Position of the panel */
+    position?: 'bottom' | 'top';
+    /**
+     * Positioning mode:
+     * - 'viewport': Fixed to viewport edges (default, for standalone use)
+     * - 'container': Sticky within parent container (for use inside Page/AppLayout)
+     */
+    mode?: 'viewport' | 'container';
+    /** Whether the panel is expanded (controlled) */
+    expanded?: boolean;
+    /** Default expanded state (uncontrolled) */
+    defaultExpanded?: boolean;
+    /** Callback when expanded state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Height when expanded */
+    expandedHeight?: string | number;
+    /**
+     * Maximum width of the panel (e.g., '1400px', '80%', 1200)
+     * When set, the panel will be centered horizontally within its container/viewport
+     */
+    maxWidth?: string | number;
+    /** Whether to show the expand/collapse toggle button */
+    showToggle?: boolean;
+    /** Custom toggle button content */
+    toggleContent?: ReactNode;
+    /** Additional actions to show in the header (right side) */
+    headerActions?: ReactNode;
+    /** Close on Escape key */
+    closeOnEscape?: boolean;
+    /** Visual variant */
+    variant?: 'default' | 'elevated' | 'bordered';
+    /** Size variant affecting header height */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Additional CSS classes for the header */
+    headerClassName?: string;
+    /** Additional CSS classes for the content */
+    contentClassName?: string;
+    /** Z-index for the panel (only applies in viewport mode) */
+    zIndex?: number;
+}
+/**
+ * ExpandablePanel - A panel that sticks to the bottom (or top) and can expand/collapse
+ *
+ * For bottom position: expands UPWARD (content appears above header)
+ * For top position: expands DOWNWARD (content appears below header)
+ *
+ * Two modes of operation:
+ * - `viewport`: Fixed to the viewport (for standalone pages, covers StatusBar)
+ * - `container`: Sticky within its parent container (for use inside Page/AppLayout, respects StatusBar)
+ *
+ * @example Basic usage (viewport mode - full page)
+ * ```tsx
+ * <ExpandablePanel
+ *   mode="viewport"
+ *   collapsedContent={<Text>3 items selected</Text>}
+ *   expandedHeight="300px"
+ * >
+ *   {content}
+ * </ExpandablePanel>
+ * ```
+ *
+ * @example Inside Page/AppLayout (container mode - respects StatusBar)
+ * ```tsx
+ * <Page>
+ *   <ExpandablePanelContainer>
+ *     <div className="flex-1 overflow-auto">
+ *       {pageContent}
+ *     </div>
+ *     <ExpandablePanel
+ *       mode="container"
+ *       collapsedContent={<Text>3 items selected</Text>}
+ *       expandedHeight="300px"
+ *     >
+ *       {selectedItemsContent}
+ *     </ExpandablePanel>
+ *   </ExpandablePanelContainer>
+ * </Page>
+ * ```
+ *
+ * @example With maxWidth to match page content
+ * ```tsx
+ * <ExpandablePanel
+ *   mode="container"
+ *   maxWidth="1400px"
+ *   collapsedContent={<Text>Generated SQL</Text>}
+ *   expandedHeight="300px"
+ * >
+ *   {sqlContent}
+ * </ExpandablePanel>
+ * ```
+ */
+export default function ExpandablePanel({ collapsedContent, children, position, mode, expanded: controlledExpanded, defaultExpanded, onExpandedChange, expandedHeight, maxWidth, showToggle, toggleContent, headerActions, closeOnEscape, variant, size, className, headerClassName, contentClassName, zIndex, }: ExpandablePanelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ExpandablePanelSpacer - Adds spacing to prevent content from being hidden behind the panel
+ * Only needed in viewport mode. In container mode, the panel is part of the flex layout.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <MainContent />
+ *   <ExpandablePanelSpacer size="md" />
+ * </div>
+ * <ExpandablePanel mode="viewport" position="bottom" size="md" {...props} />
+ * ```
+ */
+export declare function ExpandablePanelSpacer({ size }: {
+    size?: 'sm' | 'md' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * ExpandablePanelContainer - Wrapper that sets up proper layout for container mode
+ * Use this to wrap your page content when using ExpandablePanel with mode="container"
+ *
+ * This creates a relative container with full height so the panel can position absolutely
+ * at the bottom while the content scrolls above it.
+ *
+ * @example
+ * ```tsx
+ * <Page>
+ *   <ExpandablePanelContainer>
+ *     <div className="flex-1 overflow-auto p-4">
+ *       {pageContent}
+ *     </div>
+ *     <ExpandablePanel mode="container" {...props}>
+ *       {panelContent}
+ *     </ExpandablePanel>
+ *   </ExpandablePanelContainer>
+ * </Page>
+ * ```
+ */
+export declare function ExpandablePanelContainer({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExpandablePanel.d.ts.map

package/dist/components/ExpandablePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandablePanel.d.ts","sourceRoot":"","sources":["../../src/components/ExpandablePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,gBAAgB,EAAE,SAAS,CAAC;IAC5B,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mCAAmC;IACnC,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,0BAA0B;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9C,2CAA2C;IAC3C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,gBAAgB,EAChB,QAAQ,EACR,QAAmB,EACnB,IAAiB,EACjB,QAAQ,EAAE,kBAAkB,EAC5B,eAAuB,EACvB,gBAAgB,EAChB,cAAwB,EACxB,QAAQ,EACR,UAAiB,EACjB,aAAa,EACb,aAAa,EACb,aAAoB,EACpB,OAAoB,EACpB,IAAW,EACX,SAAc,EACd,eAAoB,EACpB,gBAAqB,EACrB,MAAW,GACZ,EAAE,oBAAoB,2CAqKtB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,IAAW,EACZ,EAAE;IACD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B,2CAQA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,SAAc,GACf,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAMA"}

package/dist/components/FloatingActionButton.d.ts

@@ -0,0 +1,98 @@
+import React from 'react';
+/**
+ * Action item for FAB menu
+ */
+export interface FABAction {
+    /** Unique identifier */
+    id: string;
+    /** Icon for the action */
+    icon: React.ReactNode;
+    /** Label text (shown on hover/long-press) */
+    label: string;
+    /** Click handler */
+    onClick: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * FloatingActionButton component props
+ */
+export interface FloatingActionButtonProps {
+    /** Primary action when FAB is clicked (without menu) */
+    onClick?: () => void;
+    /** Icon for the FAB - defaults to Plus */
+    icon?: React.ReactNode;
+    /** Secondary actions shown in menu */
+    actions?: FABAction[];
+    /** Position on screen */
+    position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+    /** Color variant */
+    variant?: 'primary' | 'secondary' | 'accent';
+    /** Size */
+    size?: 'md' | 'lg';
+    /** Accessible label */
+    label?: string;
+    /** Extended FAB with text label */
+    extended?: boolean;
+    /** Text for extended FAB */
+    extendedLabel?: string;
+    /** Hide FAB (useful for scroll-based show/hide) */
+    hidden?: boolean;
+    /** Custom offset from edge (in pixels) */
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * FloatingActionButton - Material Design style FAB for mobile
+ *
+ * A prominent button for the primary action on a screen.
+ * Supports single action or expandable menu with multiple actions.
+ *
+ * @example Simple FAB
+ * ```tsx
+ * <FloatingActionButton
+ *   onClick={() => openCreateModal()}
+ *   label="Create new item"
+ * />
+ * ```
+ *
+ * @example FAB with action menu
+ * ```tsx
+ * <FloatingActionButton
+ *   actions={[
+ *     { id: 'photo', icon: <Camera />, label: 'Take Photo', onClick: takePhoto },
+ *     { id: 'upload', icon: <Upload />, label: 'Upload File', onClick: uploadFile },
+ *     { id: 'note', icon: <FileText />, label: 'Create Note', onClick: createNote },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Extended FAB
+ * ```tsx
+ * <FloatingActionButton
+ *   extended
+ *   extendedLabel="New Task"
+ *   icon={<Plus />}
+ *   onClick={createTask}
+ * />
+ * ```
+ */
+export default function FloatingActionButton({ onClick, icon, actions, position, variant, size, label, extended, extendedLabel, hidden, offset, className, }: FloatingActionButtonProps): React.ReactPortal;
+/**
+ * Hook for scroll-based FAB visibility
+ *
+ * @example
+ * ```tsx
+ * const { hidden, scrollDirection } = useFABScroll();
+ * <FloatingActionButton hidden={hidden} />
+ * ```
+ */
+export declare function useFABScroll(threshold?: number): {
+    hidden: boolean;
+    scrollDirection: 'up' | 'down' | null;
+};
+//# sourceMappingURL=FloatingActionButton.d.ts.map

package/dist/components/FloatingActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingActionButton.d.ts","sourceRoot":"","sources":["../../src/components/FloatingActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,CAAC;IAC5D,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAyB,EACzB,OAAmB,EACnB,IAAW,EACX,KAAuB,EACvB,QAAgB,EAChB,aAAa,EACb,MAAc,EACd,MAAM,EACN,SAAc,GACf,EAAE,yBAAyB,qBA8I3B;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,SAAS,SAAK,GAAG;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,eAAe,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;CAAE,CA2BvG"}

package/dist/components/Input.d.ts

@@ -6,7 +6,7 @@ export type ValidationState = 'error' | 'success' | 'warning' | null;
 /**
  * Input component props
  */
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** Input label text */
     label?: string;
     /** Helper text displayed below input */
@@ -37,6 +37,31 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     onClear?: () => void;
     /** Show loading spinner in input */
     loading?: boolean;
+    /**
+     * Input mode hint for mobile keyboards.
+     * 'none' - No virtual keyboard
+     * 'text' - Standard text keyboard (default)
+     * 'decimal' - Decimal number keyboard
+     * 'numeric' - Numeric keyboard
+     * 'tel' - Telephone keypad
+     * 'search' - Search optimized keyboard
+     * 'email' - Email optimized keyboard
+     * 'url' - URL optimized keyboard
+     */
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /**
+     * Enter key hint for mobile keyboards.
+     * 'enter' - Standard enter key
+     * 'done' - Done action
+     * 'go' - Go/navigate action
+     * 'next' - Move to next field
+     * 'previous' - Move to previous field
+     * 'search' - Search action
+     * 'send' - Send action
+     */
+    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    /** Size variant - 'md' is default, 'lg' provides larger touch target (44px min) */
+    size?: 'sm' | 'md' | 'lg';
 }
 /**
  * Input - Text input component with validation, icons, and prefixes/suffixes
@@ -44,12 +69,19 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
  * A feature-rich text input with support for validation states, character counting,
  * password visibility toggle, prefix/suffix text and icons, and clearable functionality.
  *
+ * Mobile optimizations:
+ * - inputMode prop for appropriate mobile keyboard
+ * - enterKeyHint prop for mobile keyboard action button
+ * - Size variants with touch-friendly targets (44px for 'lg')
+ *
  * @example Basic input with label
  * ```tsx
  * <Input
  *   label="Email"
  *   type="email"
  *   placeholder="Enter your email"
+ *   inputMode="email"
+ *   enterKeyHint="next"
  * />
  * ```
  *
@@ -75,11 +107,23 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
  * />
  * ```
  *
+ * @example Mobile-optimized phone input
+ * ```tsx
+ * <Input
+ *   label="Phone Number"
+ *   type="tel"
+ *   inputMode="tel"
+ *   enterKeyHint="done"
+ *   size="lg"
+ * />
+ * ```
+ *
  * @example With prefix/suffix
  * ```tsx
  * <Input
  *   label="Amount"
  *   type="number"
+ *   inputMode="decimal"
  *   prefixIcon={<DollarSign />}
  *   suffix="USD"
  *   clearable

package/dist/components/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,QAAA,MAAM,KAAK,qFAoOV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IACjF,mFAAmF;IACnF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,QAAA,MAAM,KAAK,qFAmQV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/components/MobileHeader.d.ts

@@ -0,0 +1,98 @@
+import React from 'react';
+/**
+ * MobileHeader component props
+ */
+export interface MobileHeaderProps {
+    /** Page/section title */
+    title: string;
+    /** Subtitle or breadcrumb text */
+    subtitle?: string;
+    /** Handler for menu button click (hamburger) */
+    onMenuClick?: () => void;
+    /** Handler for back button click - shows back arrow instead of menu */
+    onBackClick?: () => void;
+    /** Handler for close button click - shows X instead of menu */
+    onCloseClick?: () => void;
+    /** Right side action element (button, icon, etc.) */
+    rightAction?: React.ReactNode;
+    /** Left side action element (overrides menu/back/close buttons) */
+    leftAction?: React.ReactNode;
+    /** Make header sticky at top */
+    sticky?: boolean;
+    /** Show border at bottom */
+    bordered?: boolean;
+    /** Background style */
+    variant?: 'solid' | 'transparent' | 'blur';
+    /** Additional CSS classes */
+    className?: string;
+    /** Safe area handling for notched devices */
+    safeArea?: boolean;
+}
+/**
+ * MobileHeader - Mobile app header with navigation controls
+ *
+ * A flexible mobile header component with support for:
+ * - Hamburger menu button (default)
+ * - Back navigation arrow
+ * - Close button (X)
+ * - Custom left/right actions
+ * - Sticky positioning
+ * - Blur/transparent variants
+ *
+ * @example Basic with menu button
+ * ```tsx
+ * <MobileHeader
+ *   title="Dashboard"
+ *   onMenuClick={() => setDrawerOpen(true)}
+ * />
+ * ```
+ *
+ * @example With back button
+ * ```tsx
+ * <MobileHeader
+ *   title="User Details"
+ *   subtitle="Profile"
+ *   onBackClick={() => navigate(-1)}
+ * />
+ * ```
+ *
+ * @example With right action
+ * ```tsx
+ * <MobileHeader
+ *   title="Settings"
+ *   onMenuClick={openMenu}
+ *   rightAction={
+ *     <Button variant="ghost" iconOnly onClick={save}>
+ *       <Check className="w-5 h-5" />
+ *     </Button>
+ *   }
+ * />
+ * ```
+ *
+ * @example Transparent with blur
+ * ```tsx
+ * <MobileHeader
+ *   title="Photo Gallery"
+ *   variant="blur"
+ *   onBackClick={goBack}
+ * />
+ * ```
+ */
+export default function MobileHeader({ title, subtitle, onMenuClick, onBackClick, onCloseClick, rightAction, leftAction, sticky, bordered, variant, className, safeArea, }: MobileHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * MobileHeaderSpacer - Spacer to prevent content from being hidden behind sticky MobileHeader
+ *
+ * Place this at the top of your content when NOT using sticky header
+ * to maintain consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <MobileHeader title="Page" sticky={false} />
+ * <MobileHeaderSpacer />
+ * <main>Content here</main>
+ * ```
+ */
+export declare function MobileHeaderSpacer({ safeArea }: {
+    safeArea?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MobileHeader.d.ts.map

package/dist/components/MobileHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileHeader.d.ts","sourceRoot":"","sources":["../../src/components/MobileHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,mEAAmE;IACnE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,CAAC;IAC3C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,MAAa,EACb,QAAe,EACf,OAAiB,EACjB,SAAc,EACd,QAAe,GAChB,EAAE,iBAAiB,2CAkHnB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,QAAe,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,2CAO7E"}

package/dist/components/MobileLayout.d.ts

@@ -0,0 +1,121 @@
+import React from 'react';
+import { SidebarItem } from './Sidebar';
+import { MobileHeaderProps } from './MobileHeader';
+import { BottomNavItem } from './BottomNavigation';
+export interface Section {
+    /** Unique identifier for the section */
+    id: string;
+    /** Display label for the section in navigation */
+    label: string;
+}
+export interface MobileLayoutProps {
+    /** Main page content */
+    children: React.ReactNode;
+    /** Sidebar navigation items (required for both desktop sidebar and mobile drawer) */
+    sidebarItems: SidebarItem[];
+    /** Current active path for highlighting */
+    currentPath?: string;
+    /** Handler for navigation clicks */
+    onNavigate?: (href: string) => void;
+    /** Header component for sidebar (logo, branding, etc.) */
+    header?: React.ReactNode;
+    /** User profile button for sidebar footer */
+    userProfile?: React.ReactNode;
+    /** Additional sidebar content */
+    sidebarFooter?: React.ReactNode;
+    /** Title displayed in mobile header (required for mobile layout) */
+    title: string;
+    /** Subtitle displayed in mobile header */
+    subtitle?: string;
+    /** Right action for mobile header */
+    headerRightAction?: React.ReactNode;
+    /** Custom left action for mobile header (overrides menu button) */
+    headerLeftAction?: React.ReactNode;
+    /** Mobile header variant */
+    headerVariant?: MobileHeaderProps['variant'];
+    /** Bottom navigation items for mobile (if not provided, uses sidebarItems) */
+    bottomNavItems?: BottomNavItem[];
+    /** Active bottom nav item ID */
+    activeBottomNavId?: string;
+    /** Show labels on bottom nav */
+    showBottomNavLabels?: boolean;
+    /** Optional status bar component displayed at the bottom (desktop only) */
+    statusBar?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Page sections for navigation dots in desktop gutter */
+    sections?: Section[];
+    /** Force mobile layout even on desktop */
+    forceMobile?: boolean;
+    /** Force desktop layout even on mobile */
+    forceDesktop?: boolean;
+    /** Hide bottom navigation on mobile */
+    hideBottomNav?: boolean;
+    /** Hide mobile header */
+    hideMobileHeader?: boolean;
+    /** Use safe area insets for notched devices */
+    safeArea?: boolean;
+}
+/**
+ * MobileLayout - Auto-responsive layout that switches between desktop and mobile patterns
+ *
+ * This component automatically detects the viewport size and renders the appropriate layout:
+ * - **Desktop** (≥1024px): Standard Layout with sidebar, gutter, and scrollable content
+ * - **Mobile/Tablet** (<1024px): Mobile header, drawer navigation, bottom tab bar
+ *
+ * The mobile layout features:
+ * - Sticky header with hamburger menu to open drawer
+ * - Sidebar rendered as a slide-in drawer
+ * - Bottom navigation bar for primary navigation
+ * - Safe area support for notched devices
+ *
+ * @example Basic usage
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={[
+ *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *     { id: 'tasks', label: 'Tasks', icon: <CheckSquare />, href: '/tasks' },
+ *     { id: 'settings', label: 'Settings', icon: <Settings />, href: '/settings' }
+ *   ]}
+ *   currentPath={location.pathname}
+ *   onNavigate={(href) => navigate(href)}
+ *   title="My App"
+ *   header={<Logo />}
+ *   userProfile={<UserProfileButton user={user} />}
+ * >
+ *   <Page>
+ *     <h1>Dashboard</h1>
+ *   </Page>
+ * </MobileLayout>
+ * ```
+ *
+ * @example With custom bottom nav items
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={fullNavItems}
+ *   bottomNavItems={[
+ *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *     { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
+ *     { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' }
+ *   ]}
+ *   currentPath={location.pathname}
+ *   title="My App"
+ * >
+ *   {children}
+ * </MobileLayout>
+ * ```
+ *
+ * @example Force mobile layout for testing
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={items}
+ *   title="Mobile Preview"
+ *   forceMobile
+ * >
+ *   {children}
+ * </MobileLayout>
+ * ```
+ */
+export declare const MobileLayout: React.FC<MobileLayoutProps>;
+export default MobileLayout;
+//# sourceMappingURL=MobileLayout.d.ts.map

package/dist/components/MobileLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileLayout.d.ts","sourceRoot":"","sources":["../../src/components/MobileLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAgB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACjD,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAyB,EAAE,aAAa,EAA0B,MAAM,oBAAoB,CAAC;AAG7F,MAAM,WAAW,OAAO;IACtB,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,qFAAqF;IACrF,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iCAAiC;IACjC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAGhC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,4BAA4B;IAC5B,aAAa,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAG7C,8EAA8E;IAC9E,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gCAAgC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B,2EAA2E;IAC3E,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+KpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/Modal.d.ts

@@ -8,8 +8,57 @@ export interface ModalProps {
     showCloseButton?: boolean;
     /** Animation variant for modal entrance (default: 'scale') */
     animation?: 'scale' | 'slide-up' | 'slide-down' | 'fade' | 'none';
+    /** Mobile display mode: 'auto' uses BottomSheet on mobile, 'modal' always uses modal, 'sheet' always uses BottomSheet */
+    mobileMode?: 'auto' | 'modal' | 'sheet';
+    /** Height preset for BottomSheet on mobile (default: 'lg') */
+    mobileHeight?: 'sm' | 'md' | 'lg' | 'full';
+    /** Show drag handle on BottomSheet (default: true) */
+    mobileShowHandle?: boolean;
 }
-export default function Modal({ isOpen, onClose, title, children, size, showCloseButton, animation, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Modal - Adaptive dialog component
+ *
+ * On desktop, renders as a centered modal dialog.
+ * On mobile (when mobileMode='auto'), automatically renders as a BottomSheet
+ * for better touch interaction and visibility.
+ *
+ * @example Basic modal
+ * ```tsx
+ * <Modal isOpen={isOpen} onClose={handleClose} title="Edit User">
+ *   <form>...</form>
+ *   <ModalFooter>
+ *     <Button onClick={handleClose}>Cancel</Button>
+ *     <Button variant="primary" onClick={handleSave}>Save</Button>
+ *   </ModalFooter>
+ * </Modal>
+ * ```
+ *
+ * @example Force modal on mobile
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Settings"
+ *   mobileMode="modal"
+ * >
+ *   ...
+ * </Modal>
+ * ```
+ *
+ * @example Always use BottomSheet
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Select Option"
+ *   mobileMode="sheet"
+ *   mobileHeight="md"
+ * >
+ *   ...
+ * </Modal>
+ * ```
+ */
+export default function Modal({ isOpen, onClose, title, children, size, showCloseButton, animation, mobileMode, mobileHeight, mobileShowHandle, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function ModalFooter({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAGxD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;CACnE;AAUD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAsB,EACtB,SAAmB,GACpB,EAAE,UAAU,kDA+FZ;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAMtE"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAKxD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;IAGlE,yHAAyH;IACzH,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IACxC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC3C,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAsB,EACtB,SAAmB,EACnB,UAAmB,EACnB,YAAmB,EACnB,gBAAuB,GACxB,EAAE,UAAU,kDAwHZ;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAMtE"}