@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/ReactionPicker/ReactionPicker.css

@@ -0,0 +1,164 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ReactionPicker-root-0719c {
+    --sti-reaction-h: var(--sti-control-h-sm);
+    --sti-reaction-emoji: 1.125rem;
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    min-width: 0;
+    display: flex;
+  }
+
+  .sti-ReactionPicker-root-0719c[data-size="sm"] {
+    --sti-reaction-h: 1.75rem;
+    --sti-reaction-emoji: 1rem;
+  }
+
+  @media (pointer: coarse) {
+    .sti-ReactionPicker-root-0719c {
+      --sti-reaction-h: var(--sti-control-h-md);
+    }
+  }
+
+  .sti-ReactionPicker-emoji-68ab3, .sti-ReactionPicker-option-19cd1 {
+    font-family: Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, Twemoji Mozilla, sans-serif;
+  }
+
+  .sti-ReactionPicker-chip-6ea1c {
+    align-items: center;
+    gap: var(--sti-space-1);
+    height: var(--sti-reaction-h);
+    padding-inline: var(--sti-space-2);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg);
+    font: inherit;
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    -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);
+    display: inline-flex;
+  }
+
+  .sti-ReactionPicker-emoji-68ab3 {
+    font-size: var(--sti-reaction-emoji);
+    line-height: 1;
+  }
+
+  @media (hover: hover) {
+    .sti-ReactionPicker-chip-6ea1c[data-hovered]:not([data-disabled]) {
+      border-color: var(--sti-border-strong);
+    }
+  }
+
+  .sti-ReactionPicker-chip-6ea1c[data-selected] {
+    border-color: var(--sti-border-accent);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+  }
+
+  .sti-ReactionPicker-chip-6ea1c[data-pressed]:not([data-disabled]) {
+    transform: scale(.96);
+  }
+
+  .sti-ReactionPicker-chip-6ea1c[data-focus-visible], .sti-ReactionPicker-option-19cd1[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ReactionPicker-chip-6ea1c:focus:not([data-focus-visible]) {
+    outline: none;
+  }
+
+  .sti-ReactionPicker-chip-6ea1c[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--sti-opacity-disabled);
+  }
+
+  .sti-ReactionPicker-popover-e80f9 {
+    padding: var(--sti-space-2);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-lg);
+  }
+
+  .sti-ReactionPicker-popover-e80f9[data-entering] {
+    animation: sti-ReactionPicker-sti-reaction-in-6526a var(--sti-duration-fast) var(--sti-ease-out);
+  }
+
+  .sti-ReactionPicker-dialog-9c4f1 {
+    outline: none;
+  }
+
+  .sti-ReactionPicker-grid-6029d {
+    grid-template-columns: repeat(4, var(--sti-control-h-md));
+    gap: var(--sti-space-1);
+    outline: none;
+    display: grid;
+  }
+
+  .sti-ReactionPicker-option-19cd1 {
+    width: var(--sti-control-h-md);
+    height: var(--sti-control-h-md);
+    border-radius: var(--sti-radius-sm);
+    cursor: pointer;
+    place-items: center;
+    font-size: 1.375rem;
+    line-height: 1;
+    display: grid;
+  }
+
+  .sti-ReactionPicker-glyph-5026e {
+    transition: transform var(--sti-duration-fast) var(--sti-ease-out);
+  }
+
+  .sti-ReactionPicker-option-19cd1[data-focused], .sti-ReactionPicker-option-19cd1[data-hovered] {
+    background: var(--sti-bg-surface-hover);
+  }
+
+  .sti-ReactionPicker-option-19cd1:is([data-focused], [data-hovered]) .sti-ReactionPicker-glyph-5026e {
+    transform: scale(1.15);
+  }
+
+  .sti-ReactionPicker-option-19cd1[data-chosen] {
+    background: var(--sti-bg-accent-subtle);
+    box-shadow: inset 0 0 0 var(--sti-border-width) var(--sti-border-accent);
+  }
+
+  @keyframes sti-ReactionPicker-sti-reaction-in-6526a {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ReactionPicker-chip-6ea1c, .sti-ReactionPicker-glyph-5026e {
+      transition: none;
+    }
+
+    .sti-ReactionPicker-chip-6ea1c[data-pressed], .sti-ReactionPicker-option-19cd1 .sti-ReactionPicker-glyph-5026e {
+      transform: none;
+    }
+
+    .sti-ReactionPicker-popover-e80f9[data-entering] {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ReactionPicker-chip-6ea1c {
+      border-color: buttontext;
+    }
+
+    .sti-ReactionPicker-chip-6ea1c[data-selected], .sti-ReactionPicker-option-19cd1[data-chosen] {
+      border-color: highlight;
+      box-shadow: inset 0 0 0 2px highlight;
+    }
+  }
+}

package/dist/components/ReactionPicker/ReactionPicker.d.ts

@@ -0,0 +1,33 @@
+export interface ReactionOption {
+  /** Emoji karakteri. */
+  emoji: string;
+  /** Ekran okuyucu adı ("Beğen", "Kutlama"). */
+  label: string;
+}
+export interface Reaction {
+  emoji: string;
+  /** Bu tepkiyi verenlerin sayısı. */
+  count: number;
+  /** Geçerli kişinin bu tepkiyi verip vermediği. */
+  isSelected?: boolean;
+}
+export interface ReactionPickerProps {
+  /** Verilmiş tepkiler (sayıları ve geçerli kişinin seçimiyle). */
+  reactions: Reaction[];
+  /** Tepki eklenince ya da kaldırılınca: emoji ve yeni durum. */
+  onToggle: (emoji: string, isSelected: boolean) => void;
+  /** Seçilebilecek tepkiler; verilmezse kurumsal kullanıma uygun 8 tepki. */
+  options?: ReactionOption[];
+  /** "Tepki ekle" düğmesinin adı. */
+  addLabel?: string;
+  size?: "sm" | "md";
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Tepki seçici: verilmiş tepkiler sayılarıyla düğme olarak dizilir (basılı = sizin tepkiniz;
+ * `aria-pressed`), "Tepki ekle" düğmesi tepki ızgarasını açar. Izgarada oklar dört yönde gezer,
+ * Enter ya da Boşluk seçer, Escape kapatır ve odağı düğmeye döndürür.
+ */
+export declare function ReactionPicker({ reactions, onToggle, options, addLabel, size, isDisabled, className, id }: ReactionPickerProps): import("react").JSX.Element;

package/dist/components/ReactionPicker/ReactionPicker.js

@@ -0,0 +1,114 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { useThemeContext } from "../_internal/themeContext.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import ReactionPicker_module_default from "./ReactionPicker.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Dialog, DialogTrigger, ListBox, ListBoxItem, Popover, ToggleButton } from "react-aria-components";
+// src/components/ReactionPicker/ReactionPicker.tsx
+const DEFAULT_KEYS = [
+	["👍", "reactionLike"],
+	["❤️", "reactionLove"],
+	["🎉", "reactionCelebrate"],
+	["👏", "reactionApplause"],
+	["🙏", "reactionThanks"],
+	["😂", "reactionLaugh"],
+	["😮", "reactionSurprise"],
+	["🔥", "reactionFire"]
+];
+/**
+* Tepki seçici: verilmiş tepkiler sayılarıyla düğme olarak dizilir (basılı = sizin tepkiniz;
+* `aria-pressed`), "Tepki ekle" düğmesi tepki ızgarasını açar. Izgarada oklar dört yönde gezer,
+* Enter ya da Boşluk seçer, Escape kapatır ve odağı düğmeye döndürür.
+*/
+function ReactionPicker({ reactions, onToggle, options, addLabel, size = "md", isDisabled, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const all = options ?? DEFAULT_KEYS.map(([emoji, key]) => ({
+		emoji,
+		label: t[key]
+	}));
+	const nameOf = (emoji) => all.find((o) => o.emoji === emoji)?.label ?? emoji;
+	const [open, setOpen] = useState(false);
+	const anchor = useRef(null);
+	const context = useThemeContext(anchor, open);
+	const visible = reactions.filter((r) => r.count > 0 || r.isSelected);
+	const add = addLabel ?? t.reactionAdd;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: anchor,
+		id,
+		className: [ReactionPicker_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		role: "group",
+		"aria-label": t.reactions,
+		children: [visible.map((r) => /* @__PURE__ */ jsxs(ToggleButton, {
+			className: ReactionPicker_module_default.chip,
+			isSelected: Boolean(r.isSelected),
+			isDisabled,
+			onChange: (next) => onToggle(r.emoji, next),
+			"aria-label": template(t.reactionCount, {
+				name: nameOf(r.emoji),
+				count: f.number(r.count)
+			}),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: ReactionPicker_module_default.emoji,
+				"aria-hidden": "true",
+				children: r.emoji
+			}), /* @__PURE__ */ jsx("span", {
+				className: ReactionPicker_module_default.count,
+				"aria-hidden": "true",
+				children: f.compact(r.count)
+			})]
+		}, r.emoji)), /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen: open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(IconButton, {
+				label: add,
+				icon: /* @__PURE__ */ jsx(PlusIcon, {}),
+				variant: "ghost",
+				size,
+				isDisabled,
+				className: ReactionPicker_module_default.add
+			}), /* @__PURE__ */ jsx(Popover, {
+				placement: "top start",
+				offset: 6,
+				className: ReactionPicker_module_default.popover,
+				...context,
+				children: /* @__PURE__ */ jsx(Dialog, {
+					className: ReactionPicker_module_default.dialog,
+					"aria-label": add,
+					children: /* @__PURE__ */ jsx(ListBox, {
+						"aria-label": t.reactionChoose,
+						layout: "grid",
+						autoFocus: "first",
+						className: ReactionPicker_module_default.grid,
+						onAction: (key) => {
+							const emoji = String(key);
+							onToggle(emoji, !reactions.find((r) => r.emoji === emoji)?.isSelected);
+							setOpen(false);
+						},
+						children: all.map((o) => {
+							const selected = reactions.some((r) => r.emoji === o.emoji && r.isSelected);
+							return /* @__PURE__ */ jsx(ListBoxItem, {
+								id: o.emoji,
+								textValue: o.label,
+								"aria-label": selected ? template(t.reactionRemove, { name: o.label }) : o.label,
+								className: ReactionPicker_module_default.option,
+								"data-chosen": selected ? "" : void 0,
+								children: /* @__PURE__ */ jsx("span", {
+									className: ReactionPicker_module_default.glyph,
+									"aria-hidden": "true",
+									children: o.emoji
+								})
+							}, o.emoji);
+						})
+					})
+				})
+			})]
+		})]
+	});
+}
+export { ReactionPicker };

package/dist/components/ReactionPicker/ReactionPicker.module.js

@@ -0,0 +1,14 @@
+import './ReactionPicker.css';
+// src/components/ReactionPicker/ReactionPicker.module.css
+var ReactionPicker_module_default = {
+	"root": "sti-ReactionPicker-root-0719c",
+	"emoji": "sti-ReactionPicker-emoji-68ab3",
+	"option": "sti-ReactionPicker-option-19cd1",
+	"chip": "sti-ReactionPicker-chip-6ea1c",
+	"popover": "sti-ReactionPicker-popover-e80f9",
+	"sti-reaction-in": "sti-ReactionPicker-sti-reaction-in-6526a",
+	"dialog": "sti-ReactionPicker-dialog-9c4f1",
+	"grid": "sti-ReactionPicker-grid-6029d",
+	"glyph": "sti-ReactionPicker-glyph-5026e"
+};
+export { ReactionPicker_module_default as default };

package/dist/components/ReadMore/ReadMore.css

@@ -0,0 +1,146 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ReadMore-root-62cc7 {
+    --sti-read-more-lines: 3;
+    --sti-read-more-gap: var(--sti-space-1);
+    --sti-read-more-toggle-fg: var(--sti-fg-link);
+    --sti-read-more-toggle-fg-hover: var(--sti-fg-link-hover);
+    --sti-read-more-toggle-h: var(--sti-icon-lg);
+    --sti-read-more-underline-offset: .18em;
+    justify-items: start;
+    gap: var(--sti-read-more-gap);
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-ReadMore-root-62cc7[data-lines="1"] {
+    --sti-read-more-lines: 1;
+  }
+
+  .sti-ReadMore-root-62cc7[data-lines="2"] {
+    --sti-read-more-lines: 2;
+  }
+
+  .sti-ReadMore-root-62cc7[data-lines="4"] {
+    --sti-read-more-lines: 4;
+  }
+
+  .sti-ReadMore-root-62cc7[data-lines="5"] {
+    --sti-read-more-lines: 5;
+  }
+
+  .sti-ReadMore-root-62cc7[data-lines="6"] {
+    --sti-read-more-lines: 6;
+  }
+
+  .sti-ReadMore-root-62cc7[data-lines="7"] {
+    --sti-read-more-lines: 7;
+  }
+
+  .sti-ReadMore-root-62cc7[data-lines="8"] {
+    --sti-read-more-lines: 8;
+  }
+
+  .sti-ReadMore-root-62cc7[data-lines="9"] {
+    --sti-read-more-lines: 9;
+  }
+
+  .sti-ReadMore-root-62cc7[data-lines="10"] {
+    --sti-read-more-lines: 10;
+  }
+
+  @media (scripting: enabled) {
+    .sti-ReadMore-root-62cc7[data-measuring]:not([data-expanded]) {
+      padding-block-end: calc(var(--sti-read-more-toggle-h) + var(--sti-read-more-gap));
+    }
+  }
+
+  .sti-ReadMore-content-ca1f8 {
+    overflow-wrap: anywhere;
+    justify-self: stretch;
+    min-width: 0;
+  }
+
+  .sti-ReadMore-content-ca1f8[data-collapsed] {
+    -webkit-line-clamp: var(--sti-read-more-lines);
+    line-clamp: var(--sti-read-more-lines);
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  @media (scripting: none) {
+    .sti-ReadMore-content-ca1f8[data-collapsed] {
+      -webkit-line-clamp: none;
+      line-clamp: none;
+      display: block;
+      overflow: visible;
+    }
+  }
+
+  .sti-ReadMore-toggle-041e1 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-height: var(--sti-read-more-toggle-h);
+    margin: 0;
+    padding: 0 var(--sti-space-1);
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-radius-xs);
+    color: var(--sti-read-more-toggle-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    cursor: pointer;
+    transition: color var(--sti-duration-fast) var(--sti-ease-snap);
+    background: none;
+    margin-inline-start: calc(var(--sti-space-1) * -1);
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .sti-ReadMore-toggle-041e1[data-hovered] {
+      color: var(--sti-read-more-toggle-fg-hover);
+      text-underline-offset: var(--sti-read-more-underline-offset);
+      text-decoration: underline;
+      text-decoration-thickness: from-font;
+    }
+  }
+
+  @media (pointer: coarse) {
+    .sti-ReadMore-root-62cc7 {
+      --sti-read-more-toggle-h: var(--sti-control-h-md);
+    }
+  }
+
+  .sti-ReadMore-toggle-041e1[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ReadMore-toggle-041e1:focus:not([data-focus-visible]) {
+    outline: none;
+  }
+
+  .sti-ReadMore-icon-c08ab {
+    font-size: var(--sti-icon-sm);
+    transition: transform var(--sti-duration-base) var(--sti-ease-out);
+    flex: none;
+  }
+
+  .sti-ReadMore-root-62cc7[data-expanded] .sti-ReadMore-icon-c08ab {
+    transform: rotate(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ReadMore-toggle-041e1, .sti-ReadMore-icon-c08ab {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ReadMore-toggle-041e1 {
+      color: linktext;
+    }
+  }
+}

package/dist/components/ReadMore/ReadMore.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+export type ReadMoreLines = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export interface ReadMoreProps {
+  /** Uzun metin (paragraf, bağlantı ve satır içi öğeler içerebilir). */
+  children: ReactNode;
+  /** Kapalıyken gösterilen satır sayısı (1–10); varsayılan 3. */
+  lines?: ReadMoreLines;
+  /** Açık mı (denetimli kullanım; `onExpandedChange` ile birlikte). */
+  isExpanded?: boolean;
+  /** İlk durumda açık mı (denetimsiz kullanım). */
+  defaultExpanded?: boolean;
+  /** Açılıp kapandığında yeni durumla çağrılır. */
+  onExpandedChange?: (isExpanded: boolean) => void;
+  /**
+   * Düğmenin metni (kapalıyken); varsayılan "Devamını oku" (`readMore`). Sayfada birden çok
+   * ReadMore varsa ne açıldığını söyleyen metin verilir: "Açıklamanın devamını oku".
+   */
+  expandLabel?: string;
+  /** Düğmenin metni (açıkken); varsayılan "Daha az göster" (`showLess`). */
+  collapseLabel?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Uzun metni belirli satırda keser ve "Devamını oku" düğmesiyle açar. Düğme yalnız metin gerçekten
+ * kesiliyorsa görünür (tarayıcıda ölçülür; genişlik, yazı tipi ve içerik değişince yeniden).
+ * Ekran okuyucu kapalı durumda da metnin tamamını okur; kesme yalnız görseldir. Kapalı metnin
+ * görünmeyen kısmındaki bir bağlantıya klavyeyle gelinirse metin kendiliğinden açılır.
+ */
+export declare function ReadMore({ children, lines, isExpanded, defaultExpanded, onExpandedChange, expandLabel, collapseLabel, className, id }: ReadMoreProps): import("react").JSX.Element;

package/dist/components/ReadMore/ReadMore.js

@@ -0,0 +1,94 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import ReadMore_module_default from "./ReadMore.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+// src/components/ReadMore/ReadMore.tsx
+/**
+* Uzun metni belirli satırda keser ve "Devamını oku" düğmesiyle açar. Düğme yalnız metin gerçekten
+* kesiliyorsa görünür (tarayıcıda ölçülür; genişlik, yazı tipi ve içerik değişince yeniden).
+* Ekran okuyucu kapalı durumda da metnin tamamını okur; kesme yalnız görseldir. Kapalı metnin
+* görünmeyen kısmındaki bir bağlantıya klavyeyle gelinirse metin kendiliğinden açılır.
+*/
+function ReadMore({ children, lines = 3, isExpanded, defaultExpanded = false, onExpandedChange, expandLabel, collapseLabel, className, id }) {
+	const t = useMessages();
+	const contentId = useId();
+	const contentRef = useRef(null);
+	const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
+	const expanded = isExpanded ?? innerExpanded;
+	const [overflowing, setOverflowing] = useState(false);
+	const [measured, setMeasured] = useState(false);
+	const setExpanded = (next) => {
+		if (isExpanded === void 0) setInnerExpanded(next);
+		onExpandedChange?.(next);
+	};
+	const measure = useCallback(() => {
+		const el = contentRef.current;
+		if (!el) return;
+		const wasCollapsed = el.hasAttribute("data-collapsed");
+		if (!wasCollapsed) el.setAttribute("data-collapsed", "");
+		const clamped = el.scrollHeight > el.clientHeight + 1;
+		if (!wasCollapsed) el.removeAttribute("data-collapsed");
+		setOverflowing(clamped);
+		setMeasured(true);
+	}, []);
+	useEffect(() => {
+		measure();
+	});
+	useEffect(() => {
+		const el = contentRef.current;
+		if (!el) return;
+		let cancelled = false;
+		const observer = new ResizeObserver(() => measure());
+		observer.observe(el);
+		document.fonts?.ready.then(() => {
+			if (!cancelled) measure();
+		});
+		return () => {
+			cancelled = true;
+			observer.disconnect();
+		};
+	}, [measure]);
+	const onFocusIn = useRef(() => void 0);
+	onFocusIn.current = (e) => {
+		const target = e.target;
+		const content = contentRef.current;
+		if (expanded || !overflowing || !content || !target?.matches(":focus-visible")) return;
+		if (target.getBoundingClientRect().bottom - content.getBoundingClientRect().top + content.scrollTop > content.clientHeight + 1) {
+			content.scrollTop = 0;
+			setExpanded(true);
+		}
+	};
+	useEffect(() => {
+		const el = contentRef.current;
+		if (!el) return;
+		const listener = (e) => onFocusIn.current(e);
+		el.addEventListener("focusin", listener);
+		return () => el.removeEventListener("focusin", listener);
+	}, []);
+	const collapsed = !expanded;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [ReadMore_module_default.root, className].filter(Boolean).join(" "),
+		"data-lines": lines,
+		"data-expanded": expanded ? "" : void 0,
+		"data-overflowing": overflowing ? "" : void 0,
+		"data-measuring": measured ? void 0 : "",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			id: contentId,
+			className: ReadMore_module_default.content,
+			"data-collapsed": collapsed ? "" : void 0,
+			children
+		}), overflowing ? /* @__PURE__ */ jsxs(Button, {
+			className: ReadMore_module_default.toggle,
+			"aria-expanded": expanded,
+			"aria-controls": contentId,
+			onPress: () => setExpanded(!expanded),
+			children: [/* @__PURE__ */ jsx("span", { children: expanded ? collapseLabel ?? t.showLess : expandLabel ?? t.readMore }), /* @__PURE__ */ jsx(ChevronDownIcon, { className: ReadMore_module_default.icon })]
+		}) : null]
+	});
+}
+export { ReadMore };

package/dist/components/ReadMore/ReadMore.module.js

@@ -0,0 +1,9 @@
+import './ReadMore.css';
+// src/components/ReadMore/ReadMore.module.css
+var ReadMore_module_default = {
+	"root": "sti-ReadMore-root-62cc7",
+	"content": "sti-ReadMore-content-ca1f8",
+	"toggle": "sti-ReadMore-toggle-041e1",
+	"icon": "sti-ReadMore-icon-c08ab"
+};
+export { ReadMore_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ReadMore, ReadMoreLines, ReadMoreProps } from "./ReadMore.js";
+export { ReadMore, ReadMoreLines, ReadMoreProps };

package/dist/components/RecurrencePicker/RecurrencePicker.css

@@ -0,0 +1,60 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-RecurrencePicker-root-d91aa {
+    inline-size: 100%;
+    min-inline-size: 0;
+    container-type: inline-size;
+  }
+
+  .sti-RecurrencePicker-row-31362 {
+    gap: var(--sti-space-4);
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+  }
+
+  @container (inline-size >= 30rem) {
+    .sti-RecurrencePicker-row-31362 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      align-items: start;
+    }
+  }
+
+  .sti-RecurrencePicker-block-315d4 {
+    gap: var(--sti-space-2);
+    justify-items: start;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-RecurrencePicker-subLabel-d810b {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-RecurrencePicker-hidden-aaa15 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .sti-RecurrencePicker-summary-cfc60 {
+    padding: var(--sti-space-3) var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-RecurrencePicker-summaryLabel-64193 {
+    color: var(--sti-fg-muted);
+    font-weight: var(--sti-font-weight-medium);
+  }
+}