@umodeapporg/ui 0.1.0

package/dist/components/Form/ControlledButton.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { twMerge } from "tailwind-merge";
+const BASE_CLASS = "inline-flex select-none items-center justify-center gap-x-2 rounded-xl font-bold capitalize align-middle transition-colors duration-fast focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+const SIZE_CLASS = {
+  sm: "px-4 py-2 text-xs",
+  md: "px-6 py-3 text-xs",
+  lg: "px-7 py-3.5 text-sm"
+};
+const TONE_CLASS = {
+  filled: {
+    brand: "bg-brand text-brand-fg shadow-sm hover:bg-brand-hover",
+    neutral: "bg-muted-active text-foreground shadow-sm hover:bg-muted-hover",
+    danger: "bg-danger text-danger-fg shadow-sm hover:bg-danger-hover",
+    success: "bg-success text-success-fg shadow-sm hover:bg-success-hover",
+    info: "bg-info text-info-fg shadow-sm hover:bg-info-hover"
+  },
+  outlined: {
+    brand: "border border-brand-border text-brand-emphasis hover:bg-brand-soft",
+    neutral: "border border-border text-foreground-muted hover:bg-muted",
+    danger: "border border-danger-border text-danger-emphasis hover:bg-danger-soft",
+    success: "border border-success-border text-success-emphasis hover:bg-success-soft",
+    info: "border border-info-border text-info-emphasis hover:bg-info-soft"
+  },
+  text: {
+    brand: "text-brand-emphasis hover:bg-brand-soft",
+    neutral: "text-foreground-muted hover:bg-muted",
+    danger: "text-danger-emphasis hover:bg-danger-soft",
+    success: "text-success-emphasis hover:bg-success-soft",
+    info: "text-info-emphasis hover:bg-info-soft"
+  }
+};
+const ControlledButton = forwardRef(
+  ({
+    defaultHtmlButton = false,
+    variant = "filled",
+    tone = "brand",
+    size = "md",
+    fullWidth = false,
+    type = "button",
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    if (defaultHtmlButton) {
+      return /* @__PURE__ */ jsx("button", { type, ...rest, ref, className, children });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type,
+        ...rest,
+        ref,
+        className: twMerge(
+          classNames(BASE_CLASS, SIZE_CLASS[size], TONE_CLASS[variant][tone], { "w-full": fullWidth }),
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+ControlledButton.displayName = "ControlledButton";
+export {
+  ControlledButton as default
+};
+//# sourceMappingURL=ControlledButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledButton.js","sources":["../../../src/components/Form/ControlledButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { twMerge } from 'tailwind-merge';\n\nexport type TButtonVariant = 'filled' | 'outlined' | 'text';\nexport type TButtonTone = 'brand' | 'neutral' | 'danger' | 'success' | 'info';\nexport type TButtonSize = 'sm' | 'md' | 'lg';\n\ninterface IControlledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Renders a bare <button> with no theme, for clickable surfaces that are not buttons. */\n  defaultHtmlButton?: boolean;\n  variant?: TButtonVariant;\n  tone?: TButtonTone;\n  size?: TButtonSize;\n  fullWidth?: boolean;\n}\n\nconst BASE_CLASS =\n  'inline-flex select-none items-center justify-center gap-x-2 rounded-xl font-bold capitalize align-middle ' +\n  'transition-colors duration-fast focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +\n  'disabled:pointer-events-none disabled:opacity-50';\n\nconst SIZE_CLASS: Record<TButtonSize, string> = {\n  sm: 'px-4 py-2 text-xs',\n  md: 'px-6 py-3 text-xs',\n  lg: 'px-7 py-3.5 text-sm',\n};\n\nconst TONE_CLASS: Record<TButtonVariant, Record<TButtonTone, string>> = {\n  filled: {\n    brand: 'bg-brand text-brand-fg shadow-sm hover:bg-brand-hover',\n    neutral: 'bg-muted-active text-foreground shadow-sm hover:bg-muted-hover',\n    danger: 'bg-danger text-danger-fg shadow-sm hover:bg-danger-hover',\n    success: 'bg-success text-success-fg shadow-sm hover:bg-success-hover',\n    info: 'bg-info text-info-fg shadow-sm hover:bg-info-hover',\n  },\n  outlined: {\n    brand: 'border border-brand-border text-brand-emphasis hover:bg-brand-soft',\n    neutral: 'border border-border text-foreground-muted hover:bg-muted',\n    danger: 'border border-danger-border text-danger-emphasis hover:bg-danger-soft',\n    success: 'border border-success-border text-success-emphasis hover:bg-success-soft',\n    info: 'border border-info-border text-info-emphasis hover:bg-info-soft',\n  },\n  text: {\n    brand: 'text-brand-emphasis hover:bg-brand-soft',\n    neutral: 'text-foreground-muted hover:bg-muted',\n    danger: 'text-danger-emphasis hover:bg-danger-soft',\n    success: 'text-success-emphasis hover:bg-success-soft',\n    info: 'text-info-emphasis hover:bg-info-soft',\n  },\n};\n\nconst ControlledButton = forwardRef<HTMLButtonElement, IControlledButtonProps>(\n  (\n    {\n      defaultHtmlButton = false,\n      variant = 'filled',\n      tone = 'brand',\n      size = 'md',\n      fullWidth = false,\n      type = 'button',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    if (defaultHtmlButton) {\n      return (\n        <button type={type} {...rest} ref={ref} className={className}>\n          {children}\n        </button>\n      );\n    }\n\n    return (\n      <button\n        type={type}\n        {...rest}\n        ref={ref}\n        className={twMerge(\n          classNames(BASE_CLASS, SIZE_CLASS[size], TONE_CLASS[variant][tone], { 'w-full': fullWidth }),\n          className,\n        )}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nControlledButton.displayName = 'ControlledButton';\n\nexport default ControlledButton;\n"],"names":[],"mappings":";;;;AAiBA,MAAM,aACJ;AAIF,MAAM,aAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAkE;AAAA,EACtE,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAAA,EAER,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV;AAEA,MAAM,mBAAmB;AAAA,EACvB,CACE;AAAA,IACE,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,mBAAmB;AACrB,iCACG,UAAA,EAAO,MAAa,GAAG,MAAM,KAAU,WACrC,UACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,UACT,WAAW,YAAY,WAAW,IAAI,GAAG,WAAW,OAAO,EAAE,IAAI,GAAG,EAAE,UAAU,WAAW;AAAA,UAC3F;AAAA,QAAA;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iBAAiB,cAAc;"}

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

@@ -0,0 +1,12 @@
+interface IControlledCheckboxProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    color?: 'blue' | 'red' | 'green' | 'amber' | 'purple' | 'indigo' | 'pink' | 'teal';
+    disabled?: boolean;
+    className?: string;
+    labelClassName?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const ControlledCheckbox: ({ checked, onChange, label, color, disabled, className, labelClassName, size, }: IControlledCheckboxProps) => import("react").JSX.Element;
+export default ControlledCheckbox;

package/dist/components/Form/ControlledCheckbox.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import classNames from "classnames";
+const ControlledCheckbox = ({
+  checked,
+  onChange,
+  label,
+  color = "purple",
+  disabled = false,
+  className = "",
+  labelClassName = "",
+  size = "md"
+}) => {
+  const [colorClasses, setColorClasses] = useState("");
+  const [borderClasses, setBorderClasses] = useState("");
+  const sizeConfig = {
+    sm: {
+      container: "w-4 h-4",
+      checkmark: "h-2 w-2"
+    },
+    md: {
+      container: "w-5 h-5",
+      checkmark: "h-3 w-3"
+    },
+    lg: {
+      container: "w-6 h-6",
+      checkmark: "h-4 w-4"
+    },
+    xl: {
+      container: "w-7 h-7",
+      checkmark: "h-5 w-5"
+    }
+  };
+  useEffect(() => {
+    const colorMap = {
+      blue: "bg-info",
+      red: "bg-danger",
+      green: "bg-success",
+      amber: "bg-warning",
+      purple: "bg-brand",
+      indigo: "bg-brand",
+      pink: "bg-accent",
+      teal: "bg-secondary"
+    };
+    const borderMap = {
+      blue: "border-info",
+      red: "border-danger",
+      green: "border-success",
+      amber: "border-warning",
+      purple: "border-border-strong",
+      indigo: "border-brand",
+      pink: "border-accent",
+      teal: "border-secondary"
+    };
+    setColorClasses(colorMap[color] || "bg-brand");
+    setBorderClasses(borderMap[color] || "border-brand");
+  }, [color]);
+  return /* @__PURE__ */ jsxs("div", { className: classNames("flex items-center gap-2 px-[6px]", className), children: [
+    /* @__PURE__ */ jsxs("label", { className: "relative inline-flex cursor-pointer items-center", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked,
+          onChange: () => onChange(!checked),
+          disabled,
+          className: "peer sr-only"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames(
+            sizeConfig[size].container,
+            "flex items-center justify-center rounded-md border p-[2px] transition-colors duration-base",
+            checked ? [colorClasses, "border-0"] : ["bg-surface", borderClasses],
+            disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+          ),
+          children: checked && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "text-white",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+            }
+          )
+        }
+      )
+    ] }),
+    label && /* @__PURE__ */ jsx("span", { className: classNames("text-sm font-medium text-foreground", labelClassName), children: label })
+  ] });
+};
+export {
+  ControlledCheckbox as default
+};
+//# sourceMappingURL=ControlledCheckbox.js.map

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}\n\nconst ControlledCheckbox = ({\n  checked,\n  onChange,\n  label,\n  color = 'purple',\n  disabled = false,\n  className = '',\n  labelClassName = '',\n  size = 'md',\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    <div className={classNames('flex items-center gap-2 px-[6px]', className)}>\n      <label className=\"relative inline-flex cursor-pointer items-center\">\n        <input\n          type=\"checkbox\"\n          checked={checked}\n          onChange={() => onChange(!checked)}\n          disabled={disabled}\n          className=\"peer sr-only\"\n        />\n        <div\n          className={classNames(\n            sizeConfig[size].container,\n            'flex items-center justify-center rounded-md border p-[2px] transition-colors duration-base',\n            checked ? [colorClasses, 'border-0'] : ['bg-surface', borderClasses],\n            disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\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        </div>\n      </label>\n      {label && <span className={classNames('text-sm font-medium text-foreground', labelClassName)}>{label}</span>}\n    </div>\n  );\n};\n\nexport default ControlledCheckbox;\n"],"names":[],"mappings":";;;AAcA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,OAAO;AACT,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,8BACG,OAAA,EAAI,WAAW,WAAW,oCAAoC,SAAS,GACtE,UAAA;AAAA,IAAA,qBAAC,SAAA,EAAM,WAAU,oDACf,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,UAAU,MAAM,SAAS,CAAC,OAAO;AAAA,UACjC;AAAA,UACA,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,WAAW,IAAI,EAAE;AAAA,YACjB;AAAA,YACA,UAAU,CAAC,cAAc,UAAU,IAAI,CAAC,cAAc,aAAa;AAAA,YACnE,WAAW,kCAAkC;AAAA,UAAA;AAAA,UAG9C,UAAA,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA,cAGf,UAAA,oBAAC,YAAA,EAAS,QAAO,iBAAA,CAAiB;AAAA,YAAA;AAAA,UAAA;AAAA,QACpC;AAAA,MAAA;AAAA,IAEJ,GACF;AAAA,IACC,6BAAU,QAAA,EAAK,WAAW,WAAW,uCAAuC,cAAc,GAAI,UAAA,MAAA,CAAM;AAAA,EAAA,GACvG;AAEJ;"}

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

@@ -0,0 +1,44 @@
+import { TDialogSize } from './ControlledDialogPrimitives';
+export { ControlledDialogBody, ControlledDialogFooter, ControlledDialogHeader, ControlledDialogRoot, } from './ControlledDialogPrimitives';
+interface IDialogProps {
+    className?: string;
+    size?: TDialogSize;
+    open: boolean;
+    title: React.ReactNode;
+    subtitle?: string;
+    ariaLabel?: string;
+    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,185 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useCallback } 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, ControlledDialogBody, ControlledDialogFooter } from "./ControlledDialogPrimitives.js";
+const DIALOG_DISMISS = { escapeKey: true, outsidePress: false };
+const ControlledDialog = ({
+  size = "md",
+  className,
+  open,
+  title,
+  subtitle,
+  ariaLabel,
+  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 ?? (typeof title === "string" ? title : void 0);
+  const usesDefaultScrollWrapper = !scrollContainerRef && !onScroll && !fitBody;
+  return /* @__PURE__ */ jsxs(
+    ControlledDialogRoot,
+    {
+      open,
+      handler: handleDismiss,
+      dismiss: DIALOG_DISMISS,
+      "aria-label": accessibleName,
+      "aria-modal": true,
+      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("div", { children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs font-normal opacity-70", children: subtitle })
+          ] }),
+          showClose && /* @__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", { 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,
+  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 } 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  TDialogSize,\n} from './ControlledDialogPrimitives';\n\nexport {\n  ControlledDialogBody,\n  ControlledDialogFooter,\n  ControlledDialogHeader,\n  ControlledDialogRoot,\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  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\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  const accessibleName = ariaLabel ?? (typeof title === 'string' ? title : 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-modal={true}\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            <div>{title}</div>\n            {subtitle && <p className=\"text-xs font-normal opacity-70\">{subtitle}</p>}\n          </div>\n          {showClose && (\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          )}\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 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":"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"}

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

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export type TDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+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;
+    children: React.ReactNode;
+}
+/**
+ * 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>;
+export {};

package/dist/components/Form/ControlledDialogPrimitives.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+import { twMerge } from "tailwind-merge";
+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 ControlledDialogRoot = ({
+  open,
+  handler,
+  size = "md",
+  dismiss,
+  className,
+  overlayClassName,
+  children,
+  ...rest
+}) => {
+  const panelRef = useRef(null);
+  const [isLeaving, setIsLeaving] = useState(false);
+  const previouslyFocusedRef = useRef(null);
+  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(() => panelRef.current?.focus());
+    return () => {
+      cancelAnimationFrame(frame);
+      previouslyFocusedRef.current?.focus?.();
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open || dismiss?.enabled === false || dismiss?.escapeKey === false) return void 0;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      handler?.();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, dismiss, handler]);
+  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,
+          tabIndex: -1,
+          ...rest,
+          className: twMerge(
+            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
+        }
+      )
+    ] }, "dialog-layer") }),
+    document.body
+  );
+};
+const ControlledDialogHeader = ({ children, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: twMerge(
+      "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: twMerge("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: twMerge("flex shrink-0 flex-wrap items-center justify-end p-4 text-foreground-muted", className), children });
+export {
+  ControlledDialogBody,
+  ControlledDialogFooter,
+  ControlledDialogHeader,
+  ControlledDialogRoot
+};
+//# 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, { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { createPortal } from 'react-dom';\nimport { twMerge } from 'tailwind-merge';\n\nimport { dialogVariants, scrimVariants } from '@/motion';\n\nexport type TDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\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  children: React.ReactNode;\n}\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  children,\n  ...rest\n}) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [isLeaving, setIsLeaving] = useState(false);\n  const previouslyFocusedRef = useRef<HTMLElement | null>(null);\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(() => panelRef.current?.focus());\n\n    return () => {\n      cancelAnimationFrame(frame);\n      previouslyFocusedRef.current?.focus?.();\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || dismiss?.enabled === false || dismiss?.escapeKey === false) return undefined;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n      handler?.();\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open, dismiss, handler]);\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            tabIndex={-1}\n            {...rest}\n            className={twMerge(\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            {children}\n          </motion.div>\n        </motion.div>\n      )}\n    </AnimatePresence>,\n    document.body,\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={twMerge(\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 className={twMerge('relative min-h-0 flex-1 p-4 text-base font-light leading-relaxed antialiased', className)}>\n    {children}\n  </div>\n);\n\nexport const ControlledDialogFooter: React.FC<IDialogSectionProps> = ({ children, className }) => (\n  <div className={twMerge('flex shrink-0 flex-wrap items-center justify-end p-4 text-foreground-muted', className)}>\n    {children}\n  </div>\n);\n"],"names":[],"mappings":"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"}