@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/Switch/Switch.module.js

@@ -0,0 +1,10 @@
+import './Switch.css';
+// src/components/Switch/Switch.module.css
+var Switch_module_default = {
+	"root": "sti-Switch-root-62117",
+	"track": "sti-Switch-track-c45c8",
+	"label": "sti-Switch-label-090bd",
+	"control": "sti-Switch-control-85957",
+	"knob": "sti-Switch-knob-8f65a"
+};
+export { Switch_module_default as default };

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

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

package/dist/components/TableOfContents/TableOfContents.css

@@ -0,0 +1,86 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TableOfContents-root-70214 {
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-TableOfContents-title-d340d {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-TableOfContents-list-2b993 {
+    box-shadow: inset var(--sti-border-width) 0 0 var(--sti-border-subtle);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-TableOfContents-list-2b993: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)) {
+    box-shadow: inset calc(var(--sti-border-width) * -1) 0 0 var(--sti-border-subtle);
+  }
+
+  .sti-TableOfContents-link-00162 {
+    padding-block: var(--sti-space-1);
+    padding-inline: var(--sti-space-3) var(--sti-space-1);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    transition: color var(--sti-duration-fast) var(--sti-ease-snap);
+    border-start-end-radius: var(--sti-radius-sm);
+    border-end-end-radius: var(--sti-radius-sm);
+    outline: none;
+    text-decoration: none;
+    display: block;
+    position: relative;
+  }
+
+  li[data-level="3"] .sti-TableOfContents-link-00162 {
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    padding-inline-start: var(--sti-space-6);
+  }
+
+  @media (hover: hover) {
+    .sti-TableOfContents-link-00162[data-hovered]:not([data-current]) {
+      color: var(--sti-fg);
+    }
+  }
+
+  .sti-TableOfContents-link-00162[data-current] {
+    color: var(--sti-fg-accent-strong);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-TableOfContents-link-00162[data-current]:before {
+    content: "";
+    inset-block: var(--sti-space-1);
+    background: var(--sti-fg-accent);
+    border-radius: 2px;
+    inline-size: 2px;
+    position: absolute;
+    inset-inline-start: 0;
+  }
+
+  .sti-TableOfContents-link-00162[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  @media (forced-colors: active) {
+    .sti-TableOfContents-link-00162 {
+      color: linktext;
+    }
+
+    .sti-TableOfContents-link-00162[data-current]:before {
+      background: highlight;
+    }
+  }
+}

package/dist/components/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,27 @@
+export interface TocItem {
+  /** Başlığın `id` özniteliği (bağlantı `#id`'ye gider). */
+  id: string;
+  label: string;
+  /** Başlık düzeyi: 2 (varsayılan) ve 3 girintisiz ve girintili gösterilir; 4 ve üstü 3 gibi. */
+  level?: number;
+}
+export interface TableOfContentsProps {
+  items: readonly TocItem[];
+  /** Başlık; verilmezse "Bu sayfada". Bölge bu başlıkla adlanır. */
+  title?: string;
+  /**
+   * Etkin başlığı uygulama belirlerse (ör. kendi gözlemcisiyle). Verilmezse kaydırmaya göre
+   * kendiliğinden bulunur.
+   */
+  activeId?: string;
+  /** Sabit üst çubuğun yüksekliği (piksel): başlık bu çizgiyi geçince etkin sayılır. Varsayılan 96. */
+  offset?: number;
+  className?: string;
+  id?: string;
+}
+/**
+ * İçindekiler: uzun sayfanın başlıklarına bağlantılar; okunan bölüm turkuaz çubukla işaretlenir ve
+ * `aria-current="location"` taşır. Alt başlıklar girintilidir. Bağlantılar gerçek `#id`
+ * bağlantılarıdır: adres paylaşılabilir, tarayıcının geri tuşu çalışır, odak başlığa taşınır.
+ */
+export declare function TableOfContents({ items, title, activeId, offset, className, id }: TableOfContentsProps): import("react").JSX.Element | null;

package/dist/components/TableOfContents/TableOfContents.js

@@ -0,0 +1,46 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { useActiveSection } from "../_internal/nav/useActiveSection.js";
+import TableOfContents_module_default from "./TableOfContents.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Link } from "react-aria-components";
+// src/components/TableOfContents/TableOfContents.tsx
+/**
+* İçindekiler: uzun sayfanın başlıklarına bağlantılar; okunan bölüm turkuaz çubukla işaretlenir ve
+* `aria-current="location"` taşır. Alt başlıklar girintilidir. Bağlantılar gerçek `#id`
+* bağlantılarıdır: adres paylaşılabilir, tarayıcının geri tuşu çalışır, odak başlığa taşınır.
+*/
+function TableOfContents({ items, title, activeId, offset = 96, className, id }) {
+	const t = useMessages();
+	const titleId = useId();
+	const spied = useActiveSection(items.map((i) => i.id), offset);
+	const active = activeId ?? spied;
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsxs("nav", {
+		id,
+		"aria-labelledby": titleId,
+		className: [TableOfContents_module_default.root, className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("span", {
+			id: titleId,
+			className: TableOfContents_module_default.title,
+			children: title ?? t.tocTitle
+		}), /* @__PURE__ */ jsx("ul", {
+			className: TableOfContents_module_default.list,
+			children: items.map((item) => {
+				const current = item.id === active;
+				return /* @__PURE__ */ jsx("li", {
+					"data-level": Math.min(Math.max(item.level ?? 2, 2), 3),
+					children: /* @__PURE__ */ jsx(Link, {
+						href: `#${encodeURIComponent(item.id)}`,
+						"aria-current": current ? "location" : void 0,
+						"data-current": current || void 0,
+						className: TableOfContents_module_default.link,
+						children: item.label
+					})
+				}, item.id);
+			})
+		})]
+	});
+}
+export { TableOfContents };

package/dist/components/TableOfContents/TableOfContents.module.js

@@ -0,0 +1,9 @@
+import './TableOfContents.css';
+// src/components/TableOfContents/TableOfContents.module.css
+var TableOfContents_module_default = {
+	"root": "sti-TableOfContents-root-70214",
+	"title": "sti-TableOfContents-title-d340d",
+	"list": "sti-TableOfContents-list-2b993",
+	"link": "sti-TableOfContents-link-00162"
+};
+export { TableOfContents_module_default as default };

package/dist/components/Tabs/Tabs.css

@@ -0,0 +1,174 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Tabs-root-782d3 {
+    gap: var(--sti-space-4);
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-Tabs-root-782d3[data-orientation="vertical"] {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .sti-Tabs-scroller-c5cfb {
+    scrollbar-width: none;
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
+
+  .sti-Tabs-scroller-c5cfb::-webkit-scrollbar {
+    display: none;
+  }
+
+  .sti-Tabs-root-782d3[data-orientation="vertical"] .sti-Tabs-scroller-c5cfb {
+    overflow: visible;
+  }
+
+  .sti-Tabs-list-4a0e6 {
+    gap: var(--sti-space-1);
+    inline-size: max-content;
+    min-inline-size: 100%;
+    display: flex;
+  }
+
+  .sti-Tabs-root-782d3[data-variant="underline"] .sti-Tabs-list-4a0e6 {
+    gap: var(--sti-space-4);
+    box-shadow: inset 0 calc(var(--sti-border-width) * -1) 0 var(--sti-border-subtle);
+  }
+
+  .sti-Tabs-root-782d3[data-orientation="vertical"] .sti-Tabs-list-4a0e6 {
+    gap: var(--sti-space-0-5);
+    inline-size: auto;
+    min-inline-size: 10rem;
+    box-shadow: inset calc(var(--sti-border-width) * -1) 0 0 var(--sti-border-subtle);
+    flex-direction: column;
+  }
+
+  .sti-Tabs-root-782d3[data-variant="pill"] .sti-Tabs-list-4a0e6 {
+    gap: var(--sti-space-0-5);
+    padding: var(--sti-space-0-5);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-subtle);
+    min-inline-size: 0;
+  }
+
+  .sti-Tabs-tab-6ec8a {
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-block-size: var(--sti-control-h-md);
+    padding-inline: var(--sti-space-1);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-medium);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color var(--sti-duration-fast) var(--sti-ease-snap);
+    outline: none;
+    flex: none;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  @media (hover: hover) {
+    .sti-Tabs-tab-6ec8a[data-hovered]:not([data-selected], [data-disabled]) {
+      color: var(--sti-fg);
+    }
+  }
+
+  .sti-Tabs-tab-6ec8a[data-selected] {
+    color: var(--sti-fg);
+  }
+
+  .sti-Tabs-tab-6ec8a[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+    border-radius: var(--sti-radius-sm);
+  }
+
+  .sti-Tabs-tab-6ec8a[data-disabled] {
+    opacity: .45;
+    cursor: not-allowed;
+  }
+
+  .sti-Tabs-root-782d3[data-variant="underline"] .sti-Tabs-tab-6ec8a[data-selected]:after {
+    content: "";
+    background: var(--sti-fg-accent);
+    border-radius: 2px 2px 0 0;
+    block-size: 2px;
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline: 0;
+  }
+
+  .sti-Tabs-root-782d3[data-orientation="vertical"][data-variant="underline"] .sti-Tabs-tab-6ec8a {
+    padding-inline: var(--sti-space-3);
+  }
+
+  .sti-Tabs-root-782d3[data-orientation="vertical"][data-variant="underline"] .sti-Tabs-tab-6ec8a[data-selected]:after {
+    inset-block: var(--sti-space-1);
+    border-radius: 2px 0 0 2px;
+    block-size: auto;
+    inline-size: 2px;
+    inset-inline: auto 0;
+  }
+
+  .sti-Tabs-root-782d3[data-variant="pill"] .sti-Tabs-tab-6ec8a {
+    min-block-size: var(--sti-control-h-sm);
+    padding-inline: var(--sti-space-4);
+    border-radius: var(--sti-radius-pill);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-Tabs-root-782d3[data-variant="pill"] .sti-Tabs-tab-6ec8a[data-selected] {
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-sm);
+  }
+
+  .sti-Tabs-icon-06715 {
+    font-size: var(--sti-icon-sm);
+    display: inline-flex;
+  }
+
+  .sti-Tabs-badge-3882e {
+    min-inline-size: 1.5em;
+    padding-inline: var(--sti-space-1);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    place-items: center;
+    line-height: 1.5;
+    display: inline-grid;
+  }
+
+  .sti-Tabs-tab-6ec8a[data-selected] .sti-Tabs-badge-3882e {
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+  }
+
+  .sti-Tabs-panel-23be7 {
+    border-radius: var(--sti-radius-md);
+    outline: none;
+    min-inline-size: 0;
+  }
+
+  .sti-Tabs-panel-23be7[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  @media (forced-colors: active) {
+    .sti-Tabs-root-782d3[data-variant="underline"] .sti-Tabs-tab-6ec8a[data-selected]:after {
+      background: highlight;
+    }
+
+    .sti-Tabs-root-782d3[data-variant="pill"] .sti-Tabs-tab-6ec8a[data-selected] {
+      outline: var(--sti-border-width) solid Highlight;
+    }
+  }
+}

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+export interface TabsProps {
+  children: ReactNode;
+  /** Seçili sekmenin anahtarı; denetimli. */
+  selectedKey?: string;
+  defaultSelectedKey?: string;
+  onSelectionChange?: (key: string) => void;
+  /**
+   * Görünüş: `underline` (varsayılan; sayfa ve kart bölümleri) altı çizili, `pill` (araç
+   * çubukları, filtreler) dolgulu hap.
+   */
+  variant?: "underline" | "pill";
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Klavye: `automatic` (varsayılan) oklar sekmeyi hemen seçer; `manual` oklar yalnız odaklar,
+   * Enter ya da Boşluk seçer (paneli yüklemek pahalıysa).
+   */
+  keyboardActivation?: "automatic" | "manual";
+  disabledKeys?: readonly string[];
+  className?: string;
+  id?: string;
+}
+/**
+ * Sekmeler (APG Tabs, React Aria): TabList içinde Tab'lar, altında TabPanel'ler. Oklar sekmeler
+ * arasında gezer (yatayda ← →, dikeyde ↑ ↓), Home/End ilk ve son; Tab panele geçer. Sekmeler
+ * sığmazsa liste yatay kayar. `href` verilen sekme sayfa değiştirir (adres sekmeyi belirler).
+ */
+export declare function Tabs({ children, selectedKey, defaultSelectedKey, onSelectionChange, variant, orientation, keyboardActivation, disabledKeys, className, id }: TabsProps): import("react").JSX.Element;
+export interface TabListProps {
+  /** Sekme listesinin adı ("Hesap ayarları"). */
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  children: ReactNode;
+  className?: string;
+}
+/** Sekme listesi: sığmazsa yatay kayar, kaydırma çubuğu gizlidir. */
+export declare function TabList({ children, className, ...rest }: TabListProps): import("react").JSX.Element;
+export interface TabProps {
+  /** Sekmenin anahtarı (TabPanel'in `id`'siyle aynı). */
+  id: string;
+  children: ReactNode;
+  /** Adın önünde süs ikonu. */
+  icon?: ReactNode;
+  /** Adın yanında sayı ya da rozet (ör. bekleyen kayıt sayısı). */
+  badge?: ReactNode;
+  /** Verilirse sekme bağlantıdır (sayfa değiştirir). */
+  href?: string;
+  isDisabled?: boolean;
+  className?: string;
+}
+/** Sekme. */
+export declare function Tab({ id, children, icon, badge, href, isDisabled, className }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps {
+  id: string;
+  children: ReactNode;
+  /** Seçili olmayan panel çizili kalır (formun durumu korunur); varsayılan kaldırılır. */
+  shouldForceMount?: boolean;
+  className?: string;
+}
+/** Sekme paneli: sekmesiyle adlanır, odaklanabilir (içinde odaklanacak öğe yoksa). */
+export declare function TabPanel({ id, children, shouldForceMount, className }: TabPanelProps): import("react").JSX.Element;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,69 @@
+"use client";
+import Tabs_module_default from "./Tabs.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
+// src/components/Tabs/Tabs.tsx
+/**
+* Sekmeler (APG Tabs, React Aria): TabList içinde Tab'lar, altında TabPanel'ler. Oklar sekmeler
+* arasında gezer (yatayda ← →, dikeyde ↑ ↓), Home/End ilk ve son; Tab panele geçer. Sekmeler
+* sığmazsa liste yatay kayar. `href` verilen sekme sayfa değiştirir (adres sekmeyi belirler).
+*/
+function Tabs$1({ children, selectedKey, defaultSelectedKey, onSelectionChange, variant = "underline", orientation = "horizontal", keyboardActivation = "automatic", disabledKeys, className, id }) {
+	return /* @__PURE__ */ jsx(Tabs, {
+		id,
+		selectedKey,
+		defaultSelectedKey,
+		onSelectionChange: onSelectionChange ? (k) => onSelectionChange(String(k)) : void 0,
+		orientation,
+		keyboardActivation,
+		disabledKeys,
+		className: [Tabs_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		children
+	});
+}
+/** Sekme listesi: sığmazsa yatay kayar, kaydırma çubuğu gizlidir. */
+function TabList$1({ children, className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: Tabs_module_default.scroller,
+		children: /* @__PURE__ */ jsx(TabList, {
+			...rest,
+			className: [Tabs_module_default.list, className].filter(Boolean).join(" "),
+			children
+		})
+	});
+}
+/** Sekme. */
+function Tab$1({ id, children, icon, badge, href, isDisabled, className }) {
+	return /* @__PURE__ */ jsxs(Tab, {
+		id,
+		href,
+		isDisabled,
+		className: [Tabs_module_default.tab, className].filter(Boolean).join(" "),
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: Tabs_module_default.icon,
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: Tabs_module_default.label,
+				children
+			}),
+			badge !== void 0 && badge !== null ? /* @__PURE__ */ jsx("span", {
+				className: Tabs_module_default.badge,
+				children: badge
+			}) : null
+		]
+	});
+}
+/** Sekme paneli: sekmesiyle adlanır, odaklanabilir (içinde odaklanacak öğe yoksa). */
+function TabPanel$1({ id, children, shouldForceMount, className }) {
+	return /* @__PURE__ */ jsx(TabPanel, {
+		id,
+		shouldForceMount,
+		className: [Tabs_module_default.panel, className].filter(Boolean).join(" "),
+		children
+	});
+}
+export { Tab$1 as Tab, TabList$1 as TabList, TabPanel$1 as TabPanel, Tabs$1 as Tabs };

package/dist/components/Tabs/Tabs.module.js

@@ -0,0 +1,12 @@
+import './Tabs.css';
+// src/components/Tabs/Tabs.module.css
+var Tabs_module_default = {
+	"root": "sti-Tabs-root-782d3",
+	"scroller": "sti-Tabs-scroller-c5cfb",
+	"list": "sti-Tabs-list-4a0e6",
+	"tab": "sti-Tabs-tab-6ec8a",
+	"icon": "sti-Tabs-icon-06715",
+	"badge": "sti-Tabs-badge-3882e",
+	"panel": "sti-Tabs-panel-23be7"
+};
+export { Tabs_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps } from "./Tabs.js";
+export { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps };

package/dist/components/Tag/Tag.css

@@ -0,0 +1,120 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Tag-root-330f8 {
+    --sti-tag-h: calc(var(--sti-space-6) + var(--sti-space-1));
+    --sti-tag-px: var(--sti-space-3);
+    --sti-tag-gap: var(--sti-space-1);
+    --sti-tag-font-size: var(--sti-font-size-sm);
+    --sti-tag-line-height: var(--sti-line-height-sm);
+    --sti-tag-icon: var(--sti-icon-sm);
+    --sti-tag-radius: var(--sti-radius-pill);
+    --sti-tag-bg: transparent;
+    --sti-tag-fg: var(--sti-fg-muted);
+    --sti-tag-border: var(--sti-border);
+    --sti-tag-press-scale: .98;
+    align-items: flex-start;
+    gap: var(--sti-tag-gap);
+    box-sizing: border-box;
+    max-width: 100%;
+    min-height: var(--sti-tag-h);
+    padding-block: calc((var(--sti-tag-h) - var(--sti-tag-line-height)) /
+      2 -
+      var(--sti-border-width));
+    padding-inline: var(--sti-tag-px);
+    border: var(--sti-border-width) solid var(--sti-tag-border);
+    border-radius: var(--sti-tag-radius);
+    background: var(--sti-tag-bg);
+    color: var(--sti-tag-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-tag-font-size);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-tag-line-height);
+    vertical-align: middle;
+    overflow-wrap: anywhere;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      color var(--sti-duration-fast) var(--sti-ease-snap),
+      transform var(--sti-duration-fast) var(--sti-ease-snap);
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .sti-Tag-root-330f8[data-size="sm"] {
+    --sti-tag-h: var(--sti-space-6);
+    --sti-tag-px: var(--sti-space-2);
+    --sti-tag-font-size: var(--sti-font-size-xs);
+    --sti-tag-line-height: var(--sti-line-height-xs);
+    --sti-tag-icon: var(--sti-font-size-xs);
+  }
+
+  .sti-Tag-root-330f8[data-link] {
+    --sti-tag-fg: var(--sti-fg);
+    --sti-tag-border: var(--sti-border-strong);
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .sti-Tag-root-330f8[data-link][data-hovered] {
+      --sti-tag-border: var(--sti-border-accent);
+      --sti-tag-bg: var(--sti-bg-accent-subtle);
+      --sti-tag-fg: var(--sti-fg-accent-strong);
+    }
+  }
+
+  .sti-Tag-root-330f8[data-link][data-pressed] {
+    transform: scale(var(--sti-tag-press-scale));
+  }
+
+  .sti-Tag-root-330f8[data-link]:focus-visible, .sti-Tag-root-330f8[data-link][data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-Tag-root-330f8[data-link]:focus:not([data-focus-visible]) {
+    outline: none;
+  }
+
+  @media (pointer: coarse) {
+    .sti-Tag-root-330f8[data-link]:after {
+      content: "";
+      inset-inline: calc(var(--sti-border-width) * -1);
+      inset-block: calc((var(--sti-tag-h) - var(--sti-control-h-md)) / 2 - var(--sti-border-width));
+      position: absolute;
+    }
+  }
+
+  .sti-Tag-icon-2e774 {
+    height: var(--sti-tag-line-height);
+    font-size: var(--sti-tag-icon);
+    flex: none;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sti-Tag-label-cfca7 {
+    min-width: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Tag-root-330f8 {
+      transition: none;
+    }
+
+    .sti-Tag-root-330f8[data-link][data-pressed] {
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Tag-root-330f8 {
+      border-color: canvastext;
+    }
+
+    .sti-Tag-root-330f8[data-link] {
+      color: linktext;
+      border-color: linktext;
+    }
+  }
+}

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, Ref } from "react";
+export type TagSize = "sm" | "md";
+interface TagBaseProps {
+  /** Görünür etiket ("Pazarlama", "Next.js"); bağlantıda bağlantının adıdır. */
+  children: ReactNode;
+  /** Etiketin önünde süs ikonu (anlamı etiket taşır). */
+  icon?: ReactNode;
+  /** Boy: `sm` 24, `md` 28 piksel. */
+  size?: TagSize;
+  className?: string;
+  id?: string;
+}
+export interface TagStaticProps extends TagBaseProps {
+  href?: undefined;
+  target?: undefined;
+  ref?: Ref<HTMLSpanElement>;
+}
+export interface TagLinkProps extends TagBaseProps {
+  /** Verilirse etiket bağlantıdır (ör. o sınıftaki bütün içeriklerin listesi). */
+  href: string;
+  /** `_blank` verilirse `rel="noopener noreferrer"` ve "yeni sekmede açılır" bilgisi eklenir. */
+  target?: "_blank" | "_self";
+  ref?: Ref<HTMLAnchorElement>;
+}
+export type TagProps = TagStaticProps | TagLinkProps;
+/**
+ * Sınıflandırma etiketi: içeriğin niteliğini (konu, teknoloji, kategori) gösterir; kenarlı, hap
+ * biçimli. Durum için `Badge`, kaldırılabilir değer için `Chip` kullanılır. Sunucu bileşenidir;
+ * `href` verilirse bağlantı parçası istemcide çizilir.
+ */
+export declare function Tag(props: TagProps): import("react").JSX.Element;
+export {};