@tapizlabs/ui 0.2.1 → 0.2.3

package/dist/index.js

@@ -1054,17 +1054,10 @@ function FormError({ message, className = "" }) {
   return /* @__PURE__ */ jsxs15(
     "div",
     {
-      className: `flex items-start gap-2 px-3 py-2.5 text-sm ${className}`,
-      style: {
-        background: "color-mix(in srgb, var(--color-warn) 8%, transparent)",
-        border: "1px solid color-mix(in srgb, var(--color-warn) 25%, transparent)",
-        borderLeft: "3px solid var(--color-warn)",
-        color: "var(--color-warn)",
-        animation: "var(--animate-scale-in)"
-      },
+      className: `flex items-start gap-2 px-3 py-2.5 text-sm text-warn bg-warn/8 border border-warn/25 border-l-[3px] border-l-warn animate-scale-in ${className}`,
       children: [
         /* @__PURE__ */ jsx22(Alert, { size: 14, className: "shrink-0 mt-0.5" }),
-        /* @__PURE__ */ jsx22("span", { style: { fontFamily: "var(--font-mono)", fontSize: 12 }, children: message })
+        /* @__PURE__ */ jsx22("span", { className: "font-mono text-[12px]", children: message })
       ]
     }
   );
@@ -1217,49 +1210,26 @@ function BaseModal({
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": titleId,
-        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-        style: { background: "rgba(5,6,8,0.75)", backdropFilter: "blur(2px)" },
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-[rgba(5,6,8,0.75)] backdrop-blur-[2px]",
         onClick: (e) => e.target === e.currentTarget && onClose(),
         children: /* @__PURE__ */ jsxs17(
           "div",
           {
-            className: `w-full ${sizeClass[size]} p-6 space-y-4`,
-            style: {
-              background: "var(--color-ink-200)",
-              border: "1px solid var(--color-border-hi)",
-              borderTop: "2px solid var(--color-primary-300)",
-              animation: "var(--animate-scale-in)"
-            },
+            className: `w-full ${sizeClass[size]} p-6 space-y-4 bg-ink-200 border border-border-hi border-t-2 border-t-primary-300 animate-scale-in`,
             children: [
               /* @__PURE__ */ jsxs17("div", { className: "flex items-start justify-between", children: [
                 /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
-                  icon && /* @__PURE__ */ jsx24(
-                    "div",
-                    {
-                      className: "flex items-center justify-center w-10 h-10 shrink-0",
-                      style: { background: "var(--color-ink-300)", border: "1px solid var(--color-border-hi)", color: "var(--color-primary-300)" },
-                      children: icon
-                    }
-                  ),
+                  icon && /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center w-10 h-10 shrink-0 bg-ink-300 border border-border-hi text-primary-300", children: icon }),
                   /* @__PURE__ */ jsxs17("div", { children: [
-                    /* @__PURE__ */ jsx24("h3", { id: titleId, style: { fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, color: "var(--color-txt-1)" }, children: title }),
-                    subtitle && /* @__PURE__ */ jsx24("p", { style: { fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--color-primary-300)", marginTop: 2, letterSpacing: "0.1em" }, children: subtitle })
+                    /* @__PURE__ */ jsx24("h3", { id: titleId, className: "font-display text-[15px] font-semibold text-txt-1", children: title }),
+                    subtitle && /* @__PURE__ */ jsx24("p", { className: "font-mono text-[10px] text-primary-300 mt-0.5 tracking-widest", children: subtitle })
                   ] })
                 ] }),
                 xShown && /* @__PURE__ */ jsx24(
                   "button",
                   {
                     onClick: onClose,
-                    className: "w-7 h-7 flex items-center justify-center",
-                    style: { color: "var(--color-txt-3)", border: "1px solid transparent" },
-                    onMouseEnter: (e) => {
-                      e.currentTarget.style.color = "var(--color-txt-1)";
-                      e.currentTarget.style.borderColor = "var(--color-border-hi)";
-                    },
-                    onMouseLeave: (e) => {
-                      e.currentTarget.style.color = "var(--color-txt-3)";
-                      e.currentTarget.style.borderColor = "transparent";
-                    },
+                    className: "w-7 h-7 flex items-center justify-center text-txt-3 border border-transparent hover:text-txt-1 hover:border-border-hi transition-colors",
                     "aria-label": closeLabel,
                     title: closeLabel,
                     children: /* @__PURE__ */ jsx24(X, { size: 14 })
@@ -1300,37 +1270,25 @@ function ConfirmDialog({
     /* @__PURE__ */ jsx25(
       "div",
       {
-        className: "fixed inset-0 z-300 flex items-center justify-center px-4",
-        style: { background: "rgba(5,6,8,0.4)", backdropFilter: "blur(8px)" },
+        className: "fixed inset-0 z-300 flex items-center justify-center px-4 bg-[rgba(5,6,8,0.4)] backdrop-blur-sm",
         onClick: onCancel,
         children: /* @__PURE__ */ jsx25(
           "div",
           {
-            className: "relative w-full max-w-sm",
-            style: {
-              background: "var(--color-ink-200)",
-              border: "1px solid var(--color-border-hi)",
-              borderTop: danger ? "2px solid var(--color-danger, #f87171)" : "2px solid var(--color-primary-300)",
-              animation: "var(--animate-scale-in)"
-            },
+            className: `relative w-full max-w-sm bg-ink-200 border border-border-hi border-t-2 animate-scale-in ${danger ? "border-t-(--color-danger,#f87171)" : "border-t-primary-300"}`,
             onClick: (e) => e.stopPropagation(),
             children: /* @__PURE__ */ jsxs18("div", { className: "p-6 flex flex-col gap-4", children: [
               /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
                 icon && /* @__PURE__ */ jsx25(
                   "div",
                   {
-                    className: "flex items-center justify-center w-9 h-9 shrink-0",
-                    style: {
-                      background: danger ? "rgba(248,113,113,0.1)" : "rgba(94,231,255,0.08)",
-                      border: danger ? "1px solid rgba(248,113,113,0.25)" : "1px solid rgba(94,231,255,0.15)",
-                      color: danger ? "var(--color-danger, #f87171)" : "var(--color-primary-300)"
-                    },
+                    className: `flex items-center justify-center w-9 h-9 shrink-0 border ${danger ? "bg-[rgba(248,113,113,0.1)] border-[rgba(248,113,113,0.25)] text-(--color-danger,#f87171)" : "bg-primary-300/8 border-primary-300/15 text-primary-300"}`,
                     children: icon
                   }
                 ),
-                /* @__PURE__ */ jsx25("p", { className: "text-sm font-semibold", style: { color: "var(--color-txt-1)" }, children: title })
+                /* @__PURE__ */ jsx25("p", { className: "text-sm font-semibold text-txt-1", children: title })
               ] }),
-              /* @__PURE__ */ jsx25("p", { className: "text-sm", style: { color: "var(--color-txt-3)" }, children: resolvedDescription }),
+              /* @__PURE__ */ jsx25("p", { className: "text-sm text-txt-3", children: resolvedDescription }),
               /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-end gap-2", children: [
                 /* @__PURE__ */ jsx25(Button, { variant: "ghost", size: "sm", icon: /* @__PURE__ */ jsx25(X, { size: 13 }), onClick: onCancel, disabled: loading, children: resolvedCancel }),
                 /* @__PURE__ */ jsx25(
@@ -1564,29 +1522,17 @@ function InfoBanner(props) {
     const icon = variant === "lock" ? /* @__PURE__ */ jsx32(LockIcon, { size: 14, className: "mt-1 shrink-0" }) : /* @__PURE__ */ jsx32(Info, { size: 14, className: "mt-1 shrink-0" });
     return /* @__PURE__ */ jsxs22("div", { className: `app-info-banner flex items-start gap-2 border px-3 py-2.5 text-[13px] ${styles} ${className2}`, children: [
       icon,
-      /* @__PURE__ */ jsx32("p", { style: { fontFamily: "var(--font-mono)" }, children: text })
+      /* @__PURE__ */ jsx32("p", { className: "font-mono", children: text })
     ] });
   }
   const { title, description, className = "" } = props;
   return /* @__PURE__ */ jsxs22(
     "div",
     {
-      className: `app-info-banner px-4 py-3 ${className}`,
-      style: {
-        background: "rgba(94,231,255,0.04)",
-        border: "1px solid rgba(94,231,255,0.12)",
-        borderLeft: "3px solid var(--color-primary-300)"
-      },
+      className: `app-info-banner px-4 py-3 bg-primary-300/4 border border-primary-300/12 border-l-[3px] border-l-primary-300 ${className}`,
       children: [
-        /* @__PURE__ */ jsx32(
-          "p",
-          {
-            className: "mb-0.5 font-mono text-[10px] font-semibold uppercase tracking-widest",
-            style: { color: "var(--color-primary-300)" },
-            children: title
-          }
-        ),
-        /* @__PURE__ */ jsx32("p", { className: "font-mono text-[11px] leading-relaxed", style: { color: "var(--color-txt-2)" }, children: description })
+        /* @__PURE__ */ jsx32("p", { className: "mb-0.5 font-mono text-[10px] font-semibold uppercase tracking-widest text-primary-300", children: title }),
+        /* @__PURE__ */ jsx32("p", { className: "font-mono text-[11px] leading-relaxed text-txt-2", children: description })
       ]
     }
   );
@@ -3498,284 +3444,6 @@ function InlineStatus({ tone: tone2 = "neutral", children, pulse = false, classN
     children
   ] });
 }
-
-// src/showcase/TapizDocsPage.tsx
-import { Fragment as Fragment5, jsx as jsx123, jsxs as jsxs96 } from "react/jsx-runtime";
-var demoRows = [
-  { id: "1", student: "Mila Petrovi\u0107", status: "Active", score: 94 },
-  { id: "2", student: "Vuk Jovanovi\u0107", status: "Pending", score: 82 },
-  { id: "3", student: "Sara Ili\u0107", status: "Blocked", score: 68 }
-];
-var calendarDays = Array.from({ length: 35 }, (_, index) => ({
-  date: index + 1,
-  selected: index === 10,
-  muted: index > 30,
-  events: index === 10 ? ["Exam review", "Parent sync"] : index === 15 ? ["Quiz"] : void 0
-}));
-function DemoSection({ id, title, description, children }) {
-  return /* @__PURE__ */ jsxs96("section", { id, className: "scroll-mt-20 border-t border-[var(--tapiz-border-subtle)] py-12", children: [
-    /* @__PURE__ */ jsxs96("div", { className: "mb-6 flex flex-col gap-2 md:flex-row md:items-end md:justify-between", children: [
-      /* @__PURE__ */ jsxs96("div", { children: [
-        /* @__PURE__ */ jsx123("div", { className: "kicker", children: id }),
-        /* @__PURE__ */ jsx123("h2", { className: "mt-2 text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: title }),
-        /* @__PURE__ */ jsx123("p", { className: "mt-2 max-w-2xl text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description })
-      ] }),
-      /* @__PURE__ */ jsx123("a", { href: "#top", className: "font-mono text-xs uppercase tracking-[0.16em] text-[var(--tapiz-accent)]", children: "Back to top" })
-    ] }),
-    children
-  ] });
-}
-function TapizDocsPage({ title = "Tapiz UI Framework", subtitle = "A brutal-enterprise React component system with tokens, primitives, patterns, and ready-made application blocks." }) {
-  return /* @__PURE__ */ jsxs96("main", { id: "top", className: "tapiz-enterprise-shell min-h-screen tapiz-noise-bg", children: [
-    /* @__PURE__ */ jsx123(
-      TopNav,
-      {
-        brand: /* @__PURE__ */ jsx123("span", { className: "font-display text-lg font-semibold tracking-[-0.04em]", children: "Tapiz UI" }),
-        links: [
-          { label: "Foundations", href: "#foundations" },
-          { label: "Forms", href: "#forms" },
-          { label: "Data", href: "#data" },
-          { label: "Framework", href: "#framework" },
-          { label: "Advanced", href: "#advanced" },
-          { label: "Marketing", href: "#marketing" }
-        ],
-        actions: /* @__PURE__ */ jsx123(Button, { size: "sm", variant: "brutal", children: "Install" })
-      }
-    ),
-    /* @__PURE__ */ jsx123(
-      HeroFrame,
-      {
-        eyebrow: "Design system / React framework",
-        title,
-        description: subtitle,
-        actions: /* @__PURE__ */ jsxs96(Fragment5, { children: [
-          /* @__PURE__ */ jsx123(Button, { variant: "primary", children: "Start building" }),
-          /* @__PURE__ */ jsx123(Button, { variant: "secondary", children: "View tokens" })
-        ] }),
-        meta: "Light/dark safe \xB7 token driven \xB7 no app-specific dependencies",
-        visual: /* @__PURE__ */ jsxs96(MockupFrame, { title: "Component registry", children: [
-          /* @__PURE__ */ jsxs96(StatGrid, { children: [
-            /* @__PURE__ */ jsx123(MetricCard, { label: "Components", value: "80+", trend: "expanded", trendTone: "positive" }),
-            /* @__PURE__ */ jsx123(MetricCard, { label: "Themes", value: "2", trend: "light/dark" }),
-            /* @__PURE__ */ jsx123(MetricCard, { label: "Patterns", value: "12", trend: "framework", trendTone: "warning" })
-          ] }),
-          /* @__PURE__ */ jsx123("div", { className: "mt-4", children: /* @__PURE__ */ jsx123(Sparkline, { values: [18, 24, 21, 32, 44, 39, 58], width: 420, height: 56 }) })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs96(Container, { size: "xl", className: "pb-16", children: [
-      /* @__PURE__ */ jsx123(Surface, { variant: "brutal", padding: "md", className: "mb-8", children: /* @__PURE__ */ jsxs96(Cluster, { justify: "between", align: "center", children: [
-        /* @__PURE__ */ jsx123(Breadcrumbs, { items: [{ label: "Docs", href: "#top" }, { label: "Components" }] }),
-        /* @__PURE__ */ jsxs96(Cluster, { gap: "sm", children: [
-          /* @__PURE__ */ jsx123(Kbd, { children: "\u2318" }),
-          /* @__PURE__ */ jsx123(Kbd, { children: "K" }),
-          /* @__PURE__ */ jsx123("span", { className: "text-sm text-[var(--tapiz-text-muted)]", children: "Command-first framework UX" })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs96(DemoSection, { id: "foundations", title: "Foundations", description: "Core surfaces, cards, badges, layout helpers, empty states, skeletons and typography primitives.", children: [
-        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "16rem", children: [
-          /* @__PURE__ */ jsxs96(Card, { variant: "surface", children: [
-            /* @__PURE__ */ jsx123("div", { className: "kicker", children: "surface" }),
-            /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: "Default card treatment." })
-          ] }),
-          /* @__PURE__ */ jsxs96(Card, { variant: "raised", children: [
-            /* @__PURE__ */ jsx123("div", { className: "kicker", children: "raised" }),
-            /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: "Elevated enterprise panel." })
-          ] }),
-          /* @__PURE__ */ jsxs96(Card, { variant: "brutal", children: [
-            /* @__PURE__ */ jsx123("div", { className: "kicker", children: "brutal" }),
-            /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: "Hard border + hard shadow." })
-          ] }),
-          /* @__PURE__ */ jsxs96(Card, { variant: "glass", children: [
-            /* @__PURE__ */ jsx123("div", { className: "kicker", children: "glass" }),
-            /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: "Backdrop style surface." })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx123(Divider, { label: "status tokens", className: "my-8" }),
-        /* @__PURE__ */ jsxs96(Cluster, { children: [
-          /* @__PURE__ */ jsx123(Badge, { children: "Default" }),
-          /* @__PURE__ */ jsx123(Badge, { variant: "success", children: "Success" }),
-          /* @__PURE__ */ jsx123(Badge, { variant: "warning", children: "Warning" }),
-          /* @__PURE__ */ jsx123(Badge, { variant: "danger", children: "Danger" }),
-          /* @__PURE__ */ jsx123(Badge, { variant: "info", children: "Info" }),
-          /* @__PURE__ */ jsx123(StatusBadge, { label: "Active", variant: "active" }),
-          /* @__PURE__ */ jsx123(StatusBadge, { label: "Pending", variant: "pending" }),
-          /* @__PURE__ */ jsx123(StatusBadge, { label: "Inactive", variant: "inactive" })
-        ] }),
-        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "20rem", className: "mt-8", children: [
-          /* @__PURE__ */ jsx123(EmptyState, { title: "No records", description: "Use empty states instead of blank panels." }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Skeleton loading", description: "Use while data is loading.", children: /* @__PURE__ */ jsxs96(Stack, { children: [
-            /* @__PURE__ */ jsx123(Skeleton, { className: "h-4 w-3/4" }),
-            /* @__PURE__ */ jsx123(Skeleton, { className: "h-4 w-1/2" }),
-            /* @__PURE__ */ jsx123(Skeleton, { className: "h-20 w-full" })
-          ] }) }),
-          /* @__PURE__ */ jsx123(KeyValueList, { density: "compact", items: [{ keyLabel: "Package", value: "@tapizlabs/ui" }, { keyLabel: "Mode", value: "Framework" }, { keyLabel: "Theme", value: "Token-first" }] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx123(DemoSection, { id: "forms", title: "Forms", description: "Controlled-ready field primitives for enterprise CRUD, settings, onboarding and import flows.", children: /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "20rem", children: [
-        /* @__PURE__ */ jsx123(SectionCard, { title: "Fields", children: /* @__PURE__ */ jsxs96(Stack, { children: [
-          /* @__PURE__ */ jsx123(FormField, { label: "Workspace name", hint: "Shown in the app shell", children: /* @__PURE__ */ jsx123(Input, { placeholder: "Tapiz Academy" }) }),
-          /* @__PURE__ */ jsx123(FormField, { label: "Role", children: /* @__PURE__ */ jsxs96(Select, { children: [
-            /* @__PURE__ */ jsx123("option", { children: "Teacher" }),
-            /* @__PURE__ */ jsx123("option", { children: "Admin" })
-          ] }) }),
-          /* @__PURE__ */ jsx123(FormField, { label: "Notes", children: /* @__PURE__ */ jsx123(Textarea, { placeholder: "Internal note" }) })
-        ] }) }),
-        /* @__PURE__ */ jsx123(SectionCard, { title: "Advanced inputs", children: /* @__PURE__ */ jsxs96(Stack, { children: [
-          /* @__PURE__ */ jsx123(InputGroup, { prefix: "https://", suffix: ".tapiz.app", children: /* @__PURE__ */ jsx123(Input, { placeholder: "school" }) }),
-          /* @__PURE__ */ jsx123(PasswordInput, { placeholder: "Password" }),
-          /* @__PURE__ */ jsx123(Slider, { label: "Automation level", valueLabel: "72%", defaultValue: 72 }),
-          /* @__PURE__ */ jsx123(ToggleGroup, { value: "monthly", options: [{ label: "Monthly", value: "monthly" }, { label: "Yearly", value: "yearly" }] }),
-          /* @__PURE__ */ jsx123(Switch, { label: "Enable notifications", checked: true }),
-          /* @__PURE__ */ jsx123(Combobox, { placeholder: "Choose workspace", options: [{ value: "academy", label: "Academy" }, { value: "enterprise", label: "Enterprise" }] }),
-          /* @__PURE__ */ jsx123(DateRangePicker, {}),
-          /* @__PURE__ */ jsx123(ColorSwatchPicker, { value: "accent", options: [{ value: "accent", label: "Accent", color: "var(--tapiz-accent)" }, { value: "success", label: "Success", color: "var(--tapiz-success)" }, { value: "warning", label: "Warning", color: "var(--tapiz-warning)" }] }),
-          /* @__PURE__ */ jsx123(RatingInput, { value: 4 })
-        ] }) }),
-        /* @__PURE__ */ jsx123(SectionCard, { title: "Upload and text area", children: /* @__PURE__ */ jsxs96(Stack, { children: [
-          /* @__PURE__ */ jsx123(FileDropzone, { title: "Import CSV", description: "Drag attendance data or click to browse." }),
-          /* @__PURE__ */ jsx123(TextareaCounter, { maxLength: 120, value: "Reusable character-count textarea for messages and descriptions.", readOnly: true })
-        ] }) })
-      ] }) }),
-      /* @__PURE__ */ jsxs96(DemoSection, { id: "data", title: "Data display", description: "Tables, charts, progress, metrics, filters and visual summaries for dense products.", children: [
-        /* @__PURE__ */ jsx123(
-          DataToolbar,
-          {
-            title: "Students",
-            description: "Search, filter and operate on tabular data.",
-            search: /* @__PURE__ */ jsx123(SearchInput, { placeholder: "Search students", value: "", onChange: () => void 0 }),
-            filters: /* @__PURE__ */ jsxs96(Fragment5, { children: [
-              /* @__PURE__ */ jsx123(FilterChip, { active: true, children: "Active" }),
-              /* @__PURE__ */ jsx123(FilterChip, { children: "Grade 8" }),
-              /* @__PURE__ */ jsx123(FilterChip, { children: "High score" })
-            ] }),
-            actions: /* @__PURE__ */ jsx123(Button, { size: "sm", children: "Export" }),
-            className: "mb-4"
-          }
-        ),
-        /* @__PURE__ */ jsx123(
-          DataTable,
-          {
-            variant: "enterprise",
-            data: demoRows,
-            rowKey: (row) => row.id,
-            columns: [
-              { id: "student", header: "Student", cell: (row) => row.student, sortAccessor: (row) => row.student },
-              { id: "status", header: "Status", cell: (row) => /* @__PURE__ */ jsx123(StatusBadge, { label: row.status, variant: row.status === "Active" ? "success" : row.status === "Pending" ? "pending" : "danger" }) },
-              { id: "score", header: "Score", cell: (row) => `${row.score}%`, align: "right", sortAccessor: (row) => row.score }
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "19rem", className: "mt-8", children: [
-          /* @__PURE__ */ jsx123(MetricCard, { label: "Attendance", value: "96.4%", trend: "+4.2%", trendTone: "positive", description: "vs last month" }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Bar list", children: /* @__PURE__ */ jsx123(BarList, { items: [{ label: "Quiz", value: 42 }, { label: "Attendance", value: 68 }, { label: "Assignments", value: 54 }] }) }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Donut", children: /* @__PURE__ */ jsx123(DonutMetric, { value: 82, label: "Completion", caption: "Average across active classes" }) }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Progress", children: /* @__PURE__ */ jsx123(Progress, { value: 64, label: "Migration" }) }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Score ring", children: /* @__PURE__ */ jsx123(ScoreRing, { value: 88, label: "quality" }) }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Heatmap", children: /* @__PURE__ */ jsx123(HeatmapGrid, { cells: Array.from({ length: 35 }, (_, index) => ({ value: index * 7 % 18, title: `Day ${index + 1}` })) }) }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Funnel", children: /* @__PURE__ */ jsx123(FunnelChart, { steps: [{ label: "Visited", value: 1200 }, { label: "Started", value: 820 }, { label: "Completed", value: 540 }] }) }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Comparison", children: /* @__PURE__ */ jsx123(ComparisonMeter, { leftLabel: "Manual", rightLabel: "Automated", value: 72 }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx123(DemoSection, { id: "navigation", title: "Navigation and disclosure", description: "Application shell, nav bars, tabs, accordion, stepper and overlays.", children: /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "23rem", children: [
-        /* @__PURE__ */ jsx123(SectionCard, { title: "App shell preview", children: /* @__PURE__ */ jsx123(
-          AppShell,
-          {
-            sidebar: /* @__PURE__ */ jsx123(SidebarNav, { groups: [{ label: "Workspace", items: [{ label: "Dashboard", active: true }, { label: "Students" }, { label: "Reports" }] }] }),
-            topbar: /* @__PURE__ */ jsx123(TopNav, { brand: "Tapiz", links: [{ label: "Docs", href: "#top" }] }),
-            children: /* @__PURE__ */ jsx123("div", { className: "p-4 text-sm text-[var(--tapiz-text-muted)]", children: "Shell content slot" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxs96(SectionCard, { title: "Tabs and accordion", children: [
-          /* @__PURE__ */ jsx123(Tabs, { activeId: "usage", variant: "boxed", items: [{ id: "usage", label: "Usage", content: "Use tabs for related panels." }, { id: "api", label: "API", content: "Prop-driven and typed." }] }),
-          /* @__PURE__ */ jsx123(Accordion, { className: "mt-4", openIds: ["one"], items: [{ id: "one", title: "Token-first", content: "No raw hex colors in application code." }, { id: "two", title: "Accessible", content: "Keyboard-friendly primitives." }] })
-        ] }),
-        /* @__PURE__ */ jsxs96(SectionCard, { title: "Stepper / overlay states", children: [
-          /* @__PURE__ */ jsx123(Stepper, { steps: [{ id: "create", label: "Create", status: "complete" }, { id: "configure", label: "Configure", status: "current" }, { id: "launch", label: "Launch", status: "upcoming" }] }),
-          /* @__PURE__ */ jsxs96(Cluster, { className: "mt-4", children: [
-            /* @__PURE__ */ jsx123(Popover, { trigger: /* @__PURE__ */ jsx123(Button, { size: "sm", children: "Popover" }), children: "Contextual content" }),
-            /* @__PURE__ */ jsx123(Drawer, { open: false, title: "Drawer", children: "Drawer content" })
-          ] }),
-          /* @__PURE__ */ jsx123(CommandMenu, { open: false, groups: [{ label: "Actions", items: [{ id: "open-dashboard", label: "Open dashboard" }, { id: "create-class", label: "Create class" }] }] })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsx123(DemoSection, { id: "feedback", title: "Feedback", description: "Alerts, callouts, notifications, health states and loading overlays.", children: /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "22rem", children: [
-        /* @__PURE__ */ jsx123(Alert2, { tone: "info", title: "Info alert", children: "Use for important inline messages." }),
-        /* @__PURE__ */ jsx123(Callout, { tone: "warning", title: "Migration warning", children: "Review token usage before publishing." }),
-        /* @__PURE__ */ jsx123(SectionCard, { title: "Notifications", children: /* @__PURE__ */ jsx123(NotificationList, { items: [{ id: "1", title: "New import completed", description: "1,204 rows processed.", time: "2m", unread: true }, { id: "2", title: "Report ready", time: "1h" }] }) }),
-        /* @__PURE__ */ jsx123(SectionCard, { title: "Health", children: /* @__PURE__ */ jsxs96(Stack, { children: [
-          /* @__PURE__ */ jsx123(HealthIndicator, { tone: "operational", detail: "99.99%" }),
-          /* @__PURE__ */ jsx123(HealthIndicator, { tone: "degraded", detail: "API latency" }),
-          /* @__PURE__ */ jsx123(HealthIndicator, { tone: "outage", detail: "1 service" }),
-          /* @__PURE__ */ jsx123(InlineStatus, { tone: "success", pulse: true, children: "Realtime sync active" })
-        ] }) }),
-        /* @__PURE__ */ jsx123(LoadingOverlay, { visible: true, label: "Syncing", children: /* @__PURE__ */ jsx123("div", { className: "h-28 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]" }) })
-      ] }) }),
-      /* @__PURE__ */ jsxs96(DemoSection, { id: "framework", title: "Framework patterns", description: "Higher-level enterprise blocks for admin panels, permissions, integrations, calendars and workflows.", children: [
-        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "23rem", children: [
-          /* @__PURE__ */ jsx123(ResourceCard, { title: "Classroom OS", eyebrow: "resource", description: "Reusable resource card for project, course, class or team entities.", status: "Live", meta: "Updated today" }),
-          /* @__PURE__ */ jsx123(IntegrationCard, { name: "Google Classroom", description: "Sync rosters and assignments.", status: "connected", lastSync: "Synced 12m ago" }),
-          /* @__PURE__ */ jsx123(AuditLog, { items: [{ actor: "Danijel", action: "updated permissions", timestamp: "09:42" }, { actor: "System", action: "synced attendance", timestamp: "09:30" }] })
-        ] }),
-        /* @__PURE__ */ jsx123(SplitPane, { className: "mt-8", primary: /* @__PURE__ */ jsx123(KanbanBoard, { columns: [{ id: "todo", title: "Todo", items: [{ id: "a", title: "Design docs page", tone: "accent" }] }, { id: "doing", title: "Doing", items: [{ id: "b", title: "Build components", tone: "warning" }] }, { id: "done", title: "Done", items: [{ id: "c", title: "Tokens", tone: "success" }] }] }), secondary: /* @__PURE__ */ jsx123(AccessMatrix, { roles: [{ key: "admin", label: "Admin" }, { key: "teacher", label: "Teacher" }], permissions: [{ key: "users", label: "Manage users", roles: { admin: true, teacher: false } }, { key: "classes", label: "Manage classes", roles: { admin: true, teacher: true } }] }) }),
-        /* @__PURE__ */ jsx123(CalendarGrid, { className: "mt-8", days: calendarDays })
-      ] }),
-      /* @__PURE__ */ jsxs96(DemoSection, { id: "advanced", title: "Advanced framework blocks", description: "More product-grade patterns for operations, approvals, feature management, usage, rails and sticky controls.", children: [
-        /* @__PURE__ */ jsx123(StickyBar, { className: "mb-6", children: /* @__PURE__ */ jsxs96(Cluster, { justify: "between", children: [
-          /* @__PURE__ */ jsx123(InlineStatus, { tone: "info", children: "Previewing max component set" }),
-          /* @__PURE__ */ jsx123(Button, { size: "sm", variant: "secondary", children: "Copy layout" })
-        ] }) }),
-        /* @__PURE__ */ jsx123(
-          SplitPane,
-          {
-            primary: /* @__PURE__ */ jsxs96(Stack, { children: [
-              /* @__PURE__ */ jsx123(ApprovalQueue, { items: [{ title: "Publish new grading rubric", requester: "Mila", priority: "high", description: "Requires admin approval before rollout." }, { title: "Invite external mentor", requester: "Vuk", priority: "medium" }] }),
-              /* @__PURE__ */ jsx123(FeatureFlagTable, { flags: [{ key: "ai.quiz", name: "AI quiz generator", description: "Enable assisted quiz creation.", enabled: true, rollout: "80%" }, { key: "reports.v2", name: "Reports v2", description: "New analytics dashboard.", enabled: false, rollout: "Beta" }] })
-            ] }),
-            secondary: /* @__PURE__ */ jsx123(PageRail, { title: "Docs rail", items: [{ label: "Forms", href: "#forms", active: true, meta: "12" }, { label: "Data", href: "#data", meta: "9" }, { label: "Framework", href: "#framework", meta: "18" }] })
-          }
-        ),
-        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "22rem", className: "mt-8", children: [
-          /* @__PURE__ */ jsx123(PlanUsage, { items: [{ label: "Seats", used: 128, limit: 200 }, { label: "Storage", used: 64, limit: 100 }, { label: "Automations", used: 18, limit: 25 }] }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "SLA", children: /* @__PURE__ */ jsxs96(Stack, { children: [
-            /* @__PURE__ */ jsx123(SLAStatus, { label: "API uptime", value: 99 }),
-            /* @__PURE__ */ jsx123(SLAStatus, { label: "Queue latency", value: 91, target: 95 })
-          ] }) }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Inbox", children: /* @__PURE__ */ jsx123(InboxList, { items: [{ title: "Import completed", sender: "System", snippet: "Attendance import finished with 0 errors.", time: "2m", unread: true, tag: "Ops" }, { title: "Teacher request", sender: "Ana", snippet: "Needs access to Grade 8 workspace.", time: "1h" }] }) }),
-          /* @__PURE__ */ jsx123(SectionCard, { title: "Activity", children: /* @__PURE__ */ jsx123(ActivityFeed, { items: [{ actor: "Danijel", action: "enabled Reports v2", time: "now" }, { actor: "System", action: "rotated API keys", time: "1h" }] }) })
-        ] }),
-        /* @__PURE__ */ jsx123(MasonryGrid, { columns: 3, className: "mt-8", children: ["Token contract", "Component variants", "Agent docs", "A11y states", "Dark mode", "Framework patterns"].map((item) => /* @__PURE__ */ jsxs96(Card, { variant: "brutal", className: "mb-5 break-inside-avoid", children: [
-          /* @__PURE__ */ jsx123("div", { className: "kicker", children: "module" }),
-          /* @__PURE__ */ jsx123("h3", { className: "mt-2 font-semibold", children: item })
-        ] }, item)) })
-      ] }),
-      /* @__PURE__ */ jsxs96(DemoSection, { id: "marketing", title: "Marketing blocks", description: "Landing-page building blocks for SaaS, education and enterprise presentation pages.", children: [
-        /* @__PURE__ */ jsx123(AnnouncementBar, { action: /* @__PURE__ */ jsx123(Button, { size: "sm", variant: "brutal", children: "Read changelog" }), children: "New Tapiz UI max component pack is available." }),
-        /* @__PURE__ */ jsxs96(FeatureGrid, { children: [
-          /* @__PURE__ */ jsx123(FeatureCard, { title: "Token architecture", description: "Centralized semantic tokens for consistent light/dark UI." }),
-          /* @__PURE__ */ jsx123(FeatureCard, { title: "Framework blocks", description: "Move faster with app shell, tables, forms and overlays." }),
-          /* @__PURE__ */ jsx123(FeatureCard, { title: "Brutal enterprise", description: "Strong borders, sharp rhythm and professional hierarchy." })
-        ] }),
-        /* @__PURE__ */ jsx123(StatsBand, { className: "mt-8", items: [{ value: "80+", label: "Components" }, { value: "2", label: "Themes" }, { value: "0", label: "App deps" }] }),
-        /* @__PURE__ */ jsx123(LogoCloud, { className: "mt-8", title: "Works for product surfaces", items: [{ name: "Dashboard" }, { name: "Admin" }, { name: "Landing" }, { name: "Docs" }, { name: "Forms" }, { name: "Data" }] }),
-        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "20rem", className: "mt-8", children: [
-          /* @__PURE__ */ jsx123(TestimonialCard, { quote: "Tapiz UI gives the product an instant enterprise backbone.", author: "Design Lead", role: "Tapiz Labs" }),
-          /* @__PURE__ */ jsx123(PricingCard, { name: "Framework", price: "\u20AC0", highlighted: true, features: ["Token system", "Components", "Docs page"] }),
-          /* @__PURE__ */ jsx123(ComparisonTable, { includedHeader: "Tapiz", alternativeHeader: "Ad-hoc UI", rows: [{ feature: "Light/dark", included: "Yes", alternative: "Manual" }, { feature: "Agent docs", included: "Included", alternative: "No" }] })
-        ] }),
-        /* @__PURE__ */ jsx123(RoadmapList, { className: "mt-8", items: [{ quarter: "Q1", title: "Core framework", status: "Done", description: "Shell, nav, forms and table primitives." }, { quarter: "Q2", title: "Analytics blocks", status: "Now", description: "Charts, status and operational views." }, { quarter: "Q3", title: "AI workflows", status: "Next", description: "Agent-ready docs and generated screens." }] }),
-        /* @__PURE__ */ jsx123(FAQSection, { className: "mt-8", description: "Common framework usage questions.", items: [{ question: "Can this be used outside Tapiz?", answer: "Yes. Components are generic and token-driven." }, { question: "Does it require app router?", answer: "No. The package avoids app-specific dependencies." }] }),
-        /* @__PURE__ */ jsx123(CTASection, { className: "mt-8", eyebrow: "Ready", title: "Build with Tapiz UI", description: "Copy this page into your docs app or export TapizDocsPage from the package.", actions: /* @__PURE__ */ jsx123(Button, { variant: "primary", children: "Use framework" }) })
-      ] }),
-      /* @__PURE__ */ jsx123(DemoSection, { id: "code", title: "Usage snippets", description: "Copyable examples for agents and developers.", children: /* @__PURE__ */ jsx123(CodeBlock, { language: "tsx", children: `import { TapizDocsPage } from "@tapizlabs/ui";
-import "@tapizlabs/ui/theme.css";
-
-export default function Docs() {
-  return <TapizDocsPage />;
-}` }) })
-    ] })
-  ] });
-}
 export {
   AccessMatrix,
   Accordion,
@@ -3975,7 +3643,6 @@ export {
   Table,
   Tablet,
   Tabs,
-  TapizDocsPage,
   TestimonialCard,
   TextIcon,
   Textarea,