@octaviaflow/core 3.1.0-beta.75 → 3.1.0-beta.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/chunk-CVU6QDOL.js +1696 -0
  2. package/dist/chunk-CVU6QDOL.js.map +1 -0
  3. package/dist/chunk-PZIWTCI6.js +1690 -0
  4. package/dist/chunk-PZIWTCI6.js.map +1 -0
  5. package/dist/chunk-REEBXURQ.js +1646 -0
  6. package/dist/chunk-REEBXURQ.js.map +1 -0
  7. package/dist/components/Avatar/Avatar.d.ts +17 -3
  8. package/dist/components/Avatar/Avatar.d.ts.map +1 -1
  9. package/dist/components/Avatar/index.d.ts +1 -1
  10. package/dist/components/Avatar/index.d.ts.map +1 -1
  11. package/dist/components/BlogCard/BlogCard.d.ts +1 -1
  12. package/dist/components/BlogCard/BlogCard.d.ts.map +1 -1
  13. package/dist/components/KanbanCard/KanbanCard.d.ts +1 -1
  14. package/dist/components/KanbanCard/KanbanCard.d.ts.map +1 -1
  15. package/dist/components/MembersSettings/MembersSettings.d.ts.map +1 -1
  16. package/dist/components/OTPInput/OTPInput.d.ts.map +1 -1
  17. package/dist/components/OnboardingFlow/OnboardingFlow.d.ts +90 -0
  18. package/dist/components/OnboardingFlow/OnboardingFlow.d.ts.map +1 -0
  19. package/dist/components/OnboardingFlow/index.d.ts +2 -0
  20. package/dist/components/OnboardingFlow/index.d.ts.map +1 -0
  21. package/dist/components/OrganizationSettings/OrganizationSettings.d.ts.map +1 -1
  22. package/dist/components/SettingsLayout/SettingsLayout.d.ts +1 -1
  23. package/dist/components/SettingsLayout/SettingsLayout.d.ts.map +1 -1
  24. package/dist/components/TemplateCard/TemplateCard.d.ts +1 -1
  25. package/dist/components/TemplateCard/TemplateCard.d.ts.map +1 -1
  26. package/dist/components/TestimonialCard/TestimonialCard.d.ts +1 -1
  27. package/dist/components/TestimonialCard/TestimonialCard.d.ts.map +1 -1
  28. package/dist/components/UserCard/UserCard.d.ts +1 -1
  29. package/dist/components/UserCard/UserCard.d.ts.map +1 -1
  30. package/dist/index.cjs +4793 -4481
  31. package/dist/index.cjs.map +1 -1
  32. package/dist/index.d.ts +3 -1
  33. package/dist/index.d.ts.map +1 -1
  34. package/dist/index.js +3685 -3355
  35. package/dist/index.js.map +1 -1
  36. package/dist/marketing.cjs +228 -260
  37. package/dist/marketing.cjs.map +1 -1
  38. package/dist/marketing.js +1 -1
  39. package/dist/styles.css +1 -1
  40. package/package.json +1 -1
@@ -0,0 +1,1646 @@
1
+ import {
2
+ Slot,
3
+ resolveAccessibleName
4
+ } from "./chunk-CRDYAV5R.js";
5
+ import {
6
+ cn
7
+ } from "./chunk-ZAUUGK2Y.js";
8
+
9
+ // src/components/Card/Card.tsx
10
+ import { motion, useReducedMotion } from "framer-motion";
11
+ import {
12
+ forwardRef
13
+ } from "react";
14
+ import { jsx } from "react/jsx-runtime";
15
+ var Card = forwardRef(function Card2({
16
+ variant = "default",
17
+ padding = "md",
18
+ radius = "md",
19
+ hoverable = false,
20
+ disabled = false,
21
+ loading = false,
22
+ asChild = false,
23
+ onClick,
24
+ onKeyDown,
25
+ className,
26
+ children,
27
+ ...rest
28
+ }, ref) {
29
+ const reducedMotion = useReducedMotion();
30
+ const isInteractive = Boolean(onClick) && !disabled && !loading;
31
+ const handleKeyDown = (e) => {
32
+ onKeyDown?.(e);
33
+ if (e.defaultPrevented) return;
34
+ if (!isInteractive) return;
35
+ if ((e.key === "Enter" || e.key === " ") && !e.repeat) {
36
+ e.preventDefault();
37
+ onClick?.(e);
38
+ }
39
+ };
40
+ const rootClassName = cn(
41
+ "ods-card",
42
+ `ods-card--${variant}`,
43
+ `ods-card--pad-${padding}`,
44
+ `ods-card--radius-${radius}`,
45
+ (hoverable || isInteractive) && !loading && !disabled && "ods-card--hoverable",
46
+ isInteractive && "ods-card--clickable",
47
+ disabled && "ods-card--disabled",
48
+ loading && "ods-card--loading",
49
+ className
50
+ );
51
+ if (asChild) {
52
+ return /* @__PURE__ */ jsx(
53
+ Slot,
54
+ {
55
+ ...rest,
56
+ ref,
57
+ className: rootClassName,
58
+ onClick: isInteractive ? onClick : void 0,
59
+ onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
60
+ "aria-disabled": disabled || void 0,
61
+ children
62
+ }
63
+ );
64
+ }
65
+ if (loading) {
66
+ return /* @__PURE__ */ jsx(
67
+ "div",
68
+ {
69
+ ...rest,
70
+ ref,
71
+ className: rootClassName,
72
+ "aria-busy": "true",
73
+ "aria-label": "Loading",
74
+ children: /* @__PURE__ */ jsx("div", { className: "ods-card__skeleton", "data-ods-animate": "shimmer" })
75
+ }
76
+ );
77
+ }
78
+ return /* @__PURE__ */ jsx(
79
+ motion.div,
80
+ {
81
+ ...rest,
82
+ ref,
83
+ onClick: isInteractive ? onClick : void 0,
84
+ onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
85
+ className: rootClassName,
86
+ whileHover: (hoverable || isInteractive) && !reducedMotion ? { y: -2, transition: { duration: 0.15 } } : void 0,
87
+ whileTap: isInteractive && !reducedMotion ? { scale: 0.99 } : void 0,
88
+ role: isInteractive ? "button" : rest.role,
89
+ tabIndex: isInteractive ? rest.tabIndex ?? 0 : rest.tabIndex,
90
+ "aria-disabled": disabled || void 0,
91
+ children
92
+ }
93
+ );
94
+ });
95
+ Card.displayName = "Card";
96
+ var CardHeader = forwardRef(
97
+ function CardHeader2({ className, children, ...rest }, ref) {
98
+ return /* @__PURE__ */ jsx("div", { ...rest, ref, className: cn("ods-card__header", className), children });
99
+ }
100
+ );
101
+ CardHeader.displayName = "Card.Header";
102
+ var CardBody = forwardRef(
103
+ function CardBody2({ className, children, ...rest }, ref) {
104
+ return /* @__PURE__ */ jsx("div", { ...rest, ref, className: cn("ods-card__body", className), children });
105
+ }
106
+ );
107
+ CardBody.displayName = "Card.Body";
108
+ var CardFooter = forwardRef(
109
+ function CardFooter2({ className, children, ...rest }, ref) {
110
+ return /* @__PURE__ */ jsx("div", { ...rest, ref, className: cn("ods-card__footer", className), children });
111
+ }
112
+ );
113
+ CardFooter.displayName = "Card.Footer";
114
+ var CardTitle = forwardRef(
115
+ function CardTitle2({ as: Comp = "h3", className, children, ...rest }, ref) {
116
+ return /* @__PURE__ */ jsx(
117
+ Comp,
118
+ {
119
+ ...rest,
120
+ ref,
121
+ className: cn("ods-card__title", className),
122
+ children
123
+ }
124
+ );
125
+ }
126
+ );
127
+ CardTitle.displayName = "Card.Title";
128
+ var CardDescription = forwardRef(function CardDescription2({ className, children, ...rest }, ref) {
129
+ return /* @__PURE__ */ jsx("p", { ...rest, ref, className: cn("ods-card__description", className), children });
130
+ });
131
+ CardDescription.displayName = "Card.Description";
132
+ Card.Header = CardHeader;
133
+ Card.Body = CardBody;
134
+ Card.Footer = CardFooter;
135
+ Card.Title = CardTitle;
136
+ Card.Description = CardDescription;
137
+
138
+ // src/components/Avatar/Avatar.tsx
139
+ import {
140
+ forwardRef as forwardRef2,
141
+ useCallback,
142
+ useMemo,
143
+ useState
144
+ } from "react";
145
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
146
+ var PALETTE_SIZE = 12;
147
+ function djb2(str) {
148
+ let h = 5381;
149
+ for (let i = 0; i < str.length; i++) h = (h << 5) + h + str.charCodeAt(i);
150
+ return h >>> 0;
151
+ }
152
+ function paletteIndexFor(seed) {
153
+ return djb2(seed) % PALETTE_SIZE;
154
+ }
155
+ var AVATAR_PALETTE_SIZE = PALETTE_SIZE;
156
+ function avatarPaletteIndex(seed) {
157
+ return paletteIndexFor(seed);
158
+ }
159
+ function normalizeInitials(raw) {
160
+ const trimmed = raw.trim();
161
+ if (!trimmed) return "";
162
+ const tokens = trimmed.split(/\s+/).filter(Boolean);
163
+ if (tokens.length >= 2) {
164
+ return (tokens[0].charAt(0) + tokens[1].charAt(0)).toUpperCase();
165
+ }
166
+ return trimmed.slice(0, 2).toUpperCase();
167
+ }
168
+ var STATUS_DEFAULT_LABEL = {
169
+ online: "Online",
170
+ offline: "Offline",
171
+ busy: "Busy",
172
+ away: "Away"
173
+ };
174
+ var Avatar = forwardRef2(function Avatar2({
175
+ src,
176
+ alt,
177
+ initials,
178
+ icon,
179
+ fallback,
180
+ seed,
181
+ palette,
182
+ size = "md",
183
+ shape = "circle",
184
+ status,
185
+ statusLabel,
186
+ onClick,
187
+ imgLoading = "lazy",
188
+ referrerPolicy,
189
+ className,
190
+ ...rest
191
+ }, ref) {
192
+ const [imgFailed, setImgFailed] = useState(false);
193
+ const handleImgError = useCallback(() => setImgFailed(true), []);
194
+ const showImage = Boolean(src) && !imgFailed;
195
+ const normalizedInitials = useMemo(
196
+ () => initials ? normalizeInitials(initials) : "",
197
+ [initials]
198
+ );
199
+ const paletteIdx = useMemo(() => {
200
+ if (palette !== void 0) {
201
+ return (Math.trunc(palette) % PALETTE_SIZE + PALETTE_SIZE) % PALETTE_SIZE;
202
+ }
203
+ const resolved = seed ?? alt ?? initials ?? "?";
204
+ return paletteIndexFor(resolved);
205
+ }, [palette, seed, alt, initials]);
206
+ const baseName = alt || normalizedInitials || "Avatar";
207
+ const announcedStatus = status ? statusLabel ?? STATUS_DEFAULT_LABEL[status] : "";
208
+ const accessibleName = announcedStatus ? `${baseName}, ${announcedStatus}` : baseName;
209
+ const isClickable = Boolean(onClick);
210
+ const handleKeyDown = (e) => {
211
+ if (!isClickable) return;
212
+ if ((e.key === "Enter" || e.key === " ") && !e.repeat) {
213
+ e.preventDefault();
214
+ onClick?.();
215
+ }
216
+ };
217
+ const rootClassName = cn(
218
+ "ods-avatar",
219
+ `ods-avatar--${size}`,
220
+ `ods-avatar--${shape}`,
221
+ isClickable && "ods-avatar--clickable",
222
+ className
223
+ );
224
+ return /* @__PURE__ */ jsxs(
225
+ "div",
226
+ {
227
+ ...rest,
228
+ ref,
229
+ className: rootClassName,
230
+ role: isClickable ? "button" : "img",
231
+ "aria-label": accessibleName,
232
+ tabIndex: isClickable ? 0 : void 0,
233
+ onClick,
234
+ onKeyDown: isClickable ? handleKeyDown : void 0,
235
+ "data-status": status,
236
+ children: [
237
+ /* @__PURE__ */ jsx2("span", { className: "ods-avatar__inner", "data-palette": paletteIdx, children: showImage ? /* @__PURE__ */ jsx2(
238
+ "img",
239
+ {
240
+ src,
241
+ alt: "",
242
+ className: "ods-avatar__image",
243
+ loading: imgLoading,
244
+ decoding: "async",
245
+ referrerPolicy,
246
+ onError: handleImgError,
247
+ draggable: false
248
+ }
249
+ ) : icon ? /* @__PURE__ */ jsx2("span", { className: "ods-avatar__icon", "aria-hidden": "true", children: icon }) : normalizedInitials ? /* @__PURE__ */ jsx2("span", { className: "ods-avatar__initials", "aria-hidden": "true", children: normalizedInitials }) : /* @__PURE__ */ jsx2("span", { className: "ods-avatar__initials", "aria-hidden": "true", children: fallback ?? "?" }) }),
250
+ status && // Decorative — the textual status is folded into the wrapper's
251
+ // aria-label above. `aria-hidden` keeps AT from double-announcing.
252
+ /* @__PURE__ */ jsx2(
253
+ "span",
254
+ {
255
+ className: cn("ods-avatar__status", `ods-avatar__status--${status}`),
256
+ "aria-hidden": "true"
257
+ }
258
+ )
259
+ ]
260
+ }
261
+ );
262
+ });
263
+ Avatar.displayName = "Avatar";
264
+ var AvatarStack = forwardRef2(function AvatarStack2({ children, max, size = "md", renderOverflow, direction = "ltr", className, ...rest }, ref) {
265
+ const arr = Array.isArray(children) ? children : [children];
266
+ const visible = max && arr.length > max ? arr.slice(0, max) : arr;
267
+ const overflow = max && arr.length > max ? arr.length - max : 0;
268
+ return /* @__PURE__ */ jsxs(
269
+ "div",
270
+ {
271
+ ...rest,
272
+ ref,
273
+ className: cn("ods-avatar-stack", `ods-avatar-stack--${direction}`, className),
274
+ children: [
275
+ visible,
276
+ overflow > 0 && (renderOverflow ? renderOverflow(overflow) : /* @__PURE__ */ jsx2(
277
+ "div",
278
+ {
279
+ className: cn(
280
+ "ods-avatar",
281
+ `ods-avatar--${size}`,
282
+ "ods-avatar--circle",
283
+ "ods-avatar-stack__overflow"
284
+ ),
285
+ role: "img",
286
+ "aria-label": `${overflow} more`,
287
+ children: /* @__PURE__ */ jsx2("span", { className: "ods-avatar__inner", children: /* @__PURE__ */ jsxs("span", { className: "ods-avatar__initials", "aria-hidden": "true", children: [
288
+ "+",
289
+ overflow
290
+ ] }) })
291
+ }
292
+ ))
293
+ ]
294
+ }
295
+ );
296
+ });
297
+ AvatarStack.displayName = "AvatarStack";
298
+
299
+ // src/components/BlogCard/BlogCard.tsx
300
+ import { forwardRef as forwardRef3, useId } from "react";
301
+ import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
302
+ var BlogCard = forwardRef3(function BlogCard2({
303
+ cover,
304
+ coverAspect = "16/9",
305
+ category,
306
+ tags,
307
+ meta,
308
+ readingTime,
309
+ title,
310
+ titleAs = "h3",
311
+ description,
312
+ author,
313
+ footer,
314
+ radius = "md",
315
+ orientation = "vertical",
316
+ href,
317
+ onClick,
318
+ id: providedId,
319
+ className,
320
+ ...rest
321
+ }, ref) {
322
+ const reactId = useId();
323
+ const baseId = providedId ?? `ods-blog-card-${reactId}`;
324
+ const titleId = `${baseId}-title`;
325
+ const descId = description ? `${baseId}-desc` : void 0;
326
+ const tagList = tags ?? (category ? [category] : []);
327
+ const body = /* @__PURE__ */ jsxs2(Fragment, { children: [
328
+ cover && /* @__PURE__ */ jsx3(
329
+ "div",
330
+ {
331
+ className: cn(
332
+ "ods-blog-card__cover",
333
+ `ods-blog-card__cover--aspect-${coverAspect.replace("/", "-")}`
334
+ ),
335
+ "aria-hidden": "true",
336
+ children: cover
337
+ }
338
+ ),
339
+ /* @__PURE__ */ jsxs2("div", { className: "ods-blog-card__body", children: [
340
+ (tagList.length > 0 || meta || readingTime) && /* @__PURE__ */ jsxs2("div", { className: "ods-blog-card__meta", children: [
341
+ tagList.length > 0 && /* @__PURE__ */ jsx3("span", { className: "ods-blog-card__tags", children: tagList.map((t, i) => /* @__PURE__ */ jsx3("span", { className: "ods-blog-card__tag", children: t }, i)) }),
342
+ meta && /* @__PURE__ */ jsx3("span", { className: "ods-blog-card__date", children: meta }),
343
+ readingTime && /* @__PURE__ */ jsx3("span", { className: "ods-blog-card__reading", children: readingTime })
344
+ ] }),
345
+ /* @__PURE__ */ jsx3(Card.Title, { as: titleAs, id: titleId, className: "ods-blog-card__title", children: title }),
346
+ description && /* @__PURE__ */ jsx3(Card.Description, { id: descId, className: "ods-blog-card__desc", children: description }),
347
+ (author || footer) && /* @__PURE__ */ jsxs2("div", { className: "ods-blog-card__footer", children: [
348
+ author && /* @__PURE__ */ jsxs2("div", { className: "ods-blog-card__author", children: [
349
+ author.avatar && /* @__PURE__ */ jsx3(
350
+ Avatar,
351
+ {
352
+ size: "sm",
353
+ src: author.avatar.src,
354
+ initials: author.avatar.initials,
355
+ seed: author.avatar.seed,
356
+ palette: author.avatar.palette,
357
+ alt: author.avatar.alt ?? (typeof author.name === "string" ? author.name : void 0)
358
+ }
359
+ ),
360
+ /* @__PURE__ */ jsxs2("div", { className: "ods-blog-card__author-text", children: [
361
+ /* @__PURE__ */ jsx3("span", { className: "ods-blog-card__author-name", children: author.name }),
362
+ author.byline && /* @__PURE__ */ jsx3("span", { className: "ods-blog-card__author-byline", children: author.byline })
363
+ ] })
364
+ ] }),
365
+ footer && /* @__PURE__ */ jsx3("div", { className: "ods-blog-card__action", children: footer })
366
+ ] })
367
+ ] })
368
+ ] });
369
+ if (href) {
370
+ return /* @__PURE__ */ jsx3(
371
+ Card,
372
+ {
373
+ asChild: true,
374
+ radius,
375
+ padding: "none",
376
+ className: cn(
377
+ "ods-blog-card",
378
+ `ods-blog-card--${orientation}`,
379
+ "ods-blog-card--interactive",
380
+ className
381
+ ),
382
+ "aria-labelledby": titleId,
383
+ "aria-describedby": descId,
384
+ children: /* @__PURE__ */ jsx3(
385
+ "a",
386
+ {
387
+ ...rest,
388
+ ref,
389
+ href,
390
+ id: baseId,
391
+ onClick,
392
+ children: body
393
+ }
394
+ )
395
+ }
396
+ );
397
+ }
398
+ return /* @__PURE__ */ jsx3(
399
+ Card,
400
+ {
401
+ ...rest,
402
+ ref,
403
+ id: baseId,
404
+ radius,
405
+ padding: "none",
406
+ onClick,
407
+ className: cn(
408
+ "ods-blog-card",
409
+ `ods-blog-card--${orientation}`,
410
+ onClick && "ods-blog-card--interactive",
411
+ className
412
+ ),
413
+ "aria-labelledby": titleId,
414
+ "aria-describedby": descId,
415
+ children: body
416
+ }
417
+ );
418
+ });
419
+ BlogCard.displayName = "BlogCard";
420
+
421
+ // src/hooks/useTextareaCommands.ts
422
+ import {
423
+ useCallback as useCallback2,
424
+ useEffect,
425
+ useMemo as useMemo2,
426
+ useRef,
427
+ useState as useState2
428
+ } from "react";
429
+ function findOpenTrigger(value, caret, trigger) {
430
+ let i = caret - 1;
431
+ while (i >= 0) {
432
+ const ch = value[i];
433
+ if (ch === "\n" || ch === " " || ch === " ") return null;
434
+ if (value.startsWith(trigger, i)) {
435
+ const before = i === 0 ? "" : value[i - 1];
436
+ if (i === 0 || before === " " || before === "\n" || before === " ") {
437
+ return {
438
+ triggerIndex: i,
439
+ query: value.slice(i + trigger.length, caret)
440
+ };
441
+ }
442
+ return null;
443
+ }
444
+ i--;
445
+ }
446
+ return null;
447
+ }
448
+ function getCaretRect(textarea, caret) {
449
+ if (typeof document === "undefined") return null;
450
+ const mirror = document.createElement("div");
451
+ const styles = window.getComputedStyle(textarea);
452
+ for (const prop of [
453
+ "boxSizing",
454
+ "width",
455
+ "fontFamily",
456
+ "fontSize",
457
+ "fontWeight",
458
+ "fontStyle",
459
+ "letterSpacing",
460
+ "lineHeight",
461
+ "paddingTop",
462
+ "paddingRight",
463
+ "paddingBottom",
464
+ "paddingLeft",
465
+ "borderTopWidth",
466
+ "borderRightWidth",
467
+ "borderBottomWidth",
468
+ "borderLeftWidth",
469
+ "textTransform",
470
+ "wordSpacing",
471
+ "tabSize",
472
+ "whiteSpace"
473
+ ]) {
474
+ mirror.style[prop] = styles[prop];
475
+ }
476
+ mirror.style.position = "absolute";
477
+ mirror.style.visibility = "hidden";
478
+ mirror.style.overflow = "hidden";
479
+ mirror.style.top = "0";
480
+ mirror.style.left = "0";
481
+ mirror.style.whiteSpace = "pre-wrap";
482
+ mirror.style.wordWrap = "break-word";
483
+ mirror.textContent = textarea.value.slice(0, caret);
484
+ const marker = document.createElement("span");
485
+ marker.textContent = "\u200B";
486
+ mirror.appendChild(marker);
487
+ document.body.appendChild(mirror);
488
+ const taRect = textarea.getBoundingClientRect();
489
+ const markerRect = marker.getBoundingClientRect();
490
+ const mirrorRect = mirror.getBoundingClientRect();
491
+ const x = taRect.left + (markerRect.left - mirrorRect.left) - textarea.scrollLeft;
492
+ const y = taRect.top + (markerRect.top - mirrorRect.top) - textarea.scrollTop;
493
+ const out = new DOMRect(x, y, 0, markerRect.height || 16);
494
+ document.body.removeChild(mirror);
495
+ return out;
496
+ }
497
+ function useTextareaCommands({
498
+ textareaRef,
499
+ value,
500
+ onChange,
501
+ commands,
502
+ trigger = "/",
503
+ openOnEmptyTrigger = true,
504
+ maxItems = 8
505
+ }) {
506
+ const [isOpen, setIsOpen] = useState2(false);
507
+ const [query, setQuery] = useState2("");
508
+ const [activeIndex, setActiveIndex] = useState2(0);
509
+ const [triggerIndex, setTriggerIndex] = useState2(null);
510
+ const [caretRect, setCaretRect] = useState2(null);
511
+ const dismissedAtRef = useRef(
512
+ null
513
+ );
514
+ const items = useMemo2(() => {
515
+ const q = query.trim().toLowerCase();
516
+ if (!q) return commands.slice(0, maxItems);
517
+ return commands.filter((c) => {
518
+ const hay = [
519
+ typeof c.label === "string" ? c.label : "",
520
+ typeof c.description === "string" ? c.description : "",
521
+ c.id,
522
+ ...c.keywords ?? []
523
+ ].join(" ").toLowerCase();
524
+ return hay.includes(q);
525
+ }).slice(0, maxItems);
526
+ }, [commands, query, maxItems]);
527
+ useEffect(() => {
528
+ const ta = textareaRef.current;
529
+ if (!ta) return;
530
+ const caret = ta.selectionStart ?? 0;
531
+ const dismissedAt = dismissedAtRef.current;
532
+ if (dismissedAt && dismissedAt.value === value && dismissedAt.caret === caret) {
533
+ return;
534
+ }
535
+ const found = findOpenTrigger(value, caret, trigger);
536
+ if (!found) {
537
+ if (isOpen) setIsOpen(false);
538
+ setTriggerIndex(null);
539
+ return;
540
+ }
541
+ if (dismissedAt) dismissedAtRef.current = null;
542
+ if (found.query.length > 0 || openOnEmptyTrigger) {
543
+ setQuery(found.query);
544
+ setTriggerIndex(found.triggerIndex);
545
+ setIsOpen(true);
546
+ setActiveIndex(0);
547
+ setCaretRect(getCaretRect(ta, caret));
548
+ }
549
+ }, [value, trigger, openOnEmptyTrigger, isOpen, textareaRef]);
550
+ const commit = useCallback2(
551
+ (cmd) => {
552
+ const ta = textareaRef.current;
553
+ if (!ta || triggerIndex == null) return;
554
+ const insertText = typeof cmd.insert === "function" ? cmd.insert(query) : cmd.insert;
555
+ const caret = ta.selectionStart ?? value.length;
556
+ const before = value.slice(0, triggerIndex);
557
+ const after = value.slice(caret);
558
+ const next = `${before}${insertText}${after}`;
559
+ dismissedAtRef.current = {
560
+ value,
561
+ caret
562
+ };
563
+ onChange(next);
564
+ setIsOpen(false);
565
+ setTriggerIndex(null);
566
+ requestAnimationFrame(() => {
567
+ const pos = before.length + insertText.length;
568
+ ta.focus();
569
+ ta.setSelectionRange(pos, pos);
570
+ });
571
+ },
572
+ [textareaRef, triggerIndex, query, value, onChange]
573
+ );
574
+ const dismiss = useCallback2(() => {
575
+ const ta = textareaRef.current;
576
+ dismissedAtRef.current = {
577
+ value,
578
+ caret: ta?.selectionStart ?? value.length
579
+ };
580
+ setIsOpen(false);
581
+ setTriggerIndex(null);
582
+ }, [textareaRef, value]);
583
+ const onKeyDown = useCallback2(
584
+ (e) => {
585
+ if (!isOpen) return false;
586
+ if (e.key === "ArrowDown") {
587
+ e.preventDefault();
588
+ setActiveIndex((i) => Math.min(items.length - 1, i + 1));
589
+ return true;
590
+ }
591
+ if (e.key === "ArrowUp") {
592
+ e.preventDefault();
593
+ setActiveIndex((i) => Math.max(0, i - 1));
594
+ return true;
595
+ }
596
+ if (e.key === "Enter" || e.key === "Tab") {
597
+ const pick = items[activeIndex];
598
+ if (pick) {
599
+ e.preventDefault();
600
+ commit(pick);
601
+ return true;
602
+ }
603
+ }
604
+ if (e.key === "Escape") {
605
+ e.preventDefault();
606
+ dismiss();
607
+ return true;
608
+ }
609
+ return false;
610
+ },
611
+ [isOpen, items, activeIndex, commit, dismiss]
612
+ );
613
+ return {
614
+ isOpen,
615
+ query,
616
+ activeIndex,
617
+ items,
618
+ onKeyDown,
619
+ dismiss,
620
+ commit,
621
+ caretRect
622
+ };
623
+ }
624
+
625
+ // src/hooks/useTextareaSelection.ts
626
+ import { useCallback as useCallback3, useEffect as useEffect2, useState as useState3 } from "react";
627
+ function getSelectionRect(textarea, start, end) {
628
+ if (typeof document === "undefined") return null;
629
+ if (start === end) return null;
630
+ const mirror = document.createElement("div");
631
+ const styles = window.getComputedStyle(textarea);
632
+ for (const prop of [
633
+ "boxSizing",
634
+ "width",
635
+ "fontFamily",
636
+ "fontSize",
637
+ "fontWeight",
638
+ "fontStyle",
639
+ "letterSpacing",
640
+ "lineHeight",
641
+ "paddingTop",
642
+ "paddingRight",
643
+ "paddingBottom",
644
+ "paddingLeft",
645
+ "borderTopWidth",
646
+ "borderRightWidth",
647
+ "borderBottomWidth",
648
+ "borderLeftWidth",
649
+ "textTransform",
650
+ "wordSpacing",
651
+ "tabSize",
652
+ "whiteSpace"
653
+ ]) {
654
+ mirror.style[prop] = styles[prop];
655
+ }
656
+ mirror.style.position = "absolute";
657
+ mirror.style.visibility = "hidden";
658
+ mirror.style.overflow = "hidden";
659
+ mirror.style.top = "0";
660
+ mirror.style.left = "0";
661
+ mirror.style.whiteSpace = "pre-wrap";
662
+ mirror.style.wordWrap = "break-word";
663
+ const pre = document.createTextNode(textarea.value.slice(0, start));
664
+ const range = document.createElement("span");
665
+ range.textContent = textarea.value.slice(start, end) || "\u200B";
666
+ const post = document.createTextNode(textarea.value.slice(end));
667
+ mirror.appendChild(pre);
668
+ mirror.appendChild(range);
669
+ mirror.appendChild(post);
670
+ document.body.appendChild(mirror);
671
+ const taRect = textarea.getBoundingClientRect();
672
+ const rangeRect = range.getBoundingClientRect();
673
+ const mirrorRect = mirror.getBoundingClientRect();
674
+ const out = new DOMRect(
675
+ taRect.left + (rangeRect.left - mirrorRect.left) - textarea.scrollLeft,
676
+ taRect.top + (rangeRect.top - mirrorRect.top) - textarea.scrollTop,
677
+ rangeRect.width,
678
+ rangeRect.height
679
+ );
680
+ document.body.removeChild(mirror);
681
+ return out;
682
+ }
683
+ function useTextareaSelection({
684
+ textareaRef,
685
+ value,
686
+ onChange
687
+ }) {
688
+ const [start, setStart] = useState3(0);
689
+ const [end, setEnd] = useState3(0);
690
+ const [rect, setRect] = useState3(null);
691
+ useEffect2(() => {
692
+ if (typeof document === "undefined") return;
693
+ const handler = () => {
694
+ const ta = textareaRef.current;
695
+ if (!ta || document.activeElement !== ta) {
696
+ setStart(0);
697
+ setEnd(0);
698
+ setRect(null);
699
+ return;
700
+ }
701
+ const s = ta.selectionStart ?? 0;
702
+ const e = ta.selectionEnd ?? 0;
703
+ setStart(s);
704
+ setEnd(e);
705
+ setRect(s !== e ? getSelectionRect(ta, s, e) : null);
706
+ };
707
+ document.addEventListener("selectionchange", handler);
708
+ return () => document.removeEventListener("selectionchange", handler);
709
+ }, [textareaRef]);
710
+ const active = start !== end;
711
+ const text = active ? value.slice(start, end) : "";
712
+ const writeToClipboard = useCallback3(
713
+ async (str) => {
714
+ try {
715
+ if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
716
+ await navigator.clipboard.writeText(str);
717
+ return true;
718
+ }
719
+ } catch {
720
+ }
721
+ try {
722
+ const tmp = document.createElement("textarea");
723
+ tmp.value = str;
724
+ tmp.style.position = "fixed";
725
+ tmp.style.left = "-9999px";
726
+ document.body.appendChild(tmp);
727
+ tmp.select();
728
+ const ok = document.execCommand("copy");
729
+ document.body.removeChild(tmp);
730
+ return ok;
731
+ } catch {
732
+ return false;
733
+ }
734
+ },
735
+ []
736
+ );
737
+ const copy = useCallback3(async () => {
738
+ if (!active) return false;
739
+ return writeToClipboard(text);
740
+ }, [active, text, writeToClipboard]);
741
+ const replace = useCallback3(
742
+ (str) => {
743
+ const ta = textareaRef.current;
744
+ if (!ta) return;
745
+ const next = value.slice(0, start) + str + value.slice(end);
746
+ onChange(next);
747
+ requestAnimationFrame(() => {
748
+ ta.focus();
749
+ const caret = start + str.length;
750
+ ta.setSelectionRange(caret, caret);
751
+ });
752
+ },
753
+ [textareaRef, value, start, end, onChange]
754
+ );
755
+ const cut = useCallback3(async () => {
756
+ if (!active) return false;
757
+ const ok = await writeToClipboard(text);
758
+ if (ok) replace("");
759
+ return ok;
760
+ }, [active, text, writeToClipboard, replace]);
761
+ const wrap = useCallback3(
762
+ (open, close) => {
763
+ const ta = textareaRef.current;
764
+ if (!ta) return;
765
+ const closing = close ?? open;
766
+ const before = value.slice(0, start);
767
+ const sel = value.slice(start, end);
768
+ const after = value.slice(end);
769
+ const next = `${before}${open}${sel}${closing}${after}`;
770
+ onChange(next);
771
+ requestAnimationFrame(() => {
772
+ ta.focus();
773
+ const newStart = start;
774
+ const newEnd = end + open.length + closing.length;
775
+ ta.setSelectionRange(newStart, newEnd);
776
+ });
777
+ },
778
+ [textareaRef, value, start, end, onChange]
779
+ );
780
+ return {
781
+ active,
782
+ text,
783
+ start,
784
+ end,
785
+ rect,
786
+ copy,
787
+ cut,
788
+ wrap,
789
+ replace
790
+ };
791
+ }
792
+
793
+ // src/hooks/useTextareaTools.tsx
794
+ import {
795
+ CodeIcon,
796
+ HeadingIcon,
797
+ ListBulletedIcon,
798
+ ListNumberedIcon,
799
+ QuotesIcon,
800
+ RedoIcon,
801
+ TextBoldIcon,
802
+ TextItalicIcon,
803
+ TextLinkIcon,
804
+ TextStrikethroughIcon,
805
+ UndoIcon
806
+ } from "@octaviaflow/icons";
807
+ import { useCallback as useCallback4, useMemo as useMemo3, useRef as useRef2 } from "react";
808
+ import { jsx as jsx4 } from "react/jsx-runtime";
809
+ function useTextareaTools({
810
+ textareaRef,
811
+ value,
812
+ onChange,
813
+ tools
814
+ }) {
815
+ const valueRef = useRef2(value);
816
+ valueRef.current = value;
817
+ const helpers = useMemo3(() => {
818
+ const getTa = () => textareaRef.current;
819
+ const getSelection = () => {
820
+ const ta = getTa();
821
+ const s = ta?.selectionStart ?? 0;
822
+ const e = ta?.selectionEnd ?? 0;
823
+ return {
824
+ text: valueRef.current.slice(s, e),
825
+ start: s,
826
+ end: e,
827
+ active: s !== e
828
+ };
829
+ };
830
+ const setValue = (next) => onChange(next);
831
+ const replace = (text) => {
832
+ const ta = getTa();
833
+ if (!ta) return;
834
+ const { start, end } = getSelection();
835
+ const next = valueRef.current.slice(0, start) + text + valueRef.current.slice(end);
836
+ onChange(next);
837
+ requestAnimationFrame(() => {
838
+ ta.focus();
839
+ const caret = start + text.length;
840
+ ta.setSelectionRange(caret, caret);
841
+ });
842
+ };
843
+ const insert = (text) => replace(text);
844
+ const wrap = (open, close) => {
845
+ const ta = getTa();
846
+ if (!ta) return;
847
+ const closing = close ?? open;
848
+ const { start, end } = getSelection();
849
+ const sel = valueRef.current.slice(start, end);
850
+ const next = valueRef.current.slice(0, start) + open + sel + closing + valueRef.current.slice(end);
851
+ onChange(next);
852
+ requestAnimationFrame(() => {
853
+ ta.focus();
854
+ if (start === end) {
855
+ const caret = start + open.length;
856
+ ta.setSelectionRange(caret, caret);
857
+ } else {
858
+ ta.setSelectionRange(start, end + open.length + closing.length);
859
+ }
860
+ });
861
+ };
862
+ const prependLines = (prefix) => {
863
+ const ta = getTa();
864
+ if (!ta) return;
865
+ const { start, end } = getSelection();
866
+ const v = valueRef.current;
867
+ const lineStart = v.lastIndexOf("\n", start - 1) + 1;
868
+ const lineEnd = (() => {
869
+ const idx = v.indexOf("\n", end);
870
+ return idx === -1 ? v.length : idx;
871
+ })();
872
+ const block = v.slice(lineStart, lineEnd);
873
+ const updated = block.split("\n").map((line) => `${prefix}${line}`).join("\n");
874
+ const next = v.slice(0, lineStart) + updated + v.slice(lineEnd);
875
+ onChange(next);
876
+ requestAnimationFrame(() => {
877
+ ta.focus();
878
+ ta.setSelectionRange(
879
+ lineStart,
880
+ lineStart + updated.length
881
+ );
882
+ });
883
+ };
884
+ const undo = () => {
885
+ try {
886
+ getTa()?.focus();
887
+ document.execCommand("undo");
888
+ } catch {
889
+ }
890
+ };
891
+ const redo = () => {
892
+ try {
893
+ getTa()?.focus();
894
+ document.execCommand("redo");
895
+ } catch {
896
+ }
897
+ };
898
+ return {
899
+ get value() {
900
+ return valueRef.current;
901
+ },
902
+ get selection() {
903
+ return getSelection();
904
+ },
905
+ setValue,
906
+ replace,
907
+ insert,
908
+ wrap,
909
+ prependLines,
910
+ undo,
911
+ redo,
912
+ getTextarea: getTa
913
+ };
914
+ }, [textareaRef, onChange]);
915
+ const visibleTools = useMemo3(
916
+ () => tools.filter((t) => t.isVisible ? t.isVisible(helpers) : true),
917
+ [tools, helpers]
918
+ );
919
+ const runTool = useCallback4(
920
+ async (id) => {
921
+ const tool = tools.find((t) => t.id === id);
922
+ if (!tool || tool.kind === "divider") return;
923
+ await tool.onAction?.(helpers);
924
+ },
925
+ [tools, helpers]
926
+ );
927
+ return { tools: visibleTools, runTool, helpers };
928
+ }
929
+ var wrapTool = (id, open, close, label, icon, title) => ({
930
+ id,
931
+ label,
932
+ icon,
933
+ title,
934
+ onAction: (h) => h.wrap(open, close)
935
+ });
936
+ var prependLineTool = (id, prefix, label, icon, title) => ({
937
+ id,
938
+ label,
939
+ icon,
940
+ title,
941
+ onAction: (h) => h.prependLines(prefix)
942
+ });
943
+ var textareaTools = {
944
+ bold: () => wrapTool("bold", "**", "**", "Bold", /* @__PURE__ */ jsx4(TextBoldIcon, {}), "Bold (\u2318B)"),
945
+ italic: () => wrapTool("italic", "*", "*", "Italic", /* @__PURE__ */ jsx4(TextItalicIcon, {}), "Italic (\u2318I)"),
946
+ strikethrough: () => wrapTool(
947
+ "strike",
948
+ "~~",
949
+ "~~",
950
+ "Strikethrough",
951
+ /* @__PURE__ */ jsx4(TextStrikethroughIcon, {}),
952
+ "Strikethrough"
953
+ ),
954
+ code: () => wrapTool("code", "`", "`", "Code", /* @__PURE__ */ jsx4(CodeIcon, {}), "Inline code"),
955
+ codeBlock: () => ({
956
+ id: "code-block",
957
+ label: "Code block",
958
+ icon: /* @__PURE__ */ jsx4(CodeIcon, {}),
959
+ title: "Code block",
960
+ onAction: (h) => h.wrap("```\n", "\n```")
961
+ }),
962
+ link: () => ({
963
+ id: "link",
964
+ label: "Link",
965
+ icon: /* @__PURE__ */ jsx4(TextLinkIcon, {}),
966
+ title: "Insert link",
967
+ onAction: (h) => {
968
+ const sel = h.selection;
969
+ const text = sel.active ? sel.text : "link text";
970
+ h.replace(`[${text}](https://)`);
971
+ }
972
+ }),
973
+ /** Heading. Defaults to H2. Pass a `level` (1–6) to override. */
974
+ heading: (level = 2) => prependLineTool(
975
+ `heading-${level}`,
976
+ `${"#".repeat(level)} `,
977
+ `H${level}`,
978
+ /* @__PURE__ */ jsx4(HeadingIcon, {}),
979
+ `Heading ${level}`
980
+ ),
981
+ bulletList: () => prependLineTool(
982
+ "ul",
983
+ "- ",
984
+ "Bullet list",
985
+ /* @__PURE__ */ jsx4(ListBulletedIcon, {}),
986
+ "Bullet list"
987
+ ),
988
+ numberedList: () => prependLineTool(
989
+ "ol",
990
+ "1. ",
991
+ "Numbered list",
992
+ /* @__PURE__ */ jsx4(ListNumberedIcon, {}),
993
+ "Numbered list"
994
+ ),
995
+ quote: () => prependLineTool(
996
+ "quote",
997
+ "> ",
998
+ "Quote",
999
+ /* @__PURE__ */ jsx4(QuotesIcon, {}),
1000
+ "Quote"
1001
+ ),
1002
+ undo: () => ({
1003
+ id: "undo",
1004
+ label: "Undo",
1005
+ icon: /* @__PURE__ */ jsx4(UndoIcon, {}),
1006
+ title: "Undo (\u2318Z)",
1007
+ onAction: (h) => h.undo()
1008
+ }),
1009
+ redo: () => ({
1010
+ id: "redo",
1011
+ label: "Redo",
1012
+ icon: /* @__PURE__ */ jsx4(RedoIcon, {}),
1013
+ title: "Redo (\u2318\u21E7Z)",
1014
+ onAction: (h) => h.redo()
1015
+ }),
1016
+ divider: (id = "divider") => ({
1017
+ id: `${id}-${Math.random().toString(36).slice(2, 8)}`,
1018
+ label: "",
1019
+ kind: "divider"
1020
+ })
1021
+ };
1022
+
1023
+ // src/components/Textarea/Textarea.tsx
1024
+ import {
1025
+ forwardRef as forwardRef4,
1026
+ useEffect as useEffect3,
1027
+ useId as useId2,
1028
+ useRef as useRef3,
1029
+ useState as useState4
1030
+ } from "react";
1031
+ import { useTextField } from "react-aria";
1032
+ import { createPortal } from "react-dom";
1033
+ import { CopyIcon, CutIcon } from "@octaviaflow/icons";
1034
+ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
1035
+ var Textarea = forwardRef4(
1036
+ function Textarea2({
1037
+ label,
1038
+ error = false,
1039
+ errorMessage,
1040
+ helperText,
1041
+ resize = "vertical",
1042
+ autoResize = false,
1043
+ minRows,
1044
+ maxRows,
1045
+ maxHeight,
1046
+ maxWidth,
1047
+ minHeight,
1048
+ minWidth,
1049
+ maxLength,
1050
+ size = "md",
1051
+ rows = 3,
1052
+ disabled = false,
1053
+ className,
1054
+ style: consumerStyle,
1055
+ defaultValue,
1056
+ value,
1057
+ onChange,
1058
+ id: providedId,
1059
+ commands,
1060
+ commandTrigger = "/",
1061
+ selectionToolbar = false,
1062
+ selectionActions,
1063
+ tools,
1064
+ toolbarPosition = "top",
1065
+ ...props
1066
+ }, forwardedRef) {
1067
+ const innerRef = useRef3(null);
1068
+ const setRef = (node) => {
1069
+ innerRef.current = node;
1070
+ if (typeof forwardedRef === "function") forwardedRef(node);
1071
+ else if (forwardedRef)
1072
+ forwardedRef.current = node;
1073
+ };
1074
+ const reactId = useId2();
1075
+ const baseId = providedId ?? `ods-textarea-${reactId}`;
1076
+ const hintId = error && errorMessage || helperText ? `${baseId}-hint` : void 0;
1077
+ const [charCount, setCharCount] = useState4(
1078
+ () => String(value ?? defaultValue ?? "").length
1079
+ );
1080
+ const ariaNameProps = resolveAccessibleName({
1081
+ label: typeof label === "string" ? label : void 0,
1082
+ ariaLabel: props["aria-label"],
1083
+ ariaLabelledby: props["aria-labelledby"],
1084
+ componentName: "Textarea"
1085
+ });
1086
+ const { labelProps, inputProps } = useTextField(
1087
+ {
1088
+ label: typeof label === "string" ? label : void 0,
1089
+ ...ariaNameProps,
1090
+ isDisabled: disabled,
1091
+ errorMessage: typeof errorMessage === "string" ? errorMessage : void 0,
1092
+ validationState: error ? "invalid" : void 0,
1093
+ inputElementType: "textarea",
1094
+ value,
1095
+ defaultValue
1096
+ },
1097
+ innerRef
1098
+ );
1099
+ const describedBy = [
1100
+ props["aria-describedby"],
1101
+ hintId
1102
+ ].filter(Boolean).join(" ") || void 0;
1103
+ const handleChange = (e) => {
1104
+ setCharCount(e.target.value.length);
1105
+ onChange?.(e);
1106
+ };
1107
+ const [liveValue, setLiveValue] = useState4(
1108
+ String(value ?? defaultValue ?? "")
1109
+ );
1110
+ useEffect3(() => {
1111
+ if (value != null) setLiveValue(String(value));
1112
+ }, [value]);
1113
+ const handleChangeWithMirror = (e) => {
1114
+ setLiveValue(e.target.value);
1115
+ handleChange(e);
1116
+ };
1117
+ const setLiveAndCommit = (next) => {
1118
+ setLiveValue(next);
1119
+ if (innerRef.current) innerRef.current.value = next;
1120
+ onChange?.({
1121
+ target: innerRef.current,
1122
+ currentTarget: innerRef.current
1123
+ });
1124
+ setCharCount(next.length);
1125
+ };
1126
+ const cmdPalette = useTextareaCommands({
1127
+ textareaRef: innerRef,
1128
+ value: liveValue,
1129
+ onChange: setLiveAndCommit,
1130
+ commands: commands ?? [],
1131
+ trigger: commandTrigger
1132
+ });
1133
+ const cmdEnabled = (commands?.length ?? 0) > 0;
1134
+ const sel = useTextareaSelection({
1135
+ textareaRef: innerRef,
1136
+ value: liveValue,
1137
+ onChange: setLiveAndCommit
1138
+ });
1139
+ const toolbar = useTextareaTools({
1140
+ textareaRef: innerRef,
1141
+ value: liveValue,
1142
+ onChange: setLiveAndCommit,
1143
+ tools: tools ?? []
1144
+ });
1145
+ const toolbarEnabled = (tools?.length ?? 0) > 0;
1146
+ const handleKeyDownWithCommands = (e) => {
1147
+ if (cmdEnabled) {
1148
+ const consumed = cmdPalette.onKeyDown(e);
1149
+ if (consumed) return;
1150
+ }
1151
+ props.onKeyDown?.(e);
1152
+ };
1153
+ useEffect3(() => {
1154
+ if (!autoResize) return;
1155
+ const el = innerRef.current;
1156
+ if (!el) return;
1157
+ const computed = window.getComputedStyle(el);
1158
+ const fontSize = parseFloat(computed.fontSize) || 16;
1159
+ const lhRaw = computed.lineHeight;
1160
+ const lh = lhRaw === "normal" ? fontSize * 1.2 : lhRaw.endsWith("px") ? parseFloat(lhRaw) : parseFloat(lhRaw) * fontSize;
1161
+ const padding = parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom);
1162
+ const rowCap = maxRows != null && Number.isFinite(maxRows) ? lh * maxRows + padding : Number.POSITIVE_INFINITY;
1163
+ const pixelCap = typeof maxHeight === "number" ? maxHeight : Number.POSITIVE_INFINITY;
1164
+ const effectiveMax = Math.min(rowCap, pixelCap);
1165
+ const rowFloor = lh * (minRows ?? rows) + padding;
1166
+ el.style.height = "auto";
1167
+ const target = Math.max(
1168
+ rowFloor,
1169
+ Math.min(effectiveMax, el.scrollHeight)
1170
+ );
1171
+ el.style.height = `${target}px`;
1172
+ el.style.overflowY = el.scrollHeight > effectiveMax ? "auto" : "hidden";
1173
+ }, [autoResize, value, defaultValue, minRows, maxRows, maxHeight, rows]);
1174
+ const resolvedResize = typeof resize === "boolean" ? resize ? "vertical" : "none" : resize;
1175
+ const toCss = (v) => v == null ? void 0 : typeof v === "number" ? `${v}px` : v;
1176
+ const fieldStyle = {
1177
+ maxHeight: toCss(maxHeight),
1178
+ maxWidth: toCss(maxWidth),
1179
+ minHeight: toCss(minHeight),
1180
+ minWidth: toCss(minWidth),
1181
+ resize: resolvedResize
1182
+ };
1183
+ return /* @__PURE__ */ jsxs3(
1184
+ "div",
1185
+ {
1186
+ className: cn(
1187
+ "ods-textarea",
1188
+ `ods-textarea--${size}`,
1189
+ `ods-textarea--resize-${resolvedResize}`,
1190
+ autoResize && "ods-textarea--auto-resize",
1191
+ error && "ods-textarea--error",
1192
+ disabled && "ods-textarea--disabled",
1193
+ className
1194
+ ),
1195
+ style: consumerStyle,
1196
+ children: [
1197
+ label && /* @__PURE__ */ jsx5(
1198
+ "label",
1199
+ {
1200
+ ...labelProps,
1201
+ htmlFor: baseId,
1202
+ className: "ods-textarea__label",
1203
+ children: label
1204
+ }
1205
+ ),
1206
+ toolbarEnabled && toolbarPosition === "top" && /* @__PURE__ */ jsx5(
1207
+ TextareaToolbar,
1208
+ {
1209
+ tools: toolbar.tools,
1210
+ onRun: toolbar.runTool
1211
+ }
1212
+ ),
1213
+ /* @__PURE__ */ jsxs3("div", { className: "ods-textarea__wrapper", children: [
1214
+ /* @__PURE__ */ jsx5(
1215
+ "textarea",
1216
+ {
1217
+ ...props,
1218
+ ...inputProps,
1219
+ ref: setRef,
1220
+ id: baseId,
1221
+ rows: autoResize ? minRows ?? rows : rows,
1222
+ disabled,
1223
+ maxLength,
1224
+ defaultValue,
1225
+ value,
1226
+ onChange: handleChangeWithMirror,
1227
+ onKeyDown: handleKeyDownWithCommands,
1228
+ className: "ods-textarea__field",
1229
+ style: fieldStyle,
1230
+ "aria-invalid": error || void 0,
1231
+ "aria-describedby": describedBy,
1232
+ "aria-autocomplete": cmdEnabled ? "list" : void 0,
1233
+ "aria-expanded": cmdEnabled ? cmdPalette.isOpen : void 0,
1234
+ "aria-controls": cmdEnabled && cmdPalette.isOpen ? `${baseId}-cmd-list` : void 0,
1235
+ "aria-activedescendant": cmdEnabled && cmdPalette.isOpen && cmdPalette.items[cmdPalette.activeIndex] ? `${baseId}-cmd-${cmdPalette.items[cmdPalette.activeIndex].id}` : void 0
1236
+ }
1237
+ ),
1238
+ cmdEnabled && cmdPalette.isOpen && cmdPalette.items.length > 0 && typeof document !== "undefined" && createPortal(
1239
+ /* @__PURE__ */ jsx5(
1240
+ "ul",
1241
+ {
1242
+ id: `${baseId}-cmd-list`,
1243
+ role: "listbox",
1244
+ "aria-label": "Inline commands",
1245
+ className: "ods-textarea__cmd-popover",
1246
+ style: {
1247
+ position: "fixed",
1248
+ top: (cmdPalette.caretRect?.bottom ?? 0) + 6,
1249
+ left: cmdPalette.caretRect?.left ?? 0
1250
+ },
1251
+ children: cmdPalette.items.map((c, i) => /* @__PURE__ */ jsxs3(
1252
+ "li",
1253
+ {
1254
+ id: `${baseId}-cmd-${c.id}`,
1255
+ role: "option",
1256
+ "aria-selected": i === cmdPalette.activeIndex,
1257
+ className: cn(
1258
+ "ods-textarea__cmd-item",
1259
+ i === cmdPalette.activeIndex && "ods-textarea__cmd-item--active"
1260
+ ),
1261
+ onMouseDown: (e) => {
1262
+ e.preventDefault();
1263
+ cmdPalette.commit(c);
1264
+ },
1265
+ onMouseEnter: () => {
1266
+ },
1267
+ children: [
1268
+ c.icon && /* @__PURE__ */ jsx5("span", { className: "ods-textarea__cmd-icon", children: c.icon }),
1269
+ /* @__PURE__ */ jsxs3("span", { className: "ods-textarea__cmd-text", children: [
1270
+ /* @__PURE__ */ jsx5("span", { className: "ods-textarea__cmd-label", children: c.label }),
1271
+ c.description && /* @__PURE__ */ jsx5("span", { className: "ods-textarea__cmd-desc", children: c.description })
1272
+ ] })
1273
+ ]
1274
+ },
1275
+ c.id
1276
+ ))
1277
+ }
1278
+ ),
1279
+ document.body
1280
+ ),
1281
+ selectionToolbar && sel.active && sel.rect && typeof document !== "undefined" && createPortal(
1282
+ /* @__PURE__ */ jsxs3(
1283
+ "div",
1284
+ {
1285
+ role: "toolbar",
1286
+ "aria-label": "Selection actions",
1287
+ className: "ods-textarea__sel-toolbar",
1288
+ style: {
1289
+ position: "fixed",
1290
+ top: sel.rect.top - 36,
1291
+ left: sel.rect.left
1292
+ },
1293
+ onMouseDown: (e) => e.preventDefault(),
1294
+ children: [
1295
+ /* @__PURE__ */ jsx5(
1296
+ "button",
1297
+ {
1298
+ type: "button",
1299
+ className: "ods-textarea__sel-btn",
1300
+ onClick: () => sel.copy(),
1301
+ "aria-label": "Copy selection",
1302
+ title: "Copy",
1303
+ children: /* @__PURE__ */ jsx5(CopyIcon, { size: "xs" })
1304
+ }
1305
+ ),
1306
+ /* @__PURE__ */ jsx5(
1307
+ "button",
1308
+ {
1309
+ type: "button",
1310
+ className: "ods-textarea__sel-btn",
1311
+ onClick: () => sel.cut(),
1312
+ "aria-label": "Cut selection",
1313
+ title: "Cut",
1314
+ children: /* @__PURE__ */ jsx5(CutIcon, { size: "xs" })
1315
+ }
1316
+ ),
1317
+ selectionActions?.map((a) => /* @__PURE__ */ jsxs3(
1318
+ "button",
1319
+ {
1320
+ type: "button",
1321
+ className: "ods-textarea__sel-btn",
1322
+ onClick: () => a.onAction(sel.text, {
1323
+ replace: sel.replace,
1324
+ wrap: sel.wrap,
1325
+ copy: sel.copy,
1326
+ cut: sel.cut
1327
+ }),
1328
+ title: typeof a.label === "string" ? a.label : void 0,
1329
+ children: [
1330
+ a.icon,
1331
+ a.label && /* @__PURE__ */ jsx5("span", { className: "ods-textarea__sel-btn-label", children: a.label })
1332
+ ]
1333
+ },
1334
+ a.id
1335
+ ))
1336
+ ]
1337
+ }
1338
+ ),
1339
+ document.body
1340
+ ),
1341
+ maxLength != null && /* @__PURE__ */ jsxs3(
1342
+ "span",
1343
+ {
1344
+ className: "ods-textarea__count",
1345
+ "aria-live": charCount > maxLength ? "polite" : "off",
1346
+ children: [
1347
+ charCount,
1348
+ "/",
1349
+ maxLength
1350
+ ]
1351
+ }
1352
+ )
1353
+ ] }),
1354
+ toolbarEnabled && toolbarPosition === "bottom" && /* @__PURE__ */ jsx5(
1355
+ TextareaToolbar,
1356
+ {
1357
+ tools: toolbar.tools,
1358
+ onRun: toolbar.runTool
1359
+ }
1360
+ ),
1361
+ error && errorMessage ? /* @__PURE__ */ jsx5(
1362
+ "div",
1363
+ {
1364
+ id: hintId,
1365
+ className: "ods-textarea__error-message",
1366
+ role: "alert",
1367
+ children: errorMessage
1368
+ }
1369
+ ) : helperText ? /* @__PURE__ */ jsx5("div", { id: hintId, className: "ods-textarea__hint", children: helperText }) : null
1370
+ ]
1371
+ }
1372
+ );
1373
+ }
1374
+ );
1375
+ Textarea.displayName = "Textarea";
1376
+ function TextareaToolbar({
1377
+ tools,
1378
+ onRun
1379
+ }) {
1380
+ return /* @__PURE__ */ jsx5(
1381
+ "div",
1382
+ {
1383
+ role: "toolbar",
1384
+ "aria-label": "Formatting",
1385
+ className: "ods-textarea__toolbar",
1386
+ onMouseDown: (e) => {
1387
+ if (e.target.closest(".ods-textarea__toolbar-btn")) {
1388
+ e.preventDefault();
1389
+ }
1390
+ },
1391
+ children: tools.map((t) => {
1392
+ if (t.kind === "divider") {
1393
+ return /* @__PURE__ */ jsx5(
1394
+ "span",
1395
+ {
1396
+ className: "ods-textarea__toolbar-divider",
1397
+ "aria-hidden": "true"
1398
+ },
1399
+ t.id
1400
+ );
1401
+ }
1402
+ return /* @__PURE__ */ jsx5(
1403
+ "button",
1404
+ {
1405
+ type: "button",
1406
+ className: "ods-textarea__toolbar-btn",
1407
+ title: t.title ?? (typeof t.label === "string" ? t.label : void 0),
1408
+ "aria-label": typeof t.label === "string" ? t.label : t.id,
1409
+ onClick: () => onRun(t.id),
1410
+ children: t.icon ? /* @__PURE__ */ jsx5("span", { className: "ods-textarea__toolbar-icon", children: t.icon }) : /* @__PURE__ */ jsx5("span", { className: "ods-textarea__toolbar-text", children: t.label })
1411
+ },
1412
+ t.id
1413
+ );
1414
+ })
1415
+ }
1416
+ );
1417
+ }
1418
+
1419
+ // src/components/CountUp/CountUp.tsx
1420
+ import {
1421
+ forwardRef as forwardRef5,
1422
+ useEffect as useEffect4,
1423
+ useRef as useRef4,
1424
+ useState as useState5
1425
+ } from "react";
1426
+ import { jsxs as jsxs4 } from "react/jsx-runtime";
1427
+ var easeLinear = (t) => t;
1428
+ var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
1429
+ var easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
1430
+ var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
1431
+ var CountUp = forwardRef5(
1432
+ function CountUp2({
1433
+ value,
1434
+ from = 0,
1435
+ duration = 800,
1436
+ easing = easeOutCubic,
1437
+ decimals = 0,
1438
+ formatValue,
1439
+ prefix,
1440
+ suffix,
1441
+ delay = 0,
1442
+ disableAnimation = false,
1443
+ onComplete,
1444
+ className,
1445
+ ...rest
1446
+ }, ref) {
1447
+ const [n, setN] = useState5(disableAnimation ? value : from);
1448
+ const lastRendered = useRef4(disableAnimation ? value : from);
1449
+ useEffect4(() => {
1450
+ const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
1451
+ if (disableAnimation || reduced) {
1452
+ setN(value);
1453
+ lastRendered.current = value;
1454
+ onComplete?.();
1455
+ return;
1456
+ }
1457
+ const startValue = lastRendered.current;
1458
+ const delta = value - startValue;
1459
+ if (delta === 0) return;
1460
+ let raf = null;
1461
+ let timeoutId = null;
1462
+ let startTime = null;
1463
+ let cancelled = false;
1464
+ const tick = (ts) => {
1465
+ if (cancelled) return;
1466
+ if (startTime === null) startTime = ts;
1467
+ const t = Math.min(1, (ts - startTime) / Math.max(1, duration));
1468
+ const eased = easing(t);
1469
+ const current = startValue + delta * eased;
1470
+ setN(current);
1471
+ lastRendered.current = current;
1472
+ if (t < 1) {
1473
+ raf = requestAnimationFrame(tick);
1474
+ } else {
1475
+ lastRendered.current = value;
1476
+ setN(value);
1477
+ onComplete?.();
1478
+ }
1479
+ };
1480
+ const start = () => {
1481
+ raf = requestAnimationFrame(tick);
1482
+ };
1483
+ if (delay > 0) {
1484
+ timeoutId = window.setTimeout(start, delay);
1485
+ } else {
1486
+ start();
1487
+ }
1488
+ return () => {
1489
+ cancelled = true;
1490
+ if (raf !== null) cancelAnimationFrame(raf);
1491
+ if (timeoutId !== null) window.clearTimeout(timeoutId);
1492
+ };
1493
+ }, [value, duration, delay, disableAnimation]);
1494
+ const display = formatValue ? formatValue(n) : n.toFixed(decimals);
1495
+ return /* @__PURE__ */ jsxs4(
1496
+ "span",
1497
+ {
1498
+ ...rest,
1499
+ ref,
1500
+ className: cn("ods-count-up", className),
1501
+ "aria-live": "polite",
1502
+ "aria-atomic": "true",
1503
+ children: [
1504
+ prefix,
1505
+ display,
1506
+ suffix
1507
+ ]
1508
+ }
1509
+ );
1510
+ }
1511
+ );
1512
+ CountUp.displayName = "CountUp";
1513
+
1514
+ // src/components/TestimonialCard/TestimonialCard.tsx
1515
+ import { QuotesIcon as QuotesIcon2, StarFilledIcon, StarIcon } from "@octaviaflow/icons";
1516
+ import { forwardRef as forwardRef6, useId as useId3 } from "react";
1517
+ import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
1518
+ function isAuthorObject(v) {
1519
+ return typeof v === "object" && v !== null && !("type" in v) && // exclude React elements
1520
+ "name" in v;
1521
+ }
1522
+ var TestimonialCard = forwardRef6(
1523
+ function TestimonialCard2({
1524
+ quote,
1525
+ author,
1526
+ role: legacyRole,
1527
+ avatar: legacyAvatar,
1528
+ initial: legacyInitial,
1529
+ rating,
1530
+ logo,
1531
+ size = "md",
1532
+ radius = "md",
1533
+ id: providedId,
1534
+ className,
1535
+ ...rest
1536
+ }, ref) {
1537
+ const reactId = useId3();
1538
+ const baseId = providedId ?? `ods-testimonial-${reactId}`;
1539
+ const quoteId = `${baseId}-quote`;
1540
+ const authorId = `${baseId}-author`;
1541
+ const resolved = isAuthorObject(author) ? author : {
1542
+ name: author,
1543
+ role: legacyRole,
1544
+ avatar: legacyAvatar ? void 0 : {
1545
+ initials: typeof legacyInitial === "string" ? legacyInitial : typeof author === "string" ? author.charAt(0).toUpperCase() : void 0
1546
+ }
1547
+ };
1548
+ const renderAvatar = () => {
1549
+ if (!isAuthorObject(author) && legacyAvatar) {
1550
+ return /* @__PURE__ */ jsx6(
1551
+ "span",
1552
+ {
1553
+ className: "ods-testimonial__avatar ods-testimonial__avatar--legacy",
1554
+ "aria-hidden": "true",
1555
+ children: legacyAvatar
1556
+ }
1557
+ );
1558
+ }
1559
+ return /* @__PURE__ */ jsx6(
1560
+ Avatar,
1561
+ {
1562
+ size: size === "sm" ? "xs" : size === "lg" ? "md" : "sm",
1563
+ src: resolved.avatar?.src,
1564
+ initials: resolved.avatar?.initials,
1565
+ seed: resolved.avatar?.seed,
1566
+ palette: resolved.avatar?.palette,
1567
+ alt: resolved.avatar?.alt ?? (typeof resolved.name === "string" ? resolved.name : void 0),
1568
+ className: "ods-testimonial__avatar"
1569
+ }
1570
+ );
1571
+ };
1572
+ return /* @__PURE__ */ jsxs5(
1573
+ Card,
1574
+ {
1575
+ ...rest,
1576
+ ref,
1577
+ id: baseId,
1578
+ radius,
1579
+ padding: "none",
1580
+ variant: "subtle",
1581
+ className: cn("ods-testimonial", `ods-testimonial--${size}`, className),
1582
+ "aria-labelledby": authorId,
1583
+ "aria-describedby": quoteId,
1584
+ children: [
1585
+ /* @__PURE__ */ jsxs5("div", { className: "ods-testimonial__head", children: [
1586
+ /* @__PURE__ */ jsx6("span", { className: "ods-testimonial__quote", "aria-hidden": "true", children: /* @__PURE__ */ jsx6(QuotesIcon2, { size: "md" }) }),
1587
+ logo && /* @__PURE__ */ jsx6("span", { className: "ods-testimonial__logo", "aria-hidden": "true", children: logo })
1588
+ ] }),
1589
+ /* @__PURE__ */ jsx6("blockquote", { id: quoteId, className: "ods-testimonial__text", children: quote }),
1590
+ typeof rating === "number" && /* @__PURE__ */ jsx6(
1591
+ "div",
1592
+ {
1593
+ className: "ods-testimonial__rating",
1594
+ role: "img",
1595
+ "aria-label": `${rating} out of 5 stars`,
1596
+ children: Array.from({ length: 5 }).map(
1597
+ (_, i) => i < Math.round(rating) ? /* @__PURE__ */ jsx6(
1598
+ StarFilledIcon,
1599
+ {
1600
+ size: "xs",
1601
+ className: "ods-testimonial__star ods-testimonial__star--on"
1602
+ },
1603
+ i
1604
+ ) : /* @__PURE__ */ jsx6(StarIcon, { size: "xs", className: "ods-testimonial__star" }, i)
1605
+ )
1606
+ }
1607
+ ),
1608
+ /* @__PURE__ */ jsxs5("figcaption", { className: "ods-testimonial__author", id: authorId, children: [
1609
+ renderAvatar(),
1610
+ /* @__PURE__ */ jsxs5("span", { className: "ods-testimonial__author-info", children: [
1611
+ /* @__PURE__ */ jsx6("span", { className: "ods-testimonial__author-name", children: resolved.name }),
1612
+ resolved.role && /* @__PURE__ */ jsx6("span", { className: "ods-testimonial__author-role", children: resolved.role })
1613
+ ] })
1614
+ ] })
1615
+ ]
1616
+ }
1617
+ );
1618
+ }
1619
+ );
1620
+ TestimonialCard.displayName = "TestimonialCard";
1621
+
1622
+ export {
1623
+ Card,
1624
+ CardHeader,
1625
+ CardBody,
1626
+ CardFooter,
1627
+ CardTitle,
1628
+ CardDescription,
1629
+ AVATAR_PALETTE_SIZE,
1630
+ avatarPaletteIndex,
1631
+ Avatar,
1632
+ AvatarStack,
1633
+ BlogCard,
1634
+ useTextareaCommands,
1635
+ useTextareaSelection,
1636
+ useTextareaTools,
1637
+ textareaTools,
1638
+ Textarea,
1639
+ easeLinear,
1640
+ easeOutCubic,
1641
+ easeOutQuart,
1642
+ easeOutExpo,
1643
+ CountUp,
1644
+ TestimonialCard
1645
+ };
1646
+ //# sourceMappingURL=chunk-REEBXURQ.js.map