sprintify-ui 0.6.31 → 0.6.33

package/dist/tailwindcss/index.js

@@ -1,307 +1,22 @@
 const plugin = require('tailwindcss/plugin');
+const theme = require('./theme').default;
+
+const button = require('./button').default;
+const overlay = require('./overlay').default;
+const input = require('./input').default;
+
+const config = {
+  theme: theme
+}
 
 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.300'),
-        '&: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.400'),
-        '&:hover': {
-          'background-color': theme('colors.slate.100'),
-        },
-        '&:focus-visible': {
-          '--tw-ring-color': theme('colors.slate.200'),
-        },
-      },
-    });
+    addComponents(
+      Object.assign({},
+        button(theme),
+        overlay(theme),
+        input(theme),
+      ));
   },
-  {
-    theme: {
-      extend: {
-        zIndex: {
-          menu: '40',
-          tooltip: '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)',
-            },
-          },
-        },
-      },
-    },
-  }
+  config
 );

package/dist/tailwindcss/input.js

@@ -0,0 +1,24 @@
+const { parseColor } = require("tailwindcss/lib/util/color");
+
+
+export default (theme) => {
+
+    const blueColor = parseColor(theme('colors.blue.600')).color.join(", ");
+    const redColor = parseColor(theme('colors.red.600')).color.join(", ");
+
+    return {
+        '.input-focus': {
+            'border-color': `rgba(${(blueColor)}, 0.6)`,
+            'zIndex': 1,
+            'boxShadow': `rgba(${(blueColor)}, 0.2) 0px 0px 0px 4px, var(--tw-shadow, 0 0 #0000);`,
+        },
+        '.input-focus-error': {
+            'border-color': `rgba(${(redColor)}, 0.6)`,
+            'zIndex': 1,
+            'boxShadow': `rgba(${(redColor)}, 0.2) 0px 0px 0px 4px, var(--tw-shadow, 0 0 #0000);`,
+        },
+        '.input-rounded': {
+            'border-radius': theme('borderRadius.md'),
+        }
+    }
+}

package/dist/tailwindcss/overlay.js

@@ -0,0 +1,13 @@
+export default (theme) => {
+    return {
+        '.overlay': {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+        },
+    }
+}

package/dist/tailwindcss/theme.js

@@ -0,0 +1,46 @@
+export default {
+    extend: {
+        zIndex: {
+            menu: '40',
+            tooltip: '40',
+            modal: '30',
+            notifications: '50',
+            dialogs: '50',
+        },
+        height: {
+            'control-xs': '1.6rem',
+            'control-sm': '2rem',
+            'control-md': '2.5rem',
+            'control-lg': '3rem',
+            'control-xl': '3.5rem',
+        },
+        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)',
+                },
+            },
+        },
+    },
+};

package/dist/types/src/components/BaseActionItemButton.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     size: {
-        type: import("vue").PropType<"sm" | "lg" | "md">;
+        type: import("vue").PropType<"sm" | "md" | "lg">;
         required: true;
         default: string;
     };
@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     size: {
-        type: import("vue").PropType<"sm" | "lg" | "md">;
+        type: import("vue").PropType<"sm" | "md" | "lg">;
         required: true;
         default: string;
     };

package/dist/types/src/components/BaseAddressForm.vue.d.ts

@@ -1,5 +1,6 @@
 import { Country } from '@/types/Country';
 import { Region } from '@/types/Region';
+import { Size } from '@/utils/sizes';
 type Address = {
     address_1?: string | null;
     address_2?: string | null;
@@ -12,6 +13,10 @@ declare const _default: import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;
     };
+    size: {
+        type: import("vue").PropType<"xs" | "sm" | "md">;
+        default: undefined;
+    };
     modelValue: {
         type: import("vue").PropType<Address | null | undefined>;
         required: true;
@@ -48,6 +53,10 @@ declare const _default: import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;
     };
+    size: {
+        type: import("vue").PropType<"xs" | "sm" | "md">;
+        default: undefined;
+    };
     modelValue: {
         type: import("vue").PropType<Address | null | undefined>;
         required: true;
@@ -81,6 +90,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
+    size: Size;
     modelValue: undefined | null | Address;
     prefix: string | null;
     countries: Country[];

package/dist/types/src/components/BaseAutocomplete.vue.d.ts

@@ -27,6 +27,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     placeholder: {
         default: undefined;
         type: StringConstructor;
@@ -59,10 +63,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-    size: {
-        default: string;
-        type: PropType<"base" | "xs" | "sm">;
-    };
     dropdownShow: {
         default: string;
         type: PropType<"always" | "focus">;
@@ -127,6 +127,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     placeholder: {
         default: undefined;
         type: StringConstructor;
@@ -159,10 +163,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-    size: {
-        default: string;
-        type: PropType<"base" | "xs" | "sm">;
-    };
     dropdownShow: {
         default: string;
         type: PropType<"always" | "focus">;
@@ -205,17 +205,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: boolean;
     select: SelectConfiguration | undefined;
     name: string;
+    size: "xs" | "sm" | "md";
     inline: boolean;
     modelValue: Option | null | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
+    visibleFocus: boolean;
     loading: boolean;
     loadingBottom: boolean;
-    size: "base" | "xs" | "sm";
     dropdownShow: "always" | "focus";
     showModelValue: boolean;
-    visibleFocus: boolean;
     focusOnMount: boolean;
     showEmptyOption: boolean;
     emptyOptionLabel: string;

package/dist/types/src/components/BaseAutocompleteDrawer.vue.d.ts

@@ -23,7 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<"base" | "xs" | "sm">;
+        type: PropType<"xs" | "sm" | "md">;
         default: string;
     };
     twDrawer: {
@@ -57,7 +57,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<"base" | "xs" | "sm">;
+        type: PropType<"xs" | "sm" | "md">;
         default: string;
     };
     twDrawer: {
@@ -68,12 +68,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onSelect?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
 }, {
+    size: "xs" | "sm" | "md";
     options: NormalizedOption[];
     selected: NormalizedOption | NormalizedOption[] | null | undefined;
     keywords: string;
     loading: boolean;
     loadingBottom: boolean;
-    size: "base" | "xs" | "sm";
     twDrawer: string;
 }, {}>, {
     empty?(_: {}): any;

package/dist/types/src/components/BaseAutocompleteFetch.vue.d.ts

@@ -46,8 +46,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
     size: {
-        default: string;
-        type: PropType<"base" | "xs" | "sm">;
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
     };
     dropdownShow: {
         default: string;
@@ -135,8 +135,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
     size: {
-        default: string;
-        type: PropType<"base" | "xs" | "sm">;
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
     };
     dropdownShow: {
         default: string;
@@ -176,15 +176,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: boolean;
     select: SelectConfiguration | undefined;
     name: string;
+    size: "xs" | "sm" | "md";
     inline: boolean;
     modelValue: Option | null | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
-    size: "base" | "xs" | "sm";
+    visibleFocus: boolean;
     dropdownShow: "always" | "focus";
     showModelValue: boolean;
-    visibleFocus: boolean;
     focusOnMount: boolean;
     showEmptyOption: boolean;
     emptyOptionLabel: string;

package/dist/types/src/components/BaseAvatarGroup.vue.d.ts

@@ -37,7 +37,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     to: (user: User) => RouteLocationRaw;
-    max: number;
     size: string;
+    max: number;
 }, {}>;
 export default _default;

package/dist/types/src/components/BaseBelongsTo.vue.d.ts

@@ -42,8 +42,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
     size: {
-        default: string;
-        type: PropType<"base" | "xs" | "sm">;
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
     };
     dropdownShow: {
         default: string;
@@ -123,8 +123,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
     size: {
-        default: string;
-        type: PropType<"base" | "xs" | "sm">;
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
     };
     dropdownShow: {
         default: string;
@@ -160,15 +160,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     required: boolean;
     select: SelectConfiguration | undefined;
     name: string;
+    size: "xs" | "sm" | "md";
     inline: boolean;
     modelValue: string | number | null | undefined;
     placeholder: string;
     disabled: boolean;
     hasError: boolean;
-    size: "base" | "xs" | "sm";
+    visibleFocus: boolean;
     dropdownShow: "always" | "focus";
     showModelValue: boolean;
-    visibleFocus: boolean;
     focusOnMount: boolean;
     showEmptyOption: boolean;
     emptyOptionLabel: string;