@papernote/ui 1.12.0 → 1.14.0

package/dist/styles.css

@@ -4739,6 +4739,10 @@ input:checked + .slider:before{
   letter-spacing: 0.05em;
 }
 
+.tracking-widest{
+  letter-spacing: 0.1em;
+}
+
 .text-accent-200{
   --tw-text-opacity: 1;
   color: rgb(232 231 224 / var(--tw-text-opacity, 1));
@@ -5066,6 +5070,10 @@ input:checked + .slider:before{
   text-decoration-line: line-through;
 }
 
+.underline-offset-2{
+  text-underline-offset: 2px;
+}
+
 .placeholder-ink-400::-moz-placeholder{
   --tw-placeholder-opacity: 1;
   color: rgb(168 162 158 / var(--tw-placeholder-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.12.0",
+  "version": "1.14.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/AdminModal.tsx

@@ -109,6 +109,7 @@ export function AdminModal({
             className="flex-1 overflow-y-auto min-h-0 h-0 px-6 py-6 admin-modal-form"
             onSubmit={handleFormSubmit}
             id={formId}
+            noValidate
           >
             {activeTab?.content || children}
           </form>

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/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/Sidebar.tsx

@@ -331,8 +331,26 @@ export default function Sidebar({
       {/* Navigation */}
       <nav className="flex-1 px-3 py-2 space-y-1 overflow-y-auto">
         {items.map((item) => {
-          // Render separator
+          // Render separator or section header
           if (item.separator) {
+            // Section header: separator with a label
+            if (item.label) {
+              return (
+                <div
+                  key={item.id}
+                  className="mt-6 mb-2 px-3"
+                  data-testid={item.dataAttributes?.['data-testid'] || `sidebar-section-${item.id}`}
+                  {...item.dataAttributes}
+                >
+                  <div className="border-t border-paper-300 pt-3">
+                    <span className="text-[10px] font-semibold uppercase tracking-widest text-ink-400">
+                      {item.label}
+                    </span>
+                  </div>
+                </div>
+              );
+            }
+            // Plain separator: just a line
             return (
               <div
                 key={item.id}

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';