@gamecp/ui 0.1.0

package/README.md

@@ -0,0 +1,244 @@
+# @gamecp/ui
+
+React UI component library for GameCP. A collection of reusable, accessible, and customizable components built with React, TypeScript, and Tailwind CSS.
+
+## Installation
+
+```bash
+npm install @gamecp/ui
+```
+
+## Requirements
+
+- React 19+
+- Tailwind CSS (configured in your project)
+- react-icons
+- framer-motion
+- Next.js 15+ (for Link component)
+
+## Usage
+
+```tsx
+import { Button, Card, FormInput, Badge } from '@gamecp/ui';
+
+function MyComponent() {
+  return (
+    <Card title="Example Card">
+      <FormInput
+        label="Email"
+        name="email"
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <Button variant="primary">Submit</Button>
+      <Badge variant="success">Active</Badge>
+    </Card>
+  );
+}
+```
+
+## Components
+
+### Core Components
+
+#### Button
+Versatile button component with multiple variants and sizes.
+
+```tsx
+<Button variant="primary" size="md" isLoading={false}>
+  Click me
+</Button>
+```
+
+**Props:**
+- `variant`: 'primary' | 'secondary' | 'destructive' | 'ghost' | 'link' | 'outline'
+- `size`: 'sm' | 'md' | 'lg'
+- `isLoading`: boolean
+- `leftIcon`, `rightIcon`: React.ReactNode
+- `fullWidth`: boolean
+
+#### Badge
+Display status, categories, or labels.
+
+```tsx
+<Badge variant="success" size="md">Active</Badge>
+```
+
+**Props:**
+- `variant`: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'gray' | 'purple' | etc.
+- `size`: 'sm' | 'md' | 'lg'
+- `customColors`: { background, text, border }
+
+#### Card
+Flexible container component with header, content, and footer sections.
+
+```tsx
+<Card 
+  title="Card Title"
+  subtitle="Subtitle"
+  icon={IconComponent}
+  variant="default"
+>
+  Card content
+</Card>
+```
+
+**Variants:**
+- `SimpleCard`: Basic card
+- `HeaderCard`: Card with header section
+- `StatusCard`: Card with status indicator
+- `ClickableCard`: Interactive card
+- `AccordionCard`: Collapsible card
+
+#### Link
+Next.js Link wrapper with consistent styling.
+
+```tsx
+<Link href="/dashboard" variant="primary">
+  Go to Dashboard
+</Link>
+```
+
+### Form Components
+
+#### FormInput
+Comprehensive form input supporting multiple types.
+
+```tsx
+<FormInput
+  label="Username"
+  name="username"
+  type="text"
+  value={value}
+  onChange={handleChange}
+  required
+  error={errors.username}
+  description="Enter your username"
+/>
+```
+
+**Supported Types:**
+- text, email, password, number, tel, url
+- checkbox, textarea, color
+
+**Features:**
+- Icon support (left/right)
+- Password visibility toggle
+- Copy to clipboard
+- Clear button
+- Loading states
+- Error handling
+
+#### Switch
+Toggle switch component.
+
+```tsx
+<Switch
+  checked={enabled}
+  onChange={setEnabled}
+  label="Enable feature"
+  description="Turn this on to enable the feature"
+/>
+```
+
+### UI Components
+
+#### Modal
+Accessible modal dialog with animations.
+
+```tsx
+<Modal
+  isOpen={isOpen}
+  onClose={handleClose}
+  title="Modal Title"
+  size="md"
+>
+  Modal content
+</Modal>
+```
+
+**Props:**
+- `size`: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+- `blocking`: boolean (prevents closing)
+- `variant`: 'default' | 'plain'
+- `fullScreen`: boolean
+
+#### LoadingSpinner
+Animated loading indicator.
+
+```tsx
+<LoadingSpinner message="Loading..." showMessage />
+```
+
+### Layout Components
+
+#### PageHeader
+Consistent page header with title, subtitle, and actions.
+
+```tsx
+<PageHeader
+  icon={IconComponent}
+  title="Page Title"
+  subtitle="Page description"
+  rightContent={<Button>Action</Button>}
+/>
+```
+
+#### FormSection
+Organize form fields into logical sections.
+
+```tsx
+<FormSection
+  title="Account Settings"
+  description="Manage your account preferences"
+>
+  <FormInput... />
+  <FormInput... />
+</FormSection>
+```
+
+#### Grid & GridItem
+Responsive grid layout system.
+
+```tsx
+<Grid cols={3} gap={4}>
+  <GridItem span={1}>Content 1</GridItem>
+  <GridItem span={2}>Content 2</GridItem>
+</Grid>
+```
+
+## Styling
+
+All components use Tailwind CSS utility classes and expect your project to have Tailwind configured. The components use semantic color tokens like:
+
+- `primary`, `secondary`, `destructive`
+- `foreground`, `background`, `muted`
+- `border`, `ring`, `success`, `error`
+
+Make sure these are defined in your Tailwind theme.
+
+## TypeScript
+
+All components are fully typed with TypeScript. Import types as needed:
+
+```tsx
+import type { ButtonProps, BadgeVariant } from '@gamecp/ui';
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Watch mode for development
+npm run dev
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import React__default, { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconType } from 'react-icons';
+
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'ghost' | 'link' | 'outline';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    leftIcon?: React__default.ReactNode;
+    rightIcon?: React__default.ReactNode;
+    fullWidth?: boolean;
+}
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'gray' | 'purple' | 'pink' | 'indigo' | 'yellow' | 'orange' | 'teal' | 'cyan' | 'lime' | 'emerald' | 'rose' | 'sky' | 'violet' | 'fuchsia' | 'amber' | 'custom';
+type BadgeSize = 'sm' | 'md' | 'lg';
+interface BadgeProps {
+    children: React__default.ReactNode;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    className?: string;
+    customColors?: {
+        background: string;
+        text: string;
+        border?: string;
+    };
+}
+declare function Badge({ children, variant, size, className, customColors, }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare const SuccessBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const WarningBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const ErrorBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const InfoBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const PrimaryBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const GrayBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare function StatusBadge({ isActive, activeText, inactiveText, ...props }: {
+    isActive: boolean;
+    activeText?: string;
+    inactiveText?: string;
+} & Omit<BadgeProps, 'children' | 'variant'>): react_jsx_runtime.JSX.Element;
+
+interface BaseCardProps {
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type BorderAccent = 'none' | 'green' | 'blue' | 'red' | 'yellow' | 'purple' | 'orange' | 'gray';
+type CardVariant = 'default' | 'elevated' | 'outlined' | 'filled';
+interface InteractiveCardProps extends BaseCardProps {
+    hover?: boolean;
+    clickable?: boolean;
+}
+interface HeaderCardProps extends InteractiveCardProps {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    icon?: IconType;
+    iconColor?: 'green' | 'blue' | 'red' | 'yellow' | 'purple' | 'orange' | 'gray' | 'indigo' | 'pink';
+    iconSize?: 'sm' | 'md' | 'lg';
+    actionButton?: ReactNode;
+    headerClassName?: string;
+}
+interface AccordionCardProps extends HeaderCardProps {
+    accordion?: boolean;
+    defaultExpanded?: boolean;
+    onToggle?: (isExpanded: boolean) => void;
+    contentClassName?: string;
+}
+interface StatusCardProps extends HeaderCardProps {
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    statusIcon?: ReactNode;
+    statusText?: string;
+}
+interface CardProps extends AccordionCardProps, StatusCardProps {
+    padding?: CardPadding;
+    borderAccent?: BorderAccent;
+    variant?: CardVariant;
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    minHeight?: string;
+    maxHeight?: string;
+}
+declare function Card({ children, className, onClick, disabled, padding, borderAccent, variant, overflow, minHeight, maxHeight, hover, clickable, title, subtitle, description, icon: Icon, iconColor, iconSize, actionButton, headerClassName, accordion, defaultExpanded, onToggle, contentClassName, status, statusIcon, statusText, }: CardProps): react_jsx_runtime.JSX.Element;
+declare function SimpleCard({ children, className, ...props }: BaseCardProps): react_jsx_runtime.JSX.Element;
+declare function HeaderCard({ title, subtitle, description, icon, iconColor, iconSize, actionButton, children, className, ...props }: HeaderCardProps): react_jsx_runtime.JSX.Element;
+declare function StatusCard({ status, statusIcon, statusText, children, className, ...props }: StatusCardProps): react_jsx_runtime.JSX.Element;
+declare function ClickableCard({ onClick, children, className, ...props }: InteractiveCardProps): react_jsx_runtime.JSX.Element;
+declare function AccordionCard({ accordion, children, className, ...props }: AccordionCardProps): react_jsx_runtime.JSX.Element;
+
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    variant?: 'default' | 'primary' | 'muted';
+    underline?: boolean;
+    external?: boolean;
+}
+declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
+
+type IconConfig = React__default.ReactNode | {
+    left?: React__default.ReactNode;
+    right?: React__default.ReactNode;
+};
+interface FormInputProps {
+    label: string;
+    name: string;
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'checkbox' | 'textarea' | 'color';
+    value: string | number | boolean;
+    onChange: (e: React__default.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string | React__default.ReactNode;
+    className?: string;
+    inputClassName?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    maxLength?: number;
+    autoComplete?: string;
+    description?: string | React__default.ReactNode;
+    footerDescription?: string | React__default.ReactNode;
+    autoFocus?: boolean;
+    onKeyDown?: (e: React__default.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur?: (e: React__default.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    icon?: IconConfig;
+    rows?: number;
+    showHidePassword?: boolean;
+    onGeneratePassword?: () => void;
+    copyable?: boolean;
+    readOnly?: boolean;
+    clearable?: boolean;
+}
+declare function FormInput({ label, name, type, value, onChange, placeholder, required, disabled, error, className, inputClassName, min, max, step, maxLength, autoComplete, description, footerDescription, autoFocus, onKeyDown, onBlur, icon, rows, showHidePassword, onGeneratePassword, copyable, readOnly, clearable, }: FormInputProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare function Switch({ checked, onChange, disabled, label, description, className, size, }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    title?: string;
+    header?: ReactNode;
+    blocking?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    className?: string;
+    footer?: ReactNode;
+    fullScreen?: boolean;
+    noPadding?: boolean;
+    footerBg?: 'white' | 'gray';
+    variant?: 'default' | 'plain';
+    scrollable?: boolean;
+    'aria-describedby'?: string;
+    customStyles?: {
+        container?: string;
+        backdrop?: string;
+        content?: string;
+        header?: string;
+        footer?: string;
+    };
+}
+declare function Modal({ isOpen, onClose, children, title, header, blocking, size, className, footer, fullScreen, noPadding, footerBg, variant, scrollable, 'aria-describedby': ariaDescribedBy, customStyles, }: ModalProps): React.ReactPortal | null;
+
+interface LoadingSpinnerProps {
+    message?: string;
+    className?: string;
+    showMessage?: boolean;
+}
+declare const LoadingSpinner: ({ message, className, showMessage, }: LoadingSpinnerProps) => react_jsx_runtime.JSX.Element;
+
+interface PageHeaderProps {
+    icon?: IconType;
+    title: string;
+    subtitle?: string;
+    rightContent?: React__default.ReactNode;
+    className?: string;
+}
+declare function PageHeader({ icon: Icon, title, subtitle, rightContent, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface FormSectionProps {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    className?: string;
+}
+declare function FormSection({ title, description, children, className, }: FormSectionProps): react_jsx_runtime.JSX.Element;
+
+interface GridProps {
+    children: React__default.ReactNode;
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
+    gap?: 1 | 2 | 3 | 4 | 6 | 8;
+    className?: string;
+}
+declare function Grid({ children, cols, gap, className, }: GridProps): react_jsx_runtime.JSX.Element;
+declare function GridItem({ children, span, className, }: {
+    children: React__default.ReactNode;
+    span?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { AccordionCard, Badge, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, ClickableCard, ErrorBadge, FormInput, FormSection, GrayBadge, Grid, GridItem, HeaderCard, InfoBadge, Link, type LinkProps, LoadingSpinner, Modal, PageHeader, PrimaryBadge, SimpleCard, StatusBadge, StatusCard, SuccessBadge, Switch, WarningBadge };

package/dist/index.d.ts

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import React__default, { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconType } from 'react-icons';
+
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'ghost' | 'link' | 'outline';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    leftIcon?: React__default.ReactNode;
+    rightIcon?: React__default.ReactNode;
+    fullWidth?: boolean;
+}
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'gray' | 'purple' | 'pink' | 'indigo' | 'yellow' | 'orange' | 'teal' | 'cyan' | 'lime' | 'emerald' | 'rose' | 'sky' | 'violet' | 'fuchsia' | 'amber' | 'custom';
+type BadgeSize = 'sm' | 'md' | 'lg';
+interface BadgeProps {
+    children: React__default.ReactNode;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    className?: string;
+    customColors?: {
+        background: string;
+        text: string;
+        border?: string;
+    };
+}
+declare function Badge({ children, variant, size, className, customColors, }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare const SuccessBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const WarningBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const ErrorBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const InfoBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const PrimaryBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare const GrayBadge: (props: Omit<BadgeProps, "variant">) => react_jsx_runtime.JSX.Element;
+declare function StatusBadge({ isActive, activeText, inactiveText, ...props }: {
+    isActive: boolean;
+    activeText?: string;
+    inactiveText?: string;
+} & Omit<BadgeProps, 'children' | 'variant'>): react_jsx_runtime.JSX.Element;
+
+interface BaseCardProps {
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type BorderAccent = 'none' | 'green' | 'blue' | 'red' | 'yellow' | 'purple' | 'orange' | 'gray';
+type CardVariant = 'default' | 'elevated' | 'outlined' | 'filled';
+interface InteractiveCardProps extends BaseCardProps {
+    hover?: boolean;
+    clickable?: boolean;
+}
+interface HeaderCardProps extends InteractiveCardProps {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    icon?: IconType;
+    iconColor?: 'green' | 'blue' | 'red' | 'yellow' | 'purple' | 'orange' | 'gray' | 'indigo' | 'pink';
+    iconSize?: 'sm' | 'md' | 'lg';
+    actionButton?: ReactNode;
+    headerClassName?: string;
+}
+interface AccordionCardProps extends HeaderCardProps {
+    accordion?: boolean;
+    defaultExpanded?: boolean;
+    onToggle?: (isExpanded: boolean) => void;
+    contentClassName?: string;
+}
+interface StatusCardProps extends HeaderCardProps {
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    statusIcon?: ReactNode;
+    statusText?: string;
+}
+interface CardProps extends AccordionCardProps, StatusCardProps {
+    padding?: CardPadding;
+    borderAccent?: BorderAccent;
+    variant?: CardVariant;
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    minHeight?: string;
+    maxHeight?: string;
+}
+declare function Card({ children, className, onClick, disabled, padding, borderAccent, variant, overflow, minHeight, maxHeight, hover, clickable, title, subtitle, description, icon: Icon, iconColor, iconSize, actionButton, headerClassName, accordion, defaultExpanded, onToggle, contentClassName, status, statusIcon, statusText, }: CardProps): react_jsx_runtime.JSX.Element;
+declare function SimpleCard({ children, className, ...props }: BaseCardProps): react_jsx_runtime.JSX.Element;
+declare function HeaderCard({ title, subtitle, description, icon, iconColor, iconSize, actionButton, children, className, ...props }: HeaderCardProps): react_jsx_runtime.JSX.Element;
+declare function StatusCard({ status, statusIcon, statusText, children, className, ...props }: StatusCardProps): react_jsx_runtime.JSX.Element;
+declare function ClickableCard({ onClick, children, className, ...props }: InteractiveCardProps): react_jsx_runtime.JSX.Element;
+declare function AccordionCard({ accordion, children, className, ...props }: AccordionCardProps): react_jsx_runtime.JSX.Element;
+
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    variant?: 'default' | 'primary' | 'muted';
+    underline?: boolean;
+    external?: boolean;
+}
+declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
+
+type IconConfig = React__default.ReactNode | {
+    left?: React__default.ReactNode;
+    right?: React__default.ReactNode;
+};
+interface FormInputProps {
+    label: string;
+    name: string;
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'checkbox' | 'textarea' | 'color';
+    value: string | number | boolean;
+    onChange: (e: React__default.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string | React__default.ReactNode;
+    className?: string;
+    inputClassName?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    maxLength?: number;
+    autoComplete?: string;
+    description?: string | React__default.ReactNode;
+    footerDescription?: string | React__default.ReactNode;
+    autoFocus?: boolean;
+    onKeyDown?: (e: React__default.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur?: (e: React__default.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    icon?: IconConfig;
+    rows?: number;
+    showHidePassword?: boolean;
+    onGeneratePassword?: () => void;
+    copyable?: boolean;
+    readOnly?: boolean;
+    clearable?: boolean;
+}
+declare function FormInput({ label, name, type, value, onChange, placeholder, required, disabled, error, className, inputClassName, min, max, step, maxLength, autoComplete, description, footerDescription, autoFocus, onKeyDown, onBlur, icon, rows, showHidePassword, onGeneratePassword, copyable, readOnly, clearable, }: FormInputProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare function Switch({ checked, onChange, disabled, label, description, className, size, }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    title?: string;
+    header?: ReactNode;
+    blocking?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    className?: string;
+    footer?: ReactNode;
+    fullScreen?: boolean;
+    noPadding?: boolean;
+    footerBg?: 'white' | 'gray';
+    variant?: 'default' | 'plain';
+    scrollable?: boolean;
+    'aria-describedby'?: string;
+    customStyles?: {
+        container?: string;
+        backdrop?: string;
+        content?: string;
+        header?: string;
+        footer?: string;
+    };
+}
+declare function Modal({ isOpen, onClose, children, title, header, blocking, size, className, footer, fullScreen, noPadding, footerBg, variant, scrollable, 'aria-describedby': ariaDescribedBy, customStyles, }: ModalProps): React.ReactPortal | null;
+
+interface LoadingSpinnerProps {
+    message?: string;
+    className?: string;
+    showMessage?: boolean;
+}
+declare const LoadingSpinner: ({ message, className, showMessage, }: LoadingSpinnerProps) => react_jsx_runtime.JSX.Element;
+
+interface PageHeaderProps {
+    icon?: IconType;
+    title: string;
+    subtitle?: string;
+    rightContent?: React__default.ReactNode;
+    className?: string;
+}
+declare function PageHeader({ icon: Icon, title, subtitle, rightContent, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface FormSectionProps {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    className?: string;
+}
+declare function FormSection({ title, description, children, className, }: FormSectionProps): react_jsx_runtime.JSX.Element;
+
+interface GridProps {
+    children: React__default.ReactNode;
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
+    gap?: 1 | 2 | 3 | 4 | 6 | 8;
+    className?: string;
+}
+declare function Grid({ children, cols, gap, className, }: GridProps): react_jsx_runtime.JSX.Element;
+declare function GridItem({ children, span, className, }: {
+    children: React__default.ReactNode;
+    span?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { AccordionCard, Badge, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, ClickableCard, ErrorBadge, FormInput, FormSection, GrayBadge, Grid, GridItem, HeaderCard, InfoBadge, Link, type LinkProps, LoadingSpinner, Modal, PageHeader, PrimaryBadge, SimpleCard, StatusBadge, StatusCard, SuccessBadge, Switch, WarningBadge };