cpk-ui 0.8.0-beta.0 → 0.8.0-beta.1

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.
Files changed (7) hide show
  1. package/README.md +5 -4
  2. package/components/modals/AlertDialog/AlertDialog.d.ts +11 -5
  3. package/components/modals/AlertDialog/AlertDialog.d.ts.map +1 -1
  4. package/components/modals/AlertDialog/AlertDialog.js +46 -36
  5. package/components/uis/Button/Button.d.ts.map +1 -1
  6. package/components/uis/Button/Button.js +16 -13
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -10,7 +10,7 @@ maintained by Cross Platform Korea and uses
10
10
  [kstyled](https://crossplatformkorea.github.io/kstyled) for typed,
11
11
  compile-time-aware styling.
12
12
 
13
- `cpk-ui@0.8.0-beta.0` pairs with `kstyled@0.4.1`. Keep the runtime and Babel plugin on
13
+ `cpk-ui@0.8.0-beta.1` pairs with `kstyled@0.4.1`. Keep the runtime and Babel plugin on
14
14
  the same kstyled version.
15
15
 
16
16
  ## Install
@@ -18,7 +18,7 @@ the same kstyled version.
18
18
  ### Expo
19
19
 
20
20
  ```bash
21
- npx expo install cpk-ui@0.8.0-beta.0 kstyled@0.4.1 @expo/vector-icons \
21
+ npx expo install cpk-ui@0.8.0-beta.1 kstyled@0.4.1 @expo/vector-icons \
22
22
  react-native-gesture-handler react-native-svg expo-screen-orientation \
23
23
  react-native-reanimated @expo/match-media expo-haptics
24
24
  bun add --dev babel-plugin-kstyled@0.4.1
@@ -30,7 +30,7 @@ Install Expo modules first, then add the same runtime dependencies:
30
30
 
31
31
  ```bash
32
32
  npx install-expo-modules@latest
33
- bun add cpk-ui@0.8.0-beta.0 kstyled@0.4.1 @expo/vector-icons \
33
+ bun add cpk-ui@0.8.0-beta.1 kstyled@0.4.1 @expo/vector-icons \
34
34
  react-native-gesture-handler react-native-svg expo-screen-orientation \
35
35
  react-native-reanimated @expo/match-media expo-haptics
36
36
  bun add --dev babel-plugin-kstyled@0.4.1
@@ -112,7 +112,8 @@ main-branch GitHub Actions publish workflow with provenance.
112
112
  ## Documentation
113
113
 
114
114
  - [Storybook](https://ui.crossplatformkorea.com)
115
- - [0.8.0 beta release notes](./docs/releases/0.8.0-beta.0.md)
115
+ - [0.8.0-beta.1 release notes](./docs/releases/0.8.0-beta.1.md)
116
+ - [0.8.0-beta.0 release notes](./docs/releases/0.8.0-beta.0.md)
116
117
  - [0.7 engineering notes](./docs/blog/2026-07-11-cpk-ui-0.7.0.md)
117
118
  - [Performance guide](./docs/PERFORMANCE.md)
118
119
  - [Changelog](./CHANGELOG.md)
package/components/modals/AlertDialog/AlertDialog.d.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import React, { type ReactElement } from 'react';
2
2
  import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
3
3
  export type AlertDialogSizeType = 'small' | 'medium' | 'large' | number;
4
- export type AlertDialogProps = {
5
- style?: StyleProp<ViewStyle>;
6
- };
7
4
  export type AlertDialogStyles = {
8
5
  container?: StyleProp<ViewStyle>;
9
6
  titleContainer?: StyleProp<ViewStyle>;
@@ -22,10 +19,19 @@ export type AlertDialogOptions = {
22
19
  showCloseButton?: boolean;
23
20
  size?: AlertDialogSizeType;
24
21
  };
22
+ export type AlertDialogProps = {
23
+ style?: StyleProp<ViewStyle>;
24
+ visible?: boolean;
25
+ onClose?: () => void;
26
+ } & AlertDialogOptions;
25
27
  export type AlertDialogContext = {
26
28
  open(alertDialogOptions?: AlertDialogOptions): void;
27
29
  close(): void;
28
30
  };
29
- declare const _default: React.NamedExoticComponent<AlertDialogProps & React.RefAttributes<AlertDialogContext>>;
30
- export default _default;
31
+ export declare const AlertDialog: React.NamedExoticComponent<{
32
+ style?: StyleProp<ViewStyle>;
33
+ visible?: boolean;
34
+ onClose?: () => void;
35
+ } & AlertDialogOptions & React.RefAttributes<AlertDialogContext>>;
36
+ export default AlertDialog;
31
37
  //# sourceMappingURL=AlertDialog.d.ts.map
package/components/modals/AlertDialog/AlertDialog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AA6DlE,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpD,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;;AAqSF,wBAEE"}
1
+ {"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AA8DlE,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,kBAAkB,CAAC;AAEvB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpD,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;AAmUF,eAAO,MAAM,WAAW;YA3Ud,SAAS,CAAC,SAAS,CAAC;cAClB,OAAO;cACP,MAAM,IAAI;iEA2UrB,CAAC;AAEF,eAAe,WAAW,CAAC"}
package/components/modals/AlertDialog/AlertDialog.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useState, useCallback, useMemo, } from 'react';
3
- import { Modal, Platform, StyleSheet, TouchableWithoutFeedback, View, } from 'react-native';
3
+ import { KeyboardAvoidingView, Modal, Platform, StyleSheet, TouchableWithoutFeedback, View, } from 'react-native';
4
4
  import { styled, css } from 'kstyled';
5
5
  import { useTheme } from '../../../providers/ThemeProvider';
6
6
  import { Typography } from '../../uis/Typography/Typography';
@@ -52,33 +52,45 @@ const ActionRow = styled.View `
52
52
  padding-right: 4px;
53
53
  flex-direction: row;
54
54
  `;
55
- function AlertDialog({ style }, ref) {
56
- const [options, setOptions] = useState(null);
57
- const [visible, setVisible] = useState(false);
55
+ function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacityProp, body: bodyProp, closeOnTouchOutside: closeOnTouchOutsideProp, onClose, showCloseButton: showCloseButtonProp, size: sizeProp, style, styles: stylesProp, title: titleProp, visible: visibleProp, }, ref) {
56
+ const [openedOptions, setOpenedOptions] = useState(null);
57
+ const [uncontrolledVisible, setUncontrolledVisible] = useState(false);
58
58
  const { theme, themeType } = useTheme();
59
- // Memoize the cleanup effect
60
- useEffect(() => {
61
- if (!visible) {
62
- const timeoutId = setTimeout(() => {
63
- setOptions(null);
64
- // Run after modal has finished transition
65
- }, 300);
66
- return () => clearTimeout(timeoutId);
59
+ const isControlled = visibleProp !== undefined;
60
+ const visible = isControlled ? visibleProp : uncontrolledVisible;
61
+ const options = isControlled
62
+ ? {
63
+ actions: actionsProp,
64
+ backdropOpacity: backdropOpacityProp,
65
+ body: bodyProp,
66
+ closeOnTouchOutside: closeOnTouchOutsideProp,
67
+ showCloseButton: showCloseButtonProp,
68
+ size: sizeProp,
69
+ styles: stylesProp,
70
+ title: titleProp,
67
71
  }
68
- // Return an empty cleanup function when visible is true
69
- return () => { };
70
- }, [visible]);
71
- // Memoize the close handler
72
+ : openedOptions;
73
+ useEffect(() => {
74
+ if (isControlled || visible)
75
+ return;
76
+ const timeoutId = setTimeout(() => {
77
+ setOpenedOptions(null);
78
+ }, 300);
79
+ return () => clearTimeout(timeoutId);
80
+ }, [isControlled, visible]);
72
81
  const handleClose = useCallback(() => {
73
- setVisible(false);
74
- }, []);
75
- // Memoize the open handler
82
+ onClose?.();
83
+ if (!isControlled)
84
+ setUncontrolledVisible(false);
85
+ }, [isControlled, onClose]);
76
86
  const handleOpen = useCallback((alertDialogOptions) => {
77
- setVisible(true);
87
+ if (isControlled)
88
+ return;
89
+ setUncontrolledVisible(true);
78
90
  if (alertDialogOptions) {
79
- setOptions(alertDialogOptions);
91
+ setOpenedOptions(alertDialogOptions);
80
92
  }
81
- }, []);
93
+ }, [isControlled]);
82
94
  useImperativeHandle(ref, () => ({
83
95
  open: handleOpen,
84
96
  close: handleClose,
@@ -141,12 +153,10 @@ function AlertDialog({ style }, ref) {
141
153
  const containerStyles = useMemo(() => StyleSheet.flatten([shadowStyles, styles?.container]), [shadowStyles, styles?.container]);
142
154
  // Memoize backdrop press handler
143
155
  const handleBackdropPress = useCallback(() => {
144
- if (closeOnTouchOutside) {
145
- setVisible(false);
146
- }
147
- }, [closeOnTouchOutside]);
148
- // Memoize close button press handler
149
- const handleCloseButtonPress = useCallback(() => setVisible(false), []);
156
+ if (closeOnTouchOutside)
157
+ handleClose();
158
+ }, [closeOnTouchOutside, handleClose]);
159
+ const handleCloseButtonPress = handleClose;
150
160
  // Memoize title content
151
161
  const titleContent = useMemo(() => typeof title === 'string' ? (_jsx(Typography.Heading3, { style: [{ fontSize: sizeConfig.titleFontSize }, styles?.title], children: title })) : (title), [title, sizeConfig.titleFontSize, styles?.title]);
152
162
  // Memoize body content
@@ -166,12 +176,12 @@ function AlertDialog({ style }, ref) {
166
176
  sizeConfig.iconSize,
167
177
  theme.text.basic,
168
178
  ]);
179
+ const titleSlotStyle = useMemo(() => ({ flex: 1, minWidth: 0 }), []);
169
180
  const AlertDialogContent = useMemo(() => (_jsxs(Container, { style: css `
170
181
  background-color: ${backdropColor};
171
- `, children: [_jsx(TouchableWithoutFeedback, { onPress: closeOnTouchOutside ? handleCloseButtonPress : undefined, children: _jsx(View, { style: StyleSheet.absoluteFill }) }), _jsxs(AlertDialogContainer, { "$size": size, accessibilityRole: "alert", accessibilityLabel: typeof title === 'string' ? title : 'Alert dialog', style: containerStyles, children: [_jsxs(TitleRow, { style: styles?.titleContainer, children: [titleContent, closeButtonContent] }), _jsx(BodyRow, { "$marginTop": sizeConfig.bodyMarginTop, "$marginBottom": sizeConfig.bodyMarginBottom, style: styles?.bodyContainer, children: bodyContent }), actionsContent] })] })), [
182
+ `, children: [_jsx(TouchableWithoutFeedback, { onPress: handleBackdropPress, children: _jsx(View, { style: StyleSheet.absoluteFill, testID: "alert-dialog-backdrop" }) }), _jsxs(AlertDialogContainer, { "$size": size, accessibilityRole: "alert", accessibilityLabel: typeof title === 'string' ? title : 'Alert dialog', style: containerStyles, children: [_jsxs(TitleRow, { style: styles?.titleContainer, children: [_jsx(View, { style: titleSlotStyle, children: titleContent }), closeButtonContent] }), _jsx(BodyRow, { "$marginTop": sizeConfig.bodyMarginTop, "$marginBottom": sizeConfig.bodyMarginBottom, style: styles?.bodyContainer, children: bodyContent }), actionsContent] })] })), [
172
183
  backdropColor,
173
- closeOnTouchOutside,
174
- handleCloseButtonPress,
184
+ handleBackdropPress,
175
185
  title,
176
186
  size,
177
187
  containerStyles,
@@ -183,12 +193,12 @@ function AlertDialog({ style }, ref) {
183
193
  closeButtonContent,
184
194
  bodyContent,
185
195
  actionsContent,
196
+ titleSlotStyle,
186
197
  ]);
187
198
  return (
188
199
  // https://github.com/facebook/react-native/issues/48526#issuecomment-2579478884
189
- _jsx(View, { style: style, children: _jsx(Modal, { animationType: "fade", transparent: true, visible: visible, children: closeOnTouchOutside ? (_jsx(TouchableWithoutFeedback, { onPress: handleBackdropPress, style: css `
190
- flex: 1;
191
- `, children: AlertDialogContent })) : (AlertDialogContent) }) }));
200
+ _jsx(View, { style: style, children: _jsx(Modal, { animationType: "fade", onRequestClose: handleClose, transparent: true, visible: visible, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: keyboardAvoidingStyle, children: closeOnTouchOutside ? (_jsx(TouchableWithoutFeedback, { onPress: handleBackdropPress, children: AlertDialogContent })) : (AlertDialogContent) }) }) }));
192
201
  }
193
- // Export memoized component for better performance
194
- export default React.memo(forwardRef(AlertDialog));
202
+ const keyboardAvoidingStyle = { flex: 1 };
203
+ export const AlertDialog = React.memo(forwardRef(AlertDialogImpl));
204
+ export default AlertDialog;
package/components/uis/Button/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EACV,MAAM,EACN,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,SAAS,EACV,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AACvD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACzD,uBAAuB,CAAC,EAAE,IAAI,CAC5B,uBAAuB,EACvB,SAAS,GAAG,eAAe,GAAG,OAAO,CACtC,CAAC;IACF,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAgKF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,IAAc,EACd,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,OAAe,EACf,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAmB,EACnB,uBAAuB,EACvB,YAAgB,EAChB,YAAY,EACZ,OAAgD,EAChD,cAAc,EACd,kBAAkB,GACnB,EAAE,KAAK,GAAG,YAAY,CAsMtB;wBAGoC,OAAO,MAAM;AAAlD,wBAAmD"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EACV,MAAM,EACN,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,SAAS,EACV,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAGxC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AACvD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACzD,uBAAuB,CAAC,EAAE,IAAI,CAC5B,uBAAuB,EACvB,SAAS,GAAG,eAAe,GAAG,OAAO,CACtC,CAAC;IACF,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAkKF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,IAAc,EACd,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,OAAe,EACf,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAmB,EACnB,uBAAuB,EACvB,YAAgB,EAChB,YAAY,EACZ,OAAgD,EAChD,cAAc,EACd,kBAAkB,GACnB,EAAE,KAAK,GAAG,YAAY,CAuMtB;wBAGoC,OAAO,MAAM;AAAlD,wBAAmD"}
package/components/uis/Button/Button.js CHANGED
@@ -18,7 +18,7 @@ const ButtonContainer = styled.View `
18
18
  const calculateStyles = ({ theme, type, color, size, loading, disabled, borderRadius, hovered, styles, }) => {
19
19
  const isDisabled = disabled || loading;
20
20
  const padding = type === 'text'
21
- ? '8px'
21
+ ? '8px 16px'
22
22
  : typeof size === 'number'
23
23
  ? `${size * 0.6}px ${size * 1.2}px`
24
24
  : size === 'large'
@@ -94,16 +94,18 @@ const calculateStyles = ({ theme, type, color, size, loading, disabled, borderRa
94
94
  ]
95
95
  : undefined,
96
96
  disabled: isDisabled
97
- ? [
98
- css `
99
- background-color: ${theme.button.disabled.bg};
100
- border-top-color: ${theme.bg.disabled};
101
- border-bottom-color: ${theme.bg.disabled};
102
- border-left-color: ${theme.bg.disabled};
103
- border-right-color: ${theme.bg.disabled};
104
- `,
105
- styles?.disabled,
106
- ]
97
+ ? type === 'text'
98
+ ? styles?.disabled
99
+ : [
100
+ css `
101
+ background-color: ${theme.button.disabled.bg};
102
+ border-top-color: ${theme.bg.disabled};
103
+ border-bottom-color: ${theme.bg.disabled};
104
+ border-left-color: ${theme.bg.disabled};
105
+ border-right-color: ${theme.bg.disabled};
106
+ `,
107
+ styles?.disabled,
108
+ ]
107
109
  : undefined,
108
110
  };
109
111
  };
@@ -203,12 +205,13 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
203
205
  }, [onPress, hapticFeedback]);
204
206
  // Memoize button styles
205
207
  const buttonStyles = useMemo(() => [
208
+ type === 'text' ? { alignSelf: 'flex-start' } : null,
206
209
  style,
207
210
  css `
208
211
  border-radius: ${borderRadius}px;
209
212
  `,
210
- ], [style, borderRadius]);
211
- return (_jsx(TouchableHighlight, { accessibilityLabel: accessibilityLabel ?? (typeof text === 'string' ? text : undefined), accessibilityRole: "button", "aria-busy": loading, "aria-disabled": innerDisabled || loading || !onPress, activeOpacity: activeOpacity, delayPressIn: 30, disabled: innerDisabled || loading || !onPress, hitSlop: hitSlop, onPress: handlePress, style: buttonStyles, testID: testID, underlayColor: type === 'text' ? 'transparent' : theme.role.underlay, ...touchableHighlightProps, accessibilityState: {
213
+ ], [style, borderRadius, type]);
214
+ return (_jsx(TouchableHighlight, { accessibilityLabel: accessibilityLabel ?? (typeof text === 'string' ? text : undefined), accessibilityRole: "button", "aria-busy": loading, "aria-disabled": innerDisabled || loading || !onPress, activeOpacity: activeOpacity, delayPressIn: 30, disabled: innerDisabled || loading || !onPress, hitSlop: hitSlop, onPress: handlePress, style: buttonStyles, testID: testID, underlayColor: theme.role.underlay, ...touchableHighlightProps, accessibilityState: {
212
215
  ...touchableHighlightProps?.accessibilityState,
213
216
  busy: loading,
214
217
  disabled: innerDisabled || loading || !onPress,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cpk-ui",
3
- "version": "0.8.0-beta.0",
3
+ "version": "0.8.0-beta.1",
4
4
  "main": "index",
5
5
  "react-native": "index",
6
6
  "module": "index",