@vellira-ui/react-native 2.24.0 → 2.25.1

package/README.md

@@ -82,6 +82,35 @@ Use `description` for settings-style helper text when the checkbox is not
 wrapped in `FormField`. For checkbox rows without a visible label, provide
 `accessibilityLabel`.
 
+### Select Notes
+
+Use `Select` for one form value from a compact list, `RadioGroup` for a few
+visible choices, and `Dropdown` for action menus. Native `Select` commits the
+picker draft only when the user presses `Done`; `Cancel` and the backdrop close
+without changing the selected value.
+
+```tsx
+import { Select } from '@vellira-ui/react-native';
+import { useState } from 'react';
+
+export function RoleSelect() {
+  const [role, setRole] = useState('editor');
+
+  return (
+    <Select
+      label='Role'
+      value={role}
+      onChange={setRole}
+      options={[
+        { label: 'Admin', value: 'admin' },
+        { label: 'Editor', value: 'editor' },
+        { label: 'Viewer', value: 'viewer' },
+      ]}
+    />
+  );
+}
+```
+
 ### FormField Notes
 
 `FormField` is a presentational wrapper for custom native controls. Do not wrap

package/dist/index.js

@@ -1013,7 +1013,7 @@ var RadioGroup = forwardRef(
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Select/Select.tsx
-import { useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 import { Picker } from "@react-native-picker/picker";
 import { useControllableState as useControllableState3 } from "@vellira-ui/core";
 import { Modal as Modal3, Pressable as Pressable7, Text as Text8, View as View13 } from "react-native";
@@ -1038,6 +1038,33 @@ var createStyles14 = (theme) => StyleSheet14.create({
     borderRadius: theme.tokens.radius.md,
     borderWidth: 1
   },
+  sm: {
+    minHeight: 36,
+    paddingHorizontal: theme.tokens.spacing[3],
+    paddingVertical: theme.tokens.spacing[2]
+  },
+  md: {
+    minHeight: 44,
+    paddingHorizontal: theme.tokens.spacing[4],
+    paddingVertical: theme.tokens.spacing[3]
+  },
+  lg: {
+    minHeight: 52,
+    paddingHorizontal: theme.tokens.spacing[5],
+    paddingVertical: theme.tokens.spacing[4]
+  },
+  textSm: {
+    fontSize: theme.tokens.typography.size.sm,
+    lineHeight: theme.tokens.typography.lineHeight.sm
+  },
+  textMd: {
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
+  },
+  textLg: {
+    fontSize: theme.tokens.typography.size.lg,
+    lineHeight: theme.tokens.typography.lineHeight.lg
+  },
   triggerOpen: {
     borderColor: theme.components.select.trigger.focus.border
   },
@@ -1052,9 +1079,7 @@ var createStyles14 = (theme) => StyleSheet14.create({
     flex: 1,
     minWidth: 0,
     color: theme.components.select.trigger.default.fg,
-    fontFamily: theme.tokens.typography.family.regular,
-    fontSize: theme.tokens.typography.size.md,
-    lineHeight: theme.tokens.typography.lineHeight.md
+    fontFamily: theme.tokens.typography.family.regular
   },
   textDisabled: {
     color: theme.components.select.trigger.disabled.fg
@@ -1080,22 +1105,31 @@ function SelectTrigger({
   displayText,
   isPlaceholder,
   isOpen,
+  size = "md",
   disabled = false,
+  required = false,
   hasError = false,
   accessibilityLabel,
+  accessibilityHint,
   triggerStyle,
   textStyle,
   onPress
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles14);
+  const textSizeStyle = {
+    sm: styles.textSm,
+    md: styles.textMd,
+    lg: styles.textLg
+  }[size];
+  const resolvedAccessibilityHint = accessibilityHint ?? (hasError ? "Invalid selection. Opens a picker" : required ? "Required. Opens a picker" : "Opens a picker");
   return /* @__PURE__ */ jsxs8(
     Pressable6,
     {
       disabled,
       accessibilityRole: "button",
       accessibilityLabel,
-      accessibilityHint: "Opens a picker",
+      accessibilityHint: resolvedAccessibilityHint,
       accessibilityState: {
         expanded: isOpen,
         disabled
@@ -1103,6 +1137,7 @@ function SelectTrigger({
       onPress,
       style: [
         styles.trigger,
+        styles[size],
         isOpen && styles.triggerOpen,
         hasError && styles.triggerError,
         disabled && styles.triggerDisabled,
@@ -1115,6 +1150,7 @@ function SelectTrigger({
             numberOfLines: 1,
             style: [
               styles.text,
+              textSizeStyle,
               isPlaceholder && styles.placeholder,
               disabled && styles.textDisabled,
               textStyle
@@ -1163,6 +1199,7 @@ var createStyles15 = (theme) => StyleSheet15.create({
     borderTopLeftRadius: theme.tokens.radius.lg,
     borderTopRightRadius: theme.tokens.radius.lg,
     borderWidth: 1,
+    borderBottomWidth: 0,
     overflow: "hidden"
   },
   toolbar: {
@@ -1175,19 +1212,31 @@ var createStyles15 = (theme) => StyleSheet15.create({
     borderBottomWidth: 1
   },
   title: {
+    flex: 1,
+    marginHorizontal: theme.tokens.spacing[3],
     color: theme.components.select.dropdown.fg,
     fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md,
+    textAlign: "center"
+  },
+  toolbarAction: {
+    minWidth: 64,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center"
   },
   cancelText: {
     color: theme.components.select.trigger.placeholder.fg,
     fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
   },
   doneText: {
     color: theme.components.select.option.selected.bg,
     fontFamily: theme.tokens.typography.family.medium,
-    fontSize: theme.tokens.typography.size.md
+    fontSize: theme.tokens.typography.size.md,
+    lineHeight: theme.tokens.typography.lineHeight.md
   },
   picker: {
     width: "100%"
@@ -1204,6 +1253,7 @@ function Select({
   onChange,
   options,
   placeholder = "Select...",
+  size = "md",
   required = false,
   disabled = false,
   error,
@@ -1211,7 +1261,8 @@ function Select({
   triggerStyle,
   textStyle,
   pickerStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles15);
@@ -1223,6 +1274,12 @@ function Select({
   });
   const [draftValue, setDraftValue] = useState3(selectedValue);
   const selectedOption = options.find((o) => o.value === selectedValue);
+  const hasError = !!error;
+  useEffect2(() => {
+    if (isOpen) {
+      setDraftValue(selectedValue);
+    }
+  }, [isOpen, selectedValue]);
   const resolvedLabel = accessibilityLabel ?? label ?? selectedOption?.label ?? placeholder ?? "Select";
   const openPicker = () => {
     if (disabled) return;
@@ -1240,6 +1297,11 @@ function Select({
     setDraftValue(nextValue);
   };
   const confirmPicker = () => {
+    const nextOption = options.find((option) => option.value === draftValue);
+    if (!nextOption || nextOption.disabled) {
+      setIsOpen(false);
+      return;
+    }
     setSelectedValue(draftValue);
     setIsOpen(false);
   };
@@ -1259,9 +1321,12 @@ function Select({
             displayText: selectedOption?.label ?? placeholder,
             isPlaceholder: !selectedOption,
             isOpen,
+            size,
             disabled,
-            hasError: !!error,
+            required,
+            hasError,
             accessibilityLabel: resolvedLabel,
+            accessibilityHint,
             triggerStyle,
             textStyle,
             onPress: openPicker
@@ -1277,11 +1342,50 @@ function Select({
             children: /* @__PURE__ */ jsxs9(View13, { style: styles.modalRoot, children: [
               /* @__PURE__ */ jsx17(Pressable7, { style: styles.backdrop, onPress: closePicker }),
               /* @__PURE__ */ jsxs9(View13, { style: styles.sheet, children: [
-                /* @__PURE__ */ jsxs9(View13, { style: styles.toolbar, children: [
-                  /* @__PURE__ */ jsx17(Pressable7, { onPress: closePicker, hitSlop: 8, children: /* @__PURE__ */ jsx17(Text8, { style: styles.cancelText, children: "Cancel" }) }),
-                  /* @__PURE__ */ jsx17(Text8, { style: styles.title, children: resolvedLabel }),
-                  /* @__PURE__ */ jsx17(Pressable7, { onPress: confirmPicker, hitSlop: 8, children: /* @__PURE__ */ jsx17(Text8, { style: styles.doneText, children: "Done" }) })
-                ] }),
+                /* @__PURE__ */ jsxs9(
+                  View13,
+                  {
+                    style: styles.toolbar,
+                    accessible: true,
+                    accessibilityRole: "toolbar",
+                    accessibilityLabel: `${resolvedLabel} picker actions`,
+                    children: [
+                      /* @__PURE__ */ jsx17(
+                        Pressable7,
+                        {
+                          onPress: closePicker,
+                          hitSlop: 8,
+                          style: styles.toolbarAction,
+                          accessibilityRole: "button",
+                          accessibilityLabel: "Cancel selection",
+                          accessibilityHint: "Closes the picker without changing the selected value",
+                          children: /* @__PURE__ */ jsx17(Text8, { style: styles.cancelText, children: "Cancel" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx17(
+                        Text8,
+                        {
+                          style: styles.title,
+                          numberOfLines: 1,
+                          accessibilityRole: "header",
+                          children: resolvedLabel
+                        }
+                      ),
+                      /* @__PURE__ */ jsx17(
+                        Pressable7,
+                        {
+                          onPress: confirmPicker,
+                          hitSlop: 8,
+                          style: styles.toolbarAction,
+                          accessibilityRole: "button",
+                          accessibilityLabel: "Confirm selection",
+                          accessibilityHint: "Applies the highlighted picker value",
+                          children: /* @__PURE__ */ jsx17(Text8, { style: styles.doneText, children: "Done" })
+                        }
+                      )
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsxs9(
                   Picker,
                   {
@@ -1620,7 +1724,7 @@ var Tabs = Object.assign(TabsRoot, {
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
 import { Modal as Modal4, Pressable as Pressable9, Text as Text10, View as View18 } from "react-native";
 
 // src/hooks/useNativeFloatingPosition.ts
@@ -1760,7 +1864,7 @@ function Tooltip({
       closeTimerRef.current = null;
     }, hideDelay);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     return clearCloseTimer;
   }, []);
   return /* @__PURE__ */ jsxs11(View18, { style: [styles.root, style], children: [
@@ -2556,7 +2660,7 @@ var Input = forwardRef3(
 Input.displayName = "Input";
 
 // src/primitives/Radio/Radio.tsx
-import { forwardRef as forwardRef4, useEffect as useEffect3 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect4 } from "react";
 import { useControllableState as useControllableState5 } from "@vellira-ui/core";
 import {
   Pressable as Pressable13,
@@ -2707,7 +2811,7 @@ var Radio = forwardRef4(
     };
     const typographySize = typographySizeByRadioSize[resolvedSize];
     const controlMarginTop = (typographySize.labelLineHeight - controlSize) / 2;
-    useEffect3(() => {
+    useEffect4(() => {
       if (typeof __DEV__ !== "undefined" && __DEV__ && !label && !accessibilityLabel) {
         console.warn(
           "Radio requires either a visible label or accessibilityLabel."

package/package.json

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