musae 0.1.0 → 0.1.2

package/dist/avatar/{Avatar.js → avatar.js}

@@ -1,18 +1,17 @@
 import { useImageLoader } from '@aiszlab/relax';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
-import AvatarImage from './AvatarImage.js';
+import Image from './image.js';
 
 const Avatar = (props) => {
     const status = useImageLoader({
         src: props.src,
     });
-    console.log("status=====", status);
     const child = useMemo(() => {
         // if (status === "none") {
         //   return props.alt;
         // }
-        return React.createElement(AvatarImage, { src: props.src });
+        return React.createElement(Image, { src: props.src });
     }, [props.alt, status, props.src]);
     return React.createElement("div", { className: clsx("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full") }, child);
 };

package/dist/avatar/fallback.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Fallback: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export default Fallback;

package/dist/avatar/image.d.ts

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

package/dist/avatar/image.js

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const Image = styled.img(() => {
+    return {
+        width: "100%",
+        height: "100%",
+    };
+});
+
+export { Image as default };

package/dist/avatar/index.d.ts

@@ -1,4 +1,2 @@
-import Avatar from "./Avatar";
-import AvatarImage from "./AvatarImage";
-import AvatarFallback from "./AvatarFallback";
-export { Avatar, AvatarFallback, AvatarImage };
+import Avatar from "./avatar";
+export { Avatar };

package/dist/button/button.d.ts

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

package/dist/button/types.d.ts

@@ -0,0 +1,11 @@
+import type { MouseEventHandler, ReactNode } from "react";
+/**
+ * @author murukal
+ *
+ * @description
+ * button props
+ */
+export interface Props {
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}

package/dist/checkbox/checkbox.d.ts

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

package/dist/checkbox/checkbox.js

@@ -0,0 +1,25 @@
+import React, { useContext, useMemo, useCallback } from 'react';
+import Wrapper from './wrapper.js';
+import { useControlledState } from '@aiszlab/relax';
+import Context from './context.js';
+
+const Checkbox = (props) => {
+    const contextValue = useContext(Context);
+    const controlledIsChecked = useMemo(() => {
+        if (props.isChecked !== void 0) {
+            return props.isChecked;
+        }
+        if ((contextValue === null || contextValue === void 0 ? void 0 : contextValue.value) === void 0) {
+            return void 0;
+        }
+        return contextValue.value === props.value;
+    }, [props.isChecked, props.value, contextValue === null || contextValue === void 0 ? void 0 : contextValue.value]);
+    const [isChecked, setIsChecked] = useControlledState(controlledIsChecked);
+    /// change handler
+    const change = useCallback((event) => {
+        setIsChecked(event.target.checked);
+    }, [setIsChecked]);
+    return React.createElement(Wrapper, { type: "checkbox", checked: !!isChecked, "aria-checked": !!isChecked, onChange: change });
+};
+
+export { Checkbox as default };

package/dist/checkbox/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ContextValue } from "./types";
+declare const Context: import("react").Context<ContextValue | null>;
+export default Context;

package/dist/checkbox/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const Context = createContext(null);
+
+export { Context as default };

package/dist/checkbox/group.d.ts

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

package/dist/checkbox/index.d.ts

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

package/dist/checkbox/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+/**
+ * @author murukal
+ *
+ * @description
+ * context value
+ */
+export interface ContextValue {
+    value?: string;
+    onChange: (value: string) => void;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * group render props
+ */
+export interface GroupRenderProps {
+    children: ReactNode;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * checkbox render props
+ */
+export interface CheckboxRenderProps {
+    isChecked?: boolean;
+    value?: string;
+}

package/dist/checkbox/wrapper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+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

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+import { useTheme } from '../theme/hooks.js';
+
+const Wrapper = styled.input(() => {
+    var _a, _b;
+    const theme = useTheme();
+    return {
+        margin: 0,
+        visibility: "hidden",
+        width: "1rem",
+        height: "1rem",
+        "::before": {
+            content: "''",
+            visibility: "visible",
+            display: "block",
+            boxSizing: "border-box",
+            width: "1rem",
+            height: "1rem",
+            borderRadius: "0.2rem",
+            borderWidth: "0.1rem",
+            borderStyle: "solid",
+            borderColor: "gray",
+            transition: "all 200ms",
+        },
+        "&[aria-checked=true]": {
+            "::before": {
+                backgroundColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+                borderColor: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary,
+            },
+            "::after": {
+                content: "''",
+                visibility: "visible",
+                boxSizing: "border-box",
+                position: "absolute",
+                display: "block",
+                width: "0.2rem",
+                height: "0.5rem",
+                borderWidth: "0.1rem",
+                borderStyle: "solid",
+                borderColor: "white",
+                borderTop: 0,
+                borderLeft: 0,
+                transform: "translate(200%, -150%) rotate(45deg)",
+            },
+        },
+    };
+});
+
+export { Wrapper as default };

package/dist/index.d.ts

@@ -2,12 +2,15 @@
  * @description
  * components
  */
-export { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+export { Avatar } 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";
+export { Switch } from "./switch";
+export { Radio, RadioGroup } from "./radio";
+export { Checkbox } from "./checkbox";
 /**
  * @description
  * hooks

package/dist/index.js

@@ -1,9 +1,11 @@
-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 Avatar } from './avatar/avatar.js';
 export { default as Menu } from './menu/menu.js';
-export { default as Loading } from './loading/Loading.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 { default as Switch } from './switch/switch.js';
+export { default as Radio } from './radio/radio.js';
+export { default as RadioGroup } from './radio/group.js';
+export { default as Checkbox } from './checkbox/checkbox.js';
 export { useMessage } from './message/hooks.js';

package/dist/input/hooks.d.ts

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

package/dist/input/hooks.js

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

package/dist/input/input.js

@@ -29,7 +29,7 @@ const Input = forwardRef((props, ref) => {
     /// variant
     const variant = useMemo(() => props.variant || "outlined", [props.variant]);
     /// style
-    const { wrapperClassName } = useStyles([variant, isFocused]);
+    const { wrapperClassName } = useStyles([variant, isFocused, props.className]);
     /// used input props
     const inputProps = useMemo(() => {
         return {

package/dist/input/types.d.ts

@@ -0,0 +1,44 @@
+import type { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from "react";
+/**
+ * @description Variant
+ */
+export type Variant = "outlined" | "filled" | "standard";
+/**
+ * @description component props
+ */
+export interface Props {
+    label?: string;
+    placeholder?: string;
+    variant?: Variant;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    type: "password" | "text";
+    value?: string;
+    className?: string;
+    onChange?: VoidFunction;
+    onFocus?: UsedInputProps["onFocus"];
+    onBlur?: UsedInputProps["onBlur"];
+}
+/**
+ * @description label props
+ */
+export interface LabelProps {
+    isFocused: boolean;
+}
+/**
+ * @description used input props
+ */
+export type UsedInputProps = Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "onFocus" | "onBlur" | "type" | "ref" | "className">;
+/**
+ * @description input ref
+ */
+export interface InputRef {
+    input: HTMLInputElement | null;
+    wrapper: HTMLFieldSetElement | null;
+}
+/**
+ * @description wrapper props
+ */
+export interface WrapperProps {
+    isFocused: boolean;
+}

package/dist/loading/circle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CircleRenderProps } 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>, {}>;
+export default Circle;

package/dist/loading/circle.js

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+const Circle = styled.circle((props) => {
+    return {
+        animationName: props.animationName,
+        animationDuration: "2s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+        fill: "none",
+        strokeLinecap: "round",
+    };
+});
+
+export { Circle as default };

package/dist/loading/index.d.ts

@@ -1,2 +1,2 @@
-import Loading from "./Loading";
+import Loading from "./loading";
 export { Loading };

package/dist/loading/{Loading.d.ts → loading.d.ts}

@@ -1,4 +1,3 @@
 import React from "react";
-import "../../styles/loading.css";
 declare const Loading: () => React.JSX.Element;
 export default Loading;

package/{styles/loading.css → dist/loading/loading.js}

@@ -1,33 +1,54 @@
-.musae-loading {
-  width: 6em;
-  height: 6em;
-}
-
-.musae-loading .runner {
-  animation: loadingCircleA 2s linear infinite;
-}
-
-.musae-loading .circle-a {
-  stroke: #f42f25;
-}
-
-.musae-loading .circle-b {
-  animation-name: loadingCircleB;
-  stroke: #f49725;
-}
-
-.musae-loading .circle-c {
-  animation-name: loadingCircleC;
-  stroke: #255ff4;
-}
-
-.musae-loading .circle-d {
-  animation-name: loadingCircleD;
-  stroke: #f42582;
-}
-
-/* Animations */
-@keyframes loadingCircleA {
+import React from 'react';
+import { keyframes } from '@emotion/react';
+import Circle from './circle.js';
+import Wrapper from './wrapper.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% {
     stroke-dasharray: 0 660;
@@ -72,9 +93,8 @@
     stroke-width: 20;
     stroke-dashoffset: -990;
   }
-}
-
-@keyframes loadingCircleB {
+`;
+const small = keyframes `
   from,
   12% {
     stroke-dasharray: 0 220;
@@ -119,55 +139,8 @@
     stroke-width: 20;
     stroke-dashoffset: -330;
   }
-}
-
-@keyframes loadingCircleC {
-  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;
-  }
-}
-
-@keyframes loadingCircleD {
+`;
+const right = keyframes `
   from,
   8% {
     stroke-dasharray: 0 440;
@@ -212,4 +185,13 @@
     stroke-width: 20;
     stroke-dashoffset: -440;
   }
-}
+`;
+const Loading = () => {
+    return (React.createElement(Wrapper, { width: "240", height: "240", viewBox: "0 0 240 240" },
+        React.createElement(Circle, { animationName: large, cx: "120", cy: "120", r: "105", stroke: "#f42f25" }),
+        React.createElement(Circle, { animationName: small, cx: "120", cy: "120", r: "35", stroke: "#f49725" }),
+        React.createElement(Circle, { animationName: left, cx: "85", cy: "120", r: "70", stroke: "#255ff4" }),
+        React.createElement(Circle, { animationName: right, cx: "155", cy: "120", r: "70", stroke: "#f42582" })));
+};
+
+export { Loading as default };

package/dist/loading/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author murukal
+ *
+ * @description
+ * circle render props
+ */
+export interface CircleRenderProps {
+    animationName: string;
+}

package/dist/loading/wrapper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+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

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const Wrapper = styled.svg(() => {
+    return {
+        width: "6rem",
+        height: "6rem",
+    };
+});
+
+export { Wrapper as default };

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

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

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

@@ -2,13 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 
 const MenuItem = (props) => {
-    return (React.createElement("li", { className: clsx([
-            "flex justify-start items-center",
-            "h-12 py-6 box-border",
-            "whitespace-nowrap",
-            "hover:bg-cyan-500",
-            props.className,
-        ]) }, props.children));
+    return React.createElement("li", { className: clsx([props.className]) }, props.children);
 };
 
 export { MenuItem as default };

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

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

package/dist/message/message.d.ts

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

package/dist/message/types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @author murukal
+ *
+ * @description
+ * messager
+ */
+export interface Messager {
+    error: UnderlyingSinkCloseCallback;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * props for message
+ */
+export interface Props {
+    id: string;
+    type: "error" | "success" | "warning";
+    duration: number;
+    onHidden?: (key: string) => void;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * message ref
+ */
+export interface MessageRef {
+    add: (props: Props) => void;
+}

package/dist/popper/popper.d.ts

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

package/dist/popper/types.d.ts

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

package/dist/radio/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ContextValue } from "./types";
+declare const Context: import("react").Context<ContextValue | null>;
+export default Context;

package/dist/radio/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const Context = createContext(null);
+
+export { Context as default };

package/dist/radio/group.d.ts

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

package/dist/radio/group.js

@@ -0,0 +1,20 @@
+import React, { useCallback, useMemo } from 'react';
+import Context from './context.js';
+import { useControlledState } from '@aiszlab/relax';
+
+const Group = (props) => {
+    /// controlled value
+    const [selectedValue, setSelectedValue] = useControlledState(props.value);
+    /// value change handler
+    const change = useCallback((value) => {
+        setSelectedValue(value);
+    }, [setSelectedValue]);
+    /// context value
+    const contextValue = useMemo(() => ({
+        value: selectedValue,
+        onChange: change,
+    }), [selectedValue, change]);
+    return React.createElement(Context.Provider, { value: contextValue }, props.children);
+};
+
+export { Group as default };

package/dist/radio/index.d.ts

@@ -0,0 +1,3 @@
+import Radio from "./radio";
+import RadioGroup from "./group";
+export { Radio, RadioGroup };

package/dist/radio/radio.d.ts

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

package/dist/radio/radio.js

@@ -0,0 +1,17 @@
+import React, { useContext, useMemo, useCallback } from 'react';
+import Wrapper from './wrapper.js';
+import Context from './context.js';
+
+const Radio = ({ value }) => {
+    const contextValue = useContext(Context);
+    const isChecked = useMemo(() => (contextValue === null || contextValue === void 0 ? void 0 : contextValue.value) === value, [value, contextValue === null || contextValue === void 0 ? void 0 : contextValue.value]);
+    /// change handler for radio
+    const change = useCallback(() => {
+        if (isChecked)
+            return;
+        contextValue === null || contextValue === void 0 ? void 0 : contextValue.onChange(value);
+    }, [contextValue === null || contextValue === void 0 ? void 0 : contextValue.onChange, value, isChecked]);
+    return React.createElement(Wrapper, { type: "radio", "aria-checked": isChecked, checked: isChecked, onChange: change });
+};
+
+export { Radio as default };

package/dist/radio/types.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+/**
+ * @author murukal
+ *
+ * @description
+ * context value
+ */
+export interface ContextValue {
+    value?: string;
+    onChange: (value: string) => void;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * group render props
+ */
+export interface GroupRenderProps {
+    children: ReactNode;
+    value?: string;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * radio render props
+ */
+export interface RadioRenderProps {
+    value: string;
+}

package/dist/radio/wrapper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+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

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { useTheme } from '../theme/hooks.js';
+
+const Wrapper = styled.input(() => {
+    var _a;
+    const theme = useTheme();
+    return {
+        visibility: "hidden",
+        margin: 0,
+        height: "1rem",
+        width: "1rem",
+        "::after": {
+            content: "''",
+            visibility: "visible",
+            display: "block",
+            height: "1rem",
+            width: "1rem",
+            boxSizing: "border-box",
+            borderWidth: "0.1rem",
+            borderStyle: "solid",
+            borderColor: "gray",
+            borderRadius: 999,
+            transition: "all 200ms",
+        },
+        "&[aria-checked=true]": {
+            "::after": {
+                borderWidth: "0.3rem",
+                borderColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+            },
+        },
+    };
+});
+
+export { Wrapper as default };

package/dist/select/hooks.d.ts

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

package/dist/select/select.d.ts

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

package/dist/select/select.js

@@ -3,7 +3,7 @@ import Popper from '../popper/popper.js';
 import { useBoolean } from '@aiszlab/relax';
 import Input from '../input/input.js';
 
-const Select = () => {
+const Select = (props) => {
     var _a;
     const ref = useRef(null);
     const { isOn: isVisible, turnOn: open, turnOff: close } = useBoolean();

package/dist/select/types.d.ts

@@ -0,0 +1,13 @@
+export interface Option<T extends string | number> {
+    value: T;
+    label?: string;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * select props
+ */
+export interface Props<Value extends string | number> {
+    options: Option<Value>[];
+}

package/dist/switch/index.d.ts

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

package/dist/switch/switch.d.ts

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

package/dist/switch/switch.js

@@ -0,0 +1,13 @@
+import React, { useCallback } from 'react';
+import Wrapper from './wrapper.js';
+import { useControlledState } from '@aiszlab/relax';
+
+const Switch = ({ value }) => {
+    const [isSelected, setIsSelected] = useControlledState(value);
+    const toggle = useCallback(() => {
+        setIsSelected((isSelected) => !isSelected);
+    }, [setIsSelected]);
+    return React.createElement(Wrapper, { "aria-selected": isSelected, onClick: toggle });
+};
+
+export { Switch as default };

package/dist/switch/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author murukal
+ *
+ * @description
+ * switch props
+ */
+export interface Props {
+    value?: boolean;
+    onChange?: (value: boolean) => void | PromiseLike<void>;
+}

package/dist/switch/wrapper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+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

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import { useTheme } from '../theme/hooks.js';
+
+const Wrapper = styled.div(() => {
+    var _a, _b;
+    const theme = useTheme();
+    return {
+        width: "1.8rem",
+        height: "1rem",
+        borderRadius: "1rem",
+        borderWidth: 2,
+        borderStyle: "solid",
+        borderColor: "gray",
+        backgroundColor: "transparent",
+        transition: "all .2s",
+        "::before": {
+            content: "''",
+            display: "block",
+            margin: "0.1rem",
+            height: "0.8rem",
+            width: "0.8rem",
+            borderRadius: 999,
+            backgroundColor: "black",
+            transition: "all .2s",
+        },
+        "&[aria-selected=true]": {
+            borderColor: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+            backgroundColor: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary,
+            "::before": {
+                translate: "100%",
+                backgroundColor: "white",
+            },
+        },
+    };
+});
+
+export { Wrapper as default };

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React from "react";
 import type { Props } from "./types";
 /**
  * @author murukal
@@ -7,5 +7,5 @@ import type { Props } from "./types";
  * theme provider
  * if user provider theme, we will merge it with presets theme
  */
-declare const ThemeProvider: FC<Props>;
+declare const ThemeProvider: (props: Props) => React.JSX.Element;
 export default ThemeProvider;

package/dist/theme/types.d.ts

@@ -0,0 +1,36 @@
+import { CSSProperties, ReactNode } from "react";
+type Typography = Pick<CSSProperties, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing">;
+type Elevation = Pick<CSSProperties, "boxShadow">;
+/**
+ * @author murukal
+ *
+ * @description
+ * declaration for theme
+ */
+export interface Theme {
+    colors?: {
+        primary?: string;
+    };
+    typography?: {
+        body?: {
+            small?: Typography;
+            large?: Typography;
+        };
+        label?: {
+            small?: Typography;
+            large?: Typography;
+        };
+    };
+    elevations?: [Elevation, Elevation, Elevation, Elevation, Elevation, Elevation];
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * theme provider
+ */
+export interface Props {
+    children: ReactNode;
+    theme: Theme;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "pub": "npm run clean:build && npm run build && npm publish"
   },
   "dependencies": {
-    "@aiszlab/relax": "^1.0.11",
+    "@aiszlab/relax": "^1.0.14",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@popperjs/core": "^2.11.8",

package/dist/avatar/AvatarFallback.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const AvatarFallback: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
-export default AvatarFallback;

package/dist/avatar/AvatarFallback.js

@@ -1,7 +0,0 @@
-import React, { forwardRef } from 'react';
-
-const AvatarFallback = forwardRef(() => {
-    return React.createElement("div", null);
-});
-
-export { AvatarFallback as default };

package/dist/avatar/AvatarImage.d.ts

@@ -1,3 +0,0 @@
-import React, { DetailedHTMLProps } from "react";
-declare const AvatarImage: ({ className, ...props }: DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>) => React.JSX.Element;
-export default AvatarImage;

package/dist/avatar/AvatarImage.js

@@ -1,10 +0,0 @@
-import { __rest } from '../node_modules/tslib/tslib.es6.js';
-import clsx from 'clsx';
-import React from 'react';
-
-const AvatarImage = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement("img", Object.assign({ className: clsx("w-full h-full text-center object-cover text-transparent indent-96", className) }, props)));
-};
-
-export { AvatarImage as default };

package/dist/loading/Loading.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import '../../styles/loading.css';
-import clsx from 'clsx';
-
-const Loading = () => {
-    return (React.createElement("svg", { className: "musae-loading", width: "240", height: "240", viewBox: "0 0 240 240" },
-        React.createElement("circle", { className: clsx(["runner", "circle-a"]), cx: "120", cy: "120", r: "105", fill: "none", stroke: "#000", strokeWidth: "20", strokeDasharray: "0 660", strokeDashoffset: "-330", strokeLinecap: "round" }),
-        React.createElement("circle", { className: clsx(["runner", "circle-b"]), cx: "120", cy: "120", r: "35", fill: "none", stroke: "#000", strokeWidth: "20", strokeDasharray: "0 220", strokeDashoffset: "-110", strokeLinecap: "round" }),
-        React.createElement("circle", { className: clsx(["runner", "circle-c"]), cx: "85", cy: "120", r: "70", fill: "none", stroke: "#000", strokeWidth: "20", strokeDasharray: "0 440", strokeLinecap: "round" }),
-        React.createElement("circle", { className: clsx(["runner", "circle-d"]), cx: "155", cy: "120", r: "70", fill: "none", stroke: "#000", strokeWidth: "20", strokeDashoffset: "0 440", strokeLinecap: "round" })));
-};
-
-export { Loading as default };

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

@@ -1,10 +0,0 @@
-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;
-}
-
-export { __rest };