7k-design-system 1.2.0 → 1.3.0

package/dist/react/index.js

@@ -463,20 +463,20 @@ var E = {
 D.displayName = "Drawer";
 //#endregion
 //#region src/react/components/Toast.tsx
-var ee = {
+var O = {
 	default: "",
 	success: "toast-success",
 	error: "toast-error",
 	warning: "toast-warning",
 	info: "toast-info"
-}, O = {
+}, k = {
 	halftone: "toast-halftone",
 	texture: "toast-textured"
-}, k = t(({ children: e, variant: t = "default", onDismiss: n, texture: r, role: i = "status", className: a = "", style: o, ...s }, u) => {
+}, A = t(({ children: e, variant: t = "default", onDismiss: n, texture: r, role: i = "status", className: a = "", style: o, ...s }, u) => {
 	let d = [
 		"toast",
-		ee[t],
-		r ? O[r] || O.texture : "",
+		O[t],
+		r ? k[r] || k.texture : "",
 		a
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ l("div", {
@@ -503,10 +503,10 @@ var ee = {
 		]
 	});
 });
-k.displayName = "Toast";
+A.displayName = "Toast";
 //#endregion
 //#region src/react/components/Tooltip.tsx
-var te = {
+var ee = {
 	top: {
 		bottom: "100%",
 		left: "50%",
@@ -532,7 +532,7 @@ var te = {
 		marginRight: 8
 	}
 };
-function ne({ children: e, content: t, position: n = "top", className: r = "", style: i }) {
+function te({ children: e, content: t, position: n = "top", className: r = "", style: i }) {
 	let [a, u] = s(!1), d = o(null);
 	return /* @__PURE__ */ l("span", {
 		ref: d,
@@ -553,7 +553,7 @@ function ne({ children: e, content: t, position: n = "top", className: r = "", s
 				position: "absolute",
 				zIndex: "var(--z-overlay)",
 				whiteSpace: "nowrap",
-				...te[n]
+				...ee[n]
 			},
 			children: t
 		})]
@@ -561,16 +561,16 @@ function ne({ children: e, content: t, position: n = "top", className: r = "", s
 }
 //#endregion
 //#region src/react/components/Alert.tsx
-var A = {
+var j = {
 	default: "",
 	success: "alert-success",
 	warning: "alert-warning",
 	danger: "alert-danger",
 	info: "alert-info"
-}, j = t(({ children: e, variant: t = "default", onClose: n, role: r = "alert", className: i = "", style: a, ...o }, s) => {
+}, M = t(({ children: e, variant: t = "default", onClose: n, role: r = "alert", className: i = "", style: a, ...o }, s) => {
 	let u = [
 		"alert",
-		A[t],
+		j[t],
 		i
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ l("div", {
@@ -590,18 +590,18 @@ var A = {
 		})]
 	});
 });
-j.displayName = "Alert";
+M.displayName = "Alert";
 //#endregion
 //#region src/react/components/Tabs.tsx
-var M = e(null);
-function N() {
-	let e = r(M);
+var N = e(null);
+function P() {
+	let e = r(N);
 	if (!e) throw Error("Tab components must be used within Tabs");
 	return e;
 }
-function P({ children: e, defaultIndex: t = 0, index: n, onChange: r, className: i = "", style: o }) {
+function F({ children: e, defaultIndex: t = 0, index: n, onChange: r, className: i = "", style: o }) {
 	let [l, u] = s(t), d = n === void 0 ? l : n, f = a();
-	return /* @__PURE__ */ c(M.Provider, {
+	return /* @__PURE__ */ c(N.Provider, {
 		value: {
 			selectedIndex: d,
 			setSelectedIndex: (e) => {
@@ -616,7 +616,7 @@ function P({ children: e, defaultIndex: t = 0, index: n, onChange: r, className:
 		})
 	});
 }
-function F({ children: e, className: t = "", style: n }) {
+function I({ children: e, className: t = "", style: n }) {
 	return /* @__PURE__ */ c("div", {
 		className: `tab-list ${t}`,
 		role: "tablist",
@@ -624,8 +624,8 @@ function F({ children: e, className: t = "", style: n }) {
 		children: e
 	});
 }
-function I({ children: e, index: t, className: n = "", style: r }) {
-	let { selectedIndex: i, setSelectedIndex: a, baseId: o } = N(), s = t ?? 0, l = i === s;
+function L({ children: e, index: t, className: n = "", style: r }) {
+	let { selectedIndex: i, setSelectedIndex: a, baseId: o } = P(), s = t ?? 0, l = i === s;
 	return /* @__PURE__ */ c("button", {
 		role: "tab",
 		"aria-selected": l,
@@ -661,8 +661,8 @@ function I({ children: e, index: t, className: n = "", style: r }) {
 		children: e
 	});
 }
-function L({ children: e, index: t, className: n = "", style: r }) {
-	let { selectedIndex: i, baseId: a } = N(), o = t ?? 0;
+function R({ children: e, index: t, className: n = "", style: r }) {
+	let { selectedIndex: i, baseId: a } = P(), o = t ?? 0;
 	return i === o ? /* @__PURE__ */ c("div", {
 		role: "tabpanel",
 		id: `${a}-panel-${o}`,
@@ -675,7 +675,7 @@ function L({ children: e, index: t, className: n = "", style: r }) {
 }
 //#endregion
 //#region src/react/components/Nav.tsx
-var R = t(({ children: e, orientation: t = "horizontal", className: n = "", style: r, ...i }, a) => {
+var z = t(({ children: e, orientation: t = "horizontal", className: n = "", style: r, ...i }, a) => {
 	let o = [
 		"nav",
 		t === "vertical" ? "nav-vertical" : "nav-horizontal",
@@ -689,8 +689,8 @@ var R = t(({ children: e, orientation: t = "horizontal", className: n = "", styl
 		children: e
 	});
 });
-R.displayName = "Nav";
-var z = t(({ children: e, active: t = !1, href: n = "#", className: r = "", style: i, ...a }, o) => {
+z.displayName = "Nav";
+var B = t(({ children: e, active: t = !1, href: n = "#", className: r = "", style: i, ...a }, o) => {
 	let s = [
 		"nav-item",
 		t ? "active" : "",
@@ -705,10 +705,10 @@ var z = t(({ children: e, active: t = !1, href: n = "#", className: r = "", styl
 		children: e
 	});
 });
-z.displayName = "NavItem";
+B.displayName = "NavItem";
 //#endregion
 //#region src/react/components/Checkbox.tsx
-var B = t(({ label: e, indeterminate: t = !1, className: n = "", style: r, checked: i, ...a }, o) => {
+var V = t(({ label: e, indeterminate: t = !1, className: n = "", style: r, checked: i, ...a }, o) => {
 	let s = [
 		"checkbox",
 		i ? "checked" : "",
@@ -738,10 +738,10 @@ var B = t(({ label: e, indeterminate: t = !1, className: n = "", style: r, check
 		]
 	});
 });
-B.displayName = "Checkbox";
+V.displayName = "Checkbox";
 //#endregion
 //#region src/react/components/Radio.tsx
-var V = t(({ label: e, className: t = "", style: n, checked: r, ...i }, a) => {
+var H = t(({ label: e, className: t = "", style: n, checked: r, ...i }, a) => {
 	let o = [
 		"radio",
 		r ? "selected" : "",
@@ -769,10 +769,10 @@ var V = t(({ label: e, className: t = "", style: n, checked: r, ...i }, a) => {
 		]
 	});
 });
-V.displayName = "Radio";
+H.displayName = "Radio";
 //#endregion
 //#region src/react/components/Toggle.tsx
-var H = t(({ label: e, checked: t, onChange: n, className: r = "", style: i, ...a }, o) => {
+var U = t(({ label: e, checked: t, onChange: n, className: r = "", style: i, ...a }, o) => {
 	let s = [
 		"toggle",
 		t ? "on" : "",
@@ -803,27 +803,27 @@ var H = t(({ label: e, checked: t, onChange: n, className: r = "", style: i, ...
 		]
 	});
 });
-H.displayName = "Toggle";
+U.displayName = "Toggle";
 //#endregion
 //#region src/react/components/Select.tsx
-var U = t(({ children: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ */ c("select", {
+var W = t(({ children: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ */ c("select", {
 	ref: i,
 	className: `select-native ${t}`,
 	style: n,
 	...r,
 	children: e
 }));
-U.displayName = "Select";
-var W = t(({ className: e = "", style: t, ...n }, r) => /* @__PURE__ */ c("textarea", {
+W.displayName = "Select";
+var G = t(({ className: e = "", style: t, ...n }, r) => /* @__PURE__ */ c("textarea", {
 	ref: r,
 	className: `textarea ${e}`,
 	style: t,
 	...n
 }));
-W.displayName = "Textarea";
+G.displayName = "Textarea";
 //#endregion
 //#region src/react/components/TextureOverlay.tsx
-var G = {
+var K = {
 	halftone: "texture-halftone",
 	scanline: "texture-scanline",
 	noise: "texture-noise",
@@ -832,9 +832,9 @@ var G = {
 	"grid-dots": "texture-grid-dots",
 	texture: "texture-overlay"
 };
-function K({ children: e, texture: t = "halftone", opacity: n, animate: r = !1, className: i = "", style: a }) {
+function q({ children: e, texture: t = "halftone", opacity: n, animated: r = !1, className: i = "", style: a }) {
 	let o = [
-		G[t === !1 || t === null ? "texture" : t] || G.texture,
+		K[t === !1 || t === null ? "texture" : t] || K.texture,
 		r ? "texture-animated" : "",
 		i
 	].filter(Boolean).join(" ");
@@ -849,42 +849,42 @@ function K({ children: e, texture: t = "halftone", opacity: n, animate: r = !1,
 }
 //#endregion
 //#region src/react/components/IsometricBackground.tsx
-var q = {
+var J = {
 	grid: {
-		static: "isometric-grid",
-		animated: "isometric-grid-animated"
+		static: "iso-grid",
+		animated: "iso-grid-animated"
 	},
 	"grid-dense": {
-		static: "isometric-grid-dense",
-		animated: "isometric-grid-dense-animated"
+		static: "iso-grid-dense",
+		animated: "iso-grid-dense-animated"
 	},
 	cubes: {
-		static: "isometric-cubes",
-		animated: "isometric-cubes-animated"
+		static: "iso-cubes",
+		animated: "iso-cubes-animated"
 	},
 	terrain: {
-		static: "isometric-terrain",
-		animated: "isometric-terrain-animated"
+		static: "iso-terrain",
+		animated: "iso-terrain-animated"
 	},
 	pipes: {
-		static: "isometric-pipes",
-		animated: "isometric-pipes-animated"
+		static: "iso-pipes",
+		animated: "iso-pipes-animated"
 	},
 	hex: {
-		static: "isometric-hex",
-		animated: "isometric-hex-animated"
+		static: "iso-hex",
+		animated: "iso-hex-animated"
 	},
 	city: {
-		static: "isometric-city",
-		animated: "isometric-city-animated"
+		static: "iso-city",
+		animated: "iso-city-animated"
 	},
 	wave: {
-		static: "isometric-wave",
-		animated: "isometric-wave-animated"
+		static: "iso-wave",
+		animated: "iso-wave-animated"
 	}
 };
-function J({ children: e, pattern: t = "grid", animated: n = !1, className: r = "", style: i }) {
-	let a = q[t] || q.grid, o = [
+function Y({ children: e, pattern: t = "grid", animated: n = !1, className: r = "", style: i }) {
+	let a = J[t] || J.grid, o = [
 		a.static,
 		n ? a.animated : "",
 		r
@@ -897,7 +897,7 @@ function J({ children: e, pattern: t = "grid", animated: n = !1, className: r =
 }
 //#endregion
 //#region src/react/components/Spinner.tsx
-function Y({ size: e = "md", className: t = "", style: n }) {
+function X({ size: e = "md", className: t = "", style: n }) {
 	let r = [
 		"spinner",
 		e === "sm" ? "spinner-sm" : e === "lg" ? "spinner-lg" : "",
@@ -912,7 +912,7 @@ function Y({ size: e = "md", className: t = "", style: n }) {
 }
 //#endregion
 //#region src/react/components/Skeleton.tsx
-function X({ width: e, height: t = 16, className: n = "", style: r }) {
+function Z({ width: e, height: t = 16, className: n = "", style: r }) {
 	let i = ["skeleton", n].filter(Boolean).join(" ");
 	return /* @__PURE__ */ c("span", {
 		"aria-hidden": "true",
@@ -926,7 +926,7 @@ function X({ width: e, height: t = 16, className: n = "", style: r }) {
 }
 //#endregion
 //#region src/react/components/Avatar.tsx
-function re({ src: e, alt: t = "", initials: n, size: r = "md", circle: i = !1, className: a = "", style: o }) {
+function ne({ src: e, alt: t = "", initials: n, size: r = "md", circle: i = !1, className: a = "", style: o }) {
 	let s = [
 		"avatar",
 		r === "sm" ? "avatar-sm" : r === "lg" ? "avatar-lg" : "",
@@ -944,7 +944,7 @@ function re({ src: e, alt: t = "", initials: n, size: r = "md", circle: i = !1,
 }
 //#endregion
 //#region src/react/components/Progress.tsx
-function ie({ value: e, max: t = 100, variant: n, className: r = "", style: i }) {
+function re({ value: e, max: t = 100, variant: n, className: r = "", style: i }) {
 	let a = Math.min(100, Math.max(0, e / t * 100)), o = [
 		"progress",
 		n ? `progress-${n}` : "",
@@ -965,25 +965,25 @@ function ie({ value: e, max: t = 100, variant: n, className: r = "", style: i })
 }
 //#endregion
 //#region src/react/theme/projects.ts
-var ae = [
+var ie = [
 	"7kgroup",
 	"7kminato",
 	"inari"
-], oe = "7k-project";
-function se(e) {
-	return typeof e == "string" && ae.includes(e);
+], ae = "7k-project";
+function oe(e) {
+	return typeof e == "string" && ie.includes(e);
 }
 //#endregion
 //#region src/react/theme/ProjectProvider.tsx
-var Z = e({
+var Q = e({
 	project: "7kgroup",
 	setProject: () => {}
 });
-function Q({ children: e, defaultProject: t = "7kgroup", storageKey: r = oe }) {
+function se({ children: e, defaultProject: t = "7kgroup", storageKey: r = ae }) {
 	let [a, o] = s(() => {
 		if (typeof window > "u") return t;
 		let e = localStorage.getItem(r);
-		return se(e) ? e : t;
+		return oe(e) ? e : t;
 	});
 	i(() => {
 		document.documentElement.setAttribute("data-project", a), localStorage.setItem(r, a);
@@ -991,7 +991,7 @@ function Q({ children: e, defaultProject: t = "7kgroup", storageKey: r = oe }) {
 	let l = n((e) => {
 		o(e);
 	}, []);
-	return /* @__PURE__ */ c(Z.Provider, {
+	return /* @__PURE__ */ c(Q.Provider, {
 		value: {
 			project: a,
 			setProject: l
@@ -1002,7 +1002,7 @@ function Q({ children: e, defaultProject: t = "7kgroup", storageKey: r = oe }) {
 //#endregion
 //#region src/react/theme/useProject.ts
 function $() {
-	return r(Z);
+	return r(Q);
 }
 //#endregion
 //#region src/react/components/ProjectIcon.tsx
@@ -1160,9 +1160,104 @@ function fe({ options: e, value: t, onChange: n, placeholder: r = "Select…", d
 	});
 }
 //#endregion
+//#region src/react/components/Stat.tsx
+function pe({ value: e, label: t, trend: n, accent: r = !1, status: i, className: a = "", style: o }) {
+	let s = [
+		"stat",
+		r ? "stat-accent" : "",
+		i ? `stat-${i}` : "",
+		a
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l("div", {
+		className: s,
+		style: o,
+		children: [
+			/* @__PURE__ */ c("span", {
+				className: "stat-value",
+				children: e
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "stat-label",
+				children: t
+			}),
+			n != null && /* @__PURE__ */ c("span", {
+				className: "stat-trend",
+				children: n
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/components/EmptyState.tsx
+function me({ title: e, body: t, action: n, icon: r, className: i = "", style: a }) {
+	let o = ["empty", i].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l("div", {
+		className: o,
+		style: a,
+		children: [
+			r == null ? null : /* @__PURE__ */ c("span", {
+				className: "empty-icon",
+				children: r
+			}),
+			/* @__PURE__ */ c("h3", {
+				className: "empty-title",
+				children: e
+			}),
+			t != null && /* @__PURE__ */ c("span", {
+				className: "empty-text",
+				children: t
+			}),
+			n != null && /* @__PURE__ */ c("span", {
+				className: "empty-action",
+				children: n
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/components/DataTable.tsx
+function he({ columns: e, rows: t, rowKey: n, loading: r = !1, skeletonRows: i = 6, empty: a, onSort: o, sortKey: s, sortDirection: u, pagination: d, className: f = "", style: p }) {
+	let m = (e, t) => typeof n == "function" ? n(e, t) : String(e[n]);
+	if ((typeof process > "u" || process.env.NODE_ENV !== "production") && !r) {
+		let e = /* @__PURE__ */ new Set();
+		t.forEach((t, n) => {
+			let r = m(t, n);
+			(r === "undefined" || e.has(r)) && console.warn(`DataTable: duplicate or missing rowKey "${r}" at row ${n}`), e.add(r);
+		});
+	}
+	let h = ["datatable", f].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l("div", {
+		className: h,
+		style: p,
+		children: [/* @__PURE__ */ l("table", {
+			className: "table",
+			children: [/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ c("tr", { children: e.map((e) => /* @__PURE__ */ c("th", {
+				style: e.width == null ? void 0 : { width: e.width },
+				"aria-sort": e.sortable && o && s === e.key ? u === "desc" ? "descending" : "ascending" : void 0,
+				children: e.sortable && o ? /* @__PURE__ */ l("button", {
+					type: "button",
+					className: "table-sort",
+					onClick: () => o(e.key),
+					children: [e.label, s === e.key ? u === "desc" ? " ↓" : " ↑" : ""]
+				}) : e.label
+			}, e.key)) }) }), /* @__PURE__ */ l("tbody", { children: [r ? Array.from({ length: i }, (t, n) => /* @__PURE__ */ c("tr", { children: e.map((e) => /* @__PURE__ */ c("td", { children: /* @__PURE__ */ c(Z, { height: 12 }) }, e.key)) }, `skeleton-${n}`)) : t.map((t, n) => /* @__PURE__ */ c("tr", { children: e.map((e) => /* @__PURE__ */ c("td", {
+				className: e.mono ? "mono" : void 0,
+				"data-label": e.mobileLabel ?? (typeof e.label == "string" ? e.label : void 0),
+				children: e.render ? e.render(t, n) : String(t[e.key] ?? "")
+			}, e.key)) }, m(t, n))), !r && t.length === 0 && a != null && /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", {
+				colSpan: e.length,
+				children: a
+			}) })] })]
+		}), d != null && /* @__PURE__ */ c("div", {
+			className: "datatable-pagination",
+			children: d
+		})]
+	});
+}
+//#endregion
 //#region src/react/theme/ThemeProvider.tsx
-var pe = "7k-theme";
-function me({ children: e, defaultTheme: t = "dark", storageKey: r = pe }) {
+var ge = "7k-theme";
+function _e({ children: e, defaultTheme: t = "dark", storageKey: r = ge }) {
 	let [a, o] = s(() => {
 		if (typeof window > "u") return t;
 		let e = localStorage.getItem(r);
@@ -1186,4 +1281,4 @@ function me({ children: e, defaultTheme: t = "dark", storageKey: r = pe }) {
 	});
 }
 //#endregion
-export { j as Alert, re as Avatar, f as Badge, u as Button, y as Card, x as CardBody, b as CardHeader, B as Checkbox, D as Drawer, m as Icon, d as Input, J as IsometricBackground, fe as Listbox, C as Modal, T as ModalFooter, w as ModalHeader, R as Nav, z as NavItem, ie as Progress, Z as ProjectContext, de as ProjectIcon, Q as ProjectProvider, V as Radio, U as Select, X as Skeleton, Y as Spinner, I as Tab, F as TabList, L as TabPanel, P as Tabs, W as Textarea, K as TextureOverlay, h as ThemeContext, me as ThemeProvider, _ as ThemeToggle, k as Toast, H as Toggle, ne as Tooltip, $ as useProject, g as useTheme };
+export { M as Alert, ne as Avatar, f as Badge, u as Button, y as Card, x as CardBody, b as CardHeader, V as Checkbox, he as DataTable, D as Drawer, me as EmptyState, m as Icon, d as Input, Y as IsometricBackground, fe as Listbox, C as Modal, T as ModalFooter, w as ModalHeader, z as Nav, B as NavItem, re as Progress, Q as ProjectContext, de as ProjectIcon, se as ProjectProvider, H as Radio, W as Select, Z as Skeleton, X as Spinner, pe as Stat, L as Tab, I as TabList, R as TabPanel, F as Tabs, G as Textarea, q as TextureOverlay, h as ThemeContext, _e as ThemeProvider, _ as ThemeToggle, A as Toast, U as Toggle, te as Tooltip, $ as useProject, g as useTheme };

package/dist/react/types.d.ts

@@ -105,7 +105,7 @@ export interface TextareaProps extends BaseProps, Omit<TextareaHTMLAttributes<HT
 export interface TextureOverlayProps extends BaseProps {
     texture?: Texture;
     opacity?: number;
-    animate?: boolean;
+    animated?: boolean;
 }
 export interface IsometricBackgroundProps extends BaseProps {
     pattern?: IsometricPattern;
@@ -130,6 +130,42 @@ export interface ProgressProps extends BaseProps {
     max?: number;
     variant?: 'accent' | 'danger';
 }
+export interface StatProps extends BaseProps {
+    value: ReactNode;
+    label: ReactNode;
+    trend?: ReactNode;
+    accent?: boolean;
+    status?: 'success' | 'warning' | 'danger' | 'neutral';
+}
+export interface EmptyStateProps extends BaseProps {
+    title: ReactNode;
+    body?: ReactNode;
+    action?: ReactNode;
+    icon?: ReactNode;
+}
+export interface DataTableColumn<Row> {
+    key: string;
+    label: ReactNode;
+    /** Plain-text label for the mobile stacked layout (`data-label`). Required
+     * when `label` is not a string, otherwise mobile cells show no label. */
+    mobileLabel?: string;
+    mono?: boolean;
+    sortable?: boolean;
+    width?: number | string;
+    render?: (row: Row, index: number) => ReactNode;
+}
+export interface DataTableProps<Row> extends BaseProps {
+    columns: DataTableColumn<Row>[];
+    rows: Row[];
+    rowKey: keyof Row | ((row: Row, index: number) => string);
+    loading?: boolean;
+    skeletonRows?: number;
+    empty?: ReactNode;
+    onSort?: (key: string) => void;
+    sortKey?: string;
+    sortDirection?: 'asc' | 'desc';
+    pagination?: ReactNode;
+}
 export interface ListboxOption {
     value: string;
     label: string;

package/dist/textures.css

@@ -1 +1 @@
-.scanline{position:relative;overflow:hidden}.scanline:after{content:"";background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--texture-03) 2px,var(--texture-03) 4px);pointer-events:none;z-index:1;animation:8s linear infinite scanline-scroll;position:absolute;inset:0}.scanline-fast{position:relative;overflow:hidden}.scanline-fast:after{content:"";background:repeating-linear-gradient(0deg,transparent,transparent 1px,var(--texture-05) 1px,var(--texture-05) 2px);pointer-events:none;z-index:1;animation:3s linear infinite scanline-scroll;position:absolute;inset:0}.halftone-sm{background-image:radial-gradient(var(--texture-08) .5px,transparent .5px);background-size:4px 4px}.halftone-md{background-image:radial-gradient(var(--texture-05) 1px,transparent 1px);background-size:6px 6px}.halftone-lg{background-image:radial-gradient(var(--texture-04) 1.5px,transparent 1.5px);background-size:10px 10px}.halftone-accent{background-image:radial-gradient(var(--brand-primary) 1px,transparent 1px);background-size:8px 8px}.dot-matrix{background-image:radial-gradient(var(--texture-07) .5px,transparent .5px);background-size:6px 6px}.dot-matrix-dense{background-image:radial-gradient(var(--texture-09) .5px,transparent .5px);background-size:3px 3px}.dot-matrix-sparse{background-image:radial-gradient(var(--texture-04) 1px,transparent 1px);background-size:12px 12px}.diagonal-stripes{background:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--texture-04) 6px,var(--texture-04) 7px)}.diagonal-stripes-dense{background:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--texture-08) 3px,var(--texture-08) 4px)}.diagonal-stripes-negative{background:repeating-linear-gradient(45deg,var(--color-ink),var(--color-ink) 6px,var(--color-paper) 6px,var(--color-paper) 7px)}.stripes-h{background:repeating-linear-gradient(0deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px)}.stripes-h-dense{background:repeating-linear-gradient(0deg,transparent,transparent 4px,var(--texture-08) 4px,var(--texture-08) 5px)}.stripes-v{background:repeating-linear-gradient(90deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px)}.stripes-v-dense{background:repeating-linear-gradient(90deg,transparent,transparent 4px,var(--texture-08) 4px,var(--texture-08) 5px)}.crosshatch{background-image:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--texture-04) 6px,var(--texture-04) 7px),repeating-linear-gradient(-45deg,transparent,transparent 6px,var(--texture-04) 6px,var(--texture-04) 7px)}.crosshatch-dense{background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--texture-08) 3px,var(--texture-08) 4px),repeating-linear-gradient(-45deg,transparent,transparent 3px,var(--texture-08) 3px,var(--texture-08) 4px)}.checkerboard{background-image:linear-gradient(45deg,var(--texture-04) 25%,transparent 25%),linear-gradient(-45deg,var(--texture-04) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--texture-04) 75%),linear-gradient(-45deg,transparent 75%,var(--texture-04) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.checkerboard-contrast{background-image:linear-gradient(45deg,var(--color-ink) 25%,transparent 25%),linear-gradient(-45deg,var(--color-ink) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-ink) 75%),linear-gradient(-45deg,transparent 75%,var(--color-ink) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.noise{position:relative}.noise:before{content:"";background-image:var(--texture-noise-svg);pointer-events:none;opacity:.5;z-index:1;background-size:128px 128px;position:absolute;inset:0}.noise-heavy:before{opacity:.12}.vignette-ink{position:relative}.vignette-ink:after{content:"";background:radial-gradient(ellipse at center,transparent 50%,color-mix(in srgb,var(--color-ink) 80%,transparent) 100%);pointer-events:none;z-index:1;position:absolute;inset:0}.vignette-ink-sharp:after{background:radial-gradient(ellipse at center,transparent 30%,var(--color-ink) 100%)}.waves{background:radial-gradient(ellipse at 50% 0,transparent 60%,var(--texture-02) 60%,var(--texture-02) 61%),radial-gradient(ellipse at 50% 0,transparent 50%,var(--texture-02) 50%,var(--texture-02) 51%),radial-gradient(ellipse at 50% 0,transparent 40%,var(--texture-03) 40%,var(--texture-03) 41%),radial-gradient(ellipse at 50% 0,transparent 30%,var(--texture-02) 30%,var(--texture-02) 31%),radial-gradient(ellipse at 50% 0,transparent 20%,var(--texture-03) 20%,var(--texture-03) 21%),radial-gradient(ellipse at 50% 0,transparent 10%,var(--texture-02) 10%,var(--texture-02) 11%);background-position:0 0,0 10px,0 20px,0 30px,0 40px,0 50px;background-size:100px 80px,100px 80px,100px 80px,100px 80px,100px 80px,100px 80px}.waves-dense{background:radial-gradient(ellipse at 50% 0,transparent 65%,var(--texture-05) 65%,var(--texture-05) 66%),radial-gradient(ellipse at 50% 0,transparent 55%,var(--texture-04) 55%,var(--texture-04) 56%),radial-gradient(ellipse at 50% 0,transparent 45%,var(--texture-05) 45%,var(--texture-05) 46%),radial-gradient(ellipse at 50% 0,transparent 35%,var(--texture-04) 35%,var(--texture-04) 36%),radial-gradient(ellipse at 50% 0,transparent 25%,var(--texture-05) 25%,var(--texture-05) 26%),radial-gradient(ellipse at 50% 0,transparent 15%,var(--texture-04) 15%,var(--texture-04) 16%);background-position:0 0,0 8px,0 16px,0 24px,0 32px,0 40px;background-size:60px 50px,60px 50px,60px 50px,60px 50px,60px 50px,60px 50px}.concentric-rings{background:radial-gradient(circle at 50% 50%,transparent 10%,var(--texture-03) 10%,var(--texture-03) 11%,transparent 11%),radial-gradient(circle at 50% 50%,transparent 20%,var(--texture-03) 20%,var(--texture-03) 21%,transparent 21%),radial-gradient(circle at 50% 50%,transparent 30%,var(--texture-04) 30%,var(--texture-04) 31%,transparent 31%),radial-gradient(circle at 50% 50%,transparent 40%,var(--texture-03) 40%,var(--texture-03) 41%,transparent 41%),radial-gradient(circle at 50% 50%,transparent 50%,var(--texture-03) 50%,var(--texture-03) 51%,transparent 51%),radial-gradient(circle at 50% 50%,transparent 60%,var(--texture-02) 60%,var(--texture-02) 61%);background-position:50%;background-size:200px 200px}.concentric-rings-dense{background:radial-gradient(circle at 50% 50%,transparent 8%,var(--texture-06) 8%,var(--texture-06) 9%,transparent 9%),radial-gradient(circle at 50% 50%,transparent 16%,var(--texture-05) 16%,var(--texture-05) 17%,transparent 17%),radial-gradient(circle at 50% 50%,transparent 24%,var(--texture-06) 24%,var(--texture-06) 25%,transparent 25%),radial-gradient(circle at 50% 50%,transparent 32%,var(--texture-05) 32%,var(--texture-05) 33%,transparent 33%),radial-gradient(circle at 50% 50%,transparent 40%,var(--texture-06) 40%,var(--texture-06) 41%,transparent 41%),radial-gradient(circle at 50% 50%,transparent 48%,var(--texture-05) 48%,var(--texture-05) 49%);background-position:50%;background-size:120px 120px}.grid-dots{background-image:radial-gradient(var(--texture-06) 1px,transparent 1px),radial-gradient(var(--texture-06) 1px,transparent 1px);background-position:0 0,8px 8px;background-size:16px 16px,16px 16px}.grid-dots-dense{background-image:radial-gradient(var(--texture-09) .8px,transparent .8px),radial-gradient(var(--texture-09) .8px,transparent .8px);background-position:0 0,4px 4px;background-size:8px 8px,8px 8px}.grid-dots-accent{background-image:radial-gradient(color-mix(in srgb,var(--magenta-500) 15%,transparent) 1px,transparent 1px),radial-gradient(color-mix(in srgb,var(--magenta-500) 15%,transparent) 1px,transparent 1px);background-position:0 0,10px 10px;background-size:20px 20px,20px 20px}.rain{background:repeating-linear-gradient(20deg,transparent,transparent 3px,var(--texture-02) 3px,var(--texture-02) 4px);background-size:8px 20px}.rain-dense{background:repeating-linear-gradient(20deg,transparent,transparent 2px,var(--texture-05) 2px,var(--texture-05) 3px);background-size:6px 12px}.rain-angled{background:repeating-linear-gradient(35deg,transparent,transparent 3px,var(--texture-03) 3px,var(--texture-03) 4px),repeating-linear-gradient(-35deg,transparent,transparent 6px,var(--texture-02) 6px,var(--texture-02) 7px);background-size:12px 24px}.starburst{background:repeating-conic-gradient(var(--texture-03) 0,var(--texture-03) 0.5%,transparent 0.5%,transparent 5%);background-size:100% 100%}.starburst-dense{background:repeating-conic-gradient(var(--texture-06) 0,var(--texture-06) 0.3%,transparent 0.3%,transparent 3%)}.starburst-accent{background:repeating-conic-gradient(color-mix(in srgb,var(--brand-primary) 12%,transparent) 0,color-mix(in srgb,var(--brand-primary) 12%,transparent) 0.5%,transparent 0.5%,transparent 4%)}.zigzag{background:repeating-linear-gradient(75deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px),repeating-linear-gradient(-75deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px);background-size:24px 12px}.zigzag-dense{background:repeating-linear-gradient(75deg,transparent,transparent 4px,var(--texture-07) 4px,var(--texture-07) 5px),repeating-linear-gradient(-75deg,transparent,transparent 4px,var(--texture-07) 4px,var(--texture-07) 5px);background-size:12px 6px}.zigzag-horizontal{background:repeating-linear-gradient(165deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px),repeating-linear-gradient(-165deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px);background-size:24px 12px}.separator-solid{background:var(--texture-solid);opacity:.25;border:none;width:100%;height:1px;margin:0}.separator-thick{opacity:.4;height:2px}.separator-dashed{border-top:2px dashed var(--texture-solid);opacity:.3;background:0 0;height:0}.separator-dotted{border-top:2px dotted var(--texture-solid);opacity:.25;background:0 0;height:0}
+.bg-scanline{position:relative;overflow:hidden}.bg-scanline:after{content:"";background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--texture-03) 2px,var(--texture-03) 4px);pointer-events:none;z-index:1;animation:8s linear infinite scanline-scroll;position:absolute;inset:0}.bg-scanline-fast{position:relative;overflow:hidden}.bg-scanline-fast:after{content:"";background:repeating-linear-gradient(0deg,transparent,transparent 1px,var(--texture-05) 1px,var(--texture-05) 2px);pointer-events:none;z-index:1;animation:3s linear infinite scanline-scroll;position:absolute;inset:0}.bg-halftone-sm{background-image:radial-gradient(var(--texture-08) .5px,transparent .5px);background-size:4px 4px}.bg-halftone-md{background-image:radial-gradient(var(--texture-05) 1px,transparent 1px);background-size:6px 6px}.bg-halftone-lg{background-image:radial-gradient(var(--texture-04) 1.5px,transparent 1.5px);background-size:10px 10px}.bg-halftone-accent{background-image:radial-gradient(var(--brand-primary) 1px,transparent 1px);background-size:8px 8px}.bg-dot-matrix{background-image:radial-gradient(var(--texture-07) .5px,transparent .5px);background-size:6px 6px}.bg-dot-matrix-dense{background-image:radial-gradient(var(--texture-09) .5px,transparent .5px);background-size:3px 3px}.bg-dot-matrix-sparse{background-image:radial-gradient(var(--texture-04) 1px,transparent 1px);background-size:12px 12px}.bg-diagonal-stripes{background:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--texture-04) 6px,var(--texture-04) 7px)}.bg-diagonal-stripes-dense{background:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--texture-08) 3px,var(--texture-08) 4px)}.bg-diagonal-stripes-negative{background:repeating-linear-gradient(45deg,var(--color-ink),var(--color-ink) 6px,var(--color-paper) 6px,var(--color-paper) 7px)}.bg-stripes-h{background:repeating-linear-gradient(0deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px)}.bg-stripes-h-dense{background:repeating-linear-gradient(0deg,transparent,transparent 4px,var(--texture-08) 4px,var(--texture-08) 5px)}.bg-stripes-v{background:repeating-linear-gradient(90deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px)}.bg-stripes-v-dense{background:repeating-linear-gradient(90deg,transparent,transparent 4px,var(--texture-08) 4px,var(--texture-08) 5px)}.bg-crosshatch{background-image:repeating-linear-gradient(45deg,transparent,transparent 6px,var(--texture-04) 6px,var(--texture-04) 7px),repeating-linear-gradient(-45deg,transparent,transparent 6px,var(--texture-04) 6px,var(--texture-04) 7px)}.bg-crosshatch-dense{background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--texture-08) 3px,var(--texture-08) 4px),repeating-linear-gradient(-45deg,transparent,transparent 3px,var(--texture-08) 3px,var(--texture-08) 4px)}.bg-checkerboard{background-image:linear-gradient(45deg,var(--texture-04) 25%,transparent 25%),linear-gradient(-45deg,var(--texture-04) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--texture-04) 75%),linear-gradient(-45deg,transparent 75%,var(--texture-04) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.bg-checkerboard-contrast{background-image:linear-gradient(45deg,var(--color-ink) 25%,transparent 25%),linear-gradient(-45deg,var(--color-ink) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-ink) 75%),linear-gradient(-45deg,transparent 75%,var(--color-ink) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.bg-noise{position:relative}.bg-noise:before{content:"";background-image:var(--texture-noise-svg);pointer-events:none;opacity:.5;z-index:1;background-size:128px 128px;position:absolute;inset:0}.bg-noise-heavy:before{opacity:.12}.bg-vignette-ink{position:relative}.bg-vignette-ink:after{content:"";background:radial-gradient(ellipse at center,transparent 50%,color-mix(in srgb,var(--color-ink) 80%,transparent) 100%);pointer-events:none;z-index:1;position:absolute;inset:0}.bg-vignette-ink-sharp:after{background:radial-gradient(ellipse at center,transparent 30%,var(--color-ink) 100%)}.bg-waves{background:radial-gradient(ellipse at 50% 0,transparent 60%,var(--texture-02) 60%,var(--texture-02) 61%),radial-gradient(ellipse at 50% 0,transparent 50%,var(--texture-02) 50%,var(--texture-02) 51%),radial-gradient(ellipse at 50% 0,transparent 40%,var(--texture-03) 40%,var(--texture-03) 41%),radial-gradient(ellipse at 50% 0,transparent 30%,var(--texture-02) 30%,var(--texture-02) 31%),radial-gradient(ellipse at 50% 0,transparent 20%,var(--texture-03) 20%,var(--texture-03) 21%),radial-gradient(ellipse at 50% 0,transparent 10%,var(--texture-02) 10%,var(--texture-02) 11%);background-position:0 0,0 10px,0 20px,0 30px,0 40px,0 50px;background-size:100px 80px,100px 80px,100px 80px,100px 80px,100px 80px,100px 80px}.bg-waves-dense{background:radial-gradient(ellipse at 50% 0,transparent 65%,var(--texture-05) 65%,var(--texture-05) 66%),radial-gradient(ellipse at 50% 0,transparent 55%,var(--texture-04) 55%,var(--texture-04) 56%),radial-gradient(ellipse at 50% 0,transparent 45%,var(--texture-05) 45%,var(--texture-05) 46%),radial-gradient(ellipse at 50% 0,transparent 35%,var(--texture-04) 35%,var(--texture-04) 36%),radial-gradient(ellipse at 50% 0,transparent 25%,var(--texture-05) 25%,var(--texture-05) 26%),radial-gradient(ellipse at 50% 0,transparent 15%,var(--texture-04) 15%,var(--texture-04) 16%);background-position:0 0,0 8px,0 16px,0 24px,0 32px,0 40px;background-size:60px 50px,60px 50px,60px 50px,60px 50px,60px 50px,60px 50px}.bg-concentric-rings{background:radial-gradient(circle at 50% 50%,transparent 10%,var(--texture-03) 10%,var(--texture-03) 11%,transparent 11%),radial-gradient(circle at 50% 50%,transparent 20%,var(--texture-03) 20%,var(--texture-03) 21%,transparent 21%),radial-gradient(circle at 50% 50%,transparent 30%,var(--texture-04) 30%,var(--texture-04) 31%,transparent 31%),radial-gradient(circle at 50% 50%,transparent 40%,var(--texture-03) 40%,var(--texture-03) 41%,transparent 41%),radial-gradient(circle at 50% 50%,transparent 50%,var(--texture-03) 50%,var(--texture-03) 51%,transparent 51%),radial-gradient(circle at 50% 50%,transparent 60%,var(--texture-02) 60%,var(--texture-02) 61%);background-position:50%;background-size:200px 200px}.bg-concentric-rings-dense{background:radial-gradient(circle at 50% 50%,transparent 8%,var(--texture-06) 8%,var(--texture-06) 9%,transparent 9%),radial-gradient(circle at 50% 50%,transparent 16%,var(--texture-05) 16%,var(--texture-05) 17%,transparent 17%),radial-gradient(circle at 50% 50%,transparent 24%,var(--texture-06) 24%,var(--texture-06) 25%,transparent 25%),radial-gradient(circle at 50% 50%,transparent 32%,var(--texture-05) 32%,var(--texture-05) 33%,transparent 33%),radial-gradient(circle at 50% 50%,transparent 40%,var(--texture-06) 40%,var(--texture-06) 41%,transparent 41%),radial-gradient(circle at 50% 50%,transparent 48%,var(--texture-05) 48%,var(--texture-05) 49%);background-position:50%;background-size:120px 120px}.bg-grid-dots{background-image:radial-gradient(var(--texture-06) 1px,transparent 1px),radial-gradient(var(--texture-06) 1px,transparent 1px);background-position:0 0,8px 8px;background-size:16px 16px,16px 16px}.bg-grid-dots-dense{background-image:radial-gradient(var(--texture-09) .8px,transparent .8px),radial-gradient(var(--texture-09) .8px,transparent .8px);background-position:0 0,4px 4px;background-size:8px 8px,8px 8px}.bg-grid-dots-accent{background-image:radial-gradient(color-mix(in srgb,var(--magenta-500) 15%,transparent) 1px,transparent 1px),radial-gradient(color-mix(in srgb,var(--magenta-500) 15%,transparent) 1px,transparent 1px);background-position:0 0,10px 10px;background-size:20px 20px,20px 20px}.bg-rain{background:repeating-linear-gradient(20deg,transparent,transparent 3px,var(--texture-02) 3px,var(--texture-02) 4px);background-size:8px 20px}.bg-rain-dense{background:repeating-linear-gradient(20deg,transparent,transparent 2px,var(--texture-05) 2px,var(--texture-05) 3px);background-size:6px 12px}.bg-rain-angled{background:repeating-linear-gradient(35deg,transparent,transparent 3px,var(--texture-03) 3px,var(--texture-03) 4px),repeating-linear-gradient(-35deg,transparent,transparent 6px,var(--texture-02) 6px,var(--texture-02) 7px);background-size:12px 24px}.bg-starburst{background:repeating-conic-gradient(var(--texture-03) 0,var(--texture-03) 0.5%,transparent 0.5%,transparent 5%);background-size:100% 100%}.bg-starburst-dense{background:repeating-conic-gradient(var(--texture-06) 0,var(--texture-06) 0.3%,transparent 0.3%,transparent 3%)}.bg-starburst-accent{background:repeating-conic-gradient(color-mix(in srgb,var(--brand-primary) 12%,transparent) 0,color-mix(in srgb,var(--brand-primary) 12%,transparent) 0.5%,transparent 0.5%,transparent 4%)}.bg-zigzag{background:repeating-linear-gradient(75deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px),repeating-linear-gradient(-75deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px);background-size:24px 12px}.bg-zigzag-dense{background:repeating-linear-gradient(75deg,transparent,transparent 4px,var(--texture-07) 4px,var(--texture-07) 5px),repeating-linear-gradient(-75deg,transparent,transparent 4px,var(--texture-07) 4px,var(--texture-07) 5px);background-size:12px 6px}.bg-zigzag-horizontal{background:repeating-linear-gradient(165deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px),repeating-linear-gradient(-165deg,transparent,transparent 8px,var(--texture-04) 8px,var(--texture-04) 9px);background-size:24px 12px}.bg-separator-solid{background:var(--texture-solid);opacity:.25;border:none;width:100%;height:1px;margin:0}.bg-separator-thick{opacity:.4;height:2px}.bg-separator-dashed{border-top:2px dashed var(--texture-solid);opacity:.3;background:0 0;height:0}.bg-separator-dotted{border-top:2px dotted var(--texture-solid);opacity:.25;background:0 0;height:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "7k-design-system",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Dark-first, neon-accented design system for multi-project tech company 7K. Three-font system (Geist sans + Geist Mono + Geist Pixel 5 geometric variants), #FF0FF brand pulse, Tokyo neon atmosphere with high-contrast texture punctuation.",
   "type": "module",
   "main": "./dist/7k-design-system.css",