@zuzjs/ui 0.5.6 → 0.5.7

package/dist/comps/{form.js → Form/index.js}

@@ -1,11 +1,12 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
-import Box from "./box";
-import useBase from "./useBase";
-import Sheet from "./sheet";
-import Cover from "./cover";
-import { FORMVALIDATION, SHEET } from "../types/enums";
-import { isEmail, withPost } from "../funs";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import Sheet from "../Sheet";
+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.
@@ -19,8 +20,8 @@ const Form = forwardRef((props, ref) => {
     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);
     const innerRef = useRef(null);
+    const sheet = 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.
@@ -187,7 +188,7 @@ const Form = forwardRef((props, ref) => {
                         onSuccess(resp);
                     else {
                         sheet.current.hide();
-                        sheet.current.show(resp.message || `Redirecting..`, 4, SHEET.Success);
+                        sheet.current.success(resp.message || `Redirecting..`);
                     }
                 })
                     .catch(err => {
@@ -226,7 +227,7 @@ const Form = forwardRef((props, ref) => {
             setLoading(mod);
         },
         showError(errorMsg) {
-            sheet.current.show(errorMsg, 4, SHEET.Error);
+            sheet.current.error(errorMsg, 4);
         },
         hideError() {
             sheet.current.hide();
@@ -236,11 +237,6 @@ const Form = forwardRef((props, ref) => {
         }
     }));
     useEffect(_init, []);
-    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] });
+    return _jsxs(Box, { ref: innerRef, style: style, className: `--form rel ${className} --form${name ? `-${name.replace(/\s+/g, `-`)}` : ``}`, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], children: [_jsx(Sheet, { ref: sheet, as: `--sheet-form` }), _jsx(Cover, { message: cover ? cover.message || undefined : `working`, spinner: spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff`, when: loading }), children] });
 });
 export default Form;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+export type IconProps = Omit<BoxProps, `name`> & {
+    name: string | ReactNode;
+    pathCount?: number;
+};
+declare const Icon: import("react").ForwardRefExoticComponent<Omit<BoxProps, "name"> & {
+    name: string | ReactNode;
+    pathCount?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Icon;

package/dist/comps/Icon/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useBase } from "../../hooks";
+import Span from "../Span";
+const Icon = forwardRef((props, ref) => {
+    const { name, pathCount, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsx("div", { style: style, className: `icon-${name} ${className}`.trim(), ref: ref, ...rest, children: Array(pathCount || 0).fill(0).map((p, i) => _jsx(Span, { className: `path${i + 1}` }, `${name}-layer-${i}`)) });
+});
+export default Icon;

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

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type ImageProps = Props<`img`> & {};
+declare const Image: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, keyof import("../../types").ZuzProps> & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

package/dist/comps/Image/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const Image = forwardRef((props, ref) => {
+    const { style, className, rest } = useBase(props);
+    return _jsx("img", { ref: ref, style: style, className: `${className} flex`, ...rest });
+});
+export default Image;

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

@@ -0,0 +1,8 @@
+import { Props } from '../../types';
+export type InputProps = Props<`input`> & {
+    numeric?: boolean;
+};
+declare const Input: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../../types").ZuzProps> & {
+    numeric?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/comps/Input/index.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const Input = forwardRef((props, ref) => {
+    const { numeric, ...pops } = props;
+    const { style, className, rest } = useBase(pops);
+    const handleInput = (event) => {
+        if (numeric) {
+            event.currentTarget.value = event.currentTarget.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
+        }
+    };
+    return _jsx("input", { className: `--input flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
+});
+export default Input;

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

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type LabelProps = Props<`label`> & {};
+declare const Label: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, keyof import("../../types").ZuzProps> & import("react").RefAttributes<HTMLLabelElement>>;
+export default Label;

package/dist/comps/Label/index.js

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

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

@@ -0,0 +1,4 @@
+import { InputProps } from '../Input';
+export type PasswordProps = Omit<InputProps, `type` | `numeric`> & {};
+declare const OTP: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "numeric"> & import("react").RefAttributes<HTMLInputElement>>;
+export default OTP;

package/dist/comps/Otp/index.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { useBase } from '../../hooks';
+import Input from '../Input';
+import Box from '../Box';
+import Button from '../Button';
+import SVGIcons from '../svgicons';
+const OTP = forwardRef((props, ref) => {
+    const { ...pops } = props;
+    if (`type` in pops) {
+        delete pops[`type`];
+    }
+    const { style, className, rest } = useBase(pops);
+    const [visible, setVisible] = useState(false);
+    return _jsxs(Box, { ...{
+            style,
+            className: `--password flex aic rel`
+        }, children: [_jsx(Input, { ...{
+                    ref,
+                    type: visible ? 'text' : 'password',
+                    className,
+                    ...rest
+                } }), _jsx(Button, { ...{
+                    tabIndex: -1,
+                    onClick: () => setVisible(prev => !prev),
+                    className: `--toggle flex aic jcc abs`
+                }, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] });
+});
+export default OTP;

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

@@ -0,0 +1,8 @@
+import { BoxProps } from "../Box";
+export type OverlayProps = BoxProps & {
+    when?: boolean;
+};
+export declare const Overlay: import("react").ForwardRefExoticComponent<BoxProps & {
+    when?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Overlay;

package/dist/comps/Overlay/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+import { TRANSITIONS } from "../../types/enums";
+export const Overlay = forwardRef((props, ref) => {
+    const { when, ...pops } = props;
+    return _jsx(Box, { ref: ref, "aria-hidden": !when, className: `--overlay fixed fill`, animate: {
+            transition: TRANSITIONS.FadeIn,
+            when,
+        }, ...pops });
+});
+export default Overlay;

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

@@ -0,0 +1,4 @@
+import { InputProps } from '../Input';
+export type PasswordProps = Omit<InputProps, `type` | `numeric`> & {};
+declare const Password: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "numeric"> & import("react").RefAttributes<HTMLInputElement>>;
+export default Password;

package/dist/comps/Password/index.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { useBase } from '../../hooks';
+import Input from '../Input';
+import Box from '../Box';
+import Button from '../Button';
+import SVGIcons from '../svgicons';
+const Password = forwardRef((props, ref) => {
+    const { ...pops } = props;
+    if (`type` in pops) {
+        delete pops[`type`];
+    }
+    const { style, className, rest } = useBase(pops);
+    const [visible, setVisible] = useState(false);
+    return _jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] });
+});
+export default Password;

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

@@ -0,0 +1,12 @@
+import { InputProps } from '../Input';
+export type PinInputProps = InputProps & {
+    mask?: boolean;
+    size?: number;
+};
+declare const PinInput: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../../types").ZuzProps> & {
+    numeric?: boolean;
+} & {
+    mask?: boolean;
+    size?: number;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default PinInput;

package/dist/comps/{otp → PinInput}/index.js

@@ -1,11 +1,11 @@
+"use client";
 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) => {
+import { forwardRef, useEffect, useRef } from 'react';
+import { useBase } from '../../hooks';
+import Input from '../Input';
+import Box from '../Box';
+const PinInput = forwardRef((props, ref) => {
     const { animate, size, mask, ...pops } = props;
-    const { style } = useBase(props);
     const inputs = useRef([]);
     let name = `pinput`;
     let required = false;
@@ -20,6 +20,7 @@ const OTP = forwardRef((props, ref) => {
         required = true;
         delete pops.required;
     }
+    const { style } = useBase(pops);
     const handleInput = (event) => {
         const input = event.currentTarget;
         const nextInput = inputs.current[parseInt(input.dataset.index) + 1];
@@ -34,17 +35,8 @@ const OTP = forwardRef((props, ref) => {
     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) => {
+    return _jsx(Box, { name: name, style: style, className: `--otp flex aic rel`, "data-required": required, "data-size": size || 4, 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}`)) });
+            }, numeric: true, onChange: handleInput, maxLength: 1, placeholder: `0`, type: mask ? `password` : 'text', ...pops }, `pin-${i}`)) });
 });
-export default OTP;
+export default PinInput;

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

@@ -0,0 +1,7 @@
+import { ProgressHandler } from "./types";
+import { BoxProps } from "../Box";
+declare const ProgressBar: import("react").ForwardRefExoticComponent<BoxProps & {
+    progress?: number;
+    type?: import("../..").PROGRESS;
+} & import("react").RefAttributes<ProgressHandler>>;
+export default ProgressBar;

package/dist/comps/ProgressBar/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+const ProgressBar = forwardRef((props, ref) => {
+    const { progress, type, ...pops } = props;
+    const bar = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setWidth: (p) => {
+            bar.current.style.width = `${p * 100}%`;
+        }
+    }), []);
+    useEffect(() => {
+        if (progress && bar.current) {
+            bar.current.style.width = `${progress * 100}%`;
+        }
+    }, []);
+    const { className, style, rest } = useBase(pops);
+    return _jsx(Box, { className: `--progress flex rel ${className}`.trim(), style: style, ...rest, children: _jsx(Box, { ref: bar, className: `--bar rel` }) });
+});
+export default ProgressBar;

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

@@ -0,0 +1,9 @@
+import { PROGRESS } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type ProgressBarProps = BoxProps & {
+    progress?: number;
+    type?: PROGRESS;
+};
+export interface ProgressHandler {
+    setWidth?: (w: number) => void;
+}

package/dist/comps/ProgressBar/types.js

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

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?: 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,56 @@
+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 || 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(true), ...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())
+                            : 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/option.d.ts

@@ -0,0 +1,2 @@
+declare const Option: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default Option;

package/dist/comps/Select/option.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Option = props => {
+    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 }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`);
+};
+export default Option;

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;