@xanui/ui 1.1.40 → 1.1.41

package/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\r\nimport Label, { LabelProps } from '../Label';\r\n\r\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\r\n    value?: string;\r\n    type?: TagProps<'input'>['type'];\r\n    name?: string;\r\n    placeholder?: string;\r\n    readOnly?: boolean;\r\n    autoFocus?: boolean;\r\n    autoComplete?: string;\r\n    label?: useBreakpointPropsType<string>;\r\n\r\n    onFocus?: (e: React.FocusEvent<any>) => void;\r\n    onBlur?: (e: React.FocusEvent<any>) => void;\r\n    onChange?: (e: React.ChangeEvent<any>) => void;\r\n    onInput?: (e: React.FormEvent<any>) => void;\r\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n    rows?: useBreakpointPropsType<number>;\r\n    minRows?: useBreakpointPropsType<number>;\r\n    maxRows?: useBreakpointPropsType<number>;\r\n    fullWidth?: boolean;\r\n\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n    focused?: boolean;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n    error?: boolean;\r\n    helperText?: useBreakpointPropsType<string>;\r\n    multiline?: boolean;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n\r\n    refs?: {\r\n        inputRoot?: React.Ref<\"div\">;\r\n        label?: React.Ref<\"label\">;\r\n        rootContainer?: React.Ref<\"div\">;\r\n        // startIcon?: React.Ref<ReactElement>;\r\n        // endIcon?: React.Ref<ReactElement>;\r\n        // inputContainer?: React.Ref<\"div\">;\r\n        input?: React.Ref<'input' | 'textarea'>;\r\n        helperText?: React.Ref<\"div\">;\r\n    };\r\n\r\n    slotProps?: {\r\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\r\n        label?: Omit<LabelProps, \"children\">;\r\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\r\n        input?: Partial<TagProps<T>>;\r\n    }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n    let [{\r\n        startIcon,\r\n        endIcon,\r\n        iconPlacement,\r\n        color,\r\n        label,\r\n        name,\r\n        placeholder,\r\n        type,\r\n        readOnly,\r\n        autoFocus,\r\n        autoComplete,\r\n        onFocus,\r\n        onBlur,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n\r\n        focused,\r\n        disabled,\r\n        variant,\r\n        error,\r\n        helperText,\r\n        multiline,\r\n        size,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        fullWidth,\r\n        slotProps,\r\n\r\n        ...rest\r\n    }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (iconPlacement) _p.iconPlacement = iconPlacement\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (helperText) _p.helperText = helperText\r\n    if (size) _p.size = size\r\n    if (rows) _p.rows = rows\r\n    if (minRows) _p.minRows = minRows\r\n    if (maxRows) _p.maxRows = maxRows\r\n    const p: any = useBreakpointProps(_p)\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    iconPlacement = p.iconPlacement\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    helperText = p.helperText\r\n    size = p.size ?? 'medium'\r\n    rows = p.rows\r\n    minRows = p.minRows\r\n    maxRows = p.maxRows\r\n\r\n    iconPlacement ??= multiline ? \"end\" : \"center\"\r\n    if (!value) iconPlacement = 'center'\r\n\r\n    const [_focused, setFocused] = useState(false)\r\n    let _focus = focused || _focused\r\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\r\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\r\n\r\n    useEffect(() => {\r\n        if (autoFocus) {\r\n            setTimeout(() => {\r\n                inputRef.current?.focus()\r\n            }, 100);\r\n        }\r\n    }, [autoFocus])\r\n\r\n    let _rows = useMemo(() => {\r\n        if (rows) return rows\r\n        if (value && multiline) {\r\n            let lines = (value as string).split(`\\n`).length\r\n            if (minRows && minRows > lines) {\r\n                return minRows\r\n            } else if (maxRows && maxRows < lines) {\r\n                return maxRows\r\n            } else {\r\n                return lines\r\n            }\r\n        }\r\n    }, [value]) || 1\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 38,\r\n            gap: .5,\r\n            fontSize: 'button',\r\n        },\r\n        medium: {\r\n            height: 46,\r\n            gap: 1,\r\n            fontSize: \"text\"\r\n        },\r\n        large: {\r\n            height: 52,\r\n            gap: 1,\r\n            fontSize: 'big'\r\n        }\r\n    }\r\n\r\n    const _size = sizes[size]\r\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n    borderColor = error ? \"danger.primary\" : borderColor\r\n    let multiprops: any = {}\r\n    if (multiline) {\r\n        multiprops = {\r\n            rows: _rows,\r\n            sx: {\r\n                resize: \"none\"\r\n            }\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            width={fullWidth ? \"100%\" : \"auto\"}\r\n            {...rest}\r\n            ref={ref}\r\n            baseClass=\"input-wrapper\"\r\n            sxr={{\r\n                display: 'flex',\r\n                flexDirection: 'column',\r\n                gap: .5,\r\n            }}\r\n        >\r\n            {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\r\n            <Tag\r\n                {...slotProps?.inputRoot}\r\n                ref={refs?.inputRoot}\r\n                baseClass={'input-root'}\r\n                sxr={{\r\n                    width: \"100%\",\r\n                    overflow: \"hidden\",\r\n                }}\r\n            >\r\n                <Tag\r\n                    {...slotProps?.rootContainer}\r\n                    ref={refs?.rootContainer}\r\n                    baseClass='input-root-container'\r\n                    sxr={{\r\n                        width: \"100%\",\r\n                        display: \"flex\",\r\n                        flexDirection: \"row\",\r\n                        alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n                        flexWrap: \"nowrap\",\r\n                        transitionProperty: \"border, box-shadow, background\",\r\n                        bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n                        border: variant === \"text\" ? 0 : \"1px solid\",\r\n                        borderColor: borderColor,\r\n                        borderRadius: 1,\r\n                        px: 1,\r\n                        // py: .5,\r\n                        ..._size,\r\n                        height: multiline ? \"auto\" : _size.height,\r\n                        minHeight: _size.height,\r\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                            \"-webkit-text-fill-color\": \"text.primary\",\r\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                            transition: \"background-color 5000s ease-in-out 0s\"\r\n                        } as any,\r\n                        \"& textarea\": {\r\n                            resize: \"none\"\r\n                        },\r\n\r\n                        // ...(!!startIcon && {\r\n                        //     \"& :first-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: \"flex\",\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // }),\r\n\r\n                        // ...(!!endIcon && {\r\n                        //     \"& :last-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: 'flex',\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // })\r\n\r\n                    }}\r\n                    disabled={disabled || false}\r\n                >\r\n                    {/* {startIcon && <Tag\r\n                        {...slotProps?.startIcon}\r\n                        ref={refs?.startIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: \"flex\",\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-start-icon\"\r\n                    >{startIcon}</Tag>} */}\r\n                    {startIcon}\r\n                    {/* <Tag\r\n                        {...slotProps?.inputContainer}\r\n                        ref={refs?.inputContainer}\r\n                        baseClass='input-container'\r\n                        flex={1}\r\n                        sxr={{\r\n                            width: \"100%\",\r\n                            display: \"flex\",\r\n                            alignItems: \"center\",\r\n                            flex: 1,\r\n                            minHeight: _size.height,\r\n                            \"& textarea\": {\r\n                                resize: \"none\"\r\n                            },\r\n                            \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                                \"-webkit-text-fill-color\": \"text.primary\",\r\n                                \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                                transition: \"background-color 5000s ease-in-out 0s\"\r\n                            } as any\r\n                        }}\r\n                    >\r\n                        \r\n                    </Tag> */}\r\n                    <Tag\r\n                        {...slotProps?.input}\r\n                        ref={inputMergeRef}\r\n                        baseClass='input'\r\n                        component={multiline ? 'textarea' : 'input'}\r\n                        {...multiprops}\r\n                        sxr={{\r\n                            border: 0,\r\n                            outline: 0,\r\n                            bgcolor: \"transparent\",\r\n                            color: error ? \"danger.primary\" : \"text.primary\",\r\n                            fontSize: _size.fontSize,\r\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n                            width: \"100%\",\r\n                            maxHeight: 200,\r\n                        }}\r\n                        value={value}\r\n                        onChange={onChange}\r\n                        onFocus={(e: any) => {\r\n                            focused ?? setFocused(true)\r\n                            onFocus && onFocus(e)\r\n                        }}\r\n                        onBlur={(e: any) => {\r\n                            focused ?? setFocused(false)\r\n                            onBlur && onBlur(e)\r\n                        }}\r\n                        onKeyDown={onKeyDown}\r\n                        onKeyUp={onKeyUp}\r\n                        name={name}\r\n                        placeholder={placeholder}\r\n                        type={type}\r\n                        readOnly={readOnly}\r\n                        autoComplete={autoComplete}\r\n                    />\r\n                    {/* {endIcon && <Tag\r\n                        {...slotProps?.endIcon}\r\n                        ref={refs?.endIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: 'flex',\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-end-icon\"\r\n                    >{endIcon}</Tag>} */}\r\n                    {endIcon}\r\n                </Tag>\r\n                {helperText && <Tag\r\n                    {...slotProps?.helperText}\r\n                    ref={refs?.helperText}\r\n                    baseClass=\"input-helper-text\"\r\n                    sxr={{\r\n                        color: error ? \"danger.primary\" : \"text.primary\",\r\n                        fontSize: \"small\",\r\n                        lineHeight: \"text\",\r\n                        fontWeight: 'text',\r\n                        pl: .5,\r\n                    }}\r\n                >{helperText}</Tag>}\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\r\nimport Label, { LabelProps } from '../Label';\r\n\r\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\r\n    value?: string;\r\n    type?: TagProps<'input'>['type'];\r\n    name?: string;\r\n    placeholder?: string;\r\n    readOnly?: boolean;\r\n    autoFocus?: boolean;\r\n    autoComplete?: string;\r\n    label?: useBreakpointPropsType<string>;\r\n\r\n    onFocus?: (e: React.FocusEvent<any>) => void;\r\n    onBlur?: (e: React.FocusEvent<any>) => void;\r\n    onChange?: (e: React.ChangeEvent<any>) => void;\r\n    onInput?: (e: React.FormEvent<any>) => void;\r\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n    rows?: useBreakpointPropsType<number>;\r\n    minRows?: useBreakpointPropsType<number>;\r\n    maxRows?: useBreakpointPropsType<number>;\r\n    fullWidth?: boolean;\r\n\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n    focused?: boolean;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n    error?: boolean;\r\n    helperText?: useBreakpointPropsType<string>;\r\n    multiline?: boolean;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n\r\n    refs?: {\r\n        inputRoot?: React.Ref<\"div\">;\r\n        label?: React.Ref<\"label\">;\r\n        rootContainer?: React.Ref<\"div\">;\r\n        // startIcon?: React.Ref<ReactElement>;\r\n        // endIcon?: React.Ref<ReactElement>;\r\n        // inputContainer?: React.Ref<\"div\">;\r\n        input?: React.Ref<'input' | 'textarea'>;\r\n        helperText?: React.Ref<\"div\">;\r\n    };\r\n\r\n    slotProps?: {\r\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\r\n        label?: Omit<LabelProps, \"children\">;\r\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\r\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\r\n        input?: Partial<TagProps<T>>;\r\n    }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n    let [{\r\n        startIcon,\r\n        endIcon,\r\n        iconPlacement,\r\n        color,\r\n        label,\r\n        name,\r\n        placeholder,\r\n        type,\r\n        readOnly,\r\n        autoFocus,\r\n        autoComplete,\r\n        onFocus,\r\n        onBlur,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n\r\n        focused,\r\n        disabled,\r\n        variant,\r\n        error,\r\n        helperText,\r\n        multiline,\r\n        size,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        fullWidth,\r\n        slotProps,\r\n\r\n        ...rest\r\n    }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (iconPlacement) _p.iconPlacement = iconPlacement\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (helperText) _p.helperText = helperText\r\n    if (size) _p.size = size\r\n    if (rows) _p.rows = rows\r\n    if (minRows) _p.minRows = minRows\r\n    if (maxRows) _p.maxRows = maxRows\r\n    const p: any = useBreakpointProps(_p)\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    iconPlacement = p.iconPlacement\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    helperText = p.helperText\r\n    size = p.size ?? 'medium'\r\n    rows = p.rows\r\n    minRows = p.minRows\r\n    maxRows = p.maxRows\r\n\r\n    iconPlacement ??= multiline ? \"end\" : \"center\"\r\n    if (!value) iconPlacement = 'center'\r\n\r\n    const [_focused, setFocused] = useState(false)\r\n    let _focus = focused || _focused\r\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\r\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\r\n\r\n    useEffect(() => {\r\n        if (autoFocus) {\r\n            setTimeout(() => {\r\n                inputRef.current?.focus()\r\n            }, 100);\r\n        }\r\n    }, [autoFocus])\r\n\r\n    let _rows = useMemo(() => {\r\n        if (rows) return rows\r\n        if (value && multiline) {\r\n            let lines = (value as string).split(`\\n`).length\r\n            if (minRows && minRows > lines) {\r\n                return minRows\r\n            } else if (maxRows && maxRows < lines) {\r\n                return maxRows\r\n            } else {\r\n                return lines\r\n            }\r\n        }\r\n    }, [value]) || 1\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 38,\r\n            gap: .5,\r\n            fontSize: 'button',\r\n        },\r\n        medium: {\r\n            height: 46,\r\n            gap: 1,\r\n            fontSize: \"text\"\r\n        },\r\n        large: {\r\n            height: 52,\r\n            gap: 1,\r\n            fontSize: 'big'\r\n        }\r\n    }\r\n\r\n    const _size = sizes[size]\r\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n    borderColor = error ? \"danger.primary\" : borderColor\r\n    let multiprops: any = {}\r\n    if (multiline) {\r\n        multiprops = {\r\n            rows: _rows,\r\n            sx: {\r\n                resize: \"none\"\r\n            }\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            width={fullWidth ? \"100%\" : \"auto\"}\r\n            {...rest}\r\n            ref={ref}\r\n            baseClass=\"input-wrapper\"\r\n            sxr={{\r\n                display: 'flex',\r\n                flexDirection: 'column',\r\n                gap: .5,\r\n            }}\r\n        >\r\n            {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\r\n            <Tag\r\n                {...slotProps?.inputRoot}\r\n                ref={refs?.inputRoot}\r\n                baseClass={'input-root'}\r\n                sxr={{\r\n                    width: \"100%\",\r\n                    overflow: \"hidden\",\r\n                }}\r\n            >\r\n                <Tag\r\n                    {...slotProps?.rootContainer}\r\n                    ref={refs?.rootContainer}\r\n                    baseClass='input-root-container'\r\n                    sxr={{\r\n                        width: \"100%\",\r\n                        display: \"flex\",\r\n                        flexDirection: \"row\",\r\n                        alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n                        flexWrap: \"nowrap\",\r\n                        transitionProperty: \"border, box-shadow, background\",\r\n                        bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n                        border: variant === \"text\" ? 0 : \"1px solid\",\r\n                        borderColor: borderColor,\r\n                        borderRadius: 1,\r\n                        px: 1,\r\n                        // py: .5,\r\n                        ..._size,\r\n                        height: multiline ? \"auto\" : _size.height,\r\n                        minHeight: _size.height,\r\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                            \"-webkit-text-fill-color\": \"text.primary\",\r\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                            transition: \"background-color 5000s ease-in-out 0s\"\r\n                        } as any,\r\n                        \"& textarea\": {\r\n                            resize: \"none\"\r\n                        },\r\n\r\n                        // ...(!!startIcon && {\r\n                        //     \"& :first-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: \"flex\",\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // }),\r\n\r\n                        // ...(!!endIcon && {\r\n                        //     \"& :last-child\": {\r\n                        //         height: \"100%\",\r\n                        //         alignItems: 'center',\r\n                        //         justifyContent: \"center\",\r\n                        //         display: 'flex',\r\n                        //         color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        //         flex: \"0 0 auto\",\r\n                        //     },\r\n                        // })\r\n\r\n                    }}\r\n                    disabled={disabled || false}\r\n                >\r\n                    {/* {startIcon && <Tag\r\n                        {...slotProps?.startIcon}\r\n                        ref={refs?.startIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: \"flex\",\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-start-icon\"\r\n                    >{startIcon}</Tag>} */}\r\n                    {startIcon}\r\n                    {/* <Tag\r\n                        {...slotProps?.inputContainer}\r\n                        ref={refs?.inputContainer}\r\n                        baseClass='input-container'\r\n                        flex={1}\r\n                        sxr={{\r\n                            width: \"100%\",\r\n                            display: \"flex\",\r\n                            alignItems: \"center\",\r\n                            flex: 1,\r\n                            minHeight: _size.height,\r\n                            \"& textarea\": {\r\n                                resize: \"none\"\r\n                            },\r\n                            \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                                \"-webkit-text-fill-color\": \"text.primary\",\r\n                                \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                                transition: \"background-color 5000s ease-in-out 0s\"\r\n                            } as any\r\n                        }}\r\n                    >\r\n                        \r\n                    </Tag> */}\r\n                    <Tag\r\n                        {...slotProps?.input}\r\n                        ref={inputMergeRef}\r\n                        baseClass='input'\r\n                        component={multiline ? 'textarea' : 'input'}\r\n                        {...multiprops}\r\n                        sxr={{\r\n                            border: 0,\r\n                            outline: 0,\r\n                            bgcolor: \"transparent\",\r\n                            color: error ? \"danger.primary\" : \"text.primary\",\r\n                            fontSize: _size.fontSize,\r\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n                            width: \"100%\",\r\n                            maxHeight: 200,\r\n                        }}\r\n                        value={value}\r\n                        onChange={onChange}\r\n                        onFocus={(e: any) => {\r\n                            focused ?? setFocused(true)\r\n                            onFocus && onFocus(e)\r\n                        }}\r\n                        onBlur={(e: any) => {\r\n                            focused ?? setFocused(false)\r\n                            onBlur && onBlur(e)\r\n                        }}\r\n                        onKeyDown={onKeyDown}\r\n                        onKeyUp={onKeyUp}\r\n                        name={name}\r\n                        placeholder={placeholder}\r\n                        type={type}\r\n                        readOnly={readOnly}\r\n                        autoComplete={autoComplete}\r\n                    />\r\n                    {/* {endIcon && <Tag\r\n                        {...slotProps?.endIcon}\r\n                        ref={refs?.endIcon}\r\n                        flex={\"0 0 auto\"}\r\n                        sxr={{\r\n                            height: \"100%\",\r\n                            alignItems: 'center',\r\n                            justifyContent: \"center\",\r\n                            display: 'flex',\r\n                            color: error ? \"danger.primary\" : \"text.secondary\",\r\n                        }}\r\n                        baseClass=\"input-end-icon\"\r\n                    >{endIcon}</Tag>} */}\r\n                    {endIcon}\r\n                </Tag>\r\n                {helperText && <Tag\r\n                    {...slotProps?.helperText}\r\n                    ref={refs?.helperText}\r\n                    baseClass=\"input-helper-text\"\r\n                    sxr={{\r\n                        color: error ? \"danger.primary\" : \"text.primary\",\r\n                        fontSize: \"small\",\r\n                        lineHeight: \"text\",\r\n                        fontWeight: 'text',\r\n                        pl: .5,\r\n                    }}\r\n                >{helperText}</Tag>}\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}

package/Layer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["'use client'\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n    open: boolean;\r\n    children: ReactNode;\r\n    transition?: TransitionProps['variant'];\r\n    zIndex?: number;\r\n    blur?: useBreakpointPropsType<number>\r\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n    onClickOutside?: () => void;\r\n    onOpen?: Function;\r\n    onOpened?: Function;\r\n    onClose?: Function;\r\n    onClosed?: Function;\r\n    slotProps?: {\r\n        root?: Omit<TagProps<\"div\">, \"children\">;\r\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n    }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n    let [{\r\n        onClickOutside,\r\n        placement,\r\n        transition,\r\n        zIndex,\r\n        blur,\r\n        blurMode,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        slotProps\r\n    }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (blur) _p.blur = blur\r\n    if (blurMode) _p.blurMode = blurMode\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    blur = p.blur\r\n    blurMode = p.blurMode\r\n\r\n    const [closed, setClosed] = useState(!open)\r\n    placement = placement || \"bottom-left\"\r\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n    useEffect(() => {\r\n        if (closed && open) {\r\n            setClosed(false)\r\n        }\r\n    }, [open])\r\n\r\n    if (closed) return <></>\r\n    let duration = slotProps?.transition?.duration || 300\r\n    let delay = slotProps?.transition?.delay || 0\r\n\r\n    let content = <Transition\r\n        duration={duration}\r\n        delay={delay}\r\n        easing=\"standard\"\r\n        variant={transition || \"zoomOver\"}\r\n        {...slotProps?.transition}\r\n        open={open}\r\n        onOpen={onOpen}\r\n        onOpened={onOpened}\r\n        onClose={onClose}\r\n        onClosed={() => {\r\n            setClosed(true)\r\n            onClosed && onClosed()\r\n        }}\r\n    >\r\n        {children}\r\n    </Transition>\r\n\r\n    return (\r\n        <Transition\r\n            duration={duration}\r\n            delay={delay}\r\n            easing=\"smooth\"\r\n            variant={\"fade\"}\r\n            open={open}\r\n        >\r\n            <Tag\r\n                baseClass=\"layer\"\r\n                {...slotProps?.root}\r\n                sxr={{\r\n                    ...slotProps?.root?.sx,\r\n                    position: \"fixed\",\r\n                    zIndex: 1500 + (zIndex || 0),\r\n                    top: 0,\r\n                    left: 0,\r\n                    bottom: 0,\r\n                    right: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    ...blurCss\r\n                }}\r\n            >\r\n                {\r\n                    onClickOutside ? <ClickOutside\r\n                        {...slotProps?.clickOutside}\r\n                        onClickOutside={onClickOutside || (() => { })}\r\n                    >\r\n                        {content}\r\n                    </ClickOutside> : content\r\n                }\r\n            </Tag>\r\n        </Transition>\r\n    )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n    const l = Renderar.render(Layer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            Renderar.unrender(Layer as any)\r\n            if (props?.onClosed) {\r\n                props.onClosed()\r\n            }\r\n        }\r\n    })\r\n    return {\r\n        open: () => {\r\n            l.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            l.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\nLayer.close = () => {\r\n    Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n    open: boolean;\r\n    children: ReactNode;\r\n    transition?: TransitionProps['variant'];\r\n    zIndex?: number;\r\n    blur?: useBreakpointPropsType<number>\r\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n    onClickOutside?: () => void;\r\n    onOpen?: Function;\r\n    onOpened?: Function;\r\n    onClose?: Function;\r\n    onClosed?: Function;\r\n    slotProps?: {\r\n        root?: Omit<TagProps<\"div\">, \"children\">;\r\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n    }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n    let [{\r\n        onClickOutside,\r\n        placement,\r\n        transition,\r\n        zIndex,\r\n        blur,\r\n        blurMode,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        slotProps\r\n    }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (blur) _p.blur = blur\r\n    if (blurMode) _p.blurMode = blurMode\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    blur = p.blur\r\n    blurMode = p.blurMode\r\n\r\n    const [closed, setClosed] = useState(!open)\r\n    placement = placement || \"bottom-left\"\r\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n    useEffect(() => {\r\n        if (closed && open) {\r\n            setClosed(false)\r\n        }\r\n    }, [open])\r\n\r\n    if (closed) return <></>\r\n    let duration = slotProps?.transition?.duration || 300\r\n    let delay = slotProps?.transition?.delay || 0\r\n\r\n    let content = <Transition\r\n        duration={duration}\r\n        delay={delay}\r\n        easing=\"standard\"\r\n        variant={transition || \"zoomOver\"}\r\n        {...slotProps?.transition}\r\n        open={open}\r\n        onOpen={onOpen}\r\n        onOpened={onOpened}\r\n        onClose={onClose}\r\n        onClosed={() => {\r\n            setClosed(true)\r\n            onClosed && onClosed()\r\n        }}\r\n    >\r\n        {children}\r\n    </Transition>\r\n\r\n    return (\r\n        <Transition\r\n            duration={duration}\r\n            delay={delay}\r\n            easing=\"smooth\"\r\n            variant={\"fade\"}\r\n            open={open}\r\n        >\r\n            <Tag\r\n                baseClass=\"layer\"\r\n                {...slotProps?.root}\r\n                sxr={{\r\n                    ...slotProps?.root?.sx,\r\n                    position: \"fixed\",\r\n                    zIndex: 1500 + (zIndex || 0),\r\n                    top: 0,\r\n                    left: 0,\r\n                    bottom: 0,\r\n                    right: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    ...blurCss\r\n                }}\r\n            >\r\n                {\r\n                    onClickOutside ? <ClickOutside\r\n                        {...slotProps?.clickOutside}\r\n                        onClickOutside={onClickOutside || (() => { })}\r\n                    >\r\n                        {content}\r\n                    </ClickOutside> : content\r\n                }\r\n            </Tag>\r\n        </Transition>\r\n    )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n    const l = Renderar.render(Layer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            Renderar.unrender(Layer as any)\r\n            if (props?.onClosed) {\r\n                props.onClosed()\r\n            }\r\n        }\r\n    })\r\n    return {\r\n        open: () => {\r\n            l.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            l.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\nLayer.close = () => {\r\n    Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}

package/Layer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["'use client'\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n    open: boolean;\r\n    children: ReactNode;\r\n    transition?: TransitionProps['variant'];\r\n    zIndex?: number;\r\n    blur?: useBreakpointPropsType<number>\r\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n    onClickOutside?: () => void;\r\n    onOpen?: Function;\r\n    onOpened?: Function;\r\n    onClose?: Function;\r\n    onClosed?: Function;\r\n    slotProps?: {\r\n        root?: Omit<TagProps<\"div\">, \"children\">;\r\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n    }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n    let [{\r\n        onClickOutside,\r\n        placement,\r\n        transition,\r\n        zIndex,\r\n        blur,\r\n        blurMode,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        slotProps\r\n    }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (blur) _p.blur = blur\r\n    if (blurMode) _p.blurMode = blurMode\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    blur = p.blur\r\n    blurMode = p.blurMode\r\n\r\n    const [closed, setClosed] = useState(!open)\r\n    placement = placement || \"bottom-left\"\r\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n    useEffect(() => {\r\n        if (closed && open) {\r\n            setClosed(false)\r\n        }\r\n    }, [open])\r\n\r\n    if (closed) return <></>\r\n    let duration = slotProps?.transition?.duration || 300\r\n    let delay = slotProps?.transition?.delay || 0\r\n\r\n    let content = <Transition\r\n        duration={duration}\r\n        delay={delay}\r\n        easing=\"standard\"\r\n        variant={transition || \"zoomOver\"}\r\n        {...slotProps?.transition}\r\n        open={open}\r\n        onOpen={onOpen}\r\n        onOpened={onOpened}\r\n        onClose={onClose}\r\n        onClosed={() => {\r\n            setClosed(true)\r\n            onClosed && onClosed()\r\n        }}\r\n    >\r\n        {children}\r\n    </Transition>\r\n\r\n    return (\r\n        <Transition\r\n            duration={duration}\r\n            delay={delay}\r\n            easing=\"smooth\"\r\n            variant={\"fade\"}\r\n            open={open}\r\n        >\r\n            <Tag\r\n                baseClass=\"layer\"\r\n                {...slotProps?.root}\r\n                sxr={{\r\n                    ...slotProps?.root?.sx,\r\n                    position: \"fixed\",\r\n                    zIndex: 1500 + (zIndex || 0),\r\n                    top: 0,\r\n                    left: 0,\r\n                    bottom: 0,\r\n                    right: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    ...blurCss\r\n                }}\r\n            >\r\n                {\r\n                    onClickOutside ? <ClickOutside\r\n                        {...slotProps?.clickOutside}\r\n                        onClickOutside={onClickOutside || (() => { })}\r\n                    >\r\n                        {content}\r\n                    </ClickOutside> : content\r\n                }\r\n            </Tag>\r\n        </Transition>\r\n    )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n    const l = Renderar.render(Layer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            Renderar.unrender(Layer as any)\r\n            if (props?.onClosed) {\r\n                props.onClosed()\r\n            }\r\n        }\r\n    })\r\n    return {\r\n        open: () => {\r\n            l.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            l.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\nLayer.close = () => {\r\n    Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n    open: boolean;\r\n    children: ReactNode;\r\n    transition?: TransitionProps['variant'];\r\n    zIndex?: number;\r\n    blur?: useBreakpointPropsType<number>\r\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n    onClickOutside?: () => void;\r\n    onOpen?: Function;\r\n    onOpened?: Function;\r\n    onClose?: Function;\r\n    onClosed?: Function;\r\n    slotProps?: {\r\n        root?: Omit<TagProps<\"div\">, \"children\">;\r\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n    }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n    let [{\r\n        onClickOutside,\r\n        placement,\r\n        transition,\r\n        zIndex,\r\n        blur,\r\n        blurMode,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        slotProps\r\n    }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (blur) _p.blur = blur\r\n    if (blurMode) _p.blurMode = blurMode\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    blur = p.blur\r\n    blurMode = p.blurMode\r\n\r\n    const [closed, setClosed] = useState(!open)\r\n    placement = placement || \"bottom-left\"\r\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n    useEffect(() => {\r\n        if (closed && open) {\r\n            setClosed(false)\r\n        }\r\n    }, [open])\r\n\r\n    if (closed) return <></>\r\n    let duration = slotProps?.transition?.duration || 300\r\n    let delay = slotProps?.transition?.delay || 0\r\n\r\n    let content = <Transition\r\n        duration={duration}\r\n        delay={delay}\r\n        easing=\"standard\"\r\n        variant={transition || \"zoomOver\"}\r\n        {...slotProps?.transition}\r\n        open={open}\r\n        onOpen={onOpen}\r\n        onOpened={onOpened}\r\n        onClose={onClose}\r\n        onClosed={() => {\r\n            setClosed(true)\r\n            onClosed && onClosed()\r\n        }}\r\n    >\r\n        {children}\r\n    </Transition>\r\n\r\n    return (\r\n        <Transition\r\n            duration={duration}\r\n            delay={delay}\r\n            easing=\"smooth\"\r\n            variant={\"fade\"}\r\n            open={open}\r\n        >\r\n            <Tag\r\n                baseClass=\"layer\"\r\n                {...slotProps?.root}\r\n                sxr={{\r\n                    ...slotProps?.root?.sx,\r\n                    position: \"fixed\",\r\n                    zIndex: 1500 + (zIndex || 0),\r\n                    top: 0,\r\n                    left: 0,\r\n                    bottom: 0,\r\n                    right: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    ...blurCss\r\n                }}\r\n            >\r\n                {\r\n                    onClickOutside ? <ClickOutside\r\n                        {...slotProps?.clickOutside}\r\n                        onClickOutside={onClickOutside || (() => { })}\r\n                    >\r\n                        {content}\r\n                    </ClickOutside> : content\r\n                }\r\n            </Tag>\r\n        </Transition>\r\n    )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n    const l = Renderar.render(Layer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            Renderar.unrender(Layer as any)\r\n            if (props?.onClosed) {\r\n                props.onClosed()\r\n            }\r\n        }\r\n    })\r\n    return {\r\n        open: () => {\r\n            l.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            l.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\nLayer.close = () => {\r\n    Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}

package/LineProgress/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type LineProgressProps = {\r\n    children?: ReactElement;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\n\r\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\r\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\r\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\r\n    const _p: any = {}\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (color) _p.color = color\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    thumbSize = p.thumbSize ?? 4\r\n    color = p.color ?? \"brand\"\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    speed = p.speed\r\n\r\n    let isVal = typeof value === 'number'\r\n    if (isVal && (value as number) > 100) value = 100\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='line-progress'\r\n            sxr={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                width: '100%',\r\n                height: thumbSize,\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\r\n                radius: 2,\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <Tag\r\n                component=\"span\"\r\n                baseClass=\"line-progress-thumb\"\r\n                sxr={{\r\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\r\n                    width: isVal ? `${value}%` : \"50%\",\r\n                    height: thumbSize,\r\n                    position: \"absolute\",\r\n                    left: 0,\r\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\r\n                    [`@keyframes ${uid}`]: {\r\n                        \"0%\": { left: \"-40%\" },\r\n                        \"50%\": { left: \"20%\", width: \"80%\" },\r\n                        \"100%\": { left: \"100%\", width: \"100%\" }\r\n                    }\r\n                }}\r\n            />\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default LineProgress\r\n\r\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type LineProgressProps = {\r\n    children?: ReactElement;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\n\r\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\r\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\r\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\r\n    const _p: any = {}\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (color) _p.color = color\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    thumbSize = p.thumbSize ?? 4\r\n    color = p.color ?? \"brand\"\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    speed = p.speed\r\n\r\n    let isVal = typeof value === 'number'\r\n    if (isVal && (value as number) > 100) value = 100\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='line-progress'\r\n            sxr={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                width: '100%',\r\n                height: thumbSize,\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\r\n                radius: 2,\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <Tag\r\n                component=\"span\"\r\n                baseClass=\"line-progress-thumb\"\r\n                sxr={{\r\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\r\n                    width: isVal ? `${value}%` : \"50%\",\r\n                    height: thumbSize,\r\n                    position: \"absolute\",\r\n                    left: 0,\r\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\r\n                    [`@keyframes ${uid}`]: {\r\n                        \"0%\": { left: \"-40%\" },\r\n                        \"50%\": { left: \"20%\", width: \"80%\" },\r\n                        \"100%\": { left: \"100%\", width: \"100%\" }\r\n                    }\r\n                }}\r\n            />\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default LineProgress\r\n\r\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}

package/LineProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type LineProgressProps = {\r\n    children?: ReactElement;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\n\r\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\r\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\r\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\r\n    const _p: any = {}\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (color) _p.color = color\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    thumbSize = p.thumbSize ?? 4\r\n    color = p.color ?? \"brand\"\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    speed = p.speed\r\n\r\n    let isVal = typeof value === 'number'\r\n    if (isVal && (value as number) > 100) value = 100\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='line-progress'\r\n            sxr={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                width: '100%',\r\n                height: thumbSize,\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\r\n                radius: 2,\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <Tag\r\n                component=\"span\"\r\n                baseClass=\"line-progress-thumb\"\r\n                sxr={{\r\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\r\n                    width: isVal ? `${value}%` : \"50%\",\r\n                    height: thumbSize,\r\n                    position: \"absolute\",\r\n                    left: 0,\r\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\r\n                    [`@keyframes ${uid}`]: {\r\n                        \"0%\": { left: \"-40%\" },\r\n                        \"50%\": { left: \"20%\", width: \"80%\" },\r\n                        \"100%\": { left: \"100%\", width: \"100%\" }\r\n                    }\r\n                }}\r\n            />\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default LineProgress\r\n\r\n"],"names":[],"mappings":";;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type LineProgressProps = {\r\n    children?: ReactElement;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\n\r\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\r\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\r\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\r\n    const _p: any = {}\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (color) _p.color = color\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    thumbSize = p.thumbSize ?? 4\r\n    color = p.color ?? \"brand\"\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    speed = p.speed\r\n\r\n    let isVal = typeof value === 'number'\r\n    if (isVal && (value as number) > 100) value = 100\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='line-progress'\r\n            sxr={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                width: '100%',\r\n                height: thumbSize,\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\r\n                radius: 2,\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <Tag\r\n                component=\"span\"\r\n                baseClass=\"line-progress-thumb\"\r\n                sxr={{\r\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\r\n                    width: isVal ? `${value}%` : \"50%\",\r\n                    height: thumbSize,\r\n                    position: \"absolute\",\r\n                    left: 0,\r\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\r\n                    [`@keyframes ${uid}`]: {\r\n                        \"0%\": { left: \"-40%\" },\r\n                        \"50%\": { left: \"20%\", width: \"80%\" },\r\n                        \"100%\": { left: \"100%\", width: \"100%\" }\r\n                    }\r\n                }}\r\n            />\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default LineProgress\r\n\r\n"],"names":[],"mappings":";;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}

package/Menu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["'use client'\r\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\r\nimport Portal, { PortalProps } from \"../Portal\";\r\nimport ClickOutside from \"../ClickOutside\";\r\n\r\nexport type PlacementTypes =\r\n    | \"top\"\r\n    | \"top-left\"\r\n    | \"top-right\"\r\n    | \"bottom\"\r\n    | \"bottom-left\"\r\n    | \"bottom-right\"\r\n    | \"right\"\r\n    | \"right-top\"\r\n    | \"right-bottom\"\r\n    | \"left\"\r\n    | \"left-top\"\r\n    | \"left-bottom\";\r\n\r\nexport type MenuProps = {\r\n    children?: ReactNode;\r\n    target?: HTMLElement;\r\n    placement?: useBreakpointPropsType<PlacementTypes>;\r\n    zIndex?: number;\r\n    onClickOutside?: (e: MouseEvent) => void;\r\n    slotProps?: {\r\n        transition?: Omit<TransitionProps, \"open\">;\r\n        portal?: Omit<PortalProps, \"children\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n    };\r\n};\r\n\r\nconst placements: PlacementTypes[] = [\r\n    \"top\",\r\n    \"top-left\",\r\n    \"top-right\",\r\n    \"bottom\",\r\n    \"bottom-left\",\r\n    \"bottom-right\",\r\n    \"right\",\r\n    \"right-top\",\r\n    \"right-bottom\",\r\n    \"left\",\r\n    \"left-top\",\r\n    \"left-bottom\",\r\n];\r\n\r\nconst getTransformOrigin = (placement: PlacementTypes) => {\r\n    switch (placement) {\r\n        case \"top\":\r\n            return \"bottom\";\r\n        case \"top-left\":\r\n            return \"bottom left\";\r\n        case \"top-right\":\r\n            return \"bottom right\";\r\n        case \"bottom\":\r\n            return \"top\";\r\n        case \"bottom-left\":\r\n            return \"top left\";\r\n        case \"bottom-right\":\r\n            return \"top right\";\r\n        case \"left\":\r\n            return \"right\";\r\n        case \"left-top\":\r\n            return \"top right\";\r\n        case \"left-bottom\":\r\n            return \"bottom right\";\r\n        case \"right\":\r\n            return \"left\";\r\n        case \"right-top\":\r\n            return \"top left\";\r\n        case \"right-bottom\":\r\n            return \"bottom left\";\r\n        default:\r\n            return \"top\";\r\n    }\r\n};\r\n\r\n// Compute coordinates for each placement\r\nconst computePosition = (\r\n    placement: PlacementTypes,\r\n    menu: HTMLElement,\r\n    target: HTMLElement\r\n) => {\r\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\r\n    const {\r\n        top: tt,\r\n        left: tl,\r\n        bottom: tb,\r\n        right: tr,\r\n        width: tw,\r\n        height: th,\r\n    } = target.getBoundingClientRect();\r\n\r\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\r\n        \"bottom-left\": { top: tb, left: tl },\r\n        \"bottom-right\": { top: tb, left: tr - mw },\r\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\r\n\r\n        \"top-left\": { top: tt - mh, left: tl },\r\n        \"top-right\": { top: tt - mh, left: tr - mw },\r\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\r\n\r\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\r\n        \"left-top\": { top: tt, left: tl - mw },\r\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\r\n\r\n        right: { top: tt + (th - mh) / 2, left: tr },\r\n        \"right-top\": { top: tt, left: tr },\r\n        \"right-bottom\": { top: tb - mh, left: tr },\r\n    };\r\n\r\n    return positions[placement];\r\n};\r\n\r\n\r\n// Check if menu is off-screen\r\nconst isOffScreen = (menu: HTMLElement) => {\r\n    const { x, y, width, height } = menu.getBoundingClientRect();\r\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\r\n};\r\n\r\n// Try to place menu and fallback if off-screen\r\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\r\n    let pos = computePosition(placement, menu, target);\r\n    menu.style.top = pos.top + \"px\";\r\n    menu.style.left = pos.left + \"px\";\r\n\r\n    if (isOffScreen(menu)) {\r\n        for (const p of placements) {\r\n            const fallbackPos = computePosition(p, menu, target);\r\n            menu.style.top = fallbackPos.top + \"px\";\r\n            menu.style.left = fallbackPos.left + \"px\";\r\n            if (!isOffScreen(menu)) return p;\r\n        }\r\n    }\r\n    return placement;\r\n};\r\n\r\nconst Menu = ({ children, target, ...props }: MenuProps) => {\r\n    let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\r\n    const _p: any = {};\r\n    if (placement) _p.placement = placement;\r\n    const p: any = useBreakpointProps(_p);\r\n    placement = p.placement || \"bottom-left\";\r\n\r\n    const isOpen = Boolean(target);\r\n    const [closed, setClosed] = useState(!isOpen);\r\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\r\n    const menuRef = useRef<HTMLDivElement>(null);\r\n\r\n    // Open/close effect\r\n    useEffect(() => {\r\n        if (closed && isOpen) setClosed(false);\r\n    }, [isOpen]);\r\n\r\n\r\n    useEffect(() => {\r\n        if (!closed && target && menuRef.current) {\r\n            const updatePosition = () => {\r\n                if (menuRef.current && target) {\r\n                    requestAnimationFrame(() => {\r\n                        const p = placeMenu(placement!, menuRef.current as any, target);\r\n                        setPlaced(p);\r\n                    });\r\n                }\r\n            };\r\n\r\n            updatePosition();\r\n            window.addEventListener(\"resize\", updatePosition);\r\n            window.addEventListener(\"scroll\", updatePosition, true);\r\n\r\n            return () => {\r\n                window.removeEventListener(\"resize\", updatePosition);\r\n                window.removeEventListener(\"scroll\", updatePosition, true);\r\n            };\r\n        }\r\n        return\r\n    }, [closed, target, placement]);\r\n\r\n\r\n    if (closed) return null;\r\n\r\n    return (\r\n        <Portal {...slotProps?.portal}>\r\n            <ClickOutside\r\n                onClickOutside={(e: MouseEvent) => {\r\n                    if (target?.contains(e.target as any)) return;\r\n                    if (e.target !== target) {\r\n                        onClickOutside && onClickOutside(e);\r\n                    }\r\n                }}\r\n                ref={menuRef}\r\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\r\n            >\r\n                <Transition\r\n                    duration={200}\r\n                    easing=\"fast\"\r\n                    variant=\"grow\"\r\n                    {...slotProps?.transition}\r\n                    open={isOpen}\r\n                    onClosed={() => {\r\n                        setClosed(true);\r\n                        slotProps?.transition?.onClosed?.();\r\n                    }}\r\n                >\r\n                    <Tag\r\n                        baseClass=\"menu-content\"\r\n                        {...slotProps?.content}\r\n                        sxr={{\r\n                            overflow: \"hidden\",\r\n                            bgcolor: \"background.primary\",\r\n                            shadow: 2,\r\n                            radius: 1,\r\n                            transformOrigin: getTransformOrigin(placed),\r\n                            ...slotProps?.content?.sx,\r\n                        }}\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Transition>\r\n            </ClickOutside>\r\n        </Portal>\r\n    );\r\n};\r\n\r\nexport default Menu;\r\n"],"names":[],"mappings":";;;;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;;;;;;AAmCxB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\r\nimport Portal, { PortalProps } from \"../Portal\";\r\nimport ClickOutside from \"../ClickOutside\";\r\n\r\nexport type PlacementTypes =\r\n    | \"top\"\r\n    | \"top-left\"\r\n    | \"top-right\"\r\n    | \"bottom\"\r\n    | \"bottom-left\"\r\n    | \"bottom-right\"\r\n    | \"right\"\r\n    | \"right-top\"\r\n    | \"right-bottom\"\r\n    | \"left\"\r\n    | \"left-top\"\r\n    | \"left-bottom\";\r\n\r\nexport type MenuProps = {\r\n    children?: ReactNode;\r\n    target?: HTMLElement;\r\n    placement?: useBreakpointPropsType<PlacementTypes>;\r\n    zIndex?: number;\r\n    onClickOutside?: (e: MouseEvent) => void;\r\n    slotProps?: {\r\n        transition?: Omit<TransitionProps, \"open\">;\r\n        portal?: Omit<PortalProps, \"children\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n    };\r\n};\r\n\r\nconst placements: PlacementTypes[] = [\r\n    \"top\",\r\n    \"top-left\",\r\n    \"top-right\",\r\n    \"bottom\",\r\n    \"bottom-left\",\r\n    \"bottom-right\",\r\n    \"right\",\r\n    \"right-top\",\r\n    \"right-bottom\",\r\n    \"left\",\r\n    \"left-top\",\r\n    \"left-bottom\",\r\n];\r\n\r\nconst getTransformOrigin = (placement: PlacementTypes) => {\r\n    switch (placement) {\r\n        case \"top\":\r\n            return \"bottom\";\r\n        case \"top-left\":\r\n            return \"bottom left\";\r\n        case \"top-right\":\r\n            return \"bottom right\";\r\n        case \"bottom\":\r\n            return \"top\";\r\n        case \"bottom-left\":\r\n            return \"top left\";\r\n        case \"bottom-right\":\r\n            return \"top right\";\r\n        case \"left\":\r\n            return \"right\";\r\n        case \"left-top\":\r\n            return \"top right\";\r\n        case \"left-bottom\":\r\n            return \"bottom right\";\r\n        case \"right\":\r\n            return \"left\";\r\n        case \"right-top\":\r\n            return \"top left\";\r\n        case \"right-bottom\":\r\n            return \"bottom left\";\r\n        default:\r\n            return \"top\";\r\n    }\r\n};\r\n\r\n// Compute coordinates for each placement\r\nconst computePosition = (\r\n    placement: PlacementTypes,\r\n    menu: HTMLElement,\r\n    target: HTMLElement\r\n) => {\r\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\r\n    const {\r\n        top: tt,\r\n        left: tl,\r\n        bottom: tb,\r\n        right: tr,\r\n        width: tw,\r\n        height: th,\r\n    } = target.getBoundingClientRect();\r\n\r\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\r\n        \"bottom-left\": { top: tb, left: tl },\r\n        \"bottom-right\": { top: tb, left: tr - mw },\r\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\r\n\r\n        \"top-left\": { top: tt - mh, left: tl },\r\n        \"top-right\": { top: tt - mh, left: tr - mw },\r\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\r\n\r\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\r\n        \"left-top\": { top: tt, left: tl - mw },\r\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\r\n\r\n        right: { top: tt + (th - mh) / 2, left: tr },\r\n        \"right-top\": { top: tt, left: tr },\r\n        \"right-bottom\": { top: tb - mh, left: tr },\r\n    };\r\n\r\n    return positions[placement];\r\n};\r\n\r\n\r\n// Check if menu is off-screen\r\nconst isOffScreen = (menu: HTMLElement) => {\r\n    const { x, y, width, height } = menu.getBoundingClientRect();\r\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\r\n};\r\n\r\n// Try to place menu and fallback if off-screen\r\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\r\n    let pos = computePosition(placement, menu, target);\r\n    menu.style.top = pos.top + \"px\";\r\n    menu.style.left = pos.left + \"px\";\r\n\r\n    if (isOffScreen(menu)) {\r\n        for (const p of placements) {\r\n            const fallbackPos = computePosition(p, menu, target);\r\n            menu.style.top = fallbackPos.top + \"px\";\r\n            menu.style.left = fallbackPos.left + \"px\";\r\n            if (!isOffScreen(menu)) return p;\r\n        }\r\n    }\r\n    return placement;\r\n};\r\n\r\nconst Menu = ({ children, target, ...props }: MenuProps) => {\r\n    let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\r\n    const _p: any = {};\r\n    if (placement) _p.placement = placement;\r\n    const p: any = useBreakpointProps(_p);\r\n    placement = p.placement || \"bottom-left\";\r\n\r\n    const isOpen = Boolean(target);\r\n    const [closed, setClosed] = useState(!isOpen);\r\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\r\n    const menuRef = useRef<HTMLDivElement>(null);\r\n\r\n    // Open/close effect\r\n    useEffect(() => {\r\n        if (closed && isOpen) setClosed(false);\r\n    }, [isOpen]);\r\n\r\n\r\n    useEffect(() => {\r\n        if (!closed && target && menuRef.current) {\r\n            const updatePosition = () => {\r\n                if (menuRef.current && target) {\r\n                    requestAnimationFrame(() => {\r\n                        const p = placeMenu(placement!, menuRef.current as any, target);\r\n                        setPlaced(p);\r\n                    });\r\n                }\r\n            };\r\n\r\n            updatePosition();\r\n            window.addEventListener(\"resize\", updatePosition);\r\n            window.addEventListener(\"scroll\", updatePosition, true);\r\n\r\n            return () => {\r\n                window.removeEventListener(\"resize\", updatePosition);\r\n                window.removeEventListener(\"scroll\", updatePosition, true);\r\n            };\r\n        }\r\n        return\r\n    }, [closed, target, placement]);\r\n\r\n\r\n    if (closed) return null;\r\n\r\n    return (\r\n        <Portal {...slotProps?.portal}>\r\n            <ClickOutside\r\n                onClickOutside={(e: MouseEvent) => {\r\n                    if (target?.contains(e.target as any)) return;\r\n                    if (e.target !== target) {\r\n                        onClickOutside && onClickOutside(e);\r\n                    }\r\n                }}\r\n                ref={menuRef}\r\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\r\n            >\r\n                <Transition\r\n                    duration={200}\r\n                    easing=\"fast\"\r\n                    variant=\"grow\"\r\n                    {...slotProps?.transition}\r\n                    open={isOpen}\r\n                    onClosed={() => {\r\n                        setClosed(true);\r\n                        slotProps?.transition?.onClosed?.();\r\n                    }}\r\n                >\r\n                    <Tag\r\n                        baseClass=\"menu-content\"\r\n                        {...slotProps?.content}\r\n                        sxr={{\r\n                            overflow: \"hidden\",\r\n                            bgcolor: \"background.primary\",\r\n                            shadow: 2,\r\n                            radius: 1,\r\n                            transformOrigin: getTransformOrigin(placed),\r\n                            ...slotProps?.content?.sx,\r\n                        }}\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Transition>\r\n            </ClickOutside>\r\n        </Portal>\r\n    );\r\n};\r\n\r\nexport default Menu;\r\n"],"names":[],"mappings":";;;;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;;;;;;AAmCxB;;"}

package/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["'use client'\r\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\r\nimport Portal, { PortalProps } from \"../Portal\";\r\nimport ClickOutside from \"../ClickOutside\";\r\n\r\nexport type PlacementTypes =\r\n    | \"top\"\r\n    | \"top-left\"\r\n    | \"top-right\"\r\n    | \"bottom\"\r\n    | \"bottom-left\"\r\n    | \"bottom-right\"\r\n    | \"right\"\r\n    | \"right-top\"\r\n    | \"right-bottom\"\r\n    | \"left\"\r\n    | \"left-top\"\r\n    | \"left-bottom\";\r\n\r\nexport type MenuProps = {\r\n    children?: ReactNode;\r\n    target?: HTMLElement;\r\n    placement?: useBreakpointPropsType<PlacementTypes>;\r\n    zIndex?: number;\r\n    onClickOutside?: (e: MouseEvent) => void;\r\n    slotProps?: {\r\n        transition?: Omit<TransitionProps, \"open\">;\r\n        portal?: Omit<PortalProps, \"children\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n    };\r\n};\r\n\r\nconst placements: PlacementTypes[] = [\r\n    \"top\",\r\n    \"top-left\",\r\n    \"top-right\",\r\n    \"bottom\",\r\n    \"bottom-left\",\r\n    \"bottom-right\",\r\n    \"right\",\r\n    \"right-top\",\r\n    \"right-bottom\",\r\n    \"left\",\r\n    \"left-top\",\r\n    \"left-bottom\",\r\n];\r\n\r\nconst getTransformOrigin = (placement: PlacementTypes) => {\r\n    switch (placement) {\r\n        case \"top\":\r\n            return \"bottom\";\r\n        case \"top-left\":\r\n            return \"bottom left\";\r\n        case \"top-right\":\r\n            return \"bottom right\";\r\n        case \"bottom\":\r\n            return \"top\";\r\n        case \"bottom-left\":\r\n            return \"top left\";\r\n        case \"bottom-right\":\r\n            return \"top right\";\r\n        case \"left\":\r\n            return \"right\";\r\n        case \"left-top\":\r\n            return \"top right\";\r\n        case \"left-bottom\":\r\n            return \"bottom right\";\r\n        case \"right\":\r\n            return \"left\";\r\n        case \"right-top\":\r\n            return \"top left\";\r\n        case \"right-bottom\":\r\n            return \"bottom left\";\r\n        default:\r\n            return \"top\";\r\n    }\r\n};\r\n\r\n// Compute coordinates for each placement\r\nconst computePosition = (\r\n    placement: PlacementTypes,\r\n    menu: HTMLElement,\r\n    target: HTMLElement\r\n) => {\r\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\r\n    const {\r\n        top: tt,\r\n        left: tl,\r\n        bottom: tb,\r\n        right: tr,\r\n        width: tw,\r\n        height: th,\r\n    } = target.getBoundingClientRect();\r\n\r\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\r\n        \"bottom-left\": { top: tb, left: tl },\r\n        \"bottom-right\": { top: tb, left: tr - mw },\r\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\r\n\r\n        \"top-left\": { top: tt - mh, left: tl },\r\n        \"top-right\": { top: tt - mh, left: tr - mw },\r\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\r\n\r\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\r\n        \"left-top\": { top: tt, left: tl - mw },\r\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\r\n\r\n        right: { top: tt + (th - mh) / 2, left: tr },\r\n        \"right-top\": { top: tt, left: tr },\r\n        \"right-bottom\": { top: tb - mh, left: tr },\r\n    };\r\n\r\n    return positions[placement];\r\n};\r\n\r\n\r\n// Check if menu is off-screen\r\nconst isOffScreen = (menu: HTMLElement) => {\r\n    const { x, y, width, height } = menu.getBoundingClientRect();\r\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\r\n};\r\n\r\n// Try to place menu and fallback if off-screen\r\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\r\n    let pos = computePosition(placement, menu, target);\r\n    menu.style.top = pos.top + \"px\";\r\n    menu.style.left = pos.left + \"px\";\r\n\r\n    if (isOffScreen(menu)) {\r\n        for (const p of placements) {\r\n            const fallbackPos = computePosition(p, menu, target);\r\n            menu.style.top = fallbackPos.top + \"px\";\r\n            menu.style.left = fallbackPos.left + \"px\";\r\n            if (!isOffScreen(menu)) return p;\r\n        }\r\n    }\r\n    return placement;\r\n};\r\n\r\nconst Menu = ({ children, target, ...props }: MenuProps) => {\r\n    let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\r\n    const _p: any = {};\r\n    if (placement) _p.placement = placement;\r\n    const p: any = useBreakpointProps(_p);\r\n    placement = p.placement || \"bottom-left\";\r\n\r\n    const isOpen = Boolean(target);\r\n    const [closed, setClosed] = useState(!isOpen);\r\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\r\n    const menuRef = useRef<HTMLDivElement>(null);\r\n\r\n    // Open/close effect\r\n    useEffect(() => {\r\n        if (closed && isOpen) setClosed(false);\r\n    }, [isOpen]);\r\n\r\n\r\n    useEffect(() => {\r\n        if (!closed && target && menuRef.current) {\r\n            const updatePosition = () => {\r\n                if (menuRef.current && target) {\r\n                    requestAnimationFrame(() => {\r\n                        const p = placeMenu(placement!, menuRef.current as any, target);\r\n                        setPlaced(p);\r\n                    });\r\n                }\r\n            };\r\n\r\n            updatePosition();\r\n            window.addEventListener(\"resize\", updatePosition);\r\n            window.addEventListener(\"scroll\", updatePosition, true);\r\n\r\n            return () => {\r\n                window.removeEventListener(\"resize\", updatePosition);\r\n                window.removeEventListener(\"scroll\", updatePosition, true);\r\n            };\r\n        }\r\n        return\r\n    }, [closed, target, placement]);\r\n\r\n\r\n    if (closed) return null;\r\n\r\n    return (\r\n        <Portal {...slotProps?.portal}>\r\n            <ClickOutside\r\n                onClickOutside={(e: MouseEvent) => {\r\n                    if (target?.contains(e.target as any)) return;\r\n                    if (e.target !== target) {\r\n                        onClickOutside && onClickOutside(e);\r\n                    }\r\n                }}\r\n                ref={menuRef}\r\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\r\n            >\r\n                <Transition\r\n                    duration={200}\r\n                    easing=\"fast\"\r\n                    variant=\"grow\"\r\n                    {...slotProps?.transition}\r\n                    open={isOpen}\r\n                    onClosed={() => {\r\n                        setClosed(true);\r\n                        slotProps?.transition?.onClosed?.();\r\n                    }}\r\n                >\r\n                    <Tag\r\n                        baseClass=\"menu-content\"\r\n                        {...slotProps?.content}\r\n                        sxr={{\r\n                            overflow: \"hidden\",\r\n                            bgcolor: \"background.primary\",\r\n                            shadow: 2,\r\n                            radius: 1,\r\n                            transformOrigin: getTransformOrigin(placed),\r\n                            ...slotProps?.content?.sx,\r\n                        }}\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Transition>\r\n            </ClickOutside>\r\n        </Portal>\r\n    );\r\n};\r\n\r\nexport default Menu;\r\n"],"names":[],"mappings":";;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;;;;;;AAmCxB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\r\nimport Portal, { PortalProps } from \"../Portal\";\r\nimport ClickOutside from \"../ClickOutside\";\r\n\r\nexport type PlacementTypes =\r\n    | \"top\"\r\n    | \"top-left\"\r\n    | \"top-right\"\r\n    | \"bottom\"\r\n    | \"bottom-left\"\r\n    | \"bottom-right\"\r\n    | \"right\"\r\n    | \"right-top\"\r\n    | \"right-bottom\"\r\n    | \"left\"\r\n    | \"left-top\"\r\n    | \"left-bottom\";\r\n\r\nexport type MenuProps = {\r\n    children?: ReactNode;\r\n    target?: HTMLElement;\r\n    placement?: useBreakpointPropsType<PlacementTypes>;\r\n    zIndex?: number;\r\n    onClickOutside?: (e: MouseEvent) => void;\r\n    slotProps?: {\r\n        transition?: Omit<TransitionProps, \"open\">;\r\n        portal?: Omit<PortalProps, \"children\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n    };\r\n};\r\n\r\nconst placements: PlacementTypes[] = [\r\n    \"top\",\r\n    \"top-left\",\r\n    \"top-right\",\r\n    \"bottom\",\r\n    \"bottom-left\",\r\n    \"bottom-right\",\r\n    \"right\",\r\n    \"right-top\",\r\n    \"right-bottom\",\r\n    \"left\",\r\n    \"left-top\",\r\n    \"left-bottom\",\r\n];\r\n\r\nconst getTransformOrigin = (placement: PlacementTypes) => {\r\n    switch (placement) {\r\n        case \"top\":\r\n            return \"bottom\";\r\n        case \"top-left\":\r\n            return \"bottom left\";\r\n        case \"top-right\":\r\n            return \"bottom right\";\r\n        case \"bottom\":\r\n            return \"top\";\r\n        case \"bottom-left\":\r\n            return \"top left\";\r\n        case \"bottom-right\":\r\n            return \"top right\";\r\n        case \"left\":\r\n            return \"right\";\r\n        case \"left-top\":\r\n            return \"top right\";\r\n        case \"left-bottom\":\r\n            return \"bottom right\";\r\n        case \"right\":\r\n            return \"left\";\r\n        case \"right-top\":\r\n            return \"top left\";\r\n        case \"right-bottom\":\r\n            return \"bottom left\";\r\n        default:\r\n            return \"top\";\r\n    }\r\n};\r\n\r\n// Compute coordinates for each placement\r\nconst computePosition = (\r\n    placement: PlacementTypes,\r\n    menu: HTMLElement,\r\n    target: HTMLElement\r\n) => {\r\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\r\n    const {\r\n        top: tt,\r\n        left: tl,\r\n        bottom: tb,\r\n        right: tr,\r\n        width: tw,\r\n        height: th,\r\n    } = target.getBoundingClientRect();\r\n\r\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\r\n        \"bottom-left\": { top: tb, left: tl },\r\n        \"bottom-right\": { top: tb, left: tr - mw },\r\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\r\n\r\n        \"top-left\": { top: tt - mh, left: tl },\r\n        \"top-right\": { top: tt - mh, left: tr - mw },\r\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\r\n\r\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\r\n        \"left-top\": { top: tt, left: tl - mw },\r\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\r\n\r\n        right: { top: tt + (th - mh) / 2, left: tr },\r\n        \"right-top\": { top: tt, left: tr },\r\n        \"right-bottom\": { top: tb - mh, left: tr },\r\n    };\r\n\r\n    return positions[placement];\r\n};\r\n\r\n\r\n// Check if menu is off-screen\r\nconst isOffScreen = (menu: HTMLElement) => {\r\n    const { x, y, width, height } = menu.getBoundingClientRect();\r\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\r\n};\r\n\r\n// Try to place menu and fallback if off-screen\r\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\r\n    let pos = computePosition(placement, menu, target);\r\n    menu.style.top = pos.top + \"px\";\r\n    menu.style.left = pos.left + \"px\";\r\n\r\n    if (isOffScreen(menu)) {\r\n        for (const p of placements) {\r\n            const fallbackPos = computePosition(p, menu, target);\r\n            menu.style.top = fallbackPos.top + \"px\";\r\n            menu.style.left = fallbackPos.left + \"px\";\r\n            if (!isOffScreen(menu)) return p;\r\n        }\r\n    }\r\n    return placement;\r\n};\r\n\r\nconst Menu = ({ children, target, ...props }: MenuProps) => {\r\n    let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\r\n    const _p: any = {};\r\n    if (placement) _p.placement = placement;\r\n    const p: any = useBreakpointProps(_p);\r\n    placement = p.placement || \"bottom-left\";\r\n\r\n    const isOpen = Boolean(target);\r\n    const [closed, setClosed] = useState(!isOpen);\r\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\r\n    const menuRef = useRef<HTMLDivElement>(null);\r\n\r\n    // Open/close effect\r\n    useEffect(() => {\r\n        if (closed && isOpen) setClosed(false);\r\n    }, [isOpen]);\r\n\r\n\r\n    useEffect(() => {\r\n        if (!closed && target && menuRef.current) {\r\n            const updatePosition = () => {\r\n                if (menuRef.current && target) {\r\n                    requestAnimationFrame(() => {\r\n                        const p = placeMenu(placement!, menuRef.current as any, target);\r\n                        setPlaced(p);\r\n                    });\r\n                }\r\n            };\r\n\r\n            updatePosition();\r\n            window.addEventListener(\"resize\", updatePosition);\r\n            window.addEventListener(\"scroll\", updatePosition, true);\r\n\r\n            return () => {\r\n                window.removeEventListener(\"resize\", updatePosition);\r\n                window.removeEventListener(\"scroll\", updatePosition, true);\r\n            };\r\n        }\r\n        return\r\n    }, [closed, target, placement]);\r\n\r\n\r\n    if (closed) return null;\r\n\r\n    return (\r\n        <Portal {...slotProps?.portal}>\r\n            <ClickOutside\r\n                onClickOutside={(e: MouseEvent) => {\r\n                    if (target?.contains(e.target as any)) return;\r\n                    if (e.target !== target) {\r\n                        onClickOutside && onClickOutside(e);\r\n                    }\r\n                }}\r\n                ref={menuRef}\r\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\r\n            >\r\n                <Transition\r\n                    duration={200}\r\n                    easing=\"fast\"\r\n                    variant=\"grow\"\r\n                    {...slotProps?.transition}\r\n                    open={isOpen}\r\n                    onClosed={() => {\r\n                        setClosed(true);\r\n                        slotProps?.transition?.onClosed?.();\r\n                    }}\r\n                >\r\n                    <Tag\r\n                        baseClass=\"menu-content\"\r\n                        {...slotProps?.content}\r\n                        sxr={{\r\n                            overflow: \"hidden\",\r\n                            bgcolor: \"background.primary\",\r\n                            shadow: 2,\r\n                            radius: 1,\r\n                            transformOrigin: getTransformOrigin(placed),\r\n                            ...slotProps?.content?.sx,\r\n                        }}\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </Transition>\r\n            </ClickOutside>\r\n        </Portal>\r\n    );\r\n};\r\n\r\nexport default Menu;\r\n"],"names":[],"mappings":";;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;;;;;;AAmCxB;;"}

package/Modal/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["'use client'\r\nimport { ReactNode, useEffect, useRef } from \"react\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport { Renderar, Tag } from \"@xanui/core\";\r\n\r\nexport type ModalProps = UseModalProps & {\r\n   children: ReactNode;\r\n   open: boolean;\r\n}\r\n\r\nconst Modal = ({ children, open, ...props }: ModalProps) => {\r\n   const ref = useRef<HTMLDivElement>(null);\r\n\r\n   const modal = useModal(<>{children}</>, {\r\n      ...props,\r\n      onClickOutside: () => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         }\r\n      },\r\n      slotProps: {\r\n         layer: {\r\n            portal: {\r\n               container: ref?.current || undefined\r\n            }\r\n         }\r\n      }\r\n   })\r\n\r\n   useEffect(() => {\r\n      if (open) {\r\n         modal.open()\r\n      } else {\r\n         modal.close()\r\n      }\r\n   }, [open])\r\n   return <Tag ref={ref}></Tag>\r\n}\r\n\r\nconst ActionModal = ({ children, ...props }: ModalProps) => {\r\n   return (\r\n      <Modal {...props}>\r\n         {children}\r\n      </Modal>\r\n   )\r\n}\r\n\r\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\r\n   const m = Renderar.render(ActionModal as any, {\r\n      open: true,\r\n      ...props,\r\n      children,\r\n      onClosed: () => {\r\n         m.unrender()\r\n         if (props?.onClosed) {\r\n            props.onClosed()\r\n         }\r\n      }\r\n   })\r\n\r\n   return {\r\n      open: () => {\r\n         m.updateProps({ open: true })\r\n      },\r\n      close: () => {\r\n         m.updateProps({ open: false })\r\n      },\r\n   }\r\n};\r\n\r\nModal.close = () => {\r\n   Renderar.unrender(ActionModal as any)\r\n}\r\n\r\nexport default Modal;"],"names":[],"mappings":";;;;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useRef } from \"react\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport { Renderar, Tag } from \"@xanui/core\";\r\n\r\nexport type ModalProps = UseModalProps & {\r\n   children: ReactNode;\r\n   open: boolean;\r\n}\r\n\r\nconst Modal = ({ children, open, ...props }: ModalProps) => {\r\n   const ref = useRef<HTMLDivElement>(null);\r\n\r\n   const modal = useModal(<>{children}</>, {\r\n      ...props,\r\n      onClickOutside: () => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         }\r\n      },\r\n      slotProps: {\r\n         layer: {\r\n            portal: {\r\n               container: ref?.current || undefined\r\n            }\r\n         }\r\n      }\r\n   })\r\n\r\n   useEffect(() => {\r\n      if (open) {\r\n         modal.open()\r\n      } else {\r\n         modal.close()\r\n      }\r\n   }, [open])\r\n   return <Tag ref={ref}></Tag>\r\n}\r\n\r\nconst ActionModal = ({ children, ...props }: ModalProps) => {\r\n   return (\r\n      <Modal {...props}>\r\n         {children}\r\n      </Modal>\r\n   )\r\n}\r\n\r\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\r\n   const m = Renderar.render(ActionModal as any, {\r\n      open: true,\r\n      ...props,\r\n      children,\r\n      onClosed: () => {\r\n         m.unrender()\r\n         if (props?.onClosed) {\r\n            props.onClosed()\r\n         }\r\n      }\r\n   })\r\n\r\n   return {\r\n      open: () => {\r\n         m.updateProps({ open: true })\r\n      },\r\n      close: () => {\r\n         m.updateProps({ open: false })\r\n      },\r\n   }\r\n};\r\n\r\nModal.close = () => {\r\n   Renderar.unrender(ActionModal as any)\r\n}\r\n\r\nexport default Modal;"],"names":[],"mappings":";;;;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}

package/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["'use client'\r\nimport { ReactNode, useEffect, useRef } from \"react\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport { Renderar, Tag } from \"@xanui/core\";\r\n\r\nexport type ModalProps = UseModalProps & {\r\n   children: ReactNode;\r\n   open: boolean;\r\n}\r\n\r\nconst Modal = ({ children, open, ...props }: ModalProps) => {\r\n   const ref = useRef<HTMLDivElement>(null);\r\n\r\n   const modal = useModal(<>{children}</>, {\r\n      ...props,\r\n      onClickOutside: () => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         }\r\n      },\r\n      slotProps: {\r\n         layer: {\r\n            portal: {\r\n               container: ref?.current || undefined\r\n            }\r\n         }\r\n      }\r\n   })\r\n\r\n   useEffect(() => {\r\n      if (open) {\r\n         modal.open()\r\n      } else {\r\n         modal.close()\r\n      }\r\n   }, [open])\r\n   return <Tag ref={ref}></Tag>\r\n}\r\n\r\nconst ActionModal = ({ children, ...props }: ModalProps) => {\r\n   return (\r\n      <Modal {...props}>\r\n         {children}\r\n      </Modal>\r\n   )\r\n}\r\n\r\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\r\n   const m = Renderar.render(ActionModal as any, {\r\n      open: true,\r\n      ...props,\r\n      children,\r\n      onClosed: () => {\r\n         m.unrender()\r\n         if (props?.onClosed) {\r\n            props.onClosed()\r\n         }\r\n      }\r\n   })\r\n\r\n   return {\r\n      open: () => {\r\n         m.updateProps({ open: true })\r\n      },\r\n      close: () => {\r\n         m.updateProps({ open: false })\r\n      },\r\n   }\r\n};\r\n\r\nModal.close = () => {\r\n   Renderar.unrender(ActionModal as any)\r\n}\r\n\r\nexport default Modal;"],"names":[],"mappings":";;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useRef } from \"react\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport { Renderar, Tag } from \"@xanui/core\";\r\n\r\nexport type ModalProps = UseModalProps & {\r\n   children: ReactNode;\r\n   open: boolean;\r\n}\r\n\r\nconst Modal = ({ children, open, ...props }: ModalProps) => {\r\n   const ref = useRef<HTMLDivElement>(null);\r\n\r\n   const modal = useModal(<>{children}</>, {\r\n      ...props,\r\n      onClickOutside: () => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         }\r\n      },\r\n      slotProps: {\r\n         layer: {\r\n            portal: {\r\n               container: ref?.current || undefined\r\n            }\r\n         }\r\n      }\r\n   })\r\n\r\n   useEffect(() => {\r\n      if (open) {\r\n         modal.open()\r\n      } else {\r\n         modal.close()\r\n      }\r\n   }, [open])\r\n   return <Tag ref={ref}></Tag>\r\n}\r\n\r\nconst ActionModal = ({ children, ...props }: ModalProps) => {\r\n   return (\r\n      <Modal {...props}>\r\n         {children}\r\n      </Modal>\r\n   )\r\n}\r\n\r\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\r\n   const m = Renderar.render(ActionModal as any, {\r\n      open: true,\r\n      ...props,\r\n      children,\r\n      onClosed: () => {\r\n         m.unrender()\r\n         if (props?.onClosed) {\r\n            props.onClosed()\r\n         }\r\n      }\r\n   })\r\n\r\n   return {\r\n      open: () => {\r\n         m.updateProps({ open: true })\r\n      },\r\n      close: () => {\r\n         m.updateProps({ open: false })\r\n      },\r\n   }\r\n};\r\n\r\nModal.close = () => {\r\n   Renderar.unrender(ActionModal as any)\r\n}\r\n\r\nexport default Modal;"],"names":[],"mappings":";;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}

package/NoSSR/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["'use client'\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst NoSSR = ({ children }: any) => {\r\n    const [isClient, setIsClient] = useState(false);\r\n    useEffect(() => {\r\n        setIsClient(true);\r\n    }, [])\r\n    return isClient ? children : null\r\n}\r\n\r\nexport default NoSSR"],"names":[],"mappings":";;;;;AAGA;;;;;;AAMA;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst NoSSR = ({ children }: any) => {\r\n    const [isClient, setIsClient] = useState(false);\r\n    useEffect(() => {\r\n        setIsClient(true);\r\n    }, [])\r\n    return isClient ? children : null\r\n}\r\n\r\nexport default NoSSR"],"names":[],"mappings":";;;;;AAGA;;;;;;AAMA;;"}

package/NoSSR/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["'use client'\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst NoSSR = ({ children }: any) => {\r\n    const [isClient, setIsClient] = useState(false);\r\n    useEffect(() => {\r\n        setIsClient(true);\r\n    }, [])\r\n    return isClient ? children : null\r\n}\r\n\r\nexport default NoSSR"],"names":[],"mappings":";;;AAGA;;;;;;AAMA;;"}
+{"version":3,"file":"index.js","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst NoSSR = ({ children }: any) => {\r\n    const [isClient, setIsClient] = useState(false);\r\n    useEffect(() => {\r\n        setIsClient(true);\r\n    }, [])\r\n    return isClient ? children : null\r\n}\r\n\r\nexport default NoSSR"],"names":[],"mappings":";;;AAGA;;;;;;AAMA;;"}

package/Portal/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useEffect, useMemo } from 'react'\r\nimport ReactDOM from 'react-dom';\r\nimport { useTheme, ThemeProvider } from '@xanui/core';\r\nexport type PortalProps = {\r\n    children?: React.ReactNode;\r\n    appendTo?: HTMLElement;\r\n    container?: HTMLElement;\r\n}\r\n\r\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\r\n    const theme = useTheme()\r\n    appendTo = appendTo || document.body\r\n\r\n    const c = useMemo(() => {\r\n        let _con: HTMLElement = container || document.createElement(\"div\");\r\n        appendTo.appendChild(_con);\r\n        _con.className = \"xui-portal\"\r\n        return _con\r\n    }, [container])\r\n\r\n    useEffect(() => {\r\n        return () => {\r\n            (appendTo as any).removeChild(c);\r\n        }\r\n    }, [])\r\n\r\n    return ReactDOM.createPortal(\r\n        <ThemeProvider theme={theme.name}>\r\n            {children}\r\n        </ThemeProvider>,\r\n        c,\r\n    );\r\n}\r\n\r\nexport default Portal"],"names":[],"mappings":";;;;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from 'react'\r\nimport ReactDOM from 'react-dom';\r\nimport { useTheme, ThemeProvider } from '@xanui/core';\r\nexport type PortalProps = {\r\n    children?: React.ReactNode;\r\n    appendTo?: HTMLElement;\r\n    container?: HTMLElement;\r\n}\r\n\r\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\r\n    const theme = useTheme()\r\n    appendTo = appendTo || document.body\r\n\r\n    const c = useMemo(() => {\r\n        let _con: HTMLElement = container || document.createElement(\"div\");\r\n        appendTo.appendChild(_con);\r\n        _con.className = \"xui-portal\"\r\n        return _con\r\n    }, [container])\r\n\r\n    useEffect(() => {\r\n        return () => {\r\n            (appendTo as any).removeChild(c);\r\n        }\r\n    }, [])\r\n\r\n    return ReactDOM.createPortal(\r\n        <ThemeProvider theme={theme.name}>\r\n            {children}\r\n        </ThemeProvider>,\r\n        c,\r\n    );\r\n}\r\n\r\nexport default Portal"],"names":[],"mappings":";;;;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}

package/Portal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useEffect, useMemo } from 'react'\r\nimport ReactDOM from 'react-dom';\r\nimport { useTheme, ThemeProvider } from '@xanui/core';\r\nexport type PortalProps = {\r\n    children?: React.ReactNode;\r\n    appendTo?: HTMLElement;\r\n    container?: HTMLElement;\r\n}\r\n\r\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\r\n    const theme = useTheme()\r\n    appendTo = appendTo || document.body\r\n\r\n    const c = useMemo(() => {\r\n        let _con: HTMLElement = container || document.createElement(\"div\");\r\n        appendTo.appendChild(_con);\r\n        _con.className = \"xui-portal\"\r\n        return _con\r\n    }, [container])\r\n\r\n    useEffect(() => {\r\n        return () => {\r\n            (appendTo as any).removeChild(c);\r\n        }\r\n    }, [])\r\n\r\n    return ReactDOM.createPortal(\r\n        <ThemeProvider theme={theme.name}>\r\n            {children}\r\n        </ThemeProvider>,\r\n        c,\r\n    );\r\n}\r\n\r\nexport default Portal"],"names":[],"mappings":";;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from 'react'\r\nimport ReactDOM from 'react-dom';\r\nimport { useTheme, ThemeProvider } from '@xanui/core';\r\nexport type PortalProps = {\r\n    children?: React.ReactNode;\r\n    appendTo?: HTMLElement;\r\n    container?: HTMLElement;\r\n}\r\n\r\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\r\n    const theme = useTheme()\r\n    appendTo = appendTo || document.body\r\n\r\n    const c = useMemo(() => {\r\n        let _con: HTMLElement = container || document.createElement(\"div\");\r\n        appendTo.appendChild(_con);\r\n        _con.className = \"xui-portal\"\r\n        return _con\r\n    }, [container])\r\n\r\n    useEffect(() => {\r\n        return () => {\r\n            (appendTo as any).removeChild(c);\r\n        }\r\n    }, [])\r\n\r\n    return ReactDOM.createPortal(\r\n        <ThemeProvider theme={theme.name}>\r\n            {children}\r\n        </ThemeProvider>,\r\n        c,\r\n    );\r\n}\r\n\r\nexport default Portal"],"names":[],"mappings":";;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}

package/Scrollbar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    children?: ReactNode;\r\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n    scrollTo: (pos: number) => void;\r\n    scrollToBottom: () => void;\r\n    scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n    const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n    useImperativeHandle(ref, () => ({\r\n        scrollTo(pos: number) {\r\n            innerRef.current?.scrollTo({\r\n                top: pos,\r\n                behavior: \"smooth\"\r\n            });\r\n        },\r\n        scrollToBottom() {\r\n            if (!innerRef.current) return;\r\n            const ele = innerRef.current;\r\n            ele.scrollTo({\r\n                top: ele.scrollHeight,\r\n                behavior: \"smooth\"\r\n            });\r\n        },\r\n        scrollToTop() {\r\n            innerRef.current?.scrollTo({\r\n                top: 0,\r\n                behavior: \"smooth\"\r\n            });\r\n        }\r\n    }));\r\n\r\n    if (onScroll || onScrollEnd) {\r\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n            if (onScrollEnd) {\r\n                const ele: any = e.target\r\n                const scrollTop = ele.scrollTop\r\n                const scrollHeight = ele.scrollHeight\r\n                const clientHeight = ele.clientHeight\r\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n                isScrollDown && onScrollEnd(e)\r\n            }\r\n            onScroll && onScroll(e)\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            ref={innerRef}\r\n            baseClass='scrollbar'\r\n            sxr={{\r\n                height: \"100%\",\r\n                width: \"100%\",\r\n                overflow: \"auto\",\r\n            }}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAgBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;AAGJ;AAMY;AACA;AACA;;AAMhB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    children?: ReactNode;\r\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n    scrollTo: (pos: number) => void;\r\n    scrollToBottom: () => void;\r\n    scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n    const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n    useImperativeHandle(ref, () => ({\r\n        scrollTo(pos: number) {\r\n            innerRef.current?.scrollTo({\r\n                top: pos,\r\n                behavior: \"smooth\"\r\n            });\r\n        },\r\n        scrollToBottom() {\r\n            if (!innerRef.current) return;\r\n            const ele = innerRef.current;\r\n            ele.scrollTo({\r\n                top: ele.scrollHeight,\r\n                behavior: \"smooth\"\r\n            });\r\n        },\r\n        scrollToTop() {\r\n            innerRef.current?.scrollTo({\r\n                top: 0,\r\n                behavior: \"smooth\"\r\n            });\r\n        }\r\n    }));\r\n\r\n    if (onScroll || onScrollEnd) {\r\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n            if (onScrollEnd) {\r\n                const ele: any = e.target\r\n                const scrollTop = ele.scrollTop\r\n                const scrollHeight = ele.scrollHeight\r\n                const clientHeight = ele.clientHeight\r\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n                isScrollDown && onScrollEnd(e)\r\n            }\r\n            onScroll && onScroll(e)\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            ref={innerRef}\r\n            baseClass='scrollbar'\r\n            sxr={{\r\n                height: \"100%\",\r\n                width: \"100%\",\r\n                overflow: \"auto\",\r\n            }}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAgBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;AAGJ;AAMY;AACA;AACA;;AAMhB;;"}

package/Scrollbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    children?: ReactNode;\r\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n    scrollTo: (pos: number) => void;\r\n    scrollToBottom: () => void;\r\n    scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n    const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n    useImperativeHandle(ref, () => ({\r\n        scrollTo(pos: number) {\r\n            innerRef.current?.scrollTo({\r\n                top: pos,\r\n                behavior: \"smooth\"\r\n            });\r\n        },\r\n        scrollToBottom() {\r\n            if (!innerRef.current) return;\r\n            const ele = innerRef.current;\r\n            ele.scrollTo({\r\n                top: ele.scrollHeight,\r\n                behavior: \"smooth\"\r\n            });\r\n        },\r\n        scrollToTop() {\r\n            innerRef.current?.scrollTo({\r\n                top: 0,\r\n                behavior: \"smooth\"\r\n            });\r\n        }\r\n    }));\r\n\r\n    if (onScroll || onScrollEnd) {\r\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n            if (onScrollEnd) {\r\n                const ele: any = e.target\r\n                const scrollTop = ele.scrollTop\r\n                const scrollHeight = ele.scrollHeight\r\n                const clientHeight = ele.clientHeight\r\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n                isScrollDown && onScrollEnd(e)\r\n            }\r\n            onScroll && onScroll(e)\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            ref={innerRef}\r\n            baseClass='scrollbar'\r\n            sxr={{\r\n                height: \"100%\",\r\n                width: \"100%\",\r\n                overflow: \"auto\",\r\n            }}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAgBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;AAGJ;AAMY;AACA;AACA;;AAMhB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    children?: ReactNode;\r\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n    scrollTo: (pos: number) => void;\r\n    scrollToBottom: () => void;\r\n    scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n    const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n    useImperativeHandle(ref, () => ({\r\n        scrollTo(pos: number) {\r\n            innerRef.current?.scrollTo({\r\n                top: pos,\r\n                behavior: \"smooth\"\r\n            });\r\n        },\r\n        scrollToBottom() {\r\n            if (!innerRef.current) return;\r\n            const ele = innerRef.current;\r\n            ele.scrollTo({\r\n                top: ele.scrollHeight,\r\n                behavior: \"smooth\"\r\n            });\r\n        },\r\n        scrollToTop() {\r\n            innerRef.current?.scrollTo({\r\n                top: 0,\r\n                behavior: \"smooth\"\r\n            });\r\n        }\r\n    }));\r\n\r\n    if (onScroll || onScrollEnd) {\r\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n            if (onScrollEnd) {\r\n                const ele: any = e.target\r\n                const scrollTop = ele.scrollTop\r\n                const scrollHeight = ele.scrollHeight\r\n                const clientHeight = ele.clientHeight\r\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n                isScrollDown && onScrollEnd(e)\r\n            }\r\n            onScroll && onScroll(e)\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            ref={innerRef}\r\n            baseClass='scrollbar'\r\n            sxr={{\r\n                height: \"100%\",\r\n                width: \"100%\",\r\n                overflow: \"auto\",\r\n            }}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAgBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;AAGJ;AAMY;AACA;AACA;;AAMhB;;"}

package/Select/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport List, { ListProps } from '../List'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport Stack from '../Stack'\r\nimport { OptionProps } from '../Option'\r\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\r\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\r\nimport { useInterface, useMergeRefs } from '@xanui/core'\r\n\r\n\r\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\r\n    value?: string | number;\r\n    onChange?: (value: string | number) => void;\r\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\r\n\r\n    refs?: {\r\n        input?: React.Ref<any>;\r\n        menu?: React.Ref<any>;\r\n        list?: React.Ref<any>;\r\n    };\r\n    slotProps?: {\r\n        menu?: Omit<MenuProps, 'children' | 'target'>;\r\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\r\n        list?: Omit<ListProps, \"children\">\r\n    }\r\n}\r\n\r\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\r\n    let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\r\n    color ??= \"brand\"\r\n    variant ??= \"fill\"\r\n    const [target, setTarget] = useState<any>()\r\n    const conRef = useRef(null)\r\n    const { childs, selectedProps } = useMemo(() => {\r\n        let sProps: any = {}\r\n        const c = Children.map(children, (child: any) => {\r\n            let selected = child.props.value === value\r\n            if (selected) sProps = child.props\r\n            return cloneElement(child, {\r\n                value: undefined,\r\n                selected,\r\n                onClick: () => {\r\n                    setTarget(null)\r\n                    onChange && onChange(child.props.value)\r\n                }\r\n            })\r\n        })\r\n        return {\r\n            childs: c,\r\n            selectedProps: sProps as OptionProps\r\n        }\r\n    }, [children, value])\r\n\r\n    const mergeRefs = useMergeRefs(ref, conRef)\r\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                ref={mergeRefs}\r\n                color={color}\r\n                variant={variant === \"soft\" ? \"fill\" : variant}\r\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\r\n                readOnly\r\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\r\n                cursor=\"pointer\"\r\n                userSelect=\"none\"\r\n                startIcon={selectedProps.startIcon}\r\n                focused={!!target}\r\n                error={error}\r\n                helperText={helperText}\r\n                name={name}\r\n                {...slotProps?.input}\r\n                {...inputProps}\r\n                refs={{\r\n                    input: refs?.input,\r\n                    ...slotProps?.input?.refs\r\n                }}\r\n                slotProps={{\r\n                    rootContainer: {\r\n                        cursor: \"pointer\",\r\n                        userSelect: \"none\",\r\n                        ...(slotProps?.input?.slotProps?.container || {}),\r\n                        onClick: () => {\r\n                            if (!target) {\r\n                                toggleMenu()\r\n                            }\r\n                        },\r\n                    }\r\n                }}\r\n            />\r\n            <Menu\r\n                ref={refs?.menu}\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                {...slotProps?.menu}\r\n                slotProps={{\r\n                    ...slotProps?.menu?.slotProps,\r\n                    content: {\r\n                        mt: .5,\r\n                        ...slotProps?.menu?.content,\r\n                        width: conRef && (conRef?.current as any)?.clientWidth,\r\n                    }\r\n                }}\r\n                onClickOutside={(e) => {\r\n                    if ((conRef.current as any).contains(e.target)) return;\r\n                    toggleMenu()\r\n                }}\r\n            >\r\n                <List\r\n                    ref={refs?.list}\r\n                    {...slotProps?.list}\r\n                    color={color}\r\n                    variant={variant === \"outline\" ? \"fill\" : variant}\r\n                >\r\n                    {childs}\r\n                </List>\r\n            </Menu>\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport List, { ListProps } from '../List'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport Stack from '../Stack'\r\nimport { OptionProps } from '../Option'\r\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\r\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\r\nimport { useInterface, useMergeRefs } from '@xanui/core'\r\n\r\n\r\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\r\n    value?: string | number;\r\n    onChange?: (value: string | number) => void;\r\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\r\n\r\n    refs?: {\r\n        input?: React.Ref<any>;\r\n        menu?: React.Ref<any>;\r\n        list?: React.Ref<any>;\r\n    };\r\n    slotProps?: {\r\n        menu?: Omit<MenuProps, 'children' | 'target'>;\r\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\r\n        list?: Omit<ListProps, \"children\">\r\n    }\r\n}\r\n\r\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\r\n    let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\r\n    color ??= \"brand\"\r\n    variant ??= \"fill\"\r\n    const [target, setTarget] = useState<any>()\r\n    const conRef = useRef(null)\r\n    const { childs, selectedProps } = useMemo(() => {\r\n        let sProps: any = {}\r\n        const c = Children.map(children, (child: any) => {\r\n            let selected = child.props.value === value\r\n            if (selected) sProps = child.props\r\n            return cloneElement(child, {\r\n                value: undefined,\r\n                selected,\r\n                onClick: () => {\r\n                    setTarget(null)\r\n                    onChange && onChange(child.props.value)\r\n                }\r\n            })\r\n        })\r\n        return {\r\n            childs: c,\r\n            selectedProps: sProps as OptionProps\r\n        }\r\n    }, [children, value])\r\n\r\n    const mergeRefs = useMergeRefs(ref, conRef)\r\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                ref={mergeRefs}\r\n                color={color}\r\n                variant={variant === \"soft\" ? \"fill\" : variant}\r\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\r\n                readOnly\r\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\r\n                cursor=\"pointer\"\r\n                userSelect=\"none\"\r\n                startIcon={selectedProps.startIcon}\r\n                focused={!!target}\r\n                error={error}\r\n                helperText={helperText}\r\n                name={name}\r\n                {...slotProps?.input}\r\n                {...inputProps}\r\n                refs={{\r\n                    input: refs?.input,\r\n                    ...slotProps?.input?.refs\r\n                }}\r\n                slotProps={{\r\n                    rootContainer: {\r\n                        cursor: \"pointer\",\r\n                        userSelect: \"none\",\r\n                        ...(slotProps?.input?.slotProps?.container || {}),\r\n                        onClick: () => {\r\n                            if (!target) {\r\n                                toggleMenu()\r\n                            }\r\n                        },\r\n                    }\r\n                }}\r\n            />\r\n            <Menu\r\n                ref={refs?.menu}\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                {...slotProps?.menu}\r\n                slotProps={{\r\n                    ...slotProps?.menu?.slotProps,\r\n                    content: {\r\n                        mt: .5,\r\n                        ...slotProps?.menu?.content,\r\n                        width: conRef && (conRef?.current as any)?.clientWidth,\r\n                    }\r\n                }}\r\n                onClickOutside={(e) => {\r\n                    if ((conRef.current as any).contains(e.target)) return;\r\n                    toggleMenu()\r\n                }}\r\n            >\r\n                <List\r\n                    ref={refs?.list}\r\n                    {...slotProps?.list}\r\n                    color={color}\r\n                    variant={variant === \"outline\" ? \"fill\" : variant}\r\n                >\r\n                    {childs}\r\n                </List>\r\n            </Menu>\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}

package/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport List, { ListProps } from '../List'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport Stack from '../Stack'\r\nimport { OptionProps } from '../Option'\r\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\r\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\r\nimport { useInterface, useMergeRefs } from '@xanui/core'\r\n\r\n\r\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\r\n    value?: string | number;\r\n    onChange?: (value: string | number) => void;\r\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\r\n\r\n    refs?: {\r\n        input?: React.Ref<any>;\r\n        menu?: React.Ref<any>;\r\n        list?: React.Ref<any>;\r\n    };\r\n    slotProps?: {\r\n        menu?: Omit<MenuProps, 'children' | 'target'>;\r\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\r\n        list?: Omit<ListProps, \"children\">\r\n    }\r\n}\r\n\r\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\r\n    let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\r\n    color ??= \"brand\"\r\n    variant ??= \"fill\"\r\n    const [target, setTarget] = useState<any>()\r\n    const conRef = useRef(null)\r\n    const { childs, selectedProps } = useMemo(() => {\r\n        let sProps: any = {}\r\n        const c = Children.map(children, (child: any) => {\r\n            let selected = child.props.value === value\r\n            if (selected) sProps = child.props\r\n            return cloneElement(child, {\r\n                value: undefined,\r\n                selected,\r\n                onClick: () => {\r\n                    setTarget(null)\r\n                    onChange && onChange(child.props.value)\r\n                }\r\n            })\r\n        })\r\n        return {\r\n            childs: c,\r\n            selectedProps: sProps as OptionProps\r\n        }\r\n    }, [children, value])\r\n\r\n    const mergeRefs = useMergeRefs(ref, conRef)\r\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                ref={mergeRefs}\r\n                color={color}\r\n                variant={variant === \"soft\" ? \"fill\" : variant}\r\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\r\n                readOnly\r\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\r\n                cursor=\"pointer\"\r\n                userSelect=\"none\"\r\n                startIcon={selectedProps.startIcon}\r\n                focused={!!target}\r\n                error={error}\r\n                helperText={helperText}\r\n                name={name}\r\n                {...slotProps?.input}\r\n                {...inputProps}\r\n                refs={{\r\n                    input: refs?.input,\r\n                    ...slotProps?.input?.refs\r\n                }}\r\n                slotProps={{\r\n                    rootContainer: {\r\n                        cursor: \"pointer\",\r\n                        userSelect: \"none\",\r\n                        ...(slotProps?.input?.slotProps?.container || {}),\r\n                        onClick: () => {\r\n                            if (!target) {\r\n                                toggleMenu()\r\n                            }\r\n                        },\r\n                    }\r\n                }}\r\n            />\r\n            <Menu\r\n                ref={refs?.menu}\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                {...slotProps?.menu}\r\n                slotProps={{\r\n                    ...slotProps?.menu?.slotProps,\r\n                    content: {\r\n                        mt: .5,\r\n                        ...slotProps?.menu?.content,\r\n                        width: conRef && (conRef?.current as any)?.clientWidth,\r\n                    }\r\n                }}\r\n                onClickOutside={(e) => {\r\n                    if ((conRef.current as any).contains(e.target)) return;\r\n                    toggleMenu()\r\n                }}\r\n            >\r\n                <List\r\n                    ref={refs?.list}\r\n                    {...slotProps?.list}\r\n                    color={color}\r\n                    variant={variant === \"outline\" ? \"fill\" : variant}\r\n                >\r\n                    {childs}\r\n                </List>\r\n            </Menu>\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport List, { ListProps } from '../List'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport Stack from '../Stack'\r\nimport { OptionProps } from '../Option'\r\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\r\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\r\nimport { useInterface, useMergeRefs } from '@xanui/core'\r\n\r\n\r\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\r\n    value?: string | number;\r\n    onChange?: (value: string | number) => void;\r\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\r\n\r\n    refs?: {\r\n        input?: React.Ref<any>;\r\n        menu?: React.Ref<any>;\r\n        list?: React.Ref<any>;\r\n    };\r\n    slotProps?: {\r\n        menu?: Omit<MenuProps, 'children' | 'target'>;\r\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\r\n        list?: Omit<ListProps, \"children\">\r\n    }\r\n}\r\n\r\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\r\n    let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\r\n    color ??= \"brand\"\r\n    variant ??= \"fill\"\r\n    const [target, setTarget] = useState<any>()\r\n    const conRef = useRef(null)\r\n    const { childs, selectedProps } = useMemo(() => {\r\n        let sProps: any = {}\r\n        const c = Children.map(children, (child: any) => {\r\n            let selected = child.props.value === value\r\n            if (selected) sProps = child.props\r\n            return cloneElement(child, {\r\n                value: undefined,\r\n                selected,\r\n                onClick: () => {\r\n                    setTarget(null)\r\n                    onChange && onChange(child.props.value)\r\n                }\r\n            })\r\n        })\r\n        return {\r\n            childs: c,\r\n            selectedProps: sProps as OptionProps\r\n        }\r\n    }, [children, value])\r\n\r\n    const mergeRefs = useMergeRefs(ref, conRef)\r\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                ref={mergeRefs}\r\n                color={color}\r\n                variant={variant === \"soft\" ? \"fill\" : variant}\r\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\r\n                readOnly\r\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\r\n                cursor=\"pointer\"\r\n                userSelect=\"none\"\r\n                startIcon={selectedProps.startIcon}\r\n                focused={!!target}\r\n                error={error}\r\n                helperText={helperText}\r\n                name={name}\r\n                {...slotProps?.input}\r\n                {...inputProps}\r\n                refs={{\r\n                    input: refs?.input,\r\n                    ...slotProps?.input?.refs\r\n                }}\r\n                slotProps={{\r\n                    rootContainer: {\r\n                        cursor: \"pointer\",\r\n                        userSelect: \"none\",\r\n                        ...(slotProps?.input?.slotProps?.container || {}),\r\n                        onClick: () => {\r\n                            if (!target) {\r\n                                toggleMenu()\r\n                            }\r\n                        },\r\n                    }\r\n                }}\r\n            />\r\n            <Menu\r\n                ref={refs?.menu}\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                {...slotProps?.menu}\r\n                slotProps={{\r\n                    ...slotProps?.menu?.slotProps,\r\n                    content: {\r\n                        mt: .5,\r\n                        ...slotProps?.menu?.content,\r\n                        width: conRef && (conRef?.current as any)?.clientWidth,\r\n                    }\r\n                }}\r\n                onClickOutside={(e) => {\r\n                    if ((conRef.current as any).contains(e.target)) return;\r\n                    toggleMenu()\r\n                }}\r\n            >\r\n                <List\r\n                    ref={refs?.list}\r\n                    {...slotProps?.list}\r\n                    color={color}\r\n                    variant={variant === \"outline\" ? \"fill\" : variant}\r\n                >\r\n                    {childs}\r\n                </List>\r\n            </Menu>\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}

package/Switch/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Switch/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    disabled?: useBreakpointPropsType<boolean>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    icon?: useBreakpointPropsType<ReactElement>;\r\n    slotProps?: {\r\n        thumb?: Omit<TagProps, 'children'>;\r\n        track?: Omit<TagProps, 'children'>;\r\n    }\r\n}\r\n\r\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\r\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    if (disabled) _p.disabled = disabled\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (icon) _p.icon = icon\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size ?? \"medium\"\r\n    color = p.color ?? \"brand\"\r\n    disabled = p.disabled\r\n    trackSize = p.trackSize\r\n    icon = p.icon\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n\r\n    onChange = onChange || (() => set(!c));\r\n\r\n    let sizes: any = {\r\n        small: 32,\r\n        medium: 48,\r\n        large: 60\r\n    }\r\n    let _size = sizes[size as any] || size\r\n\r\n    let height = (_size / 2)\r\n    trackSize ??= height + 4\r\n    let isNormalSize = (height + 4) === trackSize\r\n    let transform = checked ? \"92%\" : \"8%\"\r\n    if (!isNormalSize) {\r\n        transform = checked ? \"100%\" : \"-10%\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            disabled={disabled}\r\n            sxr={{\r\n                width: _size,\r\n                height: height,\r\n                position: \"relative\",\r\n                cursor: \"pointer\",\r\n                display: \"inline-block\"\r\n            }}\r\n            onClick={onChange}\r\n        >\r\n            <Tag\r\n                {...slotProps?.track}\r\n                baseClass='switch-track-bar'\r\n                sxr={{\r\n                    width: _size,\r\n                    height: trackSize,\r\n                    borderRadius: height,\r\n                    position: 'absolute',\r\n                    top: \"50%\",\r\n                    transform: \"translateY(-50%)\",\r\n                    bgcolor: checked ? color : \"divider\",\r\n\r\n                }}\r\n            >\r\n            </Tag>\r\n            <Tag\r\n                {...slotProps?.thumb}\r\n                baseClass='switch-thumb'\r\n                sxr={{\r\n                    transition: \"all .25s\",\r\n                    width: height,\r\n                    height: height,\r\n                    radius: height,\r\n                    bgcolor: \"#FFFFFF\",\r\n                    position: \"absolute\",\r\n                    top: \"50%\",\r\n                    border: isNormalSize ? 0 : 1,\r\n                    left: 0,\r\n                    transform: `translate(${transform}, -50%)`,\r\n                    display: \"flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\"\r\n                }}\r\n            >\r\n                {\r\n                    icon\r\n                }\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                type=\"radio\"\r\n                readOnly\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Switch\r\n"],"names":[],"mappings":";;;;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    disabled?: useBreakpointPropsType<boolean>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    icon?: useBreakpointPropsType<ReactElement>;\r\n    slotProps?: {\r\n        thumb?: Omit<TagProps, 'children'>;\r\n        track?: Omit<TagProps, 'children'>;\r\n    }\r\n}\r\n\r\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\r\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    if (disabled) _p.disabled = disabled\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (icon) _p.icon = icon\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size ?? \"medium\"\r\n    color = p.color ?? \"brand\"\r\n    disabled = p.disabled\r\n    trackSize = p.trackSize\r\n    icon = p.icon\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n\r\n    onChange = onChange || (() => set(!c));\r\n\r\n    let sizes: any = {\r\n        small: 32,\r\n        medium: 48,\r\n        large: 60\r\n    }\r\n    let _size = sizes[size as any] || size\r\n\r\n    let height = (_size / 2)\r\n    trackSize ??= height + 4\r\n    let isNormalSize = (height + 4) === trackSize\r\n    let transform = checked ? \"92%\" : \"8%\"\r\n    if (!isNormalSize) {\r\n        transform = checked ? \"100%\" : \"-10%\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            disabled={disabled}\r\n            sxr={{\r\n                width: _size,\r\n                height: height,\r\n                position: \"relative\",\r\n                cursor: \"pointer\",\r\n                display: \"inline-block\"\r\n            }}\r\n            onClick={onChange}\r\n        >\r\n            <Tag\r\n                {...slotProps?.track}\r\n                baseClass='switch-track-bar'\r\n                sxr={{\r\n                    width: _size,\r\n                    height: trackSize,\r\n                    borderRadius: height,\r\n                    position: 'absolute',\r\n                    top: \"50%\",\r\n                    transform: \"translateY(-50%)\",\r\n                    bgcolor: checked ? color : \"divider\",\r\n\r\n                }}\r\n            >\r\n            </Tag>\r\n            <Tag\r\n                {...slotProps?.thumb}\r\n                baseClass='switch-thumb'\r\n                sxr={{\r\n                    transition: \"all .25s\",\r\n                    width: height,\r\n                    height: height,\r\n                    radius: height,\r\n                    bgcolor: \"#FFFFFF\",\r\n                    position: \"absolute\",\r\n                    top: \"50%\",\r\n                    border: isNormalSize ? 0 : 1,\r\n                    left: 0,\r\n                    transform: `translate(${transform}, -50%)`,\r\n                    display: \"flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\"\r\n                }}\r\n            >\r\n                {\r\n                    icon\r\n                }\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                type=\"radio\"\r\n                readOnly\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Switch\r\n"],"names":[],"mappings":";;;;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}

package/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Switch/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    disabled?: useBreakpointPropsType<boolean>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    icon?: useBreakpointPropsType<ReactElement>;\r\n    slotProps?: {\r\n        thumb?: Omit<TagProps, 'children'>;\r\n        track?: Omit<TagProps, 'children'>;\r\n    }\r\n}\r\n\r\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\r\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    if (disabled) _p.disabled = disabled\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (icon) _p.icon = icon\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size ?? \"medium\"\r\n    color = p.color ?? \"brand\"\r\n    disabled = p.disabled\r\n    trackSize = p.trackSize\r\n    icon = p.icon\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n\r\n    onChange = onChange || (() => set(!c));\r\n\r\n    let sizes: any = {\r\n        small: 32,\r\n        medium: 48,\r\n        large: 60\r\n    }\r\n    let _size = sizes[size as any] || size\r\n\r\n    let height = (_size / 2)\r\n    trackSize ??= height + 4\r\n    let isNormalSize = (height + 4) === trackSize\r\n    let transform = checked ? \"92%\" : \"8%\"\r\n    if (!isNormalSize) {\r\n        transform = checked ? \"100%\" : \"-10%\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            disabled={disabled}\r\n            sxr={{\r\n                width: _size,\r\n                height: height,\r\n                position: \"relative\",\r\n                cursor: \"pointer\",\r\n                display: \"inline-block\"\r\n            }}\r\n            onClick={onChange}\r\n        >\r\n            <Tag\r\n                {...slotProps?.track}\r\n                baseClass='switch-track-bar'\r\n                sxr={{\r\n                    width: _size,\r\n                    height: trackSize,\r\n                    borderRadius: height,\r\n                    position: 'absolute',\r\n                    top: \"50%\",\r\n                    transform: \"translateY(-50%)\",\r\n                    bgcolor: checked ? color : \"divider\",\r\n\r\n                }}\r\n            >\r\n            </Tag>\r\n            <Tag\r\n                {...slotProps?.thumb}\r\n                baseClass='switch-thumb'\r\n                sxr={{\r\n                    transition: \"all .25s\",\r\n                    width: height,\r\n                    height: height,\r\n                    radius: height,\r\n                    bgcolor: \"#FFFFFF\",\r\n                    position: \"absolute\",\r\n                    top: \"50%\",\r\n                    border: isNormalSize ? 0 : 1,\r\n                    left: 0,\r\n                    transform: `translate(${transform}, -50%)`,\r\n                    display: \"flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\"\r\n                }}\r\n            >\r\n                {\r\n                    icon\r\n                }\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                type=\"radio\"\r\n                readOnly\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Switch\r\n"],"names":[],"mappings":";;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    disabled?: useBreakpointPropsType<boolean>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    icon?: useBreakpointPropsType<ReactElement>;\r\n    slotProps?: {\r\n        thumb?: Omit<TagProps, 'children'>;\r\n        track?: Omit<TagProps, 'children'>;\r\n    }\r\n}\r\n\r\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\r\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    if (disabled) _p.disabled = disabled\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (icon) _p.icon = icon\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size ?? \"medium\"\r\n    color = p.color ?? \"brand\"\r\n    disabled = p.disabled\r\n    trackSize = p.trackSize\r\n    icon = p.icon\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n\r\n    onChange = onChange || (() => set(!c));\r\n\r\n    let sizes: any = {\r\n        small: 32,\r\n        medium: 48,\r\n        large: 60\r\n    }\r\n    let _size = sizes[size as any] || size\r\n\r\n    let height = (_size / 2)\r\n    trackSize ??= height + 4\r\n    let isNormalSize = (height + 4) === trackSize\r\n    let transform = checked ? \"92%\" : \"8%\"\r\n    if (!isNormalSize) {\r\n        transform = checked ? \"100%\" : \"-10%\"\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            disabled={disabled}\r\n            sxr={{\r\n                width: _size,\r\n                height: height,\r\n                position: \"relative\",\r\n                cursor: \"pointer\",\r\n                display: \"inline-block\"\r\n            }}\r\n            onClick={onChange}\r\n        >\r\n            <Tag\r\n                {...slotProps?.track}\r\n                baseClass='switch-track-bar'\r\n                sxr={{\r\n                    width: _size,\r\n                    height: trackSize,\r\n                    borderRadius: height,\r\n                    position: 'absolute',\r\n                    top: \"50%\",\r\n                    transform: \"translateY(-50%)\",\r\n                    bgcolor: checked ? color : \"divider\",\r\n\r\n                }}\r\n            >\r\n            </Tag>\r\n            <Tag\r\n                {...slotProps?.thumb}\r\n                baseClass='switch-thumb'\r\n                sxr={{\r\n                    transition: \"all .25s\",\r\n                    width: height,\r\n                    height: height,\r\n                    radius: height,\r\n                    bgcolor: \"#FFFFFF\",\r\n                    position: \"absolute\",\r\n                    top: \"50%\",\r\n                    border: isNormalSize ? 0 : 1,\r\n                    left: 0,\r\n                    transform: `translate(${transform}, -50%)`,\r\n                    display: \"flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\"\r\n                }}\r\n            >\r\n                {\r\n                    icon\r\n                }\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                type=\"radio\"\r\n                readOnly\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Switch\r\n"],"names":[],"mappings":";;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}

package/Tab/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React from 'react'\r\nimport { TagComponentType, useInterface } from '@xanui/core';\r\nimport Button, { ButtonProps } from '../Button';\r\n\r\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\r\n    value?: string | number\r\n}\r\n\r\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\r\n    let [_props] = useInterface<any>(\"Tab\", props, {})\r\n    return (\r\n        <Button\r\n            {..._props}\r\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Button>\r\n    )\r\n})\r\n\r\nexport default Tab"],"names":[],"mappings":";;;;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from 'react'\r\nimport { TagComponentType, useInterface } from '@xanui/core';\r\nimport Button, { ButtonProps } from '../Button';\r\n\r\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\r\n    value?: string | number\r\n}\r\n\r\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\r\n    let [_props] = useInterface<any>(\"Tab\", props, {})\r\n    return (\r\n        <Button\r\n            {..._props}\r\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Button>\r\n    )\r\n})\r\n\r\nexport default Tab"],"names":[],"mappings":";;;;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}

package/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React from 'react'\r\nimport { TagComponentType, useInterface } from '@xanui/core';\r\nimport Button, { ButtonProps } from '../Button';\r\n\r\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\r\n    value?: string | number\r\n}\r\n\r\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\r\n    let [_props] = useInterface<any>(\"Tab\", props, {})\r\n    return (\r\n        <Button\r\n            {..._props}\r\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Button>\r\n    )\r\n})\r\n\r\nexport default Tab"],"names":[],"mappings":";;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from 'react'\r\nimport { TagComponentType, useInterface } from '@xanui/core';\r\nimport Button, { ButtonProps } from '../Button';\r\n\r\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\r\n    value?: string | number\r\n}\r\n\r\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\r\n    let [_props] = useInterface<any>(\"Tab\", props, {})\r\n    return (\r\n        <Button\r\n            {..._props}\r\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Button>\r\n    )\r\n})\r\n\r\nexport default Tab"],"names":[],"mappings":";;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}

package/TablePagination/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\r\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\r\n    page: number;\r\n    total: number;\r\n    perpage?: number;\r\n    perpages?: number[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    onChange?: (state: TablePaginationState) => void;\r\n\r\n    slotProps?: {\r\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n        select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\r\n    }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n    color ??= \"default\"\r\n    variant ??= \"fill\"\r\n    perpages ??= [30, 50, 100]\r\n    perpage = perpage || perpages[0] as number\r\n    const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n\r\n    const chunks = useMemo(() => {\r\n        const chunks: any = [];\r\n        let _page = 1;\r\n        for (let from = 0; from < total; from += perpage) {\r\n            const to = Math.min(from + perpage, total)\r\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n            _page++\r\n        }\r\n        return chunks\r\n    }, [perpage, perpages, total])\r\n\r\n    if (!chunks.length) {\r\n        return <></>\r\n    }\r\n\r\n    const current = chunks[page] || chunks[1]\r\n    const hasNext = !!chunks[page + 1]\r\n    const hasPrev = !!chunks[page - 1]\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: \"row\",\r\n                gap: 1,\r\n                alignItems: \"center\"\r\n            }}\r\n            baseClass='table-pagination'\r\n            ref={ref}\r\n        >\r\n            {\r\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n                    <Text fontSize=\"button\">PER PAGE</Text>\r\n                    <Select\r\n                        {...slotProps?.select}\r\n                        width={(perpage.toString().length * 10) + 60}\r\n                        minWidth={\"auto\"}\r\n                        maxWidth={\"auto\"}\r\n                        value={perpage}\r\n                        onChange={(value: any) => {\r\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\r\n                        }}\r\n                    >\r\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n                    </Select>\r\n                </Tag>\r\n            }\r\n            <Tag\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    gap: 1,\r\n                    alignItems: 'center'\r\n                }}\r\n            >\r\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n                <Text color=\"text.secondary\">of</Text>\r\n                <Text fontSize=\"button\">{total}</Text>\r\n            </Tag>\r\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasPrev}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page - 1]);\r\n                    }}\r\n                >\r\n                    <PrevIcon />\r\n                </IconButton>\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasNext}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page + 1]);\r\n                    }}\r\n                >\r\n                    <NextIcon />\r\n                </IconButton>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\r\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\r\n    page: number;\r\n    total: number;\r\n    perpage?: number;\r\n    perpages?: number[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    onChange?: (state: TablePaginationState) => void;\r\n\r\n    slotProps?: {\r\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n        select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\r\n    }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n    color ??= \"default\"\r\n    variant ??= \"fill\"\r\n    perpages ??= [30, 50, 100]\r\n    perpage = perpage || perpages[0] as number\r\n    const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n\r\n    const chunks = useMemo(() => {\r\n        const chunks: any = [];\r\n        let _page = 1;\r\n        for (let from = 0; from < total; from += perpage) {\r\n            const to = Math.min(from + perpage, total)\r\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n            _page++\r\n        }\r\n        return chunks\r\n    }, [perpage, perpages, total])\r\n\r\n    if (!chunks.length) {\r\n        return <></>\r\n    }\r\n\r\n    const current = chunks[page] || chunks[1]\r\n    const hasNext = !!chunks[page + 1]\r\n    const hasPrev = !!chunks[page - 1]\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: \"row\",\r\n                gap: 1,\r\n                alignItems: \"center\"\r\n            }}\r\n            baseClass='table-pagination'\r\n            ref={ref}\r\n        >\r\n            {\r\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n                    <Text fontSize=\"button\">PER PAGE</Text>\r\n                    <Select\r\n                        {...slotProps?.select}\r\n                        width={(perpage.toString().length * 10) + 60}\r\n                        minWidth={\"auto\"}\r\n                        maxWidth={\"auto\"}\r\n                        value={perpage}\r\n                        onChange={(value: any) => {\r\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\r\n                        }}\r\n                    >\r\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n                    </Select>\r\n                </Tag>\r\n            }\r\n            <Tag\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    gap: 1,\r\n                    alignItems: 'center'\r\n                }}\r\n            >\r\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n                <Text color=\"text.secondary\">of</Text>\r\n                <Text fontSize=\"button\">{total}</Text>\r\n            </Tag>\r\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasPrev}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page - 1]);\r\n                    }}\r\n                >\r\n                    <PrevIcon />\r\n                </IconButton>\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasNext}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page + 1]);\r\n                    }}\r\n                >\r\n                    <NextIcon />\r\n                </IconButton>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}

package/TablePagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\r\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\r\n    page: number;\r\n    total: number;\r\n    perpage?: number;\r\n    perpages?: number[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    onChange?: (state: TablePaginationState) => void;\r\n\r\n    slotProps?: {\r\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n        select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\r\n    }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n    color ??= \"default\"\r\n    variant ??= \"fill\"\r\n    perpages ??= [30, 50, 100]\r\n    perpage = perpage || perpages[0] as number\r\n    const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n\r\n    const chunks = useMemo(() => {\r\n        const chunks: any = [];\r\n        let _page = 1;\r\n        for (let from = 0; from < total; from += perpage) {\r\n            const to = Math.min(from + perpage, total)\r\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n            _page++\r\n        }\r\n        return chunks\r\n    }, [perpage, perpages, total])\r\n\r\n    if (!chunks.length) {\r\n        return <></>\r\n    }\r\n\r\n    const current = chunks[page] || chunks[1]\r\n    const hasNext = !!chunks[page + 1]\r\n    const hasPrev = !!chunks[page - 1]\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: \"row\",\r\n                gap: 1,\r\n                alignItems: \"center\"\r\n            }}\r\n            baseClass='table-pagination'\r\n            ref={ref}\r\n        >\r\n            {\r\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n                    <Text fontSize=\"button\">PER PAGE</Text>\r\n                    <Select\r\n                        {...slotProps?.select}\r\n                        width={(perpage.toString().length * 10) + 60}\r\n                        minWidth={\"auto\"}\r\n                        maxWidth={\"auto\"}\r\n                        value={perpage}\r\n                        onChange={(value: any) => {\r\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\r\n                        }}\r\n                    >\r\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n                    </Select>\r\n                </Tag>\r\n            }\r\n            <Tag\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    gap: 1,\r\n                    alignItems: 'center'\r\n                }}\r\n            >\r\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n                <Text color=\"text.secondary\">of</Text>\r\n                <Text fontSize=\"button\">{total}</Text>\r\n            </Tag>\r\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasPrev}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page - 1]);\r\n                    }}\r\n                >\r\n                    <PrevIcon />\r\n                </IconButton>\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasNext}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page + 1]);\r\n                    }}\r\n                >\r\n                    <NextIcon />\r\n                </IconButton>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\r\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\r\n    page: number;\r\n    total: number;\r\n    perpage?: number;\r\n    perpages?: number[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    onChange?: (state: TablePaginationState) => void;\r\n\r\n    slotProps?: {\r\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n        select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\r\n    }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n    color ??= \"default\"\r\n    variant ??= \"fill\"\r\n    perpages ??= [30, 50, 100]\r\n    perpage = perpage || perpages[0] as number\r\n    const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n\r\n    const chunks = useMemo(() => {\r\n        const chunks: any = [];\r\n        let _page = 1;\r\n        for (let from = 0; from < total; from += perpage) {\r\n            const to = Math.min(from + perpage, total)\r\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n            _page++\r\n        }\r\n        return chunks\r\n    }, [perpage, perpages, total])\r\n\r\n    if (!chunks.length) {\r\n        return <></>\r\n    }\r\n\r\n    const current = chunks[page] || chunks[1]\r\n    const hasNext = !!chunks[page + 1]\r\n    const hasPrev = !!chunks[page - 1]\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: \"row\",\r\n                gap: 1,\r\n                alignItems: \"center\"\r\n            }}\r\n            baseClass='table-pagination'\r\n            ref={ref}\r\n        >\r\n            {\r\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n                    <Text fontSize=\"button\">PER PAGE</Text>\r\n                    <Select\r\n                        {...slotProps?.select}\r\n                        width={(perpage.toString().length * 10) + 60}\r\n                        minWidth={\"auto\"}\r\n                        maxWidth={\"auto\"}\r\n                        value={perpage}\r\n                        onChange={(value: any) => {\r\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\r\n                        }}\r\n                    >\r\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n                    </Select>\r\n                </Tag>\r\n            }\r\n            <Tag\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    gap: 1,\r\n                    alignItems: 'center'\r\n                }}\r\n            >\r\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n                <Text color=\"text.secondary\">of</Text>\r\n                <Text fontSize=\"button\">{total}</Text>\r\n            </Tag>\r\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasPrev}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page - 1]);\r\n                    }}\r\n                >\r\n                    <PrevIcon />\r\n                </IconButton>\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasNext}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page + 1]);\r\n                    }}\r\n                >\r\n                    <NextIcon />\r\n                </IconButton>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}