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