@papernote/ui 1.10.9 → 1.10.11

package/dist/styles.css

@@ -2308,11 +2308,6 @@ input:checked + .slider:before{
   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));
 }
 
-.-rotate-90{
-  --tw-rotate: -90deg;
-  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));
-}
-
 .rotate-0{
   --tw-rotate: 0deg;
   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));
@@ -2399,6 +2394,25 @@ input:checked + .slider:before{
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+@keyframes rowFlash{
+
+  0%{
+    background-color: rgb(187 247 208);
+  }
+
+  25%{
+    background-color: rgb(187 247 208);
+  }
+
+  100%{
+    background-color: transparent;
+  }
+}
+
+.animate-row-flash{
+  animation: rowFlash 2s ease-out;
+}
+
 @keyframes scaleIn{
 
   0%{
@@ -2595,6 +2609,28 @@ input:checked + .slider:before{
   animation: spin 1s linear infinite;
 }
 
+@keyframes successCheck{
+
+  0%{
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  50%{
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  100%{
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animate-success-check{
+  animation: successCheck 0.6s ease-out;
+}
+
 .cursor-col-resize{
   cursor: col-resize;
 }
@@ -3451,6 +3487,11 @@ input:checked + .slider:before{
   background-color: rgb(87 83 78 / var(--tw-bg-opacity, 1));
 }
 
+.bg-ink-700{
+  --tw-bg-opacity: 1;
+  background-color: rgb(68 64 60 / var(--tw-bg-opacity, 1));
+}
+
 .bg-ink-800{
   --tw-bg-opacity: 1;
   background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1));
@@ -3771,6 +3812,14 @@ input:checked + .slider:before{
   fill: currentColor;
 }
 
+.fill-ink-400{
+  fill: #a8a29e;
+}
+
+.fill-ink-700{
+  fill: #44403c;
+}
+
 .fill-warning-500{
   fill: #f59e0b;
 }

package/package.json

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

package/src/components/Badge.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import Badge from './Badge';
 import { Check, X, AlertCircle, Info as InfoIcon } from 'lucide-react';
 
@@ -249,3 +250,58 @@ export const CountBadges: Story = {
     </div>
   ),
 };
+
+export const Animated: Story = {
+  args: {
+    children: 'Animated Badge',
+    variant: 'success',
+    animate: true,
+  },
+};
+
+export const AnimatedBadges: Story = {
+  render: () => {
+    const [badges, setBadges] = useState<string[]>([]);
+    const [counter, setCounter] = useState(0);
+
+    const addBadge = () => {
+      const newBadge = `Badge ${counter + 1}`;
+      setBadges([...badges, newBadge]);
+      setCounter(counter + 1);
+    };
+
+    const removeBadge = (index: number) => {
+      setBadges(badges.filter((_, i) => i !== index));
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <button
+          onClick={addBadge}
+          style={{
+            padding: '0.5rem 1rem',
+            border: '1px solid #e5e5e5',
+            borderRadius: '0.375rem',
+            background: 'white',
+            cursor: 'pointer',
+            width: 'fit-content',
+          }}
+        >
+          Add Badge
+        </button>
+        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', minHeight: '2rem' }}>
+          {badges.map((badge, index) => (
+            <Badge
+              key={badge}
+              variant="info"
+              animate
+              onRemove={() => removeBadge(index)}
+            >
+              {badge}
+            </Badge>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Badge.tsx

@@ -16,6 +16,8 @@ export interface BadgeProps {
   truncate?: boolean;
   /** Maximum width for the badge (useful with truncate), e.g. '150px' or '10rem' */
   maxWidth?: string;
+  /** Apply fade-in animation when badge appears */
+  animate?: boolean;
 }
 
 export default function Badge({
@@ -29,6 +31,7 @@ export default function Badge({
   pill = false,
   truncate = false,
   maxWidth,
+  animate = false,
 }: BadgeProps) {
   const variantStyles = {
     success: 'bg-success-50 text-success-700 border-success-200',
@@ -79,6 +82,7 @@ export default function Badge({
           inline-block rounded-full
           ${dotVariantStyles[variant]}
           ${dotSizeStyles[size]}
+          ${animate ? 'animate-fade-in' : ''}
           ${className}
         `}
         aria-label={`${variant} indicator`}
@@ -95,6 +99,7 @@ export default function Badge({
         ${variantStyles[variant]}
         ${pill ? pillSizeStyles[size] : sizeStyles[size]}
         ${truncate ? 'max-w-full overflow-hidden' : ''}
+        ${animate ? 'animate-fade-in' : ''}
         ${className}
       `}
       style={maxWidth ? { maxWidth } : undefined}

package/src/components/Button.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import Button from './Button';
 import { Save, Trash, Plus, Download } from 'lucide-react';
 
@@ -253,3 +254,100 @@ export const AllSizes: Story = {
     </div>
   ),
 };
+
+export const SuccessAnimation: Story = {
+  args: {
+    variant: 'primary',
+    showSuccess: true,
+    children: 'Saved!',
+  },
+};
+
+export const SaveWithSuccess: Story = {
+  render: () => {
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    const handleSave = async () => {
+      setSaving(true);
+      setSaved(false);
+      
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      setSaving(false);
+      setSaved(true);
+      
+      // Reset after animation completes
+      setTimeout(() => setSaved(false), 1500);
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'flex-start' }}>
+        <Button
+          variant="primary"
+          icon={<Save />}
+          loading={saving}
+          showSuccess={saved}
+          onClick={handleSave}
+        >
+          Save Changes
+        </Button>
+        <p style={{ fontSize: '0.875rem', color: '#64748b' }}>
+          Click to simulate save with success animation
+        </p>
+      </div>
+    );
+  },
+};
+
+export const SuccessAnimationVariants: Story = {
+  render: () => {
+    const [successStates, setSuccessStates] = useState<Record<string, boolean>>({});
+
+    const triggerSuccess = (key: string) => {
+      setSuccessStates(prev => ({ ...prev, [key]: true }));
+      setTimeout(() => {
+        setSuccessStates(prev => ({ ...prev, [key]: false }));
+      }, 1500);
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <p style={{ fontSize: '0.875rem', color: '#64748b', marginBottom: '0.5rem' }}>
+          Click any button to see the success animation
+        </p>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button
+            variant="primary"
+            showSuccess={successStates['primary']}
+            onClick={() => triggerSuccess('primary')}
+          >
+            Primary
+          </Button>
+          <Button
+            variant="secondary"
+            showSuccess={successStates['secondary']}
+            onClick={() => triggerSuccess('secondary')}
+          >
+            Secondary
+          </Button>
+          <Button
+            variant="outline"
+            showSuccess={successStates['outline']}
+            onClick={() => triggerSuccess('outline')}
+          >
+            Outline
+          </Button>
+          <Button
+            variant="ghost"
+            showSuccess={successStates['ghost']}
+            onClick={() => triggerSuccess('ghost')}
+          >
+            Ghost
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Button.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
-import { Loader2 } from 'lucide-react';
+import React, { forwardRef, useState, useEffect, useRef } from 'react';
+import { Loader2, Check } from 'lucide-react';
 
 /**
  * Button component props
@@ -23,6 +23,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   badge?: number | string;
   /** Badge color variant */
   badgeVariant?: 'primary' | 'success' | 'warning' | 'error';
+  /** Show success checkmark animation (briefly shows checkmark, then reverts) */
+  showSuccess?: boolean;
+  /** Duration in ms for success animation (default: 1500) */
+  successDuration?: number;
 }
 
 /**
@@ -76,11 +80,40 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   iconOnly = false,
   badge,
   badgeVariant = 'error',
+  showSuccess = false,
+  successDuration = 1500,
   children,
   disabled,
   className = '',
   ...props
 }, ref) => {
+  // Track success animation state
+  const [isShowingSuccess, setIsShowingSuccess] = useState(false);
+  const successTimeoutRef = useRef<number | null>(null);
+
+  // Handle showSuccess prop changes
+  useEffect(() => {
+    if (showSuccess && !isShowingSuccess) {
+      setIsShowingSuccess(true);
+      
+      // Clear any existing timeout
+      if (successTimeoutRef.current) {
+        window.clearTimeout(successTimeoutRef.current);
+      }
+      
+      // Set timeout to revert back
+      successTimeoutRef.current = window.setTimeout(() => {
+        setIsShowingSuccess(false);
+      }, successDuration);
+    }
+    
+    return () => {
+      if (successTimeoutRef.current) {
+        window.clearTimeout(successTimeoutRef.current);
+      }
+    };
+  }, [showSuccess, successDuration, isShowingSuccess]);
+
   const baseStyles = 'inline-flex items-center justify-center 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';
 
   const variantStyles = {
@@ -117,12 +150,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     lg: 'min-w-[20px] h-5 text-xs px-1.5',
   };
 
+  // Determine what to show inside button
+  const showSuccessState = isShowingSuccess && !loading;
+
   const buttonElement = (
     <button
       ref={ref}
       className={`
         ${baseStyles}
-        ${variantStyles[variant]}
+        ${showSuccessState ? 'bg-success-500 border-success-500 text-white' : variantStyles[variant]}
         ${sizeStyles[size]}
         ${fullWidth && !iconOnly ? 'w-full' : ''}
         ${className}
@@ -134,11 +170,14 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
       {loading && (
         <Loader2 className={`${iconSize[size]} animate-spin`} />
       )}
-      {!loading && icon && iconPosition === 'left' && (
+      {showSuccessState && (
+        <Check className={`${iconSize[size]} animate-success-check`} />
+      )}
+      {!loading && !showSuccessState && icon && iconPosition === 'left' && (
         <span className={iconSize[size]}>{icon}</span>
       )}
-      {!iconOnly && children}
-      {!loading && icon && iconPosition === 'right' && !iconOnly && (
+      {!iconOnly && !showSuccessState && children}
+      {!loading && !showSuccessState && icon && iconPosition === 'right' && !iconOnly && (
         <span className={iconSize[size]}>{icon}</span>
       )}
     </button>

package/src/components/DataTable.stories.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import DataTable from './DataTable';
 import Badge from './Badge';
+import Button from './Button';
 import { Edit, Trash, Eye } from 'lucide-react';
 
 interface User {
@@ -432,3 +433,64 @@ export const FullWidthWithSecondaryRow: Story = {
     ],
   },
 };
+
+export const RowHighlighting: Story = {
+  render: () => {
+    const [highlightedRows, setHighlightedRows] = useState<string[]>([]);
+
+    const simulateSave = (rowId: string) => {
+      setHighlightedRows([rowId]);
+      // Clear after animation completes
+      setTimeout(() => setHighlightedRows([]), 2000);
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+          <Button variant="secondary" size="sm" onClick={() => simulateSave('1')}>
+            Flash Row 1
+          </Button>
+          <Button variant="secondary" size="sm" onClick={() => simulateSave('2')}>
+            Flash Row 2
+          </Button>
+          <Button variant="secondary" size="sm" onClick={() => simulateSave('3')}>
+            Flash Row 3
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => {
+              setHighlightedRows(['1', '3', '5']);
+              setTimeout(() => setHighlightedRows([]), 2000);
+            }}
+          >
+            Flash Multiple
+          </Button>
+        </div>
+        <DataTable
+          data={sampleUsers}
+          columns={[
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'email', header: 'Email', sortable: true },
+            { key: 'role', header: 'Role' },
+            {
+              key: 'status',
+              header: 'Status',
+              render: (user: User) => (
+                <Badge variant={user.status === 'active' ? 'success' : user.status === 'inactive' ? 'error' : 'warning'}>
+                  {user.status}
+                </Badge>
+              ),
+            },
+          ]}
+          highlightedRows={highlightedRows}
+          highlightDuration={2000}
+        />
+        <p style={{ fontSize: '0.875rem', color: '#64748b' }}>
+          Click a button to see the row flash green and fade back to normal.
+          This is useful for indicating successful saves or updates.
+        </p>
+      </div>
+    );
+  },
+};

package/src/components/DataTable.tsx

@@ -207,6 +207,10 @@ interface DataTableProps<T extends BaseDataItem = BaseDataItem> {
   rowHighlight?: (item: T) => string | undefined;
   /** ID of a single row to highlight */
   highlightedRowId?: string | number;
+  /** Array of row IDs to temporarily highlight (flash animation) */
+  highlightedRows?: (string | number)[];
+  /** Duration in ms for temporary row highlight (default: 2000) */
+  highlightDuration?: number;
   /** Enable cell borders */
   bordered?: boolean;
   /** Custom border color (Tailwind class like 'border-paper-200') */
@@ -513,6 +517,8 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
   rowClassName,
   rowHighlight,
   highlightedRowId,
+  highlightedRows = [],
+  highlightDuration = 2000,
   bordered = false,
   borderColor = 'border-paper-200',
   disableHover = false,
@@ -561,6 +567,10 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
   // Row hover state (for coordinating primary + secondary row highlighting)
   const [hoveredRowKey, setHoveredRowKey] = useState<string | null>(null);
 
+  // Temporary row highlight state (for flash animation)
+  const [flashingRows, setFlashingRows] = useState<Set<string>>(new Set());
+  const flashTimeoutRef = useRef<number | null>(null);
+
   // Context menu state
   const [contextMenuState, setContextMenuState] = useState<{
     isOpen: boolean;
@@ -584,6 +594,31 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
     }
   }, [baseVisibleColumns, columnOrder.length]);
 
+  // Handle temporary row highlighting (flash animation)
+  useEffect(() => {
+    if (highlightedRows.length > 0) {
+      // Add new highlighted rows to flashing set
+      const newFlashingRows = new Set(highlightedRows.map(id => String(id)));
+      setFlashingRows(newFlashingRows);
+
+      // Clear any existing timeout
+      if (flashTimeoutRef.current) {
+        window.clearTimeout(flashTimeoutRef.current);
+      }
+
+      // Set timeout to clear the flash
+      flashTimeoutRef.current = window.setTimeout(() => {
+        setFlashingRows(new Set());
+      }, highlightDuration);
+    }
+
+    return () => {
+      if (flashTimeoutRef.current) {
+        window.clearTimeout(flashTimeoutRef.current);
+      }
+    };
+  }, [highlightedRows, highlightDuration]);
+
   // Apply column order
   const visibleColumns = reorderable && columnOrder.length > 0
     ? columnOrder
@@ -618,9 +653,14 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
   // Get row background class based on striping and highlighting
   const getRowBackgroundClass = (item: T, index: number): string => {
     const classes: string[] = [];
+    const rowKey = getRowKey(item);
 
+    // Check for temporary flash highlight (takes priority)
+    if (flashingRows.has(rowKey)) {
+      classes.push('animate-row-flash');
+    }
     // Check for highlighted row
-    if (highlightedRowId !== undefined && getRowKey(item) === String(highlightedRowId)) {
+    else if (highlightedRowId !== undefined && rowKey === String(highlightedRowId)) {
       classes.push('bg-accent-100');
     }
     // Check for custom row highlight

package/src/components/Progress.stories.tsx

@@ -410,3 +410,119 @@ export const MultipleProgress: Story = {
     </div>
   ),
 };
+
+export const WithMilestones: Story = {
+  args: {
+    value: 65,
+    milestones: [25, 50, 75, 100],
+  },
+};
+
+export const WithMilestoneLabels: Story = {
+  args: {
+    value: 75,
+    milestones: [25, 50, 75, 100],
+    showMilestoneLabels: true,
+  },
+};
+
+export const CircularWithMilestones: Story = {
+  args: {
+    value: 60,
+    variant: 'circular',
+    milestones: [25, 50, 75, 100],
+    showLabel: true,
+  },
+};
+
+export const CircularWithMilestoneLabels: Story = {
+  args: {
+    value: 80,
+    variant: 'circular',
+    milestones: [25, 50, 75, 100],
+    showMilestoneLabels: true,
+    showLabel: true,
+  },
+};
+
+export const BudgetTracker: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '100%' }}>
+      <div>
+        <div style={{ fontSize: '0.875rem', marginBottom: '0.5rem', color: '#64748b' }}>Monthly Budget</div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+          <span style={{ fontWeight: 500 }}>$2,250 / $3,000</span>
+          <span style={{ color: '#f59e0b' }}>75% used</span>
+        </div>
+        <Progress
+          value={75}
+          color="warning"
+          milestones={[25, 50, 75, 100]}
+          showMilestoneLabels
+        />
+      </div>
+      <div>
+        <div style={{ fontSize: '0.875rem', marginBottom: '0.5rem', color: '#64748b' }}>Savings Goal</div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+          <span style={{ fontWeight: 500 }}>$4,500 / $10,000</span>
+          <span style={{ color: '#3b82f6' }}>45% complete</span>
+        </div>
+        <Progress
+          value={45}
+          color="primary"
+          milestones={[25, 50, 75, 100]}
+          showMilestoneLabels
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const GoalProgress: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
+      <div style={{ textAlign: 'center' }}>
+        <Progress
+          value={85}
+          variant="circular"
+          size="lg"
+          color="success"
+          milestones={[25, 50, 75, 100]}
+          showLabel
+        />
+        <div style={{ fontSize: '0.875rem', color: '#64748b', marginTop: '0.5rem' }}>Sales Target</div>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Progress
+          value={60}
+          variant="circular"
+          size="lg"
+          color="primary"
+          milestones={[25, 50, 75, 100]}
+          showLabel
+        />
+        <div style={{ fontSize: '0.875rem', color: '#64748b', marginTop: '0.5rem' }}>Project Completion</div>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Progress
+          value={30}
+          variant="circular"
+          size="lg"
+          color="warning"
+          milestones={[25, 50, 75, 100]}
+          showLabel
+        />
+        <div style={{ fontSize: '0.875rem', color: '#64748b', marginTop: '0.5rem' }}>Sprint Progress</div>
+      </div>
+    </div>
+  ),
+};
+
+export const CustomMilestones: Story = {
+  args: {
+    value: 70,
+    milestones: [10, 30, 50, 80, 100],
+    showMilestoneLabels: true,
+    color: 'success',
+  },
+};