shadcn-ui-react 0.7.15 → 0.7.17

package/dist/index.cjs

@@ -497,14 +497,21 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
         infoGhost: "bg-transparent text-sky-700 hover:bg-sky-500/10"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        xs: "h-7 rounded-md px-2.5 text-xs",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        xl: "h-12 rounded-lg px-10 text-base",
+        default: "h-9 px-3.5 text-sm",
+        "2xs": "h-7 px-2 text-xs",
+        xs: "h-8 px-2.5 text-xs",
+        sm: "h-9 px-3 text-sm",
+        md: "h-10 px-3.5 text-sm",
+        lg: "h-11 px-4 text-base",
+        xl: "h-12 px-4 text-base",
+        "2xl": "h-14 px-5 text-lg",
         icon: "h-9 w-9",
+        iconXs: "h-7 w-7",
         iconSm: "h-8 w-8",
-        iconLg: "h-10 w-10"
+        iconMd: "h-10 w-10",
+        iconLg: "h-11 w-11",
+        iconXl: "h-12 w-12",
+        icon2xl: "h-14 w-14"
       },
       rounded: {
         default: "rounded-md",
@@ -5867,14 +5874,15 @@ var Checkbox = React36.forwardRef(
         ref,
         disabled,
         className: cn(
-          "peer inline-flex shrink-0 items-center justify-center border shadow-sm outline-none transition-all duration-200",
-          "hover:border-primary/70 hover:shadow-md",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "peer relative inline-flex shrink-0 items-center justify-center overflow-hidden border outline-none",
+          "box-border align-middle transition-colors duration-200",
+          "hover:border-primary/70",
+          "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          "data-[state=checked]:shadow-primary/20 data-[state=unchecked]:bg-background",
+          "data-[state=unchecked]:bg-background",
           checkboxSizes[size],
           checkboxVariants[variant],
-          invalid && "border-destructive ring-1 ring-destructive/20 focus-visible:ring-destructive/40",
+          invalid && "border-destructive focus-visible:outline-destructive/70",
           className
         )
       }, props), {
@@ -5882,7 +5890,8 @@ var Checkbox = React36.forwardRef(
           CheckboxPrimitive.Indicator,
           {
             className: cn(
-              "flex items-center justify-center text-current transition-transform duration-200 data-[state=checked]:scale-100"
+              "flex items-center justify-center text-current",
+              "transition-transform duration-150"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               import_react_icons4.CheckIcon,
@@ -6786,12 +6795,12 @@ var FormCheckbox = (_a) => {
         const checked = Boolean(field.value);
         const fieldError = (_a3 = fieldState.error) == null ? void 0 : _a3.message;
         const hasError = Boolean(fieldError);
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FormItem, { className: cn("space-y-1.5", itemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FormItem, { className: cn("min-w-0", itemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "div",
           {
             className: cn(
-              "flex items-start gap-3 rounded-lg border border-transparent p-1 transition-colors",
-              hasError && "border-destructive/20 bg-destructive/5",
+              "flex min-w-0 items-start gap-2.5 transition-colors",
+              hasError && "rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5",
               className
             ),
             children: [
@@ -6807,7 +6816,7 @@ var FormCheckbox = (_a) => {
                     description ? descriptionId : void 0,
                     hasError ? messageId : void 0
                   ].filter(Boolean).join(" ") || void 0,
-                  className: cn("mt-0.5", checkboxClassName),
+                  className: cn("mt-0.5 shrink-0 self-start", checkboxClassName),
                   onBlur: field.onBlur,
                   onCheckedChange: (value) => {
                     const nextValue = value === true;
@@ -6822,13 +6831,13 @@ var FormCheckbox = (_a) => {
                   {
                     htmlFor: checkboxId,
                     className: cn(
-                      "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-none text-foreground",
+                      "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-5 text-foreground",
                       checkboxProps.disabled && "cursor-not-allowed text-muted-foreground",
                       hasError && "text-destructive",
                       labelClassName
                     ),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "min-w-0", children: label }),
                       requiredLabel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         import_lucide_react3.Asterisk,
                         {
@@ -6847,7 +6856,7 @@ var FormCheckbox = (_a) => {
                   {
                     id: descriptionId,
                     className: cn(
-                      "mt-1 text-sm leading-relaxed text-muted-foreground",
+                      "mt-0.5 text-sm leading-5 text-muted-foreground",
                       descriptionClassName
                     ),
                     children: description
@@ -6858,7 +6867,7 @@ var FormCheckbox = (_a) => {
                   {
                     id: messageId,
                     className: cn(
-                      "mt-1 text-sm font-medium text-destructive",
+                      "mt-0.5 text-sm font-medium leading-5 text-destructive",
                       messageClassName
                     ),
                     children: fieldError
@@ -10574,12 +10583,12 @@ var UiCheckbox = React73.forwardRef(
       "className"
     ]);
     const hasError = Boolean(errorMessage || invalid);
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("w-full", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("w-full min-w-0", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "div",
       {
         className: cn(
-          "flex items-start gap-3 rounded-lg border border-transparent p-1 transition-colors",
-          hasError && "border-destructive/20 bg-destructive/5",
+          "flex min-w-0 items-start gap-2.5 transition-colors",
+          hasError && "rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5",
           contentClassName
         ),
         children: [
@@ -10589,7 +10598,7 @@ var UiCheckbox = React73.forwardRef(
               ref,
               id: htmlFormItemId,
               invalid: hasError,
-              className: cn("mt-0.5", className)
+              className: cn("mt-0.5 shrink-0 self-start", className)
             }, checkboxProps)
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "min-w-0 flex-1", children: [
@@ -10598,13 +10607,13 @@ var UiCheckbox = React73.forwardRef(
               {
                 htmlFor: htmlFormItemId,
                 className: cn(
-                  "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-none text-foreground",
+                  "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-5 text-foreground",
                   checkboxProps.disabled && "cursor-not-allowed text-muted-foreground",
                   hasError && "text-destructive",
                   labelClassName
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "min-w-0", children: label }),
                   requiredLabel ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     import_lucide_react10.Asterisk,
                     {
@@ -10622,7 +10631,7 @@ var UiCheckbox = React73.forwardRef(
               "p",
               {
                 className: cn(
-                  "mt-1 text-sm leading-relaxed text-muted-foreground",
+                  "mt-0.5 text-sm leading-5 text-muted-foreground",
                   descriptionClassName
                 ),
                 children: description
@@ -10632,7 +10641,7 @@ var UiCheckbox = React73.forwardRef(
               "p",
               {
                 className: cn(
-                  "mt-1 text-sm font-medium text-destructive",
+                  "mt-0.5 text-sm font-medium leading-5 text-destructive",
                   errorClassName
                 ),
                 children: errorMessage

package/dist/index.d.cts

@@ -107,9 +107,13 @@ declare const BreadcrumbEllipsis: {
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | "dark" | "light" | "soft" | "softDestructive" | "softSuccess" | "softWarning" | "softInfo" | "outlineDestructive" | "outlineSuccess" | "outlineWarning" | "outlineInfo" | "gradient" | "gradientSuccess" | "gradientWarning" | "gradientDanger" | "premium" | "glass" | "neon" | "dangerGhost" | "successGhost" | "warningGhost" | "infoGhost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "iconSm" | "iconLg" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "icon" | "iconXs" | "iconSm" | "iconMd" | "iconLg" | "iconXl" | "icon2xl" | null | undefined;
     rounded?: "default" | "sm" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariantProps = VariantProps$1<typeof buttonVariants>;
+type ButtonVariant = ButtonVariantProps["variant"];
+type ButtonSize = ButtonVariantProps["size"];
+type ButtonRounded = ButtonVariantProps["rounded"];
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps$1<typeof buttonVariants> & {
     asChild?: boolean;
     loading?: boolean;
@@ -117,7 +121,7 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & VariantProp
 };
 declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps$1<(props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | "dark" | "light" | "soft" | "softDestructive" | "softSuccess" | "softWarning" | "softInfo" | "outlineDestructive" | "outlineSuccess" | "outlineWarning" | "outlineInfo" | "gradient" | "gradientSuccess" | "gradientWarning" | "gradientDanger" | "premium" | "glass" | "neon" | "dangerGhost" | "successGhost" | "warningGhost" | "infoGhost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "iconSm" | "iconLg" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "icon" | "iconXs" | "iconSm" | "iconMd" | "iconLg" | "iconXl" | "icon2xl" | null | undefined;
     rounded?: "default" | "sm" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     asChild?: boolean;
@@ -177,7 +181,7 @@ declare const CarouselContent: React$1.ForwardRefExoticComponent<React$1.HTMLAtt
 declare const CarouselItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CarouselPrevious: React$1.ForwardRefExoticComponent<Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement> & class_variance_authority.VariantProps<(props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | "dark" | "light" | "soft" | "softDestructive" | "softSuccess" | "softWarning" | "softInfo" | "outlineDestructive" | "outlineSuccess" | "outlineWarning" | "outlineInfo" | "gradient" | "gradientSuccess" | "gradientWarning" | "gradientDanger" | "premium" | "glass" | "neon" | "dangerGhost" | "successGhost" | "warningGhost" | "infoGhost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "iconSm" | "iconLg" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "icon" | "iconXs" | "iconSm" | "iconMd" | "iconLg" | "iconXl" | "icon2xl" | null | undefined;
     rounded?: "default" | "sm" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     asChild?: boolean;
@@ -186,7 +190,7 @@ declare const CarouselPrevious: React$1.ForwardRefExoticComponent<Omit<React$1.B
 } & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const CarouselNext: React$1.ForwardRefExoticComponent<Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement> & class_variance_authority.VariantProps<(props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | "dark" | "light" | "soft" | "softDestructive" | "softSuccess" | "softWarning" | "softInfo" | "outlineDestructive" | "outlineSuccess" | "outlineWarning" | "outlineInfo" | "gradient" | "gradientSuccess" | "gradientWarning" | "gradientDanger" | "premium" | "glass" | "neon" | "dangerGhost" | "successGhost" | "warningGhost" | "infoGhost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "iconSm" | "iconLg" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "icon" | "iconXs" | "iconSm" | "iconMd" | "iconLg" | "iconXl" | "icon2xl" | null | undefined;
     rounded?: "default" | "sm" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     asChild?: boolean;
@@ -1307,4 +1311,4 @@ declare function PaginationSection({ totalPosts, postsPerPage, currentPage, setC
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertModal, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, type CheckboxProps, type CheckboxRules, type CheckboxSize, type CheckboxVariant, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CustomFormFieldProps, type CustomFormSelectProps, type CustomSize, DATA_TABLE_TEMPLATES, DataTable, type DataTableAccent, type DataTableProps, DataTableSkeleton, type DataTableSlots, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, type DropzoneProps, type FieldRules$1 as FieldRules, FileUpload, type FileUploadProps, Form, FormCheckbox, type FormCheckboxProps, FormControl, FormDescription, FormField, FormFieldContext, type FormFieldContextValue, type FormInputVariantProps, FormItem, FormItemContext, FormLabel, FormMessage, type FormProps, FormSelect, type FormSizeProps, type FormVariantProps, Heading, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, Icons, ImagePreview, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, type InputVariant, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHead, type PageHeadProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, PaginationSection, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectOption, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarProvider, type SizeClasses, type SizeProps, Skeleton, Slider, ToasterSonner as SonnerToaster, type SonnerToasterProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToasterSonner, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UiCheckbox, type UiCheckboxProps, UiInput, type UiInputProps, UiSelect, type UiSelectOption, type UiSelectProps, type VariantProps, badgeVariants, buttonVariants, cn, formCompositeControlBase, formCompositeControlErrorClass, formCompositeVariants, formControlBase, formControlErrorClass, formInputVariants, formSizeVariants, getDefaultOptionLabel, getDefaultOptionValue, getErrorMessage, getFormControlSizeClass, getFormSizeClasses, getNextEnabledIndex, iconButtonVariants, navigationMenuTriggerStyle, normalizeSearchText, reducer, toast, toggleVariants, useFormField, useSidebar, useToast, variants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertModal, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonRounded, type ButtonSize, type ButtonVariant, type ButtonVariantProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, type CheckboxProps, type CheckboxRules, type CheckboxSize, type CheckboxVariant, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CustomFormFieldProps, type CustomFormSelectProps, type CustomSize, DATA_TABLE_TEMPLATES, DataTable, type DataTableAccent, type DataTableProps, DataTableSkeleton, type DataTableSlots, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, type DropzoneProps, type FieldRules$1 as FieldRules, FileUpload, type FileUploadProps, Form, FormCheckbox, type FormCheckboxProps, FormControl, FormDescription, FormField, FormFieldContext, type FormFieldContextValue, type FormInputVariantProps, FormItem, FormItemContext, FormLabel, FormMessage, type FormProps, FormSelect, type FormSizeProps, type FormVariantProps, Heading, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, Icons, ImagePreview, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, type InputVariant, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHead, type PageHeadProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, PaginationSection, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectOption, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarProvider, type SizeClasses, type SizeProps, Skeleton, Slider, ToasterSonner as SonnerToaster, type SonnerToasterProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToasterSonner, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UiCheckbox, type UiCheckboxProps, UiInput, type UiInputProps, UiSelect, type UiSelectOption, type UiSelectProps, type VariantProps, badgeVariants, buttonVariants, cn, formCompositeControlBase, formCompositeControlErrorClass, formCompositeVariants, formControlBase, formControlErrorClass, formInputVariants, formSizeVariants, getDefaultOptionLabel, getDefaultOptionValue, getErrorMessage, getFormControlSizeClass, getFormSizeClasses, getNextEnabledIndex, iconButtonVariants, navigationMenuTriggerStyle, normalizeSearchText, reducer, toast, toggleVariants, useFormField, useSidebar, useToast, variants };

package/dist/index.d.ts

@@ -107,9 +107,13 @@ declare const BreadcrumbEllipsis: {
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | "dark" | "light" | "soft" | "softDestructive" | "softSuccess" | "softWarning" | "softInfo" | "outlineDestructive" | "outlineSuccess" | "outlineWarning" | "outlineInfo" | "gradient" | "gradientSuccess" | "gradientWarning" | "gradientDanger" | "premium" | "glass" | "neon" | "dangerGhost" | "successGhost" | "warningGhost" | "infoGhost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "iconSm" | "iconLg" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "icon" | "iconXs" | "iconSm" | "iconMd" | "iconLg" | "iconXl" | "icon2xl" | null | undefined;
     rounded?: "default" | "sm" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariantProps = VariantProps$1<typeof buttonVariants>;
+type ButtonVariant = ButtonVariantProps["variant"];
+type ButtonSize = ButtonVariantProps["size"];
+type ButtonRounded = ButtonVariantProps["rounded"];
 type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps$1<typeof buttonVariants> & {
     asChild?: boolean;
     loading?: boolean;
@@ -117,7 +121,7 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & VariantProp
 };
 declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps$1<(props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | "dark" | "light" | "soft" | "softDestructive" | "softSuccess" | "softWarning" | "softInfo" | "outlineDestructive" | "outlineSuccess" | "outlineWarning" | "outlineInfo" | "gradient" | "gradientSuccess" | "gradientWarning" | "gradientDanger" | "premium" | "glass" | "neon" | "dangerGhost" | "successGhost" | "warningGhost" | "infoGhost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "iconSm" | "iconLg" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "icon" | "iconXs" | "iconSm" | "iconMd" | "iconLg" | "iconXl" | "icon2xl" | null | undefined;
     rounded?: "default" | "sm" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     asChild?: boolean;
@@ -177,7 +181,7 @@ declare const CarouselContent: React$1.ForwardRefExoticComponent<React$1.HTMLAtt
 declare const CarouselItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CarouselPrevious: React$1.ForwardRefExoticComponent<Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement> & class_variance_authority.VariantProps<(props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | "dark" | "light" | "soft" | "softDestructive" | "softSuccess" | "softWarning" | "softInfo" | "outlineDestructive" | "outlineSuccess" | "outlineWarning" | "outlineInfo" | "gradient" | "gradientSuccess" | "gradientWarning" | "gradientDanger" | "premium" | "glass" | "neon" | "dangerGhost" | "successGhost" | "warningGhost" | "infoGhost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "iconSm" | "iconLg" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "icon" | "iconXs" | "iconSm" | "iconMd" | "iconLg" | "iconXl" | "icon2xl" | null | undefined;
     rounded?: "default" | "sm" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     asChild?: boolean;
@@ -186,7 +190,7 @@ declare const CarouselPrevious: React$1.ForwardRefExoticComponent<Omit<React$1.B
 } & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const CarouselNext: React$1.ForwardRefExoticComponent<Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement> & class_variance_authority.VariantProps<(props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | "dark" | "light" | "soft" | "softDestructive" | "softSuccess" | "softWarning" | "softInfo" | "outlineDestructive" | "outlineSuccess" | "outlineWarning" | "outlineInfo" | "gradient" | "gradientSuccess" | "gradientWarning" | "gradientDanger" | "premium" | "glass" | "neon" | "dangerGhost" | "successGhost" | "warningGhost" | "infoGhost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "iconSm" | "iconLg" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "icon" | "iconXs" | "iconSm" | "iconMd" | "iconLg" | "iconXl" | "icon2xl" | null | undefined;
     rounded?: "default" | "sm" | "lg" | "xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     asChild?: boolean;
@@ -1307,4 +1311,4 @@ declare function PaginationSection({ totalPosts, postsPerPage, currentPage, setC
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertModal, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, type CheckboxProps, type CheckboxRules, type CheckboxSize, type CheckboxVariant, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CustomFormFieldProps, type CustomFormSelectProps, type CustomSize, DATA_TABLE_TEMPLATES, DataTable, type DataTableAccent, type DataTableProps, DataTableSkeleton, type DataTableSlots, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, type DropzoneProps, type FieldRules$1 as FieldRules, FileUpload, type FileUploadProps, Form, FormCheckbox, type FormCheckboxProps, FormControl, FormDescription, FormField, FormFieldContext, type FormFieldContextValue, type FormInputVariantProps, FormItem, FormItemContext, FormLabel, FormMessage, type FormProps, FormSelect, type FormSizeProps, type FormVariantProps, Heading, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, Icons, ImagePreview, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, type InputVariant, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHead, type PageHeadProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, PaginationSection, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectOption, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarProvider, type SizeClasses, type SizeProps, Skeleton, Slider, ToasterSonner as SonnerToaster, type SonnerToasterProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToasterSonner, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UiCheckbox, type UiCheckboxProps, UiInput, type UiInputProps, UiSelect, type UiSelectOption, type UiSelectProps, type VariantProps, badgeVariants, buttonVariants, cn, formCompositeControlBase, formCompositeControlErrorClass, formCompositeVariants, formControlBase, formControlErrorClass, formInputVariants, formSizeVariants, getDefaultOptionLabel, getDefaultOptionValue, getErrorMessage, getFormControlSizeClass, getFormSizeClasses, getNextEnabledIndex, iconButtonVariants, navigationMenuTriggerStyle, normalizeSearchText, reducer, toast, toggleVariants, useFormField, useSidebar, useToast, variants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertModal, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonRounded, type ButtonSize, type ButtonVariant, type ButtonVariantProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, type CheckboxProps, type CheckboxRules, type CheckboxSize, type CheckboxVariant, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type CustomFormFieldProps, type CustomFormSelectProps, type CustomSize, DATA_TABLE_TEMPLATES, DataTable, type DataTableAccent, type DataTableProps, DataTableSkeleton, type DataTableSlots, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, type DropzoneProps, type FieldRules$1 as FieldRules, FileUpload, type FileUploadProps, Form, FormCheckbox, type FormCheckboxProps, FormControl, FormDescription, FormField, FormFieldContext, type FormFieldContextValue, type FormInputVariantProps, FormItem, FormItemContext, FormLabel, FormMessage, type FormProps, FormSelect, type FormSizeProps, type FormVariantProps, Heading, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, Icons, ImagePreview, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, type InputVariant, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHead, type PageHeadProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextLast, PaginationPrevious, PaginationPreviousLast, PaginationSection, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectOption, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarProvider, type SizeClasses, type SizeProps, Skeleton, Slider, ToasterSonner as SonnerToaster, type SonnerToasterProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, ToasterSonner, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UiCheckbox, type UiCheckboxProps, UiInput, type UiInputProps, UiSelect, type UiSelectOption, type UiSelectProps, type VariantProps, badgeVariants, buttonVariants, cn, formCompositeControlBase, formCompositeControlErrorClass, formCompositeVariants, formControlBase, formControlErrorClass, formInputVariants, formSizeVariants, getDefaultOptionLabel, getDefaultOptionValue, getErrorMessage, getFormControlSizeClass, getFormSizeClasses, getNextEnabledIndex, iconButtonVariants, navigationMenuTriggerStyle, normalizeSearchText, reducer, toast, toggleVariants, useFormField, useSidebar, useToast, variants };

package/dist/index.js

@@ -200,14 +200,21 @@ var buttonVariants = cva2(
         infoGhost: "bg-transparent text-sky-700 hover:bg-sky-500/10"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        xs: "h-7 rounded-md px-2.5 text-xs",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        xl: "h-12 rounded-lg px-10 text-base",
+        default: "h-9 px-3.5 text-sm",
+        "2xs": "h-7 px-2 text-xs",
+        xs: "h-8 px-2.5 text-xs",
+        sm: "h-9 px-3 text-sm",
+        md: "h-10 px-3.5 text-sm",
+        lg: "h-11 px-4 text-base",
+        xl: "h-12 px-4 text-base",
+        "2xl": "h-14 px-5 text-lg",
         icon: "h-9 w-9",
+        iconXs: "h-7 w-7",
         iconSm: "h-8 w-8",
-        iconLg: "h-10 w-10"
+        iconMd: "h-10 w-10",
+        iconLg: "h-11 w-11",
+        iconXl: "h-12 w-12",
+        icon2xl: "h-14 w-14"
       },
       rounded: {
         default: "rounded-md",
@@ -5570,14 +5577,15 @@ var Checkbox = React36.forwardRef(
         ref,
         disabled,
         className: cn(
-          "peer inline-flex shrink-0 items-center justify-center border shadow-sm outline-none transition-all duration-200",
-          "hover:border-primary/70 hover:shadow-md",
-          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "peer relative inline-flex shrink-0 items-center justify-center overflow-hidden border outline-none",
+          "box-border align-middle transition-colors duration-200",
+          "hover:border-primary/70",
+          "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          "data-[state=checked]:shadow-primary/20 data-[state=unchecked]:bg-background",
+          "data-[state=unchecked]:bg-background",
           checkboxSizes[size],
           checkboxVariants[variant],
-          invalid && "border-destructive ring-1 ring-destructive/20 focus-visible:ring-destructive/40",
+          invalid && "border-destructive focus-visible:outline-destructive/70",
           className
         )
       }, props), {
@@ -5585,7 +5593,8 @@ var Checkbox = React36.forwardRef(
           CheckboxPrimitive.Indicator,
           {
             className: cn(
-              "flex items-center justify-center text-current transition-transform duration-200 data-[state=checked]:scale-100"
+              "flex items-center justify-center text-current",
+              "transition-transform duration-150"
             ),
             children: /* @__PURE__ */ jsx12(
               CheckIcon,
@@ -6504,12 +6513,12 @@ var FormCheckbox = (_a) => {
         const checked = Boolean(field.value);
         const fieldError = (_a3 = fieldState.error) == null ? void 0 : _a3.message;
         const hasError = Boolean(fieldError);
-        return /* @__PURE__ */ jsx21(FormItem, { className: cn("space-y-1.5", itemClassName), children: /* @__PURE__ */ jsxs11(
+        return /* @__PURE__ */ jsx21(FormItem, { className: cn("min-w-0", itemClassName), children: /* @__PURE__ */ jsxs11(
           "div",
           {
             className: cn(
-              "flex items-start gap-3 rounded-lg border border-transparent p-1 transition-colors",
-              hasError && "border-destructive/20 bg-destructive/5",
+              "flex min-w-0 items-start gap-2.5 transition-colors",
+              hasError && "rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5",
               className
             ),
             children: [
@@ -6525,7 +6534,7 @@ var FormCheckbox = (_a) => {
                     description ? descriptionId : void 0,
                     hasError ? messageId : void 0
                   ].filter(Boolean).join(" ") || void 0,
-                  className: cn("mt-0.5", checkboxClassName),
+                  className: cn("mt-0.5 shrink-0 self-start", checkboxClassName),
                   onBlur: field.onBlur,
                   onCheckedChange: (value) => {
                     const nextValue = value === true;
@@ -6540,13 +6549,13 @@ var FormCheckbox = (_a) => {
                   {
                     htmlFor: checkboxId,
                     className: cn(
-                      "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-none text-foreground",
+                      "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-5 text-foreground",
                       checkboxProps.disabled && "cursor-not-allowed text-muted-foreground",
                       hasError && "text-destructive",
                       labelClassName
                     ),
                     children: [
-                      /* @__PURE__ */ jsx21("span", { children: label }),
+                      /* @__PURE__ */ jsx21("span", { className: "min-w-0", children: label }),
                       requiredLabel ? /* @__PURE__ */ jsx21(
                         Asterisk,
                         {
@@ -6565,7 +6574,7 @@ var FormCheckbox = (_a) => {
                   {
                     id: descriptionId,
                     className: cn(
-                      "mt-1 text-sm leading-relaxed text-muted-foreground",
+                      "mt-0.5 text-sm leading-5 text-muted-foreground",
                       descriptionClassName
                     ),
                     children: description
@@ -6576,7 +6585,7 @@ var FormCheckbox = (_a) => {
                   {
                     id: messageId,
                     className: cn(
-                      "mt-1 text-sm font-medium text-destructive",
+                      "mt-0.5 text-sm font-medium leading-5 text-destructive",
                       messageClassName
                     ),
                     children: fieldError
@@ -10334,12 +10343,12 @@ var UiCheckbox = React73.forwardRef(
       "className"
     ]);
     const hasError = Boolean(errorMessage || invalid);
-    return /* @__PURE__ */ jsx55("div", { className: cn("w-full", containerClassName), children: /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsx55("div", { className: cn("w-full min-w-0", containerClassName), children: /* @__PURE__ */ jsxs28(
       "div",
       {
         className: cn(
-          "flex items-start gap-3 rounded-lg border border-transparent p-1 transition-colors",
-          hasError && "border-destructive/20 bg-destructive/5",
+          "flex min-w-0 items-start gap-2.5 transition-colors",
+          hasError && "rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5",
           contentClassName
         ),
         children: [
@@ -10349,7 +10358,7 @@ var UiCheckbox = React73.forwardRef(
               ref,
               id: htmlFormItemId,
               invalid: hasError,
-              className: cn("mt-0.5", className)
+              className: cn("mt-0.5 shrink-0 self-start", className)
             }, checkboxProps)
           ),
           /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex-1", children: [
@@ -10358,13 +10367,13 @@ var UiCheckbox = React73.forwardRef(
               {
                 htmlFor: htmlFormItemId,
                 className: cn(
-                  "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-none text-foreground",
+                  "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-5 text-foreground",
                   checkboxProps.disabled && "cursor-not-allowed text-muted-foreground",
                   hasError && "text-destructive",
                   labelClassName
                 ),
                 children: [
-                  /* @__PURE__ */ jsx55("span", { children: label }),
+                  /* @__PURE__ */ jsx55("span", { className: "min-w-0", children: label }),
                   requiredLabel ? /* @__PURE__ */ jsx55(
                     Asterisk6,
                     {
@@ -10382,7 +10391,7 @@ var UiCheckbox = React73.forwardRef(
               "p",
               {
                 className: cn(
-                  "mt-1 text-sm leading-relaxed text-muted-foreground",
+                  "mt-0.5 text-sm leading-5 text-muted-foreground",
                   descriptionClassName
                 ),
                 children: description
@@ -10392,7 +10401,7 @@ var UiCheckbox = React73.forwardRef(
               "p",
               {
                 className: cn(
-                  "mt-1 text-sm font-medium text-destructive",
+                  "mt-0.5 text-sm font-medium leading-5 text-destructive",
                   errorClassName
                 ),
                 children: errorMessage

package/dist/style.css

@@ -345,6 +345,9 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-x-2 {
+    inset-inline: calc(var(--spacing) * 2);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -426,6 +429,9 @@
   .left-\[50\%\] {
     left: 50%;
   }
+  .z-0 {
+    z-index: 0;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -510,6 +516,9 @@
   .ml-auto {
     margin-left: auto;
   }
+  .box-border {
+    box-sizing: border-box;
+  }
   .block {
     display: block;
   }
@@ -559,6 +568,9 @@
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
   }
+  .\!h-8 {
+    height: calc(var(--spacing) * 8) !important;
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -604,9 +616,15 @@
   .h-14 {
     height: calc(var(--spacing) * 14);
   }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
   .h-28 {
     height: calc(var(--spacing) * 28);
   }
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
   .h-36 {
     height: calc(var(--spacing) * 36);
   }
@@ -628,6 +646,9 @@
   .h-px {
     height: 1px;
   }
+  .max-h-64 {
+    max-height: calc(var(--spacing) * 64);
+  }
   .max-h-\[300px\] {
     max-height: 300px;
   }
@@ -685,9 +706,15 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
   .w-17\.5 {
     width: calc(var(--spacing) * 17.5);
   }
@@ -715,6 +742,12 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-75 {
+    width: calc(var(--spacing) * 75);
+  }
+  .w-79 {
+    width: calc(var(--spacing) * 79);
+  }
   .w-\[4\.5rem\] {
     width: 4.5rem;
   }
@@ -737,6 +770,12 @@
   .w-px {
     width: 1px;
   }
+  .max-w-\[calc\(100vw-1\.5rem\)\] {
+    max-width: calc(100vw - 1.5rem);
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
   .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -778,6 +817,9 @@
   .flex-1 {
     flex: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -857,6 +899,13 @@
   .resize {
     resize: both;
   }
+  .scrollbar-thin {
+    scrollbar-width: thin;
+  }
+  .scrollbar-track-transparent {
+    --tw-scrollbar-track: transparent;
+    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+  }
   .list-none {
     list-style-type: none;
   }
@@ -867,6 +916,15 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .grid-cols-\[minmax\(0\,1fr\)_82px\] {
+    grid-template-columns: minmax(0, 1fr) 82px;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -909,6 +967,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -918,6 +979,13 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .space-y-0 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-0\.5 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -981,6 +1049,9 @@
   .gap-y-1 {
     row-gap: calc(var(--spacing) * 1);
   }
+  .self-start {
+    align-self: flex-start;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1004,6 +1075,9 @@
   .overscroll-contain {
     overscroll-behavior: contain;
   }
+  .\!rounded-lg {
+    border-radius: var(--radius) !important;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1089,6 +1163,9 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .\!border-transparent {
+    border-color: transparent !important;
+  }
   .border-amber-500\/40 {
     border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1101,6 +1178,18 @@
   .border-border {
     border-color: var(--border);
   }
+  .border-border\/60 {
+    border-color: var(--border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--border) 60%, transparent);
+    }
+  }
+  .border-border\/70 {
+    border-color: var(--border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--border) 70%, transparent);
+    }
+  }
   .border-destructive {
     border-color: var(--destructive);
   }
@@ -1173,6 +1262,12 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
+  .\!bg-muted\/60 {
+    background-color: var(--muted) !important;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted) 60%, transparent) !important;
+    }
+  }
   .bg-accent {
     background-color: var(--accent);
   }
@@ -1290,6 +1385,12 @@
       background-color: color-mix(in oklab, var(--muted) 70%, transparent);
     }
   }
+  .bg-muted\/80 {
+    background-color: var(--muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted) 80%, transparent);
+    }
+  }
   .bg-popover {
     background-color: var(--popover);
   }
@@ -1335,6 +1436,20 @@
   .bg-zinc-950 {
     background-color: var(--color-zinc-950);
   }
+  .bg-linear-to-b {
+    --tw-gradient-position: to bottom;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to bottom in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-linear-to-t {
+    --tw-gradient-position: to top;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to top in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1347,6 +1462,10 @@
     --tw-gradient-from: var(--color-emerald-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-popover {
+    --tw-gradient-from: var(--popover);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-primary {
     --tw-gradient-from: var(--primary);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1403,6 +1522,10 @@
     --tw-gradient-to: var(--color-teal-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .fill-current {
     fill: currentcolor;
   }
@@ -1440,6 +1563,9 @@
   .p-\[1px\] {
     padding: 1px;
   }
+  .\!px-2 {
+    padding-inline: calc(var(--spacing) * 2) !important;
+  }
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
@@ -1464,12 +1590,6 @@
   .px-5 {
     padding-inline: calc(var(--spacing) * 5);
   }
-  .px-8 {
-    padding-inline: calc(var(--spacing) * 8);
-  }
-  .px-10 {
-    padding-inline: calc(var(--spacing) * 10);
-  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1494,12 +1614,18 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -1509,6 +1635,9 @@
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
+  .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -1530,6 +1659,9 @@
   .pr-14 {
     padding-right: calc(var(--spacing) * 14);
   }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -1569,6 +1701,10 @@
   .align-middle {
     vertical-align: middle;
   }
+  .\!text-xs {
+    font-size: var(--text-xs) !important;
+    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1613,13 +1749,17 @@
   .text-\[11px\] {
     font-size: 11px;
   }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
   }
-  .leading-relaxed {
-    --tw-leading: var(--leading-relaxed);
-    line-height: var(--leading-relaxed);
+  .\!font-medium {
+    --tw-font-weight: var(--font-weight-medium) !important;
+    font-weight: var(--font-weight-medium) !important;
   }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
@@ -1701,6 +1841,24 @@
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
+  .text-muted-foreground\/25 {
+    color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
+    }
+  }
+  .text-muted-foreground\/35 {
+    color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);
+    }
+  }
+  .text-muted-foreground\/70 {
+    color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
+    }
+  }
   .text-popover-foreground {
     color: var(--popover-foreground);
   }
@@ -1728,6 +1886,10 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .ordinal {
+    --tw-ordinal: ordinal;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -1749,6 +1911,15 @@
   .opacity-90 {
     opacity: 90%;
   }
+  .\!shadow-none {
+    --tw-shadow: 0 0 #0000 !important;
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow) !important;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -1854,12 +2025,6 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-fuchsia-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
-  .ring-destructive\/20 {
-    --tw-ring-color: var(--destructive);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
-    }
-  }
   .ring-ring {
     --tw-ring-color: var(--ring);
   }
@@ -1947,6 +2112,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1985,6 +2154,9 @@
     -moz-user-select: none;
     user-select: none;
   }
+  .duration-150 {
+    animation-duration: 150ms;
+  }
   .duration-200 {
     animation-duration: 200ms;
   }
@@ -2301,6 +2473,13 @@
       }
     }
   }
+  .hover\:\!bg-muted {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted) !important;
+      }
+    }
+  }
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
@@ -2308,6 +2487,16 @@
       }
     }
   }
+  .hover\:bg-accent\/40 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--accent) 40%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-accent\/70 {
     &:hover {
       @media (hover: hover) {
@@ -2459,6 +2648,13 @@
       }
     }
   }
+  .hover\:bg-primary {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+      }
+    }
+  }
   .hover\:bg-primary\/15 {
     &:hover {
       @media (hover: hover) {
@@ -2585,6 +2781,13 @@
       }
     }
   }
+  .hover\:text-primary-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--primary-foreground);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -2625,19 +2828,6 @@
       }
     }
   }
-  .hover\:shadow-md {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-        box-shadow:
-          var(--tw-inset-shadow),
-          var(--tw-inset-ring-shadow),
-          var(--tw-ring-offset-shadow),
-          var(--tw-ring-shadow),
-          var(--tw-shadow);
-      }
-    }
-  }
   .hover\:shadow-xl {
     &:hover {
       @media (hover: hover) {
@@ -2855,6 +3045,17 @@
       }
     }
   }
+  .focus-visible\:\!ring-1 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
+      box-shadow:
+        var(--tw-inset-shadow),
+        var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow),
+        var(--tw-shadow) !important;
+    }
+  }
   .focus-visible\:ring-1 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2877,6 +3078,11 @@
         var(--tw-shadow);
     }
   }
+  .focus-visible\:\!ring-ring {
+    &:focus-visible {
+      --tw-ring-color: var(--ring) !important;
+    }
+  }
   .focus-visible\:ring-amber-500\/40 {
     &:focus-visible {
       --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
@@ -2885,11 +3091,11 @@
       }
     }
   }
-  .focus-visible\:ring-destructive\/40 {
+  .focus-visible\:ring-destructive\/30 {
     &:focus-visible {
       --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 30%, transparent);
       }
     }
   }
@@ -2939,6 +3145,30 @@
       --tw-ring-offset-color: var(--background);
     }
   }
+  .focus-visible\:outline {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .focus-visible\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+  .focus-visible\:outline-destructive\/70 {
+    &:focus-visible {
+      outline-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        outline-color: color-mix(in oklab, var(--destructive) 70%, transparent);
+      }
+    }
+  }
+  .focus-visible\:outline-ring {
+    &:focus-visible {
+      outline-color: var(--ring);
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
@@ -2987,6 +3217,11 @@
       cursor: not-allowed;
     }
   }
+  .disabled\:opacity-30 {
+    &:disabled {
+      opacity: 30%;
+    }
+  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -3131,6 +3366,11 @@
       opacity: 50%;
     }
   }
+  .data-\[empty\=true\]\:text-muted-foreground {
+    &[data-empty=true] {
+      color: var(--muted-foreground);
+    }
+  }
   .data-\[motion\=from-end\]\:slide-in-from-right-52 {
     &[data-motion=from-end] {
       --tw-enter-translate-x: 13rem;
@@ -3240,6 +3480,33 @@
       color: var(--muted-foreground);
     }
   }
+  .data-\[selected\=true\]\:bg-accent {
+    &[data-selected=true] {
+      background-color: var(--accent);
+    }
+  }
+  .data-\[selected\=true\]\:text-base {
+    &[data-selected=true] {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .data-\[selected\=true\]\:font-semibold {
+    &[data-selected=true] {
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
+    }
+  }
+  .data-\[selected\=true\]\:text-accent-foreground {
+    &[data-selected=true] {
+      color: var(--accent-foreground);
+    }
+  }
+  .data-\[selected\=true\]\:text-foreground {
+    &[data-selected=true] {
+      color: var(--foreground);
+    }
+  }
   .data-\[side\=bottom\]\:slide-in-from-top-2 {
     &[data-side=bottom] {
       --tw-enter-translate-y: -0.5rem;
@@ -3287,14 +3554,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .data-\[state\=checked\]\:scale-100 {
-    &[data-state=checked] {
-      --tw-scale-x: 100%;
-      --tw-scale-y: 100%;
-      --tw-scale-z: 100%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
   .data-\[state\=checked\]\:border-destructive {
     &[data-state=checked] {
       border-color: var(--destructive);
@@ -3353,14 +3612,6 @@
       color: var(--color-white);
     }
   }
-  .data-\[state\=checked\]\:shadow-primary\/20 {
-    &[data-state=checked] {
-      --tw-shadow-color: var(--primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
-      }
-    }
-  }
   .data-\[state\=closed\]\:duration-300 {
     &[data-state=closed] {
       --tw-duration: 300ms;
@@ -4311,6 +4562,11 @@
       background-color: var(--accent);
     }
   }
+  .\[\&\>button\]\:bg-muted {
+    & > button {
+      background-color: var(--muted);
+    }
+  }
   .\[\&\>button\]\:bg-primary {
     & > button {
       background-color: var(--primary);
@@ -4321,6 +4577,11 @@
       color: var(--accent-foreground);
     }
   }
+  .\[\&\>button\]\:text-foreground {
+    & > button {
+      color: var(--foreground);
+    }
+  }
   .\[\&\>button\]\:text-muted-foreground {
     & > button {
       color: var(--muted-foreground);
@@ -4331,6 +4592,24 @@
       color: var(--primary-foreground);
     }
   }
+  .\[\&\>button\]\:hover\:bg-primary {
+    & > button {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--primary);
+        }
+      }
+    }
+  }
+  .\[\&\>button\]\:hover\:text-primary-foreground {
+    & > button {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--primary-foreground);
+        }
+      }
+    }
+  }
   .\[\&\>button\:focus\]\:bg-primary {
     & > button:focus {
       background-color: var(--primary);
@@ -4560,6 +4839,8 @@
 @property --tw-rotate-z { syntax: "*"; inherits: false; }
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
+@property --tw-scrollbar-thumb { syntax: "<color>"; inherits: false; initial-value: #0000; }
+@property --tw-scrollbar-track { syntax: "<color>"; inherits: false; initial-value: #0000; }
 @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@@ -4575,6 +4856,11 @@
 @property --tw-leading { syntax: "*"; inherits: false; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
 @property --tw-tracking { syntax: "*"; inherits: false; }
+@property --tw-ordinal { syntax: "*"; inherits: false; }
+@property --tw-slashed-zero { syntax: "*"; inherits: false; }
+@property --tw-numeric-figure { syntax: "*"; inherits: false; }
+@property --tw-numeric-spacing { syntax: "*"; inherits: false; }
+@property --tw-numeric-fraction { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-shadow-color { syntax: "*"; inherits: false; }
 @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@@ -4644,6 +4930,8 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-scrollbar-thumb: #0000;
+      --tw-scrollbar-track: #0000;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
@@ -4659,6 +4947,11 @@
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.7.15",
+  "version": "0.7.17",
   "private": false,
   "author": "Bleker <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",