@mondrianai/runyourai-design-system 0.0.3 → 0.0.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/README.md +38 -0
- package/dist/index.d.mts +132 -13
- package/dist/index.d.ts +132 -13
- package/dist/index.js +2315 -719
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2340 -767
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,6 +16,26 @@ npm install @mondrianai/runyourai-design-system
|
|
|
16
16
|
yarn add @mondrianai/runyourai-design-system
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
+
## Local Development (yalc)
|
|
20
|
+
|
|
21
|
+
소비 앱에서 로컬 빌드를 테스트할 때는 [yalc](https://github.com/wclr/yalc)를 사용합니다.
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
# 최초 1회: 소비 앱에 yalc 연결
|
|
25
|
+
# (design system 레포에서)
|
|
26
|
+
yalc publish
|
|
27
|
+
# (소비 앱 레포에서)
|
|
28
|
+
yalc add @mondrianai/runyourai-design-system
|
|
29
|
+
|
|
30
|
+
# 이후 변경사항 반영 시 (design system 레포에서)
|
|
31
|
+
npm run build && yalc push
|
|
32
|
+
# 소비 앱 dev 서버 재시작 필요
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
> **주의**: `sidebar.tsx`, `button.tsx` 등 컴포넌트 소스를 수정한 경우, 반드시 `npm run build && yalc push` 를 실행해야 소비 앱에 변경사항이 반영됩니다. 소스 파일을 수정해도 소비 앱의 dev server hot-reload만으로는 dist가 갱신되지 않습니다.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
19
39
|
## Setup
|
|
20
40
|
|
|
21
41
|
### 1. 패키지 설치
|
|
@@ -89,6 +109,24 @@ export default nextConfig;
|
|
|
89
109
|
> - `url(...)` 형태의 외부 폰트 import가 있다면 `@import 'tailwindcss'` **앞에** 위치시킵니다.
|
|
90
110
|
> - `@mondrianai/runyourai-design-system/styles`, `@mondrianai/runyourai-design-system/tailwind-theme`는 `@import 'tailwindcss'` **뒤에** 위치시킵니다.
|
|
91
111
|
|
|
112
|
+
> **디자인 토큰 오버라이드 주의**
|
|
113
|
+
>
|
|
114
|
+
> `:root`에서 디자인 시스템 CSS 변수를 오버라이드할 때, **컴포넌트 표면색 토큰**(`--background`, `--card`, `--popover` 등)을 페이지 배경색 설정 목적으로 변경하면 안 됩니다. 이 변수들은 `Button` outline, `Card`, `Popover` 등 컴포넌트의 배경색에 직접 사용됩니다.
|
|
115
|
+
>
|
|
116
|
+
> **페이지 배경색**은 CSS 토큰 오버라이드 대신 `html`/`body`에 직접 지정하세요.
|
|
117
|
+
>
|
|
118
|
+
> ```css
|
|
119
|
+
> /* ❌ 잘못된 예 — Button outline 등 컴포넌트 배경색까지 바뀜 */
|
|
120
|
+
> :root {
|
|
121
|
+
> --background: #fdfdfd;
|
|
122
|
+
> }
|
|
123
|
+
>
|
|
124
|
+
> /* ✅ 올바른 예 — 페이지 배경만 변경, 컴포넌트 토큰 무영향 */
|
|
125
|
+
> html, body {
|
|
126
|
+
> background-color: #fdfdfd;
|
|
127
|
+
> }
|
|
128
|
+
> ```
|
|
129
|
+
|
|
92
130
|
> **기존 CSS 리셋 주의 (Tailwind v4)**
|
|
93
131
|
> 프로젝트에 `* { margin: 0; padding: 0; }` 같은 전역 리셋이 있다면 반드시 `@layer base`로 감싸야 합니다. Tailwind v4에서 레이어 밖의 스타일은 `@layer utilities`보다 우선순위가 높아 `px-*`, `py-*` 등의 유틸리티 클래스가 무효화됩니다.
|
|
94
132
|
>
|
package/dist/index.d.mts
CHANGED
|
@@ -99,6 +99,7 @@ interface BreadcrumbProps extends React__default.ComponentPropsWithoutRef<'nav'>
|
|
|
99
99
|
items: {
|
|
100
100
|
label: string;
|
|
101
101
|
href?: string;
|
|
102
|
+
onClick?: () => void;
|
|
102
103
|
}[];
|
|
103
104
|
separator?: BreadcrumbSeparator;
|
|
104
105
|
collapse?: 'dropdown' | 'ellipsis';
|
|
@@ -170,6 +171,24 @@ interface DataSectionProps {
|
|
|
170
171
|
}
|
|
171
172
|
declare function DataSection({ title, left, right, className, children, }: DataSectionProps): react_jsx_runtime.JSX.Element;
|
|
172
173
|
|
|
174
|
+
interface DrawerProps {
|
|
175
|
+
open: boolean;
|
|
176
|
+
onClose: () => void;
|
|
177
|
+
title: React$1.ReactNode;
|
|
178
|
+
children: React$1.ReactNode;
|
|
179
|
+
metadata?: React$1.ReactNode;
|
|
180
|
+
className?: string;
|
|
181
|
+
}
|
|
182
|
+
declare function Drawer({ open, onClose, title, children, metadata, className, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
|
|
183
|
+
|
|
184
|
+
interface EmptyProps {
|
|
185
|
+
image?: React$1.ReactNode;
|
|
186
|
+
description?: React$1.ReactNode;
|
|
187
|
+
children?: React$1.ReactNode;
|
|
188
|
+
className?: string;
|
|
189
|
+
}
|
|
190
|
+
declare function Empty({ image, description, children, className }: EmptyProps): react_jsx_runtime.JSX.Element;
|
|
191
|
+
|
|
173
192
|
interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof Checkbox$1.Root> {
|
|
174
193
|
/** Optional label rendered to the right of the checkbox */
|
|
175
194
|
label?: string;
|
|
@@ -418,12 +437,16 @@ interface IconProps extends React$1.SVGProps<SVGSVGElement> {
|
|
|
418
437
|
*/
|
|
419
438
|
declare function Icon({ name, className, strokeWidth, ...props }: IconProps): react_jsx_runtime.JSX.Element | null;
|
|
420
439
|
|
|
440
|
+
interface KbCardMetadataItem {
|
|
441
|
+
label: string;
|
|
442
|
+
value: React$1.ReactNode;
|
|
443
|
+
}
|
|
421
444
|
interface KbCardProps {
|
|
422
445
|
name: string;
|
|
423
|
-
|
|
424
|
-
updatedAt: string;
|
|
425
|
-
connectedAgents: number | null;
|
|
446
|
+
metadata?: KbCardMetadataItem[];
|
|
426
447
|
icon?: React$1.ReactNode;
|
|
448
|
+
/** 아이콘 우측 상단에 노출할 콘텐츠 (e.g. 스크랩 날짜). selectable 모드에서는 무시됨. */
|
|
449
|
+
topRight?: React$1.ReactNode;
|
|
427
450
|
selectable?: boolean;
|
|
428
451
|
checked?: boolean;
|
|
429
452
|
onCheckedChange?: (checked: boolean) => void;
|
|
@@ -431,7 +454,7 @@ interface KbCardProps {
|
|
|
431
454
|
onClick?: () => void;
|
|
432
455
|
className?: string;
|
|
433
456
|
}
|
|
434
|
-
declare function KbCard({ name,
|
|
457
|
+
declare function KbCard({ name, metadata, icon, topRight, selectable, checked, onCheckedChange, onClick, className, }: KbCardProps): react_jsx_runtime.JSX.Element;
|
|
435
458
|
|
|
436
459
|
declare function MarkdownMessage({ content, isStreaming, footerMeta, className, }: {
|
|
437
460
|
content: string;
|
|
@@ -674,6 +697,27 @@ interface StepperProps {
|
|
|
674
697
|
}
|
|
675
698
|
declare function Stepper({ steps, currentStep, className }: StepperProps): react_jsx_runtime.JSX.Element;
|
|
676
699
|
|
|
700
|
+
interface CircleIndicatorProps {
|
|
701
|
+
/** 사용량 (바이트 또는 임의 단위) */
|
|
702
|
+
used: number;
|
|
703
|
+
/** 전체 용량 */
|
|
704
|
+
total: number;
|
|
705
|
+
/** 중앙에 표시할 아이콘 */
|
|
706
|
+
icon?: React$1.ReactNode;
|
|
707
|
+
/** hover 시 표시할 툴팁 텍스트 */
|
|
708
|
+
tooltip?: string;
|
|
709
|
+
/**
|
|
710
|
+
* progress arc 색상. CSS color 값 또는 디자인 시스템 토큰을 받습니다.
|
|
711
|
+
* 예) "#3b82f6" | "var(--color-primary)" | "var(--color-blue-500)"
|
|
712
|
+
* 미지정 시 primary 색상이 적용됩니다.
|
|
713
|
+
*/
|
|
714
|
+
color?: string;
|
|
715
|
+
/** 컴포넌트 크기 (px, 기본값 44) */
|
|
716
|
+
size?: number;
|
|
717
|
+
className?: string;
|
|
718
|
+
}
|
|
719
|
+
declare function CircleIndicator({ used, total, icon, tooltip, color, size, className, }: CircleIndicatorProps): react_jsx_runtime.JSX.Element;
|
|
720
|
+
|
|
677
721
|
declare const Switch: React__default.ForwardRefExoticComponent<Omit<Switch$1.SwitchProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
|
|
678
722
|
interface SwitchFieldProps extends React__default.ComponentPropsWithoutRef<typeof Switch$1.Root> {
|
|
679
723
|
/** 레이블 텍스트 */
|
|
@@ -684,7 +728,7 @@ interface SwitchFieldProps extends React__default.ComponentPropsWithoutRef<typeo
|
|
|
684
728
|
}
|
|
685
729
|
declare function SwitchField({ label, description, className, id, ...props }: SwitchFieldProps): react_jsx_runtime.JSX.Element;
|
|
686
730
|
|
|
687
|
-
type SortDirection = '
|
|
731
|
+
type SortDirection = 'ASC' | 'DESC' | null;
|
|
688
732
|
interface TableColumn<T> {
|
|
689
733
|
key: string;
|
|
690
734
|
header: string;
|
|
@@ -763,13 +807,13 @@ interface TableProps<T> {
|
|
|
763
807
|
declare function SortIcon({ direction }: {
|
|
764
808
|
direction: SortDirection;
|
|
765
809
|
}): react_jsx_runtime.JSX.Element;
|
|
766
|
-
interface
|
|
810
|
+
interface PaginationProps {
|
|
767
811
|
currentPage: number;
|
|
768
812
|
totalPages: number;
|
|
769
813
|
onPageChange: (page: number) => void;
|
|
770
814
|
className?: string;
|
|
771
815
|
}
|
|
772
|
-
declare function
|
|
816
|
+
declare function Pagination({ currentPage, totalPages, onPageChange, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
|
|
773
817
|
declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
|
|
774
818
|
|
|
775
819
|
declare const TooltipProvider: React$1.FC<Tooltip$1.TooltipProviderProps>;
|
|
@@ -836,6 +880,30 @@ declare function UpstageIcon({ className }: {
|
|
|
836
880
|
className?: string;
|
|
837
881
|
}): react_jsx_runtime.JSX.Element;
|
|
838
882
|
|
|
883
|
+
declare function AgentBlogIcon({ className }: {
|
|
884
|
+
className?: string;
|
|
885
|
+
}): react_jsx_runtime.JSX.Element;
|
|
886
|
+
|
|
887
|
+
declare function AgentCsIcon({ className }: {
|
|
888
|
+
className?: string;
|
|
889
|
+
}): react_jsx_runtime.JSX.Element;
|
|
890
|
+
|
|
891
|
+
declare function AgentDataIcon({ className }: {
|
|
892
|
+
className?: string;
|
|
893
|
+
}): react_jsx_runtime.JSX.Element;
|
|
894
|
+
|
|
895
|
+
declare function AgentHrIcon({ className }: {
|
|
896
|
+
className?: string;
|
|
897
|
+
}): react_jsx_runtime.JSX.Element;
|
|
898
|
+
|
|
899
|
+
declare function AgentMailIcon({ className }: {
|
|
900
|
+
className?: string;
|
|
901
|
+
}): react_jsx_runtime.JSX.Element;
|
|
902
|
+
|
|
903
|
+
declare function AgentTrendIcon({ className }: {
|
|
904
|
+
className?: string;
|
|
905
|
+
}): react_jsx_runtime.JSX.Element;
|
|
906
|
+
|
|
839
907
|
declare function AiAgentIcon({ className }: {
|
|
840
908
|
className?: string;
|
|
841
909
|
}): react_jsx_runtime.JSX.Element;
|
|
@@ -976,6 +1044,14 @@ declare function DownloadIcon({ className }: {
|
|
|
976
1044
|
className?: string;
|
|
977
1045
|
}): react_jsx_runtime.JSX.Element;
|
|
978
1046
|
|
|
1047
|
+
declare function DriveIcon({ className }: {
|
|
1048
|
+
className?: string;
|
|
1049
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1050
|
+
|
|
1051
|
+
declare function EmptyTrayIcon({ className }: {
|
|
1052
|
+
className?: string;
|
|
1053
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1054
|
+
|
|
979
1055
|
/**
|
|
980
1056
|
* File-code icon — SVG downloaded from Figma design system.
|
|
981
1057
|
* Source: public/icons/file-code.svg
|
|
@@ -992,15 +1068,18 @@ declare function FileSearchIcon({ className }: {
|
|
|
992
1068
|
className?: string;
|
|
993
1069
|
}): react_jsx_runtime.JSX.Element;
|
|
994
1070
|
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
*/
|
|
1071
|
+
declare function FileTypeCornerIcon({ className }: {
|
|
1072
|
+
className?: string;
|
|
1073
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1074
|
+
|
|
1000
1075
|
declare function FolderAmberIcon({ className }: {
|
|
1001
1076
|
className?: string;
|
|
1002
1077
|
}): react_jsx_runtime.JSX.Element;
|
|
1003
1078
|
|
|
1079
|
+
declare function FolderBlueIcon({ className }: {
|
|
1080
|
+
className?: string;
|
|
1081
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1082
|
+
|
|
1004
1083
|
/**
|
|
1005
1084
|
* Folder-closed icon — SVG downloaded directly from Figma design system.
|
|
1006
1085
|
* Uses stroke="currentColor" for CSS color control.
|
|
@@ -1010,6 +1089,18 @@ declare function FolderClosedIcon({ className }: {
|
|
|
1010
1089
|
className?: string;
|
|
1011
1090
|
}): react_jsx_runtime.JSX.Element;
|
|
1012
1091
|
|
|
1092
|
+
declare function FolderGreenIcon({ className }: {
|
|
1093
|
+
className?: string;
|
|
1094
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1095
|
+
|
|
1096
|
+
declare function FolderVioletIcon({ className }: {
|
|
1097
|
+
className?: string;
|
|
1098
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1099
|
+
|
|
1100
|
+
declare function HangulFileIcon({ className }: {
|
|
1101
|
+
className?: string;
|
|
1102
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1103
|
+
|
|
1013
1104
|
/**
|
|
1014
1105
|
* Heading icon — SVG downloaded from Figma design system.
|
|
1015
1106
|
* Source: Figma node (lucide/heading)
|
|
@@ -1018,6 +1109,10 @@ declare function HeadingIcon({ className }: {
|
|
|
1018
1109
|
className?: string;
|
|
1019
1110
|
}): react_jsx_runtime.JSX.Element;
|
|
1020
1111
|
|
|
1112
|
+
declare function HtmlFileIcon({ className }: {
|
|
1113
|
+
className?: string;
|
|
1114
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1115
|
+
|
|
1021
1116
|
/**
|
|
1022
1117
|
* Image icon — SVG downloaded from Figma design system.
|
|
1023
1118
|
* Source: Figma node (lucide/image)
|
|
@@ -1109,6 +1204,10 @@ declare function MessageCircleIcon({ className }: {
|
|
|
1109
1204
|
className?: string;
|
|
1110
1205
|
}): react_jsx_runtime.JSX.Element;
|
|
1111
1206
|
|
|
1207
|
+
declare function MarkdownFileIcon({ className }: {
|
|
1208
|
+
className?: string;
|
|
1209
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1210
|
+
|
|
1112
1211
|
/**
|
|
1113
1212
|
* Messages-square icon — SVG downloaded directly from Figma design system.
|
|
1114
1213
|
* Uses stroke="currentColor" for CSS color control.
|
|
@@ -1139,6 +1238,14 @@ declare function PanelLeftIcon({ className }: {
|
|
|
1139
1238
|
className?: string;
|
|
1140
1239
|
}): react_jsx_runtime.JSX.Element;
|
|
1141
1240
|
|
|
1241
|
+
declare function PdfFileIcon({ className }: {
|
|
1242
|
+
className?: string;
|
|
1243
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1244
|
+
|
|
1245
|
+
declare function RefreshCwIcon({ className }: {
|
|
1246
|
+
className?: string;
|
|
1247
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1248
|
+
|
|
1142
1249
|
interface PenLineIconProps {
|
|
1143
1250
|
className?: string;
|
|
1144
1251
|
}
|
|
@@ -1161,6 +1268,10 @@ declare function PresentationIcon({ className }: {
|
|
|
1161
1268
|
className?: string;
|
|
1162
1269
|
}): react_jsx_runtime.JSX.Element;
|
|
1163
1270
|
|
|
1271
|
+
declare function SheetFileIcon({ className }: {
|
|
1272
|
+
className?: string;
|
|
1273
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1274
|
+
|
|
1164
1275
|
/**
|
|
1165
1276
|
* Shopping Bag icon — SVG from public/icons/shopping-bag.svg
|
|
1166
1277
|
* Uses stroke="currentColor" for CSS color control.
|
|
@@ -1169,6 +1280,10 @@ declare function ShoppingBagIcon({ className }: {
|
|
|
1169
1280
|
className?: string;
|
|
1170
1281
|
}): react_jsx_runtime.JSX.Element;
|
|
1171
1282
|
|
|
1283
|
+
declare function SlideFileIcon({ className }: {
|
|
1284
|
+
className?: string;
|
|
1285
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1286
|
+
|
|
1172
1287
|
/**
|
|
1173
1288
|
* Smile icon — SVG downloaded from Figma design system.
|
|
1174
1289
|
* Source: public/icons/smile.svg
|
|
@@ -1242,4 +1357,8 @@ declare function WandSparklesIcon({ className }: {
|
|
|
1242
1357
|
className?: string;
|
|
1243
1358
|
}): react_jsx_runtime.JSX.Element;
|
|
1244
1359
|
|
|
1245
|
-
|
|
1360
|
+
declare function WordFileIcon({ className }: {
|
|
1361
|
+
className?: string;
|
|
1362
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1363
|
+
|
|
1364
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentBlogIcon, AgentCsIcon, AgentDataIcon, AgentHrIcon, AgentMailIcon, AgentTrendIcon, AiAgentIcon, AiBuilderIcon, AiCloudIcon, AiDatacenterIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlignJustifyIcon, AlignLeftIcon, ArrowDownIcon, type AvailabilityStatus, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarSize, BADGE_VARIANT_STYLES, Badge, type BadgeProps, type BadgeVariant, BlockquoteIcon, BoldIcon, BookOpenIcon, BookUpIcon, Breadcrumb, Button, type ButtonProps, Card, type CardProps, type CardSpec, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, ChevronsUpDownIcon, ChoiceCardGroup, type ChoiceCardGroupProps, ChoiceCardItem, type ChoiceCardItemProps, CircleCheckFillIcon, CircleHelpIcon, CircleIndicator, type CircleIndicatorProps, CircleOutlineIcon, ClaudeIcon, CodeIcon, CodeSquareIcon, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleRoot, CollapsibleTrigger, type CollapsibleWorkspace, Combobox, type ComboboxOption, type ComboboxProps, CreditIcon, DataSection, type DataSectionProps, DeepSeekIcon, DownloadIcon, Drawer, type DrawerProps, DriveIcon, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, GroupedSelect, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, type MachineType, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, type ModelGroup, type ModelItem, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Providers, RefreshCwIcon, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, ShoppingBagIcon, Sidebar, SidebarLink, type SidebarMainMenuItem, type SidebarSubMenuItem, type SidebarUtilityItem, SlideFileIcon, Slider, SmileIcon, type SortDirection, SortIcon, SparklesIcon, SquareCheckIcon, SquareCheckOutlineIcon, StarIcon, Stepper, type StepperProps, type StepperStep, StrikethroughIcon, Switch, SwitchField, type SwitchFieldProps, Table, type TableColumn, type TablePaginationConfig, TablePropertiesIcon, type TableProps, type TableSortingItem, Tooltip, type TooltipProps, TooltipProvider, TooltipWithIcon, type TooltipWithIconProps, TrashIcon, UpstageIcon, type UserMenuSection, type UserMenuSectionItem, UserMessageBubble, WandSparklesIcon, WordFileIcon, buttonVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -99,6 +99,7 @@ interface BreadcrumbProps extends React__default.ComponentPropsWithoutRef<'nav'>
|
|
|
99
99
|
items: {
|
|
100
100
|
label: string;
|
|
101
101
|
href?: string;
|
|
102
|
+
onClick?: () => void;
|
|
102
103
|
}[];
|
|
103
104
|
separator?: BreadcrumbSeparator;
|
|
104
105
|
collapse?: 'dropdown' | 'ellipsis';
|
|
@@ -170,6 +171,24 @@ interface DataSectionProps {
|
|
|
170
171
|
}
|
|
171
172
|
declare function DataSection({ title, left, right, className, children, }: DataSectionProps): react_jsx_runtime.JSX.Element;
|
|
172
173
|
|
|
174
|
+
interface DrawerProps {
|
|
175
|
+
open: boolean;
|
|
176
|
+
onClose: () => void;
|
|
177
|
+
title: React$1.ReactNode;
|
|
178
|
+
children: React$1.ReactNode;
|
|
179
|
+
metadata?: React$1.ReactNode;
|
|
180
|
+
className?: string;
|
|
181
|
+
}
|
|
182
|
+
declare function Drawer({ open, onClose, title, children, metadata, className, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
|
|
183
|
+
|
|
184
|
+
interface EmptyProps {
|
|
185
|
+
image?: React$1.ReactNode;
|
|
186
|
+
description?: React$1.ReactNode;
|
|
187
|
+
children?: React$1.ReactNode;
|
|
188
|
+
className?: string;
|
|
189
|
+
}
|
|
190
|
+
declare function Empty({ image, description, children, className }: EmptyProps): react_jsx_runtime.JSX.Element;
|
|
191
|
+
|
|
173
192
|
interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof Checkbox$1.Root> {
|
|
174
193
|
/** Optional label rendered to the right of the checkbox */
|
|
175
194
|
label?: string;
|
|
@@ -418,12 +437,16 @@ interface IconProps extends React$1.SVGProps<SVGSVGElement> {
|
|
|
418
437
|
*/
|
|
419
438
|
declare function Icon({ name, className, strokeWidth, ...props }: IconProps): react_jsx_runtime.JSX.Element | null;
|
|
420
439
|
|
|
440
|
+
interface KbCardMetadataItem {
|
|
441
|
+
label: string;
|
|
442
|
+
value: React$1.ReactNode;
|
|
443
|
+
}
|
|
421
444
|
interface KbCardProps {
|
|
422
445
|
name: string;
|
|
423
|
-
|
|
424
|
-
updatedAt: string;
|
|
425
|
-
connectedAgents: number | null;
|
|
446
|
+
metadata?: KbCardMetadataItem[];
|
|
426
447
|
icon?: React$1.ReactNode;
|
|
448
|
+
/** 아이콘 우측 상단에 노출할 콘텐츠 (e.g. 스크랩 날짜). selectable 모드에서는 무시됨. */
|
|
449
|
+
topRight?: React$1.ReactNode;
|
|
427
450
|
selectable?: boolean;
|
|
428
451
|
checked?: boolean;
|
|
429
452
|
onCheckedChange?: (checked: boolean) => void;
|
|
@@ -431,7 +454,7 @@ interface KbCardProps {
|
|
|
431
454
|
onClick?: () => void;
|
|
432
455
|
className?: string;
|
|
433
456
|
}
|
|
434
|
-
declare function KbCard({ name,
|
|
457
|
+
declare function KbCard({ name, metadata, icon, topRight, selectable, checked, onCheckedChange, onClick, className, }: KbCardProps): react_jsx_runtime.JSX.Element;
|
|
435
458
|
|
|
436
459
|
declare function MarkdownMessage({ content, isStreaming, footerMeta, className, }: {
|
|
437
460
|
content: string;
|
|
@@ -674,6 +697,27 @@ interface StepperProps {
|
|
|
674
697
|
}
|
|
675
698
|
declare function Stepper({ steps, currentStep, className }: StepperProps): react_jsx_runtime.JSX.Element;
|
|
676
699
|
|
|
700
|
+
interface CircleIndicatorProps {
|
|
701
|
+
/** 사용량 (바이트 또는 임의 단위) */
|
|
702
|
+
used: number;
|
|
703
|
+
/** 전체 용량 */
|
|
704
|
+
total: number;
|
|
705
|
+
/** 중앙에 표시할 아이콘 */
|
|
706
|
+
icon?: React$1.ReactNode;
|
|
707
|
+
/** hover 시 표시할 툴팁 텍스트 */
|
|
708
|
+
tooltip?: string;
|
|
709
|
+
/**
|
|
710
|
+
* progress arc 색상. CSS color 값 또는 디자인 시스템 토큰을 받습니다.
|
|
711
|
+
* 예) "#3b82f6" | "var(--color-primary)" | "var(--color-blue-500)"
|
|
712
|
+
* 미지정 시 primary 색상이 적용됩니다.
|
|
713
|
+
*/
|
|
714
|
+
color?: string;
|
|
715
|
+
/** 컴포넌트 크기 (px, 기본값 44) */
|
|
716
|
+
size?: number;
|
|
717
|
+
className?: string;
|
|
718
|
+
}
|
|
719
|
+
declare function CircleIndicator({ used, total, icon, tooltip, color, size, className, }: CircleIndicatorProps): react_jsx_runtime.JSX.Element;
|
|
720
|
+
|
|
677
721
|
declare const Switch: React__default.ForwardRefExoticComponent<Omit<Switch$1.SwitchProps & React__default.RefAttributes<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
|
|
678
722
|
interface SwitchFieldProps extends React__default.ComponentPropsWithoutRef<typeof Switch$1.Root> {
|
|
679
723
|
/** 레이블 텍스트 */
|
|
@@ -684,7 +728,7 @@ interface SwitchFieldProps extends React__default.ComponentPropsWithoutRef<typeo
|
|
|
684
728
|
}
|
|
685
729
|
declare function SwitchField({ label, description, className, id, ...props }: SwitchFieldProps): react_jsx_runtime.JSX.Element;
|
|
686
730
|
|
|
687
|
-
type SortDirection = '
|
|
731
|
+
type SortDirection = 'ASC' | 'DESC' | null;
|
|
688
732
|
interface TableColumn<T> {
|
|
689
733
|
key: string;
|
|
690
734
|
header: string;
|
|
@@ -763,13 +807,13 @@ interface TableProps<T> {
|
|
|
763
807
|
declare function SortIcon({ direction }: {
|
|
764
808
|
direction: SortDirection;
|
|
765
809
|
}): react_jsx_runtime.JSX.Element;
|
|
766
|
-
interface
|
|
810
|
+
interface PaginationProps {
|
|
767
811
|
currentPage: number;
|
|
768
812
|
totalPages: number;
|
|
769
813
|
onPageChange: (page: number) => void;
|
|
770
814
|
className?: string;
|
|
771
815
|
}
|
|
772
|
-
declare function
|
|
816
|
+
declare function Pagination({ currentPage, totalPages, onPageChange, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
|
|
773
817
|
declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
|
|
774
818
|
|
|
775
819
|
declare const TooltipProvider: React$1.FC<Tooltip$1.TooltipProviderProps>;
|
|
@@ -836,6 +880,30 @@ declare function UpstageIcon({ className }: {
|
|
|
836
880
|
className?: string;
|
|
837
881
|
}): react_jsx_runtime.JSX.Element;
|
|
838
882
|
|
|
883
|
+
declare function AgentBlogIcon({ className }: {
|
|
884
|
+
className?: string;
|
|
885
|
+
}): react_jsx_runtime.JSX.Element;
|
|
886
|
+
|
|
887
|
+
declare function AgentCsIcon({ className }: {
|
|
888
|
+
className?: string;
|
|
889
|
+
}): react_jsx_runtime.JSX.Element;
|
|
890
|
+
|
|
891
|
+
declare function AgentDataIcon({ className }: {
|
|
892
|
+
className?: string;
|
|
893
|
+
}): react_jsx_runtime.JSX.Element;
|
|
894
|
+
|
|
895
|
+
declare function AgentHrIcon({ className }: {
|
|
896
|
+
className?: string;
|
|
897
|
+
}): react_jsx_runtime.JSX.Element;
|
|
898
|
+
|
|
899
|
+
declare function AgentMailIcon({ className }: {
|
|
900
|
+
className?: string;
|
|
901
|
+
}): react_jsx_runtime.JSX.Element;
|
|
902
|
+
|
|
903
|
+
declare function AgentTrendIcon({ className }: {
|
|
904
|
+
className?: string;
|
|
905
|
+
}): react_jsx_runtime.JSX.Element;
|
|
906
|
+
|
|
839
907
|
declare function AiAgentIcon({ className }: {
|
|
840
908
|
className?: string;
|
|
841
909
|
}): react_jsx_runtime.JSX.Element;
|
|
@@ -976,6 +1044,14 @@ declare function DownloadIcon({ className }: {
|
|
|
976
1044
|
className?: string;
|
|
977
1045
|
}): react_jsx_runtime.JSX.Element;
|
|
978
1046
|
|
|
1047
|
+
declare function DriveIcon({ className }: {
|
|
1048
|
+
className?: string;
|
|
1049
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1050
|
+
|
|
1051
|
+
declare function EmptyTrayIcon({ className }: {
|
|
1052
|
+
className?: string;
|
|
1053
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1054
|
+
|
|
979
1055
|
/**
|
|
980
1056
|
* File-code icon — SVG downloaded from Figma design system.
|
|
981
1057
|
* Source: public/icons/file-code.svg
|
|
@@ -992,15 +1068,18 @@ declare function FileSearchIcon({ className }: {
|
|
|
992
1068
|
className?: string;
|
|
993
1069
|
}): react_jsx_runtime.JSX.Element;
|
|
994
1070
|
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
*/
|
|
1071
|
+
declare function FileTypeCornerIcon({ className }: {
|
|
1072
|
+
className?: string;
|
|
1073
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1074
|
+
|
|
1000
1075
|
declare function FolderAmberIcon({ className }: {
|
|
1001
1076
|
className?: string;
|
|
1002
1077
|
}): react_jsx_runtime.JSX.Element;
|
|
1003
1078
|
|
|
1079
|
+
declare function FolderBlueIcon({ className }: {
|
|
1080
|
+
className?: string;
|
|
1081
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1082
|
+
|
|
1004
1083
|
/**
|
|
1005
1084
|
* Folder-closed icon — SVG downloaded directly from Figma design system.
|
|
1006
1085
|
* Uses stroke="currentColor" for CSS color control.
|
|
@@ -1010,6 +1089,18 @@ declare function FolderClosedIcon({ className }: {
|
|
|
1010
1089
|
className?: string;
|
|
1011
1090
|
}): react_jsx_runtime.JSX.Element;
|
|
1012
1091
|
|
|
1092
|
+
declare function FolderGreenIcon({ className }: {
|
|
1093
|
+
className?: string;
|
|
1094
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1095
|
+
|
|
1096
|
+
declare function FolderVioletIcon({ className }: {
|
|
1097
|
+
className?: string;
|
|
1098
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1099
|
+
|
|
1100
|
+
declare function HangulFileIcon({ className }: {
|
|
1101
|
+
className?: string;
|
|
1102
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1103
|
+
|
|
1013
1104
|
/**
|
|
1014
1105
|
* Heading icon — SVG downloaded from Figma design system.
|
|
1015
1106
|
* Source: Figma node (lucide/heading)
|
|
@@ -1018,6 +1109,10 @@ declare function HeadingIcon({ className }: {
|
|
|
1018
1109
|
className?: string;
|
|
1019
1110
|
}): react_jsx_runtime.JSX.Element;
|
|
1020
1111
|
|
|
1112
|
+
declare function HtmlFileIcon({ className }: {
|
|
1113
|
+
className?: string;
|
|
1114
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1115
|
+
|
|
1021
1116
|
/**
|
|
1022
1117
|
* Image icon — SVG downloaded from Figma design system.
|
|
1023
1118
|
* Source: Figma node (lucide/image)
|
|
@@ -1109,6 +1204,10 @@ declare function MessageCircleIcon({ className }: {
|
|
|
1109
1204
|
className?: string;
|
|
1110
1205
|
}): react_jsx_runtime.JSX.Element;
|
|
1111
1206
|
|
|
1207
|
+
declare function MarkdownFileIcon({ className }: {
|
|
1208
|
+
className?: string;
|
|
1209
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1210
|
+
|
|
1112
1211
|
/**
|
|
1113
1212
|
* Messages-square icon — SVG downloaded directly from Figma design system.
|
|
1114
1213
|
* Uses stroke="currentColor" for CSS color control.
|
|
@@ -1139,6 +1238,14 @@ declare function PanelLeftIcon({ className }: {
|
|
|
1139
1238
|
className?: string;
|
|
1140
1239
|
}): react_jsx_runtime.JSX.Element;
|
|
1141
1240
|
|
|
1241
|
+
declare function PdfFileIcon({ className }: {
|
|
1242
|
+
className?: string;
|
|
1243
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1244
|
+
|
|
1245
|
+
declare function RefreshCwIcon({ className }: {
|
|
1246
|
+
className?: string;
|
|
1247
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1248
|
+
|
|
1142
1249
|
interface PenLineIconProps {
|
|
1143
1250
|
className?: string;
|
|
1144
1251
|
}
|
|
@@ -1161,6 +1268,10 @@ declare function PresentationIcon({ className }: {
|
|
|
1161
1268
|
className?: string;
|
|
1162
1269
|
}): react_jsx_runtime.JSX.Element;
|
|
1163
1270
|
|
|
1271
|
+
declare function SheetFileIcon({ className }: {
|
|
1272
|
+
className?: string;
|
|
1273
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1274
|
+
|
|
1164
1275
|
/**
|
|
1165
1276
|
* Shopping Bag icon — SVG from public/icons/shopping-bag.svg
|
|
1166
1277
|
* Uses stroke="currentColor" for CSS color control.
|
|
@@ -1169,6 +1280,10 @@ declare function ShoppingBagIcon({ className }: {
|
|
|
1169
1280
|
className?: string;
|
|
1170
1281
|
}): react_jsx_runtime.JSX.Element;
|
|
1171
1282
|
|
|
1283
|
+
declare function SlideFileIcon({ className }: {
|
|
1284
|
+
className?: string;
|
|
1285
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1286
|
+
|
|
1172
1287
|
/**
|
|
1173
1288
|
* Smile icon — SVG downloaded from Figma design system.
|
|
1174
1289
|
* Source: public/icons/smile.svg
|
|
@@ -1242,4 +1357,8 @@ declare function WandSparklesIcon({ className }: {
|
|
|
1242
1357
|
className?: string;
|
|
1243
1358
|
}): react_jsx_runtime.JSX.Element;
|
|
1244
1359
|
|
|
1245
|
-
|
|
1360
|
+
declare function WordFileIcon({ className }: {
|
|
1361
|
+
className?: string;
|
|
1362
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1363
|
+
|
|
1364
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentBlogIcon, AgentCsIcon, AgentDataIcon, AgentHrIcon, AgentMailIcon, AgentTrendIcon, AiAgentIcon, AiBuilderIcon, AiCloudIcon, AiDatacenterIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlignJustifyIcon, AlignLeftIcon, ArrowDownIcon, type AvailabilityStatus, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarSize, BADGE_VARIANT_STYLES, Badge, type BadgeProps, type BadgeVariant, BlockquoteIcon, BoldIcon, BookOpenIcon, BookUpIcon, Breadcrumb, Button, type ButtonProps, Card, type CardProps, type CardSpec, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, ChevronsUpDownIcon, ChoiceCardGroup, type ChoiceCardGroupProps, ChoiceCardItem, type ChoiceCardItemProps, CircleCheckFillIcon, CircleHelpIcon, CircleIndicator, type CircleIndicatorProps, CircleOutlineIcon, ClaudeIcon, CodeIcon, CodeSquareIcon, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleRoot, CollapsibleTrigger, type CollapsibleWorkspace, Combobox, type ComboboxOption, type ComboboxProps, CreditIcon, DataSection, type DataSectionProps, DeepSeekIcon, DownloadIcon, Drawer, type DrawerProps, DriveIcon, Empty, EmptyTrayIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FileTypeCornerIcon, FolderAmberIcon, FolderBlueIcon, FolderClosedIcon, FolderGreenIcon, FolderVioletIcon, GeminiIcon, GoogleIcon, GroupedSelect, HangulFileIcon, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, HtmlFileIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, ItalicIcon, KbCard, type KbCardMetadataItem, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, type MachineType, MarkdownFileIcon, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, type ModelGroup, type ModelItem, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, Pagination, PanelLeftIcon, PdfFileIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Providers, RefreshCwIcon, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, SheetFileIcon, ShoppingBagIcon, Sidebar, SidebarLink, type SidebarMainMenuItem, type SidebarSubMenuItem, type SidebarUtilityItem, SlideFileIcon, Slider, SmileIcon, type SortDirection, SortIcon, SparklesIcon, SquareCheckIcon, SquareCheckOutlineIcon, StarIcon, Stepper, type StepperProps, type StepperStep, StrikethroughIcon, Switch, SwitchField, type SwitchFieldProps, Table, type TableColumn, type TablePaginationConfig, TablePropertiesIcon, type TableProps, type TableSortingItem, Tooltip, type TooltipProps, TooltipProvider, TooltipWithIcon, type TooltipWithIconProps, TrashIcon, UpstageIcon, type UserMenuSection, type UserMenuSectionItem, UserMessageBubble, WandSparklesIcon, WordFileIcon, buttonVariants };
|