@revealui/presentation 0.2.0 → 0.3.0

package/README.md

@@ -1,65 +1,169 @@
 # @revealui/presentation
 
-Shared UI components and presentation layer for RevealUI applications.
+50+ native UI components for RevealUI — built with React 19, Tailwind CSS v4, and CVA. Zero external UI library dependencies (only clsx + class-variance-authority).
 
-## Purpose
+## Features
 
-This package provides reusable UI components that can be shared across multiple apps in the RevealUI monorepo. It serves as the design system foundation for consistent UI across:
+- **48 Components** — Forms, data display, feedback, navigation, media, and layout
+- **6 Primitives** — Low-level building blocks (Box, Flex, Grid, Heading, Text, Slot)
+- **14 Hooks** — Focus trap, click outside, popover, roving tabindex, scroll lock, and more
+- **Headless + Styled** — Many components ship both unstyled (headless) and styled (CVA) variants
+- **Accessible** — WCAG 2.1 patterns with proper ARIA attributes
+- **React 19** — Server components, hooks, and modern patterns
+- **Tailwind CSS v4** — Native v4 utility classes, no v3 compat layer
 
-- `apps/cms` - CMS admin interface
-- `apps/mainframe` - Public-facing web application
-- Future applications
+## Installation
 
-## Structure
-
-```
-packages/presentation/
-├── src/
-│   ├── components/      # High-level, styled components
-│   ├── primitives/     # Low-level, base components
-│   └── index.ts        # Main entry point
-├── package.json
-├── tsconfig.json
-└── README.md
+```bash
+pnpm add @revealui/presentation
 ```
 
 ## Usage
 
-### In Apps
-
 ```typescript
-// Import from the package
-import { Button, Card } from '@revealui/presentation';
-
-// Or import specific modules
-import { Button } from '@revealui/presentation/components';
+import { Button, Card, Input, Badge } from '@revealui/presentation'
+import { Box, Flex } from '@revealui/presentation/primitives'
+import { useClickOutside, useFocusTrap } from '@revealui/presentation/hooks'
 ```
 
-### Adding New Components
-
-1. Create component in `src/components/` or `src/primitives/`
-2. Export from the respective `index.ts` file
-3. Re-export from main `src/index.ts` if needed
-4. Build: `pnpm --filter @revealui/presentation build`
-
-## Guidelines
-
-- **Components**: High-level, styled, feature-complete components
-- **Primitives**: Low-level, unstyled/minimally styled building blocks
-- Use TypeScript for all components
-- Follow React 19 patterns
-- Support Tailwind CSS 4.0
-- Ensure accessibility (WCAG 2.1)
+## Components (48)
+
+### Layout
+| Component | Description |
+|-----------|-------------|
+| AuthLayout | Authentication page layout |
+| SidebarLayout | Sidebar + content layout |
+| StackedLayout | Stacked page layout |
+| Navbar | Top navigation bar |
+| Sidebar | Side navigation |
+
+### Form Controls
+| Component | Description |
+|-----------|-------------|
+| Button / ButtonCVA | Action trigger (headless + styled) |
+| Input / InputCVA | Text input (headless + styled) |
+| Textarea / TextareaCVA | Multi-line text (headless + styled) |
+| Checkbox / CheckboxCVA | Checkbox (headless + styled) |
+| Select / SelectCVA | Dropdown select with subcomponents |
+| Combobox | Searchable select |
+| Listbox | List selection |
+| Radio | Radio group |
+| Switch | Toggle switch |
+| Label / FormLabel | Form labels |
+| Fieldset | Form field grouping |
+
+### Data Display
+| Component | Description |
+|-----------|-------------|
+| Card | Content container (header, title, description, content, footer) |
+| Table | Data table |
+| Pagination | Page navigation |
+| Badge | Status indicator |
+| Text | Styled text |
+| Heading | Section heading |
+| Divider | Horizontal rule |
+| DescriptionList | Key-value pairs |
+| Breadcrumb | Navigation trail |
+
+### Feedback
+| Component | Description |
+|-----------|-------------|
+| Alert | Inline alert message |
+| Callout | Highlighted information |
+| Toast | Temporary notification (with provider + hook) |
+| Tooltip | Hover information |
+| Progress | Progress bar |
+| Slider | Range input |
+| Skeleton | Loading placeholder |
+| EmptyState | No-data placeholder |
+| Stat | Metric display (with StatGroup) |
+| Rating | Star rating |
+
+### Navigation
+| Component | Description |
+|-----------|-------------|
+| Accordion | Collapsible sections |
+| Tabs | Tab panels |
+| Stepper | Step-by-step progress |
+| Timeline | Chronological events |
+| Dropdown | Action menu |
+| Drawer | Slide-out panel |
+| Dialog | Modal dialog |
+
+### Media & Misc
+| Component | Description |
+|-----------|-------------|
+| Avatar / AvatarGroup | User avatars |
+| CodeBlock | Syntax-highlighted code |
+| Kbd / KbdShortcut | Keyboard shortcut display |
+| Link | Styled anchor |
+
+## Primitives (6)
+
+| Primitive | Description |
+|-----------|-------------|
+| Box | Generic container |
+| Flex | Flexbox layout |
+| Grid | CSS Grid layout |
+| Heading | Semantic heading |
+| Text | Text content |
+| Slot | Component composition utility |
+
+## Hooks (14)
+
+| Hook | Purpose |
+|------|---------|
+| useClickOutside | Detect clicks outside an element |
+| useCloseContext | Shared close handler context |
+| useControllableState | Controlled/uncontrolled state |
+| useDataInteractive | Interactive element data attributes |
+| useEscapeKey | Escape key handler |
+| useFieldContext | Form field context (label, error, description) |
+| useFocusTrap | Trap focus within an element |
+| useLayoutAnimation | Animated layout transitions |
+| usePopover | Popover positioning |
+| useRovingTabindex | Keyboard navigation in groups |
+| useScrollLock | Prevent body scroll |
+| useToggle | Boolean toggle state |
+| useTransition | CSS transitions |
+| useTypeAhead | Type-ahead search in lists |
+
+## Exports
+
+| Subpath | Contents |
+|---------|----------|
+| `@revealui/presentation` | All components, primitives, and hooks |
+| `@revealui/presentation/server` | Server components |
+| `@revealui/presentation/client` | Client components |
+| `@revealui/presentation/components` | Components only |
+| `@revealui/presentation/primitives` | Primitives only |
+| `@revealui/presentation/hooks` | Hooks only |
 
 ## Development
 
 ```bash
 # Build
-pnpm --filter @revealui/presentation build
+pnpm build
 
 # Type check
-pnpm --filter @revealui/presentation typecheck
+pnpm typecheck
 
 # Watch mode
-pnpm --filter @revealui/presentation dev
+pnpm dev
 ```
+
+## Adding Components
+
+1. Create component in `src/components/` (styled) or `src/primitives/` (unstyled)
+2. Export from the respective `index.ts`
+3. Use CVA for variant-based styling
+4. Follow WCAG 2.1 accessibility patterns
+
+## Related
+
+- [Core Package](../core/README.md) — CMS engine (uses presentation components)
+- [Architecture Guide](../../docs/ARCHITECTURE.md)
+
+## License
+
+MIT

package/dist/Box-DC3F8eRf.js

@@ -0,0 +1,430 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config) => (props) => {
+  var _config_compoundVariants;
+  if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key, value] = param;
+    if (value === void 0) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs.flat()) {
+    if (!input) continue;
+    if (typeof input === "string" || typeof input === "number") {
+      classes.push(String(input));
+      continue;
+    }
+    if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ").trim();
+}
+function Slot({ children, asChild, ref, ...slotProps }) {
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...slotProps,
+      ...children.props,
+      ref
+    });
+  }
+  return /* @__PURE__ */ jsx("div", { ...slotProps, ref, children });
+}
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    },
+    variants: {
+      size: {
+        clear: "",
+        default: "h-10 px-4 py-2",
+        icon: "size-10",
+        lg: "h-11 rounded px-8",
+        sm: "h-9 rounded px-3"
+      },
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        ghost: "hover:bg-card hover:text-accent-foreground",
+        link: "text-primary items-start justify-start underline-offset-4 hover:underline",
+        outline: "border border-border bg-background hover:bg-card hover:text-accent-foreground",
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+      }
+    }
+  }
+);
+function Button({ asChild = false, className, size, variant, ref, ...props }) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ className, size, variant })), ref, ...props });
+}
+const ChevronLeft = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      stroke: "currentColor",
+      className: cn("size-6", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Previous page" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5 8.25 12l7.5-7.5" })
+      ]
+    }
+  );
+};
+const ChevronRight = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 1.5,
+      stroke: "currentColor",
+      className: cn("size-6", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Next page" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" })
+      ]
+    }
+  );
+};
+const MoreHorizontal = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 6",
+      className: cn("size-6", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "More pages" }),
+        /* @__PURE__ */ jsx("circle", { cx: "6", cy: "3", r: "3", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "3", r: "3", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "18", cy: "3", r: "3", fill: "currentColor" })
+      ]
+    }
+  );
+};
+const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "nav",
+  {
+    "aria-label": "pagination",
+    className: cn("mx-auto flex w-full justify-center", className),
+    ...props
+  }
+);
+function PaginationContent({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-row items-center gap-1", className), ref, ...props });
+}
+function PaginationItem({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("li", { className: cn("", className), ref, ...props });
+}
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  disabled,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    "aria-current": isActive ? "page" : void 0,
+    "aria-disabled": disabled ? true : void 0,
+    disabled,
+    className: cn(
+      buttonVariants({
+        size,
+        variant: isActive ? "outline" : "ghost"
+      }),
+      className
+    ),
+    ...props
+  }
+);
+const PaginationPrevious = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to previous page",
+    className: cn("gap-1 pl-2.5", className),
+    size: "default",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }),
+      /* @__PURE__ */ jsx("span", { children: "Previous" })
+    ]
+  }
+);
+const PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to next page",
+    className: cn("gap-1 pr-2.5", className),
+    size: "default",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { children: "Next" }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+    ]
+  }
+);
+const PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    "aria-hidden": true,
+    className: cn("flex h-9 w-9 items-center justify-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+    ]
+  }
+);
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "h-4 w-4 shrink-0 text-blue-600 mt-0.5",
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function PricingTable({
+  tiers,
+  currentTier,
+  compact = false,
+  onSelectTier,
+  className
+}) {
+  if (compact) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", className), children: tiers.map((tier) => /* @__PURE__ */ jsx(
+      PricingCardCompact,
+      {
+        tier,
+        isCurrent: tier.id === currentTier,
+        onSelect: onSelectTier
+      },
+      tier.id
+    )) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4",
+        tiers.length === 3 && "lg:grid-cols-3",
+        tiers.length === 2 && "lg:grid-cols-2 max-w-3xl mx-auto",
+        className
+      ),
+      children: tiers.map((tier) => /* @__PURE__ */ jsx(
+        PricingCardFull,
+        {
+          tier,
+          isCurrent: tier.id === currentTier,
+          onSelect: onSelectTier
+        },
+        tier.id
+      ))
+    }
+  );
+}
+function PricingCardFull({
+  tier,
+  isCurrent,
+  onSelect
+}) {
+  const isHighlighted = tier.highlighted && !isCurrent;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative rounded-2xl bg-white p-8 shadow-lg dark:bg-zinc-900",
+        isHighlighted ? "ring-2 ring-blue-600" : isCurrent ? "ring-2 ring-emerald-500" : "ring-1 ring-zinc-200 dark:ring-zinc-800"
+      ),
+      children: [
+        isHighlighted && /* @__PURE__ */ jsx("div", { className: "absolute -top-4 left-0 right-0 mx-auto w-32 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 px-3 py-1.5 text-sm font-semibold text-white text-center shadow-lg", children: "Most Popular" }),
+        isCurrent && /* @__PURE__ */ jsx("div", { className: "absolute -top-4 left-0 right-0 mx-auto w-32 rounded-full bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white text-center shadow-lg", children: "Current Plan" }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold tracking-tight text-zinc-900 dark:text-white", children: tier.name }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-zinc-600 dark:text-zinc-400", children: tier.description }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-6 flex items-baseline gap-x-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold tracking-tight text-zinc-900 dark:text-white", children: tier.price ?? "—" }),
+            tier.period && /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: tier.period })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "mb-8 space-y-3", children: tier.features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-x-3", children: [
+          /* @__PURE__ */ jsx(CheckIcon, {}),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: feature })
+        ] }, feature)) }),
+        onSelect ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect(tier.id),
+            disabled: isCurrent,
+            className: cn(
+              "block w-full rounded-md px-6 py-3 text-center text-sm font-semibold transition-colors",
+              isCurrent ? "cursor-default bg-emerald-50 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400" : isHighlighted ? "bg-blue-600 text-white hover:bg-blue-500 shadow-sm" : "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
+            ),
+            children: isCurrent ? "Current Plan" : tier.cta
+          }
+        ) : /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: tier.ctaHref,
+            className: cn(
+              "block w-full rounded-md px-6 py-3 text-center text-sm font-semibold transition-colors",
+              isHighlighted ? "bg-blue-600 text-white hover:bg-blue-500 shadow-sm" : "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
+            ),
+            children: tier.cta
+          }
+        )
+      ]
+    }
+  );
+}
+function PricingCardCompact({
+  tier,
+  isCurrent,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex-1 rounded-xl p-5 shadow-sm dark:bg-zinc-900",
+        isCurrent ? "ring-2 ring-emerald-500 bg-emerald-50/50 dark:bg-emerald-900/10" : tier.highlighted ? "ring-2 ring-blue-600 bg-blue-50/50 dark:bg-blue-900/10" : "ring-1 ring-zinc-200 bg-white dark:ring-zinc-800"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-bold text-zinc-900 dark:text-white", children: tier.name }),
+          isCurrent && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", children: "Current" })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 flex items-baseline gap-x-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold text-zinc-900 dark:text-white", children: tier.price ?? "—" }),
+          tier.period && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: tier.period })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400 line-clamp-2", children: tier.description }),
+        onSelect ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect(tier.id),
+            disabled: isCurrent,
+            className: cn(
+              "mt-3 block w-full rounded-md px-3 py-2 text-center text-xs font-semibold transition-colors",
+              isCurrent ? "cursor-default bg-emerald-50 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400" : tier.highlighted ? "bg-blue-600 text-white hover:bg-blue-500" : "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
+            ),
+            children: isCurrent ? "Current" : tier.cta
+          }
+        ) : /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: tier.ctaHref,
+            className: cn(
+              "mt-3 block w-full rounded-md px-3 py-2 text-center text-xs font-semibold transition-colors",
+              tier.highlighted ? "bg-blue-600 text-white hover:bg-blue-500" : "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
+            ),
+            children: tier.cta
+          }
+        )
+      ]
+    }
+  );
+}
+function Box({ as: Component = "div", className, ref, ...props }) {
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props });
+}
+export {
+  Box as B,
+  Pagination as P,
+  Slot as S,
+  Button as a,
+  PaginationContent as b,
+  PaginationEllipsis as c,
+  PaginationItem as d,
+  PaginationLink as e,
+  PaginationNext as f,
+  PaginationPrevious as g,
+  PricingTable as h,
+  buttonVariants as i,
+  cn as j,
+  cva as k,
+  clsx as l
+};
+//# sourceMappingURL=Box-DC3F8eRf.js.map