@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/drawer.js

@@ -1,82 +1,62 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { useEffect, useId } from "react";
-import { X } from "lucide-react";
-import { createPortal } from "react-dom";
-import { useFocusTrap } from "./use-focus-trap.js";
-const SIZE_WIDTH = {
-  sm: "w-80",
-  // 320px
-  md: "w-96",
-  // 384px
-  lg: "w-[480px]",
-  xl: "w-[640px]"
-};
-function Drawer({
-  open,
-  onClose,
-  title,
-  subtitle,
-  children,
-  footer,
-  side = "right",
-  size,
-  width,
-  closeOnBackdrop = true,
-  hideClose = false,
-  className = "",
-  container
-}) {
-  const widthClass = width != null ? width : SIZE_WIDTH[size != null ? size : "md"];
-  const titleId = useId();
-  const panelRef = useFocusTrap(open);
-  useEffect(() => {
-    if (!open) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.body.style.overflow = prev;
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [open, onClose]);
-  if (!open) return null;
-  return createPortal(
-    /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-50 flex" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 [background:var(--overlay-scrim)]", onClick: closeOnBackdrop ? onClose : void 0, "aria-hidden": "true" }), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: panelRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": title ? titleId : void 0,
-        tabIndex: -1,
-        className: [
-          "relative z-10 flex flex-col bg-surface-default shadow-xl h-full max-w-full",
-          "focus:outline-none",
-          widthClass,
-          side === "right" ? "ml-auto" : "mr-auto",
-          className
-        ].join(" ")
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { ModalClose, ModalShell } from "./internal/modal.js";
+const DISMISS_DISTANCE = 80;
+function Drawer(_a) {
+  var _b = _a, { open, defaultOpen, onOpenChange } = _b, props = __objRest(_b, ["open", "defaultOpen", "onOpenChange"]);
+  const [own, setOwn] = useState(defaultOpen != null ? defaultOpen : false);
+  const isOpen = open != null ? open : own;
+  const setOpen = (next) => {
+    setOwn(next);
+    onOpenChange == null ? void 0 : onOpenChange(next);
+  };
+  const start = useRef(null);
+  const [drag, setDrag] = useState(0);
+  const reset = () => {
+    start.current = null;
+    setDrag(0);
+  };
+  const handle = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rds-drawer__handle-area",
+      "aria-hidden": "true",
+      onPointerDown: (event) => {
+        var _a2, _b2;
+        start.current = event.clientY;
+        (_b2 = (_a2 = event.currentTarget).setPointerCapture) == null ? void 0 : _b2.call(_a2, event.pointerId);
+      },
+      onPointerMove: (event) => {
+        if (start.current !== null) setDrag(Math.max(0, event.clientY - start.current));
       },
-      (title || !hideClose) && /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4 px-6 py-4 border-b border-stroke-default shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, title && /* @__PURE__ */ React.createElement("h2", { id: titleId, className: "text-body font-semibold text-fg-primary" }, title), subtitle && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted mt-0.5" }, subtitle)), !hideClose && /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: "shrink-0 text-fg-muted hover:text-fg-primary transition-colors rounded focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:outline-none p-0.5",
-          "aria-label": "Fechar"
-        },
-        /* @__PURE__ */ React.createElement(X, { size: 20 })
-      )),
-      /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto px-6 py-4" }, children),
-      footer && /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-stroke-default shrink-0" }, footer)
-    )),
-    container != null ? container : document.body
+      onPointerUp: (event) => {
+        if (start.current !== null && event.clientY - start.current > DISMISS_DISTANCE) setOpen(false);
+        reset();
+      },
+      onPointerCancel: reset,
+      children: /* @__PURE__ */ jsx("span", { className: "rds-drawer__handle" })
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    ModalShell,
+    __spreadValues({
+      prefix: "rds-drawer",
+      closeButton: false,
+      stackedFooter: true,
+      handle,
+      open: isOpen,
+      onOpenChange: setOpen,
+      boxStyle: drag ? { transform: `translateY(${drag}px)`, animation: "none" } : void 0
+    }, props)
   );
 }
+const DrawerClose = ModalClose;
 export {
-  Drawer
+  Drawer,
+  DrawerClose
 };

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { MenuItemContentProps, MenuItemTone } from './internal/menu.js';
+
+type DropdownMenuAlign = 'start' | 'center' | 'end';
+type DropdownMenuSide = 'top' | 'bottom' | 'left' | 'right';
+type DropdownMenuItemTone = MenuItemTone;
+interface DropdownMenuProps {
+    /** The button that opens it, usually the "⋯" IconButton named after the item whose actions it lists. */
+    trigger: ReactElement;
+    /** The DropdownMenuItems, with a DropdownMenuSeparator between groups (Figma: the `items` slot). */
+    children: ReactNode;
+    /** Where it lines up with the button: start (its left edge), end (its right edge). */
+    align?: DropdownMenuAlign;
+    side?: DropdownMenuSide;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The menu's name, when the trigger's own name doesn't say it. */
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * DropdownMenu — Figma [RDS] Overlays/DropdownMenu. The actions of an item that don't fit on the screen (Radix
+ * DropdownMenu): role="menu"; the focus goes to the first item; the arrows move (disabled items are skipped),
+ * typing a letter jumps, Enter or Space chooses, Escape closes and gives the focus back to the button.
+ * Up to 7 items; the one that destroys goes last, after a separator. Styles: internal/menu.css.
+ */
+declare function DropdownMenu({ trigger, children, align, side, open, defaultOpen, onOpenChange, className, 'aria-label': ariaLabel, }: DropdownMenuProps): react.JSX.Element;
+interface DropdownMenuItemProps extends MenuItemContentProps {
+    /** Runs when the item is chosen (click, Enter or Space); the menu then closes. A destructive action asks first (AlertDialog). */
+    onSelect?: () => void;
+    /** danger for what destroys: last, after a separator (Figma: `tone`). */
+    tone?: DropdownMenuItemTone;
+    /** Stays in the list, can't be chosen, and the arrows skip it. */
+    disabled?: boolean;
+    /** The text typing jumps by, when the label is not plain text. */
+    textValue?: string;
+    /** Render the single child element (a link) as the item: a place to go instead of an action. */
+    asChild?: boolean;
+}
+/** One action (Figma .menu/item): role="menuitem". */
+declare function DropdownMenuItem({ children, icon, shortcut, onSelect, tone, disabled, textValue, asChild }: DropdownMenuItemProps): react.JSX.Element;
+interface DropdownMenuRadioGroupProps {
+    /** The chosen item's value. */
+    value: string;
+    onValueChange: (value: string) => void;
+    /** The DropdownMenuRadioItems. */
+    children: ReactNode;
+}
+/** A group of items of which one is chosen (a filter's options): role="group" of menuitemradio. */
+declare function DropdownMenuRadioGroup({ value, onValueChange, children }: DropdownMenuRadioGroupProps): react.JSX.Element;
+interface DropdownMenuRadioItemProps extends MenuItemContentProps {
+    value: string;
+    disabled?: boolean;
+    textValue?: string;
+}
+/** One option of a DropdownMenuRadioGroup: role="menuitemradio", aria-checked; the chosen one shows a check. */
+declare function DropdownMenuRadioItem({ value, children, icon, shortcut, disabled, textValue }: DropdownMenuRadioItemProps): react.JSX.Element;
+/** The line between groups of actions (Figma: the Separator in the `items` slot). */
+declare function DropdownMenuSeparator(): react.JSX.Element;
+
+export { DropdownMenu, type DropdownMenuAlign, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemTone, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSide };

package/dist/components/dropdown-menu.js

@@ -0,0 +1,62 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Menu from "@radix-ui/react-dropdown-menu";
+import { CheckIcon } from "./internal/icons.js";
+import { MenuItemContent, menuItemClassName } from "./internal/menu.js";
+function DropdownMenu({
+  trigger,
+  children,
+  align = "start",
+  side = "bottom",
+  open,
+  defaultOpen,
+  onOpenChange,
+  className,
+  "aria-label": ariaLabel
+}) {
+  return (
+    // Not modal: the page is not hidden from screen readers (aria-hidden over the focusable trigger) nor locked; a
+    // click outside, Escape or Tab still close it, and the focus goes back to the trigger.
+    /* @__PURE__ */ jsxs(Menu.Root, { open, defaultOpen, onOpenChange, modal: false, children: [
+      /* @__PURE__ */ jsx(Menu.Trigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+        Menu.Content,
+        {
+          align,
+          side,
+          sideOffset: 4,
+          collisionPadding: 8,
+          "aria-label": ariaLabel,
+          className: ["rds-menu", "rds-dropdown-menu", className].filter(Boolean).join(" "),
+          children
+        }
+      ) })
+    ] })
+  );
+}
+function DropdownMenuItem({ children, icon, shortcut, onSelect, tone, disabled, textValue, asChild }) {
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Menu.Item, { asChild: true, onSelect, disabled, textValue, className: menuItemClassName(tone), children });
+  }
+  return /* @__PURE__ */ jsx(Menu.Item, { onSelect, disabled, textValue, className: menuItemClassName(tone), children: /* @__PURE__ */ jsx(MenuItemContent, { icon, shortcut, children }) });
+}
+function DropdownMenuRadioGroup({ value, onValueChange, children }) {
+  return /* @__PURE__ */ jsx(Menu.RadioGroup, { value, onValueChange, children });
+}
+function DropdownMenuRadioItem({ value, children, icon, shortcut, disabled, textValue }) {
+  return /* @__PURE__ */ jsxs(Menu.RadioItem, { value, disabled, textValue, className: menuItemClassName(), children: [
+    /* @__PURE__ */ jsx(MenuItemContent, { icon, shortcut, children }),
+    /* @__PURE__ */ jsx(Menu.ItemIndicator, { className: "rds-menu__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+  ] });
+}
+function DropdownMenuSeparator() {
+  return /* @__PURE__ */ jsx(Menu.Separator, { className: "rds-menu__separator" });
+}
+export {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator
+};

package/dist/components/dropzone.d.ts

@@ -2,9 +2,8 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
- * Dropzone — área de arrastar-e-soltar / clicar para selecionar arquivos.
- * Substitui `<div className="border-2 border-dashed rounded-xl" onDrop=...>` reimplementado.
- * Gerencia estado de drag, input file escondido e clique. O conteúdo (ícone + texto) é livre.
+ * @deprecated Use `<FileInput variant="dropzone">` (Figma [RDS] Forms/FileInput), which has the label, the hint, the
+ * error and the chosen file's row. Kept as a thin wrapper so 1.x code keeps compiling.
  */
 interface DropzoneProps {
     onFiles: (files: FileList) => void;
@@ -12,8 +11,15 @@ interface DropzoneProps {
     multiple?: boolean;
     disabled?: boolean;
     className?: string;
+    /** The call inside the area (FileInput's `dropTitle`). */
     children: ReactNode;
+    /** The area's name for screen readers: a Dropzone has no visible label. */
+    'aria-label'?: string;
 }
-declare function Dropzone({ onFiles, accept, multiple, disabled, className, children }: DropzoneProps): react.JSX.Element;
+/**
+ * @deprecated Use `<FileInput variant="dropzone">`. A drop target only: it hands the files over and stays empty,
+ * ready for the next ones, as the 1.x Dropzone did.
+ */
+declare function Dropzone({ onFiles, accept, multiple, disabled, className, children, 'aria-label': ariaLabel, }: DropzoneProps): react.JSX.Element;
 
 export { Dropzone, type DropzoneProps };

package/dist/components/dropzone.js

@@ -1,63 +1,38 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { useRef, useState } from "react";
-function Dropzone({ onFiles, accept, multiple = false, disabled = false, className = "", children }) {
-  const inputRef = useRef(null);
-  const [dragging, setDragging] = useState(false);
-  function handleDrop(e) {
-    var _a;
-    e.preventDefault();
-    setDragging(false);
-    if (disabled) return;
-    if ((_a = e.dataTransfer.files) == null ? void 0 : _a.length) onFiles(e.dataTransfer.files);
-  }
-  return /* @__PURE__ */ React.createElement(
-    "div",
+import { jsx } from "react/jsx-runtime";
+import { FileInput } from "./file-input.js";
+function Dropzone({
+  onFiles,
+  accept,
+  multiple = false,
+  disabled = false,
+  className,
+  children,
+  "aria-label": ariaLabel = "Enviar arquivo"
+}) {
+  return /* @__PURE__ */ jsx(
+    FileInput,
     {
-      role: "button",
-      tabIndex: disabled ? -1 : 0,
-      onClick: () => {
-        var _a;
-        return !disabled && ((_a = inputRef.current) == null ? void 0 : _a.click());
+      variant: "dropzone",
+      "aria-label": ariaLabel,
+      dropTitle: children,
+      fileName: "",
+      accept,
+      multiple,
+      disabled,
+      className,
+      onFiles: (files) => {
+        const copy = new DataTransfer();
+        for (const file of Array.from(files)) copy.items.add(file);
+        onFiles(copy.files);
       },
-      onKeyDown: (e) => {
-        var _a;
-        if (!disabled && (e.key === "Enter" || e.key === " ")) {
-          e.preventDefault();
-          (_a = inputRef.current) == null ? void 0 : _a.click();
-        }
-      },
-      onDragOver: (e) => {
-        e.preventDefault();
-        if (!disabled) setDragging(true);
-      },
-      onDragLeave: () => setDragging(false),
-      onDrop: handleDrop,
-      className: [
-        "flex flex-col items-center justify-center gap-3 rounded-(--radius-card) border-2 border-dashed py-10 transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-        dragging ? "border-stroke-focus bg-surface-raised" : "border-stroke-control hover:border-stroke-strong hover:bg-surface-page",
-        className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "file",
-        accept,
-        multiple,
-        disabled,
-        className: "hidden",
-        onChange: (e) => {
-          var _a;
-          if ((_a = e.target.files) == null ? void 0 : _a.length) onFiles(e.target.files);
-          e.target.value = "";
-        }
+      onChange: (event) => {
+        queueMicrotask(() => {
+          event.target.value = "";
+        });
       }
-    ),
-    children
+    }
   );
 }
 export {

package/dist/components/empty.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type Heading = 'h2' | 'h3' | 'h4';
+interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** What is missing (Figma: `title`): "Nenhum pedido por aqui". No "Ops!", and no blaming the person. */
+    title: ReactNode;
+    /** The heading level that fits the page's heading order. */
+    titleAs?: Heading;
+    /** How to change that (Figma: `showDescription` + `description`). */
+    description?: ReactNode;
+    /** The screen's subject (Figma: `showIcon`), an inline SVG shown in a soft lg Tile. */
+    icon?: ReactNode;
+    /**
+     * The Tile's tone. neutral (the Figma), or danger when the content failed to load (the Table's error state).
+     */
+    tone?: 'neutral' | 'danger';
+    /** The way out (Figma: `showAction`): a fill Button. */
+    action?: ReactNode;
+    /** A second way (Figma: `showSecondaryAction`): an outline Button. */
+    secondaryAction?: ReactNode;
+}
+/**
+ * Empty — Figma [RDS] Content/Empty. The empty state: what is missing, why, and what to do. A system error is an
+ * Alert, not an Empty. Styles: empty.css.
+ */
+declare function Empty({ title, titleAs: Title, description, icon, tone, action, secondaryAction, className, ...rest }: EmptyProps): react.JSX.Element;
+
+export { Empty, type EmptyProps };

package/dist/components/empty.js

@@ -0,0 +1,42 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tile } from "./tile.js";
+function Empty(_a) {
+  var _b = _a, {
+    title,
+    titleAs: Title = "h3",
+    description,
+    icon,
+    tone = "neutral",
+    action,
+    secondaryAction,
+    className
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "titleAs",
+    "description",
+    "icon",
+    "tone",
+    "action",
+    "secondaryAction",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-empty", className].filter(Boolean).join(" "), children: [
+    icon && /* @__PURE__ */ jsx(Tile, { icon, tone, variant: "soft", size: "lg" }),
+    /* @__PURE__ */ jsxs("div", { className: "rds-empty__text", children: [
+      /* @__PURE__ */ jsx(Title, { className: "rds-empty__title", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "rds-empty__description", children: description })
+    ] }),
+    (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "rds-empty__actions", children: [
+      action,
+      secondaryAction
+    ] })
+  ] }));
+}
+export {
+  Empty
+};

package/dist/components/fab.d.ts

@@ -1,14 +1,38 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
 
+interface FABProps extends ComponentPropsWithRef<'button'> {
+    /** The action's name, a verb ("Novo pedido") (Figma: `label`). Always shown: it is the accessible name. */
+    children: ReactNode;
+    /** Icon before the text (Figma: `hasIcon`). Decorative, rendered with aria-hidden. */
+    icon?: ReactNode;
+    /** Rendered as aria-disabled="true": stays in the tab order and takes focus, but clicks do nothing. */
+    disabled?: boolean;
+    /**
+     * Render the single child element (an `<a>`, a framework `Link`) with the FAB's classes and behaviour
+     * instead of a `<button>`. Use it when the action navigates.
+     */
+    asChild?: boolean;
+}
+/**
+ * FAB — Figma [RDS] Actions/FAB. The floating button of a screen's main action: a 56 pill in the brand
+ * colour, raised. One per screen, never beside a visible button that does the same thing. It does not
+ * place itself: FABRoot (below) or the page puts it in the corner. Styles: fab.css.
+ */
+declare function FAB({ children, icon, disabled, asChild, type, className, onClick, ...rest }: FABProps): react.JSX.Element;
 type FABConfig = {
     label: string;
+    /** The FAB's icon. Defaults to a plus. */
+    icon?: ReactNode;
+    /** Navigates with a plain `<a>`. For client-side routing, render <FAB asChild><Link/></FAB> yourself. */
     href?: string;
     onClick?: () => void;
-    /** cta = primary action button | save = saving-bar with primary + secondary */
+    /** cta = the FAB | save = a SavingBar (label saves, secondary discards) */
     variant?: 'cta' | 'save';
     disabled?: boolean;
+    /** Only for `save`: the bar shows its saving status. */
     loading?: boolean;
+    /** Only for `save`: the discard action. */
     secondary?: {
         label: string;
         onClick: () => void;
@@ -28,11 +52,10 @@ declare function FABProvider({ children }: {
 }): react.JSX.Element;
 declare function useFAB(): FABContextValue;
 /**
- * Register the page's primary FAB action.
- * Clears the FAB automatically on unmount.
+ * Register the page's primary FAB action. Clears the FAB automatically on unmount.
  * Pass a stable deps array to avoid re-registering on every render.
  */
 declare function usePageFAB(config: FABConfig | null, deps?: unknown[]): void;
-declare function FABRoot(): react.JSX.Element;
+declare function FABRoot(): react.JSX.Element | null;
 
-export { type FABConfig, FABProvider, FABRoot, useFAB, usePageFAB };
+export { FAB, type FABConfig, type FABProps, FABProvider, FABRoot, useFAB, usePageFAB };

package/dist/components/fab.js

@@ -1,5 +1,10 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
   useCallback,
@@ -8,9 +13,28 @@ import {
   useRef,
   useState
 } from "react";
-import Link from "next/link";
-import { Plus, Loader2 } from "lucide-react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { blockWhenDisabled } from "./internal/button.js";
+import { PlusIcon } from "./internal/icons.js";
+import { SavingBar } from "./saving-bar.js";
 import { useSavingBarActive } from "./saving-bar-context.js";
+function FAB(_a) {
+  var _b = _a, { children, icon, disabled, asChild, type = "button", className, onClick } = _b, rest = __objRest(_b, ["children", "icon", "disabled", "asChild", "type", "className", "onClick"]);
+  const Root = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxs(
+    Root,
+    __spreadProps(__spreadValues({}, rest), {
+      type: asChild ? void 0 : type,
+      className: ["rds-fab", className].filter(Boolean).join(" "),
+      "aria-disabled": disabled || void 0,
+      onClick: blockWhenDisabled(disabled, onClick),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "rds-fab__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx(Slottable, { children })
+      ]
+    })
+  );
+}
 const FABContext = createContext({
   config: null,
   setFAB: () => {
@@ -30,7 +54,7 @@ function FABProvider({ children }) {
   const [fabHidden, setFabHidden] = useState(false);
   const setFAB = useCallback((cfg) => setConfig(cfg), []);
   const clearFAB = useCallback(() => setConfig(null), []);
-  return /* @__PURE__ */ React.createElement(FABContext.Provider, { value: { config, setFAB, clearFAB, bottomOffset, setBottomOffset, fabHidden, setFabHidden } }, children);
+  return /* @__PURE__ */ jsx(FABContext.Provider, { value: { config, setFAB, clearFAB, bottomOffset, setBottomOffset, fabHidden, setFabHidden }, children });
 }
 function useFAB() {
   return useContext(FABContext);
@@ -49,50 +73,38 @@ function usePageFAB(config, deps = []) {
   }, [setFAB, clearFAB, ...deps]);
 }
 function FABRoot() {
+  var _a, _b, _c;
   const { config, bottomOffset, fabHidden } = useFAB();
   const savingBarActive = useSavingBarActive();
   const hiddenByBar = savingBarActive && (config == null ? void 0 : config.variant) !== "save";
   const visible = !!config && !fabHidden && !hiddenByBar;
   const wrapCls = [
-    "fixed right-6 z-40 flex items-center gap-2 transition-all duration-200",
-    visible ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-2 pointer-events-none"
-  ].join(" ");
-  const bottomStyle = { bottom: `${24 + bottomOffset}px` };
-  if ((config == null ? void 0 : config.variant) === "save") {
-    return /* @__PURE__ */ React.createElement("div", { className: wrapCls, style: bottomStyle }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 rounded-(--radius-control) px-4 py-3 [background:var(--fab-save-bg)] [box-shadow:var(--fab-save-shadow)]" }, config.secondary && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: config.secondary.onClick,
-        disabled: config.loading,
-        className: "rounded-(--radius-control) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 cursor-pointer [border-color:var(--fab-save-discard-border)] [color:var(--fab-save-discard-text)] hover:[border-color:var(--fab-save-discard-border-hover)] hover:[color:var(--fab-save-discard-text-hover)]"
-      },
-      config.secondary.label
-    ), /* @__PURE__ */ React.createElement(
-      "button",
+    "rds-fab-root",
+    (config == null ? void 0 : config.variant) === "save" ? "rds-fab-root--bar" : "rds-fab-root--fab",
+    !visible && "rds-fab-root--hidden"
+  ].filter(Boolean).join(" ");
+  const bottomStyle = { bottom: `${((config == null ? void 0 : config.variant) === "save" ? 0 : 24) + bottomOffset}px` };
+  if (!config) return null;
+  if (config.variant === "save") {
+    return /* @__PURE__ */ jsx("div", { className: wrapCls, style: bottomStyle, children: /* @__PURE__ */ jsx(
+      SavingBar,
       {
-        type: "button",
-        onClick: config.onClick,
-        disabled: config.disabled || config.loading,
-        className: "rounded-(--radius-control) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 cursor-pointer flex items-center gap-2 [background:var(--fab-save-primary-bg)] [color:var(--fab-save-primary-text)] hover:[background:var(--fab-save-primary-bg-hover)]"
-      },
-      config.loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin" }), "Salvando...") : config.label
-    )));
+        status: config.loading ? "saving" : "unsaved",
+        saveLabel: config.label,
+        onSave: () => {
+          var _a2;
+          return (_a2 = config.onClick) == null ? void 0 : _a2.call(config);
+        },
+        onDiscard: (_a = config.secondary) == null ? void 0 : _a.onClick,
+        discardLabel: (_b = config.secondary) == null ? void 0 : _b.label
+      }
+    ) });
   }
-  const btnCls = "flex items-center gap-2 h-12 pl-4 pr-5 rounded-(--radius-control) text-label font-semibold shadow-lg transition-colors cursor-pointer [background:var(--fab-cta-bg)] [color:var(--fab-cta-text)] hover:[background:var(--fab-cta-bg-hover)]";
-  return /* @__PURE__ */ React.createElement("div", { className: wrapCls, style: bottomStyle }, (config == null ? void 0 : config.href) ? /* @__PURE__ */ React.createElement(Link, { href: config.href, className: btnCls }, /* @__PURE__ */ React.createElement(Plus, { size: 16, strokeWidth: 2.5 }), config == null ? void 0 : config.label) : /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: config == null ? void 0 : config.onClick,
-      disabled: config == null ? void 0 : config.disabled,
-      className: btnCls + " disabled:opacity-50"
-    },
-    /* @__PURE__ */ React.createElement(Plus, { size: 16, strokeWidth: 2.5 }),
-    config == null ? void 0 : config.label
-  ));
+  const icon = (_c = config.icon) != null ? _c : /* @__PURE__ */ jsx(PlusIcon, {});
+  return /* @__PURE__ */ jsx("div", { className: wrapCls, style: bottomStyle, children: config.href ? /* @__PURE__ */ jsx(FAB, { asChild: true, icon, disabled: config.disabled, children: /* @__PURE__ */ jsx("a", { href: config.href, children: config.label }) }) : /* @__PURE__ */ jsx(FAB, { icon, disabled: config.disabled, onClick: config.onClick, children: config.label }) });
 }
 export {
+  FAB,
   FABProvider,
   FABRoot,
   useFAB,