@rojaostudio/ds 1.0.2 → 2.0.0-next.0

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

package/dist/components/chip.js

@@ -0,0 +1,73 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { announce } from "./internal/announce.js";
+import { CloseIcon } from "./internal/icons.js";
+function Chip(_a) {
+  var _b = _a, {
+    children,
+    icon,
+    onRemove,
+    removeLabel,
+    removedMessage,
+    disabled,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "icon",
+    "onRemove",
+    "removeLabel",
+    "removedMessage",
+    "disabled",
+    "className"
+  ]);
+  const text = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+  function remove(event) {
+    if (disabled || !onRemove) return;
+    const next = neighbourRemove(event.currentTarget);
+    onRemove();
+    const message = removedMessage != null ? removedMessage : text ? `${text} removido` : void 0;
+    if (message) announce(message);
+    requestAnimationFrame(() => next == null ? void 0 : next.focus());
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    __spreadProps(__spreadValues({}, rest), {
+      role: disabled ? "group" : rest.role,
+      "aria-disabled": disabled || void 0,
+      className: ["rds-chip", onRemove && "rds-chip--removable", disabled && "rds-chip--disabled", className].filter(Boolean).join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "rds-chip__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "rds-chip__label", children }),
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rds-chip__remove",
+            "aria-label": removeLabel != null ? removeLabel : `Remover ${text != null ? text : ""}`.trim(),
+            "aria-disabled": disabled || void 0,
+            onClick: remove,
+            children: /* @__PURE__ */ jsx("span", { className: "rds-chip__remove-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+          }
+        )
+      ]
+    })
+  );
+}
+function neighbourRemove(own) {
+  var _a, _b, _c, _d;
+  const chip = own.closest(".rds-chip");
+  const list = (_a = chip == null ? void 0 : chip.closest('ul, ol, [role="list"]')) != null ? _a : chip == null ? void 0 : chip.parentElement;
+  if (!list) return null;
+  const all = Array.from(list.querySelectorAll('.rds-chip__remove:not([aria-disabled="true"])'));
+  const index = all.indexOf(own);
+  if (index === -1) return (_b = all[0]) != null ? _b : null;
+  return (_d = (_c = all[index + 1]) != null ? _c : all[index - 1]) != null ? _d : null;
+}
+export {
+  Chip
+};

package/dist/components/choice-card.d.ts

@@ -1,16 +1,13 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ChoiceCardProps } from './internal/choice-card.js';
+export { ChoiceCardGroup, ChoiceCardGroupProps, ChoiceCardLayout } from './internal/choice-card.js';
 
-interface ChoiceCardProps {
-    selected: boolean;
-    onClick: () => void;
-    label: string;
-    description?: string;
-    icon?: ReactNode;
-    disabled?: boolean;
-    /** Override pontual (ex.: rounded-b-none quando há painel anexado embaixo). */
-    className?: string;
-}
-declare function ChoiceCard({ selected, onClick, label, description, icon, disabled, className }: ChoiceCardProps): react.JSX.Element;
+/**
+ * ChoiceCard — Figma [RDS] Content/ChoiceCard. A large single-choice option with icon, label and description, for
+ * when each option needs an explanation. Three layouts: row (the line with the radio), tile (a grid cell) and
+ * preview (an image on top). It is a native radio: Tab reaches the group, the arrows move and choose, Space
+ * chooses. Use it inside a ChoiceCardGroup (one chosen at a time). Styles: choice-card.css.
+ */
+declare function ChoiceCard(props: ChoiceCardProps): react.JSX.Element;
 
-export { ChoiceCard, type ChoiceCardProps };
+export { ChoiceCard, ChoiceCardProps };

package/dist/components/choice-card.js

@@ -1,66 +1,15 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-function ChoiceCard({ selected, onClick, label, description, icon, disabled = false, className = "" }) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick,
-      disabled,
-      className: [
-        "w-full flex items-center gap-4 px-4 py-4 rounded-(--radius-card) border text-left transition-all",
-        selected ? "[border-color:var(--choice-card-border-active)] [background:var(--choice-card-bg-active)]" : "[border-color:var(--choice-card-border)] [background:var(--choice-card-bg)] hover:[border-color:var(--choice-card-border-hover)]",
-        disabled ? "opacity-50 cursor-not-allowed" : "",
-        className
-      ].filter(Boolean).join(" "),
-      children: [
-        icon && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: [
-              "shrink-0 w-9 h-9 rounded-(--radius-card) flex items-center justify-center transition-colors",
-              selected ? "[background:var(--choice-card-icon-bg-active)] [color:var(--choice-card-icon-active)]" : "[background:var(--choice-card-icon-bg)] [color:var(--choice-card-icon)]"
-            ].join(" "),
-            children: icon
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: [
-                "text-label font-semibold",
-                selected ? "[color:var(--choice-card-label-active)]" : "[color:var(--choice-card-label)]"
-              ].join(" "),
-              children: label
-            }
-          ),
-          description && /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: [
-                "text-caption mt-0.5",
-                selected ? "[color:var(--choice-card-description-active)]" : "[color:var(--choice-card-description)]"
-              ].join(" "),
-              children: description
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: [
-              "shrink-0 w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors",
-              selected ? "[border-color:var(--choice-card-radio-border-active)]" : "[border-color:var(--choice-card-radio-border)]"
-            ].join(" "),
-            children: selected && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full [background:var(--choice-card-radio-dot)]" })
-          }
-        )
-      ]
-    }
-  );
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { ChoiceCardControl } from "./internal/choice-card.js";
+import { ChoiceCardGroup } from "./internal/choice-card.js";
+function ChoiceCard(props) {
+  return /* @__PURE__ */ jsx(ChoiceCardControl, __spreadProps(__spreadValues({}, props), { control: "radio" }));
 }
 export {
-  ChoiceCard
+  ChoiceCard,
+  ChoiceCardGroup
 };

package/dist/components/choice-carousel.d.ts

@@ -3,14 +3,23 @@ import { ReactNode } from 'react';
 
 interface ChoiceCarouselProps<T> {
     options: T[];
+    /** A stable key per option. */
     getKey: (option: T) => string;
+    /** Draws an option. Static content: the carousel item is the radio (or checkbox), so no button inside. */
     renderCard: (option: T, isSelected: boolean) => ReactNode;
     value: T | T[] | null;
     onChange: (value: T | T[]) => void;
+    /** Several at once (checkboxes) instead of one (radios). */
     multiple?: boolean;
+    /** The group's name for screen readers. */
     ariaLabel: string;
     isDisabled?: (option: T) => boolean;
 }
+/**
+ * ChoiceCarousel — a horizontal, scroll-snapped row of options to pick one (radiogroup) or several (group of
+ * checkboxes); the options are drawn by `renderCard`. On a wide screen two outline IconButtons (with their Tooltips)
+ * scroll it by one option; the arrow keys do the same on the row. Styles: choice-carousel.css.
+ */
 declare function ChoiceCarousel<T>({ options, getKey, renderCard, value, onChange, multiple, ariaLabel, isDisabled, }: ChoiceCarouselProps<T>): react.JSX.Element;
 
 export { ChoiceCarousel, type ChoiceCarouselProps };

package/dist/components/choice-carousel.js

@@ -1,7 +1,10 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useCallback } from "react";
+import { useRef, useState, useEffect, useCallback, useMemo } from "react";
+import { IconButton } from "./icon-button.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "./internal/icons.js";
+import { Tooltip } from "./tooltip.js";
 function ChoiceCarousel({
   options,
   getKey,
@@ -15,7 +18,7 @@ function ChoiceCarousel({
   const trackRef = useRef(null);
   const [canScrollLeft, setCanScrollLeft] = useState(false);
   const [canScrollRight, setCanScrollRight] = useState(false);
-  const valueArray = multiple ? value != null ? value : [] : [];
+  const valueArray = useMemo(() => multiple ? value != null ? value : [] : [], [multiple, value]);
   const valueSingle = multiple ? null : value;
   const isSelected = useCallback(
     (option) => {
@@ -59,7 +62,7 @@ function ChoiceCarousel({
     const el = trackRef.current;
     if (!el) return;
     const cardWidth = (_b = (_a = el.firstElementChild) == null ? void 0 : _a.getBoundingClientRect().width) != null ? _b : 160;
-    const gap = 12;
+    const gap = parseFloat(getComputedStyle(el).columnGap) || 0;
     el.scrollBy({ left: dir * (cardWidth + gap), behavior: "smooth" });
   };
   const handleKeyDown = (e) => {
@@ -71,24 +74,20 @@ function ChoiceCarousel({
       scrollByAmount(-1);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ jsx(
-      "button",
+  return /* @__PURE__ */ jsxs("div", { className: "rds-choice-carousel", children: [
+    /* @__PURE__ */ jsx(Tooltip, { text: "Anterior", children: /* @__PURE__ */ jsx(
+      IconButton,
       {
-        type: "button",
-        "aria-label": "Anterior",
+        className: "rds-choice-carousel__arrow rds-choice-carousel__arrow--prev",
+        icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        label: "Anterior",
+        variant: "outline",
+        tone: "neutral",
         onClick: () => scrollByAmount(-1),
         disabled: !canScrollLeft,
-        className: "hidden md:flex absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 z-10 w-9 h-9 rounded-full items-center justify-center transition-opacity disabled:opacity-0 disabled:pointer-events-none",
-        style: {
-          background: "var(--choice-carousel-chevron-bg)",
-          border: `1px solid var(--choice-carousel-chevron-border)`,
-          color: "var(--choice-carousel-chevron-text)",
-          boxShadow: "var(--shadow-md)"
-        },
-        children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsx("path", { d: "M10 4l-4 4 4 4", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        tabIndex: -1
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -97,13 +96,7 @@ function ChoiceCarousel({
         "aria-label": ariaLabel,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        className: "flex overflow-x-auto scroll-smooth focus:outline-none",
-        style: {
-          gap: "var(--choice-carousel-gap)",
-          scrollSnapType: "x mandatory",
-          scrollbarWidth: "none",
-          paddingBlock: 4
-        },
+        className: "rds-choice-carousel__track",
         children: options.map((option) => {
           var _a;
           const selected = isSelected(option);
@@ -113,7 +106,7 @@ function ChoiceCarousel({
             {
               role: multiple ? "checkbox" : "radio",
               "aria-checked": selected,
-              "aria-disabled": disabled,
+              "aria-disabled": disabled || void 0,
               tabIndex: disabled ? -1 : 0,
               onClick: () => handleSelect(option),
               onKeyDown: (e) => {
@@ -122,12 +115,7 @@ function ChoiceCarousel({
                   handleSelect(option);
                 }
               },
-              className: "shrink-0",
-              style: {
-                width: "var(--choice-carousel-card-width-mobile)",
-                scrollSnapAlign: "start",
-                cursor: disabled ? "not-allowed" : "pointer"
-              },
+              className: "rds-choice-carousel__option",
               children: renderCard(option, selected)
             },
             getKey(option)
@@ -135,23 +123,19 @@ function ChoiceCarousel({
         })
       }
     ),
-    /* @__PURE__ */ jsx(
-      "button",
+    /* @__PURE__ */ jsx(Tooltip, { text: "Pr\xF3ximo", children: /* @__PURE__ */ jsx(
+      IconButton,
       {
-        type: "button",
-        "aria-label": "Pr\xF3ximo",
+        className: "rds-choice-carousel__arrow rds-choice-carousel__arrow--next",
+        icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+        label: "Pr\xF3ximo",
+        variant: "outline",
+        tone: "neutral",
         onClick: () => scrollByAmount(1),
         disabled: !canScrollRight,
-        className: "hidden md:flex absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 z-10 w-9 h-9 rounded-full items-center justify-center transition-opacity disabled:opacity-0 disabled:pointer-events-none",
-        style: {
-          background: "var(--choice-carousel-chevron-bg)",
-          border: `1px solid var(--choice-carousel-chevron-border)`,
-          color: "var(--choice-carousel-chevron-text)",
-          boxShadow: "var(--shadow-md)"
-        },
-        children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        tabIndex: -1
       }
-    )
+    ) })
   ] });
 }
 export {

package/dist/components/choice-preview-card.d.ts

@@ -1,37 +1,27 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-/**
- * ChoicePreviewCard — cartão de seleção VERTICAL: mini-preview (mockup/swatch/imagem) em
- * cima, label + descrição embaixo, check no selecionado. Para escolhas onde o rótulo não
- * basta e o usuário precisa VER a opção (layout da home, tema, densidade, modo).
- *
- * Quando usar cada "card clicável" do DS:
- *   - ChoicePreviewCard — tile VERTICAL de preview selecionável (este).
- *   - ChoiceCard        — row HORIZONTAL com radio (escolha exclusiva textual).
- *   - SelectableCard    — clicável genérico (ação/navegação), button/a.
- *   - ToggleCard        — toggle dentro de card.
- *   - MediaTile         — thumbnail de navegação (sem estado selecionado).
- *
- * Estado selected é NEUTRO (stroke-focus), seguro no admin. A seleção única é gerenciada
- * pelo consumidor (map + selected/onSelect) — sem grupo no DS de propósito.
- */
+/** @deprecated Use ChoiceCardProps. */
 interface ChoicePreviewCardProps {
     selected: boolean;
     onSelect: () => void;
-    /** Mini-mockup/swatch/imagem no topo. */
+    /** The picture on top. */
     preview: ReactNode;
     label: string;
     description?: string;
-    /** Bloqueado por gate de plano — mostra cadeado; o clique segue (consumidor abre paywall). */
+    /** Ignored: the ChoiceCard has no locked state. */
     locked?: boolean;
-    /** Desabilitado (não-clicável). */
     disabled?: boolean;
-    /** Selo no canto do preview (ex.: "PRO"). */
+    /** Ignored: the ChoiceCard has no badge on the picture. */
     badge?: ReactNode;
+    /** Ignored: the picture is always 16:9. */
     previewAspect?: 'square' | 'video' | 'wide';
     className?: string;
 }
-declare function ChoicePreviewCard({ selected, onSelect, preview, label, description, locked, disabled, badge, previewAspect, className, }: ChoicePreviewCardProps): react.JSX.Element;
+/**
+ * @deprecated Use ChoiceCard with layout="preview" (Figma [RDS] Content/ChoiceCard). A thin wrapper over it: `label`
+ * is the children. It is a native radio now, not a toggle button; `locked`, `badge` and `previewAspect` are ignored.
+ */
+declare function ChoicePreviewCard({ selected, onSelect, preview, label, description, disabled, className }: ChoicePreviewCardProps): react.JSX.Element;
 
 export { ChoicePreviewCard, type ChoicePreviewCardProps };

package/dist/components/choice-preview-card.js

@@ -1,47 +1,19 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Lock } from "lucide-react";
-function ChoicePreviewCard({
-  selected,
-  onSelect,
-  preview,
-  label,
-  description,
-  locked = false,
-  disabled = false,
-  badge,
-  previewAspect = "video",
-  className = ""
-}) {
-  const aspect = previewAspect === "square" ? "aspect-square" : previewAspect === "wide" ? "aspect-[2/1]" : "aspect-video";
-  return /* @__PURE__ */ jsxs(
-    "button",
+import { jsx } from "react/jsx-runtime";
+import { ChoiceCard } from "./choice-card.js";
+function ChoicePreviewCard({ selected, onSelect, preview, label, description, disabled, className }) {
+  return /* @__PURE__ */ jsx(
+    ChoiceCard,
     {
-      type: "button",
-      onClick: onSelect,
+      layout: "preview",
+      selected,
+      onSelect,
+      preview,
+      description,
       disabled,
-      "aria-pressed": selected,
-      className: [
-        "relative w-full text-left rounded-(--radius-card) border p-2 transition-all",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-        selected ? "border-2 border-stroke-focus bg-surface-raised" : "border border-stroke-default bg-surface-default hover:border-stroke-strong",
-        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-        className
-      ].filter(Boolean).join(" "),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: ["relative w-full overflow-hidden rounded-(--radius-card) ring-1 ring-inset ring-stroke-subtle", aspect].join(" "), children: [
-          preview,
-          badge && /* @__PURE__ */ jsx("span", { className: "absolute top-1.5 left-1.5", children: badge }),
-          selected && /* @__PURE__ */ jsx("span", { className: "absolute bottom-1.5 right-1.5 size-5 rounded-full bg-stroke-focus text-surface-default flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { size: 12, strokeWidth: 3 }) }),
-          locked && // TODO(DS): trocar por token de overlay (--choice-preview-overlay) — Patrick.
-          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.55)]", children: /* @__PURE__ */ jsx(Lock, { size: 18, className: "text-white" }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "px-1 pt-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-fg-primary", children: label }),
-          description && /* @__PURE__ */ jsx("div", { className: "text-xs text-fg-muted mt-0.5 leading-snug", children: description })
-        ] })
-      ]
+      className,
+      children: label
     }
   );
 }

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

@@ -1,20 +1,45 @@
 import * as react from 'react';
+import { CSSProperties } from 'react';
+import { FieldTextProps } from './internal/field.js';
 
-interface ColorInputProps {
-    /** Hex #RRGGBB. */
-    value: string;
-    /** Dispara apenas com hex válido, normalizado em UPPERCASE. */
-    onChange: (hex: string) => void;
-    size?: 'sm' | 'md';
+interface ColorInputProps extends Omit<FieldTextProps, 'labelPosition'> {
+    /** Controlled: the colour, #RRGGBB (Figma: `value`). */
+    value?: string;
+    /** Uncontrolled: the colour at first. */
+    defaultValue?: string;
+    /** Called only with a valid #RRGGBB, in capitals: typed and confirmed, or chosen in the palette. */
+    onChange?: (hex: string) => void;
+    /**
+     * The colours the swatch's popover offers (#RRGGBB): the caller decides, usually the brand's. Without a palette the
+     * swatch opens the system's colour picker instead.
+     */
+    palette?: string[];
+    /** The palette's title. */
+    paletteTitle?: string;
+    /** The line under the palette. */
+    paletteCaption?: string;
+    /** The swatch's accessible name: it opens the palette (or the system's picker). */
+    pickLabel?: string;
+    /** The form field name: carries the hex. */
+    name?: string;
     disabled?: boolean;
+    id?: string;
     className?: string;
+    style?: CSSProperties;
+    /** The name when there is no visible label. */
     'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
+/** "2563eb", "#2563eb" → "#2563EB"; anything else → null. */
+declare function normalizeHex(text: string): string | null;
 /**
- * ColorInput — campo de cor único: swatch (abre o picker nativo) + hex
- * editável, no mesmo controle. Molécula sobre os tokens do Input: mesma
- * altura, borda, radius e anel de foco.
+ * ColorInput — Figma [RDS] Forms/ColorInput. One colour, chosen or typed: the swatch shows it and the hex beside it
+ * is editable (#RRGGBB, with or without #). The swatch opens a popover with the palette the caller passes (Figma:
+ * menu=open); without one, the system's colour picker. Enter or leaving the field confirms the hex; an invalid hex
+ * goes back to the last valid one. The swatch's colour is the person's data, not a token: it is the one inline
+ * style the DS allows (style.backgroundColor of the swatch and of each palette colour). Choosing among a few fixed
+ * colours without a hex is the ToggleGroup or the ChoiceCard. Styles: color-input.css and internal/field.css.
  */
-declare function ColorInput({ value, onChange, size, disabled, className, 'aria-label': ariaLabel, }: ColorInputProps): react.JSX.Element;
+declare function ColorInput({ label, hint, error, errorMessage, required, value, defaultValue, onChange, palette, paletteTitle, paletteCaption, pickLabel, name, disabled, id, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: ColorInputProps): react.JSX.Element;
 
-export { ColorInput, type ColorInputProps };
+export { ColorInput, type ColorInputProps, normalizeHex };