@aurea-uds/native 0.9.0 → 0.10.1

package/README.md

@@ -852,6 +852,16 @@ poda nenhuma: módulo que não é importado não entra no grafo.
 Os nomes são **os mesmos do sprite da web**, e um gate cobra isso (check 38): o que `<Icon name>`
 desenha lá, `icons/<nome>` desenha aqui.
 
+**Um glifo próprio** (o logotipo do app) sai de `criarGlifo`, sem o app importar o
+`react-native-svg`: retângulos, círculos e caminhos, preenchidos ou a traço. A tinta usa os nomes
+do SVG, e `"currentColor"` é a cor do `Icon`:
+
+```tsx
+const Logo = criarGlifo({fill: "none", stroke: "currentColor", strokeWidth: 2,
+                         strokeLinecap: "round", paths: ["M…"]});
+const ICONES = criarRegistroDeIcones({...OS_DO_APP, logo: Logo});
+```
+
 ## O que este pacote não faz
 
 - **Não promete paridade** com a web. O React Native não tem `<p>`, cascata de tipografia,

package/dist/icon.d.ts

@@ -13,10 +13,25 @@ export type AureaIconRegistry = Readonly<Record<IconName, AureaIconComponent>>;
  * render invalidaria o `useMemo` de todo componente que o recebe.
  */
 export declare const criarRegistroDeIcones: <T extends AureaIconRegistry>(r: T) => T;
-/** Uma forma do glifo. Sem `fill`, ela pinta com a cor que o `Icon` passar (a do tema, por padrão). */
+/**
+ * A tinta de uma forma. Sem `fill`, ela pinta com a cor que o `Icon` passar (a do tema, por
+ * padrão). Os nomes são os do SVG, para quem copia de um arquivo `.svg` copiar sem traduzir.
+ *
+ * **`"currentColor"`** em `fill` ou `stroke` quer dizer "a cor do `Icon`", como na web — e é o que
+ * faz um desenho a traço trocar de cor com o tema.
+ */
 interface Pintura {
-    /** Cor fixa desta forma, ou `"none"` para não pintar. Sem isto, a forma segue o `color`. */
+    /** Cor fixa desta forma, `"currentColor"`, ou `"none"` para não pintar. Sem isto, segue o `color`. */
     fill?: string;
+    /**
+     * Cor do TRAÇO. Sem isto não há traço. Desenho só de traço leva `fill: "none"`, como no SVG.
+     * R-05, a metade que faltava.
+     */
+    stroke?: string;
+    /** Espessura do traço, na unidade do `viewBox`: cresce e encolhe junto com o glifo. */
+    strokeWidth?: number;
+    strokeLinecap?: "butt" | "round" | "square";
+    strokeLinejoin?: "miter" | "round" | "bevel";
 }
 export interface AureaGlifoCaminho extends Pintura {
     d: string;
@@ -34,7 +49,11 @@ export interface AureaGlifoRetangulo extends Pintura {
     height: number;
     rx?: number;
 }
-export interface AureaGlifoDesenho {
+/**
+ * A tinta declarada aqui vale para TODAS as formas, como os atributos no `<svg>` raiz de um
+ * arquivo. A tinta de cada forma vence a do desenho.
+ */
+export interface AureaGlifoDesenho extends Pintura {
     /** Padrão `"0 0 32 32"`, a caixa dos glifos do Carbon. */
     viewBox?: string;
     rects?: readonly AureaGlifoRetangulo[];
@@ -48,6 +67,9 @@ export interface AureaGlifoDesenho {
  *
  * ```tsx
  * const Marca = criarGlifo({viewBox: "0 0 64 64", circles: [{cx: 32, cy: 32, r: 30}], paths: ["M…"]});
+ * // a traço: a tinta no desenho inteiro, como no `<svg>` raiz
+ * const Logo = criarGlifo({fill: "none", stroke: "currentColor", strokeWidth: 2,
+ *                          strokeLinecap: "round", paths: ["M…"]});
  * const ICONES = criarRegistroDeIcones({...OS_DO_APP, marca: Marca});
  * <Icon name="marca" size="xl" />
  * ```

package/dist/icon.js

@@ -28,12 +28,30 @@ import { useAureaTokens } from "./theme.js";
  * render invalidaria o `useMemo` de todo componente que o recebe.
  */
 export const criarRegistroDeIcones = (r) => r;
+/** `"currentColor"` vira a cor do `Icon`; o resto passa como veio. */
+const tinta = (v, color) => (v === "currentColor" ? color : v);
+/** A tinta final de uma forma: a dela, senão a do desenho, senão a cor do `Icon` no `fill`. */
+function pintar(forma, desenho, color) {
+    const stroke = tinta(forma.stroke ?? desenho.stroke, color);
+    return {
+        fill: tinta(forma.fill ?? desenho.fill, color) ?? color,
+        ...(stroke !== undefined && {
+            stroke,
+            strokeWidth: forma.strokeWidth ?? desenho.strokeWidth,
+            strokeLinecap: forma.strokeLinecap ?? desenho.strokeLinecap,
+            strokeLinejoin: forma.strokeLinejoin ?? desenho.strokeLinejoin,
+        }),
+    };
+}
 /**
  * Um glifo PRÓPRIO do app — um logotipo, por exemplo — desenhado pela Aurea a partir dos dados
  * do desenho. R-05, 24/09/2026.
  *
  * ```tsx
  * const Marca = criarGlifo({viewBox: "0 0 64 64", circles: [{cx: 32, cy: 32, r: 30}], paths: ["M…"]});
+ * // a traço: a tinta no desenho inteiro, como no `<svg>` raiz
+ * const Logo = criarGlifo({fill: "none", stroke: "currentColor", strokeWidth: 2,
+ *                          strokeLinecap: "round", paths: ["M…"]});
  * const ICONES = criarRegistroDeIcones({...OS_DO_APP, marca: Marca});
  * <Icon name="marca" size="xl" />
  * ```
@@ -51,9 +69,9 @@ export const criarRegistroDeIcones = (r) => r;
  */
 export function criarGlifo(desenho) {
     const { viewBox = "0 0 32 32", rects = [], circles = [], paths = [] } = desenho;
-    const Glifo = ({ size = 32, color = "#000000" }) => (_jsxs(Svg, { width: size, height: size, viewBox: viewBox, children: [rects.map((r, i) => _jsx(Rect, { ...r, fill: r.fill ?? color }, `r${i}`)), circles.map((c, i) => _jsx(Circle, { ...c, fill: c.fill ?? color }, `c${i}`)), paths.map((p, i) => {
+    const Glifo = ({ size = 32, color = "#000000" }) => (_jsxs(Svg, { width: size, height: size, viewBox: viewBox, children: [rects.map((r, i) => _jsx(Rect, { ...r, ...pintar(r, desenho, color) }, `r${i}`)), circles.map((c, i) => _jsx(Circle, { ...c, ...pintar(c, desenho, color) }, `c${i}`)), paths.map((p, i) => {
                 const c = typeof p === "string" ? { d: p } : p;
-                return _jsx(Path, { ...c, fill: c.fill ?? color }, `p${i}`);
+                return _jsx(Path, { ...c, ...pintar(c, desenho, color) }, `p${i}`);
             })] }));
     return Glifo;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.9.0",
-  "description": "React Native target for Aurea UDS: the theme x density provider, the first components and the Carbon icons, drawn on react-native-svg.",
+  "version": "0.10.1",
+  "description": "A Aurea UDS para React Native: o provider de tema e densidade, os componentes e os ícones do Carbon sobre react-native-svg.",
   "keywords": [
     "aurea",
     "design-system",
@@ -16,6 +16,10 @@
     "url": "git+https://github.com/victor1mor/aurea-uds.git",
     "directory": "packages/native"
   },
+  "homepage": "https://github.com/victor1mor/aurea-uds/tree/main/packages/native#readme",
+  "bugs": {
+    "url": "https://github.com/victor1mor/aurea-uds/issues"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -47,7 +51,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.9.0"
+    "@aurea-uds/tokens": "^0.10.1"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",