@rojaostudio/ds 1.0.2 → 2.0.0-next.0

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

@@ -1,35 +1,27 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-/**
- * SelectableCard — cartão CLICÁVEL genérico (tile de ação OU escolha).
- *
- * Resolve os "card-as-div" reimplementados como `<button className="rounded-xl border">`:
- * tiles de ação (abrir modal, navegar), cards de escolha, pricing card (com ribbon).
- * Renderiza `<button>` (ação) ou `<a>` (navegação) — semântica correta, foco acessível.
- *
- * Estado `selected` usa destaque NEUTRO (border-focus + surface-raised) — NÃO usa brand,
- * então é seguro no admin (onde cor de marca é proibida) e na vitrine.
- *
- * indicator:
- *   'radio'   — bolinha de seleção (escolha exclusiva)
- *   'check'   — check quando selecionado (multi-seleção/confirmação)
- *   'chevron' — seta de navegação (tile que leva a outra tela)
- *   'none'    — sem indicador (tile de ação puro)
- */
+/** @deprecated Use ChoiceCardProps. */
 interface SelectableCardProps {
     selected?: boolean;
     onClick?: () => void;
-    /** Elemento renderizado: 'button' (ação, default) ou 'a' (navegação). */
+    /** Ignored: the card is a radio now, never a link. */
     as?: 'button' | 'a';
+    /** Ignored: the card is a radio now, never a link. */
     href?: string;
+    /** Ignored: the ChoiceCard row always shows its radio. */
     indicator?: 'radio' | 'check' | 'chevron' | 'none';
-    /** Selo flutuante no topo (ex: "Mais popular" no pricing card). */
+    /** Ignored: the ChoiceCard has no ribbon. */
     ribbon?: ReactNode;
     disabled?: boolean;
     className?: string;
     children: ReactNode;
 }
-declare function SelectableCard({ selected, onClick, as, href, indicator, ribbon, disabled, className, children, }: SelectableCardProps): react.JSX.Element;
+/**
+ * @deprecated Use ChoiceCard (Figma [RDS] Content/ChoiceCard, layout="row"). A thin wrapper over it: `children`
+ * is the label, `onClick` is `onSelect`. It is a native radio now, not a button: `as`, `href`, `indicator` and
+ * `ribbon` are ignored, and a chosen card cannot be un-chosen by clicking it again.
+ */
+declare function SelectableCard({ selected, onClick, disabled, className, children }: SelectableCardProps): react.JSX.Element;
 
 export { SelectableCard, type SelectableCardProps };

package/dist/components/selectable-card.js

@@ -1,33 +1,9 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, ChevronRight } from "lucide-react";
-function SelectableCard({
-  selected = false,
-  onClick,
-  as = "button",
-  href,
-  indicator = "none",
-  ribbon,
-  disabled = false,
-  className = "",
-  children
-}) {
-  const base = "relative w-full flex items-center gap-4 px-4 py-4 rounded-(--radius-card) border text-left transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus";
-  const state = selected ? "border-2 border-stroke-focus bg-surface-raised" : "border border-stroke-default bg-surface-default hover:border-stroke-strong";
-  const disabledCls = disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "cursor-pointer";
-  const cls = [base, state, disabledCls, className].filter(Boolean).join(" ");
-  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    ribbon && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: ribbon }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children }),
-    indicator === "radio" && /* @__PURE__ */ jsx("span", { className: `shrink-0 size-4 rounded-full border-2 flex items-center justify-center ${selected ? "border-stroke-focus" : "border-stroke-strong"}`, children: selected && /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-stroke-focus" }) }),
-    indicator === "check" && selected && /* @__PURE__ */ jsx(Check, { className: "shrink-0 size-4 text-fg-primary", strokeWidth: 2.5 }),
-    indicator === "chevron" && /* @__PURE__ */ jsx(ChevronRight, { className: "shrink-0 size-4 text-fg-muted", strokeWidth: 2 })
-  ] });
-  if (as === "a") {
-    return /* @__PURE__ */ jsx("a", { href, className: cls, "aria-disabled": disabled || void 0, "aria-current": selected || void 0, children: inner });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick, disabled, "aria-pressed": selected, className: cls, children: inner });
+import { jsx } from "react/jsx-runtime";
+import { ChoiceCard } from "./choice-card.js";
+function SelectableCard({ selected = false, onClick, disabled, className, children }) {
+  return /* @__PURE__ */ jsx(ChoiceCard, { layout: "row", selected, onSelect: onClick, disabled, className, children });
 }
 export {
   SelectableCard

package/dist/components/separator.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    /** horizontal between blocks; vertical between items on the same line. */
+    orientation?: SeparatorOrientation;
+    /**
+     * true (default): only visual, hidden from screen readers.
+     * false: it separates sections, announced as role="separator".
+     */
+    decorative?: boolean;
+}
+/**
+ * Separator — Figma [RDS] Content/Separator. A thin line between groups of content. Prefer
+ * space: use the line only when space alone is not enough. Styles: separator.css.
+ */
+declare function Separator({ orientation, decorative, className, ...rest }: SeparatorProps): react.JSX.Element;
+
+export { Separator, type SeparatorOrientation, type SeparatorProps };

package/dist/components/separator.js

@@ -0,0 +1,19 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+function Separator(_a) {
+  var _b = _a, { orientation = "horizontal", decorative = true, className } = _b, rest = __objRest(_b, ["orientation", "decorative", "className"]);
+  const semantics = decorative ? { role: "none", "aria-hidden": true } : { role: "separator", "aria-orientation": orientation === "vertical" ? "vertical" : void 0 };
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({}, semantics), rest), {
+      className: ["rds-separator", `rds-separator--${orientation}`, className].filter(Boolean).join(" ")
+    })
+  );
+}
+export {
+  Separator
+};

package/dist/components/setting-row.d.ts

@@ -2,32 +2,28 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
- * SettingRow — uma linha de configuração: título + texto de apoio à ESQUERDA,
- * controle à DIREITA. Padrão "Settings" (rows com divisor, no lugar de card-por-item).
- * Empilha no mobile (label em cima, controle embaixo). Os divisores entre rows são
- * aplicados pelo <SettingsList> que as agrupa — a row nunca desenha a própria borda.
+ * SettingRow — deprecated: a thin wrapper over the Item (Figma [RDS] Content/Item), kept because SettingsList is
+ * documented as its container and the products still compose it. New code uses Item (`title`, `description`,
+ * `media`, `action`).
  *
- * controlWidth:
- *   'auto' — controle estreito encostado à direita (toggle, pill, dropdown curto). DEFAULT.
- *   'fill' — input/select que ocupa uma coluna de largura previsível (até ~20rem).
- *   'full' — controle LARGO (fileira de <ChoicePreviewCard>): largura total, sempre abaixo do label.
- *
- * a11y: passe `htmlFor` quando o controle for um input/toggle único — o label vira
- * <label> associado (sem isso, leitores de tela não associam rótulo↔controle).
+ * label → title (a <label> when `htmlFor` is given), icon → media, control → action. controlWidth='full' puts the
+ * control under the row; 'fill' and `align` no longer change anything.
  */
 interface SettingRowProps {
     label: ReactNode;
     description?: ReactNode;
-    /** Ícone opcional à esquerda do label. */
+    /** Optional icon before the label. */
     icon?: ReactNode;
-    /** id do controle — associa o label (htmlFor) pra leitores de tela. */
+    /** The control's id: the label becomes a <label for> so screen readers tie them together. */
     htmlFor?: string;
+    /** Only 'full' still has an effect: the control goes under the row, across its width. */
     controlWidth?: 'auto' | 'fill' | 'full';
-    /** Alinhamento vertical do controle vs. label. 'start' p/ textarea/multilinha. */
+    /** Kept for compatibility; it no longer changes anything. */
     align?: 'center' | 'start';
     control: ReactNode;
     className?: string;
 }
-declare function SettingRow({ label, description, icon, htmlFor, controlWidth, align, control, className, }: SettingRowProps): react.JSX.Element;
+/** @deprecated Use Item. */
+declare function SettingRow({ label, description, icon, htmlFor, controlWidth, control, className }: SettingRowProps): react.JSX.Element;
 
 export { SettingRow, type SettingRowProps };

package/dist/components/setting-row.js

@@ -1,28 +1,15 @@
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function SettingRow({
-  label,
-  description,
-  icon,
-  htmlFor,
-  controlWidth = "auto",
-  align = "center",
-  control,
-  className = ""
-}) {
-  const cols = controlWidth === "full" ? "" : controlWidth === "fill" ? "sm:grid-cols-[minmax(0,1fr)_minmax(0,20rem)]" : "sm:grid-cols-[1fr_auto]";
-  const alignCls = align === "start" ? "sm:items-start" : "sm:items-center";
-  const LabelTag = htmlFor ? "label" : "div";
-  return /* @__PURE__ */ jsxs("div", { className: ["grid grid-cols-1 gap-x-6 gap-y-3 py-4", cols, alignCls, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 min-w-0", children: [
-      icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 text-fg-muted mt-0.5", children: icon }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx(LabelTag, { htmlFor, className: "block text-sm font-medium text-fg-primary", children: label }),
-        description && /* @__PURE__ */ jsx("div", { className: "text-sm text-fg-muted mt-0.5 leading-snug", children: description })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: controlWidth === "auto" ? "sm:justify-self-end" : "", children: control })
-  ] });
+import { Item } from "./item.js";
+function SettingRow({ label, description, icon, htmlFor, controlWidth = "auto", control, className }) {
+  const title = htmlFor ? /* @__PURE__ */ jsx("label", { htmlFor, children: label }) : label;
+  if (controlWidth === "full") {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      /* @__PURE__ */ jsx(Item, { title, description, media: icon }),
+      /* @__PURE__ */ jsx("div", { children: control })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Item, { title, description, media: icon, action: control, className });
 }
 export {
   SettingRow

package/dist/components/settings-list.d.ts

@@ -1,25 +1,23 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-/**
- * SettingsList — agrupa <SettingRow> num bloco com divisores entre elas. Substitui o
- * boilerplate repetido `Card > CardBody noPadding > div.divide-y` espalhado pelas telas.
- *
- * O título do grupo é simples (sem número/eyebrow) — o padrão "Settings" não numera
- * seções (são ajustes paralelos, não etapas). Divisor = `stroke-default` (visível, não o
- * `stroke-subtle` quase invisível do Untitled UI) — acessibilidade > estética de Figma.
- */
 interface SettingsListProps {
-    /** Título simples do grupo. Omita se o grupo não tem cabeçalho. */
+    /** The group's title (an h2). Leave it out when the group has no header. */
     title?: string;
     description?: string;
-    /** Ação à direita do título (delega ao SectionHeader). */
+    /** One action on the right of the title (the PageHeader's actions). */
     action?: ReactNode;
-    /** Moldura (card) em volta. Default true; false = lista solta. */
+    /** A Card around the rows. Default true; false leaves the rows loose. */
     framed?: boolean;
+    /** The rows: Items (or the deprecated SettingRows). */
     children: ReactNode;
     className?: string;
 }
-declare function SettingsList({ title, description, action, framed, children, className, }: SettingsListProps): react.JSX.Element;
+/**
+ * SettingsList — a composition of the PageHeader (h2), the Card and the Items (Figma [RDS] Content/Item): a group
+ * of settings, one per row, a line between rows. Settings are parallel, so the title has no number. Styles:
+ * settings-list.css.
+ */
+declare function SettingsList({ title, description, action, framed, children, className }: SettingsListProps): react.JSX.Element;
 
 export { SettingsList, type SettingsListProps };

package/dist/components/settings-list.js

@@ -1,24 +1,12 @@
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { SectionHeader } from "./section-header.js";
-function SettingsList({
-  title,
-  description,
-  action,
-  framed = true,
-  children,
-  className = ""
-}) {
-  const list = /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: framed ? "rounded-(--radius-card) border border-stroke-default bg-surface-default px-4 [&>*]:border-t [&>*]:border-stroke-default [&>*:first-child]:border-t-0" : "[&>*]:border-t [&>*]:border-stroke-default [&>*:first-child]:border-t-0",
-      children
-    }
-  );
-  return /* @__PURE__ */ jsxs("section", { className: ["space-y-3", className].filter(Boolean).join(" "), children: [
-    title && /* @__PURE__ */ jsx(SectionHeader, { title, description, action }),
-    list
+import { Card } from "./card.js";
+import { PageHeader } from "./page-header.js";
+function SettingsList({ title, description, action, framed = true, children, className }) {
+  const rows = /* @__PURE__ */ jsx("div", { className: "rds-settings-list__rows", children });
+  return /* @__PURE__ */ jsxs("section", { className: ["rds-settings-list", className].filter(Boolean).join(" "), children: [
+    title && /* @__PURE__ */ jsx(PageHeader, { titleAs: "h2", title, description, actions: action }),
+    framed ? /* @__PURE__ */ jsx(Card, { as: "div", className: "rds-settings-list__frame", children: rows }) : rows
   ] });
 }
 export {

package/dist/components/sheet.d.ts

@@ -0,0 +1,21 @@
+import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
+import * as react from 'react';
+import { ModalProps } from './internal/modal.js';
+
+type SheetSide = 'right' | 'left';
+interface SheetProps extends ModalProps {
+    /** right for details and filters; left for navigation (Figma: `side`). */
+    side?: SheetSide;
+}
+/**
+ * Sheet — Figma [RDS] Overlays/Sheet. A panel that comes in from the side, over the screen (Radix Dialog):
+ * filters, an item's details, a long form. role="dialog", aria-modal, named by the title; the focus stays inside
+ * and goes back to what opened it. Escape, the × and a click on the veil close it, and the page behind doesn't
+ * scroll. In 1.x this was the Drawer: the Drawer is now the one that comes up from the bottom.
+ * Styles: internal/modal.css and sheet.css.
+ */
+declare function Sheet({ side, ...props }: SheetProps): react.JSX.Element;
+/** Wraps an element inside the Sheet that closes it when pressed, with asChild. */
+declare const SheetClose: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Sheet, SheetClose, type SheetProps, type SheetSide };

package/dist/components/sheet.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { ModalClose, ModalShell } from "./internal/modal.js";
+function Sheet(_a) {
+  var _b = _a, { side = "right" } = _b, props = __objRest(_b, ["side"]);
+  return /* @__PURE__ */ jsx(ModalShell, __spreadValues({ prefix: "rds-sheet", modifiers: [`rds-sheet--${side}`] }, props));
+}
+const SheetClose = ModalClose;
+export {
+  Sheet,
+  SheetClose
+};

package/dist/components/sidebar.d.ts

@@ -0,0 +1,79 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, MouseEventHandler } from 'react';
+
+type SidebarTone = 'light' | 'dark';
+type SidebarHeader = 'mark' | 'logo';
+interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * mark (default): the brand's square mark and the module's name. logo: the product's official logo, given in
+     * `logo`. The DS carries no client logo: both come in through slots.
+     */
+    header?: SidebarHeader;
+    /** The product's logo, for header="logo" (Figma: `logo`). Give it its accessible name (an <img alt>, an svg title). */
+    logo?: ReactNode;
+    /** The brand mark, for header="mark". By default a brand Avatar with the module's first letter. */
+    mark?: ReactNode;
+    /** The module's name beside the mark (Figma: `module`). Collapsed, it stays for screen readers. */
+    module?: string;
+    /** Who is signed in, at the foot (Figma: `user`). Collapsed, it stays for screen readers. */
+    user?: ReactNode;
+    /** 64 wide with only the icons, for a tablet; each entry keeps its name and shows it in a Tooltip. */
+    collapsed?: boolean;
+    /**
+     * light (default) or dark (colors/primary; the active entry stays the light pill). dark is deprecated in the
+     * Figma since 27/09/2026: for the brand colour, put the Sidebar in a brand-mode scope and keep light.
+     */
+    tone?: SidebarTone;
+    /** The entries (Figma: the `items` slot): SidebarItem, SidebarSection, SidebarSeparator. */
+    children: ReactNode;
+    /** The foot, under the user: usually the "Sair" SidebarItem. */
+    footer?: ReactNode;
+}
+/**
+ * Sidebar — Figma [RDS] Navigation/Sidebar. The product's main navigation, fixed on the left: a <nav> named
+ * "Navegação principal" (override with aria-label) with a list; the current entry has aria-current="page".
+ * Styles: sidebar.css.
+ */
+declare function Sidebar({ header, logo, mark, module, user, collapsed, tone, children, footer, className, ...rest }: SidebarProps): react.JSX.Element;
+interface SidebarItemProps {
+    /**
+     * The entry's name (Figma: `label`). Collapsed, it stays as the accessible name and shows in a Tooltip. With
+     * `asChild`, a single link element (an `<a>`, a framework `Link`) whose text is the name.
+     */
+    children: ReactNode;
+    /** The icon (20). Decorative: the name says what the entry is. */
+    icon: ReactNode;
+    /** A link: where the entry leads. Without `href` nor `asChild`, the entry is a button (Sair). */
+    href?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** The current page (Figma: `state=active`): aria-current="page". Only one at a time. */
+    active?: boolean;
+    /** A number on the right, such as pending items (Figma: `showCount` + `count`). Hidden when collapsed. */
+    count?: number | string;
+    /** Render the single child element (a framework `Link`) as the entry, with the entry's classes and content. */
+    asChild?: boolean;
+}
+/** One entry (Figma: .sidebar/item): 44 tall, icon of 20. */
+declare function SidebarItem({ children, icon, href, onClick, active, count, asChild }: SidebarItemProps): react.JSX.Element;
+interface SidebarSectionProps {
+    /** The group's name ("Atendimento") (Figma: .sidebar/section `label`). */
+    label: string;
+    /** The group's SidebarItems. */
+    children: ReactNode;
+    /** The pending items of the group, shown while it is closed (Figma: `showCount` + `count`). */
+    count?: number | string;
+    /** Open (controlled). */
+    open?: boolean;
+    /** Open at first (uncontrolled). Default true. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A group of entries under a label that opens and closes it (Figma: .sidebar/section): a button with
+ * aria-expanded. Collapsed, the label leaves the screen but still names the group, and its entries stay visible.
+ */
+declare function SidebarSection({ label, children, count, open: openProp, defaultOpen, onOpenChange }: SidebarSectionProps): react.JSX.Element;
+/** The line between groups of entries. */
+declare function SidebarSeparator(): react.JSX.Element;
+
+export { Sidebar, type SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarSeparator, type SidebarTone };

package/dist/components/sidebar.js

@@ -0,0 +1,111 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  useContext,
+  useId,
+  useState
+} from "react";
+import { Avatar } from "./avatar.js";
+import { ChevronDownIcon } from "./internal/icons.js";
+import { Separator } from "./separator.js";
+import { Tooltip } from "./tooltip.js";
+const SidebarContext = createContext({ collapsed: false });
+function Sidebar(_a) {
+  var _b = _a, {
+    header = "mark",
+    logo,
+    mark,
+    module,
+    user,
+    collapsed = false,
+    tone = "light",
+    children,
+    footer,
+    className
+  } = _b, rest = __objRest(_b, [
+    "header",
+    "logo",
+    "mark",
+    "module",
+    "user",
+    "collapsed",
+    "tone",
+    "children",
+    "footer",
+    "className"
+  ]);
+  const hideWhenCollapsed = (on) => collapsed ? "rds-visually-hidden" : on;
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsxs(
+    "nav",
+    __spreadProps(__spreadValues({
+      "aria-label": "Navega\xE7\xE3o principal"
+    }, rest), {
+      className: ["rds-sidebar", tone === "dark" && "rds-sidebar--dark", collapsed && "rds-sidebar--collapsed", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "rds-sidebar__header", children: header === "logo" ? /* @__PURE__ */ jsx("span", { className: "rds-sidebar__logo", children: logo }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-sidebar__mark", "aria-hidden": "true", children: mark != null ? mark : /* @__PURE__ */ jsx(Avatar, { type: "brand", size: "sm", fallbackText: module == null ? void 0 : module.charAt(0).toUpperCase() }) }),
+          module && /* @__PURE__ */ jsx("span", { className: hideWhenCollapsed("rds-sidebar__module"), children: module })
+        ] }) }),
+        /* @__PURE__ */ jsx("ul", { className: "rds-sidebar__items", children }),
+        (user || footer) && /* @__PURE__ */ jsxs("div", { className: "rds-sidebar__account", children: [
+          user && /* @__PURE__ */ jsx("p", { className: hideWhenCollapsed("rds-sidebar__user"), children: user }),
+          footer && /* @__PURE__ */ jsx("ul", { className: "rds-sidebar__items", children: footer })
+        ] })
+      ]
+    })
+  ) });
+}
+function SidebarItem({ children, icon, href, onClick, active, count, asChild }) {
+  const { collapsed } = useContext(SidebarContext);
+  const link = asChild && isValidElement(children) ? children : null;
+  const label = link ? link.props.children : children;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-sidebar__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: collapsed ? "rds-visually-hidden" : "rds-sidebar__label", children: label }),
+    count !== void 0 && !collapsed && /* @__PURE__ */ jsx("span", { className: "rds-sidebar__count", children: count })
+  ] });
+  const common = { "aria-current": active ? "page" : void 0, onClick };
+  const entry = link ? cloneElement(link, __spreadProps(__spreadValues({}, common), {
+    className: ["rds-sidebar__item", link.props.className].filter(Boolean).join(" "),
+    children: content
+  })) : href ? /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, common), { className: "rds-sidebar__item", href, children: content })) : /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({}, common), { type: "button", className: "rds-sidebar__item", children: content }));
+  return /* @__PURE__ */ jsx("li", { children: collapsed ? /* @__PURE__ */ jsx(Tooltip, { text: label, side: "right", children: entry }) : entry });
+}
+function SidebarSection({ label, children, count, open: openProp, defaultOpen = true, onOpenChange }) {
+  const { collapsed } = useContext(SidebarContext);
+  const [openState, setOpenState] = useState(defaultOpen);
+  const open = openProp != null ? openProp : openState;
+  const id = useId();
+  const toggle = () => {
+    setOpenState(!open);
+    onOpenChange == null ? void 0 : onOpenChange(!open);
+  };
+  if (collapsed) {
+    return /* @__PURE__ */ jsx("li", { className: "rds-sidebar__section", children: /* @__PURE__ */ jsx("ul", { className: "rds-sidebar__items", "aria-label": label, children }) });
+  }
+  return /* @__PURE__ */ jsxs("li", { className: "rds-sidebar__section", children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", className: "rds-sidebar__section-toggle", "aria-expanded": open, "aria-controls": id, onClick: toggle, children: [
+      /* @__PURE__ */ jsx("span", { className: "rds-sidebar__section-label", children: label }),
+      count !== void 0 && !open && /* @__PURE__ */ jsx("span", { className: "rds-sidebar__section-count", children: count }),
+      /* @__PURE__ */ jsx("span", { className: "rds-sidebar__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { id, className: "rds-sidebar__items", hidden: !open, children })
+  ] });
+}
+function SidebarSeparator() {
+  return /* @__PURE__ */ jsx("li", { className: "rds-sidebar__separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Separator, {}) });
+}
+export {
+  Sidebar,
+  SidebarItem,
+  SidebarSection,
+  SidebarSeparator
+};

package/dist/components/skeleton.d.ts

@@ -1,24 +1,18 @@
 import * as react from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
 
-declare const SKELETON_VARIANTS: {
-    readonly text: "h-4 w-full";
-    readonly title: "h-6 w-3/5";
-    readonly avatar: "size-10 rounded-full";
-    readonly circle: "size-12 rounded-full";
-    readonly button: "h-10 w-24 rounded-(--radius-card)";
-    readonly card: "h-32 w-full rounded-(--radius-card)";
-    readonly line: "h-3 w-full";
-};
-type SkeletonVariant = keyof typeof SKELETON_VARIANTS;
-interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: SkeletonVariant;
-    /** Renderiza N skeletons stackados (útil pra simular lista). */
-    count?: number;
-    /** Gap entre skeletons quando count > 1. default = 'sm'. */
-    gap?: 'sm' | 'md' | 'lg';
-    /** Sem animação pulse (placeholder estático). */
-    noPulse?: boolean;
+type SkeletonShape = 'line' | 'circle' | 'rect';
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** line for text (16 tall), circle for an avatar (40), rect for an image or a card (120 tall). */
+    shape?: SkeletonShape;
+    /** The size of what is coming (a number is px). line and rect fill the width by default. */
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
 }
-declare function Skeleton({ variant, count, gap, noPulse, className, ...props }: SkeletonProps): react.JSX.Element;
+/**
+ * Skeleton — Figma [RDS] Content/Skeleton. The place of content while it loads. Always aria-hidden: put
+ * aria-busy="true" on the loading region and a "Carregando…" text only for screen readers. Styles: skeleton.css.
+ */
+declare function Skeleton({ shape, width, height, className, style, ...rest }: SkeletonProps): react.JSX.Element;
 
-export { Skeleton, type SkeletonProps, type SkeletonVariant };
+export { Skeleton, type SkeletonProps, type SkeletonShape };

package/dist/components/skeleton.js

@@ -4,46 +4,17 @@ import {
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { jsx } from "react/jsx-runtime";
-const SKELETON_VARIANTS = {
-  text: "h-4 w-full",
-  title: "h-6 w-3/5",
-  avatar: "size-10 rounded-full",
-  circle: "size-12 rounded-full",
-  button: "h-10 w-24 rounded-(--radius-card)",
-  card: "h-32 w-full rounded-(--radius-card)",
-  line: "h-3 w-full"
-};
-const GAP = { sm: "gap-2", md: "gap-3", lg: "gap-4" };
 function Skeleton(_a) {
-  var _b = _a, {
-    variant = "text",
-    count = 1,
-    gap = "sm",
-    noPulse = false,
-    className = ""
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "count",
-    "gap",
-    "noPulse",
-    "className"
-  ]);
-  const classes = [
-    noPulse ? "" : "animate-pulse",
-    "rounded bg-stroke-default/50",
-    SKELETON_VARIANTS[variant],
-    className
-  ].filter(Boolean).join(" ");
-  if (count === 1) return /* @__PURE__ */ jsx("div", __spreadValues({ className: classes }, props));
-  return /* @__PURE__ */ jsx("div", { className: ["flex flex-col", GAP[gap]].join(" "), children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
+  var _b = _a, { shape = "line", width, height, className, style } = _b, rest = __objRest(_b, ["shape", "width", "height", "className", "style"]);
+  return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
-      className: classes
-    }, i === 0 ? props : {}), {
-      style: variant === "text" && i === count - 1 ? { width: "70%" } : void 0
-    }),
-    i
-  )) });
+      "aria-hidden": "true"
+    }, rest), {
+      className: ["rds-skeleton", `rds-skeleton--${shape}`, className].filter(Boolean).join(" "),
+      style: __spreadValues({ width, height }, style)
+    })
+  );
 }
 export {
   Skeleton