@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.
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +55 -46
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +55 -46
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1175,7 +1175,7 @@ var MobileDrawer = ({
|
|
|
1175
1175
|
/* @__PURE__ */ jsxs9(
|
|
1176
1176
|
"div",
|
|
1177
1177
|
{
|
|
1178
|
-
className: `${hideClass} fixed ${slideClass} top-0 bottom-0 z-50 w-
|
|
1178
|
+
className: `${hideClass} fixed ${slideClass} top-0 bottom-0 z-50 w-72 bg-[hsl(var(--card))] shadow-2xl duration-300 flex flex-col`,
|
|
1179
1179
|
children: [
|
|
1180
1180
|
/* @__PURE__ */ jsxs9("div", { className: "p-4 border-b border-[hsl(var(--border))] flex items-center justify-between shrink-0", children: [
|
|
1181
1181
|
logo ? /* @__PURE__ */ jsx78("div", { children: logo }) : title ? /* @__PURE__ */ jsx78("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) : /* @__PURE__ */ jsx78("div", {}),
|
|
@@ -1232,10 +1232,11 @@ var AppShell = ({
|
|
|
1232
1232
|
const showNavbarHamburger = navbar && !navbarCollapsedMobile;
|
|
1233
1233
|
const showAsideHamburger = aside && !asideCollapsedMobile;
|
|
1234
1234
|
const needsMobileHeader = showNavbarHamburger || showAsideHamburger;
|
|
1235
|
+
const mobileBreakpoint = navbarBreakpoint;
|
|
1235
1236
|
const navbarDesktopShowClass = getBreakpointShowClass(navbarBreakpoint);
|
|
1236
|
-
const
|
|
1237
|
+
const mobileHideClass = getBreakpointHideClass(mobileBreakpoint);
|
|
1238
|
+
const desktopShowClass = getBreakpointShowClass(mobileBreakpoint);
|
|
1237
1239
|
const asideDesktopShowClass = getBreakpointShowClass(asideBreakpoint);
|
|
1238
|
-
const asideMobileHideClass = getBreakpointHideClass(asideBreakpoint);
|
|
1239
1240
|
const contextValue = {
|
|
1240
1241
|
navbarOpen,
|
|
1241
1242
|
setNavbarOpen,
|
|
@@ -1255,28 +1256,30 @@ var AppShell = ({
|
|
|
1255
1256
|
}
|
|
1256
1257
|
),
|
|
1257
1258
|
/* @__PURE__ */ jsxs9("div", { className: "flex-1 flex flex-col min-w-0", children: [
|
|
1258
|
-
needsMobileHeader && /* @__PURE__ */ jsxs9("div", { className: `${
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1259
|
+
needsMobileHeader && /* @__PURE__ */ jsxs9("div", { className: `${mobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
|
|
1260
|
+
/* @__PURE__ */ jsx78("div", { className: "flex items-center gap-2 min-w-0", children: logo || title && /* @__PURE__ */ jsx78("span", { className: "text-lg font-bold text-[hsl(var(--foreground))] truncate", children: title }) }),
|
|
1261
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 shrink-0", children: [
|
|
1262
|
+
showNavbarHamburger && /* @__PURE__ */ jsx78(
|
|
1263
|
+
"button",
|
|
1264
|
+
{
|
|
1265
|
+
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
|
|
1266
|
+
onClick: () => setNavbarOpen(true),
|
|
1267
|
+
"aria-label": "Open navigation",
|
|
1268
|
+
children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
|
|
1269
|
+
}
|
|
1270
|
+
),
|
|
1271
|
+
showAsideHamburger && /* @__PURE__ */ jsx78(
|
|
1272
|
+
"button",
|
|
1273
|
+
{
|
|
1274
|
+
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
|
|
1275
|
+
onClick: () => setAsideOpen(true),
|
|
1276
|
+
"aria-label": "Open sidebar",
|
|
1277
|
+
children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
|
|
1278
|
+
}
|
|
1279
|
+
)
|
|
1280
|
+
] })
|
|
1278
1281
|
] }),
|
|
1279
|
-
header && !headerCollapsed && /* @__PURE__ */ jsx78("header", { className:
|
|
1282
|
+
header && !headerCollapsed && /* @__PURE__ */ jsx78("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 }),
|
|
1280
1283
|
/* @__PURE__ */ jsx78("main", { className: `flex-1 overflow-y-auto ${paddingClasses[padding]}`, children }),
|
|
1281
1284
|
footer && !footerCollapsed && /* @__PURE__ */ jsx78("footer", { className: `${heightClasses[footerHeight]} ${getVariantClasses(footerVariant, footerWithBorder)} ${footerWithBorder ? "border-t" : ""} px-4 flex items-center shrink-0`, children: footer.content })
|
|
1282
1285
|
] }),
|
|
@@ -1313,28 +1316,30 @@ var AppShell = ({
|
|
|
1313
1316
|
] }) });
|
|
1314
1317
|
}
|
|
1315
1318
|
return /* @__PURE__ */ jsx78(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs9("div", { className: `min-h-screen flex flex-col bg-[hsl(var(--background))] ${className}`, children: [
|
|
1316
|
-
needsMobileHeader && /* @__PURE__ */ jsxs9("div", { className: `${
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1319
|
+
needsMobileHeader && /* @__PURE__ */ jsxs9("div", { className: `${mobileHideClass} sticky top-0 z-30 ${heightClasses[headerHeight]} px-4 flex items-center justify-between ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""}`, children: [
|
|
1320
|
+
/* @__PURE__ */ jsx78("div", { className: "flex items-center gap-2 min-w-0", children: logo || title && /* @__PURE__ */ jsx78("span", { className: "text-lg font-bold text-[hsl(var(--foreground))] truncate", children: title }) }),
|
|
1321
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 shrink-0", children: [
|
|
1322
|
+
showNavbarHamburger && /* @__PURE__ */ jsx78(
|
|
1323
|
+
"button",
|
|
1324
|
+
{
|
|
1325
|
+
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
|
|
1326
|
+
onClick: () => setNavbarOpen(true),
|
|
1327
|
+
"aria-label": "Open navigation",
|
|
1328
|
+
children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
|
|
1329
|
+
}
|
|
1330
|
+
),
|
|
1331
|
+
showAsideHamburger && /* @__PURE__ */ jsx78(
|
|
1332
|
+
"button",
|
|
1333
|
+
{
|
|
1334
|
+
className: "p-2 rounded-lg hover:bg-[hsl(var(--accent))] transition-colors",
|
|
1335
|
+
onClick: () => setAsideOpen(true),
|
|
1336
|
+
"aria-label": "Open sidebar",
|
|
1337
|
+
children: /* @__PURE__ */ jsx78(MenuIcon, { size: "md" })
|
|
1338
|
+
}
|
|
1339
|
+
)
|
|
1340
|
+
] })
|
|
1336
1341
|
] }),
|
|
1337
|
-
header && !headerCollapsed && /* @__PURE__ */ jsxs9("header", { className:
|
|
1342
|
+
header && !headerCollapsed && /* @__PURE__ */ jsxs9("header", { className: `${needsMobileHeader ? desktopShowClass : ""} sticky top-0 z-20 ${heightClasses[headerHeight]} ${getVariantClasses(headerVariant, headerWithBorder)} ${headerWithBorder ? "border-b" : ""} px-4 items-center`, children: [
|
|
1338
1343
|
(logo || title) && /* @__PURE__ */ jsx78("div", { className: "mr-4 shrink-0", children: logo || /* @__PURE__ */ jsx78("span", { className: "text-xl font-bold text-[hsl(var(--foreground))]", children: title }) }),
|
|
1339
1344
|
/* @__PURE__ */ jsx78("div", { className: "flex-1", children: header.content })
|
|
1340
1345
|
] }),
|
|
@@ -1913,7 +1918,10 @@ Checkbox.displayName = "Checkbox";
|
|
|
1913
1918
|
import { forwardRef as forwardRef3 } from "react";
|
|
1914
1919
|
import { jsx as jsx86, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1915
1920
|
var Toggle = forwardRef3(
|
|
1916
|
-
({ label, size = "md", className = "", disabled, checked, ...props }, ref) => {
|
|
1921
|
+
({ label, size = "md", className = "", disabled, checked, onChange, ...props }, ref) => {
|
|
1922
|
+
const handleChange = (e) => {
|
|
1923
|
+
onChange?.(e.target.checked);
|
|
1924
|
+
};
|
|
1917
1925
|
const toggleClasses = {
|
|
1918
1926
|
sm: {
|
|
1919
1927
|
switch: "w-9 h-5",
|
|
@@ -1939,6 +1947,7 @@ var Toggle = forwardRef3(
|
|
|
1939
1947
|
className: "sr-only peer",
|
|
1940
1948
|
disabled,
|
|
1941
1949
|
checked,
|
|
1950
|
+
onChange: handleChange,
|
|
1942
1951
|
...props
|
|
1943
1952
|
}
|
|
1944
1953
|
),
|