@stisocial/ui 0.2.1 → 0.3.0

package/dist/agency/AssetCard/AssetCard.js

@@ -0,0 +1,137 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { FileTextIcon } from "../../icons/generated/FileTextIcon.js";
+import { Checkbox } from "../../components/Checkbox/Checkbox.js";
+import { FileIcon } from "../../icons/generated/FileIcon.js";
+import { ImageIcon } from "../../icons/generated/ImageIcon.js";
+import { VideoIcon } from "../../icons/generated/VideoIcon.js";
+import { MusicIcon } from "../../media/_internal/icons.js";
+import { cx } from "../_shared/Preview.js";
+import AssetCard_module_default from "./AssetCard.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/AssetCard/AssetCard.tsx
+const KIND_ICON = {
+	image: /* @__PURE__ */ jsx(ImageIcon, {}),
+	logo: /* @__PURE__ */ jsx(ImageIcon, {}),
+	video: /* @__PURE__ */ jsx(VideoIcon, {}),
+	audio: /* @__PURE__ */ jsx(MusicIcon, {}),
+	document: /* @__PURE__ */ jsx(FileTextIcon, {}),
+	file: /* @__PURE__ */ jsx(FileIcon, {})
+};
+const DAY = 864e5;
+/**
+* Varlık kartı (marka kütüphanesi): küçük görsel ya da tür ikonu, ad, biçim · boyut · ölçüler ·
+* süre, etiketler; marka onayı ve kullanım hakkı (lisans) durumu rozetle: yaklaşan bitiş uyarı,
+* dolmuş hak tehlike tonunda. Seçilebilir ve açılabilir.
+*/
+function AssetCard({ asset, isSelectable, isSelected, onSelectionChange, onOpen, actions, layout = "grid", licenseWarningDays = 30, now, isDisabled, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const ref = now !== void 0 ? new Date(now).getTime() : Date.now();
+	const exp = asset.licenseExpiresAt !== void 0 ? new Date(asset.licenseExpiresAt).getTime() : null;
+	const license = exp === null ? null : exp < ref ? "expired" : exp - ref <= licenseWarningDays * DAY ? "soon" : null;
+	const kindName = {
+		image: t.mediaTypeImage,
+		logo: t.agencyAssetLogo,
+		video: t.mediaTypeVideo,
+		audio: t.mediaTypeAudio,
+		document: t.mediaTypeDocument,
+		file: t.mediaTypeFile
+	};
+	const meta = [
+		asset.format ?? kindName[asset.kind],
+		asset.size !== void 0 ? f.fileSize(asset.size) : null,
+		asset.width && asset.height ? `${asset.width} × ${asset.height}` : null,
+		asset.duration !== void 0 ? `${Math.floor(asset.duration / 60)}:${String(Math.round(asset.duration % 60)).padStart(2, "0")}` : null
+	].filter(Boolean);
+	const titleId = `${id ?? asset.id}-title`;
+	return /* @__PURE__ */ jsxs("article", {
+		id,
+		className: cx(AssetCard_module_default.root, className),
+		"data-layout": layout,
+		"data-selected": isSelected ? "" : void 0,
+		"data-disabled": isDisabled ? "" : void 0,
+		"data-license": license ?? void 0,
+		"aria-labelledby": titleId,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: AssetCard_module_default.media,
+			children: [
+				asset.thumbnail ? /* @__PURE__ */ jsx("img", {
+					className: AssetCard_module_default.thumb,
+					src: asset.thumbnail,
+					alt: ""
+				}) : /* @__PURE__ */ jsx("span", {
+					className: AssetCard_module_default.icon,
+					"aria-hidden": "true",
+					children: KIND_ICON[asset.kind]
+				}),
+				isSelectable ? /* @__PURE__ */ jsx("span", {
+					className: AssetCard_module_default.check,
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						isSelected,
+						onChange: onSelectionChange,
+						isDisabled,
+						children: /* @__PURE__ */ jsx(VisuallyHidden, { children: template(t.agencyAssetSelect, { name: asset.name }) })
+					})
+				}) : null,
+				actions ? /* @__PURE__ */ jsx("span", {
+					className: AssetCard_module_default.actions,
+					children: actions
+				}) : null
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: AssetCard_module_default.body,
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					id: titleId,
+					className: AssetCard_module_default.title,
+					children: onOpen ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: AssetCard_module_default.open,
+						onClick: onOpen,
+						disabled: isDisabled,
+						children: asset.name
+					}) : asset.name
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: AssetCard_module_default.meta,
+					children: meta.join(" · ")
+				}),
+				asset.approved || license ? /* @__PURE__ */ jsxs("p", {
+					className: AssetCard_module_default.badges,
+					children: [
+						asset.approved ? /* @__PURE__ */ jsx("span", {
+							className: AssetCard_module_default.badge,
+							"data-tone": "success",
+							children: t.agencyAssetApproved
+						}) : null,
+						license === "soon" && exp !== null ? /* @__PURE__ */ jsx("span", {
+							className: AssetCard_module_default.badge,
+							"data-tone": "warning",
+							children: template(t.agencyAssetLicenseSoon, { date: f.date(new Date(exp)) })
+						}) : null,
+						license === "expired" ? /* @__PURE__ */ jsx("span", {
+							className: AssetCard_module_default.badge,
+							"data-tone": "danger",
+							children: t.agencyAssetLicenseExpired
+						}) : null
+					]
+				}) : null,
+				asset.tags?.length ? /* @__PURE__ */ jsxs("ul", {
+					className: AssetCard_module_default.tags,
+					"aria-label": t.agencyAssetTags,
+					children: [asset.tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsx("li", {
+						className: AssetCard_module_default.tag,
+						children: tag
+					}, tag)), asset.tags.length > 4 ? /* @__PURE__ */ jsxs("li", {
+						className: AssetCard_module_default.tag,
+						children: ["+", asset.tags.length - 4]
+					}) : null]
+				}) : null
+			]
+		})]
+	});
+}
+export { AssetCard };

package/dist/agency/AssetCard/AssetCard.module.js

@@ -0,0 +1,19 @@
+import './AssetCard.css';
+// src/agency/AssetCard/AssetCard.module.css
+var AssetCard_module_default = {
+	"root": "sti-AssetCard-root-68147",
+	"media": "sti-AssetCard-media-5504a",
+	"thumb": "sti-AssetCard-thumb-ce0d5",
+	"icon": "sti-AssetCard-icon-90286",
+	"check": "sti-AssetCard-check-e7ff7",
+	"actions": "sti-AssetCard-actions-f6bc0",
+	"body": "sti-AssetCard-body-59543",
+	"title": "sti-AssetCard-title-19b50",
+	"open": "sti-AssetCard-open-85f01",
+	"meta": "sti-AssetCard-meta-a3510",
+	"badges": "sti-AssetCard-badges-a0880",
+	"badge": "sti-AssetCard-badge-e8610",
+	"tags": "sti-AssetCard-tags-e6b4f",
+	"tag": "sti-AssetCard-tag-27d26"
+};
+export { AssetCard_module_default as default };

package/dist/agency/AssetCard/index.d.ts

@@ -0,0 +1,2 @@
+import { Asset, AssetCard, AssetCardProps, AssetKind } from "./AssetCard.js";
+export { Asset, AssetCard, AssetCardProps, AssetKind };

package/dist/agency/AssetLibrary/AssetLibrary.css

@@ -0,0 +1,60 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-AssetLibrary-root-66146 {
+    gap: var(--sti-space-4);
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-AssetLibrary-toolbar-10a5d {
+    align-items: center;
+    gap: var(--sti-space-2) var(--sti-space-3);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-AssetLibrary-search-85855 {
+    flex: 14rem;
+    min-inline-size: 0;
+  }
+
+  .sti-AssetLibrary-sort-4d427 {
+    flex: 0 12rem;
+  }
+
+  .sti-AssetLibrary-status-08f3f {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-block-size: var(--sti-control-h-sm);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-AssetLibrary-count-f7b86 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-AssetLibrary-bulk-706fd {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-AssetLibrary-grid-91f4d {
+    gap: var(--sti-space-3);
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-AssetLibrary-grid-91f4d[data-layout="list"] {
+    gap: var(--sti-space-2);
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/dist/agency/AssetLibrary/AssetLibrary.d.ts

@@ -0,0 +1,36 @@
+import { Asset } from "../AssetCard/AssetCard.js";
+import { ReactNode } from "react";
+export type AssetSort = "newest" | "name" | "size";
+type KindFilter = "all" | "image" | "video" | "document" | "other";
+export interface AssetLibraryProps {
+  assets: readonly Asset[];
+  /** Bölgenin adı; verilmezse "Varlık kütüphanesi". */
+  label?: string;
+  /** Seçim: yok, tek ya da çok. */
+  selectionMode?: "none" | "single" | "multiple";
+  selectedIds?: readonly string[];
+  defaultSelectedIds?: readonly string[];
+  onSelectionChange?: (ids: string[]) => void;
+  /** Kart açma (önizleme). */
+  onOpen?: (id: string) => void;
+  /** Seçim varken araç çubuğunda gösterilecek toplu eylemler. */
+  bulkActions?: (ids: string[]) => ReactNode;
+  /** Kütüphane boşken eylem (ör. "Varlık yükleyin"). */
+  emptyAction?: ReactNode;
+  now?: Date | string | number;
+  className?: string;
+  id?: string;
+}
+/** Varlıkları arar, türe göre süzer ve sıralar (saf). */
+export declare function filterAssets(assets: readonly Asset[], { query, kind, sort }: {
+  query?: string;
+  kind?: KindFilter;
+  sort?: AssetSort;
+}): Asset[];
+/**
+ * Varlık kütüphanesi (marka dosyaları): arama (ad ve etiket), tür süzgeci, sıralama, ızgara ve
+ * liste görünümü; kartlar AssetCard. Seçim kipinde seçilenler sayılır ve toplu eylemler çıkar.
+ * Sonuç yoksa durum açıklanır.
+ */
+export declare function AssetLibrary({ assets, label, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, onOpen, bulkActions, emptyAction, now, className, id }: AssetLibraryProps): import("react").JSX.Element;
+export {};

package/dist/agency/AssetLibrary/AssetLibrary.js

@@ -0,0 +1,174 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { SegmentedControl, SegmentedControlItem } from "../../components/SegmentedControl/SegmentedControl.js";
+import { SearchField } from "../../components/SearchField/SearchField.js";
+import { Select } from "../../components/Select/Select.js";
+import { EmptyState } from "../../components/EmptyState/EmptyState.js";
+import { ImageIcon } from "../../icons/generated/ImageIcon.js";
+import { cx } from "../_shared/Preview.js";
+import { AssetCard } from "../AssetCard/AssetCard.js";
+import AssetLibrary_module_default from "./AssetLibrary.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+// src/agency/AssetLibrary/AssetLibrary.tsx
+const KIND_GROUP = {
+	image: "image",
+	logo: "image",
+	video: "video",
+	document: "document",
+	audio: "other",
+	file: "other"
+};
+const fold = (s) => s.toLocaleLowerCase("tr-TR");
+/** Varlıkları arar, türe göre süzer ve sıralar (saf). */
+function filterAssets(assets, { query = "", kind = "all", sort = "newest" }) {
+	const q = fold(query.trim());
+	const out = assets.filter((a) => (kind === "all" || KIND_GROUP[a.kind] === kind) && (!q || fold(a.name).includes(q) || (a.tags ?? []).some((t) => fold(t).includes(q))));
+	const time = (a) => a.uploadedAt !== void 0 ? new Date(a.uploadedAt).getTime() : 0;
+	return out.sort((a, b) => sort === "name" ? a.name.localeCompare(b.name, "tr") : sort === "size" ? (b.size ?? 0) - (a.size ?? 0) : time(b) - time(a));
+}
+/**
+* Varlık kütüphanesi (marka dosyaları): arama (ad ve etiket), tür süzgeci, sıralama, ızgara ve
+* liste görünümü; kartlar AssetCard. Seçim kipinde seçilenler sayılır ve toplu eylemler çıkar.
+* Sonuç yoksa durum açıklanır.
+*/
+function AssetLibrary({ assets, label, selectionMode = "none", selectedIds, defaultSelectedIds = [], onSelectionChange, onOpen, bulkActions, emptyAction, now, className, id }) {
+	const t = useMessages();
+	const [query, setQuery] = useState("");
+	const [kind, setKind] = useState("all");
+	const [sort, setSort] = useState("newest");
+	const [layout, setLayout] = useState("grid");
+	const [inner, setInner] = useState([...defaultSelectedIds]);
+	const selected = selectedIds ? [...selectedIds] : inner;
+	const shown = useMemo(() => filterAssets(assets, {
+		query,
+		kind,
+		sort
+	}), [
+		assets,
+		query,
+		kind,
+		sort
+	]);
+	const setSelected = (ids) => {
+		if (!selectedIds) setInner(ids);
+		onSelectionChange?.(ids);
+	};
+	const toggle = (aid, on) => {
+		if (selectionMode === "single") setSelected(on ? [aid] : []);
+		else setSelected(on ? [...selected.filter((x) => x !== aid), aid] : selected.filter((x) => x !== aid));
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: cx(AssetLibrary_module_default.root, className),
+		"aria-label": label ?? t.agencyAssetLibrary,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: AssetLibrary_module_default.toolbar,
+				children: [
+					/* @__PURE__ */ jsx(SearchField, {
+						label: t.agencyAssetSearch,
+						hideLabel: true,
+						placeholder: t.agencyAssetSearchPlaceholder,
+						value: query,
+						onChange: setQuery,
+						className: AssetLibrary_module_default.search
+					}),
+					/* @__PURE__ */ jsxs(SegmentedControl, {
+						label: t.agencyAssetKind,
+						value: kind,
+						onChange: (v) => setKind(v),
+						size: "sm",
+						children: [
+							/* @__PURE__ */ jsx(SegmentedControlItem, {
+								value: "all",
+								children: t.agencyAssetAll
+							}),
+							/* @__PURE__ */ jsx(SegmentedControlItem, {
+								value: "image",
+								children: t.mediaTypeImage
+							}),
+							/* @__PURE__ */ jsx(SegmentedControlItem, {
+								value: "video",
+								children: t.mediaTypeVideo
+							}),
+							/* @__PURE__ */ jsx(SegmentedControlItem, {
+								value: "document",
+								children: t.mediaTypeDocument
+							}),
+							/* @__PURE__ */ jsx(SegmentedControlItem, {
+								value: "other",
+								children: t.agencyAssetOther
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Select, {
+						label: t.agencyAssetSort,
+						items: [
+							{
+								id: "newest",
+								label: t.agencyAssetSortNewest
+							},
+							{
+								id: "name",
+								label: t.agencyAssetSortName
+							},
+							{
+								id: "size",
+								label: t.agencyAssetSortSize
+							}
+						],
+						value: sort,
+						onChange: (v) => v && setSort(v),
+						size: "sm",
+						className: AssetLibrary_module_default.sort
+					}),
+					/* @__PURE__ */ jsxs(SegmentedControl, {
+						label: t.agencyAssetView,
+						value: layout,
+						onChange: (v) => setLayout(v),
+						size: "sm",
+						children: [/* @__PURE__ */ jsx(SegmentedControlItem, {
+							value: "grid",
+							children: t.agencyAssetGrid
+						}), /* @__PURE__ */ jsx(SegmentedControlItem, {
+							value: "list",
+							children: t.agencyAssetList
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: AssetLibrary_module_default.status,
+				children: [/* @__PURE__ */ jsx("output", {
+					className: AssetLibrary_module_default.count,
+					children: selected.length ? template(t.agencyAssetSelected, { count: selected.length }) : template(t.agencyAssetCount, { count: shown.length })
+				}), selected.length && bulkActions ? /* @__PURE__ */ jsx("div", {
+					className: AssetLibrary_module_default.bulk,
+					children: bulkActions(selected)
+				}) : null]
+			}),
+			shown.length ? /* @__PURE__ */ jsx("ul", {
+				className: AssetLibrary_module_default.grid,
+				"data-layout": layout,
+				children: shown.map((a) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AssetCard, {
+					asset: a,
+					layout,
+					now,
+					isSelectable: selectionMode !== "none",
+					isSelected: selected.includes(a.id),
+					onSelectionChange: (on) => toggle(a.id, on),
+					onOpen: onOpen ? () => onOpen(a.id) : void 0
+				}) }, a.id))
+			}) : /* @__PURE__ */ jsx(EmptyState, {
+				size: "sm",
+				icon: /* @__PURE__ */ jsx(ImageIcon, {}),
+				title: assets.length ? t.agencyAssetNoMatch : t.agencyAssetEmpty,
+				description: assets.length ? t.agencyAssetNoMatchHint : void 0,
+				primaryAction: assets.length ? void 0 : emptyAction
+			})
+		]
+	});
+}
+export { AssetLibrary, filterAssets };

package/dist/agency/AssetLibrary/AssetLibrary.module.js

@@ -0,0 +1,13 @@
+import './AssetLibrary.css';
+// src/agency/AssetLibrary/AssetLibrary.module.css
+var AssetLibrary_module_default = {
+	"root": "sti-AssetLibrary-root-66146",
+	"toolbar": "sti-AssetLibrary-toolbar-10a5d",
+	"search": "sti-AssetLibrary-search-85855",
+	"sort": "sti-AssetLibrary-sort-4d427",
+	"status": "sti-AssetLibrary-status-08f3f",
+	"count": "sti-AssetLibrary-count-f7b86",
+	"bulk": "sti-AssetLibrary-bulk-706fd",
+	"grid": "sti-AssetLibrary-grid-91f4d"
+};
+export { AssetLibrary_module_default as default };

package/dist/agency/AssetLibrary/index.d.ts

@@ -0,0 +1,2 @@
+import { AssetLibrary, AssetLibraryProps, AssetSort, filterAssets } from "./AssetLibrary.js";
+export { AssetLibrary, AssetLibraryProps, AssetSort, filterAssets };

package/dist/agency/AssetPicker/AssetPicker.d.ts

@@ -0,0 +1,23 @@
+import { Asset } from "../AssetCard/AssetCard.js";
+import { ReactElement } from "react";
+export interface AssetPickerProps {
+  assets: readonly Asset[];
+  /** Pencereyi açan düğme. */
+  trigger?: ReactElement;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Tek ya da çok seçim. Varsayılan tek. */
+  selectionMode?: "single" | "multiple";
+  /** En çok seçim (çok seçimde). */
+  maxSelection?: number;
+  /** Seçim onaylanınca (pencere kapanır). */
+  onSelect: (assets: Asset[]) => void;
+  /** Pencere başlığı; verilmezse "Varlık seçin". */
+  title?: string;
+  now?: Date | string | number;
+}
+/**
+ * Varlık seçici: kütüphaneyi (arama, süzgeç, sıralama) kipli pencerede açar; tek ya da çok seçim,
+ * "Seçin (n)" ile onaylanır. En çok seçim sınırı aşılamaz; seçim yokken onay kapalıdır.
+ */
+export declare function AssetPicker({ assets, trigger, isOpen, onOpenChange, selectionMode, maxSelection, onSelect, title, now }: AssetPickerProps): import("react").JSX.Element;

package/dist/agency/AssetPicker/AssetPicker.js

@@ -0,0 +1,50 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { Dialog } from "../../components/Dialog/Dialog.js";
+import { AssetLibrary } from "../AssetLibrary/AssetLibrary.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/agency/AssetPicker/AssetPicker.tsx
+/**
+* Varlık seçici: kütüphaneyi (arama, süzgeç, sıralama) kipli pencerede açar; tek ya da çok seçim,
+* "Seçin (n)" ile onaylanır. En çok seçim sınırı aşılamaz; seçim yokken onay kapalıdır.
+*/
+function AssetPicker({ assets, trigger, isOpen, onOpenChange, selectionMode = "single", maxSelection, onSelect, title, now }) {
+	const t = useMessages();
+	const [ids, setIds] = useState([]);
+	const limited = (next) => maxSelection !== void 0 && next.length > maxSelection ? next.slice(-maxSelection) : next;
+	return /* @__PURE__ */ jsx(Dialog, {
+		size: "xl",
+		trigger,
+		isOpen,
+		onOpenChange: (open) => {
+			if (open) setIds([]);
+			onOpenChange?.(open);
+		},
+		title: title ?? t.agencyAssetPick,
+		description: selectionMode === "multiple" && maxSelection !== void 0 ? template(t.agencyAssetPickMax, { max: maxSelection }) : void 0,
+		footer: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			onPress: close,
+			children: t.commentCancel
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			isDisabled: ids.length === 0,
+			onPress: () => {
+				onSelect(ids.map((i) => assets.find((a) => a.id === i)).filter((a) => Boolean(a)));
+				close();
+			},
+			children: ids.length ? template(t.agencyAssetPickConfirmCount, { count: ids.length }) : t.agencyAssetPickConfirm
+		})] }),
+		children: /* @__PURE__ */ jsx(AssetLibrary, {
+			assets,
+			selectionMode,
+			selectedIds: ids,
+			onSelectionChange: (next) => setIds(limited(next)),
+			now
+		})
+	});
+}
+export { AssetPicker };

package/dist/agency/AssetPicker/index.d.ts

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