@arkyn/components 3.0.1-beta.170 → 3.0.1-beta.172

package/dist/modules/components/phoneInput/phoneInputCountryOption/index.js

@@ -0,0 +1,24 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Check as n } from "lucide-react";
+//#region src/components/phoneInput/phoneInputCountryOption/index.tsx
+function r(r) {
+	let { country: i, isActive: a, handleChangeValue: o, size: s } = r;
+	return /* @__PURE__ */ t("div", {
+		onClick: () => o(i),
+		className: `arkynPhoneInputCountryOption ${s} ${a ? "active" : ""}`,
+		children: [
+			/* @__PURE__ */ e("img", {
+				src: i.flag,
+				alt: i.name,
+				className: "flag"
+			}),
+			i.name,
+			" ",
+			/* @__PURE__ */ e("span", { children: i.code }),
+			/* @__PURE__ */ e(n, { className: "check" })
+		]
+	});
+}
+//#endregion
+export { r as PhoneInputCountryOption };

package/dist/modules/components/phoneInput/phoneInputCountryOptionsContainer/index.js

@@ -0,0 +1,34 @@
+import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
+/* empty css       */
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx
+function o(o) {
+	let { children: s, isOpen: c, onSearch: l, search: u, placeholder: d } = o, f = n(null), [p, m] = r("bottom");
+	function h(e) {
+		l(e.target.value);
+	}
+	return e(c), t(() => {
+		c && (() => {
+			if (!f.current) return;
+			let e = f.current.parentElement;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			window.innerHeight - t.bottom < 300 && t.top > 300 ? m("top") : m("bottom");
+		})();
+	}, [c]), c ? /* @__PURE__ */ a("div", {
+		className: `arkynPhoneInputCountryOptionsContainer ${p}`,
+		ref: f,
+		children: [/* @__PURE__ */ i("input", {
+			type: "search",
+			name: "search-select",
+			className: "arkynPhoneInputCountryOptionsContainerSearchSelect",
+			value: u,
+			id: "input-search",
+			placeholder: d,
+			onChange: h
+		}), s]
+	}) : null;
+}
+//#endregion
+export { o as PhoneInputCountryOptionsContainer };

package/dist/modules/components/phoneInput/phoneInputCountrySelector/index.js

@@ -0,0 +1,26 @@
+import { Divider as e } from "../../divider/index.js";
+/* empty css       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { ChevronDown as r } from "lucide-react";
+//#region src/components/phoneInput/phoneInputCountrySelector/index.tsx
+function i(i) {
+	let { currentCountry: a, onClick: o } = i;
+	return /* @__PURE__ */ n("div", {
+		className: "phoneInputSelectCountry",
+		onClick: o,
+		children: [
+			/* @__PURE__ */ t("img", {
+				className: "flag",
+				src: a.flag,
+				alt: a.name
+			}),
+			/* @__PURE__ */ t(r, {
+				className: "chevronDown",
+				strokeWidth: 2.5
+			}),
+			/* @__PURE__ */ t(e, { orientation: "vertical" })
+		]
+	});
+}
+//#endregion
+export { i as PhoneInputCountrySelector };

package/dist/modules/components/phoneInput/phoneInputMask/index.js

@@ -0,0 +1,50 @@
+import { MAX_LENGTH as e, TYPES as t, applyMask as n, clear as r, getMask as i } from "../../../utils/phoneInputUtilities.js";
+/* empty css      */
+import { forwardRef as a, useEffect as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { InputMask as l } from "@react-input/mask";
+//#region src/components/phoneInput/phoneInputMask/index.tsx
+var u = a((e, t) => /* @__PURE__ */ c("input", {
+	ref: t,
+	...e
+})), d = a((a, d) => {
+	let { onFocus: f, readonly: p, onBlur: m, size: h, onChange: g, value: _, currentCountry: v, disabled: y, id: b } = a, [x, S] = s(!1), C = typeof v.mask == "string" ? v.mask : v.mask[0];
+	o(() => {
+		x ? g(C) : S(!0);
+	}, [
+		g,
+		C,
+		x
+	]);
+	let w = `phoneInputMask ${h}`;
+	function T(a) {
+		let o = r(a.target.value), s = i(o);
+		o.length > e || (o = n(o, t[s]), a.target.value = o, g(o));
+	}
+	return v.code === "+55" ? /* @__PURE__ */ c("input", {
+		id: b,
+		value: _,
+		onChange: T,
+		className: w,
+		onFocus: f,
+		onBlur: m,
+		disabled: y,
+		ref: d
+	}) : /* @__PURE__ */ c(l, {
+		id: b,
+		value: _,
+		readOnly: p,
+		onChange: (e) => g(e.target.value),
+		className: w,
+		component: u,
+		onFocus: f,
+		onBlur: m,
+		disabled: y,
+		mask: C,
+		showMask: !0,
+		replacement: { _: /\d/ },
+		ref: d
+	});
+});
+//#endregion
+export { d as PhoneInputMask };

package/dist/modules/components/popover/index.js

@@ -0,0 +1,38 @@
+import { useScrollLock as e } from "../../hooks/useScrollLock.js";
+/* empty css       */
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { motion as i } from "framer-motion";
+//#region src/components/popover/index.tsx
+function a(a) {
+	let { children: o, button: s, closeOnClick: c, className: l = "", orientation: u = "bottomLeft" } = a, [d, f] = t(!1), p = `arkynPopover ${u} ${d ? "visibleTrue" : "visibleFalse"} ${l}`;
+	function m() {
+		d || f(!0);
+	}
+	return e(d), /* @__PURE__ */ r("div", {
+		className: p,
+		onClick: m,
+		children: [
+			s,
+			/* @__PURE__ */ n(i.div, {
+				style: { visibility: d ? "visible" : "hidden" },
+				transition: {
+					ease: "easeOut",
+					duration: 0
+				},
+				initial: { opacity: 0 },
+				animate: { opacity: +!!d },
+				exit: { opacity: 0 },
+				onClick: () => c && f(!1),
+				className: "arkynPopoverContent",
+				children: o
+			}),
+			d && /* @__PURE__ */ n("div", {
+				onClick: () => f(!1),
+				className: "arkynPopoverOverlay"
+			})
+		]
+	});
+}
+//#endregion
+export { a as Popover };

package/dist/modules/components/radio/radioBox/index.js

@@ -0,0 +1,25 @@
+import { useRadioGroup as e } from "../radioContext.js";
+/* empty css       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/radio/radioBox/index.tsx
+function r(r) {
+	let { value: i, size: a, disabled: o, children: s, className: c = "", onClick: l, onFocus: u, ...d } = r, { handleChange: f, size: p, value: m, isError: h, disabled: g } = e(), _ = m === i, v = a || p, y = o || g, b = `arkynRadioBox ${v} ${_ ? "checkedTrue" : "checkedFalse"} ${h ? "errorTrue" : "errorFalse"} ${y ? "disabledTrue" : "disabledFalse"} ${c}`;
+	function x(e) {
+		l?.(e), f(i);
+	}
+	function S(e) {
+		u?.(e), f(i);
+	}
+	return /* @__PURE__ */ n("label", {
+		className: b.trim(),
+		children: [/* @__PURE__ */ t("button", {
+			type: "button",
+			disabled: y,
+			onClick: x,
+			onFocus: S,
+			...d
+		}), s]
+	});
+}
+//#endregion
+export { r as RadioBox };

package/dist/modules/components/radio/radioContext.js

@@ -0,0 +1,22 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/radio/radioContext.tsx
+var r = e({});
+function i(e) {
+	let { children: t, size: i, isError: a, handleChange: o, value: s, disabled: c } = e;
+	return /* @__PURE__ */ n(r.Provider, {
+		value: {
+			handleChange: o,
+			value: s,
+			size: i,
+			isError: a,
+			disabled: c
+		},
+		children: t
+	});
+}
+function a() {
+	return t(r);
+}
+//#endregion
+export { i as RadioProvider, a as useRadioGroup };

package/dist/modules/components/radio/radioGroup/index.js

@@ -0,0 +1,42 @@
+import { useForm as e } from "../../../hooks/useForm.js";
+import { FieldTemplate as t } from "../../../services/fieldTemplate.js";
+import { RadioProvider as n } from "../radioContext.js";
+/* empty css       */
+import { useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/radio/radioGroup/index.tsx
+function o(o) {
+	let { defaultValue: s = "", name: c, label: l, showAsterisk: u, errorMessage: d, value: f, onChange: p, size: m = "md", className: h = "", disabled: g = !1, unShowFieldTemplate: _ = !1, orientation: v = "vertical", ...y } = o, [b, x] = r(s), { fieldErrors: S } = e();
+	function C(e) {
+		x(e), p && p(e);
+	}
+	let w = d || S?.[c], T = !!w, E = `arkynRadioGroup ${m}`;
+	return /* @__PURE__ */ i(t, {
+		name: c,
+		label: l,
+		showAsterisk: u,
+		className: h,
+		errorMessage: w,
+		unShowFieldTemplate: _,
+		orientation: v,
+		children: /* @__PURE__ */ a(n, {
+			isError: T,
+			size: m,
+			value: f || b,
+			handleChange: C,
+			disabled: g,
+			children: [/* @__PURE__ */ i("input", {
+				style: { display: "none" },
+				type: "text",
+				readOnly: !0,
+				name: c,
+				value: f || b
+			}), /* @__PURE__ */ i("div", {
+				className: E.trim(),
+				...y
+			})]
+		})
+	});
+}
+//#endregion
+export { o as RadioGroup };

package/dist/modules/components/richText/blockButton/index.js

@@ -0,0 +1,21 @@
+import { textAlignTypes as e } from "../../../templates/richTextTemplates.js";
+import { isBlockActive as t } from "../../../services/isBlockActive.js";
+import { toggleBlock as n } from "../../../services/toggleBlock.js";
+/* empty css       */
+import { jsx as r } from "react/jsx-runtime";
+import { useSlate as i } from "slate-react";
+//#region src/components/richText/blockButton/index.tsx
+function a({ format: a, icon: o }) {
+	let s = i(), c = t(s, a, e.includes(a) ? "align" : "type") ? "activeTrue" : "activeFalse";
+	function l(e) {
+		e.preventDefault(), n(s, a);
+	}
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		className: `arkynRichTextBlockButton ${c}`,
+		onMouseDown: l,
+		children: /* @__PURE__ */ r(o, {})
+	});
+}
+//#endregion
+export { a as BlockButton };

package/dist/modules/components/richText/element/index.js

@@ -0,0 +1,73 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/richText/element/index.tsx
+function n({ attributes: n, children: r, element: i }) {
+	let a = { textAlign: i.align };
+	switch (i.type) {
+		case "blockQuote": return /* @__PURE__ */ e("blockquote", {
+			className: "arkynElementBlockquote",
+			style: a,
+			...n,
+			children: r
+		});
+		case "bulletedList": return /* @__PURE__ */ e("ul", {
+			className: "arkynElementBulletList",
+			style: a,
+			...n,
+			children: r
+		});
+		case "headingOne": return /* @__PURE__ */ e("h1", {
+			className: "arkynElementHeadingOne",
+			style: a,
+			...n,
+			children: r
+		});
+		case "headingTwo": return /* @__PURE__ */ e("h2", {
+			className: "arkynElementHeadingTwo",
+			style: a,
+			...n,
+			children: r
+		});
+		case "listItem": return /* @__PURE__ */ e("li", {
+			className: "arkynElementListItem",
+			style: a,
+			...n,
+			children: r
+		});
+		case "numberedList": return /* @__PURE__ */ e("ol", {
+			className: "arkynElementNumberedList",
+			style: a,
+			...n,
+			children: r
+		});
+		case "image": return /* @__PURE__ */ t("div", {
+			style: a,
+			...n,
+			children: [/* @__PURE__ */ e("img", {
+				className: "arkynElementImage",
+				alt: "arkynElementImage",
+				src: i?.src || ""
+			}), r]
+		});
+		case "video": return /* @__PURE__ */ t("div", {
+			style: a,
+			...n,
+			children: [/* @__PURE__ */ e("iframe", {
+				className: "arkynElementVideo",
+				src: i?.src || "",
+				title: "YouTube video player",
+				allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+				referrerPolicy: "strict-origin-when-cross-origin",
+				allowFullScreen: !0
+			}), r]
+		});
+		default: return /* @__PURE__ */ e("p", {
+			className: "arkynElementParagraph",
+			style: a,
+			...n,
+			children: r
+		});
+	}
+}
+//#endregion
+export { n as Element };

package/dist/modules/components/richText/index.js

@@ -0,0 +1,144 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { FieldTemplate as t } from "../../services/fieldTemplate.js";
+import { extractTextFromNode as n } from "../../services/extractTextFromNode.js";
+import { toggleMark as r } from "../../services/toggleMark.js";
+import { hotKeys as i, initialValue as a } from "../../templates/richTextTemplates.js";
+import { BlockButton as o } from "./blockButton/index.js";
+import { Element as s } from "./element/index.js";
+import { InsertImage as ee } from "./insertImage/index.js";
+import { InsertVideo as te } from "./insertVideo/index.js";
+import { Leaf as ne } from "./leaf/index.js";
+import { MarkButton as c } from "./markButton/index.js";
+import { Toolbar as l } from "./toolbar/index.js";
+/* empty css       */
+import { useCallback as u, useId as re, useMemo as ie, useRef as ae, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { AlignCenter as oe, AlignJustify as se, AlignLeft as ce, AlignRight as le, Bold as m, Code as h, Heading1 as g, Heading2 as _, Italic as v, Quote as y, Underline as b } from "lucide-react";
+import x from "is-hotkey";
+import { Transforms as S, createEditor as C } from "slate";
+import { withHistory as w } from "slate-history";
+import { Editable as T, Slate as E, withReact as D } from "slate-react";
+//#region src/components/richText/index.tsx
+function O(O) {
+	let { name: k, hiddenButtons: A, imageConfig: j, videoConfig: M, className: N = "", defaultValue: P = "[]", enforceCharacterLimit: F = !1, onChangeCharactersCount: I, baseErrorMessage: L, maxLimit: R = 1e4, onChange: z, isError: B, label: V, showAsterisk: H, id: U, orientation: W = "vertical", unShowFieldTemplate: ue = !1 } = O, G = ie(() => w(D(C())), []), { fieldErrors: de } = e();
+	function K() {
+		try {
+			let e = JSON.parse(P);
+			return !Array.isArray(e) || e.length <= 0 ? a : e.every((e) => typeof e == "object" && !!e && "type" in e && "children" in e) ? e : a;
+		} catch {
+			return a;
+		}
+	}
+	let [q, fe] = d(n(K()).length), [pe, me] = d(JSON.stringify(K()) || "[]"), [he, J] = d(!1), ge = ae(null), _e = re(), Y = U || _e, X = L || de?.[k], ve = B || !!X, ye = u(ne, []), be = u(s, []);
+	function Z(e) {
+		let t = n(e);
+		fe(t.length), I?.(t.length), !(F && t.length >= R) && (me(JSON.stringify(e)), z?.(e), G.children = e, S.setNodes(G, { children: e }));
+	}
+	let xe = `arkynRichText ${ve || R < q ? "errorTrue" : "errorFalse"} ${he ? "focusTrue" : "focusFalse"}`, Q = R - q;
+	function $(e) {
+		return !A?.includes(e);
+	}
+	return /* @__PURE__ */ f(t, {
+		name: k,
+		label: V,
+		showAsterisk: H,
+		className: N,
+		errorMessage: X,
+		unShowFieldTemplate: ue,
+		orientation: W,
+		children: /* @__PURE__ */ p(E, {
+			editor: G,
+			initialValue: K(),
+			onChange: Z,
+			onValueChange: Z,
+			children: [
+				/* @__PURE__ */ p("div", {
+					className: xe,
+					children: [
+						/* @__PURE__ */ p(l, { children: [
+							$("headingOne") && /* @__PURE__ */ f(o, {
+								format: "headingOne",
+								icon: g
+							}),
+							$("headingTwo") && /* @__PURE__ */ f(o, {
+								format: "headingTwo",
+								icon: _
+							}),
+							$("blockQuote") && /* @__PURE__ */ f(o, {
+								format: "blockQuote",
+								icon: y
+							}),
+							$("bold") && /* @__PURE__ */ f(c, {
+								format: "bold",
+								icon: m
+							}),
+							$("italic") && /* @__PURE__ */ f(c, {
+								format: "italic",
+								icon: v
+							}),
+							$("underline") && /* @__PURE__ */ f(c, {
+								format: "underline",
+								icon: b
+							}),
+							$("code") && /* @__PURE__ */ f(c, {
+								format: "code",
+								icon: h
+							}),
+							$("left") && /* @__PURE__ */ f(o, {
+								format: "left",
+								icon: ce
+							}),
+							$("right") && /* @__PURE__ */ f(o, {
+								format: "right",
+								icon: le
+							}),
+							$("center") && /* @__PURE__ */ f(o, {
+								format: "center",
+								icon: oe
+							}),
+							$("justify") && /* @__PURE__ */ f(o, {
+								format: "justify",
+								icon: se
+							}),
+							j && $("image") && /* @__PURE__ */ f(ee, { ...j }),
+							$("video") && /* @__PURE__ */ f(te, { ...M })
+						] }),
+						/* @__PURE__ */ f(T, {
+							className: "editorContainer",
+							renderElement: be,
+							renderLeaf: ye,
+							spellCheck: !0,
+							ref: ge,
+							id: Y,
+							onFocus: () => J(!0),
+							onBlur: () => J(!1),
+							onKeyDown: (e) => {
+								for (let t in i) if (x(t, e)) {
+									e.preventDefault();
+									let n = i[t];
+									r(G, n);
+								}
+							}
+						}),
+						Q < 0 && /* @__PURE__ */ f("div", {
+							className: "restatesCharacters",
+							children: Q
+						})
+					]
+				}),
+				/* @__PURE__ */ f("input", {
+					type: "hidden",
+					name: k,
+					value: pe.slice(0, R)
+				}),
+				/* @__PURE__ */ f("input", {
+					type: "hidden",
+					name: `${k}Count`,
+					value: q
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { O as RichText };

package/dist/modules/components/richText/insertImage/index.js

@@ -0,0 +1,95 @@
+import { Button as e } from "../../button/index.js";
+import { Input as t } from "../../input/index.js";
+import { ImageUpload as n } from "../../imageUpload/index.js";
+import { ModalContainer as r } from "../../modal/modalContainer/index.js";
+import { ModalFooter as i } from "../../modal/modalFooter/index.js";
+import { ModalHeader as a } from "../../modal/modalHeader/index.js";
+import { TabButton as o } from "../../tab/tabButton/index.js";
+import { TabContainer as s } from "../../tab/tabContainer/index.js";
+/* empty css       */
+import { useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Image as f } from "lucide-react";
+import { useSlate as p } from "slate-react";
+//#region src/components/richText/insertImage/index.tsx
+function m(m) {
+	let { action: h, tabLabels: g = ["Adicionar URL", "Upload de arquivo"], modalCancelButton: _ = "Cancelar", modalConfirmButton: v = "Confirmar", modalInputImageLabel: y = "Imagem:", modalInputUrlLabel: b = "URL da imagem:", modalTitle: x = "Inserir imagem" } = m, S = p(), [C, w] = c(!1), [T, E] = c(""), [D, O] = c("url");
+	function k(e) {
+		e.preventDefault(), !(!T || T === "") && (S.insertNodes([
+			{
+				type: "paragraph",
+				children: [{ text: "" }]
+			},
+			{
+				type: "image",
+				src: T,
+				children: [{ text: "" }]
+			},
+			{
+				type: "paragraph",
+				children: [{ text: "" }]
+			}
+		]), w(!1));
+	}
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("button", {
+		type: "button",
+		className: "arkynRichTextInsertImage",
+		onMouseDown: () => w(!0),
+		children: /* @__PURE__ */ u(f, {})
+	}), /* @__PURE__ */ d(r, {
+		isVisible: C,
+		makeInvisible: () => w(!1),
+		children: [
+			/* @__PURE__ */ u(a, { children: x }),
+			/* @__PURE__ */ d("div", {
+				className: "arkynRichTextInsertImageModalContent",
+				children: [
+					/* @__PURE__ */ d(s, {
+						defaultValue: D,
+						onChange: O,
+						children: [/* @__PURE__ */ u(o, {
+							value: "url",
+							children: g[0]
+						}), /* @__PURE__ */ u(o, {
+							value: "file",
+							children: g[1]
+						})]
+					}),
+					D === "url" && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
+						type: "text",
+						name: "richTextImageURL",
+						label: b,
+						showAsterisk: !0,
+						defaultValue: T,
+						onChange: (e) => E(e.target.value)
+					}), T && /* @__PURE__ */ u("img", {
+						className: "arkynRichTextInsertImageModalPreviewImage",
+						src: T,
+						alt: "preview"
+					})] }),
+					D === "file" && /* @__PURE__ */ u(n, {
+						name: "richTextImageURL",
+						action: h,
+						label: y,
+						showAsterisk: !0,
+						defaultValue: T,
+						onChange: (e) => E(e)
+					})
+				]
+			}),
+			/* @__PURE__ */ d(i, { children: [/* @__PURE__ */ u(e, {
+				type: "button",
+				scheme: "danger",
+				variant: "outline",
+				onClick: () => w(!1),
+				children: _
+			}), /* @__PURE__ */ u(e, {
+				type: "button",
+				onClick: k,
+				children: v
+			})] })
+		]
+	})] });
+}
+//#endregion
+export { m as InsertImage };