@remember-web/primitive 0.1.13 → 0.1.15

package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useRef,\n  useState,\n  useId,\n} from 'react';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { focusSibling } from '../utils';\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n  SelectDownIcon,\n  SelectOption,\n  SelectOptionWrapper,\n  StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n  {\n    children,\n    value,\n    maxHeight = DEFAULT_MAX_HEIGHT_PX,\n    placeholder,\n    onChange,\n    width,\n    extendDirection,\n    disabled,\n    onClick,\n    ...props\n  }: DesignedSelectInternalProps<Value>,\n  ref?: Ref<HTMLDivElement>\n) => {\n  const id = useId();\n  const [expandedDirection, _setExpandedDirection] =\n    useState<ExpandedType>('none');\n  const selectContainerRef = useRef<HTMLDivElement | null>(null);\n  const selectListRef = useRef<HTMLUListElement | null>(null);\n  const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n    'pointerdown',\n    () => {\n      setExpandedDirection('none');\n    }\n  );\n\n  const setExpandedDirection = useCallback(\n    (...args: Parameters<typeof _setExpandedDirection>) => {\n      if (disabled) {\n        return;\n      }\n      _setExpandedDirection(...args);\n    },\n    [disabled]\n  );\n\n  const options = Children.toArray(children)\n    .filter(\n      (child): child is OptionElementType<Value> =>\n        isValidElement(child) && child.type === OptionHolder\n    )\n    .map(\n      ({\n        props: { children: _children, value: _value, disabled: _disabled },\n      }) => ({\n        label: _children,\n        value: _value,\n        disabled: _disabled,\n      })\n    );\n\n  const selectedOption = options.find((option) => value === option.value);\n\n  const isExpanded = expandedDirection !== 'none';\n\n  const onSelectOption = (_value: Value, _label: ReactNode) => {\n    onChange?.(_value, _label);\n    setExpandedDirection('none');\n    selectContainerRef.current?.focus();\n  };\n\n  // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n  // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n  // direction이 props로 전달되었다면 해당 방향으로 확장\n  const expandSelectListAtComputedPosition = () => {\n    if (extendDirection) {\n      setExpandedDirection(extendDirection);\n      return;\n    }\n\n    const selectContainerRect =\n      selectContainerRef.current?.getBoundingClientRect();\n\n    if (!selectContainerRect) {\n      setExpandedDirection('below');\n      return;\n    }\n\n    // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n    const currentSelectHeight = Math.min(\n      maxHeight,\n      options.length * OPTION_ITEM_HEIGHT_PX\n    );\n    const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n    setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n  };\n\n  const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n    (ele) => {\n      if (!ele) {\n        return;\n      }\n\n      // 선택한 요소가 없을때는 첫번째 요소에 focus\n      if (!value && !ele.previousSibling) {\n        setTimeout(() => ele.focus());\n        return;\n      }\n\n      // 선택한 요소가 있다면 해당 요소에 focus\n      const optionValue = ele.dataset.optionValue || null;\n      if (optionValue === value) {\n        setTimeout(() => ele.focus());\n      }\n    },\n    [value]\n  );\n\n  const keyDownHandler = (e: KeyboardEvent) => {\n    const focusedElement = document.activeElement;\n\n    if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'Tab':\n        if (isExpanded) {\n          e.preventDefault();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'previous');\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'next');\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setExpandedDirection('none');\n        selectContainerRef.current?.focus();\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n\n        if (e.target === e.currentTarget) {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n          expandSelectListAtComputedPosition();\n        }\n\n        if (\n          focusedElement?.matches('[data-option-value]') &&\n          focusedElement instanceof HTMLLIElement &&\n          focusedElement.dataset.optionValue\n        ) {\n          onSelectOption(\n            focusedElement.dataset.optionValue as Value,\n            focusedElement.innerText\n          );\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <SelectContainer\n      ref={(el) => {\n        if (!el) {\n          return;\n        }\n        selectContainerRef.current = el;\n        clickAwayRef.current = el;\n      }}\n      $width={width}\n      tabIndex={disabled ? undefined : 0}\n      aria-expanded={isExpanded}\n      aria-haspopup=\"listbox\"\n      aria-disabled={disabled}\n      onKeyDown={keyDownHandler}\n      {...props}\n    >\n      <StyledSelect\n        ref={ref}\n        onClick={onClick}\n        expandedDirection={expandedDirection}\n        isPlaceholder={!selectedOption && !!placeholder}\n        onPointerDown={(e) => {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n\n          e.stopPropagation();\n\n          expandSelectListAtComputedPosition();\n        }}\n      >\n        {selectedOption?.label || placeholder || 'ㅤ'}\n      </StyledSelect>\n      <SelectDownIcon>\n        {isExpanded ? (\n          <IconArrow2Up size=\"small\" />\n        ) : (\n          <IconArrow2Down size=\"small\" />\n        )}\n      </SelectDownIcon>\n      {isExpanded && (\n        <SelectOptionWrapper\n          role=\"listbox\"\n          aria-activedescendant={\n            value != null ? `${id}-select-option-${value}` : undefined\n          }\n          ref={selectListRef}\n          expandedDirection={expandedDirection}\n          maxHeight={maxHeight}\n        >\n          {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n            <SelectOption\n              id={`${id}-select-option-${optionValue}`}\n              role=\"option\"\n              key={optionValue}\n              tabIndex={_disabled ? undefined : 0}\n              aria-selected={optionValue === value}\n              aria-disabled={_disabled}\n              ref={optionItemRef}\n              isSelected={optionValue === value}\n              data-option-value={optionValue}\n              // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n              onMouseMove={(e) => {\n                if (e.currentTarget === document.activeElement) {\n                  return;\n                }\n                e.currentTarget.focus({\n                  preventScroll: true,\n                });\n              }}\n              onFocus={() => {\n                selectListRef.current?.setAttribute(\n                  'aria-activedescendant',\n                  `${id}-select-option-${optionValue}`\n                );\n              }}\n              onClick={() => {\n                if (_disabled) {\n                  return;\n                }\n\n                onSelectOption(optionValue, label);\n              }}\n            >\n              {label}\n            </SelectOption>\n          ))}\n        </SelectOptionWrapper>\n      )}\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAcK;;;AAVDA;;;;;;;AAOGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AAA0B;;AAIxBH;AACAI;AACAZ;AACAa;AACAC;AACE;;AAEE;AACF;;AAIAR;;;AAG0C;AAE/BS;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAT;AACAR;AACAF;AAAqBiB;AAER;;;;;AAGTE;AAEAP;;AAEA;AACAF;;;AAGA;AAAA;AACAU;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}

package/dist/src/Inputs/Select/DesignedSelect/index.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { OptionElementType, SelectValue } from '../types';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("react").SelectHTMLAttributes<HTMLDivElement>, `aria-${string}` | "children" | "onChange"> & {
+    children: OptionElementType<SelectValue> | OptionElementType<SelectValue>[];
+    onChange?: ((targetValue: SelectValue, targetLabel: ReactNode) => void | Promise<void>) | undefined;
+    maxHeight?: number | undefined;
+    width?: string | number | undefined;
+    placeholder?: string | undefined;
+    extendDirection?: "above" | "below" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Inputs/Select/DesignedSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,SAAS,EAAoB,MAAM,OAAO,CAAC;AAiBxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;AAqR/D,wBAA0C"}

package/dist/src/Inputs/Select/DesignedSelect/index.esm.js

@@ -0,0 +1,243 @@
+"use client";
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef, useId, useState, useRef, useCallback, Children, isValidElement } from 'react';
+import { IconArrow2Up, IconArrow2Down } from '@remember-web/icon';
+import useMouseEventAway from '../../../hooks/useMouseEventAway.esm.js';
+import { focusSibling } from '../utils.esm.js';
+import { OptionHolder } from '../Option/index.esm.js';
+import { SelectContainer } from '../styles.esm.js';
+import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.esm.js';
+import { StyledSelect, SelectDownIcon, SelectOptionWrapper, SelectOption } from './styles.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "disabled", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DesignedSelect = function DesignedSelect(_ref, ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? DEFAULT_MAX_HEIGHT_PX : _ref$maxHeight,
+    placeholder = _ref.placeholder,
+    onChange = _ref.onChange,
+    width = _ref.width,
+    extendDirection = _ref.extendDirection,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var id = useId();
+  var _useState = useState('none'),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedDirection = _useState2[0],
+    _setExpandedDirection = _useState2[1];
+  var selectContainerRef = useRef(null);
+  var selectListRef = useRef(null);
+  var clickAwayRef = useMouseEventAway('pointerdown', function () {
+    setExpandedDirection('none');
+  });
+  var setExpandedDirection = useCallback(function () {
+    if (disabled) {
+      return;
+    }
+    _setExpandedDirection.apply(void 0, arguments);
+  }, [disabled]);
+  var options = Children.toArray(children).filter(function (child) {
+    return /*#__PURE__*/isValidElement(child) && child.type === OptionHolder;
+  }).map(function (_ref2) {
+    var _ref2$props = _ref2.props,
+      _children = _ref2$props.children,
+      _value = _ref2$props.value,
+      _disabled = _ref2$props.disabled;
+    return {
+      label: _children,
+      value: _value,
+      disabled: _disabled
+    };
+  });
+  var selectedOption = options.find(function (option) {
+    return value === option.value;
+  });
+  var isExpanded = expandedDirection !== 'none';
+  var onSelectOption = function onSelectOption(_value, _label) {
+    var _selectContainerRef$c;
+    onChange === null || onChange === void 0 || onChange(_value, _label);
+    setExpandedDirection('none');
+    (_selectContainerRef$c = selectContainerRef.current) === null || _selectContainerRef$c === void 0 || _selectContainerRef$c.focus();
+  };
+
+  // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수
+  // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장
+  // direction이 props로 전달되었다면 해당 방향으로 확장
+  var expandSelectListAtComputedPosition = function expandSelectListAtComputedPosition() {
+    var _selectContainerRef$c2;
+    if (extendDirection) {
+      setExpandedDirection(extendDirection);
+      return;
+    }
+    var selectContainerRect = (_selectContainerRef$c2 = selectContainerRef.current) === null || _selectContainerRef$c2 === void 0 ? void 0 : _selectContainerRef$c2.getBoundingClientRect();
+    if (!selectContainerRect) {
+      setExpandedDirection('below');
+      return;
+    }
+
+    // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산
+    var currentSelectHeight = Math.min(maxHeight, options.length * OPTION_ITEM_HEIGHT_PX);
+    var bottomGap = document.body.clientHeight - selectContainerRect.bottom;
+    setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');
+  };
+  var optionItemRef = useCallback(function (ele) {
+    if (!ele) {
+      return;
+    }
+
+    // 선택한 요소가 없을때는 첫번째 요소에 focus
+    if (!value && !ele.previousSibling) {
+      setTimeout(function () {
+        return ele.focus();
+      });
+      return;
+    }
+
+    // 선택한 요소가 있다면 해당 요소에 focus
+    var optionValue = ele.dataset.optionValue || null;
+    if (optionValue === value) {
+      setTimeout(function () {
+        return ele.focus();
+      });
+    }
+  }, [value]);
+  var keyDownHandler = function keyDownHandler(e) {
+    var _selectContainerRef$c3;
+    var focusedElement = document.activeElement;
+    if (!focusedElement || !(focusedElement instanceof HTMLElement)) {
+      return;
+    }
+    switch (e.key) {
+      case 'Tab':
+        if (isExpanded) {
+          e.preventDefault();
+        }
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        if (!isExpanded) {
+          expandSelectListAtComputedPosition();
+          break;
+        }
+        focusSibling(focusedElement, 'previous');
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        if (!isExpanded) {
+          expandSelectListAtComputedPosition();
+          break;
+        }
+        focusSibling(focusedElement, 'next');
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setExpandedDirection('none');
+        (_selectContainerRef$c3 = selectContainerRef.current) === null || _selectContainerRef$c3 === void 0 || _selectContainerRef$c3.focus();
+        break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (e.target === e.currentTarget) {
+          if (isExpanded) {
+            setExpandedDirection('none');
+            return;
+          }
+          expandSelectListAtComputedPosition();
+        }
+        if (focusedElement !== null && focusedElement !== void 0 && focusedElement.matches('[data-option-value]') && focusedElement instanceof HTMLLIElement && focusedElement.dataset.optionValue) {
+          onSelectOption(focusedElement.dataset.optionValue, focusedElement.innerText);
+        }
+        break;
+    }
+  };
+  return /*#__PURE__*/jsxs(SelectContainer, _objectSpread(_objectSpread({
+    ref: function ref(el) {
+      if (!el) {
+        return;
+      }
+      selectContainerRef.current = el;
+      clickAwayRef.current = el;
+    },
+    $width: width,
+    tabIndex: disabled ? undefined : 0,
+    "aria-expanded": isExpanded,
+    "aria-haspopup": "listbox",
+    "aria-disabled": disabled,
+    onKeyDown: keyDownHandler
+  }, props), {}, {
+    children: [/*#__PURE__*/jsx(StyledSelect, {
+      ref: ref,
+      onClick: onClick,
+      expandedDirection: expandedDirection,
+      isPlaceholder: !selectedOption && !!placeholder,
+      onPointerDown: function onPointerDown(e) {
+        if (isExpanded) {
+          setExpandedDirection('none');
+          return;
+        }
+        e.stopPropagation();
+        expandSelectListAtComputedPosition();
+      },
+      children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder || 'ㅤ'
+    }), /*#__PURE__*/jsx(SelectDownIcon, {
+      children: isExpanded ? /*#__PURE__*/jsx(IconArrow2Up, {
+        size: "small"
+      }) : /*#__PURE__*/jsx(IconArrow2Down, {
+        size: "small"
+      })
+    }), isExpanded && /*#__PURE__*/jsx(SelectOptionWrapper, {
+      role: "listbox",
+      "aria-activedescendant": value != null ? "".concat(id, "-select-option-").concat(value) : undefined,
+      ref: selectListRef,
+      expandedDirection: expandedDirection,
+      maxHeight: maxHeight,
+      children: options.map(function (_ref3) {
+        var optionValue = _ref3.value,
+          label = _ref3.label,
+          _disabled = _ref3.disabled;
+        return /*#__PURE__*/jsx(SelectOption, {
+          id: "".concat(id, "-select-option-").concat(optionValue),
+          role: "option",
+          tabIndex: _disabled ? undefined : 0,
+          "aria-selected": optionValue === value,
+          "aria-disabled": _disabled,
+          ref: optionItemRef,
+          isSelected: optionValue === value,
+          "data-option-value": optionValue
+          // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용
+          ,
+          onMouseMove: function onMouseMove(e) {
+            if (e.currentTarget === document.activeElement) {
+              return;
+            }
+            e.currentTarget.focus({
+              preventScroll: true
+            });
+          },
+          onFocus: function onFocus() {
+            var _selectListRef$curren;
+            (_selectListRef$curren = selectListRef.current) === null || _selectListRef$curren === void 0 || _selectListRef$curren.setAttribute('aria-activedescendant', "".concat(id, "-select-option-").concat(optionValue));
+          },
+          onClick: function onClick() {
+            if (_disabled) {
+              return;
+            }
+            onSelectOption(optionValue, label);
+          },
+          children: label
+        }, optionValue);
+      })
+    })]
+  }));
+};
+var DesignedSelect$1 = /*#__PURE__*/forwardRef(DesignedSelect);
+
+export { DesignedSelect$1 as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/src/Inputs/Select/DesignedSelect/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useRef,\n  useState,\n  useId,\n} from 'react';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { focusSibling } from '../utils';\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n  SelectDownIcon,\n  SelectOption,\n  SelectOptionWrapper,\n  StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n  {\n    children,\n    value,\n    maxHeight = DEFAULT_MAX_HEIGHT_PX,\n    placeholder,\n    onChange,\n    width,\n    extendDirection,\n    disabled,\n    onClick,\n    ...props\n  }: DesignedSelectInternalProps<Value>,\n  ref?: Ref<HTMLDivElement>\n) => {\n  const id = useId();\n  const [expandedDirection, _setExpandedDirection] =\n    useState<ExpandedType>('none');\n  const selectContainerRef = useRef<HTMLDivElement | null>(null);\n  const selectListRef = useRef<HTMLUListElement | null>(null);\n  const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n    'pointerdown',\n    () => {\n      setExpandedDirection('none');\n    }\n  );\n\n  const setExpandedDirection = useCallback(\n    (...args: Parameters<typeof _setExpandedDirection>) => {\n      if (disabled) {\n        return;\n      }\n      _setExpandedDirection(...args);\n    },\n    [disabled]\n  );\n\n  const options = Children.toArray(children)\n    .filter(\n      (child): child is OptionElementType<Value> =>\n        isValidElement(child) && child.type === OptionHolder\n    )\n    .map(\n      ({\n        props: { children: _children, value: _value, disabled: _disabled },\n      }) => ({\n        label: _children,\n        value: _value,\n        disabled: _disabled,\n      })\n    );\n\n  const selectedOption = options.find((option) => value === option.value);\n\n  const isExpanded = expandedDirection !== 'none';\n\n  const onSelectOption = (_value: Value, _label: ReactNode) => {\n    onChange?.(_value, _label);\n    setExpandedDirection('none');\n    selectContainerRef.current?.focus();\n  };\n\n  // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n  // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n  // direction이 props로 전달되었다면 해당 방향으로 확장\n  const expandSelectListAtComputedPosition = () => {\n    if (extendDirection) {\n      setExpandedDirection(extendDirection);\n      return;\n    }\n\n    const selectContainerRect =\n      selectContainerRef.current?.getBoundingClientRect();\n\n    if (!selectContainerRect) {\n      setExpandedDirection('below');\n      return;\n    }\n\n    // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n    const currentSelectHeight = Math.min(\n      maxHeight,\n      options.length * OPTION_ITEM_HEIGHT_PX\n    );\n    const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n    setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n  };\n\n  const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n    (ele) => {\n      if (!ele) {\n        return;\n      }\n\n      // 선택한 요소가 없을때는 첫번째 요소에 focus\n      if (!value && !ele.previousSibling) {\n        setTimeout(() => ele.focus());\n        return;\n      }\n\n      // 선택한 요소가 있다면 해당 요소에 focus\n      const optionValue = ele.dataset.optionValue || null;\n      if (optionValue === value) {\n        setTimeout(() => ele.focus());\n      }\n    },\n    [value]\n  );\n\n  const keyDownHandler = (e: KeyboardEvent) => {\n    const focusedElement = document.activeElement;\n\n    if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'Tab':\n        if (isExpanded) {\n          e.preventDefault();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'previous');\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'next');\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setExpandedDirection('none');\n        selectContainerRef.current?.focus();\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n\n        if (e.target === e.currentTarget) {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n          expandSelectListAtComputedPosition();\n        }\n\n        if (\n          focusedElement?.matches('[data-option-value]') &&\n          focusedElement instanceof HTMLLIElement &&\n          focusedElement.dataset.optionValue\n        ) {\n          onSelectOption(\n            focusedElement.dataset.optionValue as Value,\n            focusedElement.innerText\n          );\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <SelectContainer\n      ref={(el) => {\n        if (!el) {\n          return;\n        }\n        selectContainerRef.current = el;\n        clickAwayRef.current = el;\n      }}\n      $width={width}\n      tabIndex={disabled ? undefined : 0}\n      aria-expanded={isExpanded}\n      aria-haspopup=\"listbox\"\n      aria-disabled={disabled}\n      onKeyDown={keyDownHandler}\n      {...props}\n    >\n      <StyledSelect\n        ref={ref}\n        onClick={onClick}\n        expandedDirection={expandedDirection}\n        isPlaceholder={!selectedOption && !!placeholder}\n        onPointerDown={(e) => {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n\n          e.stopPropagation();\n\n          expandSelectListAtComputedPosition();\n        }}\n      >\n        {selectedOption?.label || placeholder || 'ㅤ'}\n      </StyledSelect>\n      <SelectDownIcon>\n        {isExpanded ? (\n          <IconArrow2Up size=\"small\" />\n        ) : (\n          <IconArrow2Down size=\"small\" />\n        )}\n      </SelectDownIcon>\n      {isExpanded && (\n        <SelectOptionWrapper\n          role=\"listbox\"\n          aria-activedescendant={\n            value != null ? `${id}-select-option-${value}` : undefined\n          }\n          ref={selectListRef}\n          expandedDirection={expandedDirection}\n          maxHeight={maxHeight}\n        >\n          {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n            <SelectOption\n              id={`${id}-select-option-${optionValue}`}\n              role=\"option\"\n              key={optionValue}\n              tabIndex={_disabled ? undefined : 0}\n              aria-selected={optionValue === value}\n              aria-disabled={_disabled}\n              ref={optionItemRef}\n              isSelected={optionValue === value}\n              data-option-value={optionValue}\n              // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n              onMouseMove={(e) => {\n                if (e.currentTarget === document.activeElement) {\n                  return;\n                }\n                e.currentTarget.focus({\n                  preventScroll: true,\n                });\n              }}\n              onFocus={() => {\n                selectListRef.current?.setAttribute(\n                  'aria-activedescendant',\n                  `${id}-select-option-${optionValue}`\n                );\n              }}\n              onClick={() => {\n                if (_disabled) {\n                  return;\n                }\n\n                onSelectOption(optionValue, label);\n              }}\n            >\n              {label}\n            </SelectOption>\n          ))}\n        </SelectOptionWrapper>\n      )}\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","onClick","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAcK;;;AAVDA;;;;;;;AAOGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AAA0B;;AAIxBH;AACAI;AACAZ;AACAa;AACAC;AACE;;AAEE;AACF;;AAIAR;;;AAG0C;AAE/BS;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAT;AACAR;AACAF;AAAqBiB;AAER;;;;;AAGTE;AAEAP;;AAEA;AACAF;;;AAGA;AAAA;AACAU;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}

package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js

@@ -0,0 +1,49 @@
+"use client";
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var mixin = require('@remember-web/mixin');
+var styles = require('../styles.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var StyledSelect = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  ", "\n  border: 1px solid ", ";\n  ", ";\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", "\n\n  ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n  ", ":not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), mixin.ellipsis(), mixin.contents300, function (_ref) {
+  var expandedDirection = _ref.expandedDirection;
+  return {
+    none: styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n        border-radius: 4px;\n      "]))),
+    above: styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      "]))),
+    below: styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      "])))
+  }[expandedDirection !== null && expandedDirection !== void 0 ? expandedDirection : 'none'];
+}, function (_ref2) {
+  var isPlaceholder = _ref2.isPlaceholder;
+  return isPlaceholder && styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n      color: ", ";\n    "])), mixin.contents200);
+}, styles.SelectContainer, mixin.contents000, styles.SelectContainer, mixin.bg200, mixin.bg300);
+var SelectDownIcon = styled__default.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
+var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ", ";\n  background-color: ", ";\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", ";\n\n  ", "\n\n  ", ":focus &, ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n"])), mixin.contents300, mixin.bg100, function (_ref3) {
+  var maxHeight = _ref3.maxHeight;
+  if (!maxHeight) {
+    return null;
+  }
+  if (typeof maxHeight === 'number') {
+    return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n        max-height: ", "px;\n      "])), maxHeight);
+  }
+  return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n      max-height: ", ";\n    "])), maxHeight);
+}, function (_ref4) {
+  var expandedDirection = _ref4.expandedDirection;
+  return expandedDirection === 'below' ? styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        "]))) : styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        "])));
+}, styles.SelectContainer, styles.SelectContainer, mixin.contents000);
+var SelectOption = styled__default.default.li(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n  ", "\n  padding: 10px 12px;\n  color: ", ";\n\n  &[aria-disabled='true'] {\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n\n  ", "\n"])), mixin.ellipsis(), mixin.contents000, mixin.contents300, mixin.bg200, function (_ref5) {
+  var isSelected = _ref5.isSelected;
+  return isSelected && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default.default(["\n      background-color: ", ";\n    "])), mixin.bg200);
+});
+
+exports.SelectDownIcon = SelectDownIcon;
+exports.SelectOption = SelectOption;
+exports.SelectOptionWrapper = SelectOptionWrapper;
+exports.StyledSelect = StyledSelect;
+//# sourceMappingURL=styles.cjs.js.map

package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n  expandedDirection?: ExpandedType;\n  isPlaceholder?: boolean;\n}>`\n  ${ellipsis()}\n  border: 1px solid ${contents300};\n  ${({ expandedDirection }) =>\n    ({\n      none: css`\n        border-radius: 4px;\n      `,\n      above: css`\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      `,\n      below: css`\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      `,\n    }[expandedDirection ?? 'none'])};\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n  ${SelectContainer}:not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\n\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n  expandedDirection?: ExpandedType;\n  maxHeight?: number | string;\n}>`\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ${contents300};\n  background-color: ${bg100};\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ maxHeight }) => {\n    if (!maxHeight) {\n      return null;\n    }\n\n    if (typeof maxHeight === 'number') {\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    }\n\n    return css`\n      max-height: ${maxHeight};\n    `;\n  }};\n\n  ${({ expandedDirection }) =>\n    expandedDirection === 'below'\n      ? css`\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        `\n      : css`\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        `}\n\n  ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n  ${ellipsis()}\n  padding: 10px 12px;\n  color: ${contents000};\n\n  &[aria-disabled='true'] {\n    color: ${contents300};\n  }\n\n  &:focus {\n    background-color: ${bg200};\n    outline: none;\n  }\n\n  ${({ isSelected }) =>\n    isSelected &&\n    css`\n      background-color: ${bg200};\n    `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;;;;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI4B;AAK9B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;;;;"}

package/dist/src/Inputs/Select/DesignedSelect/styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ExpandedType } from './types';
+export declare const StyledSelect: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    expandedDirection?: ExpandedType | undefined;
+    isPlaceholder?: boolean | undefined;
+}>>;
+export declare const SelectDownIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const SelectOptionWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
+    expandedDirection?: ExpandedType | undefined;
+    maxHeight?: string | number | undefined;
+}>>;
+export declare const SelectOption: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
+    isSelected?: boolean | undefined;
+}>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/src/Inputs/Select/DesignedSelect/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,YAAY;;;GA6CxB,CAAC;AAEF,eAAO,MAAM,cAAc,gNAW1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAgD/B,CAAC;AAEF,eAAO,MAAM,YAAY;;GAmBxB,CAAC"}

package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js

@@ -0,0 +1,39 @@
+"use client";
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import styled, { css } from 'styled-components';
+import { ellipsis, contents300, contents200, contents000, bg200, bg300, bg100 } from '@remember-web/mixin';
+import { SelectContainer } from '../styles.esm.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var StyledSelect = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  border: 1px solid ", ";\n  ", ";\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", "\n\n  ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n  ", ":not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), ellipsis(), contents300, function (_ref) {
+  var expandedDirection = _ref.expandedDirection;
+  return {
+    none: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        border-radius: 4px;\n      "]))),
+    above: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      "]))),
+    below: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      "])))
+  }[expandedDirection !== null && expandedDirection !== void 0 ? expandedDirection : 'none'];
+}, function (_ref2) {
+  var isPlaceholder = _ref2.isPlaceholder;
+  return isPlaceholder && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), contents200);
+}, SelectContainer, contents000, SelectContainer, bg200, bg300);
+var SelectDownIcon = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
+var SelectOptionWrapper = styled.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ", ";\n  background-color: ", ";\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", ";\n\n  ", "\n\n  ", ":focus &, ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n"])), contents300, bg100, function (_ref3) {
+  var maxHeight = _ref3.maxHeight;
+  if (!maxHeight) {
+    return null;
+  }
+  if (typeof maxHeight === 'number') {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        max-height: ", "px;\n      "])), maxHeight);
+  }
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      max-height: ", ";\n    "])), maxHeight);
+}, function (_ref4) {
+  var expandedDirection = _ref4.expandedDirection;
+  return expandedDirection === 'below' ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        "]))) : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        "])));
+}, SelectContainer, SelectContainer, contents000);
+var SelectOption = styled.li(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", "\n  padding: 10px 12px;\n  color: ", ";\n\n  &[aria-disabled='true'] {\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n\n  ", "\n"])), ellipsis(), contents000, contents300, bg200, function (_ref5) {
+  var isSelected = _ref5.isSelected;
+  return isSelected && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), bg200);
+});
+
+export { SelectDownIcon, SelectOption, SelectOptionWrapper, StyledSelect };
+//# sourceMappingURL=styles.esm.js.map

package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n  expandedDirection?: ExpandedType;\n  isPlaceholder?: boolean;\n}>`\n  ${ellipsis()}\n  border: 1px solid ${contents300};\n  ${({ expandedDirection }) =>\n    ({\n      none: css`\n        border-radius: 4px;\n      `,\n      above: css`\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      `,\n      below: css`\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      `,\n    }[expandedDirection ?? 'none'])};\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n  ${SelectContainer}:not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\n\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n  expandedDirection?: ExpandedType;\n  maxHeight?: number | string;\n}>`\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ${contents300};\n  background-color: ${bg100};\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ maxHeight }) => {\n    if (!maxHeight) {\n      return null;\n    }\n\n    if (typeof maxHeight === 'number') {\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    }\n\n    return css`\n      max-height: ${maxHeight};\n    `;\n  }};\n\n  ${({ expandedDirection }) =>\n    expandedDirection === 'below'\n      ? css`\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        `\n      : css`\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        `}\n\n  ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n  ${ellipsis()}\n  padding: 10px 12px;\n  color: ${contents000};\n\n  &[aria-disabled='true'] {\n    color: ${contents300};\n  }\n\n  &:focus {\n    background-color: ${bg200};\n    outline: none;\n  }\n\n  ${({ isSelected }) =>\n    isSelected &&\n    css`\n      background-color: ${bg200};\n    `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI4B;AAK9B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;"}

package/dist/src/Inputs/Select/DesignedSelect/types.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode, SelectHTMLAttributes } from 'react';
+import type { OptionElementType, SelectValue } from '../types';
+export type DesignedSelectInternalProps<Value extends SelectValue> = Omit<SelectHTMLAttributes<HTMLDivElement>, `aria-${string}` | 'children' | 'onChange'> & {
+    children: OptionElementType<Value> | OptionElementType<Value>[];
+    onChange?: (targetValue: Value, targetLabel: ReactNode) => Promise<void> | void;
+    maxHeight?: number;
+    width?: number | string;
+    placeholder?: string;
+    extendDirection?: Exclude<ExpandedType, 'none'>;
+};
+export type ExpandedType = 'none' | 'above' | 'below';
+//# sourceMappingURL=types.d.ts.map

package/dist/src/Inputs/Select/DesignedSelect/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,MAAM,2BAA2B,CAAC,KAAK,SAAS,WAAW,IAAI,IAAI,CACvE,oBAAoB,CAAC,cAAc,CAAC,EACpC,QAAQ,MAAM,EAAE,GAAG,UAAU,GAAG,UAAU,CAC3C,GAAG;IACF,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;IAChE,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC"}

package/dist/src/Inputs/Select/NativeSelect/Option/index.cjs.js

@@ -0,0 +1,18 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+var NativeOption = function NativeOption(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    value = _ref.value;
+  return /*#__PURE__*/jsxRuntime.jsx("option", {
+    value: value,
+    disabled: disabled,
+    children: String(children)
+  });
+};
+
+exports.NativeOption = NativeOption;
+//# sourceMappingURL=index.cjs.js.map

package/dist/src/Inputs/Select/NativeSelect/Option/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../../src/Inputs/Select/NativeSelect/Option/index.tsx"],"sourcesContent":["'use client';\n\nimport type { OptionProps, SelectValue } from '../../types';\n\nexport const NativeOption = <Value extends SelectValue = string>({\n  children,\n  disabled,\n  value,\n}: OptionProps<Value>) => (\n  <option value={value} disabled={disabled}>\n    {String(children)}\n  </option>\n);\n"],"names":["value","disabled"],"mappings":";;;;;;AAIyB;;;AAGlB;AAEGA;AAAcC;;AACH;AACV;;"}

package/dist/src/Inputs/Select/NativeSelect/Option/index.d.ts

@@ -0,0 +1,3 @@
+import type { OptionProps, SelectValue } from '../../types';
+export declare const NativeOption: <Value extends SelectValue = string>({ children, disabled, value, }: OptionProps<Value>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Inputs/Select/NativeSelect/Option/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Inputs/Select/NativeSelect/Option/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE5D,eAAO,MAAM,YAAY,uEAItB,YAAY,KAAK,CAAC,4CAIpB,CAAC"}

package/dist/src/Inputs/Select/NativeSelect/Option/index.esm.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+
+var NativeOption = function NativeOption(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    value = _ref.value;
+  return /*#__PURE__*/jsx("option", {
+    value: value,
+    disabled: disabled,
+    children: String(children)
+  });
+};
+
+export { NativeOption };
+//# sourceMappingURL=index.esm.js.map

package/dist/src/Inputs/Select/NativeSelect/Option/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/Inputs/Select/NativeSelect/Option/index.tsx"],"sourcesContent":["'use client';\n\nimport type { OptionProps, SelectValue } from '../../types';\n\nexport const NativeOption = <Value extends SelectValue = string>({\n  children,\n  disabled,\n  value,\n}: OptionProps<Value>) => (\n  <option value={value} disabled={disabled}>\n    {String(children)}\n  </option>\n);\n"],"names":["value","disabled"],"mappings":";;;;AAIyB;;;AAGlB;AAEGA;AAAcC;;AACH;AACV;;"}

package/dist/src/Inputs/Select/NativeSelect/index.cjs.js

@@ -0,0 +1,55 @@
+"use client";
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+var icon = require('@remember-web/icon');
+var styles$1 = require('./styles.cjs.js');
+var styles = require('../styles.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
+
+var _excluded = ["children", "className", "width", "placeholder", "value", "disabled", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var NativeSelect = function NativeSelect(_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    width = _ref.width,
+    placeholder = _ref.placeholder,
+    value = _ref.value,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties__default.default(_ref, _excluded);
+  var showPlaceholder = !value && !!placeholder;
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.SelectContainer, {
+    "aria-disabled": disabled,
+    className: className,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(styles$1.StyledSelect, _objectSpread(_objectSpread({}, props), {}, {
+      value: value,
+      $width: width,
+      ref: ref,
+      isPlaceholder: showPlaceholder,
+      disabled: disabled,
+      onClick: onClick,
+      children: [!value && /*#__PURE__*/jsxRuntime.jsx("option", {
+        value: "",
+        selected: true,
+        children: placeholder || 'ㅤ'
+      }), children]
+    })), /*#__PURE__*/jsxRuntime.jsx(styles$1.SelectDownIcon, {
+      children: /*#__PURE__*/jsxRuntime.jsx(icon.IconArrow2Down, {
+        size: "small"
+      })
+    })]
+  });
+};
+var NativeSelect$1 = /*#__PURE__*/react.forwardRef(NativeSelect);
+
+module.exports = NativeSelect$1;
+//# sourceMappingURL=index.cjs.js.map

package/dist/src/Inputs/Select/NativeSelect/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\nimport { IconArrow2Down } from '@remember-web/icon';\n\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\nimport { SelectContainer } from '../styles';\n\nconst NativeSelect: ForwardRefRenderFunction<\n  HTMLSelectElement,\n  NativeSelectInternalProps\n> = (\n  {\n    children,\n    className,\n    width,\n    placeholder,\n    value,\n    disabled,\n    onClick,\n    ...props\n  },\n  ref\n) => {\n  const showPlaceholder = !value && !!placeholder;\n\n  return (\n    <SelectContainer aria-disabled={disabled} className={className}>\n      <StyledSelect\n        {...props}\n        value={value}\n        $width={width}\n        ref={ref}\n        isPlaceholder={showPlaceholder}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        {!value && (\n          <option value=\"\" selected>\n            {placeholder || 'ㅤ'}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n      <SelectDownIcon>\n        <IconArrow2Down size=\"small\" />\n      </SelectDownIcon>\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","value","$width","ref","isPlaceholder","disabled","onClick","children","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAeK;;;;;;;AAHEA;AAIL;;AAGmB;AAAyBC;;AAGtCC;AACAC;AACAC;AACAC;AACAC;AACAC;AAAiBC;AAGPN;;;;AAID;;AAGOO;;AAAe;AAChB;AAGvB;AAEA;;"}

package/dist/src/Inputs/Select/NativeSelect/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("react").SelectHTMLAttributes<HTMLSelectElement>, `aria-${string}` | "children"> & {
+    children: import("react").ReactElement<import("../types").OptionProps<string>, <Value extends import("../types").SelectValue = string>({ children, disabled, value, }: import("../types").OptionProps<Value>) => import("react/jsx-runtime").JSX.Element> | import("react").ReactElement<import("../types").OptionProps<string>, <Value extends import("../types").SelectValue = string>({ children, disabled, value, }: import("../types").OptionProps<Value>) => import("react/jsx-runtime").JSX.Element>[];
+    width?: string | number | undefined;
+    placeholder?: string | undefined;
+} & import("react").RefAttributes<HTMLSelectElement>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Inputs/Select/NativeSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"names":[],"mappings":";;;;;;AAqDA,wBAAwC"}