@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/floating-stepper.js

@@ -1,52 +1,34 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-function FloatingStepper({
-  steps,
-  current,
-  onNavigate,
-  canNavigate,
-  action,
-  className = ""
-}) {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "./button.js";
+import { Card } from "./card.js";
+function FloatingStepper({ steps, current, onNavigate, canNavigate, action, className, "aria-label": ariaLabel = "Etapas" }) {
   const currentIdx = steps.findIndex((s) => s.key === current);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: [
-        "flex items-center gap-0.5 rounded-full bg-surface-shell shadow-2xl px-1.5 py-1.5",
-        className
-      ].filter(Boolean).join(" ")
-    },
+  return /* @__PURE__ */ jsxs(Card, { as: "div", size: "sm", role: "navigation", "aria-label": ariaLabel, className: ["rds-floating-stepper", className].filter(Boolean).join(" "), children: [
     steps.map((s, idx) => {
       const isCurrent = idx === currentIdx;
       const canGo = canNavigate ? canNavigate(s.key, idx, currentIdx) : idx < currentIdx;
-      return /* @__PURE__ */ React.createElement(
-        "button",
+      return /* @__PURE__ */ jsx(
+        Button,
         {
-          key: s.key,
-          type: "button",
+          tone: "neutral",
+          variant: isCurrent ? "fill" : "ghost",
           disabled: !canGo && !isCurrent,
           "aria-current": isCurrent ? "step" : void 0,
           onClick: () => {
-            if (canGo) onNavigate == null ? void 0 : onNavigate(s.key);
+            if (canGo && !isCurrent) onNavigate == null ? void 0 : onNavigate(s.key);
           },
-          className: `flex items-center gap-1.5 rounded-full px-3 py-1.5 text-caption font-medium whitespace-nowrap transition-colors ${isCurrent ? "bg-(--surface-default) text-(--text-primary)" : canGo ? "text-on-shell-muted hover:text-on-shell" : "text-on-shell-subtle cursor-default"}`
+          children: s.label
         },
-        /* @__PURE__ */ React.createElement("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 ${isCurrent ? "bg-(--text-primary)" : "bg-on-shell-subtle"}` }),
-        s.label
+        s.key
       );
     }),
-    action && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "w-px h-4 bg-on-shell-line mx-1", "aria-hidden": true }), /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: action.onClick,
-        className: "flex items-center gap-1.5 rounded-full px-3 py-1.5 text-caption font-medium text-on-shell-muted hover:text-on-shell transition-colors whitespace-nowrap [&_svg]:w-3 [&_svg]:h-3 [&_svg]:shrink-0"
-      },
-      action.icon,
-      action.label
-    ))
-  );
+    action && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "rds-floating-stepper__divider", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", icon: action.icon, onClick: action.onClick, children: action.label })
+    ] })
+  ] });
 }
 export {
   FloatingStepper

package/dist/components/footer.d.ts

@@ -0,0 +1,36 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface FooterProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The brand (Figma: `logo`), always by slot: the design system carries no client logo. Usually a link to the home
+     * page named after the brand, around the logotype.
+     */
+    logo: ReactNode;
+    /** One sentence about the site (Figma: `tagline`). */
+    tagline?: ReactNode;
+    /** Links to the brand's profiles, each named, around a 24 mono icon (Figma: slot `social`). */
+    social?: ReactNode;
+    /** The accessible name of the list of profiles. */
+    socialLabel?: string;
+    /** FooterColumn, up to 4 (Figma: slot `columns`). */
+    children?: ReactNode;
+    /** The copyright line (Figma: `copyright`). */
+    copyright: ReactNode;
+}
+/**
+ * Footer — Figma [RDS] Blocks/Footer. The footer of the public pages (<footer>, the contentinfo landmark at the top
+ * level): brand, sentence and profiles, the link columns and the copyright. Below 640 of container width everything
+ * stacks (Figma: `screen`). Styles: footer.css.
+ */
+declare function Footer({ logo, tagline, social, socialLabel, children, copyright, className, ...rest }: FooterProps): react.JSX.Element;
+interface FooterColumnProps extends HTMLAttributes<HTMLElement> {
+    /** Who the links are for, such as customers or sellers (Figma: `title`). It names the column's navigation. */
+    title: string;
+    /** The links, `<a>` elements (Figma: slot `links`). */
+    children: ReactNode;
+}
+/** A column of Footer links (Figma: .footer/column), a <nav> named by its title. Only inside a Footer. */
+declare function FooterColumn({ title, children, className, ...rest }: FooterColumnProps): react.JSX.Element;
+
+export { Footer, FooterColumn, type FooterColumnProps, type FooterProps };

package/dist/components/footer.js

@@ -0,0 +1,38 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement, useId } from "react";
+function listItems(slot) {
+  const items = isValidElement(slot) && slot.type === Fragment ? slot.props.children : slot;
+  return Children.map(items, (item) => item && /* @__PURE__ */ jsx("li", { children: item }));
+}
+function Footer(_a) {
+  var _b = _a, { logo, tagline, social, socialLabel = "Redes sociais", children, copyright, className } = _b, rest = __objRest(_b, ["logo", "tagline", "social", "socialLabel", "children", "copyright", "className"]);
+  return /* @__PURE__ */ jsx("footer", __spreadProps(__spreadValues({}, rest), { className: ["rds-footer", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-footer__inner", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-footer__sitemap", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rds-footer__brand", children: [
+        /* @__PURE__ */ jsx("div", { className: "rds-footer__logo", children: logo }),
+        tagline && /* @__PURE__ */ jsx("p", { className: "rds-footer__tagline", children: tagline }),
+        social && /* @__PURE__ */ jsx("ul", { className: "rds-footer__social", "aria-label": socialLabel, children: listItems(social) })
+      ] }),
+      children && /* @__PURE__ */ jsx("div", { className: "rds-footer__columns", children })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "rds-footer__legal", children: copyright })
+  ] }) }));
+}
+function FooterColumn(_c) {
+  var _d = _c, { title, children, className } = _d, rest = __objRest(_d, ["title", "children", "className"]);
+  const id = useId();
+  return /* @__PURE__ */ jsxs("nav", __spreadProps(__spreadValues({ "aria-labelledby": id }, rest), { className: ["rds-footer__column", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx("p", { id, className: "rds-footer__title", children: title }),
+    /* @__PURE__ */ jsx("ul", { className: "rds-footer__links", children: listItems(children) })
+  ] }));
+}
+export {
+  Footer,
+  FooterColumn
+};

package/dist/components/form-actions.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type FormActionsLayout = 'inline' | 'stacked';
+interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The buttons (Figma: slot `actions`, up to 3), always in reading order: Cancelar first, the primary
+     * last. In `stacked` the primary goes on top, and it is moved first in the page too, so the focus
+     * order follows what is seen.
+     */
+    children: ReactNode;
+    /** A short supporting sentence beside the actions (Figma: `showHelper` + `helper`). */
+    helper?: ReactNode;
+    /**
+     * inline (desktop: floats and hugs its content, sentence left, actions right) or stacked (phone: edge
+     * to edge at the foot, primary full width on top) (Figma: `layout`).
+     */
+    layout?: FormActionsLayout;
+}
+/**
+ * FormActions — Figma [RDS] Actions/FormActions. The actions at the end of a create form or a task,
+ * there from the first second. Where it sticks is the page's job: `position: sticky` at the bottom of
+ * the scrolling container, with `scroll-padding-bottom` equal to its height, so a focused field is never
+ * hidden behind it (WCAG 2.4.11). Styles: form-actions.css.
+ */
+declare function FormActions({ children, helper, layout, className, ...rest }: FormActionsProps): react.JSX.Element;
+
+export { FormActions, type FormActionsLayout, type FormActionsProps };

package/dist/components/form-actions.js

@@ -0,0 +1,24 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+function FormActions(_a) {
+  var _b = _a, { children, helper, layout = "inline", className } = _b, rest = __objRest(_b, ["children", "helper", "layout", "className"]);
+  const actions = Children.toArray(children);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-form-actions", `rds-form-actions--${layout}`, className].filter(Boolean).join(" "),
+      children: [
+        helper && /* @__PURE__ */ jsx("p", { className: "rds-form-actions__helper", children: helper }),
+        /* @__PURE__ */ jsx("div", { className: "rds-form-actions__actions", children: layout === "stacked" ? actions.reverse() : actions })
+      ]
+    })
+  );
+}
+export {
+  FormActions
+};

package/dist/components/google-account-chooser.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { GoogleLayout } from './internal/google.js';
+
+interface GoogleAccount {
+    name: string;
+    email: string;
+}
+interface GoogleAccountChooserProps {
+    /** Your app, as Google shows it after the app is verified (Figma: `appName`). */
+    appName?: string;
+    /** m3: the new screen, in two panels; oauth: what Google shows today for sign-in from an app. */
+    layout?: GoogleLayout;
+    /** The accounts signed in on the browser (the Figma's accounts block): name, e-mail and the initial. */
+    accounts?: GoogleAccount[];
+    className?: string;
+}
+/**
+ * GoogleAccountChooser — Figma [RDS] External/GoogleAccountChooser. A MOCKUP of Google's account chooser, when the
+ * person already has accounts on the browser, for flows: nothing in it works. Below 640 of container width it takes
+ * the mobile layout (Figma: `screen`). "Adicionar outra conta" is Google's text; the rest is a translation (not
+ * verified), as in the Figma. Styles: google-account-chooser.css and internal/google.css.
+ */
+declare function GoogleAccountChooser({ appName, layout, accounts, className }: GoogleAccountChooserProps): react.JSX.Element;
+
+export { type GoogleAccount, GoogleAccountChooser, type GoogleAccountChooserProps };

package/dist/components/google-account-chooser.js

@@ -0,0 +1,44 @@
+import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GoogleAppLine, GoogleScreen } from "./internal/google.js";
+const SAMPLE = [
+  { name: "Maria Souza", email: "maria.souza@gmail.com" },
+  { name: "Maria Souza", email: "maria@empresa.com.br" }
+];
+function GoogleAccountChooser({ appName = "Roj\xE3o", layout = "m3", accounts = SAMPLE, className }) {
+  return /* @__PURE__ */ jsxs(
+    GoogleScreen,
+    {
+      layout,
+      label: "Mockup: escolha de conta do Google",
+      title: "Escolha uma conta",
+      intro: /* @__PURE__ */ jsx(GoogleAppLine, { lead: "para prosseguir para", appName }),
+      className: ["rds-google-account-chooser", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("ul", { className: "rds-google__accounts", children: [
+          accounts.map((account) => /* @__PURE__ */ jsxs("li", { className: "rds-google__account", children: [
+            /* @__PURE__ */ jsx("span", { className: "rds-google__avatar", "aria-hidden": "true", children: account.name.charAt(0).toUpperCase() }),
+            /* @__PURE__ */ jsxs("span", { className: "rds-google__account-text", children: [
+              /* @__PURE__ */ jsx("span", { className: "rds-google__account-name", children: account.name }),
+              /* @__PURE__ */ jsx("span", { className: "rds-google__account-email", children: account.email })
+            ] })
+          ] }, account.email)),
+          /* @__PURE__ */ jsxs("li", { className: "rds-google__account", children: [
+            /* @__PURE__ */ jsx("span", { className: "rds-google__add", "aria-hidden": "true", children: "+" }),
+            /* @__PURE__ */ jsx("span", { className: "rds-google__account-name", children: "Adicionar outra conta" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "rds-google__text rds-google-account-chooser__notice", children: [
+          "Para continuar, o Google vai compartilhar seu nome, endere\xE7o de e-mail, prefer\xEAncia de idioma e foto do perfil com o ",
+          appName,
+          ". Consulte a Pol\xEDtica de Privacidade e os Termos de Servi\xE7o do app ",
+          appName,
+          " antes de us\xE1-lo."
+        ] })
+      ]
+    }
+  );
+}
+export {
+  GoogleAccountChooser
+};

package/dist/components/google-button.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes } from 'react';
+
+type GoogleButtonTheme = 'light' | 'dark' | 'neutral';
+type GoogleButtonShape = 'rectangular' | 'pill';
+type GoogleButtonType = 'standard' | 'icon';
+interface GoogleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'> {
+    /**
+     * The text (Figma: `label`). Only the texts Google allows in pt-BR: "Fazer login com o Google", "Continuar com o
+     * Google", "Inscrever-se com o Google". With `type="icon"` it is the accessible name.
+     */
+    children?: string;
+    /** light: white with a grey border; dark: near black; neutral: light grey, no border. */
+    theme?: GoogleButtonTheme;
+    shape?: GoogleButtonShape;
+    /** standard: the G and the text; icon: only the G, 40 × 40 (Figma: `type`; the HTML type is always "button"). */
+    type?: GoogleButtonType;
+}
+/**
+ * GoogleButton — Figma [RDS] External/GoogleButton. A MOCKUP of the official "Fazer login com o Google" button,
+ * with the measures and colours of Google's branding package: 40 tall, the G (20) 12 from the edge, 10 to the text,
+ * 14/20 medium. A real <button>: wire the click to your sign-in. Styles: google-button.css.
+ */
+declare function GoogleButton({ children, theme, shape, type, className, ...rest }: GoogleButtonProps): react.JSX.Element;
+
+export { GoogleButton, type GoogleButtonProps, type GoogleButtonShape, type GoogleButtonTheme, type GoogleButtonType };

package/dist/components/google-button.js

@@ -0,0 +1,38 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GoogleG } from "./internal/google.js";
+function GoogleButton(_a) {
+  var _b = _a, {
+    children = "Fazer login com o Google",
+    theme = "light",
+    shape = "rectangular",
+    type = "standard",
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "theme",
+    "shape",
+    "type",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      "aria-label": type === "icon" ? children : void 0
+    }, rest), {
+      className: ["rds-google-button", `rds-google-button--${theme}`, `rds-google-button--${shape}`, `rds-google-button--${type}`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(GoogleG, {}),
+        type === "standard" && /* @__PURE__ */ jsx("span", { className: "rds-google-button__label", children })
+      ]
+    })
+  );
+}
+export {
+  GoogleButton
+};

package/dist/components/google-consent.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { GoogleLayout } from './internal/google.js';
+
+interface GoogleConsentProps {
+    /** The screen's title (Figma: `title`), such as "Fazer login no <app>". */
+    title?: string;
+    /** Your app, named in the sharing notice. The Figma has it only inside the title. */
+    appName?: string;
+    /** m3: the new screen, in two panels; oauth: what Google shows today for sign-in from an app. */
+    layout?: GoogleLayout;
+    /** The account being shared. */
+    email?: string;
+    className?: string;
+}
+/**
+ * GoogleConsent — Figma [RDS] External/GoogleConsent. A MOCKUP of Google's consent screen (what Google shares with
+ * the app), for flows: nothing in it works. The app's name shows like this only after Google verifies the app.
+ * Below 640 of container width it takes the mobile layout (Figma: `screen`). Styles: google-consent.css and
+ * internal/google.css.
+ */
+declare function GoogleConsent({ appName, title, layout, email, className }: GoogleConsentProps): react.JSX.Element;
+
+export { GoogleConsent, type GoogleConsentProps };

package/dist/components/google-consent.js

@@ -0,0 +1,28 @@
+import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GoogleAccountChip, GoogleActions, GoogleScreen } from "./internal/google.js";
+function GoogleConsent({ appName = "Roj\xE3o", title, layout = "m3", email = "ana@exemplo.com", className }) {
+  return /* @__PURE__ */ jsxs(
+    GoogleScreen,
+    {
+      layout,
+      label: "Mockup: consentimento do Google",
+      title: title != null ? title : `Fazer login no ${appName}`,
+      intro: /* @__PURE__ */ jsx(GoogleAccountChip, { email }),
+      className: ["rds-google-consent", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "rds-google__text", children: [
+          "Para criar sua conta, o Google vai compartilhar seu nome, endere\xE7o de e-mail e foto do perfil com o ",
+          appName,
+          ". Consulte a Pol\xEDtica de Privacidade e os Termos de Servi\xE7o do ",
+          appName,
+          "."
+        ] }),
+        /* @__PURE__ */ jsx(GoogleActions, { secondary: "Cancelar", primary: "Continuar" })
+      ]
+    }
+  );
+}
+export {
+  GoogleConsent
+};

package/dist/components/google-sign-in.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { GoogleLayout } from './internal/google.js';
+
+type GoogleSignInStep = 'email' | 'password';
+interface GoogleSignInProps {
+    /** The screen's title (Figma: `title`). On the password step the Figma shows "Boas-vindas". */
+    title?: string;
+    /** Your app, as Google shows it after the app is verified (Figma: `appName`). */
+    appName?: string;
+    /** m3: the new screen, in two panels; oauth: what Google shows today for sign-in from an app. */
+    layout?: GoogleLayout;
+    /** email: the e-mail field; password: the account chip and the password field. */
+    step?: GoogleSignInStep;
+    /** The account on the password step. */
+    email?: string;
+    className?: string;
+}
+/**
+ * GoogleSignIn — Figma [RDS] External/GoogleSignIn. A MOCKUP of Google's sign-in screen, for flows: nothing in it
+ * works. Below 640 of container width it takes the mobile layout (Figma: `screen`). Texts of the e-mail step are
+ * Google's; those of the password step are a translation (not verified), as in the Figma. Styles: google-sign-in.css
+ * and internal/google.css.
+ */
+declare function GoogleSignIn({ title, appName, layout, step, email, className, }: GoogleSignInProps): react.JSX.Element;
+
+export { GoogleLayout, GoogleSignIn, type GoogleSignInProps, type GoogleSignInStep };

package/dist/components/google-sign-in.js

@@ -0,0 +1,36 @@
+import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { GoogleAccountChip, GoogleActions, GoogleAppLine, GoogleField, GoogleScreen } from "./internal/google.js";
+function GoogleSignIn({
+  title,
+  appName = "Roj\xE3o",
+  layout = "m3",
+  step = "email",
+  email = "ana@exemplo.com",
+  className
+}) {
+  const password = step === "password";
+  return /* @__PURE__ */ jsx(
+    GoogleScreen,
+    {
+      layout,
+      label: "Mockup: login com o Google",
+      title: title != null ? title : password ? "Boas-vindas" : "Fa\xE7a login",
+      intro: password ? /* @__PURE__ */ jsx(GoogleAccountChip, { email }) : /* @__PURE__ */ jsx(GoogleAppLine, { lead: "Prosseguir para", appName }),
+      className: ["rds-google-sign-in", className].filter(Boolean).join(" "),
+      children: password ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(GoogleField, { label: "Digite sua senha" }),
+        /* @__PURE__ */ jsx("span", { className: "rds-google__checkbox rds-google-sign-in__show", children: "Mostrar senha" }),
+        /* @__PURE__ */ jsx(GoogleActions, { secondary: "Esqueceu a senha?", primary: "Avan\xE7ar" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(GoogleField, { label: "E-mail ou telefone", state: layout === "oauth" ? "focus" : "default" }),
+        /* @__PURE__ */ jsx("span", { className: "rds-google__link rds-google-sign-in__forgot", children: "Esqueceu o e-mail?" }),
+        /* @__PURE__ */ jsx("p", { className: "rds-google__text rds-google-sign-in__notice", children: layout === "m3" ? "N\xE3o est\xE1 no seu computador? Use uma janela de navega\xE7\xE3o privada para fazer login." : `Consulte a Pol\xEDtica de Privacidade e os Termos de Servi\xE7o do app ${appName} antes de us\xE1-lo.` }),
+        /* @__PURE__ */ jsx(GoogleActions, { secondary: "Criar conta", primary: "Avan\xE7ar" })
+      ] })
+    }
+  );
+}
+export {
+  GoogleSignIn
+};

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

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+
+interface HoverCardProps {
+    /** The link it opens from: an <a href> to the full page. The card only repeats what is there. */
+    children: ReactElement;
+    /** Who or what it is (Figma: `title`). */
+    title: ReactNode;
+    /** What it does (Figma: `description`). */
+    description?: ReactNode;
+    /** An Avatar (Figma: `showAvatar` + the avatar). */
+    avatar?: ReactNode;
+    /** One short fact, such as the city, after a pin (Figma: `showMeta` + `meta`). */
+    meta?: ReactNode;
+    /** ms still before opening, so it does not flash while the mouse crosses the screen. */
+    openDelay?: number;
+    /** ms after the mouse leaves; it stays open while the mouse is over it. */
+    closeDelay?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * HoverCard — Figma [RDS] Feedback/HoverCard. A preview on hovering or focusing a link: who it is, before clicking
+ * (Radix HoverCard). Never the only way to the information: on touch it does not open. No buttons inside: that is
+ * the Popover. Styles: hover-card.css.
+ */
+declare function HoverCard({ children, title, description, avatar, meta, openDelay, closeDelay, open, defaultOpen, onOpenChange, }: HoverCardProps): react.JSX.Element;
+
+export { HoverCard, type HoverCardProps };

package/dist/components/hover-card.js

@@ -0,0 +1,55 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { MapPinIcon } from "./internal/icons.js";
+function HoverCard({
+  children,
+  title,
+  description,
+  avatar,
+  meta,
+  openDelay = 500,
+  closeDelay = 300,
+  open,
+  defaultOpen,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    HoverCardPrimitive.Root,
+    {
+      openDelay,
+      closeDelay,
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(HoverCardPrimitive.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+          HoverCardPrimitive.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 8,
+            collisionPadding: 16,
+            className: "rds-hover-card",
+            children: [
+              avatar && /* @__PURE__ */ jsx("span", { className: "rds-hover-card__avatar", children: avatar }),
+              /* @__PURE__ */ jsxs("div", { className: "rds-hover-card__content", children: [
+                /* @__PURE__ */ jsx("p", { className: "rds-hover-card__title", children: title }),
+                description && /* @__PURE__ */ jsx("p", { className: "rds-hover-card__description", children: description }),
+                meta && /* @__PURE__ */ jsxs("p", { className: "rds-hover-card__meta", children: [
+                  /* @__PURE__ */ jsx("span", { className: "rds-hover-card__meta-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MapPinIcon, {}) }),
+                  meta
+                ] })
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  HoverCard
+};

package/dist/components/icon-button.d.ts

@@ -1,17 +1,47 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ButtonTone, ButtonVariant, ButtonSize } from './internal/button.js';
 
-type IconButtonVariant = 'filled' | 'outline' | 'ghost';
-type IconButtonColor = 'primary' | 'secondary' | 'danger' | 'neutral';
-type IconButtonSize = 'sm' | 'md' | 'lg';
-interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    /** The only content of the button (Figma: `iconName`). */
     icon: ReactNode;
-    'aria-label': string;
-    variant?: IconButtonVariant;
-    color?: IconButtonColor;
-    size?: IconButtonSize;
+    /** Required: the name a screen reader announces ("Fechar", "Mostrar senha"). Rendered as aria-label. */
+    label: string;
+    /** Same tones as the Button. */
+    tone?: ButtonTone;
+    /** Figma calls this property `style`. */
+    variant?: ButtonVariant;
+    /**
+     * The size of the square (Figma: `size`): sm 36 with a 16 icon, md 44 with a 20 icon (default), lg 52 with a 24
+     * icon. The touch target is 44 × 44 in every size: on sm, an invisible layer extends it under a coarse pointer.
+     */
+    size?: ButtonSize;
+    /** Rendered as aria-disabled="true", as in the Button. */
+    disabled?: boolean;
+    /** Render the single child element (an empty `<a>`, a framework `Link`) with the button's classes. */
+    asChild?: boolean;
+    /** Waiting for what the click started (Figma: `loading`): the icon gives way to a turning loader. */
     loading?: boolean;
+    /** What is being waited for, announced while loading. */
+    loadingLabel?: string;
+    /** Only with `asChild`: the link element; the icon is placed inside it. */
+    children?: ReactNode;
 }
-declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * IconButton — Figma [RDS] Actions/IconButton. A square of 36, 44 (default) or 52, same tones, sizes and tokens as
+ * the Button.
+ *
+ * The icon alone does not say what the button does: always pair it with a Tooltip carrying the same text as `label`,
+ * shown on hover and on keyboard focus. They are two components (no tooltip inside this one), always together:
+ *
+ * ```tsx
+ * <Tooltip text="Novo cliente">
+ *   <IconButton icon={<PlusIcon />} label="Novo cliente" />
+ * </Tooltip>
+ * ```
+ *
+ * Every IconButton the design system renders itself (closes, arrows, "Mais ações") already comes with its Tooltip.
+ */
+declare function IconButton({ icon, label, tone, variant, size, disabled, loading, loadingLabel, asChild, type, className, onClick, children, ...rest }: IconButtonProps): react.JSX.Element;
 
-export { IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonVariant };
+export { IconButton, type IconButtonProps };