@vellira-ui/react-native 2.26.1 → 2.28.0

package/README.md

@@ -54,7 +54,7 @@ export function Example() {
         checked={accepted}
         onCheckedChange={setAccepted}
       />
-      <Button color='primary' variant='solid'>
+      <Button color='primary' appearance='solid'>
         Continue
       </Button>
     </View>
@@ -69,7 +69,7 @@ Use `accessibilityLabel` for icon-only native buttons:
 ```tsx
 import { Search } from '@vellira-ui/icons';
 
-<Button accessibilityLabel='Search' iconOnly leftIcon={<Search />} />;
+<Button accessibilityLabel='Search' iconOnly iconStart={<Search />} />;
 ```
 
 Button icons are React elements from `@vellira-ui/icons`; the component injects

package/dist/index.js

@@ -2207,7 +2207,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/primitives/Button/Button.tsx
 import { cloneElement as cloneElement5, useState as useState5 } from "react";
-import { ActivityIndicator, Pressable as Pressable10, Text as Text11 } from "react-native";
+import { ActivityIndicator, Pressable as Pressable10, Text as Text11, View as View19 } from "react-native";
 
 // src/utils/devWarning.ts
 var devWarning = (condition, message) => {
@@ -2225,7 +2225,6 @@ var createStyles21 = (theme) => StyleSheet21.create({
     alignItems: "center",
     justifyContent: "center",
     gap: 8,
-    borderRadius: theme.tokens.radius.md,
     borderWidth: 1
   },
   fullWidth: {
@@ -2239,10 +2238,32 @@ var createStyles21 = (theme) => StyleSheet21.create({
     // Fallback color.
     color: theme.components.button.primary.solid.default.fg
   },
+  labelSlot: {
+    position: "relative"
+  },
+  labelMeasure: {
+    position: "absolute",
+    opacity: 0
+  },
   spinner: {
     fontSize: 12,
     lineHeight: theme.tokens.typography.lineHeight.md
   },
+  badge: {
+    minWidth: 18,
+    height: 18,
+    paddingHorizontal: 6,
+    borderRadius: theme.tokens.radius.full,
+    overflow: "hidden",
+    textAlign: "center",
+    fontSize: 11,
+    lineHeight: 18,
+    fontWeight: fontWeight3(theme.tokens.typography.weight.medium)
+  },
+  shortcut: {
+    opacity: 0.8,
+    fontSize: 12
+  },
   disabled: {
     borderColor: theme.components.button.disabled.border
   },
@@ -2290,7 +2311,8 @@ var sizeMap = {
 function Button({
   children,
   color = "primary",
-  variant = "solid",
+  appearance = "solid",
+  shape = "pill",
   disabled = false,
   loading = false,
   loadingText,
@@ -2300,8 +2322,10 @@ function Button({
   onHoverIn,
   onHoverOut,
   size = "md",
-  leftIcon,
-  rightIcon,
+  iconStart,
+  iconEnd,
+  badge,
+  shortcut,
   fullWidth = false,
   iconOnly: iconOnlyProp = false,
   style,
@@ -2314,12 +2338,15 @@ function Button({
   const { theme } = useTheme();
   const styles = useThemeStyles(createStyles21);
   const config = sizeMap[size];
-  const variantTheme = theme.components.button[color][variant];
+  const radius = shape === "square" ? theme.tokens.radius.sm : shape === "rounded" ? theme.tokens.radius.md : theme.tokens.radius.full;
+  const appearanceTheme = theme.components.button[color][appearance];
   const [isHovered, setIsHovered] = useState5(false);
   const [isFocused, setIsFocused] = useState5(false);
+  const [labelWidth, setLabelWidth] = useState5(0);
   const isDisabled = disabled || loading;
-  const iconOnly = iconOnlyProp || !children && Boolean(leftIcon || rightIcon);
+  const iconOnly = iconOnlyProp || !children && Boolean(iconStart || iconEnd);
   const content = loading && loadingText ? loadingText : children;
+  const measureLabel = loadingText && children && !iconOnly ? loading ? children : loadingText : void 0;
   devWarning(
     !iconOnly || Boolean(accessibilityLabel),
     "Button: icon-only buttons must provide an accessibilityLabel."
@@ -2345,7 +2372,13 @@ function Button({
     color: iconColor,
     size: resolvedIconSize
   });
-  const getInteractionTheme = (pressed) => isDisabled ? theme.components.button.disabled : pressed ? variantTheme.pressed : isHovered ? variantTheme.hover : variantTheme.default;
+  const handleLabelLayout = (event) => {
+    const width = event.nativeEvent.layout.width;
+    setLabelWidth(
+      (currentWidth) => width > currentWidth ? width : currentWidth
+    );
+  };
+  const getInteractionTheme = (pressed) => isDisabled ? theme.components.button.disabled : pressed ? appearanceTheme.pressed : isHovered ? appearanceTheme.hover : appearanceTheme.default;
   return /* @__PURE__ */ jsx23(
     Pressable10,
     {
@@ -2367,6 +2400,7 @@ function Button({
           {
             backgroundColor: interactionTheme.bg,
             borderColor: interactionTheme.border,
+            borderRadius: radius,
             paddingHorizontal: iconOnly ? 0 : config.px,
             paddingVertical: iconOnly ? 0 : config.py,
             width: iconOnly ? config.height : void 0,
@@ -2384,22 +2418,68 @@ function Button({
         const contentColor = interactionTheme.fg;
         return /* @__PURE__ */ jsxs12(Fragment3, { children: [
           loading && /* @__PURE__ */ jsx23(ActivityIndicator, { size: "small", color: contentColor }),
-          !loading && leftIcon && renderIcon(leftIcon, contentColor),
-          content && !iconOnly && /* @__PURE__ */ jsx23(
+          !loading && iconStart && renderIcon(iconStart, contentColor),
+          content && !iconOnly && /* @__PURE__ */ jsxs12(View19, { style: styles.labelSlot, children: [
+            /* @__PURE__ */ jsx23(
+              Text11,
+              {
+                onLayout: handleLabelLayout,
+                style: [
+                  styles.text,
+                  labelWidth > 0 && { minWidth: labelWidth },
+                  {
+                    fontSize: config.fontSize,
+                    color: contentColor
+                  },
+                  textStyle
+                ],
+                children: content
+              }
+            ),
+            measureLabel && /* @__PURE__ */ jsx23(
+              Text11,
+              {
+                accessibilityElementsHidden: true,
+                importantForAccessibility: "no-hide-descendants",
+                onLayout: handleLabelLayout,
+                style: [
+                  styles.text,
+                  styles.labelMeasure,
+                  {
+                    fontSize: config.fontSize
+                  },
+                  textStyle
+                ],
+                children: measureLabel
+              }
+            )
+          ] }),
+          badge && !iconOnly && /* @__PURE__ */ jsx23(
             Text11,
             {
               style: [
-                styles.text,
+                styles.badge,
                 {
-                  fontSize: config.fontSize,
+                  backgroundColor: `${contentColor}24`,
                   color: contentColor
-                },
-                textStyle
+                }
               ],
-              children: content
+              children: badge
             }
           ),
-          !loading && rightIcon && renderIcon(rightIcon, contentColor)
+          shortcut && !iconOnly && /* @__PURE__ */ jsx23(
+            Text11,
+            {
+              style: [
+                styles.shortcut,
+                {
+                  color: contentColor
+                }
+              ],
+              children: shortcut
+            }
+          ),
+          !loading && iconEnd && renderIcon(iconEnd, contentColor)
         ] });
       }
     }
@@ -2410,7 +2490,7 @@ function Button({
 import { forwardRef as forwardRef2, useEffect as useEffect4 } from "react";
 import { useControllableState as useControllableState3 } from "@vellira-ui/core";
 import { Check } from "@vellira-ui/icons";
-import { Pressable as Pressable11, Text as Text12, View as View19 } from "react-native";
+import { Pressable as Pressable11, Text as Text12, View as View20 } from "react-native";
 
 // src/primitives/Checkbox/Checkbox.styles.ts
 import { StyleSheet as StyleSheet22 } from "react-native";
@@ -2423,6 +2503,9 @@ var createStyles22 = (theme) => StyleSheet22.create({
     alignItems: "center",
     gap: theme.tokens.spacing[3]
   },
+  wrapperLabelStart: {
+    flexDirection: "row-reverse"
+  },
   iconOnly: {
     justifyContent: "center",
     minWidth: 44,
@@ -2456,16 +2539,16 @@ var createStyles22 = (theme) => StyleSheet22.create({
     borderWidth: 2
   },
   boxChecked: {
-    backgroundColor: theme.components.checkbox.checked.default.bg,
-    borderColor: theme.components.checkbox.checked.default.border
+    backgroundColor: theme.components.checkbox.primary.default.bg,
+    borderColor: theme.components.checkbox.primary.default.border
   },
   boxCheckedHover: {
-    backgroundColor: theme.components.checkbox.checked.hover.bg,
-    borderColor: theme.components.checkbox.checked.hover.border
+    backgroundColor: theme.components.checkbox.primary.hover.bg,
+    borderColor: theme.components.checkbox.primary.hover.border
   },
   boxCheckedPressed: {
-    backgroundColor: theme.components.checkbox.checked.pressed.bg,
-    borderColor: theme.components.checkbox.checked.pressed.border
+    backgroundColor: theme.components.checkbox.primary.pressed.bg,
+    borderColor: theme.components.checkbox.primary.pressed.border
   },
   boxDisabled: {
     backgroundColor: theme.components.checkbox.disabled.bg,
@@ -2475,25 +2558,25 @@ var createStyles22 = (theme) => StyleSheet22.create({
     borderColor: theme.components.checkbox.error.border
   },
   checkmark: {
-    color: theme.components.checkbox.checked.default.fg
+    color: theme.components.checkbox.primary.default.fg
   },
   checkmarkHover: {
-    color: theme.components.checkbox.checked.hover.fg
+    color: theme.components.checkbox.primary.hover.fg
   },
   checkmarkPressed: {
-    color: theme.components.checkbox.checked.pressed.fg
+    color: theme.components.checkbox.primary.pressed.fg
   },
   indeterminateMark: {
     width: "60%",
     height: 2,
-    backgroundColor: theme.components.checkbox.checked.default.fg,
+    backgroundColor: theme.components.checkbox.primary.default.fg,
     borderRadius: theme.tokens.radius.full
   },
   indeterminateMarkHover: {
-    backgroundColor: theme.components.checkbox.checked.hover.fg
+    backgroundColor: theme.components.checkbox.primary.hover.fg
   },
   indeterminateMarkPressed: {
-    backgroundColor: theme.components.checkbox.checked.pressed.fg
+    backgroundColor: theme.components.checkbox.primary.pressed.fg
   },
   label: {
     flexShrink: 1,
@@ -2501,13 +2584,13 @@ var createStyles22 = (theme) => StyleSheet22.create({
     color: theme.components.checkbox.default.fg
   },
   labelChecked: {
-    color: theme.components.checkbox.checked.default.labelFg
+    color: theme.components.checkbox.primary.default.labelFg
   },
   labelCheckedHover: {
-    color: theme.components.checkbox.checked.hover.labelFg
+    color: theme.components.checkbox.primary.hover.labelFg
   },
   labelCheckedPressed: {
-    color: theme.components.checkbox.checked.pressed.labelFg
+    color: theme.components.checkbox.primary.pressed.labelFg
   },
   labelSm: {
     fontSize: theme.tokens.typography.size.sm,
@@ -2564,12 +2647,16 @@ var Checkbox = forwardRef2(
   ({
     label,
     description,
+    icon,
+    indeterminateIcon,
     checked,
     defaultChecked = false,
     disabled = false,
     required = false,
     indeterminate = false,
     size = "md",
+    color = "primary",
+    labelPosition = "end",
     onCheckedChange,
     error,
     style,
@@ -2579,6 +2666,7 @@ var Checkbox = forwardRef2(
   }, ref) => {
     const { theme } = useTheme();
     const styles = useThemeStyles(createStyles22);
+    const checkboxColor = theme.components.checkbox[color];
     const boxSizeStyle = {
       sm: styles.boxSm,
       md: styles.boxMd,
@@ -2613,7 +2701,7 @@ var Checkbox = forwardRef2(
         "Checkbox: an accessible label must be provided through label or accessibilityLabel."
       );
     }, [resolvedAccessibilityLabel]);
-    return /* @__PURE__ */ jsxs13(View19, { style: styles.container, children: [
+    return /* @__PURE__ */ jsxs13(View20, { style: styles.container, children: [
       /* @__PURE__ */ jsx24(
         Pressable11,
         {
@@ -2630,34 +2718,44 @@ var Checkbox = forwardRef2(
           accessibilityLabel: resolvedAccessibilityLabel,
           style: [
             styles.wrapper,
+            labelPosition === "start" && styles.wrapperLabelStart,
             !label && styles.iconOnly,
             disabled && styles.disabled,
             style
           ],
           children: ({ pressed }) => {
             const isSelected = isChecked || indeterminate;
-            const checkColor = disabled ? theme.components.checkbox.disabled.fg : pressed && isSelected ? theme.components.checkbox.checked.pressed.fg : theme.components.checkbox.checked.default.fg;
+            const checkColor = disabled ? theme.components.checkbox.disabled.fg : pressed && isSelected ? checkboxColor.pressed.fg : checkboxColor.default.fg;
             return /* @__PURE__ */ jsxs13(Fragment4, { children: [
               /* @__PURE__ */ jsx24(
-                View19,
+                View20,
                 {
                   style: [
                     styles.box,
                     boxSizeStyle[size],
-                    isSelected && styles.boxChecked,
-                    isSelected && pressed && styles.boxCheckedPressed,
+                    isSelected && {
+                      backgroundColor: checkboxColor.default.bg,
+                      borderColor: checkboxColor.default.border
+                    },
+                    isSelected && pressed && {
+                      backgroundColor: checkboxColor.pressed.bg,
+                      borderColor: checkboxColor.pressed.border,
+                      transform: [{ scale: 0.96 }]
+                    },
                     hasError && styles.boxError,
                     disabled && styles.boxDisabled
                   ],
-                  children: indeterminate ? /* @__PURE__ */ jsx24(
-                    View19,
+                  children: indeterminate ? indeterminateIcon ?? /* @__PURE__ */ jsx24(
+                    View20,
                     {
                       style: [
                         styles.indeterminateMark,
-                        pressed && styles.indeterminateMarkPressed
+                        {
+                          backgroundColor: pressed ? checkboxColor.pressed.fg : checkboxColor.default.fg
+                        }
                       ]
                     }
-                  ) : isChecked && /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor })
+                  ) : isChecked && (icon ?? /* @__PURE__ */ jsx24(Check, { size: iconSizeBySize[size], color: checkColor }))
                 }
               ),
               label && /* @__PURE__ */ jsxs13(
@@ -2666,8 +2764,10 @@ var Checkbox = forwardRef2(
                   style: [
                     styles.label,
                     labelSizeStyle[size],
-                    isSelected && styles.labelChecked,
-                    isSelected && pressed && styles.labelCheckedPressed,
+                    isSelected && { color: checkboxColor.default.labelFg },
+                    isSelected && pressed && {
+                      color: checkboxColor.pressed.labelFg
+                    },
                     disabled && styles.labelDisabled
                   ],
                   children: [
@@ -2699,7 +2799,7 @@ Checkbox.displayName = "Checkbox";
 
 // src/primitives/Input/Input.tsx
 import { cloneElement as cloneElement6, forwardRef as forwardRef3, useState as useState6 } from "react";
-import { Pressable as Pressable12, Text as Text13, TextInput, View as View20 } from "react-native";
+import { Pressable as Pressable12, Text as Text13, TextInput, View as View21 } from "react-native";
 
 // src/primitives/Input/Input.styles.ts
 import { StyleSheet as StyleSheet23 } from "react-native";
@@ -2958,9 +3058,9 @@ var Input = forwardRef3(
         required,
         disabled,
         style: containerStyle,
-        children: /* @__PURE__ */ jsxs14(View20, { style: styles.inputWrapper, children: [
+        children: /* @__PURE__ */ jsxs14(View21, { style: styles.inputWrapper, children: [
           leftIcon && /* @__PURE__ */ jsx25(
-            View20,
+            View21,
             {
               pointerEvents: "none",
               style: styles.leftIcon,
@@ -3028,7 +3128,7 @@ var Input = forwardRef3(
               )
             }
           ) : showRightIcon && rightIcon && /* @__PURE__ */ jsx25(
-            View20,
+            View21,
             {
               pointerEvents: "none",
               style: styles.rightIcon,
@@ -3053,7 +3153,7 @@ import { useControllableState as useControllableState4 } from "@vellira-ui/core"
 import {
   Pressable as Pressable13,
   Text as Text14,
-  View as View21
+  View as View22
 } from "react-native";
 
 // src/primitives/Radio/Radio.styles.ts
@@ -3242,7 +3342,7 @@ var Radio = forwardRef4(
       state.pressed && !resolvedDisabled && styles.pressablePressed,
       typeof style === "function" ? style(state) : style
     ];
-    return /* @__PURE__ */ jsxs15(View21, { style: [styles.root, containerStyle], children: [
+    return /* @__PURE__ */ jsxs15(View22, { style: [styles.root, containerStyle], children: [
       /* @__PURE__ */ jsxs15(
         Pressable13,
         {
@@ -3260,7 +3360,7 @@ var Radio = forwardRef4(
           style: resolvePressableStyle,
           children: [
             /* @__PURE__ */ jsx26(
-              View21,
+              View22,
               {
                 pointerEvents: "none",
                 style: [
@@ -3275,7 +3375,7 @@ var Radio = forwardRef4(
                   resolvedDisabled && styles.controlDisabled
                 ],
                 children: resolvedChecked && /* @__PURE__ */ jsx26(
-                  View21,
+                  View22,
                   {
                     style: [
                       styles.indicator,
@@ -3289,7 +3389,7 @@ var Radio = forwardRef4(
                 )
               }
             ),
-            (label || description) && /* @__PURE__ */ jsxs15(View21, { pointerEvents: "none", style: styles.content, children: [
+            (label || description) && /* @__PURE__ */ jsxs15(View22, { pointerEvents: "none", style: styles.content, children: [
               label && (typeof label === "string" ? /* @__PURE__ */ jsx26(
                 Text14,
                 {

package/package.json

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