@wow-two-beta/ui 0.0.14 → 0.0.16

package/dist/chunk-SM2TOB4U.js

@@ -0,0 +1,641 @@
+import { useControlled } from './chunk-4P2TFUVW.js';
+import { tv } from './chunk-BMBIZLO4.js';
+import { cn } from './chunk-KZ4VFY2T.js';
+import { forwardRef, createContext, useRef, useEffect, useCallback, useMemo, Children, isValidElement, useState, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Box = forwardRef(
+  ({ as: Component = "div", className, ...props }, ref) => /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props })
+);
+Box.displayName = "Box";
+
+// src/layout/stack/Stack.variants.ts
+var stackVariants = tv({
+  base: "flex",
+  variants: {
+    direction: {
+      row: "flex-row",
+      column: "flex-col",
+      "row-reverse": "flex-row-reverse",
+      "column-reverse": "flex-col-reverse"
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch",
+      baseline: "items-baseline"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    gap: {
+      "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"
+    },
+    wrap: {
+      wrap: "flex-wrap",
+      nowrap: "flex-nowrap",
+      "wrap-reverse": "flex-wrap-reverse"
+    }
+  },
+  defaultVariants: {
+    direction: "column",
+    gap: "4"
+  }
+});
+var Stack = forwardRef(
+  ({ as: Component = "div", className, direction, align, justify, gap, wrap, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(stackVariants({ direction, align, justify, gap, wrap }), className),
+      ...props
+    }
+  )
+);
+Stack.displayName = "Stack";
+var HStack = forwardRef((props, ref) => /* @__PURE__ */ jsx(Stack, { ref, direction: "row", ...props }));
+HStack.displayName = "HStack";
+var VStack = forwardRef((props, ref) => /* @__PURE__ */ jsx(Stack, { ref, direction: "column", ...props }));
+VStack.displayName = "VStack";
+
+// src/layout/grid/Grid.variants.ts
+var gridVariants = tv({
+  base: "grid",
+  variants: {
+    columns: {
+      "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"
+    },
+    gap: {
+      "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"
+    }
+  },
+  defaultVariants: {
+    columns: "2",
+    gap: "4"
+  }
+});
+var Grid = forwardRef(
+  ({ as: Component = "div", className, columns, gap, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(gridVariants({ columns, gap }), className),
+      ...props
+    }
+  )
+);
+Grid.displayName = "Grid";
+
+// src/layout/container/Container.variants.ts
+var containerVariants = tv({
+  base: "mx-auto w-full px-4",
+  variants: {
+    size: {
+      sm: "max-w-screen-sm",
+      md: "max-w-screen-md",
+      lg: "max-w-screen-lg",
+      xl: "max-w-screen-xl",
+      "2xl": "max-w-screen-2xl",
+      full: "max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+var Container = forwardRef(
+  ({ as: Component = "div", className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(containerVariants({ size }), className),
+      ...props
+    }
+  )
+);
+Container.displayName = "Container";
+var Flex = forwardRef(
+  ({ as: Component = "div", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn("flex", className),
+      ...props
+    }
+  )
+);
+Flex.displayName = "Flex";
+var AspectRatio = forwardRef(
+  ({ ratio = 1, className, style, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("relative w-full", className),
+      style: { aspectRatio: `${ratio}`, ...style },
+      ...props,
+      children
+    }
+  )
+);
+AspectRatio.displayName = "AspectRatio";
+var Spacer = forwardRef(
+  ({ size, axis = "horizontal", className, style, ...props }, ref) => {
+    const fixed = size !== void 0 ? axis === "horizontal" ? { width: typeof size === "number" ? `${size}px` : size, flexShrink: 0 } : { height: typeof size === "number" ? `${size}px` : size, flexShrink: 0 } : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(size === void 0 && "flex-1", className),
+        style: { ...fixed, ...style },
+        ...props
+      }
+    );
+  }
+);
+Spacer.displayName = "Spacer";
+var Center = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center justify-center", className),
+      ...props
+    }
+  )
+);
+Center.displayName = "Center";
+var ScrollArea = forwardRef(
+  ({ axis = "vertical", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative",
+        axis === "vertical" && "overflow-y-auto overflow-x-hidden",
+        axis === "horizontal" && "overflow-x-auto overflow-y-hidden",
+        axis === "both" && "overflow-auto",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ScrollArea.displayName = "ScrollArea";
+var GAP = {
+  "0": "gap-0",
+  "1": "gap-1",
+  "2": "gap-2",
+  "3": "gap-3",
+  "4": "gap-4",
+  "6": "gap-6",
+  "8": "gap-8"
+};
+var ALIGN = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  baseline: "items-baseline"
+};
+var Inline = forwardRef(
+  ({ gap = "2", align = "center", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-wrap", GAP[gap], ALIGN[align], className),
+      ...props
+    }
+  )
+);
+Inline.displayName = "Inline";
+var GAP2 = {
+  "2": "gap-2",
+  "3": "gap-3",
+  "4": "gap-4",
+  "6": "gap-6",
+  "8": "gap-8"
+};
+var JUSTIFY = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end"
+};
+var Cluster = forwardRef(
+  ({ gap = "4", justify = "center", className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-wrap items-center", GAP2[gap], JUSTIFY[justify], className),
+      ...props
+    }
+  )
+);
+Cluster.displayName = "Cluster";
+var PADDING = {
+  "0": "",
+  "2": "p-2",
+  "3": "p-3",
+  "4": "p-4",
+  "6": "p-6",
+  "8": "p-8"
+};
+var RADIUS = {
+  none: "",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg"
+};
+var SURFACE = {
+  card: "bg-card text-card-foreground",
+  muted: "bg-muted text-foreground",
+  transparent: ""
+};
+var Frame = forwardRef(
+  ({ padding = "4", radius = "md", surface = "card", bordered = true, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        SURFACE[surface],
+        PADDING[padding],
+        RADIUS[radius],
+        bordered && "border border-border",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Frame.displayName = "Frame";
+var GAP3 = {
+  "0": "gap-0",
+  "4": "gap-4",
+  "6": "gap-6",
+  "8": "gap-8",
+  "10": "gap-10"
+};
+var TwoColumn = forwardRef(
+  ({ aside, children, asideWidth = "w-64", asideSide = "left", gap = "6", className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex w-full",
+        asideSide === "right" && "flex-row-reverse",
+        GAP3[gap],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("aside", { className: cn("shrink-0", asideWidth), children: aside }),
+        /* @__PURE__ */ jsx("main", { className: "min-w-0 flex-1", children })
+      ]
+    }
+  )
+);
+TwoColumn.displayName = "TwoColumn";
+var ResizableContext = createContext(null);
+function useResizableContext() {
+  const ctx = useContext(ResizableContext);
+  if (!ctx) throw new Error("ResizablePanels.* must be used inside <ResizablePanels>");
+  return ctx;
+}
+function countPanels(children) {
+  let n = 0;
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type.displayName === "ResizablePanel") {
+      n += 1;
+    }
+  });
+  return n;
+}
+var ResizablePanels = forwardRef(
+  function ResizablePanels2({ orientation = "horizontal", defaultSizes, sizes: sizesProp, onSizesChange, className, children, ...rest }, forwardedRef) {
+    const panels = useRef([]);
+    const containerRef = useRef(null);
+    const panelCount = countPanels(children);
+    const initialSizes = defaultSizes && defaultSizes.length === panelCount ? defaultSizes : Array(panelCount).fill(100 / Math.max(panelCount, 1));
+    const [sizes, setSizes] = useControlled({
+      controlled: sizesProp,
+      default: initialSizes,
+      onChange: onSizesChange
+    });
+    useEffect(() => {
+      if (sizes.length === panelCount) return;
+      setSizes(Array(panelCount).fill(100 / Math.max(panelCount, 1)));
+    }, [panelCount]);
+    const applyDelta = useCallback(
+      (separatorIndex, deltaPct) => {
+        const a = separatorIndex;
+        const b = separatorIndex + 1;
+        const aInfo = panels.current[a];
+        const bInfo = panels.current[b];
+        if (!aInfo || !bInfo) return;
+        const next = sizes.slice();
+        let nextA = next[a] + deltaPct;
+        let nextB = next[b] - deltaPct;
+        if (nextA < aInfo.minSize) {
+          const adj = aInfo.minSize - nextA;
+          nextA += adj;
+          nextB -= adj;
+        }
+        if (nextB < bInfo.minSize) {
+          const adj = bInfo.minSize - nextB;
+          nextB += adj;
+          nextA -= adj;
+        }
+        if (nextA > aInfo.maxSize) {
+          const adj = nextA - aInfo.maxSize;
+          nextA -= adj;
+          nextB += adj;
+        }
+        if (nextB > bInfo.maxSize) {
+          const adj = nextB - bInfo.maxSize;
+          nextB -= adj;
+          nextA += adj;
+        }
+        next[a] = nextA;
+        next[b] = nextB;
+        setSizes(next);
+      },
+      [sizes, setSizes]
+    );
+    const beginDrag = useCallback(
+      (separatorIndex, event) => {
+        const container = containerRef.current;
+        if (!container) return;
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const rect = container.getBoundingClientRect();
+        const total = orientation === "horizontal" ? rect.width : rect.height;
+        if (total === 0) return;
+        const startSizes = sizes.slice();
+        const onMove = (e) => {
+          const deltaPx = orientation === "horizontal" ? e.clientX - startX : e.clientY - startY;
+          const deltaPct = deltaPx / total * 100;
+          const a = separatorIndex;
+          const b = separatorIndex + 1;
+          const aInfo = panels.current[a];
+          const bInfo = panels.current[b];
+          if (!aInfo || !bInfo) return;
+          let nextA = startSizes[a] + deltaPct;
+          let nextB = startSizes[b] - deltaPct;
+          nextA = Math.max(aInfo.minSize, Math.min(aInfo.maxSize, nextA));
+          nextB = Math.max(bInfo.minSize, Math.min(bInfo.maxSize, nextB));
+          const sum = nextA + nextB;
+          const startSum = startSizes[a] + startSizes[b];
+          if (sum !== startSum) {
+            const diff = startSum - sum;
+            if (nextA + diff <= aInfo.maxSize && nextA + diff >= aInfo.minSize) {
+              nextA = nextA + diff;
+            } else {
+              nextB = nextB + diff;
+            }
+          }
+          const next = startSizes.slice();
+          next[a] = nextA;
+          next[b] = nextB;
+          setSizes(next);
+        };
+        const onUp = () => {
+          window.removeEventListener("mousemove", onMove);
+          window.removeEventListener("mouseup", onUp);
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+        };
+        document.body.style.cursor = orientation === "horizontal" ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+      },
+      [orientation, sizes, setSizes]
+    );
+    const resetPair = useCallback(
+      (separatorIndex) => {
+        const a = separatorIndex;
+        const b = separatorIndex + 1;
+        const aInfo = panels.current[a];
+        const bInfo = panels.current[b];
+        if (!aInfo || !bInfo) return;
+        const next = sizes.slice();
+        const total = next[a] + next[b];
+        next[a] = total * aInfo.defaultSize / (aInfo.defaultSize + bInfo.defaultSize);
+        next[b] = total - next[a];
+        setSizes(next);
+      },
+      [sizes, setSizes]
+    );
+    const ctx = useMemo(
+      () => ({
+        orientation,
+        sizes,
+        panels,
+        containerRef,
+        beginDrag,
+        nudge: applyDelta,
+        resetPair
+      }),
+      [orientation, sizes, beginDrag, applyDelta, resetPair]
+    );
+    let panelIdx = 0;
+    let sepIdx = 0;
+    const elements = Children.map(children, (child) => {
+      if (!isValidElement(child)) return child;
+      const displayName = child.type.displayName;
+      if (displayName === "ResizablePanel") {
+        const node = /* @__PURE__ */ jsx(
+          ResizablePanelInner,
+          {
+            index: panelIdx,
+            ...child.props
+          },
+          `p-${panelIdx}`
+        );
+        panelIdx += 1;
+        return node;
+      }
+      if (displayName === "ResizableSeparator") {
+        const node = /* @__PURE__ */ jsx(
+          ResizableSeparatorInner,
+          {
+            index: sepIdx,
+            ...child.props
+          },
+          `s-${sepIdx}`
+        );
+        sepIdx += 1;
+        return node;
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsx(ResizableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (el) => {
+          containerRef.current = el;
+          if (typeof forwardedRef === "function") forwardedRef(el);
+          else if (forwardedRef) forwardedRef.current = el;
+        },
+        "data-orientation": orientation,
+        className: cn(
+          "flex h-full w-full",
+          orientation === "horizontal" ? "flex-row" : "flex-col",
+          className
+        ),
+        ...rest,
+        children: elements
+      }
+    ) });
+  }
+);
+function ResizablePanelInner({
+  index,
+  defaultSize = 100,
+  minSize = 0,
+  maxSize = 100,
+  className,
+  children,
+  ...rest
+}) {
+  const ctx = useResizableContext();
+  if (!ctx.panels.current[index]) {
+    ctx.panels.current[index] = { index, defaultSize, minSize, maxSize };
+  } else {
+    ctx.panels.current[index] = { index, defaultSize, minSize, maxSize };
+  }
+  const size = ctx.sizes[index] ?? defaultSize;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-panel-index": index,
+      className: cn("overflow-auto", className),
+      style: ctx.orientation === "horizontal" ? { width: `${size}%`, height: "100%" } : { height: `${size}%`, width: "100%" },
+      ...rest,
+      children
+    }
+  );
+}
+var ResizablePanel = forwardRef(
+  function ResizablePanel2() {
+    return null;
+  }
+);
+ResizablePanel.displayName = "ResizablePanel";
+function ResizableSeparatorInner({
+  index,
+  disabled,
+  className,
+  onKeyDown,
+  onDoubleClick,
+  ...rest
+}) {
+  const ctx = useResizableContext();
+  const [dragging, setDragging] = useState(false);
+  const handleMouseDown = (e) => {
+    if (disabled) return;
+    if (e.button !== 0) return;
+    e.preventDefault();
+    setDragging(true);
+    ctx.beginDrag(index, e);
+    const onUp = () => {
+      setDragging(false);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mouseup", onUp);
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || disabled) return;
+    const step = e.shiftKey ? 10 : 1;
+    if (ctx.orientation === "horizontal") {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        ctx.nudge(index, -step);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        ctx.nudge(index, step);
+      }
+    } else {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        ctx.nudge(index, -step);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        ctx.nudge(index, step);
+      }
+    }
+  };
+  const ariaValueNow = ctx.sizes[index + 1] ?? 50;
+  const nextPanel = ctx.panels.current[index + 1];
+  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,
+      "data-dragging": dragging || void 0,
+      onMouseDown: handleMouseDown,
+      onKeyDown: handleKeyDown,
+      onDoubleClick: (e) => {
+        onDoubleClick?.(e);
+        if (e.defaultPrevented || disabled) 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",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+var ResizableSeparator = forwardRef(
+  function ResizableSeparator2() {
+    return null;
+  }
+);
+ResizableSeparator.displayName = "ResizableSeparator";
+ResizablePanels.Panel = ResizablePanel;
+ResizablePanels.Separator = ResizableSeparator;
+
+export { AspectRatio, Box, Center, Cluster, Container, Flex, Frame, Grid, HStack, Inline, ResizablePanel, ResizablePanels, ResizableSeparator, ScrollArea, Spacer, Stack, TwoColumn, VStack, containerVariants, gridVariants, stackVariants };
+//# sourceMappingURL=chunk-SM2TOB4U.js.map
+//# sourceMappingURL=chunk-SM2TOB4U.js.map