@retray-dev/ui-kit 12.1.0 → 13.0.0

package/dist/chunk-L3YKPTJQ.mjs

@@ -0,0 +1,119 @@
+import { COLOR_TRANSITION } from './chunk-M53LC4Q7.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
+import React, { useState } from 'react';
+import { Platform, StyleSheet, View, Text, TextInput } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
+function Textarea({
+  label,
+  error,
+  hint,
+  disabled,
+  rows = 4,
+  prefixIcon,
+  prefixIconNode,
+  prefixIconColor,
+  containerStyle,
+  style,
+  onFocus,
+  onBlur,
+  accessibilityLabel,
+  ...props
+}) {
+  const { colors } = useTheme();
+  const [focused, setFocused] = useState(false);
+  const resolvedPrefixIcon = prefixIcon ? /* @__PURE__ */ React.createElement(Icon, { name: prefixIcon, size: ms(16), color: prefixIconColor ?? colors.foregroundMuted }) : prefixIconNode;
+  const borderColor = error ? colors.destructive : focused ? colors.primary : colors.border;
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React.createElement(View, { style: [styles.inputWrapper, { backgroundColor: colors.background }] }, /* @__PURE__ */ React.createElement(
+    EaseView,
+    {
+      style: [styles.borderOverlay, { borderWidth: error ? 2 : 1 }],
+      animate: { borderColor },
+      transition: COLOR_TRANSITION,
+      pointerEvents: "none"
+    }
+  ), resolvedPrefixIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.prefixIcon }, resolvedPrefixIcon) : null, /* @__PURE__ */ React.createElement(
+    TextInput,
+    {
+      multiline: true,
+      numberOfLines: rows,
+      textAlignVertical: "top",
+      editable: !disabled,
+      style: [
+        styles.input,
+        {
+          color: colors.foreground,
+          minHeight: rows * vs(30)
+        },
+        disabled && { opacity: 0.45 },
+        webInputResetStyle,
+        style
+      ],
+      onFocus: (e) => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        setFocused(false);
+        onBlur?.(e);
+      },
+      placeholderTextColor: colors.foregroundMuted,
+      allowFontScaling: true,
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: { disabled: !!disabled },
+      ...props
+    }
+  )), error ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.helperText, { color: colors.destructive }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    error
+  ) : null, !error && hint ? /* @__PURE__ */ React.createElement(Text, { style: [styles.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(4)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13),
+    lineHeight: vs(18),
+    marginBottom: vs(2)
+  },
+  inputWrapper: {
+    borderRadius: 8,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    gap: s(8)
+  },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8
+  },
+  prefixIcon: {
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    paddingTop: vs(2)
+  },
+  input: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: vs(22),
+    padding: 0,
+    margin: 0
+  },
+  helperText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12),
+    lineHeight: vs(16),
+    marginTop: vs(4)
+  }
+});
+
+export { Textarea };

package/dist/chunk-M53LC4Q7.mjs

@@ -0,0 +1,35 @@
+// src/utils/animations.ts
+var SPRINGS = {
+  glide: { stiffness: 380, damping: 38, mass: 1 },
+  elastic: { stiffness: 320, damping: 22, mass: 0.7 }
+};
+var TIMINGS = {
+  state: { duration: 160 },
+  expand: { duration: 240 },
+  collapse: { duration: 200 },
+  shimmer: { duration: 1400 }
+};
+var COLOR_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
+};
+var OPACITY_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
+};
+var SPRING_ELASTIC = {
+  type: "spring",
+  stiffness: 320,
+  damping: 22,
+  mass: 0.7
+};
+var PRESS_SCALE = {
+  button: 0.95,
+  card: 0.98,
+  row: 0.97,
+  chip: 0.94
+};
+
+export { COLOR_TRANSITION, OPACITY_TRANSITION, PRESS_SCALE, SPRINGS, SPRING_ELASTIC, TIMINGS };

package/dist/{chunk-NXI4YDZ2.mjs → chunk-MP7GLMIR.mjs}

@@ -1,13 +1,11 @@
-import { usePressScale } from './chunk-YNROWHQJ.mjs';
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
+import { PressableChip } from './chunk-IFYMBOEN.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
-import { StyleSheet, ScrollView, View, TouchableOpacity, Text } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { StyleSheet, ScrollView, View, Text } from 'react-native';
 
 function isSelected(value, candidate) {
   if (value == null) return false;
@@ -15,26 +13,21 @@ function isSelected(value, candidate) {
 }
 function Cell({ item, selected, width, onPress }) {
   const { colors } = useTheme();
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.chip,
-    disabled: item.disabled
-  });
   const iconColor = selected ? colors.primary : colors.foregroundSubtle;
-  const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), iconColor) : null);
-  return /* @__PURE__ */ React.createElement(Animated.View, { style: [{ width }, animatedStyle] }, /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
+  const iconNode = item.icon ?? (item.iconName ? /* @__PURE__ */ React.createElement(Icon, { name: item.iconName, size: ms(24), color: iconColor }) : null);
+  return /* @__PURE__ */ React.createElement(
+    PressableChip,
     {
       onPress,
-      onPressIn,
-      onPressOut,
-      disabled: item.disabled,
-      activeOpacity: 1,
+      enabled: !item.disabled,
+      rippleColor: "transparent",
       touchSoundDisabled: true,
+      activateOnHover: true,
       accessibilityRole: "button",
       accessibilityState: { selected, disabled: item.disabled },
       accessibilityLabel: item.label ?? String(item.value),
-      ...hoverHandlers,
       style: [
+        { width },
         styles.cell,
         {
           backgroundColor: selected ? colors.primary + "14" : colors.surface,
@@ -53,7 +46,7 @@ function Cell({ item, selected, width, onPress }) {
       },
       item.label
     ) : null
-  ));
+  );
 }
 function SelectableGrid({
   items,
@@ -124,22 +117,21 @@ var styles = StyleSheet.create({
     paddingHorizontal: s(4)
   },
   cell: {
-    flex: 1,
     borderRadius: RADIUS.md,
     borderWidth: 2,
     alignItems: "center",
     justifyContent: "center",
     gap: vs(4),
-    paddingHorizontal: s(12),
-    paddingVertical: vs(12)
+    paddingHorizontal: s(8),
+    paddingVertical: vs(10)
   },
   cellDisabled: {
     opacity: 0.4
   },
   label: {
     fontFamily: "Sohne-Medium",
-    fontSize: ms(12),
-    lineHeight: mvs(15),
+    fontSize: ms(11),
+    lineHeight: mvs(14),
     textAlign: "center"
   }
 });

package/dist/chunk-MZ6WRTD2.mjs

@@ -0,0 +1,40 @@
+import React from 'react';
+import AntDesign from '@expo/vector-icons/AntDesign';
+import Entypo from '@expo/vector-icons/Entypo';
+import Feather from '@expo/vector-icons/Feather';
+import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import Ionicons from '@expo/vector-icons/Ionicons';
+
+// src/utils/icons.ts
+var ALL_FAMILIES = [
+  { name: "Feather", component: Feather },
+  { name: "AntDesign", component: AntDesign },
+  { name: "Entypo", component: Entypo },
+  { name: "FontAwesome5", component: FontAwesome5 },
+  { name: "MaterialIcons", component: MaterialIcons },
+  { name: "Ionicons", component: Ionicons }
+];
+var glyphCacheInitialized = false;
+function ensureGlyphCache() {
+  if (glyphCacheInitialized) return;
+  glyphCacheInitialized = true;
+  for (const entry of ALL_FAMILIES) {
+    try {
+      entry.glyphMap = entry.component.glyphMap;
+    } catch {
+      entry.glyphMap = {};
+    }
+  }
+}
+function Icon({ name, size, color, family }) {
+  ensureGlyphCache();
+  const entry = family ? ALL_FAMILIES.find((f) => f.name === family) : ALL_FAMILIES.find((f) => {
+    const glyphMap = f.glyphMap;
+    return glyphMap ? name in glyphMap : false;
+  });
+  if (!entry) return null;
+  return React.createElement(entry.component, { name, size, color });
+}
+
+export { Icon };