@papernote/ui 1.3.1 → 1.6.0

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * Core types for notebook-ui library
  */
+import type { QueryTransparencyInfo } from '../components/QueryTransparency';
 /**
  * Base interface for all data items that can be displayed in tables
  */
@@ -19,6 +20,7 @@ export interface PaginationResponse<T = BaseDataItem> {
     pageSize: number;
     executedQuery?: string;
     executionTimeMs?: number;
+    queryInfo?: QueryTransparencyInfo;
 }
 /**
  * Parameters for fetching paginated data

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,YAAY;IAClD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,YAAY;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,YAAY;IAClD,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,YAAY;IAClD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,YAAY;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,YAAY;IAClD,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.3.1",
+  "version": "1.6.0",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/ActionBar.stories.tsx

@@ -0,0 +1,246 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ActionBar from './ActionBar';
+import Text from './Text';
+import Button from './Button';
+import { Download, Trash2, Archive, Tag, Mail, Copy, X, Search, Filter } from 'lucide-react';
+
+const meta: Meta<typeof ActionBar> = {
+  title: 'Layout/ActionBar',
+  component: ActionBar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A flexible toolbar component for page-level and contextual actions. Use for bulk actions, form buttons, or any contextual toolbar needs.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionBar>;
+
+export const Default: Story = {
+  args: {
+    leftContent: <Text weight="medium">3 items selected</Text>,
+    actions: [
+      { id: 'export', label: 'Export', icon: <Download className="h-4 w-4" />, onClick: () => alert('Export') },
+      { id: 'delete', label: 'Delete', icon: <Trash2 className="h-4 w-4" />, onClick: () => alert('Delete'), variant: 'danger' },
+    ],
+  },
+};
+
+export const BulkActions: Story = {
+  args: {
+    leftContent: <Text weight="medium">12 items selected</Text>,
+    actions: [
+      { id: 'archive', label: 'Archive', icon: <Archive className="h-4 w-4" />, onClick: () => {} },
+      { id: 'tag', label: 'Add Tag', icon: <Tag className="h-4 w-4" />, onClick: () => {} },
+      { id: 'export', label: 'Export', icon: <Download className="h-4 w-4" />, onClick: () => {} },
+      { id: 'delete', label: 'Delete', icon: <Trash2 className="h-4 w-4" />, onClick: () => {}, variant: 'danger' },
+    ],
+    showDismiss: true,
+    onDismiss: () => alert('Selection cleared'),
+  },
+};
+
+export const WithDismiss: Story = {
+  args: {
+    leftContent: <Text weight="medium">5 emails selected</Text>,
+    actions: [
+      { id: 'reply', label: 'Reply All', icon: <Mail className="h-4 w-4" />, onClick: () => {} },
+      { id: 'archive', label: 'Archive', icon: <Archive className="h-4 w-4" />, onClick: () => {} },
+      { id: 'delete', label: 'Delete', icon: <Trash2 className="h-4 w-4" />, onClick: () => {}, variant: 'danger' },
+    ],
+    showDismiss: true,
+    onDismiss: () => alert('Dismissed'),
+  },
+};
+
+export const FormActions: Story = {
+  args: {
+    position: 'bottom',
+    rightContent: (
+      <>
+        <Button variant="ghost" onClick={() => alert('Cancel')}>Cancel</Button>
+        <Button variant="primary" onClick={() => alert('Save')}>Save Changes</Button>
+      </>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: '300px', display: 'flex', flexDirection: 'column' }}>
+        <div className="flex-1 p-6 bg-paper-50">
+          <Text>Form content goes here...</Text>
+        </div>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const StickyBottom: Story = {
+  args: {
+    position: 'bottom',
+    sticky: true,
+    rightContent: (
+      <>
+        <Button variant="ghost" onClick={() => {}}>Discard</Button>
+        <Button variant="secondary" onClick={() => {}}>Save Draft</Button>
+        <Button variant="primary" onClick={() => {}}>Publish</Button>
+      </>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: '150vh' }}>
+        <div className="p-6">
+          <Text size="lg" weight="bold">Scroll down to see sticky bottom bar</Text>
+          <div className="mt-4 space-y-4">
+            {Array.from({ length: 15 }).map((_, i) => (
+              <div key={i} className="p-4 bg-paper-100 rounded-lg">
+                Form field {i + 1}
+              </div>
+            ))}
+          </div>
+        </div>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const InfoVariant: Story = {
+  args: {
+    variant: 'info',
+    centerContent: <Text size="sm">Showing 42 results for "wireless headphones"</Text>,
+    showDismiss: true,
+    onDismiss: () => alert('Clear search'),
+  },
+};
+
+export const WarningVariant: Story = {
+  args: {
+    variant: 'warning',
+    leftContent: <Text size="sm" weight="medium">You have unsaved changes</Text>,
+    actions: [
+      { id: 'discard', label: 'Discard', onClick: () => {}, variant: 'ghost' },
+      { id: 'save', label: 'Save Now', onClick: () => {}, variant: 'primary' },
+    ],
+  },
+};
+
+export const PrimaryVariant: Story = {
+  args: {
+    variant: 'primary',
+    leftContent: <Text size="sm" weight="medium">Batch operation ready</Text>,
+    actions: [
+      { id: 'cancel', label: 'Cancel', onClick: () => {}, variant: 'ghost' },
+      { id: 'execute', label: 'Execute', onClick: () => {}, variant: 'primary' },
+    ],
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    compact: true,
+    leftContent: <Text size="sm">Quick actions</Text>,
+    actions: [
+      { id: 'copy', label: 'Copy', icon: <Copy className="h-4 w-4" />, onClick: () => {} },
+      { id: 'delete', label: 'Delete', icon: <Trash2 className="h-4 w-4" />, onClick: () => {}, variant: 'danger' },
+    ],
+  },
+};
+
+export const WithCenterContent: Story = {
+  args: {
+    leftContent: <Text size="sm" color="muted">Page 1 of 10</Text>,
+    centerContent: (
+      <div className="flex items-center gap-2">
+        <Search className="h-4 w-4 text-ink-400" />
+        <Text size="sm">Filtered by: Active users</Text>
+      </div>
+    ),
+    actions: [
+      { id: 'filter', label: 'Edit Filters', icon: <Filter className="h-4 w-4" />, onClick: () => {} },
+    ],
+  },
+};
+
+export const LoadingAction: Story = {
+  args: {
+    leftContent: <Text weight="medium">Processing 50 items...</Text>,
+    actions: [
+      { id: 'cancel', label: 'Cancel', onClick: () => {}, variant: 'ghost' },
+      { id: 'processing', label: 'Processing...', onClick: () => {}, variant: 'primary', loading: true },
+    ],
+  },
+};
+
+export const Hidden: Story = {
+  args: {
+    visible: false,
+    leftContent: <Text>This bar is hidden</Text>,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The ActionBar can be conditionally shown/hidden using the `visible` prop. This is useful for showing bulk action bars only when items are selected.',
+      },
+    },
+  },
+};
+
+export const ConditionalDisplay: Story = {
+  render: () => {
+    const selectedCount = 3; // Simulated selection
+    return (
+      <div>
+        <ActionBar
+          visible={selectedCount > 0}
+          leftContent={<Text weight="medium">{selectedCount} items selected</Text>}
+          actions={[
+            { id: 'export', label: 'Export', icon: <Download className="h-4 w-4" />, onClick: () => {} },
+            { id: 'delete', label: 'Delete', icon: <Trash2 className="h-4 w-4" />, onClick: () => {}, variant: 'danger' },
+          ]}
+          showDismiss
+          onDismiss={() => {}}
+        />
+        <div className="p-6">
+          <Text color="muted">
+            The ActionBar above appears when items are selected. 
+            In a real app, clicking dismiss would clear the selection and hide the bar.
+          </Text>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const MultipleRows: Story = {
+  render: () => (
+    <div>
+      <ActionBar
+        leftContent={<Text size="sm" weight="medium">Filters: Category = Electronics, Status = Active</Text>}
+        actions={[
+          { id: 'clear', label: 'Clear All', onClick: () => {}, variant: 'ghost' },
+        ]}
+        compact
+      />
+      <ActionBar
+        variant="primary"
+        leftContent={<Text size="sm" weight="medium">8 items selected</Text>}
+        actions={[
+          { id: 'export', label: 'Export', icon: <Download className="h-4 w-4" />, onClick: () => {} },
+          { id: 'delete', label: 'Delete', icon: <Trash2 className="h-4 w-4" />, onClick: () => {}, variant: 'danger' },
+        ]}
+        showDismiss
+        onDismiss={() => {}}
+      />
+      <div className="p-6">
+        <Text color="muted">Multiple ActionBars can be stacked for different purposes.</Text>
+      </div>
+    </div>
+  ),
+};

package/src/components/ActionBar.tsx

@@ -0,0 +1,242 @@
+import { ReactNode } from 'react';
+import { X } from 'lucide-react';
+
+export interface ActionBarAction {
+  /** Unique identifier for the action */
+  id: string;
+  /** Button label text */
+  label: string;
+  /** Icon to display (from lucide-react) */
+  icon?: ReactNode;
+  /** Click handler */
+  onClick: () => void;
+  /** Button variant */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+  /** Disabled state */
+  disabled?: boolean;
+  /** Loading state */
+  loading?: boolean;
+}
+
+export interface ActionBarProps {
+  /** Content to display on the left side (e.g., selection count, status text) */
+  leftContent?: ReactNode;
+  /** Content to display in the center */
+  centerContent?: ReactNode;
+  /** Content to display on the right side (overrides actions) */
+  rightContent?: ReactNode;
+  /** Action buttons to display on the right */
+  actions?: ActionBarAction[];
+  /** Position of the action bar */
+  position?: 'top' | 'bottom';
+  /** Make the bar sticky */
+  sticky?: boolean;
+  /** Show the action bar (useful for conditional display like bulk selection) */
+  visible?: boolean;
+  /** Callback when close/dismiss button is clicked */
+  onDismiss?: () => void;
+  /** Show dismiss button */
+  showDismiss?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Background variant */
+  variant?: 'default' | 'primary' | 'warning' | 'info';
+  /** Compact mode with less padding */
+  compact?: boolean;
+}
+
+/**
+ * ActionBar - Flexible toolbar for page-level and contextual actions
+ *
+ * A versatile action container that can be used for:
+ * - Bulk actions when rows are selected
+ * - Page-level actions and controls
+ * - Form action buttons (Save/Cancel)
+ * - Contextual toolbars
+ *
+ * @example Basic bulk actions bar
+ * ```tsx
+ * <ActionBar
+ *   visible={selectedIds.length > 0}
+ *   leftContent={<Text weight="medium">{selectedIds.length} selected</Text>}
+ *   actions={[
+ *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport },
+ *     { id: 'delete', label: 'Delete', icon: <Trash />, onClick: handleDelete, variant: 'danger' },
+ *   ]}
+ *   onDismiss={() => setSelectedIds([])}
+ *   showDismiss
+ * />
+ * ```
+ *
+ * @example Sticky bottom form actions
+ * ```tsx
+ * <ActionBar
+ *   position="bottom"
+ *   sticky
+ *   rightContent={
+ *     <>
+ *       <Button variant="ghost" onClick={handleCancel}>Cancel</Button>
+ *       <Button variant="primary" onClick={handleSave} loading={isSaving}>Save Changes</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @example Info bar with center content
+ * ```tsx
+ * <ActionBar
+ *   variant="info"
+ *   centerContent={
+ *     <Text size="sm">Showing results for "search term" - 42 items found</Text>
+ *   }
+ *   onDismiss={clearSearch}
+ *   showDismiss
+ * />
+ * ```
+ */
+export default function ActionBar({
+  leftContent,
+  centerContent,
+  rightContent,
+  actions,
+  position = 'top',
+  sticky = false,
+  visible = true,
+  onDismiss,
+  showDismiss = false,
+  className = '',
+  variant = 'default',
+  compact = false,
+}: ActionBarProps) {
+  if (!visible) {
+    return null;
+  }
+
+  const variantStyles = {
+    default: 'bg-white border-paper-200',
+    primary: 'bg-accent-50 border-accent-200',
+    warning: 'bg-warning-50 border-warning-200',
+    info: 'bg-blue-50 border-blue-200',
+  };
+
+  const buttonVariantStyles: Record<string, string> = {
+    primary: 'bg-accent-500 text-white border-accent-500 hover:bg-accent-600 hover:shadow-sm',
+    secondary: 'bg-white text-ink-700 border-paper-300 hover:bg-paper-50 hover:border-paper-400 shadow-xs hover:shadow-sm',
+    ghost: 'bg-transparent text-ink-600 border-transparent hover:text-ink-800 hover:bg-paper-100',
+    danger: 'bg-error-500 text-white border-error-500 hover:bg-error-600 hover:shadow-sm',
+    outline: 'bg-transparent text-ink-700 border-paper-300 hover:bg-paper-50 hover:border-ink-400',
+  };
+
+  const positionStyles = {
+    top: sticky ? 'sticky top-0 z-40 border-b' : 'border-b',
+    bottom: sticky ? 'sticky bottom-0 z-40 border-t' : 'border-t',
+  };
+
+  return (
+    <div
+      className={`
+        ${variantStyles[variant]}
+        ${positionStyles[position]}
+        ${compact ? 'px-4 py-2' : 'px-6 py-3'}
+        ${className}
+      `}
+      role="toolbar"
+      aria-label="Action bar"
+    >
+      <div className="flex items-center justify-between gap-4">
+        {/* Left section */}
+        <div className="flex items-center gap-3 min-w-0 flex-shrink-0">
+          {showDismiss && onDismiss && (
+            <button
+              onClick={onDismiss}
+              className="
+                flex items-center justify-center
+                w-8 h-8 rounded-full
+                text-ink-400 hover:text-ink-600
+                hover:bg-paper-100
+                transition-colors
+              "
+              aria-label="Dismiss"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+          {leftContent}
+        </div>
+
+        {/* Center section */}
+        {centerContent && (
+          <div className="flex-1 flex items-center justify-center min-w-0">
+            {centerContent}
+          </div>
+        )}
+
+        {/* Right section */}
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {rightContent}
+          {actions && actions.map((action) => (
+            <button
+              key={action.id}
+              onClick={action.onClick}
+              disabled={action.disabled || action.loading}
+              className={`
+                inline-flex items-center justify-center gap-2
+                px-3 py-1.5 text-sm font-medium rounded-lg border
+                transition-all duration-200
+                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400
+                disabled:opacity-40 disabled:cursor-not-allowed
+                ${buttonVariantStyles[action.variant || 'secondary']}
+              `}
+            >
+              {action.loading ? (
+                <svg
+                  className="h-4 w-4 animate-spin"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  />
+                </svg>
+              ) : action.icon ? (
+                <span className="h-4 w-4">{action.icon}</span>
+              ) : null}
+              <span>{action.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ActionBar.Left - Semantic wrapper for left content
+ */
+export function ActionBarLeft({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
+
+/**
+ * ActionBar.Center - Semantic wrapper for center content
+ */
+export function ActionBarCenter({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
+
+/**
+ * ActionBar.Right - Semantic wrapper for right content
+ */
+export function ActionBarRight({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

package/src/components/BottomNavigation.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Home, Search, Bell, User, Plus, Settings } from 'lucide-react';
+import BottomNavigation, { BottomNavigationSpacer } from './BottomNavigation';
+
+const meta: Meta<typeof BottomNavigation> = {
+  title: 'Mobile/BottomNavigation',
+  component: BottomNavigation,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+    docs: {
+      description: {
+        component: 'iOS/Android-style fixed bottom navigation bar with icons, labels, and badges.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ minHeight: '100vh', paddingBottom: '80px', background: '#f5f5f4' }}>
+        <div style={{ padding: '16px' }}>
+          <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>Page Content</h1>
+          <p style={{ color: '#666' }}>Scroll down to see the bottom navigation stays fixed.</p>
+          {Array.from({ length: 20 }).map((_, i) => (
+            <div key={i} style={{ padding: '16px', margin: '8px 0', background: 'white', borderRadius: '8px' }}>
+              Item {i + 1}
+            </div>
+          ))}
+        </div>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof BottomNavigation>;
+
+const defaultItems = [
+  { id: 'home', label: 'Home', icon: <Home className="w-6 h-6" />, href: '/' },
+  { id: 'search', label: 'Search', icon: <Search className="w-6 h-6" />, href: '/search' },
+  { id: 'notifications', label: 'Alerts', icon: <Bell className="w-6 h-6" />, badge: 3 },
+  { id: 'profile', label: 'Profile', icon: <User className="w-6 h-6" />, href: '/profile' },
+];
+
+export const Default: Story = {
+  args: {
+    items: defaultItems,
+    activeId: 'home',
+    onNavigate: (id, href) => console.log('Navigate:', id, href),
+  },
+};
+
+export const WithBadges: Story = {
+  args: {
+    items: [
+      { id: 'home', label: 'Home', icon: <Home className="w-6 h-6" /> },
+      { id: 'search', label: 'Search', icon: <Search className="w-6 h-6" /> },
+      { id: 'notifications', label: 'Alerts', icon: <Bell className="w-6 h-6" />, badge: 12 },
+      { id: 'profile', label: 'Profile', icon: <User className="w-6 h-6" />, badge: 99 },
+    ],
+    activeId: 'notifications',
+    onNavigate: (id) => console.log('Navigate:', id),
+  },
+};
+
+export const LargeBadge: Story = {
+  args: {
+    items: [
+      { id: 'home', label: 'Home', icon: <Home className="w-6 h-6" /> },
+      { id: 'notifications', label: 'Alerts', icon: <Bell className="w-6 h-6" />, badge: 150 },
+      { id: 'profile', label: 'Profile', icon: <User className="w-6 h-6" /> },
+    ],
+    activeId: 'home',
+  },
+};
+
+export const FiveItems: Story = {
+  args: {
+    items: [
+      { id: 'home', label: 'Home', icon: <Home className="w-6 h-6" /> },
+      { id: 'search', label: 'Search', icon: <Search className="w-6 h-6" /> },
+      { id: 'add', label: 'Add', icon: <Plus className="w-6 h-6" /> },
+      { id: 'notifications', label: 'Alerts', icon: <Bell className="w-6 h-6" />, badge: 5 },
+      { id: 'settings', label: 'Settings', icon: <Settings className="w-6 h-6" /> },
+    ],
+    activeId: 'home',
+  },
+};
+
+export const WithoutLabels: Story = {
+  args: {
+    items: defaultItems,
+    activeId: 'home',
+    showLabels: false,
+  },
+};
+
+export const WithDisabledItem: Story = {
+  args: {
+    items: [
+      { id: 'home', label: 'Home', icon: <Home className="w-6 h-6" /> },
+      { id: 'search', label: 'Search', icon: <Search className="w-6 h-6" />, disabled: true },
+      { id: 'notifications', label: 'Alerts', icon: <Bell className="w-6 h-6" /> },
+      { id: 'profile', label: 'Profile', icon: <User className="w-6 h-6" /> },
+    ],
+    activeId: 'home',
+  },
+};
+
+export const WithClickHandlers: Story = {
+  args: {
+    items: [
+      { id: 'home', label: 'Home', icon: <Home className="w-6 h-6" />, onClick: () => alert('Home clicked!') },
+      { id: 'add', label: 'Add', icon: <Plus className="w-6 h-6" />, onClick: () => alert('Add clicked!') },
+      { id: 'profile', label: 'Profile', icon: <User className="w-6 h-6" />, onClick: () => alert('Profile clicked!') },
+    ],
+    activeId: 'home',
+  },
+};
+
+export const SpacerExample: Story = {
+  render: () => (
+    <div style={{ minHeight: '100vh', background: '#f5f5f4' }}>
+      <div style={{ padding: '16px' }}>
+        <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>With Spacer</h1>
+        <p>The spacer prevents content from being hidden behind the navigation.</p>
+        {Array.from({ length: 10 }).map((_, i) => (
+          <div key={i} style={{ padding: '16px', margin: '8px 0', background: 'white', borderRadius: '8px' }}>
+            Content Item {i + 1}
+          </div>
+        ))}
+        <BottomNavigationSpacer />
+      </div>
+      <BottomNavigation
+        items={defaultItems}
+        activeId="home"
+      />
+    </div>
+  ),
+};