@twintag/twintag-form 1.6.0 → 1.6.2-beta.0

package/lib/components/fields/tri-toggle.tsx

@@ -20,10 +20,10 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 const sliderVariants = tv({
   slots: {
     root: 'relative flex w-11 touch-none select-none items-center',
-    track: 'relative h-5 w-full grow overflow-hidden rounded-full bg-muted',
-    range: 'absolute h-full bg-accent',
+    track: 'relative h-5 w-full grow overflow-hidden rounded-full bg-tf-muted',
+    range: 'absolute h-full bg-tf-accent',
     thumb:
-      'relative block h-4 w-4 rounded-full border-2 border-transparent bg-background shadow-lg focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50',
+      'relative block h-4 w-4 rounded-full border-2 border-transparent bg-tf-background shadow-lg focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50',
   },
   variants: {
     state: {
@@ -33,7 +33,7 @@ const sliderVariants = tv({
       },
       // null
       1: {
-        thumb: 'h-5 w-5 border-accent',
+        thumb: 'h-5 w-5 border-tf-accent',
       },
       // true
       2: {

package/lib/components/provider.tsx

@@ -16,6 +16,7 @@ export const twintagFormContext = createContext<TwintagFormContext>({
   components: new Map(),
   config: [],
   resetValues: {},
+  acceptFileType: undefined,
 });
 
 export const useTwintagForm = () => {
@@ -126,13 +127,10 @@ export const TwintagFormProvider = ({
   inputs,
   components,
   config,
+  acceptFileType,
   children,
-}: {
+}: Omit<TwintagFormContext, 'config' | 'resetValues'> & {
   config: RawJsonComponent | RawJsonComponent[];
-  variant: TwintagFormContext['variant'];
-  size: TwintagFormContext['size'];
-  inputs: Inputs;
-  components: Components;
 } & WithChildren) => {
   const __config = useMemo(() => {
     if (Array.isArray(config)) {
@@ -155,6 +153,7 @@ export const TwintagFormProvider = ({
         inputs,
         components,
         resetValues,
+        acceptFileType,
       }}
     >
       {children}

package/lib/index.tsx

@@ -11,10 +11,13 @@ import { JsonRenderer } from '@twintag/twintag-form/components/renderer';
 type Props = {
   config: RawJsonComponent[];
   options?: Partial<{
-    defaultValues?: ComponentProps<typeof TwintagForm>['defaultValues'];
-    variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
-    size?: ComponentProps<typeof TwintagFormProvider>['size'];
+    defaultValues: ComponentProps<typeof TwintagForm>['defaultValues'];
+    variant: ComponentProps<typeof TwintagFormProvider>['variant'];
+    size: ComponentProps<typeof TwintagFormProvider>['size'];
     resetOnSubmit?: boolean;
+    acceptFileType?: ComponentProps<
+      typeof TwintagFormProvider
+    >['acceptFileType'];
   }>;
 };
 
@@ -27,6 +30,7 @@ export const Form = forwardRef<HTMLFormElement, Props>(
         variant={options?.variant}
         size={options?.size}
         config={config}
+        acceptFileType={options?.acceptFileType}
       >
         <TwintagForm
           ref={ref}

package/lib/types/index.ts

@@ -5,6 +5,24 @@ export type InputCompConfig = {
   component: ElementType;
 };
 
+type BaseInputOptions = Partial<{
+  description: string;
+  error: string;
+  optionalField: boolean;
+}>;
+
+type TextInputOptions = BaseInputOptions & {
+  placeholder?: string;
+};
+
+type DatePickerInputOptions = BaseInputOptions & {
+  placeholder?: string;
+};
+
+type FileInputOptions = BaseInputOptions & {
+  accept?: string;
+};
+
 type CompType = 'input' | 'item' | 'accordion' | 'category';
 type StringLiteral<T> = T extends string
   ? string extends T
@@ -21,12 +39,13 @@ type RawProps<
       bind: string;
       label?: string;
       subtype?: string;
-      options?: Partial<{
-        description: string;
-        placeholder: string;
-        error: string;
-        optionalField: boolean;
-      }>;
+      options?: TSubtype extends 'text' | 'textarea'
+        ? TextInputOptions
+        : TSubtype extends 'datepicker'
+          ? DatePickerInputOptions
+          : TSubtype extends 'file'
+            ? FileInputOptions
+            : BaseInputOptions;
     }
   : TType extends 'accordion'
     ? TSubtype extends 'item'
@@ -79,4 +98,5 @@ export type TwintagFormContext = {
   components: Map<string, ElementType>;
   config: ParsedJsonComponent[] | ParsedJsonComponent;
   resetValues: Record<string, unknown>;
+  acceptFileType?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.6.0",
+  "version": "1.6.2-beta.0",
   "author": "Twintag",
   "type": "module",
   "exports": {

package/tailwind.config.ts

@@ -7,36 +7,31 @@ const config = {
   theme: {
     extend: {
       colors: {
-        category: 'hsl(var(--tf-category) / <alpha-value>)',
-        label: 'hsl(var(--tf-label) / <alpha-value>)',
+        'tf-category': 'hsl(var(--tf-category) / <alpha-value>)',
+        'tf-label': 'hsl(var(--tf-label) / <alpha-value>)',
 
-        background: 'hsl(var(--tf-background) / <alpha-value>)',
-        foreground: 'hsl(var(--tf-foreground) / <alpha-value>)',
+        'tf-background': 'hsl(var(--tf-background) / <alpha-value>)',
+        'tf-foreground': 'hsl(var(--tf-foreground) / <alpha-value>)',
 
-        primary: {
-          DEFAULT: 'hsl(var(--tf-primary) / <alpha-value>)',
-          foreground: 'hsl(var(--tf-primary-foreground) / <alpha-value>)',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--tf-accent) / <alpha-value>)',
-          foreground: 'hsl(var(--tf-accent-foreground) / <alpha-value>)',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--tf-destructive) / <alpha-value>)',
-          foreground: 'hsl(var(--tf-destructive-foreground) / <alpha-value>)',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--tf-muted) / <alpha-value>)',
-          foreground: 'hsl(var(--tf-muted-foreground) / <alpha-value>)',
-        },
-
-        input: 'hsl(var(--tf-input) / <alpha-value>)',
-        ring: 'hsl(var(--tf-ring) / <alpha-value>)',
+        'tf-primary': 'hsl(var(--tf-primary) / <alpha-value>)',
+        'tf-primary-foreground':
+          'hsl(var(--tf-primary-foreground) / <alpha-value>)',
+        'tf-accent': 'hsl(var(--tf-accent) / <alpha-value>)',
+        'tf-accent-foreground':
+          'hsl(var(--tf-accent-foreground) / <alpha-value>)',
+        'tf-destructive': 'hsl(var(--tf-destructive) / <alpha-value>)',
+        'tf-destructive-foreground':
+          'hsl(var(--tf-destructive-foreground) / <alpha-value>)',
+        'tf-muted': 'hsl(var(--tf-muted) / <alpha-value>)',
+        'tf-muted-foreground':
+          'hsl(var(--tf-muted-foreground) / <alpha-value>)',
+        'tf-input': 'hsl(var(--tf-input) / <alpha-value>)',
+        'tf-ring': 'hsl(var(--tf-ring) / <alpha-value>)',
       },
       borderRadius: {
-        lg: 'var(--tf-radius)',
-        md: 'calc(var(--tf-radius) - 2px)',
-        sm: 'calc(var(--tf-radius) - 4px)',
+        'tf-lg': 'var(--tf-radius)',
+        'tf-md': 'calc(var(--tf-radius) - 2px)',
+        'tf-sm': 'calc(var(--tf-radius) - 4px)',
       },
       fontFamily: {
         'tf-font': ['var(--tf-font)', ...fontFamily.sans],

package/.turbo/turbo-build.log

@@ -1,22 +0,0 @@
-
-> @twintag/twintag-form@1.6.0 build /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form
-> tsc && vite build
-
-vite v5.4.8 building for production...
-transforming...
-✓ 49 modules transformed.
-rendering chunks...
-
-[vite:dts] Start generate declaration files...
-computing gzip size...
-dist/webcomponent.js   27.75 kB │ gzip:  5.50 kB
-dist/index.js         135.56 kB │ gzip: 28.67 kB
-[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/twind.config.d.ts
-[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/tailwind.config.d.ts
-[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/dev/main.d.ts
-[vite:dts] Outside emitted: /home/runner/work/twintag-admin/twintag-admin/packages/twintag-form/vite.config.d.ts
-[vite:dts] Declaration files built in 9748ms.
-
-dist/webcomponent.cjs  18.64 kB │ gzip:  5.00 kB
-dist/index.cjs         94.64 kB │ gzip: 24.22 kB
-✓ built in 10.72s

package/dist/common/accordion.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/common/button.d.ts

@@ -1,71 +0,0 @@
-import { VariantProps, TVReturnType } from 'tailwind-variants';
-
-import * as React from 'react';
-declare const buttonVariants: TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], {
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-};
-declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps< TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], {
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>> & {
-    asChild?: boolean;
-} & React.RefAttributes<HTMLButtonElement>>;
-export { Button, buttonVariants };

package/dist/common/calendar.d.ts

@@ -1,139 +0,0 @@
-import { VariantProps, TVReturnType } from 'tailwind-variants';
-import { DayPicker } from 'react-day-picker';
-import type * as React from 'react';
-declare const calendarVariants: TVReturnType<{
-    variant: {
-        dropdown: {
-            caption_label: string;
-            caption_dropdowns: string[];
-        };
-    };
-    size: {
-        sm: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-        base: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-    };
-}, {
-    picker: string;
-    months: string;
-    month: string;
-    caption: string;
-    caption_dropdowns: string;
-    caption_label: string;
-    nav: string;
-    nav_button: string;
-    nav_button_previous: string;
-    nav_button_next: string;
-    table: string;
-    head_row: string;
-    head_cell: string;
-    row: string;
-    cell: string;
-    day: string;
-    day_range_end: string;
-    day_selected: string;
-    day_today: string;
-    day_outside: string;
-    day_disabled: string;
-    day_range_middle: string;
-    day_hidden: string;
-}, undefined, {
-    variant: {
-        dropdown: {
-            caption_label: string;
-            caption_dropdowns: string[];
-        };
-    };
-    size: {
-        sm: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-        base: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-    };
-}, {
-    picker: string;
-    months: string;
-    month: string;
-    caption: string;
-    caption_dropdowns: string;
-    caption_label: string;
-    nav: string;
-    nav_button: string;
-    nav_button_previous: string;
-    nav_button_next: string;
-    table: string;
-    head_row: string;
-    head_cell: string;
-    row: string;
-    cell: string;
-    day: string;
-    day_range_end: string;
-    day_selected: string;
-    day_today: string;
-    day_outside: string;
-    day_disabled: string;
-    day_range_middle: string;
-    day_hidden: string;
-}, TVReturnType<{
-    variant: {
-        dropdown: {
-            caption_label: string;
-            caption_dropdowns: string[];
-        };
-    };
-    size: {
-        sm: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-        base: {
-            caption_label: string;
-            caption_dropdowns: string;
-            cell: string;
-        };
-    };
-}, {
-    picker: string;
-    months: string;
-    month: string;
-    caption: string;
-    caption_dropdowns: string;
-    caption_label: string;
-    nav: string;
-    nav_button: string;
-    nav_button_previous: string;
-    nav_button_next: string;
-    table: string;
-    head_row: string;
-    head_cell: string;
-    row: string;
-    cell: string;
-    day: string;
-    day_range_end: string;
-    day_selected: string;
-    day_today: string;
-    day_outside: string;
-    day_disabled: string;
-    day_range_middle: string;
-    day_hidden: string;
-}, undefined, unknown, unknown, undefined>>;
-export type CalendarProps = React.ComponentProps<typeof DayPicker> & VariantProps<typeof calendarVariants>;
-declare function Calendar({ size, className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Calendar {
-    var displayName: string;
-}
-export { Calendar };

package/dist/common/checkbox.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { Checkbox };

package/dist/common/form.d.ts

@@ -1,86 +0,0 @@
-import { ControllerProps, FieldPath, FieldValues, FormProviderProps, FieldError } from 'react-hook-form';
-import { VariantProps, TVReturnType } from 'tailwind-variants';
-import { LabelProps } from '@radix-ui/react-label';
-import { SlotProps } from '@radix-ui/react-slot';
-
-import * as React from 'react';
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
-declare const useFormField: () => {
-    invalid: boolean;
-    isDirty: boolean;
-    isTouched: boolean;
-    isValidating: boolean;
-    error?: FieldError;
-    id: string;
-    name: string;
-    formItemId: string;
-    formDescriptionId: string;
-    formMessageId: string;
-};
-declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps< TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-}, undefined, "", {
-    variant: {
-        default: string;
-        outline: string;
-    };
-}, undefined, TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-}, undefined, "", unknown, unknown, undefined>>> & React.RefAttributes<HTMLDivElement>>;
-declare const FormLabel: React.ForwardRefExoticComponent<Omit<Omit< LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps< TVReturnType<{
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], {
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, TVReturnType<{
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>> & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
-declare const FormControl: React.ForwardRefExoticComponent<Omit< SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & VariantProps< TVReturnType<{
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, "text-muted-foreground", {
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, TVReturnType<{
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, "text-muted-foreground", unknown, unknown, undefined>>> & React.RefAttributes<HTMLParagraphElement>>;
-declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & VariantProps< TVReturnType<{
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, "font-medium text-destructive", {
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, TVReturnType<{
-    size: {
-        sm: string;
-        base: string;
-    };
-}, undefined, "font-medium text-destructive", unknown, unknown, undefined>>> & React.RefAttributes<HTMLParagraphElement>>;
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/dist/common/icon.d.ts

@@ -1,8 +0,0 @@
-import { FC } from 'react';
-
-type Props = {
-    name: string;
-    className?: string;
-};
-export declare const Icon: FC<Props>;
-export {};

package/dist/common/input.d.ts

@@ -1,133 +0,0 @@
-import { VariantProps, TVReturnType } from 'tailwind-variants';
-
-import * as React from 'react';
-declare const inputVariants: TVReturnType<{
-    variant: {
-        default: {
-            input: string;
-        };
-        outline: {
-            root: string;
-            input: string;
-        };
-    };
-    size: {
-        sm: {
-            input: string;
-        };
-        base: {
-            input: string;
-        };
-    };
-}, {
-    root: string;
-    input: string[];
-}, undefined, {
-    variant: {
-        default: {
-            input: string;
-        };
-        outline: {
-            root: string;
-            input: string;
-        };
-    };
-    size: {
-        sm: {
-            input: string;
-        };
-        base: {
-            input: string;
-        };
-    };
-}, {
-    root: string;
-    input: string[];
-}, TVReturnType<{
-    variant: {
-        default: {
-            input: string;
-        };
-        outline: {
-            root: string;
-            input: string;
-        };
-    };
-    size: {
-        sm: {
-            input: string;
-        };
-        base: {
-            input: string;
-        };
-    };
-}, {
-    root: string;
-    input: string[];
-}, undefined, unknown, unknown, undefined>>;
-export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>;
-declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps< TVReturnType<{
-    variant: {
-        default: {
-            input: string;
-        };
-        outline: {
-            root: string;
-            input: string;
-        };
-    };
-    size: {
-        sm: {
-            input: string;
-        };
-        base: {
-            input: string;
-        };
-    };
-}, {
-    root: string;
-    input: string[];
-}, undefined, {
-    variant: {
-        default: {
-            input: string;
-        };
-        outline: {
-            root: string;
-            input: string;
-        };
-    };
-    size: {
-        sm: {
-            input: string;
-        };
-        base: {
-            input: string;
-        };
-    };
-}, {
-    root: string;
-    input: string[];
-}, TVReturnType<{
-    variant: {
-        default: {
-            input: string;
-        };
-        outline: {
-            root: string;
-            input: string;
-        };
-    };
-    size: {
-        sm: {
-            input: string;
-        };
-        base: {
-            input: string;
-        };
-    };
-}, {
-    root: string;
-    input: string[];
-}, undefined, unknown, unknown, undefined>>> & React.RefAttributes<HTMLInputElement>>;
-export { Input };