@rojaostudio/ds 1.0.0

package/dist/components/toaster.d.ts

@@ -0,0 +1,84 @@
+import * as react from 'react';
+
+/**
+ * Toaster — comportamento de snackbar M3, visual de notification card.
+ *
+ * Comportamento (M3):
+ *   • Um por vez (novo substitui o anterior).
+ *   • Action label OU close icon — não os dois.
+ *   • Duração: 4s sem action, 7s com action; persistente em loading.
+ *   • Posição default: bottom-center.
+ *   • Motion: 150ms ease-out enter, 75ms ease-in exit, slide vertical + fade.
+ *   • Não rouba foco. aria-live="polite" default, "assertive" pra erro.
+ *
+ * Visual (notification card):
+ *   • Card escuro nos DOIS themes (inverse surface, tokens --toast-*).
+ *   • Feedback variants: tint da cor semântica entra pela esquerda (gradiente)
+ *     + badge circular sólido com halo — ícone em tom escuro da própria cor.
+ *   • Título (message) + description opcional em --toast-text-muted.
+ *   • default/loading: card neutro sem tint nem badge.
+ *
+ * API:
+ *   import { toast } from '@rojaostudio/ds/components';
+ *   toast('Salvo');
+ *   toast.success('Salvo', { description: 'Pedido #1042 confirmado.' });
+ *   toast.error('...'), toast.warning('...'), toast.info('...'), toast.loading('...');
+ *   toast.dismiss(id?);
+ *   toast.promise(p, { loading, success, error });
+ */
+type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading';
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface ToastOptions {
+    variant?: ToastVariant;
+    /** Linha secundária — message vira título (semibold) quando presente. */
+    description?: string;
+    /** ms até auto-dismiss. Omitido → fallback do Material (1500 curto · 2750 com ação/erro · 0 loading). */
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    id?: string;
+}
+interface ToastFn {
+    (message: string, options?: ToastOptions): string;
+    success: (msg: string, opts?: Omit<ToastOptions, 'variant'>) => string;
+    error: (msg: string, opts?: Omit<ToastOptions, 'variant'>) => string;
+    warning: (msg: string, opts?: Omit<ToastOptions, 'variant'>) => string;
+    info: (msg: string, opts?: Omit<ToastOptions, 'variant'>) => string;
+    loading: (msg: string, opts?: Omit<ToastOptions, 'variant' | 'duration'>) => string;
+    dismiss: (id?: string) => void;
+    promise: <T>(promise: Promise<T>, msgs: {
+        loading: string;
+        success: string | ((data: T) => string);
+        error: string | ((err: unknown) => string);
+    }) => Promise<T>;
+}
+declare const toast: ToastFn;
+interface ToastVisualProps {
+    message: string;
+    /** Linha secundária — message vira título (semibold) quando presente. */
+    description?: string;
+    variant?: ToastVariant;
+    action?: {
+        label: string;
+        onClick?: () => void;
+    };
+    /** Quando true, renderiza a animação de entrada. default = false. */
+    animate?: boolean;
+    /** Top vs bottom afeta a direção da animação enter. default = 'bottom'. */
+    origin?: 'top' | 'bottom';
+    /** Mostra o botão de close (X). default = true se não houver action; M3
+     *  prescreve action OU close, não ambos. */
+    dismissible?: boolean;
+    /** Handler do close (opcional). Sem handler, o X aparece mas é decorativo. */
+    onDismiss?: () => void;
+}
+declare function ToastVisual({ message, description, variant, action, animate, origin, dismissible, onDismiss, }: ToastVisualProps): react.JSX.Element;
+interface ToasterProps {
+    /** Posição. default = bottom-center (M3 recomenda bottom). */
+    position?: ToastPosition;
+}
+declare function Toaster({ position }?: ToasterProps): react.ReactPortal | null;
+
+export { type ToastOptions, type ToastPosition, type ToastVariant, ToastVisual, type ToastVisualProps, Toaster, type ToasterProps, toast };

package/dist/components/toaster.js

@@ -0,0 +1,284 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { Loader2, X, Check, AlertTriangle, Info } from "lucide-react";
+const listeners = /* @__PURE__ */ new Set();
+function emit(a) {
+  for (const l of listeners) l(a);
+}
+let counter = 0;
+function genId() {
+  counter += 1;
+  return `t${Date.now()}_${counter}`;
+}
+function defaultDuration(variant, hasAction) {
+  if (variant === "loading") return 0;
+  if (hasAction || variant === "error") return 2750;
+  return 1500;
+}
+function show(message, options = {}) {
+  var _a, _b, _c;
+  const id = (_a = options.id) != null ? _a : genId();
+  const variant = (_b = options.variant) != null ? _b : "default";
+  const hasAction = !!options.action;
+  emit({
+    type: "show",
+    toast: {
+      id,
+      message,
+      description: options.description,
+      variant,
+      duration: (_c = options.duration) != null ? _c : defaultDuration(variant, hasAction),
+      action: options.action
+    }
+  });
+  return id;
+}
+const base = (msg, opts) => show(msg, opts);
+const toast = Object.assign(base, {
+  success: (m, o) => show(m, __spreadProps(__spreadValues({}, o), { variant: "success" })),
+  error: (m, o) => show(m, __spreadProps(__spreadValues({}, o), { variant: "error" })),
+  warning: (m, o) => show(m, __spreadProps(__spreadValues({}, o), { variant: "warning" })),
+  info: (m, o) => show(m, __spreadProps(__spreadValues({}, o), { variant: "info" })),
+  loading: (m, o) => show(m, __spreadProps(__spreadValues({}, o), { variant: "loading" })),
+  dismiss: (id) => {
+    if (id) emit({ type: "dismiss", id });
+    else listeners.forEach((l) => l({ type: "dismiss", id: "*" }));
+  },
+  promise: async (promise, msgs) => {
+    const id = show(msgs.loading, { variant: "loading" });
+    try {
+      const data = await promise;
+      const m = typeof msgs.success === "function" ? msgs.success(data) : msgs.success;
+      emit({ type: "update", id, patch: { variant: "success", message: m, duration: defaultDuration("success", false) } });
+      return data;
+    } catch (err) {
+      const m = typeof msgs.error === "function" ? msgs.error(err) : msgs.error;
+      emit({ type: "update", id, patch: { variant: "error", message: m, duration: defaultDuration("error", false) } });
+      throw err;
+    }
+  }
+});
+const VARIANT_COLOR = {
+  success: "var(--success)",
+  error: "var(--danger)",
+  warning: "var(--warning)",
+  info: "var(--info)"
+};
+function containerStyle(variant) {
+  const c = VARIANT_COLOR[variant];
+  return {
+    background: c ? `linear-gradient(105deg, color-mix(in srgb, ${c} 16%, var(--toast-bg)) 0%, var(--toast-bg) 60%)` : "var(--toast-bg)",
+    color: "var(--toast-text)"
+  };
+}
+const VARIANT_ICON = {
+  default: null,
+  success: Check,
+  error: X,
+  warning: AlertTriangle,
+  info: Info,
+  loading: Loader2
+};
+function ToastVisual({
+  message,
+  description,
+  variant = "default",
+  action,
+  animate = false,
+  origin = "bottom",
+  dismissible,
+  onDismiss
+}) {
+  const isError = variant === "error";
+  const isLoading = variant === "loading";
+  const hasAction = !!action;
+  const showClose = dismissible != null ? dismissible : !hasAction && !isLoading;
+  const animClass = animate ? origin === "top" ? "rojao-toast--enter-top" : "rojao-toast--enter-bottom" : "";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: isError ? "alert" : "status",
+      className: [
+        "rojao-toast",
+        "flex items-center gap-3 px-4 py-3 shadow-lg",
+        "min-w-[344px] max-w-[min(560px,calc(100vw-2rem))]",
+        animClass
+      ].join(" "),
+      style: __spreadProps(__spreadValues({}, containerStyle(variant)), {
+        border: "1px solid var(--toast-border)",
+        borderRadius: "var(--radius-toast)",
+        minHeight: "56px",
+        fontFamily: "var(--font-family)"
+      })
+    },
+    (() => {
+      const Icon = VARIANT_ICON[variant];
+      if (!Icon) return null;
+      if (isLoading) {
+        return /* @__PURE__ */ React.createElement(
+          Icon,
+          {
+            size: 18,
+            className: "shrink-0 animate-spin",
+            style: { color: "var(--toast-text-muted)" }
+          }
+        );
+      }
+      const c = VARIANT_COLOR[variant];
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "grid place-items-center rounded-full shrink-0 size-9",
+          style: {
+            background: c,
+            color: `color-mix(in srgb, ${c} 30%, black)`,
+            boxShadow: `0 0 0 5px color-mix(in srgb, ${c} 18%, transparent)`
+          }
+        },
+        /* @__PURE__ */ React.createElement(Icon, { size: 18, strokeWidth: 2.75 })
+      );
+    })(),
+    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: description ? "text-[0.9375rem] font-semibold leading-snug" : "text-label leading-snug" }, message), description && /* @__PURE__ */ React.createElement("p", { className: "text-label leading-snug mt-0.5", style: { color: "var(--toast-text-muted)" } }, description)),
+    hasAction ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: action.onClick,
+        className: "shrink-0 text-label font-medium px-2 -mr-1 transition-opacity hover:opacity-80",
+        style: { color: "currentColor" }
+      },
+      action.label
+    ) : showClose && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: onDismiss,
+        "aria-label": "Fechar",
+        className: "shrink-0 opacity-60 hover:opacity-100 transition-opacity",
+        style: { color: "currentColor" }
+      },
+      /* @__PURE__ */ React.createElement(X, { size: 16 })
+    )
+  );
+}
+const POSITION_CLASS = {
+  "top-left": "top-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "top-right": "top-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4"
+};
+function Toaster({ position = "bottom-center" } = {}) {
+  const [current, setCurrent] = useState(null);
+  const [mounted, setMounted] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const startExit = useCallback((id) => {
+    clearTimer();
+    setCurrent((prev) => prev && prev.id === id ? __spreadProps(__spreadValues({}, prev), { exiting: true }) : prev);
+    setTimeout(() => {
+      setCurrent((prev) => prev && prev.id === id ? null : prev);
+    }, 75);
+  }, [clearTimer]);
+  const scheduleDismiss = useCallback((t2) => {
+    if (t2.duration <= 0) return;
+    timerRef.current = setTimeout(() => startExit(t2.id), t2.duration);
+  }, [startExit]);
+  const currentRef = useRef(null);
+  currentRef.current = current;
+  useEffect(() => {
+    const listener = (action) => {
+      var _a, _b, _c;
+      if (action.type === "show") {
+        clearTimer();
+        setCurrent(action.toast);
+        scheduleDismiss(action.toast);
+      } else if (action.type === "update") {
+        setCurrent((prev) => {
+          if (!prev || prev.id !== action.id) return prev;
+          const next = __spreadProps(__spreadValues(__spreadValues({}, prev), action.patch), { exiting: false });
+          clearTimer();
+          if (next.duration > 0) {
+            timerRef.current = setTimeout(() => startExit(next.id), next.duration);
+          }
+          return next;
+        });
+      } else if (action.type === "dismiss") {
+        if (action.id === "*") startExit((_b = (_a = currentRef.current) == null ? void 0 : _a.id) != null ? _b : "");
+        else if (((_c = currentRef.current) == null ? void 0 : _c.id) === action.id) startExit(action.id);
+      }
+    };
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+      clearTimer();
+    };
+  }, [clearTimer, scheduleDismiss, startExit]);
+  const handleMouseEnter = () => clearTimer();
+  const handleMouseLeave = () => {
+    if (current && !current.exiting) scheduleDismiss(current);
+  };
+  if (!mounted || !current) return null;
+  const t = current;
+  const isError = t.variant === "error";
+  const ariaLive = isError ? "assertive" : "polite";
+  const isTop = position.startsWith("top-");
+  const exitClass = t.exiting ? isTop ? "rojao-toast--exit-top" : "rojao-toast--exit-bottom" : "";
+  return createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "aria-live": ariaLive,
+        "aria-atomic": "true",
+        className: ["fixed z-[9999] pointer-events-none", POSITION_CLASS[position]].join(" ")
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          className: ["pointer-events-auto", exitClass].join(" ")
+        },
+        /* @__PURE__ */ React.createElement(
+          ToastVisual,
+          {
+            message: t.message,
+            description: t.description,
+            variant: t.variant,
+            action: t.action ? {
+              label: t.action.label,
+              onClick: () => {
+                t.action.onClick();
+                startExit(t.id);
+              }
+            } : void 0,
+            animate: !t.exiting,
+            origin: isTop ? "top" : "bottom",
+            onDismiss: () => startExit(t.id)
+          }
+        )
+      )
+    ),
+    document.body
+  );
+}
+export {
+  ToastVisual,
+  Toaster,
+  toast
+};

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

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ToggleCardCompactProps {
+    icon?: ReactNode;
+    label: string;
+    /** Texto mostrado quando OFF. Substituído por `summary` quando ON. */
+    description?: ReactNode;
+    /** Texto mostrado quando ON (geralmente um resumo da config aplicada). */
+    summary?: ReactNode;
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Botão de edição (pencil). Só aparece quando ON. Use para abrir modal de config. */
+    onEdit?: () => void;
+    editLabel?: string;
+    /** Hidden input name — quando presente, submete em forms nativos. */
+    name?: string;
+}
+declare function ToggleCardCompact({ icon, label, description, summary, checked, onCheckedChange, onEdit, editLabel, name, }: ToggleCardCompactProps): react.JSX.Element;
+
+export { ToggleCardCompact, type ToggleCardCompactProps };

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

@@ -0,0 +1,99 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { Pencil } from "lucide-react";
+function ToggleCardCompact({
+  icon,
+  label,
+  description,
+  summary,
+  checked,
+  onCheckedChange,
+  onEdit,
+  editLabel = "Editar",
+  name
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "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(" ")
+    },
+    name && /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value: checked ? "on" : "" }),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: [
+          "flex items-center gap-3 px-4 py-3 transition-colors",
+          checked ? "[background:var(--section-card-header-bg-active)]" : ""
+        ].join(" ")
+      },
+      icon && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: [
+            "shrink-0",
+            checked ? "[color:var(--section-card-label-active)] opacity-80" : "text-(--text-disabled)"
+          ].join(" ")
+        },
+        icon
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement(
+        "p",
+        {
+          className: [
+            "text-caption font-semibold uppercase tracking-wide",
+            checked ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
+          ].join(" ")
+        },
+        label
+      ), (checked ? summary : description) && /* @__PURE__ */ React.createElement(
+        "p",
+        {
+          className: [
+            "text-caption leading-snug mt-0.5 truncate",
+            checked ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
+          ].join(" ")
+        },
+        checked ? summary : description
+      )),
+      checked && onEdit && /* @__PURE__ */ React.createElement(
+        "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"
+        },
+        /* @__PURE__ */ React.createElement(Pencil, { size: 14 })
+      ),
+      /* @__PURE__ */ React.createElement(
+        "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(" ")
+        },
+        /* @__PURE__ */ React.createElement(
+          "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(" ")
+          }
+        )
+      )
+    )
+  );
+}
+export {
+  ToggleCardCompact
+};

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

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ToggleCardProps {
+    label: string;
+    description?: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /** Hidden input name — when present, renders a hidden input so the value submits with native forms. */
+    name?: string;
+    children?: ReactNode;
+}
+declare function ToggleCard({ label, description, checked, onCheckedChange, name, children, }: ToggleCardProps): react.JSX.Element;
+
+export { ToggleCard, type ToggleCardProps };

package/dist/components/toggle-card.js

@@ -0,0 +1,76 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+function ToggleCard({
+  label,
+  description,
+  checked,
+  onCheckedChange,
+  name,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "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(" ")
+    },
+    name && /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value: checked ? "on" : "" }),
+    /* @__PURE__ */ React.createElement(
+      "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(" ")
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1" }, /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: [
+            "text-caption font-semibold uppercase tracking-wide",
+            checked ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
+          ].join(" ")
+        },
+        label
+      ), description && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: [
+            "text-caption leading-snug",
+            checked ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
+          ].join(" ")
+        },
+        description
+      )),
+      /* @__PURE__ */ React.createElement(
+        "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(" ")
+        },
+        /* @__PURE__ */ React.createElement(
+          "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__ */ React.createElement("div", { className: "px-4 pb-4 pt-4 space-y-4 [border-top:1px_solid_var(--section-card-divider)] [background:var(--surface-default)]" }, children)
+  );
+}
+export {
+  ToggleCard
+};

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

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * 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 /> },
+ *   ]} />
+ */
+interface ToggleOption<T extends string = string> {
+    value: T;
+    label?: string;
+    icon?: ReactNode;
+    /** Estilos inline aplicados ao botão — use para fontFamily por opção, etc. */
+    style?: React.CSSProperties;
+    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;
+
+export { ToggleGroup, type ToggleGroupProps, type ToggleOption };