@stisocial/ui 0.2.1 → 0.3.0

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,160 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { splitLines, tokenize } from "../../editor/CodeEditor/highlight.js";
+import { CopyButton } from "../CopyButton/CopyButton.js";
+import CodeBlock_module_default from "./CodeBlock.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/CodeBlock/CodeBlock.tsx
+const LANGUAGE_NAMES = {
+	plain: "",
+	javascript: "JavaScript",
+	typescript: "TypeScript",
+	json: "JSON",
+	css: "CSS",
+	html: "HTML",
+	sql: "SQL",
+	bash: "Bash"
+};
+const BASH_RULES = [
+	{
+		type: "comment",
+		re: /#[^\n]*/y
+	},
+	{
+		type: "string",
+		re: /"(?:[^"\\\n]|\\.)*"?|'[^'\n]*'?/y
+	},
+	{
+		type: "property",
+		re: /(?<![\w-])--?[A-Za-z][\w-]*/y
+	},
+	{
+		type: "literal",
+		re: /\$\{?[A-Za-z_]\w*\}?/y
+	},
+	{
+		type: "number",
+		re: /\b\d+(?:\.\d+)?\b/y
+	},
+	{
+		type: "punct",
+		re: /&&|\|\||[|;&<>\\]/y
+	}
+];
+/** Kabuk komutlarını renklendirir: satırın (ya da `&&`, `|` sonrasının) ilk sözcüğü komuttur. */
+function tokenizeBash(text) {
+	const out = [];
+	let pos = 0;
+	let commandNext = true;
+	const push = (type, value) => {
+		const last = out[out.length - 1];
+		if (last && last.type === type) last.text += value;
+		else out.push({
+			type,
+			text: value
+		});
+	};
+	while (pos < text.length) {
+		const ch = text[pos];
+		if (ch === "\n") {
+			push("plain", ch);
+			commandNext = true;
+			pos++;
+			continue;
+		}
+		if (ch === " " || ch === "	") {
+			push("plain", ch);
+			pos++;
+			continue;
+		}
+		let matched = false;
+		for (const r of BASH_RULES) {
+			r.re.lastIndex = pos;
+			const m = r.re.exec(text);
+			if (m && m[0].length > 0) {
+				push(r.type, m[0]);
+				if (r.type === "punct" && m[0] !== "\\") commandNext = true;
+				pos += m[0].length;
+				matched = true;
+				break;
+			}
+		}
+		if (matched) continue;
+		const word = /[^\s|;&<>"'#]+/y;
+		word.lastIndex = pos;
+		const w = word.exec(text);
+		const value = w ? w[0] : ch;
+		push(commandNext && !value.includes("=") ? "function" : "plain", value);
+		commandNext = false;
+		pos += value.length;
+	}
+	return out;
+}
+/**
+* Kod bloğu: sözdizimi renklendirilmiş, kopyalanabilir, isteğe bağlı satır numaralı ve vurgulu
+* satırlı kod. Satırlar blok öğedir: seçilip kopyalanan metin satır numarası içermez. Kod alanı
+* klavyeyle kaydırılabilsin diye odaklanır.
+*/
+function CodeBlock({ code, language = "plain", title, label, showLanguage = true, showLineNumbers = false, highlightLines, copyable = true, wrap = false, maxHeight, copyLabel, className, id }) {
+	const t = useMessages();
+	const text = code.endsWith("\n") ? code.slice(0, -1) : code;
+	const tokens = language === "bash" ? tokenizeBash(text) : tokenize(text, language);
+	const lines = splitLines(tokens);
+	const marked = new Set(highlightLines ?? []);
+	const languageName = LANGUAGE_NAMES[language];
+	const name = label ?? (typeof title === "string" ? title : languageName || t.codeBlockLabel);
+	const hasHead = title !== void 0 || showLanguage && language !== "plain";
+	const copy = copyable ? /* @__PURE__ */ jsx(CopyButton, {
+		value: text,
+		label: copyLabel ?? t.codeBlockCopy,
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true,
+		className: CodeBlock_module_default.copy
+	}) : null;
+	return /* @__PURE__ */ jsxs("figure", {
+		id,
+		className: [CodeBlock_module_default.root, className].filter(Boolean).join(" "),
+		"data-wrap": wrap || void 0,
+		"data-numbers": showLineNumbers || void 0,
+		"data-max-height": maxHeight,
+		children: [hasHead ? /* @__PURE__ */ jsxs("figcaption", {
+			className: CodeBlock_module_default.head,
+			children: [
+				title !== void 0 ? /* @__PURE__ */ jsx("span", {
+					className: CodeBlock_module_default.title,
+					children: title
+				}) : null,
+				showLanguage && language !== "plain" ? /* @__PURE__ */ jsx("span", {
+					className: CodeBlock_module_default.language,
+					children: languageName
+				}) : null,
+				copy
+			]
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: CodeBlock_module_default.body,
+			children: [/* @__PURE__ */ jsx("pre", {
+				className: CodeBlock_module_default.pre,
+				tabIndex: 0,
+				role: "region",
+				"aria-label": name,
+				dir: "ltr",
+				children: /* @__PURE__ */ jsx("code", {
+					className: CodeBlock_module_default.code,
+					children: lines.map((line, i) => /* @__PURE__ */ jsx("span", {
+						className: CodeBlock_module_default.line,
+						"data-highlight": marked.has(i + 1) || void 0,
+						children: line.map((token, j) => /* @__PURE__ */ jsx("span", {
+							className: token.type === "plain" ? void 0 : CodeBlock_module_default[`t_${token.type}`],
+							children: token.text
+						}, j))
+					}, i))
+				})
+			}), !hasHead ? /* @__PURE__ */ jsx("div", {
+				className: CodeBlock_module_default.floating,
+				children: copy
+			}) : null]
+		})]
+	});
+}
+export { CodeBlock };

package/dist/components/CodeBlock/CodeBlock.module.js

@@ -0,0 +1,25 @@
+import './CodeBlock.css';
+// src/components/CodeBlock/CodeBlock.module.css
+var CodeBlock_module_default = {
+	"root": "sti-CodeBlock-root-e536d",
+	"head": "sti-CodeBlock-head-3191a",
+	"title": "sti-CodeBlock-title-a34d3",
+	"language": "sti-CodeBlock-language-3b997",
+	"copy": "sti-CodeBlock-copy-c0e8b",
+	"body": "sti-CodeBlock-body-23e8d",
+	"floating": "sti-CodeBlock-floating-004c0",
+	"pre": "sti-CodeBlock-pre-6f451",
+	"code": "sti-CodeBlock-code-05822",
+	"line": "sti-CodeBlock-line-97b7b",
+	"t_keyword": "sti-CodeBlock-t_keyword-bb6e9",
+	"t_string": "sti-CodeBlock-t_string-5b6f2",
+	"t_number": "sti-CodeBlock-t_number-97a3a",
+	"t_literal": "sti-CodeBlock-t_literal-6c3a0",
+	"t_comment": "sti-CodeBlock-t_comment-16ea8",
+	"t_function": "sti-CodeBlock-t_function-902ac",
+	"t_property": "sti-CodeBlock-t_property-d0d53",
+	"t_attr": "sti-CodeBlock-t_attr-347c2",
+	"t_tag": "sti-CodeBlock-t_tag-62bae",
+	"t_punct": "sti-CodeBlock-t_punct-6e9da"
+};
+export { CodeBlock_module_default as default };

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

@@ -0,0 +1,2 @@
+import { CodeBlock, CodeBlockLanguage, CodeBlockProps } from "./CodeBlock.js";
+export { CodeBlock, CodeBlockLanguage, CodeBlockProps };

package/dist/components/Combobox/Combobox.css

@@ -1,26 +1,27 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-Combobox-group-8ecd4 {
+  .sti-Combobox-group-35607 {
     align-items: center;
     gap: var(--sti-space-2);
     cursor: text;
     display: flex;
   }
 
-  .sti-Combobox-group-8ecd4[data-disabled] {
+  .sti-Combobox-group-35607[data-disabled] {
     cursor: not-allowed;
   }
 
-  .sti-Combobox-group-8ecd4[data-readonly] {
+  .sti-Combobox-group-35607[data-readonly] {
     background: var(--sti-bg-subtle);
     border-style: dashed;
   }
 
-  .sti-Combobox-input-3d549 {
+  .sti-Combobox-input-1b76d {
     min-width: 0;
     height: 100%;
     color: inherit;
     font: inherit;
+    text-overflow: ellipsis;
     background: none;
     border: 0;
     outline: none;
@@ -29,23 +30,23 @@
     padding: 0;
   }
 
-  .sti-Combobox-input-3d549::placeholder {
+  .sti-Combobox-input-1b76d::placeholder {
     color: var(--sti-fg-muted);
     opacity: 1;
   }
 
-  .sti-Combobox-loading-4a5f1 {
+  .sti-Combobox-loading-d43ec {
     color: var(--sti-fg-muted);
     flex: none;
     display: inline-flex;
   }
 
-  .sti-Combobox-button-919e9 {
+  .sti-Combobox-button-2eee5 {
     flex: none;
     margin-inline-end: calc(var(--sti-space-2) * -1);
   }
 
-  .sti-Combobox-group-8ecd4[data-focused] .sti-Combobox-button-919e9 {
+  .sti-Combobox-group-35607[data-focused] .sti-Combobox-button-2eee5 {
     color: var(--sti-fg);
   }
 }

package/dist/components/Combobox/Combobox.d.ts

@@ -1,5 +1,5 @@
-import { ListItem } from "../_internal/listbox/options.js";
 import { ErrorMessage } from "../Field/Field.js";
+import { ListItem } from "../_internal/listbox/options.js";
 import { ReactNode } from "react";
 export interface ComboboxProps {
   label: ReactNode;

package/dist/components/Combobox/Combobox.js

@@ -1,11 +1,11 @@
 "use client";
 import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
 import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { Spinner } from "../Spinner/Spinner.js";
 import listbox_module_default from "../_internal/listbox/listbox.module.js";
 import { disabledKeys, renderOptions } from "../_internal/listbox/options.js";
 import { useThemeContext } from "../_internal/themeContext.js";
 import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
-import { Spinner } from "../Spinner/Spinner.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import Combobox_module_default from "./Combobox.module.js";
 import { searchContains } from "./searchFold.js";

package/dist/components/Combobox/Combobox.module.js

@@ -1,9 +1,9 @@
 import './Combobox.css';
 // src/components/Combobox/Combobox.module.css
 var Combobox_module_default = {
-	"group": "sti-Combobox-group-8ecd4",
-	"input": "sti-Combobox-input-3d549",
-	"loading": "sti-Combobox-loading-4a5f1",
-	"button": "sti-Combobox-button-919e9"
+	"group": "sti-Combobox-group-35607",
+	"input": "sti-Combobox-input-1b76d",
+	"loading": "sti-Combobox-loading-d43ec",
+	"button": "sti-Combobox-button-2eee5"
 };
 export { Combobox_module_default as default };

package/dist/components/CommentThread/CommentThread.js

@@ -1,11 +1,11 @@
 "use client";
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
+import { Avatar } from "../Avatar/Avatar.js";
 import { Button } from "../Button/Button.js";
+import { RelativeTime } from "../RelativeTime/RelativeTime.js";
 import { AlertDialog } from "../AlertDialog/AlertDialog.js";
-import { Avatar } from "../Avatar/Avatar.js";
 import { Mentions } from "../Mentions/Mentions.js";
-import { RelativeTime } from "../RelativeTime/RelativeTime.js";
 import CommentThread_module_default from "./CommentThread.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";

package/dist/components/Comparison/Comparison.css

@@ -0,0 +1,215 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Comparison-root-2f120 {
+    --sti-comparison-label-w: 12rem;
+    --sti-comparison-col-w: 10rem;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+    container-type: inline-size;
+  }
+
+  @container (width <= 30rem) {
+    .sti-Comparison-table-f37b3 {
+      --sti-comparison-label-w: 7.5rem;
+      --sti-comparison-col-w: 7rem;
+    }
+
+    .sti-Comparison-rowHead-2191a, .sti-Comparison-cell-c36b8, .sti-Comparison-corner-04b21, .sti-Comparison-itemHead-30798 {
+      padding-inline: var(--sti-space-3);
+    }
+  }
+
+  .sti-Comparison-tools-7f601 {
+    justify-content: flex-end;
+    display: flex;
+  }
+
+  .sti-Comparison-none-17228 {
+    padding: var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-Comparison-scroll-51205 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface);
+    scrollbar-width: thin;
+    outline: none;
+    overflow-x: auto;
+  }
+
+  .sti-Comparison-scroll-51205:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-Comparison-table-f37b3 {
+    --sti-comparison-n: 2;
+    inline-size: max(100%,
+      calc(var(--sti-comparison-label-w) + var(--sti-comparison-col-w) * var(--sti-comparison-n)));
+    table-layout: fixed;
+    border-collapse: separate;
+    border-spacing: 0;
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-Comparison-table-f37b3[data-columns="3"] {
+    --sti-comparison-n: 3;
+  }
+
+  .sti-Comparison-table-f37b3[data-columns="4"] {
+    --sti-comparison-n: 4;
+  }
+
+  .sti-Comparison-caption-42e45 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .sti-Comparison-corner-04b21, .sti-Comparison-itemHead-30798 {
+    padding: var(--sti-space-3) var(--sti-space-4);
+    border-block-end: var(--sti-border-width) solid var(--sti-border);
+    background: var(--sti-bg-subtle);
+    vertical-align: bottom;
+  }
+
+  .sti-Comparison-corner-04b21 {
+    z-index: 2;
+    inline-size: var(--sti-comparison-label-w);
+    position: sticky;
+    inset-inline-start: 0;
+  }
+
+  .sti-Comparison-itemHead-30798 {
+    text-align: start;
+    overflow-wrap: anywhere;
+  }
+
+  .sti-Comparison-itemTitle-5b1d1 {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    display: block;
+  }
+
+  .sti-Comparison-itemSubtitle-9e842 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-regular);
+    display: block;
+  }
+
+  .sti-Comparison-group-16571 {
+    padding: var(--sti-space-3) var(--sti-space-4) var(--sti-space-1);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: var(--sti-tracking-label);
+    text-align: start;
+  }
+
+  .sti-Comparison-rowHead-2191a, .sti-Comparison-cell-c36b8 {
+    block-size: var(--sti-row-h);
+    padding: var(--sti-space-2) var(--sti-space-4);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    vertical-align: middle;
+    text-align: start;
+  }
+
+  .sti-Comparison-row-72a40:last-child .sti-Comparison-rowHead-2191a, .sti-Comparison-row-72a40:last-child .sti-Comparison-cell-c36b8 {
+    border-block-end: 0;
+  }
+
+  .sti-Comparison-rowHead-2191a {
+    z-index: 1;
+    background: var(--sti-bg-surface);
+    overflow-wrap: anywhere;
+    color: var(--sti-fg);
+    font-weight: var(--sti-font-weight-medium);
+    position: sticky;
+    inset-inline-start: 0;
+  }
+
+  @media (hover: hover) {
+    .sti-Comparison-row-72a40:hover .sti-Comparison-cell-c36b8, .sti-Comparison-row-72a40:hover .sti-Comparison-rowHead-2191a {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-Comparison-row-72a40[data-uniform] .sti-Comparison-cell-c36b8 {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-Comparison-cell-c36b8[data-best] {
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+  }
+
+  @media (hover: hover) {
+    .sti-Comparison-row-72a40:hover .sti-Comparison-cell-c36b8[data-best] {
+      background: var(--sti-bg-accent-subtle);
+    }
+  }
+
+  .sti-Comparison-cell-c36b8 {
+    overflow-wrap: anywhere;
+  }
+
+  .sti-Comparison-value-a5d40 {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sti-Comparison-cell-c36b8[data-best] .sti-Comparison-value-a5d40 {
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-Comparison-bestBadge-50832 {
+    padding: 0 var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-xs);
+    vertical-align: middle;
+    margin-inline-start: var(--sti-space-2);
+    display: inline-block;
+  }
+
+  .sti-Comparison-yes-8d57d, .sti-Comparison-no-c442f {
+    font-size: var(--sti-icon-sm);
+    display: inline-flex;
+  }
+
+  .sti-Comparison-yes-8d57d {
+    color: var(--sti-fg-success);
+  }
+
+  .sti-Comparison-no-c442f, .sti-Comparison-empty-d9c96 {
+    color: var(--sti-fg-muted);
+  }
+
+  @media (forced-colors: active) {
+    .sti-Comparison-scroll-51205 {
+      border-color: canvastext;
+    }
+
+    .sti-Comparison-cell-c36b8[data-best] {
+      outline: var(--sti-border-width) solid Highlight;
+      outline-offset: calc(var(--sti-border-width) * -1);
+    }
+  }
+}

package/dist/components/Comparison/Comparison.d.ts

@@ -0,0 +1,19 @@
+import { ComparisonItem, ComparisonRow, ComparisonValue } from "./compareRows.js";
+export interface ComparisonProps {
+  items: readonly ComparisonItem[];
+  rows: readonly ComparisonRow[];
+  /** Bölgenin ve tablonun adı (zorunlu). */
+  label: string;
+  /** "Yalnız farkları göster" anahtarı; varsayılan açık. */
+  showDifferencesToggle?: boolean;
+  defaultOnlyDifferences?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Karşılaştırma tablosu: öğeler sütunlarda, özellikler satırlarda. Sayısal satırda en iyi değer
+ * işaretlenir; "Yalnız farkları göster" aynı satırları gizler; özellik sütunu yatay kaydırmada
+ * yerinde kalır.
+ */
+export declare function Comparison({ items, rows, label, showDifferencesToggle, defaultOnlyDifferences, className, id }: ComparisonProps): import("react").JSX.Element;
+export type { ComparisonItem, ComparisonRow, ComparisonValue };

package/dist/components/Comparison/Comparison.js

@@ -0,0 +1,122 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { MinusIcon } from "../../icons/generated/MinusIcon.js";
+import { Switch } from "../Switch/Switch.js";
+import Comparison_module_default from "./Comparison.module.js";
+import { bestItems, isUniform } from "./compareRows.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useId, useState } from "react";
+// src/components/Comparison/Comparison.tsx
+/**
+* Karşılaştırma tablosu: öğeler sütunlarda, özellikler satırlarda. Sayısal satırda en iyi değer
+* işaretlenir; "Yalnız farkları göster" aynı satırları gizler; özellik sütunu yatay kaydırmada
+* yerinde kalır.
+*/
+function Comparison({ items, rows, label, showDifferencesToggle = true, defaultOnlyDifferences = false, className, id }) {
+	const t = useMessages();
+	const base = useId();
+	const [onlyDiff, setOnlyDiff] = useState(defaultOnlyDifferences);
+	const ids = items.map((i) => i.id);
+	const visible = onlyDiff ? rows.filter((r) => !isUniform(r, ids)) : rows;
+	const renderValue = (row, itemId) => {
+		const value = row.values[itemId] ?? null;
+		if (value === null) return /* @__PURE__ */ jsx("span", {
+			className: Comparison_module_default.empty,
+			children: "—"
+		});
+		if (value === true) return /* @__PURE__ */ jsxs("span", {
+			className: Comparison_module_default.yes,
+			children: [/* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx(VisuallyHidden, { children: t.comparisonYes })]
+		});
+		if (value === false) return /* @__PURE__ */ jsxs("span", {
+			className: Comparison_module_default.no,
+			children: [/* @__PURE__ */ jsx(MinusIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx(VisuallyHidden, { children: t.comparisonNo })]
+		});
+		if (row.display && itemId in row.display) return row.display[itemId];
+		return value;
+	};
+	let lastGroup;
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-label": label,
+		className: [Comparison_module_default.root, className].filter(Boolean).join(" "),
+		children: [showDifferencesToggle ? /* @__PURE__ */ jsx("div", {
+			className: Comparison_module_default.tools,
+			children: /* @__PURE__ */ jsx(Switch, {
+				isSelected: onlyDiff,
+				onChange: setOnlyDiff,
+				size: "sm",
+				children: t.comparisonOnlyDifferences
+			})
+		}) : null, visible.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: Comparison_module_default.none,
+			children: t.comparisonNoDifferences
+		}) : /* @__PURE__ */ jsx("div", {
+			className: Comparison_module_default.scroll,
+			tabIndex: 0,
+			role: "group",
+			"aria-labelledby": `${base}-cap`,
+			children: /* @__PURE__ */ jsxs("table", {
+				className: Comparison_module_default.table,
+				"data-columns": items.length,
+				children: [
+					/* @__PURE__ */ jsx("caption", {
+						id: `${base}-cap`,
+						className: Comparison_module_default.caption,
+						children: label
+					}),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", { className: Comparison_module_default.corner }), items.map((item) => /* @__PURE__ */ jsxs("th", {
+						scope: "col",
+						className: Comparison_module_default.itemHead,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: Comparison_module_default.itemTitle,
+							children: item.title
+						}), item.subtitle ? /* @__PURE__ */ jsx("span", {
+							className: Comparison_module_default.itemSubtitle,
+							children: item.subtitle
+						}) : null]
+					}, item.id))] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: visible.map((row) => {
+						const best = bestItems(row);
+						const uniform = isUniform(row, ids);
+						const header = row.group && row.group !== lastGroup ? /* @__PURE__ */ jsx("tr", {
+							className: Comparison_module_default.groupRow,
+							children: /* @__PURE__ */ jsx("th", {
+								scope: "colgroup",
+								colSpan: items.length + 1,
+								className: Comparison_module_default.group,
+								children: row.group
+							})
+						}) : null;
+						lastGroup = row.group;
+						return /* @__PURE__ */ jsxs(Fragment$1, { children: [header, /* @__PURE__ */ jsxs("tr", {
+							className: Comparison_module_default.row,
+							"data-uniform": uniform || void 0,
+							children: [/* @__PURE__ */ jsx("th", {
+								scope: "row",
+								className: Comparison_module_default.rowHead,
+								children: row.label
+							}), items.map((item) => {
+								const isBest = best.has(item.id);
+								return /* @__PURE__ */ jsxs("td", {
+									className: Comparison_module_default.cell,
+									"data-best": isBest || void 0,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: Comparison_module_default.value,
+										children: renderValue(row, item.id)
+									}), isBest ? /* @__PURE__ */ jsx("span", {
+										className: Comparison_module_default.bestBadge,
+										children: t.comparisonBest
+									}) : null]
+								}, item.id);
+							})]
+						})] }, row.id);
+					}) })
+				]
+			})
+		})]
+	});
+}
+export { Comparison };

package/dist/components/Comparison/Comparison.module.js

@@ -0,0 +1,24 @@
+import './Comparison.css';
+// src/components/Comparison/Comparison.module.css
+var Comparison_module_default = {
+	"root": "sti-Comparison-root-2f120",
+	"table": "sti-Comparison-table-f37b3",
+	"rowHead": "sti-Comparison-rowHead-2191a",
+	"cell": "sti-Comparison-cell-c36b8",
+	"corner": "sti-Comparison-corner-04b21",
+	"itemHead": "sti-Comparison-itemHead-30798",
+	"tools": "sti-Comparison-tools-7f601",
+	"none": "sti-Comparison-none-17228",
+	"scroll": "sti-Comparison-scroll-51205",
+	"caption": "sti-Comparison-caption-42e45",
+	"itemTitle": "sti-Comparison-itemTitle-5b1d1",
+	"itemSubtitle": "sti-Comparison-itemSubtitle-9e842",
+	"group": "sti-Comparison-group-16571",
+	"row": "sti-Comparison-row-72a40",
+	"value": "sti-Comparison-value-a5d40",
+	"bestBadge": "sti-Comparison-bestBadge-50832",
+	"yes": "sti-Comparison-yes-8d57d",
+	"no": "sti-Comparison-no-c442f",
+	"empty": "sti-Comparison-empty-d9c96"
+};
+export { Comparison_module_default as default };