@nation-a/ui 0.16.5 → 0.16.7

package/README.md

@@ -8,6 +8,7 @@ Nation-A 디자인 시스템의 UI 컴포넌트 라이브러리입니다. 모던
 - **접근성 중심**: Ark UI를 활용한 접근성 준수 컴포넌트
 - **테마 지원**: 다크모드와 라이트모드를 포함한 테마 지원
 - **Storybook 문서화**: 모든 컴포넌트에 대한 사용 예시와 문서
+- **테스트**: 컴포넌트 테스트를 통한 품질 보장
 
 ## 설치
 
@@ -42,6 +43,33 @@ pnpm panda
 pnpm build
 ```
 
+## 테스트
+
+```bash
+# 모든 테스트 실행
+pnpm test
+
+# 감시 모드로 테스트 실행
+pnpm test:watch
+
+# 테스트 커버리지 확인
+pnpm test:coverage
+
+# 새 컴포넌트를 위한 테스트 파일 생성
+pnpm generate-tests
+```
+
+### 테스트 환경
+
+테스트 환경은 다음 도구를 사용합니다:
+
+- Vitest - 테스트 실행기
+- React Testing Library - React 컴포넌트 테스트
+- Happy DOM - DOM 시뮬레이션
+- Jest DOM - DOM 매처 확장
+
+자세한 내용은 `src/test/README.md`를 참조하세요.
+
 ## 의존성
 
 - React 18.x

package/dist/index.cjs

@@ -298,7 +298,7 @@ function normalizeHTMLProps(props) {
   return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
 }
 normalizeHTMLProps.keys = htmlProps;
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_collapsed,_off,_on,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base";
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_collapsed,_off,_on,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,base";
 const conditions$1 = new Set(conditionsStr.split(","));
 const conditionRegex = /^@|&|&$/;
 function isCondition(value) {
@@ -344,7 +344,7 @@ const context = {
   conditions: {
     shift: sortConditions,
     finalize: finalizeConditions,
-    breakpoints: { keys: ["base", "sm", "md", "lg", "xl", "2xl"] }
+    breakpoints: { keys: ["base", "xs", "sm", "md", "lg", "xl", "2xl"] }
   },
   utility: {
     transform: (prop, value) => {
@@ -802,7 +802,7 @@ const Spinner = React.forwardRef(({ className, size: size2, color: color2, ...pr
       setLottieComponent(() => mod.default);
     });
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(Box2, { ref, ...props, className: cx(spinnerRecipe({ size: size2 }), css$1({ color: color2 }), className), children: LottieComponent && /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Box2, { ref, id: "spinner", ...props, className: cx(spinnerRecipe({ size: size2 }), css$1({ color: color2 }), className), children: LottieComponent && /* @__PURE__ */ jsxRuntime.jsx(
     LottieComponent,
     {
       options: {
@@ -7686,6 +7686,12 @@ const SelectContent = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref: composeRefs(presence.ref, ref) });
 });
 SelectContent.displayName = "SelectContent";
+const SelectControl = React.forwardRef((props, ref) => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps(select.getControlProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref });
+});
+SelectControl.displayName = "SelectControl";
 const [SelectItemProvider, useSelectItemContext] = createContext({
   name: "SelectItemContext",
   hookName: "useSelectItemContext",
@@ -7710,6 +7716,16 @@ const SelectLabel = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ark.label, { ...mergedProps, ref });
 });
 SelectLabel.displayName = "SelectLabel";
+const SelectPositioner = React.forwardRef((props, ref) => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps(select.getPositionerProps(), props);
+  const presence = usePresenceContext();
+  if (presence.unmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref });
+});
+SelectPositioner.displayName = "SelectPositioner";
 var anatomy$2 = createAnatomy("select").parts(
   "label",
   "positioner",
@@ -9952,7 +9968,18 @@ const TabsRoot = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TabsProvider, { value: tabs, children: /* @__PURE__ */ jsxRuntime.jsx(RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 TabsRoot.displayName = "TabsRoot";
-const Button = ({ loading, disabled, loadingText, children, color: color2, variant, size: size2, radius, ...rest }) => {
+const Button = ({
+  loading,
+  disabled,
+  loadingText,
+  children,
+  color: color2,
+  variant,
+  size: size2,
+  radius,
+  onClick,
+  ...rest
+}) => {
   const StyledButton = styled(ark.button, buttonRecipe);
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton,
@@ -9963,6 +9990,7 @@ const Button = ({ loading, disabled, loadingText, children, color: color2, varia
       size: size2,
       radius,
       css: { pointerEvents: loading ? "none" : "auto" },
+      onClick: disabled || loading ? void 0 : onClick,
       ...rest,
       children: loading ? loadingText || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -10203,7 +10231,7 @@ const Trigger$3 = withContext$7(DialogTrigger, "trigger");
 const Content$4 = withContext$7(DialogContent, "content");
 const Title = withContext$7(DialogTitle, "title");
 const Description$2 = withContext$7(DialogDescription, "description");
-const Positioner = withContext$7(DialogPositioner, "positioner");
+const Positioner$1 = withContext$7(DialogPositioner, "positioner");
 const Header$1 = withContext$7(ark.header, "header");
 const Footer = withContext$7(
   ({ orientation = "horizontal", className, ...props }) => {
@@ -10232,7 +10260,7 @@ const Dialog = {
   Content: Content$4,
   Title,
   Description: Description$2,
-  Positioner,
+  Positioner: Positioner$1,
   Header: Header$1,
   Footer,
   Body,
@@ -20780,7 +20808,7 @@ Toast.error = (description, option) => {
 };
 const selectRecipe = sva({
   className: "select",
-  slots: ["root", "trigger", "content", "item", "label", "valueText", "description"],
+  slots: [...anatomy$2.keys(), "description"],
   base: {
     root: {
       display: "flex",
@@ -20789,6 +20817,7 @@ const selectRecipe = sva({
       width: "100%"
     },
     trigger: {
+      position: "relative",
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -20804,11 +20833,18 @@ const selectRecipe = sva({
     },
     content: {
       backgroundColor: "background.neutral.default",
-      mt: 2,
       padding: 2,
       borderRadius: 16,
       overflowY: "auto",
-      zIndex: "dropdown"
+      zIndex: "dropdown",
+      display: "flex",
+      flexDirection: "column",
+      _open: {
+        animation: "fadeIn 0.2s ease-in"
+      },
+      _closed: {
+        animation: "fadeOut 0.2s ease-out"
+      }
     },
     item: {
       display: "flex",
@@ -20818,8 +20854,10 @@ const selectRecipe = sva({
       cursor: "pointer",
       color: "content.neutral.default",
       textStyle: "label.md",
-      "&:hover": {
-        backgroundColor: "background.neutral.hover"
+      rounded: "sm",
+      transition: "all 0.2s ease",
+      _hover: {
+        backgroundColor: "background.neutral.selected"
       }
     },
     label: {
@@ -20888,12 +20926,20 @@ const Trigger = withContext$4(({ description, ...props }) => {
     description && /* @__PURE__ */ jsxRuntime.jsx(Description, { text: description })
   ] });
 }, "trigger");
+const Control$2 = withContext$4(
+  SelectControl,
+  "control"
+);
 const ValueText = withContext$4(SelectValueText, "valueText");
 const Description = withContext$4(({ className, text, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { className, ...props, children: text });
 }, "description");
 const Content = withContext$4(SelectContent, "content");
 const Item$2 = withContext$4(SelectItem, "item");
+const Positioner = withContext$4(
+  SelectPositioner,
+  "positioner"
+);
 const Select = {
   Root: Root$4,
   Label: Label$2,
@@ -20901,7 +20947,9 @@ const Select = {
   Content,
   Item: Item$2,
   ValueText,
-  Description
+  Description,
+  Positioner,
+  Control: Control$2
 };
 const radioGroupRecipe = sva({
   className: "radioGroup",
@@ -21590,6 +21638,7 @@ const conditions = {
   }
 };
 const breakpoints = {
+  xs: "480px",
   sm: "640px",
   md: "768px",
   lg: "1024px",
@@ -21627,6 +21676,9 @@ const animations = defineTokens.animations({
   "fade-in": {
     value: "fade-in 400ms {easings.emphasized-in}"
   },
+  "fade-out": {
+    value: "fade-out 200ms {easings.emphasized-out}"
+  },
   "collapse-in": {
     value: "collapse-in 250ms {easings.emphasized-in}"
   },