@nation-a/ui 0.16.4 → 0.16.6

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: {
@@ -9952,7 +9952,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 +9974,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(
@@ -10196,16 +10208,16 @@ const dialogRecipe = sva({
     }
   }
 });
-const { withRootProvider: withRootProvider$3, withContext: withContext$6 } = createStyleContext(dialogRecipe);
-const Root$7 = withRootProvider$3(DialogRoot);
-const Backdrop$1 = withContext$6(DialogBackdrop, "backdrop");
-const Trigger$3 = withContext$6(DialogTrigger, "trigger");
-const Content$4 = withContext$6(DialogContent, "content");
-const Title = withContext$6(DialogTitle, "title");
-const Description$2 = withContext$6(DialogDescription, "description");
-const Positioner = withContext$6(DialogPositioner, "positioner");
-const Header$1 = withContext$6(ark.header, "header");
-const Footer = withContext$6(
+const { withRootProvider: withRootProvider$4, withContext: withContext$7 } = createStyleContext(dialogRecipe);
+const Root$8 = withRootProvider$4(DialogRoot);
+const Backdrop$1 = withContext$7(DialogBackdrop, "backdrop");
+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 Header$1 = withContext$7(ark.header, "header");
+const Footer = withContext$7(
   ({ orientation = "horizontal", className, ...props }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ark.footer,
@@ -10223,10 +10235,10 @@ const Footer = withContext$6(
   },
   "footer"
 );
-const Body = withContext$6(ark.main, "body");
-const CloseTrigger = withContext$6(DialogCloseTrigger, "closeTrigger");
+const Body = withContext$7(ark.main, "body");
+const CloseTrigger = withContext$7(DialogCloseTrigger, "closeTrigger");
 const Dialog = {
-  Root: Root$7,
+  Root: Root$8,
   Backdrop: Backdrop$1,
   Trigger: Trigger$3,
   Content: Content$4,
@@ -19365,20 +19377,20 @@ const navigationRecipe = sva({
     }
   }
 });
-const { withRootProvider: withRootProvider$2, withContext: withContext$5 } = createStyleContext(navigationRecipe);
-const Root$6 = withRootProvider$2(TabsRoot);
-const Trigger$2 = withContext$5(
+const { withRootProvider: withRootProvider$3, withContext: withContext$6 } = createStyleContext(navigationRecipe);
+const Root$7 = withRootProvider$3(TabsRoot);
+const Trigger$2 = withContext$6(
   ({ icon, label, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(TabTrigger, { ...props, children: [
     icon,
     label
   ] }),
   "trigger"
 );
-const List$1 = withContext$5(TabList, "list");
+const List$2 = withContext$6(TabList, "list");
 const Navigation = {
-  Root: Root$6,
+  Root: Root$7,
   Item: Trigger$2,
-  List: List$1
+  List: List$2
 };
 const tagRecipe = cva({
   base: {
@@ -20142,15 +20154,15 @@ const tabsRecipe = sva({
     shadow: false
   }
 });
-const { withRootProvider: withRootProvider$1, withContext: withContext$4 } = createStyleContext(tabsRecipe);
-const Root$5 = withRootProvider$1(TabsRoot);
-const List = withContext$4(TabList, "list");
-const Trigger$1 = withContext$4(TabTrigger, "trigger");
-const Content$2 = withContext$4(TabContent, "content");
-const Indicator$1 = withContext$4(TabIndicator, "indicator");
-const Tabs = Object.assign(Root$5, {
-  Root: Root$5,
-  List,
+const { withRootProvider: withRootProvider$2, withContext: withContext$5 } = createStyleContext(tabsRecipe);
+const Root$6 = withRootProvider$2(TabsRoot);
+const List$1 = withContext$5(TabList, "list");
+const Trigger$1 = withContext$5(TabTrigger, "trigger");
+const Content$2 = withContext$5(TabContent, "content");
+const Indicator$1 = withContext$5(TabIndicator, "indicator");
+const Tabs = Object.assign(Root$6, {
+  Root: Root$6,
+  List: List$1,
   Trigger: Trigger$1,
   Content: Content$2,
   Indicator: Indicator$1
@@ -20635,13 +20647,13 @@ const toastRecipe = sva({
   }
 });
 const DEFAULT_DURATION = 3e3;
-const Root$4 = React.forwardRef(
+const Root$5 = React.forwardRef(
   ({ children, className, width = "fit", ...props }, ref) => {
     const styles2 = toastRecipe({ width });
     return /* @__PURE__ */ jsxRuntime.jsx(Box$1, { ref, className: cx(styles2.root, className), ...props, children });
   }
 );
-Root$4.displayName = "Toast.Root";
+Root$5.displayName = "Toast.Root";
 const Content$1 = React.forwardRef(
   ({ children, className }, ref) => {
     const styles2 = toastRecipe();
@@ -20687,7 +20699,7 @@ Toaster.displayName = "Toast.Toaster";
 const Toast = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Box$1, { ref, ...props });
 });
-Toast.Root = Root$4;
+Toast.Root = Root$5;
 Toast.Content = Content$1;
 Toast.Description = Description$1;
 Toast.Icon = Icon;
@@ -20879,27 +20891,27 @@ const selectRecipe = sva({
     disabled: false
   }
 });
-const { withRootProvider, withContext: withContext$3 } = createStyleContext(selectRecipe);
-const Root$3 = withRootProvider(withContext$3(SelectRoot, "root"));
-const Label$2 = withContext$3(SelectLabel, "label");
-const Trigger = withContext$3(({ description, ...props }) => {
+const { withRootProvider: withRootProvider$1, withContext: withContext$4 } = createStyleContext(selectRecipe);
+const Root$4 = withRootProvider$1(withContext$4(SelectRoot, "root"));
+const Label$2 = withContext$4(SelectLabel, "label");
+const Trigger = withContext$4(({ description, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { ...props }),
     description && /* @__PURE__ */ jsxRuntime.jsx(Description, { text: description })
   ] });
 }, "trigger");
-const ValueText = withContext$3(SelectValueText, "valueText");
-const Description = withContext$3(({ className, text, ...props }) => {
+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$3(SelectContent, "content");
-const Item$1 = withContext$3(SelectItem, "item");
+const Content = withContext$4(SelectContent, "content");
+const Item$2 = withContext$4(SelectItem, "item");
 const Select = {
-  Root: Root$3,
+  Root: Root$4,
   Label: Label$2,
   Trigger,
   Content,
-  Item: Item$1,
+  Item: Item$2,
   ValueText,
   Description
 };
@@ -20970,27 +20982,27 @@ const radioGroupRecipe = sva({
     }
   }
 });
-const { withProvider: withProvider$2, withContext: withContext$2 } = createStyleContext(radioGroupRecipe);
+const { withProvider: withProvider$2, withContext: withContext$3 } = createStyleContext(radioGroupRecipe);
 withProvider$2(RadioGroupRootProvider, "root");
-const Root$2 = withProvider$2(RadioGroupRoot, "root");
-const ItemControl = withContext$2(
+const Root$3 = withProvider$2(RadioGroupRoot, "root");
+const ItemControl = withContext$3(
   RadioGroupItemControl,
   "itemControl"
 );
-const Item = withContext$2(
+const Item$1 = withContext$3(
   RadioGroupItem$1,
   "item"
 );
-const ItemText = withContext$2(
+const ItemText = withContext$3(
   RadioGroupItemText,
   "itemText"
 );
-const Label$1 = withContext$2(
+const Label$1 = withContext$3(
   RadioGroupLabel,
   "label"
 );
-const RadioGroupItem = withContext$2(
-  ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(Item, { ...props, children: [
+const RadioGroupItem = withContext$3(
+  ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(Item$1, { ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ItemControl, {}),
     children && /* @__PURE__ */ jsxRuntime.jsx(ItemText, { children }),
     /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItemHiddenInput, {})
@@ -20998,7 +21010,7 @@ const RadioGroupItem = withContext$2(
   "item"
 );
 const RadioGroup = {
-  Root: Root$2,
+  Root: Root$3,
   Item: RadioGroupItem,
   Label: Label$1,
   Context: RadioGroupContext
@@ -21092,28 +21104,28 @@ const checkboxRecipe = sva({
     variant: "square"
   }
 });
-const { withProvider: withProvider$1, withContext: withContext$1 } = createStyleContext(checkboxRecipe);
+const { withProvider: withProvider$1, withContext: withContext$2 } = createStyleContext(checkboxRecipe);
 withProvider$1(CheckboxRootProvider, "root");
-const Root$1 = withProvider$1(CheckboxRoot, "root");
-const Control$1 = withContext$1(
+const Root$2 = withProvider$1(CheckboxRoot, "root");
+const Control$1 = withContext$2(
   CheckboxControl,
   "control"
 );
-withContext$1(
+withContext$2(
   CheckboxGroup,
   "group"
 );
-const Indicator = withContext$1(
+const Indicator = withContext$2(
   CheckboxIndicator,
   "indicator"
 );
-const Label = withContext$1(
+const Label = withContext$2(
   CheckboxLabel,
   "label"
 );
 const Checkbox = React.forwardRef((props, ref) => {
   const { children, ...rootProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$1, { ref, ...rootProps, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$2, { ref, ...rootProps, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Control$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Indicator, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(Indicator, { indeterminate: true, children: /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {}) })
@@ -21275,23 +21287,23 @@ const switchRecipe = sva({
     }
   }
 });
-const { withProvider, withContext } = createStyleContext(switchRecipe);
+const { withProvider, withContext: withContext$1 } = createStyleContext(switchRecipe);
 withProvider(SwitchRootProvider, "root");
-const Root = withProvider(SwitchRoot, "root");
-const Control = withContext(
+const Root$1 = withProvider(SwitchRoot, "root");
+const Control = withContext$1(
   SwitchControl,
   "control"
 );
-withContext(
+withContext$1(
   SwitchLabel,
   "label"
 );
-const Thumb = withContext(
+const Thumb = withContext$1(
   SwitchThumb,
   "thumb"
 );
 const Switch = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root, { ref, ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$1, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Control, { children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx(SwitchHiddenInput, {})
   ] });
@@ -21406,6 +21418,88 @@ const Fab = React.forwardRef(({ loading, disabled, children, color: color2, ...r
 });
 Fab.displayName = "Fab";
 const index = React.memo(withPolymorphicComponent(Fab));
+const listRecipe = sva({
+  className: "list",
+  slots: ["item", "root"],
+  base: {
+    root: {
+      display: "flex",
+      flexDir: "column",
+      w: "full"
+    },
+    item: {
+      gap: 2,
+      py: 2,
+      w: "full",
+      rounded: "sm",
+      transition: "background-color 0.1s ease-in-out",
+      cursor: "pointer",
+      "& .label": {
+        color: "content.neutral.default"
+      },
+      "& .sub-label": {
+        color: "content.neutral.subtlest"
+      },
+      _hover: {
+        bg: "background.neutral.selected"
+      },
+      _disabled: {
+        _hover: {
+          bg: "transparent"
+        },
+        "& .label": {
+          color: "content.neutral.disabled"
+        },
+        "& .sub-label": {
+          color: "content.neutral.disabled"
+        },
+        cursor: "not-allowed"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        item: {
+          h: "52px"
+        }
+      },
+      lg: {
+        item: { h: "68px" }
+      }
+    },
+    density: {
+      1: { item: { px: 2 } },
+      2: { item: { pl: 12, pr: 2 } }
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    density: 1
+  }
+});
+const { withRootProvider, withContext } = createStyleContext(listRecipe);
+const Root = withRootProvider(withContext(styled.ul, "root"));
+const Item = withContext(
+  ({ startAdornment, endAdornment, label, subLabel, disabled, ...rest }) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(HStack2, { gap: 2, justify: "space-between", as: "li", ...rest, disabled, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HStack2, { children: [
+        startAdornment,
+        /* @__PURE__ */ jsxRuntime.jsxs(Stack2, { gap: 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label.md", className: "label", children: label }),
+          subLabel && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label.sm", className: "sub-label", children: subLabel })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(HStack2, { children: endAdornment })
+    ] });
+  },
+  "item"
+);
+Item.displayName = "Item";
+const List = Object.assign(Root, {
+  Root,
+  Item
+});
 function definePreset(preset2) {
   return preset2;
 }
@@ -21508,6 +21602,7 @@ const conditions = {
   }
 };
 const breakpoints = {
+  xs: "480px",
   sm: "640px",
   md: "768px",
   lg: "1024px",
@@ -21729,6 +21824,7 @@ exports.GridItem = GridItem2;
 exports.HStack = HStack2;
 exports.IconButton = index$4;
 exports.Input = index$2;
+exports.List = List;
 exports.Navigation = Navigation;
 exports.Portal = Portal;
 exports.RadioGroup = RadioGroup;