@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/carousel.js

@@ -0,0 +1,130 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useRef, useState } from "react";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "./internal/icons.js";
+function Carousel(_a) {
+  var _b = _a, {
+    showControls = true,
+    showDots = true,
+    defaultIndex = 0,
+    index,
+    onIndexChange,
+    className,
+    children,
+    onKeyDown
+  } = _b, rest = __objRest(_b, [
+    "showControls",
+    "showDots",
+    "defaultIndex",
+    "index",
+    "onIndexChange",
+    "className",
+    "children",
+    "onKeyDown"
+  ]);
+  const slides = Children.toArray(children);
+  const count = slides.length;
+  const [own, setOwn] = useState(defaultIndex);
+  const current = Math.min(Math.max(index != null ? index : own, 0), Math.max(count - 1, 0));
+  const start = useRef(null);
+  const go = (next) => {
+    const clamped = Math.min(Math.max(next, 0), count - 1);
+    if (clamped === current) return;
+    setOwn(clamped);
+    onIndexChange == null ? void 0 : onIndexChange(clamped);
+  };
+  const handleKey = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    if (event.target.closest('input, textarea, select, [contenteditable="true"]')) return;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      go(current - 1);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      go(current + 1);
+    }
+  };
+  const onPointerDown = (event) => {
+    if (event.pointerType !== "mouse") start.current = event.clientX;
+  };
+  const onPointerUp = (event) => {
+    if (start.current === null) return;
+    const delta = event.clientX - start.current;
+    start.current = null;
+    if (Math.abs(delta) > 40) go(current + (delta < 0 ? 1 : -1));
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    __spreadProps(__spreadValues({
+      "aria-roledescription": "carrossel"
+    }, rest), {
+      onKeyDown: handleKey,
+      className: ["rds-carousel", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "rds-carousel__stage", children: [
+          showControls && /* @__PURE__ */ jsx(Tooltip, { text: "Slide anterior", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+              label: "Slide anterior",
+              tone: "neutral",
+              variant: "outline",
+              disabled: current === 0,
+              onClick: () => go(current - 1)
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "rds-carousel__viewport", "aria-live": "polite", onPointerDown, onPointerUp, children: slides.map((slide, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "group",
+              "aria-roledescription": "slide",
+              "aria-label": `${i + 1} de ${count}`,
+              hidden: i !== current,
+              className: "rds-carousel__slide",
+              children: slide
+            },
+            i
+          )) }),
+          showControls && /* @__PURE__ */ jsx(Tooltip, { text: "Pr\xF3ximo slide", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+              label: "Pr\xF3ximo slide",
+              tone: "neutral",
+              variant: "outline",
+              disabled: current === count - 1,
+              onClick: () => go(current + 1)
+            }
+          ) })
+        ] }),
+        showDots && count > 1 && /* @__PURE__ */ jsx("div", { className: "rds-carousel__dots", children: slides.map((_, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rds-carousel__dot",
+            "aria-label": `Ir para o slide ${i + 1}`,
+            "aria-current": i === current ? "true" : void 0,
+            onClick: () => go(i)
+          },
+          i
+        )) })
+      ]
+    })
+  );
+}
+function CarouselPlaceholder(_c) {
+  var _d = _c, { className } = _d, rest = __objRest(_d, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-carousel__placeholder", className].filter(Boolean).join(" ") }));
+}
+export {
+  Carousel,
+  CarouselPlaceholder
+};

package/dist/components/chart.d.ts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+type ChartType = 'line' | 'bar' | 'column';
+interface ChartSeries {
+    /** The series name, shown in the legend, the tooltip and the data table. */
+    name: string;
+    /** One value per label, in the same order. */
+    data: number[];
+    /** line only: which axis it reads on. right only when the two series have different units (volume and rate). */
+    axis?: 'left' | 'right';
+}
+interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** What the chart shows, with the period. It names the chart and captions its data table. */
+    label: string;
+    /** line: lines over time; bar: a ranking in horizontal bars; column: columns by category. */
+    type?: ChartType;
+    /** The x labels: dates (line) or categories (bar, column), one per value. */
+    labels: string[];
+    /**
+     * Up to five series, in the order of the palette (chart/series/1 to 5); the main one first. bar draws the first
+     * series, one colour per row, as in Figma.
+     */
+    series: ChartSeries[];
+    /** Formats the left axis and its values. By default a compact number in pt-BR ("2,8 mi"). */
+    formatLeft?: (value: number) => string;
+    /** Formats the right axis and its values. */
+    formatRight?: (value: number) => string;
+    /** The right axis, for the series with axis="right" (Figma: `showRightAxis`). Off: every series reads on the left. */
+    showRightAxis?: boolean;
+    /** The legend under the chart (Figma: `showLegend`). Keep it on whenever there is more than one series. */
+    showLegend?: boolean;
+    /** The values of the point under the pointer or the keyboard (Figma: `showTooltip`). */
+    showTooltip?: boolean;
+    /** Off: only the first, middle and last label (Figma: `showAllDates`). Use it under about 360 px. */
+    showAllDates?: boolean;
+    /** Show the data table under the chart. By default it is there only for screen readers. */
+    showTable?: boolean;
+    /** Height of the plot area, in px (Figma: 200). */
+    height?: number;
+}
+/**
+ * Chart — Figma [RDS] Content/Chart. The chart area, to go inside a Card. Every chart carries a table with the same
+ * data (visually hidden unless `showTable`). In line and column the plot is a slider for screen readers and the
+ * keyboard: the arrows move from point to point, and each point is read with its label and values. Styles: chart.css.
+ */
+declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, showAllDates, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
+
+export { Chart, type ChartProps, type ChartSeries, type ChartType };

package/dist/components/chart.js

@@ -0,0 +1,258 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+const compact = new Intl.NumberFormat("pt-BR", { notation: "compact", maximumFractionDigits: 1 });
+const defaultFormat = (value) => compact.format(value);
+const seriesStyle = (n) => ({ ["--_series"]: `var(--_series-${(n - 1) % 5 + 1})` });
+function niceStep(raw) {
+  if (raw <= 0) return 1;
+  const power = 10 ** Math.floor(Math.log10(raw));
+  const fraction = raw / power;
+  const nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;
+  return nice * power;
+}
+function scaleOf(values) {
+  const low = Math.min(0, ...values);
+  const high = Math.max(0, ...values);
+  const step = niceStep((high - low) / 4);
+  const min = Math.floor(low / step) * step;
+  const max = min + step * 4;
+  return { min, max, ticks: [4, 3, 2, 1, 0].map((i) => min + step * i) };
+}
+function Chart(_a) {
+  var _b = _a, {
+    label,
+    type = "line",
+    labels,
+    series,
+    formatLeft = defaultFormat,
+    formatRight = defaultFormat,
+    showRightAxis = true,
+    showLegend = true,
+    showTooltip = true,
+    showAllDates = true,
+    showTable = false,
+    height = 200,
+    className
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "type",
+    "labels",
+    "series",
+    "formatLeft",
+    "formatRight",
+    "showRightAxis",
+    "showLegend",
+    "showTooltip",
+    "showAllDates",
+    "showTable",
+    "height",
+    "className"
+  ]);
+  var _a2;
+  const [active, setActive] = useState(null);
+  const tooltipId = useId();
+  const count = labels.length;
+  const shown = type === "bar" ? series.slice(0, 1) : series.slice(0, 5);
+  const onRight = (s) => type === "line" && showRightAxis && s.axis === "right";
+  const left = shown.filter((s) => !onRight(s));
+  const right = shown.filter(onRight);
+  const leftScale = scaleOf(left.flatMap((s) => s.data));
+  const rightScale = right.length ? scaleOf(right.flatMap((s) => s.data)) : null;
+  const dual = Boolean(rightScale);
+  const scaleFor = (s) => onRight(s) && rightScale ? rightScale : leftScale;
+  const formatFor = (s) => onRight(s) ? formatRight : formatLeft;
+  const x = (index) => type === "column" ? (index + 0.5) / count * 100 : count > 1 ? index / (count - 1) * 100 : 50;
+  const y = (s, value) => {
+    const { min, max } = scaleFor(s);
+    return 100 - (value - min) / (max - min) * 100;
+  };
+  const describe = (index) => `${labels[index]}: ` + shown.map((s) => {
+    var _a3;
+    return `${s.name} ${formatFor(s)((_a3 = s.data[index]) != null ? _a3 : 0)}`;
+  }).join(", ");
+  const legendName = (s) => dual ? `${s.name} (${onRight(s) ? "direita" : "esquerda"})` : s.name;
+  const labelIndexes = showAllDates || count <= 3 ? labels.map((_, i) => i) : [0, Math.floor((count - 1) / 2), count - 1];
+  const onPointerMove = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (event.clientX - box.left) / box.width));
+    setActive(type === "column" ? Math.min(count - 1, Math.floor(ratio * count)) : Math.round(ratio * (count - 1)));
+  };
+  const onKeyDown = (event) => {
+    const current = active != null ? active : 0;
+    const keys = {
+      ArrowRight: Math.min(count - 1, current + 1),
+      ArrowUp: Math.min(count - 1, current + 1),
+      ArrowLeft: Math.max(0, current - 1),
+      ArrowDown: Math.max(0, current - 1),
+      Home: 0,
+      End: count - 1
+    };
+    if (!(event.key in keys)) return;
+    event.preventDefault();
+    setActive(keys[event.key]);
+  };
+  const Axis = ({ ticks, format, side }) => /* @__PURE__ */ jsx("div", { className: `rds-chart__axis rds-chart__axis--${side}`, "aria-hidden": "true", children: ticks.map((tick) => /* @__PURE__ */ jsx("span", { children: format(tick) }, tick)) });
+  const tooltip = active !== null && showTooltip && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: tooltipId,
+      role: "tooltip",
+      className: `rds-chart__tooltip${x(active) > 50 ? " rds-chart__tooltip--flip" : ""}`,
+      style: x(active) > 50 ? { right: `${100 - x(active)}%` } : { left: `${x(active)}%` },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-chart__tooltip-title", children: labels[active] }),
+        shown.map((s, n) => {
+          var _a3;
+          return /* @__PURE__ */ jsxs("span", { className: "rds-chart__tooltip-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "rds-chart__dot", style: seriesStyle(n + 1), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "rds-chart__tooltip-name", children: s.name }),
+            /* @__PURE__ */ jsx("span", { className: "rds-chart__tooltip-value", children: formatFor(s)((_a3 = s.data[active]) != null ? _a3 : 0) })
+          ] }, s.name);
+        })
+      ]
+    }
+  );
+  const plotProps = {
+    className: "rds-chart__plot",
+    role: "slider",
+    tabIndex: 0,
+    "aria-label": `Ler ${label.charAt(0).toLowerCase()}${label.slice(1)}`,
+    "aria-valuemin": 0,
+    "aria-valuemax": Math.max(count - 1, 0),
+    "aria-valuenow": active != null ? active : 0,
+    "aria-valuetext": count ? describe(active != null ? active : 0) : void 0,
+    "aria-describedby": active !== null && showTooltip ? tooltipId : void 0,
+    onPointerMove,
+    onPointerLeave: (event) => {
+      if (document.activeElement !== event.currentTarget) setActive(null);
+    },
+    onFocus: () => setActive((current) => current != null ? current : 0),
+    onBlur: () => setActive(null),
+    onKeyDown
+  };
+  const grid = leftScale.ticks.map((tick, i) => /* @__PURE__ */ jsx("span", { className: "rds-chart__grid", style: { top: `${i * 25}%` } }, tick));
+  let body;
+  if (type === "bar") {
+    const s = shown[0];
+    const top = Math.max(0, ...(_a2 = s == null ? void 0 : s.data) != null ? _a2 : [0]);
+    body = /* @__PURE__ */ jsx("div", { className: "rds-chart__bars", "aria-hidden": "true", children: labels.map((name, i) => {
+      var _a3, _b2;
+      return /* @__PURE__ */ jsxs("div", { className: "rds-chart__bar-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-label", children: name }),
+        /* @__PURE__ */ jsx("span", { className: "rds-chart__track", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "rds-chart__bar",
+            style: __spreadProps(__spreadValues({}, seriesStyle(i + 1)), { width: `${top ? ((_a3 = s == null ? void 0 : s.data[i]) != null ? _a3 : 0) / top * 100 : 0}%` })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-value", children: s ? formatLeft((_b2 = s.data[i]) != null ? _b2 : 0) : "" })
+      ] }, name);
+    }) });
+  } else {
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "rds-chart__row", style: { height }, children: [
+        /* @__PURE__ */ jsx(Axis, { ticks: leftScale.ticks, format: formatLeft, side: "left" }),
+        /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, plotProps), { children: [
+          grid,
+          type === "line" ? /* @__PURE__ */ jsx("svg", { className: "rds-chart__svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", focusable: "false", "aria-hidden": "true", children: shown.map((s, n) => /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "rds-chart__line",
+              style: seriesStyle(n + 1),
+              d: s.data.map((value, i) => `${i ? "L" : "M"}${x(i).toFixed(2)} ${y(s, value).toFixed(2)}`).join(" ")
+            },
+            s.name
+          )) }) : /* @__PURE__ */ jsx("div", { className: "rds-chart__columns", "aria-hidden": "true", children: labels.map((name, i) => /* @__PURE__ */ jsx("div", { className: "rds-chart__column-group", children: shown.map((s, n) => {
+            var _a3;
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "rds-chart__column",
+                style: __spreadProps(__spreadValues({}, seriesStyle(n + 1)), { height: `${100 - y(s, (_a3 = s.data[i]) != null ? _a3 : 0)}%` })
+              },
+              s.name
+            );
+          }) }, name)) }),
+          active !== null && type === "line" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "rds-chart__crosshair", style: { left: `${x(active)}%` }, "aria-hidden": "true" }),
+            shown.map((s, n) => {
+              var _a3;
+              return /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "rds-chart__point",
+                  style: __spreadProps(__spreadValues({}, seriesStyle(n + 1)), { left: `${x(active)}%`, top: `${y(s, (_a3 = s.data[active]) != null ? _a3 : 0)}%` }),
+                  "aria-hidden": "true"
+                },
+                s.name
+              );
+            })
+          ] }),
+          active !== null && type === "column" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "rds-chart__band",
+              style: { left: `${active / count * 100}%`, width: `${100 / count}%` },
+              "aria-hidden": "true"
+            }
+          ),
+          tooltip
+        ] })),
+        rightScale && /* @__PURE__ */ jsx(Axis, { ticks: rightScale.ticks, format: formatRight, side: "right" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "rds-chart__labels", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: `rds-chart__labels-track rds-chart__labels-track--${type}`, children: labelIndexes.map((i) => /* @__PURE__ */ jsx("span", { className: "rds-chart__label", style: { left: `${x(i)}%` }, children: labels[i] }, i)) }) })
+    ] });
+  }
+  const firstColumn = type === "line" ? "Data" : "Categoria";
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    __spreadProps(__spreadValues({}, rest), {
+      "aria-label": label,
+      className: ["rds-chart", `rds-chart--${type}`, dual && "rds-chart--dual", className].filter(Boolean).join(" "),
+      children: [
+        body,
+        showLegend && type !== "bar" && /* @__PURE__ */ jsx("ul", { className: "rds-chart__legend", "aria-hidden": "true", children: shown.map((s, n) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-chart__dot", style: seriesStyle(n + 1) }),
+          legendName(s)
+        ] }, s.name)) }),
+        showTable ? /* @__PURE__ */ jsxs(Table, { caption: label, showCaption: true, className: "rds-chart__table", children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableHead, { children: firstColumn }),
+            shown.map((s) => /* @__PURE__ */ jsx(TableHead, { align: "end", children: legendName(s) }, s.name))
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: labels.map((name, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: name }),
+            shown.map((s) => {
+              var _a3;
+              return /* @__PURE__ */ jsx(TableCell, { align: "end", children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
+            })
+          ] }, name)) })
+        ] }) : /* @__PURE__ */ jsxs("table", { className: "rds-visually-hidden", children: [
+          /* @__PURE__ */ jsx("caption", { children: label }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: firstColumn }),
+            shown.map((s) => /* @__PURE__ */ jsx("th", { scope: "col", children: legendName(s) }, s.name))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: labels.map((name, i) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", children: name }),
+            shown.map((s) => {
+              var _a3;
+              return /* @__PURE__ */ jsx("td", { children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
+            })
+          ] }, name)) })
+        ] })
+      ]
+    })
+  );
+}
+export {
+  Chart
+};

package/dist/components/checkbox-group.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ChoiceFieldsetProps } from './internal/fieldset.js';
+
+interface CheckboxGroupProps extends ChoiceFieldsetProps {
+    /** Said after the legend to screen readers when `required` (a group of checkboxes has no native required). */
+    requiredText?: string;
+}
+/**
+ * CheckboxGroup — Figma [RDS] Forms/CheckboxGroup. A question and its multiple-choice options (Checkbox
+ * children, Figma slot `options`) in a <fieldset>, with the group's hint and one error for the group.
+ * HTML has no required for a group of checkboxes: validate on submit and pass `errorMessage`.
+ * Styles: checkbox-group.css and internal/fieldset.css.
+ */
+declare function CheckboxGroup({ requiredText, ...props }: CheckboxGroupProps): react.JSX.Element;
+
+export { CheckboxGroup, type CheckboxGroupProps };

package/dist/components/checkbox-group.js

@@ -0,0 +1,13 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { ChoiceFieldset } from "./internal/fieldset.js";
+function CheckboxGroup(_a) {
+  var _b = _a, { requiredText = "obrigat\xF3rio" } = _b, props = __objRest(_b, ["requiredText"]);
+  return /* @__PURE__ */ jsx(ChoiceFieldset, __spreadValues({ kind: "rds-checkbox-group", requiredText }, props));
+}
+export {
+  CheckboxGroup
+};

package/dist/components/checkbox.d.ts

@@ -1,14 +1,29 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
 
-interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-    label?: ReactNode;
-    /** Texto secundário abaixo do label. */
-    description?: ReactNode;
-    indeterminate?: boolean;
-    error?: string;
-    size?: 'sm' | 'md';
+type CheckboxChecked = boolean | 'indeterminate';
+interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'children' | 'checked' | 'size'> {
+    /** What the person confirms or chooses (Figma: `showLabel` + `label`). Without it, pass aria-label (a table cell). */
+    children?: ReactNode;
+    /** A line under the label (Figma: `showHint` + `hint`), tied by aria-describedby. */
+    hint?: ReactNode;
+    /**
+     * Controlled (Figma: `checked`). `'indeterminate'` is partly checked: only for the "select all" of a list
+     * when some options are checked. Pair it with `onChange` or `onCheckedChange`.
+     */
+    checked?: CheckboxChecked;
+    /** Called with the new checked state on every change. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** The error state (Figma: `error`). Passing `errorMessage` turns it on too. Inside a CheckboxGroup, the error belongs to the group. */
+    error?: boolean;
+    /** What is missing and how to fix it ("Aceite os termos para continuar"). Turns the error state on. */
+    errorMessage?: ReactNode;
 }
-declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * Checkbox — Figma [RDS] Forms/Checkbox. A box to check: alone for a yes (terms), or in a list inside a
+ * CheckboxGroup. Native <input type="checkbox">: Space toggles it, and it goes with the form. Disabled is
+ * the native one. Styles: checkbox.css and internal/choice.css.
+ */
+declare function Checkbox({ children, hint, checked, onCheckedChange, error, errorMessage, required, disabled, id, className, style, onChange, ref, ...input }: CheckboxProps): react.JSX.Element;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox, type CheckboxChecked, type CheckboxProps };