@arkyn/components 3.0.1-beta.12 → 3.0.1-beta.17

package/dist/src/components/phoneInput/phoneInputCountryOption/index.d.ts

@@ -0,0 +1,18 @@
+import "./styles.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    prefix: null | string;
+    flag: string;
+    mask: string;
+};
+type PhoneInputCountryOptionProps = {
+    country: CountryType;
+    size: "md" | "lg";
+    isActive: boolean;
+    handleChangeValue: (country: CountryType) => void;
+};
+declare function PhoneInputCountryOption(props: PhoneInputCountryOptionProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountryOption };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/phoneInput/phoneInputCountryOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/phoneInput/phoneInputCountryOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAanE;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/src/components/phoneInput/phoneInputCountryOptionsContainer/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type PhoneInputCountryOptionsContainerProps = {
+    isOpen: boolean;
+    children: ReactNode;
+    search: string;
+    placeholder: string;
+    onSearch: (value: string) => void;
+};
+declare function PhoneInputCountryOptionsContainer(props: PhoneInputCountryOptionsContainerProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountryOptionsContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/phoneInput/phoneInputCountryOptionsContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE5E,OAAO,cAAc,CAAC;AAEtB,KAAK,sCAAsC,GAAG;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,iCAAiC,CACxC,KAAK,EAAE,sCAAsC,2CA6D9C;AAED,OAAO,EAAE,iCAAiC,EAAE,CAAC"}

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

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useScrollLock } from "../../../hooks/useScrollLock";
+import "./styles.css";
+function PhoneInputCountryOptionsContainer(props) {
+    const { children, isOpen, onSearch, search, placeholder } = props;
+    const containerRef = useRef(null);
+    const [position, setPosition] = useState("bottom");
+    function handleSearch(e) {
+        onSearch(e.target.value);
+    }
+    useScrollLock(isOpen);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const checkContainerPosition = () => {
+            if (!containerRef.current)
+                return;
+            const parentElement = containerRef.current.parentElement;
+            if (!parentElement)
+                return;
+            const parentRect = parentElement.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const estimatedContainerHeight = 300;
+            const spaceBelow = viewportHeight - parentRect.bottom;
+            if (spaceBelow < estimatedContainerHeight &&
+                parentRect.top > estimatedContainerHeight) {
+                setPosition("top");
+            }
+            else {
+                setPosition("bottom");
+            }
+        };
+        checkContainerPosition();
+    }, [isOpen]);
+    if (!isOpen)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { className: `arkynPhoneInputCountryOptionsContainer ${position}`, ref: containerRef, children: [_jsx("input", { type: "search", name: "search-select", className: "arkynPhoneInputCountryOptionsContainerSearchSelect", value: search, id: "input-search", placeholder: placeholder, onChange: handleSearch }), children] }));
+}
+export { PhoneInputCountryOptionsContainer };

package/dist/src/components/phoneInput/phoneInputCountrySelector/index.d.ts

@@ -0,0 +1,17 @@
+import "./styles.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    prefix: null | string;
+    flag: string;
+    mask: string;
+};
+type PhoneInputCountrySelectorProps = {
+    size: "md" | "lg";
+    currentCountry: CountryType;
+    onClick: () => void;
+};
+declare function PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps): import("react/jsx-runtime").JSX.Element;
+export { PhoneInputCountrySelector };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/phoneInput/phoneInputCountrySelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/phoneInput/phoneInputCountrySelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,2CAcvE;AAED,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { Divider } from "../../divider";
+import "./styles.css";
+function PhoneInputCountrySelector(props) {
+    const { currentCountry, onClick } = props;
+    return (_jsxs("div", { className: "phoneInputSelectCountry", onClick: onClick, children: [_jsx("img", { className: "flag", src: currentCountry.flag, alt: currentCountry.name }), _jsx(ChevronDown, { className: "chevronDown", strokeWidth: 2.5 }), _jsx(Divider, { orientation: "vertical" })] }));
+}
+export { PhoneInputCountrySelector };

package/dist/src/components/phoneInput/phoneInputMask/index.d.ts

@@ -0,0 +1,21 @@
+import "./style.css";
+type CountryType = {
+    name: string;
+    code: string;
+    iso: string;
+    prefix: null | string;
+    flag: string;
+    mask: string;
+};
+type PhoneInputMaskProps = {
+    onFocus: () => void;
+    onBlur: () => void;
+    disabled: boolean;
+    size: "md" | "lg";
+    currentCountry: CountryType;
+    value: string;
+    onChange: (e: string) => void;
+};
+declare const PhoneInputMask: import("react").ForwardRefExoticComponent<PhoneInputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
+export { PhoneInputMask };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/phoneInput/phoneInputMask/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/phoneInput/phoneInputMask/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,aAAa,CAAC;AAErB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AASF,QAAA,MAAM,cAAc,kHAyDnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputMask } from "@react-input/mask";
+import { forwardRef, useEffect, useState, } from "react";
+import { applyMask, clear, getMask, MAX_LENGTH, TYPES, } from "../../../utils/phoneInputUtilities";
+import "./style.css";
+const BaseInput = forwardRef((props, ref) => {
+    return _jsx("input", { ref: ref, ...props });
+});
+const PhoneInputMask = forwardRef((props, ref) => {
+    const { onFocus, onBlur, size, onChange, value, currentCountry, disabled } = props;
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        if (isMounted)
+            onChange(currentCountry.mask);
+        else
+            setIsMounted(true);
+    }, [currentCountry]);
+    const className = `phoneInputMask ${size}`;
+    function handleChange(event) {
+        let value = clear(event.target.value);
+        const mask = getMask(value);
+        let nextLength = value.length;
+        if (nextLength > MAX_LENGTH)
+            return;
+        value = applyMask(value, TYPES[mask]);
+        event.target.value = value;
+        onChange(value);
+    }
+    if (currentCountry.code === "+55") {
+        return (_jsx("input", { value: value, onChange: handleChange, className: className, onFocus: onFocus, onBlur: onBlur, disabled: disabled, ref: ref }));
+    }
+    return (_jsx(InputMask, { value: value, onChange: (e) => onChange(e.target.value), className: className, component: BaseInput, onFocus: onFocus, onBlur: onBlur, disabled: disabled, mask: currentCountry.mask, showMask: true, replacement: { _: /\d/ }, ref: ref }));
+});
+export { PhoneInputMask };

package/dist/src/components/radio/radioBox/index.d.ts

@@ -0,0 +1,85 @@
+import { ButtonHTMLAttributes } from "react";
+import "./styles.css";
+type RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    value: string;
+    isError?: boolean;
+    size?: "sm" | "md" | "lg";
+};
+/**
+ * RadioBox component - individual radio button option that must be used within a RadioGroup
+ *
+ * @param props - RadioBox component properties
+ * @param props.value - Required unique value for this radio option within the group
+ * @param props.isError - Optional error state indicator for styling
+ * @param props.size - Size variant for the radio box, inherits from RadioGroup if not specified
+ * @param props.children - Content to display next to the radio button (label text, icons, etc.)
+ *
+ * **...Other valid HTML properties for button element**
+ *
+ * @returns RadioBox JSX element wrapped in a label for accessibility
+ *
+ * @example
+ * ```tsx
+ * // Basic radio boxes within a group
+ * <RadioGroup name="gender">
+ *   <RadioBox value="male">Male</RadioBox>
+ *   <RadioBox value="female">Female</RadioBox>
+ *   <RadioBox value="other">Other</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with rich content
+ * <RadioGroup name="plan" label="Choose your plan">
+ *   <RadioBox value="basic">
+ *     <div>
+ *       <h4>Basic Plan</h4>
+ *       <p>$9.99/month - Perfect for individuals</p>
+ *     </div>
+ *   </RadioBox>
+ *   <RadioBox value="premium">
+ *     <div>
+ *       <h4>Premium Plan</h4>
+ *       <p>$19.99/month - Great for small teams</p>
+ *     </div>
+ *   </RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with custom size override
+ * <RadioGroup name="priority" size="md">
+ *   <RadioBox value="low" size="sm">Low Priority</RadioBox>
+ *   <RadioBox value="medium">Medium Priority</RadioBox>
+ *   <RadioBox value="high" size="lg">High Priority</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with disabled state
+ * <RadioGroup name="options">
+ *   <RadioBox value="option1">Available Option</RadioBox>
+ *   <RadioBox value="option2" disabled>Disabled Option</RadioBox>
+ *   <RadioBox value="option3">Another Available Option</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with custom styling
+ * <RadioGroup name="theme">
+ *   <RadioBox value="light" className="theme-option">
+ *     🌞 Light Theme
+ *   </RadioBox>
+ *   <RadioBox value="dark" className="theme-option">
+ *     🌙 Dark Theme
+ *   </RadioBox>
+ *   <RadioBox value="auto" className="theme-option">
+ *     🔄 Auto Theme
+ *   </RadioBox>
+ * </RadioGroup>
+ * ```
+ *
+ * @remarks
+ * This component must be used as a child of RadioGroup. It automatically inherits:
+ * - Group name for form handling
+ * - Size from parent RadioGroup (unless overridden)
+ * - Change handlers and state management
+ * - Error states from form validation
+ *
+ * The component handles both click and focus events for accessibility.
+ */
+declare function RadioBox(props: RadioBoxProps): import("react/jsx-runtime").JSX.Element;
+export { RadioBox };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/radio/radioBox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/radio/radioBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAiCrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRadioGroup } from "../radioContext";
+import "./styles.css";
+/**
+ * RadioBox component - individual radio button option that must be used within a RadioGroup
+ *
+ * @param props - RadioBox component properties
+ * @param props.value - Required unique value for this radio option within the group
+ * @param props.isError - Optional error state indicator for styling
+ * @param props.size - Size variant for the radio box, inherits from RadioGroup if not specified
+ * @param props.children - Content to display next to the radio button (label text, icons, etc.)
+ *
+ * **...Other valid HTML properties for button element**
+ *
+ * @returns RadioBox JSX element wrapped in a label for accessibility
+ *
+ * @example
+ * ```tsx
+ * // Basic radio boxes within a group
+ * <RadioGroup name="gender">
+ *   <RadioBox value="male">Male</RadioBox>
+ *   <RadioBox value="female">Female</RadioBox>
+ *   <RadioBox value="other">Other</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with rich content
+ * <RadioGroup name="plan" label="Choose your plan">
+ *   <RadioBox value="basic">
+ *     <div>
+ *       <h4>Basic Plan</h4>
+ *       <p>$9.99/month - Perfect for individuals</p>
+ *     </div>
+ *   </RadioBox>
+ *   <RadioBox value="premium">
+ *     <div>
+ *       <h4>Premium Plan</h4>
+ *       <p>$19.99/month - Great for small teams</p>
+ *     </div>
+ *   </RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with custom size override
+ * <RadioGroup name="priority" size="md">
+ *   <RadioBox value="low" size="sm">Low Priority</RadioBox>
+ *   <RadioBox value="medium">Medium Priority</RadioBox>
+ *   <RadioBox value="high" size="lg">High Priority</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with disabled state
+ * <RadioGroup name="options">
+ *   <RadioBox value="option1">Available Option</RadioBox>
+ *   <RadioBox value="option2" disabled>Disabled Option</RadioBox>
+ *   <RadioBox value="option3">Another Available Option</RadioBox>
+ * </RadioGroup>
+ *
+ * // Radio boxes with custom styling
+ * <RadioGroup name="theme">
+ *   <RadioBox value="light" className="theme-option">
+ *     🌞 Light Theme
+ *   </RadioBox>
+ *   <RadioBox value="dark" className="theme-option">
+ *     🌙 Dark Theme
+ *   </RadioBox>
+ *   <RadioBox value="auto" className="theme-option">
+ *     🔄 Auto Theme
+ *   </RadioBox>
+ * </RadioGroup>
+ * ```
+ *
+ * @remarks
+ * This component must be used as a child of RadioGroup. It automatically inherits:
+ * - Group name for form handling
+ * - Size from parent RadioGroup (unless overridden)
+ * - Change handlers and state management
+ * - Error states from form validation
+ *
+ * The component handles both click and focus events for accessibility.
+ */
+function RadioBox(props) {
+    const { value: componentValue, size: componentSize, disabled, children, className: baseClassName = "", ...rest } = props;
+    const { handleChange, size: groupSize, value, isError } = useRadioGroup();
+    const isChecked = value === componentValue;
+    const size = componentSize || groupSize;
+    const checkedClass = isChecked ? "checkedTrue" : "checkedFalse";
+    const errorClass = !!isError ? "errorTrue" : "errorFalse";
+    const disabledClass = disabled ? "disabledTrue" : "disabledFalse";
+    const className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;
+    return (_jsxs("label", { className: className.trim(), children: [_jsx("button", { type: "button", disabled: disabled, onClick: () => handleChange(componentValue), onFocus: () => handleChange(componentValue), ...rest }), children] }));
+}
+export { RadioBox };

package/dist/src/components/radio/radioContext.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+type RadioGroupContextType = {
+    value: string;
+    isError: boolean;
+    size: "sm" | "md" | "lg";
+    handleChange: (value: string) => void;
+};
+type RadioProviderProps = {
+    children: ReactNode;
+    isError: boolean;
+    size: "sm" | "md" | "lg";
+    value: string;
+    handleChange: (value: string) => void;
+};
+declare function RadioProvider(props: RadioProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useRadioGroup(): RadioGroupContextType;
+export { RadioProvider, useRadioGroup };
+//# sourceMappingURL=radioContext.d.ts.map

package/dist/src/components/radio/radioContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioContext.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/radioContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAEvE,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAIF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAQ/C;AAED,iBAAS,aAAa,0BAErB;AAED,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const radioContext = createContext({});
+function RadioProvider(props) {
+    const { children, size, isError, handleChange, value } = props;
+    return (_jsx(radioContext.Provider, { value: { handleChange, value, size, isError }, children: children }));
+}
+function useRadioGroup() {
+    return useContext(radioContext);
+}
+export { RadioProvider, useRadioGroup };

package/dist/src/components/radio/radioGroup/index.d.ts

@@ -0,0 +1,92 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    name: string;
+    label?: string;
+    showAsterisk?: boolean;
+    errorMessage?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: "sm" | "md" | "lg";
+};
+/**
+ * RadioGroup component - used for creating a group of radio button options with shared state management
+ *
+ * @param props - RadioGroup component properties
+ * @param props.name - Required field name for form handling and radio button grouping
+ * @param props.label - Optional label text to display above the radio group
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.errorMessage - Error message to display below the radio group
+ * @param props.value - Controlled value for the selected radio option
+ * @param props.defaultValue - Default selected value for uncontrolled usage. Default: ""
+ * @param props.onChange - Callback function called when radio selection changes, receives the selected value
+ * @param props.size - Size variant for all radio buttons in the group. Default: "md"
+ *
+ * **...Other valid HTML properties for div element (except onChange)**
+ *
+ * @returns RadioGroup JSX element wrapped in FieldWrapper with RadioProvider context for child Radio components
+ *
+ * @example
+ * ```tsx
+ * // Basic radio group
+ * <RadioGroup name="gender">
+ *   <Radio value="male" label="Male" />
+ *   <Radio value="female" label="Female" />
+ *   <Radio value="other" label="Other" />
+ * </RadioGroup>
+ *
+ * // Radio group with label and validation
+ * <RadioGroup
+ *   name="subscription"
+ *   label="Choose your plan"
+ *   showAsterisk
+ *   errorMessage="Please select a subscription plan"
+ * >
+ *   <Radio value="basic" label="Basic Plan - $9.99/month" />
+ *   <Radio value="premium" label="Premium Plan - $19.99/month" />
+ *   <Radio value="enterprise" label="Enterprise Plan - $49.99/month" />
+ * </RadioGroup>
+ *
+ * // Controlled radio group with callback
+ * <RadioGroup
+ *   name="theme"
+ *   label="Select Theme"
+ *   value={selectedTheme}
+ *   onChange={(value) => setSelectedTheme(value)}
+ *   size="lg"
+ * >
+ *   <Radio value="light" label="Light Theme" />
+ *   <Radio value="dark" label="Dark Theme" />
+ *   <Radio value="auto" label="Auto (System)" />
+ * </RadioGroup>
+ *
+ * // Radio group with default selection
+ * <RadioGroup
+ *   name="language"
+ *   label="Preferred Language"
+ *   defaultValue="en"
+ *   size="sm"
+ * >
+ *   <Radio value="en" label="English" />
+ *   <Radio value="es" label="Spanish" />
+ *   <Radio value="fr" label="French" />
+ *   <Radio value="pt" label="Portuguese" />
+ * </RadioGroup>
+ *
+ * // Radio group with custom styling and onChange handler
+ * <RadioGroup
+ *   name="difficulty"
+ *   label="Select Difficulty Level"
+ *   className="custom-radio-group"
+ *   onChange={(value) => console.log('Selected difficulty:', value)}
+ * >
+ *   <Radio value="easy" label="Easy" />
+ *   <Radio value="medium" label="Medium" />
+ *   <Radio value="hard" label="Hard" />
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup(props: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export { RadioGroup };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/radio/radioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/radio/radioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAQjD,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAgDzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FieldError } from "../../../components/fieldError";
+import { FieldLabel } from "../../../components/fieldLabel";
+import { FieldWrapper } from "../../../components/fieldWrapper";
+import { useForm } from "../../../hooks/useForm";
+import { RadioProvider } from "../radioContext";
+import "./styles.css";
+/**
+ * RadioGroup component - used for creating a group of radio button options with shared state management
+ *
+ * @param props - RadioGroup component properties
+ * @param props.name - Required field name for form handling and radio button grouping
+ * @param props.label - Optional label text to display above the radio group
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.errorMessage - Error message to display below the radio group
+ * @param props.value - Controlled value for the selected radio option
+ * @param props.defaultValue - Default selected value for uncontrolled usage. Default: ""
+ * @param props.onChange - Callback function called when radio selection changes, receives the selected value
+ * @param props.size - Size variant for all radio buttons in the group. Default: "md"
+ *
+ * **...Other valid HTML properties for div element (except onChange)**
+ *
+ * @returns RadioGroup JSX element wrapped in FieldWrapper with RadioProvider context for child Radio components
+ *
+ * @example
+ * ```tsx
+ * // Basic radio group
+ * <RadioGroup name="gender">
+ *   <Radio value="male" label="Male" />
+ *   <Radio value="female" label="Female" />
+ *   <Radio value="other" label="Other" />
+ * </RadioGroup>
+ *
+ * // Radio group with label and validation
+ * <RadioGroup
+ *   name="subscription"
+ *   label="Choose your plan"
+ *   showAsterisk
+ *   errorMessage="Please select a subscription plan"
+ * >
+ *   <Radio value="basic" label="Basic Plan - $9.99/month" />
+ *   <Radio value="premium" label="Premium Plan - $19.99/month" />
+ *   <Radio value="enterprise" label="Enterprise Plan - $49.99/month" />
+ * </RadioGroup>
+ *
+ * // Controlled radio group with callback
+ * <RadioGroup
+ *   name="theme"
+ *   label="Select Theme"
+ *   value={selectedTheme}
+ *   onChange={(value) => setSelectedTheme(value)}
+ *   size="lg"
+ * >
+ *   <Radio value="light" label="Light Theme" />
+ *   <Radio value="dark" label="Dark Theme" />
+ *   <Radio value="auto" label="Auto (System)" />
+ * </RadioGroup>
+ *
+ * // Radio group with default selection
+ * <RadioGroup
+ *   name="language"
+ *   label="Preferred Language"
+ *   defaultValue="en"
+ *   size="sm"
+ * >
+ *   <Radio value="en" label="English" />
+ *   <Radio value="es" label="Spanish" />
+ *   <Radio value="fr" label="French" />
+ *   <Radio value="pt" label="Portuguese" />
+ * </RadioGroup>
+ *
+ * // Radio group with custom styling and onChange handler
+ * <RadioGroup
+ *   name="difficulty"
+ *   label="Select Difficulty Level"
+ *   className="custom-radio-group"
+ *   onChange={(value) => console.log('Selected difficulty:', value)}
+ * >
+ *   <Radio value="easy" label="Easy" />
+ *   <Radio value="medium" label="Medium" />
+ *   <Radio value="hard" label="Hard" />
+ * </RadioGroup>
+ * ```
+ */
+function RadioGroup(props) {
+    const { defaultValue = "", name, label, showAsterisk, errorMessage: baseErrorMessage, value: forceValue, onChange, size = "md", className: baseClassName = "", ...rest } = props;
+    const [value, setValue] = useState(defaultValue);
+    const { fieldErrors } = useForm();
+    function handleChange(value) {
+        setValue(value);
+        if (onChange)
+            onChange(value);
+    }
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = !!errorMessage;
+    const className = `arkynRadioGroup ${size} ${baseClassName}`;
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(RadioProvider, { isError: isError, size: size, value: forceValue || value, handleChange: handleChange, children: [_jsx("input", { style: { display: "none" }, type: "text", readOnly: true, name: name, value: forceValue || value }), _jsx("div", { className: className.trim(), ...rest })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { RadioGroup };

package/dist/src/components/slider/index.d.ts

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type SliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    onDragging?: (value: boolean) => void;
+};
+/**
+ * Slider component - interactive range input for selecting numeric values
+ *
+ * @param props - Slider component properties
+ * @param props.value - Current slider value (0-100)
+ * @param props.onChange - Callback function called when value changes
+ * @param props.disabled - Disables slider interaction. Default: false
+ * @param props.onDragging - Callback function called when dragging state changes
+ *
+ * **...Other valid HTML properties for div element**
+ *
+ * @returns Slider JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic slider
+ * const [value, setValue] = useState(50);
+ * <Slider value={value} onChange={setValue} />
+ *
+ * // Disabled slider
+ * <Slider value={75} onChange={() => {}} disabled />
+ *
+ * // Slider with dragging callback
+ * const [isDragging, setIsDragging] = useState(false);
+ * <Slider
+ *   value={value}
+ *   onChange={setValue}
+ *   onDragging={setIsDragging}
+ * />
+ *
+ * // Complete example with useSlider hook
+ * function SliderExample() {
+ *   const [sliderValue, setSliderValue] = useSlider(25);
+ *   const [isDragging, setIsDragging] = useState(false);
+ *
+ *   return (
+ *     <Slider
+ *       value={sliderValue}
+ *       onChange={setSliderValue}
+ *       onDragging={setIsDragging}
+ *       className="custom-slider"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function Slider(props: SliderProps): import("react/jsx-runtime").JSX.Element;
+export { Slider };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuEjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}