@impulse-ui-native/primitives 9.1.1 → 10.0.0

package/README.md

@@ -93,6 +93,27 @@ export function ProfileSummary() {
 
 Use the compound `Control` when building a custom field that should share the same label, addon, error, size, and variant behavior as `Input` and `Select`.
 
+`Control.Trigger` combines the field container's themed geometry with a
+Pressable. It respects group and local disabling and accepts supplied children,
+style props, and function-valued pressable styles. `Control.Icon` renders a
+caller-selected icon with the current field's addon color.
+
+`Control.Field` assembles a label, trigger, optional prefix/suffix slots, and an
+error label for a read-only selection field. The caller supplies the value,
+placeholder, icons, and behavior; this convenience component does not choose
+default icons or manage selection state.
+
+```tsx
+<Control.Field
+  label="Destination"
+  onPress={openDestinationPicker}
+  prefix={<Control.Icon icon={LocationIcon} />}
+>
+  <Control.Value>{destination}</Control.Value>
+</Control.Field>
+```
+
+
 `Control.Addon` and `Control.Error` render supplied children. Addons own spacing
 and optional press behavior, including group/local disabling; the parent chooses
 and renders icons or custom content. Error owns error-label styling; the parent

package/dist/components/atoms/avatar.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AvatarProps } from '../../types/avatar.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 import '../../types/view.types.mjs';
 
-declare const Avatar: react.MemoExoticComponent<({ fallback, imageProps, initials, size, source, status, statusColor, style, variant, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element>;
+declare const Avatar: react.MemoExoticComponent<({ fallback, imageProps, initials, size, source, status, statusColor, style, variant, ...props }: AvatarProps) => react.JSX.Element>;
 
 export { Avatar };

package/dist/components/atoms/avatar.js

@@ -26,10 +26,11 @@ const Avatar = memo(function Avatar2({
     () => [styles.container, extractedStyleProps, style],
     [extractedStyleProps, style, styles.container]
   );
+  const showInitials = (fallback === null || fallback === void 0) && initials;
   return /* @__PURE__ */ jsxs(View, { ...props, style: containerStyle, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
       fallback,
-      (fallback === null || fallback === void 0) && initials ? /* @__PURE__ */ jsx(Text, { style: styles.initials, children: initials }) : null,
+      showInitials ? /* @__PURE__ */ jsx(Text, { style: styles.initials, children: initials }) : null,
       source ? /* @__PURE__ */ jsx(
         AvatarImageLayer,
         {

package/dist/components/atoms/avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/avatar.tsx"],"sourcesContent":["import type { ImageProps } from \"react-native\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport { Image, StyleSheet, Text } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { AvatarProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Avatar = memo(function Avatar({\n  fallback,\n  imageProps,\n  initials,\n  size = \"medium\",\n  source,\n  status,\n  statusColor,\n  style,\n  variant = \"filled\",\n  ...props\n}: AvatarProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(\n    themedStyles,\n    { size, status, statusColor, variant },\n    [size, status, statusColor, variant],\n  );\n\n  const sourceKey = useMemo(() => JSON.stringify(source), [source]);\n\n  const containerStyle = useMemo(\n    () => [styles.container, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.container],\n  );\n\n  return (\n    <View {...props} style={containerStyle}>\n      <View style={styles.content}>\n        {fallback}\n        {(fallback === null || fallback === undefined) && initials ? (\n          <Text style={styles.initials}>{initials}</Text>\n        ) : null}\n\n        {source ? (\n          <AvatarImageLayer\n            key={sourceKey}\n            imageProps={imageProps}\n            source={source}\n          />\n        ) : null}\n      </View>\n\n      {status ? <View style={styles.status} /> : null}\n    </View>\n  );\n});\n\ninterface AvatarImageLayerProps {\n  imageProps: AvatarProps[\"imageProps\"];\n  source: NonNullable<AvatarProps[\"source\"]>;\n}\n\nconst AvatarImageLayer = memo(function AvatarImageLayer({\n  imageProps,\n  source,\n}: AvatarImageLayerProps) {\n  const [hasError, setHasError] = useState(false);\n\n  const handleError = useCallback<NonNullable<ImageProps[\"onError\"]>>(\n    (event) => {\n      setHasError(true);\n      imageProps?.onError?.(event);\n    },\n    [imageProps],\n  );\n\n  const imageStyle = useMemo(\n    () => [staticStyles.image, imageProps?.style],\n    [imageProps?.style],\n  );\n\n  if (hasError) {\n    return null;\n  }\n\n  return (\n    <Image\n      resizeMode=\"cover\"\n      {...imageProps}\n      onError={handleError}\n      source={source}\n      style={imageStyle}\n    />\n  );\n});\n\ninterface AvatarThemeProps {\n  size: NonNullable<AvatarProps[\"size\"]>;\n  status: AvatarProps[\"status\"];\n  statusColor: AvatarProps[\"statusColor\"];\n  variant: NonNullable<AvatarProps[\"variant\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: AvatarThemeProps) {\n  const { size, status, statusColor, variant } = props;\n  const avatarTokens = theme.components.avatar;\n  const sizeTokens = avatarTokens.sizes[size];\n  const variantTokens = avatarTokens.variants[variant];\n\n  return StyleSheet.create({\n    container: {\n      flexShrink: 0,\n      height: sizeTokens.size,\n      position: \"relative\",\n      width: sizeTokens.size,\n    },\n    content: {\n      alignItems: \"center\",\n      backgroundColor: variantTokens.backgroundColor,\n      borderColor: variantTokens.borderColor,\n      borderRadius: sizeTokens.size / 2,\n      borderWidth: avatarTokens.borderWidth,\n      height: \"100%\",\n      justifyContent: \"center\",\n      overflow: \"hidden\",\n      width: \"100%\",\n    },\n    initials: {\n      color: variantTokens.color,\n      fontFamily: avatarTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      textAlign: \"center\",\n    },\n    status: {\n      backgroundColor:\n        statusColor ?? (status ? avatarTokens.statusColors[status] : undefined),\n      borderColor: avatarTokens.statusBorderColor,\n      borderRadius: sizeTokens.statusSize / 2,\n      borderWidth: sizeTokens.statusBorderWidth,\n      bottom: 0,\n      height: sizeTokens.statusSize,\n      position: \"absolute\",\n      right: 0,\n      width: sizeTokens.statusSize,\n    },\n  });\n}\n\nconst staticStyles = StyleSheet.create({\n  image: {\n    bottom: 0,\n    height: \"100%\",\n    left: 0,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    width: \"100%\",\n  },\n});\n"],"mappings":"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","names":["Avatar","AvatarImageLayer"]}
+{"version":3,"sources":["../../../src/components/atoms/avatar.tsx"],"sourcesContent":["import type { ImageProps } from \"react-native\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport { Image, StyleSheet, Text } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { AvatarProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Avatar = memo(function Avatar({\n  fallback,\n  imageProps,\n  initials,\n  size = \"medium\",\n  source,\n  status,\n  statusColor,\n  style,\n  variant = \"filled\",\n  ...props\n}: AvatarProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(\n    themedStyles,\n    { size, status, statusColor, variant },\n    [size, status, statusColor, variant],\n  );\n\n  const sourceKey = useMemo(() => JSON.stringify(source), [source]);\n\n  const containerStyle = useMemo(\n    () => [styles.container, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.container],\n  );\n\n  const showInitials =\n    (fallback === null || fallback === undefined) && initials;\n\n  return (\n    <View {...props} style={containerStyle}>\n      <View style={styles.content}>\n        {fallback}\n        {showInitials ? <Text style={styles.initials}>{initials}</Text> : null}\n\n        {source ? (\n          <AvatarImageLayer\n            key={sourceKey}\n            imageProps={imageProps}\n            source={source}\n          />\n        ) : null}\n      </View>\n\n      {status ? <View style={styles.status} /> : null}\n    </View>\n  );\n});\n\ninterface AvatarImageLayerProps {\n  imageProps: AvatarProps[\"imageProps\"];\n  source: NonNullable<AvatarProps[\"source\"]>;\n}\n\nconst AvatarImageLayer = memo(function AvatarImageLayer({\n  imageProps,\n  source,\n}: AvatarImageLayerProps) {\n  const [hasError, setHasError] = useState(false);\n\n  const handleError = useCallback<NonNullable<ImageProps[\"onError\"]>>(\n    (event) => {\n      setHasError(true);\n      imageProps?.onError?.(event);\n    },\n    [imageProps],\n  );\n\n  const imageStyle = useMemo(\n    () => [staticStyles.image, imageProps?.style],\n    [imageProps?.style],\n  );\n\n  if (hasError) {\n    return null;\n  }\n\n  return (\n    <Image\n      resizeMode=\"cover\"\n      {...imageProps}\n      onError={handleError}\n      source={source}\n      style={imageStyle}\n    />\n  );\n});\n\ninterface AvatarThemeProps {\n  size: NonNullable<AvatarProps[\"size\"]>;\n  status: AvatarProps[\"status\"];\n  statusColor: AvatarProps[\"statusColor\"];\n  variant: NonNullable<AvatarProps[\"variant\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: AvatarThemeProps) {\n  const { size, status, statusColor, variant } = props;\n  const avatarTokens = theme.components.avatar;\n  const sizeTokens = avatarTokens.sizes[size];\n  const variantTokens = avatarTokens.variants[variant];\n\n  return StyleSheet.create({\n    container: {\n      flexShrink: 0,\n      height: sizeTokens.size,\n      position: \"relative\",\n      width: sizeTokens.size,\n    },\n    content: {\n      alignItems: \"center\",\n      backgroundColor: variantTokens.backgroundColor,\n      borderColor: variantTokens.borderColor,\n      borderRadius: sizeTokens.size / 2,\n      borderWidth: avatarTokens.borderWidth,\n      height: \"100%\",\n      justifyContent: \"center\",\n      overflow: \"hidden\",\n      width: \"100%\",\n    },\n    initials: {\n      color: variantTokens.color,\n      fontFamily: avatarTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      textAlign: \"center\",\n    },\n    status: {\n      backgroundColor:\n        statusColor ?? (status ? avatarTokens.statusColors[status] : undefined),\n      borderColor: avatarTokens.statusBorderColor,\n      borderRadius: sizeTokens.statusSize / 2,\n      borderWidth: sizeTokens.statusBorderWidth,\n      bottom: 0,\n      height: sizeTokens.statusSize,\n      position: \"absolute\",\n      right: 0,\n      width: sizeTokens.statusSize,\n    },\n  });\n}\n\nconst staticStyles = StyleSheet.create({\n  image: {\n    bottom: 0,\n    height: \"100%\",\n    left: 0,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    width: \"100%\",\n  },\n});\n"],"mappings":"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","names":["Avatar","AvatarImageLayer"]}

package/dist/components/atoms/badge/addon.d.mts

@@ -1,6 +1,5 @@
 import * as react from 'react';
 import { ComponentType } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconProps } from '@impulse-ui-native/icon/types';
 import { PressableCoreProps } from '../../../types/button.types.mjs';
 import 'react-native';
@@ -14,6 +13,6 @@ interface BadgeAddonProps {
     IconComponent: IconProps["icon"] | undefined;
     onPress: PressableCoreProps["onPress"] | undefined;
 }
-declare const BadgeAddon: react.MemoExoticComponent<({ color, Content, hitSlop, iconSize, IconComponent, onPress, }: BadgeAddonProps) => react_jsx_runtime.JSX.Element | null>;
+declare const BadgeAddon: react.MemoExoticComponent<({ color, Content, hitSlop, iconSize, IconComponent, onPress, }: BadgeAddonProps) => react.JSX.Element | null>;
 
 export { BadgeAddon };

package/dist/components/atoms/badge/addon.js

@@ -11,7 +11,7 @@ const BadgeAddon = memo(function BadgeAddon2({
   IconComponent,
   onPress
 }) {
-  const Container = useMemo(() => onPress ? Pressable : View, [onPress]);
+  const Container = onPress ? Pressable : View;
   const content = useMemo(() => {
     if (Content) {
       return /* @__PURE__ */ jsx(Content, {});

package/dist/components/atoms/badge/addon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/badge/addon.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { memo, useMemo } from \"react\";\n\nimport type { IconProps } from \"@impulse-ui-native/icon/types\";\nimport { Icon } from \"@impulse-ui-native/icon\";\n\nimport type { PressableCoreProps } from \"../../../types\";\nimport { Pressable } from \"../pressable\";\nimport { View } from \"../view\";\n\ninterface BadgeAddonProps {\n  color: string | undefined;\n  Content: ComponentType | undefined;\n  hitSlop: number;\n  iconSize: number;\n  IconComponent: IconProps[\"icon\"] | undefined;\n  onPress: PressableCoreProps[\"onPress\"] | undefined;\n}\n\nexport const BadgeAddon = memo(function BadgeAddon({\n  color,\n  Content,\n  hitSlop,\n  iconSize,\n  IconComponent,\n  onPress,\n}: BadgeAddonProps) {\n  const Container = useMemo(() => (onPress ? Pressable : View), [onPress]);\n  const content = useMemo(() => {\n    if (Content) {\n      return <Content />;\n    }\n\n    if (IconComponent) {\n      return <Icon color={color} icon={IconComponent} size={iconSize} />;\n    }\n\n    return null;\n  }, [color, Content, iconSize, IconComponent]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <Container hitSlop={hitSlop} onPress={onPress}>\n      {content}\n    </Container>\n  );\n});\n"],"mappings":"AA8Ba;AA7Bb,SAAS,MAAM,eAAe;AAG9B,SAAS,YAAY;AAGrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAWd,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,YAAY,QAAQ,MAAO,UAAU,YAAY,MAAO,CAAC,OAAO,CAAC;AACvE,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,QAAI,eAAe;AACjB,aAAO,oBAAC,QAAK,OAAc,MAAM,eAAe,MAAM,UAAU;AAAA,IAClE;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,SAAS,UAAU,aAAa,CAAC;AAE5C,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,aAAU,SAAkB,SAC1B,mBACH;AAEJ,CAAC;","names":["BadgeAddon"]}
+{"version":3,"sources":["../../../../src/components/atoms/badge/addon.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { memo, useMemo } from \"react\";\n\nimport type { IconProps } from \"@impulse-ui-native/icon/types\";\nimport { Icon } from \"@impulse-ui-native/icon\";\n\nimport type { PressableCoreProps } from \"../../../types\";\nimport { Pressable } from \"../pressable\";\nimport { View } from \"../view\";\n\ninterface BadgeAddonProps {\n  color: string | undefined;\n  Content: ComponentType | undefined;\n  hitSlop: number;\n  iconSize: number;\n  IconComponent: IconProps[\"icon\"] | undefined;\n  onPress: PressableCoreProps[\"onPress\"] | undefined;\n}\n\nexport const BadgeAddon = memo(function BadgeAddon({\n  color,\n  Content,\n  hitSlop,\n  iconSize,\n  IconComponent,\n  onPress,\n}: BadgeAddonProps) {\n  const Container = onPress ? Pressable : View;\n  const content = useMemo(() => {\n    if (Content) {\n      return <Content />;\n    }\n\n    if (IconComponent) {\n      return <Icon color={color} icon={IconComponent} size={iconSize} />;\n    }\n\n    return null;\n  }, [color, Content, iconSize, IconComponent]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <Container hitSlop={hitSlop} onPress={onPress}>\n      {content}\n    </Container>\n  );\n});\n"],"mappings":"AA8Ba;AA7Bb,SAAS,MAAM,eAAe;AAG9B,SAAS,YAAY;AAGrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAWd,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,YAAY,UAAU,YAAY;AACxC,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,QAAI,eAAe;AACjB,aAAO,oBAAC,QAAK,OAAc,MAAM,eAAe,MAAM,UAAU;AAAA,IAClE;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,SAAS,UAAU,aAAa,CAAC;AAE5C,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,aAAU,SAAkB,SAC1B,mBACH;AAEJ,CAAC;","names":["BadgeAddon"]}

package/dist/components/atoms/badge/index.d.mts

@@ -1,6 +1,5 @@
 export { BadgeRoot as Badge } from './root.mjs';
 import 'react';
-import 'react/jsx-runtime';
 import '../../../types/badge.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';

package/dist/components/atoms/badge/root.d.mts

@@ -1,5 +1,4 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BadgeProps } from '../../../types/badge.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
@@ -9,6 +8,6 @@ import '../../../types/button.types.mjs';
 import '../../../types/spinner.types.mjs';
 import '../../../types/view.types.mjs';
 
-declare const BadgeRoot: react.MemoExoticComponent<({ backgroundColor, children, color, Prefix, PrefixIcon, onPressPrefix, onPressSuffix, size, style, Suffix, SuffixIcon, tone, variant, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element>;
+declare const BadgeRoot: react.MemoExoticComponent<({ backgroundColor, children, color, Prefix, PrefixIcon, onPressPrefix, onPressSuffix, size, style, Suffix, SuffixIcon, tone, variant, ...props }: BadgeProps) => react.JSX.Element>;
 
 export { BadgeRoot };

package/dist/components/atoms/badge/root.js

@@ -38,6 +38,7 @@ const BadgeRoot = memo(function BadgeRoot2({
     [extractedStyleProps, style, styles.container]
   );
   const affixColor = typeof styles.label.color === "string" ? styles.label.color : void 0;
+  const isTextChild = typeof children === "string" || typeof children === "number";
   return /* @__PURE__ */ jsxs(View, { ...props, style: containerStyle, children: [
     /* @__PURE__ */ jsx(
       BadgeAddon,
@@ -50,7 +51,7 @@ const BadgeRoot = memo(function BadgeRoot2({
         onPress: onPressPrefix
       }
     ),
-    typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.label, children }) : children,
+    isTextChild ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.label, children }) : children,
     /* @__PURE__ */ jsx(
       BadgeAddon,
       {

package/dist/components/atoms/badge/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/badge/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n  useComponentsTokens,\n  useStyleProps,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { BadgeProps, BadgeThemeProps } from \"../../../types\";\nimport { View } from \"../view\";\nimport { BadgeAddon } from \"./addon\";\n\nexport const BadgeRoot = memo(function BadgeRoot({\n  backgroundColor,\n  children,\n  color,\n  Prefix,\n  PrefixIcon,\n  onPressPrefix,\n  onPressSuffix,\n  size = \"medium\",\n  style,\n  Suffix,\n  SuffixIcon,\n  tone = \"primary\",\n  variant = \"filled\",\n  ...props\n}: BadgeProps) {\n  const tokens = useComponentsTokens();\n\n  const badgeTokens = tokens.badge;\n  const sizeTokens = badgeTokens.sizes[size];\n\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(\n    themedStyles,\n    { backgroundColor, color, size, tone, variant },\n    [backgroundColor, color, size, tone, variant],\n  );\n\n  const containerStyle = useMemo(\n    () => [styles.container, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.container],\n  );\n\n  const affixColor =\n    typeof styles.label.color === \"string\" ? styles.label.color : undefined;\n\n  return (\n    <View {...props} style={containerStyle}>\n      <BadgeAddon\n        Content={Prefix}\n        IconComponent={PrefixIcon}\n        color={affixColor}\n        hitSlop={badgeTokens.addonHitSlop}\n        iconSize={sizeTokens.iconSize}\n        onPress={onPressPrefix}\n      />\n\n      {typeof children === \"string\" || typeof children === \"number\" ? (\n        <Text numberOfLines={1} style={styles.label}>\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n\n      <BadgeAddon\n        Content={Suffix}\n        IconComponent={SuffixIcon}\n        color={affixColor}\n        hitSlop={badgeTokens.addonHitSlop}\n        iconSize={sizeTokens.iconSize}\n        onPress={onPressSuffix}\n      />\n    </View>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: BadgeThemeProps) {\n  const { backgroundColor, color, size, tone, variant } = props;\n\n  const badgeTokens = theme.components.badge;\n  const sizeTokens = badgeTokens.sizes[size];\n  const variantTokens = badgeTokens.colors[tone][variant];\n\n  return StyleSheet.create({\n    container: {\n      alignItems: \"center\",\n      alignSelf: \"flex-start\",\n      flexDirection: \"row\",\n      flexShrink: 0,\n      justifyContent: \"center\",\n\n      borderRadius: badgeTokens.borderRadius,\n      borderWidth: badgeTokens.borderWidth,\n      gap: badgeTokens.gap,\n      height: sizeTokens.height,\n      minWidth: sizeTokens.minWidth,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      backgroundColor: backgroundColor ?? variantTokens.backgroundColor,\n      borderColor: variantTokens.borderColor,\n    },\n\n    label: {\n      textAlign: \"center\",\n\n      fontFamily: badgeTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      lineHeight: sizeTokens.lineHeight,\n\n      color: color ?? variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AAmDI,SACE,KADF;AAnDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAGjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAEpB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAe;AACb,QAAM,SAAS,oBAAoB;AAEnC,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,YAAY,MAAM,IAAI;AAEzC,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ;AAAA,IAC9C,CAAC,iBAAiB,OAAO,MAAM,MAAM,OAAO;AAAA,EAC9C;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,QAAM,aACJ,OAAO,OAAO,MAAM,UAAU,WAAW,OAAO,MAAM,QAAQ;AAEhE,SACE,qBAAC,QAAM,GAAG,OAAO,OAAO,gBACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,IAEC,OAAO,aAAa,YAAY,OAAO,aAAa,WACnD,oBAAC,QAAK,eAAe,GAAG,OAAO,OAAO,OACnC,UACH,IAEA;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,KACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAwB;AAC7D,QAAM,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ,IAAI;AAExD,QAAM,cAAc,MAAM,WAAW;AACrC,QAAM,aAAa,YAAY,MAAM,IAAI;AACzC,QAAM,gBAAgB,YAAY,OAAO,IAAI,EAAE,OAAO;AAEtD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,cAAc,YAAY;AAAA,MAC1B,aAAa,YAAY;AAAA,MACzB,KAAK,YAAY;AAAA,MACjB,QAAQ,WAAW;AAAA,MACnB,UAAU,WAAW;AAAA,MACrB,mBAAmB,WAAW;AAAA,MAE9B,iBAAiB,mBAAmB,cAAc;AAAA,MAClD,aAAa,cAAc;AAAA,IAC7B;AAAA,IAEA,OAAO;AAAA,MACL,WAAW;AAAA,MAEX,YAAY,YAAY;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,WAAW;AAAA,MAEvB,OAAO,SAAS,cAAc;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["BadgeRoot"]}
+{"version":3,"sources":["../../../../src/components/atoms/badge/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n  useComponentsTokens,\n  useStyleProps,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { BadgeProps, BadgeThemeProps } from \"../../../types\";\nimport { View } from \"../view\";\nimport { BadgeAddon } from \"./addon\";\n\nexport const BadgeRoot = memo(function BadgeRoot({\n  backgroundColor,\n  children,\n  color,\n  Prefix,\n  PrefixIcon,\n  onPressPrefix,\n  onPressSuffix,\n  size = \"medium\",\n  style,\n  Suffix,\n  SuffixIcon,\n  tone = \"primary\",\n  variant = \"filled\",\n  ...props\n}: BadgeProps) {\n  const tokens = useComponentsTokens();\n\n  const badgeTokens = tokens.badge;\n  const sizeTokens = badgeTokens.sizes[size];\n\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(\n    themedStyles,\n    { backgroundColor, color, size, tone, variant },\n    [backgroundColor, color, size, tone, variant],\n  );\n\n  const containerStyle = useMemo(\n    () => [styles.container, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.container],\n  );\n\n  const affixColor =\n    typeof styles.label.color === \"string\" ? styles.label.color : undefined;\n\n  const isTextChild =\n    typeof children === \"string\" || typeof children === \"number\";\n\n  return (\n    <View {...props} style={containerStyle}>\n      <BadgeAddon\n        Content={Prefix}\n        IconComponent={PrefixIcon}\n        color={affixColor}\n        hitSlop={badgeTokens.addonHitSlop}\n        iconSize={sizeTokens.iconSize}\n        onPress={onPressPrefix}\n      />\n\n      {isTextChild ? (\n        <Text numberOfLines={1} style={styles.label}>\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n\n      <BadgeAddon\n        Content={Suffix}\n        IconComponent={SuffixIcon}\n        color={affixColor}\n        hitSlop={badgeTokens.addonHitSlop}\n        iconSize={sizeTokens.iconSize}\n        onPress={onPressSuffix}\n      />\n    </View>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: BadgeThemeProps) {\n  const { backgroundColor, color, size, tone, variant } = props;\n\n  const badgeTokens = theme.components.badge;\n  const sizeTokens = badgeTokens.sizes[size];\n  const variantTokens = badgeTokens.colors[tone][variant];\n\n  return StyleSheet.create({\n    container: {\n      alignItems: \"center\",\n      alignSelf: \"flex-start\",\n      flexDirection: \"row\",\n      flexShrink: 0,\n      justifyContent: \"center\",\n\n      borderRadius: badgeTokens.borderRadius,\n      borderWidth: badgeTokens.borderWidth,\n      gap: badgeTokens.gap,\n      height: sizeTokens.height,\n      minWidth: sizeTokens.minWidth,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      backgroundColor: backgroundColor ?? variantTokens.backgroundColor,\n      borderColor: variantTokens.borderColor,\n    },\n\n    label: {\n      textAlign: \"center\",\n\n      fontFamily: badgeTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      lineHeight: sizeTokens.lineHeight,\n\n      color: color ?? variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AAsDI,SACE,KADF;AAtDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAGjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAEpB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAe;AACb,QAAM,SAAS,oBAAoB;AAEnC,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,YAAY,MAAM,IAAI;AAEzC,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ;AAAA,IAC9C,CAAC,iBAAiB,OAAO,MAAM,MAAM,OAAO;AAAA,EAC9C;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,QAAM,aACJ,OAAO,OAAO,MAAM,UAAU,WAAW,OAAO,MAAM,QAAQ;AAEhE,QAAM,cACJ,OAAO,aAAa,YAAY,OAAO,aAAa;AAEtD,SACE,qBAAC,QAAM,GAAG,OAAO,OAAO,gBACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,IAEC,cACC,oBAAC,QAAK,eAAe,GAAG,OAAO,OAAO,OACnC,UACH,IAEA;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,KACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAwB;AAC7D,QAAM,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ,IAAI;AAExD,QAAM,cAAc,MAAM,WAAW;AACrC,QAAM,aAAa,YAAY,MAAM,IAAI;AACzC,QAAM,gBAAgB,YAAY,OAAO,IAAI,EAAE,OAAO;AAEtD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,cAAc,YAAY;AAAA,MAC1B,aAAa,YAAY;AAAA,MACzB,KAAK,YAAY;AAAA,MACjB,QAAQ,WAAW;AAAA,MACnB,UAAU,WAAW;AAAA,MACrB,mBAAmB,WAAW;AAAA,MAE9B,iBAAiB,mBAAmB,cAAc;AAAA,MAClD,aAAa,cAAc;AAAA,IAC7B;AAAA,IAEA,OAAO;AAAA,MACL,WAAW;AAAA,MAEX,YAAY,YAAY;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,WAAW;AAAA,MAEvB,OAAO,SAAS,cAAc;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["BadgeRoot"]}

package/dist/components/atoms/button.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonProps } from '../../types/button.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 
-declare const Button: react.MemoExoticComponent<({ size, variant, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react_jsx_runtime.JSX.Element>;
+declare const Button: react.MemoExoticComponent<({ size, variant, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react.JSX.Element>;
 
 export { Button };

package/dist/components/atoms/divider.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DividerProps } from '../../types/divider.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 import '../../types/view.types.mjs';
 
-declare const Divider: react.MemoExoticComponent<({ color, inset, orientation, style, tone, ...props }: DividerProps) => react_jsx_runtime.JSX.Element>;
+declare const Divider: react.MemoExoticComponent<({ color, inset, orientation, style, tone, ...props }: DividerProps) => react.JSX.Element>;
 
 export { Divider };

package/dist/components/atoms/icon-button.d.mts

@@ -1,12 +1,11 @@
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconButtonProps } from '../../types/icon-button.types.mjs';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
 import '../../types/button.types.mjs';
 import 'react-native';
 
-declare const IconButton: react.MemoExoticComponent<({ size, variant, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react_jsx_runtime.JSX.Element>;
+declare const IconButton: react.MemoExoticComponent<({ size, variant, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react.JSX.Element>;
 
 export { IconButton };

package/dist/components/atoms/index.d.mts

@@ -10,7 +10,6 @@ export { Pressable } from './pressable.mjs';
 export { Spinner } from './spinner.mjs';
 export { Tag } from './tag.mjs';
 import 'react';
-import 'react/jsx-runtime';
 import '../../types/avatar.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';

package/dist/components/atoms/pressable.d.mts

@@ -1,10 +1,8 @@
-import * as react_native from 'react-native';
-import * as react from 'react';
+import { NamedExoticComponent, PropsWithoutRef, RefAttributes, ComponentRef } from 'react';
+import { Pressable as Pressable$1 } from 'react-native';
 import { PressableCoreProps } from '../../types/button.types.mjs';
 import '@impulse-ui-native/theme';
 
-declare const Pressable: react.NamedExoticComponent<PressableCoreProps & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<react_native.View>>;
+declare const Pressable: NamedExoticComponent<PropsWithoutRef<PressableCoreProps> & RefAttributes<ComponentRef<typeof Pressable$1>>>;
 
 export { Pressable };

package/dist/components/atoms/pressable.js

@@ -11,53 +11,55 @@ import {
   useTheme
 } from "@impulse-ui-native/theme";
 const Pressable = memo(
-  forwardRef(function PressableCore({ children, disabled, pressedStyle, style, ...props }, ref) {
-    const { colors, shadows } = useTheme();
-    const tokens = useComponentsTokens();
-    const pressableTokens = tokens.pressable;
-    const extractedStyleProps = useStyleProps(props);
-    const pressableStyles = useCallback(
-      (state) => {
-        let overrideStyle;
-        if (typeof style === "function") {
-          overrideStyle = style(state);
-        } else {
-          overrideStyle = style;
-        }
-        return StyleSheet.flatten([
-          {
-            opacity: disabled ? pressableTokens.disabledOpacity : state.pressed ? pressableTokens.pressedOpacity : 1
-          },
-          getShadowStyle(props.shadow, props.shadowPosition, colors, shadows),
+  forwardRef(
+    function PressableCore({ children, disabled, pressedStyle, style, ...props }, ref) {
+      const { colors, shadows } = useTheme();
+      const tokens = useComponentsTokens();
+      const pressableTokens = tokens.pressable;
+      const extractedStyleProps = useStyleProps(props);
+      const pressableStyles = useCallback(
+        (state) => {
+          let overrideStyle;
+          if (typeof style === "function") {
+            overrideStyle = style(state);
+          } else {
+            overrideStyle = style;
+          }
+          return StyleSheet.flatten([
+            {
+              opacity: disabled ? pressableTokens.disabledOpacity : state.pressed ? pressableTokens.pressedOpacity : 1
+            },
+            getShadowStyle(props.shadow, props.shadowPosition, colors, shadows),
+            extractedStyleProps,
+            overrideStyle,
+            state.pressed ? pressedStyle : void 0
+          ]);
+        },
+        [
+          style,
+          pressedStyle,
+          disabled,
           extractedStyleProps,
-          overrideStyle,
-          state.pressed ? pressedStyle : void 0
-        ]);
-      },
-      [
-        style,
-        pressedStyle,
-        disabled,
-        extractedStyleProps,
-        props.shadow,
-        props.shadowPosition,
-        colors,
-        shadows,
-        pressableTokens.disabledOpacity,
-        pressableTokens.pressedOpacity
-      ]
-    );
-    return /* @__PURE__ */ jsx(
-      RNPressable,
-      {
-        ...props,
-        ref,
-        style: pressableStyles,
-        disabled,
-        children
-      }
-    );
-  })
+          props.shadow,
+          props.shadowPosition,
+          colors,
+          shadows,
+          pressableTokens.disabledOpacity,
+          pressableTokens.pressedOpacity
+        ]
+      );
+      return /* @__PURE__ */ jsx(
+        RNPressable,
+        {
+          ...props,
+          ref,
+          style: pressableStyles,
+          disabled,
+          children
+        }
+      );
+    }
+  )
 );
 export {
   Pressable

package/dist/components/atoms/pressable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import type { ComponentRef, PropsWithChildren } from \"react\";\nimport { forwardRef, memo, useCallback } from \"react\";\nimport {\n  PressableStateCallbackType,\n  Pressable as RNPressable,\n  StyleProp,\n  StyleSheet,\n  ViewStyle,\n} from \"react-native\";\n\nimport {\n  getShadowStyle,\n  useComponentsTokens,\n  useStyleProps,\n  useTheme,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable = memo(\n  forwardRef<\n    ComponentRef<typeof RNPressable>,\n    PropsWithChildren<PressableCoreProps>\n  >(function PressableCore(\n    { children, disabled, pressedStyle, style, ...props },\n    ref,\n  ) {\n    const { colors, shadows } = useTheme();\n    const tokens = useComponentsTokens();\n\n    const pressableTokens = tokens.pressable;\n\n    const extractedStyleProps = useStyleProps(props);\n\n    const pressableStyles = useCallback(\n      (state: PressableStateCallbackType): StyleProp<ViewStyle> => {\n        let overrideStyle: StyleProp<ViewStyle>;\n\n        if (typeof style === \"function\") {\n          overrideStyle = style(state);\n        } else {\n          overrideStyle = style;\n        }\n\n        return StyleSheet.flatten([\n          {\n            opacity: disabled\n              ? pressableTokens.disabledOpacity\n              : state.pressed\n                ? pressableTokens.pressedOpacity\n                : 1,\n          },\n          getShadowStyle(props.shadow, props.shadowPosition, colors, shadows),\n          extractedStyleProps,\n          overrideStyle,\n          state.pressed ? pressedStyle : undefined,\n        ]);\n      },\n      [\n        style,\n        pressedStyle,\n        disabled,\n        extractedStyleProps,\n        props.shadow,\n        props.shadowPosition,\n        colors,\n        shadows,\n        pressableTokens.disabledOpacity,\n        pressableTokens.pressedOpacity,\n      ],\n    );\n\n    return (\n      <RNPressable\n        {...props}\n        ref={ref}\n        style={pressableStyles}\n        disabled={disabled}\n      >\n        {children}\n      </RNPressable>\n    );\n  }),\n);\n"],"mappings":"AAyEM;AAxEN,SAAS,YAAY,MAAM,mBAAmB;AAC9C;AAAA,EAEE,aAAa;AAAA,EAEb;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,YAAY;AAAA,EACvB,WAGE,SAAS,cACT,EAAE,UAAU,UAAU,cAAc,OAAO,GAAG,MAAM,GACpD,KACA;AACA,UAAM,EAAE,QAAQ,QAAQ,IAAI,SAAS;AACrC,UAAM,SAAS,oBAAoB;AAEnC,UAAM,kBAAkB,OAAO;AAE/B,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAA4D;AAC3D,YAAI;AAEJ,YAAI,OAAO,UAAU,YAAY;AAC/B,0BAAgB,MAAM,KAAK;AAAA,QAC7B,OAAO;AACL,0BAAgB;AAAA,QAClB;AAEA,eAAO,WAAW,QAAQ;AAAA,UACxB;AAAA,YACE,SAAS,WACL,gBAAgB,kBAChB,MAAM,UACJ,gBAAgB,iBAChB;AAAA,UACR;AAAA,UACA,eAAe,MAAM,QAAQ,MAAM,gBAAgB,QAAQ,OAAO;AAAA,UAClE;AAAA,UACA;AAAA,UACA,MAAM,UAAU,eAAe;AAAA,QACjC,CAAC;AAAA,MACH;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,MAClB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import type {\n  ComponentRef,\n  NamedExoticComponent,\n  PropsWithoutRef,\n  RefAttributes,\n} from \"react\";\nimport { forwardRef, memo, useCallback } from \"react\";\nimport {\n  PressableStateCallbackType,\n  Pressable as RNPressable,\n  StyleProp,\n  StyleSheet,\n  ViewStyle,\n} from \"react-native\";\n\nimport {\n  getShadowStyle,\n  useComponentsTokens,\n  useStyleProps,\n  useTheme,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable: NamedExoticComponent<\n  PropsWithoutRef<PressableCoreProps> &\n    RefAttributes<ComponentRef<typeof RNPressable>>\n> = memo(\n  forwardRef<ComponentRef<typeof RNPressable>, PressableCoreProps>(\n    function PressableCore(\n      { children, disabled, pressedStyle, style, ...props },\n      ref,\n    ) {\n      const { colors, shadows } = useTheme();\n      const tokens = useComponentsTokens();\n\n      const pressableTokens = tokens.pressable;\n\n      const extractedStyleProps = useStyleProps(props);\n\n      const pressableStyles = useCallback(\n        (state: PressableStateCallbackType): StyleProp<ViewStyle> => {\n          let overrideStyle: StyleProp<ViewStyle>;\n\n          if (typeof style === \"function\") {\n            overrideStyle = style(state);\n          } else {\n            overrideStyle = style;\n          }\n\n          return StyleSheet.flatten([\n            {\n              opacity: disabled\n                ? pressableTokens.disabledOpacity\n                : state.pressed\n                  ? pressableTokens.pressedOpacity\n                  : 1,\n            },\n            getShadowStyle(props.shadow, props.shadowPosition, colors, shadows),\n            extractedStyleProps,\n            overrideStyle,\n            state.pressed ? pressedStyle : undefined,\n          ]);\n        },\n        [\n          style,\n          pressedStyle,\n          disabled,\n          extractedStyleProps,\n          props.shadow,\n          props.shadowPosition,\n          colors,\n          shadows,\n          pressableTokens.disabledOpacity,\n          pressableTokens.pressedOpacity,\n        ],\n      );\n\n      return (\n        <RNPressable\n          {...props}\n          ref={ref}\n          style={pressableStyles}\n          disabled={disabled}\n        >\n          {children}\n        </RNPressable>\n      );\n    },\n  ),\n);\n"],"mappings":"AA+EQ;AAzER,SAAS,YAAY,MAAM,mBAAmB;AAC9C;AAAA,EAEE,aAAa;AAAA,EAEb;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,YAGT;AAAA,EACF;AAAA,IACE,SAAS,cACP,EAAE,UAAU,UAAU,cAAc,OAAO,GAAG,MAAM,GACpD,KACA;AACA,YAAM,EAAE,QAAQ,QAAQ,IAAI,SAAS;AACrC,YAAM,SAAS,oBAAoB;AAEnC,YAAM,kBAAkB,OAAO;AAE/B,YAAM,sBAAsB,cAAc,KAAK;AAE/C,YAAM,kBAAkB;AAAA,QACtB,CAAC,UAA4D;AAC3D,cAAI;AAEJ,cAAI,OAAO,UAAU,YAAY;AAC/B,4BAAgB,MAAM,KAAK;AAAA,UAC7B,OAAO;AACL,4BAAgB;AAAA,UAClB;AAEA,iBAAO,WAAW,QAAQ;AAAA,YACxB;AAAA,cACE,SAAS,WACL,gBAAgB,kBAChB,MAAM,UACJ,gBAAgB,iBAChB;AAAA,YACR;AAAA,YACA,eAAe,MAAM,QAAQ,MAAM,gBAAgB,QAAQ,OAAO;AAAA,YAClE;AAAA,YACA;AAAA,YACA,MAAM,UAAU,eAAe;AAAA,UACjC,CAAC;AAAA,QACH;AAAA,QACA;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAM;AAAA,UACN,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,gBAAgB;AAAA,UAChB,gBAAgB;AAAA,QAClB;AAAA,MACF;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,OAAO;AAAA,UACP;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,IAEJ;AAAA,EACF;AACF;","names":[]}

package/dist/components/atoms/safe-area-view.d.mts

@@ -1,8 +1,7 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SafeAreaViewProps } from '../../types/safe-area-view.types.mjs';
 import 'react-native-safe-area-context';
 
-declare const SafeAreaView: react.MemoExoticComponent<(props: SafeAreaViewProps) => react_jsx_runtime.JSX.Element>;
+declare const SafeAreaView: react.MemoExoticComponent<(props: SafeAreaViewProps) => react.JSX.Element>;
 
 export { SafeAreaView };

package/dist/components/atoms/spinner.d.mts

@@ -1,9 +1,8 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SpinnerProps } from '../../types/spinner.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 
-declare const Spinner: react.MemoExoticComponent<({ animating, color, hidesWhenStopped, size, style, tone, ...props }: SpinnerProps) => react_jsx_runtime.JSX.Element>;
+declare const Spinner: react.MemoExoticComponent<({ animating, color, hidesWhenStopped, size, style, tone, ...props }: SpinnerProps) => react.JSX.Element>;
 
 export { Spinner };

package/dist/components/atoms/tag.d.mts

@@ -1,9 +1,8 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TagProps } from '../../types/tag.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 
-declare const Tag: react.MemoExoticComponent<({ label, size, variant, color, closable, disabled, onClose, onPress, }: TagProps) => react_jsx_runtime.JSX.Element>;
+declare const Tag: react.MemoExoticComponent<({ label, size, variant, color, closable, disabled, onClose, onPress, }: TagProps) => react.JSX.Element>;
 
 export { Tag };

package/dist/components/atoms/tag.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
+import { memo } from "react";
 import { StyleSheet, View } from "react-native";
 import { Icon } from "@impulse-ui-native/icon";
 import { XCircleIcon } from "@impulse-ui-native/icon/icons/x-circle";
@@ -32,12 +32,7 @@ const Tag = memo(function Tag2({
     },
     [size, variant, disabled, color]
   );
-  const Container = useMemo(() => {
-    if (onPress) {
-      return Pressable;
-    }
-    return View;
-  }, [onPress]);
+  const Container = onPress ? Pressable : View;
   const showClose = closable && !disabled && onClose;
   return /* @__PURE__ */ jsxs(Container, { onPress, disabled, style: styles.container, children: [
     /* @__PURE__ */ jsx(Typography.Caption, { style: styles.label, children: label }),

package/dist/components/atoms/tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\nimport {\n  AppTheme,\n  getAvailabilityStateTokens,\n  useComponentsTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { TagProps, TagThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Tag = memo(function Tag({\n  label,\n  size = \"medium\",\n  variant = \"filled\",\n  color = \"primary\",\n  closable,\n  disabled,\n  onClose,\n  onPress,\n}: TagProps) {\n  const tokens = useComponentsTokens();\n\n  const tagTokens = tokens.tag;\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      color,\n    },\n    [size, variant, disabled, color],\n  );\n\n  const Container = useMemo(() => {\n    if (onPress) {\n      return Pressable;\n    }\n\n    return View;\n  }, [onPress]);\n\n  const showClose = closable && !disabled && onClose;\n\n  return (\n    <Container onPress={onPress} disabled={disabled} style={styles.container}>\n      <Typography.Caption style={styles.label}>{label}</Typography.Caption>\n\n      {showClose ? (\n        <Pressable onPress={onClose} hitSlop={tagTokens.closeHitSlop}>\n          <Icon\n            icon={XCircleIcon}\n            size=\"small\"\n            color={styles.icon.color}\n            style={styles.icon}\n          />\n        </Pressable>\n      ) : null}\n    </Container>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: TagThemeProps) {\n  const { size, variant, color, disabled } = props;\n\n  const tagTokens = theme.components.tag;\n  const sizeTokens = tagTokens.sizes[size];\n  const appearanceTokens = getAvailabilityStateTokens(\n    tagTokens.colors[color][variant],\n    { disabled },\n  );\n\n  return StyleSheet.create({\n    container: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      alignSelf: \"flex-start\",\n\n      height: sizeTokens.height,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n      minWidth: sizeTokens.minWidth,\n\n      borderRadius: tagTokens.borderRadius,\n      gap: tagTokens.gap,\n      borderWidth: tagTokens.borderWidth,\n\n      borderColor: appearanceTokens.borderColor,\n      backgroundColor: appearanceTokens.backgroundColor,\n    },\n\n    label: {\n      fontSize: sizeTokens.fontSize,\n      color: appearanceTokens.color,\n    },\n\n    icon: {\n      marginLeft: tagTokens.iconMarginLeft,\n      color: appearanceTokens.color,\n    },\n  });\n}\n"],"mappings":"AAoDI,SACE,KADF;AApDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAEjC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,MAAM,KAAK,SAASA,KAAI;AAAA,EACnC;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,SAAS,oBAAoB;AAEnC,QAAM,YAAY,OAAO;AAEzB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,SAAS;AACX,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,YAAY,YAAY,CAAC,YAAY;AAE3C,SACE,qBAAC,aAAU,SAAkB,UAAoB,OAAO,OAAO,WAC7D;AAAA,wBAAC,WAAW,SAAX,EAAmB,OAAO,OAAO,OAAQ,iBAAM;AAAA,IAE/C,YACC,oBAAC,aAAU,SAAS,SAAS,SAAS,UAAU,cAC9C;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,OAAO,KAAK;AAAA,QACnB,OAAO,OAAO;AAAA;AAAA,IAChB,GACF,IACE;AAAA,KACN;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAsB;AAC3D,QAAM,EAAE,MAAM,SAAS,OAAO,SAAS,IAAI;AAE3C,QAAM,YAAY,MAAM,WAAW;AACnC,QAAM,aAAa,UAAU,MAAM,IAAI;AACvC,QAAM,mBAAmB;AAAA,IACvB,UAAU,OAAO,KAAK,EAAE,OAAO;AAAA,IAC/B,EAAE,SAAS;AAAA,EACb;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,MAEX,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,UAAU,WAAW;AAAA,MAErB,cAAc,UAAU;AAAA,MACxB,KAAK,UAAU;AAAA,MACf,aAAa,UAAU;AAAA,MAEvB,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,OAAO;AAAA,MACL,UAAU,WAAW;AAAA,MACrB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,IAEA,MAAM;AAAA,MACJ,YAAY,UAAU;AAAA,MACtB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Tag"]}
+{"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\nimport {\n  AppTheme,\n  getAvailabilityStateTokens,\n  useComponentsTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { TagProps, TagThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Tag = memo(function Tag({\n  label,\n  size = \"medium\",\n  variant = \"filled\",\n  color = \"primary\",\n  closable,\n  disabled,\n  onClose,\n  onPress,\n}: TagProps) {\n  const tokens = useComponentsTokens();\n\n  const tagTokens = tokens.tag;\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      color,\n    },\n    [size, variant, disabled, color],\n  );\n\n  const Container = onPress ? Pressable : View;\n\n  const showClose = closable && !disabled && onClose;\n\n  return (\n    <Container onPress={onPress} disabled={disabled} style={styles.container}>\n      <Typography.Caption style={styles.label}>{label}</Typography.Caption>\n\n      {showClose ? (\n        <Pressable onPress={onClose} hitSlop={tagTokens.closeHitSlop}>\n          <Icon\n            icon={XCircleIcon}\n            size=\"small\"\n            color={styles.icon.color}\n            style={styles.icon}\n          />\n        </Pressable>\n      ) : null}\n    </Container>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: TagThemeProps) {\n  const { size, variant, color, disabled } = props;\n\n  const tagTokens = theme.components.tag;\n  const sizeTokens = tagTokens.sizes[size];\n  const appearanceTokens = getAvailabilityStateTokens(\n    tagTokens.colors[color][variant],\n    { disabled },\n  );\n\n  return StyleSheet.create({\n    container: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      alignSelf: \"flex-start\",\n\n      height: sizeTokens.height,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n      minWidth: sizeTokens.minWidth,\n\n      borderRadius: tagTokens.borderRadius,\n      gap: tagTokens.gap,\n      borderWidth: tagTokens.borderWidth,\n\n      borderColor: appearanceTokens.borderColor,\n      backgroundColor: appearanceTokens.backgroundColor,\n    },\n\n    label: {\n      fontSize: sizeTokens.fontSize,\n      color: appearanceTokens.color,\n    },\n\n    icon: {\n      marginLeft: tagTokens.iconMarginLeft,\n      color: appearanceTokens.color,\n    },\n  });\n}\n"],"mappings":"AA8CI,SACE,KADF;AA9CJ,SAAS,YAAY;AACrB,SAAS,YAAY,YAAY;AAEjC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,MAAM,KAAK,SAASA,KAAI;AAAA,EACnC;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,SAAS,oBAAoB;AAEnC,QAAM,YAAY,OAAO;AAEzB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,YAAY,UAAU,YAAY;AAExC,QAAM,YAAY,YAAY,CAAC,YAAY;AAE3C,SACE,qBAAC,aAAU,SAAkB,UAAoB,OAAO,OAAO,WAC7D;AAAA,wBAAC,WAAW,SAAX,EAAmB,OAAO,OAAO,OAAQ,iBAAM;AAAA,IAE/C,YACC,oBAAC,aAAU,SAAS,SAAS,SAAS,UAAU,cAC9C;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,OAAO,KAAK;AAAA,QACnB,OAAO,OAAO;AAAA;AAAA,IAChB,GACF,IACE;AAAA,KACN;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAsB;AAC3D,QAAM,EAAE,MAAM,SAAS,OAAO,SAAS,IAAI;AAE3C,QAAM,YAAY,MAAM,WAAW;AACnC,QAAM,aAAa,UAAU,MAAM,IAAI;AACvC,QAAM,mBAAmB;AAAA,IACvB,UAAU,OAAO,KAAK,EAAE,OAAO;AAAA,IAC/B,EAAE,SAAS;AAAA,EACb;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,MAEX,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,UAAU,WAAW;AAAA,MAErB,cAAc,UAAU;AAAA,MACxB,KAAK,UAAU;AAAA,MACf,aAAa,UAAU;AAAA,MAEvB,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,OAAO;AAAA,MACL,UAAU,WAAW;AAAA,MACrB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,IAEA,MAAM;AAAA,MACJ,YAAY,UAAU;AAAA,MACtB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Tag"]}

package/dist/components/atoms/typography.d.mts

@@ -1,96 +1,95 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextProps } from '../../types/typography.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 
 declare const Typography: {
     Master: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     DisplayLarge: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     DisplayMedium: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     DisplaySmall: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Title1: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Title2: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Title3: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Title4: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Title5: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Title6: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Subtitle1: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Subtitle2: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     BodyLarge: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Body: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     BodySmall: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Caption: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Label: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Overline: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Helper: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Code: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Quote: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
     Eyebrow: react.MemoExoticComponent<{
-        (props: TextProps): react_jsx_runtime.JSX.Element;
+        (props: TextProps): react.JSX.Element;
         displayName: string;
     }>;
 };

package/dist/components/atoms/view.d.mts

@@ -1,8 +1,8 @@
-import * as react from 'react';
-import * as _impulse_ui_native_theme from '@impulse-ui-native/theme';
-import * as react_native from 'react-native';
+import { NamedExoticComponent, PropsWithoutRef, RefAttributes, ComponentRef } from 'react';
 import { View as View$1 } from 'react-native';
+import { ViewProps } from '../../types/view.types.mjs';
+import '@impulse-ui-native/theme';
 
-declare const View: react.NamedExoticComponent<react_native.ViewProps & _impulse_ui_native_theme.SpacingProps & _impulse_ui_native_theme.ColorProps & _impulse_ui_native_theme.ShadowProps & _impulse_ui_native_theme.BorderProps & _impulse_ui_native_theme.FlexProps & _impulse_ui_native_theme.DimensionProps & react.RefAttributes<View$1>>;
+declare const View: NamedExoticComponent<PropsWithoutRef<ViewProps> & RefAttributes<ComponentRef<typeof View$1>>>;
 
 export { View };

package/dist/components/atoms/view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/view.tsx"],"sourcesContent":["import { forwardRef, memo, useMemo } from \"react\";\nimport { View as NativeView, StyleSheet } from \"react-native\";\n\nimport {\n  getShadowStyle,\n  useStyleProps,\n  useTheme,\n} from \"@impulse-ui-native/theme\";\n\nimport { ViewProps } from \"../../types\";\n\nexport const View = memo(\n  forwardRef<NativeView, ViewProps>(function View(props: ViewProps, ref) {\n    const { style, shadow, shadowPosition, ...rest } = props;\n\n    const { colors, shadows } = useTheme();\n\n    const extractedStyleProps = useStyleProps(props);\n\n    const viewStyle = useMemo(() => {\n      return StyleSheet.flatten([\n        getShadowStyle(shadow, shadowPosition, colors, shadows),\n        extractedStyleProps,\n        style,\n      ]);\n    }, [extractedStyleProps, style, shadow, shadowPosition, colors, shadows]);\n\n    return <NativeView {...rest} style={viewStyle} ref={ref} />;\n  }),\n);\n"],"mappings":"AA2BW;AA3BX,SAAS,YAAY,MAAM,eAAe;AAC1C,SAAS,QAAQ,YAAY,kBAAkB;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,OAAO;AAAA,EAClB,WAAkC,SAASA,MAAK,OAAkB,KAAK;AACrE,UAAM,EAAE,OAAO,QAAQ,gBAAgB,GAAG,KAAK,IAAI;AAEnD,UAAM,EAAE,QAAQ,QAAQ,IAAI,SAAS;AAErC,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,YAAY,QAAQ,MAAM;AAC9B,aAAO,WAAW,QAAQ;AAAA,QACxB,eAAe,QAAQ,gBAAgB,QAAQ,OAAO;AAAA,QACtD;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,qBAAqB,OAAO,QAAQ,gBAAgB,QAAQ,OAAO,CAAC;AAExE,WAAO,oBAAC,cAAY,GAAG,MAAM,OAAO,WAAW,KAAU;AAAA,EAC3D,CAAC;AACH;","names":["View"]}
+{"version":3,"sources":["../../../src/components/atoms/view.tsx"],"sourcesContent":["import type {\n  ComponentRef,\n  NamedExoticComponent,\n  PropsWithoutRef,\n  RefAttributes,\n} from \"react\";\nimport { forwardRef, memo, useMemo } from \"react\";\nimport { View as NativeView, StyleSheet } from \"react-native\";\n\nimport {\n  getShadowStyle,\n  useStyleProps,\n  useTheme,\n} from \"@impulse-ui-native/theme\";\n\nimport { ViewProps } from \"../../types\";\n\nexport const View: NamedExoticComponent<\n  PropsWithoutRef<ViewProps> & RefAttributes<ComponentRef<typeof NativeView>>\n> = memo(\n  forwardRef<ComponentRef<typeof NativeView>, ViewProps>(function View(\n    props: ViewProps,\n    ref,\n  ) {\n    const { style, shadow, shadowPosition, ...rest } = props;\n\n    const { colors, shadows } = useTheme();\n\n    const extractedStyleProps = useStyleProps(props);\n\n    const viewStyle = useMemo(() => {\n      return StyleSheet.flatten([\n        getShadowStyle(shadow, shadowPosition, colors, shadows),\n        extractedStyleProps,\n        style,\n      ]);\n    }, [extractedStyleProps, style, shadow, shadowPosition, colors, shadows]);\n\n    return <NativeView {...rest} style={viewStyle} ref={ref} />;\n  }),\n);\n"],"mappings":"AAsCW;AAhCX,SAAS,YAAY,MAAM,eAAe;AAC1C,SAAS,QAAQ,YAAY,kBAAkB;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,OAET;AAAA,EACF,WAAuD,SAASA,MAC9D,OACA,KACA;AACA,UAAM,EAAE,OAAO,QAAQ,gBAAgB,GAAG,KAAK,IAAI;AAEnD,UAAM,EAAE,QAAQ,QAAQ,IAAI,SAAS;AAErC,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,YAAY,QAAQ,MAAM;AAC9B,aAAO,WAAW,QAAQ;AAAA,QACxB,eAAe,QAAQ,gBAAgB,QAAQ,OAAO;AAAA,QACtD;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,qBAAqB,OAAO,QAAQ,gBAAgB,QAAQ,OAAO,CAAC;AAExE,WAAO,oBAAC,cAAY,GAAG,MAAM,OAAO,WAAW,KAAU;AAAA,EAC3D,CAAC;AACH;","names":["View"]}