@vadimcomanescu/nadicode-design-system 4.0.11 → 5.0.0

package/dist/chunk-P7CTBRHO.js

@@ -0,0 +1,176 @@
+import { Typography } from './chunk-Q7PCHHVJ.js';
+import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from './chunk-2BADJLMV.js';
+import { Heading } from './chunk-UXX6HHPS.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-PXDHNGTG.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-4TF4QFIM.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-7UY24UWL.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var EMPTY_COLUMNS = [];
+var EMPTY_ROWS = [];
+var EMPTY_FILTERS = [];
+function deriveRowLabel(row, columns) {
+  if (row.summaryLabel) return row.summaryLabel;
+  const firstColumn = columns[0];
+  if (!firstColumn) return row.id;
+  const firstCellValue = row.cells[firstColumn.id];
+  return firstCellValue ?? row.id;
+}
+function deriveState(state, rows, selectedRowId) {
+  if (state) return state;
+  if (rows.length === 0) return "empty";
+  if (selectedRowId) return "selected-row";
+  return "has-data";
+}
+function clampPage(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function CrudListBlock({
+  props,
+  emit,
+  children
+}) {
+  const title = props.title;
+  const description = props.description;
+  const columns = props.columns ?? EMPTY_COLUMNS;
+  const rows = props.rows ?? EMPTY_ROWS;
+  const selectedRowId = props.selectedRowId ?? null;
+  const filterControls = props.filterControls ?? EMPTY_FILTERS;
+  const pagination = props.pagination;
+  const errorMessage = props.errorMessage ?? null;
+  const emptyTitle = props.emptyTitle ?? "No rows to display";
+  const emptyDescription = props.emptyDescription ?? "Create a new entry or adjust filters.";
+  const className = props.className;
+  const resolvedState = deriveState(props.state, rows, selectedRowId);
+  const pages = useMemo(() => {
+    const totalPages = Math.max(1, pagination.totalPages);
+    const currentPage = clampPage(pagination.page, 1, totalPages);
+    const visible = 5;
+    const half = Math.floor(visible / 2);
+    let start = Math.max(1, currentPage - half);
+    const end = Math.min(totalPages, start + visible - 1);
+    if (end - start < visible - 1) {
+      start = Math.max(1, end - visible + 1);
+    }
+    return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+  }, [pagination.page, pagination.totalPages]);
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    title || description ? /* @__PURE__ */ jsxs("header", { className: "space-y-1", children: [
+      title ? /* @__PURE__ */ jsx(Heading, { level: 3, children: title }) : null,
+      description ? /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description }) : null
+    ] }) : null,
+    filterControls.length > 0 ? /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Filters" }) }),
+      /* @__PURE__ */ jsx(CardContent, { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3", children: filterControls.map((filter) => /* @__PURE__ */ jsxs("label", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-medium", children: filter.label }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": filter.label,
+            value: filter.value,
+            placeholder: filter.placeholder ?? void 0,
+            onChange: () => emit("filterChange")
+          }
+        )
+      ] }, filter.id)) })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      resolvedState === "loading" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Loading list data" }) : null,
+      resolvedState === "error" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+          children: errorMessage ?? "The list is unavailable. Retry once the data source recovers."
+        }
+      ) : null,
+      (resolvedState === "empty" || resolvedState === "filtered") && rows.length === 0 ? /* @__PURE__ */ jsxs(Empty, { children: [
+        /* @__PURE__ */ jsx(EmptyTitle, { children: emptyTitle }),
+        /* @__PURE__ */ jsx(EmptyDescription, { children: emptyDescription })
+      ] }) : null,
+      rows.length > 0 ? /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto min-w-[600px]", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(TableHead, { children: column.header }, column.id)) }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
+          const rowLabel = deriveRowLabel(row, columns);
+          return /* @__PURE__ */ jsx(
+            TableRow,
+            {
+              className: cn(
+                selectedRowId === row.id ? "bg-surface-secondary/70" : void 0
+              ),
+              children: columns.map((column, columnIndex) => {
+                const cell = row.cells[column.id] ?? "-";
+                if (columnIndex === 0) {
+                  return /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      className: "h-auto p-0 font-normal",
+                      onClick: () => emit("rowSelect"),
+                      "aria-label": `Select ${rowLabel}`,
+                      children: cell
+                    }
+                  ) }, column.id);
+                }
+                return /* @__PURE__ */ jsx(TableCell, { children: cell }, column.id);
+              })
+            },
+            row.id
+          );
+        }) })
+      ] }) }) }) }) : null,
+      /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+        /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+          PaginationPrevious,
+          {
+            href: "#",
+            onClick: (event) => {
+              event.preventDefault();
+              if (pagination.page > 1) {
+                emit("pageChange");
+              }
+            },
+            "aria-disabled": pagination.page <= 1,
+            className: pagination.page <= 1 ? "pointer-events-none opacity-50" : void 0
+          }
+        ) }),
+        pages.map((page) => /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+          PaginationLink,
+          {
+            href: "#",
+            isActive: page === pagination.page,
+            onClick: (event) => {
+              event.preventDefault();
+              emit("pageChange");
+            },
+            children: page
+          }
+        ) }, page)),
+        /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+          PaginationNext,
+          {
+            href: "#",
+            onClick: (event) => {
+              event.preventDefault();
+              if (pagination.page < pagination.totalPages) {
+                emit("pageChange");
+              }
+            },
+            "aria-disabled": pagination.page >= pagination.totalPages,
+            className: pagination.page >= pagination.totalPages ? "pointer-events-none opacity-50" : void 0
+          }
+        ) })
+      ] }) })
+    ] }),
+    resolvedState === "selected-row" && children ? /* @__PURE__ */ jsx("aside", { className: "space-y-4", children: /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Detail" }) }),
+      /* @__PURE__ */ jsx(CardContent, { children })
+    ] }) }) : null
+  ] });
+}
+
+export { CrudListBlock };

package/dist/chunk-P7JS4B7U.js

@@ -0,0 +1,101 @@
+import { z } from 'zod';
+
+// src/catalog/definitions/layout.ts
+var layoutDefinitions = {
+  AspectRatio: {
+    props: z.object({
+      ratio: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Radix aspect-ratio container. ratio controls the width/height aspect ratio (e.g. 16/9). Children fill the container.",
+    example: { ratio: 16 / 9, className: null }
+  },
+  BentoGrid: {
+    props: z.object({
+      columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).nullable()
+    }),
+    slots: ["default"],
+    description: "Animated CSS grid for bento-style card layouts. Children appear with staggered ScrollFadeIn entrance. columns controls the column count (2/3/4, default 3).",
+    example: { columns: 3 }
+  },
+  Card: {
+    props: z.object({
+      interactive: z.boolean().nullable(),
+      accentBorder: z.enum(["left", "top"]).nullable(),
+      hoverGlow: z.boolean().nullable(),
+      showBrackets: z.boolean().nullable()
+    }),
+    slots: ["default"],
+    description: "Glass-panel card container. interactive enables spring hover lift. accentBorder adds a 3 px accent-coloured border on the left or top edge. hoverGlow adds a glow shadow on hover. showBrackets renders corner bracket decorations.",
+    example: { interactive: true, accentBorder: "left", hoverGlow: false, showBrackets: null }
+  },
+  Collapsible: {
+    props: z.object({
+      open: z.boolean().nullable(),
+      defaultOpen: z.boolean().nullable()
+    }),
+    slots: ["trigger", "content"],
+    events: ["openChange"],
+    description: "Radix Collapsible root that toggles visibility of its content. Compose with CollapsibleTrigger and CollapsibleContent sub-components.",
+    example: { open: null, defaultOpen: true }
+  },
+  Grid: {
+    props: z.object({
+      cols: z.union([
+        z.literal(1),
+        z.literal(2),
+        z.literal(3),
+        z.literal(4)
+      ]).nullable(),
+      gap: z.enum(["sm", "md", "lg", "xl"]).nullable()
+    }),
+    slots: ["default"],
+    description: "Responsive CSS grid utility. cols maps to responsive grid-cols breakpoints (1 \u2192 single, 4 \u2192 2-col md / 4-col lg). gap maps to gap-2/4/8/12. Defaults: cols 1, gap md.",
+    example: { cols: 3, gap: "md" }
+  },
+  Resizable: {
+    props: z.object({
+      direction: z.enum(["horizontal", "vertical"]).nullable()
+    }),
+    slots: ["default"],
+    description: "react-resizable-panels wrapper. Compose with ResizablePanel and ResizableHandle sub-components. direction defaults to horizontal.",
+    example: { direction: "horizontal" }
+  },
+  ScrollArea: {
+    props: z.object({
+      orientation: z.enum(["horizontal", "vertical"]).nullable()
+    }),
+    slots: ["default"],
+    description: "Radix ScrollArea with a styled scrollbar. orientation controls which ScrollBar is shown (default vertical). Content overflows within the bounded container.",
+    example: { orientation: "vertical" }
+  },
+  Separator: {
+    props: z.object({
+      orientation: z.enum(["horizontal", "vertical"]).nullable()
+    }),
+    description: "Thin divider line. orientation horizontal renders a full-width 1 px rule; vertical renders a full-height 1 px rule. Defaults to horizontal.",
+    example: { orientation: "horizontal" }
+  },
+  Tabs: {
+    props: z.object({
+      items: z.array(z.object({ value: z.string(), label: z.string() })).nullable(),
+      defaultValue: z.string().nullable(),
+      value: z.string().nullable()
+    }),
+    slots: ["default"],
+    events: ["valueChange"],
+    description: "Animated Radix Tabs with spring-based active-tab indicator. items generates the trigger list. Tab panel content is passed in the default slot keyed by item.value. value enables controlled mode. Fires valueChange on tab switch.",
+    example: {
+      items: [
+        { value: "overview", label: "Overview" },
+        { value: "analytics", label: "Analytics" },
+        { value: "settings", label: "Settings" }
+      ],
+      defaultValue: "overview",
+      value: null
+    }
+  }
+};
+
+export { layoutDefinitions };

package/dist/{chunk-FODQX5Q5.js → chunk-PD6WW7E5.js}

@@ -5,19 +5,17 @@ import { siteConfig } from './chunk-A7NUWD76.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var defaultStats = [
-  { value: 1200, label: "Stars on GitHub", prefix: "+" },
-  { value: 22, label: "Active Users", suffix: " Million" },
-  { value: 500, label: "Powered Apps", prefix: "+" }
+  { value: 1200, label: "Stars on GitHub", prefix: "+", suffix: null },
+  { value: 22, label: "Active Users", suffix: " Million", prefix: null },
+  { value: 500, label: "Powered Apps", prefix: "+", suffix: null }
 ];
 var defaultTitle = `${siteConfig.name} in numbers`;
 var defaultDescription = `The numbers speak for themselves. ${siteConfig.name} powers the next generation of AI interfaces with premium design tokens, glass effects, and accessible components.`;
-function StatsMarketingBlock({
-  title = defaultTitle,
-  description = defaultDescription,
-  stats = defaultStats,
-  className
-}) {
-  return /* @__PURE__ */ jsx("section", { className: className ?? "py-12 md:py-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl space-y-8 px-6 md:space-y-16", children: [
+function StatsMarketingBlock({ props }) {
+  const title = props.title ?? defaultTitle;
+  const description = props.description ?? defaultDescription;
+  const stats = props.stats ?? defaultStats;
+  return /* @__PURE__ */ jsx("section", { className: "py-12 md:py-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl space-y-8 px-6 md:space-y-16", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative z-10 mx-auto max-w-xl space-y-6 text-center", children: [
       /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-4xl lg:text-5xl", children: title }),
       /* @__PURE__ */ jsx("p", { className: "text-text-secondary", children: description })

package/dist/chunk-PJ7DVYWA.js

@@ -0,0 +1,185 @@
+import { Typography } from './chunk-Q7PCHHVJ.js';
+import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger } from './chunk-4DWRAIM2.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-4TF4QFIM.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-7UY24UWL.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { useMotionConfig, motionSpring } from './chunk-PD2YEH3H.js';
+import { LayoutDashboardIcon } from './chunk-O74AEVHW.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { AnimatePresence, m } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function resolveActiveSection(sections, activeSectionId) {
+  const directMatch = sections.find(
+    (section) => section.id === activeSectionId && section.isAvailable !== false
+  );
+  if (directMatch) return directMatch;
+  const firstAvailable = sections.find(
+    (section) => section.isAvailable !== false
+  );
+  if (firstAvailable) return firstAvailable;
+  return sections[0] ?? null;
+}
+function SettingsNavBlock({
+  props,
+  emit,
+  children
+}) {
+  const title = props.title ?? "Settings";
+  const subtitle = props.subtitle ?? "Manage your preferences";
+  const sections = props.sections;
+  const activeSectionId = props.activeSectionId;
+  const saveState = props.saveState ?? "default";
+  const validationMessage = props.validationMessage;
+  const fatalErrorMessage = props.fatalErrorMessage;
+  const savedMessage = props.savedMessage ?? "Changes saved successfully.";
+  const saveLabel = props.saveLabel ?? "Save changes";
+  const discardLabel = props.discardLabel ?? "Discard";
+  const className = props.className;
+  const motionConfig = useMotionConfig();
+  const activeSection = resolveActiveSection(sections, activeSectionId);
+  const isBusy = saveState === "saving" || saveState === "loading";
+  const showActions = saveState !== "default" && saveState !== "loading";
+  return /* @__PURE__ */ jsx(
+    SidebarProvider,
+    {
+      className: cn(
+        "h-[800px] w-full glass-panel rounded-xl overflow-hidden shadow-2xl",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "h-full w-full bg-background flex", children: [
+        /* @__PURE__ */ jsxs(
+          Sidebar,
+          {
+            collapsible: "none",
+            className: "hidden sm:flex w-64 border-r border-border",
+            children: [
+              /* @__PURE__ */ jsx(SidebarHeader, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-glow", children: /* @__PURE__ */ jsx(LayoutDashboardIcon, { size: 16 }) }),
+                /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: title }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-text-secondary", children: subtitle })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx(SidebarContent, { className: "px-2", children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { className: "space-y-1.5", children: sections.map((section) => {
+                const isUnavailable = section.isAvailable === false;
+                const isActive = activeSection?.id === section.id;
+                return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+                  /* @__PURE__ */ jsxs(
+                    SidebarMenuButton,
+                    {
+                      isActive,
+                      onClick: () => {
+                        if (!isUnavailable && section.id !== activeSection?.id) {
+                          emit("sectionChange");
+                        }
+                      },
+                      className: "justify-between",
+                      disabled: isUnavailable,
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: section.label }),
+                        section.badge ? /* @__PURE__ */ jsx(
+                          Badge,
+                          {
+                            variant: "accent",
+                            className: "h-5 px-1.5 text-[10px]",
+                            children: section.badge
+                          }
+                        ) : null
+                      ]
+                    }
+                  ),
+                  isUnavailable && section.unavailableReason ? /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "small",
+                      className: "px-2 text-text-tertiary",
+                      children: section.unavailableReason
+                    }
+                  ) : null
+                ] }, section.id);
+              }) }) }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("main", { className: "flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-center border-b border-border px-4 py-3", children: [
+            /* @__PURE__ */ jsx(SidebarTrigger, {}),
+            /* @__PURE__ */ jsx("span", { className: "ml-2 text-sm font-medium text-text-primary", children: "Settings" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto p-8 space-y-4", children: [
+            saveState === "loading" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Loading settings content" }) : null,
+            saveState === "dirty" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Unsaved changes" }) : null,
+            saveState === "saving" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Saving changes..." }) : null,
+            saveState === "saved" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-success", children: savedMessage }) : null,
+            saveState === "validation-error" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "alert",
+                className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+                children: validationMessage ?? "Please resolve validation errors before saving."
+              }
+            ) : null,
+            saveState === "fatal-error" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "alert",
+                className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+                children: fatalErrorMessage ?? "Settings failed to load. Retry or contact support."
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+              m.div,
+              {
+                initial: { opacity: 0, y: 8 },
+                animate: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: -8 },
+                transition: { ...motionSpring.snappy, ...motionConfig },
+                children: /* @__PURE__ */ jsxs(Card, { children: [
+                  /* @__PURE__ */ jsxs(CardHeader, { children: [
+                    /* @__PURE__ */ jsx(CardTitle, { children: activeSection?.label ?? "Settings section" }),
+                    activeSection?.description ? /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "small",
+                        className: "text-text-secondary",
+                        children: activeSection.description
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ jsx(CardContent, { children: children ?? (activeSection?.description ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: activeSection.description }) : /* @__PURE__ */ jsxs(Empty, { children: [
+                    /* @__PURE__ */ jsx(EmptyTitle, { children: "No content" }),
+                    /* @__PURE__ */ jsx(EmptyDescription, { children: "Use the sectionContent slot to provide settings content." })
+                  ] })) })
+                ] })
+              },
+              activeSection?.id ?? "empty"
+            ) }),
+            showActions ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  onClick: () => emit("discard"),
+                  disabled: isBusy,
+                  children: discardLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: () => emit("save"),
+                  disabled: isBusy,
+                  children: saveLabel
+                }
+              )
+            ] }) : null
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { SettingsNavBlock };

package/dist/{chunk-OTZIMMPV.js → chunk-PQBVNNEG.js}

@@ -20,17 +20,20 @@ var defaultPlans = [
     period: "/forever",
     features: ["1,000 requests/mo", "Community support", "1 project", "Basic analytics"],
     action: "Get Started",
-    variant: "outline"
+    variant: "outline",
+    popular: null,
+    badge: null
   },
   {
     name: "Pro",
     description: "For professional developers and small teams.",
-    price: (isYearly) => isYearly ? "$29" : "$39",
+    price: "$39",
     period: "/month",
     features: ["100,000 requests/mo", "Priority support", "Unlimited projects", "Advanced analytics", "Custom domains"],
     action: "Upgrade to Pro",
     variant: "accent",
-    popular: true
+    popular: true,
+    badge: null
   },
   {
     name: "Enterprise",
@@ -39,22 +42,19 @@ var defaultPlans = [
     period: "",
     features: ["Unlimited requests", "24/7 Dedicated support", "SSO & Audit logs", "SLA guarantees", "On-premise deployment"],
     action: "Contact Sales",
-    variant: "outline"
+    variant: "outline",
+    popular: null,
+    badge: null
   }
 ];
-function resolvePrice(price, isYearly) {
-  return typeof price === "function" ? price(isYearly) : price;
-}
-function PricingBlock({
-  title = "Simple, transparent pricing",
-  description = "Choose the plan that's right for you. Change or cancel anytime.",
-  plans = defaultPlans,
-  showBillingToggle = true,
-  className
-}) {
+function PricingBlock({ props, emit }) {
+  const title = props.title ?? "Simple, transparent pricing";
+  const description = props.description ?? "Choose the plan that's right for you. Change or cancel anytime.";
+  const plans = props.plans ?? defaultPlans;
+  const showBillingToggle = props.showBillingToggle ?? true;
   const t = useTranslations("blocks.pricingBlock");
   const [isYearly, setIsYearly] = useState(false);
-  return /* @__PURE__ */ jsx("section", { className: className ?? "py-16 md:py-24", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-6 lg:px-8", children: [
+  return /* @__PURE__ */ jsx("section", { className: "py-16 md:py-24", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-6 lg:px-8", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
       /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "mb-4 sm:text-4xl", children: title }),
       /* @__PURE__ */ jsx("p", { className: "mb-8 text-lg text-text-secondary", children: description }),
@@ -69,7 +69,7 @@ function PricingBlock({
       ] })
     ] }),
     /* @__PURE__ */ jsx(StaggerChildren, { staggerMs: 120, className: "grid gap-8 md:grid-cols-3", children: plans.map((plan) => {
-      const priceStr = resolvePrice(plan.price, isYearly);
+      const priceStr = plan.price;
       const card = /* @__PURE__ */ jsxs(
         Card,
         {
@@ -79,7 +79,7 @@ function PricingBlock({
             plan.popular ? "border-accent shadow-lg shadow-accent/5 z-10" : "border-border/50 hover:border-border"
           ),
           children: [
-            plan.popular && /* @__PURE__ */ jsx("div", { className: "absolute -top-4 left-0 ring-0 w-full flex justify-center", children: /* @__PURE__ */ jsx(Badge, { variant: "accent", className: "shadow-lg", children: t("mostPopular") }) }),
+            (plan.popular || plan.badge) && /* @__PURE__ */ jsx("div", { className: "absolute -top-4 left-0 ring-0 w-full flex justify-center", children: /* @__PURE__ */ jsx(Badge, { variant: "accent", className: "shadow-lg", children: plan.badge ?? t("mostPopular") }) }),
             /* @__PURE__ */ jsxs(CardHeader, { className: "pb-8 pt-8", children: [
               /* @__PURE__ */ jsx(CardTitle, { className: "text-xl font-semibold text-text-primary", children: plan.name }),
               /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: plan.description })
@@ -97,7 +97,7 @@ function PricingBlock({
                 feature
               ] }, feature)) })
             ] }),
-            /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { className: "w-full", variant: plan.variant, children: plan.action }) })
+            /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { className: "w-full", variant: plan.variant, onClick: () => emit("selectPlan"), children: plan.action }) })
           ]
         },
         plan.name

package/dist/chunk-PY7WBWKH.js

@@ -0,0 +1,37 @@
+import { GripVerticalIcon } from './chunk-WXVNTJIB.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { jsx } from 'react/jsx-runtime';
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Group,
+    {
+      className: cn("flex h-full w-full", className),
+      ...props
+    }
+  );
+}
+var ResizablePanel = ResizablePrimitive.Panel;
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Separator,
+    {
+      className: cn(
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-y-0",
+        className
+      ),
+      ...props,
+      children: !!withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVerticalIcon, { size: 10 }) })
+    }
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };