@twintag/twintag-form 1.6.0 → 1.6.1

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/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

@@ -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>
               ) : (
                 <></>

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>
               ) : (
                 <></>

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

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "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],