@zuzjs/ui 0.5.6 → 0.5.8

package/dist/comps/Search/index.d.ts

@@ -0,0 +1,14 @@
+import { InputProps } from '../Input';
+export type SearchProps = InputProps & {
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+    withStyle?: string;
+};
+declare const Search: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../../types").ZuzProps> & {
+    numeric?: boolean;
+} & {
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+    withStyle?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Search;

package/dist/comps/{search → Search}/index.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import Input from "../input";
-import Box from "../box";
-import Button from "../button";
-import useBase from "../useBase";
-import SVGIcons from "../svgicons";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useBase } from '../../hooks';
+import Input from '../Input';
+import Box from '../Box';
+import Button from '../Button';
+import SVGIcons from '../svgicons';
 const Search = forwardRef((props, ref) => {
     const { animate, withStyle, onChange, ...pops } = props;
     const { style } = useBase(pops);
@@ -19,7 +20,7 @@ const Search = forwardRef((props, ref) => {
         onChange?.(e.target.value);
     };
     const handleSubmit = (e) => {
-        e.preventDefault();
+        e?.preventDefault();
         if (query.trim() !== ``) {
             setQuery(``);
             onChange?.(``);
@@ -30,17 +31,6 @@ const Search = forwardRef((props, ref) => {
         // onSubmit?.(query)
     };
     useEffect(() => { }, []);
-    return _jsxs(Box, { style: style, ...{
-            className: `--search flex aic rel ${searchStyle}`.trim()
-        }, children: [_jsx(Input, { ...{
-                    ref: innerRef,
-                    onChange: handleChange,
-                    ...pops
-                } }), _jsx(Button, { ...{
-                    withLabel: false,
-                    tabIndex: -1,
-                    onClick: handleSubmit,
-                    className: `--send flex aic jcc abs`
-                }, children: query !== `` ? SVGIcons.Close : SVGIcons.Search })] });
+    return _jsxs(Box, { style: style, className: `--search flex aic rel ${searchStyle}`.trim(), children: [_jsx(Input, { ref: innerRef, onChange: handleChange, ...pops }), _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc abs`, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
 });
 export default Search;

package/dist/comps/Segmented/index.d.ts

@@ -0,0 +1,26 @@
+import { Segment } from "./types";
+import { BoxProps } from "../Box";
+/**
+ * `SelectTabs` component is a segmented control that allows switching between segments.
+ *
+ * @component
+ * @param {SegmentProps} props - Props for the segmented control component.
+ * @param {React.Ref<HTMLDivElement>} ref - Ref for the root div element.
+ * @returns {JSX.Element} The rendered segmented control.
+ *
+ * @example
+ * // Usage example
+ * const segments = [
+ *   { index: 0, label: "Home", icon: "home_icon" },
+ *   { index: 1, label: "Profile", icon: "profile_icon" },
+ *   { index: 2, label: "Settings", icon: "settings_icon" }
+ * ];
+ *
+ * <SelectTabs selected={1} items={segments} />
+ */
+declare const Segmented: import("react").ForwardRefExoticComponent<BoxProps & {
+    selected?: number;
+    onSwitch?: (segment: Segment) => void;
+    items: Segment[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Segmented;

package/dist/comps/{segmented → Segmented}/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
-import useBase from "../useBase";
-import Box from "../box";
+import { useBase } from "../../hooks";
+import Box from "../Box";
 import SegmentItem from "./item";
 /**
  * `SelectTabs` component is a segmented control that allows switching between segments.
@@ -45,13 +45,7 @@ const Segmented = forwardRef((props, ref) => {
         }
     };
     useEffect(() => { }, []);
-    return _jsxs(Box, { ref: _segmented, ...{
-            className: `${className} --segmented flex aic rel`,
-            style,
-            ...rest
-        }, children: [_jsx(Box, { ref: _tab, ...{
-                    className: `--segment-tab abs`,
-                } }), items.map((item, i) => _jsx(SegmentItem, { onSelect: handleSelect, selected: _selected == i, meta: {
+    return _jsxs(Box, { ref: _segmented, className: `${className} --segmented flex aic rel`, style: style, ...rest, children: [_jsx(Box, { ref: _tab, className: `--segment-tab abs` }), items.map((item, i) => _jsx(SegmentItem, { onSelect: handleSelect, selected: _selected == i, meta: {
                     ...item,
                     index: i
                 } }, `segment-${item.label}-${i}`))] });

package/dist/comps/Segmented/item.d.ts

@@ -0,0 +1,3 @@
+import { SegmentItemProps } from "./types";
+declare const SegmentItem: ({ onSelect, meta, selected }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+export default SegmentItem;

package/dist/comps/{segmented → Segmented}/item.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import Box from "../box";
-import Button from "../button";
+import Button from "../Button";
+import Box from "../Box";
 const SegmentItem = ({ onSelect, meta, selected }) => {
     const ref = useRef(null);
     const { index, icon, label } = meta;
@@ -15,12 +15,6 @@ const SegmentItem = ({ onSelect, meta, selected }) => {
             onSelect(index, pos.width, pos.x, meta);
         }
     }, [ref.current]);
-    return _jsxs(Button, { onClick: () => onSelect(index, pos.width, pos.x, meta), ref: ref, ...{
-            className: `--segment-item flex aic rel ${selected ? `--segement-active` : ``}`.trim(),
-        }, children: [icon && _jsx(Box, { ...{
-                    className: `--segment-icon icon-${icon}`
-                } }), _jsx(Box, { ...{
-                    className: `--segment-label`
-                }, children: label || `Item ${index}` })] });
+    return _jsxs(Button, { onClick: () => onSelect(index, pos.width, pos.x, meta), ref: ref, className: `--segment-item flex aic rel ${selected ? `--segement-active` : ``}`.trim(), children: [icon && _jsx(Box, { className: `--segment-icon icon-${icon}` }), _jsx(Box, { className: `--segment-label`, children: label || `Item ${index}` })] });
 };
 export default SegmentItem;

package/dist/comps/Segmented/types.d.ts

@@ -0,0 +1,31 @@
+import { BoxProps } from "../Box";
+/**
+ * Individual segment in the `SelectTabs` component.
+ * @typedef {Object} Segment
+ * @property {number} index - The index of the segment.
+ * @property {string} [icon] - The optional icon to display for the segment.
+ * @property {string} [label] - The optional label to display for the segment.
+ */
+export interface Segment {
+    tag?: string;
+    index: number;
+    icon?: string;
+    label?: string;
+}
+/**
+ * Props for the `SelectTabs` component.
+ * @typedef {Object} SegmentProps
+ * @extends {Props<'div'>}
+ * @property {number} [selected] - The index of the initially selected segment.
+ * @property {Segment[]} items - Array of segments to display.
+ */
+export type SegmentProps = BoxProps & {
+    selected?: number;
+    onSwitch?: (segment: Segment) => void;
+    items: Segment[];
+};
+export type SegmentItemProps = {
+    meta: Segment;
+    selected: boolean;
+    onSelect: (index: number, width: number, x: number, segment: Segment) => void;
+};

package/dist/comps/Segmented/types.js

@@ -0,0 +1 @@
+export {};

package/dist/comps/Select/index.d.ts

@@ -0,0 +1,13 @@
+import { FORMVALIDATION } from "../../types/enums";
+import { BoxProps } from "../Box";
+import { Option } from "./types";
+declare const Select: import("react").ForwardRefExoticComponent<BoxProps & {
+    required?: FORMVALIDATION;
+    options: Option[];
+    label?: string;
+    selected?: string | Option;
+    search?: boolean;
+    onChange?: (v: Option) => void;
+    searchPlaceholder?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Select;

package/dist/comps/Select/index.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import SVGIcons from "../svgicons";
+import { uuid } from "../../funs";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import Button from "../Button";
+import Text from "../Text";
+import Input from "../Input";
+import OptionItem from "./optionItem";
+const Select = forwardRef((props, ref) => {
+    const { selected, options, label, name, search: withSearch, searchPlaceholder, onChange, ...pops } = props;
+    const [value, setValue] = useState(selected ?
+        typeof selected === `string` ? options.find(fo => fo.value === selected) : selected
+        : options[0]);
+    const [choosing, setChoosing] = useState(false);
+    const [query, setQuery] = useState(null);
+    const _ref = useRef(null);
+    const _search = useRef(null);
+    const _id = useMemo(() => name || uuid(), []);
+    const { className, style, rest } = useBase(pops);
+    const updateValue = (o) => {
+        setValue(o);
+        onChange && onChange(o);
+    };
+    useEffect(() => {
+        document.body.addEventListener(`click`, (e) => {
+            setChoosing(false);
+        });
+    }, []);
+    useEffect(() => {
+        if (choosing) {
+            _search.current && _search.current.focus();
+        }
+        else {
+            if (_search.current) {
+                _search.current.value = ``;
+            }
+            setQuery(null);
+        }
+    }, [choosing]);
+    return _jsxs(Box, { className: `--select rel`, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, ref: _ref, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, style: {
+                    pointerEvents: choosing ? `auto` : `none`,
+                }, animate: {
+                    from: { y: 5, opacity: 0 },
+                    to: { y: 0, opacity: 1 },
+                    when: choosing,
+                    duration: .05
+                }, children: [withSearch && _jsx(Input, { ref: _search, onChange: (e) => {
+                            setQuery(e.target.value == `` ? null : e.target.value);
+                        }, className: `--select-search`, placeholder: searchPlaceholder || `Search...` }), (query == null ? options : options.filter((o) => {
+                        // return 
+                        // `string` == typeof o ? 
+                        // o.toLowerCase().includes(query.toLowerCase()) 
+                        // : 
+                        return o.label.toLowerCase().includes(query.toLowerCase()) || o.value.toLowerCase().includes(query.toLowerCase());
+                    }))
+                        .map((o) => _jsx(OptionItem, { updateValue: updateValue, value: value, o: o }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`))] })] });
+});
+export default Select;

package/dist/comps/Select/optionItem.d.ts

@@ -0,0 +1,3 @@
+import { OptionItemProps } from "./types";
+declare const OptionItem: ({ value, updateValue, o }: OptionItemProps) => import("react/jsx-runtime").JSX.Element;
+export default OptionItem;

package/dist/comps/Select/optionItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from "../Button";
+const OptionItem = ({ value, updateValue, o }) => {
+    return _jsx(Button, { onClick: (e) => updateValue(o), className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, children: `string` == typeof o ? o : o.label });
+};
+export default OptionItem;

package/dist/comps/Select/types.d.ts

@@ -0,0 +1,53 @@
+import { FormEventHandler } from "react";
+import { FORMVALIDATION } from "../../types/enums";
+import { BoxProps } from "../Box";
+/**
+ * Represents an option which can be either a string or an OptionObject.
+ */
+export type Option = {
+    label: string;
+    value: string;
+};
+/**
+ * Represents an option object with a label and value.
+ */
+export type Value = FormEventHandler<HTMLDivElement> & Option;
+export interface OptionItemProps {
+    updateValue: (o: Option) => void;
+    o: Option;
+    value: Option;
+}
+/**
+ * Props for the Select component.
+ */
+export type SelectProps = BoxProps & {
+    /**
+     * Indicates if the select field is required and its validation type.
+     */
+    required?: FORMVALIDATION;
+    /**
+     * Array of options to be displayed in the select dropdown.
+     */
+    options: Option[];
+    /**
+     * Label for the select field.
+     */
+    label?: string;
+    /**
+     * The currently selected option.
+     */
+    selected?: string | Option;
+    /**
+     * Enables the search functionality within the select dropdown.
+     */
+    search?: boolean;
+    /**
+     * Callback function triggered when the selected option changes.
+     * @param v - The newly selected option.
+     */
+    onChange?: (v: Option) => void;
+    /**
+     * Placeholder text for the search input field.
+     */
+    searchPlaceholder?: string;
+};

package/dist/comps/Select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/comps/{sheet.d.ts → Sheet/index.d.ts}

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
-import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
-import { BaseProps } from "../types/interfaces";
-export interface SheetProps {
+import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+import { ZuzProps } from "../../types";
+export type SheetProps = ZuzProps & {
     title?: string;
     message?: string | ReactNode;
     transition?: TRANSITIONS;
@@ -9,7 +9,7 @@ export interface SheetProps {
     speed?: Number;
     type?: SHEET;
     actionPosition?: SHEET_ACTION_POSITION;
-}
+};
 export interface SheetActionHandler {
     key?: string;
     label: string;
@@ -20,7 +20,18 @@ export interface SheetHandler {
     showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;
     dialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;
     show: (message: string | ReactNode, duration?: number, type?: SHEET) => void;
+    success: (message: string | ReactNode, duration?: number) => void;
+    error: (message: string | ReactNode, duration?: number) => void;
+    warn: (message: string | ReactNode, duration?: number) => void;
     hide: () => void;
 }
-declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & BaseProps & import("react").RefAttributes<SheetHandler>>;
+declare const Sheet: import("react").ForwardRefExoticComponent<ZuzProps & {
+    title?: string;
+    message?: string | ReactNode;
+    transition?: TRANSITIONS;
+    curve?: TRANSITION_CURVES;
+    speed?: Number;
+    type?: SHEET;
+    actionPosition?: SHEET_ACTION_POSITION;
+} & import("react").RefAttributes<SheetHandler>>;
 export default Sheet;

package/dist/comps/Sheet/index.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES } from "../../types/enums";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import { uuid } from "../../funs";
+import { animationTransition } from "../../funs/css";
+import Button from "../Button";
+import Cover from "../Cover";
+import Overlay from "../Overlay";
+let _sheetTimeout = null;
+let _sheetWobbleTimeout = null;
+const Sheet = forwardRef((props, ref) => {
+    const { title: _title, message, transition, curve, speed, type, actionPosition, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const [title, setTitle] = useState(``);
+    const [msg, setMsg] = useState(``);
+    const [action, setAction] = useState(null);
+    const [sheetType, setSheetType] = useState(type || SHEET.Default);
+    const sheetID = useMemo(() => uuid(), []);
+    const [visible, setVisible] = useState(false);
+    const innerRef = useRef(null);
+    const lastTransform = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [render, setRender] = useState(true);
+    const _render = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setLoading(mode) {
+            setLoading(mode);
+        },
+        showDialog(title, message, action, onShow) {
+            if (_sheetTimeout) {
+                clearTimeout(_sheetTimeout);
+                if (_sheetWobbleTimeout) {
+                    clearTimeout(_sheetWobbleTimeout);
+                }
+                innerRef.current.classList.remove(`--wobble`);
+                setTimeout(() => innerRef.current.classList.add(`--wobble`), 50);
+                _sheetWobbleTimeout = setTimeout(() => {
+                    innerRef.current.classList.remove(`--wobble`);
+                    _sheetWobbleTimeout = null;
+                }, 500);
+            }
+            setSheetType(SHEET.Dialog);
+            setMsg(message);
+            setTitle(title);
+            if (action)
+                setAction(action.reduce((ar, b) => {
+                    ar.push({
+                        ...b,
+                        key: b.key || uuid()
+                    });
+                    return ar;
+                }, []));
+            setVisible(true);
+            setTimeout(() => onShow ? onShow() : () => { }, 1000);
+        },
+        dialog(title, message, action, onShow) {
+            if (_sheetTimeout) {
+                clearTimeout(_sheetTimeout);
+                if (_sheetWobbleTimeout) {
+                    clearTimeout(_sheetWobbleTimeout);
+                }
+                innerRef.current.classList.remove(`--wobble`);
+                setTimeout(() => innerRef.current.classList.add(`--wobble`), 50);
+                _sheetWobbleTimeout = setTimeout(() => {
+                    innerRef.current.classList.remove(`--wobble`);
+                    _sheetWobbleTimeout = null;
+                }, 500);
+            }
+            setSheetType(SHEET.Dialog);
+            setMsg(message);
+            setTitle(title);
+            if (action)
+                setAction(action.reduce((ar, b) => {
+                    ar.push({
+                        ...b,
+                        key: b.key || uuid()
+                    });
+                    return ar;
+                }, []));
+            setVisible(true);
+            setTimeout(() => onShow ? onShow() : () => { }, 1000);
+        },
+        error(message, duration) {
+            this.show(message, duration, SHEET.Error);
+        },
+        warn(message, duration) {
+            this.show(message, duration, SHEET.Warn);
+        },
+        success(message, duration) {
+            this.show(message, duration, SHEET.Success);
+        },
+        show(message, duration, type) {
+            if (_sheetTimeout) {
+                clearTimeout(_sheetTimeout);
+                if (_sheetWobbleTimeout) {
+                    clearTimeout(_sheetWobbleTimeout);
+                }
+                // if ( lastTransform ) innerRef.current!.style.transform = _lastTransform
+                lastTransform.current = innerRef.current.style.transform;
+                innerRef.current.style.transform = ``;
+                innerRef.current.classList.remove(`--wobble`);
+                setTimeout(() => {
+                    innerRef.current.classList.add(`--wobble`);
+                    innerRef.current.style.transform = `${lastTransform.current} scale(.9)`.trim();
+                }, 50);
+                _sheetWobbleTimeout = setTimeout(() => {
+                    innerRef.current.classList.remove(`--wobble`);
+                    innerRef.current.style.transform = lastTransform.current || ``;
+                    _sheetWobbleTimeout = null;
+                }, 500);
+            }
+            _sheetTimeout = setTimeout(() => {
+                setVisible(false);
+                _sheetTimeout = null;
+                _sheetWobbleTimeout = null;
+            }, (duration || 4) * 1000);
+            setSheetType(type || SHEET.Default);
+            setMsg(message);
+            setVisible(true);
+        },
+        hide() {
+            setVisible(false);
+        }
+    }));
+    const buildAnimation = useCallback(() => {
+        const base = {
+            when: visible,
+            duration: speed || 0.3,
+            delay: 0.1,
+        };
+        if (sheetType == SHEET.Dialog) {
+            if (transition) {
+                const { from, to } = animationTransition(transition);
+                return {
+                    from: { ...from, x: `-50%`, y: `-50%` },
+                    to: { ...to, x: `-50%`, y: `-50%` },
+                    curve: curve || TRANSITION_CURVES.EaseInOut,
+                    ...base
+                };
+            }
+            return {
+                from: { scale: 0, x: `-50%`, y: `-50%`, opacity: 0 },
+                to: { scale: 1, x: `-50%`, y: `-50%`, opacity: 1 },
+                curve: TRANSITION_CURVES.Spring,
+                ...base
+            };
+        }
+        else {
+            return {
+                from: { scale: 0, x: `-50%`, y: `-10vh`, opacity: 0 },
+                to: { scale: 1, x: `-50%`, y: 0, opacity: 1 },
+                curve: TRANSITION_CURVES.Spring,
+                ...base
+            };
+        }
+    }, [visible]);
+    useEffect(() => {
+        if (_render.current)
+            clearTimeout(_render.current);
+        if (!visible) {
+            _render.current = setTimeout(() => setRender(false), 1000);
+        }
+        else {
+            setRender(true);
+        }
+    }, [visible]);
+    if (sheetType == SHEET.Dialog) {
+        return _jsxs(_Fragment, { children: [_jsx(Overlay, { when: visible }), _jsxs(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} fixed`.trim(), style: style, animate: buildAnimation(), ...rest, ref: innerRef, children: [_jsx(Cover, { when: loading }), _jsxs(Box, { className: `--head flex aic rel`, children: [_jsx(Box, { className: `--${title ? `title` : `dot`} flex aic rel`, children: title || `` }), _jsx(Button, { onClick: (e) => setVisible(false), className: `--closer abs`, children: "\u00D7" })] }), _jsx(Box, { className: `--body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? msg : null }), action && _jsx(Box, { className: `--footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`.trim(), children: action.map((a, i) => _jsx(Button, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), className: `--action`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] })] });
+    }
+    return _jsx(Box, { className: `--sheet --sheet-${sheetType.toLowerCase()} ${className} abs`.trim(), style: style, ...rest, animate: buildAnimation(), ref: innerRef, children: visible ? msg : null });
+});
+export default Sheet;

package/dist/comps/Slider/index.d.ts

@@ -0,0 +1,21 @@
+import { BoxProps } from "../Box";
+import { SLIDER } from "../../types/enums";
+export type SliderProps = BoxProps & {
+    type?: SLIDER;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    roundValue?: boolean;
+    onChange?: (value: number) => void;
+};
+declare const Slider: import("react").ForwardRefExoticComponent<BoxProps & {
+    type?: SLIDER;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    roundValue?: boolean;
+    onChange?: (value: number) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Slider;

package/dist/comps/Slider/index.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import Box from "../Box";
+import { SLIDER } from "../../types/enums";
+import { useBase } from "../../hooks";
+import Input from "../Input";
+import Text from "../Text";
+const Slider = forwardRef((props, ref) => {
+    const { type, value: _value, min: _min, max: _max, step: _step, onChange, roundValue, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const step = useRef(_step || 0.01).current;
+    const min = useRef(_min || 0).current;
+    const max = useRef(_max || 1).current;
+    const value = useRef(_value || 0).current;
+    const input = useRef(null);
+    const slider = useRef(null);
+    const knob = useRef(null);
+    const fill = useRef(null);
+    const track = useRef(null);
+    const text = useRef(null);
+    const percent = (value, min, max) => ((value - min) / (max - min)) * 100;
+    const handleInput = (e) => {
+        if (slider.current) {
+            const value = parseFloat(e.currentTarget.value);
+            const percentage = percent(value, parseFloat(e.currentTarget.min), parseFloat(e.currentTarget.max));
+            slider.current.style.setProperty(`--value`, `${percentage}`);
+            slider.current.setAttribute(`data-value`, `${value}`);
+            onChange && onChange(roundValue ? +value.toFixed(2) : value);
+        }
+    };
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const [startValue, setStartValue] = useState(0);
+    const handleMouseDown = (e) => {
+        setIsDragging(true);
+        setStartX(e.clientX);
+        setStartValue(slider.current ? parseFloat(slider.current.getAttribute(`data-value`)) : 0);
+        document.body.style.cursor = `ew-resize`;
+    };
+    const handleMouseMove = (e) => {
+        if (isDragging) {
+            const deltaX = e.clientX - startX;
+            const newValue = Math.max(min, Math.min(startValue + deltaX * step, max)); // Adjust sensitivity as needed
+            if (slider.current) {
+                slider.current.setAttribute(`data-value`, `${newValue}`);
+                text.current.textContent = roundValue ? newValue.toFixed(2) : newValue.toString();
+                onChange && onChange(roundValue ? +newValue.toFixed(2) : newValue);
+            }
+        }
+    };
+    const handleMouseUp = () => {
+        setIsDragging(false);
+        document.body.style.cursor = `auto`;
+    };
+    useEffect(() => {
+        if (slider.current) {
+            slider.current
+                .style
+                .setProperty(`--value`, input.current ?
+                `${percent(parseFloat(input.current.value), parseFloat(input.current.min), parseFloat(input.current.max))}`
+                : value.toString());
+        }
+    }, []);
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+        else {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging]);
+    return _jsx(Box, { ref: slider, "data-value": value || 0, className: `--slider --${type || SLIDER.Default} flex rel ${className}`.trim(), style: { ...style }, children: SLIDER.Text === type ? _jsx(_Fragment, { children: _jsx(Text, { ref: text, onMouseDown: handleMouseDown, className: `--slider-text`, children: value || 0 }) }) : _jsxs(_Fragment, { children: [_jsx(Box, { ref: track, className: `--slider-track abs fill` }), _jsx(Box, { ref: knob, className: `--slider-knob abs` }), _jsx(Input, { ref: input, onInput: handleInput, className: `abs fill`, tabIndex: 0, type: type || SLIDER.Default, defaultValue: value || 0, step: step, max: max, min: min })] }) });
+});
+export default Slider;

package/dist/comps/Span/index.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type SpanProps = Props<`span`> & {};
+declare const Span: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof import("../../types").ZuzProps> & import("react").RefAttributes<HTMLSpanElement>>;
+export default Span;

package/dist/comps/Span/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const Span = forwardRef((props, ref) => {
+    const { style, ...pops } = props;
+    const { style: _style, className, rest } = useBase(pops);
+    return _jsx("span", { ref: ref, style: style, className: className, ...rest });
+});
+export default Span;