@valpro-labs/ui 1.1.4 → 1.1.6

package/dist/components/blocks/night-market-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"night-market-icon.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/night-market-icon.tsx"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaD,iBAAS,eAAe,CAAC,EAAE,IAAW,EAAE,KAAK,EAAE,EAAE,oBAAoB,2CASpE;AAED,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"night-market-icon.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/night-market-icon.tsx"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqBD,iBAAS,eAAe,CAAC,EAAE,IAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,2CAQlE;AAED,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/blocks/night-market-icon.js

@@ -1,20 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCSSVariable } from 'uniwind';
 import { Path, Svg } from '../../lib/svg-shim';
-const VB_W = 20;
-const VB_H = 36;
-const CX = VB_W / 2;
-const CY = VB_H / 2;
+// Square viewBox so the Svg canvas stays square at every `size`. The icon's
+// natural silhouette is a 20x36 rectangle (with a diamond cutout), which we
+// pad to a 36x36 square. Flex containers can then center the Svg on whole
+// pixels, avoiding the sub-pixel drift that a 20x36 Svg canvas produced when
+// consumers wrapped it in a square button (e.g. `size={20}` -> width 11.111).
+const VB = 36;
+const RECT_W = 20;
+const RECT_H = 36;
+const RECT_X = (VB - RECT_W) / 2;
+const RECT_Y = (VB - RECT_H) / 2;
+const CX = VB / 2;
+const CY = VB / 2;
 const HALF_DIAG = 6 * Math.SQRT2;
 const PATH_D = [
-    `M0 0 H${VB_W} V${VB_H} H0 Z`,
+    `M${RECT_X} ${RECT_Y} H${RECT_X + RECT_W} V${RECT_Y + RECT_H} H${RECT_X} Z`,
     `M${CX} ${(CY - HALF_DIAG).toFixed(3)} L${(CX + HALF_DIAG).toFixed(3)} ${CY} L${CX} ${(CY + HALF_DIAG).toFixed(3)} L${(CX - HALF_DIAG).toFixed(3)} ${CY} Z`,
 ].join(' ');
-function NightMarketIcon({ size = VB_H, color }) {
+function NightMarketIcon({ size = VB, color }) {
     const foreground = useCSSVariable('--color-foreground');
     const fill = color ?? (typeof foreground === 'string' ? foreground : 'currentColor');
-    const width = (size * VB_W) / VB_H;
-    return (_jsx(Svg, { width: width, height: size, viewBox: `0 0 ${VB_W} ${VB_H}`, children: _jsx(Path, { d: PATH_D, fill: fill, fillRule: "evenodd" }) }));
+    return (_jsx(Svg, { width: size, height: size, viewBox: `0 0 ${VB} ${VB}`, children: _jsx(Path, { d: PATH_D, fill: fill, fillRule: "evenodd" }) }));
 }
 export { NightMarketIcon };
 //# sourceMappingURL=night-market-icon.js.map

package/dist/components/blocks/night-market-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"night-market-icon.js","sourceRoot":"","sources":["../../../src/components/blocks/night-market-icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAO3C,MAAM,IAAI,GAAG,EAAE,CAAC;AAChB,MAAM,IAAI,GAAG,EAAE,CAAC;AAChB,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC,CAAC;AACpB,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC,CAAC;AACpB,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;AAEjC,MAAM,MAAM,GAAG;IACb,SAAS,IAAI,KAAK,IAAI,OAAO;IAC7B,IAAI,EAAE,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI;CAC5J,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,SAAS,eAAe,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,EAAwB;IACnE,MAAM,UAAU,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACxD,MAAM,IAAI,GAAG,KAAK,IAAI,CAAC,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IACrF,MAAM,KAAK,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IACnC,OAAO,CACL,KAAC,GAAG,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,IAAI,IAAI,EAAE,YAC7D,KAAC,IAAI,IAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAC,SAAS,GAAG,GAC9C,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"night-market-icon.js","sourceRoot":"","sources":["../../../src/components/blocks/night-market-icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAO3C,4EAA4E;AAC5E,4EAA4E;AAC5E,0EAA0E;AAC1E,6EAA6E;AAC7E,8EAA8E;AAC9E,MAAM,EAAE,GAAG,EAAE,CAAC;AACd,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AACjC,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AACjC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAClB,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAClB,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;AAEjC,MAAM,MAAM,GAAG;IACb,IAAI,MAAM,IAAI,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,MAAM,IAAI;IAC3E,IAAI,EAAE,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI;CAC5J,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,SAAS,eAAe,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,EAAwB;IACjE,MAAM,UAAU,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACxD,MAAM,IAAI,GAAG,KAAK,IAAI,CAAC,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IACrF,OAAO,CACL,KAAC,GAAG,IAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,YACxD,KAAC,IAAI,IAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAC,SAAS,GAAG,GAC9C,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/blocks/skin-tile.js

@@ -14,8 +14,8 @@ import { cn } from '../../lib/utils';
  */
 function SkinTile({ swatchUrl, isSelected = false, stateIcon, favoriteBadge, className, }) {
     return (_jsxs(View, { className: cn('bg-card relative items-center justify-center overflow-hidden rounded-lg', isSelected && 'ring-val-red ring-2', className), style: { width: 48, height: 48 }, children: [swatchUrl ? (_jsx(Image, { source: swatchUrl, style: { width: '100%', height: '100%' }, contentFit: "cover" })) : null, isSelected ? (_jsx(View, { className: "bg-val-red/20 absolute inset-0", pointerEvents: "none" })) : null, _jsx(View, { className: "absolute inset-0 items-center justify-center", children: _jsx(View, { className: "items-center justify-center", style: {
-                        width: 18,
-                        height: 18,
+                        width: 20,
+                        height: 20,
                         transform: [{ rotate: '45deg' }],
                         backgroundColor: 'rgba(0,0,0,0.6)',
                         borderWidth: 1,

package/dist/components/blocks/wallet.d.ts

@@ -5,6 +5,10 @@ interface WalletBalance {
     iconUrl?: string;
     /** Current balance. Omit to render a dash placeholder. */
     amount?: number;
+    /** Optional override for icon tint + amount text color.
+     *  Accepts any value expo-image's `tintColor` understands
+     *  (hex, rgb/rgba, named color). Falls back to `--color-foreground`. */
+    color?: string;
 }
 interface WalletProps {
     /** Currencies to render, in the display order chosen by the caller. */
@@ -20,6 +24,11 @@ interface WalletProps {
  *
  * Data-free: the consumer resolves the currency list + icons (from
  * whichever asset store they use) and passes `balances` in display order.
+ *
+ * Each balance accepts an optional `color` which the consumer can use for
+ * threshold-based highlights — e.g. tint Kingdom Credits purple once the
+ * amount crosses some "you can afford X" threshold. When omitted, both the
+ * icon tint and amount text fall back to `--color-foreground`.
  */
 declare function Wallet({ balances, isLoading, className }: WalletProps): import("react/jsx-runtime").JSX.Element;
 export { Wallet };

package/dist/components/blocks/wallet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wallet.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/wallet.tsx"],"names":[],"mappings":"AASA,UAAU,aAAa;IACrB,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,WAAW;IACnB,uEAAuE;IACvE,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAiB,EAAE,SAAS,EAAE,EAAE,WAAW,2CA4BtE;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"wallet.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/wallet.tsx"],"names":[],"mappings":"AASA,UAAU,aAAa;IACrB,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;4EAEwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,WAAW;IACnB,uEAAuE;IACvE,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAiB,EAAE,SAAS,EAAE,EAAE,WAAW,2CA+BtE;AAED,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/blocks/wallet.js

@@ -11,11 +11,16 @@ import { cn } from '../../lib/utils';
  *
  * Data-free: the consumer resolves the currency list + icons (from
  * whichever asset store they use) and passes `balances` in display order.
+ *
+ * Each balance accepts an optional `color` which the consumer can use for
+ * threshold-based highlights — e.g. tint Kingdom Credits purple once the
+ * amount crosses some "you can afford X" threshold. When omitted, both the
+ * icon tint and amount text fall back to `--color-foreground`.
  */
 function Wallet({ balances, isLoading = false, className }) {
     const foregroundRaw = useCSSVariable('--color-foreground');
     const foreground = typeof foregroundRaw === 'string' ? foregroundRaw : undefined;
-    return (_jsx(View, { className: cn('bg-card overflow-hidden rounded-2xl px-4 py-3', className), children: _jsx(View, { className: "flex-row items-center gap-x-4", children: balances.map((b) => (_jsxs(View, { className: "flex-1 flex-row items-center gap-x-1.5", children: [b.iconUrl ? (_jsx(Image, { source: b.iconUrl, style: { width: 18, height: 18, tintColor: foreground }, contentFit: "contain" })) : null, isLoading ? (_jsx(Skeleton, { className: "h-5 w-12 rounded-sm" })) : (_jsx(Text, { className: "text-foreground text-sm leading-5 font-bold", children: b.amount?.toLocaleString() ?? '—' }))] }, b.key))) }) }));
+    return (_jsx(View, { className: cn('bg-card overflow-hidden rounded-2xl px-4 py-3', className), children: _jsx(View, { className: "flex-row items-center gap-x-4", children: balances.map((b) => (_jsxs(View, { className: "flex-1 flex-row items-center gap-x-1.5", children: [b.iconUrl ? (_jsx(Image, { source: b.iconUrl, style: { width: 18, height: 18, tintColor: b.color ?? foreground }, contentFit: "contain" })) : null, isLoading ? (_jsx(Skeleton, { className: "h-5 w-12 rounded-sm" })) : (_jsx(Text, { className: "text-foreground text-sm leading-5 font-bold", style: b.color ? { color: b.color } : undefined, children: b.amount?.toLocaleString() ?? '—' }))] }, b.key))) }) }));
 }
 export { Wallet };
 //# sourceMappingURL=wallet.js.map

package/dist/components/blocks/wallet.js.map

@@ -1 +1 @@
-{"version":3,"file":"wallet.js","sourceRoot":"","sources":["../../../src/components/blocks/wallet.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAoBjC;;;;;;GAMG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,EAAe;IACrE,MAAM,aAAa,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,OAAO,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,YAC7E,KAAC,IAAI,IAAC,SAAS,EAAC,+BAA+B,YAC5C,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACnB,MAAC,IAAI,IAAa,SAAS,EAAC,wCAAwC,aACjE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,IACJ,MAAM,EAAE,CAAC,CAAC,OAAO,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EACvD,UAAU,EAAC,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,EACP,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ,IAAC,SAAS,EAAC,qBAAqB,GAAG,CAC7C,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,SAAS,EAAC,6CAA6C,YAC1D,CAAC,CAAC,MAAM,EAAE,cAAc,EAAE,IAAI,GAAG,GAC7B,CACR,KAdQ,CAAC,CAAC,GAAG,CAeT,CACR,CAAC,GACG,GACF,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"wallet.js","sourceRoot":"","sources":["../../../src/components/blocks/wallet.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAwBjC;;;;;;;;;;;GAWG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,EAAe;IACrE,MAAM,aAAa,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,OAAO,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,SAAS,CAAC,YAC7E,KAAC,IAAI,IAAC,SAAS,EAAC,+BAA+B,YAC5C,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACnB,MAAC,IAAI,IAAa,SAAS,EAAC,wCAAwC,aACjE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,IACJ,MAAM,EAAE,CAAC,CAAC,OAAO,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,IAAI,UAAU,EAAE,EAClE,UAAU,EAAC,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,EACP,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,QAAQ,IAAC,SAAS,EAAC,qBAAqB,GAAG,CAC7C,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,SAAS,EAAC,6CAA6C,EACvD,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,YAE9C,CAAC,CAAC,MAAM,EAAE,cAAc,EAAE,IAAI,GAAG,GAC7B,CACR,KAjBQ,CAAC,CAAC,GAAG,CAkBT,CACR,CAAC,GACG,GACF,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valpro-labs/ui",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Cross-platform UI component library for Valpro Labs",
   "homepage": "https://github.com/valpro-labs/ui#readme",
   "bugs": {