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

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-invisible{visibility:hidden}.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--my-1{margin-top:-.25rem;margin-bottom:-.25rem}.rvc-mx-auto{margin-left:auto;margin-right:auto}.rvc-my-3{margin-top:.75rem;margin-bottom:.75rem}.rvc-my-4{margin-top:1rem;margin-bottom:1rem}.rvc--ml-2{margin-left:-.5rem}.rvc-mb-3{margin-bottom:.75rem}.rvc-mb-4{margin-bottom:1rem}.rvc-mb-6{margin-bottom:1.5rem}.rvc-mb-8{margin-bottom:2rem}.rvc-ml-2{margin-left:.5rem}.rvc-ml-3{margin-left:.75rem}.rvc-mt-3{margin-top:.75rem}.rvc-block{display:block}.rvc-flex{display:flex}.rvc-inline-flex{display:inline-flex}.rvc-table{display:table}.rvc-aspect-square{aspect-ratio:1 / 1}.rvc-size-4{width:1rem;height:1rem}.rvc-size-5{width:1.25rem;height:1.25rem}.rvc-size-6{width:1.5rem;height:1.5rem}.rvc-size-7{width:1.75rem;height:1.75rem}.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-min-h-full{min-height:100%}.rvc-w-fit{width:-moz-fit-content;width:fit-content}.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-3{--tw-translate-x: .75rem;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-6{--tw-translate-x: 1.5rem;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-translate-y-0{--tw-translate-y: 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-y-4{--tw-translate-y: 1rem;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-rotate-180{--tw-rotate: 180deg;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-scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;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-cursor-pointer{cursor:pointer}.rvc-flex-row-reverse{flex-direction:row-reverse}.rvc-flex-col{flex-direction:column}.rvc-flex-col-reverse{flex-direction:column-reverse}.rvc-flex-wrap{flex-wrap:wrap}.rvc-items-start{align-items:flex-start}.rvc-items-center{align-items:center}.rvc-justify-start{justify-content:flex-start}.rvc-justify-center{justify-content:center}.rvc-justify-between{justify-content:space-between}.rvc-gap-1{gap:.25rem}.rvc-gap-3{gap:.75rem}.rvc-gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.rvc-gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.rvc-gap-y-3{row-gap:.75rem}.rvc-overflow-hidden{overflow:hidden}.rvc-overflow-x-auto{overflow-x:auto}.rvc-overflow-y-auto{overflow-y:auto}.rvc-overflow-y-scroll{overflow-y:scroll}.rvc-rounded-full{border-radius:9999px}.rvc-border{border-width:1px}.rvc-border-solid{border-style:solid}.rvc-border-neutral-500{--tw-border-opacity: 1;border-color:rgb(115 115 115 / var(--tw-border-opacity))}.rvc-bg-blue-200{--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.rvc-bg-green-300{--tw-bg-opacity: 1;background-color:rgb(134 239 172 / var(--tw-bg-opacity))}.rvc-bg-red-300{--tw-bg-opacity: 1;background-color:rgb(252 165 165 / var(--tw-bg-opacity))}.rvc-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.rvc-p-1{padding:.25rem}.rvc-p-4{padding:1rem}.rvc-px-12{padding-left:3rem;padding-right:3rem}.rvc-py-48{padding-top:12rem;padding-bottom:12rem}.rvc-pb-4{padding-bottom:1rem}.rvc-pl-10{padding-left:2.5rem}.rvc-text-left{text-align:left}.rvc-text-center{text-align:center}.rvc-text-right{text-align:right}.rvc-text-2xl{font-size:1.5rem;line-height:2rem}.rvc-text-3xl{font-size:1.875rem;line-height:2.25rem}.rvc-text-sm{font-size:.8125rem;line-height:1.25rem}.rvc-font-bold{font-weight:700}.rvc-font-medium{font-weight:500}.rvc-font-normal{font-weight:400}.rvc-font-semibold{font-weight:600}.rvc-text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.rvc-text-green-800{--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity))}.rvc-text-neutral-700{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.rvc-text-neutral-950{--tw-text-opacity: 1;color:rgb(10 10 10 / var(--tw-text-opacity))}.rvc-text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.rvc-text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity))}.rvc-text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.rvc-text-stone-600{--tw-text-opacity: 1;color:rgb(87 83 78 / var(--tw-text-opacity))}.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-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-duration-200{transition-duration:.2s}.rvc-duration-300{transition-duration:.3s}.rvc-duration-500{transition-duration:.5s}.rvc-ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.rvc-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.rvc-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.rvc-peer\/checkbox:focus~.peer-focus\/checkbox\:rvc-focus{outline-style:var(--rvc-base-focus-outline-style);outline-width:var(--rvc-base-focus-outline-offset);outline-offset:var(--rvc-base-focus-outline-width);outline-color:var(--rvc-base-focus-outline-color)}.placeholder\:rvc-text-neutral-300::-moz-placeholder{--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.placeholder\:rvc-text-neutral-300::placeholder{--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.hover\:rvc-underline:hover{text-decoration-line:underline}.rvc-group\/accordion[open] .group-open\/accordion\:rvc-rotate-45{--tw-rotate: 45deg;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-group\/tooltip:hover .group-hover\/tooltip\:rvc-visible{visibility:visible}.rvc-group\/table:hover .group-hover\/table\:rvc-opacity-30{opacity:.3}.rvc-group\/tooltip:hover .group-hover\/tooltip\:rvc-opacity-100{opacity:1}@media (min-width: 640px){.sm\:rvc-max-w-3xl{max-width:48rem}.sm\:rvc-max-w-lg{max-width:32rem}.sm\:rvc-translate-y-0{--tw-translate-y: 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))}.sm\:rvc-scale-100{--tw-scale-x: 1;--tw-scale-y: 1;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))}.sm\:rvc-scale-95{--tw-scale-x: .95;--tw-scale-y: .95;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))}.sm\:rvc-p-0{padding:0}.sm\:rvc-duration-700{transition-duration:.7s}}@media (min-width: 768px){.md\:rvc-col-span-2{grid-column:span 2 / span 2}.md\:rvc-grid{display:grid}.md\:rvc-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:rvc-gap-6{gap:1.5rem}}@media (min-width: 1024px){.lg\:rvc-max-w-6xl{max-width:72rem}}.less-opacity-class .\[\.less-opacity-class_\&\]\:rvc-opacity-50{opacity:.5}

package/dist/tailwind/base/index.js

@@ -0,0 +1,22 @@
+/**
+ * Base styles
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => ({
+  ':root': {
+    '--rvc-base-focus-outline-style': 'dashed',
+    '--rvc-base-focus-outline-offset': '0.09375rem', // 1.5px
+    '--rvc-base-focus-outline-width': '0.09375rem', // 1.5px
+    '--rvc-base-focus-outline-color': theme('colors.indigo.600'),
+
+    ...theme('components.base'),
+  },
+
+  '*:focus, .rvc-focus': {
+    outlineStyle: 'var(--rvc-base-focus-outline-style)',
+    outlineWidth: 'var(--rvc-base-focus-outline-offset)',
+    outlineOffset: 'var(--rvc-base-focus-outline-width)',
+    outlineColor: 'var(--rvc-base-focus-outline-color)',
+  },
+});

package/dist/tailwind/components/accordion.js

@@ -0,0 +1,54 @@
+/**
+ * Accordion component
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => ({
+  ':root': {
+    '--rvc-accordion-border-width': theme('borderWidth.DEFAULT'),
+    '--rvc-accordion-border-style': theme('borderStyle.solid'),
+    '--rvc-accordion-border-color': theme('colors.slate.200'),
+    '--rvc-accordion-padding-y': theme('padding.6'),
+    '--rvc-accordion-font-weight': theme('fontWeight.normal'),
+    '--rvc-accordion-font-size': theme('fontSize.base.0'),
+    '--rvc-accordion-color': theme('colors.slate.600'),
+    '--rvc-accordion-summary-font-weight': theme('fontWeight.medium'),
+    '--rvc-accordion-summary-font-size': theme('fontSize.lg.0'),
+    '--rvc-accordion-summary-color': theme('colors.black'),
+    '--rvc-accordion-summary-hover-decoration': 'underline',
+  },
+
+  '.rvc-accordion': {
+    ...theme('components.accordion'),
+
+    details: {
+      borderTopWidth: 'var(--rvc-accordion-border-width)',
+      borderTopColor: 'var(--rvc-accordion-border-color)',
+    },
+
+    summary: {
+      paddingTop: 'var(--rvc-accordion-padding-y)',
+      paddingBottom: 'var(--rvc-accordion-padding-y)',
+      fontWeight: 'var(--rvc-accordion-summary-font-weight)',
+      fontSize: 'var(--rvc-accordion-summary-font-size)',
+      color: 'var(--rvc-accordion-summary-color)',
+      width: theme('width.full'),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      cursor: 'pointer',
+      userSelect: 'none',
+
+      '&:hover': {
+        textDecoration: 'var(--rvc-accordion-summary-hover-decoration)',
+      },
+    },
+
+    '.rvc-accordion-content': {
+      paddingBottom: 'var(--rvc-accordion-padding-y)',
+      fontWeight: 'var(--rvc-accordion-font-weight)',
+      fontSize: 'var(--rvc-accordion-font-size)',
+      color: 'var(--rvc-accordion-color)',
+    },
+  },
+});

package/dist/tailwind/components/alert.js

@@ -0,0 +1,156 @@
+/**
+ * Alert component
+ *
+ * @param {Object} theme - The global theme object
+ */
+export default (theme) => ({
+  ':root': {
+    // Custom properties
+    '--rvc-alert-padding-x': theme('padding.6'),
+    '--rvc-alert-padding-y': theme('padding.6'),
+    '--rvc-alert-border-radius': theme('borderRadius.md'),
+    '--rvc-alert-font-size': theme('fontSize.base.0'),
+    '--rvc-alert-gap': theme('gap[1.5]'),
+    '--rvc-alert-anchor-decoration': 'underline',
+    '--rvc-alert-icon-size': theme('width.6'),
+    '--rvc-alert-title-font-weight': theme('fontWeight.medium'),
+    '--rvc-alert-transition-property': theme('transitionProperty.colors'),
+    '--rvc-alert-transition-duration': theme('transitionDuration.DEFAULT'),
+    '--rvc-alert-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+
+    // Default color variables
+    '--rvc-alert-bg-color': theme('colors.blue.50'),
+    '--rvc-alert-color': theme('colors.blue.700'),
+    '--rvc-alert-icon-color': theme('colors.blue.400'),
+    '--rvc-alert-icon-hover-color': theme('colors.blue.800'),
+    '--rvc-alert-title-color': theme('colors.blue.800'),
+    '--rvc-alert-close-bg-color': theme('colors.blue.100'),
+    '--rvc-alert-close-hover-bg-color': theme('colors.blue.200'),
+    '--rvc-alert-anchor-color': 'inherit',
+    '--rvc-alert-anchor-hover-color': theme('colors.blue.600'),
+  },
+
+  '.rvc-alert': {
+    gap: 'var(--rvc-alert-gap)',
+    paddingTop: 'var(--rvc-alert-padding-y)',
+    paddingBottom: 'var(--rvc-alert-padding-y)',
+    paddingLeft: 'var(--rvc-alert-padding-x)',
+    paddingRight: 'var(--rvc-alert-padding-x)',
+    borderRadius: 'var(--rvc-alert-border-radius)',
+    fontSize: 'var(--rvc-alert-font-size)',
+    backgroundColor: 'var(--rvc-alert-bg-color)',
+    color: 'var(--rvc-alert-color)',
+    display: 'flex',
+    position: 'relative',
+    overflow: 'hidden',
+    ...theme('components.alert'),
+
+    // Elements
+    a: {
+      textDecoration: 'var(--rvc-alert-anchor-decoration)',
+      transitionProperty: 'var(--rvc-alert-transition-property)',
+      transitionDuration: 'var(--rvc-alert-transition-duration)',
+      transitionTimingFunction: 'var(--rvc-alert-transition-timing-function)',
+      color: 'var(--rvc-alert-anchor-color)',
+
+      '&:hover': {
+        color: 'var(--rvc-alert-anchor-hover-color)',
+      },
+    },
+
+    'ul, ol': {
+      listStylePosition: 'inside',
+      margin: 0,
+      paddingLeft: theme('padding.2'),
+    },
+
+    ul: {
+      listStyleType: 'disc',
+    },
+
+    ol: {
+      listStyleType: 'decimal',
+    },
+
+    '.rvc-alert-close': {
+      backgroundColor: 'var(--rvc-alert-close-bg-color)',
+      color: 'var(--rvc-alert-icon-color)',
+      borderBottomLeftRadius: 'var(--rvc-alert-border-radius)',
+      transitionProperty: 'var(--rvc-alert-transition-property)',
+      transitionDuration: 'var(--rvc-alert-transition-duration)',
+      transitionTimingFunction: 'var(--rvc-alert-transition-timing-function)',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+      top: '0',
+      right: '0',
+      padding: theme('padding[1.5]'),
+
+      '&:hover': {
+        backgroundColor: 'var(--rvc-alert-close-hover-bg-color)',
+        color: 'var(--rvc-alert-icon-hover-color)',
+      },
+    },
+
+    '.rvc-alert-icon': {
+      width: 'var(--rvc-alert-icon-size)',
+      height: 'var(--rvc-alert-icon-size)',
+      color: 'var(--rvc-alert-icon-color)',
+      display: 'block',
+      flexShrink: '0',
+    },
+
+    '.rvc-alert-title': {
+      color: 'var(--rvc-alert-title-color)',
+      fontWeight: 'var(--rvc-alert-title-font-weight)',
+      display: 'block',
+      marginBottom: theme('margin.2'),
+
+      '&:last-child': {
+        marginBottom: '0',
+      },
+    },
+
+    // Color variants
+    '&.rvc-alert-info': {
+      ...theme('components.alert.info'),
+    },
+
+    '&.rvc-alert-warning': {
+      '--rvc-alert-bg-color': theme('colors.yellow.50'),
+      '--rvc-alert-color': theme('colors.yellow.700'),
+      '--rvc-alert-icon-color': theme('colors.yellow.400'),
+      '--rvc-alert-icon-hover-color': theme('colors.yellow.800'),
+      '--rvc-alert-title-color': theme('colors.yellow.800'),
+      '--rvc-alert-close-bg-color': theme('colors.yellow.100'),
+      '--rvc-alert-close-hover-bg-color': theme('colors.yellow.200'),
+      '--rvc-alert-anchor-hover-color': theme('colors.yellow.600'),
+      ...theme('components.alert.warning'),
+    },
+
+    '&.rvc-alert-success': {
+      '--rvc-alert-bg-color': theme('colors.green.50'),
+      '--rvc-alert-color': theme('colors.green.700'),
+      '--rvc-alert-icon-color': theme('colors.green.400'),
+      '--rvc-alert-icon-hover-color': theme('colors.green.800'),
+      '--rvc-alert-title-color': theme('colors.green.800'),
+      '--rvc-alert-close-bg-color': theme('colors.green.100'),
+      '--rvc-alert-close-hover-bg-color': theme('colors.green.200'),
+      '--rvc-alert-anchor-hover-color': theme('colors.green.600'),
+      ...theme('components.alert.success'),
+    },
+
+    '&.rvc-alert-danger': {
+      '--rvc-alert-bg-color': theme('colors.red.50'),
+      '--rvc-alert-color': theme('colors.red.700'),
+      '--rvc-alert-icon-color': theme('colors.red.400'),
+      '--rvc-alert-icon-hover-color': theme('colors.red.800'),
+      '--rvc-alert-title-color': theme('colors.red.800'),
+      '--rvc-alert-close-bg-color': theme('colors.red.100'),
+      '--rvc-alert-close-hover-bg-color': theme('colors.red.200'),
+      '--rvc-alert-anchor-hover-color': theme('colors.red.600'),
+      ...theme('components.alert.danger'),
+    },
+  },
+});

package/dist/tailwind/components/badge.js

@@ -6,218 +6,113 @@
 export default (theme) => {
   const customColors = theme('components.badge.custom') || {};
   const customColorStyles = Object.keys(customColors).reduce((acc, colorName) => {
-    acc[`&.badge-custom-${colorName}`] = {
+    acc[`&.rvc-badge-custom-${colorName}`] = {
       ...customColors[colorName],
     };
     return acc;
   }, {});
 
   return {
-    '.badge': {
+    ':root': {
+      // Custom properties
+      '--rvc-badge-height': theme('height.8'),
+      '--rvc-badge-padding-x': theme('padding.3'),
+      '--rvc-badge-padding-y': theme('padding.1.5'),
+      '--rvc-badge-font-weight': theme('fontWeight.medium'),
+      '--rvc-badge-border-radius': theme('borderRadius.full'),
+      '--rvc-badge-font-size': theme('fontSize.base.0'),
+      '--rvc-badge-gap': theme('gap.1'),
+
+      // Default color variables
+      '--rvc-badge-bg-color': '#fcffc4',
+      '--rvc-badge-color': '#576d07',
+    },
+
+    '.rvc-badge': {
+      height: 'var(--rvc-badge-height)',
+      paddingTop: 'var(--rvc-badge-padding-y)',
+      paddingBottom: 'var(--rvc-badge-padding-y)',
+      paddingLeft: 'var(--rvc-badge-padding-x)',
+      paddingRight: 'var(--rvc-badge-padding-x)',
+      fontWeight: 'var(--rvc-badge-font-weight)',
+      borderRadius: 'var(--rvc-badge-border-radius)',
+      fontSize: 'var(--rvc-badge-font-size)',
+      gap: 'var(--rvc-badge-gap)',
+      backgroundColor: 'var(--rvc-badge-bg-color)',
+      color: 'var(--rvc-badge-color)',
       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'),
-        },
+      '&.rvc-badge-default': {
+        ...theme('components.badge.default'),
       },
-      '&.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'),
-        },
+      '&.rvc-badge-gray': {
+        '--rvc-badge-bg-color': theme('colors.slate.100'),
+        '--rvc-badge-color': theme('colors.slate.700'),
+        ...theme('components.badge.gray'),
       },
-      '&.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'),
-        },
+      '&.rvc-badge-red': {
+        '--rvc-badge-bg-color': theme('colors.red.100'),
+        '--rvc-badge-color': theme('colors.red.700'),
+        ...theme('components.badge.red'),
       },
-      '&.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'),
-        },
+      '&.rvc-badge-yellow': {
+        '--rvc-badge-bg-color': theme('colors.yellow.100'),
+        '--rvc-badge-color': theme('colors.yellow.700'),
+        ...theme('components.badge.yellow'),
       },
-      '&.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'),
-        },
+      '&.rvc-badge-green': {
+        '--rvc-badge-bg-color': theme('colors.green.100'),
+        '--rvc-badge-color': theme('colors.green.700'),
+        ...theme('components.badge.green'),
       },
-      '&.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'),
-        },
+      '&.rvc-badge-blue': {
+        '--rvc-badge-bg-color': theme('colors.blue.100'),
+        '--rvc-badge-color': theme('colors.blue.700'),
+        ...theme('components.badge.blue'),
       },
-      '&.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'),
-        },
+      '&.rvc-badge-violet': {
+        '--rvc-badge-bg-color': theme('colors.violet.100'),
+        '--rvc-badge-color': theme('colors.violet.700'),
+        ...theme('components.badge.violet'),
       },
-      '&.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'),
-        },
+      '&.rvc-badge-purple': {
+        '--rvc-badge-bg-color': theme('colors.purple.100'),
+        '--rvc-badge-color': theme('colors.purple.700'),
+        ...theme('components.badge.purple'),
       },
-      '&.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'),
-        },
+      '&.rvc-badge-pink': {
+        '--rvc-badge-bg-color': theme('colors.pink.100'),
+        '--rvc-badge-color': theme('colors.pink.700'),
+        ...theme('components.badge.pink'),
       },
-      '&.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'),
+      '&.rvc-badge-sm': {
+        '--rvc-badge-height': theme('height.6'),
+        '--rvc-badge-padding-x': theme('padding.2'),
+        '--rvc-badge-padding-y': theme('padding.1'),
+        '--rvc-badge-font-size': theme('fontSize.sm.0'),
+
+        ...theme('components.badge.sm'),
       },
     },
   };