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

package/dist/style.css

@@ -1 +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}}
+.rvc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.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-5{width:1.25rem;height:1.25rem}.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-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;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/alert.js

@@ -0,0 +1,188 @@
+/**
+ * Alert component
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => ({
+  '.alert': {
+    display: 'flex',
+    position: 'relative',
+    width: '100%',
+    overflow: 'hidden',
+    paddingTop: theme('padding.6'),
+    paddingBottom: theme('padding.6'),
+    paddingLeft: theme('padding.6'),
+    paddingRight: theme('padding.6'),
+    borderRadius: theme('borderRadius.md'),
+    borderStyle: 'solid',
+    fontSize: theme('fontSize.base.0'),
+    backgroundColor: theme('colors.blue.50'),
+    color: theme('colors.blue.700'),
+    ...theme('components.alert'),
+
+    a: {
+      textDecoration: 'underline',
+      color: 'inherit',
+      ...theme('components.alert.link'),
+    },
+
+    ul: {
+      listStyleType: 'disc',
+      listStylePosition: 'inside',
+      marginTop: '0',
+      marginBottom: '0',
+      marginLeft: theme('margin.2'),
+      paddingLeft: '0',
+      ...theme('components.alert.list'),
+
+      li: {
+        marginTop: '0',
+        ...theme('components.alert.listitem'),
+      },
+    },
+
+    ol: {
+      listStyleType: 'decimal',
+      listStylePosition: 'inside',
+      marginTop: '0',
+      marginBottom: '0',
+      marginLeft: theme('margin.2'),
+      paddingLeft: '0',
+      ...theme('components.alert.orderedlist'),
+
+      li: {
+        marginTop: '0',
+        ...theme('components.alert.orderedlistitem'),
+      },
+    },
+
+    '.alert-close': {
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+      top: '0',
+      right: '0',
+      padding: theme('padding[1.5]'),
+      borderBottomLeftRadius: theme('borderRadius.md'),
+      backgroundColor: theme('colors.blue.100'),
+      color: theme('colors.blue.400'),
+      transitionProperty: theme('transitionProperty.colors'),
+      transitionDuration: theme('transitionDuration.300'),
+      transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
+      ...theme('components.alert.close'),
+
+      '&:hover': {
+        backgroundColor: theme('colors.blue.200'),
+        color: theme('colors.blue.800'),
+        ...theme('components.alert.close.hover'),
+      },
+    },
+
+    '.alert-icon': {
+      display: 'block',
+      width: theme('width.6'),
+      height: theme('height.6'),
+      marginRight: theme('margin.1'),
+      flexShrink: theme('flexShrink.0'),
+      color: theme('colors.blue.400'),
+      ...theme('components.alert.icon'),
+    },
+
+    '.alert-title': {
+      display: 'block',
+      marginBottom: theme('margin.2'),
+      fontWeight: theme('fontWeight.medium'),
+      color: theme('colors.blue.800'),
+      ...theme('components.alert.title'),
+
+      '&:last-child': {
+        marginBottom: '0',
+        ...theme('components.alert.title.last'),
+      },
+    },
+
+    // Color variants
+    '&.alert-warning': {
+      backgroundColor: theme('colors.yellow.50'),
+      color: theme('colors.yellow.700'),
+      ...theme('components.alert.warning'),
+
+      '.alert-close': {
+        backgroundColor: theme('colors.yellow.100'),
+        color: theme('colors.yellow.400'),
+        ...theme('components.alert.warning.close'),
+
+        '&:hover': {
+          backgroundColor: theme('colors.yellow.200'),
+          color: theme('colors.yellow.800'),
+          ...theme('components.alert.warning.close.hover'),
+        },
+      },
+
+      '.alert-icon': {
+        color: theme('colors.yellow.400'),
+        ...theme('components.alert.warning.icon'),
+      },
+
+      '.alert-title': {
+        color: theme('colors.yellow.800'),
+        ...theme('components.alert.warning.title'),
+      },
+    },
+    '&.alert-success': {
+      backgroundColor: theme('colors.green.50'),
+      color: theme('colors.green.700'),
+      ...theme('components.alert.success'),
+
+      '.alert-close': {
+        backgroundColor: theme('colors.green.100'),
+        color: theme('colors.green.400'),
+        ...theme('components.alert.success.close'),
+
+        '&:hover': {
+          backgroundColor: theme('colors.green.200'),
+          color: theme('colors.green.800'),
+          ...theme('components.alert.success.close.hover'),
+        },
+      },
+
+      '.alert-icon': {
+        color: theme('colors.green.400'),
+        ...theme('components.alert.success.icon'),
+      },
+
+      '.alert-title': {
+        color: theme('colors.green.800'),
+        ...theme('components.alert.success.title'),
+      },
+    },
+    '&.alert-danger': {
+      backgroundColor: theme('colors.red.50'),
+      color: theme('colors.red.700'),
+      ...theme('components.alert.danger'),
+
+      '.alert-close': {
+        backgroundColor: theme('colors.red.100'),
+        color: theme('colors.red.400'),
+        ...theme('components.alert.danger.close'),
+
+        '&:hover': {
+          backgroundColor: theme('colors.red.200'),
+          color: theme('colors.red.800'),
+          ...theme('components.alert.danger.close.hover'),
+        },
+      },
+
+      '.alert-icon': {
+        color: theme('colors.red.400'),
+        ...theme('components.alert.danger.icon'),
+      },
+
+      '.alert-title': {
+        color: theme('colors.red.800'),
+        ...theme('components.alert.danger.title'),
+      },
+    },
+  },
+});

package/dist/tailwind/components/button.js

@@ -71,6 +71,13 @@ export default (theme) => {
         },
       },
 
+      // Icon-only styling
+      '&.button-icon-only': {
+        padding: theme('padding.2'),
+        aspectRatio: '1 / 1',
+        ...theme('components.button.iconOnly'),
+      },
+
       // Reverse icon
       '&.button-reverse': {
         flexDirection: 'row-reverse',
@@ -367,23 +374,6 @@ export default (theme) => {
       ...customColorStyles,
 
       // Size variants
-      '&.button-xs': {
-        paddingTop: theme('padding.1'),
-        paddingRight: theme('padding.2'),
-        paddingBottom: theme('padding.1'),
-        paddingLeft: theme('padding.2'),
-        gap: theme('gap[1.5]'),
-        borderRadius: theme('borderRadius.md'),
-        fontWeight: theme('fontWeight.medium'),
-        fontSize: theme('fontSize.xs.0'),
-        ...theme('components.button.xs'),
-
-        '.button-icon': {
-          width: theme('width.3'),
-          height: theme('height.3'),
-          ...theme('components.button.xs.icon'),
-        },
-      },
       '&.button-sm': {
         paddingTop: theme('padding[1.5]'),
         paddingRight: theme('padding.3'),
@@ -400,22 +390,10 @@ export default (theme) => {
           height: theme('height.4'),
           ...theme('components.button.sm.icon'),
         },
-      },
-      '&.button-lg': {
-        paddingTop: theme('padding[2.5]'),
-        paddingRight: theme('padding.6'),
-        paddingBottom: theme('padding[2.5]'),
-        paddingLeft: theme('padding.6'),
-        gap: theme('gap.4'),
-        borderRadius: theme('borderRadius.2xl'),
-        fontWeight: theme('fontWeight.medium'),
-        fontSize: theme('fontSize.lg.0'),
-        ...theme('components.button.lg'),
 
-        '.button-icon': {
-          width: theme('width.6'),
-          height: theme('height.6'),
-          ...theme('components.button.lg.icon'),
+        '&.button-icon-only': {
+          padding: theme('padding[1.5]'),
+          ...theme('components.button.sm.iconOnly'),
         },
       },
     },

package/dist/tailwind/index.js

@@ -1,6 +1,7 @@
 import plugin from 'tailwindcss/plugin';
 
 // Components
+import alert from './components/alert.js';
 import badge from './components/badge.js';
 import button from './components/button.js';
 import drawer from './components/drawer.js';
@@ -17,6 +18,7 @@ import drawer from './components/drawer.js';
  */
 export default plugin.withOptions(() => ({ addComponents, theme }) => {
   addComponents([
+    alert(theme),
     badge(theme),
     button(theme),
     drawer(theme),