@marcoschwartz/lite-ui 0.17.0 → 0.18.1

package/dist/index.d.mts

@@ -80,6 +80,7 @@ interface AppShellProps {
         width?: 'sm' | 'md' | 'lg';
         breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
         position?: 'side' | 'top';
+        variant?: 'solid' | 'glass' | 'transparent';
     };
     header?: React.ReactNode;
     navbarTitle?: string;

package/dist/index.d.ts

@@ -80,6 +80,7 @@ interface AppShellProps {
         width?: 'sm' | 'md' | 'lg';
         breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
         position?: 'side' | 'top';
+        variant?: 'solid' | 'glass' | 'transparent';
     };
     header?: React.ReactNode;
     navbarTitle?: string;

package/dist/index.js

@@ -615,7 +615,7 @@ var Navbar = ({
 }) => {
   const { theme } = useTheme();
   const baseClasses = sticky ? "sticky top-0 z-40" : "";
-  const getVariantClasses = () => {
+  const getVariantClasses2 = () => {
     switch (variant) {
       case "glass":
         return "bg-transparent backdrop-blur-xl";
@@ -626,7 +626,7 @@ var Navbar = ({
         return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `${getVariantClasses()} ${baseClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `${getVariantClasses2()} ${baseClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
     logo && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center", children: logo }),
     children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-6", children })
   ] }) }) });
@@ -1245,6 +1245,17 @@ var breakpointClasses = {
   lg: "lg",
   xl: "xl"
 };
+var getVariantClasses = (variant) => {
+  switch (variant) {
+    case "glass":
+      return "bg-transparent backdrop-blur-xl";
+    case "transparent":
+      return "bg-transparent";
+    case "solid":
+    default:
+      return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
+  }
+};
 var AppShell = ({
   children,
   navbar,
@@ -1281,7 +1292,7 @@ var AppShell = ({
     const mobileMenuClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
     const desktopNavClass = navbarBreakpoint === "sm" ? "sm:flex" : navbarBreakpoint === "md" ? "md:flex" : navbarBreakpoint === "lg" ? "lg:flex" : "xl:flex";
     return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("nav", { className: "sticky top-0 z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("nav", { className: `sticky top-0 z-30 ${getVariantClasses(navbar.variant)}`, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center", children: navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `hidden ${desktopNavClass} items-center gap-6`, children: navbar.content }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
@@ -1335,7 +1346,7 @@ var AppShell = ({
     const mobileDrawerClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
     const sidebarWidthClass = navbarWidth === "sm" ? "w-48" : navbarWidth === "lg" ? "w-80" : "w-64";
     return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileHeaderClass} sticky top-0 z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileHeaderClass} sticky top-0 z-30 ${getVariantClasses(navbar.variant)} px-4 py-3 flex items-center justify-between`, children: [
         navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "button",
@@ -1349,7 +1360,7 @@ var AppShell = ({
       ] }),
       header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
       /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-1 min-h-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("aside", { className: `hidden ${desktopNavbarClass} ${sidebarWidthClass} bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto shrink-0`, children: navbar.content }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("aside", { className: `hidden ${desktopNavbarClass} ${sidebarWidthClass} ${navbar.variant === "glass" ? "bg-transparent backdrop-blur-xl" : navbar.variant === "transparent" ? "bg-transparent" : "bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700"} overflow-y-auto shrink-0`, children: navbar.content }),
         isMobileNavbarOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "div",
@@ -3084,15 +3095,22 @@ var Slider = ({
     setInternalValue(newValue);
     onChange?.(newValue);
   };
-  const handleRangeMouseDown = (e, handle) => {
+  const handleRangeStart = (clientX, handle) => {
     if (disabled) return;
-    e.preventDefault();
     setIsDragging(handle);
   };
-  const handleRangeMouseMove = (e) => {
+  const handleRangeMouseDown = (e, handle) => {
+    e.preventDefault();
+    handleRangeStart(e.clientX, handle);
+  };
+  const handleRangeTouchStart = (e, handle) => {
+    e.preventDefault();
+    handleRangeStart(e.touches[0].clientX, handle);
+  };
+  const updateRangeValue = (clientX) => {
     if (!isDragging || !trackRef.current || disabled) return;
     const rect = trackRef.current.getBoundingClientRect();
-    const percentage2 = Math.max(0, Math.min(100, (e.clientX - rect.left) / rect.width * 100));
+    const percentage2 = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100));
     const newValue = Math.round(percentage2 / 100 * (max - min) / step) * step + min;
     if (isDragging === "min") {
       const newMin = Math.min(newValue, rangeValue[1] - step);
@@ -3106,16 +3124,28 @@ var Slider = ({
       onRangeChange?.(newRange);
     }
   };
-  const handleRangeMouseUp = () => {
+  const handleRangeMouseMove = (e) => {
+    updateRangeValue(e.clientX);
+  };
+  const handleRangeTouchMove = (e) => {
+    if (e.touches.length > 0) {
+      updateRangeValue(e.touches[0].clientX);
+    }
+  };
+  const handleRangeEnd = () => {
     setIsDragging(null);
   };
   import_react18.default.useEffect(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleRangeMouseMove);
-      document.addEventListener("mouseup", handleRangeMouseUp);
+      document.addEventListener("mouseup", handleRangeEnd);
+      document.addEventListener("touchmove", handleRangeTouchMove);
+      document.addEventListener("touchend", handleRangeEnd);
       return () => {
         document.removeEventListener("mousemove", handleRangeMouseMove);
-        document.removeEventListener("mouseup", handleRangeMouseUp);
+        document.removeEventListener("mouseup", handleRangeEnd);
+        document.removeEventListener("touchmove", handleRangeTouchMove);
+        document.removeEventListener("touchend", handleRangeEnd);
       };
     }
   }, [isDragging, rangeValue]);
@@ -3152,6 +3182,7 @@ var Slider = ({
             `,
             style: { left: `${minPercentage}%` },
             onMouseDown: (e) => handleRangeMouseDown(e, "min"),
+            onTouchStart: (e) => handleRangeTouchStart(e, "min"),
             role: "slider",
             "aria-label": `${label ? label + " " : ""}minimum value`,
             "aria-valuemin": min,
@@ -3168,6 +3199,7 @@ var Slider = ({
             `,
             style: { left: `${maxPercentage}%` },
             onMouseDown: (e) => handleRangeMouseDown(e, "max"),
+            onTouchStart: (e) => handleRangeTouchStart(e, "max"),
             role: "slider",
             "aria-label": `${label ? label + " " : ""}maximum value`,
             "aria-valuemin": rangeValue[0],