@kivid/native-components 1.0.0-alpha.11 → 1.0.0-alpha.12
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/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.12",
|
|
4
4
|
"description": "A React Native component library for the Butterfly Design System.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -90,8 +90,8 @@
|
|
|
90
90
|
"react-native-svg": "^15.12.0",
|
|
91
91
|
"react-native": "0.79.5",
|
|
92
92
|
"react": "19.0.0",
|
|
93
|
-
"@kivid/
|
|
94
|
-
"@kivid/
|
|
93
|
+
"@kivid/icons": "1.0.0-alpha.10",
|
|
94
|
+
"@kivid/tailwind-preset": "1.0.0-alpha.10"
|
|
95
95
|
},
|
|
96
96
|
"eslintIgnore": [
|
|
97
97
|
"node_modules/",
|
|
@@ -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
|
*/
|