@solostylist/ui-kit 1.0.230 → 2.0.0

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

@@ -0,0 +1,422 @@
+import { n as e } from "./chunk-C_CI6nMA.js";
+import { t } from "./prop-types-BzYPyWN7.js";
+import { r as n, t as r } from "./DefaultPropsProvider-ebWx4_5E.js";
+import { t as i } from "./generateUtilityClass-PAIOm1jC.js";
+import { t as a } from "./clsx-DGZSe4Nt.js";
+import { t as o } from "./Box-9oeZgA1U.js";
+import { t as s } from "./generateUtilityClasses-DvX505Gy.js";
+import { t as c } from "./styled-Bog8QCl3.js";
+import { t as l } from "./Stack-UMc4dV4G.js";
+import { r as u } from "./elementAcceptingRef-DhkNAkFH.js";
+import { t as d } from "./memoTheme-qFyKAk7y.js";
+import { t as f } from "./useThemeProps-Cr28OQu3.js";
+import { t as p } from "./utils-DaSrTYUS.js";
+import { toSxArray as m } from "./utils/sx.js";
+import { t as h } from "./useForkRef-CKneCEtr.js";
+import { t as g } from "./appendOwnerState-CELpvdMz.js";
+import { t as _ } from "./useSlot-iIu8ek6E.js";
+import { t as v } from "./createSvgIcon-B0SZlJF1.js";
+import { t as y } from "./Typography-yXjc7kVP.js";
+import { t as b } from "./Tooltip-DbCd6rgF.js";
+import { SForm as x } from "./s-form/s-form.js";
+import { SFileIcon as S } from "./s-file-icon/s-file-icon.js";
+import { t as C } from "./Button-DgIFcM44.js";
+import * as w from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { useDropzone as O } from "react-dropzone";
+//#region ../../node_modules/@mui/icons-material/CloseOutlined.mjs
+var k = /* @__PURE__ */ e(t(), 1), A = v(/* @__PURE__ */ E("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"), j = v(/* @__PURE__ */ E("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"), M = v(/* @__PURE__ */ E("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }), "Person");
+//#endregion
+//#region ../../node_modules/@mui/material/Avatar/avatarClasses.mjs
+function N(e) {
+	return i("MuiAvatar", e);
+}
+s("MuiAvatar", [
+	"root",
+	"colorDefault",
+	"circular",
+	"rounded",
+	"square",
+	"img",
+	"fallback"
+]);
+//#endregion
+//#region ../../node_modules/@mui/material/Avatar/Avatar.mjs
+var P = (e) => {
+	let { classes: t, variant: r, colorDefault: i } = e;
+	return n({
+		root: [
+			"root",
+			r,
+			i && "colorDefault"
+		],
+		img: ["img"],
+		fallback: ["fallback"]
+	}, N, t);
+}, F = c("div", {
+	name: "MuiAvatar",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [
+			t.root,
+			t[n.variant],
+			n.colorDefault && t.colorDefault
+		];
+	}
+})(d(({ theme: e }) => ({
+	position: "relative",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	width: 40,
+	height: 40,
+	fontFamily: e.typography.fontFamily,
+	fontSize: e.typography.pxToRem(20),
+	lineHeight: 1,
+	borderRadius: "50%",
+	overflow: "hidden",
+	userSelect: "none",
+	variants: [
+		{
+			props: { variant: "rounded" },
+			style: { borderRadius: (e.vars || e).shape.borderRadius }
+		},
+		{
+			props: { variant: "square" },
+			style: { borderRadius: 0 }
+		},
+		{
+			props: { colorDefault: !0 },
+			style: {
+				color: (e.vars || e).palette.background.default,
+				"@media (forced-colors: active)": {
+					boxSizing: "border-box",
+					border: "1px solid ButtonBorder"
+				},
+				...e.vars ? { backgroundColor: e.vars.palette.Avatar.defaultBg } : {
+					backgroundColor: e.palette.grey[400],
+					...e.applyStyles("dark", { backgroundColor: e.palette.grey[600] })
+				}
+			}
+		}
+	]
+}))), I = c("img", {
+	name: "MuiAvatar",
+	slot: "Img"
+})({
+	width: "100%",
+	height: "100%",
+	textAlign: "center",
+	objectFit: "cover",
+	color: "transparent",
+	textIndent: 1e4
+}), L = c(M, {
+	name: "MuiAvatar",
+	slot: "Fallback"
+})({
+	width: "75%",
+	height: "75%"
+});
+function R(e, t, n, r) {
+	let [i, a] = w.useState(!1);
+	return w.useEffect(() => {
+		if (!e && !t) return;
+		a(!1);
+		let i = !0, o = new Image();
+		return o.onload = () => {
+			i && a("loaded");
+		}, o.onerror = () => {
+			i && a("error");
+		}, o.crossOrigin = n, o.referrerPolicy = r, o.src = e, t && (o.srcset = t), () => {
+			i = !1;
+		};
+	}, [
+		n,
+		r,
+		e,
+		t
+	]), i;
+}
+var z = /* @__PURE__ */ w.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiAvatar"
+	}), { alt: i, children: o, className: s, component: c = "div", slots: l = {}, slotProps: u = {}, sizes: d, src: f, srcSet: p, variant: m = "circular", ...h } = n, g = null, v = {
+		...n,
+		component: c,
+		variant: m
+	}, { crossOrigin: y, referrerPolicy: b } = (typeof u.img == "function" ? u.img(v) : u.img) ?? {}, x = R(f, p, y, b), S = f || p, C = S && x !== "error";
+	v.colorDefault = !C, delete v.ownerState;
+	let w = P(v), T = {
+		slots: l,
+		slotProps: u
+	}, [D, O] = _("root", {
+		ref: t,
+		className: a(w.root, s),
+		elementType: F,
+		externalForwardedProps: {
+			...T,
+			component: c,
+			...h
+		},
+		ownerState: v
+	}), [k, A] = _("img", {
+		className: w.img,
+		elementType: I,
+		externalForwardedProps: T,
+		additionalProps: {
+			alt: i,
+			src: f,
+			srcSet: p,
+			sizes: d
+		},
+		ownerState: v
+	}), [j, M] = _("fallback", {
+		className: w.fallback,
+		elementType: L,
+		externalForwardedProps: T,
+		shouldForwardComponentProp: !0,
+		ownerState: v
+	});
+	return g = C ? /* @__PURE__ */ E(k, { ...A }) : o || o === 0 ? o : S && i ? i[0] : /* @__PURE__ */ E(j, { ...M }), /* @__PURE__ */ E(D, {
+		...O,
+		children: g
+	});
+});
+process.env.NODE_ENV !== "production" && (z.propTypes = {
+	alt: k.default.string,
+	children: k.default.node,
+	classes: k.default.object,
+	className: k.default.string,
+	component: k.default.elementType,
+	sizes: k.default.string,
+	slotProps: k.default.shape({
+		fallback: k.default.oneOfType([k.default.func, k.default.object]),
+		img: k.default.oneOfType([k.default.func, k.default.object]),
+		root: k.default.oneOfType([k.default.func, k.default.object])
+	}),
+	slots: k.default.shape({
+		fallback: k.default.elementType,
+		img: k.default.elementType,
+		root: k.default.elementType
+	}),
+	src: k.default.string,
+	srcSet: k.default.string,
+	sx: k.default.oneOfType([
+		k.default.arrayOf(k.default.oneOfType([
+			k.default.func,
+			k.default.object,
+			k.default.bool
+		])),
+		k.default.func,
+		k.default.object
+	]),
+	variant: k.default.oneOfType([k.default.oneOf([
+		"circular",
+		"rounded",
+		"square"
+	]), k.default.string])
+});
+//#endregion
+//#region lib/s-file-dropzone/s-file-dropzone.tsx
+var ee = c(x, {
+	name: "SFileDropzone",
+	slot: "Root"
+})({}), te = "Click to upload or drag and drop your files here";
+function ne(e) {
+	return Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0));
+}
+function B(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var V = w.forwardRef(function(e, t) {
+	let { accept: n, autoFocus: r, defaultFiles: i = [], disabled: a = !1, error: s = !1, files: c, getFilesFromEvent: d, inputRef: _, maxFiles: v, maxSize: x, minSize: k, multiple: M, noClick: N, noDrag: P, noDragEventsBubbling: F, noKeyboard: I, onDragEnter: L, onDragLeave: R, onDragOver: V, onDrop: H, onDropAccepted: re, onDropRejected: ie, onError: ae, onFileDialogCancel: oe, onFileDialogOpen: se, onFilesChange: U, onRemove: ce, onRemoveAll: le, preventDropOnDocument: ue, removeAllText: de = "Remove all", removeText: W = "Remove", showRemoveAll: fe = !1, slotProps: pe, slots: G, uploadText: me = te, useFsAccessApi: he, validator: ge, ..._e } = f({
+		props: e,
+		name: "SFileDropzone"
+	}), [ve, ye] = w.useState(i), K = c !== void 0, q = c ?? ve, J = w.useCallback((e, t) => {
+		K || ye(t), U?.(e, t);
+	}, [K, U]), { getInputProps: be, getRootProps: xe, inputRef: Se, isDragActive: Y } = O(ne({
+		accept: n,
+		autoFocus: r,
+		disabled: a,
+		getFilesFromEvent: d,
+		maxFiles: v,
+		maxSize: x,
+		minSize: k,
+		multiple: M,
+		noClick: N,
+		noDrag: P,
+		noDragEventsBubbling: F,
+		noKeyboard: I,
+		onDragEnter: L,
+		onDragLeave: R,
+		onDragOver: V,
+		onDrop: w.useCallback((e, t, n) => {
+			e.length > 0 && J(n, M === !1 || v === 1 ? e : [...q, ...e].slice(0, v && v > 0 ? v : void 0)), H?.(e, t, n);
+		}, [
+			q,
+			v,
+			M,
+			H,
+			J
+		]),
+		onDropAccepted: re,
+		onDropRejected: ie,
+		onError: ae,
+		onFileDialogCancel: oe,
+		onFileDialogOpen: se,
+		preventDropOnDocument: ue,
+		useFsAccessApi: he,
+		validator: ge
+	})), Ce = h(_, Se), X = {
+		disabled: a,
+		dragActive: Y,
+		error: s,
+		hasFiles: q.length > 0
+	}, we = G?.dropzone ?? o, Te = G?.fileList ?? l, { dropzone: Ee, fileList: De, input: Z, removeAllButton: Oe, ...ke } = pe ?? {}, { onClick: Ae, ...Q } = Oe ?? {}, je = B(Ee, X), Me = B(De, X), Ne = g(G?.dropzone, je ?? {}, X), Pe = g(G?.fileList, Me ?? {}, X), { sx: Fe, ...$ } = Ne, { sx: Ie, ...Le } = Pe;
+	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(ee, {
+		..._e,
+		ref: t,
+		disabled: a,
+		error: s,
+		ownerState: X,
+		slots: G,
+		slotProps: ke,
+		children: /* @__PURE__ */ D(we, {
+			...xe({
+				...$,
+				"aria-disabled": a || void 0,
+				"aria-invalid": s || void 0,
+				role: $.role ?? "button"
+			}),
+			sx: [(e) => {
+				let t = (e.vars ?? e).palette, n = s ? t.error : t.primary;
+				return {
+					alignItems: "center",
+					backgroundColor: a ? t.background.default : void 0,
+					border: "1px dashed",
+					borderColor: a ? t.divider : s ? t.error.main : t.divider,
+					borderRadius: 1,
+					cursor: a ? "default" : "pointer",
+					display: "flex",
+					flexWrap: "wrap",
+					justifyContent: "center",
+					outline: "none",
+					p: 4,
+					transition: "border 120ms ease-in, background-color 120ms ease-in, outline 120ms ease-in",
+					...Y ? {
+						backgroundColor: t.action.selected,
+						opacity: .5
+					} : {},
+					"&:hover": !a && !Y ? {
+						backgroundColor: t.action.hover,
+						borderColor: s ? t.error.main : t.grey[500]
+					} : void 0,
+					"&:focus-within": a ? void 0 : {
+						borderColor: s ? t.error.main : t.primary[400],
+						outline: `3px solid rgba(${n.mainChannel} / 0.5)`
+					}
+				};
+			}, ...m(Fe)],
+			children: [/* @__PURE__ */ E("input", {
+				...be(Z),
+				ref: Ce,
+				disabled: a || !!Z?.disabled
+			}), /* @__PURE__ */ D(l, {
+				direction: "row",
+				spacing: 1,
+				sx: { alignItems: "center" },
+				children: [/* @__PURE__ */ E(z, {
+					sx: {
+						backgroundColor: "transparent",
+						border: "1px dashed",
+						borderColor: "divider",
+						color: a ? "text.disabled" : "text.secondary"
+					},
+					children: /* @__PURE__ */ E(j, { fontSize: "small" })
+				}), /* @__PURE__ */ E(y, {
+					variant: "body2",
+					sx: { color: a ? "text.disabled" : "text.secondary" },
+					children: me
+				})]
+			})]
+		})
+	}), q.length > 0 && /* @__PURE__ */ D(Te, {
+		spacing: 1,
+		...Le,
+		sx: [{
+			color: a ? "text.disabled" : void 0,
+			mt: 1
+		}, ...m(Ie)],
+		children: [/* @__PURE__ */ E(l, {
+			component: "ul",
+			spacing: 1,
+			sx: {
+				listStyle: "none",
+				m: 0,
+				p: 0
+			},
+			children: q.map((e, t) => /* @__PURE__ */ D(l, {
+				component: "li",
+				direction: "row",
+				spacing: 1,
+				sx: {
+					alignItems: "center",
+					border: "1px solid",
+					borderColor: "divider",
+					borderRadius: 1,
+					flex: "1 1 auto",
+					p: 1
+				},
+				children: [
+					/* @__PURE__ */ E(S, {
+						extension: e.name.split(".").pop(),
+						sx: (e) => ({ opacity: a ? (e.vars ?? e).palette.action.disabledOpacity : 1 })
+					}),
+					/* @__PURE__ */ D(o, {
+						sx: { flex: "1 1 auto" },
+						children: [/* @__PURE__ */ E(y, {
+							variant: "body2",
+							children: e.name
+						}), /* @__PURE__ */ E(y, {
+							variant: "caption",
+							children: p(e.size)
+						})]
+					}),
+					/* @__PURE__ */ E(b, {
+						title: W,
+						children: /* @__PURE__ */ E("span", { children: /* @__PURE__ */ E(u, {
+							"aria-label": `${W} ${e.name}`,
+							disabled: a,
+							onClick: (n) => {
+								a || (ce?.(n, e), n.defaultPrevented || J(n, q.filter((e, n) => n !== t)));
+							},
+							children: /* @__PURE__ */ E(A, {})
+						}) })
+					})
+				]
+			}, `${e.name}-${e.size}-${t}`))
+		}), fe && /* @__PURE__ */ E(l, {
+			direction: "row",
+			sx: {
+				alignItems: "center",
+				justifyContent: "flex-end"
+			},
+			children: /* @__PURE__ */ E(C, {
+				type: "button",
+				variant: "text",
+				...Q,
+				disabled: a || !!Q.disabled,
+				onClick: (e) => {
+					a || (Ae?.(e), !e.defaultPrevented && (le?.(e), e.defaultPrevented || J(e, [])));
+				},
+				children: de
+			})
+		})]
+	})] });
+});
+V.displayName = "SFileDropzone";
+//#endregion
+export { V as t };

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

@@ -1,2 +1,3 @@
 export { default, default as SFileIcon } from './s-file-icon';
 export type { SFileIconProps } from './s-file-icon';
+export type {} from '../theme/component-augmentation';

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

@@ -1,13 +1,11 @@
+import { BoxProps } from '@mui/material/Box';
 import * as React from 'react';
 /**
  * Props for the SFileIcon component
  */
-export interface SFileIconProps {
+export interface SFileIconProps extends Omit<BoxProps, 'children' | 'component'> {
     /** File extension (without dot) to determine which icon to display */
     extension?: string;
 }
-export declare const SFileIcon: {
-    ({ extension }: SFileIconProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const SFileIcon: React.ForwardRefExoticComponent<Omit<SFileIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SFileIcon;