@wow-two-beta/ui 0.0.9 → 0.0.11

package/dist/chunk-52DFDWY3.js

@@ -0,0 +1,678 @@
+import { Portal, ScrollLockProvider, DismissableLayer, AnchoredPositioner, OverlayArrow } from './chunk-YANOG5YR.js';
+import { useControlled } from './chunk-4P2TFUVW.js';
+import { Slot } from './chunk-33IOXQYO.js';
+import { composeRefs } from './chunk-DN7WBRIV.js';
+import { cn } from './chunk-KZ4VFY2T.js';
+import { forwardRef, createContext, useContext, useRef, useId, useMemo, useCallback, isValidElement, cloneElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { X } from 'lucide-react';
+import { FocusScope } from '@radix-ui/react-focus-scope';
+
+var Backdrop = forwardRef(function Backdrop2({ open = true, blur, pointerEvents = "auto", inline, className, style, ...rest }, ref) {
+  if (!open) return null;
+  const node = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-state": open ? "open" : "closed",
+      style: { pointerEvents, ...style },
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 animate-in fade-in-0",
+        blur && "backdrop-blur-sm",
+        className
+      ),
+      ...rest
+    }
+  );
+  return inline ? node : /* @__PURE__ */ jsx(Portal, { children: node });
+});
+var DialogContext = createContext(null);
+function useDialogContext() {
+  const ctx = useContext(DialogContext);
+  if (!ctx) throw new Error("Dialog.* must be used inside <Dialog>");
+  return ctx;
+}
+function Dialog({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  dismissOnOutsideClick = true,
+  dismissOnEscape = true,
+  role = "dialog",
+  children
+}) {
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const ctx = useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef,
+      titleId,
+      descriptionId,
+      role,
+      dismissOnOutsideClick,
+      dismissOnEscape
+    }),
+    [open, setOpen, titleId, descriptionId, role, dismissOnOutsideClick, dismissOnEscape]
+  );
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: ctx, children });
+}
+var DialogTrigger = forwardRef(
+  function DialogTrigger2({ asChild, onClick, children, ...rest }, forwardedRef) {
+    const ctx = useDialogContext();
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        type: "button",
+        "aria-haspopup": ctx.role === "alertdialog" ? "dialog" : "dialog",
+        "aria-expanded": ctx.open,
+        "data-state": ctx.open ? "open" : "closed",
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.setOpen(true);
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var DialogContent = forwardRef(
+  function DialogContent2({ hideBackdrop, blur, className, children, ...rest }, forwardedRef) {
+    const ctx = useDialogContext();
+    if (!ctx.open) return null;
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(ScrollLockProvider, { children: [
+      !hideBackdrop && /* @__PURE__ */ jsx(
+        Backdrop,
+        {
+          inline: true,
+          blur,
+          onClick: () => {
+            if (ctx.dismissOnOutsideClick) ctx.setOpen(false);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 grid place-items-center overflow-y-auto p-4", children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
+        DismissableLayer,
+        {
+          disableEscape: !ctx.dismissOnEscape,
+          onEscape: () => ctx.setOpen(false),
+          disableOutsideClick: true,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: forwardedRef,
+              role: ctx.role,
+              "aria-modal": "true",
+              "aria-labelledby": ctx.titleId,
+              "aria-describedby": ctx.descriptionId,
+              "data-state": "open",
+              className: cn(
+                "relative w-full max-w-lg rounded-lg border border-border bg-background p-6 shadow-lg outline-none animate-in fade-in-0 zoom-in-95",
+                className
+              ),
+              ...rest,
+              children
+            }
+          )
+        }
+      ) }) })
+    ] }) });
+  }
+);
+function DialogHeader({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex flex-col gap-1.5", className), ...rest, children });
+}
+function DialogTitle({ className, children, ...rest }) {
+  const ctx = useDialogContext();
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      id: ctx.titleId,
+      className: cn("text-lg font-semibold leading-none text-foreground", className),
+      ...rest,
+      children
+    }
+  );
+}
+function DialogDescription({
+  className,
+  children,
+  ...rest
+}) {
+  const ctx = useDialogContext();
+  return /* @__PURE__ */ jsx("p", { id: ctx.descriptionId, className: cn("text-sm text-muted-foreground", className), ...rest, children });
+}
+function DialogBody({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("text-sm text-foreground", className), ...rest, children });
+}
+function DialogFooter({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var DialogClose = forwardRef(function DialogClose2({ asChild, onClick, className, children, ...rest }, forwardedRef) {
+  const ctx = useDialogContext();
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: forwardedRef,
+      type: "button",
+      "aria-label": children ? void 0 : "Close",
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        ctx.setOpen(false);
+        requestAnimationFrame(() => ctx.triggerRef.current?.focus());
+      },
+      className: asChild ? className : cn(
+        "absolute right-4 top-4 grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+    }
+  );
+});
+Dialog.Trigger = DialogTrigger;
+Dialog.Content = DialogContent;
+Dialog.Header = DialogHeader;
+Dialog.Title = DialogTitle;
+Dialog.Description = DialogDescription;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
+Dialog.Close = DialogClose;
+function AlertDialog(props) {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, role: "alertdialog", dismissOnOutsideClick: false });
+}
+var AlertDialogContent = forwardRef(
+  function AlertDialogContent2(props, ref) {
+    return /* @__PURE__ */ jsx(DialogContent, { ref, ...props });
+  }
+);
+var AlertDialogAction = forwardRef(
+  function AlertDialogAction2({ onAction, onClick, className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      DialogClose,
+      {
+        ref,
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          onAction?.();
+        },
+        className: cn(
+          "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var AlertDialogCancel = forwardRef(
+  function AlertDialogCancel2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      DialogClose,
+      {
+        ref,
+        className: cn(
+          "inline-flex h-9 items-center justify-center rounded-md border border-border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+AlertDialog.Trigger = DialogTrigger;
+AlertDialog.Content = AlertDialogContent;
+AlertDialog.Header = DialogHeader;
+AlertDialog.Title = DialogTitle;
+AlertDialog.Description = DialogDescription;
+AlertDialog.Body = DialogBody;
+AlertDialog.Footer = DialogFooter;
+AlertDialog.Action = AlertDialogAction;
+AlertDialog.Cancel = AlertDialogCancel;
+var DrawerContext = createContext(null);
+function useDrawerContext() {
+  const ctx = useContext(DrawerContext);
+  if (!ctx) throw new Error("Drawer.* must be used inside <Drawer>");
+  return ctx;
+}
+function Drawer({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  side = "right",
+  dismissOnOutsideClick = true,
+  dismissOnEscape = true,
+  children
+}) {
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const ctx = useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef,
+      titleId,
+      descriptionId,
+      side,
+      dismissOnOutsideClick,
+      dismissOnEscape
+    }),
+    [open, setOpen, titleId, descriptionId, side, dismissOnOutsideClick, dismissOnEscape]
+  );
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: ctx, children });
+}
+var DrawerTrigger = forwardRef(
+  function DrawerTrigger2({ asChild, onClick, children, ...rest }, forwardedRef) {
+    const ctx = useDrawerContext();
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open,
+        "data-state": ctx.open ? "open" : "closed",
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.setOpen(true);
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var SIDE_CLASSES = {
+  right: "inset-y-0 right-0 h-full w-full sm:max-w-sm border-l animate-in slide-in-from-right",
+  left: "inset-y-0 left-0 h-full w-full sm:max-w-sm border-r animate-in slide-in-from-left",
+  top: "inset-x-0 top-0 w-full max-h-[85vh] border-b animate-in slide-in-from-top",
+  bottom: "inset-x-0 bottom-0 w-full max-h-[85vh] border-t animate-in slide-in-from-bottom"
+};
+var DrawerContent = forwardRef(
+  function DrawerContent2({ hideBackdrop, blur, className, children, ...rest }, forwardedRef) {
+    const ctx = useDrawerContext();
+    if (!ctx.open) return null;
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(ScrollLockProvider, { children: [
+      !hideBackdrop && /* @__PURE__ */ jsx(
+        Backdrop,
+        {
+          inline: true,
+          blur,
+          onClick: () => {
+            if (ctx.dismissOnOutsideClick) ctx.setOpen(false);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
+        DismissableLayer,
+        {
+          disableEscape: !ctx.dismissOnEscape,
+          onEscape: () => ctx.setOpen(false),
+          disableOutsideClick: true,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: forwardedRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": ctx.titleId,
+              "aria-describedby": ctx.descriptionId,
+              "data-state": "open",
+              "data-side": ctx.side,
+              className: cn(
+                "fixed z-50 flex flex-col gap-4 border-border bg-background p-6 shadow-lg outline-none",
+                SIDE_CLASSES[ctx.side],
+                className
+              ),
+              ...rest,
+              children
+            }
+          )
+        }
+      ) })
+    ] }) });
+  }
+);
+function DrawerHeader({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5", className), ...rest, children });
+}
+function DrawerTitle({
+  className,
+  children,
+  ...rest
+}) {
+  const ctx = useDrawerContext();
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      id: ctx.titleId,
+      className: cn("text-lg font-semibold leading-none text-foreground", className),
+      ...rest,
+      children
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  children,
+  ...rest
+}) {
+  const ctx = useDrawerContext();
+  return /* @__PURE__ */ jsx("p", { id: ctx.descriptionId, className: cn("text-sm text-muted-foreground", className), ...rest, children });
+}
+function DrawerBody({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto text-sm text-foreground", className), ...rest, children });
+}
+function DrawerFooter({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...rest,
+      children
+    }
+  );
+}
+var DrawerClose = forwardRef(function DrawerClose2({ asChild, onClick, className, children, ...rest }, forwardedRef) {
+  const ctx = useDrawerContext();
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: forwardedRef,
+      type: "button",
+      "aria-label": children ? void 0 : "Close",
+      onClick: (e) => {
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        ctx.setOpen(false);
+        requestAnimationFrame(() => ctx.triggerRef.current?.focus());
+      },
+      className: asChild ? className : cn(
+        "absolute right-4 top-4 grid h-7 w-7 place-items-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+    }
+  );
+});
+Drawer.Trigger = DrawerTrigger;
+Drawer.Content = DrawerContent;
+Drawer.Header = DrawerHeader;
+Drawer.Title = DrawerTitle;
+Drawer.Description = DrawerDescription;
+Drawer.Body = DrawerBody;
+Drawer.Footer = DrawerFooter;
+Drawer.Close = DrawerClose;
+var PopoverContext = createContext(null);
+function usePopoverContext() {
+  const ctx = useContext(PopoverContext);
+  if (!ctx) throw new Error("Popover.* must be used inside <Popover>");
+  return ctx;
+}
+function Popover({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom",
+  offset = 8,
+  dismissOnOutsideClick = true,
+  dismissOnEscape = true,
+  children
+}) {
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const ctx = useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef,
+      placement,
+      offset,
+      dismissOnOutsideClick,
+      dismissOnEscape
+    }),
+    [open, setOpen, placement, offset, dismissOnOutsideClick, dismissOnEscape]
+  );
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: ctx, children });
+}
+var PopoverTrigger = forwardRef(
+  function PopoverTrigger2({ asChild, onClick, children, ...rest }, forwardedRef) {
+    const ctx = usePopoverContext();
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: composeRefs(forwardedRef, ctx.triggerRef),
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open,
+        "data-state": ctx.open ? "open" : "closed",
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          ctx.setOpen(!ctx.open);
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var PopoverContent = forwardRef(
+  function PopoverContent2({ className, children, ...rest }, forwardedRef) {
+    const ctx = usePopoverContext();
+    if (!ctx.open) return null;
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      AnchoredPositioner,
+      {
+        anchor: ctx.triggerRef.current,
+        placement: ctx.placement,
+        offset: ctx.offset,
+        children: /* @__PURE__ */ jsx(FocusScope, { asChild: true, trapped: true, loop: true, children: /* @__PURE__ */ jsx(
+          DismissableLayer,
+          {
+            disableEscape: !ctx.dismissOnEscape,
+            onEscape: () => {
+              ctx.setOpen(false);
+              requestAnimationFrame(() => ctx.triggerRef.current?.focus());
+            },
+            disableOutsideClick: !ctx.dismissOnOutsideClick,
+            onOutsidePointerDown: (e) => {
+              if (ctx.triggerRef.current?.contains(e.target)) return;
+              ctx.setOpen(false);
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: forwardedRef,
+                role: "dialog",
+                "data-state": "open",
+                className: cn(
+                  "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95",
+                  className
+                ),
+                ...rest,
+                children
+              }
+            )
+          }
+        ) })
+      }
+    ) });
+  }
+);
+function PopoverArrow({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(OverlayArrow, { className: cn("text-popover", className), ...rest });
+}
+Popover.Trigger = PopoverTrigger;
+Popover.Content = PopoverContent;
+Popover.Arrow = PopoverArrow;
+var HoverCardContext = createContext(null);
+function useHoverCardContext() {
+  const ctx = useContext(HoverCardContext);
+  if (!ctx) throw new Error("HoverCard.* must be used inside <HoverCard>");
+  return ctx;
+}
+function HoverCard({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  openDelay = 700,
+  closeDelay = 300,
+  placement = "bottom",
+  offset = 8,
+  children
+}) {
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = useRef(null);
+  const openTimer = useRef(null);
+  const closeTimer = useRef(null);
+  const clear = useCallback(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    openTimer.current = null;
+    closeTimer.current = null;
+  }, []);
+  const show = useCallback(() => {
+    clear();
+    openTimer.current = setTimeout(() => setOpen(true), openDelay);
+  }, [clear, openDelay, setOpen]);
+  const hide = useCallback(() => {
+    clear();
+    closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
+  }, [clear, closeDelay, setOpen]);
+  const cancelHide = useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+  const ctx = useMemo(
+    () => ({ open, setOpen, triggerRef, show, hide, cancelHide, placement, offset }),
+    [open, setOpen, show, hide, cancelHide, placement, offset]
+  );
+  return /* @__PURE__ */ jsx(HoverCardContext.Provider, { value: ctx, children });
+}
+function HoverCardTrigger({ children }) {
+  const ctx = useHoverCardContext();
+  if (!isValidElement(children)) return children;
+  const trigger = children;
+  return cloneElement(trigger, {
+    ref: composeRefs((node) => {
+      ctx.triggerRef.current = node;
+    }, trigger.ref),
+    onPointerEnter: (e) => {
+      trigger.props.onPointerEnter?.(e);
+      ctx.show();
+    },
+    onPointerLeave: (e) => {
+      trigger.props.onPointerLeave?.(e);
+      ctx.hide();
+    },
+    onFocus: (e) => {
+      trigger.props.onFocus?.(e);
+      ctx.show();
+    },
+    onBlur: (e) => {
+      trigger.props.onBlur?.(e);
+      ctx.hide();
+    }
+  });
+}
+var HoverCardContent = forwardRef(
+  function HoverCardContent2({ className, children, onPointerEnter, onPointerLeave, ...rest }, forwardedRef) {
+    const ctx = useHoverCardContext();
+    if (!ctx.open) return null;
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      AnchoredPositioner,
+      {
+        anchor: ctx.triggerRef.current,
+        placement: ctx.placement,
+        offset: ctx.offset,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: forwardedRef,
+            "data-state": "open",
+            onPointerEnter: (e) => {
+              onPointerEnter?.(e);
+              ctx.cancelHide();
+            },
+            onPointerLeave: (e) => {
+              onPointerLeave?.(e);
+              ctx.hide();
+            },
+            className: cn(
+              "z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95",
+              className
+            ),
+            ...rest,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+function HoverCardArrow({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(OverlayArrow, { className: cn("text-popover", className), ...rest });
+}
+HoverCard.Trigger = HoverCardTrigger;
+HoverCard.Content = HoverCardContent;
+HoverCard.Arrow = HoverCardArrow;
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, Backdrop, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger, Popover, PopoverArrow, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=chunk-52DFDWY3.js.map
+//# sourceMappingURL=chunk-52DFDWY3.js.map