rn-iconify 1.0.0 → 2.0.0

package/lib/commonjs/explorer/IconExplorer.js

@@ -0,0 +1,827 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExplorerContext = void 0;
+exports.IconExplorer = IconExplorer;
+exports.default = void 0;
+exports.useExplorerContext = useExplorerContext;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _useExplorer = require("./useExplorer");
+var _iconSets = require("./iconSets");
+var _IconRenderer = require("../IconRenderer");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Icon Explorer Component
+ * Development tool for exploring and testing icons
+ * Mobile-first responsive design with dark mode support
+ *
+ * @example
+ * ```tsx
+ * import { IconExplorer } from 'rn-iconify/explorer';
+ *
+ * // Only render in development
+ * if (__DEV__) {
+ *   return <IconExplorer onIconSelect={(name) => console.log(name)} />;
+ * }
+ * ```
+ */
+
+const {
+  width: SCREEN_WIDTH
+} = _reactNative.Dimensions.get('window');
+const NUM_COLUMNS = SCREEN_WIDTH > 500 ? 5 : 4;
+const GRID_ITEM_SIZE = (SCREEN_WIDTH - 32 - (NUM_COLUMNS - 1) * 8) / NUM_COLUMNS;
+
+/**
+ * Theme colors
+ */
+
+const lightTheme = {
+  background: '#F9FAFB',
+  surface: '#FFFFFF',
+  surfaceSecondary: '#F3F4F6',
+  border: '#E5E7EB',
+  text: '#111827',
+  textSecondary: '#6B7280',
+  textTertiary: '#9CA3AF',
+  primary: '#6366F1',
+  primaryText: '#FFFFFF',
+  error: '#EF4444',
+  codeBackground: '#1F2937',
+  codeText: '#E5E7EB'
+};
+const darkTheme = {
+  background: '#111827',
+  surface: '#1F2937',
+  surfaceSecondary: '#374151',
+  border: '#374151',
+  text: '#F9FAFB',
+  textSecondary: '#D1D5DB',
+  textTertiary: '#9CA3AF',
+  primary: '#818CF8',
+  primaryText: '#FFFFFF',
+  error: '#F87171',
+  codeBackground: '#0F172A',
+  codeText: '#E2E8F0'
+};
+
+/**
+ * Explorer Context with theme
+ */
+
+const ExplorerContext = exports.ExplorerContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * Hook to access explorer context
+ */
+function useExplorerContext() {
+  const context = (0, _react.useContext)(ExplorerContext);
+  if (!context) {
+    throw new Error('useExplorerContext must be used within IconExplorer');
+  }
+  return context;
+}
+
+/**
+ * Search Bar Component
+ */
+function SearchBar() {
+  const {
+    query,
+    setQuery,
+    theme
+  } = useExplorerContext();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.searchBar, {
+      backgroundColor: theme.surface,
+      borderColor: theme.border
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.searchIconContainer, {
+      backgroundColor: theme.surfaceSecondary
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    iconName: "mdi:magnify",
+    size: 20,
+    color: theme.textSecondary
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
+    style: [styles.searchInput, {
+      color: theme.text
+    }],
+    value: query,
+    onChangeText: setQuery,
+    placeholder: "Search icons...",
+    placeholderTextColor: theme.textTertiary,
+    autoCorrect: false,
+    autoCapitalize: "none"
+  }), query.length > 0 && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.clearButton, {
+      backgroundColor: theme.surfaceSecondary
+    }],
+    onPress: () => setQuery('')
+  }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    iconName: "mdi:close",
+    size: 16,
+    color: theme.textSecondary
+  })));
+}
+
+/**
+ * Icon Set Filter Component
+ */
+function IconSetFilter() {
+  const {
+    iconSets,
+    activeIconSet,
+    filterByIconSet,
+    theme
+  } = useExplorerContext();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    style: styles.filterContainer,
+    contentContainerStyle: styles.filterContent
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.filterChip, {
+      backgroundColor: theme.surface,
+      borderColor: theme.border
+    }, !activeIconSet && {
+      backgroundColor: theme.primary,
+      borderColor: theme.primary
+    }],
+    onPress: () => filterByIconSet(null)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.filterChipText, {
+      color: theme.textSecondary
+    }, !activeIconSet && {
+      color: theme.primaryText
+    }]
+  }, "All")), iconSets.map(set => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    key: set.prefix,
+    style: [styles.filterChip, {
+      backgroundColor: theme.surface,
+      borderColor: theme.border
+    }, activeIconSet === set.prefix && {
+      backgroundColor: theme.primary,
+      borderColor: theme.primary
+    }],
+    onPress: () => filterByIconSet(set.prefix)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.filterChipText, {
+      color: theme.textSecondary
+    }, activeIconSet === set.prefix && {
+      color: theme.primaryText
+    }]
+  }, set.prefix))));
+}
+
+/**
+ * Icon Grid Item Component - Renders actual icons
+ */
+function IconGridItem({
+  item
+}) {
+  const {
+    selectedIcon,
+    selectIcon,
+    theme,
+    isDark
+  } = useExplorerContext();
+  const isSelected = selectedIcon === item.fullName;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.gridItem, {
+      backgroundColor: theme.surfaceSecondary
+    }, isSelected && {
+      backgroundColor: isDark ? '#312E81' : '#EEF2FF',
+      borderWidth: 2,
+      borderColor: theme.primary
+    }],
+    onPress: () => selectIcon(item.fullName),
+    activeOpacity: 0.7
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.iconContainer
+  }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    iconName: item.fullName,
+    size: 28,
+    color: isSelected ? theme.primary : theme.text,
+    placeholder: "skeleton",
+    placeholderColor: theme.textTertiary
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.iconName, {
+      color: isSelected ? theme.primary : theme.textSecondary
+    }],
+    numberOfLines: 1,
+    ellipsizeMode: "middle"
+  }, item.name));
+}
+
+/**
+ * Icon Grid Component
+ */
+function IconGrid() {
+  const {
+    results,
+    isLoading,
+    error,
+    theme,
+    query,
+    collectionsLoaded
+  } = useExplorerContext();
+  if (isLoading && !collectionsLoaded) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.centerContainer
+    }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+      iconName: "mdi:loading",
+      size: 40,
+      color: theme.primary,
+      animate: "spin"
+    }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [styles.loadingText, {
+        color: theme.textSecondary
+      }]
+    }, "Loading icon collections..."), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [styles.loadingHint, {
+        color: theme.textTertiary
+      }]
+    }, "Fetching all available icons from Iconify API"));
+  }
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.centerContainer
+    }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+      iconName: "mdi:loading",
+      size: 32,
+      color: theme.primary,
+      animate: "spin"
+    }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [styles.loadingText, {
+        color: theme.textSecondary
+      }]
+    }, "Searching..."));
+  }
+  if (error) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.centerContainer
+    }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+      iconName: "mdi:alert-circle",
+      size: 48,
+      color: theme.error
+    }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [styles.errorText, {
+        color: theme.error
+      }]
+    }, error));
+  }
+  if (results.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.centerContainer
+    }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+      iconName: "mdi:magnify-close",
+      size: 64,
+      color: theme.textTertiary
+    }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [styles.emptyText, {
+        color: theme.textSecondary
+      }]
+    }, query ? `No icons found for "${query}"` : 'Loading icons...'), query && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [styles.emptyHint, {
+        color: theme.textTertiary
+      }]
+    }, "Try a different search term"));
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+    data: results,
+    keyExtractor: item => item.fullName,
+    renderItem: ({
+      item
+    }) => /*#__PURE__*/_react.default.createElement(IconGridItem, {
+      item: item
+    }),
+    numColumns: NUM_COLUMNS,
+    contentContainerStyle: styles.gridContent,
+    showsVerticalScrollIndicator: false,
+    columnWrapperStyle: styles.gridRow
+  });
+}
+
+/**
+ * Preview Modal Component - Bottom sheet style
+ */
+function PreviewModal() {
+  const {
+    selectedIcon,
+    previewSize,
+    previewColor,
+    setPreviewSize,
+    setPreviewColor,
+    copyIconCode,
+    config,
+    theme,
+    isDark,
+    closePreview
+  } = useExplorerContext();
+  if (!selectedIcon) return null;
+  const sizes = config.preview.sizes;
+  const colors = config.preview.colors;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
+    visible: !!selectedIcon,
+    animationType: "slide",
+    transparent: true,
+    presentationStyle: "overFullScreen"
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    style: styles.modalOverlay,
+    onPress: closePreview
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    style: [styles.previewModal, {
+      backgroundColor: theme.surface
+    }],
+    onPress: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.handleBarContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.handleBar, {
+      backgroundColor: theme.border
+    }]
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.previewHeader
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.previewTitle, {
+      color: theme.text
+    }],
+    numberOfLines: 1
+  }, selectedIcon), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.closePreviewButton, {
+      backgroundColor: theme.surfaceSecondary
+    }],
+    onPress: closePreview
+  }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    iconName: "mdi:close",
+    size: 20,
+    color: theme.textSecondary
+  }))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.largePreviewContainer, {
+      backgroundColor: isDark ? '#0F172A' : '#F8FAFC'
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    iconName: selectedIcon,
+    size: previewSize,
+    color: previewColor
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.selectorRow
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.selectorLabel, {
+      color: theme.textSecondary
+    }]
+  }, "Size"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.selectorOptions
+  }, sizes.map(size => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    key: size,
+    style: [styles.selectorButton, {
+      backgroundColor: theme.surfaceSecondary
+    }, previewSize === size && {
+      backgroundColor: theme.primary
+    }],
+    onPress: () => setPreviewSize(size)
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.selectorButtonText, {
+      color: theme.text
+    }, previewSize === size && {
+      color: theme.primaryText
+    }]
+  }, size))))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.selectorRow
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.selectorLabel, {
+      color: theme.textSecondary
+    }]
+  }, "Color"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.selectorOptions
+  }, colors.map(color => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    key: color,
+    style: [styles.colorButton, {
+      backgroundColor: color,
+      borderColor: 'transparent'
+    }, previewColor === color && {
+      borderColor: theme.text,
+      borderWidth: 3
+    }],
+    onPress: () => setPreviewColor(color)
+  })))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.codePreview, {
+      backgroundColor: theme.codeBackground
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.codeText, {
+      color: theme.codeText
+    }]
+  }, (0, _iconSets.generateImportStatement)(selectedIcon)), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.codeText, {
+      color: theme.codeText
+    }]
+  }, (0, _iconSets.generateIconJSX)(selectedIcon, previewSize, previewColor))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.buttonRow
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.copyButton, {
+      backgroundColor: theme.primary
+    }],
+    onPress: () => copyIconCode(selectedIcon, 'jsx')
+  }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    iconName: "mdi:content-copy",
+    size: 18,
+    color: theme.primaryText
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.copyButtonText, {
+      color: theme.primaryText
+    }]
+  }, "Copy JSX")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.copyButton, {
+      backgroundColor: theme.surfaceSecondary,
+      borderWidth: 1,
+      borderColor: theme.border
+    }],
+    onPress: () => copyIconCode(selectedIcon, 'import')
+  }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    iconName: "mdi:code-tags",
+    size: 18,
+    color: theme.text
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.copyButtonText, {
+      color: theme.text
+    }]
+  }, "With Import"))))));
+}
+
+/**
+ * Results Count Component
+ */
+function ResultsCount() {
+  const {
+    results,
+    isLoading,
+    theme,
+    totalIcons,
+    collectionsLoaded,
+    config
+  } = useExplorerContext();
+  if (isLoading && !collectionsLoaded) return null;
+  const maxResults = config.maxResults;
+  const showingText = results.length === maxResults ? `Showing ${results.length} of ${totalIcons.toLocaleString()}` : `${results.length} icon${results.length !== 1 ? 's' : ''}`;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.resultsCountContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.resultsCount, {
+      color: theme.textTertiary
+    }]
+  }, showingText, collectionsLoaded && totalIcons > 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: {
+      color: theme.textTertiary
+    }
+  }, ' ', "(", totalIcons.toLocaleString(), " total available)")));
+}
+
+/**
+ * Icon Explorer Component
+ * Development tool for exploring and testing icons
+ */
+function IconExplorer({
+  visible = true,
+  onClose,
+  style,
+  ...config
+}) {
+  const colorScheme = (0, _reactNative.useColorScheme)();
+  const isDark = colorScheme === 'dark';
+  const theme = isDark ? darkTheme : lightTheme;
+  const explorer = (0, _useExplorer.useExplorer)(config);
+  const closePreview = () => {
+    explorer.selectIcon(null);
+  };
+  const contextValue = {
+    ...explorer,
+    theme,
+    isDark,
+    closePreview
+  };
+  const content = /*#__PURE__*/_react.default.createElement(ExplorerContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
+    style: [styles.container, {
+      backgroundColor: theme.background
+    }, style]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.header, {
+      backgroundColor: theme.surface,
+      borderBottomColor: theme.border
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.headerLeft
+  }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    iconName: "mdi:palette-outline",
+    size: 24,
+    color: theme.primary
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.headerTitle, {
+      color: theme.text
+    }]
+  }, "Icon Explorer")), onClose && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [styles.closeButton, {
+      backgroundColor: theme.surfaceSecondary
+    }],
+    onPress: onClose
+  }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    iconName: "mdi:close",
+    size: 20,
+    color: theme.textSecondary
+  }))), /*#__PURE__*/_react.default.createElement(SearchBar, null), /*#__PURE__*/_react.default.createElement(IconSetFilter, null), /*#__PURE__*/_react.default.createElement(ResultsCount, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.gridContainer, {
+      backgroundColor: theme.surface,
+      borderColor: theme.border
+    }]
+  }, /*#__PURE__*/_react.default.createElement(IconGrid, null)), /*#__PURE__*/_react.default.createElement(PreviewModal, null)));
+
+  // If used as modal
+  if (onClose) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
+      visible: visible,
+      animationType: "slide",
+      presentationStyle: "pageSheet"
+    }, content);
+  }
+
+  // Inline mode
+  if (!visible) return null;
+  return content;
+}
+
+/**
+ * Styles - Mobile-first design
+ */
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '700'
+  },
+  closeButton: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 18
+  },
+  searchBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 16,
+    marginTop: 16,
+    marginBottom: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    overflow: 'hidden'
+  },
+  searchIconContainer: {
+    paddingHorizontal: 12,
+    paddingVertical: 12
+  },
+  searchInput: {
+    flex: 1,
+    paddingVertical: 12,
+    paddingRight: 12,
+    fontSize: 16
+  },
+  clearButton: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 16,
+    marginRight: 8
+  },
+  filterContainer: {
+    maxHeight: 48,
+    marginBottom: 8
+  },
+  filterContent: {
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    gap: 8
+  },
+  filterChip: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderWidth: 1,
+    marginRight: 8
+  },
+  filterChipText: {
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  resultsCountContainer: {
+    paddingHorizontal: 16,
+    paddingBottom: 8
+  },
+  resultsCount: {
+    fontSize: 13,
+    fontWeight: '500'
+  },
+  gridContainer: {
+    flex: 1,
+    marginHorizontal: 16,
+    marginBottom: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    overflow: 'hidden'
+  },
+  gridContent: {
+    padding: 12
+  },
+  gridRow: {
+    justifyContent: 'flex-start',
+    gap: 8,
+    marginBottom: 8
+  },
+  gridItem: {
+    width: GRID_ITEM_SIZE,
+    height: GRID_ITEM_SIZE + 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    padding: 8
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 4
+  },
+  iconName: {
+    fontSize: 10,
+    textAlign: 'center',
+    marginTop: 2
+  },
+  centerContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    gap: 12
+  },
+  loadingText: {
+    fontSize: 16,
+    marginTop: 8
+  },
+  loadingHint: {
+    fontSize: 13,
+    textAlign: 'center',
+    marginTop: 4
+  },
+  errorText: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginTop: 8
+  },
+  emptyText: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginTop: 8
+  },
+  emptyHint: {
+    fontSize: 14,
+    textAlign: 'center'
+  },
+  // Preview Modal Styles
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end'
+  },
+  previewModal: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingBottom: 34,
+    // Safe area for iPhone
+    maxHeight: '85%'
+  },
+  handleBarContainer: {
+    alignItems: 'center',
+    paddingVertical: 12
+  },
+  handleBar: {
+    width: 40,
+    height: 4,
+    borderRadius: 2
+  },
+  previewHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingBottom: 16
+  },
+  previewTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+    marginRight: 12
+  },
+  closePreviewButton: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 16
+  },
+  largePreviewContainer: {
+    marginHorizontal: 20,
+    borderRadius: 16,
+    height: 120,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 20
+  },
+  selectorRow: {
+    paddingHorizontal: 20,
+    marginBottom: 16
+  },
+  selectorLabel: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 10,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5
+  },
+  selectorOptions: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10
+  },
+  selectorButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    minWidth: 50,
+    alignItems: 'center'
+  },
+  selectorButtonText: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  colorButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    borderWidth: 2
+  },
+  codePreview: {
+    marginHorizontal: 20,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 16
+  },
+  codeText: {
+    fontFamily: 'monospace',
+    fontSize: 12,
+    marginBottom: 4,
+    lineHeight: 18
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    gap: 12,
+    paddingHorizontal: 20
+  },
+  copyButton: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 14,
+    borderRadius: 12,
+    gap: 8
+  },
+  copyButtonText: {
+    fontSize: 15,
+    fontWeight: '600'
+  }
+});
+var _default = exports.default = IconExplorer;
+//# sourceMappingURL=IconExplorer.js.map