@impulse-ui-native/primitives 2.0.1 → 2.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ImpulseUI Native contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,10 @@
+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, children, style, ...props }: PropsWithChildren<ButtonProps>) => react_jsx_runtime.JSX.Element>;
+
+export { Button };

package/dist/components/atoms/button.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { ActivityIndicator, StyleSheet } from "react-native";
+import { useThemedStyles } from "@impulse-ui-native/theme";
+import { Pressable } from "./pressable";
+import { Typography } from "./typography";
+const Button = memo(function Button2({
+  size = "medium",
+  variant = "filled",
+  disabled,
+  children,
+  style,
+  ...props
+}) {
+  const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [
+    size,
+    variant,
+    disabled
+  ]);
+  const buttonStyles = useMemo(
+    () => [styles.button, style],
+    [styles.button, style]
+  );
+  const content = useMemo(() => {
+    if (props.loading) {
+      return /* @__PURE__ */ jsx(ActivityIndicator, { color: styles.text.color });
+    }
+    return typeof children === "string" ? /* @__PURE__ */ jsx(Typography.Master, { style: styles.text, children }) : children;
+  }, [children, props.loading, styles.text]);
+  return /* @__PURE__ */ jsx(Pressable, { style: buttonStyles, disabled, ...props, children: content });
+});
+function themedStyles(theme, props) {
+  const { size, variant, disabled } = props;
+  const buttonTokens = theme.components.button;
+  const sizeTokens = buttonTokens.sizes[size];
+  const variantTokens = buttonTokens.variants[variant];
+  return StyleSheet.create({
+    button: {
+      alignItems: "center",
+      justifyContent: "center",
+      height: sizeTokens.height,
+      paddingVertical: sizeTokens.paddingVertical,
+      paddingHorizontal: sizeTokens.paddingHorizontal,
+      borderWidth: buttonTokens.borderWidth,
+      borderRadius: buttonTokens.borderRadius,
+      borderColor: disabled ? variantTokens.disabledBorderColor : variantTokens.borderColor,
+      backgroundColor: disabled ? variantTokens.disabledBackgroundColor : variantTokens.backgroundColor
+    },
+    text: {
+      width: "100%",
+      textAlign: "center",
+      fontSize: sizeTokens.fontSize,
+      color: disabled ? variantTokens.disabledColor : variantTokens.color
+    }
+  });
+}
+export {
+  Button
+};
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { ActivityIndicator, StyleSheet } from \"react-native\";\n\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { ButtonProps, ButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Button = memo(function Button({\n  size = \"medium\",\n  variant = \"filled\",\n  disabled,\n  children,\n  style,\n  ...props\n}: PropsWithChildren<ButtonProps>) {\n  const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [\n    size,\n    variant,\n    disabled,\n  ]);\n\n  const buttonStyles = useMemo(\n    () => [styles.button, style],\n    [styles.button, style],\n  );\n\n  const content = useMemo(() => {\n    if (props.loading) {\n      return <ActivityIndicator color={styles.text.color} />;\n    }\n\n    return typeof children === \"string\" ? (\n      <Typography.Master style={styles.text}>{children}</Typography.Master>\n    ) : (\n      children\n    );\n  }, [children, props.loading, styles.text]);\n\n  return (\n    <Pressable style={buttonStyles} disabled={disabled} {...props}>\n      {content}\n    </Pressable>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: ButtonThemeProps) {\n  const { size, variant, disabled } = props;\n\n  const buttonTokens = theme.components.button;\n  const sizeTokens = buttonTokens.sizes[size];\n  const variantTokens = buttonTokens.variants[variant];\n\n  return StyleSheet.create({\n    button: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n\n      height: sizeTokens.height,\n      paddingVertical: sizeTokens.paddingVertical,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      borderWidth: buttonTokens.borderWidth,\n      borderRadius: buttonTokens.borderRadius,\n\n      borderColor: disabled\n        ? variantTokens.disabledBorderColor\n        : variantTokens.borderColor,\n\n      backgroundColor: disabled\n        ? variantTokens.disabledBackgroundColor\n        : variantTokens.backgroundColor,\n    },\n\n    text: {\n      width: \"100%\",\n      textAlign: \"center\",\n\n      fontSize: sizeTokens.fontSize,\n\n      color: disabled ? variantTokens.disabledColor : variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AA8Ba;AA9Bb,SAAS,MAAyB,eAAe;AACjD,SAAS,mBAAmB,kBAAkB;AAE9C,SAAmB,uBAAuB;AAG1C,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,SAAS,gBAAgB,cAAc,EAAE,MAAM,SAAS,SAAS,GAAG;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,MAAM,SAAS;AACjB,aAAO,oBAAC,qBAAkB,OAAO,OAAO,KAAK,OAAO;AAAA,IACtD;AAEA,WAAO,OAAO,aAAa,WACzB,oBAAC,WAAW,QAAX,EAAkB,OAAO,OAAO,MAAO,UAAS,IAEjD;AAAA,EAEJ,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,IAAI,CAAC;AAEzC,SACE,oBAAC,aAAU,OAAO,cAAc,UAAqB,GAAG,OACrD,mBACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,SAAS,SAAS,IAAI;AAEpC,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,gBAAgB,aAAa,SAAS,OAAO;AAEnD,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,iBAAiB,WAAW;AAAA,MAC5B,mBAAmB,WAAW;AAAA,MAE9B,aAAa,aAAa;AAAA,MAC1B,cAAc,aAAa;AAAA,MAE3B,aAAa,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAU,WAAW;AAAA,MAErB,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["Button"]}

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

@@ -0,0 +1,12 @@
+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, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react_jsx_runtime.JSX.Element>;
+
+export { IconButton };

package/dist/components/atoms/icon-button.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { Icon } from "@impulse-ui-native/icon/components/icon";
+import { useThemedStyles } from "@impulse-ui-native/theme";
+import { Pressable } from "./pressable";
+const IconButton = memo(function IconButton2({
+  size = "medium",
+  variant = "filled",
+  disabled,
+  style,
+  icon,
+  ...props
+}) {
+  const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [
+    size,
+    variant,
+    disabled
+  ]);
+  const iconButtonStyles = useMemo(
+    () => [styles.button, style],
+    [styles.button, style]
+  );
+  return /* @__PURE__ */ jsx(Pressable, { style: iconButtonStyles, disabled, ...props, children: /* @__PURE__ */ jsx(Icon, { size, icon, color: styles.icon.color }) });
+});
+function themedStyles(theme, props) {
+  const { size, variant, disabled } = props;
+  const iconButtonTokens = theme.components.iconButton;
+  const sizeTokens = iconButtonTokens.sizes[size];
+  const variantTokens = iconButtonTokens.variants[variant];
+  return StyleSheet.create({
+    button: {
+      alignItems: "center",
+      justifyContent: "center",
+      height: sizeTokens.size,
+      width: sizeTokens.size,
+      padding: sizeTokens.padding,
+      borderWidth: iconButtonTokens.borderWidth,
+      borderRadius: iconButtonTokens.borderRadius,
+      borderColor: disabled ? variantTokens.disabledBorderColor : variantTokens.borderColor,
+      backgroundColor: disabled ? variantTokens.disabledBackgroundColor : variantTokens.backgroundColor
+    },
+    icon: {
+      color: disabled ? variantTokens.disabledColor : variantTokens.color
+    }
+  });
+}
+export {
+  IconButton
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/components/atoms/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\n\nexport const IconButton = memo(function IconButton({\n  size = \"medium\",\n  variant = \"filled\",\n  disabled,\n  style,\n  icon,\n  ...props\n}: PropsWithChildren<IconButtonProps>) {\n  const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [\n    size,\n    variant,\n    disabled,\n  ]);\n\n  const iconButtonStyles = useMemo(\n    () => [styles.button, style],\n    [styles.button, style],\n  );\n\n  return (\n    <Pressable style={iconButtonStyles} disabled={disabled} {...props}>\n      <Icon size={size} icon={icon} color={styles.icon.color} />\n    </Pressable>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: IconButtonThemeProps) {\n  const { size, variant, disabled } = props;\n\n  const iconButtonTokens = theme.components.iconButton;\n  const sizeTokens = iconButtonTokens.sizes[size];\n  const variantTokens = iconButtonTokens.variants[variant];\n\n  return StyleSheet.create({\n    button: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n\n      height: sizeTokens.size,\n      width: sizeTokens.size,\n      padding: sizeTokens.padding,\n\n      borderWidth: iconButtonTokens.borderWidth,\n      borderRadius: iconButtonTokens.borderRadius,\n\n      borderColor: disabled\n        ? variantTokens.disabledBorderColor\n        : variantTokens.borderColor,\n\n      backgroundColor: disabled\n        ? variantTokens.disabledBackgroundColor\n        : variantTokens.backgroundColor,\n    },\n\n    icon: {\n      color: disabled ? variantTokens.disabledColor : variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AA8BM;AA9BN,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAmB,uBAAuB;AAG1C,SAAS,iBAAiB;AAEnB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS,gBAAgB,cAAc,EAAE,MAAM,SAAS,SAAS,GAAG;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,SACE,oBAAC,aAAU,OAAO,kBAAkB,UAAqB,GAAG,OAC1D,8BAAC,QAAK,MAAY,MAAY,OAAO,OAAO,KAAK,OAAO,GAC1D;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA6B;AAClE,QAAM,EAAE,MAAM,SAAS,SAAS,IAAI;AAEpC,QAAM,mBAAmB,MAAM,WAAW;AAC1C,QAAM,aAAa,iBAAiB,MAAM,IAAI;AAC9C,QAAM,gBAAgB,iBAAiB,SAAS,OAAO;AAEvD,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,OAAO,WAAW;AAAA,MAClB,SAAS,WAAW;AAAA,MAEpB,aAAa,iBAAiB;AAAA,MAC9B,cAAc,iBAAiB;AAAA,MAE/B,aAAa,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["IconButton"]}

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

@@ -0,0 +1,18 @@
+export { View } from './view.mjs';
+export { SafeAreaView } from './safe-area-view.mjs';
+export { Typography, TypographyComponent } from './typography.mjs';
+export { Button } from './button.mjs';
+export { IconButton } from './icon-button.mjs';
+export { Pressable } from './pressable.mjs';
+export { Tag } from './tag.mjs';
+import 'react';
+import '@impulse-ui-native/theme';
+import 'react-native';
+import 'react/jsx-runtime';
+import '../../types/safe-area-view.types.mjs';
+import 'react-native-safe-area-context';
+import '../../types/typography.types.mjs';
+import '../../types/button.types.mjs';
+import '../../types/icon-button.types.mjs';
+import '@impulse-ui-native/icon/types';
+import '../../types/tag.types.mjs';

package/dist/components/atoms/index.js

@@ -0,0 +1,17 @@
+import { View } from "./view";
+import { SafeAreaView } from "./safe-area-view";
+import { Typography } from "./typography";
+import { Button } from "./button";
+import { IconButton } from "./icon-button";
+import { Pressable } from "./pressable";
+import { Tag } from "./tag";
+export {
+  Button,
+  IconButton,
+  Pressable,
+  SafeAreaView,
+  Tag,
+  Typography,
+  View
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/index.ts"],"sourcesContent":["export { View } from \"./view\";\nexport { SafeAreaView } from \"./safe-area-view\";\nexport { Typography, type TypographyComponent } from \"./typography\";\nexport { Button } from \"./button\";\nexport { IconButton } from \"./icon-button\";\nexport { Pressable } from \"./pressable\";\nexport { Tag } from \"./tag\";\n"],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAA4C;AACrD,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,WAAW;","names":[]}

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

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { PressableCoreProps } from '../../types/button.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+
+declare const Pressable: ({ children, disabled, pressedStyle, style, ...props }: PropsWithChildren<PressableCoreProps>) => react_jsx_runtime.JSX.Element;
+
+export { Pressable };

package/dist/components/atoms/pressable.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import {
+  Pressable as RNPressable,
+  StyleSheet
+} from "react-native";
+import {
+  getShadowStyle,
+  useColors,
+  useStyleProps
+} from "@impulse-ui-native/theme";
+const Pressable = function PressableCore({
+  children,
+  disabled,
+  pressedStyle,
+  style,
+  ...props
+}) {
+  const colors = useColors();
+  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 || state.pressed ? 0.6 : 1 },
+        getShadowStyle(props.shadow, props.shadowPosition, colors),
+        extractedStyleProps,
+        overrideStyle,
+        state.pressed ? pressedStyle : void 0
+      ]);
+    },
+    [
+      style,
+      pressedStyle,
+      disabled,
+      extractedStyleProps,
+      props.shadow,
+      props.shadowPosition,
+      colors
+    ]
+  );
+  return /* @__PURE__ */ jsx(RNPressable, { ...props, style: pressableStyles, disabled, children });
+};
+export {
+  Pressable
+};
+//# sourceMappingURL=pressable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import { PropsWithChildren, 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  useColors,\n  useStyleProps,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable = function PressableCore({\n  children,\n  disabled,\n  pressedStyle,\n  style,\n  ...props\n}: PropsWithChildren<PressableCoreProps>) {\n  const colors = useColors();\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        { opacity: disabled || state.pressed ? 0.6 : 1 },\n        getShadowStyle(props.shadow, props.shadowPosition, colors),\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    ],\n  );\n\n  return (\n    <RNPressable {...props} style={pressableStyles} disabled={disabled}>\n      {children}\n    </RNPressable>\n  );\n};\n"],"mappings":"AAyDI;AAzDJ,SAA4B,mBAAmB;AAC/C;AAAA,EAEE,aAAa;AAAA,EAEb;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,YAAY,SAAS,cAAc;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,QAAM,SAAS,UAAU;AACzB,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA4D;AAC3D,UAAI;AAEJ,UAAI,OAAO,UAAU,YAAY;AAC/B,wBAAgB,MAAM,KAAK;AAAA,MAC7B,OAAO;AACL,wBAAgB;AAAA,MAClB;AAEA,aAAO,WAAW,QAAQ;AAAA,QACxB,EAAE,SAAS,YAAY,MAAM,UAAU,MAAM,EAAE;AAAA,QAC/C,eAAe,MAAM,QAAQ,MAAM,gBAAgB,MAAM;AAAA,QACzD;AAAA,QACA;AAAA,QACA,MAAM,UAAU,eAAe;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAO,iBAAiB,UAC7C,UACH;AAEJ;","names":[]}

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

@@ -0,0 +1,8 @@
+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>;
+
+export { SafeAreaView };

package/dist/components/atoms/safe-area-view.js

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import {
+  useSafeAreaInsets
+} from "react-native-safe-area-context";
+import { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from "../../constants";
+import { View } from "./view";
+const SafeAreaView = memo(function SafeAreaView2(props) {
+  const { edges, mode = "padding", style, ...rest } = props;
+  const insets = useSafeAreaInsets();
+  const flatenedStyle = useMemo(() => {
+    return StyleSheet.flatten(style);
+  }, [style]);
+  const nativeEdges = useMemo(() => {
+    if (!edges) {
+      return {
+        top: "additive",
+        bottom: "additive",
+        left: "additive",
+        right: "additive"
+      };
+    }
+    let computedEdges;
+    if (Array.isArray(edges)) {
+      computedEdges = edges.reduce((acc, current) => {
+        acc[current] = "additive";
+        return acc;
+      }, {});
+    } else {
+      computedEdges = edges;
+    }
+    return {
+      top: computedEdges.top ?? "off",
+      bottom: computedEdges.bottom ?? "off",
+      left: computedEdges.left ?? "off",
+      right: computedEdges.right ?? "off"
+    };
+  }, [edges]);
+  const getSpacingKey = useCallback(
+    (edge) => `${mode}${EdgeToSpacingKeyMap[edge]}`,
+    [mode]
+  );
+  const getSpacingForEdge = useCallback(
+    (edge) => {
+      const shorthand = `${mode}${EdgeToShorthandKeyMap[edge]}`;
+      const spacing = getSpacingKey(edge);
+      return Number(
+        flatenedStyle?.[spacing] ?? flatenedStyle?.[shorthand] ?? flatenedStyle?.[mode] ?? 0
+      );
+    },
+    [flatenedStyle, getSpacingKey, mode]
+  );
+  const resolveEdge = useCallback(
+    (inset, current, edgeMode) => {
+      if (edgeMode === "off") {
+        return current;
+      }
+      if (edgeMode === "maximum") {
+        return Math.max(inset, current);
+      }
+      return inset + current;
+    },
+    []
+  );
+  const computedStyle = useMemo(() => {
+    const insetsStyle = {
+      [getSpacingKey("top")]: resolveEdge(
+        insets.top,
+        getSpacingForEdge("top"),
+        nativeEdges.top
+      ),
+      [getSpacingKey("bottom")]: resolveEdge(
+        insets.bottom,
+        getSpacingForEdge("bottom"),
+        nativeEdges.bottom
+      ),
+      [getSpacingKey("left")]: resolveEdge(
+        insets.left,
+        getSpacingForEdge("left"),
+        nativeEdges.left
+      ),
+      [getSpacingKey("right")]: resolveEdge(
+        insets.right,
+        getSpacingForEdge("right"),
+        nativeEdges.right
+      )
+    };
+    return StyleSheet.flatten([style, insetsStyle]);
+  }, [
+    insets,
+    nativeEdges,
+    style,
+    resolveEdge,
+    getSpacingKey,
+    getSpacingForEdge
+  ]);
+  return /* @__PURE__ */ jsx(View, { style: computedStyle, ...rest });
+});
+export {
+  SafeAreaView
+};
+//# sourceMappingURL=safe-area-view.js.map

package/dist/components/atoms/safe-area-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/safe-area-view.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from \"react\";\nimport { StyleSheet, ViewStyle } from \"react-native\";\nimport {\n  Edge,\n  EdgeMode,\n  EdgeRecord,\n  useSafeAreaInsets,\n} from \"react-native-safe-area-context\";\n\nimport { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from \"../../constants\";\nimport { SafeAreaViewProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const SafeAreaView = memo(function SafeAreaView(\n  props: SafeAreaViewProps,\n) {\n  const { edges, mode = \"padding\", style, ...rest } = props;\n  const insets = useSafeAreaInsets();\n\n  const flatenedStyle = useMemo(() => {\n    return StyleSheet.flatten(style);\n  }, [style]);\n\n  const nativeEdges = useMemo<Record<Edge, EdgeMode>>(() => {\n    if (!edges) {\n      return {\n        top: \"additive\",\n        bottom: \"additive\",\n        left: \"additive\",\n        right: \"additive\",\n      };\n    }\n\n    let computedEdges: EdgeRecord;\n\n    if (Array.isArray(edges)) {\n      computedEdges = edges.reduce<EdgeRecord>((acc, current: Edge) => {\n        acc[current] = \"additive\";\n\n        return acc;\n      }, {});\n    } else {\n      computedEdges = edges as EdgeRecord;\n    }\n\n    return {\n      top: computedEdges.top ?? \"off\",\n      bottom: computedEdges.bottom ?? \"off\",\n      left: computedEdges.left ?? \"off\",\n      right: computedEdges.right ?? \"off\",\n    };\n  }, [edges]);\n\n  const getSpacingKey = useCallback(\n    (edge: Edge): keyof ViewStyle => `${mode}${EdgeToSpacingKeyMap[edge]}`,\n    [mode],\n  );\n\n  const getSpacingForEdge = useCallback(\n    (edge: Edge): number => {\n      const shorthand: keyof ViewStyle = `${mode}${EdgeToShorthandKeyMap[edge]}`;\n      const spacing: keyof ViewStyle = getSpacingKey(edge);\n\n      return Number(\n        flatenedStyle?.[spacing] ??\n          flatenedStyle?.[shorthand] ??\n          flatenedStyle?.[mode] ??\n          0,\n      );\n    },\n    [flatenedStyle, getSpacingKey, mode],\n  );\n\n  const resolveEdge = useCallback(\n    (inset: number, current: number, edgeMode: EdgeMode) => {\n      if (edgeMode === \"off\") {\n        return current;\n      }\n\n      if (edgeMode === \"maximum\") {\n        return Math.max(inset, current);\n      }\n\n      return inset + current;\n    },\n    [],\n  );\n\n  const computedStyle = useMemo(() => {\n    const insetsStyle: ViewStyle = {\n      [getSpacingKey(\"top\")]: resolveEdge(\n        insets.top,\n        getSpacingForEdge(\"top\"),\n        nativeEdges.top,\n      ),\n      [getSpacingKey(\"bottom\")]: resolveEdge(\n        insets.bottom,\n        getSpacingForEdge(\"bottom\"),\n        nativeEdges.bottom,\n      ),\n      [getSpacingKey(\"left\")]: resolveEdge(\n        insets.left,\n        getSpacingForEdge(\"left\"),\n        nativeEdges.left,\n      ),\n      [getSpacingKey(\"right\")]: resolveEdge(\n        insets.right,\n        getSpacingForEdge(\"right\"),\n        nativeEdges.right,\n      ),\n    };\n\n    return StyleSheet.flatten([style, insetsStyle]);\n  }, [\n    insets,\n    nativeEdges,\n    style,\n    resolveEdge,\n    getSpacingKey,\n    getSpacingForEdge,\n  ]);\n\n  return <View style={computedStyle} {...rest} />;\n});\n"],"mappings":"AA0HS;AA1HT,SAAS,MAAM,aAAa,eAAe;AAC3C,SAAS,kBAA6B;AACtC;AAAA,EAIE;AAAA,OACK;AAEP,SAAS,uBAAuB,2BAA2B;AAE3D,SAAS,YAAY;AAEd,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,OAAO,WAAW,OAAO,GAAG,KAAK,IAAI;AACpD,QAAM,SAAS,kBAAkB;AAEjC,QAAM,gBAAgB,QAAQ,MAAM;AAClC,WAAO,WAAW,QAAQ,KAAK;AAAA,EACjC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,cAAc,QAAgC,MAAM;AACxD,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,QACL,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAEA,QAAI;AAEJ,QAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,sBAAgB,MAAM,OAAmB,CAAC,KAAK,YAAkB;AAC/D,YAAI,OAAO,IAAI;AAEf,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,OAAO;AACL,sBAAgB;AAAA,IAClB;AAEA,WAAO;AAAA,MACL,KAAK,cAAc,OAAO;AAAA,MAC1B,QAAQ,cAAc,UAAU;AAAA,MAChC,MAAM,cAAc,QAAQ;AAAA,MAC5B,OAAO,cAAc,SAAS;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAgC,GAAG,IAAI,GAAG,oBAAoB,IAAI,CAAC;AAAA,IACpE,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,SAAuB;AACtB,YAAM,YAA6B,GAAG,IAAI,GAAG,sBAAsB,IAAI,CAAC;AACxE,YAAM,UAA2B,cAAc,IAAI;AAEnD,aAAO;AAAA,QACL,gBAAgB,OAAO,KACrB,gBAAgB,SAAS,KACzB,gBAAgB,IAAI,KACpB;AAAA,MACJ;AAAA,IACF;AAAA,IACA,CAAC,eAAe,eAAe,IAAI;AAAA,EACrC;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,OAAe,SAAiB,aAAuB;AACtD,UAAI,aAAa,OAAO;AACtB,eAAO;AAAA,MACT;AAEA,UAAI,aAAa,WAAW;AAC1B,eAAO,KAAK,IAAI,OAAO,OAAO;AAAA,MAChC;AAEA,aAAO,QAAQ;AAAA,IACjB;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,cAAyB;AAAA,MAC7B,CAAC,cAAc,KAAK,CAAC,GAAG;AAAA,QACtB,OAAO;AAAA,QACP,kBAAkB,KAAK;AAAA,QACvB,YAAY;AAAA,MACd;AAAA,MACA,CAAC,cAAc,QAAQ,CAAC,GAAG;AAAA,QACzB,OAAO;AAAA,QACP,kBAAkB,QAAQ;AAAA,QAC1B,YAAY;AAAA,MACd;AAAA,MACA,CAAC,cAAc,MAAM,CAAC,GAAG;AAAA,QACvB,OAAO;AAAA,QACP,kBAAkB,MAAM;AAAA,QACxB,YAAY;AAAA,MACd;AAAA,MACA,CAAC,cAAc,OAAO,CAAC,GAAG;AAAA,QACxB,OAAO;AAAA,QACP,kBAAkB,OAAO;AAAA,QACzB,YAAY;AAAA,MACd;AAAA,IACF;AAEA,WAAO,WAAW,QAAQ,CAAC,OAAO,WAAW,CAAC;AAAA,EAChD,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,oBAAC,QAAK,OAAO,eAAgB,GAAG,MAAM;AAC/C,CAAC;","names":["SafeAreaView"]}

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

@@ -0,0 +1,9 @@
+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>;
+
+export { Tag };

package/dist/components/atoms/tag.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { Icon } from "@impulse-ui-native/icon/components/icon";
+import { XCircleIcon } from "@impulse-ui-native/icon/icons/x-circle";
+import { useThemedStyles } from "@impulse-ui-native/theme";
+import { Pressable } from "./pressable";
+import { Typography } from "./typography";
+const Tag = memo(function Tag2({
+  label,
+  size = "medium",
+  variant = "filled",
+  color = "primary",
+  closable,
+  disabled,
+  onClose,
+  onPress
+}) {
+  const styles = useThemedStyles(
+    themedStyles,
+    {
+      size,
+      variant,
+      disabled,
+      color
+    },
+    [size, variant, disabled, color]
+  );
+  const Container = useMemo(() => {
+    if (onPress) {
+      return Pressable;
+    }
+    return View;
+  }, [onPress]);
+  const showClose = (closable || size === "medium" || size === "large") && !disabled && onClose;
+  return /* @__PURE__ */ jsxs(Container, { onPress, disabled, style: styles.container, children: [
+    /* @__PURE__ */ jsx(Typography.Caption, { style: styles.label, children: label }),
+    showClose ? /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: XCircleIcon,
+        size: "small",
+        color: styles.icon.color,
+        style: styles.icon
+      }
+    ) }) : null
+  ] });
+});
+function themedStyles(theme, props) {
+  const { size, variant, color, disabled } = props;
+  const tagTokens = theme.components.tag;
+  const sizeTokens = tagTokens.sizes[size];
+  const variantTokens = tagTokens.colors[color][variant];
+  return StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      alignSelf: "flex-start",
+      height: sizeTokens.height,
+      paddingHorizontal: sizeTokens.paddingHorizontal,
+      minWidth: sizeTokens.minWidth,
+      borderRadius: tagTokens.borderRadius,
+      gap: tagTokens.gap,
+      borderWidth: tagTokens.borderWidth,
+      borderColor: disabled ? variantTokens.disabledBorderColor : variantTokens.borderColor,
+      backgroundColor: disabled ? variantTokens.disabledBackgroundColor : variantTokens.backgroundColor
+    },
+    label: {
+      fontSize: sizeTokens.fontSize,
+      color: disabled ? variantTokens.disabledColor : variantTokens.color
+    },
+    icon: {
+      marginLeft: tagTokens.iconMarginLeft,
+      color: disabled ? variantTokens.disabledColor : variantTokens.color
+    }
+  });
+}
+export {
+  Tag
+};
+//# sourceMappingURL=tag.js.map

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

@@ -0,0 +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/components/icon\";\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\nimport { AppTheme, useThemedStyles } 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 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 =\n    (closable || size === \"medium\" || size === \"large\") && !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={10}>\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 variantTokens = tagTokens.colors[color][variant];\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: disabled\n        ? variantTokens.disabledBorderColor\n        : variantTokens.borderColor,\n\n      backgroundColor: disabled\n        ? variantTokens.disabledBackgroundColor\n        : variantTokens.backgroundColor,\n    },\n\n    label: {\n      fontSize: sizeTokens.fontSize,\n      color: disabled ? variantTokens.disabledColor : variantTokens.color,\n    },\n\n    icon: {\n      marginLeft: tagTokens.iconMarginLeft,\n      color: disabled ? variantTokens.disabledColor : variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AA4CI,SACE,KADF;AA5CJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAEjC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAmB,uBAAuB;AAG1C,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;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,aACH,YAAY,SAAS,YAAY,SAAS,YAAY,CAAC,YAAY;AAEtE,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,IACpC;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,gBAAgB,UAAU,OAAO,KAAK,EAAE,OAAO;AAErD,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,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,OAAO;AAAA,MACL,UAAU,WAAW;AAAA,MACrB,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,IAEA,MAAM;AAAA,MACJ,YAAY,UAAU;AAAA,MACtB,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["Tag"]}

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

@@ -0,0 +1,99 @@
+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;
+        displayName: string;
+    }>;
+    DisplayLarge: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    DisplayMedium: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    DisplaySmall: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Title1: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Title2: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Title3: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Title4: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Title5: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Title6: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Subtitle1: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Subtitle2: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    BodyLarge: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Body: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    BodySmall: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Caption: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Label: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Overline: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Helper: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Code: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Quote: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+    Eyebrow: react.MemoExoticComponent<{
+        (props: TextProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    }>;
+};
+type TypographyComponent = (typeof Typography)[keyof typeof Typography];
+
+export { Typography, type TypographyComponent };