@usevyre/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Galih Pranowo (gapra.dev)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,38 @@
+/**
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────┐
+ * │ Component:  Accordion                       │
+ * │ type  = "single"(default)|"multiple"        │
+ * │ defaultValue = string | string[]            │
+ * │ value        = string | string[]            │
+ * │ onValueChange = (value) => void             │
+ * │                                             │
+ * │ AccordionItem: value* = string              │
+ * │ AccordionTrigger: children (label text)     │
+ * │ AccordionContent: children (panel content)  │
+ * │                                             │
+ * │ CSS classes:                                │
+ * │   .vyre-accordion                           │
+ * │   .vyre-accordion__item                     │
+ * │   .vyre-accordion__trigger                  │
+ * │   .vyre-accordion__content                  │
+ * └─────────────────────────────────────────────┘
+ */
+import React from "react";
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    type?: "single" | "multiple";
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+}
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @usevyre/react — Alert + AlertDialog
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Components: Alert + AlertDialog                         │
+ * │ Import:     import { Alert, AlertDialog } from "@usevyre/react"│
+ * │                                                         │
+ * │ Alert props (inline banner):                            │
+ * │   variant  = "info"(default)|"success"|"warning"|"danger"│
+ * │   title    = string (optional)                          │
+ * │   icon     = ReactNode (optional, overrides default)    │
+ * │   onClose  = () => void (shows close button)            │
+ * │   children = ReactNode (alert body text)                │
+ * │                                                         │
+ * │ AlertDialog props (blocking confirmation modal):        │
+ * │   open          = boolean (controlled)                  │
+ * │   onOpenChange  = (open: boolean) => void               │
+ * │   title         = string                                │
+ * │   description   = string                                │
+ * │   confirmLabel  = string (default "Confirm")            │
+ * │   cancelLabel   = string (default "Cancel")             │
+ * │   variant       = "danger"(default)|"warning"|"info"    │
+ * │   onConfirm     = () => void                            │
+ * │   onCancel      = () => void                            │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * // Inline alert
+ * <Alert variant="warning" title="Heads up">
+ *   This action may affect other users in your workspace.
+ * </Alert>
+ *
+ * // Dismissible alert
+ * <Alert variant="success" title="Saved!" onClose={() => setVisible(false)}>
+ *   Your changes were saved successfully.
+ * </Alert>
+ *
+ * // Confirmation dialog (blocking)
+ * <AlertDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Delete workspace?"
+ *   description="This will permanently delete the workspace and all its data. This action cannot be undone."
+ *   variant="danger"
+ *   confirmLabel="Delete workspace"
+ *   onConfirm={handleDelete}
+ * />
+ */
+import React from "react";
+export type AlertVariant = "info" | "success" | "warning" | "danger";
+export interface AlertProps {
+    variant?: AlertVariant;
+    title?: string;
+    icon?: React.ReactNode;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Alert: React.FC<AlertProps>;
+export interface AlertDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    variant?: "danger" | "warning" | "info";
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    className?: string;
+}
+export declare const AlertDialog: React.FC<AlertDialogProps>;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,21 @@
+/**
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────┐
+ * │ Component:  Avatar                          │
+ * │ src        = string (image URL)             │
+ * │ alt        = string                         │
+ * │ fallback   = string (initials, e.g. "GP")   │
+ * │ size       = "sm"|"md"(default)|"lg"|"xl"   │
+ * │ status     = "online"|"offline"|"busy"|"away"│
+ * │ CSS class:  .vyre-avatar                    │
+ * └─────────────────────────────────────────────┘
+ */
+import React from "react";
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    status?: "online" | "offline" | "busy" | "away";
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @usevyre/react — Badge
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Component:  Badge                                       │
+ * │ Import:     import { Badge } from "@usevyre/react"         │
+ * │                                                         │
+ * │ Props:                                                  │
+ * │   variant = "default"|"accent"|"teal"|                  │
+ * │             "success"|"warning"|"danger"                │
+ * │   dot     = boolean  (live status dot indicator)        │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * <Badge variant="success" dot>Online</Badge>
+ * <Badge variant="warning">Beta</Badge>
+ * <Badge variant="danger">Error</Badge>
+ */
+import React from "react";
+import type { BadgeVariant, BaseProps } from "../../types";
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, BaseProps {
+    variant?: BadgeVariant;
+    /** Show a live status dot indicator */
+    dot?: boolean;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @usevyre/react — Breadcrumb
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Components: Breadcrumb + BreadcrumbItem + BreadcrumbSeparator│
+ * │ Import:     import { Breadcrumb, BreadcrumbItem,        │
+ * │             BreadcrumbSeparator } from "@usevyre/react"    │
+ * │                                                         │
+ * │ Breadcrumb props:                                       │
+ * │   separator = ReactNode (default: "/")                  │
+ * │                                                         │
+ * │ BreadcrumbItem props:                                   │
+ * │   href     = string (omit for current/last item)        │
+ * │   current  = boolean (marks aria-current="page")        │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * <Breadcrumb>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
+ *   <BreadcrumbItem current>Components</BreadcrumbItem>
+ * </Breadcrumb>
+ */
+import React from "react";
+export interface BreadcrumbProps {
+    children: React.ReactNode;
+    separator?: React.ReactNode;
+    className?: string;
+}
+export interface BreadcrumbItemProps {
+    children: React.ReactNode;
+    href?: string;
+    current?: boolean;
+    className?: string;
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export declare const BreadcrumbItem: React.FC<BreadcrumbItemProps>;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @usevyre/react — Button
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Component:  Button                                      │
+ * │ Import:     import { Button } from "@usevyre/react"        │
+ * │                                                         │
+ * │ Props:                                                  │
+ * │   variant  = "primary"|"secondary"|"ghost"|             │
+ * │              "accent"|"teal"|"danger"                   │
+ * │   size     = "sm"|"md"(default)|"lg"|"icon"             │
+ * │   disabled = boolean                                    │
+ * │   loading  = boolean  (shows spinner, disables click)   │
+ * │   as       = React.ElementType (default: "button")      │
+ * │   leftIcon = React.ReactNode                            │
+ * │   rightIcon = React.ReactNode                           │
+ * │                                                         │
+ * │ All native <button> props are forwarded.                │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * // Primary CTA
+ * <Button variant="accent" size="lg">Get Started</Button>
+ *
+ * // Destructive action
+ * <Button variant="danger" onClick={handleDelete}>Delete</Button>
+ *
+ * // Icon only
+ * <Button variant="ghost" size="icon" aria-label="Close">
+ *   <CloseIcon />
+ * </Button>
+ *
+ * // As link
+ * <Button as="a" href="/docs" variant="secondary">Read Docs</Button>
+ */
+import React from "react";
+import type { Variant, Size, BaseProps } from "../../types";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
+    /** Visual style variant */
+    variant?: Variant;
+    /** Size scale */
+    size?: Size;
+    /** Show loading spinner and disable interaction */
+    loading?: boolean;
+    /** Icon before label */
+    leftIcon?: React.ReactNode;
+    /** Icon after label */
+    rightIcon?: React.ReactNode;
+    /** Render as different element (e.g. "a" for link buttons) */
+    as?: React.ElementType;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @usevyre/react — Calendar & DatePicker
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │ Components: Calendar · DatePicker                           │
+ * │ Import:     import { Calendar, DatePicker } from "@usevyre/react" │
+ * │                                                             │
+ * │ Calendar props:                                             │
+ * │   mode      = "single"(default) | "range" | "multiple"     │
+ * │   value     = Date | [Date,Date] | Date[]                   │
+ * │   onChange  = (v) => void                                   │
+ * │   showTime  = boolean (adds HH:MM time picker)              │
+ * │   minDate / maxDate = Date                                  │
+ * │   disabled  = (date: Date) => boolean                       │
+ * │                                                             │
+ * │ DatePicker props:                                           │
+ * │   = all Calendar props +                                    │
+ * │   placeholder = string                                      │
+ * │   className   = string                                      │
+ * └─────────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * // Single date
+ * <Calendar mode="single" value={date} onChange={setDate} />
+ *
+ * // Date range
+ * <Calendar mode="range" value={[start, end]} onChange={setRange} />
+ *
+ * // DatePicker (input + popover)
+ * <DatePicker mode="single" value={date} onChange={setDate} placeholder="Pick a date" />
+ */
+import React from "react";
+export type CalendarMode = "single" | "range" | "multiple";
+export interface CalendarSingleProps {
+    mode?: "single";
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+}
+export interface CalendarRangeProps {
+    mode: "range";
+    value?: [Date | null, Date | null];
+    onChange?: (range: [Date | null, Date | null]) => void;
+}
+export interface CalendarMultipleProps {
+    mode: "multiple";
+    value?: Date[];
+    onChange?: (dates: Date[]) => void;
+}
+export type CalendarBaseProps = {
+    showTime?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: (date: Date) => boolean;
+    className?: string;
+    weekStartsOn?: 0 | 1;
+};
+export type CalendarProps = (CalendarSingleProps & CalendarBaseProps) | (CalendarRangeProps & CalendarBaseProps) | (CalendarMultipleProps & CalendarBaseProps);
+export type DatePickerProps = CalendarProps & {
+    placeholder?: string;
+    inputClassName?: string;
+};
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @usevyre/react — Card
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Component:  Card + CardHeader + CardBody + CardFooter   │
+ * │ Import:     import { Card, CardBody, ... } from "@usevyre/react" │
+ * │                                                         │
+ * │ Card props:                                             │
+ * │   variant = "default"|"elevated"|"outlined"|            │
+ * │             "ghost"|"accent"                            │
+ * │   hoverable = boolean (adds hover transition)           │
+ * │   clickable = boolean (cursor pointer + hover)          │
+ * │                                                         │
+ * │ Slot structure:                                         │
+ * │   <Card>                                                │
+ * │     <CardHeader>  ← optional                           │
+ * │     <CardBody>    ← main content                       │
+ * │     <CardFooter>  ← optional, actions                  │
+ * │   </Card>                                               │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * <Card variant="elevated">
+ *   <CardHeader>
+ *     <Badge variant="teal">Component</Badge>
+ *   </CardHeader>
+ *   <CardBody>
+ *     <h3>Card Title</h3>
+ *     <p>Card description text.</p>
+ *   </CardBody>
+ *   <CardFooter>
+ *     <Button variant="ghost" size="sm">View docs</Button>
+ *   </CardFooter>
+ * </Card>
+ */
+import React from "react";
+import type { BaseProps } from "../../types";
+type CardVariant = "default" | "elevated" | "outlined" | "ghost" | "accent";
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, BaseProps {
+    variant?: CardVariant;
+    hoverable?: boolean;
+    clickable?: boolean;
+}
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement>, BaseProps {
+}
+export declare const CardHeader: React.ForwardRefExoticComponent<CardSectionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CardBody: React.ForwardRefExoticComponent<CardSectionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CardFooter: React.ForwardRefExoticComponent<CardSectionProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,22 @@
+/**
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────┐
+ * │ Component:  Checkbox                        │
+ * │ checked      = boolean                      │
+ * │ defaultChecked = boolean                    │
+ * │ indeterminate  = boolean                    │
+ * │ onCheckedChange = (checked: boolean) => void│
+ * │ disabled     = boolean                      │
+ * │ size         = "sm"|"md"(default)           │
+ * │ CSS class:  .vyre-checkbox                  │
+ * └─────────────────────────────────────────────┘
+ */
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: "sm" | "md";
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Command/Command.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @usevyre/react — Command
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Components: Command + CommandInput + CommandList +      │
+ * │             CommandEmpty + CommandGroup + CommandItem + │
+ * │             CommandSeparator + CommandDialog            │
+ * │ Import:     import { Command, CommandDialog, ... }      │
+ * │             from "@usevyre/react"                          │
+ * │                                                         │
+ * │ Command props:                                          │
+ * │   value       = string (controlled search value)        │
+ * │   onValueChange = (v: string) => void                   │
+ * │   className   = string                                  │
+ * │                                                         │
+ * │ CommandDialog props:                                    │
+ * │   open        = boolean                                 │
+ * │   onOpenChange = (open: boolean) => void                │
+ * │   + all Command props                                   │
+ * │                                                         │
+ * │ CommandItem props:                                      │
+ * │   onSelect    = () => void                              │
+ * │   disabled    = boolean                                 │
+ * │   keywords    = string[] (extra search terms)           │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * // Inline
+ * <Command>
+ *   <CommandInput placeholder="Search..." />
+ *   <CommandList>
+ *     <CommandGroup heading="Actions">
+ *       <CommandItem onSelect={() => router.push('/settings')}>
+ *         Settings
+ *       </CommandItem>
+ *     </CommandGroup>
+ *     <CommandEmpty>No results found.</CommandEmpty>
+ *   </CommandList>
+ * </Command>
+ *
+ * // Dialog (⌘K palette)
+ * <CommandDialog open={open} onOpenChange={setOpen}>
+ *   <CommandInput placeholder="Type a command..." />
+ *   <CommandList>...</CommandList>
+ * </CommandDialog>
+ */
+import React from "react";
+export interface CommandProps {
+    value?: string;
+    onValueChange?: (v: string) => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandInputProps {
+    placeholder?: string;
+    className?: string;
+}
+export declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface CommandListProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandEmptyProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const CommandEmpty: React.FC<CommandEmptyProps>;
+export interface CommandGroupProps {
+    heading?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const CommandGroup: React.FC<CommandGroupProps>;
+export interface CommandItemProps {
+    onSelect?: () => void;
+    disabled?: boolean;
+    keywords?: string[];
+    className?: string;
+    children?: React.ReactNode;
+    /** Optional leading icon */
+    icon?: React.ReactNode;
+    /** Optional trailing shortcut hint */
+    shortcut?: string;
+}
+export declare const CommandItem: React.FC<CommandItemProps>;
+export declare const CommandSeparator: React.FC<{
+    className?: string;
+}>;
+export interface CommandDialogProps extends CommandProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare const CommandDialog: React.FC<CommandDialogProps>;

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,122 @@
+/**
+ * @usevyre/react — DropdownMenu
+ *
+ * AI CONTEXT:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │ Components:                                             │
+ * │   DropdownMenu          — root wrapper + portal         │
+ * │   DropdownItem          — action item                   │
+ * │   DropdownCheckboxItem  — toggle item with checkmark    │
+ * │   DropdownRadioGroup    — exclusive radio group         │
+ * │   DropdownRadioItem     — radio option inside group     │
+ * │   DropdownSub           — nested submenu                │
+ * │   DropdownSubItem       — submenu trigger item          │
+ * │   DropdownLabel         — non-interactive section label │
+ * │   DropdownSeparator     — visual divider                │
+ * │                                                         │
+ * │ Import:                                                 │
+ * │   import { DropdownMenu, DropdownItem,                  │
+ * │     DropdownCheckboxItem, DropdownRadioGroup,           │
+ * │     DropdownRadioItem, DropdownSub, DropdownSubItem,    │
+ * │     DropdownLabel, DropdownSeparator } from "@usevyre/react"│
+ * │                                                         │
+ * │ DropdownMenu props:                                     │
+ * │   trigger    = ReactElement (the anchor element)        │
+ * │   placement  = "bottom-start"(default)|"bottom-end"     │
+ * │               |"top-start"|"top-end"                    │
+ * │                                                         │
+ * │ DropdownItem props:                                     │
+ * │   onSelect   = () => void                               │
+ * │   disabled   = boolean                                  │
+ * │   variant    = "default"(default)|"danger"              │
+ * │   icon       = ReactNode                                │
+ * │   shortcut   = string (e.g. "⌘K")                      │
+ * │                                                         │
+ * │ DropdownCheckboxItem props:                             │
+ * │   checked    = boolean                                  │
+ * │   onCheckedChange = (checked: boolean) => void          │
+ * │   disabled   = boolean                                  │
+ * │                                                         │
+ * │ DropdownRadioGroup props:                               │
+ * │   value      = string                                   │
+ * │   onValueChange = (value: string) => void               │
+ * │                                                         │
+ * │ DropdownRadioItem props:                                │
+ * │   value      = string                                   │
+ * │   disabled   = boolean                                  │
+ * │                                                         │
+ * │ DropdownSub props:                                      │
+ * │   trigger    = ReactNode (the submenu trigger label)    │
+ * │   placement  = "right"(default)|"left"                  │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * @example
+ * <DropdownMenu trigger={<Button variant="ghost">Actions</Button>}>
+ *   <DropdownLabel>My Account</DropdownLabel>
+ *   <DropdownSeparator />
+ *   <DropdownItem icon={<EditIcon />} shortcut="⌘E" onSelect={handleEdit}>Edit</DropdownItem>
+ *   <DropdownSub trigger="Share">
+ *     <DropdownItem onSelect={handleEmail}>Email</DropdownItem>
+ *     <DropdownItem onSelect={handleLink}>Copy link</DropdownItem>
+ *   </DropdownSub>
+ *   <DropdownSeparator />
+ *   <DropdownItem variant="danger" icon={<TrashIcon />} onSelect={handleDelete}>Delete</DropdownItem>
+ * </DropdownMenu>
+ */
+import React from "react";
+export type DropdownPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+export interface DropdownMenuProps {
+    trigger: React.ReactElement;
+    children: React.ReactNode;
+    placement?: DropdownPlacement;
+    className?: string;
+}
+export interface DropdownItemProps {
+    children: React.ReactNode;
+    onSelect?: () => void;
+    disabled?: boolean;
+    variant?: "default" | "danger";
+    icon?: React.ReactNode;
+    shortcut?: string;
+    className?: string;
+}
+export interface DropdownCheckboxItemProps {
+    children: React.ReactNode;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    shortcut?: string;
+    className?: string;
+}
+export interface DropdownRadioGroupProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    children: React.ReactNode;
+}
+export interface DropdownRadioItemProps {
+    children: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+    className?: string;
+}
+export interface DropdownSubProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    placement?: "right" | "left";
+    disabled?: boolean;
+    className?: string;
+}
+export declare const DropdownMenu: React.FC<DropdownMenuProps>;
+export declare const DropdownLabel: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const DropdownItem: React.FC<DropdownItemProps>;
+export declare const DropdownCheckboxItem: React.FC<DropdownCheckboxItemProps>;
+export declare const DropdownRadioGroup: React.FC<DropdownRadioGroupProps>;
+export declare const DropdownRadioItem: React.FC<DropdownRadioItemProps>;
+export declare const DropdownSub: React.FC<DropdownSubProps>;
+export declare const DropdownSeparator: React.FC<{
+    className?: string;
+}>;