@oprt/react 0.0.0-stage → 0.2.0

package/dist/Chart/Chart.manifest.js

@@ -0,0 +1,110 @@
+// src/Chart/Chart.manifest.ts
+var ChartManifest = {
+  Chart: {
+    description: "Native SVG charts with stable series identity and exact data tables. Line, area, and bar support shared pointer/keyboard readouts and an optional controlled observation window.",
+    props: {
+      label: {
+        type: "string",
+        required: true,
+        description: "Visible chart heading and accessible graphic name."
+      },
+      series: {
+        type: "array",
+        required: true,
+        description: "Readonly ChartSeries[] with unique stable IDs. Points are { x: number, y: number | null, label?: string }; null and non-finite coordinates are missing. Line/area preserve authored order; use ascending x. Heatmap requires unique x within each series.",
+        items: {
+          id: "string (unique, stable)",
+          label: "string",
+          data: "readonly ChartPoint[]",
+          color: "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 (optional categorical token)"
+        }
+      },
+      variant: {
+        type: "enum",
+        values: ["line", "area", "bar", "scatter", "histogram", "heatmap"],
+        default: "line"
+      },
+      fill: {
+        type: "enum",
+        values: ["solid", "hatched"],
+        default: "solid",
+        description: "Area and bar fill treatment. Hatching adds texture while outlines carry series color and measurement."
+      },
+      description: {
+        type: "string",
+        description: "Visible supporting context, also included in the graphic description."
+      },
+      xLabel: {
+        type: "string",
+        description: "X axis label. Defaults to Sample, or Value for histograms."
+      },
+      xUnit: { type: "string", description: "X axis unit. Histogram x values use unit instead." },
+      yLabel: {
+        type: "string",
+        description: "Y axis label. Defaults to Value, or Count for histograms."
+      },
+      unit: {
+        type: "string",
+        description: "Measured value unit; shown on axes, thresholds, and the heatmap scale."
+      },
+      formatX: {
+        type: "function",
+        description: '(finiteX: number) => string. Formats x tick labels, the full start and end of the window in the line under the plot, and sample positions when no authored point label exists. For a time axis, return YYYY-MM-DD HH:MM:SS and set xUnit="UTC". Histogram bin bounds remain numeric.'
+      },
+      hiddenSeries: {
+        type: "array",
+        description: "Controlled hidden series IDs. Omit for internal visibility state. Hidden series are excluded from scales; raw data inspection still includes them."
+      },
+      onHiddenSeriesChange: {
+        type: "function",
+        description: "(ids: string[]) => void. Reports the requested hidden IDs; supplied hiddenSeries remains controlled."
+      },
+      disabled: {
+        type: "boolean",
+        default: false,
+        description: "Disables legend and range changes. Pointer/keyboard inspection and View data remain available."
+      },
+      rangeSelection: {
+        type: "boolean",
+        default: false,
+        description: "Shows a miniature overview with draggable and keyboard-operable start/end handles for line, area, and bar. Needs a non-zero x domain and at least one finite sample coordinate. Other variants ignore it."
+      },
+      xDomain: {
+        type: "node",
+        description: "Optional ChartRange { start, end } defining the full observation bounds for line/area/bar, including periods without measurements. Defaults to the extent of supplied x values. Pass snapshot bounds when linking time controls."
+      },
+      range: {
+        type: "node",
+        description: "Controlled ChartRange { start: number, end: number } in x units. Filters line/area/bar samples inclusively. Overlapping bounds clamp to the full domain; invalid or reversed bounds use it in full. Valid disjoint controlled ranges stay empty. Omit for internal range state. Supply full history for the overview."
+      },
+      onRangeChange: {
+        type: "function",
+        description: "(range: ChartRange) => void. Reports requested x bounds from range handles or reset. Supplied range remains controlled. Keyboard steps span 0.1% of the full domain; handles do not snap to observations."
+      },
+      cursor: {
+        type: "number",
+        description: "Optional supplied x position for line/area/bar. Draws an independent review marker without selecting or interpolating a measurement. Invalid/out-of-window positions are omitted; null clears it."
+      },
+      cursorLabel: {
+        type: "string",
+        default: "Review position",
+        description: "Visible label for the supplied marker. Its value uses formatX and xUnit."
+      },
+      bins: {
+        type: "number",
+        default: 10,
+        description: "Histogram bin count, floored and clamped to 1\u2013100. Non-finite values use 10. Constant data uses one bin. Each histogram bins valid point.y values on a shared range; the last bin includes the maximum."
+      },
+      threshold: {
+        type: "node",
+        description: "Optional { value: number, label: string } on the measured y axis (count for histograms). Adds a dashed line and text. Non-finite values and heatmap thresholds are ignored."
+      }
+    },
+    composable_with: ["Card", "DataGrid", "TimeRange", "SplitPane"],
+    never_inside: ["Chart", "Button"],
+    example: '<Chart label="Link latency" unit="ms" xLabel="Elapsed" xUnit="s" series={[{ id: "alpha", label: "Alpha", data: [{ x: 0, y: 22 }, { x: 1, y: null }, { x: 2, y: 25 }] }]} />'
+  }
+};
+export {
+  ChartManifest
+};

package/dist/Chart/ChartControls.js

@@ -0,0 +1,190 @@
+"use client";
+
+// src/Chart/ChartControls.tsx
+import { memo, useEffect, useMemo, useRef } from "react";
+import { Slider, SliderFill, SliderThumb, SliderTrack } from "react-aria-components";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { useHydrationRoot } from "../_internal/hydration.js";
+import {
+  extent,
+  fraction,
+  interpolate,
+  isFinitePoint,
+  linePath,
+  scale,
+  segments,
+  seriesColorClass
+} from "./geometry.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartInspection({
+  label,
+  index,
+  count,
+  describe,
+  onChange,
+  onFocus,
+  onBlur,
+  inputRef
+}) {
+  const hydration = useHydrationRoot();
+  useEffect(() => {
+    inputRef.current?.setAttribute("aria-valuetext", describe(index));
+  });
+  return /* @__PURE__ */ jsx(
+    Slider,
+    {
+      ...hydration.probeProps,
+      "aria-label": `Inspect ${label}`,
+      minValue: 0,
+      maxValue: Math.max(1, count - 1),
+      value: index,
+      onChange: (value) => onChange(Math.min(count - 1, value)),
+      className: "absolute inset-0 pointer-events-none",
+      children: /* @__PURE__ */ jsx(SliderTrack, { className: "sr-only", children: /* @__PURE__ */ jsx(SliderThumb, { inputRef, onFocus, onBlur }) })
+    },
+    hydration.key
+  );
+}
+var ChartRangeSelector = memo(function ChartRangeSelector2({
+  label,
+  series,
+  domain,
+  range,
+  format,
+  renderPosition,
+  disabled,
+  onChange
+}) {
+  const hydration = useHydrationRoot();
+  const startRef = useRef(null);
+  const endRef = useRef(null);
+  useEffect(() => {
+    startRef.current?.setAttribute("aria-valuetext", format(range.start));
+    endRef.current?.setAttribute("aria-valuetext", format(range.end));
+  });
+  const start = fraction(range.start, domain) * 1e3;
+  const end = fraction(range.end, domain) * 1e3;
+  const overview = useMemo(() => {
+    const overviewSeries = series.map((item) => ({
+      ...item,
+      data: item.data.filter(
+        (point) => !Number.isFinite(point.x) || point.x >= domain.min && point.x <= domain.max
+      )
+    }));
+    const overviewY = scale(
+      extent(
+        overviewSeries.flatMap((item) => item.data.filter(isFinitePoint).map((point) => point.y))
+      ),
+      44,
+      4
+    );
+    const overviewX = scale(domain, 0, 1e3);
+    return overviewSeries.map((item) => /* @__PURE__ */ jsx("g", { className: seriesColorClass(item.id, item.color), children: segments(item.data).map((run, index) => /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: linePath(run, overviewX, overviewY),
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "var(--oprt-chart-stroke-width)",
+        vectorEffect: "non-scaling-stroke"
+      },
+      index
+    )) }, item.id));
+  }, [series, domain]);
+  const full = range.start === domain.min && range.end === domain.max;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3u border-t border-oprt-border pt-2u", "data-chart-range": "", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1u flex flex-wrap items-center justify-between gap-1u", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-oprt-base font-semibold uppercase tracking-oprt-caps", children: "Observation window" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          disabled: disabled || full,
+          onClick: () => onChange({ start: domain.min, end: domain.max }),
+          children: "Reset range"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        ...hydration.probeProps,
+        "aria-label": `${label} observation window`,
+        minValue: 0,
+        maxValue: 1e3,
+        step: 1,
+        value: [start, end],
+        isDisabled: disabled,
+        className: "px-1.5u data-[disabled]:opacity-50",
+        onChange: (values) => {
+          const lower = values[0];
+          const upper = values[1];
+          if (lower >= upper) return;
+          onChange({
+            start: interpolate(domain, lower / 1e3),
+            end: interpolate(domain, upper / 1e3)
+          });
+        },
+        children: /* @__PURE__ */ jsxs(SliderTrack, { className: "relative h-6u w-full touch-none border-y border-oprt-border bg-oprt-surface-2", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "data-chart-overview": "",
+              "aria-hidden": "true",
+              viewBox: "0 0 1000 48",
+              preserveAspectRatio: "none",
+              className: "pointer-events-none absolute inset-0 h-full w-full",
+              children: [
+                overview,
+                /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: start, height: 48, fill: "var(--oprt-bg)", opacity: 0.75 }),
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: end,
+                    y: 0,
+                    width: 1e3 - end,
+                    height: 48,
+                    fill: "var(--oprt-bg)",
+                    opacity: 0.75
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(SliderFill, { className: "pointer-events-none absolute h-full border-y border-oprt-accent" }),
+          ["start", "end"].map((edge, index) => /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              index,
+              "aria-label": `${label} window ${edge}`,
+              inputRef: index === 0 ? startRef : endRef,
+              className: "group/range top-1/2 flex h-full min-h-3u w-3u cursor-ew-resize items-center justify-center outline-hidden data-[disabled]:cursor-not-allowed",
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    "flex h-full w-1u items-center justify-center border border-oprt-accent bg-oprt-surface-1",
+                    "group-data-[focus-visible]/range:shadow-oprt-focus group-data-[focus-visible]/range:border-oprt-border-focus"
+                  ),
+                  children: /* @__PURE__ */ jsx("span", { className: "h-2u border-l border-oprt-accent" })
+                }
+              )
+            },
+            edge
+          ))
+        ] })
+      },
+      hydration.key
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1u flex flex-wrap justify-between gap-1u font-mono text-oprt-base text-oprt-text-dim oprt-wrap-anywhere", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0", children: renderPosition(range.start) }),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0", children: renderPosition(range.end) })
+    ] })
+  ] });
+});
+export {
+  ChartInspection,
+  ChartRangeSelector
+};

package/dist/Chart/geometry.js

@@ -0,0 +1,217 @@
+// src/Chart/geometry.ts
+function isFinitePoint(point) {
+  return Number.isFinite(point.x) && point.y !== null && Number.isFinite(point.y);
+}
+function extent(values, includeZero = false) {
+  let min = includeZero ? 0 : Infinity;
+  let max = includeZero ? 0 : -Infinity;
+  for (const value of values) {
+    if (!Number.isFinite(value)) continue;
+    min = Math.min(min, value);
+    max = Math.max(max, value);
+  }
+  return min === Infinity ? { min: 0, max: 1 } : { min, max };
+}
+function fraction(value, domain) {
+  if (domain.min === domain.max) return 0.5;
+  const span = domain.max - domain.min;
+  const ratio = Number.isFinite(span) ? (value - domain.min) / span : (value / 2 - domain.min / 2) / (domain.max / 2 - domain.min / 2);
+  return Math.max(0, Math.min(1, ratio));
+}
+function interpolate(domain, fraction2) {
+  if (fraction2 === 0) return domain.min;
+  if (fraction2 === 1) return domain.max;
+  return domain.min * (1 - fraction2) + domain.max * fraction2;
+}
+function scale(domain, start, end) {
+  return (value) => start + fraction(value, domain) * (end - start);
+}
+function ticks(domain, count = 5) {
+  if (domain.min === domain.max) return [domain.min];
+  return Array.from({ length: count }, (_, index) => interpolate(domain, index / (count - 1)));
+}
+function niceAxis(domain, wholeNumbers = false) {
+  const fallback = () => ({ domain, ticks: ticks(domain) });
+  const span = domain.max - domain.min;
+  if (!Number.isFinite(span) || span <= 0) return fallback();
+  const rough = span / 4;
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  if (!Number.isFinite(magnitude) || magnitude === 0) return fallback();
+  const ratio = rough / magnitude;
+  const step = Math.max(
+    wholeNumbers ? 1 : 0,
+    (ratio <= 1 ? 1 : ratio <= 2 ? 2 : ratio <= 5 ? 5 : 10) * magnitude
+  );
+  const min = Math.floor(domain.min / step) * step;
+  const max = Math.ceil(domain.max / step) * step;
+  const count = Math.round((max - min) / step);
+  if (![min, max, step, count].every(Number.isFinite) || step <= 0 || count < 1 || count > 10)
+    return fallback();
+  const values = Array.from(
+    { length: count + 1 },
+    (_, index) => Number((min + index * step).toPrecision(14))
+  );
+  if (values[0] > domain.min || values[values.length - 1] < domain.max) return fallback();
+  return { domain: { min: values[0], max: values[values.length - 1] }, ticks: values };
+}
+function segments(points) {
+  const result = [];
+  let segment = [];
+  for (const point of points) {
+    if (isFinitePoint(point)) segment.push(point);
+    else if (segment.length) {
+      result.push(segment);
+      segment = [];
+    }
+  }
+  if (segment.length) result.push(segment);
+  return result;
+}
+function markerPoints(runs, x) {
+  const marked = /* @__PURE__ */ new Set();
+  for (const run of runs) {
+    if (!run.length) continue;
+    const first = run[0];
+    const last = run[run.length - 1];
+    marked.add(first);
+    let previousX = x(first.x);
+    for (const point of run.slice(1, -1)) {
+      const position = x(point.x);
+      if (Math.abs(position - previousX) >= 48 && Math.abs(x(last.x) - position) >= 48) {
+        marked.add(point);
+        previousX = position;
+      }
+    }
+    marked.add(last);
+  }
+  return marked;
+}
+function indexByX(points) {
+  const index = /* @__PURE__ */ new Map();
+  for (const point of points) {
+    if (Number.isFinite(point.x) && !index.has(point.x)) index.set(point.x, point);
+  }
+  return index;
+}
+function nearestIndex(values, position, toPosition) {
+  if (values.length === 0) return -1;
+  let low = 0;
+  let high = values.length;
+  while (low < high) {
+    const middle = low + high >>> 1;
+    if (toPosition(values[middle]) < position) low = middle + 1;
+    else high = middle;
+  }
+  if (low === 0) return 0;
+  if (low === values.length) return values.length - 1;
+  const before = Math.abs(toPosition(values[low - 1]) - position);
+  const after = Math.abs(toPosition(values[low]) - position);
+  return after < before ? low : low - 1;
+}
+function linePath(points, x, y) {
+  return points.map((point, index) => `${index === 0 ? "M" : "L"}${x(point.x)},${y(point.y)}`).join(" ");
+}
+function seriesIdentity(id) {
+  let hash = 2166136261;
+  for (let i = 0; i < id.length; i++) hash = Math.imul(hash ^ id.charCodeAt(i), 16777619);
+  return (hash >>> 0) % 8;
+}
+var categoryClasses = [
+  "text-oprt-cat-1",
+  "text-oprt-cat-2",
+  "text-oprt-cat-3",
+  "text-oprt-cat-4",
+  "text-oprt-cat-5",
+  "text-oprt-cat-6",
+  "text-oprt-cat-7",
+  "text-oprt-cat-8"
+];
+function seriesColorClass(id, color) {
+  if (color !== void 0 && Number.isInteger(color) && color >= 1 && color <= 8) {
+    return categoryClasses[color - 1];
+  }
+  return categoryClasses[id === void 0 ? 0 : seriesIdentity(id)];
+}
+var sequentialClasses = [
+  "text-oprt-data-seq-1",
+  "text-oprt-data-seq-2",
+  "text-oprt-data-seq-3",
+  "text-oprt-data-seq-4",
+  "text-oprt-data-seq-5"
+];
+var exactAt = (value, decimals) => Math.abs(Number(value.toFixed(decimals)) - value) <= Math.abs(value) * 1e-12;
+var withoutFloatNoise = (value) => Number.isFinite(value) ? Number(value.toPrecision(15)) : value;
+var Y_LABEL_LIMIT = 11;
+var MAX_FRACTION_DIGITS = 20;
+function fittedScientific(value, locale, limit) {
+  const exactDigits = /\.(\d+)e/.exec(value.toExponential())?.[1]?.length ?? 0;
+  for (let digits = exactDigits; ; digits--) {
+    const text = new Intl.NumberFormat(locale, {
+      notation: "scientific",
+      maximumFractionDigits: digits
+    }).format(value);
+    if (text.length <= limit || digits === 0) return text;
+  }
+}
+function tickLabels(values, locale) {
+  const finite = values.filter(Number.isFinite).sort((a, b) => a - b);
+  let step = Infinity;
+  for (let index = 1; index < finite.length; index++) {
+    const gap = finite[index] - finite[index - 1];
+    if (gap > 0) step = Math.min(step, gap);
+  }
+  if (!Number.isFinite(step)) {
+    const exact = new Intl.NumberFormat(locale, { maximumSignificantDigits: 21 });
+    return values.map((value) => {
+      const text = exact.format(value + 0);
+      return text.length <= Y_LABEL_LIMIT ? text : fittedScientific(value, locale, Y_LABEL_LIMIT);
+    });
+  }
+  const stepExponent = Math.floor(Math.log10(step) + 1e-9);
+  let decimals = Math.max(0, -stepExponent);
+  while (decimals < 6 && !finite.every((value) => exactAt(value, decimals))) decimals++;
+  if (decimals <= MAX_FRACTION_DIGITS) {
+    const format = new Intl.NumberFormat(locale, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    });
+    const labels = values.map((value) => format.format(value + 0));
+    if (labels.every((label) => label.length <= Y_LABEL_LIMIT)) return labels;
+  }
+  const largest = Math.max(...finite.map(Math.abs));
+  const largestExponent = largest === 0 ? stepExponent : Math.floor(Math.log10(largest) + 1e-9);
+  const digits = Math.min(16, Math.max(0, largestExponent - stepExponent));
+  const scientific = new Intl.NumberFormat(locale, {
+    notation: "scientific",
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits
+  });
+  const zero = new Intl.NumberFormat(locale).format(0);
+  return values.map((value) => value === 0 ? zero : scientific.format(value));
+}
+function intervalSeparator(locale) {
+  const decimal = new Intl.NumberFormat(locale).formatToParts(1.5).find((part) => part.type === "decimal");
+  return decimal?.value === "," ? "; " : ", ";
+}
+export {
+  Y_LABEL_LIMIT,
+  categoryClasses,
+  extent,
+  fraction,
+  indexByX,
+  interpolate,
+  intervalSeparator,
+  isFinitePoint,
+  linePath,
+  markerPoints,
+  nearestIndex,
+  niceAxis,
+  scale,
+  segments,
+  sequentialClasses,
+  seriesColorClass,
+  seriesIdentity,
+  tickLabels,
+  ticks,
+  withoutFloatNoise
+};

package/dist/Chart/index.js

@@ -0,0 +1,9 @@
+// src/Chart/index.ts
+import {
+  Chart
+} from "./Chart.js";
+import { ChartManifest } from "./Chart.manifest.js";
+export {
+  Chart,
+  ChartManifest
+};

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,166 @@
+"use client";
+
+// src/Checkbox/Checkbox.tsx
+import { Checkbox as AriaCheckbox } from "react-aria-components";
+import { cva } from "class-variance-authority";
+import { forwardRef, useRef, useState } from "react";
+import clsx from "clsx";
+import { useMotion } from "../_internal/motion.js";
+import { Check, Minus } from "@oprt/icons";
+import { useFieldWiring } from "../_internal/fieldIds.js";
+import { CheckboxManifest } from "./Checkbox.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { definedOnly, useAriaInvalidRef } from "../_internal/aria.js";
+import { keyForIds } from "../_internal/hydration.js";
+import { FORCED_CHECKBOX_BOX } from "../_internal/controlStyles.js";
+import { useInputRefObject } from "../_internal/mergeRefs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var rootStyles = cva(
+  // Selected state = a checkmark on the surface (not a solid fill). The box border
+  // turns accent; the check (or, for tri-state, the bar) is the accent mark inside.
+  //
+  // RAC state attributes replace the Radix ones: data-selected / data-indeterminate
+  // instead of data-state, data-focus-visible instead of the :focus-visible
+  // pseudo-class (the role element is a hidden <input>, so the pseudo-class would
+  // never match the hidden input), data-disabled instead of :disabled. A named
+  // label group forwards those states to the visual box inside its 24px target.
+  // RAC has no
+  // "unselected" attribute, so the resting border is the base class and the selected
+  // variants override it (attribute selectors out-specify a plain class). The resting border is
+  // the control outline (design call DC-3); an invalid box takes the error color whether it is
+  // checked or not (the Toggle-R5 precedent): Tailwind sorts these state variants by name, so
+  // `selected` would win a tie, and `[&&]` raises the invalid rule above it.
+  "relative inline-flex items-center justify-center border bg-oprt-surface-2 oprt-motion-track group-data-[focus-visible]/checkbox:border-oprt-border-focus group-data-[focus-visible]/checkbox:shadow-oprt-focus group-data-[disabled]/checkbox:opacity-50 group-data-[disabled]/checkbox:cursor-not-allowed border-oprt-border-control group-data-[selected]/checkbox:border-oprt-accent group-data-[indeterminate]/checkbox:border-oprt-accent group-data-[invalid]/checkbox:[&&]:border-oprt-error",
+  {
+    variants: {
+      size: {
+        sm: "h-2u w-2u",
+        md: "h-2.5u w-2.5u",
+        lg: "h-3u w-3u"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Checkbox = forwardRef((props, ref) => {
+  const {
+    className,
+    motion = "auto",
+    size,
+    id,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    disabled,
+    required,
+    name,
+    value,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid
+  } = props;
+  const motionState = useMotion(motion);
+  const {
+    id: finalId,
+    labelledBy,
+    describedBy,
+    invalid: isInvalid,
+    required: isRequired
+  } = useFieldWiring(
+    {
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
+      required
+    },
+    { label: "labelledby" }
+  );
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Checkbox", CheckboxManifest.Checkbox.props, { ...props });
+  }
+  const isControlled = checked !== void 0;
+  const [uncontrolledIndeterminate, setUncontrolledIndeterminate] = useState(
+    defaultChecked === "indeterminate"
+  );
+  const isIndeterminate = isControlled ? checked === "indeterminate" : uncontrolledIndeterminate;
+  const setNode = useAriaInvalidRef(ref, isInvalid);
+  const inputRef = useInputRefObject(setNode);
+  const deferredInputMotion = useRef(null);
+  const motionProps = {
+    ...motionState.props,
+    onClickCapture: (event) => {
+      const nativeClick = event.nativeEvent;
+      const deferMotion = event.target === inputRef.current && event.detail === 0;
+      deferredInputMotion.current = deferMotion ? nativeClick : null;
+      if (deferMotion) {
+        setTimeout(() => {
+          if (deferredInputMotion.current === nativeClick) deferredInputMotion.current = null;
+        }, 0);
+      } else {
+        motionState.props.onClickCapture(event);
+      }
+    }
+  };
+  const rootProps = {
+    isDisabled: disabled ?? false,
+    isRequired,
+    isInvalid,
+    isIndeterminate,
+    onChange: (next) => {
+      const settleMotion = deferredInputMotion.current;
+      deferredInputMotion.current = null;
+      if (!isControlled) setUncontrolledIndeterminate(false);
+      onCheckedChange?.(next);
+      if (settleMotion) motionState.settleInput();
+    },
+    ...definedOnly({
+      id: finalId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      name,
+      value
+    })
+  };
+  if (isControlled) rootProps["isSelected"] = checked === true;
+  if (defaultChecked !== void 0) {
+    rootProps["defaultSelected"] = defaultChecked === true;
+  }
+  return /* @__PURE__ */ jsx(
+    AriaCheckbox,
+    {
+      ...rootProps,
+      ...motionProps,
+      render: (domProps) => /* @__PURE__ */ jsx("label", { ...domProps, ...motionProps }),
+      inputRef,
+      className: clsx(
+        "oprt-motion group/checkbox relative inline-flex self-start w-fit items-center justify-center min-h-3u min-w-3u cursor-pointer data-[disabled]:cursor-not-allowed",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("span", { className: clsx(rootStyles({ size }), "text-oprt-accent", FORCED_CHECKBOX_BOX), children: [
+        /* @__PURE__ */ jsx(
+          Check,
+          {
+            size: size === "sm" ? 12 : size === "lg" ? 20 : 16,
+            className: "oprt-cb-check oprt-motion-check shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Minus,
+          {
+            size: size === "sm" ? 12 : size === "lg" ? 20 : 16,
+            className: "oprt-cb-bar oprt-motion-check shrink-0"
+          }
+        )
+      ] })
+    },
+    keyForIds(finalId, labelledBy)
+  );
+});
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};