@xanui/ui 1.2.6 → 1.2.8

package/Input/index.js

@@ -34,7 +34,7 @@ const Input = React.forwardRef((_a, ref) => {
     startIcon = p.startIcon;
     endIcon = p.endIcon;
     iconPlacement = p.iconPlacement;
-    color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
+    color = (_b = p.color) !== null && _b !== void 0 ? _b : "primary";
     variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
     helperText = p.helperText;
     size = (_d = p.size) !== null && _d !== void 0 ? _d : 'medium';
@@ -90,8 +90,8 @@ const Input = React.forwardRef((_a, ref) => {
         }
     };
     const _size = sizes[size];
-    let borderColor = _focus ? color : (variant === "fill" ? "transparent" : "divider");
-    borderColor = error ? "danger.primary" : borderColor;
+    let borderColor = _focus ? color : (variant === "fill" ? "transparent" : `${color}.divider`);
+    borderColor = error ? "danger.divider" : borderColor;
     let multiprops = {};
     if (multiline) {
         multiprops = {
@@ -108,9 +108,9 @@ const Input = React.forwardRef((_a, ref) => {
         }, children: [!!label && jsx(Label, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
                     width: "100%",
                     overflow: "hidden",
-                }, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
-                                "-webkit-text-fill-color": "text.primary",
-                                "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
+                }, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.ghost" : variant === "fill" ? "surface.light" : "transparent", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
+                                "-webkit-text-fill-color": "surface.contrast",
+                                "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.surface.light : theme.colors.surface.main} inset`,
                                 transition: "background-color 5000s ease-in-out 0s"
                             }, "& textarea": {
                                 resize: "none"
@@ -120,7 +120,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 alignItems: 'center',
                                 justifyContent: "center",
                                 display: "flex",
-                                color: error ? "danger.primary" : "text.secondary",
+                                color: error ? "danger.main" : "surface.muted",
                                 flex: "0 0 auto",
                             },
                         })), (!!endIcon && {
@@ -129,14 +129,14 @@ const Input = React.forwardRef((_a, ref) => {
                                 alignItems: 'center',
                                 justifyContent: "center",
                                 display: 'flex',
-                                color: error ? "danger.primary" : "text.secondary",
+                                color: error ? "danger.main" : "surface.muted",
                                 flex: "0 0 auto",
                             },
                         })), disabled: disabled || false, children: [startIcon, jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
                                     border: 0,
                                     outline: 0,
                                     bgcolor: "transparent",
-                                    color: error ? "danger.primary" : "text.primary",
+                                    color: error ? "danger.main" : "surface.contrast",
                                     fontSize: _size.fontSize,
                                     height: multiline ? "auto" : _size.height + "px!important",
                                     width: "100%",
@@ -148,7 +148,7 @@ const Input = React.forwardRef((_a, ref) => {
                                     focused !== null && focused !== void 0 ? focused : setFocused(false);
                                     onBlur && onBlur(e);
                                 }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })), endIcon] })), helperText && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
-                            color: error ? "danger.primary" : "text.primary",
+                            color: error ? "danger.main" : "surface.contrast",
                             fontSize: "small",
                             lineHeight: "text",
                             fontWeight: 'text',

package/Input/index.js.map

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

package/InputNumber/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { InputProps } from '../Input/index.js';
 
 type InputNumberProps = Omit<InputProps, "value"> & {
     value?: number | "";
 };
-declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputNumber: React__default.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
 export { InputNumber as default };
 export type { InputNumberProps };

package/Label/index.cjs

@@ -14,7 +14,7 @@ const Label = React.forwardRef((_a, ref) => {
             verticalAlign: "middle",
             fontSize: "text",
             gap: .4,
-            color: "text.primary",
+            color: "surface.contrast",
             userSelect: "none",
             cursor: "pointer",
             fontWeight: "500",

package/Label/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"text.primary\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"surface.contrast\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}

package/Label/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps } from '@xanui/core';
 
 type LabelProps<T extends TagComponentType = "label"> = TagProps<T>;
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Label: React__default.ForwardRefExoticComponent<Omit<LabelProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Label as default };
 export type { LabelProps };

package/Label/index.js

@@ -12,7 +12,7 @@ const Label = React.forwardRef((_a, ref) => {
             verticalAlign: "middle",
             fontSize: "text",
             gap: .4,
-            color: "text.primary",
+            color: "surface.contrast",
             userSelect: "none",
             cursor: "pointer",
             fontWeight: "500",

package/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"text.primary\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"surface.contrast\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}

package/Layer/index.cjs

@@ -11,7 +11,7 @@ var index$1 = require('../ClickOutside/index.cjs');
 const Layer = (_a) => {
     var _b, _c, _d;
     var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
-    let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = core.useInterface("Layer", props, {});
+    let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onEnter, onEntered, onExit, onExited, slotProps }] = core.useInterface("Layer", props, {});
     const _p = {};
     if (blur)
         _p.blur = blur;
@@ -20,33 +20,32 @@ const Layer = (_a) => {
     const p = core.useBreakpointProps(_p);
     blur = p.blur;
     blurMode = p.blurMode;
-    const [closed, setClosed] = React.useState(!open);
+    const [exited, setExited] = React.useState(!open);
     placement = placement || "bottom-left";
     const blurCss = blur ? index(blur, blurMode) : {};
     React.useEffect(() => {
-        if (closed && open) {
-            setClosed(false);
+        if (exited && open) {
+            setExited(false);
         }
     }, [open]);
-    if (closed)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    // if (exited) return <></>
     let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
     let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
-    let content = jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
-            setClosed(true);
-            onClosed && onClosed();
+    let content = jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: () => {
+            setExited(true);
+            onExited && onExited();
         }, children: children }));
-    return (jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
+    return (jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, exitOnUnmount: true, initialTransition: false, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
 };
 Layer.open = (Children, props) => {
     const InstanceLayer = (_a) => {
         var { children } = _a, props = tslib.__rest(_a, ["children"]);
         return jsxRuntime.jsx(Layer, Object.assign({}, props, { children: children }));
     };
-    const l = core.Renderar.render(InstanceLayer, Object.assign(Object.assign({}, props), { open: true, children: typeof Children === "function" ? jsxRuntime.jsx(Children, { open: () => l.updateProps({ open: true }), close: () => l.updateProps({ open: false }) }) : Children, onClosed: () => {
+    const l = core.Renderar.render(InstanceLayer, Object.assign(Object.assign({}, props), { open: true, children: typeof Children === "function" ? jsxRuntime.jsx(Children, { open: () => l.updateProps({ open: true }), close: () => l.updateProps({ open: false }) }) : Children, onExited: () => {
             core.Renderar.unrender(InstanceLayer);
-            if (props === null || props === void 0 ? void 0 : props.onClosed) {
-                props.onClosed();
+            if (props === null || props === void 0 ? void 0 : props.onExited) {
+                props.onExited();
             }
         } }));
     return {

package/Layer/index.cjs.map

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

package/Layer/index.d.ts

@@ -11,13 +11,13 @@ type LayerProps = {
     blur?: useBreakpointPropsType<number>;
     blurMode?: useBreakpointPropsType<"blur" | "transparent">;
     onClickOutside?: () => void;
-    onOpen?: Function;
-    onOpened?: Function;
-    onClose?: Function;
-    onClosed?: Function;
+    onEnter?: TransitionProps["onEnter"];
+    onEntered?: TransitionProps['onEntered'];
+    onExit?: TransitionProps['onExit'];
+    onExited?: TransitionProps['onExited'];
     slotProps?: {
         root?: Omit<TagProps<"div">, "children">;
-        transition?: Omit<TransitionProps, "children" | "open" | "variant" | "onClose" | "onClosed" | "onOpen" | "onOpened">;
+        transition?: Omit<TransitionProps, "children" | "open" | "variant" | "onExit" | "onExited" | "onEnter" | "onEntered">;
         content?: Omit<TagProps<"div">, "children">;
         clickOutside?: Omit<ClickOutsideProps, "children" | "onClickOutside">;
     };

package/Layer/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { __rest } from 'tslib';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { useInterface, useBreakpointProps, Transition, Tag, Renderar } from '@xanui/core';
 import useBlurCss from '../useBlurCss/index.js';
@@ -9,7 +9,7 @@ import ClickOutside from '../ClickOutside/index.js';
 const Layer = (_a) => {
     var _b, _c, _d;
     var { children, open } = _a, props = __rest(_a, ["children", "open"]);
-    let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = useInterface("Layer", props, {});
+    let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onEnter, onEntered, onExit, onExited, slotProps }] = useInterface("Layer", props, {});
     const _p = {};
     if (blur)
         _p.blur = blur;
@@ -18,33 +18,32 @@ const Layer = (_a) => {
     const p = useBreakpointProps(_p);
     blur = p.blur;
     blurMode = p.blurMode;
-    const [closed, setClosed] = useState(!open);
+    const [exited, setExited] = useState(!open);
     placement = placement || "bottom-left";
     const blurCss = blur ? useBlurCss(blur, blurMode) : {};
     useEffect(() => {
-        if (closed && open) {
-            setClosed(false);
+        if (exited && open) {
+            setExited(false);
         }
     }, [open]);
-    if (closed)
-        return jsx(Fragment, {});
+    // if (exited) return <></>
     let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
     let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
-    let content = jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
-            setClosed(true);
-            onClosed && onClosed();
+    let content = jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: () => {
+            setExited(true);
+            onExited && onExited();
         }, children: children }));
-    return (jsx(Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
+    return (jsx(Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, exitOnUnmount: true, initialTransition: false, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
 };
 Layer.open = (Children, props) => {
     const InstanceLayer = (_a) => {
         var { children } = _a, props = __rest(_a, ["children"]);
         return jsx(Layer, Object.assign({}, props, { children: children }));
     };
-    const l = Renderar.render(InstanceLayer, Object.assign(Object.assign({}, props), { open: true, children: typeof Children === "function" ? jsx(Children, { open: () => l.updateProps({ open: true }), close: () => l.updateProps({ open: false }) }) : Children, onClosed: () => {
+    const l = Renderar.render(InstanceLayer, Object.assign(Object.assign({}, props), { open: true, children: typeof Children === "function" ? jsx(Children, { open: () => l.updateProps({ open: true }), close: () => l.updateProps({ open: false }) }) : Children, onExited: () => {
             Renderar.unrender(InstanceLayer);
-            if (props === null || props === void 0 ? void 0 : props.onClosed) {
-                props.onClosed();
+            if (props === null || props === void 0 ? void 0 : props.onExited) {
+                props.onExited();
             }
         } }));
     return {

package/Layer/index.js.map

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

package/LineProgress/index.cjs

@@ -7,7 +7,7 @@ var React = require('react');
 var core = require('@xanui/core');
 
 const LineProgress = React.forwardRef((_a, ref) => {
-    var _b, _c;
+    var _b, _c, _d;
     var { children } = _a, props = tslib.__rest(_a, ["children"]);
     const uid = "line-progress" + React.useId().replace(":", "");
     let [{ color, value, thumbSize, hideTrack, speed }] = core.useInterface("LineProgress", props, {});
@@ -24,10 +24,10 @@ const LineProgress = React.forwardRef((_a, ref) => {
         _p.speed = speed;
     const p = core.useBreakpointProps(_p);
     thumbSize = (_b = p.thumbSize) !== null && _b !== void 0 ? _b : 4;
-    color = (_c = p.color) !== null && _c !== void 0 ? _c : "brand";
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : "primary";
     value = p.value;
     hideTrack = p.hideTrack;
-    speed = p.speed;
+    speed = (_d = p.speed) !== null && _d !== void 0 ? _d : 1;
     let isVal = typeof value === 'number';
     if (isVal && value > 100)
         value = 100;
@@ -38,15 +38,15 @@ const LineProgress = React.forwardRef((_a, ref) => {
             height: thumbSize,
             position: "relative",
             overflow: "hidden",
-            bgcolor: hideTrack ? "transparent" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),
+            bgcolor: hideTrack ? "transparent" : `surface.divider`,
             radius: 2,
         }, ref: ref, children: jsxRuntime.jsx(core.Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
-                bgcolor: color === 'default' ? `divider` : `${color}`,
+                bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,
                 width: isVal ? `${value}%` : "50%",
                 height: thumbSize,
                 position: "absolute",
                 left: 0,
-                animation: isVal ? "none" : `${uid} ${speed !== null && speed !== void 0 ? speed : 1}s linear infinite`,
+                animation: isVal ? "none" : `${uid} ${speed}s linear infinite`,
                 [`@keyframes ${uid}`]: {
                     "0%": { left: "-40%" },
                     "50%": { left: "20%", width: "80%" },

package/LineProgress/index.cjs.map

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

package/LineProgress/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
 type LineProgressProps = {
@@ -9,7 +9,7 @@ type LineProgressProps = {
     hideTrack?: useBreakpointPropsType<boolean>;
     speed?: useBreakpointPropsType<number>;
 };
-declare const LineProgress: React.ForwardRefExoticComponent<LineProgressProps & React.RefAttributes<any>>;
+declare const LineProgress: React__default.ForwardRefExoticComponent<LineProgressProps & React__default.RefAttributes<any>>;
 
 export { LineProgress as default };
 export type { LineProgressProps };

package/LineProgress/index.js

@@ -5,7 +5,7 @@ import React, { useId } from 'react';
 import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
 
 const LineProgress = React.forwardRef((_a, ref) => {
-    var _b, _c;
+    var _b, _c, _d;
     var { children } = _a, props = __rest(_a, ["children"]);
     const uid = "line-progress" + useId().replace(":", "");
     let [{ color, value, thumbSize, hideTrack, speed }] = useInterface("LineProgress", props, {});
@@ -22,10 +22,10 @@ const LineProgress = React.forwardRef((_a, ref) => {
         _p.speed = speed;
     const p = useBreakpointProps(_p);
     thumbSize = (_b = p.thumbSize) !== null && _b !== void 0 ? _b : 4;
-    color = (_c = p.color) !== null && _c !== void 0 ? _c : "brand";
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : "primary";
     value = p.value;
     hideTrack = p.hideTrack;
-    speed = p.speed;
+    speed = (_d = p.speed) !== null && _d !== void 0 ? _d : 1;
     let isVal = typeof value === 'number';
     if (isVal && value > 100)
         value = 100;
@@ -36,15 +36,15 @@ const LineProgress = React.forwardRef((_a, ref) => {
             height: thumbSize,
             position: "relative",
             overflow: "hidden",
-            bgcolor: hideTrack ? "transparent" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),
+            bgcolor: hideTrack ? "transparent" : `surface.divider`,
             radius: 2,
         }, ref: ref, children: jsx(Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
-                bgcolor: color === 'default' ? `divider` : `${color}`,
+                bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,
                 width: isVal ? `${value}%` : "50%",
                 height: thumbSize,
                 position: "absolute",
                 left: 0,
-                animation: isVal ? "none" : `${uid} ${speed !== null && speed !== void 0 ? speed : 1}s linear infinite`,
+                animation: isVal ? "none" : `${uid} ${speed}s linear infinite`,
                 [`@keyframes ${uid}`]: {
                     "0%": { left: "-40%" },
                     "50%": { left: "20%", width: "80%" },

package/LineProgress/index.js.map

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

package/Link/index.cjs

@@ -0,0 +1,41 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Link = React.forwardRef((_a, ref) => {
+    var { children, component, href, target, rel, underline = "hover", external, isActive, isDisabled } = _a, props = tslib.__rest(_a, ["children", "component", "href", "target", "rel", "underline", "external", "isActive", "isDisabled"]);
+    const Component = component || "a";
+    const isExternal = React.useMemo(() => {
+        if (external !== undefined)
+            return external;
+        if (!href)
+            return false;
+        return /^https?:\/\//.test(href);
+    }, [external, href]);
+    const computedRel = React.useMemo(() => {
+        if (isExternal && target === "_blank") {
+            return rel || "noopener noreferrer";
+        }
+        return rel;
+    }, [isExternal, target, rel]);
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { ref: ref, component: Component, href: href, target: isExternal ? "_blank" : target, rel: computedRel, "aria-disabled": isDisabled || undefined, baseClass: "link", "data-active": isActive || undefined, "data-disabled": isDisabled || undefined, sxr: {
+            textDecoration: underline === "always" ? "underline" : "none",
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            opacity: isDisabled ? 0.6 : 1,
+            "&:hover": {
+                textDecoration: underline === "hover" ? "underline" : undefined,
+            },
+            "&:focus-visible": {
+                outline: "2px solid var(--color-primary)",
+                outlineOffset: "2px",
+            },
+        }, children: children })));
+});
+Link.displayName = "Link";
+
+module.exports = Link;
+//# sourceMappingURL=index.cjs.map

package/Link/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Link/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from \"react\";\nimport { Tag, TagProps, TagComponentType } from \"@xanui/core\";\n\nexport type LinkProps<T extends TagComponentType = \"a\"> = Omit<TagProps<T>, \"component\"> & {\n    component?: TagComponentType;\n\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n\n    underline?: \"none\" | \"hover\" | \"always\";\n    external?: boolean;\n\n    isActive?: boolean;\n    isDisabled?: boolean;\n};\n\nconst Link = React.forwardRef(<T extends TagComponentType = \"a\">({ children, component, href, target, rel, underline = \"hover\", external, isActive, isDisabled, ...props }: LinkProps<T>, ref: React.Ref<any>) => {\n    const Component = component || \"a\";\n\n    const isExternal = useMemo(() => {\n        if (external !== undefined) return external;\n        if (!href) return false;\n        return /^https?:\\/\\//.test(href);\n    }, [external, href]);\n\n    const computedRel = useMemo(() => {\n        if (isExternal && target === \"_blank\") {\n            return rel || \"noopener noreferrer\";\n        }\n        return rel;\n    }, [isExternal, target, rel]);\n\n    return (\n        <Tag\n            {...props}\n            ref={ref}\n            component={Component}\n            href={href}\n            target={isExternal ? \"_blank\" : target}\n            rel={computedRel}\n            aria-disabled={isDisabled || undefined}\n            baseClass=\"link\"\n            data-active={isActive || undefined}\n            data-disabled={isDisabled || undefined}\n            sxr={{\n                textDecoration: underline === \"always\" ? \"underline\" : \"none\",\n                cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n                opacity: isDisabled ? 0.6 : 1,\n                \"&:hover\": {\n                    textDecoration:\n                        underline === \"hover\" ? \"underline\" : undefined,\n                },\n                \"&:focus-visible\": {\n                    outline: \"2px solid var(--color-primary)\",\n                    outlineOffset: \"2px\",\n                },\n            }}\n        >\n            {children}\n        </Tag>\n    );\n}\n);\n\nLink.displayName = \"Link\";\n\nexport default Link;"],"names":[],"mappings":";;;;;;;;AAkBA;;AACI;AAEA;;AACgC;AAC5B;AAAW;AACX;AACJ;AAEA;AACI;;;AAGA;;;;;;AAmBQ;;AAGC;AACD;AACI;AACA;AACH;;AAMjB;AAGA;;"}