sprintify-ui 0.4.4 → 0.4.5

package/dist/tailwindcss/index.js

@@ -1,306 +1,306 @@
-const plugin = require('tailwindcss/plugin');
-
-module.exports = plugin(
-  function ({ addComponents, theme }) {
-    addComponents({
-      '.overlay': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        width: '100%',
-        height: '100%',
-      },
-      // Button
-      '.btn': {
-        position: 'relative',
-        display: 'inline-block',
-        cursor: 'pointer',
-        'user-select': 'none',
-        color: theme('colors.slate.600'),
-        'background-color': theme('colors.white'),
-        'border-color': theme('colors.slate.300'),
-        'border-width': '1px',
-        'border-radius': theme('borderRadius.md'),
-        padding: theme('spacing.[2.5]') + ' ' + theme('spacing.4'),
-        'text-align': 'center',
-        'font-size': theme('fontSize.sm'),
-        'line-height': theme('lineHeight.5'),
-        'transition-property':
-          'color, background-color, border-color, text-decoration-color, fill, stroke',
-        'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
-        'transition-duration': '100ms',
-        '&:hover': {
-          'background-color': theme('colors.slate.100'),
-        },
-        '&:focus-visible': {
-          'z-index': 1,
-          outline: '4px solid transparent',
-          'outline-offset': '0px',
-          '--tw-ring-color': theme('colors.slate.200'),
-          '--tw-ring-offset-width': '0px',
-          '--tw-ring-offset-shadow':
-            'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
-          '--tw-ring-shadow':
-            'var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
-          'box-shadow':
-            'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
-        },
-        '&:disabled': {
-          cursor: 'not-allowed',
-          opacity: '0.5',
-        },
-      },
-      // Button - Sizes
-      '.btn-xs': {
-        'font-size': theme('fontSize.xs'),
-        'line-height': theme('lineHeight.4'),
-        padding: theme('spacing.1') + ' ' + theme('spacing.2'),
-      },
-      '.btn-sm': {
-        'font-size': theme('fontSize.sm'),
-        'line-height': theme('lineHeight.4'),
-        padding: theme('spacing.2') + ' ' + theme('spacing.3'),
-      },
-      '.btn-md': {
-        'font-size': theme('fontSize.sm'),
-        'line-height': theme('lineHeight.5'),
-        padding: theme('spacing.[2.5]') + ' ' + theme('spacing.4'),
-      },
-      '.btn-lg': {
-        'font-size': theme('fontSize.base'),
-        'line-height': theme('lineHeight.5'),
-        padding: theme('spacing.3') + ' ' + theme('spacing.5'),
-      },
-      '.btn-xl': {
-        'font-size': theme('fontSize.base'),
-        'line-height': theme('lineHeight.5'),
-        padding: theme('spacing.4') + ' ' + theme('spacing.6'),
-      },
-      // Button - Colors
-      '.btn-primary': {
-        color: theme('colors.white'),
-        'background-color': theme('colors.primary.600'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.primary.500'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.primary.200'),
-        },
-      },
-      '.btn-secondary': {
-        color: theme('colors.primary.700'),
-        'background-color': theme('colors.primary.200'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.primary.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.primary.200'),
-        },
-      },
-      '.btn-secondary-outline': {
-        color: theme('colors.primary.700'),
-        'background-color': theme('colors.primary.200'),
-        'border-color': theme('colors.primary.300'),
-        '&:hover': {
-          'background-color': theme('colors.primary.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.primary.200'),
-        },
-      },
-      '.btn-success': {
-        color: theme('colors.white'),
-        'background-color': theme('colors.green.600'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.green.500'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.green.200'),
-        },
-      },
-      '.btn-success-outline': {
-        color: theme('colors.green.700'),
-        'background-color': theme('colors.green.200'),
-        'border-color': theme('colors.green.300'),
-        '&:hover': {
-          'background-color': theme('colors.green.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.green.200'),
-        },
-      },
-      '.btn-warning': {
-        color: theme('colors.yellow.900'),
-        'background-color': theme('colors.yellow.400'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.yellow.300'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.yellow.200'),
-        },
-      },
-      '.btn-warning-outline': {
-        color: theme('colors.yellow.900'),
-        'background-color': theme('colors.yellow.200'),
-        'border-color': theme('colors.yellow.400'),
-        '&:hover': {
-          'background-color': theme('colors.yellow.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.yellow.200'),
-        },
-      },
-      '.btn-danger': {
-        color: theme('colors.white'),
-        'background-color': theme('colors.red.600'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.red.500'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.red.200'),
-        },
-      },
-      '.btn-danger-outline': {
-        color: theme('colors.red.700'),
-        'background-color': theme('colors.red.200'),
-        'border-color': theme('colors.red.300'),
-        '&:hover': {
-          'background-color': theme('colors.red.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.red.200'),
-        },
-      },
-      '.btn-info': {
-        color: theme('colors.white'),
-        'background-color': theme('colors.blue.600'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.blue.500'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.blue.200'),
-        },
-      },
-      '.btn-info-outline': {
-        color: theme('colors.blue.700'),
-        'background-color': theme('colors.blue.200'),
-        'border-color': theme('colors.blue.300'),
-        '&:hover': {
-          'background-color': theme('colors.blue.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.blue.200'),
-        },
-      },
-      '.btn-white': {
-        'background-color': theme('colors.white'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.slate.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.slate.200'),
-        },
-      },
-      '.btn-black': {
-        color: theme('colors.white'),
-        'background-color': theme('colors.slate.900'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.slate.700'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.slate.300'),
-        },
-      },
-      '.btn-slate-100': {
-        'background-color': theme('colors.slate.100'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.slate.50'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.slate.200'),
-        },
-      },
-      '.btn-slate-100-outline': {
-        'background-color': theme('colors.slate.100'),
-        'border-color': theme('colors.slate.200'),
-        '&:hover': {
-          'background-color': theme('colors.slate.50'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.slate.200'),
-        },
-      },
-      '.btn-slate-200': {
-        'background-color': theme('colors.slate.200'),
-        'border-color': 'transparent',
-        '&:hover': {
-          'background-color': theme('colors.slate.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.slate.200'),
-        },
-      },
-      '.btn-slate-200-outline': {
-        'background-color': theme('colors.slate.200'),
-        'border-color': theme('colors.slate.300'),
-        '&:hover': {
-          'background-color': theme('colors.slate.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.slate.200'),
-        },
-      },
-    });
-  },
-  {
-    theme: {
-      extend: {
-        zIndex: {
-          menu: '40',
-          modal: '30',
-          notifications: '50',
-          dialogs: '50',
-        },
-        animation: {
-          shake: 'shake 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both',
-          shimmer: 'shimmer 2s infinite both',
-        },
-        keyframes: {
-          shimmer: {
-            '100%': {
-              transform: 'translateX(100%)',
-            },
-          },
-          shake: {
-            '0%, 100%': {
-              transform: 'translateX(0)',
-            },
-            '10%, 30%, 50%, 70%': {
-              transform: 'translateX(-10px)',
-            },
-            '20%, 40%, 60%': {
-              transform: 'translateX(10px)',
-            },
-            '80%': {
-              transform: 'translateX(8px)',
-            },
-            '90%': {
-              transform: 'translateX(-8px)',
-            },
-          },
-        },
-      },
-    },
-  }
-);
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(
+  function ({ addComponents, theme }) {
+    addComponents({
+      '.overlay': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+      },
+      // Button
+      '.btn': {
+        position: 'relative',
+        display: 'inline-block',
+        cursor: 'pointer',
+        'user-select': 'none',
+        color: theme('colors.slate.600'),
+        'background-color': theme('colors.white'),
+        'border-color': theme('colors.slate.300'),
+        'border-width': '1px',
+        'border-radius': theme('borderRadius.md'),
+        padding: theme('spacing.[2.5]') + ' ' + theme('spacing.4'),
+        'text-align': 'center',
+        'font-size': theme('fontSize.sm'),
+        'line-height': theme('lineHeight.5'),
+        'transition-property':
+          'color, background-color, border-color, text-decoration-color, fill, stroke',
+        'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+        'transition-duration': '100ms',
+        '&:hover': {
+          'background-color': theme('colors.slate.100'),
+        },
+        '&:focus-visible': {
+          'z-index': 1,
+          outline: '4px solid transparent',
+          'outline-offset': '0px',
+          '--tw-ring-color': theme('colors.slate.200'),
+          '--tw-ring-offset-width': '0px',
+          '--tw-ring-offset-shadow':
+            'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
+          '--tw-ring-shadow':
+            'var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+          'box-shadow':
+            'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+        },
+        '&:disabled': {
+          cursor: 'not-allowed',
+          opacity: '0.5',
+        },
+      },
+      // Button - Sizes
+      '.btn-xs': {
+        'font-size': theme('fontSize.xs'),
+        'line-height': theme('lineHeight.4'),
+        padding: theme('spacing.1') + ' ' + theme('spacing.2'),
+      },
+      '.btn-sm': {
+        'font-size': theme('fontSize.sm'),
+        'line-height': theme('lineHeight.4'),
+        padding: theme('spacing.2') + ' ' + theme('spacing.3'),
+      },
+      '.btn-md': {
+        'font-size': theme('fontSize.sm'),
+        'line-height': theme('lineHeight.5'),
+        padding: theme('spacing.[2.5]') + ' ' + theme('spacing.4'),
+      },
+      '.btn-lg': {
+        'font-size': theme('fontSize.base'),
+        'line-height': theme('lineHeight.5'),
+        padding: theme('spacing.3') + ' ' + theme('spacing.5'),
+      },
+      '.btn-xl': {
+        'font-size': theme('fontSize.base'),
+        'line-height': theme('lineHeight.5'),
+        padding: theme('spacing.4') + ' ' + theme('spacing.6'),
+      },
+      // Button - Colors
+      '.btn-primary': {
+        color: theme('colors.white'),
+        'background-color': theme('colors.primary.600'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.primary.500'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.primary.200'),
+        },
+      },
+      '.btn-secondary': {
+        color: theme('colors.primary.700'),
+        'background-color': theme('colors.primary.200'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.primary.100'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.primary.200'),
+        },
+      },
+      '.btn-secondary-outline': {
+        color: theme('colors.primary.700'),
+        'background-color': theme('colors.primary.200'),
+        'border-color': theme('colors.primary.300'),
+        '&:hover': {
+          'background-color': theme('colors.primary.100'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.primary.200'),
+        },
+      },
+      '.btn-success': {
+        color: theme('colors.white'),
+        'background-color': theme('colors.green.600'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.green.500'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.green.200'),
+        },
+      },
+      '.btn-success-outline': {
+        color: theme('colors.green.700'),
+        'background-color': theme('colors.green.200'),
+        'border-color': theme('colors.green.300'),
+        '&:hover': {
+          'background-color': theme('colors.green.100'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.green.200'),
+        },
+      },
+      '.btn-warning': {
+        color: theme('colors.yellow.900'),
+        'background-color': theme('colors.yellow.400'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.yellow.300'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.yellow.200'),
+        },
+      },
+      '.btn-warning-outline': {
+        color: theme('colors.yellow.900'),
+        'background-color': theme('colors.yellow.200'),
+        'border-color': theme('colors.yellow.400'),
+        '&:hover': {
+          'background-color': theme('colors.yellow.100'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.yellow.200'),
+        },
+      },
+      '.btn-danger': {
+        color: theme('colors.white'),
+        'background-color': theme('colors.red.600'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.red.500'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.red.200'),
+        },
+      },
+      '.btn-danger-outline': {
+        color: theme('colors.red.700'),
+        'background-color': theme('colors.red.200'),
+        'border-color': theme('colors.red.300'),
+        '&:hover': {
+          'background-color': theme('colors.red.100'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.red.200'),
+        },
+      },
+      '.btn-info': {
+        color: theme('colors.white'),
+        'background-color': theme('colors.blue.600'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.blue.500'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.blue.200'),
+        },
+      },
+      '.btn-info-outline': {
+        color: theme('colors.blue.700'),
+        'background-color': theme('colors.blue.200'),
+        'border-color': theme('colors.blue.300'),
+        '&:hover': {
+          'background-color': theme('colors.blue.100'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.blue.200'),
+        },
+      },
+      '.btn-white': {
+        'background-color': theme('colors.white'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.slate.100'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+      '.btn-black': {
+        color: theme('colors.white'),
+        'background-color': theme('colors.slate.900'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.slate.700'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.slate.300'),
+        },
+      },
+      '.btn-slate-100': {
+        'background-color': theme('colors.slate.100'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.slate.50'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+      '.btn-slate-100-outline': {
+        'background-color': theme('colors.slate.100'),
+        'border-color': theme('colors.slate.200'),
+        '&:hover': {
+          'background-color': theme('colors.slate.50'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+      '.btn-slate-200': {
+        'background-color': theme('colors.slate.200'),
+        'border-color': 'transparent',
+        '&:hover': {
+          'background-color': theme('colors.slate.100'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+      '.btn-slate-200-outline': {
+        'background-color': theme('colors.slate.200'),
+        'border-color': theme('colors.slate.300'),
+        '&:hover': {
+          'background-color': theme('colors.slate.100'),
+        },
+        '&:focus-visible': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+    });
+  },
+  {
+    theme: {
+      extend: {
+        zIndex: {
+          menu: '40',
+          modal: '30',
+          notifications: '50',
+          dialogs: '50',
+        },
+        animation: {
+          shake: 'shake 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both',
+          shimmer: 'shimmer 2s infinite both',
+        },
+        keyframes: {
+          shimmer: {
+            '100%': {
+              transform: 'translateX(100%)',
+            },
+          },
+          shake: {
+            '0%, 100%': {
+              transform: 'translateX(0)',
+            },
+            '10%, 30%, 50%, 70%': {
+              transform: 'translateX(-10px)',
+            },
+            '20%, 40%, 60%': {
+              transform: 'translateX(10px)',
+            },
+            '80%': {
+              transform: 'translateX(8px)',
+            },
+            '90%': {
+              transform: 'translateX(-8px)',
+            },
+          },
+        },
+      },
+    },
+  }
+);