@marcoschwartz/lite-ui 0.24.0 → 0.24.1

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
  1. package/dist/index.d.mts +5 -1
  2. package/dist/index.d.ts +5 -1
  3. package/dist/index.js +47 -31
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +47 -31
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -79,6 +79,8 @@ interface AppShellHeaderConfig {
79
79
  variant?: 'solid' | 'glass' | 'transparent';
80
80
  collapsed?: boolean;
81
81
  withBorder?: boolean;
82
+ /** Actions to show in the unified mobile header bar (right side) */
83
+ mobileActions?: React.ReactNode;
82
84
  }
83
85
  interface AppShellNavbarConfig {
84
86
  content: React.ReactNode;
@@ -223,9 +225,11 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
223
225
  }
224
226
  declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
225
227
 
226
- interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
228
+ interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
227
229
  label?: string;
228
230
  size?: 'sm' | 'md' | 'lg';
231
+ /** Simplified onChange that passes the boolean value directly */
232
+ onChange?: (checked: boolean) => void;
229
233
  }
230
234
  declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
231
235
 
package/dist/index.d.ts CHANGED
@@ -79,6 +79,8 @@ interface AppShellHeaderConfig {
79
79
  variant?: 'solid' | 'glass' | 'transparent';
80
80
  collapsed?: boolean;
81
81
  withBorder?: boolean;
82
+ /** Actions to show in the unified mobile header bar (right side) */
83
+ mobileActions?: React.ReactNode;
82
84
  }
83
85
  interface AppShellNavbarConfig {
84
86
  content: React.ReactNode;
@@ -223,9 +225,11 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
223
225
  }
224
226
  declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
225
227
 
226
- interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
228
+ interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
227
229
  label?: string;
228
230
  size?: 'sm' | 'md' | 'lg';
231
+ /** Simplified onChange that passes the boolean value directly */
232
+ onChange?: (checked: boolean) => void;
229
233
  }
230
234
  declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
231
235
 
package/dist/index.js CHANGED
@@ -1323,7 +1323,8 @@ var MobileDrawer = ({
1323
1323
  breakpoint,
1324
1324
  title,
1325
1325
  logo,
1326
- children
1326
+ children,
1327
+ headerContent
1327
1328
  }) => {
1328
1329
  if (!isOpen) return null;
1329
1330
  const hideClass = getBreakpointHideClass(breakpoint);
@@ -1339,7 +1340,7 @@ var MobileDrawer = ({
1339
1340
  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
1340
1341
  "div",
1341
1342
  {
1342
- className: `${hideClass} fixed ${slideClass} top-0 bottom-0 z-50 w-64 bg-[hsl(var(--card))] shadow-2xl duration-300 flex flex-col`,
1343
+ className: `${hideClass} fixed ${slideClass} top-0 bottom-0 z-50 w-72 bg-[hsl(var(--card))] shadow-2xl duration-300 flex flex-col`,
1343
1344
  children: [
1344
1345
  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-4 border-b border-[hsl(var(--border))] flex items-center justify-between shrink-0", children: [
1345
1346
  logo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: logo }) : title ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", {}),
@@ -1353,6 +1354,7 @@ var MobileDrawer = ({
1353
1354
  }
1354
1355
  )
1355
1356
  ] }),
1357
+ headerContent && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "p-3 border-b border-[hsl(var(--border))] shrink-0", children: headerContent }),
1356
1358
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1 overflow-y-auto", onClick: onClose, children })
1357
1359
  ]
1358
1360
  }
@@ -1389,6 +1391,7 @@ var AppShell = ({
1389
1391
  const headerVariant = header?.variant || "solid";
1390
1392
  const headerWithBorder = header?.withBorder ?? true;
1391
1393
  const headerCollapsed = header?.collapsed ?? false;
1394
+ const headerMobileActions = header?.mobileActions;
1392
1395
  const footerHeight = footer?.height || "md";
1393
1396
  const footerVariant = footer?.variant || "solid";
1394
1397
  const footerWithBorder = footer?.withBorder ?? true;
@@ -1396,10 +1399,11 @@ var AppShell = ({
1396
1399
  const showNavbarHamburger = navbar && !navbarCollapsedMobile;
1397
1400
  const showAsideHamburger = aside && !asideCollapsedMobile;
1398
1401
  const needsMobileHeader = showNavbarHamburger || showAsideHamburger;
1402
+ const mobileBreakpoint = navbarBreakpoint;
1399
1403
  const navbarDesktopShowClass = getBreakpointShowClass(navbarBreakpoint);
1400
- const navbarMobileHideClass = getBreakpointHideClass(navbarBreakpoint);
1404
+ const mobileHideClass = getBreakpointHideClass(mobileBreakpoint);
1405
+ const desktopShowClass = getBreakpointShowClass(mobileBreakpoint);
1401
1406
  const asideDesktopShowClass = getBreakpointShowClass(asideBreakpoint);
1402
- const asideMobileHideClass = getBreakpointHideClass(asideBreakpoint);
1403
1407
  const contextValue = {
1404
1408
  navbarOpen,
1405
1409
  setNavbarOpen,
@@ -1419,28 +1423,31 @@ var AppShell = ({
1419
1423
  }
1420
1424
  ),
1421
1425
  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex-1 flex flex-col min-w-0", children: [
1422
- needsMobileHeader && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${navbarMobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
1426
+ needsMobileHeader && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
1423
1427
  showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1424
1428
  "button",
1425
1429
  {
1426
- className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1430
+ className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors shrink-0",
1427
1431
  onClick: () => setNavbarOpen(true),
1428
1432
  "aria-label": "Open navigation",
1429
1433
  children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1430
1434
  }
1431
1435
  ),
1432
- (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1 flex justify-center", children: logo || /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
1433
- showAsideHamburger ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1434
- "button",
1435
- {
1436
- className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1437
- onClick: () => setAsideOpen(true),
1438
- "aria-label": "Open sidebar",
1439
- children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1440
- }
1441
- ) : showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-10" })
1436
+ (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1 flex items-center justify-center min-w-0", children: logo || /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-lg font-bold text-[hsl(var(--foreground))] truncate", children: title }) }),
1437
+ /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
1438
+ headerMobileActions,
1439
+ showAsideHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1440
+ "button",
1441
+ {
1442
+ className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1443
+ onClick: () => setAsideOpen(true),
1444
+ "aria-label": "Open sidebar",
1445
+ children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1446
+ }
1447
+ )
1448
+ ] })
1442
1449
  ] }),
1443
- header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("header", { className: `sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 flex items-center shrink-0`, children: header.content }),
1450
+ header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("header", { className: `${needsMobileHeader ? desktopShowClass : ""} sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 items-center shrink-0`, children: header.content }),
1444
1451
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: `flex-1 overflow-y-auto ${paddingClasses[padding]}`, children }),
1445
1452
  footer && !footerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("footer", { className: `${heightClasses[footerHeight]} ${getVariantClasses(footerVariant, footerWithBorder)} ${footerWithBorder ? "border-t" : ""} px-4 flex items-center shrink-0`, children: footer.content })
1446
1453
  ] }),
@@ -1460,6 +1467,7 @@ var AppShell = ({
1460
1467
  breakpoint: navbarBreakpoint,
1461
1468
  title,
1462
1469
  logo,
1470
+ headerContent: header?.content,
1463
1471
  children: navbar.content
1464
1472
  }
1465
1473
  ),
@@ -1477,28 +1485,31 @@ var AppShell = ({
1477
1485
  ] }) });
1478
1486
  }
1479
1487
  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-[hsl(var(--background))] ${className}`, children: [
1480
- needsMobileHeader && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${navbarMobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
1488
+ needsMobileHeader && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
1481
1489
  showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1482
1490
  "button",
1483
1491
  {
1484
- className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1492
+ className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors shrink-0",
1485
1493
  onClick: () => setNavbarOpen(true),
1486
1494
  "aria-label": "Open navigation",
1487
1495
  children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1488
1496
  }
1489
1497
  ),
1490
- (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1 flex justify-center", children: logo || /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
1491
- showAsideHamburger ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1492
- "button",
1493
- {
1494
- className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1495
- onClick: () => setAsideOpen(true),
1496
- "aria-label": "Open sidebar",
1497
- children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1498
- }
1499
- ) : showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-10" })
1498
+ (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1 flex items-center justify-center min-w-0", children: logo || /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-lg font-bold text-[hsl(var(--foreground))] truncate", children: title }) }),
1499
+ /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
1500
+ headerMobileActions,
1501
+ showAsideHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1502
+ "button",
1503
+ {
1504
+ className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1505
+ onClick: () => setAsideOpen(true),
1506
+ "aria-label": "Open sidebar",
1507
+ children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1508
+ }
1509
+ )
1510
+ ] })
1500
1511
  ] }),
1501
- header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("header", { className: `sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 flex items-center`, children: [
1512
+ header && !headerCollapsed && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("header", { className: `${needsMobileHeader ? desktopShowClass : ""} sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 items-center`, children: [
1502
1513
  (logo || title) && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "mr-4 shrink-0", children: logo || /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
1503
1514
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1", children: header.content })
1504
1515
  ] }),
@@ -1529,6 +1540,7 @@ var AppShell = ({
1529
1540
  breakpoint: navbarBreakpoint,
1530
1541
  title,
1531
1542
  logo,
1543
+ headerContent: header?.content,
1532
1544
  children: navbar.content
1533
1545
  }
1534
1546
  ),
@@ -2077,7 +2089,10 @@ Checkbox.displayName = "Checkbox";
2077
2089
  var import_react11 = require("react");
2078
2090
  var import_jsx_runtime86 = require("react/jsx-runtime");
2079
2091
  var Toggle = (0, import_react11.forwardRef)(
2080
- ({ label, size = "md", className = "", disabled, checked, ...props }, ref) => {
2092
+ ({ label, size = "md", className = "", disabled, checked, onChange, ...props }, ref) => {
2093
+ const handleChange = (e) => {
2094
+ onChange?.(e.target.checked);
2095
+ };
2081
2096
  const toggleClasses = {
2082
2097
  sm: {
2083
2098
  switch: "w-9 h-5",
@@ -2103,6 +2118,7 @@ var Toggle = (0, import_react11.forwardRef)(
2103
2118
  className: "sr-only peer",
2104
2119
  disabled,
2105
2120
  checked,
2121
+ onChange: handleChange,
2106
2122
  ...props
2107
2123
  }
2108
2124
  ),