musae 0.2.5 → 0.2.7

package/dist/components/pagination/pagination.js

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { usePagiantion } from './hooks.js';
 import Item from './item.js';
+import Select from '../select/select.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, PaginationClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
 
 const Pagination = ({
   total = 0,
   siblings = 1,
   boundaries = 1,
-  pageSize = 0
+  pageSize: _pageSize,
+  pageSizes = [10, 20, 50, 100]
 }) => {
   const {
     paginationItems,
@@ -15,21 +20,34 @@ const Pagination = ({
     changePage,
     page,
     hasNext,
-    hasPrev
+    hasPrev,
+    pageSize,
+    onPageSizeChange
   } = usePagiantion({
     boundaries,
-    pageSize,
+    pageSize: _pageSize,
     siblings,
     total
   });
   const styled = {
-    className: "musae-78zum5 musae-1ef45qx"
+    pagination: {
+      className: "musae-78zum5 musae-1ef45qx"
+    },
+    sizer: {
+      className: "musae-78zum5 musae-6s0dn4"
+    }
   };
+  const classNames = useClassNames(ComponentToken.Pagination);
+  const sizeOptions = useMemo(() => Array.from(new Set(pageSizes)).map(size => ({
+    value: size,
+    label: `${size} 条/页`
+  })), [pageSizes]);
   return React.createElement("nav", {
-    "aria-label": "pagination navigation"
+    "aria-label": "pagination navigation",
+    className: classNames[PaginationClassToken.Pagination]
   }, React.createElement("ul", {
-    className: styled.className,
-    style: styled.style
+    className: styled.pagination.className,
+    style: styled.pagination.style
   }, paginationItems.map(item => React.createElement("li", {
     key: item
   }, React.createElement(Item, {
@@ -40,7 +58,17 @@ const Pagination = ({
     checked: page === item,
     hasNext: hasNext,
     hasPrev: hasPrev
-  })))));
+  }))), React.createElement("li", {
+    className: clsx(classNames[PaginationClassToken.SizeSelector], styled.sizer.className),
+    style: styled.sizer.style
+  }, React.createElement(Select, {
+    options: sizeOptions,
+    value: pageSize,
+    style: {
+      minWidth: 0
+    },
+    onChange: onPageSizeChange
+  }))));
 };
 var Pagination$1 = Pagination;
 

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

@@ -41,6 +41,12 @@ export type PagiantionProps = {
      * @default 1
      */
     boundaries?: number;
+    /**
+     * @description
+     * page sizes
+     * @default [10, 20, 50, 100]
+     */
+    pageSizes?: number[];
 };
 export type PaginationItems = [PaginationItemType.Prev, ...(PaginationItemType | number)[], PaginationItemType.Next];
 /**

package/dist/components/picker/picker.js

@@ -4,7 +4,7 @@ import { useBoolean, chain, useFocus } from '@aiszlab/relax';
 import { useEvents } from './hooks.js';
 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.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
@@ -78,7 +78,7 @@ const Picker = forwardRef(({
       isFocused,
       isOpen
     }
-  }, React.createElement("div", {
+  }, React.createElement("span", {
     className: clsx(classNames[PickerClassToken.Picker], {
       [classNames[PickerClassToken.Focused]]: isFocused
     }, className, styled.picker.className),

package/dist/components/popover/popover.js

@@ -1,7 +1,7 @@
 import { useBoolean, toArray, useRefs, useEvent, useHover, chain, useFocus } 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.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { typography } from '../theme/theme.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, PopoverClassToken } from '../../utils/class-name.js';

package/dist/components/popper/dropdown.js

@@ -1,7 +1,7 @@
 import React, { useRef, useMemo, useEffect } from 'react';
 import { ComponentToken, PopperClassToken } from '../../utils/class-name.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { isFunction } from '@aiszlab/relax';
 import { autoUpdate, computePosition, flip, offset, arrow } from '@floating-ui/dom';
@@ -16,8 +16,8 @@ const styles = {
       zIndex: "musae-1axsr4t",
       position: "musae-10l6tqk",
       backgroundColor: "musae-q1mx2j",
-      top: "musae-9oc6z4",
-      insetInlineStart: "musae-1at4hj2",
+      top: "musae-13vifvy",
+      insetInlineStart: "musae-1o0tod",
       left: null,
       right: null,
       boxShadow: "musae-ezd0au",

package/dist/components/popper/popper.js

@@ -3,7 +3,7 @@ import Portal from '../portal/portal.js';
 import Dropdown from './dropdown.js';
 
 const Popper = ({ destroyable, placement = "bottom-start", ...props }) => {
-    return (React.createElement(Portal, { open: props.open, lockable: false, destroyable: destroyable },
+    return (React.createElement(Portal, { open: props.open, destroyable: destroyable },
         React.createElement(Dropdown, { ...props, placement: placement })));
 };
 

package/dist/components/portal/portal.js

@@ -1,9 +1,11 @@
 import { createPortal } from 'react-dom';
 import { useState, useEffect } from 'react';
 import { useScrollLocker, isDomUsable } from '@aiszlab/relax';
+import { useContainer } from '../../hooks/use-container.js';
 
-const Portal = ({ children, open = false, destroyable = false, lockable = true }) => {
+const Portal = ({ children, open = true, destroyable = false, lockable = false, container }) => {
     const [shouldRender, setShouldRender] = useState(false);
+    const { container: _container } = useContainer({ container });
     /// if render once, and is not destroyable
     /// anyway render
     useEffect(() => {
@@ -14,7 +16,9 @@ const Portal = ({ children, open = false, destroyable = false, lockable = true }
     useScrollLocker(isDomUsable() && lockable && open);
     if (!shouldRender)
         return null;
-    return createPortal(children, document.body);
+    if (!_container)
+        return null;
+    return createPortal(children, _container);
 };
 
 export { Portal as default };

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

@@ -1,3 +1,4 @@
+import { Voidable } from "@aiszlab/relax/types";
 import type { ReactNode } from "react";
 /**
  * @description
@@ -24,4 +25,9 @@ export interface PortalProps {
      * lockable
      */
     lockable?: boolean;
+    /**
+     * @description
+     * container
+     */
+    container?: (() => Voidable<HTMLElement>) | HTMLElement | null;
 }

package/dist/components/progress/circular.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { sizes } from '../theme/tokens.stylex.js';

package/dist/components/progress/linear.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, ProgressClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';

package/dist/components/radio/radio.js

@@ -3,7 +3,7 @@ import Context from './context.js';
 import { useControlledState } from '@aiszlab/relax';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, RadioClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/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';

package/dist/components/rate/rate.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, RateClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';

package/dist/components/rate/star.js

@@ -1,6 +1,6 @@
 import React, { createElement } from 'react';
 import { useEvent, useHover } from '@aiszlab/relax';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.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 { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, RateClassToken } from '../../utils/class-name.js';
@@ -36,10 +36,10 @@ const styles = {
       position: "musae-10l6tqk",
       width: "musae-1gn8jaj",
       height: "musae-b27hse",
-      insetInlineStart: "musae-1at4hj2",
+      insetInlineStart: "musae-1o0tod",
       left: null,
       right: null,
-      top: "musae-9oc6z4",
+      top: "musae-13vifvy",
       opacity: "musae-g01cxk",
       userSelect: "musae-87ps6o",
       overflow: "musae-b3r6kr",

package/dist/components/ripple/ripple.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   ripple: {

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

@@ -11,7 +11,7 @@ export declare const useValue: ({ mode, close, isComplex, ...props }: {
     mode: Mode | undefined;
     close: () => void;
     reset: () => void;
-    onChange: SelectProps["onChange"];
+    onChange?: (value: ValueOrValues) => void;
     isComplex: boolean;
 }) => {
     value: ValueOrValues | undefined;

package/dist/components/select/select.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SelectProps } from "./types";
-declare const Select: ({ mode, searchable, onSearch, className, style, options, onFilter, complex, ...props }: SelectProps) => React.JSX.Element;
+declare const Select: ({ mode, searchable, onSearch, className, style, options, onFilter, complex, value, onChange: _onChange, }: SelectProps) => React.JSX.Element;
 export default Select;

package/dist/components/select/select.js

@@ -16,13 +16,13 @@ const Select = ({
   options = [],
   onFilter,
   complex = false,
-  ...props
+  value,
+  onChange: _onChange
 }) => {
   const ref = useRef(null);
   const selectorRef = useRef(null);
   const classNames = useContext(Context).classNames[ComponentToken.Select];
   const close = useCallback(() => ref.current?.close(), []);
-  /// options
   const {
     menuItems,
     readableOptions,
@@ -34,17 +34,17 @@ const Select = ({
     onFilter,
     onSearch
   });
-  /// value
   const {
     readableValues,
     onChange
   } = useValue({
-    value: props.value,
+    value,
     readableOptions,
     mode,
     close,
     reset,
-    onChange: props.onChange,
+    // @ts-ignore
+    onChange: _onChange,
     isComplex: complex
   });
   const click = () => {

package/dist/components/select/selector.d.ts

@@ -1,7 +1,4 @@
-import React from "react";
-import type { SelectorRef } from "./types";
-declare const Selector: React.ForwardRefExoticComponent<Pick<import("@aiszlab/relax/types").RequiredIn<import("./types").SelectProps, "searchable" | "onSearch">, "mode" | "searchable" | "onSearch"> & {
-    value: Map<React.Key, string>;
-    searched: string;
-} & React.RefAttributes<SelectorRef>>;
+import { type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from "react";
+import type { SelectorProps, SelectorRef } from "./types";
+declare const Selector: ForwardRefExoticComponent<PropsWithoutRef<SelectorProps> & RefAttributes<SelectorRef>>;
 export default Selector;

package/dist/components/select/selector.js

@@ -1,10 +1,11 @@
 import React, { forwardRef, useRef, useContext, useImperativeHandle } from 'react';
 import Tag from '../tag/tag.js';
 import { styles as styles$1 } from '../input/input.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from '../picker/context.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
+import { typography } from '../theme/theme.js';
 
 const styles = {
   input: props => [{
@@ -34,6 +35,11 @@ const Selector = forwardRef(({
       }
     };
   });
+  const search = e => {
+    open?.();
+    // on user search input, trigger the search callback
+    onSearch(e.target.value);
+  };
   /// multiple mode render
   if (mode === "multiple") {
     return [...Array.from(value.entries()).map(([key, label]) => {
@@ -45,17 +51,17 @@ const Selector = forwardRef(({
       ref: inputRef
     })];
   }
-  const search = e => {
-    open?.();
-    // on user search input, trigger the search callback
-    onSearch(e.target.value);
-  };
   const styled = _stylex.props(styles$1.input, styles.input({
-    color: isFocused && searchable ? void 0 : theme.colors[ColorToken.OnSurface]
-  }));
-  /// single mode render
+    color: isFocused && searchable && theme.colors[ColorToken.OnSurface] || void 0
+  }), typography.body.small);
+  // single mode render
+  if (!searchable) {
+    return React.createElement("span", {
+      className: styled.className,
+      style: styled.style
+    }, Array.from(value.values()).join(","));
+  }
   return React.createElement("input", {
-    readOnly: !searchable,
     ref: inputRef,
     value: searched,
     placeholder: Array.from(value.values()).join(","),

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

@@ -6,6 +6,7 @@ import type { RequiredIn } from "@aiszlab/relax/types";
 export type Mode = "multiple";
 export type Value = Key | Pick<Option, "value" | "label">;
 export type ValueOrValues = Value[] | Value;
+type ChangeHandler = ((value: string) => void) | ((value: number) => void) | ((value: bigint) => void) | ((values: Value[]) => void);
 /**
  * @author murukal
  *
@@ -60,7 +61,7 @@ export type SelectProps = ComponentProps & {
      * on value change, toggle
      * @default void 0
      */
-    onChange?: (value: ValueOrValues) => void;
+    onChange?: ChangeHandler;
 };
 /**
  * @description
@@ -121,3 +122,4 @@ export type SelectionsProps = {
      */
     selectedKeys: MenuProps["selectedKeys"];
 };
+export {};

package/dist/components/space/space.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useGutters } from '../../hooks/use-gutters.js';
 import clsx from 'clsx';
 

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { StepItemProps } from "./types";
-declare const Item: ({ leading, title, description, value }: StepItemProps) => React.JSX.Element;
+declare const Item: ({ leading, title, description, value, size }: StepItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/steps/item.js

@@ -1,13 +1,15 @@
 import React, { useContext } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, StepsClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
+import { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useEvent } from '@aiszlab/relax';
 import { Context } from './context.js';
 import { typography } from '../theme/theme.js';
+import Done from '../icon/icons/action/done.js';
 
 const styles = {
   step: {
@@ -17,19 +19,13 @@ const styles = {
       flexShrink: null,
       flexBasis: null,
       display: "musae-rvj5dj",
-      grid: "musae-1l2suiq",
-      gridTemplate: null,
-      gridTemplateAreas: null,
-      gridTemplateColumns: null,
-      gridTemplateRows: null,
-      gridAutoRows: null,
-      gridAutoColumns: null,
-      gridAutoFlow: null,
       alignItems: "musae-6s0dn4",
       columnGap: "musae-1om1yv4",
       overflow: "musae-b3r6kr",
       overflowX: null,
       overflowY: null,
+      gridTemplateAreas: "musae-1tdxyq7",
+      gridTemplateColumns: "musae-1pmbctz",
       $$css: true
     },
     clickable: {
@@ -48,23 +44,72 @@ const styles = {
       gridColumnEnd: null,
       $$css: true
     },
-    vertical: props => [{
+    tail: props => [{
       position: "musae-1n2onr6",
       "::after_content": "musae-1s928wv",
       "::after_position": "musae-1j6awrg",
       "::after_height": "musae-p59mhh",
       "::after_width": "musae-etvar1",
       "::after_backgroundColor": "musae-27d4w3",
-      "::after_marginTop": "musae-4ys0c4",
       "::after_top": "musae-1srwf7z",
       "::after_insetInlineStart": "musae-xsadbs",
       "::after_left": null,
       "::after_right": null,
+      "::after_marginTop": "musae-4ys0c4",
       $$css: true
     }, {
       "--15iyedw": props.color != null ? props.color : "initial"
     }]
   },
+  sign: {
+    default: props => [{
+      display: "musae-78zum5",
+      justifyContent: "musae-l56j7k",
+      alignItems: "musae-6s0dn4",
+      borderRadius: "musae-iipnba",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      overflow: "musae-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      width: "musae-17fnjtu",
+      height: "musae-1jwls1v",
+      $$css: true
+    }, {
+      "--width": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size ?? sizes.xsmall),
+      "--height": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.size ?? sizes.xsmall)
+    }],
+    doing: props => [{
+      backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }],
+    done: props => [{
+      backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }],
+    todo: props => [{
+      backgroundColor: "musae-q1mx2j",
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+      "--color": props.color != null ? props.color : "initial"
+    }]
+  },
   title: {
     default: {
       gridArea: "musae-nyuz70",
@@ -77,7 +122,7 @@ const styles = {
       alignItems: "musae-6s0dn4",
       $$css: true
     },
-    horizontal: props => [{
+    tail: props => [{
       position: "musae-1n2onr6",
       "::after_content": "musae-1s928wv",
       "::after_position": "musae-1j6awrg",
@@ -110,7 +155,8 @@ const Item = ({
   leading,
   title,
   description,
-  value
+  value,
+  size
 }) => {
   const classNames = useClassNames(ComponentToken.Steps);
   const theme = useTheme();
@@ -127,10 +173,22 @@ const Item = ({
   const isMax = value === max;
   const styled = {
     step: _stylex.props(styles.step.default, isClickable && styles.step.clickable),
-    leading: _stylex.props(styles.leading.default, isVertical && !isMax && styles.leading.vertical({
+    leading: _stylex.props(styles.leading.default, isVertical && !isMax && styles.leading.tail({
       color: theme.colors[ColorToken.Primary]
     })),
-    title: _stylex.props(typography.title.medium, styles.title.default, isHorizontal && !isMax && styles.title.horizontal({
+    sign: _stylex.props(styles.sign.default({
+      size
+    }), status === "doing" && styles.sign.doing({
+      backgroundColor: theme.colors[ColorToken.Primary],
+      color: theme.colors[ColorToken.OnPrimary]
+    }), status === "done" && styles.sign.done({
+      backgroundColor: theme.colors[ColorToken.PrimaryContainer],
+      color: theme.colors[ColorToken.OnPrimaryContainer]
+    }), status === "todo" && styles.sign.todo({
+      backgroundColor: theme.colors[ColorToken.Secondary],
+      color: theme.colors[ColorToken.OnSecondary]
+    })),
+    title: _stylex.props(typography.title.medium, styles.title.default, isHorizontal && !isMax && styles.title.tail({
       color: theme.colors[ColorToken.Primary]
     })),
     description: _stylex.props(typography.body.medium, styles.description.default)
@@ -150,7 +208,10 @@ const Item = ({
   }, React.createElement("div", {
     className: clsx(classNames[StepsClassToken.Leading], styled.leading.className),
     style: styled.leading.style
-  }, leading), React.createElement("div", {
+  }, React.createElement("div", {
+    className: clsx(classNames[StepsClassToken.Sign], styled.sign.className),
+    style: styled.sign.style
+  }, leading ?? (status === "done" ? React.createElement(Done, null) : value))), React.createElement("div", {
     className: clsx(classNames[StepsClassToken.Title], styled.title.className),
     style: styled.title.style
   }, title), React.createElement("div", {

package/dist/components/steps/steps.d.ts

@@ -8,5 +8,5 @@ import type { StepsProps } from "./types";
  * 1. `Steps` only be controlled
  * 2. render by `items` prop
  */
-declare const Steps: ({ items, value, className, style, type, onChange }: StepsProps) => React.JSX.Element;
+declare const Steps: ({ items, value, className, style, type, onChange, size }: StepsProps) => React.JSX.Element;
 export default Steps;

package/dist/components/steps/steps.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import Item from './item.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, StepsClassToken } from '../../utils/class-name.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.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 { Context } from './context.js';
 
@@ -38,7 +38,8 @@ const Steps = ({
   className,
   style,
   type = "horizontal",
-  onChange
+  onChange,
+  size
 }) => {
   const classNames = useClassNames(ComponentToken.Steps);
   const styled = {
@@ -48,8 +49,9 @@ const Steps = ({
     type,
     onChange,
     max: items.length - 1,
-    value
-  }), [type, onChange, items.length, value]);
+    value,
+    size
+  }), [type, onChange, items.length, value, size]);
   return React.createElement(Context.Provider, {
     value: contextValue
   }, React.createElement("ol", {

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

@@ -54,6 +54,11 @@ export type StepsProps = ComponentProps & {
      * @default horizontal
      */
     type?: Type;
+    /**
+     * @description
+     * size
+     */
+    size?: number;
 };
 /**
  * @description
@@ -65,6 +70,11 @@ export type StepItemProps = StepItem & {
      * current item value
      */
     value: number;
+    /**
+     * @description
+     * leading size
+     */
+    size?: number;
 };
 /**
  * @description
@@ -91,5 +101,10 @@ export type ContextValue = {
      * value
      */
     value: number;
+    /**
+     * @description
+     * size
+     */
+    size?: number;
 };
 export {};