@hero-design/rn 8.112.3 → 8.112.5

package/types/components/SectionHeading/index.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import type { IconName, IconProps } from '../Icon';
-export interface SectionHeadingProps extends ViewProps {
+interface SectionHeadingProps extends ViewProps {
     /**
      * Heading text.
      */

package/types/components/Select/helpers.d.ts

@@ -1,10 +1,10 @@
 import type { SectionData, CombinedOptionsType, SelectOptionType } from './types';
-export declare const getKey: <V, T extends SelectOptionType<V>>(option: T, index: number, keyExtractor?: (opt: T, i?: number) => string) => string | number;
 export declare const isSections: <V, T extends SelectOptionType<V>>(options: CombinedOptionsType<V, T>) => options is SectionData<V, T>[];
 export declare const toSections: <V, T extends SelectOptionType<V>>(options: CombinedOptionsType<V, T>) => SectionData<V, T>[];
 export declare const toFlatOptions: <V, T extends SelectOptionType<V>>(options: CombinedOptionsType<V, T>) => SelectOptionType<V>[];
-export type ScrollParams = {
+type ScrollParams = {
     itemIndex: number;
     sectionIndex: number;
 };
 export declare const getScrollParams: <V, T extends SelectOptionType<V>>(value: V, sections: SectionData<V, T>[]) => ScrollParams;
+export {};

package/types/components/Skeleton/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
-export interface SkeletonProps extends ViewProps {
+interface SkeletonProps extends ViewProps {
     /**
      * Intent of the component.
      */

package/types/components/Slider/RangeSlider.d.ts

@@ -4,7 +4,7 @@ export type SliderRangeValue = {
     start: number;
     end: number;
 };
-export interface RangeSliderProps {
+interface RangeSliderProps {
     /**
      * Minimum value of the slider.
      */

package/types/components/StatusScreens/Success/index.d.ts

@@ -3,7 +3,7 @@ import type { ViewProps, ImageSourcePropType, ImageProps as RNImageProps } from
 import type { SuccessVariant } from './StyledSuccess';
 import type { ImageProps } from '../../Image';
 import type { IllustrationName } from '../../Illustration';
-export interface SuccessProps extends ViewProps {
+interface SuccessProps extends ViewProps {
     /**
      * Image to be displayed.
      * @deprecated The `image` prop is deprecated and will be removed in the next major version. Use the `icon` prop instead.

package/types/components/Tabs/ScrollableTabsHeader/ScrollableTabsHeader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import type { TabType } from '..';
-export interface ScrollableTabHeaderProps extends ViewProps {
+interface ScrollableTabHeaderProps extends ViewProps {
     /**
      * Callback which is called on tab press, receiving key of upcoming active Tab.
      */

package/types/components/Tabs/StyledTabs.d.ts

@@ -30,12 +30,6 @@ declare const HeaderTabItem: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const TabScreen: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
 declare const StyledIndicator: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -48,4 +42,4 @@ declare const StyledBadgeWrapper: import("@emotion/native").StyledComponent<impo
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, TabScreen, StyledIndicator, StyledBadgeWrapper, };
+export { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, StyledIndicator, StyledBadgeWrapper, };

package/types/components/Tabs/TabWithBadge.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
 import React from 'react';
-export type StatusBadgeType = {
+type StatusBadgeType = {
     type: 'status';
 };
-export type CounterBadgeType = {
+type CounterBadgeType = {
     type: 'counter';
     value: number;
     max?: number;

package/types/components/TextInput/index.d.ts

@@ -4,12 +4,12 @@ import type { Theme } from '../../theme';
 import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
 export type TextInputHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
-export type TextInputVariant = 'text' | 'textarea';
+type TextInputVariant = 'text' | 'textarea';
 type NativeTextInputProps = Omit<RNTextInputProps, 'onFocus' | 'onBlur'> & {
     onFocus?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void | undefined;
     onBlur?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void | undefined;
 };
-export interface TextInputRef {
+interface TextInputRef {
     focus: () => void;
     blur: () => void;
     clear: () => void;
@@ -132,6 +132,5 @@ export declare const renderMaxLengthMessage: ({ maxLength, state, currentLength,
     maxLength?: number;
     hideCharacterCount: boolean;
 }) => false | React.JSX.Element;
-export declare const getDisplayText: (value?: string, defaultValue?: string) => string;
 declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<TextInputHandles>>;
 export default TextInput;

package/types/components/TimePicker/types.d.ts

@@ -23,7 +23,7 @@ export interface TimePickerProps {
     confirmLabel: string;
     /**
      * Time display format of current value presented on the input. Default format is: HH:mm aa.
-     * Following date-fns's format (https://date-fns.org/v2.16.1/docs/format).
+     * Following date-fns's format (https://date-fns.org/v4.1.0/docs/format).
      * This also change how the time picker display between 24 hour and 12 hour mode.
      */
     displayFormat?: string;

package/types/components/Toast/ToastContext.d.ts

@@ -6,7 +6,8 @@ export type ToastControllerContextType = {
 };
 export declare const fallbackToastControlContext: ToastControllerContextType;
 export declare const ToastContext: import("react").Context<ToastControllerContextType>;
-export type ToastConfigContextType = Pick<ToastContainerProps, 'position' | 'displayType'>;
+type ToastConfigContextType = Pick<ToastContainerProps, 'position' | 'displayType'>;
 export declare const ToastConfigContext: import("react").Context<ToastConfigContextType>;
 export declare const useToastConfig: () => ToastConfigContextType;
 export declare const useToast: () => ToastControllerContextType;
+export {};

package/types/components/Toolbar/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import type { ViewProps } from 'react-native';
-export interface ToolbarProps extends Omit<ViewProps, 'style'> {
+interface ToolbarProps extends Omit<ViewProps, 'style'> {
     /**
      * Toolbar's content.
      */

package/types/components/Typography/Label/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ReactNode } from 'react';
 import type { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 import type { TypographyIntent } from '../types';
-export interface LabelProps extends NativeTextProps {
+interface LabelProps extends NativeTextProps {
     /**
      * Text content.
      */

package/types/theme/components/alert.d.ts

@@ -33,7 +33,16 @@ declare const getAlertTheme: (theme: GlobalTheme) => {
         base: number;
     };
     shadows: {
-        wrapper: import("../global/shadows/types").ShadowStyles;
+        wrapper: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
     };
 };
 export default getAlertTheme;

package/types/theme/components/bottomNavigation.d.ts

@@ -9,7 +9,16 @@ declare const getBottomNavigationTheme: (theme: GlobalTheme) => {
         borderTop: number;
     };
     shadows: {
-        wrapper: import("../global/shadows/types").ShadowStyles;
+        wrapper: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
     };
     sizes: {
         height: number;

package/types/theme/components/chip.d.ts

@@ -25,7 +25,16 @@ declare const getChipTheme: (theme: GlobalTheme) => {
         outlinedDefaultBorder: number;
     };
     shadows: {
-        filledWrapper: import("../global/shadows/types").ShadowStyles;
+        filledWrapper: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
     };
     fontSizes: {
         icon: number;

package/types/theme/components/fab.d.ts

@@ -36,7 +36,16 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         icon: number;
     };
     shadows: {
-        default: import("../global/shadows/types").ShadowStyles;
+        default: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
     };
     space: {
         actionItemPadding: number;

package/types/theme/components/floatingIsland.d.ts

@@ -7,7 +7,16 @@ declare const getFloatingIslandTheme: (theme: GlobalTheme) => {
         wrapper: number;
     };
     shadows: {
-        wrapper: import("../global/shadows/types").ShadowStyles;
+        wrapper: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
     };
     space: {
         wrapperPadding: number;

package/types/theme/components/list.d.ts

@@ -31,7 +31,16 @@ declare const getListTheme: (theme: GlobalTheme) => {
         enabled: number;
     };
     shadows: {
-        card: import("../global/shadows/types").ShadowStyles;
+        card: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
     };
 };
 export default getListTheme;

package/types/theme/components/search.d.ts

@@ -43,7 +43,16 @@ declare const getSearchTheme: (theme: GlobalTheme) => {
         surfixSize: number;
     };
     shadows: {
-        container: import("../global/shadows/types").ShadowStyles;
+        container: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
     };
 };
 export default getSearchTheme;

package/types/theme/components/segmentedControl.d.ts

@@ -20,7 +20,16 @@ declare const getSegmentedControlTheme: (theme: GlobalTheme) => {
     shadows: {
         item: {
             inactive: undefined;
-            active: import("../global/shadows/types").ShadowStyles;
+            active: {
+                shadowOffset: {
+                    width: number;
+                    height: number;
+                };
+                shadowColor: string;
+                shadowOpacity: number;
+                shadowRadius: number;
+                elevation: number;
+            };
         };
     };
     radii: {

package/types/theme/components/slider.d.ts

@@ -9,7 +9,16 @@ declare const getSliderTheme: (theme: GlobalTheme) => {
         disabledThumb: string;
     };
     shadows: {
-        marker: import("../global/shadows/types").ShadowStyles;
+        marker: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
     };
     sizes: {
         trackHeight: number;

package/types/theme/components/toast.d.ts

@@ -37,7 +37,16 @@ declare const getToastTheme: (theme: GlobalTheme) => {
         base: number;
     };
     shadows: {
-        wrapper: import("../global/shadows/types").ShadowStyles;
+        wrapper: {
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowColor: string;
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+        };
     };
 };
 export default getToastTheme;

package/types/theme/global/colors/swagSystemPalette.d.ts

@@ -1,3 +1,3 @@
 import type { SystemPalette } from './types';
-export declare const swagSystemPalette: SystemPalette;
+declare const swagSystemPalette: SystemPalette;
 export default swagSystemPalette;

package/types/theme/global/colors/types.d.ts

@@ -50,8 +50,9 @@ export type BrandSystemPalette = {
     decorativeSecondarySurface?: string;
 };
 export type ThemeMode = 'light' | 'dark';
-export type ThemeName = 'swagLight' | 'swagLightJobs' | 'ehWorkDark' | 'ehWork' | 'ehJobs';
+type ThemeName = 'swagLight' | 'swagLightJobs' | 'ehWorkDark' | 'ehWork' | 'ehJobs';
 export type SystemPalette = GlobalSystemPalette & BrandSystemPalette & {
     themeMode?: ThemeMode;
     name?: ThemeName;
 };
+export {};

package/types/theme/global/index.d.ts

@@ -62,7 +62,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         decorativeSecondary?: string;
         decorativeSecondarySurface?: string;
         themeMode?: import("./colors/types").ThemeMode;
-        name?: import("./colors/types").ThemeName;
+        name?: "swagLight" | "swagLightJobs" | "ehWorkDark" | "ehWork" | "ehJobs";
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;

package/types/theme/global/shadows/index.d.ts

@@ -1,5 +1,3 @@
 import type { SystemPalette } from '../colors/types';
 declare const getShadows: (palette: SystemPalette) => import("./types").ShadowPalette;
-type Shadows = ReturnType<typeof getShadows>;
 export { getShadows };
-export type { Shadows };

package/types/theme/global/shadows/types.d.ts

@@ -1,4 +1,4 @@
-export type ShadowStyles = {
+type ShadowStyles = {
     shadowOffset: {
         width: number;
         height: number;
@@ -13,3 +13,4 @@ export type ShadowPalette = {
     medium: ShadowStyles;
     deep: ShadowStyles;
 };
+export {};

package/types/theme/global/typography.d.ts

@@ -31,4 +31,4 @@ declare const getFonts: ({ neutral, playful, }: {
 declare const getFontSizes: (baseFontSize: number) => FontSizes;
 declare const getLineHeights: (fontSizes: FontSizes) => LineHeights;
 export { getFonts, getFontSizes, getLineHeights };
-export type { Fonts, FontSizes, LineHeights };
+export type { Fonts, FontSizes };

package/types/utils/scale.d.ts

@@ -1,3 +1 @@
-export declare const BASE_WIDTH = 390;
-export declare const horizontalScale: (size: number) => number;
 export declare const scale: (size: number, factor?: number) => number;

package/.cursor/rules/performance-optimization.mdc

@@ -1,64 +0,0 @@
----
-pattern: "**/*.{ts,tsx}"
-description: "Performance optimization rules for React Native components in rn package"
----
-
-# Performance Optimization Rules for RN Package
-
-## React Native Performance Best Practices
-
-### Component Optimization
-- Use `React.memo()` for components that receive stable props
-- Implement `useMemo()` for expensive calculations
-- Use `useCallback()` for event handlers passed to child components
-- Avoid creating objects/functions in render methods
-- Prefer `useState` functional updates when state depends on previous state
-
-### List Performance
-- Use `FlatList` or `SectionList` instead of `ScrollView` with `map()`
-- Implement `getItemLayout` for `FlatList` when item heights are known
-- Use `keyExtractor` prop for consistent item identification
-- Implement `removeClippedSubviews` for large lists
-- Use `windowSize` and `initialNumToRender` for performance tuning
-
-### Memory Management
-- Clean up subscriptions in `useEffect` cleanup functions
-- Use `InteractionManager.runAfterInteractions()` for non-critical operations
-- Avoid memory leaks by properly unmounting components
-- Use `React.useRef()` instead of `useState` for mutable values
-- Implement proper error boundaries to prevent crashes
-
-### Animation Performance
-- Use `Animated` API for smooth 60fps animations
-- Prefer `transform` and `opacity` animations over layout changes
-- Use `useNativeDriver: true` when possible
-- Avoid animating `width`, `height`, or `top` properties
-- Use `LayoutAnimation` for list item changes
-
-### Bundle Size Optimization
-- Use dynamic imports for large components (`React.lazy()`)
-- Implement code splitting for feature modules
-- Remove unused dependencies and imports
-- Use tree shaking compatible libraries
-- Optimize asset sizes and formats
-
-### React Native Specific Performance Considerations
-- Test with mobile-typical data sizes (large datasets, complex forms)
-- Optimize for mobile app's specific use cases
-- Ensure smooth performance on older devices
-- Test with base theme and custom styling
-- Monitor performance metrics in mobile environment
-
-### Performance Monitoring
-- Use React DevTools Profiler for component analysis
-- Implement performance logging for critical paths
-- Monitor memory usage during development
-- Test performance on various device types
-- Use Flipper for React Native debugging
-
-### Anti-Patterns to Avoid
-- Don't use `console.log` in production builds
-- Avoid inline object/function creation in render
-- Don't use `setState` in render methods
-- Avoid unnecessary re-renders with proper dependency arrays
-- Don't ignore performance warnings from React Native

package/.cursor/rules/rn-rules.mdc

@@ -1,165 +0,0 @@
----
-pattern: "**/*.{ts,tsx}"
-description: "General development rules for React Native components in rn package"
----
-
-# RN Package Development Rules
-
-## Package Context
-This is the base React Native component library that provides core components, themes, and utilities for React Native applications.
-
-## Component Structure Guidelines
-
-### File Organization
-- **Component files**: `ComponentName/ComponentName.tsx` (main component)
-- **Styled components**: `ComponentName/StyledComponentName.tsx` (e.g., `StyledButton.tsx`)
-- **Types**: `ComponentName/types.ts` (if complex types are needed)
-- **Tests**: `ComponentName/__tests__/ComponentName.spec.tsx`
-
-### Component Structure Example
-```tsx
-// Button/Button.tsx
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../theme';
-import { StyledButtonContainer, StyledButtonText } from './StyledButton';
-
-export interface ButtonProps {
-  /** Button label */
-  text?: ReactChild;
-  /** Visual intent color */
-  intent?: 'primary' | 'secondary' | 'danger';
-  /** Button type */
-  variant?: 'filled' | 'outlined' | 'text';
-  /** Loading state */
-  loading?: boolean;
-  /** Press handler */
-  onPress: () => void;
-  /** Additional style */
-  style?: StyleProp<ViewStyle>;
-}
-
-const Button = ({ text, intent = 'primary', variant = 'filled', loading, onPress, style }: ButtonProps): JSX.Element => {
-  const theme = useTheme();
-  const themeVariant = getThemeVariant(variant, intent);
-
-  return (
-    <StyledButtonContainer
-      disabled={loading}
-      onPress={onPress}
-      themeButtonVariant={themeVariant}
-      style={style}
-    >
-      {loading ? (
-        <LoadingIndicator themeVariant={themeVariant} />
-      ) : (
-        <StyledButtonText themeButtonVariant={themeVariant}>
-          {text}
-        </StyledButtonText>
-      )}
-    </StyledButtonContainer>
-  );
-};
-```
-
-### Styled Component Conventions
-- **Naming**: `const StyledComponentName = styled.View\`\``
-- **Props naming**: Use descriptive names like `themeButtonVariant`, `themeIsPressed`, `themeIsCompact`
-- **Theme access**: Use component-specific theme tokens via `theme.__hd__.componentName.*` instead of global theme tokens
-
-```tsx
-// StyledButton.tsx
-import styled from '@emotion/native';
-
-interface StyledButtonProps {
-  themeButtonVariant: ThemeVariant;
-  disabled?: boolean;
-}
-
-const StyledButtonContainer = styled.TouchableHighlight<StyledButtonProps>`
-  ${({ theme, themeButtonVariant, disabled }) => `
-    background-color: ${theme.__hd__.button.colors.background[themeButtonVariant]};
-    border-radius: ${theme.__hd__.button.borderRadius};
-    padding: ${theme.__hd__.button.spacing.default};
-    opacity: ${disabled ? 0.5 : 1};
-  `}
-`;
-```
-
-## Theme Token Usage
-
-### Adding Theme Tokens
-1. **Define in theme**: Add new tokens to `theme/global` files
-2. **Use consistently**: Apply tokens across components
-3. **Document usage**: Add JSDoc comments for token purposes
-
-### Theme Token Examples
-```tsx
-// Using component-specific theme tokens
-background-color: ${theme.__hd__.button.colors.background[themeVariant]};
-color: ${theme.__hd__.button.colors.text[themeVariant]};
-padding: ${theme.__hd__.button.spacing.default};
-border-radius: ${theme.__hd__.button.borderRadius};
-
-// Using global theme tokens when needed
-margin: ${theme.spacing.md};  // Global spacing
-font-family: ${theme.typography.fontFamily}; // Global typography
-```
-
-### Modifying Theme Tokens
-- **Global changes**: Update `theme/global` files
-- **Component-specific**: Use component theme overrides
-- **Testing**: Verify changes across all components
-
-## Component Development Rules
-
-### Basic Rules
-- **Prefer functional components with hooks over class components**
-- Import `styled` from `@emotion/native` for styling consistency
-- Use `useTheme()` hook instead of prop drilling theme
-- Follow React Native design patterns and accessibility requirements
-- Use TypeScript strictly - no `any` types without good reason
-- Fix linting errors immediately
-- Use proper React Native components (`Text`, `View`) instead of HTML elements
-
-### Props Interface Guidelines
-```tsx
-// Good example from Button component
-export interface ButtonProps {
-  /** Button label */
-  text?: ReactChild;
-  /** Visual intent color */
-  intent?: 'primary' | 'secondary' | 'danger';
-  /** Button type */
-  variant?: 'filled' | 'outlined' | 'text';
-  /** Loading state */
-  loading?: boolean;
-  /** Press handler */
-  onPress: () => void;
-  /** Additional style */
-  style?: StyleProp<ViewStyle>;
-  /** Testing id */
-  testID?: string;
-}
-```
-
-## Documentation Rules
-- Document Props interfaces with JSDoc comments directly on each property: `/** Description */`
-- Use simplified @param comments: `@param props - The component props (see [ComponentName]Props interface for details)`
-- Avoid mentioning implementation details like "memoized component" in JSDoc comments
-- Focus JSDoc comments on what the component does, not how it's implemented
-- Keep type information in the Props interface, not duplicated in @param comments
-
-## React Native Specific Patterns
-- Components should work with base theme system
-- Test with standard React Native color palettes and spacing
-- Ensure compatibility with React Native requirements
-- Follow React Native accessibility guidelines
-- Test performance with typical mobile data sizes
-
-## Quality Gates
-- All tests must pass with 100% coverage on main components
-- No linting errors
-- No TypeScript errors
-- Components must work with base theme system
-- Accessibility compliance for mobile environment