@impulse-ui-native/primitives 7.0.0 → 8.0.0

package/README.md

@@ -93,6 +93,29 @@ 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.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
+chooses the text and whether to render the slot. `Input`, `Select`, date/time
+pickers, `Textarea`, and `FormField` assemble these children explicitly.
+
+For direct composition, migrate `icon` and `Content` props to addon children and
+supply error text instead of relying on `Control.Provider.error` to render it:
+
+```tsx
+<>
+  <Control.Addon onPress={onPressPrefix}>
+    <Icon icon={PrefixIcon} color={addonColor} />
+  </Control.Addon>
+  {error ? <Control.Error>{error}</Control.Error> : null}
+</>
+```
+
+Resolve `addonColor` from
+`getFieldStateTokens(theme.components.controlAddon.variants[variant], { disabled, error: Boolean(error) }).iconColor`
+using the current theme. The provider's error value continues to drive field
+appearance, but does not inject label content.
+
 `Button` and `IconButton` replace their content with a loading indicator when `loading` is true. Loading controls block interaction until loading ends.
 
 `Spinner` defaults to the primary theme tone and medium size. Use `tone="inverse"` on inverse surfaces, or provide `color` when the indicator must match contextual content.

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

@@ -6,6 +6,6 @@ import 'react-native';
 import '@impulse-ui-native/theme';
 import '../../../types/control-components.types.mjs';
 import '@impulse-ui-native/icon/types';
-import '../../../types/spinner.types.mjs';
 import '../../../types/button.types.mjs';
+import '../../../types/spinner.types.mjs';
 import '../../../types/view.types.mjs';

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

@@ -5,8 +5,8 @@ import 'react-native';
 import '@impulse-ui-native/theme';
 import '../../../types/control-components.types.mjs';
 import '@impulse-ui-native/icon/types';
-import '../../../types/spinner.types.mjs';
 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>;

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

@@ -18,8 +18,8 @@ import '../../types/view.types.mjs';
 import '../../types/badge.types.mjs';
 import '../../types/control-components.types.mjs';
 import '@impulse-ui-native/icon/types';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 import '../../types/safe-area-view.types.mjs';
 import 'react-native-safe-area-context';
 import '../../types/typography.types.mjs';

package/dist/components/controls/addon.d.mts

@@ -4,9 +4,9 @@ import { ControlAddonProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
-declare const ControlAddon: react.MemoExoticComponent<(props: ControlAddonProps) => react_jsx_runtime.JSX.Element | null>;
+declare const ControlAddon: react.MemoExoticComponent<({ children, disabled, hitSlop, onPress, style, ...props }: ControlAddonProps) => react_jsx_runtime.JSX.Element>;
 
 export { ControlAddon };

package/dist/components/controls/addon.js

@@ -1,74 +1,42 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { Icon } from "@impulse-ui-native/icon";
-import {
-  getFieldStateTokens,
-  useComponentsTokens,
-  useThemedStyles
-} from "@impulse-ui-native/theme";
+import { useComponentsTokens, useThemedStyles } from "@impulse-ui-native/theme";
+import { useControlContext } from "../../hooks/use-control-context.hook";
 import { Pressable, View } from "../atoms";
-import { useControlContext } from "./provider";
-const ControlAddon = memo(function ControlAddon2(props) {
-  const { icon: AddonIcon, onPress, Content, style, ...rest } = props;
-  const { variant, disabled, error } = useControlContext();
-  const tokens = useComponentsTokens();
-  const styles = useThemedStyles(
-    themedStyles,
-    {
-      variant,
-      disabled,
-      error
-    },
-    [variant, disabled, error]
-  );
-  const Container = useMemo(() => {
-    if (onPress) {
-      return Pressable;
-    }
-    return View;
-  }, [onPress]);
-  const children = useMemo(() => {
-    if (Content) {
-      return /* @__PURE__ */ jsx(Content, {});
-    }
-    if (AddonIcon) {
-      return /* @__PURE__ */ jsx(Icon, { color: styles.icon.color, icon: AddonIcon });
-    }
-    return null;
-  }, [AddonIcon, Content, styles.icon.color]);
+const ControlAddon = memo(function ControlAddon2({
+  children,
+  disabled = false,
+  hitSlop,
+  onPress,
+  style,
+  ...props
+}) {
+  const { disabled: groupDisabled } = useControlContext();
+  const tokens = useComponentsTokens().controlAddon;
+  const styles = useThemedStyles(themedStyles);
+  const resolvedDisabled = Boolean(groupDisabled) || disabled;
+  const Container = onPress ? Pressable : View;
   const containerStyle = useMemo(
     () => [styles.container, style],
     [styles.container, style]
   );
-  if (!children) {
-    return null;
-  }
   return /* @__PURE__ */ jsx(
     Container,
     {
-      ...rest,
-      style: containerStyle,
-      hitSlop: tokens.controlAddon.hitSlop,
+      ...props,
+      disabled: resolvedDisabled,
+      hitSlop: hitSlop ?? tokens.hitSlop,
       onPress,
-      disabled,
+      style: containerStyle,
       children
     }
   );
 });
-function themedStyles(theme, props) {
-  const { variant, disabled, error } = props;
-  const controlAddonTokens = theme.components.controlAddon;
-  const appearanceTokens = getFieldStateTokens(
-    controlAddonTokens.variants[variant],
-    { disabled, error: Boolean(error) }
-  );
+function themedStyles(theme) {
   return StyleSheet.create({
     container: {
-      marginHorizontal: controlAddonTokens.marginHorizontal
-    },
-    icon: {
-      color: appearanceTokens.iconColor
+      marginHorizontal: theme.components.controlAddon.marginHorizontal
     }
   });
 }

package/dist/components/controls/addon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/addon.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport {\n  AppTheme,\n  FieldVariant,\n  getFieldStateTokens,\n  useComponentsTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlAddonProps } from \"../../types\";\nimport { Pressable, View } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlAddon = memo(function ControlAddon(\n  props: ControlAddonProps,\n) {\n  const { icon: AddonIcon, onPress, Content, style, ...rest } = props;\n\n  const { variant, disabled, error } = useControlContext();\n\n  const tokens = useComponentsTokens();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      variant,\n      disabled,\n      error,\n    },\n    [variant, disabled, error],\n  );\n\n  const Container = useMemo(() => {\n    if (onPress) {\n      return Pressable;\n    }\n\n    return View;\n  }, [onPress]);\n\n  const children = useMemo(() => {\n    if (Content) {\n      return <Content />;\n    }\n\n    if (AddonIcon) {\n      return <Icon color={styles.icon.color} icon={AddonIcon} />;\n    }\n\n    return null;\n  }, [AddonIcon, Content, styles.icon.color]);\n\n  const containerStyle = useMemo(\n    () => [styles.container, style],\n    [styles.container, style],\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <Container\n      {...rest}\n      style={containerStyle}\n      hitSlop={tokens.controlAddon.hitSlop}\n      onPress={onPress}\n      disabled={disabled}\n    >\n      {children}\n    </Container>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  props: {\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const { variant, disabled, error } = props;\n\n  const controlAddonTokens = theme.components.controlAddon;\n  const appearanceTokens = getFieldStateTokens(\n    controlAddonTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    container: {\n      marginHorizontal: controlAddonTokens.marginHorizontal,\n    },\n\n    icon: {\n      color: appearanceTokens.iconColor,\n    },\n  });\n}\n"],"mappings":"AA6Ca;AA7Cb,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,WAAW,YAAY;AAChC,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,MAAM,WAAW,SAAS,SAAS,OAAO,GAAG,KAAK,IAAI;AAE9D,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAEvD,QAAM,SAAS,oBAAoB;AAEnC,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,UAAU,KAAK;AAAA,EAC3B;AAEA,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,SAAS;AACX,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,QAAI,WAAW;AACb,aAAO,oBAAC,QAAK,OAAO,OAAO,KAAK,OAAO,MAAM,WAAW;AAAA,IAC1D;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,SAAS,OAAO,KAAK,KAAK,CAAC;AAE1C,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,KAAK;AAAA,IAC9B,CAAC,OAAO,WAAW,KAAK;AAAA,EAC1B;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS,OAAO,aAAa;AAAA,MAC7B;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aACP,OACA,OAKA;AACA,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI;AAErC,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,kBAAkB,mBAAmB;AAAA,IACvC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlAddon"]}
+{"version":3,"sources":["../../../src/components/controls/addon.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlAddonProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Pressable, View } from \"../atoms\";\n\nexport const ControlAddon = memo(function ControlAddon({\n  children,\n  disabled = false,\n  hitSlop,\n  onPress,\n  style,\n  ...props\n}: ControlAddonProps) {\n  const { disabled: groupDisabled } = useControlContext();\n  const tokens = useComponentsTokens().controlAddon;\n  const styles = useThemedStyles(themedStyles);\n\n  const resolvedDisabled = Boolean(groupDisabled) || disabled;\n  const Container = onPress ? Pressable : View;\n  const containerStyle = useMemo(\n    () => [styles.container, style],\n    [styles.container, style],\n  );\n\n  return (\n    <Container\n      {...props}\n      disabled={resolvedDisabled}\n      hitSlop={hitSlop ?? tokens.hitSlop}\n      onPress={onPress}\n      style={containerStyle}\n    >\n      {children}\n    </Container>\n  );\n});\n\nfunction themedStyles(theme: AppTheme) {\n  return StyleSheet.create({\n    container: {\n      marginHorizontal: theme.components.controlAddon.marginHorizontal,\n    },\n  });\n}\n"],"mappings":"AA8BI;AA9BJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAGrD,SAAS,yBAAyB;AAClC,SAAS,WAAW,YAAY;AAEzB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,EAAE,UAAU,cAAc,IAAI,kBAAkB;AACtD,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,mBAAmB,QAAQ,aAAa,KAAK;AACnD,QAAM,YAAY,UAAU,YAAY;AACxC,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,KAAK;AAAA,IAC9B,CAAC,OAAO,WAAW,KAAK;AAAA,EAC1B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,SAAS,WAAW,OAAO;AAAA,MAC3B;AAAA,MACA,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,kBAAkB,MAAM,WAAW,aAAa;AAAA,IAClD;AAAA,EACF,CAAC;AACH;","names":["ControlAddon"]}

package/dist/components/controls/container.d.mts

@@ -4,8 +4,8 @@ import { ControlContainerProps } from '../../types/control-components.types.mjs'
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
 declare const ControlContainer: react.MemoExoticComponent<(props: ControlContainerProps) => react_jsx_runtime.JSX.Element>;
 

package/dist/components/controls/container.js

@@ -1,12 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import {
-  getFieldStateTokens,
-  useThemedStyles
-} from "@impulse-ui-native/theme";
+import { getFieldStateTokens, useThemedStyles } from "@impulse-ui-native/theme";
+import { useControlContext } from "../../hooks/use-control-context.hook";
 import { View } from "../atoms/view";
-import { useControlContext } from "./provider";
 const ControlContainer = memo(function ControlContainer2(props) {
   const { style, ...rest } = props;
   const { size, variant, disabled, error } = useControlContext();
@@ -26,12 +23,7 @@ const ControlContainer = memo(function ControlContainer2(props) {
   );
   return /* @__PURE__ */ jsx(View, { style: containerStyle, ...rest });
 });
-function themedStyles(theme, {
-  size,
-  variant,
-  disabled,
-  error
-}) {
+function themedStyles(theme, { size, variant, disabled, error }) {
   const controlContainerTokens = theme.components.controlContainer;
   const sizeTokens = controlContainerTokens.sizes[size];
   const appearanceTokens = getFieldStateTokens(

package/dist/components/controls/container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n  AppTheme,\n  ComponentSize,\n  FieldVariant,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlContainerProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlContainer = memo(function ControlContainer(\n  props: ControlContainerProps,\n) {\n  const { style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      error,\n    },\n    [size, variant, disabled, error],\n  );\n\n  const containerStyle = useMemo(\n    () => [styles.inputContainer, style],\n    [styles.inputContainer, style],\n  );\n\n  return <View style={containerStyle} {...rest} />;\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const controlContainerTokens = theme.components.controlContainer;\n  const sizeTokens = controlContainerTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlContainerTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    inputContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n\n      height: sizeTokens.height,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      borderRadius: controlContainerTokens.borderRadius,\n      borderWidth: controlContainerTokens.borderWidth,\n\n      opacity: appearanceTokens.opacity,\n      backgroundColor: appearanceTokens.backgroundColor,\n      borderColor: appearanceTokens.borderColor,\n    },\n  });\n}\n"],"mappings":"AAsCS;AAtCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,KAAK,SAASA,kBAC5C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,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,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAK,OAAO,gBAAiB,GAAG,MAAM;AAChD,CAAC;AAED,SAAS,aACP,OACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,yBAAyB,MAAM,WAAW;AAChD,QAAM,aAAa,uBAAuB,MAAM,IAAI;AACpD,QAAM,mBAAmB;AAAA,IACvB,uBAAuB,SAAS,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MAEZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAE9B,cAAc,uBAAuB;AAAA,MACrC,aAAa,uBAAuB;AAAA,MAEpC,SAAS,iBAAiB;AAAA,MAC1B,iBAAiB,iBAAiB;AAAA,MAClC,aAAa,iBAAiB;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["ControlContainer"]}
+{"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlContainerProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { View } from \"../atoms/view\";\n\nexport const ControlContainer = memo(function ControlContainer(\n  props: ControlContainerProps,\n) {\n  const { style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      error,\n    },\n    [size, variant, disabled, error],\n  );\n\n  const containerStyle = useMemo(\n    () => [styles.inputContainer, style],\n    [styles.inputContainer, style],\n  );\n\n  return <View style={containerStyle} {...rest} />;\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, disabled, error }: ControlFieldThemeProps,\n) {\n  const controlContainerTokens = theme.components.controlContainer;\n  const sizeTokens = controlContainerTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlContainerTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    inputContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n\n      height: sizeTokens.height,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      borderRadius: controlContainerTokens.borderRadius,\n      borderWidth: controlContainerTokens.borderWidth,\n\n      opacity: appearanceTokens.opacity,\n      backgroundColor: appearanceTokens.backgroundColor,\n      borderColor: appearanceTokens.borderColor,\n    },\n  });\n}\n"],"mappings":"AAkCS;AAlCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAEd,MAAM,mBAAmB,KAAK,SAASA,kBAC5C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,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,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAK,OAAO,gBAAiB,GAAG,MAAM;AAChD,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,UAAU,MAAM,GACjC;AACA,QAAM,yBAAyB,MAAM,WAAW;AAChD,QAAM,aAAa,uBAAuB,MAAM,IAAI;AACpD,QAAM,mBAAmB;AAAA,IACvB,uBAAuB,SAAS,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MAEZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAE9B,cAAc,uBAAuB;AAAA,MACrC,aAAa,uBAAuB;AAAA,MAEpC,SAAS,iBAAiB;AAAA,MAC1B,iBAAiB,iBAAiB;AAAA,MAClC,aAAa,iBAAiB;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["ControlContainer"]}

package/dist/components/controls/control.d.mts

@@ -5,16 +5,16 @@ import { ControlContainerProps, ControlContextData, ControlLabelProps, ControlEr
 import 'react-native';
 import '@impulse-ui-native/theme';
 import '@impulse-ui-native/icon/types';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
 declare const Control: {
     Container: react.MemoExoticComponent<(props: ControlContainerProps) => react_jsx_runtime.JSX.Element>;
     Provider: react.MemoExoticComponent<(props: react.PropsWithChildren<ControlContextData>) => react_jsx_runtime.JSX.Element>;
     Root: react.MemoExoticComponent<(props: ViewProps) => react_jsx_runtime.JSX.Element>;
     Label: react.MemoExoticComponent<(props: ControlLabelProps) => react_jsx_runtime.JSX.Element | null>;
-    Error: react.MemoExoticComponent<(props: ControlErrorLabelProps) => react_jsx_runtime.JSX.Element | null>;
-    Addon: react.MemoExoticComponent<(props: ControlAddonProps) => react_jsx_runtime.JSX.Element | null>;
+    Error: react.MemoExoticComponent<(props: ControlErrorLabelProps) => react_jsx_runtime.JSX.Element>;
+    Addon: react.MemoExoticComponent<({ children, disabled, hitSlop, onPress, style, ...props }: ControlAddonProps) => react_jsx_runtime.JSX.Element>;
     Input: react.MemoExoticComponent<(props: ControlInputProps) => react_jsx_runtime.JSX.Element>;
     Placeholder: react.MemoExoticComponent<(props: ControlPlaceholderProps) => react_jsx_runtime.JSX.Element>;
     Value: react.MemoExoticComponent<(props: ControlValueProps) => react_jsx_runtime.JSX.Element>;

package/dist/components/controls/error.d.mts

@@ -4,9 +4,9 @@ import { ControlErrorLabelProps } from '../../types/control-components.types.mjs
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
-declare const ControlError: react.MemoExoticComponent<(props: ControlErrorLabelProps) => react_jsx_runtime.JSX.Element | null>;
+declare const ControlError: react.MemoExoticComponent<(props: ControlErrorLabelProps) => react_jsx_runtime.JSX.Element>;
 
 export { ControlError };

package/dist/components/controls/error.js

@@ -3,19 +3,14 @@ import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { useThemedStyles } from "@impulse-ui-native/theme";
 import { Typography } from "../atoms";
-import { useControlContext } from "./provider";
 const ControlError = memo(function ControlError2(props) {
-  const { style, ...rest } = props;
-  const { error } = useControlContext();
+  const { children, style, ...rest } = props;
   const styles = useThemedStyles(themedStyles);
   const errorStyle = useMemo(
     () => [styles.error, style],
     [styles.error, style]
   );
-  if (!Boolean(error)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Typography.Caption, { ...rest, style: errorStyle, children: error });
+  return /* @__PURE__ */ jsx(Typography.Caption, { ...rest, style: errorStyle, children });
 });
 function themedStyles(theme) {
   const controlErrorTokens = theme.components.controlError;

package/dist/components/controls/error.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/error.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { ControlErrorLabelProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlError = memo(function ControlError(\n  props: ControlErrorLabelProps,\n) {\n  const { style, ...rest } = props;\n\n  const { error } = useControlContext();\n\n  const styles = useThemedStyles(themedStyles);\n\n  const errorStyle = useMemo(\n    () => [styles.error, style],\n    [styles.error, style],\n  );\n\n  if (!Boolean(error)) {\n    return null;\n  }\n\n  return (\n    <Typography.Caption {...rest} style={errorStyle}>\n      {error}\n    </Typography.Caption>\n  );\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const controlErrorTokens = theme.components.controlError;\n\n  return StyleSheet.create({\n    error: {\n      marginTop: controlErrorTokens.marginTop,\n      color: controlErrorTokens.color,\n      fontSize: controlErrorTokens.fontSize,\n    },\n  });\n}\n"],"mappings":"AA4BI;AA5BJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAmB,uBAAuB;AAG1C,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,IAAI,kBAAkB;AAEpC,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,MAAI,CAAC,QAAQ,KAAK,GAAG;AACnB,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,WAAW,SAAX,EAAoB,GAAG,MAAM,OAAO,YAClC,iBACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,qBAAqB,MAAM,WAAW;AAE5C,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,WAAW,mBAAmB;AAAA,MAC9B,OAAO,mBAAmB;AAAA,MAC1B,UAAU,mBAAmB;AAAA,IAC/B;AAAA,EACF,CAAC;AACH;","names":["ControlError"]}
+{"version":3,"sources":["../../../src/components/controls/error.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlErrorLabelProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlError = memo(function ControlError(\n  props: ControlErrorLabelProps,\n) {\n  const { children, style, ...rest } = props;\n\n  const styles = useThemedStyles(themedStyles);\n\n  const errorStyle = useMemo(\n    () => [styles.error, style],\n    [styles.error, style],\n  );\n\n  return (\n    <Typography.Caption {...rest} style={errorStyle}>\n      {children}\n    </Typography.Caption>\n  );\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const controlErrorTokens = theme.components.controlError;\n\n  return StyleSheet.create({\n    error: {\n      marginTop: controlErrorTokens.marginTop,\n      color: controlErrorTokens.color,\n      fontSize: controlErrorTokens.fontSize,\n    },\n  });\n}\n"],"mappings":"AAsBI;AAtBJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,uBAAuB;AAGhC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,UAAU,OAAO,GAAG,KAAK,IAAI;AAErC,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SACE,oBAAC,WAAW,SAAX,EAAoB,GAAG,MAAM,OAAO,YAClC,UACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,qBAAqB,MAAM,WAAW;AAE5C,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,WAAW,mBAAmB;AAAA,MAC9B,OAAO,mBAAmB;AAAA,MAC1B,UAAU,mBAAmB;AAAA,IAC/B;AAAA,EACF,CAAC;AACH;","names":["ControlError"]}

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

@@ -1,5 +1,5 @@
 export { Control } from './control.mjs';
-export { useControlContext } from './provider.mjs';
+export { useControlContext } from '../../hooks/use-control-context.hook.mjs';
 import 'react';
 import 'react/jsx-runtime';
 import '../../types/view.types.mjs';
@@ -7,5 +7,5 @@ import 'react-native';
 import '@impulse-ui-native/theme';
 import '../../types/control-components.types.mjs';
 import '@impulse-ui-native/icon/types';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';

package/dist/components/controls/index.js

@@ -1,5 +1,5 @@
 import { Control } from "./control";
-import { useControlContext } from "./provider";
+import { useControlContext } from "../../hooks/use-control-context.hook";
 export {
   Control,
   useControlContext

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/index.ts"],"sourcesContent":["export { Control } from \"./control\";\nexport { useControlContext } from \"./provider\";\n"],"mappings":"AAAA,SAAS,eAAe;AACxB,SAAS,yBAAyB;","names":[]}
+{"version":3,"sources":["../../../src/components/controls/index.ts"],"sourcesContent":["export { Control } from \"./control\";\nexport { useControlContext } from \"../../hooks/use-control-context.hook\";\n"],"mappings":"AAAA,SAAS,eAAe;AACxB,SAAS,yBAAyB;","names":[]}

package/dist/components/controls/input.d.mts

@@ -4,8 +4,8 @@ import { ControlInputProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
 declare const ControlInput: react.MemoExoticComponent<(props: ControlInputProps) => react_jsx_runtime.JSX.Element>;
 

package/dist/components/controls/input.js

@@ -1,13 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet, TextInput } from "react-native";
-import {
-  getFieldStateTokens,
-  useThemedStyles
-} from "@impulse-ui-native/theme";
-import { useControlContext } from "./provider";
+import { getFieldStateTokens, useThemedStyles } from "@impulse-ui-native/theme";
+import { useControlContext } from "../../hooks/use-control-context.hook";
 const ControlInput = memo(function ControlInput2(props) {
-  const { onPress, style, ...rest } = props;
+  const { onPress: _onPress, style, ...rest } = props;
   const { size, variant, disabled, error } = useControlContext();
   const styles = useThemedStyles(
     themedStyles,
@@ -33,12 +30,7 @@ const ControlInput = memo(function ControlInput2(props) {
     }
   );
 });
-function themedStyles(theme, {
-  size,
-  variant,
-  disabled,
-  error
-}) {
+function themedStyles(theme, { size, variant, disabled, error }) {
   const controlInputTokens = theme.components.controlInput;
   const sizeTokens = controlInputTokens.sizes[size];
   const appearanceTokens = getFieldStateTokens(

package/dist/components/controls/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/input.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, TextInput } from \"react-native\";\n\nimport {\n  AppTheme,\n  ComponentSize,\n  FieldVariant,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlInputProps } from \"../../types\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlInput = memo(function ControlInput(\n  props: ControlInputProps,\n) {\n  const { onPress, style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      error,\n    },\n    [size, variant, disabled, error],\n  );\n\n  const inputStyles = useMemo(\n    () => [styles.input, style],\n    [styles.input, style],\n  );\n\n  return (\n    <TextInput\n      {...rest}\n      style={inputStyles}\n      placeholderTextColor={styles.placeholder.color}\n      editable={!disabled}\n    />\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    input: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.color,\n      fontSize: sizeTokens.fontSize,\n      fontFamily: controlInputTokens.fontFamily,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n      height: \"100%\",\n    },\n\n    placeholder: {\n      color: appearanceTokens.placeholderColor,\n    },\n  });\n}\n"],"mappings":"AAsCI;AAtCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,iBAAiB;AAEtC;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,SAAS,OAAO,GAAG,KAAK,IAAI;AAEpC,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,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,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,sBAAsB,OAAO,YAAY;AAAA,MACzC,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ,CAAC;AAED,SAAS,aACP,OACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,mBAAmB;AAAA,MAC/B,mBAAmB,mBAAmB;AAAA,MACtC,QAAQ;AAAA,IACV;AAAA,IAEA,aAAa;AAAA,MACX,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlInput"]}
+{"version":3,"sources":["../../../src/components/controls/input.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, TextInput } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlInputProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\n\nexport const ControlInput = memo(function ControlInput(\n  props: ControlInputProps,\n) {\n  const { onPress: _onPress, style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      error,\n    },\n    [size, variant, disabled, error],\n  );\n\n  const inputStyles = useMemo(\n    () => [styles.input, style],\n    [styles.input, style],\n  );\n\n  return (\n    <TextInput\n      {...rest}\n      style={inputStyles}\n      placeholderTextColor={styles.placeholder.color}\n      editable={!disabled}\n    />\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, disabled, error }: ControlFieldThemeProps,\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    input: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.color,\n      fontSize: sizeTokens.fontSize,\n      fontFamily: controlInputTokens.fontFamily,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n      height: \"100%\",\n    },\n\n    placeholder: {\n      color: appearanceTokens.placeholderColor,\n    },\n  });\n}\n"],"mappings":"AAkCI;AAlCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,iBAAiB;AAGtC,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,SAAS,UAAU,OAAO,GAAG,KAAK,IAAI;AAE9C,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,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,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,sBAAsB,OAAO,YAAY;AAAA,MACzC,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,UAAU,MAAM,GACjC;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,mBAAmB;AAAA,MAC/B,mBAAmB,mBAAmB;AAAA,MACtC,QAAQ;AAAA,IACV;AAAA,IAEA,aAAa;AAAA,MACX,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlInput"]}

package/dist/components/controls/label.d.mts

@@ -4,8 +4,8 @@ import { ControlLabelProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
 declare const ControlLabel: react.MemoExoticComponent<(props: ControlLabelProps) => react_jsx_runtime.JSX.Element | null>;
 

package/dist/components/controls/label.js

@@ -1,12 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import {
-  getFieldStateTokens,
-  useThemedStyles
-} from "@impulse-ui-native/theme";
+import { getFieldStateTokens, useThemedStyles } from "@impulse-ui-native/theme";
+import { useControlContext } from "../../hooks/use-control-context.hook";
 import { Typography } from "../atoms";
-import { useControlContext } from "./provider";
 const ControlLabel = memo(function ControlLabel2(props) {
   const { children, disabled, style, ...rest } = props;
   const { error } = useControlContext();

package/dist/components/controls/label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/label.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n  AppTheme,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlLabelProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlLabel = memo(function ControlLabel(\n  props: ControlLabelProps,\n) {\n  const { children, disabled, style, ...rest } = props;\n\n  const { error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      disabled,\n      error,\n    },\n    [disabled, error],\n  );\n\n  const labelStyle = useMemo(\n    () => [styles.label, style],\n    [styles.label, style],\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <Typography.Label {...rest} style={labelStyle}>\n      {children}\n    </Typography.Label>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  props: {\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const { disabled, error } = props;\n\n  const controlLabelTokens = theme.components.controlLabel;\n  const appearanceTokens = getFieldStateTokens(controlLabelTokens.states, {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return StyleSheet.create({\n    label: {\n      marginBottom: controlLabelTokens.marginBottom,\n      fontSize: controlLabelTokens.fontSize,\n      color: appearanceTokens.color,\n    },\n  });\n}\n"],"mappings":"AAuCI;AAvCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,UAAU,UAAU,OAAO,GAAG,KAAK,IAAI;AAE/C,QAAM,EAAE,MAAM,IAAI,kBAAkB;AAEpC,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,WAAW,OAAX,EAAkB,GAAG,MAAM,OAAO,YAChC,UACH;AAEJ,CAAC;AAED,SAAS,aACP,OACA,OAIA;AACA,QAAM,EAAE,UAAU,MAAM,IAAI;AAE5B,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,mBAAmB,oBAAoB,mBAAmB,QAAQ;AAAA,IACtE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,cAAc,mBAAmB;AAAA,MACjC,UAAU,mBAAmB;AAAA,MAC7B,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlLabel"]}
+{"version":3,"sources":["../../../src/components/controls/label.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlLabelProps } from \"../../types\";\nimport type { ControlStateThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlLabel = memo(function ControlLabel(\n  props: ControlLabelProps,\n) {\n  const { children, disabled, style, ...rest } = props;\n\n  const { error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      disabled,\n      error,\n    },\n    [disabled, error],\n  );\n\n  const labelStyle = useMemo(\n    () => [styles.label, style],\n    [styles.label, style],\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <Typography.Label {...rest} style={labelStyle}>\n      {children}\n    </Typography.Label>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: ControlStateThemeProps) {\n  const { disabled, error } = props;\n\n  const controlLabelTokens = theme.components.controlLabel;\n  const appearanceTokens = getFieldStateTokens(controlLabelTokens.states, {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return StyleSheet.create({\n    label: {\n      marginBottom: controlLabelTokens.marginBottom,\n      fontSize: controlLabelTokens.fontSize,\n      color: appearanceTokens.color,\n    },\n  });\n}\n"],"mappings":"AAqCI;AArCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,UAAU,UAAU,OAAO,GAAG,KAAK,IAAI;AAE/C,QAAM,EAAE,MAAM,IAAI,kBAAkB;AAEpC,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,WAAW,OAAX,EAAkB,GAAG,MAAM,OAAO,YAChC,UACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA+B;AACpE,QAAM,EAAE,UAAU,MAAM,IAAI;AAE5B,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,mBAAmB,oBAAoB,mBAAmB,QAAQ;AAAA,IACtE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,cAAc,mBAAmB;AAAA,MACjC,UAAU,mBAAmB;AAAA,MAC7B,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlLabel"]}

package/dist/components/controls/loader.d.mts

@@ -4,8 +4,8 @@ import { ControlLoaderProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
 declare const ControlLoader: react.MemoExoticComponent<(props: ControlLoaderProps) => react_jsx_runtime.JSX.Element>;
 

package/dist/components/controls/placeholder.d.mts

@@ -4,8 +4,8 @@ import { ControlPlaceholderProps } from '../../types/control-components.types.mj
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
 declare const ControlPlaceholder: react.MemoExoticComponent<(props: ControlPlaceholderProps) => react_jsx_runtime.JSX.Element>;
 

package/dist/components/controls/placeholder.js

@@ -1,12 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import {
-  getFieldStateTokens,
-  useThemedStyles
-} from "@impulse-ui-native/theme";
+import { getFieldStateTokens, useThemedStyles } from "@impulse-ui-native/theme";
+import { useControlContext } from "../../hooks/use-control-context.hook";
 import { Typography } from "../atoms";
-import { useControlContext } from "./provider";
 const ControlPlaceholder = memo(function ControlPlaceholder2(props) {
   const { style, ...rest } = props;
   const { size, variant, disabled, error } = useControlContext();
@@ -26,12 +23,7 @@ const ControlPlaceholder = memo(function ControlPlaceholder2(props) {
   );
   return /* @__PURE__ */ jsx(Typography.Master, { numberOfLines: 1, ...rest, style: placeholderStyle });
 });
-function themedStyles(theme, {
-  size,
-  variant,
-  disabled,
-  error
-}) {
+function themedStyles(theme, { size, variant, disabled, error }) {
   const controlInputTokens = theme.components.controlInput;
   const sizeTokens = controlInputTokens.sizes[size];
   const appearanceTokens = getFieldStateTokens(

package/dist/components/controls/placeholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/placeholder.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n  AppTheme,\n  ComponentSize,\n  FieldVariant,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlPlaceholderProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlPlaceholder = memo(function ControlPlaceholder(\n  props: ControlPlaceholderProps,\n) {\n  const { style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      error,\n    },\n    [size, variant, disabled, error],\n  );\n\n  const placeholderStyle = useMemo(\n    () => [styles.placeholder, style],\n    [styles.placeholder, style],\n  );\n\n  return (\n    <Typography.Master numberOfLines={1} {...rest} style={placeholderStyle} />\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    placeholder: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.placeholderColor,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AAuCI;AAvCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,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,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,aAAa,KAAK;AAAA,IAChC,CAAC,OAAO,aAAa,KAAK;AAAA,EAC5B;AAEA,SACE,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,kBAAkB;AAE5E,CAAC;AAED,SAAS,aACP,OACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,aAAa;AAAA,MACX,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlPlaceholder"]}
+{"version":3,"sources":["../../../src/components/controls/placeholder.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlPlaceholderProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlPlaceholder = memo(function ControlPlaceholder(\n  props: ControlPlaceholderProps,\n) {\n  const { style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      error,\n    },\n    [size, variant, disabled, error],\n  );\n\n  const placeholderStyle = useMemo(\n    () => [styles.placeholder, style],\n    [styles.placeholder, style],\n  );\n\n  return (\n    <Typography.Master numberOfLines={1} {...rest} style={placeholderStyle} />\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, disabled, error }: ControlFieldThemeProps,\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    placeholder: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.placeholderColor,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AAmCI;AAnCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,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,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,aAAa,KAAK;AAAA,IAChC,CAAC,OAAO,aAAa,KAAK;AAAA,EAC5B;AAEA,SACE,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,kBAAkB;AAE5E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,UAAU,MAAM,GACjC;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,aAAa;AAAA,MACX,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlPlaceholder"]}

package/dist/components/controls/provider.d.mts

@@ -5,10 +5,9 @@ import { ControlContextData } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
 declare const ControlProvider: react.MemoExoticComponent<(props: PropsWithChildren<ControlContextData>) => react_jsx_runtime.JSX.Element>;
-declare function useControlContext(): ControlContextData;
 
-export { ControlProvider, useControlContext };
+export { ControlProvider };

package/dist/components/controls/provider.js

@@ -1,19 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, memo, useContext } from "react";
-const ControlContext = createContext(void 0);
+import { memo, useMemo } from "react";
+import { ControlContext } from "../../contexts/control.context";
 const ControlProvider = memo(function ControlProvider2(props) {
-  const { children, ...context } = props;
+  const { children, disabled, error, size, variant } = props;
+  const context = useMemo(
+    () => ({ disabled, error, size, variant }),
+    [disabled, error, size, variant]
+  );
   return /* @__PURE__ */ jsx(ControlContext.Provider, { value: context, children });
 });
-function useControlContext() {
-  const context = useContext(ControlContext);
-  if (!context) {
-    throw new Error("useControlContext must be used within ControlProvider");
-  }
-  return context;
-}
 export {
-  ControlProvider,
-  useControlContext
+  ControlProvider
 };
 //# sourceMappingURL=provider.js.map

package/dist/components/controls/provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/provider.tsx"],"sourcesContent":["import { createContext, memo, PropsWithChildren, useContext } from \"react\";\n\nimport { ControlContextData } from \"../../types\";\n\nconst ControlContext = createContext<ControlContextData | undefined>(undefined);\n\nexport const ControlProvider = memo(function ControlProvider(\n  props: PropsWithChildren<ControlContextData>,\n) {\n  const { children, ...context } = props;\n\n  return (\n    <ControlContext.Provider value={context}>\n      {children}\n    </ControlContext.Provider>\n  );\n});\n\nexport function useControlContext() {\n  const context = useContext(ControlContext);\n\n  if (!context) {\n    throw new Error(\"useControlContext must be used within ControlProvider\");\n  }\n\n  return context;\n}\n"],"mappings":"AAYI;AAZJ,SAAS,eAAe,MAAyB,kBAAkB;AAInE,MAAM,iBAAiB,cAA8C,MAAS;AAEvE,MAAM,kBAAkB,KAAK,SAASA,iBAC3C,OACA;AACA,QAAM,EAAE,UAAU,GAAG,QAAQ,IAAI;AAEjC,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B,UACH;AAEJ,CAAC;AAEM,SAAS,oBAAoB;AAClC,QAAM,UAAU,WAAW,cAAc;AAEzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;","names":["ControlProvider"]}
+{"version":3,"sources":["../../../src/components/controls/provider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { memo, useMemo } from \"react\";\n\nimport type { ControlContextData } from \"../../types\";\nimport { ControlContext } from \"../../contexts/control.context\";\n\nexport const ControlProvider = memo(function ControlProvider(\n  props: PropsWithChildren<ControlContextData>,\n) {\n  const { children, disabled, error, size, variant } = props;\n\n  const context = useMemo<ControlContextData>(\n    () => ({ disabled, error, size, variant }),\n    [disabled, error, size, variant],\n  );\n\n  return (\n    <ControlContext.Provider value={context}>\n      {children}\n    </ControlContext.Provider>\n  );\n});\n"],"mappings":"AAiBI;AAhBJ,SAAS,MAAM,eAAe;AAG9B,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,KAAK,SAASA,iBAC3C,OACA;AACA,QAAM,EAAE,UAAU,UAAU,OAAO,MAAM,QAAQ,IAAI;AAErD,QAAM,UAAU;AAAA,IACd,OAAO,EAAE,UAAU,OAAO,MAAM,QAAQ;AAAA,IACxC,CAAC,UAAU,OAAO,MAAM,OAAO;AAAA,EACjC;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B,UACH;AAEJ,CAAC;","names":["ControlProvider"]}

package/dist/components/controls/root.js

@@ -1,17 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { StyleSheet } from "react-native";
+import { ControlRootStyles } from "../../constants/control-root.constants";
 import { View } from "../atoms";
 const ControlRoot = memo(function ControlRoot2(props) {
   const { style, ...rest } = props;
-  const containerStyle = useMemo(() => [styles.container, style], [style]);
+  const containerStyle = useMemo(
+    () => [ControlRootStyles.container, style],
+    [style]
+  );
   return /* @__PURE__ */ jsx(View, { ...rest, style: containerStyle });
 });
-const styles = StyleSheet.create({
-  container: {
-    width: "100%"
-  }
-});
 export {
   ControlRoot
 };

package/dist/components/controls/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { ViewProps } from \"../../types\";\nimport { View } from \"../atoms\";\n\nexport const ControlRoot = memo(function ControlRoot(props: ViewProps) {\n  const { style, ...rest } = props;\n\n  const containerStyle = useMemo(() => [styles.container, style], [style]);\n\n  return <View {...rest} style={containerStyle} />;\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    width: \"100%\",\n  },\n});\n"],"mappings":"AAWS;AAXT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AAEd,MAAM,cAAc,KAAK,SAASA,aAAY,OAAkB;AACrE,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,iBAAiB,QAAQ,MAAM,CAAC,OAAO,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AAEvE,SAAO,oBAAC,QAAM,GAAG,MAAM,OAAO,gBAAgB;AAChD,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,OAAO;AAAA,EACT;AACF,CAAC;","names":["ControlRoot"]}
+{"version":3,"sources":["../../../src/components/controls/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport type { ViewProps } from \"../../types\";\nimport { ControlRootStyles } from \"../../constants/control-root.constants\";\nimport { View } from \"../atoms\";\n\nexport const ControlRoot = memo(function ControlRoot(props: ViewProps) {\n  const { style, ...rest } = props;\n\n  const containerStyle = useMemo(\n    () => [ControlRootStyles.container, style],\n    [style],\n  );\n\n  return <View {...rest} style={containerStyle} />;\n});\n"],"mappings":"AAcS;AAdT,SAAS,MAAM,eAAe;AAG9B,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAEd,MAAM,cAAc,KAAK,SAASA,aAAY,OAAkB;AACrE,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,kBAAkB,WAAW,KAAK;AAAA,IACzC,CAAC,KAAK;AAAA,EACR;AAEA,SAAO,oBAAC,QAAM,GAAG,MAAM,OAAO,gBAAgB;AAChD,CAAC;","names":["ControlRoot"]}

package/dist/components/controls/value.d.mts

@@ -4,8 +4,8 @@ import { ControlValueProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
-import '../../types/spinner.types.mjs';
 import '../../types/button.types.mjs';
+import '../../types/spinner.types.mjs';
 
 declare const ControlValue: react.MemoExoticComponent<(props: ControlValueProps) => react_jsx_runtime.JSX.Element>;
 

package/dist/components/controls/value.js

@@ -1,12 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import {
-  getFieldStateTokens,
-  useThemedStyles
-} from "@impulse-ui-native/theme";
+import { getFieldStateTokens, useThemedStyles } from "@impulse-ui-native/theme";
+import { useControlContext } from "../../hooks/use-control-context.hook";
 import { Typography } from "../atoms";
-import { useControlContext } from "./provider";
 const ControlValue = memo(function ControlValue2(props) {
   const { style, ...rest } = props;
   const { size, variant, disabled, error } = useControlContext();
@@ -21,12 +18,7 @@ const ControlValue = memo(function ControlValue2(props) {
   );
   return /* @__PURE__ */ jsx(Typography.Master, { numberOfLines: 1, ...rest, style: valueStyle });
 });
-function themedStyles(theme, {
-  size,
-  variant,
-  disabled,
-  error
-}) {
+function themedStyles(theme, { size, variant, disabled, error }) {
   const controlInputTokens = theme.components.controlInput;
   const sizeTokens = controlInputTokens.sizes[size];
   const appearanceTokens = getFieldStateTokens(

package/dist/components/controls/value.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/value.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n  AppTheme,\n  ComponentSize,\n  FieldVariant,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlValueProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlValue = memo(function ControlValue(\n  props: ControlValueProps,\n) {\n  const { style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    { size, variant, disabled, error },\n    [size, variant, disabled, error],\n  );\n\n  const valueStyle = useMemo(\n    () => [styles.value, style],\n    [styles.value, style],\n  );\n\n  return <Typography.Master numberOfLines={1} {...rest} style={valueStyle} />;\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    value: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.color,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AAiCS;AAjCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,MAAM;AAAA,IACjC,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SAAO,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,YAAY;AAC3E,CAAC;AAED,SAAS,aACP,OACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlValue"]}
+{"version":3,"sources":["../../../src/components/controls/value.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlValueProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlValue = memo(function ControlValue(\n  props: ControlValueProps,\n) {\n  const { style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    { size, variant, disabled, error },\n    [size, variant, disabled, error],\n  );\n\n  const valueStyle = useMemo(\n    () => [styles.value, style],\n    [styles.value, style],\n  );\n\n  return <Typography.Master numberOfLines={1} {...rest} style={valueStyle} />;\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, disabled, error }: ControlFieldThemeProps,\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    value: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.color,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AA6BS;AA7BT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,MAAM;AAAA,IACjC,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SAAO,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,YAAY;AAC3E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,UAAU,MAAM,GACjC;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlValue"]}

package/dist/components/index.d.mts

@@ -10,7 +10,7 @@ export { Pressable } from './atoms/pressable.mjs';
 export { Spinner } from './atoms/spinner.mjs';
 export { Tag } from './atoms/tag.mjs';
 export { Control } from './controls/control.mjs';
-export { useControlContext } from './controls/provider.mjs';
+export { useControlContext } from '../hooks/use-control-context.hook.mjs';
 import 'react';
 import 'react/jsx-runtime';
 import '../types/avatar.types.mjs';
@@ -20,8 +20,8 @@ import '../types/view.types.mjs';
 import '../types/badge.types.mjs';
 import '../types/control-components.types.mjs';
 import '@impulse-ui-native/icon/types';
-import '../types/spinner.types.mjs';
 import '../types/button.types.mjs';
+import '../types/spinner.types.mjs';
 import '../types/safe-area-view.types.mjs';
 import 'react-native-safe-area-context';
 import '../types/typography.types.mjs';

package/dist/constants/control-root.constants.d.mts

@@ -0,0 +1,7 @@
+declare const ControlRootStyles: {
+    container: {
+        width: "100%";
+    };
+};
+
+export { ControlRootStyles };

package/dist/constants/control-root.constants.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+const ControlRootStyles = StyleSheet.create({
+  container: {
+    width: "100%"
+  }
+});
+export {
+  ControlRootStyles
+};
+//# sourceMappingURL=control-root.constants.js.map

package/dist/constants/control-root.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants/control-root.constants.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\n\nexport const ControlRootStyles = StyleSheet.create({\n  container: {\n    width: \"100%\",\n  },\n});\n"],"mappings":"AAAA,SAAS,kBAAkB;AAEpB,MAAM,oBAAoB,WAAW,OAAO;AAAA,EACjD,WAAW;AAAA,IACT,OAAO;AAAA,EACT;AACF,CAAC;","names":[]}

package/dist/contexts/control.context.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ControlComponentProps } from '../types/control-components.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
+import '../types/button.types.mjs';
+import '../types/spinner.types.mjs';
+
+declare const ControlContext: react.Context<ControlComponentProps | undefined>;
+
+export { ControlContext };

package/dist/contexts/control.context.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+const ControlContext = createContext(
+  void 0
+);
+export {
+  ControlContext
+};
+//# sourceMappingURL=control.context.js.map

package/dist/contexts/control.context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/contexts/control.context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nimport type { ControlContextData } from \"../types\";\n\nexport const ControlContext = createContext<ControlContextData | undefined>(\n  undefined,\n);\n"],"mappings":"AAAA,SAAS,qBAAqB;AAIvB,MAAM,iBAAiB;AAAA,EAC5B;AACF;","names":[]}

package/dist/hooks/use-control-context.hook.d.mts

@@ -0,0 +1,11 @@
+import { ControlContextData } from '../types/control-components.types.mjs';
+import 'react';
+import 'react-native';
+import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
+import '../types/button.types.mjs';
+import '../types/spinner.types.mjs';
+
+declare function useControlContext(): ControlContextData;
+
+export { useControlContext };

package/dist/hooks/use-control-context.hook.js

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import { ControlContext } from "../contexts/control.context";
+function useControlContext() {
+  const context = useContext(ControlContext);
+  if (!context) {
+    throw new Error("Control parts must be used within Control.Provider");
+  }
+  return context;
+}
+export {
+  useControlContext
+};
+//# sourceMappingURL=use-control-context.hook.js.map

package/dist/hooks/use-control-context.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-control-context.hook.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport type { ControlContextData } from \"../types\";\nimport { ControlContext } from \"../contexts/control.context\";\n\nexport function useControlContext(): ControlContextData {\n  const context = useContext(ControlContext);\n\n  if (!context) {\n    throw new Error(\"Control parts must be used within Control.Provider\");\n  }\n\n  return context;\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAG3B,SAAS,sBAAsB;AAExB,SAAS,oBAAwC;AACtD,QAAM,UAAU,WAAW,cAAc;AAEzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AAEA,SAAO;AACT;","names":[]}

package/dist/index.d.mts

@@ -10,7 +10,7 @@ export { Pressable } from './components/atoms/pressable.mjs';
 export { Spinner } from './components/atoms/spinner.mjs';
 export { Tag } from './components/atoms/tag.mjs';
 export { Control } from './components/controls/control.mjs';
-export { useControlContext } from './components/controls/provider.mjs';
+export { useControlContext } from './hooks/use-control-context.hook.mjs';
 export { createPreset } from './hocs/create-preset.hoc.mjs';
 export { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from './constants/safe-area-view.constants.mjs';
 export { AvatarImageProps, AvatarProps } from './types/avatar.types.mjs';

package/dist/types/badge.types.d.mts

@@ -4,8 +4,8 @@ import { ComponentSize, BadgeTone, DisplayVariant } from '@impulse-ui-native/the
 import { ControlComponentCommonProps } from './control-components.types.mjs';
 import { ViewProps } from './view.types.mjs';
 import '@impulse-ui-native/icon/types';
-import './spinner.types.mjs';
 import './button.types.mjs';
+import './spinner.types.mjs';
 
 interface BadgeProps extends Omit<ViewProps, "children">, Pick<ControlComponentCommonProps, "PrefixIcon" | "Prefix" | "onPressPrefix" | "SuffixIcon" | "Suffix" | "onPressSuffix"> {
     children: ReactNode;

package/dist/types/control-components.types.d.mts

@@ -2,8 +2,8 @@ import { ComponentType } from 'react';
 import { ViewProps, TextProps, TextInputProps } from 'react-native';
 import { IconProps } from '@impulse-ui-native/icon/types';
 import { ComponentSize, FieldVariant } from '@impulse-ui-native/theme';
-import { SpinnerProps } from './spinner.types.mjs';
 import { PressableCoreProps } from './button.types.mjs';
+import { SpinnerProps } from './spinner.types.mjs';
 
 interface ControlComponentCommonProps {
     placeholder?: string;
@@ -21,26 +21,18 @@ interface ControlComponentProps {
     error: string | undefined;
     disabled: boolean | undefined;
 }
-interface ControlContextData extends ControlComponentProps {
-}
-interface ControlContainerProps extends ViewProps {
-}
-interface ControlLabelProps extends TextProps {
-}
-interface ControlErrorLabelProps extends TextProps {
-}
+type ControlContextData = ControlComponentProps;
+type ControlContainerProps = ViewProps;
+type ControlLabelProps = TextProps;
+type ControlErrorLabelProps = TextProps;
 interface ControlAddonProps extends ViewProps {
-    icon: IconProps["icon"] | undefined;
-    onPress: PressableCoreProps["onPress"] | undefined;
-    Content: ComponentType<any> | undefined;
-}
-interface ControlInputProps extends TextInputProps {
-}
-interface ControlPlaceholderProps extends TextProps {
-}
-interface ControlValueProps extends TextProps {
-}
-interface ControlLoaderProps extends SpinnerProps {
-}
+    disabled?: boolean;
+    hitSlop?: PressableCoreProps["hitSlop"];
+    onPress?: PressableCoreProps["onPress"];
+}
+type ControlInputProps = TextInputProps;
+type ControlPlaceholderProps = TextProps;
+type ControlValueProps = TextProps;
+type ControlLoaderProps = SpinnerProps;
 
 export type { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlValueProps };

package/dist/types/control-theme.types.d.mts

@@ -0,0 +1,12 @@
+import { ComponentSize, FieldVariant } from '@impulse-ui-native/theme';
+
+interface ControlStateThemeProps {
+    disabled?: boolean;
+    error?: string;
+}
+interface ControlFieldThemeProps extends ControlStateThemeProps {
+    size: ComponentSize;
+    variant: FieldVariant;
+}
+
+export type { ControlFieldThemeProps, ControlStateThemeProps };

package/dist/types/control-theme.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=control-theme.types.js.map

package/dist/types/control-theme.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/primitives",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "Foundational UI primitives for building ImpulseUI Native components.",
   "keywords": [
     "react-native",
@@ -28,9 +28,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/icon": "7.0.0",
-    "@impulse-ui-native/theme": "7.0.0",
-    "@impulse-ui-native/core": "7.0.0"
+    "@impulse-ui-native/icon": "8.0.0",
+    "@impulse-ui-native/theme": "8.0.0",
+    "@impulse-ui-native/core": "8.0.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
@@ -41,9 +41,9 @@
     "react-native-safe-area-context": "~5.7.0",
     "react-native-svg": "15.15.4",
     "typescript": "~6.0.3",
+    "@impulse-ui-native/prettier-config": "1.0.0",
     "@impulse-ui-native/eslint-config": "1.0.0",
-    "@impulse-ui-native/tsconfig": "1.0.0",
-    "@impulse-ui-native/prettier-config": "1.0.0"
+    "@impulse-ui-native/tsconfig": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",