@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/color-input.js

@@ -2,78 +2,149 @@
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { FieldShell, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+const HEX = /^#[0-9a-f]{6}$/i;
+function normalizeHex(text) {
+  const raw = text.trim();
+  const hex = raw.startsWith("#") ? raw : `#${raw}`;
+  return HEX.test(hex) ? hex.toUpperCase() : null;
+}
 function ColorInput({
+  label,
+  hint,
+  error,
+  errorMessage,
+  required,
   value,
+  defaultValue = "#000000",
   onChange,
-  size = "md",
-  disabled = false,
-  className = "",
-  "aria-label": ariaLabel
+  palette,
+  paletteTitle = "Cores da marca",
+  paletteCaption = "Ou digite o hex no campo.",
+  pickLabel = "Escolher cor",
+  name,
+  disabled,
+  id,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
 }) {
-  const [draft, setDraft] = useState(value.toUpperCase());
-  const inputRef = useRef(null);
-  useEffect(() => {
-    setDraft(value.toUpperCase());
-  }, [value]);
-  function commit() {
-    const raw = draft.trim();
-    const hex = raw.startsWith("#") ? raw : `#${raw}`;
-    if (HEX_RE.test(hex)) {
-      onChange(hex.toUpperCase());
-      setDraft(hex.toUpperCase());
-    } else {
-      setDraft(value.toUpperCase());
-    }
+  var _a;
+  warnIfUnlabelled("ColorInput", label, ariaLabel, ariaLabelledBy);
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error, errorMessage);
+  const [own, setOwn] = useState(() => {
+    var _a2;
+    return (_a2 = normalizeHex(defaultValue)) != null ? _a2 : "#000000";
+  });
+  const color = (_a = normalizeHex(value != null ? value : own)) != null ? _a : own;
+  const [draft, setDraft] = useState(color);
+  const [open, setOpen] = useState(false);
+  const input = useRef(null);
+  useEffect(() => setDraft(color), [color]);
+  function commit(next) {
+    if (value === void 0) setOwn(next);
+    setDraft(next);
+    if (next !== color) onChange == null ? void 0 : onChange(next);
+  }
+  function confirm() {
+    const hex = normalizeHex(draft);
+    if (hex) commit(hex);
+    else setDraft(color);
   }
-  const h = size === "sm" ? "h-control-sm" : "h-control-md";
-  const swatch = size === "sm" ? "size-5" : "size-6";
+  const swatchColor = { backgroundColor: color };
+  const choices = (palette != null ? palette : []).map((c) => normalizeHex(c)).filter((c) => c !== null);
+  const swatch = choices.length ? /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: (next) => !disabled && setOpen(next), children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx("button", { type: "button", className: "rds-color-input__swatch", style: swatchColor, "aria-label": `${pickLabel}: ${color}` }) }),
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      PopoverPrimitive.Content,
+      {
+        align: "start",
+        sideOffset: 8,
+        collisionPadding: 16,
+        "aria-label": paletteTitle,
+        className: "rds-popover rds-color-input__popover",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "rds-color-input__palette-title", children: paletteTitle }),
+          /* @__PURE__ */ jsx("div", { className: "rds-color-input__palette", role: "group", "aria-label": paletteTitle, children: choices.map((c) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rds-color-input__choice",
+              style: { backgroundColor: c },
+              "aria-label": c,
+              "aria-pressed": c === color,
+              onClick: () => {
+                commit(c);
+                setOpen(false);
+              }
+            },
+            c
+          )) }),
+          /* @__PURE__ */ jsx("p", { className: "rds-color-input__palette-caption", children: paletteCaption })
+        ]
+      }
+    ) })
+  ] }) : (
+    // No palette: the native picker lies invisible over the swatch, with its keyboard and dialog for free.
+    /* @__PURE__ */ jsx("span", { className: "rds-color-input__swatch", style: swatchColor, children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "color",
+        className: "rds-color-input__native",
+        value: color.toLowerCase(),
+        disabled,
+        "aria-label": pickLabel,
+        onChange: (event) => commit(event.target.value.toUpperCase())
+      }
+    ) })
+  );
   return /* @__PURE__ */ jsxs(
-    "div",
+    FieldShell,
     {
-      className: [
-        "inline-flex items-center gap-2 px-2.5 w-36",
-        h,
-        "rounded-(--radius-control) border border-stroke-control bg-surface-default",
-        "transition-colors focus-within:border-stroke-focus focus-within:ring-2 focus-within:ring-stroke-focus/20",
-        disabled ? "opacity-50 cursor-not-allowed" : "",
-        className
-      ].filter(Boolean).join(" "),
+      kind: "rds-color-input",
+      controlId,
+      hintId,
+      errorId,
+      label,
+      hint,
+      errorMessage,
+      invalid,
+      required,
+      disabled,
+      className,
+      style,
       children: [
-        /* @__PURE__ */ jsxs("span", { className: `relative shrink-0 ${swatch} rounded-(--radius-control) border border-stroke-subtle overflow-hidden`, children: [
-          /* @__PURE__ */ jsx("span", { className: "absolute inset-0", style: { backgroundColor: value } }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "color",
-              value: HEX_RE.test(value) ? value : "#000000",
-              onChange: (e) => onChange(e.target.value.toUpperCase()),
-              disabled,
-              "aria-label": ariaLabel,
-              className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer disabled:cursor-not-allowed"
-            }
-          )
-        ] }),
+        swatch,
         /* @__PURE__ */ jsx(
           "input",
           {
-            ref: inputRef,
+            ref: input,
+            id: controlId,
+            className: "rds-field__control rds-color-input__hex",
             type: "text",
-            value: draft,
-            onChange: (e) => setDraft(e.target.value),
-            onBlur: commit,
-            onKeyDown: (e) => {
-              var _a;
-              if (e.key === "Enter") {
-                e.preventDefault();
-                commit();
-                (_a = inputRef.current) == null ? void 0 : _a.blur();
-              }
-            },
-            disabled,
             maxLength: 7,
+            spellCheck: false,
+            autoComplete: "off",
+            autoCapitalize: "characters",
             "aria-label": ariaLabel,
-            className: "min-w-0 flex-1 bg-transparent text-label font-mono text-fg-primary outline-none disabled:cursor-not-allowed"
+            "aria-labelledby": ariaLabelledBy,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": describedBy,
+            required,
+            disabled,
+            name,
+            placeholder: "#RRGGBB",
+            value: draft,
+            onChange: (event) => setDraft(event.target.value),
+            onBlur: confirm,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                confirm();
+              }
+            }
           }
         )
       ]
@@ -81,5 +152,6 @@ function ColorInput({
   );
 }
 export {
-  ColorInput
+  ColorInput,
+  normalizeHex
 };

package/dist/components/combobox.d.ts

@@ -1,70 +1,73 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { FieldTextProps } from './internal/field.js';
 
-/**
- * Combobox — Search + Select. Lista filtrada por digitação.
- * Inspirado em shadcn Combobox / cmdk.
- *
- * Uso:
- *   <Combobox
- *     options={cities}
- *     value={selected}
- *     onChange={setSelected}
- *     placeholder="Buscar cidade..."
- *   />
- *
- * Multi-select:
- *   <Combobox
- *     multi
- *     options={tags}
- *     value={selectedTags}
- *     onChange={setSelectedTags}
- *   />
- *
- * Suporta filtro custom (por default usa includes case-insensitive em label).
- */
 interface ComboboxOption {
+    /** The value sent with the form. */
     value: string;
+    /** The text shown and filtered by typing. */
     label: string;
-    /** Subtítulo opcional (ex: email abaixo do nome). */
-    description?: string;
-    /** Ícone leading. */
+    /** An icon before the text. Decorative. */
     icon?: ReactNode;
+    /** Cannot be chosen now: skipped by the arrows. */
     disabled?: boolean;
 }
-interface ComboboxSingleProps {
-    multi?: false;
-    value: string | null;
-    onChange: (value: string | null) => void;
-}
-interface ComboboxMultiProps {
-    multi: true;
-    value: string[];
-    onChange: (value: string[]) => void;
-}
-type ComboboxProps = (ComboboxSingleProps | ComboboxMultiProps) & {
-    options: ComboboxOption[];
-    placeholder?: string;
-    /** Filtro custom. default = includes case-insensitive em label/description. */
-    filter?: (option: ComboboxOption, query: string) => boolean;
-    /** Texto quando lista vazia. default = "Nada encontrado". */
+interface ComboboxBaseProps extends FieldTextProps {
+    /** The whole list. The field filters it as the person types, ignoring case and accents. */
+    options: (ComboboxOption | string)[];
+    /** Shown when nothing matches (Figma: menu=empty). Say what was not found ("Nenhum público com esse nome."). */
     emptyMessage?: string;
-    /** Largura. default = full. */
-    width?: 'full' | 'hug';
-    size?: 'sm' | 'md';
+    /** Tells the result count to screen readers, in the subject's words. By default "N resultados". */
+    resultsMessage?: (count: number) => string;
+    /**
+     * Offers to create what was typed when nothing matches it exactly (Figma: menu=create and empty-create): an
+     * option `Cadastrar "<texto>"` after a divider, reached by the arrows like any other. With no match it is the only
+     * option and is already active, so Enter creates. On by default when `onCreate` is given.
+     */
+    creatable?: boolean;
+    /** Called with the typed text when the person creates it; return the new option (or its value). */
+    onCreate?: (text: string) => ComboboxOption | string | void;
+    /** The create option's text. By default `Cadastrar "<texto>"`. */
+    createLabel?: (text: string) => string;
+    /** What shows in the empty field. */
+    placeholder?: string;
+    /** An icon on the left, as in the Input (Figma: `showLeadingIcon` + `leadingIcon`). Decorative. */
+    leadingIcon?: ReactNode;
+    /** The form field name: hidden inputs carry the chosen values. */
+    name?: string;
     disabled?: boolean;
+    id?: string;
     className?: string;
+    style?: CSSProperties;
+    /** The name when there is no visible label. */
     'aria-label'?: string;
-    /** Customiza o conteúdo do trigger fechado (ex: só o ícone). default = ícone + label. */
-    triggerContent?: (selected: ComboboxOption | null) => ReactNode;
-    /** Largura mínima do dropdown em px. Útil quando o trigger é compacto (width="hug"). */
-    dropdownMinWidth?: number;
-    /** Buscar→criar: quando a busca não casa com nenhuma opção (por label), mostra uma
-     *  linha "criar" que chama onCreate(query). Campo padrão tipo cliente/fornecedor. */
-    onCreate?: (query: string) => void;
-    /** Rótulo da linha de criar. default = `+ "<query>"`. Passe localizado. */
-    createLabel?: (query: string) => string;
-};
-declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLButtonElement>>;
+    'aria-labelledby'?: string;
+}
+interface ComboboxSingleProps extends ComboboxBaseProps {
+    multiple?: false;
+    /** Controlled: the chosen option's value ('' for none). */
+    value?: string;
+    /** Uncontrolled: the option chosen at first. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+interface ComboboxMultipleProps extends ComboboxBaseProps {
+    /**
+     * Many values: the chosen ones show as Chips in the field, choosing toggles, the list stays open, and
+     * Backspace on an empty field removes the last one.
+     */
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+/**
+ * Combobox — Figma [RDS] Forms/Combobox. A field that filters a long list while the person types: audiences,
+ * cities, companies. It is the Input with the Listbox under it (ARIA combobox): the focus stays in the field,
+ * the arrows move the active option, Enter chooses, Escape closes (and, closed, gives back the chosen text).
+ * For 5 to 15 fixed options, the Select. Styles: combobox.css, internal/field.css and internal/listbox.css.
+ */
+declare function Combobox(props: ComboboxProps): react.JSX.Element;
 
-export { Combobox, type ComboboxOption, type ComboboxProps };
+export { Combobox, type ComboboxMultipleProps, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps };