@hanzo/ui 8.0.111 → 8.0.112
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/control.cjs +21 -0
- package/dist/backends/gui/control.d.ts +21 -0
- package/dist/backends/gui/control.d.ts.map +1 -1
- package/dist/backends/gui/control.js +21 -0
- package/dist/backends/gui/control.js.map +1 -1
- package/dist/backends/gui/input.cjs +1 -2
- package/dist/backends/gui/input.d.ts.map +1 -1
- package/dist/backends/gui/input.js +1 -2
- package/dist/backends/gui/input.js.map +1 -1
- package/dist/backends/gui/textarea.cjs +1 -2
- package/dist/backends/gui/textarea.d.ts.map +1 -1
- package/dist/backends/gui/textarea.js +1 -2
- package/dist/backends/gui/textarea.js.map +1 -1
- package/dist/styles.css +0 -5
- package/package.json +1 -1
- package/dist/backends/gui/focus.cjs +0 -36
- package/dist/backends/gui/focus.d.ts +0 -39
- package/dist/backends/gui/focus.d.ts.map +0 -1
- package/dist/backends/gui/focus.js +0 -34
- package/dist/backends/gui/focus.js.map +0 -1
|
@@ -49,3 +49,24 @@ exports.FIELD = {
|
|
|
49
49
|
borderColor: '$borderColor',
|
|
50
50
|
bg: 'transparent',
|
|
51
51
|
};
|
|
52
|
+
/**
|
|
53
|
+
* Focus is @hanzo/design's, and a field says nothing about it.
|
|
54
|
+
*
|
|
55
|
+
* design draws ONE indicator for everything focusable —
|
|
56
|
+
* `:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px }` — and
|
|
57
|
+
* `gui-config.ts` re-bases `$outlineColor` onto that same `--ring` in every
|
|
58
|
+
* theme. So the outline gui already draws on a field IS that ring, and design's
|
|
59
|
+
* offset lands on top of it, because gui emits no `outline-offset` of its own.
|
|
60
|
+
*
|
|
61
|
+
* A field cannot abstain by writing a prop. gui carries the outline in its
|
|
62
|
+
* variant defaults, and a prop REPLACES that atomic class rather than dropping
|
|
63
|
+
* it — `focusVisibleStyle={{}}` emits the same three rules as no prop at all.
|
|
64
|
+
* Whatever a call site writes is compiled to
|
|
65
|
+
* `:root:root:root:root … :focus-visible { … !important }`, which outranks every
|
|
66
|
+
* stylesheet in the document, so `outlineWidth: 0` does not hand the decision
|
|
67
|
+
* back to the sheet: it deletes the indicator on every surface at once, and no
|
|
68
|
+
* consuming app can argue with it.
|
|
69
|
+
*
|
|
70
|
+
* A field that should ring differently from a button says so in @hanzo/design,
|
|
71
|
+
* where the rule lives. `focus.test.tsx` holds this.
|
|
72
|
+
*/
|
|
@@ -46,4 +46,25 @@ export declare const FIELD: {
|
|
|
46
46
|
readonly borderColor: "$borderColor";
|
|
47
47
|
readonly bg: "transparent";
|
|
48
48
|
};
|
|
49
|
+
/**
|
|
50
|
+
* Focus is @hanzo/design's, and a field says nothing about it.
|
|
51
|
+
*
|
|
52
|
+
* design draws ONE indicator for everything focusable —
|
|
53
|
+
* `:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px }` — and
|
|
54
|
+
* `gui-config.ts` re-bases `$outlineColor` onto that same `--ring` in every
|
|
55
|
+
* theme. So the outline gui already draws on a field IS that ring, and design's
|
|
56
|
+
* offset lands on top of it, because gui emits no `outline-offset` of its own.
|
|
57
|
+
*
|
|
58
|
+
* A field cannot abstain by writing a prop. gui carries the outline in its
|
|
59
|
+
* variant defaults, and a prop REPLACES that atomic class rather than dropping
|
|
60
|
+
* it — `focusVisibleStyle={{}}` emits the same three rules as no prop at all.
|
|
61
|
+
* Whatever a call site writes is compiled to
|
|
62
|
+
* `:root:root:root:root … :focus-visible { … !important }`, which outranks every
|
|
63
|
+
* stylesheet in the document, so `outlineWidth: 0` does not hand the decision
|
|
64
|
+
* back to the sheet: it deletes the indicator on every surface at once, and no
|
|
65
|
+
* consuming app can argue with it.
|
|
66
|
+
*
|
|
67
|
+
* A field that should ring differently from a button says so in @hanzo/design,
|
|
68
|
+
* where the rule lives. `focus.test.tsx` holds this.
|
|
69
|
+
*/
|
|
49
70
|
//# sourceMappingURL=control.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/control.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,SAAS,KAAK,CAAA;AAE3B,4CAA4C;AAC5C,eAAO,MAAM,MAAM,KAAK,CAAA;AAExB;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA"}
|
|
1
|
+
{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/control.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,SAAS,KAAK,CAAA;AAE3B,4CAA4C;AAC5C,eAAO,MAAM,MAAM,KAAK,CAAA;AAExB;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG"}
|
|
@@ -46,4 +46,25 @@ export const FIELD = {
|
|
|
46
46
|
borderColor: '$borderColor',
|
|
47
47
|
bg: 'transparent',
|
|
48
48
|
};
|
|
49
|
+
/**
|
|
50
|
+
* Focus is @hanzo/design's, and a field says nothing about it.
|
|
51
|
+
*
|
|
52
|
+
* design draws ONE indicator for everything focusable —
|
|
53
|
+
* `:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px }` — and
|
|
54
|
+
* `gui-config.ts` re-bases `$outlineColor` onto that same `--ring` in every
|
|
55
|
+
* theme. So the outline gui already draws on a field IS that ring, and design's
|
|
56
|
+
* offset lands on top of it, because gui emits no `outline-offset` of its own.
|
|
57
|
+
*
|
|
58
|
+
* A field cannot abstain by writing a prop. gui carries the outline in its
|
|
59
|
+
* variant defaults, and a prop REPLACES that atomic class rather than dropping
|
|
60
|
+
* it — `focusVisibleStyle={{}}` emits the same three rules as no prop at all.
|
|
61
|
+
* Whatever a call site writes is compiled to
|
|
62
|
+
* `:root:root:root:root … :focus-visible { … !important }`, which outranks every
|
|
63
|
+
* stylesheet in the document, so `outlineWidth: 0` does not hand the decision
|
|
64
|
+
* back to the sheet: it deletes the indicator on every surface at once, and no
|
|
65
|
+
* consuming app can argue with it.
|
|
66
|
+
*
|
|
67
|
+
* A field that should ring differently from a button says so in @hanzo/design,
|
|
68
|
+
* where the rule lives. `focus.test.tsx` holds this.
|
|
69
|
+
*/
|
|
49
70
|
//# sourceMappingURL=control.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"control.js","sourceRoot":"","sources":["../../../src/backends/gui/control.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,CAAA;AAE3B,4CAA4C;AAC5C,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,CAAA;AAExB;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,EAAE,EAAE,IAAI;IACR,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,EAAE,EAAE,aAAa;CACT,CAAA"}
|
|
1
|
+
{"version":3,"file":"control.js","sourceRoot":"","sources":["../../../src/backends/gui/control.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,CAAA;AAE3B,4CAA4C;AAC5C,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,CAAA;AAExB;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,EAAE,EAAE,IAAI;IACR,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,EAAE,EAAE,aAAa;CACT,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG"}
|
|
@@ -15,7 +15,6 @@ 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");
|
|
19
18
|
const mask_1 = require("./mask.cjs");
|
|
20
19
|
const control_1 = require("./control.cjs");
|
|
21
20
|
const HEIGHT = control_1.CONTROL_H;
|
|
@@ -33,7 +32,7 @@ const Input = /* @__PURE__ */ (0, react_1.forwardRef)(function Input({ startAdor
|
|
|
33
32
|
const [revealed, setRevealed] = (0, react_1.useState)(false);
|
|
34
33
|
const isPassword = type === 'password' || secureTextEntry === true;
|
|
35
34
|
const toggle = isPassword && reveal;
|
|
36
|
-
const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), ...(isPassword ? (0, mask_1.masked)(!revealed) : { type, secureTextEntry }), ...control_1.FIELD, height: HEIGHT, width: "100%", minW: 0,
|
|
35
|
+
const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), ...(isPassword ? (0, mask_1.masked)(!revealed) : { type, secureTextEntry }), ...control_1.FIELD, height: HEIGHT, width: "100%", minW: 0, placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : control_1.GUTTER, pr: endAdornment || toggle ? WELL : control_1.GUTTER, ...props }));
|
|
37
36
|
if (!startAdornment && !endAdornment && !toggle)
|
|
38
37
|
return field;
|
|
39
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;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAYD,QAAA,MAAM,KAAK,sHAoET,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -12,7 +12,6 @@ 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';
|
|
16
15
|
import { masked } from './mask.js';
|
|
17
16
|
import { CONTROL_H, FIELD, GUTTER } from './control.js';
|
|
18
17
|
const HEIGHT = CONTROL_H;
|
|
@@ -30,7 +29,7 @@ const Input = /* @__PURE__ */ forwardRef(function Input({ startAdornment, endAdo
|
|
|
30
29
|
const [revealed, setRevealed] = useState(false);
|
|
31
30
|
const isPassword = type === 'password' || secureTextEntry === true;
|
|
32
31
|
const toggle = isPassword && reveal;
|
|
33
|
-
const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), ...(isPassword ? masked(!revealed) : { type, secureTextEntry }), ...FIELD, height: HEIGHT, width: "100%", minW: 0,
|
|
32
|
+
const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), ...(isPassword ? masked(!revealed) : { type, secureTextEntry }), ...FIELD, height: HEIGHT, width: "100%", minW: 0, placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : GUTTER, pr: endAdornment || toggle ? WELL : GUTTER, ...props }));
|
|
34
33
|
if (!startAdornment && !endAdornment && !toggle)
|
|
35
34
|
return field;
|
|
36
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;AACjC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -38,7 +38,6 @@ 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");
|
|
42
41
|
const control_1 = require("./control.cjs");
|
|
43
42
|
const slot_1 = require("./slot.cjs");
|
|
44
43
|
/** Floor for the grown row count. */
|
|
@@ -53,6 +52,6 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
53
52
|
// `textAreaSizeVariant`, which computes its own horizontal padding and
|
|
54
53
|
// landed on 20 — so the one field a form makes tall was also the one
|
|
55
54
|
// indented differently from the two above it.
|
|
56
|
-
borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor",
|
|
55
|
+
borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor", placeholderTextColor: "$color10", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props }));
|
|
57
56
|
});
|
|
58
57
|
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;AAUrC;;;;;;;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,wGA4Bb,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -2,7 +2,6 @@
|
|
|
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";
|
|
6
5
|
import { FIELD } from "./control.js";
|
|
7
6
|
import { slot } from "./slot.js";
|
|
8
7
|
/** Floor for the grown row count. */
|
|
@@ -17,7 +16,7 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
17
16
|
// `textAreaSizeVariant`, which computes its own horizontal padding and
|
|
18
17
|
// landed on 20 — so the one field a form makes tall was also the one
|
|
19
18
|
// indented differently from the two above it.
|
|
20
|
-
borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor",
|
|
19
|
+
borderColor: invalid && invalid !== "false" ? "$red7" : "$borderColor", placeholderTextColor: "$color10", fontSize: "$3", opacity: props.disabled ? 0.5 : 1, ...props }));
|
|
21
20
|
});
|
|
22
21
|
export { Textarea };
|
|
23
22
|
//# 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;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,
|
|
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,WAAW,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,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,KACb,IAAI,CAAC,UAAU,CAAC,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,CAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,KACpE,KAAK,EACT,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,EAAE;QACR,6DAA6D;QAC7D,uEAAuE;QACvE,qEAAqE;QACrE,8CAA8C;QAC9C,WAAW,EAAE,OAAO,IAAI,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EACtE,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"}
|
package/dist/styles.css
CHANGED
|
@@ -2112,7 +2112,6 @@
|
|
|
2112
2112
|
:root:root:root ._borderBottomColor-0active-borderColor77378595._borderBottomColor-0active-borderColor77378595:active{border-bottom-color:var(--borderColorPress) !important;}
|
|
2113
2113
|
:root:root:root:root ._borderBottomColor-0focus-borderColor68052152._borderBottomColor-0focus-borderColor68052152:focus{border-bottom-color:var(--borderColorFocus) !important;}
|
|
2114
2114
|
:root:root:root:root ._borderBottomColor-0focus-borderColor69916956._borderBottomColor-0focus-borderColor69916956:focus{border-bottom-color:var(--borderColorHover) !important;}
|
|
2115
|
-
:root:root:root:root ._borderBottomColor-0focus-color06._borderBottomColor-0focus-color06:focus{border-bottom-color:var(--color06) !important;}
|
|
2116
2115
|
:root:root:root:root ._borderBottomColor-0focus-color7._borderBottomColor-0focus-color7:focus{border-bottom-color:var(--color7) !important;}
|
|
2117
2116
|
:root:root:root:root ._borderBottomColor-0focus-color8._borderBottomColor-0focus-color8:focus{border-bottom-color:var(--color8) !important;}
|
|
2118
2117
|
@media (hover) {:root:root ._borderBottomColor-0hover-borderColor._borderBottomColor-0hover-borderColor:hover{border-bottom-color:var(--borderColor) !important;}}
|
|
@@ -2135,7 +2134,6 @@
|
|
|
2135
2134
|
:root:root:root ._borderLeftColor-0active-borderColor77378595._borderLeftColor-0active-borderColor77378595:active{border-left-color:var(--borderColorPress) !important;}
|
|
2136
2135
|
:root:root:root:root ._borderLeftColor-0focus-borderColor68052152._borderLeftColor-0focus-borderColor68052152:focus{border-left-color:var(--borderColorFocus) !important;}
|
|
2137
2136
|
:root:root:root:root ._borderLeftColor-0focus-borderColor69916956._borderLeftColor-0focus-borderColor69916956:focus{border-left-color:var(--borderColorHover) !important;}
|
|
2138
|
-
:root:root:root:root ._borderLeftColor-0focus-color06._borderLeftColor-0focus-color06:focus{border-left-color:var(--color06) !important;}
|
|
2139
2137
|
:root:root:root:root ._borderLeftColor-0focus-color7._borderLeftColor-0focus-color7:focus{border-left-color:var(--color7) !important;}
|
|
2140
2138
|
:root:root:root:root ._borderLeftColor-0focus-color8._borderLeftColor-0focus-color8:focus{border-left-color:var(--color8) !important;}
|
|
2141
2139
|
@media (hover) {:root:root ._borderLeftColor-0hover-borderColor._borderLeftColor-0hover-borderColor:hover{border-left-color:var(--borderColor) !important;}}
|
|
@@ -2158,7 +2156,6 @@
|
|
|
2158
2156
|
:root:root:root ._brc-0active-borderColor77378595._brc-0active-borderColor77378595:active{border-right-color:var(--borderColorPress) !important;}
|
|
2159
2157
|
:root:root:root:root ._brc-0focus-borderColor68052152._brc-0focus-borderColor68052152:focus{border-right-color:var(--borderColorFocus) !important;}
|
|
2160
2158
|
:root:root:root:root ._brc-0focus-borderColor69916956._brc-0focus-borderColor69916956:focus{border-right-color:var(--borderColorHover) !important;}
|
|
2161
|
-
:root:root:root:root ._brc-0focus-color06._brc-0focus-color06:focus{border-right-color:var(--color06) !important;}
|
|
2162
2159
|
:root:root:root:root ._brc-0focus-color7._brc-0focus-color7:focus{border-right-color:var(--color7) !important;}
|
|
2163
2160
|
:root:root:root:root ._brc-0focus-color8._brc-0focus-color8:focus{border-right-color:var(--color8) !important;}
|
|
2164
2161
|
@media (hover) {:root:root ._brc-0hover-borderColor._brc-0hover-borderColor:hover{border-right-color:var(--borderColor) !important;}}
|
|
@@ -2182,7 +2179,6 @@
|
|
|
2182
2179
|
:root:root:root ._btc-0active-borderColor77378595._btc-0active-borderColor77378595:active{border-top-color:var(--borderColorPress) !important;}
|
|
2183
2180
|
:root:root:root:root ._btc-0focus-borderColor68052152._btc-0focus-borderColor68052152:focus{border-top-color:var(--borderColorFocus) !important;}
|
|
2184
2181
|
:root:root:root:root ._btc-0focus-borderColor69916956._btc-0focus-borderColor69916956:focus{border-top-color:var(--borderColorHover) !important;}
|
|
2185
|
-
:root:root:root:root ._btc-0focus-color06._btc-0focus-color06:focus{border-top-color:var(--color06) !important;}
|
|
2186
2182
|
:root:root:root:root ._btc-0focus-color7._btc-0focus-color7:focus{border-top-color:var(--color7) !important;}
|
|
2187
2183
|
:root:root:root:root ._btc-0focus-color8._btc-0focus-color8:focus{border-top-color:var(--color8) !important;}
|
|
2188
2184
|
@media (hover) {:root:root ._btc-0hover-borderColor._btc-0hover-borderColor:hover{border-top-color:var(--borderColor) !important;}}
|
|
@@ -2350,7 +2346,6 @@
|
|
|
2350
2346
|
:root:root:root:root ._outlineColor-0focus-color8._outlineColor-0focus-color8:focus{outline-color:var(--color8) !important;}
|
|
2351
2347
|
:root:root:root:root ._outlineColor-0focus-visible-outlineColo114._outlineColor-0focus-visible-outlineColo114:focus-visible{outline-color:var(--outlineColor) !important;}
|
|
2352
2348
|
:root:root:root:root ._outlineStyle-0focus-solid._outlineStyle-0focus-solid:focus{outline-style:solid !important;}
|
|
2353
|
-
:root:root:root:root ._outlineStyle-0focus-visible-none._outlineStyle-0focus-visible-none:focus-visible{outline-style:none !important;}
|
|
2354
2349
|
:root:root:root:root ._outlineStyle-0focus-visible-solid._outlineStyle-0focus-visible-solid:focus-visible{outline-style:solid !important;}
|
|
2355
2350
|
:root ._outlineStyle-none._outlineStyle-none{outline-style:none;}
|
|
2356
2351
|
:root:root:root:root ._outlineWidth-0focus-2px._outlineWidth-0focus-2px:focus{outline-width:2px !important;}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.112",
|
|
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,36 +0,0 @@
|
|
|
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;
|
|
@@ -1,39 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,34 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|