@dilipod/ui 0.1.0

package/README.md

@@ -0,0 +1,226 @@
+# @dilipod/ui
+
+Dilipod Design System - Shared UI components and styles for Dilipod applications.
+
+## Features
+
+- 🎨 **Black + Cyan** color system
+- 📦 **Tree-shakeable** components
+- 🎯 **TypeScript** first
+- 📚 **Storybook** documentation
+- ⚡ **Tailwind CSS v4** powered
+
+## Installation
+
+```bash
+# From the monorepo root
+npm install
+```
+
+## Usage
+
+### Import Components
+
+```tsx
+import { 
+  Button, 
+  Logo, 
+  Sheet,
+  Badge,
+  Card,
+  Progress,
+  IconBox,
+  Tag,
+  Stat
+} from '@dilipod/ui'
+
+export function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Agent Status</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Badge variant="primary" pulse>Active</Badge>
+        <Progress value={84} showLabel />
+        <Stat value="1,247" label="Docs Processed" valueColor="primary" />
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+### Import Styles
+
+In your app's global CSS file:
+
+```css
+@import '@dilipod/ui/styles.css';
+```
+
+## Components
+
+### Core Components
+
+| Component | Description |
+|-----------|-------------|
+| **Button** | Versatile button with 7 variants and 4 sizes |
+| **Logo** | Dilipod logo with dark/light variants |
+| **Sheet** | Slide-out panel for mobile menus, sidebars |
+
+### Data Display
+
+| Component | Description |
+|-----------|-------------|
+| **Badge** | Status indicators with pulse animation |
+| **Card** | Content container with header/content/footer |
+| **Progress** | Progress bar with label support |
+| **Stat** | Big number + label for metrics |
+
+### Layout
+
+| Component | Description |
+|-----------|-------------|
+| **IconBox** | Icon container with variants and sizes |
+| **Tag** | Inline pills/chips for labels |
+
+## Component API
+
+### Badge
+
+```tsx
+<Badge variant="primary" pulse>Active</Badge>
+<Badge variant="success">Completed</Badge>
+<Badge variant="error">Failed</Badge>
+<Badge variant="warning">Pending</Badge>
+<Badge variant="outline" size="sm">Draft</Badge>
+```
+
+### Card
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+  <CardFooter>Footer</CardFooter>
+</Card>
+```
+
+### Progress
+
+```tsx
+<Progress value={75} />
+<Progress value={84} showLabel />
+<Progress value={100} variant="success" size="lg" />
+<Progress value={50} variant="gradient" />
+```
+
+### IconBox
+
+```tsx
+<IconBox><BrainIcon /></IconBox>
+<IconBox variant="primary" size="lg"><FileIcon /></IconBox>
+<IconBox variant="gradient" rounded="full"><AIIcon /></IconBox>
+```
+
+### Tag
+
+```tsx
+<Tag>Label</Tag>
+<Tag variant="primary">Active</Tag>
+<Tag variant="outline" icon={<IndustryIcon />}>Real Estate</Tag>
+```
+
+### Stat
+
+```tsx
+<Stat value="1,247" label="Docs Reviewed" />
+<Stat value="80%" suffix="cheaper" valueSize="lg" />
+<Stat value="99.8%" label="Accuracy" valueColor="primary" />
+<Stat value="24h" label="Deploy Time" variant="card" align="center" />
+```
+
+## Color System
+
+| Variable | Value | Usage |
+|----------|-------|-------|
+| `--black` | `#0A0A0A` | Primary text, backgrounds |
+| `--cyan` | `#00B8A9` | Primary accent |
+| `--cyan-dark` | `#007A70` | Gradients, hover states |
+| `--cyan-light` | `#00E5D4` | Highlights |
+
+### Status Colors
+
+| Status | Color |
+|--------|-------|
+| Success | Cyan (`--cyan`) |
+| Error | Red |
+| Warning | Amber |
+
+### Gradient Utilities
+
+```css
+.bg-gradient-light  /* Light hero background */
+.bg-gradient-dark   /* Dark section background */
+.bg-gradient-full   /* Full black-to-cyan gradient */
+.text-gradient      /* Gradient text */
+```
+
+### Glass Effects
+
+```css
+.glass       /* Light glassmorphism */
+.glass-dark  /* Dark glassmorphism */
+```
+
+## Development
+
+```bash
+# Start Storybook
+npm run storybook
+
+# Build the package
+npm run build
+
+# Watch mode
+npm run dev
+```
+
+## Storybook
+
+View all components with interactive examples:
+
+```bash
+cd packages/ui
+npm run storybook
+```
+
+Opens at http://localhost:6006
+
+## Icons
+
+All icons are re-exported from `@phosphor-icons/react`. Import them from `@dilipod/ui`:
+
+```tsx
+import { 
+  ArrowRight, Brain, CheckCircle, Robot, 
+  Database, Receipt, Calendar, Gear 
+} from '@dilipod/ui'
+```
+
+### Available Icon Categories
+
+- **Navigation**: `ArrowRight`, `ArrowUpRight`, `ArrowLeft`, `CaretRight`, `CaretDown`, `List`, `X`
+- **Actions**: `Plus`, `Minus`, `Check`, `Play`, `Pause`, `Stop`
+- **Business**: `Brain`, `Robot`, `Gear`, `Files`, `Database`, `Receipt`, `Wallet`, `Clock`, `Calendar`
+- **Industries**: `Buildings`, `Briefcase`, `FirstAid`, `ShoppingCart`, `AddressBook`
+- **Status**: `CheckCircle`, `CheckSquare`, `WarningCircle`, `Warning`, `Info`
+- **Social**: `LinkedinLogo`, `XLogo`, `EnvelopeSimple`, `Envelope`, `Phone`, `Globe`
+- **UI**: `House`, `MagnifyingGlass`, `Trash`, `PencilSimple`, `Eye`, `Download`, `Upload`
+
+## License
+
+Private - Dilipod

package/dist/index.d.mts

@@ -0,0 +1,133 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { ClassValue } from 'clsx';
+export { AddressBook, ArrowLeft, ArrowRight, ArrowSquareOut, ArrowUpRight, Brain, Briefcase, Buildings, Calendar, CaretDown, CaretRight, CaretUp, ChartBar, ChartLineUp, ChatCircle, Check, CheckCircle, CheckSquare, Circle, Clock, Copy, Database, DotsThree, DotsThreeVertical, Download, Envelope, EnvelopeSimple, Eye, EyeSlash, File, FileText, Files, FirstAid, Funnel, Gear, GearSix, Globe, Handshake, House, Icon, IconProps, Info, Link, LinkedinLogo, List, MagnifyingGlass, Minus, Pause, PencilSimple, Phone, Play, Plus, Question, Receipt, Robot, ShoppingCart, SignIn, SignOut, SortAscending, SortDescending, Stop, Trash, Upload, User, UserPlus, Users, UsersThree, VideoCamera, Wallet, Warning, WarningCircle, X, XLogo } from '@phosphor-icons/react';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+interface LogoProps {
+    variant?: 'dark' | 'light';
+    size?: 'sm' | 'md' | 'lg';
+    href?: string;
+    className?: string;
+}
+/**
+ * Logo component that renders the Dilipod logo as inline SVG
+ *
+ * @param variant - 'dark' for light backgrounds (black text), 'light' for dark backgrounds (white text)
+ * @param size - 'sm' | 'md' | 'lg'
+ * @param href - Optional link href (wraps logo in anchor tag)
+ * @param className - Additional CSS classes
+ */
+declare function Logo({ variant, size, href, className, }: LogoProps): react_jsx_runtime.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "primary" | "outline" | "success" | "warning" | "error" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    /** Show animated pulse dot */
+    pulse?: boolean;
+    /** Custom pulse color (overrides variant-based color) */
+    pulseColor?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const progressVariants: (props?: ({
+    variant?: "default" | "success" | "warning" | "error" | "gradient" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressVariants> {
+    /** Progress value (0-100) */
+    value: number;
+    /** Show percentage label */
+    showLabel?: boolean;
+    /** Custom label text (defaults to "Progress") */
+    label?: string;
+    /** Size of the progress bar */
+    size?: 'sm' | 'default' | 'lg';
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const iconBoxVariants: (props?: ({
+    variant?: "default" | "primary" | "outline" | "ghost" | "gradient" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+    rounded?: "default" | "sm" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconBoxProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof iconBoxVariants> {
+}
+declare const IconBox: React.ForwardRefExoticComponent<IconBoxProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const tagVariants: (props?: ({
+    variant?: "default" | "primary" | "outline" | "dark" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {
+    /** Optional icon to display before text */
+    icon?: React.ReactNode;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const statVariants: (props?: ({
+    variant?: "default" | "card" | null | undefined;
+    align?: "center" | "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const valueVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+    color?: "default" | "primary" | "white" | "gradient" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StatProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statVariants> {
+    /** The main value to display */
+    value: string | number;
+    /** Label below the value */
+    label?: string;
+    /** Optional suffix after value (e.g., "faster", "cheaper") */
+    suffix?: string;
+    /** Size of the value text */
+    valueSize?: 'sm' | 'default' | 'lg' | 'xl';
+    /** Color of the value */
+    valueColor?: 'default' | 'primary' | 'white' | 'gradient';
+}
+declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLDivElement>>;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, IconBox, type IconBoxProps, Logo, type LogoProps, Progress, type ProgressProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Stat, type StatProps, Tag, type TagProps, badgeVariants, buttonVariants, cn, iconBoxVariants, progressVariants, statVariants, tagVariants, valueVariants };

package/dist/index.d.ts

@@ -0,0 +1,133 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { ClassValue } from 'clsx';
+export { AddressBook, ArrowLeft, ArrowRight, ArrowSquareOut, ArrowUpRight, Brain, Briefcase, Buildings, Calendar, CaretDown, CaretRight, CaretUp, ChartBar, ChartLineUp, ChatCircle, Check, CheckCircle, CheckSquare, Circle, Clock, Copy, Database, DotsThree, DotsThreeVertical, Download, Envelope, EnvelopeSimple, Eye, EyeSlash, File, FileText, Files, FirstAid, Funnel, Gear, GearSix, Globe, Handshake, House, Icon, IconProps, Info, Link, LinkedinLogo, List, MagnifyingGlass, Minus, Pause, PencilSimple, Phone, Play, Plus, Question, Receipt, Robot, ShoppingCart, SignIn, SignOut, SortAscending, SortDescending, Stop, Trash, Upload, User, UserPlus, Users, UsersThree, VideoCamera, Wallet, Warning, WarningCircle, X, XLogo } from '@phosphor-icons/react';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+
+interface LogoProps {
+    variant?: 'dark' | 'light';
+    size?: 'sm' | 'md' | 'lg';
+    href?: string;
+    className?: string;
+}
+/**
+ * Logo component that renders the Dilipod logo as inline SVG
+ *
+ * @param variant - 'dark' for light backgrounds (black text), 'light' for dark backgrounds (white text)
+ * @param size - 'sm' | 'md' | 'lg'
+ * @param href - Optional link href (wraps logo in anchor tag)
+ * @param className - Additional CSS classes
+ */
+declare function Logo({ variant, size, href, className, }: LogoProps): react_jsx_runtime.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "primary" | "outline" | "success" | "warning" | "error" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    /** Show animated pulse dot */
+    pulse?: boolean;
+    /** Custom pulse color (overrides variant-based color) */
+    pulseColor?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const progressVariants: (props?: ({
+    variant?: "default" | "success" | "warning" | "error" | "gradient" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressVariants> {
+    /** Progress value (0-100) */
+    value: number;
+    /** Show percentage label */
+    showLabel?: boolean;
+    /** Custom label text (defaults to "Progress") */
+    label?: string;
+    /** Size of the progress bar */
+    size?: 'sm' | 'default' | 'lg';
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const iconBoxVariants: (props?: ({
+    variant?: "default" | "primary" | "outline" | "ghost" | "gradient" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+    rounded?: "default" | "sm" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconBoxProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof iconBoxVariants> {
+}
+declare const IconBox: React.ForwardRefExoticComponent<IconBoxProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const tagVariants: (props?: ({
+    variant?: "default" | "primary" | "outline" | "dark" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {
+    /** Optional icon to display before text */
+    icon?: React.ReactNode;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+
+declare const statVariants: (props?: ({
+    variant?: "default" | "card" | null | undefined;
+    align?: "center" | "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const valueVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+    color?: "default" | "primary" | "white" | "gradient" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StatProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statVariants> {
+    /** The main value to display */
+    value: string | number;
+    /** Label below the value */
+    label?: string;
+    /** Optional suffix after value (e.g., "faster", "cheaper") */
+    suffix?: string;
+    /** Size of the value text */
+    valueSize?: 'sm' | 'default' | 'lg' | 'xl';
+    /** Color of the value */
+    valueColor?: 'default' | 'primary' | 'white' | 'gradient';
+}
+declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLDivElement>>;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, IconBox, type IconBoxProps, Logo, type LogoProps, Progress, type ProgressProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Stat, type StatProps, Tag, type TagProps, badgeVariants, buttonVariants, cn, iconBoxVariants, progressVariants, statVariants, tagVariants, valueVariants };