@axis-ds/mcp 1.3.3 → 1.3.5
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.
- package/dist/index.js +366 -98
- package/dist/registry/agentic-agent-avatar.json +1 -1
- package/dist/registry/agentic-approval-card.json +1 -1
- package/dist/registry/agentic-attachment-card.json +1 -1
- package/dist/registry/agentic-code-block.json +1 -1
- package/dist/registry/agentic-context-panel.json +1 -1
- package/dist/registry/agentic-diff-viewer.json +1 -1
- package/dist/registry/agentic-feedback-buttons.json +1 -1
- package/dist/registry/agentic-message-bubble.json +1 -1
- package/dist/registry/agentic-plan-card.json +1 -1
- package/dist/registry/agentic-recovery-banner.json +1 -1
- package/dist/registry/agentic-run-progress.json +1 -1
- package/dist/registry/agentic-step-timeline.json +1 -1
- package/dist/registry/agentic-streaming-text.json +1 -1
- package/dist/registry/agentic-thinking-indicator.json +1 -1
- package/dist/registry/agentic-token-usage-indicator.json +1 -1
- package/dist/registry/agentic-tool-call-card.json +1 -1
- package/dist/registry/button.json +1 -1
- package/dist/registry/card.json +1 -1
- package/dist/registry/dialog.json +1 -1
- package/dist/registry/index.json +23 -23
- package/dist/registry/input.json +1 -1
- package/dist/registry/registry.json +23 -23
- package/dist/registry/select.json +1 -1
- package/dist/registry/toast.json +1 -1
- package/package.json +1 -1
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
{
|
|
16
16
|
"path": "components/ui/button.tsx",
|
|
17
17
|
"type": "registry:ui",
|
|
18
|
-
"content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-
|
|
18
|
+
"content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\nconst buttonVariants = cva(\n \"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\",\n {\n variants: {\n variant: {\n default:\n \"bg-[var(--axis-button-bg-default)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-button-bg-hover)] active:bg-[var(--axis-button-bg-active)] focus-visible:ring-[var(--axis-button-border-focus)]\",\n secondary:\n \"bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-button-secondary-text-default)] hover:bg-[var(--axis-button-secondary-bg-hover)] active:bg-[var(--axis-button-secondary-bg-active)]\",\n ghost:\n \"bg-[var(--axis-button-ghost-bg-default)] text-[var(--axis-button-ghost-text-default)] hover:bg-[var(--axis-button-ghost-bg-hover)] active:bg-[var(--axis-button-ghost-bg-active)]\",\n destructive:\n \"bg-[var(--axis-button-destructive-bg-default)] text-[var(--axis-button-destructive-text-default)] hover:bg-[var(--axis-button-destructive-bg-hover)] active:bg-[var(--axis-button-destructive-bg-active)]\",\n outline:\n \"border border-[var(--axis-border-default)] bg-transparent hover:bg-[var(--axis-surface-secondary)] text-[var(--axis-text-primary)]\",\n link: \"text-[var(--axis-text-brand)] underline-offset-4 hover:underline\",\n },\n size: {\n sm: \"h-[var(--axis-control-h-sm,2rem)] px-3 text-[length:var(--axis-control-font-size-sm,0.75rem)] leading-4\",\n default: \"h-[var(--axis-control-h-md,2.5rem)] px-4 py-2\",\n lg: \"h-[var(--axis-control-h-lg,3rem)] px-6 text-[length:var(--axis-control-font-size-lg,1rem)] leading-6\",\n icon: \"h-[var(--axis-control-h-md,2.5rem)] w-[var(--axis-control-h-md,2.5rem)]\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n/**\n * Button 컴포넌트 Props\n * @property variant - 버튼 스타일 변형 (default, secondary, ghost, destructive, outline, link)\n * @property size - 버튼 크기 (sm, default, lg, icon)\n */\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** Slot 패턴을 사용하여 자식 요소를 버튼으로 렌더링 */\n asChild?: boolean;\n}\n\n/** 다양한 스타일 변형과 크기를 지원하는 버튼 컴포넌트 */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"
|
|
19
19
|
}
|
|
20
20
|
]
|
|
21
21
|
}
|
package/dist/registry/card.json
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
{
|
|
13
13
|
"path": "components/ui/card.tsx",
|
|
14
14
|
"type": "registry:ui",
|
|
15
|
-
"content": "import * as React from \"react\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\n/** Card 컴포넌트 Props */\nexport type CardProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** 관련 콘텐츠를 그룹화하여 표시하는 카드 컨테이너 컴포넌트 */\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"rounded-
|
|
15
|
+
"content": "import * as React from \"react\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\n/** Card 컴포넌트 Props */\nexport type CardProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** 관련 콘텐츠를 그룹화하여 표시하는 카드 컨테이너 컴포넌트 */\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"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)]\",\n className\n )}\n {...props}\n />\n )\n);\nCard.displayName = \"Card\";\n\n/** 카드의 헤더 영역 (제목, 설명 등을 포함) */\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n {...props}\n />\n));\nCardHeader.displayName = \"CardHeader\";\n\n/** 카드의 제목을 표시하는 컴포넌트 */\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\n \"text-2xl font-semibold leading-none tracking-tight text-[var(--axis-text-primary)]\",\n className\n )}\n {...props}\n />\n));\nCardTitle.displayName = \"CardTitle\";\n\n/** 카드의 부가 설명을 표시하는 컴포넌트 */\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"text-sm text-[var(--axis-text-secondary)]\", className)}\n {...props}\n />\n));\nCardDescription.displayName = \"CardDescription\";\n\n/** 카드의 본문 콘텐츠 영역 */\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\n/** 카드의 하단 영역 (액션 버튼 등을 배치) */\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex items-center p-6 pt-0\", className)}\n {...props}\n />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardDescription,\n CardContent,\n};\n"
|
|
16
16
|
}
|
|
17
17
|
]
|
|
18
18
|
}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
{
|
|
15
15
|
"path": "components/ui/dialog.tsx",
|
|
16
16
|
"type": "registry:ui",
|
|
17
|
-
"content": "
|
|
17
|
+
"content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\n/**\n * 다이얼로그의 루트 컴포넌트. 열림/닫힘 상태를 관리한다.\n *\n * Radix 는 닫힌 동안에도 트리거에 aria-controls 를 두는데, 콘텐츠는 열릴 때만 DOM 에 있어\n * 없는 id 를 가리킨다(axe aria-valid-attr-value, WI-0069). 열림 상태를 이 래퍼가 알고 있다가\n * 닫힌 동안에는 트리거의 aria-controls 를 뺀다. open · defaultOpen · onOpenChange 는 그대로 통과한다.\n */\nconst DialogOpenContext = React.createContext<boolean | null>(null);\n\nfunction Dialog({\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);\n const isControlled = openProp !== undefined;\n const open = isControlled ? openProp : uncontrolledOpen;\n const handleOpenChange = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setUncontrolledOpen(next);\n onOpenChange?.(next);\n },\n [isControlled, onOpenChange]\n );\n return (\n <DialogOpenContext.Provider value={open}>\n <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n </DialogOpenContext.Provider>\n );\n}\nDialog.displayName = \"Dialog\";\n\n/** 다이얼로그를 여는 트리거 버튼 컴포넌트. 닫힌 동안에는 aria-controls 를 두지 않는다. */\nconst DialogTrigger = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>\n>((props, ref) => {\n const open = React.useContext(DialogOpenContext);\n // Dialog 밖에서 쓰면(null) Radix 동작 그대로. 사용자가 넘긴 aria-controls 는 뒤에서 덮어쓴다\n return <DialogPrimitive.Trigger ref={ref} {...(open === false ? { \"aria-controls\": undefined } : {})} {...props} />;\n});\nDialogTrigger.displayName = \"DialogTrigger\";\n\n/** 다이얼로그 콘텐츠를 포털로 렌더링하는 컴포넌트 */\nconst DialogPortal = DialogPrimitive.Portal;\n\n/** 다이얼로그를 닫는 버튼 컴포넌트 */\nconst DialogClose = DialogPrimitive.Close;\n\n/** 다이얼로그가 열릴 때 배경을 덮는 오버레이 컴포넌트. 페이드 인/아웃 애니메이션을 포함한다. */\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n \"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\",\n className\n )}\n {...props}\n />\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\n/** 다이얼로그의 본문 콘텐츠 컴포넌트. 화면 중앙에 위치하며, 오버레이와 함께 포털로 렌더링된다. */\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n \"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\",\n \"bg-[var(--axis-dialog-content-bg)] border-[var(--axis-dialog-content-border)]\",\n \"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\",\n \"sm:rounded-[var(--axis-radius-surface,0.5rem)]\",\n className\n )}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n </DialogPortal>\n));\nDialogContent.displayName = \"DialogContent\";\n\n/** 다이얼로그 상단 헤더 영역. 제목과 설명을 포함하는 레이아웃 컴포넌트이다. */\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col space-y-1.5 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n);\nDialogHeader.displayName = \"DialogHeader\";\n\n/** 다이얼로그 하단 푸터 영역. 액션 버튼들을 배치하는 레이아웃 컴포넌트이다. */\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className\n )}\n {...props}\n />\n);\nDialogFooter.displayName = \"DialogFooter\";\n\n/** 다이얼로그의 제목 컴포넌트. 접근성을 위해 aria-labelledby로 연결된다. */\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn(\n \"text-lg font-semibold leading-none tracking-tight text-[var(--axis-text-primary)]\",\n className\n )}\n {...props}\n />\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** 다이얼로그의 설명 텍스트 컴포넌트. 접근성을 위해 aria-describedby로 연결된다. */\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-[var(--axis-text-secondary)]\", className)}\n {...props}\n />\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n};\n"
|
|
18
18
|
}
|
|
19
19
|
]
|
|
20
20
|
}
|
package/dist/registry/index.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "axis",
|
|
3
3
|
"homepage": "https://axis-design-system.pages.dev",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.8.0",
|
|
5
5
|
"items": [
|
|
6
6
|
{
|
|
7
7
|
"name": "utils",
|
|
@@ -15,14 +15,14 @@
|
|
|
15
15
|
"type": "registry:ui",
|
|
16
16
|
"title": "Button",
|
|
17
17
|
"description": "AXIS 버튼 컴포넌트 - 다양한 variant와 size 지원",
|
|
18
|
-
"sha256": "
|
|
18
|
+
"sha256": "d91188d37506555c183238fe49ec938dd36244086b9ec6c21d3c92fafdfae510"
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"name": "input",
|
|
22
22
|
"type": "registry:ui",
|
|
23
23
|
"title": "Input",
|
|
24
24
|
"description": "AXIS 입력 필드 컴포넌트",
|
|
25
|
-
"sha256": "
|
|
25
|
+
"sha256": "d11f23e2c4b4bafb51368d910cc0f796357162172ef644fa17e04909df2de46f"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
"name": "label",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"type": "registry:ui",
|
|
37
37
|
"title": "Card",
|
|
38
38
|
"description": "AXIS 카드 컴포넌트 - Header, Content, Footer 포함",
|
|
39
|
-
"sha256": "
|
|
39
|
+
"sha256": "34ae5904281cef4468c283d33183e4319da87b2f390afe4fe138b0037b231b36"
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
42
|
"name": "badge",
|
|
@@ -57,14 +57,14 @@
|
|
|
57
57
|
"type": "registry:ui",
|
|
58
58
|
"title": "Dialog",
|
|
59
59
|
"description": "AXIS 다이얼로그 컴포넌트 - 모달 UI",
|
|
60
|
-
"sha256": "
|
|
60
|
+
"sha256": "a6c0c65bae56587e78f9b53b92f6949472b51c81722c3d31ee1c76645ec7d94b"
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
63
|
"name": "select",
|
|
64
64
|
"type": "registry:ui",
|
|
65
65
|
"title": "Select",
|
|
66
66
|
"description": "AXIS 셀렉트 컴포넌트 - 드롭다운 선택",
|
|
67
|
-
"sha256": "
|
|
67
|
+
"sha256": "e5bb8064708798ae0cab6f8ee4b3ede34e334c5b16af6d54640ca875a4fb0db2"
|
|
68
68
|
},
|
|
69
69
|
{
|
|
70
70
|
"name": "tabs",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"type": "registry:ui",
|
|
79
79
|
"title": "Toast",
|
|
80
80
|
"description": "AXIS 토스트 컴포넌트 - 알림 메시지",
|
|
81
|
-
"sha256": "
|
|
81
|
+
"sha256": "c56513bb2338c57ffee093d7c610ce2ec493857621607ad735b1c4bb4806a21a"
|
|
82
82
|
},
|
|
83
83
|
{
|
|
84
84
|
"name": "agentic-a11y-labels",
|
|
@@ -92,35 +92,35 @@
|
|
|
92
92
|
"type": "registry:ui",
|
|
93
93
|
"title": "Run Progress",
|
|
94
94
|
"description": "AI 에이전트 실행 진행률 표시 컴포넌트",
|
|
95
|
-
"sha256": "
|
|
95
|
+
"sha256": "7c5729965b71edc5977a8ff41289b9e8973f0d67ae5469eb419c13207877ef7f"
|
|
96
96
|
},
|
|
97
97
|
{
|
|
98
98
|
"name": "agentic-streaming-text",
|
|
99
99
|
"type": "registry:ui",
|
|
100
100
|
"title": "Streaming Text",
|
|
101
101
|
"description": "LLM 스트리밍 텍스트 출력 컴포넌트",
|
|
102
|
-
"sha256": "
|
|
102
|
+
"sha256": "cddc2676622d324cb3f8d8bd1fddb97caa4808350cccaf8b6fde754a8ac8780a"
|
|
103
103
|
},
|
|
104
104
|
{
|
|
105
105
|
"name": "agentic-approval-card",
|
|
106
106
|
"type": "registry:ui",
|
|
107
107
|
"title": "Approval Card",
|
|
108
108
|
"description": "사용자 승인 요청 카드 컴포넌트",
|
|
109
|
-
"sha256": "
|
|
109
|
+
"sha256": "412651c84e63a69339fc8788e4d75657fde05b0116a9161f7c32e73a3cd1dbd7"
|
|
110
110
|
},
|
|
111
111
|
{
|
|
112
112
|
"name": "agentic-step-timeline",
|
|
113
113
|
"type": "registry:ui",
|
|
114
114
|
"title": "Step Timeline",
|
|
115
115
|
"description": "에이전트 실행 단계 타임라인 컴포넌트",
|
|
116
|
-
"sha256": "
|
|
116
|
+
"sha256": "6e451cc2f98a62cd4132221dc5187d710a5ddebb940f602cb838b93004a35a95"
|
|
117
117
|
},
|
|
118
118
|
{
|
|
119
119
|
"name": "agentic-thinking-indicator",
|
|
120
120
|
"type": "registry:ui",
|
|
121
121
|
"title": "Thinking Indicator",
|
|
122
122
|
"description": "AI 사고 과정 표시 컴포넌트",
|
|
123
|
-
"sha256": "
|
|
123
|
+
"sha256": "77d5b051c48416067927ba269bf8546e65f8e3942de1fca81d40f159e01ed4b1"
|
|
124
124
|
},
|
|
125
125
|
{
|
|
126
126
|
"name": "agentic-source-panel",
|
|
@@ -134,14 +134,14 @@
|
|
|
134
134
|
"type": "registry:ui",
|
|
135
135
|
"title": "Recovery Banner",
|
|
136
136
|
"description": "에러 복구 배너 컴포넌트",
|
|
137
|
-
"sha256": "
|
|
137
|
+
"sha256": "17b3c5f59ccbecba3dcdaa37a4002d0c9b5843d0aa4a8c0635c9051163ff2572"
|
|
138
138
|
},
|
|
139
139
|
{
|
|
140
140
|
"name": "agentic-agent-avatar",
|
|
141
141
|
"type": "registry:ui",
|
|
142
142
|
"title": "Agent Avatar",
|
|
143
143
|
"description": "AI 에이전트 아바타 컴포넌트",
|
|
144
|
-
"sha256": "
|
|
144
|
+
"sha256": "2ac9c96807bc5103c9d7266dd7d2daacaac7e3856e17c9f862555c65e0218355"
|
|
145
145
|
},
|
|
146
146
|
{
|
|
147
147
|
"name": "agentic-surface-renderer",
|
|
@@ -155,63 +155,63 @@
|
|
|
155
155
|
"type": "registry:ui",
|
|
156
156
|
"title": "Tool Call Card",
|
|
157
157
|
"description": "도구 호출 결과 표시 카드 컴포넌트",
|
|
158
|
-
"sha256": "
|
|
158
|
+
"sha256": "7601f15cb9d796a5bae068ccb5a12b1c02078e2273bdb6be5e9d00324fd54bfb"
|
|
159
159
|
},
|
|
160
160
|
{
|
|
161
161
|
"name": "agentic-message-bubble",
|
|
162
162
|
"type": "registry:ui",
|
|
163
163
|
"title": "Message Bubble",
|
|
164
164
|
"description": "대화 메시지 버블 컴포넌트 (user/assistant/system)",
|
|
165
|
-
"sha256": "
|
|
165
|
+
"sha256": "10137195374ecc5db3aba5809eb1229b8fe3c4b3e64a00e1427ed0a5d52f6408"
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
168
|
"name": "agentic-feedback-buttons",
|
|
169
169
|
"type": "registry:ui",
|
|
170
170
|
"title": "Feedback Buttons",
|
|
171
171
|
"description": "좋아요/싫어요 피드백 버튼 컴포넌트",
|
|
172
|
-
"sha256": "
|
|
172
|
+
"sha256": "f3d4919281f7f811af1e8bf98cbbc32914f830b441e50a53f71d8315c69c6440"
|
|
173
173
|
},
|
|
174
174
|
{
|
|
175
175
|
"name": "agentic-token-usage-indicator",
|
|
176
176
|
"type": "registry:ui",
|
|
177
177
|
"title": "Token Usage Indicator",
|
|
178
178
|
"description": "토큰 사용량 및 비용 표시 컴포넌트",
|
|
179
|
-
"sha256": "
|
|
179
|
+
"sha256": "b64329101d9a9badf43b05245fbde3235ce0fc9ae5e98747fad874fc786d18b1"
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
182
|
"name": "agentic-context-panel",
|
|
183
183
|
"type": "registry:ui",
|
|
184
184
|
"title": "Context Panel",
|
|
185
185
|
"description": "모델/설정 메타 정보 패널 컴포넌트",
|
|
186
|
-
"sha256": "
|
|
186
|
+
"sha256": "930ef920ebd5bef9d68b38b03e4e5b4d77429a898db323512443c9847621c2eb"
|
|
187
187
|
},
|
|
188
188
|
{
|
|
189
189
|
"name": "agentic-code-block",
|
|
190
190
|
"type": "registry:ui",
|
|
191
191
|
"title": "Code Block",
|
|
192
192
|
"description": "코드 표시 + 복사 버튼 컴포넌트",
|
|
193
|
-
"sha256": "
|
|
193
|
+
"sha256": "e67665de3ccbd157e3b4037418760e401b1b77dbacb3456a8dc60594a217aa68"
|
|
194
194
|
},
|
|
195
195
|
{
|
|
196
196
|
"name": "agentic-plan-card",
|
|
197
197
|
"type": "registry:ui",
|
|
198
198
|
"title": "Plan Card",
|
|
199
199
|
"description": "AI 실행 계획 표시/승인 카드 컴포넌트",
|
|
200
|
-
"sha256": "
|
|
200
|
+
"sha256": "d0ad94a23363711259bd49c54aa5205054a4c6a13bd8abdfeef3fa534b68398e"
|
|
201
201
|
},
|
|
202
202
|
{
|
|
203
203
|
"name": "agentic-attachment-card",
|
|
204
204
|
"type": "registry:ui",
|
|
205
205
|
"title": "Attachment Card",
|
|
206
206
|
"description": "파일/이미지 첨부 표시 카드 컴포넌트",
|
|
207
|
-
"sha256": "
|
|
207
|
+
"sha256": "d7116c7dc5c27cb6bc286a0316139d81ffd77c61bbb67a54e034d592183f7f66"
|
|
208
208
|
},
|
|
209
209
|
{
|
|
210
210
|
"name": "agentic-diff-viewer",
|
|
211
211
|
"type": "registry:ui",
|
|
212
212
|
"title": "Diff Viewer",
|
|
213
213
|
"description": "코드 변경사항 비교 표시 컴포넌트",
|
|
214
|
-
"sha256": "
|
|
214
|
+
"sha256": "953104e633bce2adb4d6c2a11024e70ffae7cfa6fcd75b2f618e41b5982e81d9"
|
|
215
215
|
}
|
|
216
216
|
]
|
|
217
217
|
}
|
package/dist/registry/input.json
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
{
|
|
13
13
|
"path": "components/ui/input.tsx",
|
|
14
14
|
"type": "registry:ui",
|
|
15
|
-
"content": "import * as React from \"react\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\n/** Input 컴포넌트의 Props 인터페이스 */\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement> {\n /** 에러 상태 표시. true일 경우 테두리와 포커스 링이 에러 색상으로 변경된다. */\n error?: boolean;\n}\n\n/**\n * 텍스트 입력 필드 컴포넌트.\n * 다양한 HTML input 타입을 지원하며, 에러 상태와 비활성화 상태 스타일을 포함한다.\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, type, error, ...props }, ref) => {\n return (\n <input\n type={type}\n className={cn(\n \"flex h-
|
|
15
|
+
"content": "import * as React from \"react\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\n/** Input 컴포넌트의 Props 인터페이스 */\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement> {\n /** 에러 상태 표시. true일 경우 테두리와 포커스 링이 에러 색상으로 변경된다. */\n error?: boolean;\n}\n\n/**\n * 텍스트 입력 필드 컴포넌트.\n * 다양한 HTML input 타입을 지원하며, 에러 상태와 비활성화 상태 스타일을 포함한다.\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, type, error, ...props }, ref) => {\n return (\n <input\n type={type}\n className={cn(\n \"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\",\n \"bg-[var(--axis-input-bg-default)] text-[var(--axis-input-text-default)]\",\n \"border-[var(--axis-input-border-default)]\",\n \"placeholder:text-[var(--axis-input-text-placeholder)]\",\n \"hover:border-[var(--axis-input-border-hover)]\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-input-border-focus)] focus-visible:ring-offset-2\",\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--axis-input-bg-disabled)]\",\n \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n error && \"border-[var(--axis-input-border-error)] focus-visible:ring-[var(--axis-input-border-error)]\",\n className\n )}\n ref={ref}\n {...props}\n />\n );\n }\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n"
|
|
16
16
|
}
|
|
17
17
|
]
|
|
18
18
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"$schema": "https://ui.shadcn.com/schema/registry.json",
|
|
3
3
|
"name": "axis",
|
|
4
4
|
"homepage": "https://axis-design-system.pages.dev",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.8.0",
|
|
6
6
|
"items": [
|
|
7
7
|
{
|
|
8
8
|
"name": "utils",
|
|
@@ -16,14 +16,14 @@
|
|
|
16
16
|
"type": "registry:ui",
|
|
17
17
|
"title": "Button",
|
|
18
18
|
"description": "AXIS 버튼 컴포넌트 - 다양한 variant와 size 지원",
|
|
19
|
-
"sha256": "
|
|
19
|
+
"sha256": "d91188d37506555c183238fe49ec938dd36244086b9ec6c21d3c92fafdfae510"
|
|
20
20
|
},
|
|
21
21
|
{
|
|
22
22
|
"name": "input",
|
|
23
23
|
"type": "registry:ui",
|
|
24
24
|
"title": "Input",
|
|
25
25
|
"description": "AXIS 입력 필드 컴포넌트",
|
|
26
|
-
"sha256": "
|
|
26
|
+
"sha256": "d11f23e2c4b4bafb51368d910cc0f796357162172ef644fa17e04909df2de46f"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"name": "label",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"type": "registry:ui",
|
|
38
38
|
"title": "Card",
|
|
39
39
|
"description": "AXIS 카드 컴포넌트 - Header, Content, Footer 포함",
|
|
40
|
-
"sha256": "
|
|
40
|
+
"sha256": "34ae5904281cef4468c283d33183e4319da87b2f390afe4fe138b0037b231b36"
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
"name": "badge",
|
|
@@ -58,14 +58,14 @@
|
|
|
58
58
|
"type": "registry:ui",
|
|
59
59
|
"title": "Dialog",
|
|
60
60
|
"description": "AXIS 다이얼로그 컴포넌트 - 모달 UI",
|
|
61
|
-
"sha256": "
|
|
61
|
+
"sha256": "a6c0c65bae56587e78f9b53b92f6949472b51c81722c3d31ee1c76645ec7d94b"
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
"name": "select",
|
|
65
65
|
"type": "registry:ui",
|
|
66
66
|
"title": "Select",
|
|
67
67
|
"description": "AXIS 셀렉트 컴포넌트 - 드롭다운 선택",
|
|
68
|
-
"sha256": "
|
|
68
|
+
"sha256": "e5bb8064708798ae0cab6f8ee4b3ede34e334c5b16af6d54640ca875a4fb0db2"
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
71
|
"name": "tabs",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"type": "registry:ui",
|
|
80
80
|
"title": "Toast",
|
|
81
81
|
"description": "AXIS 토스트 컴포넌트 - 알림 메시지",
|
|
82
|
-
"sha256": "
|
|
82
|
+
"sha256": "c56513bb2338c57ffee093d7c610ce2ec493857621607ad735b1c4bb4806a21a"
|
|
83
83
|
},
|
|
84
84
|
{
|
|
85
85
|
"name": "agentic-a11y-labels",
|
|
@@ -93,35 +93,35 @@
|
|
|
93
93
|
"type": "registry:ui",
|
|
94
94
|
"title": "Run Progress",
|
|
95
95
|
"description": "AI 에이전트 실행 진행률 표시 컴포넌트",
|
|
96
|
-
"sha256": "
|
|
96
|
+
"sha256": "7c5729965b71edc5977a8ff41289b9e8973f0d67ae5469eb419c13207877ef7f"
|
|
97
97
|
},
|
|
98
98
|
{
|
|
99
99
|
"name": "agentic-streaming-text",
|
|
100
100
|
"type": "registry:ui",
|
|
101
101
|
"title": "Streaming Text",
|
|
102
102
|
"description": "LLM 스트리밍 텍스트 출력 컴포넌트",
|
|
103
|
-
"sha256": "
|
|
103
|
+
"sha256": "cddc2676622d324cb3f8d8bd1fddb97caa4808350cccaf8b6fde754a8ac8780a"
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
106
|
"name": "agentic-approval-card",
|
|
107
107
|
"type": "registry:ui",
|
|
108
108
|
"title": "Approval Card",
|
|
109
109
|
"description": "사용자 승인 요청 카드 컴포넌트",
|
|
110
|
-
"sha256": "
|
|
110
|
+
"sha256": "412651c84e63a69339fc8788e4d75657fde05b0116a9161f7c32e73a3cd1dbd7"
|
|
111
111
|
},
|
|
112
112
|
{
|
|
113
113
|
"name": "agentic-step-timeline",
|
|
114
114
|
"type": "registry:ui",
|
|
115
115
|
"title": "Step Timeline",
|
|
116
116
|
"description": "에이전트 실행 단계 타임라인 컴포넌트",
|
|
117
|
-
"sha256": "
|
|
117
|
+
"sha256": "6e451cc2f98a62cd4132221dc5187d710a5ddebb940f602cb838b93004a35a95"
|
|
118
118
|
},
|
|
119
119
|
{
|
|
120
120
|
"name": "agentic-thinking-indicator",
|
|
121
121
|
"type": "registry:ui",
|
|
122
122
|
"title": "Thinking Indicator",
|
|
123
123
|
"description": "AI 사고 과정 표시 컴포넌트",
|
|
124
|
-
"sha256": "
|
|
124
|
+
"sha256": "77d5b051c48416067927ba269bf8546e65f8e3942de1fca81d40f159e01ed4b1"
|
|
125
125
|
},
|
|
126
126
|
{
|
|
127
127
|
"name": "agentic-source-panel",
|
|
@@ -135,14 +135,14 @@
|
|
|
135
135
|
"type": "registry:ui",
|
|
136
136
|
"title": "Recovery Banner",
|
|
137
137
|
"description": "에러 복구 배너 컴포넌트",
|
|
138
|
-
"sha256": "
|
|
138
|
+
"sha256": "17b3c5f59ccbecba3dcdaa37a4002d0c9b5843d0aa4a8c0635c9051163ff2572"
|
|
139
139
|
},
|
|
140
140
|
{
|
|
141
141
|
"name": "agentic-agent-avatar",
|
|
142
142
|
"type": "registry:ui",
|
|
143
143
|
"title": "Agent Avatar",
|
|
144
144
|
"description": "AI 에이전트 아바타 컴포넌트",
|
|
145
|
-
"sha256": "
|
|
145
|
+
"sha256": "2ac9c96807bc5103c9d7266dd7d2daacaac7e3856e17c9f862555c65e0218355"
|
|
146
146
|
},
|
|
147
147
|
{
|
|
148
148
|
"name": "agentic-surface-renderer",
|
|
@@ -156,63 +156,63 @@
|
|
|
156
156
|
"type": "registry:ui",
|
|
157
157
|
"title": "Tool Call Card",
|
|
158
158
|
"description": "도구 호출 결과 표시 카드 컴포넌트",
|
|
159
|
-
"sha256": "
|
|
159
|
+
"sha256": "7601f15cb9d796a5bae068ccb5a12b1c02078e2273bdb6be5e9d00324fd54bfb"
|
|
160
160
|
},
|
|
161
161
|
{
|
|
162
162
|
"name": "agentic-message-bubble",
|
|
163
163
|
"type": "registry:ui",
|
|
164
164
|
"title": "Message Bubble",
|
|
165
165
|
"description": "대화 메시지 버블 컴포넌트 (user/assistant/system)",
|
|
166
|
-
"sha256": "
|
|
166
|
+
"sha256": "10137195374ecc5db3aba5809eb1229b8fe3c4b3e64a00e1427ed0a5d52f6408"
|
|
167
167
|
},
|
|
168
168
|
{
|
|
169
169
|
"name": "agentic-feedback-buttons",
|
|
170
170
|
"type": "registry:ui",
|
|
171
171
|
"title": "Feedback Buttons",
|
|
172
172
|
"description": "좋아요/싫어요 피드백 버튼 컴포넌트",
|
|
173
|
-
"sha256": "
|
|
173
|
+
"sha256": "f3d4919281f7f811af1e8bf98cbbc32914f830b441e50a53f71d8315c69c6440"
|
|
174
174
|
},
|
|
175
175
|
{
|
|
176
176
|
"name": "agentic-token-usage-indicator",
|
|
177
177
|
"type": "registry:ui",
|
|
178
178
|
"title": "Token Usage Indicator",
|
|
179
179
|
"description": "토큰 사용량 및 비용 표시 컴포넌트",
|
|
180
|
-
"sha256": "
|
|
180
|
+
"sha256": "b64329101d9a9badf43b05245fbde3235ce0fc9ae5e98747fad874fc786d18b1"
|
|
181
181
|
},
|
|
182
182
|
{
|
|
183
183
|
"name": "agentic-context-panel",
|
|
184
184
|
"type": "registry:ui",
|
|
185
185
|
"title": "Context Panel",
|
|
186
186
|
"description": "모델/설정 메타 정보 패널 컴포넌트",
|
|
187
|
-
"sha256": "
|
|
187
|
+
"sha256": "930ef920ebd5bef9d68b38b03e4e5b4d77429a898db323512443c9847621c2eb"
|
|
188
188
|
},
|
|
189
189
|
{
|
|
190
190
|
"name": "agentic-code-block",
|
|
191
191
|
"type": "registry:ui",
|
|
192
192
|
"title": "Code Block",
|
|
193
193
|
"description": "코드 표시 + 복사 버튼 컴포넌트",
|
|
194
|
-
"sha256": "
|
|
194
|
+
"sha256": "e67665de3ccbd157e3b4037418760e401b1b77dbacb3456a8dc60594a217aa68"
|
|
195
195
|
},
|
|
196
196
|
{
|
|
197
197
|
"name": "agentic-plan-card",
|
|
198
198
|
"type": "registry:ui",
|
|
199
199
|
"title": "Plan Card",
|
|
200
200
|
"description": "AI 실행 계획 표시/승인 카드 컴포넌트",
|
|
201
|
-
"sha256": "
|
|
201
|
+
"sha256": "d0ad94a23363711259bd49c54aa5205054a4c6a13bd8abdfeef3fa534b68398e"
|
|
202
202
|
},
|
|
203
203
|
{
|
|
204
204
|
"name": "agentic-attachment-card",
|
|
205
205
|
"type": "registry:ui",
|
|
206
206
|
"title": "Attachment Card",
|
|
207
207
|
"description": "파일/이미지 첨부 표시 카드 컴포넌트",
|
|
208
|
-
"sha256": "
|
|
208
|
+
"sha256": "d7116c7dc5c27cb6bc286a0316139d81ffd77c61bbb67a54e034d592183f7f66"
|
|
209
209
|
},
|
|
210
210
|
{
|
|
211
211
|
"name": "agentic-diff-viewer",
|
|
212
212
|
"type": "registry:ui",
|
|
213
213
|
"title": "Diff Viewer",
|
|
214
214
|
"description": "코드 변경사항 비교 표시 컴포넌트",
|
|
215
|
-
"sha256": "
|
|
215
|
+
"sha256": "953104e633bce2adb4d6c2a11024e70ffae7cfa6fcd75b2f618e41b5982e81d9"
|
|
216
216
|
}
|
|
217
217
|
]
|
|
218
218
|
}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
{
|
|
15
15
|
"path": "components/ui/select.tsx",
|
|
16
16
|
"type": "registry:ui",
|
|
17
|
-
"content": "import * as React from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\n/** 셀렉트의 루트 컴포넌트. 열림/닫힘 및 선택 상태를 관리한다. */\nconst Select = SelectPrimitive.Root;\n\n/** 셀렉트 옵션들을 논리적으로 그룹화하는 컴포넌트 */\nconst SelectGroup = SelectPrimitive.Group;\n\n/** 셀렉트 트리거 내에서 현재 선택된 값을 표시하는 컴포넌트 */\nconst SelectValue = SelectPrimitive.Value;\n\n/** 셀렉트 드롭다운을 여는 트리거 버튼 컴포넌트. 선택된 값과 하향 화살표 아이콘을 표시한다. */\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n \"flex h-
|
|
17
|
+
"content": "import * as React from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\n/** 셀렉트의 루트 컴포넌트. 열림/닫힘 및 선택 상태를 관리한다. */\nconst Select = SelectPrimitive.Root;\n\n/** 셀렉트 옵션들을 논리적으로 그룹화하는 컴포넌트 */\nconst SelectGroup = SelectPrimitive.Group;\n\n/** 셀렉트 트리거 내에서 현재 선택된 값을 표시하는 컴포넌트 */\nconst SelectValue = SelectPrimitive.Value;\n\n/** 셀렉트 드롭다운을 여는 트리거 버튼 컴포넌트. 선택된 값과 하향 화살표 아이콘을 표시한다. */\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n \"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\",\n \"bg-[var(--axis-input-bg-default)] border-[var(--axis-input-border-default)]\",\n \"placeholder:text-[var(--axis-input-text-placeholder)]\",\n \"hover:border-[var(--axis-input-border-hover)]\",\n \"focus:outline-none focus:ring-2 focus:ring-[var(--axis-input-border-focus)] focus:ring-offset-2\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"[&>span]:line-clamp-1\",\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <svg\n className=\"h-4 w-4 opacity-50\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M19 9l-7 7-7-7\"\n />\n </svg>\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = \"SelectTrigger\";\n\n/** 셀렉트 드롭다운의 본문 콘텐츠 컴포넌트. 포털을 통해 렌더링되며 진입/퇴장 애니메이션을 포함한다. */\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md\",\n \"bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]\",\n \"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\",\n position === \"popper\" &&\n \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n className\n )}\n position={position}\n {...props}\n >\n <SelectPrimitive.Viewport\n className={cn(\n \"p-1\",\n position === \"popper\" &&\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = \"SelectContent\";\n\n/** 셀렉트 옵션 그룹의 레이블 컴포넌트. 비선택 텍스트로 그룹 제목을 표시한다. */\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\n \"py-1.5 pl-8 pr-2 text-sm font-semibold text-[var(--axis-text-secondary)]\",\n className\n )}\n {...props}\n />\n));\nSelectLabel.displayName = \"SelectLabel\";\n\n/** 셀렉트 드롭다운의 개별 선택 항목 컴포넌트. 선택 시 좌측에 체크 아이콘이 표시된다. */\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none\",\n \"text-[var(--axis-text-primary)]\",\n \"focus:bg-[var(--axis-surface-secondary)] focus:text-[var(--axis-text-primary)]\",\n \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n className\n )}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <svg\n className=\"h-4 w-4\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M5 13l4 4L19 7\"\n />\n </svg>\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\n/** 셀렉트 옵션 사이의 구분선 컴포넌트 */\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-[var(--axis-border-default)]\", className)}\n {...props}\n />\n));\nSelectSeparator.displayName = \"SelectSeparator\";\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n};\n"
|
|
18
18
|
}
|
|
19
19
|
]
|
|
20
20
|
}
|
package/dist/registry/toast.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
{
|
|
16
16
|
"path": "components/ui/toast.tsx",
|
|
17
17
|
"type": "registry:ui",
|
|
18
|
-
"content": "import * as React from \"react\";\nimport * as ToastPrimitives from \"@radix-ui/react-toast\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\n/** 토스트 알림 시스템의 프로바이더 컴포넌트. 앱 루트에 배치하여 토스트 기능을 활성화한다. */\nconst ToastProvider = ToastPrimitives.Provider;\n\n/** 토스트 알림이 표시되는 뷰포트 영역. 화면 하단 우측에 고정 위치로 렌더링된다. */\nconst ToastViewport = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Viewport>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Viewport\n ref={ref}\n className={cn(\n \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n className\n )}\n {...props}\n />\n));\nToastViewport.displayName = ToastPrimitives.Viewport.displayName;\n\nconst toastVariants = cva(\n \"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\",\n {\n variants: {\n variant: {\n default:\n \"border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)]\",\n success:\n \"border-[var(--axis-border-success)] bg-[var(--axis-surface-success)] text-[var(--axis-text-success)]\",\n error:\n \"border-[var(--axis-border-error)] bg-[var(--axis-surface-error)] text-[var(--axis-text-error)]\",\n warning:\n \"border-transparent bg-[var(--axis-surface-warning)] text-[var(--axis-text-warning)]\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\n/** 토스트 알림의 루트 컴포넌트. default, success, error, warning 변형을 지원하며 스와이프로 닫을 수 있다. */\nconst Toast = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Root>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => (\n <ToastPrimitives.Root\n ref={ref}\n className={cn(toastVariants({ variant }), className)}\n {...props}\n />\n));\nToast.displayName = ToastPrimitives.Root.displayName;\n\n/** 토스트 내에 표시되는 액션 버튼 컴포넌트. 사용자 상호작용을 위한 CTA를 제공한다. */\nconst ToastAction = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Action>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Action\n ref={ref}\n className={cn(\n \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border px-3 text-sm font-medium transition-colors\",\n \"border-[var(--axis-border-default)] bg-transparent\",\n \"hover:bg-[var(--axis-surface-secondary)]\",\n \"focus:outline-none focus:ring-2 focus:ring-[var(--axis-border-focus)]\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n className\n )}\n {...props}\n />\n));\nToastAction.displayName = ToastPrimitives.Action.displayName;\n\n/** 토스트를 닫는 닫기 버튼 컴포넌트. 호버 시 표시되며 X 아이콘을 포함한다. */\nconst ToastClose = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Close>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Close\n ref={ref}\n className={cn(\n \"absolute right-2 top-2 rounded-md p-1 text-[var(--axis-text-secondary)] opacity-0 transition-opacity\",\n \"hover:text-[var(--axis-text-primary)]\",\n \"focus:opacity-100 focus:outline-none focus:ring-2\",\n \"group-hover:opacity-100\",\n className\n )}\n toast-close=\"\"\n {...props}\n >\n <svg className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </ToastPrimitives.Close>\n));\nToastClose.displayName = ToastPrimitives.Close.displayName;\n\n/** 토스트의 제목을 표시하는 컴포넌트 */\nconst ToastTitle = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Title>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Title\n ref={ref}\n className={cn(\"text-sm font-semibold\", className)}\n {...props}\n />\n));\nToastTitle.displayName = ToastPrimitives.Title.displayName;\n\n/** 토스트의 상세 설명을 표시하는 컴포넌트 */\nconst ToastDescription = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Description>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Description\n ref={ref}\n className={cn(\"text-sm
|
|
18
|
+
"content": "import * as React from \"react\";\nimport * as ToastPrimitives from \"@radix-ui/react-toast\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/registry/axis/lib/utils\";\n\n/** 토스트 알림 시스템의 프로바이더 컴포넌트. 앱 루트에 배치하여 토스트 기능을 활성화한다. */\nconst ToastProvider = ToastPrimitives.Provider;\n\n/** 토스트 알림이 표시되는 뷰포트 영역. 화면 하단 우측에 고정 위치로 렌더링된다. */\nconst ToastViewport = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Viewport>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Viewport\n ref={ref}\n className={cn(\n \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n className\n )}\n {...props}\n />\n));\nToastViewport.displayName = ToastPrimitives.Viewport.displayName;\n\nconst toastVariants = cva(\n \"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\",\n {\n variants: {\n variant: {\n default:\n \"border-[var(--axis-border-default)] bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)]\",\n success:\n \"border-[var(--axis-border-success)] bg-[var(--axis-surface-success)] text-[var(--axis-text-success)]\",\n error:\n \"border-[var(--axis-border-error)] bg-[var(--axis-surface-error)] text-[var(--axis-text-error)]\",\n warning:\n \"border-transparent bg-[var(--axis-surface-warning)] text-[var(--axis-text-warning)]\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\n/** 토스트 알림의 루트 컴포넌트. default, success, error, warning 변형을 지원하며 스와이프로 닫을 수 있다. */\nconst Toast = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Root>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => (\n <ToastPrimitives.Root\n ref={ref}\n className={cn(toastVariants({ variant }), className)}\n {...props}\n />\n));\nToast.displayName = ToastPrimitives.Root.displayName;\n\n/** 토스트 내에 표시되는 액션 버튼 컴포넌트. 사용자 상호작용을 위한 CTA를 제공한다. */\nconst ToastAction = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Action>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Action\n ref={ref}\n className={cn(\n \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border px-3 text-sm font-medium transition-colors\",\n \"border-[var(--axis-border-default)] bg-transparent\",\n \"hover:bg-[var(--axis-surface-secondary)]\",\n \"focus:outline-none focus:ring-2 focus:ring-[var(--axis-border-focus)]\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n className\n )}\n {...props}\n />\n));\nToastAction.displayName = ToastPrimitives.Action.displayName;\n\n/** 토스트를 닫는 닫기 버튼 컴포넌트. 호버 시 표시되며 X 아이콘을 포함한다. */\nconst ToastClose = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Close>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Close\n ref={ref}\n className={cn(\n \"absolute right-2 top-2 rounded-md p-1 text-[var(--axis-text-secondary)] opacity-0 transition-opacity\",\n \"hover:text-[var(--axis-text-primary)]\",\n \"focus:opacity-100 focus:outline-none focus:ring-2\",\n \"group-hover:opacity-100\",\n className\n )}\n toast-close=\"\"\n {...props}\n >\n <svg className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </ToastPrimitives.Close>\n));\nToastClose.displayName = ToastPrimitives.Close.displayName;\n\n/** 토스트의 제목을 표시하는 컴포넌트 */\nconst ToastTitle = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Title>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Title\n ref={ref}\n className={cn(\"text-sm font-semibold\", className)}\n {...props}\n />\n));\nToastTitle.displayName = ToastPrimitives.Title.displayName;\n\n/** 토스트의 상세 설명을 표시하는 컴포넌트 */\nconst ToastDescription = React.forwardRef<\n React.ElementRef<typeof ToastPrimitives.Description>,\n React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n <ToastPrimitives.Description\n ref={ref}\n className={cn(\"text-sm\", className)}\n {...props}\n />\n));\nToastDescription.displayName = ToastPrimitives.Description.displayName;\n\nexport {\n ToastProvider,\n ToastViewport,\n Toast,\n ToastTitle,\n ToastDescription,\n ToastClose,\n ToastAction,\n};\n"
|
|
19
19
|
}
|
|
20
20
|
]
|
|
21
21
|
}
|