npm - @marcoschwartz/lite-ui - Versions diffs - 0.24.12 → 0.24.14 - Mend

@marcoschwartz/lite-ui 0.24.12 → 0.24.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -19,23 +19,21 @@ A lightweight, modern UI component library built with React, TypeScript, and Tai
 npm install @marcoschwartz/lite-ui
 ```
-### Setup
+### Setup for Next.js (Required)
-1. **Import the CSS** in your app's entry point:
+> ⚠️ **Important:** You must include `ColorSchemeScript` in your layout to prevent dark mode flashing (FOUC).
 ```tsx
-// app/layout.tsx (Next.js) or main.tsx (Vite)
+// app/layout.tsx
+import { ThemeProvider, ColorSchemeScript } from '@marcoschwartz/lite-ui';
 import '@marcoschwartz/lite-ui/styles.css';
-```
-2. **Wrap your app with ThemeProvider** (recommended):
-```tsx
-import { ThemeProvider } from '@marcoschwartz/lite-ui';
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <ColorSchemeScript defaultColorMode="system" />
+      </head>
       <body>
         <ThemeProvider defaultTheme="default" defaultColorMode="system">
           {children}
@@ -46,7 +44,36 @@ export default function RootLayout({ children }) {
 }
 ```
-3. **Start using components:**
+**Key points:**
+- `ColorSchemeScript` must be in `<head>` - it prevents flash by setting colors before React hydrates
+- `suppressHydrationWarning` on `<html>` is required to avoid React warnings
+- `defaultColorMode` should match between `ColorSchemeScript` and `ThemeProvider`
+### Setup for Vite/Other React Apps
+```tsx
+// main.tsx
+import '@marcoschwartz/lite-ui/styles.css';
+import { ThemeProvider } from '@marcoschwartz/lite-ui';
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <ThemeProvider defaultTheme="default" defaultColorMode="system">
+    <App />
+  </ThemeProvider>
+);
+```
+For Vite apps, add the theme script to your `index.html`:
+```html
+<head>
+  <script>
+    (function(){try{var d=document.documentElement,c=localStorage.getItem('lite-ui-color-mode')||'system',r=c;if(c==='system'||!c)r=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';d.setAttribute('data-color-mode',r);d.style.colorScheme=r;if(r==='dark'){d.classList.add('dark');d.style.backgroundColor='hsl(0,0%,3.9%)';d.style.color='hsl(0,0%,98%)'}else{d.classList.remove('dark');d.style.backgroundColor='hsl(0,0%,100%)';d.style.color='hsl(0,0%,3.9%)'}}catch(e){}})();
+  </script>
+</head>
+```
+### Start using components:
 ```tsx
 import { Button, Card, TextInput } from '@marcoschwartz/lite-ui';
@@ -99,7 +126,29 @@ export default function Page() {
 ## 🌙 Dark Mode
-Lite UI includes built-in dark mode support with three color modes:
+Lite UI includes built-in dark mode support with three color modes.
+### Preventing Flash (FOUC)
+To prevent the flash of wrong colors on page load, you **must** use `ColorSchemeScript`:
+```tsx
+// app/layout.tsx
+import { ColorSchemeScript, ThemeProvider } from '@marcoschwartz/lite-ui';
+<html lang="en" suppressHydrationWarning>
+  <head>
+    <ColorSchemeScript defaultColorMode="system" />
+  </head>
+  <body>
+    <ThemeProvider defaultColorMode="system">
+      {children}
+    </ThemeProvider>
+  </body>
+</html>
+```
+### Toggling Dark Mode
 ```tsx
 import { useTheme } from '@marcoschwartz/lite-ui';
@@ -117,6 +166,29 @@ function ThemeToggle() {
 }
 ```
+## ⬆️ Upgrading from v0.24.7 or earlier
+If you're upgrading from an earlier version, update your `layout.tsx`:
+```diff
+- import { ThemeProvider, themeScript } from '@marcoschwartz/lite-ui';
++ import { ThemeProvider, ColorSchemeScript } from '@marcoschwartz/lite-ui';
+  <html lang="en" suppressHydrationWarning>
+    <head>
+-     <script
+-       dangerouslySetInnerHTML={{ __html: themeScript }}
+-       suppressHydrationWarning
+-     />
++     <ColorSchemeScript defaultColorMode="system" />
+    </head>
+```
+The new `ColorSchemeScript` component:
+- Sets CSS custom properties inline (prevents flash even if CSS loads slowly)
+- Cleaner API than the old `themeScript` string
+- Supports `nonce` prop for Content Security Policy
 ## 🎭 Theming
 Switch between built-in themes or create your own:

package/dist/index.d.mts CHANGED Viewed

@@ -288,8 +288,9 @@ interface TableProps<T = any> {
     hoverable?: boolean;
     className?: string;
     responsive?: boolean;
+    onRowClick?: (row: T, index: number) => void;
 }
-declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, responsive, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, responsive, onRowClick, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 interface PaginationProps {
     currentPage: number;

package/dist/index.d.ts CHANGED Viewed

@@ -288,8 +288,9 @@ interface TableProps<T = any> {
     hoverable?: boolean;
     className?: string;
     responsive?: boolean;
+    onRowClick?: (row: T, index: number) => void;
 }
-declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, responsive, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, responsive, onRowClick, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 interface PaginationProps {
     currentPage: number;

package/dist/index.js CHANGED Viewed

@@ -2343,7 +2343,8 @@ function Table({
   striped = false,
   hoverable = true,
   className = "",
-  responsive = true
+  responsive = true,
+  onRowClick
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: `${responsive ? "hidden md:block" : ""} overflow-x-auto`, children: [
@@ -2363,12 +2364,14 @@ function Table({
         /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("tbody", { className: "bg-[hsl(var(--card))] divide-y divide-[hsl(var(--border))]", children: data.map((row, rowIndex) => {
           const rowClasses = [
             striped && rowIndex % 2 === 1 ? "bg-[hsl(var(--muted))]/50" : "",
-            hoverable ? "hover:bg-[hsl(var(--muted))] transition-colors" : ""
+            hoverable ? "hover:bg-[hsl(var(--muted))] transition-colors" : "",
+            onRowClick ? "cursor-pointer" : ""
           ].filter(Boolean).join(" ");
           return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "tr",
             {
               className: rowClasses,
+              onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
               children: columns.map((column, colIndex) => {
                 const isLast = colIndex === columns.length - 1;
                 return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
@@ -2392,6 +2395,7 @@ function Table({
         const cardClasses = [
           "bg-[hsl(var(--card))] border border-[hsl(var(--border))] rounded-[--radius] p-4 shadow-sm",
           hoverable ? "hover:shadow-md transition-shadow" : "",
+          onRowClick ? "cursor-pointer" : "",
           "relative isolate"
           // Ensure cards are isolated layers
         ].filter(Boolean).join(" ");
@@ -2399,6 +2403,7 @@ function Table({
           "div",
           {
             className: cardClasses,
+            onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
             children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
               "div",
               {