@gamecp/ui 0.1.0 → 0.1.13

package/dist/index.d.mts

@@ -1,20 +1,8 @@
-import * as React from 'react';
-import React__default, { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
 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 {
@@ -29,17 +17,18 @@ interface BadgeProps {
     };
 }
 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;
+
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'danger' | '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>>;
 
 interface BaseCardProps {
     children: ReactNode;
@@ -82,32 +71,82 @@ interface CardProps extends AccordionCardProps, StatusCardProps {
     overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
     minHeight?: string;
     maxHeight?: string;
+    id?: 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;
+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, id, }: CardProps): react_jsx_runtime.JSX.Element;
 
-interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    href: string;
-    variant?: 'default' | 'primary' | 'muted';
-    underline?: boolean;
-    external?: boolean;
+interface ConfirmDialogOptions {
+    title: string;
+    message: string;
+    confirmText: string;
+    cancelText?: string;
+    confirmButtonColor?: 'red' | 'blue' | 'green';
 }
-declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
+interface ConfirmDialogProps {
+    isOpen: boolean;
+    options: ConfirmDialogOptions;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+declare function ConfirmDialog({ isOpen, options, onConfirm, onCancel }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to use confirmation dialogs
+ *
+ * @example
+ * ```tsx
+ * const { confirm } = useConfirmDialog();
+ *
+ * const handleDelete = async () => {
+ *   const confirmed = await confirm({
+ *     title: 'Delete Item',
+ *     message: 'Are you sure you want to delete this item?',
+ *     confirmText: 'Delete',
+ *     confirmButtonColor: 'red'
+ *   });
+ *
+ *   if (confirmed) {
+ *     // Delete the item
+ *   }
+ * };
+ * ```
+ */
+declare function useConfirmDialog(): {
+    confirm: (opts: ConfirmDialogOptions) => Promise<boolean>;
+    dialog: react_jsx_runtime.JSX.Element;
+};
+
+interface ContainerProps {
+    children: React__default.ReactNode;
+    className?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    id?: string;
+}
+declare function Container({ children, className, padding, id }: ContainerProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    icon: IconType;
+    title: string;
+    subtitle: string;
+    action?: React__default.ReactNode;
+    className?: string;
+}
+declare const EmptyState: React__default.FC<EmptyStateProps>;
 
+interface SelectOption {
+    value: string;
+    label: string;
+    description?: string;
+}
 type IconConfig = React__default.ReactNode | {
     left?: React__default.ReactNode;
     right?: React__default.ReactNode;
 };
 interface FormInputProps {
-    label: string;
+    label?: string;
     name: string;
-    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'checkbox' | 'textarea' | 'color';
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'select' | 'checkbox' | 'textarea' | 'color';
     value: string | number | boolean;
-    onChange: (e: React__default.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChange: (e: React__default.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
     placeholder?: string;
     required?: boolean;
     disabled?: boolean;
@@ -125,25 +164,50 @@ interface FormInputProps {
     onKeyDown?: (e: React__default.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onBlur?: (e: React__default.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     icon?: IconConfig;
+    options?: SelectOption[];
+    multiSelect?: boolean;
+    selectWidth?: number;
+    searchable?: boolean;
+    clearable?: boolean;
     rows?: number;
     showHidePassword?: boolean;
     onGeneratePassword?: () => void;
+    isLoading?: boolean;
     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;
+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, options, multiSelect, selectWidth, searchable, clearable, rows, showHidePassword, onGeneratePassword, isLoading, copyable, readOnly, }: FormInputProps): react_jsx_runtime.JSX.Element;
 
-interface SwitchProps {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
-    disabled?: boolean;
-    label?: string;
+interface FormSectionProps {
+    title: string;
     description?: string;
+    children: ReactNode;
     className?: string;
-    size?: 'sm' | 'md' | 'lg';
 }
-declare function Switch({ checked, onChange, disabled, label, description, className, size, }: SwitchProps): react_jsx_runtime.JSX.Element;
+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;
+
+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>>;
+
+interface LoadingSpinnerProps {
+    message?: string;
+    className?: string;
+    showMessage?: boolean;
+}
+declare const LoadingSpinner: ({ message, className, showMessage, }: LoadingSpinnerProps) => react_jsx_runtime.JSX.Element;
 
 interface ModalProps {
     isOpen: boolean;
@@ -169,14 +233,7 @@ interface ModalProps {
         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;
+declare function Modal({ isOpen, onClose, children, title, header, blocking, size, className, footer, fullScreen, noPadding, footerBg, variant, scrollable, 'aria-describedby': ariaDescribedBy, customStyles, }: ModalProps): React$1.ReactPortal | null;
 
 interface PageHeaderProps {
     icon?: IconType;
@@ -187,25 +244,96 @@ interface PageHeaderProps {
 }
 declare function PageHeader({ icon: Icon, title, subtitle, rightContent, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
-interface FormSectionProps {
-    title: string;
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
     description?: string;
-    children: ReactNode;
     className?: string;
+    size?: 'sm' | 'md' | 'lg';
 }
-declare function FormSection({ title, description, children, className, }: FormSectionProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ checked, onChange, disabled, label, description, className, size, }: SwitchProps): 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;
+interface SmartDropdownProps {
+    isOpen: boolean;
+    onClose: () => void;
+    trigger: ReactNode;
+    children: ReactNode | ((position: {
+        isAbove: boolean;
+    }) => ReactNode);
     className?: string;
+    width?: number | 'auto' | 'fit-content';
+    maxHeight?: number;
+    offset?: number;
+    margin?: number;
+    id?: string;
+    position?: 'auto' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-left-aligned' | 'bottom-left-aligned';
 }
-declare function Grid({ children, cols, gap, className, }: GridProps): react_jsx_runtime.JSX.Element;
-declare function GridItem({ children, span, className, }: {
+declare function SmartDropdown({ isOpen, onClose, trigger, children, className, width, maxHeight, offset, margin, id, position, }: SmartDropdownProps): react_jsx_runtime.JSX.Element;
+interface Option {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    metadata?: {
+        isDefault?: boolean;
+        args?: string[];
+    };
+}
+interface SmartSelectProps {
+    options: Option[];
+    value: string | string[];
+    onChange: (value: string | string[]) => void;
+    placeholder?: string;
+    className?: string;
+    description?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    width?: number;
+    searchable?: boolean;
+    keepOpen?: boolean;
+    clearable?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onSearch?: (search: string) => void;
+    isLoading?: boolean;
+}
+declare function SmartSelect({ options, value, onChange, placeholder, className, description, disabled, multiple, width, searchable, keepOpen, clearable, onOpen, onClose, onSearch, isLoading, }: SmartSelectProps): react_jsx_runtime.JSX.Element;
+
+interface SkeletonProps {
+    className?: string;
+    children?: ReactNode;
+}
+interface SkeletonItemProps {
+    className?: string;
+    width?: string;
+    height?: string;
+    rounded?: boolean;
+    animate?: boolean;
+}
+declare function Skeleton({ className, children }: SkeletonProps): react_jsx_runtime.JSX.Element;
+declare function SkeletonItem({ className, width, height, rounded, animate, }: SkeletonItemProps): react_jsx_runtime.JSX.Element;
+
+type TypographyElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
+type TypographyVariant = 'default' | 'muted' | 'bold';
+type TypographySize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
+interface TypographyProps {
+    as?: TypographyElement;
+    variant?: TypographyVariant;
+    size?: TypographySize;
     children: React__default.ReactNode;
-    span?: number;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}
+declare function Typography({ as: Element, variant, size, children, className }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @gamecp/ui - GameCP UI Component Library
+ *
+ * A collection of reusable React components for GameCP extensions.
+ * All components are built with TypeScript and Tailwind CSS.
+ */
+
+declare const VERSION = "0.1.3";
 
-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 };
+export { Badge, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, ConfirmDialog, type ConfirmDialogOptions, Container, EmptyState, FormInput, FormSection, Grid, Link, type LinkProps, LoadingSpinner, Modal, PageHeader, Skeleton, SkeletonItem, SmartDropdown, SmartSelect, Switch, Typography, VERSION, useConfirmDialog };