@slimr/styled 2.1.79 → 2.1.83
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/cjs/core.d.ts +4 -4
- package/cjs/core.js +11 -11
- package/cjs/core.js.map +1 -1
- package/cjs/core.ts +132 -130
- package/cjs/index.d.ts +4 -4
- package/cjs/index.ts +4 -4
- package/cjs/primitives.js.map +1 -1
- package/cjs/primitives.ts +1 -1
- package/cjs/styled.d.ts +1 -1
- package/cjs/styled.js +90 -90
- package/cjs/styled.js.map +1 -1
- package/cjs/styled.ts +187 -187
- package/esm/core.d.ts +4 -4
- package/esm/core.js +14 -14
- package/esm/core.js.map +1 -1
- package/esm/core.ts +132 -130
- package/esm/index.d.ts +4 -4
- package/esm/index.js +4 -4
- package/esm/index.ts +4 -4
- package/esm/primitives.js +1 -1
- package/esm/primitives.js.map +1 -1
- package/esm/primitives.ts +1 -1
- package/esm/styled.d.ts +1 -1
- package/esm/styled.js +91 -91
- package/esm/styled.js.map +1 -1
- package/esm/styled.ts +187 -187
- package/package.json +3 -3
- package/src/core.ts +132 -130
- package/src/index.ts +4 -4
- package/src/primitives.ts +1 -1
- package/src/styled.ts +187 -187
- package/tsconfig.json +2 -2
package/cjs/styled.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {T2SProps} from
|
|
2
|
-
import {FC, JSX} from
|
|
1
|
+
import type { T2SProps } from "@slimr/util"
|
|
2
|
+
import type { FC, JSX } from "react"
|
|
3
3
|
|
|
4
|
-
import {styledBase as s} from
|
|
4
|
+
import { styledBase as s } from "./core.js"
|
|
5
5
|
|
|
6
6
|
/** Shorthand type */
|
|
7
7
|
type unk = unknown
|
|
@@ -33,188 +33,188 @@ type HTP = JSX.IntrinsicElements
|
|
|
33
33
|
* `
|
|
34
34
|
*/
|
|
35
35
|
export const styled = Object.assign(s, {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
36
|
+
/** creates a 'a' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
37
|
+
a: (...p: TSP) => s("a" as unk as FC<HTP["a"]>)(...p),
|
|
38
|
+
/** creates a 'abbr' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
39
|
+
abbr: (...p: TSP) => s("abbr" as unk as FC<HTP["abbr"]>)(...p),
|
|
40
|
+
/** creates a 'address' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
41
|
+
address: (...p: TSP) => s("address" as unk as FC<HTP["address"]>)(...p),
|
|
42
|
+
/** creates a 'area' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
43
|
+
area: (...p: TSP) => s("area" as unk as FC<HTP["area"]>)(...p),
|
|
44
|
+
/** creates a 'article' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
45
|
+
article: (...p: TSP) => s("article" as unk as FC<HTP["article"]>)(...p),
|
|
46
|
+
/** creates a 'aside' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
47
|
+
aside: (...p: TSP) => s("aside" as unk as FC<HTP["aside"]>)(...p),
|
|
48
|
+
/** creates a 'audio' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
49
|
+
audio: (...p: TSP) => s("audio" as unk as FC<HTP["audio"]>)(...p),
|
|
50
|
+
/** creates a 'b' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
51
|
+
b: (...p: TSP) => s("b" as unk as FC<HTP["b"]>)(...p),
|
|
52
|
+
/** creates a 'big' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info.; Deprecated so left out */
|
|
53
|
+
// big: (...p: TSP) => styled('big' as unk as FC<HTP['big']>)(...p),
|
|
54
|
+
/** creates a 'blockquote' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
55
|
+
blockquote: (...p: TSP) => s("blockquote" as unk as FC<HTP["blockquote"]>)(...p),
|
|
56
|
+
/** creates a 'body' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info.; omitted bc doesnt seem useful */
|
|
57
|
+
// body: (...p: TSP) => styled('body' as unk as FC<HTP['body']>)(...p),
|
|
58
|
+
/** creates a 'br' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info.; omitted bc doesnt seem useful */
|
|
59
|
+
br: (...p: TSP) => s("br" as unk as FC<HTP["br"]>)(...p),
|
|
60
|
+
/** creates a 'button' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
61
|
+
button: (...p: TSP) => s("button" as unk as FC<HTP["button"]>)(...p),
|
|
62
|
+
/** creates a 'caption' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
63
|
+
caption: (...p: TSP) => s("caption" as unk as FC<HTP["caption"]>)(...p),
|
|
64
|
+
/** creates a 'cite' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
65
|
+
cite: (...p: TSP) => s("cite" as unk as FC<HTP["cite"]>)(...p),
|
|
66
|
+
/** creates a 'code' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
67
|
+
code: (...p: TSP) => s("code" as unk as FC<HTP["code"]>)(...p),
|
|
68
|
+
/** creates a 'col' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
69
|
+
col: (...p: TSP) => s("col" as unk as FC<HTP["col"]>)(...p),
|
|
70
|
+
/** creates a 'colgroup' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
71
|
+
colgroup: (...p: TSP) => s("colgroup" as unk as FC<HTP["colgroup"]>)(...p),
|
|
72
|
+
/** creates a 'dd' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
73
|
+
dd: (...p: TSP) => s("dd" as unk as FC<HTP["dd"]>)(...p),
|
|
74
|
+
/** creates a 'del' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
75
|
+
del: (...p: TSP) => s("del" as unk as FC<HTP["del"]>)(...p),
|
|
76
|
+
/** creates a 'details' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
77
|
+
details: (...p: TSP) => s("details" as unk as FC<HTP["details"]>)(...p),
|
|
78
|
+
/** creates a 'dfn' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
79
|
+
dfn: (...p: TSP) => s("dfn" as unk as FC<HTP["dfn"]>)(...p),
|
|
80
|
+
/** creates a 'dialog' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
81
|
+
dialog: (...p: TSP) => s("dialog" as unk as FC<HTP["dialog"]>)(...p),
|
|
82
|
+
/** creates a 'div' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
83
|
+
div: (...p: TSP) => s("div" as unk as FC<HTP["div"]>)(...p),
|
|
84
|
+
/** creates a 'dl' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
85
|
+
dl: (...p: TSP) => s("dl" as unk as FC<HTP["dl"]>)(...p),
|
|
86
|
+
/** creates a 'dt' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
87
|
+
dt: (...p: TSP) => s("dt" as unk as FC<HTP["dt"]>)(...p),
|
|
88
|
+
/** creates a 'em' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
89
|
+
em: (...p: TSP) => s("em" as unk as FC<HTP["em"]>)(...p),
|
|
90
|
+
/** creates a 'embed' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
91
|
+
embed: (...p: TSP) => s("embed" as unk as FC<HTP["embed"]>)(...p),
|
|
92
|
+
/** creates a 'fieldset' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
93
|
+
fieldset: (...p: TSP) => s("fieldset" as unk as FC<HTP["fieldset"]>)(...p),
|
|
94
|
+
/** creates a 'figcaption' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
95
|
+
figcaption: (...p: TSP) => s("figcaption" as unk as FC<HTP["figcaption"]>)(...p),
|
|
96
|
+
/** creates a 'figure' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
97
|
+
figure: (...p: TSP) => s("figure" as unk as FC<HTP["figure"]>)(...p),
|
|
98
|
+
/** creates a 'footer' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
99
|
+
footer: (...p: TSP) => s("footer" as unk as FC<HTP["footer"]>)(...p),
|
|
100
|
+
/** creates a 'form' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
101
|
+
form: (...p: TSP) => s("form" as unk as FC<HTP["form"]>)(...p),
|
|
102
|
+
/** creates a 'h1' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
103
|
+
h1: (...p: TSP) => s("h1" as unk as FC<HTP["h1"]>)(...p),
|
|
104
|
+
/** creates a 'h2' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
105
|
+
h2: (...p: TSP) => s("h2" as unk as FC<HTP["h2"]>)(...p),
|
|
106
|
+
/** creates a 'h3' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
107
|
+
h3: (...p: TSP) => s("h3" as unk as FC<HTP["h3"]>)(...p),
|
|
108
|
+
/** creates a 'h4' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
109
|
+
h4: (...p: TSP) => s("h4" as unk as FC<HTP["h4"]>)(...p),
|
|
110
|
+
/** creates a 'h5' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
111
|
+
h5: (...p: TSP) => s("h5" as unk as FC<HTP["h5"]>)(...p),
|
|
112
|
+
/** creates a 'h6' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
113
|
+
h6: (...p: TSP) => s("h6" as unk as FC<HTP["h6"]>)(...p),
|
|
114
|
+
/** creates a 'header' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
115
|
+
header: (...p: TSP) => s("header" as unk as FC<HTP["header"]>)(...p),
|
|
116
|
+
/** creates a 'hgroup' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
117
|
+
hgroup: (...p: TSP) => s("hgroup" as unk as FC<HTP["hgroup"]>)(...p),
|
|
118
|
+
/** creates a 'hr' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
119
|
+
hr: (...p: TSP) => s("hr" as unk as FC<HTP["hr"]>)(...p),
|
|
120
|
+
/** creates a 'i' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
121
|
+
i: (...p: TSP) => s("i" as unk as FC<HTP["i"]>)(...p),
|
|
122
|
+
/** creates a 'iframe' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
123
|
+
iframe: (...p: TSP) => s("iframe" as unk as FC<HTP["iframe"]>)(...p),
|
|
124
|
+
/** creates a 'img' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
125
|
+
img: (...p: TSP) => s("img" as unk as FC<HTP["img"]>)(...p),
|
|
126
|
+
/** creates a 'input' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
127
|
+
input: (...p: TSP) => s("input" as unk as FC<HTP["input"]>)(...p),
|
|
128
|
+
/** creates a 'ins' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
129
|
+
ins: (...p: TSP) => s("ins" as unk as FC<HTP["ins"]>)(...p),
|
|
130
|
+
/** creates a 'kbd' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
131
|
+
kbd: (...p: TSP) => s("kbd" as unk as FC<HTP["kbd"]>)(...p),
|
|
132
|
+
/** creates a 'label' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
133
|
+
label: (...p: TSP) => s("label" as unk as FC<HTP["label"]>)(...p),
|
|
134
|
+
/** creates a 'legend' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
135
|
+
legend: (...p: TSP) => s("legend" as unk as FC<HTP["legend"]>)(...p),
|
|
136
|
+
/** creates a 'li' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
137
|
+
li: (...p: TSP) => s("li" as unk as FC<HTP["li"]>)(...p),
|
|
138
|
+
/** creates a 'main' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
139
|
+
main: (...p: TSP) => s("main" as unk as FC<HTP["main"]>)(...p),
|
|
140
|
+
/** creates a 'map' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
141
|
+
map: (...p: TSP) => s("map" as unk as FC<HTP["map"]>)(...p),
|
|
142
|
+
/** creates a 'mark' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
143
|
+
mark: (...p: TSP) => s("mark" as unk as FC<HTP["mark"]>)(...p),
|
|
144
|
+
/** creates a 'meter' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
145
|
+
meter: (...p: TSP) => s("meter" as unk as FC<HTP["meter"]>)(...p),
|
|
146
|
+
/** creates a 'nav' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
147
|
+
nav: (...p: TSP) => s("nav" as unk as FC<HTP["nav"]>)(...p),
|
|
148
|
+
/** creates a 'object' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
149
|
+
object: (...p: TSP) => s("object" as unk as FC<HTP["object"]>)(...p),
|
|
150
|
+
/** creates a 'ol' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
151
|
+
ol: (...p: TSP) => s("ol" as unk as FC<HTP["ol"]>)(...p),
|
|
152
|
+
/** creates a 'optgroup' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
153
|
+
optgroup: (...p: TSP) => s("optgroup" as unk as FC<HTP["optgroup"]>)(...p),
|
|
154
|
+
/** creates a 'option' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
155
|
+
option: (...p: TSP) => s("option" as unk as FC<HTP["option"]>)(...p),
|
|
156
|
+
/** creates a 'output' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
157
|
+
output: (...p: TSP) => s("output" as unk as FC<HTP["output"]>)(...p),
|
|
158
|
+
/** creates a 'p' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
159
|
+
p: (...p: TSP) => s("p" as unk as FC<HTP["p"]>)(...p),
|
|
160
|
+
/** creates a 'picture' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
161
|
+
picture: (...p: TSP) => s("picture" as unk as FC<HTP["picture"]>)(...p),
|
|
162
|
+
/** creates a 'pre' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
163
|
+
pre: (...p: TSP) => s("pre" as unk as FC<HTP["pre"]>)(...p),
|
|
164
|
+
/** creates a 'progress' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
165
|
+
progress: (...p: TSP) => s("progress" as unk as FC<HTP["progress"]>)(...p),
|
|
166
|
+
/** creates a 'q' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
167
|
+
q: (...p: TSP) => s("q" as unk as FC<HTP["q"]>)(...p),
|
|
168
|
+
/** creates a 'rp' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
169
|
+
rp: (...p: TSP) => s("rp" as unk as FC<HTP["rp"]>)(...p),
|
|
170
|
+
/** creates a 'rt' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
171
|
+
rt: (...p: TSP) => s("rt" as unk as FC<HTP["rt"]>)(...p),
|
|
172
|
+
/** creates a 'ruby' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
173
|
+
ruby: (...p: TSP) => s("ruby" as unk as FC<HTP["ruby"]>)(...p),
|
|
174
|
+
/** creates a 's' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
175
|
+
s: (...p: TSP) => s("s" as unk as FC<HTP["s"]>)(...p),
|
|
176
|
+
/** creates a 'samp' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
177
|
+
samp: (...p: TSP) => s("samp" as unk as FC<HTP["samp"]>)(...p),
|
|
178
|
+
/** creates a 'section' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
179
|
+
section: (...p: TSP) => s("section" as unk as FC<HTP["section"]>)(...p),
|
|
180
|
+
/** creates a 'select' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
181
|
+
select: (...p: TSP) => s("select" as unk as FC<HTP["select"]>)(...p),
|
|
182
|
+
/** creates a 'small' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
183
|
+
small: (...p: TSP) => s("small" as unk as FC<HTP["small"]>)(...p),
|
|
184
|
+
/** creates a 'span' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
185
|
+
span: (...p: TSP) => s("span" as unk as FC<HTP["span"]>)(...p),
|
|
186
|
+
/** creates a 'strong' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
187
|
+
strong: (...p: TSP) => s("strong" as unk as FC<HTP["strong"]>)(...p),
|
|
188
|
+
/** creates a 'sub' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
189
|
+
sub: (...p: TSP) => s("sub" as unk as FC<HTP["sub"]>)(...p),
|
|
190
|
+
/** creates a 'summary' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
191
|
+
summary: (...p: TSP) => s("summary" as unk as FC<HTP["summary"]>)(...p),
|
|
192
|
+
/** creates a 'sup' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
193
|
+
sup: (...p: TSP) => s("sup" as unk as FC<HTP["sup"]>)(...p),
|
|
194
|
+
/** creates a 'svg' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
195
|
+
svg: (...p: TSP) => s("svg" as unk as FC<HTP["svg"]>)(...p),
|
|
196
|
+
/** creates a 'table' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
197
|
+
table: (...p: TSP) => s("table" as unk as FC<HTP["table"]>)(...p),
|
|
198
|
+
/** creates a 'tbody' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
199
|
+
tbody: (...p: TSP) => s("tbody" as unk as FC<HTP["tbody"]>)(...p),
|
|
200
|
+
/** creates a 'td' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
201
|
+
td: (...p: TSP) => s("td" as unk as FC<HTP["td"]>)(...p),
|
|
202
|
+
/** creates a 'textarea' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
203
|
+
textarea: (...p: TSP) => s("textarea" as unk as FC<HTP["textarea"]>)(...p),
|
|
204
|
+
/** creates a 'tfoot' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
205
|
+
tfoot: (...p: TSP) => s("tfoot" as unk as FC<HTP["tfoot"]>)(...p),
|
|
206
|
+
/** creates a 'th' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
207
|
+
th: (...p: TSP) => s("th" as unk as FC<HTP["th"]>)(...p),
|
|
208
|
+
/** creates a 'thead' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
209
|
+
thead: (...p: TSP) => s("thead" as unk as FC<HTP["thead"]>)(...p),
|
|
210
|
+
/** creates a 'time' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
211
|
+
time: (...p: TSP) => s("time" as unk as FC<HTP["time"]>)(...p),
|
|
212
|
+
/** creates a 'tr' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
213
|
+
tr: (...p: TSP) => s("tr" as unk as FC<HTP["tr"]>)(...p),
|
|
214
|
+
/** creates a 'u' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
215
|
+
u: (...p: TSP) => s("u" as unk as FC<HTP["u"]>)(...p),
|
|
216
|
+
/** creates a 'ul' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
217
|
+
ul: (...p: TSP) => s("ul" as unk as FC<HTP["ul"]>)(...p),
|
|
218
|
+
/** creates a 'video' component with css applied; See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
|
|
219
|
+
video: (...p: TSP) => s("video" as unk as FC<HTP["video"]>)(...p),
|
|
220
220
|
})
|
package/esm/core.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { CSSProperties, FC, HTMLAttributes } from
|
|
1
|
+
import { css, type ShorthandProps } from "@slimr/css";
|
|
2
|
+
import { type CSSProperties, type FC, type HTMLAttributes } from "react";
|
|
3
3
|
type allowableAny = any;
|
|
4
4
|
/** A type that represents all the css properties + shorthand props + any css variable */
|
|
5
|
-
export interface ZxProps extends Omit<CSSProperties,
|
|
5
|
+
export interface ZxProps extends Omit<CSSProperties, "d">, ShorthandProps, Record<`--${string}`, number | string | undefined> {
|
|
6
6
|
}
|
|
7
7
|
type ZxP = ZxProps;
|
|
8
8
|
type Zx = {
|
|
@@ -45,7 +45,7 @@ export interface SCProps extends _Props {
|
|
|
45
45
|
}
|
|
46
46
|
/** Styled Component: Like FunctionalComponent but adds SCProps */
|
|
47
47
|
export type SC<T extends {
|
|
48
|
-
className?: HTMLAttributes<allowableAny>[
|
|
48
|
+
className?: HTMLAttributes<allowableAny>["className"];
|
|
49
49
|
}> = FC<T & SCProps>;
|
|
50
50
|
/**
|
|
51
51
|
* The core functionality of the exported `styled` Object.
|
package/esm/core.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* eslint-disable prefer-const */
|
|
2
|
-
import { classJoin, css } from
|
|
3
|
-
import { toKebabCase } from
|
|
4
|
-
import { createElement, forwardRef } from
|
|
2
|
+
import { classJoin, css } from "@slimr/css";
|
|
3
|
+
import { toKebabCase } from "@slimr/util";
|
|
4
|
+
import { createElement, forwardRef } from "react";
|
|
5
5
|
/**
|
|
6
6
|
* The core functionality of the exported `styled` Object.
|
|
7
7
|
*
|
|
@@ -14,17 +14,17 @@ export function styledBase(Component) {
|
|
|
14
14
|
* A functional component that accepts Styled Props
|
|
15
15
|
*/
|
|
16
16
|
const CStyled = forwardRef(function CStyled(props, ref) {
|
|
17
|
-
|
|
17
|
+
const { _active, _css, _dark, _focus, _focusVisible, _focusWithin, _hover, _light, _target, _visited, _zx = {}, ...rest } = props;
|
|
18
18
|
// Pluck out $ prefixed props
|
|
19
19
|
Object.entries(props).forEach(([k, v]) => {
|
|
20
|
-
if (k.startsWith(
|
|
20
|
+
if (k.startsWith("_")) {
|
|
21
21
|
// @ts-expect-error - We know the key exists but ts doesn't
|
|
22
22
|
_zx[k.slice(1)] = v;
|
|
23
23
|
// @ts-expect-error - We know the key exists but ts doesn't
|
|
24
24
|
delete rest[k];
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
|
-
let cssStr =
|
|
27
|
+
let cssStr = "";
|
|
28
28
|
if (_active) {
|
|
29
29
|
cssStr += `
|
|
30
30
|
&:active {
|
|
@@ -92,10 +92,10 @@ export function styledBase(Component) {
|
|
|
92
92
|
return createElement(Component, {
|
|
93
93
|
ref,
|
|
94
94
|
...rest,
|
|
95
|
-
className: classJoin(className, _css ? (_css.includes(
|
|
95
|
+
className: classJoin(className, _css ? (_css.includes(":") ? css(_css) : _css) : undefined, cssStr ? css(cssStr) : undefined, props.className),
|
|
96
96
|
});
|
|
97
97
|
});
|
|
98
|
-
CStyled.toString = () =>
|
|
98
|
+
CStyled.toString = () => `.${className}`;
|
|
99
99
|
return CStyled;
|
|
100
100
|
};
|
|
101
101
|
}
|
|
@@ -107,16 +107,16 @@ function zxToCss(zx) {
|
|
|
107
107
|
return Object.entries(zx)
|
|
108
108
|
.map(([k, v]) => {
|
|
109
109
|
if (!v)
|
|
110
|
-
return
|
|
110
|
+
return "";
|
|
111
111
|
k = toKebabCase(k);
|
|
112
|
-
if (typeof v ===
|
|
113
|
-
v = v
|
|
112
|
+
if (typeof v === "number")
|
|
113
|
+
v = `${v}px`;
|
|
114
114
|
if (Array.isArray(v)) {
|
|
115
115
|
// @ts-expect-error - TS gets confused by the complexity
|
|
116
|
-
v =
|
|
116
|
+
v = `[${v.map((v) => (typeof v === "number" ? `${v}px` : v)).join(",")}]`;
|
|
117
117
|
}
|
|
118
|
-
return k
|
|
118
|
+
return `${k}:${v};`;
|
|
119
119
|
})
|
|
120
|
-
.join(
|
|
120
|
+
.join("\n");
|
|
121
121
|
}
|
|
122
122
|
//# sourceMappingURL=core.js.map
|
package/esm/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,OAAO,
|
|
1
|
+
{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"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"}
|