cpk-ui 0.5.4 → 0.7.0

package/README.md

@@ -1,190 +1,123 @@
 # cpk-ui
 
-React Native UI components for [Expo](https://expo.dev).
-
-[![Npm Version](http://img.shields.io/npm/v/cpk-ui.svg?style=flat-square)](https://npmjs.org/package/cpk-ui)
-[![Downloads](http://img.shields.io/npm/dm/cpk-ui.svg?style=flat-square)](https://npmjs.org/package/cpk-ui)
+[![npm version](https://img.shields.io/npm/v/cpk-ui.svg?style=flat-square)](https://www.npmjs.com/package/cpk-ui)
 [![CI](https://github.com/crossplatformkorea/cpk-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/crossplatformkorea/cpk-ui/actions/workflows/ci.yml)
-[![codecov](https://codecov.io/gh/crossplatformkorea/cpk-ui/graph/badge.svg?token=LWZI4U369L)](https://codecov.io/gh/crossplatformkorea/cpk-ui)
-[![Publish](https://github.com/crossplatformkorea/cpk-ui/actions/workflows/publish.yml/badge.svg)](https://github.com/crossplatformkorea/cpk-ui/actions/workflows/publish.yml)
-[![Sponsor](https://opencollective.com/crossplatformkorea/tiers/badge.svg?style=shield)](https://opencollective.com/crossplatformkorea/tiers/badge.svg)
-
-<img src="https://github.com/user-attachments/assets/c31ac1c2-cc0e-4f13-a542-c35045c266cd" width="320"/>
-
-## Demo
-
-Check out [ui.crossplatformkorea.com](https://ui.crossplatformkorea.com)
-
-## Introduction
-
-`cpk-ui` is a foundational design system and UI components library managed by Cross-Platform Korea. It is built using our preferred technologies, including [kstyled](https://hyodotdev.github.io/kstyled), [typescript](https://www.typescriptlang.org/), [jest](https://jestjs.io), [react-native-testing-library](https://github.com/callstack/react-native-testing-library), [expo](https://expo.io), and [storybook](https://storybook.js.org).
+[![Storybook](https://img.shields.io/badge/storybook-live-ff4785?style=flat-square)](https://ui.crossplatformkorea.com)
+[![license](https://img.shields.io/npm/l/cpk-ui.svg?style=flat-square)](./LICENSE)
 
-### Philosophy
+React Native components with one API across iOS, Android, and web. cpk-ui is
+maintained by Cross Platform Korea and uses
+[kstyled](https://crossplatformkorea.github.io/kstyled) for typed,
+compile-time-aware styling.
 
-`cpk-ui` aims to provide user-friendly, lightweight, and adaptable UI components. It emphasizes customizable `theme` variations and a responsive layout to enhance developer experience.
+`cpk-ui@0.7.0` pairs with `kstyled@0.4.1`. Keep the runtime and Babel plugin on
+the same kstyled version.
 
-### Performance
+## Install
 
-`cpk-ui` is optimized for React Native performance using React's built-in optimization features:
+### Expo
 
-- **React.memo**: All components are wrapped to prevent unnecessary re-renders
-- **useCallback**: Event handlers are memoized for stable references
-- **useMemo**: Expensive calculations and styles are memoized
-- **110+ tests passing**: Comprehensive test coverage ensures reliability
-- **Zero breaking changes**: All optimizations maintain API compatibility
-
-For detailed performance information, see our [Performance Guide](docs/PERFORMANCE.md).
-
-### Installation
-
-#### For Expo
-
-```sh
-expo install cpk-ui kstyled @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media expo-haptics
-
-# Install dev dependencies
-npm install -D babel-plugin-kstyled
+```bash
+npx expo install cpk-ui@0.7.0 kstyled@0.4.1 @expo/vector-icons \
+  react-native-gesture-handler react-native-svg expo-screen-orientation \
+  @expo/match-media expo-haptics
+bun add --dev babel-plugin-kstyled@0.4.1
 ```
 
-#### For React Native CLI
+### React Native CLI
 
-```sh
-# Using yarn
-yarn add cpk-ui kstyled @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media
-yarn add -D babel-plugin-kstyled
+Install Expo modules first, then add the same runtime dependencies:
 
-# Install expo modules
+```bash
 npx install-expo-modules@latest
+bun add cpk-ui@0.7.0 kstyled@0.4.1 @expo/vector-icons \
+  react-native-gesture-handler react-native-svg expo-screen-orientation \
+  @expo/match-media expo-haptics
+bun add --dev babel-plugin-kstyled@0.4.1
 ```
 
-#### Configure Babel
-
-Add `babel-plugin-kstyled` to your `babel.config.js`:
+Configure kstyled before plugins that must run last:
 
-```javascript
+```js title="babel.config.js"
 module.exports = {
   presets: ['babel-preset-expo'],
-  plugins: ['babel-plugin-kstyled'],
+  plugins: [
+    ['babel-plugin-kstyled', {strict: true}],
+    'react-native-reanimated/plugin',
+  ],
 };
 ```
 
-### Usage
-
-We focus on supporting `iOS`, `Android`, and `web` platforms, enabling [expo](https://expo.io) users to write efficient and reliable cross-platform code. For more insights into the project’s direction, refer to the [cpk-ui strategy](https://github.com/hyochan/cpk-ui/issues).
-
-```tsx
-import {CpkProvider} from 'cpk-ui';
-
-<CpkProvider>
-  <App />
-</CpkProvider>;
-```
-
-## Theming
-
-> The embedded `theme` module functionality provides the ability to create `light` and `dark` themes.
-
-### Customizing Theme
-
-#### 1. Define colors for `light` and `dark` theme
-
-The `light` and `dark` theme color definitions are provided as examples above. They are objects that contain color properties for different UI components and states.
-
-#### 2. Integrating with `CpkProvider`
-
-When integrating with `CpkProvider`, you will provide your defined light and dark themes as the custom theme:
-
-```tsx
-<CpkProvider customTheme={{light, dark}}>
-  <App />
-</CpkProvider>
-```
-
-### Fonts
+## Provider
 
-`cpk-ui` uses [Pretendard](https://github.com/orioncactus/pretendard) as its default font. The fonts are automatically installed with `cpk-ui`, but you must confirm they are loaded using `assetLoaded` from `useCPK`.
+Wrap the application once near the root:
 
 ```tsx
-import {useCPK} from 'cpk-ui';
-
-const {assetLoaded} = useCPK();
+import {CpkProvider, useCPK} from 'cpk-ui';
 
-if (!assetLoaded) {
-  return <Loading />;
+export function Root() {
+  return (
+    <CpkProvider>
+      <App />
+    </CpkProvider>
+  );
 }
 
-return <Main />;
-```
-
-### Icons
-
-Integrate [Phosphoricons](https://phosphoricons.com) easily using the `Icon` component.
-
-```tsx
-import {Icon} from 'cpk-ui';
-
-<Icon name="..." color="#AAA" size={32} />;
-```
-
-### Installing Fonts (Recommended)
-
-`cpk-ui` uses [Pretendard](https://github.com/orioncactus/pretendard) as its default font. The font families include `Pretendard`, `Pretendard-Bold`, and `Pretendard-Thin`. From version `0.2.1`, these fonts are automatically installed when you add `cpk-ui`. However, it is important to ensure that the fonts are loaded properly using `assetLoaded` from the `CpkProvider`.
-
-```tsx
-import {useCPK} from 'cpk-ui';
-
-const {assetLoaded} = useCPK();
+function App() {
+  const {assetLoaded} = useCPK();
 
-if (!assetLoaded) {
-  // Render loading state
-  return ...;
+  if (!assetLoaded) return null;
+  return <Main />;
 }
-
-return <Main/>
 ```
 
-### Compatibility
+`CpkProvider` loads the bundled Pretendard font families and supplies light or
+dark theme tokens. Applications that provide product-specific tokens can pass
+`customTheme={{light, dark}}`.
 
-|      Package       | Version |
-| :----------------: | :-----: |
-|       react        | >=16.13 |
-|    react-native    | >=0.58  |
-|      kstyled       | >=0.1.0 |
-| @expo/vector-icons |   \*    |
+## Component Surface
 
-### Troubleshooting
+| 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                                         |
 
-#### Resolving Issues with "cpk-ui" on Expo Web
+Each public component has automated tests and Storybook coverage for its main
+states. Use the [live Storybook](https://ui.crossplatformkorea.com) to inspect
+controls, responsive behavior, accessibility results, and source examples.
 
-If you encounter errors when using "cpk-ui" with expo-web, follow these steps to configure webpack:
+## Release Matrix
 
-1. **Install `@expo/webpack-config`**
+The 0.7.0 release 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.
 
-```sh
-yarn add @expo/webpack-config
-```
+## Quality Gates
 
-2. **Configure Webpack**
+```bash
+bun run test:all
+bun run build
+bun run e2e-smoke
+bun run storybook:build
+bun run pack:dry
+```
 
-Create a `webpack.config.js` file in your project root and add the following configuration:
+The npm publish guard rejects local publishing. Releases run only from the
+main-branch GitHub Actions publish workflow with provenance.
 
-```javascript
-const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+## Documentation
 
-module.exports = async function (env, argv) {
-  const config = await createExpoWebpackConfigAsync(
-    {
-      ...env,
-      babel: {
-        dangerouslyAddModulePathsToTranspile: ['cpk-ui'],
-      },
-    },
-    argv,
-  );
-  return config;
-};
-```
+- [Storybook](https://ui.crossplatformkorea.com)
+- [0.7.0 release notes](./docs/releases/0.7.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)
+- [Contributing](./CONTRIBUTING.md)
 
-### Contributing
+## License
 
-Read the [Contributing Guide](./CONTRIBUTING.md) before submitting pull requests. Thank you to everyone contributing to this project!
+MIT

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;;AA+PF,wBAAyF"}
+{"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"}

package/components/modals/AlertDialog/AlertDialog.js

@@ -131,10 +131,12 @@ function AlertDialog({ style }, ref) {
         ? `rgba(0,0,0,${backdropOpacity})`
         : `rgba(255,255,255,${backdropOpacity})`, [themeType, backdropOpacity]);
     // Memoize shadow styles
-    const shadowStyles = useMemo(() => Platform.OS !== 'web' ? {
-        shadowOffset: { width: 0, height: 4 },
-        shadowColor: theme.text.basic,
-    } : {}, [theme.text.basic]);
+    const shadowStyles = useMemo(() => Platform.OS !== 'web'
+        ? {
+            shadowOffset: { width: 0, height: 4 },
+            shadowColor: theme.text.basic,
+        }
+        : {}, [theme.text.basic]);
     // Memoize container styles
     const containerStyles = useMemo(() => StyleSheet.flatten([shadowStyles, styles?.container]), [shadowStyles, styles?.container]);
     // Memoize backdrop press handler
@@ -158,10 +160,15 @@ function AlertDialog({ style }, ref) {
             },
         })) })) : null, [actions, sizeConfig.actionMarginTop, styles?.actionContainer]);
     // Memoize close button content
-    const closeButtonContent = useMemo(() => showCloseButton ? (_jsx(Button, { onPress: handleCloseButtonPress, borderRadius: 24, text: _jsx(Icon, { color: theme.text.basic, name: "X", size: sizeConfig.iconSize }), type: "text" })) : null, [showCloseButton, handleCloseButtonPress, sizeConfig.iconSize, theme.text.basic]);
+    const closeButtonContent = useMemo(() => showCloseButton ? (_jsx(Button, { accessibilityLabel: "Close dialog", onPress: handleCloseButtonPress, borderRadius: 24, text: _jsx(Icon, { color: theme.text.basic, name: "X", size: sizeConfig.iconSize }), type: "text" })) : null, [
+        showCloseButton,
+        handleCloseButtonPress,
+        sizeConfig.iconSize,
+        theme.text.basic,
+    ]);
     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] })] })), [
+          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] })] })), [
         backdropColor,
         closeOnTouchOutside,
         handleCloseButtonPress,

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2F,MAAM,OAAO,CAAC;AAChH,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAIlE,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,EAAS,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAKhE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAqCrE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC/B,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9C,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;;AA4LF,wBAAgF"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAKlE,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,EAAS,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAKhE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AA2CrE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC/B,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9C,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;;AAyNF,wBAAgF"}

package/components/modals/Snackbar/Snackbar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useImperativeHandle, useState, useCallback, useMemo } from 'react';
-import { Modal, Platform, SafeAreaView, StyleSheet, View } from 'react-native';
+import React, { forwardRef, useImperativeHandle, useState, useCallback, useMemo, } from 'react';
+import { Modal, Platform, StyleSheet, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { styled, css } from 'kstyled';
 import { SnackbarTimer } from './const';
 import { Button } from '../../uis/Button/Button';
@@ -70,7 +71,7 @@ function Snackbar({ style }, ref) {
         open: handleOpen,
         close: handleClose,
     }), [handleOpen, handleClose]);
-    const { text, styles, actionText, color = 'primary', size = 'medium' } = options ?? {};
+    const { text, styles, actionText, color = 'primary', size = 'medium', } = options ?? {};
     // Calculate sizes based on size prop
     const sizeConfig = useMemo(() => {
         if (typeof size === 'number') {
@@ -98,25 +99,27 @@ function Snackbar({ style }, ref) {
         }
     }, [size]);
     // Memoize shadow styles
-    const shadowStyles = useMemo(() => Platform.OS !== 'web' ? {
-        shadowOffset: { width: 0, height: 4 },
-        shadowColor: theme.text.basic,
-    } : {}, [theme.text.basic]);
+    const shadowStyles = useMemo(() => Platform.OS !== 'web'
+        ? {
+            shadowOffset: { width: 0, height: 4 },
+            shadowColor: theme.text.basic,
+        }
+        : {}, [theme.text.basic]);
     // Memoize container styles
     const containerStyles = useMemo(() => StyleSheet.flatten([shadowStyles, styles?.container]), [shadowStyles, styles?.container]);
     // Memoize text styles
     const textStyles = useMemo(() => StyleSheet.flatten([
         css `
-        color: ${theme.button[color].text};
-        font-size: ${sizeConfig.fontSize}px;
-      `,
+          color: ${theme.button[color].text};
+          font-size: ${sizeConfig.fontSize}px;
+        `,
         styles?.text,
     ]), [theme.button, color, sizeConfig.fontSize, styles?.text]);
     // Memoize action text styles
     const actionTextStyles = useMemo(() => StyleSheet.flatten([
         css `
-        color: ${theme.button[color].text};
-      `,
+          color: ${theme.button[color].text};
+        `,
         styles?.actionText,
     ]), [theme.button, color, styles?.actionText]);
     // Memoize action button handler
@@ -124,14 +127,14 @@ function Snackbar({ style }, ref) {
     // Memoize modal styles
     const modalStyles = useMemo(() => [
         css `
-      flex: 1;
-      align-self: stretch;
-    `,
+        flex: 1;
+        align-self: stretch;
+      `,
         style,
     ], [style]);
-    const SnackbarContent = useMemo(() => (_jsx(Container, { children: _jsxs(SnackbarContainer, { "$color": color, "$size": size, style: containerStyles, children: [_jsx(SnackbarText, { "$color": color, "$size": size, style: textStyles, children: text }), _jsx(ActionContainer, { style: styles?.actionContainer, children: actionText ? (_jsx(Button, { onPress: handleActionPress, styles: {
+    const SnackbarContent = useMemo(() => (_jsx(Container, { children: _jsxs(SnackbarContainer, { "$color": color, "$size": size, accessibilityLabel: text, accessibilityLiveRegion: "polite", accessibilityRole: "alert", style: containerStyles, testID: "snackbar-container", children: [_jsx(SnackbarText, { "$color": color, "$size": size, style: textStyles, children: text }), _jsx(ActionContainer, { style: styles?.actionContainer, children: actionText ? (_jsx(Button, { accessibilityLabel: actionText, onPress: handleActionPress, styles: {
                             text: actionTextStyles,
-                        }, text: actionText, type: "text" })) : (_jsx(Button, { onPress: handleActionPress, text: _jsx(Icon, { color: theme.button[color].text, name: "X", size: sizeConfig.iconSize }), type: "text" })) })] }) })), [
+                        }, text: actionText, type: "text" })) : (_jsx(Button, { accessibilityLabel: "Dismiss notification", onPress: handleActionPress, text: _jsx(Icon, { color: theme.button[color].text, name: "X", size: sizeConfig.iconSize }), type: "text" })) })] }) })), [
         color,
         size,
         containerStyles,

package/components/uis/Accordion/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAAoD,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AAQlG,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AA+DpD,MAAM,MAAM,qBAAqB,CAAC,CAAC,EAAE,CAAC,IAAI;IACxC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC3E,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,EAClC,MAAM,EACN,IAAI,EAAE,IAAI,EACV,IAAe,EACf,aAAoB,EACpB,eAAsB,EACtB,YAAkB,EAClB,aAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,WAAW,EACX,UAAU,EACV,MAAM,GACP,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CA8M5B;wBAG2C,OAAO,aAAa;AAAhE,wBAAiE"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAMZ,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AA+DpD,MAAM,MAAM,qBAAqB,CAAC,CAAC,EAAE,CAAC,IAAI;IACxC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC3E,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,EAClC,MAAM,EACN,IAAI,EAAE,IAAI,EACV,IAAe,EACf,aAAoB,EACpB,eAAsB,EACtB,YAAkB,EAClB,aAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,WAAW,EACX,UAAU,EACV,MAAM,GACP,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CAmR5B;wBAG2C,OAAO,aAAa;AAAhE,wBAAiE"}

package/components/uis/Accordion/AccordionItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Caveat: Expo web needs React to be imported
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { Animated, Easing, TouchableOpacity, View } from 'react-native';
 import { styled, css } from 'kstyled';
 import { Icon } from '../Icon/Icon';
@@ -75,8 +75,12 @@ export function AccordionItem({ testID, data: data, size = 'medium', shouldAnima
     // Calculate icon size based on accordion size
     const iconSize = typeof size === 'number'
         ? size * 0.7
-        : size === 'small' ? 12 : size === 'large' ? 16 : 14;
-    const defaultToggleElement = _jsx(StyledIcon, { name: "CaretDown", "$size": size, size: iconSize });
+        : size === 'small'
+            ? 12
+            : size === 'large'
+                ? 16
+                : 14;
+    const defaultToggleElement = (_jsx(StyledIcon, { name: "CaretDown", "$size": size, size: iconSize }));
     const dropDownAnimValueRef = useRef(new Animated.Value(0));
     const rotateAnimValueRef = useRef(new Animated.Value(0));
     const fadeItemAnim = useRef(new Animated.Value(0)).current;
@@ -124,12 +128,18 @@ export function AccordionItem({ testID, data: data, size = 'medium', shouldAnima
     // Calculate margin based on size
     const toggleMargin = typeof size === 'number'
         ? size * 0.6
-        : size === 'small' ? 10 : size === 'large' ? 14 : 12;
+        : size === 'small'
+            ? 10
+            : size === 'large'
+                ? 14
+                : 12;
     // Memoize toggle element container
     const toggleElContainer = useMemo(() => (_jsx(Animated.View, { style: [
             css `
-          margin-right: ${toggleElementPosition === 'left' ? toggleMargin : 0}px;
-        `,
+            margin-right: ${toggleElementPosition === 'left'
+                ? toggleMargin
+                : 0}px;
+          `,
             {
                 transform: [
                     {
@@ -141,22 +151,28 @@ export function AccordionItem({ testID, data: data, size = 'medium', shouldAnima
                 ],
             },
             styles?.toggleElement,
-        ], children: toggleElement || defaultToggleElement })), [toggleElement, defaultToggleElement, toggleElementPosition, toggleMargin, styles?.toggleElement]);
+        ], children: toggleElement || defaultToggleElement })), [
+        toggleElement,
+        defaultToggleElement,
+        toggleElementPosition,
+        toggleMargin,
+        styles?.toggleElement,
+    ]);
     // Memoize container styles
     const containerStyles = useMemo(() => [
         css `
-      background-color: transparent;
-      overflow: hidden;
-      flex-direction: column-reverse;
-    `,
+        background-color: transparent;
+        overflow: hidden;
+        flex-direction: column-reverse;
+      `,
         styles?.container,
     ], [styles?.container]);
     const titleContainerStyles = useMemo(() => [
         css `
-      justify-content: ${toggleElementPosition === 'right'
+        justify-content: ${toggleElementPosition === 'right'
             ? 'space-between'
             : 'flex-start'};
-    `,
+      `,
         styles?.titleContainer,
     ], [toggleElementPosition, styles?.titleContainer]);
     // Memoize animated styles
@@ -172,14 +188,22 @@ export function AccordionItem({ testID, data: data, size = 'medium', shouldAnima
     // Calculate font sizes based on size prop
     const titleFontSize = typeof size === 'number'
         ? size
-        : size === 'small' ? 14 : size === 'large' ? 18 : 16;
+        : size === 'small'
+            ? 14
+            : size === 'large'
+                ? 18
+                : 16;
     const itemFontSize = typeof size === 'number'
         ? size * 0.875
-        : size === 'small' ? 12 : size === 'large' ? 16 : 14;
-    return (_jsxs(Animated.View, { style: containerStyles, children: [_jsx(View, { onLayout: handleLayout, style: css `
+        : size === 'small'
+            ? 12
+            : size === 'large'
+                ? 16
+                : 14;
+    return (_jsxs(Animated.View, { style: containerStyles, children: [_jsx(View, { accessibilityElementsHidden: true, "aria-hidden": true, importantForAccessibility: "no-hide-descendants", onLayout: handleLayout, style: css `
           position: absolute;
           opacity: 0;
-        `, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, onPress: () => handleItemPress(body), "$size": size, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: [{ fontSize: itemFontSize }, styles?.itemText], children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsx(Animated.View, { accessibilityState: { expanded: !collapsed }, style: animatedItemStyles, testID: `body-${testID}`, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, onPress: () => handleItemPress(body), style: styles?.itemContainer, "$size": size, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: [{ fontSize: itemFontSize }, styles?.itemText], children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsxs(TitleTouch, { activeOpacity: activeOpacity, onPress: handleToggle, accessibilityRole: "button", accessibilityLabel: typeof data.title === 'string' ? data.title : 'Accordion section', accessibilityState: { expanded: !collapsed }, accessibilityHint: collapsed ? 'Double tap to expand' : 'Double tap to collapse', style: titleContainerStyles, testID: `title-${testID}`, "$size": size, children: [toggleElementPosition === 'left' ? toggleElContainer : null, typeof data.title === 'string' && !renderTitle ? (_jsx(Typography.Heading4, { style: [{ fontSize: titleFontSize }, styles?.titleText], children: data.title })) : (renderTitle?.(data.title)), toggleElementPosition === 'right' ? toggleElContainer : null] })] }));
+        `, testID: `measure-body-${testID}`, children: data.items.map((body, index) => (_jsx(ItemTouch, { accessible: false, activeOpacity: activeOpacity, disabled: true, onPress: () => handleItemPress(body), "$size": size, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: [{ fontSize: itemFontSize }, styles?.itemText], children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsx(Animated.View, { accessibilityElementsHidden: collapsed, accessibilityState: { expanded: !collapsed }, "aria-hidden": collapsed, importantForAccessibility: collapsed ? 'no-hide-descendants' : 'auto', style: animatedItemStyles, testID: `body-${testID}`, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, disabled: collapsed, onPress: () => handleItemPress(body), style: styles?.itemContainer, "$size": size, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: [{ fontSize: itemFontSize }, styles?.itemText], children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsxs(TitleTouch, { activeOpacity: activeOpacity, "aria-expanded": !collapsed, onPress: handleToggle, accessibilityRole: "button", accessibilityLabel: typeof data.title === 'string' ? data.title : 'Accordion section', accessibilityState: { expanded: !collapsed }, accessibilityHint: collapsed ? 'Double tap to expand' : 'Double tap to collapse', style: titleContainerStyles, testID: `title-${testID}`, "$size": size, children: [toggleElementPosition === 'left' ? toggleElContainer : null, typeof data.title === 'string' && !renderTitle ? (_jsx(Typography.Heading4, { style: [{ fontSize: titleFontSize }, styles?.titleText], children: data.title })) : (renderTitle?.(data.title)), toggleElementPosition === 'right' ? toggleElContainer : null] })] }));
 }
 // Export memoized component for better performance
 export default React.memo(AccordionItem);

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

@@ -24,6 +24,7 @@ export type Props = {
     touchableHighlightProps?: Omit<TouchableHighlightProps, 'onPress' | 'activeOpacity' | 'style'>;
     hitSlop?: null | Insets | number | undefined;
     hapticFeedback?: Haptics.ImpactFeedbackStyle;
+    accessibilityLabel?: string;
 };
 type Styles = {
     container?: StyleProp<ViewStyle>;
@@ -34,7 +35,7 @@ type Styles = {
     disabledText?: StyleProp<TextStyle>;
     hovered?: StyleProp<ViewStyle>;
 };
-export declare function Button({ testID, type, color, size, disabled, loading, loadingElement, text, startElement, endElement, style, styles, onPress, activeOpacity, touchableHighlightProps, borderRadius, loadingColor, hitSlop, hapticFeedback, }: Props): ReactElement;
+export declare function Button({ testID, type, color, size, disabled, loading, loadingElement, text, startElement, endElement, style, styles, onPress, activeOpacity, touchableHighlightProps, borderRadius, loadingColor, hitSlop, hapticFeedback, accessibilityLabel, }: Props): ReactElement;
 declare const _default: typeof Button;
 export default _default;
 //# sourceMappingURL=Button.d.ts.map

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,EAA+B,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EACV,MAAM,EACN,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,SAAS,EACV,MAAM,cAAc,CAAC;AAUtB,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAExC,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;CAC9C,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,GACf,EAAE,KAAK,GAAG,YAAY,CA6LtB;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;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"}

package/components/uis/Button/Button.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useRef } from 'react';
-import { Platform, TouchableHighlight, View } from 'react-native';
-import { useHover } from 'react-native-web-hooks';
+import React, { useCallback, useMemo } from 'react';
+import { TouchableHighlight, View } from 'react-native';
 import { styled, css } from 'kstyled';
 import { useTheme } from '../../../providers/ThemeProvider';
 import { cloneElemWithDefaultColors } from '../../../utils/guards';
 import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator';
 import { Typography } from '../Typography/Typography';
 import * as Haptics from 'expo-haptics';
+import { useHoverState } from '../../../hooks/useHoverState';
 const ButtonContainer = styled.View `
   align-self: stretch;
   flex-direction: row;
@@ -114,9 +114,8 @@ const useButtonState = ({ disabled, onPress, loading, }) => {
         isLoading: loading,
     }), [disabled, onPress, loading]);
 };
-export function Button({ testID, type = 'solid', color = 'primary', size = 'medium', disabled, loading = false, loadingElement, text, startElement, endElement, style, styles, onPress, activeOpacity = 0.8, touchableHighlightProps, borderRadius = 4, loadingColor, hitSlop = { top: 8, bottom: 8, left: 8, right: 8 }, hapticFeedback, }) {
-    const ref = useRef(null);
-    const hovered = useHover(ref);
+export function Button({ testID, type = 'solid', color = 'primary', size = 'medium', disabled, loading = false, loadingElement, text, startElement, endElement, style, styles, onPress, activeOpacity = 0.8, touchableHighlightProps, borderRadius = 4, loadingColor, hitSlop = { top: 8, bottom: 8, left: 8, right: 8 }, hapticFeedback, accessibilityLabel, }) {
+    const { hovered, hoverProps } = useHoverState();
     const { theme } = useTheme();
     const { innerDisabled } = useButtonState({ disabled, onPress, loading });
     // Memoize styles calculation
@@ -183,7 +182,7 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
             `,
             innerDisabled && compositeStyles.disabled,
             !!borderRadius && { borderRadius },
-        ], testID: loading ? 'loading-view' : 'button-container', "$type": type, children: [_jsx(View, { style: compositeStyles.content, children: children }), _jsx(View, { style: compositeStyles.loading, children: loadingView })] })), [
+        ], testID: loading ? 'loading-view' : 'button-container', "$type": type, children: [_jsx(View, { style: compositeStyles.content, children: children }), _jsx(View, { style: compositeStyles.loading, children: loading ? loadingView : null })] })), [
         innerDisabled,
         size,
         compositeStyles.container,
@@ -209,10 +208,11 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
         border-radius: ${borderRadius}px;
       `,
     ], [style, borderRadius]);
-    return (_jsx(TouchableHighlight, { activeOpacity: activeOpacity, delayPressIn: 30, disabled: innerDisabled || loading || !onPress, hitSlop: hitSlop, onPress: handlePress, ref: Platform.select({
-            web: ref,
-            default: undefined,
-        }), style: buttonStyles, testID: testID, underlayColor: type === 'text' ? 'transparent' : theme.role.underlay, ...touchableHighlightProps, children: renderContainer({
+    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: {
+            ...touchableHighlightProps?.accessibilityState,
+            busy: loading,
+            disabled: innerDisabled || loading || !onPress,
+        }, ...hoverProps, children: renderContainer({
             children: ChildView,
             loadingView: LoadingView,
         }) }));

package/components/uis/Card/Card.d.ts

@@ -11,6 +11,7 @@ type Styles = {
 };
 export type CardProps = {
     testID?: string;
+    accessibilityLabel?: string;
     children?: React.ReactNode;
     elevation?: number;
     borderRadius?: number;
@@ -21,6 +22,6 @@ export type CardProps = {
     styles?: Styles;
     onPress?: () => void;
 };
-export default function Card({ testID, children, elevation, borderRadius, padding, margin, backgroundColor, style, styles, onPress, }: CardProps): JSX.Element;
+export default function Card({ testID, accessibilityLabel, children, elevation, borderRadius, padding, margin, backgroundColor, style, styles, onPress, }: CardProps): JSX.Element;
 export { Card };
 //# sourceMappingURL=Card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Card/Card.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAMvD,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,MAAyB,EACzB,QAAQ,EACR,SAAa,EACb,YAAgB,EAChB,OAAY,EACZ,MAAU,EACV,eAAe,EACf,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAgDzB;AAYD,OAAO,EAAC,IAAI,EAAC,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Card/Card.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAMvD,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,MAAyB,EACzB,kBAAkB,EAClB,QAAQ,EACR,SAAa,EACb,YAAgB,EAChB,OAAY,EACZ,MAAU,EACV,eAAe,EACf,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA6DzB;AAYD,OAAO,EAAC,IAAI,EAAC,CAAC"}