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

package/dist/components/popper/dropdown.mjs

@@ -1,12 +1,15 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import styles from './styles.mjs';
 import React, { forwardRef, useImperativeHandle } from 'react';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { useFloating } from './hooks.mjs';
-import { useTheme } from '../theme/hooks.mjs';
 import { contains } from '@aiszlab/relax/dom';
 import { CLASS_NAMES } from './context.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { OPACITY } from '../theme/tokens.stylex.mjs';
 
 var _excluded = ["open", "children", "placement", "style", "className", "onEnter", "onExit", "onExited", "onEntered", "trigger", "offset", "overlay", "arrow", "disappearable", "elevation", "portalClassName", "portalStyle"];
 var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -31,9 +34,9 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     elevation = _ref$elevation === void 0 ? true : _ref$elevation,
     portalClassName = _ref.portalClassName,
     portalStyle = _ref.portalStyle,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props$1 = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames(CLASS_NAMES);
-  var theme = useTheme();
+  var themeColorVars = useThemeColorVars(["surface", ["shadow", OPACITY.thicker], ["shadow", OPACITY.thick], ["shadow", OPACITY.medium]]);
   var _useFloating = useFloating({
       arrowable: arrowable,
       offset: offset,
@@ -60,34 +63,16 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   });
   var styled = {
-    dropdown: {
-      0: {
-        className: "musaex-10l6tqk musaex-17o6occ musaex-13vifvy musaex-1o0tod musaex-m9kfsm musaex-67bb7w musaex-1larqbn musaex-19991ni musaex-1g2r6go musaex-1s85apg musaex-g01cxk"
-      },
-      1: {
-        className: "musaex-10l6tqk musaex-17o6occ musaex-13vifvy musaex-1o0tod musaex-m9kfsm musaex-67bb7w musaex-1larqbn musaex-19991ni musaex-1g2r6go musaex-1s85apg musaex-g01cxk musaex-16g3oyh"
-      }
-    }[!!elevation << 0],
-    arrow: {
-      className: "musaex-10l6tqk musaex-1fdp3o3 musaex-151xgyu musaex-17o6occ musaex-1158fpu musaex-1gn0fna"
-    },
-    portal: {
-      0: {
-        className: "musaex-ixxii4 musaex-b3r6kr musaex-47corl musaex-10a8y8t musaex-1xd8qwe"
-      },
-      1: {
-        className: "musaex-ixxii4 musaex-b3r6kr musaex-47corl musaex-10a8y8t musaex-12yt2qg"
-      }
-    }[!!overlay << 0]
+    dropdown: props(styles.dropdown.base, elevation && styles.dropdown.elevation),
+    arrow: props(styles.arrow.base),
+    portal: props(styles.portal.base, overlay && styles.portal.overlay)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.popper, portalClassName, styled.portal.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.portal.style), portalStyle), {}, {
-      "--color-surface-container": theme.colors["surface-container"]
-    })
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.portal.style), portalStyle), themeColorVars)
   }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
     ref: floatableRef
-  }, props), {}, {
+  }, props$1), {}, {
     className: stringify(classNames.dropdown, className, styled.dropdown.className),
     style: _objectSpread(_objectSpread({}, styled.dropdown.style), style)
   }), children, arrowable && (/*#__PURE__*/React.createElement("div", {

package/dist/components/popper/hooks.cjs

@@ -6,7 +6,6 @@ var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var React = require('react');
 var react = require('motion/react');
 var relax = require('@aiszlab/relax');
-var useContainer = require('../../hooks/use-container.cjs');
 var dom = require('@floating-ui/dom');
 
 /**
@@ -45,11 +44,7 @@ var useFloating = function useFloating(_ref2) {
     disappearable = _ref2.disappearable;
   var floatableRef = React.useRef(null);
   var arrowRef = React.useRef(null);
-  var _useContainer = useContainer.useContainer({
-      container: _trigger,
-      useBody: false
-    }),
-    trigger = _useContainer.container;
+  var trigger = relax.isFunction(_trigger) ? _trigger() : _trigger;
   var _isOpen = React.useRef(false);
   // appear animation
   // prevent open again when opened
@@ -158,7 +153,7 @@ var useFloating = function useFloating(_ref2) {
     var cleanup = dom.autoUpdate(trigger, _floatable, function () {
       dom.computePosition(trigger, _floatable, {
         placement: placement,
-        middleware: [dom.flip(), dom.shift(), dom.offset(offsets), arrowable && !!arrowRef.current && dom.arrow({
+        middleware: [dom.offset(offsets), dom.flip(), dom.shift(), arrowable && !!arrowRef.current && dom.arrow({
           element: arrowRef.current,
           padding: 16
         })]
@@ -175,6 +170,7 @@ var useFloating = function useFloating(_ref2) {
         // set arrow styles
         if (middlewareData.arrow && !!arrowRef.current) {
           var _middlewareData$arrow, _middlewareData$arrow2;
+          // TODO use CSS vars replace `8`
           var offsetY = "".concat((_middlewareData$arrow = middlewareData.arrow.y) !== null && _middlewareData$arrow !== void 0 ? _middlewareData$arrow : 0 - 8, "px");
           var offsetX = "".concat((_middlewareData$arrow2 = middlewareData.arrow.x) !== null && _middlewareData$arrow2 !== void 0 ? _middlewareData$arrow2 : 0, "px");
           arrowRef.current.style.insetInlineStart = offsetX;

package/dist/components/popper/hooks.mjs

@@ -3,9 +3,8 @@ import _regenerator from '@babel/runtime/helpers/regenerator';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import { useRef, useEffect, useMemo } from 'react';
 import { animate } from 'motion/react';
-import { useEvent } from '@aiszlab/relax';
-import { useContainer } from '../../hooks/use-container.mjs';
-import { autoUpdate, computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';
+import { isFunction, useEvent } from '@aiszlab/relax';
+import { autoUpdate, computePosition, offset, flip, shift, arrow } from '@floating-ui/dom';
 
 /**
  * @description
@@ -43,11 +42,7 @@ var useFloating = function useFloating(_ref2) {
     disappearable = _ref2.disappearable;
   var floatableRef = useRef(null);
   var arrowRef = useRef(null);
-  var _useContainer = useContainer({
-      container: _trigger,
-      useBody: false
-    }),
-    trigger = _useContainer.container;
+  var trigger = isFunction(_trigger) ? _trigger() : _trigger;
   var _isOpen = useRef(false);
   // appear animation
   // prevent open again when opened
@@ -156,7 +151,7 @@ var useFloating = function useFloating(_ref2) {
     var cleanup = autoUpdate(trigger, _floatable, function () {
       computePosition(trigger, _floatable, {
         placement: placement,
-        middleware: [flip(), shift(), offset(offsets), arrowable && !!arrowRef.current && arrow({
+        middleware: [offset(offsets), flip(), shift(), arrowable && !!arrowRef.current && arrow({
           element: arrowRef.current,
           padding: 16
         })]
@@ -173,6 +168,7 @@ var useFloating = function useFloating(_ref2) {
         // set arrow styles
         if (middlewareData.arrow && !!arrowRef.current) {
           var _middlewareData$arrow, _middlewareData$arrow2;
+          // TODO use CSS vars replace `8`
           var offsetY = "".concat((_middlewareData$arrow = middlewareData.arrow.y) !== null && _middlewareData$arrow !== void 0 ? _middlewareData$arrow : 0 - 8, "px");
           var offsetX = "".concat((_middlewareData$arrow2 = middlewareData.arrow.x) !== null && _middlewareData$arrow2 !== void 0 ? _middlewareData$arrow2 : 0, "px");
           arrowRef.current.style.insetInlineStart = offsetX;

package/dist/components/popper/styles.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var portal = {
+  base: {
+    kVAEAm: "musaex-ixxii4",
+    kVQacm: "musaex-b3r6kr",
+    kfzvcC: "musaex-47corl",
+    kpwlN0: "musaex-10a8y8t",
+    kY2c9j: "musaex-1xd8qwe",
+    $$css: true
+  },
+  overlay: {
+    kY2c9j: "musaex-12yt2qg",
+    $$css: true
+  }
+};
+var dropdown = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kWkggS: "musaex-k7eln3",
+    k87sOh: "musaex-13vifvy",
+    kLqNvP: "musaex-1o0tod",
+    kaIpWk: "musaex-m9kfsm",
+    kfzvcC: "musaex-67bb7w",
+    k6sLGO: "musaex-1larqbn",
+    k1ekBW: "musaex-19991ni",
+    kIyJzY: "musaex-1g2r6go",
+    k1xSpc: "musaex-1s85apg",
+    kSiTet: "musaex-g01cxk",
+    $$css: true
+  },
+  elevation: {
+    ku685b: "musaex-qmh4cb",
+    $$css: true
+  }
+};
+var arrow = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kzqmXN: "musaex-1fdp3o3",
+    kZKoxP: "musaex-151xgyu",
+    kWkggS: "musaex-k7eln3",
+    k3aq6I: "musaex-1158fpu",
+    kY2c9j: "musaex-1gn0fna",
+    $$css: true
+  }
+};
+var styles = {
+  portal: portal,
+  dropdown: dropdown,
+  arrow: arrow
+};
+
+exports.default = styles;

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

@@ -0,0 +1,43 @@
+declare const styles: {
+    portal: Readonly<{
+        readonly base: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "fixed">;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+            readonly pointerEvents: import("@stylexjs/stylex").StyleXClassNameFor<"pointerEvents", "none">;
+            readonly inset: import("@stylexjs/stylex").StyleXClassNameFor<"inset", 0>;
+            readonly zIndex: import("@stylexjs/stylex").StyleXClassNameFor<"zIndex", string>;
+        }>;
+        readonly overlay: Readonly<{
+            readonly zIndex: import("@stylexjs/stylex").StyleXClassNameFor<"zIndex", string>;
+        }>;
+    }>;
+    dropdown: Readonly<{
+        readonly base: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface)">;
+            readonly insetBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockStart", 0>;
+            readonly insetInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineStart", 0>;
+            readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+            readonly pointerEvents: import("@stylexjs/stylex").StyleXClassNameFor<"pointerEvents", "auto">;
+            readonly willChange: import("@stylexjs/stylex").StyleXClassNameFor<"willChange", "opacity">;
+            readonly transitionProperty: import("@stylexjs/stylex").StyleXClassNameFor<"transitionProperty", "opacity">;
+            readonly transitionDuration: import("@stylexjs/stylex").StyleXClassNameFor<"transitionDuration", "0.1s">;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "none">;
+            readonly opacity: import("@stylexjs/stylex").StyleXClassNameFor<"opacity", 0>;
+        }>;
+        readonly elevation: Readonly<{
+            readonly filter: import("@stylexjs/stylex").StyleXClassNameFor<"filter", "drop-shadow(0 3px 3px var(--color-shadow-opacity-20))\n             drop-shadow(0 3px 4px var(--color-shadow-opacity-16))\n             drop-shadow(0 1px 8px var(--color-shadow-opacity-12))">;
+        }>;
+    }>;
+    arrow: Readonly<{
+        readonly base: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface)">;
+            readonly transform: import("@stylexjs/stylex").StyleXClassNameFor<"transform", "rotate(45deg)">;
+            readonly zIndex: import("@stylexjs/stylex").StyleXClassNameFor<"zIndex", string>;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/popper/styles.mjs

@@ -0,0 +1,52 @@
+var portal = {
+  base: {
+    kVAEAm: "musaex-ixxii4",
+    kVQacm: "musaex-b3r6kr",
+    kfzvcC: "musaex-47corl",
+    kpwlN0: "musaex-10a8y8t",
+    kY2c9j: "musaex-1xd8qwe",
+    $$css: true
+  },
+  overlay: {
+    kY2c9j: "musaex-12yt2qg",
+    $$css: true
+  }
+};
+var dropdown = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kWkggS: "musaex-k7eln3",
+    k87sOh: "musaex-13vifvy",
+    kLqNvP: "musaex-1o0tod",
+    kaIpWk: "musaex-m9kfsm",
+    kfzvcC: "musaex-67bb7w",
+    k6sLGO: "musaex-1larqbn",
+    k1ekBW: "musaex-19991ni",
+    kIyJzY: "musaex-1g2r6go",
+    k1xSpc: "musaex-1s85apg",
+    kSiTet: "musaex-g01cxk",
+    $$css: true
+  },
+  elevation: {
+    ku685b: "musaex-qmh4cb",
+    $$css: true
+  }
+};
+var arrow = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kzqmXN: "musaex-1fdp3o3",
+    kZKoxP: "musaex-151xgyu",
+    kWkggS: "musaex-k7eln3",
+    k3aq6I: "musaex-1158fpu",
+    kY2c9j: "musaex-1gn0fna",
+    $$css: true
+  }
+};
+var styles = {
+  portal: portal,
+  dropdown: dropdown,
+  arrow: arrow
+};
+
+export { styles as default };

package/dist/components/portal/__test__/portal.test.d.ts

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

package/dist/components/progress/circular.cjs

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+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 hooks = require('../theme/hooks.cjs');
 var hooks$1 = require('./hooks.cjs');
 
@@ -22,15 +24,9 @@ var Circular = function Circular(_ref) {
     segmentOffset = _useCircular.segmentOffset,
     segmentRef = _useCircular.segmentRef;
   var styled = {
-    progress: {
-      className: "musaex-9tu13d"
-    },
-    segment: {
-      className: "musaex-1uvt9ja musaex-14j3lo2 musaex-eknz9z musaex-13nejwh musaex-1owpc8m musaex-1x5ht3n musaex-1r01yae"
-    },
-    track: {
-      className: "musaex-1uvt9ja musaex-14j3lo2 musaex-eknz9z musaex-13nejwh musaex-1owpc8m"
-    }
+    progress: stylex.props(styles.default.circular.progress),
+    segment: stylex.props(styles.default.circular.shape, styles.default.circular.segment),
+    track: stylex.props(styles.default.circular.shape)
   };
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",

package/dist/components/progress/circular.mjs

@@ -1,5 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import styles from './styles.mjs';
 import React from 'react';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { useValue, useCircular } from './hooks.mjs';
 
@@ -18,15 +20,9 @@ var Circular = function Circular(_ref) {
     segmentOffset = _useCircular.segmentOffset,
     segmentRef = _useCircular.segmentRef;
   var styled = {
-    progress: {
-      className: "musaex-9tu13d"
-    },
-    segment: {
-      className: "musaex-1uvt9ja musaex-14j3lo2 musaex-eknz9z musaex-13nejwh musaex-1owpc8m musaex-1x5ht3n musaex-1r01yae"
-    },
-    track: {
-      className: "musaex-1uvt9ja musaex-14j3lo2 musaex-eknz9z musaex-13nejwh musaex-1owpc8m"
-    }
+    progress: props(styles.circular.progress),
+    segment: props(styles.circular.shape, styles.circular.segment),
+    track: props(styles.circular.shape)
   };
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",

package/dist/components/progress/linear.cjs

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+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 className = require('@aiszlab/relax/class-name');
 var hooks = require('./hooks.cjs');
 var context = require('./context.cjs');
@@ -21,12 +23,8 @@ var Linear = function Linear(_ref) {
     value = _useValue.value;
   var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary-container", "primary"]);
   var styled = {
-    progress: {
-      className: "musaex-92755x musaex-rntz3j musaex-1ncffr6 musaex-shxsqp"
-    },
-    segment: {
-      className: "musaex-1bl4301 musaex-qg7gut musaex-shxsqp musaex-19fix8x"
-    }
+    progress: stylex.props(styles.default.linear.progress),
+    segment: stylex.props(styles.default.linear.segment)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.progress, className$1, styled.progress.className),

package/dist/components/progress/linear.mjs

@@ -1,5 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import styles from './styles.mjs';
 import React, { useContext } from 'react';
+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 { useValue } from './hooks.mjs';
 import Context from './context.mjs';
@@ -17,12 +19,8 @@ var Linear = function Linear(_ref) {
     value = _useValue.value;
   var _themeColorVars = useThemeColorVars(["primary-container", "primary"]);
   var styled = {
-    progress: {
-      className: "musaex-92755x musaex-rntz3j musaex-1ncffr6 musaex-shxsqp"
-    },
-    segment: {
-      className: "musaex-1bl4301 musaex-qg7gut musaex-shxsqp musaex-19fix8x"
-    }
+    progress: props(styles.linear.progress),
+    segment: props(styles.linear.segment)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.progress, className, styled.progress.className),

package/dist/components/progress/styles.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var linear = {
+  progress: {
+    kzqmXN: "musaex-92755x",
+    kZKoxP: "musaex-rntz3j",
+    kWkggS: "musaex-1ncffr6",
+    kaIpWk: "musaex-shxsqp",
+    $$css: true
+  },
+  segment: {
+    kzqmXN: "musaex-1bl4301",
+    kZKoxP: "musaex-qg7gut",
+    kaIpWk: "musaex-shxsqp",
+    kWkggS: "musaex-19fix8x",
+    $$css: true
+  }
+};
+var circular = {
+  progress: {
+    k3aq6I: "musaex-9tu13d",
+    $$css: true
+  },
+  shape: {
+    kPFa82: "musaex-1uvt9ja",
+    kinZwp: "musaex-14j3lo2",
+    kiVckX: "musaex-eknz9z",
+    kfJifR: "musaex-13nejwh",
+    kU5bRw: "musaex-1owpc8m",
+    $$css: true
+  },
+  segment: {
+    k5rJSQ: "musaex-1x5ht3n",
+    kDRTOe: "musaex-1r01yae",
+    $$css: true
+  }
+};
+var styles = {
+  linear: linear,
+  circular: circular
+};
+
+exports.default = styles;

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

@@ -0,0 +1,33 @@
+declare const styles: {
+    linear: Readonly<{
+        readonly progress: Readonly<{
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-primary-container)">;
+            readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+        }>;
+        readonly segment: Readonly<{
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "var(--width)">;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+            readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-primary)">;
+        }>;
+    }>;
+    circular: Readonly<{
+        readonly progress: Readonly<{
+            readonly transform: import("@stylexjs/stylex").StyleXClassNameFor<"transform", "rotate(-90deg)">;
+        }>;
+        readonly shape: Readonly<{
+            readonly r: import("@stylexjs/stylex").StyleXClassNameFor<"r", "var(--radius)">;
+            readonly cx: import("@stylexjs/stylex").StyleXClassNameFor<"cx", `calc(var(--radius) + (${import("@stylexjs/stylex").StyleXVar<string>} / 2))`>;
+            readonly cy: import("@stylexjs/stylex").StyleXClassNameFor<"cy", `calc(var(--radius) + (${import("@stylexjs/stylex").StyleXVar<string>} / 2))`>;
+            readonly strokeWidth: import("@stylexjs/stylex").StyleXClassNameFor<"strokeWidth", string>;
+            readonly strokeLinecap: import("@stylexjs/stylex").StyleXClassNameFor<"strokeLinecap", "round">;
+        }>;
+        readonly segment: Readonly<{
+            readonly strokeDasharray: import("@stylexjs/stylex").StyleXClassNameFor<"strokeDasharray", "var(--segment-perimeter) var(--segment-perimeter)">;
+            readonly strokeDashoffset: import("@stylexjs/stylex").StyleXClassNameFor<"strokeDashoffset", "var(--segment-offset)">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/progress/styles.mjs

@@ -0,0 +1,41 @@
+var linear = {
+  progress: {
+    kzqmXN: "musaex-92755x",
+    kZKoxP: "musaex-rntz3j",
+    kWkggS: "musaex-1ncffr6",
+    kaIpWk: "musaex-shxsqp",
+    $$css: true
+  },
+  segment: {
+    kzqmXN: "musaex-1bl4301",
+    kZKoxP: "musaex-qg7gut",
+    kaIpWk: "musaex-shxsqp",
+    kWkggS: "musaex-19fix8x",
+    $$css: true
+  }
+};
+var circular = {
+  progress: {
+    k3aq6I: "musaex-9tu13d",
+    $$css: true
+  },
+  shape: {
+    kPFa82: "musaex-1uvt9ja",
+    kinZwp: "musaex-14j3lo2",
+    kiVckX: "musaex-eknz9z",
+    kfJifR: "musaex-13nejwh",
+    kU5bRw: "musaex-1owpc8m",
+    $$css: true
+  },
+  segment: {
+    k5rJSQ: "musaex-1x5ht3n",
+    kDRTOe: "musaex-1r01yae",
+    $$css: true
+  }
+};
+var styles = {
+  linear: linear,
+  circular: circular
+};
+
+export { styles as default };

package/dist/components/radio/radio.cjs

@@ -5,6 +5,7 @@ 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 context = require('./context.cjs');
 var relax = require('@aiszlab/relax');
@@ -15,14 +16,6 @@ var theme = require('../theme/theme.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 
 var _excluded = ["children", "value", "checked", "disabled"];
-var styles = {
-  label: {
-    "default": {
-      kg3NbH: "musaex-1kvmt37",
-      $$css: true
-    }
-  }
-};
 var Radio = function Radio(_ref) {
   var children = _ref.children,
     value = _ref.value,
@@ -66,41 +59,9 @@ var Radio = function Radio(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isChecked, contextValue, value, isDisabled]);
   var styled = {
-    radio: {
-      0: {
-        className: "musaex-78zum5 musaex-6s0dn4 musaex-1ypdohk"
-      },
-      1: {
-        className: "musaex-78zum5 musaex-6s0dn4 musaex-1h6gzvc"
-      }
-    }[!!isDisabled << 0],
-    input: {
-      0: {
-        className: "musaex-lshs6z musaex-151xgyu musaex-1fdp3o3 musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mper1u musaex-q3gua8 musaex-100rkj9 musaex-170pinb musaex-hkezso musaex-78q1ud musaex-l0urhf musaex-x38sju musaex-1oqwzx8 musaex-86avzo musaex-10d3x5w musaex-81ks7e musaex-yttlx6 musaex-6orayw musaex-mbwe65"
-      },
-      4: {
-        className: "musaex-lshs6z musaex-151xgyu musaex-1fdp3o3 musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mper1u musaex-q3gua8 musaex-100rkj9 musaex-170pinb musaex-hkezso musaex-78q1ud musaex-l0urhf musaex-x38sju musaex-86avzo musaex-81ks7e musaex-yttlx6 musaex-6orayw musaex-mbwe65 musaex-4z7c0w musaex-vn5jsv"
-      },
-      2: {
-        className: "musaex-lshs6z musaex-151xgyu musaex-1fdp3o3 musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mper1u musaex-q3gua8 musaex-100rkj9 musaex-170pinb musaex-hkezso musaex-78q1ud musaex-l0urhf musaex-x38sju musaex-86avzo musaex-81ks7e musaex-yttlx6 musaex-6orayw musaex-mbwe65 musaex-1oqwzx8 musaex-xpv2yf musaex-10tli2e musaex-1hmns74 musaex-11srvyv musaex-1vd6n00 musaex-ppt4qs musaex-1l043wi musaex-1yqvhn5"
-      },
-      6: {
-        className: "musaex-lshs6z musaex-151xgyu musaex-1fdp3o3 musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mper1u musaex-q3gua8 musaex-100rkj9 musaex-170pinb musaex-hkezso musaex-78q1ud musaex-l0urhf musaex-x38sju musaex-86avzo musaex-81ks7e musaex-yttlx6 musaex-6orayw musaex-mbwe65 musaex-1oqwzx8 musaex-xpv2yf musaex-10tli2e musaex-1hmns74 musaex-11srvyv musaex-1vd6n00 musaex-ppt4qs musaex-1l043wi musaex-1yqvhn5"
-      },
-      1: {
-        className: "musaex-lshs6z musaex-151xgyu musaex-1fdp3o3 musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mper1u musaex-q3gua8 musaex-100rkj9 musaex-170pinb musaex-hkezso musaex-78q1ud musaex-l0urhf musaex-x38sju musaex-1oqwzx8 musaex-86avzo musaex-10d3x5w musaex-81ks7e musaex-yttlx6 musaex-6orayw musaex-mbwe65 musaex-15ozc13"
-      },
-      5: {
-        className: "musaex-lshs6z musaex-151xgyu musaex-1fdp3o3 musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mper1u musaex-q3gua8 musaex-100rkj9 musaex-170pinb musaex-hkezso musaex-78q1ud musaex-l0urhf musaex-x38sju musaex-86avzo musaex-81ks7e musaex-yttlx6 musaex-6orayw musaex-mbwe65 musaex-4z7c0w musaex-vn5jsv musaex-15ozc13"
-      },
-      3: {
-        className: "musaex-lshs6z musaex-151xgyu musaex-1fdp3o3 musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mper1u musaex-q3gua8 musaex-100rkj9 musaex-170pinb musaex-hkezso musaex-78q1ud musaex-l0urhf musaex-x38sju musaex-86avzo musaex-81ks7e musaex-yttlx6 musaex-6orayw musaex-mbwe65 musaex-1oqwzx8 musaex-xpv2yf musaex-10tli2e musaex-1hmns74 musaex-11srvyv musaex-1vd6n00 musaex-ppt4qs musaex-1l043wi musaex-1yqvhn5 musaex-15ozc13"
-      },
-      7: {
-        className: "musaex-lshs6z musaex-151xgyu musaex-1fdp3o3 musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-mper1u musaex-q3gua8 musaex-100rkj9 musaex-170pinb musaex-hkezso musaex-78q1ud musaex-l0urhf musaex-x38sju musaex-86avzo musaex-81ks7e musaex-yttlx6 musaex-6orayw musaex-mbwe65 musaex-1oqwzx8 musaex-xpv2yf musaex-10tli2e musaex-1hmns74 musaex-11srvyv musaex-1vd6n00 musaex-ppt4qs musaex-1l043wi musaex-1yqvhn5 musaex-15ozc13"
-      }
-    }[!!isChecked << 2 | !!isDisabled << 1 | !!!isChecked << 0],
-    label: stylex.props(theme.$body.medium, styles.label["default"])
+    radio: stylex.props(styles.default.radio.base, isDisabled && styles.default.radio.disabled),
+    input: stylex.props(styles.default.input.base, isChecked && styles.default.input.checked, isDisabled && styles.default.input.disabled, !isChecked && styles.default.input.unckecked),
+    label: stylex.props(theme.$body.medium, styles.default.label.base)
   };
   return /*#__PURE__*/React.createElement("label", {
     className: className.stringify(classNames.radio, props.className, styled.radio.className),