@hanzo/ui 8.0.40 → 8.0.43
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/README.md +1 -1
- package/dist/backends/gui/button.cjs +19 -2
- package/dist/backends/gui/button.d.ts.map +1 -1
- package/dist/backends/gui/button.js +19 -2
- package/dist/backends/gui/button.js.map +1 -1
- package/dist/backends/gui/focus.cjs +36 -0
- package/dist/backends/gui/focus.d.ts +39 -0
- package/dist/backends/gui/focus.d.ts.map +1 -0
- package/dist/backends/gui/focus.js +34 -0
- package/dist/backends/gui/focus.js.map +1 -0
- package/dist/backends/gui/glass.cjs +31 -0
- package/dist/backends/gui/glass.d.ts +9 -0
- package/dist/backends/gui/glass.d.ts.map +1 -0
- package/dist/backends/gui/glass.js +29 -0
- package/dist/backends/gui/glass.js.map +1 -0
- package/dist/backends/gui/index.cjs +3 -1
- package/dist/backends/gui/index.d.ts +1 -0
- package/dist/backends/gui/index.d.ts.map +1 -1
- package/dist/backends/gui/index.js +1 -0
- package/dist/backends/gui/index.js.map +1 -1
- package/dist/backends/gui/input.cjs +2 -1
- package/dist/backends/gui/input.d.ts.map +1 -1
- package/dist/backends/gui/input.js +2 -1
- package/dist/backends/gui/input.js.map +1 -1
- package/dist/backends/gui/textarea.cjs +2 -1
- package/dist/backends/gui/textarea.d.ts.map +1 -1
- package/dist/backends/gui/textarea.js +2 -1
- package/dist/backends/gui/textarea.js.map +1 -1
- package/dist/primitives/Glass.cjs +8 -0
- package/dist/primitives/Glass.d.ts +2 -0
- package/dist/primitives/Glass.d.ts.map +1 -0
- package/dist/primitives/Glass.js +5 -0
- package/dist/primitives/Glass.js.map +1 -0
- package/dist/theme.css +63 -36
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -117,4 +117,4 @@ registerField('rating', { Display: MyStars, Input: MyStarPicker })
|
|
|
117
117
|
- **Clean-room** — original implementation, no GPL / Twenty code. Airtable/Twenty-*class* polish, our own code.
|
|
118
118
|
- **Cross-platform** — web + native + desktop, because it's only `@hanzo/gui`.
|
|
119
119
|
|
|
120
|
-
|
|
120
|
+
MIT · Hanzo AI — see [LICENSE.md](../../LICENSE.md). HIP-0137 (`hanzoai/hips`).
|
|
@@ -59,8 +59,25 @@ const Frame = (0, gui_1.styled)(gui_1.Button.Frame, {
|
|
|
59
59
|
cursor: 'pointer',
|
|
60
60
|
variants: {
|
|
61
61
|
variant: {
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
// The unmarked case is QUIET: a control on the surface ladder, hairline
|
|
63
|
+
// border, hover brightens border more than fill. `default` used to be the
|
|
64
|
+
// same value as `primary` (white filled), so every unstyled <Button> in
|
|
65
|
+
// every app shouted — the loudest treatment must be asked for by name.
|
|
66
|
+
default: {
|
|
67
|
+
bg: '$color2',
|
|
68
|
+
color: '$color12',
|
|
69
|
+
borderColor: '$borderColor',
|
|
70
|
+
hoverStyle: { bg: '$color3', borderColor: '$color6' },
|
|
71
|
+
},
|
|
72
|
+
// The strongest control WITHOUT a white slab — the macOS dark pushbutton:
|
|
73
|
+
// an elevated gray fill, white text, hairline. On an otherwise quiet page
|
|
74
|
+
// this IS the loudest thing; a $color12 fill read as a glare, not a CTA.
|
|
75
|
+
primary: {
|
|
76
|
+
bg: '$color5',
|
|
77
|
+
color: '$color12',
|
|
78
|
+
borderColor: '$color6',
|
|
79
|
+
hoverStyle: { bg: '$color6', borderColor: '$color7' },
|
|
80
|
+
},
|
|
64
81
|
destructive: { bg: '$red9', color: '$white1', hoverStyle: { opacity: 0.9 } },
|
|
65
82
|
outline: {
|
|
66
83
|
bg: '$background',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/button.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAiC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK1F,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,GACN,SAAS,GACT,QAAQ,GACR,WAAW,CAAA;AAEf,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAqBjF,QAAA,MAAM,KAAK;;;;;;;;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/button.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAiC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK1F,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,GACN,SAAS,GACT,QAAQ,GACR,WAAW,CAAA;AAEf,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAqBjF,QAAA,MAAM,KAAK;;;;;;;;8CA+DT,CAAA;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,gCAI5B;IAAE,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,WAG1E,CAAA;AAEd,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;IAC9F,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACrC,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,SAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CA2Bb;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
|
@@ -55,8 +55,25 @@ const Frame = styled(GuiButton.Frame, {
|
|
|
55
55
|
cursor: 'pointer',
|
|
56
56
|
variants: {
|
|
57
57
|
variant: {
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
// The unmarked case is QUIET: a control on the surface ladder, hairline
|
|
59
|
+
// border, hover brightens border more than fill. `default` used to be the
|
|
60
|
+
// same value as `primary` (white filled), so every unstyled <Button> in
|
|
61
|
+
// every app shouted — the loudest treatment must be asked for by name.
|
|
62
|
+
default: {
|
|
63
|
+
bg: '$color2',
|
|
64
|
+
color: '$color12',
|
|
65
|
+
borderColor: '$borderColor',
|
|
66
|
+
hoverStyle: { bg: '$color3', borderColor: '$color6' },
|
|
67
|
+
},
|
|
68
|
+
// The strongest control WITHOUT a white slab — the macOS dark pushbutton:
|
|
69
|
+
// an elevated gray fill, white text, hairline. On an otherwise quiet page
|
|
70
|
+
// this IS the loudest thing; a $color12 fill read as a glare, not a CTA.
|
|
71
|
+
primary: {
|
|
72
|
+
bg: '$color5',
|
|
73
|
+
color: '$color12',
|
|
74
|
+
borderColor: '$color6',
|
|
75
|
+
hoverStyle: { bg: '$color6', borderColor: '$color7' },
|
|
76
|
+
},
|
|
60
77
|
destructive: { bg: '$red9', color: '$white1', hoverStyle: { opacity: 0.9 } },
|
|
61
78
|
outline: {
|
|
62
79
|
bg: '$background',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/backends/gui/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAA;AAE1F,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAejC,MAAM,MAAM,GAA+B;IACzC,OAAO,EAAE,EAAE;IACX,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,EAAE;IACR,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAA;AAED,gFAAgF;AAChF,MAAM,IAAI,GAA+B;IACvC,OAAO,EAAE,IAAI;IACb,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;IACpC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;IACjB,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,SAAS;IAEjB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/backends/gui/button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.FOCUS = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* How a text field says it has focus.
|
|
6
|
+
*
|
|
7
|
+
* A field already has an edge, so focus BRIGHTENS that edge — it never adds a
|
|
8
|
+
* second shape around it. One rule, shared by every field, so `Input` and
|
|
9
|
+
* `Textarea` cannot drift apart.
|
|
10
|
+
*
|
|
11
|
+
* `@hanzogui/input` ships the opposite of both halves, and each failure hides
|
|
12
|
+
* the other:
|
|
13
|
+
*
|
|
14
|
+
* - `focusVisibleStyle` draws `outline: 2px solid $outlineColor` at a 2px
|
|
15
|
+
* offset. Tamagui emits that as `:root:root:root:root ._outlineWidth-…
|
|
16
|
+
* :focus-visible { outline-width: 2px !important }`, which outranks any
|
|
17
|
+
* plain stylesheet — a consumer's `outline: none` cannot win, and one did
|
|
18
|
+
* try. Setting the width to 0 HERE is the only way to retract it, because
|
|
19
|
+
* a prop replaces the variant's atomic class rather than competing with it.
|
|
20
|
+
*
|
|
21
|
+
* - `focusStyle` brightens to `$borderColorFocus`, which in this design
|
|
22
|
+
* system resolves to the SAME value as `$borderColor`. So the cue that was
|
|
23
|
+
* supposed to make the ring unnecessary rendered nothing at all, and the
|
|
24
|
+
* ring was the only feedback a focused field had.
|
|
25
|
+
*
|
|
26
|
+
* `$color06` against a `$borderColor` rest is ~5:1, so the edge alone carries
|
|
27
|
+
* the indicator (WCAG 2.4.13) and nothing else needs to be drawn.
|
|
28
|
+
*
|
|
29
|
+
* Spread BEFORE a component's own `...props`, so a call site can still say
|
|
30
|
+
* otherwise.
|
|
31
|
+
*/
|
|
32
|
+
const FOCUS = {
|
|
33
|
+
focusStyle: { borderColor: '$color06' },
|
|
34
|
+
focusVisibleStyle: { outlineWidth: 0, outlineStyle: 'none' },
|
|
35
|
+
};
|
|
36
|
+
exports.FOCUS = FOCUS;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* How a text field says it has focus.
|
|
3
|
+
*
|
|
4
|
+
* A field already has an edge, so focus BRIGHTENS that edge — it never adds a
|
|
5
|
+
* second shape around it. One rule, shared by every field, so `Input` and
|
|
6
|
+
* `Textarea` cannot drift apart.
|
|
7
|
+
*
|
|
8
|
+
* `@hanzogui/input` ships the opposite of both halves, and each failure hides
|
|
9
|
+
* the other:
|
|
10
|
+
*
|
|
11
|
+
* - `focusVisibleStyle` draws `outline: 2px solid $outlineColor` at a 2px
|
|
12
|
+
* offset. Tamagui emits that as `:root:root:root:root ._outlineWidth-…
|
|
13
|
+
* :focus-visible { outline-width: 2px !important }`, which outranks any
|
|
14
|
+
* plain stylesheet — a consumer's `outline: none` cannot win, and one did
|
|
15
|
+
* try. Setting the width to 0 HERE is the only way to retract it, because
|
|
16
|
+
* a prop replaces the variant's atomic class rather than competing with it.
|
|
17
|
+
*
|
|
18
|
+
* - `focusStyle` brightens to `$borderColorFocus`, which in this design
|
|
19
|
+
* system resolves to the SAME value as `$borderColor`. So the cue that was
|
|
20
|
+
* supposed to make the ring unnecessary rendered nothing at all, and the
|
|
21
|
+
* ring was the only feedback a focused field had.
|
|
22
|
+
*
|
|
23
|
+
* `$color06` against a `$borderColor` rest is ~5:1, so the edge alone carries
|
|
24
|
+
* the indicator (WCAG 2.4.13) and nothing else needs to be drawn.
|
|
25
|
+
*
|
|
26
|
+
* Spread BEFORE a component's own `...props`, so a call site can still say
|
|
27
|
+
* otherwise.
|
|
28
|
+
*/
|
|
29
|
+
declare const FOCUS: {
|
|
30
|
+
readonly focusStyle: {
|
|
31
|
+
readonly borderColor: "$color06";
|
|
32
|
+
};
|
|
33
|
+
readonly focusVisibleStyle: {
|
|
34
|
+
readonly outlineWidth: 0;
|
|
35
|
+
readonly outlineStyle: "none";
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
export { FOCUS };
|
|
39
|
+
//# sourceMappingURL=focus.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/focus.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,KAAK;;;;;;;;CAGD,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
'use client';/**
|
|
2
|
+
* How a text field says it has focus.
|
|
3
|
+
*
|
|
4
|
+
* A field already has an edge, so focus BRIGHTENS that edge — it never adds a
|
|
5
|
+
* second shape around it. One rule, shared by every field, so `Input` and
|
|
6
|
+
* `Textarea` cannot drift apart.
|
|
7
|
+
*
|
|
8
|
+
* `@hanzogui/input` ships the opposite of both halves, and each failure hides
|
|
9
|
+
* the other:
|
|
10
|
+
*
|
|
11
|
+
* - `focusVisibleStyle` draws `outline: 2px solid $outlineColor` at a 2px
|
|
12
|
+
* offset. Tamagui emits that as `:root:root:root:root ._outlineWidth-…
|
|
13
|
+
* :focus-visible { outline-width: 2px !important }`, which outranks any
|
|
14
|
+
* plain stylesheet — a consumer's `outline: none` cannot win, and one did
|
|
15
|
+
* try. Setting the width to 0 HERE is the only way to retract it, because
|
|
16
|
+
* a prop replaces the variant's atomic class rather than competing with it.
|
|
17
|
+
*
|
|
18
|
+
* - `focusStyle` brightens to `$borderColorFocus`, which in this design
|
|
19
|
+
* system resolves to the SAME value as `$borderColor`. So the cue that was
|
|
20
|
+
* supposed to make the ring unnecessary rendered nothing at all, and the
|
|
21
|
+
* ring was the only feedback a focused field had.
|
|
22
|
+
*
|
|
23
|
+
* `$color06` against a `$borderColor` rest is ~5:1, so the edge alone carries
|
|
24
|
+
* the indicator (WCAG 2.4.13) and nothing else needs to be drawn.
|
|
25
|
+
*
|
|
26
|
+
* Spread BEFORE a component's own `...props`, so a call site can still say
|
|
27
|
+
* otherwise.
|
|
28
|
+
*/
|
|
29
|
+
const FOCUS = {
|
|
30
|
+
focusStyle: { borderColor: '$color06' },
|
|
31
|
+
focusVisibleStyle: { outlineWidth: 0, outlineStyle: 'none' },
|
|
32
|
+
};
|
|
33
|
+
export { FOCUS };
|
|
34
|
+
//# sourceMappingURL=focus.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../src/backends/gui/focus.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,KAAK,GAAG;IACZ,UAAU,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE;IACvC,iBAAiB,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE;CACpD,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Glass = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
/**
|
|
7
|
+
* Glass — the ONE frosted material, for FLOATING chrome only (menus, dialogs,
|
|
8
|
+
* popovers, docked toolbars). macOS/iOS vibrancy: a translucent ground the
|
|
9
|
+
* backdrop blurs through, sealed with a hairline border.
|
|
10
|
+
*
|
|
11
|
+
* It is a surface, not a layout: it composes AROUND content and adds nothing
|
|
12
|
+
* but the material. The component itself is a solid raised panel; the
|
|
13
|
+
* translucency + blur live in theme.css under `@supports (backdrop-filter)`,
|
|
14
|
+
* keyed by [data-slot="glass"] — so a platform that cannot blur (older
|
|
15
|
+
* engines, native without a blur view) keeps the solid panel and content
|
|
16
|
+
* never becomes illegible over a busy backdrop. One material, declared once.
|
|
17
|
+
*
|
|
18
|
+
* Page sections never wear glass; they sit on the surface ladder ($color2/3).
|
|
19
|
+
*/
|
|
20
|
+
const gui_1 = require("@hanzo/gui");
|
|
21
|
+
const slot_1 = require("./slot.cjs");
|
|
22
|
+
const GlassFrame = (0, gui_1.styled)(gui_1.YStack, {
|
|
23
|
+
name: 'Glass',
|
|
24
|
+
borderWidth: 1,
|
|
25
|
+
borderColor: '$borderColor',
|
|
26
|
+
// The stand-in ground; theme.css swaps it for the blurred material where
|
|
27
|
+
// backdrop-filter is real.
|
|
28
|
+
bg: '$color2',
|
|
29
|
+
});
|
|
30
|
+
const Glass = (props) => (0, jsx_runtime_1.jsx)(GlassFrame, { ...(0, slot_1.slot)('glass'), ...props });
|
|
31
|
+
exports.Glass = Glass;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
declare const GlassFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
|
|
3
|
+
elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
|
|
4
|
+
fullscreen?: boolean | undefined;
|
|
5
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
6
|
+
export type GlassProps = ComponentProps<typeof GlassFrame>;
|
|
7
|
+
declare const Glass: (props: GlassProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export { Glass };
|
|
9
|
+
//# sourceMappingURL=glass.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/glass.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,QAAA,MAAM,UAAU;;;8CAOd,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAE1D,QAAA,MAAM,KAAK,GAAI,OAAO,UAAU,4CAAiD,CAAA;AAEjF,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
/**
|
|
4
|
+
* Glass — the ONE frosted material, for FLOATING chrome only (menus, dialogs,
|
|
5
|
+
* popovers, docked toolbars). macOS/iOS vibrancy: a translucent ground the
|
|
6
|
+
* backdrop blurs through, sealed with a hairline border.
|
|
7
|
+
*
|
|
8
|
+
* It is a surface, not a layout: it composes AROUND content and adds nothing
|
|
9
|
+
* but the material. The component itself is a solid raised panel; the
|
|
10
|
+
* translucency + blur live in theme.css under `@supports (backdrop-filter)`,
|
|
11
|
+
* keyed by [data-slot="glass"] — so a platform that cannot blur (older
|
|
12
|
+
* engines, native without a blur view) keeps the solid panel and content
|
|
13
|
+
* never becomes illegible over a busy backdrop. One material, declared once.
|
|
14
|
+
*
|
|
15
|
+
* Page sections never wear glass; they sit on the surface ladder ($color2/3).
|
|
16
|
+
*/
|
|
17
|
+
import { YStack, styled } from '@hanzo/gui';
|
|
18
|
+
import { slot } from './slot.js';
|
|
19
|
+
const GlassFrame = styled(YStack, {
|
|
20
|
+
name: 'Glass',
|
|
21
|
+
borderWidth: 1,
|
|
22
|
+
borderColor: '$borderColor',
|
|
23
|
+
// The stand-in ground; theme.css swaps it for the blurred material where
|
|
24
|
+
// backdrop-filter is real.
|
|
25
|
+
bg: '$color2',
|
|
26
|
+
});
|
|
27
|
+
const Glass = (props) => _jsx(GlassFrame, { ...slot('glass'), ...props });
|
|
28
|
+
export { Glass };
|
|
29
|
+
//# sourceMappingURL=glass.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"glass.js","sourceRoot":"","sources":["../../../src/backends/gui/glass.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE;IAChC,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,yEAAyE;IACzE,2BAA2B;IAC3B,EAAE,EAAE,SAAS;CACd,CAAC,CAAA;AAIF,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE,CAAC,KAAC,UAAU,OAAK,IAAI,CAAC,OAAO,CAAC,KAAM,KAAK,GAAI,CAAA;AAEjF,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
// node scripts/gen-primitives.mjs
|
|
18
18
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
19
19
|
exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuShortcut = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuTrigger = exports.DropdownMenu = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = exports.CommandSeparator = exports.CommandShortcut = exports.CommandItem = exports.CommandGroup = exports.CommandEmpty = exports.CommandList = exports.CommandInput = exports.CommandDialog = exports.Command = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.Checkbox = exports.CardContent = exports.CardDescription = exports.CardAction = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.AvatarFallback = exports.AvatarImage = exports.Avatar = exports.AspectRatio = void 0;
|
|
20
|
-
exports.TooltipProvider = exports.TooltipContent = exports.TooltipTrigger = exports.Tooltip = exports.toast = exports.Toaster = exports.Textarea = exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.Tabs = exports.Switch = exports.Slider = exports.Separator = exports.SelectScrollDownButton = exports.SelectScrollUpButton = exports.SelectSeparator = exports.SelectItem = exports.SelectLabel = exports.SelectContent = exports.SelectTrigger = exports.SelectValue = exports.SelectGroup = exports.Select = exports.ScrollBar = exports.ScrollArea = exports.ResizableHandle = exports.ResizablePanel = exports.ResizablePanelGroup = exports.Progress = exports.PopoverClose = exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.Label = exports.Input = exports.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = void 0;
|
|
20
|
+
exports.TooltipProvider = exports.TooltipContent = exports.TooltipTrigger = exports.Tooltip = exports.toast = exports.Toaster = exports.Textarea = exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.Tabs = exports.Switch = exports.Slider = exports.Separator = exports.SelectScrollDownButton = exports.SelectScrollUpButton = exports.SelectSeparator = exports.SelectItem = exports.SelectLabel = exports.SelectContent = exports.SelectTrigger = exports.SelectValue = exports.SelectGroup = exports.Select = exports.ScrollBar = exports.ScrollArea = exports.ResizableHandle = exports.ResizablePanel = exports.ResizablePanelGroup = exports.Progress = exports.PopoverClose = exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.Label = exports.Input = exports.Glass = exports.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = void 0;
|
|
21
21
|
var aspect_ratio_1 = require("./aspect-ratio.cjs");
|
|
22
22
|
Object.defineProperty(exports, "AspectRatio", { enumerable: true, get: function () { return aspect_ratio_1.AspectRatio; } });
|
|
23
23
|
var avatar_1 = require("./avatar.cjs");
|
|
@@ -81,6 +81,8 @@ Object.defineProperty(exports, "DropdownMenuSub", { enumerable: true, get: funct
|
|
|
81
81
|
Object.defineProperty(exports, "DropdownMenuSubContent", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuSubContent; } });
|
|
82
82
|
Object.defineProperty(exports, "DropdownMenuSubTrigger", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuSubTrigger; } });
|
|
83
83
|
Object.defineProperty(exports, "DropdownMenuRadioGroup", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuRadioGroup; } });
|
|
84
|
+
var glass_1 = require("./glass.cjs");
|
|
85
|
+
Object.defineProperty(exports, "Glass", { enumerable: true, get: function () { return glass_1.Glass; } });
|
|
84
86
|
var input_1 = require("./input.cjs");
|
|
85
87
|
Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_1.Input; } });
|
|
86
88
|
var label_1 = require("./label.cjs");
|
|
@@ -8,6 +8,7 @@ export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsib
|
|
|
8
8
|
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, type CommandFilter, type CommandProps, } from './command.js';
|
|
9
9
|
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './dialog.js';
|
|
10
10
|
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, type DropdownMenuProps, } from './dropdown-menu.js';
|
|
11
|
+
export { Glass, type GlassProps } from './glass.js';
|
|
11
12
|
export { Input, type InputProps } from './input.js';
|
|
12
13
|
export { Label } from './label.js';
|
|
13
14
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose } from './popover.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAClF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAA;AACxG,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AACnF,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAChG,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAClF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAA;AACxG,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AACnF,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAChG,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -24,6 +24,7 @@ export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsib
|
|
|
24
24
|
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, } from './command.js';
|
|
25
25
|
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './dialog.js';
|
|
26
26
|
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } from './dropdown-menu.js';
|
|
27
|
+
export { Glass } from './glass.js';
|
|
27
28
|
export { Input } from './input.js';
|
|
28
29
|
export { Label } from './label.js';
|
|
29
30
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose } from './popover.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/backends/gui/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,EAAE;AACF,kFAAkF;AAClF,4EAA4E;AAC5E,uEAAuE;AACvE,EAAE;AACF,4EAA4E;AAC5E,iFAAiF;AACjF,+EAA+E;AAC/E,0BAA0B;AAC1B,EAAE;AACF,6DAA6D;AAC7D,6EAA6E;AAC7E,iFAAiF;AACjF,+CAA+C;AAC/C,oCAAoC;AAEpC,OAAO,EAAE,WAAW,EAAyB,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,aAAa,EAAsC,MAAM,SAAS,CAAA;AAClF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAyD,MAAM,UAAU,CAAA;AACxG,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AACnF,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GAGjB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,GAEvB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAChG,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,eAAe,GAIhB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/backends/gui/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,EAAE;AACF,kFAAkF;AAClF,4EAA4E;AAC5E,uEAAuE;AACvE,EAAE;AACF,4EAA4E;AAC5E,iFAAiF;AACjF,+EAA+E;AAC/E,0BAA0B;AAC1B,EAAE;AACF,6DAA6D;AAC7D,6EAA6E;AAC7E,iFAAiF;AACjF,+CAA+C;AAC/C,oCAAoC;AAEpC,OAAO,EAAE,WAAW,EAAyB,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,aAAa,EAAsC,MAAM,SAAS,CAAA;AAClF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAyD,MAAM,UAAU,CAAA;AACxG,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AACnF,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GAGjB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,GAEvB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAChG,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,eAAe,GAIhB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -15,6 +15,7 @@ const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
|
|
|
15
15
|
const react_1 = require("react");
|
|
16
16
|
const slot_1 = require("./slot.cjs");
|
|
17
17
|
const gesture_1 = require("./gesture.cjs");
|
|
18
|
+
const focus_1 = require("./focus.cjs");
|
|
18
19
|
const HEIGHT = 36;
|
|
19
20
|
const GUTTER = 12;
|
|
20
21
|
/** Width reserved for an adornment inside the field. */
|
|
@@ -31,7 +32,7 @@ const Input = /* @__PURE__ */ (0, react_1.forwardRef)(function Input({ startAdor
|
|
|
31
32
|
const [revealed, setRevealed] = (0, react_1.useState)(false);
|
|
32
33
|
const isPassword = type === 'password' || secureTextEntry === true;
|
|
33
34
|
const toggle = isPassword && !hidePasswordToggle;
|
|
34
|
-
const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), secureTextEntry: isPassword && !revealed, height: HEIGHT, width: "100%", minW: 0, rounded: "$3", bg: "transparent", borderWidth: 1, borderColor: "$borderColor", placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : GUTTER, pr: endAdornment || toggle ? WELL : GUTTER, ...props }));
|
|
35
|
+
const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), secureTextEntry: isPassword && !revealed, height: HEIGHT, width: "100%", minW: 0, rounded: "$3", bg: "transparent", borderWidth: 1, borderColor: "$borderColor", ...focus_1.FOCUS, placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : GUTTER, pr: endAdornment || toggle ? WELL : GUTTER, ...props }));
|
|
35
36
|
if (!startAdornment && !endAdornment && !toggle)
|
|
36
37
|
return field;
|
|
37
38
|
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { position: "relative", width: "100%", items: "center", children: [startAdornment ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...well('l'), pointerEvents: "none", opacity: 0.6, children: startAdornment })) : null, field, toggle ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...well('r'), cursor: "pointer", ...(0, gesture_1.touch)(20), onPress: () => setRevealed((v) => !v), "aria-label": revealed ? 'Hide password' : 'Show password', children: revealed ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.EyeOff, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Eye, { size: 16 }) })) : endAdornment ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...well('r'), opacity: 0.6, children: endAdornment })) : null] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAU,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAU,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUjF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,yEAAyE;IACzE,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,uFAAuF;IACvF,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAYD,QAAA,MAAM,KAAK,sHAwDT,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -12,6 +12,7 @@ import { Eye, EyeOff } from '@hanzogui/lucide-icons-2';
|
|
|
12
12
|
import { forwardRef, useState } from 'react';
|
|
13
13
|
import { slot } from './slot.js';
|
|
14
14
|
import { touch } from './gesture.js';
|
|
15
|
+
import { FOCUS } from './focus.js';
|
|
15
16
|
const HEIGHT = 36;
|
|
16
17
|
const GUTTER = 12;
|
|
17
18
|
/** Width reserved for an adornment inside the field. */
|
|
@@ -28,7 +29,7 @@ const Input = /* @__PURE__ */ forwardRef(function Input({ startAdornment, endAdo
|
|
|
28
29
|
const [revealed, setRevealed] = useState(false);
|
|
29
30
|
const isPassword = type === 'password' || secureTextEntry === true;
|
|
30
31
|
const toggle = isPassword && !hidePasswordToggle;
|
|
31
|
-
const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), secureTextEntry: isPassword && !revealed, height: HEIGHT, width: "100%", minW: 0, rounded: "$3", bg: "transparent", borderWidth: 1, borderColor: "$borderColor", placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : GUTTER, pr: endAdornment || toggle ? WELL : GUTTER, ...props }));
|
|
32
|
+
const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), secureTextEntry: isPassword && !revealed, height: HEIGHT, width: "100%", minW: 0, rounded: "$3", bg: "transparent", borderWidth: 1, borderColor: "$borderColor", ...FOCUS, placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : GUTTER, pr: endAdornment || toggle ? WELL : GUTTER, ...props }));
|
|
32
33
|
if (!startAdornment && !endAdornment && !toggle)
|
|
33
34
|
return field;
|
|
34
35
|
return (_jsxs(XStack, { position: "relative", width: "100%", items: "center", children: [startAdornment ? (_jsx(XStack, { ...well('l'), pointerEvents: "none", opacity: 0.6, children: startAdornment })) : null, field, toggle ? (_jsx(XStack, { ...well('r'), cursor: "pointer", ...touch(20), onPress: () => setRevealed((v) => !v), "aria-label": revealed ? 'Hide password' : 'Show password', children: revealed ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }) })) : endAdornment ? (_jsx(XStack, { ...well('r'), opacity: 0.6, children: endAdornment })) : null] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AACjF,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -38,6 +38,7 @@ exports.Textarea = void 0;
|
|
|
38
38
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
39
|
const React = __importStar(require("react"));
|
|
40
40
|
const gui_1 = require("@hanzo/gui");
|
|
41
|
+
const focus_1 = require("./focus.cjs");
|
|
41
42
|
/** Floor for the grown row count. */
|
|
42
43
|
const MIN_ROWS = 3;
|
|
43
44
|
const rowsOf = (v) => typeof v === "string" ? v.split("\n").length : 0;
|
|
@@ -45,6 +46,6 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
45
46
|
const [typed, setTyped] = React.useState(() => rowsOf(defaultValue));
|
|
46
47
|
const uncontrolled = value === undefined;
|
|
47
48
|
const invalid = props["aria-invalid"];
|
|
48
|
-
return ((0, jsx_runtime_1.jsx)(gui_1.TextArea, { ref: ref, "data-slot": "textarea", rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, width: "100%", minH: 64, rounded: "$4", bg: "transparent", borderWidth: 1, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor", placeholderTextColor: "$color10", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props }));
|
|
49
|
+
return ((0, jsx_runtime_1.jsx)(gui_1.TextArea, { ref: ref, "data-slot": "textarea", rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, width: "100%", minH: 64, rounded: "$4", bg: "transparent", borderWidth: 1, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor", ...focus_1.FOCUS, placeholderTextColor: "$color10", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props }));
|
|
49
50
|
});
|
|
50
51
|
exports.Textarea = Textarea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AASrC;;;;;;;GAOG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,CAAC,GACjF,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,CAAA;AAE9D,QAAA,MAAM,QAAQ,wGA2Bb,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { TextArea } from "@hanzo/gui";
|
|
5
|
+
import { FOCUS } from "./focus.js";
|
|
5
6
|
/** Floor for the grown row count. */
|
|
6
7
|
const MIN_ROWS = 3;
|
|
7
8
|
const rowsOf = (v) => typeof v === "string" ? v.split("\n").length : 0;
|
|
@@ -9,7 +10,7 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
9
10
|
const [typed, setTyped] = React.useState(() => rowsOf(defaultValue));
|
|
10
11
|
const uncontrolled = value === undefined;
|
|
11
12
|
const invalid = props["aria-invalid"];
|
|
12
|
-
return (_jsx(TextArea, { ref: ref, "data-slot": "textarea", rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, width: "100%", minH: 64, rounded: "$4", bg: "transparent", borderWidth: 1, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor", placeholderTextColor: "$color10", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props }));
|
|
13
|
+
return (_jsx(TextArea, { ref: ref, "data-slot": "textarea", rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, width: "100%", minH: 64, rounded: "$4", bg: "transparent", borderWidth: 1, borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor", ...FOCUS, placeholderTextColor: "$color10", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props }));
|
|
13
14
|
});
|
|
14
15
|
export { Textarea };
|
|
15
16
|
//# sourceMappingURL=textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,qCAAqC;AACrC,MAAM,QAAQ,GAAG,CAAC,CAAA;AAElB,MAAM,MAAM,GAAG,CAAC,CAAU,EAAE,EAAE,CAC5B,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;AAkBlD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,UAAU,CAC/C,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IAC9D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAA;IACpE,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,CAAA;IACxC,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,CAAC,CAAA;IACrC,OAAO,CACL,KAAC,QAAQ,IACP,GAAG,EAAE,GAAY,eACP,UAAU,EACpB,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EACtE,KAAK,EAAE,KAA2B,EAClC,YAAY,EAAE,YAAkC,EAChD,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACnE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,EAAE,EACR,OAAO,EAAC,IAAI,EACZ,EAAE,EAAC,aAAa,EAChB,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,OAAO,IAAI,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,KAClE,KAAK,EACT,oBAAoB,EAAC,UAAU,EAC/B,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAC5B,KAAiC,GACtC,CACH,CAAA;AACD,CAAC,CACF,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Glass = void 0;
|
|
4
|
+
// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
|
|
5
|
+
// for hosts that modularize `@hanzo/ui` imports. Source of truth:
|
|
6
|
+
// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
|
|
7
|
+
var glass_1 = require("../backends/gui/glass.cjs");
|
|
8
|
+
Object.defineProperty(exports, "Glass", { enumerable: true, get: function () { return glass_1.Glass; } });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Glass.d.ts","sourceRoot":"","sources":["../../src/primitives/Glass.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
|
|
2
|
+
// for hosts that modularize `@hanzo/ui` imports. Source of truth:
|
|
3
|
+
// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
|
|
4
|
+
export { Glass } from '../backends/gui/glass.js';
|
|
5
|
+
//# sourceMappingURL=Glass.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Glass.js","sourceRoot":"","sources":["../../src/primitives/Glass.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA"}
|
package/dist/theme.css
CHANGED
|
@@ -31,7 +31,57 @@
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
/* Light identity (the counterpart to dark-first). */
|
|
34
|
-
|
|
34
|
+
/* DARK IS THE DEFAULT, and it is the default HERE, not only in a consumer that
|
|
35
|
+
remembers to say so.
|
|
36
|
+
|
|
37
|
+
`:root` used to hold the light palette with dark behind `.dark`, so an app
|
|
38
|
+
that imported this file and did not put class="dark" on <html> rendered pure
|
|
39
|
+
white — oklch(1 0 0) — and every surface built that way came out bright white
|
|
40
|
+
by accident. It is also the opposite of @hanzo/design, whose `:root` is dark
|
|
41
|
+
with `.light` to opt out, so mixing the two inverted an app's theme depending
|
|
42
|
+
on which file won.
|
|
43
|
+
|
|
44
|
+
One convention now, matching the design system: `:root` is dark, `.light`
|
|
45
|
+
opts out. `.dark` is kept so an app that already states it is unaffected, and
|
|
46
|
+
`.light` follows both so it can still win. */
|
|
47
|
+
:root,
|
|
48
|
+
.dark {
|
|
49
|
+
--background: oklch(0.145 0 0);
|
|
50
|
+
--foreground: oklch(0.985 0 0);
|
|
51
|
+
--card: oklch(0.205 0 0);
|
|
52
|
+
--card-foreground: oklch(0.985 0 0);
|
|
53
|
+
--popover: oklch(0.269 0 0);
|
|
54
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
55
|
+
--primary: oklch(0.922 0 0);
|
|
56
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
57
|
+
--secondary: oklch(0.269 0 0);
|
|
58
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
59
|
+
--muted: oklch(0.269 0 0);
|
|
60
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
61
|
+
--accent: oklch(0.371 0 0);
|
|
62
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
63
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
64
|
+
--border: oklch(1 0 0 / 10%);
|
|
65
|
+
--input: oklch(1 0 0 / 15%);
|
|
66
|
+
--ring: oklch(0.556 0 0);
|
|
67
|
+
|
|
68
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
69
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
70
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
71
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
72
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
73
|
+
|
|
74
|
+
--sidebar: oklch(0.205 0 0);
|
|
75
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
76
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
77
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
78
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
79
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
80
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
81
|
+
--sidebar-ring: oklch(0.439 0 0);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.light {
|
|
35
85
|
--radius: 0.5rem;
|
|
36
86
|
|
|
37
87
|
--background: oklch(1 0 0);
|
|
@@ -70,41 +120,6 @@
|
|
|
70
120
|
}
|
|
71
121
|
|
|
72
122
|
/* Dark-first Hanzo identity — neutral zinc-on-black. */
|
|
73
|
-
.dark {
|
|
74
|
-
--background: oklch(0.145 0 0);
|
|
75
|
-
--foreground: oklch(0.985 0 0);
|
|
76
|
-
--card: oklch(0.205 0 0);
|
|
77
|
-
--card-foreground: oklch(0.985 0 0);
|
|
78
|
-
--popover: oklch(0.269 0 0);
|
|
79
|
-
--popover-foreground: oklch(0.985 0 0);
|
|
80
|
-
--primary: oklch(0.922 0 0);
|
|
81
|
-
--primary-foreground: oklch(0.205 0 0);
|
|
82
|
-
--secondary: oklch(0.269 0 0);
|
|
83
|
-
--secondary-foreground: oklch(0.985 0 0);
|
|
84
|
-
--muted: oklch(0.269 0 0);
|
|
85
|
-
--muted-foreground: oklch(0.708 0 0);
|
|
86
|
-
--accent: oklch(0.371 0 0);
|
|
87
|
-
--accent-foreground: oklch(0.985 0 0);
|
|
88
|
-
--destructive: oklch(0.704 0.191 22.216);
|
|
89
|
-
--border: oklch(1 0 0 / 10%);
|
|
90
|
-
--input: oklch(1 0 0 / 15%);
|
|
91
|
-
--ring: oklch(0.556 0 0);
|
|
92
|
-
|
|
93
|
-
--chart-1: oklch(0.488 0.243 264.376);
|
|
94
|
-
--chart-2: oklch(0.696 0.17 162.48);
|
|
95
|
-
--chart-3: oklch(0.769 0.188 70.08);
|
|
96
|
-
--chart-4: oklch(0.627 0.265 303.9);
|
|
97
|
-
--chart-5: oklch(0.645 0.246 16.439);
|
|
98
|
-
|
|
99
|
-
--sidebar: oklch(0.205 0 0);
|
|
100
|
-
--sidebar-foreground: oklch(0.985 0 0);
|
|
101
|
-
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
102
|
-
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
103
|
-
--sidebar-accent: oklch(0.269 0 0);
|
|
104
|
-
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
105
|
-
--sidebar-border: oklch(1 0 0 / 10%);
|
|
106
|
-
--sidebar-ring: oklch(0.439 0 0);
|
|
107
|
-
}
|
|
108
123
|
|
|
109
124
|
/* Geist by default — UI/body inherits Geist Sans; code/mono surfaces get Geist
|
|
110
125
|
Mono. Components never hard-code a family; they inherit this or bind
|
|
@@ -183,3 +198,15 @@
|
|
|
183
198
|
.hz-elevation-2 { box-shadow: var(--hz-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.24)); }
|
|
184
199
|
.hz-elevation-3 { box-shadow: var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36)); }
|
|
185
200
|
.hz-elevation-4 { box-shadow: var(--hz-elevation-4, 0 16px 48px rgba(0, 0, 0, 0.44)); }
|
|
201
|
+
|
|
202
|
+
/* Glass — the ONE frosted material (see backends/gui/glass.tsx). The component
|
|
203
|
+
stands as a solid raised panel; only a browser that can actually blur the
|
|
204
|
+
backdrop trades it for the translucent material, so content never sits on
|
|
205
|
+
see-through ground without the blur. !important beats the compiled bg atom. */
|
|
206
|
+
@supports (backdrop-filter: blur(8px)) {
|
|
207
|
+
[data-slot="glass"] {
|
|
208
|
+
background-color: color-mix(in oklab, var(--background) 72%, transparent) !important;
|
|
209
|
+
-webkit-backdrop-filter: blur(20px) saturate(1.8);
|
|
210
|
+
backdrop-filter: blur(20px) saturate(1.8);
|
|
211
|
+
}
|
|
212
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.43",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/tokens. 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": {
|
|
@@ -219,7 +219,7 @@
|
|
|
219
219
|
"publishConfig": {
|
|
220
220
|
"access": "public"
|
|
221
221
|
},
|
|
222
|
-
"license": "
|
|
222
|
+
"license": "MIT",
|
|
223
223
|
"author": "Hanzo AI <dev@hanzo.ai>",
|
|
224
224
|
"scripts": {
|
|
225
225
|
"build": "rm -rf dist dist-cjs && tsc -p tsconfig.build.json && tsc -p tsconfig.cjs.json --noCheck && mkdir -p dist/styles && cp src/theme.css dist/theme.css && cp src/styles/hanzo-motion.css dist/styles/hanzo-motion.css && node scripts/postbuild.mjs",
|