@impulse-ui-native/primitives 9.1.1 → 10.0.0

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

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

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

@@ -1,5 +1,4 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ControlContainerProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
@@ -7,6 +6,6 @@ import '@impulse-ui-native/theme';
 import '../../types/button.types.mjs';
 import '../../types/spinner.types.mjs';
 
-declare const ControlContainer: react.MemoExoticComponent<(props: ControlContainerProps) => react_jsx_runtime.JSX.Element>;
+declare const ControlContainer: react.MemoExoticComponent<({ style, ...props }: ControlContainerProps) => react.JSX.Element>;
 
 export { ControlContainer };

package/dist/components/controls/container.js

@@ -1,49 +1,25 @@
 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 { useThemedStyles } from "@impulse-ui-native/theme";
 import { useControlContext } from "../../hooks/use-control-context.hook";
 import { View } from "../atoms/view";
-const ControlContainer = memo(function ControlContainer2(props) {
-  const { style, ...rest } = props;
+import { controlContainerStyles } from "./container.styles";
+const ControlContainer = memo(function ControlContainer2({
+  style,
+  ...props
+}) {
   const { size, variant, disabled, error } = useControlContext();
   const styles = useThemedStyles(
-    themedStyles,
-    {
-      size,
-      variant,
-      disabled,
-      error
-    },
+    controlContainerStyles,
+    { size, variant, disabled, error },
     [size, variant, disabled, error]
   );
   const containerStyle = useMemo(
     () => [styles.inputContainer, style],
     [styles.inputContainer, style]
   );
-  return /* @__PURE__ */ jsx(View, { style: containerStyle, ...rest });
+  return /* @__PURE__ */ jsx(View, { ...props, style: containerStyle });
 });
-function themedStyles(theme, { size, variant, disabled, error }) {
-  const controlContainerTokens = theme.components.controlContainer;
-  const sizeTokens = controlContainerTokens.sizes[size];
-  const appearanceTokens = getFieldStateTokens(
-    controlContainerTokens.variants[variant],
-    { disabled, error: Boolean(error) }
-  );
-  return StyleSheet.create({
-    inputContainer: {
-      flexDirection: "row",
-      alignItems: "center",
-      height: sizeTokens.height,
-      paddingHorizontal: sizeTokens.paddingHorizontal,
-      borderRadius: controlContainerTokens.borderRadius,
-      borderWidth: controlContainerTokens.borderWidth,
-      opacity: appearanceTokens.opacity,
-      backgroundColor: appearanceTokens.backgroundColor,
-      borderColor: appearanceTokens.borderColor
-    }
-  });
-}
 export {
   ControlContainer
 };

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 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"]}
+{"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlContainerProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { View } from \"../atoms/view\";\nimport { controlContainerStyles } from \"./container.styles\";\n\nexport const ControlContainer = memo(function ControlContainer({\n  style,\n  ...props\n}: ControlContainerProps) {\n  const { size, variant, disabled, error } = useControlContext();\n  const styles = useThemedStyles(\n    controlContainerStyles,\n    { size, variant, disabled, error },\n    [size, variant, disabled, error],\n  );\n  const containerStyle = useMemo(\n    () => [styles.inputContainer, style],\n    [styles.inputContainer, style],\n  );\n\n  return <View {...props} style={containerStyle} />;\n});\n"],"mappings":"AAwBS;AAxBT,SAAS,MAAM,eAAe;AAE9B,SAAS,uBAAuB;AAGhC,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,KAAK,SAASA,kBAAiB;AAAA,EAC7D;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAC7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,MAAM;AAAA,IACjC,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AACA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,gBAAgB;AACjD,CAAC;","names":["ControlContainer"]}

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

@@ -0,0 +1,18 @@
+import { AppTheme } from '@impulse-ui-native/theme';
+import { ControlFieldThemeProps } from '../../types/control-theme.types.mjs';
+
+declare function controlContainerStyles(theme: AppTheme, { size, variant, disabled, error }: ControlFieldThemeProps): Readonly<{
+    inputContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        height: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        borderWidth: number;
+        opacity: number;
+        backgroundColor: string;
+        borderColor: string;
+    };
+}>;
+
+export { controlContainerStyles };

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

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { getFieldStateTokens } from "@impulse-ui-native/theme";
+function controlContainerStyles(theme, { size, variant, disabled, error }) {
+  const tokens = theme.components.controlContainer;
+  const sizeTokens = tokens.sizes[size];
+  const appearance = getFieldStateTokens(tokens.variants[variant], {
+    disabled,
+    error: Boolean(error)
+  });
+  return StyleSheet.create({
+    inputContainer: {
+      flexDirection: "row",
+      alignItems: "center",
+      height: sizeTokens.height,
+      paddingHorizontal: sizeTokens.paddingHorizontal,
+      borderRadius: tokens.borderRadius,
+      borderWidth: tokens.borderWidth,
+      opacity: appearance.opacity,
+      backgroundColor: appearance.backgroundColor,
+      borderColor: appearance.borderColor
+    }
+  });
+}
+export {
+  controlContainerStyles
+};
+//# sourceMappingURL=container.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/controls/container.styles.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\n\nexport function controlContainerStyles(\n  theme: AppTheme,\n  { size, variant, disabled, error }: ControlFieldThemeProps,\n) {\n  const tokens = theme.components.controlContainer;\n  const sizeTokens = tokens.sizes[size];\n  const appearance = getFieldStateTokens(tokens.variants[variant], {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return StyleSheet.create({\n    inputContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      height: sizeTokens.height,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n      borderRadius: tokens.borderRadius,\n      borderWidth: tokens.borderWidth,\n      opacity: appearance.opacity,\n      backgroundColor: appearance.backgroundColor,\n      borderColor: appearance.borderColor,\n    },\n  });\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAG3B,SAAS,2BAA2B;AAI7B,SAAS,uBACd,OACA,EAAE,MAAM,SAAS,UAAU,MAAM,GACjC;AACA,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,MAAM,IAAI;AACpC,QAAM,aAAa,oBAAoB,OAAO,SAAS,OAAO,GAAG;AAAA,IAC/D;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,SAAS,WAAW;AAAA,MACpB,iBAAiB,WAAW;AAAA,MAC5B,aAAa,WAAW;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":[]}

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

@@ -1,7 +1,6 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ViewProps } from '../../types/view.types.mjs';
-import { ControlContainerProps, ControlContextData, ControlLabelProps, ControlErrorLabelProps, ControlAddonProps, ControlInputProps, ControlPlaceholderProps, ControlValueProps, ControlLoaderProps } from '../../types/control-components.types.mjs';
+import { ControlFieldProps, ControlTriggerProps, ControlIconProps, ControlContainerProps, ControlContextData, ControlLabelProps, ControlErrorLabelProps, ControlAddonProps, ControlInputProps, ControlPlaceholderProps, ControlValueProps, ControlLoaderProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 import '@impulse-ui-native/icon/types';
@@ -9,16 +8,19 @@ 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>;
-    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>;
-    Loader: react.MemoExoticComponent<(props: ControlLoaderProps) => react_jsx_runtime.JSX.Element>;
+    Field: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, }: ControlFieldProps) => react.JSX.Element>;
+    Trigger: react.MemoExoticComponent<({ disabled: disabledProp, style, ...props }: ControlTriggerProps) => react.JSX.Element>;
+    Icon: react.MemoExoticComponent<({ color, ...props }: ControlIconProps) => react.JSX.Element>;
+    Container: react.MemoExoticComponent<({ style, ...props }: ControlContainerProps) => react.JSX.Element>;
+    Provider: react.MemoExoticComponent<(props: react.PropsWithChildren<ControlContextData>) => react.JSX.Element>;
+    Root: react.MemoExoticComponent<(props: ViewProps) => react.JSX.Element>;
+    Label: react.MemoExoticComponent<(props: ControlLabelProps) => react.JSX.Element | null>;
+    Error: react.MemoExoticComponent<(props: ControlErrorLabelProps) => react.JSX.Element>;
+    Addon: react.MemoExoticComponent<({ children, disabled, hitSlop, onPress, style, ...props }: ControlAddonProps) => react.JSX.Element>;
+    Input: react.MemoExoticComponent<(props: ControlInputProps) => react.JSX.Element>;
+    Placeholder: react.MemoExoticComponent<(props: ControlPlaceholderProps) => react.JSX.Element>;
+    Value: react.MemoExoticComponent<(props: ControlValueProps) => react.JSX.Element>;
+    Loader: react.MemoExoticComponent<(props: ControlLoaderProps) => react.JSX.Element>;
 };
 
 export { Control };

package/dist/components/controls/control.js

@@ -1,14 +1,20 @@
 import { ControlAddon } from "./addon";
 import { ControlContainer } from "./container";
 import { ControlError } from "./error";
+import { ControlField } from "./field";
+import { ControlIcon } from "./icon";
 import { ControlInput } from "./input";
 import { ControlLabel } from "./label";
 import { ControlLoader } from "./loader";
 import { ControlPlaceholder } from "./placeholder";
 import { ControlProvider } from "./provider";
 import { ControlRoot } from "./root";
+import { ControlTrigger } from "./trigger";
 import { ControlValue } from "./value";
 const Control = {
+  Field: ControlField,
+  Trigger: ControlTrigger,
+  Icon: ControlIcon,
   Container: ControlContainer,
   Provider: ControlProvider,
   Root: ControlRoot,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/control.tsx"],"sourcesContent":["import { ControlAddon } from \"./addon\";\nimport { ControlContainer } from \"./container\";\nimport { ControlError } from \"./error\";\nimport { ControlInput } from \"./input\";\nimport { ControlLabel } from \"./label\";\nimport { ControlLoader } from \"./loader\";\nimport { ControlPlaceholder } from \"./placeholder\";\nimport { ControlProvider } from \"./provider\";\nimport { ControlRoot } from \"./root\";\nimport { ControlValue } from \"./value\";\n\nexport const Control = {\n  Container: ControlContainer,\n  Provider: ControlProvider,\n  Root: ControlRoot,\n  Label: ControlLabel,\n  Error: ControlError,\n  Addon: ControlAddon,\n  Input: ControlInput,\n  Placeholder: ControlPlaceholder,\n  Value: ControlValue,\n  Loader: ControlLoader,\n};\n"],"mappings":"AAAA,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAEtB,MAAM,UAAU;AAAA,EACrB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,aAAa;AAAA,EACb,OAAO;AAAA,EACP,QAAQ;AACV;","names":[]}
+{"version":3,"sources":["../../../src/components/controls/control.tsx"],"sourcesContent":["import { ControlAddon } from \"./addon\";\nimport { ControlContainer } from \"./container\";\nimport { ControlError } from \"./error\";\nimport { ControlField } from \"./field\";\nimport { ControlIcon } from \"./icon\";\nimport { ControlInput } from \"./input\";\nimport { ControlLabel } from \"./label\";\nimport { ControlLoader } from \"./loader\";\nimport { ControlPlaceholder } from \"./placeholder\";\nimport { ControlProvider } from \"./provider\";\nimport { ControlRoot } from \"./root\";\nimport { ControlTrigger } from \"./trigger\";\nimport { ControlValue } from \"./value\";\n\nexport const Control = {\n  Field: ControlField,\n  Trigger: ControlTrigger,\n  Icon: ControlIcon,\n  Container: ControlContainer,\n  Provider: ControlProvider,\n  Root: ControlRoot,\n  Label: ControlLabel,\n  Error: ControlError,\n  Addon: ControlAddon,\n  Input: ControlInput,\n  Placeholder: ControlPlaceholder,\n  Value: ControlValue,\n  Loader: ControlLoader,\n};\n"],"mappings":"AAAA,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAEtB,MAAM,UAAU;AAAA,EACrB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,aAAa;AAAA,EACb,OAAO;AAAA,EACP,QAAQ;AACV;","names":[]}

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

@@ -1,5 +1,4 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ControlErrorLabelProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
@@ -7,6 +6,6 @@ import '@impulse-ui-native/theme';
 import '../../types/button.types.mjs';
 import '../../types/spinner.types.mjs';
 
-declare const ControlError: react.MemoExoticComponent<(props: ControlErrorLabelProps) => react_jsx_runtime.JSX.Element>;
+declare const ControlError: react.MemoExoticComponent<(props: ControlErrorLabelProps) => react.JSX.Element>;
 
 export { ControlError };

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

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ControlFieldProps } 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 ControlField: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, }: ControlFieldProps) => react.JSX.Element>;
+
+export { ControlField };

package/dist/components/controls/field.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { ControlAddon } from "./addon";
+import { ControlError } from "./error";
+import { ControlLabel } from "./label";
+import { ControlProvider } from "./provider";
+import { ControlRoot } from "./root";
+import { ControlTrigger } from "./trigger";
+const ControlField = memo(function ControlField2({
+  children,
+  disabled,
+  error,
+  label,
+  onPress,
+  onPressPrefix,
+  onPressSuffix,
+  prefix,
+  size = "medium",
+  suffix,
+  variant = "outlined"
+}) {
+  const hasPrefix = prefix !== null && prefix !== void 0;
+  const hasSuffix = suffix !== null && suffix !== void 0;
+  return /* @__PURE__ */ jsx(
+    ControlProvider,
+    {
+      size,
+      variant,
+      error,
+      disabled,
+      children: /* @__PURE__ */ jsxs(ControlRoot, { children: [
+        /* @__PURE__ */ jsx(ControlLabel, { children: label }),
+        /* @__PURE__ */ jsxs(ControlTrigger, { onPress, children: [
+          hasPrefix ? /* @__PURE__ */ jsx(ControlAddon, { onPress: onPressPrefix, children: prefix }) : null,
+          children,
+          hasSuffix ? /* @__PURE__ */ jsx(ControlAddon, { onPress: onPressSuffix, children: suffix }) : null
+        ] }),
+        error ? /* @__PURE__ */ jsx(ControlError, { children: error }) : null
+      ] })
+    }
+  );
+});
+export {
+  ControlField
+};
+//# sourceMappingURL=field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/controls/field.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport type { ControlFieldProps } from \"../../types\";\nimport { ControlAddon } from \"./addon\";\nimport { ControlError } from \"./error\";\nimport { ControlLabel } from \"./label\";\nimport { ControlProvider } from \"./provider\";\nimport { ControlRoot } from \"./root\";\nimport { ControlTrigger } from \"./trigger\";\n\nexport const ControlField = memo(function ControlField({\n  children,\n  disabled,\n  error,\n  label,\n  onPress,\n  onPressPrefix,\n  onPressSuffix,\n  prefix,\n  size = \"medium\",\n  suffix,\n  variant = \"outlined\",\n}: ControlFieldProps) {\n  const hasPrefix = prefix !== null && prefix !== undefined;\n  const hasSuffix = suffix !== null && suffix !== undefined;\n\n  return (\n    <ControlProvider\n      size={size}\n      variant={variant}\n      error={error}\n      disabled={disabled}\n    >\n      <ControlRoot>\n        <ControlLabel>{label}</ControlLabel>\n        <ControlTrigger onPress={onPress}>\n          {hasPrefix ? (\n            <ControlAddon onPress={onPressPrefix}>{prefix}</ControlAddon>\n          ) : null}\n          {children}\n          {hasSuffix ? (\n            <ControlAddon onPress={onPressSuffix}>{suffix}</ControlAddon>\n          ) : null}\n        </ControlTrigger>\n        {error ? <ControlError>{error}</ControlError> : null}\n      </ControlRoot>\n    </ControlProvider>\n  );\n});\n"],"mappings":"AAkCQ,cACA,YADA;AAlCR,SAAS,YAAY;AAGrB,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AACZ,GAAsB;AACpB,QAAM,YAAY,WAAW,QAAQ,WAAW;AAChD,QAAM,YAAY,WAAW,QAAQ,WAAW;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,+BAAC,eACC;AAAA,4BAAC,gBAAc,iBAAM;AAAA,QACrB,qBAAC,kBAAe,SACb;AAAA,sBACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,UACH;AAAA,UACA,YACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,WACN;AAAA,QACC,QAAQ,oBAAC,gBAAc,iBAAM,IAAkB;AAAA,SAClD;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["ControlField"]}

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

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ControlIconProps } 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 ControlIcon: react.MemoExoticComponent<({ color, ...props }: ControlIconProps) => react.JSX.Element>;
+
+export { ControlIcon };

package/dist/components/controls/icon.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Icon } from "@impulse-ui-native/icon";
+import {
+  getFieldStateTokens,
+  useComponentsTokens
+} from "@impulse-ui-native/theme";
+import { useControlContext } from "../../hooks/use-control-context.hook";
+const ControlIcon = memo(function ControlIcon2({
+  color,
+  ...props
+}) {
+  const { variant, disabled, error } = useControlContext();
+  const tokens = useComponentsTokens().controlAddon;
+  const appearance = getFieldStateTokens(tokens.variants[variant], {
+    disabled,
+    error: Boolean(error)
+  });
+  return /* @__PURE__ */ jsx(Icon, { ...props, color: color ?? appearance.iconColor });
+});
+export {
+  ControlIcon
+};
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/controls/icon.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport {\n  getFieldStateTokens,\n  useComponentsTokens,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlIconProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\n\nexport const ControlIcon = memo(function ControlIcon({\n  color,\n  ...props\n}: ControlIconProps) {\n  const { variant, disabled, error } = useControlContext();\n  const tokens = useComponentsTokens().controlAddon;\n  const appearance = getFieldStateTokens(tokens.variants[variant], {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return <Icon {...props} color={color ?? appearance.iconColor} />;\n});\n"],"mappings":"AAsBS;AAtBT,SAAS,YAAY;AAErB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAE3B,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI,kBAAkB;AACvD,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,oBAAoB,OAAO,SAAS,OAAO,GAAG;AAAA,IAC/D;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,SAAS,WAAW,WAAW;AAChE,CAAC;","names":["ControlIcon"]}

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,4 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ControlPlaceholderProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
@@ -7,6 +6,6 @@ import '@impulse-ui-native/theme';
 import '../../types/button.types.mjs';
 import '../../types/spinner.types.mjs';
 
-declare const ControlPlaceholder: react.MemoExoticComponent<(props: ControlPlaceholderProps) => react_jsx_runtime.JSX.Element>;
+declare const ControlPlaceholder: react.MemoExoticComponent<(props: ControlPlaceholderProps) => react.JSX.Element>;
 
 export { ControlPlaceholder };

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

@@ -1,6 +1,5 @@
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ControlContextData } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
@@ -8,6 +7,6 @@ import '@impulse-ui-native/theme';
 import '../../types/button.types.mjs';
 import '../../types/spinner.types.mjs';
 
-declare const ControlProvider: react.MemoExoticComponent<(props: PropsWithChildren<ControlContextData>) => react_jsx_runtime.JSX.Element>;
+declare const ControlProvider: react.MemoExoticComponent<(props: PropsWithChildren<ControlContextData>) => react.JSX.Element>;
 
 export { ControlProvider };

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

@@ -1,9 +1,8 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ViewProps } from '../../types/view.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 
-declare const ControlRoot: react.MemoExoticComponent<(props: ViewProps) => react_jsx_runtime.JSX.Element>;
+declare const ControlRoot: react.MemoExoticComponent<(props: ViewProps) => react.JSX.Element>;
 
 export { ControlRoot };

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

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { ControlTriggerProps } 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 ControlTrigger: react.MemoExoticComponent<({ disabled: disabledProp, style, ...props }: ControlTriggerProps) => react.JSX.Element>;
+
+export { ControlTrigger };

package/dist/components/controls/trigger.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import {
+  useComponentsTokens,
+  useStyleProps,
+  useThemedStyles
+} from "@impulse-ui-native/theme";
+import { useControlContext } from "../../hooks/use-control-context.hook";
+import { Pressable } from "../atoms/pressable";
+import { controlContainerStyles } from "./container.styles";
+const ControlTrigger = memo(function ControlTrigger2({
+  disabled: disabledProp,
+  style,
+  ...props
+}) {
+  const { size, variant, disabled, error } = useControlContext();
+  const tokens = useComponentsTokens().pressable;
+  const resolvedDisabled = Boolean(disabled) || disabledProp === true;
+  const styles = useThemedStyles(
+    controlContainerStyles,
+    { size, variant, disabled: resolvedDisabled, error },
+    [size, variant, resolvedDisabled, error]
+  );
+  const extractedStyleProps = useStyleProps(props);
+  const triggerStyle = useCallback(
+    (state) => [
+      styles.inputContainer,
+      {
+        opacity: styles.inputContainer.opacity * (state.pressed ? tokens.pressedOpacity : 1)
+      },
+      extractedStyleProps,
+      typeof style === "function" ? style(state) : style
+    ],
+    [extractedStyleProps, style, styles.inputContainer, tokens.pressedOpacity]
+  );
+  return /* @__PURE__ */ jsx(Pressable, { ...props, disabled: resolvedDisabled, style: triggerStyle });
+});
+export {
+  ControlTrigger
+};
+//# sourceMappingURL=trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/controls/trigger.tsx"],"sourcesContent":["import type { PressableStateCallbackType } from \"react-native\";\nimport { memo, useCallback } from \"react\";\n\nimport {\n  useComponentsTokens,\n  useStyleProps,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlTriggerProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Pressable } from \"../atoms/pressable\";\nimport { controlContainerStyles } from \"./container.styles\";\n\nexport const ControlTrigger = memo(function ControlTrigger({\n  disabled: disabledProp,\n  style,\n  ...props\n}: ControlTriggerProps) {\n  const { size, variant, disabled, error } = useControlContext();\n  const tokens = useComponentsTokens().pressable;\n  const resolvedDisabled = Boolean(disabled) || disabledProp === true;\n  const styles = useThemedStyles(\n    controlContainerStyles,\n    { size, variant, disabled: resolvedDisabled, error },\n    [size, variant, resolvedDisabled, error],\n  );\n  const extractedStyleProps = useStyleProps(props);\n\n  const triggerStyle = useCallback(\n    (state: PressableStateCallbackType) => [\n      styles.inputContainer,\n      {\n        opacity:\n          styles.inputContainer.opacity *\n          (state.pressed ? tokens.pressedOpacity : 1),\n      },\n      extractedStyleProps,\n      typeof style === \"function\" ? style(state) : style,\n    ],\n    [extractedStyleProps, style, styles.inputContainer, tokens.pressedOpacity],\n  );\n\n  return (\n    <Pressable {...props} disabled={resolvedDisabled} style={triggerStyle} />\n  );\n});\n"],"mappings":"AA4CI;AA3CJ,SAAS,MAAM,mBAAmB;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,KAAK,SAASA,gBAAe;AAAA,EACzD,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAC7D,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,mBAAmB,QAAQ,QAAQ,KAAK,iBAAiB;AAC/D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,kBAAkB,MAAM;AAAA,IACnD,CAAC,MAAM,SAAS,kBAAkB,KAAK;AAAA,EACzC;AACA,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,eAAe;AAAA,IACnB,CAAC,UAAsC;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,QACE,SACE,OAAO,eAAe,WACrB,MAAM,UAAU,OAAO,iBAAiB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,qBAAqB,OAAO,OAAO,gBAAgB,OAAO,cAAc;AAAA,EAC3E;AAEA,SACE,oBAAC,aAAW,GAAG,OAAO,UAAU,kBAAkB,OAAO,cAAc;AAE3E,CAAC;","names":["ControlTrigger"]}

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

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

package/dist/components/index.d.mts

@@ -12,7 +12,6 @@ export { Tag } from './atoms/tag.mjs';
 export { Control } from './controls/control.mjs';
 export { useControlContext } from '../hooks/use-control-context.hook.mjs';
 import 'react';
-import 'react/jsx-runtime';
 import '../types/avatar.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';

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

@@ -1,7 +1,7 @@
-declare const ControlRootStyles: {
+declare const ControlRootStyles: Readonly<{
     container: {
-        width: "100%";
+        width: string;
     };
-};
+}>;
 
 export { ControlRootStyles };

package/dist/hocs/create-preset.hoc.d.mts

@@ -1,11 +1,10 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AppTheme, TypographyProps, TypographyPresetKey } from '@impulse-ui-native/theme';
 import { TextProps } from '../types/typography.types.mjs';
 import 'react-native';
 
 declare function createPreset(config: (theme: AppTheme) => TypographyProps & Pick<TextProps, "color">, key: TypographyPresetKey): react.MemoExoticComponent<{
-    (props: TextProps): react_jsx_runtime.JSX.Element;
+    (props: TextProps): react.JSX.Element;
     displayName: string;
 }>;
 

package/dist/hocs/index.d.mts

@@ -1,6 +1,5 @@
 export { createPreset } from './create-preset.hoc.mjs';
 import 'react';
-import 'react/jsx-runtime';
 import '@impulse-ui-native/theme';
 import '../types/typography.types.mjs';
 import 'react-native';

package/dist/index.d.mts

@@ -23,10 +23,9 @@ export { DividerInset, DividerOrientation, DividerProps } from './types/divider.
 export { IconButtonProps, IconButtonThemeProps } from './types/icon-button.types.mjs';
 export { SpinnerProps } from './types/spinner.types.mjs';
 export { TagProps, TagThemeProps } from './types/tag.types.mjs';
-export { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlValueProps } from './types/control-components.types.mjs';
+export { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlFieldProps, ControlIconProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlTriggerProps, ControlValueProps } from './types/control-components.types.mjs';
 import 'react';
-import 'react/jsx-runtime';
-import '@impulse-ui-native/theme';
 import 'react-native';
+import '@impulse-ui-native/theme';
 import 'react-native-safe-area-context';
 import '@impulse-ui-native/icon/types';

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

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } 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';
@@ -23,6 +23,17 @@ interface ControlComponentProps {
 }
 type ControlContextData = ControlComponentProps;
 type ControlContainerProps = ViewProps;
+type ControlTriggerProps = PressableCoreProps;
+type ControlIconProps = IconProps;
+interface ControlFieldProps extends Partial<ControlComponentProps> {
+    children?: ReactNode;
+    label?: string;
+    onPress?: PressableCoreProps["onPress"];
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    onPressPrefix?: PressableCoreProps["onPress"];
+    onPressSuffix?: PressableCoreProps["onPress"];
+}
 type ControlLabelProps = TextProps;
 type ControlErrorLabelProps = TextProps;
 interface ControlAddonProps extends ViewProps {
@@ -35,4 +46,4 @@ type ControlPlaceholderProps = TextProps;
 type ControlValueProps = TextProps;
 type ControlLoaderProps = SpinnerProps;
 
-export type { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlValueProps };
+export type { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlFieldProps, ControlIconProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlTriggerProps, ControlValueProps };