@axis-ds/ui-react 1.6.1 → 1.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +12 -0
  2. package/dist/accordion/index.js +1 -1
  3. package/dist/accordion/index.mjs +1 -1
  4. package/dist/command/index.d.mts +7 -7
  5. package/dist/command/index.d.ts +7 -7
  6. package/dist/dialog/index.js +2 -2
  7. package/dist/dialog/index.mjs +2 -2
  8. package/dist/dropdown-menu/index.js +2 -2
  9. package/dist/dropdown-menu/index.mjs +2 -2
  10. package/dist/popover/index.js +1 -1
  11. package/dist/popover/index.mjs +1 -1
  12. package/dist/progress/index.js +6 -1
  13. package/dist/progress/index.mjs +6 -1
  14. package/dist/select/index.js +1 -1
  15. package/dist/select/index.mjs +1 -1
  16. package/dist/sheet/index.js +2 -2
  17. package/dist/sheet/index.mjs +2 -2
  18. package/dist/skeleton/index.d.mts +4 -1
  19. package/dist/skeleton/index.d.ts +4 -1
  20. package/dist/skeleton/index.js +1 -1
  21. package/dist/skeleton/index.mjs +1 -1
  22. package/dist/toast/index.js +1 -1
  23. package/dist/toast/index.mjs +1 -1
  24. package/dist/tooltip/index.js +1 -2
  25. package/dist/tooltip/index.mjs +1 -2
  26. package/package.json +13 -3
package/README.md CHANGED
@@ -46,6 +46,18 @@ content: [
46
46
  ],
47
47
  ```
48
48
 
49
+ ### 애니메이션
50
+
51
+ - Accordion 열고 닫기 · Progress `indeterminate` 의 keyframes 는 `@axis-ds/tokens` 가 정의합니다(Tailwind 3 preset · Tailwind 4 진입점). 따로 할 일은 없습니다.
52
+ - Dialog · Sheet · Popover · Select · DropdownMenu · Tooltip · Toast 의 열고 닫는 애니메이션(`animate-in` · `fade-in-0` 류)은 애니메이션 플러그인이 필요합니다. 선택적 peer 의존으로 선언되어 있어 설치 경고는 나오지 않습니다. 없으면 애니메이션 없이 바로 열리고 닫힙니다.
53
+
54
+ | Tailwind | 플러그인 | 넣는 곳 |
55
+ |---|---|---|
56
+ | 4 | `tw-animate-css` | 전역 CSS 의 `@import "tailwindcss";` 바로 다음 줄에 `@import "tw-animate-css";` |
57
+ | 3 | `tailwindcss-animate` | `tailwind.config` 의 `plugins: [require("tailwindcss-animate")]` |
58
+
59
+ - 움직임 줄이기(`prefers-reduced-motion: reduce`) 설정에서는 열고 닫는 애니메이션(Dialog · Sheet · Popover · Select · DropdownMenu · Tooltip · Toast)과 Accordion 이 멈춥니다(`motion-reduce:!animate-none`). 로딩 · 진행 표시(Progress 불확정 · Skeleton, `@axis-ds/agentic-ui` 의 스피너 · 실행 중 표시)는 멈추지 않고 기본보다 2~3배 느리게 움직여 처리 중임을 계속 알립니다(`motion-reduce:![animation-duration:...]`, 예: Progress 불확정 1.5s → 4s).
60
+
49
61
  ## 사용법
50
62
 
51
63
  ```tsx
package/dist/accordion/index.js CHANGED
@@ -86,7 +86,7 @@ const AccordionContent = React.forwardRef(({ className, children, ...props }, re
86
86
  AccordionPrimitive.Content,
87
87
  {
88
88
  ref,
89
- className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
89
+ className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:!animate-none",
90
90
  ...props,
91
91
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("pb-4 pt-0", className), children })
92
92
  }
package/dist/accordion/index.mjs CHANGED
@@ -50,7 +50,7 @@ const AccordionContent = React.forwardRef(({ className, children, ...props }, re
50
50
  AccordionPrimitive.Content,
51
51
  {
52
52
  ref,
53
- className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
53
+ className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:!animate-none",
54
54
  ...props,
55
55
  children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
56
56
  }
package/dist/command/index.d.mts CHANGED
@@ -10,7 +10,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
10
10
  ref?: React.Ref<HTMLDivElement>;
11
11
  } & {
12
12
  asChild?: boolean;
13
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
13
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
14
14
  label?: string;
15
15
  shouldFilter?: boolean;
16
16
  filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -26,7 +26,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
26
26
  ref?: React.Ref<HTMLInputElement>;
27
27
  } & {
28
28
  asChild?: boolean;
29
- }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
29
+ }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
30
30
  value?: string;
31
31
  onValueChange?: (search: string) => void;
32
32
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -37,7 +37,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
37
37
  ref?: React.Ref<HTMLDivElement>;
38
38
  } & {
39
39
  asChild?: boolean;
40
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
40
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
41
41
  label?: string;
42
42
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
43
43
  /** 검색 결과가 없을 때 표시되는 빈 상태 컴포넌트 */
@@ -47,7 +47,7 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
47
47
  ref?: React.Ref<HTMLDivElement>;
48
48
  } & {
49
49
  asChild?: boolean;
50
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
50
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
51
51
  /** 관련 명령어 항목들을 그룹화하는 컴포넌트 */
52
52
  declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
53
53
  children?: React.ReactNode;
@@ -55,7 +55,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
55
55
  ref?: React.Ref<HTMLDivElement>;
56
56
  } & {
57
57
  asChild?: boolean;
58
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
58
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
59
59
  heading?: React.ReactNode;
60
60
  value?: string;
61
61
  forceMount?: boolean;
@@ -65,7 +65,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
65
65
  ref?: React.Ref<HTMLDivElement>;
66
66
  } & {
67
67
  asChild?: boolean;
68
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
68
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
69
69
  alwaysRender?: boolean;
70
70
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
71
71
  /** 명령어 팔레트의 개별 선택 가능한 항목 */
@@ -75,7 +75,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
75
75
  ref?: React.Ref<HTMLDivElement>;
76
76
  } & {
77
77
  asChild?: boolean;
78
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
78
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
79
79
  disabled?: boolean;
80
80
  onSelect?: (value: string) => void;
81
81
  value?: string;
package/dist/command/index.d.ts CHANGED
@@ -10,7 +10,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
10
10
  ref?: React.Ref<HTMLDivElement>;
11
11
  } & {
12
12
  asChild?: boolean;
13
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
13
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
14
14
  label?: string;
15
15
  shouldFilter?: boolean;
16
16
  filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -26,7 +26,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
26
26
  ref?: React.Ref<HTMLInputElement>;
27
27
  } & {
28
28
  asChild?: boolean;
29
- }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
29
+ }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
30
30
  value?: string;
31
31
  onValueChange?: (search: string) => void;
32
32
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -37,7 +37,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
37
37
  ref?: React.Ref<HTMLDivElement>;
38
38
  } & {
39
39
  asChild?: boolean;
40
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
40
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
41
41
  label?: string;
42
42
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
43
43
  /** 검색 결과가 없을 때 표시되는 빈 상태 컴포넌트 */
@@ -47,7 +47,7 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
47
47
  ref?: React.Ref<HTMLDivElement>;
48
48
  } & {
49
49
  asChild?: boolean;
50
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
50
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
51
51
  /** 관련 명령어 항목들을 그룹화하는 컴포넌트 */
52
52
  declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
53
53
  children?: React.ReactNode;
@@ -55,7 +55,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
55
55
  ref?: React.Ref<HTMLDivElement>;
56
56
  } & {
57
57
  asChild?: boolean;
58
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
58
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
59
59
  heading?: React.ReactNode;
60
60
  value?: string;
61
61
  forceMount?: boolean;
@@ -65,7 +65,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
65
65
  ref?: React.Ref<HTMLDivElement>;
66
66
  } & {
67
67
  asChild?: boolean;
68
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
68
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
69
69
  alwaysRender?: boolean;
70
70
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
71
71
  /** 명령어 팔레트의 개별 선택 가능한 항목 */
@@ -75,7 +75,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
75
75
  ref?: React.Ref<HTMLDivElement>;
76
76
  } & {
77
77
  asChild?: boolean;
78
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
78
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
79
79
  disabled?: boolean;
80
80
  onSelect?: (value: string) => void;
81
81
  value?: string;
package/dist/dialog/index.js CHANGED
@@ -53,7 +53,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
53
53
  {
54
54
  ref,
55
55
  className: (0, import_utils.cn)(
56
- "fixed inset-0 z-50 bg-[var(--axis-dialog-overlay-bg)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
56
+ "fixed inset-0 z-50 bg-[var(--axis-dialog-overlay-bg)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:!animate-none",
57
57
  className
58
58
  ),
59
59
  ...props
@@ -69,7 +69,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
69
69
  className: (0, import_utils.cn)(
70
70
  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-[shadow:var(--axis-shadow-lg)] duration-200",
71
71
  "bg-[var(--axis-dialog-content-bg)] border-[var(--axis-dialog-content-border)]",
72
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
72
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] motion-reduce:!animate-none",
73
73
  "sm:rounded-lg",
74
74
  className
75
75
  ),
package/dist/dialog/index.mjs CHANGED
@@ -11,7 +11,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
11
11
  {
12
12
  ref,
13
13
  className: cn(
14
- "fixed inset-0 z-50 bg-[var(--axis-dialog-overlay-bg)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
14
+ "fixed inset-0 z-50 bg-[var(--axis-dialog-overlay-bg)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:!animate-none",
15
15
  className
16
16
  ),
17
17
  ...props
@@ -27,7 +27,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
27
27
  className: cn(
28
28
  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-[shadow:var(--axis-shadow-lg)] duration-200",
29
29
  "bg-[var(--axis-dialog-content-bg)] border-[var(--axis-dialog-content-border)]",
30
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
30
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] motion-reduce:!animate-none",
31
31
  "sm:rounded-lg",
32
32
  className
33
33
  ),
package/dist/dropdown-menu/index.js CHANGED
@@ -96,7 +96,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
96
96
  ref,
97
97
  className: (0, import_utils.cn)(
98
98
  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-lg",
99
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
99
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:!animate-none",
100
100
  className
101
101
  ),
102
102
  ...props
@@ -110,7 +110,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
110
110
  sideOffset,
111
111
  className: (0, import_utils.cn)(
112
112
  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-md",
113
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
113
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:!animate-none",
114
114
  className
115
115
  ),
116
116
  ...props
package/dist/dropdown-menu/index.mjs CHANGED
@@ -49,7 +49,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
49
49
  ref,
50
50
  className: cn(
51
51
  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-lg",
52
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
52
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:!animate-none",
53
53
  className
54
54
  ),
55
55
  ...props
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
63
63
  sideOffset,
64
64
  className: cn(
65
65
  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-1 text-[var(--axis-text-primary)] shadow-md",
66
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
66
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:!animate-none",
67
67
  className
68
68
  ),
69
69
  ...props
package/dist/popover/index.js CHANGED
@@ -47,7 +47,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
47
47
  sideOffset,
48
48
  className: (0, import_utils.cn)(
49
49
  "z-50 w-72 rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-4 text-[var(--axis-text-primary)] shadow-md outline-none",
50
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
50
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:!animate-none",
51
51
  className
52
52
  ),
53
53
  ...props
package/dist/popover/index.mjs CHANGED
@@ -12,7 +12,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
12
12
  sideOffset,
13
13
  className: cn(
14
14
  "z-50 w-72 rounded-md border border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] p-4 text-[var(--axis-text-primary)] shadow-md outline-none",
15
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
15
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:!animate-none",
16
16
  className
17
17
  ),
18
18
  ...props
package/dist/progress/index.js CHANGED
@@ -94,7 +94,12 @@ const Progress = React.forwardRef(
94
94
  {
95
95
  className: (0, import_utils.cn)(
96
96
  progressIndicatorVariants({ variant }),
97
- indeterminate && "animate-progress-indeterminate"
97
+ // 불확정: 트랙 폭 1/3 인 표시기가 왕복한다(@axis-ds/tokens 의 progress-indeterminate keyframes).
98
+ // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄인다. 움직임 줄이기 설정에서는 멈추지 않고
99
+ // 느리게(1.5s → 4s) 왕복해 처리 중임을 계속 알린다(WI-0071).
100
+ // duration-[1500ms]: tailwindcss-animate 는 duration-300 을 animation-duration 에도 적용해 왕복이
101
+ // 0.3s 로 빨라진다(실측). keyframes 의 1.5s 와 같은 값으로 덮는다(progress.test 가 토큰 값과 대조)
102
+ indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:![animation-duration:4s]"
98
103
  ),
99
104
  style: indeterminate ? void 0 : { transform: `translateX(-${100 - percentage}%)` }
100
105
  }
package/dist/progress/index.mjs CHANGED
@@ -59,7 +59,12 @@ const Progress = React.forwardRef(
59
59
  {
60
60
  className: cn(
61
61
  progressIndicatorVariants({ variant }),
62
- indeterminate && "animate-progress-indeterminate"
62
+ // 불확정: 트랙 폭 1/3 인 표시기가 왕복한다(@axis-ds/tokens 의 progress-indeterminate keyframes).
63
+ // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄인다. 움직임 줄이기 설정에서는 멈추지 않고
64
+ // 느리게(1.5s → 4s) 왕복해 처리 중임을 계속 알린다(WI-0071).
65
+ // duration-[1500ms]: tailwindcss-animate 는 duration-300 을 animation-duration 에도 적용해 왕복이
66
+ // 0.3s 로 빨라진다(실측). keyframes 의 1.5s 와 같은 값으로 덮는다(progress.test 가 토큰 값과 대조)
67
+ indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:![animation-duration:4s]"
63
68
  ),
64
69
  style: indeterminate ? void 0 : { transform: `translateX(-${100 - percentage}%)` }
65
70
  }
package/dist/select/index.js CHANGED
@@ -91,7 +91,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
91
91
  className: (0, import_utils.cn)(
92
92
  "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
93
93
  "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
94
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
94
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:!animate-none",
95
95
  position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
96
96
  className
97
97
  ),
package/dist/select/index.mjs CHANGED
@@ -51,7 +51,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
51
51
  className: cn(
52
52
  "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
53
53
  "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
54
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
54
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:!animate-none",
55
55
  position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
56
56
  className
57
57
  ),
package/dist/sheet/index.js CHANGED
@@ -53,7 +53,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
53
53
  SheetPrimitive.Overlay,
54
54
  {
55
55
  className: (0, import_utils.cn)(
56
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
56
+ "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:!animate-none",
57
57
  className
58
58
  ),
59
59
  ...props,
@@ -62,7 +62,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
62
62
  ));
63
63
  SheetOverlay.displayName = "SheetOverlay";
64
64
  const sheetVariants = (0, import_class_variance_authority.cva)(
65
- "fixed z-50 gap-4 bg-[var(--axis-surface-default)] border-[var(--axis-border-default)] p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
65
+ "fixed z-50 gap-4 bg-[var(--axis-surface-default)] border-[var(--axis-border-default)] p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 motion-reduce:!animate-none",
66
66
  {
67
67
  variants: {
68
68
  side: {
package/dist/sheet/index.mjs CHANGED
@@ -11,7 +11,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
11
11
  SheetPrimitive.Overlay,
12
12
  {
13
13
  className: cn(
14
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
14
+ "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:!animate-none",
15
15
  className
16
16
  ),
17
17
  ...props,
@@ -20,7 +20,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
20
20
  ));
21
21
  SheetOverlay.displayName = "SheetOverlay";
22
22
  const sheetVariants = cva(
23
- "fixed z-50 gap-4 bg-[var(--axis-surface-default)] border-[var(--axis-border-default)] p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
23
+ "fixed z-50 gap-4 bg-[var(--axis-surface-default)] border-[var(--axis-border-default)] p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 motion-reduce:!animate-none",
24
24
  {
25
25
  variants: {
26
26
  side: {
package/dist/skeleton/index.d.mts CHANGED
@@ -3,7 +3,10 @@ import * as React from 'react';
3
3
  /** Skeleton 컴포넌트의 Props 인터페이스. HTML div 요소의 모든 속성을 지원한다. */
4
4
  interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
5
5
  }
6
- /** 콘텐츠 로딩 상태를 시각적으로 나타내는 스켈레톤 컴포넌트. 펄스 애니메이션이 적용된다. */
6
+ /**
7
+ * 콘텐츠 로딩 상태를 시각적으로 나타내는 스켈레톤 컴포넌트. 펄스 애니메이션이 적용된다.
8
+ * 움직임 줄이기 설정에서는 멈추지 않고 느리게(2s → 5s) 깜박여 로딩 중임을 계속 알린다(WI-0071).
9
+ */
7
10
  declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
8
11
 
9
12
  export { Skeleton, type SkeletonProps };
package/dist/skeleton/index.d.ts CHANGED
@@ -3,7 +3,10 @@ import * as React from 'react';
3
3
  /** Skeleton 컴포넌트의 Props 인터페이스. HTML div 요소의 모든 속성을 지원한다. */
4
4
  interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
5
5
  }
6
- /** 콘텐츠 로딩 상태를 시각적으로 나타내는 스켈레톤 컴포넌트. 펄스 애니메이션이 적용된다. */
6
+ /**
7
+ * 콘텐츠 로딩 상태를 시각적으로 나타내는 스켈레톤 컴포넌트. 펄스 애니메이션이 적용된다.
8
+ * 움직임 줄이기 설정에서는 멈추지 않고 느리게(2s → 5s) 깜박여 로딩 중임을 계속 알린다(WI-0071).
9
+ */
7
10
  declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
8
11
 
9
12
  export { Skeleton, type SkeletonProps };
package/dist/skeleton/index.js CHANGED
@@ -41,7 +41,7 @@ const Skeleton = React.forwardRef(
41
41
  {
42
42
  ref,
43
43
  className: (0, import_utils.cn)(
44
- "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)]",
44
+ "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)] motion-reduce:![animation-duration:5s]",
45
45
  className
46
46
  ),
47
47
  ...props
package/dist/skeleton/index.mjs CHANGED
@@ -8,7 +8,7 @@ const Skeleton = React.forwardRef(
8
8
  {
9
9
  ref,
10
10
  className: cn(
11
- "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)]",
11
+ "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)] motion-reduce:![animation-duration:5s]",
12
12
  className
13
13
  ),
14
14
  ...props
package/dist/toast/index.js CHANGED
@@ -56,7 +56,7 @@ const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__P
56
56
  ));
57
57
  ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
58
58
  const toastVariants = (0, import_class_variance_authority.cva)(
59
- "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
59
+ "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full motion-reduce:!animate-none",
60
60
  {
61
61
  variants: {
62
62
  variant: {
package/dist/toast/index.mjs CHANGED
@@ -17,7 +17,7 @@ const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__P
17
17
  ));
18
18
  ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
19
19
  const toastVariants = cva(
20
- "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
20
+ "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full motion-reduce:!animate-none",
21
21
  {
22
22
  variants: {
23
23
  variant: {
package/dist/tooltip/index.js CHANGED
@@ -48,8 +48,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }
48
48
  sideOffset,
49
49
  className: (0, import_utils.cn)(
50
50
  "z-50 overflow-hidden rounded-md bg-[var(--axis-surface-inverse)] px-3 py-1.5 text-xs text-[var(--axis-text-inverse)]",
51
- "animate-in fade-in-0 zoom-in-95",
52
- "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
51
+ "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:!animate-none",
53
52
  "data-[side=bottom]:slide-in-from-top-2",
54
53
  "data-[side=left]:slide-in-from-right-2",
55
54
  "data-[side=right]:slide-in-from-left-2",
package/dist/tooltip/index.mjs CHANGED
@@ -12,8 +12,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }
12
12
  sideOffset,
13
13
  className: cn(
14
14
  "z-50 overflow-hidden rounded-md bg-[var(--axis-surface-inverse)] px-3 py-1.5 text-xs text-[var(--axis-text-inverse)]",
15
- "animate-in fade-in-0 zoom-in-95",
16
- "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
15
+ "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:!animate-none",
17
16
  "data-[side=bottom]:slide-in-from-top-2",
18
17
  "data-[side=left]:slide-in-from-right-2",
19
18
  "data-[side=right]:slide-in-from-left-2",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axis-ds/ui-react",
3
- "version": "1.6.1",
3
+ "version": "1.6.3",
4
4
  "description": "AXIS Design System - Core React UI Components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -267,7 +267,17 @@
267
267
  },
268
268
  "peerDependencies": {
269
269
  "react": ">=18.0.0",
270
- "react-dom": ">=18.0.0"
270
+ "react-dom": ">=18.0.0",
271
+ "tailwindcss-animate": "^1.0.7",
272
+ "tw-animate-css": "^1.3.0"
273
+ },
274
+ "peerDependenciesMeta": {
275
+ "tailwindcss-animate": {
276
+ "optional": true
277
+ },
278
+ "tw-animate-css": {
279
+ "optional": true
280
+ }
271
281
  },
272
282
  "dependencies": {
273
283
  "@radix-ui/react-accordion": "^1.2.12",
@@ -292,7 +302,7 @@
292
302
  "clsx": "^2.1.0",
293
303
  "cmdk": "^1.1.1",
294
304
  "tailwind-merge": "^2.5.0",
295
- "@axis-ds/tokens": "1.6.0"
305
+ "@axis-ds/tokens": "1.6.2"
296
306
  },
297
307
  "devDependencies": {
298
308
  "@testing-library/jest-dom": "^6.9.1",