@semcore/radio 6.43.0-prerelease.4 → 6.43.0

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [6.43.0] - 2025-02-27
+## [6.43.0] - 2025-03-14
 
-### Changed
+### Added
 
-- Version minor update due to children dependencies update (`@semcore/utils` [4.45.1 ~> 4.47.1], `@semcore/flex-box` [5.40.1 ~> 5.41.0], `@semcore/core` [2.38.1 ~> 2.39.0]).
+- Build for ESM.
 
 ## [6.42.1] - 2025-02-05
 

package/lib/esm/Radio.mjs

@@ -0,0 +1,273 @@
+import N from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import G from "@babel/runtime/helpers/esm/slicedToArray";
+import v from "@babel/runtime/helpers/esm/objectSpread2";
+import k from "@babel/runtime/helpers/esm/assertThisInitialized";
+import R from "@babel/runtime/helpers/esm/classCallCheck";
+import V from "@babel/runtime/helpers/esm/createClass";
+import D from "@babel/runtime/helpers/esm/inherits";
+import T from "@babel/runtime/helpers/esm/createSuper";
+import c from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as Y } from "@semcore/utils/lib/core/index";
+import w, { CONTEXT_COMPONENT as j, assignProps as P, Component as E, sstyled as m } from "@semcore/core";
+import l from "react";
+import { Flex as Z, Box as I, InvalidStateBox as ee } from "@semcore/flex-box";
+import A, { callAllEventHandlers as H } from "@semcore/utils/lib/assignProps";
+import re from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+import te from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import O, { inputProps as ae } from "@semcore/utils/lib/inputProps";
+import { inputProps as Ie } from "@semcore/utils/lib/inputProps";
+import { useColorResolver as oe } from "@semcore/utils/lib/use/useColorResolver";
+import _e from "@semcore/utils/lib/logger";
+import { Text as ie } from "@semcore/typography";
+var ne = ["size", "state", "theme", "keyboardFocused", "value", "tag", "disabled", "includeInputProps", "resolveColor"], le = ["children", "Children"], B = (
+  /*__reshadow_css_start__*/
+  (Y.insert(
+    /*__inner_css_start__*/
+    '.___SRadio_1d5zc_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_1d5zc_gg_ .___SText_1d5zc_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-primary, #191b23)}.___SRadio_1d5zc_gg_ .___SText_1d5zc_gg_.__color_1d5zc_gg_{color:var(--color_1d5zc)}.___SRadio_1d5zc_gg_.__disabled_1d5zc_gg_{pointer-events:none}.___SText_1d5zc_gg_._size_m_1d5zc_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_1d5zc_gg_._size_l_1d5zc_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SValue_1d5zc_gg_{position:relative;flex-shrink:0;padding:0;outline:0;z-index:0;margin-top:var(--intergalactic-spacing-05x, 2px)}.___SValue_1d5zc_gg_::after,.___SValue_1d5zc_gg_::before{content:"";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SValue_1d5zc_gg_::before{top:0;left:0;border:1px solid;transition:calc(var(--intergalactic-duration-control, 200)*1ms) all ease-in-out}.___SValue_1d5zc_gg_::after{top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0}.___SValue_1d5zc_gg_.__disabled_1d5zc_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SValue_1d5zc_gg_._size_m_1d5zc_gg_{width:16px;height:16px}.___SValue_1d5zc_gg_._size_m_1d5zc_gg_ .___SInvalidPattern_1d5zc_gg_:before{width:14px;height:14px}.___SValue_1d5zc_gg_._size_l_1d5zc_gg_{width:20px;height:20px}.___SValue_1d5zc_gg_._size_l_1d5zc_gg_ .___SInvalidPattern_1d5zc_gg_:before{width:18px;height:18px}.___SValue_1d5zc_gg_._state_normal_1d5zc_gg_::before{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SValue_1d5zc_gg_._state_invalid_1d5zc_gg_::before{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SControl_1d5zc_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_1d5zc_gg_:checked~.___SValue_1d5zc_gg_::before{border-color:var(--intergalactic-control-primary-info, #008ff8);background-color:var(--intergalactic-control-primary-info, #008ff8)}.___SControl_1d5zc_gg_:checked~.___SValue_1d5zc_gg_._size_m_1d5zc_gg_::after{width:6px;height:6px}.___SControl_1d5zc_gg_:checked~.___SValue_1d5zc_gg_._size_l_1d5zc_gg_::after{width:8px;height:8px}.___SValue_1d5zc_gg_._state_normal_1d5zc_gg_.__keyboardFocused_1d5zc_gg_::before{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SValue_1d5zc_gg_._state_invalid_1d5zc_gg_.__keyboardFocused_1d5zc_gg_::before{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SControl_1d5zc_gg_:checked~.___SValue_1d5zc_gg_.__theme_1d5zc_gg_::before{border-color:var(--theme_1d5zc);background-color:var(--theme_1d5zc)}.___SValue_1d5zc_gg_._state_normal_1d5zc_gg_.__theme_1d5zc_gg_::before{border-color:var(--theme_1d5zc)}.___SInvalidPattern_1d5zc_gg_{background:0 0;overflow:hidden}.___SInvalidPattern_1d5zc_gg_:before{content:"";position:absolute;top:1px;left:1px;border-radius:50%;background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}',
+    "1d5zc_gg_"
+  ), {
+    __SRadio: "___SRadio_1d5zc_gg_",
+    _disabled: "__disabled_1d5zc_gg_",
+    __SText: "___SText_1d5zc_gg_",
+    _size_m: "_size_m_1d5zc_gg_",
+    _size_l: "_size_l_1d5zc_gg_",
+    __SValue: "___SValue_1d5zc_gg_",
+    _state_normal: "_state_normal_1d5zc_gg_",
+    _state_invalid: "_state_invalid_1d5zc_gg_",
+    __SControl: "___SControl_1d5zc_gg_",
+    _keyboardFocused: "__keyboardFocused_1d5zc_gg_",
+    _theme: "__theme_1d5zc_gg_",
+    "--theme": "--theme_1d5zc",
+    _color: "__color_1d5zc_gg_",
+    "--color": "--color_1d5zc",
+    __SInvalidPattern: "___SInvalidPattern_1d5zc_gg_"
+  })
+), $ = /* @__PURE__ */ function(g) {
+  D(i, g);
+  var o = T(i);
+  function i() {
+    return R(this, i), o.apply(this, arguments);
+  }
+  return V(i, [{
+    key: "uncontrolledProps",
+    value: function() {
+      return {
+        value: null
+      };
+    }
+  }, {
+    key: "setContext",
+    value: function() {
+      var r = this.asProps, e = r.theme, a = r.size, _ = r.name, n = r.value, s = r.onChange, d = r.disabled;
+      return {
+        onChange: s,
+        value: n,
+        theme: e,
+        size: a,
+        name: _,
+        disabled: d
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var r = this.asProps, e = this.asProps.Children;
+      return /* @__PURE__ */ l.createElement(Z, P({
+        direction: "column",
+        role: "group",
+        __excludeProps: ["onChange"]
+      }, r), /* @__PURE__ */ l.createElement(e, null));
+    }
+  }]), i;
+}(E);
+c($, "displayName", "RadioGroup");
+c($, "defaultProps", {
+  defaultValue: null
+});
+var U = w($), S = /* @__PURE__ */ function(g) {
+  D(i, g);
+  var o = T(i);
+  function i() {
+    var t;
+    R(this, i);
+    for (var r = arguments.length, e = new Array(r), a = 0; a < r; a++)
+      e[a] = arguments[a];
+    return t = o.call.apply(o, [this].concat(e)), c(k(t), "state", {
+      hoistedDisabled: void 0
+    }), c(k(t), "hoistDisabled", function(_) {
+      _e.warn(!0, "Don't set disabled on Radio.Value or Radio.Text, set it on Radio or on RadioGroup (for all items) instead. Otherwise it will produce wrong SSR output.", t.asProps["data-ui-name"]), t.setState({
+        hoistedDisabled: _
+      });
+    }), t;
+  }
+  return V(i, [{
+    key: "getTextProps",
+    value: function() {
+      var r = A(this.asProps, this.context), e = r.size, a = e === void 0 ? "m" : e, _ = r.disabled, n = r.label, s = this.state.hoistedDisabled, d = {
+        size: a,
+        children: n,
+        disabled: _ ?? s,
+        hoistDisabled: this.hoistDisabled,
+        rootDisabled: this.props.disabled
+      };
+      return d;
+    }
+  }, {
+    key: "getValueProps",
+    value: function() {
+      var r, e = A(this.asProps, this.context), a = e.size, _ = a === void 0 ? "m" : a, n = e.state, s = n === void 0 ? "normal" : n, d = e.theme, p = e.disabled, z = e.name, u = this.asProps, h = u.value, f = u.checked, x = this.state.hoistedDisabled;
+      return {
+        size: (r = this.props.size) !== null && r !== void 0 ? r : _,
+        disabled: p ?? x,
+        state: s,
+        theme: d,
+        value: h,
+        checked: f,
+        name: z,
+        hoistDisabled: this.hoistDisabled,
+        rootDisabled: this.props.disabled
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var r = this.asProps, e, a = I, _ = this.asProps, n = _.styles, s = _.Children, d = _.children;
+      return e = m(n), /* @__PURE__ */ l.createElement(a, e.cn("SRadio", v({}, P({
+        tag: "label",
+        __excludeProps: ["onChange", "label", "disabled"]
+      }, r))), d ? /* @__PURE__ */ l.createElement(s, e.cn("Children", {})) : /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(C.Value, null), /* @__PURE__ */ l.createElement(C.Text, null)));
+    }
+  }]), i;
+}(E);
+c(S, "displayName", "Radio");
+c(S, "style", B);
+c(S, "contextType", U[j]);
+var b = /* @__PURE__ */ function(g) {
+  D(i, g);
+  var o = T(i);
+  function i() {
+    var t;
+    R(this, i);
+    for (var r = arguments.length, e = new Array(r), a = 0; a < r; a++)
+      e[a] = arguments[a];
+    return t = o.call.apply(o, [this].concat(e)), c(k(t), "bindHandlerChange", function(_) {
+      return function(n) {
+        typeof t.context.onChange == "function" && t.context.onChange(_, n);
+      };
+    }), t;
+  }
+  return V(i, [{
+    key: "uncontrolledProps",
+    value: function() {
+      return {
+        checked: function(e) {
+          return e.target.checked;
+        }
+      };
+    }
+  }, {
+    key: "getControlProps",
+    value: function() {
+      var r = this.context.value, e = this.asProps, a = e.forwardRef, _ = e.includeInputProps, n = e.state, s = e.value, d = O(this.asProps, _), p = G(d, 1), z = p[0], u = s ?? "", h = v(v({
+        ref: a,
+        state: n
+      }, z), {}, {
+        value: u
+      });
+      if (r !== void 0) {
+        var f = this.props, x = f.onChange;
+        f.onClick, h.checked = r === u, h.onChange = H(x, this.bindHandlerChange(u));
+      }
+      return h;
+    }
+  }, {
+    key: "getRadioMarkProps",
+    value: function() {
+      var r = this.context.value, e = this.asProps, a = e.size, _ = e.state, n = e.theme, s = e.keyboardFocused, d = e.value, p = e.tag, z = e.disabled, u = e.includeInputProps, h = e.resolveColor, f = N(e, ne), x = O(f, u), F = G(x, 2), J = F[0], y = F[1];
+      y.children, y.Children;
+      var K = N(y, le), L = d ?? "", M = v({
+        theme: n,
+        size: a,
+        state: _,
+        keyboardFocused: s,
+        disabled: z,
+        resolveColor: h,
+        checked: J.checked
+      }, K);
+      if (r !== void 0) {
+        var Q = this.props.onClick;
+        p !== "label" && (M.onClick = H(Q, this.bindHandlerChange(L)));
+      }
+      return M;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function() {
+      this.asProps.rootDisabled !== this.asProps.disabled && this.asProps.hoistDisabled(this.asProps.disabled);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function() {
+      this.asProps.rootDisabled !== this.asProps.disabled && this.asProps.hoistDisabled(this.asProps.disabled);
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var r, e = this.asProps, a = e.styles, _ = e.children, n = e.Children;
+      return _ ? (r = m(a), /* @__PURE__ */ l.createElement(n, r.cn("Children", {}))) : (m(a), /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(C.Value.Control, null), /* @__PURE__ */ l.createElement(C.Value.RadioMark, null)));
+    }
+  }]), i;
+}(E);
+c(b, "defaultProps", {
+  includeInputProps: ae,
+  defaultChecked: !1
+});
+c(b, "enhance", [re(), te()]);
+c(b, "displayName", "Value");
+c(b, "contextType", U[j]);
+c(b, "style", B);
+var W = function(o) {
+  var i = arguments[0], t, r = I, e = o.styles, a = o.state;
+  return t = m(e), /* @__PURE__ */ l.createElement(r, t.cn("SControl", v({}, P({
+    tag: "input",
+    type: "radio",
+    "aria-invalid": a === "invalid"
+  }, i))));
+};
+W.displayName = "Control";
+var X = function(o) {
+  var i = arguments[0], t, r = I, e = ee, a = o.theme, _ = o.styles, n = o.resolveColor, s = o.state, d = o.checked;
+  return t = m(_), /* @__PURE__ */ l.createElement(r, t.cn("SValue", v({}, P({
+    tag: "div",
+    "use:theme": n(a),
+    "aria-hidden": !0
+  }, i))), s === "invalid" && !d && /* @__PURE__ */ l.createElement(e, t.cn("SInvalidPattern", {})));
+};
+X.displayName = "RadioMark";
+var q = function(o) {
+  var i = arguments[0], t, r = ie, e = o.styles, a = o.color;
+  l.useEffect(function() {
+    o.rootDisabled !== o.disabled && o.hoistDisabled(o.disabled);
+  }, [o.rootDisabled, o.disabled, o.hoistDisabled]);
+  var _ = oe();
+  return t = m(e), /* @__PURE__ */ l.createElement(r, t.cn("SText", v({}, P({
+    tag: "span",
+    "use:color": _(a)
+  }, i))));
+};
+q.displayName = "Text";
+var se = w(b, {
+  Control: W,
+  RadioMark: X
+}), C = w(S, {
+  Text: q,
+  Value: se
+}), Te = function(o) {
+  return o;
+};
+export {
+  U as RadioGroup,
+  C as default,
+  Ie as inputProps,
+  Te as wrapRadioGroup
+};

package/lib/esm/index.mjs

@@ -0,0 +1,8 @@
+import { RadioGroup as p, default as a, wrapRadioGroup as t } from "./Radio.mjs";
+import { inputProps as d } from "@semcore/utils/lib/inputProps";
+export {
+  p as RadioGroup,
+  a as default,
+  d as inputProps,
+  t as wrapRadioGroup
+};

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@semcore/radio",
   "description": "Semrush Radio Component",
-  "version": "6.43.0-prerelease.4",
+  "version": "6.43.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.mjs",
+    "types": "./lib/types/index.d.ts"
+  },
   "dependencies": {
-    "@semcore/utils": "4.47.1-prerelease.4",
-    "@semcore/flex-box": "5.41.0-prerelease.4",
-    "@semcore/typography": "5.52.0-prerelease.4"
+    "@semcore/utils": "4.48.0",
+    "@semcore/flex-box": "5.41.0",
+    "@semcore/typography": "5.52.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.4",
+    "@semcore/core": "^2.17.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -28,6 +33,6 @@
     "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=js"
+    "build": "pnpm semcore-builder --source=js && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../../commonVite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    build: {
+      lib: {
+        entry: './src/index.js',
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+      },
+    },
+  }),
+);