@papernote/ui 1.13.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.13.0",
+  "version": "2.0.0",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",
@@ -20,6 +20,8 @@
     },
     "./styles": "./dist/styles.css",
     "./styles.css": "./dist/styles.css",
+    "./theme": "./src/styles/theme.css",
+    "./theme.css": "./src/styles/theme.css",
     "./tailwind-config": "./tailwind.config.js"
   },
   "scripts": {
@@ -60,7 +62,8 @@
     "@types/react-dom": "^19.2.2",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "autoprefixer": "^10.4.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
     "eslint": "^8.0.0",
     "eslint-plugin-react": "^7.0.0",
     "eslint-plugin-react-hooks": "^4.0.0",
@@ -69,7 +72,6 @@
     "jest-environment-jsdom": "^30.2.0",
     "lucide-react": "^0.554.0",
     "postcss": "^8.4.0",
-    "postcss-import": "^16.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.6",
@@ -78,7 +80,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "storybook": "^10.1.11",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.0.0",
     "ts-jest": "^29.4.5",
     "tslib": "^2.6.0",
     "typescript": "^5.0.0",

package/src/components/AdminModal.tsx

@@ -63,7 +63,7 @@ export function AdminModal({
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 admin-modal-overlay">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 admin-modal-overlay">
       <div 
         className={`bg-white rounded-lg w-full ${sizeClasses[size]} flex flex-col overflow-hidden shadow-2xl admin-modal-content`}
         style={{ height: height }}

package/src/components/Autocomplete.tsx

@@ -301,7 +301,7 @@ const Autocomplete = forwardRef<AutocompleteHandle, AutocompleteProps>(({
           disabled={disabled}
           className={`
             w-full pl-9 pr-9 py-2
-            text-sm text-ink-900 placeholder-ink-400
+            text-sm text-ink-900 placeholder:text-ink-400
             bg-white border rounded-lg
             focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400
             disabled:bg-paper-100 disabled:cursor-not-allowed

package/src/components/CommandPalette.tsx

@@ -167,7 +167,7 @@ export default function CommandPalette({
     <div className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh] animate-fade-in">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-ink-900 bg-opacity-50 backdrop-blur-sm"
+        className="absolute inset-0 bg-ink-900/50 backdrop-blur-sm"
         onClick={() => onOpenChange(false)}
       />
 
@@ -185,7 +185,7 @@ export default function CommandPalette({
               setSelectedIndex(0);
             }}
             placeholder={placeholder}
-            className="flex-1 text-base text-ink-900 placeholder-ink-400 bg-transparent border-none outline-none"
+            className="flex-1 text-base text-ink-900 placeholder:text-ink-400 bg-transparent border-none outline-none"
           />
           {trigger && (
             <kbd className="hidden sm:inline-block px-2 py-1 text-xs font-mono text-ink-500 bg-paper-100 border border-paper-300 rounded">

package/src/components/DataTable.tsx

@@ -1646,7 +1646,7 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
       {/* Loading overlay for when data is being refreshed */}
       {loading && data.length > 0 && (
         <div
-          className="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-20"
+          className="absolute inset-0 bg-white/75 flex items-center justify-center z-20"
           style={{ backdropFilter: 'blur(2px)' }}
         >
           <div className="flex flex-col items-center gap-3">

package/src/components/Drawer.tsx

@@ -131,7 +131,7 @@ export default function Drawer({
       {/* Overlay */}
       {showOverlay && (
         <div
-          className="fixed inset-0 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in"
+          className="fixed inset-0 bg-ink-900/50 backdrop-blur-sm animate-fade-in"
           onClick={handleOverlayClick}
           aria-hidden="true"
         />

package/src/components/FilterBar.tsx

@@ -1,4 +1,4 @@
-import { X } from 'lucide-react';
+import { X, Search } from 'lucide-react';
 import Input from './Input';
 import Select, { type SelectOption } from './Select';
 import Button from './Button';
@@ -6,7 +6,7 @@ import Button from './Button';
 export interface FilterConfig {
   key: string;
   label: string;
-  type: 'text' | 'select' | 'date' | 'number' | 'boolean';
+  type: 'text' | 'search' | 'select' | 'date' | 'number' | 'boolean' | 'dateRange' | 'toggle' | 'multiSelect';
   placeholder?: string;
   options?: Array<{ label: string; value: unknown }>;
 }
@@ -42,7 +42,15 @@ export default function FilterBar({
       // Default clear: set all values to null/empty
       const clearedValues: Record<string, unknown> = {};
       filters.forEach(filter => {
-        clearedValues[filter.key] = filter.type === 'text' ? '' : null;
+        if (filter.type === 'text' || filter.type === 'search') {
+          clearedValues[filter.key] = '';
+        } else if (filter.type === 'dateRange') {
+          clearedValues[filter.key] = { from: undefined, to: undefined };
+        } else if (filter.type === 'multiSelect') {
+          clearedValues[filter.key] = [];
+        } else {
+          clearedValues[filter.key] = null;
+        }
       });
       onChange(clearedValues);
     }
@@ -127,6 +135,111 @@ export default function FilterBar({
         );
       }
 
+      case 'search':
+        return (
+          <div className="relative">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <Search className="h-4 w-4 text-ink-400" />
+            </div>
+            <input
+              type="text"
+              placeholder={filter.placeholder || `Search ${filter.label}...`}
+              value={(value as string) || ''}
+              onChange={(e) => handleFilterChange(filter.key, e.target.value)}
+              className="input pl-9"
+            />
+          </div>
+        );
+
+      case 'dateRange': {
+        const rangeValue = (value as { from?: string; to?: string }) || {};
+        return (
+          <div className="flex items-center gap-2">
+            <input
+              type="date"
+              value={rangeValue.from || ''}
+              onChange={(e) =>
+                handleFilterChange(filter.key, { ...rangeValue, from: e.target.value || undefined })
+              }
+              className="input text-sm"
+              aria-label={`${filter.label} from`}
+            />
+            <span className="text-ink-400 text-xs">to</span>
+            <input
+              type="date"
+              value={rangeValue.to || ''}
+              onChange={(e) =>
+                handleFilterChange(filter.key, { ...rangeValue, to: e.target.value || undefined })
+              }
+              className="input text-sm"
+              aria-label={`${filter.label} to`}
+            />
+          </div>
+        );
+      }
+
+      case 'toggle': {
+        const toggleOptions: SelectOption[] = [
+          { value: '', label: 'All' },
+          { value: 'true', label: 'Yes' },
+          { value: 'false', label: 'No' },
+        ];
+        const currentVal = value === null || value === undefined ? '' : String(value);
+        return (
+          <div className="flex rounded-lg border border-paper-300 overflow-hidden" role="group">
+            {toggleOptions.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => handleFilterChange(filter.key, opt.value === '' ? null : opt.value === 'true')}
+                className={`px-3 py-1.5 text-xs font-medium transition-colors ${
+                  currentVal === opt.value
+                    ? 'bg-accent-500 text-white'
+                    : 'bg-white text-ink-600 hover:bg-paper-50'
+                } ${opt.value !== '' ? 'border-l border-paper-300' : ''}`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        );
+      }
+
+      case 'multiSelect': {
+        const selectedValues = Array.isArray(value) ? (value as string[]) : [];
+        const msOptions = filter.options || [];
+        return (
+          <div className="relative">
+            <Select
+              options={[{ value: '', label: `All ${filter.label}` }, ...msOptions.map(o => ({ value: String(o.value), label: o.label }))]}
+              value=""
+              onChange={(newValue) => {
+                if (!newValue) {
+                  handleFilterChange(filter.key, []);
+                } else if (!selectedValues.includes(newValue)) {
+                  handleFilterChange(filter.key, [...selectedValues, newValue]);
+                }
+              }}
+            />
+            {selectedValues.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-1">
+                {selectedValues.map((sv) => {
+                  const opt = msOptions.find(o => String(o.value) === sv);
+                  return (
+                    <span key={sv} className="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-100 text-accent-700 rounded-full">
+                      {opt?.label || sv}
+                      <button type="button" onClick={() => handleFilterChange(filter.key, selectedValues.filter(v => v !== sv))} className="hover:text-accent-900">
+                        <X className="h-3 w-3" />
+                      </button>
+                    </span>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      }
+
       default:
         return null;
     }

package/src/components/FilterPills.tsx

@@ -0,0 +1,58 @@
+import Chip from './Chip';
+import { Filter } from 'lucide-react';
+
+export interface FilterPill {
+  key: string;
+  label: string;
+  displayValue: string;
+}
+
+export interface FilterPillsProps {
+  pills: FilterPill[];
+  onRemove: (key: string) => void;
+  onClearAll: () => void;
+  totalCount?: number;
+  className?: string;
+}
+
+export default function FilterPills({
+  pills,
+  onRemove,
+  onClearAll,
+  totalCount,
+  className = '',
+}: FilterPillsProps) {
+  if (pills.length === 0) return null;
+
+  return (
+    <div className={`flex items-center gap-2 px-4 py-2 border-b border-paper-200 bg-paper-50 ${className}`}>
+      <Filter className="h-3.5 w-3.5 text-ink-400 shrink-0" />
+      <div className="flex items-center gap-1.5 flex-wrap flex-1">
+        {pills.map((pill) => (
+          <Chip
+            key={pill.key}
+            size="sm"
+            variant="primary"
+            onClose={() => onRemove(pill.key)}
+          >
+            {pill.label}: {pill.displayValue}
+          </Chip>
+        ))}
+        {pills.length >= 2 && (
+          <button
+            type="button"
+            onClick={onClearAll}
+            className="text-xs text-ink-500 hover:text-ink-700 underline underline-offset-2 ml-1"
+          >
+            Clear all
+          </button>
+        )}
+      </div>
+      {totalCount !== undefined && (
+        <span className="text-xs text-ink-500 shrink-0 tabular-nums">
+          {totalCount.toLocaleString()} {totalCount === 1 ? 'record' : 'records'}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/LetterNav.tsx

@@ -0,0 +1,67 @@
+const LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+
+export interface LetterNavProps {
+  activeLetter: string | null;
+  onChange: (letter: string | null) => void;
+  availableLetters?: string[];
+  className?: string;
+}
+
+export default function LetterNav({
+  activeLetter,
+  onChange,
+  availableLetters,
+  className = '',
+}: LetterNavProps) {
+  const hasAvailability = availableLetters && availableLetters.length > 0;
+  const availableSet = hasAvailability
+    ? new Set(availableLetters!.map((l) => l.toUpperCase()))
+    : null;
+
+  return (
+    <div className={`flex items-center gap-0.5 px-4 py-1.5 border-b border-paper-200 bg-white overflow-x-auto ${className}`}>
+      <button
+        type="button"
+        onClick={() => onChange(null)}
+        className={`px-2 py-1 text-xs font-medium rounded transition-colors ${
+          activeLetter === null
+            ? 'bg-accent-500 text-white'
+            : 'text-ink-600 hover:bg-paper-100'
+        }`}
+      >
+        All
+      </button>
+      {LETTERS.map((letter) => {
+        const isActive = activeLetter === letter;
+        const isAvailable = !availableSet || availableSet.has(letter);
+        return (
+          <button
+            key={letter}
+            type="button"
+            onClick={() => onChange(isActive ? null : letter)}
+            className={`w-7 h-7 text-xs font-medium rounded transition-colors ${
+              isActive
+                ? 'bg-accent-500 text-white'
+                : isAvailable
+                  ? 'text-ink-600 hover:bg-paper-100'
+                  : 'text-ink-300'
+            }`}
+          >
+            {letter}
+          </button>
+        );
+      })}
+      <button
+        type="button"
+        onClick={() => onChange(activeLetter === '#' ? null : '#')}
+        className={`px-2 py-1 text-xs font-medium rounded transition-colors ${
+          activeLetter === '#'
+            ? 'bg-accent-500 text-white'
+            : 'text-ink-600 hover:bg-paper-100'
+        }`}
+      >
+        #
+      </button>
+    </div>
+  );
+}

package/src/components/MarkdownEditor.tsx

@@ -187,7 +187,7 @@ export default function MarkdownEditor({
               disabled={disabled}
               className={`
                 w-full p-3 outline-none resize-none
-                text-sm text-ink-900 font-mono placeholder-ink-400
+                text-sm text-ink-900 font-mono placeholder:text-ink-400
                 ${disabled ? 'bg-paper-100 cursor-not-allowed' : 'bg-white'}
               `}
               style={{ minHeight, maxHeight }}

package/src/components/MaskedInput.tsx

@@ -161,7 +161,7 @@ const MaskedInput = forwardRef<MaskedInputHandle, MaskedInputProps>(({
         disabled={disabled}
         className={`
           w-full px-3 py-2
-          text-sm text-ink-900 placeholder-ink-400
+          text-sm text-ink-900 placeholder:text-ink-400
           bg-white border rounded-lg
           focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400
           disabled:bg-paper-100 disabled:cursor-not-allowed

package/src/components/Modal.tsx

@@ -259,7 +259,7 @@ export default function Modal({
   // Render as standard modal on desktop
   const modalContent = (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in"
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900/50 backdrop-blur-sm animate-fade-in"
       onMouseDown={handleBackdropMouseDown}
       onClick={handleBackdropClick}
     >

package/src/components/NotificationBar.tsx

@@ -54,7 +54,7 @@ export default function NotificationBar({ notifications, onDismiss }: Notificati
             className={`border-2 rounded-xl p-4 backdrop-blur-sm transform transition-all duration-300 ease-in-out animate-slide-in ${notificationStyles[notification.type]}`}
           >
             <div className="flex items-start space-x-3">
-              <div className={`flex-shrink-0 p-1 rounded-full bg-white bg-opacity-50 ${iconStyles[notification.type]}`}>
+              <div className={`flex-shrink-0 p-1 rounded-full bg-white/50 ${iconStyles[notification.type]}`}>
                 <IconComponent className="h-5 w-5" />
               </div>
               <div className="flex-1 min-w-0">
@@ -68,7 +68,7 @@ export default function NotificationBar({ notifications, onDismiss }: Notificati
               {notification.dismissible && onDismiss && (
                 <button
                   onClick={() => onDismiss(notification.id)}
-                  className={`flex-shrink-0 p-1.5 hover:bg-white hover:bg-opacity-60 rounded-full transition-all duration-200 ${iconStyles[notification.type]} hover:scale-110`}
+                  className={`flex-shrink-0 p-1.5 hover:bg-white/60 rounded-full transition-all duration-200 ${iconStyles[notification.type]} hover:scale-110`}
                   title="Dismiss notification"
                 >
                   <X className="h-4 w-4" />

package/src/components/Pagination.tsx

@@ -10,6 +10,16 @@ export interface PaginationProps {
   maxPageNumbers?: number;
   /** Show page jump input field */
   showPageJump?: boolean;
+  /** Total number of items across all pages */
+  totalItems?: number;
+  /** Current page size */
+  pageSize?: number;
+  /** Available page size options */
+  pageSizeOptions?: number[];
+  /** Callback when page size changes */
+  onPageSizeChange?: (size: number) => void;
+  /** Show "Showing X-Y of Z records" text */
+  showRecordCount?: boolean;
 }
 
 export default function Pagination({
@@ -19,6 +29,11 @@ export default function Pagination({
   showPageNumbers = true,
   maxPageNumbers = 5,
   showPageJump = false,
+  totalItems,
+  pageSize,
+  pageSizeOptions,
+  onPageSizeChange,
+  showRecordCount = false,
 }: PaginationProps) {
   const [jumpValue, setJumpValue] = useState('');
   const getPageNumbers = () => {
@@ -67,8 +82,23 @@ export default function Pagination({
     }
   };
 
+  const showLeftSection = showRecordCount && totalItems !== undefined && pageSize;
+  const showRightSection = onPageSizeChange && pageSizeOptions && pageSizeOptions.length > 0;
+
+  const rangeStart = totalItems ? (currentPage - 1) * (pageSize || 0) + 1 : 0;
+  const rangeEnd = totalItems ? Math.min(currentPage * (pageSize || 0), totalItems) : 0;
+
   return (
-    <nav className="flex items-center justify-center gap-2" aria-label="Pagination">
+    <nav className={`flex items-center gap-2 ${showLeftSection || showRightSection ? 'justify-between' : 'justify-center'}`} aria-label="Pagination">
+      {/* Record Count (left) */}
+      {showLeftSection ? (
+        <span className="text-sm text-ink-500 tabular-nums shrink-0">
+          Showing {rangeStart.toLocaleString()}–{rangeEnd.toLocaleString()} of {totalItems!.toLocaleString()}
+        </span>
+      ) : showRightSection ? <div /> : null}
+
+      {/* Center: nav buttons */}
+      <div className="flex items-center gap-2">
       {/* Previous Button */}
       <button
         onClick={() => onPageChange(currentPage - 1)}
@@ -148,6 +178,24 @@ export default function Pagination({
           </button>
         </form>
       )}
+      </div>
+
+      {/* Page Size Selector (right) */}
+      {showRightSection ? (
+        <div className="flex items-center gap-2 shrink-0">
+          <span className="text-sm text-ink-500 hidden sm:inline">Per page:</span>
+          <select
+            value={pageSize || pageSizeOptions![0]}
+            onChange={(e) => onPageSizeChange!(Number(e.target.value))}
+            className="px-2 py-1.5 text-sm border border-paper-300 rounded-lg bg-white text-ink-700 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400 cursor-pointer"
+            aria-label="Items per page"
+          >
+            {pageSizeOptions!.map((size) => (
+              <option key={size} value={size}>{size}</option>
+            ))}
+          </select>
+        </div>
+      ) : showLeftSection ? <div /> : null}
     </nav>
   );
 }

package/src/components/PasswordInput.tsx

@@ -164,7 +164,7 @@ const PasswordInput = forwardRef<PasswordInputHandle, PasswordInputProps>(({
           disabled={disabled}
           className={`
             w-full px-3 py-2 pr-10
-            text-sm text-ink-900 placeholder-ink-400
+            text-sm text-ink-900 placeholder:text-ink-400
             bg-white border rounded-lg
             focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400
             disabled:bg-paper-100 disabled:cursor-not-allowed

package/src/components/SearchBar.tsx

@@ -35,7 +35,7 @@ export default function SearchBar({
         onChange={(e) => onChange(e.target.value)}
         onKeyDown={handleKeyDown}
         disabled={disabled}
-        className="block w-full pl-11 pr-4 py-3 border border-paper-300 rounded-lg leading-5 bg-white placeholder-ink-400 text-ink-800 focus:outline-none focus:placeholder-ink-300 focus:ring-2 focus:ring-accent-400 focus:border-accent-400 hover:border-paper-400 transition-all sm:text-sm disabled:bg-paper-100 disabled:cursor-not-allowed"
+        className="block w-full pl-11 pr-4 py-3 border border-paper-300 rounded-lg leading-5 bg-white placeholder:text-ink-400 text-ink-800 focus:outline-none focus:placeholder:text-ink-300 focus:ring-2 focus:ring-accent-400 focus:border-accent-400 hover:border-paper-400 transition-all sm:text-sm disabled:bg-paper-100 disabled:cursor-not-allowed"
         placeholder={placeholder}
       />
     </div>

package/src/components/Textarea.tsx

@@ -177,7 +177,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             rows={autoExpand ? minRows : rows}
             enterKeyHint={enterKeyHint}
             className={`
-              block w-full border rounded-lg text-ink-800 placeholder-ink-400
+              block w-full border rounded-lg text-ink-800 placeholder:text-ink-400
               bg-white bg-subtle-grain transition-all duration-200
               focus:outline-none focus:ring-2 ${getResizeClass()}
               disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60

package/src/components/index.ts

@@ -54,6 +54,12 @@ export type { FormControlProps } from './FormControl';
 export { default as FilterBar } from './FilterBar';
 export type { FilterBarProps, FilterConfig } from './FilterBar';
 
+export { default as FilterPills } from './FilterPills';
+export type { FilterPillsProps, FilterPill } from './FilterPills';
+
+export { default as LetterNav } from './LetterNav';
+export type { LetterNavProps } from './LetterNav';
+
 export { default as StatCard } from './StatCard';
 export type { StatCardProps } from './StatCard';
 export { default as StatsGrid, StatItem } from './StatsGrid';