@retray-dev/ui-kit 10.2.0 → 12.2.0

package/dist/chunk-53Z3NYGE.mjs

@@ -1,742 +0,0 @@
-import { selectionAsync, impactMedium } from './chunk-EJ7ZPXOH.mjs';
-import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
-import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
-import React, { useRef, useState, useId, useMemo, useEffect, useCallback } from 'react';
-import { Dimensions, StyleSheet, TouchableOpacity, View, Text } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
-import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-// src/utils/curatedIcons.ts
-var CURATED_ICONS = [
-  {
-    name: "food",
-    label: "Food",
-    labelEs: "Comida",
-    categoryIcon: "coffee",
-    icons: [
-      // Bebidas
-      "coffee",
-      "wine-glass",
-      "beer",
-      "cocktail",
-      "mug-hot",
-      "glass-cheers",
-      "wine",
-      // Comidas
-      "restaurant",
-      "hamburger",
-      "pizza-slice",
-      "ice-cream",
-      "cake",
-      "egg",
-      "fish",
-      "bread-slice",
-      "cookie",
-      "cheese",
-      "carrot",
-      "hotdog",
-      // Cocina / utilidades
-      "utensils",
-      // Delivery / pedidos
-      "shopping-bag",
-      "clock",
-      "star",
-      "heart",
-      "map-pin",
-      "phone"
-    ]
-  },
-  {
-    name: "sports",
-    label: "Sports",
-    labelEs: "Deportes",
-    categoryIcon: "activity",
-    icons: [
-      // Deportes específicos
-      "futbol",
-      "dumbbell",
-      "running",
-      "bicycle",
-      "heartbeat",
-      "fitness-center",
-      // Competencia / logros
-      "target",
-      "award",
-      "flag",
-      "star",
-      "zap",
-      // Bienestar
-      "heart",
-      "clock",
-      "activity",
-      "sun",
-      "user",
-      "users"
-    ]
-  },
-  {
-    name: "business",
-    label: "Business",
-    labelEs: "Negocios",
-    categoryIcon: "briefcase",
-    icons: [
-      "shopping-cart",
-      "shopping-bag",
-      "credit-card",
-      "dollar-sign",
-      "percent",
-      "briefcase",
-      "truck",
-      "package",
-      "gift",
-      "bar-chart",
-      "bar-chart-2",
-      "pie-chart",
-      "trending-up",
-      "trending-down",
-      "activity",
-      "tag",
-      "bookmark",
-      "pocket"
-    ]
-  },
-  {
-    name: "objects",
-    label: "Objects",
-    labelEs: "Objetos",
-    categoryIcon: "folder",
-    icons: [
-      "file",
-      "file-text",
-      "file-plus",
-      "file-minus",
-      "folder",
-      "folder-plus",
-      "folder-minus",
-      "lock",
-      "unlock",
-      "key",
-      "shield",
-      "shield-off",
-      "settings",
-      "sliders",
-      "toggle-left",
-      "toggle-right",
-      "tool",
-      "printer",
-      "database",
-      "server",
-      "hard-drive",
-      "cpu",
-      "paperclip",
-      "aperture",
-      "box",
-      "radio"
-    ]
-  },
-  {
-    name: "status",
-    label: "Status",
-    labelEs: "Estado",
-    categoryIcon: "alert-circle",
-    icons: [
-      "alert-circle",
-      "alert-triangle",
-      "alert-octagon",
-      "info",
-      "help-circle",
-      "bell",
-      "bell-off",
-      "eye",
-      "eye-off",
-      "flag",
-      "zap",
-      "zap-off",
-      "loader",
-      "clock",
-      "watch"
-    ]
-  },
-  {
-    name: "actions",
-    label: "Actions",
-    labelEs: "Acciones",
-    categoryIcon: "edit-3",
-    icons: [
-      "plus",
-      "plus-circle",
-      "plus-square",
-      "minus",
-      "minus-circle",
-      "minus-square",
-      "x",
-      "x-circle",
-      "x-square",
-      "x-octagon",
-      "check",
-      "check-circle",
-      "check-square",
-      "edit",
-      "edit-2",
-      "edit-3",
-      "trash",
-      "trash-2",
-      "copy",
-      "clipboard",
-      "scissors",
-      "download",
-      "download-cloud",
-      "upload",
-      "upload-cloud",
-      "share",
-      "share-2",
-      "link",
-      "link-2",
-      "search",
-      "zoom-in",
-      "zoom-out",
-      "save",
-      "archive",
-      "log-in",
-      "log-out",
-      "power",
-      "refresh-cw",
-      "rotate-cw",
-      "slash"
-    ]
-  },
-  {
-    name: "communication",
-    label: "Communication",
-    labelEs: "Comunicaci\xF3n",
-    categoryIcon: "message-circle",
-    icons: [
-      "mail",
-      "message-circle",
-      "message-square",
-      "send",
-      "phone",
-      "phone-call",
-      "phone-incoming",
-      "phone-outgoing",
-      "phone-missed",
-      "phone-off",
-      "phone-forwarded",
-      "at-sign",
-      "inbox",
-      "user",
-      "user-plus",
-      "user-minus",
-      "user-check",
-      "user-x",
-      "users",
-      "smile",
-      "frown",
-      "meh",
-      "heart",
-      "thumbs-up",
-      "thumbs-down",
-      "star",
-      "award"
-    ]
-  },
-  {
-    name: "navigation",
-    label: "Navigation",
-    labelEs: "Navegaci\xF3n",
-    categoryIcon: "compass",
-    icons: [
-      "arrow-up",
-      "arrow-down",
-      "arrow-left",
-      "arrow-right",
-      "arrow-up-left",
-      "arrow-up-right",
-      "arrow-down-left",
-      "arrow-down-right",
-      "chevron-up",
-      "chevron-down",
-      "chevron-left",
-      "chevron-right",
-      "chevrons-up",
-      "chevrons-down",
-      "chevrons-left",
-      "chevrons-right",
-      "corner-up-left",
-      "corner-up-right",
-      "corner-down-left",
-      "corner-down-right",
-      "corner-left-up",
-      "corner-left-down",
-      "corner-right-up",
-      "corner-right-down",
-      "refresh-cw",
-      "refresh-ccw",
-      "rotate-cw",
-      "rotate-ccw",
-      "navigation",
-      "navigation-2",
-      "compass",
-      "map",
-      "map-pin",
-      "target",
-      "crosshair",
-      "home",
-      "maximize",
-      "maximize-2",
-      "minimize",
-      "minimize-2",
-      "external-link",
-      "move",
-      "anchor"
-    ]
-  },
-  {
-    name: "media",
-    label: "Media",
-    labelEs: "Medios",
-    categoryIcon: "image",
-    icons: [
-      "image",
-      "film",
-      "video",
-      "video-off",
-      "play",
-      "play-circle",
-      "pause",
-      "pause-circle",
-      "square",
-      "stop-circle",
-      "music",
-      "headphones",
-      "speaker",
-      "camera",
-      "camera-off",
-      "mic",
-      "mic-off",
-      "volume",
-      "volume-1",
-      "volume-2",
-      "volume-x",
-      "fast-forward",
-      "rewind",
-      "skip-forward",
-      "skip-back",
-      "repeat",
-      "shuffle",
-      "disc"
-    ]
-  },
-  {
-    name: "layout",
-    label: "Layout",
-    labelEs: "Dise\xF1o",
-    categoryIcon: "grid",
-    icons: [
-      "menu",
-      "more-horizontal",
-      "more-vertical",
-      "grid",
-      "columns",
-      "sidebar",
-      "layout",
-      "list",
-      "align-left",
-      "align-center",
-      "align-right",
-      "align-justify",
-      "bold",
-      "italic",
-      "underline",
-      "type",
-      "filter",
-      "crop",
-      "layers",
-      "hash",
-      "table",
-      "trello",
-      "circle",
-      "square",
-      "triangle",
-      "hexagon",
-      "octagon",
-      "feather",
-      "pen-tool"
-    ]
-  },
-  {
-    name: "nature",
-    label: "Nature",
-    labelEs: "Naturaleza",
-    categoryIcon: "sun",
-    icons: [
-      "sun",
-      "sunrise",
-      "sunset",
-      "moon",
-      "cloud",
-      "cloud-drizzle",
-      "cloud-lightning",
-      "cloud-off",
-      "cloud-rain",
-      "cloud-snow",
-      "wind",
-      "umbrella",
-      "thermometer",
-      "droplet",
-      "life-buoy"
-    ]
-  },
-  {
-    name: "brands",
-    label: "Brands",
-    labelEs: "Marcas",
-    categoryIcon: "globe",
-    icons: [
-      "github",
-      "gitlab",
-      "twitter",
-      "facebook",
-      "instagram",
-      "linkedin",
-      "youtube",
-      "dribbble",
-      "twitch",
-      "slack",
-      "figma",
-      "framer",
-      "chrome",
-      "codepen",
-      "codesandbox",
-      "globe",
-      "rss",
-      "airplay",
-      "cast",
-      "bluetooth",
-      "wifi",
-      "wifi-off",
-      "battery",
-      "battery-charging",
-      "monitor",
-      "tablet",
-      "smartphone",
-      "tv"
-    ]
-  }
-];
-var ALL_CURATED_ICONS = [
-  ...new Set(CURATED_ICONS.flatMap((c) => c.icons))
-];
-
-// src/components/IconPicker/IconPicker.tsx
-var NUM_COLUMNS = 6;
-var GAP = 6;
-var TRIGGER_SIZE = s(56);
-var SCREEN_HEIGHT = Dimensions.get("window").height;
-function IconCell({ name, selected, size, onPress }) {
-  const { colors } = useTheme();
-  const handlePress = () => {
-    selectionAsync();
-    onPress();
-  };
-  const iconColor = selected ? colors.primaryForeground : colors.foreground;
-  const bg = selected ? colors.primary : "transparent";
-  return /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
-    {
-      onPress: handlePress,
-      activeOpacity: 0.6,
-      touchSoundDisabled: true,
-      accessibilityRole: "button",
-      accessibilityState: { selected },
-      accessibilityLabel: name,
-      style: [styles.cell, { width: size, height: size, backgroundColor: bg }]
-    },
-    renderIcon(name, ms(20), iconColor)
-  );
-}
-var IconCellMemo = React.memo(IconCell);
-function IconPicker({
-  value,
-  onChange,
-  label,
-  error,
-  hint,
-  disabled = false,
-  numColumns = NUM_COLUMNS,
-  gap = GAP,
-  style
-}) {
-  const { colors } = useTheme();
-  const insets = useSafeAreaInsets();
-  const sheetRef = useRef(null);
-  const catScrollRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [activeCategory, setActiveCategory] = useState(null);
-  const [containerWidth, setContainerWidth] = useState(() => Dimensions.get("window").width - s(16) * 2);
-  const sheetName = useId();
-  const activeIcons = useMemo(() => {
-    if (activeCategory) {
-      return CURATED_ICONS.find((c) => c.name === activeCategory)?.icons ?? ALL_CURATED_ICONS;
-    }
-    return ALL_CURATED_ICONS;
-  }, [activeCategory]);
-  const gapPx = s(gap);
-  const cellSize = containerWidth > 0 ? Math.floor((containerWidth - gapPx * (numColumns - 1)) / numColumns) : 0;
-  const rows = useMemo(() => {
-    const result = [];
-    for (let i = 0; i < activeIcons.length; i += numColumns) {
-      result.push(activeIcons.slice(i, i + numColumns));
-    }
-    return result;
-  }, [activeIcons, numColumns]);
-  useEffect(() => {
-    if (open) {
-      impactMedium();
-      sheetRef.current?.present();
-    } else {
-      sheetRef.current?.dismiss();
-    }
-  }, [open]);
-  const handleSelect = useCallback(
-    (iconName) => {
-      onChange(iconName);
-      setOpen(false);
-      setActiveCategory(null);
-    },
-    [onChange]
-  );
-  const handleOpen = useCallback(() => {
-    if (disabled) return;
-    setActiveCategory(null);
-    setOpen(true);
-  }, [disabled]);
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    setActiveCategory(null);
-  }, []);
-  const renderBackdrop = useCallback(
-    (props) => /* @__PURE__ */ React.createElement(BottomSheetBackdrop, { ...props, disappearsOnIndex: -1, appearsOnIndex: 0, pressBehavior: "close" }),
-    []
-  );
-  const selectedIcon = value ? renderIcon(value, ms(28), colors.foreground) : null;
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.triggerContainer, style] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.triggerLabel, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
-    {
-      onPress: handleOpen,
-      disabled,
-      activeOpacity: 0.7,
-      touchSoundDisabled: true,
-      accessibilityRole: "button",
-      accessibilityLabel: label ?? "Seleccionar icono",
-      accessibilityState: { disabled },
-      style: [
-        styles.trigger,
-        {
-          backgroundColor: disabled ? colors.surface : colors.background,
-          width: TRIGGER_SIZE,
-          height: TRIGGER_SIZE,
-          borderColor: error ? colors.destructive : value ? colors.primary : colors.border
-        },
-        disabled && styles.triggerDisabled
-      ]
-    },
-    selectedIcon ?? renderIcon("plus", ms(24), colors.foregroundMuted)
-  ), 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, /* @__PURE__ */ React.createElement(
-    BottomSheetModal,
-    {
-      ref: sheetRef,
-      name: sheetName,
-      onDismiss: handleClose,
-      enableDynamicSizing: true,
-      maxDynamicContentSize: SCREEN_HEIGHT * 0.7,
-      backdropComponent: renderBackdrop,
-      backgroundStyle: [styles.sheetBackground, { backgroundColor: colors.card }],
-      handleIndicatorStyle: [styles.handle, { backgroundColor: colors.border }],
-      enablePanDownToClose: true,
-      topInset: insets.top,
-      android_keyboardInputMode: "adjustPan"
-    },
-    /* @__PURE__ */ React.createElement(
-      BottomSheetScrollView,
-      {
-        contentContainerStyle: styles.sheetContent,
-        showsVerticalScrollIndicator: true
-      },
-      /* @__PURE__ */ React.createElement(Text, { style: [styles.sectionLabel, { color: colors.foregroundSubtle }], allowFontScaling: true }, "Categor\xEDas"),
-      /* @__PURE__ */ React.createElement(
-        ScrollView,
-        {
-          ref: catScrollRef,
-          horizontal: true,
-          showsHorizontalScrollIndicator: false,
-          contentContainerStyle: styles.categoryStrip,
-          style: styles.categoryScroll
-        },
-        /* @__PURE__ */ React.createElement(
-          TouchableOpacity,
-          {
-            onPress: () => setActiveCategory(null),
-            activeOpacity: 0.7,
-            touchSoundDisabled: true,
-            accessibilityRole: "button",
-            accessibilityLabel: "Todos",
-            accessibilityState: { selected: activeCategory === null },
-            style: [
-              styles.categoryChip,
-              {
-                backgroundColor: activeCategory === null ? colors.primary : colors.surface,
-                borderColor: activeCategory === null ? colors.primary : colors.border
-              }
-            ]
-          },
-          /* @__PURE__ */ React.createElement(View, { style: styles.categoryChipInner }, renderIcon("grid", ms(14), activeCategory === null ? colors.primaryForeground : colors.foregroundSubtle), /* @__PURE__ */ React.createElement(
-            Text,
-            {
-              style: [
-                styles.categoryChipText,
-                { color: activeCategory === null ? colors.primaryForeground : colors.foreground }
-              ],
-              allowFontScaling: true,
-              numberOfLines: 1
-            },
-            "Todos"
-          ))
-        ),
-        CURATED_ICONS.map((cat) => /* @__PURE__ */ React.createElement(
-          TouchableOpacity,
-          {
-            key: cat.name,
-            onPress: () => setActiveCategory(cat.name),
-            activeOpacity: 0.7,
-            touchSoundDisabled: true,
-            accessibilityRole: "button",
-            accessibilityLabel: cat.labelEs,
-            accessibilityState: { selected: activeCategory === cat.name },
-            style: [
-              styles.categoryChip,
-              {
-                backgroundColor: activeCategory === cat.name ? colors.primary : colors.surface,
-                borderColor: activeCategory === cat.name ? colors.primary : colors.border
-              }
-            ]
-          },
-          /* @__PURE__ */ React.createElement(View, { style: styles.categoryChipInner }, renderIcon(cat.categoryIcon, ms(14), activeCategory === cat.name ? colors.primaryForeground : colors.foregroundSubtle), /* @__PURE__ */ React.createElement(
-            Text,
-            {
-              style: [
-                styles.categoryChipText,
-                { color: activeCategory === cat.name ? colors.primaryForeground : colors.foreground }
-              ],
-              allowFontScaling: true,
-              numberOfLines: 1
-            },
-            cat.labelEs
-          ))
-        ))
-      ),
-      /* @__PURE__ */ React.createElement(View, { style: [styles.separator, { backgroundColor: colors.border }] }),
-      /* @__PURE__ */ React.createElement(View, { style: styles.gridContainer, onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width) }, cellSize > 0 ? rows.map((row, i) => /* @__PURE__ */ React.createElement(View, { key: row[0] ?? `row-${i}`, style: [styles.row, { marginBottom: gapPx }] }, row.map((name) => /* @__PURE__ */ React.createElement(
-        IconCellMemo,
-        {
-          key: name,
-          name,
-          selected: value === name,
-          size: cellSize,
-          onPress: () => handleSelect(name)
-        }
-      )), Array.from({ length: numColumns - row.length }).map((_, j) => /* @__PURE__ */ React.createElement(View, { key: `spacer-${j}`, style: { width: cellSize, height: cellSize } })))) : null)
-    )
-  ));
-}
-var styles = StyleSheet.create({
-  triggerContainer: {
-    gap: vs(8)
-  },
-  triggerLabel: {
-    fontFamily: "Sohne-Medium",
-    fontSize: ms(14)
-  },
-  trigger: {
-    borderRadius: RADIUS.md,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  triggerDisabled: {
-    opacity: 0.6
-  },
-  helperText: {
-    fontFamily: "Sohne-Regular",
-    fontSize: ms(13)
-  },
-  sheetBackground: {
-    borderTopLeftRadius: ms(16),
-    borderTopRightRadius: ms(16)
-  },
-  handle: {
-    width: s(36),
-    height: vs(4),
-    borderRadius: ms(2)
-  },
-  sheetContent: {
-    paddingHorizontal: s(16),
-    paddingBottom: vs(24)
-  },
-  sectionLabel: {
-    fontFamily: "Sohne-Medium",
-    fontSize: ms(12),
-    marginBottom: vs(8),
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  categoryScroll: {
-    flexGrow: 0,
-    flexShrink: 0
-  },
-  categoryStrip: {
-    gap: s(8)
-  },
-  categoryChip: {
-    borderRadius: RADIUS.full,
-    borderWidth: 1,
-    paddingVertical: vs(6),
-    paddingHorizontal: s(12)
-  },
-  categoryChipInner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: s(6)
-  },
-  categoryChipText: {
-    fontFamily: "Sohne-Medium",
-    fontSize: ms(12)
-  },
-  separator: {
-    height: StyleSheet.hairlineWidth,
-    marginVertical: vs(12)
-  },
-  gridContainer: {},
-  row: {
-    flexDirection: "row",
-    gap: GAP
-  },
-  cell: {
-    borderRadius: RADIUS.md,
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
-
-export { IconPicker };