@retray-dev/ui-kit 12.1.0 → 13.0.0

package/dist/SelectableCard.js

@@ -0,0 +1,335 @@
+'use strict';
+
+var React3 = require('react');
+var reactNative = require('react-native');
+var reactNativeEase = require('react-native-ease');
+var reactNativeSizeMatters = require('react-native-size-matters');
+var AntDesign = require('@expo/vector-icons/AntDesign');
+var Entypo = require('@expo/vector-icons/Entypo');
+var Feather = require('@expo/vector-icons/Feather');
+var FontAwesome5 = require('@expo/vector-icons/FontAwesome5');
+var MaterialIcons = require('@expo/vector-icons/MaterialIcons');
+var Ionicons = require('@expo/vector-icons/Ionicons');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React3__default = /*#__PURE__*/_interopDefault(React3);
+var AntDesign__default = /*#__PURE__*/_interopDefault(AntDesign);
+var Entypo__default = /*#__PURE__*/_interopDefault(Entypo);
+var Feather__default = /*#__PURE__*/_interopDefault(Feather);
+var FontAwesome5__default = /*#__PURE__*/_interopDefault(FontAwesome5);
+var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
+var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
+
+// src/components/SelectableCard/SelectableCard.tsx
+var _haptics = null;
+var _loaded = false;
+async function getHaptics() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_loaded) {
+    _loaded = true;
+    try {
+      _haptics = await import('expo-haptics');
+    } catch {
+      _haptics = null;
+    }
+  }
+  return _haptics;
+}
+function impactLight() {
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
+}
+var ThemeContext = React3.createContext(void 0);
+function useTheme() {
+  const context = React3.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+var isWeb = reactNative.Platform.OS === "web";
+var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
+var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
+var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
+var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
+
+// src/tokens.ts
+var RADIUS = {
+  md: 14};
+var ALL_FAMILIES = [
+  { name: "Feather", component: Feather__default.default },
+  { name: "AntDesign", component: AntDesign__default.default },
+  { name: "Entypo", component: Entypo__default.default },
+  { name: "FontAwesome5", component: FontAwesome5__default.default },
+  { name: "MaterialIcons", component: MaterialIcons__default.default },
+  { name: "Ionicons", component: Ionicons__default.default }
+];
+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 React3__default.default.createElement(entry.component, { name, size, color });
+}
+
+// src/utils/animations.ts
+var TIMINGS = {
+  state: { duration: 160 }};
+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
+};
+
+// src/components/SelectableCard/SelectableCard.tsx
+var SelectableCardContext = React3.createContext(null);
+function SelectableCardGroup({
+  type,
+  value,
+  onValueChange,
+  variant = "elevated",
+  gap = s(8),
+  style,
+  children
+}) {
+  return /* @__PURE__ */ React3__default.default.createElement(SelectableCardContext.Provider, { value: { type, value, onValueChange, variant } }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.group, { gap }, style] }, children));
+}
+function SelectableCard({
+  value,
+  title,
+  description,
+  iconName,
+  icon,
+  disabled = false,
+  style
+}) {
+  const ctx = React3.useContext(SelectableCardContext);
+  if (!ctx) {
+    throw new Error("SelectableCard must be used inside <SelectableCard.Group>");
+  }
+  const { colors } = useTheme();
+  const { type, value: selectedValue, onValueChange, variant } = ctx;
+  const isSelected = type === "radio" ? selectedValue === value : Array.isArray(selectedValue) && selectedValue.includes(value);
+  const handlePress = () => {
+    if (disabled) return;
+    impactLight();
+    if (type === "radio") {
+      onValueChange(value);
+    } else {
+      const arr = Array.isArray(selectedValue) ? selectedValue : [];
+      if (arr.includes(value)) {
+        onValueChange(arr.filter((v) => v !== value));
+      } else {
+        onValueChange([...arr, value]);
+      }
+    }
+  };
+  const variantStyle = (() => {
+    const borderWidth = 2;
+    const base = {
+      elevated: {
+        backgroundColor: colors.card,
+        borderWidth,
+        borderColor: "transparent"
+        // reserve space for selected border
+      },
+      outlined: {
+        backgroundColor: colors.card,
+        borderWidth,
+        borderColor: colors.border
+      },
+      filled: {
+        backgroundColor: colors.surfaceStrong,
+        borderWidth,
+        borderColor: colors.border
+      }
+    }[variant];
+    if (isSelected && !disabled) {
+      return {
+        ...base,
+        borderColor: colors.primary,
+        shadowColor: "transparent",
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        elevation: 0
+      };
+    }
+    if (disabled) {
+      return {
+        ...base,
+        shadowColor: "transparent",
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        elevation: 0,
+        borderColor: colors.border
+      };
+    }
+    return base;
+  })();
+  const resolvedIcon = iconName ? /* @__PURE__ */ React3__default.default.createElement(Icon, { name: iconName, size: ms(22), color: disabled ? colors.foregroundMuted : colors.foregroundMuted }) : icon;
+  const resolvedIconElement = resolvedIcon ? /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.iconWrapper, disabled && { opacity: 0.45 }] }, resolvedIcon) : null;
+  return /* @__PURE__ */ React3__default.default.createElement(
+    reactNative.Pressable,
+    {
+      onPress: handlePress,
+      disabled,
+      accessibilityRole: type === "radio" ? "radio" : "checkbox",
+      accessibilityLabel: `${title}${description ? `, ${description}` : ""}`,
+      accessibilityState: { selected: isSelected, disabled },
+      style: [
+        styles.card,
+        variantStyle,
+        isSelected && !disabled && styles.cardSelected,
+        style
+      ]
+    },
+    /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.row }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.selectorContainer }, type === "radio" ? /* @__PURE__ */ React3__default.default.createElement(
+      reactNativeEase.EaseView,
+      {
+        style: styles.radioCircle,
+        animate: { borderColor: !disabled && isSelected ? colors.primary : colors.border },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React3__default.default.createElement(
+        reactNativeEase.EaseView,
+        {
+          animate: {
+            scale: !disabled && isSelected ? 1 : 0,
+            opacity: !disabled && isSelected ? 1 : 0
+          },
+          transition: SPRING_ELASTIC
+        },
+        /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.radioDot, { backgroundColor: colors.primary }] })
+      )
+    ) : /* @__PURE__ */ React3__default.default.createElement(
+      reactNativeEase.EaseView,
+      {
+        style: styles.checkboxBox,
+        animate: {
+          borderColor: !disabled && isSelected ? colors.primary : colors.border,
+          backgroundColor: !disabled && isSelected ? colors.primary : "transparent"
+        },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React3__default.default.createElement(
+        reactNativeEase.EaseView,
+        {
+          animate: { opacity: !disabled && isSelected ? 1 : 0 },
+          transition: OPACITY_TRANSITION
+        },
+        /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles.checkmark, { borderColor: colors.primaryForeground }] })
+      )
+    )), resolvedIconElement, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.textArea }, /* @__PURE__ */ React3__default.default.createElement(
+      reactNative.Text,
+      {
+        style: [styles.title, { color: disabled ? colors.foregroundMuted : colors.foreground }],
+        allowFontScaling: true,
+        numberOfLines: 2
+      },
+      title
+    ), description ? /* @__PURE__ */ React3__default.default.createElement(
+      reactNative.Text,
+      {
+        style: [styles.description, { color: disabled ? colors.foregroundMuted : colors.foregroundSubtle }],
+        allowFontScaling: true,
+        numberOfLines: 4
+      },
+      description
+    ) : null))
+  );
+}
+var styles = reactNative.StyleSheet.create({
+  group: {
+    width: "100%"
+  },
+  card: {
+    borderRadius: RADIUS.md,
+    borderWidth: 1
+  },
+  cardSelected: {
+    backgroundColor: void 0
+    // overridden by variantStyle
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: s(16),
+    gap: s(12)
+  },
+  selectorContainer: {
+    paddingTop: vs(1)
+  },
+  radioCircle: {
+    width: s(24),
+    height: s(24),
+    borderRadius: s(12),
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  radioDot: {
+    width: s(10),
+    height: s(10),
+    borderRadius: s(5)
+  },
+  checkboxBox: {
+    width: s(24),
+    height: s(24),
+    borderRadius: ms(4),
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkmark: {
+    width: s(12),
+    height: vs(7),
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    transform: [{ rotate: "-45deg" }, { translateY: -1 }]
+  },
+  iconWrapper: {
+    paddingTop: vs(1)
+  },
+  textArea: {
+    flex: 1,
+    gap: vs(4)
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(16),
+    lineHeight: mvs(22)
+  },
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  }
+});
+
+exports.SelectableCard = SelectableCard;
+exports.SelectableCardGroup = SelectableCardGroup;

package/dist/SelectableCard.mjs

@@ -0,0 +1,8 @@
+export { SelectableCard, SelectableCardGroup } from './chunk-BULKGOIZ.mjs';
+import './chunk-M53LC4Q7.mjs';
+import './chunk-ARONDO7M.mjs';
+import './chunk-QY3X2UYR.mjs';
+import './chunk-MZ6WRTD2.mjs';
+import './chunk-KSSVIFYR.mjs';
+import './chunk-2CE3TQVY.mjs';
+import './chunk-Y6FXYEAI.mjs';

package/dist/SelectableGrid.d.mts

@@ -2,43 +2,22 @@ import React from 'react';
 import { ViewStyle } from 'react-native';
 
 interface SelectableGridItem<T extends string | number = string> {
-    /** Unique value emitted on selection. */
     value: T;
-    /** Label rendered under the icon. */
     label?: string;
-    /** Icon name resolved via the icon registry. */
     iconName?: string;
-    /** Custom icon node — overrides `iconName`. */
     icon?: React.ReactNode;
     disabled?: boolean;
 }
 interface SelectableGridProps<T extends string | number = string> {
     items: SelectableGridItem<T>[];
-    /** Selected value(s). Array when `multiple`. */
     value: T | T[] | null;
     onChange: (value: T) => void;
-    /** Allow multiple selections. `value` should be an array. Defaults to false. */
     multiple?: boolean;
-    /** Columns per row. Defaults to 4. Ignored when `orientation='horizontal'`. */
     numColumns?: number;
-    /** Gap between cells (dp). Defaults to 12. */
     gap?: number;
-    /** Layout orientation. 'grid' (default) wraps into rows. 'horizontal' creates a single scrollable row. */
     orientation?: 'grid' | 'horizontal';
     style?: ViewStyle;
 }
-/**
- * Grid of selectable cells (icon + label) — for store / category / emoji pickers
- * where a list would be the wrong shape. Single or multi select.
- *
- * @example
- * <SelectableGrid
- *   items={categories}
- *   value={selected}
- *   onChange={setSelected}
- *   numColumns={4}
- * />
- */
 declare function SelectableGrid<T extends string | number = string>({ items, value, onChange, multiple, numColumns, gap, orientation, style, }: SelectableGridProps<T>): React.JSX.Element;
 
 export { SelectableGrid, type SelectableGridItem, type SelectableGridProps };

package/dist/SelectableGrid.d.ts

@@ -2,43 +2,22 @@ import React from 'react';
 import { ViewStyle } from 'react-native';
 
 interface SelectableGridItem<T extends string | number = string> {
-    /** Unique value emitted on selection. */
     value: T;
-    /** Label rendered under the icon. */
     label?: string;
-    /** Icon name resolved via the icon registry. */
     iconName?: string;
-    /** Custom icon node — overrides `iconName`. */
     icon?: React.ReactNode;
     disabled?: boolean;
 }
 interface SelectableGridProps<T extends string | number = string> {
     items: SelectableGridItem<T>[];
-    /** Selected value(s). Array when `multiple`. */
     value: T | T[] | null;
     onChange: (value: T) => void;
-    /** Allow multiple selections. `value` should be an array. Defaults to false. */
     multiple?: boolean;
-    /** Columns per row. Defaults to 4. Ignored when `orientation='horizontal'`. */
     numColumns?: number;
-    /** Gap between cells (dp). Defaults to 12. */
     gap?: number;
-    /** Layout orientation. 'grid' (default) wraps into rows. 'horizontal' creates a single scrollable row. */
     orientation?: 'grid' | 'horizontal';
     style?: ViewStyle;
 }
-/**
- * Grid of selectable cells (icon + label) — for store / category / emoji pickers
- * where a list would be the wrong shape. Single or multi select.
- *
- * @example
- * <SelectableGrid
- *   items={categories}
- *   value={selected}
- *   onChange={setSelected}
- *   numColumns={4}
- * />
- */
 declare function SelectableGrid<T extends string | number = string>({ items, value, onChange, multiple, numColumns, gap, orientation, style, }: SelectableGridProps<T>): React.JSX.Element;
 
 export { SelectableGrid, type SelectableGridItem, type SelectableGridProps };