@hanzo/ui 5.3.34 → 5.3.36

package/dist/tailwind/tailwind.config.hanzo-preset.js

@@ -0,0 +1,911 @@
+import animatePlugin from 'tailwindcss-animate';
+import containerQueriesPlugin from '@tailwindcss/container-queries';
+import tailwindInteractionMediaPlugin from 'tailwindcss-interaction-media';
+import colors from './colors.tailwind';
+import safelist from './safelist.tailwind';
+import screens from './screens.tailwind';
+import spacing from './spacing.tailwind';
+import fontSize from './fontSize.tailwind';
+import fontFamily from './fontFamily.tailwind';
+import zIndex from './z-index.tailwind';
+import typographyPlugin from './typo-plugin';
+export default {
+    darkMode: ["class"],
+    content: [],
+    safelist,
+    plugins: [
+        animatePlugin,
+        typographyPlugin({ className: 'typography', base: 16 }),
+        containerQueriesPlugin,
+        tailwindInteractionMediaPlugin,
+    ],
+    theme: {
+        accentColor: ({ theme }) => ({
+            ...theme('colors'),
+            auto: 'auto',
+        }),
+        animation: {
+            none: 'none',
+            spin: 'spin 1s linear infinite',
+            ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+            pulse: 'pulse 2s linear(0, 1) infinite', // cubic-bezier(0.4, 0, 0.6, 1)
+            pulsereverse: 'pulse 2s linear(1, 0) infinite',
+            bounce: 'bounce 1s infinite',
+            "accordion-down": "accordion-down 0.2s ease-out",
+            "accordion-up": "accordion-up 0.2s ease-out",
+            "mobile-menu-open": "opacity-in 300ms ease-in",
+        },
+        aria: {
+            checked: 'checked="true"',
+            disabled: 'disabled="true"',
+            expanded: 'expanded="true"',
+            hidden: 'hidden="true"',
+            pressed: 'pressed="true"',
+            readonly: 'readonly="true"',
+            required: 'required="true"',
+            selected: 'selected="true"',
+        },
+        aspectRatio: {
+            auto: 'auto',
+            square: '1 / 1',
+            video: '16 / 9',
+        },
+        backdropBlur: ({ theme }) => theme('blur'),
+        backdropBrightness: ({ theme }) => theme('brightness'),
+        backdropContrast: ({ theme }) => theme('contrast'),
+        backdropGrayscale: ({ theme }) => theme('grayscale'),
+        backdropHueRotate: ({ theme }) => theme('hueRotate'),
+        backdropInvert: ({ theme }) => theme('invert'),
+        backdropOpacity: ({ theme }) => theme('opacity'),
+        backdropSaturate: ({ theme }) => theme('saturate'),
+        backdropSepia: ({ theme }) => theme('sepia'),
+        backgroundColor: ({ theme }) => theme('colors'),
+        backgroundImage: {
+            none: 'none',
+            'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
+            'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
+            'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
+            'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
+            'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
+            'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
+            'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
+            'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
+        },
+        backgroundOpacity: ({ theme }) => theme('opacity'),
+        backgroundPosition: {
+            bottom: 'bottom',
+            center: 'center',
+            left: 'left',
+            'left-bottom': 'left bottom',
+            'left-top': 'left top',
+            right: 'right',
+            'right-bottom': 'right bottom',
+            'right-top': 'right top',
+            top: 'top',
+        },
+        backgroundSize: {
+            auto: 'auto',
+            cover: 'cover',
+            contain: 'contain',
+        },
+        blur: {
+            0: '0',
+            none: '0',
+            sm: '4px',
+            DEFAULT: '8px',
+            md: '12px',
+            lg: '16px',
+            xl: '24px',
+            '2xl': '40px',
+            '3xl': '64px',
+        },
+        borderColor: ({ theme }) => ({
+            ...theme('colors'),
+            DEFAULT: theme('colors.muted.3'),
+        }),
+        borderOpacity: ({ theme }) => theme('opacity'),
+        borderRadius: {
+            none: '0px',
+            sm: '0.25rem',
+            DEFAULT: '0.5rem',
+            md: '0.5rem',
+            lg: '0.75rem',
+            xl: '1rem',
+            '2xl': '1.5rem',
+            '3xl': '2rem',
+            full: '9999px',
+        },
+        borderSpacing: spacing,
+        borderWidth: {
+            DEFAULT: '1px',
+            0: '0px',
+            2: '2px',
+            4: '4px',
+            8: '8px',
+        },
+        boxShadow: {
+            sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+            DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+            md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+            lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+            xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+            '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+            inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+            none: 'none',
+        },
+        boxShadowColor: ({ theme }) => theme('colors'),
+        brightness: {
+            0: '0',
+            50: '.5',
+            75: '.75',
+            90: '.9',
+            95: '.95',
+            100: '1',
+            105: '1.05',
+            110: '1.1',
+            125: '1.25',
+            150: '1.5',
+            200: '2',
+        },
+        caretColor: ({ theme }) => theme('colors'),
+        colors,
+        columns: {
+            auto: 'auto',
+            1: '1',
+            2: '2',
+            3: '3',
+            4: '4',
+            5: '5',
+            6: '6',
+            7: '7',
+            8: '8',
+            9: '9',
+            10: '10',
+            11: '11',
+            12: '12',
+            '3xs': '16rem',
+            '2xs': '18rem',
+            xs: '20rem',
+            sm: '24rem',
+            md: '28rem',
+            lg: '32rem',
+            xl: '36rem',
+            '2xl': '42rem',
+            '3xl': '48rem',
+            '4xl': '56rem',
+            '5xl': '64rem',
+            '6xl': '72rem',
+            '7xl': '80rem',
+        },
+        container: {
+            center: true,
+            padding: "2rem",
+        },
+        content: {
+            none: 'none',
+        },
+        contrast: {
+            0: '0',
+            50: '.5',
+            75: '.75',
+            100: '1',
+            125: '1.25',
+            150: '1.5',
+            200: '2',
+        },
+        cursor: {
+            auto: 'auto',
+            default: 'default',
+            pointer: 'pointer',
+            wait: 'wait',
+            text: 'text',
+            move: 'move',
+            help: 'help',
+            'not-allowed': 'not-allowed',
+            none: 'none',
+            'context-menu': 'context-menu',
+            progress: 'progress',
+            cell: 'cell',
+            crosshair: 'crosshair',
+            'vertical-text': 'vertical-text',
+            alias: 'alias',
+            copy: 'copy',
+            'no-drop': 'no-drop',
+            grab: 'grab',
+            grabbing: 'grabbing',
+            'all-scroll': 'all-scroll',
+            'col-resize': 'col-resize',
+            'row-resize': 'row-resize',
+            'n-resize': 'n-resize',
+            'e-resize': 'e-resize',
+            's-resize': 's-resize',
+            'w-resize': 'w-resize',
+            'ne-resize': 'ne-resize',
+            'nw-resize': 'nw-resize',
+            'se-resize': 'se-resize',
+            'sw-resize': 'sw-resize',
+            'ew-resize': 'ew-resize',
+            'ns-resize': 'ns-resize',
+            'nesw-resize': 'nesw-resize',
+            'nwse-resize': 'nwse-resize',
+            'zoom-in': 'zoom-in',
+            'zoom-out': 'zoom-out',
+        },
+        divideColor: ({ theme }) => theme('borderColor'),
+        divideOpacity: ({ theme }) => theme('borderOpacity'),
+        divideWidth: ({ theme }) => theme('borderWidth'),
+        dropShadow: {
+            sm: '0 1px 1px rgb(0 0 0 / 0.05)',
+            DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
+            md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
+            lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
+            xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
+            '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
+            none: '0 0 #0000',
+        },
+        fill: ({ theme }) => ({
+            none: 'none',
+            ...theme('colors'),
+        }),
+        flex: {
+            1: '1 1 0%',
+            auto: '1 1 auto',
+            initial: '0 1 auto',
+            none: 'none',
+        },
+        flexBasis: {
+            auto: 'auto',
+            ...spacing,
+            '1/2': '50%',
+            '1/3': '33.333333%',
+            '2/3': '66.666667%',
+            '1/4': '25%',
+            '2/4': '50%',
+            '3/4': '75%',
+            '1/5': '20%',
+            '2/5': '40%',
+            '3/5': '60%',
+            '4/5': '80%',
+            '1/6': '16.666667%',
+            '2/6': '33.333333%',
+            '3/6': '50%',
+            '4/6': '66.666667%',
+            '5/6': '83.333333%',
+            '1/12': '8.333333%',
+            '2/12': '16.666667%',
+            '3/12': '25%',
+            '4/12': '33.333333%',
+            '5/12': '41.666667%',
+            '6/12': '50%',
+            '7/12': '58.333333%',
+            '8/12': '66.666667%',
+            '9/12': '75%',
+            '10/12': '83.333333%',
+            '11/12': '91.666667%',
+            full: '100%',
+        },
+        flexGrow: {
+            0: '0',
+            DEFAULT: '1',
+        },
+        flexShrink: {
+            0: '0',
+            DEFAULT: '1',
+        },
+        fontFamily,
+        fontSize,
+        fontWeight: {
+            thin: '100',
+            extralight: '200',
+            light: '300',
+            normal: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+            extrabold: '800',
+            black: '900',
+        },
+        gap: spacing,
+        gradientColorStops: ({ theme }) => theme('colors'),
+        gradientColorStopPositions: {
+            '0%': '0%',
+            '5%': '5%',
+            '10%': '10%',
+            '15%': '15%',
+            '20%': '20%',
+            '25%': '25%',
+            '30%': '30%',
+            '35%': '35%',
+            '40%': '40%',
+            '45%': '45%',
+            '50%': '50%',
+            '55%': '55%',
+            '60%': '60%',
+            '65%': '65%',
+            '70%': '70%',
+            '75%': '75%',
+            '80%': '80%',
+            '85%': '85%',
+            '90%': '90%',
+            '95%': '95%',
+            '100%': '100%',
+        },
+        grayscale: {
+            0: '0',
+            DEFAULT: '100%',
+        },
+        gridAutoColumns: {
+            auto: 'auto',
+            min: 'min-content',
+            max: 'max-content',
+            fr: 'minmax(0, 1fr)',
+        },
+        gridAutoRows: {
+            auto: 'auto',
+            min: 'min-content',
+            max: 'max-content',
+            fr: 'minmax(0, 1fr)',
+        },
+        gridColumn: {
+            auto: 'auto',
+            'span-1': 'span 1 / span 1',
+            'span-2': 'span 2 / span 2',
+            'span-3': 'span 3 / span 3',
+            'span-4': 'span 4 / span 4',
+            'span-5': 'span 5 / span 5',
+            'span-6': 'span 6 / span 6',
+            'span-7': 'span 7 / span 7',
+            'span-8': 'span 8 / span 8',
+            'span-9': 'span 9 / span 9',
+            'span-10': 'span 10 / span 10',
+            'span-11': 'span 11 / span 11',
+            'span-12': 'span 12 / span 12',
+            'span-full': '1 / -1',
+        },
+        gridColumnEnd: {
+            auto: 'auto',
+            1: '1',
+            2: '2',
+            3: '3',
+            4: '4',
+            5: '5',
+            6: '6',
+            7: '7',
+            8: '8',
+            9: '9',
+            10: '10',
+            11: '11',
+            12: '12',
+            13: '13',
+        },
+        gridColumnStart: {
+            auto: 'auto',
+            1: '1',
+            2: '2',
+            3: '3',
+            4: '4',
+            5: '5',
+            6: '6',
+            7: '7',
+            8: '8',
+            9: '9',
+            10: '10',
+            11: '11',
+            12: '12',
+            13: '13',
+        },
+        gridRow: {
+            auto: 'auto',
+            'span-1': 'span 1 / span 1',
+            'span-2': 'span 2 / span 2',
+            'span-3': 'span 3 / span 3',
+            'span-4': 'span 4 / span 4',
+            'span-5': 'span 5 / span 5',
+            'span-6': 'span 6 / span 6',
+            'span-full': '1 / -1',
+        },
+        gridRowEnd: {
+            auto: 'auto',
+            1: '1',
+            2: '2',
+            3: '3',
+            4: '4',
+            5: '5',
+            6: '6',
+            7: '7',
+        },
+        gridRowStart: {
+            auto: 'auto',
+            1: '1',
+            2: '2',
+            3: '3',
+            4: '4',
+            5: '5',
+            6: '6',
+            7: '7',
+        },
+        gridTemplateColumns: {
+            none: 'none',
+            1: 'repeat(1, minmax(0, 1fr))',
+            2: 'repeat(2, minmax(0, 1fr))',
+            3: 'repeat(3, minmax(0, 1fr))',
+            4: 'repeat(4, minmax(0, 1fr))',
+            5: 'repeat(5, minmax(0, 1fr))',
+            6: 'repeat(6, minmax(0, 1fr))',
+            7: 'repeat(7, minmax(0, 1fr))',
+            8: 'repeat(8, minmax(0, 1fr))',
+            9: 'repeat(9, minmax(0, 1fr))',
+            10: 'repeat(10, minmax(0, 1fr))',
+            11: 'repeat(11, minmax(0, 1fr))',
+            12: 'repeat(12, minmax(0, 1fr))',
+        },
+        gridTemplateRows: {
+            none: 'none',
+            1: 'repeat(1, minmax(0, 1fr))',
+            2: 'repeat(2, minmax(0, 1fr))',
+            3: 'repeat(3, minmax(0, 1fr))',
+            4: 'repeat(4, minmax(0, 1fr))',
+            5: 'repeat(5, minmax(0, 1fr))',
+            6: 'repeat(6, minmax(0, 1fr))',
+        },
+        height: {
+            auto: 'auto',
+            ...spacing,
+            '1/2': '50%',
+            '1/3': '33.333333%',
+            '2/3': '66.666667%',
+            '1/4': '25%',
+            '2/4': '50%',
+            '3/4': '75%',
+            '1/5': '20%',
+            '2/5': '40%',
+            '3/5': '60%',
+            '4/5': '80%',
+            '1/6': '16.666667%',
+            '2/6': '33.333333%',
+            '3/6': '50%',
+            '4/6': '66.666667%',
+            '5/6': '83.333333%',
+            full: '100%',
+            screen: '100vh',
+            min: 'min-content',
+            max: 'max-content',
+            fit: 'fit-content',
+        },
+        hueRotate: {
+            0: '0deg',
+            15: '15deg',
+            30: '30deg',
+            60: '60deg',
+            90: '90deg',
+            180: '180deg',
+        },
+        inset: {
+            auto: 'auto',
+            ...spacing,
+            '1/2': '50%',
+            '1/3': '33.333333%',
+            '2/3': '66.666667%',
+            '1/4': '25%',
+            '2/4': '50%',
+            '3/4': '75%',
+            full: '100%',
+        },
+        invert: {
+            0: '0',
+            DEFAULT: '100%',
+        },
+        keyframes: {
+            spin: {
+                to: {
+                    transform: 'rotate(360deg)',
+                },
+            },
+            ping: {
+                '75%, 100%': {
+                    transform: 'scale(2)',
+                    opacity: '0',
+                },
+            },
+            pulse: {
+                '50%': {
+                    opacity: '.5',
+                },
+            },
+            bounce: {
+                '0%, 100%': {
+                    transform: 'translateY(-25%)',
+                    animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
+                },
+                '50%': {
+                    transform: 'none',
+                    animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
+                },
+            },
+            "accordion-down": {
+                from: { height: 0 },
+                to: { height: "var(--radix-accordion-content-height)" },
+            },
+            "accordion-up": {
+                from: { height: "var(--radix-accordion-content-height)" },
+                to: { height: 0 },
+            },
+            "opacity-in": {
+                from: { opacity: '0' },
+                to: { opacity: '1' }
+            },
+        },
+        letterSpacing: {
+            tighter: '-0.05em',
+            tight: '-0.025em',
+            normal: '0em',
+            wide: '0.025em',
+            wider: '0.05em',
+            widest: '0.1em',
+        },
+        lineHeight: {
+            none: '1',
+            tight: '1.25',
+            snug: '1.375',
+            normal: '1.5',
+            relaxed: '1.625',
+            loose: '2',
+            3: '.75rem',
+            4: '1rem',
+            5: '1.25rem',
+            6: '1.5rem',
+            7: '1.75rem',
+            8: '2rem',
+            9: '2.25rem',
+            10: '2.5rem',
+        },
+        listStyleType: {
+            none: 'none',
+            disc: 'disc',
+            decimal: 'decimal',
+        },
+        listStyleImage: {
+            none: 'none',
+        },
+        margin: {
+            auto: 'auto',
+            ...spacing,
+        },
+        lineClamp: {
+            1: '1',
+            2: '2',
+            3: '3',
+            4: '4',
+            5: '5',
+            6: '6',
+        },
+        maxHeight: {
+            ...spacing,
+            none: 'none',
+            full: '100%',
+            screen: '100vh',
+            min: 'min-content',
+            max: 'max-content',
+            fit: 'fit-content',
+        },
+        maxWidth: ({ theme, breakpoints }) => ({
+            ...spacing,
+            none: 'none',
+            0: '0rem',
+            xs: '20rem',
+            sm: '24rem',
+            md: '28rem',
+            lg: '32rem',
+            xl: '36rem',
+            '2xl': '42rem',
+            '3xl': '48rem',
+            '4xl': '56rem',
+            '5xl': '64rem',
+            '6xl': '72rem',
+            '7xl': '80rem',
+            full: '100%',
+            min: 'min-content',
+            max: 'max-content',
+            fit: 'fit-content',
+            prose: '65ch',
+            ...breakpoints(theme('screens')),
+        }),
+        minHeight: {
+            ...spacing,
+            0: '0px',
+            full: '100%',
+            screen: '100vh',
+            min: 'min-content',
+            max: 'max-content',
+            fit: 'fit-content',
+        },
+        minWidth: ({ theme, breakpoints }) => ({
+            ...spacing,
+            0: '0px',
+            full: '100%',
+            min: 'min-content',
+            max: 'max-content',
+            fit: 'fit-content',
+            ...breakpoints(theme('screens')),
+        }),
+        objectPosition: {
+            bottom: 'bottom',
+            center: 'center',
+            left: 'left',
+            'left-bottom': 'left bottom',
+            'left-top': 'left top',
+            right: 'right',
+            'right-bottom': 'right bottom',
+            'right-top': 'right top',
+            top: 'top',
+        },
+        opacity: {
+            0: '0',
+            5: '0.05',
+            10: '0.1',
+            20: '0.2',
+            25: '0.25',
+            30: '0.3',
+            35: '0.35',
+            40: '0.4',
+            45: '0.45',
+            50: '0.5',
+            55: '0.55',
+            60: '0.6',
+            65: '0.65',
+            70: '0.7',
+            75: '0.75',
+            80: '0.8',
+            85: '0.85',
+            90: '0.9',
+            95: '0.95',
+            100: '1',
+        },
+        order: {
+            first: '-9999',
+            last: '9999',
+            none: '0',
+            1: '1',
+            2: '2',
+            3: '3',
+            4: '4',
+            5: '5',
+            6: '6',
+            7: '7',
+            8: '8',
+            9: '9',
+            10: '10',
+            11: '11',
+            12: '12',
+        },
+        outlineColor: ({ theme }) => theme('colors'),
+        outlineOffset: {
+            0: '0px',
+            1: '1px',
+            2: '2px',
+            4: '4px',
+            8: '8px',
+        },
+        outlineWidth: {
+            0: '0px',
+            1: '1px',
+            2: '2px',
+            4: '4px',
+            8: '8px',
+        },
+        padding: spacing,
+        placeholderColor: ({ theme }) => theme('colors'),
+        placeholderOpacity: ({ theme }) => theme('opacity'),
+        ringColor: ({ theme }) => ({
+            DEFAULT: theme('colors.blue.500', '#3b82f6'),
+            ...theme('colors'),
+        }),
+        ringOffsetColor: ({ theme }) => theme('colors'),
+        ringOffsetWidth: {
+            0: '0px',
+            1: '1px',
+            2: '2px',
+            4: '4px',
+            8: '8px',
+        },
+        ringOpacity: ({ theme }) => ({
+            DEFAULT: '0.5',
+            ...theme('opacity'),
+        }),
+        ringWidth: {
+            DEFAULT: '3px',
+            0: '0px',
+            1: '1px',
+            2: '2px',
+            4: '4px',
+            8: '8px',
+        },
+        rotate: {
+            0: '0deg',
+            1: '1deg',
+            2: '2deg',
+            3: '3deg',
+            6: '6deg',
+            12: '12deg',
+            45: '45deg',
+            90: '90deg',
+            180: '180deg',
+        },
+        saturate: {
+            0: '0',
+            50: '.5',
+            100: '1',
+            150: '1.5',
+            200: '2',
+        },
+        scale: {
+            0: '0',
+            50: '.5',
+            75: '.75',
+            90: '.9',
+            95: '.95',
+            100: '1',
+            105: '1.05',
+            110: '1.1',
+            125: '1.25',
+            150: '1.5',
+        },
+        screens,
+        scrollMargin: spacing,
+        scrollPadding: spacing,
+        sepia: {
+            0: '0',
+            DEFAULT: '100%',
+        },
+        skew: {
+            0: '0deg',
+            1: '1deg',
+            2: '2deg',
+            3: '3deg',
+            6: '6deg',
+            12: '12deg',
+        },
+        space: spacing,
+        spacing,
+        stroke: ({ theme }) => ({
+            none: 'none',
+            ...theme('colors'),
+        }),
+        strokeWidth: {
+            0: '0',
+            1: '1',
+            2: '2',
+        },
+        supports: {},
+        data: {
+            on: 'state~="on"',
+            off: 'state~="off"',
+        },
+        textColor: ({ theme }) => theme('colors'),
+        textDecorationColor: ({ theme }) => theme('colors'),
+        textDecorationThickness: {
+            auto: 'auto',
+            'from-font': 'from-font',
+            0: '0px',
+            1: '1px',
+            2: '2px',
+            4: '4px',
+            8: '8px',
+        },
+        textIndent: spacing,
+        textOpacity: ({ theme }) => theme('opacity'),
+        textUnderlineOffset: {
+            auto: 'auto',
+            0: '0px',
+            1: '1px',
+            2: '2px',
+            4: '4px',
+            8: '8px',
+        },
+        transformOrigin: {
+            center: 'center',
+            top: 'top',
+            'top-right': 'top right',
+            right: 'right',
+            'bottom-right': 'bottom right',
+            bottom: 'bottom',
+            'bottom-left': 'bottom left',
+            left: 'left',
+            'top-left': 'top left',
+        },
+        transitionDelay: {
+            0: '0s',
+            75: '75ms',
+            100: '100ms',
+            150: '150ms',
+            200: '200ms',
+            300: '300ms',
+            500: '500ms',
+            700: '700ms',
+            1000: '1000ms',
+        },
+        transitionDuration: {
+            DEFAULT: '150ms',
+            0: '0s',
+            75: '75ms',
+            100: '100ms',
+            150: '150ms',
+            200: '200ms',
+            300: '300ms',
+            500: '500ms',
+            700: '700ms',
+            1000: '1000ms',
+        },
+        transitionProperty: {
+            none: 'none',
+            all: 'all',
+            DEFAULT: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+            colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+            opacity: 'opacity',
+            shadow: 'box-shadow',
+            transform: 'transform',
+            height: 'height',
+            spacing: 'margin, padding',
+        },
+        transitionTimingFunction: {
+            DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            linear: 'linear',
+            in: 'cubic-bezier(0.4, 0, 1, 1)',
+            out: 'cubic-bezier(0, 0, 0.2, 1)',
+            'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+        translate: {
+            ...spacing,
+            '1/2': '50%',
+            '1/3': '33.333333%',
+            '2/3': '66.666667%',
+            '1/4': '25%',
+            '2/4': '50%',
+            '3/4': '75%',
+            full: '100%',
+        },
+        width: ({ theme, breakpoints }) => ({
+            auto: 'auto',
+            ...spacing,
+            '1/2': '50%',
+            '1/3': '33.333333%',
+            '2/3': '66.666667%',
+            '1/4': '25%',
+            '2/4': '50%',
+            '3/4': '75%',
+            '1/5': '20%',
+            '2/5': '40%',
+            '3/5': '60%',
+            '4/5': '80%',
+            '1/6': '16.666667%',
+            '2/6': '33.333333%',
+            '3/6': '50%',
+            '4/6': '66.666667%',
+            '5/6': '83.333333%',
+            '1/12': '8.333333%',
+            '2/12': '16.666667%',
+            '3/12': '25%',
+            '4/12': '33.333333%',
+            '5/12': '41.666667%',
+            '6/12': '50%',
+            '7/12': '58.333333%',
+            '8/12': '66.666667%',
+            '9/12': '75%',
+            '10/12': '83.333333%',
+            '11/12': '91.666667%',
+            full: '100%',
+            screen: '100vw',
+            min: 'min-content',
+            max: 'max-content',
+            fit: 'fit-content',
+            ...breakpoints(theme('screens')),
+        }),
+        willChange: {
+            auto: 'auto',
+            scroll: 'scroll-position',
+            contents: 'contents',
+            transform: 'transform',
+        },
+        zIndex,
+    },
+};