@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/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/cjs/core.js
CHANGED
|
@@ -17,17 +17,17 @@ function styledBase(Component) {
|
|
|
17
17
|
* A functional component that accepts Styled Props
|
|
18
18
|
*/
|
|
19
19
|
const CStyled = (0, react_1.forwardRef)(function CStyled(props, ref) {
|
|
20
|
-
|
|
20
|
+
const { _active, _css, _dark, _focus, _focusVisible, _focusWithin, _hover, _light, _target, _visited, _zx = {}, ...rest } = props;
|
|
21
21
|
// Pluck out $ prefixed props
|
|
22
22
|
Object.entries(props).forEach(([k, v]) => {
|
|
23
|
-
if (k.startsWith(
|
|
23
|
+
if (k.startsWith("_")) {
|
|
24
24
|
// @ts-expect-error - We know the key exists but ts doesn't
|
|
25
25
|
_zx[k.slice(1)] = v;
|
|
26
26
|
// @ts-expect-error - We know the key exists but ts doesn't
|
|
27
27
|
delete rest[k];
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
let cssStr =
|
|
30
|
+
let cssStr = "";
|
|
31
31
|
if (_active) {
|
|
32
32
|
cssStr += `
|
|
33
33
|
&:active {
|
|
@@ -95,10 +95,10 @@ function styledBase(Component) {
|
|
|
95
95
|
return (0, react_1.createElement)(Component, {
|
|
96
96
|
ref,
|
|
97
97
|
...rest,
|
|
98
|
-
className: (0, css_1.classJoin)(className, _css ? (_css.includes(
|
|
98
|
+
className: (0, css_1.classJoin)(className, _css ? (_css.includes(":") ? (0, css_1.css)(_css) : _css) : undefined, cssStr ? (0, css_1.css)(cssStr) : undefined, props.className),
|
|
99
99
|
});
|
|
100
100
|
});
|
|
101
|
-
CStyled.toString = () =>
|
|
101
|
+
CStyled.toString = () => `.${className}`;
|
|
102
102
|
return CStyled;
|
|
103
103
|
};
|
|
104
104
|
}
|
|
@@ -110,16 +110,16 @@ function zxToCss(zx) {
|
|
|
110
110
|
return Object.entries(zx)
|
|
111
111
|
.map(([k, v]) => {
|
|
112
112
|
if (!v)
|
|
113
|
-
return
|
|
113
|
+
return "";
|
|
114
114
|
k = (0, util_1.toKebabCase)(k);
|
|
115
|
-
if (typeof v ===
|
|
116
|
-
v = v
|
|
115
|
+
if (typeof v === "number")
|
|
116
|
+
v = `${v}px`;
|
|
117
117
|
if (Array.isArray(v)) {
|
|
118
118
|
// @ts-expect-error - TS gets confused by the complexity
|
|
119
|
-
v =
|
|
119
|
+
v = `[${v.map((v) => (typeof v === "number" ? `${v}px` : v)).join(",")}]`;
|
|
120
120
|
}
|
|
121
|
-
return k
|
|
121
|
+
return `${k}:${v};`;
|
|
122
122
|
})
|
|
123
|
-
.join(
|
|
123
|
+
.join("\n");
|
|
124
124
|
}
|
|
125
125
|
//# sourceMappingURL=core.js.map
|
package/cjs/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"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"}
|
package/cjs/core.ts
CHANGED
|
@@ -1,69 +1,71 @@
|
|
|
1
1
|
/* eslint-disable prefer-const */
|
|
2
|
-
import {
|
|
2
|
+
import { classJoin, css, type ShorthandProps } from "@slimr/css"
|
|
3
3
|
|
|
4
|
-
import {toKebabCase} from
|
|
5
|
-
import {CSSProperties,
|
|
4
|
+
import { toKebabCase } from "@slimr/util"
|
|
5
|
+
import { type CSSProperties, createElement, type FC, forwardRef, type HTMLAttributes } from "react"
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8
8
|
type allowableAny = any
|
|
9
9
|
|
|
10
10
|
/** A type that represents all the css properties + shorthand props + any css variable */
|
|
11
11
|
export interface ZxProps
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
extends Omit<CSSProperties, "d">,
|
|
13
|
+
ShorthandProps,
|
|
14
|
+
Record<`--${string}`, number | string | undefined> {}
|
|
15
15
|
type ZxP = ZxProps
|
|
16
16
|
|
|
17
17
|
type Zx = {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
[k in keyof ZxP]:
|
|
19
|
+
| ZxP[k]
|
|
20
|
+
| [ZxP[k] | null, ZxP[k]]
|
|
21
|
+
| [ZxP[k] | null, ZxP[k] | null, ZxP[k]]
|
|
22
|
+
| [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
|
|
23
|
+
| [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
|
|
24
|
+
| [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
|
|
25
|
+
| [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
type _Props = {
|
|
29
|
-
|
|
29
|
+
[k in keyof Zx as `_${k}`]?: Zx[k]
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
export interface SCProps extends _Props {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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
|
-
|
|
33
|
+
/** Like zx prop, but applies only on :active */
|
|
34
|
+
_active?: Zx
|
|
35
|
+
className?: string
|
|
36
|
+
/** A string of css or classname to be added to the component */
|
|
37
|
+
_css?: string
|
|
38
|
+
/** Like zx prop, but applies only when user prefers dark theme */
|
|
39
|
+
_dark?: Zx
|
|
40
|
+
/** Like zx prop, but applies only on :focus */
|
|
41
|
+
_focus?: Zx
|
|
42
|
+
/** Like zx prop, but applies only on :focus-visible */
|
|
43
|
+
_focusVisible?: Zx
|
|
44
|
+
/** Like zx prop, but applies only on :focus-within */
|
|
45
|
+
_focusWithin?: Zx
|
|
46
|
+
/** Like zx prop, but applies only on :hover */
|
|
47
|
+
_hover?: Zx
|
|
48
|
+
/** Like zx prop, but applies only when user prefers dark theme */
|
|
49
|
+
_light?: Zx
|
|
50
|
+
/** Standard style prop */
|
|
51
|
+
style?: CSSProperties
|
|
52
|
+
/** Like zx prop, but applies only on :target */
|
|
53
|
+
_target?: Zx
|
|
54
|
+
/** Like zx prop, but applies only on :visited */
|
|
55
|
+
_visited?: Zx
|
|
56
|
+
/**
|
|
57
|
+
* Like style prop, but enhanced with features like chakra
|
|
58
|
+
* - Array values are converted to media query breakpoints
|
|
59
|
+
* - Numbers are converted to px
|
|
60
|
+
* - Shorthand props are supported
|
|
61
|
+
*/
|
|
62
|
+
_zx?: Zx
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
/** Styled Component: Like FunctionalComponent but adds SCProps */
|
|
66
|
-
export type SC<T extends {className?: HTMLAttributes<allowableAny>[
|
|
66
|
+
export type SC<T extends { className?: HTMLAttributes<allowableAny>["className"] }> = FC<
|
|
67
|
+
T & SCProps
|
|
68
|
+
>
|
|
67
69
|
|
|
68
70
|
/**
|
|
69
71
|
* The core functionality of the exported `styled` Object.
|
|
@@ -71,119 +73,119 @@ export type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}
|
|
|
71
73
|
* Not intended to be used directly. Instead, use the `styled` object.
|
|
72
74
|
*/
|
|
73
75
|
export function styledBase<C extends FC<allowableAny>>(Component: C) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
76
|
+
return (...cssProps: Parameters<typeof css>) => {
|
|
77
|
+
const className = css(...cssProps)
|
|
78
|
+
/**
|
|
79
|
+
* A functional component that accepts Styled Props
|
|
80
|
+
*/
|
|
81
|
+
const CStyled = forwardRef(function CStyled(props: SCProps, ref) {
|
|
82
|
+
const {
|
|
83
|
+
_active,
|
|
84
|
+
_css,
|
|
85
|
+
_dark,
|
|
86
|
+
_focus,
|
|
87
|
+
_focusVisible,
|
|
88
|
+
_focusWithin,
|
|
89
|
+
_hover,
|
|
90
|
+
_light,
|
|
91
|
+
_target,
|
|
92
|
+
_visited,
|
|
93
|
+
_zx = {},
|
|
94
|
+
...rest
|
|
95
|
+
} = props
|
|
94
96
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
97
|
+
// Pluck out $ prefixed props
|
|
98
|
+
Object.entries(props).forEach(([k, v]) => {
|
|
99
|
+
if (k.startsWith("_")) {
|
|
100
|
+
// @ts-expect-error - We know the key exists but ts doesn't
|
|
101
|
+
_zx[k.slice(1)] = v
|
|
102
|
+
// @ts-expect-error - We know the key exists but ts doesn't
|
|
103
|
+
delete rest[k]
|
|
104
|
+
}
|
|
105
|
+
})
|
|
104
106
|
|
|
105
|
-
|
|
107
|
+
let cssStr = ""
|
|
106
108
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
+
if (_active) {
|
|
110
|
+
cssStr += `
|
|
109
111
|
&:active {
|
|
110
112
|
${zxToCss(_active)}
|
|
111
113
|
}
|
|
112
114
|
`
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
115
|
+
}
|
|
116
|
+
if (_dark) {
|
|
117
|
+
cssStr += `
|
|
116
118
|
@media (prefers-color-scheme: dark) {
|
|
117
119
|
${zxToCss(_dark)}
|
|
118
120
|
}
|
|
119
121
|
`
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
122
|
+
}
|
|
123
|
+
if (_focus) {
|
|
124
|
+
cssStr += `
|
|
123
125
|
&:focus {
|
|
124
126
|
${zxToCss(_focus)}
|
|
125
127
|
}
|
|
126
128
|
`
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
129
|
+
}
|
|
130
|
+
if (_focusVisible) {
|
|
131
|
+
cssStr += `
|
|
130
132
|
&:focus-visible {
|
|
131
133
|
${zxToCss(_focusVisible)}
|
|
132
134
|
}
|
|
133
135
|
`
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
136
|
+
}
|
|
137
|
+
if (_focusWithin) {
|
|
138
|
+
cssStr += `
|
|
137
139
|
&:focus-within {
|
|
138
140
|
${zxToCss(_focusWithin)}
|
|
139
141
|
}
|
|
140
142
|
`
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
143
|
+
}
|
|
144
|
+
if (_hover) {
|
|
145
|
+
cssStr += `
|
|
144
146
|
&:hover {
|
|
145
147
|
${zxToCss(_hover)}
|
|
146
148
|
}
|
|
147
149
|
`
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
150
|
+
}
|
|
151
|
+
if (_light) {
|
|
152
|
+
cssStr += `
|
|
151
153
|
@media (prefers-color-scheme: light) {
|
|
152
154
|
${zxToCss(_light)}
|
|
153
155
|
}
|
|
154
156
|
`
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
157
|
+
}
|
|
158
|
+
if (_target) {
|
|
159
|
+
cssStr += `
|
|
158
160
|
&:target {
|
|
159
161
|
${zxToCss(_target)}
|
|
160
162
|
}
|
|
161
163
|
`
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
164
|
+
}
|
|
165
|
+
if (_visited) {
|
|
166
|
+
cssStr += `
|
|
165
167
|
&:visited {
|
|
166
168
|
${zxToCss(_visited)}
|
|
167
169
|
}
|
|
168
170
|
`
|
|
169
|
-
|
|
171
|
+
}
|
|
170
172
|
|
|
171
|
-
|
|
173
|
+
cssStr = zxToCss(_zx) + cssStr
|
|
172
174
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
175
|
+
return createElement(Component, {
|
|
176
|
+
ref,
|
|
177
|
+
...rest,
|
|
178
|
+
className: classJoin(
|
|
179
|
+
className,
|
|
180
|
+
_css ? (_css.includes(":") ? css(_css) : _css) : undefined,
|
|
181
|
+
cssStr ? css(cssStr) : undefined,
|
|
182
|
+
props.className,
|
|
183
|
+
),
|
|
184
|
+
})
|
|
185
|
+
})
|
|
186
|
+
CStyled.toString = () => `.${className}`
|
|
187
|
+
return CStyled as unknown as SC<Parameters<C>[0]>
|
|
188
|
+
}
|
|
187
189
|
}
|
|
188
190
|
|
|
189
191
|
/**********************
|
|
@@ -192,16 +194,16 @@ export function styledBase<C extends FC<allowableAny>>(Component: C) {
|
|
|
192
194
|
|
|
193
195
|
/** Converts a zx prop into css string */
|
|
194
196
|
function zxToCss(zx: Zx): string {
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
197
|
+
return Object.entries(zx)
|
|
198
|
+
.map(([k, v]) => {
|
|
199
|
+
if (!v) return ""
|
|
200
|
+
k = toKebabCase(k)
|
|
201
|
+
if (typeof v === "number") v = `${v}px`
|
|
202
|
+
if (Array.isArray(v)) {
|
|
203
|
+
// @ts-expect-error - TS gets confused by the complexity
|
|
204
|
+
v = `[${v.map((v) => (typeof v === "number" ? `${v}px` : v)).join(",")}]`
|
|
205
|
+
}
|
|
206
|
+
return `${k}:${v};`
|
|
207
|
+
})
|
|
208
|
+
.join("\n")
|
|
207
209
|
}
|
package/cjs/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
1
|
+
export * from "@slimr/css";
|
|
2
|
+
export * from "./core.js";
|
|
3
|
+
export * from "./primitives.js";
|
|
4
|
+
export * from "./styled.js";
|
package/cjs/index.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
1
|
+
export * from "@slimr/css"
|
|
2
|
+
export * from "./core.js"
|
|
3
|
+
export * from "./primitives.js"
|
|
4
|
+
export * from "./styled.js"
|
package/cjs/primitives.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.ts"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../src/primitives.ts"],"names":[],"mappings":"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"}
|
package/cjs/primitives.ts
CHANGED
package/cjs/styled.d.ts
CHANGED