@axis-ds/ui-react 1.6.0 → 1.6.2

package/README.md

@@ -46,6 +46,18 @@ content: [
 ],
 ```
 
+### 애니메이션
+
+- Accordion 열고 닫기 · Progress `indeterminate` 의 keyframes 는 `@axis-ds/tokens` 가 정의합니다(Tailwind 3 preset · Tailwind 4 진입점). 따로 할 일은 없습니다.
+- Dialog · Sheet · Popover · Select · DropdownMenu · Tooltip · Toast 의 열고 닫는 애니메이션(`animate-in` · `fade-in-0` 류)은 애니메이션 플러그인이 필요합니다. 선택적 peer 의존으로 선언되어 있어 설치 경고는 나오지 않습니다. 없으면 애니메이션 없이 바로 열리고 닫힙니다.
+
+| Tailwind | 플러그인 | 넣는 곳 |
+|---|---|---|
+| 4 | `tw-animate-css` | 전역 CSS 의 `@import "tailwindcss";` 바로 다음 줄에 `@import "tw-animate-css";` |
+| 3 | `tailwindcss-animate` | `tailwind.config` 의 `plugins: [require("tailwindcss-animate")]` |
+
+- 움직임 줄이기(`prefers-reduced-motion: reduce`) 설정에서는 모든 컴포넌트 애니메이션이 멈춥니다(`motion-reduce:!animate-none`).
+
 ## 사용법
 
 ```tsx

package/dist/accordion/index.js

@@ -86,7 +86,7 @@ const AccordionContent = React.forwardRef(({ className, children, ...props }, re
   AccordionPrimitive.Content,
   {
     ref,
-    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:!animate-none",
     ...props,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("pb-4 pt-0", className), children })
   }

package/dist/accordion/index.mjs

@@ -50,7 +50,7 @@ const AccordionContent = React.forwardRef(({ className, children, ...props }, re
   AccordionPrimitive.Content,
   {
     ref,
-    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:!animate-none",
     ...props,
     children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
   }

package/dist/avatar/avatar.d.mts

@@ -17,6 +17,16 @@ interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps
 /**
  * 사용자 프로필 이미지를 표시하는 아바타 컴포넌트
  * 이미지 로드 실패 시 이니셜 fallback을 표시한다.
+ *
+ * 실패 판정은 두 경로다(WI-0054).
+ * 1. `<img onError>`: 하이드레이션 뒤(또는 클라이언트 렌더)에 난 오류.
+ * 2. 마운트 시 검사: 서버 렌더된 이미지의 오류가 하이드레이션 전에 끝나면 onError 가 붙기 전이라
+ *    이벤트를 놓친다. 그래서 마운트(와 src 변경) 때 `complete && naturalWidth === 0` 이면 실패 후보로 보고,
+ *    `img.decode()` 가 거부될 때만 실패로 확정한다. 고유 크기가 없는 SVG 처럼 정상 로드인데
+ *    naturalWidth 가 0 일 수 있는 이미지는 decode 가 이행되므로 실패로 보지 않는다.
+ *    decode 가 없는 환경에서는 판정하지 않는다(종전 동작).
+ *
+ * 실패 상태는 실패한 src 와 함께 기억한다. src 가 바뀌면 렌더 중에 초기화해 새 이미지를 다시 시도한다.
  */
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/avatar/avatar.d.ts

@@ -17,6 +17,16 @@ interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps
 /**
  * 사용자 프로필 이미지를 표시하는 아바타 컴포넌트
  * 이미지 로드 실패 시 이니셜 fallback을 표시한다.
+ *
+ * 실패 판정은 두 경로다(WI-0054).
+ * 1. `<img onError>`: 하이드레이션 뒤(또는 클라이언트 렌더)에 난 오류.
+ * 2. 마운트 시 검사: 서버 렌더된 이미지의 오류가 하이드레이션 전에 끝나면 onError 가 붙기 전이라
+ *    이벤트를 놓친다. 그래서 마운트(와 src 변경) 때 `complete && naturalWidth === 0` 이면 실패 후보로 보고,
+ *    `img.decode()` 가 거부될 때만 실패로 확정한다. 고유 크기가 없는 SVG 처럼 정상 로드인데
+ *    naturalWidth 가 0 일 수 있는 이미지는 decode 가 이행되므로 실패로 보지 않는다.
+ *    decode 가 없는 환경에서는 판정하지 않는다(종전 동작).
+ *
+ * 실패 상태는 실패한 src 와 함께 기억한다. src 가 바뀌면 렌더 중에 초기화해 새 이미지를 다시 시도한다.
  */
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/avatar/avatar.js

@@ -38,7 +38,28 @@ var import_utils = require("../utils.js");
 var import_variants = require("./variants.js");
 const Avatar = React.forwardRef(
   ({ className, size, src, alt, fallback, ...props }, ref) => {
-    const [hasError, setHasError] = React.useState(false);
+    const [failedSrc, setFailedSrc] = React.useState(null);
+    if (failedSrc !== null && failedSrc !== src) {
+      setFailedSrc(null);
+    }
+    const hasError = failedSrc !== null && failedSrc === src;
+    const imgRef = React.useRef(null);
+    React.useEffect(() => {
+      const img = imgRef.current;
+      if (!img || !src) return;
+      if (!img.complete || img.naturalWidth !== 0) return;
+      if (typeof img.decode !== "function") return;
+      let cancelled = false;
+      img.decode().then(
+        () => void 0,
+        () => {
+          if (!cancelled) setFailedSrc(src);
+        }
+      );
+      return () => {
+        cancelled = true;
+      };
+    }, [src]);
     const initials = React.useMemo(() => {
       if (fallback) return fallback;
       if (!alt) return "?";
@@ -53,10 +74,11 @@ const Avatar = React.forwardRef(
         children: src && !hasError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "img",
           {
+            ref: imgRef,
             src,
             alt: alt || "Avatar",
             className: "aspect-square h-full w-full object-cover",
-            onError: () => setHasError(true)
+            onError: () => setFailedSrc(src)
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex h-full w-full items-center justify-center bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)] font-medium", children: initials })
       }

package/dist/avatar/avatar.mjs

@@ -5,7 +5,28 @@ import { cn } from "../utils.mjs";
 import { avatarVariants } from "./variants.mjs";
 const Avatar = React.forwardRef(
   ({ className, size, src, alt, fallback, ...props }, ref) => {
-    const [hasError, setHasError] = React.useState(false);
+    const [failedSrc, setFailedSrc] = React.useState(null);
+    if (failedSrc !== null && failedSrc !== src) {
+      setFailedSrc(null);
+    }
+    const hasError = failedSrc !== null && failedSrc === src;
+    const imgRef = React.useRef(null);
+    React.useEffect(() => {
+      const img = imgRef.current;
+      if (!img || !src) return;
+      if (!img.complete || img.naturalWidth !== 0) return;
+      if (typeof img.decode !== "function") return;
+      let cancelled = false;
+      img.decode().then(
+        () => void 0,
+        () => {
+          if (!cancelled) setFailedSrc(src);
+        }
+      );
+      return () => {
+        cancelled = true;
+      };
+    }, [src]);
     const initials = React.useMemo(() => {
       if (fallback) return fallback;
       if (!alt) return "?";
@@ -20,10 +41,11 @@ const Avatar = React.forwardRef(
         children: src && !hasError ? /* @__PURE__ */ jsx(
           "img",
           {
+            ref: imgRef,
             src,
             alt: alt || "Avatar",
             className: "aspect-square h-full w-full object-cover",
-            onError: () => setHasError(true)
+            onError: () => setFailedSrc(src)
           }
         ) : /* @__PURE__ */ jsx("span", { className: "flex h-full w-full items-center justify-center bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)] font-medium", children: initials })
       }

package/dist/dialog/index.js

@@ -53,7 +53,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     className: (0, import_utils.cn)(
-      "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",
+      "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",
       className
     ),
     ...props
@@ -69,7 +69,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
       className: (0, import_utils.cn)(
         "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",
         "bg-[var(--axis-dialog-content-bg)] border-[var(--axis-dialog-content-border)]",
-        "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%]",
+        "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",
         "sm:rounded-lg",
         className
       ),

package/dist/dialog/index.mjs

@@ -11,7 +11,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     className: cn(
-      "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",
+      "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",
       className
     ),
     ...props
@@ -27,7 +27,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
       className: cn(
         "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",
         "bg-[var(--axis-dialog-content-bg)] border-[var(--axis-dialog-content-border)]",
-        "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%]",
+        "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",
         "sm:rounded-lg",
         className
       ),

package/dist/dropdown-menu/index.js

@@ -96,7 +96,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
     ref,
     className: (0, import_utils.cn)(
       "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",
-      "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",
+      "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",
       className
     ),
     ...props
@@ -110,7 +110,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
     sideOffset,
     className: (0, import_utils.cn)(
       "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",
-      "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",
+      "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",
       className
     ),
     ...props

package/dist/dropdown-menu/index.mjs

@@ -49,7 +49,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
     ref,
     className: cn(
       "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",
-      "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",
+      "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",
       className
     ),
     ...props
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
     sideOffset,
     className: cn(
       "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",
-      "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",
+      "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",
       className
     ),
     ...props

package/dist/popover/index.js

@@ -47,7 +47,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     sideOffset,
     className: (0, import_utils.cn)(
       "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",
-      "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",
+      "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",
       className
     ),
     ...props

package/dist/popover/index.mjs

@@ -12,7 +12,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     sideOffset,
     className: cn(
       "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",
-      "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",
+      "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",
       className
     ),
     ...props

package/dist/progress/index.js

@@ -94,7 +94,11 @@ const Progress = React.forwardRef(
           {
             className: (0, import_utils.cn)(
               progressIndicatorVariants({ variant }),
-              indeterminate && "animate-progress-indeterminate"
+              // 불확정: 트랙 폭 1/3 인 표시기가 왕복한다(@axis-ds/tokens 의 progress-indeterminate keyframes).
+              // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄이고, 움직임 줄이기 설정에서는 왼쪽에 멈춘다.
+              // duration-[1500ms]: tailwindcss-animate 는 duration-300 을 animation-duration 에도 적용해 왕복이
+              // 0.3s 로 빨라진다(실측). keyframes 의 1.5s 와 같은 값으로 덮는다(progress.test 가 토큰 값과 대조)
+              indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:!animate-none"
             ),
             style: indeterminate ? void 0 : { transform: `translateX(-${100 - percentage}%)` }
           }

package/dist/progress/index.mjs

@@ -59,7 +59,11 @@ const Progress = React.forwardRef(
           {
             className: cn(
               progressIndicatorVariants({ variant }),
-              indeterminate && "animate-progress-indeterminate"
+              // 불확정: 트랙 폭 1/3 인 표시기가 왕복한다(@axis-ds/tokens 의 progress-indeterminate keyframes).
+              // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄이고, 움직임 줄이기 설정에서는 왼쪽에 멈춘다.
+              // duration-[1500ms]: tailwindcss-animate 는 duration-300 을 animation-duration 에도 적용해 왕복이
+              // 0.3s 로 빨라진다(실측). keyframes 의 1.5s 와 같은 값으로 덮는다(progress.test 가 토큰 값과 대조)
+              indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:!animate-none"
             ),
             style: indeterminate ? void 0 : { transform: `translateX(-${100 - percentage}%)` }
           }

package/dist/select/index.js

@@ -91,7 +91,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     className: (0, import_utils.cn)(
       "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
       "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
-      "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=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",
       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",
       className
     ),

package/dist/select/index.mjs

@@ -51,7 +51,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     className: cn(
       "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
       "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
-      "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=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",
       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",
       className
     ),

package/dist/sheet/index.js

@@ -53,7 +53,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   SheetPrimitive.Overlay,
   {
     className: (0, import_utils.cn)(
-      "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",
+      "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",
       className
     ),
     ...props,
@@ -62,7 +62,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = "SheetOverlay";
 const sheetVariants = (0, import_class_variance_authority.cva)(
-  "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",
+  "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",
   {
     variants: {
       side: {

package/dist/sheet/index.mjs

@@ -11,7 +11,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   SheetPrimitive.Overlay,
   {
     className: cn(
-      "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",
+      "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",
       className
     ),
     ...props,
@@ -20,7 +20,7 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = "SheetOverlay";
 const sheetVariants = cva(
-  "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",
+  "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",
   {
     variants: {
       side: {

package/dist/skeleton/index.js

@@ -41,7 +41,7 @@ const Skeleton = React.forwardRef(
       {
         ref,
         className: (0, import_utils.cn)(
-          "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)]",
+          "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)] motion-reduce:!animate-none",
           className
         ),
         ...props

package/dist/skeleton/index.mjs

@@ -8,7 +8,7 @@ const Skeleton = React.forwardRef(
       {
         ref,
         className: cn(
-          "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)]",
+          "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)] motion-reduce:!animate-none",
           className
         ),
         ...props

package/dist/toast/index.js

@@ -56,7 +56,7 @@ const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 const toastVariants = (0, import_class_variance_authority.cva)(
-  "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",
+  "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",
   {
     variants: {
       variant: {

package/dist/toast/index.mjs

@@ -17,7 +17,7 @@ const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 const toastVariants = cva(
-  "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",
+  "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",
   {
     variants: {
       variant: {

package/dist/tooltip/index.js

@@ -48,8 +48,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }
     sideOffset,
     className: (0, import_utils.cn)(
       "z-50 overflow-hidden rounded-md bg-[var(--axis-surface-inverse)] px-3 py-1.5 text-xs text-[var(--axis-text-inverse)]",
-      "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",
+      "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",
       "data-[side=bottom]:slide-in-from-top-2",
       "data-[side=left]:slide-in-from-right-2",
       "data-[side=right]:slide-in-from-left-2",

package/dist/tooltip/index.mjs

@@ -12,8 +12,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }
     sideOffset,
     className: cn(
       "z-50 overflow-hidden rounded-md bg-[var(--axis-surface-inverse)] px-3 py-1.5 text-xs text-[var(--axis-text-inverse)]",
-      "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",
+      "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",
       "data-[side=bottom]:slide-in-from-top-2",
       "data-[side=left]:slide-in-from-right-2",
       "data-[side=right]:slide-in-from-left-2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axis-ds/ui-react",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "AXIS Design System - Core React UI Components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -267,7 +267,17 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.3.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss-animate": {
+      "optional": true
+    },
+    "tw-animate-css": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -292,7 +302,7 @@
     "clsx": "^2.1.0",
     "cmdk": "^1.1.1",
     "tailwind-merge": "^2.5.0",
-    "@axis-ds/tokens": "1.6.0"
+    "@axis-ds/tokens": "1.6.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",