musae 0.1.2 → 0.1.4

package/dist/button/button.d.ts

@@ -1,4 +1,4 @@
-import { Props } from "./types";
+import type { ButtonProps } from "./types";
 import React from "react";
 /**
  * @author murukal
@@ -6,5 +6,5 @@ import React from "react";
  * @description
  * button
  */
-declare const Button: ({ children, onClick }: Props) => React.JSX.Element;
+declare const Button: ({ children, className, onClick }: ButtonProps) => React.JSX.Element;
 export default Button;

package/dist/button/button.js

@@ -1,4 +1,4 @@
-import Wrapper from './wrapper.js';
+import { Wrapper } from './styled.js';
 import Span from './span.js';
 import React from 'react';
 
@@ -8,8 +8,8 @@ import React from 'react';
  * @description
  * button
  */
-const Button = ({ children, onClick }) => {
-    return (React.createElement(Wrapper, { onClick: onClick },
+const Button = ({ children, className, onClick }) => {
+    return (React.createElement(Wrapper, { onClick: onClick, className: className },
         React.createElement(Span, null, children)));
 };
 

package/dist/button/{wrapper.d.ts → styled.d.ts}

@@ -1,11 +1,5 @@
 /// <reference types="react" />
-/**
- * @author murukal
- *
- * @description
- */
-declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export 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 → styled.js}

@@ -1,11 +1,6 @@
 import styled from '@emotion/styled';
 import { useTheme } from '../theme/hooks.js';
 
-/**
- * @author murukal
- *
- * @description
- */
 const Wrapper = styled.button(() => {
     var _a;
     const theme = useTheme();
@@ -17,4 +12,4 @@ const Wrapper = styled.button(() => {
     };
 });
 
-export { Wrapper as default };
+export { Wrapper };

package/dist/button/types.d.ts

@@ -3,9 +3,10 @@ import type { MouseEventHandler, ReactNode } from "react";
  * @author murukal
  *
  * @description
- * button props
+ * button render props
  */
-export interface Props {
-    children: ReactNode;
+export interface ButtonProps {
+    className?: string;
+    children?: ReactNode;
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }

package/dist/checkbox/checkbox.d.ts

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

package/dist/checkbox/checkbox.js

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useCallback } from 'react';
-import Wrapper from './wrapper.js';
+import { Wrapper } from './styled.js';
 import { useControlledState } from '@aiszlab/relax';
 import Context from './context.js';
 

package/dist/checkbox/group.d.ts

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

package/dist/{radio/wrapper.d.ts → checkbox/styled.d.ts}

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: 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 Wrapper;

package/dist/checkbox/{wrapper.js → styled.js}

@@ -46,4 +46,4 @@ const Wrapper = styled.input(() => {
     };
 });
 
-export { Wrapper as default };
+export { Wrapper };

package/dist/checkbox/types.d.ts

@@ -13,18 +13,18 @@ export interface ContextValue {
  * @author murukal
  *
  * @description
- * group render props
+ * checkbox group props
  */
-export interface GroupRenderProps {
+export interface CheckboxGroupProps {
     children: ReactNode;
 }
 /**
  * @author murukal
  *
  * @description
- * checkbox render props
+ * checkbox props
  */
-export interface CheckboxRenderProps {
+export interface CheckboxProps {
     isChecked?: boolean;
     value?: string;
 }

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  * components
  */
 export { Avatar } from "./avatar";
-export { Menu, type Props as MenuProps } from "./menu";
+export { Menu } from "./menu";
 export { Loading } from "./loading";
 export { Input } from "./input";
 export { Select } from "./select";

package/dist/input/input.d.ts

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

package/dist/input/input.js

@@ -2,8 +2,7 @@ import React, { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';
 import { useStyles } from './hooks.js';
 import { useBoolean } from '@aiszlab/relax';
 import Label from './label.js';
-import Wrapper from './wrapper.js';
-import StyledInput from './styled-input.js';
+import { Wrapper, StyledInput } from './styled.js';
 
 /**
  * @author murukal
@@ -12,14 +11,6 @@ import StyledInput from './styled-input.js';
 const Input = forwardRef((props, ref) => {
     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,

package/dist/input/styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { WrapperProps } from "./types";
+export 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 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>, {}>;

package/dist/input/{wrapper.js → styled.js}

@@ -9,5 +9,14 @@ const Wrapper = styled.fieldset(({ isFocused }) => {
         borderWidth: 2,
     }));
 });
+const StyledInput = styled.input(() => {
+    return {
+        padding: 0,
+        backgroundColor: "transparent",
+        outline: "none",
+        border: "none",
+        height: "auto",
+    };
+});
 
-export { Wrapper as default };
+export { StyledInput, Wrapper };

package/dist/input/types.d.ts

@@ -6,7 +6,7 @@ export type Variant = "outlined" | "filled" | "standard";
 /**
  * @description component props
  */
-export interface Props {
+export interface InputProps {
     label?: string;
     placeholder?: string;
     variant?: Variant;

package/dist/loading/circle.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { CircleRenderProps } from "./types";
+import { CircleProps } from "./types";
 declare const Circle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & CircleRenderProps, import("react").SVGProps<SVGCircleElement>, {}>;
+} & CircleProps, import("react").SVGProps<SVGCircleElement>, {}>;
 export default Circle;

package/dist/loading/loading.js

@@ -1,53 +1,8 @@
 import React from 'react';
 import { keyframes } from '@emotion/react';
 import Circle from './circle.js';
-import Wrapper from './wrapper.js';
+import { Wrapper } from './styled.js';
 
-const left = keyframes `
-  from {
-    stroke-dasharray: 0 440;
-    stroke-width: 20;
-    stroke-dashoffset: 0;
-  }
-
-  8% {
-    stroke-dasharray: 40 400;
-    stroke-width: 30;
-    stroke-dashoffset: -5;
-  }
-
-  28% {
-    stroke-dasharray: 40 400;
-    stroke-width: 30;
-    stroke-dashoffset: -175;
-  }
-
-  36%,
-  58% {
-    stroke-dasharray: 0 440;
-    stroke-width: 20;
-    stroke-dashoffset: -220;
-  }
-
-  66% {
-    stroke-dasharray: 40 400;
-    stroke-width: 30;
-    stroke-dashoffset: -225;
-  }
-
-  86% {
-    stroke-dasharray: 40 400;
-    stroke-width: 30;
-    stroke-dashoffset: -395;
-  }
-
-  94%,
-  to {
-    stroke-dasharray: 0 440;
-    stroke-width: 20;
-    stroke-dashoffset: -440;
-  }
-`;
 const large = keyframes `
   from,
   4% {
@@ -140,6 +95,51 @@ const small = keyframes `
     stroke-dashoffset: -330;
   }
 `;
+const left = keyframes `
+  from {
+    stroke-dasharray: 0 440;
+    stroke-width: 20;
+    stroke-dashoffset: 0;
+  }
+
+  8% {
+    stroke-dasharray: 40 400;
+    stroke-width: 30;
+    stroke-dashoffset: -5;
+  }
+
+  28% {
+    stroke-dasharray: 40 400;
+    stroke-width: 30;
+    stroke-dashoffset: -175;
+  }
+
+  36%,
+  58% {
+    stroke-dasharray: 0 440;
+    stroke-width: 20;
+    stroke-dashoffset: -220;
+  }
+
+  66% {
+    stroke-dasharray: 40 400;
+    stroke-width: 30;
+    stroke-dashoffset: -225;
+  }
+
+  86% {
+    stroke-dasharray: 40 400;
+    stroke-width: 30;
+    stroke-dashoffset: -395;
+  }
+
+  94%,
+  to {
+    stroke-dasharray: 0 440;
+    stroke-width: 20;
+    stroke-dashoffset: -440;
+  }
+`;
 const right = keyframes `
   from,
   8% {

package/dist/loading/{wrapper.d.ts → styled.d.ts}

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

package/dist/loading/{wrapper.js → styled.js}

@@ -7,4 +7,4 @@ const Wrapper = styled.svg(() => {
     };
 });
 
-export { Wrapper as default };
+export { Wrapper };

package/dist/loading/types.d.ts

@@ -2,8 +2,8 @@
  * @author murukal
  *
  * @description
- * circle render props
+ * circle props
  */
-export interface CircleRenderProps {
+export interface CircleProps {
     animationName: string;
 }

package/dist/menu/group.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+/**
+ * @author murukal
+ *
+ * @description
+ * menu group
+ */
+declare const Group: React.ForwardRefExoticComponent<import("./types").MenuProps & import("./types").WithLevel & {
+    isCollapsed: boolean;
+} & React.RefAttributes<HTMLUListElement>>;
+export default Group;

package/dist/menu/group.js

@@ -0,0 +1,23 @@
+import { __rest } from '../node_modules/tslib/tslib.es6.js';
+import { StyledMenuGroup } from './styled.js';
+import React, { forwardRef, useMemo } from 'react';
+import Item from './item.js';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * menu group
+ */
+const Group = forwardRef(({ items, level, isCollapsed }, ref) => {
+    /// 菜单条目渲染结果
+    const children = useMemo(() => {
+        return items.map((_a) => {
+            var { key } = _a, itemProps = __rest(_a, ["key"]);
+            return React.createElement(Item, Object.assign({ key: key, level: level }, itemProps));
+        });
+    }, [items, level]);
+    return (React.createElement(StyledMenuGroup, { ref: ref, isCollapsed: isCollapsed }, children));
+});
+
+export { Group as default };

package/dist/menu/index.d.ts

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

package/dist/menu/item.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { MenuItemRenderProps } from "./types";
+declare const Item: ({ level, label, children, prefix }: MenuItemRenderProps) => React.JSX.Element;
+export default Item;

package/dist/menu/item.js

@@ -0,0 +1,33 @@
+import React, { useMemo, useCallback } from 'react';
+import { StyledMenuItemCollapser, StyledMenuItemWrapper, StyledMenuItemPrefix } from './styled.js';
+import { useBoolean } from '@aiszlab/relax';
+import Group from './group.js';
+import { useAnimate } from 'framer-motion';
+
+const Item = ({ level, label, children, prefix }) => {
+    /// has children
+    const hasChildren = useMemo(() => !!(children === null || children === void 0 ? void 0 : children.length), [children]);
+    const [scope, animate] = useAnimate();
+    /// if is collapsed
+    const { isOn: isCollapsed, toggle } = useBoolean(false);
+    /// if there are children, render trailing arrow
+    const collapser = useMemo(() => {
+        if (!hasChildren)
+            return null;
+        return React.createElement(StyledMenuItemCollapser, null, isCollapsed ? "展开" : "收起");
+    }, [hasChildren, isCollapsed]);
+    const onCollapserToggle = useCallback(() => {
+        animate(scope.current, {
+            height: isCollapsed ? "auto" : 0,
+        });
+        toggle();
+    }, [toggle, isCollapsed, animate]);
+    return (React.createElement("li", null,
+        React.createElement(StyledMenuItemWrapper, { level: level, onClick: onCollapserToggle },
+            !!prefix && React.createElement(StyledMenuItemPrefix, null, prefix),
+            label,
+            collapser),
+        hasChildren && React.createElement(Group, { ref: scope, items: children, level: level + 1, isCollapsed: isCollapsed })));
+};
+
+export { Item as default };

package/dist/menu/menu.d.ts

@@ -1,7 +1,10 @@
 import React from "react";
-import { Props } from "./index";
+import type { MenuProps } from "./types";
 /**
  * @author murukal
+ *
+ * @description
+ * menu component
  */
-declare const Menu: (props: Props) => React.JSX.Element;
+declare const Menu: (props: MenuProps) => React.JSX.Element;
 export default Menu;

package/dist/menu/menu.js

@@ -1,17 +1,14 @@
-import React, { useMemo } from 'react';
-import MenuItem from '../menu-item/menu-item.js';
+import React from 'react';
+import Group from './group.js';
 
 /**
  * @author murukal
+ *
+ * @description
+ * menu component
  */
 const Menu = (props) => {
-    /// 菜单条目渲染结果
-    const items = useMemo(() => {
-        return props.items.map((item) => {
-            return React.createElement(MenuItem, Object.assign({}, item));
-        });
-    }, [props.items]);
-    return React.createElement("ul", { className: "list-none m-0 p-0" }, items);
+    return React.createElement(Group, Object.assign({ level: 0 }, props, { isCollapsed: false }));
 };
 
 export { Menu as default };

package/dist/menu/styled.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { WithLevel } from "./types";
+/**
+ * @author murukal
+ *
+ * @description
+ * styled menu item wrapper
+ */
+export declare const StyledMenuItemWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & WithLevel, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * @author murukal
+ *
+ * @description
+ * styled menu item prefix
+ */
+export declare const StyledMenuItemPrefix: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * @author murukal
+ *
+ * @description
+ * styled menu collapser
+ */
+export declare const StyledMenuItemCollapser: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * @author murukal
+ *
+ * @description
+ * styled menu group
+ */
+export declare const StyledMenuGroup: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isCollapsed: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/dist/menu/styled.js

@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+import { useTheme } from '../theme/hooks.js';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * styled menu item wrapper
+ */
+const StyledMenuItemWrapper = styled.div(({ level }) => {
+    return {
+        display: "flex",
+        alignItems: "center",
+        minHeight: 24,
+        cursor: "pointer",
+        paddingTop: 8,
+        paddingBottom: 8,
+        paddingRight: 12,
+        paddingLeft: 12 + level * 24,
+        borderRadius: 8,
+        transition: "background-color 300ms",
+        ":hover": {
+            backgroundColor: "#f5f7fa",
+        },
+    };
+});
+/**
+ * @author murukal
+ *
+ * @description
+ * styled menu item prefix
+ */
+const StyledMenuItemPrefix = styled.span(() => {
+    return {
+        marginRight: "0.5rem",
+    };
+});
+/**
+ * @author murukal
+ *
+ * @description
+ * styled menu collapser
+ */
+const StyledMenuItemCollapser = styled.span(() => {
+    var _a, _b;
+    const theme = useTheme();
+    return Object.assign({ marginLeft: "auto" }, (_b = (_a = theme.typography) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.small);
+});
+/**
+ * @author murukal
+ *
+ * @description
+ * styled menu group
+ */
+const StyledMenuGroup = styled.ul(({ isCollapsed }) => {
+    return {
+        margin: 0,
+        listStyleType: "none",
+        padding: 0,
+        width: 240,
+        overflow: "hidden",
+    };
+});
+
+export { StyledMenuGroup, StyledMenuItemCollapser, StyledMenuItemPrefix, StyledMenuItemWrapper };

package/dist/menu/types.d.ts

@@ -0,0 +1,41 @@
+import type { Key, ReactNode } from "react";
+export interface WithLevel {
+    level: number;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * menu props
+ */
+export interface MenuProps {
+    items: MenuItemProps[];
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * menu item props
+ */
+export interface MenuItemProps {
+    key: Key;
+    label?: string;
+    prefix?: ReactNode;
+    children?: MenuItemProps[];
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * menu group render props
+ */
+export type MenuGroupRenderProps = MenuProps & WithLevel & {
+    isCollapsed: boolean;
+};
+/**
+ * @author murukal
+ *
+ * @description
+ * menu item render props
+ */
+export type MenuItemRenderProps = Omit<MenuItemProps, "key"> & WithLevel;

package/dist/message/holder.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useState, useImperativeHandle, useCallback } from 'react';
-import { HolderWrapper } from './wrappers.js';
+import { HolderWrapper } from './styled.js';
 import Message from './message.js';
 
 const Holder = forwardRef((props, ref) => {

package/dist/message/message.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { Props } from "./types";
-declare const Message: ({ duration, type, onHidden, id }: Props) => React.JSX.Element;
+import type { MessageProps } from "./types";
+declare const Message: ({ duration, type, onHidden, id }: MessageProps) => React.JSX.Element;
 export default Message;

package/dist/message/message.js

@@ -1,4 +1,4 @@
-import { MessageWrapper } from './wrappers.js';
+import { MessageWrapper } from './styled.js';
 import React from 'react';
 import { useTimeout } from '@aiszlab/relax';
 

package/dist/message/types.d.ts

@@ -11,9 +11,9 @@ export interface Messager {
  * @author murukal
  *
  * @description
- * props for message
+ * message props
  */
-export interface Props {
+export interface MessageProps {
     id: string;
     type: "error" | "success" | "warning";
     duration: number;
@@ -26,5 +26,5 @@ export interface Props {
  * message ref
  */
 export interface MessageRef {
-    add: (props: Props) => void;
+    add: (props: MessageProps) => void;
 }

package/dist/node_modules/tslib/tslib.es6.js

@@ -0,0 +1,14 @@
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __rest };

package/dist/popper/popper.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { Props } from "./types";
-declare const Popper: ({ children, isVisible, trigger }: Props) => React.ReactPortal | null;
+import { type PopperProps } from "./types";
+declare const Popper: ({ children, isVisible, trigger }: PopperProps) => React.ReactPortal | null;
 export default Popper;

package/dist/popper/popper.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { createPopper } from '@popperjs/core';
-import Wrapper from './wrapper.js';
+import { Wrapper } from './styled.js';
 
 const Popper = ({ children, isVisible, trigger }) => {
     const ref = useRef(null);

package/dist/popper/{wrapper.d.ts → styled.d.ts}

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { WrapperProps } from "./types";
-declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export 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 → styled.js}

@@ -6,4 +6,4 @@ const Wrapper = styled.div(({ isVisible }) => {
     };
 });
 
-export { Wrapper as default };
+export { Wrapper };

package/dist/popper/types.d.ts

@@ -1,16 +1,20 @@
 import type { ReactNode } from "react";
 /**
  * @author murukal
- * @description popper props
+ *
+ * @description
+ * popper props
  */
-export interface Props {
+export interface PopperProps {
     children: ReactNode;
     isVisible: boolean;
     trigger?: Element | null;
 }
 /**
  * @author murukal
- * @description wrapper props
+ *
+ * @description
+ * wrapper props
  */
 export interface WrapperProps {
     isVisible: boolean;

package/dist/radio/group.d.ts

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

package/dist/radio/radio.d.ts

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

package/dist/radio/radio.js

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useCallback } from 'react';
-import Wrapper from './wrapper.js';
+import { Wrapper } from './styled.js';
 import Context from './context.js';
 
 const Radio = ({ value }) => {

package/dist/{checkbox/wrapper.d.ts → radio/styled.d.ts}

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: 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 Wrapper;

package/dist/radio/{wrapper.js → styled.js}

@@ -31,4 +31,4 @@ const Wrapper = styled.input(() => {
     };
 });
 
-export { Wrapper as default };
+export { Wrapper };

package/dist/radio/types.d.ts

@@ -13,9 +13,9 @@ export interface ContextValue {
  * @author murukal
  *
  * @description
- * group render props
+ * radio group props
  */
-export interface GroupRenderProps {
+export interface RadioGroupProps {
     children: ReactNode;
     value?: string;
 }
@@ -23,8 +23,8 @@ export interface GroupRenderProps {
  * @author murukal
  *
  * @description
- * radio render props
+ * radio props
  */
-export interface RadioRenderProps {
+export interface RadioProps {
     value: string;
 }

package/dist/select/hooks.d.ts

@@ -1,8 +1,9 @@
-import type { Props } from "./types";
+import { MenuItemProps } from "../menu/types";
+import type { SelectProps } from "./types";
 /**
  * @author murukal
  *
  * @description
  * options => menu items
  */
-export declare const useMenuItems: <Value extends string | number>([options]: [options: import("./types").Option<Value>[]]) => never[];
+export declare const useMenuItems: <Value extends string | number>([options]: [options: import("./types").Option<Value>[]]) => MenuItemProps[];

package/dist/select/hooks.js

@@ -0,0 +1,11 @@
+/**
+ * @author murukal
+ *
+ * @description
+ * options => menu items
+ */
+const useMenuItems = ([options]) => {
+    return [];
+};
+
+export { useMenuItems };

package/dist/select/select.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { Props } from "./types";
-declare const Select: <Value extends string | number>(props: Props<Value>) => React.JSX.Element;
+import { type SelectProps } from "./types";
+declare const Select: <Value extends string | number>(props: SelectProps<Value>) => React.JSX.Element;
 export default Select;

package/dist/select/select.js

@@ -2,20 +2,18 @@ import React, { useRef } from 'react';
 import Popper from '../popper/popper.js';
 import { useBoolean } from '@aiszlab/relax';
 import Input from '../input/input.js';
+import Menu from '../menu/menu.js';
+import { useMenuItems } from './hooks.js';
 
 const Select = (props) => {
     var _a;
     const ref = useRef(null);
     const { isOn: isVisible, turnOn: open, turnOff: close } = useBoolean();
+    const menuItems = useMenuItems([props.options]);
     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")))));
+            React.createElement(Menu, { items: menuItems }))));
 };
 
 export { Select as default };

package/dist/select/types.d.ts

@@ -8,6 +8,6 @@ export interface Option<T extends string | number> {
  * @description
  * select props
  */
-export interface Props<Value extends string | number> {
+export interface SelectProps<Value extends string | number> {
     options: Option<Value>[];
 }

package/dist/switch/{wrapper.d.ts → styled.d.ts}

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: 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 default Wrapper;

package/dist/switch/{wrapper.js → styled.js}

@@ -34,4 +34,4 @@ const Wrapper = styled.div(() => {
     };
 });
 
-export { Wrapper as default };
+export { Wrapper };

package/dist/switch/switch.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import Wrapper from './wrapper.js';
+import { Wrapper } from './styled.js';
 import { useControlledState } from '@aiszlab/relax';
 
 const Switch = ({ value }) => {

package/dist/theme/hooks.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from "./types";
+import type { Theme } from "./types";
 /**
  * @author murukal
  *

package/dist/theme/hooks.js

@@ -1,6 +1,83 @@
 import { useMemo } from 'react';
 import { useTheme as useTheme$1 } from '@emotion/react';
 
+const palettes = {
+    primary: {
+        "0": "#000",
+        "10": "#21005D",
+        "20": "#381E72",
+        "30": "#4F378B",
+        "40": "#6750A4",
+        "50": "#7F67BE",
+        "60": "#9A82DB",
+        "70": "#B69DF8",
+        "80": "#D0BCFF",
+        "90": "#EADDFF",
+        "95": "#F6EDFF",
+        "99": "#FFFBFE",
+        "100": "#FFF",
+    },
+    secondary: {
+        "0": "#000",
+        "10": "#1D192B",
+        "20": "#332D41",
+        "30": "#4F378B",
+        "40": "#625B71",
+        "50": "#7A7289",
+        "60": "#958DA5",
+        "70": "#B0A7C0",
+        "80": "#CCC2DC",
+        "90": "#E8DEF8",
+        "95": "#F6EDFF",
+        "99": "#FFFBFE",
+        "100": "#FFF",
+    },
+    tertiary: {
+        "0": "#000",
+        "10": "#31111D",
+        "20": "#492532",
+        "30": "#633B48",
+        "40": "#7D5260",
+        "50": "#986977",
+        "60": "#B58392",
+        "70": "#D29DAC",
+        "80": "#EFB8C8",
+        "90": "#FFD8E4",
+        "95": "#FFECF1",
+        "99": "#FFFBFA",
+        "100": "#FFF",
+    },
+    error: {
+        "0": "#000",
+        "10": "#410E0B",
+        "20": "#601410",
+        "30": "#8C1D18",
+        "40": "#B3261E",
+        "50": "#DC362E",
+        "60": "#E46962",
+        "70": "#EC928E",
+        "80": "#F2B8B5",
+        "90": "#F9DEDC",
+        "95": "#FCEEEE",
+        "99": "#FFFBF9",
+        "100": "#FFF",
+    },
+    neutral: {
+        "0": "#000",
+        "10": "#1D1B20",
+        "20": "#48464C",
+        "30": "#48464C",
+        "40": "#605D64",
+        "50": "#79767D",
+        "60": "#938F96",
+        "70": "#AEA9B1",
+        "80": "#CAC5CD",
+        "90": "#E6E0E9",
+        "95": "#F5EFF7",
+        "99": "#FFFBFE",
+        "100": "#FFF",
+    },
+};
 /**
  * @author murukal
  *
@@ -10,7 +87,10 @@ import { useTheme as useTheme$1 } from '@emotion/react';
  */
 const presets = {
     colors: {
-        primary: "#6750a4",
+        primary: palettes.primary[40],
+        secondary: palettes.secondary[40],
+        tertiary: palettes.tertiary[40],
+        error: palettes.error[40],
     },
     typography: {
         body: {
@@ -53,6 +133,7 @@ const presets = {
             boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)",
         },
     ],
+    palettes,
 };
 /**
  * @author murukal

package/dist/theme/types.d.ts

@@ -9,7 +9,7 @@ type Elevation = Pick<CSSProperties, "boxShadow">;
  */
 export interface Theme {
     colors?: {
-        primary?: string;
+        [key in ColorProperty]?: string;
     };
     typography?: {
         body?: {
@@ -22,6 +22,7 @@ export interface Theme {
         };
     };
     elevations?: [Elevation, Elevation, Elevation, Elevation, Elevation, Elevation];
+    palettes?: Palettes;
 }
 /**
  * @author murukal
@@ -33,4 +34,23 @@ export interface Props {
     children: ReactNode;
     theme: Theme;
 }
+type ColorReference = {
+    [key in 0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 99 | 100]: string;
+};
+declare enum ColorProperty {
+    Primary = "primary",
+    Secondary = "secondary",
+    Tertiary = "tertiary",
+    Error = "error",
+    Neutral = "neutral"
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * palettes
+ */
+export type Palettes = {
+    [key in ColorProperty]: ColorReference;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -10,7 +10,8 @@
     "dev": "rollup -c -w",
     "build": "rollup -c",
     "clean:build": "rm -rf dist && rm -rf typings",
-    "pub": "npm run clean:build && npm run build && npm publish"
+    "pub": "npm run clean:build && npm run build && npm publish",
+    "relink": "yarn unlink && yarn link"
   },
   "dependencies": {
     "@aiszlab/relax": "^1.0.14",
@@ -18,7 +19,8 @@
     "@emotion/styled": "^11.11.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.2.1",
-    "deepmerge": "^4.3.1"
+    "deepmerge": "^4.3.1",
+    "framer-motion": "^10.16.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

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

@@ -1,6 +0,0 @@
-/// <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

@@ -1,13 +0,0 @@
-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

@@ -1,7 +0,0 @@
-/// <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/menu-item/index.d.ts

@@ -1,2 +0,0 @@
-import MenuItem from "./menu-item";
-export { MenuItem };

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

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

package/dist/menu-item/menu-item.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-const MenuItem = (props) => {
-    return React.createElement("li", { className: clsx([props.className]) }, props.children);
-};
-
-export { MenuItem as default };

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

@@ -1,11 +0,0 @@
-import type { ReactNode } from "react";
-/**
- * @author murukal
- *
- * @description
- * menu item props
- */
-export interface Props {
-    children: ReactNode;
-    className?: string;
-}