@stack-spot/citric-react 0.18.1 → 0.19.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/dist/citric.css +10 -3
- package/dist/components/Button.d.ts +3 -2
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js.map +1 -1
- package/dist/components/LoadingPanel.js +1 -1
- package/dist/components/LoadingPanel.js.map +1 -1
- package/dist/components/layout.d.ts +0 -60
- package/dist/components/layout.d.ts.map +1 -1
- package/dist/utils/css.d.ts +0 -21
- package/dist/utils/css.d.ts.map +1 -1
- package/dist/utils/css.js +6 -2
- package/dist/utils/css.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Button.tsx +3 -2
- package/src/components/LoadingPanel.tsx +1 -1
- package/src/utils/css.ts +6 -2
package/dist/citric.css
CHANGED
|
@@ -2234,6 +2234,13 @@ input[data-citric="favorite"][type="checkbox"] {
|
|
|
2234
2234
|
border-color: transparent;
|
|
2235
2235
|
}
|
|
2236
2236
|
|
|
2237
|
+
&.none {
|
|
2238
|
+
padding: 0;
|
|
2239
|
+
border: none;
|
|
2240
|
+
color: inherit;
|
|
2241
|
+
background-color: transparent;
|
|
2242
|
+
}
|
|
2243
|
+
|
|
2237
2244
|
/* Sizes */
|
|
2238
2245
|
|
|
2239
2246
|
&.lg {
|
|
@@ -2255,9 +2262,9 @@ input[data-citric="favorite"][type="checkbox"] {
|
|
|
2255
2262
|
outline-offset: 0.15rem;
|
|
2256
2263
|
}
|
|
2257
2264
|
|
|
2258
|
-
&:hover:not(.outlined):not(.text):not(:disabled),
|
|
2259
|
-
&:focus:not(.outlined):not(.text),
|
|
2260
|
-
&:active:not(.outlined):not(.text):not(:disabled) {
|
|
2265
|
+
&:hover:not(.outlined):not(.text):not(:disabled):not(.none),
|
|
2266
|
+
&:focus:not(.outlined):not(.text):not(.none),
|
|
2267
|
+
&:active:not(.outlined):not(.text):not(:disabled):not(.none) {
|
|
2261
2268
|
background-color: var(--scheme-400, var(--primary-400));
|
|
2262
2269
|
border-color: var(--scheme-400, var(--primary-400));
|
|
2263
2270
|
}
|
|
@@ -3,10 +3,11 @@ export interface BaseButtonProps extends WithColorScheme {
|
|
|
3
3
|
/**
|
|
4
4
|
* - contained for buttons with background;
|
|
5
5
|
* - outlined for transparent buttons with borders;
|
|
6
|
-
* - text for buttons with no borders or background
|
|
6
|
+
* - text for buttons with no borders or background;
|
|
7
|
+
* - none for buttons with no borders, background, paddings or any effect;
|
|
7
8
|
* @default 'contained'
|
|
8
9
|
*/
|
|
9
|
-
appearance?: 'outlined' | 'text' | 'contained';
|
|
10
|
+
appearance?: 'outlined' | 'text' | 'contained' | 'none';
|
|
10
11
|
/**
|
|
11
12
|
* Size of the button.
|
|
12
13
|
* @default 'md'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK1C,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK1C,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,GAAG,CAAC;IAC1E;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,GAAG,eAAe,CAAA;AAElG,eAAO,MAAM,MAAM,+GACsG,WAAW,4CAsClI,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AA4CrD,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,CAC5B,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe,EAClI,EAAE;IACF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,IAAI,GAAG,OAAO,IAAI,OAAO,CAAA;IAE/B,KAAK,UAAU,WAAW,CAAC,CAAkD;QAC3E,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QAC3B,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;QAC9C,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;YAC9B,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,IAAI,CAAC;gBACH,MAAM,MAAM,CAAA;YACd,CAAC;YAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;YACvB,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC;IACH,CAAC;IAED,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,WAAW,eACT,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,IAAI,EAC1B,IAAI,EAAE,IAAI,KACN,KAAK,aAER,IAAI,CAAC,CAAC,CAAC,wBAAM,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,EACvC,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,gBAAgB,IAAC,IAAI,EAAC,IAAI,GAAG,GAC1B,CACP,IACe,CACnB,CAAA;AACH,CAAC,CAAC,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Center } from './layout.js';
|
|
3
3
|
import { ProgressCircular } from './ProgressCircular.js';
|
|
4
|
-
export const LoadingPanel = () => (_jsx(Center, { flex: 1, p: "80px", "data-test-hint": "loading", children: _jsx(ProgressCircular, {}) }));
|
|
4
|
+
export const LoadingPanel = () => (_jsx(Center, { flex: 1, p: "80px", style: { alignSelf: 'stretch' }, "data-test-hint": "loading", children: _jsx(ProgressCircular, {}) }));
|
|
5
5
|
//# sourceMappingURL=LoadingPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingPanel.js","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAChC,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"LoadingPanel.js","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAChC,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAiB,SAAS,YACjF,KAAC,gBAAgB,KAAG,GACb,CACV,CAAA"}
|
|
@@ -32,74 +32,14 @@ export type CenterProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseLayoutProps<
|
|
|
32
32
|
export type RowProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseRowProps<T>;
|
|
33
33
|
export type ColumnProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseColumnProps<T>;
|
|
34
34
|
declare function _Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>): import("react").ReactElement<{
|
|
35
|
-
bg?: import("@stack-spot/portal-theme").ColorKey;
|
|
36
|
-
fg?: import("@stack-spot/portal-theme").ColorKey;
|
|
37
|
-
border?: import("@stack-spot/portal-theme").ColorKey;
|
|
38
|
-
radius?: import("@stack-spot/portal-theme").RadiusKey;
|
|
39
|
-
m?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
|
|
40
|
-
mt?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
41
|
-
mb?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
42
|
-
ml?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
43
|
-
mr?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
44
|
-
p?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
|
|
45
|
-
pt?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
46
|
-
pb?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
47
|
-
pl?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
48
|
-
pr?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
49
|
-
w?: string | number;
|
|
50
|
-
h?: string | number;
|
|
51
|
-
flex?: React.CSSProperties["flex"];
|
|
52
|
-
justifyContent?: React.CSSProperties["justifyContent"];
|
|
53
|
-
alignItems?: React.CSSProperties["alignItems"];
|
|
54
|
-
gap?: React.CSSProperties["gap"];
|
|
55
35
|
style: any;
|
|
56
36
|
className: string;
|
|
57
37
|
}, string | import("react").JSXElementConstructor<any>>;
|
|
58
38
|
declare function _Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>): import("react").ReactElement<{
|
|
59
|
-
bg?: import("@stack-spot/portal-theme").ColorKey;
|
|
60
|
-
fg?: import("@stack-spot/portal-theme").ColorKey;
|
|
61
|
-
border?: import("@stack-spot/portal-theme").ColorKey;
|
|
62
|
-
radius?: import("@stack-spot/portal-theme").RadiusKey;
|
|
63
|
-
m?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
|
|
64
|
-
mt?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
65
|
-
mb?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
66
|
-
ml?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
67
|
-
mr?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
68
|
-
p?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
|
|
69
|
-
pt?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
70
|
-
pb?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
71
|
-
pl?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
72
|
-
pr?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
73
|
-
w?: string | number;
|
|
74
|
-
h?: string | number;
|
|
75
|
-
flex?: React.CSSProperties["flex"];
|
|
76
|
-
justifyContent?: React.CSSProperties["justifyContent"];
|
|
77
|
-
alignItems?: React.CSSProperties["alignItems"];
|
|
78
|
-
gap?: React.CSSProperties["gap"];
|
|
79
39
|
style: any;
|
|
80
40
|
className: string;
|
|
81
41
|
}, string | import("react").JSXElementConstructor<any>>;
|
|
82
42
|
declare function _Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>): import("react").ReactElement<{
|
|
83
|
-
bg?: import("@stack-spot/portal-theme").ColorKey;
|
|
84
|
-
fg?: import("@stack-spot/portal-theme").ColorKey;
|
|
85
|
-
border?: import("@stack-spot/portal-theme").ColorKey;
|
|
86
|
-
radius?: import("@stack-spot/portal-theme").RadiusKey;
|
|
87
|
-
m?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
|
|
88
|
-
mt?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
89
|
-
mb?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
90
|
-
ml?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
91
|
-
mr?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
92
|
-
p?: import("@stack-spot/portal-theme").SpacingKey | import("@stack-spot/portal-theme").SpacingKey[] | string;
|
|
93
|
-
pt?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
94
|
-
pb?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
95
|
-
pl?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
96
|
-
pr?: import("@stack-spot/portal-theme").SpacingKey | string;
|
|
97
|
-
w?: string | number;
|
|
98
|
-
h?: string | number;
|
|
99
|
-
flex?: React.CSSProperties["flex"];
|
|
100
|
-
justifyContent?: React.CSSProperties["justifyContent"];
|
|
101
|
-
alignItems?: React.CSSProperties["alignItems"];
|
|
102
|
-
gap?: React.CSSProperties["gap"];
|
|
103
43
|
style: any;
|
|
104
44
|
className: string;
|
|
105
45
|
}, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAItD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAItD,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAClF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAA;AAC5E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAElF,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAE7F;AAED,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;;;wDAE/F;AAED,iBAAS,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAErG;AAED,eAAO,MAAM,MAAM,gBAAmB,CAAA;AACtC,eAAO,MAAM,GAAG,aAAgB,CAAA;AAChC,eAAO,MAAM,MAAM,gBAAmB,CAAA"}
|
package/dist/utils/css.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ColorKey } from '@stack-spot/portal-theme';
|
|
2
|
-
import { SpacingKey } from '@stack-spot/portal-theme/dist/definition.js';
|
|
3
2
|
import { TextAppearance, WithStyleShortcuts } from '../types.js';
|
|
4
3
|
export declare function colorNameToColorVariable(name: ColorKey): string;
|
|
5
4
|
export declare function applyColor(style: React.CSSProperties | undefined, color: ColorKey | undefined): import("react").CSSProperties | undefined;
|
|
@@ -8,26 +7,6 @@ export declare function applyTextAppearance(className: string | undefined, appea
|
|
|
8
7
|
export declare function applyCSSVariable(style: React.CSSProperties | undefined, name: string, value: any): import("react").CSSProperties | undefined;
|
|
9
8
|
export declare function getStyleFromProps({ bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml, mr, p, pt, pb, pl, pr, w, h, }: WithStyleShortcuts): React.CSSProperties;
|
|
10
9
|
export declare function applyStyles({ style, ...props }: WithStyleShortcuts & Record<string, any>): {
|
|
11
|
-
bg?: ColorKey;
|
|
12
|
-
fg?: ColorKey;
|
|
13
|
-
border?: ColorKey;
|
|
14
|
-
radius?: import("@stack-spot/portal-theme").RadiusKey;
|
|
15
|
-
m?: SpacingKey | SpacingKey[] | string;
|
|
16
|
-
mt?: SpacingKey | string;
|
|
17
|
-
mb?: SpacingKey | string;
|
|
18
|
-
ml?: SpacingKey | string;
|
|
19
|
-
mr?: SpacingKey | string;
|
|
20
|
-
p?: SpacingKey | SpacingKey[] | string;
|
|
21
|
-
pt?: SpacingKey | string;
|
|
22
|
-
pb?: SpacingKey | string;
|
|
23
|
-
pl?: SpacingKey | string;
|
|
24
|
-
pr?: SpacingKey | string;
|
|
25
|
-
w?: string | number;
|
|
26
|
-
h?: string | number;
|
|
27
|
-
flex?: React.CSSProperties["flex"];
|
|
28
|
-
justifyContent?: React.CSSProperties["justifyContent"];
|
|
29
|
-
alignItems?: React.CSSProperties["alignItems"];
|
|
30
|
-
gap?: React.CSSProperties["gap"];
|
|
31
10
|
style: any;
|
|
32
11
|
};
|
|
33
12
|
export declare function styleObjectToCssString(styleObject?: React.CSSProperties): string;
|
package/dist/utils/css.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAA;AAGvE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAE7D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAE/D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAG,SAAS,6CAE7F;AAED,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM,CAExE;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,cAAc,GAAG,SAAS,UAExG;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,6CAGhG;AAQD,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,EAAE,EACF,MAAM,EACN,MAAM,EACN,cAAc,EACd,UAAU,EACV,IAAI,EACJ,GAAG,EACH,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,CAAC,GACF,EAAE,kBAAkB,GAAG,KAAK,CAAC,aAAa,CA4B1C;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;EAOxF;AAGD,wBAAgB,sBAAsB,CAAC,WAAW,GAAE,KAAK,CAAC,aAAkB,UAgB3E"}
|
package/dist/utils/css.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { listToClass, theme } from '@stack-spot/portal-theme';
|
|
2
|
-
import { isNil, omitBy } from 'lodash';
|
|
2
|
+
import { isNil, omit, omitBy } from 'lodash';
|
|
3
3
|
export function colorNameToColorVariable(name) {
|
|
4
4
|
return `var(--${name.replaceAll('.', '-')})`;
|
|
5
5
|
}
|
|
@@ -54,8 +54,12 @@ export function getStyleFromProps({ bg, fg, border, radius, justifyContent, alig
|
|
|
54
54
|
return omitBy(newStyle, v => v === undefined);
|
|
55
55
|
}
|
|
56
56
|
export function applyStyles({ style, ...props }) {
|
|
57
|
+
const styleShortcutKeys = [
|
|
58
|
+
'bg', 'fg', 'border', 'radius', 'justifyContent', 'alignItems', 'flex', 'gap', 'm', 'mt', 'mb', 'ml', 'mr', 'p', 'pt', 'pb', 'pl',
|
|
59
|
+
'pr', 'w', 'h',
|
|
60
|
+
];
|
|
57
61
|
const newStyle = getStyleFromProps(props);
|
|
58
|
-
return { style: { ...newStyle, ...style }, ...props };
|
|
62
|
+
return { style: { ...newStyle, ...style }, ...omit(props, styleShortcutKeys) };
|
|
59
63
|
}
|
|
60
64
|
// AI generated
|
|
61
65
|
export function styleObjectToCssString(styleObject = {}) {
|
package/dist/utils/css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEvE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/utils/css.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -10,10 +10,11 @@ export interface BaseButtonProps extends WithColorScheme {
|
|
|
10
10
|
/**
|
|
11
11
|
* - contained for buttons with background;
|
|
12
12
|
* - outlined for transparent buttons with borders;
|
|
13
|
-
* - text for buttons with no borders or background
|
|
13
|
+
* - text for buttons with no borders or background;
|
|
14
|
+
* - none for buttons with no borders, background, paddings or any effect;
|
|
14
15
|
* @default 'contained'
|
|
15
16
|
*/
|
|
16
|
-
appearance?: 'outlined' | 'text' | 'contained',
|
|
17
|
+
appearance?: 'outlined' | 'text' | 'contained' | 'none',
|
|
17
18
|
/**
|
|
18
19
|
* Size of the button.
|
|
19
20
|
* @default 'md'
|
|
@@ -2,7 +2,7 @@ import { Center } from './layout'
|
|
|
2
2
|
import { ProgressCircular } from './ProgressCircular'
|
|
3
3
|
|
|
4
4
|
export const LoadingPanel = () => (
|
|
5
|
-
<Center flex={1} p="80px" data-test-hint="loading">
|
|
5
|
+
<Center flex={1} p="80px" style={{ alignSelf: 'stretch' }} data-test-hint="loading">
|
|
6
6
|
<ProgressCircular />
|
|
7
7
|
</Center>
|
|
8
8
|
)
|
package/src/utils/css.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ColorKey, listToClass, theme } from '@stack-spot/portal-theme'
|
|
2
2
|
import { SpacingKey } from '@stack-spot/portal-theme/dist/definition'
|
|
3
|
-
import { isNil, omitBy } from 'lodash'
|
|
3
|
+
import { isNil, omit, omitBy } from 'lodash'
|
|
4
4
|
import { TextAppearance, WithStyleShortcuts } from '../types'
|
|
5
5
|
|
|
6
6
|
export function colorNameToColorVariable(name: ColorKey): string {
|
|
@@ -82,8 +82,12 @@ export function getStyleFromProps({
|
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
export function applyStyles({ style, ...props }: WithStyleShortcuts & Record<string, any>) {
|
|
85
|
+
const styleShortcutKeys = [
|
|
86
|
+
'bg', 'fg', 'border', 'radius', 'justifyContent', 'alignItems', 'flex', 'gap', 'm', 'mt', 'mb', 'ml', 'mr', 'p', 'pt', 'pb', 'pl',
|
|
87
|
+
'pr', 'w', 'h',
|
|
88
|
+
]
|
|
85
89
|
const newStyle = getStyleFromProps(props)
|
|
86
|
-
return { style: { ...newStyle, ...style }, ...props }
|
|
90
|
+
return { style: { ...newStyle, ...style }, ...omit(props, styleShortcutKeys) }
|
|
87
91
|
}
|
|
88
92
|
|
|
89
93
|
// AI generated
|