@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/alert.js

@@ -1,70 +1,79 @@
-import "../chunk-ORMEWXMH.js";
-import { CheckCircle, AlertCircle, AlertTriangle, Info, X } from "lucide-react";
-const VARIANTS = {
-  success: {
-    container: "bg-success-soft border-success-border text-success-text",
-    icon: /* @__PURE__ */ React.createElement(CheckCircle, { size: 16, className: "shrink-0 mt-0.5" }),
-    actionColor: "text-success-text hover:bg-success-soft/60"
-  },
-  danger: {
-    container: "bg-danger-soft border-danger-border text-danger-text",
-    icon: /* @__PURE__ */ React.createElement(AlertCircle, { size: 16, className: "shrink-0 mt-0.5" }),
-    actionColor: "text-danger-text hover:bg-danger-soft/60"
-  },
-  warning: {
-    container: "bg-warning-soft border-warning-border text-warning-text",
-    icon: /* @__PURE__ */ React.createElement(AlertTriangle, { size: 16, className: "shrink-0 mt-0.5" }),
-    actionColor: "text-warning-text hover:bg-warning-soft/60"
-  },
-  info: {
-    container: "bg-info-soft border-info-border text-info-text",
-    icon: /* @__PURE__ */ React.createElement(Info, { size: 16, className: "shrink-0 mt-0.5" }),
-    actionColor: "text-info-text hover:bg-info-soft/60"
-  },
-  neutral: {
-    container: "bg-neutral-soft border-neutral-border text-neutral-text",
-    icon: /* @__PURE__ */ React.createElement(Info, { size: 16, className: "shrink-0 mt-0.5" }),
-    actionColor: "text-neutral-text hover:bg-neutral-soft/60"
-  }
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { focusAfter } from "./internal/focus-after.js";
+import { AlertIcon, CircleCheckIcon, CloseIcon, InfoIcon, TriangleAlertIcon } from "./internal/icons.js";
+const ICONS = {
+  neutral: InfoIcon,
+  info: InfoIcon,
+  success: CircleCheckIcon,
+  warning: TriangleAlertIcon,
+  danger: AlertIcon
 };
-function Alert({
-  variant = "info",
-  title,
-  children,
-  onClose,
-  action,
-  icon,
-  hideIcon = false,
-  className = ""
-}) {
-  const { container, icon: defaultIcon, actionColor } = VARIANTS[variant];
-  const iconEl = hideIcon ? null : icon != null ? icon : defaultIcon;
-  return /* @__PURE__ */ React.createElement(
+function Alert(_a) {
+  var _b = _a, {
+    tone = "neutral",
+    title,
+    description,
+    showIcon = true,
+    action,
+    onClose,
+    closeLabel = "Fechar aviso",
+    announce = "none",
+    className
+  } = _b, rest = __objRest(_b, [
+    "tone",
+    "title",
+    "description",
+    "showIcon",
+    "action",
+    "onClose",
+    "closeLabel",
+    "announce",
+    "className"
+  ]);
+  const [open, setOpen] = useState(true);
+  const ref = useRef(null);
+  if (!open) return null;
+  const Icon = ICONS[tone];
+  return /* @__PURE__ */ jsxs(
     "div",
-    {
-      role: variant === "danger" ? "alert" : "status",
-      className: ["flex items-start gap-3 px-4 py-3 rounded-(--radius-card) border text-label", container, className].join(" ")
-    },
-    iconEl,
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, title && /* @__PURE__ */ React.createElement("p", { className: "font-medium leading-snug" }, title), children && /* @__PURE__ */ React.createElement("div", { className: ["leading-snug", title ? "mt-0.5 opacity-80" : ""].join(" ") }, children), action && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: action.onClick,
-        className: ["mt-2 inline-flex text-caption font-semibold px-2 py-1 -mx-2 rounded transition-colors", actionColor].join(" ")
-      },
-      action.label
-    )),
-    onClose && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: onClose,
-        className: "shrink-0 opacity-60 hover:opacity-100 transition-opacity p-0.5 -m-0.5 rounded",
-        "aria-label": "Fechar"
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 14 })
-    )
+    __spreadProps(__spreadValues({
+      ref,
+      role: announce === "none" ? void 0 : announce
+    }, rest), {
+      className: ["rds-alert", `rds-alert--${tone}`, className].filter(Boolean).join(" "),
+      children: [
+        showIcon && /* @__PURE__ */ jsx("span", { className: "rds-alert__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-alert__content", children: [
+          /* @__PURE__ */ jsx("p", { className: "rds-alert__title", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "rds-alert__description", children: description }),
+          action && /* @__PURE__ */ jsx("div", { className: "rds-alert__action", children: action })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(Tooltip, { text: closeLabel, children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+            label: closeLabel,
+            tone: "neutral",
+            variant: "ghost",
+            className: "rds-alert__close",
+            onClick: () => {
+              focusAfter(ref.current);
+              setOpen(false);
+              onClose();
+            }
+          }
+        ) })
+      ]
+    })
   );
 }
 export {

package/dist/components/attachment.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type AttachmentStatus = 'idle' | 'uploading' | 'processing' | 'error' | 'done';
+type AttachmentOrientation = 'horizontal' | 'vertical';
+interface AttachmentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The file name (Figma: `title`). It also names the actions and the status said to screen readers. */
+    title: string;
+    /** Type and size, such as "PDF · 240 KB" (Figma: `description`). In error, say what went wrong here. */
+    description?: ReactNode;
+    /**
+     * The upload's life cycle (Figma: `status`). idle: ready; uploading: the bar (`progress`); processing: a Spinner
+     * in place of the icon; error: error border and text, and the retry action; done: a check in place of the icon.
+     * Every change is said to screen readers ("Enviando…", "Enviado"), in a polite live region.
+     */
+    status?: AttachmentStatus;
+    /** horizontal: a document, icon in a 40 box; vertical: an image, a 112 tall preview (Figma: `orientation`). */
+    orientation?: AttachmentOrientation;
+    /**
+     * The file icon (Figma: `icon`). By default a document, or an image when vertical. Vertical, an `<img alt="">`
+     * here fills the preview.
+     */
+    icon?: ReactNode;
+    /** 0 to 100 while uploading. */
+    progress?: number;
+    /** Shows the × (Figma: `showAction`), named "Remover <title>". */
+    onRemove?: () => void;
+    /** In error, the action becomes "Enviar <title> de novo". */
+    onRetry?: () => void;
+}
+/**
+ * Attachment — Figma [RDS] Chat/Attachment. A file in the conversation or in the send field: before, during and
+ * after the upload. Styles: attachment.css.
+ */
+declare function Attachment({ title, description, status, orientation, icon, progress, onRemove, onRetry, className, ...rest }: AttachmentProps): react.JSX.Element;
+
+export { Attachment, type AttachmentOrientation, type AttachmentProps, type AttachmentStatus };

package/dist/components/attachment.js

@@ -0,0 +1,76 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { AlertIcon, CircleCheckIcon, CloseIcon, FileTextIcon, ImageIcon, RotateCcwIcon } from "./internal/icons.js";
+import { Progress } from "./progress.js";
+import { Spinner } from "./spinner.js";
+const SAID = {
+  idle: () => "",
+  uploading: (title) => `Enviando ${title}`,
+  processing: (title) => `Processando ${title}`,
+  error: (title) => `N\xE3o deu para enviar ${title}`,
+  done: (title) => `${title} enviado`
+};
+function Attachment(_a) {
+  var _b = _a, {
+    title,
+    description,
+    status = "idle",
+    orientation = "horizontal",
+    icon,
+    progress = 0,
+    onRemove,
+    onRetry,
+    className
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "description",
+    "status",
+    "orientation",
+    "icon",
+    "progress",
+    "onRemove",
+    "onRetry",
+    "className"
+  ]);
+  const busy = status === "uploading" || status === "processing";
+  let media;
+  if (status === "processing") media = /* @__PURE__ */ jsx(Spinner, { size: "sm" });
+  else if (status === "error") media = /* @__PURE__ */ jsx(AlertIcon, {});
+  else if (status === "done") media = /* @__PURE__ */ jsx(CircleCheckIcon, {});
+  else media = icon != null ? icon : orientation === "vertical" ? /* @__PURE__ */ jsx(ImageIcon, {}) : /* @__PURE__ */ jsx(FileTextIcon, {});
+  const action = status === "error" && onRetry ? /* @__PURE__ */ jsx(Tooltip, { text: `Enviar ${title} de novo`, children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(RotateCcwIcon, {}), label: `Enviar ${title} de novo`, tone: "neutral", variant: "ghost", onClick: onRetry }) }) : onRemove ? /* @__PURE__ */ jsx(Tooltip, { text: `Remover ${title}`, children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CloseIcon, {}), label: `Remover ${title}`, tone: "neutral", variant: "ghost", onClick: onRemove }) }) : null;
+  const content = /* @__PURE__ */ jsxs("div", { className: "rds-attachment__content", children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-attachment__title", children: title }),
+    description && /* @__PURE__ */ jsx("span", { className: "rds-attachment__description", children: description }),
+    status === "uploading" && /* @__PURE__ */ jsx(Progress, { size: "sm", value: progress, label: `Enviando ${title}`, showLabel: false, showValue: false })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "aria-busy": busy || void 0
+    }, rest), {
+      className: ["rds-attachment", `rds-attachment--${orientation}`, `rds-attachment--${status}`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "rds-attachment__media", "aria-hidden": "true", children: media }),
+        orientation === "vertical" ? /* @__PURE__ */ jsxs("div", { className: "rds-attachment__row", children: [
+          content,
+          action
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          content,
+          action
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", role: "status", children: SAID[status](title) })
+      ]
+    })
+  );
+}
+export {
+  Attachment
+};

package/dist/components/avatar.d.ts

@@ -1,45 +1,52 @@
 import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-/**
- * Avatar — representação visual de usuário/entidade.
- *
- * Uso:
- *   <Avatar src="/u.jpg" alt="Marcos" />
- *   <Avatar name="Marcos Silva" />          // gera iniciais
- *   <Avatar name="A" size="lg" />
- *   <Avatar name="J" status="active" />     // dot indicador
- *
- * AvatarGroup — empilha avatares com overlap.
- *   <AvatarGroup max={3}>
- *     <Avatar name="A" />
- *     <Avatar name="B" />
- *     ...
- *   </AvatarGroup>
- */
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type AvatarStatus = 'active' | 'inactive' | 'pending' | 'error';
-interface AvatarProps {
+/** person is a circle; brand is a rounded square (a brand, a company, a campaign). */
+type AvatarType = 'person' | 'brand';
+type AvatarSize = 'sm' | 'default' | 'lg' | 'xl';
+/** What the Avatar shows. It follows from the props: a photo (`src`), initials (a name) or an icon (no name). */
+type AvatarVariant = 'image' | 'fallback' | 'icon';
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** person is a circle; brand is a square with rounded corners, initials in bold on the brand's mark colour. */
+    type?: AvatarType;
+    /** sm 24, default 32, lg 40, xl 56. Inside an AvatarGroup, the group's size. */
+    size?: AvatarSize;
+    /** The photo (Figma: `variant=image`). If it fails to load, the initials (or the icon) show instead. */
     src?: string;
-    alt?: string;
-    /** Nome completo — gera iniciais (até 2 letras). */
+    /**
+     * The full name: the photo's alt, the initials' aria-label and the source of the initials. Leave it out only for an
+     * avatar without a name (a visitor): it is then decorative and hidden from screen readers.
+     */
     name?: string;
-    size?: AvatarSize;
-    status?: AvatarStatus;
-    /** Cor de fundo. default = brand-primary. */
-    variant?: 'brand' | 'neutral';
-    className?: string;
+    /** The initials (Figma: `fallbackText`). By default two letters from `name`, one on a brand. */
+    fallbackText?: string;
+    /** The icon when there is no name (Figma: `variant=icon` + `icon`). By default a person, or a building on a brand. */
+    icon?: ReactNode;
+    /** The presence dot (Figma: `showBadge`). The colour is not the only sign: `badgeLabel` goes into the accessible name. */
+    showBadge?: boolean;
+    /** What the dot means, said after the name. */
+    badgeLabel?: string;
 }
+/** Two letters: first and last name, or the first two letters of a single word. "?" for an empty name. */
 declare function initials(name: string): string;
-declare function Avatar({ src, alt, name, size, status, variant, className, }: AvatarProps): react.JSX.Element;
-interface AvatarGroupProps {
-    /** Máximo de avatares visíveis; o resto vira `+N`. default = 3. */
+/**
+ * Avatar — Figma [RDS] Content/Avatar. A person, or a brand, in miniature: photo, initials or icon. Not
+ * interactive. The Figma `variant` follows from the props: `src` → image, a name → fallback, neither → icon.
+ * Styles: avatar.css.
+ */
+declare function Avatar({ type, size, src, name, fallbackText, icon, showBadge, badgeLabel, className, ...rest }: AvatarProps): react.JSX.Element;
+type AvatarGroupSize = Exclude<AvatarSize, 'xl'>;
+interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Who the group is ("Equipe do projeto"). Required: it names the group for screen readers. */
+    'aria-label': string;
+    /** The size of every Avatar inside (Figma: sm, default, lg). */
+    size?: AvatarGroupSize;
+    /** Show only the first `max` and a "+N" with the rest. 3 or 4 is a good limit. */
     max?: number;
-    /** Sobreposição em px. default depende do size. */
-    spacing?: 'tight' | 'normal' | 'loose';
-    size?: AvatarSize;
-    children: React.ReactNode;
-    className?: string;
+    /** The Avatars. */
+    children: ReactNode;
 }
-declare function AvatarGroup({ max, spacing, size, children, className, }: AvatarGroupProps): react.JSX.Element;
+/** AvatarGroup — Figma [RDS] Content/AvatarGroup. Overlapping avatars, each with a ring that separates it. */
+declare function AvatarGroup({ size, max, className, children, ...rest }: AvatarGroupProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, initials };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarProps, type AvatarSize, type AvatarType, type AvatarVariant, initials };

package/dist/components/avatar.js

@@ -1,94 +1,70 @@
-import "../chunk-ORMEWXMH.js";
-import { Children, isValidElement, cloneElement } from "react";
-const SIZE_CLASSES = {
-  xs: "size-6 text-[10px]",
-  sm: "size-8 text-caption",
-  md: "size-10 text-label",
-  lg: "size-12 text-body",
-  xl: "size-16 text-heading-sm"
-};
-const STATUS_DOT_SIZE = {
-  xs: "size-1.5",
-  sm: "size-2",
-  md: "size-2.5",
-  lg: "size-3",
-  xl: "size-3.5"
-};
-const STATUS_COLOR = {
-  active: "bg-success",
-  inactive: "bg-state-disabled-text",
-  pending: "bg-warning",
-  error: "bg-danger"
-};
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, createContext, useContext, useState } from "react";
+import { BuildingIcon, UserIcon } from "./internal/icons.js";
+const GroupSize = createContext(void 0);
 function initials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "?";
   if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
   return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 }
-function Avatar({
-  src,
-  alt,
-  name,
-  size = "md",
-  status,
-  variant = "brand",
-  className = ""
-}) {
-  var _a;
-  const showImage = !!src;
-  const label = (_a = alt != null ? alt : name) != null ? _a : "Avatar";
-  const bgClass = variant === "brand" ? "bg-brand-primary text-brand-on-primary" : "bg-surface-raised text-fg-secondary";
-  return /* @__PURE__ */ React.createElement("div", { className: ["relative inline-flex shrink-0", className].join(" ") }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: [
-        "inline-flex items-center justify-center rounded-full overflow-hidden font-semibold select-none",
-        SIZE_CLASSES[size],
-        showImage ? "" : bgClass
-      ].join(" "),
-      "aria-label": label,
-      role: "img"
-    },
-    showImage ? /* @__PURE__ */ React.createElement("img", { src, alt: label, className: "size-full object-cover" }) : /* @__PURE__ */ React.createElement("span", null, initials(name != null ? name : "?"))
-  ), status && /* @__PURE__ */ React.createElement(
+function Avatar(_a) {
+  var _b = _a, {
+    type = "person",
+    size,
+    src,
+    name,
+    fallbackText,
+    icon,
+    showBadge,
+    badgeLabel = "online",
+    className
+  } = _b, rest = __objRest(_b, [
+    "type",
+    "size",
+    "src",
+    "name",
+    "fallbackText",
+    "icon",
+    "showBadge",
+    "badgeLabel",
+    "className"
+  ]);
+  var _a2, _b2;
+  const groupSize = useContext(GroupSize);
+  const finalSize = (_a2 = size != null ? size : groupSize) != null ? _a2 : "default";
+  const [failed, setFailed] = useState(null);
+  const trimmed = (_b2 = name == null ? void 0 : name.trim()) != null ? _b2 : "";
+  const letters = fallbackText != null ? fallbackText : trimmed ? type === "brand" ? trimmed[0].toUpperCase() : initials(trimmed) : "";
+  const variant = src && failed !== src ? "image" : letters ? "fallback" : "icon";
+  const label = trimmed ? showBadge ? `${trimmed}, ${badgeLabel}` : trimmed : void 0;
+  const semantics = variant === "image" ? {} : label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+  return /* @__PURE__ */ jsxs(
     "span",
-    {
-      className: [
-        "absolute bottom-0 right-0 rounded-full ring-2 ring-surface-default",
-        STATUS_DOT_SIZE[size],
-        STATUS_COLOR[status]
-      ].join(" "),
-      "aria-label": `status: ${status}`
-    }
-  ));
+    __spreadProps(__spreadValues(__spreadValues({}, semantics), rest), {
+      className: ["rds-avatar", `rds-avatar--${type}`, `rds-avatar--${finalSize}`, `rds-avatar--${variant}`, className].filter(Boolean).join(" "),
+      children: [
+        variant === "image" ? /* @__PURE__ */ jsx("img", { className: "rds-avatar__image", src, alt: label != null ? label : "", onError: () => setFailed(src != null ? src : null) }) : /* @__PURE__ */ jsx("span", { className: "rds-avatar__fallback", "aria-hidden": "true", children: variant === "fallback" ? letters : icon != null ? icon : type === "brand" ? /* @__PURE__ */ jsx(BuildingIcon, {}) : /* @__PURE__ */ jsx(UserIcon, {}) }),
+        showBadge && /* @__PURE__ */ jsx("span", { className: "rds-avatar__badge", "aria-hidden": "true" })
+      ]
+    })
+  );
 }
-const SPACING_CLASS = {
-  tight: "-ml-3",
-  normal: "-ml-2",
-  loose: "-ml-1"
-};
-function AvatarGroup({
-  max = 3,
-  spacing = "normal",
-  size = "md",
-  children,
-  className = ""
-}) {
-  const items = Children.toArray(children).filter(isValidElement);
-  const visible = items.slice(0, max);
-  const overflow = items.length - visible.length;
-  return /* @__PURE__ */ React.createElement("div", { className: ["inline-flex items-center", className].join(" "), role: "group" }, visible.map((child, idx) => {
-    var _a;
-    return /* @__PURE__ */ React.createElement("div", { key: idx, className: idx === 0 ? "" : SPACING_CLASS[spacing] }, cloneElement(child, { size: (_a = child.props.size) != null ? _a : size }));
-  }), overflow > 0 && /* @__PURE__ */ React.createElement("div", { className: SPACING_CLASS[spacing] }, /* @__PURE__ */ React.createElement(
-    Avatar,
-    {
-      name: `+${overflow}`,
-      variant: "neutral",
-      size
-    }
-  )));
+function AvatarGroup(_c) {
+  var _d = _c, { size = "default", max, className, children } = _d, rest = __objRest(_d, ["size", "max", "className", "children"]);
+  const items = Children.toArray(children);
+  const shown = max && items.length > max ? items.slice(0, max) : items;
+  const hidden = items.length - shown.length;
+  return /* @__PURE__ */ jsx(GroupSize.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ role: "group" }, rest), { className: ["rds-avatar-group", `rds-avatar-group--${size}`, className].filter(Boolean).join(" "), children: [
+    shown,
+    hidden > 0 && /* @__PURE__ */ jsx(Avatar, { fallbackText: `+${hidden}`, name: `mais ${hidden} ${hidden === 1 ? "pessoa" : "pessoas"}` })
+  ] })) });
 }
 export {
   Avatar,

package/dist/components/badge.d.ts

@@ -1,45 +1,34 @@
 import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-declare const LABEL_VARIANTS: {
-    readonly default: "bg-surface-default text-fg-muted border border-stroke-default";
-    readonly primary: "bg-brand-primary text-brand-on-primary";
-    readonly success: "bg-success-soft text-success-text border border-success-border";
-    readonly warning: "bg-warning-soft text-warning-text border border-warning-border";
-    readonly danger: "bg-danger-soft  text-danger-text  border border-danger-border";
-    readonly info: "bg-info-soft    text-info-text    border border-info-border";
-    readonly neutral: "bg-neutral-soft text-neutral-text border border-neutral-border";
-};
-declare const STATUS_VARIANTS: {
-    readonly active: {
-        readonly dot: "bg-success";
-        readonly text: "text-success-text";
-    };
-    readonly inactive: {
-        readonly dot: "bg-state-disabled-text";
-        readonly text: "text-state-disabled-text";
-    };
-    readonly pending: {
-        readonly dot: "bg-warning";
-        readonly text: "text-warning-text";
-    };
-    readonly error: {
-        readonly dot: "bg-danger";
-        readonly text: "text-danger-text";
-    };
-};
-type BadgeVariant = keyof typeof LABEL_VARIANTS | keyof typeof STATUS_VARIANTS | 'count' | 'dot';
-type BadgeSize = 'sm' | 'md';
-interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
-    variant?: BadgeVariant;
-    size?: BadgeSize;
-    /** Para variant="count": número exibido. Acima de `max` mostra "max+". */
-    count?: number;
-    /** Limite pra count overflow. default = 99. */
-    max?: number;
-    /** Para variant="dot": cor da bolinha (default = brand-primary). */
-    dotColor?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
-    children?: React.ReactNode;
+type BadgeTone = 'neutral' | 'action' | 'accent' | 'inverse';
+/** Figma calls this property `style`. */
+type BadgeVariant = 'fill' | 'soft' | 'highlight';
+interface BadgeBase extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The label (Figma: `label`): "Nova", "Grátis". Ignored when `value` is given. */
+    children?: ReactNode;
+    /** Counter mode (Figma: `number=true` + `value`). Above 99 it shows "99+". */
+    value?: number;
 }
-declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+/**
+ * Not every tone has every variant (as in Figma): soft only on neutral and action, highlight only on accent,
+ * inverse only fill. The types allow only those.
+ */
+type BadgeProps = BadgeBase & ({
+    tone?: 'neutral' | 'action';
+    variant?: 'fill' | 'soft';
+} | {
+    tone: 'accent';
+    variant?: 'fill' | 'highlight';
+} | {
+    tone: 'inverse';
+    variant?: 'fill';
+});
+declare function formatBadgeValue(value: number): string;
+/**
+ * Badge — Figma [RDS] Indicators/Badge. A short brand or layout label ("Nova", "Grátis") or a counter. Not
+ * interactive and not a state: a state that changes over time is the Status. Styles: badge.css.
+ */
+declare function Badge({ tone, variant, value, children, className, ...rest }: BadgeProps): react.JSX.Element;
 
-export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant };
+export { Badge, type BadgeProps, type BadgeTone, type BadgeVariant, formatBadgeValue };