@wow-two-beta/ui 0.0.17 → 0.0.19

package/dist/chunk-O6UUYPTB.js

@@ -0,0 +1,148 @@
+import { OverlayChromeProvider, OverlayBody, OverlayCloseButton, OverlayDescription, OverlayFooter, OverlayHeader, OverlayTitle } from './chunk-NTW7SDAP.js';
+import { Backdrop } from './chunk-ASIHQQDQ.js';
+import { useControlled } from './chunk-4P2TFUVW.js';
+import { Slot, Portal, ScrollLockProvider, DismissableLayer } from './chunk-NC2CBGX2.js';
+import { composeRefs } from './chunk-DN7WBRIV.js';
+import { cn } from './chunk-KZ4VFY2T.js';
+import { createContext, forwardRef, useCallback, useMemo, useContext, useRef, useId } from 'react';
+import { FocusScope } from '@radix-ui/react-focus-scope';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+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();
+    const close = useCallback(() => {
+      ctx.setOpen(false);
+      requestAnimationFrame(() => ctx.triggerRef.current?.focus());
+    }, [ctx]);
+    const chromeCtx = useMemo(
+      () => ({ titleId: ctx.titleId, descriptionId: ctx.descriptionId, close }),
+      [ctx.titleId, ctx.descriptionId, close]
+    );
+    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: /* @__PURE__ */ jsx(OverlayChromeProvider, { value: chromeCtx, children })
+            }
+          )
+        }
+      ) })
+    ] }) });
+  }
+);
+var DrawerHeader = OverlayHeader;
+var DrawerTitle = OverlayTitle;
+var DrawerDescription = OverlayDescription;
+var DrawerBody = OverlayBody;
+var DrawerFooter = OverlayFooter;
+var DrawerClose = OverlayCloseButton;
+Drawer.Trigger = DrawerTrigger;
+Drawer.Content = DrawerContent;
+Drawer.Header = DrawerHeader;
+Drawer.Title = DrawerTitle;
+Drawer.Description = DrawerDescription;
+Drawer.Body = DrawerBody;
+Drawer.Footer = DrawerFooter;
+Drawer.Close = DrawerClose;
+
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger };
+//# sourceMappingURL=chunk-O6UUYPTB.js.map
+//# sourceMappingURL=chunk-O6UUYPTB.js.map

package/dist/chunk-O6UUYPTB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/overlays/drawer/Drawer.tsx"],"names":["DrawerTrigger","DrawerContent"],"mappings":"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","file":"chunk-O6UUYPTB.js","sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useRef,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { cn, composeRefs } from '../../utils';\nimport { useControlled } from '../../hooks';\nimport { DismissableLayer, Portal, ScrollLockProvider, Slot } from '../../primitives';\nimport { Backdrop } from '../backdrop';\nimport {\n  OverlayBody,\n  OverlayChromeProvider,\n  OverlayCloseButton,\n  OverlayDescription,\n  OverlayFooter,\n  OverlayHeader,\n  OverlayTitle,\n  type OverlayChromeContextValue,\n} from '../OverlayChrome';\n\nexport type DrawerSide = 'top' | 'right' | 'bottom' | 'left';\n\ninterface DrawerContextValue {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  triggerRef: React.MutableRefObject<HTMLElement | null>;\n  titleId: string;\n  descriptionId: string;\n  side: DrawerSide;\n  dismissOnOutsideClick: boolean;\n  dismissOnEscape: boolean;\n}\n\nconst DrawerContext = createContext<DrawerContextValue | null>(null);\n\nfunction useDrawerContext() {\n  const ctx = useContext(DrawerContext);\n  if (!ctx) throw new Error('Drawer.* must be used inside <Drawer>');\n  return ctx;\n}\n\nexport interface DrawerProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  side?: DrawerSide;\n  dismissOnOutsideClick?: boolean;\n  dismissOnEscape?: boolean;\n  children: ReactNode;\n}\n\nexport function Drawer({\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  side = 'right',\n  dismissOnOutsideClick = true,\n  dismissOnEscape = true,\n  children,\n}: DrawerProps) {\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const descriptionId = useId();\n\n  const ctx = useMemo<DrawerContextValue>(\n    () => ({\n      open,\n      setOpen,\n      triggerRef,\n      titleId,\n      descriptionId,\n      side,\n      dismissOnOutsideClick,\n      dismissOnEscape,\n    }),\n    [open, setOpen, titleId, descriptionId, side, dismissOnOutsideClick, dismissOnEscape],\n  );\n\n  return <DrawerContext.Provider value={ctx}>{children}</DrawerContext.Provider>;\n}\n\nexport interface DrawerTriggerProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  asChild?: boolean;\n  children: ReactNode;\n}\n\nexport const DrawerTrigger = forwardRef<HTMLButtonElement, DrawerTriggerProps>(\n  function DrawerTrigger({ asChild, onClick, children, ...rest }, forwardedRef) {\n    const ctx = useDrawerContext();\n    const Component = asChild ? Slot : 'button';\n    return (\n      <Component\n        ref={composeRefs(forwardedRef, ctx.triggerRef as React.MutableRefObject<HTMLButtonElement | null>) as never}\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={ctx.open}\n        data-state={ctx.open ? 'open' : 'closed'}\n        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n          onClick?.(e);\n          if (e.defaultPrevented) return;\n          ctx.setOpen(true);\n        }}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nconst SIDE_CLASSES: Record<DrawerSide, string> = {\n  right:\n    'inset-y-0 right-0 h-full w-full sm:max-w-sm border-l animate-in slide-in-from-right',\n  left: 'inset-y-0 left-0 h-full w-full sm:max-w-sm border-r animate-in slide-in-from-left',\n  top: 'inset-x-0 top-0 w-full max-h-[85vh] border-b animate-in slide-in-from-top',\n  bottom: 'inset-x-0 bottom-0 w-full max-h-[85vh] border-t animate-in slide-in-from-bottom',\n};\n\nexport interface DrawerContentProps extends HTMLAttributes<HTMLDivElement> {\n  hideBackdrop?: boolean;\n  blur?: boolean;\n  children: ReactNode;\n}\n\nexport const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(\n  function DrawerContent(\n    { hideBackdrop, blur, className, children, ...rest },\n    forwardedRef,\n  ) {\n    const ctx = useDrawerContext();\n\n    const close = useCallback(() => {\n      ctx.setOpen(false);\n      requestAnimationFrame(() => ctx.triggerRef.current?.focus());\n    }, [ctx]);\n\n    const chromeCtx = useMemo<OverlayChromeContextValue>(\n      () => ({ titleId: ctx.titleId, descriptionId: ctx.descriptionId, close }),\n      [ctx.titleId, ctx.descriptionId, close],\n    );\n\n    if (!ctx.open) return null;\n    return (\n      <Portal>\n        <ScrollLockProvider>\n          {!hideBackdrop && (\n            <Backdrop\n              inline\n              blur={blur}\n              onClick={() => {\n                if (ctx.dismissOnOutsideClick) ctx.setOpen(false);\n              }}\n            />\n          )}\n          <FocusScope asChild trapped loop>\n            <DismissableLayer\n              disableEscape={!ctx.dismissOnEscape}\n              onEscape={() => ctx.setOpen(false)}\n              disableOutsideClick\n            >\n              <div\n                ref={forwardedRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={ctx.titleId}\n                aria-describedby={ctx.descriptionId}\n                data-state=\"open\"\n                data-side={ctx.side}\n                className={cn(\n                  'fixed z-50 flex flex-col gap-4 border-border bg-background p-6 shadow-lg outline-none',\n                  SIDE_CLASSES[ctx.side],\n                  className,\n                )}\n                {...rest}\n              >\n                <OverlayChromeProvider value={chromeCtx}>{children}</OverlayChromeProvider>\n              </div>\n            </DismissableLayer>\n          </FocusScope>\n        </ScrollLockProvider>\n      </Portal>\n    );\n  },\n);\n\n// Re-export shared chrome subcomponents under the Drawer namespace.\nexport const DrawerHeader = OverlayHeader;\nexport const DrawerTitle = OverlayTitle;\nexport const DrawerDescription = OverlayDescription;\nexport const DrawerBody = OverlayBody;\nexport const DrawerFooter = OverlayFooter;\nexport const DrawerClose = OverlayCloseButton;\n\ntype DrawerComponent = typeof Drawer & {\n  Trigger: typeof DrawerTrigger;\n  Content: typeof DrawerContent;\n  Header: typeof DrawerHeader;\n  Title: typeof DrawerTitle;\n  Description: typeof DrawerDescription;\n  Body: typeof DrawerBody;\n  Footer: typeof DrawerFooter;\n  Close: typeof DrawerClose;\n};\n\n(Drawer as DrawerComponent).Trigger = DrawerTrigger;\n(Drawer as DrawerComponent).Content = DrawerContent;\n(Drawer as DrawerComponent).Header = DrawerHeader;\n(Drawer as DrawerComponent).Title = DrawerTitle;\n(Drawer as DrawerComponent).Description = DrawerDescription;\n(Drawer as DrawerComponent).Body = DrawerBody;\n(Drawer as DrawerComponent).Footer = DrawerFooter;\n(Drawer as DrawerComponent).Close = DrawerClose;\n\nexport default Drawer as DrawerComponent;\n"]}