@papernote/ui 1.10.19 → 1.10.21

package/dist/styles.css

@@ -3782,6 +3782,11 @@ input:checked + .slider:before{
   background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
 }
 
+.bg-warning-700{
+  --tw-bg-opacity: 1;
+  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
+}
+
 .bg-white{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -4418,6 +4423,11 @@ input:checked + .slider:before{
   font-style: italic;
 }
 
+.tabular-nums{
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+
 .leading-5{
   line-height: 1.25rem;
 }
@@ -5687,6 +5697,11 @@ input:checked + .slider:before{
   background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-warning-800:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-white:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

package/package.json

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

package/src/components/Alert.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
 Alert banner for displaying important messages with contextual styling and actions.
 
 ## Features
-- **Variants**: info, success, warning, error with semantic colors
+- **Variants**: info, success, warning, caution, error with semantic colors
 - **Icons**: Automatic variant-specific icons
 - **Title & Message**: Optional title with message content
 - **Dismissible**: Optional close button
@@ -45,10 +45,10 @@ import { Alert } from 'notebook-ui';
   argTypes: {
     variant: {
       control: 'select',
-      options: ['info', 'success', 'warning', 'error'],
+      options: ['info', 'success', 'warning', 'caution', 'error'],
       description: 'Alert variant with semantic colors and icons',
       table: {
-        type: { summary: 'info | success | warning | error' },
+        type: { summary: 'info | success | warning | caution | error' },
         defaultValue: { summary: 'info' },
       },
     },
@@ -114,6 +114,18 @@ export const Warning: Story = {
   },
 };
 
+/**
+ * Caution variant for informational states that need context but aren't alarming.
+ * Use for demo/sandbox modes, wash sale notices, or exploratory features.
+ */
+export const Caution: Story = {
+  args: {
+    variant: 'caution',
+    title: 'Demo Mode',
+    children: 'You are in demo mode. Changes will not be saved to the database.',
+  },
+};
+
 export const Error: Story = {
   args: {
     variant: 'error',
@@ -170,10 +182,11 @@ export const LongMessage: Story = {
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <Alert variant="info" title="Information" message="This is an informational message." />
-      <Alert variant="success" title="Success" message="Operation completed successfully." />
-      <Alert variant="warning" title="Warning" message="Please review before proceeding." />
-      <Alert variant="error" title="Error" message="Something went wrong." />
+      <Alert variant="info" title="Information">This is an informational message.</Alert>
+      <Alert variant="success" title="Success">Operation completed successfully.</Alert>
+      <Alert variant="warning" title="Warning">Please review before proceeding.</Alert>
+      <Alert variant="caution" title="Demo Mode">You are exploring in sandbox mode.</Alert>
+      <Alert variant="error" title="Error">Something went wrong.</Alert>
     </div>
   ),
 };

package/src/components/Alert.tsx

@@ -8,7 +8,7 @@ export interface AlertAction {
 }
 
 export interface AlertProps {
-  variant?: 'success' | 'error' | 'warning' | 'info';
+  variant?: 'success' | 'error' | 'warning' | 'caution' | 'info';
   title?: string;
   children: React.ReactNode;
   onClose?: () => void;
@@ -38,6 +38,10 @@ export default function Alert({
       container: 'bg-warning-50 border-warning-200 text-warning-900',
       icon: <AlertTriangle className="h-5 w-5 text-warning-600" />,
     },
+    caution: {
+      container: 'bg-warning-100 border-warning-200 text-warning-800',
+      icon: <Info className="h-5 w-5 text-warning-700" />,
+    },
     info: {
       container: 'bg-primary-50 border-primary-200 text-primary-900',
       icon: <Info className="h-5 w-5 text-primary-600" />,
@@ -54,6 +58,7 @@ export default function Alert({
         success: 'bg-success-600 text-white hover:bg-success-700',
         error: 'bg-error-600 text-white hover:bg-error-700',
         warning: 'bg-warning-600 text-white hover:bg-warning-700',
+        caution: 'bg-warning-700 text-white hover:bg-warning-800',
         info: 'bg-primary-600 text-white hover:bg-primary-700',
       };
       return `${base} ${variantClasses[variant]}`;
@@ -64,6 +69,7 @@ export default function Alert({
       success: 'bg-white border border-success-300 text-success-700 hover:bg-success-50',
       error: 'bg-white border border-error-300 text-error-700 hover:bg-error-50',
       warning: 'bg-white border border-warning-300 text-warning-700 hover:bg-warning-50',
+      caution: 'bg-white border border-warning-300 text-warning-800 hover:bg-warning-50',
       info: 'bg-white border border-primary-300 text-primary-700 hover:bg-primary-50',
     };
     return `${base} ${variantClasses[variant]}`;

package/src/components/Badge.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
 Badge component for status indicators, labels, and tags with optional icons and removal.
 
 ## Features
-- **Variants**: success, warning, error, info, neutral with semantic colors
+- **Variants**: success, warning, caution, error, info, neutral with semantic colors
 - **Sizes**: sm, md, lg
 - **Icons**: Display icons alongside text
 - **Removable**: Optional X button for dismissible badges
@@ -44,10 +44,10 @@ import { Check } from 'lucide-react';
   argTypes: {
     variant: {
       control: 'select',
-      options: ['success', 'warning', 'error', 'info', 'neutral'],
+      options: ['success', 'warning', 'caution', 'error', 'info', 'neutral'],
       description: 'Badge variant with semantic colors',
       table: {
-        type: { summary: 'success | warning | error | info | neutral' },
+        type: { summary: 'success | warning | caution | error | info | neutral' },
         defaultValue: { summary: 'neutral' },
       },
     },
@@ -113,6 +113,17 @@ export const Warning: Story = {
   },
 };
 
+/**
+ * Caution variant for informational states that need context but aren't alarming.
+ * Use for demo/sandbox modes, wash sale notices, or exploratory features.
+ */
+export const Caution: Story = {
+  args: {
+    variant: 'caution',
+    children: 'Demo Mode',
+  },
+};
+
 export const Error: Story = {
   args: {
     variant: 'error',
@@ -199,10 +210,10 @@ export const DotWithText: Story = {
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
-      <Badge variant="default">Default</Badge>
-      <Badge variant="primary">Primary</Badge>
+      <Badge variant="neutral">Neutral</Badge>
       <Badge variant="success">Success</Badge>
       <Badge variant="warning">Warning</Badge>
+      <Badge variant="caution">Caution</Badge>
       <Badge variant="error">Error</Badge>
       <Badge variant="info">Info</Badge>
     </div>
@@ -224,10 +235,10 @@ export const StatusBadges: Story = {
     <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
       <Badge variant="success">Active</Badge>
       <Badge variant="warning">Pending</Badge>
+      <Badge variant="caution">Demo</Badge>
       <Badge variant="error">Inactive</Badge>
       <Badge variant="info">Draft</Badge>
-      <Badge variant="primary">Published</Badge>
-      <Badge variant="default">Archived</Badge>
+      <Badge variant="neutral">Archived</Badge>
     </div>
   ),
 };

package/src/components/Badge.tsx

@@ -3,7 +3,7 @@ import { X } from 'lucide-react';
 
 export interface BadgeProps {
   children?: React.ReactNode;
-  variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  variant?: 'success' | 'warning' | 'error' | 'caution' | 'info' | 'neutral';
   size?: 'sm' | 'md' | 'lg';
   icon?: React.ReactNode;
   onRemove?: () => void;
@@ -37,6 +37,7 @@ export default function Badge({
     success: 'bg-success-50 text-success-700 border-success-200',
     warning: 'bg-warning-50 text-warning-700 border-warning-200',
     error: 'bg-error-50 text-error-700 border-error-200',
+    caution: 'bg-warning-100 text-warning-800 border-warning-200',
     info: 'bg-primary-50 text-primary-700 border-primary-200',
     neutral: 'bg-paper-100 text-ink-700 border-paper-300',
   };
@@ -45,6 +46,7 @@ export default function Badge({
     success: 'bg-success-500',
     warning: 'bg-warning-500',
     error: 'bg-error-500',
+    caution: 'bg-warning-700',
     info: 'bg-primary-500',
     neutral: 'bg-ink-400',
   };

package/src/components/PivotTable.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PivotTable } from './PivotTable';
+
+const meta: Meta<typeof PivotTable> = {
+  title: 'Data Display/PivotTable',
+  component: PivotTable,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'PivotTable transforms flat data into a cross-tabulation table with row labels, column headers, and aggregated values. Ideal for financial reports, sales summaries, and time-based data analysis.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof PivotTable>;
+
+// Sample commission data by principal and month
+const commissionData = [
+  { PrincipalName: 'Allwire', CommissionFiscalMonth: 1, MonthlyCommission: 1250.5 },
+  { PrincipalName: 'Allwire', CommissionFiscalMonth: 2, MonthlyCommission: 1875.25 },
+  { PrincipalName: 'Allwire', CommissionFiscalMonth: 3, MonthlyCommission: 2100.0 },
+  { PrincipalName: 'Allwire', CommissionFiscalMonth: 4, MonthlyCommission: 1950.75 },
+  { PrincipalName: 'AMSC', CommissionFiscalMonth: 1, MonthlyCommission: 3200.0 },
+  { PrincipalName: 'AMSC', CommissionFiscalMonth: 2, MonthlyCommission: 2850.5 },
+  { PrincipalName: 'AMSC', CommissionFiscalMonth: 3, MonthlyCommission: 3100.25 },
+  { PrincipalName: 'AMSC', CommissionFiscalMonth: 4, MonthlyCommission: 3450.0 },
+  { PrincipalName: 'Buckingham', CommissionFiscalMonth: 1, MonthlyCommission: 850.0 },
+  { PrincipalName: 'Buckingham', CommissionFiscalMonth: 2, MonthlyCommission: 925.75 },
+  { PrincipalName: 'Buckingham', CommissionFiscalMonth: 3, MonthlyCommission: 1100.5 },
+  { PrincipalName: 'Buckingham', CommissionFiscalMonth: 4, MonthlyCommission: 975.25 },
+  { PrincipalName: 'Delta Corp', CommissionFiscalMonth: 1, MonthlyCommission: 5500.0 },
+  { PrincipalName: 'Delta Corp', CommissionFiscalMonth: 2, MonthlyCommission: 4800.25 },
+  { PrincipalName: 'Delta Corp', CommissionFiscalMonth: 3, MonthlyCommission: 5200.5 },
+  { PrincipalName: 'Delta Corp', CommissionFiscalMonth: 4, MonthlyCommission: 5750.75 },
+];
+
+const monthLabels: Record<number, string> = {
+  1: 'January',
+  2: 'February',
+  3: 'March',
+  4: 'April',
+  5: 'May',
+  6: 'June',
+  7: 'July',
+  8: 'August',
+  9: 'September',
+  10: 'October',
+  11: 'November',
+  12: 'December',
+};
+
+/**
+ * Default pivot table showing commission by principal and month
+ */
+export const Default: Story = {
+  args: {
+    data: commissionData,
+    rowField: 'PrincipalName',
+    columnField: 'CommissionFiscalMonth',
+    valueField: 'MonthlyCommission',
+    columnLabels: monthLabels,
+    rowLabel: 'Principal',
+    showRowTotals: true,
+    showRowAverages: true,
+    showColumnTotals: true,
+  },
+};
+
+/**
+ * Without averages column
+ */
+export const WithoutAverages: Story = {
+  args: {
+    ...Default.args,
+    showRowAverages: false,
+  },
+};
+
+/**
+ * Without totals row
+ */
+export const WithoutColumnTotals: Story = {
+  args: {
+    ...Default.args,
+    showColumnTotals: false,
+  },
+};
+
+/**
+ * Minimal - just the pivot data
+ */
+export const Minimal: Story = {
+  args: {
+    ...Default.args,
+    showRowTotals: false,
+    showRowAverages: false,
+    showColumnTotals: false,
+  },
+};
+
+// Sales data by region and quarter
+const salesData = [
+  { Region: 'North', Quarter: 'Q1', Sales: 125000 },
+  { Region: 'North', Quarter: 'Q2', Sales: 145000 },
+  { Region: 'North', Quarter: 'Q3', Sales: 132000 },
+  { Region: 'North', Quarter: 'Q4', Sales: 178000 },
+  { Region: 'South', Quarter: 'Q1', Sales: 98000 },
+  { Region: 'South', Quarter: 'Q2', Sales: 112000 },
+  { Region: 'South', Quarter: 'Q3', Sales: 105000 },
+  { Region: 'South', Quarter: 'Q4', Sales: 142000 },
+  { Region: 'East', Quarter: 'Q1', Sales: 210000 },
+  { Region: 'East', Quarter: 'Q2', Sales: 195000 },
+  { Region: 'East', Quarter: 'Q3', Sales: 225000 },
+  { Region: 'East', Quarter: 'Q4', Sales: 248000 },
+  { Region: 'West', Quarter: 'Q1', Sales: 175000 },
+  { Region: 'West', Quarter: 'Q2', Sales: 168000 },
+  { Region: 'West', Quarter: 'Q3', Sales: 192000 },
+  { Region: 'West', Quarter: 'Q4', Sales: 215000 },
+];
+
+/**
+ * Sales by region and quarter
+ */
+export const SalesByRegion: Story = {
+  args: {
+    data: salesData,
+    rowField: 'Region',
+    columnField: 'Quarter',
+    valueField: 'Sales',
+    rowLabel: 'Region',
+    showRowTotals: true,
+    showRowAverages: true,
+    showColumnTotals: true,
+  },
+};
+
+/**
+ * Custom number formatter (no currency symbol)
+ */
+export const CustomFormatter: Story = {
+  args: {
+    ...Default.args,
+    formatValue: (value: number | null) => {
+      if (value === null) return '-';
+      return new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+      }).format(value);
+    },
+  },
+};
+
+// Sparse data with missing values
+const sparseData = [
+  { Product: 'Widget A', Month: 1, Units: 150 },
+  { Product: 'Widget A', Month: 3, Units: 200 },
+  { Product: 'Widget A', Month: 4, Units: 175 },
+  { Product: 'Widget B', Month: 1, Units: 300 },
+  { Product: 'Widget B', Month: 2, Units: 280 },
+  { Product: 'Widget B', Month: 4, Units: 320 },
+  { Product: 'Widget C', Month: 2, Units: 90 },
+  { Product: 'Widget C', Month: 3, Units: 110 },
+];
+
+/**
+ * Sparse data with empty cells
+ */
+export const SparseData: Story = {
+  args: {
+    data: sparseData,
+    rowField: 'Product',
+    columnField: 'Month',
+    valueField: 'Units',
+    columnLabels: monthLabels,
+    rowLabel: 'Product',
+    showRowTotals: true,
+    showColumnTotals: true,
+    formatValue: (value: number | null) => {
+      if (value === null) return '-';
+      return value.toLocaleString();
+    },
+  },
+};