@arkyn/components 3.0.1-beta.99 → 3.0.3

package/dist/components/searchPlaces.js

@@ -1,91 +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 component - A Google Places autocomplete input field.
- *
- * This component integrates with Google Maps API to provide address autocomplete functionality.
- * When a user selects a place from the suggestions, it extracts and returns structured address data
- * including street, city, state, district, postal code, and geographic coordinates.
- *
- * @component
- * @example
- * ```tsx
- * <SearchPlaces
- *   placeholder="Digite o endereço"
- *   onChange={(value) => console.log('Input:', value)}
- *   onPlaceChanged={(place) => {
- *     console.log('Selected place:', place);
- *     // place = {
- *     //   street: "Rua exemplo",
- *     //   city: "São Paulo",
- *     //   state: "São Paulo",
- *     //   district: "Centro",
- *     //   cep: "01310-100",
- *     //   stateShortName: "SP",
- *     //   streetNumber: "123",
- *     //   coordinates: { lat: -23.5505, lng: -46.6333 }
- *     // }
- *   }}
- *   options={{
- *     componentRestrictions: { country: "br" }
- *   }}
- * />
- * ```
- *
- * @param {SearchPlacesProps} props - Component props
- * @param {StandaloneSearchBoxProps["options"]} [props.options] - Google Maps API options for filtering/customizing search results
- * @param {(value: string) => void} [props.onChange] - Handler called when the input text changes
- * @param {(place: PlaceData) => void} [props.onPlaceChanged] - Handler called when a place is selected, receives structured address data
- * @returns {JSX.Element} An input field with Google Places autocomplete functionality
- *
- * @requires Google Maps JavaScript API with Places library loaded
- * @requires @react-google-maps/api package
- */
-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[0];
-        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 "";
-        }
-        if (place) {
-            const street = findData("route");
-            const streetNumber = findData("street_number");
-            const district = findData("sublocality_level_1");
-            const city = findData("administrative_area_level_2");
-            const state = findData("administrative_area_level_1");
-            const stateShortName = findDataShort("administrative_area_level_1");
-            const cep = findData("postal_code");
-            const lat = place.geometry?.location?.lat();
-            const lng = place.geometry?.location?.lng();
-            const sendPlace = {
-                street,
-                city,
-                state,
-                district,
-                cep,
-                streetNumber,
-                stateShortName,
-                coordinates: { lat, lng },
-            };
-            onPlaceChanged && onPlaceChanged(sendPlace);
-        }
-    };
-    return (_jsx(StandaloneSearchBox, { onLoad: handleLoad, onPlacesChanged: handlePlacesChanged, options: options, children: _jsx(Input, { type: "text", onChange: (e) => onChange && onChange(e.target.value), ...rest }) }));
-}
-export { SearchPlaces };

package/dist/components/select/index.js

@@ -1,168 +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 { IconRenderer } from "../../services/iconRenderer";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-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 component - used for selecting sle options from a dropdown list with support for search, labels, and validation
- *
- * @param props - Select component properties
- * @param props.name - Required field name for form handling
- * @param props.options - Array of options with label and value properties
- * @param props.id - Optional unique identifier for the component
- * @param props.value - Controlled value of selected option
- * @param props.defaultValue - Default selected value. Default: ""
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.label - Optional label text to display above the select
- * @param props.errorMessage - Error message to display below the select
- * @param props.placeholder - Placeholder text when no options are selected. Default: "Selecione..."
- * @param props.notFoundText - Text to display when no options match search. Default: "Sem opções disponíveis"
- * @param props.className - Additional CSS classes to apply
- * @param props.disabled - Whether the select is disabled. Default: false
- * @param props.readOnly - Whether the select is read-only. Default: false
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.isSearchable - Whether the select supports search functionality. Default: false
- * @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: true
- * @param props.onSearch - Callback function called when search value changes
- * @param props.onChange - Callback function called when selected value changes
- * @param props.onFocus - Callback function called when select gains focus
- * @param props.onBlur - Callback function called when select loses focus
- * @param props.size - Select size. Default: "md"
- * @param props.variant - Visual variant of the select. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the select
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.optionMaxHeight - Maximum height for the options dropdown
- *
- * @returns Select JSX element wrapped in FieldWrapper with optional label and error
- *
- * @example
- * ```tsx
- * // Basic select
- * <Select
- *   name="category:"
- *   options={[
- *     { label: "Technology", value: "tech" },
- *     { label: "Design", value: "design" },
- *     { label: "Marketing", value: "marketing" }
- *   ]}
- * />
- *
- * // Select with label and validation
- * <Select
- *   name="skill"
- *   label="Select your skill:"
- *   showAsterisk
- *   errorMessage="Please select at least one skill"
- *   options={skillOptions}
- *   placeholder="Choose your skills..."
- * />
- *
- * // Searchable select with custom styling
- * <Select
- *   name="country"
- *   label="Country:"
- *   isSearchable
- *   variant="outline"
- *   size="lg"
- *   leftIcon={GlobeIcon}
- *   options={countryOptions}
- *   notFoundText="No countries found"
- * />
- *
- * // Controlled select with callbacks
- * <Select
- *   name="tag"
- *   label="Tag:"
- *   value={selectedTag}
- *   onChange={setSelectedTag}
- *   onSearch={handleSearch}
- *   closeOnSelect={false}
- *   isLoading={isLoadingTags}
- *   options={tagOptions}
- * />
- *
- * // Select with prefix and custom behavior
- * <Select
- *   name="department"
- *   label="Department:"
- *   prefix="Dept:"
- *   closeOnSelect={true}
- *   variant="underline"
- *   defaultValue="hr"
- *   options={departmentOptions}
- * />
- * ```
- */
-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", } = 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 (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _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 })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-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,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/components/switch/index.js

@@ -1,100 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
-import "./styles.css";
-import { FieldWrapper } from "../fieldWrapper";
-import { FieldLabel } from "../fieldLabel";
-/**
- * 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
- * @param props.orientation - Orientation of the switch and label. Default: "horizontalReverse"
- *
- * **...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)}
- * />
- * ```
- */
-function Switch(props) {
-    const { label, size = "lg", defaultChecked = false, checked: baseChecked = null, value, unCheckedValue = "", name, className: baseClassName = "", onCheck, id, orientation = "horizontalReverse", ...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 (_jsxs(FieldWrapper, { orientation: orientation, children: [label && _jsx(FieldLabel, { onClick: handleCheck, children: label }), _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 };

package/dist/components/tab/tabButton/index.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useTab } from "../tabContext";
-import "./styles.css";
-/**
- * TabButton component - used as interactive buttons within a TabContainer for tab navigation
- *
- * @param props - TabButton component properties
- * @param props.children - Content to display inside the tab button (required)
- * @param props.value - Unique identifier for the tab button (required)
- * @param props.disabled - Whether the button is disabled. Can be overridden by TabContainer's disabled state
- *
- * **...Other valid HTML button properties except children, value, and type**
- *
- * @returns TabButton JSX element
- *
- * @example
- * ```tsx
- * // Basic tab buttons within TabContainer
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <TabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <TabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <TabContainer>
- *   <TabButton value="available">Available</TabButton>
- *   <TabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab buttons with custom styling and default value
- * <TabContainer defaultValue="dashboard">
- *   <TabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="reports">Reports</TabButton>
- * </TabContainer>
- * ```
- */
-function TabButton(props) {
-    const { children, disabled: rawDisabled = false, className: baseClassName = "", onClick, value, ...rest } = props;
-    const { disabled, currentTab, changeCurrentTab } = useTab();
-    const isDisabled = disabled || rawDisabled;
-    const disabledClass = isDisabled ? "isDisabled" : "";
-    const activeClass = currentTab === value && value ? "isActive" : "";
-    const className = `arkynTabButton ${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 { TabButton };