@wow-two-beta/ui 0.0.57 → 0.0.59

package/dist/{chunk-WOKIYORV.js → chunk-MTE5E6OQ.js}

@@ -1,11 +1,11 @@
-import { Drawer, DrawerContent } from './chunk-VYOQYXK6.js';
-import { Spinner } from './chunk-USGZGMLY.js';
-import { useControlled, useMediaQuery } from './chunk-5PMOT5MD.js';
-import { tv, TransitionExtensions, CssExtensions, surfaceVariants } from './chunk-XDP6GEBA.js';
-import { Announce, Presence, Slot } from './chunk-UI4RT5JF.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
     }
   )
@@ -199,6 +335,52 @@ var Center = forwardRef(
   )
 );
 Center.displayName = "Center";
+
+// src/layout/divider/Divider.variants.ts
+var dividerVariants = tv({
+  base: "border-border",
+  variants: {
+    orientation: {
+      horizontal: "w-full border-t",
+      vertical: "h-full self-stretch border-l"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var Divider = forwardRef(
+  ({ orientation = "horizontal", label, className, ...props }, ref) => {
+    if (label != null && orientation === "horizontal") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "aria-orientation": "horizontal",
+          className: cn("flex w-full items-center gap-3", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: label }),
+            /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        className: cn(dividerVariants({ orientation }), className),
+        ...props
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
 var ScrollArea = forwardRef(
   ({ axis = "vertical", className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -259,7 +441,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 +449,7 @@ var Frame = forwardRef(
         SURFACE[surface],
         PADDING[padding],
         RADIUS[radius],
-        bordered && "border border-border",
+        isBordered && "border border-border",
         className
       ),
       ...props
@@ -535,7 +717,7 @@ var ResizablePanel = forwardRef(
 ResizablePanel.displayName = "ResizablePanel";
 function ResizableSeparatorInner({
   index,
-  disabled,
+  isDisabled,
   className,
   onKeyDown,
   onDoubleClick,
@@ -544,7 +726,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);
@@ -557,7 +739,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") {
@@ -587,21 +769,21 @@ function ResizableSeparatorInner({
       "aria-valuenow": Math.round(ariaValueNow),
       "aria-valuemin": panelBefore?.minSize ?? 0,
       "aria-valuemax": panelBefore?.maxSize ?? 100,
-      "aria-disabled": disabled || void 0,
-      tabIndex: disabled ? -1 : 0,
+      "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
@@ -617,13 +799,13 @@ 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;
@@ -764,14 +946,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
@@ -783,12 +965,12 @@ var AppShell = forwardRef(function AppShell2({
       sidebarWidth,
       asideWidth,
       sidebarBreakpoint,
-      sidebarOpen,
+      isSidebarOpen,
       setSidebarOpen,
       isSidebarCollapsed,
       isAsideHidden
     }),
-    [sidebarWidth, asideWidth, sidebarBreakpoint, 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(
@@ -832,7 +1014,7 @@ 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",
@@ -1113,7 +1295,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();
   }
@@ -1143,6 +1325,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-WOKIYORV.js.map
-//# sourceMappingURL=chunk-WOKIYORV.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, Divider, Flex, Frame, Grid, HStack, Navbar, Overlay, PullToRefresh, ResizablePanel, ResizablePanels, ResizableSeparator, ScrollArea, Section, Spacer, Stack, Surface, TwoColumn, VStack, containerVariants, dividerVariants, gridVariants, navbarVariants, resolveGridColumns, resolveGridGap, sectionVariants, stackVariants, useAppShell };
+//# sourceMappingURL=chunk-MTE5E6OQ.js.map
+//# sourceMappingURL=chunk-MTE5E6OQ.js.map