musae 0.2.8 → 0.2.10

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BadgeProps } from "./types";
+declare const Badge: ({ className, style, children, content, invisible, placement }: BadgeProps) => React.JSX.Element;
+export default Badge;

package/dist/components/badge/badge.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, BadgeClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import clsx from 'clsx';
+import { typography } from '../theme/theme.js';
+import { sizes } from '../theme/tokens.stylex.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import { isVoid } from '@aiszlab/relax';
+
+const styles = {
+  badge: {
+    default: {
+      position: "musae-1n2onr6",
+      display: "musae-3nfvp2",
+      $$css: true
+    }
+  },
+  tail: {
+    default: props => [{
+      position: "musae-10l6tqk",
+      borderRadius: "musae-iipnba",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      minWidth: "musae-70jws7",
+      textAlign: "musae-2b8uid",
+      boxShadow: "musae-igitpm",
+      backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--boxShadow": `0 0 0 ${sizes.smallest} ${props.color}` != null ? `0 0 0 ${sizes.smallest} ${props.color}` : "initial",
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }],
+    dot: {
+      minWidth: null,
+      width: "musae-2jq81",
+      height: "musae-1v3ox18",
+      $$css: true
+    },
+    invisible: {
+      display: "musae-1s85apg",
+      $$css: true
+    },
+    "top-right": {
+      top: "musae-13vifvy",
+      right: "musae-3m8u43",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musae-rycbv3",
+      $$css: true
+    },
+    "top-left": {
+      top: "musae-13vifvy",
+      left: "musae-u96u03",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musae-1i3z1r0",
+      $$css: true
+    },
+    "bottom-right": {
+      bottom: "musae-1ey2m1c",
+      right: "musae-3m8u43",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musae-1vfo23u",
+      $$css: true
+    },
+    "bottom-left": {
+      bottom: "musae-1ey2m1c",
+      left: "musae-u96u03",
+      insetInlineStart: null,
+      insetInlineEnd: null,
+      transform: "musae-itovws",
+      $$css: true
+    }
+  }
+};
+const Badge = ({
+  className,
+  style,
+  children,
+  content,
+  invisible = false,
+  placement = "top-right"
+}) => {
+  const classNames = useClassNames(ComponentToken.Badge);
+  const theme = useTheme();
+  const isDot = isVoid(content);
+  const styled = {
+    badge: _stylex.props(styles.badge.default),
+    tail: _stylex.props(styles.tail.default({
+      backgroundColor: theme.colors[ColorToken.Primary],
+      color: theme.colors[ColorToken.OnPrimary]
+    }), isDot && styles.tail.dot, typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
+  };
+  return React.createElement("span", {
+    className: clsx(classNames[BadgeClassToken.Badge], className, styled.badge.className),
+    style: {
+      ...styled.badge.style,
+      ...style
+    }
+  }, children, React.createElement("span", {
+    className: clsx(classNames[BadgeClassToken.Tail], styled.tail.className),
+    style: styled.tail.style
+  }, content));
+};
+var Badge$1 = Badge;
+
+export { Badge$1 as default };

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

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

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

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { ComponentProps } from "../../types/element";
+type Placement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/**
+ * @description
+ * badge props
+ */
+export type BadgeProps = ComponentProps & {
+    /**
+     * @description
+     * children
+     * @requires
+     */
+    children: ReactNode;
+    /**
+     * @description
+     * content
+     * @default void 0
+     */
+    content?: ReactNode;
+    /**
+     * @description
+     * invisible
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * @description
+     * placement
+     * @default "top-right"
+     */
+    placement?: Placement;
+};
+export {};

package/dist/components/checkbox/group.js

@@ -19,7 +19,7 @@ const Group = ({ value: controlledValue, children, onChange, disabled = false })
         const _checkedKeys = Array.from(checkedKeys);
         onChange?.(_checkedKeys);
         setValue(_checkedKeys);
-    }, [setValue, value]);
+    }, [onChange, setValue, value]);
     // context value
     const contextValue = useMemo(() => {
         return {

package/dist/components/clock/clock.js

@@ -31,7 +31,8 @@ const Clock = ({
         }));
       }
     }), index === columns.length - 1 ? null : React.createElement(Divider, {
-      type: "vertical"
+      type: "vertical",
+      key: `${unit}-divider`
     })];
   }));
 };

package/dist/components/dialog/dialog.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { DialogProps } from "./types";
-declare const Dialog: ({ open, dismissable, ...props }: DialogProps) => React.JSX.Element;
+declare const Dialog: ({ open, closable, ...props }: DialogProps) => React.JSX.Element;
 export default Dialog;

package/dist/components/dialog/dialog.js

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import Popup from './popup.js';
 import { useBoolean } from '@aiszlab/relax';
 
-const Dialog = ({ open, dismissable = true, ...props }) => {
+const Dialog = ({ open, closable = true, ...props }) => {
     /// `Portal` should disappear after `Dialog` disappear completely
     const [_isVisible, { turnOn, turnOff }] = useBoolean(false);
     useEffect(() => {
@@ -13,7 +13,7 @@ const Dialog = ({ open, dismissable = true, ...props }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     return (React.createElement(Portal, { open: open || _isVisible, lockable: true },
-        React.createElement(Popup, { ...props, dismissable: true, open: open, onClosed: turnOff })));
+        React.createElement(Popup, { ...props, closable: closable, open: open, onClosed: turnOff })));
 };
 var Dialog$1 = Dialog;
 

package/dist/components/dialog/popup.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PopupProps } from "./types";
-declare const Popup: ({ onClose, open, dismissable, onClosed, ...props }: PopupProps) => React.JSX.Element;
+declare const Popup: ({ onClose, open, closable, onClosed, ...props }: PopupProps) => React.JSX.Element;
 export default Popup;

package/dist/components/dialog/popup.js

@@ -8,8 +8,8 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { typography } from '../theme/theme.js';
 import clsx from 'clsx';
-import { useDismissable } from '../../hooks/use-dismissable.js';
-import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.59_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { useClosable } from '../../hooks/use-closable.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.64_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
   header: {
@@ -88,7 +88,7 @@ const styles = {
 const Popup = ({
   onClose,
   open,
-  dismissable,
+  closable,
   onClosed,
   ...props$1
 }) => {
@@ -103,8 +103,8 @@ const Popup = ({
     closer,
     onKeyDown,
     onOverlayClick
-  } = useDismissable({
-    dismissable,
+  } = useClosable({
+    closable,
     onClose
   });
   useEffect(() => {

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

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
-import type { Dismissable } from "../../hooks/use-dismissable";
+import type { Closable } from "../../hooks/use-closable";
 import { RequiredIn } from "@aiszlab/relax/types";
 /**
  * @description
@@ -29,7 +29,7 @@ export interface DialogProps {
      * Whether the dialog can be closed by clicking on the overlay or pressing the Esc key.
      * @default true
      */
-    dismissable?: boolean | Dismissable[];
+    closable?: boolean | Closable[];
     /**
      * @description
      * title
@@ -67,7 +67,7 @@ export interface DialogProps {
  * @description
  * popup
  */
-export type PopupProps = RequiredIn<DialogProps, "dismissable"> & {
+export type PopupProps = RequiredIn<DialogProps, "closable"> & {
     /**
      * @description
      * callback will be toggled after close animation end

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { DrawerProps } from "./types";
-declare const Drawer: ({ open, size, dismissable, placement, ...props }: DrawerProps) => React.JSX.Element;
+declare const Drawer: ({ open, size, closable, placement, ...props }: DrawerProps) => React.JSX.Element;
 export default Drawer;

package/dist/components/drawer/drawer.js

@@ -3,7 +3,7 @@ import Portal from '../portal/portal.js';
 import Popup from './popup.js';
 import { useBoolean } from '@aiszlab/relax';
 
-const Drawer = ({ open, size = 400, dismissable = true, placement = "right", ...props }) => {
+const Drawer = ({ open, size = 400, closable = true, placement = "right", ...props }) => {
     /// `Portal` should disappear after `Dialog` disappear completely
     const [_isVisible, { turnOn, turnOff }] = useBoolean(false);
     useEffect(() => {
@@ -13,7 +13,7 @@ const Drawer = ({ open, size = 400, dismissable = true, placement = "right", ...
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     return (React.createElement(Portal, { open: open || _isVisible, lockable: true },
-        React.createElement(Popup, { ...props, onClosed: turnOff, size: size, open: open, dismissable: dismissable, placement: placement })));
+        React.createElement(Popup, { ...props, onClosed: turnOff, size: size, open: open, closable: closable, placement: placement })));
 };
 var Drawer$1 = Drawer;
 

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PopupProps } from "./types";
-declare const Popup: ({ open, onClose, placement, dismissable, onClosed, size, ...props }: PopupProps) => React.JSX.Element;
+declare const Popup: ({ open, onClose, placement, closable, onClosed, size, ...props }: PopupProps) => React.JSX.Element;
 export default Popup;

package/dist/components/drawer/popup.js

@@ -8,8 +8,8 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 import { typography } from '../theme/theme.js';
-import { useDismissable } from '../../hooks/use-dismissable.js';
-import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.59_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
+import { useClosable } from '../../hooks/use-closable.js';
+import { contains } from '../../node_modules/.pnpm/@aiszlab_relax@1.2.64_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@aiszlab/relax/dist/dom/contains.js';
 
 const styles = {
   popup: {
@@ -137,7 +137,7 @@ const Popup = ({
   open,
   onClose,
   placement,
-  dismissable,
+  closable,
   onClosed,
   size,
   ...props$1
@@ -153,8 +153,8 @@ const Popup = ({
     closer,
     onKeyDown,
     onOverlayClick
-  } = useDismissable({
-    dismissable,
+  } = useClosable({
+    closable,
     onClose
   });
   useEffect(() => {

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { Dismissable } from "../../hooks/use-dismissable";
+import type { Closable } from "../../hooks/use-closable";
 export type Placement = "right" | "left" | "top" | "bottom";
 /**
  * @description
@@ -35,7 +35,7 @@ export interface DrawerProps {
      * Whether the drawer can be closed by clicking on the overlay or pressing the Esc key.
      * @default true
      */
-    dismissable?: boolean | Dismissable[];
+    closable?: boolean | Closable[];
     /**
      * @description
      * size
@@ -58,7 +58,7 @@ export interface DrawerProps {
  */
 export type PopupProps = DrawerProps & {
     size: number;
-    dismissable: boolean | Dismissable[];
+    closable: boolean | Closable[];
     placement: Placement;
     /**
      * @description

package/dist/components/highlight/highlight.d.ts

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

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * @description
+ * highlight props
+ */
+export type HighlightProps = {
+    /**
+     * @description
+     * children
+     */
+    children: string;
+};

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

@@ -73,7 +73,7 @@ const Preview = forwardRef(({
     open: true,
     onClose: onClose,
     footer: false,
-    dismissable: ["esc"],
+    closable: ["esc"],
     styles: {
       panel: {
         backgroundColor: "transparent",

package/dist/components/notification/notification.js

@@ -174,10 +174,22 @@ const Notification = ({
   const classNames = useClassNames(ComponentToken.Notification);
   // after duration, `Notification` will auto destroy
   useTimeout(async () => {
-    await animate(scope.current, {
-      opacity: 0,
-      marginTop: scope.current.getBoundingClientRect().height * -1
-    });
+    switch (placement) {
+      case "bottom":
+      case "bottomLeft":
+      case "bottomRight":
+        await animate(scope.current, {
+          opacity: 0,
+          marginBottom: (scope.current.getBoundingClientRect().height + 12) * -1
+        });
+        break;
+      default:
+        await animate(scope.current, {
+          opacity: 0,
+          marginTop: (scope.current.getBoundingClientRect().height + 12) * -1
+        });
+        break;
+    }
     onClose?.();
   }, duration);
   const styled = {

package/dist/components/otp-input/otp-input.js

@@ -20,12 +20,12 @@ const OtpInput = ({
     length
   }).fill(null));
   const [focusedAt, setFocusedAt] = useState(0);
-  const refocus = useEvent(foucsAt => {
-    const _foucsAt = clamp(foucsAt, 0, length - 1);
-    // handle input
-    inputRefs.current[_foucsAt]?.focus?.();
-    inputRefs.current[_foucsAt]?.select?.();
-    setFocusedAt(_foucsAt);
+  const refocus = useEvent(_foucsAt => {
+    const foucsAt = clamp(_foucsAt, 0, length - 1);
+    // handle input, only select when prev input
+    inputRefs.current[foucsAt]?.focus?.();
+    _foucsAt < length && inputRefs.current[foucsAt]?.select?.();
+    setFocusedAt(foucsAt);
   });
   const changeValue = useEvent(value => {
     _change(focusedAt, value);

package/dist/components/picker/picker.js

@@ -1,7 +1,6 @@
 import React, { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
 import Popper from '../popper/popper.js';
-import { useBoolean, chain, useFocus } from '@aiszlab/relax';
-import { useEvents } from './hooks.js';
+import { useBoolean, useEvent, useFocus } from '@aiszlab/relax';
 import { ComponentToken, PickerClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -42,7 +41,6 @@ const Picker = forwardRef(({
   const classNames = useClassNames(ComponentToken.Picker);
   const theme = useTheme();
   const pickableRef = useRef(null);
-  const onDropdownClick = useCallback(e => e.preventDefault(), []);
   const getDropdownWidth = useCallback(() => {
     if (!popupWidth) return void 0;
     if (!trigger.current) return void 0;
@@ -51,17 +49,19 @@ const Picker = forwardRef(({
   useImperativeHandle(ref, () => ({
     close
   }));
-  /// events
-  const {
-    blur,
-    click
-  } = useEvents({
-    onBlur: close,
-    onClick: chain(onClick, toggle)
+  const click = useEvent(event => {
+    event.stopPropagation();
+    toggle();
+    onClick?.(event);
+  });
+  const onBlur = useEvent(e => {
+    e.stopPropagation();
+    close();
   });
   const [isFocused, focusProps] = useFocus({
-    onBlur: blur
+    onBlur
   });
+  const onDropdownClick = useCallback(e => e.preventDefault(), []);
   const styled = {
     picker: props(typography.body.medium, styles$1.wrapper({
       outlineColor: theme.colors[ColorToken.Outline]
@@ -94,11 +94,11 @@ const Picker = forwardRef(({
     trigger: trigger.current,
     open: isOpen,
     className: classNames[PickerClassToken.Dropdown],
-    // click on popper, keep select focused
-    onMouseDown: onDropdownClick,
     onEntered: onPopperEntered,
     onExit: onPopperExite,
-    onExited: onPopperExited
+    onExited: onPopperExited,
+    // click on popper, keep select focused
+    onMouseDown: onDropdownClick
   }, React.createElement("div", {
     ref: pickableRef,
     className: clsx(pickableClassName, styled.pickable.className),

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

@@ -35,7 +35,7 @@ export interface PickerProps extends ComponentProps {
      * @description
      * click handler
      */
-    onClick?: MouseEventHandler<HTMLDivElement>;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
     /**
      * @description
      * pickable

package/dist/components/popconfirm/popconfirm.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PopconfirmProps, ChildProps } from "./types";
+declare const Popconfirm: <P extends ChildProps<T>, T extends HTMLElement>({ description, ...props }: PopconfirmProps<P, T>) => React.JSX.Element;
+export default Popconfirm;

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

@@ -0,0 +1,9 @@
+import type { DOMAttributes, RefAttributes } from "react";
+import type { PopoverProps } from "../popover";
+import { ComponentProps } from "../../types/element";
+export type ChildProps<T> = Pick<DOMAttributes<T>, "onClick"> & RefAttributes<T>;
+/**
+ * @description
+ * popconfirm props
+ */
+export type PopconfirmProps<P extends ChildProps<T>, T extends HTMLElement> = Pick<PopoverProps<P, T>, "children" | "placement" | "title" | "description"> & ComponentProps;

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

@@ -1,2 +1,4 @@
 import Popover from "./popover";
+import type { PopoverProps } from "./types";
 export { Popover };
+export type { PopoverProps };

package/dist/components/popover/popover.js

@@ -1,4 +1,4 @@
-import { useBoolean, toArray, useRefs, useEvent, useHover, chain, useFocus } from '@aiszlab/relax';
+import { useBoolean, toArray, useRefs, useEvent, useHover, chain, useFocus, useClickAway } from '@aiszlab/relax';
 import React, { useRef, useMemo, cloneElement } from 'react';
 import Popper from '../popper/popper.js';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
@@ -31,21 +31,24 @@ const Popover = ({
   const _ref = useRef(null);
   const [_isOpen, {
     toggle,
-    turnOn
+    turnOn,
+    turnOff
   }] = useBoolean(false);
   const triggerBy = useMemo(() => new Set(toArray(_triggerBy)), [_triggerBy]);
   const classNames = useClassNames(ComponentToken.Popover);
   const childRef = useRefs(_ref, _children.props.ref);
-  const click = useEvent(e => {
-    toggle();
+  const popperRef = useRef(null);
+  const onClick = useEvent(e => {
     e.stopPropagation();
+    toggle();
   });
-  const contextMenu = useEvent(() => {
+  const onContextMenu = useEvent(e => {
+    e.preventDefault();
     turnOn();
   });
   const [isHovered, hoverProps] = useHover({
-    onEnter: () => chain(_children.props.onMouseOver, _children.props.onMouseEnter, _children.props.onPointerEnter),
-    onLeave: () => chain(_children.props.onMouseLeave, _children.props.onPointerLeave)
+    onEnter: event => chain(_children.props.onMouseOver, _children.props.onMouseEnter, _children.props.onPointerEnter)(event),
+    onLeave: event => chain(_children.props.onMouseLeave, _children.props.onPointerLeave)(event)
   });
   const [isFocused, focusProps] = useFocus({
     onFocus: _children.props.onFocus,
@@ -64,8 +67,12 @@ const Popover = ({
     ref: childRef,
     ...hoverProps,
     ...focusProps,
-    onClick: triggerBy.has("click") ? click : void 0,
-    onContextMenu: triggerBy.has("contextMenu") ? contextMenu : void 0
+    ...(triggerBy.has("click") && {
+      onClick
+    }),
+    ...(triggerBy.has("contextMenu") && {
+      onContextMenu
+    })
   });
   const enterPopper = useEvent(e => {
     hoverProps.onPointerEnter(e);
@@ -73,6 +80,9 @@ const Popover = ({
   const leavePopper = useEvent(e => {
     hoverProps.onPointerLeave(e);
   });
+  useClickAway(() => {
+    turnOff();
+  }, popperRef);
   const styled = {
     popover: _stylex.props(styles.popover, typography.body.medium),
     title: _stylex.props(styles.title, typography.title.medium)
@@ -85,7 +95,8 @@ const Popover = ({
       onPointerEnter: enterPopper,
       onPointerLeave: leavePopper
     }),
-    placement: placement
+    placement: placement,
+    ref: popperRef
   }, React.createElement("div", {
     className: clsx(classNames[PopoverClassToken.Popover], className, styled.popover.className),
     style: {

package/dist/components/popper/dropdown.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
-import type { DropdownProps } from "./types";
-declare const Dropdown: ({ open, children, placement, style, className, onExit, onExited, onEntered, trigger: _trigger, offset: _offset, overlay, arrow: arrowable, ...props }: DropdownProps) => React.JSX.Element;
+declare const Dropdown: React.ForwardRefExoticComponent<Omit<import("./types").PopperProps, "placement" | "portal"> & {
+    placement: import("@floating-ui/dom").Placement;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Dropdown;