@hanzo/ui 8.0.56 → 8.0.57
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.
|
@@ -3,13 +3,53 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.Switch = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Switch — a 36×20 pill, 16px thumb, `touch()` to the 44px floor everywhere.
|
|
8
|
+
*
|
|
9
|
+
* `minHeight` is NOT redundant beside `height`, and omitting it was the bug.
|
|
10
|
+
* gui's own `size` variant returns `{ height, minHeight, width }` for the
|
|
11
|
+
* default `$true` size, and setting `height` here overrode only two of the
|
|
12
|
+
* three — min-height beats height, always — so the 29px floor survived and
|
|
13
|
+
* every switch in every app rendered 36×29 instead of 36×20. At that ratio the
|
|
14
|
+
* browser clamps `borderRadius: 1000` to 10px, so it was not even a pill: a
|
|
15
|
+
* rounded rectangle with a small dot adrift inside it.
|
|
16
|
+
*
|
|
17
|
+
* State is carried by COLOUR, not by the thumb's 14px of travel alone. gui's
|
|
18
|
+
* default checked treatment is `$backgroundActive`, which in this theme resolves
|
|
19
|
+
* to the same value the unchecked track already has — measured live, on and off
|
|
20
|
+
* were pixel-identical apart from that translation. A state expressed only as
|
|
21
|
+
* position is one a screenshot, a narrow column and a low-vision reader all fail
|
|
22
|
+
* to read. `activeStyle` is the hook gui honours for exactly this: it is pulled
|
|
23
|
+
* out of props before Tamagui can mistake it for the press pseudo-style, and it
|
|
24
|
+
* REPLACES `$backgroundActive` rather than layering over it.
|
|
25
|
+
*
|
|
26
|
+
* The white is spent on ON and nowhere else. A resting page is mostly switches
|
|
27
|
+
* that are off, and a near-white thumb on every one of them is a field of lights
|
|
28
|
+
* with no signal in it — which is what a full page of these actually looked
|
|
29
|
+
* like. Off is muted, on is filled, and the loudest treatment is the one that
|
|
30
|
+
* means something.
|
|
31
|
+
*/
|
|
7
32
|
const gui_1 = require("@hanzo/gui");
|
|
8
33
|
const slot_1 = require("./slot.cjs");
|
|
9
34
|
const gesture_1 = require("./gesture.cjs");
|
|
35
|
+
const TRACK_W = 36;
|
|
10
36
|
const TRACK_H = 20;
|
|
11
37
|
const THUMB = 16;
|
|
12
|
-
const Switch = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Switch, { ...(0, slot_1.slot)('switch'), width:
|
|
38
|
+
const Switch = ({ disabled, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Switch, { ...(0, slot_1.slot)('switch'), width: TRACK_W, height: TRACK_H, minHeight: TRACK_H, padding: 2, flexShrink: 0, backgroundColor: "$color3",
|
|
13
39
|
// Without an explicit border the UA's 2px outset button border shows.
|
|
14
|
-
borderWidth: 1, borderColor: "$borderColor",
|
|
40
|
+
borderWidth: 1, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' },
|
|
41
|
+
// Stated rather than left to a `disabledStyle` this backend uses nowhere
|
|
42
|
+
// else: a control that ignores its own disabled prop looks identical to a
|
|
43
|
+
// live one, and the page this was found on had a disabled switch sitting
|
|
44
|
+
// beside eight enabled ones with nothing to tell them apart.
|
|
45
|
+
disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(0, gesture_1.touch)(TRACK_H, 44, 'y'), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, { ...(0, slot_1.slot)('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color10",
|
|
46
|
+
// `bg`, and it is the only one of the three spellings that is both typed
|
|
47
|
+
// and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
|
|
48
|
+
// `backgroundColor` paints but is not in that type; `background` is in it
|
|
49
|
+
// and compiles to a SEPARATE `_background-` class that races the base
|
|
50
|
+
// `_bg-` one on load order rather than replacing it; `bg` replaces it.
|
|
51
|
+
// Consumers build with ignoreBuildErrors, so the first would have shipped
|
|
52
|
+
// an error nobody sees and the second a colour that lands or does not
|
|
53
|
+
// depending on stylesheet order.
|
|
54
|
+
activeStyle: { bg: '$color1' } }) }));
|
|
15
55
|
exports.Switch = Switch;
|
|
@@ -1,7 +1,32 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
|
+
* Switch — a 36×20 pill, 16px thumb, `touch()` to the 44px floor everywhere.
|
|
3
|
+
*
|
|
4
|
+
* `minHeight` is NOT redundant beside `height`, and omitting it was the bug.
|
|
5
|
+
* gui's own `size` variant returns `{ height, minHeight, width }` for the
|
|
6
|
+
* default `$true` size, and setting `height` here overrode only two of the
|
|
7
|
+
* three — min-height beats height, always — so the 29px floor survived and
|
|
8
|
+
* every switch in every app rendered 36×29 instead of 36×20. At that ratio the
|
|
9
|
+
* browser clamps `borderRadius: 1000` to 10px, so it was not even a pill: a
|
|
10
|
+
* rounded rectangle with a small dot adrift inside it.
|
|
11
|
+
*
|
|
12
|
+
* State is carried by COLOUR, not by the thumb's 14px of travel alone. gui's
|
|
13
|
+
* default checked treatment is `$backgroundActive`, which in this theme resolves
|
|
14
|
+
* to the same value the unchecked track already has — measured live, on and off
|
|
15
|
+
* were pixel-identical apart from that translation. A state expressed only as
|
|
16
|
+
* position is one a screenshot, a narrow column and a low-vision reader all fail
|
|
17
|
+
* to read. `activeStyle` is the hook gui honours for exactly this: it is pulled
|
|
18
|
+
* out of props before Tamagui can mistake it for the press pseudo-style, and it
|
|
19
|
+
* REPLACES `$backgroundActive` rather than layering over it.
|
|
20
|
+
*
|
|
21
|
+
* The white is spent on ON and nowhere else. A resting page is mostly switches
|
|
22
|
+
* that are off, and a near-white thumb on every one of them is a field of lights
|
|
23
|
+
* with no signal in it — which is what a full page of these actually looked
|
|
24
|
+
* like. Off is muted, on is filled, and the loudest treatment is the one that
|
|
25
|
+
* means something.
|
|
26
|
+
*/
|
|
2
27
|
import { Switch as GuiSwitch } from '@hanzo/gui';
|
|
3
28
|
import type { ComponentProps } from 'react';
|
|
4
29
|
export type SwitchProps = ComponentProps<typeof GuiSwitch>;
|
|
5
|
-
declare const Switch: (props: SwitchProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
declare const Switch: ({ disabled, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
31
|
export { Switch };
|
|
7
32
|
//# sourceMappingURL=switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAQ3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1D,QAAA,MAAM,MAAM,GAAI,wBAAwB,WAAW,4CAuClD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
|
@@ -1,13 +1,53 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
/**
|
|
3
|
+
/**
|
|
4
|
+
* Switch — a 36×20 pill, 16px thumb, `touch()` to the 44px floor everywhere.
|
|
5
|
+
*
|
|
6
|
+
* `minHeight` is NOT redundant beside `height`, and omitting it was the bug.
|
|
7
|
+
* gui's own `size` variant returns `{ height, minHeight, width }` for the
|
|
8
|
+
* default `$true` size, and setting `height` here overrode only two of the
|
|
9
|
+
* three — min-height beats height, always — so the 29px floor survived and
|
|
10
|
+
* every switch in every app rendered 36×29 instead of 36×20. At that ratio the
|
|
11
|
+
* browser clamps `borderRadius: 1000` to 10px, so it was not even a pill: a
|
|
12
|
+
* rounded rectangle with a small dot adrift inside it.
|
|
13
|
+
*
|
|
14
|
+
* State is carried by COLOUR, not by the thumb's 14px of travel alone. gui's
|
|
15
|
+
* default checked treatment is `$backgroundActive`, which in this theme resolves
|
|
16
|
+
* to the same value the unchecked track already has — measured live, on and off
|
|
17
|
+
* were pixel-identical apart from that translation. A state expressed only as
|
|
18
|
+
* position is one a screenshot, a narrow column and a low-vision reader all fail
|
|
19
|
+
* to read. `activeStyle` is the hook gui honours for exactly this: it is pulled
|
|
20
|
+
* out of props before Tamagui can mistake it for the press pseudo-style, and it
|
|
21
|
+
* REPLACES `$backgroundActive` rather than layering over it.
|
|
22
|
+
*
|
|
23
|
+
* The white is spent on ON and nowhere else. A resting page is mostly switches
|
|
24
|
+
* that are off, and a near-white thumb on every one of them is a field of lights
|
|
25
|
+
* with no signal in it — which is what a full page of these actually looked
|
|
26
|
+
* like. Off is muted, on is filled, and the loudest treatment is the one that
|
|
27
|
+
* means something.
|
|
28
|
+
*/
|
|
4
29
|
import { Switch as GuiSwitch } from '@hanzo/gui';
|
|
5
30
|
import { slot } from './slot.js';
|
|
6
31
|
import { touch } from './gesture.js';
|
|
32
|
+
const TRACK_W = 36;
|
|
7
33
|
const TRACK_H = 20;
|
|
8
34
|
const THUMB = 16;
|
|
9
|
-
const Switch = (props) => (_jsx(GuiSwitch, { ...slot('switch'), width:
|
|
35
|
+
const Switch = ({ disabled, ...props }) => (_jsx(GuiSwitch, { ...slot('switch'), width: TRACK_W, height: TRACK_H, minHeight: TRACK_H, padding: 2, flexShrink: 0, backgroundColor: "$color3",
|
|
10
36
|
// Without an explicit border the UA's 2px outset button border shows.
|
|
11
|
-
borderWidth: 1, borderColor: "$borderColor",
|
|
37
|
+
borderWidth: 1, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' },
|
|
38
|
+
// Stated rather than left to a `disabledStyle` this backend uses nowhere
|
|
39
|
+
// else: a control that ignores its own disabled prop looks identical to a
|
|
40
|
+
// live one, and the page this was found on had a disabled switch sitting
|
|
41
|
+
// beside eight enabled ones with nothing to tell them apart.
|
|
42
|
+
disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...touch(TRACK_H, 44, 'y'), ...props, children: _jsx(GuiSwitch.Thumb, { ...slot('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color10",
|
|
43
|
+
// `bg`, and it is the only one of the three spellings that is both typed
|
|
44
|
+
// and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
|
|
45
|
+
// `backgroundColor` paints but is not in that type; `background` is in it
|
|
46
|
+
// and compiles to a SEPARATE `_background-` class that races the base
|
|
47
|
+
// `_bg-` one on load order rather than replacing it; `bg` replaces it.
|
|
48
|
+
// Consumers build with ignoreBuildErrors, so the first would have shipped
|
|
49
|
+
// an error nobody sees and the second a colour that lands or does not
|
|
50
|
+
// depending on stylesheet order.
|
|
51
|
+
activeStyle: { bg: '$color1' } }) }));
|
|
12
52
|
export { Switch };
|
|
13
53
|
//# sourceMappingURL=switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ
|
|
1
|
+
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,KAAK,GAAG,EAAE,CAAA;AAIhB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACtD,KAAC,SAAS,OACJ,IAAI,CAAC,QAAQ,CAAC,EAClB,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,CAAC,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAC,SAAS;IACzB,sEAAsE;IACtE,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,WAAW,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE;IACrE,yEAAyE;IACzE,0EAA0E;IAC1E,yEAAyE;IACzE,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KACxC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,GAAG,CAAC,KACvB,KAAK,YAET,KAAC,SAAS,CAAC,KAAK,OACV,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,eAAe,EAAC,UAAU;QAC1B,yEAAyE;QACzE,4EAA4E;QAC5E,0EAA0E;QAC1E,sEAAsE;QACtE,uEAAuE;QACvE,0EAA0E;QAC1E,sEAAsE;QACtE,iCAAiC;QACjC,WAAW,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,GAC9B,GACQ,CACb,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
package/dist/styles.css
CHANGED
|
@@ -2109,6 +2109,8 @@
|
|
|
2109
2109
|
:root ._bg-background{background-color:var(--background);}
|
|
2110
2110
|
:root ._bg-backgroundA94988999{background-color:var(--backgroundActive);}
|
|
2111
2111
|
:root ._bg-borderColor{background-color:var(--borderColor);}
|
|
2112
|
+
:root ._bg-color1{background-color:var(--color1);}
|
|
2113
|
+
:root ._bg-color10{background-color:var(--color10);}
|
|
2112
2114
|
:root ._bg-color12{background-color:var(--color12);}
|
|
2113
2115
|
:root ._bg-color2{background-color:var(--color2);}
|
|
2114
2116
|
:root ._bg-color3{background-color:var(--color3);}
|
|
@@ -2128,6 +2130,7 @@
|
|
|
2128
2130
|
@media (hover) {:root:root ._borderBottomColor-0hover-color8._borderBottomColor-0hover-color8:hover{border-bottom-color:var(--color8) !important;}}
|
|
2129
2131
|
:root ._borderBottomColor-backgroundF3405682._borderBottomColor-backgroundF3405682{border-bottom-color:var(--backgroundFocus);}
|
|
2130
2132
|
:root ._borderBottomColor-borderColor._borderBottomColor-borderColor{border-bottom-color:var(--borderColor);}
|
|
2133
|
+
:root ._borderBottomColor-color12._borderBottomColor-color12{border-bottom-color:var(--color12);}
|
|
2131
2134
|
:root ._borderBottomColor-color6._borderBottomColor-color6{border-bottom-color:var(--color6);}
|
|
2132
2135
|
:root ._borderBottomColor-transparent._borderBottomColor-transparent{border-bottom-color:transparent;}
|
|
2133
2136
|
:root ._borderBottomWidth-0px._borderBottomWidth-0px{border-bottom-width:0px;}
|
|
@@ -2143,6 +2146,7 @@
|
|
|
2143
2146
|
@media (hover) {:root:root ._borderLeftColor-0hover-color8._borderLeftColor-0hover-color8:hover{border-left-color:var(--color8) !important;}}
|
|
2144
2147
|
:root ._borderLeftColor-backgroundF3405682._borderLeftColor-backgroundF3405682{border-left-color:var(--backgroundFocus);}
|
|
2145
2148
|
:root ._borderLeftColor-borderColor._borderLeftColor-borderColor{border-left-color:var(--borderColor);}
|
|
2149
|
+
:root ._borderLeftColor-color12._borderLeftColor-color12{border-left-color:var(--color12);}
|
|
2146
2150
|
:root ._borderLeftColor-color6._borderLeftColor-color6{border-left-color:var(--color6);}
|
|
2147
2151
|
:root ._borderLeftColor-transparent._borderLeftColor-transparent{border-left-color:transparent;}
|
|
2148
2152
|
:root ._borderLeftWidth-0px._borderLeftWidth-0px{border-left-width:0px;}
|
|
@@ -2158,6 +2162,7 @@
|
|
|
2158
2162
|
@media (hover) {:root:root ._brc-0hover-color8._brc-0hover-color8:hover{border-right-color:var(--color8) !important;}}
|
|
2159
2163
|
:root ._brc-backgroundF3405682._brc-backgroundF3405682{border-right-color:var(--backgroundFocus);}
|
|
2160
2164
|
:root ._brc-borderColor._brc-borderColor{border-right-color:var(--borderColor);}
|
|
2165
|
+
:root ._brc-color12._brc-color12{border-right-color:var(--color12);}
|
|
2161
2166
|
:root ._brc-color6._brc-color6{border-right-color:var(--color6);}
|
|
2162
2167
|
:root ._brc-transparent._brc-transparent{border-right-color:transparent;}
|
|
2163
2168
|
:root ._brs-solid._brs-solid{border-right-style:solid;}
|
|
@@ -2174,6 +2179,7 @@
|
|
|
2174
2179
|
@media (hover) {:root:root ._btc-0hover-color8._btc-0hover-color8:hover{border-top-color:var(--color8) !important;}}
|
|
2175
2180
|
:root ._btc-backgroundF3405682._btc-backgroundF3405682{border-top-color:var(--backgroundFocus);}
|
|
2176
2181
|
:root ._btc-borderColor._btc-borderColor{border-top-color:var(--borderColor);}
|
|
2182
|
+
:root ._btc-color12._btc-color12{border-top-color:var(--color12);}
|
|
2177
2183
|
:root ._btc-color6._btc-color6{border-top-color:var(--color6);}
|
|
2178
2184
|
:root ._btc-transparent._btc-transparent{border-top-color:transparent;}
|
|
2179
2185
|
:root ._btlr-100000px{border-top-left-radius:100000px;}
|
|
@@ -2278,8 +2284,8 @@
|
|
|
2278
2284
|
:root ._maxW-32px{max-width:32px;}
|
|
2279
2285
|
:root ._maxW-600px{max-width:600px;}
|
|
2280
2286
|
:root ._minH-16px{min-height:16px;}
|
|
2287
|
+
:root ._minH-20px{min-height:20px;}
|
|
2281
2288
|
:root ._minH-24px{min-height:24px;}
|
|
2282
|
-
:root ._minH-29px{min-height:29px;}
|
|
2283
2289
|
:root ._minH-32px{min-height:32px;}
|
|
2284
2290
|
:root ._minH-36px{min-height:36px;}
|
|
2285
2291
|
:root ._minH-40px{min-height:40px;}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzo/ui",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.57",
|
|
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": {
|