musae 0.0.16-0 → 0.1.0

package/dist/button/button.d.ts

@@ -0,0 +1,10 @@
+import { Props } from "./types";
+import { FC } from "react";
+/**
+ * @author murukal
+ *
+ * @description
+ * button
+ */
+declare const Button: FC<Props>;
+export default Button;

package/dist/button/button.js

@@ -0,0 +1,16 @@
+import Wrapper from './wrapper.js';
+import Span from './span.js';
+import React from 'react';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * button
+ */
+const Button = ({ children, onClick }) => {
+    return (React.createElement(Wrapper, { onClick: onClick },
+        React.createElement(Span, null, children)));
+};
+
+export { Button as default };

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from "./button";
+export { Button };

package/dist/button/span.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * @author murukal
+ *
+ * @description
+ * content
+ */
+declare const Span: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export default Span;

package/dist/button/span.js

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+import { useTheme } from '../theme/hooks.js';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * content
+ */
+const Span = styled.span(() => {
+    var _a, _b;
+    const theme = useTheme();
+    return Object.assign({ marginLeft: 8, marginRight: 8, color: "#fff" }, (_b = (_a = theme.typography) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.large);
+});
+
+export { Span as default };

package/dist/button/wrapper.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/**
+ * @author murukal
+ *
+ * @description
+ */
+declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export default Wrapper;

package/dist/button/wrapper.js

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { useTheme } from '../theme/hooks.js';
+
+/**
+ * @author murukal
+ *
+ * @description
+ */
+const Wrapper = styled.button(() => {
+    var _a;
+    const theme = useTheme();
+    return {
+        borderRadius: 999,
+        padding: "10px 16px",
+        backgroundColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+        border: "none",
+    };
+});
+
+export { Wrapper as default };

package/dist/index.d.ts

@@ -1,4 +1,15 @@
+/**
+ * @description
+ * components
+ */
 export { Avatar, AvatarFallback, AvatarImage } from "./avatar";
 export { Menu, type Props as MenuProps } from "./menu";
 export { Loading } from "./loading";
 export { Input } from "./input";
+export { Select } from "./select";
+export { Button } from "./button";
+/**
+ * @description
+ * hooks
+ */
+export { useMessage } from "./message";

package/dist/index.js

@@ -1,6 +1,9 @@
 export { default as Avatar } from './avatar/Avatar.js';
 export { default as AvatarImage } from './avatar/AvatarImage.js';
 export { default as AvatarFallback } from './avatar/AvatarFallback.js';
-export { default as Menu } from './menu/Menu.js';
+export { default as Menu } from './menu/menu.js';
 export { default as Loading } from './loading/Loading.js';
 export { default as Input } from './input/input.js';
+export { default as Select } from './select/select.js';
+export { default as Button } from './button/button.js';
+export { useMessage } from './message/hooks.js';

package/dist/input/hooks.d.ts

@@ -2,7 +2,6 @@ import type { Variant } from "./types";
 /**
  * @description class name for input
  */
-export declare const useStyles: ([variant, isFocused, hasWrapper]: [variant: Variant, isFocused: boolean, hasWrapper: boolean]) => {
-    input: string;
-    wrapper: string;
+export declare const useStyles: ([variant, isFocused]: [variant: Variant, isFocused: boolean]) => {
+    wrapperClassName: string;
 };

package/dist/input/hooks.js

@@ -4,24 +4,15 @@ import clsx from 'clsx';
 /**
  * @description class name for input
  */
-const useStyles = ([variant, isFocused, hasWrapper]) => {
-    /// input
-    const input = useMemo(() => {
-        return clsx({
-            ["musae-input"]: true,
-            ["musae-input-focused"]: !hasWrapper && isFocused,
-        });
-    }, [isFocused, hasWrapper]);
+const useStyles = ([variant, isFocused]) => {
     /// wrapper
-    const wrapper = useMemo(() => {
+    const wrapperClassName = useMemo(() => {
         return clsx({
             ["musae-input-wrapper"]: true,
-            ["musae-input-wrapper-focused"]: isFocused,
         });
-    }, [isFocused]);
+    }, []);
     return {
-        input,
-        wrapper,
+        wrapperClassName,
     };
 };
 

package/dist/input/input.d.ts

@@ -1,9 +1,8 @@
 import React from "react";
-import "../../styles/input.css";
-import type { Props } from "./types";
+import type { InputRef, Props } from "./types";
 /**
  * @author murukal
  * @description input component
  */
-declare const Input: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<Props & React.RefAttributes<InputRef>>;
 export default Input;

package/dist/input/input.js

@@ -1,37 +1,59 @@
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';
 import { useStyles } from './hooks.js';
-import '../../styles/input.css';
 import { useBoolean } from '@aiszlab/relax';
+import Label from './label.js';
+import Wrapper from './wrapper.js';
+import StyledInput from './styled-input.js';
 
 /**
  * @author murukal
  * @description input component
  */
 const Input = forwardRef((props, ref) => {
-    // should input be wrapped
-    const hasWrapper = useMemo(() => {
-        return !!props.label || !!props.prefix || !!props.suffix;
-    }, [props.label, props.prefix, props.suffix]);
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    // const { isOn: isNotEmpty, turnOn, turnOff } = useBoolean();
+    // useEffect(() => {
+    //   if (!!inputRef.current?.value) {
+    //     turnOn();
+    //   } else {
+    //     turnOff();
+    //   }
+    // }, [!!inputRef.current?.value]);
+    useImperativeHandle(ref, () => ({
+        input: inputRef.current,
+        wrapper: wrapperRef.current,
+    }));
+    /// is focused
     const { isOn: isFocused, turnOn: focus, turnOff: blur } = useBoolean();
+    /// variant
     const variant = useMemo(() => props.variant || "outlined", [props.variant]);
-    const { input: inputClassName, wrapper: wrapperClassName } = useStyles([variant, isFocused, hasWrapper]);
+    /// style
+    const { wrapperClassName } = useStyles([variant, isFocused]);
+    /// used input props
     const inputProps = useMemo(() => {
         return {
-            onFocus: focus,
-            onBlur: blur,
+            onFocus: (event) => {
+                var _a;
+                focus();
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            },
+            onBlur: (event) => {
+                var _a;
+                blur();
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            },
             type: props.type || "text",
-            ref: ref,
-            className: inputClassName,
+            ref: inputRef,
+            className: "musae-input",
         };
-    }, [focus, blur, props.type, ref]);
-    // for some props, this component must wrapped by div
-    if (hasWrapper) {
-        return (React.createElement("div", { className: wrapperClassName, "aria-label": props.label },
-            !!props.prefix && React.createElement("span", { className: "musae-input-prefix" }, props.prefix),
-            React.createElement("input", Object.assign({}, inputProps)),
-            !!props.suffix && React.createElement("span", { className: "musae-input-suffix" }, props.suffix)));
-    }
-    return React.createElement("input", Object.assign({}, inputProps));
+    }, [focus, blur, props.type, props.onFocus, props.onBlur]);
+    /// render
+    return (React.createElement(Wrapper, { ref: wrapperRef, className: wrapperClassName, isFocused: isFocused },
+        props.prefix,
+        !!props.label && (React.createElement(Label, { isFocused: isFocused, className: "musae-input-label" }, props.label)),
+        React.createElement(StyledInput, Object.assign({}, inputProps)),
+        props.suffix));
 });
 
 export { Input as default };

package/dist/input/label.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { LabelProps } from "./types";
+declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & LabelProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {}>;
+export default Label;

package/dist/input/label.js

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import { useTheme } from '../theme/hooks.js';
+
+const Label = styled.legend(({ isFocused }) => {
+    var _a, _b, _c;
+    const theme = useTheme();
+    return Object.assign(Object.assign(Object.assign({}, (_b = (_a = theme.typography) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.small), { 
+        // layout
+        paddingInlineStart: 4, paddingInlineEnd: 4 }), (isFocused && {
+        color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
+    }));
+});
+
+export { Label as default };

package/dist/input/styled-input.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const StyledInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export default StyledInput;

package/dist/input/styled-input.js

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const StyledInput = styled.input(() => {
+    return {
+        padding: 0,
+        backgroundColor: "transparent",
+        outline: "none",
+        border: "none",
+        height: "auto",
+    };
+});
+
+export { StyledInput as default };

package/dist/input/wrapper.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { WrapperProps } from "./types";
+declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & WrapperProps, import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {}>;
+export default Wrapper;

package/dist/input/wrapper.js

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { useTheme } from '../theme/hooks.js';
+
+const Wrapper = styled.fieldset(({ isFocused }) => {
+    var _a;
+    const theme = useTheme();
+    return Object.assign({ textAlign: "start", height: 56, margin: 0, paddingTop: 0, paddingBottom: 0, display: "flex", alignItems: "center", borderColor: "#79747e", borderWidth: 1, borderStyle: "solid", borderRadius: 4, boxSizing: "border-box" }, (isFocused && {
+        borderColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+        borderWidth: 2,
+    }));
+});
+
+export { Wrapper as default };

package/dist/menu/index.d.ts

@@ -1,5 +1,5 @@
-import { Props as MenuItemProps } from "../menu-item/index";
-import Menu from "./Menu";
+import { Props as MenuItemProps } from "../menu-item/types";
+import Menu from "./menu";
 export interface Props {
     items: MenuItemProps[];
 }

package/dist/menu/{Menu.js → menu.js}

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import MenuItem from '../menu-item/MenuItem.js';
+import MenuItem from '../menu-item/menu-item.js';
 
 /**
  * @author murukal

package/dist/menu-item/index.d.ts

@@ -1,6 +1,2 @@
-import { ReactNode } from "react";
-export interface Props {
-    children: ReactNode;
-    divder?: boolean;
-    className?: string;
-}
+import MenuItem from "./menu-item";
+export { MenuItem };

package/dist/menu-item/{MenuItem.d.ts → menu-item.d.ts}

@@ -1,4 +1,4 @@
 import React from "react";
-import { Props } from ".";
+import { Props } from "./types";
 declare const MenuItem: (props: Props) => React.JSX.Element;
 export default MenuItem;

package/dist/message/holder.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MessageRef } from "./types";
+declare const Holder: React.ForwardRefExoticComponent<React.RefAttributes<MessageRef>>;
+export default Holder;

package/dist/message/holder.js

@@ -0,0 +1,20 @@
+import React, { forwardRef, useState, useImperativeHandle, useCallback } from 'react';
+import { HolderWrapper } from './wrappers.js';
+import Message from './message.js';
+
+const Holder = forwardRef((props, ref) => {
+    const [messages, setMessages] = useState([]);
+    useImperativeHandle(ref, () => ({
+        add: (props) => {
+            setMessages([...messages, props]);
+        },
+    }));
+    /// remove message
+    const hidden = useCallback((id) => setMessages((messages) => messages.filter((message) => message.id !== id)), []);
+    if (messages.length === 0) {
+        return null;
+    }
+    return (React.createElement(HolderWrapper, null, messages.map((item) => (React.createElement(Message, Object.assign({ onHidden: hidden, key: item.id }, item))))));
+});
+
+export { Holder as default };

package/dist/message/hooks.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * @author murukal
+ * @description hook for message
+ */
+export declare const useMessage: () => (React.ReactPortal | {
+    error: () => void | undefined;
+})[];

package/dist/message/hooks.js

@@ -0,0 +1,30 @@
+import React, { useRef, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import Holder from './holder.js';
+
+/**
+ * @author murukal
+ * @description hook for message
+ */
+const useMessage = () => {
+    const ref = useRef(null);
+    const [holder] = useState(() => {
+        return createPortal(React.createElement(Holder, { ref: ref }), document.body);
+    });
+    const error = useCallback(() => {
+        var _a;
+        return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.add({
+            id: crypto.randomUUID(),
+            type: "error",
+            duration: 3000,
+        });
+    }, []);
+    return [
+        {
+            error,
+        },
+        holder,
+    ];
+};
+
+export { useMessage };

package/dist/message/index.d.ts

@@ -0,0 +1 @@
+export { useMessage } from "./hooks";

package/dist/message/message.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from "react";
+import type { Props } from "./types";
+declare const Message: FC<Props>;
+export default Message;

package/dist/message/message.js

@@ -0,0 +1,14 @@
+import { MessageWrapper } from './wrappers.js';
+import React from 'react';
+import { useTimeout } from '@aiszlab/relax';
+
+const Message = ({ duration, type, onHidden, id }) => {
+    useTimeout(() => {
+        onHidden === null || onHidden === void 0 ? void 0 : onHidden(id);
+    }, {
+        duration,
+    });
+    return React.createElement(MessageWrapper, null, type);
+};
+
+export { Message as default };

package/dist/message/wrappers.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * @author murukal
+ *
+ * @description
+ * wrapper of holder
+ */
+declare const HolderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * @author murukal
+ *
+ * @description
+ * wrapper of message
+ */
+declare const MessageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export { HolderWrapper, MessageWrapper };

package/dist/message/wrappers.js

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import { useTheme } from '../theme/hooks.js';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * wrapper of holder
+ */
+const HolderWrapper = styled.div(() => {
+    return {
+        position: "fixed",
+        top: "8px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: "100vw",
+        pointerEvents: "none",
+    };
+});
+/**
+ * @author murukal
+ *
+ * @description
+ * wrapper of message
+ */
+const MessageWrapper = styled.div(() => {
+    var _a;
+    const theme = useTheme();
+    return Object.assign({ marginTop: 8, marginBottom: 8, padding: "8px 12px", borderRadius: 6, backgroundColor: "#ffffff" }, (_a = theme.elevations) === null || _a === void 0 ? void 0 : _a[1]);
+});
+
+export { HolderWrapper, MessageWrapper };

package/dist/popper/index.d.ts

@@ -0,0 +1,2 @@
+import Popper from "./popper";
+export { Popper };

package/dist/popper/popper.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { Props } from "./types";
+declare const Popper: FC<Props>;
+export default Popper;

package/dist/popper/popper.js

@@ -0,0 +1,29 @@
+import React, { useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { createPopper } from '@popperjs/core';
+import Wrapper from './wrapper.js';
+
+const Popper = ({ children, isVisible, trigger }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!isVisible)
+            return void 0;
+        if (!trigger)
+            return void 0;
+        if (!ref.current)
+            return void 0;
+        const popper = createPopper(trigger, ref.current, {
+            placement: "bottom",
+        });
+        return () => {
+            popper.destroy();
+        };
+    }, [isVisible, trigger]);
+    /// destory after hide
+    if (!isVisible) {
+        return null;
+    }
+    return createPortal(React.createElement(Wrapper, { ref: ref, isVisible: isVisible }, children), document.body);
+};
+
+export { Popper as default };

package/dist/popper/wrapper.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { WrapperProps } from "./types";
+declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Wrapper;

package/dist/popper/wrapper.js

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const Wrapper = styled.div(({ isVisible }) => {
+    return {
+        display: !isVisible ? "none" : void 0,
+    };
+});
+
+export { Wrapper as default };

package/dist/select/index.d.ts

@@ -0,0 +1,2 @@
+import Select from "./select";
+export { Select };

package/dist/select/select.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Select: () => React.JSX.Element;
+export default Select;

package/dist/select/select.js

@@ -0,0 +1,21 @@
+import React, { useRef } from 'react';
+import Popper from '../popper/popper.js';
+import { useBoolean } from '@aiszlab/relax';
+import Input from '../input/input.js';
+
+const Select = () => {
+    var _a;
+    const ref = useRef(null);
+    const { isOn: isVisible, turnOn: open, turnOff: close } = useBoolean();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, { ref: ref, type: "text", onFocus: open, onBlur: close }),
+        React.createElement(Popper, { trigger: (_a = ref.current) === null || _a === void 0 ? void 0 : _a.wrapper, isVisible: isVisible },
+            React.createElement("ul", { onMouseDown: (e) => {
+                    e.preventDefault();
+                } },
+                React.createElement("li", null, "12321"),
+                React.createElement("li", null, "222"),
+                React.createElement("li", null, "2333")))));
+};
+
+export { Select as default };

package/dist/theme/hooks.d.ts

@@ -0,0 +1,19 @@
+import { Theme } from "./types";
+/**
+ * @author murukal
+ *
+ * @description
+ * we set some presets theme
+ * let ui components display well
+ */
+export declare const presets: Theme;
+/**
+ * @author murukal
+ *
+ * @description
+ * hook wrapper for emotion theme hook
+ * because emotion theme has the default value
+ * but the default value can not be changed
+ * set the preset theme for musae ui component
+ */
+export declare const useTheme: () => Theme;

package/dist/theme/hooks.js

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { useTheme as useTheme$1 } from '@emotion/react';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * we set some presets theme
+ * let ui components display well
+ */
+const presets = {
+    colors: {
+        primary: "#6750a4",
+    },
+    typography: {
+        body: {
+            small: {
+                fontSize: 12,
+                fontWeight: 400,
+                lineHeight: "16px",
+            },
+            large: {
+                fontSize: 16,
+                fontWeight: 400,
+                lineHeight: "24px",
+            },
+        },
+        label: {
+            large: {
+                fontSize: 14,
+                fontWeight: 500,
+                lineHeight: "20px",
+            },
+        },
+    },
+    elevations: [
+        {
+            boxShadow: "none",
+        },
+        {
+            boxShadow: "0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)",
+        },
+        {
+            boxShadow: "0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)",
+        },
+        {
+            boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)",
+        },
+        {
+            boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)",
+        },
+        {
+            boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)",
+        },
+    ],
+};
+/**
+ * @author murukal
+ *
+ * @description
+ * hook wrapper for emotion theme hook
+ * because emotion theme has the default value
+ * but the default value can not be changed
+ * set the preset theme for musae ui component
+ */
+const useTheme = () => {
+    // emotion theme
+    const theme = useTheme$1();
+    // if theme is empty
+    const isThemeEmpty = useMemo(() => Object.keys(theme).length === 0, [theme]);
+    // when is empty, we always think there are not any theme. use presets!!!
+    return useMemo(() => (isThemeEmpty ? presets : theme), [theme, isThemeEmpty]);
+};
+
+export { presets, useTheme };

package/dist/theme/theme-provider.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import type { Props } from "./types";
+/**
+ * @author murukal
+ *
+ * @description
+ * theme provider
+ * if user provider theme, we will merge it with presets theme
+ */
+declare const ThemeProvider: FC<Props>;
+export default ThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.0.16-0",
+  "version": "0.1.0",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -10,11 +10,15 @@
     "dev": "rollup -c -w",
     "build": "rollup -c",
     "clean:build": "rm -rf dist && rm -rf typings",
-    "prepatch": "npm run clean:build && npm run build && npm version prepatch && npm publish"
+    "pub": "npm run clean:build && npm run build && npm publish"
   },
   "dependencies": {
-    "@aiszlab/relax": "^1.0.9-0",
-    "clsx": "^1.2.1"
+    "@aiszlab/relax": "^1.0.11",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@popperjs/core": "^2.11.8",
+    "clsx": "^1.2.1",
+    "deepmerge": "^4.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/styles/input.css

@@ -1,67 +0,0 @@
-.musae-input,
-.musae-input-wrapper {
-  /* border */
-  border-radius: 4px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #79747e;
-
-  /* layout */
-  box-sizing: border-box;
-  height: 56px;
-}
-
-.musae-input {
-  padding: 4px 0 4px 16px;
-}
-
-.musae-input-wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.musae-input-wrapper > .musae-input {
-  outline: none;
-  border: 0;
-  height: auto;
-}
-
-.musae-input-wrapper::before {
-  content: attr(aria-label);
-  position: absolute;
-  padding: 0 4px 0 4px;
-  background-color: #fff;
-  line-height: 16px;
-  font-size: 14px;
-  color: #49454f;
-  transform: translateX(8px) translateY(-28px);
-}
-
-/* prefix */
-
-.musae-input-prefix,
-.musae-input-suffix {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-
-.musae-input-prefix + .musae-input {
-  padding-left: 0;
-}
-
-/* style change after focused */
-
-.musae-input-focused,
-.musae-input-wrapper-focused {
-  border-color: #6750a4;
-  border-width: 2px;
-}
-
-.musae-input-wrapper-focused::before {
-  color: #6750a4;
-}