@vellira-ui/react-native 2.73.3 → 2.75.0

package/dist/index.d.ts

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

package/dist/index.js

@@ -750,7 +750,7 @@ const useDropdownContext = () => {
 DropdownContext.displayName = "DropdownContext";
 //#endregion
 //#region src/components/Dropdown/Content/DropdownContent.styles.ts
-const createStyles$21 = (theme) => StyleSheet.create({
+const createStyles$22 = (theme) => StyleSheet.create({
 	modalRoot: { flex: 1 },
 	sheet: { justifyContent: "flex-end" },
 	modal: {
@@ -836,7 +836,7 @@ const webPointerEventsBoxNone$1 = Platform.OS === "web" ? { pointerEvents: "box-
 function DropdownContent({ children, contentStyle, accessibilityLabel }) {
 	const { open, color, presentation, zIndex, position, searchable, searchValue, searchPlaceholder, searchAccessibilityLabel, requestClose, getOutsidePressProps, onSearchChange, onFloatingLayout } = useDropdownContext();
 	const { theme } = useTheme();
-	const styles = useThemeStyles(createStyles$21);
+	const styles = useThemeStyles(createStyles$22);
 	const colorPalette = theme.components.dropdown[color];
 	const isSheet = presentation === "sheet";
 	const isPopover = presentation === "popover";
@@ -1331,7 +1331,7 @@ function useNativeFloatingPosition(placement = "top", offset = 8) {
 }
 //#endregion
 //#region src/components/Dropdown/Dropdown.styles.ts
-const createStyles$20 = (theme) => StyleSheet.create({
+const createStyles$21 = (theme) => StyleSheet.create({
 	root: { alignSelf: Platform.select({
 		web: "auto",
 		default: "flex-start"
@@ -1348,7 +1348,7 @@ const createStyles$20 = (theme) => StyleSheet.create({
 });
 //#endregion
 //#region src/components/Dropdown/Group/DropdownGroup.styles.ts
-const createStyles$19 = (theme) => StyleSheet.create({ groupLabel: {
+const createStyles$20 = (theme) => StyleSheet.create({ groupLabel: {
 	paddingHorizontal: theme.tokens.spacing[4],
 	paddingVertical: theme.tokens.spacing[2],
 	color: theme.components.dropdown.groupLabel.fg,
@@ -1360,7 +1360,7 @@ const createStyles$19 = (theme) => StyleSheet.create({ groupLabel: {
 //#endregion
 //#region src/components/Dropdown/Group/DropdownGroup.tsx
 function DropdownGroup({ label }) {
-	const styles = useThemeStyles(createStyles$19);
+	const styles = useThemeStyles(createStyles$20);
 	return /* @__PURE__ */ jsx(Text, {
 		accessibilityRole: "header",
 		style: styles.groupLabel,
@@ -1375,7 +1375,7 @@ const devWarning = (condition, message) => {
 };
 //#endregion
 //#region src/components/Dropdown/Item/DropdownItem.styles.ts
-const createStyles$18 = (theme) => StyleSheet.create({
+const createStyles$19 = (theme) => StyleSheet.create({
 	item: {
 		minWidth: 0,
 		minHeight: 44,
@@ -1401,7 +1401,7 @@ const createStyles$18 = (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$18);
+	const styles = useThemeStyles(createStyles$19);
 	const rootColorPalette = theme.components.dropdown[rootColor];
 	const itemColorPalette = color === "default" ? void 0 : theme.components.dropdown[color];
 	const renderColoredNode = (node, color) => {
@@ -1469,20 +1469,20 @@ function DropdownItem({ label, value, asChild = false, children, color = "defaul
 DropdownItem.displayName = "DropdownItem";
 //#endregion
 //#region src/components/Dropdown/Separator/DropdownSeparator.styles.ts
-const createStyles$17 = (theme) => StyleSheet.create({ separator: {
+const createStyles$18 = (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$17);
+	const styles = useThemeStyles(createStyles$18);
 	return /* @__PURE__ */ jsx(View, { style: styles.separator });
 }
 DropdownSeparator.displayName = "DropdownSeparator";
 //#endregion
 //#region src/components/Dropdown/Trigger/DropdownTrigger.styles.ts
-const createStyles$16 = (theme) => StyleSheet.create({
+const createStyles$17 = (theme) => StyleSheet.create({
 	trigger: {
 		alignItems: "center",
 		justifyContent: "center",
@@ -1571,7 +1571,7 @@ const createStyles$16 = (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$16);
+	const styles = useThemeStyles(createStyles$17);
 	const colorPalette = theme.components.dropdown[color];
 	const textSizeStyle = {
 		sm: styles.textSm,
@@ -1693,7 +1693,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$20);
+	const styles = useThemeStyles(createStyles$21);
 	const overlayId = useId();
 	const triggerRef = useRef(null);
 	const setTriggerRef = useCallback((node) => {
@@ -1893,7 +1893,7 @@ const Dropdown = Object.assign(DropdownRoot, {
 });
 //#endregion
 //#region src/components/Modal/Body/ModalBody.styles.ts
-const createStyles$15 = (theme) => StyleSheet.create({
+const createStyles$16 = (theme) => StyleSheet.create({
 	body: { paddingBottom: theme.components.modal.body.paddingBottom },
 	text: {
 		color: theme.components.modal.content.fg,
@@ -1920,7 +1920,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$15);
+	const styles = useThemeStyles(createStyles$16);
 	return /* @__PURE__ */ jsx(View, {
 		style: [styles.body, style],
 		children: renderBodyChildren(children, styles.text)
@@ -1929,7 +1929,7 @@ const ModalBody = ({ children, style }) => {
 ModalBody.displayName = "ModalBody";
 //#endregion
 //#region src/components/Modal/Header/ModalHeader.styles.ts
-const createStyles$14 = (theme) => StyleSheet.create({
+const createStyles$15 = (theme) => StyleSheet.create({
 	header: {
 		alignItems: "center",
 		flexDirection: "row",
@@ -1979,7 +1979,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$14);
+	const styles = useThemeStyles(createStyles$15);
 	const { onClose } = useModalContext();
 	if ((asChild || children !== void 0) && isValidElement(children)) return cloneElement(children, {
 		accessibilityLabel: children.props.accessibilityLabel ?? accessibilityLabel,
@@ -2005,7 +2005,7 @@ const ModalClose = ({ asChild = false, children, accessibilityLabel, style }) =>
 ModalClose.displayName = "Modal.Close";
 //#endregion
 //#region src/components/Modal/Content/ModalContent.styles.ts
-const createStyles$13 = (theme) => StyleSheet.create({ content: {
+const createStyles$14 = (theme) => StyleSheet.create({ content: {
 	width: "100%",
 	maxWidth: theme.components.modal.content.size.md,
 	maxHeight: theme.components.modal.content.nativeMaxHeight,
@@ -2032,7 +2032,7 @@ const createStyles$13 = (theme) => StyleSheet.create({ content: {
 //#endregion
 //#region src/components/Modal/Content/ModalContent.tsx
 const ModalContent = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$13);
+	const styles = useThemeStyles(createStyles$14);
 	const { animation, animationProgress, open } = useModalContext();
 	const closedTranslateY = open ? animation === "slide" ? 16 : 8 : 4;
 	const closedScale = open ? .96 : .98;
@@ -2058,7 +2058,7 @@ const ModalContent = ({ children, style }) => {
 ModalContent.displayName = "ModalContent";
 //#endregion
 //#region src/components/Modal/Footer/ModalFooter.styles.ts
-const createStyles$12 = (theme) => StyleSheet.create({ footer: {
+const createStyles$13 = (theme) => StyleSheet.create({ footer: {
 	flexDirection: "row",
 	gap: theme.components.modal.footer.gap,
 	justifyContent: "flex-end",
@@ -2067,7 +2067,7 @@ const createStyles$12 = (theme) => StyleSheet.create({ footer: {
 //#endregion
 //#region src/components/Modal/Footer/ModalFooter.tsx
 const ModalFooter = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$12);
+	const styles = useThemeStyles(createStyles$13);
 	return /* @__PURE__ */ jsx(View, {
 		style: [styles.footer, style],
 		children
@@ -2077,7 +2077,7 @@ ModalFooter.displayName = "ModalFooter";
 //#endregion
 //#region src/components/Modal/Header/ModalDescription.tsx
 const ModalDescription = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$14);
+	const styles = useThemeStyles(createStyles$15);
 	return /* @__PURE__ */ jsx(Text, {
 		style: [styles.description, style],
 		children
@@ -2087,7 +2087,7 @@ ModalDescription.displayName = "Modal.Description";
 //#endregion
 //#region src/components/Modal/Header/ModalHeader.tsx
 const ModalHeader = ({ children, style, textStyle }) => {
-	const styles = useThemeStyles(createStyles$14);
+	const styles = useThemeStyles(createStyles$15);
 	const isPlainTitle = typeof children === "string" || typeof children === "number";
 	return /* @__PURE__ */ jsxs(View, {
 		style: [styles.header, style],
@@ -2108,7 +2108,7 @@ ModalHeader.displayName = "ModalHeader";
 //#endregion
 //#region src/components/Modal/Header/ModalTitle.tsx
 const ModalTitle = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$14);
+	const styles = useThemeStyles(createStyles$15);
 	return /* @__PURE__ */ jsx(Text, {
 		accessibilityRole: "header",
 		style: [styles.title, style],
@@ -2118,7 +2118,7 @@ const ModalTitle = ({ children, style }) => {
 ModalTitle.displayName = "Modal.Title";
 //#endregion
 //#region src/components/Modal/Modal.styles.ts
-const createStyles$11 = (theme) => StyleSheet.create({
+const createStyles$12 = (theme) => StyleSheet.create({
 	overlay: {
 		alignItems: "center",
 		flex: 1,
@@ -2133,7 +2133,7 @@ const createStyles$11 = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Modal/Overlay/ModalOverlay.tsx
 const ModalOverlay = ({ children, overlayStyle }) => {
-	const styles = useThemeStyles(createStyles$11);
+	const styles = useThemeStyles(createStyles$12);
 	const { animation, animationProgress, zIndex, onClose, getOutsidePressProps, shouldRender } = useModalContext();
 	const backdropStyle = animation === "none" ? void 0 : { opacity: animationProgress };
 	return /* @__PURE__ */ jsx(Modal$1, {
@@ -2714,7 +2714,7 @@ function useRadioGroupContext() {
 }
 //#endregion
 //#region src/primitives/Radio/Radio.styles.ts
-const createStyles$10 = (theme) => StyleSheet.create({
+const createStyles$11 = (theme) => StyleSheet.create({
 	root: { alignSelf: Platform.select({
 		web: "auto",
 		default: "flex-start"
@@ -2773,7 +2773,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$10(theme);
+	const styles = createStyles$11(theme);
 	const group = useRadioGroupContext();
 	const isInsideGroup = group !== null;
 	const [standaloneChecked, setStandaloneChecked] = useControllableState({
@@ -2919,7 +2919,7 @@ RadioGroupItem.displayName = "RadioGroup.Item";
 //#endregion
 //#region src/patterns/FormField/FormField.styles.ts
 const fontWeight$2 = (value) => value;
-const createStyles$9 = (theme) => StyleSheet.create({
+const createStyles$10 = (theme) => StyleSheet.create({
 	root: {
 		width: "100%",
 		minWidth: 0,
@@ -3042,7 +3042,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$9);
+	const styles = useThemeStyles(createStyles$10);
 	const sizeTokens = theme.components.formField.size[size];
 	const generatedId = useId();
 	const controlId = id ?? generatedId;
@@ -3201,7 +3201,7 @@ const FormField = Object.assign(FormFieldRoot, {
 });
 //#endregion
 //#region src/components/RadioGroup/RadioGroup.styles.ts
-const createStyles$8 = (_theme) => StyleSheet.create({
+const createStyles$9 = (_theme) => StyleSheet.create({
 	items: {
 		width: "100%",
 		minWidth: 0,
@@ -3217,7 +3217,7 @@ const createStyles$8 = (_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$8);
+	const styles = useThemeStyles(createStyles$9);
 	const radioGroupSizeTokens = theme.components.radioGroup.size[size];
 	const [selectedValue, setSelectedValue] = useControllableState({
 		value,
@@ -5042,7 +5042,7 @@ const useTabs = () => {
 TabsContext.displayName = "TabsContext";
 //#endregion
 //#region src/components/Tabs/Content/TabsContent.styles.ts
-const createStyles$7 = (theme) => StyleSheet.create({
+const createStyles$8 = (theme) => StyleSheet.create({
 	panel: {
 		width: "100%",
 		minWidth: 0,
@@ -5061,7 +5061,7 @@ const createStyles$7 = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Tabs/Content/TabsContent.tsx
 const TabsContent = ({ value, children, forceMount = false, style }) => {
-	const styles = useThemeStyles(createStyles$7);
+	const styles = useThemeStyles(createStyles$8);
 	const { value: selectedValue, orientation, keepMounted, lazyMount } = useTabs();
 	const isActive = selectedValue === value;
 	const [hasMounted, setHasMounted] = useState(isActive);
@@ -5299,7 +5299,7 @@ const TabsIndicator = ({ children, style }) => {
 TabsIndicator.displayName = "Tabs.Indicator";
 //#endregion
 //#region src/components/Tabs/List/TabsList.styles.ts
-const createStyles$6 = (theme) => StyleSheet.create({
+const createStyles$7 = (theme) => StyleSheet.create({
 	list: {
 		position: "relative",
 		flexDirection: "row",
@@ -5353,7 +5353,7 @@ const createStyles$6 = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Tabs/List/TabsList.tsx
 const TabsList = ({ children, scrollable: scrollableProp, style }) => {
-	const styles = useThemeStyles(createStyles$6);
+	const styles = useThemeStyles(createStyles$7);
 	const { mode, orientation, variant } = useTabs();
 	const scrollable = scrollableProp ?? false;
 	const listStyle = [
@@ -5383,7 +5383,7 @@ TabsList.displayName = "TabsList";
 //#endregion
 //#region src/components/Tabs/Trigger/TabsTrigger.styles.ts
 const fontWeight$1 = (value) => value;
-const createStyles$5 = (theme) => StyleSheet.create({
+const createStyles$6 = (theme) => StyleSheet.create({
 	tab: {
 		minHeight: 36,
 		minWidth: 44,
@@ -5568,7 +5568,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$5);
+	const styles = useThemeStyles(createStyles$6);
 	const { color } = useTabs();
 	const { theme } = useTheme();
 	const palette = theme.components.tabs[color];
@@ -5588,7 +5588,7 @@ TabsBadge.displayName = "Tabs.Badge";
 //#endregion
 //#region src/components/Tabs/Trigger/TabsIcon.tsx
 const TabsIcon = ({ children, style }) => {
-	const styles = useThemeStyles(createStyles$5);
+	const styles = useThemeStyles(createStyles$6);
 	return /* @__PURE__ */ jsx(View, {
 		style: [styles.tabIcon, style],
 		children
@@ -5599,7 +5599,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$5);
+	const styles = useThemeStyles(createStyles$6);
 	const { value: selectedValue, variant, color, size, mode, orientation, disabled: rootDisabled, setValue, registerTrigger, registerTriggerLayout } = useTabs();
 	const isDisabled = rootDisabled || Boolean(disabled);
 	const isActive = selectedValue === value;
@@ -5743,7 +5743,7 @@ const TabsTrigger = ({ value, children, asChild = false, icon, badge, descriptio
 TabsTrigger.displayName = "Tabs.Trigger";
 //#endregion
 //#region src/components/Tabs/Tabs.styles.ts
-const createStyles$4 = (theme) => StyleSheet.create({
+const createStyles$5 = (theme) => StyleSheet.create({
 	root: {
 		width: "100%",
 		minWidth: 0
@@ -5759,7 +5759,7 @@ const createStyles$4 = (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$4);
+	const styles = useThemeStyles(createStyles$5);
 	const isControlled = controlledValue !== void 0;
 	const [version, setVersion] = useState(0);
 	const [indicatorVersion, setIndicatorVersion] = useState(0);
@@ -5920,7 +5920,7 @@ function TooltipArrow() {
 }
 //#endregion
 //#region src/components/Tooltip/Tooltip.styles.ts
-const createStyles$3 = (theme) => StyleSheet.create({
+const createStyles$4 = (theme) => StyleSheet.create({
 	root: { alignSelf: Platform.select({
 		web: "auto",
 		default: "flex-start"
@@ -5961,7 +5961,7 @@ const createStyles$3 = (theme) => StyleSheet.create({
 //#endregion
 //#region src/components/Tooltip/Content/TooltipContent.tsx
 const TooltipContent = ({ children, forceMount = false, withArrow = false, style, textStyle }) => {
-	const styles = useThemeStyles(createStyles$3);
+	const styles = useThemeStyles(createStyles$4);
 	const tooltip = useTooltipContext();
 	const visible = tooltip.open && !tooltip.disabled;
 	if (!forceMount && !visible) return null;
@@ -6230,7 +6230,7 @@ Tooltip.displayName = "Tooltip";
 //#endregion
 //#region src/primitives/Button/Button.styles.ts
 const fontWeight = (value) => value;
-const createStyles$2 = (theme) => StyleSheet.create({
+const createStyles$3 = (theme) => StyleSheet.create({
 	button: {
 		flexDirection: "row",
 		alignItems: "center",
@@ -6298,7 +6298,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$2);
+	const styles = useThemeStyles(createStyles$3);
 	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;
@@ -6432,7 +6432,7 @@ function Button({ children, color = "primary", appearance = "solid", shape = "pi
 }
 //#endregion
 //#region src/primitives/Checkbox/Checkbox.styles.ts
-const createStyles$1 = (theme) => StyleSheet.create({
+const createStyles$2 = (theme) => StyleSheet.create({
 	container: { gap: theme.tokens.spacing[2] },
 	wrapper: {
 		flexDirection: "row",
@@ -6546,7 +6546,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$1);
+	const styles = useThemeStyles(createStyles$2);
 	const checkboxColor = theme.components.checkbox[color];
 	const boxSizeStyle = {
 		sm: styles.boxSm,
@@ -6664,7 +6664,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 = (theme) => StyleSheet.create({
+const createStyles$1 = (theme) => StyleSheet.create({
 	inputWrapper: {
 		position: "relative",
 		width: "100%",
@@ -6855,7 +6855,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);
+	const styles = useThemeStyles(createStyles$1);
 	const field = useFormFieldContext();
 	const hasOwnField = Boolean(label || description || error);
 	const [isFocused, setIsFocused] = useState(false);
@@ -7044,4 +7044,83 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 });
 Input.displayName = "Input";
 //#endregion
-export { Button, Checkbox, Dropdown, FormField, Input, Modal, Popover, Portal, PortalProvider, Radio, RadioGroup, Select, Tabs, ThemeProvider, Tooltip, nativeThemes, useTheme };
+//#region src/primitives/Switch/Switch.styles.ts
+const createStyles = (theme) => StyleSheet.create({
+	root: {
+		width: theme.components.switch.geometry.trackWidth,
+		height: theme.components.switch.geometry.trackHeight,
+		borderRadius: theme.tokens.radius.full,
+		borderWidth: theme.components.switch.geometry.borderWidth,
+		padding: theme.components.switch.geometry.padding,
+		justifyContent: "center",
+		backgroundColor: theme.components.switch.off.trackBg,
+		borderColor: theme.components.switch.off.trackBorder
+	},
+	checked: {
+		backgroundColor: theme.components.switch.on.default.trackBg,
+		borderColor: theme.components.switch.on.default.trackBorder
+	},
+	pressed: { transform: [{ scale: theme.components.switch.geometry.pressScale }] },
+	checkedPressed: {
+		backgroundColor: theme.components.switch.on.pressed.trackBg,
+		borderColor: theme.components.switch.on.pressed.trackBorder
+	},
+	invalid: { borderColor: theme.components.switch.errorBorder },
+	disabled: {
+		backgroundColor: theme.components.switch.disabled.trackBg,
+		borderColor: theme.components.switch.disabled.trackBorder
+	},
+	thumb: {
+		width: theme.components.switch.geometry.thumbSize,
+		height: theme.components.switch.geometry.thumbSize,
+		borderRadius: theme.tokens.radius.full,
+		backgroundColor: theme.components.switch.off.thumbBg,
+		transform: [{ translateX: 0 }]
+	},
+	thumbChecked: {
+		backgroundColor: theme.components.switch.on.default.thumbBg,
+		transform: [{ translateX: theme.components.switch.geometry.thumbTravel }]
+	},
+	thumbCheckedPressed: { backgroundColor: theme.components.switch.on.pressed.thumbBg },
+	thumbDisabled: { backgroundColor: theme.components.switch.disabled.thumbBg }
+});
+//#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 [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+	const isControlled = checked !== void 0;
+	const resolvedChecked = isControlled ? checked : uncontrolledChecked;
+	const handlePress = () => {
+		const nextChecked = !resolvedChecked;
+		if (!isControlled) setUncontrolledChecked(nextChecked);
+		onCheckedChange?.(nextChecked);
+	};
+	return /* @__PURE__ */ jsx(Pressable, {
+		disabled,
+		accessibilityLabel,
+		accessibilityRole: "switch",
+		accessibilityState: {
+			checked: resolvedChecked,
+			disabled
+		},
+		accessibilityHint: [required ? "Required." : void 0, invalid ? "Invalid." : void 0].filter(Boolean).join(" ") || void 0,
+		onPress: handlePress,
+		style: ({ pressed }) => [
+			styles.root,
+			resolvedChecked && styles.checked,
+			pressed && !disabled && styles.pressed,
+			resolvedChecked && pressed && !disabled && styles.checkedPressed,
+			invalid && styles.invalid,
+			disabled && styles.disabled
+		],
+		children: ({ pressed }) => /* @__PURE__ */ jsx(View, { style: [
+			styles.thumb,
+			resolvedChecked && styles.thumbChecked,
+			resolvedChecked && pressed && !disabled && styles.thumbCheckedPressed,
+			disabled && styles.thumbDisabled
+		] })
+	});
+}
+//#endregion
+export { Button, Checkbox, Dropdown, FormField, Input, Modal, Popover, Portal, PortalProvider, Radio, RadioGroup, Select, Switch, Tabs, ThemeProvider, Tooltip, nativeThemes, useTheme };

package/package.json

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