@vellira-ui/react-native 2.90.15 → 2.91.1

package/dist/index.d.ts

@@ -1,3 +1,8 @@
+export type { AccordionProps } from './components/Accordion';
+export type { AccordionItemProps } from './components/Accordion';
+export type { AccordionTriggerProps } from './components/Accordion';
+export type { AccordionContentProps } from './components/Accordion';
+export { Accordion } from './components/Accordion';
 export { Dropdown } from './components/Dropdown';
 export type { DropdownContentProps, DropdownEmptyProps, DropdownGroupProps, DropdownItemProps, DropdownLabelProps, DropdownPresentation, DropdownProps, DropdownSelectEvent, DropdownSeparatorProps, DropdownTriggerProps, } from './components/Dropdown/types';
 export type { ModalBodyProps, ModalCloseProps, ModalContentProps, ModalDescriptionProps, ModalFooterProps, ModalHeaderProps, ModalOverlayProps, ModalProps, ModalTitleProps, ModalTriggerProps, } from './components/Modal';

package/dist/index.js

@@ -1,9 +1,9 @@
-import { Children, cloneElement, createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
 import { AccessibilityInfo, ActivityIndicator, Animated, BackHandler, Dimensions, Easing, FlatList, Modal as Modal$1, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
+import { Children, cloneElement, createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createConsoleOverlayDiagnostics, createOverlayManagerStore, createOverlayZIndexPolicy, createRetainedResourceRegistry, deferOverlayFocusRestore, getCompoundSlot, markCompoundSlot, resolveOverlayPresentation } from "@vellira-ui/core";
 import { controlSizes, darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
 //#region src/theme/fontWeight.ts
 const nativeFontWeights = /* @__PURE__ */ new Set([
 	"normal",
@@ -739,6 +739,173 @@ function useThemeStyles(createStyles) {
 	return useMemo(() => createStyles(theme), [createStyles, theme]);
 }
 //#endregion
+//#region src/components/Accordion/Accordion.styles.ts
+const createStyles$23 = (theme) => StyleSheet.create({
+	root: {
+		width: "100%",
+		overflow: "hidden",
+		borderWidth: 1,
+		borderColor: theme.semantic.border.muted,
+		borderRadius: theme.tokens.radius.lg,
+		backgroundColor: theme.semantic.surface.default
+	},
+	rootDisabled: { opacity: .7 },
+	item: {
+		borderBottomWidth: 1,
+		borderBottomColor: theme.semantic.border.muted
+	},
+	trigger: {
+		minHeight: theme.tokens.spacing[10],
+		justifyContent: "center",
+		paddingHorizontal: theme.tokens.spacing[4],
+		paddingVertical: theme.tokens.spacing[3],
+		backgroundColor: theme.semantic.surface.default
+	},
+	triggerExpanded: { backgroundColor: theme.semantic.surface.subtle },
+	triggerPressed: { backgroundColor: theme.semantic.surface.muted },
+	triggerDisabled: { backgroundColor: theme.semantic.surface.subtle },
+	triggerContent: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: theme.tokens.spacing[3]
+	},
+	triggerText: {
+		flex: 1,
+		color: theme.semantic.text.primary,
+		fontSize: theme.tokens.typography.size.md,
+		fontWeight: theme.tokens.typography.weight.medium,
+		lineHeight: theme.tokens.typography.lineHeight.md
+	},
+	triggerTextDisabled: { color: theme.semantic.text.disabled },
+	indicator: {
+		width: theme.tokens.spacing[4],
+		height: theme.tokens.spacing[4],
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	indicatorExpanded: { transform: [{ rotate: "180deg" }] },
+	content: {
+		padding: theme.tokens.spacing[4],
+		backgroundColor: theme.semantic.surface.subtle
+	},
+	contentHidden: { display: "none" }
+});
+//#endregion
+//#region src/components/Accordion/Content/AccordionContent.tsx
+function AccordionContent({ children, forceMount = false, hidden = false }) {
+	const { theme } = useTheme();
+	const styles = createStyles$23(theme);
+	if (hidden && !forceMount) return null;
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.content, hidden && styles.contentHidden],
+		children
+	});
+}
+//#endregion
+//#region src/components/Accordion/Item/AccordionItem.tsx
+function AccordionItem({ children }) {
+	const { theme } = useTheme();
+	const styles = createStyles$23(theme);
+	return /* @__PURE__ */ jsx(View, {
+		style: styles.item,
+		children
+	});
+}
+//#endregion
+//#region src/components/Accordion/Trigger/AccordionTrigger.tsx
+function AccordionTrigger({ children, disabled = false, expanded = false, onActivate }) {
+	const { theme } = useTheme();
+	const styles = createStyles$23(theme);
+	return /* @__PURE__ */ jsx(Pressable, {
+		disabled,
+		accessibilityRole: "button",
+		accessibilityState: {
+			disabled,
+			expanded
+		},
+		accessibilityHint: expanded ? "Collapses this section" : "Expands this section",
+		onPress: onActivate,
+		style: ({ pressed }) => [
+			styles.trigger,
+			expanded && styles.triggerExpanded,
+			pressed && !disabled && styles.triggerPressed,
+			disabled && styles.triggerDisabled
+		],
+		children: /* @__PURE__ */ jsxs(View, {
+			style: styles.triggerContent,
+			children: [/* @__PURE__ */ jsx(Text, {
+				style: [styles.triggerText, disabled && styles.triggerTextDisabled],
+				children
+			}), /* @__PURE__ */ jsx(View, {
+				style: [styles.indicator, expanded && styles.indicatorExpanded],
+				accessibilityElementsHidden: true,
+				importantForAccessibility: "no",
+				children: /* @__PURE__ */ jsx(ChevronDown, {
+					width: 16,
+					height: 16,
+					color: disabled ? theme.semantic.text.disabled : theme.semantic.text.secondary
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/Accordion/Root/AccordionRoot.tsx
+function AccordionRoot({ children, type = "single", value, defaultValue, onValueChange, collapsible = false, disabled = false }) {
+	const { theme } = useTheme();
+	const styles = createStyles$23(theme);
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? (type === "multiple" ? [] : ""));
+	const selectedValues = (isControlled ? value : uncontrolledValue) ?? [];
+	const expandedValues = Array.isArray(selectedValues) ? selectedValues : selectedValues ? [selectedValues] : [];
+	const selectValue = useCallback((itemValue) => {
+		if (disabled) return;
+		const isExpanded = expandedValues.includes(itemValue);
+		const nextValues = type === "multiple" ? isExpanded ? expandedValues.filter((current) => current !== itemValue) : [...expandedValues, itemValue] : isExpanded ? collapsible ? [] : expandedValues : [itemValue];
+		const nextValue = type === "multiple" ? nextValues : nextValues[0] ?? "";
+		if (!isControlled) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue);
+	}, [
+		collapsible,
+		disabled,
+		expandedValues,
+		isControlled,
+		onValueChange,
+		type
+	]);
+	const enhanceItem = (node) => {
+		if (!isValidElement(node) || node.type !== AccordionItem) return node;
+		const item = node;
+		const itemDisabled = disabled || Boolean(item.props.disabled);
+		const expanded = expandedValues.includes(item.props.value);
+		const itemChildren = Children.map(item.props.children, (child) => {
+			if (!isValidElement(child)) return child;
+			if (child.type === AccordionTrigger) return cloneElement(child, {
+				disabled: itemDisabled,
+				expanded,
+				onActivate: itemDisabled ? void 0 : () => selectValue(item.props.value)
+			});
+			if (child.type === AccordionContent) return cloneElement(child, { hidden: !expanded });
+			return child;
+		});
+		return cloneElement(item, { children: itemChildren });
+	};
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.root, disabled && styles.rootDisabled],
+		accessibilityState: { disabled },
+		children: Children.map(children, enhanceItem)
+	});
+}
+//#endregion
+//#region src/components/Accordion/Accordion.tsx
+const Accordion = Object.assign(AccordionRoot, {
+	displayName: "Accordion",
+	Item: AccordionItem,
+	Trigger: AccordionTrigger,
+	Content: AccordionContent
+});
+//#endregion
 //#region src/components/Dropdown/internal/DropdownContext.tsx
 const DropdownContext = createContext(null);
 const DropdownProvider = DropdownContext.Provider;
@@ -7123,4 +7290,4 @@ function Switch({ accessibilityLabel = "Switch", checked, defaultChecked = false
 	});
 }
 //#endregion
-export { Button, Checkbox, Dropdown, FormField, Input, Modal, Popover, Portal, PortalProvider, Radio, RadioGroup, Select, Switch, Tabs, ThemeProvider, Tooltip, nativeThemes, useTheme };
+export { Accordion, 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.90.15",
+  "version": "2.91.1",
   "description": "React Native components for Vellira Design System",
   "keywords": [
     "vellira",