@vellira-ui/react-native 2.44.4 → 2.45.0

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, } fr
 export { Tabs } from './components/Tabs';
 export type { TooltipContentProps, TooltipProps, TooltipRootProps, TooltipTriggerProps, } from './components/Tooltip';
 export { Tooltip } from './components/Tooltip';
-export type { FormFieldProps } from './patterns/FormField';
+export type { FormFieldControlProps, FormFieldDescriptionProps, FormFieldLabelProps, FormFieldMessageProps, FormFieldProps, } from './patterns/FormField';
 export { FormField } from './patterns/FormField';
 export type { ButtonProps } from './primitives/Button';
 export { Button } from './primitives/Button';

package/dist/index.js

@@ -1789,7 +1789,7 @@ const createStyles$10 = (theme) => StyleSheet.create({
 		alignItems: "flex-start",
 		gap: theme.tokens.spacing[2]
 	},
-	pressablePressed: { opacity: .8 },
+	pressablePressed: { opacity: theme.components.radio.motion.pressedOpacity },
 	pressableDisabled: { opacity: 1 },
 	control: {
 		alignItems: "center",
@@ -1799,14 +1799,6 @@ const createStyles$10 = (theme) => StyleSheet.create({
 		borderColor: theme.components.radio.default.border,
 		backgroundColor: theme.components.radio.default.bg
 	},
-	controlChecked: {
-		borderColor: theme.components.radio.primary.default.border,
-		backgroundColor: theme.components.radio.primary.default.bg
-	},
-	controlCheckedPressed: {
-		borderColor: theme.components.radio.primary.pressed.border,
-		backgroundColor: theme.components.radio.primary.pressed.bg
-	},
 	controlInvalid: { borderColor: theme.components.radio.invalid.border },
 	controlDisabled: {
 		borderColor: theme.components.radio.disabled.border,
@@ -1820,7 +1812,6 @@ const createStyles$10 = (theme) => StyleSheet.create({
 		borderRadius: theme.tokens.radius.full,
 		backgroundColor: theme.components.radio.primary.default.fg
 	},
-	indicatorPressed: { backgroundColor: theme.components.radio.primary.pressed.fg },
 	indicatorDisabled: { backgroundColor: theme.components.radio.selectedDisabled.fg },
 	content: {
 		flexShrink: 1,
@@ -1830,8 +1821,6 @@ const createStyles$10 = (theme) => StyleSheet.create({
 		color: theme.components.radio.default.fg,
 		fontFamily: theme.tokens.typography.family.regular
 	},
-	labelChecked: { color: theme.components.radio.primary.default.labelFg },
-	labelCheckedPressed: { color: theme.components.radio.primary.pressed.labelFg },
 	labelInvalid: { color: theme.components.radio.invalid.fg },
 	description: {
 		color: theme.components.formField.description.fg,
@@ -1845,16 +1834,6 @@ const createStyles$10 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/primitives/Radio/Radio.tsx
-const controlSizeBySize = {
-	sm: 14,
-	md: 16,
-	lg: 20
-};
-const indicatorSizeBySize = {
-	sm: 6,
-	md: 8,
-	lg: 10
-};
 const nativePointerEventsNone$4 = Platform.OS === "web" ? void 0 : { pointerEvents: "none" };
 const webPointerEventsNone$4 = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: disabledProp = false, required: requiredProp = false, size: sizeProp, color: colorProp, onCheckedChange, label, description, icon, error, accessibilityLabel, accessibilityHint, containerStyle, labelStyle, descriptionStyle, errorStyle, style, ...rest }, ref) => {
@@ -1874,29 +1853,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 	const resolvedSize = sizeProp ?? group?.size ?? "md";
 	const resolvedColor = colorProp ?? group?.color ?? "primary";
 	const radioColor = theme.components.radio[resolvedColor];
-	const controlSize = controlSizeBySize[resolvedSize];
-	const indicatorSize = indicatorSizeBySize[resolvedSize];
-	const typographySize = {
-		sm: {
-			labelSize: theme.tokens.typography.size.sm,
-			labelLineHeight: theme.tokens.typography.lineHeight.sm,
-			descriptionSize: theme.tokens.typography.size.xs,
-			descriptionLineHeight: theme.tokens.typography.lineHeight.xs
-		},
-		md: {
-			labelSize: theme.tokens.typography.size.md,
-			labelLineHeight: theme.tokens.typography.lineHeight.md,
-			descriptionSize: theme.tokens.typography.size.sm,
-			descriptionLineHeight: theme.tokens.typography.lineHeight.sm
-		},
-		lg: {
-			labelSize: theme.tokens.typography.size.lg,
-			labelLineHeight: theme.tokens.typography.lineHeight.lg,
-			descriptionSize: theme.tokens.typography.size.md,
-			descriptionLineHeight: theme.tokens.typography.lineHeight.md
-		}
-	}[resolvedSize];
-	const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
+	const radioSize = theme.components.radio.size[resolvedSize];
+	const controlMarginTop = (radioSize.labelLineHeight - radioSize.controlSize) / 2;
 	useEffect(() => {
 		if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) console.warn("Radio requires either a visible label or accessibilityLabel.");
 	}, [accessibilityLabel, label]);
@@ -1941,8 +1899,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					styles.control,
 					webPointerEventsNone$4,
 					{
-						width: controlSize,
-						height: controlSize,
+						width: radioSize.controlSize,
+						height: radioSize.controlSize,
 						marginTop: controlMarginTop
 					},
 					resolvedChecked && {
@@ -1952,7 +1910,7 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					resolvedChecked && state.pressed && !resolvedDisabled && {
 						backgroundColor: radioColor.pressed.bg,
 						borderColor: radioColor.pressed.border,
-						transform: [{ scale: .96 }]
+						transform: [{ scale: theme.components.radio.motion.pressedScale }]
 					},
 					resolvedInvalid && styles.controlInvalid,
 					resolvedDisabled && styles.controlDisabled,
@@ -1961,8 +1919,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 				children: resolvedChecked && (icon ?? /* @__PURE__ */ jsx(View, { style: [
 					styles.indicator,
 					{
-						width: indicatorSize,
-						height: indicatorSize,
+						width: radioSize.indicatorSize,
+						height: radioSize.indicatorSize,
 						backgroundColor: state.pressed && !resolvedDisabled ? radioColor.pressed.fg : radioColor.default.fg
 					},
 					resolvedDisabled && styles.indicatorDisabled
@@ -1974,8 +1932,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					style: [
 						styles.label,
 						{
-							fontSize: typographySize.labelSize,
-							lineHeight: typographySize.labelLineHeight
+							fontSize: radioSize.labelFontSize,
+							lineHeight: radioSize.labelLineHeight
 						},
 						resolvedChecked && { color: radioColor.default.labelFg },
 						resolvedChecked && state.pressed && !resolvedDisabled && { color: radioColor.pressed.labelFg },
@@ -1988,8 +1946,8 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 					style: [
 						styles.description,
 						{
-							fontSize: typographySize.descriptionSize,
-							lineHeight: typographySize.descriptionLineHeight
+							fontSize: radioSize.descriptionFontSize,
+							lineHeight: radioSize.descriptionLineHeight
 						},
 						resolvedDisabled && styles.textDisabled,
 						descriptionStyle
@@ -2002,9 +1960,9 @@ const Radio = forwardRef(({ value, checked, defaultChecked = false, disabled: di
 			style: [
 				styles.error,
 				{
-					marginLeft: controlSize + theme.tokens.spacing[2],
-					fontSize: typographySize.descriptionSize,
-					lineHeight: typographySize.descriptionLineHeight
+					marginLeft: radioSize.controlSize + theme.tokens.spacing[2],
+					fontSize: radioSize.descriptionFontSize,
+					lineHeight: radioSize.descriptionLineHeight
 				},
 				errorStyle
 			],
@@ -2037,6 +1995,13 @@ const createStyles$9 = (theme) => StyleSheet.create({
 		fontWeight: fontWeight$2(theme.tokens.typography.weight.medium),
 		lineHeight: theme.components.formField.size.md.labelLineHeight
 	},
+	labelRow: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "flex-start",
+		gap: theme.components.formField.size.md.gap
+	},
+	labelAction: { flexShrink: 0 },
 	labelDisabled: { color: theme.components.formField.disabled.labelFg },
 	required: {
 		marginLeft: theme.tokens.spacing[1],
@@ -2073,12 +2038,15 @@ const createStyles$9 = (theme) => StyleSheet.create({
 		minWidth: 0,
 		alignSelf: "stretch"
 	},
-	error: {
-		color: theme.components.formField.helperText.error.fg,
+	message: {
+		color: theme.components.formField.helperText.default.fg,
 		fontFamily: theme.tokens.typography.family.regular,
 		fontSize: theme.components.formField.size.md.helperTextFontSize,
 		lineHeight: theme.components.formField.size.md.helperTextLineHeight
 	},
+	messageSuccess: { color: theme.components.formField.helperText.success.fg },
+	messageWarning: { color: theme.components.formField.helperText.warning.fg },
+	messageDanger: { color: theme.components.formField.helperText.error.fg },
 	helperTextDisabled: { color: theme.components.formField.disabled.helperTextFg }
 });
 //#endregion
@@ -2087,29 +2055,92 @@ const FormFieldContext = createContext(null);
 const useFormFieldContext = () => useContext(FormFieldContext);
 //#endregion
 //#region src/patterns/FormField/FormField.tsx
-function FormField({ id, label, description, error, required = false, disabled = false, invalid = false, size = "md", labelInfo, optionalText, children, style, controlStyle, labelStyle, descriptionStyle, errorStyle, ...rest }) {
+function createFormFieldSlot(name, displayName) {
+	const Slot = () => null;
+	Slot.__velliraFormFieldPart = name;
+	Slot.displayName = displayName;
+	return Slot;
+}
+function parseFormFieldChildren(children) {
+	const fallbackChildren = [];
+	const parsed = { hasSlots: false };
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) {
+			if (child !== null && child !== void 0 && child !== false) fallbackChildren.push(child);
+			return;
+		}
+		switch (child.type.__velliraFormFieldPart) {
+			case "label":
+				parsed.hasSlots = true;
+				parsed.label = child.props;
+				return;
+			case "description":
+				parsed.hasSlots = true;
+				parsed.description = child.props;
+				return;
+			case "control":
+				parsed.hasSlots = true;
+				parsed.control = child.props;
+				return;
+			case "message":
+				parsed.hasSlots = true;
+				parsed.message = child.props;
+				return;
+			default: fallbackChildren.push(child);
+		}
+	});
+	if (fallbackChildren.length > 0) parsed.fallbackChildren = fallbackChildren.length === 1 ? fallbackChildren[0] : fallbackChildren;
+	return parsed;
+}
+function FormFieldRoot({ id, label, description, error, message, messageTone, messageLive, required = false, disabled = false, invalid = false, size = "md", labelInfo, labelAction, optionalText, children, style, controlStyle, labelStyle, descriptionStyle, errorStyle, messageStyle, ...rest }) {
+	const parsedChildren = parseFormFieldChildren(children);
+	const resolvedLabel = label ?? parsedChildren.label?.children;
+	const resolvedDescription = description ?? parsedChildren.description?.children;
+	const resolvedMessage = message ?? parsedChildren.message?.children;
+	const resolvedMessageTone = messageTone ?? parsedChildren.message?.tone ?? "neutral";
+	const resolvedMessageLive = messageLive ?? parsedChildren.message?.live ?? "off";
+	const resolvedLabelInfo = labelInfo ?? parsedChildren.label?.info;
+	const resolvedLabelAction = labelAction ?? parsedChildren.label?.action;
+	const resolvedOptionalText = optionalText ?? parsedChildren.label?.optionalText;
+	const resolvedChildren = parsedChildren.hasSlots ? parsedChildren.control?.children ?? parsedChildren.fallbackChildren : children;
 	const { theme } = useTheme();
 	const styles = useThemeStyles(createStyles$9);
 	const sizeTokens = theme.components.formField.size[size];
 	const generatedId = useId();
 	const controlId = id ?? generatedId;
-	const labelId = label ? `${controlId}-label` : void 0;
-	const descriptionId = description ? `${controlId}-description` : void 0;
+	const labelId = resolvedLabel ? `${controlId}-label` : void 0;
+	const descriptionId = resolvedDescription ? `${controlId}-description` : void 0;
 	const errorId = error ? `${controlId}-error` : void 0;
+	const messageId = !error && resolvedMessage ? `${controlId}-message` : void 0;
+	const isInvalid = invalid || Boolean(error);
+	const visibleMessage = error ?? resolvedMessage;
+	const visibleTone = error ? "danger" : resolvedMessageTone;
 	const contextValue = {
 		controlId,
 		labelId,
 		descriptionId,
 		errorId,
+		messageId,
 		description,
 		error,
+		message: resolvedMessage,
 		required,
 		disabled,
-		invalid: invalid || Boolean(error),
+		invalid: isInvalid,
 		size,
 		ariaLabelledBy: labelId,
-		ariaDescribedBy: [descriptionId, errorId].filter(Boolean).join(" ") || void 0
+		ariaDescribedBy: [
+			descriptionId,
+			errorId,
+			messageId
+		].filter(Boolean).join(" ") || void 0
 	};
+	const messageToneStyle = {
+		neutral: void 0,
+		success: styles.messageSuccess,
+		warning: styles.messageWarning,
+		danger: styles.messageDanger
+	}[visibleTone];
 	return /* @__PURE__ */ jsxs(View, {
 		...rest,
 		accessibilityState: disabled ? { disabled: true } : void 0,
@@ -2119,54 +2150,61 @@ function FormField({ id, label, description, error, required = false, disabled =
 			style
 		],
 		children: [
-			label && (typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsxs(Text, {
-				style: [
-					styles.label,
-					{
-						fontSize: sizeTokens.labelFontSize,
-						lineHeight: sizeTokens.labelLineHeight
-					},
-					disabled && styles.labelDisabled,
-					labelStyle
-				],
-				children: [
-					label,
-					required && /* @__PURE__ */ jsx(Text, {
-						style: styles.required,
-						accessible: false,
-						importantForAccessibility: "no",
-						children: " *"
-					}),
-					!required && optionalText && /* @__PURE__ */ jsx(Text, {
-						style: [styles.optional, {
-							fontSize: sizeTokens.optionalFontSize,
-							lineHeight: sizeTokens.optionalLineHeight
-						}],
-						children: optionalText
-					}),
-					labelInfo && /* @__PURE__ */ jsx(Text, {
-						style: [styles.labelInfo, {
-							fontSize: sizeTokens.labelInfoFontSize,
-							lineHeight: sizeTokens.labelInfoSize
-						}],
-						children: labelInfo
-					})
-				]
-			}) : /* @__PURE__ */ jsxs(View, {
-				style: styles.customLabel,
-				children: [
-					label,
-					required && /* @__PURE__ */ jsx(Text, {
-						style: styles.required,
-						accessible: false,
-						importantForAccessibility: "no",
-						children: "*"
-					}),
-					!required && optionalText,
-					labelInfo
-				]
-			})),
-			description && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx(Text, {
+			(resolvedLabel || resolvedLabelAction) && /* @__PURE__ */ jsxs(View, {
+				style: [styles.labelRow, { gap: sizeTokens.gap }],
+				children: [resolvedLabel && (typeof resolvedLabel === "string" || typeof resolvedLabel === "number" ? /* @__PURE__ */ jsxs(Text, {
+					style: [
+						styles.label,
+						{
+							fontSize: sizeTokens.labelFontSize,
+							lineHeight: sizeTokens.labelLineHeight
+						},
+						disabled && styles.labelDisabled,
+						parsedChildren.label?.style,
+						labelStyle
+					],
+					children: [
+						resolvedLabel,
+						required && /* @__PURE__ */ jsx(Text, {
+							style: styles.required,
+							accessible: false,
+							importantForAccessibility: "no",
+							children: " *"
+						}),
+						!required && resolvedOptionalText && /* @__PURE__ */ jsx(Text, {
+							style: [styles.optional, {
+								fontSize: sizeTokens.optionalFontSize,
+								lineHeight: sizeTokens.optionalLineHeight
+							}],
+							children: resolvedOptionalText
+						}),
+						resolvedLabelInfo && /* @__PURE__ */ jsx(Text, {
+							style: [styles.labelInfo, {
+								fontSize: sizeTokens.labelInfoFontSize,
+								lineHeight: sizeTokens.labelInfoSize
+							}],
+							children: resolvedLabelInfo
+						})
+					]
+				}) : /* @__PURE__ */ jsxs(View, {
+					style: styles.customLabel,
+					children: [
+						resolvedLabel,
+						required && /* @__PURE__ */ jsx(Text, {
+							style: styles.required,
+							accessible: false,
+							importantForAccessibility: "no",
+							children: "*"
+						}),
+						!required && resolvedOptionalText,
+						resolvedLabelInfo
+					]
+				})), resolvedLabelAction && /* @__PURE__ */ jsx(View, {
+					style: styles.labelAction,
+					children: resolvedLabelAction
+				})]
+			}),
+			resolvedDescription && (typeof resolvedDescription === "string" || typeof resolvedDescription === "number" ? /* @__PURE__ */ jsx(Text, {
 				style: [
 					styles.description,
 					{
@@ -2174,40 +2212,55 @@ function FormField({ id, label, description, error, required = false, disabled =
 						lineHeight: sizeTokens.descriptionLineHeight
 					},
 					disabled && styles.descriptionDisabled,
+					parsedChildren.description?.style,
 					descriptionStyle
 				],
-				children: description
-			}) : description),
+				children: resolvedDescription
+			}) : resolvedDescription),
 			/* @__PURE__ */ jsx(FormFieldContext.Provider, {
 				value: contextValue,
 				children: /* @__PURE__ */ jsx(View, {
 					style: [
 						styles.control,
 						{ gap: sizeTokens.gap },
+						parsedChildren.control?.style,
 						controlStyle
 					],
-					children
+					children: resolvedChildren
 				})
 			}),
-			error && (typeof error === "string" || typeof error === "number" ? /* @__PURE__ */ jsx(Text, {
-				accessibilityLiveRegion: "polite",
+			visibleMessage && (typeof visibleMessage === "string" || typeof visibleMessage === "number" ? /* @__PURE__ */ jsx(Text, {
+				accessibilityLiveRegion: error || resolvedMessageLive === "polite" ? "polite" : void 0,
 				style: [
-					styles.error,
+					styles.message,
 					{
 						fontSize: sizeTokens.helperTextFontSize,
 						lineHeight: sizeTokens.helperTextLineHeight
 					},
+					messageToneStyle,
 					disabled && styles.helperTextDisabled,
-					errorStyle
+					!error && parsedChildren.message?.style,
+					error ? errorStyle : messageStyle
 				],
-				children: error
+				children: visibleMessage
 			}) : /* @__PURE__ */ jsx(View, {
-				accessibilityLiveRegion: "polite",
-				children: error
+				accessibilityLiveRegion: error || resolvedMessageLive === "polite" ? "polite" : void 0,
+				children: visibleMessage
 			}))
 		]
 	});
 }
+const FormFieldLabel = createFormFieldSlot("label", "FormField.Label");
+const FormFieldDescription = createFormFieldSlot("description", "FormField.Description");
+const FormFieldControl = createFormFieldSlot("control", "FormField.Control");
+const FormFieldMessage = createFormFieldSlot("message", "FormField.Message");
+const FormField = Object.assign(FormFieldRoot, {
+	Label: FormFieldLabel,
+	Description: FormFieldDescription,
+	Control: FormFieldControl,
+	Message: FormFieldMessage,
+	displayName: "FormField"
+});
 //#endregion
 //#region src/components/RadioGroup/RadioGroup.styles.ts
 const createStyles$8 = (_theme) => StyleSheet.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.44.4",
+  "version": "2.45.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",