@stableflow/pay-ui 0.0.1 → 0.2.0-beta-e820becee0-20261012

package/README.md

@@ -1,6 +1,6 @@
 # @stableflow/pay-ui
 
-Presentational React components and inline SVG icons for Stableflow Pay. The package has no business types, HTTP clients, wallets, or stores.
+Presentational React components and inline SVG icons for StableFlow Pay. The package has no business types, HTTP clients, wallets, or stores.
 
 Import each component by its subpath. There is no root barrel.
 

package/dist/{chunk-DON56HU7.js → chunk-EYLLKIPV.js}

@@ -1,7 +1,7 @@
 import {
   Overlay,
   OverlayPanel
-} from "./chunk-AIJAGS5R.js";
+} from "./chunk-RUT7LQ3A.js";
 import {
   OVERLAY_MASK_FADE_SECONDS,
   OVERLAY_PANEL_SLIDE_SECONDS
@@ -34,6 +34,7 @@ function Drawer(props) {
     cardClassName,
     panelClassName,
     titleClassName,
+    headerClassName,
     closeClassName,
     closeIcon,
     headerAction,
@@ -71,6 +72,7 @@ function Drawer(props) {
               title,
               ariaLabel,
               titleClassName,
+              headerClassName,
               closeClassName,
               closeIcon,
               headerAction,
@@ -110,4 +112,4 @@ export {
   DRAWER_SIDE,
   Drawer
 };
-//# sourceMappingURL=chunk-DON56HU7.js.map
+//# sourceMappingURL=chunk-EYLLKIPV.js.map

package/dist/chunk-EYLLKIPV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/drawer/config.ts","../src/drawer/Drawer.tsx"],"sourcesContent":["export const DRAWER_SIDE = {\n  Top: \"top\",\n  Right: \"right\",\n  Bottom: \"bottom\",\n  Left: \"left\",\n} as const;\n\nexport type DrawerSide = (typeof DRAWER_SIDE)[keyof typeof DRAWER_SIDE];\n","import { motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport { Overlay } from \"../overlay/Overlay\";\nimport { OverlayPanel } from \"../overlay/OverlayPanel\";\nimport { OVERLAY_MASK_FADE_SECONDS, OVERLAY_PANEL_SLIDE_SECONDS } from \"../overlay/config\";\nimport type { OverlayChromeProps } from \"../overlay/types\";\nimport { DRAWER_SIDE, type DrawerSide } from \"./config\";\n\nexport type DrawerProps = OverlayChromeProps & {\n  side?: DrawerSide;\n};\n\nexport function Drawer(props: DrawerProps) {\n  const {\n    open,\n    onClose,\n    title,\n    ariaLabel,\n    children,\n    mask = true,\n    maskClassName,\n    closeOnMaskClick = true,\n    cardClassName,\n    panelClassName,\n    titleClassName,\n    headerClassName,\n    closeClassName,\n    closeIcon,\n    headerAction,\n    contentClassName,\n    side = DRAWER_SIDE.Right,\n  } = props;\n  const hidden = slideHidden(side);\n\n  return (\n    <Overlay\n      type=\"drawer\"\n      open={open}\n      onClose={onClose}\n      mask={mask}\n      maskClassName={maskClassName}\n      closeOnMaskClick={closeOnMaskClick}\n      elevated={props.elevated}\n    >\n      <motion.div\n        className={cn(\"pointer-events-auto\", drawerPositionClassName(side), panelClassName)}\n        initial={hidden}\n        animate={{\n          x: 0,\n          y: 0,\n          transition: { duration: OVERLAY_PANEL_SLIDE_SECONDS, delay: OVERLAY_MASK_FADE_SECONDS, ease: easeOut },\n        }}\n        exit={{\n          ...hidden,\n          transition: { duration: OVERLAY_PANEL_SLIDE_SECONDS, delay: 0, ease: easeOut },\n        }}\n      >\n        <OverlayPanel\n          title={title}\n          ariaLabel={ariaLabel}\n          titleClassName={titleClassName}\n          headerClassName={headerClassName}\n          closeClassName={closeClassName}\n          closeIcon={closeIcon}\n          headerAction={headerAction}\n          contentClassName={contentClassName}\n          onClose={onClose}\n          cardClassName={cn(drawerPanelClassName(side), cardClassName)}\n          trapFocus={mask}\n        >\n          {children}\n        </OverlayPanel>\n      </motion.div>\n    </Overlay>\n  );\n}\n\nexport default Drawer;\n\nconst easeOut: [number, number, number, number] = [0.32, 0.72, 0, 1];\n\nfunction slideHidden(side: DrawerSide): { x?: string; y?: string } {\n  if (side === DRAWER_SIDE.Top) return { y: \"-100%\" };\n  if (side === DRAWER_SIDE.Bottom) return { y: \"100%\" };\n  if (side === DRAWER_SIDE.Left) return { x: \"-100%\" };\n  return { x: \"100%\" };\n}\n\nfunction drawerPositionClassName(side: DrawerSide) {\n  if (side === DRAWER_SIDE.Top) return \"absolute inset-x-0 top-0\";\n  if (side === DRAWER_SIDE.Bottom) return \"absolute inset-x-0 bottom-0\";\n  if (side === DRAWER_SIDE.Left) return \"absolute inset-y-0 left-0 h-full w-[min(100%,420px)]\";\n  return \"absolute inset-y-0 right-0 h-full w-[min(100%,420px)]\";\n}\n\nfunction drawerPanelClassName(side: DrawerSide) {\n  if (side === DRAWER_SIDE.Top) return \"w-full max-h-[90vh] rounded-t-none md:rounded-t-none\";\n  if (side === DRAWER_SIDE.Bottom) return \"w-full max-h-[90vh] rounded-b-none md:rounded-b-none\";\n  if (side === DRAWER_SIDE.Left) return \"h-full w-full rounded-l-none md:rounded-l-none\";\n  return \"h-full w-full rounded-r-none md:rounded-r-none\";\n}\n"],"mappings":";;;;;;;;;;;;;AAAO,IAAM,cAAc;AAAA,EACzB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;;;ACLA,SAAS,cAAc;AAyDf;AA7CD,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,EACrB,IAAI;AACJ,QAAM,SAAS,YAAY,IAAI;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAEhB;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAW,GAAG,uBAAuB,wBAAwB,IAAI,GAAG,cAAc;AAAA,UAClF,SAAS;AAAA,UACT,SAAS;AAAA,YACP,GAAG;AAAA,YACH,GAAG;AAAA,YACH,YAAY,EAAE,UAAU,6BAA6B,OAAO,2BAA2B,MAAM,QAAQ;AAAA,UACvG;AAAA,UACA,MAAM;AAAA,YACJ,GAAG;AAAA,YACH,YAAY,EAAE,UAAU,6BAA6B,OAAO,GAAG,MAAM,QAAQ;AAAA,UAC/E;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAe,GAAG,qBAAqB,IAAI,GAAG,aAAa;AAAA,cAC3D,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAIA,IAAM,UAA4C,CAAC,MAAM,MAAM,GAAG,CAAC;AAEnE,SAAS,YAAY,MAA8C;AACjE,MAAI,SAAS,YAAY,IAAK,QAAO,EAAE,GAAG,QAAQ;AAClD,MAAI,SAAS,YAAY,OAAQ,QAAO,EAAE,GAAG,OAAO;AACpD,MAAI,SAAS,YAAY,KAAM,QAAO,EAAE,GAAG,QAAQ;AACnD,SAAO,EAAE,GAAG,OAAO;AACrB;AAEA,SAAS,wBAAwB,MAAkB;AACjD,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,OAAQ,QAAO;AACxC,MAAI,SAAS,YAAY,KAAM,QAAO;AACtC,SAAO;AACT;AAEA,SAAS,qBAAqB,MAAkB;AAC9C,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,OAAQ,QAAO;AACxC,MAAI,SAAS,YAAY,KAAM,QAAO;AACtC,SAAO;AACT;","names":[]}

package/dist/{chunk-AIJAGS5R.js → chunk-RUT7LQ3A.js}

@@ -124,6 +124,7 @@ function OverlayPanel(props) {
     title,
     ariaLabel,
     titleClassName,
+    headerClassName,
     closeClassName,
     closeIcon,
     headerAction,
@@ -185,7 +186,7 @@ function OverlayPanel(props) {
       style,
       onClick: (event) => event.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxs2("div", { className: "relative flex shrink-0 items-center gap-3", children: [
+        /* @__PURE__ */ jsxs2("div", { className: cn("relative flex shrink-0 items-center gap-3", headerClassName), children: [
           /* @__PURE__ */ jsx2(
             "h2",
             {
@@ -220,4 +221,4 @@ export {
   Overlay,
   OverlayPanel
 };
-//# sourceMappingURL=chunk-AIJAGS5R.js.map
+//# sourceMappingURL=chunk-RUT7LQ3A.js.map

package/dist/chunk-RUT7LQ3A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/overlay/Overlay.tsx","../src/overlay/use-overlay-layer.ts","../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useEffect, useLayoutEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  OVERLAY_DIALOG_PANEL_FADE_SECONDS,\n  OVERLAY_EXIT_SECONDS,\n  OVERLAY_MASK_FADE_SECONDS,\n  OVERLAY_PANEL_SLIDE_SECONDS,\n} from \"./config\";\nimport { elevatedOverlayZIndex, isTopOverlay } from \"./stack\";\nimport { useOverlayLayer } from \"./use-overlay-layer\";\n\nexport type OverlayProps = {\n  type?: \"dialog\" | \"drawer\";\n  open: boolean;\n  onClose?: () => void;\n  mask?: boolean;\n  maskClassName?: string;\n  closeOnMaskClick?: boolean;\n  children?: ReactNode;\n  className?: string;\n  elevated?: boolean;\n};\n\nexport function Overlay(props: OverlayProps) {\n  const {\n    type = \"dialog\",\n    open,\n    onClose,\n    mask = true,\n    maskClassName,\n    closeOnMaskClick = true,\n    children,\n    className,\n    elevated = false,\n  } = props;\n  const [present, setPresent] = useState(open);\n\n  useLayoutEffect(() => {\n    if (open) setPresent(true);\n  }, [open]);\n\n  const zIndex = useOverlayLayer(open || present);\n  const visualZIndex = elevated ? elevatedOverlayZIndex(zIndex) : zIndex;\n\n  useEffect(() => {\n    if (!open) return;\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") return;\n      if (!isTopOverlay(zIndex)) return;\n      onClose?.();\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, onClose, zIndex]);\n\n  if (typeof document === \"undefined\") return null;\n  if (!open && !present) return null;\n\n  return createPortal(\n    <AnimatePresence onExitComplete={() => setPresent(false)}>\n      {open ? (\n        <motion.div\n          key=\"overlay-root\"\n          className={cn(\"fixed inset-0 overflow-hidden\", !mask && \"pointer-events-none\", className)}\n          style={{ zIndex: visualZIndex }}\n          role=\"presentation\"\n          initial={{ opacity: 1 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 1 }}\n          transition={{ duration: OVERLAY_EXIT_SECONDS }}\n        >\n          <motion.div\n            className={cn(\n              \"absolute inset-0\",\n              mask ? \"bg-[rgba(0,0,0,0.50)]\" : \"bg-transparent\",\n              !closeOnMaskClick && \"pointer-events-none\",\n              maskClassName,\n            )}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1, transition: { duration: OVERLAY_MASK_FADE_SECONDS, delay: 0 } }}\n            exit={{\n              opacity: 0,\n              transition: {\n                duration: OVERLAY_MASK_FADE_SECONDS,\n                delay: type === \"drawer\" ? OVERLAY_PANEL_SLIDE_SECONDS : OVERLAY_DIALOG_PANEL_FADE_SECONDS,\n              },\n            }}\n            onClick={closeOnMaskClick ? onClose : undefined}\n          />\n          {children}\n        </motion.div>\n      ) : null}\n    </AnimatePresence>,\n    document.body,\n  );\n}\n\nexport default Overlay;\n","import { useLayoutEffect, useState } from \"react\";\nimport { OVERLAY_BASE_Z_INDEX } from \"./config\";\nimport { acquireOverlayLayer, releaseOverlayLayer } from \"./stack\";\n\nexport function useOverlayLayer(open: boolean) {\n  const [zIndex, setZIndex] = useState(OVERLAY_BASE_Z_INDEX);\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const nextZIndex = acquireOverlayLayer();\n    setZIndex(nextZIndex);\n    return () => {\n      releaseOverlayLayer(nextZIndex);\n    };\n  }, [open]);\n\n  return zIndex;\n}\n","import { useEffect, useId, type CSSProperties, type ReactNode } from \"react\";\nimport { IconClose } from \"../icons/close\";\nimport { cn } from \"../lib/cn\";\nimport { fontSans } from \"../lib/font\";\nimport { Card } from \"../card/Card\";\n\nexport type OverlayPanelProps = {\n  title?: ReactNode;\n  ariaLabel?: string;\n  titleClassName?: string;\n  headerClassName?: string;\n  closeClassName?: string;\n  closeIcon?: ReactNode;\n  headerAction?: ReactNode;\n  onClose?: () => void;\n  cardClassName?: string;\n  contentClassName?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  trapFocus?: boolean;\n};\n\nexport function OverlayPanel(props: OverlayPanelProps) {\n  const {\n    title,\n    ariaLabel,\n    titleClassName,\n    headerClassName,\n    closeClassName,\n    closeIcon,\n    headerAction,\n    onClose,\n    cardClassName,\n    contentClassName,\n    children,\n    style,\n    trapFocus = true,\n  } = props;\n  const panelId = useId();\n  const titleId = panelId + \"-title\";\n  const hasTitle = title !== undefined && title !== null && title !== \"\";\n\n  useEffect(() => {\n    if (!trapFocus) return;\n\n    const panel = document.getElementById(panelId);\n    if (!panel) return;\n\n    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    panel.focus({ preventScroll: true });\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") return;\n\n      const focusableElements = Array.from(\n        panel.querySelectorAll<HTMLElement>(\n          'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n        ),\n      ).filter((element) => element.getAttribute(\"aria-hidden\") !== \"true\" && element.getClientRects().length > 0);\n\n      if (focusableElements.length === 0) {\n        event.preventDefault();\n        panel.focus({ preventScroll: true });\n        return;\n      }\n\n      const firstElement = focusableElements[0];\n      const lastElement = focusableElements[focusableElements.length - 1];\n      const activeElement = document.activeElement;\n\n      if (event.shiftKey && (activeElement === panel || activeElement === firstElement || !panel.contains(activeElement))) {\n        event.preventDefault();\n        lastElement.focus({ preventScroll: true });\n      } else if (!event.shiftKey && activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus({ preventScroll: true });\n      }\n    };\n\n    panel.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      panel.removeEventListener(\"keydown\", handleKeyDown);\n      if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });\n    };\n  }, [panelId, trapFocus]);\n\n  return (\n    <Card\n      id={panelId}\n      role=\"dialog\"\n      aria-modal={trapFocus ? \"true\" : undefined}\n      aria-labelledby={hasTitle ? titleId : undefined}\n      aria-label={hasTitle ? undefined : ariaLabel}\n      tabIndex={-1}\n      className={cn(\"relative flex flex-col gap-5\", cardClassName)}\n      style={style}\n      onClick={(event) => event.stopPropagation()}\n    >\n      <div className={cn(\"relative flex shrink-0 items-center gap-3\", headerClassName)}>\n        <h2\n          id={hasTitle ? titleId : undefined}\n          className={cn(\n            \"min-h-5 min-w-0 text-[20px] font-semibold leading-normal text-black\",\n            fontSans,\n            titleClassName,\n          )}\n        >\n          {title}\n        </h2>\n        {headerAction}\n        <button\n          type=\"button\"\n          aria-label=\"Close\"\n          onClick={onClose}\n          className={cn(\"ml-auto shrink-0 cursor-pointer border-0 bg-transparent p-0 text-black\", closeClassName)}\n        >\n          {closeIcon ?? <IconClose className=\"size-3.25\" />}\n        </button>\n      </div>\n      <div className={cn(\"min-h-0 flex-1 overflow-y-auto\", contentClassName)}>{children}</div>\n    </Card>\n  );\n}\n\nexport default OverlayPanel;\n"],"mappings":"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","names":["useLayoutEffect","useState","useState","useLayoutEffect","useEffect","jsx","jsxs","useEffect"]}

package/dist/dialog/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { O as OverlayChromeProps } from '../types-DNElDQZ9.js';
+import { O as OverlayChromeProps } from '../types-CLWReVC4.js';
 
 type DialogProps = OverlayChromeProps;
 declare function Dialog(props: DialogProps): react.JSX.Element;

package/dist/dialog/index.js

@@ -1,11 +1,11 @@
 import {
   DRAWER_SIDE,
   Drawer
-} from "../chunk-DON56HU7.js";
+} from "../chunk-EYLLKIPV.js";
 import {
   Overlay,
   OverlayPanel
-} from "../chunk-AIJAGS5R.js";
+} from "../chunk-RUT7LQ3A.js";
 import "../chunk-J5TQGGEN.js";
 import "../chunk-MJ36QLY3.js";
 import {
@@ -51,6 +51,7 @@ function Dialog(props) {
     closeOnMaskClick = true,
     cardClassName,
     titleClassName,
+    headerClassName,
     closeClassName,
     closeIcon,
     headerAction,
@@ -95,6 +96,7 @@ function Dialog(props) {
               title,
               ariaLabel,
               titleClassName,
+              headerClassName,
               closeClassName,
               closeIcon,
               headerAction,

package/dist/dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/Dialog.tsx","../../src/hooks/use-media-query.ts"],"sourcesContent":["import { motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { Overlay } from \"../overlay/Overlay\";\nimport { OverlayPanel } from \"../overlay/OverlayPanel\";\nimport { DESKTOP_MEDIA_QUERY, OVERLAY_DIALOG_PANEL_FADE_SECONDS } from \"../overlay/config\";\nimport type { OverlayChromeProps } from \"../overlay/types\";\nimport { Drawer } from \"../drawer/Drawer\";\nimport { DRAWER_SIDE } from \"../drawer/config\";\n\nexport type DialogProps = OverlayChromeProps;\n\nexport function Dialog(props: DialogProps) {\n  const {\n    open,\n    onClose,\n    title,\n    ariaLabel,\n    children,\n    mask = true,\n    maskClassName,\n    closeOnMaskClick = true,\n    cardClassName,\n    titleClassName,\n    closeClassName,\n    closeIcon,\n    headerAction,\n    contentClassName,\n  } = props;\n  const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);\n\n  if (!isDesktop) {\n    return (\n      <Drawer\n        {...props}\n        side={DRAWER_SIDE.Bottom}\n        cardClassName={cn(\"w-full rounded-b-none\", cardClassName)}\n      />\n    );\n  }\n\n  return (\n    <Overlay\n      open={open}\n      onClose={onClose}\n      mask={mask}\n      maskClassName={maskClassName}\n      closeOnMaskClick={closeOnMaskClick}\n      elevated={props.elevated}\n    >\n      <div className=\"pointer-events-none relative flex size-full items-center justify-center p-4\">\n        <motion.div\n          className=\"pointer-events-auto\"\n          initial={{ opacity: 0 }}\n          animate={{\n            opacity: 1,\n            transition: { duration: OVERLAY_DIALOG_PANEL_FADE_SECONDS, delay: 0 },\n          }}\n          exit={{\n            opacity: 0,\n            transition: { duration: OVERLAY_DIALOG_PANEL_FADE_SECONDS, delay: 0 },\n          }}\n        >\n          <OverlayPanel\n            title={title}\n            ariaLabel={ariaLabel}\n            titleClassName={titleClassName}\n            closeClassName={closeClassName}\n            closeIcon={closeIcon}\n            headerAction={headerAction}\n            contentClassName={contentClassName}\n            onClose={onClose}\n            cardClassName={cn(\"w-full max-h-[90vh] md:w-[500px]\", cardClassName)}\n            trapFocus={mask}\n          >\n            {children}\n          </OverlayPanel>\n        </motion.div>\n      </div>\n    </Overlay>\n  );\n}\n\nexport default Dialog;\n","import { useEffect, useState } from \"react\";\n\nexport function useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === \"undefined\") return true;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    const media = window.matchMedia(query);\n    const onChange = () => setMatches(media.matches);\n    onChange();\n    media.addEventListener(\"change\", onChange);\n    return () => media.removeEventListener(\"change\", onChange);\n  }, [query]);\n\n  return matches;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,SAAS,cAAc;;;ACAvB,SAAS,WAAW,gBAAgB;AAE7B,SAAS,cAAc,OAAwB;AACpD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM;AAC3C,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC,CAAC;AAED,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,WAAW,KAAK;AACrC,UAAM,WAAW,MAAM,WAAW,MAAM,OAAO;AAC/C,aAAS;AACT,UAAM,iBAAiB,UAAU,QAAQ;AACzC,WAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAAA,EAC3D,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;;;ADgBM;AArBC,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,YAAY,cAAc,mBAAmB;AAEnD,MAAI,CAAC,WAAW;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAM,YAAY;AAAA,QAClB,eAAe,GAAG,yBAAyB,aAAa;AAAA;AAAA,IAC1D;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAEhB,8BAAC,SAAI,WAAU,+EACb;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAU;AAAA,UACV,SAAS,EAAE,SAAS,EAAE;AAAA,UACtB,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY,EAAE,UAAU,mCAAmC,OAAO,EAAE;AAAA,UACtE;AAAA,UACA,MAAM;AAAA,YACJ,SAAS;AAAA,YACT,YAAY,EAAE,UAAU,mCAAmC,OAAO,EAAE;AAAA,UACtE;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAe,GAAG,oCAAoC,aAAa;AAAA,cACnE,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/dialog/Dialog.tsx","../../src/hooks/use-media-query.ts"],"sourcesContent":["import { motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { Overlay } from \"../overlay/Overlay\";\nimport { OverlayPanel } from \"../overlay/OverlayPanel\";\nimport { DESKTOP_MEDIA_QUERY, OVERLAY_DIALOG_PANEL_FADE_SECONDS } from \"../overlay/config\";\nimport type { OverlayChromeProps } from \"../overlay/types\";\nimport { Drawer } from \"../drawer/Drawer\";\nimport { DRAWER_SIDE } from \"../drawer/config\";\n\nexport type DialogProps = OverlayChromeProps;\n\nexport function Dialog(props: DialogProps) {\n  const {\n    open,\n    onClose,\n    title,\n    ariaLabel,\n    children,\n    mask = true,\n    maskClassName,\n    closeOnMaskClick = true,\n    cardClassName,\n    titleClassName,\n    headerClassName,\n    closeClassName,\n    closeIcon,\n    headerAction,\n    contentClassName,\n  } = props;\n  const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);\n\n  if (!isDesktop) {\n    return (\n      <Drawer\n        {...props}\n        side={DRAWER_SIDE.Bottom}\n        cardClassName={cn(\"w-full rounded-b-none\", cardClassName)}\n      />\n    );\n  }\n\n  return (\n    <Overlay\n      open={open}\n      onClose={onClose}\n      mask={mask}\n      maskClassName={maskClassName}\n      closeOnMaskClick={closeOnMaskClick}\n      elevated={props.elevated}\n    >\n      <div className=\"pointer-events-none relative flex size-full items-center justify-center p-4\">\n        <motion.div\n          className=\"pointer-events-auto\"\n          initial={{ opacity: 0 }}\n          animate={{\n            opacity: 1,\n            transition: { duration: OVERLAY_DIALOG_PANEL_FADE_SECONDS, delay: 0 },\n          }}\n          exit={{\n            opacity: 0,\n            transition: { duration: OVERLAY_DIALOG_PANEL_FADE_SECONDS, delay: 0 },\n          }}\n        >\n          <OverlayPanel\n            title={title}\n            ariaLabel={ariaLabel}\n            titleClassName={titleClassName}\n            headerClassName={headerClassName}\n            closeClassName={closeClassName}\n            closeIcon={closeIcon}\n            headerAction={headerAction}\n            contentClassName={contentClassName}\n            onClose={onClose}\n            cardClassName={cn(\"w-full max-h-[90vh] md:w-[500px]\", cardClassName)}\n            trapFocus={mask}\n          >\n            {children}\n          </OverlayPanel>\n        </motion.div>\n      </div>\n    </Overlay>\n  );\n}\n\nexport default Dialog;\n","import { useEffect, useState } from \"react\";\n\nexport function useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === \"undefined\") return true;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    const media = window.matchMedia(query);\n    const onChange = () => setMatches(media.matches);\n    onChange();\n    media.addEventListener(\"change\", onChange);\n    return () => media.removeEventListener(\"change\", onChange);\n  }, [query]);\n\n  return matches;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,SAAS,cAAc;;;ACAvB,SAAS,WAAW,gBAAgB;AAE7B,SAAS,cAAc,OAAwB;AACpD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM;AAC3C,QAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,WAAO,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC,CAAC;AAED,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,WAAW,KAAK;AACrC,UAAM,WAAW,MAAM,WAAW,MAAM,OAAO;AAC/C,aAAS;AACT,UAAM,iBAAiB,UAAU,QAAQ;AACzC,WAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAAA,EAC3D,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;;;ADiBM;AAtBC,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,YAAY,cAAc,mBAAmB;AAEnD,MAAI,CAAC,WAAW;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,MAAM,YAAY;AAAA,QAClB,eAAe,GAAG,yBAAyB,aAAa;AAAA;AAAA,IAC1D;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAEhB,8BAAC,SAAI,WAAU,+EACb;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAU;AAAA,UACV,SAAS,EAAE,SAAS,EAAE;AAAA,UACtB,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY,EAAE,UAAU,mCAAmC,OAAO,EAAE;AAAA,UACtE;AAAA,UACA,MAAM;AAAA,YACJ,SAAS;AAAA,YACT,YAAY,EAAE,UAAU,mCAAmC,OAAO,EAAE;AAAA,UACtE;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAe,GAAG,oCAAoC,aAAa;AAAA,cACnE,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/drawer/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { O as OverlayChromeProps } from '../types-DNElDQZ9.js';
+import { O as OverlayChromeProps } from '../types-CLWReVC4.js';
 
 declare const DRAWER_SIDE: {
     readonly Top: "top";

package/dist/drawer/index.js

@@ -1,8 +1,8 @@
 import {
   DRAWER_SIDE,
   Drawer
-} from "../chunk-DON56HU7.js";
-import "../chunk-AIJAGS5R.js";
+} from "../chunk-EYLLKIPV.js";
+import "../chunk-RUT7LQ3A.js";
 import "../chunk-J5TQGGEN.js";
 import "../chunk-MJ36QLY3.js";
 import "../chunk-RUOUGZWI.js";

package/dist/icons/down.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { IconProps } from './types.js';
+
+declare const IconDown: (props: IconProps) => react.JSX.Element;
+
+export { IconDown, IconDown as default };

package/dist/icons/down.js

@@ -0,0 +1,33 @@
+// src/icons/down.tsx
+import { jsx } from "react/jsx-runtime";
+var IconDown = (props) => {
+  const {
+    className,
+    style
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "13",
+      height: "14",
+      viewBox: "0 0 13 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: className ? `sfp-icon ${className}` : "sfp-icon",
+      style,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12.2778 12.5997C12.4693 12.5997 12.653 12.6735 12.7885 12.8048C12.9239 12.9361 13 13.1142 13 13.2999C13 13.4855 12.9239 13.6636 12.7885 13.7949C12.653 13.9262 12.4693 14 12.2778 14H0.722222C0.530677 14 0.346977 13.9262 0.211534 13.7949C0.0760911 13.6636 0 13.4855 0 13.2999C0 13.1142 0.0760911 12.9361 0.211534 12.8048C0.346977 12.6735 0.530677 12.5997 0.722222 12.5997H12.2778ZM6.5 0C6.69155 0 6.87525 0.0737646 7.01069 0.205066C7.14613 0.336368 7.22222 0.514451 7.22222 0.70014V9.15713L10.6817 5.80346C10.8115 5.67766 10.9859 5.60451 11.1694 5.59889C11.3529 5.59327 11.5317 5.6556 11.6695 5.77321C11.8073 5.89082 11.8937 6.05488 11.9111 6.23203C11.9286 6.40919 11.8758 6.58616 11.7636 6.72695L11.7029 6.79276L7.00772 11.3472C6.88345 11.4678 6.71804 11.5404 6.54252 11.5512C6.367 11.562 6.19343 11.5104 6.05439 11.406L5.9865 11.3479L1.29567 6.80816C1.16565 6.6824 1.08994 6.51334 1.08394 6.33538C1.07795 6.15742 1.14212 5.98394 1.2634 5.85022C1.38468 5.7165 1.55395 5.6326 1.73678 5.61559C1.91961 5.59858 2.10226 5.64974 2.24756 5.75865L2.31544 5.81676L5.77778 9.16623V0.70014C5.77778 0.514451 5.85387 0.336368 5.98931 0.205066C6.12475 0.0737646 6.30845 0 6.5 0Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+var down_default = IconDown;
+export {
+  IconDown,
+  down_default as default
+};
+//# sourceMappingURL=down.js.map

package/dist/icons/down.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/down.tsx"],"sourcesContent":["import type { IconProps } from \"./types\";\n\nexport const IconDown = (props: IconProps) => {\n  const {\n    className,\n    style,\n  } = props;\n\n  return (\n    <svg\n      width=\"13\"\n      height=\"14\"\n      viewBox=\"0 0 13 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className ? `sfp-icon ${className}` : \"sfp-icon\"}\n      style={style}\n    >\n      <path\n        d=\"M12.2778 12.5997C12.4693 12.5997 12.653 12.6735 12.7885 12.8048C12.9239 12.9361 13 13.1142 13 13.2999C13 13.4855 12.9239 13.6636 12.7885 13.7949C12.653 13.9262 12.4693 14 12.2778 14H0.722222C0.530677 14 0.346977 13.9262 0.211534 13.7949C0.0760911 13.6636 0 13.4855 0 13.2999C0 13.1142 0.0760911 12.9361 0.211534 12.8048C0.346977 12.6735 0.530677 12.5997 0.722222 12.5997H12.2778ZM6.5 0C6.69155 0 6.87525 0.0737646 7.01069 0.205066C7.14613 0.336368 7.22222 0.514451 7.22222 0.70014V9.15713L10.6817 5.80346C10.8115 5.67766 10.9859 5.60451 11.1694 5.59889C11.3529 5.59327 11.5317 5.6556 11.6695 5.77321C11.8073 5.89082 11.8937 6.05488 11.9111 6.23203C11.9286 6.40919 11.8758 6.58616 11.7636 6.72695L11.7029 6.79276L7.00772 11.3472C6.88345 11.4678 6.71804 11.5404 6.54252 11.5512C6.367 11.562 6.19343 11.5104 6.05439 11.406L5.9865 11.3479L1.29567 6.80816C1.16565 6.6824 1.08994 6.51334 1.08394 6.33538C1.07795 6.15742 1.14212 5.98394 1.2634 5.85022C1.38468 5.7165 1.55395 5.6326 1.73678 5.61559C1.91961 5.59858 2.10226 5.64974 2.24756 5.75865L2.31544 5.81676L5.77778 9.16623V0.70014C5.77778 0.514451 5.85387 0.336368 5.98931 0.205066C6.12475 0.0737646 6.30845 0 6.5 0Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport default IconDown;\n"],"mappings":";AAkBM;AAhBC,IAAM,WAAW,CAAC,UAAqB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,WAAW,YAAY,YAAY,SAAS,KAAK;AAAA,MACjD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/dist/icons/private.d.ts

@@ -0,0 +1,6 @@
+import * as react from 'react';
+import { IconProps } from './types.js';
+
+declare const IconPrivate: (props: IconProps) => react.JSX.Element;
+
+export { IconPrivate, IconPrivate as default };

package/dist/icons/private.js

@@ -0,0 +1,33 @@
+// src/icons/private.tsx
+import { jsx } from "react/jsx-runtime";
+var IconPrivate = (props) => {
+  const {
+    className,
+    style
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "10",
+      height: "12",
+      viewBox: "0 0 10 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: className ? `sfp-icon ${className}` : "sfp-icon",
+      style,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4.26129 0.158674C4.77135 -0.0553333 5.34268 -0.0527711 5.85092 0.165803L9.12099 1.57215C9.65327 1.80106 10 2.33779 10 2.93286V7.31903C10 7.53038 9.95596 7.73926 9.87086 7.9315C9.78576 8.12375 9.6616 8.29486 9.5068 8.43324L5.91944 11.6401C5.38089 12.1215 4.58093 12.1198 4.04429 11.6361L0.488817 8.43151C0.335297 8.29315 0.212248 8.12248 0.127937 7.93098C0.0436251 7.73948 2.7635e-06 7.53158 0 7.32124V2.93857C0 2.33884 0.352112 1.79887 0.890495 1.57298L4.26129 0.158674ZM5.42818 1.21251C5.18744 1.10898 4.91681 1.10776 4.67521 1.20913L1.30441 2.62344C1.24367 2.64892 1.19167 2.69252 1.15506 2.74865C1.11845 2.80479 1.0989 2.87091 1.0989 2.93857V7.32126C1.0989 7.3698 1.10897 7.41778 1.12843 7.46197C1.14789 7.50616 1.17628 7.54555 1.21171 7.57748L4.76719 10.7821C4.89103 10.8937 5.07564 10.8941 5.19992 10.783L8.78728 7.57615C8.823 7.54422 8.85166 7.50473 8.8713 7.46037C8.89093 7.416 8.9011 7.3678 8.9011 7.31903V2.93286C8.9011 2.79554 8.82108 2.67168 8.69825 2.61886L5.42818 1.21251ZM5.01832 3.91524C5.56453 3.91524 6.00733 4.37218 6.00733 4.93582C6.00733 5.27339 5.8485 5.57267 5.60376 5.75846C5.60419 5.76767 5.6044 5.77696 5.6044 5.78629V7.67624C5.6044 7.99983 5.3502 8.26213 5.03663 8.26213C4.72307 8.26213 4.46887 7.99981 4.46887 7.67624V5.7863L4.46888 5.78454C4.20381 5.60146 4.02931 5.28968 4.02931 4.93582C4.02931 4.37216 4.47211 3.91525 5.01832 3.91525V3.91524Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+var private_default = IconPrivate;
+export {
+  IconPrivate,
+  private_default as default
+};
+//# sourceMappingURL=private.js.map

package/dist/icons/private.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/private.tsx"],"sourcesContent":["import type { IconProps } from \"./types\";\n\nexport const IconPrivate = (props: IconProps) => {\n  const {\n    className,\n    style,\n  } = props;\n\n  return (\n    <svg\n      width=\"10\"\n      height=\"12\"\n      viewBox=\"0 0 10 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className ? `sfp-icon ${className}` : \"sfp-icon\"}\n      style={style}\n    >\n      <path\n        d=\"M4.26129 0.158674C4.77135 -0.0553333 5.34268 -0.0527711 5.85092 0.165803L9.12099 1.57215C9.65327 1.80106 10 2.33779 10 2.93286V7.31903C10 7.53038 9.95596 7.73926 9.87086 7.9315C9.78576 8.12375 9.6616 8.29486 9.5068 8.43324L5.91944 11.6401C5.38089 12.1215 4.58093 12.1198 4.04429 11.6361L0.488817 8.43151C0.335297 8.29315 0.212248 8.12248 0.127937 7.93098C0.0436251 7.73948 2.7635e-06 7.53158 0 7.32124V2.93857C0 2.33884 0.352112 1.79887 0.890495 1.57298L4.26129 0.158674ZM5.42818 1.21251C5.18744 1.10898 4.91681 1.10776 4.67521 1.20913L1.30441 2.62344C1.24367 2.64892 1.19167 2.69252 1.15506 2.74865C1.11845 2.80479 1.0989 2.87091 1.0989 2.93857V7.32126C1.0989 7.3698 1.10897 7.41778 1.12843 7.46197C1.14789 7.50616 1.17628 7.54555 1.21171 7.57748L4.76719 10.7821C4.89103 10.8937 5.07564 10.8941 5.19992 10.783L8.78728 7.57615C8.823 7.54422 8.85166 7.50473 8.8713 7.46037C8.89093 7.416 8.9011 7.3678 8.9011 7.31903V2.93286C8.9011 2.79554 8.82108 2.67168 8.69825 2.61886L5.42818 1.21251ZM5.01832 3.91524C5.56453 3.91524 6.00733 4.37218 6.00733 4.93582C6.00733 5.27339 5.8485 5.57267 5.60376 5.75846C5.60419 5.76767 5.6044 5.77696 5.6044 5.78629V7.67624C5.6044 7.99983 5.3502 8.26213 5.03663 8.26213C4.72307 8.26213 4.46887 7.99981 4.46887 7.67624V5.7863L4.46888 5.78454C4.20381 5.60146 4.02931 5.28968 4.02931 4.93582C4.02931 4.37216 4.47211 3.91525 5.01832 3.91525V3.91524Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport default IconPrivate;\n"],"mappings":";AAkBM;AAhBC,IAAM,cAAc,CAAC,UAAqB;AAC/C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,WAAW,YAAY,YAAY,SAAS,KAAK;AAAA,MACjD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/overlay/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';
 export { F as FLOATING_ALIGN, a as FLOATING_SIDE, b as FloatingAlign, c as FloatingSide, u as useFloatingPosition } from '../use-floating-position-aNqQwkre.js';
-export { O as OverlayChromeProps } from '../types-DNElDQZ9.js';
+export { O as OverlayChromeProps } from '../types-CLWReVC4.js';
 
 type OverlayProps = {
     type?: "dialog" | "drawer";
@@ -20,6 +20,7 @@ type OverlayPanelProps = {
     title?: ReactNode;
     ariaLabel?: string;
     titleClassName?: string;
+    headerClassName?: string;
     closeClassName?: string;
     closeIcon?: ReactNode;
     headerAction?: ReactNode;

package/dist/overlay/index.js

@@ -1,7 +1,7 @@
 import {
   Overlay,
   OverlayPanel
-} from "../chunk-AIJAGS5R.js";
+} from "../chunk-RUT7LQ3A.js";
 import "../chunk-J5TQGGEN.js";
 import "../chunk-MJ36QLY3.js";
 import {

package/dist/{types-DNElDQZ9.d.ts → types-CLWReVC4.d.ts}

@@ -12,6 +12,7 @@ type OverlayChromeProps = {
     cardClassName?: string;
     panelClassName?: string;
     titleClassName?: string;
+    headerClassName?: string;
     closeClassName?: string;
     contentClassName?: string;
     closeIcon?: ReactNode;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stableflow/pay-ui",
-  "version": "0.0.1",
-  "description": "Presentational React components and icons for Stableflow Pay.",
+  "version": "0.2.0-beta-e820becee0-20261012",
+  "description": "Presentational React components and icons for StableFlow Pay.",
   "keywords": [
     "stableflow",
     "react",

package/dist/chunk-AIJAGS5R.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/overlay/Overlay.tsx","../src/overlay/use-overlay-layer.ts","../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useEffect, useLayoutEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  OVERLAY_DIALOG_PANEL_FADE_SECONDS,\n  OVERLAY_EXIT_SECONDS,\n  OVERLAY_MASK_FADE_SECONDS,\n  OVERLAY_PANEL_SLIDE_SECONDS,\n} from \"./config\";\nimport { elevatedOverlayZIndex, isTopOverlay } from \"./stack\";\nimport { useOverlayLayer } from \"./use-overlay-layer\";\n\nexport type OverlayProps = {\n  type?: \"dialog\" | \"drawer\";\n  open: boolean;\n  onClose?: () => void;\n  mask?: boolean;\n  maskClassName?: string;\n  closeOnMaskClick?: boolean;\n  children?: ReactNode;\n  className?: string;\n  elevated?: boolean;\n};\n\nexport function Overlay(props: OverlayProps) {\n  const {\n    type = \"dialog\",\n    open,\n    onClose,\n    mask = true,\n    maskClassName,\n    closeOnMaskClick = true,\n    children,\n    className,\n    elevated = false,\n  } = props;\n  const [present, setPresent] = useState(open);\n\n  useLayoutEffect(() => {\n    if (open) setPresent(true);\n  }, [open]);\n\n  const zIndex = useOverlayLayer(open || present);\n  const visualZIndex = elevated ? elevatedOverlayZIndex(zIndex) : zIndex;\n\n  useEffect(() => {\n    if (!open) return;\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") return;\n      if (!isTopOverlay(zIndex)) return;\n      onClose?.();\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [open, onClose, zIndex]);\n\n  if (typeof document === \"undefined\") return null;\n  if (!open && !present) return null;\n\n  return createPortal(\n    <AnimatePresence onExitComplete={() => setPresent(false)}>\n      {open ? (\n        <motion.div\n          key=\"overlay-root\"\n          className={cn(\"fixed inset-0 overflow-hidden\", !mask && \"pointer-events-none\", className)}\n          style={{ zIndex: visualZIndex }}\n          role=\"presentation\"\n          initial={{ opacity: 1 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 1 }}\n          transition={{ duration: OVERLAY_EXIT_SECONDS }}\n        >\n          <motion.div\n            className={cn(\n              \"absolute inset-0\",\n              mask ? \"bg-[rgba(0,0,0,0.50)]\" : \"bg-transparent\",\n              !closeOnMaskClick && \"pointer-events-none\",\n              maskClassName,\n            )}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1, transition: { duration: OVERLAY_MASK_FADE_SECONDS, delay: 0 } }}\n            exit={{\n              opacity: 0,\n              transition: {\n                duration: OVERLAY_MASK_FADE_SECONDS,\n                delay: type === \"drawer\" ? OVERLAY_PANEL_SLIDE_SECONDS : OVERLAY_DIALOG_PANEL_FADE_SECONDS,\n              },\n            }}\n            onClick={closeOnMaskClick ? onClose : undefined}\n          />\n          {children}\n        </motion.div>\n      ) : null}\n    </AnimatePresence>,\n    document.body,\n  );\n}\n\nexport default Overlay;\n","import { useLayoutEffect, useState } from \"react\";\nimport { OVERLAY_BASE_Z_INDEX } from \"./config\";\nimport { acquireOverlayLayer, releaseOverlayLayer } from \"./stack\";\n\nexport function useOverlayLayer(open: boolean) {\n  const [zIndex, setZIndex] = useState(OVERLAY_BASE_Z_INDEX);\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const nextZIndex = acquireOverlayLayer();\n    setZIndex(nextZIndex);\n    return () => {\n      releaseOverlayLayer(nextZIndex);\n    };\n  }, [open]);\n\n  return zIndex;\n}\n","import { useEffect, useId, type CSSProperties, type ReactNode } from \"react\";\nimport { IconClose } from \"../icons/close\";\nimport { cn } from \"../lib/cn\";\nimport { fontSans } from \"../lib/font\";\nimport { Card } from \"../card/Card\";\n\nexport type OverlayPanelProps = {\n  title?: ReactNode;\n  ariaLabel?: string;\n  titleClassName?: string;\n  closeClassName?: string;\n  closeIcon?: ReactNode;\n  headerAction?: ReactNode;\n  onClose?: () => void;\n  cardClassName?: string;\n  contentClassName?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  trapFocus?: boolean;\n};\n\nexport function OverlayPanel(props: OverlayPanelProps) {\n  const {\n    title,\n    ariaLabel,\n    titleClassName,\n    closeClassName,\n    closeIcon,\n    headerAction,\n    onClose,\n    cardClassName,\n    contentClassName,\n    children,\n    style,\n    trapFocus = true,\n  } = props;\n  const panelId = useId();\n  const titleId = panelId + \"-title\";\n  const hasTitle = title !== undefined && title !== null && title !== \"\";\n\n  useEffect(() => {\n    if (!trapFocus) return;\n\n    const panel = document.getElementById(panelId);\n    if (!panel) return;\n\n    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    panel.focus({ preventScroll: true });\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") return;\n\n      const focusableElements = Array.from(\n        panel.querySelectorAll<HTMLElement>(\n          'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n        ),\n      ).filter((element) => element.getAttribute(\"aria-hidden\") !== \"true\" && element.getClientRects().length > 0);\n\n      if (focusableElements.length === 0) {\n        event.preventDefault();\n        panel.focus({ preventScroll: true });\n        return;\n      }\n\n      const firstElement = focusableElements[0];\n      const lastElement = focusableElements[focusableElements.length - 1];\n      const activeElement = document.activeElement;\n\n      if (event.shiftKey && (activeElement === panel || activeElement === firstElement || !panel.contains(activeElement))) {\n        event.preventDefault();\n        lastElement.focus({ preventScroll: true });\n      } else if (!event.shiftKey && activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus({ preventScroll: true });\n      }\n    };\n\n    panel.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      panel.removeEventListener(\"keydown\", handleKeyDown);\n      if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });\n    };\n  }, [panelId, trapFocus]);\n\n  return (\n    <Card\n      id={panelId}\n      role=\"dialog\"\n      aria-modal={trapFocus ? \"true\" : undefined}\n      aria-labelledby={hasTitle ? titleId : undefined}\n      aria-label={hasTitle ? undefined : ariaLabel}\n      tabIndex={-1}\n      className={cn(\"relative flex flex-col gap-5\", cardClassName)}\n      style={style}\n      onClick={(event) => event.stopPropagation()}\n    >\n      <div className=\"relative flex shrink-0 items-center gap-3\">\n        <h2\n          id={hasTitle ? titleId : undefined}\n          className={cn(\n            \"min-h-5 min-w-0 text-[20px] font-semibold leading-normal text-black\",\n            fontSans,\n            titleClassName,\n          )}\n        >\n          {title}\n        </h2>\n        {headerAction}\n        <button\n          type=\"button\"\n          aria-label=\"Close\"\n          onClick={onClose}\n          className={cn(\"ml-auto shrink-0 cursor-pointer border-0 bg-transparent p-0 text-black\", closeClassName)}\n        >\n          {closeIcon ?? <IconClose className=\"size-3.25\" />}\n        </button>\n      </div>\n      <div className={cn(\"min-h-0 flex-1 overflow-y-auto\", contentClassName)}>{children}</div>\n    </Card>\n  );\n}\n\nexport default OverlayPanel;\n"],"mappings":"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","names":["useLayoutEffect","useState","useState","useLayoutEffect","useEffect","jsx","jsxs","useEffect"]}

package/dist/chunk-DON56HU7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/drawer/config.ts","../src/drawer/Drawer.tsx"],"sourcesContent":["export const DRAWER_SIDE = {\n  Top: \"top\",\n  Right: \"right\",\n  Bottom: \"bottom\",\n  Left: \"left\",\n} as const;\n\nexport type DrawerSide = (typeof DRAWER_SIDE)[keyof typeof DRAWER_SIDE];\n","import { motion } from \"motion/react\";\nimport { cn } from \"../lib/cn\";\nimport { Overlay } from \"../overlay/Overlay\";\nimport { OverlayPanel } from \"../overlay/OverlayPanel\";\nimport { OVERLAY_MASK_FADE_SECONDS, OVERLAY_PANEL_SLIDE_SECONDS } from \"../overlay/config\";\nimport type { OverlayChromeProps } from \"../overlay/types\";\nimport { DRAWER_SIDE, type DrawerSide } from \"./config\";\n\nexport type DrawerProps = OverlayChromeProps & {\n  side?: DrawerSide;\n};\n\nexport function Drawer(props: DrawerProps) {\n  const {\n    open,\n    onClose,\n    title,\n    ariaLabel,\n    children,\n    mask = true,\n    maskClassName,\n    closeOnMaskClick = true,\n    cardClassName,\n    panelClassName,\n    titleClassName,\n    closeClassName,\n    closeIcon,\n    headerAction,\n    contentClassName,\n    side = DRAWER_SIDE.Right,\n  } = props;\n  const hidden = slideHidden(side);\n\n  return (\n    <Overlay\n      type=\"drawer\"\n      open={open}\n      onClose={onClose}\n      mask={mask}\n      maskClassName={maskClassName}\n      closeOnMaskClick={closeOnMaskClick}\n      elevated={props.elevated}\n    >\n      <motion.div\n        className={cn(\"pointer-events-auto\", drawerPositionClassName(side), panelClassName)}\n        initial={hidden}\n        animate={{\n          x: 0,\n          y: 0,\n          transition: { duration: OVERLAY_PANEL_SLIDE_SECONDS, delay: OVERLAY_MASK_FADE_SECONDS, ease: easeOut },\n        }}\n        exit={{\n          ...hidden,\n          transition: { duration: OVERLAY_PANEL_SLIDE_SECONDS, delay: 0, ease: easeOut },\n        }}\n      >\n        <OverlayPanel\n          title={title}\n          ariaLabel={ariaLabel}\n          titleClassName={titleClassName}\n          closeClassName={closeClassName}\n          closeIcon={closeIcon}\n          headerAction={headerAction}\n          contentClassName={contentClassName}\n          onClose={onClose}\n          cardClassName={cn(drawerPanelClassName(side), cardClassName)}\n          trapFocus={mask}\n        >\n          {children}\n        </OverlayPanel>\n      </motion.div>\n    </Overlay>\n  );\n}\n\nexport default Drawer;\n\nconst easeOut: [number, number, number, number] = [0.32, 0.72, 0, 1];\n\nfunction slideHidden(side: DrawerSide): { x?: string; y?: string } {\n  if (side === DRAWER_SIDE.Top) return { y: \"-100%\" };\n  if (side === DRAWER_SIDE.Bottom) return { y: \"100%\" };\n  if (side === DRAWER_SIDE.Left) return { x: \"-100%\" };\n  return { x: \"100%\" };\n}\n\nfunction drawerPositionClassName(side: DrawerSide) {\n  if (side === DRAWER_SIDE.Top) return \"absolute inset-x-0 top-0\";\n  if (side === DRAWER_SIDE.Bottom) return \"absolute inset-x-0 bottom-0\";\n  if (side === DRAWER_SIDE.Left) return \"absolute inset-y-0 left-0 h-full w-[min(100%,420px)]\";\n  return \"absolute inset-y-0 right-0 h-full w-[min(100%,420px)]\";\n}\n\nfunction drawerPanelClassName(side: DrawerSide) {\n  if (side === DRAWER_SIDE.Top) return \"w-full max-h-[90vh] rounded-t-none md:rounded-t-none\";\n  if (side === DRAWER_SIDE.Bottom) return \"w-full max-h-[90vh] rounded-b-none md:rounded-b-none\";\n  if (side === DRAWER_SIDE.Left) return \"h-full w-full rounded-l-none md:rounded-l-none\";\n  return \"h-full w-full rounded-r-none md:rounded-r-none\";\n}\n"],"mappings":";;;;;;;;;;;;;AAAO,IAAM,cAAc;AAAA,EACzB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;;;ACLA,SAAS,cAAc;AAwDf;AA5CD,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,EACrB,IAAI;AACJ,QAAM,SAAS,YAAY,IAAI;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAEhB;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,WAAW,GAAG,uBAAuB,wBAAwB,IAAI,GAAG,cAAc;AAAA,UAClF,SAAS;AAAA,UACT,SAAS;AAAA,YACP,GAAG;AAAA,YACH,GAAG;AAAA,YACH,YAAY,EAAE,UAAU,6BAA6B,OAAO,2BAA2B,MAAM,QAAQ;AAAA,UACvG;AAAA,UACA,MAAM;AAAA,YACJ,GAAG;AAAA,YACH,YAAY,EAAE,UAAU,6BAA6B,OAAO,GAAG,MAAM,QAAQ;AAAA,UAC/E;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAe,GAAG,qBAAqB,IAAI,GAAG,aAAa;AAAA,cAC3D,WAAW;AAAA,cAEV;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAIA,IAAM,UAA4C,CAAC,MAAM,MAAM,GAAG,CAAC;AAEnE,SAAS,YAAY,MAA8C;AACjE,MAAI,SAAS,YAAY,IAAK,QAAO,EAAE,GAAG,QAAQ;AAClD,MAAI,SAAS,YAAY,OAAQ,QAAO,EAAE,GAAG,OAAO;AACpD,MAAI,SAAS,YAAY,KAAM,QAAO,EAAE,GAAG,QAAQ;AACnD,SAAO,EAAE,GAAG,OAAO;AACrB;AAEA,SAAS,wBAAwB,MAAkB;AACjD,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,OAAQ,QAAO;AACxC,MAAI,SAAS,YAAY,KAAM,QAAO;AACtC,SAAO;AACT;AAEA,SAAS,qBAAqB,MAAkB;AAC9C,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,OAAQ,QAAO;AACxC,MAAI,SAAS,YAAY,KAAM,QAAO;AACtC,SAAO;AACT;","names":[]}

package/dist/icons/payment.d.ts

@@ -1,6 +0,0 @@
-import * as react from 'react';
-import { IconProps } from './types.js';
-
-declare const IconPayment: (props: IconProps) => react.JSX.Element;
-
-export { IconPayment, IconPayment as default };

package/dist/icons/payment.js

@@ -1,33 +0,0 @@
-// src/icons/payment.tsx
-import { jsx } from "react/jsx-runtime";
-var IconPayment = (props) => {
-  const {
-    className,
-    style
-  } = props;
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 13.5996 13.5996",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: className ? `sfp-icon ${className}` : "sfp-icon",
-      style,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M12.7998 12C13.2416 12 13.5996 12.358 13.5996 12.7998C13.5996 13.2416 13.2416 13.5996 12.7998 13.5996H0.799805C0.357977 13.5996 0 13.2416 0 12.7998C0 12.358 0.357977 12 0.799805 12H12.7998ZM6 10.2285V2.77734L2.75977 6.13086C2.45276 6.44851 1.94662 6.4573 1.62891 6.15039C1.31121 5.84334 1.30233 5.33723 1.60938 5.01953L6.22461 0.244141L6.2832 0.188477C6.42692 0.0670196 6.60992 0 6.7998 0C7.01671 0 7.22426 0.088174 7.375 0.244141L11.9902 5.01953C12.2973 5.33723 12.2884 5.84334 11.9707 6.15039C11.653 6.4573 11.1468 6.44851 10.8398 6.13086L7.59961 2.77734V10.2285C7.59953 10.6703 7.24159 11.0283 6.7998 11.0283C6.35802 11.0283 6.00008 10.6703 6 10.2285Z",
-          fill: "currentColor"
-        }
-      )
-    }
-  );
-};
-var payment_default = IconPayment;
-export {
-  IconPayment,
-  payment_default as default
-};
-//# sourceMappingURL=payment.js.map

package/dist/icons/payment.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/icons/payment.tsx"],"sourcesContent":["import type { IconProps } from \"./types\";\n\nexport const IconPayment = (props: IconProps) => {\n  const {\n    className,\n    style,\n  } = props;\n\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 13.5996 13.5996\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className ? `sfp-icon ${className}` : \"sfp-icon\"}\n      style={style}\n    >\n      <path\n        d=\"M12.7998 12C13.2416 12 13.5996 12.358 13.5996 12.7998C13.5996 13.2416 13.2416 13.5996 12.7998 13.5996H0.799805C0.357977 13.5996 0 13.2416 0 12.7998C0 12.358 0.357977 12 0.799805 12H12.7998ZM6 10.2285V2.77734L2.75977 6.13086C2.45276 6.44851 1.94662 6.4573 1.62891 6.15039C1.31121 5.84334 1.30233 5.33723 1.60938 5.01953L6.22461 0.244141L6.2832 0.188477C6.42692 0.0670196 6.60992 0 6.7998 0C7.01671 0 7.22426 0.088174 7.375 0.244141L11.9902 5.01953C12.2973 5.33723 12.2884 5.84334 11.9707 6.15039C11.653 6.4573 11.1468 6.44851 10.8398 6.13086L7.59961 2.77734V10.2285C7.59953 10.6703 7.24159 11.0283 6.7998 11.0283C6.35802 11.0283 6.00008 10.6703 6 10.2285Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport default IconPayment;\n"],"mappings":";AAkBM;AAhBC,IAAM,cAAc,CAAC,UAAqB;AAC/C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,WAAW,YAAY,YAAY,SAAS,KAAK;AAAA,MACjD;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}