Do improvements, build and test

.eslintrc.json

@@ -10,6 +10,7 @@
     "plugin:unicorn/recommended",
     "prettier"
   ],
+  "ignorePatterns": ["dist/"],
   "parserOptions": {
     "project": "./tsconfig.json"
   },
@@ -25,6 +26,7 @@
     ],
     "@typescript-eslint/consistent-type-exports": "error",
     "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/lines-between-class-members": "off",
     "@typescript-eslint/naming-convention": [
       "error",
       {

app/package.json

@@ -15,7 +15,7 @@
     "react": "18.2.0",
     "react-native": "0.74.3",
     "react-native-safe-area-context": "4.10.1",
-    "react-native-unistyles": "^2.8.1"
+    "react-native-unistyles": "^2.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

package.json

@@ -11,15 +11,15 @@
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@react-native/normalize-colors": "^0.74.85",
-    "@storybook/addon-a11y": "^8.1.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@testing-library/dom": "^10.3.0",
+    "@storybook/addon-a11y": "^8.2.1",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/react-vite": "^8.2.1",
+    "@testing-library/dom": "^10.3.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/react": "~18.2.79",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "babel-preset-expo": "~11.0.12",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -31,20 +31,20 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-unicorn": "^54.0.0",
     "jsdom": "^24.1.0",
-    "pkgroll": "^2.1.1",
     "prettier": "^3.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.3",
-    "react-native-unistyles": "^2.8.1",
+    "react-native-unistyles": "^2.8.3",
     "react-test-renderer": "18.2.0",
-    "storybook": "^8.1.11",
+    "storybook": "^8.2.1",
+    "tsup": "^8.1.0",
     "typescript": "^5.5.3",
     "vite": "^5.3.3",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.1"
   },
   "scripts": {
-    "build": "yarn workspaces foreach -Apt run build",
+    "build": "yarn workspaces foreach -Apt --no-private run build",
     "format": "prettier --write .",
     "lint": "eslint .",
     "storybook": "sb dev",

packages/components/package.json

@@ -23,6 +23,6 @@
     }
   },
   "scripts": {
-    "build": "pkgroll"
+    "build": "tsup src/index.ts src/*/index.ts"
   }
 }

packages/components/src/Button/Button.native.tsx

@@ -24,6 +24,7 @@ export const Button = forwardRef<any, ButtonProps>(
     {
       children,
       disabled = false,
+      lang,
       onBlur,
       onFocus,
       onFocusVisible,
@@ -70,6 +71,7 @@ export const Button = forwardRef<any, ButtonProps>(
     return (
       <ButtonRoot
         ref={ref}
+        accessibilityLanguage={lang}
         disabled={disabled}
         role={normalizeRole(role) ?? 'button'}
         style={_style}

packages/components/src/Button/Button.stories.tsx

@@ -14,5 +14,10 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     children: <Text>Button</Text>,
+    sx: {
+      backgroundColor: '#ddd',
+      borderRadius: '1',
+      padding: 1,
+    },
   },
 };

packages/components/src/Button/Button.tsx

@@ -54,7 +54,7 @@ export const Button = forwardRef<HTMLElement & ButtonMethods, ButtonProps>(
       tabIndex,
       type,
       ...props
-    },
+    }: ButtonProps,
     ref,
   ) => {
     const hostRef = useRef<HTMLElement>();

packages/components/src/Container/Container.tsx

@@ -39,9 +39,9 @@ const ContainerRoot = styled(View)<{ ownerState: ContainerOwnerState }>(
   ({ runtime, theme }) => ({
     marginInline: 'auto',
     paddingInline: {
-      xs: max(theme.space[4], runtime.insets.left, runtime.insets.right) as any,
-      sm: max(theme.space[6], runtime.insets.left, runtime.insets.right) as any,
-      md: max(theme.space[7], runtime.insets.left, runtime.insets.right) as any,
+      xs: max(theme.space[4], runtime.insets.left, runtime.insets.right),
+      sm: max(theme.space[6], runtime.insets.left, runtime.insets.right),
+      md: max(theme.space[7], runtime.insets.left, runtime.insets.right),
     },
     width: '100%',
   }),

packages/components/src/Modal/Modal.native.tsx

@@ -26,6 +26,7 @@ export const Modal = forwardRef<any, ModalProps>(
       backdropStyle,
       children,
       hideBackdrop = false,
+      lang,
       onClose,
       onLayout,
       onMoveShouldSetResponder,
@@ -70,6 +71,7 @@ export const Modal = forwardRef<any, ModalProps>(
       <ModalRoot
         ref={ref}
         transparent
+        accessibilityLanguage={lang}
         animationType="fade"
         aria-live="polite"
         aria-modal={role === 'dialog' || role === 'alertdialog' ? true : undefined}

packages/components/src/Modal/Modal.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useComposedRefs } from '@tamagui/compose-refs';
 import type { AnyProps } from '@universal-ui/core';
 import {

packages/components/src/ScrollView/ScrollView.native.tsx

@@ -19,6 +19,7 @@ export const ScrollView = forwardRef<any, ScrollViewProps>(
   (
     {
       contentContainerStyle,
+      lang,
       onLayout,
       onMoveShouldSetResponder,
       onMoveShouldSetResponderCapture,
@@ -42,6 +43,7 @@ export const ScrollView = forwardRef<any, ScrollViewProps>(
   ) => (
     <ScrollViewRoot
       ref={ref}
+      accessibilityLanguage={lang}
       contentContainerStyle={contentContainerStyle as any}
       refreshControl={refreshControl as any}
       role={normalizeRole(role)}

packages/components/src/ScrollView/ScrollView.types.tsx

@@ -43,7 +43,7 @@ export interface ScrollViewProps
       | 'onScroll'
       | 'refreshControl'
     >,
-    ViewProps {
+    Omit<ViewProps, 'href' | 'hrefAttrs'> {
   /**
    * These styles will be applied to the ScrollView content container which
    * wraps all of the child views.
@@ -75,7 +75,7 @@ export interface ScrollViewProps
    * A RefreshControl component, used to provide pull-to-refresh functionality
    * for the ScrollView.
    */
-  refreshControl?: React.ReactElement<Omit<RNRefreshControlProps, keyof ViewProps> & ViewProps>;
+  refreshControl?: React.ReactElement<Omit<RNRefreshControlProps, keyof RNViewProps> & ViewProps>;
   /**
    * The system prop that allows defining system overrides as well as additional
    * CSS styles.

packages/components/src/Stack/Stack.tsx

@@ -60,19 +60,21 @@ function joinChildren(children: React.ReactNode, divider: React.ReactElement) {
 const StackRoot = styled(View, {
   name: 'Stack',
   slot: 'Root',
-})<{ ownerState: StackOwnerState }>(({ ownerState, theme }) => ({
-  ...handleBreakpoints(
-    { theme },
-    ownerState.direction,
-    (propValue: 'row' | 'row-reverse' | 'column' | 'column-reverse') => ({
-      flexDirection: propValue,
-    }),
-  ),
-  ...handleBreakpoints({ theme }, ownerState.spacing, (propValue: number) => ({
-    // @ts-expect-error: It's fine as we check if `propValue` exists in space.
-    gap: theme.space[propValue] ?? propValue,
-  })),
-}));
+})<{ ownerState: StackOwnerState }>(
+  ({ ownerState, theme }) =>
+    handleBreakpoints(
+      { theme },
+      ownerState.direction,
+      (propValue: 'row' | 'row-reverse' | 'column' | 'column-reverse') => ({
+        flexDirection: propValue,
+      }),
+    ),
+  ({ ownerState, theme }) =>
+    handleBreakpoints({ theme }, ownerState.spacing, (propValue: number) => ({
+      // @ts-expect-error: It's fine as we check if `propValue` exists in space.
+      gap: theme.space[propValue] ?? propValue,
+    })),
+);
 
 export const Stack = forwardRef<ViewMethods, StackProps>(
   ({ children, direction = 'column', divider, spacing = 0, ...props }, ref) => {

packages/components/src/Text/Text.native.tsx

@@ -14,10 +14,11 @@ const TextRoot = styled(RNText, {
 }));
 
 export const Text = forwardRef<any, TextProps>(
-  ({ 'aria-hidden': ariaHidden, onLayout, role, style, ...props }, ref) => (
+  ({ 'aria-hidden': ariaHidden, lang, onLayout, role, style, ...props }, ref) => (
     <TextRoot
       ref={ref}
       accessibilityElementsHidden={ariaHidden}
+      accessibilityLanguage={lang}
       aria-hidden={ariaHidden}
       importantForAccessibility={ariaHidden ? 'no-hide-descendants' : undefined}
       role={normalizeRole(role)}

packages/components/src/TextInput/TextInput.native.tsx

@@ -25,6 +25,7 @@ export const TextInput = forwardRef<any, TextInputProps>(
   (
     {
       'aria-label': ariaLabel,
+      lang,
       onChangeText,
       onContentSizeChange,
       onLayout,
@@ -74,6 +75,7 @@ export const TextInput = forwardRef<any, TextInputProps>(
       <TextInputRoot
         ref={ref}
         accessibilityLabel={ariaLabel}
+        accessibilityLanguage={lang}
         role={normalizeRole(role)}
         style={style as any}
         onChangeText={handleChangeText}

packages/components/src/View/View.native.tsx

@@ -18,6 +18,7 @@ const ViewRoot = styled(RNView, {
 export const View = forwardRef<any, ViewProps>(
   (
     {
+      lang,
       onLayout,
       onMoveShouldSetResponder,
       onMoveShouldSetResponderCapture,
@@ -39,6 +40,7 @@ export const View = forwardRef<any, ViewProps>(
   ) => (
     <ViewRoot
       ref={ref}
+      accessibilityLanguage={lang}
       role={normalizeRole(role)}
       style={style as any}
       onMoveShouldSetResponder={normalizeResponderEvent(onMoveShouldSetResponder)}

packages/components/src/View/View.test.tsx

@@ -28,7 +28,7 @@ describe('View', () => {
   });
 
   describe('raw text nodes as children', () => {
-    let consoleErrorMock: MockInstance<[...params: any[]], void>;
+    let consoleErrorMock: MockInstance<(...params: any[]) => void>;
 
     beforeEach(() => {
       consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});

packages/components/tsup.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  clean: true,
+  dts: true,
+  format: ['cjs', 'esm'],
+});

packages/core/package.json

@@ -4,10 +4,10 @@
   "main": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "@emotion/css": "^11.11.2",
+    "@emotion/css": "^11.12.0",
     "@emotion/react": "^11.11.4",
-    "@emotion/serialize": "^1.1.4",
-    "@emotion/utils": "^1.2.1",
+    "@emotion/serialize": "^1.2.0",
+    "@emotion/utils": "^1.3.0",
     "@react-native/normalize-colors": "^0.74.85",
     "@tamagui/constants": "^1.101.7",
     "@tamagui/react-native-use-responder-events": "^1.101.7",
@@ -18,13 +18,13 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.3",
-    "react-native-unistyles": "^2.8.1"
+    "react-native-unistyles": "^2.8.3"
   },
   "peerDependencies": {
     "@types/react": "^18.2.0",
     "react": "^18.2.0",
     "react-native": ">=0.72.6",
-    "react-native-unistyles": "^2.7.2"
+    "react-native-unistyles": "^2.8.3"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -33,5 +33,8 @@
     "react-native-unistyles": {
       "optional": true
     }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts"
   }
 }

packages/core/src/StyleSheet.ts

@@ -73,7 +73,7 @@ export const StyleSheet = {
 
       return Object.fromEntries(
         Object.entries(_stylesheet).map(([name, style]) => [name, parseStyle(style, runtime)]),
-      );
+      ) as Record<string, Record<string, any>>;
     };
   },
 };

packages/core/src/theme/defaultTheme.ts

@@ -63,6 +63,8 @@ export type ThemeValue<T extends Record<string, any>> = {
   [K in keyof T]-?: Join<K, T[K] extends Record<string, any> ? ThemeValue<T[K]> : ''>;
 }[keyof T];
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: react-native-unistyles is not always installed, as it's optional
 declare module 'react-native-unistyles' {
   export interface UnistylesThemes {
     default: Theme;

packages/core/src/types.ts

@@ -200,6 +200,7 @@ export interface RNStyle
   top?: NonNullable<RNViewStyle['top']> | (string & {});
   transform?: string;
   transformOrigin?: string;
+  WebkitOverflowScrolling?: React.CSSProperties['WebkitOverflowScrolling'];
   width?: NonNullable<RNViewStyle['width']> | (string & {});
 }
 
@@ -255,6 +256,7 @@ export interface AccessibilityProps
       | 'accessibilityElementsHidden'
       | 'accessibilityLabel'
       | 'accessibilityLabelledBy'
+      | 'accessibilityLanguage'
       | 'accessibilityLiveRegion'
       | 'accessibilityRole'
       | 'accessibilityState'

packages/core/tsup.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  clean: true,
+  dts: true,
+  format: ['cjs', 'esm'],
+  noExternal: ['@tamagui/constants'],
+});

packages/utils/package.json

@@ -5,5 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "@github/memoize": "^1.1.4"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/*.ts"
   }
 }

packages/utils/tsup.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  clean: true,
+  dts: true,
+  format: ['cjs', 'esm'],
+});