huspy-icons 0.1.5 → 0.1.8

package/src/native/Icon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, TextProps, Platform } from 'react-native';
+import { Text, TextProps } from 'react-native';
 import { glyphMap, fontFamily, IconName } from './glyphMap';
 
 /**
@@ -10,12 +10,12 @@ export interface IconProps extends Omit<TextProps, 'children'> {
    * Name of the icon to display
    */
   name: IconName;
-  
+
   /**
    * Size of the icon (default: 16)
    */
   size?: number;
-  
+
   /**
    * Color of the icon (default: inherits from parent or 'black')
    */
@@ -24,9 +24,9 @@ export interface IconProps extends Omit<TextProps, 'children'> {
 
 /**
  * Icon component for React Native
- * 
+ *
  * Renders icons using a custom font (HuspyIcons)
- * 
+ *
  * @example
  * ```tsx
  * <Icon name="arrow-left" size={24} color="#000" />
@@ -34,17 +34,17 @@ export interface IconProps extends Omit<TextProps, 'children'> {
  */
 const Icon = ({ name, size = 16, color = '#000', style, ...props }: IconProps) => {
   const codepoint = glyphMap[name];
-  
+
   if (!codepoint) {
     if (__DEV__) {
       console.warn(`Icon "${name}" not found in HuspyIcons font`);
     }
     return null;
   }
-  
+
   // Convert codepoint to character
   const glyph = String.fromCharCode(codepoint);
-  
+
   return (
     <Text
       {...props}
@@ -56,6 +56,9 @@ const Icon = ({ name, size = 16, color = '#000', style, ...props }: IconProps) =
           // Ensure icon doesn't inherit text styles
           fontWeight: 'normal',
           fontStyle: 'normal',
+          // Prevent text selection and ensure proper rendering
+          includeFontPadding: false, // Android: removes extra padding
+          textAlignVertical: 'center', // Android: centers the glyph vertically
         },
         style,
       ]}
@@ -71,4 +74,3 @@ const Icon = ({ name, size = 16, color = '#000', style, ...props }: IconProps) =
 
 export default Icon;
 export type { IconName };
-

package/src/native/glyphMap.ts

@@ -4,17 +4,22 @@
 /**
  * Available icon names in the HuspyIcons font
  */
-export type IconName = 'icon-slot' | 'check' | 'arrow-up-right' | 'arrow-left';
+export type IconName = 'user' | 'search' | 'icon-slot' | 'eye-visible' | 'eye-hidden' | 'edit' | 'check' | 'cancel' | 'arrow-left';
 
 /**
  * Mapping of icon names to unicode codepoints
  * Used by the Icon component to render the correct glyph
  */
 export const glyphMap: Record<IconName, number> = {
-  "icon-slot": 61697,
-  "check": 61698,
-  "arrow-up-right": 61699,
-  "arrow-left": 61700
+  "user": 61697,
+  "search": 61698,
+  "icon-slot": 61699,
+  "eye-visible": 61700,
+  "eye-hidden": 61701,
+  "edit": 61702,
+  "check": 61703,
+  "cancel": 61704,
+  "arrow-left": 61705
 };
 
 /**

package/src/react/ArrowLeft.tsx

@@ -6,7 +6,13 @@ const SvgArrowLeft = ({ size = 16, ...props }: ReactIconProps) => {
   const sizeValue = resolveSize(size);
   
   return (
-    <svg width={sizeValue} height={sizeValue} viewBox="0 0 24 24" fill="none" {...props}>
+    <svg
+    width={sizeValue} height={sizeValue}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <path
       fillRule="evenodd"
       clipRule="evenodd"

package/src/react/Cancel.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgCancel = ({ size = 16, ...props }: ReactIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <svg
+    width={sizeValue} height={sizeValue}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
+      fill="currentColor"
+    />
+  </svg>
+  );
+};
+
+export default SvgCancel;

package/src/react/Check.tsx

@@ -6,11 +6,17 @@ const SvgCheck = ({ size = 16, ...props }: ReactIconProps) => {
   const sizeValue = resolveSize(size);
   
   return (
-    <svg width={sizeValue} height={sizeValue} viewBox="0 0 24 24" fill="none" {...props}>
+    <svg
+    width={sizeValue} height={sizeValue}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
+      d="M13.8047 3.52858C14.0651 3.78892 14.0651 4.21103 13.8047 4.47138L6.4714 11.8047C6.21106 12.0651 5.78894 12.0651 5.5286 11.8047L2.19526 8.47138C1.93491 8.21103 1.93491 7.78892 2.19526 7.52858C2.45561 7.26823 2.87772 7.26823 3.13807 7.52858L6 10.3905L12.8619 3.52858C13.1223 3.26823 13.5444 3.26823 13.8047 3.52858Z"
       fill="currentColor"
     />
   </svg>

package/src/react/Edit.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgEdit = ({ size = 16, ...props }: ReactIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <svg
+    width={sizeValue} height={sizeValue}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.8596 3.11765C19.6197 3.02426 19.3627 2.98143 19.1049 2.99207C18.8471 3.00271 18.5946 3.06656 18.3636 3.1793C18.1325 3.29203 17.9282 3.45107 17.7634 3.64587C17.7455 3.66702 17.7267 3.68742 17.7071 3.70701L4.39491 17.0192L3.42524 20.5747L6.9807 19.605L20.2929 6.2928C20.3158 6.26991 20.3398 6.24815 20.3648 6.22759C20.5625 6.06494 20.7235 5.86358 20.8378 5.6366C20.9522 5.40964 21.0174 5.16186 21.0298 4.90899C21.0422 4.65612 21.0014 4.40333 20.9099 4.16664C20.8183 3.92993 20.6779 3.71425 20.4972 3.53353C20.3165 3.3528 20.0994 3.21103 19.8596 3.11765ZM19.0224 0.993769C19.5557 0.971764 20.088 1.06031 20.5852 1.25394C21.0825 1.44757 21.5343 1.74216 21.9114 2.11932C22.2886 2.4965 22.5829 2.948 22.7752 3.44525C22.9676 3.94252 23.0535 4.47436 23.0274 5.00678C23.0014 5.5392 22.8639 6.06014 22.624 6.53634C22.392 6.99698 22.0692 7.4058 21.6754 7.73877L8.20713 21.207C8.08407 21.3301 7.93104 21.4189 7.76314 21.4647L2.26314 22.9647C1.91693 23.0591 1.54667 22.9608 1.29292 22.707C1.03917 22.4533 0.940838 22.083 1.03526 21.7368L2.53526 16.2368C2.58105 16.0689 2.66986 15.9159 2.79292 15.7928L16.2657 2.31998C16.605 1.92839 17.0203 1.60935 17.4865 1.38187C17.9661 1.14787 18.4891 1.01577 19.0224 0.993769Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289L19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711C19.3166 10.0976 18.6834 10.0976 18.2929 9.70711L14.2929 5.70711C13.9024 5.31658 13.9024 4.68342 14.2929 4.29289Z"
+      fill="currentColor"
+    />
+  </svg>
+  );
+};
+
+export default SvgEdit;

package/src/react/EyeHidden.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgEyeHidden = ({ size = 16, ...props }: ReactIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <svg
+    width={sizeValue} height={sizeValue}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.02994 11.7575C2.61883 9.4019 5.4549 5 12.0001 5C18.5453 5 21.3813 9.4019 21.9702 11.7575L22.0285 11.9907L21.9745 12.2249C21.3836 14.7852 18.5247 19 12.0001 19C5.42044 19 2.6206 14.4091 2.03532 12.2631L1.96655 12.011L2.02994 11.7575ZM4.04308 11.9886C4.61202 13.6329 6.83349 17 12.0001 17C17.2425 17 19.4283 13.8356 19.9639 12.0101C19.4182 10.2828 17.2104 7 12.0001 7C6.81136 7 4.60029 10.2556 4.04308 11.9886Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.0001 10C10.8955 10 10.0001 10.8954 10.0001 12C10.0001 13.1046 10.8955 14 12.0001 14C13.1046 14 14.0001 13.1046 14.0001 12C14.0001 10.8954 13.1046 10 12.0001 10ZM8.00008 12C8.00008 9.79086 9.79094 8 12.0001 8C14.2092 8 16.0001 9.79086 16.0001 12C16.0001 14.2091 14.2092 16 12.0001 16C9.79094 16 8.00008 14.2091 8.00008 12Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.7072 3.29289C21.0977 3.68342 21.0977 4.31658 20.7072 4.70711L4.70719 20.7071C4.31666 21.0976 3.6835 21.0976 3.29297 20.7071C2.90245 20.3166 2.90245 19.6834 3.29297 19.2929L19.293 3.29289C19.6835 2.90237 20.3167 2.90237 20.7072 3.29289Z"
+      fill="currentColor"
+    />
+  </svg>
+  );
+};
+
+export default SvgEyeHidden;

package/src/react/EyeVisible.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgEyeVisible = ({ size = 16, ...props }: ReactIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <svg
+    width={sizeValue} height={sizeValue}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.02994 11.7575C2.61883 9.4019 5.4549 5 12.0001 5C18.5453 5 21.3813 9.4019 21.9702 11.7575L22.0285 11.9906L21.9745 12.2249C21.3836 14.7852 18.5247 19 12.0001 19C5.42044 19 2.6206 14.4091 2.03532 12.2631L1.96655 12.011L2.02994 11.7575ZM4.04308 11.9886C4.61202 13.6329 6.83349 17 12.0001 17C17.2425 17 19.4283 13.8356 19.9639 12.0101C19.4182 10.2828 17.2104 7 12.0001 7C6.81136 7 4.60029 10.2556 4.04308 11.9886Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.0001 10C10.8955 10 10.0001 10.8954 10.0001 12C10.0001 13.1046 10.8955 14 12.0001 14C13.1046 14 14.0001 13.1046 14.0001 12C14.0001 10.8954 13.1046 10 12.0001 10ZM8.00008 12C8.00008 9.79086 9.79094 8 12.0001 8C14.2092 8 16.0001 9.79086 16.0001 12C16.0001 14.2091 14.2092 16 12.0001 16C9.79094 16 8.00008 14.2091 8.00008 12Z"
+      fill="currentColor"
+    />
+  </svg>
+  );
+};
+
+export default SvgEyeVisible;

package/src/react/Icon.tsx

@@ -6,14 +6,19 @@ import type { ReactIconProps } from '../shared/types';
  * Auto-generated - do not edit manually
  */
 // Icon: arrow-left
-// Icon: arrow-up-right
+// Icon: cancel
 // Icon: check
+// Icon: edit
+// Icon: eye-hidden
+// Icon: eye-visible
 // Icon: icon-slot
+// Icon: search
+// Icon: user
 
 /**
  * Available icon names
  */
-export type IconName = 'arrow-left' | 'arrow-up-right' | 'check' | 'icon-slot';
+export type IconName = 'arrow-left' | 'cancel' | 'check' | 'edit' | 'eye-hidden' | 'eye-visible' | 'icon-slot' | 'search' | 'user';
 
 /**
  * Props for the unified Icon component
@@ -35,12 +40,22 @@ function loadIcon(name: IconName): Promise<React.ComponentType<any>> {
   switch (name) {
     case 'arrow-left':
       return import('./ArrowLeft').then(m => m.default);
-    case 'arrow-up-right':
-      return import('./ArrowUpRight').then(m => m.default);
+    case 'cancel':
+      return import('./Cancel').then(m => m.default);
     case 'check':
       return import('./Check').then(m => m.default);
+    case 'edit':
+      return import('./Edit').then(m => m.default);
+    case 'eye-hidden':
+      return import('./EyeHidden').then(m => m.default);
+    case 'eye-visible':
+      return import('./EyeVisible').then(m => m.default);
     case 'icon-slot':
       return import('./IconSlot').then(m => m.default);
+    case 'search':
+      return import('./Search').then(m => m.default);
+    case 'user':
+      return import('./User').then(m => m.default);
     default:
       return Promise.reject(new Error(`Icon "${name}" not found`));
   }

package/src/react/IconSlot.tsx

@@ -6,9 +6,15 @@ const SvgIconSlot = ({ size = 16, ...props }: ReactIconProps) => {
   const sizeValue = resolveSize(size);
   
   return (
-    <svg width={sizeValue} height={sizeValue} viewBox="0 0 15 15" fill="none" {...props}>
+    <svg
+    width={sizeValue} height={sizeValue}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <path
-      d="M13.3333 7.33333C13.3333 4.01962 10.647 1.33333 7.33333 1.33333C4.01962 1.33333 1.33333 4.01962 1.33333 7.33333C1.33333 10.647 4.01962 13.3333 7.33333 13.3333C10.647 13.3333 13.3333 10.647 13.3333 7.33333ZM14.6667 7.33333C14.6667 11.3834 11.3834 14.6667 7.33333 14.6667C3.28325 14.6667 0 11.3834 0 7.33333C0 3.28325 3.28325 0 7.33333 0C11.3834 0 14.6667 3.28325 14.6667 7.33333Z"
+      d="M21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12ZM23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12Z"
       fill="currentColor"
     />
   </svg>

package/src/react/Search.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgSearch = ({ size = 16, ...props }: ReactIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <svg
+    width={sizeValue} height={sizeValue}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18C14.866 18 18 14.866 18 11C18 7.13401 14.866 4 11 4ZM2 11C2 6.02944 6.02944 2 11 2C15.9706 2 20 6.02944 20 11C20 15.9706 15.9706 20 11 20C6.02944 20 2 15.9706 2 11Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.9929 15.9929C16.3834 15.6024 17.0166 15.6024 17.4071 15.9929L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L15.9929 17.4071C15.6024 17.0166 15.6024 16.3834 15.9929 15.9929Z"
+      fill="currentColor"
+    />
+  </svg>
+  );
+};
+
+export default SvgSearch;

package/src/react/User.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { ReactIconProps } from '../shared/types';
+import { resolveSize } from '../shared/types';
+
+const SvgUser = ({ size = 16, ...props }: ReactIconProps) => {
+  const sizeValue = resolveSize(size);
+  
+  return (
+    <svg
+    width={sizeValue} height={sizeValue}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.46447 15.4645C6.40215 14.5268 7.67392 14 9 14H15C16.3261 14 17.5979 14.5268 18.5355 15.4645C19.4732 16.4021 20 17.6739 20 19V21C20 21.5523 19.5523 22 19 22C18.4477 22 18 21.5523 18 21V19C18 18.2044 17.6839 17.4413 17.1213 16.8787C16.5587 16.3161 15.7956 16 15 16H9C8.20435 16 7.44129 16.3161 6.87868 16.8787C6.31607 17.4413 6 18.2043 6 19V21C6 21.5523 5.55228 22 5 22C4.44772 22 4 21.5523 4 21V19C4 17.6739 4.52678 16.4021 5.46447 15.4645Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 4C10.3431 4 9 5.34315 9 7C9 8.65685 10.3431 10 12 10C13.6569 10 15 8.65685 15 7C15 5.34315 13.6569 4 12 4ZM7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7C17 9.76142 14.7614 12 12 12C9.23858 12 7 9.76142 7 7Z"
+      fill="currentColor"
+    />
+  </svg>
+  );
+};
+
+export default SvgUser;

package/src/react/index.ts

@@ -1,8 +1,13 @@
 // Auto-generated exports
 export { default as ArrowLeft } from './ArrowLeft';
-export { default as ArrowUpRight } from './ArrowUpRight';
+export { default as Cancel } from './Cancel';
 export { default as Check } from './Check';
+export { default as Edit } from './Edit';
+export { default as EyeHidden } from './EyeHidden';
+export { default as EyeVisible } from './EyeVisible';
 export { default as IconSlot } from './IconSlot';
+export { default as Search } from './Search';
+export { default as User } from './User';
 
 // Unified Icon component
 export { default as Icon } from './Icon';

package/src/react/index.tsx

@@ -1,4 +1,9 @@
 export { default as ArrowLeft } from './ArrowLeft';
-export { default as ArrowUpRight } from './ArrowUpRight';
+export { default as Cancel } from './Cancel';
 export { default as Check } from './Check';
+export { default as Edit } from './Edit';
+export { default as EyeHidden } from './EyeHidden';
+export { default as EyeVisible } from './EyeVisible';
 export { default as IconSlot } from './IconSlot';
+export { default as Search } from './Search';
+export { default as User } from './User';

package/src/react/ArrowUpRight.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import type { ReactIconProps } from '../shared/types';
-import { resolveSize } from '../shared/types';
-
-const SvgArrowUpRight = ({ size = 16, ...props }: ReactIconProps) => {
-  const sizeValue = resolveSize(size);
-  
-  return (
-    <svg width={sizeValue} height={sizeValue} viewBox="0 0 24 24" fill="none" {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6 7C6 6.44772 6.44772 6 7 6H17C17.5523 6 18 6.44772 18 7V17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17V8H7C6.44772 8 6 7.55228 6 7Z"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289Z"
-      fill="currentColor"
-    />
-  </svg>
-  );
-};
-
-export default SvgArrowUpRight;