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,134 @@
|
|
|
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
|
+
.x1ctf4ec{border-radius:11px}
|
|
15
|
+
.x3wdnbj{border-radius:12px}
|
|
16
|
+
.xixl9f9{border-radius:14px}
|
|
17
|
+
.xdwrzdg{border-radius:6px}
|
|
18
|
+
.x4gkjtx{border-radius:9999px}
|
|
19
|
+
.xdamf1x{border-radius:9px}
|
|
20
|
+
.x19u8g8r{gap:12px}
|
|
21
|
+
.x1od9ebw{gap:16px}
|
|
22
|
+
.xc9i02s{gap:24px}
|
|
23
|
+
.xy744dg{gap:32px}
|
|
24
|
+
.x1cuygh6{gap:4px}
|
|
25
|
+
.x15hg9oy{gap:8px}
|
|
26
|
+
.xb3r6kr{overflow:hidden}
|
|
27
|
+
.x83n5x6{padding-block:12px}
|
|
28
|
+
.x5f28bg{padding-block:8px}
|
|
29
|
+
.x1of5wme{padding-inline:12px}
|
|
30
|
+
.x1w4cf6q{padding-inline:16px}
|
|
31
|
+
.xoawizh{padding-inline:24px}
|
|
32
|
+
.x1pe04oy:hover{border-color:rgba(0, 0, 0, 0.8)}
|
|
33
|
+
}
|
|
34
|
+
@layer priority3{
|
|
35
|
+
.x1pha0wt{align-items:baseline}
|
|
36
|
+
.x6s0dn4{align-items:center}
|
|
37
|
+
.xuk3077{align-items:flex-end}
|
|
38
|
+
.x1cy8zhl{align-items:flex-start}
|
|
39
|
+
.x1qjc9v5{align-items:stretch}
|
|
40
|
+
.xqcrz7y{align-self:flex-start}
|
|
41
|
+
.xkh2ocl{align-self:stretch}
|
|
42
|
+
.xhw1y8f{background-color:#3584e4}
|
|
43
|
+
.x1jedtje{background-color:#e01b24}
|
|
44
|
+
.xdwvxq8{background-color:#ebebeb}
|
|
45
|
+
.x2pwvcl{background-color:#ffffff}
|
|
46
|
+
.x1c5tqo3{background-color:#ffffff}
|
|
47
|
+
.x1wvpxmy{background-color:rgba(0, 0, 0, 0.07)}
|
|
48
|
+
.xjbqb8w{background-color:transparent}
|
|
49
|
+
.x6zc1lr{background-color:rgba(0, 0, 0, 0.12)}
|
|
50
|
+
.xbo08cl{box-shadow:0 1px 2px rgba(0,0,0,.25)}
|
|
51
|
+
.x11j0q79{box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04)}
|
|
52
|
+
.xgtzv0a{color:#ffffff}
|
|
53
|
+
.xk7gp71{color:#ffffff}
|
|
54
|
+
.xlw9qwm{color:rgba(0, 0, 0, 0.55)}
|
|
55
|
+
.x117bw84{color:rgba(0, 0, 0, 0.8)}
|
|
56
|
+
.x1h6gzvc{cursor:not-allowed}
|
|
57
|
+
.x1ypdohk{cursor:pointer}
|
|
58
|
+
.x78zum5{display:flex}
|
|
59
|
+
.x1r8uery{flex-basis:0}
|
|
60
|
+
.xdt5ytf{flex-direction:column}
|
|
61
|
+
.x1q0g3np{flex-direction:row}
|
|
62
|
+
.x1iyjqo2{flex-grow:1}
|
|
63
|
+
.x1a02dak{flex-wrap:wrap}
|
|
64
|
+
.x164ifzn{font-family:"Adwaita Sans", "Cantarell", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif}
|
|
65
|
+
.x13gn23q{font-size:12px}
|
|
66
|
+
.xqwltnl{font-size:14px}
|
|
67
|
+
.xif65rj{font-size:14px}
|
|
68
|
+
.x1lbyq2x{font-size:16px}
|
|
69
|
+
.xaajq3h{font-weight:600}
|
|
70
|
+
.xq8utqp{font-weight:700}
|
|
71
|
+
.x1xlr1w8{font-weight:700}
|
|
72
|
+
.xl56j7k{justify-content:center}
|
|
73
|
+
.x13a6bvl{justify-content:flex-end}
|
|
74
|
+
.x1nhvcw1{justify-content:flex-start}
|
|
75
|
+
.x1l1ennw{justify-content:space-around}
|
|
76
|
+
.x1qughib{justify-content:space-between}
|
|
77
|
+
.xaw8158{justify-content:space-evenly}
|
|
78
|
+
.x11807lh{line-height:1.3}
|
|
79
|
+
.x1aebrpu{line-height:1.4}
|
|
80
|
+
.x7zvn91{line-height:1.5}
|
|
81
|
+
.xo5v014{line-height:1}
|
|
82
|
+
.xbyyjgo{opacity:.5}
|
|
83
|
+
.x10l6tqk{position:absolute}
|
|
84
|
+
.x1n2onr6{position:relative}
|
|
85
|
+
.x2b8uid{text-align:center}
|
|
86
|
+
.xcj3dzi{transition-duration:120ms}
|
|
87
|
+
.x176dcb3{transition-duration:180ms}
|
|
88
|
+
.xts7igz{transition-property:background-color,border-color}
|
|
89
|
+
.x1koyr57{transition-property:background-color,box-shadow,color}
|
|
90
|
+
.x15406qy{transition-property:background-color}
|
|
91
|
+
.xq90yva{transition-property:border-color,background-color}
|
|
92
|
+
.x1ebn093{transition-property:left,transform}
|
|
93
|
+
.xfrgxy7{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
|
|
94
|
+
.x87ps6o{user-select:none}
|
|
95
|
+
.x12s1yt6:hover{background-color:#4a90e9}
|
|
96
|
+
.xusvk13:hover{background-color:#e8434b}
|
|
97
|
+
.x1b2b8i4:hover{background-color:rgba(0, 0, 0, 0.07)}
|
|
98
|
+
.xvuosku:hover{background-color:rgba(0, 0, 0, 0.12)}
|
|
99
|
+
.xnh8i4f:hover{background-color:rgba(0, 0, 0, 0.18)}
|
|
100
|
+
.xc7rq14:active{background-color:#1a6bb8}
|
|
101
|
+
.x1x0tut:active{background-color:#b81920}
|
|
102
|
+
.x1krbwd3:active{background-color:rgba(0, 0, 0, 0.12)}
|
|
103
|
+
.xtkh9g1:active{background-color:rgba(0, 0, 0, 0.18)}
|
|
104
|
+
}
|
|
105
|
+
@layer priority4{
|
|
106
|
+
.x16l2oou{border-bottom-color:#e01b24}
|
|
107
|
+
.x14ro01c{border-bottom-color:rgba(0, 0, 0, 0.15)}
|
|
108
|
+
.x16stqrj{border-bottom-color:transparent}
|
|
109
|
+
.xfrllxf{border-bottom-left-radius:0}
|
|
110
|
+
.xjppbhk{border-bottom-right-radius:0}
|
|
111
|
+
.x1q0q8m5{border-bottom-style:solid}
|
|
112
|
+
.xso031l{border-bottom-width:1px}
|
|
113
|
+
.xlxy82{border-bottom-width:2px}
|
|
114
|
+
.x2donmn{border-top-left-radius:6px}
|
|
115
|
+
.xngj8x4{border-top-right-radius:6px}
|
|
116
|
+
.xmix8c7{height:18px}
|
|
117
|
+
.x17rw0jw{height:22px}
|
|
118
|
+
.x1fgtraw{height:28px}
|
|
119
|
+
.xc9qbxq{height:36px}
|
|
120
|
+
.xn3w4p2{height:44px}
|
|
121
|
+
.x161fk8o{left:23px}
|
|
122
|
+
.x4mh905{left:3px}
|
|
123
|
+
.xu0aao5{min-height:36px}
|
|
124
|
+
.x3sc9yq{min-height:46px}
|
|
125
|
+
.xeuugli{min-width:0}
|
|
126
|
+
.xxk6nc9{top:3px}
|
|
127
|
+
.x1xp8n7a{width:18px}
|
|
128
|
+
.x17z2i9w{width:22px}
|
|
129
|
+
.x1useyqa{width:48px}
|
|
130
|
+
.x129yw6v:hover{border-bottom-color:#e01b24}
|
|
131
|
+
.x19pfmzq:hover{border-bottom-color:rgba(0, 0, 0, 0.25)}
|
|
132
|
+
.xj3zwls:focus{border-bottom-color:#3584e4}
|
|
133
|
+
.x1xmy3i3:focus{border-bottom-color:#e01b24}
|
|
134
|
+
}
|
|
@@ -0,0 +1,484 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license react-strict-dom
|
|
3
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the MIT license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
'use strict';
|
|
10
|
+
|
|
11
|
+
import { jsx } from 'react/jsx-runtime';
|
|
12
|
+
import * as stylex from '@stylexjs/stylex';
|
|
13
|
+
export { stylex as css };
|
|
14
|
+
const loggedMessages = {};
|
|
15
|
+
function errorMsg(msg) {
|
|
16
|
+
if (process.env.NODE_ENV !== 'test' && loggedMessages[msg]) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
loggedMessages[msg] = true;
|
|
20
|
+
console.error(`[error] React Strict DOM: ${msg}`);
|
|
21
|
+
}
|
|
22
|
+
const strictAttributeSet = new Set(['alt', 'aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex', 'aria-colindextext', 'aria-colspan', 'aria-controls', 'aria-current', 'aria-describedby', 'aria-details', 'aria-disabled', 'aria-errormessage', 'aria-expanded', 'aria-flowto', 'aria-haspopup', 'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live', 'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation', 'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowindextext', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext', 'autoCapitalize', 'autoComplete', 'autoFocus', 'checked', 'children', 'crossOrigin', 'decoding', 'defaultChecked', 'defaultValue', 'dir', 'disabled', 'download', 'draggable', 'elementTiming', 'enterKeyHint', 'fetchPriority', 'for', 'height', 'hidden', 'href', 'id', 'inert', 'inputMode', 'label', 'lang', 'loading', 'max', 'maxLength', 'min', 'minLength', 'multiple', 'name', 'onAuxClick', 'onBeforeInput', 'onBlur', 'onChange', 'onClick', 'onContextMenu', 'onCopy', 'onCut', 'onError', 'onFocus', 'onFocusIn', 'onFocusOut', 'onFullscreenChange', 'onFullscreenError', 'onGotPointerCapture', 'onInput', 'onInvalid', 'onKeyDown', 'onKeyUp', 'onLoad', 'onLostPointerCapture', 'onPaste', 'onPointerCancel', 'onPointerDown', 'onPointerEnter', 'onPointerLeave', 'onPointerMove', 'onPointerOut', 'onPointerOver', 'onPointerUp', 'onScroll', 'onSelect', 'onSelectionChange', 'onWheel', 'placeholder', 'readOnly', 'referrerPolicy', 'rel', 'required', 'role', 'rows', 'selected', 'spellCheck', 'src', 'srcSet', 'step', 'style', 'tabIndex', 'target', 'type', 'value', 'width', 'suppressHydrationWarning', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart']);
|
|
23
|
+
function isPropAllowed(key) {
|
|
24
|
+
return strictAttributeSet.has(key) || key.indexOf('data-') > -1;
|
|
25
|
+
}
|
|
26
|
+
var styleq$1 = {};
|
|
27
|
+
Object.defineProperty(styleq$1, "__esModule", {
|
|
28
|
+
value: true
|
|
29
|
+
});
|
|
30
|
+
var styleq_2 = styleq$1.styleq = void 0;
|
|
31
|
+
var cache = new WeakMap();
|
|
32
|
+
var compiledKey = '$$css';
|
|
33
|
+
function createStyleq(options) {
|
|
34
|
+
var disableCache;
|
|
35
|
+
var disableMix;
|
|
36
|
+
var transform;
|
|
37
|
+
if (options != null) {
|
|
38
|
+
disableCache = options.disableCache === true;
|
|
39
|
+
disableMix = options.disableMix === true;
|
|
40
|
+
transform = options.transform;
|
|
41
|
+
}
|
|
42
|
+
return function styleq() {
|
|
43
|
+
var definedProperties = [];
|
|
44
|
+
var className = '';
|
|
45
|
+
var inlineStyle = null;
|
|
46
|
+
var debugString = '';
|
|
47
|
+
var nextCache = disableCache ? null : cache;
|
|
48
|
+
var styles = new Array(arguments.length);
|
|
49
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
50
|
+
styles[i] = arguments[i];
|
|
51
|
+
}
|
|
52
|
+
while (styles.length > 0) {
|
|
53
|
+
var possibleStyle = styles.pop();
|
|
54
|
+
if (possibleStyle == null || possibleStyle === false) {
|
|
55
|
+
continue;
|
|
56
|
+
}
|
|
57
|
+
if (Array.isArray(possibleStyle)) {
|
|
58
|
+
for (var _i = 0; _i < possibleStyle.length; _i++) {
|
|
59
|
+
styles.push(possibleStyle[_i]);
|
|
60
|
+
}
|
|
61
|
+
continue;
|
|
62
|
+
}
|
|
63
|
+
var style = transform != null ? transform(possibleStyle) : possibleStyle;
|
|
64
|
+
if (style.$$css != null) {
|
|
65
|
+
var classNameChunk = '';
|
|
66
|
+
if (nextCache != null && nextCache.has(style)) {
|
|
67
|
+
var cacheEntry = nextCache.get(style);
|
|
68
|
+
if (cacheEntry != null) {
|
|
69
|
+
classNameChunk = cacheEntry[0];
|
|
70
|
+
debugString = cacheEntry[2];
|
|
71
|
+
definedProperties.push.apply(definedProperties, cacheEntry[1]);
|
|
72
|
+
nextCache = cacheEntry[3];
|
|
73
|
+
}
|
|
74
|
+
} else {
|
|
75
|
+
var definedPropertiesChunk = [];
|
|
76
|
+
for (var prop in style) {
|
|
77
|
+
var value = style[prop];
|
|
78
|
+
if (prop === compiledKey) {
|
|
79
|
+
var compiledKeyValue = style[prop];
|
|
80
|
+
if (compiledKeyValue !== true) {
|
|
81
|
+
debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
|
|
82
|
+
}
|
|
83
|
+
continue;
|
|
84
|
+
}
|
|
85
|
+
if (typeof value === 'string' || value === null) {
|
|
86
|
+
if (!definedProperties.includes(prop)) {
|
|
87
|
+
definedProperties.push(prop);
|
|
88
|
+
if (nextCache != null) {
|
|
89
|
+
definedPropertiesChunk.push(prop);
|
|
90
|
+
}
|
|
91
|
+
if (typeof value === 'string') {
|
|
92
|
+
classNameChunk += classNameChunk ? ' ' + value : value;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
} else {
|
|
96
|
+
console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
if (nextCache != null) {
|
|
100
|
+
var weakMap = new WeakMap();
|
|
101
|
+
nextCache.set(style, [classNameChunk, definedPropertiesChunk, debugString, weakMap]);
|
|
102
|
+
nextCache = weakMap;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
if (classNameChunk) {
|
|
106
|
+
className = className ? classNameChunk + ' ' + className : classNameChunk;
|
|
107
|
+
}
|
|
108
|
+
} else {
|
|
109
|
+
if (disableMix) {
|
|
110
|
+
if (inlineStyle == null) {
|
|
111
|
+
inlineStyle = {};
|
|
112
|
+
}
|
|
113
|
+
inlineStyle = Object.assign({}, style, inlineStyle);
|
|
114
|
+
} else {
|
|
115
|
+
var subStyle = null;
|
|
116
|
+
for (var _prop in style) {
|
|
117
|
+
var _value = style[_prop];
|
|
118
|
+
if (_value !== undefined) {
|
|
119
|
+
if (!definedProperties.includes(_prop)) {
|
|
120
|
+
if (_value != null) {
|
|
121
|
+
if (inlineStyle == null) {
|
|
122
|
+
inlineStyle = {};
|
|
123
|
+
}
|
|
124
|
+
if (subStyle == null) {
|
|
125
|
+
subStyle = {};
|
|
126
|
+
}
|
|
127
|
+
subStyle[_prop] = _value;
|
|
128
|
+
}
|
|
129
|
+
definedProperties.push(_prop);
|
|
130
|
+
nextCache = null;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
if (subStyle != null) {
|
|
135
|
+
inlineStyle = Object.assign(subStyle, inlineStyle);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
var styleProps = [className, inlineStyle, debugString];
|
|
141
|
+
return styleProps;
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
var styleq = styleq_2 = styleq$1.styleq = createStyleq();
|
|
145
|
+
styleq.factory = createStyleq;
|
|
146
|
+
const optimizedStyleq = styleq_2.factory({
|
|
147
|
+
disableMix: true
|
|
148
|
+
});
|
|
149
|
+
function merge(...styles) {
|
|
150
|
+
const [className, style, dataStyleSrc] = optimizedStyleq(styles);
|
|
151
|
+
const result = {};
|
|
152
|
+
if (className != null && className !== '') {
|
|
153
|
+
result.className = className;
|
|
154
|
+
}
|
|
155
|
+
if (style != null) {
|
|
156
|
+
result.style = style;
|
|
157
|
+
}
|
|
158
|
+
if (dataStyleSrc != null && dataStyleSrc !== '') {
|
|
159
|
+
const chunks = dataStyleSrc.split(';');
|
|
160
|
+
const pathsMap = {};
|
|
161
|
+
for (const chunk of chunks) {
|
|
162
|
+
const trimmed = chunk.trim();
|
|
163
|
+
const [path, line] = trimmed.split(':');
|
|
164
|
+
if (line != null) {
|
|
165
|
+
pathsMap[path] = pathsMap[path] != null ? `${pathsMap[path]},${line}` : line;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
result['data-style-src'] = Object.keys(pathsMap).map(path => `${path}:${pathsMap[path]}`).join('; ');
|
|
169
|
+
}
|
|
170
|
+
return result;
|
|
171
|
+
}
|
|
172
|
+
function validateStrictProps(props) {
|
|
173
|
+
Object.keys(props).forEach(key => {
|
|
174
|
+
const isValid = isPropAllowed(key);
|
|
175
|
+
if (!isValid) {
|
|
176
|
+
errorMsg(`invalid prop "${key}"`);
|
|
177
|
+
delete props[key];
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
function createStrictDOMComponent(TagName, defaultStyle) {
|
|
182
|
+
const debugStyle = {
|
|
183
|
+
$$css: true,
|
|
184
|
+
'debug::name': `html-${TagName}`
|
|
185
|
+
};
|
|
186
|
+
function Component({
|
|
187
|
+
ref,
|
|
188
|
+
...props
|
|
189
|
+
}) {
|
|
190
|
+
const {
|
|
191
|
+
for: htmlFor,
|
|
192
|
+
style,
|
|
193
|
+
...restProps
|
|
194
|
+
} = props;
|
|
195
|
+
const hostProps = restProps;
|
|
196
|
+
validateStrictProps(hostProps);
|
|
197
|
+
if (htmlFor != null) {
|
|
198
|
+
hostProps.htmlFor = htmlFor;
|
|
199
|
+
}
|
|
200
|
+
if (props.role != null) {
|
|
201
|
+
hostProps.role = props.role === 'none' ? 'presentation' : props.role;
|
|
202
|
+
}
|
|
203
|
+
if (TagName === 'button') {
|
|
204
|
+
hostProps.type = hostProps.type ? hostProps.type : 'button';
|
|
205
|
+
} else if (TagName === 'input' || TagName === 'textarea') {
|
|
206
|
+
hostProps.dir = hostProps.dir ? hostProps.dir : 'auto';
|
|
207
|
+
}
|
|
208
|
+
const hostStyleProps = merge([debugStyle, defaultStyle, style]);
|
|
209
|
+
const element = jsx(TagName, {
|
|
210
|
+
...hostProps,
|
|
211
|
+
...hostStyleProps,
|
|
212
|
+
ref: ref
|
|
213
|
+
});
|
|
214
|
+
return element;
|
|
215
|
+
}
|
|
216
|
+
Component.displayName = `html.${TagName}`;
|
|
217
|
+
return Component;
|
|
218
|
+
}
|
|
219
|
+
const styles = {
|
|
220
|
+
block: {
|
|
221
|
+
kogj98: "x1ghz6dp",
|
|
222
|
+
kmVPX3: "x1717udv",
|
|
223
|
+
$$css: true
|
|
224
|
+
},
|
|
225
|
+
inline: {
|
|
226
|
+
kogj98: "x1ghz6dp",
|
|
227
|
+
kmVPX3: "x1717udv",
|
|
228
|
+
kybGjl: "x1hl2dhg",
|
|
229
|
+
k9WMMc: "x16tdsg8",
|
|
230
|
+
kD5eJx: "x1vvkbs",
|
|
231
|
+
$$css: true
|
|
232
|
+
},
|
|
233
|
+
inlineblock: {
|
|
234
|
+
ksu8eU: "x1y0btm7",
|
|
235
|
+
kogj98: "x1ghz6dp",
|
|
236
|
+
kmVPX3: "x1717udv",
|
|
237
|
+
$$css: true
|
|
238
|
+
},
|
|
239
|
+
button: {
|
|
240
|
+
kMzoRj: "xmkeg23",
|
|
241
|
+
$$css: true
|
|
242
|
+
},
|
|
243
|
+
codePre: {
|
|
244
|
+
kMv6JI: "x1lxnp44",
|
|
245
|
+
kGuDYH: "xrv4cvt",
|
|
246
|
+
kVQacm: "xysyzu8",
|
|
247
|
+
$$css: true
|
|
248
|
+
},
|
|
249
|
+
heading: {
|
|
250
|
+
kGuDYH: "xngnso2",
|
|
251
|
+
kD5eJx: "x1vvkbs",
|
|
252
|
+
$$css: true
|
|
253
|
+
},
|
|
254
|
+
hr: {
|
|
255
|
+
kWkggS: "x42x0ya",
|
|
256
|
+
ksu8eU: "xng3xce",
|
|
257
|
+
kMzoRj: "xc342km",
|
|
258
|
+
kB7OPa: "x9f619",
|
|
259
|
+
kZKoxP: "xjm9jq1",
|
|
260
|
+
$$css: true
|
|
261
|
+
},
|
|
262
|
+
img: {
|
|
263
|
+
kOBAk4: "xuw900x",
|
|
264
|
+
kZKoxP: "xt7dq6l",
|
|
265
|
+
ks0D6T: "x193iq5w",
|
|
266
|
+
$$css: true
|
|
267
|
+
},
|
|
268
|
+
input: {
|
|
269
|
+
kMzoRj: "xmkeg23",
|
|
270
|
+
ksu8eU: "x1y0btm7",
|
|
271
|
+
$$css: true
|
|
272
|
+
},
|
|
273
|
+
list: {
|
|
274
|
+
kB88ic: "xe8uvvx",
|
|
275
|
+
$$css: true
|
|
276
|
+
},
|
|
277
|
+
strong: {
|
|
278
|
+
k63SB2: "x117nqv4",
|
|
279
|
+
$$css: true
|
|
280
|
+
},
|
|
281
|
+
textarea: {
|
|
282
|
+
kMzoRj: "xmkeg23",
|
|
283
|
+
ksu8eU: "x1y0btm7",
|
|
284
|
+
kHenm0: "x288g5",
|
|
285
|
+
$$css: true
|
|
286
|
+
}
|
|
287
|
+
};
|
|
288
|
+
const a$1 = styles.inline;
|
|
289
|
+
const article$1 = styles.block;
|
|
290
|
+
const aside$1 = styles.block;
|
|
291
|
+
const b$1 = styles.inline;
|
|
292
|
+
const bdi$1 = styles.inline;
|
|
293
|
+
const bdo$1 = styles.inline;
|
|
294
|
+
const blockquote$1 = styles.block;
|
|
295
|
+
const br$1 = null;
|
|
296
|
+
const button$1 = [styles.inlineblock, styles.button];
|
|
297
|
+
const code$1 = [styles.inline, styles.codePre];
|
|
298
|
+
const del$1 = null;
|
|
299
|
+
const div$1 = styles.block;
|
|
300
|
+
const em$1 = styles.inline;
|
|
301
|
+
const fieldset$1 = styles.block;
|
|
302
|
+
const footer$1 = styles.block;
|
|
303
|
+
const form$1 = styles.block;
|
|
304
|
+
const heading = [styles.block, styles.heading];
|
|
305
|
+
const header$1 = styles.block;
|
|
306
|
+
const hr$1 = [styles.block, styles.hr];
|
|
307
|
+
const i$1 = styles.inline;
|
|
308
|
+
const img$1 = styles.img;
|
|
309
|
+
const input$1 = [styles.inlineblock, styles.input];
|
|
310
|
+
const ins$1 = null;
|
|
311
|
+
const kbd$1 = null;
|
|
312
|
+
const label$1 = styles.inline;
|
|
313
|
+
const li$1 = styles.block;
|
|
314
|
+
const main$1 = styles.block;
|
|
315
|
+
const mark$1 = styles.inline;
|
|
316
|
+
const nav$1 = styles.block;
|
|
317
|
+
const ol$1 = [styles.list, styles.block];
|
|
318
|
+
const optgroup$1 = null;
|
|
319
|
+
const option$1 = null;
|
|
320
|
+
const p$1 = styles.block;
|
|
321
|
+
const pre$1 = [styles.block, styles.codePre];
|
|
322
|
+
const s$1 = null;
|
|
323
|
+
const section$1 = styles.block;
|
|
324
|
+
const select$1 = styles.inlineblock;
|
|
325
|
+
const span$1 = styles.inline;
|
|
326
|
+
const strong$1 = [styles.inline, styles.strong];
|
|
327
|
+
const sub$1 = styles.inline;
|
|
328
|
+
const sup$1 = styles.inline;
|
|
329
|
+
const textarea$1 = [styles.inlineblock, styles.textarea];
|
|
330
|
+
const u$1 = null;
|
|
331
|
+
const ul$1 = [styles.list, styles.block];
|
|
332
|
+
const defaultStyles = {
|
|
333
|
+
a: a$1,
|
|
334
|
+
article: article$1,
|
|
335
|
+
aside: aside$1,
|
|
336
|
+
b: b$1,
|
|
337
|
+
bdi: bdi$1,
|
|
338
|
+
bdo: bdo$1,
|
|
339
|
+
blockquote: blockquote$1,
|
|
340
|
+
br: br$1,
|
|
341
|
+
button: button$1,
|
|
342
|
+
code: code$1,
|
|
343
|
+
del: del$1,
|
|
344
|
+
div: div$1,
|
|
345
|
+
em: em$1,
|
|
346
|
+
fieldset: fieldset$1,
|
|
347
|
+
footer: footer$1,
|
|
348
|
+
form: form$1,
|
|
349
|
+
h1: heading,
|
|
350
|
+
h2: heading,
|
|
351
|
+
h3: heading,
|
|
352
|
+
h4: heading,
|
|
353
|
+
h5: heading,
|
|
354
|
+
h6: heading,
|
|
355
|
+
header: header$1,
|
|
356
|
+
hr: hr$1,
|
|
357
|
+
i: i$1,
|
|
358
|
+
img: img$1,
|
|
359
|
+
input: input$1,
|
|
360
|
+
ins: ins$1,
|
|
361
|
+
kbd: kbd$1,
|
|
362
|
+
label: label$1,
|
|
363
|
+
li: li$1,
|
|
364
|
+
main: main$1,
|
|
365
|
+
mark: mark$1,
|
|
366
|
+
nav: nav$1,
|
|
367
|
+
ol: ol$1,
|
|
368
|
+
optgroup: optgroup$1,
|
|
369
|
+
option: option$1,
|
|
370
|
+
p: p$1,
|
|
371
|
+
pre: pre$1,
|
|
372
|
+
s: s$1,
|
|
373
|
+
section: section$1,
|
|
374
|
+
select: select$1,
|
|
375
|
+
span: span$1,
|
|
376
|
+
strong: strong$1,
|
|
377
|
+
sub: sub$1,
|
|
378
|
+
sup: sup$1,
|
|
379
|
+
textarea: textarea$1,
|
|
380
|
+
u: u$1,
|
|
381
|
+
ul: ul$1
|
|
382
|
+
};
|
|
383
|
+
const a = createStrictDOMComponent('a', defaultStyles.a);
|
|
384
|
+
const article = createStrictDOMComponent('article', defaultStyles.article);
|
|
385
|
+
const aside = createStrictDOMComponent('aside', defaultStyles.aside);
|
|
386
|
+
const b = createStrictDOMComponent('b', defaultStyles.b);
|
|
387
|
+
const bdi = createStrictDOMComponent('bdi', defaultStyles.bdi);
|
|
388
|
+
const bdo = createStrictDOMComponent('bdo', defaultStyles.bdo);
|
|
389
|
+
const blockquote = createStrictDOMComponent('blockquote', defaultStyles.blockquote);
|
|
390
|
+
const br = createStrictDOMComponent('br', defaultStyles.br);
|
|
391
|
+
const button = createStrictDOMComponent('button', defaultStyles.button);
|
|
392
|
+
const code = createStrictDOMComponent('code', defaultStyles.code);
|
|
393
|
+
const del = createStrictDOMComponent('del', defaultStyles.del);
|
|
394
|
+
const div = createStrictDOMComponent('div', defaultStyles.div);
|
|
395
|
+
const em = createStrictDOMComponent('em', defaultStyles.em);
|
|
396
|
+
const fieldset = createStrictDOMComponent('fieldset', defaultStyles.fieldset);
|
|
397
|
+
const footer = createStrictDOMComponent('footer', defaultStyles.footer);
|
|
398
|
+
const form = createStrictDOMComponent('form', defaultStyles.form);
|
|
399
|
+
const h1 = createStrictDOMComponent('h1', defaultStyles.h1);
|
|
400
|
+
const h2 = createStrictDOMComponent('h2', defaultStyles.h2);
|
|
401
|
+
const h3 = createStrictDOMComponent('h3', defaultStyles.h3);
|
|
402
|
+
const h4 = createStrictDOMComponent('h4', defaultStyles.h4);
|
|
403
|
+
const h5 = createStrictDOMComponent('h5', defaultStyles.h5);
|
|
404
|
+
const h6 = createStrictDOMComponent('h6', defaultStyles.h6);
|
|
405
|
+
const header = createStrictDOMComponent('header', defaultStyles.header);
|
|
406
|
+
const hr = createStrictDOMComponent('hr', defaultStyles.hr);
|
|
407
|
+
const i = createStrictDOMComponent('i', defaultStyles.i);
|
|
408
|
+
const img = createStrictDOMComponent('img', defaultStyles.img);
|
|
409
|
+
const input = createStrictDOMComponent('input', defaultStyles.input);
|
|
410
|
+
const ins = createStrictDOMComponent('ins', defaultStyles.ins);
|
|
411
|
+
const kbd = createStrictDOMComponent('kbd', defaultStyles.kbd);
|
|
412
|
+
const label = createStrictDOMComponent('label', defaultStyles.label);
|
|
413
|
+
const li = createStrictDOMComponent('li', defaultStyles.li);
|
|
414
|
+
const main = createStrictDOMComponent('main', defaultStyles.main);
|
|
415
|
+
const mark = createStrictDOMComponent('mark', defaultStyles.mark);
|
|
416
|
+
const nav = createStrictDOMComponent('nav', defaultStyles.nav);
|
|
417
|
+
const ol = createStrictDOMComponent('ol', defaultStyles.ol);
|
|
418
|
+
const optgroup = createStrictDOMComponent('optgroup', defaultStyles.optgroup);
|
|
419
|
+
const option = createStrictDOMComponent('option', defaultStyles.option);
|
|
420
|
+
const p = createStrictDOMComponent('p', defaultStyles.p);
|
|
421
|
+
const pre = createStrictDOMComponent('pre', defaultStyles.pre);
|
|
422
|
+
const s = createStrictDOMComponent('s', defaultStyles.s);
|
|
423
|
+
const section = createStrictDOMComponent('section', defaultStyles.section);
|
|
424
|
+
const select = createStrictDOMComponent('select', defaultStyles.select);
|
|
425
|
+
const span = createStrictDOMComponent('span', defaultStyles.span);
|
|
426
|
+
const strong = createStrictDOMComponent('strong', defaultStyles.strong);
|
|
427
|
+
const sub = createStrictDOMComponent('sub', defaultStyles.sub);
|
|
428
|
+
const sup = createStrictDOMComponent('sup', defaultStyles.sup);
|
|
429
|
+
const textarea = createStrictDOMComponent('textarea', defaultStyles.textarea);
|
|
430
|
+
const u = createStrictDOMComponent('u', defaultStyles.u);
|
|
431
|
+
const ul = createStrictDOMComponent('ul', defaultStyles.ul);
|
|
432
|
+
var html = /*#__PURE__*/Object.freeze({
|
|
433
|
+
__proto__: null,
|
|
434
|
+
a: a,
|
|
435
|
+
article: article,
|
|
436
|
+
aside: aside,
|
|
437
|
+
b: b,
|
|
438
|
+
bdi: bdi,
|
|
439
|
+
bdo: bdo,
|
|
440
|
+
blockquote: blockquote,
|
|
441
|
+
br: br,
|
|
442
|
+
button: button,
|
|
443
|
+
code: code,
|
|
444
|
+
del: del,
|
|
445
|
+
div: div,
|
|
446
|
+
em: em,
|
|
447
|
+
fieldset: fieldset,
|
|
448
|
+
footer: footer,
|
|
449
|
+
form: form,
|
|
450
|
+
h1: h1,
|
|
451
|
+
h2: h2,
|
|
452
|
+
h3: h3,
|
|
453
|
+
h4: h4,
|
|
454
|
+
h5: h5,
|
|
455
|
+
h6: h6,
|
|
456
|
+
header: header,
|
|
457
|
+
hr: hr,
|
|
458
|
+
i: i,
|
|
459
|
+
img: img,
|
|
460
|
+
input: input,
|
|
461
|
+
ins: ins,
|
|
462
|
+
kbd: kbd,
|
|
463
|
+
label: label,
|
|
464
|
+
li: li,
|
|
465
|
+
main: main,
|
|
466
|
+
mark: mark,
|
|
467
|
+
nav: nav,
|
|
468
|
+
ol: ol,
|
|
469
|
+
optgroup: optgroup,
|
|
470
|
+
option: option,
|
|
471
|
+
p: p,
|
|
472
|
+
pre: pre,
|
|
473
|
+
s: s,
|
|
474
|
+
section: section,
|
|
475
|
+
select: select,
|
|
476
|
+
span: span,
|
|
477
|
+
strong: strong,
|
|
478
|
+
sub: sub,
|
|
479
|
+
sup: sup,
|
|
480
|
+
textarea: textarea,
|
|
481
|
+
u: u,
|
|
482
|
+
ul: ul
|
|
483
|
+
});
|
|
484
|
+
export { html };
|