@twintag/twintag-form 1.5.0 → 1.6.1

package/lib/common/button.tsx

@@ -6,20 +6,20 @@ import { tv } from 'tailwind-variants';
 
 const buttonVariants = tv({
   base: [
-    'inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors',
-    'ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'inline-flex items-center justify-center whitespace-nowrap rounded-tf-md font-medium transition-colors',
+    'ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-tf-ring focus-visible:ring-offset-2',
     'disabled:pointer-events-none disabled:opacity-50',
   ],
   variants: {
     variant: {
       default:
-        'bg-primary-foreground text-primary shadow hover:bg-primary-foreground/90',
+        'bg-tf-primary-foreground text-tf-primary shadow hover:bg-tf-primary-foreground/90',
       outline:
-        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-      ghost: 'hover:bg-accent hover:text-accent-foreground',
+        'border border-tf-input bg-tf-background hover:bg-tf-accent hover:text-tf-accent-foreground',
+      ghost: 'hover:bg-tf-accent hover:text-tf-accent-foreground',
     },
     size: {
-      sm: 'h-9 rounded-md px-3 text-sm',
+      sm: 'h-9 rounded-tf-md px-3 text-sm',
       base: 'h-10 px-3 py-2 text-base',
     },
   },

package/lib/common/calendar.tsx

@@ -1,6 +1,6 @@
+import type * as React from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
-import * as React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
 import { tv } from 'tailwind-variants';
@@ -24,22 +24,23 @@ const calendarVariants = tv({
     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',
+    head_cell:
+      'w-9 rounded-tf-md text-[0.8rem] font-normal text-tf-muted-foreground',
     row: 'mt-2 flex w-full',
-    cell: 'relative h-9 w-9 p-0 text-center 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',
+    cell: 'relative h-9 w-9 p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-transparent first:[&:has([aria-selected])]:rounded-l-tf-md last:[&:has([aria-selected])]:rounded-r-tf-md [&:has([aria-selected].day-outside)]:bg-tf-muted/50 [&:has([aria-selected].day-range-end)]:rounded-r-tf-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',
+      'bg-tf-accent text-tf-accent-foreground hover:bg-tf-accent hover:text-tf-accent-foreground focus:bg-tf-accent focus:text-tf-accent-foreground',
+    day_today: 'bg-tf-muted text-tf-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-outside text-tf-muted-foreground opacity-50 aria-selected:bg-tf-accent/30 aria-selected:text-tf-accent-foreground',
+    day_disabled: 'text-tf-muted-foreground opacity-50',
     day_range_middle:
-      'aria-selected:bg-accent aria-selected:text-accent-foreground',
+      'aria-selected:bg-tf-accent aria-selected:text-tf-accent-foreground',
     day_hidden: 'invisible',
   },
   variants: {
@@ -49,8 +50,8 @@ const calendarVariants = tv({
         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]:ring-offset-background [&>*>select]:focus-visible:outline-none [&>*>select]:focus-visible:ring-1 [&>*>select]:focus-visible:ring-ring',
+          '[&>*>select]:h-7 [&>*>select]:min-w-[3.6rem] [&>*>select]:rounded-tf-md [&>*>select]:border [&>*>select]:border-tf-input [&>*>select]:bg-tf-background [&>*>select]:px-1',
+          '[&>*>select]:ring-offset-tf-background [&>*>select]:focus-visible:outline-none [&>*>select]:focus-visible:ring-1 [&>*>select]:focus-visible:ring-tf-ring',
         ],
       },
     },

package/lib/common/checkbox.tsx

@@ -6,10 +6,10 @@ import { tv } from 'tailwind-variants';
 const checkboxVariants = tv({
   slots: {
     root: [
-      'peer h-4 w-4 shrink-0 rounded-sm border border-accent shadow',
-      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1',
+      'peer h-4 w-4 shrink-0 rounded-tf-sm border border-tf-accent shadow',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-tf-ring focus-visible:ring-offset-1',
       'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',
+      'data-[state=checked]:bg-tf-accent data-[state=checked]:text-tf-accent-foreground',
     ],
     indicator: 'flex items-center justify-center text-current',
     icon: 'h-4 w-4',

package/lib/common/form.tsx

@@ -99,7 +99,7 @@ const formLabelVariants = tv({
   base: '',
   variants: {
     error: {
-      true: 'text-destructive',
+      true: 'text-tf-destructive',
     },
   },
 });
@@ -148,7 +148,7 @@ const FormControl = React.forwardRef<
 FormControl.displayName = 'FormControl';
 
 const formDescriptionVariants = tv({
-  base: 'text-muted-foreground',
+  base: 'text-tf-muted-foreground',
   variants: {
     size: {
       sm: 'text-[0.8rem] leading-none',
@@ -178,7 +178,7 @@ const FormDescription = React.forwardRef<
 FormDescription.displayName = 'FormDescription';
 
 const formMessageVariants = tv({
-  base: 'font-medium text-destructive',
+  base: 'font-medium text-tf-destructive',
   variants: {
     size: {
       sm: 'text-[0.8rem]',

package/lib/common/icon.tsx

@@ -11,7 +11,7 @@ type Props = {
   className?: string;
 };
 const iconVariants = tv({
-  base: 'h-5 w-5',
+  base: 'h-5 w-5 shrink-0',
 });
 export const Icon: FC<Props> = ({ name, className, ...props }) => {
   const camel = useMemo(

package/lib/common/input.tsx

@@ -7,8 +7,8 @@ const inputVariants = tv({
   slots: {
     root: 'relative',
     input: [
-      'flex h-10 w-full border-input bg-background py-2 text-primary-foreground placeholder:text-muted-foreground focus-visible:outline-none',
-      'file:border-0 file:bg-transparent file:px-0 file:font-medium file:text-primary-foreground',
+      'flex h-10 w-full border-tf-input bg-tf-background py-2 text-tf-primary-foreground placeholder:text-tf-muted-foreground focus-visible:outline-none',
+      'file:border-0 file:bg-transparent file:px-0 file:font-medium file:text-tf-primary-foreground',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
   },
@@ -16,10 +16,10 @@ const inputVariants = tv({
     variant: {
       default: {
         input:
-          'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'rounded-tf-md border px-3 ring-offset-tf-background focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2',
       },
       outline: {
-        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',
+        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-tf-ring',
         input: 'border-b px-1',
       },
     },

package/lib/common/label.tsx

@@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants';
 
 const labelVariants = tv({
   base: [
-    'text-label',
+    'text-tf-label',
     'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
   ],
   variants: {

package/lib/common/popover.tsx

@@ -7,7 +7,7 @@ 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',
+  base: 'z-50 w-72 rounded-tf-md border bg-tf-background p-4 text-tf-foreground shadow-md outline-none',
 });
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,

package/lib/common/radiogroup.tsx

@@ -23,8 +23,8 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const radioGroupItemVariants = tv({
   slots: {
     item: [
-      'aspect-square h-4 w-4 items-center rounded-full border border-accent text-accent ring-offset-background',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'aspect-square h-4 w-4 items-center rounded-full border border-tf-accent text-tf-accent ring-offset-tf-background',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
     indicator: 'relative block h-full w-full',

package/lib/common/slider.tsx

@@ -5,10 +5,10 @@ import { tv } from 'tailwind-variants';
 const sliderVariants = tv({
   slots: {
     root: 'relative flex w-full touch-none select-none items-center',
-    track: 'relative h-2 w-full grow overflow-hidden rounded-full bg-muted',
-    range: 'absolute h-full bg-accent',
+    track: 'relative h-2 w-full grow overflow-hidden rounded-full bg-tf-muted',
+    range: 'absolute h-full bg-tf-accent',
     thumb:
-      'block h-5 w-5 rounded-full border-2 border-accent bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      'block h-5 w-5 rounded-full border-2 border-tf-accent bg-tf-background ring-offset-tf-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   },
 });
 

package/lib/common/switch.tsx

@@ -6,12 +6,12 @@ const switchVariants = tv({
   slots: {
     root: [
       'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2 focus-visible:ring-offset-tf-background',
       'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-[state=checked]:bg-accent data-[state=unchecked]:bg-muted',
+      'data-[state=checked]:bg-tf-accent data-[state=unchecked]:bg-tf-muted',
     ],
     thumb: [
-      'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform',
+      'pointer-events-none block h-4 w-4 rounded-full bg-tf-background shadow-lg ring-0 transition-transform',
       'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
     ],
   },

package/lib/common/textarea.tsx

@@ -7,7 +7,7 @@ const textareaVariants = tv({
   slots: {
     root: 'relative',
     textarea: [
-      'flex min-h-[60px] w-full border-input bg-background py-2 text-primary-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none',
+      'flex min-h-[60px] w-full border-tf-input bg-tf-background py-2 text-tf-primary-foreground shadow-sm placeholder:text-tf-muted-foreground focus-visible:outline-none',
       'disabled:cursor-not-allowed disabled:opacity-50',
     ],
   },
@@ -15,10 +15,10 @@ const textareaVariants = tv({
     variant: {
       default: {
         textarea:
-          'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'rounded-tf-md border px-3 ring-offset-tf-background focus-visible:ring-2 focus-visible:ring-tf-ring focus-visible:ring-offset-2',
       },
       outline: {
-        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',
+        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-tf-ring',
         textarea: 'border-b px-1',
       },
     },

package/lib/components/containers/accordion.tsx

@@ -1,7 +1,7 @@
+import type { FC } from 'react';
 import type { Props } from '@twintag/twintag-form/types';
 import type { WithChildren } from 'twintag-types/dom';
 
-import { type FC } from 'react';
 import { tv } from 'tailwind-variants';
 
 import {

package/lib/components/containers/category.tsx

@@ -8,7 +8,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 const categoryStyle = tv({
   slots: {
     container: 'relative w-full space-y-3',
-    heading: 'font-tf-font text-category',
+    heading: 'font-tf-font text-tf-category',
     content: 'grid gap-3',
   },
   variants: {

package/lib/components/fields/checkbox.tsx

@@ -48,7 +48,7 @@ export const Checkbox: FC<Props<'input'>> = ({ label, bind, options }) => {
                 {label}
                 {!isOptional ? (
                   <span className='ml-0.5 inline-block'>
-                    <AsteriskIcon className='h-3 w-3 text-destructive' />
+                    <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                   </span>
                 ) : (
                   <></>

package/lib/components/fields/date-picker.tsx

@@ -1,6 +1,6 @@
+import type * as React from 'react';
 import type { Props } from '@twintag/twintag-form/types';
 
-import * as React from 'react';
 import { format } from 'date-fns';
 import { AsteriskIcon, Calendar as CalendarIcon } from 'lucide-react';
 import { useFormContext } from 'react-hook-form';
@@ -26,7 +26,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 const datePickerTriggerVariants = tv({
   slots: {
     button: 'w-full justify-start text-left font-normal',
-    icon: 'ml-auto text-muted-foreground opacity-70',
+    icon: 'ml-auto text-tf-muted-foreground opacity-70',
   },
   variants: {
     variant: {
@@ -35,12 +35,12 @@ const datePickerTriggerVariants = tv({
       },
       outline: {
         button:
-          'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-muted-foreground',
+          'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-tf-muted-foreground',
       },
     },
     withValue: {
       true: {
-        button: 'text-muted-foreground',
+        button: 'text-tf-muted-foreground',
       },
       false: {
         button: '',
@@ -95,7 +95,7 @@ export const DatePicker: React.FC<Props<'input'>> = ({
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>
@@ -137,7 +137,7 @@ export const DatePicker: React.FC<Props<'input'>> = ({
                 mode='single'
                 size={size}
                 selected={
-                  !isNaN(new Date(field.value as Date).getTime())
+                  !Number.isNaN(new Date(field.value as Date).getTime())
                     ? new Date(field.value as Date)
                     : undefined
                 }

package/lib/components/fields/file.tsx

@@ -38,7 +38,7 @@ export const File: FC<Props<'input'>> = ({ label, bind, options }) => {
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>

package/lib/components/fields/input.tsx

@@ -39,7 +39,7 @@ export const Input: FC<Props<'input'>> = ({ label, bind, options }) => {
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>

package/lib/components/fields/radiogroup.tsx

@@ -45,7 +45,7 @@ export const RadioGroup: FC<
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>
@@ -82,7 +82,7 @@ export const RadioGroup: FC<
                   );
                 }
 
-                return <></>;
+                return null;
               })}
             </CommonRadioGroup>
           </FormControl>

package/lib/components/fields/textarea.tsx

@@ -38,7 +38,7 @@ export const Textarea: FC<Props<'input'>> = ({ label, bind, options }) => {
               {label}
               {!isOptional ? (
                 <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                 </span>
               ) : (
                 <></>

package/lib/components/fields/toggle.tsx

@@ -39,7 +39,7 @@ export const Toggle: FC<Props<'input'>> = ({ label, bind, options }) => {
                 {label}
                 {!isOptional ? (
                   <span className='ml-0.5 inline-block'>
-                    <AsteriskIcon className='h-3 w-3 text-destructive' />
+                    <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
                   </span>
                 ) : (
                   <></>

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/utils/data.ts

@@ -6,16 +6,18 @@ type Items = (Props<'input'> & {
 export const getBindSetFromItems = (items: Items): Set<string> => {
   const binds = new Set<string>();
 
-  items.forEach((item) => {
+  for (const item of items) {
     if (item.bind) {
       binds.add(item.bind);
     }
 
     if (item.items) {
       const subBinds = getBindSetFromItems(item.items as unknown as Items);
-      subBinds.forEach((bind) => binds.add(bind));
+      for (const bind of subBinds) {
+        binds.add(bind);
+      }
     }
-  });
+  }
 
   return binds;
 };

package/lib/utils/string.ts

@@ -1,8 +1,8 @@
 export const camelize = (str: string) => {
   return str
-    .replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
-      return index === 0 ? word.toLowerCase() : word.toUpperCase();
-    })
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) =>
+      index === 0 ? word.toLowerCase() : word.toUpperCase(),
+    )
     .replace(/\s+/g, '');
 };
 

package/lib/webcomponent.ts

@@ -8,7 +8,6 @@ import config from '../twind.config';
 const withTwind = install(config);
 
 const TwintagFormElement = r2wc(Form, {
-  // @ts-expect-error: ts limitation
   props: {
     config: 'json',
     options: 'json',

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "author": "Twintag",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/twintag-form.react.js",
-      "types": "./dist/react.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./webcomponent": {
-      "import": "./dist/twintag-form.webcomponent.js",
-      "types": "./dist/webcomponent.d.ts"
+      "types": "./dist/webcomponent.d.ts",
+      "import": "./dist/webcomponent.js",
+      "require": "./dist/webcomponent.cjs"
     }
   },
   "dependencies": {
@@ -43,12 +45,10 @@
     "@twind/with-react": "^1.1.3",
     "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "tailwindcss": "^3.3.6",
     "vite": "^5.2.11",
     "vite-plugin-dts": "^3.9.1",
     "tsconfig": "0.0.0",
-    "twintag-types": "0.2.0",
-    "eslint-config-custom": "1.0.0"
+    "twintag-types": "0.4.0"
   },
   "publishConfig": {
     "access": "public"
@@ -56,7 +56,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext .ts,.tsx",
     "format": "prettier --write \"**/*.{ts,md,tsx,cjs,mjs,json,html}\" --ignore-path ../../.gitignore",
     "format:check": "prettier --check \"**/*.{ts,md,tsx,cjs,mjs,json,html}\" --ignore-path ../../.gitignore"
   }

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/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "tsconfig/vite.json",
   "include": [
-    ".eslintrc.cjs",
     "lib",
     "dev",
     "scripts",

package/vite.config.ts

@@ -3,8 +3,19 @@ import { dirname, resolve } from 'pathe';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
+import { dependencies, devDependencies } from './package.json';
+
 export const __dirname = dirname(new URL(import.meta.url).pathname);
 
+const externalPackages = [
+  ...Object.keys(dependencies || {}),
+  ...Object.keys(devDependencies || {}),
+].filter((packageName) => packageName !== 'twintag-types');
+
+const regexesOfPackages = externalPackages.map(
+  (packageName) => new RegExp(`^${packageName}(/.*)?`),
+);
+
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
@@ -16,14 +27,14 @@ export default defineConfig({
     lib: {
       // Could also be a dictionary or array of multiple entry points
       entry: {
-        react: resolve(__dirname, './lib/index.tsx'),
+        index: resolve(__dirname, './lib/index.tsx'),
         webcomponent: resolve(__dirname, './lib/webcomponent.ts'),
       },
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: ['react', 'react-dom'],
+      external: regexesOfPackages,
       preserveEntrySignatures: 'strict',
       output: {
         preserveModules: false,

package/.eslintrc.cjs

@@ -1,9 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['custom'],
-  parserOptions: {
-    project: 'tsconfig.json',
-    tsconfigRootDir: __dirname,
-    sourceType: 'module',
-  },
-};