@impulse-ui-native/primitives 2.0.1 → 2.1.1

package/dist/index.js

@@ -1,998 +1,5 @@
-// src/components/atoms/view.tsx
-import { forwardRef, memo, useMemo } from "react";
-import { View as NativeView, StyleSheet } from "react-native";
-import {
-  getShadowStyle,
-  useColors,
-  useStyleProps
-} from "@impulse-ui-native/theme";
-import { jsx } from "react/jsx-runtime";
-var View = memo(
-  forwardRef(function View2(props, ref) {
-    const { style, shadow, shadowPosition, ...rest } = props;
-    const colors = useColors();
-    const extractedStyleProps = useStyleProps(props);
-    const viewStyle = useMemo(() => {
-      return StyleSheet.flatten([
-        getShadowStyle(shadow, shadowPosition, colors),
-        extractedStyleProps,
-        style
-      ]);
-    }, [extractedStyleProps, style, shadow, shadowPosition, colors]);
-    return /* @__PURE__ */ jsx(NativeView, { ...rest, style: viewStyle, ref });
-  })
-);
-
-// src/components/atoms/safe-area-view.tsx
-import { memo as memo2, useCallback, useMemo as useMemo2 } from "react";
-import { StyleSheet as StyleSheet2 } from "react-native";
-import {
-  useSafeAreaInsets
-} from "react-native-safe-area-context";
-
-// src/constants/safe-area-view.constants.ts
-var EdgeToSpacingKeyMap = {
-  top: "Top",
-  bottom: "Bottom",
-  left: "Left",
-  right: "Right"
-};
-var EdgeToShorthandKeyMap = {
-  top: "Vertical",
-  bottom: "Vertical",
-  left: "Horizontal",
-  right: "Horizontal"
-};
-
-// src/constants/control-container.constants.ts
-var ControlContainerHeight = {
-  small: 36,
-  medium: 44,
-  large: 52
-};
-var ControlFontSize = {
-  small: 14,
-  medium: 16,
-  large: 18
-};
-
-// src/components/atoms/safe-area-view.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var SafeAreaView = memo2(function SafeAreaView2(props) {
-  const { edges, mode = "padding", style, ...rest } = props;
-  const insets = useSafeAreaInsets();
-  const flatenedStyle = useMemo2(() => {
-    return StyleSheet2.flatten(style);
-  }, [style]);
-  const nativeEdges = useMemo2(() => {
-    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 = useMemo2(() => {
-    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 StyleSheet2.flatten([style, insetsStyle]);
-  }, [
-    insets,
-    nativeEdges,
-    style,
-    resolveEdge,
-    getSpacingKey,
-    getSpacingForEdge
-  ]);
-  return /* @__PURE__ */ jsx2(View, { style: computedStyle, ...rest });
-});
-
-// src/hocs/create-preset.hoc.tsx
-import { memo as memo3, useMemo as useMemo3 } from "react";
-import { StyleSheet as StyleSheet3, Text } from "react-native";
-import {
-  useStyleProps as useStyleProps2,
-  useTheme
-} from "@impulse-ui-native/theme";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var numericFontVariant = ["tabular-nums"];
-var defaultFontVariant = [];
-function createPreset(config, key) {
-  const Component = (props) => {
-    const { style, numeric, fontStyle, fontWeight, ...rest } = props;
-    const theme = useTheme();
-    const extractedStyleProps = useStyleProps2(props);
-    const typographyStyle = useMemo3(() => {
-      const themedConfig = config(theme);
-      const resolvedFontStyle = fontStyle ?? themedConfig.fontStyle ?? "normal";
-      const resolvedFontWeight = fontWeight ?? themedConfig.fontWeight ?? 400;
-      const fontFamily = theme.fontFamily[resolvedFontStyle][resolvedFontWeight];
-      return StyleSheet3.flatten([
-        themedConfig,
-        extractedStyleProps,
-        {
-          fontFamily,
-          fontVariant: numeric ? numericFontVariant : defaultFontVariant
-        },
-        style
-      ]);
-    }, [theme, extractedStyleProps, style, numeric, fontStyle, fontWeight]);
-    return /* @__PURE__ */ jsx3(Text, { ...rest, style: typographyStyle });
-  };
-  Component.displayName = `Typography.${key}`;
-  return memo3(Component);
-}
-
-// src/components/atoms/typography.tsx
-var Typography = {
-  Master: createPreset(
-    (theme) => ({ fontWeight: theme.fontWeight.regular }),
-    "Master"
-  ),
-  DisplayLarge: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.bold,
-      fontSize: theme.fontSize.colossal,
-      lineHeight: theme.lineHeight.colossal
-    }),
-    "DisplayLarge"
-  ),
-  DisplayMedium: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.bold,
-      fontSize: theme.fontSize.giant,
-      lineHeight: theme.lineHeight.giant
-    }),
-    "DisplayMedium"
-  ),
-  DisplaySmall: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.semiBold,
-      fontSize: theme.fontSize.huge,
-      lineHeight: theme.lineHeight.huge
-    }),
-    "DisplaySmall"
-  ),
-  Title1: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.bold,
-      fontSize: theme.fontSize.xxxl,
-      lineHeight: theme.lineHeight.xxxl
-    }),
-    "Title1"
-  ),
-  Title2: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.bold,
-      fontSize: theme.fontSize.xxl,
-      lineHeight: theme.lineHeight.xxl
-    }),
-    "Title2"
-  ),
-  Title3: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.semiBold,
-      fontSize: theme.fontSize.xl,
-      lineHeight: theme.lineHeight.xl
-    }),
-    "Title3"
-  ),
-  Title4: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.semiBold,
-      fontSize: theme.fontSize.lg,
-      lineHeight: theme.lineHeight.lg
-    }),
-    "Title4"
-  ),
-  Title5: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.semiBold,
-      fontSize: theme.fontSize.md,
-      lineHeight: theme.lineHeight.md
-    }),
-    "Title5"
-  ),
-  Title6: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.semiBold,
-      fontSize: theme.fontSize.sm,
-      lineHeight: theme.lineHeight.sm
-    }),
-    "Title6"
-  ),
-  Subtitle1: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.medium,
-      fontSize: theme.fontSize.md,
-      lineHeight: theme.lineHeight.lg
-    }),
-    "Subtitle1"
-  ),
-  Subtitle2: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.regular,
-      fontSize: theme.fontSize.sm,
-      lineHeight: theme.lineHeight.sm
-    }),
-    "Subtitle2"
-  ),
-  BodyLarge: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.regular,
-      fontSize: theme.fontSize.md,
-      lineHeight: theme.lineHeight.lg
-    }),
-    "BodyLarge"
-  ),
-  Body: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.regular,
-      fontSize: theme.fontSize.sm,
-      lineHeight: theme.lineHeight.sm
-    }),
-    "Body"
-  ),
-  BodySmall: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.regular,
-      fontSize: theme.fontSize.xsm,
-      lineHeight: theme.lineHeight.xsm
-    }),
-    "BodySmall"
-  ),
-  Caption: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.regular,
-      fontSize: theme.fontSize.xs,
-      lineHeight: theme.lineHeight.xs
-    }),
-    "Caption"
-  ),
-  Label: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.medium,
-      fontSize: theme.fontSize.xsm,
-      lineHeight: theme.lineHeight.xsm
-    }),
-    "Label"
-  ),
-  Overline: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.semiBold,
-      fontSize: theme.fontSize.xs,
-      lineHeight: theme.lineHeight.xs,
-      textTransform: "uppercase",
-      letterSpacing: 1
-    }),
-    "Overline"
-  ),
-  Helper: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.regular,
-      fontSize: theme.fontSize.xsm,
-      lineHeight: theme.lineHeight.xsm
-    }),
-    "Helper"
-  ),
-  Code: createPreset(
-    (theme) => ({
-      fontFamily: "monospace",
-      fontSize: theme.fontSize.xsm,
-      lineHeight: theme.lineHeight.xsm
-    }),
-    "Code"
-  ),
-  Quote: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.regular,
-      fontSize: theme.fontSize.md,
-      lineHeight: theme.lineHeight.lg,
-      fontStyle: "italic"
-    }),
-    "Quote"
-  ),
-  Eyebrow: createPreset(
-    (theme) => ({
-      fontWeight: theme.fontWeight.medium,
-      fontSize: theme.fontSize.xs,
-      lineHeight: theme.lineHeight.xs,
-      textTransform: "uppercase",
-      letterSpacing: 1
-    }),
-    "Eyebrow"
-  )
-};
-
-// src/components/atoms/button.tsx
-import { memo as memo4, useMemo as useMemo4 } from "react";
-import { ActivityIndicator, StyleSheet as StyleSheet5 } from "react-native";
-import { useThemedStyles } from "@impulse-ui-native/theme";
-
-// src/components/atoms/pressable.tsx
-import { useCallback as useCallback2 } from "react";
-import {
-  Pressable as RNPressable,
-  StyleSheet as StyleSheet4
-} from "react-native";
-import {
-  getShadowStyle as getShadowStyle2,
-  useColors as useColors2,
-  useStyleProps as useStyleProps3
-} from "@impulse-ui-native/theme";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Pressable = function PressableCore({
-  children,
-  disabled,
-  pressedStyle,
-  style,
-  ...props
-}) {
-  const colors = useColors2();
-  const extractedStyleProps = useStyleProps3(props);
-  const pressableStyles = useCallback2(
-    (state) => {
-      let overrideStyle;
-      if (typeof style === "function") {
-        overrideStyle = style(state);
-      } else {
-        overrideStyle = style;
-      }
-      return StyleSheet4.flatten([
-        { opacity: disabled || state.pressed ? 0.6 : 1 },
-        getShadowStyle2(props.shadow, props.shadowPosition, colors),
-        extractedStyleProps,
-        overrideStyle,
-        state.pressed ? pressedStyle : void 0
-      ]);
-    },
-    [
-      style,
-      pressedStyle,
-      disabled,
-      extractedStyleProps,
-      props.shadow,
-      props.shadowPosition,
-      colors
-    ]
-  );
-  return /* @__PURE__ */ jsx4(RNPressable, { ...props, style: pressableStyles, disabled, children });
-};
-
-// src/components/atoms/button.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Button = memo4(function Button2({
-  size = "medium",
-  variant = "filled",
-  disabled,
-  children,
-  style,
-  ...props
-}) {
-  const styles2 = useThemedStyles(themedStyles, { size, variant, disabled }, [
-    size,
-    variant,
-    disabled
-  ]);
-  const buttonStyles = useMemo4(
-    () => [styles2.button, style],
-    [styles2.button, style]
-  );
-  const content = useMemo4(() => {
-    if (props.loading) {
-      return /* @__PURE__ */ jsx5(ActivityIndicator, { color: styles2.text.color });
-    }
-    return typeof children === "string" ? /* @__PURE__ */ jsx5(Typography.Master, { style: styles2.text, children }) : children;
-  }, [children, props.loading, styles2.text]);
-  return /* @__PURE__ */ jsx5(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 StyleSheet5.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
-    }
-  });
-}
-
-// src/components/atoms/icon-button.tsx
-import { memo as memo5, useMemo as useMemo5 } from "react";
-import { StyleSheet as StyleSheet6 } from "react-native";
-import { Icon } from "@impulse-ui-native/icon";
-import { useThemedStyles as useThemedStyles2 } from "@impulse-ui-native/theme";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var IconButton = memo5(function IconButton2({
-  size = "medium",
-  variant = "filled",
-  disabled,
-  style,
-  icon,
-  ...props
-}) {
-  const styles2 = useThemedStyles2(themedStyles2, { size, variant, disabled }, [
-    size,
-    variant,
-    disabled
-  ]);
-  const iconButtonStyles = useMemo5(
-    () => [styles2.button, style],
-    [styles2.button, style]
-  );
-  return /* @__PURE__ */ jsx6(Pressable, { style: iconButtonStyles, disabled, ...props, children: /* @__PURE__ */ jsx6(Icon, { size, icon, color: styles2.icon.color }) });
-});
-function themedStyles2(theme, props) {
-  const { size, variant, disabled } = props;
-  const iconButtonTokens = theme.components.iconButton;
-  const sizeTokens = iconButtonTokens.sizes[size];
-  const variantTokens = iconButtonTokens.variants[variant];
-  return StyleSheet6.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
-    }
-  });
-}
-
-// src/components/atoms/tag.tsx
-import { memo as memo6, useMemo as useMemo6 } from "react";
-import { StyleSheet as StyleSheet7, View as View3 } from "react-native";
-import { Icon as Icon2, XCircleIcon } from "@impulse-ui-native/icon";
-import { useThemedStyles as useThemedStyles3 } from "@impulse-ui-native/theme";
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
-var Tag = memo6(function Tag2({
-  label,
-  size = "medium",
-  variant = "filled",
-  color = "primary",
-  closable,
-  disabled,
-  onClose,
-  onPress
-}) {
-  const styles2 = useThemedStyles3(
-    themedStyles3,
-    {
-      size,
-      variant,
-      disabled,
-      color
-    },
-    [size, variant, disabled, color]
-  );
-  const Container = useMemo6(() => {
-    if (onPress) {
-      return Pressable;
-    }
-    return View3;
-  }, [onPress]);
-  const showClose = (closable || size === "medium" || size === "large") && !disabled && onClose;
-  return /* @__PURE__ */ jsxs(Container, { onPress, disabled, style: styles2.container, children: [
-    /* @__PURE__ */ jsx7(Typography.Caption, { style: styles2.label, children: label }),
-    showClose ? /* @__PURE__ */ jsx7(Pressable, { onPress: onClose, hitSlop: 10, children: /* @__PURE__ */ jsx7(
-      Icon2,
-      {
-        icon: XCircleIcon,
-        size: "small",
-        color: styles2.icon.color,
-        style: styles2.icon
-      }
-    ) }) : null
-  ] });
-});
-function themedStyles3(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 StyleSheet7.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
-    }
-  });
-}
-
-// src/components/controls/addon.tsx
-import { memo as memo8, useMemo as useMemo7 } from "react";
-import { StyleSheet as StyleSheet8 } from "react-native";
-import { Icon as Icon3 } from "@impulse-ui-native/icon";
-import {
-  useComponentsTokens,
-  useThemedStyles as useThemedStyles4
-} from "@impulse-ui-native/theme";
-
-// src/components/controls/provider.tsx
-import { createContext, memo as memo7, useContext } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ControlContext = createContext(void 0);
-var ControlProvider = memo7(function ControlProvider2(props) {
-  const { children, ...context } = props;
-  return /* @__PURE__ */ jsx8(ControlContext.Provider, { value: context, children });
-});
-function useControlContext() {
-  const context = useContext(ControlContext);
-  if (!context) {
-    throw new Error("useControlContext must be used within ControlProvider");
-  }
-  return context;
-}
-
-// src/components/controls/addon.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var ControlAddon = memo8(function ControlAddon2(props) {
-  const { icon: AddonIcon, onPress, Content, style, ...rest } = props;
-  const { disabled, error } = useControlContext();
-  const tokens = useComponentsTokens();
-  const styles2 = useThemedStyles4(
-    themedStyles4,
-    {
-      disabled,
-      error
-    },
-    [disabled, error]
-  );
-  const Container = useMemo7(() => {
-    if (onPress) {
-      return Pressable;
-    }
-    return View;
-  }, [onPress]);
-  const children = useMemo7(() => {
-    if (Content) {
-      return /* @__PURE__ */ jsx9(Content, {});
-    }
-    if (AddonIcon) {
-      return /* @__PURE__ */ jsx9(Icon3, { color: styles2.icon.color, icon: AddonIcon });
-    }
-    return null;
-  }, [AddonIcon, Content, styles2.icon.color]);
-  const containerStyle = useMemo7(
-    () => [styles2.container, style],
-    [styles2.container, style]
-  );
-  if (!children) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx9(
-    Container,
-    {
-      ...rest,
-      style: containerStyle,
-      hitSlop: tokens.controlAddon.hitSlop,
-      onPress,
-      disabled,
-      children
-    }
-  );
-});
-function themedStyles4(theme, props) {
-  const { disabled, error } = props;
-  const controlAddonTokens = theme.components.controlAddon;
-  return StyleSheet8.create({
-    container: {
-      marginHorizontal: controlAddonTokens.marginHorizontal
-    },
-    icon: {
-      color: disabled ? controlAddonTokens.disabledIconColor : error ? controlAddonTokens.errorIconColor : controlAddonTokens.iconColor
-    }
-  });
-}
-
-// src/components/controls/container.tsx
-import { memo as memo9, useMemo as useMemo8 } from "react";
-import { StyleSheet as StyleSheet9 } from "react-native";
-import {
-  useThemedStyles as useThemedStyles5
-} from "@impulse-ui-native/theme";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var ControlContainer = memo9(function ControlContainer2(props) {
-  const { style, ...rest } = props;
-  const { size, variant, disabled, error } = useControlContext();
-  const styles2 = useThemedStyles5(
-    themedStyles5,
-    {
-      size,
-      variant,
-      disabled,
-      error
-    },
-    [size, variant, disabled, error]
-  );
-  const containerStyle = useMemo8(
-    () => [styles2.inputContainer, style],
-    [styles2.inputContainer, style]
-  );
-  return /* @__PURE__ */ jsx10(View, { style: containerStyle, ...rest });
-});
-function themedStyles5(theme, {
-  size,
-  variant,
-  disabled,
-  error
-}) {
-  const controlContainerTokens = theme.components.controlContainer;
-  const sizeTokens = controlContainerTokens.sizes[size];
-  const variantTokens = controlContainerTokens.variants[variant];
-  return StyleSheet9.create({
-    inputContainer: {
-      flexDirection: "row",
-      alignItems: "center",
-      height: sizeTokens.height,
-      paddingHorizontal: sizeTokens.paddingHorizontal,
-      borderRadius: controlContainerTokens.borderRadius,
-      borderWidth: controlContainerTokens.borderWidth,
-      opacity: disabled ? controlContainerTokens.disabledOpacity : 1,
-      backgroundColor: disabled ? variantTokens.disabledBackgroundColor : variantTokens.backgroundColor,
-      borderColor: error ? variantTokens.errorBorderColor : disabled ? variantTokens.disabledBorderColor : variantTokens.borderColor,
-      borderBottomColor: error ? variantTokens.errorBorderBottomColor : disabled ? variantTokens.disabledBorderBottomColor : variantTokens.borderBottomColor
-    }
-  });
-}
-
-// src/components/controls/error.tsx
-import { memo as memo10, useMemo as useMemo9 } from "react";
-import { StyleSheet as StyleSheet10 } from "react-native";
-import { useThemedStyles as useThemedStyles6 } from "@impulse-ui-native/theme";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ControlError = memo10(function ControlError2(props) {
-  const { style, ...rest } = props;
-  const { error } = useControlContext();
-  const styles2 = useThemedStyles6(themedStyles6);
-  const errorStyle = useMemo9(
-    () => [styles2.error, style],
-    [styles2.error, style]
-  );
-  if (!Boolean(error)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx11(Typography.Caption, { ...rest, style: errorStyle, children: error });
-});
-function themedStyles6(theme) {
-  const controlErrorTokens = theme.components.controlError;
-  return StyleSheet10.create({
-    error: {
-      marginTop: controlErrorTokens.marginTop,
-      color: controlErrorTokens.color,
-      fontSize: controlErrorTokens.fontSize
-    }
-  });
-}
-
-// src/components/controls/input.tsx
-import { memo as memo11, useMemo as useMemo10 } from "react";
-import { StyleSheet as StyleSheet11, TextInput } from "react-native";
-import {
-  useThemedStyles as useThemedStyles7
-} from "@impulse-ui-native/theme";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var ControlInput = memo11(function ControlInput2(props) {
-  const { onPress, style, ...rest } = props;
-  const { size, variant, disabled, error } = useControlContext();
-  const styles2 = useThemedStyles7(
-    themedStyles7,
-    {
-      size,
-      variant,
-      disabled,
-      error
-    },
-    [size, variant, disabled, error]
-  );
-  const inputStyles = useMemo10(
-    () => [styles2.input, style],
-    [styles2.input, style]
-  );
-  return /* @__PURE__ */ jsx12(
-    TextInput,
-    {
-      ...rest,
-      style: inputStyles,
-      placeholderTextColor: styles2.placeholder.color,
-      editable: !disabled
-    }
-  );
-});
-function themedStyles7(theme, {
-  size,
-  variant,
-  disabled,
-  error
-}) {
-  const controlInputTokens = theme.components.controlInput;
-  const sizeTokens = controlInputTokens.sizes[size];
-  const variantTokens = controlInputTokens.variants[variant];
-  const color = disabled ? variantTokens.disabledColor : error ? variantTokens.errorColor : variantTokens.color;
-  const placeholderColor = disabled ? variantTokens.disabledPlaceholderColor : error ? variantTokens.errorPlaceholderColor : variantTokens.placeholderColor;
-  return StyleSheet11.create({
-    input: {
-      flex: controlInputTokens.flex,
-      color,
-      fontSize: sizeTokens.fontSize,
-      fontFamily: controlInputTokens.fontFamily,
-      paddingHorizontal: controlInputTokens.paddingHorizontal,
-      height: "100%"
-    },
-    placeholder: {
-      color: placeholderColor
-    }
-  });
-}
-
-// src/components/controls/label.tsx
-import { memo as memo12, useMemo as useMemo11 } from "react";
-import { StyleSheet as StyleSheet12 } from "react-native";
-import { useThemedStyles as useThemedStyles8 } from "@impulse-ui-native/theme";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var ControlLabel = memo12(function ControlLabel2(props) {
-  const { children, disabled, style, ...rest } = props;
-  const { error } = useControlContext();
-  const styles2 = useThemedStyles8(
-    themedStyles8,
-    {
-      disabled,
-      error
-    },
-    [disabled, error]
-  );
-  const labelStyle = useMemo11(
-    () => [styles2.label, style],
-    [styles2.label, style]
-  );
-  if (!children) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx13(Typography.Label, { ...rest, style: labelStyle, children });
-});
-function themedStyles8(theme, props) {
-  const { disabled, error } = props;
-  const controlLabelTokens = theme.components.controlLabel;
-  const color = disabled ? controlLabelTokens.disabledColor : error ? controlLabelTokens.errorColor : controlLabelTokens.color;
-  return StyleSheet12.create({
-    label: {
-      marginBottom: controlLabelTokens.marginBottom,
-      fontSize: controlLabelTokens.fontSize,
-      color
-    }
-  });
-}
-
-// src/components/controls/loader.tsx
-import { memo as memo13 } from "react";
-import { ActivityIndicator as ActivityIndicator2 } from "react-native";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var ControlLoader = memo13(function ControlLoader2() {
-  return /* @__PURE__ */ jsx14(ActivityIndicator2, {});
-});
-
-// src/components/controls/placeholder.tsx
-import { memo as memo14, useMemo as useMemo12 } from "react";
-import { StyleSheet as StyleSheet13 } from "react-native";
-import {
-  useThemedStyles as useThemedStyles9
-} from "@impulse-ui-native/theme";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var ControlPlaceholder = memo14(function ControlPlaceholder2(props) {
-  const { style, ...rest } = props;
-  const { size, variant, disabled, error } = useControlContext();
-  const styles2 = useThemedStyles9(
-    themedStyles9,
-    {
-      size,
-      variant,
-      disabled,
-      error
-    },
-    [size, variant, disabled, error]
-  );
-  const placeholderStyle = useMemo12(
-    () => [styles2.placeholder, style],
-    [styles2.placeholder, style]
-  );
-  return /* @__PURE__ */ jsx15(Typography.Master, { numberOfLines: 1, ...rest, style: placeholderStyle });
-});
-function themedStyles9(theme, {
-  size,
-  variant,
-  disabled,
-  error
-}) {
-  const controlInputTokens = theme.components.controlInput;
-  const sizeTokens = controlInputTokens.sizes[size];
-  const variantTokens = controlInputTokens.variants[variant];
-  const color = disabled ? variantTokens.disabledPlaceholderColor : error ? variantTokens.errorPlaceholderColor : variantTokens.placeholderColor;
-  return StyleSheet13.create({
-    placeholder: {
-      flex: controlInputTokens.flex,
-      color,
-      fontFamily: controlInputTokens.fontFamily,
-      fontSize: sizeTokens.fontSize,
-      paddingHorizontal: controlInputTokens.paddingHorizontal
-    }
-  });
-}
-
-// src/components/controls/root.tsx
-import { memo as memo15, useMemo as useMemo13 } from "react";
-import { StyleSheet as StyleSheet14 } from "react-native";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var ControlRoot = memo15(function ControlRoot2(props) {
-  const { style, ...rest } = props;
-  const containerStyle = useMemo13(() => [styles.container, style], [style]);
-  return /* @__PURE__ */ jsx16(View, { ...rest, style: containerStyle });
-});
-var styles = StyleSheet14.create({
-  container: {
-    width: "100%"
-  }
-});
-
-// src/components/controls/value.tsx
-import { memo as memo16, useMemo as useMemo14 } from "react";
-import { StyleSheet as StyleSheet15 } from "react-native";
-import {
-  useThemedStyles as useThemedStyles10
-} from "@impulse-ui-native/theme";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var ControlValue = memo16(function ControlValue2(props) {
-  const { style, ...rest } = props;
-  const { size } = useControlContext();
-  const styles2 = useThemedStyles10(themedStyles10, { size }, [size]);
-  const valueStyle = useMemo14(
-    () => [styles2.value, style],
-    [styles2.value, style]
-  );
-  return /* @__PURE__ */ jsx17(Typography.Master, { numberOfLines: 1, ...rest, style: valueStyle });
-});
-function themedStyles10(theme, {
-  size
-}) {
-  const controlInputTokens = theme.components.controlInput;
-  const sizeTokens = controlInputTokens.sizes[size];
-  return StyleSheet15.create({
-    value: {
-      flex: controlInputTokens.flex,
-      fontFamily: controlInputTokens.fontFamily,
-      fontSize: sizeTokens.fontSize,
-      paddingHorizontal: controlInputTokens.paddingHorizontal
-    }
-  });
-}
-
-// src/components/controls/control.tsx
-var Control = {
-  Container: ControlContainer,
-  Provider: ControlProvider,
-  Root: ControlRoot,
-  Label: ControlLabel,
-  Error: ControlError,
-  Addon: ControlAddon,
-  Input: ControlInput,
-  Placeholder: ControlPlaceholder,
-  Value: ControlValue,
-  Loader: ControlLoader
-};
-export {
-  Button,
-  Control,
-  ControlContainerHeight,
-  ControlFontSize,
-  EdgeToShorthandKeyMap,
-  EdgeToSpacingKeyMap,
-  IconButton,
-  Pressable,
-  SafeAreaView,
-  Tag,
-  Typography,
-  View,
-  createPreset,
-  useControlContext
-};
+export * from "./components";
+export * from "./hocs";
+export * from "./constants";
+export * from "./types";
 //# sourceMappingURL=index.js.map