@axis-ds/ui-react 1.6.2 → 1.7.0

package/README.md

@@ -56,7 +56,7 @@ content: [
 | 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`).
+- 움직임 줄이기(`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).
 
 ## 사용법
 

package/dist/button/index.js

@@ -38,7 +38,7 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = require("../utils.js");
 const buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--axis-radius-control,0.375rem)] text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -50,10 +50,10 @@ const buttonVariants = (0, import_class_variance_authority.cva)(
         link: "text-[var(--axis-text-brand)] underline-offset-4 hover:underline"
       },
       size: {
-        sm: "h-8 px-3 text-xs",
-        default: "h-10 px-4 py-2",
-        lg: "h-12 px-6 text-base",
-        icon: "h-10 w-10"
+        sm: "h-[var(--axis-control-h-sm,2rem)] px-3 text-[length:var(--axis-control-font-size-sm,0.75rem)] leading-4",
+        default: "h-[var(--axis-control-h-md,2.5rem)] px-4 py-2",
+        lg: "h-[var(--axis-control-h-lg,3rem)] px-6 text-[length:var(--axis-control-font-size-lg,1rem)] leading-6",
+        icon: "h-[var(--axis-control-h-md,2.5rem)] w-[var(--axis-control-h-md,2.5rem)]"
       }
     },
     defaultVariants: {

package/dist/button/index.mjs

@@ -4,7 +4,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils.mjs";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--axis-radius-control,0.375rem)] text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -16,10 +16,10 @@ const buttonVariants = cva(
         link: "text-[var(--axis-text-brand)] underline-offset-4 hover:underline"
       },
       size: {
-        sm: "h-8 px-3 text-xs",
-        default: "h-10 px-4 py-2",
-        lg: "h-12 px-6 text-base",
-        icon: "h-10 w-10"
+        sm: "h-[var(--axis-control-h-sm,2rem)] px-3 text-[length:var(--axis-control-font-size-sm,0.75rem)] leading-4",
+        default: "h-[var(--axis-control-h-md,2.5rem)] px-4 py-2",
+        lg: "h-[var(--axis-control-h-lg,3rem)] px-6 text-[length:var(--axis-control-font-size-lg,1rem)] leading-6",
+        icon: "h-[var(--axis-control-h-md,2.5rem)] w-[var(--axis-control-h-md,2.5rem)]"
       }
     },
     defaultVariants: {

package/dist/card/index.js

@@ -45,7 +45,7 @@ const Card = React.forwardRef(
     {
       ref,
       className: (0, import_utils.cn)(
-        "rounded-lg border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
+        "rounded-[var(--axis-radius-surface,0.5rem)] border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
         className
       ),
       ...props

package/dist/card/index.mjs

@@ -7,7 +7,7 @@ const Card = React.forwardRef(
     {
       ref,
       className: cn(
-        "rounded-lg border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
+        "rounded-[var(--axis-radius-surface,0.5rem)] border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
         className
       ),
       ...props

package/dist/dialog/index.js

@@ -70,7 +70,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
         "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%] motion-reduce:!animate-none",
-        "sm:rounded-lg",
+        "sm:rounded-[var(--axis-radius-surface,0.5rem)]",
         className
       ),
       ...props,

package/dist/dialog/index.mjs

@@ -28,7 +28,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
         "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%] motion-reduce:!animate-none",
-        "sm:rounded-lg",
+        "sm:rounded-[var(--axis-radius-surface,0.5rem)]",
         className
       ),
       ...props,

package/dist/input/index.js

@@ -41,7 +41,7 @@ const Input = React.forwardRef(
       {
         type,
         className: (0, import_utils.cn)(
-          "flex h-10 w-full rounded-md border px-3 py-2 text-sm transition-colors",
+          "flex h-[var(--axis-field-h,2.5rem)] w-full rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 transition-colors",
           "bg-[var(--axis-input-bg-default)] text-[var(--axis-input-text-default)]",
           "border-[var(--axis-input-border-default)]",
           "placeholder:text-[var(--axis-input-text-placeholder)]",

package/dist/input/index.mjs

@@ -8,7 +8,7 @@ const Input = React.forwardRef(
       {
         type,
         className: cn(
-          "flex h-10 w-full rounded-md border px-3 py-2 text-sm transition-colors",
+          "flex h-[var(--axis-field-h,2.5rem)] w-full rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 transition-colors",
           "bg-[var(--axis-input-bg-default)] text-[var(--axis-input-text-default)]",
           "border-[var(--axis-input-border-default)]",
           "placeholder:text-[var(--axis-input-text-placeholder)]",

package/dist/progress/index.js

@@ -95,10 +95,11 @@ const Progress = React.forwardRef(
             className: (0, import_utils.cn)(
               progressIndicatorVariants({ variant }),
               // 불확정: 트랙 폭 1/3 인 표시기가 왕복한다(@axis-ds/tokens 의 progress-indeterminate keyframes).
-              // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄이고, 움직임 줄이기 설정에서는 왼쪽에 멈춘다.
+              // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄인다. 움직임 줄이기 설정에서는 멈추지 않고
+              // 느리게(1.5s → 4s) 왕복해 처리 중임을 계속 알린다(WI-0071).
               // 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"
+              indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:![animation-duration:4s]"
             ),
             style: indeterminate ? void 0 : { transform: `translateX(-${100 - percentage}%)` }
           }

package/dist/progress/index.mjs

@@ -60,10 +60,11 @@ const Progress = React.forwardRef(
             className: cn(
               progressIndicatorVariants({ variant }),
               // 불확정: 트랙 폭 1/3 인 표시기가 왕복한다(@axis-ds/tokens 의 progress-indeterminate keyframes).
-              // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄이고, 움직임 줄이기 설정에서는 왼쪽에 멈춘다.
+              // 꽉 찬 막대(100% 완료)로 보이지 않도록 폭을 줄인다. 움직임 줄이기 설정에서는 멈추지 않고
+              // 느리게(1.5s → 4s) 왕복해 처리 중임을 계속 알린다(WI-0071).
               // 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"
+              indeterminate && "w-1/3 duration-[1500ms] animate-progress-indeterminate motion-reduce:![animation-duration:4s]"
             ),
             style: indeterminate ? void 0 : { transform: `translateX(-${100 - percentage}%)` }
           }

package/dist/select/index.js

@@ -50,7 +50,7 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: (0, import_utils.cn)(
-      "flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm",
+      "flex h-[var(--axis-field-h,2.5rem)] w-full items-center justify-between rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-sm",
       "bg-[var(--axis-input-bg-default)] border-[var(--axis-input-border-default)]",
       "placeholder:text-[var(--axis-input-text-placeholder)]",
       "hover:border-[var(--axis-input-border-hover)]",

package/dist/select/index.mjs

@@ -10,7 +10,7 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm",
+      "flex h-[var(--axis-field-h,2.5rem)] w-full items-center justify-between rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-sm",
       "bg-[var(--axis-input-bg-default)] border-[var(--axis-input-border-default)]",
       "placeholder:text-[var(--axis-input-text-placeholder)]",
       "hover:border-[var(--axis-input-border-hover)]",

package/dist/skeleton/index.d.mts

@@ -3,7 +3,10 @@ import * as React from 'react';
 /** Skeleton 컴포넌트의 Props 인터페이스. HTML div 요소의 모든 속성을 지원한다. */
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-/** 콘텐츠 로딩 상태를 시각적으로 나타내는 스켈레톤 컴포넌트. 펄스 애니메이션이 적용된다. */
+/**
+ * 콘텐츠 로딩 상태를 시각적으로 나타내는 스켈레톤 컴포넌트. 펄스 애니메이션이 적용된다.
+ * 움직임 줄이기 설정에서는 멈추지 않고 느리게(2s → 5s) 깜박여 로딩 중임을 계속 알린다(WI-0071).
+ */
 declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
 
 export { Skeleton, type SkeletonProps };

package/dist/skeleton/index.d.ts

@@ -3,7 +3,10 @@ import * as React from 'react';
 /** Skeleton 컴포넌트의 Props 인터페이스. HTML div 요소의 모든 속성을 지원한다. */
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-/** 콘텐츠 로딩 상태를 시각적으로 나타내는 스켈레톤 컴포넌트. 펄스 애니메이션이 적용된다. */
+/**
+ * 콘텐츠 로딩 상태를 시각적으로 나타내는 스켈레톤 컴포넌트. 펄스 애니메이션이 적용된다.
+ * 움직임 줄이기 설정에서는 멈추지 않고 느리게(2s → 5s) 깜박여 로딩 중임을 계속 알린다(WI-0071).
+ */
 declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
 
 export { Skeleton, type SkeletonProps };

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)] motion-reduce:!animate-none",
+          "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)] motion-reduce:![animation-duration:5s]",
           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)] motion-reduce:!animate-none",
+          "animate-pulse rounded-md bg-[var(--axis-surface-tertiary)] motion-reduce:![animation-duration:5s]",
           className
         ),
         ...props

package/dist/table/index.js

@@ -46,7 +46,7 @@ const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: (0, import_utils.cn)(
-      "w-full caption-bottom text-sm text-[var(--axis-text-primary)]",
+      "w-full caption-bottom text-[length:var(--axis-table-font-size,0.875rem)] leading-5 text-[var(--axis-text-primary)]",
       className
     ),
     ...props
@@ -102,7 +102,7 @@ const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: (0, import_utils.cn)(
-      "h-12 px-4 text-left align-middle font-medium text-[var(--axis-text-secondary)]",
+      "h-12 px-4 text-left align-middle text-[length:var(--axis-table-head-font-size,0.875rem)] font-medium text-[var(--axis-text-secondary)]",
       "[&:has([role=checkbox])]:pr-0",
       className
     ),

package/dist/table/index.mjs

@@ -6,7 +6,7 @@ const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   {
     ref,
     className: cn(
-      "w-full caption-bottom text-sm text-[var(--axis-text-primary)]",
+      "w-full caption-bottom text-[length:var(--axis-table-font-size,0.875rem)] leading-5 text-[var(--axis-text-primary)]",
       className
     ),
     ...props
@@ -62,7 +62,7 @@ const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "h-12 px-4 text-left align-middle font-medium text-[var(--axis-text-secondary)]",
+      "h-12 px-4 text-left align-middle text-[length:var(--axis-table-head-font-size,0.875rem)] font-medium text-[var(--axis-text-secondary)]",
       "[&:has([role=checkbox])]:pr-0",
       className
     ),

package/dist/toggle/index.js

@@ -38,7 +38,7 @@ var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"));
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = require("../utils.js");
 const toggleVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-[var(--axis-radius-control,0.375rem)] text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -46,9 +46,9 @@ const toggleVariants = (0, import_class_variance_authority.cva)(
         outline: "border border-[var(--axis-border-default)] bg-transparent hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-primary)]"
       },
       size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11"
+        default: "h-[var(--axis-toggle-h-md,2.5rem)] px-3 min-w-[var(--axis-toggle-h-md,2.5rem)]",
+        sm: "h-[var(--axis-toggle-h-sm,2.25rem)] px-2.5 min-w-[var(--axis-toggle-h-sm,2.25rem)]",
+        lg: "h-[var(--axis-toggle-h-lg,2.75rem)] px-5 min-w-[var(--axis-toggle-h-lg,2.75rem)]"
       }
     },
     defaultVariants: {

package/dist/toggle/index.mjs

@@ -4,7 +4,7 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils.mjs";
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-[var(--axis-radius-control,0.375rem)] text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -12,9 +12,9 @@ const toggleVariants = cva(
         outline: "border border-[var(--axis-border-default)] bg-transparent hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-primary)]"
       },
       size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11"
+        default: "h-[var(--axis-toggle-h-md,2.5rem)] px-3 min-w-[var(--axis-toggle-h-md,2.5rem)]",
+        sm: "h-[var(--axis-toggle-h-sm,2.25rem)] px-2.5 min-w-[var(--axis-toggle-h-sm,2.25rem)]",
+        lg: "h-[var(--axis-toggle-h-lg,2.75rem)] px-5 min-w-[var(--axis-toggle-h-lg,2.75rem)]"
       }
     },
     defaultVariants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axis-ds/ui-react",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "AXIS Design System - Core React UI Components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -302,7 +302,7 @@
     "clsx": "^2.1.0",
     "cmdk": "^1.1.1",
     "tailwind-merge": "^2.5.0",
-    "@axis-ds/tokens": "1.6.2"
+    "@axis-ds/tokens": "1.7.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",