Update Convex with no payload to be just like convex with payload but without payload

packages/ui/src/based-avatar.tsx

@@ -4,12 +4,12 @@ import type { ComponentProps } from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { User } from 'lucide-react';
 
-import { AvatarImage, cn } from '@gib/ui';
+import { cn } from '@gib/ui';
 
 type BasedAvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {
   src?: string | null;
   fullName?: string | null;
-  imageProps?: Omit<ComponentProps<typeof AvatarImage>, 'data-slot'>;
+  imageProps?: Omit<ComponentProps<typeof AvatarPrimitive.Image>, 'data-slot'>;
   fallbackProps?: ComponentProps<typeof AvatarPrimitive.Fallback>;
   userIconProps?: ComponentProps<typeof User>;
 };
@@ -35,7 +35,7 @@ const BasedAvatar = ({
       {...props}
     >
       {src ? (
-        <AvatarImage
+        <AvatarPrimitive.Image
           {...imageProps}
           src={src}
           className={imageProps?.className}

packages/ui/src/based-progress.tsx

@@ -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;
   })
@@ -105,6 +105,15 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
+type ChartPayloadItem = {
+  name?: string | number;
+  value?: number | string;
+  dataKey?: string | number;
+  type?: string;
+  color?: string;
+  payload?: Record<string, unknown> & { fill?: string };
+};
+
 const ChartTooltipContent = ({
   active,
   payload,
@@ -119,14 +128,29 @@ const ChartTooltipContent = ({
   color,
   nameKey,
   labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<'div'> & {
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: 'line' | 'dot' | 'dashed';
-    nameKey?: string;
-    labelKey?: string;
-  }) => {
+}: React.ComponentProps<'div'> & {
+  active?: boolean;
+  payload?: ChartPayloadItem[];
+  label?: React.ReactNode;
+  labelFormatter?: (
+    value: React.ReactNode,
+    payload: ChartPayloadItem[],
+  ) => React.ReactNode;
+  formatter?: (
+    value: number | string,
+    name: string | number,
+    item: ChartPayloadItem,
+    index: number,
+    itemPayload: ChartPayloadItem['payload'],
+  ) => React.ReactNode;
+  color?: string;
+  labelClassName?: string;
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: 'line' | 'dot' | 'dashed';
+  nameKey?: string;
+  labelKey?: string;
+}) => {
   const { config } = useChart();
 
   const tooltipLabel = React.useMemo(() => {
@@ -135,11 +159,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,19 +207,19 @@ 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
-                key={item.dataKey}
+                key={item.dataKey ?? index}
                 className={cn(
                   '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
                   indicator === 'dot' && 'items-center',
                 )}
               >
-                {formatter && item?.value !== undefined && item.name ? (
+                {formatter && item.value !== undefined && item.name ? (
                   formatter(item.value, item.name, item, index, item.payload)
                 ) : (
                   <>
@@ -232,7 +256,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 && (
@@ -259,11 +283,12 @@ const ChartLegendContent = ({
   payload,
   verticalAlign = 'bottom',
   nameKey,
-}: React.ComponentProps<'div'> &
-  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-    hideIcon?: boolean;
-    nameKey?: string;
-  }) => {
+}: React.ComponentProps<'div'> & {
+  payload?: ChartPayloadItem[];
+  verticalAlign?: 'top' | 'bottom';
+  hideIcon?: boolean;
+  nameKey?: string;
+}) => {
   const { config } = useChart();
 
   if (!payload?.length) {
@@ -280,13 +305,13 @@ const ChartLegendContent = ({
     >
       {payload
         .filter((item) => item.type !== 'none')
-        .map((item) => {
-          const key = `${nameKey || item.dataKey || 'value'}`;
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? 'value'}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (
             <div
-              key={item.value}
+              key={item.value ?? index}
               className={cn(
                 '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
               )}

packages/ui/src/combobox.tsx

@@ -68,13 +68,16 @@ const ComboboxInput = ({
     />
     <InputGroupAddon align='inline-end'>
       {showTrigger && (
-        <InputGroupButton
-          size='icon-xs'
-          variant='ghost'
-          render={<ComboboxTrigger />}
-          data-slot='input-group-button'
-          className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
-          disabled={disabled}
+        <ComboboxTrigger
+          render={
+            <InputGroupButton
+              size='icon-xs'
+              variant='ghost'
+              data-slot='input-group-button'
+              className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
+              disabled={disabled}
+            />
+          }
         />
       )}
       {showClear && <ComboboxClear disabled={disabled} />}

packages/ui/src/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

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 () => {
@@ -293,19 +294,17 @@ export const ImageCropApply = ({
 
   if (asChild) {
     return (
-      <Slot.Root onClick={handleClick} {...(props as any)}>
+      <Slot.Root
+        onClick={handleClick}
+        {...(props as ComponentProps<typeof Slot.Root>)}
+      >
         {children}
       </Slot.Root>
     );
   }
 
   return (
-    <Button
-      onClick={handleClick}
-      size='icon'
-      variant='ghost'
-      {...(props as any)}
-    >
+    <Button onClick={handleClick} size='icon' variant='ghost' {...props}>
       {children ?? <CropIcon className='size-4' />}
     </Button>
   );
@@ -330,19 +329,17 @@ export const ImageCropReset = ({
 
   if (asChild) {
     return (
-      <Slot.Root onClick={handleClick} {...(props as any)}>
+      <Slot.Root
+        onClick={handleClick}
+        {...(props as ComponentProps<typeof Slot.Root>)}
+      >
         {children}
       </Slot.Root>
     );
   }
 
   return (
-    <Button
-      onClick={handleClick}
-      size='icon'
-      variant='ghost'
-      {...(props as any)}
-    >
+    <Button onClick={handleClick} size='icon' variant='ghost' {...props}>
       {children ?? <RotateCcwIcon className='size-4' />}
     </Button>
   );
@@ -372,7 +369,15 @@ export const Cropper = ({
     onChange={onChange}
     onComplete={onComplete}
     onCrop={onCrop}
-    {...(props as any)}
+    {...(props as Omit<
+      ImageCropProps,
+      | 'file'
+      | 'maxImageSize'
+      | 'onChange'
+      | 'onComplete'
+      | 'onCrop'
+      | 'children'
+    >)}
   >
     <ImageCropContent className={className} style={style} />
   </ImageCrop>

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',