@arkyn/components 3.0.1-beta.99 → 3.0.3

package/dist/modules/components/cardTab/cardTabButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/cardTab/cardTabButton/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, MouseEvent, ReactNode } from \"react\";\n\nimport { useCardTab } from \"../cardTabContext\";\nimport \"./styles.css\";\n\ntype CardTabButtonProps = 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 * CardTabButton — individual tab button inside a `CardTabContainer`.\n *\n * Reads active state and disabled state from `CardTabContainer` 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 CardTabButton JSX element.\n *\n * @example\n * ```tsx\n * <CardTabContainer defaultValue=\"details\" onChange={setTab}>\n *   <CardTabButton value=\"details\">Details</CardTabButton>\n *   <CardTabButton value=\"history\">History</CardTabButton>\n *   <CardTabButton value=\"settings\" disabled>Settings</CardTabButton>\n * </CardTabContainer>\n * ```\n */\n\nfunction CardTabButton(props: CardTabButtonProps) {\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 } = useCardTab();\n\n\tconst isDisabled = disabled || rawDisabled;\n\n\tconst disabledClass = isDisabled ? \"isDisabled\" : \"\";\n\tconst activeClass = currentTab === value && value ? \"isActive\" : \"\";\n\tconst className = `arkynCardTabButton ${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 { CardTabButton };\n"],"mappings":";;;;AAuCA,SAAS,EAAc,GAA2B;CACjD,IAAM,EACL,aACA,UAAU,IAAc,IACxB,WAAW,IAAgB,IAC3B,YACA,UACA,GAAG,MACA,GAEE,EAAE,aAAU,eAAY,wBAAqB,EAAW,GAExD,IAAa,KAAY,GAIzB,IAAY,sBAFI,IAAa,eAAe,GAEI,GADlC,MAAe,KAAS,IAAQ,aAAa,GACI,GAAG;CAExE,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/cardTab/cardTabButton/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynCardTabButton{letter-spacing:0%;color:var(--text-heading,#09090b);cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;height:40px;padding:8px 16px;font-size:14px;font-weight:600;display:flex}.arkynCardTabButton.isDisabled{cursor:not-allowed;opacity:.2}.arkynCardTabButton:hover:not(:disabled),.arkynCardTabButton.isActive{background-color:var(--background-foreground,#fff);border-color:var(--border,#e2e8f0)}}

package/dist/modules/components/cardTab/cardTabContainer/index.js

@@ -0,0 +1,25 @@
+import { CardTabProvider as e } from "../cardTabContext.js";
+/* empty css       */
+import { useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/cardTab/cardTabContainer/index.tsx
+function r(r) {
+	let { children: i, onChange: a, defaultValue: o, disabled: s = !1, className: c, ...l } = r, [u, d] = t(o || ""), f = `arkynCardTabContainer ${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 CardTabContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/cardTab/cardTabContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/cardTab/cardTabContainer/index.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useState } from \"react\";\n\nimport { CardTabProvider } from \"../cardTabContext\";\nimport \"./styles.css\";\n\ntype CardTabContainerProps = Omit<\n\tHTMLAttributes<HTMLElement>,\n\t\"onClick\" | \"children\" | \"ref\" | \"onChange\"\n> & {\n\t/** `CardTabButton` 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 * CardTabContainer — wrapper that manages active state for a group of `CardTabButton` components.\n *\n * Renders as a `<nav>` element. Provides context consumed by each `CardTabButton`.\n *\n * @param props.children - `CardTabButton` 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 CardTabContainer JSX element.\n *\n * @example\n * ```tsx\n * <CardTabContainer defaultValue=\"overview\" onChange={setActiveTab}>\n *   <CardTabButton value=\"overview\">Overview</CardTabButton>\n *   <CardTabButton value=\"analytics\">Analytics</CardTabButton>\n *   <CardTabButton value=\"settings\">Settings</CardTabButton>\n * </CardTabContainer>\n *\n * {activeTab === 'overview' && <OverviewPanel />}\n * {activeTab === 'analytics' && <AnalyticsPanel />}\n * ```\n */\n\nfunction CardTabContainer(props: CardTabContainerProps) {\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 = `arkynCardTabContainer ${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<CardTabProvider\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</CardTabProvider>\n\t);\n}\n\nexport { CardTabContainer };\n"],"mappings":";;;;;AA8CA,SAAS,EAAiB,GAA8B;CACvD,IAAM,EACL,aACA,aACA,iBACA,cAAW,IACX,WAAW,GACX,GAAG,MACA,GAEE,CAAC,GAAY,KAAiB,EAAS,KAAgB,EAAE,GAEzD,IAAY,yBAAyB,KAAiB;CAE5D,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;CACW,CAAA;AAEnB"}

package/dist/modules/components/cardTab/cardTabContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynCardTabContainer{background-color:var(--background-underground,#fafafa);border-radius:8px;align-items:center;gap:4px;width:max-content;padding:4px;display:flex;overflow:hidden}}

package/dist/modules/components/cardTab/cardTabContext.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/cardTab/cardTabContext.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 CardTabProvider, a as useCardTab };
+
+//# sourceMappingURL=cardTabContext.js.map

package/dist/modules/components/cardTab/cardTabContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardTabContext.js","names":[],"sources":["../../../../src/components/cardTab/cardTabContext.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useMemo } from \"react\";\n\ntype CardTabContextProps = {\n\tdisabled: boolean;\n\tcurrentTab: string;\n\tchangeCurrentTab: (tab: string) => void;\n};\n\ntype CardTabProviderProps = {\n\tchildren: ReactNode;\n\tdisabled: boolean;\n\tcurrentTab: string;\n\tchangeCurrentTab: (tab: string) => void;\n};\n\nconst CardTabContext = createContext({} as CardTabContextProps);\n\nfunction useCardTab() {\n\treturn useContext(CardTabContext);\n}\n\nfunction CardTabProvider(props: CardTabProviderProps) {\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<CardTabContext.Provider value={value}>\n\t\t\t{props.children}\n\t\t</CardTabContext.Provider>\n\t);\n}\n\nexport { CardTabProvider, useCardTab };\n"],"mappings":";;;AAeA,IAAM,IAAiB,EAAc,CAAC,CAAwB;AAE9D,SAAS,IAAa;CACrB,OAAO,EAAW,CAAc;AACjC;AAEA,SAAS,EAAgB,GAA6B;CACrD,IAAM,EAAE,aAAU,eAAY,wBAAqB,GAE7C,IAAQ,SACN;EAAE;EAAU;EAAY;CAAiB,IAChD;EAAC;EAAU;EAAY;CAAgB,CACxC;CAEA,OACC,kBAAC,EAAe,UAAhB;EAAgC;YAC9B,EAAM;CACiB,CAAA;AAE3B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/checkbox/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { type ButtonHTMLAttributes, useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport \"./styles.css\";\n\ntype CheckboxProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t| \"size\"\n\t| \"prefix\"\n\t| \"type\"\n\t| \"name\"\n\t| \"defaultValue\"\n\t| \"value\"\n\t| \"onChange\"\n\t| \"onSelect\"\n\t| \"onClick\"\n> & {\n\t/** Optional label text displayed beside the checkbox. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Validation error message displayed below the checkbox. */\n\terrorMessage?: string;\n\t/**\n\t * Checkbox size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\" | \"sm\";\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Value stored in the hidden input when checked. @default \"checked\" */\n\tvalue?: string;\n\t/** Controlled checked state. */\n\tchecked?: boolean;\n\t/** Uncontrolled initial checked state. @default false */\n\tdefaultChecked?: boolean;\n\t/** Callback fired on toggle — receives the value string (or `\"\"` when unchecked). */\n\tonCheck?: (value: string) => void;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontalReverse\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * Checkbox — interactive checkbox input with label, validation, and form integration.\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 checkbox.\n * @param props.size - Checkbox size (`sm` | `md` | `lg`). Default: \"md\"\n * @param props.value - Value stored when checked. Default: \"checked\"\n * @param props.checked - Controlled checked state.\n * @param props.defaultChecked - Uncontrolled initial checked state. Default: false\n * @param props.onCheck - Callback fired on toggle — receives value or `\"\"` when unchecked.\n * @param props.errorMessage - Validation error message.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: \"horizontalReverse\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * **...Other valid HTML properties for `<button>` (except `type`, `name`, `defaultValue`, `value`, `onChange`, `onSelect`, `onClick`)**\n *\n * @returns Checkbox JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" />\n *\n * // With custom value and error\n * <Checkbox\n *   name=\"newsletter\"\n *   label=\"Subscribe to newsletter\"\n *   value=\"subscribed\"\n *   errorMessage={errors.newsletter}\n * />\n *\n * // Controlled\n * <Checkbox\n *   name=\"premium\"\n *   label=\"Enable premium features\"\n *   size=\"lg\"\n *   checked={isPremium}\n *   onCheck={(v) => setIsPremium(!!v)}\n * />\n * ```\n */\n\nfunction Checkbox(props: CheckboxProps) {\n\tconst {\n\t\tid,\n\t\tname,\n\t\tclassName: wrapperClassName = \"\",\n\t\tsize = \"md\",\n\t\terrorMessage: baseErrorMessage,\n\t\tdefaultChecked = false,\n\t\tlabel,\n\t\tchecked: baseChecked = null,\n\t\tonCheck,\n\t\torientation = \"horizontalReverse\",\n\t\tshowAsterisk,\n\t\tunShowFieldTemplate,\n\t\tvalue,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst checkboxRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst checkboxId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\n\tconst [isChecked, setIsChecked] = useState(defaultChecked || false);\n\n\tconst currentChecked =\n\t\ttypeof baseChecked === \"boolean\" ? baseChecked : isChecked;\n\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst currentCheckedClass = currentChecked ? \"checkedTrue\" : \"checkedFalse\";\n\n\tconst className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass}`;\n\n\tfunction handleCheck() {\n\t\tconst defaultChecked = isChecked;\n\t\tsetIsChecked(!defaultChecked);\n\t\tonCheck?.(!defaultChecked ? value || \"checked\" : \"\");\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<button\n\t\t\t\tid={checkboxId}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={className}\n\t\t\t\tonClick={handleCheck}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tref={checkboxRef}\n\t\t\t\t\tvalue={currentChecked ? value || \"checked\" : \"\"}\n\t\t\t\t/>\n\n\t\t\t\t<Check />\n\t\t\t</button>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;;AAgGA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OACA,SACA,WAAW,IAAmB,IAC9B,UAAO,MACP,cAAc,GACd,oBAAiB,IACjB,UACA,SAAS,IAAc,MACvB,YACA,iBAAc,qBACd,iBACA,wBACA,UACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAE1B,IAAc,EAAyB,IAAI,GAC3C,IAAc,EAAM,GACpB,IAAa,KAAM,GAEnB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GAEZ,CAAC,GAAW,KAAgB,EAAS,KAAkB,EAAK,GAE5D,IACL,OAAO,KAAgB,YAAY,IAAc,GAK5C,IAAY,iBAAiB,EAAK,GAHrB,IAAU,cAAc,aAGW,GAF1B,IAAiB,gBAAgB;CAI7D,SAAS,IAAc;EACtB,IAAM,IAAiB;EAEvB,AADA,EAAa,CAAC,CAAc,GAC5B,IAAW,IAAsC,KAArB,KAAS,SAAc;CACpD;CAEA,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,UAAD;GACC,IAAI;GACJ,MAAK;GACM;GACX,SAAS;GACT,GAAI;aALL,CAOC,kBAAC,SAAD;IACC,MAAK;IACC;IACN,KAAK;IACL,OAAO,IAAiB,KAAS,YAAY;GAC7C,CAAA,GAED,kBAAC,GAAD,CAAQ,CAAA,CACD;;CACM,CAAA;AAEjB"}

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

@@ -0,0 +1,7 @@
+@layer arkyn{.arkynCheckbox{border:2px solid var(--border,#e2e8f0);background-color:var(--input-background,#fafafa);justify-content:center;align-items:center;display:flex}.arkynCheckbox:hover{cursor:pointer}.arkynCheckbox>svg{stroke-width:3px;display:none}.arkynCheckbox.sm{border-radius:4px;min-width:16px;max-width:16px;min-height:16px;max-height:16px}.arkynCheckbox.sm>svg{min-width:12px;max-width:12px;min-height:12px;max-height:12px}.arkynCheckbox.md{border-radius:4px;min-width:20px;max-width:20px;min-height:20px;max-height:20px}.arkynCheckbox.md>svg{min-width:14px;max-width:14px;min-height:14px;max-height:14px}.arkynCheckbox.lg{border-radius:6px;min-width:24px;max-width:24px;min-height:24px;max-height:24px}.arkynCheckbox.lg>svg{min-width:14px;max-width:14px;min-height:14px;max-height:14px}.arkynCheckbox.checkedTrue{background-color:rgb(var(--spotlight-primary,17, 109, 220));border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCheckbox.checkedTrue>svg{display:unset;color:var(--white,#fff)}.arkynCheckbox.errorTrue{border-color:rgb(var(--spotlight-danger,244, 63, 94))}}
+
+@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/clientOnly.js

@@ -0,0 +1,10 @@
+import { useHydrated as e } from "../hooks/useHydrated.js";
+//#region src/components/clientOnly.tsx
+function t(t) {
+	let { children: n, fallback: r = null } = t;
+	return e() ? n() : r;
+}
+//#endregion
+export { t as ClientOnly };
+
+//# sourceMappingURL=clientOnly.js.map

package/dist/modules/components/clientOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clientOnly.js","names":[],"sources":["../../../src/components/clientOnly.tsx"],"sourcesContent":["import { useHydrated } from \"../hooks/useHydrated\";\n\ntype ClientOnlyProps = {\n\t/** Render function — called after hydration on the client. Required. */\n\tchildren(): React.ReactNode;\n\t/** Content rendered during SSR or before hydration. @default null */\n\tfallback?: React.ReactNode;\n};\n\n/**\n * ClientOnly — renders its children only after client-side hydration.\n *\n * Prevents React hydration mismatches for components that rely on browser-only APIs\n * (e.g. `window`, `navigator`, `document`). Uses `useHydrated` internally.\n *\n * @param props.children - Render function executed after hydration. Required.\n * @param props.fallback - Content shown during SSR / before hydration. Default: null\n *\n * @returns `children()` after hydration, otherwise `fallback`.\n *\n * @example\n * ```tsx\n * // With a skeleton fallback\n * <ClientOnly fallback={<Skeleton />}>\n *   {() => <InteractiveWidget />}\n * </ClientOnly>\n *\n * // Using browser APIs safely\n * <ClientOnly fallback={<p>Loading...</p>}>\n *   {() => <p>Current time: {new Date().toLocaleString()}</p>}\n * </ClientOnly>\n * ```\n */\n\nfunction ClientOnly(props: ClientOnlyProps) {\n\tconst { children, fallback = null } = props;\n\treturn useHydrated() ? children() : fallback;\n}\n\nexport { ClientOnly };\n"],"mappings":";;AAkCA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EAAE,aAAU,cAAW,SAAS;CACtC,OAAO,EAAY,IAAI,EAAS,IAAI;AACrC"}

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

@@ -0,0 +1,114 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { IconRenderer as t } from "../../services/iconRenderer.js";
+import { FieldTemplate as n } from "../../services/fieldTemplate.js";
+import { maskCurrencyValues as r, normalizeValue as i } from "../../services/maskCurrencyValues.js";
+/* empty css      */
+import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Loader2 as d } from "lucide-react";
+//#region src/components/currencyInput/index.tsx
+function f(f) {
+	let { name: p, disabled: m, title: h, style: g, variant: _ = "solid", label: v, className: y = "", value: b, defaultValue: x, max: S = 1e9, locale: C, onChange: w, prefix: T, suffix: E, isLoading: D = !1, leftIcon: O, readOnly: k, onFocus: A, onBlur: j, errorMessage: M, unShowFieldTemplate: N, orientation: P, showAsterisk: F, rightIcon: I, size: L = "md", id: R, ...z } = f, { fieldErrors: B } = e(), [V, H] = c(!1), [U, W] = c("0"), G = s(null), K = o(), q = R || K, J = M || B?.[p], Y = !!J, X = m || D, Z = {
+		md: 20,
+		lg: 20
+	}[L], Q = I ? "right" : "left", $ = Q === "left" && D, ee = Q === "right" && D;
+	function te() {
+		X || !G?.current || (H(!0), G.current.focus());
+	}
+	function ne(e) {
+		H(!0), A && A(e);
+	}
+	function re(e) {
+		H(!1), j && j(e);
+	}
+	let ie = (e) => {
+		let [t, n] = r(e, C);
+		return !S || t <= S ? (W(n), [t, n]) : r(e, C);
+	};
+	return a(() => {
+		function e() {
+			if (typeof b == "number") return b;
+			if (typeof x == "number") return x;
+		}
+		let [, t] = r(e(), C);
+		W(t);
+	}, [
+		C,
+		x,
+		b
+	]), /* @__PURE__ */ l(n, {
+		name: p,
+		label: v,
+		showAsterisk: F,
+		className: y,
+		errorMessage: J,
+		unShowFieldTemplate: N,
+		orientation: P,
+		children: /* @__PURE__ */ u("section", {
+			title: h,
+			style: g,
+			className: `arkynCurrencyInput ${T ? "hasPrefix" : ""} ${E ? "hasSuffix" : ""} ${_} ${L} ${X || k || D ? "opacity" : ""} ${Y ? "errored" : ""} ${V ? "focused" : ""}`,
+			onClick: te,
+			children: [
+				/* @__PURE__ */ l(t, {
+					iconSize: Z,
+					icon: T,
+					className: "prefix"
+				}),
+				/* @__PURE__ */ l(t, {
+					show: $,
+					iconSize: Z,
+					className: "spinner",
+					icon: d
+				}),
+				/* @__PURE__ */ l(t, {
+					show: !D,
+					icon: O,
+					iconSize: Z
+				}),
+				/* @__PURE__ */ l("input", {
+					disabled: X,
+					readOnly: k,
+					ref: G,
+					onFocus: ne,
+					onBlur: re,
+					onChange: (e) => {
+						e.preventDefault();
+						let [t, n] = ie(e.target.value);
+						w?.(e, String(t), String(n));
+					},
+					id: q,
+					placeholder: X ? U : void 0,
+					value: X ? void 0 : U,
+					...z
+				}),
+				/* @__PURE__ */ l("input", {
+					type: "hidden",
+					name: p,
+					value: i(U),
+					readOnly: !0
+				}),
+				/* @__PURE__ */ l(t, {
+					show: !D,
+					icon: I,
+					iconSize: Z
+				}),
+				/* @__PURE__ */ l(t, {
+					show: ee,
+					iconSize: Z,
+					className: "spinner",
+					icon: d
+				}),
+				/* @__PURE__ */ l(t, {
+					iconSize: Z,
+					icon: E,
+					className: "suffix"
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { f as CurrencyInput };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/currencyInput/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport {\n\ttype ChangeEvent,\n\ttype FocusEvent,\n\ttype InputHTMLAttributes,\n\tuseEffect,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\nimport {\n\tmaskCurrencyValues,\n\tnormalizeValue,\n} from \"../../services/maskCurrencyValues\";\n\nimport \"./style.css\";\n\ntype Locale =\n\t| \"USD\"\n\t| \"EUR\"\n\t| \"JPY\"\n\t| \"GBP\"\n\t| \"AUD\"\n\t| \"CAD\"\n\t| \"CHF\"\n\t| \"CNY\"\n\t| \"SEK\"\n\t| \"NZD\"\n\t| \"BRL\"\n\t| \"INR\"\n\t| \"RUB\"\n\t| \"ZAR\"\n\t| \"MXN\"\n\t| \"SGD\"\n\t| \"HKD\"\n\t| \"NOK\"\n\t| \"KRW\"\n\t| \"TRY\"\n\t| \"IDR\"\n\t| \"THB\";\n\ntype CurrencyInputProps = Omit<\n\tInputHTMLAttributes<HTMLInputElement>,\n\t| \"size\"\n\t| \"prefix\"\n\t| \"name\"\n\t| \"type\"\n\t| \"max\"\n\t| \"defaultValue\"\n\t| \"value\"\n\t| \"onChange\"\n\t| \"placeholder\"\n> & {\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/**\n\t * Currency locale used to format the displayed value.\n\t * Supported: `\"USD\"` | `\"EUR\"` | `\"BRL\"` | `\"JPY\"` | `\"GBP\"` | … (22 locales).\n\t * Required.\n\t */\n\tlocale: Locale;\n\t/** Optional label text displayed above the input. */\n\tlabel?: string;\n\t/** Validation error message displayed below the input. */\n\terrorMessage?: string;\n\t/** Shows a spinner and disables the input during async operations. @default false */\n\tisLoading?: boolean;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: 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 * - `underline`: bottom border only.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"underline\";\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontal\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n\t/** Text or icon rendered at the far left, outside the input area. */\n\tprefix?: string | LucideIcon;\n\t/** Text or icon rendered at the far right, outside the input area. */\n\tsuffix?: string | LucideIcon;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Lucide icon rendered inside the input on the left. */\n\tleftIcon?: LucideIcon;\n\t/** Lucide icon rendered inside the input on the right. */\n\trightIcon?: LucideIcon;\n\t/** Maximum numeric value allowed. @default 1_000_000_000 */\n\tmax?: number;\n\t/** Controlled numeric value. */\n\tvalue?: number;\n\t/** Uncontrolled default numeric value. */\n\tdefaultValue?: number;\n\t/**\n\t * Callback fired on value change.\n\t * @param event - Native change event.\n\t * @param originalValue - Raw numeric string (e.g. `\"1234.56\"`).\n\t * @param maskedValue - Formatted display string (e.g. `\"$ 1,234.56\"`).\n\t */\n\tonChange?: (\n\t\tevent: ChangeEvent<HTMLInputElement>,\n\t\toriginalValue: string,\n\t\tmaskedValue: string,\n\t) => void;\n};\n\n/**\n * CurrencyInput — numeric input that automatically formats the displayed value according to a currency locale.\n *\n * The raw numeric value is stored in a hidden `<input>` 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.locale - Currency locale (e.g. `\"USD\"`, `\"BRL\"`, `\"EUR\"`). Required.\n * @param props.label - Label text displayed above the input.\n * @param props.errorMessage - Validation error message.\n * @param props.isLoading - Shows a spinner and disables the input. Default: false\n * @param props.size - Input size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.max - Maximum numeric value allowed. Default: 1_000_000_000\n * @param props.value - Controlled numeric value.\n * @param props.defaultValue - Uncontrolled default numeric value.\n * @param props.onChange - Callback fired on change — receives the event, the raw numeric string, and the formatted string.\n * @param props.prefix - Text or icon at the far left.\n * @param props.suffix - Text or icon at the far right.\n * @param props.leftIcon - Lucide icon inside the input on the left.\n * @param props.rightIcon - Lucide icon inside the input on the right.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.orientation - Layout direction. Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * **...Other valid HTML properties for `<input>` (except `type`, `max`, `value`, `defaultValue`, `onChange`, `placeholder`)**\n *\n * @returns CurrencyInput JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <CurrencyInput name=\"price\" locale=\"USD\" />\n *\n * // With label and validation\n * <CurrencyInput\n *   name=\"salary\"\n *   locale=\"BRL\"\n *   label=\"Monthly Salary\"\n *   showAsterisk\n *   errorMessage=\"Please enter a valid amount\"\n * />\n *\n * // With max value and controlled state\n * <CurrencyInput\n *   name=\"limit\"\n *   locale=\"USD\"\n *   label=\"Credit Limit\"\n *   max={10000}\n *   value={creditLimit}\n *   onChange={(e, original) => setCreditLimit(Number(original))}\n * />\n * ```\n */\n\nfunction CurrencyInput(props: CurrencyInputProps) {\n\tconst {\n\t\tname,\n\t\tdisabled,\n\t\ttitle,\n\t\tstyle,\n\t\tvariant = \"solid\",\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tvalue,\n\t\tdefaultValue,\n\t\tmax = 1000000000,\n\t\tlocale,\n\t\tonChange,\n\t\tprefix,\n\t\tsuffix,\n\t\tisLoading = false,\n\t\tleftIcon,\n\t\treadOnly,\n\t\tonFocus,\n\t\tonBlur,\n\t\terrorMessage: baseErrorMessage,\n\t\tunShowFieldTemplate,\n\t\torientation,\n\t\tshowAsterisk,\n\t\trightIcon,\n\t\tsize = \"md\",\n\t\tid,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [maskedValue, setMaskedValue] = useState(\"0\");\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled || isLoading;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingPosition = rightIcon ? \"right\" : \"left\";\n\n\tconst showLeftSpinner = loadingPosition === \"left\" && isLoading;\n\tconst showRightSpinner = loadingPosition === \"right\" && isLoading;\n\n\tfunction handleSectionClick() {\n\t\tif (isDisabled || !inputRef?.current) return;\n\t\tsetIsFocused(true);\n\t\tinputRef.current.focus();\n\t}\n\n\tfunction handleFocus(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(true);\n\t\tif (onFocus) onFocus(e);\n\t}\n\n\tfunction handleBlur(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(false);\n\t\tif (onBlur) onBlur(e);\n\t}\n\n\tconst updateValues = (originalValue: string | number) => {\n\t\tconst [calculatedValue, calculatedMaskedValue] = maskCurrencyValues(\n\t\t\toriginalValue,\n\t\t\tlocale,\n\t\t);\n\n\t\tif (!max || calculatedValue <= max) {\n\t\t\tsetMaskedValue(calculatedMaskedValue);\n\t\t\treturn [calculatedValue, calculatedMaskedValue];\n\t\t}\n\n\t\treturn maskCurrencyValues(originalValue, locale);\n\t};\n\n\tconst handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n\t\tevent.preventDefault();\n\t\tconst [originalValue, maskedValue] = updateValues(event.target.value);\n\n\t\tonChange?.(event, String(originalValue), String(maskedValue));\n\t};\n\n\tuseEffect(() => {\n\t\tfunction currentValue() {\n\t\t\tif (typeof value === \"number\") return value;\n\t\t\tif (typeof defaultValue === \"number\") return defaultValue;\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst [, maskedValue] = maskCurrencyValues(currentValue(), locale);\n\n\t\tsetMaskedValue(maskedValue);\n\t}, [locale, defaultValue, value]);\n\n\tconst hasPrefix = prefix ? \"hasPrefix\" : \"\";\n\tconst hasSuffix = suffix ? \"hasSuffix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = isDisabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynCurrencyInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;\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<section\n\t\t\t\ttitle={title}\n\t\t\t\tstyle={style}\n\t\t\t\tclassName={className}\n\t\t\t\tonClick={handleSectionClick}\n\t\t\t>\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showLeftSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />\n\n\t\t\t\t<input\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tplaceholder={isDisabled ? maskedValue : undefined}\n\t\t\t\t\tvalue={isDisabled ? undefined : maskedValue}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={normalizeValue(maskedValue)}\n\t\t\t\t\treadOnly\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showRightSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={suffix} className=\"suffix\" />\n\t\t\t</section>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { CurrencyInput };\n"],"mappings":";;;;;;;;;AA+KA,SAAS,EAAc,GAA2B;CACjD,IAAM,EACL,SACA,aACA,UACA,UACA,aAAU,SACV,UACA,WAAW,IAAmB,IAC9B,UACA,iBACA,SAAM,KACN,WACA,aACA,WACA,WACA,eAAY,IACZ,aACA,aACA,YACA,WACA,cAAc,GACd,wBACA,gBACA,iBACA,cACA,UAAO,MACP,OACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAa,KAAkB,EAAS,GAAG,GAE5C,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAGzB,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,IAAkB,IAAY,UAAU,QAExC,IAAkB,MAAoB,UAAU,GAChD,KAAmB,MAAoB,WAAW;CAExD,SAAS,KAAqB;EACzB,KAAc,CAAC,GAAU,YAC7B,EAAa,EAAI,GACjB,EAAS,QAAQ,MAAM;CACxB;CAEA,SAAS,GAAY,GAAiC;EAErD,AADA,EAAa,EAAI,GACb,KAAS,EAAQ,CAAC;CACvB;CAEA,SAAS,GAAW,GAAiC;EAEpD,AADA,EAAa,EAAK,GACd,KAAQ,EAAO,CAAC;CACrB;CAEA,IAAM,MAAgB,MAAmC;EACxD,IAAM,CAAC,GAAiB,KAAyB,EAChD,GACA,CACD;EAOA,OALI,CAAC,KAAO,KAAmB,KAC9B,EAAe,CAAqB,GAC7B,CAAC,GAAiB,CAAqB,KAGxC,EAAmB,GAAe,CAAM;CAChD;CA6BA,OApBA,QAAgB;EACf,SAAS,IAAe;GACvB,IAAI,OAAO,KAAU,UAAU,OAAO;GACtC,IAAI,OAAO,KAAiB,UAAU,OAAO;EAE9C;EAEA,IAAM,GAAG,KAAe,EAAmB,EAAa,GAAG,CAAM;EAEjE,EAAe,CAAW;CAC3B,GAAG;EAAC;EAAQ;EAAc;CAAK,CAAC,GAW/B,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,WAAD;GACQ;GACA;GACI,WAAA,sBArBI,IAAS,cAAc,GAMS,GALhC,IAAS,cAAc,GAKsB,GAAG,EAAQ,GAAG,EAAK,GAHlE,KAAc,KAAY,IAAY,YAAY,GAG2B,GAJ7E,IAAU,YAAY,GAIkE,GAFxF,IAAY,YAAY;GAkBrC,SAAS;aAJV;IAMC,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEpE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAoB;IAAW,CAAA;IAErE,kBAAC,SAAD;KACC,UAAU;KACA;KACV,KAAK;KACL,SAAS;KACT,QAAQ;KACR,WA5DkB,MAAyC;MAC9D,EAAM,eAAe;MACrB,IAAM,CAAC,GAAe,KAAe,GAAa,EAAM,OAAO,KAAK;MAEpE,IAAW,GAAO,OAAO,CAAa,GAAG,OAAO,CAAW,CAAC;KAC7D;KAwDI,IAAI;KACJ,aAAa,IAAa,IAAc,KAAA;KACxC,OAAO,IAAa,KAAA,IAAY;KAChC,GAAI;IACJ,CAAA;IAED,kBAAC,SAAD;KACC,MAAK;KACC;KACN,OAAO,EAAe,CAAW;KACjC,UAAA;IACA,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAqB;IAAW,CAAA;IAEtE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;GAC5D;;CACK,CAAA;AAEjB"}

package/dist/modules/components/currencyInput/style.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynCurrencyInput{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}.arkynCurrencyInput:hover{cursor:text}.arkynCurrencyInput input{width:100%;color:var(--text-heading,#09090b);background:0 0;border:none;outline:none;line-height:100%}.arkynCurrencyInput .prefix,.arkynCurrencyInput .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}.arkynCurrencyInput .prefix{border-right:1px solid var(--border,#e2e8f0);border-radius:7px 0 0 7px;top:0;bottom:0;left:0}.arkynCurrencyInput .suffix{border-left:1px solid var(--border,#e2e8f0);border-radius:0 7px 7px 0;top:0;bottom:0;right:0}.arkynCurrencyInput input::placeholder{color:var(--text-muted,#a1a1aa);line-height:100%}.arkynCurrencyInput svg{color:var(--text-muted,#a1a1aa)}.arkynCurrencyInput.errored svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput:not(.opacity).focused svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput.opacity{opacity:.5}.arkynCurrencyInput.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynCurrencyInput.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynCurrencyInput.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynCurrencyInput.underline .suffix,.arkynCurrencyInput.underline .prefix{display:none}.arkynCurrencyInput.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynCurrencyInput.underline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput.underline.errored:before{background:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput.md input{min-height:38px;max-height:38px;font-size:14px;font-weight:400;line-height:14px}.arkynCurrencyInput.md input::placeholder{font-size:14px;font-weight:400;line-height:14px}.arkynCurrencyInput.md.hasPrefix{padding-left:60px}.arkynCurrencyInput.md.hasSuffix{padding-right:60px}.arkynCurrencyInput.md .prefix,.arkynCurrencyInput.md .suffix{width:44px;height:38px;font-size:14px}.arkynCurrencyInput.lg input{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.arkynCurrencyInput.lg input::placeholder{font-size:16px;font-weight:400;line-height:16px}.arkynCurrencyInput.lg .prefix,.arkynCurrencyInput.lg .suffix{width:48px;height:44px;font-size:16px}.arkynCurrencyInput.lg.hasPrefix{padding-left:64px}.arkynCurrencyInput.lg.hasSuffix{padding-right:64px}.arkynCurrencyInput .spinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}

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

@@ -0,0 +1,7 @@
+@layer arkyn{.arkynCurrencyInput{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}.arkynCurrencyInput:hover{cursor:text}.arkynCurrencyInput input{width:100%;color:var(--text-heading,#09090b);background:0 0;border:none;outline:none;line-height:100%}.arkynCurrencyInput .prefix,.arkynCurrencyInput .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}.arkynCurrencyInput .prefix{border-right:1px solid var(--border,#e2e8f0);border-radius:7px 0 0 7px;top:0;bottom:0;left:0}.arkynCurrencyInput .suffix{border-left:1px solid var(--border,#e2e8f0);border-radius:0 7px 7px 0;top:0;bottom:0;right:0}.arkynCurrencyInput input::placeholder{color:var(--text-muted,#a1a1aa);line-height:100%}.arkynCurrencyInput svg{color:var(--text-muted,#a1a1aa)}.arkynCurrencyInput.errored svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput:not(.opacity).focused svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput.opacity{opacity:.5}.arkynCurrencyInput.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynCurrencyInput.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynCurrencyInput.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynCurrencyInput.underline .suffix,.arkynCurrencyInput.underline .prefix{display:none}.arkynCurrencyInput.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynCurrencyInput.underline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput.underline.errored:before{background:rgb(var(--spotlight-danger,244, 63, 94))}.arkynCurrencyInput:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCurrencyInput.md input{min-height:38px;max-height:38px;font-size:14px;font-weight:400;line-height:14px}.arkynCurrencyInput.md input::placeholder{font-size:14px;font-weight:400;line-height:14px}.arkynCurrencyInput.md.hasPrefix{padding-left:60px}.arkynCurrencyInput.md.hasSuffix{padding-right:60px}.arkynCurrencyInput.md .prefix,.arkynCurrencyInput.md .suffix{width:44px;height:38px;font-size:14px}.arkynCurrencyInput.lg input{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.arkynCurrencyInput.lg input::placeholder{font-size:16px;font-weight:400;line-height:16px}.arkynCurrencyInput.lg .prefix,.arkynCurrencyInput.lg .suffix{width:48px;height:44px;font-size:16px}.arkynCurrencyInput.lg.hasPrefix{padding-left:64px}.arkynCurrencyInput.lg.hasSuffix{padding-right:64px}.arkynCurrencyInput .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}}

package/dist/modules/components/datePicker/datePickerCalendarContainer/index.js

@@ -0,0 +1,25 @@
+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 } from "react/jsx-runtime";
+//#region src/components/datePicker/datePickerCalendarContainer/index.tsx
+function a(a) {
+	let { children: o, isFocused: s } = a, c = n(null), [l, u] = r("bottom");
+	return e(s), t(() => {
+		s && (() => {
+			if (!c.current) return;
+			let e = c.current.parentElement;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			window.innerHeight - t.bottom < 420 && t.top > 420 ? u("top") : u("bottom");
+		})();
+	}, [s]), s ? /* @__PURE__ */ i("div", {
+		ref: c,
+		className: `arkynDatePickerCalendarContainer ${l}`,
+		children: o
+	}) : null;
+}
+//#endregion
+export { a as DatePickerCalendarContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerCalendarContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerCalendarContainer/index.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\n\nimport \"./styles.css\";\n\ntype DatePickerCalendarContainerProps = {\n\tisFocused: boolean;\n\tchildren: ReactNode;\n};\n\nfunction DatePickerCalendarContainer(props: DatePickerCalendarContainerProps) {\n\tconst { children, isFocused } = 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 = 420;\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\tif (!isFocused) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={`arkynDatePickerCalendarContainer ${position}`}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { DatePickerCalendarContainer };\n"],"mappings":";;;;;AAWA,SAAS,EAA4B,GAAyC;CAC7E,IAAM,EAAE,aAAU,iBAAc,GAE1B,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAU,KAAe,EAA2B,QAAQ;CAkCnE,OAhCA,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,GAET,IAGJ,kBAAC,OAAD;EACC,KAAK;EACL,WAAW,oCAAoC;EAE9C;CACG,CAAA,IARiB;AAUxB"}

package/dist/modules/components/datePicker/datePickerCalendarContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynDatePickerCalendarContainer{z-index:7;border-radius:8px;width:max-content;max-width:calc(100vw - 32px);position:absolute;left:0;box-shadow:0 4px 8px #0000001a}.arkynDatePickerCalendarContainer.bottom{top:calc(100% + 5px)}.arkynDatePickerCalendarContainer.top{bottom:calc(100% + 5px)}.arkynDatePickerCalendarContainer .arkynCalendarContainer{max-width:100%}}

package/dist/modules/components/datePicker/datePickerChevron/index.js

@@ -0,0 +1,21 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { ChevronDown as t } from "lucide-react";
+//#region src/components/datePicker/datePickerChevron/index.tsx
+function n(n) {
+	let { iconSize: r, isLoading: i, disabled: a, readOnly: o, isFocused: s } = n;
+	return i ? null : /* @__PURE__ */ e(t, {
+		className: `arkynDatePickerChevron ${a || o ? "notAnimate" : ""} ${s ? "focused" : ""}`,
+		strokeWidth: 2.5,
+		style: {
+			minWidth: r,
+			minHeight: r,
+			maxWidth: r,
+			maxHeight: r
+		}
+	});
+}
+//#endregion
+export { n as DatePickerChevron };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerChevron/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerChevron/index.tsx"],"sourcesContent":["import { ChevronDown } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype DatePickerChevronProps = {\n\tisLoading: boolean;\n\ticonSize: number;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisFocused: boolean;\n};\n\nfunction DatePickerChevron(props: DatePickerChevronProps) {\n\tconst { iconSize, isLoading, disabled, readOnly, isFocused } = props;\n\n\tconst notAnimate = disabled || readOnly ? \"notAnimate\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynDatePickerChevron ${notAnimate} ${focused}`;\n\n\tif (isLoading) return null;\n\treturn (\n\t\t<ChevronDown\n\t\t\tclassName={className}\n\t\t\tstrokeWidth={2.5}\n\t\t\tstyle={{\n\t\t\t\tminWidth: iconSize,\n\t\t\t\tminHeight: iconSize,\n\t\t\t\tmaxWidth: iconSize,\n\t\t\t\tmaxHeight: iconSize,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport { DatePickerChevron };\n"],"mappings":";;;;AAWA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,aAAU,cAAW,aAAU,aAAU,iBAAc;CAQ/D,OADI,IAAkB,OAErB,kBAAC,GAAD;EACY,qCARM,KAAY,IAAW,eAAe,GAGF,GAFvC,IAAY,YAAY;EAQtC,aAAa;EACb,OAAO;GACN,UAAU;GACV,WAAW;GACX,UAAU;GACV,WAAW;EACZ;CACA,CAAA;AAEH"}

package/dist/modules/components/datePicker/datePickerChevron/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynDatePickerChevron{color:var(--text-muted,#a1a1aa);transition:all .15s ease-in-out}.arkynDatePickerChevron:not(.notAnimate).focused{transform:rotate(180deg)}}

package/dist/modules/components/datePicker/datePickerContainer/index.js

@@ -0,0 +1,16 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/datePicker/datePickerContainer/index.tsx
+function t(t) {
+	let { children: n, handleContainerFocus: r, disabled: i, isError: a, isLoading: o, isFocused: s, className: c, readOnly: l, variant: u, size: d, id: f, prefixExists: p } = t;
+	return /* @__PURE__ */ e("section", {
+		id: f,
+		className: `arkynDatePickerContainer ${p ? "hasPrefix" : ""} ${u} ${d} ${i || l || o ? "opacity" : ""} ${a ? "errored" : ""} ${s ? "focused" : ""} ${c}`,
+		onClick: r,
+		children: n
+	});
+}
+//#endregion
+export { t as DatePickerContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerContainer/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype DatePickerContainerProps = {\n\tchildren: ReactNode;\n\thandleContainerFocus: () => void;\n\tprefixExists: boolean;\n\tisError: boolean;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisLoading: boolean;\n\tisFocused: boolean;\n\tclassName?: string;\n\tid: string;\n\tvariant: \"solid\" | \"outline\" | \"underline\";\n\tsize: \"md\" | \"lg\";\n};\n\nfunction DatePickerContainer(props: DatePickerContainerProps) {\n\tconst {\n\t\tchildren,\n\t\thandleContainerFocus,\n\t\tdisabled,\n\t\tisError,\n\t\tisLoading,\n\t\tisFocused,\n\t\tclassName,\n\t\treadOnly,\n\t\tvariant,\n\t\tsize,\n\t\tid,\n\t\tprefixExists,\n\t} = props;\n\n\tconst hasPrefix = prefixExists ? \"hasPrefix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = disabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\treturn (\n\t\t<section\n\t\t\tid={id}\n\t\t\tclassName={`arkynDatePickerContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`}\n\t\t\tonClick={handleContainerFocus}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n\nexport { DatePickerContainer };\n"],"mappings":";;;AAkBA,SAAS,EAAoB,GAAiC;CAC7D,IAAM,EACL,aACA,yBACA,aACA,YACA,cACA,cACA,cACA,aACA,YACA,SACA,OACA,oBACG;CAOJ,OACC,kBAAC,WAAD;EACK;EACJ,WAAW,4BARK,IAAe,cAAc,GAQI,GAAG,EAAQ,GAAG,EAAK,GANtD,KAAY,KAAY,IAAY,YAAY,GAMiB,GAPjE,IAAU,YAAY,GAOsD,GAL5E,IAAY,YAAY,GAK+D,GAAG;EACxG,SAAS;EAER;CACO,CAAA;AAEX"}

package/dist/modules/components/datePicker/datePickerContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynDatePickerContainer{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}.arkynDatePickerContainer:hover{cursor:pointer}.arkynDatePickerContainer.opacity{opacity:.5}.arkynDatePickerContainer .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}.arkynDatePickerContainer>svg{color:var(--text-muted,#a1a1aa)}.arkynDatePickerContainer.errored>svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynDatePickerContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynDatePickerContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynDatePickerContainer.underline .prefix{display:none}.arkynDatePickerContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynDatePickerContainer.underline.errored{border-color:rgba(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer.underline.errored:before{background:rgba(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.md{min-height:40px}.arkynDatePickerContainer.md.hasPrefix{padding-left:60px}.arkynDatePickerContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynDatePickerContainer.lg{min-height:44px}.arkynDatePickerContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynDatePickerContainer.lg.hasPrefix{padding-left:64px}}

package/dist/modules/components/datePicker/datePickerContent/index.js

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

package/dist/modules/components/datePicker/datePickerContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerContent/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype DatePickerContentProps = {\n\tchildren: ReactNode;\n\tsize: \"md\" | \"lg\";\n};\n\nfunction DatePickerContent(props: DatePickerContentProps) {\n\tconst { children, size } = props;\n\tconst className = `arkynDatePickerContent ${size}`;\n\treturn <div className={className}>{children}</div>;\n}\n\nexport { DatePickerContent };\n"],"mappings":";;;AAQA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,aAAU,YAAS;CAE3B,OAAO,kBAAC,OAAD;EAAgB,WAAA,0BADqB;EACT;CAAc,CAAA;AAClD"}

package/dist/modules/components/datePicker/datePickerContent/styles.css

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

package/dist/modules/components/datePicker/datePickerOverlay/index.js

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

package/dist/modules/components/datePicker/datePickerOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerOverlay/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype DatePickerOverlayProps = {\n\tisFocused: boolean;\n\thandleBlur: () => void;\n};\n\nfunction DatePickerOverlay(props: DatePickerOverlayProps) {\n\tconst { isFocused, handleBlur } = props;\n\tif (!isFocused) return null;\n\treturn <aside className=\"arkynDatePickerOverlay\" onClick={handleBlur} />;\n}\n\nexport { DatePickerOverlay };\n"],"mappings":";;;AAOA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,cAAW,kBAAe;CAElC,OADK,IACE,kBAAC,SAAD;EAAO,WAAU;EAAyB,SAAS;CAAa,CAAA,IADhD;AAExB"}

package/dist/modules/components/datePicker/datePickerOverlay/styles.css

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

package/dist/modules/components/datePicker/datePickerSpinner/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/datePicker/datePickerSpinner/index.tsx
+function n(n) {
+	let { iconSize: r, isLoading: i } = n;
+	return i ? /* @__PURE__ */ e(t, {
+		className: "arkynDatePickerSpinner",
+		size: r,
+		strokeWidth: 2.5
+	}) : null;
+}
+//#endregion
+export { n as DatePickerSpinner };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerSpinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerSpinner/index.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype DatePickerSpinnerProps = {\n\ticonSize: number;\n\tisLoading: boolean;\n};\n\nfunction DatePickerSpinner(props: DatePickerSpinnerProps) {\n\tconst { iconSize, isLoading } = props;\n\n\tif (!isLoading) return null;\n\treturn (\n\t\t<Loader2\n\t\t\tclassName=\"arkynDatePickerSpinner\"\n\t\t\tsize={iconSize}\n\t\t\tstrokeWidth={2.5}\n\t\t/>\n\t);\n}\n\nexport { DatePickerSpinner };\n"],"mappings":";;;;AAQA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,aAAU,iBAAc;CAGhC,OADK,IAEJ,kBAAC,GAAD;EACC,WAAU;EACV,MAAM;EACN,aAAa;CACb,CAAA,IANqB;AAQxB"}

package/dist/modules/components/datePicker/datePickerSpinner/styles.css

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