@twintag/twintag-form 1.0.1 → 1.1.0

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ type RawProps = Partial<{
     bind: string;
     subtype: string;
     label: string;
+    icon: string;
     options: Partial<{
         description: string;
         placeholder: string;
@@ -14,20 +15,20 @@ type RawProps = Partial<{
         optionalField: boolean;
     }>;
 }>;
-export type RawJsonComponent = RawProps & {
+export type RawJsonComponent = RawProps & Record<string, unknown> & {
     type: string;
     children?: RawJsonComponent[];
 } & {
     props?: RawProps;
 };
-export type Props = Omit<RawProps, 'subtype'> & {
-    bind: string;
-    items?: ParsedJsonComponent[];
-};
 export type ParsedJsonComponent = Props & {
     id: string;
     type: string;
     subtype?: string;
     comp?: ElementType;
 };
+export type Props = Omit<RawProps, 'subtype'> & {
+    bind: string;
+    items?: ParsedJsonComponent[];
+};
 export {};

package/dist/utils/data.d.ts

@@ -0,0 +1,2 @@
+import type { Props } from '../types';
+export declare const getBindSetFromItems: (items: Props[]) => Set<string>;

package/dist/utils/string.d.ts

@@ -0,0 +1,3 @@
+export declare const camelize: (str: string) => string;
+export declare const camelizeKebab: (s: string) => string;
+export declare const capitalize: (s: string) => string;

package/dist/utils/style.d.ts

@@ -0,0 +1,2 @@
+import type { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/index.html

@@ -6,7 +6,9 @@
     <title>Twintag Form</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div style="margin-inline: auto; max-width: 32rem; background: hsl(var(--tf-background)); padding: 2rem">
+      <twintag-form></twintag-form>
+    </div>
     <script type="module" src="./dev/main.tsx"></script>
   </body>
 </html>

package/lib/common/accordion.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import { tv } from 'tailwind-variants';
+
+const Accordion = AccordionPrimitive.Root;
+
+const accordionVariants = tv({
+  base: 'border-b',
+});
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={accordionVariants({ className })}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const accordionTriggerVariants = tv({
+  slots: {
+    header: 'flex',
+    trigger:
+      'flex flex-1 items-center justify-between py-4 font-medium hover:underline [&[data-state=open]>svg]:rotate-180',
+    icon: 'h-4 w-4 shrink-0 text-current transition-transform duration-200',
+  },
+});
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => {
+  const { header, trigger, icon } = accordionTriggerVariants();
+  return (
+    <AccordionPrimitive.Header className={header()} asChild>
+      <div>
+        <AccordionPrimitive.Trigger
+          ref={ref}
+          className={trigger({
+            className,
+          })}
+          {...props}
+        >
+          {children}
+          <ChevronDown className={icon()} />
+        </AccordionPrimitive.Trigger>
+      </div>
+    </AccordionPrimitive.Header>
+  );
+});
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const accordionContentVariants = tv({
+  slots: {
+    content:
+      'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+    wrapper: 'pb-4 pt-0',
+  },
+});
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  const { content, wrapper } = accordionContentVariants();
+
+  return (
+    <AccordionPrimitive.Content ref={ref} className={content()} {...props}>
+      <div className={wrapper({ className })}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+});
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/lib/common/button.tsx

@@ -14,6 +14,9 @@ const buttonVariants = tv({
     variant: {
       default:
         'bg-primary-foreground text-primary shadow hover:bg-primary-foreground/90',
+      outline:
+        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
     },
     size: {
       default: 'h-9 px-4 py-2',

package/lib/common/calendar.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+import { tv } from 'tailwind-variants';
+
+import { buttonVariants } from '@twintag/twintag-form/common/button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+const calendarVariants = tv({
+  slots: {
+    picker: 'p-3',
+    months: 'flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0',
+    month: 'space-y-4',
+    caption: 'relative flex items-center justify-center pt-1',
+    caption_dropdowns: '',
+    caption_label: 'text-sm font-semibold',
+    nav: 'flex items-center space-x-1',
+    nav_button: buttonVariants({
+      variant: 'outline',
+      className: 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+    }),
+    nav_button_previous: 'absolute left-1',
+    nav_button_next: 'absolute right-1',
+    table: 'w-full border-collapse space-y-1',
+    head_row: 'flex',
+    head_cell: 'w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground',
+    row: 'mt-2 flex w-full',
+    cell: 'relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-transparent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-muted/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+    day: buttonVariants({
+      variant: 'ghost',
+      className: 'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+    }),
+    day_range_end: 'day-range-end',
+    day_selected:
+      'bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+    day_today: 'bg-muted text-muted-foreground',
+    day_outside:
+      'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/30 aria-selected:text-accent-foreground',
+    day_disabled: 'text-muted-foreground opacity-50',
+    day_range_middle:
+      'aria-selected:bg-accent aria-selected:text-accent-foreground',
+    day_hidden: 'invisible',
+  },
+  variants: {
+    variant: {
+      dropdown: {
+        caption_label: 'hidden',
+        caption_dropdowns: [
+          'flex w-4/6 justify-center gap-1',
+          '[&>*>span]:hidden [&>*]:flex-1 [&>.rdp-vhidden]:hidden ',
+          '[&>*>select]:h-7 [&>*>select]:min-w-[3.6rem] [&>*>select]:rounded-md [&>*>select]:border [&>*>select]:border-input [&>*>select]:bg-background [&>*>select]:px-1 [&>*>select]:text-sm',
+          '[&>*>select]:ring-offset-background [&>*>select]:focus-visible:outline-none [&>*>select]:focus-visible:ring-1 [&>*>select]:focus-visible:ring-ring',
+        ],
+      },
+    },
+  },
+});
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  const slots = calendarVariants({
+    variant:
+      props.captionLayout === 'dropdown-buttons' ? 'dropdown' : undefined,
+  });
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={slots.picker({ className })}
+      classNames={{
+        months: slots.months(),
+        month: slots.month(),
+        caption: slots.caption(),
+        caption_label: slots.caption_label(),
+        caption_dropdowns: slots.caption_dropdowns(),
+        nav: slots.nav(),
+        nav_button: slots.nav_button(),
+        nav_button_previous: slots.nav_button_previous(),
+        nav_button_next: slots.nav_button_next(),
+        table: slots.table(),
+        head_row: slots.head_row(),
+        head_cell: slots.head_cell(),
+        row: slots.row(),
+        cell: slots.cell(),
+        day: slots.day(),
+        day_range_end: slots.day_range_end(),
+        day_selected: slots.day_selected(),
+        day_today: slots.day_today(),
+        day_outside: slots.day_outside(),
+        day_disabled: slots.day_disabled(),
+        day_range_middle: slots.day_range_middle(),
+        day_hidden: slots.day_hidden(),
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <ChevronLeft className='h-4 w-4' />,
+        IconRight: () => <ChevronRight className='h-4 w-4' />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

package/lib/common/form.tsx

@@ -6,6 +6,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { Controller, FormProvider, useFormContext } from 'react-hook-form';
 import { tv } from 'tailwind-variants';
 
+import { useTwintagForm } from '../provider';
 import { Label } from './label';
 
 const Form = FormProvider;
@@ -67,6 +68,12 @@ const FormItemContext = React.createContext<FormItemContextValue>(
 
 const formItemVariants = tv({
   base: 'space-y-2',
+  variants: {
+    variant: {
+      default: '',
+      beta: 'space-y-1',
+    },
+  },
 });
 const FormItem = React.forwardRef<
   HTMLDivElement,
@@ -74,9 +81,15 @@ const FormItem = React.forwardRef<
 >(({ className, ...props }, ref) => {
   const id = React.useId();
 
+  const { variant } = useTwintagForm();
+
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={formItemVariants({ className })} {...props} />
+      <div
+        ref={ref}
+        className={formItemVariants({ variant, className })}
+        {...props}
+      />
     </FormItemContext.Provider>
   );
 });

package/lib/common/icon.tsx

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+
+import { useMemo } from 'react';
+import * as icons from '@heroicons/react/24/outline';
+import { tv } from 'tailwind-variants';
+
+import { camelizeKebab, capitalize } from '../utils/string';
+
+type Props = {
+  name: string;
+  className?: string;
+};
+const iconVariants = tv({
+  base: 'h-5 w-5',
+});
+export const Icon: FC<Props> = ({ name, className, ...props }) => {
+  const camel = useMemo(
+    () => `${capitalize(camelizeKebab(name))}Icon` as keyof typeof icons,
+    [name],
+  );
+
+  const Comp = icons[camel];
+
+  if (!Comp) return <></>;
+
+  return (
+    <Comp
+      aria-hidden='true'
+      className={iconVariants({
+        className,
+      })}
+      {...props}
+    />
+  );
+};

package/lib/common/input.tsx

@@ -21,7 +21,7 @@ const inputVariants = tv({
           'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       },
       beta: {
-        root: 'after:absolute after:left-0 after:top-[calc(100%_+_2px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
+        root: 'after:absolute after:left-0 after:top-[calc(100%_+_1px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
         input: 'border-b px-1',
       },
     },
@@ -30,6 +30,7 @@ const inputVariants = tv({
     variant: 'default',
   },
 });
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
     const { variant } = useTwintagForm();

package/lib/common/popover.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { tv } from 'tailwind-variants';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const popoverContentVariants = tv({
+  base: 'z-50 w-72 rounded-md border bg-background p-4 text-foreground shadow-md outline-none',
+});
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 2, ...props }, ref) => {
+  return (
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={popoverContentVariants({
+        className,
+      })}
+      {...props}
+    />
+  );
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

package/lib/common/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@twintag/twintag-form/utils/style';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-input' />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/lib/common/select.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { CaretSortIcon } from '@radix-ui/react-icons';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '../utils/style';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretSortIcon className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className='h-4 w-4' />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className='h-4 w-4' />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => {
+  return (
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-background text-foreground shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  );
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <SelectPrimitive.ItemIndicator>
+        <Check className='h-4 w-4' />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/lib/common/textarea.tsx

@@ -20,7 +20,7 @@ const textareaVariants = tv({
           'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       },
       beta: {
-        root: 'after:absolute after:left-0 after:top-[calc(100%_+_2px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
+        root: 'after:absolute after:left-0 after:top-[calc(100%_+_1px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
         textarea: 'border-b px-1',
       },
     },

package/lib/components/Render/index.tsx

@@ -1,6 +1,8 @@
 import type { FC } from 'react';
 import type { ParsedJsonComponent } from '@twintag/twintag-form/types';
 
+import { Containers } from '@twintag/twintag-form/components/config';
+
 type Props = {
   config: ParsedJsonComponent;
 };
@@ -13,9 +15,9 @@ export const Renderer: FC<Props> = ({ config }) => {
   const Component = comp;
 
   if (items && Array.isArray(items) && items.length > 0) {
-    if (type === 'category') {
+    if (Containers.has(type)) {
       return (
-        <Component key={id} {...rest}>
+        <Component key={id} items={items} {...rest}>
           {items.map((item) => (
             <Renderer key={item.id} config={{ ...item }} />
           ))}

package/lib/components/config.tsx

@@ -0,0 +1,44 @@
+import type { ElementType, FC } from 'react';
+
+import { Accordion } from './containers/accordion';
+import { Category } from './containers/category';
+import { Checkbox } from './fields/checkbox';
+import { DatePicker } from './fields/date-picker';
+import { File } from './fields/file';
+import { Input as InputField } from './fields/input';
+import { RadioGroup } from './fields/radiogroup';
+import { Submit } from './fields/submit';
+import { Textarea } from './fields/textarea';
+import { Toggle } from './fields/toggle';
+
+export const Inputs = new Map<string, ElementType>()
+  .set('simple', InputField)
+  .set('textarea', Textarea)
+  .set('toggle', Toggle)
+  .set('file', File)
+  .set('submit', Submit)
+  .set('checkbox', Checkbox)
+  .set('radiogroup', RadioGroup)
+  .set('datepicker', DatePicker);
+
+type InputProps = {
+  subtype?: string;
+  label?: string;
+  bind?: string;
+};
+const Input: FC<InputProps> = ({ subtype = 'simple', ...rest }) => {
+  const Comp = Inputs.get(subtype);
+
+  if (!Comp) return <></>;
+
+  return <Comp {...rest} />;
+};
+
+export const Containers = new Map<string, ElementType>()
+  .set('category', Category)
+  .set('accordion', Accordion);
+
+export const components = new Map<string, ElementType>(Containers).set(
+  'input',
+  Input,
+);