webadwaita 0.2.0 → 0.2.2
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 +25 -32
- package/dist/native/Box/index.js +120 -0
- package/{src/Button/index.tsx → dist/native/Button/index.js} +32 -50
- package/{src/Card/index.tsx → dist/native/Card/index.js} +25 -25
- package/{src/Checkbox/index.tsx → dist/native/Checkbox/index.js} +41 -48
- package/{src/Entry/index.tsx → dist/native/Entry/index.js} +24 -42
- package/{src/HeaderBar/index.tsx → dist/native/HeaderBar/index.js} +31 -30
- package/{src/Switch/index.tsx → dist/native/Switch/index.js} +31 -37
- package/dist/native/index.js +8 -0
- package/{src/theme.ts → dist/native/theme.js} +4 -7
- package/{src/tokens.css.ts → dist/native/tokens.css.js} +3 -17
- package/dist/types/Box/index.d.ts +23 -0
- package/dist/types/Box/index.d.ts.map +1 -0
- package/dist/types/Button/index.d.ts +22 -0
- package/dist/types/Button/index.d.ts.map +1 -0
- package/dist/types/Card/index.d.ts +14 -0
- package/dist/types/Card/index.d.ts.map +1 -0
- package/dist/types/Checkbox/index.d.ts +13 -0
- package/dist/types/Checkbox/index.d.ts.map +1 -0
- package/dist/types/Entry/index.d.ts +17 -0
- package/dist/types/Entry/index.d.ts.map +1 -0
- package/dist/types/HeaderBar/index.d.ts +16 -0
- package/dist/types/HeaderBar/index.d.ts.map +1 -0
- package/dist/types/Switch/index.d.ts +13 -0
- package/dist/types/Switch/index.d.ts.map +1 -0
- package/{src/index.ts → dist/types/index.d.ts} +1 -7
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/theme.d.ts +77 -0
- package/dist/types/theme.d.ts.map +1 -0
- package/dist/types/tokens.css.d.ts +76 -0
- package/dist/types/tokens.css.d.ts.map +1 -0
- package/dist/web/Box/index.js +150 -0
- package/dist/web/Box/styles.css +39 -0
- package/dist/web/Button/index.js +132 -0
- package/dist/web/Button/styles.css +81 -0
- package/dist/web/Card/index.js +75 -0
- package/dist/web/Card/styles.css +91 -0
- package/dist/web/Checkbox/index.js +116 -0
- package/dist/web/Checkbox/styles.css +99 -0
- package/dist/web/Entry/index.js +74 -0
- package/dist/web/Entry/styles.css +113 -0
- package/dist/web/HeaderBar/index.js +87 -0
- package/dist/web/HeaderBar/styles.css +117 -0
- package/dist/web/Switch/index.js +86 -0
- package/dist/web/Switch/styles.css +134 -0
- package/dist/web/_rsd/index.js +484 -0
- package/dist/web/_rsd/runtime.js +322 -0
- package/dist/web/_tokens/styles.css +32 -0
- package/dist/web/index.js +8 -0
- package/dist/web/theme.js +16 -0
- package/dist/web/tokens.css.js +79 -0
- package/package.json +29 -9
- package/babel.config.cjs +0 -23
- package/src/Box/index.tsx +0 -105
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
|
|
2
|
+
@layer priority1, priority2, priority3, priority4;
|
|
3
|
+
@layer priority1{
|
|
4
|
+
.x1rfi6cy{padding:12px}
|
|
5
|
+
.xwmi1nh{padding:16px}
|
|
6
|
+
.x14yi81o{padding:24px}
|
|
7
|
+
.x1ck75x5{padding:32px}
|
|
8
|
+
.xudt4gt{padding:4px}
|
|
9
|
+
.x12ldruc{padding:8px}
|
|
10
|
+
}
|
|
11
|
+
@layer priority2{
|
|
12
|
+
.x1bbxysd{border-color:rgba(0, 0, 0, 0.15)}
|
|
13
|
+
.x16xecvt{border-color:rgba(0, 0, 0, 0.25)}
|
|
14
|
+
.x3wdnbj{border-radius:12px}
|
|
15
|
+
.xdwrzdg{border-radius:6px}
|
|
16
|
+
.x4gkjtx{border-radius:9999px}
|
|
17
|
+
.xdamf1x{border-radius:9px}
|
|
18
|
+
.x19u8g8r{gap:12px}
|
|
19
|
+
.x1od9ebw{gap:16px}
|
|
20
|
+
.xc9i02s{gap:24px}
|
|
21
|
+
.xy744dg{gap:32px}
|
|
22
|
+
.x1cuygh6{gap:4px}
|
|
23
|
+
.x15hg9oy{gap:8px}
|
|
24
|
+
.xb3r6kr{overflow:hidden}
|
|
25
|
+
.x83n5x6{padding-block:12px}
|
|
26
|
+
.x1of5wme{padding-inline:12px}
|
|
27
|
+
.x1w4cf6q{padding-inline:16px}
|
|
28
|
+
.xoawizh{padding-inline:24px}
|
|
29
|
+
.x1pe04oy:hover{border-color:rgba(0, 0, 0, 0.8)}
|
|
30
|
+
}
|
|
31
|
+
@layer priority3{
|
|
32
|
+
.x1pha0wt{align-items:baseline}
|
|
33
|
+
.x6s0dn4{align-items:center}
|
|
34
|
+
.xuk3077{align-items:flex-end}
|
|
35
|
+
.x1cy8zhl{align-items:flex-start}
|
|
36
|
+
.x1qjc9v5{align-items:stretch}
|
|
37
|
+
.xqcrz7y{align-self:flex-start}
|
|
38
|
+
.xkh2ocl{align-self:stretch}
|
|
39
|
+
.xhw1y8f{background-color:#3584e4}
|
|
40
|
+
.x1jedtje{background-color:#e01b24}
|
|
41
|
+
.x2pwvcl{background-color:#ffffff}
|
|
42
|
+
.x1wvpxmy{background-color:rgba(0, 0, 0, 0.07)}
|
|
43
|
+
.xjbqb8w{background-color:transparent}
|
|
44
|
+
.x11j0q79{box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
|
|
45
|
+
.xgtzv0a{color:#ffffff}
|
|
46
|
+
.xk7gp71{color:#ffffff}
|
|
47
|
+
.x117bw84{color:rgba(0, 0, 0, 0.8)}
|
|
48
|
+
.x1h6gzvc{cursor:not-allowed}
|
|
49
|
+
.x1ypdohk{cursor:pointer}
|
|
50
|
+
.x78zum5{display:flex}
|
|
51
|
+
.xdt5ytf{flex-direction:column}
|
|
52
|
+
.x1q0g3np{flex-direction:row}
|
|
53
|
+
.x1iyjqo2{flex-grow:1}
|
|
54
|
+
.x1a02dak{flex-wrap:wrap}
|
|
55
|
+
.x164ifzn{font-family:"Adwaita Sans", "Cantarell", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif}
|
|
56
|
+
.x13gn23q{font-size:12px}
|
|
57
|
+
.xqwltnl{font-size:14px}
|
|
58
|
+
.xif65rj{font-size:14px}
|
|
59
|
+
.x1lbyq2x{font-size:16px}
|
|
60
|
+
.xaajq3h{font-weight:600}
|
|
61
|
+
.xq8utqp{font-weight:700}
|
|
62
|
+
.x1xlr1w8{font-weight:700}
|
|
63
|
+
.xl56j7k{justify-content:center}
|
|
64
|
+
.x13a6bvl{justify-content:flex-end}
|
|
65
|
+
.x1nhvcw1{justify-content:flex-start}
|
|
66
|
+
.x1l1ennw{justify-content:space-around}
|
|
67
|
+
.x1qughib{justify-content:space-between}
|
|
68
|
+
.xaw8158{justify-content:space-evenly}
|
|
69
|
+
.x11807lh{line-height:1.3}
|
|
70
|
+
.x1aebrpu{line-height:1.4}
|
|
71
|
+
.x7zvn91{line-height:1.5}
|
|
72
|
+
.xo5v014{line-height:1}
|
|
73
|
+
.xbyyjgo{opacity:.5}
|
|
74
|
+
.x2b8uid{text-align:center}
|
|
75
|
+
.xcj3dzi{transition-duration:120ms}
|
|
76
|
+
.xts7igz{transition-property:background-color,border-color}
|
|
77
|
+
.x1koyr57{transition-property:background-color,box-shadow,color}
|
|
78
|
+
.xfrgxy7{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
|
|
79
|
+
.x87ps6o{user-select:none}
|
|
80
|
+
.x12s1yt6:hover{background-color:#4a90e9}
|
|
81
|
+
.xusvk13:hover{background-color:#e8434b}
|
|
82
|
+
.x1b2b8i4:hover{background-color:rgba(0, 0, 0, 0.07)}
|
|
83
|
+
.xvuosku:hover{background-color:rgba(0, 0, 0, 0.12)}
|
|
84
|
+
.xc7rq14:active{background-color:#1a6bb8}
|
|
85
|
+
.x1x0tut:active{background-color:#b81920}
|
|
86
|
+
.x1krbwd3:active{background-color:rgba(0, 0, 0, 0.12)}
|
|
87
|
+
.xtkh9g1:active{background-color:rgba(0, 0, 0, 0.18)}
|
|
88
|
+
}
|
|
89
|
+
@layer priority4{
|
|
90
|
+
.x14ro01c{border-bottom-color:rgba(0, 0, 0, 0.15)}
|
|
91
|
+
.x1q0q8m5{border-bottom-style:solid}
|
|
92
|
+
.xso031l{border-bottom-width:1px}
|
|
93
|
+
.xmix8c7{height:18px}
|
|
94
|
+
.x1fgtraw{height:28px}
|
|
95
|
+
.xc9qbxq{height:36px}
|
|
96
|
+
.xn3w4p2{height:44px}
|
|
97
|
+
.xeuugli{min-width:0}
|
|
98
|
+
.x1xp8n7a{width:18px}
|
|
99
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import './styles.css';
|
|
2
|
+
import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { css, html } from '../_rsd/index.js';
|
|
5
|
+
import { palette, radius, spacing, typography, motion } from '../tokens.css';
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
/**
|
|
8
|
+
* Adwaita-style text entry. Underline focus indicator + subtle filled surface,
|
|
9
|
+
* like libadwaita's `AdwEntry`.
|
|
10
|
+
*/
|
|
11
|
+
export function Entry(props) {
|
|
12
|
+
const {
|
|
13
|
+
value,
|
|
14
|
+
defaultValue,
|
|
15
|
+
placeholder,
|
|
16
|
+
disabled = false,
|
|
17
|
+
readOnly = false,
|
|
18
|
+
invalid = false,
|
|
19
|
+
type = 'text',
|
|
20
|
+
onChange,
|
|
21
|
+
onSubmit
|
|
22
|
+
} = props;
|
|
23
|
+
const latestValueRef = React.useRef(value ?? defaultValue ?? '');
|
|
24
|
+
return /*#__PURE__*/_jsx("input", {
|
|
25
|
+
type: type,
|
|
26
|
+
value: value,
|
|
27
|
+
defaultValue: defaultValue,
|
|
28
|
+
placeholder: placeholder,
|
|
29
|
+
disabled: disabled,
|
|
30
|
+
readOnly: readOnly,
|
|
31
|
+
onChange: e => {
|
|
32
|
+
latestValueRef.current = e.target.value;
|
|
33
|
+
onChange?.(e.target.value);
|
|
34
|
+
},
|
|
35
|
+
onKeyDown: e => {
|
|
36
|
+
if (e.key === 'Enter') onSubmit?.(latestValueRef.current);
|
|
37
|
+
},
|
|
38
|
+
..._rsdMerge(_rsdDefaultStyles.input, styles.input, invalid && styles.invalid, disabled && styles.disabled),
|
|
39
|
+
dir: "auto"
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
const styles = {
|
|
43
|
+
input: {
|
|
44
|
+
kWkggS: "x1wvpxmy",
|
|
45
|
+
kMwMTN: "x117bw84",
|
|
46
|
+
kMzoRj: "xc342km",
|
|
47
|
+
kt9PQ7: "xlxy82",
|
|
48
|
+
kfdmCh: "x1q0q8m5",
|
|
49
|
+
kL6WhQ: "x16stqrj x19pfmzq xj3zwls",
|
|
50
|
+
kIxVMA: "x2donmn",
|
|
51
|
+
ksF3WI: "xngj8x4",
|
|
52
|
+
kqGeR4: "xfrllxf",
|
|
53
|
+
kYm2EN: "xjppbhk",
|
|
54
|
+
k8WAf4: "x5f28bg",
|
|
55
|
+
kg3NbH: "x1of5wme",
|
|
56
|
+
kMv6JI: "x164ifzn",
|
|
57
|
+
kGuDYH: "xqwltnl",
|
|
58
|
+
kLWn49: "x7zvn91",
|
|
59
|
+
kAzted: "xu0aao5",
|
|
60
|
+
k1ekBW: "xq90yva",
|
|
61
|
+
kIyJzY: "xcj3dzi",
|
|
62
|
+
kAMwcw: "xfrgxy7",
|
|
63
|
+
$$css: true
|
|
64
|
+
},
|
|
65
|
+
invalid: {
|
|
66
|
+
kL6WhQ: "x16l2oou x129yw6v x1xmy3i3",
|
|
67
|
+
$$css: true
|
|
68
|
+
},
|
|
69
|
+
disabled: {
|
|
70
|
+
kSiTet: "xbyyjgo",
|
|
71
|
+
kkrTdU: "x1h6gzvc",
|
|
72
|
+
$$css: true
|
|
73
|
+
}
|
|
74
|
+
};
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
|
|
2
|
+
@layer priority1, priority2, priority3, priority4;
|
|
3
|
+
@layer priority1{
|
|
4
|
+
.x1rfi6cy{padding:12px}
|
|
5
|
+
.xwmi1nh{padding:16px}
|
|
6
|
+
.x14yi81o{padding:24px}
|
|
7
|
+
.x1ck75x5{padding:32px}
|
|
8
|
+
.xudt4gt{padding:4px}
|
|
9
|
+
.x12ldruc{padding:8px}
|
|
10
|
+
}
|
|
11
|
+
@layer priority2{
|
|
12
|
+
.x1bbxysd{border-color:rgba(0, 0, 0, 0.15)}
|
|
13
|
+
.x16xecvt{border-color:rgba(0, 0, 0, 0.25)}
|
|
14
|
+
.x3wdnbj{border-radius:12px}
|
|
15
|
+
.xdwrzdg{border-radius:6px}
|
|
16
|
+
.x4gkjtx{border-radius:9999px}
|
|
17
|
+
.xdamf1x{border-radius:9px}
|
|
18
|
+
.x19u8g8r{gap:12px}
|
|
19
|
+
.x1od9ebw{gap:16px}
|
|
20
|
+
.xc9i02s{gap:24px}
|
|
21
|
+
.xy744dg{gap:32px}
|
|
22
|
+
.x1cuygh6{gap:4px}
|
|
23
|
+
.x15hg9oy{gap:8px}
|
|
24
|
+
.xb3r6kr{overflow:hidden}
|
|
25
|
+
.x83n5x6{padding-block:12px}
|
|
26
|
+
.x5f28bg{padding-block:8px}
|
|
27
|
+
.x1of5wme{padding-inline:12px}
|
|
28
|
+
.x1w4cf6q{padding-inline:16px}
|
|
29
|
+
.xoawizh{padding-inline:24px}
|
|
30
|
+
.x1pe04oy:hover{border-color:rgba(0, 0, 0, 0.8)}
|
|
31
|
+
}
|
|
32
|
+
@layer priority3{
|
|
33
|
+
.x1pha0wt{align-items:baseline}
|
|
34
|
+
.x6s0dn4{align-items:center}
|
|
35
|
+
.xuk3077{align-items:flex-end}
|
|
36
|
+
.x1cy8zhl{align-items:flex-start}
|
|
37
|
+
.x1qjc9v5{align-items:stretch}
|
|
38
|
+
.xqcrz7y{align-self:flex-start}
|
|
39
|
+
.xkh2ocl{align-self:stretch}
|
|
40
|
+
.xhw1y8f{background-color:#3584e4}
|
|
41
|
+
.x1jedtje{background-color:#e01b24}
|
|
42
|
+
.x2pwvcl{background-color:#ffffff}
|
|
43
|
+
.x1wvpxmy{background-color:rgba(0, 0, 0, 0.07)}
|
|
44
|
+
.xjbqb8w{background-color:transparent}
|
|
45
|
+
.x11j0q79{box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
|
|
46
|
+
.xgtzv0a{color:#ffffff}
|
|
47
|
+
.xk7gp71{color:#ffffff}
|
|
48
|
+
.x117bw84{color:rgba(0, 0, 0, 0.8)}
|
|
49
|
+
.x1h6gzvc{cursor:not-allowed}
|
|
50
|
+
.x1ypdohk{cursor:pointer}
|
|
51
|
+
.x78zum5{display:flex}
|
|
52
|
+
.xdt5ytf{flex-direction:column}
|
|
53
|
+
.x1q0g3np{flex-direction:row}
|
|
54
|
+
.x1iyjqo2{flex-grow:1}
|
|
55
|
+
.x1a02dak{flex-wrap:wrap}
|
|
56
|
+
.x164ifzn{font-family:"Adwaita Sans", "Cantarell", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif}
|
|
57
|
+
.x13gn23q{font-size:12px}
|
|
58
|
+
.xqwltnl{font-size:14px}
|
|
59
|
+
.xif65rj{font-size:14px}
|
|
60
|
+
.x1lbyq2x{font-size:16px}
|
|
61
|
+
.xaajq3h{font-weight:600}
|
|
62
|
+
.xq8utqp{font-weight:700}
|
|
63
|
+
.x1xlr1w8{font-weight:700}
|
|
64
|
+
.xl56j7k{justify-content:center}
|
|
65
|
+
.x13a6bvl{justify-content:flex-end}
|
|
66
|
+
.x1nhvcw1{justify-content:flex-start}
|
|
67
|
+
.x1l1ennw{justify-content:space-around}
|
|
68
|
+
.x1qughib{justify-content:space-between}
|
|
69
|
+
.xaw8158{justify-content:space-evenly}
|
|
70
|
+
.x11807lh{line-height:1.3}
|
|
71
|
+
.x1aebrpu{line-height:1.4}
|
|
72
|
+
.x7zvn91{line-height:1.5}
|
|
73
|
+
.xo5v014{line-height:1}
|
|
74
|
+
.xbyyjgo{opacity:.5}
|
|
75
|
+
.x2b8uid{text-align:center}
|
|
76
|
+
.xcj3dzi{transition-duration:120ms}
|
|
77
|
+
.xts7igz{transition-property:background-color,border-color}
|
|
78
|
+
.x1koyr57{transition-property:background-color,box-shadow,color}
|
|
79
|
+
.xq90yva{transition-property:border-color,background-color}
|
|
80
|
+
.xfrgxy7{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
|
|
81
|
+
.x87ps6o{user-select:none}
|
|
82
|
+
.x12s1yt6:hover{background-color:#4a90e9}
|
|
83
|
+
.xusvk13:hover{background-color:#e8434b}
|
|
84
|
+
.x1b2b8i4:hover{background-color:rgba(0, 0, 0, 0.07)}
|
|
85
|
+
.xvuosku:hover{background-color:rgba(0, 0, 0, 0.12)}
|
|
86
|
+
.xc7rq14:active{background-color:#1a6bb8}
|
|
87
|
+
.x1x0tut:active{background-color:#b81920}
|
|
88
|
+
.x1krbwd3:active{background-color:rgba(0, 0, 0, 0.12)}
|
|
89
|
+
.xtkh9g1:active{background-color:rgba(0, 0, 0, 0.18)}
|
|
90
|
+
}
|
|
91
|
+
@layer priority4{
|
|
92
|
+
.x14ro01c{border-bottom-color:rgba(0, 0, 0, 0.15)}
|
|
93
|
+
.x16stqrj{border-bottom-color:transparent}
|
|
94
|
+
.x16l2oou{border-bottom-color:#e01b24}
|
|
95
|
+
.xfrllxf{border-bottom-left-radius:0}
|
|
96
|
+
.xjppbhk{border-bottom-right-radius:0}
|
|
97
|
+
.x1q0q8m5{border-bottom-style:solid}
|
|
98
|
+
.xso031l{border-bottom-width:1px}
|
|
99
|
+
.xlxy82{border-bottom-width:2px}
|
|
100
|
+
.x2donmn{border-top-left-radius:6px}
|
|
101
|
+
.xngj8x4{border-top-right-radius:6px}
|
|
102
|
+
.xmix8c7{height:18px}
|
|
103
|
+
.x1fgtraw{height:28px}
|
|
104
|
+
.xc9qbxq{height:36px}
|
|
105
|
+
.xn3w4p2{height:44px}
|
|
106
|
+
.xu0aao5{min-height:36px}
|
|
107
|
+
.xeuugli{min-width:0}
|
|
108
|
+
.x1xp8n7a{width:18px}
|
|
109
|
+
.x129yw6v:hover{border-bottom-color:#e01b24}
|
|
110
|
+
.x19pfmzq:hover{border-bottom-color:rgba(0, 0, 0, 0.25)}
|
|
111
|
+
.x1xmy3i3:focus{border-bottom-color:#e01b24}
|
|
112
|
+
.xj3zwls:focus{border-bottom-color:#3584e4}
|
|
113
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import './styles.css';
|
|
2
|
+
import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { css, html } from '../_rsd/index.js';
|
|
5
|
+
import { palette, spacing, typography } from '../tokens.css';
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
/**
|
|
8
|
+
* Top-level header bar matching libadwaita's AdwHeaderBar — a thin titled
|
|
9
|
+
* strip that sits at the top of a window. Centered title with optional
|
|
10
|
+
* leading/trailing slots.
|
|
11
|
+
*/
|
|
12
|
+
export function HeaderBar(props) {
|
|
13
|
+
const {
|
|
14
|
+
title,
|
|
15
|
+
subtitle,
|
|
16
|
+
start,
|
|
17
|
+
end
|
|
18
|
+
} = props;
|
|
19
|
+
return /*#__PURE__*/_jsxs("header", {
|
|
20
|
+
..._rsdMerge(_rsdDefaultStyles.header, styles.bar),
|
|
21
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
22
|
+
..._rsdMerge(_rsdDefaultStyles.div, styles.side),
|
|
23
|
+
children: start
|
|
24
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
25
|
+
..._rsdMerge(_rsdDefaultStyles.div, styles.titleBlock),
|
|
26
|
+
children: [title != null && /*#__PURE__*/_jsx("span", {
|
|
27
|
+
..._rsdMerge(_rsdDefaultStyles.span, styles.title),
|
|
28
|
+
children: title
|
|
29
|
+
}), subtitle != null && /*#__PURE__*/_jsx("span", {
|
|
30
|
+
..._rsdMerge(_rsdDefaultStyles.span, styles.subtitle),
|
|
31
|
+
children: subtitle
|
|
32
|
+
})]
|
|
33
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
34
|
+
..._rsdMerge(_rsdDefaultStyles.div, styles.side, styles.sideEnd),
|
|
35
|
+
children: end
|
|
36
|
+
})]
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
const styles = {
|
|
40
|
+
bar: {
|
|
41
|
+
k1xSpc: "x78zum5",
|
|
42
|
+
kXwgrk: "x1q0g3np",
|
|
43
|
+
kGNEyG: "x6s0dn4",
|
|
44
|
+
kWkggS: "xdwvxq8",
|
|
45
|
+
kt9PQ7: "xso031l",
|
|
46
|
+
kfdmCh: "x1q0q8m5",
|
|
47
|
+
kL6WhQ: "x14ro01c",
|
|
48
|
+
k8WAf4: "x5f28bg",
|
|
49
|
+
kg3NbH: "x1of5wme",
|
|
50
|
+
kOIVth: "x15hg9oy",
|
|
51
|
+
kAzted: "x3sc9yq",
|
|
52
|
+
$$css: true
|
|
53
|
+
},
|
|
54
|
+
side: {
|
|
55
|
+
k1xSpc: "x78zum5",
|
|
56
|
+
kXwgrk: "x1q0g3np",
|
|
57
|
+
kGNEyG: "x6s0dn4",
|
|
58
|
+
kOIVth: "x15hg9oy",
|
|
59
|
+
kCS8Yb: "x1r8uery",
|
|
60
|
+
kzQI83: "x1iyjqo2",
|
|
61
|
+
$$css: true
|
|
62
|
+
},
|
|
63
|
+
sideEnd: {
|
|
64
|
+
kjj79g: "x13a6bvl",
|
|
65
|
+
$$css: true
|
|
66
|
+
},
|
|
67
|
+
titleBlock: {
|
|
68
|
+
k1xSpc: "x78zum5",
|
|
69
|
+
kXwgrk: "xdt5ytf",
|
|
70
|
+
kGNEyG: "x6s0dn4",
|
|
71
|
+
kjj79g: "xl56j7k",
|
|
72
|
+
$$css: true
|
|
73
|
+
},
|
|
74
|
+
title: {
|
|
75
|
+
kMv6JI: "x164ifzn",
|
|
76
|
+
kGuDYH: "xqwltnl",
|
|
77
|
+
k63SB2: "xaajq3h",
|
|
78
|
+
kMwMTN: "x117bw84",
|
|
79
|
+
$$css: true
|
|
80
|
+
},
|
|
81
|
+
subtitle: {
|
|
82
|
+
kMv6JI: "x164ifzn",
|
|
83
|
+
kGuDYH: "x13gn23q",
|
|
84
|
+
kMwMTN: "xlw9qwm",
|
|
85
|
+
$$css: true
|
|
86
|
+
}
|
|
87
|
+
};
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
|
|
2
|
+
@layer priority1, priority2, priority3, priority4;
|
|
3
|
+
@layer priority1{
|
|
4
|
+
.x1rfi6cy{padding:12px}
|
|
5
|
+
.xwmi1nh{padding:16px}
|
|
6
|
+
.x14yi81o{padding:24px}
|
|
7
|
+
.x1ck75x5{padding:32px}
|
|
8
|
+
.xudt4gt{padding:4px}
|
|
9
|
+
.x12ldruc{padding:8px}
|
|
10
|
+
}
|
|
11
|
+
@layer priority2{
|
|
12
|
+
.x1bbxysd{border-color:rgba(0, 0, 0, 0.15)}
|
|
13
|
+
.x16xecvt{border-color:rgba(0, 0, 0, 0.25)}
|
|
14
|
+
.x3wdnbj{border-radius:12px}
|
|
15
|
+
.xdwrzdg{border-radius:6px}
|
|
16
|
+
.x4gkjtx{border-radius:9999px}
|
|
17
|
+
.xdamf1x{border-radius:9px}
|
|
18
|
+
.x19u8g8r{gap:12px}
|
|
19
|
+
.x1od9ebw{gap:16px}
|
|
20
|
+
.xc9i02s{gap:24px}
|
|
21
|
+
.xy744dg{gap:32px}
|
|
22
|
+
.x1cuygh6{gap:4px}
|
|
23
|
+
.x15hg9oy{gap:8px}
|
|
24
|
+
.xb3r6kr{overflow:hidden}
|
|
25
|
+
.x83n5x6{padding-block:12px}
|
|
26
|
+
.x5f28bg{padding-block:8px}
|
|
27
|
+
.x1of5wme{padding-inline:12px}
|
|
28
|
+
.x1w4cf6q{padding-inline:16px}
|
|
29
|
+
.xoawizh{padding-inline:24px}
|
|
30
|
+
.x1pe04oy:hover{border-color:rgba(0, 0, 0, 0.8)}
|
|
31
|
+
}
|
|
32
|
+
@layer priority3{
|
|
33
|
+
.x1pha0wt{align-items:baseline}
|
|
34
|
+
.x6s0dn4{align-items:center}
|
|
35
|
+
.xuk3077{align-items:flex-end}
|
|
36
|
+
.x1cy8zhl{align-items:flex-start}
|
|
37
|
+
.x1qjc9v5{align-items:stretch}
|
|
38
|
+
.xqcrz7y{align-self:flex-start}
|
|
39
|
+
.xkh2ocl{align-self:stretch}
|
|
40
|
+
.xhw1y8f{background-color:#3584e4}
|
|
41
|
+
.x1jedtje{background-color:#e01b24}
|
|
42
|
+
.x2pwvcl{background-color:#ffffff}
|
|
43
|
+
.x1wvpxmy{background-color:rgba(0, 0, 0, 0.07)}
|
|
44
|
+
.xjbqb8w{background-color:transparent}
|
|
45
|
+
.xdwvxq8{background-color:#ebebeb}
|
|
46
|
+
.x11j0q79{box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
|
|
47
|
+
.xgtzv0a{color:#ffffff}
|
|
48
|
+
.xk7gp71{color:#ffffff}
|
|
49
|
+
.x117bw84{color:rgba(0, 0, 0, 0.8)}
|
|
50
|
+
.xlw9qwm{color:rgba(0, 0, 0, 0.55)}
|
|
51
|
+
.x1h6gzvc{cursor:not-allowed}
|
|
52
|
+
.x1ypdohk{cursor:pointer}
|
|
53
|
+
.x78zum5{display:flex}
|
|
54
|
+
.x1r8uery{flex-basis:0}
|
|
55
|
+
.xdt5ytf{flex-direction:column}
|
|
56
|
+
.x1q0g3np{flex-direction:row}
|
|
57
|
+
.x1iyjqo2{flex-grow:1}
|
|
58
|
+
.x1a02dak{flex-wrap:wrap}
|
|
59
|
+
.x164ifzn{font-family:"Adwaita Sans", "Cantarell", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif}
|
|
60
|
+
.x13gn23q{font-size:12px}
|
|
61
|
+
.xqwltnl{font-size:14px}
|
|
62
|
+
.xif65rj{font-size:14px}
|
|
63
|
+
.x1lbyq2x{font-size:16px}
|
|
64
|
+
.xaajq3h{font-weight:600}
|
|
65
|
+
.xq8utqp{font-weight:700}
|
|
66
|
+
.x1xlr1w8{font-weight:700}
|
|
67
|
+
.xl56j7k{justify-content:center}
|
|
68
|
+
.x13a6bvl{justify-content:flex-end}
|
|
69
|
+
.x1nhvcw1{justify-content:flex-start}
|
|
70
|
+
.x1l1ennw{justify-content:space-around}
|
|
71
|
+
.x1qughib{justify-content:space-between}
|
|
72
|
+
.xaw8158{justify-content:space-evenly}
|
|
73
|
+
.x11807lh{line-height:1.3}
|
|
74
|
+
.x1aebrpu{line-height:1.4}
|
|
75
|
+
.x7zvn91{line-height:1.5}
|
|
76
|
+
.xo5v014{line-height:1}
|
|
77
|
+
.xbyyjgo{opacity:.5}
|
|
78
|
+
.x2b8uid{text-align:center}
|
|
79
|
+
.xcj3dzi{transition-duration:120ms}
|
|
80
|
+
.xts7igz{transition-property:background-color,border-color}
|
|
81
|
+
.x1koyr57{transition-property:background-color,box-shadow,color}
|
|
82
|
+
.xq90yva{transition-property:border-color,background-color}
|
|
83
|
+
.xfrgxy7{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
|
|
84
|
+
.x87ps6o{user-select:none}
|
|
85
|
+
.x12s1yt6:hover{background-color:#4a90e9}
|
|
86
|
+
.xusvk13:hover{background-color:#e8434b}
|
|
87
|
+
.x1b2b8i4:hover{background-color:rgba(0, 0, 0, 0.07)}
|
|
88
|
+
.xvuosku:hover{background-color:rgba(0, 0, 0, 0.12)}
|
|
89
|
+
.xc7rq14:active{background-color:#1a6bb8}
|
|
90
|
+
.x1x0tut:active{background-color:#b81920}
|
|
91
|
+
.x1krbwd3:active{background-color:rgba(0, 0, 0, 0.12)}
|
|
92
|
+
.xtkh9g1:active{background-color:rgba(0, 0, 0, 0.18)}
|
|
93
|
+
}
|
|
94
|
+
@layer priority4{
|
|
95
|
+
.x16l2oou{border-bottom-color:#e01b24}
|
|
96
|
+
.x14ro01c{border-bottom-color:rgba(0, 0, 0, 0.15)}
|
|
97
|
+
.x16stqrj{border-bottom-color:transparent}
|
|
98
|
+
.xfrllxf{border-bottom-left-radius:0}
|
|
99
|
+
.xjppbhk{border-bottom-right-radius:0}
|
|
100
|
+
.x1q0q8m5{border-bottom-style:solid}
|
|
101
|
+
.xso031l{border-bottom-width:1px}
|
|
102
|
+
.xlxy82{border-bottom-width:2px}
|
|
103
|
+
.x2donmn{border-top-left-radius:6px}
|
|
104
|
+
.xngj8x4{border-top-right-radius:6px}
|
|
105
|
+
.xmix8c7{height:18px}
|
|
106
|
+
.x1fgtraw{height:28px}
|
|
107
|
+
.xc9qbxq{height:36px}
|
|
108
|
+
.xn3w4p2{height:44px}
|
|
109
|
+
.xu0aao5{min-height:36px}
|
|
110
|
+
.x3sc9yq{min-height:46px}
|
|
111
|
+
.xeuugli{min-width:0}
|
|
112
|
+
.x1xp8n7a{width:18px}
|
|
113
|
+
.x129yw6v:hover{border-bottom-color:#e01b24}
|
|
114
|
+
.x19pfmzq:hover{border-bottom-color:rgba(0, 0, 0, 0.25)}
|
|
115
|
+
.xj3zwls:focus{border-bottom-color:#3584e4}
|
|
116
|
+
.x1xmy3i3:focus{border-bottom-color:#e01b24}
|
|
117
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import './styles.css';
|
|
2
|
+
import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "../_rsd/runtime.js";
|
|
3
|
+
import { css, html } from '../_rsd/index.js';
|
|
4
|
+
import { palette, motion } from '../tokens.css';
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
/**
|
|
7
|
+
* Adwaita-style toggle switch — pill-shaped track with a sliding thumb.
|
|
8
|
+
* Uses an html.button so it works identically on web and native via
|
|
9
|
+
* react-strict-dom; the inner thumb is positioned absolutely.
|
|
10
|
+
*/
|
|
11
|
+
export function Switch(props) {
|
|
12
|
+
const {
|
|
13
|
+
checked,
|
|
14
|
+
disabled = false,
|
|
15
|
+
onChange,
|
|
16
|
+
label
|
|
17
|
+
} = props;
|
|
18
|
+
const toggle = () => {
|
|
19
|
+
if (!disabled) onChange?.(!checked);
|
|
20
|
+
};
|
|
21
|
+
return /*#__PURE__*/_jsx("button", {
|
|
22
|
+
type: "button",
|
|
23
|
+
role: "switch",
|
|
24
|
+
"aria-checked": checked,
|
|
25
|
+
"aria-label": label,
|
|
26
|
+
disabled: disabled,
|
|
27
|
+
onClick: toggle,
|
|
28
|
+
..._rsdMerge(_rsdDefaultStyles.button, styles.track, checked ? styles.trackOn : styles.trackOff, disabled && styles.disabled),
|
|
29
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
30
|
+
..._rsdMerge(_rsdDefaultStyles.span, styles.thumb, checked ? styles.thumbOn : styles.thumbOff)
|
|
31
|
+
})
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
const TRACK_W = 48;
|
|
35
|
+
const TRACK_H = 28;
|
|
36
|
+
const THUMB = 22;
|
|
37
|
+
const PAD = (TRACK_H - THUMB) / 2;
|
|
38
|
+
const styles = {
|
|
39
|
+
track: {
|
|
40
|
+
kVAEAm: "x1n2onr6",
|
|
41
|
+
kzqmXN: "x1useyqa",
|
|
42
|
+
kZKoxP: "x1fgtraw",
|
|
43
|
+
kaIpWk: "xixl9f9",
|
|
44
|
+
kMzoRj: "xc342km",
|
|
45
|
+
kkrTdU: "x1ypdohk",
|
|
46
|
+
k1ekBW: "x15406qy",
|
|
47
|
+
kIyJzY: "x176dcb3",
|
|
48
|
+
kAMwcw: "xfrgxy7",
|
|
49
|
+
kmVPX3: "x1717udv",
|
|
50
|
+
$$css: true
|
|
51
|
+
},
|
|
52
|
+
trackOff: {
|
|
53
|
+
kWkggS: "x6zc1lr xnh8i4f",
|
|
54
|
+
$$css: true
|
|
55
|
+
},
|
|
56
|
+
trackOn: {
|
|
57
|
+
kWkggS: "xhw1y8f x12s1yt6",
|
|
58
|
+
$$css: true
|
|
59
|
+
},
|
|
60
|
+
thumb: {
|
|
61
|
+
kVAEAm: "x10l6tqk",
|
|
62
|
+
k87sOh: "xxk6nc9",
|
|
63
|
+
kzqmXN: "x17z2i9w",
|
|
64
|
+
kZKoxP: "x17rw0jw",
|
|
65
|
+
kaIpWk: "x1ctf4ec",
|
|
66
|
+
kWkggS: "x1c5tqo3",
|
|
67
|
+
kGVxlE: "xbo08cl",
|
|
68
|
+
k1ekBW: "x1ebn093",
|
|
69
|
+
kIyJzY: "x176dcb3",
|
|
70
|
+
kAMwcw: "xfrgxy7",
|
|
71
|
+
$$css: true
|
|
72
|
+
},
|
|
73
|
+
thumbOff: {
|
|
74
|
+
kbCHJM: "x4mh905",
|
|
75
|
+
$$css: true
|
|
76
|
+
},
|
|
77
|
+
thumbOn: {
|
|
78
|
+
kbCHJM: "x161fk8o",
|
|
79
|
+
$$css: true
|
|
80
|
+
},
|
|
81
|
+
disabled: {
|
|
82
|
+
kSiTet: "xbyyjgo",
|
|
83
|
+
kkrTdU: "x1h6gzvc",
|
|
84
|
+
$$css: true
|
|
85
|
+
}
|
|
86
|
+
};
|