@plitzi/plitzi-ui 1.6.2

package/dist/components/FileUpload/FileUpload.styles.js

@@ -0,0 +1,146 @@
+import e from "../../helpers/cvaWrapper.js";
+var t = {
+	root: e("", {
+		variants: {
+			canDragAndDrop: {
+				true: "flex flex-col border-2 border-gray-300 dark:border-zinc-700 border-dashed rounded-md relative select-none",
+				false: "w-full"
+			},
+			size: {
+				md: "",
+				sm: "",
+				xs: "",
+				custom: ""
+			},
+			disabled: {
+				true: "",
+				false: ""
+			}
+		},
+		compoundVariants: [
+			{
+				disabled: !0,
+				canDragAndDrop: !0,
+				className: "cursor-not-allowed"
+			},
+			{
+				disabled: !1,
+				canDragAndDrop: !0,
+				className: "cursor-pointer"
+			},
+			{
+				canDragAndDrop: !0,
+				size: "md",
+				className: "p-4 gap-4"
+			},
+			{
+				canDragAndDrop: !0,
+				size: "sm",
+				className: "p-2 gap-3"
+			},
+			{
+				canDragAndDrop: !0,
+				size: "xs",
+				className: "p-1 gap-2"
+			}
+		],
+		defaultVariants: {
+			disabled: !1,
+			canDragAndDrop: !1,
+			size: "md"
+		}
+	}),
+	input: e("w-full ring-0 outline-0 text-zinc-900 dark:text-zinc-200", {
+		variants: { disabled: {
+			true: "cursor-not-allowed",
+			false: "cursor-pointer"
+		} },
+		compoundVariants: [],
+		defaultVariants: { disabled: !1 }
+	}),
+	inputContainer: e("items-start"),
+	iconFloatingContainer: e("", {
+		variants: { size: {
+			md: "h-6",
+			sm: "h-5",
+			xs: "h-4",
+			custom: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: {}
+	}),
+	items: e("flex w-full gap-4 flex-wrap", {
+		variants: { canDragAndDrop: {
+			true: "justify-center",
+			false: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { canDragAndDrop: !1 }
+	}),
+	item: e("flex flex-col overflow-hidden gap-1 shrink-0", {
+		variants: { size: {
+			md: "",
+			sm: "text-sm",
+			xs: "text-xs",
+			custom: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { size: "md" }
+	}),
+	itemImg: e("w-auto rounded", {
+		variants: { size: {
+			md: "h-30",
+			sm: "h-25",
+			xs: "h-20",
+			custom: ""
+		} },
+		compoundVariants: [],
+		defaultVariants: { size: "md" }
+	}),
+	itemLabel: e("whitespace-nowrap w-full truncate"),
+	label: e("text-center flex flex-col text-zinc-700 dark:text-zinc-300", {
+		variants: {
+			error: {
+				true: "text-red-500",
+				false: ""
+			},
+			size: {
+				md: "mt-2",
+				sm: "text-sm mt-1.5",
+				xs: "text-xs mt-1",
+				custom: ""
+			},
+			disabled: {
+				true: "text-gray-400 dark:text-zinc-500",
+				false: ""
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			size: "md",
+			error: !1,
+			disabled: !1
+		}
+	}),
+	subLabel: e("lowercase text-[9px] text-center w-full items-center justify-center", {
+		variants: {
+			size: {
+				md: "text-xs",
+				sm: "text-xs",
+				xs: "text-xs",
+				custom: ""
+			},
+			disabled: {
+				true: "text-gray-400 dark:text-zinc-500",
+				false: "text-gray-500 dark:text-zinc-400"
+			}
+		},
+		compoundVariants: [],
+		defaultVariants: {
+			size: "md",
+			disabled: !1
+		}
+	})
+};
+//#endregion
+export { t as default };

package/dist/components/FileUpload/components/DrawTypes/DrawTypes.d.ts

@@ -0,0 +1,8 @@
+export type DrawTypesProps = {
+    className?: string;
+    minSize: number;
+    maxSize: number;
+    types: string[];
+};
+declare const DrawTypes: ({ className, minSize, maxSize, types }: DrawTypesProps) => import("react/jsx-runtime").JSX.Element;
+export default DrawTypes;

package/dist/components/FileUpload/components/DrawTypes/DrawTypes.js

@@ -0,0 +1,29 @@
+import { bytesToSize as e } from "../../helpers/utils.js";
+import { useMemo as t } from "react";
+import { jsxs as n } from "react/jsx-runtime";
+//#region src/components/FileUpload/components/DrawTypes/DrawTypes.tsx
+var r = [
+	"jpeg",
+	"jpg",
+	"png"
+], i = ({ className: i = "", minSize: a = 0, maxSize: o = Infinity, types: s = r }) => /* @__PURE__ */ n("div", {
+	title: t(() => {
+		let t = [];
+		return o && t.push(`Max size: ${e(o)}`), a && t.push(`Min size: ${e(a)}`), t.push(`types: ${s.join(", ")}`), t.join(" | ");
+	}, [
+		o,
+		a,
+		s
+	]),
+	className: i,
+	children: [s.join(", "), o && o !== Infinity && /* @__PURE__ */ n("span", {
+		className: "inline-block uppercase mx-1 text-inherit",
+		children: [
+			"(",
+			e(o),
+			")"
+		]
+	})]
+});
+//#endregion
+export { i as default };

package/dist/components/FileUpload/components/DrawTypes/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DrawTypes } from './DrawTypes';
+export * from './DrawTypes';
+export default DrawTypes;

package/dist/components/FileUpload/components/DrawTypes/index.js

@@ -0,0 +1,5 @@
+import e from "./DrawTypes.js";
+//#region src/components/FileUpload/components/DrawTypes/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/FileUpload/components/FileUploadItem/FileUploadItem.d.ts

@@ -0,0 +1,12 @@
+import { default as FileUploadStyles, variantKeys } from '../../FileUpload.styles';
+import { ErrorMessageProps } from '../../../ErrorMessage';
+import { default as InputStyles } from '../../../Input/Input.styles';
+import { useThemeSharedProps } from '../../../../hooks/useTheme';
+export type FileUploadItemProps = {
+    value: File;
+    clearable?: boolean;
+    error?: ErrorMessageProps['message'] | ErrorMessageProps['error'];
+    onRemove?: () => void;
+} & Omit<useThemeSharedProps<typeof FileUploadStyles & typeof InputStyles, typeof variantKeys>, 'error'>;
+declare const FileUploadItem: ({ className, clearable, intent, size, error, disabled, canDragAndDrop, value, onRemove }: FileUploadItemProps) => import("react/jsx-runtime").JSX.Element;
+export default FileUploadItem;

package/dist/components/FileUpload/components/FileUploadItem/FileUploadItem.js

@@ -0,0 +1,49 @@
+import e from "../../../../hooks/useTheme/index.js";
+import t from "../../../Button/index.js";
+import { useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/FileUpload/components/FileUploadItem/FileUploadItem.tsx
+var a = ({ className: a, clearable: o, intent: s, size: c, error: l, disabled: u, canDragAndDrop: d, value: f, onRemove: p }) => {
+	let m = e("FileUpload", {
+		className: a,
+		componentKey: [
+			"item",
+			"itemImg",
+			"itemLabel"
+		],
+		variants: {
+			intent: s,
+			size: c,
+			error: !!l,
+			disabled: u,
+			canDragAndDrop: d
+		}
+	}), h = n(() => f.type.includes("image"), [f]);
+	return /* @__PURE__ */ i("div", {
+		className: m.item,
+		children: [h && /* @__PURE__ */ r("img", {
+			src: URL.createObjectURL(f),
+			alt: f.name,
+			className: m.itemImg
+		}), /* @__PURE__ */ i("div", {
+			className: "flex items-center gap-2",
+			children: [o && /* @__PURE__ */ r(t, {
+				size: "xs",
+				intent: "danger",
+				className: "border-none remove-file",
+				title: "Remove",
+				onClick: p,
+				children: /* @__PURE__ */ r(t.Icon, {
+					icon: "fas fa-trash-alt",
+					size: "xs"
+				})
+			}), /* @__PURE__ */ r("span", {
+				className: m.itemLabel,
+				title: f.name,
+				children: f.name
+			})]
+		})]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/FileUpload/components/FileUploadItem/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FileUploadItem } from './FileUploadItem';
+export * from './FileUploadItem';
+export default FileUploadItem;

package/dist/components/FileUpload/components/FileUploadItem/index.js

@@ -0,0 +1,5 @@
+import e from "./FileUploadItem.js";
+//#region src/components/FileUpload/components/FileUploadItem/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/FileUpload/components/FileUploadItems/FileUploadItems.d.ts

@@ -0,0 +1,12 @@
+import { default as FileUploadStyles, variantKeys } from '../../FileUpload.styles';
+import { ErrorMessageProps } from '../../../ErrorMessage';
+import { default as InputStyles } from '../../../Input/Input.styles';
+import { useThemeSharedProps } from '../../../../hooks/useTheme';
+export type FileUploadItemsProps = {
+    value?: File | File[];
+    clearable?: boolean;
+    error?: ErrorMessageProps['message'] | ErrorMessageProps['error'];
+    onRemove?: (index: number) => () => void;
+} & Omit<useThemeSharedProps<typeof FileUploadStyles & typeof InputStyles, typeof variantKeys>, 'error'>;
+declare const FileUploadItems: ({ className, clearable, intent, size, error, disabled, canDragAndDrop, value, onRemove }: FileUploadItemsProps) => import("react/jsx-runtime").JSX.Element;
+export default FileUploadItems;

package/dist/components/FileUpload/components/FileUploadItems/FileUploadItems.js

@@ -0,0 +1,34 @@
+import e from "../../../../hooks/useTheme/index.js";
+import t from "../FileUploadItem/index.js";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
+//#region src/components/FileUpload/components/FileUploadItems/FileUploadItems.tsx
+var a = ({ className: a, clearable: o, intent: s, size: c, error: l, disabled: u, canDragAndDrop: d, value: f, onRemove: p }) => {
+	let m = e("FileUpload", {
+		className: a,
+		componentKey: ["items"],
+		variants: {
+			intent: s,
+			size: c,
+			error: !!l,
+			disabled: u,
+			canDragAndDrop: d
+		}
+	}), h = n(() => (Array.isArray(f) ? f : f ? [f] : []).filter(Boolean), [f]);
+	return /* @__PURE__ */ r("div", {
+		className: i(m.items, "file-list"),
+		children: Array.isArray(h) && h.map((e, n) => /* @__PURE__ */ r(t, {
+			value: e,
+			clearable: o,
+			intent: s,
+			size: c,
+			disabled: u,
+			error: l,
+			canDragAndDrop: d,
+			onRemove: p?.(n)
+		}, n))
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/FileUpload/components/FileUploadItems/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FileUploadItems } from './FileUploadItems';
+export * from './FileUploadItems';
+export default FileUploadItems;

package/dist/components/FileUpload/components/FileUploadItems/index.js

@@ -0,0 +1,5 @@
+import e from "./FileUploadItems.js";
+//#region src/components/FileUpload/components/FileUploadItems/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/FileUpload/components/FileUploadMessage/FileUploadMessage.d.ts

@@ -0,0 +1,14 @@
+import { default as FileUploadStyles, variantKeys } from '../../FileUpload.styles';
+import { ErrorMessageProps } from '../../../ErrorMessage';
+import { default as InputStyles } from '../../../Input/Input.styles';
+import { useThemeSharedProps } from '../../../../hooks/useTheme';
+import { ReactNode } from 'react';
+export type FileUploadMessageProps = {
+    className?: string;
+    label?: ReactNode;
+    hasFiles: boolean;
+    disabled: boolean;
+    error?: ErrorMessageProps['message'] | ErrorMessageProps['error'];
+} & Omit<useThemeSharedProps<typeof FileUploadStyles & typeof InputStyles, typeof variantKeys>, 'error'>;
+declare const FileUploadMessage: ({ className, label, hasFiles, disabled, error, intent, size, canDragAndDrop }: FileUploadMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default FileUploadMessage;

package/dist/components/FileUpload/components/FileUploadMessage/FileUploadMessage.js

@@ -0,0 +1,36 @@
+import e from "../../../../hooks/useTheme/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/FileUpload/components/FileUploadMessage/FileUploadMessage.tsx
+var r = ({ className: r = "", label: i = "", hasFiles: a = !1, disabled: o = !1, error: s, intent: c, size: l, canDragAndDrop: u }) => /* @__PURE__ */ n("div", {
+	className: e("FileUpload", {
+		className: r,
+		componentKey: ["label"],
+		variants: {
+			intent: c,
+			size: l,
+			error: !!s,
+			disabled: o,
+			canDragAndDrop: u
+		}
+	}).label,
+	children: [
+		i && /* @__PURE__ */ t("span", {
+			className: "text-inherit",
+			children: i
+		}),
+		/* @__PURE__ */ n("span", {
+			className: "text-inherit",
+			children: [/* @__PURE__ */ t("span", {
+				className: "font-bold underline text-inherit",
+				children: "Click to Upload"
+			}), /* @__PURE__ */ t("span", {
+				className: "text-inherit",
+				children: " or drop a file here"
+			})]
+		}),
+		a && /* @__PURE__ */ t("span", { children: "Added Successfully!. Add another?" }),
+		s && /* @__PURE__ */ t("span", { children: typeof s == "boolean" ? "This field is invalid" : s })
+	]
+});
+//#endregion
+export { r as default };

package/dist/components/FileUpload/components/FileUploadMessage/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FileUploadMessage } from './FileUploadMessage';
+export * from './FileUploadMessage';
+export default FileUploadMessage;

package/dist/components/FileUpload/components/FileUploadMessage/index.js

@@ -0,0 +1,5 @@
+import e from "./FileUploadMessage.js";
+//#region src/components/FileUpload/components/FileUploadMessage/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/FileUpload/helpers/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const getFileSizeMB: (size: number) => number;
+export declare const getExtension: (file: File) => string | undefined;
+export declare const checkType: (file: File, types: string[]) => boolean | undefined;
+export declare const acceptedExtensions: (types: string[]) => string;
+export declare const bytesToSize: (bytes: number) => string;

package/dist/components/FileUpload/helpers/utils.js

@@ -0,0 +1,18 @@
+//#region src/components/FileUpload/helpers/utils.ts
+var e = (e) => e / 1e3 / 1e3, t = (e) => e.name.split(".").pop(), n = (e, n) => {
+	let r = t(e);
+	return r ? n.map((e) => e.toLowerCase()).includes(r.toLowerCase()) : void 0;
+}, r = (e) => e.length === 0 ? "" : e.map((e) => `.${e.toLowerCase()}`).join(","), i = (e) => {
+	let t = [
+		"Bytes",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	if (e === 0) return "0 Byte";
+	let n = parseInt(Math.floor(Math.log(e) / Math.log(1024)).toString(), 10);
+	return `${Math.round(e / 1024 ** n)} ${t[n]}`;
+};
+//#endregion
+export { r as acceptedExtensions, i as bytesToSize, n as checkType, t as getExtension, e as getFileSizeMB };

package/dist/components/FileUpload/hooks/useDragging.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+export type UseDraggingProps = {
+    labelRef: RefObject<HTMLDivElement | null>;
+    inputRef: RefObject<HTMLInputElement | null>;
+    disabled?: boolean;
+    onChange?: (files: File | File[]) => boolean;
+} & ({
+    multiple: true;
+    onDrop?: (files: File[]) => void;
+} | {
+    multiple?: false;
+    onDrop?: (files: File) => void;
+});
+export default function useDragging(props: UseDraggingProps): boolean;

package/dist/components/FileUpload/hooks/useDragging.js

@@ -0,0 +1,38 @@
+import { useCallback as e, useEffect as t, useState as n } from "react";
+//#region src/components/FileUpload/hooks/useDragging.ts
+var r = 0;
+function i(i) {
+	let { labelRef: a, inputRef: o, disabled: s = !1 } = i, [c, l] = n(!1), u = e((e) => {
+		s || e.target.closest(".remove-file") || e.target.closest(".file-list") || o.current?.click();
+	}, [s, o]), d = e((e) => {
+		e.preventDefault(), e.stopPropagation(), r++, e.dataTransfer?.items && e.dataTransfer.items.length !== 0 && l(!0);
+	}, []), f = e((e) => {
+		e.preventDefault(), e.stopPropagation(), r--, !(r > 0) && l(!1);
+	}, []), p = e((e) => {
+		e.preventDefault(), e.stopPropagation();
+	}, []), m = e((e) => {
+		e.preventDefault(), e.stopPropagation(), l(!1), r = 0;
+		let t = e.dataTransfer?.files;
+		if (t && t.length > 0) {
+			let e = i.multiple ? Array.from(t) : t[0];
+			if (!i.onChange?.(e)) return;
+			i.multiple, i.onDrop?.(e);
+		}
+	}, [i]);
+	return t(() => {
+		let e = a.current;
+		return !s && e && (e.addEventListener("click", u), e.addEventListener("dragenter", d), e.addEventListener("dragleave", f), e.addEventListener("dragover", p), e.addEventListener("drop", m)), () => {
+			!s && e && (e.removeEventListener("click", u), e.removeEventListener("dragenter", d), e.removeEventListener("dragleave", f), e.removeEventListener("dragover", p), e.removeEventListener("drop", m));
+		};
+	}, [
+		u,
+		d,
+		f,
+		p,
+		m,
+		a,
+		s
+	]), c;
+}
+//#endregion
+export { i as default };

package/dist/components/FileUpload/index.d.ts

@@ -0,0 +1,5 @@
+import { default as FileUpload } from './FileUpload';
+import { default as fileUploadTheme } from './FileUpload.styles';
+export * from './FileUpload';
+export { fileUploadTheme };
+export default FileUpload;

package/dist/components/FileUpload/index.js

@@ -0,0 +1,6 @@
+import e from "./FileUpload.js";
+import t from "./FileUpload.styles.js";
+//#region src/components/FileUpload/index.ts
+var n = e;
+//#endregion
+export { n as default, t as fileUploadTheme };

package/dist/components/Flex/Flex.d.ts

@@ -0,0 +1,10 @@
+import { default as FlexStyles, variantKeys } from './Flex.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+export type FlexProps = {
+    ref?: RefObject<HTMLDivElement | null>;
+    children?: ReactNode;
+    testId?: string;
+} & HTMLAttributes<HTMLDivElement> & useThemeSharedProps<typeof FlexStyles, typeof variantKeys>;
+declare const Flex: ({ ref, className, children, testId, direction, wrap, items, gap, justify, grow, basis, alignItems, shrink, ...props }: FlexProps) => import("react/jsx-runtime").JSX.Element;
+export default Flex;

package/dist/components/Flex/Flex.js

@@ -0,0 +1,26 @@
+import e from "../../hooks/useTheme/index.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Flex/Flex.tsx
+var n = ({ ref: n, className: r, children: i, testId: a, direction: o, wrap: s, items: c, gap: l, justify: u, grow: d, basis: f, alignItems: p, shrink: m, ...h }) => (r = e("Flex", {
+	className: r,
+	componentKey: "root",
+	variants: {
+		direction: o,
+		wrap: s,
+		items: c,
+		gap: l,
+		justify: u,
+		grow: d,
+		basis: f,
+		shrink: m,
+		alignItems: p
+	}
+}), /* @__PURE__ */ t("div", {
+	...h,
+	"data-testid": a,
+	className: r,
+	ref: n,
+	children: i
+}));
+//#endregion
+export { n as default };

package/dist/components/Flex/Flex.styles.d.ts

@@ -0,0 +1,26 @@
+export declare const variantKeys: {
+    readonly alignItems: readonly ["start", "end", "center", "baseline", "stretch"];
+    readonly direction: readonly ["column", "row", "row-reverse", "col-reverse"];
+    readonly wrap: readonly ["wrap", "nowrap", "wrap-reverse"];
+    readonly items: readonly ["start", "end", "center", "baseline", "stretch"];
+    readonly justify: readonly ["normal", "start", "end", "center", "between", "around", "evenly", "stretch"];
+    readonly gap: readonly [0, 1, 1.5, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96, "auto", "px", "0.5", "1.5", "2.5", "3.5", "1/2", "1/3", "2/3", "1/4", "2/4", "3/4", "1/5", "2/5", "3/5", "4/5", "1/6", "2/6", "3/6", "4/6", "5/6", "1/12", "2/12", "3/12", "4/12", "5/12", "6/12", "7/12", "8/12", "9/12", "10/12", "11/12", "full"];
+    readonly grow: readonly [true, false];
+    readonly basis: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+    readonly shrink: readonly [0, 1];
+};
+export declare const STYLES_COMPONENT_NAME = "Flex";
+declare const _default: {
+    root: (props?: ({
+        direction?: "column" | "row" | "row-reverse" | "col-reverse" | null | undefined;
+        grow?: boolean | null | undefined;
+        basis?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full" | null | undefined;
+        wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+        items?: "start" | "end" | "center" | "baseline" | "stretch" | null | undefined;
+        justify?: "start" | "end" | "center" | "stretch" | "normal" | "between" | "around" | "evenly" | null | undefined;
+        gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 1.5 | null | undefined;
+        shrink?: 0 | 1 | null | undefined;
+        alignItems?: "start" | "end" | "center" | "baseline" | "stretch" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+};
+export default _default;