Feat: Form components

package.json

@@ -14,10 +14,15 @@
         "@jonkoops/matomo-tracker-react": "^0.7.0",
         "@miblanchard/react-native-slider": "^2.1.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+        "@radix-ui/react-checkbox": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-popover": "^1.1.1",
+        "@radix-ui/react-radio-group": "^1.2.0",
+        "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.0",
+        "@radix-ui/react-toggle": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@svgr/webpack": "^6.3.1",
         "@tabler/icons-react": "^3.11.0",

src/components/Checkbox.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { IconCheck } from '@tabler/icons-react';
+import { cn } from '@/lib/Tailwind';
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>>(
+    ({ className, ...props }, ref) => (
+        <CheckboxPrimitive.Root
+            ref={ref}
+            className={cn(
+                'peer size-6 shrink-0 rounded-sm border-[0.5px] border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+                className
+            )}
+            {...props}
+        >
+            <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+                <IconCheck className="size-4" />
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+    )
+);
+
+export { Checkbox };

src/components/Input.tsx

@@ -1,2 +1,20 @@
-import { Input } from 'native-base';
-export default Input;
+import * as React from 'react';
+import { cn } from '@/lib/Tailwind';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+    return (
+        <input
+            type={type}
+            className={cn(
+                'flex h-10 rounded-md border border-input bg-transparent px-3 py-1 text-form font-normal text-primary transition-colors file:border-0 file:bg-transparent file:text-form file:py-2 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                className
+            )}
+            ref={ref}
+            {...props}
+        />
+    );
+});
+
+export { Input };

src/components/Label.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/Tailwind';
+
+const labelVariants = cva('text-form leading-4 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, ...props }, ref) => (
+    <label ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+
+export { Label };

src/components/Popover.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@/lib/Tailwind';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<React.ElementRef<typeof PopoverPrimitive.Content>, React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>>(
+    ({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+        <PopoverPrimitive.Portal>
+            <PopoverPrimitive.Content
+                ref={ref}
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                    'z-50 w-72 rounded-md border border-input bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                    className
+                )}
+                {...props}
+            />
+        </PopoverPrimitive.Portal>
+    )
+);
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

src/components/RadioGroup.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { IconCheck } from '@tabler/icons-react';
+import { cn } from '@/lib/Tailwind';
+
+const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>>(
+    ({ className, ...props }, ref) => {
+        return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
+    }
+);
+
+const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>>(
+    ({ className, ...props }, ref) => {
+        return (
+            <RadioGroupPrimitive.Item
+                ref={ref}
+                className={cn(
+                    'aspect-square size-6 rounded-full border-[0.5px] border-primary data-[state=checked]:bg-primary text-primary-foreground shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                    className
+                )}
+                {...props}
+            >
+                <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+                    <IconCheck className="size-3" />
+                </RadioGroupPrimitive.Indicator>
+            </RadioGroupPrimitive.Item>
+        );
+    }
+);
+
+export { RadioGroup, RadioGroupItem };