@stokelp/styled-system 1.16.0 → 1.18.0
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/package.json +1 -1
- package/panda.buildinfo.json +26 -1
- package/recipes/icon-button.d.ts +43 -0
- package/recipes/icon-button.mjs +116 -0
- package/recipes/index.d.ts +1 -0
- package/recipes/index.mjs +1 -0
package/package.json
CHANGED
package/panda.buildinfo.json
CHANGED
|
@@ -52,7 +52,24 @@
|
|
|
52
52
|
"display]___[value:grid",
|
|
53
53
|
"gridTemplateColumns]___[value:repeat(3, 1fr)",
|
|
54
54
|
"gap]___[value:10px",
|
|
55
|
-
"flexDirection]___[value:row"
|
|
55
|
+
"flexDirection]___[value:row",
|
|
56
|
+
"borderRadius]___[value:radius-4",
|
|
57
|
+
"display]___[value:inline-flex",
|
|
58
|
+
"gap]___[value:space-4",
|
|
59
|
+
"background]___[value:primary.700",
|
|
60
|
+
"paddingBlock]___[value:space-8",
|
|
61
|
+
"paddingInline]___[value:space-16",
|
|
62
|
+
"paddingBlock]___[value:space-4",
|
|
63
|
+
"fontFamily]___[value:cabinet",
|
|
64
|
+
"color]___[value:white",
|
|
65
|
+
"textStyle]___[value:heading.h2",
|
|
66
|
+
"textStyle]___[value:heading.h4",
|
|
67
|
+
"textStyle]___[value:heading.h6",
|
|
68
|
+
"fontFamily]___[value:satoshi",
|
|
69
|
+
"color]___[value:grey.100",
|
|
70
|
+
"textStyle]___[value:body.lg",
|
|
71
|
+
"textStyle]___[value:body.md",
|
|
72
|
+
"textStyle]___[value:body.sm"
|
|
56
73
|
],
|
|
57
74
|
"recipes": {
|
|
58
75
|
"checkbox": [
|
|
@@ -71,6 +88,14 @@
|
|
|
71
88
|
"variant]___[value:tertiary]___[recipe:button",
|
|
72
89
|
"variant]___[value:primary]___[recipe:button"
|
|
73
90
|
],
|
|
91
|
+
"iconButton": [
|
|
92
|
+
"size]___[value:sm]___[recipe:iconButton",
|
|
93
|
+
"variant]___[value:secondary]___[recipe:iconButton",
|
|
94
|
+
"severity]___[value:none]___[recipe:iconButton",
|
|
95
|
+
"size]___[value:md]___[recipe:iconButton",
|
|
96
|
+
"variant]___[value:tertiary]___[recipe:iconButton",
|
|
97
|
+
"variant]___[value:primary]___[recipe:iconButton"
|
|
98
|
+
],
|
|
74
99
|
"formControl": [],
|
|
75
100
|
"formLabel": [
|
|
76
101
|
"variant]___[value:absolute]___[recipe:formLabel"
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { ConditionalValue } from '../types/index';
|
|
3
|
+
import type { DistributiveOmit, Pretty } from '../types/system-types';
|
|
4
|
+
|
|
5
|
+
interface IconButtonVariant {
|
|
6
|
+
/**
|
|
7
|
+
* @default "md"
|
|
8
|
+
*/
|
|
9
|
+
size: "lg" | "md" | "sm"
|
|
10
|
+
/**
|
|
11
|
+
* @default "primary"
|
|
12
|
+
*/
|
|
13
|
+
variant: "primary" | "secondary" | "tertiary"
|
|
14
|
+
/**
|
|
15
|
+
* @default "none"
|
|
16
|
+
*/
|
|
17
|
+
severity: "none" | "danger"
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
type IconButtonVariantMap = {
|
|
21
|
+
[key in keyof IconButtonVariant]: Array<IconButtonVariant[key]>
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export type IconButtonVariantProps = {
|
|
25
|
+
[key in keyof IconButtonVariant]?: IconButtonVariant[key] | undefined
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export interface IconButtonRecipe {
|
|
29
|
+
__type: IconButtonVariantProps
|
|
30
|
+
(props?: IconButtonVariantProps): string
|
|
31
|
+
raw: (props?: IconButtonVariantProps) => IconButtonVariantProps
|
|
32
|
+
variantMap: IconButtonVariantMap
|
|
33
|
+
variantKeys: Array<keyof IconButtonVariant>
|
|
34
|
+
splitVariantProps<Props extends IconButtonVariantProps>(props: Props): [IconButtonVariantProps, Pretty<DistributiveOmit<Props, keyof IconButtonVariantProps>>]
|
|
35
|
+
getVariantProps: (props?: IconButtonVariantProps) => IconButtonVariantProps
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* The styles for the IconButton component
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
*/
|
|
43
|
+
export declare const iconButton: IconButtonRecipe
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { memo, splitProps } from '../helpers.mjs';
|
|
2
|
+
import { createRecipe, mergeRecipes } from './create-recipe.mjs';
|
|
3
|
+
|
|
4
|
+
const iconButtonFn = /* @__PURE__ */ createRecipe('icon-button', {
|
|
5
|
+
"size": "md",
|
|
6
|
+
"variant": "primary",
|
|
7
|
+
"severity": "none"
|
|
8
|
+
}, [
|
|
9
|
+
{
|
|
10
|
+
"variant": "primary",
|
|
11
|
+
"severity": "danger",
|
|
12
|
+
"css": {
|
|
13
|
+
"bg": {
|
|
14
|
+
"_disabled": {
|
|
15
|
+
"_hover": "error.500",
|
|
16
|
+
"_active": "error.500",
|
|
17
|
+
"base": "error.500"
|
|
18
|
+
},
|
|
19
|
+
"_active": "error.800",
|
|
20
|
+
"_hover": "error.700",
|
|
21
|
+
"base": "error.500"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"variant": "secondary",
|
|
27
|
+
"severity": "danger",
|
|
28
|
+
"css": {
|
|
29
|
+
"bg": {
|
|
30
|
+
"_disabled": {
|
|
31
|
+
"_hover": "transparent",
|
|
32
|
+
"_active": "transparent",
|
|
33
|
+
"base": "transparent"
|
|
34
|
+
},
|
|
35
|
+
"_active": "error.700",
|
|
36
|
+
"_hover": "error.500",
|
|
37
|
+
"base": "transparent"
|
|
38
|
+
},
|
|
39
|
+
"boxShadow": {
|
|
40
|
+
"base": "inset 0 0 0 1px {colors.error.500}",
|
|
41
|
+
"_active": "inset 0 0 0 1px {colors.error.700}"
|
|
42
|
+
},
|
|
43
|
+
"color": {
|
|
44
|
+
"_disabled": {
|
|
45
|
+
"_hover": "error.500",
|
|
46
|
+
"_active": "error.500",
|
|
47
|
+
"base": "error.500"
|
|
48
|
+
},
|
|
49
|
+
"base": "error.500",
|
|
50
|
+
"_hover": "white",
|
|
51
|
+
"_active": "white"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"variant": "tertiary",
|
|
57
|
+
"severity": "danger",
|
|
58
|
+
"css": {
|
|
59
|
+
"bg": {
|
|
60
|
+
"_disabled": {
|
|
61
|
+
"_hover": "transparent",
|
|
62
|
+
"_active": "transparent",
|
|
63
|
+
"base": "transparent"
|
|
64
|
+
},
|
|
65
|
+
"_active": "error.200",
|
|
66
|
+
"_hover": "error.100",
|
|
67
|
+
"base": "transparent"
|
|
68
|
+
},
|
|
69
|
+
"color": {
|
|
70
|
+
"_disabled": {
|
|
71
|
+
"_hover": "error.500",
|
|
72
|
+
"_active": "error.500",
|
|
73
|
+
"base": "error.500"
|
|
74
|
+
},
|
|
75
|
+
"base": "error.500",
|
|
76
|
+
"_hover": "error.700",
|
|
77
|
+
"_active": "error.700"
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
])
|
|
82
|
+
|
|
83
|
+
const iconButtonVariantMap = {
|
|
84
|
+
"size": [
|
|
85
|
+
"lg",
|
|
86
|
+
"md",
|
|
87
|
+
"sm"
|
|
88
|
+
],
|
|
89
|
+
"variant": [
|
|
90
|
+
"primary",
|
|
91
|
+
"secondary",
|
|
92
|
+
"tertiary"
|
|
93
|
+
],
|
|
94
|
+
"severity": [
|
|
95
|
+
"none",
|
|
96
|
+
"danger"
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
const iconButtonVariantKeys = Object.keys(iconButtonVariantMap)
|
|
101
|
+
|
|
102
|
+
export const iconButton = /* @__PURE__ */ Object.assign(memo(iconButtonFn.recipeFn), {
|
|
103
|
+
__recipe__: true,
|
|
104
|
+
__name__: 'iconButton',
|
|
105
|
+
__getCompoundVariantCss__: iconButtonFn.__getCompoundVariantCss__,
|
|
106
|
+
raw: (props) => props,
|
|
107
|
+
variantKeys: iconButtonVariantKeys,
|
|
108
|
+
variantMap: iconButtonVariantMap,
|
|
109
|
+
merge(recipe) {
|
|
110
|
+
return mergeRecipes(this, recipe)
|
|
111
|
+
},
|
|
112
|
+
splitVariantProps(props) {
|
|
113
|
+
return splitProps(props, iconButtonVariantKeys)
|
|
114
|
+
},
|
|
115
|
+
getVariantProps: iconButtonFn.getVariantProps,
|
|
116
|
+
})
|
package/recipes/index.d.ts
CHANGED