@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/time-picker.js

@@ -4,230 +4,212 @@ import {
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect, useImperativeHandle } from "react";
-import { Clock, ChevronUp, ChevronDown, X } from "lucide-react";
-import { Popover } from "./popover.js";
-const SIZE_CLASS = {
-  sm: "h-8 text-caption px-2.5",
-  md: "h-10 text-label px-3"
+import { useMemo, useRef, useState } from "react";
+import { FieldShell, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+import { ClockIcon } from "./internal/icons.js";
+import { OptionContent } from "./internal/option-content.js";
+import { useListbox } from "./internal/use-listbox.js";
+const toMinutes = (time) => {
+  const [h, m] = time.split(":").map(Number);
+  return h * 60 + m;
 };
-function parseTime(t) {
-  if (!t) return null;
-  const match = t.match(/^(\d{1,2}):(\d{2})$/);
+const fromMinutes = (minutes) => `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+function parseTime(text) {
+  const match = text.trim().toLowerCase().match(/^(\d{1,2}):?(\d{2})\s*(am|pm)?$/);
   if (!match) return null;
-  const h = parseInt(match[1], 10);
-  const m = parseInt(match[2], 10);
-  if (h < 0 || h > 23 || m < 0 || m > 59) return null;
-  return { h, m };
-}
-function formatTime(h, m, format) {
-  const mm = String(m).padStart(2, "0");
-  if (format === "24h") return `${String(h).padStart(2, "0")}:${mm}`;
-  const period = h >= 12 ? "PM" : "AM";
-  const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-  return `${String(h12).padStart(2, "0")}:${mm} ${period}`;
-}
-function clampMinute(m, step) {
-  return Math.round(m / step) * step % 60;
+  let h = Number(match[1]);
+  const m = Number(match[2]);
+  const period = match[3];
+  if (period) {
+    if (h < 1 || h > 12) return null;
+    h = h % 12 + (period === "pm" ? 12 : 0);
+  }
+  if (h > 23 || m > 59) return null;
+  return fromMinutes(h * 60 + m);
 }
-function compareTime(a, b) {
-  const pa = parseTime(a);
-  const pb = parseTime(b);
-  return pa.h * 60 + pa.m - (pb.h * 60 + pb.m);
+function formatTime(time, format = "24h") {
+  if (format === "24h") return time;
+  const [h, m] = time.split(":").map(Number);
+  const h12 = h % 12 === 0 ? 12 : h % 12;
+  return `${String(h12).padStart(2, "0")}:${String(m).padStart(2, "0")} ${h >= 12 ? "PM" : "AM"}`;
 }
-const TimePicker = forwardRef(function TimePicker2({
+const mask24 = (text) => {
+  const digits = text.replace(/\D/g, "").slice(0, 4);
+  return digits.length > 2 ? `${digits.slice(0, 2)}:${digits.slice(2)}` : digits;
+};
+function TimePicker({
+  label,
+  labelPosition,
+  hint,
+  error,
+  errorMessage,
+  required,
   value,
+  defaultValue = null,
   onChange,
-  step = 1,
-  format = "24h",
-  placeholder = "HH:mm",
-  size = "md",
-  width = "full",
-  disabled = false,
+  step = 30,
   min,
   max,
-  className = "",
-  "aria-label": ariaLabel
-}, ref) {
+  format = "24h",
+  placeholder,
+  invalidMessage = "Essa hora n\xE3o existe. Use HH:mm.",
+  name,
+  disabled,
+  id,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  warnIfUnlabelled("TimePicker", label, ariaLabel, ariaLabelledBy);
+  const [own, setOwn] = useState(defaultValue);
+  const time = value !== void 0 ? value : own;
+  const [text, setText] = useState("");
+  const [editing, setEditing] = useState(false);
   const [open, setOpen] = useState(false);
-  const [draft, setDraft] = useState(() => {
-    const p = parseTime(value);
-    return p != null ? p : { h: 9, m: 0 };
+  const input = useRef(null);
+  const low = min ? toMinutes(min) : 0;
+  const high = max ? toMinutes(max) : 23 * 60 + 59;
+  const inRange = (t) => toMinutes(t) >= low && toMinutes(t) <= high;
+  const times = useMemo(() => {
+    const list = [];
+    const every = Math.max(1, Math.round(step));
+    for (let m = low; m <= high; m += every) list.push({ value: fromMinutes(m), label: formatTime(fromMinutes(m), format) });
+    return list;
+  }, [low, high, step, format]);
+  const shown = editing ? text : time ? formatTime(time, format) : "";
+  const parsed = parseTime(shown);
+  const complete = format === "24h" ? shown.length === 5 : /\s*(am|pm)$/i.test(shown);
+  const wrong = editing && complete && (!parsed || !inRange(parsed));
+  const message = wrong ? invalidMessage : errorMessage;
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error || wrong, message);
+  const floating = labelPosition === "floating" && Boolean(label);
+  function commit(next) {
+    if (value === void 0) setOwn(next);
+    onChange == null ? void 0 : onChange(next);
+  }
+  const { listId, setActive, onKeyDown: listKeyDown, controlProps, listProps, optionProps } = useListbox({
+    items: times,
+    showing: open,
+    selected: time ? [time] : [],
+    onOpen: () => setOpen(true),
+    onChoose: (row) => {
+      commit(row.value);
+      setEditing(false);
+      setOpen(false);
+      setActive(-1);
+    }
   });
-  const triggerRef = useRef(null);
-  const draftRef = useRef(draft);
-  draftRef.current = draft;
-  useImperativeHandle(ref, () => triggerRef.current);
-  useEffect(() => {
-    if (open) {
-      const p = parseTime(value);
-      if (p) setDraft(p);
+  function openList() {
+    if (open || disabled) return;
+    setOpen(true);
+    const target = time ? toMinutes(time) : -1;
+    const index = target < 0 ? -1 : times.findIndex((t) => toMinutes(t.value) >= target);
+    setActive(index);
+    if (index >= 0) {
+      requestAnimationFrame(() => {
+        var _a, _b;
+        return (_b = (_a = document.getElementById(listId)) == null ? void 0 : _a.children[index]) == null ? void 0 : _b.scrollIntoView({ block: "nearest" });
+      });
     }
-  }, [open, value]);
-  function commit() {
-    const d = draftRef.current;
-    const t = `${String(d.h).padStart(2, "0")}:${String(d.m).padStart(2, "0")}`;
-    if (min && compareTime(t, min) < 0) return;
-    if (max && compareTime(t, max) > 0) return;
-    onChange(t);
   }
-  function adjust(field, delta) {
-    setDraft((d) => {
-      if (field === "h") {
-        let h = d.h + delta;
-        if (h < 0) h = 23;
-        if (h > 23) h = 0;
-        return __spreadProps(__spreadValues({}, d), { h });
-      }
-      let m = d.m + delta * step;
-      if (m < 0) m = 60 - step;
-      if (m >= 60) m = 0;
-      return __spreadProps(__spreadValues({}, d), { m: clampMinute(m, step) });
-    });
+  function close() {
+    setOpen(false);
+    setActive(-1);
   }
-  function handleClear(e) {
-    var _a;
-    e.stopPropagation();
-    onChange(null);
-    (_a = triggerRef.current) == null ? void 0 : _a.focus();
+  function keyDown(event) {
+    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      openList();
+      return;
+    }
+    if (listKeyDown(event)) return;
+    if (event.key === "Escape" && open) {
+      event.preventDefault();
+      close();
+    }
   }
-  const display = (() => {
-    const p = parseTime(value);
-    if (!p) return "";
-    return formatTime(p.h, p.m, format);
-  })();
-  const dialog = /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
     {
-      role: "dialog",
-      "aria-label": "Seletor de hora",
-      className: "rounded-(--radius-control) border border-stroke-default bg-surface-default shadow-lg p-3",
+      kind: "rds-time-picker",
+      controlId,
+      hintId,
+      errorId,
+      label,
+      labelPosition,
+      hint,
+      errorMessage: message,
+      invalid,
+      required,
+      disabled,
+      className,
+      style,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            Spinner,
-            {
-              label: "Hora",
-              value: String(draft.h).padStart(2, "0"),
-              onUp: () => adjust("h", 1),
-              onDown: () => adjust("h", -1)
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-heading-sm font-semibold text-fg-muted", children: ":" }),
-          /* @__PURE__ */ jsx(
-            Spinner,
-            {
-              label: "Minuto",
-              value: String(draft.m).padStart(2, "0"),
-              onUp: () => adjust("m", 1),
-              onDown: () => adjust("m", -1)
-            }
-          ),
-          format === "12h" && /* @__PURE__ */ jsx("span", { className: "text-caption font-medium text-fg-secondary ml-1", children: draft.h >= 12 ? "PM" : "AM" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-3", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setOpen(false),
-              className: "text-caption text-fg-muted hover:text-fg-primary transition-colors px-2 py-1",
-              children: "Cancelar"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                commit();
-                setOpen(false);
-              },
-              className: "text-caption font-medium bg-brand-primary text-brand-on-primary px-3 py-1 rounded transition-colors hover:bg-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-              children: "OK"
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({
+            ref: input,
+            id: controlId,
+            className: "rds-field__control",
+            type: "text",
+            role: "combobox",
+            inputMode: format === "24h" ? "numeric" : "text",
+            autoComplete: "off",
+            "aria-autocomplete": "none"
+          }, controlProps), {
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": describedBy,
+            "aria-required": required || void 0,
+            required,
+            disabled,
+            placeholder: floating ? " " : placeholder != null ? placeholder : format === "24h" ? "HH:mm" : "hh:mm AM",
+            maxLength: format === "24h" ? 5 : 8,
+            value: shown,
+            onChange: (event) => {
+              const next = format === "24h" ? mask24(event.target.value) : event.target.value;
+              setText(next);
+              setEditing(true);
+              if (next === "") commit(null);
+              const typed = parseTime(next);
+              const done = format === "24h" ? next.length === 5 : /\s*(am|pm)$/i.test(next);
+              if (typed && done && inRange(typed)) commit(typed);
+            },
+            onClick: () => open ? close() : openList(),
+            onKeyDown: keyDown,
+            onBlur: () => {
+              close();
+              const typed = parseTime(text);
+              if (text === "" || typed && inRange(typed)) setEditing(false);
             }
-          )
-        ] })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxs("div", { className: ["relative", width === "full" ? "block w-full" : "inline-block", className].join(" "), children: [
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        trigger: /* @__PURE__ */ jsxs(
-          "button",
+          })
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
           {
-            ref: triggerRef,
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              if (!disabled) setOpen((o) => !o);
+            className: "rds-field__icon rds-time-picker__clock",
+            "aria-hidden": "true",
+            onMouseDown: (event) => {
+              var _a;
+              event.preventDefault();
+              if (disabled) return;
+              (_a = input.current) == null ? void 0 : _a.focus();
+              if (open) close();
+              else openList();
             },
-            disabled,
-            "aria-label": ariaLabel != null ? ariaLabel : "Selecionar hora",
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            className: [
-              "w-full flex items-center gap-2 rounded-(--radius-control) border border-stroke-default bg-surface-default",
-              "transition-colors focus:outline-none focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              value ? "pr-7" : "",
-              SIZE_CLASS[size]
-            ].join(" "),
-            children: [
-              /* @__PURE__ */ jsx(Clock, { size: 16, className: "text-fg-muted shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: ["flex-1 text-left truncate", display ? "text-fg-primary" : "text-fg-placeholder"].join(" "), children: display || placeholder })
-            ]
+            children: /* @__PURE__ */ jsx(ClockIcon, {})
           }
         ),
-        triggerClassName: width === "full" ? "block w-full" : "inline-block",
-        placement: "bottom-start",
-        offset: 4,
-        open,
-        onOpenChange: (v) => {
-          if (!disabled) setOpen(v);
-        },
-        children: () => dialog
-      }
-    ),
-    value && !disabled && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleClear,
-        "aria-label": "Limpar hora",
-        className: "absolute right-2 top-1/2 -translate-y-1/2 text-fg-muted hover:text-fg-primary p-0.5 rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-        children: /* @__PURE__ */ jsx(X, { size: 14 })
-      }
-    )
-  ] });
-});
-function Spinner({ label, value, onUp, onDown }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", role: "group", "aria-label": label, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onUp,
-        "aria-label": `Aumentar ${label.toLowerCase()}`,
-        className: "p-0.5 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-focus",
-        children: /* @__PURE__ */ jsx(ChevronUp, { size: 16 })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-heading-lg font-mono font-semibold text-fg-primary tabular-nums select-none min-w-[3ch] text-center", children: value }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onDown,
-        "aria-label": `Diminuir ${label.toLowerCase()}`,
-        className: "p-0.5 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-focus",
-        children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
-      }
-    )
-  ] });
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: time != null ? time : "" }),
+        open && /* @__PURE__ */ jsx("ul", __spreadProps(__spreadValues({}, listProps), { "aria-label": typeof label === "string" ? label : ariaLabel != null ? ariaLabel : "Hor\xE1rios", className: "rds-listbox rds-time-picker__list", children: times.map((row, index) => /* @__PURE__ */ jsx("li", __spreadProps(__spreadValues({}, optionProps(row, index)), { className: "rds-listbox__option", children: /* @__PURE__ */ jsx(OptionContent, { selected: row.value === time, children: row.label }) }), row.value)) }))
+      ]
+    }
+  );
 }
 export {
-  TimePicker
+  TimePicker,
+  formatTime,
+  parseTime
 };

package/dist/components/toast.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type ToastTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** Figma calls this property `style`: outline (white with a border, the default), soft (light plate), fill (full plate). */
+type ToastVariant = 'outline' | 'soft' | 'fill';
+interface ToastOptions {
+    /** What happened, in a few words (Figma: `title`). */
+    title: ReactNode;
+    /** The detail (Figma: `showDescription` + `description`). */
+    description?: ReactNode;
+    /** neutral for a plain confirmation. danger is announced at once (assertive); the others politely. */
+    tone?: ToastTone;
+    variant?: ToastVariant;
+    /** The tone's icon (Figma: `showIcon`). Decorative. */
+    showIcon?: boolean;
+    /** One action (Figma: `showAction`): "Desfazer", "Ver". With an action it stays at least 6 s. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** ms on screen. Default 5 s, 6 s with an action. It pauses while the mouse or the focus is on it. */
+    duration?: number;
+    /** Give the same id to replace a toast that is on screen instead of stacking another one. */
+    id?: string;
+}
+declare const toastClassName: (tone?: ToastTone, variant?: ToastVariant, extra?: string) => string;
+interface ToastViewProps extends Omit<ToastOptions, 'duration' | 'id'> {
+    /** Called by the ×. */
+    onClose?: () => void;
+    /** The ×'s accessible name. */
+    closeLabel?: string;
+    className?: string;
+}
+/**
+ * ToastView — the toast's drawing alone, outside the Toaster: for documentation and static previews. In the app,
+ * show toasts with `toast()` (or `useToast()`) and mount one `<Toaster />`.
+ */
+declare function ToastView({ title, description, tone, variant, showIcon, action, onClose, closeLabel, className, }: ToastViewProps): react.JSX.Element;
+interface ToastFn {
+    /** Shows a toast and returns its id. Needs one `<Toaster />` mounted on the page. */
+    (options: ToastOptions): string;
+    /** Closes the toast with that id, or every toast. */
+    dismiss: (id?: string) => void;
+}
+/** Shows a toast from anywhere (an event handler, a mutation's onSuccess). One `<Toaster />` must be mounted. */
+declare const toast: ToastFn;
+/** The same `toast` function, as a hook, for components that prefer to receive it. */
+declare function useToast(): ToastFn;
+interface ToasterProps {
+    /** The region's name, said with the F8 shortcut that takes the focus to it. */
+    label?: string;
+    /** The app, when the Toaster wraps it. It can also be mounted alone, once, anywhere on the page. */
+    children?: ReactNode;
+}
+/**
+ * Toaster — the region where the toasts of the Figma [RDS] Feedback/Toast appear (Radix Toast): the bottom-right
+ * corner, up to three at a time (a fourth pushes the oldest out), each one announced in a live region (danger
+ * assertively, the others politely). F8 takes the focus to the region; swiping right dismisses. Styles: toast.css.
+ */
+declare function Toaster({ label, children }: ToasterProps): react.JSX.Element;
+
+export { type ToastFn, type ToastOptions, type ToastTone, type ToastVariant, ToastView, type ToastViewProps, Toaster, type ToasterProps, toast, toastClassName, useToast };

package/dist/components/toast.js

@@ -0,0 +1,132 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import { Button } from "./button.js";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { AlertIcon, CircleCheckIcon, CloseIcon, InfoIcon, TriangleAlertIcon } from "./internal/icons.js";
+const ICONS = {
+  neutral: InfoIcon,
+  info: InfoIcon,
+  success: CircleCheckIcon,
+  warning: TriangleAlertIcon,
+  danger: AlertIcon
+};
+const toastClassName = (tone = "neutral", variant = "outline", extra) => ["rds-toast", `rds-toast--${tone}-${variant}`, variant !== "outline" && "rds-toast--plate", extra].filter(Boolean).join(" ");
+function ToastView({
+  title,
+  description,
+  tone = "neutral",
+  variant = "outline",
+  showIcon = true,
+  action,
+  onClose,
+  closeLabel = "Fechar",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: toastClassName(tone, variant, className), children: [
+    /* @__PURE__ */ jsx(ToastBody, { tone, showIcon, title: /* @__PURE__ */ jsx("p", { className: "rds-toast__title", children: title }), children: description && /* @__PURE__ */ jsx("p", { className: "rds-toast__description", children: description }) }),
+    action && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", className: "rds-toast__action", onClick: action.onClick, children: action.label }),
+    /* @__PURE__ */ jsx(Tooltip, { text: closeLabel, children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CloseIcon, {}), label: closeLabel, tone: "neutral", variant: "ghost", className: "rds-toast__close", onClick: onClose }) })
+  ] });
+}
+function ToastBody({ tone, showIcon, title, children }) {
+  const Icon = ICONS[tone];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showIcon && /* @__PURE__ */ jsx("span", { className: "rds-toast__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+    /* @__PURE__ */ jsxs("div", { className: "rds-toast__content", children: [
+      title,
+      children
+    ] })
+  ] });
+}
+const listeners = /* @__PURE__ */ new Set();
+let counter = 0;
+const toast = Object.assign(
+  (options) => {
+    var _a;
+    counter += 1;
+    const key = (_a = options.id) != null ? _a : `rds-toast-${counter}`;
+    if (!listeners.size && process.env.NODE_ENV !== "production") {
+      console.warn("[@rojaostudio/ds] toast(): no <Toaster /> is mounted, so the toast is not shown.");
+    }
+    listeners.forEach((listener) => listener({ type: "show", item: __spreadProps(__spreadValues({}, options), { key, open: true }) }));
+    return key;
+  },
+  {
+    dismiss: (id) => listeners.forEach((listener) => listener({ type: "dismiss", id }))
+  }
+);
+function useToast() {
+  return toast;
+}
+const MAX_VISIBLE = 3;
+function Toaster({ label = "Notifica\xE7\xF5es", children }) {
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    const listener = (event) => {
+      if (event.type === "show") {
+        setItems((current) => {
+          const rest = current.filter((item) => item.key !== event.item.key);
+          const open = rest.filter((item) => item.open);
+          const drop = open.length >= MAX_VISIBLE ? open[0].key : null;
+          return [...rest.map((item) => item.key === drop ? __spreadProps(__spreadValues({}, item), { open: false }) : item), event.item];
+        });
+      } else {
+        setItems(
+          (current) => current.map((item) => event.id === void 0 || item.key === event.id ? __spreadProps(__spreadValues({}, item), { open: false }) : item)
+        );
+      }
+    };
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }, []);
+  const close = useCallback((key) => {
+    setItems((current) => current.map((item) => item.key === key ? __spreadProps(__spreadValues({}, item), { open: false }) : item));
+    window.setTimeout(() => setItems((current) => current.filter((item) => item.key !== key || item.open)), 300);
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastPrimitive.Provider, { label, swipeDirection: "right", children: [
+    children,
+    items.map(({ key, open, title, description, tone = "neutral", variant = "outline", showIcon = true, action, duration }) => /* @__PURE__ */ jsxs(
+      ToastPrimitive.Root,
+      {
+        open,
+        onOpenChange: (next) => {
+          if (!next) close(key);
+        },
+        type: tone === "danger" ? "foreground" : "background",
+        duration: duration != null ? duration : action ? 6e3 : 5e3,
+        className: toastClassName(tone, variant),
+        children: [
+          /* @__PURE__ */ jsx(
+            ToastBody,
+            {
+              tone,
+              showIcon,
+              title: /* @__PURE__ */ jsx(ToastPrimitive.Title, { className: "rds-toast__title", children: title }),
+              children: description && /* @__PURE__ */ jsx(ToastPrimitive.Description, { className: "rds-toast__description", children: description })
+            }
+          ),
+          action && /* @__PURE__ */ jsx(ToastPrimitive.Action, { altText: action.label, asChild: true, children: /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", className: "rds-toast__action", onClick: action.onClick, children: action.label }) }),
+          /* @__PURE__ */ jsx(Tooltip, { text: "Fechar", children: /* @__PURE__ */ jsx(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CloseIcon, {}), label: "Fechar", tone: "neutral", variant: "ghost", className: "rds-toast__close" }) }) })
+        ]
+      },
+      key
+    )),
+    /* @__PURE__ */ jsx(ToastPrimitive.Viewport, { className: "rds-toast-viewport", label: `${label} ({hotkey})` })
+  ] });
+}
+export {
+  ToastView,
+  Toaster,
+  toast,
+  toastClassName,
+  useToast
+};

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

@@ -2,20 +2,30 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 interface ToggleCardCompactProps {
+    /** An icon before the text (the Item's media). */
     icon?: ReactNode;
+    /** The setting it turns on (the Item's title and the Switch's name). */
     label: string;
-    /** Texto mostrado quando OFF. Substituído por `summary` quando ON. */
+    /** The line under the label while off. */
     description?: ReactNode;
-    /** Texto mostrado quando ON (geralmente um resumo da config aplicada). */
+    /** The line under the label while on (a summary of what is set); it replaces `description`. */
     summary?: ReactNode;
     checked: boolean;
     onCheckedChange?: (checked: boolean) => void;
-    /** Botão de edição (pencil). Só aparece quando ON. Use para abrir modal de config. */
+    /** Shows the pencil (an IconButton) while on: opens the setting's options (a Dialog). */
     onEdit?: () => void;
+    /** The pencil's accessible name and tooltip. */
     editLabel?: string;
-    /** Hidden input name — quando presente, submete em forms nativos. */
+    /** Submits 'on' (or '') under this name with a native form, through a hidden input. */
     name?: string;
+    disabled?: boolean;
+    className?: string;
 }
-declare function ToggleCardCompact({ icon, label, description, summary, checked, onCheckedChange, onEdit, editLabel, name, }: ToggleCardCompactProps): react.JSX.Element;
+/**
+ * ToggleCardCompact — a composition of the Item (outline), the Switch and the IconButton with its Tooltip: a
+ * setting in one row, its summary under the label while on and a pencil that opens its options. Styles:
+ * toggle-card-compact.css.
+ */
+declare function ToggleCardCompact({ icon, label, description, summary, checked, onCheckedChange, onEdit, editLabel, name, disabled, className, }: ToggleCardCompactProps): react.JSX.Element;
 
 export { ToggleCardCompact, type ToggleCardCompactProps };