@zuzjs/ui 0.5.4 → 0.5.6

package/dist/comps/form.js

@@ -1,30 +1,81 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useTransition } from "react";
-import With from "./base";
-import { isEmail, withPost } from "../funs";
+import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import Box from "./box";
+import useBase from "./useBase";
 import Sheet from "./sheet";
-import { FORMVALIDATION, SHEET } from "../types/enums";
 import Cover from "./cover";
+import { FORMVALIDATION, SHEET } from "../types/enums";
+import { isEmail, withPost } from "../funs";
+/**
+ * {@link Form} is a controlled component designed to handle form data submission, validation, and display of loading or error states.
+ * It allows for optional server-side submission through an action endpoint and customizable success/error handling callbacks.
+ *
+ * The component also provides an interface for controlling loading and error states from a parent component using {@link FormHandler}.
+ *
+ * @param props - Properties to configure form behavior, validation messages, submission handling, and visual feedback.
+ * @param ref - Reference to the {@link FormHandler} interface, exposing methods to control loading and error states from the parent.
+ */
 const Form = forwardRef((props, ref) => {
-    const { as, spinner, action, errors, cover, children, withData, onSuccess, onSubmit, onError, ...rest } = props;
+    const { name, cover, spinner, errors, action, children, withData, beforeSubmit, onSubmit, onError, onSuccess, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
     const [loading, setLoading] = useState(false);
-    const [isLoading, startTransition] = useTransition();
-    const [sheetType, setSheetType] = useState(SHEET.Default);
     const sheet = useRef(null);
-    const _ref = useRef(null);
-    const _nodes = (query) => _ref.current.querySelectorAll(query);
-    const _validate = (el) => {
-        if (el.required) {
+    const innerRef = useRef(null);
+    /**
+     * Utility function to select multiple DOM elements within the form based on a CSS query.
+     * @param query - CSS selector to match elements inside the form.
+     */
+    const _nodes = useCallback((query) => {
+        if (innerRef.current)
+            return innerRef.current.querySelectorAll(query);
+        return [];
+    }, [innerRef.current]);
+    const _getFields = (el) => {
+        return {
+            name: el.name || el.getAttribute(`name`) || el.getAttribute(`data-name`),
+            required: el.required ? true
+                : el.getAttribute(`data-required`) ? el.getAttribute(`data-required`) == `true` : false,
+            with: el.with || el.getAttribute(`with`)
+        };
+    };
+    const _getPinValue = (el) => {
+        const _pin = [];
+        el.querySelectorAll(`.--input`).forEach((input) => {
+            _pin.push(input.value);
+        });
+        return _pin.join('');
+    };
+    /**
+     * Validates form fields based on their type and custom attributes.
+     *
+     * @param el - The element to validate.
+     * @returns Whether the element meets the required validation criteria.
+     */
+    const _validate = useCallback((el) => {
+        const { name: _name, required: _required, with: _with } = _getFields(el);
+        if (_required) {
+            /**
+             * @internal
+             * Required field validation */
             if (el.type == `checkbox` && el.checked == false) {
                 return false;
             }
+            if (el.classList.contains(`--otp`)) {
+                const _pin = _getPinValue(el);
+                if (_pin == `` || _pin.length < parseInt(el.getAttribute(`data-size`))) {
+                    return false;
+                }
+            }
             if (el.classList.contains(`--select`) && el.dataset.value == `-1`) {
                 return false;
             }
             if (el.value == ``)
                 return false;
         }
+        /**
+         * @internal
+         * Additional validation based on `with` attribute
+         */
         if (el.getAttribute(`with`)) {
             let _with = el.getAttribute(`with`);
             if (_with.includes(`@`)) {
@@ -50,7 +101,7 @@ const Form = forwardRef((props, ref) => {
                     const _el = document.querySelector(`[name=${field.trim()}]`);
                     if (!_el)
                         return false;
-                    console.log(`matching`, _el.name, _el.value, el.name, el.value);
+                    // console.log(`matching`, _el.name, _el.value, el.name, el.value)                    
                     if (_el && _el.value != el.value) {
                         return false;
                     }
@@ -60,47 +111,72 @@ const Form = forwardRef((props, ref) => {
             }
         }
         return true;
-    };
-    const _buildFormData = () => {
+    }, [innerRef.current]);
+    /**
+     * Constructs the form data and validates the fields.
+     *
+     * @returns Form data object along with validation status and error information.
+     */
+    const _buildFormData = useCallback(() => {
         const data = {};
         const payload = {};
         let _error = null;
         let _errorMsg = null;
         Array.from(_nodes(`[name]`))
             .forEach((el) => {
+            const { name: _name, required: _required, with: _with } = _getFields(el);
             let valid = true;
-            if (el.required || el.with)
+            if (_required || _with)
                 valid = _validate(el);
-            data[el.name] = {
+            data[_name] = {
                 valid: valid,
-                value: el.classList.contains(`--select`) ? el.dataset.value : el.value
+                value: el.classList.contains(`--otp`) ? _getPinValue(el)
+                    : el.classList.contains(`--select`) ? el.dataset.value : el.value
             };
-            payload[el.name] = el.classList.contains(`--select`) ? el.dataset.value : el.value;
+            payload[_name] = el.classList.contains(`--otp`) ? _getPinValue(el)
+                : el.classList.contains(`--select`) ? el.dataset.value : el.value;
             if (!valid) {
                 if (_error == null && errors) {
                     _error = el;
-                    _errorMsg = errors[el.name];
+                    _errorMsg = errors[_name];
                 }
                 el.classList.add(`input-with-error`);
             }
             else
                 el.classList.remove(`input-with-error`);
         });
-        if (_error)
-            _error.focus();
+        if (_error) {
+            const _nxt = _error;
+            if (_nxt.classList.contains(`--otp`)) {
+                for (const i of Array.from(_nxt.querySelectorAll(`.--input`))) {
+                    const input = i;
+                    if (input.value == ``) {
+                        input.focus();
+                        break;
+                    }
+                }
+            }
+            else
+                _nxt.focus();
+        }
         return {
             error: _error != null,
             errorMsg: _errorMsg || `Fix errors to continue...`,
             data, payload
         };
-    };
-    const _onSubmit = () => {
+    }, [innerRef.current]);
+    /**
+     * Handler for form submission that validates and processes the form data.
+     */
+    const _onSubmit = useCallback(() => {
         const { error, errorMsg, payload } = _buildFormData();
         if (error) {
             sheet.current.show(errorMsg, 4, SHEET.Error);
         }
         else if (action) {
+            // If `action` is defined, submit the form data to the specified endpoint
             startTransition(async () => {
+                beforeSubmit && beforeSubmit(payload);
                 setLoading(true);
                 sheet.current.hide();
                 withPost(action, { ...payload, ...(withData || {}) })
@@ -109,11 +185,13 @@ const Form = forwardRef((props, ref) => {
                     setLoading(false);
                     if (onSuccess)
                         onSuccess(resp);
-                    else
+                    else {
                         sheet.current.hide();
-                    sheet.current.show(resp.message || `Redirecting..`, 4, SHEET.Success);
+                        sheet.current.show(resp.message || `Redirecting..`, 4, SHEET.Success);
+                    }
                 })
                     .catch(err => {
+                    console.warn(`Error occurred while submitting form`, err);
                     setLoading(false);
                     if (onError)
                         onError(err);
@@ -125,18 +203,21 @@ const Form = forwardRef((props, ref) => {
         else {
             onSubmit && onSubmit(payload);
         }
-    };
-    const _init = () => {
+    }, [action, sheet.current, innerRef.current]);
+    /**
+     * Initializes the form by adding click event listeners to submit buttons.
+     */
+    const _init = useCallback(() => {
         const _submit = _nodes(`[type=submit]`);
         if (!_submit || _submit.length == 0) {
-            console.error(`You should add at least 1 button with type=\`SUBMIT\``);
+            console.warn(`You should add at least 1 button with type=\`SUBMIT\``);
         }
         else {
             _submit.forEach(el => {
                 el.addEventListener(`click`, _onSubmit);
             });
         }
-    };
+    }, [innerRef.current]);
     useImperativeHandle(ref, () => ({
         setLoading(mod) {
             if (mod) {
@@ -149,9 +230,17 @@ const Form = forwardRef((props, ref) => {
         },
         hideError() {
             sheet.current.hide();
+        },
+        init() {
+            _init();
         }
     }));
     useEffect(_init, []);
-    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet, as: `toast-form` }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
+    return _jsxs(Box, { ...{
+            className: `${className} rel --form${name ? `-${name.replace(/\s+/g, `-`)}` : ``}`,
+            style,
+            propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`],
+            ...rest
+        }, ref: innerRef, children: [_jsx(Sheet, { ref: sheet, as: `toast-form` }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
 });
 export default Form;

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

@@ -0,0 +1,10 @@
+import { Props } from "../useBase/base.types";
+export declare enum GRID {
+    Default = 0
+}
+declare const Grid: import("react").ForwardRefExoticComponent<Props<"div"> & {
+    rows?: number;
+    cols?: number;
+    gap?: number;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Grid;

package/dist/comps/grid/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../box";
+import useBase from "../useBase";
+export var GRID;
+(function (GRID) {
+    GRID[GRID["Default"] = 0] = "Default";
+})(GRID || (GRID = {}));
+const Grid = forwardRef((props, ref) => {
+    const { animate, children, rows, cols, gap, ...pops } = props;
+    const { className, style } = useBase(props);
+    return _jsx(Box, { style: style, ...{
+            className: `--grid grid ${className}`.trim()
+        }, children: children });
+});
+export default Grid;

package/dist/comps/heading.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from "react";
-import { BaseProps } from "../types/interfaces";
-declare const Heading: import("react").ForwardRefExoticComponent<{
+import { Props } from "./useBase/base.types";
+export interface HeadingProps extends Props<"h1" | "h2" | "h3" | "h4" | "h5" | "h6"> {
     h?: number | string;
     html?: ReactNode | string;
-} & BaseProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}
+declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export default Heading;

package/dist/comps/heading.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import With from "./base";
+import { createElement, forwardRef } from "react";
+import useBase from "./useBase";
 const Heading = forwardRef((props, ref) => {
-    const { as, h, html, ...rest } = props;
-    return _jsx(With, { tag: `h${h || 1}`, as: as, ref: ref, ...rest, children: props.children ?
-            props.html ? _jsx("span", { ...({ dangerouslySetInnerHTML: { __html: html } }) }) : props.children
-            : null });
+    const { h, html, children, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const Tag = `h${h || 1}`;
+    return createElement(Tag, {
+        ref,
+        style,
+        className,
+        ...rest,
+        children: html ? _jsx("span", { ...{ dangerouslySetInnerHTML: { __html: html } } }) : children
+    });
 });
 export default Heading;

package/dist/comps/icon.d.ts

@@ -1,7 +1,7 @@
-import { animationProps } from "./base";
-declare const Icon: import("react").ForwardRefExoticComponent<{
+import { Props } from "./useBase/base.types";
+export interface IconProps extends Props<`div`> {
     name: string;
-    as?: string;
-    animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    pathCount?: number;
+}
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Icon;

package/dist/comps/icon.js

@@ -1,8 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import With from "./base";
+// import With, { Props } from "./base";
+import Box from "./box";
+import useBase from "./useBase";
+import Span from "./span";
 const Icon = forwardRef((props, ref) => {
-    const { as, name, ...rest } = props;
-    return _jsx(With, { className: `icon-${name}`, as: as, ...rest, ref: ref });
+    const { name, pathCount, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsx(Box, { ...{
+            className: `${className} icon-${name}`,
+            style,
+            ...rest
+        }, children: Array(pathCount || 0).fill(0).map((p, i) => _jsx(Span, { ...{
+                className: `path${i + 1}`
+            } }, `${name}-layer-${i}`)) });
+    // return <With 
+    //     className={`icon-${name}`}
+    //     as={as} 
+    //     {...rest} 
+    //     ref={ref} />
 });
 export default Icon;

package/dist/comps/image.d.ts

@@ -1,5 +1,5 @@
-import { animationProps } from "./base";
 import React from "react";
+import { animationProps } from "../types/interfaces";
 interface ImageProps {
     width: string | number;
     height: string | number;

package/dist/comps/input.d.ts

@@ -1,9 +1,6 @@
-import { animationProps } from "./base";
-import { FORMVALIDATION } from "../types/enums";
-declare const Input: import("react").ForwardRefExoticComponent<{
-    required?: FORMVALIDATION;
-    textarea?: any;
-    as?: string;
-    animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+import { Props } from "./useBase/base.types";
+export interface InputProps extends Props<`input`> {
+    numeric?: boolean;
+}
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/comps/input.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import With from "./base";
+import { forwardRef, useEffect } from "react";
+import useBase from "./useBase";
 const Input = forwardRef((props, ref) => {
-    const { as, textarea, value, ...rest } = props;
-    return textarea ? _jsx(With, { tag: `textarea`, as: as, ...rest, value: value, ref: ref })
-        : _jsx(With, { tag: `input`, as: as, value: value, ...rest, ref: ref });
+    /**
+     * @internal
+     * const _innerRef = useRef<HTMLInputElement>(null)
+     */
+    const { numeric, ...pops } = props;
+    const handleInput = (event) => {
+        if (numeric) {
+            event.currentTarget.value = event.currentTarget.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
+        }
+    };
+    const { className, style, rest } = useBase(pops);
+    useEffect(() => { }, []);
+    return _jsx("input", { className: `${className} --input`, style: style, ref: ref, onInput: handleInput, ...rest });
 });
 export default Input;

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

@@ -0,0 +1,6 @@
+import { Props } from "../useBase/base.types";
+declare const OTP: import("react").ForwardRefExoticComponent<Props<"input"> & {
+    mask?: boolean;
+    size?: number;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default OTP;

package/dist/comps/otp/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import Input from "../input";
+import Box from "../box";
+import useBase from "../useBase";
+const OTP = forwardRef((props, ref) => {
+    const { animate, size, mask, ...pops } = props;
+    const { style } = useBase(props);
+    const inputs = useRef([]);
+    let name = `pinput`;
+    let required = false;
+    if (`type` in pops) {
+        delete pops.type;
+    }
+    if (`name` in pops) {
+        name = pops.name;
+        delete pops.name;
+    }
+    if (`required` in pops) {
+        required = true;
+        delete pops.required;
+    }
+    const handleInput = (event) => {
+        const input = event.currentTarget;
+        const nextInput = inputs.current[parseInt(input.dataset.index) + 1];
+        const prevInput = inputs.current[parseInt(input.dataset.index) - 1];
+        if (input.value.length === 1 && nextInput) {
+            nextInput.focus();
+        }
+        else if (input.value.length === 0 && prevInput) {
+            prevInput.focus();
+        }
+    };
+    useEffect(() => {
+        inputs.current = inputs.current.slice(0, size);
+    }, [size]);
+    return _jsx(Box, { ...{ name }, "data-required": required, "data-size": size || 4, style: style, ...{
+            className: `--otp flex aic rel`
+        }, children: Array(size || 4).fill(1).map((a, i) => _jsx(Input, { "data-index": i, ref: (el) => {
+                inputs.current[i] = el;
+            }, ...{
+                numeric: true,
+                onChange: handleInput,
+                maxLength: 1,
+                placeholder: `0`,
+                type: mask ? `password` : 'text',
+                ...pops
+            } }, `pin-${i}`)) });
+});
+export default OTP;

package/dist/comps/password.d.ts

@@ -0,0 +1,3 @@
+import { Props } from "./useBase/base.types";
+declare const Password: import("react").ForwardRefExoticComponent<Omit<Props<"input">, "type"> & import("react").RefAttributes<HTMLInputElement>>;
+export default Password;

package/dist/comps/password.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import Input from "./input";
+import Box from "./box";
+import Button from "./button";
+import useBase from "./useBase";
+const Icons = {
+    on: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#333", d: "M12 20.5c-4.299 0-8.24-3.023-10.544-8.086a1 1 0 010-.828C3.759 6.523 7.701 3.5 12 3.5s8.24 3.023 10.544 8.086a1.001 1.001 0 010 .828 18.14 18.14 0 01-1.391 2.52 1 1 0 11-1.666-1.106A15.87 15.87 0 0020.529 12C18.543 7.92 15.379 5.5 12 5.5S5.457 7.92 3.471 12c1.986 4.08 5.15 6.5 8.529 6.5a7.964 7.964 0 005.036-1.92 1 1 0 111.265 1.55A9.94 9.94 0 0112 20.5z" }), _jsx("path", { fill: "#333", d: "M12 16a4.004 4.004 0 01-3.929-4.756 1 1 0 011.965.375A2 2 0 1014 12a2.034 2.034 0 00-2.053-1.999 1.04 1.04 0 01-1.043-.947.963.963 0 01.902-1.05L12 8a4 4 0 010 8z" })] }),
+    off: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#333", d: "M12 15c-4.132 0-7.98-1.214-10.294-3.249a1 1 0 111.32-1.502C4.986 11.972 8.34 13 12 13s7.014-1.028 8.974-2.751a1 1 0 111.32 1.502C19.98 13.786 16.132 15 12 15z" }), _jsx("path", { fill: "#333", d: "M12 18a1 1 0 01-1-1v-3a1 1 0 012 0v3a1 1 0 01-1 1zM7.749 17.667a.964.964 0 01-.17-.014 1 1 0 01-.817-1.155l.505-2.935a1 1 0 111.97.339l-.504 2.935a1 1 0 01-.984.83zM3.636 16.306a1.001 1.001 0 01-.942-1.336l.978-2.745a1 1 0 111.884.672l-.978 2.745a1 1 0 01-.942.664zM16.251 17.667a1 1 0 01-.984-.83l-.505-2.935a1 1 0 011.97-.339l.506 2.935a1 1 0 01-.816 1.155.964.964 0 01-.17.014zM20.364 16.306a1 1 0 01-.942-.664l-.978-2.745a1 1 0 111.884-.672l.978 2.745a1.001 1.001 0 01-.942 1.336z" })] })
+};
+const Password = forwardRef((props, ref) => {
+    const [visible, setVisible] = useState(false);
+    const { animate, ...pops } = props;
+    const { style } = useBase(props);
+    if (`type` in props) {
+        delete props[`type`];
+    }
+    return _jsxs(Box, { style: style, ...{
+            className: `--password flex aic rel`
+        }, children: [_jsx(Input, { ...{
+                    ref,
+                    type: visible ? 'text' : 'password',
+                    ...pops
+                } }), _jsx(Button, { ...{
+                    tabIndex: -1,
+                    onClick: e => setVisible(prev => !prev),
+                    className: `--toggle flex aic jcc abs`
+                }, children: visible ? Icons.on : Icons.off })] });
+});
+export default Password;

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

@@ -0,0 +1,7 @@
+import { Props } from "../useBase/base.types";
+declare const Search: import("react").ForwardRefExoticComponent<Props<"input"> & {
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+    withStyle?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Search;

package/dist/comps/search/index.js

@@ -0,0 +1,46 @@
+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";
+const Search = forwardRef((props, ref) => {
+    const { animate, withStyle, onChange, ...pops } = props;
+    const { style } = useBase(pops);
+    const { className: searchStyle } = useBase({ as: withStyle || `` });
+    const [query, setQuery] = useState(``);
+    const innerRef = useRef(null);
+    if (`type` in props) {
+        delete props[`type`];
+    }
+    const handleChange = (e) => {
+        setQuery(e.target.value);
+        onChange?.(e.target.value);
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (query.trim() !== ``) {
+            setQuery(``);
+            onChange?.(``);
+            if (innerRef.current) {
+                innerRef.current.value = ``;
+            }
+        }
+        // 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 })] });
+});
+export default Search;

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

@@ -0,0 +1,46 @@
+import { Props } from "../useBase/base.types";
+/**
+ * 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 interface SegmentProps extends Props<`div`> {
+    selected?: number;
+    onSwitch?: (segment: Segment) => void;
+    items: Segment[];
+}
+/**
+ * `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<SegmentProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Segmented;