@solostylist/ui-kit 2.0.4 → 2.0.6
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/s-icon-button/index.d.ts +1 -1
- package/dist/s-icon-button/s-icon-button.d.ts +32 -4
- package/dist/s-icon-button/s-icon-button.js +27 -28
- package/dist/s-list-action-item/s-list-action-item.js +4 -2
- package/dist/s-number-range/s-number-range.js +2 -1
- package/dist/s-segmented-control/s-segmented-control.js +17 -23
- package/dist/s-swatch/s-swatch.d.ts +3 -2
- package/dist/s-swatch/s-swatch.js +57 -51
- package/dist/theme/theme-primitives.d.ts +1 -2
- package/dist/theme/theme-primitives.js +2 -3
- package/package.json +3 -3
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { default, default as SIconButton } from './s-icon-button';
|
|
2
|
-
export type { SIconButtonOwnerState, SIconButtonProps, SIconButtonSlotProps, SIconButtonSlots, SIconButtonVariant, } from './s-icon-button';
|
|
2
|
+
export type { SIconButtonAccessibleNameProps, SIconButtonBaseProps, SIconButtonOwnerState, SIconButtonProps, SIconButtonSlotProps, SIconButtonSlots, SIconButtonVariant, } from './s-icon-button';
|
|
3
3
|
export type {} from '../theme/component-augmentation';
|
|
@@ -17,20 +17,48 @@ export interface SIconButtonSlotProps {
|
|
|
17
17
|
/** Props or an owner-state callback for the tooltip slot. */
|
|
18
18
|
tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children' | 'title'>>;
|
|
19
19
|
}
|
|
20
|
+
/**
|
|
21
|
+
* An icon carries no text, so every button needs a name: either an explicit
|
|
22
|
+
* `aria-label` / `aria-labelledby`, or a string `tooltip` the button falls back to.
|
|
23
|
+
*/
|
|
24
|
+
export type SIconButtonAccessibleNameProps = {
|
|
25
|
+
'aria-label': string;
|
|
26
|
+
'aria-labelledby'?: string;
|
|
27
|
+
tooltip?: React.ReactNode;
|
|
28
|
+
} | {
|
|
29
|
+
'aria-label'?: string;
|
|
30
|
+
'aria-labelledby': string;
|
|
31
|
+
tooltip?: React.ReactNode;
|
|
32
|
+
} | {
|
|
33
|
+
'aria-label'?: string;
|
|
34
|
+
'aria-labelledby'?: string;
|
|
35
|
+
tooltip: string;
|
|
36
|
+
};
|
|
20
37
|
/**
|
|
21
38
|
* MUI IconButton with an optional tooltip slot. Setting `href` makes the
|
|
22
39
|
* underlying ButtonBase render an anchor, so icon-only links keep the button
|
|
23
40
|
* hit target and hover state.
|
|
24
41
|
*/
|
|
25
|
-
export interface
|
|
42
|
+
export interface SIconButtonBaseProps extends Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'component'>, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'> {
|
|
26
43
|
/** Components used for internal slots. */
|
|
27
44
|
slots?: SIconButtonSlots;
|
|
28
45
|
/** Props or owner-state callbacks for internal slots. */
|
|
29
46
|
slotProps?: SIconButtonSlotProps;
|
|
30
|
-
/** Optional tooltip title. */
|
|
31
|
-
tooltip?: React.ReactNode;
|
|
32
47
|
/** Visual treatment for icon buttons displayed over another surface. */
|
|
33
48
|
variant?: SIconButtonVariant;
|
|
34
49
|
}
|
|
35
|
-
export
|
|
50
|
+
export type SIconButtonProps = SIconButtonBaseProps & SIconButtonAccessibleNameProps;
|
|
51
|
+
export declare const SIconButton: React.ForwardRefExoticComponent<(Omit<SIconButtonBaseProps & {
|
|
52
|
+
'aria-label': string;
|
|
53
|
+
'aria-labelledby'?: string;
|
|
54
|
+
tooltip?: React.ReactNode;
|
|
55
|
+
}, "ref"> | Omit<SIconButtonBaseProps & {
|
|
56
|
+
'aria-label'?: string;
|
|
57
|
+
'aria-labelledby': string;
|
|
58
|
+
tooltip?: React.ReactNode;
|
|
59
|
+
}, "ref"> | Omit<SIconButtonBaseProps & {
|
|
60
|
+
'aria-label'?: string;
|
|
61
|
+
'aria-labelledby'?: string;
|
|
62
|
+
tooltip: string;
|
|
63
|
+
}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
|
|
36
64
|
export default SIconButton;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import n from "@mui/material/
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import a from "
|
|
6
|
-
import o from "@mui/
|
|
1
|
+
import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
|
|
2
|
+
import { styled as t, useThemeProps as n } from "@mui/material/styles";
|
|
3
|
+
import r from "@mui/material/IconButton";
|
|
4
|
+
import * as i from "react";
|
|
5
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
6
|
+
import o from "@mui/utils/appendOwnerState";
|
|
7
|
+
import s from "@mui/material/Tooltip";
|
|
7
8
|
//#region lib/s-icon-button/s-icon-button.tsx
|
|
8
|
-
var
|
|
9
|
+
var c = t(r, {
|
|
9
10
|
name: "SIconButton",
|
|
10
11
|
slot: "Root"
|
|
11
12
|
})(({ theme: e, ownerState: t }) => {
|
|
@@ -16,32 +17,30 @@ var s = e(n, {
|
|
|
16
17
|
backgroundColor: n.blackAlpha.medium,
|
|
17
18
|
boxShadow: e.shadows[1],
|
|
18
19
|
color: n.common.white,
|
|
20
|
+
"&:active": { backgroundColor: n.blackAlpha.dark },
|
|
19
21
|
"@media (hover: hover) and (pointer: fine)": { "&:hover": { backgroundColor: n.blackAlpha.dark } }
|
|
20
22
|
};
|
|
21
|
-
})
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
var l = r.forwardRef(function(e, n) {
|
|
26
|
-
let r = t({
|
|
27
|
-
props: e,
|
|
23
|
+
}), l = i.forwardRef(function(t, r) {
|
|
24
|
+
let i = n({
|
|
25
|
+
props: t,
|
|
28
26
|
name: "SIconButton"
|
|
29
|
-
}), { disabled: l = !1,
|
|
30
|
-
...
|
|
31
|
-
disabled:
|
|
32
|
-
hasTooltip:
|
|
33
|
-
variant:
|
|
34
|
-
},
|
|
35
|
-
...
|
|
36
|
-
"aria-label":
|
|
27
|
+
}), { disabled: l = !1, loading: u, slotProps: d, slots: f, tooltip: p, variant: m, ...h } = i, g = l || u === !0, _ = {
|
|
28
|
+
...i,
|
|
29
|
+
disabled: g,
|
|
30
|
+
hasTooltip: p != null,
|
|
31
|
+
variant: m
|
|
32
|
+
}, v = f?.tooltip ?? s, y = o(f?.tooltip, e(d?.tooltip, _) ?? {}, _), b = h["aria-label"] ?? (typeof p == "string" ? p : void 0), x = /* @__PURE__ */ a(c, {
|
|
33
|
+
...h,
|
|
34
|
+
"aria-label": b,
|
|
37
35
|
disabled: l,
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
loading: u,
|
|
37
|
+
ownerState: _,
|
|
38
|
+
ref: r
|
|
40
39
|
});
|
|
41
|
-
return
|
|
42
|
-
...
|
|
43
|
-
title:
|
|
44
|
-
children:
|
|
40
|
+
return p == null ? x : /* @__PURE__ */ a(v, {
|
|
41
|
+
...y,
|
|
42
|
+
title: p,
|
|
43
|
+
children: g ? /* @__PURE__ */ a("span", { children: x }) : x
|
|
45
44
|
});
|
|
46
45
|
});
|
|
47
46
|
l.displayName = "SIconButton";
|
|
@@ -70,7 +70,8 @@ var g = 44, _ = 36, v = d(l, {
|
|
|
70
70
|
display: "block",
|
|
71
71
|
minWidth: 0,
|
|
72
72
|
overflow: "hidden",
|
|
73
|
-
textOverflow: "ellipsis"
|
|
73
|
+
textOverflow: "ellipsis",
|
|
74
|
+
whiteSpace: "nowrap"
|
|
74
75
|
}), S = d(u, {
|
|
75
76
|
name: "SListActionItem",
|
|
76
77
|
slot: "Description",
|
|
@@ -80,7 +81,8 @@ var g = 44, _ = 36, v = d(l, {
|
|
|
80
81
|
display: "block",
|
|
81
82
|
minWidth: 0,
|
|
82
83
|
overflow: "hidden",
|
|
83
|
-
textOverflow: "ellipsis"
|
|
84
|
+
textOverflow: "ellipsis",
|
|
85
|
+
whiteSpace: "nowrap"
|
|
84
86
|
})), C = d(c, {
|
|
85
87
|
name: "SListActionItem",
|
|
86
88
|
slot: "Trailing",
|
|
@@ -40,6 +40,7 @@ var p = (e, t, n) => Math.min(Math.max(e, t), n), m = (e, t, n) => {
|
|
|
40
40
|
color: (e.vars ?? e).palette.text.primary,
|
|
41
41
|
fontWeight: 600,
|
|
42
42
|
margin: 0,
|
|
43
|
+
marginBlockEnd: e.spacing(1),
|
|
43
44
|
padding: 0
|
|
44
45
|
})), oe = c(s, {
|
|
45
46
|
name: "SNumberRange",
|
|
@@ -58,7 +59,7 @@ var p = (e, t, n) => Math.min(Math.max(e, t), n), m = (e, t, n) => {
|
|
|
58
59
|
[`& .${f.track}`]: { border: 0 },
|
|
59
60
|
[`& .${f.thumb}`]: {
|
|
60
61
|
border: `2px solid ${(e.vars ?? e).palette.background.paper}`,
|
|
61
|
-
boxShadow:
|
|
62
|
+
boxShadow: "0 0 0 1px currentColor",
|
|
62
63
|
height: n ? 14 : 18,
|
|
63
64
|
width: n ? 14 : 18,
|
|
64
65
|
[`&:hover, &.${f.focusVisible}`]: { boxShadow: `0 0 0 6px ${(e.vars ?? e).palette.action.selected}` }
|
|
@@ -50,33 +50,27 @@ var x = [
|
|
|
50
50
|
name: "SSegmentedControl",
|
|
51
51
|
slot: "Indicator",
|
|
52
52
|
shouldForwardProp: (e) => e !== "ownerState"
|
|
53
|
-
})(({
|
|
54
|
-
let
|
|
53
|
+
})(({ ownerState: e, theme: t }) => {
|
|
54
|
+
let n = (t.vars ?? t).palette, r = i(t, "primary"), a = e.disabled || e.selectedDisabled;
|
|
55
55
|
return {
|
|
56
|
-
backgroundColor: n.light.containedBackground,
|
|
57
|
-
borderRadius:
|
|
56
|
+
backgroundColor: a ? n.action.disabledBackground : r.light.containedBackground,
|
|
57
|
+
borderRadius: t.radius.full,
|
|
58
|
+
boxShadow: a ? "none" : void 0,
|
|
58
59
|
left: 0,
|
|
59
60
|
pointerEvents: "none",
|
|
60
61
|
position: "absolute",
|
|
61
62
|
top: 0,
|
|
62
|
-
transition:
|
|
63
|
+
transition: t.transitions.create([
|
|
63
64
|
"height",
|
|
64
65
|
"opacity",
|
|
65
66
|
"transform",
|
|
66
67
|
"width"
|
|
67
68
|
], {
|
|
68
|
-
duration:
|
|
69
|
-
easing:
|
|
69
|
+
duration: t.transitions.duration.standard,
|
|
70
|
+
easing: t.transitions.easing.easeInOut
|
|
70
71
|
}),
|
|
71
72
|
zIndex: 0,
|
|
72
|
-
...
|
|
73
|
-
variants: [{
|
|
74
|
-
props: ({ ownerState: e }) => e.disabled || e.selectedDisabled,
|
|
75
|
-
style: {
|
|
76
|
-
backgroundColor: t.action.disabledBackground,
|
|
77
|
-
boxShadow: "none"
|
|
78
|
-
}
|
|
79
|
-
}],
|
|
73
|
+
...t.applyStyles("dark", { backgroundColor: a ? n.action.disabledBackground : r.dark.containedBackground }),
|
|
80
74
|
"@media (prefers-reduced-motion: reduce)": { transition: "none" }
|
|
81
75
|
};
|
|
82
76
|
}), T = p(d, {
|
|
@@ -187,18 +181,18 @@ function k(n, r) {
|
|
|
187
181
|
let e = R.current;
|
|
188
182
|
if (!e) return;
|
|
189
183
|
let t = () => {
|
|
190
|
-
let
|
|
191
|
-
if (!
|
|
184
|
+
let e = P === void 0 ? void 0 : z.current.get(P);
|
|
185
|
+
if (!e) {
|
|
192
186
|
V((e) => e === null ? e : null);
|
|
193
187
|
return;
|
|
194
188
|
}
|
|
195
|
-
let
|
|
196
|
-
height:
|
|
197
|
-
left:
|
|
198
|
-
top:
|
|
199
|
-
width:
|
|
189
|
+
let t = {
|
|
190
|
+
height: e.offsetHeight,
|
|
191
|
+
left: e.offsetLeft,
|
|
192
|
+
top: e.offsetTop,
|
|
193
|
+
width: e.offsetWidth
|
|
200
194
|
};
|
|
201
|
-
V((e) => e && e.height ===
|
|
195
|
+
V((e) => e && e.height === t.height && e.left === t.left && e.top === t.top && e.width === t.width ? e : t);
|
|
202
196
|
};
|
|
203
197
|
if (t(), window.addEventListener("resize", t), typeof ResizeObserver > "u") return () => window.removeEventListener("resize", t);
|
|
204
198
|
let n = new ResizeObserver(t);
|
|
@@ -76,8 +76,9 @@ export type SSwatchAccessibleNameProps = {
|
|
|
76
76
|
export interface SSwatchBaseProps extends Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'children' | 'color' | 'value'> {
|
|
77
77
|
/**
|
|
78
78
|
* Whether the swatch is an interactive option. Set to `false` for a
|
|
79
|
-
* presentational swatch; its root then fits the visual
|
|
80
|
-
* ripple, focus, or pressed semantics
|
|
79
|
+
* presentational swatch; its root then fits the visual, has no button,
|
|
80
|
+
* ripple, focus, or pressed semantics, and ignores every `onClick`,
|
|
81
|
+
* `slotProps.root` included.
|
|
81
82
|
*/
|
|
82
83
|
interactive?: boolean;
|
|
83
84
|
/** Marks the swatch as the current selection. */
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
|
|
2
|
-
import { getFocusVisibleStyle as t } from "../theme/components/action-styles.js";
|
|
3
|
-
import * as
|
|
4
|
-
import { jsx as
|
|
5
|
-
import { Box as
|
|
6
|
-
import { mergeSlotProps as
|
|
7
|
-
import
|
|
2
|
+
import { getFocusVisibleStyle as t, reducedPressMotionStyle as n } from "../theme/components/action-styles.js";
|
|
3
|
+
import * as r from "react";
|
|
4
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
5
|
+
import { Box as o, ButtonBase as s, styled as c, useThemeProps as l } from "@mui/material";
|
|
6
|
+
import { mergeSlotProps as u, useForkRef as d } from "@mui/material/utils";
|
|
7
|
+
import f from "@mui/utils/appendOwnerState";
|
|
8
8
|
//#region lib/s-swatch/s-swatch.tsx
|
|
9
|
-
var
|
|
9
|
+
var p = {
|
|
10
10
|
small: 22,
|
|
11
11
|
medium: 32,
|
|
12
12
|
large: 44
|
|
13
|
-
},
|
|
13
|
+
}, m = 24, h = 44, g = "@media (pointer: coarse)", _ = 45, v = (e) => Math.max(1, typeof e == "number" ? e : p[e]), y = ({ ownerState: e, theme: r }) => ({
|
|
14
14
|
alignItems: "center",
|
|
15
15
|
backgroundColor: "transparent",
|
|
16
|
-
borderRadius:
|
|
16
|
+
borderRadius: r.radius.sm,
|
|
17
17
|
boxSizing: "border-box",
|
|
18
18
|
cursor: e.interactive ? "pointer" : "default",
|
|
19
19
|
display: "inline-flex",
|
|
@@ -22,7 +22,7 @@ var f = {
|
|
|
22
22
|
justifyContent: "center",
|
|
23
23
|
padding: 0,
|
|
24
24
|
position: "relative",
|
|
25
|
-
transition:
|
|
25
|
+
transition: r.transitions.create("opacity", { duration: r.transitions.duration.shorter }),
|
|
26
26
|
width: e.controlSize,
|
|
27
27
|
...e.interactive ? {
|
|
28
28
|
"& .MuiTouchRipple-root": {
|
|
@@ -34,7 +34,7 @@ var f = {
|
|
|
34
34
|
zIndex: 1
|
|
35
35
|
},
|
|
36
36
|
"&.Mui-focusVisible::after": {
|
|
37
|
-
...t(
|
|
37
|
+
...t(r),
|
|
38
38
|
borderRadius: "inherit",
|
|
39
39
|
content: "\"\"",
|
|
40
40
|
height: e.swatchSize,
|
|
@@ -47,7 +47,7 @@ var f = {
|
|
|
47
47
|
zIndex: 4
|
|
48
48
|
},
|
|
49
49
|
"&.Mui-disabled": { cursor: "not-allowed" },
|
|
50
|
-
[
|
|
50
|
+
[g]: {
|
|
51
51
|
flex: `0 0 ${e.coarseControlSize}px`,
|
|
52
52
|
height: e.coarseControlSize,
|
|
53
53
|
width: e.coarseControlSize
|
|
@@ -55,21 +55,21 @@ var f = {
|
|
|
55
55
|
} : void 0,
|
|
56
56
|
variants: [{
|
|
57
57
|
props: ({ ownerState: e }) => e.shape === "circle",
|
|
58
|
-
style: { borderRadius:
|
|
58
|
+
style: { borderRadius: r.radius.full }
|
|
59
59
|
}, {
|
|
60
60
|
props: ({ ownerState: e }) => e.disabled,
|
|
61
|
-
style: { opacity: (
|
|
61
|
+
style: { opacity: (r.vars ?? r).palette.action.disabledOpacity }
|
|
62
62
|
}],
|
|
63
|
-
|
|
64
|
-
}),
|
|
63
|
+
...n
|
|
64
|
+
}), b = c(s, {
|
|
65
65
|
name: "SSwatch",
|
|
66
66
|
slot: "Root",
|
|
67
67
|
shouldForwardProp: (e) => e !== "ownerState"
|
|
68
|
-
})(
|
|
68
|
+
})(y), x = c(o, {
|
|
69
69
|
name: "SSwatch",
|
|
70
70
|
slot: "Root",
|
|
71
71
|
shouldForwardProp: (e) => e !== "ownerState"
|
|
72
|
-
})(
|
|
72
|
+
})(y), S = c(o, {
|
|
73
73
|
name: "SSwatch",
|
|
74
74
|
slot: "Swatch",
|
|
75
75
|
shouldForwardProp: (e) => e !== "ownerState"
|
|
@@ -77,14 +77,14 @@ var f = {
|
|
|
77
77
|
backgroundColor: (t.vars ?? t).palette.background.paper,
|
|
78
78
|
backgroundPosition: "center",
|
|
79
79
|
backgroundSize: "cover",
|
|
80
|
+
border: `1px solid ${(t.vars ?? t).palette.divider}`,
|
|
80
81
|
borderRadius: "inherit",
|
|
81
|
-
boxShadow: `inset 0 0 0 1px ${(t.vars ?? t).palette.divider}`,
|
|
82
82
|
boxSizing: "border-box",
|
|
83
83
|
flex: "0 0 auto",
|
|
84
84
|
height: e.swatchSize,
|
|
85
85
|
overflow: "hidden",
|
|
86
86
|
position: "relative",
|
|
87
|
-
transition: t.transitions.create(["
|
|
87
|
+
transition: t.transitions.create(["border-color", "filter"], { duration: t.transitions.duration.shorter }),
|
|
88
88
|
width: e.swatchSize,
|
|
89
89
|
zIndex: 0,
|
|
90
90
|
variants: [
|
|
@@ -94,7 +94,10 @@ var f = {
|
|
|
94
94
|
},
|
|
95
95
|
{
|
|
96
96
|
props: ({ ownerState: e }) => e.selected,
|
|
97
|
-
style: {
|
|
97
|
+
style: {
|
|
98
|
+
borderColor: (t.vars ?? t).palette.primary.main,
|
|
99
|
+
borderWidth: 2
|
|
100
|
+
}
|
|
98
101
|
},
|
|
99
102
|
{
|
|
100
103
|
props: ({ ownerState: e }) => e.unavailable,
|
|
@@ -112,7 +115,7 @@ var f = {
|
|
|
112
115
|
}
|
|
113
116
|
],
|
|
114
117
|
"@media (prefers-reduced-motion: reduce)": { transition: "none" }
|
|
115
|
-
})),
|
|
118
|
+
})), C = c(o, {
|
|
116
119
|
name: "SSwatch",
|
|
117
120
|
slot: "Image",
|
|
118
121
|
shouldForwardProp: (e) => e !== "ownerState"
|
|
@@ -125,7 +128,7 @@ var f = {
|
|
|
125
128
|
objectPosition: "center",
|
|
126
129
|
position: "absolute",
|
|
127
130
|
width: "100%"
|
|
128
|
-
}),
|
|
131
|
+
}), w = c(o, {
|
|
129
132
|
name: "SSwatch",
|
|
130
133
|
slot: "Indicator",
|
|
131
134
|
shouldForwardProp: (e) => e !== "ownerState"
|
|
@@ -141,7 +144,7 @@ var f = {
|
|
|
141
144
|
transform: "translate(-50%, -50%)",
|
|
142
145
|
width: Math.max(6, Math.round(e.swatchSize * .3)),
|
|
143
146
|
zIndex: 3
|
|
144
|
-
})),
|
|
147
|
+
})), T = c(o, {
|
|
145
148
|
name: "SSwatch",
|
|
146
149
|
slot: "Strikethrough",
|
|
147
150
|
shouldForwardProp: (e) => e !== "ownerState"
|
|
@@ -153,66 +156,69 @@ var f = {
|
|
|
153
156
|
pointerEvents: "none",
|
|
154
157
|
position: "absolute",
|
|
155
158
|
top: "50%",
|
|
156
|
-
transform: `translate(-50%, -50%) rotate(-${
|
|
159
|
+
transform: `translate(-50%, -50%) rotate(-${_}deg)`,
|
|
157
160
|
transformOrigin: "center",
|
|
158
161
|
width: "141.421%",
|
|
159
162
|
zIndex: 2
|
|
160
|
-
})),
|
|
161
|
-
let
|
|
163
|
+
})), E = r.forwardRef(function(t, n) {
|
|
164
|
+
let r = l({
|
|
162
165
|
props: t,
|
|
163
166
|
name: "SSwatch"
|
|
164
|
-
}), { "aria-label": o, "aria-labelledby": s, color:
|
|
165
|
-
...
|
|
166
|
-
coarseControlSize: E ? Math.max(L,
|
|
167
|
+
}), { "aria-label": o, "aria-labelledby": s, color: c, colorSecondary: p, disabled: g = !1, image: y, interactive: E = !0, label: D, selected: O = !1, shape: k = "square", size: A = "medium", slotProps: j, slots: M, unavailable: N = !1, unavailableText: P = "Unavailable", value: F, ...I } = r, L = v(A), R = E ? Math.max(L, m) : L, z = {
|
|
168
|
+
...r,
|
|
169
|
+
coarseControlSize: E ? Math.max(L, h) : L,
|
|
167
170
|
controlSize: R,
|
|
168
|
-
disabled:
|
|
171
|
+
disabled: g,
|
|
169
172
|
interactive: E,
|
|
170
173
|
selected: O,
|
|
171
174
|
shape: k,
|
|
172
175
|
size: A,
|
|
173
176
|
swatchSize: L,
|
|
174
177
|
unavailable: N
|
|
175
|
-
}, B = M?.root ?? (E ?
|
|
178
|
+
}, B = M?.root ?? (E ? b : x), V = M?.swatch ?? S, H = M?.image ?? C, U = M?.indicator ?? w, W = M?.strikethrough ?? T, G = [o ?? D ?? F, N ? P : void 0].filter(Boolean).join(", "), K = u(e(j?.root, z), E ? {
|
|
176
179
|
...I,
|
|
177
180
|
"aria-label": s ? void 0 : G || void 0,
|
|
178
181
|
"aria-labelledby": s,
|
|
179
182
|
"aria-pressed": O,
|
|
180
|
-
disabled:
|
|
183
|
+
disabled: g
|
|
181
184
|
} : {
|
|
182
185
|
component: "span",
|
|
183
186
|
role: "img",
|
|
184
187
|
...I,
|
|
185
188
|
"aria-label": s ? void 0 : G || void 0,
|
|
186
189
|
"aria-labelledby": s
|
|
187
|
-
}),
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
190
|
+
}), { ref: q, ...J } = f(B, E ? K : {
|
|
191
|
+
...K,
|
|
192
|
+
onClick: void 0
|
|
193
|
+
}, z), Y = d(q, n), { style: X, ...Z } = e(j?.swatch, z) ?? {}, Q = f(V, Z, z), $ = f(H, e(j?.image, z) ?? {}, z), ee = f(U, e(j?.indicator, z) ?? {}, z), te = f(W, e(j?.strikethrough, z) ?? {}, z);
|
|
194
|
+
return /* @__PURE__ */ a(B, {
|
|
195
|
+
...J,
|
|
196
|
+
ref: Y,
|
|
197
|
+
children: [/* @__PURE__ */ a(V, {
|
|
192
198
|
component: "span",
|
|
193
|
-
...
|
|
199
|
+
...Q,
|
|
194
200
|
style: {
|
|
195
|
-
backgroundColor:
|
|
196
|
-
backgroundImage:
|
|
197
|
-
...
|
|
201
|
+
backgroundColor: c,
|
|
202
|
+
backgroundImage: p ? `linear-gradient(${180 - _}deg, ${c} 0 50%, ${p} 50% 100%)` : void 0,
|
|
203
|
+
...X
|
|
198
204
|
},
|
|
199
|
-
children: [
|
|
205
|
+
children: [y ? /* @__PURE__ */ i(H, {
|
|
200
206
|
alt: "",
|
|
201
207
|
component: "img",
|
|
202
|
-
|
|
203
|
-
src:
|
|
204
|
-
}) : null, N ? /* @__PURE__ */
|
|
208
|
+
...$,
|
|
209
|
+
src: y
|
|
210
|
+
}) : null, N ? /* @__PURE__ */ i(W, {
|
|
205
211
|
"aria-hidden": !0,
|
|
206
212
|
component: "span",
|
|
207
|
-
...
|
|
213
|
+
...te
|
|
208
214
|
}) : null]
|
|
209
|
-
}), O ? /* @__PURE__ */
|
|
215
|
+
}), O ? /* @__PURE__ */ i(U, {
|
|
210
216
|
"aria-hidden": !0,
|
|
211
217
|
component: "span",
|
|
212
|
-
|
|
218
|
+
...ee
|
|
213
219
|
}) : null]
|
|
214
220
|
});
|
|
215
221
|
});
|
|
216
|
-
|
|
222
|
+
E.displayName = "SSwatch";
|
|
217
223
|
//#endregion
|
|
218
|
-
export {
|
|
224
|
+
export { E as SSwatch, E as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Shadows } from '@mui/material/styles';
|
|
2
|
-
import {
|
|
2
|
+
import { darkGradientPalette, GradientPath } from '@solostylist/core';
|
|
3
3
|
declare module '@mui/material/Paper' {
|
|
4
4
|
interface PaperPropsVariantOverrides {
|
|
5
5
|
highlighted: true;
|
|
@@ -89,7 +89,6 @@ export declare const sxConfig: {
|
|
|
89
89
|
cssProperty: "backgroundImage";
|
|
90
90
|
};
|
|
91
91
|
};
|
|
92
|
-
export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, };
|
|
93
92
|
export declare const colorSchemes: {
|
|
94
93
|
light: {
|
|
95
94
|
palette: {
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import { a as e,
|
|
2
|
-
|
|
3
|
-
export { f as blue, s as brand, b as colorSchemes, u as gray, i as green, g as interaction, e as lightBlue, c as lightBrand, d as lightGray, t as lightGreen, a as lightOrange, p as lightPurple, n as lightRed, r as orange, l as purple, v as radius, o as red, h as shadows, m as shape, _ as sxConfig, y as typography };
|
|
1
|
+
import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../theme-primitives-CRfnMsNy.js";
|
|
2
|
+
export { o as colorSchemes, n as interaction, i as radius, t as shadows, e as shape, r as sxConfig, a as typography };
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"registry": "https://registry.npmjs.org"
|
|
5
5
|
},
|
|
6
|
-
"version": "2.0.
|
|
6
|
+
"version": "2.0.6",
|
|
7
7
|
"description": "advanced ui kit for solostylist",
|
|
8
8
|
"type": "module",
|
|
9
9
|
"main": "dist/main.js",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"sync:peers": "node scripts/sync-peer-deps.mjs",
|
|
64
64
|
"upgrade": "yarn upgrade-interactive && yarn sync:peers",
|
|
65
65
|
"prepare": "husky",
|
|
66
|
-
"app:publish": "yarn workspace @solostylist/core build && yarn sync:peers && yarn build && yarn npm publish --access public"
|
|
66
|
+
"app:publish": "yarn workspace @solostylist/core build && yarn sync:peers && yarn build && node ../../scripts/check-core-contract.mjs && yarn npm publish --access public"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
69
|
"@emotion/cache": "^11.14.0",
|
|
@@ -245,6 +245,6 @@
|
|
|
245
245
|
"author": "Lê Đặng Trường Đạt",
|
|
246
246
|
"license": "ISC",
|
|
247
247
|
"dependencies": {
|
|
248
|
-
"@solostylist/core": "^1.0.
|
|
248
|
+
"@solostylist/core": "^1.0.6"
|
|
249
249
|
}
|
|
250
250
|
}
|