@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/pagination.js

@@ -1,80 +1,87 @@
-import "../chunk-ORMEWXMH.js";
-import { forwardRef } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-function range(start, end) {
-  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "./internal/icons.js";
+const range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, i) => start + i);
+function pageItems(page, totalPages, siblings = 1, boundaries = 1) {
+  const wanted = new Set(
+    [...range(1, boundaries), ...range(page - siblings, page + siblings), ...range(totalPages - boundaries + 1, totalPages)].filter(
+      (p) => p >= 1 && p <= totalPages
+    )
+  );
+  const sorted = [...wanted].sort((a, b) => a - b);
+  const out = [];
+  sorted.forEach((p, i) => {
+    const previous = sorted[i - 1];
+    if (previous !== void 0 && p - previous > 1) {
+      out.push(p - previous === 2 ? p - 1 : p < page ? "ellipsis-start" : "ellipsis-end");
+    }
+    out.push(p);
+  });
+  return out;
 }
-function getRange(page, totalPages, siblings, boundaries) {
-  const totalNumbers = siblings * 2 + boundaries * 2 + 3;
-  if (totalPages <= totalNumbers) return range(1, totalPages);
-  const leftSiblingStart = Math.max(page - siblings, boundaries + 2);
-  const rightSiblingEnd = Math.min(page + siblings, totalPages - boundaries - 1);
-  const showLeftEllipsis = leftSiblingStart > boundaries + 2;
-  const showRightEllipsis = rightSiblingEnd < totalPages - boundaries - 1;
-  const items = [];
-  items.push(...range(1, boundaries));
-  if (showLeftEllipsis) {
-    items.push("ellipsis-left");
-  } else if (boundaries + 1 < leftSiblingStart) {
-    items.push(boundaries + 1);
-  }
-  items.push(...range(leftSiblingStart, rightSiblingEnd));
-  if (showRightEllipsis) {
-    items.push("ellipsis-right");
-  } else if (rightSiblingEnd + 1 < totalPages - boundaries + 1) {
-    items.push(rightSiblingEnd + 1);
-  }
-  items.push(...range(totalPages - boundaries + 1, totalPages));
-  return Array.from(new Set(items.filter((i) => typeof i === "string" || i >= 1 && i <= totalPages)));
+function Anchor(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, props), { children }));
+}
+function Pagination(_c) {
+  var _d = _c, {
+    page,
+    totalPages,
+    onChange,
+    href,
+    linkAs: Link = Anchor,
+    summary,
+    siblings = 1,
+    boundaries = 1,
+    hideOnSinglePage = true,
+    className
+  } = _d, rest = __objRest(_d, [
+    "page",
+    "totalPages",
+    "onChange",
+    "href",
+    "linkAs",
+    "summary",
+    "siblings",
+    "boundaries",
+    "hideOnSinglePage",
+    "className"
+  ]);
+  if (hideOnSinglePage && totalPages <= 1 && !summary) return null;
+  const control = (target, label, content, current = false) => {
+    const off = target < 1 || target > totalPages;
+    if (href && !off) {
+      return /* @__PURE__ */ jsx(Link, { href: href(target), className: "rds-pagination__item", "aria-label": label, "aria-current": current ? "page" : void 0, children: content });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "rds-pagination__item",
+        "aria-label": label,
+        "aria-current": current ? "page" : void 0,
+        disabled: off,
+        onClick: off ? void 0 : () => onChange == null ? void 0 : onChange(target),
+        children: content
+      }
+    );
+  };
+  const arrow = (icon) => /* @__PURE__ */ jsx("span", { className: "rds-pagination__icon", "aria-hidden": "true", children: icon });
+  return /* @__PURE__ */ jsxs("nav", __spreadProps(__spreadValues({ "aria-label": "Pagina\xE7\xE3o" }, rest), { className: ["rds-pagination", className].filter(Boolean).join(" "), children: [
+    summary && /* @__PURE__ */ jsx("p", { className: "rds-pagination__summary", "aria-live": "polite", children: summary }),
+    !(hideOnSinglePage && totalPages <= 1) && /* @__PURE__ */ jsxs("ul", { className: "rds-pagination__pages", children: [
+      /* @__PURE__ */ jsx("li", { children: control(page - 1, "P\xE1gina anterior", arrow(/* @__PURE__ */ jsx(ChevronLeftIcon, {}))) }),
+      pageItems(page, totalPages, siblings, boundaries).map((entry) => /* @__PURE__ */ jsx("li", { children: typeof entry === "string" ? /* @__PURE__ */ jsx("span", { className: "rds-pagination__item rds-pagination__item--ellipsis", "aria-hidden": "true", children: "\u2026" }) : control(entry, `P\xE1gina ${entry}`, entry, entry === page) }, entry)),
+      /* @__PURE__ */ jsx("li", { children: control(page + 1, "Pr\xF3xima p\xE1gina", arrow(/* @__PURE__ */ jsx(ChevronRightIcon, {}))) })
+    ] })
+  ] }));
 }
-const baseBtn = "inline-flex items-center justify-center min-w-9 h-9 px-2 rounded-(--radius-control) text-label transition-colors disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus";
-const Pagination = forwardRef(function Pagination2({
-  page,
-  totalPages,
-  onChange,
-  siblings = 1,
-  boundaries = 1,
-  className = "",
-  hideOnSinglePage = true
-}, ref) {
-  if (hideOnSinglePage && totalPages <= 1) return null;
-  const items = getRange(page, totalPages, siblings, boundaries);
-  const canPrev = page > 1;
-  const canNext = page < totalPages;
-  return /* @__PURE__ */ React.createElement("nav", { ref, role: "navigation", "aria-label": "Pagina\xE7\xE3o", className }, /* @__PURE__ */ React.createElement("ul", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      disabled: !canPrev,
-      onClick: () => canPrev && onChange(page - 1),
-      "aria-label": "P\xE1gina anterior",
-      className: [baseBtn, "text-fg-secondary hover:bg-surface-raised"].join(" ")
-    },
-    /* @__PURE__ */ React.createElement(ChevronLeft, { size: 16 })
-  )), items.map((it, idx) => /* @__PURE__ */ React.createElement("li", { key: `${it}-${idx}` }, typeof it === "string" ? /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center justify-center min-w-9 h-9 text-fg-muted text-label" }, "\u2026") : /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => onChange(it),
-      "aria-current": it === page ? "page" : void 0,
-      className: [
-        baseBtn,
-        it === page ? "bg-brand-primary text-brand-on-primary" : "text-fg-secondary hover:bg-surface-raised"
-      ].join(" ")
-    },
-    it
-  ))), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      disabled: !canNext,
-      onClick: () => canNext && onChange(page + 1),
-      "aria-label": "Pr\xF3xima p\xE1gina",
-      className: [baseBtn, "text-fg-secondary hover:bg-surface-raised"].join(" ")
-    },
-    /* @__PURE__ */ React.createElement(ChevronRight, { size: 16 })
-  ))));
-});
 export {
-  Pagination
+  Pagination,
+  pageItems
 };

package/dist/components/password-input.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ComponentPropsWithRef } from 'react';
+import { FieldTextProps } from './internal/field.js';
+
+interface PasswordInputProps extends FieldTextProps, Omit<ComponentPropsWithRef<'input'>, 'type' | 'children' | 'prefix' | 'size'> {
+    /** current-password to sign in, new-password to create one: the password manager fills or suggests. */
+    autoComplete?: 'current-password' | 'new-password';
+    /** Controlled (Figma: `revealed`): the password shows as text. */
+    revealed?: boolean;
+    /** Uncontrolled: starts shown. */
+    defaultRevealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    /** The eye button's accessible name. It stays the same; aria-pressed says whether it is on. */
+    revealLabel?: string;
+    /** Said to screen readers when the password shows and when it hides again. */
+    revealedMessage?: string;
+    hiddenMessage?: string;
+}
+/**
+ * PasswordInput — Figma [RDS] Forms/PasswordInput. A password field with the eye built in, so the person
+ * can check what they typed. The eye is a toggle button (aria-pressed) and the change is announced.
+ * Same field as the Input (styles: internal/field.css).
+ */
+declare function PasswordInput({ label, labelPosition, hint, error, errorMessage, required, id, disabled, className, style, autoComplete, revealed: revealedProp, defaultRevealed, onRevealedChange, revealLabel, revealedMessage, hiddenMessage, ...input }: PasswordInputProps): react.JSX.Element;
+
+export { PasswordInput, type PasswordInputProps };

package/dist/components/password-input.js

@@ -0,0 +1,112 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { announce } from "./internal/announce.js";
+import { FieldAction, FieldShell, hasContent, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+import { EyeIcon, EyeOffIcon } from "./internal/icons.js";
+function PasswordInput(_a) {
+  var _b = _a, {
+    label,
+    labelPosition,
+    hint,
+    error,
+    errorMessage,
+    required,
+    id,
+    disabled,
+    className,
+    style,
+    autoComplete = "current-password",
+    revealed: revealedProp,
+    defaultRevealed = false,
+    onRevealedChange,
+    revealLabel = "Mostrar senha",
+    revealedMessage = "Senha vis\xEDvel",
+    hiddenMessage = "Senha oculta"
+  } = _b, input = __objRest(_b, [
+    "label",
+    "labelPosition",
+    "hint",
+    "error",
+    "errorMessage",
+    "required",
+    "id",
+    "disabled",
+    "className",
+    "style",
+    "autoComplete",
+    "revealed",
+    "defaultRevealed",
+    "onRevealedChange",
+    "revealLabel",
+    "revealedMessage",
+    "hiddenMessage"
+  ]);
+  warnIfUnlabelled("PasswordInput", label, input["aria-label"], input["aria-labelledby"]);
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error, errorMessage);
+  const [ownRevealed, setOwnRevealed] = useState(defaultRevealed);
+  const revealed = revealedProp != null ? revealedProp : ownRevealed;
+  const floating = labelPosition === "floating" && hasContent(label);
+  function toggle() {
+    const next = !revealed;
+    setOwnRevealed(next);
+    onRevealedChange == null ? void 0 : onRevealedChange(next);
+    announce(next ? revealedMessage : hiddenMessage);
+  }
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
+    {
+      kind: "rds-password-input",
+      controlId,
+      hintId,
+      errorId,
+      label,
+      labelPosition,
+      hint,
+      errorMessage,
+      invalid,
+      required,
+      disabled,
+      boxClassName: "rds-field__box--action",
+      className,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({}, input), {
+            id: controlId,
+            className: "rds-field__control",
+            type: revealed ? "text" : "password",
+            autoComplete,
+            spellCheck: false,
+            autoCapitalize: "none",
+            required,
+            disabled,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": [describedBy, input["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+            placeholder: floating ? " " : input.placeholder
+          })
+        ),
+        /* @__PURE__ */ jsx(
+          FieldAction,
+          {
+            label: revealLabel,
+            "aria-pressed": revealed,
+            "aria-controls": controlId,
+            disabled,
+            icon: revealed ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}),
+            onClick: toggle
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PasswordInput
+};

package/dist/components/phone-input.d.ts

@@ -1,24 +1,28 @@
 import * as react from 'react';
 import { InputHTMLAttributes } from 'react';
 
-interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
+interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size' | 'prefix' | 'type'> {
+    /** The number's label (the Input's). Without it, pass aria-label. */
     label?: string;
+    /** A line under the field (the Input's hint). */
     helper?: string;
+    /** What is wrong with the number (the Input's error message). */
     error?: string;
     required?: boolean;
+    /** Says "(opcional)" after the label. */
     optional?: boolean;
+    /** The number in E.164 (+5511987654321). */
     value?: string;
     defaultValue?: string;
+    /** Called with the number in E.164; empty when only the dial code is left. */
     onChange?: (value: string) => void;
 }
 /**
- * PhoneInput — telefone internacional com seletor de país BUSCÁVEL.
- *
- * Seletor de país = Combobox do DS (busca por nome/código + bandeira), em vez do
- * dropdown nativo do react-international-phone (que não tem busca e estourava a tela).
- * A mecânica de máscara/parse/E.164 vem do hook `usePhoneInput` da lib.
- * Submete E.164 via input hidden (prop `name`); onChange entrega E.164.
+ * PhoneInput — a composition of the Combobox (the country, searchable by name or code) and the Input (Figma [RDS]
+ * Forms/Input, the number, with the dial code as its prefix). The mask, the parsing and E.164 come from
+ * `react-international-phone` (an optional peer, needed only here). Submits E.164 through a hidden input named
+ * `name`; onChange gets E.164 too. Styles: phone-input.css.
  */
-declare function PhoneInput({ label, helper, error, required, optional, value, defaultValue, placeholder, name, onChange, id, }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, helper, error, required, optional, value, defaultValue, placeholder, name, onChange, id, disabled, className, ...rest }: PhoneInputProps): react.JSX.Element;
 
 export { PhoneInput, type PhoneInputProps };

package/dist/components/phone-input.js

@@ -1,8 +1,14 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo, useState } from "react";
 import { usePhoneInput, defaultCountries, parseCountry, FlagImage } from "react-international-phone";
 import { Combobox } from "./combobox.js";
+import { Input } from "./input.js";
 function normalizeToE164(raw) {
   if (!raw) return "";
   const digits = raw.replace(/\D/g, "");
@@ -10,19 +16,36 @@ function normalizeToE164(raw) {
   if (digits.length >= 12) return `+${digits}`;
   return `+55${digits}`;
 }
-function PhoneInput({
-  label,
-  helper,
-  error,
-  required,
-  optional,
-  value,
-  defaultValue = "",
-  placeholder,
-  name,
-  onChange,
-  id
-}) {
+function PhoneInput(_a) {
+  var _b = _a, {
+    label,
+    helper,
+    error,
+    required,
+    optional,
+    value,
+    defaultValue = "",
+    placeholder,
+    name,
+    onChange,
+    id,
+    disabled,
+    className
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "helper",
+    "error",
+    "required",
+    "optional",
+    "value",
+    "defaultValue",
+    "placeholder",
+    "name",
+    "onChange",
+    "id",
+    "disabled",
+    "className"
+  ]);
   const generatedId = useId();
   const inputId = id != null ? id : generatedId;
   const controlled = value !== void 0;
@@ -48,44 +71,51 @@ function PhoneInput({
       const p = parseCountry(c);
       return {
         value: p.iso2,
-        label: p.name,
-        description: `+${p.dialCode}`,
-        icon: /* @__PURE__ */ React.createElement(FlagImage, { iso2: p.iso2, size: "18px" })
+        label: `${p.name} +${p.dialCode}`,
+        icon: /* @__PURE__ */ jsx(FlagImage, { iso2: p.iso2, size: "18px" })
       };
     }),
     []
   );
-  const errorBorder = error ? "border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/20" : "border-stroke-control focus-within:border-stroke-focus focus-within:ring-2 focus-within:ring-stroke-focus/20";
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: inputId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary" }, /* @__PURE__ */ React.createElement("span", null, label), required && /* @__PURE__ */ React.createElement("span", { className: "text-danger", "aria-label": "obrigat\xF3rio" }, "*"), optional && !required && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted font-normal" }, "(opcional)")), /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React.createElement(
-    Combobox,
-    {
-      width: "hug",
-      options: countryOptions,
-      value: country.iso2,
-      onChange: (iso2) => {
-        if (iso2) setCountry(iso2);
-      },
-      placeholder: "Pa\xEDs",
-      "aria-label": "Pa\xEDs",
-      dropdownMinWidth: 272,
-      triggerContent: (sel) => {
-        var _a;
-        return /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center [&_svg]:size-4 [&_img]:rounded-(--radius-sm)" }, (_a = sel == null ? void 0 : sel.icon) != null ? _a : /* @__PURE__ */ React.createElement("span", { className: "text-fg-placeholder" }, "Pa\xEDs"));
+  const labelText = label && optional && !required ? `${label} (opcional)` : label;
+  return /* @__PURE__ */ jsxs("div", { className: ["rds-phone-input", labelText && "rds-phone-input--labelled", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        className: "rds-phone-input__country",
+        "aria-label": "Pa\xEDs",
+        options: countryOptions,
+        value: country.iso2,
+        onValueChange: (iso2) => {
+          if (iso2) setCountry(iso2);
+        },
+        leadingIcon: /* @__PURE__ */ jsx(FlagImage, { iso2: country.iso2, size: "18px" }),
+        placeholder: "Pa\xEDs",
+        emptyMessage: "Nenhum pa\xEDs com esse nome.",
+        disabled
       }
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: ["flex-1 min-w-0 flex items-center rounded-(--radius-control) border bg-surface-default h-10 transition-colors", errorBorder].join(" ") }, /* @__PURE__ */ React.createElement("span", { className: "pl-3 pr-1.5 text-label text-fg-muted select-none shrink-0", "aria-hidden": true }, "+", country.dialCode), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      id: inputId,
-      ref: inputRef,
-      type: "tel",
-      value: inputValue,
-      onChange: handlePhoneValueChange,
-      placeholder,
-      "aria-invalid": error ? true : void 0,
-      className: "flex-1 min-w-0 bg-transparent pr-3 h-full text-label text-fg-primary placeholder:text-fg-placeholder outline-none"
-    }
-  ))), name && /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value: displayValue }), (error || helper) && /* @__PURE__ */ React.createElement("p", { className: ["text-caption", error ? "text-danger-text" : "text-fg-muted"].join(" ") }, error != null ? error : helper));
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      __spreadProps(__spreadValues({}, rest), {
+        className: "rds-phone-input__number",
+        id: inputId,
+        ref: inputRef,
+        label: labelText,
+        prefix: `+${country.dialCode}`,
+        type: "tel",
+        autoComplete: "tel-national",
+        value: inputValue,
+        onChange: handlePhoneValueChange,
+        placeholder,
+        required,
+        disabled,
+        hint: helper,
+        errorMessage: error
+      })
+    ),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: displayValue })
+  ] });
 }
 export {
   PhoneInput

package/dist/components/phone.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type PhonePlatform = 'ios' | 'android';
+interface PhoneProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The screen (Figma: slot `screen`): the browser's useful area, 390 × 700 on ios and 412 × 795 on android (taller
+     * without the browser). It scrolls when the content is taller.
+     */
+    children?: ReactNode;
+    /** The browser's bars (Figma: `browser`). Off, it is a native app: only the status bar and the system bar. */
+    browser?: boolean;
+    /** The address in the browser bar (Figma: `url`). */
+    url?: string;
+    /** ios: an iPhone (390 × 844) with Safari, the address at the bottom; android: 412 × 915 with Chrome, at the top. */
+    platform?: PhonePlatform;
+    /** The time in the status bar. */
+    time?: string;
+}
+/**
+ * Phone — Figma [RDS] External/Phone. A MOCKUP for flows, specs and showrooms: the phone with the browser, to show a
+ * screen the way it looks on the device. The bars are decorative (hidden from screen readers); the screen is live.
+ * Styles: phone.css.
+ */
+declare function Phone({ children, browser, url, platform, time, className, ...rest }: PhoneProps): react.JSX.Element;
+
+export { Phone, type PhonePlatform, type PhoneProps };

package/dist/components/phone.js

@@ -0,0 +1,35 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LockIcon } from "./internal/icons.js";
+function Phone(_a) {
+  var _b = _a, { children, browser = true, url = "rojao.studio", platform = "ios", time = "9:41", className } = _b, rest = __objRest(_b, ["children", "browser", "url", "platform", "time", "className"]);
+  const address = /* @__PURE__ */ jsxs("div", { className: "rds-phone__address", children: [
+    /* @__PURE__ */ jsx(LockIcon, {}),
+    /* @__PURE__ */ jsx("span", { children: url })
+  ] });
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-phone", `rds-phone--${platform}`, className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-phone__device", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-phone__status", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("span", { className: "rds-phone__time", children: time }),
+      platform === "ios" ? /* @__PURE__ */ jsx("span", { className: "rds-phone__island" }) : /* @__PURE__ */ jsx("span", { className: "rds-phone__camera" }),
+      /* @__PURE__ */ jsxs("span", { className: "rds-phone__indicators", children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-phone__signal" }),
+        /* @__PURE__ */ jsx("span", { className: "rds-phone__battery" })
+      ] })
+    ] }),
+    browser && platform === "android" && /* @__PURE__ */ jsxs("div", { className: "rds-phone__browser rds-phone__browser--top", "aria-hidden": "true", children: [
+      address,
+      /* @__PURE__ */ jsx("span", { className: "rds-phone__tabs", children: "1" }),
+      /* @__PURE__ */ jsx("span", { className: "rds-phone__menu" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rds-phone__screen", children }),
+    browser && platform === "ios" && /* @__PURE__ */ jsx("div", { className: "rds-phone__browser rds-phone__browser--bottom", "aria-hidden": "true", children: address }),
+    /* @__PURE__ */ jsx("div", { className: "rds-phone__system", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "rds-phone__home" }) })
+  ] }) }));
+}
+export {
+  Phone
+};

package/dist/components/popover.d.ts

@@ -1,44 +1,33 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-/**
- * Popover — overlay flutuante ancorado num trigger. Base genérica de Menu,
- * HoverCard, custom dropdowns. Não tem opinião sobre conteúdo.
- *
- * Uso:
- *   <Popover
- *     trigger={<Button>Abrir</Button>}
- *     placement="bottom-start"
- *   >
- *     <div className="p-3 bg-surface-default rounded-md shadow-lg">
- *       Conteúdo aqui
- *     </div>
- *   </Popover>
- *
- * Recursos: clique fora fecha, ESC fecha, focus trap opcional, posicionamento
- * com flip automático quando não cabe (top → bottom, etc).
- */
-type PopoverPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+type PopoverAlign = 'start' | 'center' | 'end';
 interface PopoverProps {
-    trigger: ReactNode;
-    children: ReactNode | ((api: {
-        close: () => void;
-    }) => ReactNode);
-    /** Posição preferida. flip automático quando não cabe na viewport. */
-    placement?: PopoverPlacement;
-    /** Distância em px entre trigger e popover. default = 4. */
-    offset?: number;
-    /** Controla externamente. Se omitido, gerencia interno. */
+    /** The button that opens it (a Button or IconButton). It gets aria-expanded and aria-controls. */
+    trigger: ReactElement;
+    /** A short title. It also names the box for screen readers. */
+    title?: ReactNode;
+    /** Without a title, the box's name for screen readers. */
+    'aria-label'?: string;
+    /** The content (Figma: the `content` slot): text, a short list, a small form, a Button. */
+    children: ReactNode;
+    side?: PopoverSide;
+    align?: PopoverAlign;
     open?: boolean;
+    defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Fecha ao clicar fora. default = true. */
-    closeOnOutsideClick?: boolean;
-    /** Fecha ao apertar ESC. default = true. */
-    closeOnEsc?: boolean;
     className?: string;
-    /** Classe CSS do wrapper do trigger. default = "inline-block". */
-    triggerClassName?: string;
 }
-declare function Popover({ trigger, children, placement, offset, open: openProp, onOpenChange, closeOnOutsideClick, closeOnEsc, className, triggerClassName, }: PopoverProps): react.JSX.Element;
+/**
+ * Popover — Figma [RDS] Feedback/Popover. A box that opens next to a button, on click or tap (Radix Popover): more
+ * about an item without leaving the screen. Escape and a click outside close it, and the focus goes back to the
+ * button. A short name for an icon is the Tooltip; something that demands a decision is a Dialog.
+ * Styles: popover.css.
+ */
+declare function Popover({ trigger, title, children, side, align, open, defaultOpen, onOpenChange, className, 'aria-label': ariaLabel, }: PopoverProps): react.JSX.Element;
+/** Wraps an element inside the Popover that closes it when pressed (a "Pronto" Button), with asChild. */
+declare const PopoverClose: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
 
-export { Popover, type PopoverPlacement, type PopoverProps };
+export { Popover, type PopoverAlign, PopoverClose, type PopoverProps, type PopoverSide };