@twintag/twintag-form 1.4.0 → 1.4.1

package/lib/components/config.tsx

@@ -1,4 +1,4 @@
-import type { ElementType, FC } from 'react';
+import type { ElementType } from 'react';
 import type { InputCompConfig } from '../types';
 
 import { Accordion } from './containers/accordion';
@@ -12,6 +12,12 @@ import { Submit } from './fields/submit';
 import { DEFAULT_TEXTAREA_VALUE, Textarea } from './fields/textarea';
 import { DEFAULT_TOGGLE_VALUE, Toggle } from './fields/toggle';
 import { DEFAULT_TRI_TOGGLE_VALUE, TriToggle } from './fields/tri-toggle';
+import { Input } from './input';
+import { Label } from './label';
+
+export const Containers = new Map<string, ElementType>()
+  .set('category', Category)
+  .set('accordion', Accordion);
 
 export const Inputs = new Map<string, InputCompConfig>()
   .set('simple', {
@@ -50,24 +56,6 @@ export const Inputs = new Map<string, InputCompConfig>()
     component: TriToggle,
   });
 
-type InputProps = {
-  subtype?: string;
-  label?: string;
-  bind?: string;
-};
-const Input: FC<InputProps> = ({ subtype = 'simple', ...rest }) => {
-  const Comp = Inputs.get(subtype)?.component;
-
-  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,
-);
+export const components = new Map<string, ElementType>(Containers)
+  .set('input', Input)
+  .set('label', Label);

package/lib/components/form.tsx

@@ -91,7 +91,7 @@ export const TwintagForm = forwardRef<HTMLFormElement, Props>(
       <Form {...form}>
         <form
           ref={ref}
-          className='relative space-y-4 font-tf-font'
+          className='relative flex w-full flex-col gap-4 font-tf-font'
           onSubmit={form.handleSubmit(onValid, onInvalid)}
         >
           {children}

package/lib/components/input.tsx

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import type { Props } from '../types';
+
+import { Inputs } from './config';
+
+export const Input: FC<Props<'input'>> = ({ subtype, ...rest }) => {
+  const Comp = Inputs.get(subtype!)?.component;
+
+  if (!Comp) return <></>;
+
+  return <Comp {...rest} />;
+};

package/lib/components/label.tsx

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { Props } from '../types';
+
+import { Label as LabelComp } from '../common/label';
+
+export const Label: FC<Props> = ({ label }) => {
+  return <LabelComp>{label}</LabelComp>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "author": "Twintag",
   "type": "module",
   "exports": {