@octaviaflow/core 3.1.0-beta.72 → 3.1.0-beta.74

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