@solostylist/ui-kit 2.0.5 → 2.0.6

package/dist/s-icon-button/index.d.ts

@@ -1,3 +1,3 @@
 export { default, default as SIconButton } from './s-icon-button';
-export type { SIconButtonOwnerState, SIconButtonProps, SIconButtonSlotProps, SIconButtonSlots, SIconButtonVariant, } from './s-icon-button';
+export type { SIconButtonAccessibleNameProps, SIconButtonBaseProps, SIconButtonOwnerState, SIconButtonProps, SIconButtonSlotProps, SIconButtonSlots, SIconButtonVariant, } from './s-icon-button';
 export type {} from '../theme/component-augmentation';

package/dist/s-icon-button/s-icon-button.d.ts

@@ -17,20 +17,48 @@ export interface SIconButtonSlotProps {
     /** Props or an owner-state callback for the tooltip slot. */
     tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children' | 'title'>>;
 }
+/**
+ * An icon carries no text, so every button needs a name: either an explicit
+ * `aria-label` / `aria-labelledby`, or a string `tooltip` the button falls back to.
+ */
+export type SIconButtonAccessibleNameProps = {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+    tooltip?: React.ReactNode;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby': string;
+    tooltip?: React.ReactNode;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    tooltip: string;
+};
 /**
  * MUI IconButton with an optional tooltip slot. Setting `href` makes the
  * underlying ButtonBase render an anchor, so icon-only links keep the button
  * hit target and hover state.
  */
-export interface SIconButtonProps extends Omit<IconButtonProps, 'component'>, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'> {
+export interface SIconButtonBaseProps extends Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'component'>, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'> {
     /** Components used for internal slots. */
     slots?: SIconButtonSlots;
     /** Props or owner-state callbacks for internal slots. */
     slotProps?: SIconButtonSlotProps;
-    /** Optional tooltip title. */
-    tooltip?: React.ReactNode;
     /** Visual treatment for icon buttons displayed over another surface. */
     variant?: SIconButtonVariant;
 }
-export declare const SIconButton: React.ForwardRefExoticComponent<Omit<SIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type SIconButtonProps = SIconButtonBaseProps & SIconButtonAccessibleNameProps;
+export declare const SIconButton: React.ForwardRefExoticComponent<(Omit<SIconButtonBaseProps & {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+    tooltip?: React.ReactNode;
+}, "ref"> | Omit<SIconButtonBaseProps & {
+    'aria-label'?: string;
+    'aria-labelledby': string;
+    tooltip?: React.ReactNode;
+}, "ref"> | Omit<SIconButtonBaseProps & {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    tooltip: string;
+}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 export default SIconButton;

package/dist/s-icon-button/s-icon-button.js

@@ -1,11 +1,12 @@
-import { styled as e, useThemeProps as t } from "@mui/material/styles";
-import n from "@mui/material/IconButton";
-import * as r from "react";
-import { jsx as i } from "react/jsx-runtime";
-import a from "@mui/utils/appendOwnerState";
-import o from "@mui/material/Tooltip";
+import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import r from "@mui/material/IconButton";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "@mui/utils/appendOwnerState";
+import s from "@mui/material/Tooltip";
 //#region lib/s-icon-button/s-icon-button.tsx
-var s = e(n, {
+var c = t(r, {
 	name: "SIconButton",
 	slot: "Root"
 })(({ theme: e, ownerState: t }) => {
@@ -16,32 +17,30 @@ var s = e(n, {
 		backgroundColor: n.blackAlpha.medium,
 		boxShadow: e.shadows[1],
 		color: n.common.white,
+		"&:active": { backgroundColor: n.blackAlpha.dark },
 		"@media (hover: hover) and (pointer: fine)": { "&:hover": { backgroundColor: n.blackAlpha.dark } }
 	};
-});
-function c(e, t) {
-	return typeof e == "function" ? e(t) : e;
-}
-var l = r.forwardRef(function(e, n) {
-	let r = t({
-		props: e,
+}), l = i.forwardRef(function(t, r) {
+	let i = n({
+		props: t,
 		name: "SIconButton"
-	}), { disabled: l = !1, slotProps: u, slots: d, tooltip: f, variant: p, ...m } = r, h = {
-		...r,
-		disabled: l,
-		hasTooltip: f != null,
-		variant: p
-	}, g = d?.tooltip ?? o, _ = a(d?.tooltip, c(u?.tooltip, h) ?? {}, h), v = m["aria-label"] ?? (typeof f == "string" ? f : void 0), y = /* @__PURE__ */ i(s, {
-		...m,
-		"aria-label": v,
+	}), { disabled: l = !1, loading: u, slotProps: d, slots: f, tooltip: p, variant: m, ...h } = i, g = l || u === !0, _ = {
+		...i,
+		disabled: g,
+		hasTooltip: p != null,
+		variant: m
+	}, 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, {
+		...h,
+		"aria-label": b,
 		disabled: l,
-		ownerState: h,
-		ref: n
+		loading: u,
+		ownerState: _,
+		ref: r
 	});
-	return f == null ? y : /* @__PURE__ */ i(g, {
-		..._,
-		title: f,
-		children: l ? /* @__PURE__ */ i("span", { children: y }) : y
+	return p == null ? x : /* @__PURE__ */ a(v, {
+		...y,
+		title: p,
+		children: g ? /* @__PURE__ */ a("span", { children: x }) : x
 	});
 });
 l.displayName = "SIconButton";

package/dist/s-list-action-item/s-list-action-item.js

@@ -70,7 +70,8 @@ var g = 44, _ = 36, v = d(l, {
 	display: "block",
 	minWidth: 0,
 	overflow: "hidden",
-	textOverflow: "ellipsis"
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
 }), S = d(u, {
 	name: "SListActionItem",
 	slot: "Description",
@@ -80,7 +81,8 @@ var g = 44, _ = 36, v = d(l, {
 	display: "block",
 	minWidth: 0,
 	overflow: "hidden",
-	textOverflow: "ellipsis"
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
 })), C = d(c, {
 	name: "SListActionItem",
 	slot: "Trailing",

package/dist/s-number-range/s-number-range.js

@@ -40,6 +40,7 @@ var p = (e, t, n) => Math.min(Math.max(e, t), n), m = (e, t, n) => {
 	color: (e.vars ?? e).palette.text.primary,
 	fontWeight: 600,
 	margin: 0,
+	marginBlockEnd: e.spacing(1),
 	padding: 0
 })), oe = c(s, {
 	name: "SNumberRange",
@@ -58,7 +59,7 @@ var p = (e, t, n) => Math.min(Math.max(e, t), n), m = (e, t, n) => {
 		[`& .${f.track}`]: { border: 0 },
 		[`& .${f.thumb}`]: {
 			border: `2px solid ${(e.vars ?? e).palette.background.paper}`,
-			boxShadow: `0 0 0 1px ${(e.vars ?? e).palette[t.color].main}`,
+			boxShadow: "0 0 0 1px currentColor",
 			height: n ? 14 : 18,
 			width: n ? 14 : 18,
 			[`&:hover, &.${f.focusVisible}`]: { boxShadow: `0 0 0 6px ${(e.vars ?? e).palette.action.selected}` }

package/dist/s-segmented-control/s-segmented-control.js

@@ -50,33 +50,27 @@ var x = [
 	name: "SSegmentedControl",
 	slot: "Indicator",
 	shouldForwardProp: (e) => e !== "ownerState"
-})(({ theme: e }) => {
-	let t = (e.vars ?? e).palette, n = i(e, "primary");
+})(({ ownerState: e, theme: t }) => {
+	let n = (t.vars ?? t).palette, r = i(t, "primary"), a = e.disabled || e.selectedDisabled;
 	return {
-		backgroundColor: n.light.containedBackground,
-		borderRadius: e.radius.full,
+		backgroundColor: a ? n.action.disabledBackground : r.light.containedBackground,
+		borderRadius: t.radius.full,
+		boxShadow: a ? "none" : void 0,
 		left: 0,
 		pointerEvents: "none",
 		position: "absolute",
 		top: 0,
-		transition: e.transitions.create([
+		transition: t.transitions.create([
 			"height",
 			"opacity",
 			"transform",
 			"width"
 		], {
-			duration: e.transitions.duration.standard,
-			easing: e.transitions.easing.easeInOut
+			duration: t.transitions.duration.standard,
+			easing: t.transitions.easing.easeInOut
 		}),
 		zIndex: 0,
-		...e.applyStyles("dark", { backgroundColor: n.dark.containedBackground }),
-		variants: [{
-			props: ({ ownerState: e }) => e.disabled || e.selectedDisabled,
-			style: {
-				backgroundColor: t.action.disabledBackground,
-				boxShadow: "none"
-			}
-		}],
+		...t.applyStyles("dark", { backgroundColor: a ? n.action.disabledBackground : r.dark.containedBackground }),
 		"@media (prefers-reduced-motion: reduce)": { transition: "none" }
 	};
 }), T = p(d, {

package/dist/s-swatch/s-swatch.d.ts

@@ -76,8 +76,9 @@ export type SSwatchAccessibleNameProps = {
 export interface SSwatchBaseProps extends Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'children' | 'color' | 'value'> {
     /**
      * Whether the swatch is an interactive option. Set to `false` for a
-     * presentational swatch; its root then fits the visual and has no button,
-     * ripple, focus, or pressed semantics.
+     * presentational swatch; its root then fits the visual, has no button,
+     * ripple, focus, or pressed semantics, and ignores every `onClick`,
+     * `slotProps.root` included.
      */
     interactive?: boolean;
     /** Marks the swatch as the current selection. */

package/dist/s-swatch/s-swatch.js

@@ -1,19 +1,19 @@
 import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
-import { getFocusVisibleStyle as t } from "../theme/components/action-styles.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a, ButtonBase as o, styled as s, useThemeProps as c } from "@mui/material";
-import { mergeSlotProps as l, useForkRef as u } from "@mui/material/utils";
-import d from "@mui/utils/appendOwnerState";
+import { getFocusVisibleStyle as t, reducedPressMotionStyle as n } from "../theme/components/action-styles.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, ButtonBase as s, styled as c, useThemeProps as l } from "@mui/material";
+import { mergeSlotProps as u, useForkRef as d } from "@mui/material/utils";
+import f from "@mui/utils/appendOwnerState";
 //#region lib/s-swatch/s-swatch.tsx
-var f = {
+var p = {
 	small: 22,
 	medium: 32,
 	large: 44
-}, p = 24, m = 44, h = "@media (pointer: coarse)", g = 45, _ = (e) => Math.max(1, typeof e == "number" ? e : f[e]), v = ({ ownerState: e, theme: n }) => ({
+}, 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 }) => ({
 	alignItems: "center",
 	backgroundColor: "transparent",
-	borderRadius: n.radius.sm,
+	borderRadius: r.radius.sm,
 	boxSizing: "border-box",
 	cursor: e.interactive ? "pointer" : "default",
 	display: "inline-flex",
@@ -22,7 +22,7 @@ var f = {
 	justifyContent: "center",
 	padding: 0,
 	position: "relative",
-	transition: n.transitions.create("opacity", { duration: n.transitions.duration.shorter }),
+	transition: r.transitions.create("opacity", { duration: r.transitions.duration.shorter }),
 	width: e.controlSize,
 	...e.interactive ? {
 		"& .MuiTouchRipple-root": {
@@ -34,7 +34,7 @@ var f = {
 			zIndex: 1
 		},
 		"&.Mui-focusVisible::after": {
-			...t(n),
+			...t(r),
 			borderRadius: "inherit",
 			content: "\"\"",
 			height: e.swatchSize,
@@ -47,7 +47,7 @@ var f = {
 			zIndex: 4
 		},
 		"&.Mui-disabled": { cursor: "not-allowed" },
-		[h]: {
+		[g]: {
 			flex: `0 0 ${e.coarseControlSize}px`,
 			height: e.coarseControlSize,
 			width: e.coarseControlSize
@@ -55,21 +55,21 @@ var f = {
 	} : void 0,
 	variants: [{
 		props: ({ ownerState: e }) => e.shape === "circle",
-		style: { borderRadius: n.radius.full }
+		style: { borderRadius: r.radius.full }
 	}, {
 		props: ({ ownerState: e }) => e.disabled,
-		style: { opacity: (n.vars ?? n).palette.action.disabledOpacity }
+		style: { opacity: (r.vars ?? r).palette.action.disabledOpacity }
 	}],
-	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-}), y = s(o, {
+	...n
+}), b = c(s, {
 	name: "SSwatch",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
-})(v), b = s(a, {
+})(y), x = c(o, {
 	name: "SSwatch",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
-})(v), x = s(a, {
+})(y), S = c(o, {
 	name: "SSwatch",
 	slot: "Swatch",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -77,14 +77,14 @@ var f = {
 	backgroundColor: (t.vars ?? t).palette.background.paper,
 	backgroundPosition: "center",
 	backgroundSize: "cover",
+	border: `1px solid ${(t.vars ?? t).palette.divider}`,
 	borderRadius: "inherit",
-	boxShadow: `inset 0 0 0 1px ${(t.vars ?? t).palette.divider}`,
 	boxSizing: "border-box",
 	flex: "0 0 auto",
 	height: e.swatchSize,
 	overflow: "hidden",
 	position: "relative",
-	transition: t.transitions.create(["box-shadow", "filter"], { duration: t.transitions.duration.shorter }),
+	transition: t.transitions.create(["border-color", "filter"], { duration: t.transitions.duration.shorter }),
 	width: e.swatchSize,
 	zIndex: 0,
 	variants: [
@@ -94,7 +94,10 @@ var f = {
 		},
 		{
 			props: ({ ownerState: e }) => e.selected,
-			style: { boxShadow: `inset 0 0 0 2px ${(t.vars ?? t).palette.primary.main}` }
+			style: {
+				borderColor: (t.vars ?? t).palette.primary.main,
+				borderWidth: 2
+			}
 		},
 		{
 			props: ({ ownerState: e }) => e.unavailable,
@@ -112,7 +115,7 @@ var f = {
 		}
 	],
 	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-})), S = s(a, {
+})), C = c(o, {
 	name: "SSwatch",
 	slot: "Image",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -125,7 +128,7 @@ var f = {
 	objectPosition: "center",
 	position: "absolute",
 	width: "100%"
-}), C = s(a, {
+}), w = c(o, {
 	name: "SSwatch",
 	slot: "Indicator",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -141,7 +144,7 @@ var f = {
 	transform: "translate(-50%, -50%)",
 	width: Math.max(6, Math.round(e.swatchSize * .3)),
 	zIndex: 3
-})), w = s(a, {
+})), T = c(o, {
 	name: "SSwatch",
 	slot: "Strikethrough",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -153,66 +156,69 @@ var f = {
 	pointerEvents: "none",
 	position: "absolute",
 	top: "50%",
-	transform: `translate(-50%, -50%) rotate(-${g}deg)`,
+	transform: `translate(-50%, -50%) rotate(-${_}deg)`,
 	transformOrigin: "center",
 	width: "141.421%",
 	zIndex: 2
-})), T = n.forwardRef(function(t, n) {
-	let a = c({
+})), E = r.forwardRef(function(t, n) {
+	let r = l({
 		props: t,
 		name: "SSwatch"
-	}), { "aria-label": o, "aria-labelledby": s, color: f, colorSecondary: h, disabled: v = !1, image: T, 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 } = a, L = _(A), R = E ? Math.max(L, p) : L, z = {
-		...a,
-		coarseControlSize: E ? Math.max(L, m) : L,
+	}), { "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 = {
+		...r,
+		coarseControlSize: E ? Math.max(L, h) : L,
 		controlSize: R,
-		disabled: v,
+		disabled: g,
 		interactive: E,
 		selected: O,
 		shape: k,
 		size: A,
 		swatchSize: L,
 		unavailable: N
-	}, B = M?.root ?? (E ? y : b), V = M?.swatch ?? x, H = M?.image ?? S, U = M?.indicator ?? C, W = M?.strikethrough ?? w, G = [o ?? D ?? F, N ? P : void 0].filter(Boolean).join(", "), { ref: K, ...q } = d(B, l(e(j?.root, z), E ? {
+	}, 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 ? {
 		...I,
 		"aria-label": s ? void 0 : G || void 0,
 		"aria-labelledby": s,
 		"aria-pressed": O,
-		disabled: v
+		disabled: g
 	} : {
 		component: "span",
 		role: "img",
 		...I,
 		"aria-label": s ? void 0 : G || void 0,
 		"aria-labelledby": s
-	}), z), J = u(K, n), { style: Y, ...X } = e(j?.swatch, z) ?? {}, Z = d(V, X, z), Q = d(H, e(j?.image, z) ?? {}, z), $ = d(U, e(j?.indicator, z) ?? {}, z), ee = d(W, e(j?.strikethrough, z) ?? {}, z);
-	return /* @__PURE__ */ i(B, {
-		...q,
-		ref: J,
-		children: [/* @__PURE__ */ i(V, {
+	}), { ref: q, ...J } = f(B, E ? K : {
+		...K,
+		onClick: void 0
+	}, 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);
+	return /* @__PURE__ */ a(B, {
+		...J,
+		ref: Y,
+		children: [/* @__PURE__ */ a(V, {
 			component: "span",
-			...Z,
+			...Q,
 			style: {
-				backgroundColor: f,
-				backgroundImage: h ? `linear-gradient(${180 - g}deg, ${f} 0 50%, ${h} 50% 100%)` : void 0,
-				...Y
+				backgroundColor: c,
+				backgroundImage: p ? `linear-gradient(${180 - _}deg, ${c} 0 50%, ${p} 50% 100%)` : void 0,
+				...X
 			},
-			children: [T ? /* @__PURE__ */ r(H, {
+			children: [y ? /* @__PURE__ */ i(H, {
 				alt: "",
 				component: "img",
-				...Q,
-				src: T
-			}) : null, N ? /* @__PURE__ */ r(W, {
+				...$,
+				src: y
+			}) : null, N ? /* @__PURE__ */ i(W, {
 				"aria-hidden": !0,
 				component: "span",
-				...ee
+				...te
 			}) : null]
-		}), O ? /* @__PURE__ */ r(U, {
+		}), O ? /* @__PURE__ */ i(U, {
 			"aria-hidden": !0,
 			component: "span",
-			...$
+			...ee
 		}) : null]
 	});
 });
-T.displayName = "SSwatch";
+E.displayName = "SSwatch";
 //#endregion
-export { T as SSwatch, T as default };
+export { E as SSwatch, E as default };

package/dist/theme/theme-primitives.d.ts

@@ -1,5 +1,5 @@
 import { Shadows } from '@mui/material/styles';
-import { blue, brand, darkGradientPalette, gray, green, lightBlue, lightBrand, lightGray, lightGreen, lightOrange, lightPurple, lightRed, orange, purple, red, GradientPath } from '@solostylist/core';
+import { darkGradientPalette, GradientPath } from '@solostylist/core';
 declare module '@mui/material/Paper' {
     interface PaperPropsVariantOverrides {
         highlighted: true;
@@ -89,7 +89,6 @@ export declare const sxConfig: {
         cssProperty: "backgroundImage";
     };
 };
-export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, };
 export declare const colorSchemes: {
     light: {
         palette: {

package/dist/theme/theme-primitives.js

@@ -1,3 +1,2 @@
-import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "../colors-CNjL5fhq.js";
-import { a as m, i as h, n as g, o as _, r as v, s as y, t as b } from "../theme-primitives-CRfnMsNy.js";
-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 };
+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";
+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

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "advanced ui kit for solostylist",
   "type": "module",
   "main": "dist/main.js",
@@ -245,6 +245,6 @@
   "author": "Lê Đặng Trường Đạt",
   "license": "ISC",
   "dependencies": {
-    "@solostylist/core": "^1.0.4"
+    "@solostylist/core": "^1.0.6"
   }
 }