@tapizlabs/ui 0.2.12 → 0.2.14
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 +55 -27
- package/dist/index.js +654 -533
- package/dist/index.js.map +1 -1
- package/dist/theme.css +271 -0
- package/fonts.css +1 -0
- package/package.json +10 -4
- package/tailwind-theme.css +1 -0
- package/theme.css +1 -0
package/dist/index.js
CHANGED
|
@@ -2201,45 +2201,45 @@ function DataTable({
|
|
|
2201
2201
|
] });
|
|
2202
2202
|
}
|
|
2203
2203
|
|
|
2204
|
-
// src/components/marketing/
|
|
2205
|
-
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
2206
|
-
function
|
|
2207
|
-
return /* @__PURE__ */ jsx45(
|
|
2208
|
-
"
|
|
2209
|
-
{
|
|
2210
|
-
|
|
2211
|
-
"
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
}
|
|
2218
|
-
);
|
|
2204
|
+
// src/components/marketing/CTASection.tsx
|
|
2205
|
+
import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2206
|
+
function CTASection({ eyebrow, title, description, actions, className = "" }) {
|
|
2207
|
+
return /* @__PURE__ */ jsx45("section", { className: `mx-auto max-w-7xl px-[var(--tapiz-space-page-x)] py-[var(--tapiz-space-section-y)] ${className}`, children: /* @__PURE__ */ jsxs31("div", { className: "border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-8 shadow-[var(--tapiz-shadow-brutal-lg)] md:p-12", children: [
|
|
2208
|
+
eyebrow ? /* @__PURE__ */ jsx45("div", { className: "kicker mb-3", children: eyebrow }) : null,
|
|
2209
|
+
/* @__PURE__ */ jsxs31("div", { className: "grid gap-6 lg:grid-cols-[1fr_auto] lg:items-end", children: [
|
|
2210
|
+
/* @__PURE__ */ jsxs31("div", { children: [
|
|
2211
|
+
/* @__PURE__ */ jsx45("h2", { className: "max-w-3xl text-3xl font-semibold tracking-[-0.05em] md:text-5xl", children: title }),
|
|
2212
|
+
description ? /* @__PURE__ */ jsx45("p", { className: "mt-4 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)]", children: description }) : null
|
|
2213
|
+
] }),
|
|
2214
|
+
actions ? /* @__PURE__ */ jsx45("div", { className: "flex flex-wrap gap-3", children: actions }) : null
|
|
2215
|
+
] })
|
|
2216
|
+
] }) });
|
|
2219
2217
|
}
|
|
2220
2218
|
|
|
2221
|
-
// src/components/marketing/
|
|
2222
|
-
import { jsx as jsx46, jsxs as
|
|
2223
|
-
function
|
|
2224
|
-
return /* @__PURE__ */
|
|
2225
|
-
/* @__PURE__ */
|
|
2226
|
-
|
|
2227
|
-
/* @__PURE__ */ jsx46("
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2219
|
+
// src/components/marketing/ComparisonTable.tsx
|
|
2220
|
+
import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2221
|
+
function ComparisonTable({ rows, featureHeader = "Feature", includedHeader = "Tapiz", alternativeHeader = "Other", className = "" }) {
|
|
2222
|
+
return /* @__PURE__ */ jsx46("div", { className: `overflow-x-auto border border-[var(--tapiz-border-strong)] ${className}`, children: /* @__PURE__ */ jsxs32("table", { className: "w-full text-sm", children: [
|
|
2223
|
+
/* @__PURE__ */ jsx46("thead", { children: /* @__PURE__ */ jsxs32("tr", { children: [
|
|
2224
|
+
/* @__PURE__ */ jsx46("th", { className: "px-4 py-3 text-left", children: featureHeader }),
|
|
2225
|
+
/* @__PURE__ */ jsx46("th", { className: "px-4 py-3 text-left", children: includedHeader }),
|
|
2226
|
+
/* @__PURE__ */ jsx46("th", { className: "px-4 py-3 text-left", children: alternativeHeader })
|
|
2227
|
+
] }) }),
|
|
2228
|
+
/* @__PURE__ */ jsx46("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs32("tr", { className: "border-t border-[var(--tapiz-border-subtle)]", children: [
|
|
2229
|
+
/* @__PURE__ */ jsx46("td", { className: "px-4 py-3 font-medium text-[var(--tapiz-text-primary)]", children: row.feature }),
|
|
2230
|
+
/* @__PURE__ */ jsx46("td", { className: "px-4 py-3 text-[var(--tapiz-text-secondary)]", children: row.included }),
|
|
2231
|
+
/* @__PURE__ */ jsx46("td", { className: "px-4 py-3 text-[var(--tapiz-text-muted)]", children: row.alternative })
|
|
2232
|
+
] }, index)) })
|
|
2233
|
+
] }) });
|
|
2234
2234
|
}
|
|
2235
2235
|
|
|
2236
2236
|
// src/components/marketing/FeatureCard.tsx
|
|
2237
|
-
import { jsx as jsx47, jsxs as
|
|
2237
|
+
import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2238
2238
|
function FeatureCard({ title, description, icon, eyebrow, children, className = "", variant = "surface" }) {
|
|
2239
|
-
return /* @__PURE__ */
|
|
2240
|
-
/* @__PURE__ */
|
|
2239
|
+
return /* @__PURE__ */ jsxs33(Card, { variant, hover: true, className: `group ${className}`, children: [
|
|
2240
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex items-start gap-4", children: [
|
|
2241
2241
|
icon ? /* @__PURE__ */ jsx47("div", { className: "grid h-11 w-11 shrink-0 place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--color-icon-bg)] text-[var(--tapiz-accent)] group-hover:translate-x-[-1px] group-hover:translate-y-[-1px]", children: icon }) : null,
|
|
2242
|
-
/* @__PURE__ */
|
|
2242
|
+
/* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
|
|
2243
2243
|
eyebrow ? /* @__PURE__ */ jsx47("div", { className: "kicker mb-1", children: eyebrow }) : null,
|
|
2244
2244
|
/* @__PURE__ */ jsx47("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
2245
2245
|
description ? /* @__PURE__ */ jsx47("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
@@ -2255,124 +2255,244 @@ function FeatureGrid({ children, className = "" }) {
|
|
|
2255
2255
|
return /* @__PURE__ */ jsx48("div", { className: `grid gap-4 md:grid-cols-2 xl:grid-cols-3 ${className}`, children });
|
|
2256
2256
|
}
|
|
2257
2257
|
|
|
2258
|
-
// src/components/marketing/
|
|
2259
|
-
import { jsx as jsx49, jsxs as
|
|
2260
|
-
function
|
|
2261
|
-
return /* @__PURE__ */
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
/* @__PURE__ */
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
] })
|
|
2268
|
-
|
|
2269
|
-
] })
|
|
2270
|
-
] })
|
|
2258
|
+
// src/components/marketing/HeroFrame.tsx
|
|
2259
|
+
import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2260
|
+
function HeroFrame({ eyebrow, title, description, actions, visual, meta, className = "" }) {
|
|
2261
|
+
return /* @__PURE__ */ jsxs34("section", { className: `mx-auto grid max-w-7xl gap-10 px-[var(--tapiz-space-page-x)] py-[var(--tapiz-space-section-y)] lg:grid-cols-[1fr_0.9fr] lg:items-center ${className}`, children: [
|
|
2262
|
+
/* @__PURE__ */ jsxs34("div", { className: "animate-fade-in-up", children: [
|
|
2263
|
+
eyebrow ? /* @__PURE__ */ jsx49("div", { className: "kicker mb-4", children: eyebrow }) : null,
|
|
2264
|
+
/* @__PURE__ */ jsx49("h1", { className: "max-w-4xl text-5xl font-semibold leading-[0.95] tracking-[-0.07em] text-[var(--tapiz-text-primary)] md:text-7xl", children: title }),
|
|
2265
|
+
description ? /* @__PURE__ */ jsx49("p", { className: "mt-6 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)] md:text-lg", children: description }) : null,
|
|
2266
|
+
actions ? /* @__PURE__ */ jsx49("div", { className: "mt-8 flex flex-wrap gap-3", children: actions }) : null,
|
|
2267
|
+
meta ? /* @__PURE__ */ jsx49("div", { className: "mt-8 border-l-2 border-[var(--tapiz-accent)] pl-4 font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : null
|
|
2268
|
+
] }),
|
|
2269
|
+
visual ? /* @__PURE__ */ jsx49("div", { className: "animate-scale-in border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-brutal-lg)]", children: visual }) : null
|
|
2270
|
+
] });
|
|
2271
|
+
}
|
|
2272
|
+
|
|
2273
|
+
// src/components/marketing/LandingNavbarShell.tsx
|
|
2274
|
+
import { useEffect as useEffect3, useState as useState7 } from "react";
|
|
2275
|
+
import { Fragment as Fragment3, jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2276
|
+
function LandingNavbarShell({
|
|
2277
|
+
ariaNavLabel,
|
|
2278
|
+
brand,
|
|
2279
|
+
className = "",
|
|
2280
|
+
closeMenuLabel,
|
|
2281
|
+
containerClassName = "",
|
|
2282
|
+
desktopActions,
|
|
2283
|
+
desktopLanguageSwitcher,
|
|
2284
|
+
items,
|
|
2285
|
+
menuLabel,
|
|
2286
|
+
mobileActions,
|
|
2287
|
+
mobileDialogLabel,
|
|
2288
|
+
mobileLanguageSwitcher,
|
|
2289
|
+
mobileNavLabel,
|
|
2290
|
+
onThemeToggle,
|
|
2291
|
+
theme,
|
|
2292
|
+
themeLabels
|
|
2293
|
+
}) {
|
|
2294
|
+
const [open, setOpen] = useState7(false);
|
|
2295
|
+
const [renderDrawer, setRenderDrawer] = useState7(false);
|
|
2296
|
+
useEffect3(() => {
|
|
2297
|
+
if (open) {
|
|
2298
|
+
setRenderDrawer(true);
|
|
2299
|
+
document.body.style.overflow = "hidden";
|
|
2300
|
+
document.body.classList.add("tapiz-landing-navbar-open");
|
|
2301
|
+
return () => {
|
|
2302
|
+
document.body.style.overflow = "";
|
|
2303
|
+
document.body.classList.remove("tapiz-landing-navbar-open");
|
|
2304
|
+
};
|
|
2305
|
+
}
|
|
2306
|
+
const timeoutId = window.setTimeout(() => {
|
|
2307
|
+
setRenderDrawer(false);
|
|
2308
|
+
document.body.style.overflow = "";
|
|
2309
|
+
document.body.classList.remove("tapiz-landing-navbar-open");
|
|
2310
|
+
}, 220);
|
|
2311
|
+
return () => window.clearTimeout(timeoutId);
|
|
2312
|
+
}, [open]);
|
|
2313
|
+
const drawerLabel = mobileDialogLabel ?? menuLabel;
|
|
2314
|
+
const resolvedCloseMenuLabel = closeMenuLabel ?? menuLabel;
|
|
2315
|
+
const resolvedMobileNavLabel = mobileNavLabel ?? ariaNavLabel;
|
|
2316
|
+
const themeLabel = theme === "dark" ? themeLabels.light : themeLabels.dark;
|
|
2317
|
+
return /* @__PURE__ */ jsxs35(Fragment3, { children: [
|
|
2318
|
+
/* @__PURE__ */ jsx50("header", { className: ["tapiz-landing-navbar", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs35("div", { className: ["tapiz-landing-navbar__container", containerClassName].filter(Boolean).join(" "), children: [
|
|
2319
|
+
/* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__brand", children: brand }),
|
|
2320
|
+
/* @__PURE__ */ jsx50("nav", { className: "tapiz-landing-navbar__links", "aria-label": ariaNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35("a", { href: item.href, className: "tapiz-landing-navbar__link", children: [
|
|
2321
|
+
item.icon ? /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
|
|
2322
|
+
/* @__PURE__ */ jsx50("span", { children: item.label })
|
|
2323
|
+
] }, item.href)) }),
|
|
2324
|
+
/* @__PURE__ */ jsxs35("div", { className: "tapiz-landing-navbar__actions", children: [
|
|
2325
|
+
desktopLanguageSwitcher ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--desktop", children: desktopLanguageSwitcher }) : null,
|
|
2326
|
+
/* @__PURE__ */ jsx50(
|
|
2327
|
+
"button",
|
|
2328
|
+
{
|
|
2329
|
+
type: "button",
|
|
2330
|
+
className: `tapiz-landing-navbar__theme is-${theme}`,
|
|
2331
|
+
"aria-label": themeLabel,
|
|
2332
|
+
onClick: onThemeToggle,
|
|
2333
|
+
children: /* @__PURE__ */ jsx50("span", { className: "tapiz-landing-navbar__theme-track", "aria-hidden": "true", children: /* @__PURE__ */ jsxs35("span", { className: "tapiz-landing-navbar__theme-thumb", children: [
|
|
2334
|
+
/* @__PURE__ */ jsx50(Sun, { size: 13, className: "tapiz-landing-navbar__theme-sun" }),
|
|
2335
|
+
/* @__PURE__ */ jsx50(Moon, { size: 13, className: "tapiz-landing-navbar__theme-moon" })
|
|
2336
|
+
] }) })
|
|
2337
|
+
}
|
|
2338
|
+
),
|
|
2339
|
+
desktopActions ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__desktop-actions", children: desktopActions }) : null,
|
|
2340
|
+
/* @__PURE__ */ jsx50(
|
|
2341
|
+
"button",
|
|
2342
|
+
{
|
|
2343
|
+
type: "button",
|
|
2344
|
+
className: "tapiz-landing-navbar__menu",
|
|
2345
|
+
"aria-label": menuLabel,
|
|
2346
|
+
"aria-expanded": open,
|
|
2347
|
+
onClick: () => setOpen((value) => !value),
|
|
2348
|
+
children: open ? /* @__PURE__ */ jsx50(X, { size: 18 }) : /* @__PURE__ */ jsx50(Menu, { size: 18 })
|
|
2349
|
+
}
|
|
2350
|
+
)
|
|
2351
|
+
] })
|
|
2352
|
+
] }) }),
|
|
2353
|
+
renderDrawer ? /* @__PURE__ */ jsx50(
|
|
2354
|
+
"button",
|
|
2355
|
+
{
|
|
2356
|
+
type: "button",
|
|
2357
|
+
className: "tapiz-landing-navbar__scrim",
|
|
2358
|
+
"data-state": open ? "open" : "closed",
|
|
2359
|
+
"aria-label": resolvedCloseMenuLabel,
|
|
2360
|
+
onClick: () => setOpen(false)
|
|
2361
|
+
}
|
|
2362
|
+
) : null,
|
|
2363
|
+
renderDrawer ? /* @__PURE__ */ jsxs35(
|
|
2364
|
+
"div",
|
|
2365
|
+
{
|
|
2366
|
+
className: "tapiz-landing-navbar__drawer",
|
|
2367
|
+
"data-state": open ? "open" : "closed",
|
|
2368
|
+
role: "dialog",
|
|
2369
|
+
"aria-modal": "true",
|
|
2370
|
+
"aria-label": drawerLabel,
|
|
2371
|
+
children: [
|
|
2372
|
+
/* @__PURE__ */ jsx50("nav", { className: "tapiz-landing-navbar__drawer-nav", "aria-label": resolvedMobileNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35(
|
|
2373
|
+
"a",
|
|
2374
|
+
{
|
|
2375
|
+
href: item.href,
|
|
2376
|
+
className: "tapiz-landing-navbar__drawer-link",
|
|
2377
|
+
onClick: () => setOpen(false),
|
|
2378
|
+
children: [
|
|
2379
|
+
item.icon ? /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
|
|
2380
|
+
/* @__PURE__ */ jsx50("span", { children: item.label })
|
|
2381
|
+
]
|
|
2382
|
+
},
|
|
2383
|
+
item.href
|
|
2384
|
+
)) }),
|
|
2385
|
+
mobileLanguageSwitcher ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--mobile", children: mobileLanguageSwitcher }) : null,
|
|
2386
|
+
mobileActions ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__drawer-actions", children: mobileActions }) : null
|
|
2387
|
+
]
|
|
2388
|
+
}
|
|
2389
|
+
) : null
|
|
2390
|
+
] });
|
|
2391
|
+
}
|
|
2392
|
+
|
|
2393
|
+
// src/components/marketing/MarketingShell.tsx
|
|
2394
|
+
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
2395
|
+
function MarketingShell({ children, className = "", grid = true, noise = true }) {
|
|
2396
|
+
return /* @__PURE__ */ jsx51(
|
|
2397
|
+
"main",
|
|
2398
|
+
{
|
|
2399
|
+
className: [
|
|
2400
|
+
"min-h-screen overflow-hidden bg-[var(--tapiz-bg-page)] text-[var(--tapiz-text-primary)]",
|
|
2401
|
+
grid ? "tapiz-grid-bg" : "",
|
|
2402
|
+
noise ? "tapiz-noise-bg" : "",
|
|
2403
|
+
className
|
|
2404
|
+
].filter(Boolean).join(" "),
|
|
2405
|
+
children
|
|
2406
|
+
}
|
|
2407
|
+
);
|
|
2271
2408
|
}
|
|
2272
2409
|
|
|
2273
2410
|
// src/components/marketing/MockupFrame.tsx
|
|
2274
|
-
import { jsx as
|
|
2411
|
+
import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2275
2412
|
function MockupFrame({ children, title, toolbar, className = "" }) {
|
|
2276
|
-
return /* @__PURE__ */
|
|
2277
|
-
/* @__PURE__ */
|
|
2278
|
-
/* @__PURE__ */
|
|
2279
|
-
/* @__PURE__ */
|
|
2280
|
-
/* @__PURE__ */
|
|
2281
|
-
/* @__PURE__ */
|
|
2413
|
+
return /* @__PURE__ */ jsxs36("div", { className: `overflow-hidden border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-brutal)] ${className}`, children: [
|
|
2414
|
+
/* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between border-b border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] px-3 py-2", children: [
|
|
2415
|
+
/* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-1.5", children: [
|
|
2416
|
+
/* @__PURE__ */ jsx52("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-danger)]" }),
|
|
2417
|
+
/* @__PURE__ */ jsx52("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-warning)]" }),
|
|
2418
|
+
/* @__PURE__ */ jsx52("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-success)]" })
|
|
2282
2419
|
] }),
|
|
2283
|
-
title ? /* @__PURE__ */
|
|
2284
|
-
/* @__PURE__ */
|
|
2420
|
+
title ? /* @__PURE__ */ jsx52("div", { className: "font-mono text-[10px] uppercase tracking-widest text-[var(--tapiz-text-muted)]", children: title }) : null,
|
|
2421
|
+
/* @__PURE__ */ jsx52("div", { children: toolbar })
|
|
2285
2422
|
] }),
|
|
2286
|
-
/* @__PURE__ */
|
|
2423
|
+
/* @__PURE__ */ jsx52("div", { className: "p-4", children })
|
|
2287
2424
|
] });
|
|
2288
2425
|
}
|
|
2289
2426
|
|
|
2290
|
-
// src/components/marketing/ComparisonTable.tsx
|
|
2291
|
-
import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2292
|
-
function ComparisonTable({ rows, featureHeader = "Feature", includedHeader = "Tapiz", alternativeHeader = "Other", className = "" }) {
|
|
2293
|
-
return /* @__PURE__ */ jsx51("div", { className: `overflow-x-auto border border-[var(--tapiz-border-strong)] ${className}`, children: /* @__PURE__ */ jsxs35("table", { className: "w-full text-sm", children: [
|
|
2294
|
-
/* @__PURE__ */ jsx51("thead", { children: /* @__PURE__ */ jsxs35("tr", { children: [
|
|
2295
|
-
/* @__PURE__ */ jsx51("th", { className: "px-4 py-3 text-left", children: featureHeader }),
|
|
2296
|
-
/* @__PURE__ */ jsx51("th", { className: "px-4 py-3 text-left", children: includedHeader }),
|
|
2297
|
-
/* @__PURE__ */ jsx51("th", { className: "px-4 py-3 text-left", children: alternativeHeader })
|
|
2298
|
-
] }) }),
|
|
2299
|
-
/* @__PURE__ */ jsx51("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs35("tr", { className: "border-t border-[var(--tapiz-border-subtle)]", children: [
|
|
2300
|
-
/* @__PURE__ */ jsx51("td", { className: "px-4 py-3 font-medium text-[var(--tapiz-text-primary)]", children: row.feature }),
|
|
2301
|
-
/* @__PURE__ */ jsx51("td", { className: "px-4 py-3 text-[var(--tapiz-text-secondary)]", children: row.included }),
|
|
2302
|
-
/* @__PURE__ */ jsx51("td", { className: "px-4 py-3 text-[var(--tapiz-text-muted)]", children: row.alternative })
|
|
2303
|
-
] }, index)) })
|
|
2304
|
-
] }) });
|
|
2305
|
-
}
|
|
2306
|
-
|
|
2307
2427
|
// src/components/layout/AppShell.tsx
|
|
2308
|
-
import { jsx as
|
|
2428
|
+
import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
2309
2429
|
var variantClasses4 = {
|
|
2310
2430
|
default: "bg-[var(--tapiz-bg-page)]",
|
|
2311
2431
|
grid: "bg-[var(--tapiz-bg-page)] tapiz-grid-bg",
|
|
2312
2432
|
noise: "bg-[var(--tapiz-bg-page)] tapiz-noise-bg"
|
|
2313
2433
|
};
|
|
2314
2434
|
function AppShell({ sidebar, topbar, children, aside, className = "", contentClassName = "", variant = "default" }) {
|
|
2315
|
-
return /* @__PURE__ */
|
|
2435
|
+
return /* @__PURE__ */ jsxs37("div", { className: `min-h-screen text-[var(--tapiz-text-primary)] ${variantClasses4[variant]} ${className}`, children: [
|
|
2316
2436
|
topbar,
|
|
2317
|
-
/* @__PURE__ */
|
|
2318
|
-
sidebar ? /* @__PURE__ */
|
|
2319
|
-
/* @__PURE__ */
|
|
2320
|
-
aside ? /* @__PURE__ */
|
|
2437
|
+
/* @__PURE__ */ jsxs37("div", { className: "mx-auto flex w-full max-w-[1600px]", children: [
|
|
2438
|
+
sidebar ? /* @__PURE__ */ jsx53("aside", { className: "hidden min-h-[calc(100vh-1px)] w-72 shrink-0 border-r border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] lg:block", children: sidebar }) : null,
|
|
2439
|
+
/* @__PURE__ */ jsx53("main", { className: `min-w-0 flex-1 px-[var(--tapiz-space-page-x)] py-6 ${contentClassName}`, children }),
|
|
2440
|
+
aside ? /* @__PURE__ */ jsx53("aside", { className: "hidden w-80 shrink-0 border-l border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] xl:block", children: aside }) : null
|
|
2321
2441
|
] })
|
|
2322
2442
|
] });
|
|
2323
2443
|
}
|
|
2324
2444
|
|
|
2325
2445
|
// src/components/layout/SplitPane.tsx
|
|
2326
|
-
import { jsx as
|
|
2446
|
+
import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
2327
2447
|
var ratios = {
|
|
2328
2448
|
"50/50": "lg:grid-cols-2",
|
|
2329
2449
|
"60/40": "lg:grid-cols-[minmax(0,3fr)_minmax(320px,2fr)]",
|
|
2330
2450
|
"70/30": "lg:grid-cols-[minmax(0,7fr)_minmax(280px,3fr)]"
|
|
2331
2451
|
};
|
|
2332
2452
|
function SplitPane({ primary, secondary, ratio = "60/40", reverseOnMobile = false, className = "" }) {
|
|
2333
|
-
return /* @__PURE__ */
|
|
2334
|
-
/* @__PURE__ */
|
|
2335
|
-
/* @__PURE__ */
|
|
2453
|
+
return /* @__PURE__ */ jsxs38("div", { className: `grid gap-5 ${ratios[ratio]} ${className}`, children: [
|
|
2454
|
+
/* @__PURE__ */ jsx54("div", { className: reverseOnMobile ? "order-2 lg:order-1" : "", children: primary }),
|
|
2455
|
+
/* @__PURE__ */ jsx54("div", { className: reverseOnMobile ? "order-1 lg:order-2" : "", children: secondary })
|
|
2336
2456
|
] });
|
|
2337
2457
|
}
|
|
2338
2458
|
|
|
2339
2459
|
// src/components/layout/Stack.tsx
|
|
2340
|
-
import { jsx as
|
|
2460
|
+
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
2341
2461
|
var gapClasses = { xs: "gap-1", sm: "gap-2", md: "gap-4", lg: "gap-6", xl: "gap-8" };
|
|
2342
2462
|
var alignClasses = { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" };
|
|
2343
2463
|
var justifyClasses = { start: "justify-start", center: "justify-center", between: "justify-between", end: "justify-end" };
|
|
2344
2464
|
function Stack({ children, gap = "md", direction = "vertical", align = "stretch", justify = "start", wrap = false, className = "" }) {
|
|
2345
|
-
return /* @__PURE__ */
|
|
2465
|
+
return /* @__PURE__ */ jsx55("div", { className: `flex ${direction === "vertical" ? "flex-col" : "flex-row"} ${gapClasses[gap]} ${alignClasses[align]} ${justifyClasses[justify]} ${wrap ? "flex-wrap" : ""} ${className}`, children });
|
|
2346
2466
|
}
|
|
2347
2467
|
|
|
2348
2468
|
// src/components/layout/Cluster.tsx
|
|
2349
|
-
import { jsx as
|
|
2469
|
+
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
2350
2470
|
var gapClasses2 = { xs: "gap-1", sm: "gap-2", md: "gap-3", lg: "gap-5" };
|
|
2351
2471
|
var alignClasses2 = { start: "items-start", center: "items-center", end: "items-end" };
|
|
2352
2472
|
var justifyClasses2 = { start: "justify-start", center: "justify-center", between: "justify-between", end: "justify-end" };
|
|
2353
2473
|
function Cluster({ children, gap = "sm", align = "center", justify = "start", className = "" }) {
|
|
2354
|
-
return /* @__PURE__ */
|
|
2474
|
+
return /* @__PURE__ */ jsx56("div", { className: `flex flex-wrap ${gapClasses2[gap]} ${alignClasses2[align]} ${justifyClasses2[justify]} ${className}`, children });
|
|
2355
2475
|
}
|
|
2356
2476
|
|
|
2357
2477
|
// src/components/navigation/Breadcrumbs.tsx
|
|
2358
|
-
import { jsx as
|
|
2478
|
+
import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
2359
2479
|
function Breadcrumbs({ items, separator = "/", className = "" }) {
|
|
2360
|
-
return /* @__PURE__ */
|
|
2361
|
-
index > 0 ? /* @__PURE__ */
|
|
2362
|
-
item.href && !item.current ? /* @__PURE__ */
|
|
2480
|
+
return /* @__PURE__ */ jsx57("nav", { "aria-label": "Breadcrumb", className: `font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)] ${className}`, children: /* @__PURE__ */ jsx57("ol", { className: "flex flex-wrap items-center gap-2", children: items.map((item, index) => /* @__PURE__ */ jsxs39("li", { className: "flex items-center gap-2", children: [
|
|
2481
|
+
index > 0 ? /* @__PURE__ */ jsx57("span", { "aria-hidden": "true", className: "text-[var(--tapiz-text-disabled)]", children: separator }) : null,
|
|
2482
|
+
item.href && !item.current ? /* @__PURE__ */ jsx57("a", { className: "hover:text-[var(--tapiz-accent)]", href: item.href, children: item.label }) : /* @__PURE__ */ jsx57("span", { "aria-current": item.current ? "page" : void 0, className: item.current ? "text-[var(--tapiz-text-primary)]" : "", children: item.label })
|
|
2363
2483
|
] }, index)) }) });
|
|
2364
2484
|
}
|
|
2365
2485
|
|
|
2366
2486
|
// src/components/navigation/SidebarNav.tsx
|
|
2367
|
-
import { Fragment as
|
|
2487
|
+
import { Fragment as Fragment4, jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
2368
2488
|
function SidebarNav({ groups, header, footer, className = "" }) {
|
|
2369
|
-
return /* @__PURE__ */
|
|
2370
|
-
header ? /* @__PURE__ */
|
|
2371
|
-
/* @__PURE__ */
|
|
2372
|
-
group.label ? /* @__PURE__ */
|
|
2373
|
-
/* @__PURE__ */
|
|
2489
|
+
return /* @__PURE__ */ jsxs40("div", { className: `flex h-full min-h-screen flex-col bg-[var(--tapiz-bg-surface)] ${className}`, children: [
|
|
2490
|
+
header ? /* @__PURE__ */ jsx58("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-4", children: header }) : null,
|
|
2491
|
+
/* @__PURE__ */ jsx58("nav", { className: "flex-1 space-y-6 p-3", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs40("div", { children: [
|
|
2492
|
+
group.label ? /* @__PURE__ */ jsx58("div", { className: "mb-2 px-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: group.label }) : null,
|
|
2493
|
+
/* @__PURE__ */ jsx58("div", { className: "space-y-1", children: group.items.map((item, itemIndex) => /* @__PURE__ */ jsx58(SidebarNavLink, { item }, itemIndex)) })
|
|
2374
2494
|
] }, groupIndex)) }),
|
|
2375
|
-
footer ? /* @__PURE__ */
|
|
2495
|
+
footer ? /* @__PURE__ */ jsx58("div", { className: "border-t border-[var(--tapiz-border-subtle)] p-4", children: footer }) : null
|
|
2376
2496
|
] });
|
|
2377
2497
|
}
|
|
2378
2498
|
function SidebarNavLink({ item }) {
|
|
@@ -2381,29 +2501,29 @@ function SidebarNavLink({ item }) {
|
|
|
2381
2501
|
item.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-text-primary)] shadow-[inset_3px_0_0_var(--tapiz-accent)]" : "border-transparent text-[var(--tapiz-text-secondary)] hover:border-[var(--tapiz-border-subtle)] hover:bg-[var(--tapiz-bg-surface-muted)] hover:text-[var(--tapiz-text-primary)]",
|
|
2382
2502
|
item.disabled ? "pointer-events-none opacity-40" : ""
|
|
2383
2503
|
].filter(Boolean).join(" ");
|
|
2384
|
-
const content = /* @__PURE__ */
|
|
2385
|
-
item.icon ? /* @__PURE__ */
|
|
2386
|
-
/* @__PURE__ */
|
|
2387
|
-
item.badge ? /* @__PURE__ */
|
|
2504
|
+
const content = /* @__PURE__ */ jsxs40(Fragment4, { children: [
|
|
2505
|
+
item.icon ? /* @__PURE__ */ jsx58("span", { className: "grid size-5 place-items-center text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
|
|
2506
|
+
/* @__PURE__ */ jsx58("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
|
|
2507
|
+
item.badge ? /* @__PURE__ */ jsx58("span", { children: item.badge }) : null
|
|
2388
2508
|
] });
|
|
2389
|
-
return item.href ? /* @__PURE__ */
|
|
2509
|
+
return item.href ? /* @__PURE__ */ jsx58("a", { className, href: item.href, children: content }) : /* @__PURE__ */ jsx58("button", { type: "button", className, onClick: item.onClick, disabled: item.disabled, children: content });
|
|
2390
2510
|
}
|
|
2391
2511
|
|
|
2392
2512
|
// src/components/navigation/TopNav.tsx
|
|
2393
|
-
import { jsx as
|
|
2513
|
+
import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
2394
2514
|
function TopNav({ brand, links = [], actions, className = "", sticky = true }) {
|
|
2395
|
-
return /* @__PURE__ */
|
|
2396
|
-
brand ? /* @__PURE__ */
|
|
2397
|
-
/* @__PURE__ */
|
|
2515
|
+
return /* @__PURE__ */ jsx59("header", { className: `${sticky ? "sticky top-0 z-40" : ""} border-b border-[var(--tapiz-border-subtle)] bg-[color-mix(in_srgb,var(--tapiz-bg-surface)_88%,transparent)] backdrop-blur-xl ${className}`, children: /* @__PURE__ */ jsxs41("div", { className: "mx-auto flex h-16 max-w-[1600px] items-center gap-6 px-[var(--tapiz-space-page-x)]", children: [
|
|
2516
|
+
brand ? /* @__PURE__ */ jsx59("div", { className: "shrink-0", children: brand }) : null,
|
|
2517
|
+
/* @__PURE__ */ jsx59("nav", { className: "hidden items-center gap-1 md:flex", children: links.map((link, index) => {
|
|
2398
2518
|
const cls = `border px-3 py-1.5 text-sm font-medium ${link.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] text-[var(--tapiz-text-primary)]" : "border-transparent text-[var(--tapiz-text-secondary)] hover:border-[var(--tapiz-border-subtle)] hover:text-[var(--tapiz-text-primary)]"}`;
|
|
2399
|
-
return link.href ? /* @__PURE__ */
|
|
2519
|
+
return link.href ? /* @__PURE__ */ jsx59("a", { href: link.href, className: cls, children: link.label }, index) : /* @__PURE__ */ jsx59("button", { type: "button", onClick: link.onClick, className: cls, children: link.label }, index);
|
|
2400
2520
|
}) }),
|
|
2401
|
-
actions ? /* @__PURE__ */
|
|
2521
|
+
actions ? /* @__PURE__ */ jsx59("div", { className: "ml-auto flex items-center gap-2", children: actions }) : null
|
|
2402
2522
|
] }) });
|
|
2403
2523
|
}
|
|
2404
2524
|
|
|
2405
2525
|
// src/components/disclosure/Tabs.tsx
|
|
2406
|
-
import { jsx as
|
|
2526
|
+
import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
2407
2527
|
var variants = {
|
|
2408
2528
|
line: "border-b border-[var(--tapiz-border-subtle)]",
|
|
2409
2529
|
boxed: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-1",
|
|
@@ -2411,10 +2531,10 @@ var variants = {
|
|
|
2411
2531
|
};
|
|
2412
2532
|
function Tabs({ items, activeId, onChange, className = "", variant = "line" }) {
|
|
2413
2533
|
const active = items.find((item) => item.id === activeId) ?? items[0];
|
|
2414
|
-
return /* @__PURE__ */
|
|
2415
|
-
/* @__PURE__ */
|
|
2534
|
+
return /* @__PURE__ */ jsxs42("div", { className, children: [
|
|
2535
|
+
/* @__PURE__ */ jsx60("div", { role: "tablist", className: `flex flex-wrap gap-1 ${variants[variant]}`, children: items.map((item) => {
|
|
2416
2536
|
const selected = item.id === active?.id;
|
|
2417
|
-
return /* @__PURE__ */
|
|
2537
|
+
return /* @__PURE__ */ jsxs42(
|
|
2418
2538
|
"button",
|
|
2419
2539
|
{
|
|
2420
2540
|
type: "button",
|
|
@@ -2431,17 +2551,17 @@ function Tabs({ items, activeId, onChange, className = "", variant = "line" }) {
|
|
|
2431
2551
|
item.id
|
|
2432
2552
|
);
|
|
2433
2553
|
}) }),
|
|
2434
|
-
/* @__PURE__ */
|
|
2554
|
+
/* @__PURE__ */ jsx60("div", { role: "tabpanel", className: "pt-4", children: active?.content })
|
|
2435
2555
|
] });
|
|
2436
2556
|
}
|
|
2437
2557
|
|
|
2438
2558
|
// src/components/disclosure/Accordion.tsx
|
|
2439
|
-
import { jsx as
|
|
2559
|
+
import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
2440
2560
|
function Accordion({ items, openIds = [], onToggle, className = "" }) {
|
|
2441
|
-
return /* @__PURE__ */
|
|
2561
|
+
return /* @__PURE__ */ jsx61("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item) => {
|
|
2442
2562
|
const open = openIds.includes(item.id);
|
|
2443
|
-
return /* @__PURE__ */
|
|
2444
|
-
/* @__PURE__ */
|
|
2563
|
+
return /* @__PURE__ */ jsxs43("section", { children: [
|
|
2564
|
+
/* @__PURE__ */ jsxs43(
|
|
2445
2565
|
"button",
|
|
2446
2566
|
{
|
|
2447
2567
|
type: "button",
|
|
@@ -2450,21 +2570,21 @@ function Accordion({ items, openIds = [], onToggle, className = "" }) {
|
|
|
2450
2570
|
onClick: () => onToggle?.(item.id),
|
|
2451
2571
|
className: "flex w-full items-center justify-between gap-4 px-4 py-3 text-left disabled:opacity-40",
|
|
2452
2572
|
children: [
|
|
2453
|
-
/* @__PURE__ */
|
|
2454
|
-
/* @__PURE__ */
|
|
2573
|
+
/* @__PURE__ */ jsx61("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
2574
|
+
/* @__PURE__ */ jsxs43("span", { className: "flex items-center gap-3 text-[var(--tapiz-text-muted)]", children: [
|
|
2455
2575
|
item.meta,
|
|
2456
|
-
/* @__PURE__ */
|
|
2576
|
+
/* @__PURE__ */ jsx61("span", { "aria-hidden": "true", className: "font-mono text-lg", children: open ? "\u2212" : "+" })
|
|
2457
2577
|
] })
|
|
2458
2578
|
]
|
|
2459
2579
|
}
|
|
2460
2580
|
),
|
|
2461
|
-
open ? /* @__PURE__ */
|
|
2581
|
+
open ? /* @__PURE__ */ jsx61("div", { className: "border-t border-[var(--tapiz-border-subtle)] px-4 py-4 text-sm text-[var(--tapiz-text-secondary)]", children: item.content }) : null
|
|
2462
2582
|
] }, item.id);
|
|
2463
2583
|
}) });
|
|
2464
2584
|
}
|
|
2465
2585
|
|
|
2466
2586
|
// src/components/disclosure/Stepper.tsx
|
|
2467
|
-
import { jsx as
|
|
2587
|
+
import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
2468
2588
|
var tone = {
|
|
2469
2589
|
complete: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)] text-[var(--tapiz-success)]",
|
|
2470
2590
|
current: "border-[var(--tapiz-accent)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-accent)]",
|
|
@@ -2472,65 +2592,65 @@ var tone = {
|
|
|
2472
2592
|
error: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]"
|
|
2473
2593
|
};
|
|
2474
2594
|
function Stepper({ steps, orientation = "horizontal", className = "" }) {
|
|
2475
|
-
return /* @__PURE__ */
|
|
2595
|
+
return /* @__PURE__ */ jsx62("ol", { className: `grid gap-3 ${orientation === "horizontal" ? "md:grid-cols-[repeat(auto-fit,minmax(0,1fr))]" : ""} ${className}`, children: steps.map((step, index) => {
|
|
2476
2596
|
const status = step.status ?? "upcoming";
|
|
2477
|
-
return /* @__PURE__ */
|
|
2478
|
-
/* @__PURE__ */
|
|
2479
|
-
/* @__PURE__ */
|
|
2480
|
-
/* @__PURE__ */
|
|
2481
|
-
step.description ? /* @__PURE__ */
|
|
2597
|
+
return /* @__PURE__ */ jsxs44("li", { className: "flex gap-3", children: [
|
|
2598
|
+
/* @__PURE__ */ jsx62("span", { className: `grid size-8 shrink-0 place-items-center border font-mono text-xs font-bold ${tone[status]}`, children: status === "complete" ? "\u2713" : index + 1 }),
|
|
2599
|
+
/* @__PURE__ */ jsxs44("span", { className: "min-w-0", children: [
|
|
2600
|
+
/* @__PURE__ */ jsx62("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: step.label }),
|
|
2601
|
+
step.description ? /* @__PURE__ */ jsx62("span", { className: "mt-1 block text-xs text-[var(--tapiz-text-muted)]", children: step.description }) : null
|
|
2482
2602
|
] })
|
|
2483
2603
|
] }, step.id);
|
|
2484
2604
|
}) });
|
|
2485
2605
|
}
|
|
2486
2606
|
|
|
2487
2607
|
// src/components/overlays/Drawer.tsx
|
|
2488
|
-
import { jsx as
|
|
2608
|
+
import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
2489
2609
|
function Drawer({ open, onClose, title, description, children, footer, side = "right", className = "" }) {
|
|
2490
2610
|
if (!open) return null;
|
|
2491
|
-
return /* @__PURE__ */
|
|
2492
|
-
/* @__PURE__ */
|
|
2493
|
-
/* @__PURE__ */
|
|
2494
|
-
/* @__PURE__ */
|
|
2495
|
-
/* @__PURE__ */
|
|
2496
|
-
title ? /* @__PURE__ */
|
|
2497
|
-
description ? /* @__PURE__ */
|
|
2611
|
+
return /* @__PURE__ */ jsxs45("div", { className: "fixed inset-0 z-50", children: [
|
|
2612
|
+
/* @__PURE__ */ jsx63("button", { type: "button", "aria-label": "Close drawer", className: "absolute inset-0 bg-(--tapiz-bg-overlay)", onClick: onClose }),
|
|
2613
|
+
/* @__PURE__ */ jsxs45("section", { className: `absolute top-0 h-full w-full max-w-md border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) shadow-(--tapiz-shadow-lg) ${side === "right" ? "right-0 border-l" : "left-0 border-r"} ${className}`, children: [
|
|
2614
|
+
/* @__PURE__ */ jsxs45("header", { className: "flex items-start justify-between gap-4 border-b border-(--tapiz-border-subtle) p-5", children: [
|
|
2615
|
+
/* @__PURE__ */ jsxs45("div", { children: [
|
|
2616
|
+
title ? /* @__PURE__ */ jsx63("h2", { className: "text-lg font-semibold text-(--tapiz-text-primary)", children: title }) : null,
|
|
2617
|
+
description ? /* @__PURE__ */ jsx63("p", { className: "mt-1 text-sm text-(--tapiz-text-muted)", children: description }) : null
|
|
2498
2618
|
] }),
|
|
2499
|
-
/* @__PURE__ */
|
|
2619
|
+
/* @__PURE__ */ jsx63("button", { type: "button", onClick: onClose, className: "border border-(--tapiz-border-subtle) px-2 py-1 font-mono text-sm text-(--tapiz-text-muted) hover:text-(--tapiz-text-primary)", children: "\xD7" })
|
|
2500
2620
|
] }),
|
|
2501
|
-
/* @__PURE__ */
|
|
2502
|
-
footer ? /* @__PURE__ */
|
|
2621
|
+
/* @__PURE__ */ jsx63("div", { className: "max-h-[calc(100vh-9rem)] overflow-auto p-5", children }),
|
|
2622
|
+
footer ? /* @__PURE__ */ jsx63("footer", { className: "border-t border-(--tapiz-border-subtle) p-4", children: footer }) : null
|
|
2503
2623
|
] })
|
|
2504
2624
|
] });
|
|
2505
2625
|
}
|
|
2506
2626
|
|
|
2507
2627
|
// src/components/overlays/Popover.tsx
|
|
2508
|
-
import { jsx as
|
|
2628
|
+
import { jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
2509
2629
|
function Popover({ trigger, children, open = false, align = "start", className = "" }) {
|
|
2510
|
-
return /* @__PURE__ */
|
|
2630
|
+
return /* @__PURE__ */ jsxs46("div", { className: `relative inline-block ${className}`, children: [
|
|
2511
2631
|
trigger,
|
|
2512
|
-
open ? /* @__PURE__ */
|
|
2632
|
+
open ? /* @__PURE__ */ jsx64("div", { className: `absolute top-full z-40 mt-2 min-w-64 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-2 shadow-[var(--tapiz-shadow-md)] ${align === "end" ? "right-0" : "left-0"}`, children }) : null
|
|
2513
2633
|
] });
|
|
2514
2634
|
}
|
|
2515
2635
|
|
|
2516
2636
|
// src/components/overlays/CommandMenu.tsx
|
|
2517
|
-
import { jsx as
|
|
2637
|
+
import { jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
2518
2638
|
function CommandMenu({ open, onClose, query = "", onQueryChange, groups, placeholder = "Search commands\u2026", empty = "No commands found." }) {
|
|
2519
2639
|
if (!open) return null;
|
|
2520
2640
|
const hasItems = groups.some((group) => group.items.length > 0);
|
|
2521
|
-
return /* @__PURE__ */
|
|
2522
|
-
/* @__PURE__ */
|
|
2523
|
-
/* @__PURE__ */
|
|
2524
|
-
!hasItems ? /* @__PURE__ */
|
|
2525
|
-
groups.map((group, groupIndex) => /* @__PURE__ */
|
|
2526
|
-
group.label ? /* @__PURE__ */
|
|
2527
|
-
group.items.map((item) => /* @__PURE__ */
|
|
2528
|
-
item.icon ? /* @__PURE__ */
|
|
2529
|
-
/* @__PURE__ */
|
|
2530
|
-
/* @__PURE__ */
|
|
2531
|
-
item.description ? /* @__PURE__ */
|
|
2641
|
+
return /* @__PURE__ */ jsx65("div", { className: "fixed inset-0 z-50 grid place-items-start bg-[var(--tapiz-bg-overlay)] px-4 pt-[12vh]", onClick: onClose, children: /* @__PURE__ */ jsxs47("div", { className: "mx-auto w-full max-w-2xl border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-brutal-lg)]", onClick: (e) => e.stopPropagation(), children: [
|
|
2642
|
+
/* @__PURE__ */ jsx65("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-3", children: /* @__PURE__ */ jsx65(SearchInput, { value: query, onChange: (value) => onQueryChange?.(value), placeholder, autoFocus: true }) }),
|
|
2643
|
+
/* @__PURE__ */ jsxs47("div", { className: "max-h-[50vh] overflow-auto p-2", children: [
|
|
2644
|
+
!hasItems ? /* @__PURE__ */ jsx65("div", { className: "p-6 text-center text-sm text-[var(--tapiz-text-muted)]", children: empty }) : null,
|
|
2645
|
+
groups.map((group, groupIndex) => /* @__PURE__ */ jsxs47("div", { className: "py-2", children: [
|
|
2646
|
+
group.label ? /* @__PURE__ */ jsx65("div", { className: "px-2 pb-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: group.label }) : null,
|
|
2647
|
+
group.items.map((item) => /* @__PURE__ */ jsxs47("button", { type: "button", disabled: item.disabled, onClick: item.onSelect, className: "flex w-full items-center gap-3 border border-transparent px-3 py-2 text-left hover:border-[var(--tapiz-border-subtle)] hover:bg-[var(--tapiz-bg-surface-muted)] disabled:opacity-40", children: [
|
|
2648
|
+
item.icon ? /* @__PURE__ */ jsx65("span", { className: "grid size-8 place-items-center border border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
|
|
2649
|
+
/* @__PURE__ */ jsxs47("span", { className: "min-w-0 flex-1", children: [
|
|
2650
|
+
/* @__PURE__ */ jsx65("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.label }),
|
|
2651
|
+
item.description ? /* @__PURE__ */ jsx65("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
2532
2652
|
] }),
|
|
2533
|
-
item.shortcut ? /* @__PURE__ */
|
|
2653
|
+
item.shortcut ? /* @__PURE__ */ jsx65("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.shortcut }) : null
|
|
2534
2654
|
] }, item.id))
|
|
2535
2655
|
] }, groupIndex))
|
|
2536
2656
|
] })
|
|
@@ -2538,23 +2658,23 @@ function CommandMenu({ open, onClose, query = "", onQueryChange, groups, placeho
|
|
|
2538
2658
|
}
|
|
2539
2659
|
|
|
2540
2660
|
// src/components/forms/FormField.tsx
|
|
2541
|
-
import { jsx as
|
|
2661
|
+
import { jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
2542
2662
|
function FormField({ label, hint, error, required, htmlFor, children, className = "" }) {
|
|
2543
|
-
return /* @__PURE__ */
|
|
2544
|
-
label ? /* @__PURE__ */
|
|
2663
|
+
return /* @__PURE__ */ jsxs48("div", { className: `space-y-1.5 ${className}`, children: [
|
|
2664
|
+
label ? /* @__PURE__ */ jsxs48(FieldLabel, { htmlFor, children: [
|
|
2545
2665
|
label,
|
|
2546
2666
|
required ? " *" : ""
|
|
2547
2667
|
] }) : null,
|
|
2548
2668
|
children,
|
|
2549
|
-
error ? /* @__PURE__ */
|
|
2669
|
+
error ? /* @__PURE__ */ jsx66(FormError, { message: String(error) }) : hint ? /* @__PURE__ */ jsx66(FieldHint, { children: hint }) : null
|
|
2550
2670
|
] });
|
|
2551
2671
|
}
|
|
2552
2672
|
|
|
2553
2673
|
// src/components/forms/Switch.tsx
|
|
2554
|
-
import { jsx as
|
|
2674
|
+
import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
2555
2675
|
function Switch({ checked = false, onChange, disabled, label, description, className = "" }) {
|
|
2556
|
-
return /* @__PURE__ */
|
|
2557
|
-
/* @__PURE__ */
|
|
2676
|
+
return /* @__PURE__ */ jsxs49("label", { className: `flex cursor-pointer items-start gap-3 ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`, children: [
|
|
2677
|
+
/* @__PURE__ */ jsx67(
|
|
2558
2678
|
"button",
|
|
2559
2679
|
{
|
|
2560
2680
|
type: "button",
|
|
@@ -2563,22 +2683,22 @@ function Switch({ checked = false, onChange, disabled, label, description, class
|
|
|
2563
2683
|
disabled,
|
|
2564
2684
|
onClick: () => onChange?.(!checked),
|
|
2565
2685
|
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)]"}`,
|
|
2566
|
-
children: /* @__PURE__ */
|
|
2686
|
+
children: /* @__PURE__ */ jsx67("span", { className: `absolute top-0.5 size-4 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] transition-transform ${checked ? "left-5" : "left-0.5"}` })
|
|
2567
2687
|
}
|
|
2568
2688
|
),
|
|
2569
|
-
label || description ? /* @__PURE__ */
|
|
2570
|
-
label ? /* @__PURE__ */
|
|
2571
|
-
description ? /* @__PURE__ */
|
|
2689
|
+
label || description ? /* @__PURE__ */ jsxs49("span", { children: [
|
|
2690
|
+
label ? /* @__PURE__ */ jsx67("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
|
|
2691
|
+
description ? /* @__PURE__ */ jsx67("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
2572
2692
|
] }) : null
|
|
2573
2693
|
] });
|
|
2574
2694
|
}
|
|
2575
2695
|
|
|
2576
2696
|
// src/components/forms/ToggleGroup.tsx
|
|
2577
|
-
import { jsx as
|
|
2697
|
+
import { jsx as jsx68 } from "react/jsx-runtime";
|
|
2578
2698
|
function ToggleGroup({ options, value, onChange, className = "", fullWidth = false }) {
|
|
2579
|
-
return /* @__PURE__ */
|
|
2699
|
+
return /* @__PURE__ */ jsx68("div", { className: `inline-flex border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] p-1 ${fullWidth ? "w-full" : ""} ${className}`, children: options.map((option) => {
|
|
2580
2700
|
const selected = option.value === value;
|
|
2581
|
-
return /* @__PURE__ */
|
|
2701
|
+
return /* @__PURE__ */ jsx68(
|
|
2582
2702
|
"button",
|
|
2583
2703
|
{
|
|
2584
2704
|
type: "button",
|
|
@@ -2593,17 +2713,17 @@ function ToggleGroup({ options, value, onChange, className = "", fullWidth = fal
|
|
|
2593
2713
|
}
|
|
2594
2714
|
|
|
2595
2715
|
// src/components/forms/InputGroup.tsx
|
|
2596
|
-
import { jsx as
|
|
2716
|
+
import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
2597
2717
|
function InputGroup({ prefix, suffix, children, className = "" }) {
|
|
2598
|
-
return /* @__PURE__ */
|
|
2599
|
-
prefix ? /* @__PURE__ */
|
|
2600
|
-
/* @__PURE__ */
|
|
2601
|
-
suffix ? /* @__PURE__ */
|
|
2718
|
+
return /* @__PURE__ */ jsxs50("div", { className: `flex items-stretch border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] focus-within:border-[var(--tapiz-border-focus)] focus-within:shadow-[inset_3px_0_0_var(--tapiz-signal)] ${className}`, children: [
|
|
2719
|
+
prefix ? /* @__PURE__ */ jsx69("div", { className: "flex items-center border-r border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: prefix }) : null,
|
|
2720
|
+
/* @__PURE__ */ jsx69("div", { className: "min-w-0 flex-1 [&_input]:border-0 [&_input]:shadow-none [&_input]:focus:shadow-none", children }),
|
|
2721
|
+
suffix ? /* @__PURE__ */ jsx69("div", { className: "flex items-center border-l border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: suffix }) : null
|
|
2602
2722
|
] });
|
|
2603
2723
|
}
|
|
2604
2724
|
|
|
2605
2725
|
// src/components/feedback/Alert.tsx
|
|
2606
|
-
import { jsx as
|
|
2726
|
+
import { jsx as jsx70, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
2607
2727
|
var toneClasses = {
|
|
2608
2728
|
info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)] text-[var(--tapiz-info)]",
|
|
2609
2729
|
success: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)] text-[var(--tapiz-success)]",
|
|
@@ -2612,18 +2732,18 @@ var toneClasses = {
|
|
|
2612
2732
|
neutral: "border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-secondary)]"
|
|
2613
2733
|
};
|
|
2614
2734
|
function Alert2({ tone: tone2 = "info", title, children, icon, actions, className = "" }) {
|
|
2615
|
-
return /* @__PURE__ */
|
|
2616
|
-
icon ? /* @__PURE__ */
|
|
2617
|
-
/* @__PURE__ */
|
|
2618
|
-
title ? /* @__PURE__ */
|
|
2619
|
-
children ? /* @__PURE__ */
|
|
2735
|
+
return /* @__PURE__ */ jsxs51("div", { className: `flex gap-3 border p-4 ${toneClasses[tone2]} ${className}`, children: [
|
|
2736
|
+
icon ? /* @__PURE__ */ jsx70("div", { className: "mt-0.5 shrink-0", children: icon }) : null,
|
|
2737
|
+
/* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1", children: [
|
|
2738
|
+
title ? /* @__PURE__ */ jsx70("div", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
2739
|
+
children ? /* @__PURE__ */ jsx70("div", { className: "mt-1 text-sm text-[var(--tapiz-text-secondary)]", children }) : null
|
|
2620
2740
|
] }),
|
|
2621
|
-
actions ? /* @__PURE__ */
|
|
2741
|
+
actions ? /* @__PURE__ */ jsx70("div", { className: "shrink-0", children: actions }) : null
|
|
2622
2742
|
] });
|
|
2623
2743
|
}
|
|
2624
2744
|
|
|
2625
2745
|
// src/components/feedback/Progress.tsx
|
|
2626
|
-
import { jsx as
|
|
2746
|
+
import { jsx as jsx71, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
2627
2747
|
var tones = {
|
|
2628
2748
|
accent: "bg-[var(--tapiz-accent)]",
|
|
2629
2749
|
success: "bg-[var(--tapiz-success)]",
|
|
@@ -2632,34 +2752,34 @@ var tones = {
|
|
|
2632
2752
|
};
|
|
2633
2753
|
function Progress({ value, max = 100, label, showValue = false, tone: tone2 = "accent", className = "" }) {
|
|
2634
2754
|
const percentage = Math.max(0, Math.min(100, value / max * 100));
|
|
2635
|
-
return /* @__PURE__ */
|
|
2636
|
-
label || showValue ? /* @__PURE__ */
|
|
2637
|
-
label ? /* @__PURE__ */
|
|
2638
|
-
showValue ? /* @__PURE__ */
|
|
2755
|
+
return /* @__PURE__ */ jsxs52("div", { className, children: [
|
|
2756
|
+
label || showValue ? /* @__PURE__ */ jsxs52("div", { className: "mb-1 flex items-center justify-between gap-3 text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
2757
|
+
label ? /* @__PURE__ */ jsx71("span", { children: label }) : /* @__PURE__ */ jsx71("span", {}),
|
|
2758
|
+
showValue ? /* @__PURE__ */ jsxs52("span", { className: "font-mono", children: [
|
|
2639
2759
|
Math.round(percentage),
|
|
2640
2760
|
"%"
|
|
2641
2761
|
] }) : null
|
|
2642
2762
|
] }) : null,
|
|
2643
|
-
/* @__PURE__ */
|
|
2763
|
+
/* @__PURE__ */ jsx71("div", { className: "h-2 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx71("div", { className: `h-full ${tones[tone2]}`, style: { width: `${percentage}%` } }) })
|
|
2644
2764
|
] });
|
|
2645
2765
|
}
|
|
2646
2766
|
|
|
2647
2767
|
// src/components/shared/Avatar.tsx
|
|
2648
|
-
import { jsx as
|
|
2768
|
+
import { jsx as jsx72 } from "react/jsx-runtime";
|
|
2649
2769
|
var sizes = { xs: "size-6 text-[10px]", sm: "size-8 text-xs", md: "size-10 text-sm", lg: "size-14 text-base" };
|
|
2650
2770
|
function Avatar({ src, name = "?", size = "md", className = "" }) {
|
|
2651
2771
|
const initials = name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("") || "?";
|
|
2652
|
-
return src ? /* @__PURE__ */
|
|
2772
|
+
return src ? /* @__PURE__ */ jsx72("img", { src, alt: name, className: `border border-[var(--tapiz-border-strong)] object-cover ${sizes[size]} ${className}` }) : /* @__PURE__ */ jsx72("span", { className: `inline-grid place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] font-mono font-bold text-[var(--tapiz-accent)] ${sizes[size]} ${className}`, children: initials });
|
|
2653
2773
|
}
|
|
2654
2774
|
|
|
2655
2775
|
// src/components/shared/Kbd.tsx
|
|
2656
|
-
import { jsx as
|
|
2776
|
+
import { jsx as jsx73 } from "react/jsx-runtime";
|
|
2657
2777
|
function Kbd({ children, className = "" }) {
|
|
2658
|
-
return /* @__PURE__ */
|
|
2778
|
+
return /* @__PURE__ */ jsx73("kbd", { className: `inline-flex min-w-5 items-center justify-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] px-1.5 py-0.5 font-mono text-[10px] font-bold text-[var(--tapiz-text-secondary)] shadow-[1px_1px_0_var(--tapiz-border-strong)] ${className}`, children });
|
|
2659
2779
|
}
|
|
2660
2780
|
|
|
2661
2781
|
// src/components/shared/Timeline.tsx
|
|
2662
|
-
import { jsx as
|
|
2782
|
+
import { jsx as jsx74, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
2663
2783
|
var tones2 = {
|
|
2664
2784
|
neutral: "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-muted)]",
|
|
2665
2785
|
info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)] text-[var(--tapiz-info)]",
|
|
@@ -2668,94 +2788,94 @@ var tones2 = {
|
|
|
2668
2788
|
danger: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]"
|
|
2669
2789
|
};
|
|
2670
2790
|
function Timeline({ items, className = "" }) {
|
|
2671
|
-
return /* @__PURE__ */
|
|
2672
|
-
/* @__PURE__ */
|
|
2673
|
-
/* @__PURE__ */
|
|
2674
|
-
/* @__PURE__ */
|
|
2675
|
-
/* @__PURE__ */
|
|
2676
|
-
item.time ? /* @__PURE__ */
|
|
2791
|
+
return /* @__PURE__ */ jsx74("ol", { className: `relative space-y-4 before:absolute before:left-4 before:top-2 before:h-[calc(100%-1rem)] before:w-px before:bg-[var(--tapiz-border-subtle)] ${className}`, children: items.map((item) => /* @__PURE__ */ jsxs53("li", { className: "relative flex gap-3", children: [
|
|
2792
|
+
/* @__PURE__ */ jsx74("span", { className: `z-10 grid size-8 shrink-0 place-items-center border text-xs ${tones2[item.tone ?? "neutral"]}`, children: item.icon ?? "\u2022" }),
|
|
2793
|
+
/* @__PURE__ */ jsxs53("span", { className: "min-w-0 flex-1 pb-2", children: [
|
|
2794
|
+
/* @__PURE__ */ jsxs53("span", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
|
|
2795
|
+
/* @__PURE__ */ jsx74("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
2796
|
+
item.time ? /* @__PURE__ */ jsx74("span", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
2677
2797
|
] }),
|
|
2678
|
-
item.description ? /* @__PURE__ */
|
|
2798
|
+
item.description ? /* @__PURE__ */ jsx74("span", { className: "mt-1 block text-sm text-[var(--tapiz-text-secondary)]", children: item.description }) : null
|
|
2679
2799
|
] })
|
|
2680
2800
|
] }, item.id)) });
|
|
2681
2801
|
}
|
|
2682
2802
|
|
|
2683
2803
|
// src/components/shared/KeyValueList.tsx
|
|
2684
|
-
import { jsx as
|
|
2804
|
+
import { jsx as jsx75, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
2685
2805
|
function KeyValueList({ items, className = "", density = "normal" }) {
|
|
2686
|
-
return /* @__PURE__ */
|
|
2687
|
-
/* @__PURE__ */
|
|
2688
|
-
/* @__PURE__ */
|
|
2689
|
-
/* @__PURE__ */
|
|
2690
|
-
item.description ? /* @__PURE__ */
|
|
2806
|
+
return /* @__PURE__ */ jsx75("dl", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs54("div", { className: `grid gap-2 ${density === "compact" ? "p-3 md:grid-cols-[160px_1fr]" : "p-4 md:grid-cols-[220px_1fr]"}`, children: [
|
|
2807
|
+
/* @__PURE__ */ jsx75("dt", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: item.keyLabel }),
|
|
2808
|
+
/* @__PURE__ */ jsxs54("dd", { children: [
|
|
2809
|
+
/* @__PURE__ */ jsx75("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.value }),
|
|
2810
|
+
item.description ? /* @__PURE__ */ jsx75("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
2691
2811
|
] })
|
|
2692
2812
|
] }, index)) });
|
|
2693
2813
|
}
|
|
2694
2814
|
|
|
2695
2815
|
// src/components/shared/CodeBlock.tsx
|
|
2696
|
-
import { jsx as
|
|
2816
|
+
import { jsx as jsx76, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
2697
2817
|
function CodeBlock({ children, language, title, actions, className = "" }) {
|
|
2698
|
-
return /* @__PURE__ */
|
|
2699
|
-
title || language || actions ? /* @__PURE__ */
|
|
2700
|
-
/* @__PURE__ */
|
|
2818
|
+
return /* @__PURE__ */ jsxs55("figure", { className: `overflow-hidden border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
|
|
2819
|
+
title || language || actions ? /* @__PURE__ */ jsxs55("figcaption", { className: "flex items-center justify-between gap-3 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] px-3 py-2", children: [
|
|
2820
|
+
/* @__PURE__ */ jsx76("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title ?? language }),
|
|
2701
2821
|
actions
|
|
2702
2822
|
] }) : null,
|
|
2703
|
-
/* @__PURE__ */
|
|
2823
|
+
/* @__PURE__ */ jsx76("pre", { className: "overflow-auto p-4 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children: /* @__PURE__ */ jsx76("code", { children }) })
|
|
2704
2824
|
] });
|
|
2705
2825
|
}
|
|
2706
2826
|
|
|
2707
2827
|
// src/components/marketing/LogoCloud.tsx
|
|
2708
|
-
import { jsx as
|
|
2828
|
+
import { jsx as jsx77, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
2709
2829
|
function LogoCloud({ title, items, className = "" }) {
|
|
2710
|
-
return /* @__PURE__ */
|
|
2711
|
-
title ? /* @__PURE__ */
|
|
2712
|
-
/* @__PURE__ */
|
|
2830
|
+
return /* @__PURE__ */ jsx77("section", { className: `border-y border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] py-8 ${className}`, children: /* @__PURE__ */ jsxs56("div", { className: "mx-auto max-w-7xl px-[var(--tapiz-space-page-x)]", children: [
|
|
2831
|
+
title ? /* @__PURE__ */ jsx77("p", { className: "mb-6 text-center font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title }) : null,
|
|
2832
|
+
/* @__PURE__ */ jsx77("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4 lg:grid-cols-6", children: items.map((item) => /* @__PURE__ */ jsx77("div", { className: "grid min-h-20 place-items-center border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] px-4 text-center text-sm font-semibold text-[var(--tapiz-text-secondary)]", children: item.logo ?? item.name }, item.name)) })
|
|
2713
2833
|
] }) });
|
|
2714
2834
|
}
|
|
2715
2835
|
|
|
2716
2836
|
// src/components/marketing/TestimonialCard.tsx
|
|
2717
|
-
import { jsx as
|
|
2837
|
+
import { jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
2718
2838
|
function TestimonialCard({ quote, author, role, avatarSrc, className = "", variant = "surface" }) {
|
|
2719
|
-
return /* @__PURE__ */
|
|
2720
|
-
/* @__PURE__ */
|
|
2839
|
+
return /* @__PURE__ */ jsxs57("figure", { className: `border bg-[var(--tapiz-bg-surface)] p-5 ${variant === "brutal" ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal)]" : "border-[var(--tapiz-border-subtle)] shadow-[var(--tapiz-shadow-sm)]"} ${className}`, children: [
|
|
2840
|
+
/* @__PURE__ */ jsxs57("blockquote", { className: "text-base leading-7 text-[var(--tapiz-text-secondary)]", children: [
|
|
2721
2841
|
"\u201C",
|
|
2722
2842
|
quote,
|
|
2723
2843
|
"\u201D"
|
|
2724
2844
|
] }),
|
|
2725
|
-
/* @__PURE__ */
|
|
2726
|
-
/* @__PURE__ */
|
|
2727
|
-
/* @__PURE__ */
|
|
2728
|
-
/* @__PURE__ */
|
|
2729
|
-
role ? /* @__PURE__ */
|
|
2845
|
+
/* @__PURE__ */ jsxs57("figcaption", { className: "mt-5 flex items-center gap-3", children: [
|
|
2846
|
+
/* @__PURE__ */ jsx78(Avatar, { name: author, src: avatarSrc, size: "sm" }),
|
|
2847
|
+
/* @__PURE__ */ jsxs57("span", { children: [
|
|
2848
|
+
/* @__PURE__ */ jsx78("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: author }),
|
|
2849
|
+
role ? /* @__PURE__ */ jsx78("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: role }) : null
|
|
2730
2850
|
] })
|
|
2731
2851
|
] })
|
|
2732
2852
|
] });
|
|
2733
2853
|
}
|
|
2734
2854
|
|
|
2735
2855
|
// src/components/marketing/PricingCard.tsx
|
|
2736
|
-
import { jsx as
|
|
2856
|
+
import { jsx as jsx79, jsxs as jsxs58 } from "react/jsx-runtime";
|
|
2737
2857
|
function PricingCard({ name, price, description, features = [], cta, highlighted = false, className = "" }) {
|
|
2738
|
-
return /* @__PURE__ */
|
|
2739
|
-
/* @__PURE__ */
|
|
2740
|
-
/* @__PURE__ */
|
|
2741
|
-
description ? /* @__PURE__ */
|
|
2742
|
-
/* @__PURE__ */
|
|
2743
|
-
/* @__PURE__ */
|
|
2744
|
-
/* @__PURE__ */
|
|
2745
|
-
/* @__PURE__ */
|
|
2858
|
+
return /* @__PURE__ */ jsxs58("section", { className: `flex h-full flex-col border bg-[var(--tapiz-bg-surface)] p-6 ${highlighted ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal-lg)]" : "border-[var(--tapiz-border-subtle)] shadow-[var(--tapiz-shadow-sm)]"} ${className}`, children: [
|
|
2859
|
+
/* @__PURE__ */ jsxs58("div", { className: "flex-1", children: [
|
|
2860
|
+
/* @__PURE__ */ jsx79("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: name }),
|
|
2861
|
+
description ? /* @__PURE__ */ jsx79("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
|
|
2862
|
+
/* @__PURE__ */ jsx79("div", { className: "mt-6 text-4xl font-semibold tracking-tight text-[var(--tapiz-text-primary)]", children: price }),
|
|
2863
|
+
/* @__PURE__ */ jsx79("ul", { className: "mt-6 space-y-3 text-sm text-[var(--tapiz-text-secondary)]", children: features.map((feature, index) => /* @__PURE__ */ jsxs58("li", { className: "flex gap-2", children: [
|
|
2864
|
+
/* @__PURE__ */ jsx79("span", { className: "text-[var(--tapiz-success)]", children: "\u2713" }),
|
|
2865
|
+
/* @__PURE__ */ jsx79("span", { children: feature })
|
|
2746
2866
|
] }, index)) })
|
|
2747
2867
|
] }),
|
|
2748
|
-
/* @__PURE__ */
|
|
2868
|
+
/* @__PURE__ */ jsx79("div", { className: "mt-6", children: cta ?? /* @__PURE__ */ jsx79(Button, { variant: highlighted ? "primary" : "secondary", fullWidth: true, children: "Get started" }) })
|
|
2749
2869
|
] });
|
|
2750
2870
|
}
|
|
2751
2871
|
|
|
2752
2872
|
// src/components/marketing/StatsBand.tsx
|
|
2753
|
-
import { jsx as
|
|
2873
|
+
import { jsx as jsx80, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
2754
2874
|
function StatsBand({ items, className = "" }) {
|
|
2755
|
-
return /* @__PURE__ */
|
|
2756
|
-
/* @__PURE__ */
|
|
2757
|
-
/* @__PURE__ */
|
|
2758
|
-
item.description ? /* @__PURE__ */
|
|
2875
|
+
return /* @__PURE__ */ jsx80("section", { className: `border-y border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-inverse)] text-[var(--tapiz-text-inverse)] ${className}`, children: /* @__PURE__ */ jsx80("div", { className: "mx-auto grid max-w-7xl divide-y divide-[color-mix(in_srgb,var(--tapiz-text-inverse)_24%,transparent)] px-[var(--tapiz-space-page-x)] md:grid-cols-3 md:divide-x md:divide-y-0", children: items.map((item, index) => /* @__PURE__ */ jsxs59("div", { className: "p-6 md:p-8", children: [
|
|
2876
|
+
/* @__PURE__ */ jsx80("div", { className: "text-3xl font-semibold tracking-tight", children: item.value }),
|
|
2877
|
+
/* @__PURE__ */ jsx80("div", { className: "mt-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] opacity-70", children: item.label }),
|
|
2878
|
+
item.description ? /* @__PURE__ */ jsx80("div", { className: "mt-3 text-sm opacity-70", children: item.description }) : null
|
|
2759
2879
|
] }, index)) }) });
|
|
2760
2880
|
}
|
|
2761
2881
|
|
|
@@ -2794,7 +2914,7 @@ var tapizFrameworkPresets = {
|
|
|
2794
2914
|
};
|
|
2795
2915
|
|
|
2796
2916
|
// src/components/layout/Container.tsx
|
|
2797
|
-
import { jsx as
|
|
2917
|
+
import { jsx as jsx81 } from "react/jsx-runtime";
|
|
2798
2918
|
var sizeClasses2 = {
|
|
2799
2919
|
sm: "max-w-3xl",
|
|
2800
2920
|
md: "max-w-5xl",
|
|
@@ -2803,7 +2923,7 @@ var sizeClasses2 = {
|
|
|
2803
2923
|
full: "max-w-none"
|
|
2804
2924
|
};
|
|
2805
2925
|
function Container({ children, size = "lg", padded = true, className = "", style }) {
|
|
2806
|
-
return /* @__PURE__ */
|
|
2926
|
+
return /* @__PURE__ */ jsx81(
|
|
2807
2927
|
"div",
|
|
2808
2928
|
{
|
|
2809
2929
|
className: ["mx-auto w-full", sizeClasses2[size], padded ? "px-[var(--tapiz-space-page-x)]" : "", className].filter(Boolean).join(" "),
|
|
@@ -2814,7 +2934,7 @@ function Container({ children, size = "lg", padded = true, className = "", style
|
|
|
2814
2934
|
}
|
|
2815
2935
|
|
|
2816
2936
|
// src/components/layout/Surface.tsx
|
|
2817
|
-
import { jsx as
|
|
2937
|
+
import { jsx as jsx82 } from "react/jsx-runtime";
|
|
2818
2938
|
var variantClasses5 = {
|
|
2819
2939
|
canvas: "bg-[var(--tapiz-bg-page)] text-[var(--tapiz-text-primary)]",
|
|
2820
2940
|
surface: "bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-primary)]",
|
|
@@ -2831,7 +2951,7 @@ var paddingClasses2 = {
|
|
|
2831
2951
|
xl: "p-8"
|
|
2832
2952
|
};
|
|
2833
2953
|
function Surface({ children, variant = "surface", padding = "md", bordered = true, className = "", style }) {
|
|
2834
|
-
return /* @__PURE__ */
|
|
2954
|
+
return /* @__PURE__ */ jsx82(
|
|
2835
2955
|
"section",
|
|
2836
2956
|
{
|
|
2837
2957
|
className: [variantClasses5[variant], paddingClasses2[padding], bordered && variant !== "brutal" ? "border border-[var(--tapiz-border-subtle)]" : "", className].filter(Boolean).join(" "),
|
|
@@ -2842,23 +2962,23 @@ function Surface({ children, variant = "surface", padding = "md", bordered = tru
|
|
|
2842
2962
|
}
|
|
2843
2963
|
|
|
2844
2964
|
// src/components/layout/Divider.tsx
|
|
2845
|
-
import { jsx as
|
|
2965
|
+
import { jsx as jsx83, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
2846
2966
|
function Divider({ orientation = "horizontal", label, className = "" }) {
|
|
2847
2967
|
if (orientation === "vertical") {
|
|
2848
|
-
return /* @__PURE__ */
|
|
2968
|
+
return /* @__PURE__ */ jsx83("div", { className: `mx-2 min-h-6 w-px bg-[var(--tapiz-border-subtle)] ${className}`, "aria-hidden": "true" });
|
|
2849
2969
|
}
|
|
2850
2970
|
if (label) {
|
|
2851
|
-
return /* @__PURE__ */
|
|
2852
|
-
/* @__PURE__ */
|
|
2853
|
-
/* @__PURE__ */
|
|
2854
|
-
/* @__PURE__ */
|
|
2971
|
+
return /* @__PURE__ */ jsxs60("div", { className: `flex items-center gap-3 ${className}`, children: [
|
|
2972
|
+
/* @__PURE__ */ jsx83("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" }),
|
|
2973
|
+
/* @__PURE__ */ jsx83("span", { className: "font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: label }),
|
|
2974
|
+
/* @__PURE__ */ jsx83("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" })
|
|
2855
2975
|
] });
|
|
2856
2976
|
}
|
|
2857
|
-
return /* @__PURE__ */
|
|
2977
|
+
return /* @__PURE__ */ jsx83("hr", { className: `border-[var(--tapiz-border-subtle)] ${className}` });
|
|
2858
2978
|
}
|
|
2859
2979
|
|
|
2860
2980
|
// src/components/layout/ResponsiveGrid.tsx
|
|
2861
|
-
import { jsx as
|
|
2981
|
+
import { jsx as jsx84 } from "react/jsx-runtime";
|
|
2862
2982
|
var gapClasses3 = {
|
|
2863
2983
|
sm: "gap-3",
|
|
2864
2984
|
md: "gap-4",
|
|
@@ -2866,7 +2986,7 @@ var gapClasses3 = {
|
|
|
2866
2986
|
xl: "gap-8"
|
|
2867
2987
|
};
|
|
2868
2988
|
function ResponsiveGrid({ children, min = "18rem", gap = "md", className = "", style }) {
|
|
2869
|
-
return /* @__PURE__ */
|
|
2989
|
+
return /* @__PURE__ */ jsx84(
|
|
2870
2990
|
"div",
|
|
2871
2991
|
{
|
|
2872
2992
|
className: `grid ${gapClasses3[gap]} ${className}`,
|
|
@@ -2877,7 +2997,7 @@ function ResponsiveGrid({ children, min = "18rem", gap = "md", className = "", s
|
|
|
2877
2997
|
}
|
|
2878
2998
|
|
|
2879
2999
|
// src/components/data-display/Sparkline.tsx
|
|
2880
|
-
import { jsx as
|
|
3000
|
+
import { jsx as jsx85, jsxs as jsxs61 } from "react/jsx-runtime";
|
|
2881
3001
|
function Sparkline({ values, width = 160, height = 48, label = "Trend", className = "", style }) {
|
|
2882
3002
|
const safeValues = values.length ? values : [0];
|
|
2883
3003
|
const min = Math.min(...safeValues);
|
|
@@ -2889,40 +3009,40 @@ function Sparkline({ values, width = 160, height = 48, label = "Trend", classNam
|
|
|
2889
3009
|
const y = height - (value - min) / range * (height - 6) - 3;
|
|
2890
3010
|
return `${x},${y}`;
|
|
2891
3011
|
}).join(" ");
|
|
2892
|
-
return /* @__PURE__ */
|
|
2893
|
-
/* @__PURE__ */
|
|
2894
|
-
/* @__PURE__ */
|
|
3012
|
+
return /* @__PURE__ */ jsxs61("svg", { className, style, width, height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": label, children: [
|
|
3013
|
+
/* @__PURE__ */ jsx85("polyline", { points, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "miter" }),
|
|
3014
|
+
/* @__PURE__ */ jsx85("line", { x1: "0", x2: width, y1: height - 1, y2: height - 1, stroke: "var(--tapiz-border-subtle)", strokeWidth: "1" })
|
|
2895
3015
|
] });
|
|
2896
3016
|
}
|
|
2897
3017
|
|
|
2898
3018
|
// src/components/data-display/BarList.tsx
|
|
2899
|
-
import { jsx as
|
|
3019
|
+
import { jsx as jsx86, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
2900
3020
|
function BarList({ items, max, valueFormatter = (value) => value, className = "" }) {
|
|
2901
3021
|
const computedMax = max ?? Math.max(1, ...items.map((item) => item.value));
|
|
2902
|
-
return /* @__PURE__ */
|
|
3022
|
+
return /* @__PURE__ */ jsx86("div", { className: `space-y-3 ${className}`, children: items.map((item, index) => {
|
|
2903
3023
|
const percent = Math.max(0, Math.min(100, item.value / computedMax * 100));
|
|
2904
|
-
return /* @__PURE__ */
|
|
2905
|
-
/* @__PURE__ */
|
|
2906
|
-
/* @__PURE__ */
|
|
2907
|
-
/* @__PURE__ */
|
|
3024
|
+
return /* @__PURE__ */ jsxs62("div", { children: [
|
|
3025
|
+
/* @__PURE__ */ jsxs62("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
|
|
3026
|
+
/* @__PURE__ */ jsx86("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: item.label }),
|
|
3027
|
+
/* @__PURE__ */ jsx86("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueFormatter(item.value) })
|
|
2908
3028
|
] }),
|
|
2909
|
-
/* @__PURE__ */
|
|
2910
|
-
item.detail ? /* @__PURE__ */
|
|
3029
|
+
/* @__PURE__ */ jsx86("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx86("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${percent}%` } }) }),
|
|
3030
|
+
item.detail ? /* @__PURE__ */ jsx86("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.detail }) : null
|
|
2911
3031
|
] }, index);
|
|
2912
3032
|
}) });
|
|
2913
3033
|
}
|
|
2914
3034
|
|
|
2915
3035
|
// src/components/data-display/DonutMetric.tsx
|
|
2916
|
-
import { jsx as
|
|
3036
|
+
import { jsx as jsx87, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
2917
3037
|
function DonutMetric({ value, max = 100, label, caption, size = 112, className = "" }) {
|
|
2918
3038
|
const radius = 42;
|
|
2919
3039
|
const circumference = 2 * Math.PI * radius;
|
|
2920
3040
|
const ratio = Math.max(0, Math.min(1, value / max));
|
|
2921
3041
|
const offset = circumference * (1 - ratio);
|
|
2922
|
-
return /* @__PURE__ */
|
|
2923
|
-
/* @__PURE__ */
|
|
2924
|
-
/* @__PURE__ */
|
|
2925
|
-
/* @__PURE__ */
|
|
3042
|
+
return /* @__PURE__ */ jsxs63("div", { className: `inline-flex items-center gap-4 ${className}`, children: [
|
|
3043
|
+
/* @__PURE__ */ jsxs63("svg", { width: size, height: size, viewBox: "0 0 112 112", role: "img", "aria-label": `${Math.round(ratio * 100)}%`, children: [
|
|
3044
|
+
/* @__PURE__ */ jsx87("circle", { cx: "56", cy: "56", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
|
|
3045
|
+
/* @__PURE__ */ jsx87(
|
|
2926
3046
|
"circle",
|
|
2927
3047
|
{
|
|
2928
3048
|
cx: "56",
|
|
@@ -2937,22 +3057,22 @@ function DonutMetric({ value, max = 100, label, caption, size = 112, className =
|
|
|
2937
3057
|
transform: "rotate(-90 56 56)"
|
|
2938
3058
|
}
|
|
2939
3059
|
),
|
|
2940
|
-
/* @__PURE__ */
|
|
3060
|
+
/* @__PURE__ */ jsxs63("text", { x: "56", y: "61", textAnchor: "middle", className: "fill-[var(--tapiz-text-primary)] font-mono text-lg font-bold", children: [
|
|
2941
3061
|
Math.round(ratio * 100),
|
|
2942
3062
|
"%"
|
|
2943
3063
|
] })
|
|
2944
3064
|
] }),
|
|
2945
|
-
label || caption ? /* @__PURE__ */
|
|
2946
|
-
label ? /* @__PURE__ */
|
|
2947
|
-
caption ? /* @__PURE__ */
|
|
3065
|
+
label || caption ? /* @__PURE__ */ jsxs63("div", { children: [
|
|
3066
|
+
label ? /* @__PURE__ */ jsx87("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
|
|
3067
|
+
caption ? /* @__PURE__ */ jsx87("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: caption }) : null
|
|
2948
3068
|
] }) : null
|
|
2949
3069
|
] });
|
|
2950
3070
|
}
|
|
2951
3071
|
|
|
2952
3072
|
// src/components/data-display/FilterChip.tsx
|
|
2953
|
-
import { jsx as
|
|
3073
|
+
import { jsx as jsx88, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
2954
3074
|
function FilterChip({ children, active = false, onRemove, className = "" }) {
|
|
2955
|
-
return /* @__PURE__ */
|
|
3075
|
+
return /* @__PURE__ */ jsxs64(
|
|
2956
3076
|
"span",
|
|
2957
3077
|
{
|
|
2958
3078
|
className: [
|
|
@@ -2962,56 +3082,56 @@ function FilterChip({ children, active = false, onRemove, className = "" }) {
|
|
|
2962
3082
|
].join(" "),
|
|
2963
3083
|
children: [
|
|
2964
3084
|
children,
|
|
2965
|
-
onRemove ? /* @__PURE__ */
|
|
3085
|
+
onRemove ? /* @__PURE__ */ jsx88("button", { type: "button", onClick: onRemove, className: "text-[var(--tapiz-text-muted)] hover:text-[var(--tapiz-danger)]", "aria-label": "Remove filter", children: "\xD7" }) : null
|
|
2966
3086
|
]
|
|
2967
3087
|
}
|
|
2968
3088
|
);
|
|
2969
3089
|
}
|
|
2970
3090
|
|
|
2971
3091
|
// src/components/data-display/DataToolbar.tsx
|
|
2972
|
-
import { jsx as
|
|
3092
|
+
import { jsx as jsx89, jsxs as jsxs65 } from "react/jsx-runtime";
|
|
2973
3093
|
function DataToolbar({ title, description, search, filters, actions, className = "" }) {
|
|
2974
|
-
return /* @__PURE__ */
|
|
2975
|
-
/* @__PURE__ */
|
|
2976
|
-
/* @__PURE__ */
|
|
2977
|
-
title ? /* @__PURE__ */
|
|
2978
|
-
description ? /* @__PURE__ */
|
|
3094
|
+
return /* @__PURE__ */ jsxs65("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 ${className}`, children: [
|
|
3095
|
+
/* @__PURE__ */ jsxs65("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
|
|
3096
|
+
/* @__PURE__ */ jsxs65("div", { children: [
|
|
3097
|
+
title ? /* @__PURE__ */ jsx89("h3", { className: "text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
3098
|
+
description ? /* @__PURE__ */ jsx89("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
2979
3099
|
] }),
|
|
2980
|
-
actions ? /* @__PURE__ */
|
|
3100
|
+
actions ? /* @__PURE__ */ jsx89("div", { className: "flex flex-wrap gap-2", children: actions }) : null
|
|
2981
3101
|
] }),
|
|
2982
|
-
search || filters ? /* @__PURE__ */
|
|
2983
|
-
search ? /* @__PURE__ */
|
|
2984
|
-
filters ? /* @__PURE__ */
|
|
3102
|
+
search || filters ? /* @__PURE__ */ jsxs65("div", { className: "mt-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
|
|
3103
|
+
search ? /* @__PURE__ */ jsx89("div", { className: "min-w-0 flex-1", children: search }) : null,
|
|
3104
|
+
filters ? /* @__PURE__ */ jsx89("div", { className: "flex flex-wrap gap-2", children: filters }) : null
|
|
2985
3105
|
] }) : null
|
|
2986
3106
|
] });
|
|
2987
3107
|
}
|
|
2988
3108
|
|
|
2989
3109
|
// src/components/framework/ResourceCard.tsx
|
|
2990
|
-
import { Fragment as
|
|
3110
|
+
import { Fragment as Fragment5, jsx as jsx90, jsxs as jsxs66 } from "react/jsx-runtime";
|
|
2991
3111
|
function ResourceCard({ title, description, eyebrow, icon, meta, status, actions, href, className = "" }) {
|
|
2992
|
-
const content = /* @__PURE__ */
|
|
2993
|
-
/* @__PURE__ */
|
|
2994
|
-
/* @__PURE__ */
|
|
2995
|
-
icon ? /* @__PURE__ */
|
|
2996
|
-
/* @__PURE__ */
|
|
2997
|
-
eyebrow ? /* @__PURE__ */
|
|
2998
|
-
/* @__PURE__ */
|
|
2999
|
-
description ? /* @__PURE__ */
|
|
3112
|
+
const content = /* @__PURE__ */ jsxs66(Fragment5, { children: [
|
|
3113
|
+
/* @__PURE__ */ jsxs66("div", { className: "flex items-start justify-between gap-4", children: [
|
|
3114
|
+
/* @__PURE__ */ jsxs66("div", { className: "flex min-w-0 items-start gap-3", children: [
|
|
3115
|
+
icon ? /* @__PURE__ */ jsx90("div", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-2 text-[var(--tapiz-accent)]", children: icon }) : null,
|
|
3116
|
+
/* @__PURE__ */ jsxs66("div", { className: "min-w-0", children: [
|
|
3117
|
+
eyebrow ? /* @__PURE__ */ jsx90("div", { className: "kicker mb-2", children: eyebrow }) : null,
|
|
3118
|
+
/* @__PURE__ */ jsx90("h3", { className: "truncate text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
3119
|
+
description ? /* @__PURE__ */ jsx90("p", { className: "mt-2 line-clamp-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
3000
3120
|
] })
|
|
3001
3121
|
] }),
|
|
3002
|
-
status ? /* @__PURE__ */
|
|
3122
|
+
status ? /* @__PURE__ */ jsx90(Badge, { children: status }) : null
|
|
3003
3123
|
] }),
|
|
3004
|
-
meta || actions ? /* @__PURE__ */
|
|
3005
|
-
meta ? /* @__PURE__ */
|
|
3006
|
-
actions ? /* @__PURE__ */
|
|
3124
|
+
meta || actions ? /* @__PURE__ */ jsxs66("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
|
|
3125
|
+
meta ? /* @__PURE__ */ jsx90("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : /* @__PURE__ */ jsx90("span", {}),
|
|
3126
|
+
actions ? /* @__PURE__ */ jsx90("div", { className: "flex flex-wrap gap-2", children: actions }) : null
|
|
3007
3127
|
] }) : null
|
|
3008
3128
|
] });
|
|
3009
3129
|
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}`;
|
|
3010
|
-
return href ? /* @__PURE__ */
|
|
3130
|
+
return href ? /* @__PURE__ */ jsx90("a", { href, className: classes, children: content }) : /* @__PURE__ */ jsx90("article", { className: classes, children: content });
|
|
3011
3131
|
}
|
|
3012
3132
|
|
|
3013
3133
|
// src/components/framework/IntegrationCard.tsx
|
|
3014
|
-
import { jsx as
|
|
3134
|
+
import { jsx as jsx91, jsxs as jsxs67 } from "react/jsx-runtime";
|
|
3015
3135
|
var statusLabel = {
|
|
3016
3136
|
connected: "Connected",
|
|
3017
3137
|
disconnected: "Disconnected",
|
|
@@ -3025,26 +3145,26 @@ var statusVariant = {
|
|
|
3025
3145
|
error: "danger"
|
|
3026
3146
|
};
|
|
3027
3147
|
function IntegrationCard({ name, description, logo, status = "disconnected", lastSync, actions, className = "" }) {
|
|
3028
|
-
return /* @__PURE__ */
|
|
3029
|
-
/* @__PURE__ */
|
|
3030
|
-
/* @__PURE__ */
|
|
3031
|
-
/* @__PURE__ */
|
|
3032
|
-
/* @__PURE__ */
|
|
3033
|
-
/* @__PURE__ */
|
|
3034
|
-
description ? /* @__PURE__ */
|
|
3148
|
+
return /* @__PURE__ */ jsxs67("article", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 ${className}`, children: [
|
|
3149
|
+
/* @__PURE__ */ jsxs67("div", { className: "flex items-start justify-between gap-4", children: [
|
|
3150
|
+
/* @__PURE__ */ jsxs67("div", { className: "flex items-start gap-3", children: [
|
|
3151
|
+
/* @__PURE__ */ jsx91("div", { className: "flex size-11 items-center justify-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] text-[var(--tapiz-accent)]", children: logo ?? /* @__PURE__ */ jsx91("span", { className: "font-mono text-xs", children: "API" }) }),
|
|
3152
|
+
/* @__PURE__ */ jsxs67("div", { children: [
|
|
3153
|
+
/* @__PURE__ */ jsx91("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: name }),
|
|
3154
|
+
description ? /* @__PURE__ */ jsx91("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
3035
3155
|
] })
|
|
3036
3156
|
] }),
|
|
3037
|
-
/* @__PURE__ */
|
|
3157
|
+
/* @__PURE__ */ jsx91(StatusBadge, { variant: statusVariant[status], label: statusLabel[status] })
|
|
3038
3158
|
] }),
|
|
3039
|
-
/* @__PURE__ */
|
|
3040
|
-
/* @__PURE__ */
|
|
3041
|
-
actions ? /* @__PURE__ */
|
|
3159
|
+
/* @__PURE__ */ jsxs67("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
|
|
3160
|
+
/* @__PURE__ */ jsx91("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: lastSync ?? "No sync yet" }),
|
|
3161
|
+
actions ? /* @__PURE__ */ jsx91("div", { className: "flex gap-2", children: actions }) : null
|
|
3042
3162
|
] })
|
|
3043
3163
|
] });
|
|
3044
3164
|
}
|
|
3045
3165
|
|
|
3046
3166
|
// src/components/framework/HealthIndicator.tsx
|
|
3047
|
-
import { jsx as
|
|
3167
|
+
import { jsx as jsx92, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
3048
3168
|
var toneClasses2 = {
|
|
3049
3169
|
operational: "bg-[var(--tapiz-success)]",
|
|
3050
3170
|
degraded: "bg-[var(--tapiz-warning)]",
|
|
@@ -3058,34 +3178,34 @@ var defaultLabel = {
|
|
|
3058
3178
|
unknown: "Unknown"
|
|
3059
3179
|
};
|
|
3060
3180
|
function HealthIndicator({ tone: tone2 = "unknown", label, detail, className = "" }) {
|
|
3061
|
-
return /* @__PURE__ */
|
|
3062
|
-
/* @__PURE__ */
|
|
3063
|
-
/* @__PURE__ */
|
|
3064
|
-
detail ? /* @__PURE__ */
|
|
3181
|
+
return /* @__PURE__ */ jsxs68("div", { className: `inline-flex items-center gap-3 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] px-3 py-2 ${className}`, children: [
|
|
3182
|
+
/* @__PURE__ */ jsx92("span", { className: `size-2.5 ${toneClasses2[tone2]}`, "aria-hidden": "true" }),
|
|
3183
|
+
/* @__PURE__ */ jsx92("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label ?? defaultLabel[tone2] }),
|
|
3184
|
+
detail ? /* @__PURE__ */ jsx92("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: detail }) : null
|
|
3065
3185
|
] });
|
|
3066
3186
|
}
|
|
3067
3187
|
|
|
3068
3188
|
// src/components/framework/AuditLog.tsx
|
|
3069
|
-
import { jsx as
|
|
3189
|
+
import { jsx as jsx93, jsxs as jsxs69 } from "react/jsx-runtime";
|
|
3070
3190
|
function AuditLog({ items, className = "" }) {
|
|
3071
|
-
return /* @__PURE__ */
|
|
3072
|
-
/* @__PURE__ */
|
|
3073
|
-
/* @__PURE__ */
|
|
3074
|
-
/* @__PURE__ */
|
|
3075
|
-
/* @__PURE__ */
|
|
3076
|
-
/* @__PURE__ */
|
|
3191
|
+
return /* @__PURE__ */ jsx93("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs69("div", { className: "flex gap-3 p-4", children: [
|
|
3192
|
+
/* @__PURE__ */ jsx93(Avatar, { name: item.initials ?? item.actor, size: "sm" }),
|
|
3193
|
+
/* @__PURE__ */ jsxs69("div", { className: "min-w-0 flex-1", children: [
|
|
3194
|
+
/* @__PURE__ */ jsxs69("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
|
|
3195
|
+
/* @__PURE__ */ jsxs69("p", { className: "text-sm text-[var(--tapiz-text-secondary)]", children: [
|
|
3196
|
+
/* @__PURE__ */ jsx93("strong", { className: "text-[var(--tapiz-text-primary)]", children: item.actor }),
|
|
3077
3197
|
" ",
|
|
3078
3198
|
item.action
|
|
3079
3199
|
] }),
|
|
3080
|
-
/* @__PURE__ */
|
|
3200
|
+
/* @__PURE__ */ jsx93("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.timestamp })
|
|
3081
3201
|
] }),
|
|
3082
|
-
item.detail ? /* @__PURE__ */
|
|
3202
|
+
item.detail ? /* @__PURE__ */ jsx93("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.detail }) : null
|
|
3083
3203
|
] })
|
|
3084
3204
|
] }, index)) });
|
|
3085
3205
|
}
|
|
3086
3206
|
|
|
3087
3207
|
// src/components/framework/KanbanBoard.tsx
|
|
3088
|
-
import { jsx as
|
|
3208
|
+
import { jsx as jsx94, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
3089
3209
|
var toneClasses3 = {
|
|
3090
3210
|
default: "border-[var(--tapiz-border-subtle)]",
|
|
3091
3211
|
accent: "border-[var(--tapiz-accent)]",
|
|
@@ -3094,65 +3214,65 @@ var toneClasses3 = {
|
|
|
3094
3214
|
danger: "border-[var(--tapiz-danger)]"
|
|
3095
3215
|
};
|
|
3096
3216
|
function KanbanBoard({ columns, className = "" }) {
|
|
3097
|
-
return /* @__PURE__ */
|
|
3098
|
-
/* @__PURE__ */
|
|
3099
|
-
/* @__PURE__ */
|
|
3100
|
-
/* @__PURE__ */
|
|
3101
|
-
column.description ? /* @__PURE__ */
|
|
3217
|
+
return /* @__PURE__ */ jsx94("div", { className: `grid gap-4 overflow-x-auto md:grid-flow-col md:auto-cols-[minmax(18rem,1fr)] ${className}`, children: columns.map((column) => /* @__PURE__ */ jsxs70("section", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-3", children: [
|
|
3218
|
+
/* @__PURE__ */ jsxs70("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
|
|
3219
|
+
/* @__PURE__ */ jsxs70("div", { children: [
|
|
3220
|
+
/* @__PURE__ */ jsx94("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: column.title }),
|
|
3221
|
+
column.description ? /* @__PURE__ */ jsx94("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: column.description }) : null
|
|
3102
3222
|
] }),
|
|
3103
|
-
/* @__PURE__ */
|
|
3223
|
+
/* @__PURE__ */ jsx94("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: column.items.length })
|
|
3104
3224
|
] }),
|
|
3105
|
-
/* @__PURE__ */
|
|
3106
|
-
/* @__PURE__ */
|
|
3107
|
-
item.description ? /* @__PURE__ */
|
|
3108
|
-
item.meta ? /* @__PURE__ */
|
|
3225
|
+
/* @__PURE__ */ jsx94("div", { className: "space-y-3", children: column.items.map((item) => /* @__PURE__ */ jsxs70("article", { className: `border-l-2 bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)] ${toneClasses3[item.tone ?? "default"]}`, children: [
|
|
3226
|
+
/* @__PURE__ */ jsx94("h4", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3227
|
+
item.description ? /* @__PURE__ */ jsx94("p", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
|
|
3228
|
+
item.meta ? /* @__PURE__ */ jsx94("div", { className: "mt-3 font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
|
|
3109
3229
|
] }, item.id)) })
|
|
3110
3230
|
] }, column.id)) });
|
|
3111
3231
|
}
|
|
3112
3232
|
|
|
3113
3233
|
// src/components/framework/AccessMatrix.tsx
|
|
3114
|
-
import { jsx as
|
|
3234
|
+
import { jsx as jsx95, jsxs as jsxs71 } from "react/jsx-runtime";
|
|
3115
3235
|
function AccessMatrix({ roles, permissions, className = "" }) {
|
|
3116
|
-
return /* @__PURE__ */
|
|
3117
|
-
/* @__PURE__ */
|
|
3118
|
-
/* @__PURE__ */
|
|
3119
|
-
roles.map((role) => /* @__PURE__ */
|
|
3236
|
+
return /* @__PURE__ */ jsx95("div", { className: `overflow-x-auto border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: /* @__PURE__ */ jsxs71("table", { className: "min-w-full text-sm", children: [
|
|
3237
|
+
/* @__PURE__ */ jsx95("thead", { children: /* @__PURE__ */ jsxs71("tr", { children: [
|
|
3238
|
+
/* @__PURE__ */ jsx95("th", { className: "px-4 py-3 text-left", children: "Permission" }),
|
|
3239
|
+
roles.map((role) => /* @__PURE__ */ jsx95("th", { className: "px-4 py-3 text-center", children: role.label }, role.key))
|
|
3120
3240
|
] }) }),
|
|
3121
|
-
/* @__PURE__ */
|
|
3122
|
-
/* @__PURE__ */
|
|
3123
|
-
/* @__PURE__ */
|
|
3124
|
-
permission.description ? /* @__PURE__ */
|
|
3241
|
+
/* @__PURE__ */ jsx95("tbody", { children: permissions.map((permission) => /* @__PURE__ */ jsxs71("tr", { children: [
|
|
3242
|
+
/* @__PURE__ */ jsxs71("td", { className: "px-4 py-3", children: [
|
|
3243
|
+
/* @__PURE__ */ jsx95("div", { className: "font-medium text-[var(--tapiz-text-primary)]", children: permission.label }),
|
|
3244
|
+
permission.description ? /* @__PURE__ */ jsx95("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: permission.description }) : null
|
|
3125
3245
|
] }),
|
|
3126
|
-
roles.map((role) => /* @__PURE__ */
|
|
3246
|
+
roles.map((role) => /* @__PURE__ */ jsx95("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx95("span", { className: permission.roles[role.key] ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-text-disabled)]", children: permission.roles[role.key] ? "\u2713" : "\u2014" }) }, role.key))
|
|
3127
3247
|
] }, permission.key)) })
|
|
3128
3248
|
] }) });
|
|
3129
3249
|
}
|
|
3130
3250
|
|
|
3131
3251
|
// src/components/framework/CalendarGrid.tsx
|
|
3132
|
-
import { jsx as
|
|
3252
|
+
import { jsx as jsx96, jsxs as jsxs72 } from "react/jsx-runtime";
|
|
3133
3253
|
var defaultWeekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
3134
3254
|
function CalendarGrid({ days, weekdays = defaultWeekdays, className = "" }) {
|
|
3135
|
-
return /* @__PURE__ */
|
|
3136
|
-
/* @__PURE__ */
|
|
3137
|
-
/* @__PURE__ */
|
|
3138
|
-
/* @__PURE__ */
|
|
3139
|
-
/* @__PURE__ */
|
|
3140
|
-
day.label ? /* @__PURE__ */
|
|
3255
|
+
return /* @__PURE__ */ jsxs72("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
|
|
3256
|
+
/* @__PURE__ */ jsx96("div", { className: "grid grid-cols-7 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: weekdays.map((day, index) => /* @__PURE__ */ jsx96("div", { className: "px-3 py-2 font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: day }, index)) }),
|
|
3257
|
+
/* @__PURE__ */ jsx96("div", { className: "grid grid-cols-7", children: days.map((day, index) => /* @__PURE__ */ jsxs72("div", { className: `min-h-28 border-b border-r border-[var(--tapiz-border-subtle)] p-2 ${day.muted ? "opacity-45" : ""} ${day.selected ? "bg-[var(--tapiz-accent-soft)]" : ""}`, children: [
|
|
3258
|
+
/* @__PURE__ */ jsxs72("div", { className: "flex items-center justify-between gap-2", children: [
|
|
3259
|
+
/* @__PURE__ */ jsx96("span", { className: "font-mono text-xs text-[var(--tapiz-text-primary)]", children: day.date }),
|
|
3260
|
+
day.label ? /* @__PURE__ */ jsx96("span", { className: "text-[10px] text-[var(--tapiz-text-muted)]", children: day.label }) : null
|
|
3141
3261
|
] }),
|
|
3142
|
-
day.events?.length ? /* @__PURE__ */
|
|
3262
|
+
day.events?.length ? /* @__PURE__ */ jsx96("div", { className: "mt-2 space-y-1", children: day.events.map((event, eventIndex) => /* @__PURE__ */ jsx96("div", { className: "truncate border-l-2 border-[var(--tapiz-accent)] bg-[var(--tapiz-bg-surface-muted)] px-2 py-1 text-[11px] text-[var(--tapiz-text-secondary)]", children: event }, eventIndex)) }) : null
|
|
3143
3263
|
] }, index)) })
|
|
3144
3264
|
] });
|
|
3145
3265
|
}
|
|
3146
3266
|
|
|
3147
3267
|
// src/components/forms/Slider.tsx
|
|
3148
|
-
import { jsx as
|
|
3268
|
+
import { jsx as jsx97, jsxs as jsxs73 } from "react/jsx-runtime";
|
|
3149
3269
|
function Slider({ label, valueLabel, className = "", ...props }) {
|
|
3150
|
-
return /* @__PURE__ */
|
|
3151
|
-
label || valueLabel ? /* @__PURE__ */
|
|
3152
|
-
label ? /* @__PURE__ */
|
|
3153
|
-
valueLabel ? /* @__PURE__ */
|
|
3270
|
+
return /* @__PURE__ */ jsxs73("label", { className: `block ${className}`, children: [
|
|
3271
|
+
label || valueLabel ? /* @__PURE__ */ jsxs73("span", { className: "mb-2 flex items-center justify-between gap-3 text-sm", children: [
|
|
3272
|
+
label ? /* @__PURE__ */ jsx97("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: label }) : /* @__PURE__ */ jsx97("span", {}),
|
|
3273
|
+
valueLabel ? /* @__PURE__ */ jsx97("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueLabel }) : null
|
|
3154
3274
|
] }) : null,
|
|
3155
|
-
/* @__PURE__ */
|
|
3275
|
+
/* @__PURE__ */ jsx97(
|
|
3156
3276
|
"input",
|
|
3157
3277
|
{
|
|
3158
3278
|
...props,
|
|
@@ -3164,31 +3284,31 @@ function Slider({ label, valueLabel, className = "", ...props }) {
|
|
|
3164
3284
|
}
|
|
3165
3285
|
|
|
3166
3286
|
// src/components/forms/FileDropzone.tsx
|
|
3167
|
-
import { jsx as
|
|
3287
|
+
import { jsx as jsx98, jsxs as jsxs74 } from "react/jsx-runtime";
|
|
3168
3288
|
function FileDropzone({ title = "Drop files here", description, actionLabel = "Browse", className = "", ...props }) {
|
|
3169
|
-
return /* @__PURE__ */
|
|
3170
|
-
/* @__PURE__ */
|
|
3171
|
-
/* @__PURE__ */
|
|
3172
|
-
description ? /* @__PURE__ */
|
|
3173
|
-
/* @__PURE__ */
|
|
3289
|
+
return /* @__PURE__ */ jsxs74("label", { className: `block cursor-pointer border-2 border-dashed border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-6 text-center hover:bg-[var(--tapiz-bg-surface-muted)] ${className}`, children: [
|
|
3290
|
+
/* @__PURE__ */ jsx98("input", { ...props, type: "file", className: "sr-only" }),
|
|
3291
|
+
/* @__PURE__ */ jsx98("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
3292
|
+
description ? /* @__PURE__ */ jsx98("span", { className: "mt-2 block text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
|
|
3293
|
+
/* @__PURE__ */ jsx98("span", { className: "mt-4 inline-flex border border-[var(--tapiz-border-strong)] px-3 py-1.5 font-mono text-xs uppercase tracking-[0.12em] text-[var(--tapiz-accent)]", children: actionLabel })
|
|
3174
3294
|
] });
|
|
3175
3295
|
}
|
|
3176
3296
|
|
|
3177
3297
|
// src/components/forms/PasswordInput.tsx
|
|
3178
|
-
import { useState as
|
|
3179
|
-
import { jsx as
|
|
3298
|
+
import { useState as useState8 } from "react";
|
|
3299
|
+
import { jsx as jsx99, jsxs as jsxs75 } from "react/jsx-runtime";
|
|
3180
3300
|
function PasswordInput({
|
|
3181
3301
|
revealLabel = "Show password",
|
|
3182
3302
|
className = "",
|
|
3183
3303
|
...props
|
|
3184
3304
|
}) {
|
|
3185
|
-
const [visible, setVisible] =
|
|
3186
|
-
return /* @__PURE__ */
|
|
3305
|
+
const [visible, setVisible] = useState8(false);
|
|
3306
|
+
return /* @__PURE__ */ jsxs75(
|
|
3187
3307
|
"div",
|
|
3188
3308
|
{
|
|
3189
3309
|
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}`,
|
|
3190
3310
|
children: [
|
|
3191
|
-
/* @__PURE__ */
|
|
3311
|
+
/* @__PURE__ */ jsx99(
|
|
3192
3312
|
"input",
|
|
3193
3313
|
{
|
|
3194
3314
|
...props,
|
|
@@ -3196,7 +3316,7 @@ function PasswordInput({
|
|
|
3196
3316
|
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!"
|
|
3197
3317
|
}
|
|
3198
3318
|
),
|
|
3199
|
-
/* @__PURE__ */
|
|
3319
|
+
/* @__PURE__ */ jsx99(
|
|
3200
3320
|
"button",
|
|
3201
3321
|
{
|
|
3202
3322
|
type: "button",
|
|
@@ -3205,7 +3325,7 @@ function PasswordInput({
|
|
|
3205
3325
|
onClick: () => setVisible((v) => !v),
|
|
3206
3326
|
tabIndex: -1,
|
|
3207
3327
|
className: "grid place-items-center px-3 text-(--tapiz-text-muted) transition-colors hover:text-(--tapiz-text-primary)",
|
|
3208
|
-
children: visible ? /* @__PURE__ */
|
|
3328
|
+
children: visible ? /* @__PURE__ */ jsx99(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx99(Eye, { size: 15 })
|
|
3209
3329
|
}
|
|
3210
3330
|
)
|
|
3211
3331
|
]
|
|
@@ -3214,12 +3334,12 @@ function PasswordInput({
|
|
|
3214
3334
|
}
|
|
3215
3335
|
|
|
3216
3336
|
// src/components/forms/TextareaCounter.tsx
|
|
3217
|
-
import { jsx as
|
|
3337
|
+
import { jsx as jsx100, jsxs as jsxs76 } from "react/jsx-runtime";
|
|
3218
3338
|
function TextareaCounter({ maxLength, value = "", className = "", ...props }) {
|
|
3219
3339
|
const count = value.length;
|
|
3220
|
-
return /* @__PURE__ */
|
|
3221
|
-
/* @__PURE__ */
|
|
3222
|
-
/* @__PURE__ */
|
|
3340
|
+
return /* @__PURE__ */ jsxs76("div", { className, children: [
|
|
3341
|
+
/* @__PURE__ */ jsx100("textarea", { ...props, value, maxLength, className: "input-field min-h-28" }),
|
|
3342
|
+
/* @__PURE__ */ jsxs76("div", { className: "mt-1 text-right font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: [
|
|
3223
3343
|
count,
|
|
3224
3344
|
"/",
|
|
3225
3345
|
maxLength
|
|
@@ -3228,7 +3348,7 @@ function TextareaCounter({ maxLength, value = "", className = "", ...props }) {
|
|
|
3228
3348
|
}
|
|
3229
3349
|
|
|
3230
3350
|
// src/components/feedback/Callout.tsx
|
|
3231
|
-
import { jsx as
|
|
3351
|
+
import { jsx as jsx101, jsxs as jsxs77 } from "react/jsx-runtime";
|
|
3232
3352
|
var toneClasses4 = {
|
|
3233
3353
|
info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)]",
|
|
3234
3354
|
success: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)]",
|
|
@@ -3237,73 +3357,73 @@ var toneClasses4 = {
|
|
|
3237
3357
|
neutral: "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]"
|
|
3238
3358
|
};
|
|
3239
3359
|
function Callout({ title, children, tone: tone2 = "info", icon, actions, className = "" }) {
|
|
3240
|
-
return /* @__PURE__ */
|
|
3241
|
-
icon ? /* @__PURE__ */
|
|
3242
|
-
/* @__PURE__ */
|
|
3243
|
-
title ? /* @__PURE__ */
|
|
3244
|
-
children ? /* @__PURE__ */
|
|
3245
|
-
actions ? /* @__PURE__ */
|
|
3360
|
+
return /* @__PURE__ */ jsx101("aside", { className: `border-l-4 p-4 ${toneClasses4[tone2]} ${className}`, children: /* @__PURE__ */ jsxs77("div", { className: "flex gap-3", children: [
|
|
3361
|
+
icon ? /* @__PURE__ */ jsx101("div", { className: "text-[var(--tapiz-text-primary)]", children: icon }) : null,
|
|
3362
|
+
/* @__PURE__ */ jsxs77("div", { className: "min-w-0 flex-1", children: [
|
|
3363
|
+
title ? /* @__PURE__ */ jsx101("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
|
|
3364
|
+
children ? /* @__PURE__ */ jsx101("div", { className: "mt-1 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children }) : null,
|
|
3365
|
+
actions ? /* @__PURE__ */ jsx101("div", { className: "mt-3 flex flex-wrap gap-2", children: actions }) : null
|
|
3246
3366
|
] })
|
|
3247
3367
|
] }) });
|
|
3248
3368
|
}
|
|
3249
3369
|
|
|
3250
3370
|
// src/components/feedback/LoadingOverlay.tsx
|
|
3251
|
-
import { jsx as
|
|
3371
|
+
import { jsx as jsx102, jsxs as jsxs78 } from "react/jsx-runtime";
|
|
3252
3372
|
function LoadingOverlay({ visible = false, label = "Loading", children, className = "" }) {
|
|
3253
|
-
return /* @__PURE__ */
|
|
3373
|
+
return /* @__PURE__ */ jsxs78("div", { className: `relative ${className}`, children: [
|
|
3254
3374
|
children,
|
|
3255
|
-
visible ? /* @__PURE__ */
|
|
3256
|
-
/* @__PURE__ */
|
|
3257
|
-
/* @__PURE__ */
|
|
3375
|
+
visible ? /* @__PURE__ */ jsx102("div", { className: "absolute inset-0 grid place-items-center border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-overlay)] backdrop-blur-sm", children: /* @__PURE__ */ jsxs78("div", { className: "flex items-center gap-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] px-4 py-3 text-sm text-[var(--tapiz-text-primary)] shadow-[var(--tapiz-shadow-brutal)]", children: [
|
|
3376
|
+
/* @__PURE__ */ jsx102(Spinner, {}),
|
|
3377
|
+
/* @__PURE__ */ jsx102("span", { children: label })
|
|
3258
3378
|
] }) }) : null
|
|
3259
3379
|
] });
|
|
3260
3380
|
}
|
|
3261
3381
|
|
|
3262
3382
|
// src/components/feedback/NotificationList.tsx
|
|
3263
|
-
import { jsx as
|
|
3383
|
+
import { jsx as jsx103, jsxs as jsxs79 } from "react/jsx-runtime";
|
|
3264
3384
|
function NotificationList({ items, className = "" }) {
|
|
3265
|
-
return /* @__PURE__ */
|
|
3266
|
-
/* @__PURE__ */
|
|
3267
|
-
/* @__PURE__ */
|
|
3268
|
-
/* @__PURE__ */
|
|
3269
|
-
/* @__PURE__ */
|
|
3270
|
-
item.time ? /* @__PURE__ */
|
|
3385
|
+
return /* @__PURE__ */ jsx103("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item) => /* @__PURE__ */ jsxs79("article", { className: "flex gap-3 p-4", children: [
|
|
3386
|
+
/* @__PURE__ */ jsx103("span", { className: `mt-1 size-2.5 ${item.unread ? "bg-[var(--tapiz-accent)]" : "bg-[var(--tapiz-border-subtle)]"}`, "aria-hidden": "true" }),
|
|
3387
|
+
/* @__PURE__ */ jsxs79("div", { className: "min-w-0 flex-1", children: [
|
|
3388
|
+
/* @__PURE__ */ jsxs79("div", { className: "flex items-start justify-between gap-3", children: [
|
|
3389
|
+
/* @__PURE__ */ jsx103("h3", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3390
|
+
item.time ? /* @__PURE__ */ jsx103("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
3271
3391
|
] }),
|
|
3272
|
-
item.description ? /* @__PURE__ */
|
|
3273
|
-
item.action ? /* @__PURE__ */
|
|
3392
|
+
item.description ? /* @__PURE__ */ jsx103("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
|
|
3393
|
+
item.action ? /* @__PURE__ */ jsx103("div", { className: "mt-3", children: item.action }) : null
|
|
3274
3394
|
] })
|
|
3275
3395
|
] }, item.id)) });
|
|
3276
3396
|
}
|
|
3277
3397
|
|
|
3278
3398
|
// src/components/layout/MasonryGrid.tsx
|
|
3279
|
-
import { jsx as
|
|
3399
|
+
import { jsx as jsx104 } from "react/jsx-runtime";
|
|
3280
3400
|
var columnClasses = { 2: "md:columns-2", 3: "md:columns-2 xl:columns-3", 4: "md:columns-2 lg:columns-3 xl:columns-4" };
|
|
3281
3401
|
var gapClasses4 = { sm: "gap-3", md: "gap-5", lg: "gap-8" };
|
|
3282
3402
|
function MasonryGrid({ children, columns = 3, gap = "md", className = "", style }) {
|
|
3283
|
-
return /* @__PURE__ */
|
|
3403
|
+
return /* @__PURE__ */ jsx104("div", { className: [columnClasses[columns], gapClasses4[gap], className].filter(Boolean).join(" "), style, children });
|
|
3284
3404
|
}
|
|
3285
3405
|
|
|
3286
3406
|
// src/components/layout/PageRail.tsx
|
|
3287
|
-
import { Fragment as
|
|
3407
|
+
import { Fragment as Fragment6, jsx as jsx105, jsxs as jsxs80 } from "react/jsx-runtime";
|
|
3288
3408
|
function PageRail({ title, items, actions, className = "", style }) {
|
|
3289
|
-
return /* @__PURE__ */
|
|
3290
|
-
title ? /* @__PURE__ */
|
|
3291
|
-
/* @__PURE__ */
|
|
3292
|
-
const content = /* @__PURE__ */
|
|
3293
|
-
/* @__PURE__ */
|
|
3294
|
-
item.meta ? /* @__PURE__ */
|
|
3409
|
+
return /* @__PURE__ */ jsxs80("aside", { className: ["sticky top-20 rounded-none border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)]", className].filter(Boolean).join(" "), style, children: [
|
|
3410
|
+
title ? /* @__PURE__ */ jsx105("div", { className: "kicker mb-3 px-2", children: title }) : null,
|
|
3411
|
+
/* @__PURE__ */ jsx105("nav", { className: "flex flex-col gap-1", children: items.map((item, index) => {
|
|
3412
|
+
const content = /* @__PURE__ */ jsxs80(Fragment6, { children: [
|
|
3413
|
+
/* @__PURE__ */ jsx105("span", { className: "truncate", children: item.label }),
|
|
3414
|
+
item.meta ? /* @__PURE__ */ jsx105("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
|
|
3295
3415
|
] });
|
|
3296
3416
|
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(" ");
|
|
3297
|
-
return item.href ? /* @__PURE__ */
|
|
3417
|
+
return item.href ? /* @__PURE__ */ jsx105("a", { href: item.href, className: classes, children: content }, index) : /* @__PURE__ */ jsx105("div", { className: classes, children: content }, index);
|
|
3298
3418
|
}) }),
|
|
3299
|
-
actions ? /* @__PURE__ */
|
|
3419
|
+
actions ? /* @__PURE__ */ jsx105("div", { className: "mt-3 border-t border-[var(--tapiz-border-subtle)] pt-3", children: actions }) : null
|
|
3300
3420
|
] });
|
|
3301
3421
|
}
|
|
3302
3422
|
|
|
3303
3423
|
// src/components/layout/StickyBar.tsx
|
|
3304
|
-
import { jsx as
|
|
3424
|
+
import { jsx as jsx106 } from "react/jsx-runtime";
|
|
3305
3425
|
function StickyBar({ children, position = "top", className = "", style }) {
|
|
3306
|
-
return /* @__PURE__ */
|
|
3426
|
+
return /* @__PURE__ */ jsx106(
|
|
3307
3427
|
"div",
|
|
3308
3428
|
{
|
|
3309
3429
|
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(" "),
|
|
@@ -3314,191 +3434,191 @@ function StickyBar({ children, position = "top", className = "", style }) {
|
|
|
3314
3434
|
}
|
|
3315
3435
|
|
|
3316
3436
|
// src/components/forms/Combobox.tsx
|
|
3317
|
-
import { jsx as
|
|
3437
|
+
import { jsx as jsx107, jsxs as jsxs81 } from "react/jsx-runtime";
|
|
3318
3438
|
function Combobox({ options, placeholder = "Select option", invalid = false, className = "", ...props }) {
|
|
3319
|
-
return /* @__PURE__ */
|
|
3320
|
-
/* @__PURE__ */
|
|
3321
|
-
options.map((option) => /* @__PURE__ */
|
|
3439
|
+
return /* @__PURE__ */ jsxs81("select", { ...props, className: ["input-field appearance-none bg-[var(--tapiz-bg-surface)]", invalid ? "border-warn focus:border-warn" : "", className].filter(Boolean).join(" "), children: [
|
|
3440
|
+
/* @__PURE__ */ jsx107("option", { value: "", children: placeholder }),
|
|
3441
|
+
options.map((option) => /* @__PURE__ */ jsx107("option", { value: option.value, children: String(option.label) }, option.value))
|
|
3322
3442
|
] });
|
|
3323
3443
|
}
|
|
3324
3444
|
|
|
3325
3445
|
// src/components/forms/DateRangePicker.tsx
|
|
3326
|
-
import { jsx as
|
|
3446
|
+
import { jsx as jsx108, jsxs as jsxs82 } from "react/jsx-runtime";
|
|
3327
3447
|
function DateRangePicker({ startLabel = "From", endLabel = "To", startProps, endProps, className = "" }) {
|
|
3328
|
-
return /* @__PURE__ */
|
|
3329
|
-
/* @__PURE__ */
|
|
3330
|
-
/* @__PURE__ */
|
|
3331
|
-
/* @__PURE__ */
|
|
3448
|
+
return /* @__PURE__ */ jsxs82("div", { className: ["grid gap-3 md:grid-cols-2", className].filter(Boolean).join(" "), children: [
|
|
3449
|
+
/* @__PURE__ */ jsxs82("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
|
|
3450
|
+
/* @__PURE__ */ jsx108("span", { children: startLabel }),
|
|
3451
|
+
/* @__PURE__ */ jsx108("input", { type: "date", ...startProps, className: ["input-field", startProps?.className || ""].join(" ") })
|
|
3332
3452
|
] }),
|
|
3333
|
-
/* @__PURE__ */
|
|
3334
|
-
/* @__PURE__ */
|
|
3335
|
-
/* @__PURE__ */
|
|
3453
|
+
/* @__PURE__ */ jsxs82("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
|
|
3454
|
+
/* @__PURE__ */ jsx108("span", { children: endLabel }),
|
|
3455
|
+
/* @__PURE__ */ jsx108("input", { type: "date", ...endProps, className: ["input-field", endProps?.className || ""].join(" ") })
|
|
3336
3456
|
] })
|
|
3337
3457
|
] });
|
|
3338
3458
|
}
|
|
3339
3459
|
|
|
3340
3460
|
// src/components/forms/ColorSwatchPicker.tsx
|
|
3341
|
-
import { jsx as
|
|
3461
|
+
import { jsx as jsx109, jsxs as jsxs83 } from "react/jsx-runtime";
|
|
3342
3462
|
function ColorSwatchPicker({ options, value, onChange, className = "" }) {
|
|
3343
|
-
return /* @__PURE__ */
|
|
3463
|
+
return /* @__PURE__ */ jsx109("div", { className: ["flex flex-wrap gap-2", className].filter(Boolean).join(" "), children: options.map((option) => {
|
|
3344
3464
|
const selected = option.value === value;
|
|
3345
|
-
return /* @__PURE__ */
|
|
3346
|
-
/* @__PURE__ */
|
|
3347
|
-
/* @__PURE__ */
|
|
3465
|
+
return /* @__PURE__ */ jsxs83("button", { type: "button", "aria-pressed": selected, onClick: () => onChange?.(option.value), className: ["flex items-center gap-2 border px-3 py-2 text-sm transition", selected ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)]" : "border-[var(--tapiz-border-subtle)] hover:border-[var(--tapiz-border-strong)]"].join(" "), children: [
|
|
3466
|
+
/* @__PURE__ */ jsx109("span", { className: "h-4 w-4 border border-[var(--tapiz-border-strong)]", style: { background: option.color } }),
|
|
3467
|
+
/* @__PURE__ */ jsx109("span", { children: option.label })
|
|
3348
3468
|
] }, option.value);
|
|
3349
3469
|
}) });
|
|
3350
3470
|
}
|
|
3351
3471
|
|
|
3352
3472
|
// src/components/forms/RatingInput.tsx
|
|
3353
|
-
import { jsx as
|
|
3473
|
+
import { jsx as jsx110 } from "react/jsx-runtime";
|
|
3354
3474
|
function RatingInput({ value = 0, max = 5, icon = "\u2605", onChange, label = "Rating", className = "" }) {
|
|
3355
|
-
return /* @__PURE__ */
|
|
3475
|
+
return /* @__PURE__ */ jsx110("div", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), role: "radiogroup", "aria-label": label, children: Array.from({ length: max }, (_, index) => {
|
|
3356
3476
|
const score = index + 1;
|
|
3357
3477
|
const active = score <= value;
|
|
3358
|
-
return /* @__PURE__ */
|
|
3478
|
+
return /* @__PURE__ */ jsx110("button", { type: "button", role: "radio", "aria-checked": active, onClick: () => onChange?.(score), className: ["grid h-9 w-9 place-items-center border text-base transition", active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-accent)]" : "border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)] hover:border-[var(--tapiz-border-strong)]"].join(" "), children: icon }, score);
|
|
3359
3479
|
}) });
|
|
3360
3480
|
}
|
|
3361
3481
|
|
|
3362
3482
|
// src/components/data-display/ScoreRing.tsx
|
|
3363
|
-
import { jsx as
|
|
3483
|
+
import { jsx as jsx111, jsxs as jsxs84 } from "react/jsx-runtime";
|
|
3364
3484
|
function ScoreRing({ value, max = 100, label, size = 112, className = "" }) {
|
|
3365
3485
|
const normalized = Math.max(0, Math.min(1, value / max));
|
|
3366
3486
|
const radius = 42;
|
|
3367
3487
|
const circumference = 2 * Math.PI * radius;
|
|
3368
3488
|
const dash = circumference * normalized;
|
|
3369
|
-
return /* @__PURE__ */
|
|
3370
|
-
/* @__PURE__ */
|
|
3371
|
-
/* @__PURE__ */
|
|
3372
|
-
/* @__PURE__ */
|
|
3489
|
+
return /* @__PURE__ */ jsxs84("div", { className: ["inline-grid place-items-center", className].filter(Boolean).join(" "), style: { width: size, height: size }, children: [
|
|
3490
|
+
/* @__PURE__ */ jsxs84("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
|
|
3491
|
+
/* @__PURE__ */ jsx111("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
|
|
3492
|
+
/* @__PURE__ */ jsx111("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "10", strokeLinecap: "square", strokeDasharray: `${dash} ${circumference - dash}` })
|
|
3373
3493
|
] }),
|
|
3374
|
-
/* @__PURE__ */
|
|
3375
|
-
/* @__PURE__ */
|
|
3494
|
+
/* @__PURE__ */ jsxs84("div", { className: "absolute text-center", children: [
|
|
3495
|
+
/* @__PURE__ */ jsxs84("div", { className: "font-display text-2xl font-semibold text-[var(--tapiz-text-primary)]", children: [
|
|
3376
3496
|
Math.round(normalized * 100),
|
|
3377
3497
|
"%"
|
|
3378
3498
|
] }),
|
|
3379
|
-
label ? /* @__PURE__ */
|
|
3499
|
+
label ? /* @__PURE__ */ jsx111("div", { className: "font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: label }) : null
|
|
3380
3500
|
] })
|
|
3381
3501
|
] });
|
|
3382
3502
|
}
|
|
3383
3503
|
|
|
3384
3504
|
// src/components/data-display/HeatmapGrid.tsx
|
|
3385
|
-
import { jsx as
|
|
3505
|
+
import { jsx as jsx112 } from "react/jsx-runtime";
|
|
3386
3506
|
function HeatmapGrid({ cells, columns = 7, max, className = "" }) {
|
|
3387
3507
|
const peak = max ?? Math.max(1, ...cells.map((cell) => cell.value));
|
|
3388
|
-
return /* @__PURE__ */
|
|
3508
|
+
return /* @__PURE__ */ jsx112("div", { className: ["grid gap-1", className].filter(Boolean).join(" "), style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: cells.map((cell, index) => {
|
|
3389
3509
|
const opacity = 0.15 + Math.min(1, cell.value / peak) * 0.75;
|
|
3390
|
-
return /* @__PURE__ */
|
|
3510
|
+
return /* @__PURE__ */ jsx112("div", { title: cell.title, className: "aspect-square border border-[var(--tapiz-border-subtle)]", style: { background: `color-mix(in srgb, var(--tapiz-accent) ${Math.round(opacity * 100)}%, transparent)` }, children: cell.label ? /* @__PURE__ */ jsx112("span", { className: "sr-only", children: cell.label }) : null }, index);
|
|
3391
3511
|
}) });
|
|
3392
3512
|
}
|
|
3393
3513
|
|
|
3394
3514
|
// src/components/data-display/FunnelChart.tsx
|
|
3395
|
-
import { jsx as
|
|
3515
|
+
import { jsx as jsx113, jsxs as jsxs85 } from "react/jsx-runtime";
|
|
3396
3516
|
function FunnelChart({ steps, className = "" }) {
|
|
3397
3517
|
const max = Math.max(1, ...steps.map((step) => step.value));
|
|
3398
|
-
return /* @__PURE__ */
|
|
3518
|
+
return /* @__PURE__ */ jsx113("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: steps.map((step, index) => {
|
|
3399
3519
|
const width = Math.max(8, step.value / max * 100);
|
|
3400
|
-
return /* @__PURE__ */
|
|
3401
|
-
/* @__PURE__ */
|
|
3402
|
-
/* @__PURE__ */
|
|
3403
|
-
/* @__PURE__ */
|
|
3520
|
+
return /* @__PURE__ */ jsxs85("div", { children: [
|
|
3521
|
+
/* @__PURE__ */ jsxs85("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
|
|
3522
|
+
/* @__PURE__ */ jsx113("span", { className: "font-medium text-[var(--tapiz-text-primary)]", children: step.label }),
|
|
3523
|
+
/* @__PURE__ */ jsxs85("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3404
3524
|
step.value,
|
|
3405
3525
|
step.meta ? ` \xB7 ${String(step.meta)}` : ""
|
|
3406
3526
|
] })
|
|
3407
3527
|
] }),
|
|
3408
|
-
/* @__PURE__ */
|
|
3528
|
+
/* @__PURE__ */ jsx113("div", { className: "h-9 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx113("div", { className: "h-full border-r border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)]", style: { width: `${width}%` } }) })
|
|
3409
3529
|
] }, index);
|
|
3410
3530
|
}) });
|
|
3411
3531
|
}
|
|
3412
3532
|
|
|
3413
3533
|
// src/components/data-display/ComparisonMeter.tsx
|
|
3414
|
-
import { jsx as
|
|
3534
|
+
import { jsx as jsx114, jsxs as jsxs86 } from "react/jsx-runtime";
|
|
3415
3535
|
function ComparisonMeter({ leftLabel, rightLabel, value, className = "" }) {
|
|
3416
3536
|
const clamped = Math.max(0, Math.min(100, value));
|
|
3417
|
-
return /* @__PURE__ */
|
|
3418
|
-
/* @__PURE__ */
|
|
3419
|
-
/* @__PURE__ */
|
|
3420
|
-
/* @__PURE__ */
|
|
3537
|
+
return /* @__PURE__ */ jsxs86("div", { className, children: [
|
|
3538
|
+
/* @__PURE__ */ jsxs86("div", { className: "mb-2 flex justify-between gap-3 text-sm text-[var(--tapiz-text-muted)]", children: [
|
|
3539
|
+
/* @__PURE__ */ jsx114("span", { children: leftLabel }),
|
|
3540
|
+
/* @__PURE__ */ jsx114("span", { children: rightLabel })
|
|
3421
3541
|
] }),
|
|
3422
|
-
/* @__PURE__ */
|
|
3423
|
-
/* @__PURE__ */
|
|
3424
|
-
/* @__PURE__ */
|
|
3542
|
+
/* @__PURE__ */ jsxs86("div", { className: "relative h-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: [
|
|
3543
|
+
/* @__PURE__ */ jsx114("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${clamped}%` } }),
|
|
3544
|
+
/* @__PURE__ */ jsx114("div", { className: "absolute top-[-6px] h-6 w-px bg-[var(--tapiz-border-strong)]", style: { left: `${clamped}%` } })
|
|
3425
3545
|
] })
|
|
3426
3546
|
] });
|
|
3427
3547
|
}
|
|
3428
3548
|
|
|
3429
3549
|
// src/components/framework/ActivityFeed.tsx
|
|
3430
|
-
import { jsx as
|
|
3550
|
+
import { jsx as jsx115, jsxs as jsxs87 } from "react/jsx-runtime";
|
|
3431
3551
|
function ActivityFeed({ items, className = "" }) {
|
|
3432
|
-
return /* @__PURE__ */
|
|
3433
|
-
/* @__PURE__ */
|
|
3434
|
-
/* @__PURE__ */
|
|
3435
|
-
/* @__PURE__ */
|
|
3436
|
-
/* @__PURE__ */
|
|
3552
|
+
return /* @__PURE__ */ jsx115("div", { className: ["divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)]", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs87("div", { className: "flex gap-3 p-4", children: [
|
|
3553
|
+
/* @__PURE__ */ jsx115(Avatar, { name: item.actor, src: item.avatarUrl, size: "sm" }),
|
|
3554
|
+
/* @__PURE__ */ jsxs87("div", { className: "min-w-0 flex-1", children: [
|
|
3555
|
+
/* @__PURE__ */ jsxs87("p", { className: "text-sm text-[var(--tapiz-text-primary)]", children: [
|
|
3556
|
+
/* @__PURE__ */ jsx115("strong", { children: item.actor }),
|
|
3437
3557
|
" ",
|
|
3438
3558
|
item.action
|
|
3439
3559
|
] }),
|
|
3440
|
-
item.meta ? /* @__PURE__ */
|
|
3560
|
+
item.meta ? /* @__PURE__ */ jsx115("div", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: item.meta }) : null
|
|
3441
3561
|
] }),
|
|
3442
|
-
item.time ? /* @__PURE__ */
|
|
3562
|
+
item.time ? /* @__PURE__ */ jsx115("div", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
3443
3563
|
] }, index)) });
|
|
3444
3564
|
}
|
|
3445
3565
|
|
|
3446
3566
|
// src/components/framework/InboxList.tsx
|
|
3447
|
-
import { jsx as
|
|
3567
|
+
import { jsx as jsx116, jsxs as jsxs88 } from "react/jsx-runtime";
|
|
3448
3568
|
function InboxList({ items, className = "" }) {
|
|
3449
|
-
return /* @__PURE__ */
|
|
3450
|
-
/* @__PURE__ */
|
|
3451
|
-
/* @__PURE__ */
|
|
3452
|
-
/* @__PURE__ */
|
|
3453
|
-
item.sender ? /* @__PURE__ */
|
|
3569
|
+
return /* @__PURE__ */ jsx116("div", { className: ["divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)]", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs88("article", { className: ["p-4 transition hover:bg-[var(--tapiz-bg-surface-muted)]", item.unread ? "border-l-4 border-l-[var(--tapiz-accent)]" : ""].join(" "), children: [
|
|
3570
|
+
/* @__PURE__ */ jsxs88("div", { className: "flex items-start justify-between gap-3", children: [
|
|
3571
|
+
/* @__PURE__ */ jsxs88("div", { className: "min-w-0", children: [
|
|
3572
|
+
/* @__PURE__ */ jsx116("h3", { className: "truncate text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3573
|
+
item.sender ? /* @__PURE__ */ jsx116("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.sender }) : null
|
|
3454
3574
|
] }),
|
|
3455
|
-
/* @__PURE__ */
|
|
3456
|
-
item.tag ? /* @__PURE__ */
|
|
3457
|
-
item.time ? /* @__PURE__ */
|
|
3575
|
+
/* @__PURE__ */ jsxs88("div", { className: "flex shrink-0 items-center gap-2", children: [
|
|
3576
|
+
item.tag ? /* @__PURE__ */ jsx116(Badge, { children: item.tag }) : null,
|
|
3577
|
+
item.time ? /* @__PURE__ */ jsx116("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
|
|
3458
3578
|
] })
|
|
3459
3579
|
] }),
|
|
3460
|
-
item.snippet ? /* @__PURE__ */
|
|
3580
|
+
item.snippet ? /* @__PURE__ */ jsx116("p", { className: "mt-2 line-clamp-2 text-sm text-[var(--tapiz-text-muted)]", children: item.snippet }) : null
|
|
3461
3581
|
] }, index)) });
|
|
3462
3582
|
}
|
|
3463
3583
|
|
|
3464
3584
|
// src/components/framework/ApprovalQueue.tsx
|
|
3465
|
-
import { jsx as
|
|
3585
|
+
import { jsx as jsx117, jsxs as jsxs89 } from "react/jsx-runtime";
|
|
3466
3586
|
function ApprovalQueue({ items, onApprove, onReject, className = "" }) {
|
|
3467
|
-
return /* @__PURE__ */
|
|
3468
|
-
/* @__PURE__ */
|
|
3469
|
-
/* @__PURE__ */
|
|
3470
|
-
/* @__PURE__ */
|
|
3471
|
-
item.priority ? /* @__PURE__ */
|
|
3587
|
+
return /* @__PURE__ */ jsx117("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsx117("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", children: /* @__PURE__ */ jsxs89("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [
|
|
3588
|
+
/* @__PURE__ */ jsxs89("div", { children: [
|
|
3589
|
+
/* @__PURE__ */ jsxs89("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
3590
|
+
/* @__PURE__ */ jsx117("h3", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3591
|
+
item.priority ? /* @__PURE__ */ jsx117(Badge, { variant: item.priority === "high" ? "danger" : item.priority === "medium" ? "warning" : "default", children: item.priority }) : null
|
|
3472
3592
|
] }),
|
|
3473
|
-
item.requester ? /* @__PURE__ */
|
|
3593
|
+
item.requester ? /* @__PURE__ */ jsxs89("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3474
3594
|
"Requested by ",
|
|
3475
3595
|
item.requester
|
|
3476
3596
|
] }) : null,
|
|
3477
|
-
item.description ? /* @__PURE__ */
|
|
3597
|
+
item.description ? /* @__PURE__ */ jsx117("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
3478
3598
|
] }),
|
|
3479
|
-
/* @__PURE__ */
|
|
3480
|
-
/* @__PURE__ */
|
|
3481
|
-
/* @__PURE__ */
|
|
3599
|
+
/* @__PURE__ */ jsxs89("div", { className: "flex gap-2", children: [
|
|
3600
|
+
/* @__PURE__ */ jsx117(Button, { size: "sm", variant: "secondary", onClick: () => onReject?.(index), children: "Reject" }),
|
|
3601
|
+
/* @__PURE__ */ jsx117(Button, { size: "sm", onClick: () => onApprove?.(index), children: "Approve" })
|
|
3482
3602
|
] })
|
|
3483
3603
|
] }) }, index)) });
|
|
3484
3604
|
}
|
|
3485
3605
|
|
|
3486
3606
|
// src/components/framework/SLAStatus.tsx
|
|
3487
|
-
import { jsx as
|
|
3607
|
+
import { jsx as jsx118, jsxs as jsxs90 } from "react/jsx-runtime";
|
|
3488
3608
|
function SLAStatus({ label, value, target = 95, className = "" }) {
|
|
3489
3609
|
const ok = value >= target;
|
|
3490
|
-
return /* @__PURE__ */
|
|
3491
|
-
/* @__PURE__ */
|
|
3492
|
-
/* @__PURE__ */
|
|
3493
|
-
/* @__PURE__ */
|
|
3610
|
+
return /* @__PURE__ */ jsxs90("div", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", className].filter(Boolean).join(" "), children: [
|
|
3611
|
+
/* @__PURE__ */ jsxs90("div", { className: "flex items-center justify-between gap-3", children: [
|
|
3612
|
+
/* @__PURE__ */ jsx118("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label }),
|
|
3613
|
+
/* @__PURE__ */ jsx118("span", { className: ["font-mono text-xs", ok ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-warning)]"].join(" "), children: ok ? "Within SLA" : "At risk" })
|
|
3494
3614
|
] }),
|
|
3495
|
-
/* @__PURE__ */
|
|
3496
|
-
/* @__PURE__ */
|
|
3497
|
-
/* @__PURE__ */
|
|
3615
|
+
/* @__PURE__ */ jsx118("div", { className: "mt-3 h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx118("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${Math.max(0, Math.min(100, value))}%` } }) }),
|
|
3616
|
+
/* @__PURE__ */ jsxs90("div", { className: "mt-2 flex justify-between font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: [
|
|
3617
|
+
/* @__PURE__ */ jsxs90("span", { children: [
|
|
3498
3618
|
value,
|
|
3499
3619
|
"%"
|
|
3500
3620
|
] }),
|
|
3501
|
-
/* @__PURE__ */
|
|
3621
|
+
/* @__PURE__ */ jsxs90("span", { children: [
|
|
3502
3622
|
"Target ",
|
|
3503
3623
|
target,
|
|
3504
3624
|
"%"
|
|
@@ -3508,81 +3628,81 @@ function SLAStatus({ label, value, target = 95, className = "" }) {
|
|
|
3508
3628
|
}
|
|
3509
3629
|
|
|
3510
3630
|
// src/components/framework/FeatureFlagTable.tsx
|
|
3511
|
-
import { jsx as
|
|
3631
|
+
import { jsx as jsx119, jsxs as jsxs91 } from "react/jsx-runtime";
|
|
3512
3632
|
function FeatureFlagTable({ flags, onToggle, className = "" }) {
|
|
3513
|
-
return /* @__PURE__ */
|
|
3514
|
-
/* @__PURE__ */
|
|
3515
|
-
/* @__PURE__ */
|
|
3516
|
-
/* @__PURE__ */
|
|
3517
|
-
/* @__PURE__ */
|
|
3633
|
+
return /* @__PURE__ */ jsx119("div", { className: ["overflow-hidden border border-[var(--tapiz-border-subtle)]", className].filter(Boolean).join(" "), children: flags.map((flag) => /* @__PURE__ */ jsxs91("div", { className: "grid gap-3 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 last:border-b-0 md:grid-cols-[1fr_auto_auto] md:items-center", children: [
|
|
3634
|
+
/* @__PURE__ */ jsxs91("div", { children: [
|
|
3635
|
+
/* @__PURE__ */ jsxs91("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
3636
|
+
/* @__PURE__ */ jsx119("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: flag.name }),
|
|
3637
|
+
/* @__PURE__ */ jsx119(Badge, { children: flag.key })
|
|
3518
3638
|
] }),
|
|
3519
|
-
flag.description ? /* @__PURE__ */
|
|
3639
|
+
flag.description ? /* @__PURE__ */ jsx119("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: flag.description }) : null
|
|
3520
3640
|
] }),
|
|
3521
|
-
/* @__PURE__ */
|
|
3522
|
-
/* @__PURE__ */
|
|
3641
|
+
/* @__PURE__ */ jsx119("div", { className: "text-sm text-[var(--tapiz-text-muted)]", children: flag.rollout }),
|
|
3642
|
+
/* @__PURE__ */ jsx119(Switch, { checked: flag.enabled, onChange: (checked) => onToggle?.(flag.key, checked) })
|
|
3523
3643
|
] }, flag.key)) });
|
|
3524
3644
|
}
|
|
3525
3645
|
|
|
3526
3646
|
// src/components/framework/PlanUsage.tsx
|
|
3527
|
-
import { jsx as
|
|
3647
|
+
import { jsx as jsx120, jsxs as jsxs92 } from "react/jsx-runtime";
|
|
3528
3648
|
function PlanUsage({ title = "Plan usage", items, className = "" }) {
|
|
3529
|
-
return /* @__PURE__ */
|
|
3530
|
-
/* @__PURE__ */
|
|
3531
|
-
/* @__PURE__ */
|
|
3649
|
+
return /* @__PURE__ */ jsxs92("section", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", className].filter(Boolean).join(" "), children: [
|
|
3650
|
+
/* @__PURE__ */ jsx120("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
|
|
3651
|
+
/* @__PURE__ */ jsx120("div", { className: "mt-4 space-y-4", children: items.map((item, index) => {
|
|
3532
3652
|
const pct = item.limit ? Math.min(100, item.used / item.limit * 100) : 0;
|
|
3533
|
-
return /* @__PURE__ */
|
|
3534
|
-
/* @__PURE__ */
|
|
3535
|
-
/* @__PURE__ */
|
|
3536
|
-
/* @__PURE__ */
|
|
3653
|
+
return /* @__PURE__ */ jsxs92("div", { children: [
|
|
3654
|
+
/* @__PURE__ */ jsxs92("div", { className: "mb-1 flex justify-between text-sm", children: [
|
|
3655
|
+
/* @__PURE__ */ jsx120("span", { className: "text-[var(--tapiz-text-primary)]", children: item.label }),
|
|
3656
|
+
/* @__PURE__ */ jsxs92("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
|
|
3537
3657
|
item.used,
|
|
3538
3658
|
"/",
|
|
3539
3659
|
item.limit
|
|
3540
3660
|
] })
|
|
3541
3661
|
] }),
|
|
3542
|
-
/* @__PURE__ */
|
|
3662
|
+
/* @__PURE__ */ jsx120("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx120("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${pct}%` } }) })
|
|
3543
3663
|
] }, index);
|
|
3544
3664
|
}) })
|
|
3545
3665
|
] });
|
|
3546
3666
|
}
|
|
3547
3667
|
|
|
3548
3668
|
// src/components/marketing/AnnouncementBar.tsx
|
|
3549
|
-
import { jsx as
|
|
3669
|
+
import { jsx as jsx121, jsxs as jsxs93 } from "react/jsx-runtime";
|
|
3550
3670
|
function AnnouncementBar({ children, action, className = "" }) {
|
|
3551
|
-
return /* @__PURE__ */
|
|
3671
|
+
return /* @__PURE__ */ jsx121("div", { className: ["border-b border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] px-4 py-3 text-sm text-[var(--tapiz-text-primary)]", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs93("div", { className: "mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-3 text-center", children: [
|
|
3552
3672
|
" ",
|
|
3553
|
-
/* @__PURE__ */
|
|
3554
|
-
action ? /* @__PURE__ */
|
|
3673
|
+
/* @__PURE__ */ jsx121("span", { children }),
|
|
3674
|
+
action ? /* @__PURE__ */ jsx121("span", { children: action }) : null
|
|
3555
3675
|
] }) });
|
|
3556
3676
|
}
|
|
3557
3677
|
|
|
3558
3678
|
// src/components/marketing/FAQSection.tsx
|
|
3559
|
-
import { jsx as
|
|
3679
|
+
import { jsx as jsx122, jsxs as jsxs94 } from "react/jsx-runtime";
|
|
3560
3680
|
function FAQSection({ title = "Frequently asked questions", description, items, className = "" }) {
|
|
3561
|
-
return /* @__PURE__ */
|
|
3562
|
-
/* @__PURE__ */
|
|
3563
|
-
/* @__PURE__ */
|
|
3564
|
-
/* @__PURE__ */
|
|
3565
|
-
description ? /* @__PURE__ */
|
|
3681
|
+
return /* @__PURE__ */ jsxs94("section", { className, children: [
|
|
3682
|
+
/* @__PURE__ */ jsxs94("div", { className: "mb-6 max-w-2xl", children: [
|
|
3683
|
+
/* @__PURE__ */ jsx122("div", { className: "kicker", children: "FAQ" }),
|
|
3684
|
+
/* @__PURE__ */ jsx122("h2", { className: "mt-2 text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: title }),
|
|
3685
|
+
description ? /* @__PURE__ */ jsx122("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
|
|
3566
3686
|
] }),
|
|
3567
|
-
/* @__PURE__ */
|
|
3687
|
+
/* @__PURE__ */ jsx122(Accordion, { items: items.map((item, index) => ({ id: `faq-${index}`, title: item.question, content: item.answer })) })
|
|
3568
3688
|
] });
|
|
3569
3689
|
}
|
|
3570
3690
|
|
|
3571
3691
|
// src/components/marketing/RoadmapList.tsx
|
|
3572
|
-
import { jsx as
|
|
3692
|
+
import { jsx as jsx123, jsxs as jsxs95 } from "react/jsx-runtime";
|
|
3573
3693
|
function RoadmapList({ items, className = "" }) {
|
|
3574
|
-
return /* @__PURE__ */
|
|
3575
|
-
/* @__PURE__ */
|
|
3576
|
-
/* @__PURE__ */
|
|
3577
|
-
item.status ? /* @__PURE__ */
|
|
3694
|
+
return /* @__PURE__ */ jsx123("div", { className: ["grid gap-3 md:grid-cols-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs95("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", children: [
|
|
3695
|
+
/* @__PURE__ */ jsxs95("div", { className: "flex items-center justify-between gap-3", children: [
|
|
3696
|
+
/* @__PURE__ */ jsx123("span", { className: "kicker", children: item.quarter ?? `0${index + 1}` }),
|
|
3697
|
+
item.status ? /* @__PURE__ */ jsx123(Badge, { children: item.status }) : null
|
|
3578
3698
|
] }),
|
|
3579
|
-
/* @__PURE__ */
|
|
3580
|
-
item.description ? /* @__PURE__ */
|
|
3699
|
+
/* @__PURE__ */ jsx123("h3", { className: "mt-4 font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
|
|
3700
|
+
item.description ? /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: item.description }) : null
|
|
3581
3701
|
] }, index)) });
|
|
3582
3702
|
}
|
|
3583
3703
|
|
|
3584
3704
|
// src/components/feedback/InlineStatus.tsx
|
|
3585
|
-
import { jsx as
|
|
3705
|
+
import { jsx as jsx124, jsxs as jsxs96 } from "react/jsx-runtime";
|
|
3586
3706
|
var toneClasses5 = {
|
|
3587
3707
|
neutral: "bg-[var(--tapiz-text-muted)]",
|
|
3588
3708
|
success: "bg-[var(--tapiz-success)]",
|
|
@@ -3591,8 +3711,8 @@ var toneClasses5 = {
|
|
|
3591
3711
|
info: "bg-[var(--tapiz-info)]"
|
|
3592
3712
|
};
|
|
3593
3713
|
function InlineStatus({ tone: tone2 = "neutral", children, pulse = false, className = "" }) {
|
|
3594
|
-
return /* @__PURE__ */
|
|
3595
|
-
/* @__PURE__ */
|
|
3714
|
+
return /* @__PURE__ */ jsxs96("span", { className: ["inline-flex items-center gap-2 text-sm text-[var(--tapiz-text-muted)]", className].filter(Boolean).join(" "), children: [
|
|
3715
|
+
/* @__PURE__ */ jsx124("span", { className: ["h-2 w-2 rounded-full", toneClasses5[tone2], pulse ? "animate-pulse" : ""].filter(Boolean).join(" ") }),
|
|
3596
3716
|
children
|
|
3597
3717
|
] });
|
|
3598
3718
|
}
|
|
@@ -3714,6 +3834,7 @@ export {
|
|
|
3714
3834
|
KanbanBoard,
|
|
3715
3835
|
Kbd,
|
|
3716
3836
|
KeyValueList,
|
|
3837
|
+
LandingNavbarShell,
|
|
3717
3838
|
Layers,
|
|
3718
3839
|
LoadingOverlay,
|
|
3719
3840
|
LockIcon,
|