@axis-ds/ui-react 1.6.2 → 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 (8) hide show
  1. package/README.md +1 -1
  2. package/dist/progress/index.js +3 -2
  3. package/dist/progress/index.mjs +3 -2
  4. package/dist/skeleton/index.d.mts +4 -1
  5. package/dist/skeleton/index.d.ts +4 -1
  6. package/dist/skeleton/index.js +1 -1
  7. package/dist/skeleton/index.mjs +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -56,7 +56,7 @@ content: [
56
56
  | 4 | `tw-animate-css` | 전역 CSS 의 `@import "tailwindcss";` 바로 다음 줄에 `@import "tw-animate-css";` |
57
57
  | 3 | `tailwindcss-animate` | `tailwind.config` 의 `plugins: [require("tailwindcss-animate")]` |
58
58
 
59
- - 움직임 줄이기(`prefers-reduced-motion: reduce`) 설정에서는 모든 컴포넌트 애니메이션이 멈춥니다(`motion-reduce:!animate-none`).
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
60
 
61
61
  ## 사용법
62
62
 
package/dist/progress/index.js CHANGED
@@ -95,10 +95,11 @@ const Progress = React.forwardRef(
95
95
  className: (0, import_utils.cn)(
96
96
  progressIndicatorVariants({ variant }),
97
97
  // 불확정: 트랙 폭 1/3 인 표시기가 왕복한다(@axis-ds/tokens 의 progress-indeterminate keyframes).
98
- // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄이고, 움직임 줄이기 설정에서는 왼쪽에 멈춘다.
98
+ // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄인다. 움직임 줄이기 설정에서는 멈추지 않고
99
+ // 느리게(1.5s → 4s) 왕복해 처리 중임을 계속 알린다(WI-0071).
99
100
  // duration-[1500ms]: tailwindcss-animate 는 duration-300 을 animation-duration 에도 적용해 왕복이
100
101
  // 0.3s 로 빨라진다(실측). keyframes 의 1.5s 와 같은 값으로 덮는다(progress.test 가 토큰 값과 대조)
101
- indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:!animate-none"
102
+ indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:![animation-duration:4s]"
102
103
  ),
103
104
  style: indeterminate ? void 0 : { transform: `translateX(-${100 - percentage}%)` }
104
105
  }
package/dist/progress/index.mjs CHANGED
@@ -60,10 +60,11 @@ const Progress = React.forwardRef(
60
60
  className: cn(
61
61
  progressIndicatorVariants({ variant }),
62
62
  // 불확정: 트랙 폭 1/3 인 표시기가 왕복한다(@axis-ds/tokens 의 progress-indeterminate keyframes).
63
- // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄이고, 움직임 줄이기 설정에서는 왼쪽에 멈춘다.
63
+ // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄인다. 움직임 줄이기 설정에서는 멈추지 않고
64
+ // 느리게(1.5s → 4s) 왕복해 처리 중임을 계속 알린다(WI-0071).
64
65
  // duration-[1500ms]: tailwindcss-animate 는 duration-300 을 animation-duration 에도 적용해 왕복이
65
66
  // 0.3s 로 빨라진다(실측). keyframes 의 1.5s 와 같은 값으로 덮는다(progress.test 가 토큰 값과 대조)
66
- indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:!animate-none"
67
+ indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:![animation-duration:4s]"
67
68
  ),
68
69
  style: indeterminate ? void 0 : { transform: `translateX(-${100 - percentage}%)` }
69
70
  }
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)] motion-reduce:!animate-none",
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)] motion-reduce:!animate-none",
11
+ "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)] motion-reduce:![animation-duration:5s]",
12
12
  className
13
13
  ),
14
14
  ...props
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axis-ds/ui-react",
3
- "version": "1.6.2",
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",