@papernote/ui 1.14.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.14.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/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/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/styles/index.css

@@ -3,9 +3,12 @@
 /* Component styles */
 @import '../components/Spreadsheet.css';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "./theme.css";
+
+/* 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");
 
 @layer base {
   body {
@@ -47,7 +50,7 @@
 
   /* Input Styles - Comfortable & Clear */
   .input {
-    @apply block w-full px-4 py-2.5 border border-paper-300 rounded-lg text-sm text-ink-800 placeholder-ink-400 bg-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400 hover:border-paper-400;
+    @apply block w-full px-4 py-2.5 border border-paper-300 rounded-lg text-sm text-ink-800 placeholder:text-ink-400 bg-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400 hover:border-paper-400;
   }
 
   .label {
@@ -84,27 +87,6 @@
     @apply bg-primary-50 text-primary-700 border border-primary-200;
   }
 
-  /* Table Styles - Clean & Minimal */
-  .table {
-    @apply min-w-full divide-y divide-paper-200;
-  }
-
-  .table-header {
-    @apply bg-paper-50;
-  }
-
-  .table-header-cell {
-    @apply px-6 py-3 text-left text-xs font-medium text-ink-500 uppercase tracking-wider;
-  }
-
-  .table-cell {
-    @apply px-6 py-4 whitespace-nowrap text-sm text-ink-700;
-  }
-
-  .table-row {
-    @apply hover:bg-paper-50 transition-colors duration-150;
-  }
-
   /* Navigation Styles - Notebook-like */
   .nav-link {
     @apply flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200;
@@ -140,7 +122,7 @@
   }
 
   input:checked + .slider:before {
-    @apply transform translate-x-5;
+    @apply translate-x-5;
   }
 
   /* Stat Card Styles - Paper-like */
@@ -316,56 +298,33 @@
   }
 }
 
-@layer utilities {
-  .line-clamp-1 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-  }
-  
-  .line-clamp-2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-  
-  .line-clamp-3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-
-  .scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-  
-  .scrollbar-hide::-webkit-scrollbar {
+/* Custom utilities */
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
     display: none;
   }
+}
 
-  .text-shadow {
-    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
+@utility text-shadow {
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
 
-  .bg-gradient-primary {
-    background: linear-gradient(135deg, #64748b, #475569);
-  }
+@utility bg-gradient-primary {
+  background: linear-gradient(135deg, #64748b, #475569);
+}
 
-  .bg-gradient-success {
-    background: linear-gradient(135deg, #10b981, #059669);
-  }
+@utility bg-gradient-success {
+  background: linear-gradient(135deg, #10b981, #059669);
+}
 
-  .bg-gradient-warning {
-    background: linear-gradient(135deg, #f59e0b, #d97706);
-  }
+@utility bg-gradient-warning {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+}
 
-  .bg-gradient-accent {
-    background: linear-gradient(135deg, #f59e0b, #d97706);
-  }
+@utility bg-gradient-accent {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
 }
 
 /* Custom scrollbar - Subtle paper aesthetic */
@@ -388,21 +347,7 @@
   background: #a8a29e;
 }
 
-/* Loading animations */
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: .5;
-  }
-}
-
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-/* Table styles - Clean & minimal */
+/* Table styles - Clean & minimal (un-layered for higher specificity) */
 .table {
   @apply min-w-full divide-y divide-paper-200;
 }
@@ -429,35 +374,33 @@
 }
 
 .table-stable {
-  @apply table-fixed;
-  /* Removed min-height to allow content-based sizing for two-row layout */
+  table-layout: fixed !important;
 }
 
-  .table-stable thead {
-    height: auto !important;
-  }
+.table-stable thead {
+  height: auto !important;
+}
 
-  .table-stable thead th {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background-color: #fafaf9;
-    backdrop-filter: blur(8px);
-    /* padding controlled by component density classes (currentDensity.header) */
-    height: 28px !important;
-    min-height: 28px !important;
-    max-height: 28px !important;
-    line-height: 1 !important;
-    vertical-align: middle !important;
-    overflow: hidden !important;
-    box-sizing: border-box !important;
-    font-size: 0.75rem !important;
-    border-bottom: 1px solid #e7e5e4;
-  }
+.table-stable thead th {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #fafaf9;
+  backdrop-filter: blur(8px);
+  height: 28px !important;
+  min-height: 28px !important;
+  max-height: 28px !important;
+  line-height: 1 !important;
+  vertical-align: middle !important;
+  overflow: hidden !important;
+  box-sizing: border-box !important;
+  font-size: 0.75rem !important;
+  border-bottom: 1px solid #e7e5e4;
+}
 
 /* Primary rows with normal content */
 .table-stable tbody tr {
-  height: auto; /* Allow content-based sizing for two-row layout */
+  height: auto;
 }
 
 /* Secondary rows should be compact */
@@ -534,59 +477,6 @@
   overflow: hidden;
 }
 
-/* Drawer Slide Animations */
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInTop {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInBottom {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-.animate-slide-in-left {
-  animation: slideInLeft 0.3s ease-out;
-}
-
-.animate-slide-in-right {
-  animation: slideInRight 0.3s ease-out;
-}
-
-.animate-slide-in-top {
-  animation: slideInTop 0.3s ease-out;
-}
-
-.animate-slide-in-bottom {
-  animation: slideInBottom 0.3s ease-out;
-}
-
 /* Touch-friendly sizing for coarse pointer devices (touch screens) */
 @media (pointer: coarse) {
   /* Ensure buttons meet 48px minimum touch target on touch devices */