@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/README.md

@@ -3,31 +3,43 @@
 React components, styles and a React Native target for [Rojão DS](https://ds.rojao.ai).
 
 > **Only want the theme?** The engine is [`@rojaostudio/ds-core`](https://www.npmjs.com/package/@rojaostudio/ds-core) —
-> tokens and theme derivation, with **zero peer dependencies**. It won't make you declare React
-> or Tailwind.
+> tokens and theme derivation, with **zero peer dependencies**. It won't make you declare React.
 
 ```bash
 npm i @rojaostudio/ds
 ```
 
 ```css
-/* your root stylesheet */
-@import "tailwindcss";
-@import "@rojaostudio/ds/styles/base.css";
-@import "@rojaostudio/ds/styles/themes/rojao.css";   /* or your own generated theme */
+/* your root stylesheet: the theme, the tokens and every component's styles, in cascade layers */
+@import "@rojaostudio/ds/styles/rds.css";
 ```
 
 ```tsx
 import { Button } from '@rojaostudio/ds/components/button';
 
-<Button variant="primary">Save</Button>
+<Button>Salvar</Button>
 ```
 
-Then put the theme class on `<html>` — add `dark` for dark mode:
+Add `dark` to `<html>` (or any element) for dark mode:
 
 ```html
-<html class="theme-rojao">
-<html class="theme-rojao dark">
+<html class="dark">
+```
+
+The stylesheet declares its layers first (`rds.theme`, `rds.tokens`, `rds.components`), so your own unlayered CSS
+always wins over the design system without `!important`. The components need no Tailwind and no other stylesheet.
+
+### Legacy: `base.css` (deprecated)
+
+`styles/base.css` is the 1.x stylesheet. It stays in the package for the apps that still use its Tailwind
+utilities (`bg-surface-*`, `text-fg-*`, `h-control-*`…) and its CSS variables, and it still needs Tailwind 4
+(`@theme inline`). No component reads it any more. Move app code off it; it leaves in a future major.
+
+```css
+/* only while the app still uses the 1.x utilities */
+@import "tailwindcss";
+@import "@rojaostudio/ds/styles/base.css";
+@import "@rojaostudio/ds/styles/rds.css";
 ```
 
 ## Import the component, not the barrel
@@ -45,11 +57,61 @@ can keep the barrel and add:
 experimental: { optimizePackageImports: ['@rojaostudio/ds'] }
 ```
 
+## Button sizes and the icon side
+
+`Button` and `IconButton` take `size`: `sm` (36), `md` (44, the default) or `lg` (52). Text is 14/20 on sm and
+md, 16/24 on lg; the Button icon is 16, 16, 20 and the IconButton icon 16, 20, 24. The measures come from the
+`--button-size-<sm|md|lg>-*` tokens (height, padding-x, padding-y, gap, icon, icon-only, text-size, text-line).
+
+The touch target is 44 × 44 in every size. On `sm`, an invisible layer extends it to 44 under a coarse
+pointer (`@media (pointer: coarse)`), without moving the layout or the focus ring. Keep two `sm` buttons at
+least 8px apart on touch screens, or their targets overlap.
+
+`Button` also takes `iconPosition`: `end` (the default) puts the icon after the text, `start` before it. While
+`loading`, the loader takes the icon's side; without an icon, it covers the label.
+
+```tsx
+<Button size="sm" icon={<PlusIcon />} iconPosition="start">Novo cliente</Button>
+<IconButton size="lg" icon={<PlusIcon />} label="Novo cliente" />
+```
+
+The components that draw a Button or an IconButton inside (Alert, Toast, Dialog, Calendar, Carousel…) use md,
+as their Figma specs do.
+
+## IconButton goes with a Tooltip
+
+An icon alone doesn't say what the button does. Every `IconButton` is paired with a `Tooltip` carrying the
+same text as its `label`; it shows on hover and on keyboard focus. They are two components, always together
+(the IconButton has no tooltip inside it):
+
+```tsx
+import { IconButton } from '@rojaostudio/ds/components/icon-button';
+import { Tooltip } from '@rojaostudio/ds/components/tooltip';
+
+<Tooltip text="Novo cliente">
+  <IconButton icon={<PlusIcon />} label="Novo cliente" />
+</Tooltip>
+```
+
+The pair can itself be the trigger of a `DropdownMenu` or a `Popover`. The IconButtons the design system
+renders itself (the × of Alert, Dialog and Toast, the Calendar and Carousel arrows) already come with theirs.
+
 ## Requirements
 
-Tailwind CSS 4 and React 19. `base.css` uses `@theme inline`, so Tailwind 4 isn't optional here —
-it's the layer the utilities come from. If that's not your stack, `@rojaostudio/ds-core` gives you
-the tokens without any of it.
+React 19. Tailwind CSS is an **optional** peer: only the legacy `base.css` needs it. A few components bring an
+optional peer of their own, installed only if you use them: `react-image-crop` (ImageCropModal, ImageUpload) and
+`react-international-phone` (PhoneInput).
+
+## Icons
+
+`@rojaostudio/ds/icons` re-exports a set of `lucide-react` icons (an optional peer) and carries the icons lucide
+does not have, drawn by the design system itself, such as `PixIcon`:
+
+```tsx
+import { PixIcon } from '@rojaostudio/ds/icons';
+
+<PixIcon size={16} />
+```
 
 ## React Native
 

package/dist/compat/generate.d.ts

@@ -2,5 +2,4 @@ export * from '@rojaostudio/ds-core/generate';
 import '@rojaostudio/ds-core/recipes';
 import '@rojaostudio/ds-core/themes';
 import '@rojaostudio/ds-core/tokens';
-import 'lucide-react';
 import 'lucide-react-native';

package/dist/components/accordion.d.ts

@@ -1,35 +1,45 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-interface AccordionSingleProps {
-    type?: 'single';
-    defaultValue?: string;
-    value?: string | null;
-    onChange?: (value: string | null) => void;
-    collapsible?: boolean;
+type Heading = 'h2' | 'h3' | 'h4';
+type AccordionBase = {
+    /** The AccordionItems, in order (Figma: the `items` slot). */
     children: ReactNode;
     className?: string;
-}
-interface AccordionMultiProps {
-    type: 'multi';
+};
+type AccordionProps = AccordionBase & ({
+    /** single (default): one open at a time, and it can close. multiple: when the person compares sections. */
+    type?: 'single';
+    /** The item open at first (its `value`). */
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+} | {
+    type: 'multiple';
     defaultValue?: string[];
     value?: string[];
-    onChange?: (value: string[]) => void;
-    children: ReactNode;
-    className?: string;
-}
-type AccordionProps = AccordionSingleProps | AccordionMultiProps;
-declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+    onValueChange?: (value: string[]) => void;
+});
+/**
+ * Accordion — Figma [RDS] Content/Accordion (Radix Accordion). Questions or sections that open and close, one under
+ * the other. Keyboard: Tab between the triggers, Enter or Space opens, arrows move between them, Home and End jump
+ * to the first and the last. It is also the Collapsible: a single section that opens is an Accordion with one item.
+ * Styles: accordion.css.
+ */
+declare function Accordion({ className, children, ...props }: AccordionProps): react.JSX.Element;
 interface AccordionItemProps {
+    /** A unique id for this item, used by `defaultValue` and `value`. */
     value: string;
+    /** What is inside (Figma: `title`), as a question or a subject. Never a vague "more information". */
     title: ReactNode;
-    /** Subtítulo opcional ao lado do título (ex: contagem, tag). */
-    meta?: ReactNode;
+    /** The heading level that fits the page's heading order. */
+    titleAs?: Heading;
+    /** The answer (Figma: `content`). */
     children: ReactNode;
-    /** Ícone leading no header. */
-    icon?: ReactNode;
     disabled?: boolean;
+    className?: string;
 }
-declare function AccordionItem({ value, title, meta, children, icon, disabled }: AccordionItemProps): react.JSX.Element;
+/** One item (Figma: .accordion/item): a heading with a button, and a region that opens. */
+declare function AccordionItem({ value, title, titleAs, children, disabled, className }: AccordionItemProps): react.JSX.Element;
 
 export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps };

package/dist/components/accordion.js

@@ -1,99 +1,37 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useId, useImperativeHandle, useRef } from "react";
-import { ChevronDown } from "lucide-react";
-import { createContext, useContext } from "react";
-const Ctx = createContext(null);
-const Accordion = forwardRef(function Accordion2(props, ref) {
-  var _a, _b;
-  const rootRef = useRef(null);
-  useImperativeHandle(ref, () => rootRef.current);
-  const isMulti = props.type === "multi";
-  const [internalSingle, setInternalSingle] = useState(
-    isMulti ? null : (_a = props.defaultValue) != null ? _a : null
-  );
-  const [internalMulti, setInternalMulti] = useState(
-    isMulti ? (_b = props.defaultValue) != null ? _b : [] : []
-  );
-  const isControlled = props.value !== void 0;
-  const isOpen = (v) => {
-    if (isMulti) {
-      const value2 = isControlled ? props.value : internalMulti;
-      return value2.includes(v);
-    }
-    const value = isControlled ? props.value : internalSingle;
-    return value === v;
-  };
-  const toggle = (v) => {
-    var _a2, _b2;
-    if (isMulti) {
-      const current = isControlled ? props.value : internalMulti;
-      const next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];
-      if (!isControlled) setInternalMulti(next);
-      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, next);
-    } else {
-      const single = props;
-      const current = isControlled ? props.value : internalSingle;
-      const collapsible = single.collapsible !== false;
-      const next = current === v ? collapsible ? null : current : v;
-      if (!isControlled) setInternalSingle(next);
-      (_b2 = single.onChange) == null ? void 0 : _b2.call(single, next);
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "./internal/icons.js";
+function Accordion(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  const classes = ["rds-accordion", className].filter(Boolean).join(" ");
+  if (props.type === "multiple") {
+    return /* @__PURE__ */ jsx(AccordionPrimitive.Root, __spreadProps(__spreadValues({}, props), { type: "multiple", className: classes, children }));
+  }
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, __spreadProps(__spreadValues({}, props), { type: "single", collapsible: true, className: classes, children }));
+}
+function AccordionItem({ value, title, titleAs = "h3", children, disabled, className }) {
+  const Title = titleAs;
+  return /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Item,
+    {
+      value,
+      disabled,
+      className: ["rds-accordion__item", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx(Title, { className: "rds-accordion__heading", children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, { className: "rds-accordion__trigger", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-accordion__title", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "rds-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+        ] }) }) }),
+        /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "rds-accordion__content", children: /* @__PURE__ */ jsx("div", { className: "rds-accordion__body", children }) })
+      ]
     }
-  };
-  return /* @__PURE__ */ jsx(Ctx.Provider, { value: { isOpen, toggle }, children: /* @__PURE__ */ jsx("div", { ref: rootRef, className: ["border-y border-stroke-default divide-y divide-stroke-subtle", props.className].filter(Boolean).join(" "), children: props.children }) });
-});
-function AccordionItem({ value, title, meta, children, icon, disabled = false }) {
-  const ctx = useContext(Ctx);
-  if (!ctx) throw new Error("AccordionItem must be used inside Accordion");
-  const open = ctx.isOpen(value);
-  const id = useId();
-  const headerId = `${id}-header`;
-  const panelId = `${id}-panel`;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h3", { children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        id: headerId,
-        "aria-expanded": open,
-        "aria-controls": panelId,
-        disabled,
-        onClick: () => ctx.toggle(value),
-        className: [
-          "w-full flex items-center gap-3 py-3 px-4 min-h-control-md text-left transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-inset",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "hover:bg-surface-raised"
-        ].join(" "),
-        children: [
-          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-muted [&_svg]:size-4", children: icon }),
-          /* @__PURE__ */ jsx("span", { className: "flex-1 font-medium text-fg-primary text-label", children: title }),
-          meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-caption text-fg-muted", children: meta }),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              size: 16,
-              className: ["shrink-0 text-fg-muted transition-transform", open ? "rotate-180" : ""].join(" ")
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: panelId,
-        role: "region",
-        "aria-labelledby": headerId,
-        className: [
-          "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
-          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-        ].join(" "),
-        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 text-label text-fg-secondary leading-relaxed", children }) })
-      }
-    )
-  ] });
+  );
 }
 export {
   Accordion,

package/dist/components/action-bar.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface ActionBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** How many are selected, as shown and announced ("3 selecionados") (Figma: `count`). */
+    count: ReactNode;
+    /**
+     * The actions (Figma: slot `actions`). Use `tone="inverse"` Buttons (ghost): the bar is painted with
+     * colors/primary, which is what the inverse tone is drawn for, in light and in dark.
+     */
+    children: ReactNode;
+    /** Shows the X that clears the selection and is called when it is pressed (Figma: `showClear`). */
+    onClear?: () => void;
+    /** The X's accessible name. */
+    clearLabel?: string;
+}
+/**
+ * ActionBar — Figma [RDS] Actions/ActionBar. The bulk action bar: it shows while items are selected and
+ * leaves when the selection is cleared. It does not place itself: put it sticky or fixed at the foot of
+ * the area. Styles: action-bar.css.
+ */
+declare function ActionBar({ count, children, onClear, clearLabel, className, ...rest }: ActionBarProps): react.JSX.Element;
+
+export { ActionBar, type ActionBarProps };

package/dist/components/action-bar.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { CloseIcon } from "./internal/icons.js";
+function ActionBar(_a) {
+  var _b = _a, {
+    count,
+    children,
+    onClear,
+    clearLabel = "Limpar sele\xE7\xE3o",
+    className
+  } = _b, rest = __objRest(_b, [
+    "count",
+    "children",
+    "onClear",
+    "clearLabel",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      role: "region",
+      "aria-label": "A\xE7\xF5es da sele\xE7\xE3o"
+    }, rest), {
+      className: ["rds-actionbar", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-actionbar__count", "aria-live": "polite", children: count }),
+        /* @__PURE__ */ jsx("span", { className: "rds-actionbar__divider", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-actionbar__actions", children: [
+          children,
+          onClear && /* @__PURE__ */ jsx(Tooltip, { text: clearLabel, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "rds-actionbar__clear",
+              icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+              label: clearLabel,
+              tone: "inverse",
+              variant: "ghost",
+              onClick: onClear
+            }
+          ) })
+        ] })
+      ]
+    })
+  );
+}
+export {
+  ActionBar
+};

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+
+type AlertDialogTone = 'danger' | 'action';
+interface AlertDialogProps {
+    /** The element that opens it (a Button). Leave it out to control it with `open`. */
+    trigger?: ReactElement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The question, with its object (Figma: `title`): "Excluir a lista Clientes?". */
+    title: ReactNode;
+    /** The consequence, including that it can't be undone (Figma: `description`). */
+    description: ReactNode;
+    /** danger when the action deletes or loses something; action when it only can't be taken back. */
+    tone?: AlertDialogTone;
+    /** The confirm button repeats the title's verb ("Excluir lista"), never a bare "Sim" or "OK". */
+    confirmLabel: string;
+    onConfirm: () => void;
+    cancelLabel?: string;
+    /** The veil over the page (Figma: `showScrim`). */
+    showScrim?: boolean;
+}
+/**
+ * AlertDialog — Figma [RDS] Feedback/AlertDialog. A question that interrupts before an action with no way back
+ * (Radix AlertDialog): role="alertdialog", the focus opens on Cancel and stays inside until it closes, then goes
+ * back to what opened it. Escape cancels; clicking outside does not close. Styles: alert-dialog.css.
+ */
+declare function AlertDialog({ trigger, open, defaultOpen, onOpenChange, title, description, tone, confirmLabel, onConfirm, cancelLabel, showScrim, }: AlertDialogProps): react.JSX.Element;
+
+export { AlertDialog, type AlertDialogProps, type AlertDialogTone };

package/dist/components/alert-dialog.js

@@ -0,0 +1,43 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { Button } from "./button.js";
+function AlertDialog({
+  trigger,
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  description,
+  tone = "danger",
+  confirmLabel,
+  onConfirm,
+  cancelLabel = "Cancelar",
+  showScrim = true
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger && /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        AlertDialogPrimitive.Overlay,
+        {
+          className: showScrim ? "rds-alert-dialog__scrim" : "rds-alert-dialog__scrim rds-alert-dialog__scrim--clear"
+        }
+      ),
+      /* @__PURE__ */ jsxs(AlertDialogPrimitive.Content, { className: "rds-alert-dialog", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rds-alert-dialog__content", children: [
+          /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { className: "rds-alert-dialog__title", children: title }),
+          /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { className: "rds-alert-dialog__description", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-alert-dialog__footer", children: [
+          /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "outline", children: cancelLabel }) }),
+          /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { asChild: true, children: /* @__PURE__ */ jsx(Button, { tone, variant: "fill", onClick: onConfirm, children: confirmLabel }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  AlertDialog
+};

package/dist/components/alert.d.ts

@@ -1,24 +1,36 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-type AlertVariant = 'success' | 'danger' | 'warning' | 'info' | 'neutral';
-interface AlertProps {
-    variant?: AlertVariant;
-    title?: ReactNode;
-    children?: ReactNode;
-    /** Botão close (X). */
+type AlertTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** danger went wrong; warning can still be avoided; success went right; info and neutral only inform. */
+    tone?: AlertTone;
+    /** What happened, in one line (Figma: `title`). */
+    title: ReactNode;
+    /** What to do about it (Figma: `showDescription` + `description`). */
+    description?: ReactNode;
+    /** The tone's icon (Figma: `showIcon`). Decorative: the title says the same in words. */
+    showIcon?: boolean;
+    /** One way out (Figma: `showAction`), usually a neutral ghost Button or a link rendered with Button asChild. */
+    action?: ReactNode;
+    /**
+     * Lets the person dismiss it (Figma: `showClose`): an × named by `closeLabel`. The Alert hides itself, calls
+     * this, and the focus moves to what comes next on the page.
+     */
     onClose?: () => void;
-    /** Action button inline (label + onClick). */
-    action?: {
-        label: string;
-        onClick: () => void;
-    };
-    /** Ícone customizado (substitui o default da variant). */
-    icon?: ReactNode;
-    /** Esconde o ícone. default = false. */
-    hideIcon?: boolean;
-    className?: string;
+    /** The ×'s accessible name. */
+    closeLabel?: string;
+    /**
+     * How it is announced. none (default): already on the page when it loads. status: it appears after
+     * something, calmly (role="status"). alert: it appears after an action and is urgent (role="alert").
+     */
+    announce?: 'none' | 'status' | 'alert';
 }
-declare function Alert({ variant, title, children, onClose, action, icon, hideIcon, className, }: AlertProps): react.JSX.Element;
+/**
+ * Alert — Figma [RDS] Feedback/Alert. A message that stays on the screen, inside the content, while the situation
+ * lasts: what happened and what to do. One per screen. A short confirmation after an action is a Toast.
+ * Styles: alert.css.
+ */
+declare function Alert({ tone, title, description, showIcon, action, onClose, closeLabel, announce, className, ...rest }: AlertProps): react.JSX.Element | null;
 
-export { Alert, type AlertProps, type AlertVariant };
+export { Alert, type AlertProps, type AlertTone };