@cdx-ui/components 0.0.1-beta.44 → 0.0.1-beta.46

package/lib/module/figma/Radio.figma.js

@@ -6,16 +6,18 @@
 import figma from 'figma';
 const instance = figma.selectedInstance;
 
-// Enum-as-boolean: isDisabled and isInvalid are VARIANT properties in Figma.
-// Map "false" to undefined so the prop is omitted when not set.
+// Enum-as-boolean: isDisabled and isInvalid are VARIANT properties in Figma (string values "true"/"false").
+// Rendered via renderProp so JSX formatting matches Code Connect conventions.
 const isDisabled = instance.getEnum('isDisabled', {
   true: true,
-  false: undefined
+  false: false
 });
 const isInvalid = instance.getEnum('isInvalid', {
   true: true,
-  false: undefined
+  false: false
 });
+const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
+const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
 const showLabel = instance.getEnum('Show Label?', {
   true: true,
   false: false
@@ -25,7 +27,7 @@ export default {
   id: 'radio',
   imports: ["import { Radio } from '@cdx-ui/components'"],
   example: figma.code`
-<Radio value="option" isDisabled={${isDisabled}} isInvalid={${isInvalid}}>
+<Radio value="option"${isDisabledProp}${isInvalidProp}>
   ${showLabel ? figma.code`<Radio.Label>${labelText}</Radio.Label>` : null}
 </Radio>`
 };

package/lib/module/figma/Radio.figma.js.map

@@ -1 +1 @@
-{"version":3,"names":["figma","instance","selectedInstance","isDisabled","getEnum","true","false","undefined","isInvalid","showLabel","labelText","findText","textContent","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Radio.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA,MAAMC,UAAU,GAAGF,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,SAAS,GAAGR,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMI,SAAS,GAAIT,QAAQ,CAACU,QAAQ,CAAC,OAAO,CAAC,CAAgCC,WAAW;AAExF,eAAe;EACbC,EAAE,EAAE,OAAO;EACXC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDC,OAAO,EAAEf,KAAK,CAACgB,IAAI;AACrB,oCAAoCb,UAAU,gBAAgBK,SAAS;AACvE,IAAIC,SAAS,GAAGT,KAAK,CAACgB,IAAI,gBAAgBN,SAAS,gBAAgB,GAAG,IAAI;AAC1E;AACA,CAAC","ignoreList":[]}
+{"version":3,"names":["figma","instance","selectedInstance","isDisabled","getEnum","true","false","isInvalid","isDisabledProp","helpers","react","renderProp","isInvalidProp","showLabel","labelText","findText","textContent","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Radio.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA,MAAMC,UAAU,GAAGF,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,SAAS,GAAGN,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAME,cAAc,GAAGR,KAAK,CAACS,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAER,UAAU,CAAC;AAC/E,MAAMS,aAAa,GAAGZ,KAAK,CAACS,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEJ,SAAS,CAAC;AAE5E,MAAMM,SAAS,GAAGZ,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMQ,SAAS,GAAIb,QAAQ,CAACc,QAAQ,CAAC,OAAO,CAAC,CAAgCC,WAAW;AAExF,eAAe;EACbC,EAAE,EAAE,OAAO;EACXC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDC,OAAO,EAAEnB,KAAK,CAACoB,IAAI;AACrB,uBAAuBZ,cAAc,GAAGI,aAAa;AACrD,IAAIC,SAAS,GAAGb,KAAK,CAACoB,IAAI,gBAAgBN,SAAS,gBAAgB,GAAG,IAAI;AAC1E;AACA,CAAC","ignoreList":[]}

package/lib/module/figma/Select.figma.js

@@ -1,6 +1,6 @@
 "use strict";
 
-// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=427-2296
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=427-2296
 // source=packages/components/src/components/Select/index.tsx
 // component=Select
 import figma from 'figma';
@@ -23,11 +23,11 @@ const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
 const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
 const showValue = instance.getEnum('Show Value?', {
   true: true,
-  false: false
+  false: undefined
 });
 const showPlaceholder = instance.getEnum('Show Placeholder?', {
   true: true,
-  false: false
+  false: undefined
 });
 const valueText = instance.findText('{value}', {
   traverseInstances: true

package/lib/module/figma/Select.figma.js.map

@@ -1 +1 @@
-{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","outlined","size","default","isInvalid","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","showValue","showPlaceholder","valueText","findText","traverseInstances","textContent","placeholder","getString","valueProp","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Select.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,QAAQ,EAAE;AACZ,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGL,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCG,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,MAAMC,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAER,SAAS,CAAC;AAC5E,MAAMS,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GAAGjB,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMS,eAAe,GAAGlB,QAAQ,CAACG,OAAO,CAAC,mBAAmB,EAAE;EAC5DK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMU,SAAS,GACbnB,QAAQ,CAACoB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,WAAW,GAAGvB,QAAQ,CAACwB,SAAS,CAAC,aAAa,CAAC;AAErD,MAAMC,SAAS,GAAG1B,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,OAAO,EAAEE,SAAS,GAAG,OAAO,GAAGP,SAAS,CAAC;AAE1F,eAAe;EACbgB,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,CAAC;EACxDC,OAAO,EAAE7B,KAAK,CAAC8B,IAAI;AACrB,mBAAmB3B,OAAO,WAAWG,IAAI,uCAAuCc,SAAS,QAAQM,SAAS,GAAGb,aAAa,GAAGI,cAAc;AAC3I;AACA,MAAME,eAAe,GAAGnB,KAAK,CAAC8B,IAAI,8BAA8BN,WAAW,MAAM,GAAGxB,KAAK,CAAC8B,IAAI,kBAAkB;AAChH;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","outlined","size","default","isInvalid","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","showValue","showPlaceholder","valueText","findText","traverseInstances","textContent","placeholder","getString","valueProp","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Select.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,QAAQ,EAAE;AACZ,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGL,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCG,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,MAAMC,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAER,SAAS,CAAC;AAC5E,MAAMS,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GAAGjB,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMQ,eAAe,GAAGlB,QAAQ,CAACG,OAAO,CAAC,mBAAmB,EAAE;EAC5DK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAMS,SAAS,GACbnB,QAAQ,CAACoB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,WAAW,GAAGvB,QAAQ,CAACwB,SAAS,CAAC,aAAa,CAAC;AAErD,MAAMC,SAAS,GAAG1B,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,OAAO,EAAEE,SAAS,GAAG,OAAO,GAAGP,SAAS,CAAC;AAE1F,eAAe;EACbgB,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,CAAC;EACxDC,OAAO,EAAE7B,KAAK,CAAC8B,IAAI;AACrB,mBAAmB3B,OAAO,WAAWG,IAAI,uCAAuCc,SAAS,QAAQM,SAAS,GAAGb,aAAa,GAAGI,cAAc;AAC3I;AACA,MAAME,eAAe,GAAGnB,KAAK,CAAC8B,IAAI,8BAA8BN,WAAW,MAAM,GAAGxB,KAAK,CAAC8B,IAAI,kBAAkB;AAChH;AACA;AACA,CAAC","ignoreList":[]}

package/lib/typescript/components/Input/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB;;;8EAyC7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;8EAmB9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,oFAA4D,CAAC;AAE3F,eAAO,MAAM,iBAAiB;;8EAU5B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oFAAmC,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB;;;8EA0C7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;8EAmB9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,oFAA4D,CAAC;AAE3F,eAAO,MAAM,iBAAiB;;8EAU5B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oFAAmC,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/lib/typescript/components/Link/index.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { Text as RNText, type TextProps, type View } from 'react-native';
+import { Text, View, type TextProps } from 'react-native';
 import { type ILinkProps } from '@cdx-ui/primitives';
 import { type IconProps } from '../Icon';
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
@@ -11,7 +11,7 @@ export interface LinkLabelProps extends TextProps {
     className?: string;
     children?: ReactNode;
 }
-declare const LinkLabel: import("react").ForwardRefExoticComponent<LinkLabelProps & import("react").RefAttributes<RNText>>;
+declare const LinkLabel: import("react").ForwardRefExoticComponent<LinkLabelProps & import("react").RefAttributes<Text>>;
 export interface LinkIconProps extends Omit<IconProps, 'children'> {
 }
 declare const LinkIcon: {

package/lib/typescript/components/Link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,EAAc,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUpF,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,4FAQZ,CAAC;AAQH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,mGAUd,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAErE,QAAA,MAAM,QAAQ;yCAAwC,aAAa;;CAIlE,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAGX,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAuB,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAyC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE5F,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAQ/C,OAAO,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUpF,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,4FAQZ,CAAC;AAQH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,iGAiBd,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAErE,QAAA,MAAM,QAAQ;yCAAwC,aAAa;;CAKlE,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,KAAK,EAAE,OAAO,SAAS,CAAC;IACxB,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,IAAI,EAGX,qBAAqB,CAAC"}

package/lib/typescript/components/Link/styles.d.ts

@@ -1,6 +1,13 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const linkRootVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const linkLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const linkIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const linkLabelVariants: (props?: ({
+    visited?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const linkNativeUnderlineVariants: (props?: ({
+    visited?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const linkIconVariants: (props?: ({
+    visited?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Link/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,gBAAgB,oFAK3B,CAAC;AAEH,eAAO,MAAM,iBAAiB,oFAI5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,oFAAuC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oFAc3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;8EAe7B,CAAC;AAEF,eAAO,MAAM,2BAA2B;;8EAQtC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;8EAW5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/lib/typescript/components/Select/SelectTriggerHost.web.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import type { PressableProps } from 'react-native';
+import { type DomDataAttributeValue } from '@cdx-ui/primitives';
 export type SelectTriggerHostProps = PressableProps & {
     className?: string;
+    dataSet?: Record<string, DomDataAttributeValue>;
 };
 /**
  * Native `<button type="button">` so the trigger is HTML-labelable (`<label htmlFor>` focuses it).
@@ -9,5 +11,6 @@ export type SelectTriggerHostProps = PressableProps & {
  */
 export declare const SelectTriggerHost: React.ForwardRefExoticComponent<PressableProps & {
     className?: string;
+    dataSet?: Record<string, DomDataAttributeValue>;
 } & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=SelectTriggerHost.web.d.ts.map

package/lib/typescript/components/Select/SelectTriggerHost.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTriggerHost.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/SelectTriggerHost.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAwE7E;;;GAGG;AACH,eAAO,MAAM,iBAAiB;gBA5EsC,MAAM;2CAiIzE,CAAC"}
+{"version":3,"file":"SelectTriggerHost.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/SelectTriggerHost.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAqB,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACjD,CAAC;AAwEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB;gBA9EhB,MAAM;cACR,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC;2CAqIhD,CAAC"}

package/lib/typescript/components/Select/index.d.ts

@@ -19,7 +19,7 @@ declare const SelectValue: import("react").ForwardRefExoticComponent<SelectValue
 export interface SelectIconProps extends Omit<IconProps, 'children'> {
 }
 declare const SelectIcon: {
-    ({ className, style, ...props }: SelectIconProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, style, as: IconComponent, ...props }: SelectIconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export interface SelectContentProps extends ViewProps, ISelectContentProps {

package/lib/typescript/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EACL,KAAK,kBAAkB,EAOxB,MAAM,UAAU,CAAC;AAsBlB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,EAAE,kBAAkB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,8FAcf,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAalB,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,iBAAiB;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,mGAMf,CAAC;AAQH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAEvE,QAAA,MAAM,UAAU;qCAAoC,eAAe;;CAMlE,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,mBAAmB;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,qGAQlB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAYf,CAAC;AAQF,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,qBAAqB;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,uGAUpB,CAAC;AAQF,KAAK,uBAAuB,GAAG,OAAO,UAAU,GAAG;IACjD,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,SAAS,EAAE,OAAO,eAAe,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,EAOb,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EACL,KAAK,kBAAkB,EAOxB,MAAM,UAAU,CAAC;AAsBlB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,EAAE,kBAAkB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,8FAcf,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAalB,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,iBAAiB;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,mGAMf,CAAC;AAQH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAEvE,QAAA,MAAM,UAAU;wDAAuD,eAAe;;CAWrF,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,mBAAmB;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,qGAQlB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAYf,CAAC;AAQF,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,qBAAqB;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,uGAUpB,CAAC;AAQF,KAAK,uBAAuB,GAAG,OAAO,UAAU,GAAG;IACjD,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,SAAS,EAAE,OAAO,eAAe,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,EAOb,uBAAuB,CAAC"}

package/lib/typescript/components/Select/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAkBlE,eAAO,MAAM,qBAAqB;;;8EAsCjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;8EAiB9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAanC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,qBAAqB;;;8EAgDjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;8EAkB9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAanC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/lib/typescript/figma/Link.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Link.figma.d.ts.map

package/lib/typescript/figma/Link.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Link.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAa1B,wBAOE"}

package/lib/typescript/figma/Radio.figma.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Radio.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAsB1B,wBAOE"}
+{"version":3,"file":"Radio.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Radio.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAwB1B,wBAOE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.44",
+  "version": "0.0.1-beta.46",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.44",
-    "@cdx-ui/utils": "0.0.1-beta.44",
-    "@cdx-ui/icons": "0.0.1-beta.44"
+    "@cdx-ui/primitives": "0.0.1-beta.46",
+    "@cdx-ui/utils": "0.0.1-beta.46",
+    "@cdx-ui/icons": "0.0.1-beta.46"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Button/styles.ts

@@ -12,7 +12,7 @@ export const buttonRootVariants = cva(
     TRANSITION_COLORS,
     'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
-    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-focus] web:data-[focus-visible=true]:ring-offset-2',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {

package/src/components/Chip/styles.ts

@@ -9,7 +9,7 @@ const chipInteractiveRoot = [
   Platform.select({
     web: [
       'outline-none',
-      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[var(--color-stroke-focus)] web:data-[focus-visible=true]:ring-offset-1',
+      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
     ].join(' '),
     default: '',
   }),

package/src/components/Input/styles.ts

@@ -5,7 +5,8 @@ export const inputRootVariants = cva(
   [
     'w-full flex-row items-center overflow-hidden',
     'bg-surface-primary',
-    'border-solid border-2 border-stroke-primary',
+    'border-solid border-stroke-primary',
+    'web:border-default native:border-[length:var(--border-width-default)]',
     'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
     'data-[disabled=true]:bg-surface-secondary',

package/src/components/Link/index.tsx

@@ -1,9 +1,14 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text as RNText, type TextProps, type View } from 'react-native';
-import { createLink, type ILinkProps } from '@cdx-ui/primitives';
+import { Platform, Pressable, Text, View, type TextProps } from 'react-native';
+import { createLink, useLinkInteractionContext, type ILinkProps } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
-import { linkRootVariants, linkLabelVariants, linkIconVariants } from './styles';
+import {
+  linkIconVariants,
+  linkLabelVariants,
+  linkNativeUnderlineVariants,
+  linkRootVariants,
+} from './styles';
 
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 
@@ -40,15 +45,22 @@ export interface LinkLabelProps extends TextProps {
   children?: ReactNode;
 }
 
-const LinkLabel = forwardRef<RNText, LinkLabelProps>(
+const LinkLabel = forwardRef<Text, LinkLabelProps>(
   ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(linkLabelVariants(), className);
+    const { visited } = useLinkInteractionContext();
+    const computedClassName = cn(linkLabelVariants({ visited }), className);
 
-    return (
-      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+    const textElement = (
+      <Text ref={ref} className={computedClassName} style={style} {...props}>
         {children}
-      </RNText>
+      </Text>
     );
+
+    if (Platform.OS === 'web') {
+      return textElement;
+    }
+
+    return <View className={cn(linkNativeUnderlineVariants({ visited }))}>{textElement}</View>;
   },
 );
 
@@ -61,7 +73,8 @@ LinkLabel.displayName = 'Link.Label';
 export interface LinkIconProps extends Omit<IconProps, 'children'> {}
 
 const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
-  const computedClassName = cn(linkIconVariants(), className);
+  const { visited } = useLinkInteractionContext();
+  const computedClassName = cn(linkIconVariants({ visited }), className);
 
   return <Icon as={as} className={computedClassName} style={style} {...props} />;
 };

package/src/components/Link/styles.ts

@@ -1,21 +1,61 @@
+import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { TRANSITION_COLORS } from '../../styles/primitives';
 
-// TODO: Handle visited state
-
 export const linkRootVariants = cva([
   'flex-row items-center gap-1',
-  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  Platform.select({ web: 'web:inline-flex web:self-start', default: '' }),
   TRANSITION_COLORS,
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  'web:data-[focus-visible=true]:rounded-[2px]',
   'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+  // Web: set color on the anchor so Label/Icon can text-inherit (incl. browser :visited).
+  'web:text-content-link',
+  'web:visited:text-content-link-visited',
+  'web:hover:text-content-primary',
+  'web:visited:hover:text-content-primary',
+  'data-[visited=true]:text-content-link-visited',
+  'web:data-[hover=true]:text-content-primary',
 ]);
 
-export const linkLabelVariants = cva([
-  'text-content-link',
-  'body-md',
-  'underline underline-offset-4',
-]);
+export const linkLabelVariants = cva(
+  [
+    'body-md',
+    Platform.select({ web: 'underline underline-offset-4', default: '' }),
+    Platform.select({ web: 'text-inherit', default: 'text-content-link' }),
+  ],
+  {
+    variants: {
+      visited: {
+        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+        false: '',
+      },
+    },
+    defaultVariants: { visited: false },
+  },
+);
+
+export const linkNativeUnderlineVariants = cva(['border-b border-content-link pb-0.5'], {
+  variants: {
+    visited: {
+      true: 'border-content-link-visited',
+      false: '',
+    },
+  },
+  defaultVariants: { visited: false },
+});
 
-export const linkIconVariants = cva(['text-content-link', 'size-4']);
+export const linkIconVariants = cva(
+  ['size-4', Platform.select({ web: 'text-inherit', default: 'text-content-link' })],
+  {
+    variants: {
+      visited: {
+        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+        false: '',
+      },
+    },
+    defaultVariants: { visited: false },
+  },
+);
 
 export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;

package/src/components/Select/SelectTriggerHost.web.tsx

@@ -1,8 +1,12 @@
 import React, { forwardRef } from 'react';
 import { StyleSheet } from 'react-native';
 import type { PressableProps } from 'react-native';
+import { domDataAttributes, type DomDataAttributeValue } from '@cdx-ui/primitives';
 
-export type SelectTriggerHostProps = PressableProps & { className?: string };
+export type SelectTriggerHostProps = PressableProps & {
+  className?: string;
+  dataSet?: Record<string, DomDataAttributeValue>;
+};
 
 /** Props that must not be forwarded to a DOM `<button>`. */
 const OMIT = new Set<string>([
@@ -91,16 +95,19 @@ export const SelectTriggerHost = forwardRef<HTMLButtonElement, SelectTriggerHost
       style,
       className,
       testID,
+      dataSet,
       ...rest
     } = props;
 
     const domProps = filterDomProps(rest);
+    const dataAttrs = domDataAttributes(dataSet ?? {});
     const flattened = StyleSheet.flatten(style) as React.CSSProperties | undefined;
 
     return (
       <button
         ref={ref}
         {...domProps}
+        {...dataAttrs}
         type="button"
         disabled={!!disabled}
         className={typeof className === 'string' ? className : undefined}

package/src/components/Select/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ReactNode } from 'react';
 import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
-import { ArrowDropDown } from '@cdx-ui/icons';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
 import {
   createSelect,
   type ISelectContentProps,
@@ -83,7 +83,7 @@ const SelectTrigger = forwardRef<View, SelectTriggerProps>(
     return (
       <SelectPrimitive.Trigger ref={ref} className={computedClassName} style={style} {...props}>
         {children}
-        <SelectIcon as={ArrowDropDown} />
+        <SelectIcon as={KeyboardArrowDown} />
       </SelectPrimitive.Trigger>
     );
   },
@@ -115,12 +115,17 @@ SelectValue.displayName = 'Select.Value';
 
 export interface SelectIconProps extends Omit<IconProps, 'children'> {}
 
-const SelectIcon = ({ className, style, ...props }: SelectIconProps) => {
+const SelectIcon = ({ className, style, as: IconComponent, ...props }: SelectIconProps) => {
   const { size } = useSelectStyleContext();
 
   const computedClassName = cn(selectIconVariants({ size }), className);
+  const iconSizeClass = size === 'small' ? 'size-4' : 'size-5';
 
-  return <Icon className={computedClassName} style={style} {...props} />;
+  return (
+    <SelectPrimitive.Icon className={computedClassName} style={style}>
+      <Icon as={IconComponent} className={iconSizeClass} {...props} />
+    </SelectPrimitive.Icon>
+  );
 };
 
 SelectIcon.displayName = 'Select.Icon';

package/src/components/Select/styles.ts

@@ -1,44 +1,29 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_MUTED,
-  COLOR_TEXT_PRIMARY,
-  DISABLED_CURSOR,
-  DISABLED_OPACITY,
-  RADIUS_SM,
-  RADIUS_MD,
-  SHADOW_SM,
-  SHADOW_MD,
-  SIZE_SCALE,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
 // ── Trigger ─────────────────────────────────────────────────
 
 export const selectTriggerVariants = cva(
   [
     'flex w-full min-w-0 flex-row items-center justify-between text-start',
-    RADIUS_SM,
-    SHADOW_SM,
+    'bg-surface-primary',
+    'border border-stroke-primary',
+    'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
-    COLOR_BG_PRIMARY,
-    `border ${COLOR_BORDER_DEFAULT}`,
-    DISABLED_OPACITY,
+    'data-[disabled=true]:bg-surface-secondary',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
-    'data-[state=open]:border-slate-900',
-    'data-[invalid=true]:border-red-500',
-    'data-[readonly=true]:bg-slate-50',
-    Platform.select({
-      default: 'data-[active=true]:border-slate-300',
-      web: [
-        'data-[hover=true]:border-slate-300 data-[active=true]:data-[hover=true]:border-slate-400',
-        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
-        'data-[state=open]:ring-2 data-[state=open]:ring-slate-400/50',
-      ].join(' '),
-    }),
+    'data-[readonly=true]:bg-surface-secondary',
+    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+    'data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'data-[focus=true]:data-[invalid=false]:border-stroke-action',
+    'data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    'data-[state=open]:border-[length:var(--border-width-focused)]',
+    'data-[state=open]:data-[invalid=false]:border-stroke-action',
+    'data-[state=open]:data-[invalid=true]:border-stroke-danger',
+    'data-[invalid=true]:border-stroke-danger',
   ],
   {
     variants: {
@@ -46,8 +31,20 @@ export const selectTriggerVariants = cva(
         outline: [],
       },
       size: {
-        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} ${SIZE_SCALE.default.gap}`,
-        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} ${SIZE_SCALE.small.gap}`,
+        default: [
+          'h-11 min-h-11 px-4 py-3 gap-4',
+          'data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'data-[state=open]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'data-[state=open]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+        ],
+        small: [
+          'h-8 min-h-8 px-3 py-2 gap-1.5',
+          'data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+          'data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+        ],
       },
     },
     defaultVariants: {
@@ -62,15 +59,15 @@ export const selectTriggerVariants = cva(
 export const selectValueVariants = cva(
   [
     'min-w-0 flex-1 text-start',
-    'data-[placeholder=true]:text-slate-400',
-    'data-[invalid=true]:text-red-600',
-    COLOR_TEXT_PRIMARY,
+    'text-content-primary',
+    'data-[placeholder=true]:text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
   ],
   {
     variants: {
       size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {
@@ -84,14 +81,15 @@ export const selectValueVariants = cva(
 export const selectIconVariants = cva(
   [
     'shrink-0 items-center justify-center self-center',
-    COLOR_TEXT_MUTED,
-    'data-[invalid=true]:text-red-500',
+    'text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
+    'data-[state=open]:rotate-180',
   ],
   {
     variants: {
       size: {
-        default: 'h-5 w-5',
-        small: 'h-4 w-4',
+        default: 'size-5',
+        small: 'size-4',
       },
     },
     defaultVariants: {
@@ -103,12 +101,12 @@ export const selectIconVariants = cva(
 // ── Content ─────────────────────────────────────────────────
 
 export const selectContentVariants = cva([
-  COLOR_BG_PRIMARY,
-  `border ${COLOR_BORDER_DEFAULT}`,
+  'bg-surface-primary',
+  'border border-stroke-secondary',
   'overflow-hidden',
-  RADIUS_MD,
+  'rounded-xl',
   Platform.select({
-    web: SHADOW_MD,
+    web: 'shadow-sm',
     default: '',
   }),
   'max-h-60',
@@ -122,10 +120,10 @@ export const selectItemVariants = cva(
     'flex-row items-center',
     'transition-colors duration-100',
     'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[state=checked]:bg-slate-50 data-[state=checked]:font-medium',
+    'data-[state=checked]:bg-surface-action-tint data-[state=checked]:font-medium',
     Platform.select({
-      default: 'data-[active=true]:bg-slate-100',
-      web: 'data-[hover=true]:bg-slate-50 data-[active=true]:data-[hover=true]:bg-slate-100 data-[highlighted=true]:bg-slate-50',
+      default: 'data-[active=true]:bg-surface-action-tint-active',
+      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active data-[highlighted=true]:bg-surface-action-tint-hover',
     }),
   ],
   {
@@ -144,12 +142,12 @@ export const selectItemVariants = cva(
 // ── ItemLabel ───────────────────────────────────────────────
 
 export const selectItemLabelVariants = cva(
-  [COLOR_TEXT_PRIMARY, 'data-[state=checked]:font-medium'],
+  ['text-content-primary', 'data-[state=checked]:font-medium'],
   {
     variants: {
       size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {