@ledgerhq/lumen-ui-rnative 0.0.55 → 0.0.57-0

package/dist/src/lib/StyleSystem/lx/BorderWidth/BorderWidthTable.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { resolveTheme, getSampleAccentColor } from '../';
+export const BorderWidthTable = () => {
+    const borderWidth = resolveTheme().borderWidth;
+    const cells = Object.entries(borderWidth);
+    const accentColor = getSampleAccentColor();
+    const formatCSSToken = (key) => {
+        return `--stroke-${key}`;
+    };
+    return (_jsxs("table", { style: { width: '100%' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Theme object" }), _jsx("th", { children: "Value" }), _jsx("th", { children: "Sample" })] }) }), _jsx("tbody", { children: cells.map(([key, value], i) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: formatCSSToken(key) }) }), _jsx("td", { children: _jsx("code", { children: `theme.borderWidth.${key}` }) }), _jsx("td", { children: _jsx("code", { children: `${value}px` }) }), _jsx("td", { children: _jsx(View, { style: {
+                                    width: 36,
+                                    height: 36,
+                                    borderWidth: value,
+                                    borderColor: accentColor,
+                                    borderRadius: 8,
+                                    backgroundColor: 'transparent',
+                                } }) })] }, i))) })] }));
+};

package/dist/src/lib/StyleSystem/lx/BorderWidth/index.d.ts

@@ -0,0 +1,2 @@
+export { BorderWidthTable } from './BorderWidthTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/StyleSystem/lx/BorderWidth/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/BorderWidth/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/src/lib/StyleSystem/lx/BorderWidth/index.js

@@ -0,0 +1 @@
+export { BorderWidthTable } from './BorderWidthTable';

package/dist/src/lib/StyleSystem/lx/Colors/ColorTable.d.ts

@@ -0,0 +1,6 @@
+type ColorTableProps = {
+    category: 'bg' | 'text' | 'border' | 'crypto' | 'discover';
+};
+export declare const ColorTable: ({ category }: ColorTableProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ColorTable.d.ts.map

package/dist/src/lib/StyleSystem/lx/Colors/ColorTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorTable.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/Colors/ColorTable.tsx"],"names":[],"mappings":"AAGA,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;CAC5D,CAAC;AAEF,eAAO,MAAM,UAAU,iBAAkB,eAAe,4CA8GvD,CAAC"}

package/dist/src/lib/StyleSystem/lx/Colors/ColorTable.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View } from 'react-native';
+import { resolveTheme } from '../';
+export const ColorTable = ({ category }) => {
+    const colors = resolveTheme().colors[category];
+    const cells = Object.entries(colors).filter(([, v]) => {
+        return !(category === 'crypto' && v.endsWith('00')); // filter out "[crypto] 0" tokens
+    });
+    const renderSample = (value) => {
+        if (category === 'text') {
+            return (_jsx(Text, { style: {
+                    color: value,
+                    fontWeight: 'bold',
+                    paddingHorizontal: 4,
+                    ...(isCloseToWhite(value) && {
+                        backgroundColor: 'black',
+                        borderRadius: 6,
+                    }),
+                }, children: "Aa" }));
+        }
+        if (category === 'border') {
+            return (_jsx(View, { style: {
+                    width: 24,
+                    height: 24,
+                    borderWidth: 2,
+                    borderColor: value,
+                    borderRadius: 8,
+                } }));
+        }
+        return (_jsx(View, { style: {
+                backgroundColor: value,
+                width: 24,
+                height: 24,
+                borderRadius: 8,
+                ...(isCloseToWhite(value) && {
+                    borderWidth: 1,
+                    borderColor: 'lightgrey',
+                }),
+            } }));
+    };
+    /**
+     * Compute the background color of the sample cell based on how close
+     * the sample is to white.
+     * @param hex
+     */
+    const isCloseToWhite = (hex, threshold = 230) => {
+        // treat full transparency as white
+        if (parseInt(hex.slice(7, 9)) === 0) {
+            return true;
+        }
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return (r + g + b) / 3 >= threshold;
+    };
+    const formatCSSToken = (key, category) => {
+        const prefix = category === 'bg'
+            ? 'background'
+            : category === 'text'
+                ? 'text'
+                : category;
+        return `--color-${prefix}-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+    };
+    return (_jsxs("table", { style: { width: '100%' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Theme object" }), _jsx("th", { children: "Hex" }), _jsx("th", { children: "Sample" })] }) }), _jsx("tbody", { children: cells.map(([key, value], i) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: formatCSSToken(key, category) }) }), _jsx("td", { children: _jsx("code", { children: `theme.colors.${category}.${key}` }) }), _jsx("td", { children: _jsx("code", { children: value }) }), _jsx("td", { children: renderSample(value) })] }, i))) })] }));
+};

package/dist/src/lib/StyleSystem/lx/Colors/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorTable } from './ColorTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/StyleSystem/lx/Colors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/Colors/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/src/lib/StyleSystem/lx/Colors/index.js

@@ -0,0 +1 @@
+export { ColorTable } from './ColorTable';

package/dist/src/lib/StyleSystem/lx/Shadows/ShadowTable.d.ts

@@ -0,0 +1,2 @@
+export declare const ShadowTable: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShadowTable.d.ts.map

package/dist/src/lib/StyleSystem/lx/Shadows/ShadowTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowTable.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/Shadows/ShadowTable.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,+CAiEvB,CAAC"}

package/dist/src/lib/StyleSystem/lx/Shadows/ShadowTable.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { resolveTheme } from '../';
+export const ShadowTable = () => {
+    const shadows = resolveTheme().shadows;
+    const cells = Object.entries(shadows);
+    const formatShadow = (shadowArray) => {
+        return shadowArray
+            .map((shadow) => `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blurRadius}px ${shadow.spreadDistance}px ${shadow.color}`)
+            .join(', ');
+    };
+    const formatCSSToken = (key) => {
+        return `--shadow-${key}`;
+    };
+    return (_jsxs("table", { style: { width: '100%' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Theme object" }), _jsx("th", { children: "Value" }), _jsx("th", { children: "Sample" })] }) }), _jsx("tbody", { children: cells.map(([key, value], i) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: formatCSSToken(key) }) }), _jsx("td", { children: _jsx("code", { children: `theme.shadows.${key}` }) }), _jsx("td", { children: _jsx("code", { style: { fontSize: '11px' }, children: formatShadow(value) }) }), _jsx("td", { children: _jsx(View, { style: { paddingVertical: 12 }, children: _jsx(View, { style: {
+                                        width: 64,
+                                        height: 64,
+                                        backgroundColor: '#fff',
+                                        borderRadius: 8,
+                                        shadowColor: value[0].color,
+                                        shadowOffset: {
+                                            width: value[0].offsetX,
+                                            height: value[0].offsetY,
+                                        },
+                                        shadowOpacity: 1,
+                                        shadowRadius: value[0].blurRadius,
+                                        elevation: 8,
+                                    } }) }) })] }, i))) })] }));
+};

package/dist/src/lib/StyleSystem/lx/Shadows/index.d.ts

@@ -0,0 +1,2 @@
+export { ShadowTable } from './ShadowTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/StyleSystem/lx/Shadows/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/Shadows/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/lib/StyleSystem/lx/Shadows/index.js

@@ -0,0 +1 @@
+export { ShadowTable } from './ShadowTable';

package/dist/src/lib/StyleSystem/lx/Sizes/SizeTable.d.ts

@@ -0,0 +1,2 @@
+export declare const SizeTable: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SizeTable.d.ts.map

package/dist/src/lib/StyleSystem/lx/Sizes/SizeTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizeTable.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/Sizes/SizeTable.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,+CA0DrB,CAAC"}

package/dist/src/lib/StyleSystem/lx/Sizes/SizeTable.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View } from 'react-native';
+import { resolveTheme, getSampleAccentColor } from '../';
+export const SizeTable = () => {
+    const sizes = resolveTheme().sizes;
+    const cells = Object.entries(sizes);
+    const accentColor = getSampleAccentColor();
+    const formatCSSToken = (key) => {
+        return `--size-${key.replace('s', '')}`;
+    };
+    const renderSample = (value) => {
+        const numericValue = value === '100%' ? 100 : Number(value);
+        if (numericValue >= 100) {
+            return (_jsx(Text, { style: { fontSize: 10, color: 'grey' }, children: "Too large to show!" }));
+        }
+        return (_jsx(View, { style: {
+                width: numericValue,
+                height: numericValue,
+                backgroundColor: accentColor,
+                borderRadius: 4,
+            } }));
+    };
+    return (_jsxs("table", { style: { width: '100%' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Theme object" }), _jsx("th", { children: "Value" }), _jsx("th", { children: "Sample" })] }) }), _jsx("tbody", { children: cells.map(([key, value], i) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: formatCSSToken(key) }) }), _jsx("td", { children: _jsx("code", { children: `theme.sizes.${key}` }) }), _jsx("td", { children: _jsx("code", { children: key === 'full' ? '100%' : `${value}px` }) }), _jsx("td", { children: renderSample(value) })] }, i))) })] }));
+};

package/dist/src/lib/StyleSystem/lx/Sizes/index.d.ts

@@ -0,0 +1,2 @@
+export { SizeTable } from './SizeTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/StyleSystem/lx/Sizes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/Sizes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/src/lib/StyleSystem/lx/Sizes/index.js

@@ -0,0 +1 @@
+export { SizeTable } from './SizeTable';

package/dist/src/lib/StyleSystem/lx/Spacings/SpacingTable.d.ts

@@ -0,0 +1,2 @@
+export declare const SpacingTable: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SpacingTable.d.ts.map

package/dist/src/lib/StyleSystem/lx/Spacings/SpacingTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpacingTable.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/Spacings/SpacingTable.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,+CA8CxB,CAAC"}

package/dist/src/lib/StyleSystem/lx/Spacings/SpacingTable.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { resolveTheme, getSampleAccentColor } from '../';
+export const SpacingTable = () => {
+    const spacings = resolveTheme().spacings;
+    const cells = Object.entries(spacings);
+    const accentColor = getSampleAccentColor();
+    const formatCSSToken = (key) => {
+        return `--spacing-${key.replace('s', '')}`;
+    };
+    return (_jsxs("table", { style: { width: '100%' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Theme object" }), _jsx("th", { children: "Value" }), _jsx("th", { children: "Sample" })] }) }), _jsx("tbody", { children: cells.map(([key, value], i) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: formatCSSToken(key) }) }), _jsx("td", { children: _jsx("code", { children: `theme.spacings.${key}` }) }), _jsx("td", { children: _jsx("code", { children: `${value}px` }) }), _jsx("td", { children: _jsx(View, { style: {
+                                    width: value,
+                                    height: 16,
+                                    backgroundColor: accentColor,
+                                    borderRadius: 2,
+                                } }) })] }, i))) })] }));
+};

package/dist/src/lib/StyleSystem/lx/Spacings/index.d.ts

@@ -0,0 +1,2 @@
+export { SpacingTable } from './SpacingTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/lib/StyleSystem/lx/Spacings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/StyleSystem/lx/Spacings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/src/lib/StyleSystem/lx/Spacings/index.js

@@ -0,0 +1 @@
+export { SpacingTable } from './SpacingTable';