musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/components/otp-input/styles.d.ts

@@ -0,0 +1,13 @@
+declare const styles: Readonly<{
+    readonly otp: Readonly<{
+        readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "row">;
+        readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly input: Readonly<{
+        readonly ":not(#\\#)": import("@stylexjs/stylex").StyleXClassNameFor<":not(#\\#)", {
+            readonly width: `calc(1ch + ${import("@stylexjs/stylex").StyleXVar<string>} * 2)`;
+        }>;
+    }>;
+}>;
+export default styles;

package/dist/components/otp-input/styles.mjs

@@ -0,0 +1,14 @@
+var styles = {
+  otp: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-1q0g3np",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  },
+  input: {
+    kXlws8: "musaex-17gq8ck",
+    $$css: true
+  }
+};
+
+export { styles as default };

package/dist/components/pagination/__test__/item.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/pagination/item.cjs

@@ -2,11 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var styles = require('./styles.cjs');
 var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var iconButton = require('../icon-button/icon-button.cjs');
 var keyboardArrowLeft = require('../icon/icons/hardware/keyboard-arrow-left.cjs');
 var keyboardArrowRight = require('../icon/icons/hardware/keyboard-arrow-right.cjs');
 var moreHoriz = require('../icon/icons/navigation/more-horiz.cjs');
+var keyboardDoubleArrowLeft = require('../icon/icons/hardware/keyboard-double-arrow-left.cjs');
+var keyboardDoubleArrowRight = require('../icon/icons/hardware/keyboard-double-arrow-right.cjs');
 
 var Item = function Item(_ref) {
   var value = _ref.value,
@@ -42,9 +46,7 @@ var Item = function Item(_ref) {
   var isMoreNext = value === "more-next";
   if (isMorePrev || isMoreNext) {
     var styled = {
-      more: {
-        className: "musaex-s2sk4o musaex-1senyb1 musaex-fd9yrh musaex-gt90kt"
-      }
+      more: stylex.props(styles.default.item.more)
     };
     return /*#__PURE__*/React.createElement(iconButton.default, {
       variant: "text",
@@ -61,7 +63,7 @@ var Item = function Item(_ref) {
       size: "small"
     }, /*#__PURE__*/React.createElement(moreHoriz.default, {
       role: "separator"
-    }), /*#__PURE__*/React.createElement(isMorePrev ? KeyboardDoubleArrowLeft : KeyboardDoubleArrowRight, {
+    }), /*#__PURE__*/React.createElement(isMorePrev ? keyboardDoubleArrowLeft.default : keyboardDoubleArrowRight.default, {
       role: "button"
     }));
   }

package/dist/components/pagination/item.mjs

@@ -1,8 +1,12 @@
+import styles from './styles.mjs';
 import React, { createElement } from 'react';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import IconButton from '../icon-button/icon-button.mjs';
 import IconKeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.mjs';
 import IconKeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.mjs';
 import IconMoreHoriz from '../icon/icons/navigation/more-horiz.mjs';
+import IconKeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.mjs';
+import IconKeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.mjs';
 
 var Item = function Item(_ref) {
   var value = _ref.value,
@@ -38,9 +42,7 @@ var Item = function Item(_ref) {
   var isMoreNext = value === "more-next";
   if (isMorePrev || isMoreNext) {
     var styled = {
-      more: {
-        className: "musaex-s2sk4o musaex-1senyb1 musaex-fd9yrh musaex-gt90kt"
-      }
+      more: props(styles.item.more)
     };
     return /*#__PURE__*/React.createElement(IconButton, {
       variant: "text",
@@ -57,7 +59,7 @@ var Item = function Item(_ref) {
       size: "small"
     }, /*#__PURE__*/React.createElement(IconMoreHoriz, {
       role: "separator"
-    }), /*#__PURE__*/createElement(isMorePrev ? KeyboardDoubleArrowLeft : KeyboardDoubleArrowRight, {
+    }), /*#__PURE__*/createElement(isMorePrev ? IconKeyboardDoubleArrowLeft : IconKeyboardDoubleArrowRight, {
       role: "button"
     }));
   }

package/dist/components/pagination/pagination.cjs

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var React = require('react');
 var hooks = require('./hooks.cjs');
 var item = require('./item.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var select = require('../select/select.cjs');
 var useLocale = require('../../locale/use-locale.cjs');
 var relax = require('@aiszlab/relax');
@@ -49,12 +51,8 @@ var Pagination = function Pagination(_ref) {
     pageSize = _usePagiantion.pageSize,
     onPageSizeChange = _usePagiantion.onPageSizeChange;
   var styled = {
-    pagination: {
-      className: "musaex-78zum5 musaex-5xj0sk musaex-3ct3a4 musaex-q3gua8 musaex-1n775ky"
-    },
-    sizer: {
-      className: "musaex-78zum5 musaex-6s0dn4"
-    }
+    pagination: stylex.props(styles.default.pagination.base),
+    sizer: stylex.props(styles.default.pagination.sizer)
   };
   var sizeOptions = React.useMemo(function () {
     return relax.unique(pageSizes).map(function (size) {

package/dist/components/pagination/pagination.mjs

@@ -1,7 +1,9 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React, { useMemo } from 'react';
 import { usePagiantion } from './hooks.mjs';
 import Item from './item.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Select from '../select/select.mjs';
 import { useLocale } from '../../locale/use-locale.mjs';
 import { unique, toFunction } from '@aiszlab/relax';
@@ -45,12 +47,8 @@ var Pagination = function Pagination(_ref) {
     pageSize = _usePagiantion.pageSize,
     onPageSizeChange = _usePagiantion.onPageSizeChange;
   var styled = {
-    pagination: {
-      className: "musaex-78zum5 musaex-5xj0sk musaex-3ct3a4 musaex-q3gua8 musaex-1n775ky"
-    },
-    sizer: {
-      className: "musaex-78zum5 musaex-6s0dn4"
-    }
+    pagination: props(styles.pagination.base),
+    sizer: props(styles.pagination.sizer)
   };
   var sizeOptions = useMemo(function () {
     return unique(pageSizes).map(function (size) {

package/dist/components/pagination/styles.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var item = {
+  more: {
+    kiGR6H: "musaex-s2sk4o",
+    k71EdC: "musaex-1senyb1",
+    kO6ZUF: "musaex-fd9yrh",
+    kNwRDw: "musaex-gt90kt",
+    $$css: true
+  }
+};
+var pagination = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    k1C7PZ: "musaex-5xj0sk",
+    kH6xsr: "musaex-3ct3a4",
+    kogj98: "musaex-q3gua8",
+    kmVPX3: "musaex-1n775ky",
+    $$css: true
+  },
+  sizer: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  }
+};
+var styles = {
+  item: item,
+  pagination: pagination
+};
+
+exports.default = styles;

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

@@ -0,0 +1,37 @@
+declare const styles: {
+    item: Readonly<{
+        readonly more: Readonly<{
+            readonly "@media (hover: hover)": import("@stylexjs/stylex").StyleXClassNameFor<"@media (hover: hover)", {
+                readonly ":hover > [role='separator']": {
+                    readonly display: "none";
+                };
+                readonly ":not(:hover) > [role='button']": {
+                    readonly display: "none";
+                };
+            }>;
+            readonly "@media (hover: none)": import("@stylexjs/stylex").StyleXClassNameFor<"@media (hover: none)", {
+                readonly ":active > [role='separator']": {
+                    readonly display: "none";
+                };
+                readonly ":not(:active) > [role='button']": {
+                    readonly display: "none";
+                };
+            }>;
+        }>;
+    }>;
+    pagination: Readonly<{
+        readonly base: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+            readonly columnGap: import("@stylexjs/stylex").StyleXClassNameFor<"columnGap", string>;
+            readonly listStyleType: import("@stylexjs/stylex").StyleXClassNameFor<"listStyleType", "none">;
+            readonly margin: import("@stylexjs/stylex").StyleXClassNameFor<"margin", string>;
+            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+        }>;
+        readonly sizer: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/pagination/styles.mjs

@@ -0,0 +1,31 @@
+var item = {
+  more: {
+    kiGR6H: "musaex-s2sk4o",
+    k71EdC: "musaex-1senyb1",
+    kO6ZUF: "musaex-fd9yrh",
+    kNwRDw: "musaex-gt90kt",
+    $$css: true
+  }
+};
+var pagination = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    k1C7PZ: "musaex-5xj0sk",
+    kH6xsr: "musaex-3ct3a4",
+    kogj98: "musaex-q3gua8",
+    kmVPX3: "musaex-1n775ky",
+    $$css: true
+  },
+  sizer: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  }
+};
+var styles = {
+  item: item,
+  pagination: pagination
+};
+
+export { styles as default };

package/dist/components/password-input/__test__/password-input.test.d.ts

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

package/dist/components/password-input/password-input.cjs

@@ -5,13 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var styles = require('./styles.cjs');
 var React = require('react');
 var input = require('../input/input.cjs');
 var relax = require('@aiszlab/relax');
-var hooks = require('../theme/hooks.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var context = require('./context.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('@aiszlab/relax/class-name');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 var visibilityOff = require('../icon/icons/action/visibility-off.cjs');
 var visibility = require('../icon/icons/action/visibility.cjs');
 
@@ -23,22 +25,20 @@ var PasswordInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isVisible = _useBoolean2[0],
     toggle = _useBoolean2[1].toggle;
-  var theme = hooks.useTheme();
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["secondary-fixed-dim", "secondary"]);
   var styled = {
-    visibility: {
-      className: "musaex-kmi68j musaex-xnarah musaex-t3l3uh musaex-1ptezny musaex-1daecnz"
-    }
+    input: stylex.props(styles.default.input),
+    visibility: stylex.props(styles.default.visibility)
   };
   return /*#__PURE__*/React.createElement(input.default, _objectSpread(_objectSpread({}, props), {}, {
     className: className.stringify(classNames.passwordInput, className$1),
-    style: {
-      "--color-secondary-fixed-dim": theme.colors["secondary-fixed-dim"],
-      "--color-secondary": theme.colors.secondary
-    },
+    style: themeColorVars,
     ref: ref,
     type: isVisible ? "text" : "password",
+    inputClassName: styled.input.className,
     trailing: /*#__PURE__*/React.createElement(isVisible ? visibilityOff.default : visibility.default, _objectSpread({
+      role: "button",
       onClick: toggle,
       onMouseDown: function onMouseDown(event) {
         return event.preventDefault();

package/dist/components/password-input/password-input.mjs

@@ -1,40 +1,40 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import styles from './styles.mjs';
 import React, { forwardRef, createElement } from 'react';
 import Input from '../input/input.mjs';
 import { useBoolean } from '@aiszlab/relax';
-import { useTheme } from '../theme/hooks.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { CLASS_NAMES } from './context.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 import IconVisibilityOff from '../icon/icons/action/visibility-off.mjs';
 import IconVisibility from '../icon/icons/action/visibility.mjs';
 
 var _excluded = ["className"];
 var PasswordInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props$1 = _objectWithoutProperties(_ref, _excluded);
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isVisible = _useBoolean2[0],
     toggle = _useBoolean2[1].toggle;
-  var theme = useTheme();
   var classNames = useClassNames(CLASS_NAMES);
+  var themeColorVars = useThemeColorVars(["secondary-fixed-dim", "secondary"]);
   var styled = {
-    visibility: {
-      className: "musaex-kmi68j musaex-xnarah musaex-t3l3uh musaex-1ptezny musaex-1daecnz"
-    }
+    input: props(styles.input),
+    visibility: props(styles.visibility)
   };
-  return /*#__PURE__*/React.createElement(Input, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/React.createElement(Input, _objectSpread(_objectSpread({}, props$1), {}, {
     className: stringify(classNames.passwordInput, className),
-    style: {
-      "--color-secondary-fixed-dim": theme.colors["secondary-fixed-dim"],
-      "--color-secondary": theme.colors.secondary
-    },
+    style: themeColorVars,
     ref: ref,
     type: isVisible ? "text" : "password",
+    inputClassName: styled.input.className,
     trailing: /*#__PURE__*/createElement(isVisible ? IconVisibilityOff : IconVisibility, _objectSpread({
+      role: "button",
       onClick: toggle,
       onMouseDown: function onMouseDown(event) {
         return event.preventDefault();

package/dist/components/password-input/styles.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  input: {
+    k3Osrj: "musaex-10emqs4",
+    $$css: true
+  },
+  visibility: {
+    kMwMTN: "musaex-kmi68j",
+    k6sLGO: "musaex-xnarah",
+    k1ekBW: "musaex-t3l3uh",
+    kIyJzY: "musaex-1ptezny",
+    krNwJM: "musaex-1daecnz",
+    $$css: true
+  }
+};
+
+exports.default = styles;

package/dist/components/password-input/styles.d.ts

@@ -0,0 +1,19 @@
+declare const styles: Readonly<{
+    readonly input: Readonly<{
+        readonly "::-ms-reveal": import("@stylexjs/stylex").StyleXClassNameFor<"::-ms-reveal", {
+            readonly display: "none";
+        }>;
+    }>;
+    readonly visibility: Readonly<{
+        readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-secondary-fixed-dim)">;
+        readonly willChange: import("@stylexjs/stylex").StyleXClassNameFor<"willChange", "color">;
+        readonly transitionProperty: import("@stylexjs/stylex").StyleXClassNameFor<"transitionProperty", "color">;
+        readonly transitionDuration: import("@stylexjs/stylex").StyleXClassNameFor<"transitionDuration", string>;
+        readonly ":hover": import("@stylexjs/stylex").StyleXClassNameFor<":hover", {
+            readonly "@media (hover: hover)": {
+                readonly color: "var(--color-secondary)";
+            };
+        }>;
+    }>;
+}>;
+export default styles;

package/dist/components/password-input/styles.mjs

@@ -0,0 +1,16 @@
+var styles = {
+  input: {
+    k3Osrj: "musaex-10emqs4",
+    $$css: true
+  },
+  visibility: {
+    kMwMTN: "musaex-kmi68j",
+    k6sLGO: "musaex-xnarah",
+    k1ekBW: "musaex-t3l3uh",
+    kIyJzY: "musaex-1ptezny",
+    krNwJM: "musaex-1daecnz",
+    $$css: true
+  }
+};
+
+export { styles as default };

package/dist/components/picker/context.cjs

@@ -1,18 +1,7 @@
 'use strict';
 
-var React = require('react');
-
 var CLASS_NAMES = {
-  picker: "picker",
-  focused: "picker--focused",
-  invalid: "picker--invalid",
   dropdown: "picker__dropdown"
 };
-var Context = /*#__PURE__*/React.createContext({
-  open: null,
-  isFocused: false,
-  isOpen: false
-});
 
 exports.CLASS_NAMES = CLASS_NAMES;
-exports.Context = Context;

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

@@ -1,8 +1,3 @@
-import type { ContextValue } from "../../types/picker";
 export declare const CLASS_NAMES: {
-    readonly picker: "picker";
-    readonly focused: "picker--focused";
-    readonly invalid: "picker--invalid";
     readonly dropdown: "picker__dropdown";
 };
-export declare const Context: import("react").Context<ContextValue>;

package/dist/components/picker/context.mjs

@@ -1,15 +1,5 @@
-import { createContext } from 'react';
-
 var CLASS_NAMES = {
-  picker: "picker",
-  focused: "picker--focused",
-  invalid: "picker--invalid",
   dropdown: "picker__dropdown"
 };
-var Context = /*#__PURE__*/createContext({
-  open: null,
-  isFocused: false,
-  isOpen: false
-});
 
-export { CLASS_NAMES, Context };
+export { CLASS_NAMES };

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

@@ -1,3 +1,2 @@
 import Picker from "./picker";
-import { Context } from "./context";
-export { Picker, Context };
+export { Picker };

package/dist/components/picker/picker.cjs

@@ -4,53 +4,39 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var React = require('react');
 var popper = require('../popper/popper.cjs');
 var relax = require('@aiszlab/relax');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
-var input = require('../input/input.cjs');
 var context = require('./context.cjs');
 var className = require('@aiszlab/relax/class-name');
-var theme = require('../theme/theme.cjs');
-var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 var context$1 = require('../dialog/context.cjs');
 var stackLevel_context = require('../../contexts/stack-level.context.cjs');
-var tokens_stylex = require('../theme/tokens.stylex.cjs');
-var close = require('../icon/icons/navigation/close.cjs');
 
-var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Picker = function Picker(_ref) {
   var _getDropdownWidth;
   var pickable = _ref.pickable,
-    className$1 = _ref.className,
     _ref$popupWidth = _ref.popupWidth,
     popupWidth = _ref$popupWidth === void 0 ? "match" : _ref$popupWidth,
-    style = _ref.style,
     children = _ref.children,
-    onClick = _ref.onClick,
     pickableClassName = _ref.pickableClassName,
     pickableStyle = _ref.pickableStyle,
     onPopperEnter = _ref.onPopperEnter,
     onPopperEntered = _ref.onPopperEntered,
     onPopperExited = _ref.onPopperExited,
-    onPopperExite = _ref.onPopperExite,
-    _onBlur = _ref.onBlur,
-    _ref$invalid = _ref.invalid,
-    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-    onClear = _ref.onClear,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _trigger = React.useRef(null);
+    onPopperExite = _ref.onPopperExite;
+  var triggerRef = React.useRef(null);
   var _useBoolean = relax.useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isOpen = _useBoolean2[0],
     _useBoolean2$ = _useBoolean2[1],
-    close$1 = _useBoolean2$.turnOff,
+    close = _useBoolean2$.turnOff,
     toggle = _useBoolean2$.toggle,
     open = _useBoolean2$.turnOn;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var pickableRef = React.useRef(null);
-  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "error", ["on-surface", tokens_stylex.OPACITY.thickest], ["on-surface", tokens_stylex.OPACITY.thin]]);
   var _useContext = React.useContext(context$1.DialogContext),
     container = _useContext.container;
   var _useStackLevelContext = stackLevel_context.useStackLevelContextContext(),
@@ -58,63 +44,27 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     stackLevelStyle = _useStackLevelContext.style;
   var getDropdownWidth = React.useCallback(function () {
     if (!popupWidth) return void 0;
-    if (!_trigger.current) return void 0;
-    return Math.max(_trigger.current.getBoundingClientRect().width, popupWidth === "match" ? 0 : popupWidth);
+    if (!triggerRef.current) return void 0;
+    return Math.max(triggerRef.current.getBoundingClientRect().width, popupWidth === "match" ? 0 : popupWidth);
   }, [popupWidth]);
-  React.useImperativeHandle(ref, function () {
-    return {
-      close: close$1
-    };
-  });
-  var click = relax.useEvent(function (event) {
-    if (disabled) return;
-    event.stopPropagation();
-    onClick === null || onClick === void 0 || onClick(event);
-    toggle();
-  });
-  var onBlur = relax.useEvent(function (e) {
-    e.stopPropagation();
-    _onBlur === null || _onBlur === void 0 || _onBlur(e);
-    close$1();
-  });
-  var _useFocus = relax.useFocus({
-      onBlur: onBlur
-    }),
-    _useFocus2 = _slicedToArray(_useFocus, 2),
-    isFocused = _useFocus2[0],
-    focusProps = _useFocus2[1];
-  var onDropdownClick = React.useCallback(function (e) {
-    return e.preventDefault();
+  var onDropdownClick = React.useCallback(function (event) {
+    event.preventDefault();
   }, []);
-  var clear = relax.useEvent(function (event) {
-    event.stopPropagation();
-    onClear === null || onClear === void 0 || onClear();
-  });
   var styled = {
-    picker: stylex.props(theme.$body.medium, input.styles.inputor, invalid && input.styles.invalid, disabled && input.styles.disabled),
-    pickable: {
-      className: "musaex-12ttxug"
-    }
+    pickable: stylex.props(styles.default.pickable)
   };
-  return /*#__PURE__*/React.createElement(context.Context.Provider, {
-    value: {
-      open: open,
-      isFocused: isFocused,
-      isOpen: isOpen
-    }
-  }, /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({
-    className: className.stringify(classNames.picker, isFocused && classNames.focused, className$1, styled.picker.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.picker.style), style), _themeColorVars),
-    ref: _trigger
-  }, !disabled && {
-    tabIndex: -1
-  }), {}, {
-    onClick: click
-  }, focusProps), children, !!onClear && !disabled && /*#__PURE__*/React.createElement(close.default, {
-    onClick: clear
-  })), /*#__PURE__*/React.createElement(popper.default, {
+  var renderProps = {
+    open: open,
+    close: close,
+    toggle: toggle,
+    isOpen: isOpen,
+    triggerRef: triggerRef
+  };
+  var trigger = children(renderProps);
+  var pickableContent = relax.isFunction(pickable) ? pickable(renderProps) : pickable;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, trigger, /*#__PURE__*/React.createElement(popper.default, {
     trigger: function trigger() {
-      return _trigger.current;
+      return triggerRef.current;
     },
     open: isOpen,
     className: classNames.dropdown,
@@ -135,7 +85,7 @@ var Picker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.pickable.style), pickableStyle), {}, {
       "--min-width": "".concat((_getDropdownWidth = getDropdownWidth()) !== null && _getDropdownWidth !== void 0 ? _getDropdownWidth : 0, "px")
     })
-  }, pickable)));
-});
+  }, pickableContent)));
+};
 
 exports.default = Picker;

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

@@ -1,4 +1,5 @@
 import React from "react";
-import type { PickerProps, PickerRef } from "../../types/picker";
-declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<PickerRef>>;
+import type { PickerProps } from "../../types/picker";
+import type { PopperTrigger } from "../../types/popper";
+declare const Picker: <T extends PopperTrigger = PopperTrigger>({ pickable, popupWidth, children, pickableClassName, pickableStyle, onPopperEnter, onPopperEntered, onPopperExited, onPopperExite, }: PickerProps<T>) => React.JSX.Element;
 export default Picker;