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