@solostylist/ui-kit 2.0.1 → 2.0.2

package/dist/s-stripe/s-stripe.js

@@ -1,10 +1,11 @@
-import { STextField as e } from "../s-text-field/s-text-field.js";
-import t from "./stripe-input.js";
-import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
+import { t as n } from "../s-text-field-HYyDf1Jo.js";
+import r from "./stripe-input.js";
 import * as i from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region lib/s-stripe/s-stripe.tsx
-var o = n(e, {
+var o = e(n, {
 	name: "StripeTextField",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -16,7 +17,7 @@ function s(...e) {
 	};
 }
 var c = i.forwardRef((e, n) => {
-	let i = r({
+	let i = t({
 		props: e,
 		name: "StripeTextField"
 	}), { disabled: c = !1, error: l = !1, helperText: u, inputProps: d, labelErrorMessage: f, onChange: p, onReady: m, slotProps: h, stripeElement: g, ..._ } = i, v = {
@@ -27,16 +28,16 @@ var c = i.forwardRef((e, n) => {
 		...typeof h?.inputLabel == "function" ? h.inputLabel(e) : h?.inputLabel,
 		shrink: !0
 	}), b = (e) => {
-		let n = typeof h?.input == "function" ? h.input(e) : h?.input, r = n?.inputProps ?? {}, i = {
+		let t = typeof h?.input == "function" ? h.input(e) : h?.input, n = t?.inputProps ?? {}, i = {
 			...d,
-			...r,
+			...n,
 			component: g,
-			onChange: s(p, d?.onChange, r.onChange),
-			onReady: s(m, d?.onReady, r.onReady)
+			onChange: s(p, d?.onChange, n.onChange),
+			onReady: s(m, d?.onReady, n.onReady)
 		};
 		return {
-			...n,
-			inputComponent: t,
+			...t,
+			inputComponent: r,
 			inputProps: i
 		};
 	};

package/dist/s-stripe/stripe-input.js

@@ -1,8 +1,7 @@
-import { t as e } from "../theme-primitives-CRfnMsNy.js";
+import { t as e } from "../theme-primitives-CXtaMdVj.js";
 import * as t from "react";
 import { jsx as n } from "react/jsx-runtime";
-import "@fontsource/outfit";
-//#region lib/s-stripe/stripe-input.tsx
+import '../assets/stripe-input.css';//#region lib/s-stripe/stripe-input.tsx
 function r(e) {
 	let t = e.match(/^hsl\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)$/i);
 	if (!t) return e;

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

@@ -0,0 +1,3 @@
+export { default, default as SSwatch } from './s-swatch';
+export type { SSwatchAccessibleNameProps, SSwatchBaseProps, SSwatchOwnerState, SSwatchProps, SSwatchShape, SSwatchSize, SSwatchSlotProps, SSwatchSlots, SSwatchVisualProps, } from './s-swatch';
+export type {} from '../theme/component-augmentation';

package/dist/s-swatch/index.js

@@ -0,0 +1,2 @@
+import { SSwatch as e } from "./s-swatch.js";
+export { e as SSwatch, e as default };

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

@@ -0,0 +1,235 @@
+import { BoxProps, ButtonBaseProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Named swatch sizes, or an explicit pixel edge length. */
+export type SSwatchSize = 'small' | 'medium' | 'large' | number;
+/** Outline geometry of the swatch. */
+export type SSwatchShape = 'square' | 'circle';
+export interface SSwatchSlots {
+    /** Image element rendered inside the swatch when `image` is set. */
+    image?: React.ElementType;
+    /** Selection marker rendered when `selected` is true. */
+    indicator?: React.ElementType;
+    /** Interactive `ButtonBase` wrapper. */
+    root?: React.ElementType;
+    /** Diagonal line rendered when `unavailable` is true. */
+    strikethrough?: React.ElementType;
+    /** Element carrying the color fill or the image background. */
+    swatch?: React.ElementType;
+}
+export interface SSwatchSlotProps {
+    /** Props or owner-state callback for the image slot. */
+    image?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSwatchOwnerState>;
+    /** Props or owner-state callback for the indicator slot. */
+    indicator?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSwatchOwnerState>;
+    /** Props or owner-state callback for the root slot. */
+    root?: MuiOwnerStateSlotProps<Omit<ButtonBaseProps, 'children'>, SSwatchOwnerState>;
+    /** Props or owner-state callback for the strikethrough slot. */
+    strikethrough?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSwatchOwnerState>;
+    /** Props or owner-state callback for the swatch slot. */
+    swatch?: MuiOwnerStateSlotProps<Omit<BoxProps, 'children'>, SSwatchOwnerState>;
+}
+/** Visual data accepted by SSwatch. A secondary color always requires a primary color. */
+export type SSwatchVisualProps = {
+    /**
+     * Fill of the swatch. This is consumer data (an arbitrary CSS color), so it is
+     * passed straight through — every ring, marker and strike around it is themed.
+     */
+    color: string;
+    /** Optional second fill rendered across the same diagonal as the unavailable strike. */
+    colorSecondary?: string;
+    /** Optional image URL rendered over `color`, which remains as its visual fallback. */
+    image?: string;
+} | {
+    color?: never;
+    colorSecondary?: never;
+    /** Image URL rendered as the swatch fill. */
+    image: string;
+};
+/** Accessible-name sources accepted by an interactive SSwatch. */
+export type SSwatchAccessibleNameProps = {
+    /** Explicit accessible name. */
+    'aria-label': string;
+    'aria-labelledby'?: string;
+    label?: string;
+    value?: string;
+} | {
+    'aria-label'?: string;
+    /** ID of an element that provides the accessible name. */
+    'aria-labelledby': string;
+    label?: string;
+    value?: string;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Human-readable swatch name used as its accessible name. */
+    label: string;
+    value?: string;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    label?: string;
+    /** Human-readable option value used as the accessible name when `label` is omitted. */
+    value: string;
+};
+/** Shared behavioral props for a selectable swatch built on MUI ButtonBase. */
+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.
+     */
+    interactive?: boolean;
+    /** Marks the swatch as the current selection. */
+    selected?: boolean;
+    /** Outline geometry of the swatch. */
+    shape?: SSwatchShape;
+    /** Named size, or an explicit pixel edge length. */
+    size?: SSwatchSize;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SSwatchSlotProps;
+    /** Components used for internal structural slots. */
+    slots?: SSwatchSlots;
+    /**
+     * Out-of-stock treatment: the swatch stays operable but is struck through and
+     * dimmed by a scrim, which is visually distinct from `disabled`.
+     */
+    unavailable?: boolean;
+    /** Appended to the accessible name while `unavailable` is true. */
+    unavailableText?: string;
+}
+/** Props for a selectable color or image swatch built on MUI ButtonBase. */
+export type SSwatchProps = SSwatchAccessibleNameProps & SSwatchBaseProps & SSwatchVisualProps;
+export type SSwatchOwnerState = SSwatchProps & {
+    /** Root size for fine pointers. */
+    controlSize: number;
+    /** Root size for coarse pointers. */
+    coarseControlSize: number;
+    disabled: boolean;
+    interactive: boolean;
+    selected: boolean;
+    shape: SSwatchShape;
+    size: SSwatchSize;
+    /** `size` resolved to pixels. */
+    swatchSize: number;
+    unavailable: boolean;
+};
+/**
+ * Themeable color or image option built on MUI ButtonBase. Every swatch requires
+ * both a visual (`color` or `image`) and an accessible name (`label`,
+ * `aria-label`, `aria-labelledby`, or a human-readable `value`).
+ *
+ * Interactive swatches reserve an internal pointer target appropriate to the
+ * current input modality. Presentational swatches (`interactive={false}`) fit
+ * their visual exactly and do not render button semantics.
+ */
+export declare const SSwatch: React.ForwardRefExoticComponent<(Omit<{
+    /** Explicit accessible name. */
+    'aria-label': string;
+    'aria-labelledby'?: string;
+    label?: string;
+    value?: string;
+} & SSwatchBaseProps & {
+    /**
+     * Fill of the swatch. This is consumer data (an arbitrary CSS color), so it is
+     * passed straight through — every ring, marker and strike around it is themed.
+     */
+    color: string;
+    /** Optional second fill rendered across the same diagonal as the unavailable strike. */
+    colorSecondary?: string;
+    /** Optional image URL rendered over `color`, which remains as its visual fallback. */
+    image?: string;
+}, "ref"> | Omit<{
+    /** Explicit accessible name. */
+    'aria-label': string;
+    'aria-labelledby'?: string;
+    label?: string;
+    value?: string;
+} & SSwatchBaseProps & {
+    color?: never;
+    colorSecondary?: never;
+    /** Image URL rendered as the swatch fill. */
+    image: string;
+}, "ref"> | Omit<{
+    'aria-label'?: string;
+    /** ID of an element that provides the accessible name. */
+    'aria-labelledby': string;
+    label?: string;
+    value?: string;
+} & SSwatchBaseProps & {
+    /**
+     * Fill of the swatch. This is consumer data (an arbitrary CSS color), so it is
+     * passed straight through — every ring, marker and strike around it is themed.
+     */
+    color: string;
+    /** Optional second fill rendered across the same diagonal as the unavailable strike. */
+    colorSecondary?: string;
+    /** Optional image URL rendered over `color`, which remains as its visual fallback. */
+    image?: string;
+}, "ref"> | Omit<{
+    'aria-label'?: string;
+    /** ID of an element that provides the accessible name. */
+    'aria-labelledby': string;
+    label?: string;
+    value?: string;
+} & SSwatchBaseProps & {
+    color?: never;
+    colorSecondary?: never;
+    /** Image URL rendered as the swatch fill. */
+    image: string;
+}, "ref"> | Omit<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Human-readable swatch name used as its accessible name. */
+    label: string;
+    value?: string;
+} & SSwatchBaseProps & {
+    /**
+     * Fill of the swatch. This is consumer data (an arbitrary CSS color), so it is
+     * passed straight through — every ring, marker and strike around it is themed.
+     */
+    color: string;
+    /** Optional second fill rendered across the same diagonal as the unavailable strike. */
+    colorSecondary?: string;
+    /** Optional image URL rendered over `color`, which remains as its visual fallback. */
+    image?: string;
+}, "ref"> | Omit<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Human-readable swatch name used as its accessible name. */
+    label: string;
+    value?: string;
+} & SSwatchBaseProps & {
+    color?: never;
+    colorSecondary?: never;
+    /** Image URL rendered as the swatch fill. */
+    image: string;
+}, "ref"> | Omit<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    label?: string;
+    /** Human-readable option value used as the accessible name when `label` is omitted. */
+    value: string;
+} & SSwatchBaseProps & {
+    /**
+     * Fill of the swatch. This is consumer data (an arbitrary CSS color), so it is
+     * passed straight through — every ring, marker and strike around it is themed.
+     */
+    color: string;
+    /** Optional second fill rendered across the same diagonal as the unavailable strike. */
+    colorSecondary?: string;
+    /** Optional image URL rendered over `color`, which remains as its visual fallback. */
+    image?: string;
+}, "ref"> | Omit<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    label?: string;
+    /** Human-readable option value used as the accessible name when `label` is omitted. */
+    value: string;
+} & SSwatchBaseProps & {
+    color?: never;
+    colorSecondary?: never;
+    /** Image URL rendered as the swatch fill. */
+    image: string;
+}, "ref">) & React.RefAttributes<HTMLElement>>;
+export default SSwatch;

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

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

package/dist/s-switch/index.js

@@ -1,2 +1,2 @@
-import { SSwitch as e } from "./s-switch.js";
+import { t as e } from "../s-switch-BCeBoxWf.js";
 export { e as SSwitch, e as default };

package/dist/s-switch/s-switch.js

@@ -1,48 +1,2 @@
-import { styled as e, useThemeProps as t } from "@mui/material/styles";
-import n from "@mui/material/Switch";
-import * as r from "react";
-import { jsx as i } from "react/jsx-runtime";
-import a from "@mui/utils/appendOwnerState";
-import o, { formControlLabelClasses as s } from "@mui/material/FormControlLabel";
-//#region lib/s-switch/s-switch.tsx
-var c = e(o, {
-	name: "SSwitch",
-	slot: "Root",
-	shouldForwardProp: (e) => e !== "ownerState"
-})(({ theme: e }) => ({
-	display: "flex",
-	justifyContent: "space-between",
-	margin: 0,
-	userSelect: "none",
-	[`&&.${s.disabled}`]: { cursor: "not-allowed" },
-	[`&& .${s.label}.${s.disabled}`]: { color: (e.vars ?? e).palette.text.disabled }
-}));
-function l(e, t) {
-	return typeof e == "function" ? e(t) : e;
-}
-var u = r.forwardRef(function(e, r) {
-	let o = t({
-		props: e,
-		name: "SSwitch"
-	}), { disabled: s = !1, label: u, labelPlacement: d = "start", required: f = !1, slotProps: p, slots: m, ...h } = o, g = {
-		...o,
-		disabled: s,
-		labelPlacement: d,
-		required: f
-	}, _ = m?.control ?? n, v = l(p?.control, g), y = a(m?.control, v ?? {}, g);
-	return /* @__PURE__ */ i(c, {
-		...h,
-		control: /* @__PURE__ */ i(_, { ...y }),
-		disabled: s,
-		label: u,
-		labelPlacement: d,
-		ownerState: g,
-		ref: r,
-		required: f,
-		slots: m?.typography ? { typography: m.typography } : void 0,
-		slotProps: p?.typography ? { typography: p.typography } : void 0
-	});
-});
-u.displayName = "SSwitch";
-//#endregion
-export { u as SSwitch, u as default };
+import { t as e } from "../s-switch-BCeBoxWf.js";
+export { e as SSwitch, e as default };