@vellira-ui/react-native 2.44.5 → 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

@@ -1995,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],
@@ -2031,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
@@ -2045,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,
@@ -2077,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,
 					{
@@ -2132,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.5",
+  "version": "2.45.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",