Made great progress on monorepo & auth for next. Very happy with work!

packages/ui/src/based-avatar.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import type { ComponentProps } from 'react';
-import { cn, AvatarImage } from '@gib/ui';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { User } from 'lucide-react';
 
+import { AvatarImage, cn } from '@gib/ui';
+
 type BasedAvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {
   src?: string | null;
   fullName?: string | null;

packages/ui/src/based-progress.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@gib/ui';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 
+import { cn } from '@gib/ui';
+
 type BasedProgressProps = React.ComponentProps<
   typeof ProgressPrimitive.Root
 > & {

packages/ui/src/button.tsx

@@ -1,9 +1,10 @@
 import type { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-import { cn } from '@gib/ui';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 
+import { cn } from '@gib/ui';
+
 const buttonVariants = cva(
   "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {

packages/ui/src/card.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { cn } from '@gib/ui';
 
 function Card({ className, ...props }: React.ComponentProps<'div'>) {

packages/ui/src/checkbox.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@gib/ui';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 
+import { cn } from '@gib/ui';
+
 function Checkbox({
   className,
   ...props

packages/ui/src/drawer.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@gib/ui';
 import { Drawer as DrawerPrimitive } from 'vaul';
 
+import { cn } from '@gib/ui';
+
 function Drawer({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) {

packages/ui/src/dropdown-menu.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@gib/ui';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 
+import { cn } from '@gib/ui';
+
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {

packages/ui/src/field.tsx

@@ -2,9 +2,10 @@
 
 import type { VariantProps } from 'class-variance-authority';
 import { useMemo } from 'react';
-import { cn, Label, Separator } from '@gib/ui';
 import { cva } from 'class-variance-authority';
 
+import { cn, Label, Separator } from '@gib/ui';
+
 export function FieldSet({
   className,
   ...props

packages/ui/src/form.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import type * as LabelPrimitive from '@radix-ui/react-label';
 import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import * as React from 'react';
-import { cn, Label } from '@gib/ui';
-import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import {
   Controller,
@@ -12,6 +11,8 @@ import {
   useFormState,
 } from 'react-hook-form';
 
+import { cn, Label } from '@gib/ui';
+
 const Form = FormProvider;
 
 type FormFieldContextValue<

packages/ui/src/input-otp.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@gib/ui';
 import { OTPInput, OTPInputContext } from 'input-otp';
 import { MinusIcon } from 'lucide-react';
 
+import { cn } from '@gib/ui';
+
 function InputOTP({
   className,
   containerClassName,

packages/ui/src/input.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { cn } from '@gib/ui';
 
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {

packages/ui/src/label.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@gib/ui';
 import * as LabelPrimitive from '@radix-ui/react-label';
 
+import { cn } from '@gib/ui';
+
 function Label({
   className,
   ...props

packages/ui/src/pagination.tsx

@@ -1,12 +1,13 @@
 import type * as React from 'react';
-import type { Button } from '@gib/ui';
-import { cn, buttonVariants } from '@gib/ui';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   MoreHorizontalIcon,
 } from 'lucide-react';
 
+import type { Button } from '@gib/ui';
+import { buttonVariants, cn } from '@gib/ui';
+
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
     <nav

packages/ui/src/progress.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import type * as React from 'react';
-import { cn } from '@gib/ui';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 
+import { cn } from '@gib/ui';
+
 function Progress({
   className,
   value,

packages/ui/src/scroll-area.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import type * as React from 'react';
-import { cn } from '@gib/ui';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
+import { cn } from '@gib/ui';
+
 function ScrollArea({
   className,
   children,

packages/ui/src/separator.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '@gib/ui';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
+import { cn } from '@gib/ui';
+
 function Separator({
   className,
   orientation = 'horizontal',

packages/ui/src/shadcn-io/image-crop/index.tsx

@@ -17,11 +17,12 @@ import {
   useRef,
   useState,
 } from 'react';
-import { cn, Button } from '@gib/ui';
 import { CropIcon, RotateCcwIcon } from 'lucide-react';
 import { Slot } from 'radix-ui';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 
+import { Button, cn } from '@gib/ui';
+
 import 'react-image-crop/dist/ReactCrop.css';
 
 const centerAspectCrop = (
@@ -110,7 +111,7 @@ interface ImageCropContextType {
   onImageLoad: (e: SyntheticEvent<HTMLImageElement>) => void;
   applyCrop: () => Promise<void>;
   resetCrop: () => void;
-};
+}
 
 const ImageCropContext = createContext<ImageCropContextType | null>(null);
 

packages/ui/src/sonner.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useTheme } from 'next-themes';
 import type { ToasterProps } from 'sonner';
+import { useTheme } from 'next-themes';
 import { Toaster as Sonner } from 'sonner';
 
 const Toaster = ({ ...props }: ToasterProps) => {

packages/ui/src/status-message.tsx

@@ -1,4 +1,5 @@
 import type { ComponentProps } from 'react';
+
 import { cn } from '@gib/ui';
 
 type Message = { success: string } | { error: string } | { message: string };
@@ -7,7 +8,7 @@ interface StatusMessageProps {
   message: Message;
   containerProps?: ComponentProps<'div'>;
   textProps?: ComponentProps<'div'>;
-};
+}
 
 export const StatusMessage = ({
   message,

packages/ui/src/submit-button.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import type { ComponentProps } from 'react';
-import { cn, Button } from '@gib/ui';
 import { Loader2 } from 'lucide-react';
 import { useFormStatus } from 'react-dom';
 
+import { Button, cn } from '@gib/ui';
+
 export type SubmitButtonProps = Omit<
   ComponentProps<typeof Button>,
   'type' | 'aria-disabled'

packages/ui/src/switch.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import type * as React from 'react';
-import { cn } from '@gib/ui';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 
+import { cn } from '@gib/ui';
+
 function Switch({
   className,
   ...props

packages/ui/src/table.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type * as React from 'react';
+
 import { cn } from '@gib/ui';
 
 function Table({ className, ...props }: React.ComponentProps<'table'>) {

packages/ui/src/tabs.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import type * as React from 'react';
-import { cn } from '@gib/ui';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
+import { cn } from '@gib/ui';
+
 function Tabs({
   className,
   ...props

packages/ui/src/theme.tsx

@@ -24,7 +24,7 @@ const ThemeProvider = ({
 interface ThemeToggleProps {
   size?: number;
   buttonProps?: Omit<ComponentProps<typeof Button>, 'onClick'>;
-};
+}
 
 const ThemeToggle = ({ size = 1, buttonProps }: ThemeToggleProps) => {
   const { setTheme, resolvedTheme } = useTheme();