@impulse-ui-native/primitives 11.0.1 → 11.1.0

package/README.md

@@ -113,7 +113,6 @@ default icons or manage selection state.
 </Control.Field>
 ```
 
-
 `Control.Addon` and `Control.Error` render supplied children. Addons own spacing
 and optional press behavior, including group/local disabling; the parent chooses
 and renders icons or custom content. Error owns error-label styling; the parent
@@ -157,3 +156,11 @@ Card, List, Progress, and their prop types are exported from `@impulse-ui-native
 `theme.shadows` scale, including Android elevation. Explicit shadow style props
 and style overrides still take precedence. Configure `theme.codeFontFamily`
 to change `Typography.Code` globally; its default remains `monospace`.
+
+## Field layout
+
+`Control.Root` uses normal parent stretching rather than a forced width.
+`Control.Field` accepts flex, dimension, and spacing props on its outer root.
+In a column, fields stretch horizontally by default without growing vertically.
+In a row, set `flex={1}` on each field to share the available width. If the
+parent centers its children, use `alignSelf="stretch"` or an explicit `width`.

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

@@ -8,7 +8,7 @@ import '../../types/button.types.mjs';
 import '../../types/spinner.types.mjs';
 
 declare const Control: {
-    Field: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, }: ControlFieldProps) => react.JSX.Element>;
+    Field: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, ...props }: 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>;

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

@@ -6,6 +6,6 @@ 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>;
+declare const ControlField: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, ...props }: ControlFieldProps) => react.JSX.Element>;
 
 export { ControlField };

package/dist/components/controls/field.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
+import { useStyleProps } from "@impulse-ui-native/theme";
 import { ControlAddon } from "./addon";
 import { ControlError } from "./error";
 import { ControlLabel } from "./label";
@@ -17,8 +18,10 @@ const ControlField = memo(function ControlField2({
   prefix,
   size = "medium",
   suffix,
-  variant = "outlined"
+  variant = "outlined",
+  ...props
 }) {
+  const layoutStyle = useStyleProps(props);
   const hasPrefix = prefix !== null && prefix !== void 0;
   const hasSuffix = suffix !== null && suffix !== void 0;
   return /* @__PURE__ */ jsx(
@@ -28,7 +31,7 @@ const ControlField = memo(function ControlField2({
       variant,
       error,
       disabled,
-      children: /* @__PURE__ */ jsxs(ControlRoot, { children: [
+      children: /* @__PURE__ */ jsxs(ControlRoot, { style: layoutStyle, children: [
         /* @__PURE__ */ jsx(ControlLabel, { children: label }),
         /* @__PURE__ */ jsxs(ControlTrigger, { onPress, children: [
           hasPrefix ? /* @__PURE__ */ jsx(ControlAddon, { onPress: onPressPrefix, children: prefix }) : null,

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

@@ -1 +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"]}
+{"version":3,"sources":["../../../src/components/controls/field.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { useStyleProps } from \"@impulse-ui-native/theme\";\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  ...props\n}: ControlFieldProps) {\n  const layoutStyle = useStyleProps(props);\n\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 style={layoutStyle}>\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":"AAuCQ,cACA,YADA;AAvCR,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAG9B,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;AAAA,EACV,GAAG;AACL,GAAsB;AACpB,QAAM,cAAc,cAAc,KAAK;AAEvC,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,eAAY,OAAO,aAClB;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/root.js

@@ -1,14 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
-import { ControlRootStyles } from "../../constants/control-root.constants";
+import { memo } from "react";
 import { View } from "../atoms";
 const ControlRoot = memo(function ControlRoot2(props) {
-  const { style, ...rest } = props;
-  const containerStyle = useMemo(
-    () => [ControlRootStyles.container, style],
-    [style]
-  );
-  return /* @__PURE__ */ jsx(View, { ...rest, style: containerStyle });
+  return /* @__PURE__ */ jsx(View, { ...props });
 });
 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\";\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"]}
+{"version":3,"sources":["../../../src/components/controls/root.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport type { ViewProps } from \"../../types\";\nimport { View } from \"../atoms\";\n\nexport const ControlRoot = memo(function ControlRoot(props: ViewProps) {\n  return <View {...props} />;\n});\n"],"mappings":"AAMS;AANT,SAAS,YAAY;AAGrB,SAAS,YAAY;AAEd,MAAM,cAAc,KAAK,SAASA,aAAY,OAAkB;AACrE,SAAO,oBAAC,QAAM,GAAG,OAAO;AAC1B,CAAC;","names":["ControlRoot"]}

package/dist/index.d.mts

@@ -23,7 +23,7 @@ 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, ControlFieldProps, ControlIconProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlTriggerProps, ControlValueProps } from './types/control-components.types.mjs';
+export { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlFieldProps, ControlIconProps, ControlInputProps, ControlLabelProps, ControlLayoutProps, ControlLoaderProps, ControlPlaceholderProps, ControlTriggerProps, ControlValueProps } from './types/control-components.types.mjs';
 import 'react';
 import 'react-native';
 import '@impulse-ui-native/theme';

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

@@ -1,11 +1,12 @@
 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';
+import { FlexProps, DimensionProps, SpacingProps, ComponentSize, FieldVariant } from '@impulse-ui-native/theme';
 import { PressableCoreProps } from './button.types.mjs';
 import { SpinnerProps } from './spinner.types.mjs';
 
-interface ControlComponentCommonProps {
+type ControlLayoutProps = FlexProps & DimensionProps & SpacingProps;
+interface ControlComponentCommonProps extends ControlLayoutProps {
     placeholder?: string;
     label?: string;
     PrefixIcon?: IconProps["icon"];
@@ -25,7 +26,7 @@ type ControlContextData = ControlComponentProps;
 type ControlContainerProps = ViewProps;
 type ControlTriggerProps = PressableCoreProps;
 type ControlIconProps = IconProps;
-interface ControlFieldProps extends Partial<ControlComponentProps> {
+interface ControlFieldProps extends Partial<ControlComponentProps>, ControlLayoutProps {
     children?: ReactNode;
     label?: string;
     onPress?: PressableCoreProps["onPress"];
@@ -46,4 +47,4 @@ type ControlPlaceholderProps = TextProps;
 type ControlValueProps = TextProps;
 type ControlLoaderProps = SpinnerProps;
 
-export type { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlFieldProps, ControlIconProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlTriggerProps, ControlValueProps };
+export type { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlFieldProps, ControlIconProps, ControlInputProps, ControlLabelProps, ControlLayoutProps, ControlLoaderProps, ControlPlaceholderProps, ControlTriggerProps, ControlValueProps };

package/dist/types/index.d.mts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/primitives",
-  "version": "11.0.1",
+  "version": "11.1.0",
   "description": "Foundational UI primitives for building ImpulseUI Native components.",
   "keywords": [
     "react-native",
@@ -28,9 +28,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/theme": "11.0.1",
-    "@impulse-ui-native/icon": "11.0.1",
-    "@impulse-ui-native/core": "11.0.1"
+    "@impulse-ui-native/theme": "11.1.0",
+    "@impulse-ui-native/icon": "11.1.0",
+    "@impulse-ui-native/core": "11.1.0"
   },
   "devDependencies": {
     "@impulse-ui-native/eslint-config": "1.0.0",

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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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":[]}