@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/s-copyable-text/s-copyable-text.d.ts

@@ -1,19 +1,36 @@
-import { PaperProps, TypographyProps } from '@mui/material';
-/**
- * Props interface for SCopyableText component
- */
-export interface SCopyableTextProps {
-    /** The text content to display and copy */
-    text?: string;
-    /** Props to pass to the Typography component for styling */
-    typographyProps?: TypographyProps;
-    /** Callback function triggered after text is successfully copied */
-    onCopied?: () => void;
-    /** Props to pass to the Paper component container */
-    paperProps?: PaperProps;
+import { BoxProps, IconButtonProps, PaperProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SCopyableTextOwnerState {
+    copied: boolean;
 }
-export declare const SCopyableText: {
-    ({ text, typographyProps, onCopied, paperProps }: SCopyableTextProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SCopyableTextOwnerState>;
+export interface SCopyableTextSlots {
+    button?: React.ElementType;
+    content?: React.ElementType;
+    text?: React.ElementType;
+}
+export interface SCopyableTextSlotProps {
+    button?: OwnerStateSlotProps<IconButtonProps>;
+    content?: OwnerStateSlotProps<BoxProps>;
+    text?: OwnerStateSlotProps<TypographyProps>;
+}
+/** Props for copyable text rendered in a MUI Paper root. */
+export interface SCopyableTextProps extends Omit<PaperProps, 'children' | 'component' | 'onCopy'> {
+    /** Accessible label after a successful copy. */
+    copiedText?: string;
+    /** Accessible label before copying. */
+    copyText?: string;
+    /** Called when the Clipboard API rejects. */
+    onCopyError?: (error: unknown) => void;
+    /** Called after text is copied successfully. */
+    onCopySuccess?: (text: string) => void;
+    /** Components used for internal structural slots. */
+    slots?: SCopyableTextSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SCopyableTextSlotProps;
+    /** Text displayed and copied. */
+    children: string;
+}
+export declare const SCopyableText: React.ForwardRefExoticComponent<Omit<SCopyableTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SCopyableText;

package/dist/s-copyable-text/s-copyable-text.js

@@ -1,48 +1,70 @@
-import { n as e, t } from "../ContentCopy-BMQ2JTA0.js";
-import { useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a, IconButton as o, Paper as s, Typography as c } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { t } from "../appendOwnerState-CELpvdMz.js";
+import { n, t as r } from "../ContentCopy-5unyTYXy.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Box as s, IconButton as c, Paper as l, Typography as u, styled as d, useThemeProps as f } from "@mui/material";
 //#region lib/s-copyable-text/s-copyable-text.tsx
-var l = ({ text: l, typographyProps: u, onCopied: d, paperProps: f }) => {
-	let [p, m] = n(!1), { sx: h, ...g } = u ?? {}, _ = async () => {
-		if (l) try {
-			await navigator.clipboard.writeText(l), m(!0), setTimeout(() => m(!1), 2e3), d?.();
+var p = d(l, {
+	name: "SCopyableText",
+	slot: "Root"
+})({});
+function m(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var h = i.forwardRef(function(l, d) {
+	let h = f({
+		props: l,
+		name: "SCopyableText"
+	}), { children: g, copiedText: _ = "Copied", copyText: v = "Copy text", onCopyError: y, onCopySuccess: b, slotProps: x, slots: S, sx: C, ...w } = h, [T, E] = i.useState(!1), D = i.useRef(void 0), O = {
+		...h,
+		copied: T
+	}, k = S?.content ?? s, A = S?.text ?? u, j = S?.button ?? c, M = m(x?.content, O), N = m(x?.text, O), P = m(x?.button, O), F = t(S?.content, M ?? {}, O), I = t(S?.text, N ?? {}, O), { onClick: L, sx: R, ...z } = t(S?.button, P ?? {}, O), { sx: B, ...V } = F, { sx: H, ...U } = I;
+	i.useEffect(() => () => clearTimeout(D.current), []);
+	let W = async (e) => {
+		if (L?.(e), !e.defaultPrevented) try {
+			await navigator.clipboard.writeText(g), E(!0), clearTimeout(D.current), D.current = setTimeout(() => E(!1), 2e3), b?.(g);
 		} catch (e) {
-			console.error("Failed to copy text:", e);
+			y?.(e);
 		}
 	};
-	return l ? /* @__PURE__ */ r(s, {
-		sx: {
-			p: 2,
+	return /* @__PURE__ */ a(p, {
+		...w,
+		ownerState: O,
+		ref: d,
+		sx: [{
 			border: "1px dashed",
-			borderColor: "divider"
-		},
-		...f,
-		children: /* @__PURE__ */ i(a, {
-			sx: { position: "relative" },
-			children: [/* @__PURE__ */ r(o, {
-				onClick: _,
-				sx: {
+			borderColor: "divider",
+			p: 2
+		}, ...e(C)],
+		children: /* @__PURE__ */ o(k, {
+			...V,
+			sx: [{ position: "relative" }, ...e(B)],
+			children: [/* @__PURE__ */ a(j, {
+				...z,
+				"aria-label": T ? _ : v,
+				onClick: W,
+				sx: [{
+					color: T ? "success.main" : "inherit",
 					position: "absolute",
+					right: 0,
 					top: "50%",
 					transform: "translateY(-50%)",
-					right: 0,
-					zIndex: 1,
-					color: p ? "success.main" : "inherit"
-				},
-				children: r(p ? e : t, {})
-			}), /* @__PURE__ */ r(c, {
+					zIndex: 1
+				}, ...e(R)],
+				children: a(T ? n : r, {})
+			}), /* @__PURE__ */ a(A, {
 				variant: "body1",
-				...g,
+				...U,
 				sx: [{
 					whiteSpace: "pre-wrap",
 					wordBreak: "break-word"
-				}, ...Array.isArray(h) ? h : [h]],
-				children: l
+				}, ...e(H)],
+				children: g
 			})]
 		})
-	}) : null;
-};
-l.displayName = "SCopyableText";
+	});
+});
+h.displayName = "SCopyableText";
 //#endregion
-export { l as SCopyableText, l as default };
+export { h as SCopyableText, h as default };

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

@@ -1,4 +1,5 @@
-export { default as SCountdown } from './s-countdown';
-export type { SCountdownProps } from './s-countdown';
+export { default, default as SCountdown } from './s-countdown';
+export type { SCountdownAnimation, SCountdownColor, SCountdownDigitFormat, SCountdownLayout, SCountdownProps, SCountdownSize, } from './s-countdown';
 export { SCountBox } from './s-count-box';
-export type { SCountBoxProps } from './s-count-box';
+export type { SCountBoxOwnerState, SCountBoxProps, SCountBoxSlotProps, SCountBoxSlots } from './s-count-box';
+export type {} from '../theme/component-augmentation';

package/dist/s-countdown/index.js

@@ -1,3 +1,3 @@
 import { SCountBox as e } from "./s-count-box.js";
 import { SCountdown as t } from "./s-countdown.js";
-export { e as SCountBox, t as SCountdown };
+export { e as SCountBox, t as SCountdown, t as default };

package/dist/s-countdown/s-count-box.d.ts

@@ -1,36 +1,43 @@
-import { default as React } from 'react';
-import { SxProps, Theme } from '@mui/material';
-/**
- * Props interface for SCountBox component
- */
-export interface SCountBoxProps {
-    /** The numeric value to display */
+import { BoxProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SCountBoxOwnerState {
+    color: 'error' | 'info' | 'inherit' | 'primary' | 'secondary' | 'success' | 'warning';
+    size: 'large' | 'medium' | 'small';
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SCountBoxOwnerState>;
+export interface SCountBoxSlots {
+    content?: React.ElementType;
+    digit?: React.ElementType;
+    label?: React.ElementType;
+    separator?: React.ElementType;
+}
+export interface SCountBoxSlotProps {
+    content?: OwnerStateSlotProps<BoxProps>;
+    digit?: OwnerStateSlotProps<TypographyProps>;
+    label?: OwnerStateSlotProps<TypographyProps>;
+    separator?: OwnerStateSlotProps<TypographyProps>;
+}
+/** Props for one animated countdown unit. */
+export interface SCountBoxProps extends Omit<BoxProps, 'children' | 'color' | 'component'> {
+    /** Animation used when the digit changes. */
+    animation?: 'fade' | 'none' | 'slide';
+    /** Palette color for the digit. */
+    color?: SCountBoxOwnerState['color'];
+    /** Numeric value to display. */
     digit: number;
-    /** The label/title for this time unit */
-    title: string;
-    /** Size variant for the count box */
-    size?: 'small' | 'medium' | 'large';
-    /** Color variant for the count box */
-    color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
-    /** Animation type for value changes */
-    animation?: 'none' | 'fade' | 'slide';
-    /** Custom styling */
-    sx?: SxProps<Theme>;
-    /** Custom digit styling */
-    digitSx?: SxProps<Theme>;
-    /** Custom title styling */
-    titleSx?: SxProps<Theme>;
-    /** Show separator after this box */
-    showSeparator?: boolean;
-    /** Custom separator element */
-    separator?: React.ReactNode;
-    /** Format for displaying the digit (e.g., '00' for zero-padding) */
+    /** Digit display format. */
     digitFormat?: 'default' | 'padded';
-    /** Whether this count box is hidden */
-    hidden?: boolean;
+    /** Visible time-unit label. */
+    label: React.ReactNode;
+    /** Optional separator rendered after the unit. */
+    separator?: React.ReactNode;
+    /** Size variant for the digit and label. */
+    size?: SCountBoxOwnerState['size'];
+    /** Components used for internal structural slots. */
+    slots?: SCountBoxSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SCountBoxSlotProps;
 }
-export declare const SCountBox: {
-    ({ digit, title, size, color, animation, sx, digitSx, titleSx, showSeparator, separator, digitFormat, hidden, }: SCountBoxProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+export declare const SCountBox: React.ForwardRefExoticComponent<Omit<SCountBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SCountBox;

package/dist/s-countdown/s-count-box.js

@@ -1,102 +1,119 @@
-import { SFlexBox as e } from "../s-flex-box/s-flex-box.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Fade as r, Slide as i, Typography as a } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { t } from "../appendOwnerState-CELpvdMz.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Box as a, Fade as o, Slide as s, Typography as c, styled as l, useThemeProps as u } from "@mui/material";
 //#region lib/s-countdown/s-count-box.tsx
-var o = ({ digit: o = 0, title: s = "", size: c = "medium", color: l = "inherit", animation: u = "none", sx: d, digitSx: f, titleSx: p, showSeparator: m = !1, separator: h = ":", digitFormat: g = "default", hidden: _ = !1 }) => {
-	if (_) return null;
-	let v = (e) => g === "padded" ? e.toString().padStart(2, "0") : e.toString(), y = (() => {
-		switch (c) {
-			case "small": return {
-				digit: {
-					fontSize: "1.5rem",
-					lineHeight: 1.2
-				},
-				title: {
-					fontSize: "0.75rem",
-					letterSpacing: "0.05em"
-				}
-			};
-			case "large": return {
-				digit: {
-					fontSize: "3.5rem",
-					lineHeight: 1.1
-				},
-				title: {
-					fontSize: "1rem",
-					letterSpacing: "0.1em"
-				}
-			};
-			default: return {
-				digit: {
-					fontSize: "2.5rem",
-					lineHeight: 1.15
-				},
-				title: {
-					fontSize: "0.875rem",
-					letterSpacing: "0.08em"
-				}
-			};
+var d = l(a, {
+	name: "SCountBox",
+	slot: "Root"
+})({});
+function f(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function p(e) {
+	return e === "small" ? {
+		digit: {
+			fontSize: "1.5rem",
+			lineHeight: 1.2
+		},
+		label: {
+			fontSize: "0.75rem",
+			letterSpacing: "0.05em"
 		}
-	})(), b = v(o), x = /* @__PURE__ */ t(a, {
-		variant: "h3",
-		component: "span",
-		sx: {
-			fontWeight: 700,
-			color: l === "inherit" ? "text.primary" : `${l}.main`,
-			width: "70px",
-			...y.digit,
-			...f
+	} : e === "large" ? {
+		digit: {
+			fontSize: "3.5rem",
+			lineHeight: 1.1
 		},
-		children: b
-	}), S = /* @__PURE__ */ t(a, {
-		component: "span",
-		sx: {
-			color: "text.secondary",
-			fontWeight: 600,
-			textTransform: "uppercase",
-			display: "block",
-			mt: .5,
-			...y.title,
-			...p
+		label: {
+			fontSize: "1rem",
+			letterSpacing: "0.1em"
+		}
+	} : {
+		digit: {
+			fontSize: "2.5rem",
+			lineHeight: 1.15
 		},
-		children: s
-	}), C = x;
-	u === "fade" ? C = /* @__PURE__ */ t(r, {
+		label: {
+			fontSize: "0.875rem",
+			letterSpacing: "0.08em"
+		}
+	};
+}
+var m = n.forwardRef(function(n, l) {
+	let m = u({
+		props: n,
+		name: "SCountBox"
+	}), { animation: h = "none", color: g = "inherit", digit: _, digitFormat: v = "default", label: y, separator: b, size: x = "medium", slotProps: S, slots: C, sx: w, ...T } = m, E = {
+		...m,
+		color: g,
+		size: x
+	}, D = C?.content ?? a, O = C?.digit ?? c, k = C?.label ?? c, A = C?.separator ?? c, j = f(S?.content, E), M = f(S?.digit, E), N = f(S?.label, E), P = f(S?.separator, E), F = t(C?.content, j ?? {}, E), I = t(C?.digit, M ?? {}, E), L = t(C?.label, N ?? {}, E), R = t(C?.separator, P ?? {}, E), { sx: z, ...B } = F, { sx: V, ...H } = I, { sx: U, ...W } = L, { sx: G, ...K } = R, q = p(x), J = v === "padded" ? _.toString().padStart(2, "0") : _.toString(), Y = /* @__PURE__ */ r(O, {
+		component: "span",
+		variant: "h3",
+		...H,
+		sx: [{
+			color: g === "inherit" ? "text.primary" : `${g}.main`,
+			fontWeight: 700,
+			width: 70,
+			...q.digit
+		}, ...e(V)],
+		children: J
+	}), X = h === "fade" ? /* @__PURE__ */ r(o, {
 		in: !0,
 		timeout: 300,
-		children: /* @__PURE__ */ t("div", { children: x })
-	}, b) : u === "slide" && (C = /* @__PURE__ */ t(i, {
+		children: /* @__PURE__ */ r(a, { children: Y })
+	}, J) : h === "slide" ? /* @__PURE__ */ r(s, {
 		in: !0,
 		direction: "up",
 		timeout: 300,
-		children: /* @__PURE__ */ t("div", { children: x })
-	}, b));
-	let w = /* @__PURE__ */ n(e, {
-		flexDirection: "column",
-		alignItems: "center",
-		sx: {
-			textAlign: "center",
-			minWidth: "fit-content",
-			...d
-		},
-		children: [C, S]
-	});
-	return m ? /* @__PURE__ */ n(e, {
-		alignItems: "center",
-		children: [w, /* @__PURE__ */ t(a, {
+		children: /* @__PURE__ */ r(a, { children: Y })
+	}, J) : Y;
+	return /* @__PURE__ */ i(d, {
+		...T,
+		ownerState: E,
+		ref: l,
+		sx: [{
+			alignItems: "center",
+			display: "flex"
+		}, ...e(w)],
+		children: [/* @__PURE__ */ i(D, {
+			...B,
+			sx: [{
+				alignItems: "center",
+				display: "flex",
+				flexDirection: "column",
+				minWidth: "fit-content",
+				textAlign: "center"
+			}, ...e(z)],
+			children: [X, /* @__PURE__ */ r(k, {
+				component: "span",
+				...W,
+				sx: [{
+					color: "text.secondary",
+					display: "block",
+					fontWeight: 600,
+					mt: .5,
+					textTransform: "uppercase",
+					...q.label
+				}, ...e(U)],
+				children: y
+			})]
+		}), b == null ? null : /* @__PURE__ */ r(A, {
 			variant: "h3",
-			sx: {
+			...K,
+			sx: [{
+				alignSelf: "flex-start",
 				color: "text.secondary",
-				...y.digit,
+				fontSize: q.digit.fontSize,
 				lineHeight: 1,
-				alignSelf: "flex-start",
 				mt: .5
-			},
-			children: h
+			}, ...e(G)],
+			children: b
 		})]
-	}) : w;
-};
-o.displayName = "SCountBox";
+	});
+});
+m.displayName = "SCountBox";
 //#endregion
-export { o as SCountBox, o as default };
+export { m as SCountBox, m as default };

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { SxProps, Theme } from '@mui/material';
+import { BoxProps } from '@mui/material';
 /**
  * Props interface for SCountdown component
  */
@@ -8,7 +8,7 @@ export type SCountdownColor = 'primary' | 'secondary' | 'success' | 'error' | 'w
 export type SCountdownLayout = 'horizontal' | 'vertical' | 'grid';
 export type SCountdownAnimation = 'none' | 'fade' | 'slide';
 export type SCountdownDigitFormat = 'default' | 'padded';
-export interface SCountdownProps {
+export interface SCountdownProps extends Omit<BoxProps, 'children' | 'color' | 'component'> {
     /** Target date timestamp in milliseconds (from Date.getTime()) */
     expireDate: number;
     /** Size variant for all count boxes */
@@ -54,10 +54,6 @@ export interface SCountdownProps {
     completedText?: React.ReactNode;
     /** Whether to auto-hide completed units (e.g., hide days when 0) */
     autoHideZeroUnits?: boolean;
-    /** Custom styling for the container */
-    sx?: SxProps<Theme>;
-    /** ARIA label for accessibility */
-    'aria-label'?: string;
     /** Whether the countdown is paused */
     paused?: boolean;
     /** Responsive breakpoints for size changes */
@@ -69,8 +65,5 @@ export interface SCountdownProps {
         xl?: SCountdownSize;
     };
 }
-export declare const SCountdown: {
-    ({ expireDate, size, color, layout, animation, showSeparators, separator, units, labels, digitFormat, onComplete, onTick, onStart, completedText, autoHideZeroUnits, sx, "aria-label": ariaLabel, paused, responsive, }: SCountdownProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const SCountdown: React.ForwardRefExoticComponent<Omit<SCountdownProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SCountdown;