@papernote/ui 2.0.2 → 2.0.4

package/dist/styles.css

@@ -1424,6 +1424,10 @@
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-4 {
     --tw-translate-x: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1432,6 +1436,10 @@
     --tw-translate-x: calc(var(--spacing) * 5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-6 {
+    --tw-translate-x: calc(var(--spacing) * 6);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-7 {
     --tw-translate-x: calc(var(--spacing) * 7);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -5081,27 +5089,27 @@
     }
   }
   .dark\:border-blue-800 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       border-color: var(--color-blue-800);
     }
   }
   .dark\:border-error-800 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       border-color: var(--color-error-800);
     }
   }
   .dark\:border-ink-700 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       border-color: var(--color-ink-700);
     }
   }
   .dark\:border-warning-800 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       border-color: var(--color-warning-800);
     }
   }
   .dark\:bg-blue-900\/20 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
@@ -5109,7 +5117,7 @@
     }
   }
   .dark\:bg-error-900\/20 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, #7f1d1d 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-error-900) 20%, transparent);
@@ -5117,27 +5125,27 @@
     }
   }
   .dark\:bg-ink-700 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: var(--color-ink-700);
     }
   }
   .dark\:bg-ink-800 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: var(--color-ink-800);
     }
   }
   .dark\:bg-ink-900 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: var(--color-ink-900);
     }
   }
   .dark\:bg-primary-900 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: var(--color-primary-900);
     }
   }
   .dark\:bg-primary-900\/20 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, #0f172a 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-primary-900) 20%, transparent);
@@ -5145,17 +5153,17 @@
     }
   }
   .dark\:bg-slate-800 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: var(--color-slate-800);
     }
   }
   .dark\:bg-warning-900 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: var(--color-warning-900);
     }
   }
   .dark\:bg-warning-900\/20 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, #78350f 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-warning-900) 20%, transparent);
@@ -5163,62 +5171,62 @@
     }
   }
   .dark\:fill-ink-300 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       fill: var(--color-ink-300);
     }
   }
   .dark\:text-blue-200 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-blue-200);
     }
   }
   .dark\:text-error-200 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-error-200);
     }
   }
   .dark\:text-ink-100 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-ink-100);
     }
   }
   .dark\:text-ink-300 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-ink-300);
     }
   }
   .dark\:text-ink-400 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-ink-400);
     }
   }
   .dark\:text-primary-300 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-primary-300);
     }
   }
   .dark\:text-primary-400 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-primary-400);
     }
   }
   .dark\:text-slate-400 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-slate-400);
     }
   }
   .dark\:text-warning-200 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-warning-200);
     }
   }
   .dark\:text-warning-300 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-warning-300);
     }
   }
   .dark\:hover\:bg-slate-700 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-slate-700);
@@ -5227,7 +5235,7 @@
     }
   }
   .dark\:hover\:bg-slate-800 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-slate-800);
@@ -5236,7 +5244,7 @@
     }
   }
   .dark\:hover\:text-slate-100 {
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
           color: var(--color-slate-100);

package/package.json

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

package/src/components/FilterBar.tsx

@@ -1,12 +1,22 @@
-import { X, Search } from 'lucide-react';
-import Input from './Input';
-import Select, { type SelectOption } from './Select';
-import Button from './Button';
+import { X, Search } from "lucide-react";
+import Input from "./Input";
+import Select, { type SelectOption } from "./Select";
+import Button from "./Button";
 
 export interface FilterConfig {
   key: string;
   label: string;
-  type: 'text' | 'search' | 'select' | 'date' | 'number' | 'boolean' | 'dateRange' | 'toggle' | 'multiSelect';
+  type:
+    | "text"
+    | "search"
+    | "select"
+    | "date"
+    | "number"
+    | "boolean"
+    | "dateRange"
+    | "toggle"
+    | "switch"
+    | "multiSelect";
   placeholder?: string;
   options?: Array<{ label: string; value: unknown }>;
 }
@@ -24,7 +34,7 @@ export default function FilterBar({
   filters,
   values,
   onChange,
-  className = '',
+  className = "",
   onClear,
   showClearButton = false,
 }: FilterBarProps) {
@@ -41,13 +51,15 @@ export default function FilterBar({
     } else {
       // Default clear: set all values to null/empty
       const clearedValues: Record<string, unknown> = {};
-      filters.forEach(filter => {
-        if (filter.type === 'text' || filter.type === 'search') {
-          clearedValues[filter.key] = '';
-        } else if (filter.type === 'dateRange') {
+      filters.forEach((filter) => {
+        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') {
+        } else if (filter.type === "multiSelect") {
           clearedValues[filter.key] = [];
+        } else if (filter.type === "switch") {
+          clearedValues[filter.key] = false;
         } else {
           clearedValues[filter.key] = null;
         }
@@ -60,20 +72,20 @@ export default function FilterBar({
     const value = values[filter.key];
 
     switch (filter.type) {
-      case 'text':
+      case "text":
         return (
           <Input
             type="text"
             placeholder={filter.placeholder || `Filter by ${filter.label}`}
-            value={(value as string) || ''}
+            value={(value as string) || ""}
             onChange={(e) => handleFilterChange(filter.key, e.target.value)}
           />
         );
 
-      case 'select': {
+      case "select": {
         const selectOptions: SelectOption[] = [
-          { value: '', label: `All ${filter.label}` },
-          ...(filter.options?.map(opt => ({
+          { value: "", label: `All ${filter.label}` },
+          ...(filter.options?.map((opt) => ({
             value: String(opt.value),
             label: opt.label,
           })) || []),
@@ -82,60 +94,62 @@ export default function FilterBar({
         return (
           <Select
             options={selectOptions}
-            value={String(value || '')}
-            onChange={(newValue) => handleFilterChange(filter.key, newValue || null)}
+            value={String(value || "")}
+            onChange={(newValue) =>
+              handleFilterChange(filter.key, newValue || null)
+            }
           />
         );
       }
 
-      case 'date':
+      case "date":
         return (
           <input
             type="date"
-            value={(value as string) || ''}
+            value={(value as string) || ""}
             onChange={(e) => handleFilterChange(filter.key, e.target.value)}
             className="input"
           />
         );
 
-      case 'number':
+      case "number":
         return (
           <input
             type="number"
             placeholder={filter.placeholder || `Filter by ${filter.label}`}
-            value={value !== null && value !== undefined ? String(value) : ''}
+            value={value !== null && value !== undefined ? String(value) : ""}
             onChange={(e) =>
               handleFilterChange(
                 filter.key,
-                e.target.value ? Number(e.target.value) : null
+                e.target.value ? Number(e.target.value) : null,
               )
             }
             className="input"
           />
         );
 
-      case 'boolean': {
+      case "boolean": {
         const boolOptions: SelectOption[] = [
-          { value: '', label: 'All' },
-          { value: 'true', label: 'Yes' },
-          { value: 'false', label: 'No' },
+          { value: "", label: "All" },
+          { value: "true", label: "Yes" },
+          { value: "false", label: "No" },
         ];
 
         return (
           <Select
             options={boolOptions}
-            value={value === null || value === undefined ? '' : String(value)}
+            value={value === null || value === undefined ? "" : String(value)}
             onChange={(newValue) =>
               handleFilterChange(
                 filter.key,
-                newValue === '' ? null : newValue === 'true'
+                newValue === "" ? null : newValue === "true",
               )
             }
           />
         );
       }
 
-      case 'search':
+      case "search":
         return (
           <div className="relative">
             <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -144,22 +158,25 @@ export default function FilterBar({
             <input
               type="text"
               placeholder={filter.placeholder || `Search ${filter.label}...`}
-              value={(value as string) || ''}
+              value={(value as string) || ""}
               onChange={(e) => handleFilterChange(filter.key, e.target.value)}
               className="input pl-9"
             />
           </div>
         );
 
-      case 'dateRange': {
+      case "dateRange": {
         const rangeValue = (value as { from?: string; to?: string }) || {};
         return (
           <div className="flex items-center gap-2">
             <input
               type="date"
-              value={rangeValue.from || ''}
+              value={rangeValue.from || ""}
               onChange={(e) =>
-                handleFilterChange(filter.key, { ...rangeValue, from: e.target.value || undefined })
+                handleFilterChange(filter.key, {
+                  ...rangeValue,
+                  from: e.target.value || undefined,
+                })
               }
               className="input text-sm"
               aria-label={`${filter.label} from`}
@@ -167,9 +184,12 @@ export default function FilterBar({
             <span className="text-ink-400 text-xs">to</span>
             <input
               type="date"
-              value={rangeValue.to || ''}
+              value={rangeValue.to || ""}
               onChange={(e) =>
-                handleFilterChange(filter.key, { ...rangeValue, to: e.target.value || undefined })
+                handleFilterChange(filter.key, {
+                  ...rangeValue,
+                  to: e.target.value || undefined,
+                })
               }
               className="input text-sm"
               aria-label={`${filter.label} to`}
@@ -178,25 +198,34 @@ export default function FilterBar({
         );
       }
 
-      case 'toggle': {
+      case "toggle": {
         const toggleOptions: SelectOption[] = [
-          { value: '', label: 'All' },
-          { value: 'true', label: 'Yes' },
-          { value: 'false', label: 'No' },
+          { value: "", label: "All" },
+          { value: "true", label: "Yes" },
+          { value: "false", label: "No" },
         ];
-        const currentVal = value === null || value === undefined ? '' : String(value);
+        const currentVal =
+          value === null || value === undefined ? "" : String(value);
         return (
-          <div className="flex rounded-lg border border-paper-300 overflow-hidden" role="group">
+          <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')}
+                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' : ''}`}
+                    ? "bg-accent-500 text-white"
+                    : "bg-white text-ink-600 hover:bg-paper-50"
+                } ${opt.value !== "" ? "border-l border-paper-300" : ""}`}
               >
                 {opt.label}
               </button>
@@ -205,13 +234,44 @@ export default function FilterBar({
         );
       }
 
-      case 'multiSelect': {
+      case "switch": {
+        // Single binary toggle — use when the filter is naturally on/off
+        // (e.g. "Mine only", "Archived"), unlike `boolean` / `toggle` which
+        // present an All/Yes/No tri-state. Stored value is a plain boolean.
+        const checked = value === true;
+        return (
+          <button
+            type="button"
+            role="switch"
+            aria-checked={checked}
+            onClick={() => handleFilterChange(filter.key, !checked)}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 ${
+              checked ? "bg-accent-500" : "bg-paper-300"
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${
+                checked ? "translate-x-6" : "translate-x-1"
+              }`}
+            />
+            <span className="sr-only">{filter.label}</span>
+          </button>
+        );
+      }
+
+      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 }))]}
+              options={[
+                { value: "", label: `All ${filter.label}` },
+                ...msOptions.map((o) => ({
+                  value: String(o.value),
+                  label: o.label,
+                })),
+              ]}
               value=""
               onChange={(newValue) => {
                 if (!newValue) {
@@ -224,11 +284,23 @@ export default function FilterBar({
             {selectedValues.length > 0 && (
               <div className="flex flex-wrap gap-1 mt-1">
                 {selectedValues.map((sv) => {
-                  const opt = msOptions.find(o => String(o.value) === 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">
+                    <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">
+                      <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>
@@ -248,12 +320,17 @@ export default function FilterBar({
   if (filters.length === 0) return null;
 
   return (
-    <div className={`bg-white bg-subtle-grain border border-paper-200 rounded-lg shadow-sm p-4 ${className}`}>
+    <div
+      className={`bg-white bg-subtle-grain border border-paper-200 rounded-lg shadow-sm p-4 ${className}`}
+    >
       <div className="flex items-start justify-between gap-4 flex-wrap">
         {/* Filters */}
         <div className="flex-1 flex flex-wrap gap-4">
           {filters.map((filter) => (
-            <div key={filter.key} className="flex flex-col space-y-1 min-w-[200px]">
+            <div
+              key={filter.key}
+              className="flex flex-col space-y-1 min-w-[200px]"
+            >
               <label className="label">{filter.label}</label>
               {renderFilter(filter)}
             </div>

package/src/styles/index.css

@@ -6,6 +6,21 @@
 @import "tailwindcss";
 @import "./theme.css";
 
+/* Class-based dark mode.
+ *
+ * Without this, Tailwind v4 compiles every `dark:` utility into a
+ * `@media (prefers-color-scheme: dark)` block — so dark styles activate
+ * from the OS theme setting rather than app state. Consumers that want
+ * to control dark mode programmatically (e.g. a theme toggle that adds
+ * `<html class="dark">`) can't override the OS preference.
+ *
+ * This variant makes `dark:` resolve to a `.dark` class selector
+ * instead. Apps that want media-query behavior can opt back in via
+ * their own `@custom-variant dark (@media (prefers-color-scheme: dark));`
+ * override.
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* Content sources for class detection */
 @source "../components/**/*.{tsx,ts}";
 @source inline("bg-sky-100 bg-sky-50 bg-sky-100/50 bg-amber-100 bg-amber-50 bg-amber-100/50 bg-emerald-100 bg-emerald-50 bg-emerald-100/50 bg-pink-100 bg-pink-50 bg-pink-100/50");