@kivid/native-components 1.0.0-alpha.11 → 1.0.0-alpha.13
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/commonjs/components/ActionButton/assets/class-variants.js +2 -2
- package/dist/commonjs/components/ActionButton/assets/class-variants.js.map +1 -1
- package/dist/commonjs/components/ActionButton/index.js +10 -14
- package/dist/commonjs/components/ActionButton/index.js.map +1 -1
- package/dist/commonjs/enums/font-weight.js +18 -0
- package/dist/commonjs/enums/font-weight.js.map +1 -0
- package/dist/commonjs/enums/index.js +19 -8
- package/dist/commonjs/enums/index.js.map +1 -1
- package/dist/module/components/ActionButton/assets/class-variants.js +2 -2
- package/dist/module/components/ActionButton/assets/class-variants.js.map +1 -1
- package/dist/module/components/ActionButton/index.js +11 -15
- package/dist/module/components/ActionButton/index.js.map +1 -1
- package/dist/module/enums/font-weight.js +14 -0
- package/dist/module/enums/font-weight.js.map +1 -0
- package/dist/module/enums/index.js +2 -1
- package/dist/module/enums/index.js.map +1 -1
- package/dist/typescript/components/ActionButton/types.d.ts +24 -2
- package/dist/typescript/components/Typography/assets/class-variants.d.ts +1 -1
- package/dist/typescript/enums/font-weight.d.ts +10 -0
- package/dist/typescript/enums/index.d.ts +2 -1
- package/package.json +3 -3
- package/src/components/ActionButton/assets/class-variants.ts +4 -2
- package/src/components/ActionButton/index.tsx +19 -13
- package/src/components/ActionButton/types.ts +24 -2
- package/src/enums/font-weight.ts +10 -0
- package/src/enums/index.ts +3 -1
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.textVariants = exports.menuCardVariants = void 0;
|
|
7
7
|
var _classVarianceAuthority = require("class-variance-authority");
|
|
8
8
|
var _index = require("../../../enums/index.js");
|
|
9
|
-
const menuCardVariants = exports.menuCardVariants = (0, _classVarianceAuthority.cva)(["flex-col justify-between items-start
|
|
9
|
+
const menuCardVariants = exports.menuCardVariants = (0, _classVarianceAuthority.cva)(["flex-col justify-between items-start", "relative", "min-h-[120px]", "p-[16px]", "overflow-hidden"], {
|
|
10
10
|
variants: {
|
|
11
11
|
variant: {
|
|
12
12
|
grape: ["bg-grape-500", "disabled:bg-grape-200"],
|
|
@@ -19,7 +19,7 @@ const menuCardVariants = exports.menuCardVariants = (0, _classVarianceAuthority.
|
|
|
19
19
|
},
|
|
20
20
|
corners: {
|
|
21
21
|
[_index.CornersEnum.SMALL]: "rounded-700",
|
|
22
|
-
[_index.CornersEnum.MEDIUM]: "rounded-
|
|
22
|
+
[_index.CornersEnum.MEDIUM]: "rounded-[16px]",
|
|
23
23
|
[_index.CornersEnum.LARGE]: "rounded-700"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_classVarianceAuthority","require","_index","menuCardVariants","exports","cva","variants","variant","grape","java","pear","tangerine","blackberry","chia","outline","corners","CornersEnum","SMALL","MEDIUM","LARGE","defaultVariants","textVariants"],"sourceRoot":"../../../../../src","sources":["components/ActionButton/assets/class-variants.ts"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,2BAAG,EACjC,CACE,
|
|
1
|
+
{"version":3,"names":["_classVarianceAuthority","require","_index","menuCardVariants","exports","cva","variants","variant","grape","java","pear","tangerine","blackberry","chia","outline","corners","CornersEnum","SMALL","MEDIUM","LARGE","defaultVariants","textVariants"],"sourceRoot":"../../../../../src","sources":["components/ActionButton/assets/class-variants.ts"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,2BAAG,EACjC,CACE,sCAAsC,EACtC,UAAU,EACV,eAAe,EACf,UAAU,EACV,iBAAiB,CAClB,EACD;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,KAAK,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC;MAChDC,IAAI,EAAE,CAAC,aAAa,EAAE,sBAAsB,CAAC;MAC7CC,IAAI,EAAE,CAAC,aAAa,EAAE,sBAAsB,CAAC;MAC7CC,SAAS,EAAE,CACT,kBAAkB,EAClB,2BAA2B,CAC5B;MACDC,UAAU,EAAE,CACV,mBAAmB,EACnB,4BAA4B,CAC7B;MACDC,IAAI,EAAE,CAAC,aAAa,EAAE,sBAAsB,CAAC;MAC7CC,OAAO,EAAE,CACP,4BAA4B,EAC5B,0BAA0B;IAE9B,CAAC;IACDC,OAAO,EAAE;MACP,CAACC,kBAAW,CAACC,KAAK,GAAG,aAAa;MAClC,CAACD,kBAAW,CAACE,MAAM,GAAG,gBAAgB;MACtC,CAACF,kBAAW,CAACG,KAAK,GAAG;IACvB;EACF,CAAC;EACDC,eAAe,EAAE;IACfb,OAAO,EAAE,OAAO;IAChBQ,OAAO,EAAEC,kBAAW,CAACE;EACvB;AACF,CACF,CAAC;AAEM,MAAMG,YAAY,GAAAjB,OAAA,CAAAiB,YAAA,GAAG,IAAAhB,2BAAG,EAAC,EAAE,EAAE;EAClCC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,KAAK,EAAE,eAAe;MACtBC,IAAI,EAAE,eAAe;MACrBC,IAAI,EAAE,eAAe;MACrBC,SAAS,EAAE,eAAe;MAC1BC,UAAU,EAAE,eAAe;MAC3BC,IAAI,EAAE,eAAe;MACrBC,OAAO,EAAE;IACX;EACF,CAAC;EACDM,eAAe,EAAE;IACfb,OAAO,EAAE;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -40,6 +40,11 @@ function ActionButton(props) {
|
|
|
40
40
|
corners = _index.CornersEnum.MEDIUM,
|
|
41
41
|
disabled = false,
|
|
42
42
|
className,
|
|
43
|
+
iconClassName,
|
|
44
|
+
labelClassName,
|
|
45
|
+
subtitleClassName,
|
|
46
|
+
labelWeight = _index.FontWeightEnum.MEDIUM,
|
|
47
|
+
subtitleWeight = _index.FontWeightEnum.MEDIUM,
|
|
43
48
|
onPress,
|
|
44
49
|
accessibilityLabel,
|
|
45
50
|
ref,
|
|
@@ -49,10 +54,6 @@ function ActionButton(props) {
|
|
|
49
54
|
} = props;
|
|
50
55
|
const [isPressed, setIsPressed] = _react.default.useState(false);
|
|
51
56
|
|
|
52
|
-
// Figma design system specifies Corner 400: 16px and Space 600: 16px for all ActionButton variants
|
|
53
|
-
const borderRadius = 16;
|
|
54
|
-
const padding = 16;
|
|
55
|
-
|
|
56
57
|
// Map pressed state colors according to Figma design (darker variants)
|
|
57
58
|
const pressedColorMap = {
|
|
58
59
|
grape: "bg-grape-700",
|
|
@@ -99,11 +100,6 @@ function ActionButton(props) {
|
|
|
99
100
|
ref: ref,
|
|
100
101
|
disabled: disabled,
|
|
101
102
|
className: containerStyle,
|
|
102
|
-
style: {
|
|
103
|
-
borderRadius,
|
|
104
|
-
padding,
|
|
105
|
-
overflow: 'hidden'
|
|
106
|
-
},
|
|
107
103
|
onPress: onPress,
|
|
108
104
|
onPressIn: handlePressIn,
|
|
109
105
|
onPressOut: handlePressOut,
|
|
@@ -115,19 +111,19 @@ function ActionButton(props) {
|
|
|
115
111
|
pointerEvents: disabled ? "none" : "auto",
|
|
116
112
|
...rest,
|
|
117
113
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
118
|
-
className: (0, _tailwindPreset.merge)("flex items-start shrink-0", disabled && "opacity-60"),
|
|
114
|
+
className: (0, _tailwindPreset.merge)("flex items-start shrink-0", disabled && "opacity-60", iconClassName),
|
|
119
115
|
children: iconWithColor
|
|
120
116
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
121
117
|
className: "shrink-0",
|
|
122
118
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Typography, {
|
|
123
119
|
variant: "label_large",
|
|
124
|
-
weight:
|
|
125
|
-
className: (0, _tailwindPreset.merge)(textStyle, disabled && "opacity-60"),
|
|
120
|
+
weight: labelWeight,
|
|
121
|
+
className: (0, _tailwindPreset.merge)(textStyle, disabled && "opacity-60", labelClassName),
|
|
126
122
|
children: label
|
|
127
123
|
}), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Typography, {
|
|
128
124
|
variant: "label_large",
|
|
129
|
-
weight:
|
|
130
|
-
className: (0, _tailwindPreset.merge)(textStyle, disabled && "opacity-60"),
|
|
125
|
+
weight: subtitleWeight,
|
|
126
|
+
className: (0, _tailwindPreset.merge)(textStyle, disabled && "opacity-60", subtitleClassName),
|
|
131
127
|
children: subtitle
|
|
132
128
|
})]
|
|
133
129
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_tailwindPreset","require","_react","_interopRequireDefault","_reactNative","_index","_index2","_classVariants","_jsxRuntime","_types","e","__esModule","default","ActionButton","props","icon","label","subtitle","variant","corners","CornersEnum","MEDIUM","disabled","className","onPress","accessibilityLabel","ref","onPressIn","onPressOut","rest","isPressed","setIsPressed","React","useState","
|
|
1
|
+
{"version":3,"names":["_tailwindPreset","require","_react","_interopRequireDefault","_reactNative","_index","_index2","_classVariants","_jsxRuntime","_types","e","__esModule","default","ActionButton","props","icon","label","subtitle","variant","corners","CornersEnum","MEDIUM","disabled","className","iconClassName","labelClassName","subtitleClassName","labelWeight","FontWeightEnum","subtitleWeight","onPress","accessibilityLabel","ref","onPressIn","onPressOut","rest","isPressed","setIsPressed","React","useState","pressedColorMap","grape","java","pear","tangerine","blackberry","chia","outline","containerStyle","merge","menuCardVariants","textStyle","textVariants","iconColorMap","iconWithColor","isValidElement","cloneElement","color","handlePressIn","event","handlePressOut","jsxs","Pressable","accessibilityRole","accessibilityState","pointerEvents","children","jsx","View","Typography","weight","displayName"],"sourceRoot":"../../../../src","sources":["components/ActionButton/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.FontWeightEnum = void 0;
|
|
7
|
+
let FontWeightEnum = exports.FontWeightEnum = /*#__PURE__*/function (FontWeightEnum) {
|
|
8
|
+
FontWeightEnum["LIGHT"] = "100";
|
|
9
|
+
FontWeightEnum["THIN"] = "200";
|
|
10
|
+
FontWeightEnum["REGULAR"] = "400";
|
|
11
|
+
FontWeightEnum["MEDIUM"] = "500";
|
|
12
|
+
FontWeightEnum["SEMIBOLD"] = "600";
|
|
13
|
+
FontWeightEnum["BOLD"] = "700";
|
|
14
|
+
FontWeightEnum["EXTRA_BOLD"] = "800";
|
|
15
|
+
FontWeightEnum["BLACK"] = "900";
|
|
16
|
+
return FontWeightEnum;
|
|
17
|
+
}({});
|
|
18
|
+
//# sourceMappingURL=font-weight.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["FontWeightEnum","exports"],"sourceRoot":"../../../src","sources":["enums/font-weight.ts"],"mappings":";;;;;;IAAYA,cAAc,GAAAC,OAAA,CAAAD,cAAA,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}
|
|
@@ -3,25 +3,36 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
var
|
|
7
|
-
Object.keys(
|
|
6
|
+
var _corners = require("./corners.js");
|
|
7
|
+
Object.keys(_corners).forEach(function (key) {
|
|
8
8
|
if (key === "default" || key === "__esModule") return;
|
|
9
|
-
if (key in exports && exports[key] ===
|
|
9
|
+
if (key in exports && exports[key] === _corners[key]) return;
|
|
10
10
|
Object.defineProperty(exports, key, {
|
|
11
11
|
enumerable: true,
|
|
12
12
|
get: function () {
|
|
13
|
-
return
|
|
13
|
+
return _corners[key];
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
16
|
});
|
|
17
|
-
var
|
|
18
|
-
Object.keys(
|
|
17
|
+
var _fontWeight = require("./font-weight.js");
|
|
18
|
+
Object.keys(_fontWeight).forEach(function (key) {
|
|
19
19
|
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (key in exports && exports[key] ===
|
|
20
|
+
if (key in exports && exports[key] === _fontWeight[key]) return;
|
|
21
21
|
Object.defineProperty(exports, key, {
|
|
22
22
|
enumerable: true,
|
|
23
23
|
get: function () {
|
|
24
|
-
return
|
|
24
|
+
return _fontWeight[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
var _size = require("./size.js");
|
|
29
|
+
Object.keys(_size).forEach(function (key) {
|
|
30
|
+
if (key === "default" || key === "__esModule") return;
|
|
31
|
+
if (key in exports && exports[key] === _size[key]) return;
|
|
32
|
+
Object.defineProperty(exports, key, {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function () {
|
|
35
|
+
return _size[key];
|
|
25
36
|
}
|
|
26
37
|
});
|
|
27
38
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["_corners","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_fontWeight","_size","_stateVariant"],"sourceRoot":"../../../src","sources":["enums/index.ts"],"mappings":";;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,QAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,QAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,QAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,WAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,WAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,WAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,WAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,KAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,KAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,KAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,KAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,aAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,aAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,aAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,aAAA,CAAAP,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { CornersEnum } from "../../../enums/index.js";
|
|
5
|
-
export const menuCardVariants = cva(["flex-col justify-between items-start
|
|
5
|
+
export const menuCardVariants = cva(["flex-col justify-between items-start", "relative", "min-h-[120px]", "p-[16px]", "overflow-hidden"], {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
8
|
grape: ["bg-grape-500", "disabled:bg-grape-200"],
|
|
@@ -15,7 +15,7 @@ export const menuCardVariants = cva(["flex-col justify-between items-start gap-4
|
|
|
15
15
|
},
|
|
16
16
|
corners: {
|
|
17
17
|
[CornersEnum.SMALL]: "rounded-700",
|
|
18
|
-
[CornersEnum.MEDIUM]: "rounded-
|
|
18
|
+
[CornersEnum.MEDIUM]: "rounded-[16px]",
|
|
19
19
|
[CornersEnum.LARGE]: "rounded-700"
|
|
20
20
|
}
|
|
21
21
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["cva","CornersEnum","menuCardVariants","variants","variant","grape","java","pear","tangerine","blackberry","chia","outline","corners","SMALL","MEDIUM","LARGE","defaultVariants","textVariants"],"sourceRoot":"../../../../../src","sources":["components/ActionButton/assets/class-variants.ts"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,0BAA0B;AAC9C,SAASC,WAAW,QAAQ,yBAAgB;AAE5C,OAAO,MAAMC,gBAAgB,GAAGF,GAAG,CACjC,CACE,
|
|
1
|
+
{"version":3,"names":["cva","CornersEnum","menuCardVariants","variants","variant","grape","java","pear","tangerine","blackberry","chia","outline","corners","SMALL","MEDIUM","LARGE","defaultVariants","textVariants"],"sourceRoot":"../../../../../src","sources":["components/ActionButton/assets/class-variants.ts"],"mappings":";;AAAA,SAASA,GAAG,QAAQ,0BAA0B;AAC9C,SAASC,WAAW,QAAQ,yBAAgB;AAE5C,OAAO,MAAMC,gBAAgB,GAAGF,GAAG,CACjC,CACE,sCAAsC,EACtC,UAAU,EACV,eAAe,EACf,UAAU,EACV,iBAAiB,CAClB,EACD;EACEG,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,KAAK,EAAE,CAAC,cAAc,EAAE,uBAAuB,CAAC;MAChDC,IAAI,EAAE,CAAC,aAAa,EAAE,sBAAsB,CAAC;MAC7CC,IAAI,EAAE,CAAC,aAAa,EAAE,sBAAsB,CAAC;MAC7CC,SAAS,EAAE,CACT,kBAAkB,EAClB,2BAA2B,CAC5B;MACDC,UAAU,EAAE,CACV,mBAAmB,EACnB,4BAA4B,CAC7B;MACDC,IAAI,EAAE,CAAC,aAAa,EAAE,sBAAsB,CAAC;MAC7CC,OAAO,EAAE,CACP,4BAA4B,EAC5B,0BAA0B;IAE9B,CAAC;IACDC,OAAO,EAAE;MACP,CAACX,WAAW,CAACY,KAAK,GAAG,aAAa;MAClC,CAACZ,WAAW,CAACa,MAAM,GAAG,gBAAgB;MACtC,CAACb,WAAW,CAACc,KAAK,GAAG;IACvB;EACF,CAAC;EACDC,eAAe,EAAE;IACfZ,OAAO,EAAE,OAAO;IAChBQ,OAAO,EAAEX,WAAW,CAACa;EACvB;AACF,CACF,CAAC;AAED,OAAO,MAAMG,YAAY,GAAGjB,GAAG,CAAC,EAAE,EAAE;EAClCG,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,KAAK,EAAE,eAAe;MACtBC,IAAI,EAAE,eAAe;MACrBC,IAAI,EAAE,eAAe;MACrBC,SAAS,EAAE,eAAe;MAC1BC,UAAU,EAAE,eAAe;MAC3BC,IAAI,EAAE,eAAe;MACrBC,OAAO,EAAE;IACX;EACF,CAAC;EACDK,eAAe,EAAE;IACfZ,OAAO,EAAE;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { merge } from "@kivid/tailwind-preset";
|
|
4
4
|
import React from "react";
|
|
5
5
|
import { Pressable, View } from "react-native";
|
|
6
|
-
import { CornersEnum } from "../../enums/index.js";
|
|
6
|
+
import { CornersEnum, FontWeightEnum } from "../../enums/index.js";
|
|
7
7
|
import { Typography } from "../Typography/index.js";
|
|
8
8
|
import { menuCardVariants, textVariants } from "./assets/class-variants.js";
|
|
9
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -16,6 +16,11 @@ export function ActionButton(props) {
|
|
|
16
16
|
corners = CornersEnum.MEDIUM,
|
|
17
17
|
disabled = false,
|
|
18
18
|
className,
|
|
19
|
+
iconClassName,
|
|
20
|
+
labelClassName,
|
|
21
|
+
subtitleClassName,
|
|
22
|
+
labelWeight = FontWeightEnum.MEDIUM,
|
|
23
|
+
subtitleWeight = FontWeightEnum.MEDIUM,
|
|
19
24
|
onPress,
|
|
20
25
|
accessibilityLabel,
|
|
21
26
|
ref,
|
|
@@ -25,10 +30,6 @@ export function ActionButton(props) {
|
|
|
25
30
|
} = props;
|
|
26
31
|
const [isPressed, setIsPressed] = React.useState(false);
|
|
27
32
|
|
|
28
|
-
// Figma design system specifies Corner 400: 16px and Space 600: 16px for all ActionButton variants
|
|
29
|
-
const borderRadius = 16;
|
|
30
|
-
const padding = 16;
|
|
31
|
-
|
|
32
33
|
// Map pressed state colors according to Figma design (darker variants)
|
|
33
34
|
const pressedColorMap = {
|
|
34
35
|
grape: "bg-grape-700",
|
|
@@ -75,11 +76,6 @@ export function ActionButton(props) {
|
|
|
75
76
|
ref: ref,
|
|
76
77
|
disabled: disabled,
|
|
77
78
|
className: containerStyle,
|
|
78
|
-
style: {
|
|
79
|
-
borderRadius,
|
|
80
|
-
padding,
|
|
81
|
-
overflow: 'hidden'
|
|
82
|
-
},
|
|
83
79
|
onPress: onPress,
|
|
84
80
|
onPressIn: handlePressIn,
|
|
85
81
|
onPressOut: handlePressOut,
|
|
@@ -91,19 +87,19 @@ export function ActionButton(props) {
|
|
|
91
87
|
pointerEvents: disabled ? "none" : "auto",
|
|
92
88
|
...rest,
|
|
93
89
|
children: [/*#__PURE__*/_jsx(View, {
|
|
94
|
-
className: merge("flex items-start shrink-0", disabled && "opacity-60"),
|
|
90
|
+
className: merge("flex items-start shrink-0", disabled && "opacity-60", iconClassName),
|
|
95
91
|
children: iconWithColor
|
|
96
92
|
}), /*#__PURE__*/_jsxs(View, {
|
|
97
93
|
className: "shrink-0",
|
|
98
94
|
children: [/*#__PURE__*/_jsx(Typography, {
|
|
99
95
|
variant: "label_large",
|
|
100
|
-
weight:
|
|
101
|
-
className: merge(textStyle, disabled && "opacity-60"),
|
|
96
|
+
weight: labelWeight,
|
|
97
|
+
className: merge(textStyle, disabled && "opacity-60", labelClassName),
|
|
102
98
|
children: label
|
|
103
99
|
}), subtitle && /*#__PURE__*/_jsx(Typography, {
|
|
104
100
|
variant: "label_large",
|
|
105
|
-
weight:
|
|
106
|
-
className: merge(textStyle, disabled && "opacity-60"),
|
|
101
|
+
weight: subtitleWeight,
|
|
102
|
+
className: merge(textStyle, disabled && "opacity-60", subtitleClassName),
|
|
107
103
|
children: subtitle
|
|
108
104
|
})]
|
|
109
105
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["merge","React","Pressable","View","CornersEnum","Typography","menuCardVariants","textVariants","jsx","_jsx","jsxs","_jsxs","ActionButton","props","icon","label","subtitle","variant","corners","MEDIUM","disabled","className","onPress","accessibilityLabel","ref","onPressIn","onPressOut","rest","isPressed","setIsPressed","useState","
|
|
1
|
+
{"version":3,"names":["merge","React","Pressable","View","CornersEnum","FontWeightEnum","Typography","menuCardVariants","textVariants","jsx","_jsx","jsxs","_jsxs","ActionButton","props","icon","label","subtitle","variant","corners","MEDIUM","disabled","className","iconClassName","labelClassName","subtitleClassName","labelWeight","subtitleWeight","onPress","accessibilityLabel","ref","onPressIn","onPressOut","rest","isPressed","setIsPressed","useState","pressedColorMap","grape","java","pear","tangerine","blackberry","chia","outline","containerStyle","textStyle","iconColorMap","iconWithColor","isValidElement","cloneElement","color","handlePressIn","event","handlePressOut","accessibilityRole","accessibilityState","pointerEvents","children","weight","displayName","ActionButtonCorners","ActionButtonProps","ActionButtonVariant"],"sourceRoot":"../../../../src","sources":["components/ActionButton/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
export let FontWeightEnum = /*#__PURE__*/function (FontWeightEnum) {
|
|
4
|
+
FontWeightEnum["LIGHT"] = "100";
|
|
5
|
+
FontWeightEnum["THIN"] = "200";
|
|
6
|
+
FontWeightEnum["REGULAR"] = "400";
|
|
7
|
+
FontWeightEnum["MEDIUM"] = "500";
|
|
8
|
+
FontWeightEnum["SEMIBOLD"] = "600";
|
|
9
|
+
FontWeightEnum["BOLD"] = "700";
|
|
10
|
+
FontWeightEnum["EXTRA_BOLD"] = "800";
|
|
11
|
+
FontWeightEnum["BLACK"] = "900";
|
|
12
|
+
return FontWeightEnum;
|
|
13
|
+
}({});
|
|
14
|
+
//# sourceMappingURL=font-weight.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["FontWeightEnum"],"sourceRoot":"../../../src","sources":["enums/font-weight.ts"],"mappings":";;AAAA,WAAYA,cAAc,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["enums/index.ts"],"mappings":";;AAAA,cAAc,
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["enums/index.ts"],"mappings":";;AAAA,cAAc,cAAW;AACzB,cAAc,kBAAe;AAC7B,cAAc,WAAQ;AACtB,cAAc,oBAAiB","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { VariantProps } from "class-variance-authority";
|
|
2
2
|
import { PressableProps, View } from "react-native";
|
|
3
|
-
import { CornersEnum } from "../../enums";
|
|
3
|
+
import { CornersEnum, FontWeightEnum } from "../../enums";
|
|
4
4
|
import { menuCardVariants } from "./assets/class-variants";
|
|
5
5
|
export type ActionButtonVariant = "grape" | "java" | "pear" | "tangerine" | "blackberry" | "chia" | "outline";
|
|
6
6
|
export type ActionButtonCorners = CornersEnum.SMALL | CornersEnum.MEDIUM | CornersEnum.LARGE;
|
|
@@ -30,9 +30,31 @@ export interface ActionButtonProps extends VariantProps<typeof menuCardVariants>
|
|
|
30
30
|
*/
|
|
31
31
|
disabled?: boolean;
|
|
32
32
|
/**
|
|
33
|
-
* Additional class names
|
|
33
|
+
* Additional class names for the main container
|
|
34
34
|
*/
|
|
35
35
|
className?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Additional class names for the icon container
|
|
38
|
+
*/
|
|
39
|
+
iconClassName?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Additional class names for the label text
|
|
42
|
+
*/
|
|
43
|
+
labelClassName?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Additional class names for the subtitle text
|
|
46
|
+
*/
|
|
47
|
+
subtitleClassName?: string;
|
|
48
|
+
/**
|
|
49
|
+
* Font weight for the label text
|
|
50
|
+
* @default FontWeightEnum.MEDIUM
|
|
51
|
+
*/
|
|
52
|
+
labelWeight?: FontWeightEnum;
|
|
53
|
+
/**
|
|
54
|
+
* Font weight for the subtitle text
|
|
55
|
+
* @default FontWeightEnum.MEDIUM
|
|
56
|
+
*/
|
|
57
|
+
subtitleWeight?: FontWeightEnum;
|
|
36
58
|
/**
|
|
37
59
|
* Callback when card is pressed
|
|
38
60
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export declare const typographyVariants: (props?: ({
|
|
2
2
|
variant?: "label_small" | "label_medium" | "label_large" | "body_small" | "body_medium" | "body_large" | "title_small" | "title_medium" | "title_large" | "headline_small" | "headline_medium" | "headline_large" | "display_small" | "display_medium" | "display_large" | null | undefined;
|
|
3
|
-
weight?: "
|
|
3
|
+
weight?: "200" | "400" | "500" | "600" | "700" | "800" | "900" | "300" | null | undefined;
|
|
4
4
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kivid/native-components",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.13",
|
|
4
4
|
"description": "A React Native component library for the Butterfly Design System.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -79,8 +79,8 @@
|
|
|
79
79
|
"react": "19.0.0",
|
|
80
80
|
"ts-jest": "^29.2.5",
|
|
81
81
|
"typescript": "~5.8.3",
|
|
82
|
-
"@kivid/
|
|
83
|
-
"@kivid/
|
|
82
|
+
"@kivid/tailwind-preset": "1.0.0-alpha.10",
|
|
83
|
+
"@kivid/icons": "1.0.0-alpha.10"
|
|
84
84
|
},
|
|
85
85
|
"peerDependencies": {
|
|
86
86
|
"@lottiefiles/dotlottie-react": "^0.15.1",
|
|
@@ -3,9 +3,11 @@ import { CornersEnum } from "../../../enums";
|
|
|
3
3
|
|
|
4
4
|
export const menuCardVariants = cva(
|
|
5
5
|
[
|
|
6
|
-
"flex-col justify-between items-start
|
|
6
|
+
"flex-col justify-between items-start",
|
|
7
7
|
"relative",
|
|
8
8
|
"min-h-[120px]",
|
|
9
|
+
"p-[16px]",
|
|
10
|
+
"overflow-hidden",
|
|
9
11
|
],
|
|
10
12
|
{
|
|
11
13
|
variants: {
|
|
@@ -29,7 +31,7 @@ export const menuCardVariants = cva(
|
|
|
29
31
|
},
|
|
30
32
|
corners: {
|
|
31
33
|
[CornersEnum.SMALL]: "rounded-700",
|
|
32
|
-
[CornersEnum.MEDIUM]: "rounded-
|
|
34
|
+
[CornersEnum.MEDIUM]: "rounded-[16px]",
|
|
33
35
|
[CornersEnum.LARGE]: "rounded-700",
|
|
34
36
|
},
|
|
35
37
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { merge } from "@kivid/tailwind-preset";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { Pressable, View } from "react-native";
|
|
4
|
-
import { CornersEnum } from "../../enums";
|
|
4
|
+
import { CornersEnum, FontWeightEnum } from "../../enums";
|
|
5
5
|
import { Typography } from "../Typography";
|
|
6
6
|
import {
|
|
7
7
|
menuCardVariants,
|
|
@@ -18,6 +18,11 @@ export function ActionButton(props: ActionButtonProps) {
|
|
|
18
18
|
corners = CornersEnum.MEDIUM,
|
|
19
19
|
disabled = false,
|
|
20
20
|
className,
|
|
21
|
+
iconClassName,
|
|
22
|
+
labelClassName,
|
|
23
|
+
subtitleClassName,
|
|
24
|
+
labelWeight = FontWeightEnum.MEDIUM,
|
|
25
|
+
subtitleWeight = FontWeightEnum.MEDIUM,
|
|
21
26
|
onPress,
|
|
22
27
|
accessibilityLabel,
|
|
23
28
|
ref,
|
|
@@ -28,10 +33,6 @@ export function ActionButton(props: ActionButtonProps) {
|
|
|
28
33
|
|
|
29
34
|
const [isPressed, setIsPressed] = React.useState(false);
|
|
30
35
|
|
|
31
|
-
// Figma design system specifies Corner 400: 16px and Space 600: 16px for all ActionButton variants
|
|
32
|
-
const borderRadius = 16;
|
|
33
|
-
const padding = 16;
|
|
34
|
-
|
|
35
36
|
// Map pressed state colors according to Figma design (darker variants)
|
|
36
37
|
const pressedColorMap: Record<typeof variant, string> = {
|
|
37
38
|
grape: "bg-grape-700",
|
|
@@ -87,11 +88,6 @@ export function ActionButton(props: ActionButtonProps) {
|
|
|
87
88
|
ref={ref}
|
|
88
89
|
disabled={disabled}
|
|
89
90
|
className={containerStyle}
|
|
90
|
-
style={{
|
|
91
|
-
borderRadius,
|
|
92
|
-
padding,
|
|
93
|
-
overflow: 'hidden',
|
|
94
|
-
}}
|
|
95
91
|
onPress={onPress}
|
|
96
92
|
onPressIn={handlePressIn}
|
|
97
93
|
onPressOut={handlePressOut}
|
|
@@ -104,15 +100,25 @@ export function ActionButton(props: ActionButtonProps) {
|
|
|
104
100
|
{...rest}
|
|
105
101
|
>
|
|
106
102
|
{/* Icon Container */}
|
|
107
|
-
<View className={merge("flex items-start shrink-0", disabled && "opacity-60")}>
|
|
103
|
+
<View className={merge("flex items-start shrink-0", disabled && "opacity-60", iconClassName)}>
|
|
104
|
+
{iconWithColor}
|
|
105
|
+
</View>
|
|
108
106
|
|
|
109
107
|
{/* Label Container */}
|
|
110
108
|
<View className="shrink-0">
|
|
111
|
-
<Typography
|
|
109
|
+
<Typography
|
|
110
|
+
variant="label_large"
|
|
111
|
+
weight={labelWeight as any}
|
|
112
|
+
className={merge(textStyle, disabled && "opacity-60", labelClassName)}
|
|
113
|
+
>
|
|
112
114
|
{label}
|
|
113
115
|
</Typography>
|
|
114
116
|
{subtitle && (
|
|
115
|
-
<Typography
|
|
117
|
+
<Typography
|
|
118
|
+
variant="label_large"
|
|
119
|
+
weight={subtitleWeight as any}
|
|
120
|
+
className={merge(textStyle, disabled && "opacity-60", subtitleClassName)}
|
|
121
|
+
>
|
|
116
122
|
{subtitle}
|
|
117
123
|
</Typography>
|
|
118
124
|
)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { VariantProps } from "class-variance-authority";
|
|
2
2
|
import { PressableProps, View } from "react-native";
|
|
3
|
-
import { CornersEnum } from "../../enums";
|
|
3
|
+
import { CornersEnum, FontWeightEnum } from "../../enums";
|
|
4
4
|
import { menuCardVariants } from "./assets/class-variants";
|
|
5
5
|
|
|
6
6
|
export type ActionButtonVariant =
|
|
@@ -45,9 +45,31 @@ export interface ActionButtonProps
|
|
|
45
45
|
*/
|
|
46
46
|
disabled?: boolean;
|
|
47
47
|
/**
|
|
48
|
-
* Additional class names
|
|
48
|
+
* Additional class names for the main container
|
|
49
49
|
*/
|
|
50
50
|
className?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Additional class names for the icon container
|
|
53
|
+
*/
|
|
54
|
+
iconClassName?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Additional class names for the label text
|
|
57
|
+
*/
|
|
58
|
+
labelClassName?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Additional class names for the subtitle text
|
|
61
|
+
*/
|
|
62
|
+
subtitleClassName?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Font weight for the label text
|
|
65
|
+
* @default FontWeightEnum.MEDIUM
|
|
66
|
+
*/
|
|
67
|
+
labelWeight?: FontWeightEnum;
|
|
68
|
+
/**
|
|
69
|
+
* Font weight for the subtitle text
|
|
70
|
+
* @default FontWeightEnum.MEDIUM
|
|
71
|
+
*/
|
|
72
|
+
subtitleWeight?: FontWeightEnum;
|
|
51
73
|
/**
|
|
52
74
|
* Callback when card is pressed
|
|
53
75
|
*/
|