@arkyn/components 3.0.1-beta.7 → 3.0.1-beta.71

package/dist/components/select/selectContainer/index.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type SelectContainerProps = {
+    children: ReactNode;
+    handleContainerFocus: () => void;
+    prefixExists: boolean;
+    isError: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    isLoading: boolean;
+    isFocused: boolean;
+    className?: string;
+    id: string;
+    variant: "solid" | "outline" | "underline";
+    size: "md" | "lg";
+};
+declare function SelectContainer(props: SelectContainerProps): import("react/jsx-runtime").JSX.Element;
+export { SelectContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/select/selectContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC3C,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA8BnD;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type SelectContentProps = {
+    children: ReactNode;
+    size: "md" | "lg";
+};
+declare function SelectContent(props: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+export { SelectContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/select/selectContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAI/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,8 @@
+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.d.ts

@@ -0,0 +1,11 @@
+import "./styles.css";
+type SelectOptionProps = {
+    value: string;
+    label: string;
+    size: "md" | "lg";
+    optionHasSelected: (value: string) => boolean;
+    handleChangeValue: (value: string) => void;
+};
+declare function SelectOption(props: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
+export { SelectOption };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/select/selectOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAW7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,10 @@
+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.d.ts

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

package/dist/components/select/selectOptionsContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectOptionsContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,SAAS,EAA+B,MAAM,OAAO,CAAC;AAK5E,OAAO,cAAc,CAAC;AAEtB,KAAK,2BAA2B,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CA8DjE;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

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

@@ -0,0 +1,44 @@
+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.d.ts

@@ -0,0 +1,8 @@
+import "./styles.css";
+type SelectOverlayProps = {
+    isFocused: boolean;
+    handleBlur: () => void;
+};
+declare function SelectOverlay(props: SelectOverlayProps): import("react/jsx-runtime").JSX.Element;
+export { SelectOverlay };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/select/selectOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAI/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,9 @@
+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.d.ts

@@ -0,0 +1,8 @@
+import "./styles.css";
+type SelectSpinnerProps = {
+    iconSize: number;
+    isLoading: boolean;
+};
+declare function SelectSpinner(props: SelectSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { SelectSpinner };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/select/selectSpinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/selectSpinner/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAO/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,10 @@
+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.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/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"}

package/dist/components/slider/index.js

@@ -0,0 +1,97 @@
+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.d.ts

@@ -0,0 +1,96 @@
+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;
+    orientation?: "vertical" | "horizontal" | "horizontalReverse";
+};
+/**
+ * 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)}
+ * />
+ * ```
+ */
+declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export { Switch };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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;IAClC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,mBAAmB,CAAC;CAC/D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAqDjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/switch/index.js

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

@@ -0,0 +1,72 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import "./styles.css";
+type TabButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value" | "type"> & {
+    children: ReactNode;
+    value: string;
+};
+/**
+ * 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>
+ * ```
+ */
+declare function TabButton(props: TabButtonProps): import("react/jsx-runtime").JSX.Element;
+export { TabButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tab/tabButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,IAAI,CACxB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,MAAM,CAC9B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkCvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}