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

package/dist/components/checkbox/styles.cjs

@@ -2,31 +2,57 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {
-  checkbox: {
-    "default": {
-      k1xSpc: "musaex-3nfvp2",
-      kGNEyG: "musaex-6s0dn4",
-      kkrTdU: "musaex-1ypdohk",
-      kfSwDN: "musaex-87ps6o",
-      $$css: true
-    },
-    disabled: {
-      kkrTdU: "musaex-1h6gzvc",
-      kSiTet: "musaex-15anptp",
-      $$css: true
-    },
-    medium: {
-      "--size": "musaex-1me236a",
-      "--check-size": "musaex-1ka6x5y",
-      "--border-width": "musaex-omsca5",
-      "--check-offset": "musaex-9qylla",
-      $$css: true
-    }
+var checkbox = {
+  base: {
+    k1xSpc: "musaex-3nfvp2",
+    kGNEyG: "musaex-6s0dn4",
+    kkrTdU: "musaex-1ypdohk",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  },
+  disabled: {
+    kkrTdU: "musaex-1h6gzvc",
+    kSiTet: "musaex-15anptp",
+    $$css: true
+  },
+  medium: {
+    "--size": "musaex-1me236a",
+    "--check-size": "musaex-1ka6x5y",
+    "--border-width": "musaex-omsca5",
+    "--check-offset": "musaex-9qylla",
+    $$css: true
+  }
+};
+var input = {
+  base: {
+    k1xSpc: "musaex-1s85apg",
+    $$css: true
+  }
+};
+var check = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kzqmXN: "musaex-jynsqg",
+    kZKoxP: "musaex-1516w2u",
+    k3aq6I: "musaex-dewxu2",
+    $$css: true
+  }
+};
+var label = {
+  base: {
+    kg3NbH: "musaex-1kvmt37",
+    $$css: true
   },
+  invalid: {
+    kMwMTN: "musaex-jt36v0",
+    $$css: true
+  }
+};
+var styles = {
+  checkbox: checkbox,
   layer: {
-    "default": {
-      "default": {
+    base: {
+      base: {
         k1xSpc: "musaex-78zum5",
         kjj79g: "musaex-l56j7k",
         kGNEyG: "musaex-6s0dn4",
@@ -34,7 +60,7 @@ var styles = {
       }
     },
     rippleable: {
-      "default": {
+      base: {
         kVAEAm: "musaex-1n2onr6",
         kVQacm: "musaex-b3r6kr",
         kmVPX3: "musaex-9z89t8",
@@ -67,8 +93,8 @@ var styles = {
     }
   },
   inputer: {
-    "default": {
-      "default": {
+    base: {
+      base: {
         kzqmXN: "musaex-1fjlwjz",
         kZKoxP: "musaex-188dgw3",
         k7Eaqz: "musaex-1hnvul",
@@ -88,7 +114,7 @@ var styles = {
       }
     },
     checked: {
-      "default": {
+      base: {
         kMwMTN: "musaex-1szb5uh",
         kVAM5u: "musaex-1wyl6wi",
         kWkggS: "musaex-19fix8x",
@@ -102,7 +128,7 @@ var styles = {
       }
     },
     invalid: {
-      "default": {
+      base: {
         kVAM5u: "musaex-1ofxpqo",
         $$css: true
       },
@@ -119,31 +145,9 @@ var styles = {
       }
     }
   },
-  input: {
-    "default": {
-      k1xSpc: "musaex-1s85apg",
-      $$css: true
-    }
-  },
-  check: {
-    "default": {
-      kVAEAm: "musaex-10l6tqk",
-      kzqmXN: "musaex-jynsqg",
-      kZKoxP: "musaex-1516w2u",
-      k3aq6I: "musaex-dewxu2",
-      $$css: true
-    }
-  },
-  label: {
-    "default": {
-      kg3NbH: "musaex-1kvmt37",
-      $$css: true
-    },
-    invalid: {
-      kMwMTN: "musaex-jt36v0",
-      $$css: true
-    }
-  }
+  input: input,
+  check: check,
+  label: label
 };
 
 exports.default = styles;

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

@@ -1,6 +1,6 @@
 declare const styles: {
     checkbox: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
             readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
             readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "pointer">;
@@ -18,15 +18,15 @@ declare const styles: {
         }>;
     }>;
     layer: {
-        default: Readonly<{
-            readonly default: Readonly<{
+        base: Readonly<{
+            readonly base: Readonly<{
                 readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
                 readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "center">;
                 readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
             }>;
         }>;
         rippleable: Readonly<{
-            readonly default: Readonly<{
+            readonly base: Readonly<{
                 readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "relative">;
                 readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
                 readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
@@ -79,8 +79,8 @@ declare const styles: {
         }>;
     };
     inputer: {
-        default: Readonly<{
-            readonly default: Readonly<{
+        base: Readonly<{
+            readonly base: Readonly<{
                 readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "var(--size)">;
                 readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", "var(--size)">;
                 readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", "var(--size)">;
@@ -98,7 +98,7 @@ declare const styles: {
             }>;
         }>;
         checked: Readonly<{
-            readonly default: Readonly<{
+            readonly base: Readonly<{
                 readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-primary)">;
                 readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-primary)">;
                 readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-primary)">;
@@ -110,7 +110,7 @@ declare const styles: {
             }>;
         }>;
         invalid: Readonly<{
-            readonly default: Readonly<{
+            readonly base: Readonly<{
                 readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-error)">;
             }>;
             readonly checked: Readonly<{
@@ -125,12 +125,12 @@ declare const styles: {
         }>;
     };
     input: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "none">;
         }>;
     }>;
     check: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
             readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "var(--check-size)">;
             readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", "var(--check-size)">;
@@ -138,7 +138,7 @@ declare const styles: {
         }>;
     }>;
     label: Readonly<{
-        readonly default: Readonly<{
+        readonly base: Readonly<{
             readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
         }>;
         readonly invalid: Readonly<{

package/dist/components/checkbox/styles.mjs

@@ -1,28 +1,54 @@
-var styles = {
-  checkbox: {
-    "default": {
-      k1xSpc: "musaex-3nfvp2",
-      kGNEyG: "musaex-6s0dn4",
-      kkrTdU: "musaex-1ypdohk",
-      kfSwDN: "musaex-87ps6o",
-      $$css: true
-    },
-    disabled: {
-      kkrTdU: "musaex-1h6gzvc",
-      kSiTet: "musaex-15anptp",
-      $$css: true
-    },
-    medium: {
-      "--size": "musaex-1me236a",
-      "--check-size": "musaex-1ka6x5y",
-      "--border-width": "musaex-omsca5",
-      "--check-offset": "musaex-9qylla",
-      $$css: true
-    }
+var checkbox = {
+  base: {
+    k1xSpc: "musaex-3nfvp2",
+    kGNEyG: "musaex-6s0dn4",
+    kkrTdU: "musaex-1ypdohk",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  },
+  disabled: {
+    kkrTdU: "musaex-1h6gzvc",
+    kSiTet: "musaex-15anptp",
+    $$css: true
+  },
+  medium: {
+    "--size": "musaex-1me236a",
+    "--check-size": "musaex-1ka6x5y",
+    "--border-width": "musaex-omsca5",
+    "--check-offset": "musaex-9qylla",
+    $$css: true
+  }
+};
+var input = {
+  base: {
+    k1xSpc: "musaex-1s85apg",
+    $$css: true
+  }
+};
+var check = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kzqmXN: "musaex-jynsqg",
+    kZKoxP: "musaex-1516w2u",
+    k3aq6I: "musaex-dewxu2",
+    $$css: true
+  }
+};
+var label = {
+  base: {
+    kg3NbH: "musaex-1kvmt37",
+    $$css: true
   },
+  invalid: {
+    kMwMTN: "musaex-jt36v0",
+    $$css: true
+  }
+};
+var styles = {
+  checkbox: checkbox,
   layer: {
-    "default": {
-      "default": {
+    base: {
+      base: {
         k1xSpc: "musaex-78zum5",
         kjj79g: "musaex-l56j7k",
         kGNEyG: "musaex-6s0dn4",
@@ -30,7 +56,7 @@ var styles = {
       }
     },
     rippleable: {
-      "default": {
+      base: {
         kVAEAm: "musaex-1n2onr6",
         kVQacm: "musaex-b3r6kr",
         kmVPX3: "musaex-9z89t8",
@@ -63,8 +89,8 @@ var styles = {
     }
   },
   inputer: {
-    "default": {
-      "default": {
+    base: {
+      base: {
         kzqmXN: "musaex-1fjlwjz",
         kZKoxP: "musaex-188dgw3",
         k7Eaqz: "musaex-1hnvul",
@@ -84,7 +110,7 @@ var styles = {
       }
     },
     checked: {
-      "default": {
+      base: {
         kMwMTN: "musaex-1szb5uh",
         kVAM5u: "musaex-1wyl6wi",
         kWkggS: "musaex-19fix8x",
@@ -98,7 +124,7 @@ var styles = {
       }
     },
     invalid: {
-      "default": {
+      base: {
         kVAM5u: "musaex-1ofxpqo",
         $$css: true
       },
@@ -115,31 +141,9 @@ var styles = {
       }
     }
   },
-  input: {
-    "default": {
-      k1xSpc: "musaex-1s85apg",
-      $$css: true
-    }
-  },
-  check: {
-    "default": {
-      kVAEAm: "musaex-10l6tqk",
-      kzqmXN: "musaex-jynsqg",
-      kZKoxP: "musaex-1516w2u",
-      k3aq6I: "musaex-dewxu2",
-      $$css: true
-    }
-  },
-  label: {
-    "default": {
-      kg3NbH: "musaex-1kvmt37",
-      $$css: true
-    },
-    invalid: {
-      kMwMTN: "musaex-jt36v0",
-      $$css: true
-    }
-  }
+  input: input,
+  check: check,
+  label: label
 };
 
 export { styles as default };

package/dist/components/clock/clock.cjs

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var styles = require('./styles.cjs');
 var React = require('react');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var column = require('./column.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var className = require('@aiszlab/relax/class-name');
 var divider = require('../divider/divider.cjs');
 var context = require('./context.cjs');
@@ -17,9 +19,7 @@ var Clock = function Clock(_ref) {
     className$1 = _ref.className,
     style = _ref.style;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var styled = {
-    className: "musaex-78zum5 musaex-1m3v4wt musaex-5xj0sk"
-  };
+  var styled = stylex.props(styles.default.clock.base);
   var columns = ["hour", "minute", "second"];
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: {

package/dist/components/clock/clock.mjs

@@ -1,8 +1,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import styles from './styles.mjs';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import Column from './column.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import Divider from '../divider/divider.mjs';
 import { Context, CLASS_NAMES } from './context.mjs';
@@ -13,9 +15,7 @@ var Clock = function Clock(_ref) {
     className = _ref.className,
     style = _ref.style;
   var classNames = useClassNames(CLASS_NAMES);
-  var styled = {
-    className: "musaex-78zum5 musaex-1m3v4wt musaex-5xj0sk"
-  };
+  var styled = props(styles.clock.base);
   var columns = ["hour", "minute", "second"];
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {

package/dist/components/clock/column.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var styles = require('./styles.cjs');
 var React = require('react');
 var menu = require('../menu/menu.cjs');
 var relax = require('@aiszlab/relax');
@@ -17,15 +18,6 @@ var UNITS = {
   minute: 60,
   second: 60
 };
-var styles = {
-  menu: {
-    kXHlph: "musaex-6ikm8r",
-    kORKVm: "musaex-10wlt62 musaex-1fjziz3",
-    kzqmXN: "musaex-108untq",
-    kqGvvJ: "musaex-1yke8k6",
-    $$css: true
-  }
-};
 var Column = function Column(_ref) {
   var unit = _ref.unit,
     value = _ref.value,
@@ -46,10 +38,8 @@ var Column = function Column(_ref) {
     (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 || _menuRef$current2.scrollTo(value !== null && value !== void 0 ? value : 0, 100);
   }, [value]);
   var styled = {
-    menu: stylex.props(theme.$scrollbar["default"], styles.menu),
-    item: {
-      className: "musaex-108untq musaex-78zum5 musaex-l56j7k"
-    }
+    menu: stylex.props(theme.$scrollbar.base, styles.default.column.menu),
+    item: stylex.props(styles.default.column.item)
   };
   return /*#__PURE__*/React.createElement(menu.default, {
     selectedKeys: value,

package/dist/components/clock/column.mjs

@@ -1,4 +1,5 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import styles from './styles.mjs';
 import React, { useContext, useRef, useCallback, useEffect } from 'react';
 import Menu from '../menu/menu.mjs';
 import { isVoid } from '@aiszlab/relax';
@@ -13,15 +14,6 @@ var UNITS = {
   minute: 60,
   second: 60
 };
-var styles = {
-  menu: {
-    kXHlph: "musaex-6ikm8r",
-    kORKVm: "musaex-10wlt62 musaex-1fjziz3",
-    kzqmXN: "musaex-108untq",
-    kqGvvJ: "musaex-1yke8k6",
-    $$css: true
-  }
-};
 var Column = function Column(_ref) {
   var unit = _ref.unit,
     value = _ref.value,
@@ -42,10 +34,8 @@ var Column = function Column(_ref) {
     (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 || _menuRef$current2.scrollTo(value !== null && value !== void 0 ? value : 0, 100);
   }, [value]);
   var styled = {
-    menu: props($scrollbar["default"], styles.menu),
-    item: {
-      className: "musaex-108untq musaex-78zum5 musaex-l56j7k"
-    }
+    menu: props($scrollbar.base, styles.column.menu),
+    item: props(styles.column.item)
   };
   return /*#__PURE__*/React.createElement(Menu, {
     selectedKeys: value,

package/dist/components/clock/styles.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var column = {
+  menu: {
+    kXHlph: "musaex-6ikm8r",
+    kORKVm: "musaex-10wlt62 musaex-1fjziz3",
+    kzqmXN: "musaex-108untq",
+    kqGvvJ: "musaex-1yke8k6",
+    $$css: true
+  },
+  item: {
+    kzqmXN: "musaex-108untq",
+    k1xSpc: "musaex-78zum5",
+    kjj79g: "musaex-l56j7k",
+    $$css: true
+  }
+};
+var clock = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kZKoxP: "musaex-1m3v4wt",
+    k1C7PZ: "musaex-5xj0sk",
+    $$css: true
+  }
+};
+var styles = {
+  column: column,
+  clock: clock
+};
+
+exports.default = styles;

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

@@ -0,0 +1,25 @@
+declare const styles: {
+    column: Readonly<{
+        readonly menu: Readonly<{
+            readonly overflowX: import("@stylexjs/stylex").StyleXClassNameFor<"overflowX", "hidden">;
+            readonly overflowY: import("@stylexjs/stylex").StyleXClassNameFor<"overflowY", "hidden" | {
+                readonly "@media (hover: hover)": "auto";
+            }>;
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+            readonly marginBlock: import("@stylexjs/stylex").StyleXClassNameFor<"marginBlock", string>;
+        }>;
+        readonly item: Readonly<{
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "center">;
+        }>;
+    }>;
+    clock: Readonly<{
+        readonly base: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", 200>;
+            readonly columnGap: import("@stylexjs/stylex").StyleXClassNameFor<"columnGap", string>;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/clock/styles.mjs

@@ -0,0 +1,29 @@
+var column = {
+  menu: {
+    kXHlph: "musaex-6ikm8r",
+    kORKVm: "musaex-10wlt62 musaex-1fjziz3",
+    kzqmXN: "musaex-108untq",
+    kqGvvJ: "musaex-1yke8k6",
+    $$css: true
+  },
+  item: {
+    kzqmXN: "musaex-108untq",
+    k1xSpc: "musaex-78zum5",
+    kjj79g: "musaex-l56j7k",
+    $$css: true
+  }
+};
+var clock = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kZKoxP: "musaex-1m3v4wt",
+    k1C7PZ: "musaex-5xj0sk",
+    $$css: true
+  }
+};
+var styles = {
+  column: column,
+  clock: clock
+};
+
+export { styles as default };

package/dist/components/collapse/collapse.cjs

@@ -4,9 +4,11 @@ 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 useClassNames = require('../../hooks/use-class-names.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 className = require('@aiszlab/relax/class-name');
 var hooks = require('./hooks.cjs');
 var context = require('./context.cjs');
@@ -34,9 +36,7 @@ var Collapse = function Collapse(_ref) {
   var theme = hooks$1.useTheme();
   // no need to render when items is empty
   if (items.length === 0) return null;
-  var styled = {
-    className: "musaex-1iyq3db musaex-1y0btm7 musaex-axmpxa musaex-m9kfsm"
-  };
+  var styled = stylex.props(styles.default.collapse.base);
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: {
       activeKeys: activeKeys,

package/dist/components/collapse/collapse.mjs

@@ -1,8 +1,10 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import CollapseItem from './item.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { useActiveKeys } from './hooks.mjs';
 import { Context, CLASS_NAMES } from './context.mjs';
@@ -30,9 +32,7 @@ var Collapse = function Collapse(_ref) {
   var theme = useTheme();
   // no need to render when items is empty
   if (items.length === 0) return null;
-  var styled = {
-    className: "musaex-1iyq3db musaex-1y0btm7 musaex-axmpxa musaex-m9kfsm"
-  };
+  var styled = props(styles.collapse.base);
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {
       activeKeys: activeKeys,