@cdx-ui/components 0.1.0 → 0.1.2
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.
- package/README.md +8 -12
- package/lib/commonjs/components/Input/styles.js +12 -4
- package/lib/commonjs/components/Input/styles.js.map +1 -1
- package/lib/commonjs/components/InsuranceDisclosure/FdicLockup.js +31 -0
- package/lib/commonjs/components/InsuranceDisclosure/FdicLockup.js.map +1 -0
- package/lib/commonjs/components/InsuranceDisclosure/index.js +22 -4
- package/lib/commonjs/components/InsuranceDisclosure/index.js.map +1 -1
- package/lib/commonjs/components/InsuranceDisclosure/styles.js +13 -3
- package/lib/commonjs/components/InsuranceDisclosure/styles.js.map +1 -1
- package/lib/commonjs/components/Radio/index.js +14 -3
- package/lib/commonjs/components/Radio/index.js.map +1 -1
- package/lib/commonjs/components/Radio/styles.js +24 -8
- package/lib/commonjs/components/Radio/styles.js.map +1 -1
- package/lib/commonjs/components/Select/styles.js +11 -3
- package/lib/commonjs/components/Select/styles.js.map +1 -1
- package/lib/commonjs/components/Switch/styles.js +14 -14
- package/lib/commonjs/components/Switch/styles.js.map +1 -1
- package/lib/commonjs/components/Textarea/styles.js +4 -2
- package/lib/commonjs/components/Textarea/styles.js.map +1 -1
- package/lib/commonjs/figma/Field.Radio.figma.js +58 -0
- package/lib/commonjs/figma/Field.Radio.figma.js.map +1 -0
- package/lib/commonjs/figma/InsuranceDisclosure.figma.js +26 -0
- package/lib/commonjs/figma/InsuranceDisclosure.figma.js.map +1 -0
- package/lib/commonjs/figma/Radio.Group.figma.js +24 -0
- package/lib/commonjs/figma/Radio.Group.figma.js.map +1 -0
- package/lib/commonjs/figma/Radio.figma.js +12 -6
- package/lib/commonjs/figma/Radio.figma.js.map +1 -1
- package/lib/commonjs/styles/constants.js +5 -1
- package/lib/commonjs/styles/constants.js.map +1 -1
- package/lib/module/components/Input/styles.js +13 -5
- package/lib/module/components/Input/styles.js.map +1 -1
- package/lib/module/components/InsuranceDisclosure/FdicLockup.js +27 -0
- package/lib/module/components/InsuranceDisclosure/FdicLockup.js.map +1 -0
- package/lib/module/components/InsuranceDisclosure/index.js +22 -4
- package/lib/module/components/InsuranceDisclosure/index.js.map +1 -1
- package/lib/module/components/InsuranceDisclosure/styles.js +13 -3
- package/lib/module/components/InsuranceDisclosure/styles.js.map +1 -1
- package/lib/module/components/Radio/index.js +14 -3
- package/lib/module/components/Radio/index.js.map +1 -1
- package/lib/module/components/Radio/styles.js +25 -9
- package/lib/module/components/Radio/styles.js.map +1 -1
- package/lib/module/components/Select/styles.js +12 -4
- package/lib/module/components/Select/styles.js.map +1 -1
- package/lib/module/components/Switch/styles.js +14 -14
- package/lib/module/components/Switch/styles.js.map +1 -1
- package/lib/module/components/Textarea/styles.js +5 -3
- package/lib/module/components/Textarea/styles.js.map +1 -1
- package/lib/module/figma/Field.Radio.figma.js +52 -0
- package/lib/module/figma/Field.Radio.figma.js.map +1 -0
- package/lib/module/figma/InsuranceDisclosure.figma.js +20 -0
- package/lib/module/figma/InsuranceDisclosure.figma.js.map +1 -0
- package/lib/module/figma/Radio.Group.figma.js +18 -0
- package/lib/module/figma/Radio.Group.figma.js.map +1 -0
- package/lib/module/figma/Radio.figma.js +12 -6
- package/lib/module/figma/Radio.figma.js.map +1 -1
- package/lib/module/styles/constants.js +4 -0
- package/lib/module/styles/constants.js.map +1 -1
- package/lib/typescript/components/Input/styles.d.ts.map +1 -1
- package/lib/typescript/components/InsuranceDisclosure/FdicLockup.d.ts +2 -0
- package/lib/typescript/components/InsuranceDisclosure/FdicLockup.d.ts.map +1 -0
- package/lib/typescript/components/InsuranceDisclosure/index.d.ts +24 -3
- package/lib/typescript/components/InsuranceDisclosure/index.d.ts.map +1 -1
- package/lib/typescript/components/InsuranceDisclosure/styles.d.ts +5 -1
- package/lib/typescript/components/InsuranceDisclosure/styles.d.ts.map +1 -1
- package/lib/typescript/components/Radio/index.d.ts.map +1 -1
- package/lib/typescript/components/Radio/styles.d.ts.map +1 -1
- package/lib/typescript/components/Select/styles.d.ts.map +1 -1
- package/lib/typescript/components/Switch/styles.d.ts.map +1 -1
- package/lib/typescript/components/Textarea/styles.d.ts.map +1 -1
- package/lib/typescript/figma/Field.Radio.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.Radio.figma.d.ts.map +1 -0
- package/lib/typescript/figma/InsuranceDisclosure.figma.d.ts +8 -0
- package/lib/typescript/figma/InsuranceDisclosure.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Radio.Group.figma.d.ts +8 -0
- package/lib/typescript/figma/Radio.Group.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Radio.figma.d.ts.map +1 -1
- package/lib/typescript/styles/constants.d.ts +1 -0
- package/lib/typescript/styles/constants.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/components/Input/styles.ts +11 -3
- package/src/components/InsuranceDisclosure/FdicLockup.tsx +23 -0
- package/src/components/InsuranceDisclosure/index.tsx +54 -14
- package/src/components/InsuranceDisclosure/styles.ts +28 -9
- package/src/components/Radio/index.tsx +22 -6
- package/src/components/Radio/styles.ts +46 -6
- package/src/components/Select/styles.ts +11 -3
- package/src/components/Switch/styles.ts +23 -15
- package/src/components/Textarea/styles.ts +5 -3
- package/src/styles/constants.ts +4 -0
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
Styled, theme-aware UI components for the Forge Design System.
|
|
6
6
|
|
|
7
|
-
Built on top of [`@cdx-ui/primitives`](
|
|
7
|
+
Built on top of [`@cdx-ui/primitives`](https://www.npmjs.com/package/@cdx-ui/primitives), [`@cdx-ui/utils`](https://www.npmjs.com/package/@cdx-ui/utils), [`@cdx-ui/icons`](https://www.npmjs.com/package/@cdx-ui/icons), and [`@cdx-ui/formatters`](https://www.npmjs.com/package/@cdx-ui/formatters), styled via [Uniwind](https://uniwind.dev) + [CVA](https://cva.style). Design tokens from [`@cdx-ui/styles`](https://www.npmjs.com/package/@cdx-ui/styles) are consumed at the app level (not a direct package dependency).
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
@@ -40,11 +40,9 @@ export function Example() {
|
|
|
40
40
|
}
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
Component stories live in [`apps/storybook`](../../apps/storybook/). See the full [component reference](../../docs/README.md#components) for per-component docs.
|
|
44
|
-
|
|
45
43
|
### Components
|
|
46
44
|
|
|
47
|
-
|
|
45
|
+
The [component reference](https://design.candescent.com/docs/components) is the source of truth for the catalog — every component has a page there with live examples, props, and accessibility notes.
|
|
48
46
|
|
|
49
47
|
> `Box` is exported but deprecated — use React Native's `View` directly.
|
|
50
48
|
|
|
@@ -70,7 +68,7 @@ Wrap your app (or the Forge UI section of it) with the top-level provider so ove
|
|
|
70
68
|
|
|
71
69
|
### Metro configuration helper
|
|
72
70
|
|
|
73
|
-
The `withForgeMetroConfig` helper now ships from [`@cdx-ui/native
|
|
71
|
+
The `withForgeMetroConfig` helper now ships from [`@cdx-ui/native`](https://www.npmjs.com/package/@cdx-ui/native), not this package — it is native build tooling, and keeping it here forced a Metro dependency onto every consumer of the component library.
|
|
74
72
|
|
|
75
73
|
```js
|
|
76
74
|
const { withForgeMetroConfig } = require('@cdx-ui/native/metro');
|
|
@@ -97,13 +95,11 @@ For convenience, the package re-exports several core RN components and hooks wit
|
|
|
97
95
|
|
|
98
96
|
## Figma Code Connect
|
|
99
97
|
|
|
100
|
-
Template files
|
|
101
|
-
|
|
102
|
-
See the **[Code Connect authoring guide](../../docs/internal/practices/code-connect.md)** for conventions, property mapping patterns, and local workflow.
|
|
98
|
+
Template files under `src/figma/` map Figma component variants to production Forge UI snippets shown in Figma Dev Mode. These files are excluded from the npm tarball (`!src/figma` in `files`) and published to Figma via CI on pushes to `main`. Conventions, property-mapping patterns, and the local workflow are documented in the repository's Code Connect authoring guide.
|
|
103
99
|
|
|
104
100
|
## Testing
|
|
105
101
|
|
|
106
|
-
Tests live
|
|
102
|
+
Tests live under `__tests__/`. This package uses two of the repo-root **`jest.config.js`** projects: **`rntl`** (jest-expo native + **`@testing-library/react-native`**) for `*.test.tsx`, and **`axe`** (jest-expo web + jsdom + **`@testing-library/react`** + **`jest-axe`**) for `*.axe.test.tsx` — both targeting `packages/components/__tests__/`. The repository's testing guide documents the full multi-project model.
|
|
107
103
|
|
|
108
104
|
```bash
|
|
109
105
|
# From monorepo root
|
|
@@ -114,13 +110,13 @@ pnpm test:all
|
|
|
114
110
|
|
|
115
111
|
Production types use `tsconfig.json`; tests use `tsconfig.test.json`.
|
|
116
112
|
|
|
117
|
-
**Authoring:**
|
|
113
|
+
**Authoring:** the repository's testing guide covers RNTL vs DOM, `fireEvent.press` vs `fireEvent.click`, and file naming.
|
|
118
114
|
|
|
119
115
|
**A11y-only ad-hoc** (from `packages/components`):
|
|
120
116
|
`pnpm exec jest --config ../../jest.config.js --testNamePattern="a11y"`
|
|
121
117
|
|
|
122
118
|
## License
|
|
123
119
|
|
|
124
|
-
[](
|
|
120
|
+
[](https://opensource.org/licenses/MIT)
|
|
125
121
|
|
|
126
|
-
MIT © 2026 Digital First Holdings LLC.
|
|
122
|
+
MIT © 2026 Digital First Holdings LLC. The full license text ships in the package as `LICENSE`.
|
|
@@ -19,8 +19,14 @@ const inputRootVariants = exports.inputRootVariants = (0, _utils.cva)(['w-full f
|
|
|
19
19
|
outline: []
|
|
20
20
|
},
|
|
21
21
|
size: {
|
|
22
|
-
default: ['h-11 min-h-11 px-4 py-3 gap-4',
|
|
23
|
-
|
|
22
|
+
default: ['h-11 min-h-11 px-4 py-3 gap-4',
|
|
23
|
+
// Web <600px: trim vertical padding so 16px / leading-normal (24px line box) fits
|
|
24
|
+
// in h-11. Native and web ≥600px keep py-3 at 14px text (Figma Viewport=Wide).
|
|
25
|
+
'web:max-[600px]:py-2', 'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
|
|
26
|
+
small: ['h-8 min-h-8 px-3 py-2 gap-1.5',
|
|
27
|
+
// Web <600px: grow shell to h-9 so 16px text fits. Native and web ≥600px stay
|
|
28
|
+
// h-8 at 12px text.
|
|
29
|
+
'web:max-[600px]:h-9 web:max-[600px]:min-h-9 web:max-[600px]:py-1.5', 'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
|
|
24
30
|
}
|
|
25
31
|
},
|
|
26
32
|
defaultVariants: {
|
|
@@ -38,8 +44,10 @@ const inputFieldVariants = exports.inputFieldVariants = (0, _utils.cva)([
|
|
|
38
44
|
'flex-1 min-w-0 justify-center bg-transparent p-0', 'text-content-primary', 'placeholder:text-content-tertiary', 'web:outline-none', 'tracking-normal'], {
|
|
39
45
|
variants: {
|
|
40
46
|
size: {
|
|
41
|
-
|
|
42
|
-
|
|
47
|
+
// Web <600px: 16px prevents iOS Safari focus-zoom. Native and web ≥600px keep
|
|
48
|
+
// 14px / 12px (Figma Viewport=Wide).
|
|
49
|
+
default: ['text-[0.875rem]', _constants.WEB_NARROW_FIELD_TEXT],
|
|
50
|
+
small: ['text-[0.75rem]', _constants.WEB_NARROW_FIELD_TEXT]
|
|
43
51
|
}
|
|
44
52
|
},
|
|
45
53
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_utils","require","_constants","inputRootVariants","exports","cva","TRANSITION_COLORS","DISABLED_CURSOR","variants","variant","outline","size","default","small","defaultVariants","inputFieldVariants","inputSlotVariants","inputIconVariants","inputFieldPlaceholderVariants"],"sourceRoot":"../../../../src","sources":["components/Input/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,UAAG,EAClC,CACE,8CAA8C,EAC9C,oBAAoB,EACpB,oCAAoC,EACpC,uEAAuE,EACvE,wCAAwC,EACxCC,4BAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDC,0BAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF;AACnF;AACA;AACA;AACA,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,iEAAiE,EACjE,8DAA8D,EAC9D,gEAAgE;AAChE;AACA;AACA,sEAAsE,EACtE,wDAAwD,EACxD,gEAAgE,EAChE,0CAA0C,CAC3C,EACD;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;IACX,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,CACP,+BAA+B
|
|
1
|
+
{"version":3,"names":["_utils","require","_constants","inputRootVariants","exports","cva","TRANSITION_COLORS","DISABLED_CURSOR","variants","variant","outline","size","default","small","defaultVariants","inputFieldVariants","WEB_NARROW_FIELD_TEXT","inputSlotVariants","inputIconVariants","inputFieldPlaceholderVariants"],"sourceRoot":"../../../../src","sources":["components/Input/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,UAAG,EAClC,CACE,8CAA8C,EAC9C,oBAAoB,EACpB,oCAAoC,EACpC,uEAAuE,EACvE,wCAAwC,EACxCC,4BAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDC,0BAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF;AACnF;AACA;AACA;AACA,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,iEAAiE,EACjE,8DAA8D,EAC9D,gEAAgE;AAChE;AACA;AACA,sEAAsE,EACtE,wDAAwD,EACxD,gEAAgE,EAChE,0CAA0C,CAC3C,EACD;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;IACX,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,CACP,+BAA+B;MAC/B;MACA;MACA,sBAAsB,EACtB,wEAAwE,EACxE,wEAAwE,CACzE;MACDC,KAAK,EAAE,CACL,+BAA+B;MAC/B;MACA;MACA,oEAAoE,EACpE,wEAAwE,EACxE,wEAAwE;IAE5E;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,OAAO,EAAE,SAAS;IAClBE,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAEM,MAAMI,kBAAkB,GAAAX,OAAA,CAAAW,kBAAA,GAAG,IAAAV,UAAG,EACnC;AACE;AACA;AACA;AACA;AACA;AACA;AACA,kDAAkD,EAClD,sBAAsB,EACtB,mCAAmC,EACnC,kBAAkB,EAClB,iBAAiB,CAClB,EACD;EACEG,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJ;MACA;MACAC,OAAO,EAAE,CAAC,iBAAiB,EAAEI,gCAAqB,CAAC;MACnDH,KAAK,EAAE,CAAC,gBAAgB,EAAEG,gCAAqB;IACjD;EACF,CAAC;EACDF,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAEM,MAAMM,iBAAiB,GAAAb,OAAA,CAAAa,iBAAA,GAAG,IAAAZ,UAAG,EAAC,CAAC,kDAAkD,CAAC,CAAC;AAEnF,MAAMa,iBAAiB,GAAAd,OAAA,CAAAc,iBAAA,GAAG,IAAAb,UAAG,EAAC,CAAC,uBAAuB,CAAC,EAAE;EAC9DG,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJC,OAAO,EAAE,QAAQ;MACjBC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAEK,MAAMQ,6BAA6B,GAAAf,OAAA,CAAAe,6BAAA,GAAG,IAAAd,UAAG,EAAC,CAAC,yBAAyB,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.FdicLockup = FdicLockup;
|
|
7
|
+
var _reactNativeSvg = require("react-native-svg");
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
+
const FDIC_NAVY = '#003366';
|
|
10
|
+
function FdicLockup() {
|
|
11
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Svg, {
|
|
12
|
+
width: "100%",
|
|
13
|
+
height: "100%",
|
|
14
|
+
viewBox: "0 0 44 20",
|
|
15
|
+
fill: "none",
|
|
16
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
|
|
17
|
+
d: "M5.39953 18.3086H0.896923V1.73399H10.1587V6.06628H5.39953V8.7493H9.88382V13.0821H5.39953V18.3086Z",
|
|
18
|
+
fill: FDIC_NAVY
|
|
19
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
|
|
20
|
+
d: "M30.228 1.69895H25.7254V18.308H30.228V1.69895Z",
|
|
21
|
+
fill: FDIC_NAVY
|
|
22
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
|
|
23
|
+
d: "M39.4208 13.924C37.2579 13.924 35.4679 12.1616 35.4679 10.0003C35.4679 7.83897 37.2579 6.07598 39.4208 6.07598C41.3929 6.07598 42.424 7.12483 43.1031 8.50623V2.55916C43.1031 2.55916 41.1094 1.665 39.2516 1.665C35.1252 1.665 30.6543 5.46047 30.6543 10.0003C30.6543 15.5582 34.9187 18.335 39.2516 18.335C41.1089 18.335 43.1031 17.4419 43.1031 17.4419V11.5466C42.2903 12.9479 41.3821 13.924 39.4208 13.924Z",
|
|
24
|
+
fill: FDIC_NAVY
|
|
25
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
|
|
26
|
+
d: "M15.3172 1.73399C18.1366 1.73399 24.946 2.42118 24.946 10.0132C24.946 17.6209 18.8254 18.2935 15.3172 18.293H10.7785V1.73399H15.3172ZM20.4752 9.98679C20.4752 7.02943 18.1027 5.99783 15.3102 5.99783V13.9758C18.1027 13.9758 20.4752 12.9436 20.4752 9.98679Z",
|
|
27
|
+
fill: FDIC_NAVY
|
|
28
|
+
})]
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=FdicLockup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_reactNativeSvg","require","_jsxRuntime","FDIC_NAVY","FdicLockup","jsxs","Svg","width","height","viewBox","fill","children","jsx","Path","d"],"sourceRoot":"../../../../src","sources":["components/InsuranceDisclosure/FdicLockup.tsx"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AAA6C,IAAAC,WAAA,GAAAD,OAAA;AAE7C,MAAME,SAAS,GAAG,SAAS;AAEpB,SAASC,UAAUA,CAAA,EAAG;EAC3B,oBACE,IAAAF,WAAA,CAAAG,IAAA,EAACL,eAAA,CAAAM,GAAG;IAACC,KAAK,EAAC,MAAM;IAACC,MAAM,EAAC,MAAM;IAACC,OAAO,EAAC,WAAW;IAACC,IAAI,EAAC,MAAM;IAAAC,QAAA,gBAC7D,IAAAT,WAAA,CAAAU,GAAA,EAACZ,eAAA,CAAAa,IAAI;MACHC,CAAC,EAAC,mGAAmG;MACrGJ,IAAI,EAAEP;IAAU,CACjB,CAAC,eACF,IAAAD,WAAA,CAAAU,GAAA,EAACZ,eAAA,CAAAa,IAAI;MAACC,CAAC,EAAC,gDAAgD;MAACJ,IAAI,EAAEP;IAAU,CAAE,CAAC,eAC5E,IAAAD,WAAA,CAAAU,GAAA,EAACZ,eAAA,CAAAa,IAAI;MACHC,CAAC,EAAC,qZAAqZ;MACvZJ,IAAI,EAAEP;IAAU,CACjB,CAAC,eACF,IAAAD,WAAA,CAAAU,GAAA,EAACZ,eAAA,CAAAa,IAAI;MACHC,CAAC,EAAC,gQAAgQ;MAClQJ,IAAI,EAAEP;IAAU,CACjB,CAAC;EAAA,CACC,CAAC;AAEV","ignoreList":[]}
|
|
@@ -11,9 +11,15 @@ var _utils = require("@cdx-ui/utils");
|
|
|
11
11
|
var _Image = require("../Image/Image");
|
|
12
12
|
var _HStack = require("../Stack/HStack");
|
|
13
13
|
var _Text = require("../Text");
|
|
14
|
+
var _FdicLockup = require("./FdicLockup");
|
|
14
15
|
var _styles = require("./styles");
|
|
15
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
/** Bundled official FDIC lockup — omit `logoSource` to use the default mark. */
|
|
18
|
+
|
|
19
|
+
/** Custom logo override — `logoAccessibilityLabel` is required. */
|
|
20
|
+
|
|
16
21
|
const InsuranceDisclosure = exports.InsuranceDisclosure = /*#__PURE__*/(0, _react.forwardRef)(function InsuranceDisclosure({
|
|
22
|
+
framed = false,
|
|
17
23
|
logoSource,
|
|
18
24
|
logoAccessibilityLabel,
|
|
19
25
|
label,
|
|
@@ -21,31 +27,43 @@ const InsuranceDisclosure = exports.InsuranceDisclosure = /*#__PURE__*/(0, _reac
|
|
|
21
27
|
style,
|
|
22
28
|
...props
|
|
23
29
|
}, ref) {
|
|
30
|
+
const useCustomLogo = logoSource != null;
|
|
24
31
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HStack.HStack, {
|
|
25
32
|
ref: ref,
|
|
26
33
|
space: "md",
|
|
27
|
-
className: (0, _utils.cn)((0, _styles.insuranceDisclosureRootVariants)(
|
|
34
|
+
className: (0, _utils.cn)((0, _styles.insuranceDisclosureRootVariants)({
|
|
35
|
+
framed
|
|
36
|
+
}), className),
|
|
28
37
|
style: style,
|
|
29
38
|
...props,
|
|
30
39
|
...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
|
|
31
40
|
slot: 'insurance-disclosure'
|
|
32
41
|
})),
|
|
33
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.Image, {
|
|
42
|
+
children: [useCustomLogo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.Image, {
|
|
34
43
|
source: logoSource,
|
|
35
44
|
accessibilityLabel: logoAccessibilityLabel,
|
|
36
|
-
accessible:
|
|
45
|
+
accessible: logoAccessibilityLabel != null,
|
|
37
46
|
resizeMode: "contain",
|
|
38
47
|
className: (0, _styles.insuranceDisclosureLogoVariants)(),
|
|
39
48
|
...(0, _primitives.mergeDataAttributes)({}, (0, _primitives.dataAttributes)({
|
|
40
49
|
slot: 'insurance-disclosure-logo'
|
|
41
50
|
}))
|
|
51
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
52
|
+
accessible: true,
|
|
53
|
+
accessibilityRole: "image",
|
|
54
|
+
accessibilityLabel: "FDIC",
|
|
55
|
+
className: (0, _styles.insuranceDisclosureLogoVariants)(),
|
|
56
|
+
...(0, _primitives.mergeDataAttributes)({}, (0, _primitives.dataAttributes)({
|
|
57
|
+
slot: 'insurance-disclosure-logo'
|
|
58
|
+
})),
|
|
59
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FdicLockup.FdicLockup, {})
|
|
42
60
|
}), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
43
61
|
className: "min-w-0 shrink",
|
|
44
62
|
...(0, _primitives.mergeDataAttributes)({}, (0, _primitives.dataAttributes)({
|
|
45
63
|
slot: 'insurance-disclosure-content'
|
|
46
64
|
})),
|
|
47
65
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
|
|
48
|
-
size: "
|
|
66
|
+
size: "sm",
|
|
49
67
|
className: (0, _styles.insuranceDisclosureTextVariants)(),
|
|
50
68
|
children: label
|
|
51
69
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_primitives","_utils","_Image","_HStack","_Text","_styles","_jsxRuntime","InsuranceDisclosure","exports","forwardRef","logoSource","logoAccessibilityLabel","label","className","style","props","ref","jsxs","HStack","space","cn","insuranceDisclosureRootVariants","mergeDataAttributes","dataAttributes","slot","children","jsx","Image","source","accessibilityLabel","accessible","resizeMode","insuranceDisclosureLogoVariants","View","Text","size","insuranceDisclosureTextVariants","displayName"],"sourceRoot":"../../../../src","sources":["components/InsuranceDisclosure/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_primitives","_utils","_Image","_HStack","_Text","_FdicLockup","_styles","_jsxRuntime","InsuranceDisclosure","exports","forwardRef","framed","logoSource","logoAccessibilityLabel","label","className","style","props","ref","useCustomLogo","jsxs","HStack","space","cn","insuranceDisclosureRootVariants","mergeDataAttributes","dataAttributes","slot","children","jsx","Image","source","accessibilityLabel","accessible","resizeMode","insuranceDisclosureLogoVariants","View","accessibilityRole","FdicLockup","Text","size","insuranceDisclosureTextVariants","displayName"],"sourceRoot":"../../../../src","sources":["components/InsuranceDisclosure/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AAIkB,IAAAS,WAAA,GAAAT,OAAA;AAelB;;AAOA;;AAYO,MAAMU,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,gBAAG,IAAAE,iBAAU,EAG3C,SAASF,mBAAmBA,CAC5B;EAAEG,MAAM,GAAG,KAAK;EAAEC,UAAU;EAAEC,sBAAsB;EAAEC,KAAK;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EACzFC,GAAG,EACH;EACA,MAAMC,aAAa,GAAGP,UAAU,IAAI,IAAI;EAExC,oBACE,IAAAL,WAAA,CAAAa,IAAA,EAACjB,OAAA,CAAAkB,MAAM;IACLH,GAAG,EAAEA,GAAI;IACTI,KAAK,EAAC,IAAI;IACVP,SAAS,EAAE,IAAAQ,SAAE,EAAC,IAAAC,uCAA+B,EAAC;MAAEb;IAAO,CAAC,CAAC,EAAEI,SAAS,CAAE;IACtEC,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACL,IAAAQ,+BAAmB,EAACR,KAAK,EAAE,IAAAS,0BAAc,EAAC;MAAEC,IAAI,EAAE;IAAuB,CAAC,CAAC,CAAC;IAAAC,QAAA,GAE/ET,aAAa,gBACZ,IAAAZ,WAAA,CAAAsB,GAAA,EAAC3B,MAAA,CAAA4B,KAAU;MACTC,MAAM,EAAEnB,UAAW;MACnBoB,kBAAkB,EAAEnB,sBAAuB;MAC3CoB,UAAU,EAAEpB,sBAAsB,IAAI,IAAK;MAC3CqB,UAAU,EAAC,SAAS;MACpBnB,SAAS,EAAE,IAAAoB,uCAA+B,EAAC,CAAE;MAAA,GACzC,IAAAV,+BAAmB,EAAC,CAAC,CAAC,EAAE,IAAAC,0BAAc,EAAC;QAAEC,IAAI,EAAE;MAA4B,CAAC,CAAC;IAAC,CACnF,CAAC,gBAEF,IAAApB,WAAA,CAAAsB,GAAA,EAAC9B,YAAA,CAAAqC,IAAI;MACHH,UAAU;MACVI,iBAAiB,EAAC,OAAO;MACzBL,kBAAkB,EAAC,MAAM;MACzBjB,SAAS,EAAE,IAAAoB,uCAA+B,EAAC,CAAE;MAAA,GACzC,IAAAV,+BAAmB,EAAC,CAAC,CAAC,EAAE,IAAAC,0BAAc,EAAC;QAAEC,IAAI,EAAE;MAA4B,CAAC,CAAC,CAAC;MAAAC,QAAA,eAElF,IAAArB,WAAA,CAAAsB,GAAA,EAACxB,WAAA,CAAAiC,UAAU,IAAE;IAAC,CACV,CACP,EACAxB,KAAK,gBACJ,IAAAP,WAAA,CAAAsB,GAAA,EAAC9B,YAAA,CAAAqC,IAAI;MACHrB,SAAS,EAAC,gBAAgB;MAAA,GACtB,IAAAU,+BAAmB,EAAC,CAAC,CAAC,EAAE,IAAAC,0BAAc,EAAC;QAAEC,IAAI,EAAE;MAA+B,CAAC,CAAC,CAAC;MAAAC,QAAA,eAErF,IAAArB,WAAA,CAAAsB,GAAA,EAACzB,KAAA,CAAAmC,IAAI;QAACC,IAAI,EAAC,IAAI;QAACzB,SAAS,EAAE,IAAA0B,uCAA+B,EAAC,CAAE;QAAAb,QAAA,EAC1Dd;MAAK,CACF;IAAC,CACH,CAAC,GACL,IAAI;EAAA,CACF,CAAC;AAEb,CAAC,CAAC;AAEFN,mBAAmB,CAACkC,WAAW,GAAG,qBAAqB","ignoreList":[]}
|
|
@@ -5,7 +5,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.insuranceDisclosureTextVariants = exports.insuranceDisclosureRootVariants = exports.insuranceDisclosureLogoVariants = void 0;
|
|
7
7
|
var _utils = require("@cdx-ui/utils");
|
|
8
|
-
const insuranceDisclosureRootVariants = exports.insuranceDisclosureRootVariants = (0, _utils.cva)(['w-full max-w-full items-center justify-start'
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const insuranceDisclosureRootVariants = exports.insuranceDisclosureRootVariants = (0, _utils.cva)(['w-full max-w-full items-center justify-start'], {
|
|
9
|
+
variants: {
|
|
10
|
+
framed: {
|
|
11
|
+
true: ['bg-surface-primary', 'border border-stroke-secondary', 'rounded-[var(--border-radius-default)]', 'px-3 py-2'],
|
|
12
|
+
false: ''
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
framed: false
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const insuranceDisclosureLogoVariants = exports.insuranceDisclosureLogoVariants = (0, _utils.cva)(['h-5 w-11 shrink-0']);
|
|
20
|
+
const insuranceDisclosureTextVariants = exports.insuranceDisclosureTextVariants = (0, _utils.cva)(['shrink text-content-primary italic [font-family:var(--font-body-italic)]']);
|
|
11
21
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_utils","require","insuranceDisclosureRootVariants","exports","cva","insuranceDisclosureLogoVariants","insuranceDisclosureTextVariants"],"sourceRoot":"../../../../src","sources":["components/InsuranceDisclosure/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEO,MAAMC,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,IAAAE,UAAG,
|
|
1
|
+
{"version":3,"names":["_utils","require","insuranceDisclosureRootVariants","exports","cva","variants","framed","true","false","defaultVariants","insuranceDisclosureLogoVariants","insuranceDisclosureTextVariants"],"sourceRoot":"../../../../src","sources":["components/InsuranceDisclosure/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEO,MAAMC,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,IAAAE,UAAG,EAChD,CAAC,8CAA8C,CAAC,EAChD;EACEC,QAAQ,EAAE;IACRC,MAAM,EAAE;MACNC,IAAI,EAAE,CACJ,oBAAoB,EACpB,gCAAgC,EAChC,wCAAwC,EACxC,WAAW,CACZ;MACDC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,MAAM,EAAE;EACV;AACF,CACF,CAAC;AAMM,MAAMI,+BAA+B,GAAAP,OAAA,CAAAO,+BAAA,GAAG,IAAAN,UAAG,EAAC,CAAC,mBAAmB,CAAC,CAAC;AAElE,MAAMO,+BAA+B,GAAAR,OAAA,CAAAQ,+BAAA,GAAG,IAAAP,UAAG,EAAC,CACjD,0EAA0E,CAC3E,CAAC","ignoreList":[]}
|
|
@@ -66,7 +66,7 @@ const RadioIndicator = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
66
66
|
isFocusVisible
|
|
67
67
|
} = (0, _primitives.useRadioContext)();
|
|
68
68
|
const checkState = isChecked ? 'checked' : 'unchecked';
|
|
69
|
-
const fieldState = INDICATOR_STATES[`${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`];
|
|
69
|
+
const fieldState = isReadOnly ? `readonly-${checkState}${isInvalid ? '-invalid' : ''}` : INDICATOR_STATES[`${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`];
|
|
70
70
|
const computedClassName = (0, _utils.cn)((0, _styles.radioIndicatorVariants)(), className);
|
|
71
71
|
const Comp = asChild ? _primitives.Slot : _reactNative.View;
|
|
72
72
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Comp, {
|
|
@@ -86,11 +86,16 @@ const RadioIndicator = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
86
86
|
fieldState
|
|
87
87
|
})),
|
|
88
88
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
89
|
-
|
|
89
|
+
collapsable: false,
|
|
90
|
+
className: (0, _utils.cn)((0, _styles.radioInnerDotVariants)(),
|
|
91
|
+
// Native: unconditional bg so Uniwind does not have to win a data-attribute
|
|
92
|
+
// background over `bg-surface-action-strong` (web keeps compound selectors).
|
|
93
|
+
isReadOnly && isChecked && !isInvalid && 'bg-content-primary'),
|
|
90
94
|
...(0, _primitives.dataAttributes)({
|
|
91
95
|
checked: isChecked,
|
|
92
96
|
invalid: isInvalid,
|
|
93
97
|
hover: isHovered,
|
|
98
|
+
readonly: isReadOnly,
|
|
94
99
|
fieldState
|
|
95
100
|
})
|
|
96
101
|
}), children]
|
|
@@ -109,6 +114,10 @@ const RadioLabel = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
109
114
|
style,
|
|
110
115
|
...props
|
|
111
116
|
}, ref) => {
|
|
117
|
+
const {
|
|
118
|
+
isDisabled,
|
|
119
|
+
isReadOnly
|
|
120
|
+
} = (0, _primitives.useRadioContext)();
|
|
112
121
|
const computedClassName = (0, _utils.cn)((0, _styles.radioLabelVariants)(), className);
|
|
113
122
|
const Comp = asChild ? _primitives.Slot : _reactNative.Text;
|
|
114
123
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
|
|
@@ -117,7 +126,9 @@ const RadioLabel = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
117
126
|
style: style,
|
|
118
127
|
...props,
|
|
119
128
|
...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
|
|
120
|
-
slot: 'radio-label'
|
|
129
|
+
slot: 'radio-label',
|
|
130
|
+
disabled: isDisabled,
|
|
131
|
+
readonly: isReadOnly
|
|
121
132
|
})),
|
|
122
133
|
children: children
|
|
123
134
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_primitives","_utils","_styles","_jsxRuntime","RadioRoot","forwardRef","className","children","style","props","ref","computedClassName","cn","radioRootVariants","jsxs","mergeDataAttributes","dataAttributes","slot","jsx","RadioIndicator","displayName","INDICATOR_STATES","asChild","isChecked","isDisabled","isHovered","isInvalid","isReadOnly","isPressed","isFocusVisible","useRadioContext","checkState","fieldState","radioIndicatorVariants","Comp","Slot","View","hover","checked","disabled","focusVisible","invalid","readonly","active","radioInnerDotVariants","RadioLabel","radioLabelVariants","Text","RadioGroup","direction","value","defaultValue","onChange","isRequired","name","viewProps","radioGroupVariants","Radio","exports","Object","assign","Indicator","Label","Group"],"sourceRoot":"../../../../src","sources":["components/Radio/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AASA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAMkB,IAAAK,WAAA,GAAAL,OAAA;AAElB;AACA;AACA;;AAOA,MAAMM,SAAS,gBAAG,IAAAC,iBAAU,EAAmB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAChG,MAAMC,iBAAiB,GAAG,IAAAC,SAAE,EAAC,IAAAC,yBAAiB,EAAC,CAAC,EAAEP,SAAS,CAAC;EAE5D,oBACE,IAAAH,WAAA,CAAAW,IAAA,EAACd,WAAA,CAAAI,SAAkB;IACjBM,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAEK,iBAAkB;IAC7BH,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACL,IAAAM,+BAAmB,EAACN,KAAK,EAAE,IAAAO,0BAAc,EAAC;MAAEC,IAAI,EAAE;IAAQ,CAAC,CAAC,CAAC;IAAAV,QAAA,gBAEjE,IAAAJ,WAAA,CAAAe,GAAA,EAACC,cAAc,IAAE,CAAC,EACjBZ,QAAQ;EAAA,CACS,CAAC;AAEzB,CAAC,CAAC;AAEFH,SAAS,CAACgB,WAAW,GAAG,OAAO;;AAE/B;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;AACvB,CAAU;AAQV,MAAMF,cAAc,gBAAG,IAAAd,iBAAU,EAC/B,CAAC;EAAEiB,OAAO;EAAEhB,SAAS;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC1D,MAAM;IAAEa,SAAS;IAAEC,UAAU;IAAEC,SAAS;IAAEC,SAAS;IAAEC,UAAU;IAAEC,SAAS;IAAEC;EAAe,CAAC,GAC1F,IAAAC,2BAAe,EAAC,CAAC;EAEnB,MAAMC,UAAU,GAAGR,SAAS,GAAG,SAAS,GAAG,WAAW;EACtD,MAAMS,UAAU,
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_primitives","_utils","_styles","_jsxRuntime","RadioRoot","forwardRef","className","children","style","props","ref","computedClassName","cn","radioRootVariants","jsxs","mergeDataAttributes","dataAttributes","slot","jsx","RadioIndicator","displayName","INDICATOR_STATES","asChild","isChecked","isDisabled","isHovered","isInvalid","isReadOnly","isPressed","isFocusVisible","useRadioContext","checkState","fieldState","radioIndicatorVariants","Comp","Slot","View","hover","checked","disabled","focusVisible","invalid","readonly","active","collapsable","radioInnerDotVariants","RadioLabel","radioLabelVariants","Text","RadioGroup","direction","value","defaultValue","onChange","isRequired","name","viewProps","radioGroupVariants","Radio","exports","Object","assign","Indicator","Label","Group"],"sourceRoot":"../../../../src","sources":["components/Radio/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AASA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAMkB,IAAAK,WAAA,GAAAL,OAAA;AAElB;AACA;AACA;;AAOA,MAAMM,SAAS,gBAAG,IAAAC,iBAAU,EAAmB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAChG,MAAMC,iBAAiB,GAAG,IAAAC,SAAE,EAAC,IAAAC,yBAAiB,EAAC,CAAC,EAAEP,SAAS,CAAC;EAE5D,oBACE,IAAAH,WAAA,CAAAW,IAAA,EAACd,WAAA,CAAAI,SAAkB;IACjBM,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAEK,iBAAkB;IAC7BH,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACL,IAAAM,+BAAmB,EAACN,KAAK,EAAE,IAAAO,0BAAc,EAAC;MAAEC,IAAI,EAAE;IAAQ,CAAC,CAAC,CAAC;IAAAV,QAAA,gBAEjE,IAAAJ,WAAA,CAAAe,GAAA,EAACC,cAAc,IAAE,CAAC,EACjBZ,QAAQ;EAAA,CACS,CAAC;AAEzB,CAAC,CAAC;AAEFH,SAAS,CAACgB,WAAW,GAAG,OAAO;;AAE/B;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;AACvB,CAAU;AAQV,MAAMF,cAAc,gBAAG,IAAAd,iBAAU,EAC/B,CAAC;EAAEiB,OAAO;EAAEhB,SAAS;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC1D,MAAM;IAAEa,SAAS;IAAEC,UAAU;IAAEC,SAAS;IAAEC,SAAS;IAAEC,UAAU;IAAEC,SAAS;IAAEC;EAAe,CAAC,GAC1F,IAAAC,2BAAe,EAAC,CAAC;EAEnB,MAAMC,UAAU,GAAGR,SAAS,GAAG,SAAS,GAAG,WAAW;EACtD,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,MAAMjB,iBAAiB,GAAG,IAAAC,SAAE,EAAC,IAAAqB,8BAAsB,EAAC,CAAC,EAAE3B,SAAS,CAAC;EACjE,MAAM4B,IAAI,GAAGZ,OAAO,GAAGa,gBAAI,GAAGC,iBAAI;EAElC,oBACE,IAAAjC,WAAA,CAAAW,IAAA,EAACoB,IAAI;IACHxB,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAEK,iBAAkB;IAC7BH,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACL,IAAAM,+BAAmB,EACrBN,KAAK,EACL,IAAAO,0BAAc,EAAC;MACbC,IAAI,EAAE,iBAAiB;MACvBoB,KAAK,EAAEZ,SAAS;MAChBa,OAAO,EAAEf,SAAS;MAClBgB,QAAQ,EAAEf,UAAU;MACpBgB,YAAY,EAAEX,cAAc;MAC5BY,OAAO,EAAEf,SAAS;MAClBgB,QAAQ,EAAEf,UAAU;MACpBgB,MAAM,EAAEf,SAAS;MACjBI;IACF,CAAC,CACH,CAAC;IAAAzB,QAAA,gBAED,IAAAJ,WAAA,CAAAe,GAAA,EAACnB,YAAA,CAAAqC,IAAI;MACHQ,WAAW,EAAE,KAAM;MACnBtC,SAAS,EAAE,IAAAM,SAAE,EACX,IAAAiC,6BAAqB,EAAC,CAAC;MACvB;MACA;MACAlB,UAAU,IAAIJ,SAAS,IAAI,CAACG,SAAS,IAAI,oBAC3C,CAAE;MAAA,GACE,IAAAV,0BAAc,EAAC;QACjBsB,OAAO,EAAEf,SAAS;QAClBkB,OAAO,EAAEf,SAAS;QAClBW,KAAK,EAAEZ,SAAS;QAChBiB,QAAQ,EAAEf,UAAU;QACpBK;MACF,CAAC;IAAC,CACH,CAAC,EACDzB,QAAQ;EAAA,CACL,CAAC;AAEX,CACF,CAAC;AAEDY,cAAc,CAACC,WAAW,GAAG,iBAAiB;;AAE9C;AACA;AACA;;AAQA,MAAM0B,UAAU,gBAAG,IAAAzC,iBAAU,EAC3B,CAAC;EAAEiB,OAAO;EAAEhB,SAAS;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC1D,MAAM;IAAEc,UAAU;IAAEG;EAAW,CAAC,GAAG,IAAAG,2BAAe,EAAC,CAAC;EACpD,MAAMnB,iBAAiB,GAAG,IAAAC,SAAE,EAAC,IAAAmC,0BAAkB,EAAC,CAAC,EAAEzC,SAAS,CAAC;EAC7D,MAAM4B,IAAI,GAAGZ,OAAO,GAAGa,gBAAI,GAAGa,iBAAI;EAElC,oBACE,IAAA7C,WAAA,CAAAe,GAAA,EAACgB,IAAI;IACHxB,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAEK,iBAAkB;IAC7BH,KAAK,EAAEA,KAAM;IAAA,GACTC,KAAK;IAAA,GACL,IAAAM,+BAAmB,EACrBN,KAAK,EACL,IAAAO,0BAAc,EAAC;MACbC,IAAI,EAAE,aAAa;MACnBsB,QAAQ,EAAEf,UAAU;MACpBkB,QAAQ,EAAEf;IACZ,CAAC,CACH,CAAC;IAAApB,QAAA,EAEAA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDuC,UAAU,CAAC1B,WAAW,GAAG,aAAa;;AAEtC;AACA;AACA;;AAkBA,MAAM6B,UAAU,gBAAG,IAAA5C,iBAAU,EAC3B,CACE;EACEC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACL0C,SAAS,GAAG,QAAQ;EACpBC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACR7B,UAAU;EACVE,SAAS;EACT4B,UAAU;EACV3B,UAAU;EACV4B,IAAI;EACJ,GAAGC;AACL,CAAC,EACD9C,GAAG,KACA;EACH,MAAMC,iBAAiB,GAAG,IAAAC,SAAE,EAAC,IAAA6C,0BAAkB,EAAC;IAAEP;EAAU,CAAC,CAAC,EAAE5C,SAAS,CAAC;EAE1E,oBACE,IAAAH,WAAA,CAAAe,GAAA,EAAClB,WAAA,CAAAiD,UAAmB;IAClBvC,GAAG,EAAEA,GAAI;IACTJ,SAAS,EAAEK,iBAAkB;IAC7BH,KAAK,EAAEA,KAAM;IACb2C,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3BC,QAAQ,EAAEA,QAAS;IACnB7B,UAAU,EAAEA,UAAW;IACvBE,SAAS,EAAEA,SAAU;IACrB4B,UAAU,EAAEA,UAAW;IACvB3B,UAAU,EAAEA,UAAW;IACvB4B,IAAI,EAAEA,IAAK;IACXL,SAAS,EAAEA,SAAU;IAAA,GACjBM,SAAS;IAAA,GACT,IAAAzC,+BAAmB,EAACyC,SAAS,EAAE,IAAAxC,0BAAc,EAAC;MAAEC,IAAI,EAAE;IAAc,CAAC,CAAC,CAAC;IAAAV,QAAA,EAE1EA;EAAQ,CACU,CAAC;AAE1B,CACF,CAAC;AAED0C,UAAU,CAAC7B,WAAW,GAAG,aAAa;;AAEtC;AACA;AACA;;AAQO,MAAMsC,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAGE,MAAM,CAACC,MAAM,CAACzD,SAAS,EAAE;EAC5C0D,SAAS,EAAE3C,cAAc;EACzB4C,KAAK,EAAEjB,UAAU;EACjBkB,KAAK,EAAEf;AACT,CAAC,CAA2B","ignoreList":[]}
|
|
@@ -7,11 +7,13 @@ exports.radioRootVariants = exports.radioLabelVariants = exports.radioInnerDotVa
|
|
|
7
7
|
var _reactNative = require("react-native");
|
|
8
8
|
var _utils = require("@cdx-ui/utils");
|
|
9
9
|
var _constants = require("../../styles/constants");
|
|
10
|
-
const radioRootVariants = exports.radioRootVariants = (0, _utils.cva)(['flex-row items-center gap-2', 'data-[
|
|
10
|
+
const radioRootVariants = exports.radioRootVariants = (0, _utils.cva)(['flex-row items-center gap-2', _constants.DISABLED_OPACITY, _constants.DISABLED_CURSOR, 'data-[readonly=true]:cursor-default',
|
|
11
11
|
// Suppress default :focus-visible outline on the role="radio" Pressable;
|
|
12
12
|
// focus ring is drawn on the indicator instead of wrapping the whole control.
|
|
13
13
|
'web:outline-none web:focus:outline-none web:focus-visible:outline-none']);
|
|
14
|
-
const radioIndicatorVariants = exports.radioIndicatorVariants = (0, _utils.cva)(['items-center justify-center', 'rounded-[var(--border-radius-round)]', 'border-[length:var(--border-width-selected)]', 'h-5 w-5',
|
|
14
|
+
const radioIndicatorVariants = exports.radioIndicatorVariants = (0, _utils.cva)(['items-center justify-center', 'rounded-[var(--border-radius-round)]', 'border-[length:var(--border-width-selected)]', 'h-5 w-5',
|
|
15
|
+
// Figma: indicator fill is transparent; selection reads via border + inner dot only.
|
|
16
|
+
'bg-transparent', 'data-[checked=false]:border-content-secondary', 'data-[checked=true]:border-stroke-action', 'data-[invalid=true]:border-stroke-danger', _reactNative.Platform.select({
|
|
15
17
|
web: [_constants.TRANSITION_COLORS, 'group',
|
|
16
18
|
// Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
|
|
17
19
|
'data-[hover=true]:data-[checked=false]:bg-content-secondary/[0.08]',
|
|
@@ -19,19 +21,33 @@ const radioIndicatorVariants = exports.radioIndicatorVariants = (0, _utils.cva)(
|
|
|
19
21
|
'data-[hover=true]:data-[invalid=true]:data-[checked=false]:bg-surface-danger-strong/[0.08]', 'data-[hover=true]:data-[checked=true]:border-surface-action-strong-hover', 'data-[hover=true]:data-[invalid=true]:border-surface-danger-strong-hover',
|
|
20
22
|
// Active — CSS :active (web root does not track press via data-active).
|
|
21
23
|
// data-[hover=true] guard ensures active beats hover by specificity (0,3,0 > 0,2,0).
|
|
22
|
-
'web:active:data-[hover=true]:data-[checked=false]:border-stroke-hover', 'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
|
|
24
|
+
'web:active:data-[hover=true]:data-[checked=false]:border-stroke-hover', 'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-surface-danger-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active', 'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
|
|
25
|
+
// Focus ring — applies to read-only as well (focusable + aria-readonly).
|
|
26
|
+
'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',
|
|
27
|
+
// Read-only — Figma: transparent fill + content-tertiary border (checked and unchecked).
|
|
28
|
+
// After hover/active so equal-or-higher specificity keeps the static treatment.
|
|
29
|
+
// Invalid is not a Figma readonly variant; retain danger so error remains visible.
|
|
30
|
+
'data-[readonly=true]:data-[checked=false]:border-content-tertiary', 'data-[readonly=true]:data-[checked=true]:border-content-tertiary', 'data-[readonly=true]:data-[invalid=true]:border-stroke-danger', 'data-[readonly=true]:data-[hover=true]:data-[checked=false]:bg-transparent', 'data-[readonly=true]:data-[hover=true]:data-[invalid=true]:data-[checked=false]:bg-transparent', 'data-[readonly=true]:data-[hover=true]:data-[checked=false]:border-content-tertiary', 'data-[readonly=true]:data-[hover=true]:data-[checked=true]:border-content-tertiary', 'data-[readonly=true]:data-[hover=true]:data-[invalid=true]:border-stroke-danger', 'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=false]:border-content-tertiary', 'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:border-content-tertiary', 'web:active:data-[readonly=true]:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-stroke-danger', 'web:active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-stroke-danger'].join(' '),
|
|
23
31
|
default: [
|
|
24
32
|
// Native: Uniwind only evaluates the last data-[] condition in a compound chain.
|
|
25
33
|
// Use single-condition data-[field-state=...] selectors (emitted by RadioIndicator).
|
|
26
|
-
'data-[field-state=active]:border-stroke-hover', 'data-[field-state=invalid-active]:border-surface-danger-strong-active', 'data-[field-state=checked-active]:border-surface-action-strong-active', 'data-[field-state=checked-invalid-active]:border-surface-danger-strong-active'].join(' ')
|
|
34
|
+
'data-[field-state=readonly-unchecked]:border-content-tertiary', 'data-[field-state=readonly-checked]:border-content-tertiary', 'data-[field-state=readonly-unchecked-invalid]:border-stroke-danger', 'data-[field-state=readonly-checked-invalid]:border-stroke-danger', 'data-[field-state=active]:border-stroke-hover', 'data-[field-state=invalid-active]:border-surface-danger-strong-active', 'data-[field-state=checked-active]:border-surface-action-strong-active', 'data-[field-state=checked-invalid-active]:border-surface-danger-strong-active'].join(' ')
|
|
27
35
|
})]);
|
|
28
|
-
const radioInnerDotVariants = exports.radioInnerDotVariants = (0, _utils.cva)(['rounded-[var(--border-radius-round)]', 'h-2.5 w-2.5',
|
|
36
|
+
const radioInnerDotVariants = exports.radioInnerDotVariants = (0, _utils.cva)(['rounded-[var(--border-radius-round)]', 'overflow-hidden', 'h-2.5 w-2.5',
|
|
37
|
+
// Opacity (not scale): iOS compositing of scale-0 views samples the parent ring, so the
|
|
38
|
+
// checked fill never paints and the dot looks content-tertiary instead of content-primary.
|
|
39
|
+
'opacity-0', 'data-[checked=true]:opacity-100', 'bg-surface-action-strong', 'data-[invalid=true]:bg-surface-danger-strong', _reactNative.Platform.select({
|
|
29
40
|
web: ['data-[hover=true]:bg-surface-action-strong-hover', 'data-[hover=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
|
|
30
41
|
// Active via group-active on indicator (inner dot is not the :active target).
|
|
31
|
-
'web:group-active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active', 'web:group-active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active'
|
|
32
|
-
|
|
42
|
+
'web:group-active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active', 'web:group-active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active',
|
|
43
|
+
// Read-only checked — Figma: content-primary dot; invalid retains danger.
|
|
44
|
+
'data-[readonly=true]:data-[checked=true]:bg-content-primary', 'data-[readonly=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong', 'web:group-active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:bg-content-primary', 'web:group-active:data-[readonly=true]:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong'].join(' '),
|
|
45
|
+
default: ['data-[field-state=checked-active]:bg-surface-action-strong-active', 'data-[field-state=checked-invalid-active]:bg-surface-danger-strong-active',
|
|
46
|
+
// `!` beats the base `bg-surface-action-strong` — Uniwind native does not cascade
|
|
47
|
+
// data-attribute backgrounds over an unconditional bg on the same View.
|
|
48
|
+
'data-[readonly=true]:bg-content-primary!', 'data-[field-state=readonly-checked]:bg-content-primary!', 'data-[field-state=readonly-checked-invalid]:bg-surface-danger-strong!'].join(' ')
|
|
33
49
|
})]);
|
|
34
|
-
const radioLabelVariants = exports.radioLabelVariants = (0, _utils.cva)(['body-md', 'text-content-primary']);
|
|
50
|
+
const radioLabelVariants = exports.radioLabelVariants = (0, _utils.cva)(['body-md', 'text-content-primary', 'data-[disabled=true]:text-content-tertiary', 'data-[readonly=true]:cursor-default']);
|
|
35
51
|
const radioGroupVariants = exports.radioGroupVariants = (0, _utils.cva)([], {
|
|
36
52
|
variants: {
|
|
37
53
|
direction: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_utils","_constants","radioRootVariants","exports","cva","DISABLED_CURSOR","radioIndicatorVariants","Platform","select","web","TRANSITION_COLORS","join","default","radioInnerDotVariants","radioLabelVariants","radioGroupVariants","variants","direction","column","row","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Radio/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAEO,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,UAAG,EAAC,CACnC,6BAA6B,
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_utils","_constants","radioRootVariants","exports","cva","DISABLED_OPACITY","DISABLED_CURSOR","radioIndicatorVariants","Platform","select","web","TRANSITION_COLORS","join","default","radioInnerDotVariants","radioLabelVariants","radioGroupVariants","variants","direction","column","row","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Radio/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAEO,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,UAAG,EAAC,CACnC,6BAA6B,EAC7BC,2BAAgB,EAChBC,0BAAe,EACf,qCAAqC;AACrC;AACA;AACA,wEAAwE,CACzE,CAAC;AAEK,MAAMC,sBAAsB,GAAAJ,OAAA,CAAAI,sBAAA,GAAG,IAAAH,UAAG,EAAC,CACxC,6BAA6B,EAC7B,sCAAsC,EACtC,8CAA8C,EAC9C,SAAS;AACT;AACA,gBAAgB,EAChB,+CAA+C,EAC/C,0CAA0C,EAC1C,0CAA0C,EAC1CI,qBAAQ,CAACC,MAAM,CAAC;EACdC,GAAG,EAAE,CACHC,4BAAiB,EACjB,OAAO;EACP;EACA,oEAAoE;EACpE;EACA,4FAA4F,EAC5F,0EAA0E,EAC1E,0EAA0E;EAC1E;EACA;EACA,uEAAuE,EACvE,2GAA2G,EAC3G,sFAAsF,EACtF,0GAA0G;EAC1G;EACA,4CAA4C,EAC5C,kIAAkI;EAClI;EACA;EACA;EACA,mEAAmE,EACnE,kEAAkE,EAClE,+DAA+D,EAC/D,4EAA4E,EAC5E,gGAAgG,EAChG,qFAAqF,EACrF,oFAAoF,EACpF,iFAAiF,EACjF,gGAAgG,EAChG,+FAA+F,EAC/F,iHAAiH,EACjH,gHAAgH,CACjH,CAACC,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE;EACP;EACA;EACA,+DAA+D,EAC/D,6DAA6D,EAC7D,oEAAoE,EACpE,kEAAkE,EAClE,+CAA+C,EAC/C,uEAAuE,EACvE,uEAAuE,EACvE,+EAA+E,CAChF,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEK,MAAME,qBAAqB,GAAAX,OAAA,CAAAW,qBAAA,GAAG,IAAAV,UAAG,EAAC,CACvC,sCAAsC,EACtC,iBAAiB,EACjB,aAAa;AACb;AACA;AACA,WAAW,EACX,iCAAiC,EACjC,0BAA0B,EAC1B,8CAA8C,EAC9CI,qBAAQ,CAACC,MAAM,CAAC;EACdC,GAAG,EAAE,CACH,kDAAkD,EAClD,sEAAsE;EACtE;EACA,wFAAwF,EACxF,4GAA4G;EAC5G;EACA,6DAA6D,EAC7D,uFAAuF,EACvF,gGAAgG,EAChG,0HAA0H,CAC3H,CAACE,IAAI,CAAC,GAAG,CAAC;EACXC,OAAO,EAAE,CACP,mEAAmE,EACnE,2EAA2E;EAC3E;EACA;EACA,0CAA0C,EAC1C,yDAAyD,EACzD,uEAAuE,CACxE,CAACD,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,CAAC;AAEK,MAAMG,kBAAkB,GAAAZ,OAAA,CAAAY,kBAAA,GAAG,IAAAX,UAAG,EAAC,CACpC,SAAS,EACT,sBAAsB,EACtB,4CAA4C,EAC5C,qCAAqC,CACtC,CAAC;AAEK,MAAMY,kBAAkB,GAAAb,OAAA,CAAAa,kBAAA,GAAG,IAAAZ,UAAG,EAAC,EAAE,EAAE;EACxCa,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE,OAAO;MACfC,GAAG,EAAE;IACP;EACF,CAAC;EACDC,eAAe,EAAE;IAAEH,SAAS,EAAE;EAAS;AACzC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -21,9 +21,15 @@ const selectTriggerVariants = exports.selectTriggerVariants = (0, _utils.cva)(['
|
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
23
|
default: ['h-11 min-h-11 px-4 py-3 gap-4',
|
|
24
|
+
// Web <600px: trim vertical padding so 16px / leading-normal (24px line box) fits
|
|
25
|
+
// in h-11. Native and web ≥600px keep py-3 at 14px text (Figma Viewport=Wide).
|
|
26
|
+
'web:max-[600px]:py-2',
|
|
24
27
|
// Native only: subtract one hairline so the wider focus border doesn't shift layout.
|
|
25
28
|
'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[state=open]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[state=open]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
|
|
26
|
-
small: ['h-8 min-h-8 px-3 py-2 gap-1.5',
|
|
29
|
+
small: ['h-8 min-h-8 px-3 py-2 gap-1.5',
|
|
30
|
+
// Web <600px: grow shell to h-9 so 16px text fits. Native and web ≥600px stay
|
|
31
|
+
// h-8 at 12px text.
|
|
32
|
+
'web:max-[600px]:h-9 web:max-[600px]:min-h-9 web:max-[600px]:py-1.5', 'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]', 'native:data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
|
|
27
33
|
}
|
|
28
34
|
},
|
|
29
35
|
defaultVariants: {
|
|
@@ -37,8 +43,10 @@ const selectTriggerVariants = exports.selectTriggerVariants = (0, _utils.cva)(['
|
|
|
37
43
|
const selectValueVariants = exports.selectValueVariants = (0, _utils.cva)(['min-w-0 flex-1 text-start', 'text-content-primary', 'data-[placeholder=true]:text-content-tertiary', 'data-[invalid=true]:text-content-danger'], {
|
|
38
44
|
variants: {
|
|
39
45
|
size: {
|
|
40
|
-
|
|
41
|
-
|
|
46
|
+
// Web <600px: 16px matches Input/Textarea and prevents iOS Safari focus-zoom.
|
|
47
|
+
// Native and web ≥600px keep 14px / 12px (Figma Viewport=Wide).
|
|
48
|
+
default: ['text-[0.875rem]', _constants.WEB_NARROW_FIELD_TEXT],
|
|
49
|
+
small: ['text-[0.75rem]', _constants.WEB_NARROW_FIELD_TEXT]
|
|
42
50
|
}
|
|
43
51
|
},
|
|
44
52
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_utils","require","_constants","selectTriggerVariants","exports","cva","TRANSITION_COLORS","DISABLED_CURSOR","variants","variant","outline","size","default","small","defaultVariants","selectValueVariants","selectIconVariants"],"sourceRoot":"../../../../src","sources":["components/Select/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEA;;AAEO,MAAME,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,UAAG,EACtC,CACE,sEAAsE,EACtE,oBAAoB,EACpB,8BAA8B,EAC9B,wCAAwC,EACxCC,4BAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDC,0BAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF;AACnF;AACA;AACA;AACA,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,iEAAiE,EACjE,8DAA8D,EAC9D,gEAAgE,EAChE,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,iEAAiE,EACjE,8DAA8D,EAC9D,gEAAgE;AAChE;AACA,sEAAsE,EACtE,wDAAwD,EACxD,gEAAgE,EAChE,sEAAsE,EACtE,0CAA0C,CAC3C,EACD;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;IACX,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,CACP,+BAA+B;MAC/B;MACA,wEAAwE,EACxE,wEAAwE,EACxE,wEAAwE,EACxE,wEAAwE,CACzE;MACDC,KAAK,EAAE,CACL,+BAA+B
|
|
1
|
+
{"version":3,"names":["_utils","require","_constants","selectTriggerVariants","exports","cva","TRANSITION_COLORS","DISABLED_CURSOR","variants","variant","outline","size","default","small","defaultVariants","selectValueVariants","WEB_NARROW_FIELD_TEXT","selectIconVariants"],"sourceRoot":"../../../../src","sources":["components/Select/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEA;;AAEO,MAAME,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,UAAG,EACtC,CACE,sEAAsE,EACtE,oBAAoB,EACpB,8BAA8B,EAC9B,wCAAwC,EACxCC,4BAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDC,0BAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF;AACnF;AACA;AACA;AACA,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,iEAAiE,EACjE,8DAA8D,EAC9D,gEAAgE,EAChE,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,iEAAiE,EACjE,8DAA8D,EAC9D,gEAAgE;AAChE;AACA,sEAAsE,EACtE,wDAAwD,EACxD,gEAAgE,EAChE,sEAAsE,EACtE,0CAA0C,CAC3C,EACD;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;IACX,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,CACP,+BAA+B;MAC/B;MACA;MACA,sBAAsB;MACtB;MACA,wEAAwE,EACxE,wEAAwE,EACxE,wEAAwE,EACxE,wEAAwE,CACzE;MACDC,KAAK,EAAE,CACL,+BAA+B;MAC/B;MACA;MACA,oEAAoE,EACpE,wEAAwE,EACxE,wEAAwE,EACxE,wEAAwE,EACxE,wEAAwE;IAE5E;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,OAAO,EAAE,SAAS;IAClBE,IAAI,EAAE;EACR;AACF,CACF,CAAC;;AAED;;AAEO,MAAMI,mBAAmB,GAAAX,OAAA,CAAAW,mBAAA,GAAG,IAAAV,UAAG,EACpC,CACE,2BAA2B,EAC3B,sBAAsB,EACtB,+CAA+C,EAC/C,yCAAyC,CAC1C,EACD;EACEG,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJ;MACA;MACAC,OAAO,EAAE,CAAC,iBAAiB,EAAEI,gCAAqB,CAAC;MACnDH,KAAK,EAAE,CAAC,gBAAgB,EAAEG,gCAAqB;IACjD;EACF,CAAC;EACDF,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CACF,CAAC;;AAED;;AAEO,MAAMM,kBAAkB,GAAAb,OAAA,CAAAa,kBAAA,GAAG,IAAAZ,UAAG,EACnC,CACE,kDAAkD,EAClD,uBAAuB,EACvB,yCAAyC,CAC1C,EACD;EACEG,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJC,OAAO,EAAE,QAAQ;MACjBC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CACF,CAAC","ignoreList":[]}
|
|
@@ -9,10 +9,10 @@ var _utils = require("@cdx-ui/utils");
|
|
|
9
9
|
// NATIVE — Uniwind className bindings for RN Switch
|
|
10
10
|
// =============================================================================
|
|
11
11
|
|
|
12
|
-
const switchThumbColorVariants = exports.switchThumbColorVariants = (0, _utils.cva)(['accent-
|
|
12
|
+
const switchThumbColorVariants = exports.switchThumbColorVariants = (0, _utils.cva)(['accent-surface-primary'], {
|
|
13
13
|
variants: {
|
|
14
14
|
isDisabled: {
|
|
15
|
-
true: 'accent-
|
|
15
|
+
true: 'accent-surface-neutral-subtle',
|
|
16
16
|
false: ''
|
|
17
17
|
}
|
|
18
18
|
},
|
|
@@ -20,10 +20,10 @@ const switchThumbColorVariants = exports.switchThumbColorVariants = (0, _utils.c
|
|
|
20
20
|
isDisabled: false
|
|
21
21
|
}
|
|
22
22
|
});
|
|
23
|
-
const switchTrackOnVariants = exports.switchTrackOnVariants = (0, _utils.cva)(['accent-
|
|
23
|
+
const switchTrackOnVariants = exports.switchTrackOnVariants = (0, _utils.cva)(['accent-surface-action-strong'], {
|
|
24
24
|
variants: {
|
|
25
25
|
isInvalid: {
|
|
26
|
-
true: 'accent-
|
|
26
|
+
true: 'accent-surface-danger-strong',
|
|
27
27
|
false: ''
|
|
28
28
|
}
|
|
29
29
|
},
|
|
@@ -31,10 +31,10 @@ const switchTrackOnVariants = exports.switchTrackOnVariants = (0, _utils.cva)(['
|
|
|
31
31
|
isInvalid: false
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
|
-
const switchTrackOffVariants = exports.switchTrackOffVariants = (0, _utils.cva)(['accent-
|
|
34
|
+
const switchTrackOffVariants = exports.switchTrackOffVariants = (0, _utils.cva)(['accent-surface-neutral-subtle'], {
|
|
35
35
|
variants: {
|
|
36
36
|
isInvalid: {
|
|
37
|
-
true: 'accent-
|
|
37
|
+
true: 'accent-surface-danger-subtle',
|
|
38
38
|
false: ''
|
|
39
39
|
}
|
|
40
40
|
},
|
|
@@ -42,10 +42,10 @@ const switchTrackOffVariants = exports.switchTrackOffVariants = (0, _utils.cva)(
|
|
|
42
42
|
isInvalid: false
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
|
-
const switchIosBgVariants = exports.switchIosBgVariants = (0, _utils.cva)(['accent-
|
|
45
|
+
const switchIosBgVariants = exports.switchIosBgVariants = (0, _utils.cva)(['accent-surface-neutral-subtle'], {
|
|
46
46
|
variants: {
|
|
47
47
|
isInvalid: {
|
|
48
|
-
true: 'accent-
|
|
48
|
+
true: 'accent-surface-danger-subtle',
|
|
49
49
|
false: ''
|
|
50
50
|
}
|
|
51
51
|
},
|
|
@@ -58,7 +58,7 @@ const switchIosBgVariants = exports.switchIosBgVariants = (0, _utils.cva)(['acce
|
|
|
58
58
|
// WEB — Tailwind classes for custom Pressable toggle
|
|
59
59
|
// =============================================================================
|
|
60
60
|
|
|
61
|
-
const switchTrackVariants = exports.switchTrackVariants = (0, _utils.cva)(['flex-row items-center rounded-full cursor-pointer', 'transition-colors duration-200', 'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed', 'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-
|
|
61
|
+
const switchTrackVariants = exports.switchTrackVariants = (0, _utils.cva)(['flex-row items-center rounded-full cursor-pointer', 'transition-colors duration-200', 'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed', 'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-stroke-focus/50', 'web:data-[invalid=true]:data-[focus-visible=true]:ring-stroke-danger/50'], {
|
|
62
62
|
variants: {
|
|
63
63
|
size: {
|
|
64
64
|
sm: 'w-9 h-5 p-0.5',
|
|
@@ -73,8 +73,8 @@ const switchTrackVariants = exports.switchTrackVariants = (0, _utils.cva)(['flex
|
|
|
73
73
|
const switchWebTrackColorVariants = exports.switchWebTrackColorVariants = (0, _utils.cva)([], {
|
|
74
74
|
variants: {
|
|
75
75
|
isChecked: {
|
|
76
|
-
true: 'bg-
|
|
77
|
-
false: 'bg-
|
|
76
|
+
true: 'bg-surface-action-strong data-[hover=true]:bg-surface-action-strong-hover',
|
|
77
|
+
false: 'bg-surface-neutral-subtle data-[hover=true]:bg-surface-neutral-subtle-hover'
|
|
78
78
|
},
|
|
79
79
|
isInvalid: {
|
|
80
80
|
true: '',
|
|
@@ -84,18 +84,18 @@ const switchWebTrackColorVariants = exports.switchWebTrackColorVariants = (0, _u
|
|
|
84
84
|
compoundVariants: [{
|
|
85
85
|
isChecked: true,
|
|
86
86
|
isInvalid: true,
|
|
87
|
-
className: 'bg-
|
|
87
|
+
className: 'bg-surface-danger-strong data-[hover=true]:bg-surface-danger-strong-hover'
|
|
88
88
|
}, {
|
|
89
89
|
isChecked: false,
|
|
90
90
|
isInvalid: true,
|
|
91
|
-
className: 'bg-
|
|
91
|
+
className: 'bg-surface-danger-subtle data-[hover=true]:bg-surface-danger-subtle-hover'
|
|
92
92
|
}],
|
|
93
93
|
defaultVariants: {
|
|
94
94
|
isChecked: false,
|
|
95
95
|
isInvalid: false
|
|
96
96
|
}
|
|
97
97
|
});
|
|
98
|
-
const switchThumbVariants = exports.switchThumbVariants = (0, _utils.cva)(['rounded-full bg-
|
|
98
|
+
const switchThumbVariants = exports.switchThumbVariants = (0, _utils.cva)(['rounded-full bg-surface-primary shadow-sm', 'transition-transform duration-200'], {
|
|
99
99
|
variants: {
|
|
100
100
|
size: {
|
|
101
101
|
sm: 'w-4 h-4',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_utils","require","switchThumbColorVariants","exports","cva","variants","isDisabled","true","false","defaultVariants","switchTrackOnVariants","isInvalid","switchTrackOffVariants","switchIosBgVariants","switchTrackVariants","size","sm","md","lg","switchWebTrackColorVariants","isChecked","compoundVariants","className","switchThumbVariants"],"sourceRoot":"../../../../src","sources":["components/Switch/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA;AACA;AACA;;AAEO,MAAMC,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,IAAAE,UAAG,EAAC,CAAC,
|
|
1
|
+
{"version":3,"names":["_utils","require","switchThumbColorVariants","exports","cva","variants","isDisabled","true","false","defaultVariants","switchTrackOnVariants","isInvalid","switchTrackOffVariants","switchIosBgVariants","switchTrackVariants","size","sm","md","lg","switchWebTrackColorVariants","isChecked","compoundVariants","className","switchThumbVariants"],"sourceRoot":"../../../../src","sources":["components/Switch/styles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -37,8 +37,10 @@ const textareaFieldVariants = exports.textareaFieldVariants = (0, _utils.cva)([
|
|
|
37
37
|
'flex-1 min-w-0 bg-transparent p-0', 'text-content-primary', 'placeholder:text-content-tertiary', 'web:outline-none', 'tracking-normal'], {
|
|
38
38
|
variants: {
|
|
39
39
|
size: {
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
// Web <600px: 16px prevents iOS Safari focus-zoom. Native and web ≥600px keep
|
|
41
|
+
// 14px / 12px (Figma Viewport=Wide).
|
|
42
|
+
default: ['text-[0.875rem]', _constants.WEB_NARROW_FIELD_TEXT],
|
|
43
|
+
small: ['text-[0.75rem]', _constants.WEB_NARROW_FIELD_TEXT]
|
|
42
44
|
}
|
|
43
45
|
},
|
|
44
46
|
defaultVariants: {
|