@mikenotthepope/substrateui 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+All notable changes to SubstrateUI will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2026-04-04
+
+### Added
+- Initial release
+- 75 UI components built on Radix UI primitives
+- 3-layer OKLCH color token system (raw palette → semantic → Tailwind utilities)
+- Dark mode via semantic token swap (`.dark` class)
+- Layout primitives: Stack, Cluster, Grid, Center, Divider, Spacer
+- Form patterns: Field (with context), FormSection, FormActions, Fieldset
+- App shell organisms: AppShell, PageHeader, PageBody, PageTabs, StatCard
+- Typography system: H1-H4, P, Lead, Large, Small, Muted, Code, Mono
+- Data display: DataTable with sorting, filtering, pagination, row selection
+- Custom components: Combobox (single/multi), SearchField, InputGroup, ButtonGroup, DatePicker, Kbd, Spinner, Empty, NativeSelect, Item
+- Tailwind CSS v4 native (`@theme inline`, CSS-first configuration)
+- Full TypeScript support with exported types
+- Tree-shakeable ESM exports via three entry points

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 mikenotthepope
+Copyright (c) 2025 SubstrateUI
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,226 +1,159 @@
-# Substrate UI
+# SubstrateUI
 
-A neobrutalist React component library with bold borders, hard shadows, and high contrast design. Built on [Radix UI](https://www.radix-ui.com/) primitives and [Tailwind CSS v4](https://tailwindcss.com/).
+A chunky, opinionated design system for Next.js — OKLCH tokens, Tailwind CSS v4, Radix UI primitives.
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-black.svg)](LICENSE)
-[![TypeScript](https://img.shields.io/badge/TypeScript-strict-black.svg)](https://www.typescriptlang.org/)
-[![React 19](https://img.shields.io/badge/React-19-black.svg)](https://react.dev/)
+[![npm version](https://img.shields.io/npm/v/substrateui.svg)](https://www.npmjs.com/package/substrateui)
+[![license](https://img.shields.io/npm/l/substrateui.svg)](https://github.com/substrateui/substrateui/blob/main/LICENSE)
 
-**[Documentation & Demos](https://www.substrateui.dev)** | **[Storybook](https://www.substrateui.dev)** | **[npm](https://www.npmjs.com/package/@mikenotthepope/substrateui)**
+<!-- Replace <OWNER>/<REPO> with the GitHub owner/repo once the repo is pushed,
+     and <VERCEL-PRODUCTION-URL> with the production URL after Vercel deploys. -->
+## Status
 
----
+[![CI](https://github.com/<OWNER>/<REPO>/actions/workflows/ci.yml/badge.svg)](https://github.com/<OWNER>/<REPO>/actions/workflows/ci.yml)
 
-## Why Substrate UI?
+- **Docs:** <VERCEL-PRODUCTION-URL>
+- **Storybook:** https://substrateui.dev/storybook/ — run locally with `bun run storybook`
+- **npm:** `@substrateui/core` (not yet published)
 
-Most component libraries optimize for invisibility — neutral colors, subtle shadows, rounded everything. Substrate UI goes the other direction: **hard pixel-offset shadows, bold borders, and sharp corners by default.** It's opinionated about aesthetics but flexible about theming, built on Radix UI so accessibility comes free.
+## Features
 
-- **57 UI primitives** — Button, Dialog, Tabs, Select, DataTable, and more
-- **12 landing page components** — Hero, Pricing, FAQ, Testimonials, and more
-- **5 composite layouts** — NavBar, CardGrid, SectionNav, SimplePage, TwoColumnLayout
-- **Light & dark themes** with CSS custom properties
-- **Tree-shakeable** ESM + CJS builds
-- **Full TypeScript** support with exported types
+- 75 components from atomic Button to organism App Shell
+- 3-layer OKLCH color system: raw palette → semantic tokens → Tailwind utilities
+- Dark mode as a token swap — zero component changes
+- Chunky 2px borders and press-down animations
+- CVD-safe plum + amber color pairing
+- WCAG AA contrast verified on every token pairing — see [contrast report](./audit-contrast-report.md)
+- Built for Tailwind CSS v4 (`@theme inline`, CSS-first config)
+- Full TypeScript support with exported types
+- Tree-shakeable ESM exports
 
 ## Quick Start
 
-### Install
-
 ```bash
-npm install @mikenotthepope/substrateui
+npm install substrateui
 ```
 
-Requires `react` and `react-dom` v19+ as peer dependencies.
-
-### Import the stylesheet
-
-Add the base stylesheet once in your app root. This provides all design tokens and component styles.
-
-```tsx
-// app/layout.tsx (Next.js) or src/main.tsx (Vite)
-import "@mikenotthepope/substrateui/styles";
-```
+### CSS Setup
 
-### Use components
-
-```tsx
-import { Button, Card, Text } from "@mikenotthepope/substrateui";
-
-export function Example() {
-  return (
-    <Card>
-      <Card.Header>
-        <Text variant="h3">Hello</Text>
-      </Card.Header>
-      <Card.Body>
-        <Text>Neobrutalist components, ready to go.</Text>
-        <Button>Get Started</Button>
-      </Card.Body>
-    </Card>
-  );
-}
+```css
+/* globals.css */
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "substrateui/styles.css";
+@source "../node_modules/substrateui";
 ```
 
-## Fonts
-
-Substrate UI uses three font families via CSS custom properties:
-
-| Token          | Default Font    | Purpose    |
-| -------------- | --------------- | ---------- |
-| `--font-head`  | Bricolage Grotesque   | Headings   |
-| `--font-sans`  | Space Grotesk   | Body text  |
-| `--font-mono`  | Space Mono      | Code       |
-
-**Next.js:**
+### Font Setup (recommended)
 
 ```tsx
-import { Space_Grotesk, Bricolage_Grotesque, Space_Mono } from "next/font/google";
+// layout.tsx
+import { DM_Sans, DM_Mono } from "next/font/google"
 
-const sans = Space_Grotesk({ variable: "--font-sans", subsets: ["latin"], weight: "400" });
-const head = Bricolage_Grotesque({ variable: "--font-head", subsets: ["latin"], weight: ["400", "700", "800"] });
-const mono = Space_Mono({ variable: "--font-mono", subsets: ["latin"], weight: "400" });
+const sans = DM_Sans({ subsets: ["latin"], variable: "--font-sans" })
+const mono = DM_Mono({ weight: ["400", "500"], subsets: ["latin"], variable: "--font-mono" })
 
-export default function RootLayout({ children }) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <html className={`${sans.variable} ${head.variable} ${mono.variable}`}>
+    <html className={`${sans.variable} ${mono.variable}`}>
       <body>{children}</body>
     </html>
-  );
+  )
 }
 ```
 
-**Plain HTML / Vite:**
-
-```html
-<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800&family=Space+Grotesk:wght@400;500;700&family=Space+Mono&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --font-head: 'Bricolage Grotesque', sans-serif;
-    --font-sans: 'Space Grotesk', sans-serif;
-    --font-mono: 'Space Mono', monospace;
-  }
-</style>
-```
-
-If fonts aren't loaded, the library falls back to `Space Grotesk -> system-ui -> sans-serif`.
-
-## Theming
-
-### Light / Dark Mode
-
-Use the built-in `ThemeProvider` to manage theme switching:
+### Dark Mode
 
 ```tsx
-import { ThemeProvider } from "@mikenotthepope/substrateui";
+import { ThemeProvider } from "next-themes"
 
-function App({ children }) {
-  return (
-    <ThemeProvider defaultTheme="system">
-      {children}
-    </ThemeProvider>
-  );
-}
+// Wrap your app:
+<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+  {children}
+</ThemeProvider>
 ```
 
-Access and toggle the theme anywhere:
+### Use Components
 
 ```tsx
-import { useTheme } from "@mikenotthepope/substrateui";
-
-function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
-  return (
-    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
-      Toggle theme
-    </button>
-  );
-}
+import { Button, Stack, Card, CardHeader, CardTitle, CardContent } from "substrateui"
+import { AppShell, AppShellSidebar, AppShellMain } from "substrateui/organisms"
+import { cn } from "substrateui/utils"
 ```
 
-Accepts `"light"`, `"dark"`, or `"system"` (default). Persists to `localStorage` and respects `prefers-color-scheme`.
+## Exports
 
-### Rounded Corners
-
-Components have sharp corners by default. Add `with-radius` to opt in to rounded corners:
-
-```html
-<html class="with-radius">
-```
+| Import path | Contents |
+|---|---|
+| `substrateui` | All 75 UI primitives (Button, Card, Input, Table, etc.) |
+| `substrateui/organisms` | App-level patterns (AppShell, PageHeader, PageBody, PageTabs, StatCard) |
+| `substrateui/utils` | `cn()` utility (clsx + tailwind-merge) |
+| `substrateui/styles.css` | OKLCH token system + Tailwind theme + base styles |
 
-### Custom Tokens
-
-Override any CSS custom property to customize the theme:
-
-```css
-:root {
-  --primary: #6366f1;
-  --primary-foreground: #fff;
-  --primary-hover: #4f46e5;
-}
-```
+## Requirements
 
-See the full token reference in `base/substrate.css`.
+- React 18+
+- Tailwind CSS 4+
+- `tw-animate-css` (for animations)
+- `next-themes` (optional, for dark mode toggle)
+- `next` 15+ (optional, only for `substrateui/organisms` which use `next/link`)
 
-## Components
+## Token Architecture
 
-### Primitives
+SubstrateUI uses a 3-layer OKLCH color system:
 
-Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Container, ContextMenu, DataTable, Dialog, Divider, Drawer, DropdownMenu, Flex, Form, FormLayout, Grid, HoverCard, IconButton, ImageCard, Input, InputOTP, Label, Link, Loader, Marquee, Menu, Menubar, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, Sonner, Stack, Switch, Table, Tabs, Text, Textarea, Tooltip
+1. **Raw palette** — OKLCH values (`--raw-plum-600`, `--raw-amber-500`, etc.)
+2. **Semantic tokens** — Purpose-based mappings (`--primary`, `--surface-raised`, `--status-error`, etc.) with automatic dark mode via `.dark` class
+3. **Tailwind utilities** — `@theme inline` maps tokens to `bg-primary`, `text-foreground`, `border-border`, etc.
 
-### Landing
+## Component Categories
 
-AnnouncementBanner, CTABanner, FAQ, FeatureSection, Footer, Hero, LogoCloud, NewsletterSignup, PricingTable, Section, StatsBar, Testimonial
+- **General** — Button, ButtonGroup, Badge, Kbd, Spinner, Empty
+- **Typography** — H1-H4, P, Lead, Large, Small, Muted, Code, Mono
+- **Layout** — Stack, Cluster, Grid, Center, Divider, Spacer, Separator, AspectRatio, ResizablePanels
+- **Forms** — Input, Textarea, Select, NativeSelect, Checkbox, RadioGroup, Switch, Slider, DatePicker, Combobox, InputGroup, InputOTP, SearchField, Field, Fieldset, FormSection, FormActions
+- **Data Display** — Card, Table, DataTable, Avatar, Calendar, Carousel, Chart, HoverCard, Item
+- **Feedback** — Alert, AlertDialog, Dialog, Progress, Skeleton, Sonner (toast)
+- **Overlays** — Sheet, Drawer, Popover, Tooltip, ContextMenu, DropdownMenu, Command
+- **Navigation** — Tabs, Breadcrumb, NavigationMenu, Menubar, Pagination, ScrollArea, Sidebar, Collapsible, Accordion
+- **Patterns** — AppShell, PageHeader, PageBody, PageTabs, StatCard
 
-### Composite
+## Customization
 
-CardGrid, NavBar, SectionNav, SimplePage, TwoColumnLayout
+Override tokens after importing the stylesheet:
 
-## Framework Compatibility
+```css
+/* After importing substrateui/styles.css */
+:root {
+  --primary: oklch(0.55 0.15 250);  /* Change primary to blue */
+}
+```
 
-Works in any React 19 environment — Next.js, Vite, Remix, etc.
+## Accessibility
 
-The `NavBar` component accepts an optional `linkComponent` prop for framework-specific routing:
+SubstrateUI meets WCAG AA contrast requirements (verified by automated audit) and is built on Radix UI primitives for robust keyboard and screen reader support.
 
-```tsx
-import Link from "next/link";
-import { NavBar } from "@mikenotthepope/substrateui";
+- [Accessibility documentation](https://substrateui.dev/docs/accessibility)
+- [Contrast audit report](./audit-contrast-report.md)
 
-<NavBar linkComponent={Link} brand={{ name: "MyApp" }} auth={{ state: "signed-out", href: "/login" }} />
-```
+Every component ships with accessible defaults. For guidance on specific components, see the "Accessibility" section on each component's documentation page.
 
-When omitted, it defaults to a plain `<a>` tag.
+## Storybook
 
-## Development
+Contributors can browse components in isolation, flip between light/dark themes, swap `ltr`/`rtl` direction, and switch the semantic palette (Plum / Forest) from the toolbar.
 
 ```bash
-bun install          # Install dependencies
-bun dev              # Start the demo app (Next.js)
-bun storybook        # Start Storybook
-bun test             # Run tests
-bun run build        # Build the library (tsup)
-```
-
-### Project Structure
-
-```
-substrateui/
-├── src/index.ts          # Barrel export for the published package
-├── components/ui/        # 57 primitive components
-├── components/landing/   # 12 landing page components
-├── components/           # Composite components + ThemeProvider
-├── base/substrate.css    # Design tokens & base styles
-├── app/                  # Next.js demo/docs site
-├── AGENTS.md             # Shared AI agent instructions
-├── CLAUDE.md             # Claude Code config (imports AGENTS.md)
-└── tsup.config.ts        # Library build config
+bun run storybook        # dev server on http://localhost:6006
+bun run build-storybook  # static bundle in ./storybook-static
 ```
 
-## Acknowledgements
+Hosted build: https://substrateui.dev/storybook/
 
-Substrate UI draws inspiration from these projects:
+## Links
 
-- [neobrutalism-components](https://github.com/ekmas/neobrutalism-components) by ekmas
-- [RetroUI](https://github.com/logging-studio/retroui) by Logging Studio
+- [GitHub](https://github.com/substrateui/substrateui)
+- [npm](https://www.npmjs.com/package/substrateui)
+- [Storybook](https://substrateui.dev/storybook/)
 
 ## License
 
-[MIT](LICENSE)
+MIT

package/dist/chunk-IQWAGBDM.js

@@ -0,0 +1,42 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { __objRest, __spreadProps, __spreadValues, cn };
+//# sourceMappingURL=chunk-IQWAGBDM.js.map
+//# sourceMappingURL=chunk-IQWAGBDM.js.map

package/dist/chunk-IQWAGBDM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"chunk-IQWAGBDM.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"]}

package/dist/chunk-IRBORST3.js

@@ -0,0 +1,258 @@
+"use client";
+import { __objRest, __spreadValues, cn } from './chunk-IQWAGBDM.js';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+function Card(_a) {
+  var _b = _a, {
+    className,
+    interactive = false,
+    ref
+  } = _b, props = __objRest(_b, [
+    "className",
+    "interactive",
+    "ref"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "card",
+      className: cn(
+        "rounded-lg border-2 bg-card text-card-foreground shadow-sm",
+        interactive && "cursor-pointer hover:border-ring hover:shadow-md transition-all active:translate-y-[1.5px]",
+        className
+      )
+    }, props)
+  );
+}
+function CardHeader(_a) {
+  var _b = _a, {
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "className",
+    "ref"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "card-header",
+      className: cn("flex flex-col space-y-1.5 p-6", className)
+    }, props)
+  );
+}
+function CardTitle(_a) {
+  var _b = _a, {
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "className",
+    "ref"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "card-title",
+      className: cn(
+        "text-2xl font-semibold leading-none tracking-tight",
+        className
+      )
+    }, props)
+  );
+}
+function CardDescription(_a) {
+  var _b = _a, {
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "className",
+    "ref"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "card-description",
+      className: cn("text-sm text-muted-foreground", className)
+    }, props)
+  );
+}
+function CardContent(_a) {
+  var _b = _a, {
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "className",
+    "ref"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "card-content",
+      className: cn("p-6 pt-0", className)
+    }, props)
+  );
+}
+function CardFooter(_a) {
+  var _b = _a, {
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "className",
+    "ref"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "card-footer",
+      className: cn("flex items-center p-6 pt-0", className)
+    }, props)
+  );
+}
+var maxMap = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-full"
+};
+function Center(_a) {
+  var _b = _a, {
+    max = "2xl",
+    padding = true,
+    asChild = false,
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "max",
+    "padding",
+    "asChild",
+    "className",
+    "ref"
+  ]);
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    __spreadValues({
+      "data-slot": "center",
+      className: cn(
+        "mx-auto w-full",
+        maxMap[max],
+        padding && "px-4 sm:px-6 lg:px-8",
+        className
+      ),
+      ref
+    }, props)
+  );
+}
+var gapMap = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8",
+  "2xl": "gap-12"
+};
+var alignMap = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+function Stack(_a) {
+  var _b = _a, {
+    gap = "md",
+    align = "stretch",
+    asChild = false,
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "gap",
+    "align",
+    "asChild",
+    "className",
+    "ref"
+  ]);
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    __spreadValues({
+      "data-slot": "stack",
+      className: cn("flex flex-col", gapMap[gap], alignMap[align], className),
+      ref
+    }, props)
+  );
+}
+var Tabs = TabsPrimitive.Root;
+function TabsList(_a) {
+  var _b = _a, {
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "className",
+    "ref"
+  ]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    __spreadValues({
+      ref,
+      "data-slot": "tabs-list",
+      className: cn(
+        "inline-flex h-10 items-center justify-center rounded-lg bg-surface-sunken border-2 p-1 text-muted-foreground",
+        className
+      )
+    }, props)
+  );
+}
+function TabsTrigger(_a) {
+  var _b = _a, {
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "className",
+    "ref"
+  ]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    __spreadValues({
+      ref,
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all active:translate-y-[1.5px] transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        className
+      )
+    }, props)
+  );
+}
+function TabsContent(_a) {
+  var _b = _a, {
+    className,
+    ref
+  } = _b, props = __objRest(_b, [
+    "className",
+    "ref"
+  ]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    __spreadValues({
+      ref,
+      "data-slot": "tabs-content",
+      className: cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )
+    }, props)
+  );
+}
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Center, Stack, Tabs, TabsContent, TabsList, TabsTrigger };
+//# sourceMappingURL=chunk-IRBORST3.js.map
+//# sourceMappingURL=chunk-IRBORST3.js.map