@arkyn/components 3.0.1-beta.95 → 3.0.2

package/dist/modules/components/pagination/chevronButton/index.js

@@ -0,0 +1,21 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { ChevronLeft as t, ChevronRight as n } from "lucide-react";
+//#region src/components/pagination/chevronButton/index.tsx
+function r(r) {
+	let { orientation: i, handlePageChange: a, disabled: o } = r;
+	return /* @__PURE__ */ e("button", {
+		type: "button",
+		className: "arkynChevronPageButton",
+		disabled: o,
+		onClick: a,
+		children: {
+			left: /* @__PURE__ */ e(t, {}),
+			right: /* @__PURE__ */ e(n, {})
+		}[i]
+	});
+}
+//#endregion
+export { r as ChevronButton };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/pagination/chevronButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/pagination/chevronButton/index.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype ChevronButtonProps = {\n\torientation: \"left\" | \"right\";\n\tdisabled: boolean;\n\thandlePageChange: () => void;\n};\n\nfunction ChevronButton(props: ChevronButtonProps) {\n\tconst { orientation, handlePageChange, disabled } = props;\n\tconst icon = { left: <ChevronLeft />, right: <ChevronRight /> };\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName=\"arkynChevronPageButton\"\n\t\t\tdisabled={disabled}\n\t\t\tonClick={handlePageChange}\n\t\t>\n\t\t\t{icon[orientation]}\n\t\t</button>\n\t);\n}\n\nexport { ChevronButton };\n"],"mappings":";;;;AASA,SAAS,EAAc,GAA2B;CACjD,IAAM,EAAE,gBAAa,qBAAkB,gBAAa;CAGpD,OACC,kBAAC,UAAD;EACC,MAAK;EACL,WAAU;EACA;EACV,SAAS;YAER;GATY,MAAM,kBAAC,GAAD,CAAc,CAAA;GAAG,OAAO,kBAAC,GAAD,CAAe,CAAA;EASzD,EAAK;CACC,CAAA;AAEV"}

package/dist/modules/components/pagination/chevronButton/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynChevronPageButton{background-color:inherit;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;max-width:28px;min-height:28px;max-height:28px;display:flex}.arkynChevronPageButton>svg{color:var(--text-muted,#a1a1aa);width:20px;height:20px}.arkynChevronPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynChevronPageButton:hover{filter:brightness(1.2)}.arkynChevronPageButton:disabled{filter:brightness();cursor:not-allowed;opacity:.5}}

package/dist/modules/components/pagination/currentButton/index.js

@@ -0,0 +1,15 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/pagination/currentButton/index.tsx
+function t({ currentPage: t }) {
+	return /* @__PURE__ */ e("button", {
+		type: "button",
+		className: "arkynPaginationCurrentButton",
+		disabled: !0,
+		children: t
+	});
+}
+//#endregion
+export { t as CurrentButton };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/pagination/currentButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/pagination/currentButton/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype CurrentButtonProps = {\n\tcurrentPage: number;\n};\n\nfunction CurrentButton({ currentPage }: CurrentButtonProps) {\n\treturn (\n\t\t<button type=\"button\" className=\"arkynPaginationCurrentButton\" disabled>\n\t\t\t{currentPage}\n\t\t</button>\n\t);\n}\n\nexport { CurrentButton };\n"],"mappings":";;;AAMA,SAAS,EAAc,EAAE,kBAAmC;CAC3D,OACC,kBAAC,UAAD;EAAQ,MAAK;EAAS,WAAU;EAA+B,UAAA;YAC7D;CACM,CAAA;AAEV"}

package/dist/modules/components/pagination/currentButton/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPaginationCurrentButton{background-color:rgb(var(--spotlight-primary,17, 109, 220));color:var(--white,#fff);text-align:center;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;min-height:28px;font-size:14px;font-weight:500;line-height:14px;display:flex}}

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

@@ -0,0 +1,54 @@
+import { ChevronButton as e } from "./chevronButton/index.js";
+import { CurrentButton as t } from "./currentButton/index.js";
+import { PageButton as n } from "./pageButton/index.js";
+import { PaginationService as r } from "./paginationService.js";
+import { Spread as i } from "./spread/index.js";
+/* empty css       */
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/pagination/index.tsx
+function c(c) {
+	let { totalCountRegisters: l, siblingsCount: u, currentPage: d, registerPerPage: f, onChange: p, ...m } = c, { currentPage: h, siblingsCount: g, previousPages: _, nextPages: v, lastPage: y, handlePageChange: b, handleMinusChange: x, handlePlusChange: S } = new r({
+		totalCountRegisters: l,
+		currentPage: d,
+		registerPerPage: f,
+		siblingsCount: u,
+		onChange: p
+	});
+	return /* @__PURE__ */ s("div", {
+		className: "arkynPagination",
+		...m,
+		children: [
+			/* @__PURE__ */ o(e, {
+				orientation: "left",
+				handlePageChange: x,
+				disabled: h <= 1
+			}),
+			h > 1 + g && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(n, {
+				page: 1,
+				handlePageChange: () => b(1)
+			}), h > 2 + g && /* @__PURE__ */ o(i, {})] }),
+			_.map((e) => /* @__PURE__ */ o(n, {
+				page: e,
+				handlePageChange: x
+			}, e)),
+			/* @__PURE__ */ o(t, { currentPage: h }),
+			v.map((e) => /* @__PURE__ */ o(n, {
+				page: e,
+				handlePageChange: S
+			}, e)),
+			h + g < y && /* @__PURE__ */ s(a, { children: [h + 1 + g < y && /* @__PURE__ */ o(i, {}), /* @__PURE__ */ o(n, {
+				page: y,
+				handlePageChange: () => b(y)
+			})] }),
+			/* @__PURE__ */ o(e, {
+				orientation: "right",
+				handlePageChange: S,
+				disabled: h >= y
+			})
+		]
+	});
+}
+//#endregion
+export { c as Pagination };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/pagination/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\n\nimport { ChevronButton } from \"./chevronButton\";\nimport { CurrentButton } from \"./currentButton\";\nimport { PageButton } from \"./pageButton\";\nimport { PaginationService } from \"./paginationService\";\nimport { Spread } from \"./spread\";\n\nimport \"./styles.css\";\n\n/**\n * Props for the Pagination component.\n */\ntype PaginationProps = {\n\t/**\n\t * Number of sibling pages to show on each side of the current page.\n\t * @default 1\n\t */\n\tsiblingsCount?: number;\n\t/**\n\t * Total number of records/items to paginate.\n\t */\n\ttotalCountRegisters: number;\n\t/**\n\t * The currently active page number (1-indexed).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Number of records to display per page.\n\t * @default 10\n\t */\n\tregisterPerPage?: number;\n\t/**\n\t * Callback function triggered when the page changes.\n\t * @param page - The new page number\n\t */\n\tonChange?: (page: number) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, \"onChange\">;\n\n/**\n * Pagination — navigation control for paginated data sets.\n *\n * Renders page number buttons, prev/next arrows, and spread indicators (…)\n * when the page count exceeds the visible range.\n *\n * @param props.totalCountRegisters - Total number of records. Required.\n * @param props.currentPage - The currently active page (1-indexed). Required.\n * @param props.registerPerPage - Records per page. Default: 10\n * @param props.siblingsCount - Number of sibling pages visible on each side of the current page. Default: 1\n * @param props.onChange - Callback fired when the user selects a different page.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Pagination JSX element.\n *\n * @example\n * ```tsx\n * <Pagination\n *   totalCountRegisters={250}\n *   currentPage={page}\n *   registerPerPage={20}\n *   siblingsCount={1}\n *   onChange={(p) => setPage(p)}\n * />\n * ```\n */\n\nfunction Pagination(props: PaginationProps) {\n\tconst {\n\t\ttotalCountRegisters: baseTotalCountRegisters,\n\t\tsiblingsCount: baseSiblingsCount,\n\t\tcurrentPage: baseCurrentPage,\n\t\tregisterPerPage: baseRegisterPerPage,\n\t\tonChange: baseOnChange,\n\t\t...rest\n\t} = props;\n\n\tconst {\n\t\tcurrentPage,\n\t\tsiblingsCount,\n\t\tpreviousPages,\n\t\tnextPages,\n\t\tlastPage,\n\t\thandlePageChange,\n\t\thandleMinusChange,\n\t\thandlePlusChange,\n\t} = new PaginationService({\n\t\ttotalCountRegisters: baseTotalCountRegisters,\n\t\tcurrentPage: baseCurrentPage,\n\t\tregisterPerPage: baseRegisterPerPage,\n\t\tsiblingsCount: baseSiblingsCount,\n\t\tonChange: baseOnChange,\n\t});\n\n\treturn (\n\t\t<div className=\"arkynPagination\" {...rest}>\n\t\t\t<ChevronButton\n\t\t\t\torientation=\"left\"\n\t\t\t\thandlePageChange={handleMinusChange}\n\t\t\t\tdisabled={currentPage <= 1}\n\t\t\t/>\n\n\t\t\t{currentPage > 1 + siblingsCount && (\n\t\t\t\t<>\n\t\t\t\t\t<PageButton page={1} handlePageChange={() => handlePageChange(1)} />\n\t\t\t\t\t{currentPage > 2 + siblingsCount && <Spread />}\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{previousPages.map((page) => (\n\t\t\t\t<PageButton\n\t\t\t\t\tkey={page}\n\t\t\t\t\tpage={page}\n\t\t\t\t\thandlePageChange={handleMinusChange}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t<CurrentButton currentPage={currentPage} />\n\n\t\t\t{nextPages.map((page) => (\n\t\t\t\t<PageButton\n\t\t\t\t\tkey={page}\n\t\t\t\t\tpage={page}\n\t\t\t\t\thandlePageChange={handlePlusChange}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t{currentPage + siblingsCount < lastPage && (\n\t\t\t\t<>\n\t\t\t\t\t{currentPage + 1 + siblingsCount < lastPage && <Spread />}\n\t\t\t\t\t<PageButton\n\t\t\t\t\t\tpage={lastPage}\n\t\t\t\t\t\thandlePageChange={() => handlePageChange(lastPage)}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t<ChevronButton\n\t\t\t\torientation=\"right\"\n\t\t\t\thandlePageChange={handlePlusChange}\n\t\t\t\tdisabled={currentPage >= lastPage}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport { Pagination };\n"],"mappings":";;;;;;;;AAmEA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,qBAAqB,GACrB,eAAe,GACf,aAAa,GACb,iBAAiB,GACjB,UAAU,GACV,GAAG,MACA,GAEE,EACL,gBACA,kBACA,kBACA,cACA,aACA,qBACA,sBACA,wBACG,IAAI,EAAkB;EACzB,qBAAqB;EACrB,aAAa;EACb,iBAAiB;EACjB,eAAe;EACf,UAAU;CACX,CAAC;CAED,OACC,kBAAC,OAAD;EAAK,WAAU;EAAkB,GAAI;YAArC;GACC,kBAAC,GAAD;IACC,aAAY;IACZ,kBAAkB;IAClB,UAAU,KAAe;GACzB,CAAA;GAEA,IAAc,IAAI,KAClB,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,GAAD;IAAY,MAAM;IAAG,wBAAwB,EAAiB,CAAC;GAAI,CAAA,GAClE,IAAc,IAAI,KAAiB,kBAAC,GAAD,CAAS,CAAA,CAC5C,EAAA,CAAA;GAGF,EAAc,KAAK,MACnB,kBAAC,GAAD;IAEO;IACN,kBAAkB;GAClB,GAHK,CAGL,CACD;GAED,kBAAC,GAAD,EAA4B,eAAc,CAAA;GAEzC,EAAU,KAAK,MACf,kBAAC,GAAD;IAEO;IACN,kBAAkB;GAClB,GAHK,CAGL,CACD;GAEA,IAAc,IAAgB,KAC9B,kBAAA,GAAA,EAAA,UAAA,CACE,IAAc,IAAI,IAAgB,KAAY,kBAAC,GAAD,CAAS,CAAA,GACxD,kBAAC,GAAD;IACC,MAAM;IACN,wBAAwB,EAAiB,CAAQ;GACjD,CAAA,CACA,EAAA,CAAA;GAGH,kBAAC,GAAD;IACC,aAAY;IACZ,kBAAkB;IAClB,UAAU,KAAe;GACzB,CAAA;EACG;;AAEP"}

package/dist/modules/components/pagination/pageButton/index.js

@@ -0,0 +1,16 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/pagination/pageButton/index.tsx
+function t(t) {
+	let { page: n, handlePageChange: r } = t;
+	return /* @__PURE__ */ e("button", {
+		type: "button",
+		className: "arkynPaginationPageButton",
+		onClick: r,
+		children: n
+	});
+}
+//#endregion
+export { t as PageButton };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/pagination/pageButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/pagination/pageButton/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype PageButtonProps = {\n\tpage: number;\n\thandlePageChange: () => void;\n};\n\nfunction PageButton(props: PageButtonProps) {\n\tconst { page, handlePageChange } = props;\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName=\"arkynPaginationPageButton\"\n\t\t\tonClick={handlePageChange}\n\t\t>\n\t\t\t{page}\n\t\t</button>\n\t);\n}\n\nexport { PageButton };\n"],"mappings":";;;AAOA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EAAE,SAAM,wBAAqB;CACnC,OACC,kBAAC,UAAD;EACC,MAAK;EACL,WAAU;EACV,SAAS;YAER;CACM,CAAA;AAEV"}

package/dist/modules/components/pagination/pageButton/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPaginationPageButton{background-color:inherit;min-width:28px;max-width:28px;min-height:28px;max-height:28px;color:var(--text-body,#52525b);border:none;border-radius:8px;justify-content:center;align-items:center;font-size:14px;font-weight:600;display:flex}.arkynPaginationPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynPaginationPageButton:hover{filter:brightness(1.2)}}

package/dist/modules/components/pagination/paginationService.js

@@ -0,0 +1,36 @@
+//#region src/components/pagination/paginationService.ts
+var e = class {
+	currentPage;
+	totalCountRegisters;
+	registerPerPage;
+	siblingsCount;
+	lastPage;
+	onChange;
+	previousPages;
+	nextPages;
+	generatePagesArray(e, t) {
+		return [...Array(t - e)].map((t, n) => e + n + 1).filter((e) => e > 0);
+	}
+	generatePreviousPages(e, t) {
+		return e > 1 ? this.generatePagesArray(e - 1 - t, e - 1) : [];
+	}
+	generateNextPages(e, t) {
+		return e < this.lastPage ? this.generatePagesArray(e, Math.min(e + t, this.lastPage)) : [];
+	}
+	constructor(e) {
+		this.totalCountRegisters = e.totalCountRegisters, this.currentPage = e.currentPage, this.registerPerPage = e?.registerPerPage || 20, this.siblingsCount = e?.siblingsCount || 2, this.lastPage = Math.ceil(this.totalCountRegisters / this.registerPerPage), this.onChange = e?.onChange, this.previousPages = this.generatePreviousPages(this.currentPage, this.siblingsCount), this.nextPages = this.generateNextPages(this.currentPage, this.siblingsCount);
+	}
+	handlePageChange = (e) => {
+		e < 1 || e > this.lastPage || this.onChange && (this.currentPage = e, this.onChange(this.currentPage));
+	};
+	handlePlusChange = () => {
+		this.currentPage >= this.lastPage || this.onChange && (this.currentPage += 1, this.onChange(this.currentPage));
+	};
+	handleMinusChange = () => {
+		this.currentPage <= 1 || this.onChange && (--this.currentPage, this.onChange(this.currentPage));
+	};
+};
+//#endregion
+export { e as PaginationService };
+
+//# sourceMappingURL=paginationService.js.map

package/dist/modules/components/pagination/paginationService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginationService.js","names":[],"sources":["../../../../src/components/pagination/paginationService.ts"],"sourcesContent":["type PaginationServiceConstructor = {\n\tcurrentPage: number;\n\ttotalCountRegisters: number;\n\tregisterPerPage?: number;\n\tsiblingsCount?: number;\n\tonChange?: (page: number) => void;\n};\n\nclass PaginationService {\n\tcurrentPage: number;\n\ttotalCountRegisters: number;\n\tregisterPerPage: number;\n\tsiblingsCount: number;\n\tlastPage: number;\n\tonChange?: (page: number) => void;\n\tpreviousPages: number[];\n\tnextPages: number[];\n\n\tprivate generatePagesArray(from: number, to: number) {\n\t\treturn [...new Array(to - from)]\n\t\t\t.map((_, index) => from + index + 1)\n\t\t\t.filter((page) => page > 0);\n\t}\n\n\tprivate generatePreviousPages(currentPage: number, siblingsCount: number) {\n\t\tif (!(currentPage > 1)) return [];\n\t\treturn this.generatePagesArray(\n\t\t\tcurrentPage - 1 - siblingsCount,\n\t\t\tcurrentPage - 1,\n\t\t);\n\t}\n\n\tprivate generateNextPages(currentPage: number, siblingsCount: number) {\n\t\tif (!(currentPage < this.lastPage)) return [];\n\t\treturn this.generatePagesArray(\n\t\t\tcurrentPage,\n\t\t\tMath.min(currentPage + siblingsCount, this.lastPage),\n\t\t);\n\t}\n\n\tconstructor(props: PaginationServiceConstructor) {\n\t\tthis.totalCountRegisters = props.totalCountRegisters;\n\t\tthis.currentPage = props.currentPage;\n\t\tthis.registerPerPage = props?.registerPerPage || 20;\n\t\tthis.siblingsCount = props?.siblingsCount || 2;\n\t\tthis.lastPage = Math.ceil(this.totalCountRegisters / this.registerPerPage);\n\t\tthis.onChange = props?.onChange;\n\t\tthis.previousPages = this.generatePreviousPages(\n\t\t\tthis.currentPage,\n\t\t\tthis.siblingsCount,\n\t\t);\n\t\tthis.nextPages = this.generateNextPages(\n\t\t\tthis.currentPage,\n\t\t\tthis.siblingsCount,\n\t\t);\n\t}\n\n\thandlePageChange = (page: number) => {\n\t\tif (page < 1) return;\n\t\tif (page > this.lastPage) return;\n\t\tif (this.onChange) {\n\t\t\tthis.currentPage = page;\n\t\t\tthis.onChange(this.currentPage);\n\t\t}\n\t};\n\n\thandlePlusChange = () => {\n\t\tif (this.currentPage >= this.lastPage) return;\n\t\tif (this.onChange) {\n\t\t\tthis.currentPage += 1;\n\t\t\tthis.onChange(this.currentPage);\n\t\t}\n\t};\n\n\thandleMinusChange = () => {\n\t\tif (this.currentPage <= 1) return;\n\t\tif (this.onChange) {\n\t\t\tthis.currentPage -= 1;\n\t\t\tthis.onChange(this.currentPage);\n\t\t}\n\t};\n}\n\nexport { PaginationService };\n"],"mappings":";AAQA,IAAM,IAAN,MAAwB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,mBAA2B,GAAc,GAAY;EACpD,OAAO,CAAC,GAAO,MAAM,IAAK,CAAI,CAAC,CAAC,CAC9B,KAAK,GAAG,MAAU,IAAO,IAAQ,CAAC,CAAC,CACnC,QAAQ,MAAS,IAAO,CAAC;CAC5B;CAEA,sBAA8B,GAAqB,GAAuB;EAEzE,OADM,IAAc,IACb,KAAK,mBACX,IAAc,IAAI,GAClB,IAAc,CACf,IAJ+B,CAAC;CAKjC;CAEA,kBAA0B,GAAqB,GAAuB;EAErE,OADM,IAAc,KAAK,WAClB,KAAK,mBACX,GACA,KAAK,IAAI,IAAc,GAAe,KAAK,QAAQ,CACpD,IAJ2C,CAAC;CAK7C;CAEA,YAAY,GAAqC;EAWhD,AAVA,KAAK,sBAAsB,EAAM,qBACjC,KAAK,cAAc,EAAM,aACzB,KAAK,kBAAkB,GAAO,mBAAmB,IACjD,KAAK,gBAAgB,GAAO,iBAAiB,GAC7C,KAAK,WAAW,KAAK,KAAK,KAAK,sBAAsB,KAAK,eAAe,GACzE,KAAK,WAAW,GAAO,UACvB,KAAK,gBAAgB,KAAK,sBACzB,KAAK,aACL,KAAK,aACN,GACA,KAAK,YAAY,KAAK,kBACrB,KAAK,aACL,KAAK,aACN;CACD;CAEA,oBAAoB,MAAiB;EAChC,IAAO,KACP,IAAO,KAAK,YACZ,KAAK,aACR,KAAK,cAAc,GACnB,KAAK,SAAS,KAAK,WAAW;CAEhC;CAEA,yBAAyB;EACpB,KAAK,eAAe,KAAK,YACzB,KAAK,aACR,KAAK,eAAe,GACpB,KAAK,SAAS,KAAK,WAAW;CAEhC;CAEA,0BAA0B;EACrB,KAAK,eAAe,KACpB,KAAK,aACR,OAAK,aACL,KAAK,SAAS,KAAK,WAAW;CAEhC;AACD"}

package/dist/modules/components/pagination/spread/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { Ellipsis as t } from "lucide-react";
+//#region src/components/pagination/spread/index.tsx
+function n() {
+	return /* @__PURE__ */ e("p", {
+		className: "arkynPaginationSpread",
+		children: /* @__PURE__ */ e(t, {})
+	});
+}
+//#endregion
+export { n as Spread };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/pagination/spread/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/pagination/spread/index.tsx"],"sourcesContent":["import { Ellipsis } from \"lucide-react\";\nimport \"./styles.css\";\n\nfunction Spread() {\n\treturn (\n\t\t<p className=\"arkynPaginationSpread\">\n\t\t\t<Ellipsis />\n\t\t</p>\n\t);\n}\n\nexport { Spread };\n"],"mappings":";;;;AAGA,SAAS,IAAS;CACjB,OACC,kBAAC,KAAD;EAAG,WAAU;YACZ,kBAAC,GAAD,CAAW,CAAA;CACT,CAAA;AAEL"}

package/dist/modules/components/pagination/spread/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPaginationSpread{color:var(--text-muted,#a1a1aa);background-color:#0000;border:none;justify-content:center;align-items:center;min-width:28px;max-width:28px;min-height:28px;max-height:28px;display:flex}.arkynPaginationSpread>svg{color:var(--text-muted,#a1a1aa);width:16px;height:16px}}

package/dist/modules/components/pagination/styles.css

@@ -0,0 +1,9 @@
+@layer arkyn{.arkynPagination{justify-content:center;align-items:center;gap:8px;display:flex}}
+
+@layer arkyn{.arkynChevronPageButton{background-color:inherit;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;max-width:28px;min-height:28px;max-height:28px;display:flex}.arkynChevronPageButton>svg{color:var(--text-muted,#a1a1aa);width:20px;height:20px}.arkynChevronPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynChevronPageButton:hover{filter:brightness(1.2)}.arkynChevronPageButton:disabled{filter:brightness();cursor:not-allowed;opacity:.5}}
+
+@layer arkyn{.arkynPaginationCurrentButton{background-color:rgb(var(--spotlight-primary,17, 109, 220));color:var(--white,#fff);text-align:center;border:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;min-height:28px;font-size:14px;font-weight:500;line-height:14px;display:flex}}
+
+@layer arkyn{.arkynPaginationPageButton{background-color:inherit;min-width:28px;max-width:28px;min-height:28px;max-height:28px;color:var(--text-body,#52525b);border:none;border-radius:8px;justify-content:center;align-items:center;font-size:14px;font-weight:600;display:flex}.arkynPaginationPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynPaginationPageButton:hover{filter:brightness(1.2)}}
+
+@layer arkyn{.arkynPaginationSpread{color:var(--text-muted,#a1a1aa);background-color:#0000;border:none;justify-content:center;align-items:center;min-width:28px;max-width:28px;min-height:28px;max-height:28px;display:flex}.arkynPaginationSpread>svg{color:var(--text-muted,#a1a1aa);width:16px;height:16px}}

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

@@ -0,0 +1,106 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { FieldTemplate as t } from "../../services/fieldTemplate.js";
+import { PhoneInputContainer as n } from "./phoneInputContainer/index.js";
+import { PhoneInputCountriesOverlay as ee } from "./phoneInputCountriesOverlay/index.js";
+import { PhoneInputCountryOption as te } from "./phoneInputCountryOption/index.js";
+import { PhoneInputCountryOptionsContainer as ne } from "./phoneInputCountryOptionsContainer/index.js";
+import { PhoneInputCountrySelector as r } from "./phoneInputCountrySelector/index.js";
+import { PhoneInputMask as i } from "./phoneInputMask/index.js";
+import { useId as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { findCountryMask as u, formatToPhone as d, removeNonNumeric as f } from "@arkyn/shared";
+import { countries as p } from "@arkyn/templates";
+//#region src/components/phoneInput/index.tsx
+function m(m) {
+	let { value: h, label: re, className: g = "", disabled: _ = !1, errorMessage: v, isLoading: y = !1, readOnly: b = !1, size: x = "md", defaultValue: S = "", variant: ie = "solid", showAsterisk: C, name: w, onChange: T, searchCountryPlaceholder: E = "Pesquisar país", notFoundCountryText: D = "Nenhum país encontrado", id: O, unShowFieldTemplate: k = !1, orientation: A = "vertical" } = m, j = p.find((e) => e.iso === "BR"), M = S ? d(S) : "", N = S ? u(S)[1] : j, [P, F] = s(!1), [I, L] = s(""), [R, z] = s(!1), [B, V] = s(M), H = h === void 0 ? B : h, [U, W] = s(N), { fieldErrors: G } = e(), K = o(null), q = a(), J = O || q, Y = v || G?.[w], ae = !!Y, X = _ || y, Z = o(null);
+	function oe() {
+		X || P || R || (F(!0), Z.current && Z.current.focus());
+	}
+	function se() {
+		z(!0), F(!0);
+	}
+	function ce() {
+		z(!1), F(!1);
+	}
+	function le() {
+		F(!0);
+	}
+	function ue() {
+		F(!1);
+	}
+	function Q(e) {
+		return e.name.toLowerCase().includes(I.toLowerCase());
+	}
+	function $(e) {
+		let t = U.code;
+		return t += f(e || H), t;
+	}
+	return /* @__PURE__ */ c(t, {
+		name: w,
+		label: re,
+		showAsterisk: C,
+		className: g,
+		errorMessage: Y,
+		unShowFieldTemplate: k,
+		orientation: A,
+		children: /* @__PURE__ */ l(n, {
+			disabled: X,
+			isError: ae,
+			isLoading: y,
+			isFocused: P,
+			readOnly: b,
+			size: x,
+			variant: ie,
+			onFocus: oe,
+			children: [
+				/* @__PURE__ */ c(r, {
+					currentCountry: U,
+					onClick: se,
+					size: x
+				}),
+				/* @__PURE__ */ l(ne, {
+					isOpen: X || b ? !1 : R,
+					search: I,
+					placeholder: E,
+					onSearch: L,
+					children: [p.filter((e) => Q(e)).map((e) => /* @__PURE__ */ c(te, {
+						country: e,
+						handleChangeValue: () => {
+							W(e), z(!1), V("");
+						},
+						isActive: e.iso === U.iso,
+						size: x
+					}, e.iso)), p.filter((e) => Q(e)).length === 0 && /* @__PURE__ */ c("p", { children: D })]
+				}),
+				/* @__PURE__ */ c(ee, {
+					isOpen: X || b ? !1 : R,
+					onClick: ce
+				}),
+				/* @__PURE__ */ c(i, {
+					id: J,
+					ref: Z,
+					readonly: b,
+					currentCountry: U,
+					value: H,
+					disabled: X,
+					onBlur: ue,
+					onFocus: le,
+					size: x,
+					onChange: (e) => {
+						V(e), T?.($(e));
+					}
+				}),
+				/* @__PURE__ */ c("input", {
+					ref: K,
+					type: "hidden",
+					name: w,
+					value: $()
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { m as PhoneInput };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/phoneInput/index.tsx"],"sourcesContent":["import {\n\tfindCountryMask,\n\tformatToPhone,\n\tremoveNonNumeric,\n} from \"@arkyn/shared\";\nimport { countries } from \"@arkyn/templates\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport { PhoneInputContainer } from \"./phoneInputContainer\";\nimport { PhoneInputCountriesOverlay } from \"./phoneInputCountriesOverlay\";\nimport { PhoneInputCountryOption } from \"./phoneInputCountryOption\";\nimport { PhoneInputCountryOptionsContainer } from \"./phoneInputCountryOptionsContainer\";\nimport { PhoneInputCountrySelector } from \"./phoneInputCountrySelector\";\nimport { PhoneInputMask } from \"./phoneInputMask\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputProps = {\n\t/** Optional HTML id for the visible phone text input. */\n\tid?: string;\n\t/** Disables all interactions. @default false */\n\tdisabled?: boolean;\n\t/** Prevents value changes while keeping the current value visible. @default false */\n\treadOnly?: boolean;\n\t/** Validation error message (overrides the `useForm` context error for this field). */\n\terrorMessage?: string;\n\t/** Optional label text displayed above the input. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Shows a loading state and disables interactions. @default false */\n\tisLoading?: boolean;\n\t/**\n\t * Input size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\";\n\t/** Additional CSS class applied to the field wrapper. */\n\tclassName?: string;\n\t/** Uncontrolled default phone value (numeric string with or without country code). @default \"\" */\n\tdefaultValue?: string;\n\t/** Text displayed when no country matches the search query. @default \"Nenhum país encontrado\" */\n\tnotFoundCountryText?: string;\n\t/** Field name for form submission (stored as numeric string with country code). Required. */\n\tname: string;\n\t/** Placeholder for the country search input. @default \"Pesquisar país\" */\n\tsearchCountryPlaceholder?: string;\n\t/** ISO 3166-1 alpha-2 code of the initially selected country. @default \"BR\" */\n\tdefaultCountryIso?: (typeof countries)[number][\"iso\"];\n\t/** Callback fired on value change. Receives a numeric string prefixed with the country dial code. */\n\tonChange?: (e: string) => void;\n\t/** Controlled phone value (without country code). */\n\tvalue?: string;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"vertical\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * PhoneInput — phone number field with an integrated country selector and automatic mask formatting.\n *\n * The visible input is masked according to the selected country's phone format.\n * The hidden `<input>` stores a numeric string prefixed with the country dial code for form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed above the input.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.errorMessage - Validation error message.\n * @param props.size - Input size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.disabled - Disables all interactions. Default: false\n * @param props.readOnly - Prevents editing. Default: false\n * @param props.isLoading - Shows loading state and disables interactions. Default: false\n * @param props.defaultValue - Uncontrolled default phone value.\n * @param props.value - Controlled phone value (without country code).\n * @param props.onChange - Callback fired on change — receives numeric string with country code.\n * @param props.defaultCountryIso - ISO code of the initially selected country. Default: \"BR\"\n * @param props.searchCountryPlaceholder - Placeholder for country search. Default: \"Pesquisar país\"\n * @param props.notFoundCountryText - Text shown when no country matches. Default: \"Nenhum país encontrado\"\n * @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns PhoneInput JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <PhoneInput name=\"phone\" label=\"Phone\" />\n *\n * // Controlled with outline variant\n * <PhoneInput\n *   name=\"contactPhone\"\n *   label=\"Contact Phone\"\n *   value={phone}\n *   onChange={(v) => setPhone(v)}\n *   variant=\"outline\"\n *   size=\"lg\"\n * />\n *\n * // Pre-selected country (US)\n * <PhoneInput\n *   name=\"phone\"\n *   label=\"Phone\"\n *   defaultCountryIso=\"US\"\n *   showAsterisk\n * />\n * ```\n */\nfunction PhoneInput(props: PhoneInputProps) {\n\tconst {\n\t\tvalue: rawValue,\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tsize = \"md\",\n\t\tdefaultValue = \"\",\n\t\tvariant = \"solid\",\n\t\tshowAsterisk,\n\t\tname,\n\t\tonChange,\n\t\tsearchCountryPlaceholder = \"Pesquisar país\",\n\t\tnotFoundCountryText = \"Nenhum país encontrado\",\n\t\tid,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\t// biome-ignore lint/style/noNonNullAssertion: \"BR\" is always present in the countries list\n\tconst brasilCountry = countries.find((country) => country.iso === \"BR\")!;\n\n\tconst defaultData = defaultValue ? formatToPhone(defaultValue) : \"\";\n\tconst defaultCountry: CountryType = defaultValue\n\t\t? findCountryMask(defaultValue)[1]\n\t\t: brasilCountry;\n\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [search, setSearch] = useState(\"\");\n\tconst [showCountryOptions, setShowCountryOptions] = useState(false);\n\tconst [internalValue, setValue] = useState(defaultData);\n\tconst value = rawValue !== undefined ? rawValue : internalValue;\n\n\tconst [currentCountry, setCurrentCountry] = useState(defaultCountry);\n\n\tconst { fieldErrors } = useForm();\n\n\tconst phoneInputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst phoneInputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled || isLoading;\n\n\tconst inputPhoneMaskRef = useRef<HTMLInputElement>(null);\n\n\tfunction handleContainerFocus() {\n\t\tif (isDisabled) return;\n\t\tif (isFocused || showCountryOptions) return;\n\n\t\tsetIsFocused(true);\n\t\tif (inputPhoneMaskRef.current) inputPhoneMaskRef.current.focus();\n\t}\n\n\tfunction handleOpenCountryOptions() {\n\t\tsetShowCountryOptions(true);\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleCloseCountryOptions() {\n\t\tsetShowCountryOptions(false);\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction handleInputFocus() {\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleInputBlur() {\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction filterCountryFunction(country: CountryType) {\n\t\treturn country.name.toLowerCase().includes(search.toLowerCase());\n\t}\n\n\tfunction inputValue(props?: string) {\n\t\tlet returnValue = currentCountry.code;\n\t\treturnValue += removeNonNumeric(props || value);\n\t\treturn returnValue;\n\t}\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<PhoneInputContainer\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tisError={isError}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tisFocused={isFocused}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tsize={size}\n\t\t\t\tvariant={variant}\n\t\t\t\tonFocus={handleContainerFocus}\n\t\t\t>\n\t\t\t\t<PhoneInputCountrySelector\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tonClick={handleOpenCountryOptions}\n\t\t\t\t\tsize={size}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputCountryOptionsContainer\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tsearch={search}\n\t\t\t\t\tplaceholder={searchCountryPlaceholder}\n\t\t\t\t\tonSearch={setSearch}\n\t\t\t\t>\n\t\t\t\t\t{countries\n\t\t\t\t\t\t.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.map((country) => (\n\t\t\t\t\t\t\t<PhoneInputCountryOption\n\t\t\t\t\t\t\t\tkey={country.iso}\n\t\t\t\t\t\t\t\tcountry={country}\n\t\t\t\t\t\t\t\thandleChangeValue={() => {\n\t\t\t\t\t\t\t\t\tsetCurrentCountry(country);\n\t\t\t\t\t\t\t\t\tsetShowCountryOptions(false);\n\t\t\t\t\t\t\t\t\tsetValue(\"\");\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tisActive={country.iso === currentCountry.iso}\n\t\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{countries.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.length === 0 && <p>{notFoundCountryText}</p>}\n\t\t\t\t</PhoneInputCountryOptionsContainer>\n\n\t\t\t\t<PhoneInputCountriesOverlay\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tonClick={handleCloseCountryOptions}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputMask\n\t\t\t\t\tid={phoneInputId}\n\t\t\t\t\tref={inputPhoneMaskRef}\n\t\t\t\t\treadonly={readOnly}\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tonBlur={handleInputBlur}\n\t\t\t\t\tonFocus={handleInputFocus}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetValue(e);\n\t\t\t\t\t\tonChange?.(inputValue(e));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<input\n\t\t\t\t\tref={phoneInputRef}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={inputValue()}\n\t\t\t\t/>\n\t\t\t</PhoneInputContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { PhoneInput };\n"],"mappings":";;;;;;;;;;;;;AAiIA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,OAAO,GACP,WACA,WAAW,IAAmB,IAC9B,cAAW,IACX,cAAc,GACd,eAAY,IACZ,cAAW,IACX,UAAO,MACP,kBAAe,IACf,cAAU,SACV,iBACA,SACA,aACA,8BAA2B,kBAC3B,yBAAsB,0BACtB,OACA,yBAAsB,IACtB,iBAAc,eACX,GAGE,IAAgB,EAAU,MAAM,MAAY,EAAQ,QAAQ,IAAI,GAEhE,IAAc,IAAe,EAAc,CAAY,IAAI,IAC3D,IAA8B,IACjC,EAAgB,CAAY,CAAC,CAAC,KAC9B,GAEG,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAQ,KAAa,EAAS,EAAE,GACjC,CAAC,GAAoB,KAAyB,EAAS,EAAK,GAC5D,CAAC,GAAe,KAAY,EAAS,CAAW,GAChD,IAAQ,MAAa,KAAA,IAAuB,IAAX,GAEjC,CAAC,GAAgB,KAAqB,EAAS,CAAc,GAE7D,EAAE,mBAAgB,EAAQ,GAE1B,IAAgB,EAAyB,IAAI,GAC7C,IAAc,EAAM,GACpB,IAAe,KAAM,GAErB,IAAe,KAAoB,IAAc,IACjD,KAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAEzB,IAAoB,EAAyB,IAAI;CAEvD,SAAS,KAAuB;EAC3B,KACA,KAAa,MAEjB,EAAa,EAAI,GACb,EAAkB,WAAS,EAAkB,QAAQ,MAAM;CAChE;CAEA,SAAS,KAA2B;EAEnC,AADA,EAAsB,EAAI,GAC1B,EAAa,EAAI;CAClB;CAEA,SAAS,KAA4B;EAEpC,AADA,EAAsB,EAAK,GAC3B,EAAa,EAAK;CACnB;CAEA,SAAS,KAAmB;EAC3B,EAAa,EAAI;CAClB;CAEA,SAAS,KAAkB;EAC1B,EAAa,EAAK;CACnB;CAEA,SAAS,EAAsB,GAAsB;EACpD,OAAO,EAAQ,KAAK,YAAY,CAAC,CAAC,SAAS,EAAO,YAAY,CAAC;CAChE;CAEA,SAAS,EAAW,GAAgB;EACnC,IAAI,IAAc,EAAe;EAEjC,OADA,KAAe,EAAiB,KAAS,CAAK,GACvC;CACR;CAEA,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,GAAD;GACC,UAAU;GACD;GACE;GACA;GACD;GACJ;GACG;GACT,SAAS;aARV;IAUC,kBAAC,GAAD;KACiB;KAChB,SAAS;KACH;IACN,CAAA;IAED,kBAAC,IAAD;KACC,QAAQ,KAAqB,IAAR,KAA2B;KACxC;KACR,aAAa;KACb,UAAU;eAJX,CAME,EACC,QAAQ,MAAY,EAAsB,CAAO,CAAC,CAAC,CACnD,KAAK,MACL,kBAAC,IAAD;MAEU;MACT,yBAAyB;OAGxB,AAFA,EAAkB,CAAO,GACzB,EAAsB,EAAK,GAC3B,EAAS,EAAE;MACZ;MACA,UAAU,EAAQ,QAAQ,EAAe;MACnC;KACN,GATK,EAAQ,GASb,CACD,GAED,EAAU,QAAQ,MAAY,EAAsB,CAAO,CAAC,CAAC,CAC5D,WAAW,KAAK,kBAAC,KAAD,EAAA,UAAI,EAAuB,CAAA,CACX;;IAEnC,kBAAC,IAAD;KACC,QAAQ,KAAqB,IAAR,KAA2B;KAChD,SAAS;IACT,CAAA;IAED,kBAAC,GAAD;KACC,IAAI;KACJ,KAAK;KACL,UAAU;KACM;KACT;KACP,UAAU;KACV,QAAQ;KACR,SAAS;KACH;KACN,WAAW,MAAM;MAEhB,AADA,EAAS,CAAC,GACV,IAAW,EAAW,CAAC,CAAC;KACzB;IACA,CAAA;IAED,kBAAC,SAAD;KACC,KAAK;KACL,MAAK;KACC;KACN,OAAO,EAAW;IAClB,CAAA;GACmB;;CACP,CAAA;AAEjB"}

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

@@ -0,0 +1,15 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/phoneInput/phoneInputContainer/index.tsx
+function t(t) {
+	let { children: n, onFocus: r, disabled: i, isError: a, isLoading: o, isFocused: s, className: c = "", readOnly: l, variant: u, size: d } = t;
+	return /* @__PURE__ */ e("section", {
+		className: `arkynPhoneInputContainer ${u} ${d} ${i || l || o ? "opacity" : ""} ${a ? "errored" : ""} ${s ? "focused" : ""} ${c}`.trim(),
+		onClick: r,
+		children: n
+	});
+}
+//#endregion
+export { t as PhoneInputContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/phoneInput/phoneInputContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputContainer/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype PhoneInputContainerProps = {\n\tchildren: ReactNode;\n\tonFocus: () => void;\n\tisError: boolean;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisLoading: boolean;\n\tisFocused: boolean;\n\tclassName?: string;\n\tvariant: \"solid\" | \"outline\";\n\tsize: \"md\" | \"lg\";\n};\n\nfunction PhoneInputContainer(props: PhoneInputContainerProps) {\n\tconst {\n\t\tchildren,\n\t\tonFocus,\n\t\tdisabled,\n\t\tisError,\n\t\tisLoading,\n\t\tisFocused,\n\t\tclassName: baseClassName = \"\",\n\t\treadOnly,\n\t\tvariant,\n\t\tsize,\n\t} = props;\n\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = disabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynPhoneInputContainer ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;\n\n\treturn (\n\t\t<section className={className.trim()} onClick={onFocus}>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n\nexport { PhoneInputContainer };\n"],"mappings":";;;AAgBA,SAAS,EAAoB,GAAiC;CAC7D,IAAM,EACL,aACA,YACA,aACA,YACA,cACA,cACA,WAAW,IAAgB,IAC3B,aACA,YACA,YACG;CAQJ,OACC,kBAAC,WAAD;EAAS,WAAW,4BAHyB,EAAQ,GAAG,EAAK,GAH9C,KAAY,KAAY,IAAY,YAAY,GAGS,GAJzD,IAAU,YAAY,GAI8C,GAFpE,IAAY,YAAY,GAEuD,GAAG,IAGnE,KAAK;EAAG,SAAS;EAC7C;CACO,CAAA;AAEX"}

package/dist/modules/components/phoneInput/phoneInputContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPhoneInputContainer{border:1px solid #0000;border-radius:6px;outline:1px solid #0000;justify-content:start;align-items:center;gap:8px;width:100%;min-height:38px;max-height:38px;padding:0 16px;display:flex;position:relative}.arkynPhoneInputContainer:hover{cursor:text}.arkynPhoneInputContainer.opacity{opacity:.5}.arkynPhoneInputContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynPhoneInputContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynPhoneInputContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynPhoneInputContainer.outline{border-color:var(--border,#e2e8f0)}.arkynPhoneInputContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynPhoneInputContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynPhoneInputContainer.md{min-height:42px;max-height:42px}.arkynPhoneInputContainer.lg{min-height:46px;max-height:46px}}

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

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/phoneInput/phoneInputCountriesOverlay/index.tsx
+function t(t) {
+	let { isOpen: n, onClick: r } = t;
+	return n ? /* @__PURE__ */ e("aside", {
+		className: "arkynPhoneInputCountriesOverlay",
+		onClick: r
+	}) : null;
+}
+//#endregion
+export { t as PhoneInputCountriesOverlay };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/phoneInput/phoneInputCountriesOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputCountriesOverlay/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype PhoneInputCountriesOverlayProps = {\n\tisOpen: boolean;\n\tonClick: () => void;\n};\n\nfunction PhoneInputCountriesOverlay(props: PhoneInputCountriesOverlayProps) {\n\tconst { isOpen, onClick } = props;\n\tif (!isOpen) return null;\n\treturn (\n\t\t<aside className=\"arkynPhoneInputCountriesOverlay\" onClick={onClick} />\n\t);\n}\n\nexport { PhoneInputCountriesOverlay };\n"],"mappings":";;;AAOA,SAAS,EAA2B,GAAwC;CAC3E,IAAM,EAAE,WAAQ,eAAY;CAE5B,OADK,IAEJ,kBAAC,SAAD;EAAO,WAAU;EAA2C;CAAU,CAAA,IAFnD;AAIrB"}

package/dist/modules/components/phoneInput/phoneInputCountriesOverlay/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPhoneInputCountriesOverlay{z-index:5;position:fixed;inset:0}}

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

@@ -0,0 +1,26 @@
+/* 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 };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputCountryOption/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputCountryOptionProps = {\n\tcountry: CountryType;\n\tsize: \"md\" | \"lg\";\n\tisActive: boolean;\n\thandleChangeValue: (country: CountryType) => void;\n};\n\nfunction PhoneInputCountryOption(props: PhoneInputCountryOptionProps) {\n\tconst { country, isActive, handleChangeValue, size } = props;\n\n\tconst hasActive = isActive ? \"active\" : \"\";\n\tconst className = `arkynPhoneInputCountryOption ${size} ${hasActive}`;\n\n\treturn (\n\t\t<div onClick={() => handleChangeValue(country)} className={className}>\n\t\t\t<img src={country.flag} alt={country.name} className=\"flag\" />\n\t\t\t{country.name} <span>{country.code}</span>\n\t\t\t<Check className=\"check\" />\n\t\t</div>\n\t);\n}\n\nexport { PhoneInputCountryOption };\n"],"mappings":";;;;AAkBA,SAAS,EAAwB,GAAqC;CACrE,IAAM,EAAE,YAAS,aAAU,sBAAmB,YAAS;CAKvD,OACC,kBAAC,OAAD;EAAK,eAAe,EAAkB,CAAO;EAAc,WAAA,gCAHV,EAAK,GADrC,IAAW,WAAW;YAIvC;GACC,kBAAC,OAAD;IAAK,KAAK,EAAQ;IAAM,KAAK,EAAQ;IAAM,WAAU;GAAQ,CAAA;GAC5D,EAAQ;GAAK;GAAC,kBAAC,QAAD,EAAA,UAAO,EAAQ,KAAW,CAAA;GACzC,kBAAC,GAAD,EAAO,WAAU,QAAS,CAAA;EACtB;;AAEP"}

package/dist/modules/components/phoneInput/phoneInputCountryOption/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPhoneInputCountryOption{color:var(--text-body,#52525b);-webkit-user-select:none;user-select:none;background-color:var(--background-foreground,#fff);align-items:center;gap:10px;font-weight:400;line-height:21.79px;display:flex}.arkynPhoneInputCountryOption>span{color:var(--text-muted,#a1a1aa);font-size:14px;font-weight:300;line-height:21.79px}.arkynPhoneInputCountryOption.md{padding:8px 16px;font-size:14px}.arkynPhoneInputCountryOption.lg{padding:8px 16px;font-size:16px}.arkynPhoneInputCountryOption .flag{border-radius:4px;max-width:30px;max-height:20px}.arkynPhoneInputCountryOption .check{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));margin-left:auto;display:none}.arkynPhoneInputCountryOption:hover{cursor:pointer;filter:brightness(.95)}.arkynPhoneInputCountryOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynPhoneInputCountryOption.active svg{display:unset}}

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

@@ -0,0 +1,36 @@
+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 };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx"],"sourcesContent":["import {\n\ttype ChangeEvent,\n\ttype ReactNode,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport \"./styles.css\";\n\ntype PhoneInputCountryOptionsContainerProps = {\n\tisOpen: boolean;\n\tchildren: ReactNode;\n\tsearch: string;\n\tplaceholder: string;\n\tonSearch: (value: string) => void;\n};\n\nfunction PhoneInputCountryOptionsContainer(\n\tprops: PhoneInputCountryOptionsContainerProps,\n) {\n\tconst { children, isOpen, onSearch, search, placeholder } = props;\n\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState<\"bottom\" | \"top\">(\"bottom\");\n\n\tfunction handleSearch(e: ChangeEvent<HTMLInputElement>) {\n\t\tonSearch(e.target.value);\n\t}\n\n\tuseScrollLock(isOpen);\n\n\tuseEffect(() => {\n\t\tif (!isOpen) return;\n\n\t\tconst checkContainerPosition = () => {\n\t\t\tif (!containerRef.current) return;\n\n\t\t\tconst parentElement = containerRef.current.parentElement;\n\t\t\tif (!parentElement) return;\n\n\t\t\tconst parentRect = parentElement.getBoundingClientRect();\n\t\t\tconst viewportHeight = window.innerHeight;\n\n\t\t\tconst estimatedContainerHeight = 300;\n\t\t\tconst spaceBelow = viewportHeight - parentRect.bottom;\n\n\t\t\tif (\n\t\t\t\tspaceBelow < estimatedContainerHeight &&\n\t\t\t\tparentRect.top > estimatedContainerHeight\n\t\t\t) {\n\t\t\t\tsetPosition(\"top\");\n\t\t\t} else {\n\t\t\t\tsetPosition(\"bottom\");\n\t\t\t}\n\t\t};\n\n\t\tcheckContainerPosition();\n\t}, [isOpen]);\n\n\tif (!isOpen) return null;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`arkynPhoneInputCountryOptionsContainer ${position}`}\n\t\t\tref={containerRef}\n\t\t>\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tname=\"search-select\"\n\t\t\t\tclassName=\"arkynPhoneInputCountryOptionsContainerSearchSelect\"\n\t\t\t\tvalue={search}\n\t\t\t\tid=\"input-search\"\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tonChange={handleSearch}\n\t\t\t/>\n\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { PhoneInputCountryOptionsContainer };\n"],"mappings":";;;;;AAkBA,SAAS,EACR,GACC;CACD,IAAM,EAAE,aAAU,WAAQ,aAAU,WAAQ,mBAAgB,GAEtD,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAU,KAAe,EAA2B,QAAQ;CAEnE,SAAS,EAAa,GAAkC;EACvD,EAAS,EAAE,OAAO,KAAK;CACxB;CAkCA,OAhCA,EAAc,CAAM,GAEpB,QAAgB;EACV,YAEgC;GACpC,IAAI,CAAC,EAAa,SAAS;GAE3B,IAAM,IAAgB,EAAa,QAAQ;GAC3C,IAAI,CAAC,GAAe;GAEpB,IAAM,IAAa,EAAc,sBAAsB;GAMvD,AALuB,OAAO,cAGM,EAAW,SAGjC,OACb,EAAW,MAAM,MAEjB,EAAY,KAAK,IAEjB,EAAY,QAAQ;EAEtB,EAEA,CAAuB;CACxB,GAAG,CAAC,CAAM,CAAC,GAEN,IAGJ,kBAAC,OAAD;EACC,WAAW,0CAA0C;EACrD,KAAK;YAFN,CAIC,kBAAC,SAAD;GACC,MAAK;GACL,MAAK;GACL,WAAU;GACV,OAAO;GACP,IAAG;GACU;GACb,UAAU;EACV,CAAA,GAEA,CACG;MAlBc;AAoBrB"}

package/dist/modules/components/phoneInput/phoneInputCountryOptionsContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynPhoneInputCountryOptionsContainer{z-index:7;border:1px solid var(--border,#e2e8f0);background-color:var(--background-foreground,#fff);border-radius:6px;flex-direction:column;flex:1;height:max-content;max-height:200px;list-style:none;display:flex;position:absolute;left:-2px;right:-2px;overflow:auto;box-shadow:0 4px 8px #0000001a}.arkynPhoneInputCountryOptionsContainer.bottom{top:calc(100% + 5px)}.arkynPhoneInputCountryOptionsContainer.top{bottom:calc(100% + 5px)}.arkynPhoneInputCountryOptionsContainer>p{text-align:center;color:var(--text-body,#52525b);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}.arkynPhoneInputCountryOptionsContainerSearchSelect{border:none;border-bottom:1px solid var(--border,#e2e8f0);color:var(--text-heading,#09090b);background-color:var(--background-foreground,#fff);outline:none;padding:16px;font-size:14px}.arkynPhoneInputCountryOptionsContainerSearchSelect::placeholder{color:var(--text-muted,#a1a1aa)}}

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

@@ -0,0 +1,28 @@
+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 };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputCountrySelector/index.tsx"],"sourcesContent":["import { ChevronDown } from \"lucide-react\";\n\nimport { Divider } from \"../../divider\";\nimport \"./styles.css\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputCountrySelectorProps = {\n\tsize: \"md\" | \"lg\";\n\tcurrentCountry: CountryType;\n\tonClick: () => void;\n};\n\nfunction PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps) {\n\tconst { currentCountry, onClick } = props;\n\n\treturn (\n\t\t<div className=\"phoneInputSelectCountry\" onClick={onClick}>\n\t\t\t<img\n\t\t\t\tclassName=\"flag\"\n\t\t\t\tsrc={currentCountry.flag}\n\t\t\t\talt={currentCountry.name}\n\t\t\t/>\n\t\t\t<ChevronDown className=\"chevronDown\" strokeWidth={2.5} />\n\t\t\t<Divider orientation=\"vertical\" />\n\t\t</div>\n\t);\n}\n\nexport { PhoneInputCountrySelector };\n"],"mappings":";;;;;AAmBA,SAAS,EAA0B,GAAuC;CACzE,IAAM,EAAE,mBAAgB,eAAY;CAEpC,OACC,kBAAC,OAAD;EAAK,WAAU;EAAmC;YAAlD;GACC,kBAAC,OAAD;IACC,WAAU;IACV,KAAK,EAAe;IACpB,KAAK,EAAe;GACpB,CAAA;GACD,kBAAC,GAAD;IAAa,WAAU;IAAc,aAAa;GAAM,CAAA;GACxD,kBAAC,GAAD,EAAS,aAAY,WAAY,CAAA;EAC7B;;AAEP"}

package/dist/modules/components/phoneInput/phoneInputCountrySelector/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.phoneInputSelectCountry{cursor:pointer;align-items:center;gap:8px;min-width:58px;display:flex}.phoneInputSelectCountry .flag{border-radius:4px;max-width:30px;max-height:20px}.phoneInputSelectCountry .chevronDown{min-width:12px;max-width:12px;min-height:12px;max-height:12px;color:var(--text-muted,#a1a1aa)}.phoneInputSelectCountry>.arkynDivider{min-width:1px;min-height:20px}}

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

@@ -0,0 +1,55 @@
+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, useRef 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(!0), S = s(g);
+	S.current = g;
+	let C = typeof v.mask == "string" ? v.mask : v.mask[0];
+	o(() => {
+		if (x.current) {
+			x.current = !1;
+			return;
+		}
+		S.current(C);
+	}, [C]);
+	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,
+		readOnly: p,
+		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 };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/phoneInput/phoneInputMask/index.tsx"],"sourcesContent":["import { InputMask } from \"@react-input/mask\";\nimport {\n\ttype ChangeEvent,\n\tforwardRef,\n\ttype InputHTMLAttributes,\n\tuseEffect,\n\tuseRef,\n} from \"react\";\n\nimport {\n\tapplyMask,\n\tclear,\n\tgetMask,\n\tMAX_LENGTH,\n\tTYPES,\n} from \"../../../utils/phoneInputUtilities\";\n\nimport \"./style.css\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputMaskProps = {\n\tonFocus: () => void;\n\tonBlur: () => void;\n\tdisabled: boolean;\n\treadonly: boolean;\n\tsize: \"md\" | \"lg\";\n\tcurrentCountry: CountryType;\n\tvalue: string;\n\tonChange: (e: string) => void;\n\tid: string;\n};\n\nconst BaseInput = forwardRef<\n\tHTMLInputElement,\n\tInputHTMLAttributes<HTMLInputElement>\n>((props, ref) => {\n\treturn <input ref={ref} {...props} />;\n});\n\nconst PhoneInputMask = forwardRef<HTMLInputElement, PhoneInputMaskProps>(\n\t(props, ref) => {\n\t\tconst {\n\t\t\tonFocus,\n\t\t\treadonly,\n\t\t\tonBlur,\n\t\t\tsize,\n\t\t\tonChange,\n\t\t\tvalue,\n\t\t\tcurrentCountry,\n\t\t\tdisabled,\n\t\t\tid,\n\t\t} = props;\n\n\t\tconst isFirstRender = useRef(true);\n\t\tconst onChangeRef = useRef(onChange);\n\t\tonChangeRef.current = onChange;\n\n\t\tconst mask =\n\t\t\ttypeof currentCountry.mask === \"string\"\n\t\t\t\t? currentCountry.mask\n\t\t\t\t: currentCountry.mask[0];\n\n\t\tuseEffect(() => {\n\t\t\tif (isFirstRender.current) {\n\t\t\t\tisFirstRender.current = false;\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonChangeRef.current(mask);\n\t\t}, [mask]);\n\n\t\tconst className = `phoneInputMask ${size}`;\n\n\t\tfunction handleChange(event: ChangeEvent<HTMLInputElement>) {\n\t\t\tlet value = clear(event.target.value);\n\t\t\tconst mask = getMask(value);\n\n\t\t\tconst nextLength = value.length;\n\t\t\tif (nextLength > MAX_LENGTH) return;\n\n\t\t\tvalue = applyMask(value, TYPES[mask] as \"EIGHT\" | \"NINE\");\n\t\t\tevent.target.value = value;\n\n\t\t\tonChange(value);\n\t\t}\n\n\t\tif (currentCountry.code === \"+55\") {\n\t\t\treturn (\n\t\t\t\t<input\n\t\t\t\t\tid={id}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\treadOnly={readonly}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<InputMask\n\t\t\t\tid={id}\n\t\t\t\tvalue={value}\n\t\t\t\treadOnly={readonly}\n\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\tclassName={className}\n\t\t\t\tcomponent={BaseInput}\n\t\t\t\tonFocus={onFocus}\n\t\t\t\tonBlur={onBlur}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tmask={mask}\n\t\t\t\tshowMask\n\t\t\t\treplacement={{ _: /\\d/ }}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport { PhoneInputMask };\n"],"mappings":";;;;;;AAuCA,IAAM,IAAY,GAGf,GAAO,MACF,kBAAC,SAAD;CAAY;CAAK,GAAI;AAAQ,CAAA,CACpC,GAEK,IAAiB,GACrB,GAAO,MAAQ;CACf,IAAM,EACL,YACA,aACA,WACA,SACA,aACA,UACA,mBACA,aACA,UACG,GAEE,IAAgB,EAAO,EAAI,GAC3B,IAAc,EAAO,CAAQ;CACnC,EAAY,UAAU;CAEtB,IAAM,IACL,OAAO,EAAe,QAAS,WAC5B,EAAe,OACf,EAAe,KAAK;CAExB,QAAgB;EACf,IAAI,EAAc,SAAS;GAC1B,EAAc,UAAU;GACxB;EACD;EACA,EAAY,QAAQ,CAAI;CACzB,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAY,kBAAkB;CAEpC,SAAS,EAAa,GAAsC;EAC3D,IAAI,IAAQ,EAAM,EAAM,OAAO,KAAK,GAC9B,IAAO,EAAQ,CAAK;EAEP,EAAM,SACR,MAEjB,IAAQ,EAAU,GAAO,EAAM,EAAyB,GACxD,EAAM,OAAO,QAAQ,GAErB,EAAS,CAAK;CACf;CAkBA,OAhBI,EAAe,SAAS,QAE1B,kBAAC,SAAD;EACK;EACG;EACP,UAAU;EACC;EACF;EACD;EACE;EACV,UAAU;EACL;CACL,CAAA,IAKF,kBAAC,GAAD;EACK;EACG;EACP,UAAU;EACV,WAAW,MAAM,EAAS,EAAE,OAAO,KAAK;EAC7B;EACX,WAAW;EACF;EACD;EACE;EACJ;EACN,UAAA;EACA,aAAa,EAAE,GAAG,KAAK;EAClB;CACL,CAAA;AAEH,CACD"}

package/dist/modules/components/phoneInput/phoneInputMask/style.css

@@ -0,0 +1 @@
+@layer arkyn{.phoneInputMask{width:100%;color:var(--text-heading,#09090b);background:0 0;border:none;outline:none;margin-left:8px}.phoneInputMask.md{min-height:40px;max-height:40px;font-size:14px;font-weight:400;line-height:14px}.phoneInputMask.md::placeholder{font-size:14px;font-weight:400;line-height:14px}.phoneInputMask.lg{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.phoneInputMask.lg::placeholder{font-size:16px;font-weight:400;line-height:16px}}