@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/toggle-card-compact.js

@@ -1,7 +1,11 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Pencil } from "lucide-react";
+import { IconButton } from "./icon-button.js";
+import { PencilIcon } from "./internal/icons.js";
+import { Item } from "./item.js";
+import { Switch } from "./switch.js";
+import { Tooltip } from "./tooltip.js";
 function ToggleCardCompact({
   icon,
   label,
@@ -11,94 +15,23 @@ function ToggleCardCompact({
   onCheckedChange,
   onEdit,
   editLabel = "Editar",
-  name
+  name,
+  disabled,
+  className
 }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    Item,
     {
-      className: [
-        "rounded-(--radius-card) overflow-hidden transition-colors border",
-        checked ? "[border-color:var(--section-card-border-active)]" : "[border-color:var(--section-card-border)]"
-      ].join(" "),
-      children: [
+      variant: "outline",
+      className: ["rds-toggle-card-compact", className].filter(Boolean).join(" "),
+      media: icon,
+      title: label,
+      description: (checked ? summary : description) || void 0,
+      action: /* @__PURE__ */ jsxs("span", { className: "rds-toggle-card-compact__actions", children: [
         name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "on" : "" }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: [
-              "flex items-center gap-3 px-4 py-3 transition-colors",
-              checked ? "[background:var(--section-card-header-bg-active)]" : ""
-            ].join(" "),
-            children: [
-              icon && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: [
-                    "shrink-0",
-                    checked ? "[color:var(--section-card-label-active)] opacity-80" : "text-(--text-disabled)"
-                  ].join(" "),
-                  children: icon
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: [
-                      "text-caption font-semibold uppercase tracking-wide",
-                      checked ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
-                    ].join(" "),
-                    children: label
-                  }
-                ),
-                (checked ? summary : description) && /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: [
-                      "text-caption leading-snug mt-0.5 truncate",
-                      checked ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
-                    ].join(" "),
-                    children: checked ? summary : description
-                  }
-                )
-              ] }),
-              checked && onEdit && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onEdit,
-                  "aria-label": editLabel,
-                  className: "shrink-0 [color:var(--section-card-label-active)] opacity-70 hover:opacity-100 transition-opacity p-1 -m-1 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
-                  children: /* @__PURE__ */ jsx(Pencil, { size: 14 })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  role: "switch",
-                  "aria-checked": checked,
-                  "aria-label": label,
-                  onClick: () => onCheckedChange == null ? void 0 : onCheckedChange(!checked),
-                  className: [
-                    "relative inline-flex shrink-0 h-5 w-9 rounded-full transition-colors focus:outline-none focus-visible:ring-2",
-                    checked ? "bg-(--surface-default)/30 focus-visible:ring-white/40" : "bg-(--surface-raised) border border-stroke-default focus-visible:ring-stroke-focus/30"
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: [
-                        "absolute top-0.5 inline-block h-4 w-4 rounded-full bg-(--surface-default) shadow-sm transition-transform",
-                        checked ? "translate-x-[18px]" : "translate-x-0.5"
-                      ].join(" ")
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      ]
+        checked && onEdit && /* @__PURE__ */ jsx(Tooltip, { text: editLabel, children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(PencilIcon, {}), label: editLabel, variant: "ghost", tone: "neutral", onClick: onEdit, disabled }) }),
+        /* @__PURE__ */ jsx(Switch, { "aria-label": label, checked, onCheckedChange, disabled })
+      ] })
     }
   );
 }

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

@@ -2,14 +2,23 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 interface ToggleCardProps {
+    /** The setting it turns on (the Switch's label). */
     label: string;
+    /** A line under the label (the Switch's hint). */
     description?: string;
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
-    /** Hidden input name — when present, renders a hidden input so the value submits with native forms. */
+    /** Submits 'on' (or '') under this name with a native form, through a hidden input. */
     name?: string;
+    /** The setting's options, shown under it while it is on. */
     children?: ReactNode;
+    disabled?: boolean;
+    className?: string;
 }
-declare function ToggleCard({ label, description, checked, onCheckedChange, name, children, }: ToggleCardProps): react.JSX.Element;
+/**
+ * ToggleCard — a composition of the Card and the Switch (Figma [RDS] Forms/Switch): a setting that, when on, opens
+ * its own options below it. Styles: toggle-card.css.
+ */
+declare function ToggleCard({ label, description, checked, onCheckedChange, name, children, disabled, className }: ToggleCardProps): react.JSX.Element;
 
 export { ToggleCard, type ToggleCardProps };

package/dist/components/toggle-card.js

@@ -1,83 +1,14 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function ToggleCard({
-  label,
-  description,
-  checked,
-  onCheckedChange,
-  name,
-  children
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: [
-        "rounded-(--radius-card) overflow-hidden transition-colors border",
-        checked ? "[border-color:var(--section-card-border-active)]" : "[border-color:var(--section-card-border)]"
-      ].join(" "),
-      children: [
-        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "on" : "" }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "switch",
-            "aria-checked": checked,
-            onClick: () => onCheckedChange(!checked),
-            className: [
-              "w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors",
-              checked ? "[background:var(--section-card-header-bg-active)]" : "hover:[background:var(--section-card-header-bg-hover)]"
-            ].join(" "),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: [
-                      "text-caption font-semibold uppercase tracking-wide",
-                      checked ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
-                    ].join(" "),
-                    children: label
-                  }
-                ),
-                description && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: [
-                      "text-caption leading-snug",
-                      checked ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
-                    ].join(" "),
-                    children: description
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  className: [
-                    "relative inline-flex shrink-0 h-5 w-9 rounded-full transition-colors",
-                    checked ? "bg-(--surface-default)/30" : "bg-(--surface-raised) border border-stroke-default"
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: [
-                        "absolute top-0.5 inline-block h-4 w-4 rounded-full bg-(--surface-default) shadow-sm transition-transform",
-                        checked ? "translate-x-[18px]" : "translate-x-0.5"
-                      ].join(" ")
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        checked && children && /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-4 space-y-4 [border-top:1px_solid_var(--section-card-divider)] [background:var(--surface-default)]", children })
-      ]
-    }
-  );
+import { Card } from "./card.js";
+import { Switch } from "./switch.js";
+function ToggleCard({ label, description, checked, onCheckedChange, name, children, disabled, className }) {
+  return /* @__PURE__ */ jsxs(Card, { as: "div", className: ["rds-toggle-card", className].filter(Boolean).join(" "), children: [
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "on" : "" }),
+    /* @__PURE__ */ jsx("div", { className: "rds-toggle-card__header", children: /* @__PURE__ */ jsx(Switch, { checked, onCheckedChange, hint: description, disabled, children: label }) }),
+    checked && children && /* @__PURE__ */ jsx("div", { className: "rds-toggle-card__content", children })
+  ] });
 }
 export {
   ToggleCard

package/dist/components/toggle-group.d.ts

@@ -1,67 +1,29 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { ToggleVariant } from './internal/toggle.js';
 
+type ToggleGroupProps = ComponentPropsWithRef<typeof ToggleGroupPrimitive.Root> & {
+    /** One emphasis for every item (the Toggle `style`; ghost and outline are not mixed in a group). */
+    variant?: ToggleVariant;
+    /** Required: what the group chooses ("Vista", "Estilo do texto"). */
+    'aria-label': string;
+};
 /**
- * ToggleGroup — botões segmentados (M3 segmented buttons / shadcn ToggleGroup).
- *
- * Uso (single):
- *   <ToggleGroup value={view} onChange={setView} options={[
- *     { value: 'day',   label: 'Dia' },
- *     { value: 'week',  label: 'Semana' },
- *     { value: 'month', label: 'Mês' },
- *   ]} />
- *
- * Uso (multi):
- *   <ToggleGroup type="multi" value={selected} onChange={setSelected} options={[
- *     { value: 'bold', icon: <Bold /> },
- *     { value: 'italic', icon: <Italic /> },
- *   ]} />
+ * ToggleGroup — Figma [RDS] Actions/ToggleGroup. Toggles side by side (Figma: slot `items`).
+ * `type="single"`: only one on (Lista or Grade). `type="multiple"`: each one on its own (bold, italic).
+ * Tab enters the group, the arrow keys move between items. Styles: toggle-group.css and toggle.css.
  */
-interface ToggleOption<T extends string = string> {
-    value: T;
-    label?: string;
+declare function ToggleGroup({ variant, className, ...rest }: ToggleGroupProps): react.JSX.Element;
+interface ToggleGroupItemProps extends Omit<ComponentPropsWithRef<typeof ToggleGroupPrimitive.Item>, 'children' | 'disabled'> {
+    /** The option's name (the Toggle `label`). Without it, pass aria-label. */
+    children?: ReactNode;
+    /** Icon before the text. Decorative, rendered with aria-hidden. */
     icon?: ReactNode;
-    /** Estilos inline aplicados ao botão — use para fontFamily por opção, etc. */
-    style?: React.CSSProperties;
+    /** Rendered as aria-disabled="true", as in the Toggle. */
     disabled?: boolean;
 }
-interface ToggleGroupSingleProps<T extends string> {
-    type?: 'single';
-    /** Label renderada acima do controle (mesmo padrão do Input do DS). */
-    label?: ReactNode;
-    value: T | null;
-    /** null quando allowDeselect=true e o item ativo é clicado novamente. */
-    onChange: (value: T | null) => void;
-    options: ToggleOption<T>[];
-    size?: 'sm' | 'md' | 'lg';
-    /** Cor do item selecionado. 'brand' (default) pinta com a cor da marca; 'neutral'
-     *  usa tinta neutra de alto contraste (surface-invert) — para controles utilitários
-     *  que não devem vestir a paleta da loja. */
-    selectedTone?: 'brand' | 'neutral';
-    /** Se permite desselecionar o ativo (clica de novo = null). default = false. */
-    allowDeselect?: boolean;
-    /** Botões crescem para preencher toda a largura do container. */
-    stretch?: boolean;
-    className?: string;
-    'aria-label'?: string;
-}
-interface ToggleGroupMultiProps<T extends string> {
-    type: 'multi';
-    /** Label renderada acima do controle (mesmo padrão do Input do DS). */
-    label?: ReactNode;
-    value: T[];
-    onChange: (value: T[]) => void;
-    options: ToggleOption<T>[];
-    size?: 'sm' | 'md' | 'lg';
-    /** Cor do item selecionado. 'brand' (default) pinta com a cor da marca; 'neutral'
-     *  usa tinta neutra de alto contraste (surface-invert). */
-    selectedTone?: 'brand' | 'neutral';
-    /** Botões crescem para preencher toda a largura do container. */
-    stretch?: boolean;
-    className?: string;
-    'aria-label'?: string;
-}
-type ToggleGroupProps<T extends string = string> = ToggleGroupSingleProps<T> | ToggleGroupMultiProps<T>;
-declare function ToggleGroup<T extends string = string>(props: ToggleGroupProps<T>): react.JSX.Element;
+/** One option of a ToggleGroup: a Toggle that the group turns on and off. */
+declare function ToggleGroupItem({ icon, children, disabled, className, onClick, ...rest }: ToggleGroupItemProps): react.JSX.Element;
 
-export { ToggleGroup, type ToggleGroupProps, type ToggleOption };
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps };

package/dist/components/toggle-group.js

@@ -1,86 +1,37 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-const SIZE_CLASS = {
-  sm: "h-control-sm text-caption px-2.5 gap-1",
-  md: "h-control-md text-label px-3 gap-1.5",
-  lg: "h-control-lg text-label px-4 gap-2"
-};
-function ToggleGroup(props) {
-  var _a, _b, _c, _d;
-  const options = props.options;
-  const size = (_a = props.size) != null ? _a : "md";
-  const className = (_b = props.className) != null ? _b : "";
-  const stretch = (_c = props.stretch) != null ? _c : false;
-  const label = props.label;
-  const selectedTone = (_d = props.selectedTone) != null ? _d : "brand";
-  const isMulti = props.type === "multi";
-  const groupId = useId();
-  function isActive(opt) {
-    return isMulti ? props.value.includes(opt.value) : props.value === opt.value;
-  }
-  function handleClick(opt) {
-    if (opt.disabled) return;
-    if (isMulti) {
-      const current = props.value;
-      const next = current.includes(opt.value) ? current.filter((v) => v !== opt.value) : [...current, opt.value];
-      props.onChange(next);
-    } else {
-      const single = props;
-      if (single.allowDeselect && single.value === opt.value) {
-        single.onChange(null);
-      } else {
-        single.onChange(opt.value);
-      }
-    }
-  }
-  const group = /* @__PURE__ */ jsx(
-    "div",
-    {
-      id: groupId,
-      role: isMulti ? "group" : "radiogroup",
-      "aria-label": props["aria-label"],
-      className: [
-        stretch ? "flex w-full" : "inline-flex",
-        "rounded-(--radius-control) border border-stroke-default bg-surface-default p-0.5 gap-0.5",
-        label ? "" : className
-      ].join(" "),
-      children: options.map((opt) => {
-        const active = isActive(opt);
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: isMulti ? "switch" : "radio",
-            "aria-checked": active,
-            disabled: opt.disabled,
-            style: opt.style,
-            onClick: () => handleClick(opt),
-            className: [
-              "inline-flex items-center justify-center rounded-(--radius-control) font-medium transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:z-10",
-              "disabled:cursor-not-allowed disabled:opacity-50",
-              stretch ? "flex-1" : "",
-              SIZE_CLASS[size],
-              active ? selectedTone === "neutral" ? "bg-surface-invert text-fg-inverse" : "bg-brand-primary text-brand-on-primary" : "text-fg-secondary hover:text-fg-primary hover:bg-surface-raised"
-            ].join(" "),
-            children: [
-              opt.icon && /* @__PURE__ */ jsx("span", { className: "[&_svg]:size-4 shrink-0", children: opt.icon }),
-              opt.label && /* @__PURE__ */ jsx("span", { children: opt.label })
-            ]
-          },
-          opt.value
-        );
-      })
-    }
+import { createContext, useContext } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { blockWhenDisabled } from "./internal/button.js";
+import { toggleClassName, warnIfUnnamed } from "./internal/toggle.js";
+const VariantContext = createContext("outline");
+function ToggleGroup(_a) {
+  var _b = _a, { variant = "outline", className } = _b, rest = __objRest(_b, ["variant", "className"]);
+  return /* @__PURE__ */ jsx(VariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, __spreadProps(__spreadValues({}, rest), { className: ["rds-toggle-group", className].filter(Boolean).join(" ") })) });
+}
+function ToggleGroupItem(_c) {
+  var _d = _c, { icon, children, disabled, className, onClick } = _d, rest = __objRest(_d, ["icon", "children", "disabled", "className", "onClick"]);
+  const variant = useContext(VariantContext);
+  warnIfUnnamed("ToggleGroupItem", Boolean(children), rest["aria-label"], rest["aria-labelledby"]);
+  return /* @__PURE__ */ jsxs(
+    ToggleGroupPrimitive.Item,
+    __spreadProps(__spreadValues({}, rest), {
+      className: toggleClassName(variant, className),
+      "aria-disabled": disabled || void 0,
+      onClick: blockWhenDisabled(disabled, onClick),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "rds-toggle__icon", "aria-hidden": "true", children: icon }),
+        children
+      ]
+    })
   );
-  if (!label) return group;
-  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-1.5", className].join(" "), children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: groupId, className: "text-label font-medium text-fg-primary", children: label }),
-    group
-  ] });
 }
 export {
-  ToggleGroup
+  ToggleGroup,
+  ToggleGroupItem
 };

package/dist/components/toggle.d.ts

@@ -1,13 +1,23 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { ToggleVariant } from './internal/toggle.js';
 
-interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-    label?: ReactNode;
-    description?: ReactNode;
-    size?: 'sm' | 'md' | 'lg';
-    /** Posição do label em relação ao switch. default = "right". */
-    labelPosition?: 'left' | 'right';
+interface ToggleProps extends Omit<ComponentPropsWithRef<typeof TogglePrimitive.Root>, 'children' | 'disabled'> {
+    /** The name of what it turns on (Figma: `showLabel` + `label`). It never changes when pressed. Without it, pass aria-label. */
+    children?: ReactNode;
+    /** Icon before the text (Figma: `showIcon` + `iconName`). Decorative, rendered with aria-hidden. */
+    icon?: ReactNode;
+    /** The emphasis (Figma: `style`): ghost in a toolbar, outline when it stands alone. */
+    variant?: ToggleVariant;
+    /** Rendered as aria-disabled="true": stays in the tab order and takes focus, but does not toggle. */
+    disabled?: boolean;
 }
-declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * Toggle — Figma [RDS] Actions/Toggle. A button that stays on or off (aria-pressed). `pressed` +
+ * `onPressedChange` to control it, `defaultPressed` to start on (Figma: `pressed`). Not the Switch:
+ * a Toggle turns on a mode or a format (bold, list view); a Switch, a setting. Styles: toggle.css.
+ */
+declare function Toggle({ variant, icon, children, disabled, className, onClick, ...rest }: ToggleProps): react.JSX.Element;
 
-export { Toggle, type ToggleProps };
+export { Toggle, type ToggleProps, ToggleVariant };

package/dist/components/toggle.js

@@ -1,74 +1,29 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-const SIZE = {
-  sm: { track: "h-4 w-7", thumb: "size-3 peer-checked:translate-x-3.5", text: "text-caption" },
-  md: { track: "h-5 w-9", thumb: "size-4 peer-checked:translate-x-4", text: "text-label" },
-  lg: { track: "h-6 w-11", thumb: "size-5 peer-checked:translate-x-5", text: "text-label" }
-};
-const Toggle = forwardRef(function Toggle2(_a, ref) {
-  var _b = _a, { label, description, size = "md", labelPosition = "right", className = "", id } = _b, props = __objRest(_b, ["label", "description", "size", "labelPosition", "className", "id"]);
-  const generatedId = useId();
-  const inputId = id != null ? id : generatedId;
-  const sz = SIZE[size];
-  const labelEl = (label || description) && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 select-none", children: [
-    label && /* @__PURE__ */ jsx("span", { className: [sz.text, "text-fg-primary leading-snug"].join(" "), children: label }),
-    description && /* @__PURE__ */ jsx("span", { className: "text-caption text-fg-muted leading-snug", children: description })
-  ] });
-  const switchEl = /* @__PURE__ */ jsxs("span", { className: ["relative inline-flex shrink-0 items-center", sz.track].join(" "), children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      __spreadValues({
-        ref,
-        type: "checkbox",
-        role: "switch",
-        id: inputId,
-        className: "peer sr-only"
-      }, props)
-    ),
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: [
-          "absolute inset-0 rounded-full transition-colors",
-          "bg-surface-raised border border-stroke-control",
-          "peer-checked:bg-(--toggle-track-active) peer-checked:border-transparent",
-          "peer-focus-visible:ring-2 peer-focus-visible:ring-stroke-focus/30",
-          "peer-disabled:cursor-not-allowed"
-        ].join(" ")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: [
-          "relative rounded-full bg-surface-default shadow-sm transition-transform translate-x-0.5",
-          sz.thumb
-        ].join(" ")
-      }
-    )
-  ] });
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { blockWhenDisabled } from "./internal/button.js";
+import { toggleClassName, warnIfUnnamed } from "./internal/toggle.js";
+function Toggle(_a) {
+  var _b = _a, { variant = "ghost", icon, children, disabled, className, onClick } = _b, rest = __objRest(_b, ["variant", "icon", "children", "disabled", "className", "onClick"]);
+  warnIfUnnamed("Toggle", Boolean(children), rest["aria-label"], rest["aria-labelledby"]);
   return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      htmlFor: inputId,
-      className: [
-        "inline-flex items-start gap-2.5 cursor-pointer",
-        "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
-        className
-      ].filter(Boolean).join(" "),
+    TogglePrimitive.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: toggleClassName(variant, className),
+      "aria-disabled": disabled || void 0,
+      onClick: blockWhenDisabled(disabled, onClick),
       children: [
-        labelPosition === "left" && labelEl,
-        /* @__PURE__ */ jsx("span", { className: "flex items-center pt-0.5", children: switchEl }),
-        labelPosition === "right" && labelEl
+        icon && /* @__PURE__ */ jsx("span", { className: "rds-toggle__icon", "aria-hidden": "true", children: icon }),
+        children
       ]
-    }
+    })
   );
-});
+}
 export {
   Toggle
 };

package/dist/components/tooltip.d.ts

@@ -1,17 +1,30 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-interface TooltipProps {
-    content: ReactNode;
-    children: ReactNode;
-    side?: 'top' | 'bottom' | 'left' | 'right';
+type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps extends Omit<ComponentPropsWithRef<typeof TooltipPrimitive.Trigger>, 'children' | 'asChild'> {
+    /**
+     * The control it describes, almost always an IconButton. It must be a single focusable element: it receives the
+     * aria-describedby that ties it to the balloon (Radix Tooltip with asChild), not a wrapper around it.
+     */
+    children: ReactElement;
+    /** The action's name, in up to four words (Figma: `text`). Never something the person needs: touch does not show it. */
+    text: ReactNode;
+    /** Which side of the control the balloon sits on (Figma: `side`). */
+    side?: TooltipSide;
+    /** ms before it opens on hover. On keyboard focus it opens at once. */
     delay?: number;
-    /** Extra classes on the tooltip bubble — use to override whitespace-nowrap for rich content */
-    className?: string;
-    /** Classes on the trigger wrapper span — override the default `inline-flex items-center` when the
-     *  target must fill a flex/grid cell (e.g. `relative flex-1`, `block w-full`). */
-    wrapperClassName?: string;
 }
-declare function Tooltip({ content, children, side, delay, className, wrapperClassName }: TooltipProps): react.JSX.Element;
+/**
+ * Tooltip — Figma [RDS] Feedback/Tooltip. A short label on hovering or focusing a control (Radix Tooltip):
+ * role="tooltip", tied to the focusable control with aria-describedby. Escape closes; the mouse can go over the
+ * balloon without it disappearing (WCAG 1.4.13). Styles: tooltip.css.
+ *
+ * Every IconButton goes with one, with the same text as its label (Figma: IconButton, "Com Tooltip"): they are two
+ * components, always together. Any other prop and the ref go to the control, so the pair can itself be the child of
+ * another asChild trigger (a DropdownMenu, a Dialog close).
+ */
+declare function Tooltip({ children, text, side, delay, ...trigger }: TooltipProps): react.JSX.Element;
 
-export { Tooltip, type TooltipProps };
+export { Tooltip, type TooltipProps, type TooltipSide };