@wow-two-beta/ui 0.0.56 → 0.0.58

package/dist/{chunk-2HWZH6GF.js → chunk-FYG23O4O.js}

@@ -1,11 +1,11 @@
-import { Drawer, DrawerContent } from './chunk-46BOUO7J.js';
-import { Spinner } from './chunk-T6ZDMPHL.js';
-import { useControlled, useMediaQuery } from './chunk-NUMFGKPY.js';
-import { tv, TransitionExtensions, CssExtensions, surfaceVariants } from './chunk-RDDIOVK4.js';
-import { Announce, Presence, Slot } from './chunk-BMABNEZX.js';
-import { cn } from './chunk-LDRFQG44.js';
+import { Drawer, DrawerContent } from './chunk-OBW7JUNL.js';
+import { Spinner } from './chunk-NR5DYKSJ.js';
+import { useControlled, useMediaQuery } from './chunk-V267IMBH.js';
+import { tv, TransitionExtensions, CssExtensions, surfaceVariants } from './chunk-JYGC5SRP.js';
+import { Announce, Presence, Slot } from './chunk-TTSJZEL7.js';
+import { cn } from './chunk-X2MYOHOB.js';
 import { forwardRef, createContext, useRef, useEffect, useCallback, useMemo, Children, isValidElement, useState, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var Box = forwardRef(
   ({ as: Component = "div", className, ...props }, ref) => /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props })
@@ -108,12 +108,148 @@ var gridVariants = tv({
     gap: "4"
   }
 });
+var COLUMN_CLASSES = {
+  base: {
+    "1": "grid-cols-1",
+    "2": "grid-cols-2",
+    "3": "grid-cols-3",
+    "4": "grid-cols-4",
+    "5": "grid-cols-5",
+    "6": "grid-cols-6",
+    "8": "grid-cols-8",
+    "12": "grid-cols-12"
+  },
+  sm: {
+    "1": "sm:grid-cols-1",
+    "2": "sm:grid-cols-2",
+    "3": "sm:grid-cols-3",
+    "4": "sm:grid-cols-4",
+    "5": "sm:grid-cols-5",
+    "6": "sm:grid-cols-6",
+    "8": "sm:grid-cols-8",
+    "12": "sm:grid-cols-12"
+  },
+  md: {
+    "1": "md:grid-cols-1",
+    "2": "md:grid-cols-2",
+    "3": "md:grid-cols-3",
+    "4": "md:grid-cols-4",
+    "5": "md:grid-cols-5",
+    "6": "md:grid-cols-6",
+    "8": "md:grid-cols-8",
+    "12": "md:grid-cols-12"
+  },
+  lg: {
+    "1": "lg:grid-cols-1",
+    "2": "lg:grid-cols-2",
+    "3": "lg:grid-cols-3",
+    "4": "lg:grid-cols-4",
+    "5": "lg:grid-cols-5",
+    "6": "lg:grid-cols-6",
+    "8": "lg:grid-cols-8",
+    "12": "lg:grid-cols-12"
+  },
+  xl: {
+    "1": "xl:grid-cols-1",
+    "2": "xl:grid-cols-2",
+    "3": "xl:grid-cols-3",
+    "4": "xl:grid-cols-4",
+    "5": "xl:grid-cols-5",
+    "6": "xl:grid-cols-6",
+    "8": "xl:grid-cols-8",
+    "12": "xl:grid-cols-12"
+  }
+};
+var GAP_CLASSES = {
+  base: {
+    "0": "gap-0",
+    "1": "gap-1",
+    "2": "gap-2",
+    "3": "gap-3",
+    "4": "gap-4",
+    "5": "gap-5",
+    "6": "gap-6",
+    "8": "gap-8",
+    "10": "gap-10",
+    "12": "gap-12"
+  },
+  sm: {
+    "0": "sm:gap-0",
+    "1": "sm:gap-1",
+    "2": "sm:gap-2",
+    "3": "sm:gap-3",
+    "4": "sm:gap-4",
+    "5": "sm:gap-5",
+    "6": "sm:gap-6",
+    "8": "sm:gap-8",
+    "10": "sm:gap-10",
+    "12": "sm:gap-12"
+  },
+  md: {
+    "0": "md:gap-0",
+    "1": "md:gap-1",
+    "2": "md:gap-2",
+    "3": "md:gap-3",
+    "4": "md:gap-4",
+    "5": "md:gap-5",
+    "6": "md:gap-6",
+    "8": "md:gap-8",
+    "10": "md:gap-10",
+    "12": "md:gap-12"
+  },
+  lg: {
+    "0": "lg:gap-0",
+    "1": "lg:gap-1",
+    "2": "lg:gap-2",
+    "3": "lg:gap-3",
+    "4": "lg:gap-4",
+    "5": "lg:gap-5",
+    "6": "lg:gap-6",
+    "8": "lg:gap-8",
+    "10": "lg:gap-10",
+    "12": "lg:gap-12"
+  },
+  xl: {
+    "0": "xl:gap-0",
+    "1": "xl:gap-1",
+    "2": "xl:gap-2",
+    "3": "xl:gap-3",
+    "4": "xl:gap-4",
+    "5": "xl:gap-5",
+    "6": "xl:gap-6",
+    "8": "xl:gap-8",
+    "10": "xl:gap-10",
+    "12": "xl:gap-12"
+  }
+};
+var BREAKPOINT_ORDER = ["base", "sm", "md", "lg", "xl"];
+function resolveGridColumns(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "string") return COLUMN_CLASSES.base[value];
+  return BREAKPOINT_ORDER.map((bp) => {
+    const v = value[bp];
+    return v === void 0 ? void 0 : COLUMN_CLASSES[bp][v];
+  }).filter((c) => Boolean(c)).join(" ");
+}
+function resolveGridGap(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "string") return GAP_CLASSES.base[value];
+  return BREAKPOINT_ORDER.map((bp) => {
+    const v = value[bp];
+    return v === void 0 ? void 0 : GAP_CLASSES[bp][v];
+  }).filter((c) => Boolean(c)).join(" ");
+}
 var Grid = forwardRef(
-  ({ as: Component = "div", className, columns, gap, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ as: Component = "div", className, columns = "2", gap = "4", ...props }, ref) => /* @__PURE__ */ jsx(
     Component,
     {
       ref,
-      className: cn(gridVariants({ columns, gap }), className),
+      className: cn(
+        "grid",
+        resolveGridColumns(columns),
+        resolveGridGap(gap),
+        className
+      ),
       ...props
     }
   )
@@ -259,7 +395,7 @@ var SURFACE = {
   transparent: ""
 };
 var Frame = forwardRef(
-  ({ padding = "4", radius = "md", surface = "card", bordered = true, className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ padding = "4", radius = "md", surface = "card", isBordered = true, className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -267,7 +403,7 @@ var Frame = forwardRef(
         SURFACE[surface],
         PADDING[padding],
         RADIUS[radius],
-        bordered && "border border-border",
+        isBordered && "border border-border",
         className
       ),
       ...props
@@ -321,7 +457,9 @@ var ResizablePanels = forwardRef(
   function ResizablePanels2({ orientation = "horizontal", defaultSizes, sizes: sizesProp, onSizesChange, className, children, ...rest }, forwardedRef) {
     const panels = useRef([]);
     const containerRef = useRef(null);
+    const dragCleanupRef = useRef(null);
     const panelCount = countPanels(children);
+    useEffect(() => () => dragCleanupRef.current?.(), []);
     const initialSizes = defaultSizes && defaultSizes.length === panelCount ? defaultSizes : Array(panelCount).fill(100 / Math.max(panelCount, 1));
     const [sizes, setSizes] = useControlled({
       controlled: sizesProp,
@@ -410,11 +548,13 @@ var ResizablePanels = forwardRef(
           window.removeEventListener("mouseup", onUp);
           document.body.style.cursor = "";
           document.body.style.userSelect = "";
+          dragCleanupRef.current = null;
         };
         document.body.style.cursor = orientation === "horizontal" ? "col-resize" : "row-resize";
         document.body.style.userSelect = "none";
         window.addEventListener("mousemove", onMove);
         window.addEventListener("mouseup", onUp);
+        dragCleanupRef.current = onUp;
       },
       [orientation, sizes, setSizes]
     );
@@ -531,7 +671,7 @@ var ResizablePanel = forwardRef(
 ResizablePanel.displayName = "ResizablePanel";
 function ResizableSeparatorInner({
   index,
-  disabled,
+  isDisabled,
   className,
   onKeyDown,
   onDoubleClick,
@@ -540,7 +680,7 @@ function ResizableSeparatorInner({
   const ctx = useResizableContext();
   const [dragging, setDragging] = useState(false);
   const handleMouseDown = (e) => {
-    if (disabled) return;
+    if (isDisabled) return;
     if (e.button !== 0) return;
     e.preventDefault();
     setDragging(true);
@@ -553,7 +693,7 @@ function ResizableSeparatorInner({
   };
   const handleKeyDown = (e) => {
     onKeyDown?.(e);
-    if (e.defaultPrevented || disabled) return;
+    if (e.defaultPrevented || isDisabled) return;
     const step = e.shiftKey ? 10 : 1;
     if (ctx.orientation === "horizontal") {
       if (e.key === "ArrowLeft") {
@@ -573,31 +713,31 @@ function ResizableSeparatorInner({
       }
     }
   };
-  const ariaValueNow = ctx.sizes[index + 1] ?? 50;
-  const nextPanel = ctx.panels.current[index + 1];
+  const ariaValueNow = ctx.sizes[index] ?? 50;
+  const panelBefore = ctx.panels.current[index];
   return /* @__PURE__ */ jsx(
     "div",
     {
       role: "separator",
       "aria-orientation": ctx.orientation === "horizontal" ? "vertical" : "horizontal",
       "aria-valuenow": Math.round(ariaValueNow),
-      "aria-valuemin": nextPanel?.minSize ?? 0,
-      "aria-valuemax": nextPanel?.maxSize ?? 100,
-      "aria-disabled": disabled || void 0,
-      tabIndex: disabled ? -1 : 0,
+      "aria-valuemin": panelBefore?.minSize ?? 0,
+      "aria-valuemax": panelBefore?.maxSize ?? 100,
+      "aria-disabled": isDisabled || void 0,
+      tabIndex: isDisabled ? -1 : 0,
       "data-dragging": dragging || void 0,
       onMouseDown: handleMouseDown,
       onKeyDown: handleKeyDown,
       onDoubleClick: (e) => {
         onDoubleClick?.(e);
-        if (e.defaultPrevented || disabled) return;
+        if (e.defaultPrevented || isDisabled) return;
         ctx.resetPair(index);
       },
       className: cn(
         "flex shrink-0 items-center justify-center bg-border transition-colors",
         ctx.orientation === "horizontal" ? "w-1 cursor-col-resize hover:bg-border-strong data-[dragging]:bg-primary" : "h-1 cursor-row-resize hover:bg-border-strong data-[dragging]:bg-primary",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        disabled && "cursor-default opacity-50 hover:bg-border",
+        isDisabled && "cursor-default opacity-50 hover:bg-border",
         className
       ),
       ...rest
@@ -613,19 +753,24 @@ ResizableSeparator.displayName = "ResizableSeparator";
 ResizablePanels.Panel = ResizablePanel;
 ResizablePanels.Separator = ResizableSeparator;
 var PullToRefresh = forwardRef(
-  function PullToRefresh2({ onRefresh, threshold = 60, maxPull = 120, disabled, className, children, ...rest }, forwardedRef) {
+  function PullToRefresh2({ onRefresh, threshold = 60, maxPull = 120, isDisabled, className, children, ...rest }, forwardedRef) {
     const containerRef = useRef(null);
     const startYRef = useRef(null);
     const [pull, setPull] = useState(0);
     const [refreshing, setRefreshing] = useState(false);
     const onPointerDown = (e) => {
-      if (disabled || refreshing) return;
+      if (isDisabled || refreshing) return;
       const el = containerRef.current;
       if (!el || el.scrollTop > 0) return;
       startYRef.current = e.clientY;
     };
     const onPointerMove = (e) => {
       if (startYRef.current == null) return;
+      if (e.buttons === 0) {
+        startYRef.current = null;
+        setPull(0);
+        return;
+      }
       const dy = e.clientY - startYRef.current;
       if (dy < 0) {
         setPull(0);
@@ -651,6 +796,31 @@ var PullToRefresh = forwardRef(
         setPull(0);
       }
     };
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const onTouchMove = (e) => {
+        if (startYRef.current == null || !e.cancelable) return;
+        if (el.scrollTop > 0) return;
+        const touch = e.touches[0];
+        if (!touch) return;
+        if (touch.clientY - startYRef.current > 0) e.preventDefault();
+      };
+      el.addEventListener("touchmove", onTouchMove, { passive: false });
+      return () => el.removeEventListener("touchmove", onTouchMove);
+    }, []);
+    useEffect(() => {
+      if (pull === 0) return;
+      const finish = () => {
+        void onPointerUp();
+      };
+      window.addEventListener("pointerup", finish);
+      window.addEventListener("pointercancel", finish);
+      return () => {
+        window.removeEventListener("pointerup", finish);
+        window.removeEventListener("pointercancel", finish);
+      };
+    }, [pull]);
     const reached = pull >= threshold;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -665,7 +835,6 @@ var PullToRefresh = forwardRef(
         onPointerUp,
         onPointerCancel: onPointerUp,
         className: cn("relative h-full overflow-y-auto", className),
-        style: { touchAction: "pan-y" },
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
@@ -713,6 +882,13 @@ var BREAKPOINT_PX = {
   xl: 1280,
   "2xl": 1536
 };
+var SIDEBAR_STATIC_CLASSES = {
+  sm: "hidden sm:flex",
+  md: "hidden md:flex",
+  lg: "hidden lg:flex",
+  xl: "hidden xl:flex",
+  "2xl": "hidden 2xl:flex"
+};
 var AppShellContext = createContext(null);
 function useAppShellContext() {
   const ctx = useContext(AppShellContext);
@@ -724,14 +900,14 @@ var AppShell = forwardRef(function AppShell2({
   asideWidth = "280px",
   sidebarBreakpoint = "lg",
   asideBreakpoint = "xl",
-  sidebarOpen: sidebarOpenProp,
+  isSidebarOpen: sidebarOpenProp,
   defaultSidebarOpen = false,
   onSidebarOpenChange,
   className,
   children,
   ...rest
 }, ref) {
-  const [sidebarOpen, setSidebarOpen] = useControlled({
+  const [isSidebarOpen, setSidebarOpen] = useControlled({
     controlled: sidebarOpenProp,
     default: defaultSidebarOpen,
     onChange: onSidebarOpenChange
@@ -742,12 +918,13 @@ var AppShell = forwardRef(function AppShell2({
     () => ({
       sidebarWidth,
       asideWidth,
-      sidebarOpen,
+      sidebarBreakpoint,
+      isSidebarOpen,
       setSidebarOpen,
       isSidebarCollapsed,
       isAsideHidden
     }),
-    [sidebarWidth, asideWidth, sidebarOpen, setSidebarOpen, isSidebarCollapsed, isAsideHidden]
+    [sidebarWidth, asideWidth, sidebarBreakpoint, isSidebarOpen, setSidebarOpen, isSidebarCollapsed, isAsideHidden]
   );
   const gridTemplate = isSidebarCollapsed ? `'header header' auto 'main main' 1fr 'footer footer' auto / 1fr` : `'header header' auto 'sidebar main' 1fr 'sidebar footer' auto / ${sidebarWidth} 1fr`;
   return /* @__PURE__ */ jsx(AppShellContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
@@ -791,14 +968,15 @@ var AppShellSidebar = forwardRef(
   function AppShellSidebar2({ className, children, ...rest }, ref) {
     const ctx = useAppShellContext();
     if (ctx.isSidebarCollapsed) {
-      return /* @__PURE__ */ jsx(Drawer, { open: ctx.sidebarOpen, onOpenChange: ctx.setSidebarOpen, side: "left", children: /* @__PURE__ */ jsx(DrawerContent, { className: "w-72 max-w-[80%]", children: /* @__PURE__ */ jsx("nav", { className: cn("flex h-full flex-col", className), children }) }) });
+      return /* @__PURE__ */ jsx(Drawer, { open: ctx.isSidebarOpen, onOpenChange: ctx.setSidebarOpen, side: "left", children: /* @__PURE__ */ jsx(DrawerContent, { className: "w-72 max-w-[80%]", children: /* @__PURE__ */ jsx("nav", { className: cn("flex h-full flex-col", className), children }) }) });
     }
     return /* @__PURE__ */ jsx(
       "aside",
       {
         ref,
         className: cn(
-          "sticky top-14 hidden h-[calc(100svh-3.5rem)] overflow-y-auto border-r border-border bg-card [grid-area:sidebar] lg:flex",
+          "sticky top-14 h-[calc(100svh-3.5rem)] overflow-y-auto border-r border-border bg-card [grid-area:sidebar]",
+          SIDEBAR_STATIC_CLASSES[ctx.sidebarBreakpoint],
           className
         ),
         ...rest,
@@ -1071,7 +1249,7 @@ var Overlay = forwardRef(
     if (isPresenceMode) {
       const root = renderRoot();
       if (!root) return null;
-      return /* @__PURE__ */ jsx(Presence, { present: isOpen, children: root });
+      return /* @__PURE__ */ jsx(Presence, { isPresent: isOpen, children: root });
     }
     return renderRoot();
   }
@@ -1101,6 +1279,104 @@ var Surface = forwardRef(function Surface2({
 });
 Surface.displayName = COMPONENT_NAME2;
 
-export { AppShell, AppShellAside, AppShellContent, AppShellFooter, AppShellHeader, AppShellMain, AppShellSidebar, AspectRatio, Box, Center, Cluster, Container, Flex, Frame, Grid, HStack, Overlay, PullToRefresh, ResizablePanel, ResizablePanels, ResizableSeparator, ScrollArea, Spacer, Stack, Surface, TwoColumn, VStack, containerVariants, gridVariants, stackVariants, useAppShell };
-//# sourceMappingURL=chunk-2HWZH6GF.js.map
-//# sourceMappingURL=chunk-2HWZH6GF.js.map
+// src/layout/section/Section.variants.ts
+var sectionVariants = tv({
+  base: "w-full",
+  variants: {
+    /* Vertical padding — the band's top/bottom breathing room. */
+    py: {
+      none: "py-0",
+      sm: "py-6",
+      md: "py-10",
+      lg: "py-16",
+      xl: "py-24"
+    }
+  },
+  defaultVariants: {
+    py: "md"
+  }
+});
+var Section = forwardRef(function Section2({ tone, containerSize, py, bleed = false, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref,
+      className: cn(
+        sectionVariants({ py }),
+        tone && surfaceVariants({ variant: "subtle", tone, radius: "none" }),
+        className
+      ),
+      ...rest,
+      children: bleed ? children : /* @__PURE__ */ jsx(Container, { size: containerSize, children })
+    }
+  );
+});
+Section.displayName = "Section";
+
+// src/layout/navbar/Navbar.variants.ts
+var navbarVariants = tv({
+  base: "w-full",
+  variants: {
+    /* Sticks the band to the top of the scroll container when true. */
+    sticky: {
+      true: "sticky top-0 z-sticky",
+      false: ""
+    },
+    /* Band height — the bar's vertical size. */
+    height: {
+      sm: "h-12",
+      md: "h-14",
+      lg: "h-16"
+    }
+  },
+  defaultVariants: {
+    sticky: false,
+    height: "md"
+  }
+});
+var Navbar = forwardRef(function Navbar2({
+  start,
+  center,
+  end,
+  children,
+  containerSize,
+  height,
+  sticky = false,
+  tone,
+  bordered = true,
+  className,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      ref,
+      className: cn(
+        navbarVariants({ sticky, height }),
+        bordered && "border-b border-border",
+        tone ? surfaceVariants({ variant: "subtle", tone, radius: "none" }) : "bg-card",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(Container, { size: containerSize, className: "flex h-full items-center gap-3", children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        start != null && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-3", children: start }),
+        center != null && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-center gap-3", children: center }),
+        end != null && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 items-center gap-3",
+              center == null && "ml-auto"
+            ),
+            children: end
+          }
+        )
+      ] }) })
+    }
+  );
+});
+Navbar.displayName = "Navbar";
+
+export { AppShell, AppShellAside, AppShellContent, AppShellFooter, AppShellHeader, AppShellMain, AppShellSidebar, AspectRatio, Box, Center, Cluster, Container, Flex, Frame, Grid, HStack, Navbar, Overlay, PullToRefresh, ResizablePanel, ResizablePanels, ResizableSeparator, ScrollArea, Section, Spacer, Stack, Surface, TwoColumn, VStack, containerVariants, gridVariants, navbarVariants, resolveGridColumns, resolveGridGap, sectionVariants, stackVariants, useAppShell };
+//# sourceMappingURL=chunk-FYG23O4O.js.map
+//# sourceMappingURL=chunk-FYG23O4O.js.map