@codefast/ui 0.0.60 → 0.0.62

package/dist/react/tooltip.mjs

@@ -1,2 +1,2 @@
-"use client";import{b as p}from"../chunk-LEUB3C3L.mjs";import*as a from"react";import*as t from"@radix-ui/react-tooltip";import{jsx as r}from"react/jsx-runtime";var m=t.Provider,T=t.Root,P=t.Trigger,d=a.forwardRef(({className:o,sideOffset:e=6,...i},l)=>r(t.Portal,{children:r(t.Content,{ref:l,sideOffset:e,className:p("bg-popover text-popover-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 rounded-md border px-3 py-1.5 text-xs",o),...i})}));d.displayName=t.Content.displayName;var s=a.forwardRef(({className:o,...e},i)=>r(t.Arrow,{ref:i,className:p("fill-primary",o),...e}));s.displayName=t.Arrow.displayName;export{T as Tooltip,s as TooltipArrow,d as TooltipContent,m as TooltipProvider,P as TooltipTrigger};
+"use client";import{b as p}from"../chunk-LEUB3C3L.mjs";import*as a from"react";import*as t from"@radix-ui/react-tooltip";import{jsx as r}from"react/jsx-runtime";var m=t.Provider,T=t.Root,P=t.Trigger,d=a.forwardRef(({className:o,sideOffset:e=6,...i},l)=>r(t.Portal,{children:r(t.Content,{ref:l,className:p("bg-popover text-popover-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 rounded-md border px-3 py-1.5 text-xs",o),sideOffset:e,...i})}));d.displayName=t.Content.displayName;var s=a.forwardRef(({className:o,...e},i)=>r(t.Arrow,{ref:i,className:p("fill-primary",o),...e}));s.displayName=t.Arrow.displayName;export{T as Tooltip,s as TooltipArrow,d as TooltipContent,m as TooltipProvider,P as TooltipTrigger};
 //# sourceMappingURL=tooltip.mjs.map

package/dist/react/tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { cn } from '../lib/utils';\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipProvider\n * -------------------------------------------------------------------------- */\n\ntype TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider>;\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\ntype TooltipContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;\n\nconst TooltipContent = React.forwardRef<TooltipContentElement, TooltipContentProps>(\n  ({ className, sideOffset = 6, ...props }, ref) => (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 rounded-md border px-3 py-1.5 text-xs',\n          className,\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  ),\n);\n\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\ntype TooltipArrowElement = React.ElementRef<typeof TooltipPrimitive.Arrow>;\ntype TooltipArrowProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>;\n\nconst TooltipArrow = React.forwardRef<TooltipArrowElement, TooltipArrowProps>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className={cn('fill-primary', className)} {...props} />\n));\n\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipArrow,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n  type TooltipArrowProps,\n};\n"],"mappings":"uDAEA,UAAYA,MAAW,QACvB,UAAYC,MAAsB,0BAkC5B,cAAAC,MAAA,oBA1BN,IAAMC,EAAmC,WAOnCC,EAA2B,OAO3BC,EAAkC,UASlCC,EAAuB,aAC3B,CAAC,CAAE,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGC,CAAM,EAAGC,IACxCR,EAAkB,SAAjB,CACC,SAAAA,EAAkB,UAAjB,CACC,IAAKQ,EACL,WAAYF,EACZ,UAAWG,EACT,qwBACAJ,CACF,EACC,GAAGE,EACN,EACF,CAEJ,EAEAH,EAAe,YAA+B,UAAQ,YAStD,IAAMM,EAAqB,aAAmD,CAAC,CAAE,UAAAL,EAAW,GAAGE,CAAM,EAAGC,IACtGR,EAAkB,QAAjB,CAAuB,IAAKQ,EAAK,UAAWC,EAAG,eAAgBJ,CAAS,EAAI,GAAGE,EAAO,CACxF,EAEDG,EAAa,YAA+B,QAAM","names":["React","TooltipPrimitive","jsx","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","props","ref","cn","TooltipArrow"]}
+{"version":3,"sources":["../../src/react/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { cn } from '../lib/utils';\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipProvider\n * -------------------------------------------------------------------------- */\n\ntype TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider>;\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/* -----------------------------------------------------------------------------\n * Component: Tooltip\n * -------------------------------------------------------------------------- */\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;\nconst Tooltip = TooltipPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipTrigger\n * -------------------------------------------------------------------------- */\n\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipContent\n * -------------------------------------------------------------------------- */\n\ntype TooltipContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;\n\nconst TooltipContent = React.forwardRef<TooltipContentElement, TooltipContentProps>(\n  ({ className, sideOffset = 6, ...props }, ref) => (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 rounded-md border px-3 py-1.5 text-xs',\n          className,\n        )}\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  ),\n);\n\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: TooltipArrow\n * -------------------------------------------------------------------------- */\n\ntype TooltipArrowElement = React.ElementRef<typeof TooltipPrimitive.Arrow>;\ntype TooltipArrowProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>;\n\nconst TooltipArrow = React.forwardRef<TooltipArrowElement, TooltipArrowProps>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow ref={ref} className={cn('fill-primary', className)} {...props} />\n));\n\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipArrow,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n  type TooltipArrowProps,\n};\n"],"mappings":"uDAEA,UAAYA,MAAW,QACvB,UAAYC,MAAsB,0BAkC5B,cAAAC,MAAA,oBA1BN,IAAMC,EAAmC,WAOnCC,EAA2B,OAO3BC,EAAkC,UASlCC,EAAuB,aAC3B,CAAC,CAAE,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGC,CAAM,EAAGC,IACxCR,EAAkB,SAAjB,CACC,SAAAA,EAAkB,UAAjB,CACC,IAAKQ,EACL,UAAWC,EACT,qwBACAJ,CACF,EACA,WAAYC,EACX,GAAGC,EACN,EACF,CAEJ,EAEAH,EAAe,YAA+B,UAAQ,YAStD,IAAMM,EAAqB,aAAmD,CAAC,CAAE,UAAAL,EAAW,GAAGE,CAAM,EAAGC,IACtGR,EAAkB,QAAjB,CAAuB,IAAKQ,EAAK,UAAWC,EAAG,eAAgBJ,CAAS,EAAI,GAAGE,EAAO,CACxF,EAEDG,EAAa,YAA+B,QAAM","names":["React","TooltipPrimitive","jsx","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","props","ref","cn","TooltipArrow"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"
@@ -384,31 +384,31 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-use-controllable-state": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@tanstack/react-table": "^8.17.0",
+    "@tanstack/react-table": "^8.19.2",
     "cmdk": "^1.0.0",
     "cva": "1.0.0-beta.1",
-    "embla-carousel-react": "^8.1.5",
+    "embla-carousel-react": "^8.1.6",
     "input-otp": "^1.2.4",
     "next-themes": "^0.3.0",
     "react-day-picker": "^8.10.1",
-    "react-hook-form": "^7.52.0",
-    "react-resizable-panels": "^2.0.19",
+    "react-hook-form": "^7.52.1",
+    "react-resizable-panels": "^2.0.20",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "vaul": "^0.9.1"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.10",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "react": "^18.3.1",
     "tailwindcss": "^3.4.4",
     "tsup": "^8.1.0",
-    "typescript": "^5.5.2",
-    "@codefast/eslint-config": "0.0.28",
+    "typescript": "^5.5.3",
+    "@codefast/eslint-config": "0.0.30",
     "@codefast/typescript-config": "0.0.2"
   },
   "peerDependencies": {

package/src/react/alert.tsx

@@ -29,7 +29,7 @@ type AlertElement = HTMLDivElement;
 type AlertProps = React.HTMLAttributes<HTMLDivElement> & AlertVariantsProps;
 
 const Alert = React.forwardRef<AlertElement, AlertProps>(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={alertVariants({ variant, className })} {...props} />
+  <div ref={ref} className={alertVariants({ variant, className })} role="alert" {...props} />
 ));
 
 Alert.displayName = 'Alert';

package/src/react/breadcrumb.tsx

@@ -82,10 +82,10 @@ type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
 const BreadcrumbPage = React.forwardRef<BreadcrumbPageElement, BreadcrumbPageProps>(({ className, ...props }, ref) => (
   <span
     ref={ref}
-    role="link"
-    aria-disabled="true"
     aria-current="page"
+    aria-disabled="true"
     className={cn('text-foreground font-normal', className)}
+    role="link"
     {...props}
   />
 ));
@@ -100,7 +100,7 @@ type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 
 function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): React.JSX.Element {
   return (
-    <li role="presentation" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
+    <li aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} role="presentation" {...props}>
       {children ?? <ChevronRightIcon />}
     </li>
   );
@@ -115,9 +115,9 @@ type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
 function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): React.JSX.Element {
   return (
     <span
-      role="presentation"
       aria-hidden="true"
       className={cn('flex size-4 items-center justify-center', className)}
+      role="presentation"
       {...props}
     >
       <DotsHorizontalIcon className="size-4" />

package/src/react/button.tsx

@@ -64,8 +64,8 @@ const Button = React.forwardRef<ButtonElement, ButtonProps>(
     return (
       <Component
         ref={ref}
-        type={asChild ? undefined : 'button'}
         className={buttonVariants({ variant, size, loading, className })}
+        type={asChild ? undefined : 'button'}
         {...props}
         disabled={disabled}
       >

package/src/react/calendar.tsx

@@ -23,7 +23,6 @@ type CalendarProps = DayPickerProps;
 function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps): React.JSX.Element {
   return (
     <DayPicker
-      showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
       classNames={{
         months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
@@ -67,6 +66,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         IconLeft: ChevronLeft,
         IconRight: ChevronRight,
       }}
+      showOutsideDays={showOutsideDays}
       {...props}
     />
   );

package/src/react/carousel.tsx

@@ -24,18 +24,18 @@ type CarouselPlugin = UseCarouselParameters[1];
 
 interface BaseCarouselProps {
   opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
   orientation?: 'horizontal' | 'vertical';
+  plugins?: CarouselPlugin;
   setApi?: (api: CarouselApi) => void;
 }
 
 type CarouselContextValue = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
   api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
   canScrollNext: boolean;
+  canScrollPrev: boolean;
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  scrollNext: () => void;
+  scrollPrev: () => void;
 } & BaseCarouselProps;
 
 const [CarouselProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
@@ -117,22 +117,22 @@ const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
 
     return (
       <CarouselProvider
-        scope={__scopeCarousel}
-        carouselRef={carouselRef}
         api={api}
+        canScrollNext={canScrollNext}
+        canScrollPrev={canScrollPrev}
+        carouselRef={carouselRef}
         opts={opts}
         orientation={orientation ?? (opts?.axis === 'y' ? 'vertical' : 'horizontal')}
-        scrollPrev={scrollPrev}
+        scope={__scopeCarousel}
         scrollNext={scrollNext}
-        canScrollPrev={canScrollPrev}
-        canScrollNext={canScrollNext}
+        scrollPrev={scrollPrev}
       >
         <div
           ref={ref}
-          onKeyDownCapture={handleKeyDown}
+          aria-roledescription="carousel"
           className={cn('relative', className)}
           role="region"
-          aria-roledescription="carousel"
+          onKeyDownCapture={handleKeyDown}
           {...props}
         >
           {children}
@@ -187,9 +187,9 @@ const CarouselItem = React.forwardRef<CarouselItemElement, CarouselItemProps>(
     return (
       <div
         ref={ref}
-        role="group"
         aria-roledescription="slide"
         className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
+        role="group"
         {...props}
       />
     );
@@ -217,8 +217,6 @@ const CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPrevi
     return (
       <Button
         ref={ref}
-        variant={variant}
-        size={size}
         className={cn(
           'absolute size-8 rounded-full',
           orientation === 'horizontal'
@@ -227,6 +225,8 @@ const CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPrevi
           className,
         )}
         disabled={!canScrollPrev}
+        size={size}
+        variant={variant}
         onClick={scrollPrev}
         {...props}
       >
@@ -258,8 +258,6 @@ const CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(
     return (
       <Button
         ref={ref}
-        variant={variant}
-        size={size}
         className={cn(
           'absolute size-8 rounded-full',
           orientation === 'horizontal'
@@ -268,6 +266,8 @@ const CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(
           className,
         )}
         disabled={!canScrollNext}
+        size={size}
+        variant={variant}
         onClick={scrollNext}
         {...props}
       >

package/src/react/checkbox-group.primitive.tsx

@@ -25,12 +25,12 @@ const useRovingFocusGroupScope = createRovingFocusGroupScope();
 const useCheckboxScope = createCheckboxScope();
 
 interface CheckboxGroupContextValue {
-  name?: string;
-  required: boolean;
   disabled: boolean;
-  value?: string[];
   onItemCheck: (value: string) => void;
   onItemUncheck: (value: string) => void;
+  required: boolean;
+  name?: string;
+  value?: string[];
 }
 
 const [CheckboxGroupProvider, useCheckboxGroupContext] =
@@ -39,15 +39,15 @@ const [CheckboxGroupProvider, useCheckboxGroupContext] =
 type CheckboxGroupElement = React.ElementRef<typeof Primitive.div>;
 
 interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
-  name?: CheckboxGroupContextValue['name'];
-  required?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['required'];
-  disabled?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['disabled'];
+  defaultValue?: string[];
   dir?: RovingFocusGroup.RovingFocusGroupProps['dir'];
-  orientation?: RovingFocusGroup.RovingFocusGroupProps['orientation'];
+  disabled?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['disabled'];
   loop?: RovingFocusGroup.RovingFocusGroupProps['loop'];
-  defaultValue?: string[];
-  value?: CheckboxGroupContextValue['value'];
+  name?: CheckboxGroupContextValue['name'];
   onValueChange?: (value: string[]) => void;
+  orientation?: RovingFocusGroup.RovingFocusGroupProps['orientation'];
+  required?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['required'];
+  value?: CheckboxGroupContextValue['value'];
 }
 
 const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(
@@ -91,17 +91,17 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
 
     return (
       <CheckboxGroupProvider
-        scope={__scopeCheckboxGroup}
+        disabled={disabled}
         name={name}
         required={required}
-        disabled={disabled}
+        scope={__scopeCheckboxGroup}
         value={value}
         onItemCheck={handleItemCheck}
         onItemUncheck={handleItemUncheck}
       >
-        <RovingFocusGroup.Root asChild {...rovingFocusGroupScope} orientation={orientation} dir={direction} loop={loop}>
+        <RovingFocusGroup.Root asChild {...rovingFocusGroupScope} dir={direction} loop={loop} orientation={orientation}>
           {/* eslint-disable-next-line react/jsx-pascal-case -- radix-ui */}
-          <Primitive.div ref={ref} role="group" data-disabled={disabled ? '' : undefined} dir={direction} {...props} />
+          <Primitive.div ref={ref} data-disabled={disabled ? '' : undefined} dir={direction} role="group" {...props} />
         </RovingFocusGroup.Root>
       </CheckboxGroupProvider>
     );
@@ -135,13 +135,13 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
     const checked = context.value?.includes(props.value);
 
     return (
-      <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable={!isDisabled} active={checked}>
+      <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} active={checked} focusable={!isDisabled}>
         <CheckboxPrimitive.Root
           ref={ref}
-          name={context.name}
+          checked={checked}
           disabled={isDisabled}
+          name={context.name}
           required={context.required}
-          checked={checked}
           {...checkboxScope}
           {...props}
           onCheckedChange={(checkedState) => {

package/src/react/context-menu.tsx

@@ -154,11 +154,11 @@ const ContextMenuCheckboxItem = React.forwardRef<ContextMenuCheckboxItemElement,
   ({ children, className, checked, ...props }, ref) => (
     <ContextMenuPrimitive.CheckboxItem
       ref={ref}
+      checked={checked}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
         className,
       )}
-      checked={checked}
       {...props}
     >
       <span className="absolute left-2 flex size-3.5 items-center justify-center">

package/src/react/data-table.tsx

@@ -38,7 +38,7 @@ function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+        <Button className="ml-auto hidden h-8 lg:flex" size="sm" variant="outline">
           <MixerHorizontalIcon className="mr-2 size-4" />
           View
         </Button>
@@ -53,8 +53,8 @@ function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>
             return (
               <DropdownMenuCheckboxItem
                 key={column.id}
-                className="capitalize"
                 checked={column.getIsVisible()}
+                className="capitalize"
                 onCheckedChange={(value) => {
                   column.toggleVisibility(Boolean(value));
                 }}
@@ -112,47 +112,47 @@ function DataTablePagination<TData>({
         </div>
         <div className="flex items-center space-x-2">
           <Button
-            variant="outline"
-            size="icon-xs"
             className="hidden lg:flex"
+            disabled={!table.getCanPreviousPage()}
+            size="icon-xs"
+            variant="outline"
             onClick={() => {
               table.setPageIndex(0);
             }}
-            disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
             <DoubleArrowLeftIcon className="size-4" />
           </Button>
           <Button
-            variant="outline"
+            disabled={!table.getCanPreviousPage()}
             size="icon-xs"
+            variant="outline"
             onClick={() => {
               table.previousPage();
             }}
-            disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
             <ChevronLeftIcon className="size-4" />
           </Button>
           <Button
-            variant="outline"
+            disabled={!table.getCanNextPage()}
             size="icon-xs"
+            variant="outline"
             onClick={() => {
               table.nextPage();
             }}
-            disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
             <ChevronRightIcon className="size-4" />
           </Button>
           <Button
-            variant="outline"
-            size="icon-xs"
             className="hidden lg:flex"
+            disabled={!table.getCanNextPage()}
+            size="icon-xs"
+            variant="outline"
             onClick={() => {
               table.setPageIndex(table.getPageCount() - 1);
             }}
-            disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
             <DoubleArrowRightIcon className="size-4" />
@@ -185,7 +185,7 @@ function DataTableColumnHeader<TData, TValue>({
     <div className={cn('flex items-center space-x-2', className)}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="xs" className="data-[state=open]:bg-accent -ml-3">
+          <Button className="data-[state=open]:bg-accent -ml-3" size="xs" variant="ghost">
             <span>{title}</span>
             <SortIcon sorted={column.getIsSorted()} />
           </Button>

package/src/react/dropdown-menu.tsx

@@ -105,11 +105,11 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
         ref={ref}
-        sideOffset={sideOffset}
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
           className,
         )}
+        sideOffset={sideOffset}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
@@ -155,11 +155,11 @@ const DropdownMenuCheckboxItem = React.forwardRef<DropdownMenuCheckboxItemElemen
   ({ children, className, checked, ...props }, ref) => (
     <DropdownMenuPrimitive.CheckboxItem
       ref={ref}
+      checked={checked}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
         className,
       )}
-      checked={checked}
       {...props}
     >
       <span className="absolute left-2 flex size-3.5 items-center justify-center">

package/src/react/form.tsx

@@ -37,7 +37,6 @@ const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
 const FormItemContext = React.createContext<FormItemContextValue | null>(null);
 
 const useFormField = (): {
-  error?: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined;
   formDescriptionId: string;
   formItemId: string;
   formMessageId: string;
@@ -47,6 +46,7 @@ const useFormField = (): {
   isTouched: boolean;
   isValidating: boolean;
   name: string;
+  error?: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined;
 } => {
   const fieldContext = React.useContext(FormFieldContext);
   const itemContext = React.useContext(FormItemContext);
@@ -144,9 +144,9 @@ const FormControl = React.forwardRef<FormControlElement, FormControlProps>(({ ..
   return (
     <Slot
       ref={ref}
-      id={formItemId}
       aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={Boolean(error)}
+      id={formItemId}
       {...props}
     />
   );
@@ -165,7 +165,7 @@ const FormDescription = React.forwardRef<FormDescriptionElement, FormDescription
   ({ className, ...props }, ref) => {
     const { formDescriptionId } = useFormField();
 
-    return <p ref={ref} id={formDescriptionId} className={cn('text-muted-foreground text-xs', className)} {...props} />;
+    return <p ref={ref} className={cn('text-muted-foreground text-xs', className)} id={formDescriptionId} {...props} />;
   },
 );
 
@@ -187,7 +187,7 @@ const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(({ ch
   }
 
   return (
-    <p ref={ref} id={formMessageId} className={cn('text-destructive text-xs font-medium', className)} {...props}>
+    <p ref={ref} className={cn('text-destructive text-xs font-medium', className)} id={formMessageId} {...props}>
       {body}
     </p>
   );

package/src/react/hover-card.tsx

@@ -31,11 +31,11 @@ const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardCont
       <HoverCardPrimitive.Content
         ref={ref}
         align={align}
-        sideOffset={sideOffset}
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md',
           className,
         )}
+        sideOffset={sideOffset}
         {...props}
       />
     </HoverCardPrimitive.Portal>

package/src/react/input-otp.tsx

@@ -22,8 +22,8 @@ const InputOTP = React.forwardRef<InputOTPElement, InputOTPProps>(
   ({ className, containerClassName, ...props }, ref) => (
     <OTPInput
       ref={ref}
-      containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
       className={cn('disabled:cursor-not-allowed', className)}
+      containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
       {...props}
     />
   ),

package/src/react/input.tsx

@@ -31,7 +31,7 @@ type InputElement = HTMLInputElement;
 type InputProps = React.InputHTMLAttributes<HTMLInputElement> & InputVariantsProps;
 
 const Input = React.forwardRef<InputElement, InputProps>(({ className, inputSize, ...props }, ref) => {
-  return <input type="text" className={inputVariants({ className, inputSize })} ref={ref} {...props} />;
+  return <input ref={ref} className={inputVariants({ className, inputSize })} type="text" {...props} />;
 });
 
 Input.displayName = 'Input';

package/src/react/menubar.tsx

@@ -137,11 +137,11 @@ const MenubarContent = React.forwardRef<MenubarContentElement, MenubarContentPro
         ref={ref}
         align={align}
         alignOffset={alignOffset}
-        sideOffset={sideOffset}
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
           className,
         )}
+        sideOffset={sideOffset}
         {...props}
       />
     </MenubarPrimitive.Portal>
@@ -185,11 +185,11 @@ const MenubarCheckboxItem = React.forwardRef<MenubarCheckboxItemElement, Menubar
   ({ children, className, checked, ...props }, ref) => (
     <MenubarPrimitive.CheckboxItem
       ref={ref}
+      checked={checked}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
         className,
       )}
-      checked={checked}
       {...props}
     >
       <span className="absolute left-2 flex size-3.5 items-center justify-center">

package/src/react/navigation-menu.tsx

@@ -83,8 +83,8 @@ const NavigationMenuTrigger = React.forwardRef<NavigationMenuTriggerElement, Nav
     >
       {children}
       <ChevronDownIcon
-        className="relative top-px ml-1 size-3 transition group-data-[state=open]:rotate-180"
         aria-hidden="true"
+        className="relative top-px ml-1 size-3 transition group-data-[state=open]:rotate-180"
       />
     </NavigationMenuPrimitive.Trigger>
   ),
@@ -133,11 +133,11 @@ const NavigationMenuViewport = React.forwardRef<NavigationMenuViewportElement, N
   ({ className, ...props }, ref) => (
     <div className="perspective-[125rem] absolute left-0 top-full flex justify-center">
       <NavigationMenuPrimitive.Viewport
+        ref={ref}
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border transition-[width,height] sm:w-[var(--radix-navigation-menu-viewport-width)]',
           className,
         )}
-        ref={ref}
         {...props}
       />
     </div>

package/src/react/pagination.tsx

@@ -12,9 +12,9 @@ type PaginationProps = React.HTMLAttributes<HTMLElement>;
 function Pagination({ className, ...props }: PaginationProps): React.JSX.Element {
   return (
     <nav
-      role="navigation"
       aria-label="pagination"
       className={cn('mx-auto flex w-full justify-center', className)}
+      role="navigation"
       {...props}
     />
   );
@@ -88,8 +88,8 @@ function PaginationPrevious({ className, ...props }: PaginationPreviousProps): R
   return (
     <PaginationLink
       aria-label="Go to previous page"
-      size="default"
       className={cn('gap-1 pl-2.5', className)}
+      size="default"
       {...props}
     >
       <ChevronLeftIcon className="size-4" />
@@ -106,7 +106,7 @@ type PaginationNextProps = PaginationLinkProps;
 
 function PaginationNext({ className, ...props }: PaginationNextProps): React.JSX.Element {
   return (
-    <PaginationLink aria-label="Go to next page" size="default" className={cn('gap-1 pr-2.5', className)} {...props}>
+    <PaginationLink aria-label="Go to next page" className={cn('gap-1 pr-2.5', className)} size="default" {...props}>
       <span>Next</span>
       <ChevronRightIcon className="size-4" />
     </PaginationLink>

package/src/react/popover.tsx

@@ -38,11 +38,11 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
       <PopoverPrimitive.Content
         ref={ref}
         align={align}
-        sideOffset={sideOffset}
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md',
           className,
         )}
+        sideOffset={sideOffset}
         {...props}
       />
     </PopoverPrimitive.Portal>

package/src/react/radio.tsx

@@ -18,12 +18,12 @@ const Radio = React.forwardRef<RadioElement, RadioProps>(({ className, onValueCh
   return (
     <input
       ref={ref}
-      type="radio"
-      onChange={composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value))}
       className={cn(
         'before:border-input hover:before:border-primary checked:before:border-primary checked:after:bg-primary peer relative flex appearance-none items-center justify-center rounded-full before:size-4 before:rounded-full before:border checked:after:absolute checked:after:size-2.5 checked:after:rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
         className,
       )}
+      type="radio"
+      onChange={composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value))}
       {...props}
     />
   );