Update AGENTS.md. Start fixing old weird errors

packages/ui/src/field.tsx

@@ -6,58 +6,52 @@ import { cva } from 'class-variance-authority';
 
 import { cn, Label, Separator } from '@gib/ui';
 
-export function FieldSet({
+export const FieldSet = ({
   className,
   ...props
-}: React.ComponentProps<'fieldset'>) {
-  return (
-    <fieldset
-      data-slot='field-set'
-      className={cn(
-        'flex flex-col gap-6',
-        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.ComponentProps<'fieldset'>) => (
+  <fieldset
+    data-slot='field-set'
+    className={cn(
+      'flex flex-col gap-6',
+      'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+      className,
+    )}
+    {...props}
+  />
+);
 
-export function FieldLegend({
+export const FieldLegend = ({
   className,
   variant = 'legend',
   ...props
-}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
-  return (
-    <legend
-      data-slot='field-legend'
-      data-variant={variant}
-      className={cn(
-        'mb-3 font-medium',
-        'data-[variant=legend]:text-base',
-        'data-[variant=label]:text-sm',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) => (
+  <legend
+    data-slot='field-legend'
+    data-variant={variant}
+    className={cn(
+      'mb-3 font-medium',
+      'data-[variant=legend]:text-base',
+      'data-[variant=label]:text-sm',
+      className,
+    )}
+    {...props}
+  />
+);
 
-export function FieldGroup({
+export const FieldGroup = ({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='field-group'
-      className={cn(
-        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='field-group'
+    className={cn(
+      'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+      className,
+    )}
+    {...props}
+  />
+);
 
 const fieldVariants = cva(
   'group/field data-[invalid=true]:text-destructive flex w-full gap-3',
@@ -83,128 +77,116 @@ const fieldVariants = cva(
   },
 );
 
-export function Field({
+export const Field = ({
   className,
   orientation = 'vertical',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role='group'
-      data-slot='field'
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
-    />
-  );
-}
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) => (
+  <div
+    role='group'
+    data-slot='field'
+    data-orientation={orientation}
+    className={cn(fieldVariants({ orientation }), className)}
+    {...props}
+  />
+);
 
-export function FieldContent({
+export const FieldContent = ({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='field-content'
-      className={cn(
-        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='field-content'
+    className={cn(
+      'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+      className,
+    )}
+    {...props}
+  />
+);
 
-export function FieldLabel({
+export const FieldLabel = ({
   className,
   ...props
-}: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot='field-label'
-      className={cn(
-        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.ComponentProps<typeof Label>) => (
+  <Label
+    data-slot='field-label'
+    className={cn(
+      'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+      'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+      'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+      className,
+    )}
+    {...props}
+  />
+);
 
-export function FieldTitle({
+export const FieldTitle = ({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='field-label'
-      className={cn(
-        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.ComponentProps<'div'>) => (
+  <div
+    data-slot='field-label'
+    className={cn(
+      'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+);
 
-export function FieldDescription({
+export const FieldDescription = ({
   className,
   ...props
-}: React.ComponentProps<'p'>) {
-  return (
-    <p
-      data-slot='field-description'
-      className={cn(
-        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
-        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.ComponentProps<'p'>) => (
+  <p
+    data-slot='field-description'
+    className={cn(
+      'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+      'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+      className,
+    )}
+    {...props}
+  />
+);
 
-export function FieldSeparator({
+export const FieldSeparator = ({
   children,
   className,
   ...props
 }: React.ComponentProps<'div'> & {
   children?: React.ReactNode;
-}) {
-  return (
-    <div
-      data-slot='field-separator'
-      data-content={!!children}
-      className={cn(
-        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
-        className,
-      )}
-      {...props}
-    >
-      <Separator className='absolute inset-0 top-1/2' />
-      {children && (
-        <span
-          className='bg-background text-muted-foreground relative mx-auto block w-fit px-2'
-          data-slot='field-separator-content'
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  );
-}
+}) => (
+  <div
+    data-slot='field-separator'
+    data-content={!!children}
+    className={cn(
+      'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+      className,
+    )}
+    {...props}
+  >
+    <Separator className='absolute inset-0 top-1/2' />
+    {children && (
+      <span
+        className='bg-background text-muted-foreground relative mx-auto block w-fit px-2'
+        data-slot='field-separator-content'
+      >
+        {children}
+      </span>
+    )}
+  </div>
+);
 
-export function FieldError({
+export const FieldError = ({
   className,
   children,
   errors: maybeErrors,
   ...props
 }: React.ComponentProps<'div'> & {
   errors?: ({ message?: string } | undefined)[];
-}) {
+}) => {
   const content = useMemo(() => {
     if (children) {
       return children;
@@ -244,4 +226,4 @@ export function FieldError({
       {content}
     </div>
   );
-}
+};