@zuzjs/ui 0.5.5 → 0.5.6

package/dist/bin.js

@@ -10,7 +10,13 @@ program
     .option(`-d, --debug`)
     .option(`-v, --version`)
     .option(`-root, --root <char>`)
-    .option(`-f, --file <char>`);
+    .option(`-f, --file <char>`)
+    .option(`-lx, --lexer`)
+    .option(`-cx, --classes`)
+    .option(`-ch, --cache`)
+    .option(`-cl, --cleaned`)
+    .option(`-sh, --sheet`)
+    .option(`-mq, --media`);
 program.parse();
 const options = program.opts();
 // extendGlobals()
@@ -92,7 +98,7 @@ const rebuild = (f) => {
 };
 const rebuildAll = () => {
     console.log(pc.gray(`○ Building Zuz CSS`));
-    const cssBuilder = new CSS();
+    const cssBuilder = new CSS({}, options);
     const files = getAllFiles(process.cwd(), `.jsx`);
     if (files.length > 0) {
         const as = [];

package/dist/comps/accordion.js

@@ -1,13 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import With from "./base";
-const Icons = {
-    ArrowDown: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: _jsx("path", { fill: "#292D32", d: "M17.919 8.18H6.079c-.96 0-1.44 1.16-.76 1.84l5.18 5.18c.83.83 2.18.83 3.01 0l1.97-1.97 3.21-3.21c.67-.68.19-1.84-.77-1.84z" }) }),
-    ArrowUp: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: _jsx("path", { fill: "#292D32", d: "M18.68 13.978l-3.21-3.21-1.96-1.97a2.13 2.13 0 00-3.01 0l-5.18 5.18c-.68.68-.19 1.84.76 1.84h11.84c.96 0 1.44-1.16.76-1.84z" }) })
-};
+import SVGIcons from "./svgicons";
 const Accordion = forwardRef((props, ref) => {
     const { title, message, ...rest } = props;
     const [visible, setVisible] = useState(false);
-    return _jsxs(With, { className: `--accordion flex cols`, ...rest, children: [_jsxs(With, { onClick: (e) => setVisible(!visible), tag: `button`, className: `--toggle flex aic ${visible ? `--open` : ``}`.trim(), children: [_jsx(With, { tag: `h1`, className: `--label flex`, children: title }), _jsx(With, { className: `--arrow flex`, children: visible ? Icons.ArrowUp : Icons.ArrowDown })] }), visible && _jsx(With, { className: `--detail`, children: message })] });
+    return _jsxs(With, { className: `--accordion flex cols`, ...rest, children: [_jsxs(With, { onClick: (e) => setVisible(!visible), tag: `button`, className: `--toggle flex aic ${visible ? `--open` : ``}`.trim(), children: [_jsx(With, { tag: `h1`, className: `--label flex`, children: title }), _jsx(With, { className: `--arrow flex`, children: visible ? SVGIcons.ArrowUp : SVGIcons.ArrowDown })] }), visible && _jsx(With, { className: `--detail`, children: message })] });
 });
 export default Accordion;

package/dist/comps/box.d.ts

@@ -1,3 +1,6 @@
 import { Props } from "./useBase/base.types";
-declare const Box: import("react").ForwardRefExoticComponent<Props<"div"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface BoxProps extends Props<'div'> {
+    name?: string;
+}
+declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Box;

package/dist/comps/box.js

@@ -2,14 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import useBase from "./useBase";
 const Box = forwardRef((props, ref) => {
-    const { className, style, rest } = useBase(props);
-    return _jsx("div", { ref: ref, className: className, style: style, ...rest });
+    const { style, ...pops } = props;
+    const { className, style: _style, rest } = useBase(pops);
+    return _jsx("div", { ref: ref, className: className, style: {
+            ..._style,
+            ...(style || {})
+        }, ...rest });
 });
-// export interface BoxProps extends Props<'div'> {}
-// const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref ) => {
-//     const { as, children, className, ...rest } = props
-//     return <With className={className} as={as} {...rest} ref={ref}>
-//         {children}
-//     </With>
-// });
 export default Box;

package/dist/comps/button.d.ts

@@ -1,6 +1,7 @@
 import { Props } from "./useBase/base.types";
 export interface ButtonProps extends Props<`button`> {
     icon?: string;
+    withLabel?: boolean;
 }
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/comps/button.js

@@ -3,9 +3,11 @@ import { forwardRef } from "react";
 // import With, { Props } from "./base";
 import useBase from "./useBase";
 const Button = forwardRef((props, ref) => {
-    const { icon, children, ...pops } = props;
+    const { icon, children, withLabel, ...pops } = props;
     const { className, style, rest } = useBase(pops);
-    return _jsxs("button", { className: `${className} flex aic ${icon ? `ico-btn` : ``}`, style: style, ref: ref, ...rest, children: [icon && _jsx("div", { ...{ className: `icon-${icon}` } }), _jsx("span", { ...{ className: `b-label` }, children: children })] });
+    return _jsxs("button", { className: `${className} flex aic ${icon ? `ico-btn` : ``}`, style: style, ref: ref, ...rest, children: [icon && _jsx("div", { ...{ className: `icon-${icon}` } }), undefined == withLabel || withLabel == true ?
+                _jsx("span", { ...{ className: `b-label` }, children: children })
+                : children] });
 });
 // const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref ) => {
 //     const { as, icon, ...rest } = props;

package/dist/comps/form.d.ts

@@ -18,6 +18,8 @@ export interface FormProps extends Props<`div`> {
     spinner?: SpinnerProps;
     /** Additional data to include with form submission */
     withData?: dynamicObject;
+    /** Handler function called before form submission with validated form data */
+    beforeSubmit?: (data: FormData | dynamicObject) => void;
     /** Handler function called on form submission with validated form data */
     onSubmit?: (data: FormData | dynamicObject) => void;
     /** Callback triggered upon successful form submission */
@@ -40,6 +42,8 @@ export interface FormHandler {
     setLoading: (mode: boolean) => void;
     /** Hides any currently displayed error message */
     hideError: () => void;
+    /** Resets the form to its initial state */
+    init: () => void;
 }
 /**
  * {@link Form} is a controlled component designed to handle form data submission, validation, and display of loading or error states.

package/dist/comps/form.js

@@ -16,7 +16,7 @@ import { isEmail, withPost } from "../funs";
  * @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 { name, cover, spinner, errors, action, children, withData, onSubmit, onError, onSuccess, ...pops } = 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 sheet = useRef(null);
@@ -30,6 +30,21 @@ const Form = forwardRef((props, ref) => {
             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.
      *
@@ -37,13 +52,20 @@ const Form = forwardRef((props, ref) => {
      * @returns Whether the element meets the required validation criteria.
      */
     const _validate = useCallback((el) => {
-        if (el.required) {
+        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;
             }
@@ -102,26 +124,41 @@ const Form = forwardRef((props, ref) => {
         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...`,
@@ -139,6 +176,7 @@ const Form = forwardRef((props, ref) => {
         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 || {}) })
@@ -147,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);
@@ -190,6 +230,9 @@ const Form = forwardRef((props, ref) => {
         },
         hideError() {
             sheet.current.hide();
+        },
+        init() {
+            _init();
         }
     }));
     useEffect(_init, []);

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,23 +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
+    });
 });
-// import { Ref } from "react"
-// import { css, cleanProps } from "../funs";
-// import { UIProps } from "../types/interfaces";
-// const Heading = ( props: UIProps<HTMLHeadingElement> ) => {
-//     const { children, ref, h, html } = props
-//     let Tag : string = `h${h || 1}`;
-//     const HeadingTag = Tag as `h1` | `h2` | `h3` | `h4` | `h5` | `h6`
-//     const { cx } = css.Build(props.as)
-//     return <HeadingTag 
-//         ref={ref} 
-//         className={cx.join(` `)}
-//         {...(cleanProps(props) as UIProps<HTMLHeadingElement>)}>{props.html ? <span { ...({dangerouslySetInnerHTML:{ __html: html }}) as UIProps<HTMLSpanElement>} />  : children}</HeadingTag>
-// }
 export default Heading;

package/dist/comps/icon.d.ts

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

package/dist/comps/icon.js

@@ -3,14 +3,17 @@ import { forwardRef } from "react";
 // import With, { Props } from "./base";
 import Box from "./box";
 import useBase from "./useBase";
+import Span from "./span";
 const Icon = forwardRef((props, ref) => {
-    const { name, ...pops } = props;
+    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} 

package/dist/comps/input.d.ts

@@ -1,3 +1,6 @@
 import { Props } from "./useBase/base.types";
-declare const Input: import("react").ForwardRefExoticComponent<Props<"input"> & import("react").RefAttributes<HTMLInputElement>>;
+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, useRef } from "react";
+import { forwardRef, useEffect } from "react";
 import useBase from "./useBase";
 const Input = forwardRef((props, ref) => {
-    const _innerRef = useRef(null);
-    const { className, style, rest } = useBase(props);
-    return _jsx("input", { className: className, style: style, ref: _innerRef, ...rest });
+    /**
+     * @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/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;

package/dist/comps/segmented/index.js

@@ -0,0 +1,59 @@
+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 SegmentItem from "./item";
+/**
+ * `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} />
+ */
+const Segmented = forwardRef((props, ref) => {
+    const { animate, items, selected, onSwitch, ...pops } = props;
+    const [_selected, setSelected] = useState(selected || 0);
+    const { className, style, rest } = useBase(pops);
+    const _tab = useRef(null);
+    const _segmented = useRef(null);
+    /**
+     * Handles selection of a segment.
+     *
+     * @param {number} index - The index of the selected segment.
+     * @param {number} width - The width of the selected segment.
+     * @param {number} x - The x-coordinate of the selected segment.
+     */
+    const handleSelect = (index, width, x, meta) => {
+        setSelected(index);
+        if (_tab.current) {
+            const _sp = _segmented.current?.getBoundingClientRect();
+            _tab.current.style.setProperty(`--w`, `${width}px`);
+            _tab.current.style.setProperty(`--x`, `${_sp ? x - _sp.left : x}px`);
+            if (onSwitch)
+                onSwitch(meta);
+        }
+    };
+    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: {
+                    ...item,
+                    index: i
+                } }, `segment-${item.label}-${i}`))] });
+});
+export default Segmented;

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

@@ -0,0 +1,8 @@
+import { Segment } from ".";
+interface SegmentItemProps {
+    meta: Segment;
+    selected: boolean;
+    onSelect: (index: number, width: number, x: number, segment: Segment) => void;
+}
+declare const SegmentItem: ({ onSelect, meta, selected }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+export default SegmentItem;

package/dist/comps/segmented/item.js

@@ -0,0 +1,26 @@
+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";
+const SegmentItem = ({ onSelect, meta, selected }) => {
+    const ref = useRef(null);
+    const { index, icon, label } = meta;
+    const [pos, setPos] = useState({ x: 0, width: 0 });
+    useEffect(() => {
+        if (ref.current) {
+            const { width, x } = ref.current.getBoundingClientRect();
+            setPos({ x, width });
+        }
+        if (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}` })] });
+};
+export default SegmentItem;