Fix a bunch of errors we had

packages/ui/src/based-progress.tsx

@@ -21,7 +21,7 @@ const BasedProgress = ({
   value = 0,
   ...props
 }: BasedProgressProps) => {
-  const [progress, setProgress] = React.useState<number>(value ?? 0);
+  const [progress, setProgress] = React.useState<number>(value);
 
   React.useEffect(() => {
     const id = window.setInterval(() => {
@@ -45,7 +45,7 @@ const BasedProgress = ({
       <ProgressPrimitive.Indicator
         data-slot='progress-indicator'
         className='bg-primary h-full w-full flex-1 transition-all'
-        style={{ transform: `translateX(-${100 - (progress ?? 0)}%)` }}
+        style={{ transform: `translateX(-${100 - progress}%)` }}
       />
     </ProgressPrimitive.Root>
   );

packages/ui/src/carousel.tsx

@@ -98,7 +98,7 @@ const Carousel = ({
     api.on('select', onSelect);
 
     return () => {
-      api?.off('select', onSelect);
+      api.off('select', onSelect);
     };
   }, [api, onSelect]);
 
@@ -108,8 +108,7 @@ const Carousel = ({
         carouselRef,
         api: api,
         opts,
-        orientation:
-          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        orientation: orientation,
         scrollPrev,
         scrollNext,
         canScrollPrev,

packages/ui/src/chart.tsx

@@ -48,7 +48,7 @@ const ChartContainer = ({
   >['children'];
 }) => {
   const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -72,7 +72,7 @@ const ChartContainer = ({
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color,
+    ([, config]) => config.theme ?? config.color,
   );
 
   if (!colorConfig.length) {
@@ -89,7 +89,7 @@ ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
       itemConfig.color;
     return color ? `  --color-${key}: ${color};` : null;
   })
@@ -135,11 +135,11 @@ const ChartTooltipContent = ({
     }
 
     const [item] = payload;
-    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value =
       !labelKey && typeof label === 'string'
-        ? config[label]?.label || label
+        ? config[label]?.label ?? label
         : itemConfig?.label;
 
     if (labelFormatter) {
@@ -183,9 +183,9 @@ const ChartTooltipContent = ({
         {payload
           .filter((item) => item.type !== 'none')
           .map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color;
+            const indicatorColor = color ?? item.payload.fill ?? item.color;
 
             return (
               <div
@@ -232,7 +232,7 @@ const ChartTooltipContent = ({
                       <div className='grid gap-1.5'>
                         {nestLabel ? tooltipLabel : null}
                         <span className='text-muted-foreground'>
-                          {itemConfig?.label || item.name}
+                          {itemConfig?.label ?? item.name}
                         </span>
                       </div>
                       {item.value && (
@@ -281,7 +281,7 @@ const ChartLegendContent = ({
       {payload
         .filter((item) => item.type !== 'none')
         .map((item) => {
-          const key = `${nameKey || item.dataKey || 'value'}`;
+          const key = `${nameKey ?? item.dataKey ?? 'value'}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (

packages/ui/src/form.tsx

@@ -46,10 +46,6 @@ const useFormField = () => {
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
 
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
   const { id } = itemContext;
 
   return {
@@ -138,7 +134,7 @@ const FormDescription = ({
 
 const FormMessage = ({ className, ...props }: React.ComponentProps<'p'>) => {
   const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? '') : props.children;
+  const body = error ? String(error.message ?? '') : props.children;
 
   if (!body) {
     return null;

packages/ui/src/hooks/use-on-click-outside.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { MousePointerClick, X } from 'lucide-react';
 
 type EventType =
   | 'mousedown'

packages/ui/src/image-crop.tsx

@@ -153,7 +153,7 @@ export const ImageCrop = ({
   useEffect(() => {
     const reader = new FileReader();
     reader.addEventListener('load', () =>
-      setImgSrc(reader.result?.toString() || ''),
+      setImgSrc(typeof reader.result === 'string' ? reader.result : ''),
     );
     reader.readAsDataURL(file);
   }, [file]);
@@ -173,12 +173,13 @@ export const ImageCrop = ({
     onChange?.(pixelCrop, percentCrop);
   };
 
-  const handleComplete = async (
+  const handleComplete = (
     pixelCrop: PixelCrop,
     percentCrop: PercentCrop,
-  ) => {
+  ): Promise<void> => {
     setCompletedCrop(pixelCrop);
     onComplete?.(pixelCrop, percentCrop);
+    return Promise.resolve();
   };
 
   const applyCrop = async () => {

packages/ui/src/input-otp.tsx

@@ -47,7 +47,7 @@ const InputOTPSlot = ({
   index: number;
 }) => {
   const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
 
   return (
     <div

packages/ui/src/progress.tsx

@@ -21,7 +21,7 @@ const Progress = ({
     <ProgressPrimitive.Indicator
       data-slot='progress-indicator'
       className='bg-primary size-full flex-1 transition-all'
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
     />
   </ProgressPrimitive.Root>
 );

packages/ui/src/sidebar.tsx

@@ -602,9 +602,9 @@ const SidebarMenuSkeleton = ({
   showIcon?: boolean;
 }) => {
   // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
+  const [width] = React.useState(
+    () => `${Math.floor(Math.random() * 40) + 50}%`,
+  );
 
   return (
     <div

packages/ui/src/toggle-group.tsx

@@ -58,13 +58,13 @@ const ToggleGroupItem = ({
   return (
     <ToggleGroupPrimitive.Item
       data-slot='toggle-group-item'
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
+      data-variant={context.variant ?? variant}
+      data-size={context.size ?? size}
       data-spacing={context.spacing}
       className={cn(
         toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
+          variant: context.variant ?? variant,
+          size: context.size ?? size,
         }),
         'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
         'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',