@marcoschwartz/lite-ui 0.24.0 → 0.24.2

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 +3 -1
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +55 -46
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +55 -46
  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
@@ -223,9 +223,11 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
223
223
  }
224
224
  declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
225
225
 
226
- interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
226
+ interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
227
227
  label?: string;
228
228
  size?: 'sm' | 'md' | 'lg';
229
+ /** Simplified onChange that passes the boolean value directly */
230
+ onChange?: (checked: boolean) => void;
229
231
  }
230
232
  declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
231
233
 
package/dist/index.d.ts CHANGED
@@ -223,9 +223,11 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
223
223
  }
224
224
  declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
225
225
 
226
- interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
226
+ interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
227
227
  label?: string;
228
228
  size?: 'sm' | 'md' | 'lg';
229
+ /** Simplified onChange that passes the boolean value directly */
230
+ onChange?: (checked: boolean) => void;
229
231
  }
230
232
  declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
231
233
 
package/dist/index.js CHANGED
@@ -1339,7 +1339,7 @@ var MobileDrawer = ({
1339
1339
  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
1340
1340
  "div",
1341
1341
  {
1342
- className: `${hideClass} fixed ${slideClass} top-0 bottom-0 z-50 w-64 bg-[hsl(var(--card))] shadow-2xl duration-300 flex flex-col`,
1342
+ className: `${hideClass} fixed ${slideClass} top-0 bottom-0 z-50 w-72 bg-[hsl(var(--card))] shadow-2xl duration-300 flex flex-col`,
1343
1343
  children: [
1344
1344
  /* @__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
1345
  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", {}),
@@ -1396,10 +1396,11 @@ var AppShell = ({
1396
1396
  const showNavbarHamburger = navbar && !navbarCollapsedMobile;
1397
1397
  const showAsideHamburger = aside && !asideCollapsedMobile;
1398
1398
  const needsMobileHeader = showNavbarHamburger || showAsideHamburger;
1399
+ const mobileBreakpoint = navbarBreakpoint;
1399
1400
  const navbarDesktopShowClass = getBreakpointShowClass(navbarBreakpoint);
1400
- const navbarMobileHideClass = getBreakpointHideClass(navbarBreakpoint);
1401
+ const mobileHideClass = getBreakpointHideClass(mobileBreakpoint);
1402
+ const desktopShowClass = getBreakpointShowClass(mobileBreakpoint);
1401
1403
  const asideDesktopShowClass = getBreakpointShowClass(asideBreakpoint);
1402
- const asideMobileHideClass = getBreakpointHideClass(asideBreakpoint);
1403
1404
  const contextValue = {
1404
1405
  navbarOpen,
1405
1406
  setNavbarOpen,
@@ -1419,28 +1420,30 @@ var AppShell = ({
1419
1420
  }
1420
1421
  ),
1421
1422
  /* @__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: [
1423
- showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1424
- "button",
1425
- {
1426
- className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1427
- onClick: () => setNavbarOpen(true),
1428
- "aria-label": "Open navigation",
1429
- children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1430
- }
1431
- ),
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" })
1423
+ 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: [
1424
+ /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center gap-2 min-w-0", children: logo || title && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-lg font-bold text-[hsl(var(--foreground))] truncate", children: title }) }),
1425
+ /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
1426
+ showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1427
+ "button",
1428
+ {
1429
+ className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1430
+ onClick: () => setNavbarOpen(true),
1431
+ "aria-label": "Open navigation",
1432
+ children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1433
+ }
1434
+ ),
1435
+ showAsideHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1436
+ "button",
1437
+ {
1438
+ className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1439
+ onClick: () => setAsideOpen(true),
1440
+ "aria-label": "Open sidebar",
1441
+ children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1442
+ }
1443
+ )
1444
+ ] })
1442
1445
  ] }),
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 }),
1446
+ 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
1447
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("main", { className: `flex-1 overflow-y-auto ${paddingClasses[padding]}`, children }),
1445
1448
  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
1449
  ] }),
@@ -1477,28 +1480,30 @@ var AppShell = ({
1477
1480
  ] }) });
1478
1481
  }
1479
1482
  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: [
1481
- showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1482
- "button",
1483
- {
1484
- className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1485
- onClick: () => setNavbarOpen(true),
1486
- "aria-label": "Open navigation",
1487
- children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1488
- }
1489
- ),
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" })
1483
+ 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: [
1484
+ /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center gap-2 min-w-0", children: logo || title && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-lg font-bold text-[hsl(var(--foreground))] truncate", children: title }) }),
1485
+ /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
1486
+ showNavbarHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1487
+ "button",
1488
+ {
1489
+ className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1490
+ onClick: () => setNavbarOpen(true),
1491
+ "aria-label": "Open navigation",
1492
+ children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1493
+ }
1494
+ ),
1495
+ showAsideHamburger && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1496
+ "button",
1497
+ {
1498
+ className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
1499
+ onClick: () => setAsideOpen(true),
1500
+ "aria-label": "Open sidebar",
1501
+ children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(MenuIcon, { size: "md" })
1502
+ }
1503
+ )
1504
+ ] })
1500
1505
  ] }),
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: [
1506
+ 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
1507
  (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
1508
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1", children: header.content })
1504
1509
  ] }),
@@ -2077,7 +2082,10 @@ Checkbox.displayName = "Checkbox";
2077
2082
  var import_react11 = require("react");
2078
2083
  var import_jsx_runtime86 = require("react/jsx-runtime");
2079
2084
  var Toggle = (0, import_react11.forwardRef)(
2080
- ({ label, size = "md", className = "", disabled, checked, ...props }, ref) => {
2085
+ ({ label, size = "md", className = "", disabled, checked, onChange, ...props }, ref) => {
2086
+ const handleChange = (e) => {
2087
+ onChange?.(e.target.checked);
2088
+ };
2081
2089
  const toggleClasses = {
2082
2090
  sm: {
2083
2091
  switch: "w-9 h-5",
@@ -2103,6 +2111,7 @@ var Toggle = (0, import_react11.forwardRef)(
2103
2111
  className: "sr-only peer",
2104
2112
  disabled,
2105
2113
  checked,
2114
+ onChange: handleChange,
2106
2115
  ...props
2107
2116
  }
2108
2117
  ),