@rojaostudio/ds 1.0.0 → 1.0.2

package/dist/components/input.js

@@ -3,6 +3,7 @@ import {
   __objRest,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useState } from "react";
 import { Eye, EyeOff, X } from "lucide-react";
 const SIZE = {
@@ -67,69 +68,96 @@ const Input = forwardRef(function Input2(_a, ref) {
   const hasAffix = !!(prefix || suffix);
   const inputRadius = hasAffix ? prefix && suffix ? "rounded-none" : prefix ? "rounded-l-none rounded-r-(--radius-control)" : "rounded-l-(--radius-control) rounded-r-none" : "rounded-(--radius-control)";
   const errorClass = error ? "border-danger focus:border-danger focus:ring-2 focus:ring-danger/20" : "border-stroke-control focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20";
-  const inputElement = /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 inline-flex items-center" }, iconLeft && /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      "aria-hidden": true,
-      className: "absolute left-0 inset-y-0 flex items-center pl-3 text-fg-muted pointer-events-none"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "[&_svg]:shrink-0", style: { width: sz.icon, height: sz.icon } }, iconLeft)
-  ), /* @__PURE__ */ React.createElement(
-    "input",
-    __spreadValues({
-      ref,
-      id: inputId,
-      type: effectiveType,
-      value,
-      defaultValue,
-      maxLength,
-      required,
-      className: [
-        "w-full bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
-        "border transition-colors outline-none",
-        inputRadius,
-        sz.h,
-        sz.text,
-        sz.pad,
-        iconLeft ? sz.padIconL : "",
-        hasRightAdornment ? sz.padIconR : "",
-        errorClass,
-        "disabled:opacity-50 disabled:cursor-not-allowed",
-        className
-      ].filter(Boolean).join(" "),
-      "aria-invalid": error ? true : void 0,
-      "aria-describedby": error ? `${inputId}-error` : helper ? `${inputId}-helper` : void 0
-    }, props)
-  ), hasRightAdornment && /* @__PURE__ */ React.createElement("span", { className: "absolute right-0 inset-y-0 flex items-center pr-2 gap-1 pointer-events-none" }, iconRight && !showClear && !showReveal && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted" }, iconRight), showClear && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: onClear,
-      "aria-label": "Limpar",
-      className: "text-fg-muted hover:text-fg-primary p-0.5 rounded transition-colors pointer-events-auto"
-    },
-    /* @__PURE__ */ React.createElement(X, { size: sz.icon - 2 })
-  ), showReveal && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => setRevealed((r) => !r),
-      "aria-label": revealed ? "Ocultar senha" : "Mostrar senha",
-      className: "text-fg-muted hover:text-fg-primary p-1 rounded bg-surface-default transition-colors pointer-events-auto"
-    },
-    revealed ? /* @__PURE__ */ React.createElement(EyeOff, { size: sz.icon }) : /* @__PURE__ */ React.createElement(Eye, { size: sz.icon })
-  )));
-  const wrappedInput = hasAffix ? /* @__PURE__ */ React.createElement("div", { className: "inline-flex w-full items-stretch" }, prefix && /* @__PURE__ */ React.createElement("span", { className: [
-    "inline-flex items-center border border-r-0 border-stroke-control rounded-l-(--radius-control) bg-surface-raised text-fg-muted",
-    sz.text,
-    sz.affix
-  ].join(" ") }, prefix), inputElement, suffix && /* @__PURE__ */ React.createElement("span", { className: [
-    "inline-flex items-center border border-l-0 border-stroke-control rounded-r-(--radius-control) bg-surface-raised text-fg-muted",
-    sz.text,
-    sz.affix
-  ].join(" ") }, suffix)) : inputElement;
+  const inputElement = /* @__PURE__ */ jsxs("div", { className: "relative flex-1 inline-flex items-center", children: [
+    iconLeft && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "absolute left-0 inset-y-0 flex items-center pl-3 text-fg-muted pointer-events-none",
+        children: /* @__PURE__ */ jsx("span", { className: "[&_svg]:shrink-0", style: { width: sz.icon, height: sz.icon }, children: iconLeft })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      __spreadValues({
+        ref,
+        id: inputId,
+        type: effectiveType,
+        value,
+        defaultValue,
+        maxLength,
+        required,
+        className: [
+          "w-full bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
+          "border transition-colors outline-none",
+          inputRadius,
+          sz.h,
+          sz.text,
+          sz.pad,
+          iconLeft ? sz.padIconL : "",
+          hasRightAdornment ? sz.padIconR : "",
+          errorClass,
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          className
+        ].filter(Boolean).join(" "),
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? `${inputId}-error` : helper ? `${inputId}-helper` : void 0
+      }, props)
+    ),
+    hasRightAdornment && /* @__PURE__ */ jsxs("span", { className: "absolute right-0 inset-y-0 flex items-center pr-2 gap-1 pointer-events-none", children: [
+      iconRight && !showClear && !showReveal && /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: iconRight }),
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClear,
+          "aria-label": "Limpar",
+          className: "text-fg-muted hover:text-fg-primary p-0.5 rounded transition-colors pointer-events-auto",
+          children: /* @__PURE__ */ jsx(X, { size: sz.icon - 2 })
+        }
+      ),
+      showReveal && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setRevealed((r) => !r),
+          "aria-label": revealed ? "Ocultar senha" : "Mostrar senha",
+          className: "text-fg-muted hover:text-fg-primary p-1 rounded bg-surface-default transition-colors pointer-events-auto",
+          children: revealed ? /* @__PURE__ */ jsx(EyeOff, { size: sz.icon }) : /* @__PURE__ */ jsx(Eye, { size: sz.icon })
+        }
+      )
+    ] })
+  ] });
+  const wrappedInput = hasAffix ? /* @__PURE__ */ jsxs("div", { className: "inline-flex w-full items-stretch", children: [
+    prefix && /* @__PURE__ */ jsx("span", { className: [
+      "inline-flex items-center border border-r-0 border-stroke-control rounded-l-(--radius-control) bg-surface-raised text-fg-muted",
+      sz.text,
+      sz.affix
+    ].join(" "), children: prefix }),
+    inputElement,
+    suffix && /* @__PURE__ */ jsx("span", { className: [
+      "inline-flex items-center border border-l-0 border-stroke-control rounded-r-(--radius-control) bg-surface-raised text-fg-muted",
+      sz.text,
+      sz.affix
+    ].join(" "), children: suffix })
+  ] }) : inputElement;
   const currentLength = typeof value === "string" ? value.length : typeof defaultValue === "string" ? defaultValue.length : 0;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: inputId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary" }, /* @__PURE__ */ React.createElement("span", null, label), required && /* @__PURE__ */ React.createElement("span", { className: "text-danger", "aria-label": "obrigat\xF3rio" }, "*"), optional && !required && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted font-normal" }, "(opcional)")), wrappedInput, (error || helper || showCount && maxLength) && /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, error ? /* @__PURE__ */ React.createElement("p", { id: `${inputId}-error`, className: "text-caption text-danger-text flex-1" }, error) : helper ? /* @__PURE__ */ React.createElement("p", { id: `${inputId}-helper`, className: "text-caption text-fg-muted flex-1" }, helper) : /* @__PURE__ */ React.createElement("span", { className: "flex-1" }), showCount && maxLength && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted tabular-nums shrink-0" }, currentLength, "/", maxLength)));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      required && /* @__PURE__ */ jsx("span", { className: "text-danger", "aria-label": "obrigat\xF3rio", children: "*" }),
+      optional && !required && /* @__PURE__ */ jsx("span", { className: "text-fg-muted font-normal", children: "(opcional)" })
+    ] }),
+    wrappedInput,
+    (error || helper || showCount && maxLength) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      error ? /* @__PURE__ */ jsx("p", { id: `${inputId}-error`, className: "text-caption text-danger-text flex-1", children: error }) : helper ? /* @__PURE__ */ jsx("p", { id: `${inputId}-helper`, className: "text-caption text-fg-muted flex-1", children: helper }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+      showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-caption text-fg-muted tabular-nums shrink-0", children: [
+        currentLength,
+        "/",
+        maxLength
+      ] })
+    ] })
+  ] });
 });
 export {
   Input

package/dist/components/insight-card.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 const TYPE_VARS = {
   alert: { card: "[border-color:var(--insight-alert-border)] [background:var(--insight-alert-bg)]", badge: "[background:var(--insight-alert-badge-bg)] [color:var(--insight-alert-badge-text)]" },
   opportunity: { card: "[border-color:var(--insight-opportunity-border)] [background:var(--insight-opportunity-bg)]", badge: "[background:var(--insight-opportunity-badge-bg)] [color:var(--insight-opportunity-badge-text)]" },
@@ -20,7 +21,17 @@ function InsightCard({
 }) {
   const v = TYPE_VARS[type];
   const ctaClass = "shrink-0 rounded-(--radius-card) px-3 py-1.5 text-caption font-medium whitespace-nowrap shadow-sm transition-colors [background:var(--insight-action-bg)] [border:1px_solid_var(--insight-action-border)] [color:var(--insight-action-text)] hover:[background:var(--insight-action-bg-hover)]";
-  return /* @__PURE__ */ React.createElement("div", { className: ["rounded-(--radius-card) border p-4", v.card].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("span", { className: ["inline-block text-[10px] font-semibold uppercase tracking-wide rounded px-1.5 py-0.5", v.badge].join(" ") }, TYPE_LABELS[type]), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 flex items-baseline gap-2 flex-wrap" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold text-label leading-tight [color:var(--insight-title-color)]" }, title), potential && /* @__PURE__ */ React.createElement("span", { className: "text-caption font-medium tabular-nums [color:var(--insight-potential-color)]" }, potential)), /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 text-caption [color:var(--insight-description-color)]" }, description)), action && (actionOnClick ? /* @__PURE__ */ React.createElement("button", { type: "button", onClick: actionOnClick, className: ctaClass }, action) : actionHref ? /* @__PURE__ */ React.createElement("a", { href: actionHref, className: ctaClass }, action) : null)));
+  return /* @__PURE__ */ jsx("div", { className: ["rounded-(--radius-card) border p-4", v.card].join(" "), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("span", { className: ["inline-block text-[10px] font-semibold uppercase tracking-wide rounded px-1.5 py-0.5", v.badge].join(" "), children: TYPE_LABELS[type] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-baseline gap-2 flex-wrap", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold text-label leading-tight [color:var(--insight-title-color)]", children: title }),
+        potential && /* @__PURE__ */ jsx("span", { className: "text-caption font-medium tabular-nums [color:var(--insight-potential-color)]", children: potential })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption [color:var(--insight-description-color)]", children: description })
+    ] }),
+    action && (actionOnClick ? /* @__PURE__ */ jsx("button", { type: "button", onClick: actionOnClick, className: ctaClass, children: action }) : actionHref ? /* @__PURE__ */ jsx("a", { href: actionHref, className: ctaClass, children: action }) : null)
+  ] }) });
 }
 export {
   InsightCard

package/dist/components/label.js

@@ -1,7 +1,9 @@
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { HelpCircle } from "lucide-react";
 const SIZE_CLASS = {
   sm: "text-caption",
@@ -23,19 +25,22 @@ function Label(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "label",
-    __spreadValues({
+    __spreadProps(__spreadValues({
       className: [
         "inline-flex items-center gap-1.5 font-medium text-fg-primary leading-none",
         SIZE_CLASS[size],
         className
       ].join(" ")
-    }, rest),
-    /* @__PURE__ */ React.createElement("span", null, children),
-    required && /* @__PURE__ */ React.createElement("span", { className: "text-danger", "aria-label": "obrigat\xF3rio" }, "*"),
-    optional && !required && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted font-normal" }, "(opcional)"),
-    tooltip && /* @__PURE__ */ React.createElement("span", { title: tooltip, className: "inline-flex text-fg-muted cursor-help", "aria-label": tooltip }, /* @__PURE__ */ React.createElement(HelpCircle, { size: 13 }))
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        required && /* @__PURE__ */ jsx("span", { className: "text-danger", "aria-label": "obrigat\xF3rio", children: "*" }),
+        optional && !required && /* @__PURE__ */ jsx("span", { className: "text-fg-muted font-normal", children: "(opcional)" }),
+        tooltip && /* @__PURE__ */ jsx("span", { title: tooltip, className: "inline-flex text-fg-muted cursor-help", "aria-label": tooltip, children: /* @__PURE__ */ jsx(HelpCircle, { size: 13 }) })
+      ]
+    })
   );
 }
 export {

package/dist/components/media-tile.js

@@ -1,4 +1,5 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ImageOff } from "lucide-react";
 const ASPECT = {
   square: "aspect-square",
@@ -6,7 +7,7 @@ const ASPECT = {
 };
 function MediaTile({ src, alt = "", image, label, href, fallback, aspect = "square", className = "" }) {
   const Wrapper = href ? "a" : "div";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Wrapper,
     {
       href,
@@ -14,13 +15,15 @@ function MediaTile({ src, alt = "", image, label, href, fallback, aspect = "squa
         "group flex flex-col rounded-(--radius-card) overflow-hidden border border-stroke-default bg-surface-default transition-all",
         href ? "hover:shadow-md hover:ring-2 hover:ring-stroke-focus cursor-pointer" : "",
         className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("div", { className: `relative w-full ${ASPECT[aspect]} bg-surface-raised overflow-hidden` }, image ? image : src ? (
-      // eslint-disable-next-line @next/next/no-img-element
-      /* @__PURE__ */ React.createElement("img", { src, alt, className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" })
-    ) : /* @__PURE__ */ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-fg-disabled" }, fallback != null ? fallback : /* @__PURE__ */ React.createElement(ImageOff, { className: "size-5", strokeWidth: 1.5 }))),
-    label != null && /* @__PURE__ */ React.createElement("div", { className: "p-1.5" }, /* @__PURE__ */ React.createElement("p", { className: "text-[11px] font-medium text-fg-primary line-clamp-2 leading-snug" }, label))
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `relative w-full ${ASPECT[aspect]} bg-surface-raised overflow-hidden`, children: image ? image : src ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx("img", { src, alt, className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" })
+        ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center text-fg-disabled", children: fallback != null ? fallback : /* @__PURE__ */ jsx(ImageOff, { className: "size-5", strokeWidth: 1.5 }) }) }),
+        label != null && /* @__PURE__ */ jsx("div", { className: "p-1.5", children: /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium text-fg-primary line-clamp-2 leading-snug", children: label }) })
+      ]
+    }
   );
 }
 export {

package/dist/components/menu.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRight } from "lucide-react";
 import { Popover } from "./popover.js";
 function Menu({
@@ -11,28 +12,28 @@ function Menu({
   open,
   onOpenChange
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Popover,
     {
       trigger,
       placement,
       open,
       onOpenChange,
-      offset: 4
-    },
-    (api) => /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        role: "menu",
-        className: [
-          "rounded-(--radius-card) border border-stroke-default bg-surface-default shadow-lg",
-          "py-1",
-          className
-        ].join(" "),
-        style: { minWidth }
-      },
-      typeof children === "function" ? children(api) : children
-    )
+      offset: 4,
+      children: (api) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "menu",
+          className: [
+            "rounded-(--radius-card) border border-stroke-default bg-surface-default shadow-lg",
+            "py-1",
+            className
+          ].join(" "),
+          style: { minWidth },
+          children: typeof children === "function" ? children(api) : children
+        }
+      )
+    }
   );
 }
 function MenuItem({
@@ -45,7 +46,7 @@ function MenuItem({
   onClick
 }) {
   const colorClass = variant === "danger" ? "text-danger-text hover:bg-danger-soft" : "text-fg-primary hover:bg-surface-raised";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -57,19 +58,21 @@ function MenuItem({
         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-focus focus-visible:ring-inset focus-visible:bg-surface-raised",
         "disabled:cursor-not-allowed disabled:opacity-50",
         colorClass
-      ].join(" ")
-    },
-    icon && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-4" }, icon),
-    /* @__PURE__ */ React.createElement("span", { className: "flex-1 truncate" }, children),
-    selected && /* @__PURE__ */ React.createElement(Check, { size: 14, className: "shrink-0 text-fg-muted" }),
-    trailing && !selected && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-fg-muted" }, trailing)
+      ].join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children }),
+        selected && /* @__PURE__ */ jsx(Check, { size: 14, className: "shrink-0 text-fg-muted" }),
+        trailing && !selected && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-muted", children: trailing })
+      ]
+    }
   );
 }
 function MenuSeparator() {
-  return /* @__PURE__ */ React.createElement("div", { role: "separator", className: "h-px bg-stroke-subtle my-1" });
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: "h-px bg-stroke-subtle my-1" });
 }
 function MenuLabel({ children }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-fg-muted" }, children);
+  return /* @__PURE__ */ jsx("div", { className: "px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-fg-muted", children });
 }
 export {
   Menu,

package/dist/components/modal.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
 import { X } from "lucide-react";
 import { createPortal } from "react-dom";
@@ -34,35 +35,49 @@ function Modal({ open, onClose, title, subtitle, children, footer, headerAction,
   if (!open) return null;
   if (!mounted) return null;
   return createPortal(
-    /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4" }, /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 [background:var(--overlay-scrim)]", onClick: closeOnBackdrop ? onClose : void 0, "aria-hidden": "true" }), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: dialogRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": title ? titleId : void 0,
-        tabIndex: -1,
-        className: [
-          "relative z-10 w-full rounded-(--radius-card) bg-surface-default shadow-xl",
-          "flex flex-col max-h-[90dvh]",
-          "focus:outline-none",
-          sizes[size],
-          className
-        ].join(" ")
-      },
-      (title || headerAction || !hideClose) && /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4 px-6 py-4 border-b border-stroke-default shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, title && /* @__PURE__ */ React.createElement("h2", { id: titleId, className: "text-body font-semibold text-fg-primary" }, title), subtitle && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted mt-0.5" }, subtitle)), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 shrink-0" }, headerAction, !hideClose && /* @__PURE__ */ React.createElement(
-        "button",
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 [background:var(--overlay-scrim)]", onClick: closeOnBackdrop ? onClose : void 0, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          type: "button",
-          onClick: onClose,
-          className: "text-fg-muted hover:text-fg-primary transition-colors rounded focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:outline-none p-0.5",
-          "aria-label": "Fechar"
-        },
-        /* @__PURE__ */ React.createElement(X, { size: 20 })
-      ))),
-      /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto px-6 py-4" }, children),
-      footer && /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-stroke-default shrink-0" }, footer)
-    )),
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? titleId : void 0,
+          tabIndex: -1,
+          className: [
+            "relative z-10 w-full rounded-(--radius-card) bg-surface-default shadow-xl",
+            "flex flex-col max-h-[90dvh]",
+            "focus:outline-none",
+            sizes[size],
+            className
+          ].join(" "),
+          children: [
+            (title || headerAction || !hideClose) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-4 border-b border-stroke-default shrink-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-body font-semibold text-fg-primary", children: title }),
+                subtitle && /* @__PURE__ */ jsx("p", { className: "text-label text-fg-muted mt-0.5", children: subtitle })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                headerAction,
+                !hideClose && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    className: "text-fg-muted hover:text-fg-primary transition-colors rounded focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:outline-none p-0.5",
+                    "aria-label": "Fechar",
+                    children: /* @__PURE__ */ jsx(X, { size: 20 })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children }),
+            footer && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-stroke-default shrink-0", children: footer })
+          ]
+        }
+      )
+    ] }),
     container != null ? container : document.body
   );
 }

package/dist/components/notice.js

@@ -1,5 +1,6 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Info, CheckCircle2, AlertTriangle, AlertOctagon, Lock, X } from "lucide-react";
 const STYLES = {
@@ -50,7 +51,7 @@ function iconFor(severity, intent) {
   }
 }
 function DefaultLink({ href, className, children }) {
-  return /* @__PURE__ */ React.createElement("a", { href, className }, children);
+  return /* @__PURE__ */ jsx("a", { href, className, children });
 }
 function Notice({
   severity,
@@ -77,25 +78,42 @@ function Notice({
     if (id) localStorage.setItem(`notice-dismissed:${id}`, "1");
     setDismissed(true);
   }
-  const ctaNode = (cta == null ? void 0 : cta.href) ? /* @__PURE__ */ React.createElement(LinkAs, { href: cta.href, className: ctaClass }, cta.label, " \u2192") : (cta == null ? void 0 : cta.onClick) ? /* @__PURE__ */ React.createElement("button", { type: "button", onClick: cta.onClick, className: ctaClass }, cta.label, " \u2192") : null;
-  return /* @__PURE__ */ React.createElement(
+  const ctaNode = (cta == null ? void 0 : cta.href) ? /* @__PURE__ */ jsxs(LinkAs, { href: cta.href, className: ctaClass, children: [
+    cta.label,
+    " \u2192"
+  ] }) : (cta == null ? void 0 : cta.onClick) ? /* @__PURE__ */ jsxs("button", { type: "button", onClick: cta.onClick, className: ctaClass, children: [
+    cta.label,
+    " \u2192"
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: severity === "critical" ? "alert" : "status",
       "aria-live": severity === "critical" ? "assertive" : "polite",
-      className: ["rounded-(--radius-card) border px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2", s.container, className].join(" ")
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2.5 min-w-0" }, /* @__PURE__ */ React.createElement(Icon, { size: 18, "aria-hidden": true, className: ["shrink-0 mt-0.5", s.icon].join(" ") }), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: ["text-label font-semibold", s.title].join(" ") }, title), description && /* @__PURE__ */ React.createElement("div", { className: ["text-caption mt-0.5", s.desc].join(" ") }, description))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 shrink-0 self-end sm:self-auto" }, ctaNode, canDismiss && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: dismiss,
-        "aria-label": dismissLabel,
-        className: ["transition-opacity hover:opacity-70 shrink-0", s.icon].join(" ")
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 16, "aria-hidden": true })
-    ))
+      className: ["rounded-(--radius-card) border px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2", s.container, className].join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 min-w-0", children: [
+          /* @__PURE__ */ jsx(Icon, { size: 18, "aria-hidden": true, className: ["shrink-0 mt-0.5", s.icon].join(" ") }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: ["text-label font-semibold", s.title].join(" "), children: title }),
+            description && /* @__PURE__ */ jsx("div", { className: ["text-caption mt-0.5", s.desc].join(" "), children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0 self-end sm:self-auto", children: [
+          ctaNode,
+          canDismiss && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: dismiss,
+              "aria-label": dismissLabel,
+              className: ["transition-opacity hover:opacity-70 shrink-0", s.icon].join(" "),
+              children: /* @__PURE__ */ jsx(X, { size: 16, "aria-hidden": true })
+            }
+          )
+        ] })
+      ]
+    }
   );
 }
 export {