@arkyn/components 3.0.1-beta.20 → 3.0.1-beta.201

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

@@ -1,85 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,90 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,11 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,100 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}

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

@@ -1,97 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import "./styles.css";
-/**
- * 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"
- *     />
- *   );
- * }
- * ```
- */
-function Slider(props) {
-    const { onChange, value, disabled = false, onDragging, className = "", ...rest } = props;
-    const [isDragging, setIsDragging] = useState(false);
-    const sliderRef = useRef(null);
-    const handleMouseDown = () => setIsDragging(true);
-    const handleMouseUp = () => setIsDragging(false);
-    const handleMouseMove = (event) => {
-        if (disabled)
-            return;
-        if (!isDragging || !sliderRef.current)
-            return;
-        const rect = sliderRef.current.getBoundingClientRect();
-        const offsetX = event.clientX - rect.left;
-        const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
-        onChange(newValue);
-    };
-    const handleSliderClick = (event) => {
-        if (disabled)
-            return;
-        if (!sliderRef.current)
-            return;
-        const rect = sliderRef.current.getBoundingClientRect();
-        const offsetX = event.clientX - rect.left;
-        const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
-        onChange(newValue);
-    };
-    useEffect(() => {
-        if (isDragging) {
-            onDragging && onDragging(true);
-            document.addEventListener("mousemove", handleMouseMove);
-            document.addEventListener("mouseup", handleMouseUp);
-        }
-        else {
-            onDragging && onDragging(false);
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleMouseUp);
-        }
-        return () => {
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleMouseUp);
-        };
-    }, [isDragging]);
-    const isDraggingClass = isDragging ? "isDragging" : "isNotDragging";
-    const disabledClass = disabled ? "isDisabled" : "isEnabled";
-    const sliderClassname = `arkynSliderTrack ${isDraggingClass} ${disabledClass} ${className}`;
-    return (_jsxs("div", { ...rest, className: sliderClassname, onMouseDown: handleMouseDown, onClick: handleSliderClick, ref: sliderRef, children: [_jsx("div", { className: "arkynSliderFill", style: { width: `${value}%` } }), _jsx("div", { className: "arkynSliderThumb", style: { left: `${value}%` } })] }));
-}
-export { Slider };

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

@@ -1,94 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-import "./styles.css";
-type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onChange" | "defaultValue" | "onCheck" | "value"> & {
-    label?: string;
-    size?: "sm" | "md" | "lg";
-    defaultChecked?: boolean;
-    checked?: boolean;
-    value?: string;
-    unCheckedValue?: string;
-    name: string;
-    onCheck?: (value: string) => void;
-};
-/**
- * Switch component - used for creating toggle switches with on/off states
- *
- * @param props - Switch component properties
- * @param props.name - Required field name for form handling and input identification
- * @param props.label - Optional label text to display next to the switch
- * @param props.size - Size variant of the switch. Default: "lg"
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.checked - Controlled checked state of the switch
- * @param props.value - Value to be used when switch is checked. Default: "checked"
- * @param props.unCheckedValue - Value to be used when switch is unchecked. Default: ""
- * @param props.onCheck - Callback function called when switch state changes, receives the current value
- *
- * **...Other valid HTML properties for button element (except children, onChange, defaultValue, onCheck, value)**
- *
- * @returns Switch JSX element wrapped in FieldWrapper with optional label
- *
- * @example
- * ```tsx
- * // Basic switch
- * <Switch name="notifications" label="Enable notifications" />
- *
- * // Switch with custom values
- * <Switch
- *   name="theme"
- *   label="Dark mode"
- *   value="dark"
- *   unCheckedValue="light"
- *   onCheck={(value) => console.log('Theme:', value)}
- * />
- *
- * // Controlled switch with callback
- * <Switch
- *   name="autoSave"
- *   label="Auto-save documents"
- *   checked={isAutoSaveEnabled}
- *   onCheck={(value) => setIsAutoSaveEnabled(!!value)}
- *   size="md"
- * />
- *
- * // Small switch with default checked state
- * <Switch
- *   name="marketing"
- *   label="Marketing emails"
- *   size="sm"
- *   defaultChecked={true}
- *   value="subscribed"
- *   unCheckedValue="unsubscribed"
- * />
- *
- * // Switch with custom styling and disabled state
- * <Switch
- *   name="premium"
- *   label="Premium features"
- *   className="premium-switch"
- *   disabled={!isPremiumUser}
- *   onCheck={(value) => handlePremiumToggle(value)}
- * />
- *
- * // Large switch for accessibility
- * <Switch
- *   name="accessibility"
- *   label="High contrast mode"
- *   size="lg"
- *   checked={isHighContrast}
- *   onCheck={(value) => setIsHighContrast(!!value)}
- *   value="enabled"
- *   unCheckedValue="disabled"
- * />
- *
- * // Switch without label for inline usage
- * <Switch
- *   name="inline_toggle"
- *   value="on"
- *   unCheckedValue="off"
- *   onCheck={(value) => console.log('Toggle state:', value)}
- * />
- * ```
- */
-declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
-export { Switch };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,cAAc,CAAC;AAItB,KAAK,WAAW,GAAG,IAAI,CACrB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,SAAS,GAAG,OAAO,CAC/D,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAoDjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}