@arkyn/components 3.0.1-beta.99 → 3.0.3

package/dist/modules/components/select/selectContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynSelectContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynSelectContainer:hover{cursor:pointer}.arkynSelectContainer.opacity{opacity:.5}.arkynSelectContainer .prefix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);border-right:1px solid var(--border,#e2e8f0);border-radius:5px 0 0 5px;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;top:0;bottom:0;left:0}.arkynSelectContainer>svg{color:var(--text-muted,#a1a1aa)}.arkynSelectContainer.errored>svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynSelectContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynSelectContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynSelectContainer.underline .prefix{display:none}.arkynSelectContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynSelectContainer.underline.errored{border-color:rgba(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer.underline.errored:before{background:rgba(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.md{min-height:40px}.arkynSelectContainer.md.hasPrefix{padding-left:60px}.arkynSelectContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynSelectContainer.lg{min-height:44px}.arkynSelectContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynSelectContainer.lg.hasPrefix{padding-left:64px}}

package/dist/modules/components/select/selectContent/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/select/selectContent/index.tsx
+function t(t) {
+	let { children: n, size: r } = t;
+	return /* @__PURE__ */ e("div", {
+		className: `arkynSelectContent ${r}`,
+		children: n
+	});
+}
+//#endregion
+export { t as SelectContent };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/select/selectContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectContent/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype SelectContentProps = {\n\tchildren: ReactNode;\n\tsize: \"md\" | \"lg\";\n};\n\nfunction SelectContent(props: SelectContentProps) {\n\tconst { children, size } = props;\n\tconst className = `arkynSelectContent ${size}`;\n\treturn <div className={className}>{children}</div>;\n}\n\nexport { SelectContent };\n"],"mappings":";;;AAQA,SAAS,EAAc,GAA2B;CACjD,IAAM,EAAE,aAAU,YAAS;CAE3B,OAAO,kBAAC,OAAD;EAAgB,WAAA,sBADiB;EACL;CAAc,CAAA;AAClD"}

package/dist/modules/components/select/selectContent/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynSelectContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynSelectContent>p{color:var(--text-muted,#a1a1aa);-webkit-user-select:none;user-select:none;font-weight:400}.arkynSelectContent>p.hasValue{color:var(--text-body,#52525b)}.arkynSelectContent.md>p{font-size:14px;line-height:14px}.arkynSelectContent.lg>p{font-size:16px;line-height:16px}}

package/dist/modules/components/select/selectOption/index.js

@@ -0,0 +1,21 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Check as n } from "lucide-react";
+//#region src/components/select/selectOption/index.tsx
+function r(r) {
+	let { label: i, optionHasSelected: a, handleChangeValue: o, value: s, size: c } = r;
+	return /* @__PURE__ */ t("button", {
+		type: "button",
+		onClick: () => o(s),
+		className: `arkynSelectOption ${c} ${a(s) ? "active" : ""}`,
+		children: [
+			i,
+			" ",
+			/* @__PURE__ */ e(n, {})
+		]
+	});
+}
+//#endregion
+export { r as SelectOption };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/select/selectOption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectOption/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype SelectOptionProps = {\n\tvalue: string;\n\tlabel: string;\n\tsize: \"md\" | \"lg\";\n\toptionHasSelected: (value: string) => boolean;\n\thandleChangeValue: (value: string) => void;\n};\n\nfunction SelectOption(props: SelectOptionProps) {\n\tconst { label, optionHasSelected, handleChangeValue, value, size } = props;\n\n\tconst hasActive = optionHasSelected(value) ? \"active\" : \"\";\n\tconst className = `arkynSelectOption ${size} ${hasActive}`;\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={() => handleChangeValue(value)}\n\t\t\tclassName={className}\n\t\t>\n\t\t\t{label} <Check />\n\t\t</button>\n\t);\n}\n\nexport { SelectOption };\n"],"mappings":";;;;AAWA,SAAS,EAAa,GAA0B;CAC/C,IAAM,EAAE,UAAO,sBAAmB,sBAAmB,UAAO,YAAS;CAKrE,OACC,kBAAC,UAAD;EACC,MAAK;EACL,eAAe,EAAkB,CAAK;EAC3B,WAAA,qBAN0B,EAAK,GAD1B,EAAkB,CAAK,IAAI,WAAW;YAIvD;GAKE;GAAM;GAAC,kBAAC,GAAD,CAAQ,CAAA;EACT;;AAEV"}

package/dist/modules/components/select/selectOption/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynSelectOption{color:var(--text-body,#52525b);background-color:inherit;-webkit-user-select:none;user-select:none;border:none;justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynSelectOption.md{padding:8px 16px;font-size:14px}.arkynSelectOption.lg{padding:8px 16px;font-size:16px}.arkynSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynSelectOption:hover{cursor:pointer;filter:brightness(.98)}.arkynSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynSelectOption.active svg{display:unset}html.dark .arkynSelectOption:hover,html.dark .arkynSelectOption.active{filter:brightness(1.2)}}

package/dist/modules/components/select/selectOptionsContainer/index.js

@@ -0,0 +1,38 @@
+import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
+import { Input as t } from "../../input/index.js";
+/* empty css       */
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Search as s } from "lucide-react";
+//#region src/components/select/selectOptionsContainer/index.tsx
+function c(c) {
+	let { children: l, isFocused: u, isSearchable: d, search: f, onSearch: p } = c, m = r(null), [h, g] = i("bottom");
+	e(u), n(() => {
+		u && (() => {
+			if (!m.current) return;
+			let e = m.current.parentElement;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			window.innerHeight - t.bottom < 300 && t.top > 300 ? g("top") : g("bottom");
+		})();
+	}, [u]);
+	function _(e) {
+		d && p(e.target.value);
+	}
+	return u ? /* @__PURE__ */ o("div", {
+		ref: m,
+		className: `arkynSelectOptionsContainer ${h}`,
+		children: [d && /* @__PURE__ */ a(t, {
+			type: "search",
+			name: "search-select",
+			variant: "underline",
+			leftIcon: s,
+			value: f,
+			onChange: _
+		}), l]
+	}) : null;
+}
+//#endregion
+export { c as SelectOptionsContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/select/selectOptionsContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectOptionsContainer/index.tsx"],"sourcesContent":["import { Search } from \"lucide-react\";\nimport {\n\ttype ChangeEvent,\n\ttype ReactNode,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { Input } from \"../../input\";\n\nimport \"./styles.css\";\n\ntype SelectOptionsContainerProps = {\n\tisFocused: boolean;\n\tisSearchable: boolean;\n\tchildren: ReactNode;\n\tsearch: string;\n\tonSearch: (value: string) => void;\n};\n\nfunction SelectOptionsContainer(props: SelectOptionsContainerProps) {\n\tconst { children, isFocused, isSearchable, search, onSearch } = props;\n\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState<\"bottom\" | \"top\">(\"bottom\");\n\n\tuseScrollLock(isFocused);\n\n\tuseEffect(() => {\n\t\tif (!isFocused) 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}, [isFocused]);\n\n\tfunction handleSearch(e: ChangeEvent<HTMLInputElement>) {\n\t\tif (!isSearchable) return;\n\t\tonSearch(e.target.value);\n\t}\n\n\tif (!isFocused) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={`arkynSelectOptionsContainer ${position}`}\n\t\t>\n\t\t\t{isSearchable && (\n\t\t\t\t<Input\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tname=\"search-select\"\n\t\t\t\t\tvariant=\"underline\"\n\t\t\t\t\tleftIcon={Search}\n\t\t\t\t\tvalue={search}\n\t\t\t\t\tonChange={handleSearch}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { SelectOptionsContainer };\n"],"mappings":";;;;;;;AAsBA,SAAS,EAAuB,GAAoC;CACnE,IAAM,EAAE,aAAU,cAAW,iBAAc,WAAQ,gBAAa,GAE1D,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAU,KAAe,EAA2B,QAAQ;CAInE,AAFA,EAAc,CAAS,GAEvB,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,CAAS,CAAC;CAEd,SAAS,EAAa,GAAkC;EAClD,KACL,EAAS,EAAE,OAAO,KAAK;CACxB;CAIA,OAFK,IAGJ,kBAAC,OAAD;EACC,KAAK;EACL,WAAW,+BAA+B;YAF3C,CAIE,KACA,kBAAC,GAAD;GACC,MAAK;GACL,MAAK;GACL,SAAQ;GACR,UAAU;GACV,OAAO;GACP,UAAU;EACV,CAAA,GAGD,CACG;MAnBiB;AAqBxB"}

package/dist/modules/components/select/selectOptionsContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynSelectOptionsContainer{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:300px;list-style:none;display:flex;position:absolute;left:-2px;right:-2px;overflow:auto;box-shadow:0 4px 8px #0000001a}.arkynSelectOptionsContainer.bottom{top:calc(100% + 5px)}.arkynSelectOptionsContainer.top{bottom:calc(100% + 5px)}.arkynSelectOptionsContainer>p{text-align:center;color:var(--text-body,#52525b);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}}

package/dist/modules/components/select/selectOverlay/index.js

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

package/dist/modules/components/select/selectOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectOverlay/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype SelectOverlayProps = {\n\tisFocused: boolean;\n\thandleBlur: () => void;\n};\n\nfunction SelectOverlay(props: SelectOverlayProps) {\n\tconst { isFocused, handleBlur } = props;\n\tif (!isFocused) return null;\n\treturn <aside className=\"arkynSelectOverlay\" onClick={handleBlur} />;\n}\n\nexport { SelectOverlay };\n"],"mappings":";;;AAOA,SAAS,EAAc,GAA2B;CACjD,IAAM,EAAE,cAAW,kBAAe;CAElC,OADK,IACE,kBAAC,SAAD;EAAO,WAAU;EAAqB,SAAS;CAAa,CAAA,IAD5C;AAExB"}

package/dist/modules/components/select/selectOverlay/styles.css

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

package/dist/modules/components/select/selectSpinner/index.js

@@ -0,0 +1,16 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { Loader2 as t } from "lucide-react";
+//#region src/components/select/selectSpinner/index.tsx
+function n(n) {
+	let { iconSize: r, isLoading: i } = n;
+	return i ? /* @__PURE__ */ e(t, {
+		className: "arkynSelectSpinner",
+		size: r,
+		strokeWidth: 2.5
+	}) : null;
+}
+//#endregion
+export { n as SelectSpinner };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/select/selectSpinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/select/selectSpinner/index.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype SelectSpinnerProps = {\n\ticonSize: number;\n\tisLoading: boolean;\n};\n\nfunction SelectSpinner(props: SelectSpinnerProps) {\n\tconst { iconSize, isLoading } = props;\n\n\tif (!isLoading) return null;\n\treturn (\n\t\t<Loader2 className=\"arkynSelectSpinner\" size={iconSize} strokeWidth={2.5} />\n\t);\n}\n\nexport { SelectSpinner };\n"],"mappings":";;;;AAQA,SAAS,EAAc,GAA2B;CACjD,IAAM,EAAE,aAAU,iBAAc;CAGhC,OADK,IAEJ,kBAAC,GAAD;EAAS,WAAU;EAAqB,MAAM;EAAU,aAAa;CAAM,CAAA,IAFrD;AAIxB"}

package/dist/modules/components/select/selectSpinner/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynSelectSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}

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

@@ -0,0 +1,29 @@
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body,#52525b);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}
+
+@layer arkyn{.arkynSelectChevron{color:var(--text-muted,#a1a1aa);transition:all .15s ease-in-out}.arkynSelectChevron:not(.notAnimate).focused{transform:rotate(180deg)}}
+
+@layer arkyn{.arkynSelectContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynSelectContainer:hover{cursor:pointer}.arkynSelectContainer.opacity{opacity:.5}.arkynSelectContainer .prefix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);border-right:1px solid var(--border,#e2e8f0);border-radius:5px 0 0 5px;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;top:0;bottom:0;left:0}.arkynSelectContainer>svg{color:var(--text-muted,#a1a1aa)}.arkynSelectContainer.errored>svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynSelectContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynSelectContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynSelectContainer.underline .prefix{display:none}.arkynSelectContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynSelectContainer.underline.errored{border-color:rgba(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer.underline.errored:before{background:rgba(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.md{min-height:40px}.arkynSelectContainer.md.hasPrefix{padding-left:60px}.arkynSelectContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynSelectContainer.lg{min-height:44px}.arkynSelectContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynSelectContainer.lg.hasPrefix{padding-left:64px}}
+
+@layer arkyn{.arkynSelectContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynSelectContent>p{color:var(--text-muted,#a1a1aa);-webkit-user-select:none;user-select:none;font-weight:400}.arkynSelectContent>p.hasValue{color:var(--text-body,#52525b)}.arkynSelectContent.md>p{font-size:14px;line-height:14px}.arkynSelectContent.lg>p{font-size:16px;line-height:16px}}
+
+@layer arkyn{.arkynSelectOption{color:var(--text-body,#52525b);background-color:inherit;-webkit-user-select:none;user-select:none;border:none;justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynSelectOption.md{padding:8px 16px;font-size:14px}.arkynSelectOption.lg{padding:8px 16px;font-size:16px}.arkynSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynSelectOption:hover{cursor:pointer;filter:brightness(.98)}.arkynSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynSelectOption.active svg{display:unset}html.dark .arkynSelectOption:hover,html.dark .arkynSelectOption.active{filter:brightness(1.2)}}
+
+@layer arkyn{.arkynSelectOptionsContainer{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:300px;list-style:none;display:flex;position:absolute;left:-2px;right:-2px;overflow:auto;box-shadow:0 4px 8px #0000001a}.arkynSelectOptionsContainer.bottom{top:calc(100% + 5px)}.arkynSelectOptionsContainer.top{bottom:calc(100% + 5px)}.arkynSelectOptionsContainer>p{text-align:center;color:var(--text-body,#52525b);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}}
+
+@layer arkyn{.arkynInput{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynInput:hover{cursor:text}.arkynInput input{width:100%;color:var(--text-heading,#09090b);background:0 0;border:none;outline:none;line-height:100%}.arkynInput input:disabled{-webkit-user-select:none;user-select:none}.arkynInput .prefix,.arkynInput .suffix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);justify-content:center;align-items:center;font-weight:400;line-height:100%;display:flex;position:absolute}.arkynInput .prefix{border-right:1px solid var(--border,#e2e8f0);border-radius:7px 0 0 7px;top:0;bottom:0;left:0}.arkynInput .suffix{border-left:1px solid var(--border,#e2e8f0);border-radius:0 7px 7px 0;top:0;bottom:0;right:0}.arkynInput input::placeholder{color:var(--text-muted,#a1a1aa);line-height:100%}.arkynInput svg{color:var(--text-muted,#a1a1aa)}.arkynInput.errored svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).focused svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.opacity{opacity:.5}.arkynInput.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynInput.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynInput.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynInput.underline .suffix,.arkynInput.underline .prefix{display:none}.arkynInput.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynInput.underline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput.underline.errored:before{background:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.md input{min-height:38px;max-height:38px;font-size:14px;font-weight:400;line-height:14px}.arkynInput.md input::placeholder{font-size:14px;font-weight:400;line-height:14px}.arkynInput.md.hasPrefix{padding-left:60px}.arkynInput.md.hasSuffix{padding-right:60px}.arkynInput.md .prefix,.arkynInput.md .suffix{width:44px;height:38px;font-size:14px}.arkynInput.lg input{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg input::placeholder{font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg .prefix,.arkynInput.lg .suffix{width:48px;height:44px;font-size:16px}.arkynInput.lg.hasPrefix{padding-left:64px}.arkynInput.lg.hasSuffix{padding-right:64px}.arkynInput .spinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body,#52525b);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}
+
+@layer arkyn{.arkynInput{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynInput:hover{cursor:text}.arkynInput input{width:100%;color:var(--text-heading,#09090b);background:0 0;border:none;outline:none;line-height:100%}.arkynInput input:disabled{-webkit-user-select:none;user-select:none}.arkynInput .prefix,.arkynInput .suffix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);justify-content:center;align-items:center;font-weight:400;line-height:100%;display:flex;position:absolute}.arkynInput .prefix{border-right:1px solid var(--border,#e2e8f0);border-radius:7px 0 0 7px;top:0;bottom:0;left:0}.arkynInput .suffix{border-left:1px solid var(--border,#e2e8f0);border-radius:0 7px 7px 0;top:0;bottom:0;right:0}.arkynInput input::placeholder{color:var(--text-muted,#a1a1aa);line-height:100%}.arkynInput svg{color:var(--text-muted,#a1a1aa)}.arkynInput.errored svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).focused svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.opacity{opacity:.5}.arkynInput.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynInput.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynInput.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynInput.underline .suffix,.arkynInput.underline .prefix{display:none}.arkynInput.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynInput.underline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput.underline.errored:before{background:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.md input{min-height:38px;max-height:38px;font-size:14px;font-weight:400;line-height:14px}.arkynInput.md input::placeholder{font-size:14px;font-weight:400;line-height:14px}.arkynInput.md.hasPrefix{padding-left:60px}.arkynInput.md.hasSuffix{padding-right:60px}.arkynInput.md .prefix,.arkynInput.md .suffix{width:44px;height:38px;font-size:14px}.arkynInput.lg input{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg input::placeholder{font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg .prefix,.arkynInput.lg .suffix{width:48px;height:44px;font-size:16px}.arkynInput.lg.hasPrefix{padding-left:64px}.arkynInput.lg.hasSuffix{padding-right:64px}.arkynInput .spinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynSelectOverlay{z-index:5;position:fixed;inset:0}}
+
+@layer arkyn{.arkynSelectSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}

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

@@ -0,0 +1,46 @@
+/* empty css       */
+import { useCallback as e, 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/slider/index.tsx
+function o(o) {
+	let { onChange: s, value: c, disabled: l = !1, onDragging: u, className: d = "", ...f } = o, [p, m] = r(!1), h = n(null), g = () => m(!0), _ = e(() => m(!1), []), v = e((e) => {
+		if (l || !p || !h.current) return;
+		let t = h.current.getBoundingClientRect(), n = e.clientX - t.left;
+		s(Math.min(Math.max(n / t.width * 100, 0), 100));
+	}, [
+		l,
+		p,
+		s
+	]), y = (e) => {
+		if (l || !h.current) return;
+		let t = h.current.getBoundingClientRect(), n = e.clientX - t.left;
+		s(Math.min(Math.max(n / t.width * 100, 0), 100));
+	};
+	t(() => (p ? (u?.(!0), document.addEventListener("mousemove", v), document.addEventListener("mouseup", _)) : (u?.(!1), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", _)), () => {
+		document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", _);
+	}), [
+		p,
+		u,
+		_,
+		v
+	]);
+	let b = `arkynSliderTrack ${p ? "isDragging" : "isNotDragging"} ${l ? "isDisabled" : "isEnabled"} ${d}`;
+	return /* @__PURE__ */ a("div", {
+		...f,
+		className: b,
+		onMouseDown: g,
+		onClick: y,
+		ref: h,
+		children: [/* @__PURE__ */ i("div", {
+			className: "arkynSliderFill",
+			style: { width: `${c}%` }
+		}), /* @__PURE__ */ i("div", {
+			className: "arkynSliderThumb",
+			style: { left: `${c}%` }
+		})]
+	});
+}
+//#endregion
+export { o as Slider };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/slider/index.tsx"],"sourcesContent":["import {\n\ttype HTMLAttributes,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport \"./styles.css\";\n\ntype SliderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n\t/** Current slider position as a percentage (0–100). Required. */\n\tvalue: number;\n\t/** Callback fired whenever the value changes. Required. */\n\tonChange: (value: number) => void;\n\t/** Disables all drag and click interactions. @default false */\n\tdisabled?: boolean;\n\t/** Callback fired when the dragging state changes (`true` = drag started, `false` = drag ended). */\n\tonDragging?: (isDragging: boolean) => void;\n};\n\n/**\n * Slider — interactive track for selecting a numeric value between 0 and 100.\n *\n * Pair with `useSlider` for managed state.\n *\n * @param props.value - Current position as a percentage (0–100). Required.\n * @param props.onChange - Callback fired on value change. Required.\n * @param props.disabled - Disables interactions. Default: false\n * @param props.onDragging - Callback fired when dragging starts or stops.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Slider JSX element.\n *\n * @example\n * ```tsx\n * // Controlled slider\n * const [value, setValue] = useState(50);\n * <Slider value={value} onChange={setValue} />\n *\n * // With useSlider hook\n * const [value, setValue] = useSlider(25);\n * <Slider value={value} onChange={setValue} onDragging={setIsDragging} />\n *\n * // Disabled\n * <Slider value={75} onChange={() => {}} disabled />\n * ```\n */\n\nfunction Slider(props: SliderProps) {\n\tconst {\n\t\tonChange,\n\t\tvalue,\n\t\tdisabled = false,\n\t\tonDragging,\n\t\tclassName = \"\",\n\t\t...rest\n\t} = props;\n\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst sliderRef = useRef<HTMLDivElement>(null);\n\n\tconst handleMouseDown = () => setIsDragging(true);\n\tconst handleMouseUp = useCallback(() => setIsDragging(false), []);\n\n\tconst handleMouseMove = useCallback(\n\t\t(event: MouseEvent) => {\n\t\t\tif (disabled) return;\n\t\t\tif (!isDragging || !sliderRef.current) return;\n\n\t\t\tconst rect = sliderRef.current.getBoundingClientRect();\n\t\t\tconst offsetX = event.clientX - rect.left;\n\t\t\tconst newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);\n\n\t\t\tonChange(newValue);\n\t\t},\n\t\t[disabled, isDragging, onChange],\n\t);\n\n\tconst handleSliderClick = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\t\tif (!sliderRef.current) return;\n\n\t\tconst rect = sliderRef.current.getBoundingClientRect();\n\t\tconst offsetX = event.clientX - rect.left;\n\t\tconst newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);\n\n\t\tonChange(newValue);\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDragging) {\n\t\t\tonDragging?.(true);\n\t\t\tdocument.addEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.addEventListener(\"mouseup\", handleMouseUp);\n\t\t} else {\n\t\t\tonDragging?.(false);\n\t\t\tdocument.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.removeEventListener(\"mouseup\", handleMouseUp);\n\t\t}\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.removeEventListener(\"mouseup\", handleMouseUp);\n\t\t};\n\t}, [isDragging, onDragging, handleMouseUp, handleMouseMove]);\n\n\tconst isDraggingClass = isDragging ? \"isDragging\" : \"isNotDragging\";\n\tconst disabledClass = disabled ? \"isDisabled\" : \"isEnabled\";\n\tconst sliderClassname = `arkynSliderTrack ${isDraggingClass} ${disabledClass} ${className}`;\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={sliderClassname}\n\t\t\tonMouseDown={handleMouseDown}\n\t\t\tonClick={handleSliderClick}\n\t\t\tref={sliderRef}\n\t\t>\n\t\t\t<div className=\"arkynSliderFill\" style={{ width: `${value}%` }} />\n\t\t\t<div className=\"arkynSliderThumb\" style={{ left: `${value}%` }} />\n\t\t</div>\n\t);\n}\n\nexport { Slider };\n"],"mappings":";;;;AAkDA,SAAS,EAAO,GAAoB;CACnC,IAAM,EACL,aACA,UACA,cAAW,IACX,eACA,eAAY,IACZ,GAAG,MACA,GAEE,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,IAAY,EAAuB,IAAI,GAEvC,UAAwB,EAAc,EAAI,GAC1C,IAAgB,QAAkB,EAAc,EAAK,GAAG,CAAC,CAAC,GAE1D,IAAkB,GACtB,MAAsB;EAEtB,IADI,KACA,CAAC,KAAc,CAAC,EAAU,SAAS;EAEvC,IAAM,IAAO,EAAU,QAAQ,sBAAsB,GAC/C,IAAU,EAAM,UAAU,EAAK;EAGrC,EAFiB,KAAK,IAAI,KAAK,IAAK,IAAU,EAAK,QAAS,KAAK,CAAC,GAAG,GAE5D,CAAQ;CAClB,GACA;EAAC;EAAU;EAAY;CAAQ,CAChC,GAEM,KAAqB,MAA4C;EAEtE,IADI,KACA,CAAC,EAAU,SAAS;EAExB,IAAM,IAAO,EAAU,QAAQ,sBAAsB,GAC/C,IAAU,EAAM,UAAU,EAAK;EAGrC,EAFiB,KAAK,IAAI,KAAK,IAAK,IAAU,EAAK,QAAS,KAAK,CAAC,GAAG,GAE5D,CAAQ;CAClB;CAEA,SACK,KACH,IAAa,EAAI,GACjB,SAAS,iBAAiB,aAAa,CAAe,GACtD,SAAS,iBAAiB,WAAW,CAAa,MAElD,IAAa,EAAK,GAClB,SAAS,oBAAoB,aAAa,CAAe,GACzD,SAAS,oBAAoB,WAAW,CAAa,UAGzC;EAEZ,AADA,SAAS,oBAAoB,aAAa,CAAe,GACzD,SAAS,oBAAoB,WAAW,CAAa;CACtD,IACE;EAAC;EAAY;EAAY;EAAe;CAAe,CAAC;CAI3D,IAAM,IAAkB,oBAFA,IAAa,eAAe,gBAEQ,GADtC,IAAW,eAAe,YAC6B,GAAG;CAEhF,OACC,kBAAC,OAAD;EACC,GAAI;EACJ,WAAW;EACX,aAAa;EACb,SAAS;EACT,KAAK;YALN,CAOC,kBAAC,OAAD;GAAK,WAAU;GAAkB,OAAO,EAAE,OAAO,GAAG,EAAM,GAAG;EAAI,CAAA,GACjE,kBAAC,OAAD;GAAK,WAAU;GAAmB,OAAO,EAAE,MAAM,GAAG,EAAM,GAAG;EAAI,CAAA,CAC7D;;AAEP"}

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

@@ -0,0 +1 @@
+@layer arkyn{.arkynSliderTrack{border:1px solid var(--border,#e2e8f0);background:var(--input-background,#fafafa);cursor:pointer;border-radius:5px;width:100%;max-width:400px;height:6px;position:relative}.arkynSliderTrack.isDragging{cursor:grabbing}.arkynSliderTrack.isDisabled{cursor:not-allowed;opacity:.5}.arkynSliderFill{background:rgb(var(--spotlight-primary,17, 109, 220));border-radius:5px;height:100%}.arkynSliderThumb{background:rgb(var(--spotlight-primary,17, 109, 220));border-radius:50%;width:12px;height:12px;position:absolute;top:50%;transform:translate(-50%,-50%)}.arkynSliderTrack.isEnabled .arkynSliderThumb{cursor:grab}.arkynSliderValue{margin-top:10px;font-size:18px}}

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

@@ -0,0 +1,38 @@
+import { FieldTemplate as e } from "../../services/fieldTemplate.js";
+/* empty css       */
+import { useId as t, useRef as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/switch/index.tsx
+function a(a) {
+	let { label: o, size: s = "lg", defaultChecked: c = !1, checked: l = null, value: u, unCheckedValue: d = "", name: f, className: p = "", onCheck: m, id: h, orientation: g = "horizontalReverse", className: _ = "", showAsterisk: v, errorMessage: y, unShowFieldTemplate: b = !1, ...x } = a, S = n(null), C = t(), w = h || C, [T, E] = r(c), D = typeof l == "boolean" ? l : T;
+	function O() {
+		E(!T), m?.(D ? d : u || "checked");
+	}
+	return /* @__PURE__ */ i(e, {
+		name: f,
+		label: o,
+		showAsterisk: v,
+		className: _,
+		errorMessage: y,
+		unShowFieldTemplate: b,
+		orientation: g,
+		children: /* @__PURE__ */ i("button", {
+			type: "button",
+			onClick: O,
+			className: `arkynSwitch ${D ? "checkedTrue" : "checkedFalse"} ${s} ${p}`,
+			...x,
+			children: /* @__PURE__ */ i("input", {
+				id: w,
+				type: "hidden",
+				name: f,
+				ref: S,
+				onClick: O,
+				value: D ? u || "checked" : d
+			})
+		})
+	});
+}
+//#endregion
+export { a as Switch };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/switch/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport \"./styles.css\";\n\ntype SwitchProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"onChange\" | \"defaultValue\" | \"onCheck\" | \"value\"\n> & {\n\t/** Optional label text displayed beside the switch. */\n\tlabel?: string;\n\t/**\n\t * Switch size.\n\t * @default \"lg\"\n\t */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Uncontrolled initial checked state. @default false */\n\tdefaultChecked?: boolean;\n\t/** Controlled checked state. */\n\tchecked?: boolean;\n\t/** Value emitted when the switch is on. @default \"checked\" */\n\tvalue?: string;\n\t/** Value emitted when the switch is off. @default \"\" */\n\tunCheckedValue?: string;\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Callback fired on toggle — receives the current value string. */\n\tonCheck?: (value: string) => void;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontalReverse\"\n\t */\n\torientation?: \"vertical\" | \"horizontal\" | \"horizontalReverse\";\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Validation error message displayed below the switch. */\n\terrorMessage?: string;\n};\n\n/**\n * Switch — toggle input for binary on/off states.\n *\n * Stores value in a hidden `<input>` for native 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 beside the switch.\n * @param props.size - Switch size (`sm` | `md` | `lg`). Default: \"lg\"\n * @param props.defaultChecked - Uncontrolled initial checked state. Default: false\n * @param props.checked - Controlled checked state.\n * @param props.value - Value emitted when on. Default: \"checked\"\n * @param props.unCheckedValue - Value emitted when off. Default: \"\"\n * @param props.onCheck - Callback fired on toggle — receives the current value string.\n * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: \"horizontalReverse\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.errorMessage - Validation error message.\n *\n * **...Other valid HTML properties for `<button>` (except `children`, `onChange`, `defaultValue`)**\n *\n * @returns Switch JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Switch name=\"notifications\" label=\"Enable notifications\" />\n *\n * // Custom on/off values\n * <Switch\n *   name=\"theme\"\n *   label=\"Dark mode\"\n *   value=\"dark\"\n *   unCheckedValue=\"light\"\n *   onCheck={(v) => setTheme(v)}\n * />\n *\n * // Controlled\n * <Switch\n *   name=\"autoSave\"\n *   label=\"Auto-save\"\n *   checked={isAutoSaveEnabled}\n *   onCheck={(v) => setAutoSave(!!v)}\n *   size=\"md\"\n * />\n * ```\n */\n\nfunction Switch(props: SwitchProps) {\n\tconst {\n\t\tlabel,\n\t\tsize = \"lg\",\n\t\tdefaultChecked = false,\n\t\tchecked: baseChecked = null,\n\t\tvalue,\n\t\tunCheckedValue = \"\",\n\t\tname,\n\t\tclassName: baseClassName = \"\",\n\t\tonCheck,\n\t\tid,\n\t\torientation = \"horizontalReverse\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tshowAsterisk,\n\t\terrorMessage,\n\t\tunShowFieldTemplate = false,\n\t\t...rest\n\t} = props;\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id || generatedId;\n\n\tconst [isChecked, setIsChecked] = useState(defaultChecked);\n\n\tconst currentChecked =\n\t\ttypeof baseChecked === \"boolean\" ? baseChecked : isChecked;\n\n\tfunction handleCheck() {\n\t\tsetIsChecked(!isChecked);\n\t\tonCheck?.(!currentChecked ? value || \"checked\" : unCheckedValue);\n\t}\n\n\tconst checkedClass = currentChecked ? \"checkedTrue\" : \"checkedFalse\";\n\tconst className = `arkynSwitch ${checkedClass} ${size} ${baseClassName}`;\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<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={handleCheck}\n\t\t\t\tclassName={className}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tid={inputId}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonClick={handleCheck}\n\t\t\t\t\tvalue={currentChecked ? value || \"checked\" : unCheckedValue}\n\t\t\t\t/>\n\t\t\t</button>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Switch };\n"],"mappings":";;;;;AA0FA,SAAS,EAAO,GAAoB;CACnC,IAAM,EACL,UACA,UAAO,MACP,oBAAiB,IACjB,SAAS,IAAc,MACvB,UACA,oBAAiB,IACjB,SACA,WAAW,IAAgB,IAC3B,YACA,OACA,iBAAc,qBACd,WAAW,IAAmB,IAC9B,iBACA,iBACA,yBAAsB,IACtB,GAAG,MACA,GAEE,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,CAAC,GAAW,KAAgB,EAAS,CAAc,GAEnD,IACL,OAAO,KAAgB,YAAY,IAAc;CAElD,SAAS,IAAc;EAEtB,AADA,EAAa,CAAC,CAAS,GACvB,IAAW,IAAsC,IAArB,KAAS,SAA0B;CAChE;CAKA,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,UAAD;GACC,MAAK;GACL,SAAS;GACE,WAAA,eAhBO,IAAiB,gBAAgB,eACR,GAAG,EAAK,GAAG;GAgBtD,GAAI;aAEJ,kBAAC,SAAD;IACC,IAAI;IACJ,MAAK;IACC;IACN,KAAK;IACL,SAAS;IACT,OAAO,IAAiB,KAAS,YAAY;GAC7C,CAAA;EACM,CAAA;CACM,CAAA;AAEjB"}

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

@@ -0,0 +1,7 @@
+@layer arkyn{.arkynSwitch{border:1px solid #0000;border-radius:999999px;position:relative}.arkynSwitch:hover{cursor:pointer;transition:all .3s ease-in-out}.arkynSwitch:disabled{cursor:not-allowed;opacity:.5}.arkynSwitch:before{content:"";background-color:var(--white,#fff);border-radius:50%;transition:all .2s;position:absolute;top:2px;bottom:2px;transform:translate(-2px)}.arkynSwitch.checkedTrue{background-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSwitch.checkedFalse{background-color:var(--border,#e2e8f0)}.arkynSwitch.checkedTrue:before{transform:translate(3px)}.arkynSwitch.sm{min-width:32px;max-width:32px;min-height:16px;max-height:16px}.arkynSwitch.sm:before{min-width:10px;max-width:10px;min-height:10px;max-height:10px}.arkynSwitch.sm.checkedFalse:before{transform:translate(-13px)}.arkynSwitch.md{min-width:40px;max-width:40px;min-height:20px;max-height:20px}.arkynSwitch.md:before{min-width:14px;max-width:14px;min-height:14px;max-height:14px}.arkynSwitch.md.checkedFalse:before{transform:translate(-17px)}.arkynSwitch.lg{min-width:48px;max-width:48px;min-height:24px;max-height:24px}.arkynSwitch.lg:before{min-width:18px;max-width:18px;min-height:18px;max-height:18px}.arkynSwitch.lg.checkedFalse:before{transform:translate(-21px)}}
+
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body,#52525b);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}

package/dist/modules/components/tab/tabButton/index.js

@@ -0,0 +1,22 @@
+import { useTab as e } from "../tabContext.js";
+/* empty css       */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/tab/tabButton/index.tsx
+function n(n) {
+	let { children: r, disabled: i = !1, className: a = "", onClick: o, value: s, ...c } = n, { disabled: l, currentTab: u, changeCurrentTab: d } = e(), f = l || i, p = `arkynTabButton ${f ? "isDisabled" : ""} ${u === s && s ? "isActive" : ""} ${a}`;
+	function m(e) {
+		d(s), o?.(e);
+	}
+	return /* @__PURE__ */ t("button", {
+		onClick: m,
+		className: p.trim(),
+		...c,
+		disabled: f,
+		type: "button",
+		children: r
+	});
+}
+//#endregion
+export { n as TabButton };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/tab/tabButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/tab/tabButton/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, MouseEvent, ReactNode } from \"react\";\n\nimport { useTab } from \"../tabContext\";\nimport \"./styles.css\";\n\ntype TabButtonProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"value\" | \"type\"\n> & {\n\t/** Content displayed inside the tab button. */\n\tchildren: ReactNode;\n\t/** Unique identifier for this tab; matched against the container's active value. */\n\tvalue: string;\n};\n\n/**\n * TabButton — individual tab button inside a `TabContainer`.\n *\n * Reads active state and disabled state from `TabContainer` context.\n * The button's own `disabled` prop is ORed with the container's `disabled`.\n *\n * @param props.children - Tab label content. Required.\n * @param props.value - Tab identifier. Required.\n * @param props.disabled - Disables this tab individually (container can also disable all tabs).\n *\n * **...Other valid HTML `<button>` properties except `type`**\n *\n * @returns TabButton JSX element.\n *\n * @example\n * ```tsx\n * <TabContainer defaultValue=\"overview\" onChange={setTab}>\n *   <TabButton value=\"overview\">Overview</TabButton>\n *   <TabButton value=\"activity\">Activity</TabButton>\n *   <TabButton value=\"settings\" disabled>Settings</TabButton>\n * </TabContainer>\n * ```\n */\n\nfunction TabButton(props: TabButtonProps) {\n\tconst {\n\t\tchildren,\n\t\tdisabled: rawDisabled = false,\n\t\tclassName: baseClassName = \"\",\n\t\tonClick,\n\t\tvalue,\n\t\t...rest\n\t} = props;\n\n\tconst { disabled, currentTab, changeCurrentTab } = useTab();\n\n\tconst isDisabled = disabled || rawDisabled;\n\n\tconst disabledClass = isDisabled ? \"isDisabled\" : \"\";\n\tconst activeClass = currentTab === value && value ? \"isActive\" : \"\";\n\tconst className = `arkynTabButton ${disabledClass} ${activeClass} ${baseClassName}`;\n\n\tfunction handleClick(event: MouseEvent<HTMLButtonElement>) {\n\t\tchangeCurrentTab(value);\n\t\tonClick?.(event);\n\t}\n\n\treturn (\n\t\t<button\n\t\t\tonClick={handleClick}\n\t\t\tclassName={className.trim()}\n\t\t\t{...rest}\n\t\t\tdisabled={isDisabled}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\nexport { TabButton };\n"],"mappings":";;;;AAuCA,SAAS,EAAU,GAAuB;CACzC,IAAM,EACL,aACA,UAAU,IAAc,IACxB,WAAW,IAAgB,IAC3B,YACA,UACA,GAAG,MACA,GAEE,EAAE,aAAU,eAAY,wBAAqB,EAAO,GAEpD,IAAa,KAAY,GAIzB,IAAY,kBAFI,IAAa,eAAe,GAEA,GAD9B,MAAe,KAAS,IAAQ,aAAa,GACA,GAAG;CAEpE,SAAS,EAAY,GAAsC;EAE1D,AADA,EAAiB,CAAK,GACtB,IAAU,CAAK;CAChB;CAEA,OACC,kBAAC,UAAD;EACC,SAAS;EACT,WAAW,EAAU,KAAK;EAC1B,GAAI;EACJ,UAAU;EACV,MAAK;EAEJ;CACM,CAAA;AAEV"}

package/dist/modules/components/tab/tabButton/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynTabButton{color:var(--text-muted,#a1a1aa);background-color:#0000;border:none;justify-content:center;align-items:center;padding:8px 16px;font-size:16px;font-weight:600;line-height:100%;display:flex;position:relative}.arkynTabButton.isDisabled{cursor:not-allowed;opacity:.2}.arkynTabButton:hover{cursor:pointer}.arkynTabButton.isActive{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynTabButton.isActive:after{content:"";background-color:rgb(var(--spotlight-primary,17, 109, 220));height:1px;position:absolute;bottom:-1px;left:0;right:0}}

package/dist/modules/components/tab/tabContainer/index.js

@@ -0,0 +1,25 @@
+import { TabProvider as e } from "../tabContext.js";
+/* empty css       */
+import { useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/tab/tabContainer/index.tsx
+function r(r) {
+	let { children: i, onChange: a, defaultValue: o, disabled: s = !1, className: c, ...l } = r, [u, d] = t(o || ""), f = `arkynTabContainer ${c || ""}`;
+	function p(e) {
+		d(e), a && a(e);
+	}
+	return /* @__PURE__ */ n(e, {
+		disabled: s,
+		currentTab: u,
+		changeCurrentTab: p,
+		children: /* @__PURE__ */ n("nav", {
+			className: f.trim(),
+			...l,
+			children: i
+		})
+	});
+}
+//#endregion
+export { r as TabContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/tab/tabContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/tab/tabContainer/index.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useState } from \"react\";\n\nimport { TabProvider } from \"../tabContext\";\nimport \"./styles.css\";\n\ntype TabContainerProps = Omit<\n\tHTMLAttributes<HTMLElement>,\n\t\"onChange\" | \"children\" | \"ref\" | \"onClick\"\n> & {\n\t/** `TabButton` components to render as tabs. Required. */\n\tchildren: ReactNode;\n\t/** Disables all tab buttons at once. @default false */\n\tdisabled?: boolean;\n\t/** Initially selected tab value. */\n\tdefaultValue?: string;\n\t/** Callback fired when the active tab changes, receiving the new value. */\n\tonChange?: (index: string) => void;\n};\n\n/**\n * TabContainer — wrapper that manages active state for a group of `TabButton` components.\n *\n * Renders as a `<nav>` element. Provides context consumed by each `TabButton`.\n *\n * @param props.children - `TabButton` elements. Required.\n * @param props.defaultValue - Initially selected tab value.\n * @param props.disabled - Disables all buttons. Default: false\n * @param props.onChange - Called with the new value whenever the active tab changes.\n *\n * **...Other valid HTML `<nav>` properties**\n *\n * @returns TabContainer JSX element.\n *\n * @example\n * ```tsx\n * <TabContainer defaultValue=\"overview\" onChange={setActiveTab}>\n *   <TabButton value=\"overview\">Overview</TabButton>\n *   <TabButton value=\"analytics\">Analytics</TabButton>\n *   <TabButton value=\"settings\">Settings</TabButton>\n * </TabContainer>\n *\n * {activeTab === 'overview' && <OverviewPanel />}\n * {activeTab === 'analytics' && <AnalyticsPanel />}\n * ```\n */\n\nfunction TabContainer(props: TabContainerProps) {\n\tconst {\n\t\tchildren,\n\t\tonChange,\n\t\tdefaultValue,\n\t\tdisabled = false,\n\t\tclassName: baseClassName,\n\t\t...rest\n\t} = props;\n\n\tconst [currentTab, setCurrentTab] = useState(defaultValue || \"\");\n\n\tconst className = `arkynTabContainer ${baseClassName || \"\"}`;\n\n\tfunction changeCurrentTab(value: string) {\n\t\tsetCurrentTab(value);\n\t\tif (onChange) onChange(value);\n\t}\n\n\treturn (\n\t\t<TabProvider\n\t\t\tdisabled={disabled}\n\t\t\tcurrentTab={currentTab}\n\t\t\tchangeCurrentTab={changeCurrentTab}\n\t\t>\n\t\t\t<nav className={className.trim()} {...rest}>\n\t\t\t\t{children}\n\t\t\t</nav>\n\t\t</TabProvider>\n\t);\n}\n\nexport { TabContainer };\n"],"mappings":";;;;;AA8CA,SAAS,EAAa,GAA0B;CAC/C,IAAM,EACL,aACA,aACA,iBACA,cAAW,IACX,WAAW,GACX,GAAG,MACA,GAEE,CAAC,GAAY,KAAiB,EAAS,KAAgB,EAAE,GAEzD,IAAY,qBAAqB,KAAiB;CAExD,SAAS,EAAiB,GAAe;EAExC,AADA,EAAc,CAAK,GACf,KAAU,EAAS,CAAK;CAC7B;CAEA,OACC,kBAAC,GAAD;EACW;EACE;EACM;YAElB,kBAAC,OAAD;GAAK,WAAW,EAAU,KAAK;GAAG,GAAI;GACpC;EACG,CAAA;CACO,CAAA;AAEf"}

package/dist/modules/components/tab/tabContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynTabContainer{border-bottom:1px solid var(--border,#e2e8f0);justify-content:start;align-items:center;gap:4px;display:flex;position:relative}}

package/dist/modules/components/tab/tabContext.js

@@ -0,0 +1,26 @@
+import { createContext as e, useContext as t, useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/tab/tabContext.tsx
+var i = e({});
+function a() {
+	return t(i);
+}
+function o(e) {
+	let { disabled: t, currentTab: a, changeCurrentTab: o } = e, s = n(() => ({
+		disabled: t,
+		currentTab: a,
+		changeCurrentTab: o
+	}), [
+		t,
+		a,
+		o
+	]);
+	return /* @__PURE__ */ r(i.Provider, {
+		value: s,
+		children: e.children
+	});
+}
+//#endregion
+export { o as TabProvider, a as useTab };
+
+//# sourceMappingURL=tabContext.js.map

package/dist/modules/components/tab/tabContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabContext.js","names":[],"sources":["../../../../src/components/tab/tabContext.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useMemo } from \"react\";\n\ntype TabContextProps = {\n\tdisabled: boolean;\n\tcurrentTab: string;\n\tchangeCurrentTab: (tab: string) => void;\n};\n\ntype TabProviderProps = {\n\tchildren: ReactNode;\n\tdisabled: boolean;\n\tcurrentTab: string;\n\tchangeCurrentTab: (tab: string) => void;\n};\n\nconst TabContext = createContext({} as TabContextProps);\n\nfunction useTab() {\n\treturn useContext(TabContext);\n}\n\nfunction TabProvider(props: TabProviderProps) {\n\tconst { disabled, currentTab, changeCurrentTab } = props;\n\n\tconst value = useMemo(\n\t\t() => ({ disabled, currentTab, changeCurrentTab }),\n\t\t[disabled, currentTab, changeCurrentTab],\n\t);\n\n\treturn (\n\t\t<TabContext.Provider value={value}>{props.children}</TabContext.Provider>\n\t);\n}\n\nexport { TabProvider, useTab };\n"],"mappings":";;;AAeA,IAAM,IAAa,EAAc,CAAC,CAAoB;AAEtD,SAAS,IAAS;CACjB,OAAO,EAAW,CAAU;AAC7B;AAEA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EAAE,aAAU,eAAY,wBAAqB,GAE7C,IAAQ,SACN;EAAE;EAAU;EAAY;CAAiB,IAChD;EAAC;EAAU;EAAY;CAAgB,CACxC;CAEA,OACC,kBAAC,EAAW,UAAZ;EAA4B;YAAQ,EAAM;CAA8B,CAAA;AAE1E"}

package/dist/modules/components/table/tableBody/index.js

@@ -0,0 +1,22 @@
+/* empty css       */
+import { Children as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/table/tableBody/index.tsx
+function n(n) {
+	let { emptyMessage: r = "Nenhum dado adicionado.", className: i, children: a, ...o } = n, s = `arkynTableBody ${i}`, c = e.toArray(a).filter(Boolean), l = c.length === 0;
+	return /* @__PURE__ */ t("tbody", {
+		className: s.trim(),
+		...o,
+		children: l ? /* @__PURE__ */ t("tr", {
+			className: "arkynTableBodyEmptyLine",
+			children: /* @__PURE__ */ t("td", {
+				colSpan: 100,
+				children: /* @__PURE__ */ t("div", { children: r })
+			})
+		}) : c
+	});
+}
+//#endregion
+export { n as TableBody };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/table/tableBody/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/table/tableBody/index.tsx"],"sourcesContent":["import { Children, type HTMLAttributes } from \"react\";\nimport \"./styles.css\";\n\ntype TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {\n\t/** Text displayed in a full-width row when no children are present. @default \"Nenhum dado adicionado.\" */\n\temptyMessage?: string;\n};\n\n/**\n * TableBody — `<tbody>` section with built-in empty state handling.\n *\n * When `children` is empty, renders a full-width row with `emptyMessage`.\n * Accepts all standard HTML `<tbody>` attributes.\n *\n * @param props.emptyMessage - Empty state text. Default: `\"Nenhum dado adicionado.\"`\n *\n * **...Other valid HTML `<tbody>` properties**\n *\n * @returns TableBody JSX element.\n *\n * @example\n * ```tsx\n * <TableBody emptyMessage=\"No orders found\">\n *   {orders.map(o => (\n *     <tr key={o.id}>\n *       <td>{o.number}</td>\n *       <td>{o.status}</td>\n *     </tr>\n *   ))}\n * </TableBody>\n * ```\n */\n\nfunction TableBody(props: TableBodyProps) {\n\tconst {\n\t\temptyMessage = \"Nenhum dado adicionado.\",\n\t\tclassName: baseClassName,\n\t\tchildren,\n\t\t...rest\n\t} = props;\n\n\tconst className = `arkynTableBody ${baseClassName}`;\n\tconst childArray = Children.toArray(children).filter(Boolean);\n\tconst isEmpty = childArray.length === 0;\n\n\treturn (\n\t\t<tbody className={className.trim()} {...rest}>\n\t\t\t{isEmpty ? (\n\t\t\t\t<tr className=\"arkynTableBodyEmptyLine\">\n\t\t\t\t\t<td colSpan={100}>\n\t\t\t\t\t\t<div>{emptyMessage}</div>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t) : (\n\t\t\t\tchildArray\n\t\t\t)}\n\t\t</tbody>\n\t);\n}\n\nexport { TableBody };\n"],"mappings":";;;;AAiCA,SAAS,EAAU,GAAuB;CACzC,IAAM,EACL,kBAAe,2BACf,WAAW,GACX,aACA,GAAG,MACA,GAEE,IAAY,kBAAkB,KAC9B,IAAa,EAAS,QAAQ,CAAQ,CAAC,CAAC,OAAO,OAAO,GACtD,IAAU,EAAW,WAAW;CAEtC,OACC,kBAAC,SAAD;EAAO,WAAW,EAAU,KAAK;EAAG,GAAI;YACtC,IACA,kBAAC,MAAD;GAAI,WAAU;aACb,kBAAC,MAAD;IAAI,SAAS;cACZ,kBAAC,OAAD,EAAA,UAAM,EAAkB,CAAA;GACrB,CAAA;EACD,CAAA,IAEJ;CAEK,CAAA;AAET"}

package/dist/modules/components/table/tableBody/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynTableBodyEmptyLine>td{background-color:var(--background-underground,#fafafa);height:64px}.arkynTableBodyEmptyLine>td>div{text-align:center;white-space:nowrap;color:var(--text-body,#52525b);justify-content:center;align-items:center;font-size:14px;font-weight:400;display:flex}.arkynTableBody>tr>td{height:64px;color:var(--text-body,#52525b);padding-left:16px;font-size:14px;font-weight:400}.arkynTableBody>tr>td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.arkynTableBody>tr>td:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px;padding-right:16px}.arkynTableBody>tr:nth-child(odd)>td{background-color:var(--background-underground,#fafafa)}.arkynTableBody>tr:nth-child(odd):hover>td{filter:brightness(.98)}.arkynTableBody>tr:nth-child(2n):hover>td{background-color:var(--background-underground,#fafafa);filter:brightness(.98)}html.dark .arkynTableBody>tr:nth-child(odd):hover>td{filter:brightness(1.2)}html.dark .arkynTableBody>tr:nth-child(2n):hover>td{background-color:var(--background-underground,#fafafa);filter:brightness(1.2)}}

package/dist/modules/components/table/tableCaption/index.js

@@ -0,0 +1,18 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/table/tableCaption/index.tsx
+function t(t) {
+	let { className: n, children: r, ...i } = t;
+	return /* @__PURE__ */ e("caption", {
+		className: `arkynTableCaption ${n}`.trim(),
+		...i,
+		children: /* @__PURE__ */ e("div", {
+			className: "arkynTableCaptionContent",
+			children: r
+		})
+	});
+}
+//#endregion
+export { t as TableCaption };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/table/tableCaption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/table/tableCaption/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport \"./styles.css\";\n\ntype TableCaptionProps = HTMLAttributes<HTMLElement>;\n\n/**\n * TableCaption — title / description placed above a table. Renders as a `<caption>` element.\n *\n * Accepts all standard HTML element attributes.\n *\n * @returns TableCaption JSX element.\n *\n * @example\n * ```tsx\n * <TableContainer>\n *   <TableCaption>Orders — Q2 2025</TableCaption>\n *   <TableHeader>...</TableHeader>\n *   <TableBody>...</TableBody>\n * </TableContainer>\n * ```\n */\n\nfunction TableCaption(props: TableCaptionProps) {\n\tconst { className: baseClassName, children, ...rest } = props;\n\tconst className = `arkynTableCaption ${baseClassName}`;\n\n\treturn (\n\t\t<caption className={className.trim()} {...rest}>\n\t\t\t<div className=\"arkynTableCaptionContent\">{children}</div>\n\t\t</caption>\n\t);\n}\n\nexport { TableCaption };\n"],"mappings":";;;AAsBA,SAAS,EAAa,GAA0B;CAC/C,IAAM,EAAE,WAAW,GAAe,aAAU,GAAG,MAAS;CAGxD,OACC,kBAAC,WAAD;EAAS,WAAW,qBAHkB,IAGR,KAAK;EAAG,GAAI;YACzC,kBAAC,OAAD;GAAK,WAAU;GAA4B;EAAc,CAAA;CACjD,CAAA;AAEX"}

package/dist/modules/components/table/tableCaption/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynTableCaption{margin-bottom:24px}.arkynTableCaptionContent{align-items:center;display:flex}.arkynTableCaptionContent>.rightSection{flex:2;justify-content:end;align-items:center;gap:16px;padding-left:auto;display:flex}}

package/dist/modules/components/table/tableContainer/index.js

@@ -0,0 +1,15 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/table/tableContainer/index.tsx
+function t(t) {
+	let { children: n, className: r, ...i } = t;
+	return /* @__PURE__ */ e("div", {
+		className: `arkynTableContainer ${r}`.trim(),
+		...i,
+		children: /* @__PURE__ */ e("table", { children: n })
+	});
+}
+//#endregion
+export { t as TableContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/table/tableContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/table/tableContainer/index.tsx"],"sourcesContent":["import type { TableHTMLAttributes } from \"react\";\nimport \"./styles.css\";\n\ntype TableContainerProps = TableHTMLAttributes<HTMLTableElement>;\n\n/**\n * TableContainer — root wrapper for the Table component set. Renders a responsive scrollable container around a `<table>`.\n *\n * Accepts all standard HTML `<table>` attributes.\n *\n * @returns TableContainer JSX element.\n *\n * @example\n * ```tsx\n * <TableContainer>\n *   <TableCaption>Users</TableCaption>\n *   <TableHeader>\n *     <th>Name</th>\n *     <th>Email</th>\n *     <th>Status</th>\n *   </TableHeader>\n *   <TableBody emptyMessage=\"No users found\">\n *     {users.map(u => (\n *       <tr key={u.id}>\n *         <td>{u.name}</td>\n *         <td>{u.email}</td>\n *         <td>{u.status}</td>\n *       </tr>\n *     ))}\n *   </TableBody>\n *   <TableFooter><Pagination /></TableFooter>\n * </TableContainer>\n * ```\n */\n\nfunction TableContainer(props: TableContainerProps) {\n\tconst { children, className: baseClassName, ...rest } = props;\n\tconst className = `arkynTableContainer ${baseClassName}`;\n\n\treturn (\n\t\t<div className={className.trim()} {...rest}>\n\t\t\t<table>{children}</table>\n\t\t</div>\n\t);\n}\n\nexport { TableContainer };\n"],"mappings":";;;AAmCA,SAAS,EAAe,GAA4B;CACnD,IAAM,EAAE,aAAU,WAAW,GAAe,GAAG,MAAS;CAGxD,OACC,kBAAC,OAAD;EAAK,WAAW,uBAHwB,IAGd,KAAK;EAAG,GAAI;YACrC,kBAAC,SAAD,EAAQ,YAAgB,CAAA;CACpB,CAAA;AAEP"}

package/dist/modules/components/table/tableContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynTableContainer{flex-direction:column;width:100%;height:max-content;display:flex;overflow:auto hidden}.arkynTableContainer table{border-collapse:separate;border-spacing:0}}

package/dist/modules/components/table/tableFooter/index.js

@@ -0,0 +1,21 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/table/tableFooter/index.tsx
+function n(n) {
+	let { className: r, children: i, ...a } = n;
+	return /* @__PURE__ */ t("tfoot", {
+		className: `arkynTableFooter ${r}`.trim(),
+		...a,
+		children: [/* @__PURE__ */ e("tr", { className: "spacingRow" }), /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("th", {
+			colSpan: 100,
+			children: /* @__PURE__ */ e("div", {
+				className: "arkynTableFooterContent",
+				children: i
+			})
+		}) })]
+	});
+}
+//#endregion
+export { n as TableFooter };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/table/tableFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/table/tableFooter/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport \"./styles.css\";\n\ntype TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;\n\n/**\n * TableFooter — `<tfoot>` section with an automatic spacing row above the content.\n *\n * Children span all columns via `colSpan={100}`. Commonly used for `Pagination`.\n * Accepts all standard HTML `<tfoot>` attributes.\n *\n * @returns TableFooter JSX element.\n *\n * @example\n * ```tsx\n * <TableFooter>\n *   <Pagination currentPage={page} totalPages={totalPages} onChange={setPage} />\n * </TableFooter>\n * ```\n */\n\nfunction TableFooter(props: TableFooterProps) {\n\tconst { className: baseClassName, children, ...rest } = props;\n\tconst className = `arkynTableFooter ${baseClassName}`;\n\n\treturn (\n\t\t<tfoot className={className.trim()} {...rest}>\n\t\t\t<tr className=\"spacingRow\" />\n\t\t\t<tr>\n\t\t\t\t<th colSpan={100}>\n\t\t\t\t\t<div className=\"arkynTableFooterContent\">{children}</div>\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</tfoot>\n\t);\n}\n\nexport { TableFooter };\n"],"mappings":";;;AAqBA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EAAE,WAAW,GAAe,aAAU,GAAG,MAAS;CAGxD,OACC,kBAAC,SAAD;EAAO,WAAW,oBAHmB,IAGT,KAAK;EAAG,GAAI;YAAxC,CACC,kBAAC,MAAD,EAAI,WAAU,aAAc,CAAA,GAC5B,kBAAC,MAAD,EAAA,UACC,kBAAC,MAAD;GAAI,SAAS;aACZ,kBAAC,OAAD;IAAK,WAAU;IAA2B;GAAc,CAAA;EACrD,CAAA,EACD,CAAA,CACE;;AAET"}

package/dist/modules/components/table/tableFooter/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynTableFooterContent{border-top:1px solid var(--border,#e2e8f0);justify-content:space-between;align-items:center;height:48px;padding-top:16px;display:flex}.arkynTableFooter .spacingRow{height:24px}}

package/dist/modules/components/table/tableHeader/index.js

@@ -0,0 +1,15 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/table/tableHeader/index.tsx
+function n(n) {
+	let { className: r, children: i, ...a } = n;
+	return /* @__PURE__ */ t("thead", {
+		className: `arkynTableHeader ${r}`.trim(),
+		...a,
+		children: [/* @__PURE__ */ e("tr", { children: i }), /* @__PURE__ */ e("tr", { className: "spacingRow" })]
+	});
+}
+//#endregion
+export { n as TableHeader };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/table/tableHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/table/tableHeader/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport \"./styles.css\";\n\ntype TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;\n\n/**\n * TableHeader — `<thead>` section with an automatic spacing row below the header row.\n *\n * Pass `<th>` elements as children — they are wrapped in a `<tr>` automatically.\n * Accepts all standard HTML `<thead>` attributes.\n *\n * @returns TableHeader JSX element.\n *\n * @example\n * ```tsx\n * <TableHeader>\n *   <th>Name</th>\n *   <th>Email</th>\n *   <th>Actions</th>\n * </TableHeader>\n * ```\n */\n\nfunction TableHeader(props: TableHeaderProps) {\n\tconst { className: baseClassName, children, ...rest } = props;\n\tconst className = `arkynTableHeader ${baseClassName}`;\n\n\treturn (\n\t\t<thead className={className.trim()} {...rest}>\n\t\t\t<tr>{children}</tr>\n\t\t\t<tr className=\"spacingRow\" />\n\t\t</thead>\n\t);\n}\n\nexport { TableHeader };\n"],"mappings":";;;AAuBA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EAAE,WAAW,GAAe,aAAU,GAAG,MAAS;CAGxD,OACC,kBAAC,SAAD;EAAO,WAAW,oBAHmB,IAGT,KAAK;EAAG,GAAI;YAAxC,CACC,kBAAC,MAAD,EAAK,YAAa,CAAA,GAClB,kBAAC,MAAD,EAAI,WAAU,aAAc,CAAA,CACtB;;AAET"}