@noxickon/onyx 2.0.3 → 3.0.0

package/README.md

@@ -5,164 +5,306 @@
 ![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 reusable components following consistent design patterns, optimized for dark mode by default.
+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.
 
 ## Features
 
 - **Modern React Components** - Built with React 19 and TypeScript
-- **Tree-Shakeable** - Only import what you need, optimized bundle size
+- **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
-- **Material Design Icons** - 7,000+ icons via @mdi/js with tree-shaking support
+- **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
-- **Storybook Documentation** - Interactive component documentation
-- **Performance First** - ~94 KB gzipped (full library), tree-shakes to ~10-50 KB in practice
+- **Compound Patterns** - Flexible composition with dot notation
+- **Accessibility First** - WCAG compliant, tested with jest-axe
+- **Comprehensive Documentation** - Interactive Storybook with 61 stories
 
-## Getting Started
-
-### Installation
+## Installation
 
 Install Onyx and its peer dependencies:
 
 ```bash
-npm install @noxickon/onyx @mdi/js
+npm install @noxickon/onyx lucide-react
 ```
 
-**Peer Dependencies:**
+### Peer Dependencies
+
+**Required:**
 
 - `react` ^19.0.0
 - `react-dom` ^19.0.0
-- `@mdi/js` ^7.0.0
+- `lucide-react` ^0.500.0
+
+**Optional:**
+
 - `@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)
 
-### Basic Usage
+## Basic Usage
 
 ```tsx
-import { mdiHomeOutline, mdiCheck } from '@mdi/js';
 import { OxButton, OxIcon } from '@noxickon/onyx';
+import { Check, Home } from 'lucide-react';
 import '@noxickon/onyx/styles';
 
 function App() {
   return (
     <div>
       <OxButton variant="primary">
-        <OxButton.Icon path={mdiCheck} />
+        <OxIcon icon={Check} />
         Click Me
       </OxButton>
-      <OxIcon path={mdiHomeOutline} size={1.2} />
+      <OxIcon icon={Home} />
     </div>
   );
 }
 ```
 
-### Icons
+## Package Exports
 
-Onyx uses Material Design Icons via `@mdi/js`. Import icons directly for optimal tree-shaking:
+Onyx uses a multi-entry build system for optimal tree-shaking:
 
 ```tsx
-import { mdiAccount, mdiHome, mdiEmail } from '@mdi/js';
-import { OxIcon } from '@noxickon/onyx';
+// UI Components
+import { OxButton, OxCard, OxDialog } from '@noxickon/onyx';
 
-<OxIcon path={mdiAccount} />
-<OxIcon path={mdiHome} size={1.5} />
-<OxIcon path={mdiEmail} className="text-blue-500" />
+// Contexts
+import { OxAuthProvider, useOxAuth } from '@noxickon/onyx/contexts';
+
+// Hooks
+import { useForm, useFilterQuery } from '@noxickon/onyx/hooks';
+
+// 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)
 ```
 
-Browse all 7,000+ available icons at [pictogrammers.com/library/mdi](https://pictogrammers.com/library/mdi/)
+## Component Categories
 
-## Development
+### UI Components (37)
 
-### Available Commands
+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
 
-| 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 lint`            | Lint code with ESLint                            |
-| `npm run lint:fix`        | Fix lint issues automatically                    |
-| `npm run format`          | Format code with Prettier                        |
+### Form Components (8)
 
-### Storybook
+Checkbox, FileUpload, Form, Input (Text, Number, Date, Time, OTP), Radio, Select, Switch, Textarea
 
-The component library uses Storybook for development and documentation. To start the Storybook development server:
+### Layout Components (5)
 
-```bash
-npm run dev
-```
+AppLayout, MainContent, Sidebar, Header (Legacy), Sidebar (Legacy)
 
-Then open http://localhost:6006 in your browser to view the component library.
+### Typography Components (5)
 
-### Adding a New Component
+Description, Error, Heading, Label, Legend
 
-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`
+### Contexts (3)
 
-## Migration Guide
+AuthContext, DialogContext, FeatureFlagContext
 
-### Upgrading from v1.x to v2.0
+### Hooks (11)
 
-Version 2.0 introduces tree-shakeable icons for better performance. This is a **breaking change** requiring code updates.
+useControllableState, useFileUpload, useFilterQuery, useFocus, useForm, useFormState, useKeyboard, useOverflowDetection, useScrollSpy, useSize, useTheme
 
-#### 1. Install @mdi/js
+### Route Guards (3)
 
-```bash
-npm install @mdi/js
-```
+GuestRoute, ProtectedRoute, RoleRoute
 
-#### 2. Update Icon Usage
+### Utilities (9)
 
-**Before (v1.x):**
+builder, cn, copyToClipboard, createId, errorHelper, formatter, hasDataSlot, scrollToElement, validation
+
+## Icons
+
+### Lucide React (Primary)
+
+Onyx uses Lucide React for modern, tree-shakeable icons:
 
 ```tsx
+import { User, Mail, Calendar, Settings } from 'lucide-react';
 import { OxIcon } from '@noxickon/onyx';
 
-<OxIcon path="mdiHome" />
-<OxAlert.Icon path="mdiCheck" />
+<OxIcon icon={User} />
+<OxIcon icon={Mail} />
+<OxIcon icon={Calendar} />
+<OxIcon icon={Settings} />
 ```
 
-**After (v2.0):**
+Browse 1,500+ available icons at [lucide.dev](https://lucide.dev)
+
+### MDI Icons (Alternative)
+
+Material Design Icons are supported as an alternative when Lucide doesn't have the icon you need:
 
 ```tsx
-import { mdiHome, mdiCheck } from '@mdi/js';
-import { OxIcon, OxAlert } from '@noxickon/onyx';
+import { mdiAccount, mdiHome } from '@mdi/js';
+import { OxIcon } from '@noxickon/onyx';
 
+<OxIcon path={mdiAccount} />
 <OxIcon path={mdiHome} />
-<OxAlert.Icon path={mdiCheck} />
 ```
 
-#### 3. Benefits
+Browse 7,000+ MDI icons at [pictogrammers.com/library/mdi](https://pictogrammers.com/library/mdi/)
+
+### Custom SVG Support
+
+You can also use custom SVG components:
+
+```tsx
+import { OxIcon } from '@noxickon/onyx';
+
+<OxIcon>
+  <CustomSvgIcon />
+</OxIcon>;
+```
+
+## Compound Pattern
 
-- **91% smaller bundle** - From ~3 MB to ~267 KB (Frontend example)
-- **Tree-shaking** - Only icons you use are bundled
-- **Type-safe** - Full TypeScript validation for icon paths
-- **Better performance** - Faster load times and reduced network transfer
+Onyx components use a compound pattern for flexible composition:
 
-#### 4. Migration Tips
+```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>;
+```
 
-Search your codebase for icon usage:
+### Layout Example
 
-```bash
-# Find all icon usages
-grep -r 'path="mdi' src/
+```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>;
+```
+
+## 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
 
-# Or with ripgrep
-rg 'path="mdi' src/
+| 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
 ```
 
-Update each file:
+### 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
 
-1. Import icons from `@mdi/js` at the top
-2. Change `path="mdiXxx"` to `path={mdiXxx}`
+- **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
 
 ## License
 

package/dist/_internal/CustomSvgIcon.d.ts

@@ -0,0 +1 @@
+export declare const CustomSvgIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/_internal/constants.d.ts

@@ -0,0 +1 @@
+export declare const MOBILE_BREAKPOINT = 640;

package/dist/_internal/hooks/useEventCallback.d.ts

@@ -0,0 +1 @@
+export declare const useEventCallback: <T extends (...args: any[]) => any>(fn: T) => T;

package/dist/_internal/styles/button.variants.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const buttonVariants: (props?: ({
+    variant?: "primary" | "accent" | "default" | "gradient" | "secondary" | "ghost" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/_internal/styles/color.helpers.d.ts

@@ -0,0 +1,154 @@
+export declare const COLOR_STYLES: {
+    readonly purple: {
+        readonly bgSubtle: "bg-purple-500/30 dark:bg-purple-400/30";
+        readonly bg: "bg-purple-500";
+        readonly text: "text-purple-500 dark:text-purple-300";
+        readonly borderSubtle: "border border-purple-500/20";
+    };
+    readonly lime: {
+        readonly bgSubtle: "bg-lime-500/30 dark:bg-lime-400/30";
+        readonly bg: "bg-lime-400";
+        readonly text: "text-lime-600 dark:text-lime-300";
+        readonly borderSubtle: "border border-lime-400/20";
+    };
+    readonly red: {
+        readonly bgSubtle: "bg-red-500/30 dark:bg-red-400/30";
+        readonly bg: "bg-red-500";
+        readonly text: "text-red-500 dark:text-red-300";
+        readonly borderSubtle: "border border-red-500/20";
+    };
+    readonly yellow: {
+        readonly bgSubtle: "bg-yellow-500/30 dark:bg-yellow-400/30";
+        readonly bg: "bg-yellow-500";
+        readonly text: "text-yellow-600 dark:text-yellow-300";
+        readonly borderSubtle: "border border-yellow-500/20";
+    };
+    readonly green: {
+        readonly bgSubtle: "bg-green-500/30 dark:bg-green-400/30";
+        readonly bg: "bg-green-500";
+        readonly text: "text-green-600 dark:text-green-300";
+        readonly borderSubtle: "border border-green-500/20";
+    };
+    readonly blue: {
+        readonly bgSubtle: "bg-blue-500/30 dark:bg-blue-400/30";
+        readonly bg: "bg-blue-500";
+        readonly text: "text-blue-500 dark:text-blue-300";
+        readonly borderSubtle: "border border-blue-500/20";
+    };
+    readonly indigo: {
+        readonly bgSubtle: "bg-indigo-500/30 dark:bg-indigo-400/30";
+        readonly bg: "bg-indigo-500";
+        readonly text: "text-indigo-500 dark:text-indigo-300";
+        readonly borderSubtle: "border border-indigo-500/20";
+    };
+    readonly pink: {
+        readonly bgSubtle: "bg-pink-500/30 dark:bg-pink-400/30";
+        readonly bg: "bg-pink-500";
+        readonly text: "text-pink-500 dark:text-pink-300";
+        readonly borderSubtle: "border border-pink-500/20";
+    };
+    readonly amber: {
+        readonly bgSubtle: "bg-amber-500/30 dark:bg-amber-400/30";
+        readonly bg: "bg-amber-500";
+        readonly text: "text-amber-600 dark:text-amber-300";
+        readonly borderSubtle: "border border-amber-500/20";
+    };
+    readonly emerald: {
+        readonly bgSubtle: "bg-emerald-500/30 dark:bg-emerald-400/30";
+        readonly bg: "bg-emerald-500";
+        readonly text: "text-emerald-600 dark:text-emerald-300";
+        readonly borderSubtle: "border border-emerald-500/20";
+    };
+    readonly teal: {
+        readonly bgSubtle: "bg-teal-500/30 dark:bg-teal-400/30";
+        readonly bg: "bg-teal-500";
+        readonly text: "text-teal-600 dark:text-teal-300";
+        readonly borderSubtle: "border border-teal-500/20";
+    };
+    readonly cyan: {
+        readonly bgSubtle: "bg-cyan-500/30 dark:bg-cyan-400/30";
+        readonly bg: "bg-cyan-500";
+        readonly text: "text-cyan-600 dark:text-cyan-300";
+        readonly borderSubtle: "border border-cyan-500/20";
+    };
+    readonly sky: {
+        readonly bgSubtle: "bg-sky-500/30 dark:bg-sky-400/30";
+        readonly bg: "bg-sky-500";
+        readonly text: "text-sky-500 dark:text-sky-300";
+        readonly borderSubtle: "border border-sky-500/20";
+    };
+    readonly violet: {
+        readonly bgSubtle: "bg-violet-500/30 dark:bg-violet-400/30";
+        readonly bg: "bg-violet-500";
+        readonly text: "text-violet-500 dark:text-violet-300";
+        readonly borderSubtle: "border border-violet-500/20";
+    };
+    readonly fuchsia: {
+        readonly bgSubtle: "bg-fuchsia-500/30 dark:bg-fuchsia-400/30";
+        readonly bg: "bg-fuchsia-500";
+        readonly text: "text-fuchsia-500 dark:text-fuchsia-300";
+        readonly borderSubtle: "border border-fuchsia-500/20";
+    };
+    readonly orange: {
+        readonly bgSubtle: "bg-orange-500/30 dark:bg-orange-400/30";
+        readonly bg: "bg-orange-500";
+        readonly text: "text-orange-500 dark:text-orange-300";
+        readonly borderSubtle: "border border-orange-500/20";
+    };
+    readonly rose: {
+        readonly bgSubtle: "bg-rose-500/30 dark:bg-rose-400/30";
+        readonly bg: "bg-rose-500";
+        readonly text: "text-rose-500 dark:text-rose-300";
+        readonly borderSubtle: "border border-rose-500/20";
+    };
+    readonly gray: {
+        readonly bgSubtle: "bg-gray-500/30 dark:bg-gray-400/30";
+        readonly bg: "bg-gray-500";
+        readonly text: "text-gray-600 dark:text-gray-300";
+        readonly borderSubtle: "border border-gray-500/20";
+    };
+    readonly info: {
+        readonly bgSubtle: "bg-info/20";
+        readonly bg: "bg-info";
+        readonly text: "text-info";
+        readonly borderSubtle: "border border-info/20";
+    };
+    readonly success: {
+        readonly bgSubtle: "bg-success/20";
+        readonly bg: "bg-success";
+        readonly text: "text-success";
+        readonly borderSubtle: "border border-success/20";
+    };
+    readonly warning: {
+        readonly bgSubtle: "bg-warning/20";
+        readonly bg: "bg-warning";
+        readonly text: "text-warning";
+        readonly borderSubtle: "border border-warning/20";
+    };
+    readonly destructive: {
+        readonly bgSubtle: "bg-destructive/20";
+        readonly bg: "bg-destructive";
+        readonly text: "text-destructive";
+        readonly borderSubtle: "border border-destructive/20";
+    };
+    readonly primary: {
+        readonly bgSubtle: "bg-primary/20";
+        readonly bg: "bg-primary";
+        readonly text: "text-primary";
+        readonly borderSubtle: "border border-primary/20";
+    };
+    readonly accent: {
+        readonly bgSubtle: "bg-accent/20";
+        readonly bg: "bg-accent";
+        readonly text: "text-accent";
+        readonly borderSubtle: "border border-accent/20";
+    };
+    readonly default: {
+        readonly bgSubtle: "bg-secondary";
+        readonly bg: "bg-secondary";
+        readonly text: "text-secondary-foreground";
+        readonly borderSubtle: "border border-secondary/20";
+    };
+};
+export type ColorStyleName = keyof typeof COLOR_STYLES;
+export type StyleObject = (typeof COLOR_STYLES)[ColorStyleName];

package/dist/_internal/styles/index.d.ts

@@ -0,0 +1,4 @@
+export * from './color.helpers';
+export * from './status.styles';
+export * from './button.variants';
+export * from './link.variants';

package/dist/_internal/styles/link.variants.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const linkVariants: (props?: ({
+    variant?: "primary" | "accent" | "secondary" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LinkVariants = VariantProps<typeof linkVariants>;

package/dist/_internal/styles/status.styles.d.ts

@@ -0,0 +1,38 @@
+export declare const STATUS_STYLES: {
+    readonly destructive: {
+        readonly icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+        readonly bgSubtle: "bg-destructive/20";
+        readonly bg: "bg-destructive";
+        readonly text: "text-destructive";
+        readonly borderSubtle: "border border-destructive/20";
+    };
+    readonly success: {
+        readonly icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+        readonly bgSubtle: "bg-success/20";
+        readonly bg: "bg-success";
+        readonly text: "text-success";
+        readonly borderSubtle: "border border-success/20";
+    };
+    readonly warning: {
+        readonly icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+        readonly bgSubtle: "bg-warning/20";
+        readonly bg: "bg-warning";
+        readonly text: "text-warning";
+        readonly borderSubtle: "border border-warning/20";
+    };
+    readonly info: {
+        readonly icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+        readonly bgSubtle: "bg-info/20";
+        readonly bg: "bg-info";
+        readonly text: "text-info";
+        readonly borderSubtle: "border border-info/20";
+    };
+    readonly default: {
+        readonly icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+        readonly bgSubtle: "bg-secondary";
+        readonly bg: "bg-secondary";
+        readonly text: "text-secondary-foreground";
+        readonly borderSubtle: "border border-secondary/20";
+    };
+};
+export type StatusType = keyof typeof STATUS_STYLES;

package/dist/_internal/utils/Portal/Portal.d.ts

@@ -0,0 +1,2 @@
+import { PortalProps } from './Portal.types';
+export declare const Portal: ({ children, container }: PortalProps) => import('react').ReactPortal | null;

package/dist/_internal/utils/Portal/Portal.types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface PortalProps {
+    children: ReactNode;
+    container?: Element | DocumentFragment;
+}

package/dist/_internal/utils/Portal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Portal.types';
+export * from './Portal';

package/dist/_internal/utils/Slot/Slot.types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode, Ref } from 'react';
+export interface SlotProps {
+    [key: string]: unknown;
+    children?: ReactNode;
+    ref?: Ref<unknown>;
+}

package/dist/_internal/utils/Slot/createSlot.d.ts

@@ -0,0 +1,5 @@
+import { SlotProps } from './Slot.types';
+export declare const createSlot: (ownerName: string, fallback: string) => {
+    (props: SlotProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+    displayName: string;
+};

package/dist/_internal/utils/Slot/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Slot.types';
+export { createSlot } from './createSlot';

package/dist/_internal/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './isIconOnly';
+export * from './pickClasses';
+export * from './Portal';
+export * from './Slot';

package/dist/_internal/utils/isIconOnly.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const isIconOnly: (children: ReactNode) => boolean;

package/dist/_internal/utils/pickClasses.d.ts

@@ -0,0 +1 @@
+export declare const pickClasses: <T extends Record<string, string | unknown>>(styleObject: T, keys: Array<keyof T>) => string;