@xanui/ui 1.1.26 → 1.1.28

package/Input/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\n    name?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    autoFocus?: boolean;\n    autoComplete?: string;\n\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        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        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\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: 40,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 48,\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%\" : undefined}\n            {...rest}\n            ref={ref}\n            baseClass={'input-root'}\n            classNames={{\n                'input-full-width': fullWidth || false,\n                'input-focused': _focus,\n                'input-error': error || false,\n                [`input-variant-${variant}`]: true,\n                [`input-size-${size}`]: true,\n            }}\n        >\n            <Tag\n                {...slotProps?.rootContainer}\n                ref={refs?.rootContainer}\n                baseClass='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                }}\n                disabled={disabled || false}\n                {..._size}\n                height={multiline ? \"auto\" : _size.height}\n                minHeight={_size.height}\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                <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                    <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                </Tag>\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            </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    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;AAwDA;;;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;;;;;AAYG;;AAEA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AASG;AACA;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;AACX;AASO;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;;AAgBJ;AACA;AACA;AACA;;AAEH;;AAUD;AACA;AACA;AACA;AACH;AAIjB;;"}
+{"version":3,"file":"index.mjs","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;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}

package/InputNumber/index.js

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Input/index.js');
+var UnfoldMore = require('@xanui/icons/UnfoldMore');
+
+const InputNumber = React.forwardRef((props, ref) => {
+    const isNumeric = !isNaN(Number(props.value));
+    let p = {};
+    if (!isNumeric) {
+        p.error = true;
+        p.helperText = "Value must be numeric";
+    }
+    return (jsxRuntime.jsx(index, Object.assign({}, props, p, { ref: ref, endIcon: jsxRuntime.jsx(UnfoldMore, {}), onKeyDown: (e) => {
+            props.onKeyDown && props.onKeyDown(e);
+            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
+                return;
+            e.preventDefault();
+            let val = parseInt(props.value || '0');
+            val = e.key === 'ArrowUp' ? val + 1 : val - 1;
+            e.target.value = String(val);
+            props.onChange && props.onChange(e);
+        }, value: props.value, onChange: e => {
+            e.target.value = e.target.value.replace(/\D/g, '');
+            props.onChange && props.onChange(e);
+        } })));
+});
+
+module.exports = InputNumber;
+//# sourceMappingURL=index.js.map

package/InputNumber/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\n\nexport type InputNumberProps = InputProps\n\nconst InputNumber = React.forwardRef((props: InputNumberProps, ref: React.Ref<any>) => {\n   const isNumeric = !isNaN(Number(props.value));\n\n   let p: any = {}\n   if (!isNumeric) {\n      p.error = true;\n      p.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...p}\n         ref={ref}\n         endIcon={<UnfoldMore />}\n         onKeyDown={(e: any) => {\n            props.onKeyDown && props.onKeyDown(e);\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n            e.preventDefault();\n            let val = parseInt(props.value || '0');\n            val = e.key === 'ArrowUp' ? val + 1 : val - 1;\n            e.target.value = String(val);\n            props.onChange && props.onChange(e);\n         }}\n         value={props.value}\n         onChange={e => {\n            e.target.value = e.target.value.replace(/\\D/g, '')\n            props.onChange && props.onChange(e);\n         }}\n      />\n   )\n})\n\nexport default InputNumber\n"],"names":[],"mappings":";;;;;;;;AAOA;AACG;;;AAIG;AACA;;;;;;;;AAcM;;;;AAMA;;;AAKZ;;"}

package/InputNumber/index.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Input from '../Input/index.mjs';
+import UnfoldMore from '@xanui/icons/UnfoldMore';
+
+const InputNumber = React.forwardRef((props, ref) => {
+    const isNumeric = !isNaN(Number(props.value));
+    let p = {};
+    if (!isNumeric) {
+        p.error = true;
+        p.helperText = "Value must be numeric";
+    }
+    return (jsx(Input, Object.assign({}, props, p, { ref: ref, endIcon: jsx(UnfoldMore, {}), onKeyDown: (e) => {
+            props.onKeyDown && props.onKeyDown(e);
+            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
+                return;
+            e.preventDefault();
+            let val = parseInt(props.value || '0');
+            val = e.key === 'ArrowUp' ? val + 1 : val - 1;
+            e.target.value = String(val);
+            props.onChange && props.onChange(e);
+        }, value: props.value, onChange: e => {
+            e.target.value = e.target.value.replace(/\D/g, '');
+            props.onChange && props.onChange(e);
+        } })));
+});
+
+export { InputNumber as default };
+//# sourceMappingURL=index.mjs.map

package/InputNumber/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\n\nexport type InputNumberProps = InputProps\n\nconst InputNumber = React.forwardRef((props: InputNumberProps, ref: React.Ref<any>) => {\n   const isNumeric = !isNaN(Number(props.value));\n\n   let p: any = {}\n   if (!isNumeric) {\n      p.error = true;\n      p.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...p}\n         ref={ref}\n         endIcon={<UnfoldMore />}\n         onKeyDown={(e: any) => {\n            props.onKeyDown && props.onKeyDown(e);\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n            e.preventDefault();\n            let val = parseInt(props.value || '0');\n            val = e.key === 'ArrowUp' ? val + 1 : val - 1;\n            e.target.value = String(val);\n            props.onChange && props.onChange(e);\n         }}\n         value={props.value}\n         onChange={e => {\n            e.target.value = e.target.value.replace(/\\D/g, '')\n            props.onChange && props.onChange(e);\n         }}\n      />\n   )\n})\n\nexport default InputNumber\n"],"names":[],"mappings":";;;;;;AAOA;AACG;;;AAIG;AACA;;;;;;;;AAcM;;;;AAMA;;;AAKZ;;"}

package/List/ListContext.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+// ListContext.ts
+const ListContext = React.createContext(null);
+const useListContext = () => React.useContext(ListContext);
+
+exports.ListContext = ListContext;
+exports.useListContext = useListContext;
+//# sourceMappingURL=ListContext.js.map

package/List/ListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContext.js","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\n\nexport type ListSize = \"small\" | \"medium\" | \"large\"\n\nexport interface ListContextValue {\n   size: ListSize\n}\n\nexport const ListContext = React.createContext<ListContextValue | null>(null)\n\nexport const useListContext = () => React.useContext(ListContext)\n"],"names":[],"mappings":";;;;AAAA;AASO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;;"}

package/List/ListContext.mjs

@@ -0,0 +1,8 @@
+import React from 'react';
+
+// ListContext.ts
+const ListContext = React.createContext(null);
+const useListContext = () => React.useContext(ListContext);
+
+export { ListContext, useListContext };
+//# sourceMappingURL=ListContext.mjs.map

package/List/ListContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContext.mjs","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\n\nexport type ListSize = \"small\" | \"medium\" | \"large\"\n\nexport interface ListContextValue {\n   size: ListSize\n}\n\nexport const ListContext = React.createContext<ListContextValue | null>(null)\n\nexport const useListContext = () => React.useContext(ListContext)\n"],"names":[],"mappings":";;AAAA;AASO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;"}

package/List/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 
-type ListProps<T extends TagComponentType = "ul"> = Omit<TagProps<T>, 'color'> & {
+type ListProps<T extends TagComponentType = "ul"> = Omit<TagProps<T>, 'color' | "size"> & {
     color?: useBreakpointPropsType<UseColorTemplateColor>;
     variant?: useBreakpointPropsType<UseColorTemplateType>;
     hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;
     hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;
+    size?: useBreakpointPropsType<"small" | "medium" | "large">;
 };
 declare const List: React.ForwardRefExoticComponent<Omit<ListProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
 

package/List/index.js

@@ -4,11 +4,12 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var core = require('@xanui/core');
+var ListContext = require('./ListContext.js');
 
 const List = React.forwardRef((_a, ref) => {
-    var _b, _c, _d, _e;
+    var _b, _c, _d, _e, _f;
     var { children } = _a, rest = tslib.__rest(_a, ["children"]);
-    let [_f] = core.useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant } = _f, props = tslib.__rest(_f, ["sx", "color", "variant", "hoverColor", "hoverVariant"]);
+    let [_g] = core.useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _g, props = tslib.__rest(_g, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
     const _p = {};
     if (color)
         _p.color = color;
@@ -18,11 +19,14 @@ const List = React.forwardRef((_a, ref) => {
         _p.hoverColor = hoverColor;
     if (hoverVariant)
         _p.hoverVariant = hoverVariant;
+    if (size)
+        _p.size = size;
     const p = core.useBreakpointProps(_p);
     color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
     variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
     hoverColor = (_d = p.hoverColor) !== null && _d !== void 0 ? _d : "default";
     hoverVariant = (_e = p.hoverVariant) !== null && _e !== void 0 ? _e : "soft";
+    size = (_f = p.size) !== null && _f !== void 0 ? _f : "medium";
     const template = core.useColorTemplate(color, variant);
     const hoverTemplate = core.useColorTemplate(hoverColor, hoverVariant);
     let sxOutline = {};
@@ -34,25 +38,25 @@ const List = React.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
-                color: "text.secondary"
-            }, "& .list-item-text": {
-                color: "text.primary"
-            }, "& .list-item-subtitle": {
-                color: "text.secondary"
-            }, "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
-                    color: hoverTemplate.primary.color
+    return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { size }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
+                    color: "text.secondary"
                 }, "& .list-item-text": {
-                    color: hoverTemplate.primary.color
+                    color: "text.primary"
                 }, "& .list-item-subtitle": {
-                    color: hoverColor === 'default' ? "text.secondary" : hoverTemplate.primary.color
-                } }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
-                    color: template.primary.color
-                }, "& .list-item-text": {
-                    color: template.primary.color
-                }, "& .list-item-subtitle": {
-                    color: template.primary.color
-                } }) }), (sx || {})), ref: ref, children: children })));
+                    color: "text.secondary"
+                }, "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
+                        color: hoverTemplate.primary.color
+                    }, "& .list-item-text": {
+                        color: hoverTemplate.primary.color
+                    }, "& .list-item-subtitle": {
+                        color: hoverColor === 'default' ? "text.secondary" : hoverTemplate.primary.color
+                    } }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
+                        color: template.primary.color
+                    }, "& .list-item-text": {
+                        color: template.primary.color
+                    }, "& .list-item-subtitle": {
+                        color: template.primary.color
+                    } }) }), (sx || {})), ref: ref, children: children })) }));
 });
 
 module.exports = List;

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'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\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, ...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    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    hoverColor = p.hoverColor ?? \"default\"\n    hoverVariant = p.hoverVariant ?? \"soft\"\n\n    const template = useColorTemplate(color, variant)\n    const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\n\n    let sxOutline: any = {}\n    if (hoverVariant == 'outline' || variant === 'outline') {\n        sxOutline = {\n            \"& .list-item\": {\n                border: \"1px solid\",\n                borderColor: \"transparent\"\n            }\n        }\n    }\n\n    return (\n        <Tag\n            component='ul'\n            {...props}\n            baseClass='list'\n            sxr={{\n                listStyle: \"none\",\n                p: 0,\n                m: 0,\n                ...sxOutline,\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                \"& .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: hoverColor === 'default' ? \"text.secondary\" : 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                },\n                ...(sx || {} as any)\n            }}\n            ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default List"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag"],"mappings":"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"}
+{"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?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\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    hoverColor = p.hoverColor ?? \"default\"\n    hoverVariant = p.hoverVariant ?? \"soft\"\n    size = p.size ?? \"medium\"\n\n    const template = useColorTemplate(color, variant)\n    const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\n\n    let sxOutline: any = {}\n    if (hoverVariant == 'outline' || variant === 'outline') {\n        sxOutline = {\n            \"& .list-item\": {\n                border: \"1px solid\",\n                borderColor: \"transparent\"\n            }\n        }\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                    ...sxOutline,\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                    \"& .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: hoverColor === 'default' ? \"text.secondary\" : 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                    },\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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"}

package/List/index.mjs

@@ -2,11 +2,12 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
+import { ListContext } from './ListContext.mjs';
 
 const List = React.forwardRef((_a, ref) => {
-    var _b, _c, _d, _e;
+    var _b, _c, _d, _e, _f;
     var { children } = _a, rest = __rest(_a, ["children"]);
-    let [_f] = useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant } = _f, props = __rest(_f, ["sx", "color", "variant", "hoverColor", "hoverVariant"]);
+    let [_g] = useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _g, props = __rest(_g, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
     const _p = {};
     if (color)
         _p.color = color;
@@ -16,11 +17,14 @@ const List = React.forwardRef((_a, ref) => {
         _p.hoverColor = hoverColor;
     if (hoverVariant)
         _p.hoverVariant = hoverVariant;
+    if (size)
+        _p.size = size;
     const p = useBreakpointProps(_p);
     color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
     variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
     hoverColor = (_d = p.hoverColor) !== null && _d !== void 0 ? _d : "default";
     hoverVariant = (_e = p.hoverVariant) !== null && _e !== void 0 ? _e : "soft";
+    size = (_f = p.size) !== null && _f !== void 0 ? _f : "medium";
     const template = useColorTemplate(color, variant);
     const hoverTemplate = useColorTemplate(hoverColor, hoverVariant);
     let sxOutline = {};
@@ -32,25 +36,25 @@ const List = React.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
-                color: "text.secondary"
-            }, "& .list-item-text": {
-                color: "text.primary"
-            }, "& .list-item-subtitle": {
-                color: "text.secondary"
-            }, "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
-                    color: hoverTemplate.primary.color
+    return (jsx(ListContext.Provider, { value: { size }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
+                    color: "text.secondary"
                 }, "& .list-item-text": {
-                    color: hoverTemplate.primary.color
+                    color: "text.primary"
                 }, "& .list-item-subtitle": {
-                    color: hoverColor === 'default' ? "text.secondary" : hoverTemplate.primary.color
-                } }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
-                    color: template.primary.color
-                }, "& .list-item-text": {
-                    color: template.primary.color
-                }, "& .list-item-subtitle": {
-                    color: template.primary.color
-                } }) }), (sx || {})), ref: ref, children: children })));
+                    color: "text.secondary"
+                }, "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
+                        color: hoverTemplate.primary.color
+                    }, "& .list-item-text": {
+                        color: hoverTemplate.primary.color
+                    }, "& .list-item-subtitle": {
+                        color: hoverColor === 'default' ? "text.secondary" : hoverTemplate.primary.color
+                    } }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
+                        color: template.primary.color
+                    }, "& .list-item-text": {
+                        color: template.primary.color
+                    }, "& .list-item-subtitle": {
+                        color: template.primary.color
+                    } }) }), (sx || {})), ref: ref, children: children })) }));
 });
 
 export { List as default };

package/List/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\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, ...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    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    hoverColor = p.hoverColor ?? \"default\"\n    hoverVariant = p.hoverVariant ?? \"soft\"\n\n    const template = useColorTemplate(color, variant)\n    const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\n\n    let sxOutline: any = {}\n    if (hoverVariant == 'outline' || variant === 'outline') {\n        sxOutline = {\n            \"& .list-item\": {\n                border: \"1px solid\",\n                borderColor: \"transparent\"\n            }\n        }\n    }\n\n    return (\n        <Tag\n            component='ul'\n            {...props}\n            baseClass='list'\n            sxr={{\n                listStyle: \"none\",\n                p: 0,\n                m: 0,\n                ...sxOutline,\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                \"& .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: hoverColor === 'default' ? \"text.secondary\" : 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                },\n                ...(sx || {} as any)\n            }}\n            ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default List"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","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?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\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    hoverColor = p.hoverColor ?? \"default\"\n    hoverVariant = p.hoverVariant ?? \"soft\"\n    size = p.size ?? \"medium\"\n\n    const template = useColorTemplate(color, variant)\n    const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\n\n    let sxOutline: any = {}\n    if (hoverVariant == 'outline' || variant === 'outline') {\n        sxOutline = {\n            \"& .list-item\": {\n                border: \"1px solid\",\n                borderColor: \"transparent\"\n            }\n        }\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                    ...sxOutline,\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                    \"& .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: hoverColor === 'default' ? \"text.secondary\" : 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                    },\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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"}

package/ListItem/index.d.ts

@@ -6,6 +6,7 @@ type ListItemProps<T extends TagComponentType = "li"> = TagProps<T> & {
     subtitle?: useBreakpointPropsType<string | ReactElement>;
     startIcon?: useBreakpointPropsType<ReactElement>;
     endIcon?: useBreakpointPropsType<ReactElement>;
+    size?: useBreakpointPropsType<"small" | "medium" | "large">;
 };
 declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
 

package/ListItem/index.js

@@ -5,10 +5,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var core = require('@xanui/core');
 var index = require('../Text/index.js');
+var ListContext = require('../List/ListContext.js');
 
 const ListItem = React.forwardRef((_a, ref) => {
-    var { children, startIcon, endIcon, subtitle } = _a, rest = tslib.__rest(_a, ["children", "startIcon", "endIcon", "subtitle"]);
-    let [_b] = core.useInterface("ListItem", rest, {}), { selected } = _b, props = tslib.__rest(_b, ["selected"]);
+    var _b, _c;
+    var { children, startIcon, endIcon, subtitle, size } = _a, rest = tslib.__rest(_a, ["children", "startIcon", "endIcon", "subtitle", "size"]);
+    let [_d] = core.useInterface("ListItem", rest, {}), { selected } = _d, props = tslib.__rest(_d, ["selected"]);
     const _p = {};
     if (subtitle)
         _p.subtitle = subtitle;
@@ -16,22 +18,37 @@ const ListItem = React.forwardRef((_a, ref) => {
         _p.startIcon = startIcon;
     if (endIcon)
         _p.endIcon = endIcon;
+    if (size)
+        _p.size = size;
     const p = core.useBreakpointProps(_p);
+    const ctx = ListContext.useListContext();
     subtitle = p.subtitle;
     startIcon = p.startIcon;
     endIcon = p.endIcon;
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'li' }, props, { sxr: {
-            alignItems: "center",
-            display: "flex",
-            flexDirection: "row",
-            userSelect: "none",
-            cursor: "pointer",
-            lineHeight: 1.4,
-            p: 1,
-            whiteSpace: "nowrap",
-            flexShrink: "0",
-        }, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsxRuntime.jsx(index, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsxRuntime.jsx(core.Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
+    size = (_c = (_b = p.size) !== null && _b !== void 0 ? _b : ctx === null || ctx === void 0 ? void 0 : ctx.size) !== null && _c !== void 0 ? _c : "medium";
+    let sizes = {
+        small: {
+            fontSize: "button",
+            py: 0.5,
+            px: 1,
+            minHeight: 32,
+        },
+        medium: {
+            fontSize: "text",
+            py: 1,
+            px: 1.5,
+            minHeight: 40,
+        },
+        large: {
+            fontSize: "h6",
+            py: 1.5,
+            px: 2,
+            minHeight: 48,
+        }
+    };
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'li' }, props, { sxr: Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sizes[size]), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsxRuntime.jsx(index, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsxRuntime.jsx(core.Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
 });
+ListItem.displayName = "ListItem";
 
 module.exports = ListItem;
 //# sourceMappingURL=index.js.map

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';\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}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...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    const p: any = useBreakpointProps(_p)\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\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                p: 1,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\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\nexport default ListItem"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Text"],"mappings":"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"}
+{"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":["__rest","useInterface","useBreakpointProps","useListContext","_jsxs","Tag","_jsx","Text"],"mappings":"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"}

package/ListItem/index.mjs

@@ -3,10 +3,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
 import Text from '../Text/index.mjs';
+import { useListContext } from '../List/ListContext.mjs';
 
 const ListItem = React.forwardRef((_a, ref) => {
-    var { children, startIcon, endIcon, subtitle } = _a, rest = __rest(_a, ["children", "startIcon", "endIcon", "subtitle"]);
-    let [_b] = useInterface("ListItem", rest, {}), { selected } = _b, props = __rest(_b, ["selected"]);
+    var _b, _c;
+    var { children, startIcon, endIcon, subtitle, size } = _a, rest = __rest(_a, ["children", "startIcon", "endIcon", "subtitle", "size"]);
+    let [_d] = useInterface("ListItem", rest, {}), { selected } = _d, props = __rest(_d, ["selected"]);
     const _p = {};
     if (subtitle)
         _p.subtitle = subtitle;
@@ -14,22 +16,37 @@ const ListItem = React.forwardRef((_a, ref) => {
         _p.startIcon = startIcon;
     if (endIcon)
         _p.endIcon = endIcon;
+    if (size)
+        _p.size = size;
     const p = useBreakpointProps(_p);
+    const ctx = useListContext();
     subtitle = p.subtitle;
     startIcon = p.startIcon;
     endIcon = p.endIcon;
-    return (jsxs(Tag, Object.assign({ component: 'li' }, props, { sxr: {
-            alignItems: "center",
-            display: "flex",
-            flexDirection: "row",
-            userSelect: "none",
-            cursor: "pointer",
-            lineHeight: 1.4,
-            p: 1,
-            whiteSpace: "nowrap",
-            flexShrink: "0",
-        }, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxs(Tag, { flex: 1, children: [jsx(Text, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsx(Text, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsx(Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
+    size = (_c = (_b = p.size) !== null && _b !== void 0 ? _b : ctx === null || ctx === void 0 ? void 0 : ctx.size) !== null && _c !== void 0 ? _c : "medium";
+    let sizes = {
+        small: {
+            fontSize: "button",
+            py: 0.5,
+            px: 1,
+            minHeight: 32,
+        },
+        medium: {
+            fontSize: "text",
+            py: 1,
+            px: 1.5,
+            minHeight: 40,
+        },
+        large: {
+            fontSize: "h6",
+            py: 1.5,
+            px: 2,
+            minHeight: 48,
+        }
+    };
+    return (jsxs(Tag, Object.assign({ component: 'li' }, props, { sxr: Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sizes[size]), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxs(Tag, { flex: 1, children: [jsx(Text, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsx(Text, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsx(Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
 });
+ListItem.displayName = "ListItem";
 
 export { ListItem as default };
 //# sourceMappingURL=index.mjs.map