@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/internal/choice-card.js

@@ -0,0 +1,117 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useState } from "react";
+import { CheckIcon, ImageIcon } from "./icons.js";
+const Group = createContext(null);
+function ChoiceCardControl(_a) {
+  var _b = _a, {
+    control,
+    children,
+    description,
+    icon,
+    selected,
+    onSelect,
+    value,
+    disabled,
+    className,
+    onChange,
+    name,
+    layout,
+    preview
+  } = _b, rest = __objRest(_b, [
+    "control",
+    "children",
+    "description",
+    "icon",
+    "selected",
+    "onSelect",
+    "value",
+    "disabled",
+    "className",
+    "onChange",
+    "name",
+    "layout",
+    "preview"
+  ]);
+  var _a2, _b2;
+  const group = useContext(Group);
+  const descriptionId = useId();
+  const checked = group && value !== void 0 && control === "radio" ? group.value === value : !!selected;
+  const isDisabled = disabled || (group == null ? void 0 : group.disabled);
+  const kind = (_a2 = layout != null ? layout : group == null ? void 0 : group.layout) != null ? _a2 : "row";
+  const check = checked && /* @__PURE__ */ jsx("span", { className: "rds-choice-card__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckIcon, {}) });
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: [
+        "rds-choice-card",
+        `rds-choice-card--${kind}`,
+        checked && "rds-choice-card--selected",
+        isDisabled && "rds-choice-card--disabled",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({}, rest), {
+            type: control,
+            className: "rds-choice-card__input",
+            name: (_b2 = group == null ? void 0 : group.name) != null ? _b2 : name,
+            value,
+            checked,
+            disabled: isDisabled,
+            "aria-describedby": description ? descriptionId : void 0,
+            onChange: (event) => {
+              onChange == null ? void 0 : onChange(event);
+              if (group && value !== void 0) group.select(value);
+              onSelect == null ? void 0 : onSelect();
+            }
+          })
+        ),
+        kind === "preview" ? /* @__PURE__ */ jsxs("span", { className: "rds-choice-card__preview", "aria-hidden": "true", children: [
+          preview != null ? preview : /* @__PURE__ */ jsx("span", { className: "rds-choice-card__placeholder", children: /* @__PURE__ */ jsx(ImageIcon, {}) }),
+          check
+        ] }) : icon && /* @__PURE__ */ jsx("span", { className: "rds-choice-card__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs("span", { className: "rds-choice-card__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-choice-card__label", children }),
+          description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "rds-choice-card__description", children: description })
+        ] }),
+        kind === "row" && /* @__PURE__ */ jsx("span", { className: "rds-choice-card__radio", "aria-hidden": "true" }),
+        kind === "tile" && check
+      ]
+    }
+  );
+}
+function ChoiceCardGroup({ legend, children, value, defaultValue, onValueChange, name, disabled, layout = "row", className }) {
+  const generated = useId();
+  const [own, setOwn] = useState(defaultValue);
+  const current = value != null ? value : own;
+  return /* @__PURE__ */ jsx(
+    Group.Provider,
+    {
+      value: {
+        name: name != null ? name : generated,
+        value: current,
+        disabled,
+        layout,
+        select: (next) => {
+          setOwn(next);
+          onValueChange == null ? void 0 : onValueChange(next);
+        }
+      },
+      children: /* @__PURE__ */ jsxs("fieldset", { className: ["rds-choice-card-group", `rds-choice-card-group--${layout}`, className].filter(Boolean).join(" "), children: [
+        /* @__PURE__ */ jsx("legend", { className: "rds-choice-card-group__legend", children: legend }),
+        children
+      ] })
+    }
+  );
+}
+export {
+  ChoiceCardControl,
+  ChoiceCardGroup
+};

package/dist/components/internal/choice.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface ChoiceRowProps {
+    /** The component class: rds-checkbox, rds-radio, rds-switch. */
+    kind: string;
+    /** Renders the native input with the id and the description it must carry. */
+    control: (ids: {
+        id: string;
+        describedBy: string | undefined;
+    }) => ReactNode;
+    /** The visible label (Figma: `showLabel` + `label`). Without it the input needs aria-label. */
+    label?: ReactNode;
+    hint?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    errorMessage?: ReactNode;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function ChoiceRow({ kind, control, label, hint, required, disabled, invalid, errorMessage, id, className, style, }: ChoiceRowProps): react.JSX.Element;
+
+export { ChoiceRow, type ChoiceRowProps };

package/dist/components/internal/choice.js

@@ -0,0 +1,44 @@
+import "../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { hasContent } from "./field.js";
+function ChoiceRow({
+  kind,
+  control,
+  label,
+  hint,
+  required,
+  disabled,
+  invalid,
+  errorMessage,
+  id,
+  className,
+  style
+}) {
+  const generated = useId();
+  const controlId = id != null ? id : generated;
+  const hintId = hasContent(hint) ? `${controlId}-hint` : void 0;
+  const errorId = invalid && hasContent(errorMessage) ? `${controlId}-error` : void 0;
+  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["rds-choice", kind, invalid && `${kind}--error`, disabled && `${kind}--disabled`, className].filter(Boolean).join(" "),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("label", { className: "rds-choice__row", htmlFor: controlId, children: [
+          /* @__PURE__ */ jsx("span", { className: `rds-choice__control ${kind}__control`, children: control({ id: controlId, describedBy }) }),
+          hasContent(label) && /* @__PURE__ */ jsxs("span", { className: `rds-choice__label ${kind}__label`, children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: `${kind}__required`, "aria-hidden": "true", children: " *" })
+          ] })
+        ] }),
+        hintId && /* @__PURE__ */ jsx("span", { id: hintId, className: `rds-choice__support ${kind}__support ${kind}__hint`, children: hint }),
+        errorId && /* @__PURE__ */ jsx("span", { id: errorId, className: `rds-choice__support ${kind}__support ${kind}__error-message`, children: errorMessage })
+      ]
+    }
+  );
+}
+export {
+  ChoiceRow
+};

package/dist/components/internal/dates.d.ts

@@ -0,0 +1,17 @@
+type IsoDate = string;
+declare function toIso(date: Date): IsoDate;
+declare function fromIso(iso: IsoDate | undefined | null): Date | null;
+declare function addDays(date: Date, days: number): Date;
+/** Same day of the month in another month, clamped to its last day (31/01 + 1 month = 28 or 29/02). */
+declare function addMonths(date: Date, months: number): Date;
+/** dd/mm/aaaa → ISO, or null when the date does not exist (31/02). */
+declare function parseBr(text: string): IsoDate | null;
+declare function formatBr(iso: IsoDate | undefined | null): string;
+/** Keeps only digits and puts the slashes as the person types: 3009 → 30/09. */
+declare function maskBr(text: string): string;
+/** The full date in pt-BR words ("30 de setembro de 2026"): the name a screen reader hears for a day. */
+declare const dayName: (date: Date) => string;
+/** "Setembro de 2026". */
+declare function monthName(date: Date): string;
+
+export { type IsoDate, addDays, addMonths, dayName, formatBr, fromIso, maskBr, monthName, parseBr, toIso };

package/dist/components/internal/dates.js

@@ -0,0 +1,59 @@
+import "../../chunk-ORMEWXMH.js";
+function toIso(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function fromIso(iso) {
+  if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso)) return null;
+  const [y, m, d] = iso.split("-").map(Number);
+  const date = new Date(y, m - 1, d);
+  return date.getMonth() === m - 1 && date.getDate() === d ? date : null;
+}
+function addDays(date, days) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+function addMonths(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  target.setDate(Math.min(date.getDate(), last));
+  return target;
+}
+function parseBr(text) {
+  const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(text.trim());
+  if (!match) return null;
+  const iso = `${match[3]}-${match[2]}-${match[1]}`;
+  return fromIso(iso) ? iso : null;
+}
+function formatBr(iso) {
+  const date = fromIso(iso);
+  if (!date) return "";
+  return `${String(date.getDate()).padStart(2, "0")}/${String(date.getMonth() + 1).padStart(2, "0")}/${date.getFullYear()}`;
+}
+function maskBr(text) {
+  const d = text.replace(/\D/g, "").slice(0, 8);
+  if (d.length > 4) return `${d.slice(0, 2)}/${d.slice(2, 4)}/${d.slice(4)}`;
+  if (d.length > 2) return `${d.slice(0, 2)}/${d.slice(2)}`;
+  return d;
+}
+const longDate = new Intl.DateTimeFormat("pt-BR", { day: "numeric", month: "long", year: "numeric" });
+const monthTitle = new Intl.DateTimeFormat("pt-BR", { month: "long", year: "numeric" });
+const dayName = (date) => longDate.format(date);
+function monthName(date) {
+  const text = monthTitle.format(date);
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+export {
+  addDays,
+  addMonths,
+  dayName,
+  formatBr,
+  fromIso,
+  maskBr,
+  monthName,
+  parseBr,
+  toIso
+};

package/dist/components/internal/field.d.ts

@@ -0,0 +1,66 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes, HTMLAttributes, CSSProperties } from 'react';
+
+type FieldLabelPosition = 'top' | 'floating';
+interface FieldTextProps {
+    /**
+     * The label (Figma: `showLabel` + `label`), always tied to the control. Without it the field has no
+     * visible name: pass aria-label (a search in a header).
+     */
+    label?: ReactNode;
+    /** top (default): the label above the box. floating: inside the box, shrinking on focus or with a value. */
+    labelPosition?: FieldLabelPosition;
+    /** A line under the box (Figma: `showHint` + `hint`), tied by aria-describedby. Gives way to the error message. */
+    hint?: ReactNode;
+    /** The error state (Figma: `error`): red border and aria-invalid. Passing `errorMessage` turns it on too. */
+    error?: boolean;
+    /** What went wrong and how to fix it, never just "campo inválido". Turns the error state on. */
+    errorMessage?: ReactNode;
+    /** Shows the asterisk and sets the native required (read as "obrigatório"). */
+    required?: boolean;
+}
+/** The ids a field's control points to, and whether it is in error. */
+declare function useFieldIds(id: string | undefined, hint: ReactNode, error: boolean | undefined, errorMessage: ReactNode): {
+    controlId: string;
+    hintId: string | undefined;
+    errorId: string | undefined;
+    invalid: boolean;
+    describedBy: string | undefined;
+};
+declare const hasContent: (node: ReactNode) => boolean;
+/** A field without a visible label needs a name, or a screen reader only says "edit text". */
+declare function warnIfUnlabelled(component: string, label: ReactNode, ariaLabel: unknown, ariaLabelledBy: unknown): void;
+interface FieldShellProps {
+    /** The component class (rds-input, rds-textarea, rds-select). */
+    kind: string;
+    controlId: string;
+    hintId?: string;
+    errorId?: string;
+    label?: ReactNode;
+    labelPosition?: FieldLabelPosition;
+    hint?: ReactNode;
+    errorMessage?: ReactNode;
+    invalid: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /** The box contents, in order: leading parts, the control, trailing parts. */
+    children: ReactNode;
+    /** Extra class on the box (for example when it ends on an action). */
+    boxClassName?: string;
+    /** What goes between the box and the hint or error (the NumberInput's named steps). */
+    afterBox?: ReactNode;
+    /** Event handlers on the box (the FileInput's drag and drop). */
+    boxProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'children'>;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function FieldShell({ kind, controlId, hintId, errorId, label, labelPosition, hint, errorMessage, invalid, required, disabled, children, boxClassName, afterBox, boxProps, className, style, }: FieldShellProps): react.JSX.Element;
+/** The 32 × 32 button inside a field (Figma: .action): clear, show password. Always named. */
+declare function FieldAction({ label, icon, ...rest }: {
+    label: string;
+    icon: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>): react.JSX.Element;
+/** Clears a field the way typing would: React's onChange fires, controlled or not. */
+declare function clearNativeValue(element: HTMLInputElement | HTMLTextAreaElement | null): void;
+
+export { FieldAction, type FieldLabelPosition, FieldShell, type FieldShellProps, type FieldTextProps, clearNativeValue, hasContent, useFieldIds, warnIfUnlabelled };

package/dist/components/internal/field.js

@@ -0,0 +1,105 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+function useFieldIds(id, hint, error, errorMessage) {
+  const generated = useId();
+  const controlId = id != null ? id : generated;
+  const invalid = Boolean(error || hasContent(errorMessage));
+  const errorId = invalid && hasContent(errorMessage) ? `${controlId}-error` : void 0;
+  const hintId = hasContent(hint) && !errorId ? `${controlId}-hint` : void 0;
+  return { controlId, hintId, errorId, invalid, describedBy: [hintId, errorId].filter(Boolean).join(" ") || void 0 };
+}
+const hasContent = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+function warnIfUnlabelled(component, label, ariaLabel, ariaLabelledBy) {
+  if (!hasContent(label) && !ariaLabel && !ariaLabelledBy) {
+    console.warn(`[@rojaostudio/ds] ${component} without label needs aria-label.`);
+  }
+}
+function LabelText({ label, required }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    required && /* @__PURE__ */ jsx("span", { className: "rds-field__required", "aria-hidden": "true", children: " *" })
+  ] });
+}
+function FieldShell({
+  kind,
+  controlId,
+  hintId,
+  errorId,
+  label,
+  labelPosition = "top",
+  hint,
+  errorMessage,
+  invalid,
+  required,
+  disabled,
+  children,
+  boxClassName,
+  afterBox,
+  boxProps,
+  className,
+  style
+}) {
+  const labelled = hasContent(label);
+  const floating = labelPosition === "floating" && labelled;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "rds-field",
+        kind,
+        floating && "rds-field--floating",
+        invalid && "rds-field--error",
+        disabled && "rds-field--disabled",
+        className
+      ].filter(Boolean).join(" "),
+      style,
+      children: [
+        labelled && !floating && /* @__PURE__ */ jsx("label", { htmlFor: controlId, className: "rds-field__label", children: /* @__PURE__ */ jsx(LabelText, { label, required }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          __spreadProps(__spreadValues({}, boxProps), {
+            className: ["rds-field__box", boxClassName].filter(Boolean).join(" "),
+            role: disabled ? "group" : void 0,
+            "aria-disabled": disabled || void 0,
+            children: [
+              floating && /* @__PURE__ */ jsx("label", { htmlFor: controlId, className: "rds-field__float-label", children: /* @__PURE__ */ jsx(LabelText, { label, required }) }),
+              children
+            ]
+          })
+        ),
+        afterBox,
+        errorId ? /* @__PURE__ */ jsx("span", { id: errorId, className: "rds-field__support rds-field__error-message", children: errorMessage }) : hintId && /* @__PURE__ */ jsx("span", { id: hintId, className: "rds-field__support rds-field__hint", children: hint })
+      ]
+    }
+  );
+}
+function FieldAction(_a) {
+  var _b = _a, {
+    label,
+    icon
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "icon"
+  ]);
+  return /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({ type: "button", "aria-label": label }, rest), { className: "rds-field__action", children: /* @__PURE__ */ jsx("span", { className: "rds-field__action-icon", "aria-hidden": "true", children: icon }) }));
+}
+function clearNativeValue(element) {
+  var _a, _b;
+  if (!element) return;
+  const prototype = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  (_b = (_a = Object.getOwnPropertyDescriptor(prototype, "value")) == null ? void 0 : _a.set) == null ? void 0 : _b.call(element, "");
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+}
+export {
+  FieldAction,
+  FieldShell,
+  clearNativeValue,
+  hasContent,
+  useFieldIds,
+  warnIfUnlabelled
+};

package/dist/components/internal/fieldset.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { FieldsetHTMLAttributes, ReactNode } from 'react';
+
+interface ChoiceFieldsetProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'children'> {
+    /** The question (Figma: `legend`). It names the group: without it, a screen reader hears only the option. */
+    legend: ReactNode;
+    /** Shows the asterisk. */
+    required?: boolean;
+    /** A line under the question (Figma: `showHint` + `hint`), tied by aria-describedby. */
+    hint?: ReactNode;
+    /** The group is in error (Figma: `error`). Passing `errorMessage` turns it on too. */
+    error?: boolean;
+    /** What is missing and how to fix it: one message for the whole group. Turns the error state on. */
+    errorMessage?: ReactNode;
+    /** The options (Figma: slot `options`). */
+    children: ReactNode;
+}
+declare function ChoiceFieldset({ kind, legend, required, hint, error, errorMessage, requiredText, className, children, ...rest }: ChoiceFieldsetProps & {
+    /** The component class (rds-checkbox-group, rds-radio-group). */
+    kind: string;
+    /** Said after the legend when the group cannot carry aria-required (a plain group). */
+    requiredText?: string;
+}): react.JSX.Element;
+
+export { ChoiceFieldset, type ChoiceFieldsetProps };

package/dist/components/internal/fieldset.js

@@ -0,0 +1,56 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { hasContent } from "./field.js";
+function ChoiceFieldset(_a) {
+  var _b = _a, {
+    kind,
+    legend,
+    required,
+    hint,
+    error,
+    errorMessage,
+    requiredText,
+    className,
+    children
+  } = _b, rest = __objRest(_b, [
+    "kind",
+    "legend",
+    "required",
+    "hint",
+    "error",
+    "errorMessage",
+    "requiredText",
+    "className",
+    "children"
+  ]);
+  const id = useId();
+  const invalid = Boolean(error || hasContent(errorMessage));
+  const hintId = hasContent(hint) ? `${id}-hint` : void 0;
+  const errorId = invalid && hasContent(errorMessage) ? `${id}-error` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    __spreadProps(__spreadValues({
+      "aria-describedby": [hintId, errorId].filter(Boolean).join(" ") || void 0
+    }, rest), {
+      className: ["rds-fieldset", kind, invalid && `${kind}--error`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("legend", { className: `rds-fieldset__legend ${kind}__legend`, children: [
+          legend,
+          required && /* @__PURE__ */ jsx("span", { className: `${kind}__required`, "aria-hidden": "true", children: " *" }),
+          required && requiredText && /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: ` (${requiredText})` })
+        ] }),
+        hintId && /* @__PURE__ */ jsx("span", { id: hintId, className: `rds-fieldset__support ${kind}__support ${kind}__hint`, children: hint }),
+        /* @__PURE__ */ jsx("div", { className: "rds-fieldset__options", children }),
+        errorId && /* @__PURE__ */ jsx("span", { id: errorId, className: `rds-fieldset__support ${kind}__support ${kind}__error-message`, children: errorMessage })
+      ]
+    })
+  );
+}
+export {
+  ChoiceFieldset
+};

package/dist/components/internal/focus-after.d.ts

@@ -0,0 +1,3 @@
+declare function focusAfter(element: HTMLElement | null): void;
+
+export { focusAfter };

package/dist/components/internal/focus-after.js

@@ -0,0 +1,13 @@
+import "../../chunk-ORMEWXMH.js";
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function focusAfter(element) {
+  if (!element || typeof document === "undefined") return;
+  const all = Array.from(document.querySelectorAll(FOCUSABLE)).filter((el) => !element.contains(el));
+  const next = all.find((el) => element.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING);
+  const previous = [...all].reverse().find((el) => element.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING);
+  const target = next != null ? next : previous;
+  requestAnimationFrame(() => target == null ? void 0 : target.focus());
+}
+export {
+  focusAfter
+};

package/dist/components/internal/google.d.ts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type GoogleLayout = 'm3' | 'oauth';
+/**
+ * The G of Google, in its four colours (Figma: .google/g). The brand's own mark, drawn only where the Figma draws
+ * it (the sign-in button and the Google screens); never recoloured. The fills are the mark's, not the theme's.
+ */
+declare function GoogleG(): react.JSX.Element;
+/** The outlined field with the floating label (Figma: .google/field). focus: label on top, 2px primary border. */
+declare function GoogleField({ label, value, state }: {
+    label: string;
+    value?: string;
+    state?: 'default' | 'focus' | 'filled';
+}): react.JSX.Element;
+/** The account the screen is about: initial, e-mail and the chevron to switch (Figma: .google/account-chip). */
+declare function GoogleAccountChip({ email }: {
+    email: string;
+}): react.JSX.Element;
+/** The primary button and the text action on its left (Figma: actions). */
+declare function GoogleActions({ secondary, primary }: {
+    secondary: string;
+    primary: string;
+}): react.JSX.Element;
+interface GoogleScreenProps {
+    layout: GoogleLayout;
+    /** What the mockup shows, for screen readers. */
+    label: string;
+    title: ReactNode;
+    /** Under the title: the "Prosseguir para <app>" line or the account chip. */
+    intro?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * The Google screen: the page, the card and the footer. m3: a card in two panels (the G, the title and the intro on
+ * the left; the form on the right), stacked below 640 of container width. oauth: the narrow card with the "Fazer
+ * Login com o Google" header and everything centred, edge to edge below 640.
+ */
+declare function GoogleScreen({ layout, label, title, intro, children, className }: GoogleScreenProps): react.JSX.Element;
+/** "Prosseguir para <app>" (or another lead) with the app's name in the primary colour. */
+declare function GoogleAppLine({ lead, appName }: {
+    lead: string;
+    appName: string;
+}): react.JSX.Element;
+
+export { GoogleAccountChip, GoogleActions, GoogleAppLine, GoogleField, GoogleG, type GoogleLayout, GoogleScreen, type GoogleScreenProps };

package/dist/components/internal/google.js

@@ -0,0 +1,73 @@
+import "../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GoogleG() {
+  return /* @__PURE__ */ jsxs("svg", { className: "rds-google-g", viewBox: "0 0 48 48", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx("path", { fill: "#EA4335", d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4285F4", d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#FBBC05", d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#34A853", d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" })
+  ] });
+}
+function GoogleField({ label, value, state = "default" }) {
+  return /* @__PURE__ */ jsxs("div", { className: `rds-google__field rds-google__field--${state}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-google__field-label", children: label }),
+    state === "filled" && value && /* @__PURE__ */ jsx("span", { className: "rds-google__field-value", children: value })
+  ] });
+}
+function GoogleAccountChip({ email }) {
+  return /* @__PURE__ */ jsxs("span", { className: "rds-google__chip", children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-google__avatar rds-google__avatar--sm", "aria-hidden": "true", children: email.charAt(0).toUpperCase() }),
+    /* @__PURE__ */ jsx("span", { children: email }),
+    /* @__PURE__ */ jsx("span", { className: "rds-google__caret", "aria-hidden": "true" })
+  ] });
+}
+function GoogleActions({ secondary, primary }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rds-google__actions", children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-google__link", children: secondary }),
+    /* @__PURE__ */ jsx("span", { className: "rds-google__primary", children: primary })
+  ] });
+}
+function GoogleScreen({ layout, label, title, intro, children, className }) {
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: ["rds-google", `rds-google--${layout}`, className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-google__page", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-google__card", children: [
+      layout === "oauth" && /* @__PURE__ */ jsxs("div", { className: "rds-google__header", children: [
+        /* @__PURE__ */ jsx(GoogleG, {}),
+        /* @__PURE__ */ jsx("span", { children: "Fazer Login com o Google" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rds-google__body", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rds-google__intro", children: [
+          layout === "m3" && /* @__PURE__ */ jsx(GoogleG, {}),
+          /* @__PURE__ */ jsx("p", { className: "rds-google__title", children: title }),
+          intro
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "rds-google__form", children })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rds-google__footer", children: [
+      /* @__PURE__ */ jsxs("span", { className: "rds-google__language", children: [
+        "Portugu\xEAs (Brasil)",
+        /* @__PURE__ */ jsx("span", { className: "rds-google__caret", "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "rds-google__footer-links", children: [
+        /* @__PURE__ */ jsx("span", { children: "Ajuda" }),
+        /* @__PURE__ */ jsx("span", { children: "Privacidade" }),
+        /* @__PURE__ */ jsx("span", { children: "Termos" })
+      ] })
+    ] })
+  ] }) });
+}
+function GoogleAppLine({ lead, appName }) {
+  return /* @__PURE__ */ jsxs("p", { className: "rds-google__subtitle", children: [
+    lead,
+    " ",
+    /* @__PURE__ */ jsx("span", { className: "rds-google__app", children: appName })
+  ] });
+}
+export {
+  GoogleAccountChip,
+  GoogleActions,
+  GoogleAppLine,
+  GoogleField,
+  GoogleG,
+  GoogleScreen
+};