musae 0.1.5 → 0.1.7

package/dist/divider/divider.d.ts

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

package/dist/divider/divider.js

@@ -0,0 +1,9 @@
+import React, { useMemo } from 'react';
+import { StyledWrapper } from './styled.js';
+
+const Divider = (props) => {
+    const hasChildren = useMemo(() => !!props.children, [props.children]);
+    return React.createElement(StyledWrapper, { hasChildren: hasChildren }, props.children);
+};
+
+export { Divider as default };

package/dist/divider/index.d.ts

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

package/dist/divider/styled.d.ts

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

package/dist/divider/styled.js

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

package/dist/divider/types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface DividerProps {
+    children: ReactNode;
+}
+export interface DividerRenderProps {
+    hasChildren: boolean;
+}

package/dist/icons/hooks.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from "./types";
+export declare const useIconProps: (props: IconProps) => Required<IconProps>;

package/dist/icons/hooks.js

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import { useTheme } from '../theme/hooks.js';
+
+const useIconProps = (props) => {
+    const theme = useTheme();
+    const size = useMemo(() => props.size || 24, [props.size, theme]);
+    const color = useMemo(() => props.color || "white", [props.color]);
+    return { size, color };
+};
+
+export { useIconProps };

package/dist/icons/navigate-before.d.ts

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

package/dist/icons/navigate-before.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useIconProps } from './hooks.js';
+
+const NavigateBefore = (props) => {
+    const iconProps = useIconProps(props);
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconProps.size, height: iconProps.size, viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { d: "M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z", fill: iconProps.color })));
+};
+
+export { NavigateBefore as default };

package/dist/icons/types.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from "react";
+/**
+ * @author murukal
+ *
+ * @description
+ * icon props
+ */
+export interface IconProps {
+    size?: number;
+    color?: CSSProperties["fill"];
+}

package/dist/index.d.ts

@@ -11,8 +11,15 @@ export { Button } from "./button";
 export { Switch } from "./switch";
 export { Radio, RadioGroup } from "./radio";
 export { Checkbox } from "./checkbox";
+export { Row } from "./row";
+export { Divider } from "./divider";
 /**
  * @description
  * hooks
  */
 export { useMessage } from "./message";
+/**
+ * @description
+ * declarations
+ */
+export type { MenuItemProps } from "./menu";

package/dist/index.js

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

package/dist/menu/group.d.ts

@@ -5,7 +5,5 @@ import React from "react";
  * @description
  * menu group
  */
-declare const Group: React.ForwardRefExoticComponent<import("./types").MenuProps & import("./types").WithLevel & {
-    isCollapsed?: boolean | undefined;
-} & React.RefAttributes<HTMLUListElement>>;
+declare const Group: React.ForwardRefExoticComponent<import("./types").MenuProps & import("./types").WithLevel & React.RefAttributes<HTMLUListElement>>;
 export default Group;

package/dist/menu/group.js

@@ -1,15 +1,61 @@
 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';
+import { StyledMenuGroup, StyledMenuItemCollapser, StyledMenuItemWrapper, StyledMenuItemPrefix } from './styled.js';
+import React, { forwardRef, useMemo, useContext, useCallback } from 'react';
+import { useBoolean } from '@aiszlab/relax';
+import { useAnimate } from 'framer-motion';
+import MenuContext from './context.js';
+import NavigateBefore from '../icons/navigate-before.js';
 
+/**
+ * @author murukal
+ *
+ * @description
+ * menu item
+ */
+const Item = ({ level = 0, label, children, prefix, id }) => {
+    /// has children
+    const hasChildren = useMemo(() => !!(children === null || children === void 0 ? void 0 : children.length), [children]);
+    const context = useContext(MenuContext);
+    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, { isCollapsed: isCollapsed },
+            React.createElement(NavigateBefore, { size: 16 })));
+    }, [hasChildren, isCollapsed]);
+    const onCollapserToggle = useCallback(() => {
+        var _a;
+        // if this item do not has children, mean this is a menu item
+        // when click it, handler the change event, pass key
+        if (!hasChildren) {
+            return (_a = context === null || context === void 0 ? void 0 : context.onClick) === null || _a === void 0 ? void 0 : _a.call(context, id);
+        }
+        // when item has children, mean this is menu group
+        // when click it, handler collapser
+        if (!scope.current)
+            return;
+        animate(scope.current, {
+            height: isCollapsed ? "auto" : 0,
+        });
+        toggle();
+    }, [toggle, isCollapsed, animate, id, context === null || context === void 0 ? void 0 : context.onClick, hasChildren]);
+    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 })));
+};
 /**
  * @author murukal
  *
  * @description
  * menu group
  */
-const Group = forwardRef(({ items, level = 0, isCollapsed = false }, ref) => {
+const Group = forwardRef(({ items, level = 0 }, ref) => {
     /// 菜单条目渲染结果
     const children = useMemo(() => {
         return items.map((_a) => {

package/dist/menu/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { WithLevel } from "./types";
+import type { WithLevel } from "./types";
 /**
  * @author murukal
  *
@@ -29,6 +29,8 @@ export declare const StyledMenuItemPrefix: import("@emotion/styled").StyledCompo
 export declare const StyledMenuItemCollapser: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    isCollapsed: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 /**
  * @author murukal

package/dist/menu/styled.js

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { useTheme } from '../theme/hooks.js';
 
 /**
  * @author murukal
@@ -19,9 +18,9 @@ const StyledMenuItemWrapper = styled.div(({ level = 0 }) => {
         paddingLeft: 12 + level * 24,
         borderRadius: 8,
         transition: "background-color 300ms",
-        ":hover": {
-            backgroundColor: "#f5f7fa",
-        },
+        // ":hover": {
+        //   backgroundColor: "#f5f7fa",
+        // },
     };
 });
 /**
@@ -41,10 +40,12 @@ const StyledMenuItemPrefix = styled.span(() => {
  * @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);
+const StyledMenuItemCollapser = styled.span(({ isCollapsed }) => {
+    return {
+        marginLeft: "auto",
+        transform: `rotate(90deg) ${isCollapsed ? "rotateY(180deg)" : "rotateY(0)"}`,
+        transition: "transform 200ms",
+    };
 });
 /**
  * @author murukal
@@ -56,7 +57,6 @@ const StyledMenuGroup = styled.ul({
     margin: 0,
     listStyleType: "none",
     padding: 0,
-    width: 240,
     overflow: "hidden",
 });
 

package/dist/menu/types.d.ts

@@ -39,9 +39,7 @@ export interface MenuItemProps {
  * @description
  * menu group render props
  */
-export type MenuGroupRenderProps = MenuProps & WithLevel & {
-    isCollapsed?: boolean;
-};
+export type MenuGroupRenderProps = MenuProps & WithLevel;
 /**
  * @author murukal
  *

package/dist/row/index.d.ts

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

package/dist/row/row.d.ts

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

package/dist/row/row.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StyledWrapper } from './styled.js';
+
+const Row = (props) => {
+    return React.createElement(StyledWrapper, null, props.children);
+};
+
+export { Row as default };

package/dist/row/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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/row/styled.js

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+const StyledWrapper = styled.div({
+    display: "grid",
+    gridTemplateColumns: "repeat(24, minmax(0, 1fr))",
+});
+
+export { StyledWrapper };

package/dist/row/types.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+export interface RowProps {
+    children: ReactNode;
+}

package/package.json

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

package/dist/menu/item.d.ts

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

package/dist/menu/item.js

@@ -1,45 +0,0 @@
-import React, { useMemo, useContext, 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';
-import MenuContext from './context.js';
-
-const Item = ({ level = 0, label, children, prefix, id }) => {
-    /// 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 context = useContext(MenuContext);
-    const onCollapserToggle = useCallback(() => {
-        var _a;
-        // if this item do not has children, mean this is a menu item
-        // when click it, handler the change event, pass key
-        if (!hasChildren) {
-            return (_a = context === null || context === void 0 ? void 0 : context.onClick) === null || _a === void 0 ? void 0 : _a.call(context, id);
-        }
-        // when item has children, mean this is menu group
-        // when click it, handler collapser
-        if (!scope.current)
-            return;
-        animate(scope.current, {
-            height: isCollapsed ? "auto" : 0,
-        });
-        toggle();
-    }, [toggle, isCollapsed, animate, id, context === null || context === void 0 ? void 0 : context.onClick, hasChildren]);
-    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 };