musae 0.2.26 → 0.3.0

package/dist/components/quote/styles.cjs

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  variables: function variables(props) {
+    return [{
+      "--outline-color": "musaex-1x71zss",
+      $$css: true
+    }, {
+      "----outline-color": props.outlineColor != null ? props.outlineColor : "initial"
+    }];
+  },
+  quote: {
+    position: "musaex-1n2onr6",
+    paddingInlineStart: "musaex-7t49h1",
+    paddingLeft: null,
+    paddingRight: null,
+    "::before_content": "musaex-1cpjm7i",
+    "::before_position": "musaex-1hmns74",
+    "::before_insetBlock": "musaex-1nc033x",
+    "::before_top": null,
+    "::before_bottom": null,
+    "::before_insetInlineStart": "musaex-1682cnc",
+    "::before_left": null,
+    "::before_right": null,
+    "::before_width": "musaex-bv6p2w",
+    "::before_backgroundColor": "musaex-1xmraew",
+    $$css: true
+  }
+};
+
+exports.default = styles;

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 /**
  * @description
  * quote props

package/dist/components/radio/context.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var Context = /*#__PURE__*/React.createContext(null);
+
+exports.default = Context;

package/dist/components/radio/group.cjs

@@ -0,0 +1,37 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var context = require('./context.cjs');
+var relax = require('@aiszlab/relax');
+
+var _excluded = ["disabled", "children"];
+var Group = function Group(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // controlled value
+  var _useControlledState = relax.useControlledState(props.value),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    value = _useControlledState2[0],
+    setValue = _useControlledState2[1];
+  // value change handler
+  var change = React.useCallback(function (value) {
+    setValue(value);
+  }, [setValue]);
+  // context value
+  var contextValue = React.useMemo(function () {
+    return {
+      value: value,
+      change: change,
+      isDisabled: disabled
+    };
+  }, [value, change, disabled]);
+  return /*#__PURE__*/React.createElement(context.default.Provider, {
+    value: contextValue
+  }, children);
+};
+
+exports.default = Group;

package/dist/components/radio/{group.js → group.mjs}

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useCallback, useMemo } from 'react';
-import Context from './context.js';
+import Context from './context.mjs';
 import { useControlledState } from '@aiszlab/relax';
 
 var _excluded = ["disabled", "children"];

package/dist/components/radio/index.cjs

@@ -0,0 +1,8 @@
+var radio = require('./radio.cjs');
+var group = require('./group.cjs');
+
+var Radio = Object.assign(radio.default, {
+  Group: group.default
+});
+
+exports.Radio = Radio;

package/dist/components/radio/{index.js → index.mjs}

@@ -1,5 +1,5 @@
-import Radio$1 from './radio.js';
-import Group from './group.js';
+import Radio$1 from './radio.mjs';
+import Group from './group.mjs';
 
 var Radio = Object.assign(Radio$1, {
   Group: Group

package/dist/components/radio/radio.cjs

@@ -0,0 +1,241 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var context = require('./context.cjs');
+var relax = require('@aiszlab/relax');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var theme = require('../theme/theme.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var _excluded = ["children", "value", "checked", "disabled"];
+var styles = {
+  radio: {
+    "default": {
+      display: "musaex-78zum5",
+      alignItems: "musaex-6s0dn4",
+      cursor: "musaex-1ypdohk",
+      $$css: true
+    },
+    disabled: {
+      cursor: "musaex-1h6gzvc",
+      $$css: true
+    }
+  },
+  trigger: {
+    "default": function _default(props) {
+      return [{
+        visibility: "musaex-lshs6z",
+        height: "musaex-9al7vl",
+        width: "musaex-u8rtl",
+        display: "musaex-78zum5",
+        justifyContent: "musaex-l56j7k",
+        alignItems: "musaex-6s0dn4",
+        cursor: "musaex-mper1u",
+        "::after_content": "musaex-1s928wv",
+        "::after_visibility": "musaex-170pinb",
+        "::after_display": "musaex-hkezso",
+        "::after_height": "musaex-18s1y6t",
+        "::after_width": "musaex-fuyjx5",
+        "::after_boxSizing": "musaex-x38sju",
+        "::after_borderWidth": "musaex-qxg7lk",
+        "::after_borderInlineWidth": null,
+        "::after_borderInlineStartWidth": null,
+        "::after_borderLeftWidth": null,
+        "::after_borderInlineEndWidth": null,
+        "::after_borderRightWidth": null,
+        "::after_borderBlockWidth": null,
+        "::after_borderTopWidth": null,
+        "::after_borderBottomWidth": null,
+        "::after_borderStyle": "musaex-86avzo",
+        "::after_borderInlineStyle": null,
+        "::after_borderInlineStartStyle": null,
+        "::after_borderLeftStyle": null,
+        "::after_borderInlineEndStyle": null,
+        "::after_borderRightStyle": null,
+        "::after_borderBlockStyle": null,
+        "::after_borderTopStyle": null,
+        "::after_borderBottomStyle": null,
+        "::after_borderColor": "musaex-3yd8hb",
+        "::after_borderInlineColor": null,
+        "::after_borderInlineStartColor": null,
+        "::after_borderLeftColor": null,
+        "::after_borderInlineEndColor": null,
+        "::after_borderRightColor": null,
+        "::after_borderBlockColor": null,
+        "::after_borderTopColor": null,
+        "::after_borderBottomColor": null,
+        "::after_borderRadius": "musaex-4lv03f",
+        "::after_borderStartStartRadius": null,
+        "::after_borderStartEndRadius": null,
+        "::after_borderEndStartRadius": null,
+        "::after_borderEndEndRadius": null,
+        "::after_borderTopLeftRadius": null,
+        "::after_borderTopRightRadius": null,
+        "::after_borderBottomLeftRadius": null,
+        "::after_borderBottomRightRadius": null,
+        "::after_willChange": "musaex-yttlx6",
+        "::after_transitionProperty": "musaex-6orayw",
+        "::after_transitionDuration": "musaex-t0fc71",
+        $$css: true
+      }, {
+        "--joftei": props.borderColor != null ? props.borderColor : "initial"
+      }];
+    },
+    checked: function checked(props) {
+      return [{
+        "::after_borderColor": "musaex-3yd8hb",
+        "::after_borderInlineColor": null,
+        "::after_borderInlineStartColor": null,
+        "::after_borderLeftColor": null,
+        "::after_borderInlineEndColor": null,
+        "::after_borderRightColor": null,
+        "::after_borderBlockColor": null,
+        "::after_borderTopColor": null,
+        "::after_borderBottomColor": null,
+        "::after_borderWidth": "musaex-1na0ikb",
+        "::after_borderInlineWidth": null,
+        "::after_borderInlineStartWidth": null,
+        "::after_borderLeftWidth": null,
+        "::after_borderInlineEndWidth": null,
+        "::after_borderRightWidth": null,
+        "::after_borderBlockWidth": null,
+        "::after_borderTopWidth": null,
+        "::after_borderBottomWidth": null,
+        $$css: true
+      }, {
+        "--joftei": props.borderColor != null ? props.borderColor : "initial"
+      }];
+    },
+    disabled: function disabled(props) {
+      return [{
+        "::after_borderWidth": "musaex-qxg7lk",
+        "::after_borderInlineWidth": null,
+        "::after_borderInlineStartWidth": null,
+        "::after_borderLeftWidth": null,
+        "::after_borderInlineEndWidth": null,
+        "::after_borderRightWidth": null,
+        "::after_borderBlockWidth": null,
+        "::after_borderTopWidth": null,
+        "::after_borderBottomWidth": null,
+        "::after_borderColor": "musaex-3yd8hb",
+        "::after_borderInlineColor": null,
+        "::after_borderInlineStartColor": null,
+        "::after_borderLeftColor": null,
+        "::after_borderInlineEndColor": null,
+        "::after_borderRightColor": null,
+        "::after_borderBlockColor": null,
+        "::after_borderTopColor": null,
+        "::after_borderBottomColor": null,
+        "::before_content": "musaex-1cpjm7i",
+        "::before_position": "musaex-1hmns74",
+        "::before_visibility": "musaex-11srvyv",
+        "::before_height": "musaex-1vx57bg",
+        "::before_width": "musaex-16absqa",
+        "::before_backgroundColor": "musaex-rr6jkh",
+        "::before_borderRadius": "musaex-9vl23n",
+        "::before_borderStartStartRadius": null,
+        "::before_borderStartEndRadius": null,
+        "::before_borderEndStartRadius": null,
+        "::before_borderEndEndRadius": null,
+        "::before_borderTopLeftRadius": null,
+        "::before_borderTopRightRadius": null,
+        "::before_borderBottomLeftRadius": null,
+        "::before_borderBottomRightRadius": null,
+        $$css: true
+      }, {
+        "--joftei": props.backgroundColor != null ? props.backgroundColor : "initial",
+        "--1lrm08k": props.backgroundColor != null ? props.backgroundColor : "initial"
+      }];
+    },
+    unckecked: {
+      "::before_display": "musaex-15ozc13",
+      $$css: true
+    }
+  },
+  label: {
+    "default": {
+      paddingInline: "musaex-nd81q0",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      $$css: true
+    }
+  }
+};
+var Radio = function Radio(_ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    checked = _ref.checked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextValue = React.useContext(context.default);
+  var _useControlledState = relax.useControlledState(checked),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _isChecked = _useControlledState2[0],
+    _setIsChecked = _useControlledState2[1];
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Radio);
+  var theme$1 = hooks.useTheme();
+  var isDisabled = React.useMemo(function () {
+    var _contextValue$isDisab;
+    return (_contextValue$isDisab = contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled) !== null && _contextValue$isDisab !== void 0 ? _contextValue$isDisab : disabled;
+  }, [contextValue === null || contextValue === void 0 ? void 0 : contextValue.isDisabled, disabled]);
+  // check current radio is checked
+  // if current radio is in provider, use provider context value first
+  // or not, use isChecked property
+  // otherwise, it control itself
+  var isChecked = React.useMemo(function () {
+    if (contextValue) {
+      return value === contextValue.value;
+    }
+    return !!_isChecked;
+  }, [contextValue, _isChecked, value]);
+  // change handler for radio
+  // radio do not support cancel checked
+  var change = React.useCallback(function () {
+    // if chekced, ignore
+    if (isChecked) return;
+    // if context is valid, change context state
+    if (contextValue) {
+      contextValue.change(value);
+      return;
+    }
+    // change self state
+    _setIsChecked(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isChecked, contextValue, value, isDisabled]);
+  var styled = {
+    radio: stylex.default.props(styles.radio["default"], isDisabled && styles.radio.disabled),
+    trigger: stylex.default.props(styles.trigger["default"]({
+      borderColor: theme$1.colors[colors.ColorToken.Outline]
+    }), isChecked && styles.trigger.checked({
+      borderColor: theme$1.colors[colors.ColorToken.Primary]
+    }), isDisabled && styles.trigger.disabled({
+      backgroundColor: theme$1.colors[colors.ColorToken.InversePrimary]
+    }), !isChecked && styles.trigger.unckecked),
+    label: stylex.default.props(theme.typography.body.medium, styles.label["default"])
+  };
+  return /*#__PURE__*/React.createElement("label", {
+    className: relax.clsx(classNames[className.RadioClassToken.Radio], props.className, styled.radio.className)
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    "aria-checked": isChecked,
+    checked: isChecked,
+    onChange: change,
+    disabled: isDisabled,
+    className: styled.trigger.className,
+    style: styled.trigger.style
+  }), children && (/*#__PURE__*/React.createElement("span", {
+    className: styled.label.className,
+    style: styled.label.style
+  }, children)));
+};
+
+exports.default = Radio;

package/dist/components/radio/{radio.js → radio.mjs}

@@ -1,15 +1,15 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useContext, useMemo, useCallback } from 'react';
-import Context from './context.js';
+import Context from './context.mjs';
 import { useControlledState, clsx } from '@aiszlab/relax';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { RadioClassToken } from '../../utils/class-name.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';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { RadioClassToken } from '../../utils/class-name.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { typography } from '../theme/theme.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var _excluded = ["children", "value", "checked", "disabled"];
 var styles = {
@@ -173,7 +173,7 @@ var Radio = function Radio(_ref) {
     checked = _ref.checked,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    props$1 = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var contextValue = useContext(Context);
   var _useControlledState = useControlledState(checked),
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
@@ -210,18 +210,18 @@ var Radio = function Radio(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isChecked, contextValue, value, isDisabled]);
   var styled = {
-    radio: props(styles.radio["default"], isDisabled && styles.radio.disabled),
-    trigger: props(styles.trigger["default"]({
+    radio: _stylex.props(styles.radio["default"], isDisabled && styles.radio.disabled),
+    trigger: _stylex.props(styles.trigger["default"]({
       borderColor: theme.colors[ColorToken.Outline]
     }), isChecked && styles.trigger.checked({
       borderColor: theme.colors[ColorToken.Primary]
     }), isDisabled && styles.trigger.disabled({
       backgroundColor: theme.colors[ColorToken.InversePrimary]
     }), !isChecked && styles.trigger.unckecked),
-    label: props(typography.body.medium, styles.label["default"])
+    label: _stylex.props(typography.body.medium, styles.label["default"])
   };
   return /*#__PURE__*/React.createElement("label", {
-    className: clsx(classNames[RadioClassToken.Radio], props$1.className, styled.radio.className)
+    className: clsx(classNames[RadioClassToken.Radio], props.className, styled.radio.className)
   }, /*#__PURE__*/React.createElement("input", {
     type: "radio",
     "aria-checked": isChecked,

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

@@ -1,5 +1,5 @@
 import type { ReactNode, JSX, Key } from "react";
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 /**
  * @author murukal
  *

package/dist/components/rate/hooks.cjs

@@ -0,0 +1,59 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+var _excluded = ["halfable"];
+/**
+ * @description
+ * value hooks
+ */
+var useValue = function useValue(_ref) {
+  var halfable = _ref.halfable,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useControlledState = relax.useControlledState(props.value, {
+      defaultState: 0
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _value = _useControlledState2[0],
+    setValue = _useControlledState2[1];
+  /// convert value into valid number like `0` `0.5` `1.5` `2`
+  var value = React.useMemo(function () {
+    if (!halfable) return Math.floor(_value);
+    return Math.floor(_value * 2) / 2;
+  }, [_value, halfable]);
+  /// change handler
+  var change = relax.useEvent(function (changed) {
+    var _props$onChange;
+    setValue(changed);
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, changed);
+  });
+  return {
+    value: value,
+    change: change
+  };
+};
+/**
+ * @description
+ * star hover hooks
+ */
+var useHover = function useHover() {
+  var _useState = React.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var enter = relax.useEvent(function (at) {
+    setHovered(at);
+  });
+  var leave = relax.useEvent(function () {
+    setHovered(void 0);
+  });
+  return {
+    hovered: hovered,
+    enter: enter,
+    leave: leave
+  };
+};
+
+exports.useHover = useHover;
+exports.useValue = useValue;

package/dist/components/rate/rate.cjs

@@ -0,0 +1,66 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('./hooks.cjs');
+var star = require('./star.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var _excluded = ["count", "className", "style", "halfable", "disabled"];
+var styles = {
+  rate: {
+    "default": {
+      display: "musaex-78zum5",
+      flexDirection: "musaex-1q0g3np",
+      alignItems: "musaex-6s0dn4",
+      $$css: true
+    }
+  }
+};
+var Rate = function Rate(_ref) {
+  var _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 5 : _ref$count,
+    className$1 = _ref.className,
+    style = _ref.style,
+    _ref$halfable = _ref.halfable,
+    halfable = _ref$halfable === void 0 ? true : _ref$halfable,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Rate);
+  var _useValue = hooks.useValue({
+      value: props.value,
+      onChange: props.onChange,
+      halfable: halfable
+    }),
+    value = _useValue.value,
+    change = _useValue.change;
+  var _useHover = hooks.useHover(),
+    enter = _useHover.enter,
+    hovered = _useHover.hovered,
+    leave = _useHover.leave;
+  var styled = {
+    rate: stylex.default.props(styles.rate["default"])
+  };
+  return /*#__PURE__*/React.createElement("ul", {
+    className: relax.clsx(classNames[className.RateClassToken.Rate], className$1, styled.rate.className),
+    style: _objectSpread(_objectSpread({}, styled.rate.style), style)
+  }, new Array(count).fill(0).map(function (_, index) {
+    return /*#__PURE__*/React.createElement(star.default, {
+      at: index,
+      value: (hovered !== null && hovered !== void 0 ? hovered : value) - index,
+      disabled: disabled,
+      key: index,
+      onEnter: enter,
+      onLeave: leave,
+      onClick: change
+    });
+  }));
+};
+
+exports.default = Rate;

package/dist/components/rate/{rate.js → rate.mjs}

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React from 'react';
-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 { RateClassToken } from '../../utils/class-name.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { RateClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import { useValue, useHover } from './hooks.js';
-import Star from './star.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useValue, useHover } from './hooks.mjs';
+import Star from './star.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var _excluded = ["count", "className", "style", "halfable", "disabled"];
 var styles = {
@@ -60,6 +60,5 @@ var Rate = function Rate(_ref) {
     });
   }));
 };
-var Rate$1 = Rate;
 
-export { Rate$1 as default };
+export { Rate as default };