@cdx-ui/components 0.0.1-beta.143 → 0.0.1-beta.144

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/commonjs/components/Checkbox/index.js +10 -4
  2. package/lib/commonjs/components/Checkbox/index.js.map +1 -1
  3. package/lib/commonjs/components/Checkbox/styles.js +8 -4
  4. package/lib/commonjs/components/Checkbox/styles.js.map +1 -1
  5. package/lib/module/components/Checkbox/index.js +10 -4
  6. package/lib/module/components/Checkbox/index.js.map +1 -1
  7. package/lib/module/components/Checkbox/styles.js +8 -4
  8. package/lib/module/components/Checkbox/styles.js.map +1 -1
  9. package/lib/typescript/components/Checkbox/index.d.ts.map +1 -1
  10. package/lib/typescript/components/Checkbox/styles.d.ts.map +1 -1
  11. package/package.json +5 -5
  12. package/src/components/Checkbox/index.tsx +15 -6
  13. package/src/components/Checkbox/styles.ts +25 -2
package/lib/commonjs/components/Checkbox/index.js CHANGED
@@ -80,7 +80,7 @@ const CheckboxIndicator = /*#__PURE__*/(0, _react.forwardRef)(({
80
80
  isFocusVisible
81
81
  } = (0, _primitives.useCheckboxContext)();
82
82
  const checkState = isIndeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
83
- const fieldState = INDICATOR_STATES[`${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`];
83
+ const fieldState = isReadOnly ? `readonly-${checkState}${isInvalid ? '-invalid' : ''}` : INDICATOR_STATES[`${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`];
84
84
  const computedClassName = (0, _utils.cn)((0, _styles.checkboxIndicatorVariants)(), className);
85
85
  const Comp = asChild ? _primitives.Slot : _reactNative.View;
86
86
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
@@ -115,13 +115,17 @@ const CheckboxIcon = ({
115
115
  style,
116
116
  ...props
117
117
  }) => {
118
+ const {
119
+ isReadOnly
120
+ } = (0, _primitives.useCheckboxContext)();
118
121
  const computedClassName = (0, _utils.cn)((0, _styles.checkboxIconVariants)(), className);
119
122
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
120
123
  className: computedClassName,
121
124
  style: style,
122
125
  ...props,
123
126
  ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
124
- slot: 'checkbox-icon'
127
+ slot: 'checkbox-icon',
128
+ readonly: isReadOnly
125
129
  }))
126
130
  });
127
131
  };
@@ -154,7 +158,8 @@ const CheckboxLabel = /*#__PURE__*/(0, _react.forwardRef)(({
154
158
  ...props
155
159
  }, ref) => {
156
160
  const {
157
- isDisabled
161
+ isDisabled,
162
+ isReadOnly
158
163
  } = (0, _primitives.useCheckboxContext)();
159
164
  const computedClassName = (0, _utils.cn)((0, _styles.checkboxLabelVariants)(), className);
160
165
  const Comp = asChild ? _primitives.Slot : _reactNative.Text;
@@ -165,7 +170,8 @@ const CheckboxLabel = /*#__PURE__*/(0, _react.forwardRef)(({
165
170
  ...props,
166
171
  ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
167
172
  slot: 'checkbox-label',
168
- disabled: isDisabled
173
+ disabled: isDisabled,
174
+ readonly: isReadOnly
169
175
  })),
170
176
  children: children
171
177
  });
package/lib/commonjs/components/Checkbox/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_react","require","_reactNative","_icons","_primitives","_utils","_Icon","_styles","_jsxRuntime","CheckboxRoot","forwardRef","className","isIndeterminate","children","style","props","ref","computedClassName","cn","checkboxRootVariants","jsxs","mergeDataAttributes","dataAttributes","slot","jsx","CheckboxIndicator","CheckboxIconSlot","displayName","INDICATOR_STATES","asChild","isChecked","isDisabled","isHovered","isInvalid","isReadOnly","isPressed","isFocused","isFocusVisible","useCheckboxContext","checkState","fieldState","checkboxIndicatorVariants","Comp","Slot","View","hover","checked","disabled","focusVisible","invalid","readonly","active","focused","indeterminate","CheckboxIcon","checkboxIconVariants","Icon","isIndeterminateProp","showIcon","as","CheckIndeterminateSmall","Check","CheckboxLabel","checkboxLabelVariants","Text","CheckboxGroup","direction","value","onChange","viewProps","checkboxGroupVariants","Checkbox","exports","Object","assign","Indicator","Label","Group"],"sourceRoot":"../../../../src","sources":["components/Checkbox/index.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_react","require","_reactNative","_icons","_primitives","_utils","_Icon","_styles","_jsxRuntime","CheckboxRoot","forwardRef","className","isIndeterminate","children","style","props","ref","computedClassName","cn","checkboxRootVariants","jsxs","mergeDataAttributes","dataAttributes","slot","jsx","CheckboxIndicator","CheckboxIconSlot","displayName","INDICATOR_STATES","asChild","isChecked","isDisabled","isHovered","isInvalid","isReadOnly","isPressed","isFocused","isFocusVisible","useCheckboxContext","checkState","fieldState","checkboxIndicatorVariants","Comp","Slot","View","hover","checked","disabled","focusVisible","invalid","readonly","active","focused","indeterminate","CheckboxIcon","checkboxIconVariants","Icon","isIndeterminateProp","showIcon","as","CheckIndeterminateSmall","Check","CheckboxLabel","checkboxLabelVariants","Text","CheckboxGroup","direction","value","onChange","viewProps","checkboxGroupVariants","Checkbox","exports","Object","assign","Indicator","Label","Group"],"sourceRoot":"../../../../src","sources":["components/Checkbox/index.tsx"],"mappings":"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","ignoreList":[]}
package/lib/commonjs/components/Checkbox/styles.js CHANGED
@@ -9,7 +9,7 @@ var _utils = require("@cdx-ui/utils");
9
9
  var _constants = require("../../styles/constants");
10
10
  // TODO: Handle text wrapping in the label
11
11
 
12
- const checkboxRootVariants = exports.checkboxRootVariants = (0, _utils.cva)(['flex-row items-center gap-2.5', _constants.DISABLED_OPACITY, _constants.DISABLED_CURSOR,
12
+ const checkboxRootVariants = exports.checkboxRootVariants = (0, _utils.cva)(['flex-row items-center gap-2.5', _constants.DISABLED_OPACITY, _constants.DISABLED_CURSOR, 'data-[readonly=true]:cursor-default',
13
13
  // Suppress stray outline on the Pressable/label wrapper; focus ring is drawn on Checkbox.Indicator (Radio pattern).
14
14
  'web:outline-none web:focus:outline-none web:focus-visible:outline-none']);
15
15
  const checkboxIndicatorVariants = exports.checkboxIndicatorVariants = (0, _utils.cva)(['items-center justify-center', 'h-5 w-5', 'rounded', 'border-2 border-solid', 'data-[disabled=true]:opacity-50',
@@ -22,6 +22,8 @@ const checkboxIndicatorVariants = exports.checkboxIndicatorVariants = (0, _utils
22
22
  // Border — invalid (later) beats checked/indeterminate.
23
23
  'data-[checked=false]:border-content-secondary', 'data-[checked=true]:border-stroke-action', 'data-[indeterminate=true]:border-stroke-action', 'data-[invalid=true]:border-stroke-danger', _reactNative.Platform.select({
24
24
  web: [
25
+ // Read-only — compound selectors evaluate correctly on web.
26
+ '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',
25
27
  // Invalid bg — compound selectors evaluate correctly on web.
26
28
  'data-[invalid=true]:data-[checked=true]:bg-surface-danger-strong', 'data-[invalid=true]:data-[indeterminate=true]:bg-surface-danger-strong', _constants.TRANSITION_COLORS,
27
29
  // Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
@@ -34,11 +36,13 @@ const checkboxIndicatorVariants = exports.checkboxIndicatorVariants = (0, _utils
34
36
  // data-[hover=true] guard ensures active beats hover by specificity (0,3,0 > 0,2,0).
35
37
  // Unchecked — border only (Radio pattern)
36
38
  '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',
37
- // Focus ring
39
+ // Focus ring — applies to read-only as well (focusable + aria-readonly).
38
40
  '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(' '),
39
41
  default: [
40
42
  // Native: Uniwind only evaluates the last data-[] condition in a compound chain.
41
43
  // Use single-condition data-[field-state=...] selectors (emitted by CheckboxIndicator).
44
+ // Read-only — derived field-state encodes check × readonly (no active/hover on readonly).
45
+ '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',
42
46
  // checked/indeterminate + invalid → danger bg
43
47
  'data-[field-state=checked-invalid]:bg-surface-danger-strong', 'data-[field-state=indeterminate-invalid]:bg-surface-danger-strong',
44
48
  // unchecked + active → border only (Radio pattern)
@@ -48,8 +52,8 @@ const checkboxIndicatorVariants = exports.checkboxIndicatorVariants = (0, _utils
48
52
  // checked/indeterminate + invalid + active → danger active bg + matching border
49
53
  '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(' ')
50
54
  })]);
51
- const checkboxIconVariants = exports.checkboxIconVariants = (0, _utils.cva)(['text-white', 'h-5 w-5']);
52
- const checkboxLabelVariants = exports.checkboxLabelVariants = (0, _utils.cva)(['text-content-primary text-base', 'data-[disabled=true]:text-content-tertiary']);
55
+ const checkboxIconVariants = exports.checkboxIconVariants = (0, _utils.cva)(['text-white', 'data-[readonly=true]:text-content-action', 'h-5 w-5']);
56
+ const checkboxLabelVariants = exports.checkboxLabelVariants = (0, _utils.cva)(['text-content-primary text-base', 'data-[disabled=true]:text-content-tertiary', 'data-[readonly=true]:cursor-default']);
53
57
  const checkboxGroupVariants = exports.checkboxGroupVariants = (0, _utils.cva)([], {
54
58
  variants: {
55
59
  direction: {
package/lib/commonjs/components/Checkbox/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_reactNative","require","_utils","_constants","checkboxRootVariants","exports","cva","DISABLED_OPACITY","DISABLED_CURSOR","checkboxIndicatorVariants","Platform","select","web","TRANSITION_COLORS","join","default","checkboxIconVariants","checkboxLabelVariants","checkboxGroupVariants","variants","direction","column","row","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Checkbox/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAEA;;AAEO,MAAMG,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,UAAG,EAAC,CACtC,+BAA+B,EAC/BC,2BAAgB,EAChBC,0BAAe;AACf;AACA,wEAAwE,CACzE,CAAC;AAEK,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAG,IAAAH,UAAG,EAAC,CAC3C,6BAA6B,EAC7B,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,iCAAiC;AACjC;AACA;AACA;AACA;AACA;AACA,yCAAyC,EACzC,8CAA8C,EAC9C,oDAAoD;AACpD;AACA,+CAA+C,EAC/C,0CAA0C,EAC1C,gDAAgD,EAChD,0CAA0C,EAC1CI,qBAAQ,CAACC,MAAM,CAAC;EACdC,GAAG,EAAE;EACH;EACA,kEAAkE,EAClE,wEAAwE,EACxEC,4BAAiB;EACjB;EACA,+FAA+F;EAC/F;EACA,uHAAuH;EACvH;EACA,sEAAsE,EACtE,0EAA0E,EAC1E,4EAA4E,EAC5E,gFAAgF,EAChF,0FAA0F,EAC1F,8FAA8F,EAC9F,gGAAgG,EAChG,oGAAoG;EACpG;EACA;EACA;EACA,kGAAkG,EAClG,sIAAsI,EACtI,kFAAkF,EAClF,sFAAsF,EACtF,wFAAwF,EACxF,4FAA4F,EAC5F,sGAAsG,EACtG,0GAA0G,EAC1G,4GAA4G,EAC5G,gHAAgH;EAChH;EACA,4CAA4C,EAC5C,kIAAkI,CACnI,CAACC,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE;EACP;EACA;EACA;EACA,6DAA6D,EAC7D,mEAAmE;EACnE;EACA,+CAA+C,EAC/C,uEAAuE;EACvE;EACA,mEAAmE,EACnE,uEAAuE,EACvE,yEAAyE,EACzE,6EAA6E;EAC7E;EACA,2EAA2E,EAC3E,+EAA+E,EAC/E,iFAAiF,EACjF,qFAAqF,CACtF,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEK,MAAME,oBAAoB,GAAAX,OAAA,CAAAW,oBAAA,GAAG,IAAAV,UAAG,EAAC,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAE3D,MAAMW,qBAAqB,GAAAZ,OAAA,CAAAY,qBAAA,GAAG,IAAAX,UAAG,EAAC,CACvC,gCAAgC,EAChC,4CAA4C,CAC7C,CAAC;AAEK,MAAMY,qBAAqB,GAAAb,OAAA,CAAAa,qBAAA,GAAG,IAAAZ,UAAG,EAAC,EAAE,EAAE;EAC3Ca,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE,OAAO;MACfC,GAAG,EAAE;IACP;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["_reactNative","require","_utils","_constants","checkboxRootVariants","exports","cva","DISABLED_OPACITY","DISABLED_CURSOR","checkboxIndicatorVariants","Platform","select","web","TRANSITION_COLORS","join","default","checkboxIconVariants","checkboxLabelVariants","checkboxGroupVariants","variants","direction","column","row","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Checkbox/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAEA;;AAEO,MAAMG,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,UAAG,EAAC,CACtC,+BAA+B,EAC/BC,2BAAgB,EAChBC,0BAAe,EACf,qCAAqC;AACrC;AACA,wEAAwE,CACzE,CAAC;AAEK,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAG,IAAAH,UAAG,EAAC,CAC3C,6BAA6B,EAC7B,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,iCAAiC;AACjC;AACA;AACA;AACA;AACA;AACA,yCAAyC,EACzC,8CAA8C,EAC9C,oDAAoD;AACpD;AACA,+CAA+C,EAC/C,0CAA0C,EAC1C,gDAAgD,EAChD,0CAA0C,EAC1CI,qBAAQ,CAACC,MAAM,CAAC;EACdC,GAAG,EAAE;EACH;EACA,2CAA2C,EAC3C,+DAA+D,EAC/D,qEAAqE,EACrE,+DAA+D,EAC/D,qEAAqE;EACrE;EACA,kEAAkE,EAClE,wEAAwE,EACxEC,4BAAiB;EACjB;EACA,+FAA+F;EAC/F;EACA,uHAAuH;EACvH;EACA,sEAAsE,EACtE,0EAA0E,EAC1E,4EAA4E,EAC5E,gFAAgF,EAChF,0FAA0F,EAC1F,8FAA8F,EAC9F,gGAAgG,EAChG,oGAAoG;EACpG;EACA;EACA;EACA,kGAAkG,EAClG,sIAAsI,EACtI,kFAAkF,EAClF,sFAAsF,EACtF,wFAAwF,EACxF,4FAA4F,EAC5F,sGAAsG,EACtG,0GAA0G,EAC1G,4GAA4G,EAC5G,gHAAgH;EAChH;EACA,4CAA4C,EAC5C,kIAAkI,CACnI,CAACC,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE;EACP;EACA;EACA;EACA,4DAA4D,EAC5D,0DAA0D,EAC1D,0DAA0D,EAC1D,gEAAgE,EAChE,gEAAgE,EAChE,oEAAoE,EACpE,kEAAkE,EAClE,kEAAkE,EAClE,wEAAwE,EACxE,wEAAwE;EACxE;EACA,6DAA6D,EAC7D,mEAAmE;EACnE;EACA,+CAA+C,EAC/C,uEAAuE;EACvE;EACA,mEAAmE,EACnE,uEAAuE,EACvE,yEAAyE,EACzE,6EAA6E;EAC7E;EACA,2EAA2E,EAC3E,+EAA+E,EAC/E,iFAAiF,EACjF,qFAAqF,CACtF,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEK,MAAME,oBAAoB,GAAAX,OAAA,CAAAW,oBAAA,GAAG,IAAAV,UAAG,EAAC,CACtC,YAAY,EACZ,0CAA0C,EAC1C,SAAS,CACV,CAAC;AAEK,MAAMW,qBAAqB,GAAAZ,OAAA,CAAAY,qBAAA,GAAG,IAAAX,UAAG,EAAC,CACvC,gCAAgC,EAChC,4CAA4C,EAC5C,qCAAqC,CACtC,CAAC;AAEK,MAAMY,qBAAqB,GAAAb,OAAA,CAAAa,qBAAA,GAAG,IAAAZ,UAAG,EAAC,EAAE,EAAE;EAC3Ca,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE,OAAO;MACfC,GAAG,EAAE;IACP;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
package/lib/module/components/Checkbox/index.js CHANGED
@@ -76,7 +76,7 @@ const CheckboxIndicator = /*#__PURE__*/forwardRef(({
76
76
  isFocusVisible
77
77
  } = useCheckboxContext();
78
78
  const checkState = isIndeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
79
- const fieldState = INDICATOR_STATES[`${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`];
79
+ const fieldState = isReadOnly ? `readonly-${checkState}${isInvalid ? '-invalid' : ''}` : INDICATOR_STATES[`${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`];
80
80
  const computedClassName = cn(checkboxIndicatorVariants(), className);
81
81
  const Comp = asChild ? Slot : View;
82
82
  return /*#__PURE__*/_jsx(Comp, {
@@ -111,13 +111,17 @@ const CheckboxIcon = ({
111
111
  style,
112
112
  ...props
113
113
  }) => {
114
+ const {
115
+ isReadOnly
116
+ } = useCheckboxContext();
114
117
  const computedClassName = cn(checkboxIconVariants(), className);
115
118
  return /*#__PURE__*/_jsx(Icon, {
116
119
  className: computedClassName,
117
120
  style: style,
118
121
  ...props,
119
122
  ...mergeDataAttributes(props, dataAttributes({
120
- slot: 'checkbox-icon'
123
+ slot: 'checkbox-icon',
124
+ readonly: isReadOnly
121
125
  }))
122
126
  });
123
127
  };
@@ -150,7 +154,8 @@ const CheckboxLabel = /*#__PURE__*/forwardRef(({
150
154
  ...props
151
155
  }, ref) => {
152
156
  const {
153
- isDisabled
157
+ isDisabled,
158
+ isReadOnly
154
159
  } = useCheckboxContext();
155
160
  const computedClassName = cn(checkboxLabelVariants(), className);
156
161
  const Comp = asChild ? Slot : Text;
@@ -161,7 +166,8 @@ const CheckboxLabel = /*#__PURE__*/forwardRef(({
161
166
  ...props,
162
167
  ...mergeDataAttributes(props, dataAttributes({
163
168
  slot: 'checkbox-label',
164
- disabled: isDisabled
169
+ disabled: isDisabled,
170
+ readonly: isReadOnly
165
171
  })),
166
172
  children: children
167
173
  });
package/lib/module/components/Checkbox/index.js.map CHANGED
@@ -1 +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","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":"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","ignoreList":[]}
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","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;;AAaA,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,GACnB9B,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 CHANGED
@@ -6,7 +6,7 @@ import { DISABLED_CURSOR, DISABLED_OPACITY, TRANSITION_COLORS } from '../../styl
6
6
 
7
7
  // TODO: Handle text wrapping in the label
8
8
 
9
- export const checkboxRootVariants = cva(['flex-row items-center gap-2.5', DISABLED_OPACITY, DISABLED_CURSOR,
9
+ export const checkboxRootVariants = cva(['flex-row items-center gap-2.5', DISABLED_OPACITY, DISABLED_CURSOR, 'data-[readonly=true]:cursor-default',
10
10
  // Suppress stray outline on the Pressable/label wrapper; focus ring is drawn on Checkbox.Indicator (Radio pattern).
11
11
  'web:outline-none web:focus:outline-none web:focus-visible:outline-none']);
12
12
  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-
19
19
  // Border — invalid (later) beats checked/indeterminate.
20
20
  '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({
21
21
  web: [
22
+ // Read-only — compound selectors evaluate correctly on web.
23
+ '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',
22
24
  // Invalid bg — compound selectors evaluate correctly on web.
23
25
  'data-[invalid=true]:data-[checked=true]:bg-surface-danger-strong', 'data-[invalid=true]:data-[indeterminate=true]:bg-surface-danger-strong', TRANSITION_COLORS,
24
26
  // Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
@@ -31,11 +33,13 @@ export const checkboxIndicatorVariants = cva(['items-center justify-center', 'h-
31
33
  // data-[hover=true] guard ensures active beats hover by specificity (0,3,0 > 0,2,0).
32
34
  // Unchecked — border only (Radio pattern)
33
35
  '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',
34
- // Focus ring
36
+ // Focus ring — applies to read-only as well (focusable + aria-readonly).
35
37
  '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(' '),
36
38
  default: [
37
39
  // Native: Uniwind only evaluates the last data-[] condition in a compound chain.
38
40
  // Use single-condition data-[field-state=...] selectors (emitted by CheckboxIndicator).
41
+ // Read-only — derived field-state encodes check × readonly (no active/hover on readonly).
42
+ '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',
39
43
  // checked/indeterminate + invalid → danger bg
40
44
  'data-[field-state=checked-invalid]:bg-surface-danger-strong', 'data-[field-state=indeterminate-invalid]:bg-surface-danger-strong',
41
45
  // unchecked + active → border only (Radio pattern)
@@ -45,8 +49,8 @@ export const checkboxIndicatorVariants = cva(['items-center justify-center', 'h-
45
49
  // checked/indeterminate + invalid + active → danger active bg + matching border
46
50
  '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(' ')
47
51
  })]);
48
- export const checkboxIconVariants = cva(['text-white', 'h-5 w-5']);
49
- export const checkboxLabelVariants = cva(['text-content-primary text-base', 'data-[disabled=true]:text-content-tertiary']);
52
+ export const checkboxIconVariants = cva(['text-white', 'data-[readonly=true]:text-content-action', 'h-5 w-5']);
53
+ export const checkboxLabelVariants = cva(['text-content-primary text-base', 'data-[disabled=true]:text-content-tertiary', 'data-[readonly=true]:cursor-default']);
50
54
  export const checkboxGroupVariants = cva([], {
51
55
  variants: {
52
56
  direction: {
package/lib/module/components/Checkbox/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["Platform","cva","DISABLED_CURSOR","DISABLED_OPACITY","TRANSITION_COLORS","checkboxRootVariants","checkboxIndicatorVariants","select","web","join","default","checkboxIconVariants","checkboxLabelVariants","checkboxGroupVariants","variants","direction","column","row","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Checkbox/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,wBAAwB;;AAE7F;;AAEA,OAAO,MAAMC,oBAAoB,GAAGJ,GAAG,CAAC,CACtC,+BAA+B,EAC/BE,gBAAgB,EAChBD,eAAe;AACf;AACA,wEAAwE,CACzE,CAAC;AAEF,OAAO,MAAMI,yBAAyB,GAAGL,GAAG,CAAC,CAC3C,6BAA6B,EAC7B,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,iCAAiC;AACjC;AACA;AACA;AACA;AACA;AACA,yCAAyC,EACzC,8CAA8C,EAC9C,oDAAoD;AACpD;AACA,+CAA+C,EAC/C,0CAA0C,EAC1C,gDAAgD,EAChD,0CAA0C,EAC1CD,QAAQ,CAACO,MAAM,CAAC;EACdC,GAAG,EAAE;EACH;EACA,kEAAkE,EAClE,wEAAwE,EACxEJ,iBAAiB;EACjB;EACA,+FAA+F;EAC/F;EACA,uHAAuH;EACvH;EACA,sEAAsE,EACtE,0EAA0E,EAC1E,4EAA4E,EAC5E,gFAAgF,EAChF,0FAA0F,EAC1F,8FAA8F,EAC9F,gGAAgG,EAChG,oGAAoG;EACpG;EACA;EACA;EACA,kGAAkG,EAClG,sIAAsI,EACtI,kFAAkF,EAClF,sFAAsF,EACtF,wFAAwF,EACxF,4FAA4F,EAC5F,sGAAsG,EACtG,0GAA0G,EAC1G,4GAA4G,EAC5G,gHAAgH;EAChH;EACA,4CAA4C,EAC5C,kIAAkI,CACnI,CAACK,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE;EACP;EACA;EACA;EACA,6DAA6D,EAC7D,mEAAmE;EACnE;EACA,+CAA+C,EAC/C,uEAAuE;EACvE;EACA,mEAAmE,EACnE,uEAAuE,EACvE,yEAAyE,EACzE,6EAA6E;EAC7E;EACA,2EAA2E,EAC3E,+EAA+E,EAC/E,iFAAiF,EACjF,qFAAqF,CACtF,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEF,OAAO,MAAME,oBAAoB,GAAGV,GAAG,CAAC,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAElE,OAAO,MAAMW,qBAAqB,GAAGX,GAAG,CAAC,CACvC,gCAAgC,EAChC,4CAA4C,CAC7C,CAAC;AAEF,OAAO,MAAMY,qBAAqB,GAAGZ,GAAG,CAAC,EAAE,EAAE;EAC3Ca,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE,OAAO;MACfC,GAAG,EAAE;IACP;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["Platform","cva","DISABLED_CURSOR","DISABLED_OPACITY","TRANSITION_COLORS","checkboxRootVariants","checkboxIndicatorVariants","select","web","join","default","checkboxIconVariants","checkboxLabelVariants","checkboxGroupVariants","variants","direction","column","row","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Checkbox/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,wBAAwB;;AAE7F;;AAEA,OAAO,MAAMC,oBAAoB,GAAGJ,GAAG,CAAC,CACtC,+BAA+B,EAC/BE,gBAAgB,EAChBD,eAAe,EACf,qCAAqC;AACrC;AACA,wEAAwE,CACzE,CAAC;AAEF,OAAO,MAAMI,yBAAyB,GAAGL,GAAG,CAAC,CAC3C,6BAA6B,EAC7B,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,iCAAiC;AACjC;AACA;AACA;AACA;AACA;AACA,yCAAyC,EACzC,8CAA8C,EAC9C,oDAAoD;AACpD;AACA,+CAA+C,EAC/C,0CAA0C,EAC1C,gDAAgD,EAChD,0CAA0C,EAC1CD,QAAQ,CAACO,MAAM,CAAC;EACdC,GAAG,EAAE;EACH;EACA,2CAA2C,EAC3C,+DAA+D,EAC/D,qEAAqE,EACrE,+DAA+D,EAC/D,qEAAqE;EACrE;EACA,kEAAkE,EAClE,wEAAwE,EACxEJ,iBAAiB;EACjB;EACA,+FAA+F;EAC/F;EACA,uHAAuH;EACvH;EACA,sEAAsE,EACtE,0EAA0E,EAC1E,4EAA4E,EAC5E,gFAAgF,EAChF,0FAA0F,EAC1F,8FAA8F,EAC9F,gGAAgG,EAChG,oGAAoG;EACpG;EACA;EACA;EACA,kGAAkG,EAClG,sIAAsI,EACtI,kFAAkF,EAClF,sFAAsF,EACtF,wFAAwF,EACxF,4FAA4F,EAC5F,sGAAsG,EACtG,0GAA0G,EAC1G,4GAA4G,EAC5G,gHAAgH;EAChH;EACA,4CAA4C,EAC5C,kIAAkI,CACnI,CAACK,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE;EACP;EACA;EACA;EACA,4DAA4D,EAC5D,0DAA0D,EAC1D,0DAA0D,EAC1D,gEAAgE,EAChE,gEAAgE,EAChE,oEAAoE,EACpE,kEAAkE,EAClE,kEAAkE,EAClE,wEAAwE,EACxE,wEAAwE;EACxE;EACA,6DAA6D,EAC7D,mEAAmE;EACnE;EACA,+CAA+C,EAC/C,uEAAuE;EACvE;EACA,mEAAmE,EACnE,uEAAuE,EACvE,yEAAyE,EACzE,6EAA6E;EAC7E;EACA,2EAA2E,EAC3E,+EAA+E,EAC/E,iFAAiF,EACjF,qFAAqF,CACtF,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEF,OAAO,MAAME,oBAAoB,GAAGV,GAAG,CAAC,CACtC,YAAY,EACZ,0CAA0C,EAC1C,SAAS,CACV,CAAC;AAEF,OAAO,MAAMW,qBAAqB,GAAGX,GAAG,CAAC,CACvC,gCAAgC,EAChC,4CAA4C,EAC5C,qCAAqC,CACtC,CAAC;AAEF,OAAO,MAAMY,qBAAqB,GAAGZ,GAAG,CAAC,EAAE,EAAE;EAC3Ca,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE,OAAO;MACfC,GAAG,EAAE;IACP;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
package/lib/typescript/components/Checkbox/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAa1C,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,gGAoBjB,CAAC;AAwBF,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,yGAkDtB,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAEzE,QAAA,MAAM,YAAY;qCAAoC,iBAAiB;;CAWtE,CAAC;AAwBF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAwBlB,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,qGAkClB,CAAC;AAQF,KAAK,yBAAyB,GAAG,OAAO,YAAY,GAAG;IACrD,SAAS,EAAE,OAAO,iBAAiB,CAAC;IACpC,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,KAAK,EAAE,OAAO,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAKf,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAa1C,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,gGAoBjB,CAAC;AAwBF,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,yGAmDtB,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAEzE,QAAA,MAAM,YAAY;qCAAoC,iBAAiB;;CAkBtE,CAAC;AAwBF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAyBlB,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,qGAkClB,CAAC;AAQF,KAAK,yBAAyB,GAAG,OAAO,YAAY,GAAG;IACrD,SAAS,EAAE,OAAO,iBAAiB,CAAC;IACpC,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,KAAK,EAAE,OAAO,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAKf,yBAAyB,CAAC"}
package/lib/typescript/components/Checkbox/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,oFAM/B,CAAC;AAEH,eAAO,MAAM,yBAAyB,oFA4EpC,CAAC;AAEH,eAAO,MAAM,oBAAoB,oFAAiC,CAAC;AAEnE,eAAO,MAAM,qBAAqB,oFAGhC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,oFAO/B,CAAC;AAEH,eAAO,MAAM,yBAAyB,oFA6FpC,CAAC;AAEH,eAAO,MAAM,oBAAoB,oFAI/B,CAAC;AAEH,eAAO,MAAM,qBAAqB,oFAIhC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdx-ui/components",
3
- "version": "0.0.1-beta.143",
3
+ "version": "0.0.1-beta.144",
4
4
  "license": "MIT",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -81,10 +81,10 @@
81
81
  "@marceloterreiro/flash-calendar": "2.0.0",
82
82
  "react-native-reanimated-carousel": "5.0.0-beta.5",
83
83
  "uniwind": "1.10.0",
84
- "@cdx-ui/utils": "0.0.1-beta.143",
85
- "@cdx-ui/icons": "0.0.1-beta.143",
86
- "@cdx-ui/formatters": "0.0.1-beta.134",
87
- "@cdx-ui/primitives": "0.0.1-beta.143"
84
+ "@cdx-ui/formatters": "0.0.1-beta.135",
85
+ "@cdx-ui/primitives": "0.0.1-beta.144",
86
+ "@cdx-ui/icons": "0.0.1-beta.144",
87
+ "@cdx-ui/utils": "0.0.1-beta.144"
88
88
  },
89
89
  "devDependencies": {
90
90
  "@react-navigation/bottom-tabs": "*",
package/src/components/Checkbox/index.tsx CHANGED
@@ -94,10 +94,11 @@ const CheckboxIndicator = forwardRef<View, CheckboxIndicatorProps>(
94
94
  } = useCheckboxContext();
95
95
 
96
96
  const checkState = isIndeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
97
- const fieldState =
98
- INDICATOR_STATES[
99
- `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
100
- ];
97
+ const fieldState = isReadOnly
98
+ ? (`readonly-${checkState}${isInvalid ? '-invalid' : ''}` as const)
99
+ : INDICATOR_STATES[
100
+ `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
101
+ ];
101
102
 
102
103
  const computedClassName = cn(checkboxIndicatorVariants(), className);
103
104
  const Comp = asChild ? Slot : View;
@@ -140,6 +141,7 @@ CheckboxIndicator.displayName = 'Checkbox.Indicator';
140
141
  export interface CheckboxIconProps extends Omit<IconProps, 'children'> {}
141
142
 
142
143
  const CheckboxIcon = ({ className, style, ...props }: CheckboxIconProps) => {
144
+ const { isReadOnly } = useCheckboxContext();
143
145
  const computedClassName = cn(checkboxIconVariants(), className);
144
146
 
145
147
  return (
@@ -147,7 +149,13 @@ const CheckboxIcon = ({ className, style, ...props }: CheckboxIconProps) => {
147
149
  className={computedClassName}
148
150
  style={style}
149
151
  {...props}
150
- {...mergeDataAttributes(props, dataAttributes({ slot: 'checkbox-icon' }))}
152
+ {...mergeDataAttributes(
153
+ props,
154
+ dataAttributes({
155
+ slot: 'checkbox-icon',
156
+ readonly: isReadOnly,
157
+ }),
158
+ )}
151
159
  />
152
160
  );
153
161
  };
@@ -182,7 +190,7 @@ export interface CheckboxLabelProps extends TextProps {
182
190
 
183
191
  const CheckboxLabel = forwardRef<Text, CheckboxLabelProps>(
184
192
  ({ asChild, className, children, style, ...props }, ref) => {
185
- const { isDisabled } = useCheckboxContext();
193
+ const { isDisabled, isReadOnly } = useCheckboxContext();
186
194
  const computedClassName = cn(checkboxLabelVariants(), className);
187
195
  const Comp = asChild ? Slot : Text;
188
196
 
@@ -197,6 +205,7 @@ const CheckboxLabel = forwardRef<Text, CheckboxLabelProps>(
197
205
  dataAttributes({
198
206
  slot: 'checkbox-label',
199
207
  disabled: isDisabled,
208
+ readonly: isReadOnly,
200
209
  }),
201
210
  )}
202
211
  >
package/src/components/Checkbox/styles.ts CHANGED
@@ -8,6 +8,7 @@ export const checkboxRootVariants = cva([
8
8
  'flex-row items-center gap-2.5',
9
9
  DISABLED_OPACITY,
10
10
  DISABLED_CURSOR,
11
+ 'data-[readonly=true]:cursor-default',
11
12
  // Suppress stray outline on the Pressable/label wrapper; focus ring is drawn on Checkbox.Indicator (Radio pattern).
12
13
  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
13
14
  ]);
@@ -33,6 +34,12 @@ export const checkboxIndicatorVariants = cva([
33
34
  'data-[invalid=true]:border-stroke-danger',
34
35
  Platform.select({
35
36
  web: [
37
+ // Read-only — compound selectors evaluate correctly on web.
38
+ 'data-[readonly=true]:bg-surface-secondary',
39
+ 'data-[readonly=true]:data-[checked=true]:border-stroke-action',
40
+ 'data-[readonly=true]:data-[indeterminate=true]:border-stroke-action',
41
+ 'data-[readonly=true]:data-[checked=true]:bg-surface-secondary',
42
+ 'data-[readonly=true]:data-[indeterminate=true]:bg-surface-secondary',
36
43
  // Invalid bg — compound selectors evaluate correctly on web.
37
44
  'data-[invalid=true]:data-[checked=true]:bg-surface-danger-strong',
38
45
  'data-[invalid=true]:data-[indeterminate=true]:bg-surface-danger-strong',
@@ -63,13 +70,24 @@ export const checkboxIndicatorVariants = cva([
63
70
  'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
64
71
  'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-active',
65
72
  'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-surface-danger-strong-active',
66
- // Focus ring
73
+ // Focus ring — applies to read-only as well (focusable + aria-readonly).
67
74
  'web:data-[focus-visible=true]:outline-none',
68
75
  'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
69
76
  ].join(' '),
70
77
  default: [
71
78
  // Native: Uniwind only evaluates the last data-[] condition in a compound chain.
72
79
  // Use single-condition data-[field-state=...] selectors (emitted by CheckboxIndicator).
80
+ // Read-only — derived field-state encodes check × readonly (no active/hover on readonly).
81
+ 'data-[field-state=readonly-unchecked]:bg-surface-secondary',
82
+ 'data-[field-state=readonly-checked]:bg-surface-secondary',
83
+ 'data-[field-state=readonly-checked]:border-stroke-action',
84
+ 'data-[field-state=readonly-indeterminate]:bg-surface-secondary',
85
+ 'data-[field-state=readonly-indeterminate]:border-stroke-action',
86
+ 'data-[field-state=readonly-unchecked-invalid]:bg-surface-secondary',
87
+ 'data-[field-state=readonly-checked-invalid]:bg-surface-secondary',
88
+ 'data-[field-state=readonly-checked-invalid]:border-stroke-action',
89
+ 'data-[field-state=readonly-indeterminate-invalid]:bg-surface-secondary',
90
+ 'data-[field-state=readonly-indeterminate-invalid]:border-stroke-action',
73
91
  // checked/indeterminate + invalid → danger bg
74
92
  'data-[field-state=checked-invalid]:bg-surface-danger-strong',
75
93
  'data-[field-state=indeterminate-invalid]:bg-surface-danger-strong',
@@ -90,11 +108,16 @@ export const checkboxIndicatorVariants = cva([
90
108
  }),
91
109
  ]);
92
110
 
93
- export const checkboxIconVariants = cva(['text-white', 'h-5 w-5']);
111
+ export const checkboxIconVariants = cva([
112
+ 'text-white',
113
+ 'data-[readonly=true]:text-content-action',
114
+ 'h-5 w-5',
115
+ ]);
94
116
 
95
117
  export const checkboxLabelVariants = cva([
96
118
  'text-content-primary text-base',
97
119
  'data-[disabled=true]:text-content-tertiary',
120
+ 'data-[readonly=true]:cursor-default',
98
121
  ]);
99
122
 
100
123
  export const checkboxGroupVariants = cva([], {