@tapizlabs/ui 0.2.20 → 0.2.21
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 +23 -1
- package/dist/index.js +524 -395
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -998,7 +998,7 @@ function Checkbox({
|
|
|
998
998
|
height: s.icon,
|
|
999
999
|
viewBox: "0 0 12 12",
|
|
1000
1000
|
fill: "none",
|
|
1001
|
-
stroke: "
|
|
1001
|
+
stroke: "var(--color-ink-000)",
|
|
1002
1002
|
strokeWidth: "2.2",
|
|
1003
1003
|
strokeLinecap: "square",
|
|
1004
1004
|
children: /* @__PURE__ */ jsx17("polyline", { points: "1.5,6 4.5,9.5 10.5,2.5" })
|
|
@@ -2752,33 +2752,161 @@ function Drawer({ open, onClose, title, description, children, footer, side = "r
|
|
|
2752
2752
|
] });
|
|
2753
2753
|
}
|
|
2754
2754
|
|
|
2755
|
-
// src/components/overlays/
|
|
2755
|
+
// src/components/overlays/SidePanel.tsx
|
|
2756
|
+
import { useEffect as useEffect4, useId as useId4, useState as useState10 } from "react";
|
|
2757
|
+
import { createPortal as createPortal5 } from "react-dom";
|
|
2756
2758
|
import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
2759
|
+
var widthRem = {
|
|
2760
|
+
md: 28,
|
|
2761
|
+
lg: 42,
|
|
2762
|
+
xl: 48
|
|
2763
|
+
};
|
|
2764
|
+
var MOBILE_QUERY = "(max-width: 639px)";
|
|
2765
|
+
var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
|
|
2766
|
+
function SidePanel({
|
|
2767
|
+
isOpen,
|
|
2768
|
+
onClose,
|
|
2769
|
+
title,
|
|
2770
|
+
subtitle,
|
|
2771
|
+
icon,
|
|
2772
|
+
footer,
|
|
2773
|
+
children,
|
|
2774
|
+
width = "md",
|
|
2775
|
+
side = "right",
|
|
2776
|
+
closeLabel = "Close panel"
|
|
2777
|
+
}) {
|
|
2778
|
+
const titleId = useId4();
|
|
2779
|
+
const [mounted, setMounted] = useState10(isOpen);
|
|
2780
|
+
const [shown, setShown] = useState10(false);
|
|
2781
|
+
const [isMobile, setIsMobile] = useState10(
|
|
2782
|
+
() => typeof window !== "undefined" && window.matchMedia(MOBILE_QUERY).matches
|
|
2783
|
+
);
|
|
2784
|
+
const [reduceMotion, setReduceMotion] = useState10(
|
|
2785
|
+
() => typeof window !== "undefined" && window.matchMedia(REDUCED_MOTION_QUERY).matches
|
|
2786
|
+
);
|
|
2787
|
+
if (isOpen && !mounted) setMounted(true);
|
|
2788
|
+
if (!isOpen && shown) setShown(false);
|
|
2789
|
+
useEffect4(() => {
|
|
2790
|
+
if (isOpen) {
|
|
2791
|
+
const raf = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
|
|
2792
|
+
return () => cancelAnimationFrame(raf);
|
|
2793
|
+
}
|
|
2794
|
+
const timer = setTimeout(() => setMounted(false), 250);
|
|
2795
|
+
return () => clearTimeout(timer);
|
|
2796
|
+
}, [isOpen]);
|
|
2797
|
+
useEffect4(() => {
|
|
2798
|
+
const mobileMq = window.matchMedia(MOBILE_QUERY);
|
|
2799
|
+
const motionMq = window.matchMedia(REDUCED_MOTION_QUERY);
|
|
2800
|
+
const sync = () => {
|
|
2801
|
+
setIsMobile(mobileMq.matches);
|
|
2802
|
+
setReduceMotion(motionMq.matches);
|
|
2803
|
+
};
|
|
2804
|
+
sync();
|
|
2805
|
+
mobileMq.addEventListener("change", sync);
|
|
2806
|
+
motionMq.addEventListener("change", sync);
|
|
2807
|
+
return () => {
|
|
2808
|
+
mobileMq.removeEventListener("change", sync);
|
|
2809
|
+
motionMq.removeEventListener("change", sync);
|
|
2810
|
+
};
|
|
2811
|
+
}, []);
|
|
2812
|
+
useEffect4(() => {
|
|
2813
|
+
if (!isOpen) return;
|
|
2814
|
+
const html = document.documentElement.style.overflow;
|
|
2815
|
+
const body = document.body.style.overflow;
|
|
2816
|
+
document.documentElement.style.overflow = "hidden";
|
|
2817
|
+
document.body.style.overflow = "hidden";
|
|
2818
|
+
const onKeyDown = (e) => {
|
|
2819
|
+
if (e.key === "Escape") onClose();
|
|
2820
|
+
};
|
|
2821
|
+
document.addEventListener("keydown", onKeyDown);
|
|
2822
|
+
return () => {
|
|
2823
|
+
document.documentElement.style.overflow = html;
|
|
2824
|
+
document.body.style.overflow = body;
|
|
2825
|
+
document.removeEventListener("keydown", onKeyDown);
|
|
2826
|
+
};
|
|
2827
|
+
}, [isOpen, onClose]);
|
|
2828
|
+
if (!mounted) return null;
|
|
2829
|
+
const hiddenOffset = side === "right" ? "100%" : "-100%";
|
|
2830
|
+
const panelStyle = {
|
|
2831
|
+
maxWidth: isMobile ? "100%" : `${widthRem[width]}rem`,
|
|
2832
|
+
transform: shown ? "translateX(0)" : `translateX(${hiddenOffset})`,
|
|
2833
|
+
transition: reduceMotion ? "none" : "transform 200ms ease-out",
|
|
2834
|
+
willChange: "transform"
|
|
2835
|
+
};
|
|
2836
|
+
return createPortal5(
|
|
2837
|
+
/* @__PURE__ */ jsx66(
|
|
2838
|
+
"div",
|
|
2839
|
+
{
|
|
2840
|
+
role: "dialog",
|
|
2841
|
+
"aria-modal": "true",
|
|
2842
|
+
"aria-labelledby": titleId,
|
|
2843
|
+
className: `fixed inset-0 z-50 flex bg-[rgba(5,6,8,0.75)] backdrop-blur-[2px] ${side === "right" ? "justify-end" : "justify-start"} ${shown ? "opacity-100" : "opacity-0"}`,
|
|
2844
|
+
style: { transition: reduceMotion ? "none" : "opacity 200ms ease" },
|
|
2845
|
+
onClick: (e) => e.target === e.currentTarget && onClose(),
|
|
2846
|
+
children: /* @__PURE__ */ jsxs47(
|
|
2847
|
+
"div",
|
|
2848
|
+
{
|
|
2849
|
+
className: `flex h-full max-sm:h-dvh w-full flex-col overflow-hidden border-t-2 border-t-primary-300 bg-ink-200 ${side === "right" ? "border-l border-border-hi max-sm:border-l-0" : "border-r border-border-hi max-sm:border-r-0"}`,
|
|
2850
|
+
style: panelStyle,
|
|
2851
|
+
children: [
|
|
2852
|
+
/* @__PURE__ */ jsxs47("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3 sm:px-5", children: [
|
|
2853
|
+
/* @__PURE__ */ jsxs47("div", { className: "flex min-w-0 items-center gap-3", children: [
|
|
2854
|
+
icon && /* @__PURE__ */ jsx66("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center bg-ink-300 border border-border-hi text-primary-300", children: icon }),
|
|
2855
|
+
/* @__PURE__ */ jsxs47("div", { className: "min-w-0", children: [
|
|
2856
|
+
/* @__PURE__ */ jsx66("h3", { id: titleId, className: "truncate font-display text-[15px] font-semibold text-txt-1", children: title }),
|
|
2857
|
+
subtitle && /* @__PURE__ */ jsx66("p", { className: "mt-0.5 truncate font-mono text-[10px] tracking-widest text-primary-300", children: subtitle })
|
|
2858
|
+
] })
|
|
2859
|
+
] }),
|
|
2860
|
+
/* @__PURE__ */ jsx66(
|
|
2861
|
+
"button",
|
|
2862
|
+
{
|
|
2863
|
+
type: "button",
|
|
2864
|
+
onClick: onClose,
|
|
2865
|
+
"aria-label": closeLabel,
|
|
2866
|
+
title: closeLabel,
|
|
2867
|
+
className: "flex h-8 w-8 shrink-0 items-center justify-center border border-transparent text-txt-3 transition-colors hover:border-border-hi hover:text-txt-1",
|
|
2868
|
+
children: /* @__PURE__ */ jsx66(X, { size: 16 })
|
|
2869
|
+
}
|
|
2870
|
+
)
|
|
2871
|
+
] }),
|
|
2872
|
+
/* @__PURE__ */ jsx66("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-5", children }),
|
|
2873
|
+
footer && /* @__PURE__ */ jsx66("div", { className: "shrink-0 border-t border-border px-4 py-3 sm:px-5", children: footer })
|
|
2874
|
+
]
|
|
2875
|
+
}
|
|
2876
|
+
)
|
|
2877
|
+
}
|
|
2878
|
+
),
|
|
2879
|
+
document.body
|
|
2880
|
+
);
|
|
2881
|
+
}
|
|
2882
|
+
|
|
2883
|
+
// src/components/overlays/Popover.tsx
|
|
2884
|
+
import { jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
2757
2885
|
function Popover({ trigger, children, open = false, align = "start", className = "" }) {
|
|
2758
|
-
return /* @__PURE__ */
|
|
2886
|
+
return /* @__PURE__ */ jsxs48("div", { className: `relative inline-block ${className}`, children: [
|
|
2759
2887
|
trigger,
|
|
2760
|
-
open ? /* @__PURE__ */
|
|
2888
|
+
open ? /* @__PURE__ */ jsx67("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
|
|
2761
2889
|
] });
|
|
2762
2890
|
}
|
|
2763
2891
|
|
|
2764
2892
|
// src/components/overlays/CommandMenu.tsx
|
|
2765
|
-
import { jsx as
|
|
2893
|
+
import { jsx as jsx68, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
2766
2894
|
function CommandMenu({ open, onClose, query = "", onQueryChange, groups, placeholder = "Search commands\u2026", empty = "No commands found." }) {
|
|
2767
2895
|
if (!open) return null;
|
|
2768
2896
|
const hasItems = groups.some((group) => group.items.length > 0);
|
|
2769
|
-
return /* @__PURE__ */
|
|
2770
|
-
/* @__PURE__ */
|
|
2771
|
-
/* @__PURE__ */
|
|
2772
|
-
!hasItems ? /* @__PURE__ */
|
|
2773
|
-
groups.map((group, groupIndex) => /* @__PURE__ */
|
|
2774
|
-
group.label ? /* @__PURE__ */
|
|
2775
|
-
group.items.map((item) => /* @__PURE__ */
|
|
2776
|
-
item.icon ? /* @__PURE__ */
|
|
2777
|
-
/* @__PURE__ */
|
|
2778
|
-
/* @__PURE__ */
|
|
2779
|
-
item.description ? /* @__PURE__ */
|
|
2897
|
+
return /* @__PURE__ */ jsx68("div", { className: "fixed inset-0 z-50 grid place-items-start bg-[var(--tapiz-bg-overlay)] px-4 pt-[12vh]", onClick: onClose, children: /* @__PURE__ */ jsxs49("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: [
|
|
2898
|
+
/* @__PURE__ */ jsx68("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-3", children: /* @__PURE__ */ jsx68(SearchInput, { value: query, onChange: (value) => onQueryChange?.(value), placeholder, autoFocus: true }) }),
|
|
2899
|
+
/* @__PURE__ */ jsxs49("div", { className: "max-h-[50vh] overflow-auto p-2", children: [
|
|
2900
|
+
!hasItems ? /* @__PURE__ */ jsx68("div", { className: "p-6 text-center text-sm text-[var(--tapiz-text-muted)]", children: empty }) : null,
|
|
2901
|
+
groups.map((group, groupIndex) => /* @__PURE__ */ jsxs49("div", { className: "py-2", children: [
|
|
2902
|
+
group.label ? /* @__PURE__ */ jsx68("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,
|
|
2903
|
+
group.items.map((item) => /* @__PURE__ */ jsxs49("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: [
|
|
2904
|
+
item.icon ? /* @__PURE__ */ jsx68("span", { className: "grid size-8 place-items-center border border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
|
|
2905
|
+
/* @__PURE__ */ jsxs49("span", { className: "min-w-0 flex-1", children: [
|
|
2906
|
+
/* @__PURE__ */ jsx68("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.label }),
|
|
2907
|
+
item.description ? /* @__PURE__ */ jsx68("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
2780
2908
|
] }),
|
|
2781
|
-
item.shortcut ? /* @__PURE__ */
|
|
2909
|
+
item.shortcut ? /* @__PURE__ */ jsx68("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.shortcut }) : null
|
|
2782
2910
|
] }, item.id))
|
|
2783
2911
|
] }, groupIndex))
|
|
2784
2912
|
] })
|
|
@@ -2786,23 +2914,23 @@ function CommandMenu({ open, onClose, query = "", onQueryChange, groups, placeho
|
|
|
2786
2914
|
}
|
|
2787
2915
|
|
|
2788
2916
|
// src/components/forms/FormField.tsx
|
|
2789
|
-
import { jsx as
|
|
2917
|
+
import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
2790
2918
|
function FormField({ label, hint, error, required, htmlFor, children, className = "" }) {
|
|
2791
|
-
return /* @__PURE__ */
|
|
2792
|
-
label ? /* @__PURE__ */
|
|
2919
|
+
return /* @__PURE__ */ jsxs50("div", { className: `space-y-1.5 ${className}`, children: [
|
|
2920
|
+
label ? /* @__PURE__ */ jsxs50(FieldLabel, { htmlFor, children: [
|
|
2793
2921
|
label,
|
|
2794
2922
|
required ? " *" : ""
|
|
2795
2923
|
] }) : null,
|
|
2796
2924
|
children,
|
|
2797
|
-
error ? /* @__PURE__ */
|
|
2925
|
+
error ? /* @__PURE__ */ jsx69(FormError, { message: String(error) }) : hint ? /* @__PURE__ */ jsx69(FieldHint, { children: hint }) : null
|
|
2798
2926
|
] });
|
|
2799
2927
|
}
|
|
2800
2928
|
|
|
2801
2929
|
// src/components/forms/Switch.tsx
|
|
2802
|
-
import { jsx as
|
|
2930
|
+
import { jsx as jsx70, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
2803
2931
|
function Switch({ checked = false, onChange, disabled, label, description, className = "" }) {
|
|
2804
|
-
return /* @__PURE__ */
|
|
2805
|
-
/* @__PURE__ */
|
|
2932
|
+
return /* @__PURE__ */ jsxs51("label", { className: `flex cursor-pointer items-start gap-3 ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`, children: [
|
|
2933
|
+
/* @__PURE__ */ jsx70(
|
|
2806
2934
|
"button",
|
|
2807
2935
|
{
|
|
2808
2936
|
type: "button",
|
|
@@ -2811,22 +2939,22 @@ function Switch({ checked = false, onChange, disabled, label, description, class
|
|
|
2811
2939
|
disabled,
|
|
2812
2940
|
onClick: () => onChange?.(!checked),
|
|
2813
2941
|
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)]"}`,
|
|
2814
|
-
children: /* @__PURE__ */
|
|
2942
|
+
children: /* @__PURE__ */ jsx70("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"}` })
|
|
2815
2943
|
}
|
|
2816
2944
|
),
|
|
2817
|
-
label || description ? /* @__PURE__ */
|
|
2818
|
-
label ? /* @__PURE__ */
|
|
2819
|
-
description ? /* @__PURE__ */
|
|
2945
|
+
label || description ? /* @__PURE__ */ jsxs51("span", { children: [
|
|
2946
|
+
label ? /* @__PURE__ */ jsx70("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
|
|
2947
|
+
description ? /* @__PURE__ */ jsx70("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
2820
2948
|
] }) : null
|
|
2821
2949
|
] });
|
|
2822
2950
|
}
|
|
2823
2951
|
|
|
2824
2952
|
// src/components/forms/ToggleGroup.tsx
|
|
2825
|
-
import { jsx as
|
|
2953
|
+
import { jsx as jsx71 } from "react/jsx-runtime";
|
|
2826
2954
|
function ToggleGroup({ options, value, onChange, className = "", fullWidth = false }) {
|
|
2827
|
-
return /* @__PURE__ */
|
|
2955
|
+
return /* @__PURE__ */ jsx71("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) => {
|
|
2828
2956
|
const selected = option.value === value;
|
|
2829
|
-
return /* @__PURE__ */
|
|
2957
|
+
return /* @__PURE__ */ jsx71(
|
|
2830
2958
|
"button",
|
|
2831
2959
|
{
|
|
2832
2960
|
type: "button",
|
|
@@ -2841,17 +2969,17 @@ function ToggleGroup({ options, value, onChange, className = "", fullWidth = fal
|
|
|
2841
2969
|
}
|
|
2842
2970
|
|
|
2843
2971
|
// src/components/forms/InputGroup.tsx
|
|
2844
|
-
import { jsx as
|
|
2972
|
+
import { jsx as jsx72, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
2845
2973
|
function InputGroup({ prefix, suffix, children, className = "" }) {
|
|
2846
|
-
return /* @__PURE__ */
|
|
2847
|
-
prefix ? /* @__PURE__ */
|
|
2848
|
-
/* @__PURE__ */
|
|
2849
|
-
suffix ? /* @__PURE__ */
|
|
2974
|
+
return /* @__PURE__ */ jsxs52("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: [
|
|
2975
|
+
prefix ? /* @__PURE__ */ jsx72("div", { className: "flex items-center border-r border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: prefix }) : null,
|
|
2976
|
+
/* @__PURE__ */ jsx72("div", { className: "min-w-0 flex-1 [&_input]:border-0 [&_input]:shadow-none [&_input]:focus:shadow-none", children }),
|
|
2977
|
+
suffix ? /* @__PURE__ */ jsx72("div", { className: "flex items-center border-l border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: suffix }) : null
|
|
2850
2978
|
] });
|
|
2851
2979
|
}
|
|
2852
2980
|
|
|
2853
2981
|
// src/components/feedback/Alert.tsx
|
|
2854
|
-
import { jsx as
|
|
2982
|
+
import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
2855
2983
|
var toneClasses = {
|
|
2856
2984
|
info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)] text-[var(--tapiz-info)]",
|
|
2857
2985
|
success: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)] text-[var(--tapiz-success)]",
|
|
@@ -2860,18 +2988,18 @@ var toneClasses = {
|
|
|
2860
2988
|
neutral: "border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-secondary)]"
|
|
2861
2989
|
};
|
|
2862
2990
|
function Alert2({ tone: tone2 = "info", title, children, icon, actions, className = "" }) {
|
|
2863
|
-
return /* @__PURE__ */
|
|
2864
|
-
icon ? /* @__PURE__ */
|
|
2865
|
-
/* @__PURE__ */
|
|
2866
|
-
title ? /* @__PURE__ */
|
|
2867
|
-
children ? /* @__PURE__ */
|
|
2991
|
+
return /* @__PURE__ */ jsxs53("div", { className: `flex gap-3 border p-4 ${toneClasses[tone2]} ${className}`, children: [
|
|
2992
|
+
icon ? /* @__PURE__ */ jsx73("div", { className: "mt-0.5 shrink-0", children: icon }) : null,
|
|
2993
|
+
/* @__PURE__ */ jsxs53("div", { className: "min-w-0 flex-1", children: [
|
|
2994
|
+
title ? /* @__PURE__ */ jsx73("div", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
2995
|
+
children ? /* @__PURE__ */ jsx73("div", { className: "mt-1 text-sm text-[var(--tapiz-text-secondary)]", children }) : null
|
|
2868
2996
|
] }),
|
|
2869
|
-
actions ? /* @__PURE__ */
|
|
2997
|
+
actions ? /* @__PURE__ */ jsx73("div", { className: "shrink-0", children: actions }) : null
|
|
2870
2998
|
] });
|
|
2871
2999
|
}
|
|
2872
3000
|
|
|
2873
3001
|
// src/components/feedback/Progress.tsx
|
|
2874
|
-
import { jsx as
|
|
3002
|
+
import { jsx as jsx74, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
2875
3003
|
var tones = {
|
|
2876
3004
|
accent: "bg-[var(--tapiz-accent)]",
|
|
2877
3005
|
success: "bg-[var(--tapiz-success)]",
|
|
@@ -2880,34 +3008,34 @@ var tones = {
|
|
|
2880
3008
|
};
|
|
2881
3009
|
function Progress({ value, max = 100, label, showValue = false, tone: tone2 = "accent", className = "" }) {
|
|
2882
3010
|
const percentage = Math.max(0, Math.min(100, value / max * 100));
|
|
2883
|
-
return /* @__PURE__ */
|
|
2884
|
-
label || showValue ? /* @__PURE__ */
|
|
2885
|
-
label ? /* @__PURE__ */
|
|
2886
|
-
showValue ? /* @__PURE__ */
|
|
3011
|
+
return /* @__PURE__ */ jsxs54("div", { className, children: [
|
|
3012
|
+
label || showValue ? /* @__PURE__ */ jsxs54("div", { className: "mb-1 flex items-center justify-between gap-3 text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3013
|
+
label ? /* @__PURE__ */ jsx74("span", { children: label }) : /* @__PURE__ */ jsx74("span", {}),
|
|
3014
|
+
showValue ? /* @__PURE__ */ jsxs54("span", { className: "font-mono", children: [
|
|
2887
3015
|
Math.round(percentage),
|
|
2888
3016
|
"%"
|
|
2889
3017
|
] }) : null
|
|
2890
3018
|
] }) : null,
|
|
2891
|
-
/* @__PURE__ */
|
|
3019
|
+
/* @__PURE__ */ jsx74("div", { className: "h-2 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx74("div", { className: `h-full ${tones[tone2]}`, style: { width: `${percentage}%` } }) })
|
|
2892
3020
|
] });
|
|
2893
3021
|
}
|
|
2894
3022
|
|
|
2895
3023
|
// src/components/shared/Avatar.tsx
|
|
2896
|
-
import { jsx as
|
|
3024
|
+
import { jsx as jsx75 } from "react/jsx-runtime";
|
|
2897
3025
|
var sizes = { xs: "size-6 text-[10px]", sm: "size-8 text-xs", md: "size-10 text-sm", lg: "size-14 text-base" };
|
|
2898
3026
|
function Avatar({ src, name = "?", size = "md", className = "" }) {
|
|
2899
3027
|
const initials = name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("") || "?";
|
|
2900
|
-
return src ? /* @__PURE__ */
|
|
3028
|
+
return src ? /* @__PURE__ */ jsx75("img", { src, alt: name, className: `border border-[var(--tapiz-border-strong)] object-cover ${sizes[size]} ${className}` }) : /* @__PURE__ */ jsx75("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 });
|
|
2901
3029
|
}
|
|
2902
3030
|
|
|
2903
3031
|
// src/components/shared/Kbd.tsx
|
|
2904
|
-
import { jsx as
|
|
3032
|
+
import { jsx as jsx76 } from "react/jsx-runtime";
|
|
2905
3033
|
function Kbd({ children, className = "" }) {
|
|
2906
|
-
return /* @__PURE__ */
|
|
3034
|
+
return /* @__PURE__ */ jsx76("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 });
|
|
2907
3035
|
}
|
|
2908
3036
|
|
|
2909
3037
|
// src/components/shared/Timeline.tsx
|
|
2910
|
-
import { jsx as
|
|
3038
|
+
import { jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
2911
3039
|
var tones2 = {
|
|
2912
3040
|
neutral: "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-muted)]",
|
|
2913
3041
|
info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)] text-[var(--tapiz-info)]",
|
|
@@ -2916,94 +3044,94 @@ var tones2 = {
|
|
|
2916
3044
|
danger: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]"
|
|
2917
3045
|
};
|
|
2918
3046
|
function Timeline({ items, className = "" }) {
|
|
2919
|
-
return /* @__PURE__ */
|
|
2920
|
-
/* @__PURE__ */
|
|
2921
|
-
/* @__PURE__ */
|
|
2922
|
-
/* @__PURE__ */
|
|
2923
|
-
/* @__PURE__ */
|
|
2924
|
-
item.time ? /* @__PURE__ */
|
|
3047
|
+
return /* @__PURE__ */ jsx77("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__ */ jsxs55("li", { className: "relative flex gap-3", children: [
|
|
3048
|
+
/* @__PURE__ */ jsx77("span", { className: `z-10 grid size-8 shrink-0 place-items-center border text-xs ${tones2[item.tone ?? "neutral"]}`, children: item.icon ?? "\u2022" }),
|
|
3049
|
+
/* @__PURE__ */ jsxs55("span", { className: "min-w-0 flex-1 pb-2", children: [
|
|
3050
|
+
/* @__PURE__ */ jsxs55("span", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
|
|
3051
|
+
/* @__PURE__ */ jsx77("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3052
|
+
item.time ? /* @__PURE__ */ jsx77("span", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
2925
3053
|
] }),
|
|
2926
|
-
item.description ? /* @__PURE__ */
|
|
3054
|
+
item.description ? /* @__PURE__ */ jsx77("span", { className: "mt-1 block text-sm text-[var(--tapiz-text-secondary)]", children: item.description }) : null
|
|
2927
3055
|
] })
|
|
2928
3056
|
] }, item.id)) });
|
|
2929
3057
|
}
|
|
2930
3058
|
|
|
2931
3059
|
// src/components/shared/KeyValueList.tsx
|
|
2932
|
-
import { jsx as
|
|
3060
|
+
import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
2933
3061
|
function KeyValueList({ items, className = "", density = "normal" }) {
|
|
2934
|
-
return /* @__PURE__ */
|
|
2935
|
-
/* @__PURE__ */
|
|
2936
|
-
/* @__PURE__ */
|
|
2937
|
-
/* @__PURE__ */
|
|
2938
|
-
item.description ? /* @__PURE__ */
|
|
3062
|
+
return /* @__PURE__ */ jsx78("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__ */ jsxs56("div", { className: `grid gap-2 ${density === "compact" ? "p-3 md:grid-cols-[160px_1fr]" : "p-4 md:grid-cols-[220px_1fr]"}`, children: [
|
|
3063
|
+
/* @__PURE__ */ jsx78("dt", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: item.keyLabel }),
|
|
3064
|
+
/* @__PURE__ */ jsxs56("dd", { children: [
|
|
3065
|
+
/* @__PURE__ */ jsx78("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.value }),
|
|
3066
|
+
item.description ? /* @__PURE__ */ jsx78("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
2939
3067
|
] })
|
|
2940
3068
|
] }, index)) });
|
|
2941
3069
|
}
|
|
2942
3070
|
|
|
2943
3071
|
// src/components/shared/CodeBlock.tsx
|
|
2944
|
-
import { jsx as
|
|
3072
|
+
import { jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
2945
3073
|
function CodeBlock({ children, language, title, actions, className = "" }) {
|
|
2946
|
-
return /* @__PURE__ */
|
|
2947
|
-
title || language || actions ? /* @__PURE__ */
|
|
2948
|
-
/* @__PURE__ */
|
|
3074
|
+
return /* @__PURE__ */ jsxs57("figure", { className: `overflow-hidden border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
|
|
3075
|
+
title || language || actions ? /* @__PURE__ */ jsxs57("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: [
|
|
3076
|
+
/* @__PURE__ */ jsx79("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title ?? language }),
|
|
2949
3077
|
actions
|
|
2950
3078
|
] }) : null,
|
|
2951
|
-
/* @__PURE__ */
|
|
3079
|
+
/* @__PURE__ */ jsx79("pre", { className: "overflow-auto p-4 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children: /* @__PURE__ */ jsx79("code", { children }) })
|
|
2952
3080
|
] });
|
|
2953
3081
|
}
|
|
2954
3082
|
|
|
2955
3083
|
// src/components/marketing/LogoCloud.tsx
|
|
2956
|
-
import { jsx as
|
|
3084
|
+
import { jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
2957
3085
|
function LogoCloud({ title, items, className = "" }) {
|
|
2958
|
-
return /* @__PURE__ */
|
|
2959
|
-
title ? /* @__PURE__ */
|
|
2960
|
-
/* @__PURE__ */
|
|
3086
|
+
return /* @__PURE__ */ jsx80("section", { className: `border-y border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] py-8 ${className}`, children: /* @__PURE__ */ jsxs58("div", { className: "mx-auto max-w-7xl px-[var(--tapiz-space-page-x)]", children: [
|
|
3087
|
+
title ? /* @__PURE__ */ jsx80("p", { className: "mb-6 text-center font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title }) : null,
|
|
3088
|
+
/* @__PURE__ */ jsx80("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4 lg:grid-cols-6", children: items.map((item) => /* @__PURE__ */ jsx80("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)) })
|
|
2961
3089
|
] }) });
|
|
2962
3090
|
}
|
|
2963
3091
|
|
|
2964
3092
|
// src/components/marketing/TestimonialCard.tsx
|
|
2965
|
-
import { jsx as
|
|
3093
|
+
import { jsx as jsx81, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
2966
3094
|
function TestimonialCard({ quote, author, role, avatarSrc, className = "", variant = "surface" }) {
|
|
2967
|
-
return /* @__PURE__ */
|
|
2968
|
-
/* @__PURE__ */
|
|
3095
|
+
return /* @__PURE__ */ jsxs59("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: [
|
|
3096
|
+
/* @__PURE__ */ jsxs59("blockquote", { className: "text-base leading-7 text-[var(--tapiz-text-secondary)]", children: [
|
|
2969
3097
|
"\u201C",
|
|
2970
3098
|
quote,
|
|
2971
3099
|
"\u201D"
|
|
2972
3100
|
] }),
|
|
2973
|
-
/* @__PURE__ */
|
|
2974
|
-
/* @__PURE__ */
|
|
2975
|
-
/* @__PURE__ */
|
|
2976
|
-
/* @__PURE__ */
|
|
2977
|
-
role ? /* @__PURE__ */
|
|
3101
|
+
/* @__PURE__ */ jsxs59("figcaption", { className: "mt-5 flex items-center gap-3", children: [
|
|
3102
|
+
/* @__PURE__ */ jsx81(Avatar, { name: author, src: avatarSrc, size: "sm" }),
|
|
3103
|
+
/* @__PURE__ */ jsxs59("span", { children: [
|
|
3104
|
+
/* @__PURE__ */ jsx81("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: author }),
|
|
3105
|
+
role ? /* @__PURE__ */ jsx81("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: role }) : null
|
|
2978
3106
|
] })
|
|
2979
3107
|
] })
|
|
2980
3108
|
] });
|
|
2981
3109
|
}
|
|
2982
3110
|
|
|
2983
3111
|
// src/components/marketing/PricingCard.tsx
|
|
2984
|
-
import { jsx as
|
|
3112
|
+
import { jsx as jsx82, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
2985
3113
|
function PricingCard({ name, price, description, features = [], cta, highlighted = false, className = "" }) {
|
|
2986
|
-
return /* @__PURE__ */
|
|
2987
|
-
/* @__PURE__ */
|
|
2988
|
-
/* @__PURE__ */
|
|
2989
|
-
description ? /* @__PURE__ */
|
|
2990
|
-
/* @__PURE__ */
|
|
2991
|
-
/* @__PURE__ */
|
|
2992
|
-
/* @__PURE__ */
|
|
2993
|
-
/* @__PURE__ */
|
|
3114
|
+
return /* @__PURE__ */ jsxs60("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: [
|
|
3115
|
+
/* @__PURE__ */ jsxs60("div", { className: "flex-1", children: [
|
|
3116
|
+
/* @__PURE__ */ jsx82("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: name }),
|
|
3117
|
+
description ? /* @__PURE__ */ jsx82("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
|
|
3118
|
+
/* @__PURE__ */ jsx82("div", { className: "mt-6 text-4xl font-semibold tracking-tight text-[var(--tapiz-text-primary)]", children: price }),
|
|
3119
|
+
/* @__PURE__ */ jsx82("ul", { className: "mt-6 space-y-3 text-sm text-[var(--tapiz-text-secondary)]", children: features.map((feature, index) => /* @__PURE__ */ jsxs60("li", { className: "flex gap-2", children: [
|
|
3120
|
+
/* @__PURE__ */ jsx82("span", { className: "text-[var(--tapiz-success)]", children: "\u2713" }),
|
|
3121
|
+
/* @__PURE__ */ jsx82("span", { children: feature })
|
|
2994
3122
|
] }, index)) })
|
|
2995
3123
|
] }),
|
|
2996
|
-
/* @__PURE__ */
|
|
3124
|
+
/* @__PURE__ */ jsx82("div", { className: "mt-6", children: cta ?? /* @__PURE__ */ jsx82(Button, { variant: highlighted ? "primary" : "secondary", fullWidth: true, children: "Get started" }) })
|
|
2997
3125
|
] });
|
|
2998
3126
|
}
|
|
2999
3127
|
|
|
3000
3128
|
// src/components/marketing/StatsBand.tsx
|
|
3001
|
-
import { jsx as
|
|
3129
|
+
import { jsx as jsx83, jsxs as jsxs61 } from "react/jsx-runtime";
|
|
3002
3130
|
function StatsBand({ items, className = "" }) {
|
|
3003
|
-
return /* @__PURE__ */
|
|
3004
|
-
/* @__PURE__ */
|
|
3005
|
-
/* @__PURE__ */
|
|
3006
|
-
item.description ? /* @__PURE__ */
|
|
3131
|
+
return /* @__PURE__ */ jsx83("section", { className: `border-y border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-inverse)] text-[var(--tapiz-text-inverse)] ${className}`, children: /* @__PURE__ */ jsx83("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__ */ jsxs61("div", { className: "p-6 md:p-8", children: [
|
|
3132
|
+
/* @__PURE__ */ jsx83("div", { className: "text-3xl font-semibold tracking-tight", children: item.value }),
|
|
3133
|
+
/* @__PURE__ */ jsx83("div", { className: "mt-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] opacity-70", children: item.label }),
|
|
3134
|
+
item.description ? /* @__PURE__ */ jsx83("div", { className: "mt-3 text-sm opacity-70", children: item.description }) : null
|
|
3007
3135
|
] }, index)) }) });
|
|
3008
3136
|
}
|
|
3009
3137
|
|
|
@@ -3042,7 +3170,7 @@ var tapizFrameworkPresets = {
|
|
|
3042
3170
|
};
|
|
3043
3171
|
|
|
3044
3172
|
// src/components/layout/Container.tsx
|
|
3045
|
-
import { jsx as
|
|
3173
|
+
import { jsx as jsx84 } from "react/jsx-runtime";
|
|
3046
3174
|
var sizeClasses2 = {
|
|
3047
3175
|
sm: "max-w-3xl",
|
|
3048
3176
|
md: "max-w-5xl",
|
|
@@ -3051,7 +3179,7 @@ var sizeClasses2 = {
|
|
|
3051
3179
|
full: "max-w-none"
|
|
3052
3180
|
};
|
|
3053
3181
|
function Container({ children, size = "lg", padded = true, className = "", style }) {
|
|
3054
|
-
return /* @__PURE__ */
|
|
3182
|
+
return /* @__PURE__ */ jsx84(
|
|
3055
3183
|
"div",
|
|
3056
3184
|
{
|
|
3057
3185
|
className: ["mx-auto w-full", sizeClasses2[size], padded ? "px-[var(--tapiz-space-page-x)]" : "", className].filter(Boolean).join(" "),
|
|
@@ -3062,7 +3190,7 @@ function Container({ children, size = "lg", padded = true, className = "", style
|
|
|
3062
3190
|
}
|
|
3063
3191
|
|
|
3064
3192
|
// src/components/layout/Surface.tsx
|
|
3065
|
-
import { jsx as
|
|
3193
|
+
import { jsx as jsx85 } from "react/jsx-runtime";
|
|
3066
3194
|
var variantClasses5 = {
|
|
3067
3195
|
canvas: "bg-[var(--tapiz-bg-page)] text-[var(--tapiz-text-primary)]",
|
|
3068
3196
|
surface: "bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-primary)]",
|
|
@@ -3079,7 +3207,7 @@ var paddingClasses2 = {
|
|
|
3079
3207
|
xl: "p-8"
|
|
3080
3208
|
};
|
|
3081
3209
|
function Surface({ children, variant = "surface", padding = "md", bordered = true, className = "", style }) {
|
|
3082
|
-
return /* @__PURE__ */
|
|
3210
|
+
return /* @__PURE__ */ jsx85(
|
|
3083
3211
|
"section",
|
|
3084
3212
|
{
|
|
3085
3213
|
className: [variantClasses5[variant], paddingClasses2[padding], bordered && variant !== "brutal" ? "border border-[var(--tapiz-border-subtle)]" : "", className].filter(Boolean).join(" "),
|
|
@@ -3090,23 +3218,23 @@ function Surface({ children, variant = "surface", padding = "md", bordered = tru
|
|
|
3090
3218
|
}
|
|
3091
3219
|
|
|
3092
3220
|
// src/components/layout/Divider.tsx
|
|
3093
|
-
import { jsx as
|
|
3221
|
+
import { jsx as jsx86, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
3094
3222
|
function Divider({ orientation = "horizontal", label, className = "" }) {
|
|
3095
3223
|
if (orientation === "vertical") {
|
|
3096
|
-
return /* @__PURE__ */
|
|
3224
|
+
return /* @__PURE__ */ jsx86("div", { className: `mx-2 min-h-6 w-px bg-[var(--tapiz-border-subtle)] ${className}`, "aria-hidden": "true" });
|
|
3097
3225
|
}
|
|
3098
3226
|
if (label) {
|
|
3099
|
-
return /* @__PURE__ */
|
|
3100
|
-
/* @__PURE__ */
|
|
3101
|
-
/* @__PURE__ */
|
|
3102
|
-
/* @__PURE__ */
|
|
3227
|
+
return /* @__PURE__ */ jsxs62("div", { className: `flex items-center gap-3 ${className}`, children: [
|
|
3228
|
+
/* @__PURE__ */ jsx86("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" }),
|
|
3229
|
+
/* @__PURE__ */ jsx86("span", { className: "font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: label }),
|
|
3230
|
+
/* @__PURE__ */ jsx86("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" })
|
|
3103
3231
|
] });
|
|
3104
3232
|
}
|
|
3105
|
-
return /* @__PURE__ */
|
|
3233
|
+
return /* @__PURE__ */ jsx86("hr", { className: `border-[var(--tapiz-border-subtle)] ${className}` });
|
|
3106
3234
|
}
|
|
3107
3235
|
|
|
3108
3236
|
// src/components/layout/ResponsiveGrid.tsx
|
|
3109
|
-
import { jsx as
|
|
3237
|
+
import { jsx as jsx87 } from "react/jsx-runtime";
|
|
3110
3238
|
var gapClasses3 = {
|
|
3111
3239
|
sm: "gap-3",
|
|
3112
3240
|
md: "gap-4",
|
|
@@ -3114,7 +3242,7 @@ var gapClasses3 = {
|
|
|
3114
3242
|
xl: "gap-8"
|
|
3115
3243
|
};
|
|
3116
3244
|
function ResponsiveGrid({ children, min = "18rem", gap = "md", className = "", style }) {
|
|
3117
|
-
return /* @__PURE__ */
|
|
3245
|
+
return /* @__PURE__ */ jsx87(
|
|
3118
3246
|
"div",
|
|
3119
3247
|
{
|
|
3120
3248
|
className: `grid ${gapClasses3[gap]} ${className}`,
|
|
@@ -3125,7 +3253,7 @@ function ResponsiveGrid({ children, min = "18rem", gap = "md", className = "", s
|
|
|
3125
3253
|
}
|
|
3126
3254
|
|
|
3127
3255
|
// src/components/data-display/Sparkline.tsx
|
|
3128
|
-
import { jsx as
|
|
3256
|
+
import { jsx as jsx88, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
3129
3257
|
function Sparkline({ values, width = 160, height = 48, label = "Trend", className = "", style }) {
|
|
3130
3258
|
const safeValues = values.length ? values : [0];
|
|
3131
3259
|
const min = Math.min(...safeValues);
|
|
@@ -3137,40 +3265,40 @@ function Sparkline({ values, width = 160, height = 48, label = "Trend", classNam
|
|
|
3137
3265
|
const y = height - (value - min) / range * (height - 6) - 3;
|
|
3138
3266
|
return `${x},${y}`;
|
|
3139
3267
|
}).join(" ");
|
|
3140
|
-
return /* @__PURE__ */
|
|
3141
|
-
/* @__PURE__ */
|
|
3142
|
-
/* @__PURE__ */
|
|
3268
|
+
return /* @__PURE__ */ jsxs63("svg", { className, style, width, height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": label, children: [
|
|
3269
|
+
/* @__PURE__ */ jsx88("polyline", { points, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "miter" }),
|
|
3270
|
+
/* @__PURE__ */ jsx88("line", { x1: "0", x2: width, y1: height - 1, y2: height - 1, stroke: "var(--tapiz-border-subtle)", strokeWidth: "1" })
|
|
3143
3271
|
] });
|
|
3144
3272
|
}
|
|
3145
3273
|
|
|
3146
3274
|
// src/components/data-display/BarList.tsx
|
|
3147
|
-
import { jsx as
|
|
3275
|
+
import { jsx as jsx89, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
3148
3276
|
function BarList({ items, max, valueFormatter = (value) => value, className = "" }) {
|
|
3149
3277
|
const computedMax = max ?? Math.max(1, ...items.map((item) => item.value));
|
|
3150
|
-
return /* @__PURE__ */
|
|
3278
|
+
return /* @__PURE__ */ jsx89("div", { className: `space-y-3 ${className}`, children: items.map((item, index) => {
|
|
3151
3279
|
const percent = Math.max(0, Math.min(100, item.value / computedMax * 100));
|
|
3152
|
-
return /* @__PURE__ */
|
|
3153
|
-
/* @__PURE__ */
|
|
3154
|
-
/* @__PURE__ */
|
|
3155
|
-
/* @__PURE__ */
|
|
3280
|
+
return /* @__PURE__ */ jsxs64("div", { children: [
|
|
3281
|
+
/* @__PURE__ */ jsxs64("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
|
|
3282
|
+
/* @__PURE__ */ jsx89("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: item.label }),
|
|
3283
|
+
/* @__PURE__ */ jsx89("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueFormatter(item.value) })
|
|
3156
3284
|
] }),
|
|
3157
|
-
/* @__PURE__ */
|
|
3158
|
-
item.detail ? /* @__PURE__ */
|
|
3285
|
+
/* @__PURE__ */ jsx89("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx89("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${percent}%` } }) }),
|
|
3286
|
+
item.detail ? /* @__PURE__ */ jsx89("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.detail }) : null
|
|
3159
3287
|
] }, index);
|
|
3160
3288
|
}) });
|
|
3161
3289
|
}
|
|
3162
3290
|
|
|
3163
3291
|
// src/components/data-display/DonutMetric.tsx
|
|
3164
|
-
import { jsx as
|
|
3292
|
+
import { jsx as jsx90, jsxs as jsxs65 } from "react/jsx-runtime";
|
|
3165
3293
|
function DonutMetric({ value, max = 100, label, caption, size = 112, className = "" }) {
|
|
3166
3294
|
const radius = 42;
|
|
3167
3295
|
const circumference = 2 * Math.PI * radius;
|
|
3168
3296
|
const ratio = Math.max(0, Math.min(1, value / max));
|
|
3169
3297
|
const offset = circumference * (1 - ratio);
|
|
3170
|
-
return /* @__PURE__ */
|
|
3171
|
-
/* @__PURE__ */
|
|
3172
|
-
/* @__PURE__ */
|
|
3173
|
-
/* @__PURE__ */
|
|
3298
|
+
return /* @__PURE__ */ jsxs65("div", { className: `inline-flex items-center gap-4 ${className}`, children: [
|
|
3299
|
+
/* @__PURE__ */ jsxs65("svg", { width: size, height: size, viewBox: "0 0 112 112", role: "img", "aria-label": `${Math.round(ratio * 100)}%`, children: [
|
|
3300
|
+
/* @__PURE__ */ jsx90("circle", { cx: "56", cy: "56", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
|
|
3301
|
+
/* @__PURE__ */ jsx90(
|
|
3174
3302
|
"circle",
|
|
3175
3303
|
{
|
|
3176
3304
|
cx: "56",
|
|
@@ -3185,22 +3313,22 @@ function DonutMetric({ value, max = 100, label, caption, size = 112, className =
|
|
|
3185
3313
|
transform: "rotate(-90 56 56)"
|
|
3186
3314
|
}
|
|
3187
3315
|
),
|
|
3188
|
-
/* @__PURE__ */
|
|
3316
|
+
/* @__PURE__ */ jsxs65("text", { x: "56", y: "61", textAnchor: "middle", className: "fill-[var(--tapiz-text-primary)] font-mono text-lg font-bold", children: [
|
|
3189
3317
|
Math.round(ratio * 100),
|
|
3190
3318
|
"%"
|
|
3191
3319
|
] })
|
|
3192
3320
|
] }),
|
|
3193
|
-
label || caption ? /* @__PURE__ */
|
|
3194
|
-
label ? /* @__PURE__ */
|
|
3195
|
-
caption ? /* @__PURE__ */
|
|
3321
|
+
label || caption ? /* @__PURE__ */ jsxs65("div", { children: [
|
|
3322
|
+
label ? /* @__PURE__ */ jsx90("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
|
|
3323
|
+
caption ? /* @__PURE__ */ jsx90("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: caption }) : null
|
|
3196
3324
|
] }) : null
|
|
3197
3325
|
] });
|
|
3198
3326
|
}
|
|
3199
3327
|
|
|
3200
3328
|
// src/components/data-display/FilterChip.tsx
|
|
3201
|
-
import { jsx as
|
|
3329
|
+
import { jsx as jsx91, jsxs as jsxs66 } from "react/jsx-runtime";
|
|
3202
3330
|
function FilterChip({ children, active = false, onRemove, className = "" }) {
|
|
3203
|
-
return /* @__PURE__ */
|
|
3331
|
+
return /* @__PURE__ */ jsxs66(
|
|
3204
3332
|
"span",
|
|
3205
3333
|
{
|
|
3206
3334
|
className: [
|
|
@@ -3210,56 +3338,56 @@ function FilterChip({ children, active = false, onRemove, className = "" }) {
|
|
|
3210
3338
|
].join(" "),
|
|
3211
3339
|
children: [
|
|
3212
3340
|
children,
|
|
3213
|
-
onRemove ? /* @__PURE__ */
|
|
3341
|
+
onRemove ? /* @__PURE__ */ jsx91("button", { type: "button", onClick: onRemove, className: "text-[var(--tapiz-text-muted)] hover:text-[var(--tapiz-danger)]", "aria-label": "Remove filter", children: "\xD7" }) : null
|
|
3214
3342
|
]
|
|
3215
3343
|
}
|
|
3216
3344
|
);
|
|
3217
3345
|
}
|
|
3218
3346
|
|
|
3219
3347
|
// src/components/data-display/DataToolbar.tsx
|
|
3220
|
-
import { jsx as
|
|
3348
|
+
import { jsx as jsx92, jsxs as jsxs67 } from "react/jsx-runtime";
|
|
3221
3349
|
function DataToolbar({ title, description, search, filters, actions, className = "" }) {
|
|
3222
|
-
return /* @__PURE__ */
|
|
3223
|
-
/* @__PURE__ */
|
|
3224
|
-
/* @__PURE__ */
|
|
3225
|
-
title ? /* @__PURE__ */
|
|
3226
|
-
description ? /* @__PURE__ */
|
|
3350
|
+
return /* @__PURE__ */ jsxs67("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 ${className}`, children: [
|
|
3351
|
+
/* @__PURE__ */ jsxs67("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
|
|
3352
|
+
/* @__PURE__ */ jsxs67("div", { children: [
|
|
3353
|
+
title ? /* @__PURE__ */ jsx92("h3", { className: "text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
3354
|
+
description ? /* @__PURE__ */ jsx92("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
3227
3355
|
] }),
|
|
3228
|
-
actions ? /* @__PURE__ */
|
|
3356
|
+
actions ? /* @__PURE__ */ jsx92("div", { className: "flex flex-wrap gap-2", children: actions }) : null
|
|
3229
3357
|
] }),
|
|
3230
|
-
search || filters ? /* @__PURE__ */
|
|
3231
|
-
search ? /* @__PURE__ */
|
|
3232
|
-
filters ? /* @__PURE__ */
|
|
3358
|
+
search || filters ? /* @__PURE__ */ jsxs67("div", { className: "mt-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
|
|
3359
|
+
search ? /* @__PURE__ */ jsx92("div", { className: "min-w-0 flex-1", children: search }) : null,
|
|
3360
|
+
filters ? /* @__PURE__ */ jsx92("div", { className: "flex flex-wrap gap-2", children: filters }) : null
|
|
3233
3361
|
] }) : null
|
|
3234
3362
|
] });
|
|
3235
3363
|
}
|
|
3236
3364
|
|
|
3237
3365
|
// src/components/framework/ResourceCard.tsx
|
|
3238
|
-
import { Fragment as Fragment5, jsx as
|
|
3366
|
+
import { Fragment as Fragment5, jsx as jsx93, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
3239
3367
|
function ResourceCard({ title, description, eyebrow, icon, meta, status, actions, href, className = "" }) {
|
|
3240
|
-
const content = /* @__PURE__ */
|
|
3241
|
-
/* @__PURE__ */
|
|
3242
|
-
/* @__PURE__ */
|
|
3243
|
-
icon ? /* @__PURE__ */
|
|
3244
|
-
/* @__PURE__ */
|
|
3245
|
-
eyebrow ? /* @__PURE__ */
|
|
3246
|
-
/* @__PURE__ */
|
|
3247
|
-
description ? /* @__PURE__ */
|
|
3368
|
+
const content = /* @__PURE__ */ jsxs68(Fragment5, { children: [
|
|
3369
|
+
/* @__PURE__ */ jsxs68("div", { className: "flex items-start justify-between gap-4", children: [
|
|
3370
|
+
/* @__PURE__ */ jsxs68("div", { className: "flex min-w-0 items-start gap-3", children: [
|
|
3371
|
+
icon ? /* @__PURE__ */ jsx93("div", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-2 text-[var(--tapiz-accent)]", children: icon }) : null,
|
|
3372
|
+
/* @__PURE__ */ jsxs68("div", { className: "min-w-0", children: [
|
|
3373
|
+
eyebrow ? /* @__PURE__ */ jsx93("div", { className: "kicker mb-2", children: eyebrow }) : null,
|
|
3374
|
+
/* @__PURE__ */ jsx93("h3", { className: "truncate text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
3375
|
+
description ? /* @__PURE__ */ jsx93("p", { className: "mt-2 line-clamp-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
3248
3376
|
] })
|
|
3249
3377
|
] }),
|
|
3250
|
-
status ? /* @__PURE__ */
|
|
3378
|
+
status ? /* @__PURE__ */ jsx93(Badge, { children: status }) : null
|
|
3251
3379
|
] }),
|
|
3252
|
-
meta || actions ? /* @__PURE__ */
|
|
3253
|
-
meta ? /* @__PURE__ */
|
|
3254
|
-
actions ? /* @__PURE__ */
|
|
3380
|
+
meta || actions ? /* @__PURE__ */ jsxs68("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
|
|
3381
|
+
meta ? /* @__PURE__ */ jsx93("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : /* @__PURE__ */ jsx93("span", {}),
|
|
3382
|
+
actions ? /* @__PURE__ */ jsx93("div", { className: "flex flex-wrap gap-2", children: actions }) : null
|
|
3255
3383
|
] }) : null
|
|
3256
3384
|
] });
|
|
3257
3385
|
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}`;
|
|
3258
|
-
return href ? /* @__PURE__ */
|
|
3386
|
+
return href ? /* @__PURE__ */ jsx93("a", { href, className: classes, children: content }) : /* @__PURE__ */ jsx93("article", { className: classes, children: content });
|
|
3259
3387
|
}
|
|
3260
3388
|
|
|
3261
3389
|
// src/components/framework/IntegrationCard.tsx
|
|
3262
|
-
import { jsx as
|
|
3390
|
+
import { jsx as jsx94, jsxs as jsxs69 } from "react/jsx-runtime";
|
|
3263
3391
|
var statusLabel = {
|
|
3264
3392
|
connected: "Connected",
|
|
3265
3393
|
disconnected: "Disconnected",
|
|
@@ -3273,26 +3401,26 @@ var statusVariant = {
|
|
|
3273
3401
|
error: "danger"
|
|
3274
3402
|
};
|
|
3275
3403
|
function IntegrationCard({ name, description, logo, status = "disconnected", lastSync, actions, className = "" }) {
|
|
3276
|
-
return /* @__PURE__ */
|
|
3277
|
-
/* @__PURE__ */
|
|
3278
|
-
/* @__PURE__ */
|
|
3279
|
-
/* @__PURE__ */
|
|
3280
|
-
/* @__PURE__ */
|
|
3281
|
-
/* @__PURE__ */
|
|
3282
|
-
description ? /* @__PURE__ */
|
|
3404
|
+
return /* @__PURE__ */ jsxs69("article", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 ${className}`, children: [
|
|
3405
|
+
/* @__PURE__ */ jsxs69("div", { className: "flex items-start justify-between gap-4", children: [
|
|
3406
|
+
/* @__PURE__ */ jsxs69("div", { className: "flex items-start gap-3", children: [
|
|
3407
|
+
/* @__PURE__ */ jsx94("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__ */ jsx94("span", { className: "font-mono text-xs", children: "API" }) }),
|
|
3408
|
+
/* @__PURE__ */ jsxs69("div", { children: [
|
|
3409
|
+
/* @__PURE__ */ jsx94("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: name }),
|
|
3410
|
+
description ? /* @__PURE__ */ jsx94("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
3283
3411
|
] })
|
|
3284
3412
|
] }),
|
|
3285
|
-
/* @__PURE__ */
|
|
3413
|
+
/* @__PURE__ */ jsx94(StatusBadge, { variant: statusVariant[status], label: statusLabel[status] })
|
|
3286
3414
|
] }),
|
|
3287
|
-
/* @__PURE__ */
|
|
3288
|
-
/* @__PURE__ */
|
|
3289
|
-
actions ? /* @__PURE__ */
|
|
3415
|
+
/* @__PURE__ */ jsxs69("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
|
|
3416
|
+
/* @__PURE__ */ jsx94("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: lastSync ?? "No sync yet" }),
|
|
3417
|
+
actions ? /* @__PURE__ */ jsx94("div", { className: "flex gap-2", children: actions }) : null
|
|
3290
3418
|
] })
|
|
3291
3419
|
] });
|
|
3292
3420
|
}
|
|
3293
3421
|
|
|
3294
3422
|
// src/components/framework/HealthIndicator.tsx
|
|
3295
|
-
import { jsx as
|
|
3423
|
+
import { jsx as jsx95, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
3296
3424
|
var toneClasses2 = {
|
|
3297
3425
|
operational: "bg-[var(--tapiz-success)]",
|
|
3298
3426
|
degraded: "bg-[var(--tapiz-warning)]",
|
|
@@ -3306,34 +3434,34 @@ var defaultLabel = {
|
|
|
3306
3434
|
unknown: "Unknown"
|
|
3307
3435
|
};
|
|
3308
3436
|
function HealthIndicator({ tone: tone2 = "unknown", label, detail, className = "" }) {
|
|
3309
|
-
return /* @__PURE__ */
|
|
3310
|
-
/* @__PURE__ */
|
|
3311
|
-
/* @__PURE__ */
|
|
3312
|
-
detail ? /* @__PURE__ */
|
|
3437
|
+
return /* @__PURE__ */ jsxs70("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: [
|
|
3438
|
+
/* @__PURE__ */ jsx95("span", { className: `size-2.5 ${toneClasses2[tone2]}`, "aria-hidden": "true" }),
|
|
3439
|
+
/* @__PURE__ */ jsx95("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label ?? defaultLabel[tone2] }),
|
|
3440
|
+
detail ? /* @__PURE__ */ jsx95("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: detail }) : null
|
|
3313
3441
|
] });
|
|
3314
3442
|
}
|
|
3315
3443
|
|
|
3316
3444
|
// src/components/framework/AuditLog.tsx
|
|
3317
|
-
import { jsx as
|
|
3445
|
+
import { jsx as jsx96, jsxs as jsxs71 } from "react/jsx-runtime";
|
|
3318
3446
|
function AuditLog({ items, className = "" }) {
|
|
3319
|
-
return /* @__PURE__ */
|
|
3320
|
-
/* @__PURE__ */
|
|
3321
|
-
/* @__PURE__ */
|
|
3322
|
-
/* @__PURE__ */
|
|
3323
|
-
/* @__PURE__ */
|
|
3324
|
-
/* @__PURE__ */
|
|
3447
|
+
return /* @__PURE__ */ jsx96("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__ */ jsxs71("div", { className: "flex gap-3 p-4", children: [
|
|
3448
|
+
/* @__PURE__ */ jsx96(Avatar, { name: item.initials ?? item.actor, size: "sm" }),
|
|
3449
|
+
/* @__PURE__ */ jsxs71("div", { className: "min-w-0 flex-1", children: [
|
|
3450
|
+
/* @__PURE__ */ jsxs71("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
|
|
3451
|
+
/* @__PURE__ */ jsxs71("p", { className: "text-sm text-[var(--tapiz-text-secondary)]", children: [
|
|
3452
|
+
/* @__PURE__ */ jsx96("strong", { className: "text-[var(--tapiz-text-primary)]", children: item.actor }),
|
|
3325
3453
|
" ",
|
|
3326
3454
|
item.action
|
|
3327
3455
|
] }),
|
|
3328
|
-
/* @__PURE__ */
|
|
3456
|
+
/* @__PURE__ */ jsx96("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.timestamp })
|
|
3329
3457
|
] }),
|
|
3330
|
-
item.detail ? /* @__PURE__ */
|
|
3458
|
+
item.detail ? /* @__PURE__ */ jsx96("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.detail }) : null
|
|
3331
3459
|
] })
|
|
3332
3460
|
] }, index)) });
|
|
3333
3461
|
}
|
|
3334
3462
|
|
|
3335
3463
|
// src/components/framework/KanbanBoard.tsx
|
|
3336
|
-
import { jsx as
|
|
3464
|
+
import { jsx as jsx97, jsxs as jsxs72 } from "react/jsx-runtime";
|
|
3337
3465
|
var toneClasses3 = {
|
|
3338
3466
|
default: "border-[var(--tapiz-border-subtle)]",
|
|
3339
3467
|
accent: "border-[var(--tapiz-accent)]",
|
|
@@ -3342,65 +3470,65 @@ var toneClasses3 = {
|
|
|
3342
3470
|
danger: "border-[var(--tapiz-danger)]"
|
|
3343
3471
|
};
|
|
3344
3472
|
function KanbanBoard({ columns, className = "" }) {
|
|
3345
|
-
return /* @__PURE__ */
|
|
3346
|
-
/* @__PURE__ */
|
|
3347
|
-
/* @__PURE__ */
|
|
3348
|
-
/* @__PURE__ */
|
|
3349
|
-
column.description ? /* @__PURE__ */
|
|
3473
|
+
return /* @__PURE__ */ jsx97("div", { className: `grid gap-4 overflow-x-auto md:grid-flow-col md:auto-cols-[minmax(18rem,1fr)] ${className}`, children: columns.map((column) => /* @__PURE__ */ jsxs72("section", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-3", children: [
|
|
3474
|
+
/* @__PURE__ */ jsxs72("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
|
|
3475
|
+
/* @__PURE__ */ jsxs72("div", { children: [
|
|
3476
|
+
/* @__PURE__ */ jsx97("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: column.title }),
|
|
3477
|
+
column.description ? /* @__PURE__ */ jsx97("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: column.description }) : null
|
|
3350
3478
|
] }),
|
|
3351
|
-
/* @__PURE__ */
|
|
3479
|
+
/* @__PURE__ */ jsx97("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: column.items.length })
|
|
3352
3480
|
] }),
|
|
3353
|
-
/* @__PURE__ */
|
|
3354
|
-
/* @__PURE__ */
|
|
3355
|
-
item.description ? /* @__PURE__ */
|
|
3356
|
-
item.meta ? /* @__PURE__ */
|
|
3481
|
+
/* @__PURE__ */ jsx97("div", { className: "space-y-3", children: column.items.map((item) => /* @__PURE__ */ jsxs72("article", { className: `border-l-2 bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)] ${toneClasses3[item.tone ?? "default"]}`, children: [
|
|
3482
|
+
/* @__PURE__ */ jsx97("h4", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3483
|
+
item.description ? /* @__PURE__ */ jsx97("p", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
|
|
3484
|
+
item.meta ? /* @__PURE__ */ jsx97("div", { className: "mt-3 font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
|
|
3357
3485
|
] }, item.id)) })
|
|
3358
3486
|
] }, column.id)) });
|
|
3359
3487
|
}
|
|
3360
3488
|
|
|
3361
3489
|
// src/components/framework/AccessMatrix.tsx
|
|
3362
|
-
import { jsx as
|
|
3490
|
+
import { jsx as jsx98, jsxs as jsxs73 } from "react/jsx-runtime";
|
|
3363
3491
|
function AccessMatrix({ roles, permissions, className = "" }) {
|
|
3364
|
-
return /* @__PURE__ */
|
|
3365
|
-
/* @__PURE__ */
|
|
3366
|
-
/* @__PURE__ */
|
|
3367
|
-
roles.map((role) => /* @__PURE__ */
|
|
3492
|
+
return /* @__PURE__ */ jsx98("div", { className: `overflow-x-auto border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: /* @__PURE__ */ jsxs73("table", { className: "min-w-full text-sm", children: [
|
|
3493
|
+
/* @__PURE__ */ jsx98("thead", { children: /* @__PURE__ */ jsxs73("tr", { children: [
|
|
3494
|
+
/* @__PURE__ */ jsx98("th", { className: "px-4 py-3 text-left", children: "Permission" }),
|
|
3495
|
+
roles.map((role) => /* @__PURE__ */ jsx98("th", { className: "px-4 py-3 text-center", children: role.label }, role.key))
|
|
3368
3496
|
] }) }),
|
|
3369
|
-
/* @__PURE__ */
|
|
3370
|
-
/* @__PURE__ */
|
|
3371
|
-
/* @__PURE__ */
|
|
3372
|
-
permission.description ? /* @__PURE__ */
|
|
3497
|
+
/* @__PURE__ */ jsx98("tbody", { children: permissions.map((permission) => /* @__PURE__ */ jsxs73("tr", { children: [
|
|
3498
|
+
/* @__PURE__ */ jsxs73("td", { className: "px-4 py-3", children: [
|
|
3499
|
+
/* @__PURE__ */ jsx98("div", { className: "font-medium text-[var(--tapiz-text-primary)]", children: permission.label }),
|
|
3500
|
+
permission.description ? /* @__PURE__ */ jsx98("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: permission.description }) : null
|
|
3373
3501
|
] }),
|
|
3374
|
-
roles.map((role) => /* @__PURE__ */
|
|
3502
|
+
roles.map((role) => /* @__PURE__ */ jsx98("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx98("span", { className: permission.roles[role.key] ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-text-disabled)]", children: permission.roles[role.key] ? "\u2713" : "\u2014" }) }, role.key))
|
|
3375
3503
|
] }, permission.key)) })
|
|
3376
3504
|
] }) });
|
|
3377
3505
|
}
|
|
3378
3506
|
|
|
3379
3507
|
// src/components/framework/CalendarGrid.tsx
|
|
3380
|
-
import { jsx as
|
|
3508
|
+
import { jsx as jsx99, jsxs as jsxs74 } from "react/jsx-runtime";
|
|
3381
3509
|
var defaultWeekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
3382
3510
|
function CalendarGrid({ days, weekdays = defaultWeekdays, className = "" }) {
|
|
3383
|
-
return /* @__PURE__ */
|
|
3384
|
-
/* @__PURE__ */
|
|
3385
|
-
/* @__PURE__ */
|
|
3386
|
-
/* @__PURE__ */
|
|
3387
|
-
/* @__PURE__ */
|
|
3388
|
-
day.label ? /* @__PURE__ */
|
|
3511
|
+
return /* @__PURE__ */ jsxs74("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
|
|
3512
|
+
/* @__PURE__ */ jsx99("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__ */ jsx99("div", { className: "px-3 py-2 font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: day }, index)) }),
|
|
3513
|
+
/* @__PURE__ */ jsx99("div", { className: "grid grid-cols-7", children: days.map((day, index) => /* @__PURE__ */ jsxs74("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: [
|
|
3514
|
+
/* @__PURE__ */ jsxs74("div", { className: "flex items-center justify-between gap-2", children: [
|
|
3515
|
+
/* @__PURE__ */ jsx99("span", { className: "font-mono text-xs text-[var(--tapiz-text-primary)]", children: day.date }),
|
|
3516
|
+
day.label ? /* @__PURE__ */ jsx99("span", { className: "text-[10px] text-[var(--tapiz-text-muted)]", children: day.label }) : null
|
|
3389
3517
|
] }),
|
|
3390
|
-
day.events?.length ? /* @__PURE__ */
|
|
3518
|
+
day.events?.length ? /* @__PURE__ */ jsx99("div", { className: "mt-2 space-y-1", children: day.events.map((event, eventIndex) => /* @__PURE__ */ jsx99("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
|
|
3391
3519
|
] }, index)) })
|
|
3392
3520
|
] });
|
|
3393
3521
|
}
|
|
3394
3522
|
|
|
3395
3523
|
// src/components/forms/Slider.tsx
|
|
3396
|
-
import { jsx as
|
|
3524
|
+
import { jsx as jsx100, jsxs as jsxs75 } from "react/jsx-runtime";
|
|
3397
3525
|
function Slider({ label, valueLabel, className = "", ...props }) {
|
|
3398
|
-
return /* @__PURE__ */
|
|
3399
|
-
label || valueLabel ? /* @__PURE__ */
|
|
3400
|
-
label ? /* @__PURE__ */
|
|
3401
|
-
valueLabel ? /* @__PURE__ */
|
|
3526
|
+
return /* @__PURE__ */ jsxs75("label", { className: `block ${className}`, children: [
|
|
3527
|
+
label || valueLabel ? /* @__PURE__ */ jsxs75("span", { className: "mb-2 flex items-center justify-between gap-3 text-sm", children: [
|
|
3528
|
+
label ? /* @__PURE__ */ jsx100("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: label }) : /* @__PURE__ */ jsx100("span", {}),
|
|
3529
|
+
valueLabel ? /* @__PURE__ */ jsx100("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueLabel }) : null
|
|
3402
3530
|
] }) : null,
|
|
3403
|
-
/* @__PURE__ */
|
|
3531
|
+
/* @__PURE__ */ jsx100(
|
|
3404
3532
|
"input",
|
|
3405
3533
|
{
|
|
3406
3534
|
...props,
|
|
@@ -3412,31 +3540,31 @@ function Slider({ label, valueLabel, className = "", ...props }) {
|
|
|
3412
3540
|
}
|
|
3413
3541
|
|
|
3414
3542
|
// src/components/forms/FileDropzone.tsx
|
|
3415
|
-
import { jsx as
|
|
3543
|
+
import { jsx as jsx101, jsxs as jsxs76 } from "react/jsx-runtime";
|
|
3416
3544
|
function FileDropzone({ title = "Drop files here", description, actionLabel = "Browse", className = "", ...props }) {
|
|
3417
|
-
return /* @__PURE__ */
|
|
3418
|
-
/* @__PURE__ */
|
|
3419
|
-
/* @__PURE__ */
|
|
3420
|
-
description ? /* @__PURE__ */
|
|
3421
|
-
/* @__PURE__ */
|
|
3545
|
+
return /* @__PURE__ */ jsxs76("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: [
|
|
3546
|
+
/* @__PURE__ */ jsx101("input", { ...props, type: "file", className: "sr-only" }),
|
|
3547
|
+
/* @__PURE__ */ jsx101("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
3548
|
+
description ? /* @__PURE__ */ jsx101("span", { className: "mt-2 block text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
|
|
3549
|
+
/* @__PURE__ */ jsx101("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 })
|
|
3422
3550
|
] });
|
|
3423
3551
|
}
|
|
3424
3552
|
|
|
3425
3553
|
// src/components/forms/PasswordInput.tsx
|
|
3426
|
-
import { useState as
|
|
3427
|
-
import { jsx as
|
|
3554
|
+
import { useState as useState11 } from "react";
|
|
3555
|
+
import { jsx as jsx102, jsxs as jsxs77 } from "react/jsx-runtime";
|
|
3428
3556
|
function PasswordInput({
|
|
3429
3557
|
revealLabel = "Show password",
|
|
3430
3558
|
className = "",
|
|
3431
3559
|
...props
|
|
3432
3560
|
}) {
|
|
3433
|
-
const [visible, setVisible] =
|
|
3434
|
-
return /* @__PURE__ */
|
|
3561
|
+
const [visible, setVisible] = useState11(false);
|
|
3562
|
+
return /* @__PURE__ */ jsxs77(
|
|
3435
3563
|
"div",
|
|
3436
3564
|
{
|
|
3437
3565
|
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}`,
|
|
3438
3566
|
children: [
|
|
3439
|
-
/* @__PURE__ */
|
|
3567
|
+
/* @__PURE__ */ jsx102(
|
|
3440
3568
|
"input",
|
|
3441
3569
|
{
|
|
3442
3570
|
...props,
|
|
@@ -3444,7 +3572,7 @@ function PasswordInput({
|
|
|
3444
3572
|
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!"
|
|
3445
3573
|
}
|
|
3446
3574
|
),
|
|
3447
|
-
/* @__PURE__ */
|
|
3575
|
+
/* @__PURE__ */ jsx102(
|
|
3448
3576
|
"button",
|
|
3449
3577
|
{
|
|
3450
3578
|
type: "button",
|
|
@@ -3453,7 +3581,7 @@ function PasswordInput({
|
|
|
3453
3581
|
onClick: () => setVisible((v) => !v),
|
|
3454
3582
|
tabIndex: -1,
|
|
3455
3583
|
className: "grid place-items-center px-3 text-(--tapiz-text-muted) transition-colors hover:text-(--tapiz-text-primary)",
|
|
3456
|
-
children: visible ? /* @__PURE__ */
|
|
3584
|
+
children: visible ? /* @__PURE__ */ jsx102(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx102(Eye, { size: 15 })
|
|
3457
3585
|
}
|
|
3458
3586
|
)
|
|
3459
3587
|
]
|
|
@@ -3462,12 +3590,12 @@ function PasswordInput({
|
|
|
3462
3590
|
}
|
|
3463
3591
|
|
|
3464
3592
|
// src/components/forms/TextareaCounter.tsx
|
|
3465
|
-
import { jsx as
|
|
3593
|
+
import { jsx as jsx103, jsxs as jsxs78 } from "react/jsx-runtime";
|
|
3466
3594
|
function TextareaCounter({ maxLength, value = "", className = "", ...props }) {
|
|
3467
3595
|
const count = value.length;
|
|
3468
|
-
return /* @__PURE__ */
|
|
3469
|
-
/* @__PURE__ */
|
|
3470
|
-
/* @__PURE__ */
|
|
3596
|
+
return /* @__PURE__ */ jsxs78("div", { className, children: [
|
|
3597
|
+
/* @__PURE__ */ jsx103("textarea", { ...props, value, maxLength, className: "input-field min-h-28" }),
|
|
3598
|
+
/* @__PURE__ */ jsxs78("div", { className: "mt-1 text-right font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: [
|
|
3471
3599
|
count,
|
|
3472
3600
|
"/",
|
|
3473
3601
|
maxLength
|
|
@@ -3476,7 +3604,7 @@ function TextareaCounter({ maxLength, value = "", className = "", ...props }) {
|
|
|
3476
3604
|
}
|
|
3477
3605
|
|
|
3478
3606
|
// src/components/feedback/Callout.tsx
|
|
3479
|
-
import { jsx as
|
|
3607
|
+
import { jsx as jsx104, jsxs as jsxs79 } from "react/jsx-runtime";
|
|
3480
3608
|
var toneClasses4 = {
|
|
3481
3609
|
info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)]",
|
|
3482
3610
|
success: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)]",
|
|
@@ -3485,73 +3613,73 @@ var toneClasses4 = {
|
|
|
3485
3613
|
neutral: "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]"
|
|
3486
3614
|
};
|
|
3487
3615
|
function Callout({ title, children, tone: tone2 = "info", icon, actions, className = "" }) {
|
|
3488
|
-
return /* @__PURE__ */
|
|
3489
|
-
icon ? /* @__PURE__ */
|
|
3490
|
-
/* @__PURE__ */
|
|
3491
|
-
title ? /* @__PURE__ */
|
|
3492
|
-
children ? /* @__PURE__ */
|
|
3493
|
-
actions ? /* @__PURE__ */
|
|
3616
|
+
return /* @__PURE__ */ jsx104("aside", { className: `border-l-4 p-4 ${toneClasses4[tone2]} ${className}`, children: /* @__PURE__ */ jsxs79("div", { className: "flex gap-3", children: [
|
|
3617
|
+
icon ? /* @__PURE__ */ jsx104("div", { className: "text-[var(--tapiz-text-primary)]", children: icon }) : null,
|
|
3618
|
+
/* @__PURE__ */ jsxs79("div", { className: "min-w-0 flex-1", children: [
|
|
3619
|
+
title ? /* @__PURE__ */ jsx104("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
3620
|
+
children ? /* @__PURE__ */ jsx104("div", { className: "mt-1 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children }) : null,
|
|
3621
|
+
actions ? /* @__PURE__ */ jsx104("div", { className: "mt-3 flex flex-wrap gap-2", children: actions }) : null
|
|
3494
3622
|
] })
|
|
3495
3623
|
] }) });
|
|
3496
3624
|
}
|
|
3497
3625
|
|
|
3498
3626
|
// src/components/feedback/LoadingOverlay.tsx
|
|
3499
|
-
import { jsx as
|
|
3627
|
+
import { jsx as jsx105, jsxs as jsxs80 } from "react/jsx-runtime";
|
|
3500
3628
|
function LoadingOverlay({ visible = false, label = "Loading", children, className = "" }) {
|
|
3501
|
-
return /* @__PURE__ */
|
|
3629
|
+
return /* @__PURE__ */ jsxs80("div", { className: `relative ${className}`, children: [
|
|
3502
3630
|
children,
|
|
3503
|
-
visible ? /* @__PURE__ */
|
|
3504
|
-
/* @__PURE__ */
|
|
3505
|
-
/* @__PURE__ */
|
|
3631
|
+
visible ? /* @__PURE__ */ jsx105("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__ */ jsxs80("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: [
|
|
3632
|
+
/* @__PURE__ */ jsx105(Spinner, {}),
|
|
3633
|
+
/* @__PURE__ */ jsx105("span", { children: label })
|
|
3506
3634
|
] }) }) : null
|
|
3507
3635
|
] });
|
|
3508
3636
|
}
|
|
3509
3637
|
|
|
3510
3638
|
// src/components/feedback/NotificationList.tsx
|
|
3511
|
-
import { jsx as
|
|
3639
|
+
import { jsx as jsx106, jsxs as jsxs81 } from "react/jsx-runtime";
|
|
3512
3640
|
function NotificationList({ items, className = "" }) {
|
|
3513
|
-
return /* @__PURE__ */
|
|
3514
|
-
/* @__PURE__ */
|
|
3515
|
-
/* @__PURE__ */
|
|
3516
|
-
/* @__PURE__ */
|
|
3517
|
-
/* @__PURE__ */
|
|
3518
|
-
item.time ? /* @__PURE__ */
|
|
3641
|
+
return /* @__PURE__ */ jsx106("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__ */ jsxs81("article", { className: "flex gap-3 p-4", children: [
|
|
3642
|
+
/* @__PURE__ */ jsx106("span", { className: `mt-1 size-2.5 ${item.unread ? "bg-[var(--tapiz-accent)]" : "bg-[var(--tapiz-border-subtle)]"}`, "aria-hidden": "true" }),
|
|
3643
|
+
/* @__PURE__ */ jsxs81("div", { className: "min-w-0 flex-1", children: [
|
|
3644
|
+
/* @__PURE__ */ jsxs81("div", { className: "flex items-start justify-between gap-3", children: [
|
|
3645
|
+
/* @__PURE__ */ jsx106("h3", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3646
|
+
item.time ? /* @__PURE__ */ jsx106("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
3519
3647
|
] }),
|
|
3520
|
-
item.description ? /* @__PURE__ */
|
|
3521
|
-
item.action ? /* @__PURE__ */
|
|
3648
|
+
item.description ? /* @__PURE__ */ jsx106("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
|
|
3649
|
+
item.action ? /* @__PURE__ */ jsx106("div", { className: "mt-3", children: item.action }) : null
|
|
3522
3650
|
] })
|
|
3523
3651
|
] }, item.id)) });
|
|
3524
3652
|
}
|
|
3525
3653
|
|
|
3526
3654
|
// src/components/layout/MasonryGrid.tsx
|
|
3527
|
-
import { jsx as
|
|
3655
|
+
import { jsx as jsx107 } from "react/jsx-runtime";
|
|
3528
3656
|
var columnClasses = { 2: "md:columns-2", 3: "md:columns-2 xl:columns-3", 4: "md:columns-2 lg:columns-3 xl:columns-4" };
|
|
3529
3657
|
var gapClasses4 = { sm: "gap-3", md: "gap-5", lg: "gap-8" };
|
|
3530
3658
|
function MasonryGrid({ children, columns = 3, gap = "md", className = "", style }) {
|
|
3531
|
-
return /* @__PURE__ */
|
|
3659
|
+
return /* @__PURE__ */ jsx107("div", { className: [columnClasses[columns], gapClasses4[gap], className].filter(Boolean).join(" "), style, children });
|
|
3532
3660
|
}
|
|
3533
3661
|
|
|
3534
3662
|
// src/components/layout/PageRail.tsx
|
|
3535
|
-
import { Fragment as Fragment6, jsx as
|
|
3663
|
+
import { Fragment as Fragment6, jsx as jsx108, jsxs as jsxs82 } from "react/jsx-runtime";
|
|
3536
3664
|
function PageRail({ title, items, actions, className = "", style }) {
|
|
3537
|
-
return /* @__PURE__ */
|
|
3538
|
-
title ? /* @__PURE__ */
|
|
3539
|
-
/* @__PURE__ */
|
|
3540
|
-
const content = /* @__PURE__ */
|
|
3541
|
-
/* @__PURE__ */
|
|
3542
|
-
item.meta ? /* @__PURE__ */
|
|
3665
|
+
return /* @__PURE__ */ jsxs82("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: [
|
|
3666
|
+
title ? /* @__PURE__ */ jsx108("div", { className: "kicker mb-3 px-2", children: title }) : null,
|
|
3667
|
+
/* @__PURE__ */ jsx108("nav", { className: "flex flex-col gap-1", children: items.map((item, index) => {
|
|
3668
|
+
const content = /* @__PURE__ */ jsxs82(Fragment6, { children: [
|
|
3669
|
+
/* @__PURE__ */ jsx108("span", { className: "truncate", children: item.label }),
|
|
3670
|
+
item.meta ? /* @__PURE__ */ jsx108("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
|
|
3543
3671
|
] });
|
|
3544
3672
|
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(" ");
|
|
3545
|
-
return item.href ? /* @__PURE__ */
|
|
3673
|
+
return item.href ? /* @__PURE__ */ jsx108("a", { href: item.href, className: classes, children: content }, index) : /* @__PURE__ */ jsx108("div", { className: classes, children: content }, index);
|
|
3546
3674
|
}) }),
|
|
3547
|
-
actions ? /* @__PURE__ */
|
|
3675
|
+
actions ? /* @__PURE__ */ jsx108("div", { className: "mt-3 border-t border-[var(--tapiz-border-subtle)] pt-3", children: actions }) : null
|
|
3548
3676
|
] });
|
|
3549
3677
|
}
|
|
3550
3678
|
|
|
3551
3679
|
// src/components/layout/StickyBar.tsx
|
|
3552
|
-
import { jsx as
|
|
3680
|
+
import { jsx as jsx109 } from "react/jsx-runtime";
|
|
3553
3681
|
function StickyBar({ children, position = "top", className = "", style }) {
|
|
3554
|
-
return /* @__PURE__ */
|
|
3682
|
+
return /* @__PURE__ */ jsx109(
|
|
3555
3683
|
"div",
|
|
3556
3684
|
{
|
|
3557
3685
|
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(" "),
|
|
@@ -3562,191 +3690,191 @@ function StickyBar({ children, position = "top", className = "", style }) {
|
|
|
3562
3690
|
}
|
|
3563
3691
|
|
|
3564
3692
|
// src/components/forms/Combobox.tsx
|
|
3565
|
-
import { jsx as
|
|
3693
|
+
import { jsx as jsx110, jsxs as jsxs83 } from "react/jsx-runtime";
|
|
3566
3694
|
function Combobox({ options, placeholder = "Select option", invalid = false, className = "", ...props }) {
|
|
3567
|
-
return /* @__PURE__ */
|
|
3568
|
-
/* @__PURE__ */
|
|
3569
|
-
options.map((option) => /* @__PURE__ */
|
|
3695
|
+
return /* @__PURE__ */ jsxs83("select", { ...props, className: ["input-field appearance-none bg-[var(--tapiz-bg-surface)]", invalid ? "border-warn focus:border-warn" : "", className].filter(Boolean).join(" "), children: [
|
|
3696
|
+
/* @__PURE__ */ jsx110("option", { value: "", children: placeholder }),
|
|
3697
|
+
options.map((option) => /* @__PURE__ */ jsx110("option", { value: option.value, children: String(option.label) }, option.value))
|
|
3570
3698
|
] });
|
|
3571
3699
|
}
|
|
3572
3700
|
|
|
3573
3701
|
// src/components/forms/DateRangePicker.tsx
|
|
3574
|
-
import { jsx as
|
|
3702
|
+
import { jsx as jsx111, jsxs as jsxs84 } from "react/jsx-runtime";
|
|
3575
3703
|
function DateRangePicker({ startLabel = "From", endLabel = "To", startProps, endProps, className = "" }) {
|
|
3576
|
-
return /* @__PURE__ */
|
|
3577
|
-
/* @__PURE__ */
|
|
3578
|
-
/* @__PURE__ */
|
|
3579
|
-
/* @__PURE__ */
|
|
3704
|
+
return /* @__PURE__ */ jsxs84("div", { className: ["grid gap-3 md:grid-cols-2", className].filter(Boolean).join(" "), children: [
|
|
3705
|
+
/* @__PURE__ */ jsxs84("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
|
|
3706
|
+
/* @__PURE__ */ jsx111("span", { children: startLabel }),
|
|
3707
|
+
/* @__PURE__ */ jsx111("input", { type: "date", ...startProps, className: ["input-field", startProps?.className || ""].join(" ") })
|
|
3580
3708
|
] }),
|
|
3581
|
-
/* @__PURE__ */
|
|
3582
|
-
/* @__PURE__ */
|
|
3583
|
-
/* @__PURE__ */
|
|
3709
|
+
/* @__PURE__ */ jsxs84("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
|
|
3710
|
+
/* @__PURE__ */ jsx111("span", { children: endLabel }),
|
|
3711
|
+
/* @__PURE__ */ jsx111("input", { type: "date", ...endProps, className: ["input-field", endProps?.className || ""].join(" ") })
|
|
3584
3712
|
] })
|
|
3585
3713
|
] });
|
|
3586
3714
|
}
|
|
3587
3715
|
|
|
3588
3716
|
// src/components/forms/ColorSwatchPicker.tsx
|
|
3589
|
-
import { jsx as
|
|
3717
|
+
import { jsx as jsx112, jsxs as jsxs85 } from "react/jsx-runtime";
|
|
3590
3718
|
function ColorSwatchPicker({ options, value, onChange, className = "" }) {
|
|
3591
|
-
return /* @__PURE__ */
|
|
3719
|
+
return /* @__PURE__ */ jsx112("div", { className: ["flex flex-wrap gap-2", className].filter(Boolean).join(" "), children: options.map((option) => {
|
|
3592
3720
|
const selected = option.value === value;
|
|
3593
|
-
return /* @__PURE__ */
|
|
3594
|
-
/* @__PURE__ */
|
|
3595
|
-
/* @__PURE__ */
|
|
3721
|
+
return /* @__PURE__ */ jsxs85("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: [
|
|
3722
|
+
/* @__PURE__ */ jsx112("span", { className: "h-4 w-4 border border-[var(--tapiz-border-strong)]", style: { background: option.color } }),
|
|
3723
|
+
/* @__PURE__ */ jsx112("span", { children: option.label })
|
|
3596
3724
|
] }, option.value);
|
|
3597
3725
|
}) });
|
|
3598
3726
|
}
|
|
3599
3727
|
|
|
3600
3728
|
// src/components/forms/RatingInput.tsx
|
|
3601
|
-
import { jsx as
|
|
3729
|
+
import { jsx as jsx113 } from "react/jsx-runtime";
|
|
3602
3730
|
function RatingInput({ value = 0, max = 5, icon = "\u2605", onChange, label = "Rating", className = "" }) {
|
|
3603
|
-
return /* @__PURE__ */
|
|
3731
|
+
return /* @__PURE__ */ jsx113("div", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), role: "radiogroup", "aria-label": label, children: Array.from({ length: max }, (_, index) => {
|
|
3604
3732
|
const score = index + 1;
|
|
3605
3733
|
const active = score <= value;
|
|
3606
|
-
return /* @__PURE__ */
|
|
3734
|
+
return /* @__PURE__ */ jsx113("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);
|
|
3607
3735
|
}) });
|
|
3608
3736
|
}
|
|
3609
3737
|
|
|
3610
3738
|
// src/components/data-display/ScoreRing.tsx
|
|
3611
|
-
import { jsx as
|
|
3739
|
+
import { jsx as jsx114, jsxs as jsxs86 } from "react/jsx-runtime";
|
|
3612
3740
|
function ScoreRing({ value, max = 100, label, size = 112, className = "" }) {
|
|
3613
3741
|
const normalized = Math.max(0, Math.min(1, value / max));
|
|
3614
3742
|
const radius = 42;
|
|
3615
3743
|
const circumference = 2 * Math.PI * radius;
|
|
3616
3744
|
const dash = circumference * normalized;
|
|
3617
|
-
return /* @__PURE__ */
|
|
3618
|
-
/* @__PURE__ */
|
|
3619
|
-
/* @__PURE__ */
|
|
3620
|
-
/* @__PURE__ */
|
|
3745
|
+
return /* @__PURE__ */ jsxs86("div", { className: ["inline-grid place-items-center", className].filter(Boolean).join(" "), style: { width: size, height: size }, children: [
|
|
3746
|
+
/* @__PURE__ */ jsxs86("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
|
|
3747
|
+
/* @__PURE__ */ jsx114("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
|
|
3748
|
+
/* @__PURE__ */ jsx114("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "10", strokeLinecap: "square", strokeDasharray: `${dash} ${circumference - dash}` })
|
|
3621
3749
|
] }),
|
|
3622
|
-
/* @__PURE__ */
|
|
3623
|
-
/* @__PURE__ */
|
|
3750
|
+
/* @__PURE__ */ jsxs86("div", { className: "absolute text-center", children: [
|
|
3751
|
+
/* @__PURE__ */ jsxs86("div", { className: "font-display text-2xl font-semibold text-[var(--tapiz-text-primary)]", children: [
|
|
3624
3752
|
Math.round(normalized * 100),
|
|
3625
3753
|
"%"
|
|
3626
3754
|
] }),
|
|
3627
|
-
label ? /* @__PURE__ */
|
|
3755
|
+
label ? /* @__PURE__ */ jsx114("div", { className: "font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: label }) : null
|
|
3628
3756
|
] })
|
|
3629
3757
|
] });
|
|
3630
3758
|
}
|
|
3631
3759
|
|
|
3632
3760
|
// src/components/data-display/HeatmapGrid.tsx
|
|
3633
|
-
import { jsx as
|
|
3761
|
+
import { jsx as jsx115 } from "react/jsx-runtime";
|
|
3634
3762
|
function HeatmapGrid({ cells, columns = 7, max, className = "" }) {
|
|
3635
3763
|
const peak = max ?? Math.max(1, ...cells.map((cell) => cell.value));
|
|
3636
|
-
return /* @__PURE__ */
|
|
3764
|
+
return /* @__PURE__ */ jsx115("div", { className: ["grid gap-1", className].filter(Boolean).join(" "), style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: cells.map((cell, index) => {
|
|
3637
3765
|
const opacity = 0.15 + Math.min(1, cell.value / peak) * 0.75;
|
|
3638
|
-
return /* @__PURE__ */
|
|
3766
|
+
return /* @__PURE__ */ jsx115("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__ */ jsx115("span", { className: "sr-only", children: cell.label }) : null }, index);
|
|
3639
3767
|
}) });
|
|
3640
3768
|
}
|
|
3641
3769
|
|
|
3642
3770
|
// src/components/data-display/FunnelChart.tsx
|
|
3643
|
-
import { jsx as
|
|
3771
|
+
import { jsx as jsx116, jsxs as jsxs87 } from "react/jsx-runtime";
|
|
3644
3772
|
function FunnelChart({ steps, className = "" }) {
|
|
3645
3773
|
const max = Math.max(1, ...steps.map((step) => step.value));
|
|
3646
|
-
return /* @__PURE__ */
|
|
3774
|
+
return /* @__PURE__ */ jsx116("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: steps.map((step, index) => {
|
|
3647
3775
|
const width = Math.max(8, step.value / max * 100);
|
|
3648
|
-
return /* @__PURE__ */
|
|
3649
|
-
/* @__PURE__ */
|
|
3650
|
-
/* @__PURE__ */
|
|
3651
|
-
/* @__PURE__ */
|
|
3776
|
+
return /* @__PURE__ */ jsxs87("div", { children: [
|
|
3777
|
+
/* @__PURE__ */ jsxs87("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
|
|
3778
|
+
/* @__PURE__ */ jsx116("span", { className: "font-medium text-[var(--tapiz-text-primary)]", children: step.label }),
|
|
3779
|
+
/* @__PURE__ */ jsxs87("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3652
3780
|
step.value,
|
|
3653
3781
|
step.meta ? ` \xB7 ${String(step.meta)}` : ""
|
|
3654
3782
|
] })
|
|
3655
3783
|
] }),
|
|
3656
|
-
/* @__PURE__ */
|
|
3784
|
+
/* @__PURE__ */ jsx116("div", { className: "h-9 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx116("div", { className: "h-full border-r border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)]", style: { width: `${width}%` } }) })
|
|
3657
3785
|
] }, index);
|
|
3658
3786
|
}) });
|
|
3659
3787
|
}
|
|
3660
3788
|
|
|
3661
3789
|
// src/components/data-display/ComparisonMeter.tsx
|
|
3662
|
-
import { jsx as
|
|
3790
|
+
import { jsx as jsx117, jsxs as jsxs88 } from "react/jsx-runtime";
|
|
3663
3791
|
function ComparisonMeter({ leftLabel, rightLabel, value, className = "" }) {
|
|
3664
3792
|
const clamped = Math.max(0, Math.min(100, value));
|
|
3665
|
-
return /* @__PURE__ */
|
|
3666
|
-
/* @__PURE__ */
|
|
3667
|
-
/* @__PURE__ */
|
|
3668
|
-
/* @__PURE__ */
|
|
3793
|
+
return /* @__PURE__ */ jsxs88("div", { className, children: [
|
|
3794
|
+
/* @__PURE__ */ jsxs88("div", { className: "mb-2 flex justify-between gap-3 text-sm text-[var(--tapiz-text-muted)]", children: [
|
|
3795
|
+
/* @__PURE__ */ jsx117("span", { children: leftLabel }),
|
|
3796
|
+
/* @__PURE__ */ jsx117("span", { children: rightLabel })
|
|
3669
3797
|
] }),
|
|
3670
|
-
/* @__PURE__ */
|
|
3671
|
-
/* @__PURE__ */
|
|
3672
|
-
/* @__PURE__ */
|
|
3798
|
+
/* @__PURE__ */ jsxs88("div", { className: "relative h-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: [
|
|
3799
|
+
/* @__PURE__ */ jsx117("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${clamped}%` } }),
|
|
3800
|
+
/* @__PURE__ */ jsx117("div", { className: "absolute top-[-6px] h-6 w-px bg-[var(--tapiz-border-strong)]", style: { left: `${clamped}%` } })
|
|
3673
3801
|
] })
|
|
3674
3802
|
] });
|
|
3675
3803
|
}
|
|
3676
3804
|
|
|
3677
3805
|
// src/components/framework/ActivityFeed.tsx
|
|
3678
|
-
import { jsx as
|
|
3806
|
+
import { jsx as jsx118, jsxs as jsxs89 } from "react/jsx-runtime";
|
|
3679
3807
|
function ActivityFeed({ items, className = "" }) {
|
|
3680
|
-
return /* @__PURE__ */
|
|
3681
|
-
/* @__PURE__ */
|
|
3682
|
-
/* @__PURE__ */
|
|
3683
|
-
/* @__PURE__ */
|
|
3684
|
-
/* @__PURE__ */
|
|
3808
|
+
return /* @__PURE__ */ jsx118("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__ */ jsxs89("div", { className: "flex gap-3 p-4", children: [
|
|
3809
|
+
/* @__PURE__ */ jsx118(Avatar, { name: item.actor, src: item.avatarUrl, size: "sm" }),
|
|
3810
|
+
/* @__PURE__ */ jsxs89("div", { className: "min-w-0 flex-1", children: [
|
|
3811
|
+
/* @__PURE__ */ jsxs89("p", { className: "text-sm text-[var(--tapiz-text-primary)]", children: [
|
|
3812
|
+
/* @__PURE__ */ jsx118("strong", { children: item.actor }),
|
|
3685
3813
|
" ",
|
|
3686
3814
|
item.action
|
|
3687
3815
|
] }),
|
|
3688
|
-
item.meta ? /* @__PURE__ */
|
|
3816
|
+
item.meta ? /* @__PURE__ */ jsx118("div", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: item.meta }) : null
|
|
3689
3817
|
] }),
|
|
3690
|
-
item.time ? /* @__PURE__ */
|
|
3818
|
+
item.time ? /* @__PURE__ */ jsx118("div", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
3691
3819
|
] }, index)) });
|
|
3692
3820
|
}
|
|
3693
3821
|
|
|
3694
3822
|
// src/components/framework/InboxList.tsx
|
|
3695
|
-
import { jsx as
|
|
3823
|
+
import { jsx as jsx119, jsxs as jsxs90 } from "react/jsx-runtime";
|
|
3696
3824
|
function InboxList({ items, className = "" }) {
|
|
3697
|
-
return /* @__PURE__ */
|
|
3698
|
-
/* @__PURE__ */
|
|
3699
|
-
/* @__PURE__ */
|
|
3700
|
-
/* @__PURE__ */
|
|
3701
|
-
item.sender ? /* @__PURE__ */
|
|
3825
|
+
return /* @__PURE__ */ jsx119("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__ */ jsxs90("article", { className: ["p-4 transition hover:bg-[var(--tapiz-bg-surface-muted)]", item.unread ? "border-l-4 border-l-[var(--tapiz-accent)]" : ""].join(" "), children: [
|
|
3826
|
+
/* @__PURE__ */ jsxs90("div", { className: "flex items-start justify-between gap-3", children: [
|
|
3827
|
+
/* @__PURE__ */ jsxs90("div", { className: "min-w-0", children: [
|
|
3828
|
+
/* @__PURE__ */ jsx119("h3", { className: "truncate text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3829
|
+
item.sender ? /* @__PURE__ */ jsx119("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.sender }) : null
|
|
3702
3830
|
] }),
|
|
3703
|
-
/* @__PURE__ */
|
|
3704
|
-
item.tag ? /* @__PURE__ */
|
|
3705
|
-
item.time ? /* @__PURE__ */
|
|
3831
|
+
/* @__PURE__ */ jsxs90("div", { className: "flex shrink-0 items-center gap-2", children: [
|
|
3832
|
+
item.tag ? /* @__PURE__ */ jsx119(Badge, { children: item.tag }) : null,
|
|
3833
|
+
item.time ? /* @__PURE__ */ jsx119("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
3706
3834
|
] })
|
|
3707
3835
|
] }),
|
|
3708
|
-
item.snippet ? /* @__PURE__ */
|
|
3836
|
+
item.snippet ? /* @__PURE__ */ jsx119("p", { className: "mt-2 line-clamp-2 text-sm text-[var(--tapiz-text-muted)]", children: item.snippet }) : null
|
|
3709
3837
|
] }, index)) });
|
|
3710
3838
|
}
|
|
3711
3839
|
|
|
3712
3840
|
// src/components/framework/ApprovalQueue.tsx
|
|
3713
|
-
import { jsx as
|
|
3841
|
+
import { jsx as jsx120, jsxs as jsxs91 } from "react/jsx-runtime";
|
|
3714
3842
|
function ApprovalQueue({ items, onApprove, onReject, className = "" }) {
|
|
3715
|
-
return /* @__PURE__ */
|
|
3716
|
-
/* @__PURE__ */
|
|
3717
|
-
/* @__PURE__ */
|
|
3718
|
-
/* @__PURE__ */
|
|
3719
|
-
item.priority ? /* @__PURE__ */
|
|
3843
|
+
return /* @__PURE__ */ jsx120("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsx120("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", children: /* @__PURE__ */ jsxs91("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [
|
|
3844
|
+
/* @__PURE__ */ jsxs91("div", { children: [
|
|
3845
|
+
/* @__PURE__ */ jsxs91("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
3846
|
+
/* @__PURE__ */ jsx120("h3", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3847
|
+
item.priority ? /* @__PURE__ */ jsx120(Badge, { variant: item.priority === "high" ? "danger" : item.priority === "medium" ? "warning" : "default", children: item.priority }) : null
|
|
3720
3848
|
] }),
|
|
3721
|
-
item.requester ? /* @__PURE__ */
|
|
3849
|
+
item.requester ? /* @__PURE__ */ jsxs91("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3722
3850
|
"Requested by ",
|
|
3723
3851
|
item.requester
|
|
3724
3852
|
] }) : null,
|
|
3725
|
-
item.description ? /* @__PURE__ */
|
|
3853
|
+
item.description ? /* @__PURE__ */ jsx120("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
3726
3854
|
] }),
|
|
3727
|
-
/* @__PURE__ */
|
|
3728
|
-
/* @__PURE__ */
|
|
3729
|
-
/* @__PURE__ */
|
|
3855
|
+
/* @__PURE__ */ jsxs91("div", { className: "flex gap-2", children: [
|
|
3856
|
+
/* @__PURE__ */ jsx120(Button, { size: "sm", variant: "secondary", onClick: () => onReject?.(index), children: "Reject" }),
|
|
3857
|
+
/* @__PURE__ */ jsx120(Button, { size: "sm", onClick: () => onApprove?.(index), children: "Approve" })
|
|
3730
3858
|
] })
|
|
3731
3859
|
] }) }, index)) });
|
|
3732
3860
|
}
|
|
3733
3861
|
|
|
3734
3862
|
// src/components/framework/SLAStatus.tsx
|
|
3735
|
-
import { jsx as
|
|
3863
|
+
import { jsx as jsx121, jsxs as jsxs92 } from "react/jsx-runtime";
|
|
3736
3864
|
function SLAStatus({ label, value, target = 95, className = "" }) {
|
|
3737
3865
|
const ok = value >= target;
|
|
3738
|
-
return /* @__PURE__ */
|
|
3739
|
-
/* @__PURE__ */
|
|
3740
|
-
/* @__PURE__ */
|
|
3741
|
-
/* @__PURE__ */
|
|
3866
|
+
return /* @__PURE__ */ jsxs92("div", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", className].filter(Boolean).join(" "), children: [
|
|
3867
|
+
/* @__PURE__ */ jsxs92("div", { className: "flex items-center justify-between gap-3", children: [
|
|
3868
|
+
/* @__PURE__ */ jsx121("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label }),
|
|
3869
|
+
/* @__PURE__ */ jsx121("span", { className: ["font-mono text-xs", ok ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-warning)]"].join(" "), children: ok ? "Within SLA" : "At risk" })
|
|
3742
3870
|
] }),
|
|
3743
|
-
/* @__PURE__ */
|
|
3744
|
-
/* @__PURE__ */
|
|
3745
|
-
/* @__PURE__ */
|
|
3871
|
+
/* @__PURE__ */ jsx121("div", { className: "mt-3 h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx121("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${Math.max(0, Math.min(100, value))}%` } }) }),
|
|
3872
|
+
/* @__PURE__ */ jsxs92("div", { className: "mt-2 flex justify-between font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: [
|
|
3873
|
+
/* @__PURE__ */ jsxs92("span", { children: [
|
|
3746
3874
|
value,
|
|
3747
3875
|
"%"
|
|
3748
3876
|
] }),
|
|
3749
|
-
/* @__PURE__ */
|
|
3877
|
+
/* @__PURE__ */ jsxs92("span", { children: [
|
|
3750
3878
|
"Target ",
|
|
3751
3879
|
target,
|
|
3752
3880
|
"%"
|
|
@@ -3756,81 +3884,81 @@ function SLAStatus({ label, value, target = 95, className = "" }) {
|
|
|
3756
3884
|
}
|
|
3757
3885
|
|
|
3758
3886
|
// src/components/framework/FeatureFlagTable.tsx
|
|
3759
|
-
import { jsx as
|
|
3887
|
+
import { jsx as jsx122, jsxs as jsxs93 } from "react/jsx-runtime";
|
|
3760
3888
|
function FeatureFlagTable({ flags, onToggle, className = "" }) {
|
|
3761
|
-
return /* @__PURE__ */
|
|
3762
|
-
/* @__PURE__ */
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
/* @__PURE__ */
|
|
3765
|
-
/* @__PURE__ */
|
|
3889
|
+
return /* @__PURE__ */ jsx122("div", { className: ["overflow-hidden border border-[var(--tapiz-border-subtle)]", className].filter(Boolean).join(" "), children: flags.map((flag) => /* @__PURE__ */ jsxs93("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: [
|
|
3890
|
+
/* @__PURE__ */ jsxs93("div", { children: [
|
|
3891
|
+
/* @__PURE__ */ jsxs93("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
3892
|
+
/* @__PURE__ */ jsx122("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: flag.name }),
|
|
3893
|
+
/* @__PURE__ */ jsx122(Badge, { children: flag.key })
|
|
3766
3894
|
] }),
|
|
3767
|
-
flag.description ? /* @__PURE__ */
|
|
3895
|
+
flag.description ? /* @__PURE__ */ jsx122("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: flag.description }) : null
|
|
3768
3896
|
] }),
|
|
3769
|
-
/* @__PURE__ */
|
|
3770
|
-
/* @__PURE__ */
|
|
3897
|
+
/* @__PURE__ */ jsx122("div", { className: "text-sm text-[var(--tapiz-text-muted)]", children: flag.rollout }),
|
|
3898
|
+
/* @__PURE__ */ jsx122(Switch, { checked: flag.enabled, onChange: (checked) => onToggle?.(flag.key, checked) })
|
|
3771
3899
|
] }, flag.key)) });
|
|
3772
3900
|
}
|
|
3773
3901
|
|
|
3774
3902
|
// src/components/framework/PlanUsage.tsx
|
|
3775
|
-
import { jsx as
|
|
3903
|
+
import { jsx as jsx123, jsxs as jsxs94 } from "react/jsx-runtime";
|
|
3776
3904
|
function PlanUsage({ title = "Plan usage", items, className = "" }) {
|
|
3777
|
-
return /* @__PURE__ */
|
|
3778
|
-
/* @__PURE__ */
|
|
3779
|
-
/* @__PURE__ */
|
|
3905
|
+
return /* @__PURE__ */ jsxs94("section", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", className].filter(Boolean).join(" "), children: [
|
|
3906
|
+
/* @__PURE__ */ jsx123("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
3907
|
+
/* @__PURE__ */ jsx123("div", { className: "mt-4 space-y-4", children: items.map((item, index) => {
|
|
3780
3908
|
const pct = item.limit ? Math.min(100, item.used / item.limit * 100) : 0;
|
|
3781
|
-
return /* @__PURE__ */
|
|
3782
|
-
/* @__PURE__ */
|
|
3783
|
-
/* @__PURE__ */
|
|
3784
|
-
/* @__PURE__ */
|
|
3909
|
+
return /* @__PURE__ */ jsxs94("div", { children: [
|
|
3910
|
+
/* @__PURE__ */ jsxs94("div", { className: "mb-1 flex justify-between text-sm", children: [
|
|
3911
|
+
/* @__PURE__ */ jsx123("span", { className: "text-[var(--tapiz-text-primary)]", children: item.label }),
|
|
3912
|
+
/* @__PURE__ */ jsxs94("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3785
3913
|
item.used,
|
|
3786
3914
|
"/",
|
|
3787
3915
|
item.limit
|
|
3788
3916
|
] })
|
|
3789
3917
|
] }),
|
|
3790
|
-
/* @__PURE__ */
|
|
3918
|
+
/* @__PURE__ */ jsx123("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx123("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${pct}%` } }) })
|
|
3791
3919
|
] }, index);
|
|
3792
3920
|
}) })
|
|
3793
3921
|
] });
|
|
3794
3922
|
}
|
|
3795
3923
|
|
|
3796
3924
|
// src/components/marketing/AnnouncementBar.tsx
|
|
3797
|
-
import { jsx as
|
|
3925
|
+
import { jsx as jsx124, jsxs as jsxs95 } from "react/jsx-runtime";
|
|
3798
3926
|
function AnnouncementBar({ children, action, className = "" }) {
|
|
3799
|
-
return /* @__PURE__ */
|
|
3927
|
+
return /* @__PURE__ */ jsx124("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__ */ jsxs95("div", { className: "mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-3 text-center", children: [
|
|
3800
3928
|
" ",
|
|
3801
|
-
/* @__PURE__ */
|
|
3802
|
-
action ? /* @__PURE__ */
|
|
3929
|
+
/* @__PURE__ */ jsx124("span", { children }),
|
|
3930
|
+
action ? /* @__PURE__ */ jsx124("span", { children: action }) : null
|
|
3803
3931
|
] }) });
|
|
3804
3932
|
}
|
|
3805
3933
|
|
|
3806
3934
|
// src/components/marketing/FAQSection.tsx
|
|
3807
|
-
import { jsx as
|
|
3935
|
+
import { jsx as jsx125, jsxs as jsxs96 } from "react/jsx-runtime";
|
|
3808
3936
|
function FAQSection({ title = "Frequently asked questions", description, items, className = "" }) {
|
|
3809
|
-
return /* @__PURE__ */
|
|
3810
|
-
/* @__PURE__ */
|
|
3811
|
-
/* @__PURE__ */
|
|
3812
|
-
/* @__PURE__ */
|
|
3813
|
-
description ? /* @__PURE__ */
|
|
3937
|
+
return /* @__PURE__ */ jsxs96("section", { className, children: [
|
|
3938
|
+
/* @__PURE__ */ jsxs96("div", { className: "mb-6 max-w-2xl", children: [
|
|
3939
|
+
/* @__PURE__ */ jsx125("div", { className: "kicker", children: "FAQ" }),
|
|
3940
|
+
/* @__PURE__ */ jsx125("h2", { className: "mt-2 text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: title }),
|
|
3941
|
+
description ? /* @__PURE__ */ jsx125("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
3814
3942
|
] }),
|
|
3815
|
-
/* @__PURE__ */
|
|
3943
|
+
/* @__PURE__ */ jsx125(Accordion, { items: items.map((item, index) => ({ id: `faq-${index}`, title: item.question, content: item.answer })) })
|
|
3816
3944
|
] });
|
|
3817
3945
|
}
|
|
3818
3946
|
|
|
3819
3947
|
// src/components/marketing/RoadmapList.tsx
|
|
3820
|
-
import { jsx as
|
|
3948
|
+
import { jsx as jsx126, jsxs as jsxs97 } from "react/jsx-runtime";
|
|
3821
3949
|
function RoadmapList({ items, className = "" }) {
|
|
3822
|
-
return /* @__PURE__ */
|
|
3823
|
-
/* @__PURE__ */
|
|
3824
|
-
/* @__PURE__ */
|
|
3825
|
-
item.status ? /* @__PURE__ */
|
|
3950
|
+
return /* @__PURE__ */ jsx126("div", { className: ["grid gap-3 md:grid-cols-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs97("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", children: [
|
|
3951
|
+
/* @__PURE__ */ jsxs97("div", { className: "flex items-center justify-between gap-3", children: [
|
|
3952
|
+
/* @__PURE__ */ jsx126("span", { className: "kicker", children: item.quarter ?? `0${index + 1}` }),
|
|
3953
|
+
item.status ? /* @__PURE__ */ jsx126(Badge, { children: item.status }) : null
|
|
3826
3954
|
] }),
|
|
3827
|
-
/* @__PURE__ */
|
|
3828
|
-
item.description ? /* @__PURE__ */
|
|
3955
|
+
/* @__PURE__ */ jsx126("h3", { className: "mt-4 font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3956
|
+
item.description ? /* @__PURE__ */ jsx126("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
3829
3957
|
] }, index)) });
|
|
3830
3958
|
}
|
|
3831
3959
|
|
|
3832
3960
|
// src/components/feedback/InlineStatus.tsx
|
|
3833
|
-
import { jsx as
|
|
3961
|
+
import { jsx as jsx127, jsxs as jsxs98 } from "react/jsx-runtime";
|
|
3834
3962
|
var toneClasses5 = {
|
|
3835
3963
|
neutral: "bg-[var(--tapiz-text-muted)]",
|
|
3836
3964
|
success: "bg-[var(--tapiz-success)]",
|
|
@@ -3839,8 +3967,8 @@ var toneClasses5 = {
|
|
|
3839
3967
|
info: "bg-[var(--tapiz-info)]"
|
|
3840
3968
|
};
|
|
3841
3969
|
function InlineStatus({ tone: tone2 = "neutral", children, pulse = false, className = "" }) {
|
|
3842
|
-
return /* @__PURE__ */
|
|
3843
|
-
/* @__PURE__ */
|
|
3970
|
+
return /* @__PURE__ */ jsxs98("span", { className: ["inline-flex items-center gap-2 text-sm text-[var(--tapiz-text-muted)]", className].filter(Boolean).join(" "), children: [
|
|
3971
|
+
/* @__PURE__ */ jsx127("span", { className: ["h-2 w-2 rounded-full", toneClasses5[tone2], pulse ? "animate-pulse" : ""].filter(Boolean).join(" ") }),
|
|
3844
3972
|
children
|
|
3845
3973
|
] });
|
|
3846
3974
|
}
|
|
@@ -4020,6 +4148,7 @@ export {
|
|
|
4020
4148
|
Select,
|
|
4021
4149
|
Server,
|
|
4022
4150
|
Shield,
|
|
4151
|
+
SidePanel,
|
|
4023
4152
|
SidebarNav,
|
|
4024
4153
|
Skeleton,
|
|
4025
4154
|
SkeletonBanner,
|