@robuust-digital/vue-components 1.0.1-rc.2 → 1.1.0-rc.0

package/README.md

@@ -54,6 +54,16 @@ export default {
 };
 ```
 
+## Import the CSS
+
+Import our base CSS file in your main entry file:
+
+```javascript
+import '@robuust-digital/vue-components/css';
+```
+
+*This CSS file includes essential base styles and transitions required by the components. Make sure to import it before using any components.*
+
 ## For Nuxt 3 Projects
 
 **Add the module to your `nuxt.config.ts` or `nuxt.config.js`:**

package/dist/style.css

@@ -0,0 +1 @@
+.rvc-pointer-events-none{pointer-events:none}.rvc-pointer-events-auto{pointer-events:auto}.rvc-fixed{position:fixed}.rvc-absolute{position:absolute}.rvc-relative{position:relative}.rvc-sticky{position:sticky}.rvc-inset-0{top:0;right:0;bottom:0;left:0}.rvc-inset-y-0{top:0;bottom:0}.rvc-left-0{left:0}.rvc-right-0{right:0}.rvc-top-0{top:0}.rvc-z-10{z-index:10}.rvc-ml-3{margin-left:.75rem}.rvc-flex{display:flex}.rvc-size-full{width:100%;height:100%}.rvc-h-7{height:1.75rem}.rvc-h-full{height:100%}.rvc-min-h-0{min-height:0px}.rvc-w-full{width:100%}.rvc-w-screen{width:100vw}.rvc-max-w-full{max-width:100%}.rvc-max-w-xl{max-width:36rem}.rvc-flex-1{flex:1 1 0%}.rvc-shrink-0{flex-shrink:0}.rvc-translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-flex-col{flex-direction:column}.rvc-flex-col-reverse{flex-direction:column-reverse}.rvc-items-center{align-items:center}.rvc-justify-between{justify-content:space-between}.rvc-overflow-hidden{overflow:hidden}.rvc-overflow-y-scroll{overflow-y:scroll}.rvc-pl-10{padding-left:2.5rem}.rvc-font-black{font-weight:900}.rvc-opacity-0{opacity:0}.rvc-opacity-100{opacity:1}.rvc-shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.rvc-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-duration-500{transition-duration:.5s}.rvc-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width: 640px){.sm\:rvc-duration-700{transition-duration:.7s}}

package/dist/tailwind/components/badge.js

@@ -0,0 +1,224 @@
+/**
+ * Badge component
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => {
+  const customColors = theme('components.badge.custom') || {};
+  const customColorStyles = Object.keys(customColors).reduce((acc, colorName) => {
+    acc[`&.badge-custom-${colorName}`] = {
+      ...customColors[colorName],
+    };
+    return acc;
+  }, {});
+
+  return {
+    '.badge': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textAlign: 'center',
+      position: 'relative',
+      width: 'fit-content',
+      paddingTop: theme('padding[0.5]'),
+      paddingBottom: theme('padding[0.5]'),
+      paddingLeft: theme('padding[2.5]'),
+      paddingRight: theme('padding[2.5]'),
+      fontWeight: theme('fontWeight.semibold'),
+      borderRadius: theme('borderRadius.full'),
+      borderWidth: theme('borderWidth.DEFAULT'),
+      borderStyle: 'solid',
+      fontSize: theme('fontSize.sm.0'),
+      lineHeight: theme('lineHeight.5'),
+      gap: theme('gap.1'),
+      whiteSpace: 'nowrap',
+      textDecoration: 'none',
+      ...theme('components.badge'),
+
+      '&[type=button], &:where(a.badge)': {
+        transitionProperty: theme('transitionProperty.colors'),
+        transitionDuration: theme('transitionDuration.300'),
+        transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
+      },
+
+      // Color variants
+      '&.badge-primary': {
+        backgroundColor: theme('colors.lime.300'),
+        borderColor: theme('colors.lime.600'),
+        color: theme('colors.lime.900'),
+        ...theme('components.badge.primary'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.lime.200'),
+          ...theme('components.badge.primary.hover'),
+        },
+      },
+      '&.badge-primary-soft': {
+        backgroundColor: theme('colors.lime.100'),
+        borderColor: theme('colors.lime.300'),
+        color: theme('colors.lime.500'),
+        ...theme('components.badge.primary-soft'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.lime.200'),
+          ...theme('components.badge.primary-soft.hover'),
+        },
+      },
+      '&.badge-secondary': {
+        backgroundColor: theme('colors.indigo.300'),
+        borderColor: theme('colors.indigo.600'),
+        color: theme('colors.indigo.900'),
+        ...theme('components.badge.secondary'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.indigo.200'),
+          ...theme('components.badge.secondary.hover'),
+        },
+      },
+      '&.badge-secondary-soft': {
+        backgroundColor: theme('colors.indigo.100'),
+        borderColor: theme('colors.indigo.300'),
+        color: theme('colors.indigo.500'),
+        ...theme('components.badge.secondary-soft'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.indigo.200'),
+          ...theme('components.badge.secondary-hover.hover'),
+        },
+      },
+      '&.badge-tertiary': {
+        backgroundColor: theme('colors.orange.300'),
+        borderColor: theme('colors.orange.600'),
+        color: theme('colors.orange.900'),
+        ...theme('components.badge.tertiary'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.orange.200'),
+          ...theme('components.badge.tertiary.hover'),
+        },
+      },
+      '&.badge-tertiary-soft': {
+        backgroundColor: theme('colors.orange.100'),
+        borderColor: theme('colors.orange.300'),
+        color: theme('colors.orange.500'),
+        ...theme('components.badge.tertiary-soft'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.orange.200'),
+          ...theme('components.badge.tertiary-soft.hover'),
+        },
+      },
+      '&.badge-danger': {
+        backgroundColor: theme('colors.red.300'),
+        borderColor: theme('colors.red.600'),
+        color: theme('colors.red.900'),
+        ...theme('components.badge.danger'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.red.200'),
+          ...theme('components.badge.danger.hover'),
+        },
+      },
+      '&.badge-danger-soft': {
+        backgroundColor: theme('colors.red.100'),
+        borderColor: theme('colors.red.300'),
+        color: theme('colors.red.500'),
+        ...theme('components.badge.danger-soft'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.red.200'),
+          ...theme('components.badge.danger-soft.hover'),
+        },
+      },
+      '&.badge-warning': {
+        backgroundColor: theme('colors.yellow.300'),
+        borderColor: theme('colors.yellow.600'),
+        color: theme('colors.yellow.900'),
+        ...theme('components.badge.warning'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.yellow.200'),
+          ...theme('components.badge.warning.hover'),
+        },
+      },
+      '&.badge-warning-soft': {
+        backgroundColor: theme('colors.yellow.100'),
+        borderColor: theme('colors.yellow.300'),
+        color: theme('colors.yellow.500'),
+        ...theme('components.badge.warning-soft'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.yellow.200'),
+          ...theme('components.badge.warning-soft.hover'),
+        },
+      },
+      '&.badge-success': {
+        backgroundColor: theme('colors.green.300'),
+        borderColor: theme('colors.green.600'),
+        color: theme('colors.green.900'),
+        ...theme('components.badge.success'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.green.200'),
+          ...theme('components.badge.success.hover'),
+        },
+      },
+      '&.badge-success-soft': {
+        backgroundColor: theme('colors.green.100'),
+        borderColor: theme('colors.green.300'),
+        color: theme('colors.green.500'),
+        ...theme('components.badge.success-soft'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.green.200'),
+          ...theme('components.badge.success-soft.hover'),
+        },
+      },
+      '&.badge-light': {
+        backgroundColor: theme('colors.stone.100'),
+        borderColor: theme('colors.stone.500'),
+        color: theme('colors.stone.700'),
+        ...theme('components.badge.light'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.stone.200'),
+          ...theme('components.badge.light.hover'),
+        },
+      },
+      '&.badge-dark': {
+        backgroundColor: theme('colors.stone.800'),
+        borderColor: theme('colors.stone.500'),
+        color: theme('colors.stone.100'),
+        ...theme('components.badge.dark'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          backgroundColor: theme('colors.stone.700'),
+          ...theme('components.badge.dark.hover'),
+        },
+      },
+      '&.badge-clear': {
+        backgroundColor: theme('colors.transparent'),
+        color: theme('colors.stone.800'),
+        borderColor: theme('colors.transparent'),
+        ...theme('components.badge.clear'),
+
+        '&[type=button]:hover, &:where(a.badge):hover': {
+          color: theme('colors.stone.700'),
+          ...theme('components.badge.clear.hover'),
+        },
+      },
+      ...customColorStyles,
+
+      // Size variants
+      '&.badge-lg': {
+        paddingTop: theme('padding[1.5]'),
+        paddingRight: theme('padding.4'),
+        paddingBottom: theme('padding[1.5]'),
+        paddingLeft: theme('padding.4'),
+        fontSize: theme('fontSize.base.0'),
+        gap: theme('gap.2'),
+        ...theme('components.badge.lg'),
+      },
+    },
+  };
+};

package/dist/tailwind/components/button.js

@@ -7,13 +7,17 @@ export default (theme) => {
   const customColors = theme('components.button.custom') || {};
   const customColorStyles = Object.keys(customColors).reduce((acc, colorName) => {
     acc[`&.button-custom-${colorName}`] = {
-      backgroundColor: customColors[colorName].backgroundColor,
-      color: customColors[colorName].color,
-      ...customColors[colorName].styles,
+      ...customColors[colorName],
       '&:hover': {
-        backgroundColor: customColors[colorName].hoverBackgroundColor,
-        color: customColors[colorName].hoverColor,
-        ...customColors[colorName].hoverStyles,
+        ...customColors[colorName].hover,
+      },
+
+      '&:disabled': {
+        ...customColors[colorName].disabled,
+      },
+
+      '.button-icon': {
+        ...customColors[colorName].icon,
       },
     };
     return acc;
@@ -21,7 +25,17 @@ export default (theme) => {
 
   return {
     '.button': {
-      '@apply inline-flex items-center justify-center text-center h-fit border border-transparent relative': {},
+      appearance: 'none',
+      cursor: theme('cursor.pointer'),
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textAlign: 'center',
+      height: theme('height.fit'),
+      borderWidth: theme('borderWidth.DEFAULT'),
+      borderStyle: 'solid',
+      borderColor: theme('colors.transparent'),
+      position: 'relative',
       paddingTop: theme('padding.2'),
       paddingRight: theme('padding.4'),
       paddingBottom: theme('padding.2'),
@@ -38,28 +52,28 @@ export default (theme) => {
 
       // Disabled state
       '&:disabled': {
-        '@apply pointer-events-none': {},
+        pointerEvents: 'none',
         opacity: theme('opacity.50'),
         ...theme('components.button.disabled'),
       },
 
       // Icon styling
       '.button-icon': {
-        '@apply block': {},
+        display: 'block',
         width: theme('width.5'),
         height: theme('height.5'),
         flexShrink: theme('flexShrink.0'),
         ...theme('components.button.icon'),
 
         '&.button-icon-loading': {
-          '@apply animate-spin': {},
+          animation: theme('animation.spin'),
           ...theme('components.button.icon.loading'),
         },
       },
 
       // Reverse icon
       '&.button-reverse': {
-        '@apply flex-row-reverse': {},
+        flexDirection: 'row-reverse',
       },
 
       // Color variants
@@ -331,7 +345,9 @@ export default (theme) => {
         },
       },
       '&.button-clear': {
-        '@apply bg-transparent px-0': {},
+        backgroundColor: theme('colors.transparent'),
+        paddingLeft: theme('padding.0'),
+        paddingRight: theme('padding.0'),
         color: theme('colors.stone.600'),
         ...theme('components.button.clear'),
 

package/dist/tailwind/components/drawer.js

@@ -0,0 +1,95 @@
+import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
+
+/**
+ * Drawer component
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => {
+  // Reserved keys that should not be applied to root
+  const reservedKeys = ['backdrop', 'header', 'title', 'close', 'content', 'footer'];
+
+  // Filter drawer theme object
+  const drawerRootTheme = Object.entries(theme('components.drawer') || {})
+    .filter(([key]) => !reservedKeys.includes(key))
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+  return {
+    '.drawer': {
+      position: 'relative',
+      zIndex: 500,
+      ...drawerRootTheme,
+
+      // Backdrop
+      '.drawer-backdrop': {
+        backgroundColor: withAlphaValue(theme('colors.neutral.900'), 0.5),
+        ...theme('components.drawer.backdrop'),
+      },
+
+      // Header
+      '.drawer-header': {
+        padding: theme('padding.4'),
+        backgroundColor: theme('colors.white'),
+        borderColor: theme('colors.neutral.200'),
+        borderBottomWidth: theme('borderWidth.DEFAULT'),
+        borderBottomStyle: theme('borderStyle.solid'),
+
+        [`@media (min-width: ${theme('screens.sm')})`]: {
+          padding: theme('padding.6'),
+        },
+
+        ...theme('components.drawer.header'),
+      },
+
+      // Title
+      '.drawer-title': {
+        fontSize: theme('fontSize.2xl'),
+        fontWeight: theme('fontWeight.bold'),
+        color: theme('colors.neutral.900'),
+        ...theme('components.drawer.title'),
+      },
+
+      // Close
+      '.drawer-close': {
+        width: theme('width.6'),
+        height: theme('height.6'),
+        color: theme('colors.neutral.700'),
+
+        '&:hover': {
+          color: theme('colors.neutral.950'),
+        },
+
+        ...theme('components.drawer.close'),
+      },
+
+      // Content
+      '.drawer-content': {
+        padding: theme('padding.4'),
+        backgroundColor: theme('colors.white'),
+
+        [`@media (min-width: ${theme('screens.sm')})`]: {
+          padding: theme('padding.6'),
+        },
+
+        ...theme('components.drawer.content'),
+      },
+
+      // Footer
+      '.drawer-footer': {
+        padding: theme('padding.4'),
+        backgroundColor: theme('colors.neutral.50'),
+        borderColor: theme('colors.neutral.200'),
+        borderTopWidth: theme('borderWidth.DEFAULT'),
+        borderTopStyle: theme('borderStyle.solid'),
+        gap: theme('gap.3'),
+        justifyContent: 'space-between',
+
+        [`@media (min-width: ${theme('screens.sm')})`]: {
+          padding: theme('padding.6'),
+        },
+
+        ...theme('components.drawer.footer'),
+      },
+    },
+  };
+};

package/dist/tailwind/index.js

@@ -1,7 +1,9 @@
 import plugin from 'tailwindcss/plugin';
 
 // Components
+import badge from './components/badge.js';
 import button from './components/button.js';
+import drawer from './components/drawer.js';
 
 /**
  * Tailwind Theme plugin
@@ -14,7 +16,9 @@ import button from './components/button.js';
  * @returns {void}
  */
 export default plugin.withOptions(() => ({ addComponents, theme }) => {
-  addComponents({
-    ...button(theme),
-  });
+  addComponents([
+    badge(theme),
+    button(theme),
+    drawer(theme),
+  ], { respectPrefix: false });
 });