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

package/dist/components/richText/insertImage/index.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Image } from "lucide-react";
-import { useState } from "react";
-import { useSlate } from "slate-react";
-import { Button } from "../../button";
-import { ImageUpload } from "../../imageUpload";
-import { Input } from "../../input";
-import { ModalContainer } from "../../modal/modalContainer";
-import { ModalFooter } from "../../modal/modalFooter";
-import { ModalHeader } from "../../modal/modalHeader";
-import { TabButton } from "../../tab/tabButton";
-import { TabContainer } from "../../tab/tabContainer";
-import "./styles.css";
-function InsertImage(props) {
-    const { action, tabLabels = ["Adicionar URL", "Upload de arquivo"], modalCancelButton = "Cancelar", modalConfirmButton = "Confirmar", modalInputImageLabel = "Imagem:", modalInputUrlLabel = "URL da imagem:", modalTitle = "Inserir imagem", } = props;
-    const editor = useSlate();
-    const [modalIsVisible, setModalIsVisible] = useState(false);
-    const [imageURL, setImageURL] = useState("");
-    const [uploadType, setUploadType] = useState("url");
-    function handleMouseDown(event) {
-        event.preventDefault();
-        if (!imageURL || imageURL === "")
-            return;
-        editor.insertNodes([
-            { type: "paragraph", children: [{ text: "" }] },
-            { type: "image", src: imageURL, children: [{ text: "" }] },
-            { type: "paragraph", children: [{ text: "" }] },
-        ]);
-        setModalIsVisible(false);
-    }
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "arkynRichTextInsertImage", onMouseDown: () => setModalIsVisible(true), children: _jsx(Image, {}) }), _jsxs(ModalContainer, { isVisible: modalIsVisible, makeInvisible: () => setModalIsVisible(false), children: [_jsx(ModalHeader, { children: modalTitle }), _jsxs("div", { className: "arkynRichTextInsertImageModalContent", children: [_jsxs(TabContainer, { defaultValue: uploadType, onChange: setUploadType, children: [_jsx(TabButton, { value: "url", children: tabLabels[0] }), _jsx(TabButton, { value: "file", children: tabLabels[1] })] }), uploadType === "url" && (_jsxs(_Fragment, { children: [_jsx(Input, { type: "text", name: "richTextImageURL", label: modalInputUrlLabel, showAsterisk: true, defaultValue: imageURL, onChange: (e) => setImageURL(e.target.value) }), imageURL && (_jsx("img", { className: "arkynRichTextInsertImageModalPreviewImage", src: imageURL, alt: "preview" }))] })), uploadType === "file" && (_jsx(ImageUpload, { name: "richTextImageURL", action: action, label: modalInputImageLabel, showAsterisk: true, defaultValue: imageURL, onChange: (url) => setImageURL(url) }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", scheme: "danger", variant: "outline", onClick: () => setModalIsVisible(false), children: modalCancelButton }), _jsx(Button, { type: "button", onClick: handleMouseDown, children: modalConfirmButton })] })] })] }));
-}
-export { InsertImage };

package/dist/components/richText/insertVideo/index.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Video } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useSlate } from "slate-react";
-import { Button } from "../../button";
-import { Input } from "../../input";
-import { ModalContainer } from "../../modal/modalContainer";
-import { ModalFooter } from "../../modal/modalFooter";
-import { ModalHeader } from "../../modal/modalHeader";
-import "./styles.css";
-function InsertVideo(props) {
-    const { modalCancelButton = "Cancelar", modalConfirmButton = "Confirmar", modalInputUrlLabel = "URL do vídeo:", modalTitle = "Inserir vídeo", invalidUrlMessage = "URL inválida", } = props;
-    const editor = useSlate();
-    const [modalIsVisible, setModalIsVisible] = useState(false);
-    const [videoId, setVideoId] = useState("");
-    const [videoRawURL, setVideoRawURL] = useState("");
-    const [errorMessage, setErrorMessage] = useState("");
-    function handleMouseDown(event) {
-        event.preventDefault();
-        if (!videoId || videoId === "")
-            return;
-        const videoUrl = `https://www.youtube.com/embed/${videoId}`;
-        editor.insertNodes([
-            { type: "paragraph", children: [{ text: "" }] },
-            { type: "video", src: videoUrl, children: [{ text: "" }] },
-            { type: "paragraph", children: [{ text: "" }] },
-        ]);
-        setModalIsVisible(false);
-    }
-    useEffect(() => {
-        if (!videoRawURL || videoRawURL === "")
-            return;
-        setVideoId("");
-        setErrorMessage("");
-        const searchParams = new URLSearchParams(videoRawURL.split("?")[1]);
-        const vParam = searchParams.get("v");
-        if (vParam)
-            setVideoId(vParam);
-        else
-            setErrorMessage(invalidUrlMessage);
-    }, [videoRawURL]);
-    useEffect(() => {
-        if (!modalIsVisible) {
-            setVideoId("");
-            setVideoRawURL("");
-            setErrorMessage("");
-        }
-    }, [modalIsVisible]);
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "arkynRichTextInsertVideo", onMouseDown: () => setModalIsVisible(true), children: _jsx(Video, {}) }), _jsxs(ModalContainer, { isVisible: modalIsVisible, makeInvisible: () => setModalIsVisible(false), children: [_jsx(ModalHeader, { children: modalTitle }), _jsxs("div", { className: "arkynRichTextInsertVideoModalContent", children: [_jsx(Input, { type: "text", name: "richTextVideoURL", label: modalInputUrlLabel, showAsterisk: true, defaultValue: videoRawURL, onChange: (e) => setVideoRawURL(e.target.value), errorMessage: errorMessage }), videoId && (_jsx("iframe", { width: "auto", height: "315", src: `https://www.youtube.com/embed/${videoId}`, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", referrerPolicy: "strict-origin-when-cross-origin", allowFullScreen: true }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", scheme: "danger", variant: "outline", onClick: () => setModalIsVisible(false), children: modalCancelButton }), _jsx(Button, { disabled: !videoId, type: "button", onClick: handleMouseDown, children: modalConfirmButton })] })] })] }));
-}
-export { InsertVideo };

package/dist/components/richText/leaf/index.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-function Leaf({ attributes, children, leaf }) {
-    if (leaf.bold)
-        children = _jsx("strong", { children: children });
-    if (leaf.code)
-        children = _jsx("code", { children: children });
-    if (leaf.italic)
-        children = _jsx("em", { children: children });
-    if (leaf.underline)
-        children = _jsx("u", { children: children });
-    return _jsx("span", { ...attributes, children: children });
-}
-export { Leaf };

package/dist/components/richText/markButton/index.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useSlate } from "slate-react";
-import { isMarkActive } from "../../../services/isMarkActive";
-import { toggleMark } from "../../../services/toggleMark";
-import "./styles.css";
-function MarkButton({ format, icon: Icon }) {
-    const editor = useSlate();
-    const isActive = isMarkActive(editor, format);
-    const activeClass = isActive ? "activeTrue" : "activeFalse";
-    function handleMouseDown(event) {
-        event.preventDefault();
-        toggleMark(editor, format);
-    }
-    return (_jsx("button", { type: "button", className: "arkynRichTextMarkButton " + activeClass, onMouseDown: handleMouseDown, children: _jsx(Icon, {}) }));
-}
-export { MarkButton };

package/dist/components/richText/toolbar/index.js

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

package/dist/components/searchPlaces.js

@@ -1,99 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StandaloneSearchBox } from "@react-google-maps/api";
-import { useState } from "react";
-import { Input } from "./input";
-/**
- * SearchPlaces — text input with Google Places autocomplete that returns structured address data.
- *
- * Requires the Google Maps JavaScript API with the Places library to be loaded.
- * Built on `@react-google-maps/api`'s `StandaloneSearchBox`.
- *
- * @param props.options - Google Maps search box options (e.g. restrict by country).
- * @param props.onChange - Fires on every keystroke — receives the current text value.
- * @param props.onPlaceChanged - Fires when the user selects a suggestion — receives structured address data.
- *
- * **...Other valid `Input` properties (except `onLoad`, `onChange`, `type`)**
- *
- * @returns SearchPlaces JSX element (an `Input` wrapped in `StandaloneSearchBox`).
- *
- * @example
- * ```tsx
- * <SearchPlaces
- *   name="address"
- *   label="Address"
- *   placeholder="Start typing an address…"
- *   options={{ componentRestrictions: { country: "br" } }}
- *   onChange={(v) => setRawAddress(v)}
- *   onPlaceChanged={(place) => {
- *     setAddress({
- *       street: place.street,
- *       city: place.city,
- *       state: place.state,
- *       postalCode: place.postalCode,
- *       coordinates: place.coordinates,
- *     });
- *   }}
- * />
- * ```
- */
-function SearchPlaces(props) {
-    const { onChange, onPlaceChanged, options, ...rest } = props;
-    const [searchBox, setSearchBox] = useState(null);
-    const handleLoad = (ref) => setSearchBox(ref);
-    const handlePlacesChanged = () => {
-        const places = searchBox?.getPlaces();
-        const place = places ? places[0] : null;
-        const address_components = place?.address_components;
-        function findData(key) {
-            const data = address_components.find((item) => item.types[0] === key);
-            if (data)
-                return data.long_name;
-            return "";
-        }
-        function findDataShort(key) {
-            const data = address_components.find((item) => item.types[0] === key);
-            if (data)
-                return data.short_name;
-            return "";
-        }
-        function findDataByMultipleTypes(keys) {
-            for (const key of keys) {
-                const data = address_components.find((item) => item.types.includes(key));
-                if (data)
-                    return data.long_name;
-            }
-            return "";
-        }
-        if (place) {
-            const street = findData("route");
-            const streetNumber = findData("street_number");
-            const neighborhood = findDataByMultipleTypes([
-                "sublocality_level_1",
-                "sublocality",
-                "neighborhood",
-            ]);
-            const city = findData("administrative_area_level_2");
-            const state = findData("administrative_area_level_1");
-            const stateShortName = findDataShort("administrative_area_level_1");
-            const postalCode = findDataByMultipleTypes([
-                "postal_code",
-                "postal_code_prefix",
-            ]);
-            const lat = place.geometry?.location?.lat();
-            const lng = place.geometry?.location?.lng();
-            const sendPlace = {
-                street,
-                city,
-                state,
-                neighborhood,
-                postalCode,
-                streetNumber,
-                stateShortName,
-                coordinates: { lat, lng },
-            };
-            onPlaceChanged && onPlaceChanged(sendPlace);
-        }
-    };
-    return (_jsx(StandaloneSearchBox, { onLoad: handleLoad, onPlacesChanged: handlePlacesChanged, options: options, children: _jsx(Input, { type: "text", autoComplete: "off", onChange: (e) => onChange && onChange(e.target.value), ...rest }) }));
-}
-export { SearchPlaces };

package/dist/components/select/index.js

@@ -1,134 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
-import { useForm } from "../../hooks/useForm";
-import { FieldTemplate } from "../../services/fieldTemplate";
-import { IconRenderer } from "../../services/iconRenderer";
-import { SelectChevron } from "./selectChevron";
-import { SelectContainer } from "./selectContainer";
-import { SelectContent } from "./selectContent";
-import { SelectOption } from "./selectOption";
-import { SelectOptionsContainer } from "./selectOptionsContainer";
-import { SelectOverlay } from "./selectOverlay";
-import { SelectSpinner } from "./selectSpinner";
-/**
- * Select — single-option dropdown with optional search, label, validation, and form integration.
- *
- * Integrates with `useForm` to display validation errors by field name.
- *
- * @param props.name - Field name for form submission. Required.
- * @param props.options - Array of selectable options (`{ label, value }`). Required.
- * @param props.value - Controlled selected value.
- * @param props.defaultValue - Uncontrolled default value. Default: ""
- * @param props.label - Label text displayed above the select.
- * @param props.placeholder - Placeholder shown when nothing is selected. Default: "Selecione..."
- * @param props.errorMessage - Validation error message.
- * @param props.isSearchable - Enables search/filter within the dropdown. Default: false
- * @param props.isLoading - Shows a loading spinner and disables interactions. Default: false
- * @param props.closeOnSelect - Closes the dropdown after selecting. Default: true
- * @param props.onChange - Callback fired when the selected value changes.
- * @param props.onSearch - Callback fired when the search query changes.
- * @param props.size - Select size (`md` | `lg`). Default: "md"
- * @param props.variant - Visual style variant. Default: "solid"
- * @param props.orientation - Layout direction. Default: "horizontal"
- * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
- *
- * @returns Select JSX element wrapped in `FieldTemplate`.
- *
- * @example
- * ```tsx
- * // Basic
- * <Select
- *   name="category"
- *   options={[
- *     { label: "Technology", value: "tech" },
- *     { label: "Design", value: "design" },
- *   ]}
- * />
- *
- * // With label, validation, and searchable
- * <Select
- *   name="country"
- *   label="Country"
- *   showAsterisk
- *   isSearchable
- *   options={countryOptions}
- *   errorMessage={errors.country}
- *   notFoundText="No countries found"
- * />
- *
- * // Controlled with async search
- * <Select
- *   name="tag"
- *   label="Tag"
- *   value={selectedTag}
- *   onChange={setSelectedTag}
- *   onSearch={fetchTagOptions}
- *   isLoading={isLoadingTags}
- *   options={tagOptions}
- * />
- * ```
- */
-function Select(props) {
-    const { name, options, className: wrapperClassName = "", placeholder = "Selecione...", closeOnSelect = true, defaultValue = "", errorMessage: baseErrorMessage, isLoading = false, readOnly = false, isSearchable = false, id, label, optionMaxHeight, showAsterisk, leftIcon: LeftIcon, onSearch, onChange, onBlur, notFoundText = "Sem opções disponíveis", onFocus, disabled: baseDisabled = false, prefix, size = "md", value, variant = "solid", orientation = "vertical", unShowFieldTemplate = false, } = props;
-    const { fieldErrors } = useForm();
-    const selectRef = useRef(null);
-    const selectId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const disabled = baseDisabled || isLoading || readOnly;
-    const iconSizes = { md: 20, lg: 20 };
-    const iconSize = iconSizes[size];
-    const [search, setSearch] = useState("");
-    const [isFocused, setIsFocused] = useState(false);
-    const [selectedOption, setSelectedOption] = useState(defaultValue);
-    const forceSelectedOptions = value || selectedOption;
-    function optionHasSelected(value) {
-        return forceSelectedOptions === value;
-    }
-    function getOptionLabel(value) {
-        const option = options.find((option) => option.value === value);
-        return option?.label || "";
-    }
-    function handleContainerFocus() {
-        if (disabled || !selectRef?.current || isFocused)
-            return;
-        setIsFocused(true);
-        selectRef.current.focus();
-        onFocus && onFocus();
-    }
-    function handleBlur() {
-        setIsFocused(false);
-        if (onBlur && selectRef.current)
-            selectRef.current.blur();
-    }
-    function handleSearch(value) {
-        setSearch(value);
-        if (onSearch)
-            onSearch(value);
-    }
-    function handleChangeValue(value) {
-        if (optionHasSelected(value)) {
-            setSelectedOption("");
-            if (onChange)
-                onChange("");
-        }
-        else {
-            setSelectedOption(value);
-            if (onChange)
-                onChange(value);
-        }
-        if (closeOnSelect)
-            handleBlur();
-    }
-    const mappedOptions = options.filter((option) => {
-        if (props.onSearch)
-            return true;
-        if (!props.isSearchable)
-            return true;
-        if (option.label.toLowerCase().includes(search.toLowerCase()))
-            return true;
-        return false;
-    });
-    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs(SelectContainer, { handleContainerFocus: handleContainerFocus, disabled: disabled, isError: isError, isFocused: isFocused, isLoading: isLoading, readOnly: readOnly, size: size, variant: variant, prefixExists: !!prefix, id: selectId, children: [_jsx("input", { ref: selectRef, name: name, value: forceSelectedOptions, type: "hidden" }), _jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsxs(SelectContent, { size: size, children: [forceSelectedOptions !== "" && (_jsx("p", { className: "hasValue", children: getOptionLabel(forceSelectedOptions) })), forceSelectedOptions === "" && _jsx("p", { children: placeholder })] }), _jsxs(SelectOptionsContainer, { isFocused: isFocused, isSearchable: isSearchable, search: search, onSearch: handleSearch, children: [mappedOptions.map(({ label, value }) => (_jsx(SelectOption, { label: label, value: value, size: size, handleChangeValue: handleChangeValue, optionHasSelected: optionHasSelected }, value))), mappedOptions.length <= 0 && _jsx("p", { children: notFoundText })] }), _jsx(SelectChevron, { disabled: disabled, isFocused: isFocused, readOnly: readOnly, iconSize: iconSize, isLoading: isLoading }), _jsx(SelectSpinner, { iconSize: iconSize, isLoading: isLoading }), _jsx(SelectOverlay, { handleBlur: handleBlur, isFocused: isFocused })] }) }));
-}
-export { Select };

package/dist/components/select/selectChevron/index.js

@@ -1,18 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
-import "./styles.css";
-function SelectChevron(props) {
-    const { iconSize, isLoading, disabled, readOnly, isFocused } = props;
-    const notAnimate = disabled || readOnly ? "notAnimate" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynSelectChevron ${notAnimate} ${focused}`;
-    if (isLoading)
-        return _jsx(_Fragment, {});
-    return (_jsx(ChevronDown, { className: className, strokeWidth: 2.5, style: {
-            minWidth: iconSize,
-            minHeight: iconSize,
-            maxWidth: iconSize,
-            maxHeight: iconSize,
-        } }));
-}
-export { SelectChevron };

package/dist/components/select/selectContainer/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function SelectContainer(props) {
-    const { children, handleContainerFocus, disabled, isError, isLoading, isFocused, className, readOnly, variant, size, id, prefixExists, } = props;
-    const hasPrefix = prefixExists ? "hasPrefix" : "";
-    const errored = isError ? "errored" : "";
-    const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    return (_jsx("section", { id: id, className: `arkynSelectContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`, onClick: handleContainerFocus, children: children }));
-}
-export { SelectContainer };

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function SelectContent(props) {
-    const { children, size } = props;
-    const className = `arkynSelectContent ${size}`;
-    return _jsx("div", { className: className, children: children });
-}
-export { SelectContent };

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

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
-import "./styles.css";
-function SelectOption(props) {
-    const { label, optionHasSelected, handleChangeValue, value, size } = props;
-    const hasActive = optionHasSelected(value) ? "active" : "";
-    const className = `arkynSelectOption ${size} ${hasActive}`;
-    return (_jsxs("div", { onClick: () => handleChangeValue(value), className: className, children: [label, " ", _jsx(Check, {})] }));
-}
-export { SelectOption };

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

@@ -1,44 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { Input } from "../../input";
-import "./styles.css";
-function SelectOptionsContainer(props) {
-    const { children, isFocused, isSearchable, search, onSearch } = props;
-    const containerRef = useRef(null);
-    const [position, setPosition] = useState("bottom");
-    useScrollLock(isFocused);
-    useEffect(() => {
-        if (!isFocused)
-            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();
-    }, [isFocused]);
-    function handleSearch(e) {
-        if (!isSearchable)
-            return;
-        onSearch(e.target.value);
-    }
-    if (!isFocused)
-        return _jsx(_Fragment, {});
-    return (_jsxs("div", { ref: containerRef, className: `arkynSelectOptionsContainer ${position}`, children: [isSearchable && (_jsx(Input, { type: "search", name: "search-select", variant: "underline", leftIcon: Search, value: search, onChange: handleSearch })), children] }));
-}
-export { SelectOptionsContainer };

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

@@ -1,9 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function SelectOverlay(props) {
-    const { isFocused, handleBlur } = props;
-    if (!isFocused)
-        return _jsx(_Fragment, {});
-    return _jsx("aside", { className: "arkynSelectOverlay", onClick: handleBlur });
-}
-export { SelectOverlay };

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

@@ -1,10 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import "./styles.css";
-function SelectSpinner(props) {
-    const { iconSize, isLoading } = props;
-    if (!isLoading)
-        return _jsx(_Fragment, {});
-    return (_jsx(Loader2, { className: "arkynSelectSpinner", size: iconSize, strokeWidth: 2.5 }));
-}
-export { SelectSpinner };

package/dist/components/slider/index.js

@@ -1,79 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import "./styles.css";
-/**
- * Slider — interactive track for selecting a numeric value between 0 and 100.
- *
- * Pair with `useSlider` for managed state.
- *
- * @param props.value - Current position as a percentage (0–100). Required.
- * @param props.onChange - Callback fired on value change. Required.
- * @param props.disabled - Disables interactions. Default: false
- * @param props.onDragging - Callback fired when dragging starts or stops.
- *
- * **...Other valid HTML properties for `<div>`**
- *
- * @returns Slider JSX element.
- *
- * @example
- * ```tsx
- * // Controlled slider
- * const [value, setValue] = useState(50);
- * <Slider value={value} onChange={setValue} />
- *
- * // With useSlider hook
- * const [value, setValue] = useSlider(25);
- * <Slider value={value} onChange={setValue} onDragging={setIsDragging} />
- *
- * // Disabled
- * <Slider value={75} onChange={() => {}} disabled />
- * ```
- */
-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/components/switch/index.js

@@ -1,66 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
-import { FieldTemplate } from "../../services/fieldTemplate";
-import "./styles.css";
-/**
- * Switch — toggle input for binary on/off states.
- *
- * 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 switch.
- * @param props.size - Switch size (`sm` | `md` | `lg`). Default: "lg"
- * @param props.defaultChecked - Uncontrolled initial checked state. Default: false
- * @param props.checked - Controlled checked state.
- * @param props.value - Value emitted when on. Default: "checked"
- * @param props.unCheckedValue - Value emitted when off. Default: ""
- * @param props.onCheck - Callback fired on toggle — receives the current value string.
- * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: "horizontalReverse"
- * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
- * @param props.showAsterisk - Appends `*` to the label.
- * @param props.errorMessage - Validation error message.
- *
- * **...Other valid HTML properties for `<button>` (except `children`, `onChange`, `defaultValue`)**
- *
- * @returns Switch JSX element wrapped in `FieldTemplate`.
- *
- * @example
- * ```tsx
- * // Basic
- * <Switch name="notifications" label="Enable notifications" />
- *
- * // Custom on/off values
- * <Switch
- *   name="theme"
- *   label="Dark mode"
- *   value="dark"
- *   unCheckedValue="light"
- *   onCheck={(v) => setTheme(v)}
- * />
- *
- * // Controlled
- * <Switch
- *   name="autoSave"
- *   label="Auto-save"
- *   checked={isAutoSaveEnabled}
- *   onCheck={(v) => setAutoSave(!!v)}
- *   size="md"
- * />
- * ```
- */
-function Switch(props) {
-    const { label, size = "lg", defaultChecked = false, checked: baseChecked = null, value, unCheckedValue = "", name, className: baseClassName = "", onCheck, id, orientation = "horizontalReverse", className: wrapperClassName = "", showAsterisk, errorMessage, unShowFieldTemplate = false, ...rest } = props;
-    const inputRef = useRef(null);
-    const inputId = id || useId();
-    const [isChecked, setIsChecked] = useState(defaultChecked);
-    const currentChecked = typeof baseChecked === "boolean" ? baseChecked : isChecked;
-    function handleCheck() {
-        setIsChecked(!isChecked);
-        onCheck && onCheck(!currentChecked ? value || "checked" : unCheckedValue);
-    }
-    const checkedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-    const className = `arkynSwitch ${checkedClass} ${size} ${baseClassName}`;
-    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsx("button", { type: "button", onClick: handleCheck, className: className, ...rest, children: _jsx("input", { id: inputId, type: "hidden", name: name, ref: inputRef, onClick: handleCheck, value: currentChecked ? value || "checked" : unCheckedValue }) }) }));
-}
-export { Switch };