orn-ui 0.2.9 → 0.3.0

package/lib/module/icons/defaultIcons.js

@@ -4,13 +4,35 @@ import React, { memo } from 'react';
 import { Text, View } from 'react-native';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Glifos default dibujados con primitivas de RN (View + border + transform).
- * Cero dependencias, cero fuentes, cero carga asíncrona. Cubren únicamente
- * lo que la librería necesita internamente (checkbox, chevrons de Select,
- * toggle de password en Input, etc). Para íconos de producto, el consumidor
- * inyecta su propio set vía <UIProvider icons={...}> o la prop `icon`.
+ * Default glyphs drawn with RN primitives (View + border + transform).
+ * Zero dependencies, zero fonts, zero async loading. They cover what the
+ * library needs internally (checkbox, Select chevrons, password toggle in
+ * Input, etc) plus a basic set for apps (menu, home, user…).
+ * For a complete set, the consumer injects their own via
+ * <UIProvider icons={...}> or the `icon` prop.
  */
 
+/**
+ * Color of the inner glyph of a filled icon (alert, warning): black or
+ * white depending on the fill's luminance. A fixed white disappeared over
+ * dark mode's light fills (figure and ground). Non-hex colors (rgb(),
+ * names) fall back to white, the common case over saturated accents.
+ */
+export function onColor(fill) {
+  const hex = fill.trim().replace('#', '');
+  const full = hex.length === 3 ? hex.split('').map(c => c + c).join('') : hex.slice(0, 6);
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) return '#fff';
+  const channel = i => {
+    const c = parseInt(full.slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  const r = channel(0);
+  const g = channel(2);
+  const b = channel(4);
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  // Threshold where contrast with black exceeds contrast with white.
+  return luminance > 0.179 ? '#000' : '#fff';
+}
 const Chevron = /*#__PURE__*/memo(({
   size,
   color,
@@ -152,13 +174,13 @@ const PlusMinus = /*#__PURE__*/memo(({
 PlusMinus.displayName = 'PlusMinus';
 
 /**
- * Círculo con un glifo tipográfico adentro (!, i, ?).
+ * Circle with a typographic glyph inside (!, i, ?).
  *
- * Usa <Text> con la fuente del sistema en vez de componer el glifo con
- * Views: sigue siendo cero-dependencias (no carga ninguna fuente), y "i" vs
- * "!" vs "?" quedan inequívocos. Dibujarlos con barras y puntos daba un
- * "info" idéntico a un "!" invertido, que es exactamente lo que un ícono de
- * información no debe comunicar.
+ * Uses <Text> with the system font instead of composing the glyph from
+ * Views: it is still zero-dependency (it loads no font), and "i" vs "!" vs
+ * "?" stay unambiguous. Drawing them with bars and dots gave an "info"
+ * identical to an inverted "!", which is exactly what an information icon
+ * must not convey.
  */
 const Circle = /*#__PURE__*/memo(({
   size,
@@ -181,7 +203,7 @@ const Circle = /*#__PURE__*/memo(({
     children: !!label && /*#__PURE__*/_jsx(Text, {
       allowFontScaling: false,
       style: {
-        color: filled ? '#fff' : color,
+        color: filled ? onColor(color) : color,
         fontSize: size * 0.62,
         lineHeight: size * 0.74,
         fontWeight: '700',
@@ -251,17 +273,17 @@ const Search = /*#__PURE__*/memo(({
   color
 }) => {
   const strokeWidth = Math.max(1.5, size / 9);
-  // Lente grande (72% del alto) arriba-izquierda y mango corto saliendo de su
-  // borde inferior-derecho sobre la diagonal de 45°. Las proporciones importan
-  // a tamaños chicos (16-20px): con un lente chico y mango largo el glifo se
-  // lee como una coma, no como una lupa.
+  // Large lens (72% of the height) at the top-left and a short handle coming
+  // out of its bottom-right edge along the 45° diagonal. The proportions matter
+  // at small sizes (16-20px): with a small lens and a long handle the glyph
+  // reads as a comma, not a magnifying glass.
   const lensD = size * 0.72;
   const lensR = lensD / 2;
   const handleLen = size * 0.34;
   const diag = Math.SQRT1_2; // cos(45°) === sin(45°)
-  // El mango se centra sobre la diagonal, arrancando justo en el borde del
-  // lente: distancia = radio + mitad del mango, menos un solapamiento de
-  // medio trazo para que no quede un hueco entre borde y mango.
+  // The handle is centered on the diagonal, starting right at the lens's
+  // edge: distance = radius + half the handle, minus a half-stroke overlap
+  // so no gap is left between edge and handle.
   const dist = lensR + handleLen / 2 - strokeWidth / 2;
   const cx = lensR + dist * diag;
   const cy = lensR + dist * diag;
@@ -299,7 +321,487 @@ const Search = /*#__PURE__*/memo(({
 });
 Search.displayName = 'Search';
 
-/** Renderer default. Se usa cuando <UIProvider icons={...}> no pasa uno propio. */
+// ── Basic set for apps ─────────────────────────────────────────────────────
+// Same rules as the rest: only View/Text, stroke proportional to the size
+// (`size / 10`, minimum 1.5) and a square `size` box, so they all line up
+// the same way in a row (Gestalt, similarity).
+
+const stroke = size => Math.max(1.5, size / 10);
+const box = size => ({
+  width: size,
+  height: size,
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const Menu = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const sw = stroke(size);
+  const bar = {
+    width: size * 0.7,
+    height: sw,
+    borderRadius: sw / 2,
+    backgroundColor: color
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [box(size), {
+      gap: size * 0.16
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: bar
+    }), /*#__PURE__*/_jsx(View, {
+      style: bar
+    }), /*#__PURE__*/_jsx(View, {
+      style: bar
+    })]
+  });
+});
+Menu.displayName = 'Menu';
+const Scan = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const sw = stroke(size);
+  const arm = size * 0.26;
+  const inset = size * 0.1;
+  const corner = (v, h) => ({
+    position: 'absolute',
+    [v]: inset,
+    [h]: inset,
+    width: arm,
+    height: arm,
+    borderColor: color,
+    [v === 'top' ? 'borderTopWidth' : 'borderBottomWidth']: sw,
+    [h === 'left' ? 'borderLeftWidth' : 'borderRightWidth']: sw
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: box(size),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: corner('top', 'left')
+    }), /*#__PURE__*/_jsx(View, {
+      style: corner('top', 'right')
+    }), /*#__PURE__*/_jsx(View, {
+      style: corner('bottom', 'left')
+    }), /*#__PURE__*/_jsx(View, {
+      style: corner('bottom', 'right')
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.6,
+        height: sw,
+        borderRadius: sw / 2,
+        backgroundColor: color
+      }
+    })]
+  });
+});
+Scan.displayName = 'Scan';
+const More = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const d = Math.max(3, size * 0.16);
+  const dot = {
+    width: d,
+    height: d,
+    borderRadius: d / 2,
+    backgroundColor: color
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [box(size), {
+      flexDirection: 'row',
+      gap: size * 0.12
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: dot
+    }), /*#__PURE__*/_jsx(View, {
+      style: dot
+    }), /*#__PURE__*/_jsx(View, {
+      style: dot
+    })]
+  });
+});
+More.displayName = 'More';
+const Home = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const sw = stroke(size);
+  const roof = size * 0.5;
+  return /*#__PURE__*/_jsxs(View, {
+    style: box(size),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.14,
+        width: roof,
+        height: roof,
+        borderTopWidth: sw,
+        borderLeftWidth: sw,
+        borderColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.12,
+        width: size * 0.56,
+        height: size * 0.4,
+        borderLeftWidth: sw,
+        borderRightWidth: sw,
+        borderBottomWidth: sw,
+        borderColor: color
+      }
+    })]
+  });
+});
+Home.displayName = 'Home';
+const Settings = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const sw = stroke(size);
+  const ring = size * 0.5;
+  const tooth = {
+    width: size * 0.16,
+    height: size * 0.2,
+    backgroundColor: color,
+    borderRadius: sw / 2
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: box(size),
+    children: [[0, 45, 90, 135, 180, 225, 270, 315].map(deg => /*#__PURE__*/_jsx(View, {
+      style: [box(size), {
+        position: 'absolute',
+        transform: [{
+          rotate: `${deg}deg`
+        }]
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        style: [tooth, {
+          position: 'absolute',
+          top: size * 0.08
+        }]
+      })
+    }, deg)), /*#__PURE__*/_jsx(View, {
+      style: {
+        width: ring,
+        height: ring,
+        borderRadius: ring / 2,
+        borderWidth: sw * 1.6,
+        borderColor: color
+      }
+    })]
+  });
+});
+Settings.displayName = 'Settings';
+const User = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const sw = stroke(size);
+  const head = size * 0.38;
+  return /*#__PURE__*/_jsxs(View, {
+    style: box(size),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.08,
+        width: head,
+        height: head,
+        borderRadius: head / 2,
+        borderWidth: sw,
+        borderColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.08,
+        width: size * 0.74,
+        height: size * 0.34,
+        borderTopLeftRadius: size * 0.37,
+        borderTopRightRadius: size * 0.37,
+        borderTopWidth: sw,
+        borderLeftWidth: sw,
+        borderRightWidth: sw,
+        borderColor: color
+      }
+    })]
+  });
+});
+User.displayName = 'User';
+const Trash = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const sw = stroke(size);
+  const bodyW = size * 0.52;
+  const bodyH = size * 0.56;
+  return /*#__PURE__*/_jsxs(View, {
+    style: box(size),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.08,
+        width: size * 0.26,
+        height: size * 0.12,
+        borderTopWidth: sw,
+        borderLeftWidth: sw,
+        borderRightWidth: sw,
+        borderColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.19,
+        width: size * 0.72,
+        height: sw,
+        borderRadius: sw / 2,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.08,
+        width: bodyW,
+        height: bodyH,
+        borderLeftWidth: sw,
+        borderRightWidth: sw,
+        borderBottomWidth: sw,
+        borderBottomLeftRadius: sw * 1.5,
+        borderBottomRightRadius: sw * 1.5,
+        borderColor: color,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: bodyW * 0.22
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: sw * 0.8,
+          height: bodyH * 0.55,
+          backgroundColor: color,
+          borderRadius: sw / 2
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          width: sw * 0.8,
+          height: bodyH * 0.55,
+          backgroundColor: color,
+          borderRadius: sw / 2
+        }
+      })]
+    })]
+  });
+});
+Trash.displayName = 'Trash';
+const Edit = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const sw = stroke(size);
+  return /*#__PURE__*/_jsx(View, {
+    style: box(size),
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center',
+        transform: [{
+          rotate: '45deg'
+        }, {
+          translateY: -size * 0.02
+        }]
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: size * 0.3,
+          height: size * 0.66,
+          borderWidth: sw,
+          borderColor: color,
+          borderTopLeftRadius: sw,
+          borderTopRightRadius: sw
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.15,
+          borderRightWidth: size * 0.15,
+          borderTopWidth: size * 0.22,
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderTopColor: color
+        }
+      })]
+    })
+  });
+});
+Edit.displayName = 'Edit';
+const Share = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const sw = stroke(size);
+  const arm = size * 0.26;
+  return /*#__PURE__*/_jsxs(View, {
+    style: box(size),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.08,
+        width: size * 0.64,
+        height: size * 0.42,
+        borderLeftWidth: sw,
+        borderRightWidth: sw,
+        borderBottomWidth: sw,
+        borderBottomLeftRadius: sw * 1.5,
+        borderBottomRightRadius: sw * 1.5,
+        borderColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.1,
+        width: sw,
+        height: size * 0.56,
+        backgroundColor: color,
+        borderRadius: sw / 2
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.12,
+        width: arm,
+        height: arm,
+        borderTopWidth: sw,
+        borderLeftWidth: sw,
+        borderColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    })]
+  });
+});
+Share.displayName = 'Share';
+const Heart = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  // Two circles over a square rotated 45°: the classic shape, filled.
+  const s = size * 0.46;
+  const lobe = {
+    position: 'absolute',
+    width: s,
+    height: s,
+    borderRadius: s / 2,
+    backgroundColor: color
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: box(size),
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        width: s,
+        height: s,
+        transform: [{
+          translateY: size * 0.05
+        }, {
+          rotate: '45deg'
+        }]
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          width: s,
+          height: s,
+          backgroundColor: color
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: [lobe, {
+          left: -s / 2
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [lobe, {
+          top: -s / 2
+        }]
+      })]
+    })
+  });
+});
+Heart.displayName = 'Heart';
+
+/**
+ * Star: typographic glyph (★, U+2605) like Circle's. A five-pointed star
+ * can't be composed well from rectangles; the variation selector U+FE0E
+ * forces the text version (monochrome, in the requested color) instead of
+ * the emoji.
+ */
+const Star = /*#__PURE__*/memo(({
+  size,
+  color
+}) => /*#__PURE__*/_jsx(View, {
+  style: box(size),
+  children: /*#__PURE__*/_jsx(Text, {
+    allowFontScaling: false,
+    style: {
+      color,
+      fontSize: size * 0.95,
+      lineHeight: size,
+      textAlign: 'center',
+      includeFontPadding: false
+    },
+    children: '\u2605\uFE0E'
+  })
+}));
+Star.displayName = 'Star';
+
+/**
+ * Warning: filled triangle with a "!" (not a circle like `alert`), so that
+ * warning and error aren't told apart by color alone.
+ */
+const WarningTriangle = /*#__PURE__*/memo(({
+  size,
+  color
+}) => {
+  const half = size * 0.5;
+  const height = size * 0.88;
+  return /*#__PURE__*/_jsxs(View, {
+    style: box(size),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: 0,
+        height: 0,
+        borderLeftWidth: half,
+        borderRightWidth: half,
+        borderBottomWidth: height,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderBottomColor: color
+      }
+    }), /*#__PURE__*/_jsx(Text, {
+      allowFontScaling: false,
+      style: {
+        position: 'absolute',
+        bottom: size * 0.06,
+        color: onColor(color),
+        fontSize: size * 0.58,
+        lineHeight: size * 0.66,
+        fontWeight: '700',
+        textAlign: 'center',
+        includeFontPadding: false
+      },
+      children: "!"
+    })]
+  });
+});
+WarningTriangle.displayName = 'WarningTriangle';
+const warned = new Set();
+
+/** All included glyphs, in catalog order. */
+export const BUILT_IN_ICON_NAMES = ['check', 'close', 'plus', 'minus', 'search', 'scan', 'menu', 'more', 'home', 'settings', 'user', 'trash', 'edit', 'share', 'heart', 'star', 'eye', 'eye-off', 'chevron-left', 'chevron-right', 'chevron-up', 'chevron-down', 'alert', 'warning', 'info', 'question'];
+
+/** Default renderer. Used when <UIProvider icons={...}> doesn't pass its own. */
 export function renderDefaultIcon(name, props) {
   switch (name) {
     case 'check':
@@ -343,6 +845,10 @@ export function renderDefaultIcon(name, props) {
       return /*#__PURE__*/_jsx(Search, {
         ...props
       });
+    case 'scan':
+      return /*#__PURE__*/_jsx(Scan, {
+        ...props
+      });
     case 'plus':
       return /*#__PURE__*/_jsx(PlusMinus, {
         ...props
@@ -364,17 +870,61 @@ export function renderDefaultIcon(name, props) {
         label: "i"
       });
     case 'warning':
-      return /*#__PURE__*/_jsx(Circle, {
-        ...props,
-        filled: true,
-        label: "!"
+      return /*#__PURE__*/_jsx(WarningTriangle, {
+        ...props
       });
     case 'question':
       return /*#__PURE__*/_jsx(Circle, {
         ...props,
         label: "?"
       });
+    case 'menu':
+      return /*#__PURE__*/_jsx(Menu, {
+        ...props
+      });
+    case 'more':
+      return /*#__PURE__*/_jsx(More, {
+        ...props
+      });
+    case 'home':
+      return /*#__PURE__*/_jsx(Home, {
+        ...props
+      });
+    case 'settings':
+      return /*#__PURE__*/_jsx(Settings, {
+        ...props
+      });
+    case 'user':
+      return /*#__PURE__*/_jsx(User, {
+        ...props
+      });
+    case 'trash':
+      return /*#__PURE__*/_jsx(Trash, {
+        ...props
+      });
+    case 'edit':
+      return /*#__PURE__*/_jsx(Edit, {
+        ...props
+      });
+    case 'share':
+      return /*#__PURE__*/_jsx(Share, {
+        ...props
+      });
+    case 'heart':
+      return /*#__PURE__*/_jsx(Heart, {
+        ...props
+      });
+    case 'star':
+      return /*#__PURE__*/_jsx(Star, {
+        ...props
+      });
     default:
+      // A name outside the included set only makes sense with a custom
+      // renderer (<UIProvider icons>). Without one there is no glyph: warn once.
+      if (typeof __DEV__ !== 'undefined' && __DEV__ && !warned.has(name)) {
+        warned.add(name);
+        console.warn(`orn-ui: no built-in icon named "${name}". Pass <UIProvider icons={...}> to render custom names.`);
+      }
       return null;
   }
 }