@rojaostudio/ds 1.0.0

package/dist/components/input.js

@@ -0,0 +1,136 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef, useId, useState } from "react";
+import { Eye, EyeOff, X } from "lucide-react";
+const SIZE = {
+  sm: { h: "h-control-sm", text: "text-caption", pad: "px-2.5", icon: 14, padIconL: "pl-8", padIconR: "pr-8", affix: "px-2.5" },
+  md: { h: "h-control-md", text: "text-label", pad: "px-3", icon: 16, padIconL: "pl-9", padIconR: "pr-9", affix: "px-3" },
+  lg: { h: "h-control-lg", text: "text-body", pad: "px-4", icon: 18, padIconL: "pl-11", padIconR: "pr-11", affix: "px-4" }
+};
+const Input = forwardRef(function Input2(_a, ref) {
+  var _b = _a, {
+    label,
+    helper,
+    error,
+    size = "md",
+    required,
+    optional,
+    iconLeft,
+    iconRight,
+    prefix,
+    suffix,
+    clearable,
+    onClear,
+    passwordReveal = true,
+    showCount,
+    className = "",
+    id,
+    type = "text",
+    value,
+    defaultValue,
+    maxLength
+  } = _b, props = __objRest(_b, [
+    "label",
+    "helper",
+    "error",
+    "size",
+    "required",
+    "optional",
+    "iconLeft",
+    "iconRight",
+    "prefix",
+    "suffix",
+    "clearable",
+    "onClear",
+    "passwordReveal",
+    "showCount",
+    "className",
+    "id",
+    "type",
+    "value",
+    "defaultValue",
+    "maxLength"
+  ]);
+  const generatedId = useId();
+  const inputId = id != null ? id : generatedId;
+  const [revealed, setRevealed] = useState(false);
+  const isPassword = type === "password";
+  const effectiveType = isPassword && passwordReveal && revealed ? "text" : type;
+  const hasValue = !!(value != null ? value : defaultValue);
+  const showClear = clearable && hasValue;
+  const showReveal = isPassword && passwordReveal;
+  const hasRightAdornment = showClear || showReveal || iconRight;
+  const sz = SIZE[size];
+  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 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)));
+});
+export {
+  Input
+};

package/dist/components/insight-card.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+
+type InsightCardType = 'alert' | 'opportunity' | 'tip';
+interface InsightCardProps {
+    type: InsightCardType;
+    title: string;
+    description: string;
+    /** Optional numeric/text highlight, e.g. "+ R$ 450/mês" */
+    potential?: string;
+    /** CTA label */
+    action?: string;
+    /** CTA href — renders an <a> tag */
+    actionHref?: string;
+    /** CTA onClick — renders a <button> (takes precedence over actionHref when both provided) */
+    actionOnClick?: () => void;
+}
+declare function InsightCard({ type, title, description, potential, action, actionHref, actionOnClick, }: InsightCardProps): react.JSX.Element;
+
+export { InsightCard, type InsightCardProps, type InsightCardType };

package/dist/components/insight-card.js

@@ -0,0 +1,27 @@
+import "../chunk-ORMEWXMH.js";
+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)]" },
+  tip: { card: "[border-color:var(--insight-tip-border)] [background:var(--insight-tip-bg)]", badge: "[background:var(--insight-tip-badge-bg)] [color:var(--insight-tip-badge-text)]" }
+};
+const TYPE_LABELS = {
+  alert: "Aten\xE7\xE3o",
+  opportunity: "Oportunidade",
+  tip: "Dica"
+};
+function InsightCard({
+  type,
+  title,
+  description,
+  potential,
+  action,
+  actionHref,
+  actionOnClick
+}) {
+  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)));
+}
+export {
+  InsightCard
+};

package/dist/components/label.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { LabelHTMLAttributes, ReactNode } from 'react';
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** Mostra `*` vermelho indicando obrigatório. */
+    required?: boolean;
+    /** Mostra `(opcional)` em cinza. */
+    optional?: boolean;
+    /** Tooltip helper — renderiza ícone "?" com title nativo. */
+    tooltip?: string;
+    size?: 'sm' | 'md';
+    children: ReactNode;
+}
+declare function Label({ required, optional, tooltip, size, className, children, ...rest }: LabelProps): react.JSX.Element;
+
+export { Label, type LabelProps };

package/dist/components/label.js

@@ -0,0 +1,43 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { HelpCircle } from "lucide-react";
+const SIZE_CLASS = {
+  sm: "text-caption",
+  md: "text-label"
+};
+function Label(_a) {
+  var _b = _a, {
+    required,
+    optional,
+    tooltip,
+    size = "md",
+    className = "",
+    children
+  } = _b, rest = __objRest(_b, [
+    "required",
+    "optional",
+    "tooltip",
+    "size",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ React.createElement(
+    "label",
+    __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 }))
+  );
+}
+export {
+  Label
+};

package/dist/components/media-tile.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * MediaTile — miniatura de mídia (produto, imagem) com fallback e label opcional.
+ * Substitui o `<div className="rounded-xl border overflow-hidden">` + `<img>`/fallback
+ * reimplementado em listas/grids. Agnóstico de framework: usa `<img>` nativo
+ * (o consumidor que quiser next/image passa via `image` slot).
+ */
+interface MediaTileProps {
+    src?: string | null;
+    alt?: string;
+    /** Conteúdo de imagem custom (ex: next/image). Tem precedência sobre `src`. */
+    image?: ReactNode;
+    label?: ReactNode;
+    /** Se passado, o tile vira um link de navegação. */
+    href?: string;
+    fallback?: ReactNode;
+    aspect?: 'square' | 'video';
+    className?: string;
+}
+declare function MediaTile({ src, alt, image, label, href, fallback, aspect, className }: MediaTileProps): react.JSX.Element;
+
+export { MediaTile, type MediaTileProps };

package/dist/components/media-tile.js

@@ -0,0 +1,28 @@
+import "../chunk-ORMEWXMH.js";
+import { ImageOff } from "lucide-react";
+const ASPECT = {
+  square: "aspect-square",
+  video: "aspect-video"
+};
+function MediaTile({ src, alt = "", image, label, href, fallback, aspect = "square", className = "" }) {
+  const Wrapper = href ? "a" : "div";
+  return /* @__PURE__ */ React.createElement(
+    Wrapper,
+    {
+      href,
+      className: [
+        "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))
+  );
+}
+export {
+  MediaTile
+};

package/dist/components/menu.d.ts

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+export { ChevronRight as MenuChevron } from 'lucide-react';
+import { PopoverPlacement } from './popover.js';
+
+/**
+ * Menu — popover de ações (DropdownMenu). Inspirado em M3 Menu / shadcn DropdownMenu.
+ *
+ * Uso:
+ *   <Menu trigger={<IconButton icon={<MoreVertical />} aria-label="Ações" />}>
+ *     {({ close }) => (
+ *       <>
+ *         <MenuItem icon={<Edit />} onClick={() => { edit(); close(); }}>Editar</MenuItem>
+ *         <MenuItem icon={<Copy />} onClick={...}>Duplicar</MenuItem>
+ *         <MenuSeparator />
+ *         <MenuItem icon={<Trash />} variant="danger" onClick={...}>Excluir</MenuItem>
+ *       </>
+ *     )}
+ *   </Menu>
+ */
+interface MenuProps {
+    trigger: ReactNode;
+    children: ReactNode | ((api: {
+        close: () => void;
+    }) => ReactNode);
+    placement?: PopoverPlacement;
+    /** Largura mínima em px. default = 180. */
+    minWidth?: number;
+    className?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function Menu({ trigger, children, placement, minWidth, className, open, onOpenChange, }: MenuProps): react.JSX.Element;
+interface MenuItemProps {
+    children: ReactNode;
+    icon?: ReactNode;
+    /** Ícone à direita (ex: ChevronRight pra submenu, atalho de teclado). */
+    trailing?: ReactNode;
+    variant?: 'default' | 'danger';
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: () => void;
+}
+declare function MenuItem({ children, icon, trailing, variant, disabled, selected, onClick, }: MenuItemProps): react.JSX.Element;
+declare function MenuSeparator(): react.JSX.Element;
+declare function MenuLabel({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { Menu, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuSeparator };

package/dist/components/menu.js

@@ -0,0 +1,80 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { Check, ChevronRight } from "lucide-react";
+import { Popover } from "./popover.js";
+function Menu({
+  trigger,
+  children,
+  placement = "bottom-start",
+  minWidth = 180,
+  className = "",
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ React.createElement(
+    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
+    )
+  );
+}
+function MenuItem({
+  children,
+  icon,
+  trailing,
+  variant = "default",
+  disabled = false,
+  selected = false,
+  onClick
+}) {
+  const colorClass = variant === "danger" ? "text-danger-text hover:bg-danger-soft" : "text-fg-primary hover:bg-surface-raised";
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      className: [
+        "w-full flex items-center gap-2.5 px-3 py-1.5 text-label text-left transition-colors",
+        "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)
+  );
+}
+function MenuSeparator() {
+  return /* @__PURE__ */ React.createElement("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);
+}
+export {
+  Menu,
+  ChevronRight as MenuChevron,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator
+};

package/dist/components/modal.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    /** Subtítulo opcional abaixo do title. */
+    subtitle?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    /** Ação no canto direito do header (ex.: link ghost), renderizada antes do X. */
+    headerAction?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Fecha ao clicar no backdrop. default = true. */
+    closeOnBackdrop?: boolean;
+    /** Esconde o botão X do header. default = false. */
+    hideClose?: boolean;
+    className?: string;
+    /** Alvo do portal. default = document.body. Passe um elemento de um subtree TEMATIZADO (ex.: a
+     *  raiz do tema da loja) pra o modal herdar tokens/mode/fonte daquele contexto em vez do global. */
+    container?: Element | null;
+}
+declare function Modal({ open, onClose, title, subtitle, children, footer, headerAction, size, closeOnBackdrop, hideClose, className, container }: ModalProps): react.ReactPortal | null;
+
+export { Modal, type ModalProps };

package/dist/components/modal.js

@@ -0,0 +1,71 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useEffect, useId, useState } from "react";
+import { X } from "lucide-react";
+import { createPortal } from "react-dom";
+import { useFocusTrap } from "./use-focus-trap.js";
+const sizes = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)]"
+};
+function Modal({ open, onClose, title, subtitle, children, footer, headerAction, size = "md", closeOnBackdrop = true, hideClose = false, className = "", container }) {
+  const titleId = useId();
+  const dialogRef = useFocusTrap(open);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = prev;
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, onClose]);
+  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",
+        {
+          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)
+    )),
+    container != null ? container : document.body
+  );
+}
+export {
+  Modal
+};

package/dist/components/notice.d.ts

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { ReactNode, ComponentType } from 'react';
+
+/**
+ * Notice — aviso contextual com escala de SEVERIDADE real. Unifica a linguagem visual
+ * que antes estava fatiada por ORIGEM (CopilotHint cinza vs PaywallBanner vermelho),
+ * o que invertia a hierarquia: o aviso mais grave (operacional) ficava no componente
+ * mais discreto. Aqui a cor segue a gravidade, não quem emitiu.
+ *
+ * Dois eixos ortogonais:
+ *  - `severity` (perceptual): info | success | warning | critical → cor/ícone/peso.
+ *  - `intent` (semântico): operational | commercial → só troca o ícone default
+ *    (commercial = cadeado de plano) e a telemetria; NÃO muda a cor.
+ *
+ * Regra de severidade = CUSTO DE IGNORAR, não a fonte. "Loja não recebe pedidos"
+ * (trava a venda) é `critical`; "limite do plano" (a loja segue vendendo) é `warning`.
+ *
+ * Consome só a família semântica de feedback (danger/warning/info/success) do base.css
+ * — zero cor hardcoded. Acessível: role/aria-live por severidade + ícone (cor nunca é
+ * o único canal). Crítico é não-dispensável por definição.
+ */
+type NoticeSeverity = 'info' | 'success' | 'warning' | 'critical';
+type NoticeIntent = 'operational' | 'commercial';
+interface NoticeProps {
+    severity: NoticeSeverity;
+    title: string;
+    description?: ReactNode;
+    intent?: NoticeIntent;
+    cta?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    /** Component de link (next/link em apps Next). */
+    linkAs?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** Dispensável: ignorado quando severity='critical' (crítico nunca some). Precisa de `id`. */
+    dismissible?: boolean;
+    /** Chave de dispensa (localStorage). Re-key pela condição (ex: `zeroStock:7`) pra reaparecer quando piora. */
+    id?: string;
+    /** aria-label do botão dispensar (i18n pelo caller). */
+    dismissLabel?: string;
+    className?: string;
+}
+declare function Notice({ severity, title, description, intent, cta, linkAs: LinkAs, dismissible, id, dismissLabel, className, }: NoticeProps): react.JSX.Element | null;
+
+export { Notice, type NoticeIntent, type NoticeProps, type NoticeSeverity };