@noxickon/onyx 5.0.1 → 6.0.0

package/README.md

@@ -5,25 +5,19 @@
 ![Coverage %](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/noxickon/c0b3115a7fbd0b01ccf3e74192756dfb/raw/onyx-coverage-badge.json)
 ![Last Build](https://github.com/noxickon/onyx/actions/workflows/release.yml/badge.svg)
 
-Onyx is a modern React component library built with Tailwind CSS, designed for building beautiful and accessible UI interfaces. The library offers a collection of 70+ reusable components following consistent design patterns, optimized for dark mode by default.
+A modern React component library built with BaseUI, React Aria hooks, and Tailwind CSS 4. Accessible by default, designed for dark mode.
 
-## Features
+## Tech Stack
 
-- **Modern React Components** - Built with React 19 and TypeScript
-- **70+ Components** - UI, Forms, Layouts, Typography, and more
-- **Tree-Shakeable** - Multi-entry build system, only import what you need
-- **Dark Mode Optimized** - All components designed for dark interfaces
-- **Lucide React Icons** - Modern, tree-shakeable icons (MDI as alternative)
-- **Tailwind CSS 4** - Fully customizable with latest Tailwind
-- **Type-Safe** - Full TypeScript support with strict typing
-- **Compound Patterns** - Flexible composition with dot notation
-- **Accessibility First** - WCAG compliant, tested with jest-axe
-- **Comprehensive Documentation** - Interactive Storybook with 61 stories
+- **React 19** + **TypeScript**
+- **React Aria / BaseUI** for accessible component primitives
+- **Tailwind CSS 4** with OKLch color system
+- **Vite** for building
+- **Storybook** for documentation
+- **Vitest** + **React Testing Library** + **jest-axe** for testing
 
 ## Installation
 
-Install Onyx and its peer dependencies:
-
 ```bash
 npm install @noxickon/onyx lucide-react
 ```
@@ -32,284 +26,152 @@ npm install @noxickon/onyx lucide-react
 
 **Required:**
 
-- `react` ^19.0.0
-- `react-dom` ^19.0.0
-- `lucide-react` ^0.500.0
-
-**Optional:**
+- `react` ^19.2.1
+- `react-dom` ^19.2.1
+- `lucide-react` ^1.7.0
 
-- `@apollo/client` ^4.0.0 (if using Apollo features)
-- `graphql` ^16.0.0 (if using GraphQL features)
-- `@mdi/js` ^7.4.47 (alternative icon library)
-- `@mdi/react` ^1.6.1 (alternative icon library)
+**Optional** (only needed when importing `@noxickon/onyx/rich-editor`):
 
-## Basic Usage
+- `@tiptap/react`, `@tiptap/pm`, `@tiptap/starter-kit`, `@tiptap/extension-placeholder` ^3.0.0
+- `react-shiki` ^0.9.2, `shiki` ^4.0.2 (for code-block syntax highlighting)
 
-```tsx
-import { OxButton, OxIcon } from '@noxickon/onyx';
-import { Check, Home } from 'lucide-react';
-import '@noxickon/onyx/styles';
+## Setup
 
-function App() {
-  return (
-    <div>
-      <OxButton variant="primary">
-        <OxIcon icon={Check} />
-        Click Me
-      </OxButton>
-      <OxIcon icon={Home} />
-    </div>
-  );
-}
-```
+### 1. CSS — wire Tailwind + Onyx in your app's main CSS file
 
-## Package Exports
-
-Onyx uses a multi-entry build system for optimal tree-shaking:
-
-```tsx
-// UI Components
-import { OxButton, OxCard, OxDialog } from '@noxickon/onyx';
-
-// Contexts
-import { OxAuthProvider, useOxAuth } from '@noxickon/onyx/contexts';
-
-// Hooks
-import { useForm, useFilterQuery } from '@noxickon/onyx/hooks';
+Onyx ships its own `@source` directive, so your Tailwind automatically picks up all utility classes used by Onyx components — no manual `@source` needed.
 
-// Layouts
-import { OxAppLayout, OxSidebar } from '@noxickon/onyx/layouts';
-
-// Pages
-import { OxLogin } from '@noxickon/onyx/pages';
-
-// Route Guards
-import { ProtectedRoute, GuestRoute } from '@noxickon/onyx/routes';
-
-// Utilities
-import { cn, formatter, validation } from '@noxickon/onyx/utils';
-
-// CSS Imports
-import '@noxickon/onyx/styles'; // Main component styles (required)
-import '@noxickon/onyx/shared'; // Shared utility classes (optional)
-import '@noxickon/onyx/animations'; // Animation utilities (optional)
+```css
+/* e.g. src/app.css */
+@import 'tailwindcss';
+@import '@noxickon/onyx/styles';
 ```
 
-## Component Categories
+**What each line does:**
 
-### UI Components (37)
+| Line                              | Purpose                                                                                                                                                             |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@import 'tailwindcss'`           | Your app's own Tailwind                                                                                                                                             |
+| `@import '@noxickon/onyx/styles'` | Onyx tokens (semantic colors, spacing, `@theme` bridges), base resets, component CSS, and a `@source` directive that tells Tailwind to scan Onyx's bundled JS files |
 
-Accordion, Alert, AspectRatio, Avatar, Badge, Breadcrumb, Button, Calendar, Card, DescriptionList, Dialog, Drawer, Dropdown, HoverCard, Icon, JsonField, Link, Notifications, PageOutline, Pagination, Popover, Popper, Progress, Separator, Skeleton, Slider, Spinner, StatusDisplay, Stepper, Table, Tabs, Tag, ThemeSwitcher, Timeline, Toast, Toggle, Tooltip
+Import that CSS file once from your app entry:
 
-### Form Components (8)
+```tsx
+// main.tsx / app.tsx / root layout
+import './app.css';
+```
 
-Checkbox, FileUpload, Form, Input (Text, Number, Date, Time, OTP), Radio, Select, Switch, Textarea
+### 2. Use components
 
-### Layout Components (5)
+```tsx
+import { OxButton } from '@noxickon/onyx';
 
-AppLayout, MainContent, Sidebar, Header (Legacy), Sidebar (Legacy)
+function App() {
+  return <OxButton variant="primary">Click Me</OxButton>;
+}
+```
 
-### Typography Components (5)
+### 3. Dark mode
 
-Description, Error, Heading, Label, Legend
+Toggle dark mode by setting `data-theme` on the `<html>` element:
 
-### Contexts (3)
+```ts
+document.documentElement.dataset.theme = 'dark'; // or 'light'
+```
 
-AuthContext, DialogContext, FeatureFlagContext
+Semantic tokens (`bg-primary`, `text-foreground`, etc.) automatically resolve to the correct value per theme.
 
-### Hooks (11)
+### 4. Theming — rebrand without rewriting components
 
-useControllableState, useFileUpload, useFilterQuery, useFocus, useForm, useFormState, useKeyboard, useOverflowDetection, useScrollSpy, useSize, useTheme
+Onyx exposes two **brand ramps** as `@theme` aliases — override them in your own CSS to rebrand without touching any component:
 
-### Route Guards (3)
+| Ramp    | Default   | Tokens                      |
+| ------- | --------- | --------------------------- |
+| Primary | `violet`  | `--color-primary-{50..950}` |
+| Accent  | `fuchsia` | `--color-accent-{50..950}`  |
 
-GuestRoute, ProtectedRoute, RoleRoute
+**Change the primary hue (example: violet → indigo):**
 
-### Utilities (9)
+```css
+@import 'tailwindcss';
+@import '@noxickon/onyx/styles';
 
-builder, cn, copyToClipboard, createId, errorHelper, formatter, hasDataSlot, scrollToElement, validation
+@theme {
+  --color-primary-50: var(--color-indigo-50);
+  --color-primary-100: var(--color-indigo-100);
+  --color-primary-200: var(--color-indigo-200);
+  --color-primary-300: var(--color-indigo-300);
+  --color-primary-400: var(--color-indigo-400);
+  --color-primary-500: var(--color-indigo-500);
+  --color-primary-600: var(--color-indigo-600);
+  --color-primary-700: var(--color-indigo-700);
+  --color-primary-800: var(--color-indigo-800);
+  --color-primary-900: var(--color-indigo-900);
+  --color-primary-950: var(--color-indigo-950);
+}
+```
 
-## Icons
+All downstream tokens (`bg-primary`, `text-link`, `border-border-focus`, `ring-ring`, `bg-primary-subtle`, …) re-point automatically — in both light and dark mode. Same pattern for `--color-accent-*` or status ramps (`--color-danger-*`, `--color-success-*`, …) if you want to swap those too.
 
-### Lucide React (Primary)
+**Use any Tailwind color:** `violet`, `fuchsia`, `indigo`, `blue`, `purple`, `emerald`, `teal`, `rose`, `amber`, `orange`, `sky`, `cyan`, etc.
 
-Onyx uses Lucide React for modern, tree-shakeable icons:
+### 5. Mobile viewport
 
-```tsx
-import { User, Mail, Calendar, Settings } from 'lucide-react';
-import { OxIcon } from '@noxickon/onyx';
+Set the viewport meta tag in your app's HTML:
 
-<OxIcon icon={User} />
-<OxIcon icon={Mail} />
-<OxIcon icon={Calendar} />
-<OxIcon icon={Settings} />
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 ```
 
-Browse 1,500+ available icons at [lucide.dev](https://lucide.dev)
+- `viewport-fit=cover` is required for the safe-area insets that `OxDrawer` (bottom sheet), `OxTabBar`, and `OxToast` use on notched devices — without it, `env(safe-area-inset-*)` resolves to `0`.
+- Do **not** add `maximum-scale=1` or `user-scalable=no`: Onyx already prevents the iOS input focus-zoom by bumping control text to 16px on touch devices (`@media (pointer: coarse)`), and those attributes block pinch-zoom on Android (WCAG 1.4.4 violation, flagged by Lighthouse/axe).
 
-### MDI Icons (Alternative)
+On coarse-pointer devices Onyx automatically raises the control tier: `--control-h-md` 36px → 40px and `--control-text-md` 14px → 16px, plus per-component touch-target adjustments. No configuration needed.
 
-Material Design Icons are supported as an alternative when Lucide doesn't have the icon you need:
+## Package Exports
 
 ```tsx
-import { mdiAccount, mdiHome } from '@mdi/js';
-import { OxIcon } from '@noxickon/onyx';
-
-<OxIcon path={mdiAccount} />
-<OxIcon path={mdiHome} />
-```
-
-Browse 7,000+ MDI icons at [pictogrammers.com/library/mdi](https://pictogrammers.com/library/mdi/)
-
-### Custom SVG Support
+// Components
+import { OxButton, OxCard, OxDialog } from '@noxickon/onyx';
 
-You can also use custom SVG components:
+// Hooks
+import { useOxBreakpoint, useOxMediaQuery } from '@noxickon/onyx/hooks';
 
-```tsx
-import { OxIcon } from '@noxickon/onyx';
+// Rich text editor (optional — needs Tiptap peer deps)
+import { OxRichEditor, useOxRichEditor } from '@noxickon/onyx/rich-editor';
 
-<OxIcon>
-  <CustomSvgIcon />
-</OxIcon>;
+// Styles (required)
+import '@noxickon/onyx/styles';
 ```
 
-## Compound Pattern
+The `./context` and `./utils` entry points are reserved for future use and are currently empty.
 
-Onyx components use a compound pattern for flexible composition:
+## Project Structure
 
-```tsx
-import { OxCard, OxButton } from '@noxickon/onyx';
-
-<OxCard>
-  <OxCard.Header>
-    <OxCard.Title>Card Title</OxCard.Title>
-    <OxCard.Subtitle>Optional subtitle text</OxCard.Subtitle>
-  </OxCard.Header>
-  <OxCard.Body>Card content goes here with full flexibility</OxCard.Body>
-  <OxCard.Footer>
-    <OxButton variant="primary">Action</OxButton>
-    <OxButton variant="secondary">Cancel</OxButton>
-  </OxCard.Footer>
-</OxCard>;
 ```
-
-### Layout Example
-
-```tsx
-import { OxAppLayout, OxSidebar, OxMainContent } from '@noxickon/onyx/layouts';
-
-<OxAppLayout>
-  <OxAppLayout.Sidebar>
-    <OxSidebar>
-      <OxSidebar.Header>App Logo</OxSidebar.Header>
-      <OxSidebar.Content>
-        <OxSidebarMenu>
-          <OxSidebarMenu.Item>
-            <OxSidebarMenu.Button>Dashboard</OxSidebarMenu.Button>
-          </OxSidebarMenu.Item>
-        </OxSidebarMenu>
-      </OxSidebar.Content>
-    </OxSidebar>
-  </OxAppLayout.Sidebar>
-  <OxAppLayout.Main>
-    <OxMainContent>
-      <OxMainContent.Header title="Page Title" />
-      <OxMainContent.Body>Page content</OxMainContent.Body>
-    </OxMainContent>
-  </OxAppLayout.Main>
-</OxAppLayout>;
+src/
+├── components/    # All UI components
+├── hooks/         # Custom hooks (useOxBreakpoint, useOxMediaQuery)
+├── rich-editor/   # Tiptap-based rich text editor (separate entry point)
+├── context/       # React contexts (reserved)
+├── utils/         # Utility functions (reserved)
+├── internal/      # Internal utilities (not exported)
+└── styles/        # Design tokens, theme CSS
 ```
 
-## Documentation
-
-Onyx includes comprehensive style guides for developers:
-
-1. **Style Guide** - Design system documentation
-   - Color palette and hierarchy
-   - Typography standards (H1-H7)
-   - Border and spacing conventions
-   - Background layer system
-   - Hover and focus states
-   - Interactive variants with CVA
-   - Icon usage patterns
-
-2. **Architecture Guide** - Development standards
-   - Component structure patterns
-   - Compound pattern implementation
-   - Slot pattern for polymorphic components
-   - Naming conventions
-   - TypeScript standards
-   - NO COMMENTS policy
-   - Context patterns
-   - Testing and accessibility requirements
-
-3. **Stories Guidelines** - Storybook best practices
-   - Story file structure
-   - Meta configuration
-   - ArgTypes documentation
-   - Code/Story patterns
-
-Access these guides by running `npm run dev` and opening http://localhost:6006
-
 ## Development
 
-### Available Commands
-
-| Command                    | Description                                      |
-| -------------------------- | ------------------------------------------------ |
-| `npm run dev`              | Starts Storybook development server on port 6006 |
-| `npm run build`            | Builds the component library for production      |
-| `npm run build:analyze`    | Builds and opens bundle size analyzer            |
-| `npm run preview`          | Previews the built package locally               |
-| `npm run build:storybook`  | Builds static Storybook site for deployment      |
-| `npm run test`             | Runs all tests with Vitest                       |
-| `npm run test:coverage`    | Runs tests with coverage report                  |
-| `npm run coverage:preview` | Preview coverage report in browser               |
-| `npm run lint`             | Lint code with ESLint                            |
-| `npm run lint:fix`         | Fix lint issues automatically                    |
-| `npm run format`           | Format code with Prettier                        |
-| `npm run format:all`       | Format with Prettier and fix lint issues         |
-
-### Testing
-
-Onyx uses a comprehensive testing approach:
-
-- **Framework**: Vitest with jsdom environment
-- **Libraries**: React Testing Library for component testing
-- **Accessibility**: jest-axe for automated accessibility testing
-- **Coverage**: Focuses on implementation files (`src/**/src/**`)
-
-Run tests:
-
-```bash
-npm run test              # Run all tests
-npm run test:coverage     # Generate coverage report
-npm run coverage:preview  # View coverage in browser
-```
-
-### Adding a New Component
-
-1. Create a new directory under `src/ui/[ComponentName]` or `src/forms/[ComponentName]`
-2. Add the component implementation in `src/[category]/[ComponentName]/src/[ComponentName].tsx`
-3. Create types in `src/[category]/[ComponentName]/src/[ComponentName].types.ts`
-4. Add an `index.ts` file that exports the component with the `Ox` prefix
-5. Create stories in `src/[category]/[ComponentName]/[ComponentName].stories.tsx`
-6. Add tests in `src/[category]/[ComponentName]/test/[ComponentName].test.tsx`
-
-Follow the patterns documented in the Architecture Guide and Stories Guidelines (accessible via Storybook).
-
-## Performance
-
-- **Multi-Entry Build**: Import only what you need from separate entry points
-- **Tree-Shakeable**: Optimized bundle size through selective imports
-- **Externalized Dependencies**: React, Tailwind CSS, and peer deps are external
-- **React Compiler**: Optimized with babel-plugin-react-compiler
-- **Full Library**: ~1.5MB dist, tree-shakes significantly in production
+| Command                 | Description                          |
+| ----------------------- | ------------------------------------ |
+| `npm run dev`           | Start Storybook on port 6006         |
+| `npm run build`         | Build library for production         |
+| `npm run test`          | Run tests                            |
+| `npm run test:coverage` | Run tests with coverage              |
+| `npm run lint`          | Lint with ESLint                     |
+| `npm run format`        | Format with Prettier                 |
+| `npm run check`         | Lint + typecheck                     |
+| `npm run validate`      | Full pipeline (check + build + test) |
 
 ## License
 
 This project is privately owned and not available for public use without permission.
-
-## Contributors
-
-- Noxickon

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,14 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+}, r = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+});
+//#endregion
+export { t as __commonJSMin, n as __exportAll, r as __require };

package/dist/code-block/CodeBlock.css

@@ -0,0 +1 @@
+.ox-code-block__content .line{width:100%;display:inline-block}.ox-code-block__content .rs-has-line-numbers{counter-reset:line-number 0}.ox-code-block__content .rs-line-number:before{counter-increment:line-number;content:counter(line-number);text-align:right;width:2.5ch;color:var(--color-foreground-subtle);-webkit-user-select:none;user-select:none;margin-right:1.5ch;display:inline-block}

package/dist/code-block/CodeBlock.d.ts

@@ -0,0 +1,9 @@
+import { OxCodeBlockContentProps, OxCodeBlockCopyProps, OxCodeBlockFooterProps, OxCodeBlockHeaderProps, OxCodeBlockLanguageProps, OxCodeBlockProps, OxCodeBlockTitleProps } from './CodeBlock.types';
+declare function OxCodeBlockRoot({ className, code, fallback, highlighter, langs, language, render, showLineNumbers, theme, title, wrap, ...props }: OxCodeBlockProps): import("react").JSX.Element;
+declare function OxCodeBlockContent({ className, ...props }: OxCodeBlockContentProps): import("react").JSX.Element;
+declare function OxCodeBlockHeader({ className, render, ...props }: OxCodeBlockHeaderProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCodeBlockFooter({ className, render, ...props }: OxCodeBlockFooterProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCodeBlockTitle({ children, className, render, ...props }: OxCodeBlockTitleProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCodeBlockLanguage({ children, className, render, ...props }: OxCodeBlockLanguageProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCodeBlockCopy({ className, ...props }: OxCodeBlockCopyProps): import("react").JSX.Element;
+export { OxCodeBlockContent, OxCodeBlockCopy, OxCodeBlockFooter, OxCodeBlockHeader, OxCodeBlockLanguage, OxCodeBlockRoot, OxCodeBlockTitle, };

package/dist/code-block/CodeBlock.styles.d.ts

@@ -0,0 +1,66 @@
+import { VariantProps } from '../internal/tv';
+export declare const codeBlockVariants: import('tailwind-variants').TVReturnType<{
+    wrap: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+    showLineNumbers: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    footer: string;
+    content: string[];
+    title: string;
+    language: string;
+    copy: string;
+}, undefined, {
+    wrap: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+    showLineNumbers: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    footer: string;
+    content: string[];
+    title: string;
+    language: string;
+    copy: string;
+}, import('tailwind-variants').TVReturnType<{
+    wrap: {
+        true: {
+            content: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+    showLineNumbers: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    footer: string;
+    content: string[];
+    title: string;
+    language: string;
+    copy: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CodeBlockVariants = VariantProps<typeof codeBlockVariants>;

package/dist/code-block/CodeBlock.styles.js

@@ -0,0 +1,33 @@
+import { tv as e } from "../internal/tv.js";
+//#region src/code-block/CodeBlock.styles.ts
+var t = e({
+	slots: {
+		root: "ox-code-block overflow-hidden rounded-xl border border-line bg-surface text-sm text-fg shadow-xs",
+		header: "ox-code-block__header flex items-center justify-between gap-2 border-b border-line-strong bg-surface px-4 py-3 text-xs font-semibold text-fg-muted",
+		footer: "ox-code-block__footer flex items-center justify-between gap-2 border-t border-line-strong bg-surface px-4 py-2.5 text-xs text-fg-muted",
+		content: [
+			"ox-code-block__content relative overflow-x-auto font-mono text-[0.8125rem] leading-relaxed",
+			"[&_pre]:m-0 [&_pre]:bg-transparent [&_pre]:px-4 [&_pre]:py-3.5 [&_pre]:outline-none",
+			"[&_code]:bg-transparent [&_code]:font-[inherit]"
+		],
+		title: "ox-code-block__title truncate text-fg text-sm font-mono",
+		language: "ox-code-block__language inline-flex items-center rounded-md bg-surface px-1.5 py-0.5 font-mono text-[0.6875rem] uppercase tracking-wide text-fg-subtle",
+		copy: "ox-code-block__copy"
+	},
+	variants: {
+		wrap: {
+			true: { content: "[&_pre]:whitespace-pre-wrap [&_pre]:break-words" },
+			false: { content: "[&_pre]:whitespace-pre" }
+		},
+		showLineNumbers: {
+			true: {},
+			false: {}
+		}
+	},
+	defaultVariants: {
+		wrap: !1,
+		showLineNumbers: !0
+	}
+});
+//#endregion
+export { t as codeBlockVariants };

package/dist/code-block/CodeBlock.types.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { Language, Theme, Themes } from 'react-shiki/core';
+import { HighlighterCore, LanguageRegistration } from 'shiki/core';
+import { OxCopyButtonProps } from '../components/CopyButton';
+interface OxCodeBlockProps extends useRender.ComponentProps<'div'> {
+    children: ReactNode;
+    code: string;
+    fallback?: ReactNode;
+    highlighter?: HighlighterCore;
+    langs?: LanguageRegistration[];
+    language: Language;
+    showLineNumbers?: boolean;
+    theme?: Theme | Themes;
+    title?: string;
+    wrap?: boolean;
+}
+interface OxCodeBlockHeaderProps extends useRender.ComponentProps<'div'> {
+    children: ReactNode;
+}
+interface OxCodeBlockFooterProps extends useRender.ComponentProps<'div'> {
+    children: ReactNode;
+}
+type OxCodeBlockContentProps = Omit<useRender.ComponentProps<'div'>, 'render'>;
+interface OxCodeBlockTitleProps extends useRender.ComponentProps<'div'> {
+    children?: ReactNode;
+}
+interface OxCodeBlockLanguageProps extends useRender.ComponentProps<'span'> {
+    children?: ReactNode;
+}
+type OxCodeBlockCopyProps = Omit<OxCopyButtonProps, 'text'>;
+export type { OxCodeBlockContentProps, OxCodeBlockCopyProps, OxCodeBlockFooterProps, OxCodeBlockHeaderProps, OxCodeBlockLanguageProps, OxCodeBlockProps, OxCodeBlockTitleProps, };