@xanui/ui 1.1.54 → 1.1.56

package/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner, { UseCornerTypes } from '../useCorner'\r\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\r\nimport Skeleton, { SkeletonProps } from '../Skeleton';\r\n\r\n\r\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<UseCornerTypes>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\r\n    loading?: boolean;\r\n    skeleton?: boolean;\r\n    slotProps?: {\r\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\r\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\r\n    }\r\n}\r\n\r\n\r\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\r\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\r\n        variant: \"fill\",\r\n        color: \"brand\",\r\n        corner: \"rounded\",\r\n        size: \"medium\"\r\n    })\r\n\r\n    const _p: any = {}\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    if (size) _p.size = size\r\n    if (direction) _p.direction = direction\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    color = p.color\r\n    variant = p.variant\r\n    corner = p.corner\r\n    size = p.size\r\n    direction = p.direction || \"row\"\r\n\r\n    const template = useColorTemplate(color, variant)\r\n    const cornerCss = useCorner(corner)\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 38,\r\n            px: (startIcon || endIcon) ? 1 : 1.5,\r\n            gap: .5,\r\n            fontSize: 'button'\r\n        },\r\n        medium: {\r\n            height: 44,\r\n            px: (startIcon || endIcon) ? 1.5 : 2,\r\n            gap: 1,\r\n            fontSize: 'button'\r\n        },\r\n        large: {\r\n            height: 52,\r\n            px: (startIcon || endIcon) ? 2 : 3,\r\n            gap: 1,\r\n            fontSize: \"text\"\r\n        }\r\n    }\r\n\r\n    const progressSizes: any = {\r\n        small: 20,\r\n        medium: 25,\r\n        large: 30\r\n    }\r\n\r\n    let _size = (sizes[size as any] || {})\r\n    if (direction === 'column') {\r\n        delete _size.height\r\n        _size.gap = .5\r\n        _size.py = 1\r\n    }\r\n\r\n    if (skeleton) {\r\n        return <Skeleton\r\n            {...slotProps?.skeleton}\r\n            height={_size.height}\r\n            animation={\"wave\"}\r\n            sx={{\r\n                ...slotProps?.skeleton?.sx,\r\n                ..._size,\r\n                ...cornerCss,\r\n            }}\r\n        />\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            component='button'\r\n            baseClass='button'\r\n            {..._props}\r\n            sxr={{\r\n                flexShrink: \"0\",\r\n                whiteSpace: \"nowrap\",\r\n                cursor: \"pointer\",\r\n                display: \"flex\",\r\n                textTransform: \"uppercase\",\r\n                flexDirection: direction,\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                userSelect: \"none\",\r\n                fontWeight: 500,\r\n                ..._size,\r\n                ...cornerCss,\r\n                ...template.primary,\r\n\r\n            }}\r\n            hover={{\r\n                ...template.secondary,\r\n                ...((_props as any)?.hover || {})\r\n            }}\r\n            disabled={loading ?? _props.disabled ?? false}\r\n            ref={ref}\r\n        >\r\n            {loading && <Tag\r\n                baseClass='button-loading-container'\r\n                sxr={{\r\n                    position: \"absolute\",\r\n                    top: 0,\r\n                    left: 0,\r\n                    right: 0,\r\n                    bottom: 0,\r\n                    zIndex: 1,\r\n                    display: \"flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                }}\r\n            >\r\n                <CircleProgress\r\n                    {...slotProps?.loading}\r\n                    color={color === 'default' ? `brand` : \"default\"}\r\n                    size={progressSizes[size]}\r\n                    className='button-loading-progress'\r\n                />\r\n            </Tag>}\r\n            {startIcon && <Tag\r\n                baseClass='button-start-icon'\r\n                component='span'\r\n                display=\"inline-block\"\r\n                flexShrink={0}\r\n            >{startIcon}</Tag>}\r\n            {children}\r\n            {endIcon && <Tag\r\n                baseClass='button-end-icon'\r\n                component='span'\r\n                display=\"inline-block\"\r\n                flexShrink={0}\r\n            >{endIcon}</Tag>}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Button\r\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    skeleton?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"brand\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const template = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 44,\n            px: (startIcon || endIcon) ? 1.5 : 2,\n            gap: 1,\n            fontSize: 'button'\n        },\n        large: {\n            height: 52,\n            px: (startIcon || endIcon) ? 2 : 3,\n            gap: 1,\n            fontSize: \"text\"\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={_size.height}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                ..._size,\n                ...cornerCss,\n            }}\n        />\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                fontWeight: 500,\n                ..._size,\n                ...cornerCss,\n                ...template.primary,\n\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={loading ?? _props.disabled ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-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                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;;AA6CY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}

package/ButtonGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["import React, { ReactElement, Children, cloneElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport { ButtonProps } from '../Button';\r\n\r\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\r\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\r\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\r\n        size: \"medium\",\r\n        variant: \"outline\",\r\n        color: \"default\"\r\n    })\r\n    const _p: any = {}\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n    color = p.color\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 40,\r\n        },\r\n        medium: {\r\n            height: 46,\r\n        },\r\n        large: {\r\n            height: 52,\r\n        }\r\n    }\r\n\r\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            {...sizes[size]}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexWrap: \"nowrap\",\r\n                overflow: \"hidden\",\r\n                radius: 1,\r\n                border: \"1px solid\",\r\n                borderColor: borderColor,\r\n                '& button, & button:hover': {\r\n                    borderRight: \"1px solid\",\r\n                    borderColor: borderColor\r\n                },\r\n                \"& button:last-child, & button:last-child:hover\": {\r\n                    borderRight: \"none\"\r\n                }\r\n            }}\r\n            baseClass='button-group'\r\n            ref={ref}\r\n        >\r\n            {Children.map(children, (child: any) => {\r\n                return cloneElement(child, {\r\n                    flex: \"0 0 auto\",\r\n                    color,\r\n                    variant,\r\n                    size,\r\n                    corner: \"squar\",\r\n                })\r\n            })}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default ButtonGroup\r\n\r\n\r\n"],"names":["__rest","useInterface","useBreakpointProps","_jsx","Tag","Children","cloneElement"],"mappings":";;;;;;;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuCC,iBAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,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,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEPC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAOC,kBAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["import React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":["__rest","useInterface","useBreakpointProps","_jsx","Tag","Children","cloneElement"],"mappings":";;;;;;;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuCC,iBAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,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,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEPC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAOC,kBAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC;;;;"}

package/ButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["import React, { ReactElement, Children, cloneElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport { ButtonProps } from '../Button';\r\n\r\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\r\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\r\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\r\n        size: \"medium\",\r\n        variant: \"outline\",\r\n        color: \"default\"\r\n    })\r\n    const _p: any = {}\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n    color = p.color\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 40,\r\n        },\r\n        medium: {\r\n            height: 46,\r\n        },\r\n        large: {\r\n            height: 52,\r\n        }\r\n    }\r\n\r\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            {...sizes[size]}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexWrap: \"nowrap\",\r\n                overflow: \"hidden\",\r\n                radius: 1,\r\n                border: \"1px solid\",\r\n                borderColor: borderColor,\r\n                '& button, & button:hover': {\r\n                    borderRight: \"1px solid\",\r\n                    borderColor: borderColor\r\n                },\r\n                \"& button:last-child, & button:last-child:hover\": {\r\n                    borderRight: \"none\"\r\n                }\r\n            }}\r\n            baseClass='button-group'\r\n            ref={ref}\r\n        >\r\n            {Children.map(children, (child: any) => {\r\n                return cloneElement(child, {\r\n                    flex: \"0 0 auto\",\r\n                    color,\r\n                    variant,\r\n                    size,\r\n                    corner: \"squar\",\r\n                })\r\n            })}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default ButtonGroup\r\n\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuC,YAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,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,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["import React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":["_jsx"],"mappings":";;;;;AAWA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuC,YAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,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,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC;;;;"}

package/Calendar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport Stack from '../Stack'\r\nimport IconButton from '../IconButton';\r\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\r\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\r\nimport Text from '../Text';\r\nimport Button from '../Button';\r\nimport ResetIcon from '@xanui/icons/Replay';\r\nimport ViewBox from '../ViewBox';\r\nimport { UseColorTemplateColor, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\n\r\nexport type CalendarProps = {\r\n    value?: Date | null;\r\n    onChange?: (date: Date | null) => void;\r\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\r\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n}\r\n\r\n\r\nconst ShowYears = ({ color, year, today, onClick }: any) => {\r\n    let years: any[] = []\r\n    const selectedRef: any = useRef(null)\r\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\r\n        const selected = year == y\r\n        years.push(<Stack\r\n            key={y}\r\n            sx={{\r\n                width: 50,\r\n                p: .1\r\n            }}\r\n            className='calender-year-item'\r\n        >\r\n            <Button\r\n                color={selected ? color : \"default\"}\r\n                className='calender-year-button'\r\n                size='small'\r\n                corner=\"circle\"\r\n                ref={selected ? selectedRef : null}\r\n                onClick={() => onClick(y)}\r\n                variant={selected ? \"fill\" : \"text\"}\r\n            >\r\n                {y}\r\n            </Button>\r\n        </Stack>)\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (selectedRef?.current) {\r\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\r\n        }\r\n    }, [])\r\n\r\n    return (\r\n        <Stack\r\n            sx={{\r\n                flexWrap: \"wrap\",\r\n                flexDirection: \"row\",\r\n                overflow: \"hidden\",\r\n                overflowY: \"auto\"\r\n            }}\r\n            className='calender-years'\r\n        >\r\n            {years}\r\n        </Stack>\r\n    )\r\n}\r\n\r\n\r\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\r\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\r\n    const _p: any = {}\r\n    if (VMode) _p.VMode = VMode\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n    color = p.color || \"brand\"\r\n\r\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\r\n    let [selectedDate, setSelectedDate] = useState(new Date());\r\n    selectedDate = value instanceof Date ? value : selectedDate\r\n    const [currentDate, setCurrentDate] = useState(selectedDate);\r\n    const year = currentDate.getFullYear()\r\n    const month = currentDate.getMonth()\r\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\r\n    const today = new Date();\r\n    const btnWidth = 36\r\n    const boxWidth = btnWidth * 7\r\n\r\n    const showCalendar = () => {\r\n\r\n        let firstDay = (new Date(year, month)).getDay();\r\n        let rows = []\r\n        let row = []\r\n\r\n        const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\r\n        for (let i = 0; i < dayNames.length; i++) {\r\n            const k = dayNames[i];\r\n            row.push(<Stack\r\n                key={\"dayname-\" + i}\r\n                sx={{\r\n                    width: btnWidth,\r\n                    height: btnWidth,\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\"\r\n                }}\r\n            >\r\n                <IconButton\r\n                    variant={\"text\"}\r\n                    color=\"default\"\r\n                    disabled\r\n                >\r\n                    {k}\r\n                </IconButton>\r\n            </Stack>)\r\n        }\r\n\r\n        rows.push(<Stack flexRow key={\"header\"} className='calender-day-row'>\r\n            {row}\r\n        </Stack>);\r\n\r\n        let date = 1;\r\n        for (let i = 0; i < 6; i++) {\r\n            let row = []\r\n            for (let j = 0; j < 7; j++) {\r\n                if (i === 0 && j < firstDay) {\r\n                    row.push(<Stack\r\n                        alignItems=\"center\"\r\n                        justifyContent=\"center\"\r\n                        key={date + j + i}\r\n                        sx={{\r\n                            width: btnWidth,\r\n                            height: btnWidth,\r\n                            alignItems: \"center\",\r\n                            justifyContent: \"center\"\r\n                        }}\r\n                    >\r\n\r\n                    </Stack>)\r\n                } else if (date > daysInMonth) {\r\n                    break;\r\n                } else {\r\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\r\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\r\n\r\n                    let css: any = {}\r\n                    if (isToday) {\r\n                        css = {\r\n                            variant: \"fill\",\r\n                            color: \"default\"\r\n                        }\r\n                    }\r\n\r\n                    if (isSelected) {\r\n                        css = {\r\n                            variant: \"fill\",\r\n                            color: color\r\n                        }\r\n                    }\r\n\r\n                    row.push(<Stack\r\n                        sx={{\r\n                            width: btnWidth,\r\n                            height: btnWidth,\r\n                            alignItems: \"center\",\r\n                            justifyContent: \"center\"\r\n                        }}\r\n                        key={date + j + i}\r\n                        className='calender-day-item'\r\n                    >\r\n                        <IconButton\r\n                            className='calender-day-button'\r\n                            variant={isSelected ? \"fill\" : \"text\"}\r\n                            color={isToday ? color : \"default\"}\r\n                            {...css}\r\n                            data-value={date}\r\n                            onClick={(e: any) => {\r\n                                let d = e.target.getAttribute(\"data-value\")\r\n                                if (!d) return\r\n                                let selectedDate = new Date(year, month, parseInt(d))\r\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\r\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\r\n                            }}\r\n                        >\r\n                            {date}\r\n                        </IconButton>\r\n                    </Stack>)\r\n                    date++;\r\n                }\r\n            }\r\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\r\n                {row}\r\n            </Stack>);\r\n        }\r\n        return rows\r\n    }\r\n\r\n    const showMonth = () => {\r\n        let months: any[] = []\r\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n        for (let m = 0; m < monthNames.length; m++) {\r\n            const selected = currentDate.getMonth() === m\r\n\r\n            months.push(<Stack\r\n                key={m}\r\n                width={\"50%\"}\r\n                alignItems=\"center\"\r\n                justifyContent=\"center\"\r\n                p={.1}\r\n                className='calender-months-item'\r\n            >\r\n                <Button\r\n                    color={selected ? color : \"default\"}\r\n                    className='calender-month-button'\r\n                    size='small'\r\n                    corner=\"circle\"\r\n                    variant={selected ? \"fill\" : 'text'}\r\n                    onClick={() => {\r\n                        const v = new Date(currentDate.getFullYear(), m)\r\n                        setCurrentDate(v)\r\n                        setViewMode(\"day\")\r\n                        onButtonClick && onButtonClick(\"month\", v)\r\n                    }}\r\n                    sx={{\r\n                        color: selected ? \"brand.text\" : \"text.primary\"\r\n                    }}\r\n                >\r\n                    {monthNames[m]}\r\n                </Button>\r\n            </Stack>)\r\n        }\r\n\r\n        return (\r\n            <Stack\r\n                className='calender-months'\r\n                sx={{\r\n                    flexWrap: \"wrap\",\r\n                    overflow: \"hidden\",\r\n                    overflowY: \"auto\",\r\n                    flexDirection: \"row\"\r\n                }}\r\n            >\r\n                {months}\r\n            </Stack>\r\n        )\r\n    }\r\n\r\n    let view: any = null\r\n    switch (viewMode) {\r\n        case \"year\":\r\n            view = <ShowYears\r\n                color={color}\r\n                today={today}\r\n                year={year}\r\n                boxWidth={boxWidth}\r\n                onClick={(y: any) => {\r\n                    currentDate.setFullYear(y)\r\n                    setCurrentDate(currentDate)\r\n                    setViewMode(\"month\")\r\n                    onButtonClick && onButtonClick(\"year\", currentDate)\r\n                }}\r\n            />\r\n            break;\r\n        case \"month\":\r\n            view = showMonth()\r\n            break;\r\n        default:\r\n            view = (<>\r\n\r\n                {showCalendar()}\r\n            </>\r\n            )\r\n            break;\r\n    }\r\n\r\n    return (\r\n        <ViewBox\r\n            className='calender-root'\r\n            maxHeight={308}\r\n            width={250}\r\n            radius={1}\r\n            bgcolor=\"background.secondary\"\r\n            startContent={\r\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\r\n                    <Text\r\n                        fontWeight=\"bold\"\r\n                        cursor=\"pointer\"\r\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\r\n                        flex={1}\r\n                    >\r\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\r\n                    </Text>\r\n                    <IconButton\r\n                        color=\"default\"\r\n                        variant='text'\r\n                        size={28}\r\n                        onClick={() => {\r\n                            setCurrentDate(new Date())\r\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\r\n                        }}\r\n                    >\r\n                        <ResetIcon fontSize={20} />\r\n                    </IconButton>\r\n                    <IconButton\r\n                        color=\"default\"\r\n                        variant='text'\r\n                        size={28}\r\n                        onClick={() => {\r\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\r\n                        }}\r\n                    >\r\n                        <IconKeyboardArrowLeft />\r\n                    </IconButton>\r\n                    <IconButton\r\n                        color=\"default\"\r\n                        variant='text'\r\n                        size={28}\r\n                        onClick={() => {\r\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\r\n                        }}\r\n                    >\r\n                        <IconKeyboardArrowRight />\r\n                    </IconButton>\r\n                </Stack>\r\n            }\r\n        >\r\n            <Stack height=\"100%\" p={.5} className='calender-container'>\r\n                {view}\r\n            </Stack>\r\n        </ViewBox>\r\n    );\r\n};\r\n\r\nexport default Calendar;"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqBA;;AAEI;AACA;AACI;AACA;AAGQ;AACA;AACH;;;;;;;AAuBT;AAGY;AACA;AACA;AACA;AACH;AAMb;AAGA;AAAkB;;;AAGd;AAAW;AACX;AAAW;AACX;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAII;;;AAIA;AACA;AACI;AACA;AAGQ;AACA;AACA;AACA;;;AAaZ;;AAKA;;AAEI;;AAEQ;AAKQ;AACA;AACA;AACA;AACH;;AAIF;;;;;;;;AAQC;AACI;AACA;;;;AAKJ;AACI;AACA;;;AAIR;AAEQ;AACA;AACA;AACA;;;AAaI;;AACA;AACA;AACA;;AAMZ;;;AAGR;;AAIJ;AACJ;;;;AAKI;;AAGI;AAeY;;;AAGA;;;;;;AAeJ;AACA;AACA;AACA;;AAMhB;;;AAII;;AAOY;;;AAGA;AACJ;;AAGR;;;AAGA;AACI;;;;AA8BgB;AACA;AACJ;AASI;;AAUA;;AAa5B;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef, useState } from 'react';\nimport Stack from '../Stack'\nimport IconButton from '../IconButton';\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\nimport Text from '../Text';\nimport Button from '../Button';\nimport ResetIcon from '@xanui/icons/Replay';\nimport ViewBox from '../ViewBox';\nimport { UseColorTemplateColor, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\n\nexport type CalendarProps = {\n    value?: Date | null;\n    onChange?: (date: Date | null) => void;\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\n\nconst ShowYears = ({ color, year, today, onClick }: any) => {\n    let years: any[] = []\n    const selectedRef: any = useRef(null)\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\n        const selected = year == y\n        years.push(<Stack\n            key={y}\n            sx={{\n                width: 50,\n                p: .1\n            }}\n            className='calender-year-item'\n        >\n            <Button\n                color={selected ? color : \"default\"}\n                className='calender-year-button'\n                size='small'\n                corner=\"circle\"\n                ref={selected ? selectedRef : null}\n                onClick={() => onClick(y)}\n                variant={selected ? \"fill\" : \"text\"}\n            >\n                {y}\n            </Button>\n        </Stack>)\n    }\n\n    useEffect(() => {\n        if (selectedRef?.current) {\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\n        }\n    }, [])\n\n    return (\n        <Stack\n            sx={{\n                flexWrap: \"wrap\",\n                flexDirection: \"row\",\n                overflow: \"hidden\",\n                overflowY: \"auto\"\n            }}\n            className='calender-years'\n        >\n            {years}\n        </Stack>\n    )\n}\n\n\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\n    const _p: any = {}\n    if (VMode) _p.VMode = VMode\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color || \"brand\"\n\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\n    let [selectedDate, setSelectedDate] = useState(new Date());\n    selectedDate = value instanceof Date ? value : selectedDate\n    const [currentDate, setCurrentDate] = useState(selectedDate);\n    const year = currentDate.getFullYear()\n    const month = currentDate.getMonth()\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\n    const today = new Date();\n    const btnWidth = 36\n    const boxWidth = btnWidth * 7\n\n    const showCalendar = () => {\n\n        let firstDay = (new Date(year, month)).getDay();\n        let rows = []\n        let row = []\n\n        const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n        for (let i = 0; i < dayNames.length; i++) {\n            const k = dayNames[i];\n            row.push(<Stack\n                key={\"dayname-\" + i}\n                sx={{\n                    width: btnWidth,\n                    height: btnWidth,\n                    alignItems: \"center\",\n                    justifyContent: \"center\"\n                }}\n            >\n                <IconButton\n                    variant={\"text\"}\n                    color=\"default\"\n                    disabled\n                >\n                    {k}\n                </IconButton>\n            </Stack>)\n        }\n\n        rows.push(<Stack flexRow key={\"header\"} className='calender-day-row'>\n            {row}\n        </Stack>);\n\n        let date = 1;\n        for (let i = 0; i < 6; i++) {\n            let row = []\n            for (let j = 0; j < 7; j++) {\n                if (i === 0 && j < firstDay) {\n                    row.push(<Stack\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        key={date + j + i}\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                    >\n\n                    </Stack>)\n                } else if (date > daysInMonth) {\n                    break;\n                } else {\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\n\n                    let css: any = {}\n                    if (isToday) {\n                        css = {\n                            variant: \"fill\",\n                            color: \"default\"\n                        }\n                    }\n\n                    if (isSelected) {\n                        css = {\n                            variant: \"fill\",\n                            color: color\n                        }\n                    }\n\n                    row.push(<Stack\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                        key={date + j + i}\n                        className='calender-day-item'\n                    >\n                        <IconButton\n                            className='calender-day-button'\n                            variant={isSelected ? \"fill\" : \"text\"}\n                            color={isToday ? color : \"default\"}\n                            {...css}\n                            data-value={date}\n                            onClick={(e: any) => {\n                                let d = e.target.getAttribute(\"data-value\")\n                                if (!d) return\n                                let selectedDate = new Date(year, month, parseInt(d))\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\n                            }}\n                        >\n                            {date}\n                        </IconButton>\n                    </Stack>)\n                    date++;\n                }\n            }\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\n                {row}\n            </Stack>);\n        }\n        return rows\n    }\n\n    const showMonth = () => {\n        let months: any[] = []\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n        for (let m = 0; m < monthNames.length; m++) {\n            const selected = currentDate.getMonth() === m\n\n            months.push(<Stack\n                key={m}\n                width={\"50%\"}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                p={.1}\n                className='calender-months-item'\n            >\n                <Button\n                    color={selected ? color : \"default\"}\n                    className='calender-month-button'\n                    size='small'\n                    corner=\"circle\"\n                    variant={selected ? \"fill\" : 'text'}\n                    onClick={() => {\n                        const v = new Date(currentDate.getFullYear(), m)\n                        setCurrentDate(v)\n                        setViewMode(\"day\")\n                        onButtonClick && onButtonClick(\"month\", v)\n                    }}\n                    sx={{\n                        color: selected ? \"brand.text\" : \"text.primary\"\n                    }}\n                >\n                    {monthNames[m]}\n                </Button>\n            </Stack>)\n        }\n\n        return (\n            <Stack\n                className='calender-months'\n                sx={{\n                    flexWrap: \"wrap\",\n                    overflow: \"hidden\",\n                    overflowY: \"auto\",\n                    flexDirection: \"row\"\n                }}\n            >\n                {months}\n            </Stack>\n        )\n    }\n\n    let view: any = null\n    switch (viewMode) {\n        case \"year\":\n            view = <ShowYears\n                color={color}\n                today={today}\n                year={year}\n                boxWidth={boxWidth}\n                onClick={(y: any) => {\n                    currentDate.setFullYear(y)\n                    setCurrentDate(currentDate)\n                    setViewMode(\"month\")\n                    onButtonClick && onButtonClick(\"year\", currentDate)\n                }}\n            />\n            break;\n        case \"month\":\n            view = showMonth()\n            break;\n        default:\n            view = (<>\n\n                {showCalendar()}\n            </>\n            )\n            break;\n    }\n\n    return (\n        <ViewBox\n            className='calender-root'\n            maxHeight={308}\n            width={250}\n            radius={1}\n            bgcolor=\"background.secondary\"\n            startContent={\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\n                    <Text\n                        fontWeight=\"bold\"\n                        cursor=\"pointer\"\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\n                        flex={1}\n                    >\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\n                    </Text>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date())\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\n                        }}\n                    >\n                        <ResetIcon fontSize={20} />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowLeft />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowRight />\n                    </IconButton>\n                </Stack>\n            }\n        >\n            <Stack height=\"100%\" p={.5} className='calender-container'>\n                {view}\n            </Stack>\n        </ViewBox>\n    );\n};\n\nexport default Calendar;"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqBA;;AAEI;AACA;AACI;AACA;AAGQ;AACA;AACH;;;;;;;AAuBT;AAGY;AACA;AACA;AACA;AACH;AAMb;AAGA;AAAkB;;;AAGd;AAAW;AACX;AAAW;AACX;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAII;;;AAIA;AACA;AACI;AACA;AAGQ;AACA;AACA;AACA;;;AAaZ;;AAKA;;AAEI;;AAEQ;AAKQ;AACA;AACA;AACA;AACH;;AAIF;;;;;;;;AAQC;AACI;AACA;;;;AAKJ;AACI;AACA;;;AAIR;AAEQ;AACA;AACA;AACA;;;AAaI;;AACA;AACA;AACA;;AAMZ;;;AAGR;;AAIJ;AACJ;;;;AAKI;;AAGI;AAeY;;;AAGA;;;;;;AAeJ;AACA;AACA;AACA;;AAMhB;;;AAII;;AAOY;;;AAGA;AACJ;;AAGR;;;AAGA;AACI;;;;AA8BgB;AACA;AACJ;AASI;;AAUA;;AAa5B;;"}

package/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport Stack from '../Stack'\r\nimport IconButton from '../IconButton';\r\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\r\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\r\nimport Text from '../Text';\r\nimport Button from '../Button';\r\nimport ResetIcon from '@xanui/icons/Replay';\r\nimport ViewBox from '../ViewBox';\r\nimport { UseColorTemplateColor, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\n\r\nexport type CalendarProps = {\r\n    value?: Date | null;\r\n    onChange?: (date: Date | null) => void;\r\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\r\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n}\r\n\r\n\r\nconst ShowYears = ({ color, year, today, onClick }: any) => {\r\n    let years: any[] = []\r\n    const selectedRef: any = useRef(null)\r\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\r\n        const selected = year == y\r\n        years.push(<Stack\r\n            key={y}\r\n            sx={{\r\n                width: 50,\r\n                p: .1\r\n            }}\r\n            className='calender-year-item'\r\n        >\r\n            <Button\r\n                color={selected ? color : \"default\"}\r\n                className='calender-year-button'\r\n                size='small'\r\n                corner=\"circle\"\r\n                ref={selected ? selectedRef : null}\r\n                onClick={() => onClick(y)}\r\n                variant={selected ? \"fill\" : \"text\"}\r\n            >\r\n                {y}\r\n            </Button>\r\n        </Stack>)\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (selectedRef?.current) {\r\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\r\n        }\r\n    }, [])\r\n\r\n    return (\r\n        <Stack\r\n            sx={{\r\n                flexWrap: \"wrap\",\r\n                flexDirection: \"row\",\r\n                overflow: \"hidden\",\r\n                overflowY: \"auto\"\r\n            }}\r\n            className='calender-years'\r\n        >\r\n            {years}\r\n        </Stack>\r\n    )\r\n}\r\n\r\n\r\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\r\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\r\n    const _p: any = {}\r\n    if (VMode) _p.VMode = VMode\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n    color = p.color || \"brand\"\r\n\r\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\r\n    let [selectedDate, setSelectedDate] = useState(new Date());\r\n    selectedDate = value instanceof Date ? value : selectedDate\r\n    const [currentDate, setCurrentDate] = useState(selectedDate);\r\n    const year = currentDate.getFullYear()\r\n    const month = currentDate.getMonth()\r\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\r\n    const today = new Date();\r\n    const btnWidth = 36\r\n    const boxWidth = btnWidth * 7\r\n\r\n    const showCalendar = () => {\r\n\r\n        let firstDay = (new Date(year, month)).getDay();\r\n        let rows = []\r\n        let row = []\r\n\r\n        const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\r\n        for (let i = 0; i < dayNames.length; i++) {\r\n            const k = dayNames[i];\r\n            row.push(<Stack\r\n                key={\"dayname-\" + i}\r\n                sx={{\r\n                    width: btnWidth,\r\n                    height: btnWidth,\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\"\r\n                }}\r\n            >\r\n                <IconButton\r\n                    variant={\"text\"}\r\n                    color=\"default\"\r\n                    disabled\r\n                >\r\n                    {k}\r\n                </IconButton>\r\n            </Stack>)\r\n        }\r\n\r\n        rows.push(<Stack flexRow key={\"header\"} className='calender-day-row'>\r\n            {row}\r\n        </Stack>);\r\n\r\n        let date = 1;\r\n        for (let i = 0; i < 6; i++) {\r\n            let row = []\r\n            for (let j = 0; j < 7; j++) {\r\n                if (i === 0 && j < firstDay) {\r\n                    row.push(<Stack\r\n                        alignItems=\"center\"\r\n                        justifyContent=\"center\"\r\n                        key={date + j + i}\r\n                        sx={{\r\n                            width: btnWidth,\r\n                            height: btnWidth,\r\n                            alignItems: \"center\",\r\n                            justifyContent: \"center\"\r\n                        }}\r\n                    >\r\n\r\n                    </Stack>)\r\n                } else if (date > daysInMonth) {\r\n                    break;\r\n                } else {\r\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\r\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\r\n\r\n                    let css: any = {}\r\n                    if (isToday) {\r\n                        css = {\r\n                            variant: \"fill\",\r\n                            color: \"default\"\r\n                        }\r\n                    }\r\n\r\n                    if (isSelected) {\r\n                        css = {\r\n                            variant: \"fill\",\r\n                            color: color\r\n                        }\r\n                    }\r\n\r\n                    row.push(<Stack\r\n                        sx={{\r\n                            width: btnWidth,\r\n                            height: btnWidth,\r\n                            alignItems: \"center\",\r\n                            justifyContent: \"center\"\r\n                        }}\r\n                        key={date + j + i}\r\n                        className='calender-day-item'\r\n                    >\r\n                        <IconButton\r\n                            className='calender-day-button'\r\n                            variant={isSelected ? \"fill\" : \"text\"}\r\n                            color={isToday ? color : \"default\"}\r\n                            {...css}\r\n                            data-value={date}\r\n                            onClick={(e: any) => {\r\n                                let d = e.target.getAttribute(\"data-value\")\r\n                                if (!d) return\r\n                                let selectedDate = new Date(year, month, parseInt(d))\r\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\r\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\r\n                            }}\r\n                        >\r\n                            {date}\r\n                        </IconButton>\r\n                    </Stack>)\r\n                    date++;\r\n                }\r\n            }\r\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\r\n                {row}\r\n            </Stack>);\r\n        }\r\n        return rows\r\n    }\r\n\r\n    const showMonth = () => {\r\n        let months: any[] = []\r\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n        for (let m = 0; m < monthNames.length; m++) {\r\n            const selected = currentDate.getMonth() === m\r\n\r\n            months.push(<Stack\r\n                key={m}\r\n                width={\"50%\"}\r\n                alignItems=\"center\"\r\n                justifyContent=\"center\"\r\n                p={.1}\r\n                className='calender-months-item'\r\n            >\r\n                <Button\r\n                    color={selected ? color : \"default\"}\r\n                    className='calender-month-button'\r\n                    size='small'\r\n                    corner=\"circle\"\r\n                    variant={selected ? \"fill\" : 'text'}\r\n                    onClick={() => {\r\n                        const v = new Date(currentDate.getFullYear(), m)\r\n                        setCurrentDate(v)\r\n                        setViewMode(\"day\")\r\n                        onButtonClick && onButtonClick(\"month\", v)\r\n                    }}\r\n                    sx={{\r\n                        color: selected ? \"brand.text\" : \"text.primary\"\r\n                    }}\r\n                >\r\n                    {monthNames[m]}\r\n                </Button>\r\n            </Stack>)\r\n        }\r\n\r\n        return (\r\n            <Stack\r\n                className='calender-months'\r\n                sx={{\r\n                    flexWrap: \"wrap\",\r\n                    overflow: \"hidden\",\r\n                    overflowY: \"auto\",\r\n                    flexDirection: \"row\"\r\n                }}\r\n            >\r\n                {months}\r\n            </Stack>\r\n        )\r\n    }\r\n\r\n    let view: any = null\r\n    switch (viewMode) {\r\n        case \"year\":\r\n            view = <ShowYears\r\n                color={color}\r\n                today={today}\r\n                year={year}\r\n                boxWidth={boxWidth}\r\n                onClick={(y: any) => {\r\n                    currentDate.setFullYear(y)\r\n                    setCurrentDate(currentDate)\r\n                    setViewMode(\"month\")\r\n                    onButtonClick && onButtonClick(\"year\", currentDate)\r\n                }}\r\n            />\r\n            break;\r\n        case \"month\":\r\n            view = showMonth()\r\n            break;\r\n        default:\r\n            view = (<>\r\n\r\n                {showCalendar()}\r\n            </>\r\n            )\r\n            break;\r\n    }\r\n\r\n    return (\r\n        <ViewBox\r\n            className='calender-root'\r\n            maxHeight={308}\r\n            width={250}\r\n            radius={1}\r\n            bgcolor=\"background.secondary\"\r\n            startContent={\r\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\r\n                    <Text\r\n                        fontWeight=\"bold\"\r\n                        cursor=\"pointer\"\r\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\r\n                        flex={1}\r\n                    >\r\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\r\n                    </Text>\r\n                    <IconButton\r\n                        color=\"default\"\r\n                        variant='text'\r\n                        size={28}\r\n                        onClick={() => {\r\n                            setCurrentDate(new Date())\r\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\r\n                        }}\r\n                    >\r\n                        <ResetIcon fontSize={20} />\r\n                    </IconButton>\r\n                    <IconButton\r\n                        color=\"default\"\r\n                        variant='text'\r\n                        size={28}\r\n                        onClick={() => {\r\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\r\n                        }}\r\n                    >\r\n                        <IconKeyboardArrowLeft />\r\n                    </IconButton>\r\n                    <IconButton\r\n                        color=\"default\"\r\n                        variant='text'\r\n                        size={28}\r\n                        onClick={() => {\r\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\r\n                        }}\r\n                    >\r\n                        <IconKeyboardArrowRight />\r\n                    </IconButton>\r\n                </Stack>\r\n            }\r\n        >\r\n            <Stack height=\"100%\" p={.5} className='calender-container'>\r\n                {view}\r\n            </Stack>\r\n        </ViewBox>\r\n    );\r\n};\r\n\r\nexport default Calendar;"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBA;;AAEI;AACA;AACI;AACA;AAGQ;AACA;AACH;;;;;;;AAuBT;AAGY;AACA;AACA;AACA;AACH;AAMb;AAGA;AAAkB;;;AAGd;AAAW;AACX;AAAW;AACX;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAII;;;AAIA;AACA;AACI;AACA;AAGQ;AACA;AACA;AACA;;;AAaZ;;AAKA;;AAEI;;AAEQ;AAKQ;AACA;AACA;AACA;AACH;;AAIF;;;;;;;;AAQC;AACI;AACA;;;;AAKJ;AACI;AACA;;;AAIR;AAEQ;AACA;AACA;AACA;;;AAaI;;AACA;AACA;AACA;;AAMZ;;;AAGR;;AAIJ;AACJ;;;;AAKI;;AAGI;AAeY;;;AAGA;;;;;;AAeJ;AACA;AACA;AACA;;AAMhB;;;AAII;;AAOY;;;AAGA;AACJ;;AAGR;;;AAGA;AACI;;;;AA8BgB;AACA;AACJ;AASI;;AAUA;;AAa5B;;"}
+{"version":3,"file":"index.js","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef, useState } from 'react';\nimport Stack from '../Stack'\nimport IconButton from '../IconButton';\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\nimport Text from '../Text';\nimport Button from '../Button';\nimport ResetIcon from '@xanui/icons/Replay';\nimport ViewBox from '../ViewBox';\nimport { UseColorTemplateColor, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\n\nexport type CalendarProps = {\n    value?: Date | null;\n    onChange?: (date: Date | null) => void;\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\n\nconst ShowYears = ({ color, year, today, onClick }: any) => {\n    let years: any[] = []\n    const selectedRef: any = useRef(null)\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\n        const selected = year == y\n        years.push(<Stack\n            key={y}\n            sx={{\n                width: 50,\n                p: .1\n            }}\n            className='calender-year-item'\n        >\n            <Button\n                color={selected ? color : \"default\"}\n                className='calender-year-button'\n                size='small'\n                corner=\"circle\"\n                ref={selected ? selectedRef : null}\n                onClick={() => onClick(y)}\n                variant={selected ? \"fill\" : \"text\"}\n            >\n                {y}\n            </Button>\n        </Stack>)\n    }\n\n    useEffect(() => {\n        if (selectedRef?.current) {\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\n        }\n    }, [])\n\n    return (\n        <Stack\n            sx={{\n                flexWrap: \"wrap\",\n                flexDirection: \"row\",\n                overflow: \"hidden\",\n                overflowY: \"auto\"\n            }}\n            className='calender-years'\n        >\n            {years}\n        </Stack>\n    )\n}\n\n\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\n    const _p: any = {}\n    if (VMode) _p.VMode = VMode\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color || \"brand\"\n\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\n    let [selectedDate, setSelectedDate] = useState(new Date());\n    selectedDate = value instanceof Date ? value : selectedDate\n    const [currentDate, setCurrentDate] = useState(selectedDate);\n    const year = currentDate.getFullYear()\n    const month = currentDate.getMonth()\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\n    const today = new Date();\n    const btnWidth = 36\n    const boxWidth = btnWidth * 7\n\n    const showCalendar = () => {\n\n        let firstDay = (new Date(year, month)).getDay();\n        let rows = []\n        let row = []\n\n        const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n        for (let i = 0; i < dayNames.length; i++) {\n            const k = dayNames[i];\n            row.push(<Stack\n                key={\"dayname-\" + i}\n                sx={{\n                    width: btnWidth,\n                    height: btnWidth,\n                    alignItems: \"center\",\n                    justifyContent: \"center\"\n                }}\n            >\n                <IconButton\n                    variant={\"text\"}\n                    color=\"default\"\n                    disabled\n                >\n                    {k}\n                </IconButton>\n            </Stack>)\n        }\n\n        rows.push(<Stack flexRow key={\"header\"} className='calender-day-row'>\n            {row}\n        </Stack>);\n\n        let date = 1;\n        for (let i = 0; i < 6; i++) {\n            let row = []\n            for (let j = 0; j < 7; j++) {\n                if (i === 0 && j < firstDay) {\n                    row.push(<Stack\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        key={date + j + i}\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                    >\n\n                    </Stack>)\n                } else if (date > daysInMonth) {\n                    break;\n                } else {\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\n\n                    let css: any = {}\n                    if (isToday) {\n                        css = {\n                            variant: \"fill\",\n                            color: \"default\"\n                        }\n                    }\n\n                    if (isSelected) {\n                        css = {\n                            variant: \"fill\",\n                            color: color\n                        }\n                    }\n\n                    row.push(<Stack\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                        key={date + j + i}\n                        className='calender-day-item'\n                    >\n                        <IconButton\n                            className='calender-day-button'\n                            variant={isSelected ? \"fill\" : \"text\"}\n                            color={isToday ? color : \"default\"}\n                            {...css}\n                            data-value={date}\n                            onClick={(e: any) => {\n                                let d = e.target.getAttribute(\"data-value\")\n                                if (!d) return\n                                let selectedDate = new Date(year, month, parseInt(d))\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\n                            }}\n                        >\n                            {date}\n                        </IconButton>\n                    </Stack>)\n                    date++;\n                }\n            }\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\n                {row}\n            </Stack>);\n        }\n        return rows\n    }\n\n    const showMonth = () => {\n        let months: any[] = []\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n        for (let m = 0; m < monthNames.length; m++) {\n            const selected = currentDate.getMonth() === m\n\n            months.push(<Stack\n                key={m}\n                width={\"50%\"}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                p={.1}\n                className='calender-months-item'\n            >\n                <Button\n                    color={selected ? color : \"default\"}\n                    className='calender-month-button'\n                    size='small'\n                    corner=\"circle\"\n                    variant={selected ? \"fill\" : 'text'}\n                    onClick={() => {\n                        const v = new Date(currentDate.getFullYear(), m)\n                        setCurrentDate(v)\n                        setViewMode(\"day\")\n                        onButtonClick && onButtonClick(\"month\", v)\n                    }}\n                    sx={{\n                        color: selected ? \"brand.text\" : \"text.primary\"\n                    }}\n                >\n                    {monthNames[m]}\n                </Button>\n            </Stack>)\n        }\n\n        return (\n            <Stack\n                className='calender-months'\n                sx={{\n                    flexWrap: \"wrap\",\n                    overflow: \"hidden\",\n                    overflowY: \"auto\",\n                    flexDirection: \"row\"\n                }}\n            >\n                {months}\n            </Stack>\n        )\n    }\n\n    let view: any = null\n    switch (viewMode) {\n        case \"year\":\n            view = <ShowYears\n                color={color}\n                today={today}\n                year={year}\n                boxWidth={boxWidth}\n                onClick={(y: any) => {\n                    currentDate.setFullYear(y)\n                    setCurrentDate(currentDate)\n                    setViewMode(\"month\")\n                    onButtonClick && onButtonClick(\"year\", currentDate)\n                }}\n            />\n            break;\n        case \"month\":\n            view = showMonth()\n            break;\n        default:\n            view = (<>\n\n                {showCalendar()}\n            </>\n            )\n            break;\n    }\n\n    return (\n        <ViewBox\n            className='calender-root'\n            maxHeight={308}\n            width={250}\n            radius={1}\n            bgcolor=\"background.secondary\"\n            startContent={\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\n                    <Text\n                        fontWeight=\"bold\"\n                        cursor=\"pointer\"\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\n                        flex={1}\n                    >\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\n                    </Text>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date())\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\n                        }}\n                    >\n                        <ResetIcon fontSize={20} />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowLeft />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowRight />\n                    </IconButton>\n                </Stack>\n            }\n        >\n            <Stack height=\"100%\" p={.5} className='calender-container'>\n                {view}\n            </Stack>\n        </ViewBox>\n    );\n};\n\nexport default Calendar;"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBA;;AAEI;AACA;AACI;AACA;AAGQ;AACA;AACH;;;;;;;AAuBT;AAGY;AACA;AACA;AACA;AACH;AAMb;AAGA;AAAkB;;;AAGd;AAAW;AACX;AAAW;AACX;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAII;;;AAIA;AACA;AACI;AACA;AAGQ;AACA;AACA;AACA;;;AAaZ;;AAKA;;AAEI;;AAEQ;AAKQ;AACA;AACA;AACA;AACH;;AAIF;;;;;;;;AAQC;AACI;AACA;;;;AAKJ;AACI;AACA;;;AAIR;AAEQ;AACA;AACA;AACA;;;AAaI;;AACA;AACA;AACA;;AAMZ;;;AAGR;;AAIJ;AACJ;;;;AAKI;;AAGI;AAeY;;;AAGA;;;;;;AAeJ;AACA;AACA;AACA;;AAMhB;;;AAII;;AAOY;;;AAGA;AACJ;;AAGR;;;AAGA;AACI;;;;AA8BgB;AACA;AACJ;AASI;;AAUA;;AAa5B;;"}

package/CalendarInput/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\"use client\";\r\nimport Input, { InputProps } from '../Input'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useRef, useState } from 'react'\r\nimport Calendar, { CalendarProps } from '../Calendar'\r\nimport Stack from '../Stack'\r\nimport ClickOutside from '../ClickOutside'\r\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\r\nimport IconButton from '../IconButton'\r\nimport ClearIcon from '@xanui/icons/Clear';\r\nimport { useInterface } from '@xanui/core'\r\n\r\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\r\n    value?: CalendarProps[\"value\"];\r\n    onChange?: CalendarProps[\"onChange\"];\r\n    getInputValue?: (value?: Date | null) => string;\r\n    slotProps?: {\r\n        input?: InputProps['slotProps'];\r\n        calender?: CalendarProps;\r\n        menu?: MenuProps;\r\n    }\r\n}\r\n\r\nconst CalenderInput = (props: CalenderInpurProps) => {\r\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\r\n    const [target, setTarget] = useState<any>()\r\n    const inputRef: any = useRef(null)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                readOnly\r\n                startIcon={<CalendarIcon />}\r\n                placeholder={placeholder}\r\n                {...inputProps}\r\n                endIcon={<>\r\n                    {value && <Stack>\r\n                        <IconButton\r\n                            color=\"default\"\r\n                            size={28}\r\n                            variant=\"text\"\r\n                            onClick={() => {\r\n                                onChange && onChange(null)\r\n                            }}\r\n                        >\r\n                            <ClearIcon fontSize={20} />\r\n                        </IconButton>\r\n                    </Stack>}\r\n                </>}\r\n                cursor=\"pointer\"\r\n                ref={inputRef}\r\n                onFocus={() => setTarget(target ? null : inputRef?.current)}\r\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\r\n            />\r\n            <Menu\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                bgcolor=\"transparent\"\r\n                {...slotProps?.menu}\r\n            >\r\n                <ClickOutside onClickOutside={() => setTarget(null)}>\r\n                    <Calendar\r\n                        {...slotProps?.calender}\r\n                        value={value}\r\n                        onChange={(e) => {\r\n                            setTarget(null)\r\n                            onChange && onChange(e)\r\n                        }}\r\n                    />\r\n                </ClickOutside>\r\n            </Menu>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default CalenderInput"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;;;AAGI;;AAgB4B;AACJ;;AAuBA;AACJ;AAMxB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\"use client\";\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\n    value?: CalendarProps[\"value\"];\n    onChange?: CalendarProps[\"onChange\"];\n    getInputValue?: (value?: Date | null) => string;\n    slotProps?: {\n        input?: InputProps['slotProps'];\n        calender?: CalendarProps;\n        menu?: MenuProps;\n    }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n    const [target, setTarget] = useState<any>()\n    const inputRef: any = useRef(null)\n\n    return (\n        <>\n            <Input\n                readOnly\n                startIcon={<CalendarIcon />}\n                placeholder={placeholder}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"default\"\n                            size={28}\n                            variant=\"text\"\n                            onClick={() => {\n                                onChange && onChange(null)\n                            }}\n                        >\n                            <ClearIcon fontSize={20} />\n                        </IconButton>\n                    </Stack>}\n                </>}\n                cursor=\"pointer\"\n                ref={inputRef}\n                onFocus={() => setTarget(target ? null : inputRef?.current)}\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom-left\"\n                bgcolor=\"transparent\"\n                {...slotProps?.menu}\n            >\n                <ClickOutside onClickOutside={() => setTarget(null)}>\n                    <Calendar\n                        {...slotProps?.calender}\n                        value={value}\n                        onChange={(e) => {\n                            setTarget(null)\n                            onChange && onChange(e)\n                        }}\n                    />\n                </ClickOutside>\n            </Menu>\n        </>\n    )\n}\n\nexport default CalenderInput"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;;;AAGI;;AAgB4B;AACJ;;AAuBA;AACJ;AAMxB;;"}

package/CalendarInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\"use client\";\r\nimport Input, { InputProps } from '../Input'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useRef, useState } from 'react'\r\nimport Calendar, { CalendarProps } from '../Calendar'\r\nimport Stack from '../Stack'\r\nimport ClickOutside from '../ClickOutside'\r\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\r\nimport IconButton from '../IconButton'\r\nimport ClearIcon from '@xanui/icons/Clear';\r\nimport { useInterface } from '@xanui/core'\r\n\r\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\r\n    value?: CalendarProps[\"value\"];\r\n    onChange?: CalendarProps[\"onChange\"];\r\n    getInputValue?: (value?: Date | null) => string;\r\n    slotProps?: {\r\n        input?: InputProps['slotProps'];\r\n        calender?: CalendarProps;\r\n        menu?: MenuProps;\r\n    }\r\n}\r\n\r\nconst CalenderInput = (props: CalenderInpurProps) => {\r\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\r\n    const [target, setTarget] = useState<any>()\r\n    const inputRef: any = useRef(null)\r\n\r\n    return (\r\n        <>\r\n            <Input\r\n                readOnly\r\n                startIcon={<CalendarIcon />}\r\n                placeholder={placeholder}\r\n                {...inputProps}\r\n                endIcon={<>\r\n                    {value && <Stack>\r\n                        <IconButton\r\n                            color=\"default\"\r\n                            size={28}\r\n                            variant=\"text\"\r\n                            onClick={() => {\r\n                                onChange && onChange(null)\r\n                            }}\r\n                        >\r\n                            <ClearIcon fontSize={20} />\r\n                        </IconButton>\r\n                    </Stack>}\r\n                </>}\r\n                cursor=\"pointer\"\r\n                ref={inputRef}\r\n                onFocus={() => setTarget(target ? null : inputRef?.current)}\r\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\r\n            />\r\n            <Menu\r\n                target={target}\r\n                placement=\"bottom-left\"\r\n                bgcolor=\"transparent\"\r\n                {...slotProps?.menu}\r\n            >\r\n                <ClickOutside onClickOutside={() => setTarget(null)}>\r\n                    <Calendar\r\n                        {...slotProps?.calender}\r\n                        value={value}\r\n                        onChange={(e) => {\r\n                            setTarget(null)\r\n                            onChange && onChange(e)\r\n                        }}\r\n                    />\r\n                </ClickOutside>\r\n            </Menu>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default CalenderInput"],"names":[],"mappings":";;;;;;;;;;;;;;AAuBA;;;AAGI;;AAgB4B;AACJ;;AAuBA;AACJ;AAMxB;;"}
+{"version":3,"file":"index.js","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\"use client\";\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\n    value?: CalendarProps[\"value\"];\n    onChange?: CalendarProps[\"onChange\"];\n    getInputValue?: (value?: Date | null) => string;\n    slotProps?: {\n        input?: InputProps['slotProps'];\n        calender?: CalendarProps;\n        menu?: MenuProps;\n    }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n    let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n    const [target, setTarget] = useState<any>()\n    const inputRef: any = useRef(null)\n\n    return (\n        <>\n            <Input\n                readOnly\n                startIcon={<CalendarIcon />}\n                placeholder={placeholder}\n                {...inputProps}\n                endIcon={<>\n                    {value && <Stack>\n                        <IconButton\n                            color=\"default\"\n                            size={28}\n                            variant=\"text\"\n                            onClick={() => {\n                                onChange && onChange(null)\n                            }}\n                        >\n                            <ClearIcon fontSize={20} />\n                        </IconButton>\n                    </Stack>}\n                </>}\n                cursor=\"pointer\"\n                ref={inputRef}\n                onFocus={() => setTarget(target ? null : inputRef?.current)}\n                value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom-left\"\n                bgcolor=\"transparent\"\n                {...slotProps?.menu}\n            >\n                <ClickOutside onClickOutside={() => setTarget(null)}>\n                    <Calendar\n                        {...slotProps?.calender}\n                        value={value}\n                        onChange={(e) => {\n                            setTarget(null)\n                            onChange && onChange(e)\n                        }}\n                    />\n                </ClickOutside>\n            </Menu>\n        </>\n    )\n}\n\nexport default CalenderInput"],"names":[],"mappings":";;;;;;;;;;;;;;AAuBA;;;AAGI;;AAgB4B;AACJ;;AAuBA;AACJ;AAMxB;;"}

package/Checkbox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useState, ReactElement } from 'react';\r\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport CheckIcon from '@xanui/icons/CheckBox'\r\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\r\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\r\n\r\n\r\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checkIcon?: useBreakpointPropsType<ReactElement>;\r\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\r\n    indeterminate?: useBreakpointPropsType<boolean>;\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n}\r\n\r\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\r\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\r\n    const _p: any = {}\r\n    if (checkIcon) _p.checkIcon = checkIcon\r\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\r\n    if (indeterminate) _p.indeterminate = indeterminate\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    checkIcon = p.checkIcon\r\n    uncheckIcon = p.uncheckIcon\r\n    indeterminate = p.indeterminate\r\n    size = p.size\r\n    color = p.color\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n    size ??= \"medium\"\r\n    color ??= \"brand\"\r\n\r\n    onChange = onChange || (() => set(!c));\r\n    if (indeterminate) {\r\n        checked = true\r\n        checkIcon = <IndeterminateCheckBoxIcon />\r\n    }\r\n\r\n    let sizes: any = {\r\n        small: 22,\r\n        medium: 24,\r\n        large: 32\r\n    }\r\n\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <Tag\r\n                baseClass='checkbox'\r\n                onClick={() => {\r\n                    onChange && onChange()\r\n                }}\r\n                sxr={{\r\n                    height: size,\r\n                    width: size,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    color: checked ? color : \"text.secondary\",\r\n                    cursor: \"pointer\",\r\n                    disabled: disabled,\r\n                    \"& svg\": {\r\n                        fontSize: size\r\n                    },\r\n                    ...rest?.sx\r\n                }}\r\n            >\r\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                readOnly\r\n                type=\"checkbox\"\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Checkbox\r\n"],"names":[],"mappings":";;;;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState, ReactElement } from 'react';\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/CheckBox'\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\n\n\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checkIcon?: useBreakpointPropsType<ReactElement>;\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\n    indeterminate?: useBreakpointPropsType<boolean>;\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\n    const _p: any = {}\n    if (checkIcon) _p.checkIcon = checkIcon\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\n    if (indeterminate) _p.indeterminate = indeterminate\n    if (size) _p.size = size\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n\n    checkIcon = p.checkIcon\n    uncheckIcon = p.uncheckIcon\n    indeterminate = p.indeterminate\n    size = p.size\n    color = p.color\n\n    const [c, set] = useState(false)\n    checked ??= c\n    size ??= \"medium\"\n    color ??= \"brand\"\n\n    onChange = onChange || (() => set(!c));\n    if (indeterminate) {\n        checked = true\n        checkIcon = <IndeterminateCheckBoxIcon />\n    }\n\n    let sizes: any = {\n        small: 22,\n        medium: 24,\n        large: 32\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    return (\n        <>\n            <Tag\n                baseClass='checkbox'\n                onClick={() => {\n                    onChange && onChange()\n                }}\n                sxr={{\n                    height: size,\n                    width: size,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    color: checked ? color : \"text.secondary\",\n                    cursor: \"pointer\",\n                    disabled: disabled,\n                    \"& svg\": {\n                        fontSize: size\n                    },\n                    ...rest?.sx\n                }}\n            >\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                readOnly\n                type=\"checkbox\"\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </>\n    )\n})\n\nexport default Checkbox\n"],"names":[],"mappings":";;;;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}

package/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useState, ReactElement } from 'react';\r\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport CheckIcon from '@xanui/icons/CheckBox'\r\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\r\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\r\n\r\n\r\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n    checkIcon?: useBreakpointPropsType<ReactElement>;\r\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\r\n    indeterminate?: useBreakpointPropsType<boolean>;\r\n    checked?: boolean;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n}\r\n\r\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\r\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\r\n    const _p: any = {}\r\n    if (checkIcon) _p.checkIcon = checkIcon\r\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\r\n    if (indeterminate) _p.indeterminate = indeterminate\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    checkIcon = p.checkIcon\r\n    uncheckIcon = p.uncheckIcon\r\n    indeterminate = p.indeterminate\r\n    size = p.size\r\n    color = p.color\r\n\r\n    const [c, set] = useState(false)\r\n    checked ??= c\r\n    size ??= \"medium\"\r\n    color ??= \"brand\"\r\n\r\n    onChange = onChange || (() => set(!c));\r\n    if (indeterminate) {\r\n        checked = true\r\n        checkIcon = <IndeterminateCheckBoxIcon />\r\n    }\r\n\r\n    let sizes: any = {\r\n        small: 22,\r\n        medium: 24,\r\n        large: 32\r\n    }\r\n\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <Tag\r\n                baseClass='checkbox'\r\n                onClick={() => {\r\n                    onChange && onChange()\r\n                }}\r\n                sxr={{\r\n                    height: size,\r\n                    width: size,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    color: checked ? color : \"text.secondary\",\r\n                    cursor: \"pointer\",\r\n                    disabled: disabled,\r\n                    \"& svg\": {\r\n                        fontSize: size\r\n                    },\r\n                    ...rest?.sx\r\n                }}\r\n            >\r\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\r\n            </Tag>\r\n            <Tag\r\n                {...rest}\r\n                component='input'\r\n                ref={ref}\r\n                readOnly\r\n                type=\"checkbox\"\r\n                checked={checked}\r\n                sxr={{\r\n                    display: \"none!important\"\r\n                }}\r\n            />\r\n        </>\r\n    )\r\n})\r\n\r\nexport default Checkbox\r\n"],"names":[],"mappings":";;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState, ReactElement } from 'react';\nimport { Tag, useInterface, UseColorTemplateColor, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/CheckBox'\nimport UnCheckIcon from '@xanui/icons/CheckBoxOutlineBlank'\nimport IndeterminateCheckBoxIcon from '@xanui/icons/IndeterminateCheckBox';\n\n\nexport type CheckboxProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checkIcon?: useBreakpointPropsType<ReactElement>;\n    uncheckIcon?: useBreakpointPropsType<ReactElement>;\n    indeterminate?: useBreakpointPropsType<boolean>;\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\nconst Checkbox = React.forwardRef((props: CheckboxProps, ref?: React.Ref<any>) => {\n    let [{ color, size, checkIcon, uncheckIcon, checked, indeterminate, disabled, onChange, ...rest }] = useInterface<any>(\"Checkbox\", props, {})\n    const _p: any = {}\n    if (checkIcon) _p.checkIcon = checkIcon\n    if (uncheckIcon) _p.uncheckIcon = uncheckIcon\n    if (indeterminate) _p.indeterminate = indeterminate\n    if (size) _p.size = size\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n\n    checkIcon = p.checkIcon\n    uncheckIcon = p.uncheckIcon\n    indeterminate = p.indeterminate\n    size = p.size\n    color = p.color\n\n    const [c, set] = useState(false)\n    checked ??= c\n    size ??= \"medium\"\n    color ??= \"brand\"\n\n    onChange = onChange || (() => set(!c));\n    if (indeterminate) {\n        checked = true\n        checkIcon = <IndeterminateCheckBoxIcon />\n    }\n\n    let sizes: any = {\n        small: 22,\n        medium: 24,\n        large: 32\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    return (\n        <>\n            <Tag\n                baseClass='checkbox'\n                onClick={() => {\n                    onChange && onChange()\n                }}\n                sxr={{\n                    height: size,\n                    width: size,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    color: checked ? color : \"text.secondary\",\n                    cursor: \"pointer\",\n                    disabled: disabled,\n                    \"& svg\": {\n                        fontSize: size\n                    },\n                    ...rest?.sx\n                }}\n            >\n                {checked ? (checkIcon || <CheckIcon />) : (uncheckIcon || <UnCheckIcon />)}\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                readOnly\n                type=\"checkbox\"\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </>\n    )\n})\n\nexport default Checkbox\n"],"names":[],"mappings":";;;;;;;;;AAiBA;AACI;;AAEA;AAAe;AACf;AAAiB;AACjB;AAAmB;AACnB;AAAU;AACV;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;;;;;AAOA;;;AAGI;;AAGJ;AACI;AACA;AACA;;;AAIA;;AAGJ;;;AAiBoB;;AAeJ;;AAKpB;;"}

package/Chip/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner, { UseCornerTypes } from '../useCorner'\r\n\r\n\r\n\r\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\r\n    label: useBreakpointPropsType<string | ReactElement>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<UseCornerTypes>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\r\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\r\n    const _p: any = {}\r\n    if (label) _p.label = label\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    label = p.label\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    color = p.color || \"brand\"\r\n    variant = p.variant || \"fill\"\r\n    corner = p.corner || \"circle\"\r\n    size = p.size || \"medium\"\r\n    rest.sx = (rest as any).sx || {};\r\n\r\n    const cornerCss = useCorner(corner)\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 24,\r\n            gap: .5,\r\n            px: startIcon || endIcon ? .8 : 1,\r\n            fontSize: \"small\"\r\n        },\r\n        medium: {\r\n            height: 32,\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n            fontSize: 'button',\r\n        },\r\n        large: {\r\n            height: 40,\r\n            fontSize: 'text',\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...cornerCss}\r\n            {...template.primary}\r\n            {...(sizes[size as any] || {})}\r\n            {...rest}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexDirection: \"row\",\r\n                alignItems: \"center\",\r\n                transition: \"background .3s\",\r\n                overflow: \"hidden\",\r\n\r\n                \"&  > *\": {\r\n                    flex: \"0 0 auto\",\r\n                    textOverflow: \"ellipsis\",\r\n                    whiteSpace: \"nowrap\",\r\n                    overflow: \"hidden\",\r\n                },\r\n            }}\r\n            baseClass='chip'\r\n            ref={ref}\r\n        >\r\n            {startIcon}\r\n            <Tag\r\n                sxr={{\r\n                    alignItems: \"center\",\r\n                    flexBox: true\r\n                }}\r\n            >{label}</Tag>\r\n            {endIcon}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Chip\r\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}

package/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner, { UseCornerTypes } from '../useCorner'\r\n\r\n\r\n\r\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\r\n    label: useBreakpointPropsType<string | ReactElement>;\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<UseCornerTypes>;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n}\r\n\r\n\r\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\r\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\r\n    const _p: any = {}\r\n    if (label) _p.label = label\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    label = p.label\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    color = p.color || \"brand\"\r\n    variant = p.variant || \"fill\"\r\n    corner = p.corner || \"circle\"\r\n    size = p.size || \"medium\"\r\n    rest.sx = (rest as any).sx || {};\r\n\r\n    const cornerCss = useCorner(corner)\r\n    const template = useColorTemplate(color, variant)\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 24,\r\n            gap: .5,\r\n            px: startIcon || endIcon ? .8 : 1,\r\n            fontSize: \"small\"\r\n        },\r\n        medium: {\r\n            height: 32,\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n            fontSize: 'button',\r\n        },\r\n        large: {\r\n            height: 40,\r\n            fontSize: 'text',\r\n            gap: 1,\r\n            px: startIcon || endIcon ? .8 : 1.5,\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            {...cornerCss}\r\n            {...template.primary}\r\n            {...(sizes[size as any] || {})}\r\n            {...rest}\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                flexDirection: \"row\",\r\n                alignItems: \"center\",\r\n                transition: \"background .3s\",\r\n                overflow: \"hidden\",\r\n\r\n                \"&  > *\": {\r\n                    flex: \"0 0 auto\",\r\n                    textOverflow: \"ellipsis\",\r\n                    whiteSpace: \"nowrap\",\r\n                    overflow: \"hidden\",\r\n                },\r\n            }}\r\n            baseClass='chip'\r\n            ref={ref}\r\n        >\r\n            {startIcon}\r\n            <Tag\r\n                sxr={{\r\n                    alignItems: \"center\",\r\n                    flexBox: true\r\n                }}\r\n            >{label}</Tag>\r\n            {endIcon}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Chip\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" | \"children\" | \"size\"> & {\n    label: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n    let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\n    const _p: any = {}\n    if (label) _p.label = label\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    label = p.label\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color || \"brand\"\n    variant = p.variant || \"fill\"\n    corner = p.corner || \"circle\"\n    size = p.size || \"medium\"\n    rest.sx = (rest as any).sx || {};\n\n    const cornerCss = useCorner(corner)\n    const template = useColorTemplate(color, variant)\n\n    const sizes: any = {\n        small: {\n            height: 24,\n            gap: .5,\n            px: startIcon || endIcon ? .8 : 1,\n            fontSize: \"small\"\n        },\n        medium: {\n            height: 32,\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n            fontSize: 'button',\n        },\n        large: {\n            height: 40,\n            fontSize: 'text',\n            gap: 1,\n            px: startIcon || endIcon ? .8 : 1.5,\n        }\n    }\n\n    return (\n        <Tag\n            {...cornerCss}\n            {...template.primary}\n            {...(sizes[size as any] || {})}\n            {...rest}\n            sxr={{\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                transition: \"background .3s\",\n                overflow: \"hidden\",\n\n                \"&  > *\": {\n                    flex: \"0 0 auto\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                    overflow: \"hidden\",\n                },\n            }}\n            baseClass='chip'\n            ref={ref}\n        >\n            {startIcon}\n            <Tag\n                sxr={{\n                    alignItems: \"center\",\n                    flexBox: true\n                }}\n            >{label}</Tag>\n            {endIcon}\n        </Tag>\n    )\n})\n\nexport default Chip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/CircleProgress/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type CircleProgressProps = {\r\n    children?: ReactElement;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    showPercentage?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\r\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\r\n    const _p: any = {}\r\n    if (color) _p.color = color\r\n    if (trackColor) _p.trackColor = trackColor\r\n    if (thumbColor) _p.thumbColor = thumbColor\r\n    if (size) _p.size = size\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (showPercentage) _p.showPercentage = showPercentage\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    color = p.color ?? \"brand\"\r\n    trackColor = p.trackColor\r\n    thumbColor = p.thumbColor\r\n    size = p.size ?? \"medium\"\r\n    thumbSize = p.thumbSize ?? 4\r\n    trackSize = p.trackSize\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    showPercentage = p.showPercentage\r\n    speed = p.speed ?? 1.3\r\n\r\n    if (trackColor === 'default') {\r\n        trackColor = \"divider\"\r\n    }\r\n\r\n    if (thumbColor === 'default') {\r\n        thumbColor = \"divider.secondary\"\r\n    }\r\n\r\n\r\n    let sizes: any = {\r\n        small: 24,\r\n        medium: 32,\r\n        large: 44\r\n    }\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    let isVal = typeof value === 'number'\r\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\r\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\r\n    if (isVal && (value as number) > 100) value = 100\r\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\r\n    const percent = circumference - ((value || 0) / 100) * circumference\r\n\r\n    if (showPercentage && !children) {\r\n        children = <Tag\r\n            sxr={{\r\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\r\n                fontSize: size / 4\r\n            }}\r\n        >{value}%</Tag>\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='circle-progress'\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                \"& svg[class='circle-progress-svg']\": {\r\n                    zIndex: 1,\r\n                    position: \"absolute\",\r\n                    top: 0,\r\n                    left: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\r\n                    transformOrigin: isVal ? \"center\" : \"initial\",\r\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\r\n                    [`@keyframes ${animrotate}`]: {\r\n                        \"100%\": {\r\n                            transform: \"rotate(360deg)\"\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-thumb\": {\r\n\r\n                        strokeDasharray: circumference,\r\n                        strokeDashoffset: percent,\r\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\r\n                        fill: \"none\",\r\n                        strokeWidth: thumbSize,\r\n                        strokeLinecap: \"round\",\r\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\r\n                        [`@keyframes ${animdash}`]: {\r\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\r\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\r\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-track\": {\r\n                        fill: \"none\",\r\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\r\n                        strokeWidth: trackSize ?? thumbSize,\r\n                    }\r\n                },\r\n                width: size,\r\n                height: size,\r\n                position: \"relative\"\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\r\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\r\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\r\n            </svg>\r\n            {!!children && <Tag\r\n                baseClass=\"circle-progress-content\"\r\n                sxr={{\r\n                    zIndex: 2,\r\n                    width: size - thumbSize,\r\n                    height: size - thumbSize,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    '& *': {\r\n                        maxWidth: size - (thumbSize + 8),\r\n                        maxHeight: size - (thumbSize + 8),\r\n                    }\r\n                }}\r\n            >\r\n                {children}\r\n            </Tag>}\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default CircleProgress\r\n\r\n"],"names":[],"mappings":";;;;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    thumbSize?: useBreakpointPropsType<number>;\n    trackSize?: useBreakpointPropsType<number>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    showPercentage?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (trackColor) _p.trackColor = trackColor\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (size) _p.size = size\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (trackSize) _p.trackSize = trackSize\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (showPercentage) _p.showPercentage = showPercentage\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    trackColor = p.trackColor\n    thumbColor = p.thumbColor\n    size = p.size ?? \"medium\"\n    thumbSize = p.thumbSize ?? 4\n    trackSize = p.trackSize\n    value = p.value\n    hideTrack = p.hideTrack\n    showPercentage = p.showPercentage\n    speed = p.speed ?? 1.3\n\n    if (trackColor === 'default') {\n        trackColor = \"divider\"\n    }\n\n    if (thumbColor === 'default') {\n        thumbColor = \"divider.secondary\"\n    }\n\n\n    let sizes: any = {\n        small: 24,\n        medium: 32,\n        large: 44\n    }\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    let isVal = typeof value === 'number'\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\n    if (isVal && (value as number) > 100) value = 100\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\n    const percent = circumference - ((value || 0) / 100) * circumference\n\n    if (showPercentage && !children) {\n        children = <Tag\n            sxr={{\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\n                fontSize: size / 4\n            }}\n        >{value}%</Tag>\n    }\n\n    return (\n        <Tag\n            baseClass='circle-progress'\n            sxr={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                \"& svg[class='circle-progress-svg']\": {\n                    zIndex: 1,\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\n                    transformOrigin: isVal ? \"center\" : \"initial\",\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\n                    [`@keyframes ${animrotate}`]: {\n                        \"100%\": {\n                            transform: \"rotate(360deg)\"\n                        }\n                    },\n                    \"& circle.circle-progress-thumb\": {\n\n                        strokeDasharray: circumference,\n                        strokeDashoffset: percent,\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\n                        fill: \"none\",\n                        strokeWidth: thumbSize,\n                        strokeLinecap: \"round\",\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\n                        [`@keyframes ${animdash}`]: {\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\n                        }\n                    },\n                    \"& circle.circle-progress-track\": {\n                        fill: \"none\",\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\n                        strokeWidth: trackSize ?? thumbSize,\n                    }\n                },\n                width: size,\n                height: size,\n                position: \"relative\"\n            }}\n            ref={ref}\n        >\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\n            </svg>\n            {!!children && <Tag\n                baseClass=\"circle-progress-content\"\n                sxr={{\n                    zIndex: 2,\n                    width: size - thumbSize,\n                    height: size - thumbSize,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    '& *': {\n                        maxWidth: size - (thumbSize + 8),\n                        maxHeight: size - (thumbSize + 8),\n                    }\n                }}\n            >\n                {children}\n            </Tag>}\n        </Tag >\n    )\n})\n\nexport default CircleProgress\n\n"],"names":[],"mappings":";;;;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}

package/CircleProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type CircleProgressProps = {\r\n    children?: ReactElement;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    trackSize?: useBreakpointPropsType<number>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    showPercentage?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\r\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\r\n    const _p: any = {}\r\n    if (color) _p.color = color\r\n    if (trackColor) _p.trackColor = trackColor\r\n    if (thumbColor) _p.thumbColor = thumbColor\r\n    if (size) _p.size = size\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (trackSize) _p.trackSize = trackSize\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (showPercentage) _p.showPercentage = showPercentage\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    color = p.color ?? \"brand\"\r\n    trackColor = p.trackColor\r\n    thumbColor = p.thumbColor\r\n    size = p.size ?? \"medium\"\r\n    thumbSize = p.thumbSize ?? 4\r\n    trackSize = p.trackSize\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    showPercentage = p.showPercentage\r\n    speed = p.speed ?? 1.3\r\n\r\n    if (trackColor === 'default') {\r\n        trackColor = \"divider\"\r\n    }\r\n\r\n    if (thumbColor === 'default') {\r\n        thumbColor = \"divider.secondary\"\r\n    }\r\n\r\n\r\n    let sizes: any = {\r\n        small: 24,\r\n        medium: 32,\r\n        large: 44\r\n    }\r\n    if (typeof size === 'string' && sizes[size]) {\r\n        size = sizes[size]\r\n    }\r\n\r\n    let isVal = typeof value === 'number'\r\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\r\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\r\n    if (isVal && (value as number) > 100) value = 100\r\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\r\n    const percent = circumference - ((value || 0) / 100) * circumference\r\n\r\n    if (showPercentage && !children) {\r\n        children = <Tag\r\n            sxr={{\r\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\r\n                fontSize: size / 4\r\n            }}\r\n        >{value}%</Tag>\r\n    }\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='circle-progress'\r\n            sxr={{\r\n                display: \"inline-flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                \"& svg[class='circle-progress-svg']\": {\r\n                    zIndex: 1,\r\n                    position: \"absolute\",\r\n                    top: 0,\r\n                    left: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\r\n                    transformOrigin: isVal ? \"center\" : \"initial\",\r\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\r\n                    [`@keyframes ${animrotate}`]: {\r\n                        \"100%\": {\r\n                            transform: \"rotate(360deg)\"\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-thumb\": {\r\n\r\n                        strokeDasharray: circumference,\r\n                        strokeDashoffset: percent,\r\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\r\n                        fill: \"none\",\r\n                        strokeWidth: thumbSize,\r\n                        strokeLinecap: \"round\",\r\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\r\n                        [`@keyframes ${animdash}`]: {\r\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\r\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\r\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\r\n                        }\r\n                    },\r\n                    \"& circle.circle-progress-track\": {\r\n                        fill: \"none\",\r\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\r\n                        strokeWidth: trackSize ?? thumbSize,\r\n                    }\r\n                },\r\n                width: size,\r\n                height: size,\r\n                position: \"relative\"\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\r\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\r\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\r\n            </svg>\r\n            {!!children && <Tag\r\n                baseClass=\"circle-progress-content\"\r\n                sxr={{\r\n                    zIndex: 2,\r\n                    width: size - thumbSize,\r\n                    height: size - thumbSize,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    justifyContent: \"center\",\r\n                    '& *': {\r\n                        maxWidth: size - (thumbSize + 8),\r\n                        maxHeight: size - (thumbSize + 8),\r\n                    }\r\n                }}\r\n            >\r\n                {children}\r\n            </Tag>}\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default CircleProgress\r\n\r\n"],"names":[],"mappings":";;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/CircleProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\nexport type CircleProgressProps = {\n    children?: ReactElement;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    trackColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    thumbColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    thumbSize?: useBreakpointPropsType<number>;\n    trackSize?: useBreakpointPropsType<number>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    showPercentage?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\nconst CircleProgress = React.forwardRef(({ children, ...props }: CircleProgressProps, ref: React.Ref<any>) => {\n    let [{ color, trackColor, thumbColor, size, value, thumbSize, hideTrack, trackSize, showPercentage, speed }] = useInterface<any>(\"CircleProgress\", props, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (trackColor) _p.trackColor = trackColor\n    if (thumbColor) _p.thumbColor = thumbColor\n    if (size) _p.size = size\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (trackSize) _p.trackSize = trackSize\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (showPercentage) _p.showPercentage = showPercentage\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    trackColor = p.trackColor\n    thumbColor = p.thumbColor\n    size = p.size ?? \"medium\"\n    thumbSize = p.thumbSize ?? 4\n    trackSize = p.trackSize\n    value = p.value\n    hideTrack = p.hideTrack\n    showPercentage = p.showPercentage\n    speed = p.speed ?? 1.3\n\n    if (trackColor === 'default') {\n        trackColor = \"divider\"\n    }\n\n    if (thumbColor === 'default') {\n        thumbColor = \"divider.secondary\"\n    }\n\n\n    let sizes: any = {\n        small: 24,\n        medium: 32,\n        large: 44\n    }\n    if (typeof size === 'string' && sizes[size]) {\n        size = sizes[size]\n    }\n\n    let isVal = typeof value === 'number'\n    const animrotate = \"anim\" + useId().replace(\":\", \"\")\n    const animdash = \"anim\" + useId().replace(\":\", \"\")\n    if (isVal && (value as number) > 100) value = 100\n    const circumference = 125.66370614359172 //radius * 2 * Math.PI\n    const percent = circumference - ((value || 0) / 100) * circumference\n\n    if (showPercentage && !children) {\n        children = <Tag\n            sxr={{\n                color: color === 'default' ? \"text.primary\" : `${color}.primary`,\n                fontSize: size / 4\n            }}\n        >{value}%</Tag>\n    }\n\n    return (\n        <Tag\n            baseClass='circle-progress'\n            sxr={{\n                display: \"inline-flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                \"& svg[class='circle-progress-svg']\": {\n                    zIndex: 1,\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    transform: isVal ? \"rotate(-90deg)\" : \"none\",\n                    transformOrigin: isVal ? \"center\" : \"initial\",\n                    animation: isVal ? \"none\" : `${animrotate} ${speed}s linear infinite`,\n                    [`@keyframes ${animrotate}`]: {\n                        \"100%\": {\n                            transform: \"rotate(360deg)\"\n                        }\n                    },\n                    \"& circle.circle-progress-thumb\": {\n\n                        strokeDasharray: circumference,\n                        strokeDashoffset: percent,\n                        stroke: thumbColor || (color === 'default' ? `divider` : `${color}.primary`),\n                        fill: \"none\",\n                        strokeWidth: thumbSize,\n                        strokeLinecap: \"round\",\n                        animation: isVal ? \"none\" : `${animdash} ${speed}s ease-in-out infinite`,\n                        [`@keyframes ${animdash}`]: {\n                            \"0%\": { strokeDasharray: \"1, 150\", strokeDashoffset: 0 },\n                            \"50%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -35 },\n                            \"100%\": { strokeDasharray: \"90, 150\", strokeDashoffset: -124 }\n                        }\n                    },\n                    \"& circle.circle-progress-track\": {\n                        fill: \"none\",\n                        stroke: trackColor || (color === 'default' ? `text.primary` : `${color}.soft.secondary`),\n                        strokeWidth: trackSize ?? thumbSize,\n                    }\n                },\n                width: size,\n                height: size,\n                position: \"relative\"\n            }}\n            ref={ref}\n        >\n            <svg viewBox=\"0 0 50 50\" className=\"circle-progress-svg\">\n                {!hideTrack && <circle className=\"circle-progress-track\" cx=\"25\" cy=\"25\" r={20} />}\n                <circle className=\"circle-progress-thumb\" cx=\"25\" cy=\"25\" r={20} />\n            </svg>\n            {!!children && <Tag\n                baseClass=\"circle-progress-content\"\n                sxr={{\n                    zIndex: 2,\n                    width: size - thumbSize,\n                    height: size - thumbSize,\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    '& *': {\n                        maxWidth: size - (thumbSize + 8),\n                        maxHeight: size - (thumbSize + 8),\n                    }\n                }}\n            >\n                {children}\n            </Tag>}\n        </Tag >\n    )\n})\n\nexport default CircleProgress\n\n"],"names":[],"mappings":";;;;;;AAkBA;;AAAyC;AACrC;;AAEA;AAAW;AACX;AAAgB;AAChB;AAAgB;AAChB;AAAU;AACV;AAAe;AACf;AAAe;AACf;AAAW;AACX;AAAe;AACf;AAAoB;AACpB;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAIA;;;AAKA;AACI;AACA;AACA;;;AAGA;;AAGJ;AACA;AACA;AACA;;AACA;AACA;AAEA;AACI;AAEQ;;;;;AAUA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACI;AACI;AACH;AACJ;AACD;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIC;AACJ;AACD;AACI;AACA;AACA;AACH;AACJ;AACD;AACA;AACA;AACH;AAUO;;;AAGA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;AAMjB;;"}

package/ClickOutside/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\r\nimport React, { useEffect, useRef } from 'react';\r\n\r\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    onClickOutside: (e: MouseEvent) => void;\r\n    children: React.ReactElement\r\n};\r\n\r\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\r\n\r\n    const innerRef = useRef<HTMLElement | null>(null);\r\n\r\n    // merge refs\r\n    const setRefs = (el: HTMLElement) => {\r\n        innerRef.current = el;\r\n        if (typeof forwardedRef === \"function\") {\r\n            forwardedRef(el);\r\n        } else if (forwardedRef) {\r\n            forwardedRef.current = el;\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        const handler = (e: MouseEvent) => {\r\n            if (!innerRef.current) return;\r\n            if (!innerRef.current.contains(e.target as Node)) {\r\n                onClickOutside(e);\r\n            }\r\n        };\r\n\r\n        document.addEventListener(\"mousedown\", handler);\r\n        return () => document.removeEventListener(\"mousedown\", handler);\r\n    }, [onClickOutside]);\r\n\r\n    return (\r\n        <Tag\r\n            component=\"div\"\r\n            display=\"inline-block\"\r\n            {...props}\r\n            baseClass='click-outside'\r\n            ref={setRefs}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n});\r\n\r\nexport default ClickOutside;\r\n"],"names":[],"mappings":";;;;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: (e: MouseEvent) => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside(e);\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag\n            component=\"div\"\n            display=\"inline-block\"\n            {...props}\n            baseClass='click-outside'\n            ref={setRefs}\n        >\n            {children}\n        </Tag>\n    )\n});\n\nexport default ClickOutside;\n"],"names":[],"mappings":";;;;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}

package/ClickOutside/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\r\nimport React, { useEffect, useRef } from 'react';\r\n\r\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    onClickOutside: (e: MouseEvent) => void;\r\n    children: React.ReactElement\r\n};\r\n\r\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\r\n\r\n    const innerRef = useRef<HTMLElement | null>(null);\r\n\r\n    // merge refs\r\n    const setRefs = (el: HTMLElement) => {\r\n        innerRef.current = el;\r\n        if (typeof forwardedRef === \"function\") {\r\n            forwardedRef(el);\r\n        } else if (forwardedRef) {\r\n            forwardedRef.current = el;\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        const handler = (e: MouseEvent) => {\r\n            if (!innerRef.current) return;\r\n            if (!innerRef.current.contains(e.target as Node)) {\r\n                onClickOutside(e);\r\n            }\r\n        };\r\n\r\n        document.addEventListener(\"mousedown\", handler);\r\n        return () => document.removeEventListener(\"mousedown\", handler);\r\n    }, [onClickOutside]);\r\n\r\n    return (\r\n        <Tag\r\n            component=\"div\"\r\n            display=\"inline-block\"\r\n            {...props}\r\n            baseClass='click-outside'\r\n            ref={setRefs}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n});\r\n\r\nexport default ClickOutside;\r\n"],"names":[],"mappings":";;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\nimport React, { useEffect, useRef } from 'react';\n\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    onClickOutside: (e: MouseEvent) => void;\n    children: React.ReactElement\n};\n\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\n\n    const innerRef = useRef<HTMLElement | null>(null);\n\n    // merge refs\n    const setRefs = (el: HTMLElement) => {\n        innerRef.current = el;\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(el);\n        } else if (forwardedRef) {\n            forwardedRef.current = el;\n        }\n    };\n\n    useEffect(() => {\n        const handler = (e: MouseEvent) => {\n            if (!innerRef.current) return;\n            if (!innerRef.current.contains(e.target as Node)) {\n                onClickOutside(e);\n            }\n        };\n\n        document.addEventListener(\"mousedown\", handler);\n        return () => document.removeEventListener(\"mousedown\", handler);\n    }, [onClickOutside]);\n\n    return (\n        <Tag\n            component=\"div\"\n            display=\"inline-block\"\n            {...props}\n            baseClass='click-outside'\n            ref={setRefs}\n        >\n            {children}\n        </Tag>\n    )\n});\n\nexport default ClickOutside;\n"],"names":[],"mappings":";;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}

package/Collaps/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\r\n\r\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\r\n\r\n}\r\n\r\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\r\n    let [{\r\n        ease,\r\n        easing,\r\n        duration,\r\n        delay,\r\n        onStart,\r\n        onFinish,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        ...rest\r\n    }] = useInterface<any>(\"Collaps\", props, {})\r\n\r\n    open ??= false\r\n    easing ??= \"standard\"\r\n\r\n    return (\r\n        <Transition\r\n            {...{\r\n                ease,\r\n                easing,\r\n                duration,\r\n                delay,\r\n                onStart,\r\n                onFinish,\r\n                onOpen,\r\n                onOpened,\r\n                onClose,\r\n                onClosed\r\n            }}\r\n            disableInitialTransition\r\n            variant=\"collapseVertical\"\r\n            open={open}\r\n        >\r\n            <Tag\r\n                {...rest}\r\n                baseClass='collaps'\r\n                ref={ref}\r\n            >{children}</Tag>\r\n        </Transition>\r\n    )\r\n})\r\n\r\nexport default Collaps\r\n\r\n\r\n"],"names":["__rest","useInterface","_jsx","Transition","Tag"],"mappings":";;;;;;;AAOA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYCC,iBAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAAD,YAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,UAAU,CAAA;AAErB,IAAA,QACIE,cAAA,CAACC,eAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVD,cAAA,CAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":["__rest","useInterface","_jsx","Transition","Tag"],"mappings":";;;;;;;AAOA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYCC,iBAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAAD,YAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,UAAU,CAAA;AAErB,IAAA,QACIE,cAAA,CAACC,eAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVD,cAAA,CAACE,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC;;;;"}

package/Collaps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\r\n\r\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\r\n\r\n}\r\n\r\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\r\n    let [{\r\n        ease,\r\n        easing,\r\n        duration,\r\n        delay,\r\n        onStart,\r\n        onFinish,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        ...rest\r\n    }] = useInterface<any>(\"Collaps\", props, {})\r\n\r\n    open ??= false\r\n    easing ??= \"standard\"\r\n\r\n    return (\r\n        <Transition\r\n            {...{\r\n                ease,\r\n                easing,\r\n                duration,\r\n                delay,\r\n                onStart,\r\n                onFinish,\r\n                onOpen,\r\n                onOpened,\r\n                onClose,\r\n                onClosed\r\n            }}\r\n            disableInitialTransition\r\n            variant=\"collapseVertical\"\r\n            open={open}\r\n        >\r\n            <Tag\r\n                {...rest}\r\n                baseClass='collaps'\r\n                ref={ref}\r\n            >{children}</Tag>\r\n        </Transition>\r\n    )\r\n})\r\n\r\nexport default Collaps\r\n\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AAOA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYC,YAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAA,MAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,UAAU,CAAA;AAErB,IAAA,QACIA,GAAA,CAAC,UAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":["_jsx"],"mappings":";;;;;AAOA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA6C,EAAE,GAAQ,KAAI;QAA3D,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AAC5F,IAAA,IAAI,OAYC,YAAY,CAAM,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,EAZvC,EACD,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,OAEX,EADM,IAAI,GAAA,MAAA,CAAA,EAAA,EAXN,CAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,CAYJ,CAA2C;IAE5C,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,IAAJ,IAAI,GAAK,KAAK,CAAA;IACd,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,IAAN,MAAM,GAAK,UAAU,CAAA;AAErB,IAAA,QACIA,GAAA,CAAC,UAAU,EAAA,EAEH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,OAAO;AACP,QAAA,QAAQ,EAEZ,wBAAwB,EAAA,IAAA,EACxB,OAAO,EAAC,kBAAkB,EAC1B,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO,EAAA,CACR;AAErB,CAAC;;;;"}

package/Container/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Container/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\r\n}\r\n\r\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (maxWidth) _p.maxWidth = maxWidth\r\n    const p: any = useBreakpointProps(_p)\r\n    maxWidth = p.maxWidth\r\n\r\n    const { breakpoints } = useTheme()\r\n    maxWidth = maxWidth || \"lg\"\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            sxr={{\r\n                width: \"100%\",\r\n                maxWidth: {\r\n                    xs: \"100%\",\r\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\r\n                },\r\n                mx: \"auto\",\r\n                px: 2,\r\n            }}\r\n            baseClass=\"container\"\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Container\r\n\r\n\r\n"],"names":["__rest","useBreakpointProps","useTheme","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAGC,aAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Container/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\n}\n\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (maxWidth) _p.maxWidth = maxWidth\n    const p: any = useBreakpointProps(_p)\n    maxWidth = p.maxWidth\n\n    const { breakpoints } = useTheme()\n    maxWidth = maxWidth || \"lg\"\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                width: \"100%\",\n                maxWidth: {\n                    xs: \"100%\",\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\n                },\n                mx: \"auto\",\n                px: 2,\n            }}\n            baseClass=\"container\"\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Container\n\n\n"],"names":["__rest","useBreakpointProps","useTheme","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAGC,aAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}