@stisocial/ui 0.1.0 → 0.2.0

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,90 @@
+"use client";
+import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import Accordion_module_default from "./Accordion.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Button, Disclosure, DisclosureGroup, DisclosurePanel, Heading } from "react-aria-components";
+// src/components/Accordion/Accordion.tsx
+/**
+* Akordeon (APG Accordion): üst üste başlıklar; her başlıktaki düğme kendi bölümünü açar. Enter ve
+* Boşluk açıp kapatır; ↑ ↓ başlıklar arasında gezer, Home ve End ilk ve son başlığa gider.
+*/
+function Accordion({ label, items, allowsMultiple = false, expandedKeys, defaultExpandedKeys, onExpandedChange, headingLevel = 3, variant = "flush", size = "md", isDisabled, className, id, ref }) {
+	const root = useRef(null);
+	const onKeyDown = (e) => {
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		const triggers = Array.from(root.current?.querySelectorAll("[data-accordion-trigger]:not(:disabled)") ?? []);
+		const at = triggers.indexOf(document.activeElement);
+		if (at < 0) return;
+		e.preventDefault();
+		triggers[e.key === "Home" ? 0 : e.key === "End" ? triggers.length - 1 : (at + (e.key === "ArrowDown" ? 1 : -1) + triggers.length) % triggers.length]?.focus();
+	};
+	return /* @__PURE__ */ jsx("section", {
+		ref: (node) => {
+			root.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		id,
+		"aria-label": label,
+		className: [Accordion_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"data-size": size,
+		onKeyDown,
+		children: /* @__PURE__ */ jsx(DisclosureGroup, {
+			className: Accordion_module_default.group,
+			allowsMultipleExpanded: allowsMultiple,
+			expandedKeys,
+			defaultExpandedKeys,
+			onExpandedChange: onExpandedChange ? (keys) => onExpandedChange(new Set(Array.from(keys, String))) : void 0,
+			isDisabled,
+			children: items.map((item) => /* @__PURE__ */ jsxs(Disclosure, {
+				id: item.id,
+				className: Accordion_module_default.item,
+				isDisabled: item.isDisabled,
+				children: [/* @__PURE__ */ jsx(Heading, {
+					level: headingLevel,
+					className: Accordion_module_default.heading,
+					children: /* @__PURE__ */ jsxs(Button, {
+						slot: "trigger",
+						className: Accordion_module_default.trigger,
+						"data-accordion-trigger": "",
+						children: [
+							item.icon ? /* @__PURE__ */ jsx("span", {
+								className: Accordion_module_default.icon,
+								"aria-hidden": "true",
+								children: item.icon
+							}) : null,
+							/* @__PURE__ */ jsxs("span", {
+								className: Accordion_module_default.title,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: Accordion_module_default.name,
+									children: item.title
+								}), item.description ? /* @__PURE__ */ jsx("span", {
+									className: Accordion_module_default.description,
+									children: item.description
+								}) : null]
+							}),
+							/* @__PURE__ */ jsx(ChevronDownIcon, {
+								className: Accordion_module_default.chevron,
+								size: "md"
+							})
+						]
+					})
+				}), /* @__PURE__ */ jsx(DisclosurePanel, {
+					className: Accordion_module_default.panel,
+					children: /* @__PURE__ */ jsx("div", {
+						className: Accordion_module_default.content,
+						children: item.content
+					})
+				})]
+			}, item.id))
+		})
+	});
+}
+export { Accordion };

package/dist/components/Accordion/Accordion.module.js

@@ -0,0 +1,17 @@
+import './Accordion.css';
+// src/components/Accordion/Accordion.module.css
+var Accordion_module_default = {
+	"root": "sti-Accordion-root-3bc1b",
+	"group": "sti-Accordion-group-84d77",
+	"item": "sti-Accordion-item-aa828",
+	"heading": "sti-Accordion-heading-bc71f",
+	"trigger": "sti-Accordion-trigger-4ad24",
+	"icon": "sti-Accordion-icon-f8291",
+	"title": "sti-Accordion-title-a05be",
+	"name": "sti-Accordion-name-66847",
+	"description": "sti-Accordion-description-572eb",
+	"chevron": "sti-Accordion-chevron-53919",
+	"panel": "sti-Accordion-panel-33d52",
+	"content": "sti-Accordion-content-ae7b8"
+};
+export { Accordion_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Accordion, AccordionItem, AccordionProps, AccordionSize, AccordionVariant } from "./Accordion.js";
+export { Accordion, AccordionItem, AccordionProps, AccordionSize, AccordionVariant };

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,6 +1,6 @@
 "use client";
-import { useLocale, useMessages } from "../../provider/UIProvider.js";
 import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
 import listbox_module_default from "../_internal/listbox/listbox.module.js";
 import { useThemeContext } from "../_internal/themeContext.js";
 import { fieldStyles } from "../Field/Field.js";

package/dist/components/Combobox/Combobox.js

@@ -1,6 +1,6 @@
 "use client";
-import { useLocale, useMessages } from "../../provider/UIProvider.js";
 import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import { useLocale, useMessages } from "../../provider/UIProvider.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";

package/dist/components/Disclosure/Disclosure.css

@@ -0,0 +1,162 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Disclosure-root-f2fc0 {
+    --sti-disclosure-h: var(--sti-control-h-md);
+    --sti-disclosure-px: var(--sti-space-2);
+    --sti-disclosure-gap: var(--sti-space-2);
+    --sti-disclosure-title-size: var(--sti-font-size-md);
+    --sti-disclosure-title-leading: var(--sti-line-height-md);
+    --sti-disclosure-radius: var(--sti-radius-sm);
+    --sti-disclosure-bg: transparent;
+    --sti-disclosure-border: transparent;
+    border: var(--sti-border-width) solid var(--sti-disclosure-border);
+    border-radius: var(--sti-disclosure-radius);
+    background: var(--sti-disclosure-bg);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+  }
+
+  .sti-Disclosure-root-f2fc0[data-size="sm"] {
+    --sti-disclosure-h: var(--sti-control-h-sm);
+    --sti-disclosure-title-size: var(--sti-font-size-sm);
+    --sti-disclosure-title-leading: var(--sti-line-height-sm);
+  }
+
+  .sti-Disclosure-root-f2fc0[data-size="lg"] {
+    --sti-disclosure-h: var(--sti-control-h-lg);
+    --sti-disclosure-title-size: var(--sti-font-size-lg);
+    --sti-disclosure-title-leading: var(--sti-line-height-lg);
+  }
+
+  .sti-Disclosure-root-f2fc0[data-variant="card"] {
+    --sti-disclosure-px: var(--sti-space-4);
+    --sti-disclosure-radius: var(--sti-radius-md);
+    --sti-disclosure-bg: var(--sti-bg-surface);
+    --sti-disclosure-border: var(--sti-border-subtle);
+  }
+
+  .sti-Disclosure-heading-5f17b {
+    font: inherit;
+    margin: 0;
+  }
+
+  .sti-Disclosure-trigger-e98e8 {
+    inline-size: 100%;
+    min-block-size: var(--sti-disclosure-h);
+    align-items: center;
+    gap: var(--sti-disclosure-gap);
+    padding-block: var(--sti-space-1);
+    padding-inline: var(--sti-disclosure-px);
+    border-radius: inherit;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    transition: background var(--sti-duration-fast) var(--sti-ease-snap);
+    background: none;
+    border: 0;
+    outline: none;
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    .sti-Disclosure-trigger-e98e8[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-Disclosure-trigger-e98e8[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-Disclosure-trigger-e98e8[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-Disclosure-trigger-e98e8[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-Disclosure-chevron-b1c4a {
+    color: var(--sti-fg-muted);
+    transition: rotate var(--sti-duration-fast) var(--sti-ease-snap);
+    flex: none;
+  }
+
+  .sti-Disclosure-root-f2fc0[data-expanded] .sti-Disclosure-chevron-b1c4a {
+    rotate: 90deg;
+  }
+
+  .sti-Disclosure-chevron-b1c4a:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    rotate: 180deg;
+  }
+
+  .sti-Disclosure-root-f2fc0[data-expanded] .sti-Disclosure-chevron-b1c4a:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    rotate: 90deg;
+  }
+
+  .sti-Disclosure-icon-d518f {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-Disclosure-title-20578 {
+    flex: 1;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-Disclosure-name-974cd {
+    font-size: var(--sti-disclosure-title-size);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-disclosure-title-leading);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-Disclosure-description-531ba {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-Disclosure-content-5ce28 {
+    padding-block: var(--sti-space-1) var(--sti-space-4);
+    padding-inline: calc(var(--sti-disclosure-px) + var(--sti-icon-md) + var(--sti-disclosure-gap));
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-Disclosure-panel-9d008 {
+    min-inline-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-Disclosure-root-f2fc0[data-variant="card"] {
+      border-color: canvastext;
+    }
+
+    .sti-Disclosure-trigger-e98e8[data-hovered] {
+      outline: var(--sti-border-width) solid Highlight;
+      outline-offset: calc(var(--sti-border-width) * -1);
+    }
+
+    .sti-Disclosure-trigger-e98e8[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Disclosure-chevron-b1c4a, .sti-Disclosure-trigger-e98e8 {
+      transition: none;
+    }
+  }
+}

package/dist/components/Disclosure/Disclosure.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, Ref } from "react";
+export type DisclosureSize = "sm" | "md" | "lg";
+export type DisclosureVariant = "plain" | "card";
+export interface DisclosureProps {
+  /** Başlık (zorunlu): düğmenin adıdır ve açılan bölümü adlandırır. */
+  title: ReactNode;
+  /** Açılan içerik. */
+  children: ReactNode;
+  /** Başlığın altında kısa not (açık/kapalı iken görünür). */
+  description?: ReactNode;
+  /** Başlığın önünde süs ikonu. */
+  icon?: ReactNode;
+  /** Başlığın belge düzeyi (sayfanın başlık yapısına göre); görünüşü değişmez. */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  /** Görünüş: `plain` çizgisiz, `card` kenarlı kart. */
+  variant?: DisclosureVariant;
+  /** Boy: `sm`, `md`, `lg` (başlık yazısı ve düğme yüksekliği). */
+  size?: DisclosureSize;
+  isExpanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (isExpanded: boolean) => void;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Açılır bölüm (APG Disclosure): başlıktaki düğme içeriği açar ve kapatır. Düğme Enter ya da
+ * Boşlukla etkinleşir; `aria-expanded` durumu bildirir. Birden çok bölümün birlikte durduğu
+ * yerde `Accordion` kullanılır.
+ */
+export declare function Disclosure({ title, children, description, icon, headingLevel, variant, size, isExpanded, defaultExpanded, onExpandedChange, isDisabled, className, id, ref }: DisclosureProps): import("react").JSX.Element;

package/dist/components/Disclosure/Disclosure.js

@@ -0,0 +1,60 @@
+"use client";
+import { ChevronRightIcon } from "../../icons/generated/ChevronRightIcon.js";
+import Disclosure_module_default from "./Disclosure.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
+// src/components/Disclosure/Disclosure.tsx
+/**
+* Açılır bölüm (APG Disclosure): başlıktaki düğme içeriği açar ve kapatır. Düğme Enter ya da
+* Boşlukla etkinleşir; `aria-expanded` durumu bildirir. Birden çok bölümün birlikte durduğu
+* yerde `Accordion` kullanılır.
+*/
+function Disclosure$1({ title, children, description, icon, headingLevel = 3, variant = "plain", size = "md", isExpanded, defaultExpanded, onExpandedChange, isDisabled, className, id, ref }) {
+	return /* @__PURE__ */ jsxs(Disclosure, {
+		ref,
+		id,
+		className: [Disclosure_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"data-size": size,
+		isExpanded,
+		defaultExpanded,
+		onExpandedChange,
+		isDisabled,
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: headingLevel,
+			className: Disclosure_module_default.heading,
+			children: /* @__PURE__ */ jsxs(Button, {
+				slot: "trigger",
+				className: Disclosure_module_default.trigger,
+				children: [
+					/* @__PURE__ */ jsx(ChevronRightIcon, {
+						className: Disclosure_module_default.chevron,
+						size: "md"
+					}),
+					icon ? /* @__PURE__ */ jsx("span", {
+						className: Disclosure_module_default.icon,
+						"aria-hidden": "true",
+						children: icon
+					}) : null,
+					/* @__PURE__ */ jsxs("span", {
+						className: Disclosure_module_default.title,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: Disclosure_module_default.name,
+							children: title
+						}), description ? /* @__PURE__ */ jsx("span", {
+							className: Disclosure_module_default.description,
+							children: description
+						}) : null]
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx(DisclosurePanel, {
+			className: Disclosure_module_default.panel,
+			children: /* @__PURE__ */ jsx("div", {
+				className: Disclosure_module_default.content,
+				children
+			})
+		})]
+	});
+}
+export { Disclosure$1 as Disclosure };

package/dist/components/Disclosure/Disclosure.module.js

@@ -0,0 +1,15 @@
+import './Disclosure.css';
+// src/components/Disclosure/Disclosure.module.css
+var Disclosure_module_default = {
+	"root": "sti-Disclosure-root-f2fc0",
+	"heading": "sti-Disclosure-heading-5f17b",
+	"trigger": "sti-Disclosure-trigger-e98e8",
+	"chevron": "sti-Disclosure-chevron-b1c4a",
+	"icon": "sti-Disclosure-icon-d518f",
+	"title": "sti-Disclosure-title-20578",
+	"name": "sti-Disclosure-name-974cd",
+	"description": "sti-Disclosure-description-531ba",
+	"content": "sti-Disclosure-content-5ce28",
+	"panel": "sti-Disclosure-panel-9d008"
+};
+export { Disclosure_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Disclosure, DisclosureProps, DisclosureSize, DisclosureVariant } from "./Disclosure.js";
+export { Disclosure, DisclosureProps, DisclosureSize, DisclosureVariant };

package/dist/components/DocumentLayout/DocumentLayout.css

@@ -0,0 +1,202 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-DocumentLayout-root-48bdf {
+    --sti-document-font-size: var(--sti-font-size-md);
+    --sti-document-line-height: var(--sti-line-height-md);
+    --sti-document-gap: var(--sti-space-6);
+    --sti-document-cell: var(--sti-space-2);
+    --sti-document-max-width: calc(var(--sti-space-32) * 6.5);
+    --sti-document-padding: var(--sti-space-10);
+    --sti-document-bg: var(--sti-bg-surface);
+    --sti-document-border: var(--sti-border-subtle);
+    --sti-document-radius: var(--sti-radius-md);
+    isolation: isolate;
+    box-sizing: border-box;
+    gap: var(--sti-document-gap);
+    inline-size: 100%;
+    max-inline-size: var(--sti-document-max-width);
+    min-inline-size: 0;
+    min-block-size: calc(var(--sti-space-32) * 3);
+    padding: var(--sti-document-padding);
+    border: var(--sti-border-width) solid var(--sti-document-border);
+    border-radius: var(--sti-document-radius);
+    background: var(--sti-document-bg);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-document-font-size);
+    line-height: var(--sti-document-line-height);
+    flex-direction: column;
+    margin-inline: auto;
+    display: flex;
+    position: relative;
+    container-type: inline-size;
+  }
+
+  .sti-DocumentLayout-root-48bdf[data-size="sm"] {
+    --sti-document-font-size: var(--sti-font-size-sm);
+    --sti-document-line-height: var(--sti-line-height-sm);
+    --sti-document-gap: var(--sti-space-4);
+    --sti-document-cell: var(--sti-space-1);
+    --sti-document-padding: var(--sti-space-6);
+  }
+
+  .sti-DocumentLayout-root-48bdf[data-size="lg"] {
+    --sti-document-font-size: var(--sti-font-size-body);
+    --sti-document-line-height: var(--sti-line-height-body);
+    --sti-document-gap: var(--sti-space-8);
+    --sti-document-cell: var(--sti-space-3);
+    --sti-document-padding: var(--sti-space-12);
+  }
+
+  @media (width <= 48rem) {
+    .sti-DocumentLayout-root-48bdf {
+      --sti-document-padding: var(--sti-space-4);
+    }
+
+    .sti-DocumentLayout-root-48bdf[data-size="sm"] {
+      --sti-document-padding: var(--sti-space-3);
+    }
+
+    .sti-DocumentLayout-root-48bdf[data-size="lg"] {
+      --sti-document-padding: var(--sti-space-5);
+    }
+  }
+
+  .sti-DocumentLayout-header-89771 {
+    gap: var(--sti-space-4);
+    border-block-end: var(--sti-border-width-strong) solid var(--sti-border-accent);
+    flex-direction: column;
+    padding-block-end: var(--sti-document-gap);
+    display: flex;
+  }
+
+  .sti-DocumentLayout-letterhead-430ff {
+    align-items: center;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-DocumentLayout-logo-f025e {
+    max-inline-size: var(--sti-space-24);
+    max-block-size: var(--sti-space-16);
+    flex: none;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sti-DocumentLayout-org-a1c6a {
+    min-inline-size: 0;
+  }
+
+  .sti-DocumentLayout-orgName-849c5 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-DocumentLayout-detail-294e2 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-DocumentLayout-titleBlock-38e2f {
+    gap: var(--sti-space-2);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-DocumentLayout-title-2f41d {
+    font-size: var(--sti-font-size-2xl);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-2xl);
+    letter-spacing: var(--sti-tracking-2xl);
+    text-wrap: balance;
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-DocumentLayout-meta-9f605 {
+    gap: var(--sti-space-0-5);
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-DocumentLayout-metaRow-75bb8 {
+    gap: 0 var(--sti-space-2);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-DocumentLayout-metaLabel-e1dbe {
+    color: var(--sti-fg-muted);
+    margin: 0;
+  }
+
+  .sti-DocumentLayout-metaValue-4e499 {
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-DocumentLayout-body-8f7be {
+    gap: var(--sti-document-gap);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-DocumentLayout-footer-0e39f {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    padding-block-start: var(--sti-space-3);
+  }
+
+  @container (inline-size >= 36rem) {
+    .sti-DocumentLayout-header-89771 {
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: var(--sti-space-6);
+      flex-direction: row;
+    }
+
+    .sti-DocumentLayout-titleBlock-38e2f {
+      text-align: end;
+      align-items: flex-end;
+    }
+
+    .sti-DocumentLayout-metaRow-75bb8 {
+      justify-content: flex-end;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-DocumentLayout-root-48bdf {
+      border-color: canvastext;
+    }
+
+    .sti-DocumentLayout-header-89771 {
+      border-block-end-color: canvastext;
+    }
+  }
+
+  @media print {
+    .sti-DocumentLayout-root-48bdf {
+      background: none;
+      border: 0;
+      border-radius: 0;
+      max-inline-size: none;
+      padding: 0;
+    }
+  }
+}

package/dist/components/DocumentLayout/DocumentLayout.d.ts

@@ -0,0 +1,33 @@
+import { DocumentMetaItem, DocumentSize } from "../_document/types.js";
+import { ReactNode } from "react";
+export interface DocumentLetterhead {
+  /** Kurum adı. */
+  name: string;
+  /** Logo: genellikle `<img alt="">`; kurum adı yanında yazıldığından süstür. */
+  logo?: ReactNode;
+  /** Antetin alt satırları: adres, vergi dairesi ve numarası, telefon, web adresi. */
+  details?: readonly string[];
+}
+export interface DocumentLayoutProps {
+  /** Belgenin başlığı ("Fatura", "Teklif"); belgenin tek `h1`'idir (`titleLevel` ile değişir). */
+  title: ReactNode;
+  titleLevel?: 1 | 2;
+  /** Antet: logo, kurum adı ve künye satırları. */
+  letterhead?: DocumentLetterhead;
+  /** Başlığın altında ad–değer künyesi (belge no, düzenleme tarihi, vade). */
+  meta?: readonly DocumentMetaItem[];
+  /** Sayfa altı: sayfa numarası, gizlilik notu, kurum bilgisi. */
+  footer?: ReactNode;
+  /** Sayfanın üstüne bindirilen damga (`Watermark`); sayfa konumlu bir kap olur. */
+  watermark?: ReactNode;
+  /** Yazı ve boşluk yoğunluğu; içindeki belge bileşenlerine kalıtılır. */
+  size?: DocumentSize;
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Belge sayfası: antetli, başlıklı, künyeli, ekranda kâğıt görünümlü, yazdırınca çerçevesiz
+ * sayfa. Sunucu bileşenidir. Yerleşik metin taşımaz; bütün metinler özellikle verilir.
+ */
+export declare function DocumentLayout({ title, titleLevel, letterhead, meta, footer, watermark, size, children, className, id }: DocumentLayoutProps): import("react").JSX.Element;