@nurihaus/web-design-system 3.0.1 → 3.1.0

package/dist/drop-down.js

@@ -0,0 +1,419 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_radix_ui_3bc96d1b__ from "radix-ui";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
+/******/ var __webpack_modules__ = ({
+
+/***/ 9691
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+
+// EXPORTS
+__nuri_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ drop_down)
+});
+
+// EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
+var jsx_runtime_ = __nuri_require__(612);
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./assets/icons/chevronDown.svg
+var chevronDown = __nuri_require__(9436);
+// EXTERNAL MODULE: ./helpers/hooks/useExternalState.ts
+var useExternalState = __nuri_require__(9387);
+// EXTERNAL MODULE: ./helpers/utils/classNames.js
+var classNames = __nuri_require__(3274);
+// EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
+var getMergedProps = __nuri_require__(7335);
+// EXTERNAL MODULE: external {"root":"RadixUI","commonjs2":"radix-ui","commonjs":"radix-ui","amd":"radix-ui","module":"radix-ui"}
+var external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_ = __nuri_require__(0);
+;// ./components/drop-down/base-drop-down.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;
+};
+
+
+
+
+// Select.Root 는 DOM 을 그리지 않아 ref 를 받을 곳이 없다.
+var DropDownRootBase = function DropDownRootBase(props) {
+  var children = props.children,
+    restProps = __rest(props, ["children"]);
+  return (0,jsx_runtime_.jsx)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Select.Root, __assign({}, restProps, {
+    children: children
+  }));
+};
+DropDownRootBase.displayName = 'DropDownRoot';
+var DropDownTrigger = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    restProps = __rest(props, ["children", "className"]);
+  return (0,jsx_runtime_.jsx)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Select.Trigger, __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-drop-down trigger', className)
+  }, restProps, {
+    children: children
+  }));
+});
+DropDownTrigger.displayName = 'DropDownTrigger';
+// ref 는 바깥 span 이 아니라 Radix 가 값을 그리는 Select.Value 에 준다.
+var DropDownValue = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var className = props.className,
+    asChild = props.asChild,
+    placeholder = props.placeholder;
+  return (0,jsx_runtime_.jsx)("span", {
+    className: (0,classNames/* classNames */.x)('nuri-theme base-drop-down value', className),
+    children: (0,jsx_runtime_.jsx)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Select.Value, {
+      ref: ref,
+      asChild: asChild,
+      placeholder: (0,jsx_runtime_.jsx)("span", {
+        className: 'nuri-placeholder',
+        children: placeholder
+      })
+    })
+  });
+});
+DropDownValue.displayName = 'DropDownValue';
+var DropDownContent = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    _a = props.position,
+    position = _a === void 0 ? 'popper' : _a,
+    restProps = __rest(props, ["children", "className", "position"]);
+  return (0,jsx_runtime_.jsx)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Select.Content, __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-drop-down content', className),
+    position: position,
+    sideOffset: 4
+  }, restProps, {
+    children: (0,jsx_runtime_.jsx)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Select.Viewport, {
+      children: children
+    })
+  }));
+});
+DropDownContent.displayName = 'DropDownContent';
+var DropDownItem = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    restProps = __rest(props, ["children", "className"]);
+  return (0,jsx_runtime_.jsx)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Select.Item, __assign({
+    ref: ref,
+    className: (0,classNames/* classNames */.x)('nuri-theme base-drop-down item', className)
+  }, restProps, {
+    children: (0,jsx_runtime_.jsx)(external_root_RadixUI_commonjs2_radix_ui_commonjs_radix_ui_amd_radix_ui_module_radix_ui_.Select.ItemText, {
+      children: children
+    })
+  }));
+});
+DropDownItem.displayName = 'DropDownItem';
+var DropDownRoot = Object.assign(DropDownRootBase, {
+  Trigger: DropDownTrigger,
+  Value: DropDownValue,
+  Content: DropDownContent,
+  Item: DropDownItem
+});
+/* harmony default export */ const base_drop_down = (DropDownRoot);
+// EXTERNAL MODULE: ./helpers/props/common-props.ts
+var common_props = __nuri_require__(7298);
+;// ./components/drop-down/drop-down-props.ts
+
+var sizes = ['xs', 's', 'm', 'l', 'xl'];
+var dropDownSingleProps = {
+  size: (0,common_props/* sizeProp */.lw)(sizes, 's'),
+  width: (0,common_props/* widthProp */.Iw)('fit-content')
+};
+;// ./components/drop-down/drop-down.tsx
+var drop_down_assign = undefined && undefined.__assign || function () {
+  drop_down_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 drop_down_assign.apply(this, arguments);
+};
+var drop_down_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;
+};
+
+
+
+
+
+
+
+
+var DropDown = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_.forwardRef)(function (props, ref) {
+  var _a = (0,getMergedProps/* getMergedProps */.p)(props, dropDownSingleProps),
+    className = _a.className,
+    renderValue = _a.renderValue,
+    placeholder = _a.placeholder,
+    options = _a.options,
+    value = _a.value,
+    disabled = _a.disabled,
+    leftIcon = _a.leftIcon,
+    rightIcon = _a.rightIcon,
+    style = _a.style,
+    renderOption = _a.renderOption,
+    side = _a.side,
+    align = _a.align,
+    position = _a.position,
+    openProp = _a.open,
+    onOpenChangeProp = _a.onOpenChange,
+    defaultOpen = _a.defaultOpen,
+    restProps = drop_down_rest(_a, ["className", "renderValue", "placeholder", "options", "value", "disabled", "leftIcon", "rightIcon", "style", "renderOption", "side", "align", "position", "open", "onOpenChange", "defaultOpen"]);
+  var _b = (0,useExternalState/* useExternalState */.C)({
+      prop: openProp,
+      handler: onOpenChangeProp,
+      defaultProp: defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false
+    }),
+    open = _b[0],
+    setOpen = _b[1];
+  var close = function close() {
+    return setOpen(false);
+  };
+  return (0,jsx_runtime_.jsxs)(base_drop_down, drop_down_assign({
+    value: value,
+    disabled: disabled,
+    open: open,
+    onOpenChange: setOpen
+  }, restProps, {
+    children: [(0,jsx_runtime_.jsxs)(base_drop_down.Trigger, {
+      className: (0,classNames/* classNames */.x)(className, 'drop-down-single-trigger'),
+      style: style,
+      children: [(0,jsx_runtime_.jsxs)("span", {
+        className: 'nuri-display-flex nuri-ai-center drop-down-single-label',
+        children: [leftIcon, (renderValue === null || renderValue === void 0 ? void 0 : renderValue(value)) || (0,jsx_runtime_.jsx)(base_drop_down.Value, {
+          ref: ref,
+          className: 'drop-down-single-value',
+          placeholder: placeholder
+        })]
+      }), rightIcon || (0,jsx_runtime_.jsx)(chevronDown/* default */.A, {
+        className: 'drop-down-single-icon rotate'
+      })]
+    }), (0,jsx_runtime_.jsx)(base_drop_down.Content, {
+      className: 'drop-down-single-content',
+      side: side,
+      align: align,
+      position: position,
+      style: style,
+      children: renderOption ? renderOption({
+        isOpen: open,
+        close: close
+      }) : options === null || options === void 0 ? void 0 : options.map(function (option) {
+        return (0,jsx_runtime_.jsx)(base_drop_down.Item, {
+          className: 'drop-down-single-item',
+          value: option.value,
+          disabled: option.disabled,
+          children: option.label
+        }, option.value);
+      })
+    })]
+  }));
+});
+DropDown.displayName = 'DropDown';
+/* harmony default export */ const drop_down = (DropDown);
+
+/***/ },
+
+/***/ 0
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["Select"]: () => (__WEBPACK_EXTERNAL_MODULE_radix_ui_3bc96d1b__.Select) });
+
+/***/ },
+
+/***/ 1041
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
+
+/***/ },
+
+/***/ 612
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsx), ["jsxs"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsxs) });
+
+/***/ }
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __nuri_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __nuri_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __nuri_require__.m = __webpack_modules__;
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/chunk loaded */
+/******/ (() => {
+/******/ 	var deferred = [];
+/******/ 	__nuri_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 		if(chunkIds) {
+/******/ 			priority = priority || 0;
+/******/ 			for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 			deferred[i] = [chunkIds, fn, priority];
+/******/ 			return;
+/******/ 		}
+/******/ 		var notFulfilled = Infinity;
+/******/ 		for (var i = 0; i < deferred.length; i++) {
+/******/ 			var [chunkIds, fn, priority] = deferred[i];
+/******/ 			var fulfilled = true;
+/******/ 			for (var j = 0; j < chunkIds.length; j++) {
+/******/ 				if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__nuri_require__.O).every((key) => (__nuri_require__.O[key](chunkIds[j])))) {
+/******/ 					chunkIds.splice(j--, 1);
+/******/ 				} else {
+/******/ 					fulfilled = false;
+/******/ 					if(priority < notFulfilled) notFulfilled = priority;
+/******/ 				}
+/******/ 			}
+/******/ 			if(fulfilled) {
+/******/ 				deferred.splice(i--, 1)
+/******/ 				var r = fn();
+/******/ 				if (r !== undefined) result = r;
+/******/ 			}
+/******/ 		}
+/******/ 		return result;
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__nuri_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__nuri_require__.o(definition, key) && !__nuri_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__nuri_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/export webpack runtime */
+/******/ export { __nuri_require__ };
+/******/ 
+/******/ /* webpack/runtime/import chunk loading */
+/******/ (() => {
+/******/ 	// no baseURI
+/******/ 	
+/******/ 	// object to store loaded and loading chunks
+/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
+/******/ 	var installedChunks = {
+/******/ 		621: 0
+/******/ 	};
+/******/ 	
+/******/ 	var installChunk = (data) => {
+/******/ 		var {__webpack_esm_ids__, __webpack_esm_modules__, __webpack_esm_runtime__} = data;
+/******/ 		// add "modules" to the modules object,
+/******/ 		// then flag all "ids" as loaded and fire callback
+/******/ 		var moduleId, chunkId, i = 0;
+/******/ 		for(moduleId in __webpack_esm_modules__) {
+/******/ 			if(__nuri_require__.o(__webpack_esm_modules__, moduleId)) {
+/******/ 				__nuri_require__.m[moduleId] = __webpack_esm_modules__[moduleId];
+/******/ 			}
+/******/ 		}
+/******/ 		if(__webpack_esm_runtime__) __webpack_esm_runtime__(__nuri_require__);
+/******/ 		for(;i < __webpack_esm_ids__.length; i++) {
+/******/ 			chunkId = __webpack_esm_ids__[i];
+/******/ 			if(__nuri_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 				installedChunks[chunkId][0]();
+/******/ 			}
+/******/ 			installedChunks[__webpack_esm_ids__[i]] = 0;
+/******/ 		}
+/******/ 		__nuri_require__.O();
+/******/ 	}
+/******/ 	
+/******/ 	// no chunk on demand loading
+/******/ 	
+/******/ 	// no prefetching
+/******/ 	
+/******/ 	// no preloaded
+/******/ 	
+/******/ 	__nuri_require__.C = installChunk;
+/******/ 	
+/******/ 	__nuri_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 	// no HMR
+/******/ 	
+/******/ 	// no HMR manifest
+/******/ })();
+/******/ 
+/************************************************************************/
+/******/ 
+/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ __nuri_require__.C(__webpack_chunk_1__);
+/******/ import * as __webpack_chunk_2__ from "./chunk-917.js";
+/******/ __nuri_require__.C(__webpack_chunk_2__);
+/******/ import * as __webpack_chunk_3__ from "./chunk-387.js";
+/******/ __nuri_require__.C(__webpack_chunk_3__);
+/******/ import * as __webpack_chunk_4__ from "./chunk-436.js";
+/******/ __nuri_require__.C(__webpack_chunk_4__);
+/******/ 
+/******/ // 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, [364,917,387,436], () => (__nuri_require__(9691)))
+/******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
+/******/ const __webpack_exports__default = __webpack_exports__.A;
+/******/ export { __webpack_exports__default as default };
+/******/ 

package/dist/helpers/hooks/useExternalState.d.ts

@@ -3,5 +3,10 @@ interface ExternalStateType<T> {
     handler?: (state: T) => void;
     defaultProp: T;
 }
+/**
+ * Radix 의 useControllableState 를 옮긴 것. prop 이 있으면 controlled(값은 밖에서, 바뀌면 handler 만 부른다),
+ * 없으면 uncontrolled(안에서 들고 있고, 실제로 바뀐 뒤 useEffect 에서 handler 를 부른다).
+ * 어느 쪽이든 같은 값으로 다시 설정하면 handler 는 불리지 않는다.
+ */
 export declare const useExternalState: <T>({ prop, handler, defaultProp }: ExternalStateType<T>) => readonly [T, (handledValue: T | ((prevState: T) => T)) => void];
 export {};

package/dist/helpers/props/common-props.d.ts

@@ -0,0 +1,7 @@
+import { CSSPropsTypeWithoutValues, ClassNamePropsType } from '../types/propsDef';
+/** 모든 컴포넌트가 함께 쓰는 크기 이름. px 은 styles/token/size.css 에 있다. */
+export declare const size: readonly ["xs", "s", "m", "l", "xl"];
+export type Size = (typeof size)[number];
+/** 컴포넌트는 다섯 이름 중 지원하는 것만 고른다. `size-{값}` 클래스가 붙는다. */
+export declare const sizeProp: <T extends readonly Size[]>(values: T, defaultValue: T[number]) => ClassNamePropsType<T>;
+export declare const widthProp: (defaultValue?: number | string) => CSSPropsTypeWithoutValues<number | string>;

package/dist/helpers/types/common-props.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+export interface AsChildProps {
+    asChild?: boolean;
+}
+export interface StyleProps {
+    className?: string;
+    style?: CSSProperties;
+}