@korsolutions/ui 0.0.35 → 0.0.37
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/dist/module/components/checkbox/checkbox.js +36 -0
- package/dist/module/components/checkbox/checkbox.js.map +1 -0
- package/dist/module/components/checkbox/index.js +5 -0
- package/dist/module/components/checkbox/index.js.map +1 -0
- package/dist/module/components/checkbox/variants/default.js +70 -0
- package/dist/module/components/checkbox/variants/default.js.map +1 -0
- package/dist/module/components/checkbox/variants/index.js +9 -0
- package/dist/module/components/checkbox/variants/index.js.map +1 -0
- package/dist/module/components/checkbox/variants/outlined.js +85 -0
- package/dist/module/components/checkbox/variants/outlined.js.map +1 -0
- package/dist/module/components/index.js +1 -0
- package/dist/module/components/index.js.map +1 -1
- package/dist/module/primitives/checkbox/checkbox-context.js +12 -0
- package/dist/module/primitives/checkbox/checkbox-context.js.map +1 -0
- package/dist/module/primitives/checkbox/checkbox-description.js +24 -0
- package/dist/module/primitives/checkbox/checkbox-description.js.map +1 -0
- package/dist/module/primitives/checkbox/checkbox-indicator.js +38 -0
- package/dist/module/primitives/checkbox/checkbox-indicator.js.map +1 -0
- package/dist/module/primitives/checkbox/checkbox-root.js +56 -0
- package/dist/module/primitives/checkbox/checkbox-root.js.map +1 -0
- package/dist/module/primitives/checkbox/checkbox-title.js +24 -0
- package/dist/module/primitives/checkbox/checkbox-title.js.map +1 -0
- package/dist/module/primitives/checkbox/index.js +14 -0
- package/dist/module/primitives/checkbox/index.js.map +1 -0
- package/dist/module/primitives/checkbox/types.js +4 -0
- package/dist/module/primitives/checkbox/types.js.map +1 -0
- package/dist/module/primitives/index.js +1 -0
- package/dist/module/primitives/index.js.map +1 -1
- package/dist/typescript/src/components/checkbox/checkbox.d.ts +13 -0
- package/dist/typescript/src/components/checkbox/checkbox.d.ts.map +1 -0
- package/dist/typescript/src/components/checkbox/index.d.ts +3 -0
- package/dist/typescript/src/components/checkbox/index.d.ts.map +1 -0
- package/dist/typescript/src/components/checkbox/variants/default.d.ts +3 -0
- package/dist/typescript/src/components/checkbox/variants/default.d.ts.map +1 -0
- package/dist/typescript/src/components/checkbox/variants/index.d.ts +5 -0
- package/dist/typescript/src/components/checkbox/variants/index.d.ts.map +1 -0
- package/dist/typescript/src/components/checkbox/variants/outlined.d.ts +3 -0
- package/dist/typescript/src/components/checkbox/variants/outlined.d.ts.map +1 -0
- package/dist/typescript/src/components/index.d.ts +1 -0
- package/dist/typescript/src/components/index.d.ts.map +1 -1
- package/dist/typescript/src/primitives/checkbox/checkbox-context.d.ts +11 -0
- package/dist/typescript/src/primitives/checkbox/checkbox-context.d.ts.map +1 -0
- package/dist/typescript/src/primitives/checkbox/checkbox-description.d.ts +8 -0
- package/dist/typescript/src/primitives/checkbox/checkbox-description.d.ts.map +1 -0
- package/dist/typescript/src/primitives/checkbox/checkbox-indicator.d.ts +7 -0
- package/dist/typescript/src/primitives/checkbox/checkbox-indicator.d.ts.map +1 -0
- package/dist/typescript/src/primitives/checkbox/checkbox-root.d.ts +13 -0
- package/dist/typescript/src/primitives/checkbox/checkbox-root.d.ts.map +1 -0
- package/dist/typescript/src/primitives/checkbox/checkbox-title.d.ts +8 -0
- package/dist/typescript/src/primitives/checkbox/checkbox-title.d.ts.map +1 -0
- package/dist/typescript/src/primitives/checkbox/index.d.ts +16 -0
- package/dist/typescript/src/primitives/checkbox/index.d.ts.map +1 -0
- package/dist/typescript/src/primitives/checkbox/types.d.ts +10 -0
- package/dist/typescript/src/primitives/checkbox/types.d.ts.map +1 -0
- package/dist/typescript/src/primitives/index.d.ts +1 -0
- package/dist/typescript/src/primitives/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/checkbox/checkbox.tsx +32 -0
- package/src/components/checkbox/index.ts +2 -0
- package/src/components/checkbox/variants/default.tsx +66 -0
- package/src/components/checkbox/variants/index.ts +7 -0
- package/src/components/checkbox/variants/outlined.tsx +82 -0
- package/src/components/index.ts +1 -0
- package/src/primitives/checkbox/checkbox-context.tsx +19 -0
- package/src/primitives/checkbox/checkbox-description.tsx +21 -0
- package/src/primitives/checkbox/checkbox-indicator.tsx +34 -0
- package/src/primitives/checkbox/checkbox-root.tsx +65 -0
- package/src/primitives/checkbox/checkbox-title.tsx +21 -0
- package/src/primitives/checkbox/index.ts +17 -0
- package/src/primitives/checkbox/types.ts +11 -0
- package/src/primitives/index.ts +1 -0
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { CheckboxPrimitive } from "../../primitives/index.js";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { View } from "react-native";
|
|
6
|
+
import { CheckboxVariants } from "./variants/index.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
export function Checkbox(props) {
|
|
9
|
+
const {
|
|
10
|
+
value,
|
|
11
|
+
onChange,
|
|
12
|
+
title,
|
|
13
|
+
description,
|
|
14
|
+
isDisabled,
|
|
15
|
+
variant = "default"
|
|
16
|
+
} = props;
|
|
17
|
+
const useVariantStyles = CheckboxVariants[variant];
|
|
18
|
+
const variantStyles = useVariantStyles();
|
|
19
|
+
return /*#__PURE__*/_jsxs(CheckboxPrimitive.Root, {
|
|
20
|
+
value: value,
|
|
21
|
+
onChange: onChange,
|
|
22
|
+
isDisabled: isDisabled,
|
|
23
|
+
styles: variantStyles,
|
|
24
|
+
children: [/*#__PURE__*/_jsx(CheckboxPrimitive.Indicator, {}), (title || description) && /*#__PURE__*/_jsxs(View, {
|
|
25
|
+
style: {
|
|
26
|
+
flex: 1
|
|
27
|
+
},
|
|
28
|
+
children: [title && /*#__PURE__*/_jsx(CheckboxPrimitive.Title, {
|
|
29
|
+
children: title
|
|
30
|
+
}), description && /*#__PURE__*/_jsx(CheckboxPrimitive.Description, {
|
|
31
|
+
children: description
|
|
32
|
+
})]
|
|
33
|
+
})]
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["CheckboxPrimitive","React","View","CheckboxVariants","jsx","_jsx","jsxs","_jsxs","Checkbox","props","value","onChange","title","description","isDisabled","variant","useVariantStyles","variantStyles","Root","styles","children","Indicator","style","flex","Title","Description"],"sourceRoot":"../../../../src","sources":["components/checkbox/checkbox.tsx"],"mappings":";;AAAA,SAASA,iBAAiB;AAC1B,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,gBAAgB;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW9C,OAAO,SAASC,QAAQA,CAACC,KAAoB,EAAE;EAC7C,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,WAAW;IAAEC,UAAU;IAAEC,OAAO,GAAG;EAAU,CAAC,GAAGN,KAAK;EAEtF,MAAMO,gBAAgB,GAAGb,gBAAgB,CAACY,OAAO,CAAC;EAClD,MAAME,aAAa,GAAGD,gBAAgB,CAAC,CAAC;EAExC,oBACET,KAAA,CAACP,iBAAiB,CAACkB,IAAI;IAACR,KAAK,EAAEA,KAAM;IAACC,QAAQ,EAAEA,QAAS;IAACG,UAAU,EAAEA,UAAW;IAACK,MAAM,EAAEF,aAAc;IAAAG,QAAA,gBACtGf,IAAA,CAACL,iBAAiB,CAACqB,SAAS,IAAE,CAAC,EAC9B,CAACT,KAAK,IAAIC,WAAW,kBACpBN,KAAA,CAACL,IAAI;MAACoB,KAAK,EAAE;QAAEC,IAAI,EAAE;MAAE,CAAE;MAAAH,QAAA,GACtBR,KAAK,iBAAIP,IAAA,CAACL,iBAAiB,CAACwB,KAAK;QAAAJ,QAAA,EAAER;MAAK,CAA0B,CAAC,EACnEC,WAAW,iBAAIR,IAAA,CAACL,iBAAiB,CAACyB,WAAW;QAAAL,QAAA,EAAEP;MAAW,CAAgC,CAAC;IAAA,CACxF,CACP;EAAA,CACqB,CAAC;AAE7B","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Checkbox","CheckboxVariants"],"sourceRoot":"../../../../src","sources":["components/checkbox/index.ts"],"mappings":";;AAAA,SAASA,QAAQ;AACjB,SAASC,gBAAgB","ignoreList":[]}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useThemedStyles } from "../../../utils/use-themed-styles.js";
|
|
4
|
+
export const useCheckboxVariantDefault = () => {
|
|
5
|
+
return useThemedStyles(({
|
|
6
|
+
colors,
|
|
7
|
+
radius,
|
|
8
|
+
fontFamily,
|
|
9
|
+
fontSize
|
|
10
|
+
}) => ({
|
|
11
|
+
root: {
|
|
12
|
+
default: {
|
|
13
|
+
flexDirection: "row",
|
|
14
|
+
alignItems: "flex-start",
|
|
15
|
+
gap: 12
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
indicator: {
|
|
19
|
+
default: {
|
|
20
|
+
width: 20,
|
|
21
|
+
height: 20,
|
|
22
|
+
borderRadius: radius / 2,
|
|
23
|
+
borderWidth: 2,
|
|
24
|
+
borderColor: colors.border,
|
|
25
|
+
backgroundColor: colors.background,
|
|
26
|
+
marginTop: 2,
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
justifyContent: "center"
|
|
29
|
+
},
|
|
30
|
+
checked: {
|
|
31
|
+
backgroundColor: colors.primary,
|
|
32
|
+
borderColor: colors.primary
|
|
33
|
+
},
|
|
34
|
+
disabled: {
|
|
35
|
+
opacity: 0.5
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
checkmark: {
|
|
39
|
+
default: {
|
|
40
|
+
color: colors.primaryForeground,
|
|
41
|
+
fontSize: 14,
|
|
42
|
+
fontWeight: "bold",
|
|
43
|
+
lineHeight: 16
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
title: {
|
|
47
|
+
default: {
|
|
48
|
+
color: colors.foreground,
|
|
49
|
+
fontSize,
|
|
50
|
+
fontFamily,
|
|
51
|
+
fontWeight: "500"
|
|
52
|
+
},
|
|
53
|
+
disabled: {
|
|
54
|
+
color: colors.mutedForeground
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
description: {
|
|
58
|
+
default: {
|
|
59
|
+
color: colors.mutedForeground,
|
|
60
|
+
fontSize: fontSize * 0.875,
|
|
61
|
+
fontFamily,
|
|
62
|
+
marginTop: 2
|
|
63
|
+
},
|
|
64
|
+
disabled: {
|
|
65
|
+
opacity: 0.7
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}));
|
|
69
|
+
};
|
|
70
|
+
//# sourceMappingURL=default.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useThemedStyles","useCheckboxVariantDefault","colors","radius","fontFamily","fontSize","root","default","flexDirection","alignItems","gap","indicator","width","height","borderRadius","borderWidth","borderColor","border","backgroundColor","background","marginTop","justifyContent","checked","primary","disabled","opacity","checkmark","color","primaryForeground","fontWeight","lineHeight","title","foreground","mutedForeground","description"],"sourceRoot":"../../../../../src","sources":["components/checkbox/variants/default.tsx"],"mappings":";;AACA,SAASA,eAAe;AAExB,OAAO,MAAMC,yBAAyB,GAAGA,CAAA,KAAsB;EAC7D,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAsB;IAC7DC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,aAAa,EAAE,KAAK;QACpBC,UAAU,EAAE,YAAY;QACxBC,GAAG,EAAE;MACP;IACF,CAAC;IACDC,SAAS,EAAE;MACTJ,OAAO,EAAE;QACPK,KAAK,EAAE,EAAE;QACTC,MAAM,EAAE,EAAE;QACVC,YAAY,EAAEX,MAAM,GAAG,CAAC;QACxBY,WAAW,EAAE,CAAC;QACdC,WAAW,EAAEd,MAAM,CAACe,MAAM;QAC1BC,eAAe,EAAEhB,MAAM,CAACiB,UAAU;QAClCC,SAAS,EAAE,CAAC;QACZX,UAAU,EAAE,QAAQ;QACpBY,cAAc,EAAE;MAClB,CAAC;MACDC,OAAO,EAAE;QACPJ,eAAe,EAAEhB,MAAM,CAACqB,OAAO;QAC/BP,WAAW,EAAEd,MAAM,CAACqB;MACtB,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF,CAAC;IACDC,SAAS,EAAE;MACTnB,OAAO,EAAE;QACPoB,KAAK,EAAEzB,MAAM,CAAC0B,iBAAiB;QAC/BvB,QAAQ,EAAE,EAAE;QACZwB,UAAU,EAAE,MAAM;QAClBC,UAAU,EAAE;MACd;IACF,CAAC;IACDC,KAAK,EAAE;MACLxB,OAAO,EAAE;QACPoB,KAAK,EAAEzB,MAAM,CAAC8B,UAAU;QACxB3B,QAAQ;QACRD,UAAU;QACVyB,UAAU,EAAE;MACd,CAAC;MACDL,QAAQ,EAAE;QACRG,KAAK,EAAEzB,MAAM,CAAC+B;MAChB;IACF,CAAC;IACDC,WAAW,EAAE;MACX3B,OAAO,EAAE;QACPoB,KAAK,EAAEzB,MAAM,CAAC+B,eAAe;QAC7B5B,QAAQ,EAAEA,QAAQ,GAAG,KAAK;QAC1BD,UAAU;QACVgB,SAAS,EAAE;MACb,CAAC;MACDI,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useCheckboxVariantDefault } from "./default.js";
|
|
4
|
+
import { useCheckboxVariantOutlined } from "./outlined.js";
|
|
5
|
+
export const CheckboxVariants = {
|
|
6
|
+
default: useCheckboxVariantDefault,
|
|
7
|
+
outlined: useCheckboxVariantOutlined
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCheckboxVariantDefault","useCheckboxVariantOutlined","CheckboxVariants","default","outlined"],"sourceRoot":"../../../../../src","sources":["components/checkbox/variants/index.ts"],"mappings":";;AAAA,SAASA,yBAAyB;AAClC,SAASC,0BAA0B;AAEnC,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,OAAO,EAAEH,yBAAyB;EAClCI,QAAQ,EAAEH;AACZ,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useThemedStyles } from "../../../utils/use-themed-styles.js";
|
|
4
|
+
export const useCheckboxVariantOutlined = () => {
|
|
5
|
+
return useThemedStyles(({
|
|
6
|
+
colors,
|
|
7
|
+
radius,
|
|
8
|
+
fontFamily,
|
|
9
|
+
fontSize
|
|
10
|
+
}) => ({
|
|
11
|
+
root: {
|
|
12
|
+
default: {
|
|
13
|
+
flexDirection: "row",
|
|
14
|
+
alignItems: "flex-start",
|
|
15
|
+
gap: 12,
|
|
16
|
+
borderWidth: 1,
|
|
17
|
+
borderColor: colors.border,
|
|
18
|
+
borderRadius: radius,
|
|
19
|
+
padding: 16,
|
|
20
|
+
backgroundColor: colors.background
|
|
21
|
+
},
|
|
22
|
+
hovered: {
|
|
23
|
+
backgroundColor: colors.muted,
|
|
24
|
+
borderColor: colors.primary
|
|
25
|
+
},
|
|
26
|
+
checked: {
|
|
27
|
+
borderColor: colors.primary
|
|
28
|
+
},
|
|
29
|
+
disabled: {
|
|
30
|
+
opacity: 0.5
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
indicator: {
|
|
34
|
+
default: {
|
|
35
|
+
width: 20,
|
|
36
|
+
height: 20,
|
|
37
|
+
borderRadius: radius / 2,
|
|
38
|
+
borderWidth: 2,
|
|
39
|
+
borderColor: colors.border,
|
|
40
|
+
backgroundColor: colors.background,
|
|
41
|
+
marginTop: 2,
|
|
42
|
+
alignItems: "center",
|
|
43
|
+
justifyContent: "center"
|
|
44
|
+
},
|
|
45
|
+
checked: {
|
|
46
|
+
backgroundColor: colors.primary,
|
|
47
|
+
borderColor: colors.primary
|
|
48
|
+
},
|
|
49
|
+
disabled: {
|
|
50
|
+
opacity: 0.5
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
checkmark: {
|
|
54
|
+
default: {
|
|
55
|
+
color: colors.primaryForeground,
|
|
56
|
+
fontSize: 14,
|
|
57
|
+
fontWeight: "bold",
|
|
58
|
+
lineHeight: 16
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
title: {
|
|
62
|
+
default: {
|
|
63
|
+
color: colors.foreground,
|
|
64
|
+
fontSize,
|
|
65
|
+
fontFamily,
|
|
66
|
+
fontWeight: "500"
|
|
67
|
+
},
|
|
68
|
+
disabled: {
|
|
69
|
+
color: colors.mutedForeground
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
description: {
|
|
73
|
+
default: {
|
|
74
|
+
color: colors.mutedForeground,
|
|
75
|
+
fontSize: fontSize * 0.875,
|
|
76
|
+
fontFamily,
|
|
77
|
+
marginTop: 2
|
|
78
|
+
},
|
|
79
|
+
disabled: {
|
|
80
|
+
opacity: 0.7
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}));
|
|
84
|
+
};
|
|
85
|
+
//# sourceMappingURL=outlined.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useThemedStyles","useCheckboxVariantOutlined","colors","radius","fontFamily","fontSize","root","default","flexDirection","alignItems","gap","borderWidth","borderColor","border","borderRadius","padding","backgroundColor","background","hovered","muted","primary","checked","disabled","opacity","indicator","width","height","marginTop","justifyContent","checkmark","color","primaryForeground","fontWeight","lineHeight","title","foreground","mutedForeground","description"],"sourceRoot":"../../../../../src","sources":["components/checkbox/variants/outlined.tsx"],"mappings":";;AACA,SAASA,eAAe;AAExB,OAAO,MAAMC,0BAA0B,GAAGA,CAAA,KAAsB;EAC9D,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAsB;IAC7DC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,aAAa,EAAE,KAAK;QACpBC,UAAU,EAAE,YAAY;QACxBC,GAAG,EAAE,EAAE;QACPC,WAAW,EAAE,CAAC;QACdC,WAAW,EAAEV,MAAM,CAACW,MAAM;QAC1BC,YAAY,EAAEX,MAAM;QACpBY,OAAO,EAAE,EAAE;QACXC,eAAe,EAAEd,MAAM,CAACe;MAC1B,CAAC;MACDC,OAAO,EAAE;QACPF,eAAe,EAAEd,MAAM,CAACiB,KAAK;QAC7BP,WAAW,EAAEV,MAAM,CAACkB;MACtB,CAAC;MACDC,OAAO,EAAE;QACPT,WAAW,EAAEV,MAAM,CAACkB;MACtB,CAAC;MACDE,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF,CAAC;IACDC,SAAS,EAAE;MACTjB,OAAO,EAAE;QACPkB,KAAK,EAAE,EAAE;QACTC,MAAM,EAAE,EAAE;QACVZ,YAAY,EAAEX,MAAM,GAAG,CAAC;QACxBQ,WAAW,EAAE,CAAC;QACdC,WAAW,EAAEV,MAAM,CAACW,MAAM;QAC1BG,eAAe,EAAEd,MAAM,CAACe,UAAU;QAClCU,SAAS,EAAE,CAAC;QACZlB,UAAU,EAAE,QAAQ;QACpBmB,cAAc,EAAE;MAClB,CAAC;MACDP,OAAO,EAAE;QACPL,eAAe,EAAEd,MAAM,CAACkB,OAAO;QAC/BR,WAAW,EAAEV,MAAM,CAACkB;MACtB,CAAC;MAEDE,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF,CAAC;IACDM,SAAS,EAAE;MACTtB,OAAO,EAAE;QACPuB,KAAK,EAAE5B,MAAM,CAAC6B,iBAAiB;QAC/B1B,QAAQ,EAAE,EAAE;QACZ2B,UAAU,EAAE,MAAM;QAClBC,UAAU,EAAE;MACd;IACF,CAAC;IACDC,KAAK,EAAE;MACL3B,OAAO,EAAE;QACPuB,KAAK,EAAE5B,MAAM,CAACiC,UAAU;QACxB9B,QAAQ;QACRD,UAAU;QACV4B,UAAU,EAAE;MACd,CAAC;MACDV,QAAQ,EAAE;QACRQ,KAAK,EAAE5B,MAAM,CAACkC;MAChB;IACF,CAAC;IACDC,WAAW,EAAE;MACX9B,OAAO,EAAE;QACPuB,KAAK,EAAE5B,MAAM,CAACkC,eAAe;QAC7B/B,QAAQ,EAAEA,QAAQ,GAAG,KAAK;QAC1BD,UAAU;QACVuB,SAAS,EAAE;MACb,CAAC;MACDL,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
export const CheckboxPrimitiveContext = /*#__PURE__*/React.createContext(null);
|
|
5
|
+
export const useCheckboxContext = () => {
|
|
6
|
+
const context = React.useContext(CheckboxPrimitiveContext);
|
|
7
|
+
if (!context) {
|
|
8
|
+
throw new Error("Checkbox compound components must be used within CheckboxPrimitive.Root");
|
|
9
|
+
}
|
|
10
|
+
return context;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=checkbox-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","CheckboxPrimitiveContext","createContext","useCheckboxContext","context","useContext","Error"],"sourceRoot":"../../../../src","sources":["primitives/checkbox/checkbox-context.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAUzB,OAAO,MAAMC,wBAAwB,gBAAGD,KAAK,CAACE,aAAa,CAAuC,IAAI,CAAC;AAEvG,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAMC,OAAO,GAAGJ,KAAK,CAACK,UAAU,CAACJ,wBAAwB,CAAC;EAC1D,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CAAC,yEAAyE,CAAC;EAC5F;EACA,OAAOF,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { Text } from "react-native";
|
|
5
|
+
import { useCheckboxContext } from "./checkbox-context.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export function CheckboxDescription(props) {
|
|
8
|
+
const {
|
|
9
|
+
children,
|
|
10
|
+
style,
|
|
11
|
+
...textProps
|
|
12
|
+
} = props;
|
|
13
|
+
const {
|
|
14
|
+
state,
|
|
15
|
+
styles
|
|
16
|
+
} = useCheckboxContext();
|
|
17
|
+
const calculatedStyle = [styles?.description?.default, styles?.description?.[state], style];
|
|
18
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
19
|
+
...textProps,
|
|
20
|
+
style: calculatedStyle,
|
|
21
|
+
children: children
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=checkbox-description.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Text","useCheckboxContext","jsx","_jsx","CheckboxDescription","props","children","style","textProps","state","styles","calculatedStyle","description","default"],"sourceRoot":"../../../../src","sources":["primitives/checkbox/checkbox-description.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwD,cAAc;AACnF,SAASC,kBAAkB;AAA6B,SAAAC,GAAA,IAAAC,IAAA;AAOxD,OAAO,SAASC,mBAAmBA,CAACC,KAAwC,EAAE;EAC5E,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EAC/C,MAAM;IAAEI,KAAK;IAAEC;EAAO,CAAC,GAAGT,kBAAkB,CAAC,CAAC;EAE9C,MAAMU,eAAe,GAAG,CAACD,MAAM,EAAEE,WAAW,EAAEC,OAAO,EAAEH,MAAM,EAAEE,WAAW,GAAGH,KAAK,CAAC,EAAEF,KAAK,CAAC;EAE3F,oBACEJ,IAAA,CAACH,IAAI;IAAA,GAAKQ,SAAS;IAAED,KAAK,EAAEI,eAAgB;IAAAL,QAAA,EACzCA;EAAQ,CACL,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { Text, View } from "react-native";
|
|
5
|
+
import { useCheckboxContext } from "./checkbox-context.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const calculateState = (rootState, checked) => {
|
|
8
|
+
if (rootState === "disabled") {
|
|
9
|
+
return "disabled";
|
|
10
|
+
}
|
|
11
|
+
if (checked) {
|
|
12
|
+
return "checked";
|
|
13
|
+
}
|
|
14
|
+
return rootState;
|
|
15
|
+
};
|
|
16
|
+
export function CheckboxIndicator(props) {
|
|
17
|
+
const {
|
|
18
|
+
style,
|
|
19
|
+
...viewProps
|
|
20
|
+
} = props;
|
|
21
|
+
const {
|
|
22
|
+
value,
|
|
23
|
+
state,
|
|
24
|
+
styles
|
|
25
|
+
} = useCheckboxContext();
|
|
26
|
+
const indicatorState = calculateState(state, value);
|
|
27
|
+
const calculatedStyle = [styles?.indicator?.default, styles?.indicator?.[indicatorState], style];
|
|
28
|
+
const checkmarkStyle = [styles?.checkmark?.default, styles?.checkmark?.[indicatorState]];
|
|
29
|
+
return /*#__PURE__*/_jsx(View, {
|
|
30
|
+
...viewProps,
|
|
31
|
+
style: calculatedStyle,
|
|
32
|
+
children: value && /*#__PURE__*/_jsx(Text, {
|
|
33
|
+
style: checkmarkStyle,
|
|
34
|
+
children: "\u2713"
|
|
35
|
+
})
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=checkbox-indicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Text","View","useCheckboxContext","jsx","_jsx","calculateState","rootState","checked","CheckboxIndicator","props","style","viewProps","value","state","styles","indicatorState","calculatedStyle","indicator","default","checkmarkStyle","checkmark","children"],"sourceRoot":"../../../../src","sources":["primitives/checkbox/checkbox-indicator.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAwD,cAAc;AACzF,SAASC,kBAAkB;AAA6B,SAAAC,GAAA,IAAAC,IAAA;AAOxD,MAAMC,cAAc,GAAGA,CAACC,SAAwB,EAAEC,OAAgB,KAAoB;EACpF,IAAID,SAAS,KAAK,UAAU,EAAE;IAC5B,OAAO,UAAU;EACnB;EACA,IAAIC,OAAO,EAAE;IACX,OAAO,SAAS;EAClB;EACA,OAAOD,SAAS;AAClB,CAAC;AAED,OAAO,SAASE,iBAAiBA,CAACC,KAAsC,EAAE;EACxE,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EACrC,MAAM;IAAEG,KAAK;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGZ,kBAAkB,CAAC,CAAC;EAErD,MAAMa,cAAc,GAAGV,cAAc,CAACQ,KAAK,EAAED,KAAK,CAAC;EAEnD,MAAMI,eAAe,GAAG,CAACF,MAAM,EAAEG,SAAS,EAAEC,OAAO,EAAEJ,MAAM,EAAEG,SAAS,GAAGF,cAAc,CAAC,EAAEL,KAAK,CAAC;EAChG,MAAMS,cAAc,GAAG,CAACL,MAAM,EAAEM,SAAS,EAAEF,OAAO,EAAEJ,MAAM,EAAEM,SAAS,GAAGL,cAAc,CAAC,CAAC;EAExF,oBACEX,IAAA,CAACH,IAAI;IAAA,GAAKU,SAAS;IAAED,KAAK,EAAEM,eAAgB;IAAAK,QAAA,EACzCT,KAAK,iBAAIR,IAAA,CAACJ,IAAI;MAACU,KAAK,EAAES,cAAe;MAAAE,QAAA,EAAC;IAAC,CAAM;EAAC,CAC3C,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { useState } from "react";
|
|
4
|
+
import { Pressable } from "react-native";
|
|
5
|
+
import { CheckboxPrimitiveContext } from "./checkbox-context.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const calculateState = (value, isDisabled, isHovered) => {
|
|
8
|
+
if (isDisabled) {
|
|
9
|
+
return "disabled";
|
|
10
|
+
}
|
|
11
|
+
if (isHovered) {
|
|
12
|
+
return "hovered";
|
|
13
|
+
}
|
|
14
|
+
if (value) {
|
|
15
|
+
return "checked";
|
|
16
|
+
}
|
|
17
|
+
return "default";
|
|
18
|
+
};
|
|
19
|
+
export function CheckboxRoot(props) {
|
|
20
|
+
const {
|
|
21
|
+
children,
|
|
22
|
+
value,
|
|
23
|
+
onChange,
|
|
24
|
+
isDisabled,
|
|
25
|
+
style,
|
|
26
|
+
styles,
|
|
27
|
+
...pressableProps
|
|
28
|
+
} = props;
|
|
29
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
30
|
+
const state = calculateState(value, isDisabled, isHovered);
|
|
31
|
+
const handlePress = () => {
|
|
32
|
+
if (!isDisabled) {
|
|
33
|
+
onChange(!value);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
const calculatedStyle = [styles?.root?.default, styles?.root?.[state], style];
|
|
37
|
+
const contextValue = React.useMemo(() => ({
|
|
38
|
+
value,
|
|
39
|
+
isDisabled,
|
|
40
|
+
state,
|
|
41
|
+
styles
|
|
42
|
+
}), [value, isDisabled, state, styles]);
|
|
43
|
+
return /*#__PURE__*/_jsx(CheckboxPrimitiveContext.Provider, {
|
|
44
|
+
value: contextValue,
|
|
45
|
+
children: /*#__PURE__*/_jsx(Pressable, {
|
|
46
|
+
...pressableProps,
|
|
47
|
+
disabled: isDisabled,
|
|
48
|
+
onPress: handlePress,
|
|
49
|
+
onHoverIn: () => setIsHovered(true),
|
|
50
|
+
onHoverOut: () => setIsHovered(false),
|
|
51
|
+
style: calculatedStyle,
|
|
52
|
+
children: children
|
|
53
|
+
})
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
//# sourceMappingURL=checkbox-root.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useState","Pressable","CheckboxPrimitiveContext","jsx","_jsx","calculateState","value","isDisabled","isHovered","CheckboxRoot","props","children","onChange","style","styles","pressableProps","setIsHovered","state","handlePress","calculatedStyle","root","default","contextValue","useMemo","Provider","disabled","onPress","onHoverIn","onHoverOut"],"sourceRoot":"../../../../src","sources":["primitives/checkbox/checkbox-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAA6D,cAAc;AAC7F,SAASC,wBAAwB;AAA6B,SAAAC,GAAA,IAAAC,IAAA;AAY9D,MAAMC,cAAc,GAAGA,CAACC,KAAc,EAAEC,UAA+B,EAAEC,SAAkB,KAAoB;EAC7G,IAAID,UAAU,EAAE;IACd,OAAO,UAAU;EACnB;EACA,IAAIC,SAAS,EAAE;IACb,OAAO,SAAS;EAClB;EACA,IAAIF,KAAK,EAAE;IACT,OAAO,SAAS;EAClB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASG,YAAYA,CAACC,KAAiC,EAAE;EAC9D,MAAM;IAAEC,QAAQ;IAAEL,KAAK;IAAEM,QAAQ;IAAEL,UAAU;IAAEM,KAAK;IAAEC,MAAM;IAAE,GAAGC;EAAe,CAAC,GAAGL,KAAK;EACzF,MAAM,CAACF,SAAS,EAAEQ,YAAY,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMiB,KAAK,GAAGZ,cAAc,CAACC,KAAK,EAAEC,UAAU,EAAEC,SAAS,CAAC;EAC1D,MAAMU,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAI,CAACX,UAAU,EAAE;MACfK,QAAQ,CAAC,CAACN,KAAK,CAAC;IAClB;EACF,CAAC;EAED,MAAMa,eAAe,GAAG,CAACL,MAAM,EAAEM,IAAI,EAAEC,OAAO,EAAEP,MAAM,EAAEM,IAAI,GAAGH,KAAK,CAAC,EAAEJ,KAAK,CAAC;EAE7E,MAAMS,YAAY,GAAGvB,KAAK,CAACwB,OAAO,CAChC,OAAO;IACLjB,KAAK;IACLC,UAAU;IACVU,KAAK;IACLH;EACF,CAAC,CAAC,EACF,CAACR,KAAK,EAAEC,UAAU,EAAEU,KAAK,EAAEH,MAAM,CACnC,CAAC;EAED,oBACEV,IAAA,CAACF,wBAAwB,CAACsB,QAAQ;IAAClB,KAAK,EAAEgB,YAAa;IAAAX,QAAA,eACrDP,IAAA,CAACH,SAAS;MAAA,GACJc,cAAc;MAClBU,QAAQ,EAAElB,UAAW;MACrBmB,OAAO,EAAER,WAAY;MACrBS,SAAS,EAAEA,CAAA,KAAMX,YAAY,CAAC,IAAI,CAAE;MACpCY,UAAU,EAAEA,CAAA,KAAMZ,YAAY,CAAC,KAAK,CAAE;MACtCH,KAAK,EAAEM,eAAgB;MAAAR,QAAA,EAEtBA;IAAQ,CACA;EAAC,CACqB,CAAC;AAExC","ignoreList":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { Text } from "react-native";
|
|
5
|
+
import { useCheckboxContext } from "./checkbox-context.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export function CheckboxTitle(props) {
|
|
8
|
+
const {
|
|
9
|
+
children,
|
|
10
|
+
style,
|
|
11
|
+
...textProps
|
|
12
|
+
} = props;
|
|
13
|
+
const {
|
|
14
|
+
state,
|
|
15
|
+
styles
|
|
16
|
+
} = useCheckboxContext();
|
|
17
|
+
const calculatedStyle = [styles?.title?.default, styles?.title?.[state], style];
|
|
18
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
19
|
+
...textProps,
|
|
20
|
+
style: calculatedStyle,
|
|
21
|
+
children: children
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=checkbox-title.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Text","useCheckboxContext","jsx","_jsx","CheckboxTitle","props","children","style","textProps","state","styles","calculatedStyle","title","default"],"sourceRoot":"../../../../src","sources":["primitives/checkbox/checkbox-title.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwD,cAAc;AACnF,SAASC,kBAAkB;AAA6B,SAAAC,GAAA,IAAAC,IAAA;AAOxD,OAAO,SAASC,aAAaA,CAACC,KAAkC,EAAE;EAChE,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EAC/C,MAAM;IAAEI,KAAK;IAAEC;EAAO,CAAC,GAAGT,kBAAkB,CAAC,CAAC;EAE9C,MAAMU,eAAe,GAAG,CAACD,MAAM,EAAEE,KAAK,EAAEC,OAAO,EAAEH,MAAM,EAAEE,KAAK,GAAGH,KAAK,CAAC,EAAEF,KAAK,CAAC;EAE/E,oBACEJ,IAAA,CAACH,IAAI;IAAA,GAAKQ,SAAS;IAAED,KAAK,EAAEI,eAAgB;IAAAL,QAAA,EACzCA;EAAQ,CACL,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { CheckboxRoot } from "./checkbox-root.js";
|
|
4
|
+
import { CheckboxIndicator } from "./checkbox-indicator.js";
|
|
5
|
+
import { CheckboxTitle } from "./checkbox-title.js";
|
|
6
|
+
import { CheckboxDescription } from "./checkbox-description.js";
|
|
7
|
+
export const CheckboxPrimitive = {
|
|
8
|
+
Root: CheckboxRoot,
|
|
9
|
+
Indicator: CheckboxIndicator,
|
|
10
|
+
Title: CheckboxTitle,
|
|
11
|
+
Description: CheckboxDescription
|
|
12
|
+
};
|
|
13
|
+
export * from "./types.js";
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["CheckboxRoot","CheckboxIndicator","CheckboxTitle","CheckboxDescription","CheckboxPrimitive","Root","Indicator","Title","Description"],"sourceRoot":"../../../../src","sources":["primitives/checkbox/index.ts"],"mappings":";;AAAA,SAASA,YAAY;AACrB,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,mBAAmB;AAE5B,OAAO,MAAMC,iBAAiB,GAAG;EAC/BC,IAAI,EAAEL,YAAY;EAClBM,SAAS,EAAEL,iBAAiB;EAC5BM,KAAK,EAAEL,aAAa;EACpBM,WAAW,EAAEL;AACf,CAAC;AAMD","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["primitives/checkbox/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["primitives/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["primitives/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CheckboxVariants } from "./variants";
|
|
3
|
+
interface CheckboxProps {
|
|
4
|
+
value: boolean;
|
|
5
|
+
onChange: (value: boolean) => void;
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
isDisabled?: boolean;
|
|
9
|
+
variant?: keyof typeof CheckboxVariants;
|
|
10
|
+
}
|
|
11
|
+
export declare function Checkbox(props: CheckboxProps): React.JSX.Element;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,UAAU,aAAa;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,OAAO,gBAAgB,CAAC;CACzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAiB5C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/checkbox/variants/default.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,eAAO,MAAM,yBAAyB,QAAO,cA8D5C,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/checkbox/variants/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;;CAG5B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"outlined.d.ts","sourceRoot":"","sources":["../../../../../../src/components/checkbox/variants/outlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,eAAO,MAAM,0BAA0B,QAAO,cA8E7C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { CheckboxState, CheckboxStyles } from "./types";
|
|
3
|
+
export interface CheckboxPrimitiveContextValue {
|
|
4
|
+
value: boolean;
|
|
5
|
+
isDisabled?: boolean;
|
|
6
|
+
state: CheckboxState;
|
|
7
|
+
styles?: CheckboxStyles;
|
|
8
|
+
}
|
|
9
|
+
export declare const CheckboxPrimitiveContext: React.Context<CheckboxPrimitiveContextValue | null>;
|
|
10
|
+
export declare const useCheckboxContext: () => CheckboxPrimitiveContextValue;
|
|
11
|
+
//# sourceMappingURL=checkbox-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-context.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/checkbox-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,eAAO,MAAM,wBAAwB,qDAAkE,CAAC;AAExG,eAAO,MAAM,kBAAkB,qCAM9B,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type TextProps, type StyleProp, type TextStyle } from "react-native";
|
|
3
|
+
export interface CheckboxPrimitiveDescriptionProps extends TextProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
style?: StyleProp<TextStyle>;
|
|
6
|
+
}
|
|
7
|
+
export declare function CheckboxDescription(props: CheckboxPrimitiveDescriptionProps): React.JSX.Element;
|
|
8
|
+
//# sourceMappingURL=checkbox-description.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-description.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/checkbox-description.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpF,MAAM,WAAW,iCAAkC,SAAQ,SAAS;IAClE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iCAAiC,qBAW3E"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
|
|
3
|
+
export interface CheckboxPrimitiveIndicatorProps extends ViewProps {
|
|
4
|
+
style?: StyleProp<ViewStyle>;
|
|
5
|
+
}
|
|
6
|
+
export declare function CheckboxIndicator(props: CheckboxPrimitiveIndicatorProps): React.JSX.Element;
|
|
7
|
+
//# sourceMappingURL=checkbox-indicator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-indicator.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/checkbox-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1F,MAAM,WAAW,+BAAgC,SAAQ,SAAS;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAYD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,+BAA+B,qBAcvE"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type PressableProps, type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
+
import type { CheckboxStyles } from "./types";
|
|
4
|
+
export interface CheckboxPrimitiveRootProps extends Omit<PressableProps, "children"> {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
value: boolean;
|
|
7
|
+
onChange: (value: boolean) => void;
|
|
8
|
+
isDisabled?: boolean;
|
|
9
|
+
style?: StyleProp<ViewStyle>;
|
|
10
|
+
styles?: CheckboxStyles;
|
|
11
|
+
}
|
|
12
|
+
export declare function CheckboxRoot(props: CheckboxPrimitiveRootProps): React.JSX.Element;
|
|
13
|
+
//# sourceMappingURL=checkbox-root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-root.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/checkbox-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9F,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAeD,wBAAgB,YAAY,CAAC,KAAK,EAAE,0BAA0B,qBAqC7D"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type TextProps, type StyleProp, type TextStyle } from "react-native";
|
|
3
|
+
export interface CheckboxPrimitiveTitleProps extends TextProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
style?: StyleProp<TextStyle>;
|
|
6
|
+
}
|
|
7
|
+
export declare function CheckboxTitle(props: CheckboxPrimitiveTitleProps): React.JSX.Element;
|
|
8
|
+
//# sourceMappingURL=checkbox-title.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-title.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/checkbox-title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpF,MAAM,WAAW,2BAA4B,SAAQ,SAAS;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,2BAA2B,qBAW/D"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { CheckboxRoot } from "./checkbox-root";
|
|
2
|
+
import { CheckboxIndicator } from "./checkbox-indicator";
|
|
3
|
+
import { CheckboxTitle } from "./checkbox-title";
|
|
4
|
+
import { CheckboxDescription } from "./checkbox-description";
|
|
5
|
+
export declare const CheckboxPrimitive: {
|
|
6
|
+
Root: typeof CheckboxRoot;
|
|
7
|
+
Indicator: typeof CheckboxIndicator;
|
|
8
|
+
Title: typeof CheckboxTitle;
|
|
9
|
+
Description: typeof CheckboxDescription;
|
|
10
|
+
};
|
|
11
|
+
export type { CheckboxPrimitiveRootProps } from "./checkbox-root";
|
|
12
|
+
export type { CheckboxPrimitiveIndicatorProps } from "./checkbox-indicator";
|
|
13
|
+
export type { CheckboxPrimitiveTitleProps } from "./checkbox-title";
|
|
14
|
+
export type { CheckboxPrimitiveDescriptionProps } from "./checkbox-description";
|
|
15
|
+
export * from "./types";
|
|
16
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC;AAEF,YAAY,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAClE,YAAY,EAAE,+BAA+B,EAAE,MAAM,sBAAsB,CAAC;AAC5E,YAAY,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;AACpE,YAAY,EAAE,iCAAiC,EAAE,MAAM,wBAAwB,CAAC;AAChF,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
2
|
+
export type CheckboxState = "default" | "checked" | "disabled" | "hovered";
|
|
3
|
+
export interface CheckboxStyles {
|
|
4
|
+
root?: Partial<Record<CheckboxState, StyleProp<ViewStyle>>>;
|
|
5
|
+
indicator?: Partial<Record<CheckboxState, StyleProp<ViewStyle>>>;
|
|
6
|
+
checkmark?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
|
|
7
|
+
title?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
|
|
8
|
+
description?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE3E,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CACpE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { CheckboxPrimitive } from "@/primitives";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { View } from "react-native";
|
|
4
|
+
import { CheckboxVariants } from "./variants";
|
|
5
|
+
|
|
6
|
+
interface CheckboxProps {
|
|
7
|
+
value: boolean;
|
|
8
|
+
onChange: (value: boolean) => void;
|
|
9
|
+
title?: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
isDisabled?: boolean;
|
|
12
|
+
variant?: keyof typeof CheckboxVariants;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export function Checkbox(props: CheckboxProps) {
|
|
16
|
+
const { value, onChange, title, description, isDisabled, variant = "default" } = props;
|
|
17
|
+
|
|
18
|
+
const useVariantStyles = CheckboxVariants[variant];
|
|
19
|
+
const variantStyles = useVariantStyles();
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<CheckboxPrimitive.Root value={value} onChange={onChange} isDisabled={isDisabled} styles={variantStyles}>
|
|
23
|
+
<CheckboxPrimitive.Indicator />
|
|
24
|
+
{(title || description) && (
|
|
25
|
+
<View style={{ flex: 1 }}>
|
|
26
|
+
{title && <CheckboxPrimitive.Title>{title}</CheckboxPrimitive.Title>}
|
|
27
|
+
{description && <CheckboxPrimitive.Description>{description}</CheckboxPrimitive.Description>}
|
|
28
|
+
</View>
|
|
29
|
+
)}
|
|
30
|
+
</CheckboxPrimitive.Root>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { type CheckboxStyles } from "@/primitives";
|
|
2
|
+
import { useThemedStyles } from "@/utils/use-themed-styles";
|
|
3
|
+
|
|
4
|
+
export const useCheckboxVariantDefault = (): CheckboxStyles => {
|
|
5
|
+
return useThemedStyles(
|
|
6
|
+
({ colors, radius, fontFamily, fontSize }): CheckboxStyles => ({
|
|
7
|
+
root: {
|
|
8
|
+
default: {
|
|
9
|
+
flexDirection: "row",
|
|
10
|
+
alignItems: "flex-start",
|
|
11
|
+
gap: 12,
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
indicator: {
|
|
15
|
+
default: {
|
|
16
|
+
width: 20,
|
|
17
|
+
height: 20,
|
|
18
|
+
borderRadius: radius / 2,
|
|
19
|
+
borderWidth: 2,
|
|
20
|
+
borderColor: colors.border,
|
|
21
|
+
backgroundColor: colors.background,
|
|
22
|
+
marginTop: 2,
|
|
23
|
+
alignItems: "center",
|
|
24
|
+
justifyContent: "center",
|
|
25
|
+
},
|
|
26
|
+
checked: {
|
|
27
|
+
backgroundColor: colors.primary,
|
|
28
|
+
borderColor: colors.primary,
|
|
29
|
+
},
|
|
30
|
+
disabled: {
|
|
31
|
+
opacity: 0.5,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
checkmark: {
|
|
35
|
+
default: {
|
|
36
|
+
color: colors.primaryForeground,
|
|
37
|
+
fontSize: 14,
|
|
38
|
+
fontWeight: "bold",
|
|
39
|
+
lineHeight: 16,
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
title: {
|
|
43
|
+
default: {
|
|
44
|
+
color: colors.foreground,
|
|
45
|
+
fontSize,
|
|
46
|
+
fontFamily,
|
|
47
|
+
fontWeight: "500",
|
|
48
|
+
},
|
|
49
|
+
disabled: {
|
|
50
|
+
color: colors.mutedForeground,
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
description: {
|
|
54
|
+
default: {
|
|
55
|
+
color: colors.mutedForeground,
|
|
56
|
+
fontSize: fontSize * 0.875,
|
|
57
|
+
fontFamily,
|
|
58
|
+
marginTop: 2,
|
|
59
|
+
},
|
|
60
|
+
disabled: {
|
|
61
|
+
opacity: 0.7,
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
})
|
|
65
|
+
);
|
|
66
|
+
};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { type CheckboxStyles } from "@/primitives";
|
|
2
|
+
import { useThemedStyles } from "@/utils/use-themed-styles";
|
|
3
|
+
|
|
4
|
+
export const useCheckboxVariantOutlined = (): CheckboxStyles => {
|
|
5
|
+
return useThemedStyles(
|
|
6
|
+
({ colors, radius, fontFamily, fontSize }): CheckboxStyles => ({
|
|
7
|
+
root: {
|
|
8
|
+
default: {
|
|
9
|
+
flexDirection: "row",
|
|
10
|
+
alignItems: "flex-start",
|
|
11
|
+
gap: 12,
|
|
12
|
+
borderWidth: 1,
|
|
13
|
+
borderColor: colors.border,
|
|
14
|
+
borderRadius: radius,
|
|
15
|
+
padding: 16,
|
|
16
|
+
backgroundColor: colors.background,
|
|
17
|
+
},
|
|
18
|
+
hovered: {
|
|
19
|
+
backgroundColor: colors.muted,
|
|
20
|
+
borderColor: colors.primary,
|
|
21
|
+
},
|
|
22
|
+
checked: {
|
|
23
|
+
borderColor: colors.primary,
|
|
24
|
+
},
|
|
25
|
+
disabled: {
|
|
26
|
+
opacity: 0.5,
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
indicator: {
|
|
30
|
+
default: {
|
|
31
|
+
width: 20,
|
|
32
|
+
height: 20,
|
|
33
|
+
borderRadius: radius / 2,
|
|
34
|
+
borderWidth: 2,
|
|
35
|
+
borderColor: colors.border,
|
|
36
|
+
backgroundColor: colors.background,
|
|
37
|
+
marginTop: 2,
|
|
38
|
+
alignItems: "center",
|
|
39
|
+
justifyContent: "center",
|
|
40
|
+
},
|
|
41
|
+
checked: {
|
|
42
|
+
backgroundColor: colors.primary,
|
|
43
|
+
borderColor: colors.primary,
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
disabled: {
|
|
47
|
+
opacity: 0.5,
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
checkmark: {
|
|
51
|
+
default: {
|
|
52
|
+
color: colors.primaryForeground,
|
|
53
|
+
fontSize: 14,
|
|
54
|
+
fontWeight: "bold",
|
|
55
|
+
lineHeight: 16,
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
title: {
|
|
59
|
+
default: {
|
|
60
|
+
color: colors.foreground,
|
|
61
|
+
fontSize,
|
|
62
|
+
fontFamily,
|
|
63
|
+
fontWeight: "500",
|
|
64
|
+
},
|
|
65
|
+
disabled: {
|
|
66
|
+
color: colors.mutedForeground,
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
description: {
|
|
70
|
+
default: {
|
|
71
|
+
color: colors.mutedForeground,
|
|
72
|
+
fontSize: fontSize * 0.875,
|
|
73
|
+
fontFamily,
|
|
74
|
+
marginTop: 2,
|
|
75
|
+
},
|
|
76
|
+
disabled: {
|
|
77
|
+
opacity: 0.7,
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
})
|
|
81
|
+
);
|
|
82
|
+
};
|
package/src/components/index.ts
CHANGED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { CheckboxState, CheckboxStyles } from "./types";
|
|
3
|
+
|
|
4
|
+
export interface CheckboxPrimitiveContextValue {
|
|
5
|
+
value: boolean;
|
|
6
|
+
isDisabled?: boolean;
|
|
7
|
+
state: CheckboxState;
|
|
8
|
+
styles?: CheckboxStyles;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export const CheckboxPrimitiveContext = React.createContext<CheckboxPrimitiveContextValue | null>(null);
|
|
12
|
+
|
|
13
|
+
export const useCheckboxContext = () => {
|
|
14
|
+
const context = React.useContext(CheckboxPrimitiveContext);
|
|
15
|
+
if (!context) {
|
|
16
|
+
throw new Error("Checkbox compound components must be used within CheckboxPrimitive.Root");
|
|
17
|
+
}
|
|
18
|
+
return context;
|
|
19
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Text, type TextProps, type StyleProp, type TextStyle } from "react-native";
|
|
3
|
+
import { useCheckboxContext } from "./checkbox-context";
|
|
4
|
+
|
|
5
|
+
export interface CheckboxPrimitiveDescriptionProps extends TextProps {
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
style?: StyleProp<TextStyle>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export function CheckboxDescription(props: CheckboxPrimitiveDescriptionProps) {
|
|
11
|
+
const { children, style, ...textProps } = props;
|
|
12
|
+
const { state, styles } = useCheckboxContext();
|
|
13
|
+
|
|
14
|
+
const calculatedStyle = [styles?.description?.default, styles?.description?.[state], style];
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<Text {...textProps} style={calculatedStyle}>
|
|
18
|
+
{children}
|
|
19
|
+
</Text>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
|
|
3
|
+
import { useCheckboxContext } from "./checkbox-context";
|
|
4
|
+
import type { CheckboxState } from "./types";
|
|
5
|
+
|
|
6
|
+
export interface CheckboxPrimitiveIndicatorProps extends ViewProps {
|
|
7
|
+
style?: StyleProp<ViewStyle>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const calculateState = (rootState: CheckboxState, checked: boolean): CheckboxState => {
|
|
11
|
+
if (rootState === "disabled") {
|
|
12
|
+
return "disabled";
|
|
13
|
+
}
|
|
14
|
+
if (checked) {
|
|
15
|
+
return "checked";
|
|
16
|
+
}
|
|
17
|
+
return rootState;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export function CheckboxIndicator(props: CheckboxPrimitiveIndicatorProps) {
|
|
21
|
+
const { style, ...viewProps } = props;
|
|
22
|
+
const { value, state, styles } = useCheckboxContext();
|
|
23
|
+
|
|
24
|
+
const indicatorState = calculateState(state, value);
|
|
25
|
+
|
|
26
|
+
const calculatedStyle = [styles?.indicator?.default, styles?.indicator?.[indicatorState], style];
|
|
27
|
+
const checkmarkStyle = [styles?.checkmark?.default, styles?.checkmark?.[indicatorState]];
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<View {...viewProps} style={calculatedStyle}>
|
|
31
|
+
{value && <Text style={checkmarkStyle}>✓</Text>}
|
|
32
|
+
</View>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
+
import { CheckboxPrimitiveContext } from "./checkbox-context";
|
|
4
|
+
import type { CheckboxState, CheckboxStyles } from "./types";
|
|
5
|
+
|
|
6
|
+
export interface CheckboxPrimitiveRootProps extends Omit<PressableProps, "children"> {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
value: boolean;
|
|
9
|
+
onChange: (value: boolean) => void;
|
|
10
|
+
isDisabled?: boolean;
|
|
11
|
+
style?: StyleProp<ViewStyle>;
|
|
12
|
+
styles?: CheckboxStyles;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const calculateState = (value: boolean, isDisabled: boolean | undefined, isHovered: boolean): CheckboxState => {
|
|
16
|
+
if (isDisabled) {
|
|
17
|
+
return "disabled";
|
|
18
|
+
}
|
|
19
|
+
if (isHovered) {
|
|
20
|
+
return "hovered";
|
|
21
|
+
}
|
|
22
|
+
if (value) {
|
|
23
|
+
return "checked";
|
|
24
|
+
}
|
|
25
|
+
return "default";
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export function CheckboxRoot(props: CheckboxPrimitiveRootProps) {
|
|
29
|
+
const { children, value, onChange, isDisabled, style, styles, ...pressableProps } = props;
|
|
30
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
31
|
+
|
|
32
|
+
const state = calculateState(value, isDisabled, isHovered);
|
|
33
|
+
const handlePress = () => {
|
|
34
|
+
if (!isDisabled) {
|
|
35
|
+
onChange(!value);
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const calculatedStyle = [styles?.root?.default, styles?.root?.[state], style];
|
|
40
|
+
|
|
41
|
+
const contextValue = React.useMemo(
|
|
42
|
+
() => ({
|
|
43
|
+
value,
|
|
44
|
+
isDisabled,
|
|
45
|
+
state,
|
|
46
|
+
styles,
|
|
47
|
+
}),
|
|
48
|
+
[value, isDisabled, state, styles]
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<CheckboxPrimitiveContext.Provider value={contextValue}>
|
|
53
|
+
<Pressable
|
|
54
|
+
{...pressableProps}
|
|
55
|
+
disabled={isDisabled}
|
|
56
|
+
onPress={handlePress}
|
|
57
|
+
onHoverIn={() => setIsHovered(true)}
|
|
58
|
+
onHoverOut={() => setIsHovered(false)}
|
|
59
|
+
style={calculatedStyle}
|
|
60
|
+
>
|
|
61
|
+
{children}
|
|
62
|
+
</Pressable>
|
|
63
|
+
</CheckboxPrimitiveContext.Provider>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Text, type TextProps, type StyleProp, type TextStyle } from "react-native";
|
|
3
|
+
import { useCheckboxContext } from "./checkbox-context";
|
|
4
|
+
|
|
5
|
+
export interface CheckboxPrimitiveTitleProps extends TextProps {
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
style?: StyleProp<TextStyle>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export function CheckboxTitle(props: CheckboxPrimitiveTitleProps) {
|
|
11
|
+
const { children, style, ...textProps } = props;
|
|
12
|
+
const { state, styles } = useCheckboxContext();
|
|
13
|
+
|
|
14
|
+
const calculatedStyle = [styles?.title?.default, styles?.title?.[state], style];
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<Text {...textProps} style={calculatedStyle}>
|
|
18
|
+
{children}
|
|
19
|
+
</Text>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { CheckboxRoot } from "./checkbox-root";
|
|
2
|
+
import { CheckboxIndicator } from "./checkbox-indicator";
|
|
3
|
+
import { CheckboxTitle } from "./checkbox-title";
|
|
4
|
+
import { CheckboxDescription } from "./checkbox-description";
|
|
5
|
+
|
|
6
|
+
export const CheckboxPrimitive = {
|
|
7
|
+
Root: CheckboxRoot,
|
|
8
|
+
Indicator: CheckboxIndicator,
|
|
9
|
+
Title: CheckboxTitle,
|
|
10
|
+
Description: CheckboxDescription,
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export type { CheckboxPrimitiveRootProps } from "./checkbox-root";
|
|
14
|
+
export type { CheckboxPrimitiveIndicatorProps } from "./checkbox-indicator";
|
|
15
|
+
export type { CheckboxPrimitiveTitleProps } from "./checkbox-title";
|
|
16
|
+
export type { CheckboxPrimitiveDescriptionProps } from "./checkbox-description";
|
|
17
|
+
export * from "./types";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
2
|
+
|
|
3
|
+
export type CheckboxState = "default" | "checked" | "disabled" | "hovered";
|
|
4
|
+
|
|
5
|
+
export interface CheckboxStyles {
|
|
6
|
+
root?: Partial<Record<CheckboxState, StyleProp<ViewStyle>>>;
|
|
7
|
+
indicator?: Partial<Record<CheckboxState, StyleProp<ViewStyle>>>;
|
|
8
|
+
checkmark?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
|
|
9
|
+
title?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
|
|
10
|
+
description?: Partial<Record<CheckboxState, StyleProp<TextStyle>>>;
|
|
11
|
+
}
|
package/src/primitives/index.ts
CHANGED