@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Form/ControlledCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledCheckbox.js","sources":["../../../src/components/Form/ControlledCheckbox.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\ninterface IControlledCheckboxProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  label?: string;\n  color?: 'blue' | 'red' | 'green' | 'amber' | 'purple' | 'indigo' | 'pink' | 'teal';\n  disabled?: boolean;\n  className?: string;\n  labelClassName?: string;\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /** The name when there is no visible `label`. */\n  'aria-label'?: string;\n  /** `-1` when the box only pictures the state of a surrounding control (a select option). */\n  tabIndex?: number;\n}\n\nconst ControlledCheckbox = ({\n  checked,\n  onChange,\n  label,\n  color = 'purple',\n  disabled = false,\n  className = '',\n  labelClassName = '',\n  size = 'md',\n  'aria-label': ariaLabel,\n  tabIndex,\n}: IControlledCheckboxProps) => {\n  const [colorClasses, setColorClasses] = useState('');\n  const [borderClasses, setBorderClasses] = useState('');\n\n  const sizeConfig = {\n    sm: {\n      container: 'w-4 h-4',\n      checkmark: 'h-2 w-2',\n    },\n    md: {\n      container: 'w-5 h-5',\n      checkmark: 'h-3 w-3',\n    },\n    lg: {\n      container: 'w-6 h-6',\n      checkmark: 'h-4 w-4',\n    },\n    xl: {\n      container: 'w-7 h-7',\n      checkmark: 'h-5 w-5',\n    },\n  };\n\n  useEffect(() => {\n    const colorMap = {\n      blue: 'bg-info',\n      red: 'bg-danger',\n      green: 'bg-success',\n      amber: 'bg-warning',\n      purple: 'bg-brand',\n      indigo: 'bg-brand',\n      pink: 'bg-accent',\n      teal: 'bg-secondary',\n    };\n\n    const borderMap = {\n      blue: 'border-info',\n      red: 'border-danger',\n      green: 'border-success',\n      amber: 'border-warning',\n      purple: 'border-border-strong',\n      indigo: 'border-brand',\n      pink: 'border-accent',\n      teal: 'border-secondary',\n    };\n\n    setColorClasses(colorMap[color] || 'bg-brand');\n    setBorderClasses(borderMap[color] || 'border-brand');\n  }, [color]);\n\n  return (\n    <label\n      className={classNames(\n        'relative flex items-center gap-2 px-[6px]',\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        className,\n      )}\n    >\n      <input\n        type=\"checkbox\"\n        checked={checked}\n        onChange={() => onChange(!checked)}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        tabIndex={tabIndex}\n        className=\"peer sr-only\"\n      />\n      <span\n        className={classNames(\n          sizeConfig[size].container,\n          'flex shrink-0 items-center justify-center rounded-md border p-[2px] transition-colors duration-base',\n          // The input is visually hidden, so the box is where the keyboard sees its focus.\n          'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2',\n          checked ? [colorClasses, 'border-0'] : ['bg-surface', borderClasses],\n          disabled && 'opacity-50',\n        )}\n      >\n        {checked && (\n          <svg\n            className=\"text-white\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            {/* eslint-disable-next-line i18n-check/no-literal-jsx-strings */}\n            <polyline points=\"20 6 9 17 4 12\" />\n          </svg>\n        )}\n      </span>\n      {label && <span className={classNames('text-sm font-medium text-foreground', labelClassName)}>{label}</span>}\n    </label>\n  );\n};\n\nexport default ControlledCheckbox;\n"],"names":[],"mappings":";;;AAkBA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AACF,MAAgC;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AACnD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AAErD,QAAM,aAAa;AAAA,IACjB,IAAI;AAAA,MACF,WAAW;AAAA,MACX,WAAW;AAAA,IAAA;AAAA,IAEb,IAAI;AAAA,MACF,WAAW;AAAA,MACX,WAAW;AAAA,IAAA;AAAA,IAEb,IAAI;AAAA,MACF,WAAW;AAAA,MACX,WAAW;AAAA,IAAA;AAAA,IAEb,IAAI;AAAA,MACF,WAAW;AAAA,MACX,WAAW;AAAA,IAAA;AAAA,EACb;AAGF,YAAU,MAAM;AACd,UAAM,WAAW;AAAA,MACf,MAAM;AAAA,MACN,KAAK;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAGR,UAAM,YAAY;AAAA,MAChB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAGR,oBAAgB,SAAS,KAAK,KAAK,UAAU;AAC7C,qBAAiB,UAAU,KAAK,KAAK,cAAc;AAAA,EACrD,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,uBAAuB;AAAA,QAClC;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL;AAAA,YACA,UAAU,MAAM,SAAS,CAAC,OAAO;AAAA,YACjC;AAAA,YACA,cAAY;AAAA,YACZ;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,WAAW,IAAI,EAAE;AAAA,cACjB;AAAA;AAAA,cAEA;AAAA,cACA,UAAU,CAAC,cAAc,UAAU,IAAI,CAAC,cAAc,aAAa;AAAA,cACnE,YAAY;AAAA,YAAA;AAAA,YAGb,UAAA,WACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,aAAY;AAAA,gBACZ,eAAc;AAAA,gBACd,gBAAe;AAAA,gBAGf,UAAA,oBAAC,YAAA,EAAS,QAAO,iBAAA,CAAiB;AAAA,cAAA;AAAA,YAAA;AAAA,UACpC;AAAA,QAAA;AAAA,QAGH,6BAAU,QAAA,EAAK,WAAW,WAAW,uCAAuC,cAAc,GAAI,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3G;"}

package/dist/components/Form/ControlledDialog.d.ts

@@ -0,0 +1,51 @@
+import { TDialogInitialFocus, TDialogSize } from './ControlledDialogPrimitives';
+export type { IDialogDismissConfig, TDialogInitialFocus, TDialogSize } from './ControlledDialogPrimitives';
+export { ControlledDialogBody, ControlledDialogFooter, ControlledDialogHeader, ControlledDialogRoot, ControlledDialogTitle, } from './ControlledDialogPrimitives';
+interface IDialogProps {
+    className?: string;
+    size?: TDialogSize;
+    open: boolean;
+    title: React.ReactNode;
+    subtitle?: string;
+    ariaLabel?: string;
+    /**
+     * Where focus lands on open. Default `auto`: the first field or button of the body/footer
+     * (the header close button is skipped), else the panel. Pass a ref to pick the element, or
+     * `panel` for the previous behaviour.
+     */
+    initialFocus?: TDialogInitialFocus;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    /** Fired when the user presses ESC. Omitted = falls back to `onCancel`. */
+    onDismiss?: () => void;
+    showClose?: boolean;
+    /** When false, never renders the header bar (close moves into the body). Default true. */
+    showHeader?: boolean;
+    showCancel?: boolean;
+    cancelLabel?: string;
+    cancelButtonClassName?: string;
+    showConfirm?: boolean;
+    confirmLabel?: string;
+    /** Cor do botão de confirmação. `danger` para ações destrutivas. */
+    confirmTone?: 'default' | 'danger';
+    disableCancel?: boolean;
+    disableConfirm?: boolean;
+    /** While true, blocks confirm/cancel/close/dismiss and shows a spinner on the confirm button. */
+    loading?: boolean;
+    bodyClass?: string;
+    footerClass?: string;
+    /**
+     * Skip the default `max-h-[70vh]` scroll wrapper around `children`. Use when the
+     * dialog body manages its own height/scroll (e.g. a fixed-size editor whose inner
+     * region scrolls), so there is a single content wrapper instead of two.
+     */
+    fitBody?: boolean;
+    useFooter?: boolean;
+    leftButtonSlot?: React.ReactNode;
+    style?: React.CSSProperties;
+    scrollContainerRef?: React.Ref<HTMLDivElement>;
+    onScroll?: React.UIEventHandler<HTMLDivElement>;
+    children: React.ReactNode;
+}
+declare const _default: import('react').NamedExoticComponent<IDialogProps>;
+export default _default;

package/dist/components/Form/ControlledDialog.js

@@ -0,0 +1,191 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useId } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import ControlledButton from "./ControlledButton.js";
+import { ControlledDialogRoot, ControlledDialogHeader, ControlledDialogTitle, DIALOG_SKIP_INITIAL_FOCUS_PROPS, ControlledDialogBody, ControlledDialogFooter } from "./ControlledDialogPrimitives.js";
+const DIALOG_DISMISS = { escapeKey: true, outsidePress: false };
+const ControlledDialog = ({
+  size = "md",
+  className,
+  open,
+  title,
+  subtitle,
+  ariaLabel,
+  initialFocus,
+  onCancel,
+  onConfirm,
+  onDismiss,
+  showClose = true,
+  showHeader = true,
+  showCancel = true,
+  cancelLabel = "Cancelar",
+  cancelButtonClassName,
+  showConfirm = true,
+  confirmLabel = "Confirmar",
+  confirmTone,
+  disableCancel = false,
+  disableConfirm = false,
+  loading = false,
+  bodyClass,
+  footerClass,
+  fitBody = false,
+  useFooter = true,
+  leftButtonSlot,
+  style,
+  scrollContainerRef,
+  onScroll,
+  children
+}) => {
+  const { t } = useTranslation("ui");
+  const { isMobile } = useBreakpoint();
+  const handleDialogClick = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  const handleCloseClick = useCallback(() => {
+    if (loading) return;
+    onCancel?.();
+  }, [onCancel, loading]);
+  const handleCancelClick = useCallback(() => {
+    if (loading) return;
+    onCancel?.();
+  }, [onCancel, loading]);
+  const handleConfirmClick = useCallback(() => {
+    if (loading) return;
+    onConfirm?.();
+  }, [onConfirm, loading]);
+  const handleDismiss = useCallback(() => {
+    if (loading) return;
+    if (onDismiss) {
+      onDismiss();
+      return;
+    }
+    onCancel?.();
+  }, [onCancel, onDismiss, loading]);
+  const isDangerConfirm = confirmTone === "danger" || confirmTone === void 0 && (confirmLabel === "Excluir" || confirmLabel === "Suspender" || confirmLabel === "Cancelar Item");
+  const hasHeaderTitle = title !== null && title !== void 0 && title !== "" && !(typeof title === "string" && title.trim() === "");
+  const shouldRenderHeader = showHeader && hasHeaderTitle;
+  const accessibleName = ariaLabel ?? (!shouldRenderHeader && typeof title === "string" ? title : void 0);
+  const subtitleId = useId();
+  const describedBy = shouldRenderHeader && subtitle ? subtitleId : void 0;
+  const usesDefaultScrollWrapper = !scrollContainerRef && !onScroll && !fitBody;
+  return /* @__PURE__ */ jsxs(
+    ControlledDialogRoot,
+    {
+      open,
+      handler: handleDismiss,
+      dismiss: DIALOG_DISMISS,
+      "aria-label": accessibleName,
+      "aria-describedby": describedBy,
+      "aria-modal": true,
+      initialFocus,
+      size,
+      className: classNames(
+        "zIndexMax focus:shadow-none focus:outline-none focus:ring-0 focus:ring-offset-0",
+        // Material Tailwind sizes the dialog in viewport percentages, so on a phone
+        // an `xs`/`sm` dialog is still only 80% wide while its content (a form row,
+        // a pair of buttons) needs everything it can get. Below the tablet edge the
+        // semantic size stops mattering and every dialog goes near-full-bleed.
+        // Gated in JS rather than with a `max-tablet:` variant because Tailwind does
+        // not emit `max-*` variants for this config (withMT declares `lg-max` in
+        // object form, which turns them off). Desktop keeps MT's sizing untouched.
+        isMobile && "!w-[calc(100vw-2rem)] !min-w-[calc(100vw-2rem)] !max-w-[calc(100vw-2rem)]",
+        className
+      ),
+      style,
+      onClick: handleDialogClick,
+      children: [
+        shouldRenderHeader && /* @__PURE__ */ jsxs(ControlledDialogHeader, { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx(ControlledDialogTitle, { children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: "text-xs font-normal opacity-70", children: subtitle })
+          ] }),
+          showClose && /* @__PURE__ */ jsx("div", { ...DIALOG_SKIP_INITIAL_FOCUS_PROPS, className: "flex shrink-0", children: /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.close"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              defaultHtmlButton: true,
+              "aria-label": t("actions.close"),
+              onClick: handleCloseClick,
+              className: "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-muted-hover hover:text-foreground-muted",
+              children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 20 })
+            }
+          ) }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          ControlledDialogBody,
+          {
+            className: classNames(
+              "relative p-2",
+              !shouldRenderHeader && "pt-3",
+              usesDefaultScrollWrapper && "flex flex-col",
+              bodyClass
+            ),
+            children: [
+              !shouldRenderHeader && showClose && /* @__PURE__ */ jsx("div", { ...DIALOG_SKIP_INITIAL_FOCUS_PROPS, className: "absolute right-3 top-3 z-10", children: /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.close"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+                ControlledButton,
+                {
+                  defaultHtmlButton: true,
+                  "aria-label": t("actions.close"),
+                  onClick: handleCloseClick,
+                  className: "flex size-8 cursor-pointer items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-muted-hover hover:text-foreground-muted",
+                  children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 20 })
+                }
+              ) }) }),
+              usesDefaultScrollWrapper ? /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] min-h-0 w-full flex-auto overflow-y-auto scroll-smooth", children }) : children
+            ]
+          }
+        ),
+        useFooter && /* @__PURE__ */ jsxs(
+          ControlledDialogFooter,
+          {
+            className: classNames("flex w-full shrink-0 flex-wrap items-center justify-between gap-y-2", footerClass),
+            children: [
+              leftButtonSlot ? /* @__PURE__ */ jsx(Fragment, { children: leftButtonSlot }) : /* @__PURE__ */ jsx("div", {}),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-end gap-x-2", children: [
+                showCancel && /* @__PURE__ */ jsx(
+                  ControlledButton,
+                  {
+                    variant: "outlined",
+                    className: classNames("focus:shadow-none focus:outline-none focus:ring-0", cancelButtonClassName),
+                    onClick: handleCancelClick,
+                    disabled: disableCancel || loading,
+                    children: /* @__PURE__ */ jsx("span", { children: cancelLabel })
+                  }
+                ),
+                showConfirm && /* @__PURE__ */ jsx(
+                  ControlledButton,
+                  {
+                    variant: "filled",
+                    className: classNames("hover:shadow-none focus:outline-none focus:ring-0", {
+                      "bg-brand hover:bg-brand-hover": !isDangerConfirm,
+                      "bg-danger hover:bg-danger-soft": isDangerConfirm
+                    }),
+                    onClick: handleConfirmClick,
+                    disabled: disableConfirm || loading,
+                    children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-1.5", children: [
+                      loading && /* @__PURE__ */ jsx(MaterialSymbol, { icon: "progress_activity", size: 16, className: "animate-spin" }),
+                      /* @__PURE__ */ jsx("span", { children: confirmLabel })
+                    ] })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const ControlledDialog$1 = memo(ControlledDialog);
+export {
+  ControlledDialogBody,
+  ControlledDialogFooter,
+  ControlledDialogHeader,
+  ControlledDialogRoot,
+  ControlledDialogTitle,
+  ControlledDialog$1 as default
+};
+//# sourceMappingURL=ControlledDialog.js.map

package/dist/components/Form/ControlledDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledDialog.js","sources":["../../../src/components/Form/ControlledDialog.tsx"],"sourcesContent":["import { memo, useCallback, useId } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\n\nimport ControlledButton from './ControlledButton';\nimport {\n  ControlledDialogBody,\n  ControlledDialogFooter,\n  ControlledDialogHeader,\n  ControlledDialogRoot,\n  ControlledDialogTitle,\n  DIALOG_SKIP_INITIAL_FOCUS_PROPS,\n  TDialogInitialFocus,\n  TDialogSize,\n} from './ControlledDialogPrimitives';\n\nexport type { IDialogDismissConfig, TDialogInitialFocus, TDialogSize } from './ControlledDialogPrimitives';\nexport {\n  ControlledDialogBody,\n  ControlledDialogFooter,\n  ControlledDialogHeader,\n  ControlledDialogRoot,\n  ControlledDialogTitle,\n} from './ControlledDialogPrimitives';\n\ninterface IDialogProps {\n  className?: string;\n  size?: TDialogSize;\n  open: boolean;\n  title: React.ReactNode;\n  subtitle?: string;\n  ariaLabel?: string;\n  /**\n   * Where focus lands on open. Default `auto`: the first field or button of the body/footer\n   * (the header close button is skipped), else the panel. Pass a ref to pick the element, or\n   * `panel` for the previous behaviour.\n   */\n  initialFocus?: TDialogInitialFocus;\n\n  onCancel?: () => void;\n  onConfirm?: () => void;\n  /** Fired when the user presses ESC. Omitted = falls back to `onCancel`. */\n  onDismiss?: () => void;\n\n  showClose?: boolean;\n  /** When false, never renders the header bar (close moves into the body). Default true. */\n  showHeader?: boolean;\n  showCancel?: boolean;\n  cancelLabel?: string;\n  cancelButtonClassName?: string;\n  showConfirm?: boolean;\n  confirmLabel?: string;\n  /** Cor do botão de confirmação. `danger` para ações destrutivas. */\n  confirmTone?: 'default' | 'danger';\n  disableCancel?: boolean;\n  disableConfirm?: boolean;\n  /** While true, blocks confirm/cancel/close/dismiss and shows a spinner on the confirm button. */\n  loading?: boolean;\n\n  bodyClass?: string;\n  footerClass?: string;\n  /**\n   * Skip the default `max-h-[70vh]` scroll wrapper around `children`. Use when the\n   * dialog body manages its own height/scroll (e.g. a fixed-size editor whose inner\n   * region scrolls), so there is a single content wrapper instead of two.\n   */\n  fitBody?: boolean;\n  useFooter?: boolean;\n\n  leftButtonSlot?: React.ReactNode;\n\n  style?: React.CSSProperties;\n  scrollContainerRef?: React.Ref<HTMLDivElement>;\n  onScroll?: React.UIEventHandler<HTMLDivElement>;\n  children: React.ReactNode;\n}\n\nconst DIALOG_DISMISS = { escapeKey: true, outsidePress: false };\n\nconst ControlledDialog: React.FC<IDialogProps> = ({\n  size = 'md',\n  className,\n  open,\n  title,\n  subtitle,\n  ariaLabel,\n  initialFocus,\n\n  onCancel,\n  onConfirm,\n  onDismiss,\n\n  showClose = true,\n  showHeader = true,\n  showCancel = true,\n  cancelLabel = 'Cancelar',\n  cancelButtonClassName,\n  showConfirm = true,\n  confirmLabel = 'Confirmar',\n  confirmTone,\n  disableCancel = false,\n  disableConfirm = false,\n  loading = false,\n\n  bodyClass,\n  footerClass,\n  fitBody = false,\n  useFooter = true,\n\n  leftButtonSlot,\n\n  style,\n  scrollContainerRef,\n  onScroll,\n  children,\n}) => {\n  const { t } = useTranslation('ui');\n  const { isMobile } = useBreakpoint();\n  const handleDialogClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    e.stopPropagation();\n  }, []);\n\n  const handleCloseClick = useCallback(() => {\n    if (loading) return;\n    onCancel?.();\n  }, [onCancel, loading]);\n\n  const handleCancelClick = useCallback(() => {\n    if (loading) return;\n    onCancel?.();\n  }, [onCancel, loading]);\n\n  const handleConfirmClick = useCallback(() => {\n    if (loading) return;\n    onConfirm?.();\n  }, [onConfirm, loading]);\n\n  const handleDismiss = useCallback(() => {\n    if (loading) return;\n    if (onDismiss) {\n      onDismiss();\n      return;\n    }\n    onCancel?.();\n  }, [onCancel, onDismiss, loading]);\n\n  const isDangerConfirm =\n    confirmTone === 'danger' ||\n    (confirmTone === undefined &&\n      (confirmLabel === 'Excluir' || confirmLabel === 'Suspender' || confirmLabel === 'Cancelar Item'));\n\n  const hasHeaderTitle =\n    title !== null && title !== undefined && title !== '' && !(typeof title === 'string' && title.trim() === '');\n  const shouldRenderHeader = showHeader && hasHeaderTitle;\n  // With a rendered header the title element names the dialog (aria-labelledby, wired by the\n  // root); without one, a string title still becomes the aria-label.\n  const accessibleName = ariaLabel ?? (!shouldRenderHeader && typeof title === 'string' ? title : undefined);\n  const subtitleId = useId();\n  const describedBy = shouldRenderHeader && subtitle ? subtitleId : undefined;\n  // The wrapper only clips when it is a flex child whose height the body can shrink: `h-full`\n  // resolves to `auto` here (the panel has a max height, not a definite one), so content used to\n  // overflow underneath the footer on short viewports.\n  const usesDefaultScrollWrapper = !scrollContainerRef && !onScroll && !fitBody;\n\n  return (\n    <ControlledDialogRoot\n      open={open}\n      handler={handleDismiss}\n      dismiss={DIALOG_DISMISS}\n      aria-label={accessibleName}\n      aria-describedby={describedBy}\n      aria-modal={true}\n      initialFocus={initialFocus}\n      size={size}\n      className={classNames(\n        'zIndexMax focus:shadow-none focus:outline-none focus:ring-0 focus:ring-offset-0',\n        // Material Tailwind sizes the dialog in viewport percentages, so on a phone\n        // an `xs`/`sm` dialog is still only 80% wide while its content (a form row,\n        // a pair of buttons) needs everything it can get. Below the tablet edge the\n        // semantic size stops mattering and every dialog goes near-full-bleed.\n        // Gated in JS rather than with a `max-tablet:` variant because Tailwind does\n        // not emit `max-*` variants for this config (withMT declares `lg-max` in\n        // object form, which turns them off). Desktop keeps MT's sizing untouched.\n        isMobile && '!w-[calc(100vw-2rem)] !min-w-[calc(100vw-2rem)] !max-w-[calc(100vw-2rem)]',\n        className,\n      )}\n      style={style}\n      onClick={handleDialogClick}\n    >\n      {shouldRenderHeader && (\n        <ControlledDialogHeader className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            <ControlledDialogTitle>{title}</ControlledDialogTitle>\n            {subtitle && (\n              <p id={subtitleId} className=\"text-xs font-normal opacity-70\">\n                {subtitle}\n              </p>\n            )}\n          </div>\n          {showClose && (\n            <div {...DIALOG_SKIP_INITIAL_FOCUS_PROPS} className=\"flex shrink-0\">\n              <ControlledTooltip content={t('actions.close')} className=\"z-[9999]\">\n                <ControlledButton\n                  defaultHtmlButton\n                  aria-label={t('actions.close')}\n                  onClick={handleCloseClick}\n                  className=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-muted-hover hover:text-foreground-muted\"\n                >\n                  <MaterialSymbol icon=\"close\" size={20} />\n                </ControlledButton>\n              </ControlledTooltip>\n            </div>\n          )}\n        </ControlledDialogHeader>\n      )}\n      <ControlledDialogBody\n        className={classNames(\n          'relative p-2',\n          !shouldRenderHeader && 'pt-3',\n          usesDefaultScrollWrapper && 'flex flex-col',\n          bodyClass,\n        )}\n      >\n        {!shouldRenderHeader && showClose && (\n          <div {...DIALOG_SKIP_INITIAL_FOCUS_PROPS} className=\"absolute right-3 top-3 z-10\">\n            <ControlledTooltip content={t('actions.close')} className=\"z-[9999]\">\n              <ControlledButton\n                defaultHtmlButton\n                aria-label={t('actions.close')}\n                onClick={handleCloseClick}\n                className=\"flex size-8 cursor-pointer items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-muted-hover hover:text-foreground-muted\"\n              >\n                <MaterialSymbol icon=\"close\" size={20} />\n              </ControlledButton>\n            </ControlledTooltip>\n          </div>\n        )}\n        {usesDefaultScrollWrapper ? (\n          <div className=\"max-h-[70vh] min-h-0 w-full flex-auto overflow-y-auto scroll-smooth\">{children}</div>\n        ) : (\n          children\n        )}\n      </ControlledDialogBody>\n\n      {useFooter && (\n        <ControlledDialogFooter\n          className={classNames('flex w-full shrink-0 flex-wrap items-center justify-between gap-y-2', footerClass)}\n        >\n          {leftButtonSlot ? <>{leftButtonSlot}</> : <div />}\n\n          <div className=\"flex flex-1 items-center justify-end gap-x-2\">\n            {showCancel && (\n              <ControlledButton\n                variant=\"outlined\"\n                className={classNames('focus:shadow-none focus:outline-none focus:ring-0', cancelButtonClassName)}\n                onClick={handleCancelClick}\n                disabled={disableCancel || loading}\n              >\n                <span>{cancelLabel}</span>\n              </ControlledButton>\n            )}\n\n            {showConfirm && (\n              <ControlledButton\n                variant=\"filled\"\n                className={classNames('hover:shadow-none focus:outline-none focus:ring-0', {\n                  'bg-brand hover:bg-brand-hover': !isDangerConfirm,\n                  'bg-danger hover:bg-danger-soft': isDangerConfirm,\n                })}\n                onClick={handleConfirmClick}\n                disabled={disableConfirm || loading}\n              >\n                <span className=\"flex items-center gap-x-1.5\">\n                  {loading && <MaterialSymbol icon=\"progress_activity\" size={16} className=\"animate-spin\" />}\n                  <span>{confirmLabel}</span>\n                </span>\n              </ControlledButton>\n            )}\n          </div>\n        </ControlledDialogFooter>\n      )}\n    </ControlledDialogRoot>\n  );\n};\n\nexport default memo(ControlledDialog);\n"],"names":[],"mappings":";;;;;;;;;AAiFA,MAAM,iBAAiB,EAAE,WAAW,MAAM,cAAc,MAAA;AAExD,MAAM,mBAA2C,CAAC;AAAA,EAChD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf;AAAA,EACA,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EAEV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,SAAA,IAAa,cAAA;AACrB,QAAM,oBAAoB,YAAY,CAAC,MAAwC;AAC7E,MAAE,gBAAA;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,QAAI,QAAS;AACb,eAAA;AAAA,EACF,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,QAAS;AACb,eAAA;AAAA,EACF,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,QAAS;AACb,gBAAA;AAAA,EACF,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,QAAS;AACb,QAAI,WAAW;AACb,gBAAA;AACA;AAAA,IACF;AACA,eAAA;AAAA,EACF,GAAG,CAAC,UAAU,WAAW,OAAO,CAAC;AAEjC,QAAM,kBACJ,gBAAgB,YACf,gBAAgB,WACd,iBAAiB,aAAa,iBAAiB,eAAe,iBAAiB;AAEpF,QAAM,iBACJ,UAAU,QAAQ,UAAU,UAAa,UAAU,MAAM,EAAE,OAAO,UAAU,YAAY,MAAM,WAAW;AAC3G,QAAM,qBAAqB,cAAc;AAGzC,QAAM,iBAAiB,cAAc,CAAC,sBAAsB,OAAO,UAAU,WAAW,QAAQ;AAChG,QAAM,aAAa,MAAA;AACnB,QAAM,cAAc,sBAAsB,WAAW,aAAa;AAIlE,QAAM,2BAA2B,CAAC,sBAAsB,CAAC,YAAY,CAAC;AAEtE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAEF;AAAA,MACA,SAAS;AAAA,MAER,UAAA;AAAA,QAAA,sBACC,qBAAC,wBAAA,EAAuB,WAAU,2CAChC,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,YAAA,oBAAC,yBAAuB,UAAA,MAAA,CAAM;AAAA,YAC7B,YACC,oBAAC,KAAA,EAAE,IAAI,YAAY,WAAU,kCAC1B,UAAA,SAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UACC,aACC,oBAAC,OAAA,EAAK,GAAG,iCAAiC,WAAU,iBAClD,UAAA,oBAAC,mBAAA,EAAkB,SAAS,EAAE,eAAe,GAAG,WAAU,YACxD,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,mBAAiB;AAAA,cACjB,cAAY,EAAE,eAAe;AAAA,cAC7B,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,UAAA,oBAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA,GAE3C,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,CAAC,sBAAsB;AAAA,cACvB,4BAA4B;AAAA,cAC5B;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAA,CAAC,sBAAsB,aACtB,oBAAC,OAAA,EAAK,GAAG,iCAAiC,WAAU,+BAClD,UAAA,oBAAC,qBAAkB,SAAS,EAAE,eAAe,GAAG,WAAU,YACxD,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,mBAAiB;AAAA,kBACjB,cAAY,EAAE,eAAe;AAAA,kBAC7B,SAAS;AAAA,kBACT,WAAU;AAAA,kBAEV,UAAA,oBAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,gBAAA;AAAA,cAAA,GAE3C,EAAA,CACF;AAAA,cAED,2BACC,oBAAC,OAAA,EAAI,WAAU,uEAAuE,UAAS,IAE/F;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIH,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,WAAW,uEAAuE,WAAW;AAAA,YAEvG,UAAA;AAAA,cAAA,iBAAiB,oBAAA,UAAA,EAAG,UAAA,eAAA,CAAe,IAAM,oBAAC,OAAA,EAAI;AAAA,cAE/C,qBAAC,OAAA,EAAI,WAAU,gDACZ,UAAA;AAAA,gBAAA,cACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,WAAW,WAAW,qDAAqD,qBAAqB;AAAA,oBAChG,SAAS;AAAA,oBACT,UAAU,iBAAiB;AAAA,oBAE3B,UAAA,oBAAC,UAAM,UAAA,YAAA,CAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAItB,eACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,WAAW,WAAW,qDAAqD;AAAA,sBACzE,iCAAiC,CAAC;AAAA,sBAClC,kCAAkC;AAAA,oBAAA,CACnC;AAAA,oBACD,SAAS;AAAA,oBACT,UAAU,kBAAkB;AAAA,oBAE5B,UAAA,qBAAC,QAAA,EAAK,WAAU,+BACb,UAAA;AAAA,sBAAA,+BAAY,gBAAA,EAAe,MAAK,qBAAoB,MAAM,IAAI,WAAU,gBAAe;AAAA,sBACxF,oBAAC,UAAM,UAAA,aAAA,CAAa;AAAA,oBAAA,EAAA,CACtB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,MAAA,qBAAe,KAAK,gBAAgB;"}

package/dist/components/Form/ControlledDialogPrimitives.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+export type TDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * Where focus lands when the dialog opens. `auto` (default): an element that asked for it
+ * (`autoFocus` / `data-autofocus`), else the first tabbable element outside a
+ * `data-dialog-initial-focus="skip"` zone, else the panel itself. `panel`: the panel, the
+ * pre-0.13 behaviour. A ref: that element.
+ */
+export type TDialogInitialFocus = 'auto' | 'panel' | React.RefObject<HTMLElement | null>;
+export interface IDialogDismissConfig {
+    enabled?: boolean;
+    escapeKey?: boolean;
+    outsidePress?: boolean;
+}
+type TDivPropsWithoutMotionConflicts = Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'onScroll' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'>;
+interface IControlledDialogRootProps extends TDivPropsWithoutMotionConflicts {
+    open: boolean;
+    handler?: () => void;
+    size?: TDialogSize;
+    dismiss?: IDialogDismissConfig;
+    className?: string;
+    overlayClassName?: string;
+    initialFocus?: TDialogInitialFocus;
+    children: React.ReactNode;
+}
+export declare const getTabbableElements: (container: HTMLElement) => Array<HTMLElement>;
+/** Spread on a wrapper whose controls must not take the initial focus (the header close button). */
+export declare const DIALOG_SKIP_INITIAL_FOCUS_PROPS: {
+    readonly 'data-dialog-initial-focus': "skip";
+};
+/**
+ * Portals only while open (plus its exit transition), so a closed dialog inside a mapped
+ * list renders nothing at all.
+ */
+export declare const ControlledDialogRoot: React.FC<IControlledDialogRootProps>;
+interface IDialogSectionProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const ControlledDialogHeader: React.FC<IDialogSectionProps>;
+export declare const ControlledDialogBody: React.FC<IDialogSectionProps>;
+export declare const ControlledDialogFooter: React.FC<IDialogSectionProps>;
+interface IControlledDialogTitleProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * The dialog's name: a level-2 heading whose id the root wires into `aria-labelledby`, unless
+ * the root received its own `aria-label` / `aria-labelledby`. A `div` with the heading role, so
+ * any title content (blocks included) stays valid markup.
+ */
+export declare const ControlledDialogTitle: React.FC<IControlledDialogTitleProps>;
+export {};

package/dist/components/Form/ControlledDialogPrimitives.js

@@ -0,0 +1,245 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useRef, useState, useContext, useId, useMemo, useEffect } from "react";
+import classNames from "classnames";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+import { getPortalHost } from "../../helpers/portalHost.js";
+import { scrimVariants, dialogVariants } from "../../motion/motionPresets.js";
+import "../../motion/motionTokens.js";
+const SIZE_CLASS = {
+  xs: "w-full md:w-3/5 lg:w-2/5 2xl:w-1/4 min-w-[80%] md:min-w-[60%] lg:min-w-[40%] 2xl:min-w-[25%] max-w-[80%] md:max-w-[60%] lg:max-w-[40%] 2xl:max-w-[25%]",
+  sm: "w-full md:w-2/3 lg:w-2/4 2xl:w-1/3 min-w-[80%] md:min-w-[66.666667%] lg:min-w-[50%] 2xl:min-w-[33.333333%] max-w-[80%] md:max-w-[66.666667%] lg:max-w-[50%] 2xl:max-w-[33.333333%]",
+  md: "w-full md:w-3/4 lg:w-3/5 2xl:w-2/5 min-w-[90%] md:min-w-[75%] lg:min-w-[60%] 2xl:min-w-[40%] max-w-[90%] md:max-w-[75%] lg:max-w-[60%] 2xl:max-w-[40%]",
+  lg: "w-full md:w-5/6 lg:w-3/4 2xl:w-3/5 min-w-[90%] md:min-w-[83.333333%] lg:min-w-[75%] 2xl:min-w-[60%] max-w-[90%] md:max-w-[83.333333%] lg:max-w-[75%] 2xl:max-w-[60%]",
+  xl: "w-full md:w-5/6 2xl:w-3/4 min-w-[95%] md:min-w-[83.333333%] 2xl:min-w-[75%] max-w-[95%] md:max-w-[83.333333%] 2xl:max-w-[75%]",
+  xxl: "w-screen min-w-[100vw] max-w-[100vw]"
+};
+const TABBABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable="false"])',
+  "[tabindex]"
+].join(",");
+const isTabbable = (element) => {
+  if (element.tabIndex < 0) return false;
+  if (element.closest("[hidden], [inert]")) return false;
+  if (typeof element.checkVisibility === "function" && !element.checkVisibility()) return false;
+  return true;
+};
+const getTabbableElements = (container) => Array.from(container.querySelectorAll(TABBABLE_SELECTOR)).filter(isTabbable);
+const openDialogStack = [];
+const pushOpenDialog = (panel, depth) => {
+  openDialogStack.push({ panel, depth });
+  openDialogStack.sort((a, b) => {
+    if (a.depth !== b.depth) return a.depth - b.depth;
+    return a.panel.compareDocumentPosition(b.panel) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+  });
+};
+const removeOpenDialog = (panel) => {
+  const index = openDialogStack.findIndex((entry) => entry.panel === panel);
+  if (index >= 0) openDialogStack.splice(index, 1);
+};
+const DialogDepthContext = createContext(0);
+const isTopDialog = (panel) => panel !== null && openDialogStack[openDialogStack.length - 1]?.panel === panel;
+const resolveInitialFocus = (panel, initialFocus) => {
+  if (initialFocus === "panel") return panel;
+  if (initialFocus !== "auto") return initialFocus.current ?? panel;
+  const requested = panel.querySelector("[data-autofocus], [autofocus]");
+  if (requested) return requested;
+  const firstTabbable = getTabbableElements(panel).find(
+    (element) => !element.closest('[data-dialog-initial-focus="skip"]')
+  );
+  return firstTabbable ?? panel;
+};
+const DIALOG_SKIP_INITIAL_FOCUS_PROPS = { "data-dialog-initial-focus": "skip" };
+const DialogTitleContext = createContext(null);
+const ControlledDialogRoot = ({
+  open,
+  handler,
+  size = "md",
+  dismiss,
+  className,
+  overlayClassName,
+  initialFocus = "auto",
+  children,
+  ...rest
+}) => {
+  const panelRef = useRef(null);
+  const [isLeaving, setIsLeaving] = useState(false);
+  const previouslyFocusedRef = useRef(null);
+  const initialFocusRef = useRef(initialFocus);
+  initialFocusRef.current = initialFocus;
+  const depth = useContext(DialogDepthContext) + 1;
+  const titleId = useId();
+  const [hasTitle, setHasTitle] = useState(false);
+  const titleContext = useMemo(() => ({ titleId, registerTitle: setHasTitle }), [titleId]);
+  const hasOwnName = rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0;
+  useEffect(() => {
+    if (open) setIsLeaving(true);
+  }, [open]);
+  useEffect(() => {
+    if (!open && !isLeaving) return void 0;
+    const { overflow } = document.body.style;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = overflow;
+    };
+  }, [open, isLeaving]);
+  useEffect(() => {
+    if (!open) return void 0;
+    previouslyFocusedRef.current = document.activeElement;
+    const frame = requestAnimationFrame(() => {
+      const panel = panelRef.current;
+      if (!panel) return;
+      if (panel !== document.activeElement && panel.contains(document.activeElement)) return;
+      resolveInitialFocus(panel, initialFocusRef.current).focus();
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+      previouslyFocusedRef.current?.focus?.();
+    };
+  }, [open]);
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!open || !panel) return void 0;
+    pushOpenDialog(panel, depth);
+    const handleTab = (event) => {
+      if (event.key !== "Tab" || event.defaultPrevented || !isTopDialog(panel)) return;
+      const active = document.activeElement;
+      const isInside = active !== null && panel.contains(active);
+      const isInPageBehind = !active || active === document.body || Boolean(panel.compareDocumentPosition(active) & Node.DOCUMENT_POSITION_PRECEDING);
+      if (!isInside && !isInPageBehind) return;
+      const tabbables = getTabbableElements(panel);
+      if (tabbables.length === 0) {
+        event.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = tabbables[0];
+      const last = tabbables[tabbables.length - 1];
+      if (!isInside || active === panel) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+      } else if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleTab);
+    return () => {
+      document.removeEventListener("keydown", handleTab);
+      removeOpenDialog(panel);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open || dismiss?.enabled === false || dismiss?.escapeKey === false) return void 0;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      if (panelRef.current && openDialogStack.length > 0 && !isTopDialog(panelRef.current)) return;
+      handler?.();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, dismiss, handler]);
+  const portalHost = getPortalHost();
+  if (portalHost === null) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: () => setIsLeaving(false), children: open && /* @__PURE__ */ jsxs(motion.div, { className: "fixed inset-0 z-[9999] flex items-center justify-center", children: [
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          variants: scrimVariants,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          "aria-hidden": true,
+          onClick: () => {
+            if (dismiss?.enabled === false || !dismiss?.outsidePress) return;
+            handler?.();
+          },
+          className: classNames("absolute inset-0 glass-scrim", overlayClassName)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: panelRef,
+          variants: dialogVariants,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          role: "dialog",
+          "aria-modal": true,
+          "aria-labelledby": hasTitle && !hasOwnName ? titleId : void 0,
+          tabIndex: -1,
+          ...rest,
+          className: mergeClasses(
+            classNames(
+              "relative m-4 flex max-h-[90vh] flex-col rounded-lg bg-surface text-base font-light leading-relaxed",
+              "text-foreground-muted shadow-xl outline-none",
+              SIZE_CLASS[size]
+            ),
+            className
+          ),
+          children: /* @__PURE__ */ jsx(DialogDepthContext.Provider, { value: depth, children: /* @__PURE__ */ jsx(DialogTitleContext.Provider, { value: titleContext, children }) })
+        }
+      )
+    ] }, "dialog-layer") }),
+    portalHost
+  );
+};
+const ControlledDialogHeader = ({ children, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: mergeClasses(
+      "flex shrink-0 items-center p-4 text-2xl font-semibold leading-snug text-foreground antialiased",
+      className
+    ),
+    children
+  }
+);
+const ControlledDialogBody = ({ children, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: mergeClasses("relative min-h-0 flex-1 p-4 text-base font-light leading-relaxed antialiased", className),
+    children
+  }
+);
+const ControlledDialogFooter = ({ children, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: mergeClasses("flex shrink-0 flex-wrap items-center justify-end p-4 text-foreground-muted", className),
+    children
+  }
+);
+const ControlledDialogTitle = ({ children, className }) => {
+  const context = useContext(DialogTitleContext);
+  const registerTitle = context?.registerTitle;
+  useEffect(() => {
+    if (!registerTitle) return void 0;
+    registerTitle(true);
+    return () => registerTitle(false);
+  }, [registerTitle]);
+  return /* @__PURE__ */ jsx("div", { id: context?.titleId, role: "heading", "aria-level": 2, className, children });
+};
+export {
+  ControlledDialogBody,
+  ControlledDialogFooter,
+  ControlledDialogHeader,
+  ControlledDialogRoot,
+  ControlledDialogTitle,
+  DIALOG_SKIP_INITIAL_FOCUS_PROPS,
+  getTabbableElements
+};
+//# sourceMappingURL=ControlledDialogPrimitives.js.map

package/dist/components/Form/ControlledDialogPrimitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledDialogPrimitives.js","sources":["../../../src/components/Form/ControlledDialogPrimitives.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { createPortal } from 'react-dom';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { getPortalHost } from '@/helpers/portalHost';\nimport { dialogVariants, scrimVariants } from '@/motion';\n\nexport type TDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n/**\n * Where focus lands when the dialog opens. `auto` (default): an element that asked for it\n * (`autoFocus` / `data-autofocus`), else the first tabbable element outside a\n * `data-dialog-initial-focus=\"skip\"` zone, else the panel itself. `panel`: the panel, the\n * pre-0.13 behaviour. A ref: that element.\n */\nexport type TDialogInitialFocus = 'auto' | 'panel' | React.RefObject<HTMLElement | null>;\n\nexport interface IDialogDismissConfig {\n  enabled?: boolean;\n  escapeKey?: boolean;\n  outsidePress?: boolean;\n}\n\nconst SIZE_CLASS: Record<TDialogSize, string> = {\n  xs: 'w-full md:w-3/5 lg:w-2/5 2xl:w-1/4 min-w-[80%] md:min-w-[60%] lg:min-w-[40%] 2xl:min-w-[25%] max-w-[80%] md:max-w-[60%] lg:max-w-[40%] 2xl:max-w-[25%]',\n  sm: 'w-full md:w-2/3 lg:w-2/4 2xl:w-1/3 min-w-[80%] md:min-w-[66.666667%] lg:min-w-[50%] 2xl:min-w-[33.333333%] max-w-[80%] md:max-w-[66.666667%] lg:max-w-[50%] 2xl:max-w-[33.333333%]',\n  md: 'w-full md:w-3/4 lg:w-3/5 2xl:w-2/5 min-w-[90%] md:min-w-[75%] lg:min-w-[60%] 2xl:min-w-[40%] max-w-[90%] md:max-w-[75%] lg:max-w-[60%] 2xl:max-w-[40%]',\n  lg: 'w-full md:w-5/6 lg:w-3/4 2xl:w-3/5 min-w-[90%] md:min-w-[83.333333%] lg:min-w-[75%] 2xl:min-w-[60%] max-w-[90%] md:max-w-[83.333333%] lg:max-w-[75%] 2xl:max-w-[60%]',\n  xl: 'w-full md:w-5/6 2xl:w-3/4 min-w-[95%] md:min-w-[83.333333%] 2xl:min-w-[75%] max-w-[95%] md:max-w-[83.333333%] 2xl:max-w-[75%]',\n  xxl: 'w-screen min-w-[100vw] max-w-[100vw]',\n};\n\ntype TDivPropsWithoutMotionConflicts = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  | 'className'\n  | 'onScroll'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onAnimationStart'\n  | 'onAnimationEnd'\n  | 'onAnimationIteration'\n>;\n\ninterface IControlledDialogRootProps extends TDivPropsWithoutMotionConflicts {\n  open: boolean;\n  handler?: () => void;\n  size?: TDialogSize;\n  dismiss?: IDialogDismissConfig;\n  className?: string;\n  overlayClassName?: string;\n  initialFocus?: TDialogInitialFocus;\n  children: React.ReactNode;\n}\n\nconst TABBABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  'audio[controls]',\n  'video[controls]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  '[tabindex]',\n].join(',');\n\nconst isTabbable = (element: HTMLElement): boolean => {\n  if (element.tabIndex < 0) return false;\n  if (element.closest('[hidden], [inert]')) return false;\n  if (typeof element.checkVisibility === 'function' && !element.checkVisibility()) return false;\n  return true;\n};\n\nexport const getTabbableElements = (container: HTMLElement): Array<HTMLElement> =>\n  Array.from(container.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR)).filter(isTabbable);\n\n/* Open panels, top last: only the top one traps Tab and answers ESC. Ordered by React nesting\n   depth (a dialog rendered inside another sits above it), then by document order, which is\n   opening order for siblings because each one portals to the end of the host. */\nconst openDialogStack: Array<{ panel: HTMLElement; depth: number }> = [];\n\nconst pushOpenDialog = (panel: HTMLElement, depth: number) => {\n  openDialogStack.push({ panel, depth });\n  openDialogStack.sort((a, b) => {\n    if (a.depth !== b.depth) return a.depth - b.depth;\n    return a.panel.compareDocumentPosition(b.panel) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n  });\n};\n\nconst removeOpenDialog = (panel: HTMLElement) => {\n  const index = openDialogStack.findIndex((entry) => entry.panel === panel);\n  if (index >= 0) openDialogStack.splice(index, 1);\n};\n\nconst DialogDepthContext = createContext(0);\n\nconst isTopDialog = (panel: HTMLElement | null) =>\n  panel !== null && openDialogStack[openDialogStack.length - 1]?.panel === panel;\n\nconst resolveInitialFocus = (panel: HTMLElement, initialFocus: TDialogInitialFocus): HTMLElement => {\n  if (initialFocus === 'panel') return panel;\n  if (initialFocus !== 'auto') return initialFocus.current ?? panel;\n\n  const requested = panel.querySelector<HTMLElement>('[data-autofocus], [autofocus]');\n  if (requested) return requested;\n\n  const firstTabbable = getTabbableElements(panel).find(\n    (element) => !element.closest('[data-dialog-initial-focus=\"skip\"]'),\n  );\n  return firstTabbable ?? panel;\n};\n\n/** Spread on a wrapper whose controls must not take the initial focus (the header close button). */\nexport const DIALOG_SKIP_INITIAL_FOCUS_PROPS = { 'data-dialog-initial-focus': 'skip' } as const;\n\ninterface IDialogTitleContext {\n  titleId: string;\n  registerTitle: (present: boolean) => void;\n}\n\nconst DialogTitleContext = createContext<IDialogTitleContext | null>(null);\n\n/**\n * Portals only while open (plus its exit transition), so a closed dialog inside a mapped\n * list renders nothing at all.\n */\nexport const ControlledDialogRoot: React.FC<IControlledDialogRootProps> = ({\n  open,\n  handler,\n  size = 'md',\n  dismiss,\n  className,\n  overlayClassName,\n  initialFocus = 'auto',\n  children,\n  ...rest\n}) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [isLeaving, setIsLeaving] = useState(false);\n  const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n  const initialFocusRef = useRef(initialFocus);\n  initialFocusRef.current = initialFocus;\n\n  const depth = useContext(DialogDepthContext) + 1;\n  const titleId = useId();\n  const [hasTitle, setHasTitle] = useState(false);\n  const titleContext = useMemo(() => ({ titleId, registerTitle: setHasTitle }), [titleId]);\n  const hasOwnName = rest['aria-label'] !== undefined || rest['aria-labelledby'] !== undefined;\n\n  useEffect(() => {\n    if (open) setIsLeaving(true);\n  }, [open]);\n\n  /* Held until the exit finishes, not until `open` flips: releasing it early brings the\n     page scrollbar back while the panel is still leaving, and the content behind jumps. */\n  useEffect(() => {\n    if (!open && !isLeaving) return undefined;\n\n    const { overflow } = document.body.style;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = overflow;\n    };\n  }, [open, isLeaving]);\n\n  useEffect(() => {\n    if (!open) return undefined;\n\n    previouslyFocusedRef.current = document.activeElement as HTMLElement | null;\n    const frame = requestAnimationFrame(() => {\n      const panel = panelRef.current;\n      if (!panel) return;\n      // Something inside already took focus (a React `autoFocus` field): keep it.\n      if (panel !== document.activeElement && panel.contains(document.activeElement)) return;\n      resolveInitialFocus(panel, initialFocusRef.current).focus();\n    });\n\n    return () => {\n      cancelAnimationFrame(frame);\n      previouslyFocusedRef.current?.focus?.();\n    };\n  }, [open]);\n\n  useEffect(() => {\n    const panel = panelRef.current;\n    if (!open || !panel) return undefined;\n\n    pushOpenDialog(panel, depth);\n\n    const handleTab = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab' || event.defaultPrevented || !isTopDialog(panel)) return;\n\n      const active = document.activeElement as HTMLElement | null;\n      const isInside = active !== null && panel.contains(active);\n      // Focus in a layer opened from inside the dialog (a select list, a popover) belongs to\n      // that layer; only focus that escaped back to the page behind is pulled in.\n      const isInPageBehind =\n        !active ||\n        active === document.body ||\n        Boolean(panel.compareDocumentPosition(active) & Node.DOCUMENT_POSITION_PRECEDING);\n      if (!isInside && !isInPageBehind) return;\n\n      const tabbables = getTabbableElements(panel);\n      if (tabbables.length === 0) {\n        event.preventDefault();\n        panel.focus();\n        return;\n      }\n\n      const first = tabbables[0];\n      const last = tabbables[tabbables.length - 1];\n\n      if (!isInside || active === panel) {\n        event.preventDefault();\n        (event.shiftKey ? last : first).focus();\n      } else if (event.shiftKey && active === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && active === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener('keydown', handleTab);\n    return () => {\n      document.removeEventListener('keydown', handleTab);\n      removeOpenDialog(panel);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || dismiss?.enabled === false || dismiss?.escapeKey === false) return undefined;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      // A layer inside the dialog (a select list) that consumed the ESC marks it handled.\n      if (event.key !== 'Escape' || event.defaultPrevented) return;\n      if (panelRef.current && openDialogStack.length > 0 && !isTopDialog(panelRef.current)) return;\n      handler?.();\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open, dismiss, handler]);\n\n  const portalHost = getPortalHost();\n  if (portalHost === null) return null;\n\n  return createPortal(\n    <AnimatePresence onExitComplete={() => setIsLeaving(false)}>\n      {open && (\n        <motion.div key=\"dialog-layer\" className=\"fixed inset-0 z-[9999] flex items-center justify-center\">\n          <motion.div\n            variants={scrimVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"exit\"\n            aria-hidden\n            onClick={() => {\n              if (dismiss?.enabled === false || !dismiss?.outsidePress) return;\n              handler?.();\n            }}\n            className={classNames('absolute inset-0 glass-scrim', overlayClassName)}\n          />\n\n          <motion.div\n            ref={panelRef}\n            variants={dialogVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"exit\"\n            role=\"dialog\"\n            aria-modal={true}\n            aria-labelledby={hasTitle && !hasOwnName ? titleId : undefined}\n            tabIndex={-1}\n            {...rest}\n            className={mergeClasses(\n              classNames(\n                'relative m-4 flex max-h-[90vh] flex-col rounded-lg bg-surface text-base font-light leading-relaxed',\n                'text-foreground-muted shadow-xl outline-none',\n                SIZE_CLASS[size],\n              ),\n              className,\n            )}\n          >\n            <DialogDepthContext.Provider value={depth}>\n              <DialogTitleContext.Provider value={titleContext}>{children}</DialogTitleContext.Provider>\n            </DialogDepthContext.Provider>\n          </motion.div>\n        </motion.div>\n      )}\n    </AnimatePresence>,\n    portalHost,\n  );\n};\n\ninterface IDialogSectionProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const ControlledDialogHeader: React.FC<IDialogSectionProps> = ({ children, className }) => (\n  <div\n    className={mergeClasses(\n      'flex shrink-0 items-center p-4 text-2xl font-semibold leading-snug text-foreground antialiased',\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\nexport const ControlledDialogBody: React.FC<IDialogSectionProps> = ({ children, className }) => (\n  <div\n    className={mergeClasses('relative min-h-0 flex-1 p-4 text-base font-light leading-relaxed antialiased', className)}\n  >\n    {children}\n  </div>\n);\n\nexport const ControlledDialogFooter: React.FC<IDialogSectionProps> = ({ children, className }) => (\n  <div\n    className={mergeClasses('flex shrink-0 flex-wrap items-center justify-end p-4 text-foreground-muted', className)}\n  >\n    {children}\n  </div>\n);\n\ninterface IControlledDialogTitleProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * The dialog's name: a level-2 heading whose id the root wires into `aria-labelledby`, unless\n * the root received its own `aria-label` / `aria-labelledby`. A `div` with the heading role, so\n * any title content (blocks included) stays valid markup.\n */\nexport const ControlledDialogTitle: React.FC<IControlledDialogTitleProps> = ({ children, className }) => {\n  const context = useContext(DialogTitleContext);\n  const registerTitle = context?.registerTitle;\n\n  useEffect(() => {\n    if (!registerTitle) return undefined;\n    registerTitle(true);\n    return () => registerTitle(false);\n  }, [registerTitle]);\n\n  return (\n    <div id={context?.titleId} role=\"heading\" aria-level={2} className={className}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,aAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP;AAyBA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAEV,MAAM,aAAa,CAAC,YAAkC;AACpD,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,MAAI,QAAQ,QAAQ,mBAAmB,EAAG,QAAO;AACjD,MAAI,OAAO,QAAQ,oBAAoB,cAAc,CAAC,QAAQ,gBAAA,EAAmB,QAAO;AACxF,SAAO;AACT;AAEO,MAAM,sBAAsB,CAAC,cAClC,MAAM,KAAK,UAAU,iBAA8B,iBAAiB,CAAC,EAAE,OAAO,UAAU;AAK1F,MAAM,kBAAgE,CAAA;AAEtE,MAAM,iBAAiB,CAAC,OAAoB,UAAkB;AAC5D,kBAAgB,KAAK,EAAE,OAAO,MAAA,CAAO;AACrC,kBAAgB,KAAK,CAAC,GAAG,MAAM;AAC7B,QAAI,EAAE,UAAU,EAAE,MAAO,QAAO,EAAE,QAAQ,EAAE;AAC5C,WAAO,EAAE,MAAM,wBAAwB,EAAE,KAAK,IAAI,KAAK,8BAA8B,KAAK;AAAA,EAC5F,CAAC;AACH;AAEA,MAAM,mBAAmB,CAAC,UAAuB;AAC/C,QAAM,QAAQ,gBAAgB,UAAU,CAAC,UAAU,MAAM,UAAU,KAAK;AACxE,MAAI,SAAS,EAAG,iBAAgB,OAAO,OAAO,CAAC;AACjD;AAEA,MAAM,qBAAqB,cAAc,CAAC;AAE1C,MAAM,cAAc,CAAC,UACnB,UAAU,QAAQ,gBAAgB,gBAAgB,SAAS,CAAC,GAAG,UAAU;AAE3E,MAAM,sBAAsB,CAAC,OAAoB,iBAAmD;AAClG,MAAI,iBAAiB,QAAS,QAAO;AACrC,MAAI,iBAAiB,OAAQ,QAAO,aAAa,WAAW;AAE5D,QAAM,YAAY,MAAM,cAA2B,+BAA+B;AAClF,MAAI,UAAW,QAAO;AAEtB,QAAM,gBAAgB,oBAAoB,KAAK,EAAE;AAAA,IAC/C,CAAC,YAAY,CAAC,QAAQ,QAAQ,oCAAoC;AAAA,EAAA;AAEpE,SAAO,iBAAiB;AAC1B;AAGO,MAAM,kCAAkC,EAAE,6BAA6B,OAAA;AAO9E,MAAM,qBAAqB,cAA0C,IAAI;AAMlE,MAAM,uBAA6D,CAAC;AAAA,EACzE;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,uBAAuB,OAA2B,IAAI;AAC5D,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAE1B,QAAM,QAAQ,WAAW,kBAAkB,IAAI;AAC/C,QAAM,UAAU,MAAA;AAChB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,eAAe,QAAQ,OAAO,EAAE,SAAS,eAAe,YAAA,IAAgB,CAAC,OAAO,CAAC;AACvF,QAAM,aAAa,KAAK,YAAY,MAAM,UAAa,KAAK,iBAAiB,MAAM;AAEnF,YAAU,MAAM;AACd,QAAI,mBAAmB,IAAI;AAAA,EAC7B,GAAG,CAAC,IAAI,CAAC;AAIT,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,UAAW,QAAO;AAEhC,UAAM,EAAE,SAAA,IAAa,SAAS,KAAK;AACnC,aAAS,KAAK,MAAM,WAAW;AAC/B,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM,QAAO;AAElB,yBAAqB,UAAU,SAAS;AACxC,UAAM,QAAQ,sBAAsB,MAAM;AACxC,YAAM,QAAQ,SAAS;AACvB,UAAI,CAAC,MAAO;AAEZ,UAAI,UAAU,SAAS,iBAAiB,MAAM,SAAS,SAAS,aAAa,EAAG;AAChF,0BAAoB,OAAO,gBAAgB,OAAO,EAAE,MAAA;AAAA,IACtD,CAAC;AAED,WAAO,MAAM;AACX,2BAAqB,KAAK;AAC1B,2BAAqB,SAAS,QAAA;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,QAAQ,CAAC,MAAO,QAAO;AAE5B,mBAAe,OAAO,KAAK;AAE3B,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,SAAS,MAAM,oBAAoB,CAAC,YAAY,KAAK,EAAG;AAE1E,YAAM,SAAS,SAAS;AACxB,YAAM,WAAW,WAAW,QAAQ,MAAM,SAAS,MAAM;AAGzD,YAAM,iBACJ,CAAC,UACD,WAAW,SAAS,QACpB,QAAQ,MAAM,wBAAwB,MAAM,IAAI,KAAK,2BAA2B;AAClF,UAAI,CAAC,YAAY,CAAC,eAAgB;AAElC,YAAM,YAAY,oBAAoB,KAAK;AAC3C,UAAI,UAAU,WAAW,GAAG;AAC1B,cAAM,eAAA;AACN,cAAM,MAAA;AACN;AAAA,MACF;AAEA,YAAM,QAAQ,UAAU,CAAC;AACzB,YAAM,OAAO,UAAU,UAAU,SAAS,CAAC;AAE3C,UAAI,CAAC,YAAY,WAAW,OAAO;AACjC,cAAM,eAAA;AACN,SAAC,MAAM,WAAW,OAAO,OAAO,MAAA;AAAA,MAClC,WAAW,MAAM,YAAY,WAAW,OAAO;AAC7C,cAAM,eAAA;AACN,aAAK,MAAA;AAAA,MACP,WAAW,CAAC,MAAM,YAAY,WAAW,MAAM;AAC7C,cAAM,eAAA;AACN,cAAM,MAAA;AAAA,MACR;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,SAAS;AACjD,uBAAiB,KAAK;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,SAAS,YAAY,SAAS,SAAS,cAAc,MAAO,QAAO;AAEhF,UAAM,gBAAgB,CAAC,UAAyB;AAE9C,UAAI,MAAM,QAAQ,YAAY,MAAM,iBAAkB;AACtD,UAAI,SAAS,WAAW,gBAAgB,SAAS,KAAK,CAAC,YAAY,SAAS,OAAO,EAAG;AACtF,gBAAA;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAClD,WAAO,MAAM,SAAS,oBAAoB,WAAW,aAAa;AAAA,EACpE,GAAG,CAAC,MAAM,SAAS,OAAO,CAAC;AAE3B,QAAM,aAAa,cAAA;AACnB,MAAI,eAAe,KAAM,QAAO;AAEhC,SAAO;AAAA,IACL,oBAAC,iBAAA,EAAgB,gBAAgB,MAAM,aAAa,KAAK,GACtD,UAAA,QACC,qBAAC,OAAO,KAAP,EAA8B,WAAU,2DACvC,UAAA;AAAA,MAAA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,UAAU;AAAA,UACV,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,eAAW;AAAA,UACX,SAAS,MAAM;AACb,gBAAI,SAAS,YAAY,SAAS,CAAC,SAAS,aAAc;AAC1D,sBAAA;AAAA,UACF;AAAA,UACA,WAAW,WAAW,gCAAgC,gBAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,MAGxE;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,KAAK;AAAA,UACL,UAAU;AAAA,UACV,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,mBAAiB,YAAY,CAAC,aAAa,UAAU;AAAA,UACrD,UAAU;AAAA,UACT,GAAG;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,cACE;AAAA,cACA;AAAA,cACA,WAAW,IAAI;AAAA,YAAA;AAAA,YAEjB;AAAA,UAAA;AAAA,UAGF,UAAA,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,OAClC,UAAA,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,cAAe,UAAS,EAAA,CAC9D;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,EAAA,GArCc,cAsChB,GAEJ;AAAA,IACA;AAAA,EAAA;AAEJ;AAOO,MAAM,yBAAwD,CAAC,EAAE,UAAU,gBAChF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAGD;AAAA,EAAA;AACH;AAGK,MAAM,uBAAsD,CAAC,EAAE,UAAU,gBAC9E;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,aAAa,gFAAgF,SAAS;AAAA,IAEhH;AAAA,EAAA;AACH;AAGK,MAAM,yBAAwD,CAAC,EAAE,UAAU,gBAChF;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,aAAa,8EAA8E,SAAS;AAAA,IAE9G;AAAA,EAAA;AACH;AAaK,MAAM,wBAA+D,CAAC,EAAE,UAAU,gBAAgB;AACvG,QAAM,UAAU,WAAW,kBAAkB;AAC7C,QAAM,gBAAgB,SAAS;AAE/B,YAAU,MAAM;AACd,QAAI,CAAC,cAAe,QAAO;AAC3B,kBAAc,IAAI;AAClB,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,aAAa,CAAC;AAElB,SACE,oBAAC,OAAA,EAAI,IAAI,SAAS,SAAS,MAAK,WAAU,cAAY,GAAG,WACtD,SAAA,CACH;AAEJ;"}