@cdx-ui/components 0.0.1-beta.99 → 0.1.1

package/lib/module/components/Carousel/index.js

@@ -0,0 +1,152 @@
+"use strict";
+
+import { forwardRef, useCallback, useRef } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import RNCarousel, { Pagination as RNCarouselPagination } from 'react-native-reanimated-carousel';
+import { useResolveClassNames } from 'uniwind';
+import { cn, mergeRefs } from '@cdx-ui/utils';
+import { CarouselProgressProvider, useCarouselProgressContext } from './context';
+import { CarouselNextButton, CarouselPrevButton } from './navButton';
+import { resolveCarouselPaginationScrollAction } from './paginationNavigation';
+import { carouselPaginationContainerClassName, carouselPaginationDotVariants } from './styles';
+
+/**
+ * Full passthrough of `react-native-reanimated-carousel`'s own props (per `01-api-design.md`,
+ * Resolved Question #1) — re-exported under a Forge-owned name so consumers never import the
+ * adopted library directly. A type alias (not `interface extends`) because `TCarouselProps<T>`
+ * is itself a union-containing type (vertical/mode discriminants), which interfaces cannot extend.
+ */
+
+/** Mirrors the adopted library's private `DotStyle` shape (not exported) without importing it. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function isSharedValueProgress(value) {
+  return typeof value === 'object' && value !== null && 'value' in value;
+}
+function CarouselInner({
+  className,
+  style,
+  onProgressChange,
+  children,
+  loop = true,
+  defaultIndex = 0,
+  ...rest
+}, ref) {
+  const internalRef = useRef(null);
+  const internalProgress = useSharedValue(defaultIndex);
+  const resolvedClassNameStyle = useResolveClassNames(cn(className));
+  const vertical = rest.vertical ?? false;
+  const itemCount = rest.data.length;
+  const handleProgressChange = useCallback((offsetProgress, absoluteProgress) => {
+    internalProgress.value = absoluteProgress;
+    if (typeof onProgressChange === 'function') {
+      onProgressChange(offsetProgress, absoluteProgress);
+    }
+  }, [onProgressChange, internalProgress]);
+  const consumerProgress = isSharedValueProgress(onProgressChange) ? onProgressChange : undefined;
+  const contextValue = {
+    progress: consumerProgress ?? internalProgress,
+    carouselRef: internalRef,
+    loop,
+    itemCount,
+    vertical
+  };
+  return /*#__PURE__*/_jsxs(CarouselProgressProvider, {
+    value: contextValue,
+    children: [/*#__PURE__*/_jsx(RNCarousel, {
+      ref: mergeRefs(ref, internalRef),
+      style: [resolvedClassNameStyle, style],
+      onProgressChange: consumerProgress ?? handleProgressChange,
+      loop: loop,
+      defaultIndex: defaultIndex,
+      ...rest
+    }), children]
+  });
+}
+const CarouselRoot = /*#__PURE__*/forwardRef(CarouselInner);
+
+// =============================================================================
+// PAGINATION
+// =============================================================================
+
+function CarouselPaginationComponent({
+  className,
+  progress: progressProp,
+  carouselRef: carouselRefProp,
+  loop: loopProp,
+  onPress,
+  ...rest
+}) {
+  // `strict: false` with no `defaultValue` means this returns `undefined` outside a
+  // `<Carousel>` provider at runtime; cast to communicate that to TypeScript, since
+  // `createContext`'s helper type always reports `T` (see `@cdx-ui/utils`).
+  const context = useCarouselProgressContext();
+  const progress = progressProp ?? context?.progress;
+  const carouselRef = carouselRefProp ?? context?.carouselRef;
+  const loop = loopProp ?? context?.loop ?? true;
+  if (!progress) {
+    throw new Error('Carousel.Pagination must be rendered inside <Carousel> or receive an explicit `progress` prop.');
+  }
+  if (!onPress && !carouselRef) {
+    throw new Error('Carousel.Pagination must be rendered inside <Carousel> or receive an explicit `carouselRef` prop (or a custom `onPress`).');
+  }
+  const handlePress = useCallback(index => {
+    if (onPress) {
+      onPress(index);
+      return;
+    }
+    const carousel = carouselRef?.current;
+    if (!carousel) return;
+    const scrollAction = resolveCarouselPaginationScrollAction(carousel.getCurrentIndex(), index, rest.data.length, loop);
+    if (scrollAction) {
+      carousel.scrollTo(scrollAction);
+    }
+  }, [onPress, carouselRef, loop, rest.data.length]);
+  const containerStyle = useResolveClassNames(cn(carouselPaginationContainerClassName, className));
+  const dotStyle = useResolveClassNames(carouselPaginationDotVariants({
+    active: false
+  }));
+  const activeDotStyle = useResolveClassNames(carouselPaginationDotVariants({
+    active: true
+  }));
+  return /*#__PURE__*/_jsx(RNCarouselPagination.Custom, {
+    ...rest,
+    progress: progress,
+    onPress: handlePress,
+    containerStyle: containerStyle,
+    dotStyle: {
+      width: 6,
+      height: 6,
+      ...dotStyle
+    },
+    activeDotStyle: {
+      width: 18,
+      height: 6,
+      ...activeDotStyle
+    }
+  });
+}
+CarouselPaginationComponent.displayName = 'Carousel.Pagination';
+const CarouselPagination = CarouselPaginationComponent;
+export const Carousel = Object.assign(CarouselRoot, {
+  Pagination: CarouselPagination,
+  PrevButton: CarouselPrevButton,
+  NextButton: CarouselNextButton
+});
+
+// =============================================================================
+// HOOK
+// =============================================================================
+
+export function useCarousel(options) {
+  const ref = useRef(null);
+  const progress = useSharedValue(options?.defaultIndex ?? 0);
+  return {
+    ref,
+    /** Bind to `Carousel`'s `onProgressChange` and sibling `Carousel.Pagination`'s `progress`. */
+    progress,
+    next: opts => ref.current?.next(opts),
+    prev: opts => ref.current?.prev(opts),
+    scrollTo: opts => ref.current?.scrollTo(opts)
+  };
+}
+//# sourceMappingURL=index.js.map

package/lib/module/components/Carousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useRef","useSharedValue","RNCarousel","Pagination","RNCarouselPagination","useResolveClassNames","cn","mergeRefs","CarouselProgressProvider","useCarouselProgressContext","CarouselNextButton","CarouselPrevButton","resolveCarouselPaginationScrollAction","carouselPaginationContainerClassName","carouselPaginationDotVariants","jsx","_jsx","jsxs","_jsxs","isSharedValueProgress","value","CarouselInner","className","style","onProgressChange","children","loop","defaultIndex","rest","ref","internalRef","internalProgress","resolvedClassNameStyle","vertical","itemCount","data","length","handleProgressChange","offsetProgress","absoluteProgress","consumerProgress","undefined","contextValue","progress","carouselRef","CarouselRoot","CarouselPaginationComponent","progressProp","carouselRefProp","loopProp","onPress","context","Error","handlePress","index","carousel","current","scrollAction","getCurrentIndex","scrollTo","containerStyle","dotStyle","active","activeDotStyle","Custom","width","height","displayName","CarouselPagination","Carousel","Object","assign","PrevButton","NextButton","useCarousel","options","next","opts","prev"],"sourceRoot":"../../../../src","sources":["components/Carousel/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Carousel/navButton.js

@@ -0,0 +1,114 @@
+"use strict";
+
+import { useCallback } from 'react';
+import { ChevronLeft, ChevronRight, KeyboardArrowDown, KeyboardArrowUp } from '@cdx-ui/icons';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { IconButton } from '../IconButton';
+import { useCarouselProgressContext } from './context';
+import { carouselNavButtonIconVariants, carouselNavButtonRootVariants } from './styles';
+import { useCarouselActiveIndex } from './useCarouselActiveIndex';
+import { jsx as _jsx } from "react/jsx-runtime";
+function resolveDefaultIcon(vertical, direction) {
+  if (vertical) {
+    return direction === 'prev' ? KeyboardArrowUp : KeyboardArrowDown;
+  }
+  return direction === 'prev' ? ChevronLeft : ChevronRight;
+}
+function resolveDefaultAccessibilityLabel(vertical, direction) {
+  if (vertical) {
+    return direction === 'prev' ? 'Previous item' : 'Next item';
+  }
+  return direction === 'prev' ? 'Previous slide' : 'Next slide';
+}
+function CarouselNavButton({
+  direction,
+  progress: progressProp,
+  carouselRef: carouselRefProp,
+  itemCount: itemCountProp,
+  loop: loopProp,
+  vertical: verticalProp,
+  onPress,
+  disabled: disabledProp,
+  as,
+  accessibilityLabel,
+  color = 'neutral',
+  size = 'default',
+  className,
+  iconClassName,
+  ...iconButtonProps
+}) {
+  const context = useCarouselProgressContext();
+  const progress = progressProp ?? context?.progress;
+  const carouselRef = carouselRefProp ?? context?.carouselRef;
+  const itemCount = itemCountProp ?? context?.itemCount;
+  const loop = loopProp ?? context?.loop ?? true;
+  const vertical = verticalProp ?? context?.vertical ?? false;
+  if (!progress) {
+    throw new Error(`Carousel.${direction === 'prev' ? 'PrevButton' : 'NextButton'} must be rendered inside <Carousel> or receive an explicit \`progress\` prop.`);
+  }
+  if (!onPress && !carouselRef) {
+    throw new Error(`Carousel.${direction === 'prev' ? 'PrevButton' : 'NextButton'} must be rendered inside <Carousel> or receive an explicit \`carouselRef\` prop (or a custom \`onPress\`).`);
+  }
+  if (itemCount == null) {
+    throw new Error(`Carousel.${direction === 'prev' ? 'PrevButton' : 'NextButton'} must be rendered inside <Carousel> or receive an explicit \`itemCount\` prop.`);
+  }
+  const activeIndex = useCarouselActiveIndex(progress);
+  const atStart = activeIndex <= 0;
+  const atEnd = activeIndex >= itemCount - 1;
+  const autoDisabled = !loop && (direction === 'prev' ? atStart : atEnd);
+  const disabled = disabledProp ?? autoDisabled;
+  const handlePress = useCallback(() => {
+    if (onPress) {
+      onPress();
+      return;
+    }
+    if (direction === 'prev') {
+      carouselRef?.current?.prev({
+        animated: true
+      });
+    } else {
+      carouselRef?.current?.next({
+        animated: true
+      });
+    }
+  }, [onPress, carouselRef, direction]);
+  const dataSlot = direction === 'prev' ? 'carousel-prev-button' : 'carousel-next-button';
+  return /*#__PURE__*/_jsx(IconButton, {
+    as: as ?? resolveDefaultIcon(vertical, direction),
+    variant: "ghost",
+    color: color,
+    size: size,
+    isDisabled: disabled,
+    onPress: handlePress,
+    accessibilityLabel: accessibilityLabel ?? resolveDefaultAccessibilityLabel(vertical, direction),
+    accessibilityState: {
+      disabled
+    },
+    className: cn(carouselNavButtonRootVariants({
+      disabled
+    }), className),
+    iconClassName: cn(carouselNavButtonIconVariants({
+      disabled
+    }), iconClassName),
+    ...iconButtonProps,
+    ...mergeDataAttributes(iconButtonProps, dataAttributes({
+      slot: dataSlot
+    }))
+  });
+}
+export function CarouselPrevButton(props) {
+  return /*#__PURE__*/_jsx(CarouselNavButton, {
+    direction: "prev",
+    ...props
+  });
+}
+CarouselPrevButton.displayName = 'Carousel.PrevButton';
+export function CarouselNextButton(props) {
+  return /*#__PURE__*/_jsx(CarouselNavButton, {
+    direction: "next",
+    ...props
+  });
+}
+CarouselNextButton.displayName = 'Carousel.NextButton';
+//# sourceMappingURL=navButton.js.map

package/lib/module/components/Carousel/navButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","ChevronLeft","ChevronRight","KeyboardArrowDown","KeyboardArrowUp","dataAttributes","mergeDataAttributes","cn","IconButton","useCarouselProgressContext","carouselNavButtonIconVariants","carouselNavButtonRootVariants","useCarouselActiveIndex","jsx","_jsx","resolveDefaultIcon","vertical","direction","resolveDefaultAccessibilityLabel","CarouselNavButton","progress","progressProp","carouselRef","carouselRefProp","itemCount","itemCountProp","loop","loopProp","verticalProp","onPress","disabled","disabledProp","as","accessibilityLabel","color","size","className","iconClassName","iconButtonProps","context","Error","activeIndex","atStart","atEnd","autoDisabled","handlePress","current","prev","animated","next","dataSlot","variant","isDisabled","accessibilityState","slot","CarouselPrevButton","props","displayName","CarouselNextButton"],"sourceRoot":"../../../../src","sources":["components/Carousel/navButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Carousel/paginationNavigation.js

@@ -0,0 +1,31 @@
+"use strict";
+
+/**
+ * Resolves the shortest `scrollTo` action for pagination dot presses.
+ *
+ * In loop mode the library's absolute `scrollTo({ index })` can animate through every
+ * slide when the current index is past the halfway point of the loop buffer (e.g. index 2 → 3
+ * with four items). Relative `count` navigation avoids that wrap-around path.
+ */
+export function resolveCarouselPaginationScrollAction(currentIndex, targetIndex, dataLength, loop) {
+  if (currentIndex === targetIndex) return null;
+  if (!loop) {
+    return {
+      index: targetIndex,
+      animated: true
+    };
+  }
+  const forwardDelta = (targetIndex - currentIndex + dataLength) % dataLength;
+  const backwardDelta = (currentIndex - targetIndex + dataLength) % dataLength;
+  if (forwardDelta <= backwardDelta) {
+    return {
+      count: forwardDelta,
+      animated: true
+    };
+  }
+  return {
+    count: -backwardDelta,
+    animated: true
+  };
+}
+//# sourceMappingURL=paginationNavigation.js.map

package/lib/module/components/Carousel/paginationNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveCarouselPaginationScrollAction","currentIndex","targetIndex","dataLength","loop","index","animated","forwardDelta","backwardDelta","count"],"sourceRoot":"../../../../src","sources":["components/Carousel/paginationNavigation.ts"],"mappings":";;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,qCAAqCA,CACnDC,YAAoB,EACpBC,WAAmB,EACnBC,UAAkB,EAClBC,IAAa,EAC0B;EACvC,IAAIH,YAAY,KAAKC,WAAW,EAAE,OAAO,IAAI;EAE7C,IAAI,CAACE,IAAI,EAAE;IACT,OAAO;MAAEC,KAAK,EAAEH,WAAW;MAAEI,QAAQ,EAAE;IAAK,CAAC;EAC/C;EAEA,MAAMC,YAAY,GAAG,CAACL,WAAW,GAAGD,YAAY,GAAGE,UAAU,IAAIA,UAAU;EAC3E,MAAMK,aAAa,GAAG,CAACP,YAAY,GAAGC,WAAW,GAAGC,UAAU,IAAIA,UAAU;EAE5E,IAAII,YAAY,IAAIC,aAAa,EAAE;IACjC,OAAO;MAAEC,KAAK,EAAEF,YAAY;MAAED,QAAQ,EAAE;IAAK,CAAC;EAChD;EAEA,OAAO;IAAEG,KAAK,EAAE,CAACD,aAAa;IAAEF,QAAQ,EAAE;EAAK,CAAC;AAClD","ignoreList":[]}

package/lib/module/components/Carousel/styles.js

@@ -0,0 +1,41 @@
+"use strict";
+
+import { cva } from '@cdx-ui/utils';
+
+/** Small default gap between dots — the library ships no default spacing between pagination items. */
+export const carouselPaginationContainerClassName = 'gap-2 py-1';
+export const carouselPaginationDotVariants = cva('rounded-full', {
+  variants: {
+    active: {
+      true: 'bg-surface-neutral-strong',
+      false: 'bg-surface-neutral-subtle'
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
+});
+/** Overrides IconButton's default disabled opacity so tertiary icon color reads clearly at bounds. */
+export const carouselNavButtonRootVariants = cva([], {
+  variants: {
+    disabled: {
+      true: 'data-[disabled=true]:opacity-100',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+export const carouselNavButtonIconVariants = cva([], {
+  variants: {
+    disabled: {
+      true: 'text-content-tertiary',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/Carousel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","carouselPaginationContainerClassName","carouselPaginationDotVariants","variants","active","true","false","defaultVariants","carouselNavButtonRootVariants","disabled","carouselNavButtonIconVariants"],"sourceRoot":"../../../../src","sources":["components/Carousel/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,eAAe;;AAEtD;AACA,OAAO,MAAMC,oCAAoC,GAAG,YAAY;AAEhE,OAAO,MAAMC,6BAA6B,GAAGF,GAAG,CAAC,cAAc,EAAE;EAC/DG,QAAQ,EAAE;IACRC,MAAM,EAAE;MACNC,IAAI,EAAE,2BAA2B;MACjCC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAMI,6BAA6B,GAAGR,GAAG,CAAC,EAAE,EAAE;EACnDG,QAAQ,EAAE;IACRM,QAAQ,EAAE;MACRJ,IAAI,EAAE,kCAAkC;MACxCC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfE,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,OAAO,MAAMC,6BAA6B,GAAGV,GAAG,CAAC,EAAE,EAAE;EACnDG,QAAQ,EAAE;IACRM,QAAQ,EAAE;MACRJ,IAAI,EAAE,uBAAuB;MAC7BC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfE,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/Carousel/useCarouselActiveIndex.js

@@ -0,0 +1,48 @@
+"use strict";
+
+import { useEffect, useRef, useState } from 'react';
+import { useAnimatedReaction } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+let nextListenerId = 1;
+
+/**
+ * Syncs `Math.round(progress)` into React state for bounds-aware disabled state.
+ * Do not call `getCurrentIndex()` during render — the adopted library warns against it.
+ *
+ * Uses both:
+ * - `useAnimatedReaction` + `scheduleOnRN` (native / Babel-transformed web worklets)
+ * - SharedValue `addListener` (JS-thread fallback for web hosts that serve bob-built
+ *   `lib/` without the Reanimated Babel plugin — e.g. the docs Vite SPA)
+ */
+export function useCarouselActiveIndex(progress) {
+  const [activeIndex, setActiveIndex] = useState(() => Math.round(progress.get()));
+  const setActiveIndexRef = useRef(setActiveIndex);
+  setActiveIndexRef.current = setActiveIndex;
+  useAnimatedReaction(() => Math.round(progress.get()), (current, previous) => {
+    if (current !== previous) {
+      scheduleOnRN(setActiveIndexRef.current, current);
+    }
+  });
+  useEffect(() => {
+    const listenerId = nextListenerId++;
+    const onChange = value => {
+      const next = Math.round(value);
+      setActiveIndexRef.current(prev => prev === next ? prev : next);
+    };
+    try {
+      progress.addListener(listenerId, onChange);
+    } catch {
+      // Native JS runtime rejects addListener — the worklet path above handles it.
+      return;
+    }
+    return () => {
+      try {
+        progress.removeListener(listenerId);
+      } catch {
+        // ignore
+      }
+    };
+  }, [progress]);
+  return activeIndex;
+}
+//# sourceMappingURL=useCarouselActiveIndex.js.map

package/lib/module/components/Carousel/useCarouselActiveIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useState","useAnimatedReaction","scheduleOnRN","nextListenerId","useCarouselActiveIndex","progress","activeIndex","setActiveIndex","Math","round","get","setActiveIndexRef","current","previous","listenerId","onChange","value","next","prev","addListener","removeListener"],"sourceRoot":"../../../../src","sources":["components/Carousel/useCarouselActiveIndex.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACnD,SAASC,mBAAmB,QAA0B,yBAAyB;AAC/E,SAASC,YAAY,QAAQ,uBAAuB;AAEpD,IAAIC,cAAc,GAAG,CAAC;;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAACC,QAA6B,EAAU;EAC5E,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGP,QAAQ,CAAC,MAAMQ,IAAI,CAACC,KAAK,CAACJ,QAAQ,CAACK,GAAG,CAAC,CAAC,CAAC,CAAC;EAChF,MAAMC,iBAAiB,GAAGZ,MAAM,CAACQ,cAAc,CAAC;EAChDI,iBAAiB,CAACC,OAAO,GAAGL,cAAc;EAE1CN,mBAAmB,CACjB,MAAMO,IAAI,CAACC,KAAK,CAACJ,QAAQ,CAACK,GAAG,CAAC,CAAC,CAAC,EAChC,CAACE,OAAO,EAAEC,QAAQ,KAAK;IACrB,IAAID,OAAO,KAAKC,QAAQ,EAAE;MACxBX,YAAY,CAACS,iBAAiB,CAACC,OAAO,EAAEA,OAAO,CAAC;IAClD;EACF,CACF,CAAC;EAEDd,SAAS,CAAC,MAAM;IACd,MAAMgB,UAAU,GAAGX,cAAc,EAAE;IACnC,MAAMY,QAAQ,GAAIC,KAAa,IAAK;MAClC,MAAMC,IAAI,GAAGT,IAAI,CAACC,KAAK,CAACO,KAAK,CAAC;MAC9BL,iBAAiB,CAACC,OAAO,CAAEM,IAAI,IAAMA,IAAI,KAAKD,IAAI,GAAGC,IAAI,GAAGD,IAAK,CAAC;IACpE,CAAC;IAED,IAAI;MACFZ,QAAQ,CAACc,WAAW,CAACL,UAAU,EAAEC,QAAQ,CAAC;IAC5C,CAAC,CAAC,MAAM;MACN;MACA;IACF;IAEA,OAAO,MAAM;MACX,IAAI;QACFV,QAAQ,CAACe,cAAc,CAACN,UAAU,CAAC;MACrC,CAAC,CAAC,MAAM;QACN;MAAA;IAEJ,CAAC;EACH,CAAC,EAAE,CAACT,QAAQ,CAAC,CAAC;EAEd,OAAOC,WAAW;AACpB","ignoreList":[]}

package/lib/module/components/Checkbox/index.js

@@ -42,6 +42,21 @@ CheckboxRoot.displayName = 'Checkbox';
 // CHECKBOX INDICATOR (styled-only, reads context for data-* styling)
 // =============================================================================
 
+/** Compound check × invalid × active state for native Uniwind selectors (single data-field-state). */
+const INDICATOR_STATES = {
+  'unchecked:false:false': 'idle',
+  'unchecked:true:false': 'invalid',
+  'unchecked:false:true': 'active',
+  'unchecked:true:true': 'invalid-active',
+  'checked:false:false': 'checked',
+  'checked:true:false': 'checked-invalid',
+  'checked:false:true': 'checked-active',
+  'checked:true:true': 'checked-invalid-active',
+  'indeterminate:false:false': 'indeterminate',
+  'indeterminate:true:false': 'indeterminate-invalid',
+  'indeterminate:false:true': 'indeterminate-active',
+  'indeterminate:true:true': 'indeterminate-invalid-active'
+};
 const CheckboxIndicator = /*#__PURE__*/forwardRef(({
   asChild,
   className,
@@ -60,6 +75,8 @@ const CheckboxIndicator = /*#__PURE__*/forwardRef(({
     isIndeterminate,
     isFocusVisible
   } = useCheckboxContext();
+  const checkState = isIndeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
+  const fieldState = isReadOnly ? `readonly-${checkState}${isInvalid ? '-invalid' : ''}` : INDICATOR_STATES[`${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`];
   const computedClassName = cn(checkboxIndicatorVariants(), className);
   const Comp = asChild ? Slot : View;
   return /*#__PURE__*/_jsx(Comp, {
@@ -77,7 +94,8 @@ const CheckboxIndicator = /*#__PURE__*/forwardRef(({
       readonly: isReadOnly,
       active: isPressed,
       focused: isFocused,
-      indeterminate: isIndeterminate
+      indeterminate: isIndeterminate,
+      fieldState
     })),
     children: children
   });
@@ -93,13 +111,17 @@ const CheckboxIcon = ({
   style,
   ...props
 }) => {
+  const {
+    isReadOnly
+  } = useCheckboxContext();
   const computedClassName = cn(checkboxIconVariants(), className);
   return /*#__PURE__*/_jsx(Icon, {
     className: computedClassName,
     style: style,
     ...props,
     ...mergeDataAttributes(props, dataAttributes({
-      slot: 'checkbox-icon'
+      slot: 'checkbox-icon',
+      readonly: isReadOnly
     }))
   });
 };
@@ -132,7 +154,8 @@ const CheckboxLabel = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const {
-    isDisabled
+    isDisabled,
+    isReadOnly
   } = useCheckboxContext();
   const computedClassName = cn(checkboxLabelVariants(), className);
   const Comp = asChild ? Slot : Text;
@@ -143,7 +166,8 @@ const CheckboxLabel = /*#__PURE__*/forwardRef(({
     ...props,
     ...mergeDataAttributes(props, dataAttributes({
       slot: 'checkbox-label',
-      disabled: isDisabled
+      disabled: isDisabled,
+      readonly: isReadOnly
     })),
     children: children
   });
@@ -178,6 +202,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef(({
     isDisabled: isDisabled,
     isInvalid: isInvalid,
     isReadOnly: isReadOnly,
+    ...viewProps,
     ...mergeDataAttributes(viewProps, dataAttributes({
       slot: 'checkbox-group'
     })),

package/lib/module/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","Text","View","Check","CheckIndeterminateSmall","CheckboxRoot","CheckboxRootPrimitive","CheckboxGroup","CheckboxGroupPrimitive","Slot","dataAttributes","mergeDataAttributes","useCheckboxContext","cn","Icon","checkboxGroupVariants","checkboxIconVariants","checkboxIndicatorVariants","checkboxLabelVariants","checkboxRootVariants","jsx","_jsx","jsxs","_jsxs","className","isIndeterminate","children","style","props","ref","computedClassName","slot","CheckboxIndicator","CheckboxIconSlot","displayName","asChild","isChecked","isDisabled","isHovered","isInvalid","isReadOnly","isPressed","isFocused","isFocusVisible","Comp","hover","checked","disabled","focusVisible","invalid","readonly","active","focused","indeterminate","CheckboxIcon","isIndeterminateProp","showIcon","as","CheckboxLabel","direction","value","onChange","viewProps","Checkbox","Object","assign","Indicator","Label","Group"],"sourceRoot":"../../../../src","sources":["components/Checkbox/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","Text","View","Check","CheckIndeterminateSmall","CheckboxRoot","CheckboxRootPrimitive","CheckboxGroup","CheckboxGroupPrimitive","Slot","dataAttributes","mergeDataAttributes","useCheckboxContext","cn","Icon","checkboxGroupVariants","checkboxIconVariants","checkboxIndicatorVariants","checkboxLabelVariants","checkboxRootVariants","jsx","_jsx","jsxs","_jsxs","className","isIndeterminate","children","style","props","ref","computedClassName","slot","CheckboxIndicator","CheckboxIconSlot","displayName","INDICATOR_STATES","asChild","isChecked","isDisabled","isHovered","isInvalid","isReadOnly","isPressed","isFocused","isFocusVisible","checkState","fieldState","Comp","hover","checked","disabled","focusVisible","invalid","readonly","active","focused","indeterminate","CheckboxIcon","isIndeterminateProp","showIcon","as","CheckboxLabel","direction","value","onChange","viewProps","Checkbox","Object","assign","Indicator","Label","Group"],"sourceRoot":"../../../../src","sources":["components/Checkbox/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAClD,SAASC,IAAI,EAAEC,IAAI,QAAwC,cAAc;AACzE,SAASC,KAAK,EAAEC,uBAAuB,QAAQ,eAAe;AAC9D,SACEC,YAAY,IAAIC,qBAAqB,EACrCC,aAAa,IAAIC,sBAAsB,EACvCC,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,kBAAkB,QAEb,oBAAoB;AAC3B,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,IAAI,QAAmB,SAAS;AACzC,SACEC,qBAAqB,EACrBC,oBAAoB,EACpBC,yBAAyB,EACzBC,qBAAqB,EACrBC,oBAAoB,QACf,UAAU;;AAEjB;AACA;AACA;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOA,MAAMlB,YAAY,gBAAGL,UAAU,CAC7B,CAAC;EAAEwB,SAAS;EAAEC,eAAe;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAClE,MAAMC,iBAAiB,GAAGjB,EAAE,CAACM,oBAAoB,CAAC,CAAC,EAAEK,SAAS,CAAC;EAE/D,oBACED,KAAA,CAACjB,qBAAqB;IACpBuB,GAAG,EAAEA,GAAW;IAChBL,SAAS,EAAEM,iBAAkB;IAC7BL,eAAe,EAAEA,eAAgB;IACjCE,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACLjB,mBAAmB,CAACiB,KAAK,EAAElB,cAAc,CAAC;MAAEqB,IAAI,EAAE;IAAW,CAAC,CAAC,CAAC;IAAAL,QAAA,gBAEpEL,IAAA,CAACW,iBAAiB;MAAAN,QAAA,eAChBL,IAAA,CAACY,gBAAgB;QAACR,eAAe,EAAEA;MAAgB,CAAE;IAAC,CACrC,CAAC,EACnBC,QAAQ;EAAA,CACY,CAAC;AAE5B,CACF,CAAC;AAEDrB,YAAY,CAAC6B,WAAW,GAAG,UAAU;;AAErC;AACA;AACA;;AAEA;AACA,MAAMC,gBAAgB,GAAG;EACvB,uBAAuB,EAAE,MAAM;EAC/B,sBAAsB,EAAE,SAAS;EACjC,sBAAsB,EAAE,QAAQ;EAChC,qBAAqB,EAAE,gBAAgB;EACvC,qBAAqB,EAAE,SAAS;EAChC,oBAAoB,EAAE,iBAAiB;EACvC,oBAAoB,EAAE,gBAAgB;EACtC,mBAAmB,EAAE,wBAAwB;EAC7C,2BAA2B,EAAE,eAAe;EAC5C,0BAA0B,EAAE,uBAAuB;EACnD,0BAA0B,EAAE,sBAAsB;EAClD,yBAAyB,EAAE;AAC7B,CAAU;AAQV,MAAMH,iBAAiB,gBAAGhC,UAAU,CAClC,CAAC;EAAEoC,OAAO;EAAEZ,SAAS;EAAEE,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC1D,MAAM;IACJQ,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,SAAS;IACTlB,eAAe;IACfmB;EACF,CAAC,GAAGhC,kBAAkB,CAAC,CAAC;EAExB,MAAMiC,UAAU,GAAGpB,eAAe,GAAG,eAAe,GAAGY,SAAS,GAAG,SAAS,GAAG,WAAW;EAC1F,MAAMS,UAAU,GAAGL,UAAU,GACxB,YAAYI,UAAU,GAAGL,SAAS,GAAG,UAAU,GAAG,EAAE,EAAE,GACvDL,gBAAgB,CACd,GAAGU,UAAU,IAAIL,SAAS,GAAG,MAAM,GAAG,OAAO,IAAIE,SAAS,GAAG,MAAM,GAAG,OAAO,EAAE,CAChF;EAEL,MAAMZ,iBAAiB,GAAGjB,EAAE,CAACI,yBAAyB,CAAC,CAAC,EAAEO,SAAS,CAAC;EACpE,MAAMuB,IAAI,GAAGX,OAAO,GAAG3B,IAAI,GAAGP,IAAI;EAElC,oBACEmB,IAAA,CAAC0B,IAAI;IACHlB,GAAG,EAAEA,GAAI;IACTL,SAAS,EAAEM,iBAAkB;IAC7BH,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACLjB,mBAAmB,CACrBiB,KAAK,EACLlB,cAAc,CAAC;MACbqB,IAAI,EAAE,oBAAoB;MAC1BiB,KAAK,EAAET,SAAS;MAChBU,OAAO,EAAEZ,SAAS;MAClBa,QAAQ,EAAEZ,UAAU;MACpBa,YAAY,EAAEP,cAAc;MAC5BQ,OAAO,EAAEZ,SAAS;MAClBa,QAAQ,EAAEZ,UAAU;MACpBa,MAAM,EAAEZ,SAAS;MACjBa,OAAO,EAAEZ,SAAS;MAClBa,aAAa,EAAE/B,eAAe;MAC9BqB;IACF,CAAC,CACH,CAAC;IAAApB,QAAA,EAEAA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDM,iBAAiB,CAACE,WAAW,GAAG,oBAAoB;;AAEpD;AACA;AACA;;AAIA,MAAMuB,YAAY,GAAGA,CAAC;EAAEjC,SAAS;EAAEG,KAAK;EAAE,GAAGC;AAAyB,CAAC,KAAK;EAC1E,MAAM;IAAEa;EAAW,CAAC,GAAG7B,kBAAkB,CAAC,CAAC;EAC3C,MAAMkB,iBAAiB,GAAGjB,EAAE,CAACG,oBAAoB,CAAC,CAAC,EAAEQ,SAAS,CAAC;EAE/D,oBACEH,IAAA,CAACP,IAAI;IACHU,SAAS,EAAEM,iBAAkB;IAC7BH,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACLjB,mBAAmB,CACrBiB,KAAK,EACLlB,cAAc,CAAC;MACbqB,IAAI,EAAE,eAAe;MACrBsB,QAAQ,EAAEZ;IACZ,CAAC,CACH;EAAC,CACF,CAAC;AAEN,CAAC;AAEDgB,YAAY,CAACvB,WAAW,GAAG,eAAe;;AAE1C;AACA,MAAMD,gBAAgB,GAAGA,CAAC;EACxBR,eAAe,EAAEiC;AAGnB,CAAC,KAAK;EACJ,MAAM;IAAErB,SAAS;IAAEZ;EAAgB,CAAC,GAAGb,kBAAkB,CAAC,CAAC;EAC3D,MAAM+C,QAAQ,GAAGtB,SAAS,IAAIqB,mBAAmB,IAAIjC,eAAe;EAEpE,IAAI,CAACkC,QAAQ,EAAE,OAAO,IAAI;EAE1B,oBACEtC,IAAA,CAACoC,YAAY;IAACG,EAAE,EAAEnC,eAAe,IAAIiC,mBAAmB,GAAGtD,uBAAuB,GAAGD;EAAM,CAAE,CAAC;AAElG,CAAC;;AAED;AACA;AACA;;AAQA,MAAM0D,aAAa,gBAAG7D,UAAU,CAC9B,CAAC;EAAEoC,OAAO;EAAEZ,SAAS;EAAEE,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC1D,MAAM;IAAES,UAAU;IAAEG;EAAW,CAAC,GAAG7B,kBAAkB,CAAC,CAAC;EACvD,MAAMkB,iBAAiB,GAAGjB,EAAE,CAACK,qBAAqB,CAAC,CAAC,EAAEM,SAAS,CAAC;EAChE,MAAMuB,IAAI,GAAGX,OAAO,GAAG3B,IAAI,GAAGR,IAAI;EAElC,oBACEoB,IAAA,CAAC0B,IAAI;IACHlB,GAAG,EAAEA,GAAI;IACTL,SAAS,EAAEM,iBAAkB;IAC7BH,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACLjB,mBAAmB,CACrBiB,KAAK,EACLlB,cAAc,CAAC;MACbqB,IAAI,EAAE,gBAAgB;MACtBmB,QAAQ,EAAEZ,UAAU;MACpBe,QAAQ,EAAEZ;IACZ,CAAC,CACH,CAAC;IAAAf,QAAA,EAEAA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDmC,aAAa,CAAC3B,WAAW,GAAG,gBAAgB;;AAE5C;AACA;AACA;;AAeA,MAAM3B,aAAa,gBAAGP,UAAU,CAC9B,CACE;EACEwB,SAAS;EACTE,QAAQ;EACRC,KAAK;EACLmC,SAAS,GAAG,QAAQ;EACpBC,KAAK;EACLC,QAAQ;EACR1B,UAAU;EACVE,SAAS;EACTC,UAAU;EACV,GAAGwB;AACL,CAAC,EACDpC,GAAG,KACA;EACH,MAAMC,iBAAiB,GAAGjB,EAAE,CAACE,qBAAqB,CAAC;IAAE+C;EAAU,CAAC,CAAC,EAAEtC,SAAS,CAAC;EAE7E,oBACEH,IAAA,CAACb,sBAAsB;IACrBqB,GAAG,EAAEA,GAAI;IACTL,SAAS,EAAEM,iBAAkB;IAC7BH,KAAK,EAAEA,KAAM;IACboC,KAAK,EAAEA,KAAK,IAAI,EAAG;IACnBC,QAAQ,EAAEA,QAAS;IACnB1B,UAAU,EAAEA,UAAW;IACvBE,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IAAA,GACnBwB,SAAS;IAAA,GACTtD,mBAAmB,CAACsD,SAAS,EAAEvD,cAAc,CAAC;MAAEqB,IAAI,EAAE;IAAiB,CAAC,CAAC,CAAC;IAAAL,QAAA,EAE7EA;EAAQ,CACa,CAAC;AAE7B,CACF,CAAC;AAEDnB,aAAa,CAAC2B,WAAW,GAAG,gBAAgB;;AAE5C;AACA;AACA;;AASA,OAAO,MAAMgC,QAAQ,GAAGC,MAAM,CAACC,MAAM,CAAC/D,YAAY,EAAE;EAClDgE,SAAS,EAAErC,iBAAiB;EAC5BlB,IAAI,EAAE2C,YAAY;EAClBa,KAAK,EAAET,aAAa;EACpBU,KAAK,EAAEhE;AACT,CAAC,CAA8B","ignoreList":[]}

package/lib/module/components/Checkbox/styles.js

@@ -1,12 +1,12 @@
 "use strict";
 
 import { Platform } from 'react-native';
-import { cva } from 'class-variance-authority';
-import { DISABLED_CURSOR, DISABLED_OPACITY, TRANSITION_COLORS } from '../../styles/primitives';
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, DISABLED_OPACITY, TRANSITION_COLORS } from '../../styles/constants';
 
 // TODO: Handle text wrapping in the label
 
-export const checkboxRootVariants = cva(['flex-row items-center gap-2.5', DISABLED_OPACITY, DISABLED_CURSOR,
+export const checkboxRootVariants = cva(['flex-row items-center gap-2.5', DISABLED_OPACITY, DISABLED_CURSOR, 'data-[readonly=true]:cursor-default',
 // Suppress stray outline on the Pressable/label wrapper; focus ring is drawn on Checkbox.Indicator (Radio pattern).
 'web:outline-none web:focus:outline-none web:focus-visible:outline-none']);
 export const checkboxIndicatorVariants = cva(['items-center justify-center', 'h-5 w-5', 'rounded', 'border-2 border-solid', 'data-[disabled=true]:opacity-50',
@@ -19,6 +19,8 @@ export const checkboxIndicatorVariants = cva(['items-center justify-center', 'h-
 // Border — invalid (later) beats checked/indeterminate.
 'data-[checked=false]:border-content-secondary', 'data-[checked=true]:border-stroke-action', 'data-[indeterminate=true]:border-stroke-action', 'data-[invalid=true]:border-stroke-danger', Platform.select({
   web: [
+  // Read-only — compound selectors evaluate correctly on web.
+  'data-[readonly=true]:bg-surface-secondary', 'data-[readonly=true]:data-[checked=true]:border-stroke-action', 'data-[readonly=true]:data-[indeterminate=true]:border-stroke-action', 'data-[readonly=true]:data-[checked=true]:bg-surface-secondary', 'data-[readonly=true]:data-[indeterminate=true]:bg-surface-secondary',
   // Invalid bg — compound selectors evaluate correctly on web.
   'data-[invalid=true]:data-[checked=true]:bg-surface-danger-strong', 'data-[invalid=true]:data-[indeterminate=true]:bg-surface-danger-strong', TRANSITION_COLORS,
   // Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
@@ -26,25 +28,29 @@ export const checkboxIndicatorVariants = cva(['items-center justify-center', 'h-
   // Hover — unchecked + invalid (overlay uses danger token)
   'data-[hover=true]:data-[invalid=true]:data-[checked=false]:data-[indeterminate=false]:bg-surface-danger-strong/[0.08]',
   // Hover — checked / indeterminate (bg + border darken together)
-  'data-[hover=true]:data-[checked=true]:bg-surface-action-strong-hover', 'data-[hover=true]:data-[checked=true]:border-[--color-surface-action-strong-hover]', 'data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-hover', 'data-[hover=true]:data-[indeterminate=true]:border-[--color-surface-action-strong-hover]', 'data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-hover', 'data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-[--color-surface-danger-strong-hover]', 'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-hover', 'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-[--color-surface-danger-strong-hover]',
+  'data-[hover=true]:data-[checked=true]:bg-surface-action-strong-hover', 'data-[hover=true]:data-[checked=true]:border-surface-action-strong-hover', 'data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-hover', 'data-[hover=true]:data-[indeterminate=true]:border-surface-action-strong-hover', 'data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-hover', 'data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-hover', 'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-hover', 'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-surface-danger-strong-hover',
   // Active — CSS :active pseudo-class (web root does not track press via data-active).
   // data-[hover=true] guard ensures active beats hover by specificity (0,3,0 > 0,2,0).
-  'web:active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:border-[--color-surface-action-strong-active]', 'web:active:data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-active', 'web:active:data-[hover=true]:data-[indeterminate=true]:border-[--color-surface-action-strong-active]', 'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-[--color-surface-danger-strong-active]', 'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-[--color-surface-danger-strong-active]',
-  // Focus ring
+  // Unchecked — border only (Radio pattern)
+  'web:active:data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:border-stroke-hover', 'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:data-[indeterminate=false]:border-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active', 'web:active:data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-active', 'web:active:data-[hover=true]:data-[indeterminate=true]:border-surface-action-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-surface-danger-strong-active',
+  // Focus ring — applies to read-only as well (focusable + aria-readonly).
   'web:data-[focus-visible=true]:outline-none', 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2'].join(' '),
   default: [
-  // Invalid bg is NOT styled on native. Compound data-[] selectors cannot express
-  // "invalid AND checked" without false-matching other states (Uniwind only evaluates
-  // the last condition). Invalid state is communicated via border-stroke-danger (single
-  // condition, always correct). The fill stays action-strong for checked/indeterminate.
-  //
-  // Active — native tracks press via data-[active] from usePress.
-  // Place data-[active=true] last so the rule only fires during press.
-  // 'data-[checked=false]:data-[invalid=true]:bg-transparent',
-  'data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong', 'data-[checked=true]:data-[active=true]:bg-surface-action-strong-active', 'data-[checked=true]:data-[active=true]:data-[invalid=true]:bg-surface-danger-strong-active', 'data-[indeterminate=true]:data-[active=true]:bg-surface-action-strong-active'].join(' ')
+  // Native: Uniwind only evaluates the last data-[] condition in a compound chain.
+  // Use single-condition data-[field-state=...] selectors (emitted by CheckboxIndicator).
+  // Read-only — derived field-state encodes check × readonly (no active/hover on readonly).
+  'data-[field-state=readonly-unchecked]:bg-surface-secondary', 'data-[field-state=readonly-checked]:bg-surface-secondary', 'data-[field-state=readonly-checked]:border-stroke-action', 'data-[field-state=readonly-indeterminate]:bg-surface-secondary', 'data-[field-state=readonly-indeterminate]:border-stroke-action', 'data-[field-state=readonly-unchecked-invalid]:bg-surface-secondary', 'data-[field-state=readonly-checked-invalid]:bg-surface-secondary', 'data-[field-state=readonly-checked-invalid]:border-stroke-action', 'data-[field-state=readonly-indeterminate-invalid]:bg-surface-secondary', 'data-[field-state=readonly-indeterminate-invalid]:border-stroke-action',
+  // checked/indeterminate + invalid → danger bg
+  'data-[field-state=checked-invalid]:bg-surface-danger-strong', 'data-[field-state=indeterminate-invalid]:bg-surface-danger-strong',
+  // unchecked + active → border only (Radio pattern)
+  'data-[field-state=active]:border-stroke-hover', 'data-[field-state=invalid-active]:border-surface-danger-strong-active',
+  // checked/indeterminate + active → action active bg + matching border
+  'data-[field-state=checked-active]:bg-surface-action-strong-active', 'data-[field-state=checked-active]:border-surface-action-strong-active', 'data-[field-state=indeterminate-active]:bg-surface-action-strong-active', 'data-[field-state=indeterminate-active]:border-surface-action-strong-active',
+  // checked/indeterminate + invalid + active → danger active bg + matching border
+  'data-[field-state=checked-invalid-active]:bg-surface-danger-strong-active', 'data-[field-state=checked-invalid-active]:border-surface-danger-strong-active', 'data-[field-state=indeterminate-invalid-active]:bg-surface-danger-strong-active', 'data-[field-state=indeterminate-invalid-active]:border-surface-danger-strong-active'].join(' ')
 })]);
-export const checkboxIconVariants = cva(['text-white', 'h-5 w-5']);
-export const checkboxLabelVariants = cva(['text-content-primary text-base', 'data-[disabled=true]:text-content-tertiary']);
+export const checkboxIconVariants = cva(['text-white', 'data-[readonly=true]:text-content-action', 'h-5 w-5']);
+export const checkboxLabelVariants = cva(['text-content-primary text-base', 'data-[disabled=true]:text-content-tertiary', 'data-[readonly=true]:cursor-default']);
 export const checkboxGroupVariants = cva([], {
   variants: {
     direction: {