@stisocial/ui 0.2.0 → 0.3.0

package/dist/agency/BrandKitViewer/BrandKitViewer.css

@@ -0,0 +1,184 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-BrandKitViewer-root-95c88 {
+    gap: var(--sti-space-8);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-BrandKitViewer-head-7e806 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-3);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-BrandKitViewer-title-e2c80 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-2xl);
+    font-weight: var(--sti-font-weight-bold);
+    margin: 0;
+  }
+
+  .sti-BrandKitViewer-section-358d7 {
+    gap: var(--sti-space-3);
+    display: grid;
+  }
+
+  .sti-BrandKitViewer-sectionTitle-92226 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-BrandKitViewer-logos-01b3f, .sti-BrandKitViewer-fonts-b02af {
+    gap: var(--sti-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-BrandKitViewer-logos-01b3f {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+  }
+
+  .sti-BrandKitViewer-logo-709e8 {
+    gap: var(--sti-space-2);
+    display: grid;
+  }
+
+  .sti-BrandKitViewer-logoStage-d6d73 {
+    aspect-ratio: 4 / 3;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-BrandKitViewer-logoStage-d6d73[data-background="dark"] {
+    background: var(--sti-bg-inverse);
+  }
+
+  .sti-BrandKitViewer-logoStage-d6d73 img {
+    inset: var(--sti-space-6);
+    inline-size: calc(100% - var(--sti-space-6) * 2);
+    block-size: calc(100% - var(--sti-space-6) * 2);
+    object-fit: contain;
+    position: absolute;
+  }
+
+  .sti-BrandKitViewer-logoName-b219b {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-BrandKitViewer-downloads-0a8d4 {
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-BrandKitViewer-font-4bc0f {
+    align-items: center;
+    gap: var(--sti-space-1) var(--sti-space-4);
+    padding: var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    grid-template-columns: 8rem minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  .sti-BrandKitViewer-fontRole-22282 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: .04em;
+  }
+
+  .sti-BrandKitViewer-fontSample-31339 {
+    --sti-brand-font: var(--sti-font-text);
+    font-family: var(--sti-brand-font);
+    font-size: var(--sti-font-size-2xl);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .sti-BrandKitViewer-fontName-045f0 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    grid-column: 2;
+  }
+
+  .sti-BrandKitViewer-fontWeights-fcaa1 {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-BrandKitViewer-voice-78caa {
+    gap: var(--sti-space-3);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+    display: grid;
+  }
+
+  .sti-BrandKitViewer-voiceCol-54eda {
+    padding: var(--sti-space-4);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-success-subtle);
+  }
+
+  .sti-BrandKitViewer-voiceCol-54eda[data-kind="dont"] {
+    background: var(--sti-bg-danger-subtle);
+  }
+
+  .sti-BrandKitViewer-voiceCol-54eda ul {
+    gap: var(--sti-space-2);
+    margin: var(--sti-space-2) 0 0;
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    padding-inline-start: var(--sti-space-5);
+    display: grid;
+  }
+
+  .sti-BrandKitViewer-voiceTitle-1f48e {
+    align-items: center;
+    gap: var(--sti-space-2);
+    color: var(--sti-fg-success-strong);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-BrandKitViewer-voiceCol-54eda[data-kind="dont"] .sti-BrandKitViewer-voiceTitle-1f48e {
+    color: var(--sti-fg-danger-strong);
+  }
+
+  .sti-BrandKitViewer-srOnly-ad592 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (width <= 40rem) {
+    .sti-BrandKitViewer-font-4bc0f {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .sti-BrandKitViewer-fontName-045f0 {
+      grid-column: auto;
+    }
+  }
+}

package/dist/agency/BrandKitViewer/BrandKitViewer.d.ts

@@ -0,0 +1,46 @@
+import { BrandColor } from "../ColorPaletteDisplay/ColorPaletteDisplay.js";
+export interface BrandLogo {
+  id: string;
+  /** Ad ("Ana logo", "Simge", "Tek renk"). */
+  name: string;
+  src: string;
+  /** Logonun tasarlandığı zemin. */
+  background?: "light" | "dark";
+  /** İndirilebilir biçimler. */
+  downloads?: readonly {
+    label: string;
+    href: string;
+  }[];
+}
+export interface BrandFont {
+  /** Kullanım ("Başlık", "Gövde"). */
+  role: string;
+  /** Yazı tipi ailesi ("Inter"). Örnek, sistemde yüklüyse o yazı tipiyle çizilir. */
+  family: string;
+  /** Kalınlıklar ("Regular 400, Semibold 600"). */
+  weights?: string;
+  /** Lisans ya da indirme bağlantısı. */
+  href?: string;
+}
+export interface BrandKitViewerProps {
+  /** Markanın adı. */
+  brand: string;
+  logos?: readonly BrandLogo[];
+  colors?: readonly BrandColor[];
+  fonts?: readonly BrandFont[];
+  /** Yazım dili: yapılacaklar ve kaçınılacaklar. */
+  voice?: {
+    do: readonly string[];
+    dont: readonly string[];
+  };
+  /** Bütün kitin indirme bağlantısı (ZIP). */
+  downloadAllHref?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Marka kiti görüntüleyici: logolar (tasarlandığı zeminde, indirme biçimleriyle), renk paleti
+ * (ColorPaletteDisplay), yazı tipleri (örnek metinle) ve yazım dili (yapılacaklar ve
+ * kaçınılacaklar). Bölümler başlıklıdır; yalnız verilen bölümler çizilir.
+ */
+export declare function BrandKitViewer({ brand, logos, colors, fonts, voice, downloadAllHref, className, id }: BrandKitViewerProps): import("react").JSX.Element;

package/dist/agency/BrandKitViewer/BrandKitViewer.js

@@ -0,0 +1,168 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { CloseIcon } from "../../icons/generated/CloseIcon.js";
+import { DownloadIcon } from "../../icons/generated/DownloadIcon.js";
+import { cx } from "../_shared/Preview.js";
+import { ColorPaletteDisplay } from "../ColorPaletteDisplay/ColorPaletteDisplay.js";
+import BrandKitViewer_module_default from "./BrandKitViewer.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/BrandKitViewer/BrandKitViewer.tsx
+const SAFE = /^(https?:\/\/|\/(?!\/)|#|blob:|data:image\/)/i;
+/**
+* Marka kiti görüntüleyici: logolar (tasarlandığı zeminde, indirme biçimleriyle), renk paleti
+* (ColorPaletteDisplay), yazı tipleri (örnek metinle) ve yazım dili (yapılacaklar ve
+* kaçınılacaklar). Bölümler başlıklıdır; yalnız verilen bölümler çizilir.
+*/
+function BrandKitViewer({ brand, logos = [], colors = [], fonts = [], voice, downloadAllHref, className, id }) {
+	const t = useMessages();
+	const font = (family) => (el) => {
+		el?.style.setProperty("--sti-brand-font", `"${family.replace(/["\\]/g, "")}", var(--sti-font-text)`);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: cx(BrandKitViewer_module_default.root, className),
+		"aria-label": template(t.agencyBrandKitOf, { brand }),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: BrandKitViewer_module_default.head,
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: BrandKitViewer_module_default.title,
+					children: template(t.agencyBrandKitOf, { brand })
+				}), downloadAllHref && SAFE.test(downloadAllHref) ? /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					href: downloadAllHref,
+					download: true,
+					iconStart: /* @__PURE__ */ jsx(DownloadIcon, {}),
+					children: t.agencyBrandDownloadAll
+				}) : null]
+			}),
+			logos.length ? /* @__PURE__ */ jsxs("section", {
+				className: BrandKitViewer_module_default.section,
+				"aria-labelledby": `${id ?? "kit"}-logos`,
+				children: [/* @__PURE__ */ jsx("h3", {
+					id: `${id ?? "kit"}-logos`,
+					className: BrandKitViewer_module_default.sectionTitle,
+					children: t.agencyBrandLogos
+				}), /* @__PURE__ */ jsx("ul", {
+					className: BrandKitViewer_module_default.logos,
+					children: logos.map((l) => /* @__PURE__ */ jsxs("li", {
+						className: BrandKitViewer_module_default.logo,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: BrandKitViewer_module_default.logoStage,
+								"data-background": l.background ?? "light",
+								children: /* @__PURE__ */ jsx("img", {
+									src: l.src,
+									alt: template(t.agencyBrandLogoAlt, {
+										brand,
+										name: l.name
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: BrandKitViewer_module_default.logoName,
+								children: l.name
+							}),
+							l.downloads?.length ? /* @__PURE__ */ jsx("span", {
+								className: BrandKitViewer_module_default.downloads,
+								children: l.downloads.filter((d) => SAFE.test(d.href)).map((d) => /* @__PURE__ */ jsxs(Button, {
+									variant: "ghost",
+									size: "sm",
+									href: d.href,
+									download: true,
+									children: [d.label, /* @__PURE__ */ jsx("span", {
+										className: BrandKitViewer_module_default.srOnly,
+										children: ` (${l.name})`
+									})]
+								}, d.href))
+							}) : null
+						]
+					}, l.id))
+				})]
+			}) : null,
+			colors.length ? /* @__PURE__ */ jsxs("section", {
+				className: BrandKitViewer_module_default.section,
+				"aria-labelledby": `${id ?? "kit"}-colors`,
+				children: [/* @__PURE__ */ jsx("h3", {
+					id: `${id ?? "kit"}-colors`,
+					className: BrandKitViewer_module_default.sectionTitle,
+					children: t.agencyColorPalette
+				}), /* @__PURE__ */ jsx(ColorPaletteDisplay, {
+					colors,
+					label: `${brand} · ${t.agencyColorPalette}`
+				})]
+			}) : null,
+			fonts.length ? /* @__PURE__ */ jsxs("section", {
+				className: BrandKitViewer_module_default.section,
+				"aria-labelledby": `${id ?? "kit"}-fonts`,
+				children: [/* @__PURE__ */ jsx("h3", {
+					id: `${id ?? "kit"}-fonts`,
+					className: BrandKitViewer_module_default.sectionTitle,
+					children: t.agencyBrandFonts
+				}), /* @__PURE__ */ jsx("ul", {
+					className: BrandKitViewer_module_default.fonts,
+					children: fonts.map((f) => /* @__PURE__ */ jsxs("li", {
+						className: BrandKitViewer_module_default.font,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: BrandKitViewer_module_default.fontRole,
+								children: f.role
+							}),
+							/* @__PURE__ */ jsx("span", {
+								ref: font(f.family),
+								className: BrandKitViewer_module_default.fontSample,
+								"aria-hidden": "true",
+								children: "Aa Bb Çç Ğğ İı Öö Şş Üü 123"
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: BrandKitViewer_module_default.fontName,
+								children: [f.family, f.weights ? /* @__PURE__ */ jsx("span", {
+									className: BrandKitViewer_module_default.fontWeights,
+									children: ` · ${f.weights}`
+								}) : null]
+							}),
+							f.href && SAFE.test(f.href) ? /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								href: f.href,
+								target: "_blank",
+								children: t.agencyBrandFontLink
+							}) : null
+						]
+					}, f.role))
+				})]
+			}) : null,
+			voice ? /* @__PURE__ */ jsxs("section", {
+				className: BrandKitViewer_module_default.section,
+				"aria-labelledby": `${id ?? "kit"}-voice`,
+				children: [/* @__PURE__ */ jsx("h3", {
+					id: `${id ?? "kit"}-voice`,
+					className: BrandKitViewer_module_default.sectionTitle,
+					children: t.agencyBrandVoice
+				}), /* @__PURE__ */ jsxs("div", {
+					className: BrandKitViewer_module_default.voice,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: BrandKitViewer_module_default.voiceCol,
+						"data-kind": "do",
+						children: [/* @__PURE__ */ jsxs("h4", {
+							className: BrandKitViewer_module_default.voiceTitle,
+							children: [/* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }), t.agencyBrandDo]
+						}), /* @__PURE__ */ jsx("ul", { children: voice.do.map((x) => /* @__PURE__ */ jsx("li", { children: x }, x)) })]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: BrandKitViewer_module_default.voiceCol,
+						"data-kind": "dont",
+						children: [/* @__PURE__ */ jsxs("h4", {
+							className: BrandKitViewer_module_default.voiceTitle,
+							children: [/* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": "true" }), t.agencyBrandDont]
+						}), /* @__PURE__ */ jsx("ul", { children: voice.dont.map((x) => /* @__PURE__ */ jsx("li", { children: x }, x)) })]
+					})]
+				})]
+			}) : null
+		]
+	});
+}
+export { BrandKitViewer };

package/dist/agency/BrandKitViewer/BrandKitViewer.module.js

@@ -0,0 +1,25 @@
+import './BrandKitViewer.css';
+// src/agency/BrandKitViewer/BrandKitViewer.module.css
+var BrandKitViewer_module_default = {
+	"root": "sti-BrandKitViewer-root-95c88",
+	"head": "sti-BrandKitViewer-head-7e806",
+	"title": "sti-BrandKitViewer-title-e2c80",
+	"section": "sti-BrandKitViewer-section-358d7",
+	"sectionTitle": "sti-BrandKitViewer-sectionTitle-92226",
+	"logos": "sti-BrandKitViewer-logos-01b3f",
+	"fonts": "sti-BrandKitViewer-fonts-b02af",
+	"logo": "sti-BrandKitViewer-logo-709e8",
+	"logoStage": "sti-BrandKitViewer-logoStage-d6d73",
+	"logoName": "sti-BrandKitViewer-logoName-b219b",
+	"downloads": "sti-BrandKitViewer-downloads-0a8d4",
+	"font": "sti-BrandKitViewer-font-4bc0f",
+	"fontRole": "sti-BrandKitViewer-fontRole-22282",
+	"fontSample": "sti-BrandKitViewer-fontSample-31339",
+	"fontName": "sti-BrandKitViewer-fontName-045f0",
+	"fontWeights": "sti-BrandKitViewer-fontWeights-fcaa1",
+	"voice": "sti-BrandKitViewer-voice-78caa",
+	"voiceCol": "sti-BrandKitViewer-voiceCol-54eda",
+	"voiceTitle": "sti-BrandKitViewer-voiceTitle-1f48e",
+	"srOnly": "sti-BrandKitViewer-srOnly-ad592"
+};
+export { BrandKitViewer_module_default as default };

package/dist/agency/BriefForm/BriefForm.css

@@ -0,0 +1,25 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-BriefForm-root-19f79 {
+    gap: var(--sti-space-6);
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 48rem;
+    display: grid;
+  }
+
+  .sti-BriefForm-grid-eb147 {
+    gap: var(--sti-space-4);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+    display: grid;
+  }
+
+  .sti-BriefForm-actions-6ae34 {
+    justify-content: flex-end;
+    gap: var(--sti-space-2);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    flex-wrap: wrap;
+    padding-block-start: var(--sti-space-4);
+    display: flex;
+  }
+}

package/dist/agency/BriefForm/BriefForm.d.ts

@@ -0,0 +1,39 @@
+import { Platform } from "../_shared/platforms.js";
+import { DateRangeValue } from "../../components/_internal/date/iso.js";
+import "../../components/DateRangePicker/DateRangePicker.js";
+export type BriefObjective = "awareness" | "engagement" | "traffic" | "leads" | "sales";
+export interface BriefValues {
+  name: string;
+  clientId: string | null;
+  objective: BriefObjective | null;
+  audience: string;
+  message: string;
+  channels: Platform[];
+  deliverables: string[];
+  budget: number | null;
+  dates: DateRangeValue | null;
+  references: string;
+  notes: string;
+}
+export interface BriefFormProps {
+  /** Müşteri seçenekleri. */
+  clients: readonly {
+    id: string;
+    name: string;
+  }[];
+  defaultValues?: Partial<BriefValues>;
+  /** Gönderir (söz dönerse beklenir; hata metni dönerse yazılır). */
+  onSubmit: (values: BriefValues) => void | string | Promise<void | string>;
+  /** "Taslak olarak kaydedin" (doğrulamasız). */
+  onSaveDraft?: (values: BriefValues) => void;
+  /** Bütçe para birimi. Varsayılan TRY. */
+  currency?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kampanya brifi formu: temel bilgiler (ad, müşteri, tarih aralığı, bütçe), amaç, hedef kitle ve
+ * ana mesaj, kanallar ve teslimatlar, referanslar ve notlar. Zorunlu alanlar gönderimde denetlenir
+ * ve hata özeti en üste gelir; gönderim başarılı olunca onay yazılır, form kilitlenir.
+ */
+export declare function BriefForm({ clients, defaultValues, onSubmit, onSaveDraft, currency, className, id }: BriefFormProps): import("react").JSX.Element;