@hanzo/ui 8.29.5 → 8.29.6
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/backends/gui/input-group.cjs +8 -5
- package/dist/backends/gui/input-group.d.ts +2 -1
- package/dist/backends/gui/input-group.d.ts.map +1 -1
- package/dist/backends/gui/input-group.js +8 -5
- package/dist/backends/gui/input-group.js.map +1 -1
- package/dist/gallery.html +1 -1
- package/package.json +1 -1
|
@@ -17,7 +17,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
17
17
|
* action can be clicked, and the text never runs under either.
|
|
18
18
|
*
|
|
19
19
|
* gui has no `:focus-within` and no `:has()`, so focus, invalidity and disabling
|
|
20
|
-
* are lifted from the field through context: the Input reports, the group draws
|
|
20
|
+
* are lifted from the field through context: the Input reports, the group draws:
|
|
21
|
+
* under focus, its own edge brightened a step and no ring outside it.
|
|
21
22
|
*
|
|
22
23
|
* Structure and states after twenty-ui's InputGroup (MIT, see NOTICE): a row
|
|
23
24
|
* with a 4px gap on the field box, start and end elements that never shrink,
|
|
@@ -30,6 +31,8 @@ const density_1 = require("./density.cjs");
|
|
|
30
31
|
const slot_1 = require("./slot.cjs");
|
|
31
32
|
/** What a grouped field reads: the group's box, and the two callbacks it reports through. */
|
|
32
33
|
exports.GroupContext = (0, react_1.createContext)(null);
|
|
34
|
+
/** The edge under focus: a third of the ink, in either theme (glass.css says the same for the composer). */
|
|
35
|
+
const LIT = 'color-mix(in srgb, var(--foreground) 32%, transparent)';
|
|
33
36
|
/** Quiet at rest, lifted under focus, dimmer still when the field is disabled. */
|
|
34
37
|
const tone = (focused, disabled) => (disabled ? 0.4 : focused ? 0.9 : 0.6);
|
|
35
38
|
function InputGroup({ start, end, size, fill = false, children, ...props }) {
|
|
@@ -40,10 +43,10 @@ function InputGroup({ start, end, size, fill = false, children, ...props }) {
|
|
|
40
43
|
const [state, setState] = (0, react_1.useState)({ invalid: false, disabled: false });
|
|
41
44
|
const report = (0, react_1.useCallback)((r) => setState((s) => (s.invalid === r.invalid && s.disabled === r.disabled ? s : r)), []);
|
|
42
45
|
const ctx = (0, react_1.useMemo)(() => ({ size: resolved, focus: setFocused, report }), [resolved, report]);
|
|
43
|
-
|
|
46
|
+
// Focus is the box's own edge brightened a step, as the composer's is: one
|
|
47
|
+
// line in place, never a second ring a gap outside it.
|
|
48
|
+
const edge = state.invalid ? (focused ? '$red8' : '$red7') : focused ? LIT : '$borderColor';
|
|
44
49
|
return ((0, jsx_runtime_1.jsx)(exports.GroupContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('input-group'), "data-focused": focused ? '' : undefined, "data-invalid": state.invalid ? '' : undefined, "data-disabled": state.disabled ? '' : undefined,
|
|
45
50
|
// The Input sub-theme, so the edge under focus is the Input's own.
|
|
46
|
-
componentName: "Input", ...control_1.FIELD, ...(density === 'compact' ? { bg: '$panel' } : null), ...(fill ? control_1.FILL : null), borderColor: edge, hoverStyle: state.disabled || focused ? undefined : { borderColor: '$borderColorHover' }, ...(focused
|
|
47
|
-
? { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid', outlineOffset: 2 }
|
|
48
|
-
: null), items: "center", gap: "$1", height: box.h, width: "100%", minW: 0, px: box.gutter, cursor: state.disabled ? 'not-allowed' : undefined, ...props, children: [start ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('input-group-start'), shrink: 0, items: "center", opacity: tone(focused, state.disabled), children: start })) : null, children, end ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('input-group-end'), shrink: 0, items: "center", gap: "$1", opacity: tone(focused, state.disabled), children: end })) : null] }) }));
|
|
51
|
+
componentName: "Input", ...control_1.FIELD, ...(density === 'compact' ? { bg: '$panel' } : null), ...(fill ? control_1.FILL : null), borderColor: edge, hoverStyle: state.disabled || focused ? undefined : { borderColor: '$borderColorHover' }, items: "center", gap: "$1", height: box.h, width: "100%", minW: 0, px: box.gutter, cursor: state.disabled ? 'not-allowed' : undefined, ...props, children: [start ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('input-group-start'), shrink: 0, items: "center", opacity: tone(focused, state.disabled), children: start })) : null, children, end ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('input-group-end'), shrink: 0, items: "center", gap: "$1", opacity: tone(focused, state.disabled), children: end })) : null] }) }));
|
|
49
52
|
}
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
* action can be clicked, and the text never runs under either.
|
|
12
12
|
*
|
|
13
13
|
* gui has no `:focus-within` and no `:has()`, so focus, invalidity and disabling
|
|
14
|
-
* are lifted from the field through context: the Input reports, the group draws
|
|
14
|
+
* are lifted from the field through context: the Input reports, the group draws:
|
|
15
|
+
* under focus, its own edge brightened a step and no ring outside it.
|
|
15
16
|
*
|
|
16
17
|
* Structure and states after twenty-ui's InputGroup (MIT, see NOTICE): a row
|
|
17
18
|
* with a 4px gap on the field box, start and end elements that never shrink,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input-group.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAiD,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1G,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAI5D,KAAK,MAAM,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAA;AAErD,6FAA6F;AAC7F,eAAO,MAAM,YAAY;UACjB,SAAS;WACR,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI;YACpB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;SACd,CAAA;AAEf,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,wDAAwD;IACxD,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAQD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAqDjG"}
|
|
@@ -13,7 +13,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
* action can be clicked, and the text never runs under either.
|
|
14
14
|
*
|
|
15
15
|
* gui has no `:focus-within` and no `:has()`, so focus, invalidity and disabling
|
|
16
|
-
* are lifted from the field through context: the Input reports, the group draws
|
|
16
|
+
* are lifted from the field through context: the Input reports, the group draws:
|
|
17
|
+
* under focus, its own edge brightened a step and no ring outside it.
|
|
17
18
|
*
|
|
18
19
|
* Structure and states after twenty-ui's InputGroup (MIT, see NOTICE): a row
|
|
19
20
|
* with a 4px gap on the field box, start and end elements that never shrink,
|
|
@@ -26,6 +27,8 @@ import { fieldSize, useDensity } from './density.js';
|
|
|
26
27
|
import { slot } from './slot.js';
|
|
27
28
|
/** What a grouped field reads: the group's box, and the two callbacks it reports through. */
|
|
28
29
|
export const GroupContext = /* @__PURE__ */ createContext(null);
|
|
30
|
+
/** The edge under focus: a third of the ink, in either theme (glass.css says the same for the composer). */
|
|
31
|
+
const LIT = 'color-mix(in srgb, var(--foreground) 32%, transparent)';
|
|
29
32
|
/** Quiet at rest, lifted under focus, dimmer still when the field is disabled. */
|
|
30
33
|
const tone = (focused, disabled) => (disabled ? 0.4 : focused ? 0.9 : 0.6);
|
|
31
34
|
export function InputGroup({ start, end, size, fill = false, children, ...props }) {
|
|
@@ -36,11 +39,11 @@ export function InputGroup({ start, end, size, fill = false, children, ...props
|
|
|
36
39
|
const [state, setState] = useState({ invalid: false, disabled: false });
|
|
37
40
|
const report = useCallback((r) => setState((s) => (s.invalid === r.invalid && s.disabled === r.disabled ? s : r)), []);
|
|
38
41
|
const ctx = useMemo(() => ({ size: resolved, focus: setFocused, report }), [resolved, report]);
|
|
39
|
-
|
|
42
|
+
// Focus is the box's own edge brightened a step, as the composer's is: one
|
|
43
|
+
// line in place, never a second ring a gap outside it.
|
|
44
|
+
const edge = state.invalid ? (focused ? '$red8' : '$red7') : focused ? LIT : '$borderColor';
|
|
40
45
|
return (_jsx(GroupContext.Provider, { value: ctx, children: _jsxs(XStack, { ...slot('input-group'), "data-focused": focused ? '' : undefined, "data-invalid": state.invalid ? '' : undefined, "data-disabled": state.disabled ? '' : undefined,
|
|
41
46
|
// The Input sub-theme, so the edge under focus is the Input's own.
|
|
42
|
-
componentName: "Input", ...FIELD, ...(density === 'compact' ? { bg: '$panel' } : null), ...(fill ? FILL : null), borderColor: edge, hoverStyle: state.disabled || focused ? undefined : { borderColor: '$borderColorHover' }, ...(focused
|
|
43
|
-
? { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid', outlineOffset: 2 }
|
|
44
|
-
: null), items: "center", gap: "$1", height: box.h, width: "100%", minW: 0, px: box.gutter, cursor: state.disabled ? 'not-allowed' : undefined, ...props, children: [start ? (_jsx(XStack, { ...slot('input-group-start'), shrink: 0, items: "center", opacity: tone(focused, state.disabled), children: start })) : null, children, end ? (_jsx(XStack, { ...slot('input-group-end'), shrink: 0, items: "center", gap: "$1", opacity: tone(focused, state.disabled), children: end })) : null] }) }));
|
|
47
|
+
componentName: "Input", ...FIELD, ...(density === 'compact' ? { bg: '$panel' } : null), ...(fill ? FILL : null), borderColor: edge, hoverStyle: state.disabled || focused ? undefined : { borderColor: '$borderColorHover' }, items: "center", gap: "$1", height: box.h, width: "100%", minW: 0, px: box.gutter, cursor: state.disabled ? 'not-allowed' : undefined, ...props, children: [start ? (_jsx(XStack, { ...slot('input-group-start'), shrink: 0, items: "center", opacity: tone(focused, state.disabled), children: start })) : null, children, end ? (_jsx(XStack, { ...slot('input-group-end'), shrink: 0, items: "center", gap: "$1", opacity: tone(focused, state.disabled), children: end })) : null] }) }));
|
|
45
48
|
}
|
|
46
49
|
//# sourceMappingURL=input-group.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/backends/gui/input-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ
|
|
1
|
+
{"version":3,"file":"input-group.js","sourceRoot":"","sources":["../../../src/backends/gui/input-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AAC1G,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAkB,MAAM,WAAW,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAI7B,6FAA6F;AAC7F,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC,aAAa,CAI/C,IAAI,CAAC,CAAA;AAcf,4GAA4G;AAC5G,MAAM,GAAG,GAAG,wDAA8E,CAAA;AAE1F,kFAAkF;AAClF,MAAM,IAAI,GAAG,CAAC,OAAgB,EAAE,QAAiB,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AAE5F,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAChG,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IACzC,MAAM,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAA;IACzB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;IAC/E,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,CAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9F,EAAE,CACH,CAAA;IACD,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;IAE9F,2EAA2E;IAC3E,uDAAuD;IACvD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,cAAc,CAAA;IAE3F,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAC/B,MAAC,MAAM,OACD,IAAI,CAAC,aAAa,CAAC,kBACT,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBACxB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,mBAC7B,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;YAC9C,mEAAmE;YACnE,aAAa,EAAC,OAAO,KACjB,KAAK,KACL,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KACjD,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EACxB,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,KAAK,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,mBAAmB,EAAE,EACxF,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,IAAI,EACR,MAAM,EAAE,GAAG,CAAC,CAAC,EACb,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,CAAC,EACP,EAAE,EAAE,GAAG,CAAC,MAAM,EACd,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KAC9C,KAAK,aAER,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,MAAM,OAAK,IAAI,CAAC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,YACpG,KAAK,GACC,CACV,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EACR,GAAG,CAAC,CAAC,CAAC,CACL,KAAC,MAAM,OAAK,IAAI,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,YAC3G,GAAG,GACG,CACV,CAAC,CAAC,CAAC,IAAI,IACD,GACa,CACzB,CAAA;AACH,CAAC"}
|
package/dist/gallery.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.29.
|
|
1
|
+
<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.29.6</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
|
|
2
2
|
:root { --hanzo-ui-styles: 1; }
|
|
3
3
|
/* Hanzo Design System — the entry point. Import THIS one file.
|
|
4
4
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.29.
|
|
3
|
+
"version": "8.29.6",
|
|
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": {
|