@caffeinebounce/ui 0.62.2

package/dist/primitives.d.cts

@@ -0,0 +1,508 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React$1 from 'react';
+export { B as Button, a as ButtonCorners, b as ButtonHoverEffect, c as ButtonProps, d as buttonVariants } from './button-BHnoRUkF.cjs';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { OTPInput } from 'input-otp';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { ClassValue } from 'clsx';
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Alert - Notification component for displaying important messages
+ *
+ * @example
+ * <Alert>
+ *   <AlertCircle />
+ *   <AlertTitle>Heads up!</AlertTitle>
+ *   <AlertDescription>You can add components to your app.</AlertDescription>
+ * </Alert>
+ *
+ * @example
+ * <Alert variant="destructive">
+ *   <AlertTriangle />
+ *   <AlertTitle>Error</AlertTitle>
+ *   <AlertDescription>There was an error processing your request.</AlertDescription>
+ * </Alert>
+ */
+declare function Alert({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof alertVariants>): react_jsx_runtime.JSX.Element;
+/**
+ * AlertTitle - Title/heading for an alert message
+ */
+declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * AlertDescription - Detailed description text for an alert
+ */
+declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shape styles for badges
+ * - pill: Fully rounded (default)
+ * - rounded: Slightly rounded corners
+ * - square: Sharp corners
+ */
+type BadgeShape = "pill" | "rounded" | "square";
+/**
+ * Size variants for badges
+ * - sm: Smaller badge
+ * - default: Standard size
+ * - lg: Larger badge
+ */
+type BadgeSize = "sm" | "default" | "lg";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "destructive" | "muted" | "success" | "warning" | null | undefined;
+    shape?: "pill" | "square" | "rounded" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+/**
+ * Badge - Visual indicator for status, counts, or labels
+ *
+ * @example
+ * <Badge variant="secondary">New</Badge>
+ *
+ * @example
+ * <Badge variant="destructive">Error</Badge>
+ *
+ * @example
+ * <Badge variant="success" shape="rounded" size="lg">Active</Badge>
+ */
+declare function Badge({ className, variant, shape, size, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Elevation styles for cards
+ * - flat: No shadow, subtle background
+ * - raised: Default shadow (shadow-sm)
+ * - floating: Elevated shadow for emphasis
+ */
+type CardElevation = "flat" | "raised" | "floating";
+/**
+ * Border styles for cards
+ * - default: Standard border
+ * - subtle: Lighter border
+ * - none: No border
+ */
+type CardBorder = "default" | "subtle" | "none";
+declare const cardVariants: (props?: ({
+    elevation?: "flat" | "floating" | "raised" | null | undefined;
+    border?: "none" | "default" | "subtle" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CardProps extends React$1.ComponentProps<"div">, VariantProps<typeof cardVariants> {
+}
+/**
+ * Card - Container component for grouping related content
+ *
+ * @example
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Title</CardTitle>
+ *     <CardDescription>Description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>Content goes here</CardContent>
+ * </Card>
+ *
+ * @example
+ * <Card elevation="floating" border="none">
+ *   <CardContent>Floating card without border</CardContent>
+ * </Card>
+ */
+declare function Card({ className, elevation, border, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+/**
+ * CardHeader - Header section of a card, typically contains title and description
+ *
+ * @example
+ * <CardHeader>
+ *   <CardTitle>Settings</CardTitle>
+ *   <CardDescription>Manage your account settings</CardDescription>
+ * </CardHeader>
+ */
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * CardTitle - Primary heading for a card
+ */
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * CardDescription - Descriptive text for a card, appears below the title
+ */
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * CardAction - Container for action buttons or controls in card header
+ *
+ * @example
+ * <CardAction>
+ *   <Button variant="ghost" size="icon-sm">
+ *     <MoreVertical />
+ *   </Button>
+ * </CardAction>
+ */
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * CardContent - Main content area of a card
+ */
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * CardFooter - Footer section of a card, typically contains actions or metadata
+ */
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<React$1.ComponentProps<"input">, "type" | "onChange"> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * Checkbox - Checkable input for binary choices
+ *
+ * @example
+ * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} />
+ *
+ * @example
+ * <label>
+ *   <Checkbox checked={agree} onCheckedChange={setAgree} />
+ *   I agree to the terms
+ * </label>
+ */
+declare function Checkbox({ className, checked, onCheckedChange, disabled, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Dialog - Modal dialog component built on Radix UI
+ *
+ * @example
+ * <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *       <DialogDescription>Dialog description text</DialogDescription>
+ *     </DialogHeader>
+ *     <div>Content goes here</div>
+ *     <DialogFooter>
+ *       <Button onClick={() => setIsOpen(false)}>Close</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ */
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+/**
+ * DialogTrigger - Button or element that opens the dialog when clicked
+ *
+ * @example
+ * <DialogTrigger asChild>
+ *   <Button>Open Dialog</Button>
+ * </DialogTrigger>
+ */
+declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+/**
+ * DialogPortal - Portal container for dialog content
+ */
+declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+/**
+ * DialogClose - Button to close the dialog
+ */
+declare function DialogClose({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
+/**
+ * DialogOverlay - Semi-transparent backdrop behind the dialog
+ */
+declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+/**
+ * DialogContent - Main content container for the dialog
+ * Includes special handling for password managers and AI assistants to prevent unwanted close events
+ */
+declare function DialogContent({ className, children, onInteractOutside, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Content>): react_jsx_runtime.JSX.Element;
+/**
+ * DialogHeader - Header section of the dialog, typically contains title and description
+ */
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * DialogFooter - Footer section of the dialog, typically contains action buttons
+ */
+declare function DialogFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * DialogTitle - Primary heading for the dialog
+ */
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+/**
+ * DialogDescription - Descriptive text for the dialog, appears below the title
+ */
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Label - Accessible label for form inputs
+ *
+ * @example
+ * <Label htmlFor="email">Email Address</Label>
+ * <Input id="email" type="email" />
+ */
+declare function Label({ className, ...props }: React$1.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+/**
+ * FieldSet - Container for a group of related fields
+ *
+ * @example
+ * <FieldSet>
+ *   <FieldLegend>Contact Information</FieldLegend>
+ *   <Field>...</Field>
+ *   <Field>...</Field>
+ * </FieldSet>
+ */
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): react_jsx_runtime.JSX.Element;
+/**
+ * FieldLegend - Title for a field set
+ */
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): react_jsx_runtime.JSX.Element;
+/**
+ * FieldGroup - Container for multiple fields with consistent spacing
+ */
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Field - Individual form field with label, input, and error support
+ *
+ * @example
+ * <Field>
+ *   <FieldLabel htmlFor="name">Name</FieldLabel>
+ *   <Input id="name" />
+ *   <FieldDescription>Enter your full name</FieldDescription>
+ * </Field>
+ *
+ * @example
+ * // Horizontal orientation
+ * <Field orientation="horizontal">
+ *   <FieldLabel>Subscribe</FieldLabel>
+ *   <Checkbox />
+ * </Field>
+ */
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"fieldset"> & VariantProps<typeof fieldVariants>): react_jsx_runtime.JSX.Element;
+/**
+ * FieldContent - Content wrapper for field elements
+ */
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * FieldLabel - Label for a field, supports nested inputs
+ */
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): react_jsx_runtime.JSX.Element;
+/**
+ * FieldTitle - Alternative to FieldLabel for non-label text
+ */
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * FieldDescription - Helpful text below a field
+ */
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+/**
+ * FieldSeparator - Visual divider between fields
+ */
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * FieldError - Error message display for form validation
+ *
+ * @example
+ * <FieldError errors={form.errors.email} />
+ *
+ * @example
+ * <FieldError>Custom error message</FieldError>
+ */
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Input style variants
+ * - default: Standard bordered input
+ * - filled: Filled background, no border
+ * - underline: Only bottom border
+ */
+type InputVariant = "default" | "filled" | "underline";
+declare const inputVariants: (props?: ({
+    variant?: "default" | "filled" | "underline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends React$1.ComponentProps<"input">, VariantProps<typeof inputVariants> {
+}
+/**
+ * Input - Text input field with consistent styling
+ *
+ * @example
+ * <Input type="text" placeholder="Enter your name" />
+ *
+ * @example
+ * <Input type="email" placeholder="email@example.com" variant="filled" />
+ *
+ * @example
+ * <Input type="text" placeholder="Search..." variant="underline" />
+ */
+declare function Input({ className, type, variant, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+declare function InputOTP({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React$1.ComponentProps<"div"> & {
+    index: number;
+}): react_jsx_runtime.JSX.Element;
+declare function InputOTPSeparator({ ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type">, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+
+interface PasswordRule {
+    id: string;
+    label: string;
+    validator: (password: string) => boolean;
+}
+declare const defaultPasswordRules: PasswordRule[];
+declare const extendedPasswordRules: PasswordRule[];
+interface PasswordRequirementsProps extends React$1.ComponentProps<"ul"> {
+    password: string;
+    rules?: PasswordRule[];
+}
+declare function PasswordRequirements({ password, rules, className, ...props }: PasswordRequirementsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Select - Dropdown selection component
+ *
+ * @example
+ * <Select value={value} onValueChange={setValue}>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select option" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">Option 1</SelectItem>
+ *     <SelectItem value="option2">Option 2</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ */
+declare function Select({ ...props }: React$1.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
+/**
+ * SelectGroup - Container for grouping select items
+ */
+declare function SelectGroup({ ...props }: React$1.ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
+/**
+ * SelectValue - Displays the selected value
+ */
+declare function SelectValue({ ...props }: React$1.ComponentProps<typeof SelectPrimitive.Value>): react_jsx_runtime.JSX.Element;
+/**
+ * SelectTrigger - Button that opens the select dropdown
+ */
+declare function SelectTrigger({ className, size, variant, children, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+    variant?: "default" | "ghost";
+}): react_jsx_runtime.JSX.Element;
+/**
+ * SelectContent - Dropdown content container for select items
+ */
+declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+/**
+ * SelectLabel - Label for a group of select items
+ */
+declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
+
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "lg" | "xs" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SpinnerProps extends React.ComponentProps<"svg">, VariantProps<typeof spinnerVariants> {
+}
+/**
+ * Spinner - Loading indicator with customizable size
+ *
+ * @example
+ * <Spinner size="md" />
+ *
+ * @example
+ * <Spinner size="lg" className="text-primary" />
+ */
+declare function Spinner({ className, size, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Tabs - Tabbed interface for organizing content into sections
+ *
+ * @example
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content for tab 1</TabsContent>
+ *   <TabsContent value="tab2">Content for tab 2</TabsContent>
+ * </Tabs>
+ */
+declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsList - Container for tab triggers
+ */
+declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsTrigger - Button to switch between tabs
+ */
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * TabsContent - Content panel for a tab
+ */
+declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Textarea - Multi-line text input field
+ *
+ * @example
+ * <Textarea placeholder="Enter description..." rows={4} />
+ */
+declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+
+/**
+ * TooltipProvider - Context provider for tooltip configuration
+ */
+declare function TooltipProvider({ delayDuration, skipDelayDuration, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
+/**
+ * Tooltip - Contextual information popup on hover
+ *
+ * @example
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button variant="outline">Hover me</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <p>Helpful information</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ */
+declare function Tooltip({ delayDuration, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root> & {
+    delayDuration?: number;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * TooltipTrigger - Element that triggers the tooltip on hover
+ */
+declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+/**
+ * TooltipContent - Content displayed in the tooltip
+ */
+declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+interface VerificationCodeInputProps {
+    length?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+}
+declare function VerificationCodeInput({ length, value, onChange, onComplete, disabled, autoFocus, className, }: VerificationCodeInputProps): react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Alert, AlertDescription, AlertTitle, Badge, type BadgeProps, type BadgeShape, type BadgeSize, Card, CardAction, type CardBorder, CardContent, CardDescription, type CardElevation, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, type InputVariant, Label, PasswordInput, PasswordRequirements, type PasswordRule, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Spinner, type SpinnerProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VerificationCodeInput, type VerificationCodeInputProps, badgeVariants, cn, defaultPasswordRules, extendedPasswordRules, inputVariants, spinnerVariants };