musae 0.1.18 → 0.1.19

package/dist/components/breadcrumb/breadcrumb.js

@@ -2,17 +2,17 @@ import React, { useMemo, isValidElement } from 'react';
 import { StyledSeparator, StyledNav } from './styled.js';
 
 const _SEPARATOR = "/";
+const _ROLE = "separator";
 const Breadcrumb = (props) => {
     /// render the children
     const _children = useMemo(() => {
-        var _a;
-        const _separator = (_a = props.separator) !== null && _a !== void 0 ? _a : _SEPARATOR;
+        const _separator = props.separator ?? _SEPARATOR;
         return props.items.map((_item, _index) => {
             const _isLastElement = _index === props.items.length - 1;
             const _isReactElement = isValidElement(_item.label);
             return [
                 React.createElement("li", { key: _index }, _isReactElement ? (_item.label) : _item.href ? (React.createElement("a", { href: _item.href }, _item.label)) : (React.createElement("span", null, _item.label))),
-                !_isLastElement && (React.createElement(StyledSeparator, { key: `separator${_index}`, role: "separator" }, _separator)),
+                !_isLastElement && (React.createElement(StyledSeparator, { key: `${_ROLE}${_index}`, role: _ROLE }, _separator)),
             ];
         });
     }, [props.items, props.separator]);

package/dist/components/breadcrumb/styled.js

@@ -2,8 +2,12 @@ import styled from '@emotion/styled';
 import { useValidTheme } from '../theme/hooks.js';
 
 const StyledNav = styled.nav(({ theme }) => {
-    const validTheme = useValidTheme(theme);
-    return Object.assign(Object.assign({ color: validTheme.palettes.neutral[30] }, validTheme.typography.label.large), { ol: {
+    const _theme = useValidTheme(theme);
+    return {
+        color: _theme.palettes.neutral[30],
+        // typography
+        ..._theme.typography.label.large,
+        ol: {
             listStyle: "none",
             display: "flex",
             flexWrap: "wrap",
@@ -13,15 +17,16 @@ const StyledNav = styled.nav(({ theme }) => {
                     transition: "all 200ms",
                     borderRadius: 4,
                     ":hover": {
-                        color: validTheme.palettes.neutral[10],
-                        backgroundColor: validTheme.palettes.neutral[95],
+                        color: _theme.palettes.neutral[10],
+                        backgroundColor: _theme.palettes.neutral[95],
                     },
                 },
                 ":last-of-type": {
-                    color: validTheme.palettes.neutral[10],
+                    color: _theme.palettes.neutral[10],
                 },
             },
-        } });
+        },
+    };
 });
 const StyledSeparator = styled.li(() => {
     return {

package/dist/components/button/button.js

@@ -1,4 +1,3 @@
-import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { StyledWrapper, StyledSpan } from './styled.js';
 import React, { forwardRef, useMemo } from 'react';
 
@@ -8,8 +7,7 @@ import React, { forwardRef, useMemo } from 'react';
  * @description
  * button
  */
-const Button = forwardRef((_a, ref) => {
-    var { children, className, onClick, style } = _a, props = __rest(_a, ["children", "className", "onClick", "style"]);
+const Button = forwardRef(({ children, className, onClick, style, ...props }, ref) => {
     /// get which variant is using
     /// variant determin style
     const variant = useMemo(() => props.variant || "filled", [props.variant]);

package/dist/components/button/styled.js

@@ -2,26 +2,35 @@ import styled from '@emotion/styled';
 import { useValidTheme } from '../theme/hooks.js';
 
 const StyledWrapper = styled.button(({ theme, variant, color }) => {
-    const validTheme = useValidTheme(theme);
-    const _primaryColor = validTheme.palettes[color][40];
-    return Object.assign(Object.assign(Object.assign({ borderRadius: 999, padding: "0.625rem 1.5rem" }, (variant === "filled" && {
-        backgroundColor: _primaryColor,
-        border: "none",
-        span: {
-            color: validTheme.palettes.primary[100],
-        },
-    })), (variant === "outlined" && {
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor: validTheme.palettes.neutral[50],
-        span: {
-            color: _primaryColor,
-        },
-    })), (variant === "text" && {
-        span: {
-            color: _primaryColor,
-        },
-    }));
+    const _theme = useValidTheme(theme);
+    const _primaryColor = _theme.palettes[color][40];
+    return {
+        borderRadius: 999,
+        padding: "0.625rem 1.5rem",
+        // filled variant style
+        ...(variant === "filled" && {
+            backgroundColor: _primaryColor,
+            border: "none",
+            span: {
+                color: _theme.palettes.primary[100],
+            },
+        }),
+        // outlined variant style
+        ...(variant === "outlined" && {
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: _theme.palettes.neutral[50],
+            span: {
+                color: _primaryColor,
+            },
+        }),
+        // text variant style
+        ...(variant === "text" && {
+            span: {
+                color: _primaryColor,
+            },
+        }),
+    };
 });
 /**
  * @author murukal
@@ -30,9 +39,13 @@ const StyledWrapper = styled.button(({ theme, variant, color }) => {
  * 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);
+    const _theme = useValidTheme(theme);
+    return {
+        marginLeft: 8,
+        marginRight: 8,
+        /// typography
+        ..._theme.typography.label.large,
+    };
 });
 
 export { StyledSpan, StyledWrapper };

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

@@ -7,8 +7,13 @@ export type Color = "primary" | "secondary" | "neutral";
  * @description
  * button render props
  */
-export interface ButtonProps {
+export interface ButtonProps extends Partial<Pick<HTMLButtonElement, "type">> {
     className?: string;
+    /**
+     * @description
+     * variant
+     * @example filled
+     */
     variant?: Variant;
     /**
      * @description

package/dist/components/checkbox/checkbox.js

@@ -12,12 +12,11 @@ const Checkbox = (props) => {
     /// if there is context value, use context value
     /// else use controlled state
     const isChecked = useMemo(() => {
-        var _a;
         if (contextValue) {
-            return !!((_a = contextValue.value) === null || _a === void 0 ? void 0 : _a.get(props.value || id));
+            return !!contextValue.value?.get(props.value || id);
         }
         return _isChecked;
-    }, [contextValue === null || contextValue === void 0 ? void 0 : contextValue.value]);
+    }, [contextValue?.value]);
     /// change handler
     /// if there is context value, just notify context
     /// else change the controlled state
@@ -27,7 +26,7 @@ const Checkbox = (props) => {
             return;
         }
         _setIsChecked(event.target.checked);
-    }, [_setIsChecked, contextValue === null || contextValue === void 0 ? void 0 : contextValue.onChange]);
+    }, [_setIsChecked, contextValue?.onChange]);
     return React.createElement(StyledWrapper, { type: "checkbox", checked: !!isChecked, "aria-checked": !!isChecked, onChange: change });
 };
 

package/dist/components/checkbox/styled.js

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import { useValidTheme } from '../theme/hooks.js';
 
 const StyledWrapper = styled.input(({ theme }) => {
-    const validTheme = useValidTheme(theme);
-    const primaryColor = validTheme.palettes.primary[40];
+    const _theme = useValidTheme(theme);
+    const primaryColor = _theme.palettes.primary[40];
     return {
         margin: 0,
         visibility: "hidden",

package/dist/components/chip/chip.d.ts

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

package/dist/components/chip/chip.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyledSpan } from './styled.js';
+import { useClassNames } from './hooks.js';
+
+const Chip = ({ children, size = "large" }) => {
+    const classNames = useClassNames();
+    return (React.createElement(StyledSpan, { size: size, className: classNames.chip }, children));
+};
+
+export { Chip as default };

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

@@ -0,0 +1,7 @@
+/**
+ * @description
+ * class names
+ */
+export declare const useClassNames: () => {
+    chip: string;
+};

package/dist/components/chip/hooks.js

@@ -0,0 +1,20 @@
+import { useContext, useMemo } from 'react';
+import Context from '../config/context.js';
+import { withPrefix } from '../../utils/class-name.js';
+
+var ClassName;
+(function (ClassName) {
+    ClassName["Chip"] = "chip";
+})(ClassName || (ClassName = {}));
+/**
+ * @description
+ * class names
+ */
+const useClassNames = () => {
+    const { prefix } = useContext(Context);
+    return useMemo(() => ({
+        chip: withPrefix(prefix, ClassName.Chip),
+    }), [prefix]);
+};
+
+export { useClassNames };

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ChipRenderProps } from "./types";
+/**
+ * @description
+ * span with style
+ */
+export declare const StyledSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ChipRenderProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/chip/styled.js

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { useValidTheme } from '../theme/hooks.js';
+
+const PADDING_X = new Map().set("small", 8);
+const PADDING_Y = new Map().set("small", 4);
+const RADIUS = new Map().set("small", 4);
+/**
+ * @description
+ * span with style
+ */
+const StyledSpan = styled.span(({ size, ...props }) => {
+    const theme = useValidTheme(props.theme);
+    return {
+        paddingInline: PADDING_X.get(size) ?? 16,
+        paddingBlock: PADDING_Y.get(size) ?? 8,
+        borderRadius: RADIUS.get(size) ?? 8,
+        backgroundColor: theme.palettes.primary[90],
+        ...theme.typography.label[size],
+    };
+});
+
+export { StyledSpan };

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+type Size = "small" | "large";
+/**
+ * @description
+ * chip props
+ */
+export interface ChipProps {
+    /**
+     * @description
+     * children
+     */
+    children?: ReactNode;
+    /**
+     * @description
+     * size
+     */
+    size?: Size;
+}
+/**
+ * @description
+ * chip render props
+ */
+export interface ChipRenderProps extends Required<Pick<ChipProps, "size">> {
+}
+export {};

package/dist/components/config/context.d.ts

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

package/dist/components/config/context.js

@@ -1,5 +1,9 @@
 import { createContext } from 'react';
+import { PREFIX_MUSAE } from '../../utils/class-name.js';
 
-const Context = createContext(null);
+const Context = createContext({
+    messageHolder: null,
+    prefix: PREFIX_MUSAE,
+});
 
 export { Context as default };

package/dist/components/config/provider.js

@@ -1,12 +1,14 @@
 import Context from './context.js';
 import { useMessage } from '../message/hooks.js';
 import React from 'react';
+import { PREFIX_MUSAE } from '../../utils/class-name.js';
 
 const _Provider = Context.Provider;
 const ConfigProvider = (props) => {
     const [, messageHolder] = useMessage();
     return (React.createElement(_Provider, { value: {
             messageHolder,
+            prefix: props.prefix || PREFIX_MUSAE,
         } },
         props.children,
         messageHolder));

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

@@ -5,7 +5,16 @@ import { ReactNode, ReactPortal } from "react";
  * config context value
  */
 export interface ContextValue {
-    messageHolder: ReactPortal;
+    /**
+     * @description
+     * message holder
+     */
+    messageHolder: ReactPortal | null;
+    /**
+     * @description
+     * prefix
+     */
+    prefix: string;
 }
 /**
  * @description
@@ -13,5 +22,14 @@ export interface ContextValue {
  * config props
  */
 export interface ConfigProps {
+    /**
+     * @description
+     * children
+     */
     children?: ReactNode;
+    /**
+     * @description
+     * prefix
+     */
+    prefix?: string;
 }

package/dist/components/divider/divider.d.ts

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

package/dist/components/divider/divider.js

@@ -1,9 +1,11 @@
-import React, { useMemo } from 'react';
 import { StyledWrapper } from './styled.js';
+import React from 'react';
+import { useClassNames, useOffset } from './hooks.js';
 
-const Divider = (props) => {
-    const hasChildren = useMemo(() => !!props.children, [props.children]);
-    return React.createElement(StyledWrapper, { hasChildren: hasChildren }, props.children);
+const Divider = ({ align, children }) => {
+    const classNames = useClassNames();
+    const offset = useOffset([align]);
+    return (React.createElement(StyledWrapper, { className: classNames.divider, hasChildren: !!children, offset: offset }, !!children && React.createElement("span", { className: classNames.content }, children)));
 };
 
 export { Divider as default };

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

@@ -0,0 +1,14 @@
+import { Align } from "./types";
+/**
+ * @description
+ * class name with prefix
+ */
+export declare const useClassNames: () => {
+    divider: string;
+    content: string;
+};
+/**
+ * @description
+ * offset for children
+ */
+export declare const useOffset: ([align]: [align: Align | undefined]) => 50 | 95 | 5;

package/dist/components/divider/hooks.js

@@ -0,0 +1,36 @@
+import { useContext, useMemo } from 'react';
+import Context from '../config/context.js';
+import { withPrefix } from '../../utils/class-name.js';
+
+var ClassName;
+(function (ClassName) {
+    ClassName["Divider"] = "divider";
+    ClassName["Context"] = "content";
+})(ClassName || (ClassName = {}));
+const OFFSET = new Map([
+    ["center", 50],
+    ["left", 5],
+    ["right", 95],
+]);
+/**
+ * @description
+ * class name with prefix
+ */
+const useClassNames = () => {
+    const { prefix } = useContext(Context);
+    return useMemo(() => ({
+        divider: withPrefix(prefix, ClassName.Divider),
+        content: withPrefix(prefix, ClassName.Context),
+    }), [prefix]);
+};
+/**
+ * @description
+ * offset for children
+ */
+const useOffset = ([align]) => {
+    return useMemo(() => {
+        return OFFSET.get(align ?? "center") ?? 50;
+    }, [align]);
+};
+
+export { useClassNames, useOffset };

package/dist/components/divider/styled.js

@@ -1,13 +1,44 @@
 import styled from '@emotion/styled';
+import { useClassNames } from './hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
 
-const StyledWrapper = styled.div(({ hasChildren }) => {
+const StyledWrapper = styled.div(({ hasChildren, offset, ...props }) => {
+    const classNames = useClassNames();
+    const theme = useValidTheme(props.theme);
+    const layoutStyle = {
+        width: "100%",
+    };
+    const dividerStyle = {
+        height: 1,
+        backgroundColor: "#cac4d0",
+    };
     if (!hasChildren) {
         return {
-            margin: "1rem 0",
-            borderBlockStart: "1px solid rgba(5, 5, 5, 0.06)",
+            ...layoutStyle,
+            ...dividerStyle,
         };
     }
-    return {};
+    return {
+        ...layoutStyle,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        "::before": {
+            ...dividerStyle,
+            width: `${offset}%`,
+            content: "''",
+        },
+        "::after": {
+            ...dividerStyle,
+            width: `${100 - offset}%`,
+            content: "''",
+        },
+        [`.${classNames.content}`]: {
+            marginInline: 8,
+            whiteSpace: "nowrap",
+            ...theme.typography.body.small,
+        },
+    };
 });
 
 export { StyledWrapper };

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

@@ -1,7 +1,34 @@
 import type { ReactNode } from "react";
+export type Align = "center" | "left" | "right";
+/**
+ * @description
+ * divider props
+ */
 export interface DividerProps {
+    /**
+     * @description
+     * children
+     */
     children?: ReactNode;
+    /**
+     * @description
+     * align
+     */
+    align?: Align;
 }
+/**
+ * @description
+ * divider render props
+ */
 export interface DividerRenderProps {
+    /**
+     * @description
+     * if there is child
+     */
     hasChildren: boolean;
+    /**
+     * @description
+     * offset
+     */
+    offset: number;
 }

package/dist/components/drawer/drawer.d.ts

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

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

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+/**
+ * @description
+ * drawer props
+ */
+export interface DrawerProps {
+    /**
+     * @description
+     * children
+     */
+    children?: ReactNode;
+}

package/dist/components/empty/empty.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * @description
+ * empty component
+ */
+declare const Empty: () => React.JSX.Element;
+export default Empty;

package/dist/components/empty/empty.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyledWrapper } from './styled.js';
+import { useClassNames } from './hooks.js';
+
+/**
+ * @description
+ * empty component
+ */
+const Empty = () => {
+    const classNames = useClassNames();
+    return (React.createElement(StyledWrapper, null,
+        React.createElement("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd" },
+                React.createElement("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }),
+                React.createElement("g", { fillRule: "nonzero", stroke: "#d9d9d9" },
+                    React.createElement("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }),
+                    React.createElement("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })))),
+        React.createElement("div", { className: classNames.description }, "\u6682\u65E0\u6570\u636E")));
+};
+
+export { Empty as default };

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

@@ -0,0 +1,7 @@
+/**
+ * @description
+ * class names
+ */
+export declare const useClassNames: () => {
+    description: string;
+};

package/dist/components/empty/hooks.js

@@ -0,0 +1,20 @@
+import { useContext, useMemo } from 'react';
+import Context from '../config/context.js';
+import { withPrefix } from '../../utils/class-name.js';
+
+var ClassName;
+(function (ClassName) {
+    ClassName["Description"] = "empty-description";
+})(ClassName || (ClassName = {}));
+/**
+ * @description
+ * class names
+ */
+const useClassNames = () => {
+    const { prefix } = useContext(Context);
+    return useMemo(() => ({
+        description: withPrefix(prefix, ClassName.Description),
+    }), [prefix]);
+};
+
+export { useClassNames };

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * @description
+ * wrapper
+ */
+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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/empty/styled.js

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import { useClassNames } from './hooks.js';
+import { useValidTheme } from '../theme/hooks.js';
+
+/**
+ * @description
+ * wrapper
+ */
+const StyledWrapper = styled.div(({ theme }) => {
+    const classNames = useClassNames();
+    const _theme = useValidTheme(theme);
+    return {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        marginBlock: 32,
+        marginInline: 8,
+        [`.${classNames.description}`]: {
+            marginTop: 8,
+            ..._theme.typography.body.small,
+        },
+    };
+});
+
+export { StyledWrapper };