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

package/dist/tailwind/components/drawer.js

@@ -1,104 +0,0 @@
-/**
- * Drawer component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-drawer-backdrop-bg-color': 'var(--rvc-dialog-backdrop-bg-color)',
-    '--rvc-drawer-padding-x': 'var(--rvc-dialog-padding-x)',
-    '--rvc-drawer-padding-y': 'var(--rvc-dialog-padding-y)',
-    '--rvc-drawer-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-drawer-border-width': 'var(--rvc-base-border-width)',
-    '--rvc-drawer-border-style': 'var(--rvc-base-border-style)',
-    '--rvc-drawer-header-bg-color': 'var(--rvc-dialog-header-bg-color)',
-    '--rvc-drawer-title-font-size': 'var(--rvc-dialog-title-font-size)',
-    '--rvc-drawer-title-font-weight': 'var(--rvc-dialog-title-font-weight)',
-    '--rvc-drawer-title-font-family': 'var(--rvc-dialog-title-font-family)',
-    '--rvc-drawer-title-color': 'var(--rvc-dialog-title-color)',
-    '--rvc-drawer-close-size': 'var(--rvc-dialog-close-size)',
-    '--rvc-drawer-close-color': 'var(--rvc-dialog-close-color)',
-    '--rvc-drawer-close-color-hover': 'var(--rvc-dialog-close-color-hover)',
-    '--rvc-drawer-content-bg-color': 'var(--rvc-dialog-content-bg-color)',
-    '--rvc-drawer-footer-bg-color': 'var(--rvc-dialog-footer-bg-color)',
-    '--rvc-drawer-footer-gap': 'var(--rvc-dialog-footer-gap)',
-    '--rvc-drawer-footer-justify-content': 'space-between',
-  },
-
-  '.rvc-drawer': {
-    zIndex: 500,
-    position: 'relative',
-    ...theme('components.drawer'),
-
-    // Backdrop
-    '.rvc-drawer-backdrop': {
-      backgroundColor: 'var(--rvc-drawer-backdrop-bg-color)',
-      ...theme('components.drawer[.rvc-drawer-backdrop]'),
-    },
-
-    // Header
-    '.rvc-drawer-header': {
-      paddingTop: 'var(--rvc-drawer-padding-y)',
-      paddingRight: 'var(--rvc-drawer-padding-x)',
-      paddingBottom: 'var(--rvc-drawer-padding-y)',
-      paddingLeft: 'var(--rvc-drawer-padding-x)',
-      borderColor: 'var(--rvc-drawer-border-color)',
-      borderBottomWidth: 'var(--rvc-drawer-border-width)',
-      borderBottomStyle: 'var(--rvc-drawer-border-style)',
-      backgroundColor: 'var(--rvc-drawer-header-bg-color)',
-      ...theme('components.drawer[.rvc-drawer-header]'),
-    },
-
-    // Title
-    '.rvc-drawer-title': {
-      fontSize: 'var(--rvc-drawer-title-font-size)',
-      fontWeight: 'var(--rvc-drawer-title-font-weight)',
-      color: 'var(--rvc-drawer-title-color)',
-      fontFamily: 'var(--rvc-drawer-title-font-family)',
-      ...theme('components.drawer[.rvc-drawer-title]'),
-    },
-
-    // Close
-    '.rvc-drawer-close': {
-      width: 'var(--rvc-drawer-close-size)',
-      height: 'var(--rvc-drawer-close-size)',
-      color: 'var(--rvc-drawer-close-color)',
-      ...theme('components.drawer[.rvc-drawer-close]'),
-
-      '&:hover': {
-        color: 'var(--rvc-drawer-close-color-hover)',
-        ...theme('components.drawer[.rvc-drawer-close][&:hover]'),
-      },
-    },
-
-    // Content
-    '.rvc-drawer-content': {
-      paddingTop: 'var(--rvc-drawer-padding-y)',
-      paddingRight: 'var(--rvc-drawer-padding-x)',
-      paddingBottom: 'var(--rvc-drawer-padding-y)',
-      paddingLeft: 'var(--rvc-drawer-padding-x)',
-      backgroundColor: 'var(--rvc-drawer-content-bg-color)',
-      ...theme('components.drawer[.rvc-drawer-content]'),
-    },
-
-    // Footer
-    '.rvc-drawer-footer': {
-      paddingTop: 'var(--rvc-drawer-padding-y)',
-      paddingRight: 'var(--rvc-drawer-padding-x)',
-      paddingBottom: 'var(--rvc-drawer-padding-y)',
-      paddingLeft: 'var(--rvc-drawer-padding-x)',
-      borderColor: 'var(--rvc-drawer-border-color)',
-      borderTopWidth: 'var(--rvc-drawer-border-width)',
-      borderTopStyle: 'var(--rvc-drawer-border-style)',
-      backgroundColor: 'var(--rvc-drawer-footer-bg-color)',
-      gap: 'var(--rvc-drawer-footer-gap)',
-      justifyContent: 'var(--rvc-drawer-footer-justify-content)',
-      ...theme('components.drawer[.rvc-drawer-footer]'),
-    },
-
-    // Larger screens
-    [`@media (min-width: ${theme('screens.sm')})`]: {
-      ...theme('components.drawer[screen-sm]'),
-    },
-  },
-});

package/dist/tailwind/components/dropdown.js

@@ -1,97 +0,0 @@
-/**
- * Dropdown component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-dropdown-bg-color': 'var(--rvc-base-input-bg-color)',
-    '--rvc-dropdown-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-dropdown-border-width': 'var(--rvc-base-border-width)',
-    '--rvc-dropdown-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-dropdown-icon-size': 'var(--rvc-base-input-icon-size)',
-    '--rvc-dropdown-icon-color': 'var(--rvc-base-input-icon-color)',
-    '--rvc-dropdown-icon-color-hover': 'var(--rvc-base-input-icon-color)',
-    '--rvc-dropdown-item-color': 'var(--rvc-base-input-color)',
-    '--rvc-dropdown-font-size': 'var(--rvc-base-font-size)',
-    '--rvc-dropdown-width': theme('width.56'),
-    '--rvc-dropdown-padding-x': theme('padding.6'),
-    '--rvc-dropdown-padding-y': theme('padding.6'),
-    '--rvc-dropdown-gap': theme('gap.2'),
-    '--rvc-dropdown-z-index': theme('zIndex.50'),
-    '--rvc-dropdown-item-gap': theme('gap.3'),
-    '--rvc-dropdown-item-border-radius': theme('borderRadius.none'),
-    '--rvc-dropdown-item-bg-color': 'transparent',
-    '--rvc-dropdown-item-bg-color-hover': 'transparent',
-    '--rvc-dropdown-item-color-hover': theme('colors.slate.600'),
-    '--rvc-dropdown-item-padding-x': theme('padding.0'),
-    '--rvc-dropdown-item-padding-y': theme('padding.0'),
-  },
-
-  '.rvc-dropdown': {
-    width: 'var(--rvc-dropdown-width)',
-    backgroundColor: 'var(--rvc-dropdown-bg-color)',
-    borderRadius: 'var(--rvc-dropdown-border-radius)',
-    borderWidth: 'var(--rvc-dropdown-border-width)',
-    borderColor: 'var(--rvc-dropdown-border-color)',
-    paddingRight: 'var(--rvc-dropdown-padding-x)',
-    paddingLeft: 'var(--rvc-dropdown-padding-x)',
-    paddingTop: 'var(--rvc-dropdown-padding-y)',
-    paddingBottom: 'var(--rvc-dropdown-padding-y)',
-    fontSize: 'var(--rvc-dropdown-font-size)',
-    gap: 'var(--rvc-dropdown-gap)',
-    zIndex: 'var(--rvc-dropdown-z-index)',
-    marginTop: theme('margin.1'),
-    position: 'absolute',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    right: '0',
-    ...theme('components.dropdown'),
-
-    '&.rvc-dropdown-left': {
-      left: '0',
-      right: 'auto',
-    },
-
-    '&.rvc-dropdown-full': {
-      left: '0',
-      right: '0',
-      width: '100%',
-    },
-
-    '.rvc-dropdown-item': {
-      color: 'var(--rvc-dropdown-item-color)',
-      backgroundColor: 'var(--rvc-dropdown-item-bg-color)',
-      gap: 'var(--rvc-dropdown-item-gap)',
-      paddingRight: 'var(--rvc-dropdown-item-padding-x)',
-      paddingLeft: 'var(--rvc-dropdown-item-padding-x)',
-      paddingTop: 'var(--rvc-dropdown-item-padding-y)',
-      paddingBottom: 'var(--rvc-dropdown-item-padding-y)',
-      borderRadius: 'var(--rvc-dropdown-item-border-radius)',
-      display: 'flex',
-      alignItems: 'center',
-      width: '100%',
-      ...theme('components.dropdown[.rvc-dropdown-item]'),
-
-      '&:hover': {
-        color: 'var(--rvc-dropdown-item-color-hover)',
-        backgroundColor: 'var(--rvc-dropdown-item-bg-color-hover)',
-        textDecoration: 'underline',
-        ...theme('components.dropdown[.rvc-dropdown-item][&:hover]'),
-
-        '.rvc-dropdown-item-icon': {
-          color: 'var(--rvc-dropdown-icon-color-hover)',
-          ...theme('components.dropdown[.rvc-dropdown-item][&:hover][.rvc-dropdown-item-icon]'),
-        },
-      },
-
-      '.rvc-dropdown-item-icon': {
-        width: 'var(--rvc-dropdown-icon-size)',
-        height: 'var(--rvc-dropdown-icon-size)',
-        color: 'var(--rvc-dropdown-icon-color)',
-        ...theme('components.dropdown[.rvc-dropdown-item][.rvc-dropdown-item-icon]'),
-      },
-    },
-  },
-});

package/dist/tailwind/components/empty-state.js

@@ -1,69 +0,0 @@
-/**
- * Empty State component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-empty-state-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-empty-state-color': theme('colors.slate.700'),
-    '--rvc-empty-state-bg-color': theme('colors.slate.50'),
-    '--rvc-empty-state-padding-x': theme('padding.12'),
-    '--rvc-empty-state-padding-y': theme('padding.12'),
-    '--rvc-empty-state-title-color': theme('colors.slate.900'),
-    '--rvc-empty-state-title-fontweight': theme('fontWeight.medium'),
-    '--rvc-empty-state-icon-size': theme('width.10'),
-    '--rvc-empty-state-anchor-color': theme('colors.indigo.600'),
-    '--rvc-empty-state-anchor-hover-color': theme('colors.indigo.800'),
-    '--rvc-empty-state-anchor-decoration': 'underline',
-  },
-
-  '.rvc-empty-state': {
-    color: 'var(--rvc-empty-state-color)',
-    ...theme('components.emptyState-state'),
-
-    '&.rvc-empty-state-bg': {
-      backgroundColor: 'var(--rvc-empty-state-bg-color)',
-      paddingTop: 'var(--rvc-empty-state-padding-y)',
-      paddingBottom: 'var(--rvc-empty-state-padding-y)',
-      paddingLeft: 'var(--rvc-empty-state-padding-x)',
-      paddingRight: 'var(--rvc-empty-state-padding-x)',
-      borderRadius: 'var(--rvc-empty-state-border-radius)',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      ...theme('components.emptyState[.rvc-empty-state-bg]'),
-    },
-
-    a: {
-      textDecoration: 'var(--rvc-empty-state-anchor-decoration)',
-      color: 'var(--rvc-empty-state-anchor-color)',
-      ...theme('components.emptyState.a'),
-
-      '&:hover': {
-        color: 'var(--rvc-empty-state-anchor-hover-color)',
-        ...theme('components.emptyState.a[&:hover]'),
-      },
-    },
-
-    '.rvc-button': {
-      marginTop: theme('margin.4'),
-      ...theme('components.emptyState[.rvc-button]'),
-    },
-
-    '.rvc-empty-state-title': {
-      color: 'var(--rvc-empty-state-title-color)',
-      fontWeight: 'var(--rvc-empty-state-title-fontweight)',
-      marginBottom: theme('margin.2'),
-      display: 'block',
-      ...theme('components.emptyState[.rvc-empty-state-title]'),
-    },
-
-    '.rvc-empty-state-icon': {
-      width: 'var(--rvc-empty-state-icon-size)',
-      height: 'var(--rvc-empty-state-icon-size)',
-      marginBottom: theme('margin.2'),
-      ...theme('components.emptyState[.rvc-empty-state-icon]'),
-    },
-  },
-});

package/dist/tailwind/components/input.js

@@ -1,101 +0,0 @@
-/**
- * Input component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-input-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-input-border-width': 'var(--rvc-base-border-width)',
-    '--rvc-input-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-input-font-size': 'var(--rvc-base-input-font-size)',
-    '--rvc-input-font-weight': 'var(--rvc-base-input-font-weight)',
-    '--rvc-input-box-shadow': 'var(--rvc-base-box-shadow)',
-    '--rvc-input-color': 'var(--rvc-base-input-color)',
-    '--rvc-input-bg-color': 'var(--rvc-base-input-bg-color)',
-    '--rvc-input-icon-size': 'var(--rvc-base-input-icon-size)',
-    '--rvc-input-icon-color': 'var(--rvc-base-input-icon-color)',
-    '--rvc-input-padding-x': 'var(--rvc-base-input-padding-x)',
-    '--rvc-input-height': 'var(--rvc-base-input-height)',
-    '--rvc-input-placeholder-color': 'var(--rvc-base-input-placeholder-color)',
-  },
-
-  '.rvc-input': {
-    display: 'grid',
-    gridTemplateColumns: theme('gridTemplateColumns.1'),
-    ...theme('components.input'),
-
-    input: {
-      borderRadius: 'var(--rvc-input-border-radius)',
-      borderWidth: 'var(--rvc-input-border-width)',
-      borderColor: 'var(--rvc-input-border-color)',
-      paddingRight: 'var(--rvc-input-padding-x)',
-      paddingLeft: 'var(--rvc-input-padding-x)',
-      backgroundColor: 'var(--rvc-input-bg-color)',
-      fontSize: 'var(--rvc-input-font-size)',
-      fontWeight: 'var(--rvc-input-font-weight)',
-      color: 'var(--rvc-input-color)',
-      boxShadow: 'var(--rvc-input-box-shadow)',
-      height: 'var(--rvc-input-height)',
-      backgroundImage: 'none',
-      width: '100%',
-      position: 'relative',
-      gridColumnStart: '1',
-      gridRowStart: '1',
-      appearance: 'none',
-      outlineWidth: 0,
-      ...theme('components.input.input'),
-
-      // Extra left padding
-      '&:nth-child(2)': {
-        paddingLeft: 'calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem)',
-      },
-
-      '&::placeholder': {
-        color: 'var(--rvc-input-placeholder-color)',
-        ...theme('components.input.input[&::placeholder]'),
-      },
-    },
-
-    // Extra right padding
-    '&:has(svg:last-child) input': {
-      paddingRight: 'calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem)',
-    },
-
-    '.rvc-input-prefix, svg': {
-      color: 'var(--rvc-input-icon-color)',
-      position: 'relative',
-      gridColumnStart: '1',
-      gridRowStart: '1',
-      alignSelf: 'center',
-      pointerEvents: 'none',
-      zIndex: '1',
-    },
-
-    '.rvc-input-prefix': {
-      marginLeft: 'var(--rvc-input-padding-x)',
-      justifySelf: 'start',
-      ...theme('components.input[.rvc-input-prefix]'),
-    },
-
-    svg: {
-      width: 'var(--rvc-input-icon-size)',
-      height: 'var(--rvc-input-icon-size)',
-      justifySelf: 'end',
-      ...theme('components.input.svg'),
-
-      '&:last-child:not(:first-child)': {
-        marginRight: 'var(--rvc-input-padding-x)',
-      },
-    },
-
-    // Size variants
-    '&.rvc-input-sm': {
-      '--rvc-input-font-size': 'calc(var(--rvc-base-input-font-size) * 0.9)',
-      '--rvc-input-padding-x': 'calc(var(--rvc-base-input-padding-x) * 0.85)',
-      '--rvc-input-icon-size': 'calc(var(--rvc-base-input-icon-size) * 0.85)',
-      '--rvc-input-height': '1.875rem',
-      ...theme('components.input.sm'),
-    },
-  },
-});

package/dist/tailwind/components/lightswitch.js

@@ -1,79 +0,0 @@
-/**
- * Lightswitch component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-lightswitch-transition-duration': 'var(--rvc-base-transition-duration)',
-    '--rvc-lightswitch-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
-    '--rvc-lightswitch-toggle-transition-duration': 'var(--rvc-base-transition-duration)',
-    '--rvc-lightswitch-toggle-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
-    '--rvc-lightswitch-border-radius': theme('borderRadius.full'),
-    '--rvc-lightswitch-height': '1.875rem',
-    '--rvc-lightswitch-width': '3.125rem',
-    '--rvc-lightswitch-bg-color': theme('colors.slate.200'),
-    '--rvc-lightswitch-bg-color-enabled': theme('colors.green.400'),
-    '--rvc-lightswitch-transition-property': theme('transitionProperty.colors'),
-    '--rvc-lightswitch-label-offset': '0.5rem',
-    '--rvc-lightswitch-toggle-offset': '0.1875rem',
-    '--rvc-lightswitch-toggle-size': theme('width.6'),
-    '--rvc-lightswitch-toggle-bg-color': theme('colors.white'),
-    '--rvc-lightswitch-toggle-transition-property': theme('transitionProperty.transform'),
-  },
-
-  '.rvc-lightswitch-group': {
-    display: 'inline-block',
-    ...theme('components.lightswitch'),
-
-    '&:has(label)': {
-      display: 'inline-flex',
-      alignItems: 'center',
-      ...theme('components.lightswitch[&:has(label)]'),
-    },
-
-    label: {
-      cursor: 'pointer',
-      paddingLeft: 'var(--rvc-lightswitch-label-offset)',
-      ...theme('components.lightswitch.label'),
-    },
-
-    '.rvc-lightswitch': {
-      height: 'var(--rvc-lightswitch-height)',
-      transitionProperty: 'var(--rvc-lightswitch-transition-property)',
-      transitionDuration: 'var(--rvc-lightswitch-transition-duration)',
-      transitionTimingFunction: 'var(--rvc-lightswitch-transition-timing-function)',
-      width: 'var(--rvc-lightswitch-width)',
-      borderRadius: 'var(--rvc-lightswitch-border-radius)',
-      backgroundColor: 'var(--rvc-lightswitch-bg-color)',
-      position: 'relative',
-      display: 'inline-flex',
-      alignItems: 'center',
-      ...theme('components.lightswitch[.rvc-lightswitch]'),
-
-      '.rvc-lightswitch-toggle': {
-        width: 'var(--rvc-lightswitch-toggle-size)',
-        height: 'var(--rvc-lightswitch-toggle-size)',
-        transform: 'translateX(var(--rvc-lightswitch-toggle-offset))',
-        borderRadius: 'var(--rvc-lightswitch-border-radius)',
-        backgroundColor: 'var(--rvc-lightswitch-toggle-bg-color)',
-        transitionProperty: 'var(--rvc-lightswitch-toggle-transition-property)',
-        transitionDuration: 'var(--rvc-lightswitch-toggle-transition-duration)',
-        transitionTimingFunction: 'var(--rvc-lightswitch-toggle-transition-timing-function)',
-        display: 'inline-block',
-        boxShadow: theme('boxShadow.md'),
-        ...theme('components.lightswitch[.rvc-lightswitch][.rvc-lightswitch-toggle]'),
-      },
-
-      '&.rvc-lightswitch-enabled': {
-        backgroundColor: 'var(--rvc-lightswitch-bg-color-enabled)',
-        ...theme('components.lightswitch[.rvc-lightswitch][&.rvc-lightswitch-enabled]'),
-
-        '.rvc-lightswitch-toggle': {
-          transform: 'translateX(calc(var(--rvc-lightswitch-width) - var(--rvc-lightswitch-toggle-size) - var(--rvc-lightswitch-toggle-offset)))',
-          ...theme('components.lightswitch[.rvc-lightswitch][&.rvc-lightswitch-enabled][.rvc-lightswitch-toggle]'),
-        },
-      },
-    },
-  },
-});

package/dist/tailwind/components/modal.js

@@ -1,132 +0,0 @@
-/**
- * Modal component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-modal-backdrop-bg-color': 'var(--rvc-dialog-backdrop-bg-color)',
-    '--rvc-modal-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-modal-border-width': 'var(--rvc-base-border-width)',
-    '--rvc-modal-border-style': 'var(--rvc-base-border-style)',
-    '--rvc-modal-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-modal-padding-x': 'var(--rvc-dialog-padding-x)',
-    '--rvc-modal-padding-y': 'var(--rvc-dialog-padding-y)',
-    '--rvc-modal-header-bg-color': 'var(--rvc-dialog-header-bg-color)',
-    '--rvc-modal-title-font-size': 'var(--rvc-dialog-title-font-size)',
-    '--rvc-modal-title-font-weight': 'var(--rvc-dialog-title-font-weight)',
-    '--rvc-modal-title-font-family': 'var(--rvc-dialog-title-font-family)',
-    '--rvc-modal-title-color': 'var(--rvc-dialog-title-color)',
-    '--rvc-modal-close-size': 'var(--rvc-dialog-close-size)',
-    '--rvc-modal-close-color': 'var(--rvc-dialog-close-color)',
-    '--rvc-modal-close-color-hover': 'var(--rvc-dialog-close-color-hover)',
-    '--rvc-modal-content-bg-color': 'var(--rvc-dialog-content-bg-color)',
-    '--rvc-modal-footer-bg-color': 'var(--rvc-dialog-footer-bg-color)',
-    '--rvc-modal-footer-gap': 'var(--rvc-dialog-footer-gap)',
-    '--rvc-modal-box-shadow': theme('boxShadow.xl'),
-    '--rvc-modal-margin-y': 0,
-  },
-
-  '.rvc-modal': {
-    zIndex: 600,
-    position: 'relative',
-    ...theme('components.modal'),
-
-    // Backdrop
-    '.rvc-modal-backdrop': {
-      backgroundColor: 'var(--rvc-modal-backdrop-bg-color)',
-      ...theme('components.modal[.rvc-modal-backdrop]'),
-    },
-
-    // Panel
-    '.rvc-modal-panel': {
-      borderColor: 'var(--rvc-modal-border-color)',
-      borderWidth: 'var(--rvc-modal-border-width)',
-      borderStyle: 'var(--rvc-modal-border-style)',
-      borderRadius: 'var(--rvc-modal-border-radius)',
-      boxShadow: 'var(--rvc-modal-box-shadow)',
-      marginTop: 'var(--rvc-modal-margin-y)',
-      marginBottom: 'var(--rvc-modal-margin-y)',
-      display: 'flex',
-      height: '100%',
-      flexDirection: 'column',
-      position: 'relative',
-      transform: 'translate(0, 0)',
-      overflow: 'hidden',
-      width: '100%',
-      textAlign: 'left',
-      ...theme('components.modal[.rvc-modal-panel]'),
-    },
-
-    // Header
-    '.rvc-modal-header': {
-      paddingTop: 'var(--rvc-modal-padding-y)',
-      paddingRight: 'var(--rvc-modal-padding-x)',
-      paddingBottom: 'var(--rvc-modal-padding-y)',
-      paddingLeft: 'var(--rvc-modal-padding-x)',
-      backgroundColor: 'var(--rvc-modal-header-bg-color)',
-      borderBottomColor: 'var(--rvc-modal-border-color)',
-      borderBottomWidth: 'var(--rvc-modal-border-width)',
-      borderBottomStyle: 'var(--rvc-modal-border-style)',
-      ...theme('components.modal[.rvc-modal-header]'),
-    },
-
-    // Title
-    '.rvc-modal-title': {
-      fontSize: 'var(--rvc-modal-title-font-size)',
-      fontWeight: 'var(--rvc-modal-title-font-weight)',
-      fontFamily: 'var(--rvc-modal-title-font-family)',
-      color: 'var(--rvc-modal-title-color)',
-      ...theme('components.modal[.rvc-modal-title]'),
-    },
-
-    // Close
-    '.rvc-modal-close': {
-      width: 'var(--rvc-modal-close-size)',
-      height: 'var(--rvc-modal-close-size)',
-      color: 'var(--rvc-modal-close-color)',
-      ...theme('components.modal[.rvc-modal-close]'),
-
-      '&:hover': {
-        color: 'var(--rvc-modal-close-color-hover)',
-        ...theme('components.modal[.rvc-modal-close][&:hover]'),
-      },
-    },
-
-    // Content
-    '.rvc-modal-content': {
-      paddingTop: 'var(--rvc-modal-padding-y)',
-      paddingRight: 'var(--rvc-modal-padding-x)',
-      paddingBottom: 'var(--rvc-modal-padding-y)',
-      paddingLeft: 'var(--rvc-modal-padding-x)',
-      backgroundColor: 'var(--rvc-modal-content-bg-color)',
-      ...theme('components.modal[.rvc-modal-content]'),
-    },
-
-    // Footer
-    '.rvc-modal-footer': {
-      paddingTop: 'var(--rvc-modal-padding-y)',
-      paddingRight: 'var(--rvc-modal-padding-x)',
-      paddingBottom: 'var(--rvc-modal-padding-y)',
-      paddingLeft: 'var(--rvc-modal-padding-x)',
-      gap: 'var(--rvc-modal-footer-gap)',
-      backgroundColor: 'var(--rvc-modal-footer-bg-color)',
-      borderTopColor: 'var(--rvc-modal-border-color)',
-      borderTopWidth: 'var(--rvc-modal-border-width)',
-      borderTopStyle: 'var(--rvc-modal-border-style)',
-      display: 'flex',
-      flexDirection: 'column',
-      ...theme('components.modal[.rvc-modal-footer]'),
-
-      [`@media (min-width: ${theme('screens.sm')})`]: {
-        flexDirection: 'row-reverse',
-        ...theme('components.modal[.rvc-modal-footer][screen-sm]'),
-      },
-    },
-
-    // Larger screens
-    [`@media (min-width: ${theme('screens.sm')})`]: {
-      ...theme('components.modal[screen-sm]'),
-    },
-  },
-});

package/dist/tailwind/components/pagination.js

@@ -1,62 +0,0 @@
-/**
- * Pagination component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-pagination-transition-duration': 'var(--rvc-base-transition-duration)',
-    '--rvc-pagination-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
-    '--rvc-pagination-border-radius': theme('borderRadius.md'),
-    '--rvc-pagination-size': theme('width.6'),
-    '--rvc-pagination-font-size': theme('fontSize.sm'),
-    '--rvc-pagination-font-weight': theme('fontWeight.normal'),
-    '--rvc-pagination-font-weight-active': theme('fontWeight.semibold'),
-    '--rvc-pagination-color': theme('colors.slate.600'),
-    '--rvc-pagination-color-active': theme('colors.slate.800'),
-    '--rvc-pagination-transition-property': theme('transitionProperty.colors'),
-    '--rvc-pagination-bg-color': 'transparent',
-    '--rvc-pagination-bg-color-hover': theme('colors.slate.100'),
-    '--rvc-pagination-info-color': theme('colors.slate.400'),
-    '--rvc-pagination-info-font-size': theme('fontSize.sm'),
-  },
-
-  '.rvc-pagination': {
-    ...theme('components.pagination'),
-
-    '.rvc-pagination-button': {
-      borderRadius: 'var(--rvc-pagination-border-radius)',
-      width: 'var(--rvc-pagination-size)',
-      height: 'var(--rvc-pagination-size)',
-      fontSize: 'var(--rvc-pagination-font-size)',
-      fontWeight: 'var(--rvc-pagination-font-weight)',
-      color: 'var(--rvc-pagination-color)',
-      transitionProperty: 'var(--rvc-pagination-transition-property)',
-      transitionDuration: 'var(--rvc-pagination-transition-duration)',
-      transitionTimingFunction: 'var(--rvc-pagination-transition-timing-function)',
-      backgroundColor: 'var(--rvc-pagination-bg-color)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      textAlign: 'center',
-      ...theme('components.pagination[.rvc-pagination-button]'),
-
-      '&.rvc-pagination-button-active': {
-        fontWeight: 'var(--rvc-pagination-font-weight-active)',
-        color: 'var(--rvc-pagination-color-active)',
-        ...theme('components.pagination[.rvc-pagination-button-active]'),
-      },
-
-      '&:not([disabled]):hover': {
-        backgroundColor: 'var(--rvc-pagination-bg-color-hover)',
-        ...theme('components.pagination[.rvc-pagination-button]:not([disabled]):hover'),
-      },
-    },
-
-    '.rvc-pagination-info': {
-      fontSize: 'var(--rvc-pagination-info-font-size)',
-      color: 'var(--rvc-pagination-info-color)',
-      ...theme('components.pagination[.rvc-pagination-info]'),
-    },
-  },
-});