musae 0.1.12 → 0.1.14

package/README.md

@@ -0,0 +1,37 @@
+<h1 align="center">Musae</h1>
+
+## ✨ Features
+
+- 🌈 Enterprise-class UI designed for web applications.
+- 📦 A set of high-quality React components out of the box.
+- 🛡 Written in TypeScript with predictable static types.
+- ⚙️ Whole package of design resources and development tools.
+- 🌍 Internationalization support for dozens of languages.
+- 🎨 Powerful theme customization based on CSS-in-JS.
+
+## 📦 Install
+
+```bash
+npm install musae
+```
+
+```bash
+yarn add musae
+```
+
+```bash
+pnpm add musae
+```
+
+## 🔨 Usage
+
+```tsx
+import React from "react";
+import { Button } from "musae";
+
+const App = () => (
+  <>
+    <Button>PRESS ME</Button>
+  </>
+);
+```

package/dist/components/button/button.d.ts

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

package/dist/components/button/button.js

@@ -1,6 +1,6 @@
-import { Wrapper } from './styled.js';
-import Span from './span.js';
-import React from 'react';
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { StyledWrapper, StyledSpan } from './styled.js';
+import React, { useMemo } from 'react';
 
 /**
  * @author murukal
@@ -8,9 +8,13 @@ import React from 'react';
  * @description
  * button
  */
-const Button = ({ children, className, onClick }) => {
-    return (React.createElement(Wrapper, { onClick: onClick, className: className },
-        React.createElement(Span, null, children)));
+const Button = (_a) => {
+    var { children, className, onClick } = _a, props = __rest(_a, ["children", "className", "onClick"]);
+    /// get which variant is using
+    /// variant determin style
+    const variant = useMemo(() => props.variant || "filled", [props.variant]);
+    return (React.createElement(StyledWrapper, { onClick: onClick, className: className, variant: variant },
+        React.createElement(StyledSpan, null, children)));
 };
 
 export { Button as default };

package/dist/components/button/styled.d.ts

@@ -1,5 +1,15 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const StyledWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+} & Required<Pick<import("./types").ButtonProps, "variant">>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+/**
+ * @author murukal
+ *
+ * @description
+ * content
+ */
+export declare const StyledSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/button/styled.js

@@ -1,15 +1,45 @@
 import styled from '@emotion/styled';
 import { useValidTheme } from '../theme/hooks.js';
 
-const Wrapper = styled.button(({ theme }) => {
-    var _a;
+const StyledWrapper = styled.button(({ theme, variant }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const validTheme = useValidTheme(theme);
-    return {
-        borderRadius: 999,
-        padding: "10px 16px",
-        backgroundColor: (_a = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+    return Object.assign(Object.assign(Object.assign(Object.assign({ borderRadius: 999, padding: "0.625rem 1.5rem" }, (variant === "filled" && {
+        backgroundColor: (_a = validTheme.palettes) === null || _a === void 0 ? void 0 : _a.primary[40],
         border: "none",
-    };
+        span: {
+            color: (_b = validTheme.palettes) === null || _b === void 0 ? void 0 : _b.primary[100],
+        },
+    })), (variant === "outlined" && {
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: (_c = validTheme.palettes) === null || _c === void 0 ? void 0 : _c.neutral[50],
+        span: {
+            color: (_d = validTheme.palettes) === null || _d === void 0 ? void 0 : _d.primary[40],
+        },
+    })), (variant === "elevated" && {
+        backgroundColor: (_e = validTheme.palettes) === null || _e === void 0 ? void 0 : _e.neutral[95],
+        boxShadow: (_f = validTheme.elevations) === null || _f === void 0 ? void 0 : _f[1].boxShadow,
+        span: {
+            color: (_g = validTheme.palettes) === null || _g === void 0 ? void 0 : _g.primary[40],
+        },
+    })), (variant === "tonal" && {
+        backgroundColor: (_h = validTheme.palettes) === null || _h === void 0 ? void 0 : _h.secondary[90],
+        span: {
+            color: (_j = validTheme.palettes) === null || _j === void 0 ? void 0 : _j.secondary[10],
+        },
+    }));
+});
+/**
+ * @author murukal
+ *
+ * @description
+ * content
+ */
+const StyledSpan = styled.span(({ theme }) => {
+    var _a, _b;
+    const validTheme = useValidTheme(theme);
+    return Object.assign({ marginLeft: 8, marginRight: 8 }, (_b = (_a = validTheme.typography) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.large);
 });
 
-export { Wrapper };
+export { StyledSpan, StyledWrapper };

package/dist/components/button/types.d.ts

@@ -1,4 +1,5 @@
 import type { MouseEventHandler, ReactNode } from "react";
+export type Variant = "filled" | "outlined" | "text" | "elevated" | "tonal";
 /**
  * @author murukal
  *
@@ -7,6 +8,12 @@ import type { MouseEventHandler, ReactNode } from "react";
  */
 export interface ButtonProps {
     className?: string;
+    variant?: Variant;
     children?: ReactNode;
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
+/**
+ * @description
+ * button render props
+ */
+export type ButtonRenderProps = Required<Pick<ButtonProps, "variant">>;

package/dist/components/checkbox/styled.js

@@ -4,7 +4,7 @@ import { useValidTheme } from '../theme/hooks.js';
 const Wrapper = styled.input(({ theme }) => {
     var _a;
     const validTheme = useValidTheme(theme);
-    const primaryColor = (_a = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary;
+    const primaryColor = (_a = validTheme.palettes) === null || _a === void 0 ? void 0 : _a.primary[40];
     return {
         margin: 0,
         visibility: "hidden",

package/dist/components/col/col.d.ts

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

package/dist/components/col/col.js

@@ -0,0 +1,10 @@
+import React, { useMemo } from 'react';
+import { StyledWrapper } from './styled.js';
+
+const Col = (props) => {
+    /// span
+    const span = useMemo(() => { var _a; return (_a = props.span) !== null && _a !== void 0 ? _a : 8; }, [props.span]);
+    return React.createElement(StyledWrapper, { span: span }, props.children);
+};
+
+export { Col as default };

package/dist/components/col/index.d.ts

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

package/dist/components/col/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Required<Pick<import("./types").ColProps, "span">>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/col/styled.js

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const StyledWrapper = styled.div(({ span }) => {
+    return {
+        gridColumnStart: "auto",
+        gridColumnEnd: `span ${span}`,
+    };
+});
+
+export { StyledWrapper };

package/dist/components/col/types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface ColProps {
+    span?: number;
+    children: ReactNode;
+}
+export type ColRenderProps = Required<Pick<ColProps, "span">>;

package/dist/components/divider/styled.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 const StyledWrapper = styled.div(({ hasChildren }) => {
     if (!hasChildren) {
         return {
-            margin: "1.5rem 0",
+            margin: "1rem 0",
             borderBlockStart: "1px solid rgba(5, 5, 5, 0.06)",
         };
     }

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export { Switch } from "./switch";
 export { Radio, RadioGroup } from "./radio";
 export { Checkbox } from "./checkbox";
 export { Row } from "./row";
+export { Col } from "./col";
 export { Divider } from "./divider";
 /**
  * @description

package/dist/components/index.js

@@ -9,5 +9,6 @@ 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 { default as Row } from './row/row.js';
+export { default as Col } from './col/col.js';
 export { default as Divider } from './divider/divider.js';
 export { useMessage } from './message/hooks.js';

package/dist/components/input/hooks.d.ts

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

package/dist/components/input/hooks.js

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

package/dist/components/input/input.js

@@ -1,8 +1,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, StyledInput } from './styled.js';
+import { StyledWrapper, StyledLabel, StyledInput } from './styled.js';
 
 /**
  * @author murukal
@@ -18,9 +17,9 @@ const Input = forwardRef((props, ref) => {
     /// is focused
     const { isOn: isFocused, turnOn: focus, turnOff: blur } = useBoolean();
     /// variant
-    const variant = useMemo(() => props.variant || "outlined", [props.variant]);
+    useMemo(() => props.variant || "outlined", [props.variant]);
     /// style
-    const { wrapperClassName } = useStyles([variant, isFocused, props.className]);
+    const { wrapperClassName } = useStyles([props.className]);
     /// used input props
     const inputProps = useMemo(() => {
         return {
@@ -40,9 +39,9 @@ const Input = forwardRef((props, ref) => {
         };
     }, [focus, blur, props.type, props.onFocus, props.onBlur]);
     /// render
-    return (React.createElement(Wrapper, { ref: wrapperRef, className: wrapperClassName, isFocused: isFocused },
+    return (React.createElement(StyledWrapper, { ref: wrapperRef, className: wrapperClassName, isFocused: isFocused },
         props.prefix,
-        !!props.label && (React.createElement(Label, { isFocused: isFocused, className: "musae-input-label" }, props.label)),
+        !!props.label && (React.createElement(StyledLabel, { isFocused: isFocused, className: "musae-input-label" }, props.label)),
         React.createElement(StyledInput, Object.assign({}, inputProps)),
         props.suffix));
 });

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { WrapperProps } from "./types";
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+import type { LabelRenderProps, WrapperProps } from "./types";
+export declare const StyledWrapper: 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>, {}>;
@@ -8,3 +8,7 @@ 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>, {}>;
+export declare const StyledLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & LabelRenderProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {}>;

package/dist/components/input/styled.js

@@ -1,22 +1,31 @@
 import styled from '@emotion/styled';
 import { useValidTheme } from '../theme/hooks.js';
 
-const Wrapper = styled.fieldset(({ isFocused, theme }) => {
-    var _a;
+const StyledWrapper = styled.fieldset(({ isFocused, theme }) => {
+    var _a, _b;
     const validTheme = useValidTheme(theme);
-    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 = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+    return Object.assign({ textAlign: "start", height: 56, margin: 0, paddingTop: 0, paddingBottom: 0, display: "flex", alignItems: "center", borderColor: (_a = validTheme.palettes) === null || _a === void 0 ? void 0 : _a.neutral[50], borderWidth: 1, borderStyle: "solid", borderRadius: 4, boxSizing: "border-box" }, (isFocused && {
+        borderColor: (_b = validTheme.palettes) === null || _b === void 0 ? void 0 : _b.primary[40],
         borderWidth: 2,
     }));
 });
 const StyledInput = styled.input(() => {
     return {
-        padding: 0,
+        padding: "0 0.75rem",
         backgroundColor: "transparent",
         outline: "none",
         border: "none",
         height: "auto",
     };
 });
+const StyledLabel = styled.legend(({ isFocused, theme }) => {
+    var _a, _b, _c;
+    const validTheme = useValidTheme(theme);
+    return Object.assign(Object.assign(Object.assign({}, (_b = (_a = validTheme.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 = validTheme.palettes) === null || _c === void 0 ? void 0 : _c.primary[40],
+    }));
+});
 
-export { StyledInput, Wrapper };
+export { StyledInput, StyledLabel, StyledWrapper };

package/dist/components/input/types.d.ts

@@ -22,7 +22,7 @@ export interface InputProps {
 /**
  * @description label props
  */
-export interface LabelProps {
+export interface LabelRenderProps {
     isFocused: boolean;
 }
 /**

package/dist/components/loading/loading.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { keyframes } from '@emotion/react';
 import Circle from './circle.js';
-import { Wrapper } from './styled.js';
+import { StyledWrapper } from './styled.js';
 
 const large = keyframes `
   from,
@@ -187,7 +187,7 @@ const right = keyframes `
   }
 `;
 const Loading = () => {
-    return (React.createElement(Wrapper, { width: "240", height: "240", viewBox: "0 0 240 240" },
+    return (React.createElement(StyledWrapper, { 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" }),

package/dist/components/loading/styled.d.ts

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

package/dist/components/loading/styled.js

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

package/dist/components/menu/menu.js

@@ -17,7 +17,7 @@ const Menu = (props) => {
             setSelectedKeys([key]);
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, key);
         },
-        selectedKeys: [],
+        selectedKeys,
     }), [props.onClick, selectedKeys]);
     return (React.createElement(MenuContext.Provider, { value: contextValue },
         React.createElement(Group, { items: props.items })));

package/dist/components/radio/styled.js

@@ -25,7 +25,7 @@ const Wrapper = styled.input(({ theme }) => {
         "&[aria-checked=true]": {
             "::after": {
                 borderWidth: "0.3rem",
-                borderColor: (_a = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+                borderColor: (_a = validTheme.palettes) === null || _a === void 0 ? void 0 : _a.primary[40],
             },
         },
     };

package/dist/components/switch/styled.js

@@ -24,8 +24,8 @@ const Wrapper = styled.div(({ theme }) => {
             transition: "all .2s",
         },
         "&[aria-selected=true]": {
-            borderColor: (_a = validTheme.colors) === null || _a === void 0 ? void 0 : _a.primary,
-            backgroundColor: (_b = validTheme.colors) === null || _b === void 0 ? void 0 : _b.primary,
+            borderColor: (_a = validTheme.palettes) === null || _a === void 0 ? void 0 : _a.primary[40],
+            backgroundColor: (_b = validTheme.palettes) === null || _b === void 0 ? void 0 : _b.primary[40],
             "::before": {
                 translate: "100%",
                 backgroundColor: "white",

package/dist/components/theme/hooks.js

@@ -87,12 +87,6 @@ const palettes = {
  * let ui components display well
  */
 const DEFAULT_THEME = {
-    colors: {
-        primary: palettes.primary[40],
-        secondary: palettes.secondary[40],
-        tertiary: palettes.tertiary[40],
-        error: palettes.error[40],
-    },
     typography: {
         body: {
             small: {

package/dist/components/theme/types.d.ts

@@ -8,9 +8,6 @@ type Elevation = Pick<CSSProperties, "boxShadow">;
  * declaration for theme
  */
 export interface Theme {
-    colors?: {
-        [key in ColorProperty]?: string;
-    };
     typography?: {
         body?: {
             small?: Typography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",

package/dist/components/button/span.d.ts

@@ -1,12 +0,0 @@
-/// <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/components/button/span.js

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

package/dist/components/input/label.d.ts

@@ -1,7 +0,0 @@
-/// <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/components/input/label.js

@@ -1,14 +0,0 @@
-import styled from '@emotion/styled';
-import { useValidTheme } from '../theme/hooks.js';
-
-const Label = styled.legend(({ isFocused, theme }) => {
-    var _a, _b, _c;
-    const validTheme = useValidTheme(theme);
-    return Object.assign(Object.assign(Object.assign({}, (_b = (_a = validTheme.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 = validTheme.colors) === null || _c === void 0 ? void 0 : _c.primary,
-    }));
-});
-
-export { Label as default };