@papernote/ui 1.5.0 → 1.7.0

package/dist/styles.css

@@ -1224,6 +1224,10 @@ input:checked + .slider:before{
   pointer-events: auto;
 }
 
+.\!visible{
+  visibility: visible !important;
+}
+
 .visible{
   visibility: visible;
 }
@@ -2118,6 +2122,10 @@ input:checked + .slider:before{
   min-width: 8rem;
 }
 
+.min-w-48{
+  min-width: 12rem;
+}
+
 .min-w-5{
   min-width: 1.25rem;
 }
@@ -2242,6 +2250,14 @@ input:checked + .slider:before{
   border-collapse: collapse;
 }
 
+.origin-bottom{
+  transform-origin: bottom;
+}
+
+.origin-top{
+  transform-origin: top;
+}
+
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3083,6 +3099,11 @@ input:checked + .slider:before{
   border-color: rgb(110 109 94 / var(--tw-border-opacity, 1));
 }
 
+.border-blue-200{
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
+}
+
 .border-blue-500{
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
@@ -3189,11 +3210,21 @@ input:checked + .slider:before{
   border-color: rgb(226 232 240 / 0.8);
 }
 
+.border-stone-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(245 245 244 / var(--tw-border-opacity, 1));
+}
+
 .border-stone-200{
   --tw-border-opacity: 1;
   border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
 }
 
+.border-stone-50{
+  --tw-border-opacity: 1;
+  border-color: rgb(250 250 249 / var(--tw-border-opacity, 1));
+}
+
 .border-success-200{
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
@@ -3317,6 +3348,11 @@ input:checked + .slider:before{
   background-color: rgb(0 0 0 / 0.5);
 }
 
+.bg-blue-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
+
 .bg-current{
   background-color: currentColor;
 }
@@ -3466,6 +3502,16 @@ input:checked + .slider:before{
   background-color: rgb(248 250 252 / 0.8);
 }
 
+.bg-stone-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
+}
+
+.bg-stone-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
+}
+
 .bg-success-100{
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
@@ -4456,6 +4502,10 @@ input:checked + .slider:before{
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-inset{
+  --tw-ring-inset: inset;
+}
+
 .ring-accent-300{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(212 210 200 / var(--tw-ring-opacity, 1));
@@ -4491,6 +4541,11 @@ input:checked + .slider:before{
   --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1));
 }
 
+.ring-primary-500{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1));
+}
+
 .ring-success-300{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity, 1));
@@ -5105,6 +5160,16 @@ input:checked + .slider:before{
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-stone-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-stone-200:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-success-200:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
@@ -5509,6 +5574,10 @@ input:checked + .slider:before{
     display: inline;
   }
 
+  .sm\:inline-flex{
+    display: inline-flex;
+  }
+
   .sm\:hidden{
     display: none;
   }
@@ -5537,6 +5606,18 @@ input:checked + .slider:before{
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
+  .sm\:flex-row{
+    flex-direction: row;
+  }
+
+  .sm\:items-center{
+    align-items: center;
+  }
+
+  .sm\:justify-between{
+    justify-content: space-between;
+  }
+
   .sm\:pb-12{
     padding-bottom: 3rem;
   }

package/dist/utils/formulaDefinitions.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Formula definitions for DataGrid intellisense
+ * Based on fast-formula-parser supported functions
+ */
+export interface FormulaParameter {
+    name: string;
+    description: string;
+    optional?: boolean;
+}
+export interface FormulaDefinition {
+    name: string;
+    category: FormulaCategory;
+    description: string;
+    syntax: string;
+    parameters: FormulaParameter[];
+    example?: string;
+}
+export type FormulaCategory = 'Math' | 'Statistical' | 'Lookup' | 'Text' | 'Logical' | 'Date' | 'Information' | 'Financial';
+export declare const FORMULA_DEFINITIONS: FormulaDefinition[];
+export declare const FORMULA_NAMES: string[];
+export declare const getFormulasByCategory: (category: FormulaCategory) => FormulaDefinition[];
+export declare const searchFormulas: (query: string) => FormulaDefinition[];
+export declare const getFormula: (name: string) => FormulaDefinition | undefined;
+export declare const FORMULA_CATEGORIES: FormulaCategory[];
+//# sourceMappingURL=formulaDefinitions.d.ts.map

package/dist/utils/formulaDefinitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formulaDefinitions.d.ts","sourceRoot":"","sources":["../../src/utils/formulaDefinitions.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,aAAa,GACb,QAAQ,GACR,MAAM,GACN,SAAS,GACT,MAAM,GACN,aAAa,GACb,WAAW,CAAC;AAEhB,eAAO,MAAM,mBAAmB,EAAE,iBAAiB,EAgpClD,CAAC;AAGF,eAAO,MAAM,aAAa,UAAyC,CAAC;AAGpE,eAAO,MAAM,qBAAqB,GAAI,UAAU,eAAe,KAAG,iBAAiB,EACvB,CAAC;AAG7D,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,iBAAiB,EAG/D,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,KAAG,iBAAiB,GAAG,SACE,CAAC;AAGjE,eAAO,MAAM,kBAAkB,EAAE,eAAe,EAS/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.5.0",
+  "version": "1.7.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}</>;
+}