@stisocial/ui 0.1.0 → 0.2.0

package/dist/id/OrgSwitcher/OrgSwitcher.css

@@ -0,0 +1,110 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-OrgSwitcher-trigger-8cf9a {
+    --sti-org-switcher-h: var(--sti-control-h-md);
+    --sti-org-switcher-bg: transparent;
+    --sti-org-switcher-border: var(--sti-border-control);
+    align-items: center;
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    block-size: var(--sti-org-switcher-h);
+    max-inline-size: 100%;
+    padding-inline: var(--sti-space-2) var(--sti-space-3);
+    border: var(--sti-border-width) solid var(--sti-org-switcher-border);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-org-switcher-bg);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+    cursor: pointer;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap);
+    display: inline-flex;
+  }
+
+  .sti-OrgSwitcher-trigger-8cf9a[data-size="sm"] {
+    --sti-org-switcher-h: var(--sti-control-h-sm);
+  }
+
+  .sti-OrgSwitcher-trigger-8cf9a[data-size="lg"] {
+    --sti-org-switcher-h: var(--sti-control-h-lg);
+    font-size: var(--sti-font-size-md);
+  }
+
+  @media (pointer: coarse) {
+    .sti-OrgSwitcher-trigger-8cf9a {
+      min-block-size: 2.75rem;
+    }
+  }
+
+  @media (hover: hover) {
+    .sti-OrgSwitcher-trigger-8cf9a[data-hovered]:not([data-disabled]) {
+      --sti-org-switcher-border: var(--sti-border-accent);
+      --sti-org-switcher-bg: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-OrgSwitcher-trigger-8cf9a[data-pressed] {
+    --sti-org-switcher-bg: var(--sti-bg-surface-active);
+  }
+
+  .sti-OrgSwitcher-trigger-8cf9a[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-OrgSwitcher-trigger-8cf9a[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-OrgSwitcher-name-0b2eb {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  .sti-OrgSwitcher-chevron-e70b6 {
+    color: var(--sti-fg-muted);
+    flex: none;
+  }
+
+  .sti-OrgSwitcher-card-297cc {
+    min-inline-size: 0;
+  }
+
+  .sti-OrgSwitcher-body-e5f5e {
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-OrgSwitcher-scroll-eca85 {
+    max-block-size: 18rem;
+    overflow: auto;
+  }
+
+  .sti-OrgSwitcher-empty-1d36a {
+    padding: var(--sti-space-3);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-OrgSwitcher-trigger-8cf9a[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-OrgSwitcher-trigger-8cf9a {
+      transition: none;
+    }
+  }
+}

package/dist/id/OrgSwitcher/OrgSwitcher.d.ts

@@ -0,0 +1,37 @@
+import { Placement } from "../../components/_internal/overlay/FloatingCard.js";
+import "../../components/Popover/Popover.js";
+export interface OrgSwitcherOrg {
+  /** Kalıcı anahtar. */
+  id: string;
+  name: string;
+  /** `company`: kendi firmanız, `client`: müşteri. Birden çok tür varsa gruplanır. */
+  kind: "company" | "client";
+  /** Adın altındaki kısa bilgi (rol, plan). */
+  description?: string;
+  avatarSrc?: string;
+}
+export interface OrgSwitcherProps {
+  orgs: readonly OrgSwitcherOrg[];
+  /** Seçili kuruluşun anahtarı (denetimli). */
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (id: string) => void;
+  /** Verilirse listenin altında "Yeni kuruluş oluşturun" düğmesi çıkar. */
+  onCreate?: () => void;
+  /** Bu sayıdan çok kuruluş varsa arama alanı gösterilir. Varsayılan 7. */
+  searchThreshold?: number;
+  size?: "sm" | "md" | "lg";
+  placement?: Placement;
+  isDisabled?: boolean;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kuruluş değiştirici: geçerli firma ya da müşteriyi gösteren düğme ve altında aranabilir seçim
+ * listesi. Kuruluşlar türüne göre gruplanır. APG Listbox (tek seçim) açılır kutuda: oklar gezer,
+ * Home ve End uçlara gider, harfle arama yapılır, Enter seçer ve kapatır, Escape vazgeçer.
+ */
+export declare function OrgSwitcher({ orgs, value, defaultValue, onChange, onCreate, searchThreshold, size, placement, isDisabled, isOpen, defaultOpen, onOpenChange, className, id }: OrgSwitcherProps): import("react").JSX.Element;

package/dist/id/OrgSwitcher/OrgSwitcher.js

@@ -0,0 +1,153 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import listbox_module_default from "../../components/_internal/listbox/listbox.module.js";
+import { renderOptions } from "../../components/_internal/listbox/options.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { Button as Button$1 } from "../../components/Button/Button.js";
+import { Avatar } from "../../components/Avatar/Avatar.js";
+import { SearchField as SearchField$1 } from "../../components/SearchField/SearchField.js";
+import { Popover as Popover$1 } from "../../components/Popover/Popover.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { BuildingIcon } from "../../icons/generated/BuildingIcon.js";
+import { BriefcaseIcon } from "../../icons/generated/BriefcaseIcon.js";
+import { ChevronsUpDownIcon } from "../../icons/generated/ChevronsUpDownIcon.js";
+import OrgSwitcher_module_default from "./OrgSwitcher.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button, ListBox } from "react-aria-components";
+// src/id/OrgSwitcher/OrgSwitcher.tsx
+const fold = (s, locale) => s.toLocaleLowerCase(locale);
+/**
+* Kuruluş değiştirici: geçerli firma ya da müşteriyi gösteren düğme ve altında aranabilir seçim
+* listesi. Kuruluşlar türüne göre gruplanır. APG Listbox (tek seçim) açılır kutuda: oklar gezer,
+* Home ve End uçlara gider, harfle arama yapılır, Enter seçer ve kapatır, Escape vazgeçer.
+*/
+function OrgSwitcher({ orgs, value, defaultValue = null, onChange, onCreate, searchThreshold = 7, size = "md", placement = "bottom start", isDisabled, isOpen, defaultOpen, onOpenChange, className, id }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const [inner, setInner] = useState(defaultValue);
+	const [query, setQuery] = useState("");
+	const current = value === void 0 ? inner : value;
+	const selected = orgs.find((o) => o.id === current);
+	const showSearch = orgs.length > searchThreshold;
+	const q = fold(query.trim(), locale);
+	const items = useMemo(() => {
+		const visible = orgs.filter((o) => !q || fold(o.name, locale).includes(q));
+		const option = (o) => ({
+			id: o.id,
+			label: o.name,
+			description: o.description,
+			icon: o.avatarSrc ? /* @__PURE__ */ jsx(Avatar, {
+				name: o.name,
+				src: o.avatarSrc,
+				size: "xs",
+				shape: "square",
+				isDecorative: true
+			}) : o.kind === "company" ? /* @__PURE__ */ jsx(BuildingIcon, {}) : /* @__PURE__ */ jsx(BriefcaseIcon, {})
+		});
+		const companies = visible.filter((o) => o.kind === "company");
+		const clients = visible.filter((o) => o.kind === "client");
+		if (companies.length === 0 || clients.length === 0) return visible.map(option);
+		return [{
+			id: "company",
+			title: t.idOrgKindCompany,
+			options: companies.map(option)
+		}, {
+			id: "client",
+			title: t.idOrgKindClient,
+			options: clients.map(option)
+		}];
+	}, [
+		orgs,
+		q,
+		locale,
+		t.idOrgKindCompany,
+		t.idOrgKindClient
+	]);
+	const pick = (key, close) => {
+		setInner(key);
+		onChange?.(key);
+		setQuery("");
+		close();
+	};
+	return /* @__PURE__ */ jsx(Popover$1, {
+		placement,
+		"aria-label": t.idOrgSwitcher,
+		size: "md",
+		className: OrgSwitcher_module_default.card,
+		isOpen,
+		defaultOpen,
+		onOpenChange: (open) => {
+			if (!open) setQuery("");
+			onOpenChange?.(open);
+		},
+		trigger: /* @__PURE__ */ jsxs(Button, {
+			id,
+			className: [OrgSwitcher_module_default.trigger, className].filter(Boolean).join(" "),
+			"data-size": size,
+			isDisabled,
+			children: [
+				selected ? /* @__PURE__ */ jsx(Avatar, {
+					name: selected.name,
+					src: selected.avatarSrc,
+					size: "xs",
+					shape: "square",
+					isDecorative: true
+				}) : null,
+				selected ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [t.idOrgSwitcherCurrent, ": "] }) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: OrgSwitcher_module_default.name,
+					children: selected?.name ?? t.idOrgSwitcherChoose
+				}),
+				/* @__PURE__ */ jsx(ChevronsUpDownIcon, {
+					className: OrgSwitcher_module_default.chevron,
+					"aria-hidden": "true"
+				})
+			]
+		}),
+		footer: onCreate ? (close) => /* @__PURE__ */ jsx(Button$1, {
+			variant: "ghost",
+			size: "sm",
+			fullWidth: true,
+			iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
+			onPress: () => {
+				close();
+				onCreate();
+			},
+			children: t.idOrgCreate
+		}) : void 0,
+		children: (close) => /* @__PURE__ */ jsxs("div", {
+			className: OrgSwitcher_module_default.body,
+			children: [showSearch ? /* @__PURE__ */ jsx(SearchField$1, {
+				label: t.idOrgSearch,
+				hideLabel: true,
+				placeholder: t.idOrgSearch,
+				size: "sm",
+				value: query,
+				onChange: setQuery,
+				autoFocus: true
+			}) : null, /* @__PURE__ */ jsx("div", {
+				className: OrgSwitcher_module_default.scroll,
+				children: /* @__PURE__ */ jsx(ListBox, {
+					"aria-label": t.idOrgList,
+					className: listbox_module_default.list,
+					selectionMode: "single",
+					disallowEmptySelection: true,
+					selectedKeys: current ? [current] : [],
+					autoFocus: showSearch ? false : "first",
+					onSelectionChange: (keys) => {
+						const key = keys === "all" ? void 0 : [...keys][0];
+						if (key !== void 0) pick(String(key), close);
+					},
+					renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+						className: OrgSwitcher_module_default.empty,
+						children: template(t.idOrgNoMatch, { query })
+					}),
+					children: renderOptions(items)
+				})
+			})]
+		})
+	});
+}
+export { OrgSwitcher };

package/dist/id/OrgSwitcher/OrgSwitcher.module.js

@@ -0,0 +1,12 @@
+import './OrgSwitcher.css';
+// src/id/OrgSwitcher/OrgSwitcher.module.css
+var OrgSwitcher_module_default = {
+	"trigger": "sti-OrgSwitcher-trigger-8cf9a",
+	"name": "sti-OrgSwitcher-name-0b2eb",
+	"chevron": "sti-OrgSwitcher-chevron-e70b6",
+	"card": "sti-OrgSwitcher-card-297cc",
+	"body": "sti-OrgSwitcher-body-e5f5e",
+	"scroll": "sti-OrgSwitcher-scroll-eca85",
+	"empty": "sti-OrgSwitcher-empty-1d36a"
+};
+export { OrgSwitcher_module_default as default };

package/dist/id/OrgSwitcher/index.d.ts

@@ -0,0 +1,2 @@
+import { OrgSwitcher, OrgSwitcherOrg, OrgSwitcherProps } from "./OrgSwitcher.js";
+export { OrgSwitcher, OrgSwitcherOrg, OrgSwitcherProps };

package/dist/id/PermissionGate/PermissionGate.css

@@ -0,0 +1,57 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PermissionGate-root-bf743 {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    padding: var(--sti-space-4) var(--sti-space-5);
+    border: var(--sti-border-width) dashed var(--sti-border);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: flex;
+  }
+
+  .sti-PermissionGate-icon-01cb9 {
+    inline-size: var(--sti-control-h-sm);
+    block-size: var(--sti-control-h-sm);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface-active);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-PermissionGate-text-4385b {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    padding-block-start: var(--sti-space-1);
+    display: grid;
+  }
+
+  .sti-PermissionGate-title-074a4 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-PermissionGate-description-c623a {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-PermissionGate-root-bf743 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/id/PermissionGate/PermissionGate.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+export type PermissionMatch = "all" | "any";
+/**
+ * Gerekli izinler sahip olunanlarla karşılanıyor mu. `match="all"` (varsayılan) hepsini, `"any"`
+ * herhangi birini ister. Gerekli izin verilmemişse (boş liste) erişim serbesttir.
+ */
+export declare function hasPermission(granted: readonly string[], required: string | readonly string[], match?: PermissionMatch): boolean;
+export interface PermissionGateProps {
+  /** Oturumdaki kullanıcının izinleri (`"proje:oku"`, `"proje:*"`, `"*"`). */
+  granted: readonly string[];
+  /** Gerekli izin ya da izinler. */
+  require: string | readonly string[];
+  /** `all`: hepsi gerekir (varsayılan); `any`: biri yeter. */
+  match?: PermissionMatch;
+  /** İzin yoksa çizilecek içerik; `denied` metni de yoksa hiçbir şey çizilmez. */
+  fallback?: ReactNode;
+  /** İzin yoksa gösterilecek açıklama ("Bu bölümü görüntüleme yetkiniz bulunmuyor."). */
+  denied?: ReactNode;
+  /** `denied` ile birlikte kısa başlık ("Erişim yetkisi gerekli"). */
+  deniedTitle?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * İzin kapısı: kullanıcı gerekli izne sahipse içeriği çizer, değilse yedek içeriği ya da yetki
+ * açıklamasını. Yalnız GÖRÜNÜMÜ düzenler; yetki denetimi her zaman sunucuda yeniden yapılmalıdır.
+ * Sunucu bileşenidir.
+ */
+export declare function PermissionGate({ granted, require, match, fallback, denied, deniedTitle, children, className, id }: PermissionGateProps): import("react").JSX.Element | null;

package/dist/id/PermissionGate/PermissionGate.js

@@ -0,0 +1,51 @@
+import { LockIcon } from "../../icons/generated/LockIcon.js";
+import PermissionGate_module_default from "./PermissionGate.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/id/PermissionGate/PermissionGate.tsx
+/** Verilen izin, sahip olunan izinlerden biriyle eşleşir mi (`"org:*"` ve `"*"` joker kabul edilir). */
+function grants(granted, permission) {
+	return granted.some((g) => {
+		if (g === "*" || g === permission) return true;
+		return g.endsWith(":*") && permission.startsWith(g.slice(0, -1));
+	});
+}
+/**
+* Gerekli izinler sahip olunanlarla karşılanıyor mu. `match="all"` (varsayılan) hepsini, `"any"`
+* herhangi birini ister. Gerekli izin verilmemişse (boş liste) erişim serbesttir.
+*/
+function hasPermission(granted, required, match = "all") {
+	const list = typeof required === "string" ? [required] : required;
+	if (list.length === 0) return true;
+	return match === "any" ? list.some((p) => grants(granted, p)) : list.every((p) => grants(granted, p));
+}
+/**
+* İzin kapısı: kullanıcı gerekli izne sahipse içeriği çizer, değilse yedek içeriği ya da yetki
+* açıklamasını. Yalnız GÖRÜNÜMÜ düzenler; yetki denetimi her zaman sunucuda yeniden yapılmalıdır.
+* Sunucu bileşenidir.
+*/
+function PermissionGate({ granted, require, match = "all", fallback, denied, deniedTitle, children, className, id }) {
+	if (hasPermission(granted, require, match)) return /* @__PURE__ */ jsx(Fragment, { children });
+	if (fallback !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	if (!denied && !deniedTitle) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [PermissionGate_module_default.root, className].filter(Boolean).join(" "),
+		role: "note",
+		"data-denied": "",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: PermissionGate_module_default.icon,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(LockIcon, {})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: PermissionGate_module_default.text,
+			children: [deniedTitle ? /* @__PURE__ */ jsx("p", {
+				className: PermissionGate_module_default.title,
+				children: deniedTitle
+			}) : null, denied ? /* @__PURE__ */ jsx("p", {
+				className: PermissionGate_module_default.description,
+				children: denied
+			}) : null]
+		})]
+	});
+}
+export { PermissionGate, hasPermission };

package/dist/id/PermissionGate/PermissionGate.module.js

@@ -0,0 +1,10 @@
+import './PermissionGate.css';
+// src/id/PermissionGate/PermissionGate.module.css
+var PermissionGate_module_default = {
+	"root": "sti-PermissionGate-root-bf743",
+	"icon": "sti-PermissionGate-icon-01cb9",
+	"text": "sti-PermissionGate-text-4385b",
+	"title": "sti-PermissionGate-title-074a4",
+	"description": "sti-PermissionGate-description-c623a"
+};
+export { PermissionGate_module_default as default };

package/dist/id/PermissionGate/index.d.ts

@@ -0,0 +1,2 @@
+import { PermissionGate, PermissionGateProps, PermissionMatch, hasPermission } from "./PermissionGate.js";
+export { PermissionGate, PermissionGateProps, PermissionMatch, hasPermission };

package/dist/id/SignInButton/SignInButton.d.ts

@@ -0,0 +1,20 @@
+export interface SignInButtonProps {
+  /** Verilirse bağlantı olarak çizilir (OAuth başlangıç adresi). */
+  href?: string;
+  onPress?: () => void;
+  /** Düğme metni; varsayılan "STI ID ile oturum açın". */
+  label?: string;
+  variant?: "primary" | "secondary" | "inverse";
+  size?: "sm" | "md" | "lg";
+  fullWidth?: boolean;
+  /** Oturum açma sürerken: basma yok sayılır, ekran okuyucuya "Oturum açılıyor" duyurulur. */
+  isPending?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * "STI ID ile oturum açın" düğmesi: kalkan ikonlu, üç boyda, tam genişlikte kullanılabilir.
+ * `href` verilirse bağlantı (Enter), verilmezse düğmedir (Enter ve Boşluk).
+ */
+export declare function SignInButton({ href, onPress, label, variant, size, fullWidth, isPending, isDisabled, className, id }: SignInButtonProps): import("react").JSX.Element;

package/dist/id/SignInButton/SignInButton.js

@@ -0,0 +1,34 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Button } from "../../components/Button/Button.js";
+import { ShieldCheckIcon } from "../../icons/generated/ShieldCheckIcon.js";
+import { jsx } from "react/jsx-runtime";
+// src/id/SignInButton/SignInButton.tsx
+/**
+* "STI ID ile oturum açın" düğmesi: kalkan ikonlu, üç boyda, tam genişlikte kullanılabilir.
+* `href` verilirse bağlantı (Enter), verilmezse düğmedir (Enter ve Boşluk).
+*/
+function SignInButton({ href, onPress, label, variant = "primary", size = "md", fullWidth, isPending, isDisabled, className, id }) {
+	const t = useMessages();
+	const text = isPending ? t.idSignInPending : label ?? t.idSignInWith;
+	const common = {
+		variant,
+		size,
+		fullWidth,
+		isDisabled,
+		className,
+		id,
+		iconStart: /* @__PURE__ */ jsx(ShieldCheckIcon, {})
+	};
+	return href !== void 0 && !isPending ? /* @__PURE__ */ jsx(Button, {
+		...common,
+		href,
+		children: text
+	}) : /* @__PURE__ */ jsx(Button, {
+		...common,
+		isPending,
+		onPress,
+		children: text
+	});
+}
+export { SignInButton };

package/dist/id/_internal/ActionItem/ActionItem.css

@@ -0,0 +1,143 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ActionItem-root-638ea {
+    --sti-action-item-radius: var(--sti-radius-md);
+    --sti-action-item-bg: transparent;
+    --sti-action-item-border: transparent;
+    --sti-action-item-icon-bg: var(--sti-bg-surface-active);
+    --sti-action-item-icon-fg: var(--sti-fg-muted);
+    align-items: center;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--sti-control-h-lg);
+    min-inline-size: 0;
+    padding-block: var(--sti-space-2);
+    padding-inline: var(--sti-space-3);
+    border: var(--sti-border-width) solid var(--sti-action-item-border);
+    border-radius: var(--sti-action-item-radius);
+    background: var(--sti-action-item-bg);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    text-align: start;
+    cursor: pointer;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap);
+    text-decoration: none;
+    display: flex;
+  }
+
+  .sti-ActionItem-root-638ea[data-variant="outlined"] {
+    --sti-action-item-border: var(--sti-border-strong);
+    padding-inline: var(--sti-space-4);
+  }
+
+  .sti-ActionItem-root-638ea[data-tone="danger"] {
+    --sti-action-item-icon-bg: var(--sti-bg-danger-subtle);
+    --sti-action-item-icon-fg: var(--sti-fg-danger-strong);
+  }
+
+  @media (hover: hover) {
+    .sti-ActionItem-root-638ea[data-hovered]:not([data-disabled]) {
+      --sti-action-item-bg: var(--sti-bg-surface-hover);
+    }
+
+    .sti-ActionItem-root-638ea[data-hovered]:not([data-disabled])[data-variant="outlined"] {
+      --sti-action-item-border: var(--sti-border-accent);
+    }
+  }
+
+  .sti-ActionItem-root-638ea[data-pressed]:not([data-disabled]) {
+    --sti-action-item-bg: var(--sti-bg-surface-active);
+  }
+
+  .sti-ActionItem-root-638ea[data-selected] {
+    --sti-action-item-border: var(--sti-border-selected);
+    --sti-action-item-bg: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-ActionItem-root-638ea[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ActionItem-root-638ea[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-ActionItem-root-638ea[data-pending] {
+    cursor: progress;
+  }
+
+  @media (pointer: coarse) {
+    .sti-ActionItem-root-638ea {
+      min-block-size: 2.75rem;
+    }
+  }
+
+  .sti-ActionItem-icon-64ebf {
+    inline-size: var(--sti-control-h-sm);
+    block-size: var(--sti-control-h-sm);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-action-item-icon-bg);
+    color: var(--sti-action-item-icon-fg);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-ActionItem-text-88422 {
+    gap: var(--sti-space-0-5);
+    flex: auto;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-ActionItem-label-e7b58 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-ActionItem-root-638ea[data-tone="danger"] .sti-ActionItem-label-e7b58 {
+    color: var(--sti-fg-danger-strong);
+  }
+
+  .sti-ActionItem-description-1ee33 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-ActionItem-trailing-f8d0a {
+    color: var(--sti-fg-muted);
+    flex: none;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ActionItem-root-638ea {
+      border-color: buttonborder;
+    }
+
+    .sti-ActionItem-root-638ea[data-selected] {
+      border-color: highlight;
+      border-width: var(--sti-border-width-strong);
+    }
+
+    .sti-ActionItem-root-638ea[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ActionItem-root-638ea {
+      transition: none;
+    }
+  }
+}