musae 0.2.6 → 0.2.7

package/dist/components/input/input.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useInputEvents, useWrapperEvents } from './hooks.js';
 import { useControlledState, useFocus } from '@aiszlab/relax';
 import { ComponentToken, InputClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 { sizes } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
@@ -12,11 +12,9 @@ import { typography } from '../theme/theme.js';
 
 const styles = {
   wrapper: props => [{
-    display: "musae-78zum5",
+    display: "musae-3nfvp2",
     alignItems: "musae-6s0dn4",
     cursor: "musae-1ed109x",
-    minHeight: "musae-1v3fk47",
-    minWidth: "musae-1fpxtso",
     borderRadius: "musae-7bdoj",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
@@ -26,6 +24,10 @@ const styles = {
     borderTopRightRadius: null,
     borderBottomLeftRadius: null,
     borderBottomRightRadius: null,
+    verticalAlign: "musae-3ajldb",
+    minHeight: "musae-1v3fk47",
+    minWidth: "musae-1fpxtso",
+    maxWidth: "musae-kfv0gj",
     boxShadow: "musae-igitpm",
     margin: "musae-ieb5ut",
     marginInline: null,
@@ -44,21 +46,13 @@ const styles = {
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    transition: "musae-nz68lp",
-    transitionBehavior: null,
-    transitionDelay: null,
-    transitionDuration: null,
-    transitionProperty: null,
-    transitionTimingFunction: null,
+    transitionProperty: "musae-kdsq27",
+    transitionDuration: "musae-13dflua",
     willChange: "musae-1o9dqaq",
     $$css: true
   }, {
     "--boxShadow": `inset 0px 0px 0px ${sizes.smallest} ${props.outlineColor}` != null ? `inset 0px 0px 0px ${sizes.smallest} ${props.outlineColor}` : "initial"
   }],
-  flexible: {
-    minWidth: null,
-    $$css: true
-  },
   focused: props => [{
     boxShadow: "musae-igitpm",
     $$css: true
@@ -182,7 +176,7 @@ const Input = forwardRef(({
       className: "musae-jbqb8w musae-ohadnq musae-2vzm80 musae-yumy05 musae-1vwksmh musae-98rzlu"
     }
   };
-  return React.createElement("div", {
+  return React.createElement("span", {
     ref: wrapperRef,
     className: clsx(classNames[InputClassToken.Wrapper], {
       [classNames[InputClassToken.Focused]]: isFocused,

package/dist/components/layout/header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme } from '../theme/hooks.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';
 

package/dist/components/layout/layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Grid } from '../grid/index.js';
 import { useChildren, ChildToken } from './hooks.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 clsx from 'clsx';

package/dist/components/loading/loading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, LoadingClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';

package/dist/components/menu/group.js

@@ -5,9 +5,9 @@ import { ComponentToken, MenuClassToken } from '../../utils/class-name.js';
 import clsx from 'clsx';
 import Item from './item.js';
 import { useMenuContext } from './hooks.js';
-import { useRefs } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useExpandEffect } from '../../hooks/use-expand-effect.js';
+import { useRefs, useUpdateEffect } from '@aiszlab/relax';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useExpandable } from '../../hooks/use-expandable.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 
@@ -110,11 +110,17 @@ const Group = forwardRef(({
   const groupRef = useRefs(ref, scope);
   const theme = useTheme();
   const isInline = mode === "inline";
-  useExpandEffect({
-    animate,
-    target: scope,
-    expanded
-  });
+  const {
+    expand,
+    collapse
+  } = useExpandable();
+  useUpdateEffect(async () => {
+    if (expanded) {
+      await expand([scope, animate]);
+      return;
+    }
+    await collapse([scope, animate]);
+  }, [expanded]);
   const styled = {
     group: props(styles.group.default({
       color: theme.colors[ColorToken.OnSurface]

package/dist/components/menu/hooks.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback, useContext } from 'react';
 import Context from './context.js';
 import { useControlledState } from '@aiszlab/relax';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 KeyboardArrowUp from '../icon/icons/hardware/keyboard-arrow-up.js';
 
 const styles = {

package/dist/components/menu/item.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef } from 'react';
 import { useMenuContext, useItemChildren } from './hooks.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, MenuClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 { sizes, spacing } from '../theme/tokens.stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/notification/holder.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useState, useImperativeHandle } from 'react';
 import Portal from '../portal/portal.js';
 import { AnimatePresence } from 'framer-motion';
 import Notification from './notification.js';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 { useEvent } from '@aiszlab/relax';
 
 const styles = {
@@ -114,8 +114,7 @@ const Holder = forwardRef((_, ref) => {
     return React.createElement(Portal, {
       destroyable: true,
       open: notifications.size > 0,
-      key: placement,
-      lockable: false
+      key: placement
     }, React.createElement("div", {
       className: styled.className,
       style: styled.style

package/dist/components/notification/notification.js

@@ -1,4 +1,4 @@
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 React, { useEffect, createElement } from 'react';
 import { usePresence, useAnimate } from 'framer-motion';
 import { useTheme } from '../theme/hooks.js';

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

@@ -67,7 +67,7 @@ const OtpInput = ({
       className: styled.input.className,
       style: {
         ...styled.input.style,
-        minWidth: "unset"
+        minWidth: 0
       },
       ref: inputRef => {
         inputRefs.current[index] = inputRef;

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

@@ -5,11 +5,11 @@ import { type PaginationItems } from "./types";
  * @description
  * use pagination
  */
-export declare const usePagiantion: ({ total, siblings, boundaries, ...props }: {
+export declare const usePagiantion: ({ total, siblings, boundaries, pageSize: _pageSize, }: {
     total: number;
     siblings: number;
     boundaries: number;
-    pageSize: number;
+    pageSize?: number;
 }) => {
     paginationItems: PaginationItems;
     add: (step?: number) => void;
@@ -18,4 +18,6 @@ export declare const usePagiantion: ({ total, siblings, boundaries, ...props }:
     page: number;
     hasPrev: boolean;
     hasNext: boolean;
+    pageSize: number;
+    onPageSizeChange: (pageSize: number) => void;
 };

package/dist/components/pagination/hooks.js

@@ -1,4 +1,4 @@
-import { useCounter, range, clamp } from '@aiszlab/relax';
+import { useControlledState, useCounter, range, clamp } from '@aiszlab/relax';
 import { useMemo } from 'react';
 import { PaginationItemType } from './types.js';
 
@@ -8,9 +8,9 @@ import { PaginationItemType } from './types.js';
  * @description
  * use pagination
  */
-const usePagiantion = ({ total, siblings, boundaries, ...props }) => {
-    const pageSize = props.pageSize;
-    const pages = Math.ceil(total / pageSize);
+const usePagiantion = ({ total, siblings, boundaries, pageSize: _pageSize, }) => {
+    const [pageSize, setPageSize] = useControlledState(_pageSize, { defaultState: 10 });
+    const pages = useMemo(() => Math.ceil(total / Math.max(1, pageSize)), [total, pageSize]);
     const [page, { add, subtract, setCount }] = useCounter(1, {
         min: 1,
         max: pages,
@@ -40,6 +40,9 @@ const usePagiantion = ({ total, siblings, boundaries, ...props }) => {
     const hasPrev = page > 1;
     // whether next button is usable
     const hasNext = page < pages;
+    const onPageSizeChange = (pageSize) => {
+        setPageSize(pageSize);
+    };
     return {
         paginationItems,
         add,
@@ -48,6 +51,8 @@ const usePagiantion = ({ total, siblings, boundaries, ...props }) => {
         page,
         hasPrev,
         hasNext,
+        pageSize,
+        onPageSizeChange,
     };
 };
 

package/dist/components/pagination/item.js

@@ -37,10 +37,7 @@ const Item = ({
   if (value === PaginationItemType.MorePrev || value === PaginationItemType.MoreNext) {
     const styled = {
       more: {
-        className: "musae-1pqvcko musae-13amitz"
-      },
-      hidden: {
-        className: "musae-1s85apg"
+        className: "musae-1aldg33 musae-1oew0n0"
       }
     };
     const isNegative = value === PaginationItemType.MorePrev;
@@ -51,11 +48,12 @@ const Item = ({
       className: styled.more.className,
       style: styled.more.style,
       onClick: () => {
-        isNegative ? add(5) : subtract(5);
+        isNegative ? subtract(5) : add(5);
       }
-    }, React.createElement(MoreHoriz, null), createElement(isNegative ? KeyboardDoubleArrowLeft : KeyboardDoubleArrowRight, {
-      className: styled.hidden.className,
-      style: styled.hidden.style
+    }, React.createElement(MoreHoriz, {
+      role: "separator"
+    }), createElement(isNegative ? KeyboardDoubleArrowLeft : KeyboardDoubleArrowRight, {
+      role: "button"
     }));
   }
   return React.createElement(Button, {

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

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PagiantionProps } from "./types";
-declare const Pagination: ({ total, siblings, boundaries, pageSize }: PagiantionProps) => React.JSX.Element;
+declare const Pagination: ({ total, siblings, boundaries, pageSize: _pageSize, pageSizes, }: PagiantionProps) => React.JSX.Element;
 export default Pagination;

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.7.4/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.7.4/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.7.4/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';

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.7.4/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.7.4/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.7.4/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.7.4/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.7.4/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';

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.7.4/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.7.4/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(","),