@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/combobox.js

@@ -1,213 +1,232 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { forwardRef, useState, useRef, useEffect, useId, useImperativeHandle } from "react";
-import { ChevronDown, Check, Search as SearchIcon, X, Plus } 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"
-};
-function defaultFilter(opt, q) {
-  var _a, _b;
-  if (!q) return true;
-  const lower = q.toLowerCase();
-  return opt.label.toLowerCase().includes(lower) || ((_b = (_a = opt.description) == null ? void 0 : _a.toLowerCase().includes(lower)) != null ? _b : false);
-}
-const Combobox = forwardRef(function Combobox2(props, ref) {
-  var _a;
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { Chip } from "./chip.js";
+import { announce } from "./internal/announce.js";
+import { FieldShell, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+import { ChevronDownIcon, PlusIcon } from "./internal/icons.js";
+import { OptionContent } from "./internal/option-content.js";
+import { toggleValue, useListbox } from "./internal/use-listbox.js";
+const CREATE = "\0create";
+const normalize = (text) => text.normalize("NFD").replace(new RegExp("\\p{Diacritic}", "gu"), "").toLowerCase();
+function Combobox(props) {
+  var _a, _b, _c, _d;
   const {
-    options,
-    placeholder = "Selecione\u2026",
-    filter = defaultFilter,
-    emptyMessage = "Nada encontrado",
-    width = "full",
-    size = "md",
-    disabled = false,
-    className = "",
-    triggerContent,
-    dropdownMinWidth,
+    label,
+    labelPosition,
+    hint,
+    error,
+    errorMessage,
+    required,
+    options: rawOptions,
+    emptyMessage = "Nenhum resultado",
+    resultsMessage = (count) => `${count} ${count === 1 ? "resultado" : "resultados"}`,
     onCreate,
-    createLabel = (q) => `+ "${q}"`
+    creatable = onCreate !== void 0,
+    createLabel = (text) => `Cadastrar "${text}"`,
+    placeholder,
+    leadingIcon,
+    name,
+    disabled,
+    id,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
   } = props;
-  const isMulti = props.multi === true;
-  const [open, setOpen] = useState(false);
+  const multiple = props.multiple === true;
+  warnIfUnlabelled("Combobox", label, ariaLabel, ariaLabelledBy);
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error, errorMessage);
+  const [created, setCreated] = useState([]);
+  const options = useMemo(
+    () => [...rawOptions.map((o) => typeof o === "string" ? { value: o, label: o } : o), ...created],
+    [rawOptions, created]
+  );
+  const labelOf = (v) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = options.find((o) => o.value === v)) == null ? void 0 : _a2.label) != null ? _b2 : v;
+  };
+  const [ownSingle, setOwnSingle] = useState(multiple ? "" : (_a = props.defaultValue) != null ? _a : "");
+  const [ownMany, setOwnMany] = useState(multiple ? (_b = props.defaultValue) != null ? _b : [] : []);
+  const chosen = multiple ? (_c = props.value) != null ? _c : ownMany : [(_d = props.value) != null ? _d : ownSingle].filter(Boolean);
+  const chosenLabel = !multiple && chosen[0] ? labelOf(chosen[0]) : "";
+  const input = useRef(null);
   const [query, setQuery] = useState("");
-  const [activeIdx, setActiveIdx] = useState(0);
-  const [dropdownWidth, setDropdownWidth] = useState(0);
-  const triggerRef = useRef(null);
-  const inputRef = useRef(null);
-  const id = useId();
-  useImperativeHandle(ref, () => triggerRef.current);
-  useEffect(() => {
-    if (open && triggerRef.current) {
-      setDropdownWidth(triggerRef.current.offsetWidth);
-    }
-  }, [open]);
-  useEffect(() => {
-    if (open) {
-      requestAnimationFrame(() => {
-        var _a2;
-        return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-      });
-      setActiveIdx(0);
-    } else {
-      setQuery("");
-    }
-  }, [open]);
-  const filtered = options.filter((o) => filter(o, query));
-  const trimmed = query.trim();
-  const showCreate = !!onCreate && trimmed.length > 0 && !options.some((o) => o.label.toLowerCase() === trimmed.toLowerCase());
-  function doCreate() {
-    if (!onCreate || !trimmed) return;
-    onCreate(trimmed);
-    setOpen(false);
+  const [typing, setTyping] = useState(false);
+  const [open, setOpen] = useState(false);
+  function listFor(text, filtering2) {
+    const matches2 = filtering2 ? options.filter((o) => normalize(o.label).includes(normalize(text))) : options;
+    const typed = text.trim();
+    const exact = options.some((o) => normalize(o.label) === normalize(typed));
+    const rows2 = creatable && filtering2 && typed && !exact ? [...matches2, { value: CREATE, label: createLabel(typed), create: typed }] : matches2;
+    return { matches: matches2, rows: rows2 };
   }
-  function isSelected(opt) {
-    return isMulti ? props.value.includes(opt.value) : props.value === opt.value;
+  const onlyCreate = (rows2) => rows2.length === 1 && rows2[0].create !== void 0;
+  const filtering = multiple ? query !== "" : typing && query !== "";
+  const { matches, rows } = listFor(query, filtering);
+  const showList = open && rows.length > 0;
+  const empty = open && rows.length === 0;
+  function commitSingle(next) {
+    var _a2;
+    if (props.value === void 0) setOwnSingle(next);
+    (_a2 = props.onValueChange) == null ? void 0 : _a2.call(props, next);
   }
-  function selectedOption() {
+  function commitMany(next) {
     var _a2;
-    if (isMulti) return null;
-    return (_a2 = options.find((o) => o.value === props.value)) != null ? _a2 : null;
+    if (props.value === void 0) setOwnMany(next);
+    (_a2 = props.onValueChange) == null ? void 0 : _a2.call(props, next);
   }
-  function handleSelect(opt) {
-    if (opt.disabled) return;
-    if (isMulti) {
-      const current = props.value;
-      const next = current.includes(opt.value) ? current.filter((v) => v !== opt.value) : [...current, opt.value];
-      props.onChange(next);
-    } else {
-      props.onChange(opt.value);
-      setOpen(false);
-    }
+  function create(text) {
+    const made = onCreate == null ? void 0 : onCreate(text);
+    const option = typeof made === "string" ? { value: made, label: text } : made != null ? made : { value: text, label: text };
+    if (!options.some((o) => o.value === option.value)) setCreated((all) => [...all, option]);
+    return option;
   }
-  function handleKey(e) {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setActiveIdx((i) => Math.min(i + 1, filtered.length - 1));
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setActiveIdx((i) => Math.max(i - 1, 0));
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      const opt = filtered[activeIdx];
-      if (opt) handleSelect(opt);
-      else if (showCreate) doCreate();
-    } else if (e.key === "Escape") {
-      setOpen(false);
+  const { setActive, isSelected, onKeyDown: listKeyDown, controlProps, listProps, optionProps } = useListbox({
+    items: rows,
+    showing: showList,
+    selected: chosen,
+    multiple,
+    onOpen: () => setOpen(true),
+    onChoose: (row) => {
+      if (multiple) {
+        if (row.create) {
+          const option = create(row.create);
+          commitMany([...chosen, option.value]);
+          announce(`${option.label} adicionado`);
+        } else {
+          const adding = !chosen.includes(row.value);
+          commitMany(toggleValue(chosen, row.value));
+          announce(`${row.label} ${adding ? "adicionado" : "removido"}`);
+        }
+        if (query !== "") {
+          setQuery("");
+          setActive(-1);
+        }
+      } else {
+        commitSingle(row.create ? create(row.create).value : row.value);
+        setTyping(false);
+        setOpen(false);
+        setActive(-1);
+      }
+    }
+  });
+  function keyDown(event) {
+    if (listKeyDown(event)) return;
+    if (event.key === "Escape") {
+      if (open) {
+        event.preventDefault();
+        setOpen(false);
+        setActive(-1);
+      } else if (!multiple) {
+        setTyping(false);
+      }
+    } else if (multiple && event.key === "Backspace" && query === "" && chosen.length) {
+      const last = chosen[chosen.length - 1];
+      commitMany(chosen.slice(0, -1));
+      announce(`${labelOf(last)} removido`);
     }
   }
-  const sel = selectedOption();
-  const triggerLabel = isMulti ? props.value.length === 0 ? placeholder : `${props.value.length} selecionado(s)` : (_a = sel == null ? void 0 : sel.label) != null ? _a : placeholder;
-  const isPlaceholder = isMulti ? props.value.length === 0 : !sel;
-  const dropdown = /* @__PURE__ */ React.createElement(
-    "div",
+  function remove(v) {
+    const next = chosen.filter((x) => x !== v);
+    commitMany(next);
+    if (next.length === 0) requestAnimationFrame(() => {
+      var _a2;
+      return (_a2 = input.current) == null ? void 0 : _a2.focus();
+    });
+  }
+  const listName = typeof label === "string" ? label : ariaLabel;
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
     {
-      id,
-      role: "listbox",
-      style: { width: Math.max(dropdownWidth, dropdownMinWidth != null ? dropdownMinWidth : 0) || void 0 },
-      className: "max-h-72 overflow-hidden rounded-(--radius-control) border border-stroke-control bg-surface-default shadow-lg flex flex-col"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "relative shrink-0 border-b border-stroke-subtle" }, /* @__PURE__ */ React.createElement(SearchIcon, { size: 14, className: "absolute left-3 top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none" }), /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "text",
-        value: query,
-        onChange: (e) => {
-          setQuery(e.target.value);
-          setActiveIdx(0);
-        },
-        onKeyDown: handleKey,
-        placeholder: "Buscar\u2026",
-        className: "w-full pl-9 pr-8 py-2 text-label bg-transparent outline-none text-fg-primary placeholder:text-fg-placeholder",
-        "aria-label": "Buscar op\xE7\xF5es"
-      }
-    ), query && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          var _a2;
-          setQuery("");
-          (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-        },
-        "aria-label": "Limpar",
-        className: "absolute right-2 top-1/2 -translate-y-1/2 text-fg-muted hover:text-fg-primary p-1"
-      },
-      /* @__PURE__ */ React.createElement(X, { size: 12 })
-    )),
-    /* @__PURE__ */ React.createElement("div", { className: "overflow-y-auto py-1 max-h-60" }, filtered.length === 0 && !showCreate ? /* @__PURE__ */ React.createElement("div", { className: "px-3 py-3 text-label text-fg-muted text-center" }, emptyMessage) : /* @__PURE__ */ React.createElement(React.Fragment, null, filtered.map((opt, idx) => {
-      const selected = isSelected(opt);
-      const active = idx === activeIdx;
-      return /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          key: opt.value,
-          type: "button",
-          role: "option",
-          "aria-selected": selected,
-          disabled: opt.disabled,
-          onClick: () => handleSelect(opt),
-          onMouseEnter: () => setActiveIdx(idx),
-          className: [
-            "w-full flex items-start gap-2.5 px-3 py-2 text-label text-left transition-colors",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            active ? "bg-surface-raised" : "hover:bg-surface-raised"
-          ].join(" ")
-        },
-        opt.icon && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-fg-muted mt-0.5 [&_svg]:size-4" }, opt.icon),
-        /* @__PURE__ */ React.createElement("span", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "block text-fg-primary truncate" }, opt.label), opt.description && /* @__PURE__ */ React.createElement("span", { className: "block text-caption text-fg-muted truncate" }, opt.description)),
-        selected && /* @__PURE__ */ React.createElement(Check, { size: 14, className: "shrink-0 text-fg-muted mt-0.5" })
-      );
-    }), showCreate && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: doCreate,
-        className: "w-full flex items-center gap-2.5 px-3 py-2 text-label text-left text-fg-primary transition-colors hover:bg-surface-raised border-t border-stroke-subtle"
-      },
-      /* @__PURE__ */ React.createElement(Plus, { size: 14, className: "shrink-0 text-fg-muted" }),
-      /* @__PURE__ */ React.createElement("span", { className: "truncate" }, createLabel(trimmed))
-    )))
+      kind: "rds-combobox",
+      controlId,
+      hintId,
+      errorId,
+      label,
+      labelPosition,
+      hint,
+      errorMessage,
+      invalid,
+      required,
+      disabled,
+      boxClassName: multiple ? "rds-combobox__box--multiple" : void 0,
+      className,
+      style,
+      children: [
+        leadingIcon && /* @__PURE__ */ jsx("span", { className: "rds-field__icon", "aria-hidden": "true", children: leadingIcon }),
+        multiple && chosen.length > 0 && /* @__PURE__ */ jsx("ul", { className: "rds-combobox__chips", "aria-label": `Escolhidos: ${chosen.length}`, children: chosen.map((v) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Chip, { disabled, onRemove: () => remove(v), children: labelOf(v) }) }, v)) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({
+            ref: input,
+            id: controlId,
+            className: "rds-field__control",
+            type: "text",
+            role: "combobox",
+            autoComplete: "off",
+            "aria-autocomplete": "list"
+          }, controlProps), {
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": describedBy,
+            "aria-required": required || void 0,
+            disabled,
+            placeholder: multiple && chosen.length ? void 0 : labelPosition === "floating" && label ? " " : placeholder,
+            value: multiple ? query : typing ? query : chosenLabel,
+            onChange: (event) => {
+              const text = event.target.value;
+              setQuery(text);
+              setTyping(true);
+              setOpen(true);
+              setActive(onlyCreate(listFor(text, text !== "").rows) ? 0 : -1);
+              if (!multiple && text === "" && chosen.length) commitSingle("");
+            },
+            onClick: () => setOpen((current) => !current),
+            onKeyDown: keyDown,
+            onBlur: () => {
+              setOpen(false);
+              setTyping(false);
+              setQuery("");
+              setActive(-1);
+            }
+          })
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: ["rds-field__icon", "rds-combobox__chevron", open && "rds-combobox__chevron--open"].filter(Boolean).join(" "),
+            "aria-hidden": "true",
+            onMouseDown: (event) => {
+              var _a2;
+              event.preventDefault();
+              if (disabled) return;
+              (_a2 = input.current) == null ? void 0 : _a2.focus();
+              setOpen((current) => !current);
+            },
+            children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+          }
+        ),
+        name && (chosen.length ? chosen : multiple ? [] : [""]).map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v }, v)),
+        showList && /* @__PURE__ */ jsx("ul", __spreadProps(__spreadValues({}, listProps), { "aria-label": listName, className: "rds-listbox rds-combobox__list", children: rows.map((row, index) => /* @__PURE__ */ jsx(
+          "li",
+          __spreadProps(__spreadValues({}, optionProps(row, index)), {
+            className: row.create ? "rds-listbox__option rds-combobox__create" : "rds-listbox__option",
+            children: /* @__PURE__ */ jsx(OptionContent, { icon: row.create ? /* @__PURE__ */ jsx(PlusIcon, {}) : row.icon, selected: !row.create && isSelected(row.value), children: row.label })
+          }),
+          row.value
+        )) })),
+        empty && /* @__PURE__ */ jsx("div", { className: "rds-listbox rds-combobox__list rds-combobox__empty", "aria-hidden": "true", children: emptyMessage }),
+        /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", "aria-live": "polite", children: open && filtering ? matches.length ? resultsMessage(matches.length) : emptyMessage : "" })
+      ]
+    }
   );
-  return /* @__PURE__ */ React.createElement("div", { className: ["relative inline-block", width === "full" ? "w-full" : "w-auto", className].join(" ") }, /* @__PURE__ */ React.createElement(
-    Popover,
-    {
-      trigger: /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          ref: triggerRef,
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            if (!disabled) setOpen((o) => !o);
-          },
-          disabled,
-          "aria-haspopup": "listbox",
-          "aria-expanded": open,
-          "aria-controls": id,
-          className: [
-            "w-full flex items-center justify-between gap-2 rounded-(--radius-control) border border-stroke-control 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",
-            SIZE_CLASS[size]
-          ].join(" ")
-        },
-        /* @__PURE__ */ React.createElement("span", { className: ["truncate inline-flex items-center", isPlaceholder ? "text-fg-placeholder" : "text-fg-primary"].join(" ") }, triggerContent ? triggerContent(sel) : /* @__PURE__ */ React.createElement(React.Fragment, null, (sel == null ? void 0 : sel.icon) && /* @__PURE__ */ React.createElement("span", { className: "inline-flex mr-2 align-middle [&_svg]:size-4" }, sel.icon), triggerLabel)),
-        /* @__PURE__ */ React.createElement(ChevronDown, { size: 16, className: "text-fg-muted shrink-0" })
-      ),
-      triggerClassName: width === "full" ? "block w-full" : "inline-block",
-      placement: "bottom-start",
-      offset: 4,
-      open,
-      onOpenChange: (v) => {
-        if (!disabled) setOpen(v);
-      }
-    },
-    () => dropdown
-  ));
-});
+}
 export {
   Combobox
 };

package/dist/components/command.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { MenuItemContentProps } from './internal/menu.js';
+
+interface CommandProps {
+    /** The element that opens it (a Button). Ctrl K (⌘ K on a Mac) opens it too, unless `hotkey` is off. */
+    trigger?: ReactElement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled: what is typed in the search (Figma: `query`). */
+    query?: string;
+    /** Uncontrolled: what the search starts with. */
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    /** What the person can search for, shown while the search is empty. */
+    placeholder?: string;
+    /** The results (Figma: the `results` slot): CommandGroups of CommandItems. They filter by the search. */
+    children: ReactNode;
+    /** Shown when nothing matches the search. */
+    emptyMessage?: string;
+    /** Ctrl K (⌘ K) opens and closes it. On by default. */
+    hotkey?: boolean;
+    /** The window's name for screen readers. */
+    label?: string;
+    /** Where the layer is portaled (default document.body). */
+    container?: HTMLElement | null;
+}
+/**
+ * Command — Figma [RDS] Overlays/Command. The command palette: search, then go anywhere or run an action. A modal
+ * window (Radix Dialog) with a search field (role="combobox", aria-activedescendant) over a listbox of results in
+ * groups. Typing filters (accents and case don't matter, `keywords` count too), the arrows move, Enter runs the
+ * highlighted result, Escape closes and gives the focus back. Everything in it also exists on the screen.
+ * Styles: internal/menu.css and command.css.
+ */
+declare function Command({ trigger, open, defaultOpen, onOpenChange, query: queryProp, defaultQuery, onQueryChange, placeholder, children, emptyMessage, hotkey, label, container, }: CommandProps): react.JSX.Element;
+interface CommandGroupProps {
+    /** The group's visible name ("Ir para", "Ações"). */
+    label: string;
+    /** The CommandItems. The group hides when none matches. */
+    children: ReactNode;
+}
+/** A group of results under a name (Figma: the `group` and its `group-label`). */
+declare function CommandGroup({ label, children }: CommandGroupProps): react.JSX.Element;
+interface CommandItemProps extends MenuItemContentProps {
+    /** Runs when chosen (Enter or a click); the palette closes first. */
+    onSelect?: () => void;
+    /** The text the search matches. Defaults to the label when it is plain text. */
+    value?: string;
+    /** Other words that find it ("envio" finds "Novo disparo"). */
+    keywords?: string[];
+    /** Shown but can't be chosen; the arrows skip it. */
+    disabled?: boolean;
+}
+/** One result (Figma .menu/item): role="option". It shows only while it matches the search. */
+declare function CommandItem({ children, icon, shortcut, onSelect, value, keywords, disabled }: CommandItemProps): react.JSX.Element | null;
+
+export { Command, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, type CommandProps };