@twintag/twintag-form 0.6.0 → 1.0.0-beta.1

package/dist/styles.d.ts

@@ -1,487 +0,0 @@
-import { TVConfig } from 'tailwind-variants/dist/config.js';
-import { TVReturnType, ClassValue } from 'tailwind-variants';
-export declare const labelStyle: TVReturnType<{
-    [key: string]: {
-        [key: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    } | undefined;
-} | {}, undefined, "text-label", TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    };
-} | {}, undefined, TVReturnType<unknown, undefined, "text-label", TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    };
-} | {}>, unknown, unknown, undefined>>;
-export declare const containerStyle: TVReturnType<{
-    [key: string]: {
-        [key: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    } | undefined;
-} | {}, undefined, "my-2", TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    };
-} | {}, undefined, TVReturnType<unknown, undefined, "my-2", TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: ClassValue | {
-            base?: ClassValue;
-        };
-    };
-} | {}>, unknown, unknown, undefined>>;
-export declare const categoryStyle: TVReturnType<{
-    variant: {};
-}, {
-    container: string;
-    span: string;
-    items: string;
-}, undefined, TVConfig<{
-    variant: {};
-}, {
-    variant: {};
-}>, {
-    variant: {};
-}, {
-    container: string;
-    span: string;
-    items: string;
-}, TVReturnType<{
-    variant: {};
-}, {
-    container: string;
-    span: string;
-    items: string;
-}, undefined, TVConfig<{
-    variant: {};
-}, {
-    variant: {};
-}>, unknown, unknown, undefined>>;
-export declare const checkboxStyle: TVReturnType<{
-    variant: {
-        alpha: {
-            checkbox: string;
-        };
-        beta: {
-            checkbox: string;
-        };
-    };
-}, {
-    container: string;
-    checkbox: string;
-}, undefined, TVConfig<{
-    variant: {
-        alpha: {
-            checkbox: string;
-        };
-        beta: {
-            checkbox: string;
-        };
-    };
-}, {
-    variant: {
-        alpha: {
-            checkbox: string;
-        };
-        beta: {
-            checkbox: string;
-        };
-    };
-}>, {
-    variant: {
-        alpha: {
-            checkbox: string;
-        };
-        beta: {
-            checkbox: string;
-        };
-    };
-}, {
-    container: string;
-    checkbox: string;
-}, TVReturnType<{
-    variant: {
-        alpha: {
-            checkbox: string;
-        };
-        beta: {
-            checkbox: string;
-        };
-    };
-}, {
-    container: string;
-    checkbox: string;
-}, undefined, TVConfig<{
-    variant: {
-        alpha: {
-            checkbox: string;
-        };
-        beta: {
-            checkbox: string;
-        };
-    };
-}, {
-    variant: {
-        alpha: {
-            checkbox: string;
-        };
-        beta: {
-            checkbox: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-export declare const fileStyle: TVReturnType<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    container: string;
-    span: string;
-    input: string;
-}, undefined, TVConfig<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}>, {
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    container: string;
-    span: string;
-    input: string;
-}, TVReturnType<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    container: string;
-    span: string;
-    input: string;
-}, undefined, TVConfig<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-export declare const simpleStyle: TVReturnType<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    container: string;
-    span: string;
-    input: string;
-}, undefined, TVConfig<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}>, {
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    container: string;
-    span: string;
-    input: string;
-}, TVReturnType<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    container: string;
-    span: string;
-    input: string;
-}, undefined, TVConfig<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}, {
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-export declare const toggleStyle: TVReturnType<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-    };
-}, {
-    container: string;
-    span: string;
-    input: string;
-    thumb: string;
-}, undefined, TVConfig<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-    };
-}, {
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-    };
-}>, {
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-    };
-}, {
-    container: string;
-    span: string;
-    input: string;
-    thumb: string;
-}, TVReturnType<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-    };
-}, {
-    container: string;
-    span: string;
-    input: string;
-    thumb: string;
-}, undefined, TVConfig<{
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-    };
-}, {
-    variant: {
-        alpha: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-        beta: {
-            container: string;
-            input: string;
-            thumb: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-export declare const submitStyle: TVReturnType<{
-    variant: {
-        alpha: string;
-        beta: string;
-    };
-}, undefined, "mt-2 w-max max-w-full", TVConfig<{
-    variant: {
-        alpha: string;
-        beta: string;
-    };
-}, {
-    variant: {
-        alpha: string;
-        beta: string;
-    };
-}>, {
-    variant: {
-        alpha: string;
-        beta: string;
-    };
-}, undefined, TVReturnType<{
-    variant: {
-        alpha: string;
-        beta: string;
-    };
-}, undefined, "mt-2 w-max max-w-full", TVConfig<{
-    variant: {
-        alpha: string;
-        beta: string;
-    };
-}, {
-    variant: {
-        alpha: string;
-        beta: string;
-    };
-}>, unknown, unknown, undefined>>;

package/lib/__stories__/Form.stories.tsx

@@ -1,141 +0,0 @@
-import { TwintagForm } from '@twintag/twintag-form/index';
-
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj, Decorator } from '@storybook/react';
-
-import { withActions } from '@storybook/addon-actions/decorator';
-
-const meta: Meta<typeof TwintagForm> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Form',
-  component: TwintagForm,
-  parameters: {
-    actions: {
-      handles: ['twintag-form-valid', 'twintag-form-invalid'],
-    },
-  },
-  decorators: [withActions as unknown as Decorator],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TwintagForm>;
-
-export const Example: Story = {
-  args: {
-    config: [
-      {
-        id: 'category-123',
-        type: 'category',
-        props: {
-          label: 'Category 1st',
-        },
-        content: [],
-        children: [
-          {
-            id: 'input-123',
-            type: 'input',
-            props: {
-              subtype: 'toggle',
-              label: 'Require',
-              bind: 'require',
-            },
-            content: [],
-            children: [],
-          },
-        ],
-      },
-      {
-        id: 'category-456',
-        type: 'category',
-        props: {
-          label: 'Category 2nd',
-        },
-        content: [],
-        children: [
-          {
-            id: 'input-123',
-            type: 'input',
-            props: {
-              subtype: 'simple',
-              label: 'Name',
-              bind: 'name',
-            },
-            content: [],
-            children: [],
-          },
-          {
-            id: 'input-456',
-            type: 'input',
-            props: {
-              subtype: 'simple',
-              label: 'Email',
-              bind: 'email',
-            },
-            content: [],
-            children: [],
-          },
-        ],
-      },
-      {
-        id: 'category-789',
-        type: 'category',
-        props: {
-          label: 'Category 3rd',
-        },
-        content: [],
-        children: [
-          {
-            id: 'input-789',
-            type: 'input',
-            props: {
-              subtype: 'file',
-              label: 'File',
-              bind: 'file',
-            },
-            content: [],
-            children: [],
-          },
-        ],
-      },
-      {
-        id: 'category-321',
-        type: 'category',
-        props: {
-          label: 'Category 4th',
-        },
-        content: [],
-        children: [
-          {
-            id: 'input-123',
-            type: 'input',
-            props: {
-              subtype: 'checkbox',
-              label: 'Checkbox',
-              bind: 'checkbox',
-            },
-            content: [],
-            children: [],
-          },
-        ],
-      },
-      {
-        id: 'input-654',
-        type: 'input',
-        props: {
-          subtype: 'submit',
-          label: 'Submit',
-        },
-        content: [],
-        children: [],
-      },
-    ],
-    options: {
-      variant: 'beta',
-      resetOnSubmit: true,
-    },
-  },
-};

package/lib/components/Category/__styles.ts

@@ -1,12 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const categoryStyle = tv({
-  slots: {
-    container: 'w-full space-y-4',
-    span: 'text-category-label',
-    items: 'space-y-2',
-  },
-  variants: {
-    variant: {},
-  },
-});

package/lib/components/Category/index.tsx

@@ -1,26 +0,0 @@
-import type { FC } from 'react';
-import type { VariantProps } from 'tailwind-variants';
-import type { WithChildren } from 'twintag-types/dom';
-
-import type { CommonProps } from '../Input/__props';
-
-import { categoryStyle } from './__styles';
-
-type Props = CommonProps<VariantProps<typeof categoryStyle>['variant']> &
-  WithChildren;
-
-const Category: FC<Props> = ({ label, options, children }) => {
-  const { container, span, items } = categoryStyle({
-    variant: options?.variant,
-  });
-
-  return (
-    <section className={container()}>
-      {label ? <span className={span()}>{label}</span> : <></>}
-
-      <div className={items()}>{children}</div>
-    </section>
-  );
-};
-
-export default Category;