@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/drawer.js

@@ -1,94 +1,62 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsxs("div", { className: "fixed inset-0 z-50 flex", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [background:var(--overlay-scrim)]", onClick: closeOnBackdrop ? onClose : void 0, "aria-hidden": "true" }),
-      /* @__PURE__ */ jsxs(
-        "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(" "),
-          children: [
-            (title || !hideClose) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-4 border-b border-stroke-default shrink-0", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-body font-semibold text-fg-primary", children: title }),
-                subtitle && /* @__PURE__ */ jsx("p", { className: "text-label text-fg-muted mt-0.5", children: subtitle })
-              ] }),
-              !hideClose && /* @__PURE__ */ jsx(
-                "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",
-                  children: /* @__PURE__ */ jsx(X, { size: 20 })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-6 py-4", children }),
-            footer && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-stroke-default shrink-0", children: footer })
-          ]
-        }
-      )
-    ] }),
-    container != null ? container : document.body
+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));
+      },
+      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,65 +1,37 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsxs(
-    "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(" "),
-      children: [
-        /* @__PURE__ */ jsx(
-          "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 = "";
-            }
-          }
-        ),
-        children
-      ]
+      onChange: (event) => {
+        queueMicrotask(() => {
+          event.target.value = "";
+        });
+      }
     }
   );
 }

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 };