@solostylist/ui-kit 2.0.1 → 2.0.2

package/dist/s-image-viewer/s-image-viewer.js

@@ -1,266 +1,2 @@
-import { toSxArray as e } from "../utils/sx.js";
-import { DefaultMediaItem as t } from "./default-media-item.js";
-import { ImageViewerThumbnailDock as n } from "./image-viewer-thumbnail-dock.js";
-import { useImageViewerNavigation as r } from "./use-image-viewer-navigation.js";
-import { styled as i, useThemeProps as a } from "@mui/material/styles";
-import o from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { ChevronLeft as u, ChevronRight as d, Close as f } from "@mui/icons-material";
-import { Box as p, IconButton as m, Modal as h, Paper as g, Typography as _ } from "@mui/material";
-import { mergeSlotProps as v } from "@mui/material/utils";
-import { AnimatePresence as y, motion as b, useReducedMotion as x } from "framer-motion";
-//#region lib/s-image-viewer/s-image-viewer.tsx
-var S = i(h, {
-	name: "SImageViewer",
-	slot: "Root"
-})({}), C = o.forwardRef(function(i, o) {
-	let h = a({
-		props: i,
-		name: "SImageViewer"
-	}), { "aria-label": C, "aria-labelledby": w, selectedItem: T, defaultSelectedItem: E, open: D, onClose: O, onCloseButtonClick: k, onItemChange: A, mediaItems: j = [], renderMediaItem: M, showNavigation: N = !0, showThumbnailDock: P = !0, showCounter: F = !0, closeText: I = "Close", previousText: L = "Previous image", nextText: R = "Next image", getThumbnailLabel: z, slotProps: B, sx: V, ...H } = h, { currentSelectedItem: U, navigationEnabled: W, currentIndex: G, totalItems: K, selectItem: q, goToPrevious: J, goToNext: Y, handleKeyDown: X } = r({
-		selectedItem: T,
-		defaultSelectedItem: E,
-		onItemChange: A,
-		mediaItems: j,
-		showNavigation: N
-	}), Z = {
-		...h,
-		currentIndex: G,
-		navigationEnabled: W
-	}, Q = x();
-	return U ? /* @__PURE__ */ c(S, {
-		...H,
-		ownerState: Z,
-		open: D,
-		onClose: O,
-		ref: o,
-		sx: [(e) => ({ zIndex: e.zIndex.modal + 100 }), ...e(V)],
-		slotProps: {
-			...B,
-			backdrop: v(B?.backdrop, { sx: {
-				backdropFilter: "blur(8px)",
-				zIndex: (e) => e.zIndex.modal + 99
-			} })
-		},
-		children: /* @__PURE__ */ l(p, {
-			onKeyDown: X,
-			children: [/* @__PURE__ */ c(b.div, {
-				initial: Q ? !1 : { scale: .98 },
-				animate: { scale: 1 },
-				exit: Q ? void 0 : { scale: .98 },
-				transition: Q ? { duration: 0 } : {
-					type: "spring",
-					stiffness: 400,
-					damping: 30
-				},
-				children: /* @__PURE__ */ l(g, {
-					"aria-label": C,
-					"aria-labelledby": w,
-					"aria-modal": !0,
-					role: "dialog",
-					sx: {
-						position: "fixed",
-						inset: 0,
-						width: "100%",
-						minHeight: "100vh",
-						borderRadius: 0,
-						overflow: "hidden",
-						zIndex: (e) => e.zIndex.modal + 101
-					},
-					children: [
-						/* @__PURE__ */ c(p, {
-							sx: {
-								height: "100%",
-								display: "flex",
-								flexDirection: "column"
-							},
-							children: /* @__PURE__ */ c(p, {
-								sx: {
-									flex: 1,
-									p: {
-										xs: 1,
-										sm: 2,
-										md: 3
-									},
-									display: "flex",
-									alignItems: "center",
-									justifyContent: "center",
-									bgcolor: "background.default"
-								},
-								children: /* @__PURE__ */ c(y, {
-									initial: !Q,
-									mode: "wait",
-									children: /* @__PURE__ */ c(b.div, {
-										style: { position: "relative" },
-										initial: Q ? !1 : {
-											y: 20,
-											scale: .97
-										},
-										animate: {
-											y: 0,
-											scale: 1,
-											transition: Q ? { duration: 0 } : {
-												type: "spring",
-												stiffness: 500,
-												damping: 30,
-												mass: .5
-											}
-										},
-										exit: Q ? void 0 : {
-											y: 20,
-											scale: .97,
-											transition: { duration: .15 }
-										},
-										children: /* @__PURE__ */ l(g, {
-											onClick: (e) => e.stopPropagation(),
-											sx: {
-												position: "relative",
-												width: "100%",
-												aspectRatio: "16 / 9",
-												maxWidth: {
-													xs: "95%",
-													sm: "85%",
-													md: 960
-												},
-												height: "70vh",
-												borderRadius: 1,
-												border: "1px solid",
-												borderColor: "divider",
-												overflow: "hidden",
-												bgcolor: "grey.900"
-											},
-											children: [M ? M(U) : /* @__PURE__ */ c(t, { item: U }), (U.title || U.desc) && /* @__PURE__ */ l(p, {
-												sx: {
-													position: "absolute",
-													left: 0,
-													right: 0,
-													bottom: 0,
-													p: {
-														xs: 1.5,
-														sm: 2,
-														md: 3
-													},
-													color: "common.white",
-													gradient: "overlay.media"
-												},
-												onClick: (e) => e.stopPropagation(),
-												children: [U.title && /* @__PURE__ */ c(_, {
-													variant: "h6",
-													sx: { fontSize: {
-														xs: 14,
-														sm: 18,
-														md: 20
-													} },
-													children: U.title
-												}), U.desc && /* @__PURE__ */ c(_, {
-													variant: "body2",
-													sx: { mt: .5 },
-													children: U.desc
-												})]
-											})]
-										})
-									}, U.id)
-								})
-							})
-						}),
-						/* @__PURE__ */ c(m, {
-							"aria-label": I,
-							onClick: k,
-							sx: {
-								position: "absolute",
-								top: {
-									xs: 8,
-									sm: 10,
-									md: 12
-								},
-								right: {
-									xs: 8,
-									sm: 10,
-									md: 12
-								},
-								zIndex: (e) => e.zIndex.modal + 102
-							},
-							children: /* @__PURE__ */ c(f, {})
-						}),
-						F && W && /* @__PURE__ */ l(p, {
-							sx: {
-								position: "absolute",
-								top: {
-									xs: 8,
-									sm: 10,
-									md: 12
-								},
-								left: {
-									xs: 8,
-									sm: 10,
-									md: 12
-								},
-								zIndex: (e) => e.zIndex.modal + 102,
-								padding: 1,
-								px: 2,
-								fontSize: {
-									xs: 14,
-									sm: 16
-								},
-								color: "text.primary"
-							},
-							children: [
-								G + 1,
-								" / ",
-								K
-							]
-						}),
-						W && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(m, {
-							"aria-label": L,
-							onClick: (e) => {
-								e.stopPropagation(), J(e);
-							},
-							disabled: G === 0,
-							sx: {
-								position: "absolute",
-								left: {
-									xs: 8,
-									sm: 10,
-									md: 12
-								},
-								top: "50%",
-								transform: "translateY(-50%)",
-								zIndex: (e) => e.zIndex.modal + 102,
-								"&:disabled": { opacity: .5 }
-							},
-							children: /* @__PURE__ */ c(u, {})
-						}), /* @__PURE__ */ c(m, {
-							"aria-label": R,
-							onClick: (e) => {
-								e.stopPropagation(), Y(e);
-							},
-							disabled: G === K - 1,
-							sx: {
-								position: "absolute",
-								right: {
-									xs: 8,
-									sm: 10,
-									md: 12
-								},
-								top: "50%",
-								transform: "translateY(-50%)",
-								zIndex: (e) => e.zIndex.modal + 102,
-								"&:disabled": { opacity: .5 }
-							},
-							children: /* @__PURE__ */ c(d, {})
-						})] })
-					]
-				})
-			}), P && W && j.length > 1 && /* @__PURE__ */ c(n, {
-				mediaItems: j,
-				selectedItem: U,
-				onSelect: q,
-				renderMediaItem: M,
-				getThumbnailLabel: z
-			})]
-		})
-	}) : null;
-});
-C.displayName = "SImageViewer";
-//#endregion
-export { C as SImageViewer, C as default };
+import { t as e } from "../s-image-viewer-CjK67-rs.js";
+export { e as SImageViewer, e as default };

package/dist/s-image-viewer/use-image-viewer-navigation.js

@@ -1,5 +1,5 @@
-import { useCallback as e } from "react";
-import { useControlled as t } from "@mui/material/utils";
+import { t as e } from "../useControlled-DqNPBJNp.js";
+import { useCallback as t } from "react";
 //#region lib/s-image-viewer/use-image-viewer-navigation.ts
 var n = [
 	"a[href]",
@@ -28,21 +28,21 @@ var n = [
 	"[role=\"textbox\"]"
 ].join(", ");
 function r({ selectedItem: r, defaultSelectedItem: i, onItemChange: a, mediaItems: o, showNavigation: s }) {
-	let [c, l] = t({
+	let [c, l] = e({
 		controlled: r,
 		default: i ?? null,
 		name: "SImageViewer",
 		state: "selectedItem"
-	}), u = c ? o.findIndex((e) => e.id === c.id) : -1, d = !!(s && o.length > 1 && u >= 0), f = o.length, p = e((e, t, n) => {
+	}), u = c ? o.findIndex((e) => e.id === c.id) : -1, d = !!(s && o.length > 1 && u >= 0), f = o.length, p = t((e, t, n) => {
 		l(t), a?.(e, t, n);
-	}, [a, l]), m = e((e) => {
+	}, [a, l]), m = t((e) => {
 		d && u > 0 && p(e, o[u - 1], "previous");
 	}, [
 		d,
 		u,
 		o,
 		p
-	]), h = e((e) => {
+	]), h = t((e) => {
 		d && u < f - 1 && p(e, o[u + 1], "next");
 	}, [
 		d,
@@ -59,7 +59,7 @@ function r({ selectedItem: r, defaultSelectedItem: i, onItemChange: a, mediaItem
 		selectItem: p,
 		goToPrevious: m,
 		goToNext: h,
-		handleKeyDown: e((e) => {
+		handleKeyDown: t((e) => {
 			let t = e.target;
 			t instanceof Element && t.closest(n) || (e.key === "ArrowLeft" && d && u > 0 ? (e.preventDefault(), m(e)) : e.key === "ArrowRight" && d && u < f - 1 && (e.preventDefault(), h(e)));
 		}, [

package/dist/s-image-viewer-CjK67-rs.js

@@ -0,0 +1,269 @@
+import { t as e } from "./styled-Bog8QCl3.js";
+import { t } from "./useThemeProps-Dw9dmKyT.js";
+import { toSxArray as n } from "./utils/sx.js";
+import { t as r } from "./createSvgIcon-3y-gS0r1.js";
+import { t as i } from "./mergeSlotProps-DC8r4QzS.js";
+import { t as a } from "./ChevronRight-DsPfsFKB.js";
+import { t as o } from "./Close-CIYOM-Sc.js";
+import { DefaultMediaItem as s } from "./s-image-viewer/default-media-item.js";
+import { ImageViewerThumbnailDock as c } from "./s-image-viewer/image-viewer-thumbnail-dock.js";
+import { useImageViewerNavigation as l } from "./s-image-viewer/use-image-viewer-navigation.js";
+import u from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Box as m, IconButton as h, Modal as g, Paper as _, Typography as v } from "@mui/material";
+import { AnimatePresence as y, motion as b, useReducedMotion as x } from "framer-motion";
+//#region ../../node_modules/@mui/icons-material/ChevronLeft.mjs
+var S = r(/* @__PURE__ */ f("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }), "ChevronLeft"), C = e(g, {
+	name: "SImageViewer",
+	slot: "Root"
+})({}), w = u.forwardRef(function(e, r) {
+	let u = t({
+		props: e,
+		name: "SImageViewer"
+	}), { "aria-label": g, "aria-labelledby": w, selectedItem: T, defaultSelectedItem: E, open: D, onClose: O, onCloseButtonClick: k, onItemChange: A, mediaItems: j = [], renderMediaItem: M, showNavigation: N = !0, showThumbnailDock: P = !0, showCounter: F = !0, closeText: I = "Close", previousText: L = "Previous image", nextText: R = "Next image", getThumbnailLabel: z, slotProps: B, sx: V, ...H } = u, { currentSelectedItem: U, navigationEnabled: W, currentIndex: G, totalItems: K, selectItem: q, goToPrevious: J, goToNext: Y, handleKeyDown: X } = l({
+		selectedItem: T,
+		defaultSelectedItem: E,
+		onItemChange: A,
+		mediaItems: j,
+		showNavigation: N
+	}), Z = {
+		...u,
+		currentIndex: G,
+		navigationEnabled: W
+	}, Q = x();
+	return U ? /* @__PURE__ */ f(C, {
+		...H,
+		ownerState: Z,
+		open: D,
+		onClose: O,
+		ref: r,
+		sx: [(e) => ({ zIndex: e.zIndex.modal + 100 }), ...n(V)],
+		slotProps: {
+			...B,
+			backdrop: i(B?.backdrop, { sx: {
+				backdropFilter: "blur(8px)",
+				zIndex: (e) => e.zIndex.modal + 99
+			} })
+		},
+		children: /* @__PURE__ */ p(m, {
+			onKeyDown: X,
+			children: [/* @__PURE__ */ f(b.div, {
+				initial: Q ? !1 : { scale: .98 },
+				animate: { scale: 1 },
+				exit: Q ? void 0 : { scale: .98 },
+				transition: Q ? { duration: 0 } : {
+					type: "spring",
+					stiffness: 400,
+					damping: 30
+				},
+				children: /* @__PURE__ */ p(_, {
+					"aria-label": g,
+					"aria-labelledby": w,
+					"aria-modal": !0,
+					role: "dialog",
+					sx: {
+						position: "fixed",
+						inset: 0,
+						width: "100%",
+						minHeight: "100vh",
+						borderRadius: 0,
+						overflow: "hidden",
+						zIndex: (e) => e.zIndex.modal + 101
+					},
+					children: [
+						/* @__PURE__ */ f(m, {
+							sx: {
+								height: "100%",
+								display: "flex",
+								flexDirection: "column"
+							},
+							children: /* @__PURE__ */ f(m, {
+								sx: {
+									flex: 1,
+									p: {
+										xs: 1,
+										sm: 2,
+										md: 3
+									},
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									bgcolor: "background.default"
+								},
+								children: /* @__PURE__ */ f(y, {
+									initial: !Q,
+									mode: "wait",
+									children: /* @__PURE__ */ f(b.div, {
+										style: { position: "relative" },
+										initial: Q ? !1 : {
+											y: 20,
+											scale: .97
+										},
+										animate: {
+											y: 0,
+											scale: 1,
+											transition: Q ? { duration: 0 } : {
+												type: "spring",
+												stiffness: 500,
+												damping: 30,
+												mass: .5
+											}
+										},
+										exit: Q ? void 0 : {
+											y: 20,
+											scale: .97,
+											transition: { duration: .15 }
+										},
+										children: /* @__PURE__ */ p(_, {
+											onClick: (e) => e.stopPropagation(),
+											sx: {
+												position: "relative",
+												width: "100%",
+												aspectRatio: "16 / 9",
+												maxWidth: {
+													xs: "95%",
+													sm: "85%",
+													md: 960
+												},
+												height: "70vh",
+												borderRadius: 1,
+												border: "1px solid",
+												borderColor: "divider",
+												overflow: "hidden",
+												bgcolor: "grey.900"
+											},
+											children: [M ? M(U) : /* @__PURE__ */ f(s, { item: U }), (U.title || U.desc) && /* @__PURE__ */ p(m, {
+												sx: {
+													position: "absolute",
+													left: 0,
+													right: 0,
+													bottom: 0,
+													p: {
+														xs: 1.5,
+														sm: 2,
+														md: 3
+													},
+													color: "common.white",
+													gradient: "overlay.media"
+												},
+												onClick: (e) => e.stopPropagation(),
+												children: [U.title && /* @__PURE__ */ f(v, {
+													variant: "h6",
+													sx: { fontSize: {
+														xs: 14,
+														sm: 18,
+														md: 20
+													} },
+													children: U.title
+												}), U.desc && /* @__PURE__ */ f(v, {
+													variant: "body2",
+													sx: { mt: .5 },
+													children: U.desc
+												})]
+											})]
+										})
+									}, U.id)
+								})
+							})
+						}),
+						/* @__PURE__ */ f(h, {
+							"aria-label": I,
+							onClick: k,
+							sx: {
+								position: "absolute",
+								top: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								right: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								zIndex: (e) => e.zIndex.modal + 102
+							},
+							children: /* @__PURE__ */ f(o, {})
+						}),
+						F && W && /* @__PURE__ */ p(m, {
+							sx: {
+								position: "absolute",
+								top: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								left: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								zIndex: (e) => e.zIndex.modal + 102,
+								padding: 1,
+								px: 2,
+								fontSize: {
+									xs: 14,
+									sm: 16
+								},
+								color: "text.primary"
+							},
+							children: [
+								G + 1,
+								" / ",
+								K
+							]
+						}),
+						W && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(h, {
+							"aria-label": L,
+							onClick: (e) => {
+								e.stopPropagation(), J(e);
+							},
+							disabled: G === 0,
+							sx: {
+								position: "absolute",
+								left: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								top: "50%",
+								transform: "translateY(-50%)",
+								zIndex: (e) => e.zIndex.modal + 102,
+								"&:disabled": { opacity: .5 }
+							},
+							children: /* @__PURE__ */ f(S, {})
+						}), /* @__PURE__ */ f(h, {
+							"aria-label": R,
+							onClick: (e) => {
+								e.stopPropagation(), Y(e);
+							},
+							disabled: G === K - 1,
+							sx: {
+								position: "absolute",
+								right: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								top: "50%",
+								transform: "translateY(-50%)",
+								zIndex: (e) => e.zIndex.modal + 102,
+								"&:disabled": { opacity: .5 }
+							},
+							children: /* @__PURE__ */ f(a, {})
+						})] })
+					]
+				})
+			}), P && W && j.length > 1 && /* @__PURE__ */ f(c, {
+				mediaItems: j,
+				selectedItem: U,
+				onSelect: q,
+				renderMediaItem: M,
+				getThumbnailLabel: z
+			})]
+		})
+	}) : null;
+});
+w.displayName = "SImageViewer";
+//#endregion
+export { w as t };

package/dist/s-interactive-card/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as SInteractiveCard } from './s-interactive-card';
+export type { SInteractiveCardActionAreaProps, SInteractiveCardOwnerState, SInteractiveCardProps, SInteractiveCardSlotProps, SInteractiveCardSlots, } from './s-interactive-card';
+export type {} from '../theme/component-augmentation';

package/dist/s-interactive-card/index.js

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

package/dist/s-interactive-card/s-interactive-card.d.ts

@@ -0,0 +1,57 @@
+import { BoxProps, CardActionAreaProps, CardProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SInteractiveCardSlots {
+    /** Element wrapping the children when the card is clickable. */
+    actionArea?: React.ElementType;
+    /** Decorative layer rendered above the content. */
+    overlay?: React.ElementType;
+    /** Card surface element. */
+    root?: React.ElementType;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SInteractiveCardOwnerState>;
+/** Action area props, widened with the anchor attributes used when `href` is set. */
+export type SInteractiveCardActionAreaProps = CardActionAreaProps & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'>;
+export interface SInteractiveCardSlotProps {
+    /** Props or owner-state callback for the action area slot. */
+    actionArea?: OwnerStateSlotProps<SInteractiveCardActionAreaProps>;
+    /** Props or owner-state callback for the overlay slot. */
+    overlay?: OwnerStateSlotProps<BoxProps>;
+    /** Props or owner-state callback for the root slot. */
+    root?: OwnerStateSlotProps<Omit<CardProps, 'children'>>;
+}
+/** Props for a card surface with a hover-lift and focus interaction language. */
+export interface SInteractiveCardProps extends Omit<CardProps, 'children' | 'component' | 'onClick'> {
+    /**
+     * Card content. When `href` or `onClick` is provided, the content is wrapped
+     * in one `CardActionArea` and must not contain nested interactive controls.
+     */
+    children?: React.ReactNode;
+    /** Keeps the hover border feedback but removes the translate and scale. */
+    disableLift?: boolean;
+    /** Disables the primary action and all built-in interaction effects. */
+    disabled?: boolean;
+    /** Link destination. When set, the card action area renders with anchor semantics. */
+    href?: string;
+    /** Enables the surface lift, border and sheen effects without changing action semantics. */
+    interactive?: boolean;
+    /** Called when the card action area is activated. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Decorative content rendered in the overlay layer. Always `aria-hidden`. */
+    overlay?: React.ReactNode;
+    /** Sweeps a light sheen across the card on hover/focus. Disabled by default. */
+    sheen?: boolean;
+    /** Components used for internal structural slots. */
+    slots?: SInteractiveCardSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SInteractiveCardSlotProps;
+}
+export interface SInteractiveCardOwnerState extends Omit<SInteractiveCardProps, 'slotProps' | 'slots'> {
+    clickable: boolean;
+    disableLift: boolean;
+    disabled: boolean;
+    interactive: boolean;
+    sheen: boolean;
+}
+export declare const SInteractiveCard: React.ForwardRefExoticComponent<Omit<SInteractiveCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SInteractiveCard;