@xanui/ui 1.1.68 → 1.2.0

package/Input/index.js.map

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

package/Label/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/Label/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"text.primary\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"text.primary\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}

package/Label/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"text.primary\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"text.primary\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}

package/List/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/List/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    const template = useColorTemplate(color, variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"soft\")\n\n\n    return (\n        <ListContext.Provider value={{ size }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    \"& .list-item-icon\": {\n                        color: \"text.secondary\"\n                    },\n                    \"& .list-item-text\": {\n                        color: \"text.primary\"\n                    },\n                    \"& .list-item-subtitle\": {\n                        color: \"text.secondary\"\n                    },\n\n                    \"& .xui-list-item\": {\n                        ...defaultTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverColor === 'default' ? \"text.secondary\" : defaultTemplate.primary.color\n                        },\n\n                    },\n                    \"& .xui-list-item:not(.list-item-selected):hover\": {\n                        ...hoverTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverTemplate.primary.color\n                        },\n                    },\n                    \"& .xui-list-item.list-item-selected\": {\n                        ...template.primary,\n                        \"& .list-item-icon\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: template.primary.color\n                        },\n                        border: \"0\"\n                    },\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","ListContext","Tag"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    const template = useColorTemplate(color, variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"soft\")\n\n\n    return (\n        <ListContext.Provider value={{ size }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    \"& .list-item-icon\": {\n                        color: \"text.secondary\"\n                    },\n                    \"& .list-item-text\": {\n                        color: \"text.primary\"\n                    },\n                    \"& .list-item-subtitle\": {\n                        color: \"text.secondary\"\n                    },\n\n                    \"& .xui-list-item\": {\n                        ...defaultTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverColor === 'default' ? \"text.secondary\" : defaultTemplate.primary.color\n                        },\n\n                    },\n                    \"& .xui-list-item:not(.list-item-selected):hover\": {\n                        ...hoverTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverTemplate.primary.color\n                        },\n                    },\n                    \"& .xui-list-item.list-item-selected\": {\n                        ...template.primary,\n                        \"& .list-item-icon\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: template.primary.color\n                        },\n                        border: \"0\"\n                    },\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;;;AAYA;;AAAkE;AAC9D;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;;;;AAOA;AAWoB;AACH;AAEG;AACH;AAEG;AACH;AAKO;AACH;AAEG;AACH;AAEG;AACH;AAMG;AACH;AAEG;AACH;AAEG;AACH;AAKG;AACH;AAEG;AACH;AAEG;AACH;AAWzB;;"}

package/List/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    const template = useColorTemplate(color, variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"soft\")\n\n\n    return (\n        <ListContext.Provider value={{ size }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    \"& .list-item-icon\": {\n                        color: \"text.secondary\"\n                    },\n                    \"& .list-item-text\": {\n                        color: \"text.primary\"\n                    },\n                    \"& .list-item-subtitle\": {\n                        color: \"text.secondary\"\n                    },\n\n                    \"& .xui-list-item\": {\n                        ...defaultTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverColor === 'default' ? \"text.secondary\" : defaultTemplate.primary.color\n                        },\n\n                    },\n                    \"& .xui-list-item:not(.list-item-selected):hover\": {\n                        ...hoverTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverTemplate.primary.color\n                        },\n                    },\n                    \"& .xui-list-item.list-item-selected\": {\n                        ...template.primary,\n                        \"& .list-item-icon\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: template.primary.color\n                        },\n                        border: \"0\"\n                    },\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    const template = useColorTemplate(color, variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"soft\")\n\n\n    return (\n        <ListContext.Provider value={{ size }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    \"& .list-item-icon\": {\n                        color: \"text.secondary\"\n                    },\n                    \"& .list-item-text\": {\n                        color: \"text.primary\"\n                    },\n                    \"& .list-item-subtitle\": {\n                        color: \"text.secondary\"\n                    },\n\n                    \"& .xui-list-item\": {\n                        ...defaultTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverColor === 'default' ? \"text.secondary\" : defaultTemplate.primary.color\n                        },\n\n                    },\n                    \"& .xui-list-item:not(.list-item-selected):hover\": {\n                        ...hoverTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverTemplate.primary.color\n                        },\n                    },\n                    \"& .xui-list-item.list-item-selected\": {\n                        ...template.primary,\n                        \"& .list-item-icon\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: template.primary.color\n                        },\n                        border: \"0\"\n                    },\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;AAYA;;AAAkE;AAC9D;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;;;;AAOA;AAWoB;AACH;AAEG;AACH;AAEG;AACH;AAKO;AACH;AAEG;AACH;AAEG;AACH;AAMG;AACH;AAEG;AACH;AAEG;AACH;AAKG;AACH;AAEG;AACH;AAEG;AACH;AAWzB;;"}

package/ListItem/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/ListItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, size, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    const ctx = useListContext()\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    size = p.size ?? ctx?.size ?? \"medium\"\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sizes[size as any]\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nListItem.displayName = \"ListItem\"\n\nexport default ListItem"],"names":["__rest","useInterface","useBreakpointProps","useListContext","_jsxs","Tag","_jsx","Text"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, size, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    const ctx = useListContext()\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    size = p.size ?? ctx?.size ?? \"medium\"\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sizes[size as any]\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nListItem.displayName = \"ListItem\"\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;;;AAeA;;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAU;AACV;AACA;AAEA;AACA;AACA;AACA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;;AA2CT;AAEA;;"}

package/ListItem/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';

package/ListItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, size, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    const ctx = useListContext()\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    size = p.size ?? ctx?.size ?? \"medium\"\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sizes[size as any]\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nListItem.displayName = \"ListItem\"\n\nexport default ListItem"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAeA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAA2E,EAAE,GAAmB,KAAI;;AAApG,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAvD,wDAAyD,CAAF;AACzH,IAAA,IAAI,OAA2B,YAAY,CAAM,UAAU,EAAE,IAAI,EAAE,EAAE,CAAC,EAAjE,EAAE,QAAQ,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,CAAA,UAAA,CAAsB,CAA2C;IACtE,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,MAAM,GAAG,GAAG,cAAc,EAAE;AAE5B,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AACrB,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,GAAG,KAAA,IAAA,IAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,QAAQ;AAEtC,IAAA,IAAI,KAAK,GAAQ;AACb,QAAA,KAAK,EAAE;AACH,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,EAAE,EAAE,GAAG;AACP,YAAA,EAAE,EAAE,CAAC;AACL,YAAA,SAAS,EAAE,EAAE;AAChB,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,EAAE,EAAE,CAAC;AACL,YAAA,EAAE,EAAE,GAAG;AACP,YAAA,SAAS,EAAE,EAAE;AAChB,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,EAAE,EAAE,GAAG;AACP,YAAA,EAAE,EAAE,CAAC;AACL,YAAA,SAAS,EAAE,EAAE;AAChB;KACJ;IAED,QACIA,KAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,IAAI,EAAA,EACV,KAAK,EAAA,EACT,GAAG,kBACC,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,GAAG,EACf,UAAU,EAAE,QAAQ,EACpB,UAAU,EAAE,GAAG,IACZ,KAAK,CAAC,IAAW,CAAC,CAAA,EAEzB,SAAS,EAAC,WAAW,EACrB,UAAU,EAAE,CAAC,EAAE,oBAAoB,EAAE,QAAmB,EAAE,EAAE,IAAI,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,EACxF,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,SAAS,IAAIC,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,EAAC,SAAS,EAAC,gBAAgB,YAAE,SAAgB,EAAA,CAAO,EACrHD,IAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAE,CAAC,aACRC,GAAA,CAAC,IAAI,IACD,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,gBAAgB,EAC1B,SAAS,EAAE,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,GAAG,GAAG,GAAG,KAAK,EAAA,QAAA,EAEpF,QAAQ,EAAA,CACN,EAEH,QAAQ,IAAIA,GAAA,CAAC,IAAI,EAAA,EACb,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAC,oBAAoB,EAC9B,SAAS,EAAE,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,GAAG,GAAG,GAAG,KAAK,EAAA,QAAA,EACvF,QAAe,EAAA,CAAQ,CAAA,EAAA,CAE3B,EACL,OAAO,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,EAAC,SAAS,EAAC,gBAAgB,YAAE,OAAc,EAAA,CAAO,CAAA,EAAA,CAAA,CAC/G;AAEd,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, size, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    const ctx = useListContext()\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    size = p.size ?? ctx?.size ?? \"medium\"\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sizes[size as any]\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nListItem.displayName = \"ListItem\"\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;AAeA;;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAU;AACV;AACA;AAEA;AACA;AACA;AACA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;;AA2CT;AAEA;;"}

package/LoadingBox/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/LoadingBox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    loading?: boolean;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    slotProps?: {\n        CircleProgress?: Omit<CircleProgressProps, \"value\">\n    }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n    let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color ?? \"brand\"\n\n    return (\n        <Tag\n            baseClass='loading-box'\n            {...rest}\n            sxr={{\n                position: \"relative\",\n                display: \"inline-block\",\n                overflow: \"hidden\",\n                ...((rest as any).sx || {})\n            }}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass=\"loading-box-container\"\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    color=\"brand\"\n                    hideTrack\n                    {...slotProps?.CircleProgress}\n                />\n            </Tag>}\n            <Tag\n                disabled={loading}\n            >\n                {children}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default LoadingBox\n\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","CircleProgress"],"mappings":";;;;;;;;AAeA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACzF,IAAI,CAAA,EAAA,CAAA,GAA2CC,iBAAY,CAAM,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,EAApF,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAAD,YAAA,CAAA,EAAA,EAApC,CAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAsC,CAA8C;IACzF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;IAE1B,QACIC,gBAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,aAAa,IACnB,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,QAAQ,KACb,IAAY,CAAC,EAAE,IAAI,EAAE,EAAC,EAE/B,GAAG,EAAE,GAAG,aAEP,OAAO,IAAIC,eAACD,QAAG,EAAA,EACZ,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA,EAAA,QAAA,EAEDC,cAAA,CAACC,KAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,KAAK,EAAC,OAAO,EACb,SAAS,EAAA,IAAA,EAAA,EACL,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,CAAA,CAC/B,EAAA,CACA,EACND,cAAA,CAACD,QAAG,EAAA,EACA,QAAQ,EAAE,OAAO,EAAA,QAAA,EAEhB,QAAQ,EAAA,CACP,CAAA,EAAA,CAAA,CACJ;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    loading?: boolean;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    slotProps?: {\n        CircleProgress?: Omit<CircleProgressProps, \"value\">\n    }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n    let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color ?? \"brand\"\n\n    return (\n        <Tag\n            baseClass='loading-box'\n            {...rest}\n            sxr={{\n                position: \"relative\",\n                display: \"inline-block\",\n                overflow: \"hidden\",\n                ...((rest as any).sx || {})\n            }}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass=\"loading-box-container\"\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    color=\"brand\"\n                    hideTrack\n                    {...slotProps?.CircleProgress}\n                />\n            </Tag>}\n            <Tag\n                disabled={loading}\n            >\n                {children}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default LoadingBox\n\n"],"names":[],"mappings":";;;;;;;;;AAeA;;AAAyE;;;AAGrE;AAAW;AACX;AACA;;AAiBgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAejB;;"}

package/LoadingBox/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';

package/LoadingBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    loading?: boolean;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    slotProps?: {\n        CircleProgress?: Omit<CircleProgressProps, \"value\">\n    }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n    let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color ?? \"brand\"\n\n    return (\n        <Tag\n            baseClass='loading-box'\n            {...rest}\n            sxr={{\n                position: \"relative\",\n                display: \"inline-block\",\n                overflow: \"hidden\",\n                ...((rest as any).sx || {})\n            }}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass=\"loading-box-container\"\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    color=\"brand\"\n                    hideTrack\n                    {...slotProps?.CircleProgress}\n                />\n            </Tag>}\n            <Tag\n                disabled={loading}\n            >\n                {children}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default LoadingBox\n\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAeA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACzF,IAAI,CAAA,EAAA,CAAA,GAA2C,YAAY,CAAM,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,EAApF,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAA,MAAA,CAAA,EAAA,EAApC,CAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAsC,CAA8C;IACzF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;IAE1B,QACIA,KAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,aAAa,IACnB,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,QAAQ,KACb,IAAY,CAAC,EAAE,IAAI,EAAE,EAAC,EAE/B,GAAG,EAAE,GAAG,aAEP,OAAO,IAAIC,IAAC,GAAG,EAAA,EACZ,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,cAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,KAAK,EAAC,OAAO,EACb,SAAS,EAAA,IAAA,EAAA,EACL,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,CAAA,CAC/B,EAAA,CACA,EACNA,GAAA,CAAC,GAAG,EAAA,EACA,QAAQ,EAAE,OAAO,EAAA,QAAA,EAEhB,QAAQ,EAAA,CACP,CAAA,EAAA,CAAA,CACJ;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    loading?: boolean;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    slotProps?: {\n        CircleProgress?: Omit<CircleProgressProps, \"value\">\n    }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n    let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color ?? \"brand\"\n\n    return (\n        <Tag\n            baseClass='loading-box'\n            {...rest}\n            sxr={{\n                position: \"relative\",\n                display: \"inline-block\",\n                overflow: \"hidden\",\n                ...((rest as any).sx || {})\n            }}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass=\"loading-box-container\"\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    color=\"brand\"\n                    hideTrack\n                    {...slotProps?.CircleProgress}\n                />\n            </Tag>}\n            <Tag\n                disabled={loading}\n            >\n                {children}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default LoadingBox\n\n"],"names":[],"mappings":";;;;;;;AAeA;;AAAyE;;;AAGrE;AAAW;AACX;AACA;;AAiBgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAejB;;"}

package/Option/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/Option/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Option/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\n\nexport type OptionProps = ListItemProps & {\n    value: string | number;\n}\n\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\n    return (\n        <ListItem {...props} ref={ref}>{children}</ListItem>\n    )\n})\n\nexport default Option"],"names":["__rest","_jsx","ListItem"],"mappings":";;;;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAA0C,EAAE,GAAmB,KAAI;QAAnE,EAAE,KAAK,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;AACxD,IAAA,QACIC,cAAA,CAACC,KAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAY;AAE5D,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Option/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\n\nexport type OptionProps = ListItemProps & {\n    value: string | number;\n}\n\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\n    return (\n        <ListItem {...props} ref={ref}>{children}</ListItem>\n    )\n})\n\nexport default Option"],"names":[],"mappings":";;;;;;;;AAQA;;AACI;AAGJ;;"}

package/Option/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/Option/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Option/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\n\nexport type OptionProps = ListItemProps & {\n    value: string | number;\n}\n\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\n    return (\n        <ListItem {...props} ref={ref}>{children}</ListItem>\n    )\n})\n\nexport default Option"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAA0C,EAAE,GAAmB,KAAI;QAAnE,EAAE,KAAK,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;AACxD,IAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAY;AAE5D,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Option/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\n\nexport type OptionProps = ListItemProps & {\n    value: string | number;\n}\n\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\n    return (\n        <ListItem {...props} ref={ref}>{children}</ListItem>\n    )\n})\n\nexport default Option"],"names":[],"mappings":";;;;;;AAQA;;AACI;AAGJ;;"}

package/Paper/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/Paper/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n    let [props] = useInterface<any>(\"Paper\", rest, {})\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                shadow: 1,\n                radius: 1,\n                p: 1.5,\n                bgcolor: \"background.secondary\",\n                color: \"text.primary\",\n                ...props?.sx\n            }}\n            baseClass='paper'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Paper\n"],"names":["__rest","useInterface","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAGC,iBAAY,CAAM,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;IAClD,QACIC,eAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,kBACC,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n    let [props] = useInterface<any>(\"Paper\", rest, {})\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                shadow: 1,\n                radius: 1,\n                p: 1.5,\n                bgcolor: \"background.secondary\",\n                color: \"text.primary\",\n                ...props?.sx\n            }}\n            baseClass='paper'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Paper\n"],"names":[],"mappings":";;;;;;;;AAMA;AAAoE;AAChE;;AAgBJ;;"}

package/Paper/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/Paper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n    let [props] = useInterface<any>(\"Paper\", rest, {})\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                shadow: 1,\n                radius: 1,\n                p: 1.5,\n                bgcolor: \"background.secondary\",\n                color: \"text.primary\",\n                ...props?.sx\n            }}\n            baseClass='paper'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Paper\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAG,YAAY,CAAM,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;IAClD,QACIA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,kBACC,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n    let [props] = useInterface<any>(\"Paper\", rest, {})\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                shadow: 1,\n                radius: 1,\n                p: 1.5,\n                bgcolor: \"background.secondary\",\n                color: \"text.primary\",\n                ...props?.sx\n            }}\n            baseClass='paper'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Paper\n"],"names":[],"mappings":";;;;;;AAMA;AAAoE;AAChE;;AAgBJ;;"}

package/Radio/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/Radio/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Radio/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { useInterface } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/RadioButtonChecked'\nimport UnCheckIcon from '@xanui/icons/RadioButtonUnchecked'\nimport Checkbox, { CheckboxProps } from '../Checkbox';\n\nexport type RadioProps = CheckboxProps\nconst Radio = React.forwardRef((props: RadioProps, ref?: React.Ref<any>) => {\n    let [rest] = useInterface<any>(\"Radio\", props, {})\n    return <Checkbox\n        checkIcon={<CheckIcon />}\n        uncheckIcon={<UnCheckIcon />}\n        {...rest}\n        type=\"radio\"\n        ref={ref}\n        classNames={['radio', ...(rest?.classNames || [])]}\n    />\n})\n\nexport default Radio\n"],"names":["useInterface","_jsx","Checkbox"],"mappings":";;;;;;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAiB,EAAE,GAAoB,KAAI;AACvE,IAAA,IAAI,CAAC,IAAI,CAAC,GAAGA,iBAAY,CAAM,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;IAClD,OAAOC,cAAA,CAACC,KAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EACZ,SAAS,EAAED,cAAA,CAAC,SAAS,KAAG,EACxB,WAAW,EAAEA,cAAA,CAAC,WAAW,KAAG,EAAA,EACxB,IAAI,IACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,EAAA,CAAA,CACpD;AACN,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Radio/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { useInterface } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/RadioButtonChecked'\nimport UnCheckIcon from '@xanui/icons/RadioButtonUnchecked'\nimport Checkbox, { CheckboxProps } from '../Checkbox';\n\nexport type RadioProps = CheckboxProps\nconst Radio = React.forwardRef((props: RadioProps, ref?: React.Ref<any>) => {\n    let [rest] = useInterface<any>(\"Radio\", props, {})\n    return <Checkbox\n        checkIcon={<CheckIcon />}\n        uncheckIcon={<UnCheckIcon />}\n        {...rest}\n        type=\"radio\"\n        ref={ref}\n        classNames={['radio', ...(rest?.classNames || [])]}\n    />\n})\n\nexport default Radio\n"],"names":[],"mappings":";;;;;;;;;;AAQA;AACI;;AASJ;;"}

package/Radio/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useInterface } from '@xanui/core';

package/Radio/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Radio/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { useInterface } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/RadioButtonChecked'\nimport UnCheckIcon from '@xanui/icons/RadioButtonUnchecked'\nimport Checkbox, { CheckboxProps } from '../Checkbox';\n\nexport type RadioProps = CheckboxProps\nconst Radio = React.forwardRef((props: RadioProps, ref?: React.Ref<any>) => {\n    let [rest] = useInterface<any>(\"Radio\", props, {})\n    return <Checkbox\n        checkIcon={<CheckIcon />}\n        uncheckIcon={<UnCheckIcon />}\n        {...rest}\n        type=\"radio\"\n        ref={ref}\n        classNames={['radio', ...(rest?.classNames || [])]}\n    />\n})\n\nexport default Radio\n"],"names":["_jsx"],"mappings":";;;;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAiB,EAAE,GAAoB,KAAI;AACvE,IAAA,IAAI,CAAC,IAAI,CAAC,GAAG,YAAY,CAAM,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;IAClD,OAAOA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EACZ,SAAS,EAAEA,GAAA,CAAC,SAAS,KAAG,EACxB,WAAW,EAAEA,GAAA,CAAC,WAAW,KAAG,EAAA,EACxB,IAAI,IACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,EAAA,CAAA,CACpD;AACN,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Radio/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { useInterface } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/RadioButtonChecked'\nimport UnCheckIcon from '@xanui/icons/RadioButtonUnchecked'\nimport Checkbox, { CheckboxProps } from '../Checkbox';\n\nexport type RadioProps = CheckboxProps\nconst Radio = React.forwardRef((props: RadioProps, ref?: React.Ref<any>) => {\n    let [rest] = useInterface<any>(\"Radio\", props, {})\n    return <Checkbox\n        checkIcon={<CheckIcon />}\n        uncheckIcon={<UnCheckIcon />}\n        {...rest}\n        type=\"radio\"\n        ref={ref}\n        classNames={['radio', ...(rest?.classNames || [])]}\n    />\n})\n\nexport default Radio\n"],"names":[],"mappings":";;;;;;;;AAQA;AACI;;AASJ;;"}

package/Scrollbar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    thumbSize?: number;\n    thumbColor?: TagProps['color'];\n    trackColor?: TagProps['color'];\n    children?: ReactNode;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    let sxr: any = {}\n\n    if (thumbSize) {\n        sxr['&::-webkit-scrollbar'] = {\n            width: thumbSize,\n            height: thumbSize,\n        }\n    }\n    if (thumbColor) {\n        sxr['&::-webkit-scrollbar-thumb'] = {\n            backgroundColor: thumbColor,\n            borderRadius: \"6px\",\n            opacity: 0.6,\n        }\n        sxr['&::-webkit-scrollbar-thumb:hover'] = {\n            backgroundColor: thumbColor,\n            opacity: 0.0,\n        }\n    }\n\n    if (trackColor) {\n        sxr['&::-webkit-scrollbar-track'] = {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n                ...sxr,\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAmBA;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;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    thumbSize?: number;\n    thumbColor?: TagProps['color'];\n    trackColor?: TagProps['color'];\n    children?: ReactNode;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    let sxr: any = {}\n\n    if (thumbSize) {\n        sxr['&::-webkit-scrollbar'] = {\n            width: thumbSize,\n            height: thumbSize,\n        }\n    }\n    if (thumbColor) {\n        sxr['&::-webkit-scrollbar-thumb'] = {\n            backgroundColor: thumbColor,\n            borderRadius: \"6px\",\n            opacity: 0.6,\n        }\n        sxr['&::-webkit-scrollbar-thumb:hover'] = {\n            backgroundColor: thumbColor,\n            opacity: 0.0,\n        }\n    }\n\n    if (trackColor) {\n        sxr['&::-webkit-scrollbar-track'] = {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n                ...sxr,\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAkBA;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;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}

package/Scrollbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    thumbSize?: number;\n    thumbColor?: TagProps['color'];\n    trackColor?: TagProps['color'];\n    children?: ReactNode;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    let sxr: any = {}\n\n    if (thumbSize) {\n        sxr['&::-webkit-scrollbar'] = {\n            width: thumbSize,\n            height: thumbSize,\n        }\n    }\n    if (thumbColor) {\n        sxr['&::-webkit-scrollbar-thumb'] = {\n            backgroundColor: thumbColor,\n            borderRadius: \"6px\",\n            opacity: 0.6,\n        }\n        sxr['&::-webkit-scrollbar-thumb:hover'] = {\n            backgroundColor: thumbColor,\n            opacity: 0.0,\n        }\n    }\n\n    if (trackColor) {\n        sxr['&::-webkit-scrollbar-track'] = {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n                ...sxr,\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAmBA;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;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    thumbSize?: number;\n    thumbColor?: TagProps['color'];\n    trackColor?: TagProps['color'];\n    children?: ReactNode;\n    onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n    scrollTo: (pos: number) => void;\n    scrollToBottom: () => void;\n    scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n    let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({\n        scrollTo(pos: number) {\n            innerRef.current?.scrollTo({\n                top: pos,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToBottom() {\n            if (!innerRef.current) return;\n            const ele = innerRef.current;\n            ele.scrollTo({\n                top: ele.scrollHeight,\n                behavior: \"smooth\"\n            });\n        },\n        scrollToTop() {\n            innerRef.current?.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        }\n    }));\n\n    if (onScroll || onScrollEnd) {\n        props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n            if (onScrollEnd) {\n                const ele: any = e.target\n                const scrollTop = ele.scrollTop\n                const scrollHeight = ele.scrollHeight\n                const clientHeight = ele.clientHeight\n                const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n                isScrollDown && onScrollEnd(e)\n            }\n            onScroll && onScroll(e)\n        }\n    }\n\n    let sxr: any = {}\n\n    if (thumbSize) {\n        sxr['&::-webkit-scrollbar'] = {\n            width: thumbSize,\n            height: thumbSize,\n        }\n    }\n    if (thumbColor) {\n        sxr['&::-webkit-scrollbar-thumb'] = {\n            backgroundColor: thumbColor,\n            borderRadius: \"6px\",\n            opacity: 0.6,\n        }\n        sxr['&::-webkit-scrollbar-thumb:hover'] = {\n            backgroundColor: thumbColor,\n            opacity: 0.0,\n        }\n    }\n\n    if (trackColor) {\n        sxr['&::-webkit-scrollbar-track'] = {\n            backgroundColor: trackColor,\n            borderRadius: \"6px\",\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            ref={innerRef}\n            baseClass='scrollbar'\n            sxr={{\n                height: \"100%\",\n                width: \"100%\",\n                overflow: \"auto\",\n                ...sxr,\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAkBA;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;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}

package/Select/index.cjs.map

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

package/Select/index.js.map

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

package/Skeleton/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');

package/Skeleton/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= \"default\"\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               bgcolor: \"divider.primary\",\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: \"divider.primary\",\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGC,cAAA,CAACC,QAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= \"default\"\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               bgcolor: \"divider.primary\",\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: \"divider.primary\",\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;AACA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;AACA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}

package/Skeleton/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';

package/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= \"default\"\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               bgcolor: \"divider.primary\",\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: \"divider.primary\",\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGA,GAAA,CAAC,GAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= \"default\"\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               bgcolor: \"divider.primary\",\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: \"divider.primary\",\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;AACA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;AACA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}

package/Stack/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var tslib = require('tslib');