@caratlogic/design-system 0.0.3 → 0.0.5

package/dist/index.esm.js

@@ -3339,19 +3339,11 @@ const Loader = createLucideIcon("loader", __iconNode$k);
 
 
 const __iconNode$j = [
-  [
-    "path",
-    {
-      d: "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z",
-      key: "e79jfc"
-    }
-  ],
-  ["circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor", key: "1okk4w" }],
-  ["circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor", key: "f64h9f" }],
-  ["circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor", key: "qy21gx" }],
-  ["circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor", key: "fotxhn" }]
+  ["path", { d: "M4 12h16", key: "1lakjw" }],
+  ["path", { d: "M4 18h16", key: "19g7jn" }],
+  ["path", { d: "M4 6h16", key: "1o0s65" }]
 ];
-const Palette = createLucideIcon("palette", __iconNode$j);
+const Menu$1 = createLucideIcon("menu", __iconNode$j);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3362,10 +3354,19 @@ const Palette = createLucideIcon("palette", __iconNode$j);
 
 
 const __iconNode$i = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }]
+  [
+    "path",
+    {
+      d: "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z",
+      key: "e79jfc"
+    }
+  ],
+  ["circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor", key: "1okk4w" }],
+  ["circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor", key: "f64h9f" }],
+  ["circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor", key: "qy21gx" }],
+  ["circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor", key: "fotxhn" }]
 ];
-const PanelLeft = createLucideIcon("panel-left", __iconNode$i);
+const Palette = createLucideIcon("palette", __iconNode$i);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -65530,15 +65531,26 @@ function isValidOrientation(orientation) {
 }
 var Root = Separator;
 
-// Simple media query hook for mobile screens
-function useIsMobile(breakpoint = 768) {
-    const [isMobile, setIsMobile] = React.useState(typeof window !== 'undefined' ? window.innerWidth < breakpoint : false);
+const MOBILE_MAX = 767;
+const TABLET_MAX = 1025;
+function useMediaQuery(query) {
+    const [matches, setMatches] = React.useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches);
     React.useEffect(() => {
-        const handler = () => setIsMobile(window.innerWidth < breakpoint);
-        window.addEventListener('resize', handler);
-        return () => window.removeEventListener('resize', handler);
-    }, [breakpoint]);
-    return isMobile;
+        const mq = window.matchMedia(query);
+        setMatches(mq.matches);
+        const handler = (e) => setMatches(e.matches);
+        mq.addEventListener('change', handler);
+        return () => mq.removeEventListener('change', handler);
+    }, [query]);
+    return matches;
+}
+/** true for 0–767px */
+function useIsMobile() {
+    return useMediaQuery(`(max-width: ${MOBILE_MAX}px)`);
+}
+/** true for 768–1023px */
+function useIsTablet() {
+    return useMediaQuery(`(min-width: ${MOBILE_MAX + 1}px) and (max-width: ${TABLET_MAX}px)`);
 }
 
 // src/slot.tsx
@@ -66051,7 +66063,9 @@ function useSidebar() {
     return context;
 }
 const SidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
-    const isMobile = useIsMobile();
+    const _isMobile = useIsMobile();
+    const _isTablet = useIsTablet();
+    const isMobile = _isMobile || _isTablet;
     const [openMobile, setOpenMobile] = React.useState(false);
     const [_open, _setOpen] = React.useState(defaultOpen);
     const open = openProp ?? _open;
@@ -66125,7 +66139,7 @@ const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref)
     return (jsxs("button", { ref: ref, "data-sidebar": "trigger", className: cn('inline-flex h-8 w-7 cursor-pointer items-center justify-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', className), onClick: (e) => {
             onClick?.(e);
             toggleSidebar();
-        }, ...props, children: [jsx(PanelLeft, { size: 16 }), jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
+        }, ...props, children: [jsx(Menu$1, { size: 16 }), jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
 });
 SidebarTrigger.displayName = 'SidebarTrigger';
 const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
@@ -74220,11 +74234,11 @@ const PartnerShareCard = ({ index, percentage, name, subtitle, contributionLabel
 };
 
 function CreateFormPageHeader({ title, onBack, backLabel = 'Go back', }) {
-    return (jsxs("div", { className: "mb-6 flex items-center justify-between gap-4", children: [jsx("h1", { className: "min-w-0 text-xl font-semibold leading-7 text-foreground", children: title }), jsx("div", { className: "flex shrink-0 items-center gap-2", children: jsxs(Button$1, { type: "button", variant: "ghost", onClick: onBack, className: "h-8 shrink-0 gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-secondary-foreground hover:text-secondary-foreground", children: [jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true }), backLabel] }) })] }));
+    return (jsxs("div", { className: "mb-4 flex items-center justify-between gap-4", children: [jsx("h1", { className: "min-w-0 text-xl font-semibold leading-7 text-foreground", children: title }), jsx("div", { className: "flex shrink-0 items-center gap-2", children: jsxs(Button$1, { type: "button", variant: "ghost", onClick: onBack, className: "h-8 shrink-0 gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-secondary-foreground hover:text-secondary-foreground", children: [jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true }), backLabel] }) })] }));
 }
 
 function CreateFormPageShell({ title, onBack, children, backLabel, scrollable = false, containerClassName, }) {
-    const content = (jsxs("div", { className: cn('mx-auto w-full max-w-4xl px-6 py-8', containerClassName), children: [jsx(CreateFormPageHeader, { title: title, onBack: onBack, backLabel: backLabel }), children] }));
+    const content = (jsxs("div", { className: cn('mx-auto w-full max-w-4xl px-4 py-4', containerClassName), children: [jsx(CreateFormPageHeader, { title: title, onBack: onBack, backLabel: backLabel }), children] }));
     if (scrollable) {
         return (jsx("div", { className: "h-full min-h-0 overflow-y-auto bg-card", children: content }));
     }