@tapizlabs/ui 0.2.11 → 0.2.13
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.
- package/dist/index.d.ts +71 -29
- package/dist/index.js +841 -690
- package/dist/index.js.map +1 -1
- package/dist/theme.css +302 -5
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -237,6 +237,18 @@ var ExternalLink = ({ size = 14, className, style }) => /* @__PURE__ */ jsxs2("s
|
|
|
237
237
|
/* @__PURE__ */ jsx2("polyline", { points: "15 3 21 3 21 9" }),
|
|
238
238
|
/* @__PURE__ */ jsx2("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
|
|
239
239
|
] });
|
|
240
|
+
var GitHubIcon = ({ size = 14, className, style }) => /* @__PURE__ */ jsx2(
|
|
241
|
+
"svg",
|
|
242
|
+
{
|
|
243
|
+
width: size,
|
|
244
|
+
height: size,
|
|
245
|
+
viewBox: "0 0 24 24",
|
|
246
|
+
fill: "currentColor",
|
|
247
|
+
style,
|
|
248
|
+
className,
|
|
249
|
+
children: /* @__PURE__ */ jsx2("path", { d: "M12 .5C5.37.5 0 5.87 0 12.5c0 5.3 3.44 9.8 8.2 11.38.6.11.82-.26.82-.58 0-.29-.01-1.04-.02-2.05-3.34.73-4.04-1.61-4.04-1.61-.55-1.38-1.33-1.75-1.33-1.75-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.08 1.84 2.81 1.31 3.49 1 .11-.78.42-1.31.76-1.61-2.67-.31-5.47-1.33-5.47-5.93 0-1.31.47-2.39 1.24-3.23-.12-.3-.54-1.54.12-3.2 0 0 1.01-.32 3.3 1.23a11.38 11.38 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.24 2.9.12 3.2.77.84 1.23 1.92 1.23 3.23 0 4.61-2.8 5.62-5.48 5.92.43.37.82 1.1.82 2.21 0 1.6-.01 2.88-.01 3.27 0 .32.21.7.83.58A12.01 12.01 0 0 0 24 12.5C24 5.87 18.63.5 12 .5Z" })
|
|
250
|
+
}
|
|
251
|
+
);
|
|
240
252
|
var Image = ({ size = 14, className, style }) => /* @__PURE__ */ jsxs2("svg", { ...base(null, size, style), className, children: [
|
|
241
253
|
/* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
|
|
242
254
|
/* @__PURE__ */ jsx2("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
|
|
@@ -498,104 +510,122 @@ var LogoMark = ({
|
|
|
498
510
|
bgClassName,
|
|
499
511
|
bgFill = "#1496b3",
|
|
500
512
|
bgOpacity = 1,
|
|
513
|
+
tone: tone2 = "solid",
|
|
501
514
|
variant = "lms"
|
|
502
|
-
}) =>
|
|
503
|
-
"
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
] }),
|
|
516
|
-
variant === "boards" && /* @__PURE__ */ jsxs6("g", { fill: "#fff", children: [
|
|
517
|
-
/* @__PURE__ */ jsx6("rect", { x: "13", y: "15", width: "10", height: "26", rx: "5" }),
|
|
518
|
-
/* @__PURE__ */ jsx6("rect", { x: "27", y: "15", width: "10", height: "34", rx: "5" }),
|
|
519
|
-
/* @__PURE__ */ jsx6("rect", { x: "41", y: "15", width: "10", height: "20", rx: "5" })
|
|
520
|
-
] }),
|
|
521
|
-
variant === "playground" && /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
522
|
-
/* @__PURE__ */ jsxs6("g", { fill: "#fff", children: [
|
|
523
|
-
/* @__PURE__ */ jsx6("rect", { x: "13", y: "12", width: "38", height: "9", rx: "3" }),
|
|
524
|
-
/* @__PURE__ */ jsx6("rect", { x: "27", y: "12", width: "10", height: "30", rx: "3" })
|
|
525
|
-
] }),
|
|
526
|
-
/* @__PURE__ */ jsx6(
|
|
527
|
-
"path",
|
|
528
|
-
{
|
|
529
|
-
d: "M16 46 L23 51 L16 56",
|
|
530
|
-
stroke: "#d4ff3a",
|
|
531
|
-
strokeWidth: "4.5",
|
|
532
|
-
strokeLinecap: "round",
|
|
533
|
-
strokeLinejoin: "round",
|
|
534
|
-
fill: "none"
|
|
535
|
-
}
|
|
536
|
-
),
|
|
537
|
-
/* @__PURE__ */ jsx6("rect", { x: "30", y: "52.5", width: "14", height: "4.5", rx: "2.25", fill: "#fff" })
|
|
538
|
-
] }),
|
|
539
|
-
variant === "whiteboard" && /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
540
|
-
/* @__PURE__ */ jsx6("rect", { x: "12", y: "15", width: "40", height: "28", rx: "4", fill: "#fff" }),
|
|
541
|
-
/* @__PURE__ */ jsx6(
|
|
542
|
-
"path",
|
|
543
|
-
{
|
|
544
|
-
d: "M19 35 C24 24, 30 24, 33 31 C35.5 37, 41 36, 45 27",
|
|
545
|
-
stroke: "#1496b3",
|
|
546
|
-
strokeWidth: "3.4",
|
|
547
|
-
strokeLinecap: "round",
|
|
548
|
-
strokeLinejoin: "round",
|
|
549
|
-
fill: "none"
|
|
550
|
-
}
|
|
551
|
-
),
|
|
552
|
-
/* @__PURE__ */ jsx6("circle", { cx: "19", cy: "35", r: "2.6", fill: "#1496b3" }),
|
|
553
|
-
/* @__PURE__ */ jsx6("circle", { cx: "45", cy: "27", r: "2.6", fill: "#d4ff3a" }),
|
|
554
|
-
/* @__PURE__ */ jsx6(
|
|
555
|
-
"path",
|
|
556
|
-
{
|
|
557
|
-
d: "M22 43 L19 51 M42 43 L45 51",
|
|
558
|
-
stroke: "#fff",
|
|
559
|
-
strokeWidth: "4",
|
|
560
|
-
strokeLinecap: "round"
|
|
561
|
-
}
|
|
562
|
-
)
|
|
563
|
-
] }),
|
|
564
|
-
variant === "cloud" && /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
515
|
+
}) => {
|
|
516
|
+
const outline = tone2 === "outline";
|
|
517
|
+
const glyph = outline ? "currentColor" : "#fff";
|
|
518
|
+
const accentDetail = outline ? bgFill : "#1496b3";
|
|
519
|
+
return /* @__PURE__ */ jsxs6(
|
|
520
|
+
"svg",
|
|
521
|
+
{
|
|
522
|
+
width: size,
|
|
523
|
+
height: size,
|
|
524
|
+
className,
|
|
525
|
+
viewBox: "0 0 64 64",
|
|
526
|
+
fill: "none",
|
|
527
|
+
children: [
|
|
565
528
|
/* @__PURE__ */ jsx6(
|
|
566
|
-
"
|
|
529
|
+
"rect",
|
|
567
530
|
{
|
|
568
|
-
|
|
569
|
-
|
|
531
|
+
width: "64",
|
|
532
|
+
height: "64",
|
|
533
|
+
rx: "14",
|
|
534
|
+
fill: outline ? "none" : bgFill,
|
|
535
|
+
opacity: outline ? 1 : bgOpacity,
|
|
536
|
+
stroke: outline ? "currentColor" : void 0,
|
|
537
|
+
strokeWidth: outline ? 4 : void 0,
|
|
538
|
+
className: bgClassName
|
|
570
539
|
}
|
|
571
540
|
),
|
|
572
|
-
/* @__PURE__ */ jsxs6("g", { fill:
|
|
573
|
-
/* @__PURE__ */ jsx6("rect", { x: "
|
|
574
|
-
/* @__PURE__ */ jsx6("rect", { x: "
|
|
575
|
-
] })
|
|
576
|
-
] }),
|
|
577
|
-
variant === "specs" && /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
578
|
-
/* @__PURE__ */ jsx6("rect", { x: "16", y: "12", width: "32", height: "40", rx: "4", fill: "#fff" }),
|
|
579
|
-
/* @__PURE__ */ jsxs6("g", { fill: "#1496b3", children: [
|
|
580
|
-
/* @__PURE__ */ jsx6("rect", { x: "21", y: "19", width: "22", height: "3.4", rx: "1.7" }),
|
|
581
|
-
/* @__PURE__ */ jsx6("rect", { x: "21", y: "26", width: "22", height: "3.4", rx: "1.7" }),
|
|
582
|
-
/* @__PURE__ */ jsx6("rect", { x: "21", y: "33", width: "14", height: "3.4", rx: "1.7" })
|
|
541
|
+
variant === "lms" && /* @__PURE__ */ jsxs6("g", { fill: glyph, children: [
|
|
542
|
+
/* @__PURE__ */ jsx6("rect", { x: "14", y: "14", width: "36", height: "10", rx: "3" }),
|
|
543
|
+
/* @__PURE__ */ jsx6("rect", { x: "27", y: "14", width: "10", height: "36", rx: "3" })
|
|
583
544
|
] }),
|
|
584
|
-
/* @__PURE__ */
|
|
585
|
-
"
|
|
586
|
-
{
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
545
|
+
variant === "boards" && /* @__PURE__ */ jsxs6("g", { fill: glyph, children: [
|
|
546
|
+
/* @__PURE__ */ jsx6("rect", { x: "13", y: "15", width: "10", height: "26", rx: "5" }),
|
|
547
|
+
/* @__PURE__ */ jsx6("rect", { x: "27", y: "15", width: "10", height: "34", rx: "5" }),
|
|
548
|
+
/* @__PURE__ */ jsx6("rect", { x: "41", y: "15", width: "10", height: "20", rx: "5" })
|
|
549
|
+
] }),
|
|
550
|
+
variant === "playground" && /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
551
|
+
/* @__PURE__ */ jsxs6("g", { fill: glyph, children: [
|
|
552
|
+
/* @__PURE__ */ jsx6("rect", { x: "13", y: "12", width: "38", height: "9", rx: "3" }),
|
|
553
|
+
/* @__PURE__ */ jsx6("rect", { x: "27", y: "12", width: "10", height: "30", rx: "3" })
|
|
554
|
+
] }),
|
|
555
|
+
/* @__PURE__ */ jsx6(
|
|
556
|
+
"path",
|
|
557
|
+
{
|
|
558
|
+
d: "M16 46 L23 51 L16 56",
|
|
559
|
+
stroke: "#d4ff3a",
|
|
560
|
+
strokeWidth: "4.5",
|
|
561
|
+
strokeLinecap: "round",
|
|
562
|
+
strokeLinejoin: "round",
|
|
563
|
+
fill: "none"
|
|
564
|
+
}
|
|
565
|
+
),
|
|
566
|
+
/* @__PURE__ */ jsx6("rect", { x: "30", y: "52.5", width: "14", height: "4.5", rx: "2.25", fill: glyph })
|
|
567
|
+
] }),
|
|
568
|
+
variant === "whiteboard" && /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
569
|
+
/* @__PURE__ */ jsx6("rect", { x: "12", y: "15", width: "40", height: "28", rx: "4", fill: glyph }),
|
|
570
|
+
/* @__PURE__ */ jsx6(
|
|
571
|
+
"path",
|
|
572
|
+
{
|
|
573
|
+
d: "M19 35 C24 24, 30 24, 33 31 C35.5 37, 41 36, 45 27",
|
|
574
|
+
stroke: accentDetail,
|
|
575
|
+
strokeWidth: "3.4",
|
|
576
|
+
strokeLinecap: "round",
|
|
577
|
+
strokeLinejoin: "round",
|
|
578
|
+
fill: "none"
|
|
579
|
+
}
|
|
580
|
+
),
|
|
581
|
+
/* @__PURE__ */ jsx6("circle", { cx: "19", cy: "35", r: "2.6", fill: accentDetail }),
|
|
582
|
+
/* @__PURE__ */ jsx6("circle", { cx: "45", cy: "27", r: "2.6", fill: "#d4ff3a" }),
|
|
583
|
+
/* @__PURE__ */ jsx6(
|
|
584
|
+
"path",
|
|
585
|
+
{
|
|
586
|
+
d: "M22 43 L19 51 M42 43 L45 51",
|
|
587
|
+
stroke: glyph,
|
|
588
|
+
strokeWidth: "4",
|
|
589
|
+
strokeLinecap: "round"
|
|
590
|
+
}
|
|
591
|
+
)
|
|
592
|
+
] }),
|
|
593
|
+
variant === "cloud" && /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
594
|
+
/* @__PURE__ */ jsx6(
|
|
595
|
+
"path",
|
|
596
|
+
{
|
|
597
|
+
fill: glyph,
|
|
598
|
+
d: "M23 45 q-4.6 0-7.8-3.2Q12 38.6 12 34 q0-3.95 2.5-7 2.5-3.05 6.4-3.83 1.05-4.25 4.6-6.91Q29.05 13.6 33.7 13.6 q5.75 0 9.78 3.9 4.03 3.9 4.22 9.52 3.26.29 5.38 2.69 2.12 2.4 2.12 5.63 0 3.58-2.56 6.11T46 47 H23Z"
|
|
599
|
+
}
|
|
600
|
+
),
|
|
601
|
+
/* @__PURE__ */ jsxs6("g", { fill: accentDetail, children: [
|
|
602
|
+
/* @__PURE__ */ jsx6("rect", { x: "25", y: "30", width: "16", height: "3.6", rx: "1.6" }),
|
|
603
|
+
/* @__PURE__ */ jsx6("rect", { x: "31.2", y: "30", width: "3.6", height: "12", rx: "1.6" })
|
|
604
|
+
] })
|
|
605
|
+
] }),
|
|
606
|
+
variant === "specs" && /* @__PURE__ */ jsxs6(Fragment, { children: [
|
|
607
|
+
/* @__PURE__ */ jsx6("rect", { x: "16", y: "12", width: "32", height: "40", rx: "4", fill: glyph }),
|
|
608
|
+
/* @__PURE__ */ jsxs6("g", { fill: accentDetail, children: [
|
|
609
|
+
/* @__PURE__ */ jsx6("rect", { x: "21", y: "19", width: "22", height: "3.4", rx: "1.7" }),
|
|
610
|
+
/* @__PURE__ */ jsx6("rect", { x: "21", y: "26", width: "22", height: "3.4", rx: "1.7" }),
|
|
611
|
+
/* @__PURE__ */ jsx6("rect", { x: "21", y: "33", width: "14", height: "3.4", rx: "1.7" })
|
|
612
|
+
] }),
|
|
613
|
+
/* @__PURE__ */ jsx6(
|
|
614
|
+
"path",
|
|
615
|
+
{
|
|
616
|
+
d: "M22 43 L26 47 L34 39",
|
|
617
|
+
stroke: "#d4ff3a",
|
|
618
|
+
strokeWidth: "4",
|
|
619
|
+
strokeLinecap: "round",
|
|
620
|
+
strokeLinejoin: "round",
|
|
621
|
+
fill: "none"
|
|
622
|
+
}
|
|
623
|
+
)
|
|
624
|
+
] })
|
|
625
|
+
]
|
|
626
|
+
}
|
|
627
|
+
);
|
|
628
|
+
};
|
|
599
629
|
|
|
600
630
|
// src/components/icons/FormsIcons.tsx
|
|
601
631
|
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
@@ -1618,8 +1648,27 @@ function InfoBanner(props) {
|
|
|
1618
1648
|
);
|
|
1619
1649
|
}
|
|
1620
1650
|
|
|
1651
|
+
// src/components/shared/ThemeIconButton.tsx
|
|
1652
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
1653
|
+
function ThemeIconButton({
|
|
1654
|
+
icon,
|
|
1655
|
+
className = "",
|
|
1656
|
+
type = "button",
|
|
1657
|
+
...props
|
|
1658
|
+
}) {
|
|
1659
|
+
return /* @__PURE__ */ jsx33(
|
|
1660
|
+
"button",
|
|
1661
|
+
{
|
|
1662
|
+
type,
|
|
1663
|
+
className: `inline-flex h-9 w-9 cursor-pointer items-center justify-center border-0 bg-transparent p-1.5 text-txt-3 transition-colors duration-150 hover:text-primary-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--tapiz-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--tapiz-bg-surface)] ${className}`.trim(),
|
|
1664
|
+
...props,
|
|
1665
|
+
children: /* @__PURE__ */ jsx33("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: icon })
|
|
1666
|
+
}
|
|
1667
|
+
);
|
|
1668
|
+
}
|
|
1669
|
+
|
|
1621
1670
|
// src/components/shared/PageHeader.tsx
|
|
1622
|
-
import { jsx as
|
|
1671
|
+
import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1623
1672
|
function PageHeader({
|
|
1624
1673
|
title,
|
|
1625
1674
|
subtitle,
|
|
@@ -1636,25 +1685,25 @@ function PageHeader({
|
|
|
1636
1685
|
const resolvedActions = actions ?? action;
|
|
1637
1686
|
const variantClass = variant === "brutal" ? "border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-5 shadow-[var(--tapiz-shadow-brutal)]" : variant === "enterprise" ? "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 shadow-[var(--tapiz-shadow-sm)]" : "border-b border-[var(--tapiz-border-subtle)] pb-4";
|
|
1638
1687
|
return /* @__PURE__ */ jsxs23("div", { className: `page-header mb-5 flex flex-col gap-3 animate-fade-in-up ${variantClass} ${className}`.trim(), children: [
|
|
1639
|
-
breadcrumbs ? /* @__PURE__ */
|
|
1688
|
+
breadcrumbs ? /* @__PURE__ */ jsx34("div", { className: "font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: breadcrumbs }) : null,
|
|
1640
1689
|
/* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
|
|
1641
1690
|
/* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
|
|
1642
|
-
subtitle ? /* @__PURE__ */
|
|
1691
|
+
subtitle ? /* @__PURE__ */ jsx34("div", { className: "kicker mb-1.5", children: subtitle }) : null,
|
|
1643
1692
|
/* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2.5", children: [
|
|
1644
|
-
icon ? /* @__PURE__ */
|
|
1645
|
-
/* @__PURE__ */
|
|
1693
|
+
icon ? /* @__PURE__ */ jsx34("span", { className: "text-[var(--tapiz-accent)]", children: icon }) : null,
|
|
1694
|
+
/* @__PURE__ */ jsx34("h2", { className: "font-(--font-display) text-[22px] tracking-[-0.03em] text-[var(--tapiz-text-primary)] md:text-[26px]", children: title })
|
|
1646
1695
|
] }),
|
|
1647
|
-
description ? /* @__PURE__ */
|
|
1648
|
-
meta ? /* @__PURE__ */
|
|
1696
|
+
description ? /* @__PURE__ */ jsx34("div", { className: "mt-2 max-w-3xl text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null,
|
|
1697
|
+
meta ? /* @__PURE__ */ jsx34("div", { className: "mt-3 font-mono text-[11px] text-[var(--tapiz-text-disabled)]", children: meta }) : null
|
|
1649
1698
|
] }),
|
|
1650
|
-
resolvedActions ? /* @__PURE__ */
|
|
1699
|
+
resolvedActions ? /* @__PURE__ */ jsx34("div", { className: "flex shrink-0 flex-wrap gap-2", children: resolvedActions }) : null
|
|
1651
1700
|
] }),
|
|
1652
1701
|
banner ? banner : null
|
|
1653
1702
|
] });
|
|
1654
1703
|
}
|
|
1655
1704
|
|
|
1656
1705
|
// src/components/shared/MetricCard.tsx
|
|
1657
|
-
import { jsx as
|
|
1706
|
+
import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1658
1707
|
var trendClasses = {
|
|
1659
1708
|
positive: "border-[var(--tapiz-success)] text-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)]",
|
|
1660
1709
|
negative: "border-[var(--tapiz-danger)] text-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)]",
|
|
@@ -1674,22 +1723,22 @@ function MetricCard({
|
|
|
1674
1723
|
return /* @__PURE__ */ jsxs24(Card, { variant, padding: "md", hover: true, className: `relative overflow-hidden ${className}`, children: [
|
|
1675
1724
|
/* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-4", children: [
|
|
1676
1725
|
/* @__PURE__ */ jsxs24("div", { className: "min-w-0", children: [
|
|
1677
|
-
/* @__PURE__ */
|
|
1678
|
-
/* @__PURE__ */
|
|
1726
|
+
/* @__PURE__ */ jsx35("p", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: label }),
|
|
1727
|
+
/* @__PURE__ */ jsx35("div", { className: "mt-2 font-display text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: value })
|
|
1679
1728
|
] }),
|
|
1680
|
-
icon ? /* @__PURE__ */
|
|
1729
|
+
icon ? /* @__PURE__ */ jsx35("div", { className: "grid h-10 w-10 shrink-0 place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--color-icon-bg)] text-[var(--tapiz-accent)]", children: icon }) : null
|
|
1681
1730
|
] }),
|
|
1682
1731
|
description || trend ? /* @__PURE__ */ jsxs24("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [
|
|
1683
|
-
trend ? /* @__PURE__ */
|
|
1684
|
-
description ? /* @__PURE__ */
|
|
1732
|
+
trend ? /* @__PURE__ */ jsx35("span", { className: `inline-flex border px-2 py-0.5 font-mono text-[10px] font-bold uppercase tracking-widest ${trendClasses[trendTone]}`, children: trend }) : null,
|
|
1733
|
+
description ? /* @__PURE__ */ jsx35("p", { className: "text-xs text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
1685
1734
|
] }) : null
|
|
1686
1735
|
] });
|
|
1687
1736
|
}
|
|
1688
1737
|
|
|
1689
1738
|
// src/components/shared/StatGrid.tsx
|
|
1690
|
-
import { jsx as
|
|
1739
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
1691
1740
|
function StatGrid({ children, className = "", minColumnWidth = "14rem" }) {
|
|
1692
|
-
return /* @__PURE__ */
|
|
1741
|
+
return /* @__PURE__ */ jsx36(
|
|
1693
1742
|
"div",
|
|
1694
1743
|
{
|
|
1695
1744
|
className: `grid gap-4 ${className}`,
|
|
@@ -1700,23 +1749,23 @@ function StatGrid({ children, className = "", minColumnWidth = "14rem" }) {
|
|
|
1700
1749
|
}
|
|
1701
1750
|
|
|
1702
1751
|
// src/components/shared/SectionCard.tsx
|
|
1703
|
-
import { jsx as
|
|
1752
|
+
import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
1704
1753
|
function SectionCard({ title, eyebrow, description, action, children, className = "" }) {
|
|
1705
1754
|
return /* @__PURE__ */ jsxs25(Card, { variant: "surface", padding: "none", className, children: [
|
|
1706
1755
|
title || eyebrow || description || action ? /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-3 border-b border-[var(--tapiz-border-subtle)] px-5 py-4 sm:flex-row sm:items-start sm:justify-between", children: [
|
|
1707
1756
|
/* @__PURE__ */ jsxs25("div", { className: "min-w-0", children: [
|
|
1708
|
-
eyebrow ? /* @__PURE__ */
|
|
1709
|
-
title ? /* @__PURE__ */
|
|
1710
|
-
description ? /* @__PURE__ */
|
|
1757
|
+
eyebrow ? /* @__PURE__ */ jsx37("div", { className: "kicker mb-1", children: eyebrow }) : null,
|
|
1758
|
+
title ? /* @__PURE__ */ jsx37("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
1759
|
+
description ? /* @__PURE__ */ jsx37("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
1711
1760
|
] }),
|
|
1712
|
-
action ? /* @__PURE__ */
|
|
1761
|
+
action ? /* @__PURE__ */ jsx37("div", { className: "shrink-0", children: action }) : null
|
|
1713
1762
|
] }) : null,
|
|
1714
|
-
/* @__PURE__ */
|
|
1763
|
+
/* @__PURE__ */ jsx37("div", { className: "p-5", children })
|
|
1715
1764
|
] });
|
|
1716
1765
|
}
|
|
1717
1766
|
|
|
1718
1767
|
// src/components/shared/SearchInput.tsx
|
|
1719
|
-
import { jsx as
|
|
1768
|
+
import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
1720
1769
|
function SearchInput({
|
|
1721
1770
|
value,
|
|
1722
1771
|
onChange,
|
|
@@ -1730,8 +1779,8 @@ function SearchInput({
|
|
|
1730
1779
|
...props
|
|
1731
1780
|
}) {
|
|
1732
1781
|
return /* @__PURE__ */ jsxs26("div", { className: `relative ${wrapperClassName}`.trim(), style: wrapperStyle, children: [
|
|
1733
|
-
/* @__PURE__ */
|
|
1734
|
-
/* @__PURE__ */
|
|
1782
|
+
/* @__PURE__ */ jsx38("span", { className: `pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 ${iconClassName}`.trim(), children: /* @__PURE__ */ jsx38(Search, { size: 15 }) }),
|
|
1783
|
+
/* @__PURE__ */ jsx38(
|
|
1735
1784
|
Input,
|
|
1736
1785
|
{
|
|
1737
1786
|
...props,
|
|
@@ -1742,21 +1791,21 @@ function SearchInput({
|
|
|
1742
1791
|
className: `pl-9 ${inputClassName}`.trim()
|
|
1743
1792
|
}
|
|
1744
1793
|
),
|
|
1745
|
-
clearable && value ? /* @__PURE__ */
|
|
1794
|
+
clearable && value ? /* @__PURE__ */ jsx38(
|
|
1746
1795
|
"button",
|
|
1747
1796
|
{
|
|
1748
1797
|
type: "button",
|
|
1749
1798
|
onClick: () => onChange(""),
|
|
1750
1799
|
className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-lg p-1 text-txt-4 transition-colors hover:bg-ink-300 hover:text-txt-2",
|
|
1751
1800
|
title: clearTitle,
|
|
1752
|
-
children: /* @__PURE__ */
|
|
1801
|
+
children: /* @__PURE__ */ jsx38(X, { size: 14 })
|
|
1753
1802
|
}
|
|
1754
1803
|
) : null
|
|
1755
1804
|
] });
|
|
1756
1805
|
}
|
|
1757
1806
|
|
|
1758
1807
|
// src/components/shared/Pagination.tsx
|
|
1759
|
-
import { jsx as
|
|
1808
|
+
import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
1760
1809
|
function getPageNumbers(page, totalPages) {
|
|
1761
1810
|
if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
1762
1811
|
const pages = [1];
|
|
@@ -1781,7 +1830,7 @@ function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }
|
|
|
1781
1830
|
const from = pageSize ? (page - 1) * pageSize + 1 : null;
|
|
1782
1831
|
const to = pageSize && totalItems ? Math.min(page * pageSize, totalItems) : null;
|
|
1783
1832
|
return /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-between gap-3 border-t border-border pt-3 sm:flex-row", children: [
|
|
1784
|
-
totalItems != null && from != null && to != null ? /* @__PURE__ */
|
|
1833
|
+
totalItems != null && from != null && to != null ? /* @__PURE__ */ jsx39("span", { className: "order-2 font-mono text-[12px] text-txt-4 sm:order-1", children: copy.showing({ from, to, total: totalItems }) }) : /* @__PURE__ */ jsx39("span", { className: "order-2 font-mono text-[11px] text-txt-4 sm:order-1", children: copy.page({ page, totalPages }) }),
|
|
1785
1834
|
/* @__PURE__ */ jsxs27("div", { className: "order-1 flex items-center gap-1 sm:order-2", children: [
|
|
1786
1835
|
/* @__PURE__ */ jsxs27(
|
|
1787
1836
|
"button",
|
|
@@ -1792,13 +1841,13 @@ function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }
|
|
|
1792
1841
|
title: copy.prevTitle,
|
|
1793
1842
|
className: "flex items-center gap-1 border border-border px-2.5 py-1.5 font-mono text-[11px] text-txt-3 transition-colors hover:border-border-hi hover:text-txt-1 disabled:cursor-not-allowed disabled:opacity-30",
|
|
1794
1843
|
children: [
|
|
1795
|
-
/* @__PURE__ */
|
|
1796
|
-
/* @__PURE__ */
|
|
1844
|
+
/* @__PURE__ */ jsx39(ChevronLeft, { size: 12 }),
|
|
1845
|
+
/* @__PURE__ */ jsx39("span", { className: "hidden sm:inline", children: copy.prev })
|
|
1797
1846
|
]
|
|
1798
1847
|
}
|
|
1799
1848
|
),
|
|
1800
|
-
/* @__PURE__ */
|
|
1801
|
-
(entry, index) => entry === "\u2026" ? /* @__PURE__ */
|
|
1849
|
+
/* @__PURE__ */ jsx39("div", { className: "flex items-center gap-1", children: pageNumbers.map(
|
|
1850
|
+
(entry, index) => entry === "\u2026" ? /* @__PURE__ */ jsx39("span", { className: "w-7 text-center font-mono text-[11px] text-txt-4", children: "\u2026" }, `ellipsis-${index}`) : /* @__PURE__ */ jsx39(
|
|
1802
1851
|
"button",
|
|
1803
1852
|
{
|
|
1804
1853
|
type: "button",
|
|
@@ -1818,8 +1867,8 @@ function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }
|
|
|
1818
1867
|
title: copy.nextTitle,
|
|
1819
1868
|
className: "flex items-center gap-1 border border-border px-2.5 py-1.5 font-mono text-[10px] text-txt-3 transition-colors hover:border-border-hi hover:text-txt-1 disabled:cursor-not-allowed disabled:opacity-30",
|
|
1820
1869
|
children: [
|
|
1821
|
-
/* @__PURE__ */
|
|
1822
|
-
/* @__PURE__ */
|
|
1870
|
+
/* @__PURE__ */ jsx39("span", { className: "hidden sm:inline", children: copy.next }),
|
|
1871
|
+
/* @__PURE__ */ jsx39(ChevronRight, { size: 12 })
|
|
1823
1872
|
]
|
|
1824
1873
|
}
|
|
1825
1874
|
)
|
|
@@ -1828,13 +1877,13 @@ function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }
|
|
|
1828
1877
|
}
|
|
1829
1878
|
|
|
1830
1879
|
// src/components/shared/SectionTitle.tsx
|
|
1831
|
-
import { jsx as
|
|
1880
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
1832
1881
|
function SectionTitle({ children, className = "" }) {
|
|
1833
|
-
return /* @__PURE__ */
|
|
1882
|
+
return /* @__PURE__ */ jsx40("h3", { className: `mb-1 text-sm font-semibold text-txt-1 ${className}`.trim(), children });
|
|
1834
1883
|
}
|
|
1835
1884
|
|
|
1836
1885
|
// src/components/shared/StatusBadge.tsx
|
|
1837
|
-
import { jsx as
|
|
1886
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
1838
1887
|
var BASE = "inline-flex items-center border px-2 py-0.5 font-mono text-[9px] font-bold uppercase tracking-[0.15em]";
|
|
1839
1888
|
var variantStyles = {
|
|
1840
1889
|
default: "border-[var(--tapiz-border-strong)] text-[var(--tapiz-text-secondary)] bg-[var(--tapiz-bg-surface-muted)]",
|
|
@@ -1847,13 +1896,13 @@ var variantStyles = {
|
|
|
1847
1896
|
pending: "border-[var(--tapiz-text-muted)] text-[var(--tapiz-text-muted)] bg-transparent"
|
|
1848
1897
|
};
|
|
1849
1898
|
function StatusBadge({ label, variant = "default", className = "" }) {
|
|
1850
|
-
return /* @__PURE__ */
|
|
1899
|
+
return /* @__PURE__ */ jsx41("span", { className: `${BASE} ${variantStyles[variant]} ${className}`.trim(), children: label });
|
|
1851
1900
|
}
|
|
1852
1901
|
|
|
1853
1902
|
// src/components/shared/ActionMenu.tsx
|
|
1854
1903
|
import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState5 } from "react";
|
|
1855
1904
|
import { createPortal as createPortal4 } from "react-dom";
|
|
1856
|
-
import { Fragment as Fragment2, jsx as
|
|
1905
|
+
import { Fragment as Fragment2, jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
1857
1906
|
var defaultMenuStyle = {
|
|
1858
1907
|
background: "var(--color-ink-200)",
|
|
1859
1908
|
border: "1px solid var(--color-border-hi)",
|
|
@@ -1938,8 +1987,8 @@ function ActionMenu({
|
|
|
1938
1987
|
};
|
|
1939
1988
|
}, [open]);
|
|
1940
1989
|
const menuNode = open && pos ? /* @__PURE__ */ jsxs28(Fragment2, { children: [
|
|
1941
|
-
/* @__PURE__ */
|
|
1942
|
-
/* @__PURE__ */
|
|
1990
|
+
/* @__PURE__ */ jsx42("div", { className: "fixed inset-0 z-9998", onClick: () => setOpen(false) }),
|
|
1991
|
+
/* @__PURE__ */ jsx42(
|
|
1943
1992
|
"div",
|
|
1944
1993
|
{
|
|
1945
1994
|
ref: menuRef,
|
|
@@ -1957,7 +2006,7 @@ function ActionMenu({
|
|
|
1957
2006
|
...menuStyle
|
|
1958
2007
|
},
|
|
1959
2008
|
children: items.map((item, index) => /* @__PURE__ */ jsxs28("div", { children: [
|
|
1960
|
-
index > 0 && item.danger ? /* @__PURE__ */
|
|
2009
|
+
index > 0 && item.danger ? /* @__PURE__ */ jsx42("div", { style: { borderTop: "1px solid var(--color-border)" } }) : null,
|
|
1961
2010
|
/* @__PURE__ */ jsxs28(
|
|
1962
2011
|
"button",
|
|
1963
2012
|
{
|
|
@@ -1970,8 +2019,8 @@ function ActionMenu({
|
|
|
1970
2019
|
item.onSelect();
|
|
1971
2020
|
},
|
|
1972
2021
|
children: [
|
|
1973
|
-
item.loading ? /* @__PURE__ */
|
|
1974
|
-
/* @__PURE__ */
|
|
2022
|
+
item.loading ? /* @__PURE__ */ jsx42(Spinner, { color: "text-[var(--color-txt-3)]" }) : /* @__PURE__ */ jsx42("span", { className: item.danger ? "shrink-0 text-warn" : "shrink-0 text-primary-300", children: item.icon }),
|
|
2023
|
+
/* @__PURE__ */ jsx42("span", { children: item.label })
|
|
1975
2024
|
]
|
|
1976
2025
|
}
|
|
1977
2026
|
)
|
|
@@ -1980,13 +2029,13 @@ function ActionMenu({
|
|
|
1980
2029
|
)
|
|
1981
2030
|
] }) : null;
|
|
1982
2031
|
return /* @__PURE__ */ jsxs28("div", { ref: btnRef, className: fullWidth ? "relative w-full" : "relative inline-block max-w-full", children: [
|
|
1983
|
-
/* @__PURE__ */
|
|
2032
|
+
/* @__PURE__ */ jsx42(
|
|
1984
2033
|
Button,
|
|
1985
2034
|
{
|
|
1986
2035
|
size: buttonSize,
|
|
1987
2036
|
variant: buttonVariant,
|
|
1988
2037
|
icon,
|
|
1989
|
-
iconRight: /* @__PURE__ */
|
|
2038
|
+
iconRight: /* @__PURE__ */ jsx42(ChevronDown, { size: 11 }),
|
|
1990
2039
|
onClick: () => setOpen((value) => !value),
|
|
1991
2040
|
className: buttonClassName,
|
|
1992
2041
|
fullWidth,
|
|
@@ -2002,7 +2051,7 @@ import { useMemo as useMemo2, useState as useState6 } from "react";
|
|
|
2002
2051
|
|
|
2003
2052
|
// src/components/table/DataTableRow.tsx
|
|
2004
2053
|
import { memo } from "react";
|
|
2005
|
-
import { jsx as
|
|
2054
|
+
import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2006
2055
|
var ALIGN_CLASS = {
|
|
2007
2056
|
left: "text-left",
|
|
2008
2057
|
center: "text-center",
|
|
@@ -2016,7 +2065,7 @@ function DataTableRowInner({ row, columns, onRowClick, rowActions, densityCellCl
|
|
|
2016
2065
|
onClick: clickable ? () => onRowClick?.(row) : void 0,
|
|
2017
2066
|
className: `border-b border-[var(--tapiz-border-subtle)] transition-colors hover:bg-[var(--tapiz-bg-surface-muted)] ${striped ? "even:bg-[color-mix(in_srgb,var(--tapiz-bg-surface-muted)_35%,var(--tapiz-bg-surface))]" : ""} ${clickable ? "cursor-pointer" : ""}`,
|
|
2018
2067
|
children: [
|
|
2019
|
-
columns.map((column) => /* @__PURE__ */
|
|
2068
|
+
columns.map((column) => /* @__PURE__ */ jsx43(
|
|
2020
2069
|
"td",
|
|
2021
2070
|
{
|
|
2022
2071
|
className: `${densityCellClass} text-xs text-[var(--tapiz-text-secondary)] ${ALIGN_CLASS[column.align ?? "left"]} ${column.className ?? ""}`,
|
|
@@ -2024,7 +2073,7 @@ function DataTableRowInner({ row, columns, onRowClick, rowActions, densityCellCl
|
|
|
2024
2073
|
},
|
|
2025
2074
|
column.id
|
|
2026
2075
|
)),
|
|
2027
|
-
rowActions !== void 0 && /* @__PURE__ */
|
|
2076
|
+
rowActions !== void 0 && /* @__PURE__ */ jsx43("td", { className: `${densityCellClass} text-right`, children: rowActions(row) })
|
|
2028
2077
|
]
|
|
2029
2078
|
}
|
|
2030
2079
|
);
|
|
@@ -2032,7 +2081,7 @@ function DataTableRowInner({ row, columns, onRowClick, rowActions, densityCellCl
|
|
|
2032
2081
|
var DataTableRow = memo(DataTableRowInner);
|
|
2033
2082
|
|
|
2034
2083
|
// src/components/table/DataTable.tsx
|
|
2035
|
-
import { jsx as
|
|
2084
|
+
import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2036
2085
|
var ALIGN_CLASS2 = {
|
|
2037
2086
|
left: "text-left",
|
|
2038
2087
|
center: "text-center",
|
|
@@ -2101,17 +2150,17 @@ function DataTable({
|
|
|
2101
2150
|
className
|
|
2102
2151
|
].filter(Boolean).join(" ");
|
|
2103
2152
|
return /* @__PURE__ */ jsxs30("div", { className: wrapperClass, children: [
|
|
2104
|
-
mobileCard !== void 0 && /* @__PURE__ */
|
|
2153
|
+
mobileCard !== void 0 && /* @__PURE__ */ jsx44("div", { className: "md:hidden", children: isLoading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsx44("div", { className: "h-16 animate-pulse bg-ink-300" }, i)) : sortedData.length === 0 ? emptyState : sortedData.map((row) => /* @__PURE__ */ jsx44("div", { children: mobileCard(row) }, rowKey(row))) }),
|
|
2105
2154
|
/* @__PURE__ */ jsxs30("table", { className: tableClass, children: [
|
|
2106
|
-
/* @__PURE__ */
|
|
2155
|
+
/* @__PURE__ */ jsx44("thead", { children: /* @__PURE__ */ jsxs30("tr", { className: "border-b border-border bg-ink-300", children: [
|
|
2107
2156
|
columns.map((column) => {
|
|
2108
2157
|
const baseClass = `${densityHeaderClass} ${stickyHeader ? "sticky top-0 z-10" : ""} ${ALIGN_CLASS2[column.align ?? "left"]} font-mono text-[11px] tracking-[.08em] text-txt-4 font-semibold whitespace-nowrap`;
|
|
2109
2158
|
if (!column.sortable || !column.sortAccessor) {
|
|
2110
|
-
return /* @__PURE__ */
|
|
2159
|
+
return /* @__PURE__ */ jsx44("th", { scope: "col", className: baseClass, children: column.header }, column.id);
|
|
2111
2160
|
}
|
|
2112
2161
|
const active = serverSort ? serverSort.field === column.id : sort?.columnId === column.id;
|
|
2113
2162
|
const direction = serverSort ? serverSort.dir : sort?.direction ?? "asc";
|
|
2114
|
-
return /* @__PURE__ */
|
|
2163
|
+
return /* @__PURE__ */ jsx44(
|
|
2115
2164
|
"th",
|
|
2116
2165
|
{
|
|
2117
2166
|
scope: "col",
|
|
@@ -2125,7 +2174,7 @@ function DataTable({
|
|
|
2125
2174
|
className: `inline-flex items-center gap-1 select-none transition-colors hover:text-txt-1 ${active ? "text-txt-1" : ""}`,
|
|
2126
2175
|
children: [
|
|
2127
2176
|
column.header,
|
|
2128
|
-
active && (direction === "asc" ? /* @__PURE__ */
|
|
2177
|
+
active && (direction === "asc" ? /* @__PURE__ */ jsx44(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx44(ChevronDown, { size: 12 }))
|
|
2129
2178
|
]
|
|
2130
2179
|
}
|
|
2131
2180
|
)
|
|
@@ -2133,9 +2182,9 @@ function DataTable({
|
|
|
2133
2182
|
column.id
|
|
2134
2183
|
);
|
|
2135
2184
|
}),
|
|
2136
|
-
hasActions && /* @__PURE__ */
|
|
2185
|
+
hasActions && /* @__PURE__ */ jsx44("th", { scope: "col", className: "px-3 py-2.5 text-right font-mono text-[11px] tracking-[.08em] text-txt-4 font-semibold whitespace-nowrap" })
|
|
2137
2186
|
] }) }),
|
|
2138
|
-
/* @__PURE__ */
|
|
2187
|
+
/* @__PURE__ */ jsx44("tbody", { children: isLoading ? Array.from({ length: loadingRows }).map((_, rowIndex) => /* @__PURE__ */ jsx44("tr", { className: "border-b border-[var(--tapiz-border-subtle)]", children: Array.from({ length: colCount }).map((__, colIndex) => /* @__PURE__ */ jsx44("td", { className: densityCellClass, children: /* @__PURE__ */ jsx44("div", { className: "h-4 w-24 animate-pulse bg-[var(--tapiz-bg-surface-muted)]" }) }, colIndex)) }, rowIndex)) : sortedData.length === 0 ? /* @__PURE__ */ jsx44("tr", { children: /* @__PURE__ */ jsx44("td", { colSpan: colCount, className: "px-4 py-10 text-center text-txt-4 text-sm font-mono", children: emptyState }) }) : sortedData.map((row) => /* @__PURE__ */ jsx44(
|
|
2139
2188
|
DataTableRow,
|
|
2140
2189
|
{
|
|
2141
2190
|
row,
|
|
@@ -2152,178 +2201,277 @@ function DataTable({
|
|
|
2152
2201
|
] });
|
|
2153
2202
|
}
|
|
2154
2203
|
|
|
2155
|
-
// src/components/marketing/
|
|
2156
|
-
import { jsx as
|
|
2157
|
-
function
|
|
2158
|
-
return /* @__PURE__ */
|
|
2159
|
-
"
|
|
2160
|
-
{
|
|
2161
|
-
|
|
2162
|
-
"
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
}
|
|
2169
|
-
);
|
|
2204
|
+
// src/components/marketing/CTASection.tsx
|
|
2205
|
+
import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2206
|
+
function CTASection({ eyebrow, title, description, actions, className = "" }) {
|
|
2207
|
+
return /* @__PURE__ */ jsx45("section", { className: `mx-auto max-w-7xl px-[var(--tapiz-space-page-x)] py-[var(--tapiz-space-section-y)] ${className}`, children: /* @__PURE__ */ jsxs31("div", { className: "border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-8 shadow-[var(--tapiz-shadow-brutal-lg)] md:p-12", children: [
|
|
2208
|
+
eyebrow ? /* @__PURE__ */ jsx45("div", { className: "kicker mb-3", children: eyebrow }) : null,
|
|
2209
|
+
/* @__PURE__ */ jsxs31("div", { className: "grid gap-6 lg:grid-cols-[1fr_auto] lg:items-end", children: [
|
|
2210
|
+
/* @__PURE__ */ jsxs31("div", { children: [
|
|
2211
|
+
/* @__PURE__ */ jsx45("h2", { className: "max-w-3xl text-3xl font-semibold tracking-[-0.05em] md:text-5xl", children: title }),
|
|
2212
|
+
description ? /* @__PURE__ */ jsx45("p", { className: "mt-4 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)]", children: description }) : null
|
|
2213
|
+
] }),
|
|
2214
|
+
actions ? /* @__PURE__ */ jsx45("div", { className: "flex flex-wrap gap-3", children: actions }) : null
|
|
2215
|
+
] })
|
|
2216
|
+
] }) });
|
|
2170
2217
|
}
|
|
2171
2218
|
|
|
2172
|
-
// src/components/marketing/
|
|
2173
|
-
import { jsx as
|
|
2174
|
-
function
|
|
2175
|
-
return /* @__PURE__ */
|
|
2176
|
-
/* @__PURE__ */
|
|
2177
|
-
|
|
2178
|
-
/* @__PURE__ */
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2219
|
+
// src/components/marketing/ComparisonTable.tsx
|
|
2220
|
+
import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2221
|
+
function ComparisonTable({ rows, featureHeader = "Feature", includedHeader = "Tapiz", alternativeHeader = "Other", className = "" }) {
|
|
2222
|
+
return /* @__PURE__ */ jsx46("div", { className: `overflow-x-auto border border-[var(--tapiz-border-strong)] ${className}`, children: /* @__PURE__ */ jsxs32("table", { className: "w-full text-sm", children: [
|
|
2223
|
+
/* @__PURE__ */ jsx46("thead", { children: /* @__PURE__ */ jsxs32("tr", { children: [
|
|
2224
|
+
/* @__PURE__ */ jsx46("th", { className: "px-4 py-3 text-left", children: featureHeader }),
|
|
2225
|
+
/* @__PURE__ */ jsx46("th", { className: "px-4 py-3 text-left", children: includedHeader }),
|
|
2226
|
+
/* @__PURE__ */ jsx46("th", { className: "px-4 py-3 text-left", children: alternativeHeader })
|
|
2227
|
+
] }) }),
|
|
2228
|
+
/* @__PURE__ */ jsx46("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs32("tr", { className: "border-t border-[var(--tapiz-border-subtle)]", children: [
|
|
2229
|
+
/* @__PURE__ */ jsx46("td", { className: "px-4 py-3 font-medium text-[var(--tapiz-text-primary)]", children: row.feature }),
|
|
2230
|
+
/* @__PURE__ */ jsx46("td", { className: "px-4 py-3 text-[var(--tapiz-text-secondary)]", children: row.included }),
|
|
2231
|
+
/* @__PURE__ */ jsx46("td", { className: "px-4 py-3 text-[var(--tapiz-text-muted)]", children: row.alternative })
|
|
2232
|
+
] }, index)) })
|
|
2233
|
+
] }) });
|
|
2185
2234
|
}
|
|
2186
2235
|
|
|
2187
2236
|
// src/components/marketing/FeatureCard.tsx
|
|
2188
|
-
import { jsx as
|
|
2237
|
+
import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2189
2238
|
function FeatureCard({ title, description, icon, eyebrow, children, className = "", variant = "surface" }) {
|
|
2190
|
-
return /* @__PURE__ */
|
|
2191
|
-
/* @__PURE__ */
|
|
2192
|
-
icon ? /* @__PURE__ */
|
|
2193
|
-
/* @__PURE__ */
|
|
2194
|
-
eyebrow ? /* @__PURE__ */
|
|
2195
|
-
/* @__PURE__ */
|
|
2196
|
-
description ? /* @__PURE__ */
|
|
2239
|
+
return /* @__PURE__ */ jsxs33(Card, { variant, hover: true, className: `group ${className}`, children: [
|
|
2240
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex items-start gap-4", children: [
|
|
2241
|
+
icon ? /* @__PURE__ */ jsx47("div", { className: "grid h-11 w-11 shrink-0 place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--color-icon-bg)] text-[var(--tapiz-accent)] group-hover:translate-x-[-1px] group-hover:translate-y-[-1px]", children: icon }) : null,
|
|
2242
|
+
/* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
|
|
2243
|
+
eyebrow ? /* @__PURE__ */ jsx47("div", { className: "kicker mb-1", children: eyebrow }) : null,
|
|
2244
|
+
/* @__PURE__ */ jsx47("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
2245
|
+
description ? /* @__PURE__ */ jsx47("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
2197
2246
|
] })
|
|
2198
2247
|
] }),
|
|
2199
|
-
children ? /* @__PURE__ */
|
|
2248
|
+
children ? /* @__PURE__ */ jsx47("div", { className: "mt-5", children }) : null
|
|
2200
2249
|
] });
|
|
2201
2250
|
}
|
|
2202
2251
|
|
|
2203
2252
|
// src/components/marketing/FeatureGrid.tsx
|
|
2204
|
-
import { jsx as
|
|
2253
|
+
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
2205
2254
|
function FeatureGrid({ children, className = "" }) {
|
|
2206
|
-
return /* @__PURE__ */
|
|
2255
|
+
return /* @__PURE__ */ jsx48("div", { className: `grid gap-4 md:grid-cols-2 xl:grid-cols-3 ${className}`, children });
|
|
2207
2256
|
}
|
|
2208
2257
|
|
|
2209
|
-
// src/components/marketing/
|
|
2210
|
-
import { jsx as
|
|
2211
|
-
function
|
|
2212
|
-
return /* @__PURE__ */
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
/* @__PURE__ */
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
] })
|
|
2219
|
-
|
|
2220
|
-
] })
|
|
2221
|
-
] })
|
|
2258
|
+
// src/components/marketing/HeroFrame.tsx
|
|
2259
|
+
import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2260
|
+
function HeroFrame({ eyebrow, title, description, actions, visual, meta, className = "" }) {
|
|
2261
|
+
return /* @__PURE__ */ jsxs34("section", { className: `mx-auto grid max-w-7xl gap-10 px-[var(--tapiz-space-page-x)] py-[var(--tapiz-space-section-y)] lg:grid-cols-[1fr_0.9fr] lg:items-center ${className}`, children: [
|
|
2262
|
+
/* @__PURE__ */ jsxs34("div", { className: "animate-fade-in-up", children: [
|
|
2263
|
+
eyebrow ? /* @__PURE__ */ jsx49("div", { className: "kicker mb-4", children: eyebrow }) : null,
|
|
2264
|
+
/* @__PURE__ */ jsx49("h1", { className: "max-w-4xl text-5xl font-semibold leading-[0.95] tracking-[-0.07em] text-[var(--tapiz-text-primary)] md:text-7xl", children: title }),
|
|
2265
|
+
description ? /* @__PURE__ */ jsx49("p", { className: "mt-6 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)] md:text-lg", children: description }) : null,
|
|
2266
|
+
actions ? /* @__PURE__ */ jsx49("div", { className: "mt-8 flex flex-wrap gap-3", children: actions }) : null,
|
|
2267
|
+
meta ? /* @__PURE__ */ jsx49("div", { className: "mt-8 border-l-2 border-[var(--tapiz-accent)] pl-4 font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : null
|
|
2268
|
+
] }),
|
|
2269
|
+
visual ? /* @__PURE__ */ jsx49("div", { className: "animate-scale-in border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-brutal-lg)]", children: visual }) : null
|
|
2270
|
+
] });
|
|
2271
|
+
}
|
|
2272
|
+
|
|
2273
|
+
// src/components/marketing/LandingNavbarShell.tsx
|
|
2274
|
+
import { useEffect as useEffect3, useState as useState7 } from "react";
|
|
2275
|
+
import { Fragment as Fragment3, jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2276
|
+
function LandingNavbarShell({
|
|
2277
|
+
ariaNavLabel,
|
|
2278
|
+
brand,
|
|
2279
|
+
className = "",
|
|
2280
|
+
closeMenuLabel,
|
|
2281
|
+
containerClassName = "",
|
|
2282
|
+
desktopActions,
|
|
2283
|
+
desktopLanguageSwitcher,
|
|
2284
|
+
items,
|
|
2285
|
+
menuLabel,
|
|
2286
|
+
mobileActions,
|
|
2287
|
+
mobileDialogLabel,
|
|
2288
|
+
mobileLanguageSwitcher,
|
|
2289
|
+
mobileNavLabel,
|
|
2290
|
+
onThemeToggle,
|
|
2291
|
+
theme,
|
|
2292
|
+
themeLabels
|
|
2293
|
+
}) {
|
|
2294
|
+
const [open, setOpen] = useState7(false);
|
|
2295
|
+
useEffect3(() => {
|
|
2296
|
+
document.body.style.overflow = open ? "hidden" : "";
|
|
2297
|
+
document.body.classList.toggle("tapiz-landing-navbar-open", open);
|
|
2298
|
+
return () => {
|
|
2299
|
+
document.body.style.overflow = "";
|
|
2300
|
+
document.body.classList.remove("tapiz-landing-navbar-open");
|
|
2301
|
+
};
|
|
2302
|
+
}, [open]);
|
|
2303
|
+
const drawerLabel = mobileDialogLabel ?? menuLabel;
|
|
2304
|
+
const resolvedCloseMenuLabel = closeMenuLabel ?? menuLabel;
|
|
2305
|
+
const resolvedMobileNavLabel = mobileNavLabel ?? ariaNavLabel;
|
|
2306
|
+
const themeLabel = theme === "dark" ? themeLabels.light : themeLabels.dark;
|
|
2307
|
+
return /* @__PURE__ */ jsxs35(Fragment3, { children: [
|
|
2308
|
+
/* @__PURE__ */ jsx50("header", { className: ["tapiz-landing-navbar", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs35("div", { className: ["tapiz-landing-navbar__container", containerClassName].filter(Boolean).join(" "), children: [
|
|
2309
|
+
/* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__brand", children: brand }),
|
|
2310
|
+
/* @__PURE__ */ jsx50("nav", { className: "tapiz-landing-navbar__links", "aria-label": ariaNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35("a", { href: item.href, className: "tapiz-landing-navbar__link", children: [
|
|
2311
|
+
item.icon ? /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
|
|
2312
|
+
/* @__PURE__ */ jsx50("span", { children: item.label })
|
|
2313
|
+
] }, item.href)) }),
|
|
2314
|
+
/* @__PURE__ */ jsxs35("div", { className: "tapiz-landing-navbar__actions", children: [
|
|
2315
|
+
desktopLanguageSwitcher ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--desktop", children: desktopLanguageSwitcher }) : null,
|
|
2316
|
+
/* @__PURE__ */ jsx50(
|
|
2317
|
+
"button",
|
|
2318
|
+
{
|
|
2319
|
+
type: "button",
|
|
2320
|
+
className: `tapiz-landing-navbar__theme is-${theme}`,
|
|
2321
|
+
"aria-label": themeLabel,
|
|
2322
|
+
onClick: onThemeToggle,
|
|
2323
|
+
children: /* @__PURE__ */ jsx50("span", { className: "tapiz-landing-navbar__theme-track", "aria-hidden": "true", children: /* @__PURE__ */ jsxs35("span", { className: "tapiz-landing-navbar__theme-thumb", children: [
|
|
2324
|
+
/* @__PURE__ */ jsx50(Sun, { size: 13, className: "tapiz-landing-navbar__theme-sun" }),
|
|
2325
|
+
/* @__PURE__ */ jsx50(Moon, { size: 13, className: "tapiz-landing-navbar__theme-moon" })
|
|
2326
|
+
] }) })
|
|
2327
|
+
}
|
|
2328
|
+
),
|
|
2329
|
+
desktopActions ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__desktop-actions", children: desktopActions }) : null,
|
|
2330
|
+
/* @__PURE__ */ jsx50(
|
|
2331
|
+
"button",
|
|
2332
|
+
{
|
|
2333
|
+
type: "button",
|
|
2334
|
+
className: "tapiz-landing-navbar__menu",
|
|
2335
|
+
"aria-label": menuLabel,
|
|
2336
|
+
"aria-expanded": open,
|
|
2337
|
+
onClick: () => setOpen((value) => !value),
|
|
2338
|
+
children: open ? /* @__PURE__ */ jsx50(X, { size: 18 }) : /* @__PURE__ */ jsx50(Menu, { size: 18 })
|
|
2339
|
+
}
|
|
2340
|
+
)
|
|
2341
|
+
] })
|
|
2342
|
+
] }) }),
|
|
2343
|
+
open ? /* @__PURE__ */ jsx50(
|
|
2344
|
+
"button",
|
|
2345
|
+
{
|
|
2346
|
+
type: "button",
|
|
2347
|
+
className: "tapiz-landing-navbar__scrim",
|
|
2348
|
+
"aria-label": resolvedCloseMenuLabel,
|
|
2349
|
+
onClick: () => setOpen(false)
|
|
2350
|
+
}
|
|
2351
|
+
) : null,
|
|
2352
|
+
open ? /* @__PURE__ */ jsxs35("div", { className: "tapiz-landing-navbar__drawer", role: "dialog", "aria-modal": "true", "aria-label": drawerLabel, children: [
|
|
2353
|
+
/* @__PURE__ */ jsx50("nav", { className: "tapiz-landing-navbar__drawer-nav", "aria-label": resolvedMobileNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35(
|
|
2354
|
+
"a",
|
|
2355
|
+
{
|
|
2356
|
+
href: item.href,
|
|
2357
|
+
className: "tapiz-landing-navbar__drawer-link",
|
|
2358
|
+
onClick: () => setOpen(false),
|
|
2359
|
+
children: [
|
|
2360
|
+
item.icon ? /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
|
|
2361
|
+
/* @__PURE__ */ jsx50("span", { children: item.label })
|
|
2362
|
+
]
|
|
2363
|
+
},
|
|
2364
|
+
item.href
|
|
2365
|
+
)) }),
|
|
2366
|
+
mobileLanguageSwitcher ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--mobile", children: mobileLanguageSwitcher }) : null,
|
|
2367
|
+
mobileActions ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__drawer-actions", children: mobileActions }) : null
|
|
2368
|
+
] }) : null
|
|
2369
|
+
] });
|
|
2370
|
+
}
|
|
2371
|
+
|
|
2372
|
+
// src/components/marketing/MarketingShell.tsx
|
|
2373
|
+
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
2374
|
+
function MarketingShell({ children, className = "", grid = true, noise = true }) {
|
|
2375
|
+
return /* @__PURE__ */ jsx51(
|
|
2376
|
+
"main",
|
|
2377
|
+
{
|
|
2378
|
+
className: [
|
|
2379
|
+
"min-h-screen overflow-hidden bg-[var(--tapiz-bg-page)] text-[var(--tapiz-text-primary)]",
|
|
2380
|
+
grid ? "tapiz-grid-bg" : "",
|
|
2381
|
+
noise ? "tapiz-noise-bg" : "",
|
|
2382
|
+
className
|
|
2383
|
+
].filter(Boolean).join(" "),
|
|
2384
|
+
children
|
|
2385
|
+
}
|
|
2386
|
+
);
|
|
2222
2387
|
}
|
|
2223
2388
|
|
|
2224
2389
|
// src/components/marketing/MockupFrame.tsx
|
|
2225
|
-
import { jsx as
|
|
2390
|
+
import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2226
2391
|
function MockupFrame({ children, title, toolbar, className = "" }) {
|
|
2227
|
-
return /* @__PURE__ */
|
|
2228
|
-
/* @__PURE__ */
|
|
2229
|
-
/* @__PURE__ */
|
|
2230
|
-
/* @__PURE__ */
|
|
2231
|
-
/* @__PURE__ */
|
|
2232
|
-
/* @__PURE__ */
|
|
2392
|
+
return /* @__PURE__ */ jsxs36("div", { className: `overflow-hidden border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-brutal)] ${className}`, children: [
|
|
2393
|
+
/* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between border-b border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] px-3 py-2", children: [
|
|
2394
|
+
/* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-1.5", children: [
|
|
2395
|
+
/* @__PURE__ */ jsx52("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-danger)]" }),
|
|
2396
|
+
/* @__PURE__ */ jsx52("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-warning)]" }),
|
|
2397
|
+
/* @__PURE__ */ jsx52("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-success)]" })
|
|
2233
2398
|
] }),
|
|
2234
|
-
title ? /* @__PURE__ */
|
|
2235
|
-
/* @__PURE__ */
|
|
2399
|
+
title ? /* @__PURE__ */ jsx52("div", { className: "font-mono text-[10px] uppercase tracking-widest text-[var(--tapiz-text-muted)]", children: title }) : null,
|
|
2400
|
+
/* @__PURE__ */ jsx52("div", { children: toolbar })
|
|
2236
2401
|
] }),
|
|
2237
|
-
/* @__PURE__ */
|
|
2402
|
+
/* @__PURE__ */ jsx52("div", { className: "p-4", children })
|
|
2238
2403
|
] });
|
|
2239
2404
|
}
|
|
2240
2405
|
|
|
2241
|
-
// src/components/marketing/ComparisonTable.tsx
|
|
2242
|
-
import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2243
|
-
function ComparisonTable({ rows, featureHeader = "Feature", includedHeader = "Tapiz", alternativeHeader = "Other", className = "" }) {
|
|
2244
|
-
return /* @__PURE__ */ jsx50("div", { className: `overflow-x-auto border border-[var(--tapiz-border-strong)] ${className}`, children: /* @__PURE__ */ jsxs35("table", { className: "w-full text-sm", children: [
|
|
2245
|
-
/* @__PURE__ */ jsx50("thead", { children: /* @__PURE__ */ jsxs35("tr", { children: [
|
|
2246
|
-
/* @__PURE__ */ jsx50("th", { className: "px-4 py-3 text-left", children: featureHeader }),
|
|
2247
|
-
/* @__PURE__ */ jsx50("th", { className: "px-4 py-3 text-left", children: includedHeader }),
|
|
2248
|
-
/* @__PURE__ */ jsx50("th", { className: "px-4 py-3 text-left", children: alternativeHeader })
|
|
2249
|
-
] }) }),
|
|
2250
|
-
/* @__PURE__ */ jsx50("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs35("tr", { className: "border-t border-[var(--tapiz-border-subtle)]", children: [
|
|
2251
|
-
/* @__PURE__ */ jsx50("td", { className: "px-4 py-3 font-medium text-[var(--tapiz-text-primary)]", children: row.feature }),
|
|
2252
|
-
/* @__PURE__ */ jsx50("td", { className: "px-4 py-3 text-[var(--tapiz-text-secondary)]", children: row.included }),
|
|
2253
|
-
/* @__PURE__ */ jsx50("td", { className: "px-4 py-3 text-[var(--tapiz-text-muted)]", children: row.alternative })
|
|
2254
|
-
] }, index)) })
|
|
2255
|
-
] }) });
|
|
2256
|
-
}
|
|
2257
|
-
|
|
2258
2406
|
// src/components/layout/AppShell.tsx
|
|
2259
|
-
import { jsx as
|
|
2407
|
+
import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
2260
2408
|
var variantClasses4 = {
|
|
2261
2409
|
default: "bg-[var(--tapiz-bg-page)]",
|
|
2262
2410
|
grid: "bg-[var(--tapiz-bg-page)] tapiz-grid-bg",
|
|
2263
2411
|
noise: "bg-[var(--tapiz-bg-page)] tapiz-noise-bg"
|
|
2264
2412
|
};
|
|
2265
2413
|
function AppShell({ sidebar, topbar, children, aside, className = "", contentClassName = "", variant = "default" }) {
|
|
2266
|
-
return /* @__PURE__ */
|
|
2414
|
+
return /* @__PURE__ */ jsxs37("div", { className: `min-h-screen text-[var(--tapiz-text-primary)] ${variantClasses4[variant]} ${className}`, children: [
|
|
2267
2415
|
topbar,
|
|
2268
|
-
/* @__PURE__ */
|
|
2269
|
-
sidebar ? /* @__PURE__ */
|
|
2270
|
-
/* @__PURE__ */
|
|
2271
|
-
aside ? /* @__PURE__ */
|
|
2416
|
+
/* @__PURE__ */ jsxs37("div", { className: "mx-auto flex w-full max-w-[1600px]", children: [
|
|
2417
|
+
sidebar ? /* @__PURE__ */ jsx53("aside", { className: "hidden min-h-[calc(100vh-1px)] w-72 shrink-0 border-r border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] lg:block", children: sidebar }) : null,
|
|
2418
|
+
/* @__PURE__ */ jsx53("main", { className: `min-w-0 flex-1 px-[var(--tapiz-space-page-x)] py-6 ${contentClassName}`, children }),
|
|
2419
|
+
aside ? /* @__PURE__ */ jsx53("aside", { className: "hidden w-80 shrink-0 border-l border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] xl:block", children: aside }) : null
|
|
2272
2420
|
] })
|
|
2273
2421
|
] });
|
|
2274
2422
|
}
|
|
2275
2423
|
|
|
2276
2424
|
// src/components/layout/SplitPane.tsx
|
|
2277
|
-
import { jsx as
|
|
2425
|
+
import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
2278
2426
|
var ratios = {
|
|
2279
2427
|
"50/50": "lg:grid-cols-2",
|
|
2280
2428
|
"60/40": "lg:grid-cols-[minmax(0,3fr)_minmax(320px,2fr)]",
|
|
2281
2429
|
"70/30": "lg:grid-cols-[minmax(0,7fr)_minmax(280px,3fr)]"
|
|
2282
2430
|
};
|
|
2283
2431
|
function SplitPane({ primary, secondary, ratio = "60/40", reverseOnMobile = false, className = "" }) {
|
|
2284
|
-
return /* @__PURE__ */
|
|
2285
|
-
/* @__PURE__ */
|
|
2286
|
-
/* @__PURE__ */
|
|
2432
|
+
return /* @__PURE__ */ jsxs38("div", { className: `grid gap-5 ${ratios[ratio]} ${className}`, children: [
|
|
2433
|
+
/* @__PURE__ */ jsx54("div", { className: reverseOnMobile ? "order-2 lg:order-1" : "", children: primary }),
|
|
2434
|
+
/* @__PURE__ */ jsx54("div", { className: reverseOnMobile ? "order-1 lg:order-2" : "", children: secondary })
|
|
2287
2435
|
] });
|
|
2288
2436
|
}
|
|
2289
2437
|
|
|
2290
2438
|
// src/components/layout/Stack.tsx
|
|
2291
|
-
import { jsx as
|
|
2439
|
+
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
2292
2440
|
var gapClasses = { xs: "gap-1", sm: "gap-2", md: "gap-4", lg: "gap-6", xl: "gap-8" };
|
|
2293
2441
|
var alignClasses = { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" };
|
|
2294
2442
|
var justifyClasses = { start: "justify-start", center: "justify-center", between: "justify-between", end: "justify-end" };
|
|
2295
2443
|
function Stack({ children, gap = "md", direction = "vertical", align = "stretch", justify = "start", wrap = false, className = "" }) {
|
|
2296
|
-
return /* @__PURE__ */
|
|
2444
|
+
return /* @__PURE__ */ jsx55("div", { className: `flex ${direction === "vertical" ? "flex-col" : "flex-row"} ${gapClasses[gap]} ${alignClasses[align]} ${justifyClasses[justify]} ${wrap ? "flex-wrap" : ""} ${className}`, children });
|
|
2297
2445
|
}
|
|
2298
2446
|
|
|
2299
2447
|
// src/components/layout/Cluster.tsx
|
|
2300
|
-
import { jsx as
|
|
2448
|
+
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
2301
2449
|
var gapClasses2 = { xs: "gap-1", sm: "gap-2", md: "gap-3", lg: "gap-5" };
|
|
2302
2450
|
var alignClasses2 = { start: "items-start", center: "items-center", end: "items-end" };
|
|
2303
2451
|
var justifyClasses2 = { start: "justify-start", center: "justify-center", between: "justify-between", end: "justify-end" };
|
|
2304
2452
|
function Cluster({ children, gap = "sm", align = "center", justify = "start", className = "" }) {
|
|
2305
|
-
return /* @__PURE__ */
|
|
2453
|
+
return /* @__PURE__ */ jsx56("div", { className: `flex flex-wrap ${gapClasses2[gap]} ${alignClasses2[align]} ${justifyClasses2[justify]} ${className}`, children });
|
|
2306
2454
|
}
|
|
2307
2455
|
|
|
2308
2456
|
// src/components/navigation/Breadcrumbs.tsx
|
|
2309
|
-
import { jsx as
|
|
2457
|
+
import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
2310
2458
|
function Breadcrumbs({ items, separator = "/", className = "" }) {
|
|
2311
|
-
return /* @__PURE__ */
|
|
2312
|
-
index > 0 ? /* @__PURE__ */
|
|
2313
|
-
item.href && !item.current ? /* @__PURE__ */
|
|
2459
|
+
return /* @__PURE__ */ jsx57("nav", { "aria-label": "Breadcrumb", className: `font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)] ${className}`, children: /* @__PURE__ */ jsx57("ol", { className: "flex flex-wrap items-center gap-2", children: items.map((item, index) => /* @__PURE__ */ jsxs39("li", { className: "flex items-center gap-2", children: [
|
|
2460
|
+
index > 0 ? /* @__PURE__ */ jsx57("span", { "aria-hidden": "true", className: "text-[var(--tapiz-text-disabled)]", children: separator }) : null,
|
|
2461
|
+
item.href && !item.current ? /* @__PURE__ */ jsx57("a", { className: "hover:text-[var(--tapiz-accent)]", href: item.href, children: item.label }) : /* @__PURE__ */ jsx57("span", { "aria-current": item.current ? "page" : void 0, className: item.current ? "text-[var(--tapiz-text-primary)]" : "", children: item.label })
|
|
2314
2462
|
] }, index)) }) });
|
|
2315
2463
|
}
|
|
2316
2464
|
|
|
2317
2465
|
// src/components/navigation/SidebarNav.tsx
|
|
2318
|
-
import { Fragment as
|
|
2466
|
+
import { Fragment as Fragment4, jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
2319
2467
|
function SidebarNav({ groups, header, footer, className = "" }) {
|
|
2320
|
-
return /* @__PURE__ */
|
|
2321
|
-
header ? /* @__PURE__ */
|
|
2322
|
-
/* @__PURE__ */
|
|
2323
|
-
group.label ? /* @__PURE__ */
|
|
2324
|
-
/* @__PURE__ */
|
|
2468
|
+
return /* @__PURE__ */ jsxs40("div", { className: `flex h-full min-h-screen flex-col bg-[var(--tapiz-bg-surface)] ${className}`, children: [
|
|
2469
|
+
header ? /* @__PURE__ */ jsx58("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-4", children: header }) : null,
|
|
2470
|
+
/* @__PURE__ */ jsx58("nav", { className: "flex-1 space-y-6 p-3", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs40("div", { children: [
|
|
2471
|
+
group.label ? /* @__PURE__ */ jsx58("div", { className: "mb-2 px-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: group.label }) : null,
|
|
2472
|
+
/* @__PURE__ */ jsx58("div", { className: "space-y-1", children: group.items.map((item, itemIndex) => /* @__PURE__ */ jsx58(SidebarNavLink, { item }, itemIndex)) })
|
|
2325
2473
|
] }, groupIndex)) }),
|
|
2326
|
-
footer ? /* @__PURE__ */
|
|
2474
|
+
footer ? /* @__PURE__ */ jsx58("div", { className: "border-t border-[var(--tapiz-border-subtle)] p-4", children: footer }) : null
|
|
2327
2475
|
] });
|
|
2328
2476
|
}
|
|
2329
2477
|
function SidebarNavLink({ item }) {
|
|
@@ -2332,29 +2480,29 @@ function SidebarNavLink({ item }) {
|
|
|
2332
2480
|
item.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-text-primary)] shadow-[inset_3px_0_0_var(--tapiz-accent)]" : "border-transparent text-[var(--tapiz-text-secondary)] hover:border-[var(--tapiz-border-subtle)] hover:bg-[var(--tapiz-bg-surface-muted)] hover:text-[var(--tapiz-text-primary)]",
|
|
2333
2481
|
item.disabled ? "pointer-events-none opacity-40" : ""
|
|
2334
2482
|
].filter(Boolean).join(" ");
|
|
2335
|
-
const content = /* @__PURE__ */
|
|
2336
|
-
item.icon ? /* @__PURE__ */
|
|
2337
|
-
/* @__PURE__ */
|
|
2338
|
-
item.badge ? /* @__PURE__ */
|
|
2483
|
+
const content = /* @__PURE__ */ jsxs40(Fragment4, { children: [
|
|
2484
|
+
item.icon ? /* @__PURE__ */ jsx58("span", { className: "grid size-5 place-items-center text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
|
|
2485
|
+
/* @__PURE__ */ jsx58("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
|
|
2486
|
+
item.badge ? /* @__PURE__ */ jsx58("span", { children: item.badge }) : null
|
|
2339
2487
|
] });
|
|
2340
|
-
return item.href ? /* @__PURE__ */
|
|
2488
|
+
return item.href ? /* @__PURE__ */ jsx58("a", { className, href: item.href, children: content }) : /* @__PURE__ */ jsx58("button", { type: "button", className, onClick: item.onClick, disabled: item.disabled, children: content });
|
|
2341
2489
|
}
|
|
2342
2490
|
|
|
2343
2491
|
// src/components/navigation/TopNav.tsx
|
|
2344
|
-
import { jsx as
|
|
2492
|
+
import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
2345
2493
|
function TopNav({ brand, links = [], actions, className = "", sticky = true }) {
|
|
2346
|
-
return /* @__PURE__ */
|
|
2347
|
-
brand ? /* @__PURE__ */
|
|
2348
|
-
/* @__PURE__ */
|
|
2494
|
+
return /* @__PURE__ */ jsx59("header", { className: `${sticky ? "sticky top-0 z-40" : ""} border-b border-[var(--tapiz-border-subtle)] bg-[color-mix(in_srgb,var(--tapiz-bg-surface)_88%,transparent)] backdrop-blur-xl ${className}`, children: /* @__PURE__ */ jsxs41("div", { className: "mx-auto flex h-16 max-w-[1600px] items-center gap-6 px-[var(--tapiz-space-page-x)]", children: [
|
|
2495
|
+
brand ? /* @__PURE__ */ jsx59("div", { className: "shrink-0", children: brand }) : null,
|
|
2496
|
+
/* @__PURE__ */ jsx59("nav", { className: "hidden items-center gap-1 md:flex", children: links.map((link, index) => {
|
|
2349
2497
|
const cls = `border px-3 py-1.5 text-sm font-medium ${link.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] text-[var(--tapiz-text-primary)]" : "border-transparent text-[var(--tapiz-text-secondary)] hover:border-[var(--tapiz-border-subtle)] hover:text-[var(--tapiz-text-primary)]"}`;
|
|
2350
|
-
return link.href ? /* @__PURE__ */
|
|
2498
|
+
return link.href ? /* @__PURE__ */ jsx59("a", { href: link.href, className: cls, children: link.label }, index) : /* @__PURE__ */ jsx59("button", { type: "button", onClick: link.onClick, className: cls, children: link.label }, index);
|
|
2351
2499
|
}) }),
|
|
2352
|
-
actions ? /* @__PURE__ */
|
|
2500
|
+
actions ? /* @__PURE__ */ jsx59("div", { className: "ml-auto flex items-center gap-2", children: actions }) : null
|
|
2353
2501
|
] }) });
|
|
2354
2502
|
}
|
|
2355
2503
|
|
|
2356
2504
|
// src/components/disclosure/Tabs.tsx
|
|
2357
|
-
import { jsx as
|
|
2505
|
+
import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
2358
2506
|
var variants = {
|
|
2359
2507
|
line: "border-b border-[var(--tapiz-border-subtle)]",
|
|
2360
2508
|
boxed: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-1",
|
|
@@ -2362,10 +2510,10 @@ var variants = {
|
|
|
2362
2510
|
};
|
|
2363
2511
|
function Tabs({ items, activeId, onChange, className = "", variant = "line" }) {
|
|
2364
2512
|
const active = items.find((item) => item.id === activeId) ?? items[0];
|
|
2365
|
-
return /* @__PURE__ */
|
|
2366
|
-
/* @__PURE__ */
|
|
2513
|
+
return /* @__PURE__ */ jsxs42("div", { className, children: [
|
|
2514
|
+
/* @__PURE__ */ jsx60("div", { role: "tablist", className: `flex flex-wrap gap-1 ${variants[variant]}`, children: items.map((item) => {
|
|
2367
2515
|
const selected = item.id === active?.id;
|
|
2368
|
-
return /* @__PURE__ */
|
|
2516
|
+
return /* @__PURE__ */ jsxs42(
|
|
2369
2517
|
"button",
|
|
2370
2518
|
{
|
|
2371
2519
|
type: "button",
|
|
@@ -2382,17 +2530,17 @@ function Tabs({ items, activeId, onChange, className = "", variant = "line" }) {
|
|
|
2382
2530
|
item.id
|
|
2383
2531
|
);
|
|
2384
2532
|
}) }),
|
|
2385
|
-
/* @__PURE__ */
|
|
2533
|
+
/* @__PURE__ */ jsx60("div", { role: "tabpanel", className: "pt-4", children: active?.content })
|
|
2386
2534
|
] });
|
|
2387
2535
|
}
|
|
2388
2536
|
|
|
2389
2537
|
// src/components/disclosure/Accordion.tsx
|
|
2390
|
-
import { jsx as
|
|
2538
|
+
import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
2391
2539
|
function Accordion({ items, openIds = [], onToggle, className = "" }) {
|
|
2392
|
-
return /* @__PURE__ */
|
|
2540
|
+
return /* @__PURE__ */ jsx61("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item) => {
|
|
2393
2541
|
const open = openIds.includes(item.id);
|
|
2394
|
-
return /* @__PURE__ */
|
|
2395
|
-
/* @__PURE__ */
|
|
2542
|
+
return /* @__PURE__ */ jsxs43("section", { children: [
|
|
2543
|
+
/* @__PURE__ */ jsxs43(
|
|
2396
2544
|
"button",
|
|
2397
2545
|
{
|
|
2398
2546
|
type: "button",
|
|
@@ -2401,21 +2549,21 @@ function Accordion({ items, openIds = [], onToggle, className = "" }) {
|
|
|
2401
2549
|
onClick: () => onToggle?.(item.id),
|
|
2402
2550
|
className: "flex w-full items-center justify-between gap-4 px-4 py-3 text-left disabled:opacity-40",
|
|
2403
2551
|
children: [
|
|
2404
|
-
/* @__PURE__ */
|
|
2405
|
-
/* @__PURE__ */
|
|
2552
|
+
/* @__PURE__ */ jsx61("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
2553
|
+
/* @__PURE__ */ jsxs43("span", { className: "flex items-center gap-3 text-[var(--tapiz-text-muted)]", children: [
|
|
2406
2554
|
item.meta,
|
|
2407
|
-
/* @__PURE__ */
|
|
2555
|
+
/* @__PURE__ */ jsx61("span", { "aria-hidden": "true", className: "font-mono text-lg", children: open ? "\u2212" : "+" })
|
|
2408
2556
|
] })
|
|
2409
2557
|
]
|
|
2410
2558
|
}
|
|
2411
2559
|
),
|
|
2412
|
-
open ? /* @__PURE__ */
|
|
2560
|
+
open ? /* @__PURE__ */ jsx61("div", { className: "border-t border-[var(--tapiz-border-subtle)] px-4 py-4 text-sm text-[var(--tapiz-text-secondary)]", children: item.content }) : null
|
|
2413
2561
|
] }, item.id);
|
|
2414
2562
|
}) });
|
|
2415
2563
|
}
|
|
2416
2564
|
|
|
2417
2565
|
// src/components/disclosure/Stepper.tsx
|
|
2418
|
-
import { jsx as
|
|
2566
|
+
import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
2419
2567
|
var tone = {
|
|
2420
2568
|
complete: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)] text-[var(--tapiz-success)]",
|
|
2421
2569
|
current: "border-[var(--tapiz-accent)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-accent)]",
|
|
@@ -2423,65 +2571,65 @@ var tone = {
|
|
|
2423
2571
|
error: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]"
|
|
2424
2572
|
};
|
|
2425
2573
|
function Stepper({ steps, orientation = "horizontal", className = "" }) {
|
|
2426
|
-
return /* @__PURE__ */
|
|
2574
|
+
return /* @__PURE__ */ jsx62("ol", { className: `grid gap-3 ${orientation === "horizontal" ? "md:grid-cols-[repeat(auto-fit,minmax(0,1fr))]" : ""} ${className}`, children: steps.map((step, index) => {
|
|
2427
2575
|
const status = step.status ?? "upcoming";
|
|
2428
|
-
return /* @__PURE__ */
|
|
2429
|
-
/* @__PURE__ */
|
|
2430
|
-
/* @__PURE__ */
|
|
2431
|
-
/* @__PURE__ */
|
|
2432
|
-
step.description ? /* @__PURE__ */
|
|
2576
|
+
return /* @__PURE__ */ jsxs44("li", { className: "flex gap-3", children: [
|
|
2577
|
+
/* @__PURE__ */ jsx62("span", { className: `grid size-8 shrink-0 place-items-center border font-mono text-xs font-bold ${tone[status]}`, children: status === "complete" ? "\u2713" : index + 1 }),
|
|
2578
|
+
/* @__PURE__ */ jsxs44("span", { className: "min-w-0", children: [
|
|
2579
|
+
/* @__PURE__ */ jsx62("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: step.label }),
|
|
2580
|
+
step.description ? /* @__PURE__ */ jsx62("span", { className: "mt-1 block text-xs text-[var(--tapiz-text-muted)]", children: step.description }) : null
|
|
2433
2581
|
] })
|
|
2434
2582
|
] }, step.id);
|
|
2435
2583
|
}) });
|
|
2436
2584
|
}
|
|
2437
2585
|
|
|
2438
2586
|
// src/components/overlays/Drawer.tsx
|
|
2439
|
-
import { jsx as
|
|
2587
|
+
import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
2440
2588
|
function Drawer({ open, onClose, title, description, children, footer, side = "right", className = "" }) {
|
|
2441
2589
|
if (!open) return null;
|
|
2442
|
-
return /* @__PURE__ */
|
|
2443
|
-
/* @__PURE__ */
|
|
2444
|
-
/* @__PURE__ */
|
|
2445
|
-
/* @__PURE__ */
|
|
2446
|
-
/* @__PURE__ */
|
|
2447
|
-
title ? /* @__PURE__ */
|
|
2448
|
-
description ? /* @__PURE__ */
|
|
2590
|
+
return /* @__PURE__ */ jsxs45("div", { className: "fixed inset-0 z-50", children: [
|
|
2591
|
+
/* @__PURE__ */ jsx63("button", { type: "button", "aria-label": "Close drawer", className: "absolute inset-0 bg-(--tapiz-bg-overlay)", onClick: onClose }),
|
|
2592
|
+
/* @__PURE__ */ jsxs45("section", { className: `absolute top-0 h-full w-full max-w-md border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) shadow-(--tapiz-shadow-lg) ${side === "right" ? "right-0 border-l" : "left-0 border-r"} ${className}`, children: [
|
|
2593
|
+
/* @__PURE__ */ jsxs45("header", { className: "flex items-start justify-between gap-4 border-b border-(--tapiz-border-subtle) p-5", children: [
|
|
2594
|
+
/* @__PURE__ */ jsxs45("div", { children: [
|
|
2595
|
+
title ? /* @__PURE__ */ jsx63("h2", { className: "text-lg font-semibold text-(--tapiz-text-primary)", children: title }) : null,
|
|
2596
|
+
description ? /* @__PURE__ */ jsx63("p", { className: "mt-1 text-sm text-(--tapiz-text-muted)", children: description }) : null
|
|
2449
2597
|
] }),
|
|
2450
|
-
/* @__PURE__ */
|
|
2598
|
+
/* @__PURE__ */ jsx63("button", { type: "button", onClick: onClose, className: "border border-(--tapiz-border-subtle) px-2 py-1 font-mono text-sm text-(--tapiz-text-muted) hover:text-(--tapiz-text-primary)", children: "\xD7" })
|
|
2451
2599
|
] }),
|
|
2452
|
-
/* @__PURE__ */
|
|
2453
|
-
footer ? /* @__PURE__ */
|
|
2600
|
+
/* @__PURE__ */ jsx63("div", { className: "max-h-[calc(100vh-9rem)] overflow-auto p-5", children }),
|
|
2601
|
+
footer ? /* @__PURE__ */ jsx63("footer", { className: "border-t border-(--tapiz-border-subtle) p-4", children: footer }) : null
|
|
2454
2602
|
] })
|
|
2455
2603
|
] });
|
|
2456
2604
|
}
|
|
2457
2605
|
|
|
2458
2606
|
// src/components/overlays/Popover.tsx
|
|
2459
|
-
import { jsx as
|
|
2607
|
+
import { jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
2460
2608
|
function Popover({ trigger, children, open = false, align = "start", className = "" }) {
|
|
2461
|
-
return /* @__PURE__ */
|
|
2609
|
+
return /* @__PURE__ */ jsxs46("div", { className: `relative inline-block ${className}`, children: [
|
|
2462
2610
|
trigger,
|
|
2463
|
-
open ? /* @__PURE__ */
|
|
2611
|
+
open ? /* @__PURE__ */ jsx64("div", { className: `absolute top-full z-40 mt-2 min-w-64 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-2 shadow-[var(--tapiz-shadow-md)] ${align === "end" ? "right-0" : "left-0"}`, children }) : null
|
|
2464
2612
|
] });
|
|
2465
2613
|
}
|
|
2466
2614
|
|
|
2467
2615
|
// src/components/overlays/CommandMenu.tsx
|
|
2468
|
-
import { jsx as
|
|
2616
|
+
import { jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
2469
2617
|
function CommandMenu({ open, onClose, query = "", onQueryChange, groups, placeholder = "Search commands\u2026", empty = "No commands found." }) {
|
|
2470
2618
|
if (!open) return null;
|
|
2471
2619
|
const hasItems = groups.some((group) => group.items.length > 0);
|
|
2472
|
-
return /* @__PURE__ */
|
|
2473
|
-
/* @__PURE__ */
|
|
2474
|
-
/* @__PURE__ */
|
|
2475
|
-
!hasItems ? /* @__PURE__ */
|
|
2476
|
-
groups.map((group, groupIndex) => /* @__PURE__ */
|
|
2477
|
-
group.label ? /* @__PURE__ */
|
|
2478
|
-
group.items.map((item) => /* @__PURE__ */
|
|
2479
|
-
item.icon ? /* @__PURE__ */
|
|
2480
|
-
/* @__PURE__ */
|
|
2481
|
-
/* @__PURE__ */
|
|
2482
|
-
item.description ? /* @__PURE__ */
|
|
2620
|
+
return /* @__PURE__ */ jsx65("div", { className: "fixed inset-0 z-50 grid place-items-start bg-[var(--tapiz-bg-overlay)] px-4 pt-[12vh]", onClick: onClose, children: /* @__PURE__ */ jsxs47("div", { className: "mx-auto w-full max-w-2xl border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-brutal-lg)]", onClick: (e) => e.stopPropagation(), children: [
|
|
2621
|
+
/* @__PURE__ */ jsx65("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-3", children: /* @__PURE__ */ jsx65(SearchInput, { value: query, onChange: (value) => onQueryChange?.(value), placeholder, autoFocus: true }) }),
|
|
2622
|
+
/* @__PURE__ */ jsxs47("div", { className: "max-h-[50vh] overflow-auto p-2", children: [
|
|
2623
|
+
!hasItems ? /* @__PURE__ */ jsx65("div", { className: "p-6 text-center text-sm text-[var(--tapiz-text-muted)]", children: empty }) : null,
|
|
2624
|
+
groups.map((group, groupIndex) => /* @__PURE__ */ jsxs47("div", { className: "py-2", children: [
|
|
2625
|
+
group.label ? /* @__PURE__ */ jsx65("div", { className: "px-2 pb-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: group.label }) : null,
|
|
2626
|
+
group.items.map((item) => /* @__PURE__ */ jsxs47("button", { type: "button", disabled: item.disabled, onClick: item.onSelect, className: "flex w-full items-center gap-3 border border-transparent px-3 py-2 text-left hover:border-[var(--tapiz-border-subtle)] hover:bg-[var(--tapiz-bg-surface-muted)] disabled:opacity-40", children: [
|
|
2627
|
+
item.icon ? /* @__PURE__ */ jsx65("span", { className: "grid size-8 place-items-center border border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
|
|
2628
|
+
/* @__PURE__ */ jsxs47("span", { className: "min-w-0 flex-1", children: [
|
|
2629
|
+
/* @__PURE__ */ jsx65("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.label }),
|
|
2630
|
+
item.description ? /* @__PURE__ */ jsx65("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
2483
2631
|
] }),
|
|
2484
|
-
item.shortcut ? /* @__PURE__ */
|
|
2632
|
+
item.shortcut ? /* @__PURE__ */ jsx65("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.shortcut }) : null
|
|
2485
2633
|
] }, item.id))
|
|
2486
2634
|
] }, groupIndex))
|
|
2487
2635
|
] })
|
|
@@ -2489,23 +2637,23 @@ function CommandMenu({ open, onClose, query = "", onQueryChange, groups, placeho
|
|
|
2489
2637
|
}
|
|
2490
2638
|
|
|
2491
2639
|
// src/components/forms/FormField.tsx
|
|
2492
|
-
import { jsx as
|
|
2640
|
+
import { jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
2493
2641
|
function FormField({ label, hint, error, required, htmlFor, children, className = "" }) {
|
|
2494
|
-
return /* @__PURE__ */
|
|
2495
|
-
label ? /* @__PURE__ */
|
|
2642
|
+
return /* @__PURE__ */ jsxs48("div", { className: `space-y-1.5 ${className}`, children: [
|
|
2643
|
+
label ? /* @__PURE__ */ jsxs48(FieldLabel, { htmlFor, children: [
|
|
2496
2644
|
label,
|
|
2497
2645
|
required ? " *" : ""
|
|
2498
2646
|
] }) : null,
|
|
2499
2647
|
children,
|
|
2500
|
-
error ? /* @__PURE__ */
|
|
2648
|
+
error ? /* @__PURE__ */ jsx66(FormError, { message: String(error) }) : hint ? /* @__PURE__ */ jsx66(FieldHint, { children: hint }) : null
|
|
2501
2649
|
] });
|
|
2502
2650
|
}
|
|
2503
2651
|
|
|
2504
2652
|
// src/components/forms/Switch.tsx
|
|
2505
|
-
import { jsx as
|
|
2653
|
+
import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
2506
2654
|
function Switch({ checked = false, onChange, disabled, label, description, className = "" }) {
|
|
2507
|
-
return /* @__PURE__ */
|
|
2508
|
-
/* @__PURE__ */
|
|
2655
|
+
return /* @__PURE__ */ jsxs49("label", { className: `flex cursor-pointer items-start gap-3 ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`, children: [
|
|
2656
|
+
/* @__PURE__ */ jsx67(
|
|
2509
2657
|
"button",
|
|
2510
2658
|
{
|
|
2511
2659
|
type: "button",
|
|
@@ -2514,22 +2662,22 @@ function Switch({ checked = false, onChange, disabled, label, description, class
|
|
|
2514
2662
|
disabled,
|
|
2515
2663
|
onClick: () => onChange?.(!checked),
|
|
2516
2664
|
className: `relative mt-0.5 h-6 w-11 border border-[var(--tapiz-border-strong)] ${checked ? "bg-[var(--tapiz-accent)]" : "bg-[var(--tapiz-bg-surface-muted)]"}`,
|
|
2517
|
-
children: /* @__PURE__ */
|
|
2665
|
+
children: /* @__PURE__ */ jsx67("span", { className: `absolute top-0.5 size-4 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] transition-transform ${checked ? "left-5" : "left-0.5"}` })
|
|
2518
2666
|
}
|
|
2519
2667
|
),
|
|
2520
|
-
label || description ? /* @__PURE__ */
|
|
2521
|
-
label ? /* @__PURE__ */
|
|
2522
|
-
description ? /* @__PURE__ */
|
|
2668
|
+
label || description ? /* @__PURE__ */ jsxs49("span", { children: [
|
|
2669
|
+
label ? /* @__PURE__ */ jsx67("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
|
|
2670
|
+
description ? /* @__PURE__ */ jsx67("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
2523
2671
|
] }) : null
|
|
2524
2672
|
] });
|
|
2525
2673
|
}
|
|
2526
2674
|
|
|
2527
2675
|
// src/components/forms/ToggleGroup.tsx
|
|
2528
|
-
import { jsx as
|
|
2676
|
+
import { jsx as jsx68 } from "react/jsx-runtime";
|
|
2529
2677
|
function ToggleGroup({ options, value, onChange, className = "", fullWidth = false }) {
|
|
2530
|
-
return /* @__PURE__ */
|
|
2678
|
+
return /* @__PURE__ */ jsx68("div", { className: `inline-flex border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] p-1 ${fullWidth ? "w-full" : ""} ${className}`, children: options.map((option) => {
|
|
2531
2679
|
const selected = option.value === value;
|
|
2532
|
-
return /* @__PURE__ */
|
|
2680
|
+
return /* @__PURE__ */ jsx68(
|
|
2533
2681
|
"button",
|
|
2534
2682
|
{
|
|
2535
2683
|
type: "button",
|
|
@@ -2544,17 +2692,17 @@ function ToggleGroup({ options, value, onChange, className = "", fullWidth = fal
|
|
|
2544
2692
|
}
|
|
2545
2693
|
|
|
2546
2694
|
// src/components/forms/InputGroup.tsx
|
|
2547
|
-
import { jsx as
|
|
2695
|
+
import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
2548
2696
|
function InputGroup({ prefix, suffix, children, className = "" }) {
|
|
2549
|
-
return /* @__PURE__ */
|
|
2550
|
-
prefix ? /* @__PURE__ */
|
|
2551
|
-
/* @__PURE__ */
|
|
2552
|
-
suffix ? /* @__PURE__ */
|
|
2697
|
+
return /* @__PURE__ */ jsxs50("div", { className: `flex items-stretch border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] focus-within:border-[var(--tapiz-border-focus)] focus-within:shadow-[inset_3px_0_0_var(--tapiz-signal)] ${className}`, children: [
|
|
2698
|
+
prefix ? /* @__PURE__ */ jsx69("div", { className: "flex items-center border-r border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: prefix }) : null,
|
|
2699
|
+
/* @__PURE__ */ jsx69("div", { className: "min-w-0 flex-1 [&_input]:border-0 [&_input]:shadow-none [&_input]:focus:shadow-none", children }),
|
|
2700
|
+
suffix ? /* @__PURE__ */ jsx69("div", { className: "flex items-center border-l border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: suffix }) : null
|
|
2553
2701
|
] });
|
|
2554
2702
|
}
|
|
2555
2703
|
|
|
2556
2704
|
// src/components/feedback/Alert.tsx
|
|
2557
|
-
import { jsx as
|
|
2705
|
+
import { jsx as jsx70, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
2558
2706
|
var toneClasses = {
|
|
2559
2707
|
info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)] text-[var(--tapiz-info)]",
|
|
2560
2708
|
success: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)] text-[var(--tapiz-success)]",
|
|
@@ -2563,18 +2711,18 @@ var toneClasses = {
|
|
|
2563
2711
|
neutral: "border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-secondary)]"
|
|
2564
2712
|
};
|
|
2565
2713
|
function Alert2({ tone: tone2 = "info", title, children, icon, actions, className = "" }) {
|
|
2566
|
-
return /* @__PURE__ */
|
|
2567
|
-
icon ? /* @__PURE__ */
|
|
2568
|
-
/* @__PURE__ */
|
|
2569
|
-
title ? /* @__PURE__ */
|
|
2570
|
-
children ? /* @__PURE__ */
|
|
2714
|
+
return /* @__PURE__ */ jsxs51("div", { className: `flex gap-3 border p-4 ${toneClasses[tone2]} ${className}`, children: [
|
|
2715
|
+
icon ? /* @__PURE__ */ jsx70("div", { className: "mt-0.5 shrink-0", children: icon }) : null,
|
|
2716
|
+
/* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1", children: [
|
|
2717
|
+
title ? /* @__PURE__ */ jsx70("div", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
2718
|
+
children ? /* @__PURE__ */ jsx70("div", { className: "mt-1 text-sm text-[var(--tapiz-text-secondary)]", children }) : null
|
|
2571
2719
|
] }),
|
|
2572
|
-
actions ? /* @__PURE__ */
|
|
2720
|
+
actions ? /* @__PURE__ */ jsx70("div", { className: "shrink-0", children: actions }) : null
|
|
2573
2721
|
] });
|
|
2574
2722
|
}
|
|
2575
2723
|
|
|
2576
2724
|
// src/components/feedback/Progress.tsx
|
|
2577
|
-
import { jsx as
|
|
2725
|
+
import { jsx as jsx71, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
2578
2726
|
var tones = {
|
|
2579
2727
|
accent: "bg-[var(--tapiz-accent)]",
|
|
2580
2728
|
success: "bg-[var(--tapiz-success)]",
|
|
@@ -2583,34 +2731,34 @@ var tones = {
|
|
|
2583
2731
|
};
|
|
2584
2732
|
function Progress({ value, max = 100, label, showValue = false, tone: tone2 = "accent", className = "" }) {
|
|
2585
2733
|
const percentage = Math.max(0, Math.min(100, value / max * 100));
|
|
2586
|
-
return /* @__PURE__ */
|
|
2587
|
-
label || showValue ? /* @__PURE__ */
|
|
2588
|
-
label ? /* @__PURE__ */
|
|
2589
|
-
showValue ? /* @__PURE__ */
|
|
2734
|
+
return /* @__PURE__ */ jsxs52("div", { className, children: [
|
|
2735
|
+
label || showValue ? /* @__PURE__ */ jsxs52("div", { className: "mb-1 flex items-center justify-between gap-3 text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
2736
|
+
label ? /* @__PURE__ */ jsx71("span", { children: label }) : /* @__PURE__ */ jsx71("span", {}),
|
|
2737
|
+
showValue ? /* @__PURE__ */ jsxs52("span", { className: "font-mono", children: [
|
|
2590
2738
|
Math.round(percentage),
|
|
2591
2739
|
"%"
|
|
2592
2740
|
] }) : null
|
|
2593
2741
|
] }) : null,
|
|
2594
|
-
/* @__PURE__ */
|
|
2742
|
+
/* @__PURE__ */ jsx71("div", { className: "h-2 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx71("div", { className: `h-full ${tones[tone2]}`, style: { width: `${percentage}%` } }) })
|
|
2595
2743
|
] });
|
|
2596
2744
|
}
|
|
2597
2745
|
|
|
2598
2746
|
// src/components/shared/Avatar.tsx
|
|
2599
|
-
import { jsx as
|
|
2747
|
+
import { jsx as jsx72 } from "react/jsx-runtime";
|
|
2600
2748
|
var sizes = { xs: "size-6 text-[10px]", sm: "size-8 text-xs", md: "size-10 text-sm", lg: "size-14 text-base" };
|
|
2601
2749
|
function Avatar({ src, name = "?", size = "md", className = "" }) {
|
|
2602
2750
|
const initials = name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("") || "?";
|
|
2603
|
-
return src ? /* @__PURE__ */
|
|
2751
|
+
return src ? /* @__PURE__ */ jsx72("img", { src, alt: name, className: `border border-[var(--tapiz-border-strong)] object-cover ${sizes[size]} ${className}` }) : /* @__PURE__ */ jsx72("span", { className: `inline-grid place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] font-mono font-bold text-[var(--tapiz-accent)] ${sizes[size]} ${className}`, children: initials });
|
|
2604
2752
|
}
|
|
2605
2753
|
|
|
2606
2754
|
// src/components/shared/Kbd.tsx
|
|
2607
|
-
import { jsx as
|
|
2755
|
+
import { jsx as jsx73 } from "react/jsx-runtime";
|
|
2608
2756
|
function Kbd({ children, className = "" }) {
|
|
2609
|
-
return /* @__PURE__ */
|
|
2757
|
+
return /* @__PURE__ */ jsx73("kbd", { className: `inline-flex min-w-5 items-center justify-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] px-1.5 py-0.5 font-mono text-[10px] font-bold text-[var(--tapiz-text-secondary)] shadow-[1px_1px_0_var(--tapiz-border-strong)] ${className}`, children });
|
|
2610
2758
|
}
|
|
2611
2759
|
|
|
2612
2760
|
// src/components/shared/Timeline.tsx
|
|
2613
|
-
import { jsx as
|
|
2761
|
+
import { jsx as jsx74, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
2614
2762
|
var tones2 = {
|
|
2615
2763
|
neutral: "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-muted)]",
|
|
2616
2764
|
info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)] text-[var(--tapiz-info)]",
|
|
@@ -2619,94 +2767,94 @@ var tones2 = {
|
|
|
2619
2767
|
danger: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]"
|
|
2620
2768
|
};
|
|
2621
2769
|
function Timeline({ items, className = "" }) {
|
|
2622
|
-
return /* @__PURE__ */
|
|
2623
|
-
/* @__PURE__ */
|
|
2624
|
-
/* @__PURE__ */
|
|
2625
|
-
/* @__PURE__ */
|
|
2626
|
-
/* @__PURE__ */
|
|
2627
|
-
item.time ? /* @__PURE__ */
|
|
2770
|
+
return /* @__PURE__ */ jsx74("ol", { className: `relative space-y-4 before:absolute before:left-4 before:top-2 before:h-[calc(100%-1rem)] before:w-px before:bg-[var(--tapiz-border-subtle)] ${className}`, children: items.map((item) => /* @__PURE__ */ jsxs53("li", { className: "relative flex gap-3", children: [
|
|
2771
|
+
/* @__PURE__ */ jsx74("span", { className: `z-10 grid size-8 shrink-0 place-items-center border text-xs ${tones2[item.tone ?? "neutral"]}`, children: item.icon ?? "\u2022" }),
|
|
2772
|
+
/* @__PURE__ */ jsxs53("span", { className: "min-w-0 flex-1 pb-2", children: [
|
|
2773
|
+
/* @__PURE__ */ jsxs53("span", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
|
|
2774
|
+
/* @__PURE__ */ jsx74("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
2775
|
+
item.time ? /* @__PURE__ */ jsx74("span", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
2628
2776
|
] }),
|
|
2629
|
-
item.description ? /* @__PURE__ */
|
|
2777
|
+
item.description ? /* @__PURE__ */ jsx74("span", { className: "mt-1 block text-sm text-[var(--tapiz-text-secondary)]", children: item.description }) : null
|
|
2630
2778
|
] })
|
|
2631
2779
|
] }, item.id)) });
|
|
2632
2780
|
}
|
|
2633
2781
|
|
|
2634
2782
|
// src/components/shared/KeyValueList.tsx
|
|
2635
|
-
import { jsx as
|
|
2783
|
+
import { jsx as jsx75, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
2636
2784
|
function KeyValueList({ items, className = "", density = "normal" }) {
|
|
2637
|
-
return /* @__PURE__ */
|
|
2638
|
-
/* @__PURE__ */
|
|
2639
|
-
/* @__PURE__ */
|
|
2640
|
-
/* @__PURE__ */
|
|
2641
|
-
item.description ? /* @__PURE__ */
|
|
2785
|
+
return /* @__PURE__ */ jsx75("dl", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs54("div", { className: `grid gap-2 ${density === "compact" ? "p-3 md:grid-cols-[160px_1fr]" : "p-4 md:grid-cols-[220px_1fr]"}`, children: [
|
|
2786
|
+
/* @__PURE__ */ jsx75("dt", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: item.keyLabel }),
|
|
2787
|
+
/* @__PURE__ */ jsxs54("dd", { children: [
|
|
2788
|
+
/* @__PURE__ */ jsx75("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.value }),
|
|
2789
|
+
item.description ? /* @__PURE__ */ jsx75("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
2642
2790
|
] })
|
|
2643
2791
|
] }, index)) });
|
|
2644
2792
|
}
|
|
2645
2793
|
|
|
2646
2794
|
// src/components/shared/CodeBlock.tsx
|
|
2647
|
-
import { jsx as
|
|
2795
|
+
import { jsx as jsx76, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
2648
2796
|
function CodeBlock({ children, language, title, actions, className = "" }) {
|
|
2649
|
-
return /* @__PURE__ */
|
|
2650
|
-
title || language || actions ? /* @__PURE__ */
|
|
2651
|
-
/* @__PURE__ */
|
|
2797
|
+
return /* @__PURE__ */ jsxs55("figure", { className: `overflow-hidden border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
|
|
2798
|
+
title || language || actions ? /* @__PURE__ */ jsxs55("figcaption", { className: "flex items-center justify-between gap-3 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] px-3 py-2", children: [
|
|
2799
|
+
/* @__PURE__ */ jsx76("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title ?? language }),
|
|
2652
2800
|
actions
|
|
2653
2801
|
] }) : null,
|
|
2654
|
-
/* @__PURE__ */
|
|
2802
|
+
/* @__PURE__ */ jsx76("pre", { className: "overflow-auto p-4 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children: /* @__PURE__ */ jsx76("code", { children }) })
|
|
2655
2803
|
] });
|
|
2656
2804
|
}
|
|
2657
2805
|
|
|
2658
2806
|
// src/components/marketing/LogoCloud.tsx
|
|
2659
|
-
import { jsx as
|
|
2807
|
+
import { jsx as jsx77, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
2660
2808
|
function LogoCloud({ title, items, className = "" }) {
|
|
2661
|
-
return /* @__PURE__ */
|
|
2662
|
-
title ? /* @__PURE__ */
|
|
2663
|
-
/* @__PURE__ */
|
|
2809
|
+
return /* @__PURE__ */ jsx77("section", { className: `border-y border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] py-8 ${className}`, children: /* @__PURE__ */ jsxs56("div", { className: "mx-auto max-w-7xl px-[var(--tapiz-space-page-x)]", children: [
|
|
2810
|
+
title ? /* @__PURE__ */ jsx77("p", { className: "mb-6 text-center font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title }) : null,
|
|
2811
|
+
/* @__PURE__ */ jsx77("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4 lg:grid-cols-6", children: items.map((item) => /* @__PURE__ */ jsx77("div", { className: "grid min-h-20 place-items-center border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] px-4 text-center text-sm font-semibold text-[var(--tapiz-text-secondary)]", children: item.logo ?? item.name }, item.name)) })
|
|
2664
2812
|
] }) });
|
|
2665
2813
|
}
|
|
2666
2814
|
|
|
2667
2815
|
// src/components/marketing/TestimonialCard.tsx
|
|
2668
|
-
import { jsx as
|
|
2816
|
+
import { jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
2669
2817
|
function TestimonialCard({ quote, author, role, avatarSrc, className = "", variant = "surface" }) {
|
|
2670
|
-
return /* @__PURE__ */
|
|
2671
|
-
/* @__PURE__ */
|
|
2818
|
+
return /* @__PURE__ */ jsxs57("figure", { className: `border bg-[var(--tapiz-bg-surface)] p-5 ${variant === "brutal" ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal)]" : "border-[var(--tapiz-border-subtle)] shadow-[var(--tapiz-shadow-sm)]"} ${className}`, children: [
|
|
2819
|
+
/* @__PURE__ */ jsxs57("blockquote", { className: "text-base leading-7 text-[var(--tapiz-text-secondary)]", children: [
|
|
2672
2820
|
"\u201C",
|
|
2673
2821
|
quote,
|
|
2674
2822
|
"\u201D"
|
|
2675
2823
|
] }),
|
|
2676
|
-
/* @__PURE__ */
|
|
2677
|
-
/* @__PURE__ */
|
|
2678
|
-
/* @__PURE__ */
|
|
2679
|
-
/* @__PURE__ */
|
|
2680
|
-
role ? /* @__PURE__ */
|
|
2824
|
+
/* @__PURE__ */ jsxs57("figcaption", { className: "mt-5 flex items-center gap-3", children: [
|
|
2825
|
+
/* @__PURE__ */ jsx78(Avatar, { name: author, src: avatarSrc, size: "sm" }),
|
|
2826
|
+
/* @__PURE__ */ jsxs57("span", { children: [
|
|
2827
|
+
/* @__PURE__ */ jsx78("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: author }),
|
|
2828
|
+
role ? /* @__PURE__ */ jsx78("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: role }) : null
|
|
2681
2829
|
] })
|
|
2682
2830
|
] })
|
|
2683
2831
|
] });
|
|
2684
2832
|
}
|
|
2685
2833
|
|
|
2686
2834
|
// src/components/marketing/PricingCard.tsx
|
|
2687
|
-
import { jsx as
|
|
2835
|
+
import { jsx as jsx79, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
2688
2836
|
function PricingCard({ name, price, description, features = [], cta, highlighted = false, className = "" }) {
|
|
2689
|
-
return /* @__PURE__ */
|
|
2690
|
-
/* @__PURE__ */
|
|
2691
|
-
/* @__PURE__ */
|
|
2692
|
-
description ? /* @__PURE__ */
|
|
2693
|
-
/* @__PURE__ */
|
|
2694
|
-
/* @__PURE__ */
|
|
2695
|
-
/* @__PURE__ */
|
|
2696
|
-
/* @__PURE__ */
|
|
2837
|
+
return /* @__PURE__ */ jsxs58("section", { className: `flex h-full flex-col border bg-[var(--tapiz-bg-surface)] p-6 ${highlighted ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal-lg)]" : "border-[var(--tapiz-border-subtle)] shadow-[var(--tapiz-shadow-sm)]"} ${className}`, children: [
|
|
2838
|
+
/* @__PURE__ */ jsxs58("div", { className: "flex-1", children: [
|
|
2839
|
+
/* @__PURE__ */ jsx79("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: name }),
|
|
2840
|
+
description ? /* @__PURE__ */ jsx79("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
|
|
2841
|
+
/* @__PURE__ */ jsx79("div", { className: "mt-6 text-4xl font-semibold tracking-tight text-[var(--tapiz-text-primary)]", children: price }),
|
|
2842
|
+
/* @__PURE__ */ jsx79("ul", { className: "mt-6 space-y-3 text-sm text-[var(--tapiz-text-secondary)]", children: features.map((feature, index) => /* @__PURE__ */ jsxs58("li", { className: "flex gap-2", children: [
|
|
2843
|
+
/* @__PURE__ */ jsx79("span", { className: "text-[var(--tapiz-success)]", children: "\u2713" }),
|
|
2844
|
+
/* @__PURE__ */ jsx79("span", { children: feature })
|
|
2697
2845
|
] }, index)) })
|
|
2698
2846
|
] }),
|
|
2699
|
-
/* @__PURE__ */
|
|
2847
|
+
/* @__PURE__ */ jsx79("div", { className: "mt-6", children: cta ?? /* @__PURE__ */ jsx79(Button, { variant: highlighted ? "primary" : "secondary", fullWidth: true, children: "Get started" }) })
|
|
2700
2848
|
] });
|
|
2701
2849
|
}
|
|
2702
2850
|
|
|
2703
2851
|
// src/components/marketing/StatsBand.tsx
|
|
2704
|
-
import { jsx as
|
|
2852
|
+
import { jsx as jsx80, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
2705
2853
|
function StatsBand({ items, className = "" }) {
|
|
2706
|
-
return /* @__PURE__ */
|
|
2707
|
-
/* @__PURE__ */
|
|
2708
|
-
/* @__PURE__ */
|
|
2709
|
-
item.description ? /* @__PURE__ */
|
|
2854
|
+
return /* @__PURE__ */ jsx80("section", { className: `border-y border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-inverse)] text-[var(--tapiz-text-inverse)] ${className}`, children: /* @__PURE__ */ jsx80("div", { className: "mx-auto grid max-w-7xl divide-y divide-[color-mix(in_srgb,var(--tapiz-text-inverse)_24%,transparent)] px-[var(--tapiz-space-page-x)] md:grid-cols-3 md:divide-x md:divide-y-0", children: items.map((item, index) => /* @__PURE__ */ jsxs59("div", { className: "p-6 md:p-8", children: [
|
|
2855
|
+
/* @__PURE__ */ jsx80("div", { className: "text-3xl font-semibold tracking-tight", children: item.value }),
|
|
2856
|
+
/* @__PURE__ */ jsx80("div", { className: "mt-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] opacity-70", children: item.label }),
|
|
2857
|
+
item.description ? /* @__PURE__ */ jsx80("div", { className: "mt-3 text-sm opacity-70", children: item.description }) : null
|
|
2710
2858
|
] }, index)) }) });
|
|
2711
2859
|
}
|
|
2712
2860
|
|
|
@@ -2745,7 +2893,7 @@ var tapizFrameworkPresets = {
|
|
|
2745
2893
|
};
|
|
2746
2894
|
|
|
2747
2895
|
// src/components/layout/Container.tsx
|
|
2748
|
-
import { jsx as
|
|
2896
|
+
import { jsx as jsx81 } from "react/jsx-runtime";
|
|
2749
2897
|
var sizeClasses2 = {
|
|
2750
2898
|
sm: "max-w-3xl",
|
|
2751
2899
|
md: "max-w-5xl",
|
|
@@ -2754,7 +2902,7 @@ var sizeClasses2 = {
|
|
|
2754
2902
|
full: "max-w-none"
|
|
2755
2903
|
};
|
|
2756
2904
|
function Container({ children, size = "lg", padded = true, className = "", style }) {
|
|
2757
|
-
return /* @__PURE__ */
|
|
2905
|
+
return /* @__PURE__ */ jsx81(
|
|
2758
2906
|
"div",
|
|
2759
2907
|
{
|
|
2760
2908
|
className: ["mx-auto w-full", sizeClasses2[size], padded ? "px-[var(--tapiz-space-page-x)]" : "", className].filter(Boolean).join(" "),
|
|
@@ -2765,7 +2913,7 @@ function Container({ children, size = "lg", padded = true, className = "", style
|
|
|
2765
2913
|
}
|
|
2766
2914
|
|
|
2767
2915
|
// src/components/layout/Surface.tsx
|
|
2768
|
-
import { jsx as
|
|
2916
|
+
import { jsx as jsx82 } from "react/jsx-runtime";
|
|
2769
2917
|
var variantClasses5 = {
|
|
2770
2918
|
canvas: "bg-[var(--tapiz-bg-page)] text-[var(--tapiz-text-primary)]",
|
|
2771
2919
|
surface: "bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-primary)]",
|
|
@@ -2782,7 +2930,7 @@ var paddingClasses2 = {
|
|
|
2782
2930
|
xl: "p-8"
|
|
2783
2931
|
};
|
|
2784
2932
|
function Surface({ children, variant = "surface", padding = "md", bordered = true, className = "", style }) {
|
|
2785
|
-
return /* @__PURE__ */
|
|
2933
|
+
return /* @__PURE__ */ jsx82(
|
|
2786
2934
|
"section",
|
|
2787
2935
|
{
|
|
2788
2936
|
className: [variantClasses5[variant], paddingClasses2[padding], bordered && variant !== "brutal" ? "border border-[var(--tapiz-border-subtle)]" : "", className].filter(Boolean).join(" "),
|
|
@@ -2793,23 +2941,23 @@ function Surface({ children, variant = "surface", padding = "md", bordered = tru
|
|
|
2793
2941
|
}
|
|
2794
2942
|
|
|
2795
2943
|
// src/components/layout/Divider.tsx
|
|
2796
|
-
import { jsx as
|
|
2944
|
+
import { jsx as jsx83, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
2797
2945
|
function Divider({ orientation = "horizontal", label, className = "" }) {
|
|
2798
2946
|
if (orientation === "vertical") {
|
|
2799
|
-
return /* @__PURE__ */
|
|
2947
|
+
return /* @__PURE__ */ jsx83("div", { className: `mx-2 min-h-6 w-px bg-[var(--tapiz-border-subtle)] ${className}`, "aria-hidden": "true" });
|
|
2800
2948
|
}
|
|
2801
2949
|
if (label) {
|
|
2802
|
-
return /* @__PURE__ */
|
|
2803
|
-
/* @__PURE__ */
|
|
2804
|
-
/* @__PURE__ */
|
|
2805
|
-
/* @__PURE__ */
|
|
2950
|
+
return /* @__PURE__ */ jsxs60("div", { className: `flex items-center gap-3 ${className}`, children: [
|
|
2951
|
+
/* @__PURE__ */ jsx83("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" }),
|
|
2952
|
+
/* @__PURE__ */ jsx83("span", { className: "font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: label }),
|
|
2953
|
+
/* @__PURE__ */ jsx83("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" })
|
|
2806
2954
|
] });
|
|
2807
2955
|
}
|
|
2808
|
-
return /* @__PURE__ */
|
|
2956
|
+
return /* @__PURE__ */ jsx83("hr", { className: `border-[var(--tapiz-border-subtle)] ${className}` });
|
|
2809
2957
|
}
|
|
2810
2958
|
|
|
2811
2959
|
// src/components/layout/ResponsiveGrid.tsx
|
|
2812
|
-
import { jsx as
|
|
2960
|
+
import { jsx as jsx84 } from "react/jsx-runtime";
|
|
2813
2961
|
var gapClasses3 = {
|
|
2814
2962
|
sm: "gap-3",
|
|
2815
2963
|
md: "gap-4",
|
|
@@ -2817,7 +2965,7 @@ var gapClasses3 = {
|
|
|
2817
2965
|
xl: "gap-8"
|
|
2818
2966
|
};
|
|
2819
2967
|
function ResponsiveGrid({ children, min = "18rem", gap = "md", className = "", style }) {
|
|
2820
|
-
return /* @__PURE__ */
|
|
2968
|
+
return /* @__PURE__ */ jsx84(
|
|
2821
2969
|
"div",
|
|
2822
2970
|
{
|
|
2823
2971
|
className: `grid ${gapClasses3[gap]} ${className}`,
|
|
@@ -2828,7 +2976,7 @@ function ResponsiveGrid({ children, min = "18rem", gap = "md", className = "", s
|
|
|
2828
2976
|
}
|
|
2829
2977
|
|
|
2830
2978
|
// src/components/data-display/Sparkline.tsx
|
|
2831
|
-
import { jsx as
|
|
2979
|
+
import { jsx as jsx85, jsxs as jsxs61 } from "react/jsx-runtime";
|
|
2832
2980
|
function Sparkline({ values, width = 160, height = 48, label = "Trend", className = "", style }) {
|
|
2833
2981
|
const safeValues = values.length ? values : [0];
|
|
2834
2982
|
const min = Math.min(...safeValues);
|
|
@@ -2840,40 +2988,40 @@ function Sparkline({ values, width = 160, height = 48, label = "Trend", classNam
|
|
|
2840
2988
|
const y = height - (value - min) / range * (height - 6) - 3;
|
|
2841
2989
|
return `${x},${y}`;
|
|
2842
2990
|
}).join(" ");
|
|
2843
|
-
return /* @__PURE__ */
|
|
2844
|
-
/* @__PURE__ */
|
|
2845
|
-
/* @__PURE__ */
|
|
2991
|
+
return /* @__PURE__ */ jsxs61("svg", { className, style, width, height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": label, children: [
|
|
2992
|
+
/* @__PURE__ */ jsx85("polyline", { points, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "miter" }),
|
|
2993
|
+
/* @__PURE__ */ jsx85("line", { x1: "0", x2: width, y1: height - 1, y2: height - 1, stroke: "var(--tapiz-border-subtle)", strokeWidth: "1" })
|
|
2846
2994
|
] });
|
|
2847
2995
|
}
|
|
2848
2996
|
|
|
2849
2997
|
// src/components/data-display/BarList.tsx
|
|
2850
|
-
import { jsx as
|
|
2998
|
+
import { jsx as jsx86, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
2851
2999
|
function BarList({ items, max, valueFormatter = (value) => value, className = "" }) {
|
|
2852
3000
|
const computedMax = max ?? Math.max(1, ...items.map((item) => item.value));
|
|
2853
|
-
return /* @__PURE__ */
|
|
3001
|
+
return /* @__PURE__ */ jsx86("div", { className: `space-y-3 ${className}`, children: items.map((item, index) => {
|
|
2854
3002
|
const percent = Math.max(0, Math.min(100, item.value / computedMax * 100));
|
|
2855
|
-
return /* @__PURE__ */
|
|
2856
|
-
/* @__PURE__ */
|
|
2857
|
-
/* @__PURE__ */
|
|
2858
|
-
/* @__PURE__ */
|
|
3003
|
+
return /* @__PURE__ */ jsxs62("div", { children: [
|
|
3004
|
+
/* @__PURE__ */ jsxs62("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
|
|
3005
|
+
/* @__PURE__ */ jsx86("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: item.label }),
|
|
3006
|
+
/* @__PURE__ */ jsx86("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueFormatter(item.value) })
|
|
2859
3007
|
] }),
|
|
2860
|
-
/* @__PURE__ */
|
|
2861
|
-
item.detail ? /* @__PURE__ */
|
|
3008
|
+
/* @__PURE__ */ jsx86("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx86("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${percent}%` } }) }),
|
|
3009
|
+
item.detail ? /* @__PURE__ */ jsx86("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.detail }) : null
|
|
2862
3010
|
] }, index);
|
|
2863
3011
|
}) });
|
|
2864
3012
|
}
|
|
2865
3013
|
|
|
2866
3014
|
// src/components/data-display/DonutMetric.tsx
|
|
2867
|
-
import { jsx as
|
|
3015
|
+
import { jsx as jsx87, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
2868
3016
|
function DonutMetric({ value, max = 100, label, caption, size = 112, className = "" }) {
|
|
2869
3017
|
const radius = 42;
|
|
2870
3018
|
const circumference = 2 * Math.PI * radius;
|
|
2871
3019
|
const ratio = Math.max(0, Math.min(1, value / max));
|
|
2872
3020
|
const offset = circumference * (1 - ratio);
|
|
2873
|
-
return /* @__PURE__ */
|
|
2874
|
-
/* @__PURE__ */
|
|
2875
|
-
/* @__PURE__ */
|
|
2876
|
-
/* @__PURE__ */
|
|
3021
|
+
return /* @__PURE__ */ jsxs63("div", { className: `inline-flex items-center gap-4 ${className}`, children: [
|
|
3022
|
+
/* @__PURE__ */ jsxs63("svg", { width: size, height: size, viewBox: "0 0 112 112", role: "img", "aria-label": `${Math.round(ratio * 100)}%`, children: [
|
|
3023
|
+
/* @__PURE__ */ jsx87("circle", { cx: "56", cy: "56", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
|
|
3024
|
+
/* @__PURE__ */ jsx87(
|
|
2877
3025
|
"circle",
|
|
2878
3026
|
{
|
|
2879
3027
|
cx: "56",
|
|
@@ -2888,22 +3036,22 @@ function DonutMetric({ value, max = 100, label, caption, size = 112, className =
|
|
|
2888
3036
|
transform: "rotate(-90 56 56)"
|
|
2889
3037
|
}
|
|
2890
3038
|
),
|
|
2891
|
-
/* @__PURE__ */
|
|
3039
|
+
/* @__PURE__ */ jsxs63("text", { x: "56", y: "61", textAnchor: "middle", className: "fill-[var(--tapiz-text-primary)] font-mono text-lg font-bold", children: [
|
|
2892
3040
|
Math.round(ratio * 100),
|
|
2893
3041
|
"%"
|
|
2894
3042
|
] })
|
|
2895
3043
|
] }),
|
|
2896
|
-
label || caption ? /* @__PURE__ */
|
|
2897
|
-
label ? /* @__PURE__ */
|
|
2898
|
-
caption ? /* @__PURE__ */
|
|
3044
|
+
label || caption ? /* @__PURE__ */ jsxs63("div", { children: [
|
|
3045
|
+
label ? /* @__PURE__ */ jsx87("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
|
|
3046
|
+
caption ? /* @__PURE__ */ jsx87("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: caption }) : null
|
|
2899
3047
|
] }) : null
|
|
2900
3048
|
] });
|
|
2901
3049
|
}
|
|
2902
3050
|
|
|
2903
3051
|
// src/components/data-display/FilterChip.tsx
|
|
2904
|
-
import { jsx as
|
|
3052
|
+
import { jsx as jsx88, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
2905
3053
|
function FilterChip({ children, active = false, onRemove, className = "" }) {
|
|
2906
|
-
return /* @__PURE__ */
|
|
3054
|
+
return /* @__PURE__ */ jsxs64(
|
|
2907
3055
|
"span",
|
|
2908
3056
|
{
|
|
2909
3057
|
className: [
|
|
@@ -2913,56 +3061,56 @@ function FilterChip({ children, active = false, onRemove, className = "" }) {
|
|
|
2913
3061
|
].join(" "),
|
|
2914
3062
|
children: [
|
|
2915
3063
|
children,
|
|
2916
|
-
onRemove ? /* @__PURE__ */
|
|
3064
|
+
onRemove ? /* @__PURE__ */ jsx88("button", { type: "button", onClick: onRemove, className: "text-[var(--tapiz-text-muted)] hover:text-[var(--tapiz-danger)]", "aria-label": "Remove filter", children: "\xD7" }) : null
|
|
2917
3065
|
]
|
|
2918
3066
|
}
|
|
2919
3067
|
);
|
|
2920
3068
|
}
|
|
2921
3069
|
|
|
2922
3070
|
// src/components/data-display/DataToolbar.tsx
|
|
2923
|
-
import { jsx as
|
|
3071
|
+
import { jsx as jsx89, jsxs as jsxs65 } from "react/jsx-runtime";
|
|
2924
3072
|
function DataToolbar({ title, description, search, filters, actions, className = "" }) {
|
|
2925
|
-
return /* @__PURE__ */
|
|
2926
|
-
/* @__PURE__ */
|
|
2927
|
-
/* @__PURE__ */
|
|
2928
|
-
title ? /* @__PURE__ */
|
|
2929
|
-
description ? /* @__PURE__ */
|
|
3073
|
+
return /* @__PURE__ */ jsxs65("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 ${className}`, children: [
|
|
3074
|
+
/* @__PURE__ */ jsxs65("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
|
|
3075
|
+
/* @__PURE__ */ jsxs65("div", { children: [
|
|
3076
|
+
title ? /* @__PURE__ */ jsx89("h3", { className: "text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
3077
|
+
description ? /* @__PURE__ */ jsx89("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
2930
3078
|
] }),
|
|
2931
|
-
actions ? /* @__PURE__ */
|
|
3079
|
+
actions ? /* @__PURE__ */ jsx89("div", { className: "flex flex-wrap gap-2", children: actions }) : null
|
|
2932
3080
|
] }),
|
|
2933
|
-
search || filters ? /* @__PURE__ */
|
|
2934
|
-
search ? /* @__PURE__ */
|
|
2935
|
-
filters ? /* @__PURE__ */
|
|
3081
|
+
search || filters ? /* @__PURE__ */ jsxs65("div", { className: "mt-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
|
|
3082
|
+
search ? /* @__PURE__ */ jsx89("div", { className: "min-w-0 flex-1", children: search }) : null,
|
|
3083
|
+
filters ? /* @__PURE__ */ jsx89("div", { className: "flex flex-wrap gap-2", children: filters }) : null
|
|
2936
3084
|
] }) : null
|
|
2937
3085
|
] });
|
|
2938
3086
|
}
|
|
2939
3087
|
|
|
2940
3088
|
// src/components/framework/ResourceCard.tsx
|
|
2941
|
-
import { Fragment as
|
|
3089
|
+
import { Fragment as Fragment5, jsx as jsx90, jsxs as jsxs66 } from "react/jsx-runtime";
|
|
2942
3090
|
function ResourceCard({ title, description, eyebrow, icon, meta, status, actions, href, className = "" }) {
|
|
2943
|
-
const content = /* @__PURE__ */
|
|
2944
|
-
/* @__PURE__ */
|
|
2945
|
-
/* @__PURE__ */
|
|
2946
|
-
icon ? /* @__PURE__ */
|
|
2947
|
-
/* @__PURE__ */
|
|
2948
|
-
eyebrow ? /* @__PURE__ */
|
|
2949
|
-
/* @__PURE__ */
|
|
2950
|
-
description ? /* @__PURE__ */
|
|
3091
|
+
const content = /* @__PURE__ */ jsxs66(Fragment5, { children: [
|
|
3092
|
+
/* @__PURE__ */ jsxs66("div", { className: "flex items-start justify-between gap-4", children: [
|
|
3093
|
+
/* @__PURE__ */ jsxs66("div", { className: "flex min-w-0 items-start gap-3", children: [
|
|
3094
|
+
icon ? /* @__PURE__ */ jsx90("div", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-2 text-[var(--tapiz-accent)]", children: icon }) : null,
|
|
3095
|
+
/* @__PURE__ */ jsxs66("div", { className: "min-w-0", children: [
|
|
3096
|
+
eyebrow ? /* @__PURE__ */ jsx90("div", { className: "kicker mb-2", children: eyebrow }) : null,
|
|
3097
|
+
/* @__PURE__ */ jsx90("h3", { className: "truncate text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
3098
|
+
description ? /* @__PURE__ */ jsx90("p", { className: "mt-2 line-clamp-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
2951
3099
|
] })
|
|
2952
3100
|
] }),
|
|
2953
|
-
status ? /* @__PURE__ */
|
|
3101
|
+
status ? /* @__PURE__ */ jsx90(Badge, { children: status }) : null
|
|
2954
3102
|
] }),
|
|
2955
|
-
meta || actions ? /* @__PURE__ */
|
|
2956
|
-
meta ? /* @__PURE__ */
|
|
2957
|
-
actions ? /* @__PURE__ */
|
|
3103
|
+
meta || actions ? /* @__PURE__ */ jsxs66("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
|
|
3104
|
+
meta ? /* @__PURE__ */ jsx90("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : /* @__PURE__ */ jsx90("span", {}),
|
|
3105
|
+
actions ? /* @__PURE__ */ jsx90("div", { className: "flex flex-wrap gap-2", children: actions }) : null
|
|
2958
3106
|
] }) : null
|
|
2959
3107
|
] });
|
|
2960
3108
|
const classes = `block border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 shadow-[var(--tapiz-shadow-sm)] hover:border-[var(--tapiz-border-strong)] hover:shadow-[var(--tapiz-shadow-md)] ${className}`;
|
|
2961
|
-
return href ? /* @__PURE__ */
|
|
3109
|
+
return href ? /* @__PURE__ */ jsx90("a", { href, className: classes, children: content }) : /* @__PURE__ */ jsx90("article", { className: classes, children: content });
|
|
2962
3110
|
}
|
|
2963
3111
|
|
|
2964
3112
|
// src/components/framework/IntegrationCard.tsx
|
|
2965
|
-
import { jsx as
|
|
3113
|
+
import { jsx as jsx91, jsxs as jsxs67 } from "react/jsx-runtime";
|
|
2966
3114
|
var statusLabel = {
|
|
2967
3115
|
connected: "Connected",
|
|
2968
3116
|
disconnected: "Disconnected",
|
|
@@ -2976,26 +3124,26 @@ var statusVariant = {
|
|
|
2976
3124
|
error: "danger"
|
|
2977
3125
|
};
|
|
2978
3126
|
function IntegrationCard({ name, description, logo, status = "disconnected", lastSync, actions, className = "" }) {
|
|
2979
|
-
return /* @__PURE__ */
|
|
2980
|
-
/* @__PURE__ */
|
|
2981
|
-
/* @__PURE__ */
|
|
2982
|
-
/* @__PURE__ */
|
|
2983
|
-
/* @__PURE__ */
|
|
2984
|
-
/* @__PURE__ */
|
|
2985
|
-
description ? /* @__PURE__ */
|
|
3127
|
+
return /* @__PURE__ */ jsxs67("article", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 ${className}`, children: [
|
|
3128
|
+
/* @__PURE__ */ jsxs67("div", { className: "flex items-start justify-between gap-4", children: [
|
|
3129
|
+
/* @__PURE__ */ jsxs67("div", { className: "flex items-start gap-3", children: [
|
|
3130
|
+
/* @__PURE__ */ jsx91("div", { className: "flex size-11 items-center justify-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] text-[var(--tapiz-accent)]", children: logo ?? /* @__PURE__ */ jsx91("span", { className: "font-mono text-xs", children: "API" }) }),
|
|
3131
|
+
/* @__PURE__ */ jsxs67("div", { children: [
|
|
3132
|
+
/* @__PURE__ */ jsx91("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: name }),
|
|
3133
|
+
description ? /* @__PURE__ */ jsx91("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
2986
3134
|
] })
|
|
2987
3135
|
] }),
|
|
2988
|
-
/* @__PURE__ */
|
|
3136
|
+
/* @__PURE__ */ jsx91(StatusBadge, { variant: statusVariant[status], label: statusLabel[status] })
|
|
2989
3137
|
] }),
|
|
2990
|
-
/* @__PURE__ */
|
|
2991
|
-
/* @__PURE__ */
|
|
2992
|
-
actions ? /* @__PURE__ */
|
|
3138
|
+
/* @__PURE__ */ jsxs67("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
|
|
3139
|
+
/* @__PURE__ */ jsx91("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: lastSync ?? "No sync yet" }),
|
|
3140
|
+
actions ? /* @__PURE__ */ jsx91("div", { className: "flex gap-2", children: actions }) : null
|
|
2993
3141
|
] })
|
|
2994
3142
|
] });
|
|
2995
3143
|
}
|
|
2996
3144
|
|
|
2997
3145
|
// src/components/framework/HealthIndicator.tsx
|
|
2998
|
-
import { jsx as
|
|
3146
|
+
import { jsx as jsx92, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
2999
3147
|
var toneClasses2 = {
|
|
3000
3148
|
operational: "bg-[var(--tapiz-success)]",
|
|
3001
3149
|
degraded: "bg-[var(--tapiz-warning)]",
|
|
@@ -3009,34 +3157,34 @@ var defaultLabel = {
|
|
|
3009
3157
|
unknown: "Unknown"
|
|
3010
3158
|
};
|
|
3011
3159
|
function HealthIndicator({ tone: tone2 = "unknown", label, detail, className = "" }) {
|
|
3012
|
-
return /* @__PURE__ */
|
|
3013
|
-
/* @__PURE__ */
|
|
3014
|
-
/* @__PURE__ */
|
|
3015
|
-
detail ? /* @__PURE__ */
|
|
3160
|
+
return /* @__PURE__ */ jsxs68("div", { className: `inline-flex items-center gap-3 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] px-3 py-2 ${className}`, children: [
|
|
3161
|
+
/* @__PURE__ */ jsx92("span", { className: `size-2.5 ${toneClasses2[tone2]}`, "aria-hidden": "true" }),
|
|
3162
|
+
/* @__PURE__ */ jsx92("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label ?? defaultLabel[tone2] }),
|
|
3163
|
+
detail ? /* @__PURE__ */ jsx92("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: detail }) : null
|
|
3016
3164
|
] });
|
|
3017
3165
|
}
|
|
3018
3166
|
|
|
3019
3167
|
// src/components/framework/AuditLog.tsx
|
|
3020
|
-
import { jsx as
|
|
3168
|
+
import { jsx as jsx93, jsxs as jsxs69 } from "react/jsx-runtime";
|
|
3021
3169
|
function AuditLog({ items, className = "" }) {
|
|
3022
|
-
return /* @__PURE__ */
|
|
3023
|
-
/* @__PURE__ */
|
|
3024
|
-
/* @__PURE__ */
|
|
3025
|
-
/* @__PURE__ */
|
|
3026
|
-
/* @__PURE__ */
|
|
3027
|
-
/* @__PURE__ */
|
|
3170
|
+
return /* @__PURE__ */ jsx93("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs69("div", { className: "flex gap-3 p-4", children: [
|
|
3171
|
+
/* @__PURE__ */ jsx93(Avatar, { name: item.initials ?? item.actor, size: "sm" }),
|
|
3172
|
+
/* @__PURE__ */ jsxs69("div", { className: "min-w-0 flex-1", children: [
|
|
3173
|
+
/* @__PURE__ */ jsxs69("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
|
|
3174
|
+
/* @__PURE__ */ jsxs69("p", { className: "text-sm text-[var(--tapiz-text-secondary)]", children: [
|
|
3175
|
+
/* @__PURE__ */ jsx93("strong", { className: "text-[var(--tapiz-text-primary)]", children: item.actor }),
|
|
3028
3176
|
" ",
|
|
3029
3177
|
item.action
|
|
3030
3178
|
] }),
|
|
3031
|
-
/* @__PURE__ */
|
|
3179
|
+
/* @__PURE__ */ jsx93("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.timestamp })
|
|
3032
3180
|
] }),
|
|
3033
|
-
item.detail ? /* @__PURE__ */
|
|
3181
|
+
item.detail ? /* @__PURE__ */ jsx93("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.detail }) : null
|
|
3034
3182
|
] })
|
|
3035
3183
|
] }, index)) });
|
|
3036
3184
|
}
|
|
3037
3185
|
|
|
3038
3186
|
// src/components/framework/KanbanBoard.tsx
|
|
3039
|
-
import { jsx as
|
|
3187
|
+
import { jsx as jsx94, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
3040
3188
|
var toneClasses3 = {
|
|
3041
3189
|
default: "border-[var(--tapiz-border-subtle)]",
|
|
3042
3190
|
accent: "border-[var(--tapiz-accent)]",
|
|
@@ -3045,65 +3193,65 @@ var toneClasses3 = {
|
|
|
3045
3193
|
danger: "border-[var(--tapiz-danger)]"
|
|
3046
3194
|
};
|
|
3047
3195
|
function KanbanBoard({ columns, className = "" }) {
|
|
3048
|
-
return /* @__PURE__ */
|
|
3049
|
-
/* @__PURE__ */
|
|
3050
|
-
/* @__PURE__ */
|
|
3051
|
-
/* @__PURE__ */
|
|
3052
|
-
column.description ? /* @__PURE__ */
|
|
3196
|
+
return /* @__PURE__ */ jsx94("div", { className: `grid gap-4 overflow-x-auto md:grid-flow-col md:auto-cols-[minmax(18rem,1fr)] ${className}`, children: columns.map((column) => /* @__PURE__ */ jsxs70("section", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-3", children: [
|
|
3197
|
+
/* @__PURE__ */ jsxs70("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
|
|
3198
|
+
/* @__PURE__ */ jsxs70("div", { children: [
|
|
3199
|
+
/* @__PURE__ */ jsx94("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: column.title }),
|
|
3200
|
+
column.description ? /* @__PURE__ */ jsx94("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: column.description }) : null
|
|
3053
3201
|
] }),
|
|
3054
|
-
/* @__PURE__ */
|
|
3202
|
+
/* @__PURE__ */ jsx94("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: column.items.length })
|
|
3055
3203
|
] }),
|
|
3056
|
-
/* @__PURE__ */
|
|
3057
|
-
/* @__PURE__ */
|
|
3058
|
-
item.description ? /* @__PURE__ */
|
|
3059
|
-
item.meta ? /* @__PURE__ */
|
|
3204
|
+
/* @__PURE__ */ jsx94("div", { className: "space-y-3", children: column.items.map((item) => /* @__PURE__ */ jsxs70("article", { className: `border-l-2 bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)] ${toneClasses3[item.tone ?? "default"]}`, children: [
|
|
3205
|
+
/* @__PURE__ */ jsx94("h4", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3206
|
+
item.description ? /* @__PURE__ */ jsx94("p", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
|
|
3207
|
+
item.meta ? /* @__PURE__ */ jsx94("div", { className: "mt-3 font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
|
|
3060
3208
|
] }, item.id)) })
|
|
3061
3209
|
] }, column.id)) });
|
|
3062
3210
|
}
|
|
3063
3211
|
|
|
3064
3212
|
// src/components/framework/AccessMatrix.tsx
|
|
3065
|
-
import { jsx as
|
|
3213
|
+
import { jsx as jsx95, jsxs as jsxs71 } from "react/jsx-runtime";
|
|
3066
3214
|
function AccessMatrix({ roles, permissions, className = "" }) {
|
|
3067
|
-
return /* @__PURE__ */
|
|
3068
|
-
/* @__PURE__ */
|
|
3069
|
-
/* @__PURE__ */
|
|
3070
|
-
roles.map((role) => /* @__PURE__ */
|
|
3215
|
+
return /* @__PURE__ */ jsx95("div", { className: `overflow-x-auto border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: /* @__PURE__ */ jsxs71("table", { className: "min-w-full text-sm", children: [
|
|
3216
|
+
/* @__PURE__ */ jsx95("thead", { children: /* @__PURE__ */ jsxs71("tr", { children: [
|
|
3217
|
+
/* @__PURE__ */ jsx95("th", { className: "px-4 py-3 text-left", children: "Permission" }),
|
|
3218
|
+
roles.map((role) => /* @__PURE__ */ jsx95("th", { className: "px-4 py-3 text-center", children: role.label }, role.key))
|
|
3071
3219
|
] }) }),
|
|
3072
|
-
/* @__PURE__ */
|
|
3073
|
-
/* @__PURE__ */
|
|
3074
|
-
/* @__PURE__ */
|
|
3075
|
-
permission.description ? /* @__PURE__ */
|
|
3220
|
+
/* @__PURE__ */ jsx95("tbody", { children: permissions.map((permission) => /* @__PURE__ */ jsxs71("tr", { children: [
|
|
3221
|
+
/* @__PURE__ */ jsxs71("td", { className: "px-4 py-3", children: [
|
|
3222
|
+
/* @__PURE__ */ jsx95("div", { className: "font-medium text-[var(--tapiz-text-primary)]", children: permission.label }),
|
|
3223
|
+
permission.description ? /* @__PURE__ */ jsx95("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: permission.description }) : null
|
|
3076
3224
|
] }),
|
|
3077
|
-
roles.map((role) => /* @__PURE__ */
|
|
3225
|
+
roles.map((role) => /* @__PURE__ */ jsx95("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx95("span", { className: permission.roles[role.key] ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-text-disabled)]", children: permission.roles[role.key] ? "\u2713" : "\u2014" }) }, role.key))
|
|
3078
3226
|
] }, permission.key)) })
|
|
3079
3227
|
] }) });
|
|
3080
3228
|
}
|
|
3081
3229
|
|
|
3082
3230
|
// src/components/framework/CalendarGrid.tsx
|
|
3083
|
-
import { jsx as
|
|
3231
|
+
import { jsx as jsx96, jsxs as jsxs72 } from "react/jsx-runtime";
|
|
3084
3232
|
var defaultWeekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
3085
3233
|
function CalendarGrid({ days, weekdays = defaultWeekdays, className = "" }) {
|
|
3086
|
-
return /* @__PURE__ */
|
|
3087
|
-
/* @__PURE__ */
|
|
3088
|
-
/* @__PURE__ */
|
|
3089
|
-
/* @__PURE__ */
|
|
3090
|
-
/* @__PURE__ */
|
|
3091
|
-
day.label ? /* @__PURE__ */
|
|
3234
|
+
return /* @__PURE__ */ jsxs72("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
|
|
3235
|
+
/* @__PURE__ */ jsx96("div", { className: "grid grid-cols-7 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: weekdays.map((day, index) => /* @__PURE__ */ jsx96("div", { className: "px-3 py-2 font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: day }, index)) }),
|
|
3236
|
+
/* @__PURE__ */ jsx96("div", { className: "grid grid-cols-7", children: days.map((day, index) => /* @__PURE__ */ jsxs72("div", { className: `min-h-28 border-b border-r border-[var(--tapiz-border-subtle)] p-2 ${day.muted ? "opacity-45" : ""} ${day.selected ? "bg-[var(--tapiz-accent-soft)]" : ""}`, children: [
|
|
3237
|
+
/* @__PURE__ */ jsxs72("div", { className: "flex items-center justify-between gap-2", children: [
|
|
3238
|
+
/* @__PURE__ */ jsx96("span", { className: "font-mono text-xs text-[var(--tapiz-text-primary)]", children: day.date }),
|
|
3239
|
+
day.label ? /* @__PURE__ */ jsx96("span", { className: "text-[10px] text-[var(--tapiz-text-muted)]", children: day.label }) : null
|
|
3092
3240
|
] }),
|
|
3093
|
-
day.events?.length ? /* @__PURE__ */
|
|
3241
|
+
day.events?.length ? /* @__PURE__ */ jsx96("div", { className: "mt-2 space-y-1", children: day.events.map((event, eventIndex) => /* @__PURE__ */ jsx96("div", { className: "truncate border-l-2 border-[var(--tapiz-accent)] bg-[var(--tapiz-bg-surface-muted)] px-2 py-1 text-[11px] text-[var(--tapiz-text-secondary)]", children: event }, eventIndex)) }) : null
|
|
3094
3242
|
] }, index)) })
|
|
3095
3243
|
] });
|
|
3096
3244
|
}
|
|
3097
3245
|
|
|
3098
3246
|
// src/components/forms/Slider.tsx
|
|
3099
|
-
import { jsx as
|
|
3247
|
+
import { jsx as jsx97, jsxs as jsxs73 } from "react/jsx-runtime";
|
|
3100
3248
|
function Slider({ label, valueLabel, className = "", ...props }) {
|
|
3101
|
-
return /* @__PURE__ */
|
|
3102
|
-
label || valueLabel ? /* @__PURE__ */
|
|
3103
|
-
label ? /* @__PURE__ */
|
|
3104
|
-
valueLabel ? /* @__PURE__ */
|
|
3249
|
+
return /* @__PURE__ */ jsxs73("label", { className: `block ${className}`, children: [
|
|
3250
|
+
label || valueLabel ? /* @__PURE__ */ jsxs73("span", { className: "mb-2 flex items-center justify-between gap-3 text-sm", children: [
|
|
3251
|
+
label ? /* @__PURE__ */ jsx97("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: label }) : /* @__PURE__ */ jsx97("span", {}),
|
|
3252
|
+
valueLabel ? /* @__PURE__ */ jsx97("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueLabel }) : null
|
|
3105
3253
|
] }) : null,
|
|
3106
|
-
/* @__PURE__ */
|
|
3254
|
+
/* @__PURE__ */ jsx97(
|
|
3107
3255
|
"input",
|
|
3108
3256
|
{
|
|
3109
3257
|
...props,
|
|
@@ -3115,31 +3263,31 @@ function Slider({ label, valueLabel, className = "", ...props }) {
|
|
|
3115
3263
|
}
|
|
3116
3264
|
|
|
3117
3265
|
// src/components/forms/FileDropzone.tsx
|
|
3118
|
-
import { jsx as
|
|
3266
|
+
import { jsx as jsx98, jsxs as jsxs74 } from "react/jsx-runtime";
|
|
3119
3267
|
function FileDropzone({ title = "Drop files here", description, actionLabel = "Browse", className = "", ...props }) {
|
|
3120
|
-
return /* @__PURE__ */
|
|
3121
|
-
/* @__PURE__ */
|
|
3122
|
-
/* @__PURE__ */
|
|
3123
|
-
description ? /* @__PURE__ */
|
|
3124
|
-
/* @__PURE__ */
|
|
3268
|
+
return /* @__PURE__ */ jsxs74("label", { className: `block cursor-pointer border-2 border-dashed border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-6 text-center hover:bg-[var(--tapiz-bg-surface-muted)] ${className}`, children: [
|
|
3269
|
+
/* @__PURE__ */ jsx98("input", { ...props, type: "file", className: "sr-only" }),
|
|
3270
|
+
/* @__PURE__ */ jsx98("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
3271
|
+
description ? /* @__PURE__ */ jsx98("span", { className: "mt-2 block text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
|
|
3272
|
+
/* @__PURE__ */ jsx98("span", { className: "mt-4 inline-flex border border-[var(--tapiz-border-strong)] px-3 py-1.5 font-mono text-xs uppercase tracking-[0.12em] text-[var(--tapiz-accent)]", children: actionLabel })
|
|
3125
3273
|
] });
|
|
3126
3274
|
}
|
|
3127
3275
|
|
|
3128
3276
|
// src/components/forms/PasswordInput.tsx
|
|
3129
|
-
import { useState as
|
|
3130
|
-
import { jsx as
|
|
3277
|
+
import { useState as useState8 } from "react";
|
|
3278
|
+
import { jsx as jsx99, jsxs as jsxs75 } from "react/jsx-runtime";
|
|
3131
3279
|
function PasswordInput({
|
|
3132
3280
|
revealLabel = "Show password",
|
|
3133
3281
|
className = "",
|
|
3134
3282
|
...props
|
|
3135
3283
|
}) {
|
|
3136
|
-
const [visible, setVisible] =
|
|
3137
|
-
return /* @__PURE__ */
|
|
3284
|
+
const [visible, setVisible] = useState8(false);
|
|
3285
|
+
return /* @__PURE__ */ jsxs75(
|
|
3138
3286
|
"div",
|
|
3139
3287
|
{
|
|
3140
3288
|
className: `flex border border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) focus-within:border-(--tapiz-border-focus) focus-within:shadow-[inset_3px_0_0_0_var(--tapiz-signal)] ${className}`,
|
|
3141
3289
|
children: [
|
|
3142
|
-
/* @__PURE__ */
|
|
3290
|
+
/* @__PURE__ */ jsx99(
|
|
3143
3291
|
"input",
|
|
3144
3292
|
{
|
|
3145
3293
|
...props,
|
|
@@ -3147,7 +3295,7 @@ function PasswordInput({
|
|
|
3147
3295
|
className: "min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-(--tapiz-text-primary) outline-none focus:shadow-none!"
|
|
3148
3296
|
}
|
|
3149
3297
|
),
|
|
3150
|
-
/* @__PURE__ */
|
|
3298
|
+
/* @__PURE__ */ jsx99(
|
|
3151
3299
|
"button",
|
|
3152
3300
|
{
|
|
3153
3301
|
type: "button",
|
|
@@ -3156,7 +3304,7 @@ function PasswordInput({
|
|
|
3156
3304
|
onClick: () => setVisible((v) => !v),
|
|
3157
3305
|
tabIndex: -1,
|
|
3158
3306
|
className: "grid place-items-center px-3 text-(--tapiz-text-muted) transition-colors hover:text-(--tapiz-text-primary)",
|
|
3159
|
-
children: visible ? /* @__PURE__ */
|
|
3307
|
+
children: visible ? /* @__PURE__ */ jsx99(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx99(Eye, { size: 15 })
|
|
3160
3308
|
}
|
|
3161
3309
|
)
|
|
3162
3310
|
]
|
|
@@ -3165,12 +3313,12 @@ function PasswordInput({
|
|
|
3165
3313
|
}
|
|
3166
3314
|
|
|
3167
3315
|
// src/components/forms/TextareaCounter.tsx
|
|
3168
|
-
import { jsx as
|
|
3316
|
+
import { jsx as jsx100, jsxs as jsxs76 } from "react/jsx-runtime";
|
|
3169
3317
|
function TextareaCounter({ maxLength, value = "", className = "", ...props }) {
|
|
3170
3318
|
const count = value.length;
|
|
3171
|
-
return /* @__PURE__ */
|
|
3172
|
-
/* @__PURE__ */
|
|
3173
|
-
/* @__PURE__ */
|
|
3319
|
+
return /* @__PURE__ */ jsxs76("div", { className, children: [
|
|
3320
|
+
/* @__PURE__ */ jsx100("textarea", { ...props, value, maxLength, className: "input-field min-h-28" }),
|
|
3321
|
+
/* @__PURE__ */ jsxs76("div", { className: "mt-1 text-right font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: [
|
|
3174
3322
|
count,
|
|
3175
3323
|
"/",
|
|
3176
3324
|
maxLength
|
|
@@ -3179,7 +3327,7 @@ function TextareaCounter({ maxLength, value = "", className = "", ...props }) {
|
|
|
3179
3327
|
}
|
|
3180
3328
|
|
|
3181
3329
|
// src/components/feedback/Callout.tsx
|
|
3182
|
-
import { jsx as
|
|
3330
|
+
import { jsx as jsx101, jsxs as jsxs77 } from "react/jsx-runtime";
|
|
3183
3331
|
var toneClasses4 = {
|
|
3184
3332
|
info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)]",
|
|
3185
3333
|
success: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)]",
|
|
@@ -3188,73 +3336,73 @@ var toneClasses4 = {
|
|
|
3188
3336
|
neutral: "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]"
|
|
3189
3337
|
};
|
|
3190
3338
|
function Callout({ title, children, tone: tone2 = "info", icon, actions, className = "" }) {
|
|
3191
|
-
return /* @__PURE__ */
|
|
3192
|
-
icon ? /* @__PURE__ */
|
|
3193
|
-
/* @__PURE__ */
|
|
3194
|
-
title ? /* @__PURE__ */
|
|
3195
|
-
children ? /* @__PURE__ */
|
|
3196
|
-
actions ? /* @__PURE__ */
|
|
3339
|
+
return /* @__PURE__ */ jsx101("aside", { className: `border-l-4 p-4 ${toneClasses4[tone2]} ${className}`, children: /* @__PURE__ */ jsxs77("div", { className: "flex gap-3", children: [
|
|
3340
|
+
icon ? /* @__PURE__ */ jsx101("div", { className: "text-[var(--tapiz-text-primary)]", children: icon }) : null,
|
|
3341
|
+
/* @__PURE__ */ jsxs77("div", { className: "min-w-0 flex-1", children: [
|
|
3342
|
+
title ? /* @__PURE__ */ jsx101("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
3343
|
+
children ? /* @__PURE__ */ jsx101("div", { className: "mt-1 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children }) : null,
|
|
3344
|
+
actions ? /* @__PURE__ */ jsx101("div", { className: "mt-3 flex flex-wrap gap-2", children: actions }) : null
|
|
3197
3345
|
] })
|
|
3198
3346
|
] }) });
|
|
3199
3347
|
}
|
|
3200
3348
|
|
|
3201
3349
|
// src/components/feedback/LoadingOverlay.tsx
|
|
3202
|
-
import { jsx as
|
|
3350
|
+
import { jsx as jsx102, jsxs as jsxs78 } from "react/jsx-runtime";
|
|
3203
3351
|
function LoadingOverlay({ visible = false, label = "Loading", children, className = "" }) {
|
|
3204
|
-
return /* @__PURE__ */
|
|
3352
|
+
return /* @__PURE__ */ jsxs78("div", { className: `relative ${className}`, children: [
|
|
3205
3353
|
children,
|
|
3206
|
-
visible ? /* @__PURE__ */
|
|
3207
|
-
/* @__PURE__ */
|
|
3208
|
-
/* @__PURE__ */
|
|
3354
|
+
visible ? /* @__PURE__ */ jsx102("div", { className: "absolute inset-0 grid place-items-center border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-overlay)] backdrop-blur-sm", children: /* @__PURE__ */ jsxs78("div", { className: "flex items-center gap-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] px-4 py-3 text-sm text-[var(--tapiz-text-primary)] shadow-[var(--tapiz-shadow-brutal)]", children: [
|
|
3355
|
+
/* @__PURE__ */ jsx102(Spinner, {}),
|
|
3356
|
+
/* @__PURE__ */ jsx102("span", { children: label })
|
|
3209
3357
|
] }) }) : null
|
|
3210
3358
|
] });
|
|
3211
3359
|
}
|
|
3212
3360
|
|
|
3213
3361
|
// src/components/feedback/NotificationList.tsx
|
|
3214
|
-
import { jsx as
|
|
3362
|
+
import { jsx as jsx103, jsxs as jsxs79 } from "react/jsx-runtime";
|
|
3215
3363
|
function NotificationList({ items, className = "" }) {
|
|
3216
|
-
return /* @__PURE__ */
|
|
3217
|
-
/* @__PURE__ */
|
|
3218
|
-
/* @__PURE__ */
|
|
3219
|
-
/* @__PURE__ */
|
|
3220
|
-
/* @__PURE__ */
|
|
3221
|
-
item.time ? /* @__PURE__ */
|
|
3364
|
+
return /* @__PURE__ */ jsx103("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item) => /* @__PURE__ */ jsxs79("article", { className: "flex gap-3 p-4", children: [
|
|
3365
|
+
/* @__PURE__ */ jsx103("span", { className: `mt-1 size-2.5 ${item.unread ? "bg-[var(--tapiz-accent)]" : "bg-[var(--tapiz-border-subtle)]"}`, "aria-hidden": "true" }),
|
|
3366
|
+
/* @__PURE__ */ jsxs79("div", { className: "min-w-0 flex-1", children: [
|
|
3367
|
+
/* @__PURE__ */ jsxs79("div", { className: "flex items-start justify-between gap-3", children: [
|
|
3368
|
+
/* @__PURE__ */ jsx103("h3", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3369
|
+
item.time ? /* @__PURE__ */ jsx103("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
3222
3370
|
] }),
|
|
3223
|
-
item.description ? /* @__PURE__ */
|
|
3224
|
-
item.action ? /* @__PURE__ */
|
|
3371
|
+
item.description ? /* @__PURE__ */ jsx103("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
|
|
3372
|
+
item.action ? /* @__PURE__ */ jsx103("div", { className: "mt-3", children: item.action }) : null
|
|
3225
3373
|
] })
|
|
3226
3374
|
] }, item.id)) });
|
|
3227
3375
|
}
|
|
3228
3376
|
|
|
3229
3377
|
// src/components/layout/MasonryGrid.tsx
|
|
3230
|
-
import { jsx as
|
|
3378
|
+
import { jsx as jsx104 } from "react/jsx-runtime";
|
|
3231
3379
|
var columnClasses = { 2: "md:columns-2", 3: "md:columns-2 xl:columns-3", 4: "md:columns-2 lg:columns-3 xl:columns-4" };
|
|
3232
3380
|
var gapClasses4 = { sm: "gap-3", md: "gap-5", lg: "gap-8" };
|
|
3233
3381
|
function MasonryGrid({ children, columns = 3, gap = "md", className = "", style }) {
|
|
3234
|
-
return /* @__PURE__ */
|
|
3382
|
+
return /* @__PURE__ */ jsx104("div", { className: [columnClasses[columns], gapClasses4[gap], className].filter(Boolean).join(" "), style, children });
|
|
3235
3383
|
}
|
|
3236
3384
|
|
|
3237
3385
|
// src/components/layout/PageRail.tsx
|
|
3238
|
-
import { Fragment as
|
|
3386
|
+
import { Fragment as Fragment6, jsx as jsx105, jsxs as jsxs80 } from "react/jsx-runtime";
|
|
3239
3387
|
function PageRail({ title, items, actions, className = "", style }) {
|
|
3240
|
-
return /* @__PURE__ */
|
|
3241
|
-
title ? /* @__PURE__ */
|
|
3242
|
-
/* @__PURE__ */
|
|
3243
|
-
const content = /* @__PURE__ */
|
|
3244
|
-
/* @__PURE__ */
|
|
3245
|
-
item.meta ? /* @__PURE__ */
|
|
3388
|
+
return /* @__PURE__ */ jsxs80("aside", { className: ["sticky top-20 rounded-none border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)]", className].filter(Boolean).join(" "), style, children: [
|
|
3389
|
+
title ? /* @__PURE__ */ jsx105("div", { className: "kicker mb-3 px-2", children: title }) : null,
|
|
3390
|
+
/* @__PURE__ */ jsx105("nav", { className: "flex flex-col gap-1", children: items.map((item, index) => {
|
|
3391
|
+
const content = /* @__PURE__ */ jsxs80(Fragment6, { children: [
|
|
3392
|
+
/* @__PURE__ */ jsx105("span", { className: "truncate", children: item.label }),
|
|
3393
|
+
item.meta ? /* @__PURE__ */ jsx105("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
|
|
3246
3394
|
] });
|
|
3247
3395
|
const classes = ["flex items-center justify-between gap-3 border px-3 py-2 text-sm transition", item.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-text-primary)]" : "border-transparent text-[var(--tapiz-text-muted)] hover:border-[var(--tapiz-border-subtle)] hover:text-[var(--tapiz-text-primary)]"].join(" ");
|
|
3248
|
-
return item.href ? /* @__PURE__ */
|
|
3396
|
+
return item.href ? /* @__PURE__ */ jsx105("a", { href: item.href, className: classes, children: content }, index) : /* @__PURE__ */ jsx105("div", { className: classes, children: content }, index);
|
|
3249
3397
|
}) }),
|
|
3250
|
-
actions ? /* @__PURE__ */
|
|
3398
|
+
actions ? /* @__PURE__ */ jsx105("div", { className: "mt-3 border-t border-[var(--tapiz-border-subtle)] pt-3", children: actions }) : null
|
|
3251
3399
|
] });
|
|
3252
3400
|
}
|
|
3253
3401
|
|
|
3254
3402
|
// src/components/layout/StickyBar.tsx
|
|
3255
|
-
import { jsx as
|
|
3403
|
+
import { jsx as jsx106 } from "react/jsx-runtime";
|
|
3256
3404
|
function StickyBar({ children, position = "top", className = "", style }) {
|
|
3257
|
-
return /* @__PURE__ */
|
|
3405
|
+
return /* @__PURE__ */ jsx106(
|
|
3258
3406
|
"div",
|
|
3259
3407
|
{
|
|
3260
3408
|
className: ["z-30 border-[var(--tapiz-border-subtle)] bg-[color-mix(in_srgb,var(--tapiz-bg-canvas)_88%,transparent)] px-4 py-3 backdrop-blur-xl", position === "top" ? "sticky top-0 border-b" : "sticky bottom-0 border-t", className].filter(Boolean).join(" "),
|
|
@@ -3265,191 +3413,191 @@ function StickyBar({ children, position = "top", className = "", style }) {
|
|
|
3265
3413
|
}
|
|
3266
3414
|
|
|
3267
3415
|
// src/components/forms/Combobox.tsx
|
|
3268
|
-
import { jsx as
|
|
3416
|
+
import { jsx as jsx107, jsxs as jsxs81 } from "react/jsx-runtime";
|
|
3269
3417
|
function Combobox({ options, placeholder = "Select option", invalid = false, className = "", ...props }) {
|
|
3270
|
-
return /* @__PURE__ */
|
|
3271
|
-
/* @__PURE__ */
|
|
3272
|
-
options.map((option) => /* @__PURE__ */
|
|
3418
|
+
return /* @__PURE__ */ jsxs81("select", { ...props, className: ["input-field appearance-none bg-[var(--tapiz-bg-surface)]", invalid ? "border-warn focus:border-warn" : "", className].filter(Boolean).join(" "), children: [
|
|
3419
|
+
/* @__PURE__ */ jsx107("option", { value: "", children: placeholder }),
|
|
3420
|
+
options.map((option) => /* @__PURE__ */ jsx107("option", { value: option.value, children: String(option.label) }, option.value))
|
|
3273
3421
|
] });
|
|
3274
3422
|
}
|
|
3275
3423
|
|
|
3276
3424
|
// src/components/forms/DateRangePicker.tsx
|
|
3277
|
-
import { jsx as
|
|
3425
|
+
import { jsx as jsx108, jsxs as jsxs82 } from "react/jsx-runtime";
|
|
3278
3426
|
function DateRangePicker({ startLabel = "From", endLabel = "To", startProps, endProps, className = "" }) {
|
|
3279
|
-
return /* @__PURE__ */
|
|
3280
|
-
/* @__PURE__ */
|
|
3281
|
-
/* @__PURE__ */
|
|
3282
|
-
/* @__PURE__ */
|
|
3427
|
+
return /* @__PURE__ */ jsxs82("div", { className: ["grid gap-3 md:grid-cols-2", className].filter(Boolean).join(" "), children: [
|
|
3428
|
+
/* @__PURE__ */ jsxs82("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
|
|
3429
|
+
/* @__PURE__ */ jsx108("span", { children: startLabel }),
|
|
3430
|
+
/* @__PURE__ */ jsx108("input", { type: "date", ...startProps, className: ["input-field", startProps?.className || ""].join(" ") })
|
|
3283
3431
|
] }),
|
|
3284
|
-
/* @__PURE__ */
|
|
3285
|
-
/* @__PURE__ */
|
|
3286
|
-
/* @__PURE__ */
|
|
3432
|
+
/* @__PURE__ */ jsxs82("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
|
|
3433
|
+
/* @__PURE__ */ jsx108("span", { children: endLabel }),
|
|
3434
|
+
/* @__PURE__ */ jsx108("input", { type: "date", ...endProps, className: ["input-field", endProps?.className || ""].join(" ") })
|
|
3287
3435
|
] })
|
|
3288
3436
|
] });
|
|
3289
3437
|
}
|
|
3290
3438
|
|
|
3291
3439
|
// src/components/forms/ColorSwatchPicker.tsx
|
|
3292
|
-
import { jsx as
|
|
3440
|
+
import { jsx as jsx109, jsxs as jsxs83 } from "react/jsx-runtime";
|
|
3293
3441
|
function ColorSwatchPicker({ options, value, onChange, className = "" }) {
|
|
3294
|
-
return /* @__PURE__ */
|
|
3442
|
+
return /* @__PURE__ */ jsx109("div", { className: ["flex flex-wrap gap-2", className].filter(Boolean).join(" "), children: options.map((option) => {
|
|
3295
3443
|
const selected = option.value === value;
|
|
3296
|
-
return /* @__PURE__ */
|
|
3297
|
-
/* @__PURE__ */
|
|
3298
|
-
/* @__PURE__ */
|
|
3444
|
+
return /* @__PURE__ */ jsxs83("button", { type: "button", "aria-pressed": selected, onClick: () => onChange?.(option.value), className: ["flex items-center gap-2 border px-3 py-2 text-sm transition", selected ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)]" : "border-[var(--tapiz-border-subtle)] hover:border-[var(--tapiz-border-strong)]"].join(" "), children: [
|
|
3445
|
+
/* @__PURE__ */ jsx109("span", { className: "h-4 w-4 border border-[var(--tapiz-border-strong)]", style: { background: option.color } }),
|
|
3446
|
+
/* @__PURE__ */ jsx109("span", { children: option.label })
|
|
3299
3447
|
] }, option.value);
|
|
3300
3448
|
}) });
|
|
3301
3449
|
}
|
|
3302
3450
|
|
|
3303
3451
|
// src/components/forms/RatingInput.tsx
|
|
3304
|
-
import { jsx as
|
|
3452
|
+
import { jsx as jsx110 } from "react/jsx-runtime";
|
|
3305
3453
|
function RatingInput({ value = 0, max = 5, icon = "\u2605", onChange, label = "Rating", className = "" }) {
|
|
3306
|
-
return /* @__PURE__ */
|
|
3454
|
+
return /* @__PURE__ */ jsx110("div", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), role: "radiogroup", "aria-label": label, children: Array.from({ length: max }, (_, index) => {
|
|
3307
3455
|
const score = index + 1;
|
|
3308
3456
|
const active = score <= value;
|
|
3309
|
-
return /* @__PURE__ */
|
|
3457
|
+
return /* @__PURE__ */ jsx110("button", { type: "button", role: "radio", "aria-checked": active, onClick: () => onChange?.(score), className: ["grid h-9 w-9 place-items-center border text-base transition", active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-accent)]" : "border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)] hover:border-[var(--tapiz-border-strong)]"].join(" "), children: icon }, score);
|
|
3310
3458
|
}) });
|
|
3311
3459
|
}
|
|
3312
3460
|
|
|
3313
3461
|
// src/components/data-display/ScoreRing.tsx
|
|
3314
|
-
import { jsx as
|
|
3462
|
+
import { jsx as jsx111, jsxs as jsxs84 } from "react/jsx-runtime";
|
|
3315
3463
|
function ScoreRing({ value, max = 100, label, size = 112, className = "" }) {
|
|
3316
3464
|
const normalized = Math.max(0, Math.min(1, value / max));
|
|
3317
3465
|
const radius = 42;
|
|
3318
3466
|
const circumference = 2 * Math.PI * radius;
|
|
3319
3467
|
const dash = circumference * normalized;
|
|
3320
|
-
return /* @__PURE__ */
|
|
3321
|
-
/* @__PURE__ */
|
|
3322
|
-
/* @__PURE__ */
|
|
3323
|
-
/* @__PURE__ */
|
|
3468
|
+
return /* @__PURE__ */ jsxs84("div", { className: ["inline-grid place-items-center", className].filter(Boolean).join(" "), style: { width: size, height: size }, children: [
|
|
3469
|
+
/* @__PURE__ */ jsxs84("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
|
|
3470
|
+
/* @__PURE__ */ jsx111("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
|
|
3471
|
+
/* @__PURE__ */ jsx111("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "10", strokeLinecap: "square", strokeDasharray: `${dash} ${circumference - dash}` })
|
|
3324
3472
|
] }),
|
|
3325
|
-
/* @__PURE__ */
|
|
3326
|
-
/* @__PURE__ */
|
|
3473
|
+
/* @__PURE__ */ jsxs84("div", { className: "absolute text-center", children: [
|
|
3474
|
+
/* @__PURE__ */ jsxs84("div", { className: "font-display text-2xl font-semibold text-[var(--tapiz-text-primary)]", children: [
|
|
3327
3475
|
Math.round(normalized * 100),
|
|
3328
3476
|
"%"
|
|
3329
3477
|
] }),
|
|
3330
|
-
label ? /* @__PURE__ */
|
|
3478
|
+
label ? /* @__PURE__ */ jsx111("div", { className: "font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: label }) : null
|
|
3331
3479
|
] })
|
|
3332
3480
|
] });
|
|
3333
3481
|
}
|
|
3334
3482
|
|
|
3335
3483
|
// src/components/data-display/HeatmapGrid.tsx
|
|
3336
|
-
import { jsx as
|
|
3484
|
+
import { jsx as jsx112 } from "react/jsx-runtime";
|
|
3337
3485
|
function HeatmapGrid({ cells, columns = 7, max, className = "" }) {
|
|
3338
3486
|
const peak = max ?? Math.max(1, ...cells.map((cell) => cell.value));
|
|
3339
|
-
return /* @__PURE__ */
|
|
3487
|
+
return /* @__PURE__ */ jsx112("div", { className: ["grid gap-1", className].filter(Boolean).join(" "), style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: cells.map((cell, index) => {
|
|
3340
3488
|
const opacity = 0.15 + Math.min(1, cell.value / peak) * 0.75;
|
|
3341
|
-
return /* @__PURE__ */
|
|
3489
|
+
return /* @__PURE__ */ jsx112("div", { title: cell.title, className: "aspect-square border border-[var(--tapiz-border-subtle)]", style: { background: `color-mix(in srgb, var(--tapiz-accent) ${Math.round(opacity * 100)}%, transparent)` }, children: cell.label ? /* @__PURE__ */ jsx112("span", { className: "sr-only", children: cell.label }) : null }, index);
|
|
3342
3490
|
}) });
|
|
3343
3491
|
}
|
|
3344
3492
|
|
|
3345
3493
|
// src/components/data-display/FunnelChart.tsx
|
|
3346
|
-
import { jsx as
|
|
3494
|
+
import { jsx as jsx113, jsxs as jsxs85 } from "react/jsx-runtime";
|
|
3347
3495
|
function FunnelChart({ steps, className = "" }) {
|
|
3348
3496
|
const max = Math.max(1, ...steps.map((step) => step.value));
|
|
3349
|
-
return /* @__PURE__ */
|
|
3497
|
+
return /* @__PURE__ */ jsx113("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: steps.map((step, index) => {
|
|
3350
3498
|
const width = Math.max(8, step.value / max * 100);
|
|
3351
|
-
return /* @__PURE__ */
|
|
3352
|
-
/* @__PURE__ */
|
|
3353
|
-
/* @__PURE__ */
|
|
3354
|
-
/* @__PURE__ */
|
|
3499
|
+
return /* @__PURE__ */ jsxs85("div", { children: [
|
|
3500
|
+
/* @__PURE__ */ jsxs85("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
|
|
3501
|
+
/* @__PURE__ */ jsx113("span", { className: "font-medium text-[var(--tapiz-text-primary)]", children: step.label }),
|
|
3502
|
+
/* @__PURE__ */ jsxs85("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3355
3503
|
step.value,
|
|
3356
3504
|
step.meta ? ` \xB7 ${String(step.meta)}` : ""
|
|
3357
3505
|
] })
|
|
3358
3506
|
] }),
|
|
3359
|
-
/* @__PURE__ */
|
|
3507
|
+
/* @__PURE__ */ jsx113("div", { className: "h-9 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx113("div", { className: "h-full border-r border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)]", style: { width: `${width}%` } }) })
|
|
3360
3508
|
] }, index);
|
|
3361
3509
|
}) });
|
|
3362
3510
|
}
|
|
3363
3511
|
|
|
3364
3512
|
// src/components/data-display/ComparisonMeter.tsx
|
|
3365
|
-
import { jsx as
|
|
3513
|
+
import { jsx as jsx114, jsxs as jsxs86 } from "react/jsx-runtime";
|
|
3366
3514
|
function ComparisonMeter({ leftLabel, rightLabel, value, className = "" }) {
|
|
3367
3515
|
const clamped = Math.max(0, Math.min(100, value));
|
|
3368
|
-
return /* @__PURE__ */
|
|
3369
|
-
/* @__PURE__ */
|
|
3370
|
-
/* @__PURE__ */
|
|
3371
|
-
/* @__PURE__ */
|
|
3516
|
+
return /* @__PURE__ */ jsxs86("div", { className, children: [
|
|
3517
|
+
/* @__PURE__ */ jsxs86("div", { className: "mb-2 flex justify-between gap-3 text-sm text-[var(--tapiz-text-muted)]", children: [
|
|
3518
|
+
/* @__PURE__ */ jsx114("span", { children: leftLabel }),
|
|
3519
|
+
/* @__PURE__ */ jsx114("span", { children: rightLabel })
|
|
3372
3520
|
] }),
|
|
3373
|
-
/* @__PURE__ */
|
|
3374
|
-
/* @__PURE__ */
|
|
3375
|
-
/* @__PURE__ */
|
|
3521
|
+
/* @__PURE__ */ jsxs86("div", { className: "relative h-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: [
|
|
3522
|
+
/* @__PURE__ */ jsx114("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${clamped}%` } }),
|
|
3523
|
+
/* @__PURE__ */ jsx114("div", { className: "absolute top-[-6px] h-6 w-px bg-[var(--tapiz-border-strong)]", style: { left: `${clamped}%` } })
|
|
3376
3524
|
] })
|
|
3377
3525
|
] });
|
|
3378
3526
|
}
|
|
3379
3527
|
|
|
3380
3528
|
// src/components/framework/ActivityFeed.tsx
|
|
3381
|
-
import { jsx as
|
|
3529
|
+
import { jsx as jsx115, jsxs as jsxs87 } from "react/jsx-runtime";
|
|
3382
3530
|
function ActivityFeed({ items, className = "" }) {
|
|
3383
|
-
return /* @__PURE__ */
|
|
3384
|
-
/* @__PURE__ */
|
|
3385
|
-
/* @__PURE__ */
|
|
3386
|
-
/* @__PURE__ */
|
|
3387
|
-
/* @__PURE__ */
|
|
3531
|
+
return /* @__PURE__ */ jsx115("div", { className: ["divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)]", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs87("div", { className: "flex gap-3 p-4", children: [
|
|
3532
|
+
/* @__PURE__ */ jsx115(Avatar, { name: item.actor, src: item.avatarUrl, size: "sm" }),
|
|
3533
|
+
/* @__PURE__ */ jsxs87("div", { className: "min-w-0 flex-1", children: [
|
|
3534
|
+
/* @__PURE__ */ jsxs87("p", { className: "text-sm text-[var(--tapiz-text-primary)]", children: [
|
|
3535
|
+
/* @__PURE__ */ jsx115("strong", { children: item.actor }),
|
|
3388
3536
|
" ",
|
|
3389
3537
|
item.action
|
|
3390
3538
|
] }),
|
|
3391
|
-
item.meta ? /* @__PURE__ */
|
|
3539
|
+
item.meta ? /* @__PURE__ */ jsx115("div", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: item.meta }) : null
|
|
3392
3540
|
] }),
|
|
3393
|
-
item.time ? /* @__PURE__ */
|
|
3541
|
+
item.time ? /* @__PURE__ */ jsx115("div", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
3394
3542
|
] }, index)) });
|
|
3395
3543
|
}
|
|
3396
3544
|
|
|
3397
3545
|
// src/components/framework/InboxList.tsx
|
|
3398
|
-
import { jsx as
|
|
3546
|
+
import { jsx as jsx116, jsxs as jsxs88 } from "react/jsx-runtime";
|
|
3399
3547
|
function InboxList({ items, className = "" }) {
|
|
3400
|
-
return /* @__PURE__ */
|
|
3401
|
-
/* @__PURE__ */
|
|
3402
|
-
/* @__PURE__ */
|
|
3403
|
-
/* @__PURE__ */
|
|
3404
|
-
item.sender ? /* @__PURE__ */
|
|
3548
|
+
return /* @__PURE__ */ jsx116("div", { className: ["divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)]", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs88("article", { className: ["p-4 transition hover:bg-[var(--tapiz-bg-surface-muted)]", item.unread ? "border-l-4 border-l-[var(--tapiz-accent)]" : ""].join(" "), children: [
|
|
3549
|
+
/* @__PURE__ */ jsxs88("div", { className: "flex items-start justify-between gap-3", children: [
|
|
3550
|
+
/* @__PURE__ */ jsxs88("div", { className: "min-w-0", children: [
|
|
3551
|
+
/* @__PURE__ */ jsx116("h3", { className: "truncate text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3552
|
+
item.sender ? /* @__PURE__ */ jsx116("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.sender }) : null
|
|
3405
3553
|
] }),
|
|
3406
|
-
/* @__PURE__ */
|
|
3407
|
-
item.tag ? /* @__PURE__ */
|
|
3408
|
-
item.time ? /* @__PURE__ */
|
|
3554
|
+
/* @__PURE__ */ jsxs88("div", { className: "flex shrink-0 items-center gap-2", children: [
|
|
3555
|
+
item.tag ? /* @__PURE__ */ jsx116(Badge, { children: item.tag }) : null,
|
|
3556
|
+
item.time ? /* @__PURE__ */ jsx116("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
3409
3557
|
] })
|
|
3410
3558
|
] }),
|
|
3411
|
-
item.snippet ? /* @__PURE__ */
|
|
3559
|
+
item.snippet ? /* @__PURE__ */ jsx116("p", { className: "mt-2 line-clamp-2 text-sm text-[var(--tapiz-text-muted)]", children: item.snippet }) : null
|
|
3412
3560
|
] }, index)) });
|
|
3413
3561
|
}
|
|
3414
3562
|
|
|
3415
3563
|
// src/components/framework/ApprovalQueue.tsx
|
|
3416
|
-
import { jsx as
|
|
3564
|
+
import { jsx as jsx117, jsxs as jsxs89 } from "react/jsx-runtime";
|
|
3417
3565
|
function ApprovalQueue({ items, onApprove, onReject, className = "" }) {
|
|
3418
|
-
return /* @__PURE__ */
|
|
3419
|
-
/* @__PURE__ */
|
|
3420
|
-
/* @__PURE__ */
|
|
3421
|
-
/* @__PURE__ */
|
|
3422
|
-
item.priority ? /* @__PURE__ */
|
|
3566
|
+
return /* @__PURE__ */ jsx117("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsx117("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", children: /* @__PURE__ */ jsxs89("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [
|
|
3567
|
+
/* @__PURE__ */ jsxs89("div", { children: [
|
|
3568
|
+
/* @__PURE__ */ jsxs89("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
3569
|
+
/* @__PURE__ */ jsx117("h3", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3570
|
+
item.priority ? /* @__PURE__ */ jsx117(Badge, { variant: item.priority === "high" ? "danger" : item.priority === "medium" ? "warning" : "default", children: item.priority }) : null
|
|
3423
3571
|
] }),
|
|
3424
|
-
item.requester ? /* @__PURE__ */
|
|
3572
|
+
item.requester ? /* @__PURE__ */ jsxs89("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3425
3573
|
"Requested by ",
|
|
3426
3574
|
item.requester
|
|
3427
3575
|
] }) : null,
|
|
3428
|
-
item.description ? /* @__PURE__ */
|
|
3576
|
+
item.description ? /* @__PURE__ */ jsx117("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
3429
3577
|
] }),
|
|
3430
|
-
/* @__PURE__ */
|
|
3431
|
-
/* @__PURE__ */
|
|
3432
|
-
/* @__PURE__ */
|
|
3578
|
+
/* @__PURE__ */ jsxs89("div", { className: "flex gap-2", children: [
|
|
3579
|
+
/* @__PURE__ */ jsx117(Button, { size: "sm", variant: "secondary", onClick: () => onReject?.(index), children: "Reject" }),
|
|
3580
|
+
/* @__PURE__ */ jsx117(Button, { size: "sm", onClick: () => onApprove?.(index), children: "Approve" })
|
|
3433
3581
|
] })
|
|
3434
3582
|
] }) }, index)) });
|
|
3435
3583
|
}
|
|
3436
3584
|
|
|
3437
3585
|
// src/components/framework/SLAStatus.tsx
|
|
3438
|
-
import { jsx as
|
|
3586
|
+
import { jsx as jsx118, jsxs as jsxs90 } from "react/jsx-runtime";
|
|
3439
3587
|
function SLAStatus({ label, value, target = 95, className = "" }) {
|
|
3440
3588
|
const ok = value >= target;
|
|
3441
|
-
return /* @__PURE__ */
|
|
3442
|
-
/* @__PURE__ */
|
|
3443
|
-
/* @__PURE__ */
|
|
3444
|
-
/* @__PURE__ */
|
|
3589
|
+
return /* @__PURE__ */ jsxs90("div", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", className].filter(Boolean).join(" "), children: [
|
|
3590
|
+
/* @__PURE__ */ jsxs90("div", { className: "flex items-center justify-between gap-3", children: [
|
|
3591
|
+
/* @__PURE__ */ jsx118("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label }),
|
|
3592
|
+
/* @__PURE__ */ jsx118("span", { className: ["font-mono text-xs", ok ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-warning)]"].join(" "), children: ok ? "Within SLA" : "At risk" })
|
|
3445
3593
|
] }),
|
|
3446
|
-
/* @__PURE__ */
|
|
3447
|
-
/* @__PURE__ */
|
|
3448
|
-
/* @__PURE__ */
|
|
3594
|
+
/* @__PURE__ */ jsx118("div", { className: "mt-3 h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx118("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${Math.max(0, Math.min(100, value))}%` } }) }),
|
|
3595
|
+
/* @__PURE__ */ jsxs90("div", { className: "mt-2 flex justify-between font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: [
|
|
3596
|
+
/* @__PURE__ */ jsxs90("span", { children: [
|
|
3449
3597
|
value,
|
|
3450
3598
|
"%"
|
|
3451
3599
|
] }),
|
|
3452
|
-
/* @__PURE__ */
|
|
3600
|
+
/* @__PURE__ */ jsxs90("span", { children: [
|
|
3453
3601
|
"Target ",
|
|
3454
3602
|
target,
|
|
3455
3603
|
"%"
|
|
@@ -3459,81 +3607,81 @@ function SLAStatus({ label, value, target = 95, className = "" }) {
|
|
|
3459
3607
|
}
|
|
3460
3608
|
|
|
3461
3609
|
// src/components/framework/FeatureFlagTable.tsx
|
|
3462
|
-
import { jsx as
|
|
3610
|
+
import { jsx as jsx119, jsxs as jsxs91 } from "react/jsx-runtime";
|
|
3463
3611
|
function FeatureFlagTable({ flags, onToggle, className = "" }) {
|
|
3464
|
-
return /* @__PURE__ */
|
|
3465
|
-
/* @__PURE__ */
|
|
3466
|
-
/* @__PURE__ */
|
|
3467
|
-
/* @__PURE__ */
|
|
3468
|
-
/* @__PURE__ */
|
|
3612
|
+
return /* @__PURE__ */ jsx119("div", { className: ["overflow-hidden border border-[var(--tapiz-border-subtle)]", className].filter(Boolean).join(" "), children: flags.map((flag) => /* @__PURE__ */ jsxs91("div", { className: "grid gap-3 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 last:border-b-0 md:grid-cols-[1fr_auto_auto] md:items-center", children: [
|
|
3613
|
+
/* @__PURE__ */ jsxs91("div", { children: [
|
|
3614
|
+
/* @__PURE__ */ jsxs91("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
3615
|
+
/* @__PURE__ */ jsx119("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: flag.name }),
|
|
3616
|
+
/* @__PURE__ */ jsx119(Badge, { children: flag.key })
|
|
3469
3617
|
] }),
|
|
3470
|
-
flag.description ? /* @__PURE__ */
|
|
3618
|
+
flag.description ? /* @__PURE__ */ jsx119("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: flag.description }) : null
|
|
3471
3619
|
] }),
|
|
3472
|
-
/* @__PURE__ */
|
|
3473
|
-
/* @__PURE__ */
|
|
3620
|
+
/* @__PURE__ */ jsx119("div", { className: "text-sm text-[var(--tapiz-text-muted)]", children: flag.rollout }),
|
|
3621
|
+
/* @__PURE__ */ jsx119(Switch, { checked: flag.enabled, onChange: (checked) => onToggle?.(flag.key, checked) })
|
|
3474
3622
|
] }, flag.key)) });
|
|
3475
3623
|
}
|
|
3476
3624
|
|
|
3477
3625
|
// src/components/framework/PlanUsage.tsx
|
|
3478
|
-
import { jsx as
|
|
3626
|
+
import { jsx as jsx120, jsxs as jsxs92 } from "react/jsx-runtime";
|
|
3479
3627
|
function PlanUsage({ title = "Plan usage", items, className = "" }) {
|
|
3480
|
-
return /* @__PURE__ */
|
|
3481
|
-
/* @__PURE__ */
|
|
3482
|
-
/* @__PURE__ */
|
|
3628
|
+
return /* @__PURE__ */ jsxs92("section", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", className].filter(Boolean).join(" "), children: [
|
|
3629
|
+
/* @__PURE__ */ jsx120("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
3630
|
+
/* @__PURE__ */ jsx120("div", { className: "mt-4 space-y-4", children: items.map((item, index) => {
|
|
3483
3631
|
const pct = item.limit ? Math.min(100, item.used / item.limit * 100) : 0;
|
|
3484
|
-
return /* @__PURE__ */
|
|
3485
|
-
/* @__PURE__ */
|
|
3486
|
-
/* @__PURE__ */
|
|
3487
|
-
/* @__PURE__ */
|
|
3632
|
+
return /* @__PURE__ */ jsxs92("div", { children: [
|
|
3633
|
+
/* @__PURE__ */ jsxs92("div", { className: "mb-1 flex justify-between text-sm", children: [
|
|
3634
|
+
/* @__PURE__ */ jsx120("span", { className: "text-[var(--tapiz-text-primary)]", children: item.label }),
|
|
3635
|
+
/* @__PURE__ */ jsxs92("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3488
3636
|
item.used,
|
|
3489
3637
|
"/",
|
|
3490
3638
|
item.limit
|
|
3491
3639
|
] })
|
|
3492
3640
|
] }),
|
|
3493
|
-
/* @__PURE__ */
|
|
3641
|
+
/* @__PURE__ */ jsx120("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx120("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${pct}%` } }) })
|
|
3494
3642
|
] }, index);
|
|
3495
3643
|
}) })
|
|
3496
3644
|
] });
|
|
3497
3645
|
}
|
|
3498
3646
|
|
|
3499
3647
|
// src/components/marketing/AnnouncementBar.tsx
|
|
3500
|
-
import { jsx as
|
|
3648
|
+
import { jsx as jsx121, jsxs as jsxs93 } from "react/jsx-runtime";
|
|
3501
3649
|
function AnnouncementBar({ children, action, className = "" }) {
|
|
3502
|
-
return /* @__PURE__ */
|
|
3650
|
+
return /* @__PURE__ */ jsx121("div", { className: ["border-b border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] px-4 py-3 text-sm text-[var(--tapiz-text-primary)]", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs93("div", { className: "mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-3 text-center", children: [
|
|
3503
3651
|
" ",
|
|
3504
|
-
/* @__PURE__ */
|
|
3505
|
-
action ? /* @__PURE__ */
|
|
3652
|
+
/* @__PURE__ */ jsx121("span", { children }),
|
|
3653
|
+
action ? /* @__PURE__ */ jsx121("span", { children: action }) : null
|
|
3506
3654
|
] }) });
|
|
3507
3655
|
}
|
|
3508
3656
|
|
|
3509
3657
|
// src/components/marketing/FAQSection.tsx
|
|
3510
|
-
import { jsx as
|
|
3658
|
+
import { jsx as jsx122, jsxs as jsxs94 } from "react/jsx-runtime";
|
|
3511
3659
|
function FAQSection({ title = "Frequently asked questions", description, items, className = "" }) {
|
|
3512
|
-
return /* @__PURE__ */
|
|
3513
|
-
/* @__PURE__ */
|
|
3514
|
-
/* @__PURE__ */
|
|
3515
|
-
/* @__PURE__ */
|
|
3516
|
-
description ? /* @__PURE__ */
|
|
3660
|
+
return /* @__PURE__ */ jsxs94("section", { className, children: [
|
|
3661
|
+
/* @__PURE__ */ jsxs94("div", { className: "mb-6 max-w-2xl", children: [
|
|
3662
|
+
/* @__PURE__ */ jsx122("div", { className: "kicker", children: "FAQ" }),
|
|
3663
|
+
/* @__PURE__ */ jsx122("h2", { className: "mt-2 text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: title }),
|
|
3664
|
+
description ? /* @__PURE__ */ jsx122("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
3517
3665
|
] }),
|
|
3518
|
-
/* @__PURE__ */
|
|
3666
|
+
/* @__PURE__ */ jsx122(Accordion, { items: items.map((item, index) => ({ id: `faq-${index}`, title: item.question, content: item.answer })) })
|
|
3519
3667
|
] });
|
|
3520
3668
|
}
|
|
3521
3669
|
|
|
3522
3670
|
// src/components/marketing/RoadmapList.tsx
|
|
3523
|
-
import { jsx as
|
|
3671
|
+
import { jsx as jsx123, jsxs as jsxs95 } from "react/jsx-runtime";
|
|
3524
3672
|
function RoadmapList({ items, className = "" }) {
|
|
3525
|
-
return /* @__PURE__ */
|
|
3526
|
-
/* @__PURE__ */
|
|
3527
|
-
/* @__PURE__ */
|
|
3528
|
-
item.status ? /* @__PURE__ */
|
|
3673
|
+
return /* @__PURE__ */ jsx123("div", { className: ["grid gap-3 md:grid-cols-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs95("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", children: [
|
|
3674
|
+
/* @__PURE__ */ jsxs95("div", { className: "flex items-center justify-between gap-3", children: [
|
|
3675
|
+
/* @__PURE__ */ jsx123("span", { className: "kicker", children: item.quarter ?? `0${index + 1}` }),
|
|
3676
|
+
item.status ? /* @__PURE__ */ jsx123(Badge, { children: item.status }) : null
|
|
3529
3677
|
] }),
|
|
3530
|
-
/* @__PURE__ */
|
|
3531
|
-
item.description ? /* @__PURE__ */
|
|
3678
|
+
/* @__PURE__ */ jsx123("h3", { className: "mt-4 font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3679
|
+
item.description ? /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
3532
3680
|
] }, index)) });
|
|
3533
3681
|
}
|
|
3534
3682
|
|
|
3535
3683
|
// src/components/feedback/InlineStatus.tsx
|
|
3536
|
-
import { jsx as
|
|
3684
|
+
import { jsx as jsx124, jsxs as jsxs96 } from "react/jsx-runtime";
|
|
3537
3685
|
var toneClasses5 = {
|
|
3538
3686
|
neutral: "bg-[var(--tapiz-text-muted)]",
|
|
3539
3687
|
success: "bg-[var(--tapiz-success)]",
|
|
@@ -3542,8 +3690,8 @@ var toneClasses5 = {
|
|
|
3542
3690
|
info: "bg-[var(--tapiz-info)]"
|
|
3543
3691
|
};
|
|
3544
3692
|
function InlineStatus({ tone: tone2 = "neutral", children, pulse = false, className = "" }) {
|
|
3545
|
-
return /* @__PURE__ */
|
|
3546
|
-
/* @__PURE__ */
|
|
3693
|
+
return /* @__PURE__ */ jsxs96("span", { className: ["inline-flex items-center gap-2 text-sm text-[var(--tapiz-text-muted)]", className].filter(Boolean).join(" "), children: [
|
|
3694
|
+
/* @__PURE__ */ jsx124("span", { className: ["h-2 w-2 rounded-full", toneClasses5[tone2], pulse ? "animate-pulse" : ""].filter(Boolean).join(" ") }),
|
|
3547
3695
|
children
|
|
3548
3696
|
] });
|
|
3549
3697
|
}
|
|
@@ -3638,6 +3786,7 @@ export {
|
|
|
3638
3786
|
FormulaIcon,
|
|
3639
3787
|
FunnelChart,
|
|
3640
3788
|
Gear,
|
|
3789
|
+
GitHubIcon,
|
|
3641
3790
|
Globe,
|
|
3642
3791
|
GooglePlayIcon,
|
|
3643
3792
|
GraduationCap,
|
|
@@ -3664,6 +3813,7 @@ export {
|
|
|
3664
3813
|
KanbanBoard,
|
|
3665
3814
|
Kbd,
|
|
3666
3815
|
KeyValueList,
|
|
3816
|
+
LandingNavbarShell,
|
|
3667
3817
|
Layers,
|
|
3668
3818
|
LoadingOverlay,
|
|
3669
3819
|
LockIcon,
|
|
@@ -3750,6 +3900,7 @@ export {
|
|
|
3750
3900
|
TextIcon,
|
|
3751
3901
|
Textarea,
|
|
3752
3902
|
TextareaCounter,
|
|
3903
|
+
ThemeIconButton,
|
|
3753
3904
|
Timeline,
|
|
3754
3905
|
Toast,
|
|
3755
3906
|
ToastProvider,
|