@nurihaus/web-design-system 3.6.0 → 3.8.0

package/dist/radio.js

@@ -29,6 +29,24 @@ var base_button = __nuri_require__(8933);
 // EXTERNAL MODULE: ./components/core/composer/index.tsx
 var composer = __nuri_require__(2777);
 ;// ./components/radio/base-radio.tsx
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 
 
 
@@ -70,13 +88,15 @@ RadioRootBase.displayName = 'RadioRoot';
 var RadioOptionGroup = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var children = props.children,
     asChild = props.asChild,
-    className = props.className;
+    className = props.className,
+    restProps = __rest(props, ["children", "asChild", "className"]);
   var Comp = asChild ? composer/* default */.A : 'ul';
-  return (0,jsx_runtime_.jsx)(Comp, {
+  return (0,jsx_runtime_.jsx)(Comp, __assign({
     ref: ref,
-    className: (0,classNames/* classNames */.x)('nuri-theme base-radio option-group', className),
+    className: (0,classNames/* classNames */.x)('nuri-theme base-radio option-group', className)
+  }, restProps, {
     children: children
-  });
+  }));
 });
 RadioOptionGroup.displayName = 'RadioOptionGroup';
 var RadioButton = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
@@ -100,6 +120,31 @@ var RadioButton = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_r
   });
 });
 RadioButton.displayName = 'RadioButton';
+// 칩 전체가 라디오 하나다. 점 없이 라벨만 그리고 role·aria-checked 로 선택을 알린다.
+var RadioChip = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    id = props.id,
+    disabled = props.disabled,
+    restProps = __rest(props, ["className", "id", "disabled"]);
+  var _a = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.useContext)(RadioContext),
+    selected = _a.selected,
+    onChange = _a.onChange;
+  var checked = id === selected;
+  return (0,jsx_runtime_.jsx)(base_button/* default */.A, __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-radio chip', className),
+    type: 'button',
+    role: 'radio',
+    "aria-checked": checked,
+    "data-state": checked ? 'checked' : 'unchecked',
+    disabled: disabled,
+    "data-disabled": disabled || undefined,
+    onClick: function onClick() {
+      return onChange(id);
+    }
+  }, restProps));
+});
+RadioChip.displayName = 'RadioChip';
 var RadioIndicator = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var children = props.children,
     asChild = props.asChild,
@@ -138,13 +183,21 @@ RadioLabel.displayName = 'RadioLabel';
 var RadioRoot = Object.assign(RadioRootBase, {
   OptionGroup: RadioOptionGroup,
   Button: RadioButton,
+  Chip: RadioChip,
   Indicator: RadioIndicator,
   Label: RadioLabel
 });
 /* harmony default export */ const base_radio = (RadioRoot);
 ;// ./components/radio/radio-props.ts
-// CSS 가 아직 크기·방향을 나누지 않아 className 으로 바뀌는 prop 이 없다.
-var radioProps = {};
+var variant = ['default', 'chip'];
+var radioProps = {
+  variant: {
+    type: 'className',
+    className: 'variant',
+    values: variant,
+    "default": 'default'
+  }
+};
 ;// ./components/radio/radio.tsx
 
 
@@ -153,18 +206,60 @@ var radioProps = {};
 
 
 
+// 칩은 버튼 자체가 role='radio' 라 li 는 목록 의미를 빼고 자리만 잡는다.
+var ChipOption = function ChipOption(props) {
+  var option = props.option;
+  return (0,jsx_runtime_.jsx)("li", {
+    className: 'radio radio-option',
+    role: 'none',
+    children: (0,jsx_runtime_.jsx)(base_radio.Chip, {
+      className: 'radio radio-chip',
+      id: option.id,
+      disabled: option.disabled,
+      children: option.label
+    })
+  });
+};
+ChipOption.displayName = 'RadioChipOption';
+var DefaultOption = function DefaultOption(props) {
+  var option = props.option;
+  return (0,jsx_runtime_.jsxs)("li", {
+    className: 'radio radio-option',
+    children: [(0,jsx_runtime_.jsx)(base_radio.Button, {
+      className: 'radio radio-button',
+      id: option.id,
+      disabled: option.disabled,
+      children: (0,jsx_runtime_.jsx)(base_radio.Indicator, {
+        className: 'radio radio-indicator',
+        id: option.id,
+        asChild: true,
+        children: (0,jsx_runtime_.jsx)("div", {})
+      })
+    }), (0,jsx_runtime_.jsx)(base_radio.Label, {
+      className: 'radio radio-label',
+      id: option.id,
+      disabled: option.disabled,
+      children: option.label
+    })]
+  });
+};
+DefaultOption.displayName = 'RadioDefaultOption';
 var Radio = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
   var _a = (0,getMergedProps/* getMergedProps */.p)(props, radioProps),
     className = _a.className,
     selected = _a.selected,
     _onChange = _a.onChange,
     options = _a.options,
+    label = _a.label,
     track = _a.track,
     trackProps = _a.trackProps;
+  // getMergedProps 가 variant 를 클래스로 바꾸며 지우므로 원래 props 에서 읽는다.
+  var isChip = props.variant === 'chip';
   var emit = (0,useTrack/* useTrack */.n)('Radio', {
     track: track,
     trackProps: trackProps
   });
+  var Option = isChip ? ChipOption : DefaultOption;
   return (0,jsx_runtime_.jsx)(base_radio, {
     options: options,
     selected: selected,
@@ -175,25 +270,12 @@ var Radio = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
     children: (0,jsx_runtime_.jsx)(base_radio.OptionGroup, {
       ref: ref,
       className: (0,classNames/* classNames */.x)(className, 'radio radio-group'),
+      // 칩은 버튼마다 role='radio' 라 묶음도 radiogroup 이다. 기본형은 목록 그대로 둔다.
+      role: isChip ? 'radiogroup' : undefined,
+      "aria-label": label,
       children: options.map(function (option) {
-        return (0,jsx_runtime_.jsxs)("li", {
-          className: 'radio radio-option',
-          children: [(0,jsx_runtime_.jsx)(base_radio.Button, {
-            className: 'radio radio-button',
-            id: option.id,
-            disabled: option.disabled,
-            children: (0,jsx_runtime_.jsx)(base_radio.Indicator, {
-              className: 'radio radio-indicator',
-              id: option.id,
-              asChild: true,
-              children: (0,jsx_runtime_.jsx)("div", {})
-            })
-          }), (0,jsx_runtime_.jsx)(base_radio.Label, {
-            className: 'radio radio-label',
-            id: option.id,
-            disabled: option.disabled,
-            children: option.label
-          })]
+        return (0,jsx_runtime_.jsx)(Option, {
+          option: option
         }, option.id);
       })
     })
@@ -356,21 +438,23 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-3274.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
-/******/ import * as __webpack_chunk_2__ from "./chunk-4560.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-7335.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
-/******/ import * as __webpack_chunk_3__ from "./chunk-2777.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-4560.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
-/******/ import * as __webpack_chunk_4__ from "./chunk-8933.js";
+/******/ import * as __webpack_chunk_4__ from "./chunk-2777.js";
 /******/ __nuri_require__.C(__webpack_chunk_4__);
-/******/ import * as __webpack_chunk_5__ from "./chunk-9387.js";
+/******/ import * as __webpack_chunk_5__ from "./chunk-8933.js";
 /******/ __nuri_require__.C(__webpack_chunk_5__);
+/******/ import * as __webpack_chunk_6__ from "./chunk-9387.js";
+/******/ __nuri_require__.C(__webpack_chunk_6__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,8933,9387], () => (__nuri_require__(7392)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,2777,8933,9387], () => (__nuri_require__(7392)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/skeleton.js

@@ -318,13 +318,15 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-3274.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
+/******/ import * as __webpack_chunk_2__ from "./chunk-7335.js";
+/******/ __nuri_require__.C(__webpack_chunk_2__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364], () => (__nuri_require__(1144)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335], () => (__nuri_require__(1144)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/step-progress.js

@@ -297,13 +297,15 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-3274.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
+/******/ import * as __webpack_chunk_2__ from "./chunk-7335.js";
+/******/ __nuri_require__.C(__webpack_chunk_2__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364], () => (__nuri_require__(7131)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335], () => (__nuri_require__(7131)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };