@twintag/twintag-form 1.2.1 → 1.4.0-beta.0

package/lib/components/fields/file.tsx

@@ -13,9 +13,11 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Input } from '@twintag/twintag-form/common/input';
+import { useTwintagForm } from '@twintag/twintag-form/provider';
 
 export const File: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
@@ -28,9 +30,9 @@ export const File: FC<Props> = ({ label, bind, options }) => {
         required: isOptional ? false : options?.error ?? true,
       }}
       render={({ field, formState }) => (
-        <FormItem>
-          <div className='space-y-0.5'>
-            <FormLabel htmlFor={bind}>
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel htmlFor={bind} size={size}>
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
@@ -41,7 +43,9 @@ export const File: FC<Props> = ({ label, bind, options }) => {
               )}
             </FormLabel>
             {options?.description ? (
-              <FormDescription>{options.description}</FormDescription>
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
             ) : (
               <></>
             )}
@@ -58,6 +62,8 @@ export const File: FC<Props> = ({ label, bind, options }) => {
               id={bind}
               type='file'
               name={field.name}
+              size={size}
+              variant={variant}
               capture='environment'
               multiple
               onBlur={field.onBlur}
@@ -68,7 +74,7 @@ export const File: FC<Props> = ({ label, bind, options }) => {
               }}
             />
           </FormControl>
-          <FormMessage className='pt-1.5' />
+          <FormMessage size={size} className='pt-1.5' />
         </FormItem>
       )}
     />

package/lib/components/fields/input.tsx

@@ -13,10 +13,13 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Input as InputPrimitive } from '@twintag/twintag-form/common/input';
+import { useTwintagForm } from '@twintag/twintag-form/provider';
 
 export const Input: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
 
+  const { variant, size } = useTwintagForm();
+
   const isOptional = options?.optionalField;
 
   return (
@@ -28,9 +31,9 @@ export const Input: FC<Props> = ({ label, bind, options }) => {
         required: isOptional ? false : options?.error ?? true,
       }}
       render={({ field }) => (
-        <FormItem>
-          <div className='space-y-0.5'>
-            <FormLabel>
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel size={size}>
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
@@ -41,7 +44,9 @@ export const Input: FC<Props> = ({ label, bind, options }) => {
               )}
             </FormLabel>
             {options?.description ? (
-              <FormDescription>{options.description}</FormDescription>
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
             ) : (
               <></>
             )}
@@ -49,11 +54,13 @@ export const Input: FC<Props> = ({ label, bind, options }) => {
           <FormControl>
             <InputPrimitive
               type='text'
+              size={size}
+              variant={variant}
               placeholder={options?.placeholder ?? 'Write here...'}
               {...field}
             />
           </FormControl>
-          <FormMessage className='pt-1' />
+          <FormMessage size={size} className='pt-1' />
         </FormItem>
       )}
     />

package/lib/components/fields/radiogroup.tsx

@@ -16,9 +16,11 @@ import {
   RadioGroup as CommonRadioGroup,
   RadioGroupItem,
 } from '@twintag/twintag-form/common/radiogroup';
+import { useTwintagForm } from '@twintag/twintag-form/provider';
 
 export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
   const { control } = useFormContext();
+  const { size } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
@@ -32,8 +34,8 @@ export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
       }}
       render={({ field }) => (
         <FormItem className='space-y-3'>
-          <div className='space-y-0.5'>
-            <FormLabel>
+          <div className='space-y-1'>
+            <FormLabel size={size}>
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
@@ -44,7 +46,9 @@ export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
               )}
             </FormLabel>
             {options?.description ? (
-              <FormDescription>{options.description}</FormDescription>
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
             ) : (
               <></>
             )}
@@ -60,12 +64,12 @@ export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
                   return (
                     <FormItem
                       key={item.id}
-                      className='flex items-center space-x-3 space-y-0'
+                      className='flex items-center space-x-2 space-y-0'
                     >
                       <FormControl>
                         <RadioGroupItem value={item.bind} />
                       </FormControl>
-                      <FormLabel className='font-normal'>
+                      <FormLabel size={size} className='font-normal'>
                         {item.label}
                       </FormLabel>
                     </FormItem>
@@ -76,7 +80,7 @@ export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
               })}
             </CommonRadioGroup>
           </FormControl>
-          <FormMessage />
+          <FormMessage size={size} />
         </FormItem>
       )}
     />

package/lib/components/fields/submit.tsx

@@ -2,11 +2,14 @@ import type { FC } from 'react';
 import type { Props } from '@twintag/twintag-form/types';
 
 import { Button } from '@twintag/twintag-form/common/button';
+import { useTwintagForm } from '@twintag/twintag-form/provider';
 
 export const Submit: FC<Props> = ({ label }) => {
+  const { size } = useTwintagForm();
+
   return (
-    <div className='flex w-full justify-center'>
-      <Button>{label}</Button>
+    <div className='flex w-full justify-center pt-2'>
+      <Button size={size}>{label}</Button>
     </div>
   );
 };

package/lib/components/fields/textarea.tsx

@@ -13,9 +13,11 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Textarea as CommonTextarea } from '@twintag/twintag-form/common/textarea';
+import { useTwintagForm } from '@twintag/twintag-form/provider';
 
 export const Textarea: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
@@ -28,9 +30,9 @@ export const Textarea: FC<Props> = ({ label, bind, options }) => {
         required: isOptional ? false : options?.error ?? true,
       }}
       render={({ field }) => (
-        <FormItem>
-          <div className='space-y-0.5'>
-            <FormLabel>
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel size={size}>
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
@@ -41,7 +43,9 @@ export const Textarea: FC<Props> = ({ label, bind, options }) => {
               )}
             </FormLabel>
             {options?.description ? (
-              <FormDescription>{options.description}</FormDescription>
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
             ) : (
               <></>
             )}
@@ -49,10 +53,12 @@ export const Textarea: FC<Props> = ({ label, bind, options }) => {
           <FormControl>
             <CommonTextarea
               {...field}
+              size={size}
+              variant={variant}
               placeholder={options?.placeholder ?? 'Write here...'}
             />
           </FormControl>
-          <FormMessage className='pt-1' />
+          <FormMessage size={size} className='pt-1' />
         </FormItem>
       )}
     />

package/lib/components/fields/toggle.tsx

@@ -13,9 +13,11 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Switch } from '@twintag/twintag-form/common/switch';
+import { useTwintagForm } from '@twintag/twintag-form/provider';
 
 export const Toggle: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
 
   const isOptional = options?.optionalField;
 
@@ -28,10 +30,10 @@ export const Toggle: FC<Props> = ({ label, bind, options }) => {
         required: isOptional ? false : options?.error ?? true,
       }}
       render={({ field }) => (
-        <FormItem>
+        <FormItem variant={variant}>
           <div className='flex flex-row items-center justify-between'>
-            <div className='space-y-0.5'>
-              <FormLabel htmlFor={bind}>
+            <div className='space-y-1'>
+              <FormLabel htmlFor={bind} size={size}>
                 {label}
                 {!isOptional ? (
                   <span className='ml-0.5 inline-block'>
@@ -42,7 +44,9 @@ export const Toggle: FC<Props> = ({ label, bind, options }) => {
                 )}
               </FormLabel>
               {options?.description ? (
-                <FormDescription>{options.description}</FormDescription>
+                <FormDescription size={size}>
+                  {options.description}
+                </FormDescription>
               ) : (
                 <></>
               )}
@@ -57,7 +61,7 @@ export const Toggle: FC<Props> = ({ label, bind, options }) => {
               />
             </FormControl>
           </div>
-          <FormMessage />
+          <FormMessage size={size} />
         </FormItem>
       )}
     />

package/lib/index.tsx

@@ -13,15 +13,21 @@ type Props = {
   options?: Partial<{
     defaultValues?: ComponentProps<typeof TwintagForm>['defaultValues'];
     variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
+    size?: ComponentProps<typeof TwintagFormProvider>['size'];
     resetOnSubmit?: boolean;
   }>;
 };
 
 export const Form = forwardRef<HTMLFormElement, Props>(
-  ({ config, options }) => {
+  ({ config, options }, ref) => {
     return (
-      <TwintagFormProvider variant={options?.variant} components={components}>
+      <TwintagFormProvider
+        components={components}
+        variant={options?.variant}
+        size={options?.size}
+      >
         <TwintagForm
+          ref={ref}
           defaultValues={options?.defaultValues}
           resetOnSubmit={options?.resetOnSubmit}
         >

package/lib/provider.tsx

@@ -5,6 +5,7 @@ import { createContext, useContext } from 'react';
 
 export const twintagFormContext = createContext<TwintagFormContext>({
   variant: 'default',
+  size: 'base',
   components: new Map(),
 });
 
@@ -21,12 +22,14 @@ export const useTwintagForm = () => {
 export const TwintagFormProvider = ({
   children,
   variant,
+  size,
   components,
 }: TwintagFormContext & WithChildren) => {
   return (
     <twintagFormContext.Provider
       value={{
         variant,
+        size,
         components,
       }}
     >

package/lib/types/index.ts

@@ -2,6 +2,7 @@ import type { ElementType } from 'react';
 
 export type TwintagFormContext = {
   variant?: 'default' | 'beta';
+  size?: 'base' | 'sm';
   components: Map<string, ElementType>;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.2.1",
+  "version": "1.4.0-beta.0",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -51,9 +51,9 @@
     "tailwindcss": "^3.3.6",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.0.3",
-    "eslint-config-custom": "1.0.0",
+    "twintag-types": "0.2.0",
     "tsconfig": "0.0.0",
-    "twintag-types": "0.2.0"
+    "eslint-config-custom": "1.0.0"
   },
   "publishConfig": {
     "access": "public"