@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/checkbox.js

@@ -1,78 +1,97 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { forwardRef, useEffect, useId, useRef } from "react";
-const SIZE_CLASS = {
-  sm: { box: "size-3.5", svg: "size-3.5", label: "text-caption", icon: 12 },
-  md: { box: "size-4", svg: "size-4", label: "text-label", icon: 14 }
-};
-const Checkbox = forwardRef(function Checkbox2(_a, ref) {
-  var _b = _a, { label, description, indeterminate = false, error, size = "md", className = "", id } = _b, props = __objRest(_b, ["label", "description", "indeterminate", "error", "size", "className", "id"]);
-  const innerRef = useRef(null);
-  const setRef = (node) => {
-    innerRef.current = node;
-    if (typeof ref === "function") ref(node);
-    else if (ref) ref.current = node;
-  };
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ChoiceRow } from "./internal/choice.js";
+import { hasContent, warnIfUnlabelled } from "./internal/field.js";
+import { CheckIcon, MinusIcon } from "./internal/icons.js";
+function Checkbox(_a) {
+  var _b = _a, {
+    children,
+    hint,
+    checked,
+    onCheckedChange,
+    error,
+    errorMessage,
+    required,
+    disabled,
+    id,
+    className,
+    style,
+    onChange,
+    ref
+  } = _b, input = __objRest(_b, [
+    "children",
+    "hint",
+    "checked",
+    "onCheckedChange",
+    "error",
+    "errorMessage",
+    "required",
+    "disabled",
+    "id",
+    "className",
+    "style",
+    "onChange",
+    "ref"
+  ]);
+  warnIfUnlabelled("Checkbox", children, input["aria-label"], input["aria-labelledby"]);
+  const own = useRef(null);
+  const indeterminate = checked === "indeterminate";
   useEffect(() => {
-    if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+    if (own.current) own.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  const generatedId = useId();
-  const inputId = id != null ? id : generatedId;
-  const errId = `${inputId}-error`;
-  const sz = SIZE_CLASS[size];
-  return /* @__PURE__ */ React.createElement("div", { className: "inline-flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement(
-    "label",
+  const invalid = Boolean(error || hasContent(errorMessage));
+  function change(event) {
+    onChange == null ? void 0 : onChange(event);
+    onCheckedChange == null ? void 0 : onCheckedChange(event.target.checked);
+  }
+  function setRef(node) {
+    own.current = node;
+    if (node) node.indeterminate = indeterminate;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }
+  return /* @__PURE__ */ jsx(
+    ChoiceRow,
     {
-      htmlFor: inputId,
-      className: [
-        "inline-flex items-start gap-2 cursor-pointer",
-        "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
-        className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("span", { className: ["relative flex shrink-0 mt-0.5", sz.box].join(" ") }, /* @__PURE__ */ React.createElement(
-      "input",
-      __spreadValues({
-        ref: setRef,
-        type: "checkbox",
-        id: inputId,
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": error ? errId : void 0,
-        className: [
-          "peer appearance-none rounded shrink-0 cursor-pointer",
-          sz.box,
-          "bg-surface-default",
-          error ? "border border-danger checked:bg-danger checked:border-danger indeterminate:bg-danger indeterminate:border-danger" : "border border-stroke-control checked:bg-brand-primary checked:border-brand-primary indeterminate:bg-brand-primary indeterminate:border-brand-primary",
-          "focus-visible:ring-2 focus-visible:ring-stroke-focus/30 focus-visible:outline-none",
-          "disabled:cursor-not-allowed",
-          "transition-colors"
-        ].join(" ")
-      }, props)
-    ), /* @__PURE__ */ React.createElement(
-      "svg",
-      {
-        className: ["absolute inset-0 pointer-events-none hidden peer-checked:block text-brand-on-primary", sz.svg].join(" "),
-        viewBox: "0 0 16 16",
-        fill: "none",
-        "aria-hidden": "true"
-      },
-      /* @__PURE__ */ React.createElement("path", { d: "M3.5 8L6.5 11L12.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-    ), /* @__PURE__ */ React.createElement(
-      "svg",
-      {
-        className: ["absolute inset-0 pointer-events-none hidden peer-indeterminate:block text-brand-on-primary", sz.svg].join(" "),
-        viewBox: "0 0 16 16",
-        fill: "none",
-        "aria-hidden": "true"
-      },
-      /* @__PURE__ */ React.createElement("path", { d: "M4 8H12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-    )),
-    (label || description) && /* @__PURE__ */ React.createElement("span", { className: "flex flex-col gap-0.5 select-none" }, label && /* @__PURE__ */ React.createElement("span", { className: [sz.label, "text-fg-primary leading-snug"].join(" ") }, label), description && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted leading-snug" }, description))
-  ), error && /* @__PURE__ */ React.createElement("p", { id: errId, className: [sz.box === "size-3.5" ? "pl-5" : "pl-6", "text-caption text-danger-text"].join(" ") }, error));
-});
+      kind: "rds-checkbox",
+      id,
+      label: children,
+      hint,
+      required,
+      disabled,
+      invalid,
+      errorMessage,
+      className,
+      style,
+      control: ({ id: controlId, describedBy }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, input), {
+            ref: setRef,
+            id: controlId,
+            type: "checkbox"
+          }), checked !== void 0 ? { checked: checked === true } : {}), {
+            required,
+            disabled,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": [describedBy, input["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+            onChange: change
+          })
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "rds-checkbox__box", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-checkbox__check", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "rds-checkbox__minus", children: /* @__PURE__ */ jsx(MinusIcon, {}) })
+        ] })
+      ] })
+    }
+  );
+}
 export {
   Checkbox
 };

package/dist/components/chip-input.d.ts

@@ -1,26 +1,52 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { FieldTextProps } from './internal/field.js';
 
-interface ChipItem {
-    id: string;
-    label: string;
-}
-interface ChipInputProps {
-    value: ChipItem[];
-    onChange: (next: ChipItem[]) => void;
-    /** Available suggestions — filtered by current input text. */
-    suggestions?: ChipItem[];
+interface ChipInputProps extends Omit<FieldTextProps, 'labelPosition'> {
+    /** Controlled: the values, one Chip each (Figma: `filled` is `value.length > 0`). */
+    value?: string[];
+    /** Uncontrolled: the values at first. */
+    defaultValue?: string[];
+    /** Called with the new list when a value is added or removed. */
+    onChange?: (value: string[]) => void;
+    /** What shows in the empty field (Figma: `text`). Say how to add: "Digite e aperte Enter". */
     placeholder?: string;
-    /** Helper text shown below the input. */
+    /** @deprecated Use `hint`. */
     helper?: ReactNode;
-    /** When defined, free-form text confirms create the chip via this callback. */
-    onCreate?: (text: string) => Promise<ChipItem | null> | ChipItem | null;
-    /** Dropdown copy for the "create" option. */
-    createPrefix?: string;
-    creatingLabel?: string;
-    /** Custom aria-label for the chip remove button. */
-    removeAriaLabel?: (chip: ChipItem) => string;
+    /**
+     * Values to offer while typing: the list under the field filters them by the text (ignoring case and accents),
+     * the arrows move in it and Enter takes the active one.
+     */
+    suggestions?: string[];
+    /**
+     * Called with the typed text before it becomes a Chip. Return the value to add (trimmed, normalised), or null to
+     * refuse it; nothing (undefined) adds the text as typed. May be async. With suggestions, the list offers
+     * `Criar "<texto>"` when nothing matches exactly.
+     */
+    onCreate?: (text: string) => string | null | void | Promise<string | null | void>;
+    /** The create option's text. By default `Criar "<texto>"`. */
+    createLabel?: (text: string) => string;
+    /** The most values: past it the text does not become a Chip. Say it in the hint and show the errorMessage. */
+    max?: number;
+    /** The ×'s name for each Chip. By default "Remover <valor>". */
+    removeLabel?: (value: string) => string;
+    /** The form field name: one hidden input per value. */
+    name?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** The name when there is no visible label. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
-declare function ChipInput({ value, onChange, suggestions, placeholder, helper, onCreate, createPrefix, creatingLabel, removeAriaLabel, }: ChipInputProps): react.JSX.Element;
+/**
+ * ChipInput — Figma [RDS] Forms/ChipInput. A field that turns what is typed into Chips: Enter or a comma makes the
+ * text a Chip, Backspace on the empty field takes the last one, and each Chip's × removes it. For several short,
+ * free values: tags, guests' e-mails, keywords. Choosing from a closed list is the Combobox (multiple) or the
+ * CheckboxGroup. Label, hint, error and required as in the Input. Styles: chip-input.css, internal/field.css,
+ * internal/listbox.css and chip.css.
+ */
+declare function ChipInput({ label, hint, helper, error, errorMessage, required, value, defaultValue, onChange, placeholder, suggestions, onCreate, createLabel, max, removeLabel, name, disabled, id, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: ChipInputProps): react.JSX.Element;
 
-export { ChipInput, type ChipInputProps, type ChipItem };
+export { ChipInput, type ChipInputProps };

package/dist/components/chip-input.js

@@ -1,181 +1,194 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { useState, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { X } from "lucide-react";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Chip } from "./chip.js";
+import { announce } from "./internal/announce.js";
+import { FieldShell, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+import { PlusIcon } from "./internal/icons.js";
+import { OptionContent } from "./internal/option-content.js";
+import { useListbox } from "./internal/use-listbox.js";
+const CREATE = "\0create";
+const normalize = (text) => text.normalize("NFD").replace(new RegExp("\\p{Diacritic}", "gu"), "").toLowerCase();
 function ChipInput({
+  label,
+  hint,
+  helper,
+  error,
+  errorMessage,
+  required,
   value,
+  defaultValue = [],
   onChange,
-  suggestions = [],
   placeholder,
-  helper,
+  suggestions,
   onCreate,
-  createPrefix = "Criar",
-  creatingLabel = "Criando...",
-  removeAriaLabel
+  createLabel = (text) => `Criar "${text}"`,
+  max,
+  removeLabel,
+  name,
+  disabled,
+  id,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
 }) {
-  const [input, setInput] = useState("");
+  warnIfUnlabelled("ChipInput", label, ariaLabel, ariaLabelledBy);
+  const shownHint = hint != null ? hint : helper;
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, shownHint, error, errorMessage);
+  const [own, setOwn] = useState(defaultValue);
+  const values = value != null ? value : own;
+  const input = useRef(null);
+  const [text, setText] = useState("");
   const [open, setOpen] = useState(false);
-  const [creating, setCreating] = useState(false);
-  const inputRef = useRef(null);
-  const containerRef = useRef(null);
-  const listRef = useRef(null);
-  const [pos, setPos] = useState(null);
-  useEffect(() => {
-    function onOutside(e) {
-      var _a, _b;
-      const target = e.target;
-      if (((_a = containerRef.current) == null ? void 0 : _a.contains(target)) || ((_b = listRef.current) == null ? void 0 : _b.contains(target))) return;
-      setOpen(false);
-    }
-    document.addEventListener("mousedown", onOutside);
-    return () => document.removeEventListener("mousedown", onOutside);
-  }, []);
-  useEffect(() => {
-    if (!open) return;
-    function update() {
-      const el = containerRef.current;
-      if (!el) return;
-      const r = el.getBoundingClientRect();
-      setPos({ top: r.bottom + 4, left: r.left, width: r.width });
-    }
-    update();
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [open]);
-  const trimmed = input.trim();
-  const filtered = suggestions.filter(
-    (s) => !value.some((v) => v.id === s.id) && s.label.toLowerCase().includes(trimmed.toLowerCase())
-  );
-  const exactMatch = suggestions.some((s) => s.label.toLowerCase() === trimmed.toLowerCase());
-  const showCreate = !!onCreate && trimmed.length > 0 && !exactMatch;
-  function selectChip(chip) {
-    if (value.some((v) => v.id === chip.id)) return;
-    onChange([...value, chip]);
-    setInput("");
-    setOpen(false);
+  const [busy, setBusy] = useState(false);
+  const typed = text.trim();
+  const offered = (suggestions != null ? suggestions : []).filter((s) => !values.includes(s) && normalize(s).includes(normalize(typed)));
+  const exact = [...suggestions != null ? suggestions : [], ...values].some((s) => normalize(s) === normalize(typed));
+  const rows = offered.map((s) => ({ value: s, label: s }));
+  if (suggestions && typed && !exact) rows.push({ value: CREATE, label: createLabel(typed), create: typed });
+  const showList = open && !disabled && suggestions !== void 0 && rows.length > 0;
+  function commit(next) {
+    if (value === void 0) setOwn(next);
+    onChange == null ? void 0 : onChange(next);
   }
-  function removeChip(id) {
-    onChange(value.filter((v) => v.id !== id));
+  function add(list) {
+    let next = values;
+    for (const item of list) {
+      if (!item || next.includes(item)) continue;
+      if (max !== void 0 && next.length >= max) break;
+      next = [...next, item];
+      announce(`${item} adicionado`);
+    }
+    if (next !== values) commit(next);
   }
-  async function handleCreate() {
-    if (!onCreate || !trimmed || creating) return;
-    setCreating(true);
+  async function create(raw) {
+    const parts = raw.split(",").map((part) => part.trim()).filter(Boolean);
+    if (!parts.length) return;
+    if (!onCreate) {
+      add(parts);
+      return;
+    }
+    setBusy(true);
     try {
-      const result = await onCreate(trimmed);
-      if (result) {
-        onChange([...value, result]);
-        setInput("");
-        setOpen(false);
-      }
+      const made = await Promise.all(parts.map(async (part) => {
+        const result = await onCreate(part);
+        return result === void 0 ? part : result;
+      }));
+      add(made.filter((m) => typeof m === "string"));
     } finally {
-      setCreating(false);
+      setBusy(false);
     }
   }
-  function handleKeyDown(e) {
-    if (e.key === "Enter" || e.key === ",") {
-      e.preventDefault();
-      if (filtered.length > 0) {
-        selectChip(filtered[0]);
+  const { setActive, onKeyDown: listKeyDown, controlProps, listProps, optionProps } = useListbox({
+    items: rows,
+    showing: showList,
+    selected: [],
+    onOpen: () => setOpen(true),
+    onChoose: (row) => {
+      if (row.create) void create(row.create);
+      else add([row.value]);
+      setText("");
+      setActive(-1);
+    }
+  });
+  function keyDown(event) {
+    if (suggestions && listKeyDown(event)) return;
+    if (event.key === "Enter" || event.key === ",") {
+      if (!typed) {
+        if (event.key === ",") event.preventDefault();
         return;
       }
-      if (showCreate) void handleCreate();
-      return;
-    }
-    if (e.key === "Backspace" && !input && value.length > 0) {
-      removeChip(value[value.length - 1].id);
+      event.preventDefault();
+      if (busy) return;
+      void create(text);
+      setText("");
+      setActive(-1);
+    } else if (event.key === "Escape" && open) {
+      event.preventDefault();
+      setOpen(false);
+      setActive(-1);
+    } else if (event.key === "Backspace" && text === "" && values.length) {
+      const last = values[values.length - 1];
+      commit(values.slice(0, -1));
+      announce(`${last} removido`);
     }
   }
-  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: "relative" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "flex flex-wrap gap-1.5 px-2.5 py-2 min-h-[38px] border border-stroke-control rounded-(--radius-control) bg-surface-default focus-within:border-stroke-strong cursor-text",
-      onClick: () => {
-        var _a;
-        return (_a = inputRef.current) == null ? void 0 : _a.focus();
-      }
-    },
-    value.map((chip) => {
+  function remove(item) {
+    const next = values.filter((v) => v !== item);
+    commit(next);
+    if (next.length === 0) requestAnimationFrame(() => {
       var _a;
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: chip.id,
-          className: "inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-(--brand-primary) text-(--text-inverse) text-caption font-medium"
-        },
-        chip.label,
-        /* @__PURE__ */ React.createElement(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              removeChip(chip.id);
+      return (_a = input.current) == null ? void 0 : _a.focus();
+    });
+  }
+  const listName = typeof label === "string" ? `Sugest\xF5es para ${label}` : "Sugest\xF5es";
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
+    {
+      kind: "rds-chip-input",
+      controlId,
+      hintId,
+      errorId,
+      label,
+      hint: shownHint,
+      errorMessage,
+      invalid,
+      required,
+      disabled,
+      boxClassName: "rds-chip-input__box",
+      className,
+      style,
+      children: [
+        values.length > 0 && /* @__PURE__ */ jsx("ul", { className: "rds-chip-input__chips", role: "list", "aria-label": `Valores: ${values.length}`, children: values.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Chip, { disabled, onRemove: () => remove(item), removeLabel: removeLabel == null ? void 0 : removeLabel(item), children: item }) }, item)) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({
+            ref: input,
+            id: controlId,
+            className: "rds-field__control",
+            type: "text",
+            autoComplete: "off",
+            enterKeyHint: "enter"
+          }, suggestions ? __spreadValues({ role: "combobox", "aria-autocomplete": "list" }, controlProps) : {}), {
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": describedBy,
+            "aria-required": required || void 0,
+            "aria-busy": busy || void 0,
+            disabled,
+            placeholder: values.length ? void 0 : placeholder,
+            value: text,
+            onChange: (event) => {
+              const next = event.target.value;
+              const cut = next.lastIndexOf(",");
+              if (cut >= 0) {
+                void create(next.slice(0, cut));
+                setText(next.slice(cut + 1).trimStart());
+              } else {
+                setText(next);
+              }
+              setOpen(true);
+              setActive(-1);
             },
-            className: "ml-0.5 leading-none hover:opacity-70 transition-opacity",
-            "aria-label": (_a = removeAriaLabel == null ? void 0 : removeAriaLabel(chip)) != null ? _a : `Remove ${chip.label}`
-          },
-          /* @__PURE__ */ React.createElement(X, { size: 12, strokeWidth: 2.5 })
-        )
-      );
-    }),
-    /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "text",
-        value: input,
-        onChange: (e) => {
-          setInput(e.target.value);
-          setOpen(true);
-        },
-        onKeyDown: handleKeyDown,
-        onFocus: () => setOpen(true),
-        placeholder: value.length === 0 ? placeholder : "",
-        className: "flex-1 min-w-[120px] bg-transparent text-label text-(--text-secondary) placeholder:text-(--text-disabled) focus:outline-none"
-      }
-    )
-  ), open && pos && (filtered.length > 0 || showCreate) && createPortal(
-    /* @__PURE__ */ React.createElement(
-      "ul",
-      {
-        ref: listRef,
-        style: { position: "fixed", top: pos.top, left: pos.left, width: pos.width },
-        className: "z-50 bg-surface-default border border-stroke-control rounded-(--radius-control) shadow-md max-h-48 overflow-auto"
-      },
-      filtered.map((s) => /* @__PURE__ */ React.createElement("li", { key: s.id }, /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          onMouseDown: (e) => {
-            e.preventDefault();
-            selectChip(s);
-          },
-          className: "w-full text-left px-3 py-2 text-label text-(--text-secondary) hover:bg-(--surface-page) transition-colors"
-        },
-        s.label
-      ))),
-      showCreate && /* @__PURE__ */ React.createElement("li", { className: filtered.length > 0 ? "border-t border-stroke-subtle" : "" }, /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          disabled: creating,
-          onMouseDown: (e) => {
-            e.preventDefault();
-            void handleCreate();
-          },
-          className: "w-full text-left px-3 py-2 text-label font-medium text-(--text-primary) hover:bg-(--surface-page) transition-colors flex items-center gap-2 disabled:opacity-50"
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "text-(--text-disabled)" }, "+"),
-        creating ? creatingLabel : /* @__PURE__ */ React.createElement(React.Fragment, null, createPrefix, " ", /* @__PURE__ */ React.createElement("span", { className: "font-semibold" }, `"${trimmed}"`))
-      ))
-    ),
-    document.body
-  ), helper && /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-caption text-(--text-disabled)" }, helper));
+            onFocus: () => setOpen(true),
+            onKeyDown: keyDown,
+            onBlur: () => {
+              setOpen(false);
+              setActive(-1);
+            }
+          })
+        ),
+        name && values.map((item) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: item }, item)),
+        showList && /* @__PURE__ */ jsx("ul", __spreadProps(__spreadValues({}, listProps), { "aria-label": listName, className: "rds-listbox rds-chip-input__list", children: rows.map((row, index) => /* @__PURE__ */ jsx("li", __spreadProps(__spreadValues({}, optionProps(row, index)), { className: "rds-listbox__option", children: /* @__PURE__ */ jsx(OptionContent, { icon: row.create ? /* @__PURE__ */ jsx(PlusIcon, {}) : void 0, selected: false, children: row.label }) }), row.value)) }))
+      ]
+    }
+  );
 }
 export {
   ChipInput

package/dist/components/chip.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The chosen value (Figma: `label`): an applied filter, a recipient, a typed tag. */
+    children: ReactNode;
+    /** Icon before the label (Figma: `showIcon` + `iconName`). Decorative, rendered with aria-hidden. */
+    icon?: ReactNode;
+    /**
+     * Shows the × (Figma: `showRemove`) and is called when it is pressed. Only the × removes: the chip
+     * itself is not a button. After the removal, focus goes to the next chip's × in the same list (or the
+     * previous one).
+     */
+    onRemove?: () => void;
+    /** The ×'s accessible name. By default "Remover <label>", which needs a text label. */
+    removeLabel?: string;
+    /** Said to screen readers after the removal. By default "<label> removido". */
+    removedMessage?: string;
+    /** Rendered as aria-disabled="true": the × stays in the tab order, but pressing it does nothing. */
+    disabled?: boolean;
+}
+/**
+ * Chip — Figma [RDS] Actions/Chip. A chosen value that can be taken away. Not for choosing options
+ * (Toggle, ToggleGroup) and not for labelling without an action (Badge). Styles: chip.css.
+ */
+declare function Chip({ children, icon, onRemove, removeLabel, removedMessage, disabled, className, ...rest }: ChipProps): react.JSX.Element;
+
+export { Chip, type ChipProps };