@cdx-ui/components 0.0.1-beta.23 → 0.0.1-beta.25
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/lib/commonjs/components/Button/styles.js +1 -1
- package/lib/commonjs/components/Card/index.js +7 -1
- package/lib/commonjs/components/Card/index.js.map +1 -1
- package/lib/commonjs/components/Card/styles.js +12 -2
- package/lib/commonjs/components/Card/styles.js.map +1 -1
- package/lib/commonjs/components/Checkbox/index.js +5 -29
- package/lib/commonjs/components/Checkbox/index.js.map +1 -1
- package/lib/commonjs/components/Checkbox/styles.js +39 -47
- package/lib/commonjs/components/Checkbox/styles.js.map +1 -1
- package/lib/commonjs/components/Field/index.js +8 -2
- package/lib/commonjs/components/Field/index.js.map +1 -1
- package/lib/commonjs/components/Field/styles.js +4 -4
- package/lib/commonjs/components/Field/styles.js.map +1 -1
- package/lib/commonjs/components/IconButton/index.js +6 -1
- package/lib/commonjs/components/IconButton/index.js.map +1 -1
- package/lib/commonjs/components/IconButton/styles.js +135 -10
- package/lib/commonjs/components/IconButton/styles.js.map +1 -1
- package/lib/commonjs/components/Input/styles.js +7 -6
- package/lib/commonjs/components/Input/styles.js.map +1 -1
- package/lib/commonjs/components/Radio/index.js +3 -1
- package/lib/commonjs/components/Radio/index.js.map +1 -1
- package/lib/commonjs/components/Radio/styles.js +6 -5
- package/lib/commonjs/components/Radio/styles.js.map +1 -1
- package/lib/commonjs/figma/Card.Header.figma.js +28 -0
- package/lib/commonjs/figma/Card.Header.figma.js.map +1 -0
- package/lib/commonjs/figma/Card.figma.js +42 -0
- package/lib/commonjs/figma/Card.figma.js.map +1 -0
- package/lib/commonjs/figma/Checkbox.figma.js +55 -0
- package/lib/commonjs/figma/Checkbox.figma.js.map +1 -0
- package/lib/commonjs/figma/Field.Input.figma.js +57 -0
- package/lib/commonjs/figma/Field.Input.figma.js.map +1 -0
- package/lib/commonjs/figma/Field.Select.figma.js +57 -0
- package/lib/commonjs/figma/Field.Select.figma.js.map +1 -0
- package/lib/commonjs/figma/IconButton.figma.js +47 -0
- package/lib/commonjs/figma/IconButton.figma.js.map +1 -0
- package/lib/commonjs/figma/Input.figma.js +52 -0
- package/lib/commonjs/figma/Input.figma.js.map +1 -0
- package/lib/commonjs/figma/Select.figma.js +53 -0
- package/lib/commonjs/figma/Select.figma.js.map +1 -0
- package/lib/module/components/Button/styles.js +1 -1
- package/lib/module/components/Card/index.js +7 -1
- package/lib/module/components/Card/index.js.map +1 -1
- package/lib/module/components/Card/styles.js +12 -2
- package/lib/module/components/Card/styles.js.map +1 -1
- package/lib/module/components/Checkbox/index.js +6 -30
- package/lib/module/components/Checkbox/index.js.map +1 -1
- package/lib/module/components/Checkbox/styles.js +40 -48
- package/lib/module/components/Checkbox/styles.js.map +1 -1
- package/lib/module/components/Field/index.js +9 -3
- package/lib/module/components/Field/index.js.map +1 -1
- package/lib/module/components/Field/styles.js +4 -4
- package/lib/module/components/Field/styles.js.map +1 -1
- package/lib/module/components/IconButton/index.js +6 -1
- package/lib/module/components/IconButton/index.js.map +1 -1
- package/lib/module/components/IconButton/styles.js +135 -10
- package/lib/module/components/IconButton/styles.js.map +1 -1
- package/lib/module/components/Input/styles.js +7 -6
- package/lib/module/components/Input/styles.js.map +1 -1
- package/lib/module/components/Radio/index.js +3 -1
- package/lib/module/components/Radio/index.js.map +1 -1
- package/lib/module/components/Radio/styles.js +6 -6
- package/lib/module/components/Radio/styles.js.map +1 -1
- package/lib/module/figma/Card.Header.figma.js +22 -0
- package/lib/module/figma/Card.Header.figma.js.map +1 -0
- package/lib/module/figma/Card.figma.js +36 -0
- package/lib/module/figma/Card.figma.js.map +1 -0
- package/lib/module/figma/Checkbox.figma.js +49 -0
- package/lib/module/figma/Checkbox.figma.js.map +1 -0
- package/lib/module/figma/Field.Input.figma.js +51 -0
- package/lib/module/figma/Field.Input.figma.js.map +1 -0
- package/lib/module/figma/Field.Select.figma.js +51 -0
- package/lib/module/figma/Field.Select.figma.js.map +1 -0
- package/lib/module/figma/IconButton.figma.js +41 -0
- package/lib/module/figma/IconButton.figma.js.map +1 -0
- package/lib/module/figma/Input.figma.js +46 -0
- package/lib/module/figma/Input.figma.js.map +1 -0
- package/lib/module/figma/Select.figma.js +47 -0
- package/lib/module/figma/Select.figma.js.map +1 -0
- package/lib/typescript/components/Card/index.d.ts +2 -2
- package/lib/typescript/components/Card/index.d.ts.map +1 -1
- package/lib/typescript/components/Card/styles.d.ts +4 -1
- package/lib/typescript/components/Card/styles.d.ts.map +1 -1
- package/lib/typescript/components/Checkbox/index.d.ts +1 -2
- package/lib/typescript/components/Checkbox/index.d.ts.map +1 -1
- package/lib/typescript/components/Checkbox/styles.d.ts +4 -14
- package/lib/typescript/components/Checkbox/styles.d.ts.map +1 -1
- package/lib/typescript/components/Field/FieldLabel.web.d.ts +2 -2
- package/lib/typescript/components/Field/FieldLabel.web.d.ts.map +1 -1
- package/lib/typescript/components/Field/index.d.ts.map +1 -1
- package/lib/typescript/components/Field/styles.d.ts.map +1 -1
- package/lib/typescript/components/IconButton/index.d.ts.map +1 -1
- package/lib/typescript/components/IconButton/styles.d.ts +6 -2
- package/lib/typescript/components/IconButton/styles.d.ts.map +1 -1
- package/lib/typescript/components/Input/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/figma/Card.Header.figma.d.ts +8 -0
- package/lib/typescript/figma/Card.Header.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Card.figma.d.ts +8 -0
- package/lib/typescript/figma/Card.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Checkbox.figma.d.ts +8 -0
- package/lib/typescript/figma/Checkbox.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Field.Input.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.Input.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Field.Select.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.Select.figma.d.ts.map +1 -0
- package/lib/typescript/figma/IconButton.figma.d.ts +8 -0
- package/lib/typescript/figma/IconButton.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Input.figma.d.ts +8 -0
- package/lib/typescript/figma/Input.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Select.figma.d.ts +8 -0
- package/lib/typescript/figma/Select.figma.d.ts.map +1 -0
- package/package.json +4 -4
- package/src/components/Button/styles.ts +1 -1
- package/src/components/Card/index.tsx +9 -4
- package/src/components/Card/styles.ts +15 -3
- package/src/components/Checkbox/index.tsx +8 -19
- package/src/components/Checkbox/styles.ts +82 -84
- package/src/components/Field/FieldLabel.web.tsx +1 -1
- package/src/components/Field/index.tsx +10 -3
- package/src/components/Field/styles.ts +5 -4
- package/src/components/IconButton/index.tsx +3 -2
- package/src/components/IconButton/styles.ts +135 -9
- package/src/components/Input/styles.ts +12 -7
- package/src/components/Radio/index.tsx +2 -1
- package/src/components/Radio/styles.ts +11 -11
|
@@ -2,8 +2,7 @@ import { type ReactNode } from 'react';
|
|
|
2
2
|
import { Text, type TextProps, View, type ViewProps } from 'react-native';
|
|
3
3
|
import { type ICheckboxProps } from '@cdx-ui/primitives';
|
|
4
4
|
import { IconProps } from '../Icon';
|
|
5
|
-
|
|
6
|
-
export interface CheckboxProps extends ICheckboxProps, CheckboxVariantProps {
|
|
5
|
+
export interface CheckboxProps extends ICheckboxProps {
|
|
7
6
|
className?: string;
|
|
8
7
|
children?: ReactNode;
|
|
9
8
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzE,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzE,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAqB1C,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,gGAqBjB,CAAC;AAQF,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,yGAetB,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAEzE,QAAA,MAAM,YAAY;qCAAoC,iBAAiB;;CAItE,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAelB,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,qGAkClB,CAAC;AAQF,KAAK,yBAAyB,GAAG,OAAO,YAAY,GAAG;IACrD,SAAS,EAAE,OAAO,iBAAiB,CAAC;IACpC,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,KAAK,EAAE,OAAO,aAAa,CAAC;IAC5B,KAAK,EAAE,OAAO,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAKf,yBAAyB,CAAC"}
|
|
@@ -1,18 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export declare const checkboxIndicatorVariants: (props?: ({
|
|
6
|
-
size?: "small" | "default" | null | undefined;
|
|
7
|
-
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
-
export declare const checkboxIconVariants: (props?: ({
|
|
9
|
-
size?: "small" | "default" | null | undefined;
|
|
10
|
-
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
|
-
export declare const checkboxLabelVariants: (props?: ({
|
|
12
|
-
size?: "small" | "default" | null | undefined;
|
|
13
|
-
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
1
|
+
export declare const checkboxRootVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
2
|
+
export declare const checkboxIndicatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
3
|
+
export declare const checkboxIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
4
|
+
export declare const checkboxLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
14
5
|
export declare const checkboxGroupVariants: (props?: ({
|
|
15
6
|
direction?: "row" | "column" | null | undefined;
|
|
16
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
17
|
-
export type CheckboxVariantProps = VariantProps<typeof checkboxRootVariants>;
|
|
18
8
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,oFAM/B,CAAC;AAEH,eAAO,MAAM,yBAAyB,oFAmEpC,CAAC;AAEH,eAAO,MAAM,oBAAoB,oFAAiC,CAAC;AAEnE,eAAO,MAAM,qBAAqB,oFAGhC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAUhC,CAAC"}
|
|
@@ -4,13 +4,13 @@ export type BaseFieldLabelProps = ViewProps & {
|
|
|
4
4
|
htmlFor?: string;
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
/** @platform native — ignored on DOM `<label>`; set by form primitive for Uniwind. */
|
|
7
|
-
dataSet?: Record<string, string>;
|
|
7
|
+
dataSet?: Record<string, boolean | string>;
|
|
8
8
|
};
|
|
9
9
|
/** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */
|
|
10
10
|
export declare const BaseFieldLabel: React.ForwardRefExoticComponent<ViewProps & {
|
|
11
11
|
htmlFor?: string;
|
|
12
12
|
children?: ReactNode;
|
|
13
13
|
/** @platform native — ignored on DOM `<label>`; set by form primitive for Uniwind. */
|
|
14
|
-
dataSet?: Record<string, string>;
|
|
14
|
+
dataSet?: Record<string, boolean | string>;
|
|
15
15
|
} & React.RefAttributes<HTMLLabelElement>>;
|
|
16
16
|
//# sourceMappingURL=FieldLabel.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Field/FieldLabel.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"FieldLabel.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Field/FieldLabel.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,cAAc;cAPf,MAAM;eACL,SAAS;IACpB,sFAAsF;cAC5E,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;0CAa1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Field/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAEL,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,eAAe,EACrB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAQL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC5B,MAAM,UAAU,CAAC;AAoBlB;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,eAAe,EAAE,qBAAqB;CAAG;AAEjF,QAAA,MAAM,SAAS,iGAUd,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,sBAAsB;CAAG;AAEpF,QAAA,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Field/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAEL,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,eAAe,EACrB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAQL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC5B,MAAM,UAAU,CAAC;AAoBlB;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,eAAe,EAAE,qBAAqB;CAAG;AAEjF,QAAA,MAAM,SAAS,iGAUd,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,sBAAsB;CAAG;AAEpF,QAAA,MAAM,UAAU,kGA4Bf,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB,EAAE,uBAAuB;CAAG;AAEvF,QAAA,MAAM,WAAW,mGAWhB,CAAC;AAwBF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,sBAAsB;CAAG;AAEpF,QAAA,MAAM,UAAU,kGAcf,CAAC;AAQF,KAAK,sBAAsB,GAAG,OAAO,SAAS,GAAG;IAC/C,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,KAAK,EAAE,OAAO,UAAU,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAIZ,sBAAsB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB,oFAAmE,CAAC;AAElG,eAAO,MAAM,kBAAkB,oFAS7B,CAAC;AAEH,eAAO,MAAM,mBAAmB,oFAAyC,CAAC;AAE1E,eAAO,MAAM,uBAAuB,oFAA4C,CAAC;AAEjF,eAAO,MAAM,kBAAkB,oFAAiD,CAAC;AAEjF,eAAO,MAAM,sBAAsB,oFAA0C,CAAC;AAE9E,eAAO,MAAM,sBAAsB,oFAA2C,CAAC;AAE/E,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC3E,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAC7E,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAC/E,MAAM,MAAM,2BAA2B,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACvF,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAC7E,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACrF,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,IAAI,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7F,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,UAAU,CAAC;AA2BlB,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,YAAY,EAAE,sBAAsB;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,EAAE,EAAE,OAAO,CAAC;IACZ,+CAA+C;IAC/C,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACxC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,IAAI,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7F,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,UAAU,CAAC;AA2BlB,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,YAAY,EAAE,sBAAsB;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,EAAE,EAAE,OAAO,CAAC;IACZ,+CAA+C;IAC/C,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACxC;AAyCD,eAAO,MAAM,UAAU,kGAAiB,CAAC;AAEzC,YAAY,EAAE,sBAAsB,EAAE,CAAC"}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { type VariantProps } from 'class-variance-authority';
|
|
2
2
|
export declare const iconButtonRootVariants: (props?: ({
|
|
3
|
-
variant?: "ghost" | "solid" | null | undefined;
|
|
3
|
+
variant?: "ghost" | "solid" | "tint" | null | undefined;
|
|
4
|
+
color?: "action" | "danger" | "neutral" | null | undefined;
|
|
4
5
|
size?: "small" | "default" | null | undefined;
|
|
5
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
7
|
export declare const iconButtonGlyphVariants: (props?: ({
|
|
7
8
|
size?: "small" | "default" | null | undefined;
|
|
8
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
|
-
export declare const iconButtonIconColorVariants: (props?:
|
|
10
|
+
export declare const iconButtonIconColorVariants: (props?: ({
|
|
11
|
+
variant?: "ghost" | "solid" | "tint" | null | undefined;
|
|
12
|
+
color?: "action" | "danger" | "neutral" | null | undefined;
|
|
13
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
14
|
export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;
|
|
11
15
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,sBAAsB
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,sBAAsB;;;;8EAwIlC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;8EAUlC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;;8EA4BtC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
|
|
@@ -1 +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;;;
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/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;AACrF,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/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;AACrF,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAoDnF,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,6FAQb,CAAC;AAQH,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,sGAQnB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAUf,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,UAAU,kGAwCf,CAAC;AAQF,KAAK,sBAAsB,GAAG,OAAO,SAAS,GAAG;IAC/C,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,KAAK,EAAE,OAAO,UAAU,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,KAAK,EAIZ,sBAAsB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,oFAI5B,CAAC;AAEH,eAAO,MAAM,sBAAsB,oFAoBjC,CAAC;AAEH,eAAO,MAAM,qBAAqB,oFAchC,CAAC;AAEH,eAAO,MAAM,kBAAkB,oFAA2C,CAAC;AAE3E,eAAO,MAAM,kBAAkB;;8EAQ7B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.Header.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Card.Header.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAU1B,wBASE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Card.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA8B1B,wBASE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Checkbox.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAwC1B,wBAOE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Field.Input.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Field.Input.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA4C1B,wBAYE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Field.Select.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Field.Select.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA4C1B,wBAYE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/IconButton.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAiC1B,wBAKE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Input.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAgD1B,wBAOE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Select.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAyC1B,wBASE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/components",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.25",
|
|
4
4
|
"main": "lib/commonjs/index.js",
|
|
5
5
|
"module": "lib/module/index.js",
|
|
6
6
|
"react-native": "src/index.ts",
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"@gorhom/bottom-sheet": "^5.2.6",
|
|
68
68
|
"class-variance-authority": "^0.7.1",
|
|
69
69
|
"uniwind": "1.6.1",
|
|
70
|
-
"@cdx-ui/primitives": "0.0.1-beta.
|
|
71
|
-
"@cdx-ui/utils": "0.0.1-beta.
|
|
72
|
-
"@cdx-ui/icons": "0.0.1-beta.
|
|
70
|
+
"@cdx-ui/primitives": "0.0.1-beta.25",
|
|
71
|
+
"@cdx-ui/utils": "0.0.1-beta.25",
|
|
72
|
+
"@cdx-ui/icons": "0.0.1-beta.25"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@types/react": "*",
|
|
@@ -6,8 +6,9 @@ import {
|
|
|
6
6
|
cardFooterVariants,
|
|
7
7
|
cardHeaderVariants,
|
|
8
8
|
cardRootVariants,
|
|
9
|
-
type CardVariantProps,
|
|
10
9
|
type CardContentVariantProps,
|
|
10
|
+
type CardFooterVariantProps,
|
|
11
|
+
type CardVariantProps,
|
|
11
12
|
} from './styles';
|
|
12
13
|
|
|
13
14
|
// =============================================================================
|
|
@@ -99,14 +100,18 @@ CardContent.displayName = 'Card.Content';
|
|
|
99
100
|
// STYLED FOOTER COMPONENT
|
|
100
101
|
// =============================================================================
|
|
101
102
|
|
|
102
|
-
export interface CardFooterProps extends ViewProps {
|
|
103
|
+
export interface CardFooterProps extends ViewProps, CardFooterVariantProps {
|
|
103
104
|
className?: string;
|
|
104
105
|
children?: ReactNode;
|
|
105
106
|
}
|
|
106
107
|
|
|
107
108
|
const CardFooter = forwardRef<View, CardFooterProps>(
|
|
108
|
-
({ className, children, style, ...props }, ref) => {
|
|
109
|
-
const
|
|
109
|
+
({ className, children, style, fullBleed, ...props }, ref) => {
|
|
110
|
+
const { fullBleed: fullBleedFromContext } = useCardStyleContext();
|
|
111
|
+
const computedClassName = cn(
|
|
112
|
+
cardFooterVariants({ fullBleed: fullBleed ?? fullBleedFromContext }),
|
|
113
|
+
className,
|
|
114
|
+
);
|
|
110
115
|
|
|
111
116
|
return (
|
|
112
117
|
<View ref={ref} className={computedClassName} style={style} {...props}>
|
|
@@ -22,9 +22,10 @@ export const cardRootVariants = cva(
|
|
|
22
22
|
// ── Header ──────────────────────────────────────────────────
|
|
23
23
|
|
|
24
24
|
export const cardHeaderVariants = cva([
|
|
25
|
-
'flex-row items-center justify-between px-5 py-3',
|
|
26
25
|
'border-t-8 border-t-surface-brand-strong',
|
|
27
|
-
'border-b border-
|
|
26
|
+
'border-b border-solid border-b-stroke-secondary',
|
|
27
|
+
'flex-row items-center justify-between gap-0.5',
|
|
28
|
+
'px-5 py-3',
|
|
28
29
|
]);
|
|
29
30
|
|
|
30
31
|
// ── Title ───────────────────────────────────────────────────
|
|
@@ -43,7 +44,18 @@ export const cardContentVariants = cva(['text-content-primary', 'p-5'], {
|
|
|
43
44
|
|
|
44
45
|
// ── Footer ──────────────────────────────────────────────────
|
|
45
46
|
|
|
46
|
-
export const cardFooterVariants = cva(['
|
|
47
|
+
export const cardFooterVariants = cva(['flex-col items-stretch gap-2'], {
|
|
48
|
+
variants: {
|
|
49
|
+
fullBleed: {
|
|
50
|
+
true: 'p-5',
|
|
51
|
+
false: 'px-5 pb-5 pt-0',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
defaultVariants: {
|
|
55
|
+
fullBleed: false,
|
|
56
|
+
},
|
|
57
|
+
});
|
|
47
58
|
|
|
48
59
|
export type CardVariantProps = VariantProps<typeof cardRootVariants>;
|
|
49
60
|
export type CardContentVariantProps = VariantProps<typeof cardContentVariants>;
|
|
61
|
+
export type CardFooterVariantProps = VariantProps<typeof cardFooterVariants>;
|
|
@@ -2,10 +2,9 @@ import { forwardRef, type ReactNode } from 'react';
|
|
|
2
2
|
import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
|
|
3
3
|
import { Check, CheckIndeterminateSmall } from '@cdx-ui/icons';
|
|
4
4
|
import { createCheckbox, type ICheckboxProps } from '@cdx-ui/primitives';
|
|
5
|
-
import { cn
|
|
5
|
+
import { cn } from '@cdx-ui/utils';
|
|
6
6
|
import { Icon, IconProps } from '../Icon';
|
|
7
7
|
import {
|
|
8
|
-
type CheckboxVariantProps,
|
|
9
8
|
checkboxGroupVariants,
|
|
10
9
|
checkboxIconVariants,
|
|
11
10
|
checkboxIndicatorVariants,
|
|
@@ -13,14 +12,8 @@ import {
|
|
|
13
12
|
checkboxRootVariants,
|
|
14
13
|
} from './styles';
|
|
15
14
|
|
|
16
|
-
const SCOPE = 'CHECKBOX';
|
|
17
|
-
|
|
18
|
-
const Root = withStyleContext(Pressable, SCOPE);
|
|
19
|
-
|
|
20
|
-
const useCheckboxStyleContext = () => useStyleContext(SCOPE) as CheckboxVariantProps;
|
|
21
|
-
|
|
22
15
|
const CheckboxPrimitive = createCheckbox({
|
|
23
|
-
Root,
|
|
16
|
+
Root: Pressable,
|
|
24
17
|
Indicator: View,
|
|
25
18
|
Icon: View,
|
|
26
19
|
Label: Text,
|
|
@@ -31,14 +24,14 @@ const CheckboxPrimitive = createCheckbox({
|
|
|
31
24
|
// CHECKBOX ROOT
|
|
32
25
|
// =============================================================================
|
|
33
26
|
|
|
34
|
-
export interface CheckboxProps extends ICheckboxProps
|
|
27
|
+
export interface CheckboxProps extends ICheckboxProps {
|
|
35
28
|
className?: string;
|
|
36
29
|
children?: ReactNode;
|
|
37
30
|
}
|
|
38
31
|
|
|
39
32
|
const CheckboxRoot = forwardRef<View, CheckboxProps>(
|
|
40
|
-
({
|
|
41
|
-
const computedClassName = cn(checkboxRootVariants(
|
|
33
|
+
({ className, isIndeterminate, children, style, ...props }, ref) => {
|
|
34
|
+
const computedClassName = cn(checkboxRootVariants(), className);
|
|
42
35
|
|
|
43
36
|
return (
|
|
44
37
|
<CheckboxPrimitive
|
|
@@ -46,7 +39,6 @@ const CheckboxRoot = forwardRef<View, CheckboxProps>(
|
|
|
46
39
|
className={computedClassName}
|
|
47
40
|
isIndeterminate={isIndeterminate}
|
|
48
41
|
style={style}
|
|
49
|
-
context={{ size }}
|
|
50
42
|
{...props}
|
|
51
43
|
>
|
|
52
44
|
<CheckboxIndicator>
|
|
@@ -73,8 +65,7 @@ export interface CheckboxIndicatorProps extends ViewProps {
|
|
|
73
65
|
|
|
74
66
|
const CheckboxIndicator = forwardRef<View, CheckboxIndicatorProps>(
|
|
75
67
|
({ className, children, style, ...props }, ref) => {
|
|
76
|
-
const
|
|
77
|
-
const computedClassName = cn(checkboxIndicatorVariants({ size }), className);
|
|
68
|
+
const computedClassName = cn(checkboxIndicatorVariants(), className);
|
|
78
69
|
|
|
79
70
|
return (
|
|
80
71
|
<CheckboxPrimitive.Indicator
|
|
@@ -98,8 +89,7 @@ CheckboxIndicator.displayName = 'Checkbox.Indicator';
|
|
|
98
89
|
export interface CheckboxIconProps extends Omit<IconProps, 'children'> {}
|
|
99
90
|
|
|
100
91
|
const CheckboxIcon = ({ className, style, ...props }: CheckboxIconProps) => {
|
|
101
|
-
const
|
|
102
|
-
const computedClassName = cn(checkboxIconVariants({ size }), className);
|
|
92
|
+
const computedClassName = cn(checkboxIconVariants(), className);
|
|
103
93
|
|
|
104
94
|
return <Icon className={computedClassName} style={style} {...props} />;
|
|
105
95
|
};
|
|
@@ -117,8 +107,7 @@ export interface CheckboxLabelProps extends TextProps {
|
|
|
117
107
|
|
|
118
108
|
const CheckboxLabel = forwardRef<Text, CheckboxLabelProps>(
|
|
119
109
|
({ className, children, style, ...props }, ref) => {
|
|
120
|
-
const
|
|
121
|
-
const computedClassName = cn(checkboxLabelVariants({ size }), className);
|
|
110
|
+
const computedClassName = cn(checkboxLabelVariants(), className);
|
|
122
111
|
|
|
123
112
|
return (
|
|
124
113
|
<CheckboxPrimitive.Label
|
|
@@ -1,90 +1,90 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
|
-
import { cva
|
|
3
|
-
import {
|
|
4
|
-
COLOR_TEXT_PRIMARY,
|
|
5
|
-
DISABLED_CURSOR,
|
|
6
|
-
DISABLED_OPACITY,
|
|
7
|
-
TRANSITION_COLORS,
|
|
8
|
-
} from '../../styles/primitives';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { DISABLED_CURSOR, DISABLED_OPACITY, TRANSITION_COLORS } from '../../styles/primitives';
|
|
9
4
|
|
|
10
|
-
export const checkboxRootVariants = cva(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
defaultVariants: {
|
|
20
|
-
size: 'default',
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
);
|
|
5
|
+
export const checkboxRootVariants = cva([
|
|
6
|
+
'flex-row items-center gap-2.5',
|
|
7
|
+
DISABLED_OPACITY,
|
|
8
|
+
DISABLED_CURSOR,
|
|
9
|
+
// Suppress stray outline on the Pressable/label wrapper; focus ring is drawn on Checkbox.Indicator (Radio pattern).
|
|
10
|
+
'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
|
|
11
|
+
]);
|
|
24
12
|
|
|
25
|
-
export const checkboxIndicatorVariants = cva(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
13
|
+
export const checkboxIndicatorVariants = cva([
|
|
14
|
+
'items-center justify-center',
|
|
15
|
+
'h-5 w-5',
|
|
16
|
+
'rounded',
|
|
17
|
+
'border-2 border-solid',
|
|
18
|
+
'data-[disabled=true]:opacity-50',
|
|
19
|
+
// Background — layered by specificity. checked=false acts as an explicit reset so the base bg
|
|
20
|
+
// reasserts when transitioning from checked/indeterminate on native (where absent attributes
|
|
21
|
+
// break data-[attr=false] selectors).
|
|
22
|
+
// IMPORTANT: On native (Uniwind), only the LAST data-[] condition in a compound chain is
|
|
23
|
+
// effectively evaluated. Place the most discriminating condition last to avoid false matches.
|
|
24
|
+
'data-[checked=false]:bg-surface-primary',
|
|
25
|
+
'data-[checked=true]:bg-surface-action-strong',
|
|
26
|
+
'data-[indeterminate=true]:bg-surface-action-strong',
|
|
27
|
+
// Border — invalid (later) beats checked/indeterminate.
|
|
28
|
+
'data-[checked=false]:border-content-secondary',
|
|
29
|
+
'data-[checked=true]:border-stroke-action',
|
|
30
|
+
'data-[indeterminate=true]:border-stroke-action',
|
|
31
|
+
'data-[invalid=true]:border-stroke-danger',
|
|
32
|
+
Platform.select({
|
|
33
|
+
web: [
|
|
34
|
+
// Invalid bg — compound selectors evaluate correctly on web.
|
|
35
|
+
'data-[invalid=true]:data-[checked=true]:bg-surface-danger-strong',
|
|
36
|
+
'data-[invalid=true]:data-[indeterminate=true]:bg-surface-danger-strong',
|
|
37
|
+
TRANSITION_COLORS,
|
|
38
|
+
// Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
|
|
39
|
+
'data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:bg-content-secondary/[0.08]',
|
|
40
|
+
// Hover — unchecked + invalid (overlay uses danger token)
|
|
41
|
+
'data-[hover=true]:data-[invalid=true]:data-[checked=false]:data-[indeterminate=false]:bg-surface-danger-strong/[0.08]',
|
|
42
|
+
// Hover — checked / indeterminate (bg + border darken together)
|
|
43
|
+
'data-[hover=true]:data-[checked=true]:bg-surface-action-strong-hover',
|
|
44
|
+
'data-[hover=true]:data-[checked=true]:border-[--color-surface-action-strong-hover]',
|
|
45
|
+
'data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-hover',
|
|
46
|
+
'data-[hover=true]:data-[indeterminate=true]:border-[--color-surface-action-strong-hover]',
|
|
47
|
+
'data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
|
|
48
|
+
'data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-[--color-surface-danger-strong-hover]',
|
|
49
|
+
'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
|
|
50
|
+
'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-[--color-surface-danger-strong-hover]',
|
|
51
|
+
// Active — CSS :active pseudo-class (web root does not track press via data-active).
|
|
52
|
+
// data-[hover=true] guard ensures active beats hover by specificity (0,3,0 > 0,2,0).
|
|
53
|
+
'web:active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active',
|
|
54
|
+
'web:active:data-[hover=true]:data-[checked=true]:border-[--color-surface-action-strong-active]',
|
|
55
|
+
'web:active:data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-active',
|
|
56
|
+
'web:active:data-[hover=true]:data-[indeterminate=true]:border-[--color-surface-action-strong-active]',
|
|
57
|
+
'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active',
|
|
58
|
+
'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-[--color-surface-danger-strong-active]',
|
|
59
|
+
'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-active',
|
|
60
|
+
'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-[--color-surface-danger-strong-active]',
|
|
61
|
+
// Focus ring
|
|
62
|
+
'web:data-[focus-visible=true]:outline-none',
|
|
63
|
+
'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-ring] web:data-[focus-visible=true]:ring-offset-2',
|
|
64
|
+
].join(' '),
|
|
65
|
+
default: [
|
|
66
|
+
// Invalid bg is NOT styled on native. Compound data-[] selectors cannot express
|
|
67
|
+
// "invalid AND checked" without false-matching other states (Uniwind only evaluates
|
|
68
|
+
// the last condition). Invalid state is communicated via border-stroke-danger (single
|
|
69
|
+
// condition, always correct). The fill stays action-strong for checked/indeterminate.
|
|
70
|
+
//
|
|
71
|
+
// Active — native tracks press via data-[active] from usePress.
|
|
72
|
+
// Place data-[active=true] last so the rule only fires during press.
|
|
73
|
+
// 'data-[checked=false]:data-[invalid=true]:bg-transparent',
|
|
74
|
+
'data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong',
|
|
75
|
+
'data-[checked=true]:data-[active=true]:bg-surface-action-strong-active',
|
|
76
|
+
'data-[checked=true]:data-[active=true]:data-[invalid=true]:bg-surface-danger-strong-active',
|
|
77
|
+
'data-[indeterminate=true]:data-[active=true]:bg-surface-action-strong-active',
|
|
78
|
+
].join(' '),
|
|
79
|
+
}),
|
|
80
|
+
]);
|
|
61
81
|
|
|
62
|
-
export const checkboxIconVariants = cva(['text-white'
|
|
63
|
-
variants: {
|
|
64
|
-
size: {
|
|
65
|
-
small: 'h-3 w-3',
|
|
66
|
-
default: 'h-3.5 w-3.5',
|
|
67
|
-
},
|
|
68
|
-
},
|
|
69
|
-
defaultVariants: {
|
|
70
|
-
size: 'default',
|
|
71
|
-
},
|
|
72
|
-
});
|
|
82
|
+
export const checkboxIconVariants = cva(['text-white', 'h-5 w-5']);
|
|
73
83
|
|
|
74
|
-
export const checkboxLabelVariants = cva(
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
size: {
|
|
79
|
-
small: 'text-sm',
|
|
80
|
-
default: 'text-base',
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
defaultVariants: {
|
|
84
|
-
size: 'default',
|
|
85
|
-
},
|
|
86
|
-
},
|
|
87
|
-
);
|
|
84
|
+
export const checkboxLabelVariants = cva([
|
|
85
|
+
'text-content-primary text-base',
|
|
86
|
+
'data-[disabled=true]:text-content-tertiary',
|
|
87
|
+
]);
|
|
88
88
|
|
|
89
89
|
export const checkboxGroupVariants = cva([], {
|
|
90
90
|
variants: {
|
|
@@ -97,5 +97,3 @@ export const checkboxGroupVariants = cva([], {
|
|
|
97
97
|
direction: 'column',
|
|
98
98
|
},
|
|
99
99
|
});
|
|
100
|
-
|
|
101
|
-
export type CheckboxVariantProps = VariantProps<typeof checkboxRootVariants>;
|