@robuust-digital/vue-components 1.3.2 → 2.0.0-rc.0

package/dist/tailwind/components/button.js

@@ -1,292 +0,0 @@
-/**
- * Button component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => {
-  const customColors = theme('components.button.custom') || {};
-  const customColorStyles = Object.keys(customColors).reduce((acc, colorName) => {
-    acc[`&.rvc-button-custom-${colorName}`] = {
-      ...customColors[colorName],
-    };
-    return acc;
-  }, {});
-
-  return {
-    ':root': {
-      // Custom properties
-      '--rvc-button-border-radius': 'var(--rvc-base-border-radius)',
-      '--rvc-button-transition-duration': 'var(--rvc-base-transition-duration)',
-      '--rvc-button-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
-      '--rvc-button-icon-loading-animation': 'var(--rvc-base-loading-animation)',
-      '--rvc-button-border-width': 'var(--rvc-base-border-width)',
-      '--rvc-button-box-shadow': 'var(--rvc-base-box-shadow)',
-      '--rvc-button-height': theme('height.9'),
-      '--rvc-button-padding-x': theme('padding.3'),
-      '--rvc-button-gap': theme('gap[1.5]'),
-      '--rvc-button-font-weight': theme('fontWeight.semibold'),
-      '--rvc-button-font-size': theme('fontSize.base.0'),
-      '--rvc-button-transition-property': theme('transitionProperty.colors'),
-      '--rvc-button-icon-size': theme('width.5'),
-      '--rvc-button-icon-loading-size': theme('width.4'),
-
-      // Default color variables
-      '--rvc-button-bg-color': '#d9ff00',
-      '--rvc-button-color': '#000',
-      '--rvc-button-bg-color-hover': '#caf400',
-      '--rvc-button-color-hover': '#000',
-      '--rvc-button-border-color': theme('colors.transparent'),
-      '--rvc-button-border-color-hover': theme('colors.transparent'),
-      '--rvc-button-icon-color': theme('colors.slate.500'),
-      '--rvc-button-icon-color-hover': theme('colors.slate.950'),
-    },
-
-    '.rvc-button': {
-      height: 'var(--rvc-button-height)',
-      borderWidth: 'var(--rvc-button-border-width)',
-      borderColor: 'var(--rvc-button-border-color)',
-      transitionProperty: 'var(--rvc-button-transition-property)',
-      transitionDuration: 'var(--rvc-button-transition-duration)',
-      transitionTimingFunction: 'var(--rvc-button-transition-timing-function)',
-      paddingRight: 'var(--rvc-button-padding-x)',
-      paddingLeft: 'var(--rvc-button-padding-x)',
-      gap: 'var(--rvc-button-gap)',
-      borderRadius: 'var(--rvc-button-border-radius)',
-      fontWeight: 'var(--rvc-button-font-weight)',
-      fontSize: 'var(--rvc-button-font-size)',
-      backgroundColor: 'var(--rvc-button-bg-color)',
-      color: 'var(--rvc-button-color)',
-      boxShadow: 'var(--rvc-button-box-shadow)',
-      appearance: 'none',
-      cursor: 'pointer',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      textAlign: 'center',
-      borderStyle: 'solid',
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      ...theme('components.button'),
-
-      // Hover state
-      '&:hover': {
-        backgroundColor: 'var(--rvc-button-bg-color-hover)',
-        color: 'var(--rvc-button-color-hover)',
-        borderColor: 'var(--rvc-button-border-color-hover)',
-        ...theme('components.button[&:hover]'),
-
-        '.rvc-button-icon': {
-          color: 'var(--rvc-button-icon-color-hover)',
-          ...theme('components.button[&:hover][.rvc-button-icon]'),
-        },
-      },
-
-      // Disabled state
-      '&:disabled': {
-        pointerEvents: 'none',
-        opacity: theme('opacity.50'),
-        ...theme('components.button[&:disabled]'),
-      },
-
-      // Icon styling
-      '.rvc-button-icon': {
-        width: 'var(--rvc-button-icon-size)',
-        height: 'var(--rvc-button-icon-size)',
-        color: 'var(--rvc-button-icon-color)',
-        transitionProperty: 'var(--rvc-button-transition-property)',
-        transitionDuration: 'var(--rvc-button-transition-duration)',
-        transitionTimingFunction: 'var(--rvc-button-transition-timing-function)',
-        display: 'block',
-        flexShrink: '0',
-        ...theme('components.button[.rvc-button-icon]'),
-
-        '&.rvc-button-icon-loading': {
-          width: 'var(--rvc-button-icon-loading-size)',
-          height: 'var(--rvc-button-icon-loading-size)',
-          animation: 'var(--rvc-button-icon-loading-animation)',
-          ...theme('components.button[.rvc-button-icon][&.rvc-button-icon-loading]'),
-        },
-      },
-
-      // Icon-only styling
-      '&.rvc-button-icon-only': {
-        padding: 0,
-        aspectRatio: '1 / 1',
-        ...theme('components.button[.rvc-button-icon-only]'),
-      },
-
-      // Reverse icon
-      '&.rvc-button-reverse': {
-        flexDirection: 'row-reverse',
-        ...theme('components.button[.rvc-button-reverse]'),
-      },
-
-      // Color variants
-      '&.rvc-button-primary': {
-        ...theme('components.button.primary'),
-      },
-
-      '&.rvc-button-secondary': {
-        '--rvc-button-bg-color': '#4f46e5',
-        '--rvc-button-color': '#fff',
-        '--rvc-button-bg-color-hover': '#6366f1',
-        '--rvc-button-color-hover': '#fff',
-        '--rvc-button-icon-color': theme('colors.slate.300'),
-        '--rvc-button-icon-color-hover': '#fff',
-        ...theme('components.button.secondary'),
-      },
-
-      '&.rvc-button-tertiary': {
-        '--rvc-button-bg-color': '#475569',
-        '--rvc-button-color': '#fff',
-        '--rvc-button-bg-color-hover': '#64748b',
-        '--rvc-button-color-hover': '#fff',
-        '--rvc-button-icon-color': theme('colors.slate.300'),
-        '--rvc-button-icon-color-hover': '#fff',
-        ...theme('components.button.tertiary'),
-      },
-
-      '&.rvc-button-light': {
-        '--rvc-button-bg-color': theme('colors.white'),
-        '--rvc-button-color': theme('colors.black'),
-        '--rvc-button-bg-color-hover': theme('colors.slate.50'),
-        '--rvc-button-color-hover': theme('colors.black'),
-        '--rvc-button-border-color': theme('colors.slate.200'),
-        '--rvc-button-border-color-hover': theme('colors.slate.200'),
-        ...theme('components.button.light'),
-      },
-
-      '&.rvc-button-dark': {
-        '--rvc-button-bg-color': theme('colors.slate.950'),
-        '--rvc-button-color': theme('colors.white'),
-        '--rvc-button-bg-color-hover': theme('colors.slate.800'),
-        '--rvc-button-color-hover': theme('colors.white'),
-        '--rvc-button-icon-color': theme('colors.slate.300'),
-        '--rvc-button-icon-color-hover': theme('colors.white'),
-        ...theme('components.button.dark'),
-      },
-
-      '&.rvc-button-red': {
-        '--rvc-button-bg-color': theme('colors.red.600'),
-        '--rvc-button-color': theme('colors.white'),
-        '--rvc-button-bg-color-hover': theme('colors.red.500'),
-        '--rvc-button-color-hover': theme('colors.white'),
-        '--rvc-button-icon-color': theme('colors.slate.300'),
-        '--rvc-button-icon-color-hover': theme('colors.white'),
-        ...theme('components.button.red'),
-      },
-
-      '&.rvc-button-red-soft': {
-        '--rvc-button-bg-color': theme('colors.red.50'),
-        '--rvc-button-color': theme('colors.red.700'),
-        '--rvc-button-bg-color-hover': theme('colors.red.200'),
-        '--rvc-button-color-hover': theme('colors.red.700'),
-        '--rvc-button-border-color': theme('colors.red.200'),
-        '--rvc-button-border-color-hover': theme('colors.red.200'),
-        '--rvc-button-icon-color': theme('colors.red.500'),
-        '--rvc-button-icon-color-hover': theme('colors.red.700'),
-        ...theme('components.button.red-soft'),
-      },
-
-      '&.rvc-button-yellow': {
-        '--rvc-button-bg-color': theme('colors.yellow.300'),
-        '--rvc-button-color': theme('colors.slate.950'),
-        '--rvc-button-bg-color-hover': theme('colors.yellow.400'),
-        '--rvc-button-color-hover': theme('colors.slate.950'),
-        ...theme('components.button.yellow'),
-      },
-
-      '&.rvc-button-yellow-soft': {
-        '--rvc-button-bg-color': theme('colors.yellow.50'),
-        '--rvc-button-color': theme('colors.yellow.700'),
-        '--rvc-button-bg-color-hover': theme('colors.yellow.200'),
-        '--rvc-button-color-hover': theme('colors.yellow.700'),
-        '--rvc-button-border-color': theme('colors.yellow.200'),
-        '--rvc-button-border-color-hover': theme('colors.yellow.200'),
-        '--rvc-button-icon-color': theme('colors.yellow.500'),
-        '--rvc-button-icon-color-hover': theme('colors.yellow.700'),
-        ...theme('components.button.yellow-soft'),
-      },
-
-      '&.rvc-button-green': {
-        '--rvc-button-bg-color': theme('colors.green.600'),
-        '--rvc-button-color': theme('colors.white'),
-        '--rvc-button-bg-color-hover': theme('colors.green.500'),
-        '--rvc-button-color-hover': theme('colors.white'),
-        '--rvc-button-icon-color': theme('colors.slate.300'),
-        '--rvc-button-icon-color-hover': theme('colors.white'),
-        ...theme('components.button.green'),
-      },
-
-      '&.rvc-button-green-soft': {
-        '--rvc-button-bg-color': theme('colors.green.50'),
-        '--rvc-button-color': theme('colors.green.700'),
-        '--rvc-button-bg-color-hover': theme('colors.green.200'),
-        '--rvc-button-color-hover': theme('colors.green.700'),
-        '--rvc-button-border-color': theme('colors.green.200'),
-        '--rvc-button-border-color-hover': theme('colors.green.200'),
-        '--rvc-button-icon-color': theme('colors.green.500'),
-        '--rvc-button-icon-color-hover': theme('colors.green.700'),
-        ...theme('components.button.green-soft'),
-      },
-
-      '&.rvc-button-blue': {
-        '--rvc-button-bg-color': theme('colors.blue.600'),
-        '--rvc-button-color': theme('colors.white'),
-        '--rvc-button-bg-color-hover': theme('colors.blue.500'),
-        '--rvc-button-color-hover': theme('colors.white'),
-        '--rvc-button-icon-color': theme('colors.slate.300'),
-        '--rvc-button-icon-color-hover': theme('colors.white'),
-        ...theme('components.button.blue'),
-      },
-
-      '&.rvc-button-blue-soft': {
-        '--rvc-button-bg-color': theme('colors.blue.50'),
-        '--rvc-button-color': theme('colors.blue.700'),
-        '--rvc-button-bg-color-hover': theme('colors.blue.200'),
-        '--rvc-button-color-hover': theme('colors.blue.700'),
-        '--rvc-button-border-color': theme('colors.blue.200'),
-        '--rvc-button-border-color-hover': theme('colors.blue.200'),
-        '--rvc-button-icon-color': theme('colors.blue.500'),
-        '--rvc-button-icon-color-hover': theme('colors.blue.700'),
-        ...theme('components.button.blue-soft'),
-      },
-
-      '&.rvc-button-clear': {
-        '--rvc-button-bg-color': theme('colors.transparent'),
-        '--rvc-button-color': theme('colors.indigo.600'),
-        '--rvc-button-bg-color-hover': theme('colors.transparent'),
-        '--rvc-button-color-hover': theme('colors.indigo.700'),
-        '--rvc-button-icon-color': theme('colors.indigo.600'),
-        '--rvc-button-icon-color-hover': theme('colors.indigo.700'),
-
-        paddingLeft: '0',
-        paddingRight: '0',
-        boxShadow: 'none',
-        ...theme('components.button.clear'),
-
-        '&:hover': {
-          textDecoration: 'underline',
-          ...theme('components.button.clear[&:hover]'),
-        },
-      },
-
-      ...customColorStyles,
-
-      // Size variants
-      '&.rvc-button-sm': {
-        '--rvc-button-height': '1.875rem',
-        '--rvc-button-padding-x': theme('padding[2.5]'),
-        '--rvc-button-font-size': theme('fontSize.sm.0'),
-        '--rvc-button-icon-size': theme('width.4'),
-        '--rvc-button-icon-loading-size': theme('width.3'),
-        ...theme('components.button.sm'),
-
-        '&.rvc-button-icon-only': {
-          padding: 0,
-          ...theme('components.button.sm[&.rvc-button-icon-only]'),
-        },
-      },
-    },
-  };
-};

package/dist/tailwind/components/checkbox.js

@@ -1,70 +0,0 @@
-/**
- * Checkbox component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-checkbox-input-box-shadow': 'var(--rvc-base-box-shadow)',
-    '--rvc-checkbox-input-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-checkbox-gap': theme('gap.2'),
-    '--rvc-checkbox-font-size': theme('fontSize.base.0'),
-    '--rvc-checkbox-font-weight': theme('fontWeight.medium'),
-    '--rvc-checkbox-color': theme('colors.slate.950'),
-    '--rvc-checkbox-input-size': theme('width.4'),
-    '--rvc-checkbox-input-border-radius': theme('borderRadius.DEFAULT'),
-    '--rvc-checkbox-input-border-width': theme('borderWidth.DEFAULT'),
-    '--rvc-checkbox-input-checked-bg-color': theme('colors.indigo.600'),
-    '--rvc-checkbox-input-checked-border-color': theme('colors.indigo.600'),
-    '--rvc-checkbox-input-checked-icon-color': theme('colors.white'),
-  },
-
-  '.rvc-checkbox': {
-    gap: 'var(--rvc-checkbox-gap)',
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'flex-start',
-    cursor: 'pointer',
-    ...theme('components.checkbox'),
-
-    label: {
-      fontSize: 'var(--rvc-checkbox-font-size)',
-      fontWeight: 'var(--rvc-checkbox-font-weight)',
-      color: 'var(--rvc-checkbox-color)',
-      display: 'block',
-      ...theme('components.checkbox.label'),
-    },
-
-    '.rvc-checkbox-input': {
-      width: 'var(--rvc-checkbox-input-size)',
-      height: 'var(--rvc-checkbox-input-size)',
-      borderRadius: 'var(--rvc-checkbox-input-border-radius)',
-      borderWidth: 'var(--rvc-checkbox-input-border-width)',
-      borderColor: 'var(--rvc-checkbox-input-border-color)',
-      boxShadow: 'var(--rvc-checkbox-input-box-shadow)',
-      marginTop: theme('margin[0.5]'),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      ...theme('components.checkbox[.rvc-checkbox-input]'),
-
-      svg: {
-        width: '100%',
-        height: '100%',
-        color: theme('colors.transparent'),
-        ...theme('components.checkbox[.rvc-checkbox-input][svg]'),
-      },
-    },
-
-    'input:checked + .rvc-checkbox-input': {
-      backgroundColor: 'var(--rvc-checkbox-input-checked-bg-color)',
-      borderColor: 'var(--rvc-checkbox-input-checked-border-color)',
-      ...theme('components.checkbox[input:checked+.rvc-checkbox-input]'),
-
-      svg: {
-        color: 'var(--rvc-checkbox-input-checked-icon-color)',
-        ...theme('components.checkbox[input:checked+.rvc-checkbox-input][svg]'),
-      },
-    },
-  },
-});

package/dist/tailwind/components/combobox.js

@@ -1,226 +0,0 @@
-/**
- * Combobox component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-combobox-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-combobox-border-width': 'var(--rvc-base-border-width)',
-    '--rvc-combobox-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-combobox-font-size': 'var(--rvc-base-input-font-size)',
-    '--rvc-combobox-font-weight': 'var(--rvc-base-input-font-weight)',
-    '--rvc-combobox-box-shadow': 'var(--rvc-base-box-shadow)',
-    '--rvc-combobox-color': 'var(--rvc-base-input-color)',
-    '--rvc-combobox-bg-color': 'var(--rvc-base-input-bg-color)',
-    '--rvc-combobox-padding-x': 'var(--rvc-base-input-padding-x)',
-    '--rvc-combobox-height': 'var(--rvc-base-input-height)',
-    '--rvc-combobox-icon-size': 'var(--rvc-base-input-icon-size)',
-    '--rvc-combobox-icon-color': 'var(--rvc-base-input-icon-color)',
-    '--rvc-combobox-icon-loading-animation': 'var(--rvc-base-loading-animation)',
-    '--rvc-combobox-placeholder-color': 'var(--rvc-base-input-placeholder-color)',
-    '--rvc-combobox-clear-color': 'var(--rvc-base-input-icon-color)',
-    '--rvc-combobox-clear-color-hover': theme('colors.slate.700'),
-    '--rvc-combobox-chip-icon-size': theme('width.4'),
-    '--rvc-combobox-chip-color': 'var(--rvc-base-input-color)',
-    '--rvc-combobox-chip-color-hover': theme('colors.slate.700'),
-    '--rvc-combobox-chips-spacing': theme('margin.2'),
-    '--rvc-combobox-options-offset': theme('margin.1'),
-    '--rvc-combobox-options-z-index': theme('zIndex.10'),
-    '--rvc-combobox-options-max-height': theme('maxHeight.60'),
-    '--rvc-combobox-options-padding-x': '0.1875rem',
-    '--rvc-combobox-options-padding-y': '0.1875rem',
-    '--rvc-combobox-option-padding-x': theme('padding.2'),
-    '--rvc-combobox-option-padding-y': theme('padding[1.5]'),
-    '--rvc-combobox-option-bg-color-hover': theme('colors.slate.100'),
-    '--rvc-combobox-option-bg-color-active': 'transparent',
-    '--rvc-combobox-option-color-active': 'var(--rvc-base-input-color)',
-    '--rvc-combobox-option-font-weight-active': theme('fontWeight.semibold'),
-  },
-
-  '.rvc-combobox': {
-    display: 'block',
-    ...theme('components.combobox'),
-
-    '.rvc-combobox-wrapper': {
-      display: 'grid',
-      gridTemplateColumns: theme('gridTemplateColumns.1'),
-      position: 'relative',
-      width: '100%',
-      ...theme('components.combobox[.rvc-combobox-wrapper]'),
-
-      // Extra right padding
-      '&:has(.rvc-combobox-button svg) input': {
-        paddingRight: 'calc(var(--rvc-combobox-padding-x) + var(--rvc-combobox-icon-size) + 0.25rem)',
-      },
-
-      '> svg': {
-        marginLeft: 'var(--rvc-combobox-padding-x)',
-        justifySelf: 'start',
-        ...theme('components.combobox[.rvc-combobox-wrapper > svg]'),
-      },
-    },
-
-    input: {
-      borderRadius: 'var(--rvc-combobox-border-radius)',
-      borderWidth: 'var(--rvc-combobox-border-width)',
-      borderColor: 'var(--rvc-combobox-border-color)',
-      paddingRight: 'var(--rvc-combobox-padding-x)',
-      paddingLeft: 'var(--rvc-combobox-padding-x)',
-      backgroundColor: 'var(--rvc-combobox-bg-color)',
-      fontSize: 'var(--rvc-combobox-font-size)',
-      fontWeight: 'var(--rvc-combobox-font-weight)',
-      color: 'var(--rvc-combobox-color)',
-      boxShadow: 'var(--rvc-combobox-box-shadow)',
-      height: 'var(--rvc-combobox-height)',
-      backgroundImage: 'none',
-      width: '100%',
-      position: 'relative',
-      gridColumnStart: '1',
-      gridRowStart: '1',
-      appearance: 'none',
-      outlineWidth: 0,
-      ...theme('components.combobox.input'),
-
-      // Extra left padding
-      '&:nth-child(2)': {
-        paddingLeft: 'calc(var(--rvc-combobox-padding-x) + var(--rvc-combobox-icon-size) + 0.25rem)',
-      },
-
-      '&::placeholder': {
-        color: 'var(--rvc-combobox-placeholder-color)',
-        ...theme('components.combobox.input[&::placeholder]'),
-      },
-    },
-
-    '.rvc-combobox-button, .rvc-combobox-wrapper > svg': {
-      color: 'var(--rvc-combobox-icon-color)',
-      position: 'relative',
-      gridColumnStart: '1',
-      gridRowStart: '1',
-      alignSelf: 'center',
-      zIndex: '1',
-    },
-
-    '.rvc-combobox-button': {
-      justifySelf: 'end',
-      marginRight: 'var(--rvc-combobox-padding-x)',
-      ...theme('components.combobox[.rvc-combobox-button]'),
-    },
-
-    svg: {
-      pointerEvents: 'none',
-
-      '&:not([class]), &.rvc-combobox-spinner': {
-        width: 'var(--rvc-combobox-icon-size)',
-        height: 'var(--rvc-combobox-icon-size)',
-        color: 'var(--rvc-select-icon-color)',
-        ...theme('components.combobox.svg'),
-      },
-    },
-
-    '.rvc-combobox-spinner': {
-      animation: 'var(--rvc-combobox-icon-loading-animation)',
-      ...theme('components.combobox[.rvc-combobox-spinner]'),
-    },
-
-    '.rvc-combobox-clear': {
-      ...theme('components.combobox[.rvc-combobox-clear]'),
-
-      '> *': {
-        color: 'var(--rvc-combobox-clear-color)',
-      },
-
-      '&:hover > *': {
-        color: 'var(--rvc-combobox-clear-color-hover)',
-      },
-    },
-
-    '.rvc-combobox-chips': {
-      marginTop: 'var(--rvc-combobox-chips-spacing)',
-      display: 'flex',
-      flexWrap: 'wrap',
-      gap: 'var(--rvc-combobox-chips-spacing)',
-      ...theme('components.combobox[.rvc-combobox-chips]'),
-    },
-
-    '.rvc-combobox-chip': {
-      color: 'var(--rvc-combobox-chip-color)',
-      ...theme('components.combobox[.rvc-combobox-chip]'),
-
-      svg: {
-        width: 'var(--rvc-combobox-chip-icon-size)',
-        height: 'var(--rvc-combobox-chip-icon-size)',
-        ...theme('components.combobox[.rvc-combobox-chip][svg]'),
-      },
-
-      '&:hover svg': {
-        color: 'var(--rvc-combobox-chip-color-hover)',
-        ...theme('components.combobox[.rvc-combobox-chip][&:hover][svg]'),
-      },
-    },
-
-    '.rvc-combobox-options': {
-      paddingTop: 'var(--rvc-combobox-options-padding-y)',
-      paddingRight: 'var(--rvc-combobox-options-padding-x)',
-      paddingBottom: 'var(--rvc-combobox-options-padding-y)',
-      paddingLeft: 'var(--rvc-combobox-options-padding-x)',
-      top: 'calc(var(--rvc-combobox-height) + var(--rvc-combobox-options-offset))',
-      borderRadius: 'var(--rvc-combobox-border-radius)',
-      borderWidth: 'var(--rvc-combobox-border-width)',
-      borderColor: 'var(--rvc-combobox-border-color)',
-      backgroundColor: 'var(--rvc-combobox-bg-color)',
-      fontSize: 'var(--rvc-combobox-font-size)',
-      color: 'var(--rvc-combobox-color)',
-      boxShadow: 'var(--rvc-combobox-box-shadow)',
-      marginTop: 'var(--rvc-combobox-options-offset)',
-      zIndex: 'var(--rvc-combobox-options-z-index)',
-      maxHeight: 'var(--rvc-combobox-options-max-height)',
-      position: 'absolute',
-      width: '100%',
-      overflowY: 'auto',
-      ...theme('components.combobox[.rvc-combobox-options]'),
-    },
-
-    '.rvc-combobox-option': {
-      paddingTop: 'var(--rvc-combobox-option-padding-y)',
-      paddingRight: 'var(--rvc-combobox-option-padding-x)',
-      paddingBottom: 'var(--rvc-combobox-option-padding-y)',
-      paddingLeft: 'var(--rvc-combobox-option-padding-x)',
-      borderRadius: 'var(--rvc-combobox-border-radius)',
-      color: 'var(--rvc-combobox-color)',
-      gap: theme('gap.2'),
-      alignItems: 'center',
-      position: 'relative',
-      display: 'flex',
-      userSelect: 'none',
-      cursor: 'pointer',
-      ...theme('components.combobox[.rvc-combobox-option]'),
-
-      '&.rvc-combobox-option-hover': {
-        backgroundColor: 'var(--rvc-combobox-option-bg-color-hover)',
-        ...theme('components.combobox[.rvc-combobox-option][&.rvc-combobox-option-hover]'),
-      },
-
-      '&.rvc-combobox-option-active': {
-        backgroundColor: 'var(--rvc-combobox-option-bg-color-active)',
-        color: 'var(--rvc-combobox-option-color-active)',
-        fontWeight: 'var(--rvc-combobox-option-font-weight-active)',
-        ...theme('components.combobox[.rvc-combobox-option][&.rvc-combobox-option-active]'),
-
-        '&.rvc-combobox-option-hover': {
-          backgroundColor: 'var(--rvc-combobox-option-bg-color-hover)',
-        },
-      },
-    },
-
-    // Size variants
-    '&.rvc-combobox-sm': {
-      '--rvc-combobox-font-size': 'calc(var(--rvc-base-input-font-size) * 0.9)',
-      '--rvc-combobox-padding-x': 'calc(var(--rvc-base-input-padding-x) * 0.85)',
-      '--rvc-combobox-icon-size': 'calc(var(--rvc-base-input-icon-size) * 0.85)',
-      '--rvc-combobox-height': '1.875rem',
-      ...theme('components.combobox.sm'),
-    },
-  },
-});