@stisocial/ui 0.2.0 → 0.3.0

package/dist/components/Image/Image.js

@@ -0,0 +1,76 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { ImageIcon } from "../../icons/generated/ImageIcon.js";
+import Image_module_default from "./Image.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/components/Image/Image.tsx
+/**
+* Görsel: tembel yükleme, önceden ayrılan yer, bulanık ön izleme ya da sakin zemin, yüklenince
+* yumuşak belirme ve yüklenemezse açıklayıcı kutu. Satır içi stil kullanmaz (CSP).
+*/
+function Image({ src, alt, width, height, ratio, fit = "cover", placeholder = "color", blurSrc, radius = "md", priority = false, srcSet, sizes, onLoad, onError, className, id }) {
+	const t = useMessages();
+	const ref = useRef(null);
+	const [status, setStatus] = useState(null);
+	useEffect(() => {
+		const img = ref.current;
+		if (!img) return;
+		if (img.complete) setStatus(img.naturalWidth > 0 ? "loaded" : "error");
+		else setStatus("loading");
+	}, [src]);
+	return /* @__PURE__ */ jsxs("span", {
+		id,
+		className: [Image_module_default.root, className].filter(Boolean).join(" "),
+		"data-ratio": ratio,
+		"data-fit": fit,
+		"data-radius": radius,
+		"data-status": status ?? void 0,
+		"data-placeholder": placeholder,
+		children: [
+			placeholder === "blur" && blurSrc && status !== "error" ? /* @__PURE__ */ jsx("img", {
+				className: Image_module_default.blur,
+				src: blurSrc,
+				alt: "",
+				"aria-hidden": "true"
+			}) : null,
+			status === "error" ? /* @__PURE__ */ jsxs("span", {
+				className: Image_module_default.error,
+				role: "img",
+				"aria-label": alt ? `${t.lightboxLoadFailed} ${alt}` : t.lightboxLoadFailed,
+				children: [/* @__PURE__ */ jsx(ImageIcon, {
+					className: Image_module_default.errorIcon,
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", {
+					className: Image_module_default.errorText,
+					"aria-hidden": "true",
+					children: t.lightboxLoadFailed
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("img", {
+				ref,
+				className: Image_module_default.img,
+				src,
+				alt,
+				width,
+				height,
+				srcSet,
+				sizes,
+				loading: priority ? "eager" : "lazy",
+				decoding: "async",
+				fetchPriority: priority ? "high" : void 0,
+				referrerPolicy: "strict-origin-when-cross-origin",
+				hidden: status === "error",
+				onLoad: () => {
+					setStatus("loaded");
+					onLoad?.();
+				},
+				onError: () => {
+					setStatus("error");
+					onError?.();
+				}
+			})
+		]
+	});
+}
+export { Image };

package/dist/components/Image/Image.module.js

@@ -0,0 +1,11 @@
+import './Image.css';
+// src/components/Image/Image.module.css
+var Image_module_default = {
+	"root": "sti-Image-root-9cd60",
+	"img": "sti-Image-img-fd3c0",
+	"blur": "sti-Image-blur-ad9ba",
+	"error": "sti-Image-error-90a4f",
+	"errorIcon": "sti-Image-errorIcon-18921",
+	"errorText": "sti-Image-errorText-833fc"
+};
+export { Image_module_default as default };

package/dist/components/ImageUpload/ImageUpload.js

@@ -1,10 +1,10 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
+import { Button as Button$1 } from "../Button/Button.js";
 import { useThemeContext } from "../_internal/themeContext.js";
 import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { fieldStyles } from "../Field/Field.js";
-import { Button as Button$1 } from "../Button/Button.js";
 import { ImageIcon } from "../../icons/generated/ImageIcon.js";
 import { clampCrop, sourceRect } from "./crop.js";
 import { Slider as Slider$1 } from "../Slider/Slider.js";

package/dist/components/InfiniteList/InfiniteList.js

@@ -2,8 +2,8 @@
 import { useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
 import { Spinner } from "../Spinner/Spinner.js";
-import { announce } from "../Alert/announcer.js";
 import { Button } from "../Button/Button.js";
+import { announce } from "../Alert/announcer.js";
 import InfiniteList_module_default from "./InfiniteList.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef } from "react";

package/dist/components/InlineEdit/InlineEdit.js

@@ -1,8 +1,8 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
-import { TextField as TextField$1 } from "../TextField/TextField.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { Button as Button$1 } from "../Button/Button.js";
+import { TextField as TextField$1 } from "../TextField/TextField.js";
 import { EditIcon } from "../../icons/generated/EditIcon.js";
 import InlineEdit_module_default from "./InlineEdit.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/InviteMembers/InviteMembers.d.ts

@@ -19,6 +19,8 @@ export interface InviteMembersProps {
   roles: readonly InviteRole[];
   /** Başlangıçta seçili rol; varsayılan ilk rol. */
   defaultRoleId?: string;
+  /** Başlangıçta alanda olan adresler (ör. önerilen kişilerden "Davet et"). */
+  defaultEmails?: readonly string[];
   /** Zaten üye ya da davet edilmiş adresler (küçük harfle karşılaştırılır); eklenmez. */
   existingEmails?: readonly string[];
   /** Bir seferde en çok davet. Varsayılan 20. */
@@ -40,4 +42,4 @@ export interface InviteMembersProps {
  * başarısız gönderimde gönderilemeyen adresler alanda kalır ve listelenir. Adresler küçük harfe
  * çevrilir, boşluklar kırpılır.
  */
-export declare function InviteMembers({ roles, defaultRoleId, existingEmails, maxInvites, showMessage, messageMaxLength, onInvite, footer, className, id }: InviteMembersProps): import("react").JSX.Element;
+export declare function InviteMembers({ roles, defaultRoleId, defaultEmails, existingEmails, maxInvites, showMessage, messageMaxLength, onInvite, footer, className, id }: InviteMembersProps): import("react").JSX.Element;

package/dist/components/InviteMembers/InviteMembers.js

@@ -1,8 +1,8 @@
 "use client";
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { TextArea } from "../TextArea/TextArea.js";
 import { Button } from "../Button/Button.js";
+import { TextArea } from "../TextArea/TextArea.js";
 import { Select } from "../Select/Select.js";
 import { InlineMessage } from "../InlineMessage/InlineMessage.js";
 import { TagInput } from "../TagInput/TagInput.js";
@@ -25,11 +25,11 @@ function isEmailAddress(text) {
 * başarısız gönderimde gönderilemeyen adresler alanda kalır ve listelenir. Adresler küçük harfe
 * çevrilir, boşluklar kırpılır.
 */
-function InviteMembers({ roles, defaultRoleId, existingEmails = [], maxInvites = 20, showMessage = true, messageMaxLength = 500, onInvite, footer, className, id }) {
+function InviteMembers({ roles, defaultRoleId, defaultEmails, existingEmails = [], maxInvites = 20, showMessage = true, messageMaxLength = 500, onInvite, footer, className, id }) {
 	const t = useMessages();
 	const f = useFormatter();
 	const formId = useId();
-	const [emails, setEmails] = useState([]);
+	const [emails, setEmails] = useState(() => [...defaultEmails ?? []]);
 	const [roleId, setRoleId] = useState(defaultRoleId ?? roles[0]?.id ?? "");
 	const [message, setMessage] = useState("");
 	const [pending, setPending] = useState(false);

package/dist/components/InvoiceTemplate/InvoiceTemplate.css

@@ -0,0 +1,81 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-InvoiceTemplate-section-078b8 {
+    gap: var(--sti-space-3);
+    break-inside: avoid-page;
+    display: grid;
+  }
+
+  .sti-InvoiceTemplate-sectionTitle-04829 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-InvoiceTemplate-text-97f3b {
+    max-inline-size: 48rem;
+    color: var(--sti-fg);
+    margin: 0;
+  }
+
+  .sti-InvoiceTemplate-muted-f60b7 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-InvoiceTemplate-totals-260b3 {
+    justify-items: end;
+    display: grid;
+  }
+
+  .sti-InvoiceTemplate-totals-260b3 > * {
+    inline-size: 100%;
+    max-inline-size: 22rem;
+  }
+
+  .sti-InvoiceTemplate-split-12849 {
+    align-items: start;
+    gap: var(--sti-space-6);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+    display: grid;
+  }
+
+  .sti-InvoiceTemplate-terms-88937 {
+    gap: var(--sti-space-1);
+    margin: 0;
+    padding-inline-start: var(--sti-space-5);
+    display: grid;
+  }
+
+  .sti-InvoiceTemplate-figures-643b0 {
+    gap: var(--sti-space-3);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-InvoiceTemplate-figure-7838f {
+    padding: var(--sti-space-3) var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-bg-subtle);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-InvoiceTemplate-figure-7838f > dt {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    order: 2;
+  }
+
+  .sti-InvoiceTemplate-figure-7838f > dd {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-xl);
+    font-weight: var(--sti-font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    order: 1;
+    margin: 0;
+  }
+}

package/dist/components/InvoiceTemplate/InvoiceTemplate.d.ts

@@ -0,0 +1,38 @@
+import { Locale } from "../../provider/locale.js";
+import { UIMessages } from "../../messages/messages.js";
+import { DateValue } from "../DateTime/instant.js";
+import { DocumentLine, DocumentParty, DocumentSize } from "../_document/types.js";
+import { DocumentLetterhead } from "../DocumentLayout/DocumentLayout.js";
+import { ReactNode } from "react";
+export interface InvoiceTemplateProps {
+  number: string;
+  issueDate: DateValue;
+  dueDate?: DateValue;
+  seller: DocumentParty;
+  buyer: DocumentParty;
+  lines: readonly DocumentLine[];
+  currency?: string;
+  letterhead?: DocumentLetterhead;
+  /** Ödeme bilgisi (IBAN, banka, hesap sahibi). */
+  payment?: {
+    iban: string;
+    bank?: string;
+    accountHolder?: string;
+    reference?: string;
+  };
+  notes?: ReactNode;
+  watermark?: ReactNode;
+  footer?: ReactNode;
+  size?: DocumentSize;
+  locale?: Locale;
+  labels?: Partial<UIMessages>;
+  className?: string;
+  id?: string;
+}
+/**
+ * Fatura şablonu (proforma ve fatura önizlemesi): antet, "Fatura" başlığı ve künye (no, düzenleme
+ * tarihi, vade), satıcı ve alıcı, kalem tablosu, toplamlar, ödeme bilgisi (ödenecek tutar ve vade)
+ * ve notlar. Yasal e-Fatura / e-Arşiv belgesi değildir; resmî belge entegratörde düzenlenir.
+ * Sunucu bileşenidir.
+ */
+export declare function InvoiceTemplate({ number, issueDate, dueDate, seller, buyer, lines, currency, letterhead, payment, notes, watermark, footer, size, locale, labels, className, id }: InvoiceTemplateProps): import("react").JSX.Element;

package/dist/components/InvoiceTemplate/InvoiceTemplate.js

@@ -0,0 +1,107 @@
+import { DateTime } from "../DateTime/DateTime.js";
+import { Parties } from "../_document/Parties.js";
+import { documentText } from "../_document/text.js";
+import { DocumentLayout } from "../DocumentLayout/DocumentLayout.js";
+import { DocumentTable } from "../DocumentTable/DocumentTable.js";
+import { lineTable } from "../_document/lineTable.js";
+import { PaymentInfo } from "../PaymentInfo/PaymentInfo.js";
+import { TotalsBlock } from "../TotalsBlock/TotalsBlock.js";
+import { calculateTotals } from "../TotalsBlock/totals.js";
+import InvoiceTemplate_module_default from "./InvoiceTemplate.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/InvoiceTemplate/InvoiceTemplate.tsx
+/**
+* Fatura şablonu (proforma ve fatura önizlemesi): antet, "Fatura" başlığı ve künye (no, düzenleme
+* tarihi, vade), satıcı ve alıcı, kalem tablosu, toplamlar, ödeme bilgisi (ödenecek tutar ve vade)
+* ve notlar. Yasal e-Fatura / e-Arşiv belgesi değildir; resmî belge entegratörde düzenlenir.
+* Sunucu bileşenidir.
+*/
+function InvoiceTemplate({ number, issueDate, dueDate, seller, buyer, lines, currency = "TRY", letterhead, payment, notes, watermark, footer, size, locale, labels, className, id }) {
+	const t = documentText(locale, labels);
+	const { columns, rows } = lineTable(lines, t, locale, currency);
+	const totals = calculateTotals(lines);
+	return /* @__PURE__ */ jsxs(DocumentLayout, {
+		id,
+		className,
+		title: t.documentInvoice,
+		letterhead,
+		watermark,
+		footer,
+		size,
+		meta: [
+			{
+				label: t.documentInvoiceNumber,
+				value: number
+			},
+			{
+				label: t.documentIssueDate,
+				value: /* @__PURE__ */ jsx(DateTime, {
+					value: issueDate,
+					locale
+				})
+			},
+			...dueDate !== void 0 ? [{
+				label: t.documentDueDate,
+				value: /* @__PURE__ */ jsx(DateTime, {
+					value: dueDate,
+					locale
+				})
+			}] : []
+		],
+		children: [
+			/* @__PURE__ */ jsx(Parties, {
+				t,
+				entries: [{
+					role: t.documentSeller,
+					party: seller
+				}, {
+					role: t.documentBuyer,
+					party: buyer
+				}]
+			}),
+			/* @__PURE__ */ jsx(DocumentTable, {
+				caption: t.documentLines,
+				columns,
+				rows,
+				isNumbered: true,
+				size,
+				locale
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: InvoiceTemplate_module_default.split,
+				children: [payment ? /* @__PURE__ */ jsx(PaymentInfo, {
+					iban: payment.iban,
+					bank: payment.bank,
+					accountHolder: payment.accountHolder ?? seller.name,
+					reference: payment.reference ?? number,
+					dueDate,
+					amountDue: totals.total,
+					currency,
+					titleLevel: 2,
+					size,
+					locale
+				}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("div", {
+					className: InvoiceTemplate_module_default.totals,
+					children: /* @__PURE__ */ jsx(TotalsBlock, {
+						totals,
+						currency,
+						size,
+						locale
+					})
+				})]
+			}),
+			notes ? /* @__PURE__ */ jsxs("section", {
+				className: InvoiceTemplate_module_default.section,
+				"aria-label": t.documentNotes,
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: InvoiceTemplate_module_default.sectionTitle,
+					children: t.documentNotes
+				}), /* @__PURE__ */ jsx("p", {
+					className: InvoiceTemplate_module_default.muted,
+					children: notes
+				})]
+			}) : null
+		]
+	});
+}
+export { InvoiceTemplate };

package/dist/components/InvoiceTemplate/InvoiceTemplate.module.js

@@ -0,0 +1,14 @@
+import './InvoiceTemplate.css';
+// src/components/InvoiceTemplate/InvoiceTemplate.module.css
+var InvoiceTemplate_module_default = {
+	"section": "sti-InvoiceTemplate-section-078b8",
+	"sectionTitle": "sti-InvoiceTemplate-sectionTitle-04829",
+	"text": "sti-InvoiceTemplate-text-97f3b",
+	"muted": "sti-InvoiceTemplate-muted-f60b7",
+	"totals": "sti-InvoiceTemplate-totals-260b3",
+	"split": "sti-InvoiceTemplate-split-12849",
+	"terms": "sti-InvoiceTemplate-terms-88937",
+	"figures": "sti-InvoiceTemplate-figures-643b0",
+	"figure": "sti-InvoiceTemplate-figure-7838f"
+};
+export { InvoiceTemplate_module_default as default };

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

@@ -0,0 +1,2 @@
+import { InvoiceTemplate, InvoiceTemplateProps } from "./InvoiceTemplate.js";
+export { InvoiceTemplate, InvoiceTemplateProps };

package/dist/components/JsonViewer/JsonViewer.css

@@ -0,0 +1,248 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-JsonViewer-root-e86b2 {
+    --sti-json-viewer-max-h: none;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  .sti-JsonViewer-root-e86b2[data-max-height="sm"] {
+    --sti-json-viewer-max-h: 12rem;
+  }
+
+  .sti-JsonViewer-root-e86b2[data-max-height="md"] {
+    --sti-json-viewer-max-h: 20rem;
+  }
+
+  .sti-JsonViewer-root-e86b2[data-max-height="lg"] {
+    --sti-json-viewer-max-h: 32rem;
+  }
+
+  .sti-JsonViewer-head-e97fe {
+    align-items: center;
+    gap: var(--sti-space-3);
+    min-block-size: var(--sti-control-h-md);
+    padding-block: var(--sti-space-1);
+    padding-inline: var(--sti-space-4) var(--sti-space-2);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-surface);
+    font-family: var(--sti-font-text);
+    display: flex;
+  }
+
+  .sti-JsonViewer-title-62776 {
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: auto;
+    overflow: hidden;
+  }
+
+  .sti-JsonViewer-copy-3e0a0 {
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  .sti-JsonViewer-body-4bb56 {
+    position: relative;
+  }
+
+  .sti-JsonViewer-floating-056b2 {
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-subtle);
+    position: absolute;
+    inset-block-start: var(--sti-space-2);
+    inset-inline-end: var(--sti-space-2);
+  }
+
+  .sti-JsonViewer-scroll-8d190 {
+    max-block-size: var(--sti-json-viewer-max-h);
+    padding: var(--sti-space-2);
+    scrollbar-width: thin;
+    overflow: auto;
+  }
+
+  .sti-JsonViewer-tree-1a99c {
+    min-inline-size: max-content;
+    font-family: var(--sti-font-mono);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    outline: none;
+    align-content: start;
+    display: grid;
+  }
+
+  .sti-JsonViewer-tree-1a99c[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+    border-radius: var(--sti-radius-md);
+  }
+
+  .sti-JsonViewer-item-1a936 {
+    border-radius: var(--sti-radius-md);
+    color: var(--sti-fg);
+    cursor: default;
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    .sti-JsonViewer-item-1a936[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-JsonViewer-item-1a936[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-JsonViewer-item-1a936 {
+    --sti-tree-level: var(--tree-item-level, 1);
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="1"] {
+    --sti-tree-level: 1;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="2"] {
+    --sti-tree-level: 2;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="3"] {
+    --sti-tree-level: 3;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="4"] {
+    --sti-tree-level: 4;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="5"] {
+    --sti-tree-level: 5;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="6"] {
+    --sti-tree-level: 6;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="7"] {
+    --sti-tree-level: 7;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="8"] {
+    --sti-tree-level: 8;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="9"] {
+    --sti-tree-level: 9;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="10"] {
+    --sti-tree-level: 10;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="11"] {
+    --sti-tree-level: 11;
+  }
+
+  .sti-JsonViewer-item-1a936[data-level="12"] {
+    --sti-tree-level: 12;
+  }
+
+  .sti-JsonViewer-row-46407 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-block-size: var(--sti-control-h-sm);
+    white-space: pre;
+    padding-inline-start: calc((var(--sti-tree-level) - 1) * 1.25rem);
+    padding-inline-end: var(--sti-space-2);
+    display: flex;
+  }
+
+  @media (pointer: coarse) {
+    .sti-JsonViewer-row-46407 {
+      min-block-size: var(--sti-control-h-md);
+    }
+  }
+
+  .sti-JsonViewer-chevron-7ac15, .sti-JsonViewer-spacer-5851f {
+    flex: none;
+    place-items: center;
+    block-size: 1.5rem;
+    inline-size: 1.5rem;
+    display: inline-grid;
+  }
+
+  .sti-JsonViewer-chevron-7ac15 {
+    border-radius: var(--sti-radius-sm);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-sm);
+    cursor: pointer;
+    transition: rotate var(--sti-duration-fast) var(--sti-ease-snap);
+    background: none;
+    border: 0;
+    padding: 0;
+  }
+
+  @media (hover: hover) {
+    .sti-JsonViewer-chevron-7ac15[data-hovered] {
+      background: var(--sti-bg-surface-active);
+      color: var(--sti-fg);
+    }
+  }
+
+  .sti-JsonViewer-chevron-7ac15[data-expanded] {
+    rotate: 90deg;
+  }
+
+  .sti-JsonViewer-key-b1e01 {
+    color: var(--sti-fg-info);
+  }
+
+  .sti-JsonViewer-key-b1e01[data-index] {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-JsonViewer-colon-92e1d {
+    color: var(--sti-fg-muted);
+    margin-inline-end: var(--sti-space-1);
+  }
+
+  .sti-JsonViewer-summary-e40dc {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-JsonViewer-value-ef406[data-type="string"] {
+    color: var(--sti-fg-success);
+  }
+
+  .sti-JsonViewer-value-ef406[data-type="number"] {
+    color: var(--sti-fg-warning);
+  }
+
+  .sti-JsonViewer-value-ef406[data-type="boolean"] {
+    color: var(--sti-fg-signal);
+  }
+
+  .sti-JsonViewer-value-ef406[data-type="null"], .sti-JsonViewer-value-ef406[data-type="invalid"] {
+    color: var(--sti-fg-muted);
+    font-style: italic;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-JsonViewer-chevron-7ac15 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-JsonViewer-root-e86b2, .sti-JsonViewer-head-e97fe {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/components/JsonViewer/JsonViewer.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+export interface JsonViewerProps {
+  /** JSON'a dönüştürülebilir değer. */
+  data: unknown;
+  /** Ağacın erişilebilir adı; varsayılan "JSON verisi". */
+  label?: string;
+  /** Başlık şeridindeki ad ("Web kancası yükü"). */
+  title?: ReactNode;
+  /** Başlangıçta açık düzey sayısı; varsayılan 1 (0: hepsi kapalı). */
+  defaultExpandDepth?: number;
+  /** Kopyalama düğmesi; varsayılan açık. */
+  copyable?: boolean;
+  /** Ağaç alanının en büyük yüksekliği: `sm` 12, `md` 20, `lg` 32rem. */
+  maxHeight?: "sm" | "md" | "lg";
+  className?: string;
+  id?: string;
+}
+/**
+ * JSON görüntüleyici: veriyi açılıp kapanan ağaç olarak gösterir (APG Tree). Alan adları ve türüne
+ * göre renkli değerler; kapalı nesne ve dizinin öğe sayısı; bütün JSON'u kopyalama.
+ */
+export declare function JsonViewer({ data, label, title, defaultExpandDepth, copyable, maxHeight, className, id }: JsonViewerProps): import("react").JSX.Element;