@axis-ds/ui-react 1.8.0 → 1.8.2

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 (6) hide show
  1. package/README.md +8 -1
  2. package/dist/command/index.d.mts +7 -7
  3. package/dist/command/index.d.ts +7 -7
  4. package/dist/select/index.js +3 -1
  5. package/dist/select/index.mjs +3 -1
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -30,13 +30,20 @@ Tailwind CSS 4(`@import "tailwindcss"`, create-next-app 15.5 기본)에서는 `@
30
30
 
31
31
  ### Tailwind CSS 3
32
32
 
33
- CSS Variables 설정:
33
+ CSS Variables 설정(두 줄 모두, 이 순서로 `@tailwind` 지시문보다 앞에):
34
34
 
35
35
  ```css
36
36
  /* globals.css */
37
+ @import '@axis-ds/tokens/css';
37
38
  @import '@axis-ds/tokens/css/shadcn';
39
+
40
+ @tailwind base;
41
+ @tailwind components;
42
+ @tailwind utilities;
38
43
  ```
39
44
 
45
+ - `@axis-ds/tokens/css` 는 컴포넌트가 읽는 `--axis-*` 변수를 정의합니다. 빠지면 Input · Checkbox 경계가 글자색이 되고 Progress 채움이 투명해집니다. `@axis-ds/tokens/css/shadcn` 은 preset 이 읽는 `--primary` · `--radius` 등을 정의합니다.
46
+
40
47
  `tailwind.config` 에는 `@axis-ds/tokens/tailwind` preset 과 함께 컴포넌트 파일을 `content` 에 넣습니다.
41
48
 
42
49
  ```js
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
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
13
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
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
- }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
29
+ }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
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
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
40
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
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
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
50
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & 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
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
58
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
59
59
  heading?: React.ReactNode;
60
60
  value?: string;
61
61
  forceMount?: boolean;
@@ -71,7 +71,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
71
71
  ref?: React.Ref<HTMLDivElement>;
72
72
  } & {
73
73
  asChild?: boolean;
74
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
74
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
75
75
  alwaysRender?: boolean;
76
76
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
77
77
  /** 명령어 팔레트의 개별 선택 가능한 항목 */
@@ -81,7 +81,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
81
81
  ref?: React.Ref<HTMLDivElement>;
82
82
  } & {
83
83
  asChild?: boolean;
84
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
84
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
85
85
  disabled?: boolean;
86
86
  onSelect?: (value: string) => void;
87
87
  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
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
13
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
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
- }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
29
+ }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
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
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
40
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
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
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
50
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & 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
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
58
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
59
59
  heading?: React.ReactNode;
60
60
  value?: string;
61
61
  forceMount?: boolean;
@@ -71,7 +71,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
71
71
  ref?: React.Ref<HTMLDivElement>;
72
72
  } & {
73
73
  asChild?: boolean;
74
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
74
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
75
75
  alwaysRender?: boolean;
76
76
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
77
77
  /** 명령어 팔레트의 개별 선택 가능한 항목 */
@@ -81,7 +81,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
81
81
  ref?: React.Ref<HTMLDivElement>;
82
82
  } & {
83
83
  asChild?: boolean;
84
- }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
84
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
85
85
  disabled?: boolean;
86
86
  onSelect?: (value: string) => void;
87
87
  value?: string;
package/dist/select/index.js CHANGED
@@ -52,7 +52,9 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
52
52
  className: (0, import_utils.cn)(
53
53
  "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",
54
54
  "bg-[var(--axis-input-bg-default)] border-[var(--axis-input-border-default)]",
55
- "placeholder:text-[var(--axis-input-text-placeholder)]",
55
+ // placeholder 글자는 SelectValue 의 span 이라 ::placeholder 가 닿지 않는다. 값이 없을 때 Radix 가 붙이는 data-placeholder 로 칠한다(WI-0082)
56
+ // Trigger 가 아니라 그 안의 span 에만 준다. Trigger 에 주면 화살표(currentColor, 50%)도 따라가 대비가 3:1 아래로 떨어진다
57
+ "[&[data-placeholder]>span]:text-[var(--axis-input-text-placeholder)]",
56
58
  "hover:border-[var(--axis-input-border-hover)]",
57
59
  "focus:outline-none focus:ring-2 focus:ring-[var(--axis-input-border-focus)] focus:ring-offset-2",
58
60
  "disabled:cursor-not-allowed disabled:opacity-50",
package/dist/select/index.mjs CHANGED
@@ -12,7 +12,9 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
12
12
  className: cn(
13
13
  "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",
14
14
  "bg-[var(--axis-input-bg-default)] border-[var(--axis-input-border-default)]",
15
- "placeholder:text-[var(--axis-input-text-placeholder)]",
15
+ // placeholder 글자는 SelectValue 의 span 이라 ::placeholder 가 닿지 않는다. 값이 없을 때 Radix 가 붙이는 data-placeholder 로 칠한다(WI-0082)
16
+ // Trigger 가 아니라 그 안의 span 에만 준다. Trigger 에 주면 화살표(currentColor, 50%)도 따라가 대비가 3:1 아래로 떨어진다
17
+ "[&[data-placeholder]>span]:text-[var(--axis-input-text-placeholder)]",
16
18
  "hover:border-[var(--axis-input-border-hover)]",
17
19
  "focus:outline-none focus:ring-2 focus:ring-[var(--axis-input-border-focus)] focus:ring-offset-2",
18
20
  "disabled:cursor-not-allowed disabled:opacity-50",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axis-ds/ui-react",
3
- "version": "1.8.0",
3
+ "version": "1.8.2",
4
4
  "description": "AXIS Design System - Core React UI Components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -302,7 +302,7 @@
302
302
  "clsx": "^2.1.0",
303
303
  "cmdk": "^1.1.1",
304
304
  "tailwind-merge": "^2.5.0",
305
- "@axis-ds/tokens": "1.8.0"
305
+ "@axis-ds/tokens": "1.8.2"
306
306
  },
307
307
  "devDependencies": {
308
308
  "@testing-library/jest-dom": "^6.9.1",