@solostylist/ui-kit 1.0.229 → 2.0.0

package/dist/s-error-layout/s-error-layout.d.ts

@@ -1,58 +0,0 @@
-import { default as React, ReactNode } from 'react';
-import { ButtonProps, SxProps, Theme, TypographyProps } from '@mui/material';
-/** Props interface for SErrorLayout component */
-export interface SErrorLayoutProps {
-    /** Source URL for the error image */
-    imageSrc: string;
-    /** Alt text for the error image */
-    imageAlt: string;
-    /** Main error title text */
-    title: string;
-    /** Error description text */
-    description: string | ReactNode;
-    /** Text for the action button. If not provided, button will not be shown */
-    buttonText?: string;
-    /** Image width. Default: '200px' */
-    imageWidth?: string | number;
-    /** Image height. Default: 'auto' */
-    imageHeight?: string | number;
-    /** Container max width. Default: 'sm' */
-    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
-    /** Main container minimum height. Default: '100dvh' */
-    height?: string | number;
-    /** Vertical padding. Default: 8 (64px) */
-    py?: number | string;
-    /** Spacing between elements. Default: 4 (32px) */
-    spacing?: number;
-    /** Title typography variant. Default: 'h4' */
-    titleVariant?: TypographyProps['variant'];
-    /** Description typography variant. Default: 'body1' */
-    descriptionVariant?: TypographyProps['variant'];
-    /** Button variant. Default: 'contained' */
-    buttonVariant?: ButtonProps['variant'];
-    /** Button color. Default: 'primary' */
-    buttonColor?: ButtonProps['color'];
-    /** Custom styles for the main container */
-    containerSx?: SxProps<Theme>;
-    /** Custom styles for the image container */
-    imageContainerSx?: SxProps<Theme>;
-    /** Custom styles for the content stack */
-    contentSx?: SxProps<Theme>;
-    /** Custom styles for the title */
-    titleSx?: SxProps<Theme>;
-    /** Custom styles for the description */
-    descriptionSx?: SxProps<Theme>;
-    /** Custom styles for the button container */
-    buttonContainerSx?: SxProps<Theme>;
-    /** Additional button props */
-    buttonProps?: Partial<ButtonProps>;
-    /** Hide image. Default: false */
-    hideImage?: boolean;
-    /** Custom content to render instead of the button */
-    customActions?: ReactNode;
-}
-export declare const SErrorLayout: {
-    ({ imageSrc, imageAlt, title, description, buttonText, imageWidth, imageHeight, maxWidth, height, py, spacing, titleVariant, descriptionVariant, buttonVariant, buttonColor, containerSx, imageContainerSx, contentSx, titleSx, descriptionSx, buttonContainerSx, buttonProps, hideImage, customActions, }: SErrorLayoutProps): React.JSX.Element;
-    displayName: string;
-};
-export default SErrorLayout;

package/dist/s-error-layout/s-error-layout.js

@@ -1,81 +0,0 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Box as r, Button as i, Container as a, Stack as o, Typography as s } from "@mui/material";
-//#region lib/s-error-layout/s-error-layout.tsx
-var c = ({ imageSrc: c, imageAlt: l, title: u, description: d, buttonText: f, imageWidth: p = "200px", imageHeight: m = "auto", maxWidth: h = "sm", height: g = "100dvh", py: _ = 8, spacing: v = 4, titleVariant: y = "h4", descriptionVariant: b = "body1", buttonVariant: x = "contained", buttonColor: S = "primary", containerSx: C, imageContainerSx: w, contentSx: T, titleSx: E, descriptionSx: D, buttonContainerSx: O, buttonProps: k, hideImage: A = !1, customActions: j }) => {
-	let M = j ? /* @__PURE__ */ t(r, {
-		sx: {
-			display: "flex",
-			justifyContent: "center",
-			...O
-		},
-		children: j
-	}) : null, N = f ? /* @__PURE__ */ t(r, {
-		sx: {
-			display: "flex",
-			justifyContent: "center",
-			...O
-		},
-		children: /* @__PURE__ */ t(i, {
-			variant: x,
-			color: S,
-			...k,
-			children: f
-		})
-	}) : null;
-	return /* @__PURE__ */ t(r, {
-		component: "main",
-		sx: {
-			alignItems: "center",
-			display: "flex",
-			flexDirection: "column",
-			justifyContent: "center",
-			boxSizing: "border-box",
-			minHeight: g,
-			py: _,
-			...C
-		},
-		children: /* @__PURE__ */ t(a, {
-			maxWidth: h,
-			children: /* @__PURE__ */ n(o, {
-				spacing: v,
-				children: [
-					!A && /* @__PURE__ */ t(r, {
-						sx: {
-							display: "flex",
-							justifyContent: "center",
-							...w
-						},
-						children: /* @__PURE__ */ t(e, {
-							src: c,
-							alt: l,
-							width: p,
-							height: m
-						})
-					}),
-					/* @__PURE__ */ n(o, {
-						spacing: 1,
-						sx: {
-							textAlign: "center",
-							...T
-						},
-						children: [/* @__PURE__ */ t(s, {
-							variant: y,
-							sx: E,
-							children: u
-						}), /* @__PURE__ */ t(s, {
-							variant: b,
-							sx: [{ color: "text.secondary" }, ...Array.isArray(D) ? D : [D]],
-							children: d
-						})]
-					}),
-					M ?? N
-				]
-			})
-		})
-	});
-};
-c.displayName = "SErrorLayout";
-//#endregion
-export { c as SErrorLayout, c as default };

package/dist/s-file-dropzone-C4_hCsN8.js

@@ -1,139 +0,0 @@
-import { t as e } from "./Box-BlmynALm.js";
-import { t } from "./Stack-BQkLmLFp.js";
-import { t as n } from "./utils-B5Rl6Zwv.js";
-import { t as r } from "./useForkRef-yOYCJHzF.js";
-import { t as i } from "./createSvgIcon-HW-tbFcL.js";
-import { t as a } from "./Typography-CZ_MYa-E.js";
-import { SForm as o } from "./s-form/s-form.js";
-import { SFileIcon as s } from "./s-file-icon/s-file-icon.js";
-import * as c from "react";
-import { forwardRef as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Avatar as f, Button as p, IconButton as m, Tooltip as h } from "@mui/material";
-import { useDropzone as g } from "react-dropzone";
-//#region ../../node_modules/@mui/icons-material/CloseOutlined.mjs
-var _ = i(/* @__PURE__ */ u("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }), "CloseOutlined"), v = i(/* @__PURE__ */ u("path", { d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3M8 13h2.55v3h2.9v-3H16l-4-4z" }), "CloudUploadOutlined"), y = l(({ hint: i, label: l = "", error: y, onRemoveAll: b, onRemove: x, required: S = !1, isShowBtnRemoveAll: C = !1, ...w }, T) => {
-	let { getRootProps: E, getInputProps: D, isDragActive: O, inputRef: k } = g(w), A = r(T, k);
-	return /* @__PURE__ */ d(c.Fragment, { children: [/* @__PURE__ */ u(o, {
-		error: y,
-		label: l,
-		required: S,
-		hint: i,
-		children: /* @__PURE__ */ d(e, {
-			sx: {
-				alignItems: "center",
-				border: "1px dashed",
-				borderColor: "divider",
-				borderRadius: 1,
-				cursor: "pointer",
-				display: "flex",
-				flexWrap: "wrap",
-				justifyContent: "center",
-				outline: "none",
-				p: 4,
-				...O && {
-					bgcolor: "action.selected",
-					opacity: .5
-				},
-				"&:hover": { ...!O && { bgcolor: "action.hover" } }
-			},
-			...E(),
-			children: [/* @__PURE__ */ u("input", {
-				...D(),
-				ref: A
-			}), /* @__PURE__ */ d(t, {
-				direction: "row",
-				spacing: 1,
-				sx: { alignItems: "center" },
-				children: [/* @__PURE__ */ u(f, {
-					sx: {
-						border: "1px dashed",
-						borderColor: "divider",
-						color: "text.secondary",
-						backgroundColor: "transparent"
-					},
-					children: /* @__PURE__ */ u(v, { fontSize: "small" })
-				}), /* @__PURE__ */ u(t, {
-					spacing: 1,
-					children: /* @__PURE__ */ d(a, {
-						variant: "body2",
-						sx: { color: "text.secondary" },
-						children: [
-							/* @__PURE__ */ u(a, {
-								component: "span",
-								sx: { textDecoration: "underline" },
-								variant: "inherit",
-								children: "Click to upload"
-							}),
-							" ",
-							"or drag and drop your files here"
-						]
-					})
-				})]
-			})]
-		})
-	}), w.files?.length ? /* @__PURE__ */ d(t, {
-		spacing: 1,
-		sx: { mt: 1 },
-		children: [/* @__PURE__ */ u(t, {
-			component: "ul",
-			spacing: 1,
-			sx: {
-				listStyle: "none",
-				m: 0,
-				p: 0
-			},
-			children: w.files?.map((r) => /* @__PURE__ */ d(t, {
-				component: "li",
-				direction: "row",
-				spacing: 2,
-				sx: {
-					alignItems: "center",
-					border: "1px solid",
-					borderColor: "divider",
-					borderRadius: 1,
-					flex: "1 1 auto",
-					p: 1
-				},
-				children: [
-					/* @__PURE__ */ u(s, { extension: r.name.split(".").pop() }),
-					/* @__PURE__ */ d(e, {
-						sx: { flex: "1 1 auto" },
-						children: [/* @__PURE__ */ u(a, {
-							variant: "subtitle2",
-							children: r.name
-						}), /* @__PURE__ */ u(a, {
-							variant: "body2",
-							sx: { color: "text.secondary" },
-							children: n(r.size)
-						})]
-					}),
-					/* @__PURE__ */ u(h, {
-						title: "Remove",
-						children: /* @__PURE__ */ u(m, {
-							onClick: () => {
-								x?.(r);
-							},
-							children: /* @__PURE__ */ u(_, {})
-						})
-					})
-				]
-			}, r.size))
-		}), /* @__PURE__ */ u(t, {
-			direction: "row",
-			sx: {
-				alignItems: "center",
-				justifyContent: "flex-end"
-			},
-			children: C && /* @__PURE__ */ u(p, {
-				onClick: b,
-				type: "button",
-				variant: "text",
-				children: "Remove all"
-			})
-		})]
-	}) : null] });
-});
-y.displayName = "SFileDropzone";
-//#endregion
-export { y as t };

package/dist/s-image-modal/default-media-item.js

@@ -1,34 +0,0 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Box as n } from "@mui/material";
-//#region lib/s-image-modal/default-media-item.tsx
-var r = ({ item: r, onClick: i, style: a = {}, objectFit: o = "contain", disableVideoControls: s = !1 }) => r.type === "video" ? /* @__PURE__ */ t(n, {
-	component: "video",
-	onClick: i,
-	controls: !s,
-	sx: {
-		width: "100%",
-		height: "100%",
-		objectFit: o,
-		bgcolor: "background.paper",
-		...a
-	},
-	children: /* @__PURE__ */ t("source", {
-		src: r.url,
-		type: "video/mp4"
-	})
-}) : /* @__PURE__ */ t(e, {
-	src: r.url,
-	alt: r.title ?? "",
-	onClick: i,
-	style: {
-		width: "100%",
-		height: "100%",
-		objectFit: o,
-		backgroundColor: "background.paper",
-		...a
-	}
-});
-//#endregion
-export { r as DefaultMediaItem };

package/dist/s-image-modal/image-modal-thumbnail-dock.d.ts

@@ -1,11 +0,0 @@
-import { default as React } from 'react';
-import { MediaItemType, SImageModalProps } from './types';
-/**
- * Stacked-card thumbnail dock pinned to the bottom of the modal
- */
-export declare const ImageModalThumbnailDock: React.FC<{
-    mediaItems: MediaItemType[];
-    selectedItem: MediaItemType;
-    onSelect: (item: MediaItemType) => void;
-    renderMediaItem?: SImageModalProps['renderMediaItem'];
-}>;

package/dist/s-image-modal/image-modal-thumbnail-dock.js

@@ -1,102 +0,0 @@
-import { n as e } from "../theme-primitives-CiQYd9Cc.js";
-import { DefaultMediaItem as t } from "./default-media-item.js";
-import "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i, Paper as a, Stack as o } from "@mui/material";
-import { motion as s } from "framer-motion";
-//#region lib/s-image-modal/image-modal-thumbnail-dock.tsx
-var c = ({ mediaItems: c, selectedItem: l, onSelect: u, renderMediaItem: d }) => /* @__PURE__ */ n(i, {
-	sx: {
-		position: "fixed",
-		zIndex: 1502,
-		left: "50%",
-		bottom: 16,
-		transform: "translateX(-50%)"
-	},
-	children: /* @__PURE__ */ n(a, {
-		sx: {
-			position: "relative",
-			borderRadius: 1,
-			bgcolor: "background.paper",
-			border: "1px solid",
-			borderColor: "divider",
-			backdropFilter: "blur(12px)",
-			px: 1.5,
-			py: 1
-		},
-		children: /* @__PURE__ */ n(o, {
-			direction: "row",
-			spacing: -1.5,
-			sx: { alignItems: "center" },
-			children: c.map((a, o) => {
-				let f = l.id === a.id, p = o % 2 == 0 ? -15 : 15, m = () => u(a);
-				return /* @__PURE__ */ r(s.div, {
-					onClick: (e) => {
-						e.stopPropagation(), m();
-					},
-					style: {
-						position: "relative",
-						width: 40,
-						height: 40,
-						borderRadius: e.md,
-						overflow: "hidden",
-						flexShrink: 0,
-						zIndex: f ? 30 : c.length - o,
-						border: f ? "1px solid" : void 0,
-						borderColor: f ? "divider" : void 0,
-						cursor: "pointer"
-					},
-					initial: { rotate: p },
-					animate: {
-						scale: f ? 1.2 : 1,
-						rotate: f ? 0 : p,
-						y: f ? -8 : 0
-					},
-					whileHover: {
-						scale: 1.3,
-						rotate: 0,
-						y: -10,
-						transition: {
-							type: "spring",
-							stiffness: 400,
-							damping: 25
-						}
-					},
-					children: [
-						d ? d(a, m) : /* @__PURE__ */ n(t, {
-							item: a,
-							objectFit: "cover",
-							style: {
-								width: "100%",
-								height: "100%",
-								borderRadius: e.none,
-								pointerEvents: a.type === "video" ? "none" : "auto"
-							},
-							disableVideoControls: !0
-						}),
-						/* @__PURE__ */ n(i, { sx: {
-							position: "absolute",
-							inset: 0,
-							background: (e) => `linear-gradient(to bottom, transparent, ${(e.vars ?? e).palette.action.hover}, ${(e.vars ?? e).palette.action.selected})`,
-							pointerEvents: "none"
-						} }),
-						f && /* @__PURE__ */ n(s.div, {
-							layoutId: "activeGlow",
-							style: {
-								position: "absolute",
-								inset: -8,
-								background: "primary.main",
-								filter: "blur(16px)"
-							},
-							initial: { opacity: 0 },
-							animate: { opacity: 1 },
-							transition: { duration: .2 }
-						})
-					]
-				}, a.id);
-			})
-		})
-	})
-});
-//#endregion
-export { c as ImageModalThumbnailDock };

package/dist/s-image-modal/index.d.ts

@@ -1,3 +0,0 @@
-export { default, default as SImageModal } from './s-image-modal';
-export type { SImageModalProps, MediaItemType } from './types';
-export { DefaultMediaItem } from './default-media-item';

package/dist/s-image-modal/index.js

@@ -1,3 +0,0 @@
-import { t as e } from "../s-image-modal-D-Jh-5b3.js";
-import { DefaultMediaItem as t } from "./default-media-item.js";
-export { t as DefaultMediaItem, e as SImageModal, e as default };

package/dist/s-image-modal/s-image-modal.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { SImageModalProps } from './types';
-export declare const SImageModal: React.FC<SImageModalProps>;
-export default SImageModal;

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

@@ -1,2 +0,0 @@
-import { t as e } from "../s-image-modal-D-Jh-5b3.js";
-export { e as SImageModal, e as default };

package/dist/s-image-modal/use-image-modal-navigation.d.ts

@@ -1,29 +0,0 @@
-import { MediaItemType } from './types';
-interface UseImageModalNavigationParams {
-    /** Currently selected media item (controlled) */
-    selectedItem?: MediaItemType | null;
-    /** Whether the modal is open */
-    isOpen: boolean;
-    /** Function to close the modal */
-    onClose: () => void;
-    /** Function to change the selected item (for controlled navigation) */
-    onItemChange?: (item: MediaItemType) => void;
-    /** Array of all media items for navigation */
-    mediaItems: MediaItemType[];
-    /** Whether navigation is enabled */
-    showNavigation: boolean;
-}
-/**
- * Encapsulates the selection state and prev/next/keyboard navigation of SImageModal.
- * Falls back to internal state when `onItemChange` is not provided (uncontrolled mode).
- */
-export declare function useImageModalNavigation({ selectedItem, isOpen, onClose, onItemChange, mediaItems, showNavigation, }: UseImageModalNavigationParams): {
-    currentSelectedItem: MediaItemType | null;
-    navigationEnabled: boolean;
-    currentIndex: number;
-    totalItems: number;
-    selectItem: (item: MediaItemType) => void;
-    goToPrevious: () => void;
-    goToNext: () => void;
-};
-export {};

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

@@ -1,57 +0,0 @@
-import { useCallback as e, useEffect as t, useState as n } from "react";
-//#region lib/s-image-modal/use-image-modal-navigation.ts
-function r({ selectedItem: r, isOpen: i, onClose: a, onItemChange: o, mediaItems: s, showNavigation: c }) {
-	let [l, u] = n(r ?? null), d = r ?? l;
-	t(() => {
-		r && u(r);
-	}, [r]);
-	let f = !!(c && s.length > 1 && d), p = d ? s.findIndex((e) => e.id === d.id) : -1, m = s.length, h = e((e) => {
-		o ? o(e) : u(e);
-	}, [o]), g = e(() => {
-		f && p > 0 && h(s[p - 1]);
-	}, [
-		f,
-		p,
-		s,
-		h
-	]), _ = e(() => {
-		f && p < m - 1 && h(s[p + 1]);
-	}, [
-		f,
-		p,
-		m,
-		s,
-		h
-	]);
-	return t(() => {
-		let e = (e) => {
-			if (i) switch (e.key) {
-				case "ArrowLeft":
-					g();
-					break;
-				case "ArrowRight":
-					_();
-					break;
-				case "Escape":
-					a();
-					break;
-			}
-		};
-		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [
-		i,
-		g,
-		_,
-		a
-	]), {
-		currentSelectedItem: d,
-		navigationEnabled: f,
-		currentIndex: p,
-		totalItems: m,
-		selectItem: h,
-		goToPrevious: g,
-		goToNext: _
-	};
-}
-//#endregion
-export { r as useImageModalNavigation };