cpk-ui 0.7.0 → 0.8.0-beta.1

package/README.md

@@ -10,7 +10,7 @@ maintained by Cross Platform Korea and uses
 [kstyled](https://crossplatformkorea.github.io/kstyled) for typed,
 compile-time-aware styling.
 
-`cpk-ui@0.7.0` pairs with `kstyled@0.4.1`. Keep the runtime and Babel plugin on
+`cpk-ui@0.8.0-beta.1` pairs with `kstyled@0.4.1`. Keep the runtime and Babel plugin on
 the same kstyled version.
 
 ## Install
@@ -18,9 +18,9 @@ the same kstyled version.
 ### Expo
 
 ```bash
-npx expo install cpk-ui@0.7.0 kstyled@0.4.1 @expo/vector-icons \
+npx expo install cpk-ui@0.8.0-beta.1 kstyled@0.4.1 @expo/vector-icons \
   react-native-gesture-handler react-native-svg expo-screen-orientation \
-  @expo/match-media expo-haptics
+  react-native-reanimated @expo/match-media expo-haptics
 bun add --dev babel-plugin-kstyled@0.4.1
 ```
 
@@ -30,9 +30,9 @@ Install Expo modules first, then add the same runtime dependencies:
 
 ```bash
 npx install-expo-modules@latest
-bun add cpk-ui@0.7.0 kstyled@0.4.1 @expo/vector-icons \
+bun add cpk-ui@0.8.0-beta.1 kstyled@0.4.1 @expo/vector-icons \
   react-native-gesture-handler react-native-svg expo-screen-orientation \
-  @expo/match-media expo-haptics
+  react-native-reanimated @expo/match-media expo-haptics
 bun add --dev babel-plugin-kstyled@0.4.1
 ```
 
@@ -77,13 +77,13 @@ dark theme tokens. Applications that provide product-specific tokens can pass
 
 ## Component Surface
 
-| Area             | Components                                                             |
-| ---------------- | ---------------------------------------------------------------------- |
-| Actions          | Button, CustomPressable, Fab, IconButton                               |
-| Inputs           | Checkbox, EditText, RadioGroup, Rating, SegmentedControl, SwitchToggle |
-| Feedback         | AlertDialog, ErrorBoundary, LoadingIndicator, Snackbar                 |
-| Display          | Accordion, Card, Hr, Icon, Typography                                  |
-| Media and system | PinchZoom, StatusBarBrightness                                         |
+| Area             | Components                                                                       |
+| ---------------- | -------------------------------------------------------------------------------- |
+| Actions          | Button, CustomPressable, Fab, IconButton                                         |
+| Inputs           | Calendar, Checkbox, EditText, RadioGroup, Rating, SegmentedControl, SwitchToggle |
+| Feedback         | AlertDialog, ErrorBoundary, LoadingIndicator, Snackbar                           |
+| Display          | Accordion, Card, Hr, Icon, ParallaxHeader, Typography                            |
+| Media and system | PinchZoom, StatusBarBrightness                                                   |
 
 Each public component has automated tests and Storybook coverage for its main
 states. Use the [live Storybook](https://ui.crossplatformkorea.com) to inspect
@@ -91,7 +91,7 @@ controls, responsive behavior, accessibility results, and source examples.
 
 ## Release Matrix
 
-The 0.7.0 release is verified with Expo 54, React Native 0.81, React 19,
+The 0.8.0 beta is verified with Expo 54, React Native 0.81, React 19,
 kstyled 0.4, and React Native Web 0.21. This is the release validation matrix,
 not a claim that every consumer must use those exact React or React Native
 versions.
@@ -112,7 +112,8 @@ main-branch GitHub Actions publish workflow with provenance.
 ## Documentation
 
 - [Storybook](https://ui.crossplatformkorea.com)
-- [0.7.0 release notes](./docs/releases/0.7.0.md)
+- [0.8.0-beta.1 release notes](./docs/releases/0.8.0-beta.1.md)
+- [0.8.0-beta.0 release notes](./docs/releases/0.8.0-beta.0.md)
 - [0.7 engineering notes](./docs/blog/2026-07-11-cpk-ui-0.7.0.md)
 - [Performance guide](./docs/PERFORMANCE.md)
 - [Changelog](./CHANGELOG.md)

package/components/modals/AlertDialog/AlertDialog.d.ts

@@ -1,9 +1,6 @@
 import React, { type ReactElement } from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type AlertDialogSizeType = 'small' | 'medium' | 'large' | number;
-export type AlertDialogProps = {
-    style?: StyleProp<ViewStyle>;
-};
 export type AlertDialogStyles = {
     container?: StyleProp<ViewStyle>;
     titleContainer?: StyleProp<ViewStyle>;
@@ -22,10 +19,19 @@ export type AlertDialogOptions = {
     showCloseButton?: boolean;
     size?: AlertDialogSizeType;
 };
+export type AlertDialogProps = {
+    style?: StyleProp<ViewStyle>;
+    visible?: boolean;
+    onClose?: () => void;
+} & AlertDialogOptions;
 export type AlertDialogContext = {
     open(alertDialogOptions?: AlertDialogOptions): void;
     close(): void;
 };
-declare const _default: React.NamedExoticComponent<AlertDialogProps & React.RefAttributes<AlertDialogContext>>;
-export default _default;
+export declare const AlertDialog: React.NamedExoticComponent<{
+    style?: StyleProp<ViewStyle>;
+    visible?: boolean;
+    onClose?: () => void;
+} & AlertDialogOptions & React.RefAttributes<AlertDialogContext>>;
+export default AlertDialog;
 //# sourceMappingURL=AlertDialog.d.ts.map

package/components/modals/AlertDialog/AlertDialog.d.ts.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useState, useCallback, useMemo, } from 'react';
-import { Modal, Platform, StyleSheet, TouchableWithoutFeedback, View, } from 'react-native';
+import { KeyboardAvoidingView, Modal, Platform, StyleSheet, TouchableWithoutFeedback, View, } from 'react-native';
 import { styled, css } from 'kstyled';
 import { useTheme } from '../../../providers/ThemeProvider';
 import { Typography } from '../../uis/Typography/Typography';
@@ -52,33 +52,45 @@ const ActionRow = styled.View `
   padding-right: 4px;
   flex-direction: row;
 `;
-function AlertDialog({ style }, ref) {
-    const [options, setOptions] = useState(null);
-    const [visible, setVisible] = useState(false);
+function AlertDialogImpl({ actions: actionsProp, backdropOpacity: backdropOpacityProp, body: bodyProp, closeOnTouchOutside: closeOnTouchOutsideProp, onClose, showCloseButton: showCloseButtonProp, size: sizeProp, style, styles: stylesProp, title: titleProp, visible: visibleProp, }, ref) {
+    const [openedOptions, setOpenedOptions] = useState(null);
+    const [uncontrolledVisible, setUncontrolledVisible] = useState(false);
     const { theme, themeType } = useTheme();
-    // Memoize the cleanup effect
-    useEffect(() => {
-        if (!visible) {
-            const timeoutId = setTimeout(() => {
-                setOptions(null);
-                // Run after modal has finished transition
-            }, 300);
-            return () => clearTimeout(timeoutId);
+    const isControlled = visibleProp !== undefined;
+    const visible = isControlled ? visibleProp : uncontrolledVisible;
+    const options = isControlled
+        ? {
+            actions: actionsProp,
+            backdropOpacity: backdropOpacityProp,
+            body: bodyProp,
+            closeOnTouchOutside: closeOnTouchOutsideProp,
+            showCloseButton: showCloseButtonProp,
+            size: sizeProp,
+            styles: stylesProp,
+            title: titleProp,
         }
-        // Return an empty cleanup function when visible is true
-        return () => { };
-    }, [visible]);
-    // Memoize the close handler
+        : openedOptions;
+    useEffect(() => {
+        if (isControlled || visible)
+            return;
+        const timeoutId = setTimeout(() => {
+            setOpenedOptions(null);
+        }, 300);
+        return () => clearTimeout(timeoutId);
+    }, [isControlled, visible]);
     const handleClose = useCallback(() => {
-        setVisible(false);
-    }, []);
-    // Memoize the open handler
+        onClose?.();
+        if (!isControlled)
+            setUncontrolledVisible(false);
+    }, [isControlled, onClose]);
     const handleOpen = useCallback((alertDialogOptions) => {
-        setVisible(true);
+        if (isControlled)
+            return;
+        setUncontrolledVisible(true);
         if (alertDialogOptions) {
-            setOptions(alertDialogOptions);
+            setOpenedOptions(alertDialogOptions);
         }
-    }, []);
+    }, [isControlled]);
     useImperativeHandle(ref, () => ({
         open: handleOpen,
         close: handleClose,
@@ -141,12 +153,10 @@ function AlertDialog({ style }, ref) {
     const containerStyles = useMemo(() => StyleSheet.flatten([shadowStyles, styles?.container]), [shadowStyles, styles?.container]);
     // Memoize backdrop press handler
     const handleBackdropPress = useCallback(() => {
-        if (closeOnTouchOutside) {
-            setVisible(false);
-        }
-    }, [closeOnTouchOutside]);
-    // Memoize close button press handler
-    const handleCloseButtonPress = useCallback(() => setVisible(false), []);
+        if (closeOnTouchOutside)
+            handleClose();
+    }, [closeOnTouchOutside, handleClose]);
+    const handleCloseButtonPress = handleClose;
     // Memoize title content
     const titleContent = useMemo(() => typeof title === 'string' ? (_jsx(Typography.Heading3, { style: [{ fontSize: sizeConfig.titleFontSize }, styles?.title], children: title })) : (title), [title, sizeConfig.titleFontSize, styles?.title]);
     // Memoize body content
@@ -166,12 +176,12 @@ function AlertDialog({ style }, ref) {
         sizeConfig.iconSize,
         theme.text.basic,
     ]);
+    const titleSlotStyle = useMemo(() => ({ flex: 1, minWidth: 0 }), []);
     const AlertDialogContent = useMemo(() => (_jsxs(Container, { style: css `
           background-color: ${backdropColor};
-        `, 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] })] })), [
+        `, 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] })] })), [
         backdropColor,
-        closeOnTouchOutside,
-        handleCloseButtonPress,
+        handleBackdropPress,
         title,
         size,
         containerStyles,
@@ -183,12 +193,12 @@ function AlertDialog({ style }, ref) {
         closeButtonContent,
         bodyContent,
         actionsContent,
+        titleSlotStyle,
     ]);
     return (
     // https://github.com/facebook/react-native/issues/48526#issuecomment-2579478884
-    _jsx(View, { style: style, children: _jsx(Modal, { animationType: "fade", transparent: true, visible: visible, children: closeOnTouchOutside ? (_jsx(TouchableWithoutFeedback, { onPress: handleBackdropPress, style: css `
-              flex: 1;
-            `, children: AlertDialogContent })) : (AlertDialogContent) }) }));
+    _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) }) }) }));
 }
-// Export memoized component for better performance
-export default React.memo(forwardRef(AlertDialog));
+const keyboardAvoidingStyle = { flex: 1 };
+export const AlertDialog = React.memo(forwardRef(AlertDialogImpl));
+export default AlertDialog;

package/components/uis/Button/Button.d.ts.map

@@ -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"}
+{"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

@@ -18,7 +18,7 @@ const ButtonContainer = styled.View `
 const calculateStyles = ({ theme, type, color, size, loading, disabled, borderRadius, hovered, styles, }) => {
     const isDisabled = disabled || loading;
     const padding = type === 'text'
-        ? '8px'
+        ? '8px 16px'
         : typeof size === 'number'
             ? `${size * 0.6}px ${size * 1.2}px`
             : size === 'large'
@@ -94,16 +94,18 @@ const calculateStyles = ({ theme, type, color, size, loading, disabled, borderRa
             ]
             : undefined,
         disabled: isDisabled
-            ? [
-                css `
-            background-color: ${theme.button.disabled.bg};
-            border-top-color: ${theme.bg.disabled};
-            border-bottom-color: ${theme.bg.disabled};
-            border-left-color: ${theme.bg.disabled};
-            border-right-color: ${theme.bg.disabled};
-          `,
-                styles?.disabled,
-            ]
+            ? type === 'text'
+                ? styles?.disabled
+                : [
+                    css `
+              background-color: ${theme.button.disabled.bg};
+              border-top-color: ${theme.bg.disabled};
+              border-bottom-color: ${theme.bg.disabled};
+              border-left-color: ${theme.bg.disabled};
+              border-right-color: ${theme.bg.disabled};
+            `,
+                    styles?.disabled,
+                ]
             : undefined,
     };
 };
@@ -203,12 +205,13 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
     }, [onPress, hapticFeedback]);
     // Memoize button styles
     const buttonStyles = useMemo(() => [
+        type === 'text' ? { alignSelf: 'flex-start' } : null,
         style,
         css `
         border-radius: ${borderRadius}px;
       `,
-    ], [style, borderRadius]);
-    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: {
+    ], [style, borderRadius, type]);
+    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: {
             ...touchableHighlightProps?.accessibilityState,
             busy: loading,
             disabled: innerDisabled || loading || !onPress,

package/components/uis/Calendar/Calendar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CalendarProps, CalendarRef } from './types';
+export declare const Calendar: React.NamedExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
+export default Calendar;
+export * from './types';
+//# sourceMappingURL=Calendar.d.ts.map

package/components/uis/Calendar/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAWN,MAAM,OAAO,CAAC;AAuBf,OAAO,KAAK,EASV,aAAa,EACb,WAAW,EAIZ,MAAM,SAAS,CAAC;AAw3BjB,eAAO,MAAM,QAAQ,8EAA4C,CAAC;AAElE,eAAe,QAAQ,CAAC;AAExB,cAAc,SAAS,CAAC"}