@hanzo/ui 8.27.49 → 8.27.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/agents/index.cjs +2 -4
- package/dist/agents/index.d.ts +0 -1
- package/dist/agents/index.d.ts.map +1 -1
- package/dist/agents/index.js +0 -1
- package/dist/agents/index.js.map +1 -1
- package/dist/backends/gui/button.cjs +9 -1
- package/dist/backends/gui/button.d.ts.map +1 -1
- package/dist/backends/gui/button.js +9 -1
- package/dist/backends/gui/button.js.map +1 -1
- package/dist/gallery.html +6 -3
- package/dist/styles.css +3 -0
- package/package.json +1 -1
- package/dist/agents/ThemeCustomizer.cjs +0 -43
- package/dist/agents/ThemeCustomizer.d.ts +0 -14
- package/dist/agents/ThemeCustomizer.d.ts.map +0 -1
- package/dist/agents/ThemeCustomizer.js +0 -40
- package/dist/agents/ThemeCustomizer.js.map +0 -1
package/dist/styles.css
CHANGED
|
@@ -3173,6 +3173,7 @@ a svg,
|
|
|
3173
3173
|
:root:root:root:root ._bg-0focus-visible-rim:focus-visible{background-color:var(--rim) !important;}
|
|
3174
3174
|
@media (hover) {:root:root ._bg-0hover-background:hover{background-color:var(--background) !important;}}
|
|
3175
3175
|
@media (hover) {:root:root ._bg-0hover-backgroundH3423444:hover{background-color:var(--backgroundHover) !important;}}
|
|
3176
|
+
@media (hover) {:root:root ._bg-0hover-destructive1387781423:hover{background-color:var(--destructive-hover) !important;}}
|
|
3176
3177
|
@media (hover) {:root:root ._bg-0hover-edge:hover{background-color:var(--edge) !important;}}
|
|
3177
3178
|
@media (hover) {:root:root ._bg-0hover-hover:hover{background-color:var(--hover) !important;}}
|
|
3178
3179
|
@media (hover) {:root:root ._bg-0hover-panel:hover{background-color:var(--panel) !important;}}
|
|
@@ -3189,6 +3190,7 @@ a svg,
|
|
|
3189
3190
|
:root ._bg-color3{background-color:var(--color3);}
|
|
3190
3191
|
:root ._bg-color3rgba11269896602{background-color:var(--color3, rgba(128, 128, 128, 0.14));}
|
|
3191
3192
|
:root ._bg-color5{background-color:var(--color5);}
|
|
3193
|
+
:root ._bg-destructive{background-color:var(--destructive);}
|
|
3192
3194
|
:root ._bg-edge{background-color:var(--edge);}
|
|
3193
3195
|
:root ._bg-faint{background-color:var(--faint);}
|
|
3194
3196
|
:root ._bg-green1{background-color:var(--green1);}
|
|
@@ -3363,6 +3365,7 @@ a svg,
|
|
|
3363
3365
|
:root ._col-color{color:var(--color);}
|
|
3364
3366
|
:root ._col-color11{color:var(--color11);}
|
|
3365
3367
|
:root ._col-color12{color:var(--color12);}
|
|
3368
|
+
:root ._col-destructive1568942800{color:var(--destructive-foreground);}
|
|
3366
3369
|
:root ._col-faint{color:var(--faint);}
|
|
3367
3370
|
:root ._col-green11{color:var(--green11);}
|
|
3368
3371
|
:root ._col-ink{color:var(--ink);}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.27.
|
|
3
|
+
"version": "8.27.50",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
|
|
6
6
|
"exports": {
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ThemeCustomizer = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const ACCENTS = [
|
|
6
|
-
{ name: 'Indigo', value: '#6366f1' },
|
|
7
|
-
{ name: 'Cyan', value: '#06b6d4' },
|
|
8
|
-
{ name: 'Emerald', value: '#10b981' },
|
|
9
|
-
{ name: 'Amber', value: '#f59e0b' },
|
|
10
|
-
{ name: 'Rose', value: '#f43f5e' },
|
|
11
|
-
{ name: 'Purple', value: '#a855f7' },
|
|
12
|
-
];
|
|
13
|
-
const ThemeCustomizer = ({ config, onChange, className = '', style, }) => {
|
|
14
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
15
|
-
display: 'flex',
|
|
16
|
-
flexDirection: 'column',
|
|
17
|
-
gap: 16,
|
|
18
|
-
padding: 20,
|
|
19
|
-
backgroundColor: '#0c0c0e',
|
|
20
|
-
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
21
|
-
borderRadius: 16,
|
|
22
|
-
...style,
|
|
23
|
-
}, "aria-label": "Theme Customizer", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: 16 }, children: "\uD83C\uDFA8" }), (0, jsx_runtime_1.jsx)("h3", { style: { fontSize: 12, fontWeight: 600, color: '#ffffff', textTransform: 'uppercase', letterSpacing: '0.05em', margin: 0 }, children: "Appearance & Glassmorphism" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [(0, jsx_runtime_1.jsx)("label", { style: { fontSize: 12, color: '#a3a3a3', fontWeight: 500 }, children: "Accent Palette" }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: ACCENTS.map((accent) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => onChange({ ...config, accentColor: accent.value }), style: {
|
|
24
|
-
width: 28,
|
|
25
|
-
height: 28,
|
|
26
|
-
borderRadius: '50%',
|
|
27
|
-
backgroundColor: accent.value,
|
|
28
|
-
cursor: 'pointer',
|
|
29
|
-
border: config.accentColor === accent.value ? '2px solid #ffffff' : 'none',
|
|
30
|
-
boxShadow: config.accentColor === accent.value ? '0 0 10px ' + accent.value : 'none',
|
|
31
|
-
}, title: accent.name }, accent.value))) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [(0, jsx_runtime_1.jsx)("label", { style: { fontSize: 12, color: '#a3a3a3', fontWeight: 500 }, children: "Glassmorphism Intensity" }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }, children: ['low', 'medium', 'high', 'ultra'].map((level) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => onChange({ ...config, blurLevel: level }), style: {
|
|
32
|
-
padding: '6px 0',
|
|
33
|
-
fontSize: 12,
|
|
34
|
-
fontWeight: 500,
|
|
35
|
-
textTransform: 'capitalize',
|
|
36
|
-
borderRadius: 8,
|
|
37
|
-
border: config.blurLevel === level ? '1px solid #6366f1' : '1px solid rgba(255, 255, 255, 0.1)',
|
|
38
|
-
backgroundColor: config.blurLevel === level ? 'rgba(99, 102, 241, 0.2)' : 'rgba(255, 255, 255, 0.05)',
|
|
39
|
-
color: config.blurLevel === level ? '#c7d2fe' : '#a3a3a3',
|
|
40
|
-
cursor: 'pointer',
|
|
41
|
-
}, children: level }, level))) })] })] }));
|
|
42
|
-
};
|
|
43
|
-
exports.ThemeCustomizer = ThemeCustomizer;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface ThemeConfig {
|
|
3
|
-
blurLevel: 'low' | 'medium' | 'high' | 'ultra';
|
|
4
|
-
accentColor: string;
|
|
5
|
-
mode: 'dark' | 'light' | 'system';
|
|
6
|
-
}
|
|
7
|
-
export interface ThemeCustomizerProps {
|
|
8
|
-
config: ThemeConfig;
|
|
9
|
-
onChange: (config: ThemeConfig) => void;
|
|
10
|
-
className?: string;
|
|
11
|
-
style?: React.CSSProperties;
|
|
12
|
-
}
|
|
13
|
-
export declare const ThemeCustomizer: React.FC<ThemeCustomizerProps>;
|
|
14
|
-
//# sourceMappingURL=ThemeCustomizer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeCustomizer.d.ts","sourceRoot":"","sources":["../../src/agents/ThemeCustomizer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;CAClC;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,WAAW,CAAA;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAWD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6E1D,CAAA"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
const ACCENTS = [
|
|
3
|
-
{ name: 'Indigo', value: '#6366f1' },
|
|
4
|
-
{ name: 'Cyan', value: '#06b6d4' },
|
|
5
|
-
{ name: 'Emerald', value: '#10b981' },
|
|
6
|
-
{ name: 'Amber', value: '#f59e0b' },
|
|
7
|
-
{ name: 'Rose', value: '#f43f5e' },
|
|
8
|
-
{ name: 'Purple', value: '#a855f7' },
|
|
9
|
-
];
|
|
10
|
-
export const ThemeCustomizer = ({ config, onChange, className = '', style, }) => {
|
|
11
|
-
return (_jsxs("div", { style: {
|
|
12
|
-
display: 'flex',
|
|
13
|
-
flexDirection: 'column',
|
|
14
|
-
gap: 16,
|
|
15
|
-
padding: 20,
|
|
16
|
-
backgroundColor: '#0c0c0e',
|
|
17
|
-
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
18
|
-
borderRadius: 16,
|
|
19
|
-
...style,
|
|
20
|
-
}, "aria-label": "Theme Customizer", children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontSize: 16 }, children: "\uD83C\uDFA8" }), _jsx("h3", { style: { fontSize: 12, fontWeight: 600, color: '#ffffff', textTransform: 'uppercase', letterSpacing: '0.05em', margin: 0 }, children: "Appearance & Glassmorphism" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsx("label", { style: { fontSize: 12, color: '#a3a3a3', fontWeight: 500 }, children: "Accent Palette" }), _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: ACCENTS.map((accent) => (_jsx("button", { onClick: () => onChange({ ...config, accentColor: accent.value }), style: {
|
|
21
|
-
width: 28,
|
|
22
|
-
height: 28,
|
|
23
|
-
borderRadius: '50%',
|
|
24
|
-
backgroundColor: accent.value,
|
|
25
|
-
cursor: 'pointer',
|
|
26
|
-
border: config.accentColor === accent.value ? '2px solid #ffffff' : 'none',
|
|
27
|
-
boxShadow: config.accentColor === accent.value ? '0 0 10px ' + accent.value : 'none',
|
|
28
|
-
}, title: accent.name }, accent.value))) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsx("label", { style: { fontSize: 12, color: '#a3a3a3', fontWeight: 500 }, children: "Glassmorphism Intensity" }), _jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }, children: ['low', 'medium', 'high', 'ultra'].map((level) => (_jsx("button", { onClick: () => onChange({ ...config, blurLevel: level }), style: {
|
|
29
|
-
padding: '6px 0',
|
|
30
|
-
fontSize: 12,
|
|
31
|
-
fontWeight: 500,
|
|
32
|
-
textTransform: 'capitalize',
|
|
33
|
-
borderRadius: 8,
|
|
34
|
-
border: config.blurLevel === level ? '1px solid #6366f1' : '1px solid rgba(255, 255, 255, 0.1)',
|
|
35
|
-
backgroundColor: config.blurLevel === level ? 'rgba(99, 102, 241, 0.2)' : 'rgba(255, 255, 255, 0.05)',
|
|
36
|
-
color: config.blurLevel === level ? '#c7d2fe' : '#a3a3a3',
|
|
37
|
-
cursor: 'pointer',
|
|
38
|
-
}, children: level }, level))) })] })] }));
|
|
39
|
-
};
|
|
40
|
-
//# sourceMappingURL=ThemeCustomizer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeCustomizer.js","sourceRoot":"","sources":["../../src/agents/ThemeCustomizer.tsx"],"names":[],"mappings":"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"}
|