cytur-design-system 0.5.3 → 0.7.0

package/dist/index.js

@@ -1,18 +1,23 @@
-import { Alert as e, App as t, AutoComplete as n, Avatar as r, Badge as i, Breadcrumb as a, Button as o, Button as s, Card as c, Card as l, Checkbox as u, Col as d, ConfigProvider as f, ConfigProvider as p, DatePicker as m, Descriptions as h, Divider as ee, Drawer as te, Dropdown as g, Empty as _, Flex as v, Form as y, Input as b, InputNumber as ne, Layout as re, List as ie, Menu as ae, Modal as oe, Pagination as se, Popconfirm as ce, Popover as le, Progress as ue, Radio as de, Result as fe, Row as x, Select as S, Skeleton as C, Skeleton as w, Slider as T, Space as E, Space as D, Spin as O, Spin as k, Steps as A, Switch as j, Table as M, Table as N, Tabs as P, Tag as F, Tag as I, TimePicker as L, Tooltip as R, Tree as z, Typography as pe, Typography as B, Upload as me, message as he, notification as ge } from "antd";
-import { forwardRef as _e } from "react";
-import { Fragment as ve, jsx as V, jsxs as H } from "react/jsx-runtime";
-import { DownloadOutlined as ye, NotificationOutlined as be, SettingOutlined as xe } from "@ant-design/icons";
+import { forwardRef as e, useEffect as t } from "react";
+import { Alert as n, App as r, AutoComplete as i, Avatar as a, Badge as o, Breadcrumb as s, Button as c, Button as l, Card as u, Card as ee, Checkbox as d, Col as f, ConfigProvider as p, ConfigProvider as m, DatePicker as te, Descriptions as ne, Divider as re, Drawer as ie, Dropdown as ae, Empty as oe, Flex as se, Form as h, Input as g, InputNumber as ce, Layout as le, List as ue, Menu as de, Modal as fe, Pagination as pe, Popconfirm as me, Popover as he, Progress as ge, Radio as _e, Result as ve, Row as ye, Select as be, Skeleton as xe, Skeleton as _, Slider as v, Space as y, Space as b, Spin as x, Spin as S, Steps as C, Switch as w, Table as T, Table as E, Tabs as D, Tag as O, Tag as k, TimePicker as A, Tooltip as j, Tree as M, Typography as Se, Typography as N, Upload as Ce, message as we, notification as Te, theme as P } from "antd";
+import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
+import { DownloadOutlined as Ee, NotificationOutlined as De, SettingOutlined as Oe } from "@ant-design/icons";
 //#region src/theme/index.ts
-var U = {
+var R = {
 	fontFamily: "\"Pretendard\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
 	fontSize: 14,
-	borderRadius: 8,
-	borderRadiusLG: 12,
-	borderRadiusSM: 6,
+	borderRadius: 4,
+	borderRadiusLG: 8,
+	borderRadiusSM: 4,
+	borderRadiusXS: 2,
+	boxShadow: "0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08)",
+	boxShadowSecondary: "0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08)",
 	colorSuccess: "#15803d",
 	colorWarning: "#f59e0b",
 	colorError: "#dc2626",
-	colorInfo: "#2563eb",
+	colorErrorHover: "#b91c1c",
+	colorErrorActive: "#991b1b",
+	colorInfo: "#1d4ed8",
 	colorText: "#111827",
 	colorTextSecondary: "#4a5568",
 	colorTextTertiary: "#6b7b8d",
@@ -22,9 +27,15 @@ var U = {
 	colorBgContainer: "#ffffff",
 	colorBgElevated: "#ffffff",
 	colorBgLayout: "#f8fafb"
-}, W = {
+}, z = {
+	Button: {
+		primaryShadow: "none",
+		defaultShadow: "none"
+	},
+	Modal: { borderRadiusLG: 12 }
+}, B = {
 	token: {
-		...U,
+		...R,
 		colorPrimary: "#0a9e9e",
 		colorPrimaryHover: "#078080",
 		colorPrimaryActive: "#056363",
@@ -32,13 +43,10 @@ var U = {
 		colorLinkHover: "#078080",
 		colorLinkActive: "#056363"
 	},
-	components: { Button: {
-		primaryShadow: "none",
-		defaultShadow: "none"
-	} }
-}, G = {
+	components: z
+}, V = {
 	token: {
-		...U,
+		...R,
 		colorPrimary: "#2563eb",
 		colorPrimaryHover: "#1d4ed8",
 		colorPrimaryActive: "#1e40af",
@@ -46,13 +54,10 @@ var U = {
 		colorLinkHover: "#1d4ed8",
 		colorLinkActive: "#1e40af"
 	},
-	components: { Button: {
-		primaryShadow: "none",
-		defaultShadow: "none"
-	} }
-}, K = {
+	components: z
+}, H = {
 	token: {
-		...U,
+		...R,
 		colorPrimary: "#4f46e5",
 		colorPrimaryHover: "#4338ca",
 		colorPrimaryActive: "#3730a3",
@@ -60,22 +65,498 @@ var U = {
 		colorLinkHover: "#4338ca",
 		colorLinkActive: "#3730a3"
 	},
-	components: { Button: {
-		primaryShadow: "none",
-		defaultShadow: "none"
-	} }
-}, Se = W, q = {
-	base: W,
-	rm: G,
-	csc: K
-}, J = ({ theme: e = "base", children: t }) => /* @__PURE__ */ V(p, {
-	theme: q[e],
-	children: t
-});
-J.displayName = "CyturProvider";
+	components: z
+}, ke = B, U = {
+	base: B,
+	rm: V,
+	csc: H
+}, W = {
+	"label-default-bg-solid": "#1f2937",
+	"label-default-text-solid": "#ffffff",
+	"label-primary-bg-solid": "#2563eb",
+	"label-primary-text-solid": "#ffffff",
+	"label-info-bg-solid": "#2563eb",
+	"label-info-text-solid": "#ffffff",
+	"label-success-bg-solid": "#15803d",
+	"label-success-text-solid": "#ffffff",
+	"label-warning-bg-solid": "#f59e0b",
+	"label-warning-text-solid": "#78350f",
+	"label-danger-bg-solid": "#dc2626",
+	"label-danger-text-solid": "#ffffff",
+	"label-default-bg-subtle": "#f1f3f5",
+	"label-default-text-subtle": "#374151",
+	"label-primary-bg-subtle": "#e8f0fe",
+	"label-primary-text-subtle": "#1d4ed8",
+	"label-info-bg-subtle": "#e8f0fe",
+	"label-info-text-subtle": "#1d4ed8",
+	"label-success-bg-subtle": "#f0fdf4",
+	"label-success-text-subtle": "#16a34a",
+	"label-warning-bg-subtle": "#fffbeb",
+	"label-warning-text-subtle": "#b45309",
+	"label-danger-bg-subtle": "#fef2f2",
+	"label-danger-text-subtle": "#b91c1c",
+	"label-default-bg-border": "#ffffff",
+	"label-default-text-border": "#374151",
+	"label-default-border": "#a3adb8",
+	"label-primary-bg-border": "#ffffff",
+	"label-primary-text-border": "#1d4ed8",
+	"label-primary-border": "#3b82f6",
+	"label-info-bg-border": "#ffffff",
+	"label-info-text-border": "#1d4ed8",
+	"label-info-border": "#3b82f6",
+	"label-success-bg-border": "#ffffff",
+	"label-success-text-border": "#16a34a",
+	"label-success-border": "#4ade80",
+	"label-warning-bg-border": "#ffffff",
+	"label-warning-text-border": "#b45309",
+	"label-warning-border": "#fbbf24",
+	"label-danger-bg-border": "#ffffff",
+	"label-danger-text-border": "#b91c1c",
+	"label-danger-border": "#f87171",
+	"tag-default-bg-solid": "#1f2937",
+	"tag-default-bg-solid-hover": "#1b2430",
+	"tag-default-text-solid": "#ffffff",
+	"tag-primary-bg-solid": "#2563eb",
+	"tag-primary-bg-solid-hover": "#1d4ed8",
+	"tag-primary-text-solid": "#ffffff",
+	"tag-success-bg-solid": "#15803d",
+	"tag-success-bg-solid-hover": "#045757",
+	"tag-success-text-solid": "#ffffff",
+	"tag-warning-bg-solid": "#f59e0b",
+	"tag-warning-bg-solid-hover": "#d88b0a",
+	"tag-warning-text-solid": "#78350f",
+	"tag-danger-bg-solid": "#dc2626",
+	"tag-danger-bg-solid-hover": "#c22121",
+	"tag-danger-text-solid": "#ffffff",
+	"tag-default-bg-subtle": "#f1f3f5",
+	"tag-default-bg-subtle-hover": "#e5e7e9",
+	"tag-default-text-subtle": "#374151",
+	"tag-primary-bg-subtle": "#e8f0fe",
+	"tag-primary-bg-subtle-hover": "#b8d4fc",
+	"tag-primary-text-subtle": "#1d4ed8",
+	"tag-success-bg-subtle": "#f0fdf4",
+	"tag-success-bg-subtle-hover": "#dbebeb",
+	"tag-success-text-subtle": "#16a34a",
+	"tag-warning-bg-subtle": "#fffbeb",
+	"tag-warning-bg-subtle-hover": "#f2eedf",
+	"tag-warning-text-subtle": "#b45309",
+	"tag-danger-bg-subtle": "#fef2f2",
+	"tag-danger-bg-subtle-hover": "#f1e6e6",
+	"tag-danger-text-subtle": "#b91c1c",
+	"tag-default-bg-border": "#ffffff",
+	"tag-default-bg-border-hover": "#f1f3f5",
+	"tag-default-text-border": "#374151",
+	"tag-default-border": "#a3adb8",
+	"tag-primary-bg-border": "#ffffff",
+	"tag-primary-bg-border-hover": "#e8f0fe",
+	"tag-primary-text-border": "#1d4ed8",
+	"tag-primary-border": "#3b82f6",
+	"tag-success-bg-border": "#ffffff",
+	"tag-success-bg-border-hover": "#e6f7f7",
+	"tag-success-text-border": "#16a34a",
+	"tag-success-border": "#4ade80",
+	"tag-warning-bg-border": "#ffffff",
+	"tag-warning-bg-border-hover": "#fffbeb",
+	"tag-warning-text-border": "#b45309",
+	"tag-warning-border": "#fbbf24",
+	"tag-danger-bg-border": "#ffffff",
+	"tag-danger-bg-border-hover": "#fef2f2",
+	"tag-danger-text-border": "#b91c1c",
+	"tag-danger-border": "#f87171",
+	"action-primary": "#0a9e9e",
+	"action-primary-hover": "#078080",
+	"action-primary-active": "#056363",
+	"action-secondary": "#1d4ed8",
+	"action-secondary-hover": "#1e40af",
+	"action-secondary-active": "#1e3a8a",
+	"action-danger": "#dc2626",
+	"action-danger-hover": "#b91c1c",
+	"action-danger-active": "#991b1b",
+	"bg-surface": "#ffffff",
+	"bg-subtle": "#f8fafb",
+	"bg-secondary-subtle": "#e8f0fe",
+	"bg-danger-subtle": "#fef2f2",
+	"text-primary": "#111827",
+	"text-secondary": "#4a5568",
+	"text-secondary-action": "#1d4ed8",
+	"text-primary-action": "#0a9e9e",
+	"text-muted": "#a3adb8",
+	"text-danger": "#dc2626",
+	"text-inverse": "#ffffff",
+	"text-disabled": "#a3adb8",
+	"border-default": "#e2e6ea",
+	"border-secondary": "#88b8fa",
+	"border-danger": "#fca5a5",
+	"border-focus": "#26c6c6",
+	"disabled-bg": "#e2e6ea",
+	"disabled-border": "#e2e6ea",
+	"disabled-text": "#a3adb8",
+	"font-size-xs": "12px",
+	"font-size-sm": "14px",
+	"font-size-md": "16px",
+	"font-size-lg": "20px",
+	"font-size-xl": "24px",
+	"font-weight-regular": "400",
+	"font-weight-medium": "500",
+	"font-weight-semibold": "600",
+	"font-weight-bold": "700",
+	"line-height-16": "16px",
+	"line-height-18": "18px",
+	"line-height-20": "20px",
+	"line-height-22": "22px",
+	"line-height-24": "24px",
+	"line-height-28": "28px",
+	"line-height-32": "32px",
+	"letter-spacing-tighter": "-0.4px",
+	"letter-spacing-tight": "-0.2px",
+	"letter-spacing-normal": "0",
+	"letter-spacing-wide": "0.4px",
+	"color-gray-50": "#f8fafb",
+	"color-gray-100": "#f1f3f5",
+	"color-gray-200": "#e2e6ea",
+	"color-gray-300": "#cdd3d9",
+	"color-gray-400": "#a3adb8",
+	"color-gray-500": "#6b7b8d",
+	"color-gray-600": "#4a5568",
+	"color-gray-700": "#374151",
+	"color-gray-800": "#1f2937",
+	"color-gray-900": "#111827",
+	"color-yellow-50": "#fffbeb",
+	"color-yellow-500": "#f59e0b"
+}, Ae = {
+	...W,
+	"action-primary": "#3b82f6",
+	"action-primary-hover": "#5899f5",
+	"action-primary-active": "#88b8fa",
+	"action-danger": "#f87171",
+	"action-danger-hover": "#fca5a5",
+	"action-danger-active": "#fecaca",
+	"bg-surface": "#1f2937",
+	"bg-subtle": "#0f172a",
+	"bg-secondary-subtle": "#1e3a8a",
+	"bg-danger-subtle": "#7f1d1d",
+	"text-primary": "#f8fafb",
+	"text-secondary": "#cdd3d9",
+	"text-secondary-action": "#88b8fa",
+	"text-primary-action": "#3b82f6",
+	"text-muted": "#6b7b8d",
+	"text-danger": "#f87171",
+	"text-inverse": "#1f2937",
+	"text-disabled": "#6b7b8d",
+	"border-default": "#374151",
+	"border-secondary": "#4a5568",
+	"border-danger": "#7f1d1d",
+	"border-focus": "#3b82f6",
+	"disabled-bg": "#1f2937",
+	"disabled-border": "#374151",
+	"disabled-text": "#6b7b8d",
+	"color-gray-50": "#0f172a",
+	"color-gray-100": "#1f2937",
+	"color-gray-200": "#374151",
+	"color-gray-300": "#4a5568",
+	"color-gray-400": "#6b7b8d",
+	"color-gray-500": "#a3adb8",
+	"color-gray-600": "#cdd3d9",
+	"color-gray-700": "#e2e6ea",
+	"color-gray-800": "#f1f3f5",
+	"color-gray-900": "#f8fafb"
+}, je = (e, t) => {
+	let n = (e) => Object.entries(e).map(([e, t]) => `  --cytur-${e}: ${t};`).join("\n");
+	return `
+:root, [data-mode="light"] {
+${n(e)}
+}
+[data-mode="dark"] {
+${n(t)}
+}
+`.trim();
+}, G = "__cytur_tokens__", Me = () => {
+	if (typeof document > "u") return;
+	let e = document.getElementById(G);
+	e || (e = document.createElement("style"), e.id = G, document.head.appendChild(e)), e.innerHTML = je(W, Ae);
+}, K = ({ theme: e = "base", mode: n = "light", children: r }) => {
+	t(() => {
+		Me();
+	}, []), t(() => {
+		typeof document < "u" && (document.documentElement.dataset.mode = n);
+	}, [n]);
+	let i = e === "base" && n === "dark" ? { token: {
+		...U[e].token,
+		colorPrimary: "#3b82f6",
+		colorPrimaryHover: "#5899f5",
+		colorPrimaryActive: "#88b8fa",
+		colorError: "#f87171",
+		colorErrorHover: "#fca5a5",
+		colorErrorActive: "#fecaca"
+	} } : {};
+	return /* @__PURE__ */ I(m, {
+		theme: {
+			...U[e],
+			...i,
+			algorithm: n === "dark" ? P.darkAlgorithm : P.defaultAlgorithm
+		},
+		children: r
+	});
+};
+K.displayName = "CyturProvider";
 //#endregion
-//#region src/components/icon/icons.ts
-var Ce = {
+//#region src/theme/tokens.ts
+var q = (e) => `var(--cytur-${e})`, Ne = {
+	label: {
+		default: {
+			bg: {
+				solid: q("label-default-bg-solid"),
+				subtle: q("label-default-bg-subtle"),
+				border: q("label-default-bg-border")
+			},
+			text: {
+				solid: q("label-default-text-solid"),
+				subtle: q("label-default-text-subtle"),
+				border: q("label-default-text-border")
+			},
+			border: q("label-default-border")
+		},
+		primary: {
+			bg: {
+				solid: q("label-primary-bg-solid"),
+				subtle: q("label-primary-bg-subtle"),
+				border: q("label-primary-bg-border")
+			},
+			text: {
+				solid: q("label-primary-text-solid"),
+				subtle: q("label-primary-text-subtle"),
+				border: q("label-primary-text-border")
+			},
+			border: q("label-primary-border")
+		},
+		info: {
+			bg: {
+				solid: q("label-info-bg-solid"),
+				subtle: q("label-info-bg-subtle"),
+				border: q("label-info-bg-border")
+			},
+			text: {
+				solid: q("label-info-text-solid"),
+				subtle: q("label-info-text-subtle"),
+				border: q("label-info-text-border")
+			},
+			border: q("label-info-border")
+		},
+		success: {
+			bg: {
+				solid: q("label-success-bg-solid"),
+				subtle: q("label-success-bg-subtle"),
+				border: q("label-success-bg-border")
+			},
+			text: {
+				solid: q("label-success-text-solid"),
+				subtle: q("label-success-text-subtle"),
+				border: q("label-success-text-border")
+			},
+			border: q("label-success-border")
+		},
+		warning: {
+			bg: {
+				solid: q("label-warning-bg-solid"),
+				subtle: q("label-warning-bg-subtle"),
+				border: q("label-warning-bg-border")
+			},
+			text: {
+				solid: q("label-warning-text-solid"),
+				subtle: q("label-warning-text-subtle"),
+				border: q("label-warning-text-border")
+			},
+			border: q("label-warning-border")
+		},
+		danger: {
+			bg: {
+				solid: q("label-danger-bg-solid"),
+				subtle: q("label-danger-bg-subtle"),
+				border: q("label-danger-bg-border")
+			},
+			text: {
+				solid: q("label-danger-text-solid"),
+				subtle: q("label-danger-text-subtle"),
+				border: q("label-danger-text-border")
+			},
+			border: q("label-danger-border")
+		}
+	},
+	tag: {
+		default: {
+			bg: {
+				solid: q("tag-default-bg-solid"),
+				solidHover: q("tag-default-bg-solid-hover"),
+				subtle: q("tag-default-bg-subtle"),
+				subtleHover: q("tag-default-bg-subtle-hover"),
+				border: q("tag-default-bg-border"),
+				borderHover: q("tag-default-bg-border-hover")
+			},
+			text: {
+				solid: q("tag-default-text-solid"),
+				subtle: q("tag-default-text-subtle"),
+				border: q("tag-default-text-border")
+			},
+			border: q("tag-default-border")
+		},
+		primary: {
+			bg: {
+				solid: q("tag-primary-bg-solid"),
+				solidHover: q("tag-primary-bg-solid-hover"),
+				subtle: q("tag-primary-bg-subtle"),
+				subtleHover: q("tag-primary-bg-subtle-hover"),
+				border: q("tag-primary-bg-border"),
+				borderHover: q("tag-primary-bg-border-hover")
+			},
+			text: {
+				solid: q("tag-primary-text-solid"),
+				subtle: q("tag-primary-text-subtle"),
+				border: q("tag-primary-text-border")
+			},
+			border: q("tag-primary-border")
+		},
+		success: {
+			bg: {
+				solid: q("tag-success-bg-solid"),
+				solidHover: q("tag-success-bg-solid-hover"),
+				subtle: q("tag-success-bg-subtle"),
+				subtleHover: q("tag-success-bg-subtle-hover"),
+				border: q("tag-success-bg-border"),
+				borderHover: q("tag-success-bg-border-hover")
+			},
+			text: {
+				solid: q("tag-success-text-solid"),
+				subtle: q("tag-success-text-subtle"),
+				border: q("tag-success-text-border")
+			},
+			border: q("tag-success-border")
+		},
+		warning: {
+			bg: {
+				solid: q("tag-warning-bg-solid"),
+				solidHover: q("tag-warning-bg-solid-hover"),
+				subtle: q("tag-warning-bg-subtle"),
+				subtleHover: q("tag-warning-bg-subtle-hover"),
+				border: q("tag-warning-bg-border"),
+				borderHover: q("tag-warning-bg-border-hover")
+			},
+			text: {
+				solid: q("tag-warning-text-solid"),
+				subtle: q("tag-warning-text-subtle"),
+				border: q("tag-warning-text-border")
+			},
+			border: q("tag-warning-border")
+		},
+		danger: {
+			bg: {
+				solid: q("tag-danger-bg-solid"),
+				solidHover: q("tag-danger-bg-solid-hover"),
+				subtle: q("tag-danger-bg-subtle"),
+				subtleHover: q("tag-danger-bg-subtle-hover"),
+				border: q("tag-danger-bg-border"),
+				borderHover: q("tag-danger-bg-border-hover")
+			},
+			text: {
+				solid: q("tag-danger-text-solid"),
+				subtle: q("tag-danger-text-subtle"),
+				border: q("tag-danger-text-border")
+			},
+			border: q("tag-danger-border")
+		}
+	},
+	action: {
+		primary: {
+			default: q("action-primary"),
+			hover: q("action-primary-hover"),
+			active: q("action-primary-active")
+		},
+		secondary: {
+			default: q("action-secondary"),
+			hover: q("action-secondary-hover"),
+			active: q("action-secondary-active")
+		},
+		danger: {
+			default: q("action-danger"),
+			hover: q("action-danger-hover"),
+			active: q("action-danger-active")
+		}
+	},
+	bg: {
+		surface: q("bg-surface"),
+		subtle: q("bg-subtle"),
+		secondarySubtle: q("bg-secondary-subtle"),
+		dangerSubtle: q("bg-danger-subtle")
+	},
+	text: {
+		primary: q("text-primary"),
+		secondary: q("text-secondary"),
+		secondaryAction: q("text-secondary-action"),
+		primaryAction: q("text-primary-action"),
+		muted: q("text-muted"),
+		danger: q("text-danger"),
+		inverse: q("text-inverse"),
+		disabled: q("text-disabled")
+	},
+	border: {
+		default: q("border-default"),
+		secondary: q("border-secondary"),
+		danger: q("border-danger"),
+		focus: q("border-focus")
+	},
+	disabled: {
+		bg: q("disabled-bg"),
+		border: q("disabled-border"),
+		text: q("disabled-text")
+	},
+	font: {
+		size: {
+			xs: q("font-size-xs"),
+			sm: q("font-size-sm"),
+			md: q("font-size-md"),
+			lg: q("font-size-lg"),
+			xl: q("font-size-xl")
+		},
+		weight: {
+			regular: q("font-weight-regular"),
+			medium: q("font-weight-medium"),
+			semibold: q("font-weight-semibold"),
+			bold: q("font-weight-bold")
+		},
+		lineHeight: {
+			16: q("line-height-16"),
+			18: q("line-height-18"),
+			20: q("line-height-20"),
+			22: q("line-height-22"),
+			24: q("line-height-24"),
+			28: q("line-height-28"),
+			32: q("line-height-32")
+		},
+		letterSpacing: {
+			tighter: q("letter-spacing-tighter"),
+			tight: q("letter-spacing-tight"),
+			normal: q("letter-spacing-normal"),
+			wide: q("letter-spacing-wide")
+		}
+	},
+	color: {
+		gray: {
+			50: q("color-gray-50"),
+			100: q("color-gray-100"),
+			200: q("color-gray-200"),
+			300: q("color-gray-300"),
+			400: q("color-gray-400"),
+			500: q("color-gray-500"),
+			600: q("color-gray-600"),
+			700: q("color-gray-700"),
+			800: q("color-gray-800"),
+			900: q("color-gray-900")
+		},
+		yellow: {
+			50: q("color-yellow-50"),
+			500: q("color-yellow-500")
+		}
+	}
+}, Pe = {
 	close: {
 		viewBox: "0 0 20 20",
 		paths: ["M16 5.20857L14.7914 4L10 8.79143L5.20857 4L4 5.20857L8.79143 10L4 14.7914L5.20857 16L10 11.2086L14.7914 16L16 14.7914L11.2086 10L16 5.20857Z"]
@@ -159,15 +640,19 @@ var Ce = {
 	campaign: {
 		viewBox: "0 0 20 20",
 		paths: ["M14.5 9.25V10.75H17.5V9.25H14.5ZM13 14.2075C13.72 14.74 14.6575 15.445 15.4 16C15.7 15.6025 16 15.1975 16.3 14.7925C15.5575 14.2375 14.62 13.5325 13.9 12.9925C13.6 13.3975 13.3 13.8025 13 14.2075ZM16.3 5.2C16 4.8025 15.7 4.3975 15.4 4C14.68 4.5325 13.7425 5.2375 13 5.8C13.3 6.205 13.6 6.6025 13.9 7.0075C14.6425 6.4525 15.58 5.7475 16.3 5.2ZM4 7.75C3.175 7.75 2.5 8.425 2.5 9.25V10.75C2.5 11.575 3.175 12.25 4 12.25H4.75V15.25H6.25V12.25H7L10.75 14.5V5.5L7 7.75H4ZM12.625 10C12.625 9.0025 12.19 8.1025 11.5 7.4875V12.505C12.19 11.8975 12.625 10.9975 12.625 10Z"]
+	},
+	"unfold-more": {
+		viewBox: "0 0 20 20",
+		paths: ["M10 3L6.5 6.5L7.5 7.5L10 5L12.5 7.5L13.5 6.5L10 3Z", "M10 17L13.5 13.5L12.5 12.5L10 15L7.5 12.5L6.5 13.5L10 17Z"]
 	}
-}, we = {
+}, Fe = {
 	xs: 10,
 	sm: 16,
 	md: 20,
 	lg: 24
-}, Y = _e(({ name: e, size: t = "md", color: n = "currentColor", style: r, ...i }, a) => {
-	let o = typeof t == "number" ? t : we[t], s = Ce[e];
-	return /* @__PURE__ */ V("svg", {
+}, J = e(({ name: e, size: t = "md", color: n = "currentColor", style: r, ...i }, a) => {
+	let o = typeof t == "number" ? t : Fe[t], s = Pe[e];
+	return /* @__PURE__ */ I("svg", {
 		ref: a,
 		width: o,
 		height: o,
@@ -180,17 +665,51 @@ var Ce = {
 			...r
 		},
 		...i,
-		children: s.paths.map((e, t) => /* @__PURE__ */ V("path", {
+		children: s.paths.map((e, t) => /* @__PURE__ */ I("path", {
 			d: e,
 			fillRule: "evenodd",
 			clipRule: "evenodd"
 		}, t))
 	});
 });
-Y.displayName = "Icon";
+J.displayName = "Icon";
+//#endregion
+//#region src/components/icon-button/IconButton.tsx
+var Ie = {
+	sm: 28,
+	md: 32,
+	lg: 36
+}, Le = {
+	sm: 16,
+	md: 20,
+	lg: 24
+}, Y = e(({ size: e = "md", icon: t, style: n, ...r }, i) => {
+	let a = Ie[e], o = Le[e];
+	return /* @__PURE__ */ I(l, {
+		ref: i,
+		type: "text",
+		icon: /* @__PURE__ */ I("span", {
+			style: {
+				display: "inline-flex",
+				fontSize: o,
+				lineHeight: 1
+			},
+			children: t
+		}),
+		style: {
+			width: a,
+			height: a,
+			padding: 0,
+			borderRadius: 8,
+			...n
+		},
+		...r
+	});
+});
+Y.displayName = "IconButton";
 //#endregion
 //#region src/components/alert-feed/AlertFeed.tsx
-var Te = {
+var Re = {
 	emergency: "red",
 	alarm: "orange",
 	warning: "gold",
@@ -200,39 +719,39 @@ var Te = {
 	alarm: "Alarm",
 	warning: "Warning",
 	caution: "Caution"
-}, Z = ({ title: e = "Threat Event Alarms", subtitle: t = "(Last 7 Days)", items: n = [], loading: r = !1, maxHeight: i = 620, activeFilter: a = "all", onFilterChange: o, onViewAll: c, onSettingsClick: u, viewAllLabel: d = "View All Threat Events", extra: f }) => {
-	let p = {
+}, Z = ({ title: e = "Threat Event Alarms", subtitle: t = "(Last 7 Days)", items: n = [], loading: r = !1, maxHeight: i = 620, activeFilter: a = "all", onFilterChange: o, onViewAll: s, onSettingsClick: c, viewAllLabel: u = "View All Threat Events", extra: d }) => {
+	let f = {
 		all: n.length,
 		emergency: n.filter((e) => e.severity === "emergency").length,
 		alarm: n.filter((e) => e.severity === "alarm").length,
 		warning: n.filter((e) => e.severity === "warning").length,
 		caution: n.filter((e) => e.severity === "caution").length
-	}, m = a === "all" ? n : n.filter((e) => e.severity === a), h = f ?? (u && /* @__PURE__ */ V(s, {
+	}, p = a === "all" ? n : n.filter((e) => e.severity === a), m = d ?? (c && /* @__PURE__ */ I(l, {
 		type: "text",
 		size: "small",
-		icon: /* @__PURE__ */ V(xe, {}),
-		onClick: u
+		icon: /* @__PURE__ */ I(Oe, {}),
+		onClick: c
 	}));
-	return /* @__PURE__ */ V(l, {
-		title: /* @__PURE__ */ H(D, {
+	return /* @__PURE__ */ I(ee, {
+		title: /* @__PURE__ */ L(b, {
 			size: 6,
 			children: [
-				/* @__PURE__ */ V(be, { style: { fontSize: 16 } }),
-				/* @__PURE__ */ V("span", {
+				/* @__PURE__ */ I(De, { style: { fontSize: 16 } }),
+				/* @__PURE__ */ I("span", {
 					style: {
 						fontSize: 14,
 						fontWeight: 700
 					},
 					children: e
 				}),
-				/* @__PURE__ */ V(B.Text, {
+				/* @__PURE__ */ I(N.Text, {
 					type: "secondary",
 					style: { fontSize: 12 },
 					children: t
 				})
 			]
 		}),
-		extra: h,
+		extra: m,
 		style: {
 			width: 400,
 			maxHeight: i,
@@ -248,25 +767,25 @@ var Te = {
 			gap: 12,
 			overflow: "hidden"
 		} },
-		actions: c && !r ? [/* @__PURE__ */ V(s, {
+		actions: s && !r ? [/* @__PURE__ */ I(l, {
 			type: "text",
 			size: "small",
-			onClick: c,
-			children: d
+			onClick: s,
+			children: u
 		}, "view-all")] : void 0,
-		children: r ? /* @__PURE__ */ V(w, {
+		children: r ? /* @__PURE__ */ I(_, {
 			active: !0,
 			paragraph: { rows: 6 }
-		}) : /* @__PURE__ */ H(ve, { children: [/* @__PURE__ */ V(D, {
+		}) : /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I(b, {
 			size: 4,
 			wrap: !0,
-			children: Object.entries(p).map(([e, t]) => /* @__PURE__ */ V(I.CheckableTag, {
+			children: Object.entries(f).map(([e, t]) => /* @__PURE__ */ I(k.CheckableTag, {
 				checked: a === e,
 				onChange: () => o?.(e),
 				style: { margin: 0 },
 				children: `${e === "all" ? "All" : X[e]} ${t}`
 			}, e))
-		}), /* @__PURE__ */ V("div", {
+		}), /* @__PURE__ */ I("div", {
 			style: {
 				flex: 1,
 				minHeight: 0,
@@ -275,10 +794,10 @@ var Te = {
 				flexDirection: "column",
 				gap: 6
 			},
-			children: m.length === 0 ? /* @__PURE__ */ V(_, {
+			children: p.length === 0 ? /* @__PURE__ */ I(oe, {
 				description: n.length === 0 ? "No alerts" : "No matching alerts",
 				style: { margin: "auto" }
-			}) : m.map((e) => /* @__PURE__ */ H("div", {
+			}) : p.map((e) => /* @__PURE__ */ L("div", {
 				style: {
 					padding: "10px 12px",
 					background: "#f9fafb",
@@ -288,23 +807,23 @@ var Te = {
 					gap: 4
 				},
 				children: [
-					/* @__PURE__ */ H("div", {
+					/* @__PURE__ */ L("div", {
 						style: {
 							display: "flex",
 							justifyContent: "space-between",
 							alignItems: "center"
 						},
-						children: [/* @__PURE__ */ V(I, {
-							color: Te[e.severity],
+						children: [/* @__PURE__ */ I(k, {
+							color: Re[e.severity],
 							style: { margin: 0 },
 							children: X[e.severity]
-						}), /* @__PURE__ */ V(B.Text, {
+						}), /* @__PURE__ */ I(N.Text, {
 							type: "secondary",
 							style: { fontSize: 12 },
 							children: e.time
 						})]
 					}),
-					/* @__PURE__ */ V("div", {
+					/* @__PURE__ */ I("div", {
 						style: {
 							fontSize: 14,
 							fontWeight: 500,
@@ -312,7 +831,7 @@ var Te = {
 						},
 						children: e.title
 					}),
-					/* @__PURE__ */ V(B.Text, {
+					/* @__PURE__ */ I(N.Text, {
 						type: "secondary",
 						style: { fontSize: 12 },
 						children: e.meta
@@ -327,7 +846,7 @@ Z.displayName = "AlertFeed";
 //#region src/components/file/File.tsx
 var Q = ({ state: e = "default", children: t, style: n, ...r }) => {
 	let i = e === "loading";
-	return /* @__PURE__ */ H(B.Link, {
+	return /* @__PURE__ */ L(N.Link, {
 		...r,
 		disabled: i,
 		style: {
@@ -338,7 +857,7 @@ var Q = ({ state: e = "default", children: t, style: n, ...r }) => {
 			lineHeight: "18px",
 			...n
 		},
-		children: [i ? /* @__PURE__ */ V(k, { size: "small" }) : /* @__PURE__ */ V(ye, {}), t]
+		children: [i ? /* @__PURE__ */ I(S, { size: "small" }) : /* @__PURE__ */ I(Ee, {}), t]
 	});
 };
 Q.displayName = "File";
@@ -366,7 +885,7 @@ function $({ columns: e, data: t, rowKey: n = "id", pagination: r = !1, pageSize
 			value: e
 		})), u.onFilter = (e, t) => String(t[l] ?? "") === e), u;
 	});
-	return /* @__PURE__ */ V(N, {
+	return /* @__PURE__ */ I(E, {
 		...c,
 		columns: l,
 		dataSource: t,
@@ -382,4 +901,4 @@ function $({ columns: e, data: t, rowKey: n = "id", pagination: r = !1, pageSize
 }
 $.displayName = "DataTable";
 //#endregion
-export { e as Alert, Z as AlertFeed, t as App, n as AutoComplete, r as Avatar, i as Badge, a as Breadcrumb, o as Button, c as Card, u as Checkbox, d as Col, f as ConfigProvider, J as CyturProvider, $ as DataTable, m as DatePicker, h as Descriptions, ee as Divider, te as Drawer, g as Dropdown, Q as File, v as Flex, y as Form, Y as Icon, b as Input, ne as InputNumber, re as Layout, ie as List, ae as Menu, oe as Modal, se as Pagination, ce as Popconfirm, le as Popover, ue as Progress, de as Radio, fe as Result, x as Row, S as Select, C as Skeleton, T as Slider, E as Space, O as Spin, A as Steps, j as Switch, M as Table, P as Tabs, F as Tag, L as TimePicker, R as Tooltip, z as Tree, pe as Typography, me as Upload, W as baseTheme, K as cscTheme, Se as defaultTheme, he as message, ge as notification, G as rmTheme, q as themes };
+export { n as Alert, Z as AlertFeed, r as App, i as AutoComplete, a as Avatar, o as Badge, s as Breadcrumb, c as Button, u as Card, d as Checkbox, f as Col, p as ConfigProvider, K as CyturProvider, $ as DataTable, te as DatePicker, ne as Descriptions, re as Divider, ie as Drawer, ae as Dropdown, Q as File, se as Flex, h as Form, J as Icon, Y as IconButton, g as Input, ce as InputNumber, le as Layout, ue as List, de as Menu, fe as Modal, pe as Pagination, me as Popconfirm, he as Popover, ge as Progress, _e as Radio, ve as Result, ye as Row, be as Select, xe as Skeleton, v as Slider, y as Space, x as Spin, C as Steps, w as Switch, T as Table, D as Tabs, O as Tag, A as TimePicker, j as Tooltip, M as Tree, Se as Typography, Ce as Upload, B as baseTheme, H as cscTheme, ke as defaultTheme, we as message, Te as notification, V as rmTheme, U as themes, Ne as tokens };

package/dist/types/components/icon/icons.d.ts

@@ -87,5 +87,9 @@ export declare const icons: {
         readonly viewBox: "0 0 20 20";
         readonly paths: ["M14.5 9.25V10.75H17.5V9.25H14.5ZM13 14.2075C13.72 14.74 14.6575 15.445 15.4 16C15.7 15.6025 16 15.1975 16.3 14.7925C15.5575 14.2375 14.62 13.5325 13.9 12.9925C13.6 13.3975 13.3 13.8025 13 14.2075ZM16.3 5.2C16 4.8025 15.7 4.3975 15.4 4C14.68 4.5325 13.7425 5.2375 13 5.8C13.3 6.205 13.6 6.6025 13.9 7.0075C14.6425 6.4525 15.58 5.7475 16.3 5.2ZM4 7.75C3.175 7.75 2.5 8.425 2.5 9.25V10.75C2.5 11.575 3.175 12.25 4 12.25H4.75V15.25H6.25V12.25H7L10.75 14.5V5.5L7 7.75H4ZM12.625 10C12.625 9.0025 12.19 8.1025 11.5 7.4875V12.505C12.19 11.8975 12.625 10.9975 12.625 10Z"];
     };
+    readonly 'unfold-more': {
+        readonly viewBox: "0 0 20 20";
+        readonly paths: ["M10 3L6.5 6.5L7.5 7.5L10 5L12.5 7.5L13.5 6.5L10 3Z", "M10 17L13.5 13.5L12.5 12.5L10 15L7.5 12.5L6.5 13.5L10 17Z"];
+    };
 };
 export type IconName = keyof typeof icons;

package/dist/types/components/icon-button/IconButton.d.ts

@@ -0,0 +1,17 @@
+import { type ButtonProps } from 'antd';
+import { type ReactNode } from 'react';
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+export interface IconButtonProps extends Omit<ButtonProps, 'size' | 'icon' | 'shape' | 'children'> {
+    size?: IconButtonSize;
+    icon: ReactNode;
+    /** 아이콘 전용 버튼이므로 접근성을 위해 권장 */
+    'aria-label'?: string;
+}
+/**
+ * Icon-only 버튼. antd Button을 wrapping해서 Figma 스펙(28/32/36)에 맞춤.
+ * 기본은 transparent, hover/active 시 회색 배경.
+ *
+ * Usage:
+ *   <IconButton icon={<SettingOutlined />} aria-label="Settings" />
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/index.d.ts

@@ -1,4 +1,5 @@
 export { Icon, type IconProps, type IconSize, type IconName } from './icon/Icon';
+export { IconButton, type IconButtonProps, type IconButtonSize } from './icon-button/IconButton';
 export { AlertFeed, type AlertFeedProps, type AlertItem, type AlertSeverity } from './alert-feed/AlertFeed';
 export { File, type FileProps, type FileState } from './file/File';
 export { DataTable, type DataTableProps, type DataTableColumn } from './data-table/DataTable';

package/dist/types/lib.d.ts

@@ -1,6 +1,8 @@
 export { baseTheme, rmTheme, cscTheme, defaultTheme, themes, type ThemeName, } from './theme';
-export { CyturProvider, type CyturProviderProps } from './theme/CyturProvider';
+export { CyturProvider, type CyturProviderProps, type ColorMode } from './theme/CyturProvider';
+export { tokens, type CyturTokens } from './theme/tokens';
 export { Icon, type IconProps, type IconSize, type IconName } from './components/icon/Icon';
+export { IconButton, type IconButtonProps, type IconButtonSize } from './components/icon-button/IconButton';
 export { AlertFeed, type AlertFeedProps, type AlertItem, type AlertSeverity } from './components/alert-feed/AlertFeed';
 export { File, type FileProps, type FileState } from './components/file/File';
 export { DataTable, type DataTableProps, type DataTableColumn } from './components/data-table/DataTable';

package/dist/types/theme/CyturProvider.d.ts

@@ -1,10 +1,14 @@
 import { type ReactNode } from 'react';
 import { type ThemeName } from './index';
+export type ColorMode = 'light' | 'dark';
 export interface CyturProviderProps {
+    /** 프로젝트 테마 (Primary color) */
     theme?: ThemeName;
+    /** 라이트/다크 모드 */
+    mode?: ColorMode;
     children: ReactNode;
 }
 export declare const CyturProvider: {
-    ({ theme, children }: CyturProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ theme, mode, children, }: CyturProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/types/theme/css-vars.d.ts

@@ -0,0 +1,12 @@
+export type TokenMap = Record<string, string>;
+export declare const lightVars: TokenMap;
+/**
+ * Dark mode tokens
+ * Figma "Button Token (Dark)" (3694:329)에서 추출한 값 + 도출된 base/text/border 값
+ *
+ * 주의: 다크 모드에서 action-primary가 teal → blue로 시프트됨 (Figma 디자인 결정).
+ * 추가 다크 스펙 (label/tag/etc) 받으면 여기 추가.
+ */
+export declare const darkVars: TokenMap;
+/** :root와 [data-mode="dark"] CSS 블록 생성 */
+export declare const generateCss: (light: TokenMap, dark: TokenMap) => string;

package/dist/types/theme/tokens.d.ts

@@ -0,0 +1,266 @@
+export declare const tokens: {
+    /** Label / Badge */
+    readonly label: {
+        readonly default: {
+            readonly bg: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+        readonly primary: {
+            readonly bg: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+        readonly info: {
+            readonly bg: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+        readonly success: {
+            readonly bg: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+        readonly warning: {
+            readonly bg: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+        readonly danger: {
+            readonly bg: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+    };
+    /** Tag */
+    readonly tag: {
+        readonly default: {
+            readonly bg: {
+                readonly solid: string;
+                readonly solidHover: string;
+                readonly subtle: string;
+                readonly subtleHover: string;
+                readonly border: string;
+                readonly borderHover: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+        readonly primary: {
+            readonly bg: {
+                readonly solid: string;
+                readonly solidHover: string;
+                readonly subtle: string;
+                readonly subtleHover: string;
+                readonly border: string;
+                readonly borderHover: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+        readonly success: {
+            readonly bg: {
+                readonly solid: string;
+                readonly solidHover: string;
+                readonly subtle: string;
+                readonly subtleHover: string;
+                readonly border: string;
+                readonly borderHover: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+        readonly warning: {
+            readonly bg: {
+                readonly solid: string;
+                readonly solidHover: string;
+                readonly subtle: string;
+                readonly subtleHover: string;
+                readonly border: string;
+                readonly borderHover: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+        readonly danger: {
+            readonly bg: {
+                readonly solid: string;
+                readonly solidHover: string;
+                readonly subtle: string;
+                readonly subtleHover: string;
+                readonly border: string;
+                readonly borderHover: string;
+            };
+            readonly text: {
+                readonly solid: string;
+                readonly subtle: string;
+                readonly border: string;
+            };
+            readonly border: string;
+        };
+    };
+    /** Action */
+    readonly action: {
+        readonly primary: {
+            readonly default: string;
+            readonly hover: string;
+            readonly active: string;
+        };
+        readonly secondary: {
+            readonly default: string;
+            readonly hover: string;
+            readonly active: string;
+        };
+        readonly danger: {
+            readonly default: string;
+            readonly hover: string;
+            readonly active: string;
+        };
+    };
+    /** Background */
+    readonly bg: {
+        readonly surface: string;
+        readonly subtle: string;
+        readonly secondarySubtle: string;
+        readonly dangerSubtle: string;
+    };
+    /** Text */
+    readonly text: {
+        readonly primary: string;
+        readonly secondary: string;
+        readonly secondaryAction: string;
+        readonly primaryAction: string;
+        readonly muted: string;
+        readonly danger: string;
+        readonly inverse: string;
+        readonly disabled: string;
+    };
+    /** Border */
+    readonly border: {
+        readonly default: string;
+        readonly secondary: string;
+        readonly danger: string;
+        readonly focus: string;
+    };
+    /** Disabled */
+    readonly disabled: {
+        readonly bg: string;
+        readonly border: string;
+        readonly text: string;
+    };
+    /** Font (typography) */
+    readonly font: {
+        readonly size: {
+            readonly xs: string;
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
+            readonly xl: string;
+        };
+        readonly weight: {
+            readonly regular: string;
+            readonly medium: string;
+            readonly semibold: string;
+            readonly bold: string;
+        };
+        readonly lineHeight: {
+            readonly '16': string;
+            readonly '18': string;
+            readonly '20': string;
+            readonly '22': string;
+            readonly '24': string;
+            readonly '28': string;
+            readonly '32': string;
+        };
+        readonly letterSpacing: {
+            readonly tighter: string;
+            readonly tight: string;
+            readonly normal: string;
+            readonly wide: string;
+        };
+    };
+    /** Color scale */
+    readonly color: {
+        readonly gray: {
+            readonly 50: string;
+            readonly 100: string;
+            readonly 200: string;
+            readonly 300: string;
+            readonly 400: string;
+            readonly 500: string;
+            readonly 600: string;
+            readonly 700: string;
+            readonly 800: string;
+            readonly 900: string;
+        };
+        readonly yellow: {
+            readonly 50: string;
+            readonly 500: string;
+        };
+    };
+};
+export type CyturTokens = typeof tokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cytur-design-system",
-  "version": "0.5.3",
+  "version": "0.7.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",