musae 0.1.42 → 0.1.44

package/dist/components/avatar/__test__/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/avatar/{avatar.mjs → avatar.js}

@@ -1,8 +1,11 @@
 import React, { useContext } from 'react';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { Context } from './context.mjs';
-import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
+import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { Context } from './context.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
 
 const styles = {
   avatar: {
@@ -52,9 +55,9 @@ const styles = {
     $$css: true
   },
   overlapping: props => [{
-    ":not(:first-child)_marginLeft": "musae-9dl7ob",
-    ":not(:first-child)_marginInlineStart": null,
-    ":not(:first-child)_marginInlineEnd": null,
+    ":not(:first-child)_marginInlineStart": "musae-1i5rff9",
+    ":not(:first-child)_marginLeft": null,
+    ":not(:first-child)_marginRight": null,
     borderColor: "musae-eqt46j",
     borderInlineColor: null,
     borderInlineStartColor: null,
@@ -118,6 +121,7 @@ const Avatar = ({
   const isInGroup = !!group;
   const size = group?.size ?? props$1.size ?? "medium";
   const shape = group?.shape ?? props$1.shape ?? "circular";
+  const classNames = useClassNames(ComponentToken.Avatar);
   const styled = {
     avatar: props(styles.avatar, styles[size], styles[shape], isInGroup && styles.overlapping({
       outlineColor: theme.colors[ColorToken.OnPrimary]
@@ -127,13 +131,13 @@ const Avatar = ({
     }
   };
   return React.createElement("span", {
-    ...styled.avatar
+    className: clsx(classNames[AvatarClassToken.Avatar], styled.avatar.className),
+    style: styled.avatar.style
   }, React.createElement("img", {
     ...styled.image,
     src: src,
     alt: alt
   }));
 };
-var _Avatar = Avatar;
 
-export { _Avatar as default };
+export { Avatar as default };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ContextValue } from "./types";
+import { type ContextValue } from "./types";
 /**
  * @description
  * context

package/dist/components/avatar/group.d.ts

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

package/dist/components/avatar/group.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Context } from './context.js';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, AvatarClassToken } from '../../utils/class-name.js';
+
+const Group = ({
+  children,
+  shape = "circular",
+  size = "medium"
+}) => {
+  const styled = {
+    className: "musae-3nfvp2"
+  };
+  const classNames = useClassNames(ComponentToken.Avatar);
+  return React.createElement(Context.Provider, {
+    value: {
+      shape,
+      size
+    }
+  }, React.createElement("div", {
+    className: (classNames[AvatarClassToken.Group], styled.className),
+    style: styled.style
+  }, children));
+};
+
+export { Group as default };

package/dist/components/avatar/index.js

@@ -0,0 +1,8 @@
+import Avatar$1 from './avatar.js';
+import Group from './group.js';
+
+const Avatar = Object.assign(Avatar$1, {
+    Group,
+});
+
+export { Avatar };

package/dist/components/breadcrumb/__test__/index.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { BreadcrumbProps } from "./types";
-declare const Breadcrumb: (props: BreadcrumbProps) => React.JSX.Element | null;
+declare const Breadcrumb: ({ items, className, separator, style }: BreadcrumbProps) => React.JSX.Element | null;
 export default Breadcrumb;

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { typography } from '../theme/theme.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, BreadcrumbClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+import Item from './item.js';
+
+const styles = {
+  breadcrumb: props => [{
+    color: "musae-19dipnz",
+    $$css: true
+  }, {
+    "--color": props.color != null ? props.color : "initial"
+  }]
+};
+const Breadcrumb = ({
+  items = [],
+  className,
+  separator,
+  style
+}) => {
+  const theme = useTheme();
+  const classNames = useClassNames(ComponentToken.Breadcrumb);
+  /// there is no need to render the breadcrumb when there is no items
+  if (items.length === 0) {
+    return null;
+  }
+  const styled = {
+    breadcrumb: props(typography.label.large, styles.breadcrumb({
+      color: theme.colors[ColorToken.OnSurfaceVariant]
+    })),
+    navigations: {
+      className: "musae-e8uvvx musae-78zum5 musae-1a02dak"
+    }
+  };
+  return React.createElement("nav", {
+    className: clsx(classNames[BreadcrumbClassToken.Breadcrumb], className, styled.breadcrumb.className),
+    style: {
+      ...styled.breadcrumb.style,
+      ...style
+    }
+  }, React.createElement("ol", {
+    ...styled.navigations
+  }, items.map((item, index) => {
+    return React.createElement(Item, {
+      key: index,
+      label: item.label,
+      max: index === items.length - 1,
+      href: item.href,
+      separator: separator
+    });
+  })));
+};
+var Breadcrumb$1 = Breadcrumb;
+
+export { Breadcrumb$1 as default };

package/dist/components/breadcrumb/item.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type BreadcrumbItemProps } from "./types";
+declare const Item: ({ href, label, max, separator }: BreadcrumbItemProps) => React.JSX.Element;
+export default Item;

package/dist/components/breadcrumb/item.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, BreadcrumbClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+
+const styles = {
+  navigation: {
+    default: props => [{
+      ":last-of-type_color": "musae-1befqep",
+      $$css: true
+    }, {
+      "--h3adkr": props.color != null ? props.color : "initial"
+    }],
+    link: props => [{
+      paddingInline: "musae-381k9q",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      borderRadius: "musae-1gg5qfe",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      backgroundColor: "musae-rl4t6d",
+      color: "musae-vm0q45",
+      transitionProperty: "musae-fagghw",
+      transitionDuration: "musae-13dflua",
+      $$css: true
+    }, {
+      "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial",
+      "--1113oo7": props.hoveredColor != null ? props.hoveredColor : "initial"
+    }]
+  },
+  separator: {
+    default: {
+      marginInline: "musae-19s5fsp",
+      marginInlineStart: null,
+      marginLeft: null,
+      marginInlineEnd: null,
+      marginRight: null,
+      $$css: true
+    }
+  }
+};
+const Item = ({
+  href,
+  label,
+  max,
+  separator
+}) => {
+  const theme = useTheme();
+  const isLink = !!href;
+  const classNames = useClassNames(ComponentToken.Breadcrumb);
+  const styled = {
+    navigation: _stylex.props(styles.navigation.default({
+      color: theme.colors[ColorToken.OnSurface]
+    }), isLink && styles.navigation.link({
+      hoveredBackgroundColor: theme.colors[ColorToken.Surface],
+      hoveredColor: theme.colors[ColorToken.OnSurface]
+    })),
+    separator: _stylex.props(styles.separator.default)
+  };
+  return React.createElement(React.Fragment, null, React.createElement("li", {
+    className: classNames[BreadcrumbClassToken.Item]
+  }, isLink && React.createElement("a", {
+    href: href
+  }, label), !isLink && label), !max && React.createElement("li", {
+    role: "separator",
+    className: clsx(classNames[BreadcrumbClassToken.Separator], styled.separator.className),
+    style: styled.separator.style
+  }, separator ?? "/"));
+};
+
+export { Item as default };

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

@@ -1,38 +1,51 @@
 import type { ReactNode } from "react";
+import { ComponentProps } from "../../types/element";
+/**
+ * @description
+ * item
+ */
+export type BreadcrumbItem = {
+    /**
+     * @description
+     * item display label
+     */
+    label: ReactNode;
+    /**
+     * @description
+     * item href link
+     * if link is not provided, item will display as a label
+     */
+    href?: string;
+};
 /**
- * @author murukal
- *
  * @description
  * breadcrumb props
  */
-export interface BreadcrumbProps {
+export type BreadcrumbProps = ComponentProps & {
     /**
      * @description
      * breadcrumb items
      */
-    items: BreadcrumbItemProps[];
+    items: BreadcrumbItem[];
     /**
      * @description
      * separator
      */
     separator?: ReactNode;
-}
+};
 /**
- * @author murukal
- *
  * @description
- * item props
+ * breadcrumb item props
  */
-export interface BreadcrumbItemProps {
+export type BreadcrumbItemProps = BreadcrumbItem & {
     /**
      * @description
-     * item display label
+     * max
      */
-    label: ReactNode;
+    max: boolean;
     /**
      * @description
-     * item href link
-     * if link is not provided, item will display as a label
+     * separator
      */
-    href?: string;
-}
+    separator?: ReactNode;
+};

package/dist/components/button/{button.mjs → button.js}

@@ -1,14 +1,14 @@
 import React, { forwardRef } from 'react';
-import { useClassNames } from '../config/hooks.mjs';
-import { ComponentToken, ButtonClassToken } from '../../utils/class-name.mjs';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, ButtonClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { useTheme } from '../theme/hooks.mjs';
-import { useButton } from './hooks.mjs';
-import Ripple from '../ripple/ripple.mjs';
-import { typography } from '../theme/theme.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
-import { layer } from '../../utils/layer.mjs';
+import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../theme/hooks.js';
+import { useButton } from './hooks.js';
+import Ripple from '../ripple/ripple.js';
+import { typography } from '../theme/theme.js';
+import { ColorToken } from '../../utils/colors.js';
+import { layer } from '../../utils/layer.js';
 
 const styles = {
   button: {
@@ -22,12 +22,8 @@ const styles = {
     rowGap: null,
     columnGap: null,
     whiteSpace: "musae-uxw1ft",
-    transition: "musae-2ortz2",
-    transitionBehavior: null,
-    transitionDelay: null,
-    transitionDuration: null,
-    transitionProperty: null,
-    transitionTimingFunction: null,
+    transitionProperty: "musae-fagghw",
+    transitionDuration: "musae-1d8287x",
     willChange: "musae-19v51jg",
     $$css: true
   },
@@ -195,12 +191,6 @@ const styles = {
     color: "musae-19dipnz",
     cursor: "musae-1h6gzvc",
     boxShadow: null,
-    $$css: true
-  }, {
-    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
-    "--color": props.color != null ? props.color : "initial"
-  }],
-  disabledOutline: props => [{
     borderColor: "musae-eqt46j",
     borderInlineColor: null,
     borderInlineStartColor: null,
@@ -212,6 +202,8 @@ const styles = {
     borderBottomColor: null,
     $$css: true
   }, {
+    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+    "--color": props.color != null ? props.color : "initial",
     "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
   }]
 };
@@ -266,9 +258,8 @@ const Button = forwardRef(({
     // disabled
     disabled && styles.disabled({
       backgroundColor: variant === "filled" ? layer(theme.colors[ColorToken.OnSurface], "medium") : "transparent",
-      color: layer(theme.colors[ColorToken.OnSurface], "thicker")
-    }), disabled && variant === "outlined" && styles.disabledOutline({
-      outlineColor: layer(theme.colors[ColorToken.OnSurface], "thicker")
+      color: layer(theme.colors[ColorToken.OnSurface], "thicker"),
+      outlineColor: variant === "outlined" ? layer(theme.colors[ColorToken.OnSurface], "thicker") : null
     }))
   };
   return React.createElement("button", {

package/dist/components/button/{hooks.mjs → hooks.js}

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { chain } from '@aiszlab/relax';
-import { useRipple } from '../ripple/hooks.mjs';
+import { useRipple } from '../ripple/hooks.js';
 
 /**
  * @description

package/dist/components/calendar/{calendar.mjs → calendar.js}

@@ -1,15 +1,15 @@
 import React from 'react';
-import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.mjs';
-import { useClassNames } from '../config/hooks.mjs';
-import { ComponentToken, CalendarClassToken } from '../../utils/class-name.mjs';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { typography } from '../theme/theme.mjs';
+import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.js';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
+import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
-import Button from '../button/button.mjs';
-import KeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.mjs';
-import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.mjs';
-import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.mjs';
-import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.mjs';
+import Button from '../button/button.js';
+import KeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.js';
+import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.js';
+import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.js';
+import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
 
 const styles = {
   header: {

package/dist/components/calendar/{hooks.mjs → hooks.js}

@@ -1,15 +1,15 @@
 import dayjs from 'dayjs';
 import React, { useMemo, useCallback } from 'react';
-import { useClassNames } from '../config/hooks.mjs';
-import { ComponentToken, CalendarClassToken } from '../../utils/class-name.mjs';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, CalendarClassToken } from '../../utils/class-name.js';
 import { isArray, useControlledState } from '@aiszlab/relax';
-import { Timespan } from '../../utils/timespan.mjs';
+import { Timespan } from '../../utils/timespan.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { typography } from '../theme/theme.mjs';
-import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
-import Button from '../button/button.mjs';
+import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { typography } from '../theme/theme.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import Button from '../button/button.js';
 
 const styles = {
   cell: {
@@ -27,7 +27,7 @@ const styles = {
     "::before_content": "musae-1cpjm7i",
     "::before_position": "musae-1hmns74",
     "::before_backgroundColor": "musae-rr6jkh",
-    "::before_zIndex": "musae-12maryy",
+    "::before_zIndex": "musae-1ly6cpr",
     "::before_height": "musae-58076a",
     $$css: true
   }, {

package/dist/components/cascader/{cascader.mjs → cascader.js}

@@ -1,10 +1,10 @@
 import React, { useRef, useCallback, useMemo } from 'react';
-import Picker from '../picker/picker.mjs';
-import Tag from '../tag/tag.mjs';
-import { useOptions, useValue } from './hooks.mjs';
-import Menu from '../menu/menu.mjs';
-import { useClassNames } from '../config/hooks.mjs';
-import { ComponentToken, CascaderClassToken } from '../../utils/class-name.mjs';
+import Picker from '../picker/picker.js';
+import Tag from '../tag/tag.js';
+import { useOptions, useValue } from './hooks.js';
+import Menu from '../menu/menu.js';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, CascaderClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 
 const Cascader = ({

package/dist/components/cascader/{hooks.mjs → hooks.js}

@@ -1,6 +1,6 @@
 import { useMemo, useCallback, useState } from 'react';
 import { useControlledState } from '@aiszlab/relax';
-import { toValues, toKey, toMenuItem, toKeys, readOptions } from './utils.mjs';
+import { toValues, toKey, toMenuItem, toKeys, readOptions } from './utils.js';
 
 /**
  * @description

package/dist/components/checkbox/{checkbox.mjs → checkbox.js}

@@ -1,13 +1,13 @@
 import React, { useContext, useMemo, useCallback } from 'react';
 import { useControlledState } from '@aiszlab/relax';
-import Context from './context.mjs';
-import { useClassNames } from '../config/hooks.mjs';
-import { ComponentToken, CheckboxClassToken } from '../../utils/class-name.mjs';
+import Context from './context.js';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, CheckboxClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
-import { typography } from '../theme/theme.mjs';
+import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import { typography } from '../theme/theme.js';
 
 const styles = {
   trigger: props => [{
@@ -191,6 +191,5 @@ const Checkbox = ({
     style: styled.label.style
   }, children));
 };
-var _Checkbox = Checkbox;
 
-export { _Checkbox as default };
+export { Checkbox as default };

package/dist/components/{radio/context.mjs → checkbox/context.js}

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

package/dist/components/checkbox/{group.mjs → group.js}

@@ -1,4 +1,4 @@
-import Context from './context.mjs';
+import Context from './context.js';
 import React, { useMemo, useCallback } from 'react';
 import { useControlledState } from '@aiszlab/relax';
 
@@ -29,6 +29,5 @@ const Group = (props) => {
     }, [value, change]);
     return React.createElement(Context.Provider, { value: _contextValue }, props.children);
 };
-var Group$1 = Group;
 
-export { Group$1 as default };
+export { Group as default };

package/dist/components/checkbox/index.js

@@ -0,0 +1,8 @@
+import Checkbox$1 from './checkbox.js';
+import Group from './group.js';
+
+const Checkbox = Object.assign(Checkbox$1, {
+    Group,
+});
+
+export { Checkbox };

package/dist/components/clock/{clock.mjs → clock.js}

@@ -1,10 +1,10 @@
 import React from 'react';
-import { useClassNames } from '../config/hooks.mjs';
-import { ComponentToken, ClockClassToken } from '../../utils/class-name.mjs';
-import { TimeUnit } from './types.mjs';
-import Column from './column.mjs';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, ClockClassToken } from '../../utils/class-name.js';
+import { TimeUnit } from './types.js';
+import Column from './column.js';
 import clsx from 'clsx';
-import Divider from '../divider/divider.mjs';
+import Divider from '../divider/divider.js';
 
 const Clock = ({
   value,

package/dist/components/clock/{column.mjs → column.js}

@@ -1,12 +1,12 @@
 import React, { forwardRef, useRef, useCallback, useImperativeHandle, useEffect, useMemo } from 'react';
-import { useTimeUnit } from './hooks.mjs';
-import Menu from '../menu/menu.mjs';
-import { useClassNames } from '../config/hooks.mjs';
-import { ComponentToken, ClockClassToken } from '../../utils/class-name.mjs';
+import { useTimeUnit } from './hooks.js';
+import Menu from '../menu/menu.js';
+import { useClassNames } from '../config/hooks.js';
+import { ComponentToken, ClockClassToken } from '../../utils/class-name.js';
 import { isVoid } from '@aiszlab/relax';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
+import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 
 const styles = {
@@ -79,6 +79,5 @@ const Column = forwardRef(({
     onClick: onClick
   });
 });
-var Column$1 = Column;
 
-export { Column$1 as default };
+export { Column as default };

package/dist/components/clock/{hooks.mjs → hooks.js}

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TimeUnit } from './types.mjs';
+import { TimeUnit } from './types.js';
 
 const useTimeUnit = (unit) => {
     const units = useMemo(() => {

package/dist/components/config/{context.mjs → context.js}

@@ -1,10 +1,9 @@
 import { createContext } from 'react';
-import { DEFAULT_CLASS_NAMES } from '../../utils/class-name.mjs';
+import { DEFAULT_CLASS_NAMES } from '../../utils/class-name.js';
 
 const Context = createContext({
     messager: null,
     classNames: DEFAULT_CLASS_NAMES,
 });
-var Context$1 = Context;
 
-export { Context$1 as default };
+export { Context as default };