musae 0.2.1 → 0.2.3

package/dist/components/icon/icons/index.js

@@ -36,6 +36,7 @@ export { default as Cancel } from './navigation/cancel.js';
 export { default as Close } from './navigation/close.js';
 export { default as MoreHoriz } from './navigation/more-horiz.js';
 export { default as Check } from './navigation/check.js';
+export { default as UnfoldMore } from './navigation/unfold-more.js';
 export { default as Bedtime } from './image/bedtime.js';
 export { default as RotateLeft } from './image/rotate-left.js';
 export { default as RotateRight } from './image/rotate-right.js';

package/dist/components/icon/icons/navigation/index.d.ts

@@ -2,4 +2,5 @@ import Cancel from "./cancel";
 import MoreHoriz from "./more-horiz";
 import Close from "./close";
 import Check from "./check";
-export { Cancel, Close, MoreHoriz, Check };
+import UnfoldMore from "./unfold-more";
+export { Cancel, Close, MoreHoriz, Check, UnfoldMore };

package/dist/components/icon/icons/navigation/index.js

@@ -2,3 +2,4 @@ export { default as Cancel } from './cancel.js';
 export { default as MoreHoriz } from './more-horiz.js';
 export { default as Close } from './close.js';
 export { default as Check } from './check.js';
+export { default as UnfoldMore } from './unfold-more.js';

package/dist/components/icon/icons/navigation/unfold-more.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const UnfoldMore: (props: Omit<import("../..").IconProps, "as">) => React.FunctionComponentElement<import("../..").IconProps>;
+export default UnfoldMore;

package/dist/components/icon/icons/navigation/unfold-more.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { withIcon } from '../../hoc.js';
+
+const UnfoldMore = withIcon(({ size }) => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { d: "M12 5.83L15.17 9L16.58 7.59L12 3L7.41003 7.59L8.83003 9L12 5.83ZM12 18.17L8.83003 15L7.42003 16.41L12 21L16.59 16.41L15.17 15L12 18.17Z", fill: "currentColor" })));
+});
+var UnfoldMore$1 = UnfoldMore;
+
+export { UnfoldMore$1 as default };

package/dist/components/image/preview/operations.js

@@ -13,10 +13,10 @@ import KeyboardArrowRight from '../../icon/icons/hardware/keyboard-arrow-right.j
 const styles = {
   footer: props => [{
     position: "musae-ixxii4",
-    left: "musae-u96u03",
+    left: "musae-1tjciyl",
     insetInlineStart: null,
     insetInlineEnd: null,
-    right: "musae-3m8u43",
+    right: "musae-15gpytn",
     bottom: "musae-1ii70tt",
     display: "musae-78zum5",
     flexDirection: "musae-dt5ytf",
@@ -74,7 +74,7 @@ const Operations = ({
       className: "musae-1qtgrog musae-14l26ut"
     },
     navigations: {
-      className: "musae-ixxii4 musae-u96u03 musae-3m8u43 musae-wa60dl musae-gj1dgu musae-78zum5 musae-1q0g3np musae-1qughib musae-6s0dn4"
+      className: "musae-ixxii4 musae-1tjciyl musae-15gpytn musae-wa60dl musae-gj1dgu musae-78zum5 musae-1q0g3np musae-1qughib musae-6s0dn4"
     },
     footer: _stylex.props(styles.footer({
       color: theme.colors[ColorToken.OnSurface]

package/dist/components/layout/header.js

@@ -14,7 +14,7 @@ const styles = {
     paddingRight: null,
     marginBottom: "musae-hq7bbv",
     position: "musae-7wzq59",
-    top: "musae-13vifvy",
+    top: "musae-9oc6z4",
     zIndex: "musae-1ac462h",
     display: "musae-78zum5",
     alignItems: "musae-6s0dn4",

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

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

package/dist/components/loading/loading.js

@@ -1,5 +1,10 @@
 import React from 'react';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, LoadingClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
 
 const styles = {
   circle: {
@@ -44,11 +49,55 @@ const styles = {
     width: "musae-1ha45ep",
     height: "musae-b4kbli",
     $$css: true
+  },
+  loading: {
+    position: "musae-1n2onr6",
+    minWidth: "musae-h2iun8",
+    minHeight: "musae-oexrxm",
+    $$css: true
+  },
+  content: props => [{
+    opacity: "musae-byyjgo",
+    userSelect: "musae-87ps6o",
+    pointerEvents: "musae-47corl",
+    transitionProperty: "musae-19991ni",
+    transitionDuration: "musae-1d8287x",
+    zIndex: "musae-1ja2u2z",
+    "::after_content": "musae-1s928wv",
+    "::after_display": "musae-hkezso",
+    "::after_position": "musae-1j6awrg",
+    "::after_inset": "musae-1799ia1",
+    "::after_insetInline": null,
+    "::after_insetInlineStart": null,
+    "::after_insetInlineEnd": null,
+    "::after_left": null,
+    "::after_right": null,
+    "::after_insetBlock": null,
+    "::after_top": null,
+    "::after_bottom": null,
+    "::after_backgroundColor": "musae-27d4w3",
+    $$css: true
+  }, {
+    "--15iyedw": props.backgroundColor != null ? props.backgroundColor : "initial"
+  }],
+  spin: {
+    position: "musae-10l6tqk",
+    top: "musae-wa60dl",
+    insetInlineStart: "musae-budbmw",
+    left: null,
+    right: null,
+    transform: "musae-11lhmoz",
+    zIndex: "musae-1vjfegm",
+    $$css: true
   }
 };
 const Loading = ({
-  size = "medium"
+  size = "medium",
+  overlay = true,
+  children
 }) => {
+  const classNames = useClassNames(ComponentToken.Loading);
+  const theme = useTheme();
   const circles = {
     top: {
       ...{
@@ -83,15 +132,31 @@ const Loading = ({
       r: "70"
     }
   };
-  return React.createElement("svg", {
+  const styled = {
+    loading: {
+      className: "musae-1n2onr6 musae-h2iun8 musae-oexrxm"
+    },
+    spin: props(styles.spin, styles[size]),
+    content: props(overlay && styles.content({
+      backgroundColor: theme.colors[ColorToken.SurfaceDim]
+    }))
+  };
+  return React.createElement("div", {
+    className: clsx(classNames[LoadingClassToken.Loading], styled.loading.className),
+    style: styled.loading.style
+  }, React.createElement("svg", {
     viewBox: "0 0 240 240",
-    ...props(styles[size])
+    className: clsx(classNames[LoadingClassToken.Spin], styled.spin.className),
+    style: styled.spin.style
   }, Array.from(Object.entries(circles)).map(([key, props]) => {
     return React.createElement("circle", {
       ...props,
       key: key
     });
-  }));
+  })), React.createElement("div", {
+    className: (classNames[LoadingClassToken.Content], styled.content.className),
+    style: styled.content.style
+  }, children));
 };
 var Loading$1 = Loading;
 

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

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 type Size = "small" | "medium" | "large";
 /**
  * @author murukal
@@ -12,5 +13,17 @@ export interface LoadingProps {
      * @default "medium"
      */
     size?: Size;
+    /**
+     * @description
+     * overlay shown
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * @description
+     * children
+     * @default void 0
+     */
+    children?: ReactNode;
 }
 export {};

package/dist/components/notification/holder.js

@@ -25,8 +25,8 @@ const styles = {
     $$css: true
   },
   top: {
-    top: "musae-13vifvy",
-    insetInline: "musae-17y0mx6",
+    top: "musae-9oc6z4",
+    insetInline: "musae-l33w4x",
     insetInlineStart: null,
     insetInlineEnd: null,
     left: null,
@@ -35,22 +35,22 @@ const styles = {
     $$css: true
   },
   topRight: {
-    top: "musae-13vifvy",
-    insetInlineEnd: "musae-tijo5x",
+    top: "musae-9oc6z4",
+    insetInlineEnd: "musae-hw0b42",
     left: null,
     right: null,
     $$css: true
   },
   topLeft: {
-    top: "musae-13vifvy",
-    insetInlineStart: "musae-1o0tod",
+    top: "musae-9oc6z4",
+    insetInlineStart: "musae-1at4hj2",
     left: null,
     right: null,
     $$css: true
   },
   bottom: {
-    bottom: "musae-1ey2m1c",
-    insetInline: "musae-17y0mx6",
+    bottom: "musae-1sh2tzk",
+    insetInline: "musae-l33w4x",
     insetInlineStart: null,
     insetInlineEnd: null,
     left: null,
@@ -59,15 +59,15 @@ const styles = {
     $$css: true
   },
   bottomLeft: {
-    bottom: "musae-1ey2m1c",
-    insetInlineStart: "musae-1o0tod",
+    bottom: "musae-1sh2tzk",
+    insetInlineStart: "musae-1at4hj2",
     left: null,
     right: null,
     $$css: true
   },
   bottomRight: {
-    bottom: "musae-1ey2m1c",
-    insetInlineEnd: "musae-tijo5x",
+    bottom: "musae-1sh2tzk",
+    insetInlineEnd: "musae-hw0b42",
     left: null,
     right: null,
     $$css: true

package/dist/components/notification/notification.js

@@ -52,7 +52,7 @@ const styles = {
       transitionDuration: "musae-13dflua",
       transform: "musae-1v0jg1i",
       opacity: "musae-g01cxk",
-      marginTop: "musae-dj266r",
+      marginTop: "musae-1q12cbh",
       display: "musae-rvj5dj",
       gap: "musae-vbka3v",
       rowGap: null,

package/dist/components/popper/dropdown.js

@@ -16,8 +16,8 @@ const styles = {
       zIndex: "musae-1axsr4t",
       position: "musae-10l6tqk",
       backgroundColor: "musae-q1mx2j",
-      top: "musae-13vifvy",
-      insetInlineStart: "musae-1o0tod",
+      top: "musae-9oc6z4",
+      insetInlineStart: "musae-1at4hj2",
       left: null,
       right: null,
       boxShadow: "musae-ezd0au",

package/dist/components/rate/star.js

@@ -31,22 +31,22 @@ const styles = {
       $$css: true
     }
   },
-  leading: {
-    default: props => [{
+  half: {
+    default: {
       position: "musae-10l6tqk",
       width: "musae-1gn8jaj",
       height: "musae-b27hse",
-      insetInlineStart: "musae-1o0tod",
+      insetInlineStart: "musae-1at4hj2",
       left: null,
       right: null,
-      top: "musae-13vifvy",
+      top: "musae-9oc6z4",
       opacity: "musae-g01cxk",
       userSelect: "musae-87ps6o",
       overflow: "musae-b3r6kr",
       overflowX: null,
       overflowY: null,
       $$css: true
-    }, {}],
+    },
     checked: props => [{
       opacity: "musae-1hc1fzr",
       color: "musae-19dipnz",
@@ -55,12 +55,12 @@ const styles = {
       "--color": props.color != null ? props.color : "initial"
     }]
   },
-  trailing: {
+  full: {
     default: {
       userSelect: "musae-87ps6o",
       $$css: true
     },
-    checkd: props => [{
+    checked: props => [{
       color: "musae-19dipnz",
       $$css: true
     }, {
@@ -104,12 +104,10 @@ const Star = ({
     star: _stylex.props(styles.star.default({
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     }), disabled && styles.star.disabled),
-    leading: _stylex.props(styles.leading.default({
-      hoveredColor: theme.colors[ColorToken.Primary]
-    }), isHalf && styles.leading.checked({
+    half: _stylex.props(styles.half.default, isHalf && styles.half.checked({
       color: theme.colors[ColorToken.Primary]
     })),
-    trailing: _stylex.props(styles.trailing.default, isFull && styles.trailing.checkd({
+    full: _stylex.props(styles.full.default, isFull && styles.full.checked({
       color: theme.colors[ColorToken.Primary]
     }))
   };
@@ -117,8 +115,8 @@ const Star = ({
     className: clsx(classNames[RateClassToken.Star], styled.star.className),
     style: styled.star.style
   }, React.createElement("div", {
-    className: clsx(classNames[RateClassToken.Leading], styled.leading.className),
-    style: styled.leading.style,
+    className: clsx(classNames[RateClassToken.Half], styled.half.className),
+    style: styled.half.style,
     ...(!disabled && {
       ...halfHoverProps,
       onClick: half
@@ -126,8 +124,8 @@ const Star = ({
   }, createElement(_Star, {
     size: "large"
   })), React.createElement("div", {
-    className: clsx(classNames[RateClassToken.Trailing], styled.trailing.className),
-    style: styled.trailing.style,
+    className: clsx(classNames[RateClassToken.Full], styled.full.className),
+    style: styled.full.style,
     ...(!disabled && {
       ...fullHoverProps,
       onClick: full

package/dist/components/ripple/hooks.js

@@ -1,18 +1,21 @@
 import { useState, useCallback, useMemo } from 'react';
+import { useIdentity } from '@aiszlab/relax';
 
 function useRipple() {
     const [_ripples, _setRipples] = useState(new Map());
+    const [, unique] = useIdentity();
     const add = useCallback((event) => {
         const trigger = event.currentTarget;
         const size = Math.max(trigger.clientWidth, trigger.clientHeight);
         const { x, y } = trigger.getBoundingClientRect();
         _setRipples((prev) => {
-            return new Map(prev).set(crypto.randomUUID(), {
+            return new Map(prev).set(unique(), {
                 size,
                 x: event.clientX - x - size / 2,
                 y: event.clientY - y - size / 2,
             });
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const clear = useCallback((key) => {
         _setRipples((prev) => {

package/dist/components/switch/switch.js

@@ -192,20 +192,20 @@ const styles = {
       $$css: true
     },
     checked: {
-      marginInlineStart: "musae-1lziwak",
+      marginInlineStart: "musae-1tt3wx9",
       marginLeft: null,
       marginRight: null,
-      marginInlineEnd: "musae-14z9mp",
+      marginInlineEnd: "musae-fbia9g",
       $$css: true
     }
   },
   trailing: {
     default: {
       marginTop: "musae-ncydc0",
-      marginInlineEnd: "musae-14z9mp",
+      marginInlineEnd: "musae-fbia9g",
       marginLeft: null,
       marginRight: null,
-      marginInlineStart: "musae-1lziwak",
+      marginInlineStart: "musae-1tt3wx9",
       $$css: true
     },
     checked: {

package/dist/components/table/body.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTable, styles as styles$1 } from './hooks.js';
+import { useTable } from './context.js';
 import { flexRender } from '@tanstack/react-table';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
@@ -8,6 +8,38 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 
 const styles = {
+  cell: props => [{
+    paddingInline: "musae-iujutg",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: "musae-avjae4",
+    paddingTop: null,
+    paddingBottom: null,
+    borderColor: "musae-eqt46j",
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    borderBlockColor: null,
+    borderTopColor: null,
+    borderBottomColor: null,
+    borderStyle: "musae-1y0btm7",
+    borderInlineStyle: null,
+    borderInlineStartStyle: null,
+    borderLeftStyle: null,
+    borderInlineEndStyle: null,
+    borderRightStyle: null,
+    borderBlockStyle: null,
+    borderTopStyle: null,
+    borderBottomStyle: null,
+    borderBottomWidth: "musae-lntmim",
+    $$css: true
+  }, {
+    "--borderColor": props.borderColor != null ? props.borderColor : "initial"
+  }],
   bordered: {
     borderInline: "musae-10htjfm",
     $$css: true
@@ -20,8 +52,8 @@ const Body = props$1 => {
   } = useTable();
   const theme = useTheme();
   if (!table) return null;
-  const styled = props(bordered && styles.bordered, typography.body.small, styles$1.cell({
-    outlineColor: theme.colors[ColorToken.OutlineVariant]
+  const styled = props(bordered && styles.bordered, typography.body.small, styles.cell({
+    borderColor: theme.colors[ColorToken.OutlineVariant]
   }));
   return React.createElement("tbody", null, table.getRowModel().rows.map(row => React.createElement("tr", {
     key: row.id

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

@@ -2,3 +2,9 @@
 import type { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue<unknown>>;
 export default Context;
+/**
+ * @author murukal
+ * @description
+ * use table context hook
+ */
+export declare const useTable: <T>() => ContextValue<T>;

package/dist/components/table/context.js

@@ -1,7 +1,15 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 const Context = createContext({
     bordered: false,
 });
+/**
+ * @author murukal
+ * @description
+ * use table context hook
+ */
+const useTable = () => {
+    return useContext(Context);
+};
 
-export { Context as default };
+export { Context as default, useTable };

package/dist/components/table/header/cell.d.ts

@@ -0,0 +1,3 @@
+import type { HeaderCellProps } from "../types";
+declare const Cell: ({ sortable, children: _children, value, sortDirections: _sortDirections }: HeaderCellProps) => any;
+export default Cell;

package/dist/components/table/header/cell.js

@@ -0,0 +1,129 @@
+import React, { useContext, useMemo } from 'react';
+import { toFunction, useEvent, isUndefined } from '@aiszlab/relax';
+import _stylex from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../../theme/hooks.js';
+import { ColorToken } from '../../../utils/colors.js';
+import Context from '../context.js';
+import UnfoldMore from '../../icon/icons/navigation/unfold-more.js';
+
+const styles = {
+  cell: {
+    default: {
+      display: "musae-78zum5",
+      justifyContent: "musae-1qughib",
+      alignItems: "musae-6s0dn4",
+      $$css: true
+    },
+    handlers: props => [{
+      display: "musae-3nfvp2",
+      flexDirection: "musae-1q0g3np",
+      gap: "musae-29tp26",
+      rowGap: null,
+      columnGap: null,
+      color: "musae-19dipnz",
+      userSelect: "musae-87ps6o",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }]
+  },
+  sort: {
+    default: {
+      position: "musae-1n2onr6",
+      cursor: "musae-1ypdohk",
+      $$css: true
+    },
+    half: {
+      position: "musae-10l6tqk",
+      top: "musae-9oc6z4",
+      insetInlineStart: "musae-1at4hj2",
+      left: null,
+      right: null,
+      height: "musae-1cj5796",
+      overflow: "musae-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    },
+    checked: props => [{
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }]
+  }
+};
+const Cell = ({
+  sortable = false,
+  children: _children,
+  value,
+  sortDirections: _sortDirections
+}) => {
+  const {
+    sortDescriptor,
+    onSortChange
+  } = useContext(Context);
+  const children = toFunction(_children)();
+  const theme = useTheme();
+  // convert sort directions to usable
+  const sortDirections = useMemo(() => {
+    return _sortDirections.reduce((prev, item, index) => {
+      return prev.set(item, _sortDirections[index + 1] ?? null);
+    }, new Map());
+  }, [_sortDirections]);
+  const sort = useMemo(() => {
+    if (sortDescriptor?.key === value) {
+      return sortDescriptor.direction;
+    }
+    return null;
+  }, [sortDescriptor, value]);
+  // sort handler
+  const onSort = useEvent(() => {
+    const _direction = sortDirections.get(sort);
+    const __direction = isUndefined(_direction) ? "ascending" : _direction;
+    onSortChange?.({
+      key: value,
+      direction: __direction
+    });
+  });
+  // only children, render directly
+  if (!sortable) {
+    return children;
+  }
+  const styled = {
+    cell: _stylex.props(styles.cell.default),
+    handlers: _stylex.props(styles.cell.handlers({
+      color: theme.colors[ColorToken.SurfaceContainerHighest]
+    })),
+    sort: _stylex.props(styles.sort.default),
+    fullSort: _stylex.props(sort === "descending" && styles.sort.checked({
+      color: theme.colors[ColorToken.Primary]
+    })),
+    halfSort: _stylex.props(styles.sort.half, sort === "ascending" && styles.sort.checked({
+      color: theme.colors[ColorToken.Primary]
+    }))
+  };
+  return React.createElement("div", {
+    className: styled.cell.className,
+    style: styled.cell.style
+  }, children, React.createElement("span", {
+    className: styled.handlers.className,
+    style: styled.handlers.style
+  }, React.createElement("span", {
+    className: styled.sort.className,
+    style: styled.sort.style,
+    onClick: onSort
+  }, React.createElement("div", {
+    className: styled.fullSort.className,
+    style: styled.fullSort.style
+  }, React.createElement(UnfoldMore, {
+    size: "medium"
+  })), !!sort && React.createElement("div", {
+    className: styled.halfSort.className,
+    style: styled.halfSort.style
+  }, React.createElement(UnfoldMore, {
+    size: "medium"
+  })))));
+};
+
+export { Cell as default };

package/dist/components/table/{header.d.ts → header/header.d.ts}

@@ -1,4 +1,4 @@
 import React from "react";
-import { HeaderProps } from "./types";
+import type { HeaderProps } from "../types";
 declare const Header: <T>(props: HeaderProps) => React.JSX.Element | null;
 export default Header;