@vellira-ui/react-native 2.117.2 → 2.118.0

package/dist/index.d.ts

@@ -31,6 +31,8 @@ export type { RadioProps } from './primitives/Radio';
 export { Radio } from './primitives/Radio';
 export type { SwitchProps } from './primitives/Switch';
 export { Switch } from './primitives/Switch';
+export type { TextareaProps } from './primitives/Textarea';
+export { Textarea } from './primitives/Textarea';
 export type { NativeThemeName, ThemeProviderProps } from './theme';
 export { nativeThemes, ThemeProvider, useTheme } from './theme';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -799,7 +799,7 @@ function useThemeStyles(createStyles) {
 }
 //#endregion
 //#region src/components/Accordion/Accordion.styles.ts
-const createStyles$23 = (theme) => {
+const createStyles$24 = (theme) => {
 	const accordion = theme.components.accordion;
 	return StyleSheet.create({
 		root: {
@@ -857,7 +857,7 @@ const createStyles$23 = (theme) => {
 //#region src/components/Accordion/Content/AccordionContent.tsx
 function AccordionContent({ children, forceMount = false, hidden = false }) {
 	const { theme } = useTheme();
-	const styles = createStyles$23(theme);
+	const styles = createStyles$24(theme);
 	if (hidden && !forceMount) return null;
 	return /* @__PURE__ */ jsx(View, {
 		style: [styles.content, hidden && styles.contentHidden],
@@ -868,7 +868,7 @@ function AccordionContent({ children, forceMount = false, hidden = false }) {
 //#region src/components/Accordion/Item/AccordionItem.tsx
 function AccordionItem({ children }) {
 	const { theme } = useTheme();
-	const styles = createStyles$23(theme);
+	const styles = createStyles$24(theme);
 	return /* @__PURE__ */ jsx(View, {
 		style: styles.item,
 		children
@@ -878,7 +878,7 @@ function AccordionItem({ children }) {
 //#region src/components/Accordion/Trigger/AccordionTrigger.tsx
 function AccordionTrigger({ children, disabled = false, expanded = false, onActivate }) {
 	const { theme } = useTheme();
-	const styles = createStyles$23(theme);
+	const styles = createStyles$24(theme);
 	const accordionTokens = theme.components.accordion;
 	return /* @__PURE__ */ jsx(Pressable, {
 		disabled,
@@ -920,7 +920,7 @@ function AccordionRoot(props) {
 	const type = props.type ?? "single";
 	const collapsible = props.type === "multiple" ? false : props.collapsible ?? false;
 	const { theme } = useTheme();
-	const styles = createStyles$23(theme);
+	const styles = createStyles$24(theme);
 	const isControlled = value !== void 0;
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? (type === "multiple" ? [] : ""));
 	const expandedValues = useMemo(() => {
@@ -995,7 +995,7 @@ DropdownContext.displayName = "DropdownContext";
 //#endregion
 //#region src/components/Dropdown/Content/DropdownContent.styles.ts
 const getDropdownBackdropBackgroundColor = (theme, presentation) => presentation === "popover" ? "transparent" : theme.semantic.overlay.backdrop;
-const createStyles$22 = (theme) => {
+const createStyles$23 = (theme) => {
 	const canonical = theme.components.dropdown.content;
 	const output = resolveComponentTokenPlatformOutputs(theme, canonical);
 	const nativeShadow = output.reactNative.shadow;
@@ -1084,7 +1084,7 @@ const webPointerEventsBoxNone$1 = Platform.OS === "web" ? { pointerEvents: "box-
 function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 	const { open, color, presentation, positionReady, zIndex, position, searchable, searchValue, searchPlaceholder, searchAccessibilityLabel, requestClose, getOutsidePressProps, onSearchChange, onFloatingLayout } = useDropdownContext();
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$22);
+	const styles = useThemeStyles(createStyles$23);
 	const colorPalette = theme.components.dropdown[color];
 	const isSheet = presentation === "sheet";
 	const isPopover = presentation === "popover";
@@ -1590,7 +1590,7 @@ function useNativeFloatingPosition(placement = "top", offset = 8) {
 }
 //#endregion
 //#region src/components/Dropdown/Dropdown.styles.ts
-const createStyles$21 = (theme) => StyleSheet.create({
+const createStyles$22 = (theme) => StyleSheet.create({
 	root: { alignSelf: Platform.select({
 		web: "auto",
 		default: "flex-start"
@@ -1607,7 +1607,7 @@ const createStyles$21 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Group/DropdownGroup.styles.ts
-const createStyles$20 = (theme) => StyleSheet.create({ groupLabel: {
+const createStyles$21 = (theme) => StyleSheet.create({ groupLabel: {
 	paddingHorizontal: theme.tokens.spacing[4],
 	paddingVertical: theme.tokens.spacing[2],
 	color: theme.components.dropdown.groupLabel.fg,
@@ -1619,7 +1619,7 @@ const createStyles$20 = (theme) => StyleSheet.create({ groupLabel: {
 //#endregion
 //#region src/components/Dropdown/Group/DropdownGroup.tsx
 function DropdownGroup({ label }) {
-	const styles = useThemeStyles(createStyles$20);
+	const styles = useThemeStyles(createStyles$21);
 	return /* @__PURE__ */ jsx(Text, {
 		accessibilityRole: "header",
 		style: styles.groupLabel,
@@ -1634,7 +1634,7 @@ const devWarning = (condition, message) => {
 };
 //#endregion
 //#region src/components/Dropdown/Item/DropdownItem.styles.ts
-const createStyles$19 = (theme) => StyleSheet.create({
+const createStyles$20 = (theme) => StyleSheet.create({
 	item: {
 		minWidth: 0,
 		minHeight: 44,
@@ -1660,7 +1660,7 @@ const createStyles$19 = (theme) => StyleSheet.create({
 function DropdownItem({ label, value, asChild = false, children, color = "default", icon, disabled = false, textWrap = "truncate", onSelect }) {
 	const { color: rootColor, itemStyle, textStyle } = useDropdownContext();
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$19);
+	const styles = useThemeStyles(createStyles$20);
 	const rootColorPalette = theme.components.dropdown[rootColor];
 	const itemColorPalette = color === "default" ? void 0 : theme.components.dropdown[color];
 	const renderColoredNode = (node, color) => {
@@ -1728,20 +1728,20 @@ function DropdownItem({ label, value, asChild = false, children, color = "defaul
 DropdownItem.displayName = "DropdownItem";
 //#endregion
 //#region src/components/Dropdown/Separator/DropdownSeparator.styles.ts
-const createStyles$18 = (theme) => StyleSheet.create({ separator: {
+const createStyles$19 = (theme) => StyleSheet.create({ separator: {
 	height: 1,
 	backgroundColor: theme.components.dropdown.separator.bg
 } });
 //#endregion
 //#region src/components/Dropdown/Separator/DropdownSeparator.tsx
 function DropdownSeparator() {
-	const styles = useThemeStyles(createStyles$18);
+	const styles = useThemeStyles(createStyles$19);
 	return /* @__PURE__ */ jsx(View, { style: styles.separator });
 }
 DropdownSeparator.displayName = "DropdownSeparator";
 //#endregion
 //#region src/components/Dropdown/Trigger/DropdownTrigger.styles.ts
-const createStyles$17 = (theme) => StyleSheet.create({
+const createStyles$18 = (theme) => StyleSheet.create({
 	trigger: {
 		alignItems: "center",
 		justifyContent: "center",
@@ -1830,7 +1830,7 @@ const createStyles$17 = (theme) => StyleSheet.create({
 function DropdownTrigger({ asChild = false, label, trigger, children, icon, arrowIcon, showArrow = true, triggerStyle, triggerRef, accessibilityLabel, accessibilityHint }) {
 	const { open, color, disabled, size, toggle } = useDropdownContext();
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$17);
+	const styles = useThemeStyles(createStyles$18);
 	const colorPalette = theme.components.dropdown[color];
 	const textSizeStyle = {
 		sm: styles.textSm,
@@ -1952,7 +1952,7 @@ DropdownTrigger.displayName = "DropdownTrigger";
 //#endregion
 //#region src/components/Dropdown/Root/DropdownRoot.tsx
 function DropdownRoot({ children, label = "Menu", trigger, icon, arrowIcon, showArrow = true, open, defaultOpen = false, onOpenChange, presentation = "auto", placement = "bottom-start", offset = 8, closeOnSelect = true, color = "primary", disabled = false, loading = false, loadingText = "Loading actions...", searchable = false, command = false, searchValue, defaultSearchValue = "", searchPlaceholder, onSearch, empty, size = "md", style, triggerStyle, contentStyle, itemStyle, textStyle, accessibilityLabel, accessibilityHint }) {
-	const styles = useThemeStyles(createStyles$21);
+	const styles = useThemeStyles(createStyles$22);
 	const overlayId = useId();
 	const triggerRef = useRef(null);
 	const setTriggerRef = useCallback((node) => {
@@ -2154,7 +2154,7 @@ const Dropdown = Object.assign(DropdownRoot, {
 });
 //#endregion
 //#region src/components/Modal/Body/ModalBody.styles.ts
-const createStyles$16 = (theme) => StyleSheet.create({
+const createStyles$17 = (theme) => StyleSheet.create({
 	body: { paddingBottom: theme.components.modal.body.paddingBottom },
 	text: {
 		color: theme.components.modal.content.fg,
@@ -2181,7 +2181,7 @@ const renderBodyChildren = (children, textStyle) => Children.map(children, (chil
 	return cloneElement(child, { style: [textStyle, child.props.style] });
 });
 const ModalBody = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$16);
+	const styles = useThemeStyles(createStyles$17);
 	return /* @__PURE__ */ jsx(View, {
 		style: [styles.body, style],
 		children: renderBodyChildren(children, styles.text)
@@ -2190,7 +2190,7 @@ const ModalBody = ({ children, style }) => {
 ModalBody.displayName = "ModalBody";
 //#endregion
 //#region src/components/Modal/Header/ModalHeader.styles.ts
-const createStyles$15 = (theme) => StyleSheet.create({
+const createStyles$16 = (theme) => StyleSheet.create({
 	header: {
 		alignItems: "center",
 		flexDirection: "row",
@@ -2240,7 +2240,7 @@ ModalContext.displayName = "ModalContext";
 //#region src/components/Modal/Close/ModalClose.tsx
 const ModalClose = ({ asChild = false, children, accessibilityLabel, style }) => {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$15);
+	const styles = useThemeStyles(createStyles$16);
 	const { onClose } = useModalContext();
 	if ((asChild || children !== void 0) && isValidElement(children)) return cloneElement(children, {
 		accessibilityLabel: children.props.accessibilityLabel ?? accessibilityLabel,
@@ -2266,7 +2266,7 @@ const ModalClose = ({ asChild = false, children, accessibilityLabel, style }) =>
 ModalClose.displayName = "Modal.Close";
 //#endregion
 //#region src/components/Modal/Content/ModalContent.styles.ts
-const createStyles$14 = (theme) => {
+const createStyles$15 = (theme) => {
 	const canonical = theme.components.modal.content;
 	const output = resolveComponentTokenPlatformOutputs(theme, canonical);
 	const nativeShadow = output.reactNative.shadow;
@@ -2301,7 +2301,7 @@ const createStyles$14 = (theme) => {
 //#endregion
 //#region src/components/Modal/Content/ModalContent.tsx
 const ModalContent = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$14);
+	const styles = useThemeStyles(createStyles$15);
 	const { animation, animationProgress, open } = useModalContext();
 	const closedTranslateY = open ? animation === "slide" ? 16 : 8 : 4;
 	const closedScale = open ? .96 : .98;
@@ -2327,7 +2327,7 @@ const ModalContent = ({ children, style }) => {
 ModalContent.displayName = "ModalContent";
 //#endregion
 //#region src/components/Modal/Footer/ModalFooter.styles.ts
-const createStyles$13 = (theme) => StyleSheet.create({ footer: {
+const createStyles$14 = (theme) => StyleSheet.create({ footer: {
 	flexDirection: "row",
 	gap: theme.components.modal.footer.gap,
 	justifyContent: "flex-end",
@@ -2336,7 +2336,7 @@ const createStyles$13 = (theme) => StyleSheet.create({ footer: {
 //#endregion
 //#region src/components/Modal/Footer/ModalFooter.tsx
 const ModalFooter = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$13);
+	const styles = useThemeStyles(createStyles$14);
 	return /* @__PURE__ */ jsx(View, {
 		style: [styles.footer, style],
 		children
@@ -2346,7 +2346,7 @@ ModalFooter.displayName = "ModalFooter";
 //#endregion
 //#region src/components/Modal/Header/ModalDescription.tsx
 const ModalDescription = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$15);
+	const styles = useThemeStyles(createStyles$16);
 	return /* @__PURE__ */ jsx(Text, {
 		style: [styles.description, style],
 		children
@@ -2356,7 +2356,7 @@ ModalDescription.displayName = "Modal.Description";
 //#endregion
 //#region src/components/Modal/Header/ModalHeader.tsx
 const ModalHeader = ({ children, style, textStyle }) => {
-	const styles = useThemeStyles(createStyles$15);
+	const styles = useThemeStyles(createStyles$16);
 	const isPlainTitle = typeof children === "string" || typeof children === "number";
 	return /* @__PURE__ */ jsxs(View, {
 		style: [styles.header, style],
@@ -2377,7 +2377,7 @@ ModalHeader.displayName = "ModalHeader";
 //#endregion
 //#region src/components/Modal/Header/ModalTitle.tsx
 const ModalTitle = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$15);
+	const styles = useThemeStyles(createStyles$16);
 	return /* @__PURE__ */ jsx(Text, {
 		accessibilityRole: "header",
 		style: [styles.title, style],
@@ -2387,7 +2387,7 @@ const ModalTitle = ({ children, style }) => {
 ModalTitle.displayName = "Modal.Title";
 //#endregion
 //#region src/components/Modal/Modal.styles.ts
-const createStyles$12 = (theme) => StyleSheet.create({
+const createStyles$13 = (theme) => StyleSheet.create({
 	overlay: {
 		alignItems: "center",
 		flex: 1,
@@ -2402,7 +2402,7 @@ const createStyles$12 = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Modal/Overlay/ModalOverlay.tsx
 const ModalOverlay = ({ children, overlayStyle }) => {
-	const styles = useThemeStyles(createStyles$12);
+	const styles = useThemeStyles(createStyles$13);
 	const { animation, animationProgress, zIndex, onClose, getOutsidePressProps, shouldRender } = useModalContext();
 	const backdropStyle = animation === "none" ? void 0 : { opacity: animationProgress };
 	return /* @__PURE__ */ jsx(Modal$1, {
@@ -2984,7 +2984,7 @@ function useRadioGroupContext() {
 }
 //#endregion
 //#region src/primitives/Radio/Radio.styles.ts
-const createStyles$11 = (theme) => StyleSheet.create({
+const createStyles$12 = (theme) => StyleSheet.create({
 	root: { alignSelf: Platform.select({
 		web: "auto",
 		default: "flex-start"
@@ -3043,7 +3043,7 @@ const nativePointerEventsNone$3 = Platform.OS === "web" ? void 0 : { pointerEven
 const webPointerEventsNone$3 = 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) => {
 	const { theme } = useTheme();
-	const styles = createStyles$11(theme);
+	const styles = createStyles$12(theme);
 	const group = useRadioGroupContext();
 	const isInsideGroup = group !== null;
 	const [standaloneChecked, setStandaloneChecked] = useControllableState({
@@ -3189,7 +3189,7 @@ RadioGroupItem.displayName = "RadioGroup.Item";
 //#endregion
 //#region src/patterns/FormField/FormField.styles.ts
 const fontWeight$2 = (value) => value;
-const createStyles$10 = (theme) => StyleSheet.create({
+const createStyles$11 = (theme) => StyleSheet.create({
 	root: {
 		width: "100%",
 		minWidth: 0,
@@ -3312,7 +3312,7 @@ function FormFieldRoot({ id, label, description, error, message, messageTone, me
 	const resolvedOptionalText = optionalText ?? parsedChildren.label?.optionalText;
 	const resolvedChildren = parsedChildren.hasSlots ? parsedChildren.control?.children ?? parsedChildren.fallbackChildren : children;
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$10);
+	const styles = useThemeStyles(createStyles$11);
 	const sizeTokens = theme.components.formField.size[size];
 	const generatedId = useId();
 	const controlId = id ?? generatedId;
@@ -3471,7 +3471,7 @@ const FormField = Object.assign(FormFieldRoot, {
 });
 //#endregion
 //#region src/components/RadioGroup/RadioGroup.styles.ts
-const createStyles$9 = (_theme) => StyleSheet.create({
+const createStyles$10 = (_theme) => StyleSheet.create({
 	items: {
 		width: "100%",
 		minWidth: 0,
@@ -3487,7 +3487,7 @@ const createStyles$9 = (_theme) => StyleSheet.create({
 //#region src/components/RadioGroup/Root/RadioGroupRoot.tsx
 const RadioGroupRoot = forwardRef(({ value, defaultValue = "", onValueChange, disabled = false, required = false, invalid = false, size = "md", color = "primary", orientation = "vertical", label, description, error, children, style, itemsStyle, labelStyle, descriptionStyle, errorStyle, accessibilityLabel, accessibilityHint, ...rest }, ref) => {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$9);
+	const styles = useThemeStyles(createStyles$10);
 	const radioGroupSizeTokens = theme.components.radioGroup.size[size];
 	const [selectedValue, setSelectedValue] = useControllableState({
 		value,
@@ -5314,7 +5314,7 @@ const useTabs = () => {
 TabsContext.displayName = "TabsContext";
 //#endregion
 //#region src/components/Tabs/Content/TabsContent.styles.ts
-const createStyles$8 = (theme) => StyleSheet.create({
+const createStyles$9 = (theme) => StyleSheet.create({
 	panel: {
 		width: "100%",
 		minWidth: 0,
@@ -5333,7 +5333,7 @@ const createStyles$8 = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Tabs/Content/TabsContent.tsx
 const TabsContent = ({ value, children, forceMount = false, style }) => {
-	const styles = useThemeStyles(createStyles$8);
+	const styles = useThemeStyles(createStyles$9);
 	const { value: selectedValue, orientation, keepMounted, lazyMount } = useTabs();
 	const isActive = selectedValue === value;
 	const [hasMounted, setHasMounted] = useState(isActive);
@@ -5571,7 +5571,7 @@ const TabsIndicator = ({ children, style }) => {
 TabsIndicator.displayName = "Tabs.Indicator";
 //#endregion
 //#region src/components/Tabs/List/TabsList.styles.ts
-const createStyles$7 = (theme) => StyleSheet.create({
+const createStyles$8 = (theme) => StyleSheet.create({
 	list: {
 		position: "relative",
 		flexDirection: "row",
@@ -5625,7 +5625,7 @@ const createStyles$7 = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Tabs/List/TabsList.tsx
 const TabsList = ({ children, scrollable: scrollableProp, style }) => {
-	const styles = useThemeStyles(createStyles$7);
+	const styles = useThemeStyles(createStyles$8);
 	const { mode, orientation, variant } = useTabs();
 	const scrollable = scrollableProp ?? false;
 	const listStyle = [
@@ -5655,7 +5655,7 @@ TabsList.displayName = "TabsList";
 //#endregion
 //#region src/components/Tabs/Trigger/TabsTrigger.styles.ts
 const fontWeight$1 = (value) => value;
-const createStyles$6 = (theme) => StyleSheet.create({
+const createStyles$7 = (theme) => StyleSheet.create({
 	tab: {
 		minHeight: 36,
 		minWidth: 44,
@@ -5840,7 +5840,7 @@ const getTriggerStyle = ({ styles, isSm, isLg, isOnlyIcon, isVertical, isPills,
 //#endregion
 //#region src/components/Tabs/Trigger/TabsBadge.tsx
 const TabsBadge = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$6);
+	const styles = useThemeStyles(createStyles$7);
 	const { color } = useTabs();
 	const { theme } = useTheme();
 	const palette = theme.components.tabs[color];
@@ -5860,7 +5860,7 @@ TabsBadge.displayName = "Tabs.Badge";
 //#endregion
 //#region src/components/Tabs/Trigger/TabsIcon.tsx
 const TabsIcon = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$6);
+	const styles = useThemeStyles(createStyles$7);
 	return /* @__PURE__ */ jsx(View, {
 		style: [styles.tabIcon, style],
 		children
@@ -5871,7 +5871,7 @@ TabsIcon.displayName = "Tabs.Icon";
 //#region src/components/Tabs/Trigger/TabsTrigger.tsx
 const TabsTrigger = ({ value, children, asChild = false, icon, badge, description, disabled, style, textStyle }) => {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$6);
+	const styles = useThemeStyles(createStyles$7);
 	const { value: selectedValue, variant, color, size, mode, orientation, disabled: rootDisabled, setValue, registerTrigger, registerTriggerLayout } = useTabs();
 	const isDisabled = rootDisabled || Boolean(disabled);
 	const isActive = selectedValue === value;
@@ -6037,7 +6037,7 @@ const TabsTrigger = ({ value, children, asChild = false, icon, badge, descriptio
 TabsTrigger.displayName = "Tabs.Trigger";
 //#endregion
 //#region src/components/Tabs/Tabs.styles.ts
-const createStyles$5 = (theme) => StyleSheet.create({
+const createStyles$6 = (theme) => StyleSheet.create({
 	root: {
 		width: "100%",
 		minWidth: 0
@@ -6053,7 +6053,7 @@ const createStyles$5 = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Tabs/Root/TabsRoot.tsx
 const TabsRoot = ({ children, value: controlledValue, defaultValue, onValueChange, orientation = "horizontal", mode = "tabs", variant = "line", color = "primary", size = "md", keepMounted = false, lazyMount = false, disabled = false, style }) => {
-	const styles = useThemeStyles(createStyles$5);
+	const styles = useThemeStyles(createStyles$6);
 	const isControlled = controlledValue !== void 0;
 	const [version, setVersion] = useState(0);
 	const [indicatorVersion, setIndicatorVersion] = useState(0);
@@ -6214,7 +6214,7 @@ function TooltipArrow() {
 }
 //#endregion
 //#region src/components/Tooltip/Tooltip.styles.ts
-const createStyles$4 = (theme) => {
+const createStyles$5 = (theme) => {
 	const canonical = theme.components.tooltip.content;
 	const output = resolveComponentTokenPlatformOutputs(theme, canonical);
 	const nativeShadow = output.reactNative.shadow;
@@ -6260,7 +6260,7 @@ const createStyles$4 = (theme) => {
 //#endregion
 //#region src/components/Tooltip/Content/TooltipContent.tsx
 const TooltipContent = ({ children, forceMount = false, withArrow = false, style, textStyle }) => {
-	const styles = useThemeStyles(createStyles$4);
+	const styles = useThemeStyles(createStyles$5);
 	const tooltip = useTooltipContext();
 	const visible = tooltip.open && !tooltip.disabled;
 	if (!forceMount && !visible) return null;
@@ -6529,7 +6529,7 @@ Tooltip.displayName = "Tooltip";
 //#endregion
 //#region src/primitives/Button/Button.styles.ts
 const fontWeight = (value) => value;
-const createStyles$3 = (theme) => StyleSheet.create({
+const createStyles$4 = (theme) => StyleSheet.create({
 	button: {
 		flexDirection: "row",
 		alignItems: "center",
@@ -6597,7 +6597,7 @@ const buttonSizeMap = {
 };
 function Button({ children, color = "primary", appearance = "solid", shape = "pill", disabled = false, loading = false, loadingText, onPress, onFocus, onBlur, onHoverIn, onHoverOut, size = "md", iconStart, iconEnd, badge, shortcut, fullWidth = false, iconOnly: iconOnlyProp = false, style, textStyle, accessibilityLabel, iconSize, testID, ...props }) {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$3);
+	const styles = useThemeStyles(createStyles$4);
 	const controlSize = controlSizes[size];
 	const buttonSize = buttonSizeMap[size];
 	const radius = shape === "square" ? theme.tokens.radius.sm : shape === "rounded" ? theme.tokens.radius.md : theme.tokens.radius.full;
@@ -6731,7 +6731,7 @@ function Button({ children, color = "primary", appearance = "solid", shape = "pi
 }
 //#endregion
 //#region src/primitives/Checkbox/Checkbox.styles.ts
-const createStyles$2 = (theme) => StyleSheet.create({
+const createStyles$3 = (theme) => StyleSheet.create({
 	container: { gap: theme.tokens.spacing[2] },
 	wrapper: {
 		flexDirection: "row",
@@ -6845,7 +6845,7 @@ const iconSizeBySize = {
 };
 const Checkbox = forwardRef(({ label, description, icon, indeterminateIcon, checked, defaultChecked = false, disabled = false, required = false, indeterminate = false, size = "md", color = "primary", labelPosition = "end", onCheckedChange, error, style, accessibilityLabel, accessibilityHint, ...PressableProps }, ref) => {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$2);
+	const styles = useThemeStyles(createStyles$3);
 	const checkboxColor = theme.components.checkbox[color];
 	const boxSizeStyle = {
 		sm: styles.boxSm,
@@ -6963,7 +6963,7 @@ Checkbox.displayName = "Checkbox";
 //#region src/primitives/Input/Input.styles.ts
 const getDisabledPlaceholderTextColor = (theme) => theme.components.input.disabled.placeholder;
 const resolveRingColor = (ring) => typeof ring === "string" ? ring : ring.color;
-const createStyles$1 = (theme) => StyleSheet.create({
+const createStyles$2 = (theme) => StyleSheet.create({
 	inputWrapper: {
 		position: "relative",
 		width: "100%",
@@ -7154,7 +7154,7 @@ const nativePointerEventsNone = Platform.OS === "web" ? void 0 : { pointerEvents
 const webPointerEventsNone = Platform.OS === "web" ? { pointerEvents: "none" } : void 0;
 const Input = forwardRef(({ label, description, value, defaultValue, onValueChange, placeholder, size, error, invalid = false, disabled = false, required = false, loading = false, readOnly = false, type = "text", startIcon, endIcon, startIconTone = "default", endIconTone = "default", clearIcon, clearIconTone = "danger", iconSize, containerStyle, inputStyle, keyboardType, secureTextEntry, autoCapitalize, autoCorrect, onBlur, onFocus, accessibilityLabel, accessibilityHint, testID, autoFocus, maxLength, clearable, onClear, color = "primary", variant = "outline", revealPassword = false, showCounter: _showCounter, mask, format, parse, ...props }, ref) => {
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$1);
+	const styles = useThemeStyles(createStyles$2);
 	const field = useFormFieldContext();
 	const hasOwnField = Boolean(label || description || error);
 	const [isFocused, setIsFocused] = useState(false);
@@ -7344,7 +7344,7 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 Input.displayName = "Input";
 //#endregion
 //#region src/primitives/Switch/Switch.styles.ts
-const createStyles = (theme) => StyleSheet.create({
+const createStyles$1 = (theme) => StyleSheet.create({
 	root: {
 		width: theme.components.switch.geometry.trackWidth,
 		height: theme.components.switch.geometry.trackHeight,
@@ -7386,7 +7386,7 @@ const createStyles = (theme) => StyleSheet.create({
 //#endregion
 //#region src/primitives/Switch/Switch.tsx
 function Switch({ accessibilityLabel = "Switch", checked, defaultChecked = false, disabled = false, required = false, invalid = false, onCheckedChange }) {
-	const styles = useThemeStyles(createStyles);
+	const styles = useThemeStyles(createStyles$1);
 	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
 	const isControlled = checked !== void 0;
 	const resolvedChecked = isControlled ? checked : uncontrolledChecked;
@@ -7422,4 +7422,152 @@ function Switch({ accessibilityLabel = "Switch", checked, defaultChecked = false
 	});
 }
 //#endregion
-export { Accordion, Button, Checkbox, Dropdown, FormField, Input, Modal, Popover, Portal, PortalProvider, Radio, RadioGroup, Select, Switch, Tabs, ThemeProvider, Tooltip, nativeThemes, useTheme };
+//#region src/primitives/Textarea/Textarea.styles.ts
+const createStyles = (theme) => StyleSheet.create({
+	textarea: {
+		width: "100%",
+		minWidth: 0,
+		alignSelf: "stretch",
+		color: theme.components.textarea.default.fg,
+		fontFamily: theme.tokens.typography.family.regular,
+		backgroundColor: theme.components.textarea.default.bg,
+		borderColor: theme.components.textarea.default.border,
+		borderRadius: theme.tokens.radius.md,
+		borderWidth: 1,
+		textAlignVertical: "top"
+	},
+	sm: {
+		paddingHorizontal: theme.tokens.spacing[3],
+		paddingVertical: theme.tokens.spacing[2]
+	},
+	md: {
+		paddingHorizontal: theme.tokens.spacing[4],
+		paddingVertical: theme.tokens.spacing[3]
+	},
+	lg: {
+		paddingHorizontal: theme.tokens.spacing[5],
+		paddingVertical: theme.tokens.spacing[4]
+	},
+	focused: {
+		color: theme.components.textarea.hover.fg,
+		backgroundColor: theme.components.textarea.hover.bg,
+		borderColor: theme.components.textarea.hover.border,
+		...Platform.select({
+			web: { boxShadow: `0 0 0 3px ${theme.components.textarea.focusRing}` },
+			default: {
+				shadowColor: theme.components.textarea.focusRing,
+				shadowOffset: {
+					width: 0,
+					height: 0
+				},
+				shadowOpacity: .18,
+				shadowRadius: 6,
+				elevation: 1
+			}
+		})
+	},
+	invalid: { borderColor: theme.components.textarea.error.border },
+	invalidFocused: {
+		borderColor: theme.components.textarea.error.border,
+		...Platform.select({
+			web: { boxShadow: `0 0 0 3px ${theme.components.textarea.error.ring}` },
+			default: {
+				shadowColor: theme.components.textarea.error.ring,
+				shadowOffset: {
+					width: 0,
+					height: 0
+				},
+				shadowOpacity: .2,
+				shadowRadius: 6,
+				elevation: 1
+			}
+		})
+	},
+	disabled: {
+		color: theme.components.textarea.disabled.fg,
+		backgroundColor: theme.components.textarea.disabled.bg,
+		borderColor: theme.components.textarea.disabled.border
+	}
+});
+//#endregion
+//#region src/primitives/Textarea/Textarea.tsx
+const Textarea = forwardRef(({ label, description, error, placeholder, value, defaultValue, size, disabled = false, required = false, invalid = false, containerStyle, inputStyle, numberOfLines = 3, onValueChange, onFocus, onBlur, accessibilityLabel, accessibilityHint, accessibilityState, ...props }, ref) => {
+	const { theme } = useTheme();
+	const styles = useThemeStyles(createStyles);
+	const field = useFormFieldContext();
+	const hasOwnField = Boolean(label || description || error);
+	const [isFocused, setIsFocused] = useState(false);
+	const resolvedSize = size ?? field?.size ?? "md";
+	const controlSize = controlSizes[resolvedSize];
+	const isInvalid = invalid || Boolean(error) || !hasOwnField && Boolean(field?.invalid);
+	const isDisabled = disabled || !hasOwnField && Boolean(field?.disabled);
+	const isRequired = required || !hasOwnField && Boolean(field?.required);
+	const resolvedNumberOfLines = Math.max(1, numberOfLines);
+	const resolvedAccessibilityHint = [
+		accessibilityHint,
+		hasOwnField && typeof description === "string" ? description : void 0,
+		isRequired ? "Required." : void 0,
+		isInvalid ? "Invalid." : void 0,
+		hasOwnField && typeof error === "string" ? error : void 0
+	].filter((item) => Boolean(item)).join(" ");
+	const handleFocus = (event) => {
+		setIsFocused(true);
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		setIsFocused(false);
+		onBlur?.(event);
+	};
+	const control = /* @__PURE__ */ jsx(TextInput, {
+		...props,
+		ref,
+		nativeID: props.nativeID ?? (!hasOwnField ? field?.controlId : void 0),
+		value,
+		defaultValue,
+		editable: !isDisabled,
+		multiline: true,
+		numberOfLines: resolvedNumberOfLines,
+		placeholder,
+		placeholderTextColor: isDisabled ? theme.components.textarea.disabled.fg : theme.semantic.text.secondary,
+		accessibilityLabel: accessibilityLabel ?? label,
+		accessibilityHint: resolvedAccessibilityHint || void 0,
+		accessibilityState: {
+			...accessibilityState,
+			disabled: isDisabled
+		},
+		accessibilityLabelledBy: !hasOwnField ? field?.labelId : void 0,
+		"aria-describedby": !hasOwnField ? field?.ariaDescribedBy : void 0,
+		onChangeText: onValueChange,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		style: [
+			styles.textarea,
+			styles[resolvedSize],
+			{
+				minHeight: controlSize.lineHeight * resolvedNumberOfLines + theme.tokens.spacing[6],
+				fontSize: controlSize.fontSize,
+				lineHeight: controlSize.lineHeight
+			},
+			inputStyle,
+			isFocused && !isDisabled && styles.focused,
+			isInvalid && styles.invalid,
+			isFocused && isInvalid && !isDisabled && styles.invalidFocused,
+			isDisabled && styles.disabled
+		]
+	});
+	if (!hasOwnField && field) return control;
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		description,
+		error,
+		required: isRequired,
+		disabled: isDisabled,
+		invalid: isInvalid,
+		size: resolvedSize,
+		style: containerStyle,
+		children: control
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Accordion, Button, Checkbox, Dropdown, FormField, Input, Modal, Popover, Portal, PortalProvider, Radio, RadioGroup, Select, Switch, Tabs, Textarea, ThemeProvider, Tooltip, nativeThemes, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.117.2",
+  "version": "2.118.0",
   "description": "React Native components for Vellira Design System",
   "keywords": [
     "vellira",