@gv-tech/ui-web 2.22.1 → 2.23.0

package/src/index.ts

@@ -9,11 +9,9 @@ export { cn } from './lib/utils';
 
 // Accordion
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
-export type { AccordionProps } from './accordion';
 
 // Alert
 export { Alert, AlertDescription, AlertTitle } from './alert';
-export type { AlertProps } from './alert';
 
 // Alert Dialog
 export {
@@ -29,19 +27,15 @@ export {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from './alert-dialog';
-export type { AlertDialogProps } from './alert-dialog';
 
 // Aspect Ratio
 export { AspectRatio } from './aspect-ratio';
-export type { AspectRatioProps } from './aspect-ratio';
 
 // Avatar
 export { Avatar, AvatarFallback, AvatarImage } from './avatar';
-export type { AvatarProps } from './avatar';
 
 // Badge
 export { Badge, badgeVariants } from './badge';
-export type { BadgeProps } from './badge';
 
 // Breadcrumb
 export {
@@ -53,23 +47,19 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from './breadcrumb';
-export type { BreadcrumbProps } from './breadcrumb';
 
 // Button
 export { Button, buttonVariants } from './button';
-export type { ButtonProps } from './button';
 
 // Calendar
 export { Calendar, CalendarDayButton } from './calendar';
-export type { CalendarProps } from './calendar';
 
 // Card
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
-export type { CardProps } from './card';
 
 // Carousel
 export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from './carousel';
-export type { CarouselApi, CarouselProps } from './carousel';
+export type { CarouselApi } from './carousel';
 
 // Chart
 export {
@@ -84,11 +74,9 @@ export type { ChartConfig } from './chart';
 
 // Checkbox
 export { Checkbox } from './checkbox';
-export type { CheckboxProps } from './checkbox';
 
 // Collapsible
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
-export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from './collapsible';
 
 // Command
 export {
@@ -102,16 +90,6 @@ export {
   CommandSeparator,
   CommandShortcut,
 } from './command';
-export type {
-  CommandEmptyProps,
-  CommandGroupProps,
-  CommandInputProps,
-  CommandItemProps,
-  CommandListProps,
-  CommandProps,
-  CommandSeparatorProps,
-  CommandShortcutProps,
-} from './command';
 
 // Context Menu
 export {
@@ -131,22 +109,6 @@ export {
   ContextMenuSubTrigger,
   ContextMenuTrigger,
 } from './context-menu';
-export type {
-  ContextMenuCheckboxItemProps,
-  ContextMenuContentProps,
-  ContextMenuGroupProps,
-  ContextMenuItemProps,
-  ContextMenuLabelProps,
-  ContextMenuProps,
-  ContextMenuRadioGroupProps,
-  ContextMenuRadioItemProps,
-  ContextMenuSeparatorProps,
-  ContextMenuShortcutProps,
-  ContextMenuSubContentProps,
-  ContextMenuSubProps,
-  ContextMenuSubTriggerProps,
-  ContextMenuTriggerProps,
-} from './context-menu';
 
 // Dialog
 export {
@@ -175,16 +137,6 @@ export {
   DrawerTitle,
   DrawerTrigger,
 } from './drawer';
-export type {
-  DrawerCloseProps,
-  DrawerContentProps,
-  DrawerDescriptionProps,
-  DrawerFooterProps,
-  DrawerHeaderProps,
-  DrawerProps,
-  DrawerTitleProps,
-  DrawerTriggerProps,
-} from './drawer';
 
 // Dropdown Menu
 export {
@@ -204,38 +156,18 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from './dropdown-menu';
-export type {
-  DropdownMenuCheckboxItemProps,
-  DropdownMenuContentProps,
-  DropdownMenuGroupProps,
-  DropdownMenuItemProps,
-  DropdownMenuLabelProps,
-  DropdownMenuProps,
-  DropdownMenuRadioGroupProps,
-  DropdownMenuRadioItemProps,
-  DropdownMenuSeparatorProps,
-  DropdownMenuShortcutProps,
-  DropdownMenuSubContentProps,
-  DropdownMenuSubProps,
-  DropdownMenuSubTriggerProps,
-  DropdownMenuTriggerProps,
-} from './dropdown-menu';
 
 // Form
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from './form';
-export type { FormControlProps, FormDescriptionProps, FormItemProps, FormLabelProps, FormMessageProps } from './form';
 
 // Hover Card
 export { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
-export type { HoverCardContentProps, HoverCardProps, HoverCardTriggerProps } from './hover-card';
 
 // Input
 export { Input } from './input';
-export type { InputProps } from './input';
 
 // Label
 export { Label } from './label';
-export type { LabelProps } from './label';
 
 // Menubar
 export {
@@ -256,21 +188,6 @@ export {
   MenubarSubTrigger,
   MenubarTrigger,
 } from './menubar';
-export type {
-  MenubarCheckboxItemProps,
-  MenubarContentProps,
-  MenubarItemProps,
-  MenubarLabelProps,
-  MenubarMenuProps,
-  MenubarProps,
-  MenubarRadioItemProps,
-  MenubarSeparatorProps,
-  MenubarShortcutProps,
-  MenubarSubContentProps,
-  MenubarSubProps,
-  MenubarSubTriggerProps,
-  MenubarTriggerProps,
-} from './menubar';
 
 // Navigation Menu
 export {
@@ -284,16 +201,6 @@ export {
   NavigationMenuViewport,
   navigationMenuTriggerStyle,
 } from './navigation-menu';
-export type {
-  NavigationMenuContentProps,
-  NavigationMenuIndicatorProps,
-  NavigationMenuItemProps,
-  NavigationMenuLinkProps,
-  NavigationMenuListProps,
-  NavigationMenuProps,
-  NavigationMenuTriggerProps,
-  NavigationMenuViewportProps,
-} from './navigation-menu';
 
 // Pagination
 export {
@@ -305,35 +212,21 @@ export {
   PaginationNext,
   PaginationPrevious,
 } from './pagination';
-export type {
-  PaginationContentProps,
-  PaginationEllipsisProps,
-  PaginationItemProps,
-  PaginationLinkProps,
-  PaginationNextProps,
-  PaginationPreviousProps,
-  PaginationProps,
-} from './pagination';
 
 // Popover
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './popover';
-export type { PopoverAnchorProps, PopoverContentProps, PopoverProps, PopoverTriggerProps } from './popover';
 
 // Progress
 export { Progress } from './progress';
-export type { ProgressProps } from './progress';
 
 // Radio
 export { RadioGroup, RadioGroupItem } from './radio-group';
-export type { RadioGroupItemProps, RadioGroupProps } from './radio-group';
 
 // Resizable
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizable';
-export type { ResizableHandleProps, ResizablePanelGroupProps, ResizablePanelProps } from './resizable';
 
 // Scroll Area
 export { ScrollArea, ScrollBar } from './scroll-area';
-export type { ScrollAreaProps, ScrollBarProps } from './scroll-area';
 
 // Scroll To Top
 export { ScrollToTop } from './scroll-to-top';
@@ -360,22 +253,9 @@ export {
   SelectTrigger,
   SelectValue,
 } from './select';
-export type {
-  SelectContentProps,
-  SelectGroupProps,
-  SelectItemProps,
-  SelectLabelProps,
-  SelectProps,
-  SelectScrollDownButtonProps,
-  SelectScrollUpButtonProps,
-  SelectSeparatorProps,
-  SelectTriggerProps,
-  SelectValueProps,
-} from './select';
 
 // Separator
 export { Separator } from './separator';
-export type { SeparatorProps } from './separator';
 
 // Sheet
 export {
@@ -385,56 +265,27 @@ export {
   SheetDescription,
   SheetFooter,
   SheetHeader,
-  SheetOverlay,
-  SheetPortal,
   SheetTitle,
   SheetTrigger,
 } from './sheet';
-export type {
-  SheetCloseProps,
-  SheetContentProps,
-  SheetDescriptionProps,
-  SheetFooterProps,
-  SheetHeaderProps,
-  SheetOverlayProps,
-  SheetPortalProps,
-  SheetProps,
-  SheetTitleProps,
-  SheetTriggerProps,
-} from './sheet';
 
 // Skeleton
 export { Skeleton } from './skeleton';
-export type { SkeletonProps } from './skeleton';
 
 // Slider
 export { Slider } from './slider';
-export type { SliderProps } from './slider';
 
 // Sonner
 export { Toaster as SonnerToaster } from './sonner';
-export type { ToasterProps as SonnerProps } from './sonner';
 
 // Switch
 export { Switch } from './switch';
-export type { SwitchProps } from './switch';
 
 // Table
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './table';
-export type {
-  TableBodyProps,
-  TableCaptionProps,
-  TableCellProps,
-  TableFooterProps,
-  TableHeadProps,
-  TableHeaderProps,
-  TableProps,
-  TableRowProps,
-} from './table';
 
 // Tabs
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
-export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from './tabs';
 
 // Text
 export { Text, textVariants } from './text';
@@ -442,19 +293,15 @@ export type { TextProps } from './text';
 
 // Textarea
 export { Textarea } from './textarea';
-export type { TextareaProps } from './textarea';
 
 // Toggle
 export { Toggle, toggleVariants } from './toggle';
-export type { ToggleProps } from './toggle';
 
 // Toggle Group
 export { ToggleGroup, ToggleGroupItem } from './toggle-group';
-export type { ToggleGroupItemProps, ToggleGroupProps } from './toggle-group';
 
 // Tooltip
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
-export type { TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps } from './tooltip';
 
 // Toast
 export {
@@ -488,3 +335,110 @@ export { Toaster } from './toaster';
 // Table Of Contents
 export { TableOfContents } from './table-of-contents';
 export type { TableOfContentsProps } from './table-of-contents';
+
+// Button Group
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './button-group';
+
+// Direction
+export { DirectionProvider, useDirection } from './direction';
+
+// Empty
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty';
+
+// Spinner
+export { Spinner } from './spinner';
+
+// Field
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from './field';
+
+// Input Group
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from './input-group';
+
+// Native Select
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from './native-select';
+
+// Kbd
+export { Kbd, KbdGroup } from './kbd';
+
+// Item
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from './item';
+
+// Combobox
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+} from './combobox';
+
+// Input OTP
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp';
+
+// Sidebar
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from './sidebar';

package/src/input-group.tsx

@@ -0,0 +1,143 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import type {
+  InputGroupAddonBaseProps,
+  InputGroupBaseProps,
+  InputGroupButtonBaseProps,
+  InputGroupInputBaseProps,
+  InputGroupTextareaBaseProps,
+  InputGroupTextBaseProps,
+} from '@gv-tech/ui-core';
+import { Button } from './button';
+import { Input } from './input';
+import { cn } from './lib/utils';
+import { Textarea } from './textarea';
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'> & InputGroupBaseProps) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group border-input has-disabled:bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  'flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*=size-])]:size-4',
+  {
+    variants: {
+      align: {
+        'inline-start': 'order-first ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem]',
+        'inline-end': 'order-last pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem]',
+        'block-start':
+          'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
+        'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants> & InputGroupAddonBaseProps) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+  variants: {
+    size: {
+      xs: 'h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*=size-])]:size-3.5',
+      sm: '',
+      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+    },
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+  VariantProps<typeof inputGroupButtonVariants> &
+  InputGroupButtonBaseProps) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'> & InputGroupTextBaseProps) {
+  return (
+    <span
+      className={cn(
+        'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<'input'> & InputGroupInputBaseProps) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'> & InputGroupTextareaBaseProps) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/src/input-otp.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { OTPInput, OTPInputContext } from 'input-otp';
+import * as React from 'react';
+
+import type {
+  InputOTPBaseProps,
+  InputOTPGroupBaseProps,
+  InputOTPSeparatorBaseProps,
+  InputOTPSlotBaseProps,
+} from '@gv-tech/ui-core';
+import { MinusIcon } from 'lucide-react';
+import { cn } from './lib/utils';
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & InputOTPBaseProps) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn('cn-input-otp flex items-center has-disabled:opacity-50', containerClassName)}
+      spellCheck={false}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'> & InputOTPGroupBaseProps) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        'has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 flex items-center rounded-lg has-aria-invalid:ring-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({ index, className, ...props }: React.ComponentProps<'div'> & InputOTPSlotBaseProps) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'border-input aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex size-8 items-center justify-center border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg data-[active=true]:z-10 data-[active=true]:ring-3',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'> & InputOTPSeparatorBaseProps) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="flex items-center [&_svg:not([class*=size-])]:size-4"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/src/input.tsx

@@ -1,24 +1,24 @@
-'use client';
 import * as React from 'react';
 
-import type { InputBaseProps } from '@gv-tech/ui-core';
 import { cn } from './lib/utils';
 
-export interface InputProps extends React.ComponentProps<'input'>, InputBaseProps {}
+import type { InputBaseProps } from '@gv-tech/ui-core';
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (
     <input
       type={type}
+      data-slot="input"
       className={cn(
-        'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
         className,
       )}
-      ref={ref}
       {...props}
     />
   );
-});
-Input.displayName = 'Input';
+}
 
 export { Input };
+
+// Verify that the component satisfies the ui-core contract
+const _verifyInputContract: InputBaseProps = {} as unknown as React.ComponentProps<typeof Input>;