@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/filter-chip.js

@@ -1,68 +1,68 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-const BASE = "h-control-sm inline-flex items-center text-caption font-medium border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus px-[var(--filter-chip-padding-x)] [border-radius:var(--filter-chip-radius)]";
-const ACTIVE = "[background:var(--filter-chip-color-surface-active)] [border-color:var(--filter-chip-color-stroke-active)] [color:var(--filter-chip-color-text-active)]";
-const INACTIVE = "[background:var(--filter-chip-color-surface-inactive)] [border-color:var(--filter-chip-color-stroke-inactive)] [color:var(--filter-chip-color-text-inactive)] hover:[background:var(--filter-chip-color-surface-hover)] hover:[border-color:var(--filter-chip-color-stroke-hover)] hover:[color:var(--filter-chip-color-text-hover)]";
-const DISABLED = "[background:var(--filter-chip-color-surface-disabled)] [border-color:var(--filter-chip-color-stroke-disabled)] [color:var(--filter-chip-color-text-disabled)] opacity-50 pointer-events-none cursor-not-allowed";
-function FilterChipBody({ label, count }) {
-  if (count === void 0) return /* @__PURE__ */ jsx(Fragment, { children: label });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    label,
-    /* @__PURE__ */ jsx("span", { className: "ml-1 opacity-60 tabular-nums", children: count })
-  ] });
-}
-function FilterChip({ label, active, count, disabled = false, href, onClick, className = "" }) {
-  const cls = [BASE, active ? ACTIVE : INACTIVE, disabled ? DISABLED : "", className].filter(Boolean).join(" ");
-  if (href) {
-    return /* @__PURE__ */ jsx(
-      Link,
-      {
-        href,
-        "aria-current": active ? "true" : void 0,
-        "aria-disabled": disabled || void 0,
-        tabIndex: disabled ? -1 : void 0,
-        className: cls,
-        children: /* @__PURE__ */ jsx(FilterChipBody, { label, count })
-      }
-    );
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { blockWhenDisabled } from "./internal/button.js";
+function FilterChip(_a) {
+  var _b = _a, {
+    children,
+    count,
+    icon,
+    active,
+    defaultActive = false,
+    onActiveChange,
+    disabled,
+    asChild,
+    type = "button",
+    className,
+    onClick
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "count",
+    "icon",
+    "active",
+    "defaultActive",
+    "onActiveChange",
+    "disabled",
+    "asChild",
+    "type",
+    "className",
+    "onClick"
+  ]);
+  const [own, setOwn] = useState(defaultActive);
+  const on = active != null ? active : own;
+  const Root = asChild ? Slot : "button";
+  function click(event) {
+    onClick == null ? void 0 : onClick(event);
+    if (event.defaultPrevented || asChild) return;
+    if (active === void 0) setOwn(!on);
+    onActiveChange == null ? void 0 : onActiveChange(!on);
   }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      "aria-pressed": active,
-      disabled,
-      className: cls,
-      children: /* @__PURE__ */ jsx(FilterChipBody, { label, count })
-    }
+  return /* @__PURE__ */ jsxs(
+    Root,
+    __spreadProps(__spreadValues({}, rest), {
+      type: asChild ? void 0 : type,
+      className: ["rds-filter-chip", on && "rds-filter-chip--active", className].filter(Boolean).join(" "),
+      "aria-pressed": asChild ? void 0 : on,
+      "aria-current": asChild && on ? "true" : void 0,
+      "aria-disabled": disabled || void 0,
+      onClick: blockWhenDisabled(disabled, click),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "rds-filter-chip__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx(Slottable, { children: asChild ? children : /* @__PURE__ */ jsx("span", { className: "rds-filter-chip__label", children }) }),
+        count !== void 0 && count !== null && count !== "" && /* @__PURE__ */ jsx("span", { className: "rds-filter-chip__count", children: count })
+      ]
+    })
   );
 }
-function FilterChipGroup({ items, active, label, className = "" }) {
-  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: ["flex flex-wrap [gap:var(--filter-chip-group-gap)]", className].filter(Boolean).join(" "), children: items.map((item) => {
-    var _a;
-    if (process.env.NODE_ENV === "development" && !item.href && !item.onClick) {
-      console.warn(`[FilterChipGroup] item "${item.label}" has neither href nor onClick \u2014 click will have no effect`);
-    }
-    const isActive = active === item.value || !active && item.value === void 0;
-    if (item.href) {
-      return /* @__PURE__ */ jsx(FilterChip, { label: item.label, active: isActive, count: item.count, disabled: item.disabled, href: item.href }, item.label);
-    }
-    return /* @__PURE__ */ jsx(
-      FilterChip,
-      {
-        label: item.label,
-        active: isActive,
-        count: item.count,
-        disabled: item.disabled,
-        onClick: (_a = item.onClick) != null ? _a : (() => {
-        })
-      },
-      item.label
-    );
-  }) });
+function FilterChipGroup(_c) {
+  var _d = _c, { className, children } = _d, rest = __objRest(_d, ["className", "children"]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ role: "group" }, rest), { className: ["rds-filter-chip-group", className].filter(Boolean).join(" "), children }));
 }
 export {
   FilterChip,

package/dist/components/floating-stepper.d.ts

@@ -2,23 +2,10 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
- * FloatingStepper — pill flutuante de etapas de um fluxo (PDV, checkout).
- *
- * Mostra as etapas com dot de estado; etapas anteriores são navegáveis
- * (volta no fluxo), futuras ficam desabilitadas. `canNavigate` permite
- * customizar a regra. Slot `action` pra ação terminal (ex.: Reset).
- *
- * O POSICIONAMENTO é do caller (absolute/fixed via wrapper ou className) —
- * o componente só renderiza a pill.
- *
- * Uso:
- *   <FloatingStepper
- *     steps={[{ key: 'cart', label: 'Carrinho' }, ...]}
- *     current={step}
- *     onNavigate={setStep}
- *     action={{ label: 'Reset', icon: <RotateCcw />, onClick: reset }}
- *     className="absolute bottom-3 left-1/2 -translate-x-1/2 z-30"
- *   />
+ * FloatingStepper — a composition of the Card (as a pill) and Buttons (Figma [RDS] Actions/Button, neutral): the
+ * floating steps of a flow (point of sale, checkout). The current step is the filled Button (aria-current="step");
+ * earlier steps go back, later ones are disabled; `canNavigate` changes the rule. `action` is a last Button after
+ * a line (Reset). Where it floats is the caller's (className or a wrapper). Styles: floating-stepper.css.
  */
 type FloatingStepperStep = {
     key: string;
@@ -38,7 +25,9 @@ interface FloatingStepperProps {
         onClick: () => void;
     };
     className?: string;
+    /** The navigation's name. Default "Etapas". */
+    'aria-label'?: string;
 }
-declare function FloatingStepper({ steps, current, onNavigate, canNavigate, action, className, }: FloatingStepperProps): react.JSX.Element;
+declare function FloatingStepper({ steps, current, onNavigate, canNavigate, action, className, 'aria-label': ariaLabel }: FloatingStepperProps): react.JSX.Element;
 
 export { FloatingStepper, type FloatingStepperProps, type FloatingStepperStep };

package/dist/components/floating-stepper.js

@@ -1,62 +1,34 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function FloatingStepper({
-  steps,
-  current,
-  onNavigate,
-  canNavigate,
-  action,
-  className = ""
-}) {
+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__ */ jsxs(
-    "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(" "),
-      children: [
-        steps.map((s, idx) => {
-          const isCurrent = idx === currentIdx;
-          const canGo = canNavigate ? canNavigate(s.key, idx, currentIdx) : idx < currentIdx;
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              disabled: !canGo && !isCurrent,
-              "aria-current": isCurrent ? "step" : void 0,
-              onClick: () => {
-                if (canGo) 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: [
-                /* @__PURE__ */ jsx("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__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "w-px h-4 bg-on-shell-line mx-1", "aria-hidden": true }),
-          /* @__PURE__ */ jsxs(
-            "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",
-              children: [
-                action.icon,
-                action.label
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
+  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__ */ jsx(
+        Button,
+        {
+          tone: "neutral",
+          variant: isCurrent ? "fill" : "ghost",
+          disabled: !canGo && !isCurrent,
+          "aria-current": isCurrent ? "step" : void 0,
+          onClick: () => {
+            if (canGo && !isCurrent) onNavigate == null ? void 0 : onNavigate(s.key);
+          },
+          children: s.label
+        },
+        s.key
+      );
+    }),
+    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 };