@arkyn/components 3.0.1-beta.154 → 3.0.1-beta.155

package/dist/components/calendar/_viewService.js

@@ -1,179 +0,0 @@
-import { formatToCapitalizeFirstWordLetter } from "@arkyn/shared";
-class ViewService {
-    currentDay(viewDate) {
-        return String(viewDate.getDate()).padStart(2, "0");
-    }
-    currentMonth(viewDate) {
-        return String(viewDate.getMonth() + 1).padStart(2, "0");
-    }
-    currentYear(viewDate) {
-        return String(viewDate.getFullYear());
-    }
-    capitalize(text) {
-        return formatToCapitalizeFirstWordLetter(text);
-    }
-    parseDayType(day, month, year, valueDate) {
-        const firstDateDay = valueDate[0].getDate();
-        const firstDateMonth = valueDate[0].getMonth();
-        const firstDateYear = valueDate[0].getFullYear();
-        const secondDateDay = valueDate[1].getDate();
-        const secondDateMonth = valueDate[1].getMonth();
-        const secondDateYear = valueDate[1].getFullYear();
-        const firstDate = new Date(firstDateYear, firstDateMonth, firstDateDay);
-        const secondDate = new Date(secondDateYear, secondDateMonth, secondDateDay);
-        const currentDate = new Date(year, month, day);
-        if (firstDate.getTime() === currentDate.getTime())
-            return "checkedDay";
-        if (secondDate.getTime() === currentDate.getTime())
-            return "checkedDay";
-        if (currentDate > firstDate && currentDate < secondDate)
-            return "middleDay";
-        return "uncheckedDay";
-    }
-    listWeek(language) {
-        const weekDays = [];
-        const firstSundayUtc = new Date(Date.UTC(2023, 0, 1));
-        for (let i = 0; i < 7; i++) {
-            const day = new Date(firstSundayUtc);
-            day.setUTCDate(firstSundayUtc.getUTCDate() + i);
-            const dayName = day.toLocaleDateString(language, {
-                weekday: "short",
-                timeZone: "UTC",
-            });
-            weekDays.push(dayName);
-        }
-        return weekDays;
-    }
-    listMonths(viewDate, language) {
-        const monthsByNavigatorLanguage = new Intl.DateTimeFormat(language, {
-            month: "long",
-        });
-        return Array.from({ length: 12 }, (_, i) => {
-            const date = new Date(viewDate.getFullYear(), i, 1);
-            const label = monthsByNavigatorLanguage.format(date);
-            return {
-                label: this.capitalize(label),
-                value: String(i).padStart(2, "0"),
-            };
-        });
-    }
-    listYears(lastYears) {
-        const currentYear = new Date().getFullYear();
-        return Array.from({ length: lastYears + 1 }, (_, i) => {
-            const year = currentYear - lastYears + i;
-            return { label: String(year), value: String(year) };
-        }).reverse();
-    }
-    listMatrix(viewDate, valueDate) {
-        const year = viewDate.getFullYear();
-        const monthIndex = viewDate.getMonth();
-        const firstDayOfMonth = new Date(year, monthIndex, 1);
-        const firstWeekday = firstDayOfMonth.getDay();
-        const daysInCurrentMonth = new Date(year, monthIndex + 1, 0).getDate();
-        const daysInPreviousMonth = new Date(year, monthIndex, 0).getDate();
-        const totalCells = Math.ceil((firstWeekday + daysInCurrentMonth) / 7) * 7;
-        const weeks = [];
-        let currentMonthDay = 1;
-        let nextMonthDay = 1;
-        for (let i = 0; i < totalCells; i++) {
-            const weekIndex = Math.floor(i / 7);
-            if (!weeks[weekIndex])
-                weeks[weekIndex] = [];
-            if (i < firstWeekday) {
-                const day = daysInPreviousMonth - (firstWeekday - i - 1);
-                const month = monthIndex === 0 ? 11 : monthIndex - 1;
-                const cellYear = monthIndex === 0 ? year - 1 : year;
-                weeks[weekIndex].push({
-                    day,
-                    month,
-                    year: cellYear,
-                    dayOwner: "previous",
-                    dayType: this.parseDayType(day, month, cellYear, valueDate),
-                });
-            }
-            else if (currentMonthDay <= daysInCurrentMonth) {
-                weeks[weekIndex].push({
-                    day: currentMonthDay,
-                    month: monthIndex,
-                    year: year,
-                    dayOwner: "current",
-                    dayType: this.parseDayType(currentMonthDay, monthIndex, year, valueDate),
-                });
-                currentMonthDay++;
-            }
-            else {
-                const month = monthIndex === 11 ? 0 : monthIndex + 1;
-                const cellYear = monthIndex === 11 ? year + 1 : year;
-                weeks[weekIndex].push({
-                    day: nextMonthDay,
-                    month,
-                    year: cellYear,
-                    dayOwner: "next",
-                    dayType: this.parseDayType(nextMonthDay, month, cellYear, valueDate),
-                });
-                nextMonthDay++;
-            }
-        }
-        return weeks;
-    }
-    changeDay(day, month, year, calendarType, valueDate, setValueDate, setViewDate) {
-        const normalizeDate = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
-        const newDate = normalizeDate(new Date(year, month, day));
-        setViewDate(newDate);
-        if (calendarType === "single") {
-            setValueDate([newDate, newDate]);
-            return;
-        }
-        let startDate = normalizeDate(valueDate[0]);
-        let endDate = normalizeDate(valueDate[1]);
-        const newDateTime = newDate.getTime();
-        const startDateTime = startDate.getTime();
-        const endDateTime = endDate.getTime();
-        if (newDateTime === startDateTime) {
-            setValueDate([newDate, newDate]);
-            return;
-        }
-        if (newDateTime === endDateTime) {
-            setValueDate([newDate, newDate]);
-            return;
-        }
-        if (newDate < startDate) {
-            setValueDate([newDate, endDate]);
-            return;
-        }
-        if (newDate > endDate) {
-            setValueDate([startDate, newDate]);
-            return;
-        }
-        const distanceToStart = Math.abs(newDateTime - startDateTime);
-        const distanceToEnd = Math.abs(endDateTime - newDateTime);
-        if (distanceToStart <= distanceToEnd) {
-            setValueDate([newDate, endDate]);
-            return;
-        }
-        setValueDate([startDate, newDate]);
-    }
-    changeMonth(month, viewDate, setViewDate) {
-        const nextViewDate = new Date(viewDate);
-        nextViewDate.setMonth(month);
-        setViewDate(nextViewDate);
-    }
-    changeYear(year, viewDate, setViewDate) {
-        const nextViewDate = new Date(viewDate);
-        nextViewDate.setFullYear(year);
-        setViewDate(nextViewDate);
-    }
-    nextMonth(viewDate, setViewDate) {
-        const nextViewDate = new Date(viewDate);
-        nextViewDate.setDate(1);
-        nextViewDate.setMonth(nextViewDate.getMonth() + 1);
-        setViewDate(nextViewDate);
-    }
-    previousMonth(viewDate, setViewDate) {
-        const nextViewDate = new Date(viewDate);
-        nextViewDate.setDate(1);
-        nextViewDate.setMonth(nextViewDate.getMonth() - 1);
-        setViewDate(nextViewDate);
-    }
-}
-export { ViewService };

package/dist/components/calendar/calendarContainer/index.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function CalendarContainer({ children }) {
-    return _jsx("div", { className: `arkynCalendarContainer`, children: children });
-}
-export { CalendarContainer };

package/dist/components/calendar/calendarHeader/index.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { Select } from "../../select";
-import { useCalendar } from "../_calendarProvider";
-import "./styles.css";
-function CalendarHeader({ basicMode }) {
-    const calendar = useCalendar();
-    if (basicMode) {
-        return (_jsxs("div", { className: `arkynCalendarHeader`, children: [_jsx("button", { className: "arkynCalendarButton", onClick: () => calendar.previousMonth(), children: _jsx(ChevronLeft, {}) }), _jsx("p", { children: calendar.currentDate }), _jsx("button", { className: "arkynCalendarButton", onClick: () => calendar.nextMonth(), children: _jsx(ChevronRight, {}) })] }));
-    }
-    return (_jsxs("div", { className: `arkynCalendarHeader`, children: [_jsxs("div", { children: [_jsx("button", { className: "arkynCalendarButton", onClick: () => calendar.previousMonth(), children: _jsx(ChevronLeft, {}) }), _jsx("button", { className: "arkynCalendarButton", onClick: () => calendar.nextMonth(), children: _jsx(ChevronRight, {}) })] }), _jsxs("div", { children: [_jsx(Select, { name: "calendarMonth", variant: "underline", className: "calendarMonthSelect", value: calendar.currentMonth, options: calendar.listMonths, onChange: (value) => calendar.changeMonth(+value) }), _jsx(Select, { name: "calendarYear", variant: "underline", className: "calendarYearSelect", value: calendar.currentYear, options: calendar.listYears, onChange: (value) => calendar.changeYear(+value) })] })] }));
-}
-export { CalendarHeader };

package/dist/components/calendar/calendarTableBody/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCalendar } from "../_calendarProvider";
-import { CalendarTableTd } from "../calendarTableTd";
-import "./styles.css";
-function CalendarTableBody() {
-    const calendar = useCalendar();
-    return (_jsx("tbody", { className: "arkynCalendarTableBody", children: calendar.listMatrix.map((week, weekIndex) => (_jsx("tr", { children: week.map((props, dayIndex) => (_jsx(CalendarTableTd, { ...props }, dayIndex))) }, weekIndex))) }));
-}
-export { CalendarTableBody };

package/dist/components/calendar/calendarTableContainer/index.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function CalendarTableContainer({ children }) {
-    return _jsx("table", { className: "arkynCalendarTableContainer", children: children });
-}
-export { CalendarTableContainer };

package/dist/components/calendar/calendarTableHeader/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { formatToCapitalizeFirstWordLetter } from "@arkyn/shared";
-import { useCalendar } from "../_calendarProvider";
-import "./styles.css";
-function CalendarTableHeader() {
-    const { listWeek } = useCalendar();
-    return (_jsx("thead", { className: "arkynCalendarTableHeader", children: _jsx("tr", { children: listWeek.map((day, index) => (_jsx("th", { children: formatToCapitalizeFirstWordLetter(day) }, index))) }) }));
-}
-export { CalendarTableHeader };

package/dist/components/calendar/calendarTableTd/index.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCalendar } from "../_calendarProvider";
-import "./styles.css";
-function CalendarTableTd(props) {
-    const { day, month, year, dayOwner, dayType } = props;
-    const { changeDay } = useCalendar();
-    function isToday() {
-        const today = new Date();
-        return (day === today.getDate() &&
-            month === today.getMonth() &&
-            year === today.getFullYear());
-    }
-    return (_jsx("td", { onClick: () => changeDay(day, month, year), className: `arkynCalendarTableTd ${dayOwner} ${dayType} ${isToday() ? "today" : ""}`, children: _jsxs("div", { className: "textGroup", children: [_jsx("span", {}), _jsx("p", { children: day })] }) }));
-}
-export { CalendarTableTd };

package/dist/components/calendar/index.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CalendarProvider } from "./_calendarProvider";
-import { CalendarContainer } from "./calendarContainer";
-import { CalendarHeader } from "./calendarHeader";
-import { CalendarTableBody } from "./calendarTableBody";
-import { CalendarTableContainer } from "./calendarTableContainer";
-import { CalendarTableHeader } from "./calendarTableHeader";
-/**
- * Reusable calendar component with support for two selection modes:
- * single date (`single`) and range (`range`).
- *
- * The component encapsulates calendar state and navigation rules through
- * `CalendarProvider`, exposing a simple API for forms, filters,
- * and scheduling flows.
- *
- * @param props Calendar properties (`single` or `range` mode).
- * @returns Calendar UI structure with header and date grid.
- *
- * @example
- * // Single-date selection
- * <Calendar
- *   type="single"
- *   variant="complete"
- *   defaultValue={new Date()}
- *   onChange={(date) => {
- *     console.log("Selected date:", date);
- *   }}
- *   onChangeView={(viewDate) => {
- *     console.log("Current view:", viewDate);
- *   }}
- * />
- *
- * @example
- * // Range selection
- * <Calendar
- *   type="range"
- *   variant="basic"
- *   defaultValue={[new Date(2026, 5, 1), new Date(2026, 5, 15)]}
- *   onChange={([start, end]) => {
- *     console.log("Range:", start, end);
- *   }}
- *   onChangeView={(viewDate) => {
- *     console.log("Focused month:", viewDate);
- *   }}
- * />
- */
-function Calendar(props) {
-    const variant = props.variant || "complete";
-    if (props.type === "range") {
-        return (_jsx(CalendarProvider, { value: props.value, viewValue: props.viewValue, defaultViewValue: props.defaultViewValue, defaultValue: props.defaultValue, calendarType: "range", onChange: props.onChange, onChangeView: props.onChangeView, children: _jsxs(CalendarContainer, { children: [_jsx(CalendarHeader, { basicMode: variant.includes("basic") }), _jsxs(CalendarTableContainer, { children: [_jsx(CalendarTableHeader, {}), _jsx(CalendarTableBody, {})] })] }) }));
-    }
-    return (_jsx(CalendarProvider, { value: props.value, viewValue: props.viewValue, defaultViewValue: props.defaultViewValue, defaultValue: props.defaultValue, calendarType: "single", onChange: props.onChange, onChangeView: props.onChangeView, children: _jsxs(CalendarContainer, { children: [_jsx(CalendarHeader, { basicMode: variant.includes("basic") }), _jsxs(CalendarTableContainer, { children: [_jsx(CalendarTableHeader, {}), _jsx(CalendarTableBody, {})] })] }) }));
-}
-export { Calendar };

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

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCardTab } from "../cardTabContext";
-import "./styles.css";
-/**
- * CardTabButton — individual tab button inside a `CardTabContainer`.
- *
- * Reads active state and disabled state from `CardTabContainer` context.
- * The button's own `disabled` prop is ORed with the container's `disabled`.
- *
- * @param props.children - Tab label content. Required.
- * @param props.value - Tab identifier. Required.
- * @param props.disabled - Disables this tab individually (container can also disable all tabs).
- *
- * **...Other valid HTML `<button>` properties except `type`**
- *
- * @returns CardTabButton JSX element.
- *
- * @example
- * ```tsx
- * <CardTabContainer defaultValue="details" onChange={setTab}>
- *   <CardTabButton value="details">Details</CardTabButton>
- *   <CardTabButton value="history">History</CardTabButton>
- *   <CardTabButton value="settings" disabled>Settings</CardTabButton>
- * </CardTabContainer>
- * ```
- */
-function CardTabButton(props) {
-    const { children, disabled: rawDisabled = false, className: baseClassName = "", onClick, value, ...rest } = props;
-    const { disabled, currentTab, changeCurrentTab } = useCardTab();
-    const isDisabled = disabled || rawDisabled;
-    const disabledClass = isDisabled ? "isDisabled" : "";
-    const activeClass = currentTab === value && value ? "isActive" : "";
-    const className = `arkynCardTabButton ${disabledClass} ${activeClass} ${baseClassName}`;
-    function handleClick(event) {
-        changeCurrentTab(value);
-        onClick && onClick(event);
-    }
-    return (_jsx("button", { onClick: handleClick, className: className.trim(), ...rest, disabled: isDisabled, type: "button", children: children }));
-}
-export { CardTabButton };

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

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { CardTabProvider } from "../cardTabContext";
-import "./styles.css";
-/**
- * CardTabContainer — wrapper that manages active state for a group of `CardTabButton` components.
- *
- * Renders as a `<nav>` element. Provides context consumed by each `CardTabButton`.
- *
- * @param props.children - `CardTabButton` elements. Required.
- * @param props.defaultValue - Initially selected tab value.
- * @param props.disabled - Disables all buttons. Default: false
- * @param props.onChange - Called with the new value whenever the active tab changes.
- *
- * **...Other valid HTML `<nav>` properties**
- *
- * @returns CardTabContainer JSX element.
- *
- * @example
- * ```tsx
- * <CardTabContainer defaultValue="overview" onChange={setActiveTab}>
- *   <CardTabButton value="overview">Overview</CardTabButton>
- *   <CardTabButton value="analytics">Analytics</CardTabButton>
- *   <CardTabButton value="settings">Settings</CardTabButton>
- * </CardTabContainer>
- *
- * {activeTab === 'overview' && <OverviewPanel />}
- * {activeTab === 'analytics' && <AnalyticsPanel />}
- * ```
- */
-function CardTabContainer(props) {
-    const { children, onChange, defaultValue, disabled = false, className: baseClassName, ...rest } = props;
-    const [currentTab, setCurrentTab] = useState(defaultValue || "");
-    const className = `arkynCardTabContainer ${baseClassName || ""}`;
-    function changeCurrentTab(value) {
-        setCurrentTab(value);
-        if (onChange)
-            onChange(value);
-    }
-    return (_jsx(CardTabProvider, { disabled: disabled, currentTab: currentTab, changeCurrentTab: changeCurrentTab, children: _jsx("nav", { className: className.trim(), ...rest, children: children }) }));
-}
-export { CardTabContainer };

package/dist/components/cardTab/cardTabContext.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const CardTabContext = createContext({});
-function useCardTab() {
-    return useContext(CardTabContext);
-}
-function CardTabProvider(props) {
-    return (_jsx(CardTabContext.Provider, { value: props, children: props.children }));
-}
-export { CardTabProvider, useCardTab };

package/dist/components/checkbox/index.js

@@ -1,71 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
-import { useId, useRef, useState } from "react";
-import { useForm } from "../../hooks/useForm";
-import { FieldTemplate } from "../../services/fieldTemplate";
-import "./styles.css";
-/**
- * Checkbox — interactive checkbox input with label, validation, and form integration.
- *
- * Stores value in a hidden `<input>` for native form submission.
- * Integrates with `useForm` to display validation errors by field name.
- *
- * @param props.name - Field name for form submission. Required.
- * @param props.label - Label text displayed beside the checkbox.
- * @param props.size - Checkbox size (`sm` | `md` | `lg`). Default: "md"
- * @param props.value - Value stored when checked. Default: "checked"
- * @param props.checked - Controlled checked state.
- * @param props.defaultChecked - Uncontrolled initial checked state. Default: false
- * @param props.onCheck - Callback fired on toggle — receives value or `""` when unchecked.
- * @param props.errorMessage - Validation error message.
- * @param props.showAsterisk - Appends `*` to the label.
- * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: "horizontalReverse"
- * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
- *
- * **...Other valid HTML properties for `<button>` (except `type`, `name`, `defaultValue`, `value`, `onChange`, `onSelect`, `onClick`)**
- *
- * @returns Checkbox JSX element wrapped in `FieldTemplate`.
- *
- * @example
- * ```tsx
- * // Basic
- * <Checkbox name="terms" label="I agree to the terms and conditions" />
- *
- * // With custom value and error
- * <Checkbox
- *   name="newsletter"
- *   label="Subscribe to newsletter"
- *   value="subscribed"
- *   errorMessage={errors.newsletter}
- * />
- *
- * // Controlled
- * <Checkbox
- *   name="premium"
- *   label="Enable premium features"
- *   size="lg"
- *   checked={isPremium}
- *   onCheck={(v) => setIsPremium(!!v)}
- * />
- * ```
- */
-function Checkbox(props) {
-    const { id, name, className: wrapperClassName = "", size = "md", errorMessage: baseErrorMessage, defaultChecked = false, label, checked: baseChecked = null, onCheck, orientation = "horizontalReverse", showAsterisk, unShowFieldTemplate, value, ...rest } = props;
-    const { fieldErrors } = useForm();
-    const checkboxRef = useRef(null);
-    const checkboxId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const [isChecked, setIsChecked] = useState(defaultChecked || false);
-    const currentChecked = typeof baseChecked === "boolean" ? baseChecked : isChecked;
-    const errorClass = isError ? "errorTrue" : "errorFalse";
-    const currentCheckedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-    const className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass}`;
-    function handleCheck() {
-        const defaultChecked = isChecked;
-        setIsChecked(!defaultChecked);
-        onCheck && onCheck(!defaultChecked ? value || "checked" : "");
-    }
-    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs("button", { id: checkboxId, type: "button", className: className, onClick: handleCheck, ...rest, children: [_jsx("input", { type: "hidden", name: name, ref: checkboxRef, value: currentChecked ? value || "checked" : "" }), _jsx(Check, {})] }) }));
-}
-export { Checkbox };

package/dist/components/clientOnly.js

@@ -1,31 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useHydrated } from "../hooks/useHydrated";
-/**
- * ClientOnly — renders its children only after client-side hydration.
- *
- * Prevents React hydration mismatches for components that rely on browser-only APIs
- * (e.g. `window`, `navigator`, `document`). Uses `useHydrated` internally.
- *
- * @param props.children - Render function executed after hydration. Required.
- * @param props.fallback - Content shown during SSR / before hydration. Default: null
- *
- * @returns `children()` after hydration, otherwise `fallback`.
- *
- * @example
- * ```tsx
- * // With a skeleton fallback
- * <ClientOnly fallback={<Skeleton />}>
- *   {() => <InteractiveWidget />}
- * </ClientOnly>
- *
- * // Using browser APIs safely
- * <ClientOnly fallback={<p>Loading...</p>}>
- *   {() => <p>Current time: {new Date().toLocaleString()}</p>}
- * </ClientOnly>
- * ```
- */
-function ClientOnly(props) {
-    const { children, fallback = null } = props;
-    return useHydrated() ? _jsx(_Fragment, { children: children() }) : _jsx(_Fragment, { children: fallback });
-}
-export { ClientOnly };

package/dist/components/currencyInput/index.js

@@ -1,126 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import { useEffect, useId, useRef, useState, } from "react";
-import { useForm } from "../../hooks/useForm";
-import { FieldTemplate } from "../../services/fieldTemplate";
-import { IconRenderer } from "../../services/iconRenderer";
-import { maskCurrencyValues, normalizeValue, } from "../../services/maskCurrencyValues";
-import "./style.css";
-/**
- * CurrencyInput — numeric input that automatically formats the displayed value according to a currency locale.
- *
- * The raw numeric value is stored in a hidden `<input>` for form submission.
- * Integrates with `useForm` to display validation errors by field name.
- *
- * @param props.name - Field name for form submission. Required.
- * @param props.locale - Currency locale (e.g. `"USD"`, `"BRL"`, `"EUR"`). Required.
- * @param props.label - Label text displayed above the input.
- * @param props.errorMessage - Validation error message.
- * @param props.isLoading - Shows a spinner and disables the input. Default: false
- * @param props.size - Input size (`md` | `lg`). Default: "md"
- * @param props.variant - Visual style variant. Default: "solid"
- * @param props.max - Maximum numeric value allowed. Default: 1_000_000_000
- * @param props.value - Controlled numeric value.
- * @param props.defaultValue - Uncontrolled default numeric value.
- * @param props.onChange - Callback fired on change — receives the event, the raw numeric string, and the formatted string.
- * @param props.prefix - Text or icon at the far left.
- * @param props.suffix - Text or icon at the far right.
- * @param props.leftIcon - Lucide icon inside the input on the left.
- * @param props.rightIcon - Lucide icon inside the input on the right.
- * @param props.showAsterisk - Appends `*` to the label.
- * @param props.orientation - Layout direction. Default: "horizontal"
- * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
- *
- * **...Other valid HTML properties for `<input>` (except `type`, `max`, `value`, `defaultValue`, `onChange`, `placeholder`)**
- *
- * @returns CurrencyInput JSX element wrapped in `FieldTemplate`.
- *
- * @example
- * ```tsx
- * // Basic
- * <CurrencyInput name="price" locale="USD" />
- *
- * // With label and validation
- * <CurrencyInput
- *   name="salary"
- *   locale="BRL"
- *   label="Monthly Salary"
- *   showAsterisk
- *   errorMessage="Please enter a valid amount"
- * />
- *
- * // With max value and controlled state
- * <CurrencyInput
- *   name="limit"
- *   locale="USD"
- *   label="Credit Limit"
- *   max={10000}
- *   value={creditLimit}
- *   onChange={(e, original) => setCreditLimit(Number(original))}
- * />
- * ```
- */
-function CurrencyInput(props) {
-    const { name, disabled, title, style, variant = "solid", label, className: wrapperClassName = "", value, defaultValue, max = 1000000000, locale, onChange, prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, unShowFieldTemplate, orientation, showAsterisk, rightIcon, size = "md", id, ...rest } = props;
-    const { fieldErrors } = useForm();
-    const [isFocused, setIsFocused] = useState(false);
-    const [maskedValue, setMaskedValue] = useState("0");
-    const inputRef = useRef(null);
-    const inputId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const isDisabled = disabled || isLoading;
-    const iconSizes = { md: 20, lg: 20 };
-    const iconSize = iconSizes[size];
-    const loadingPosition = rightIcon ? "right" : "left";
-    const showLeftSpinner = loadingPosition === "left" && isLoading;
-    const showRightSpinner = loadingPosition === "right" && isLoading;
-    function handleSectionClick() {
-        if (isDisabled || !inputRef?.current)
-            return;
-        setIsFocused(true);
-        inputRef.current.focus();
-    }
-    function handleFocus(e) {
-        setIsFocused(true);
-        if (onFocus)
-            onFocus(e);
-    }
-    function handleBlur(e) {
-        setIsFocused(false);
-        if (onBlur)
-            onBlur(e);
-    }
-    const updateValues = (originalValue) => {
-        const [calculatedValue, calculatedMaskedValue] = maskCurrencyValues(originalValue, locale);
-        if (!max || calculatedValue <= max) {
-            setMaskedValue(calculatedMaskedValue);
-            return [calculatedValue, calculatedMaskedValue];
-        }
-        return maskCurrencyValues(originalValue, locale);
-    };
-    const handleChange = (event) => {
-        event.preventDefault();
-        const [originalValue, maskedValue] = updateValues(event.target.value);
-        onChange && onChange(event, String(originalValue), String(maskedValue));
-    };
-    useEffect(() => {
-        function currentValue() {
-            if (typeof value === "number")
-                return value;
-            if (typeof defaultValue === "number")
-                return defaultValue;
-            return undefined;
-        }
-        const [, maskedValue] = maskCurrencyValues(currentValue(), locale);
-        setMaskedValue(maskedValue);
-    }, [locale, defaultValue, value]);
-    const hasPrefix = !!prefix ? "hasPrefix" : "";
-    const hasSuffix = !!suffix ? "hasSuffix" : "";
-    const errored = isError ? "errored" : "";
-    const opacity = isDisabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynCurrencyInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;
-    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs("section", { title: title, style: style, className: className, onClick: handleSectionClick, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { disabled: isDisabled, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, id: inputId, placeholder: isDisabled ? maskedValue : undefined, value: isDisabled ? undefined : maskedValue, ...rest }), _jsx("input", { type: "hidden", name: name, value: normalizeValue(maskedValue), readOnly: true }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }) }));
-}
-export { CurrencyInput };

package/dist/components/divider/index.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * Divider — visually separates content sections.
- *
- * @param props.orientation - Line direction (`horizontal` | `vertical`). Default: "horizontal"
- *
- * **...Other valid HTML properties for `<div>`**
- *
- * @returns Divider JSX element.
- *
- * @example
- * ```tsx
- * // Between sections
- * <h2>Section 1</h2>
- * <Divider />
- * <h2>Section 2</h2>
- *
- * // Vertical (e.g. between sidebar and content)
- * <Divider orientation="vertical" />
- * ```
- */
-function Divider(props) {
-    const { className: baseClassName, orientation = "horizontal", ...rest } = props;
-    const className = `arkynDivider ${orientation} ${baseClassName}`;
-    return _jsx("div", { className: className.trim(), ...rest });
-}
-export { Divider };