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

package/dist/tailwind/components/radio.js

@@ -1,75 +0,0 @@
-/**
- * Radio component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-radio-input-box-shadow': 'var(--rvc-base-box-shadow)',
-    '--rvc-radio-input-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-radio-gap': theme('gap.2'),
-    '--rvc-radio-font-size': theme('fontSize.base.0'),
-    '--rvc-radio-font-weight': theme('fontWeight.medium'),
-    '--rvc-radio-color': theme('colors.slate.950'),
-    '--rvc-radio-input-size': theme('width.4'),
-    '--rvc-radio-input-border-radius': theme('borderRadius.full'),
-    '--rvc-radio-input-border-width': theme('borderWidth.DEFAULT'),
-    '--rvc-radio-input-checked-bg-color': theme('colors.indigo.600'),
-    '--rvc-radio-input-checked-border-color': theme('colors.indigo.600'),
-    '--rvc-radio-input-checked-icon-color': theme('colors.white'),
-    '--rvc-radio-input-checked-icon-border-radius': theme('borderRadius.full'),
-  },
-
-  '.rvc-radio': {
-    gap: 'var(--rvc-radio-gap)',
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'flex-start',
-    cursor: 'pointer',
-    ...theme('components.radio'),
-
-    input: {
-      '&:checked': {
-        '+ .rvc-radio-input': {
-          backgroundColor: 'var(--rvc-radio-input-checked-bg-color)',
-          borderColor: 'var(--rvc-radio-input-checked-border-color)',
-          ...theme('components.radio.input.checked'),
-          '&::before': {
-            opacity: '1',
-            ...theme('components.radio.input.checked.toggle'),
-          },
-        },
-      },
-    },
-
-    label: {
-      fontSize: 'var(--rvc-radio-font-size)',
-      fontWeight: 'var(--rvc-radio-font-weight)',
-      color: 'var(--rvc-radio-color)',
-      ...theme('components.radio.label'),
-    },
-
-    '.rvc-radio-input': {
-      width: 'var(--rvc-radio-input-size)',
-      height: 'var(--rvc-radio-input-size)',
-      borderRadius: 'var(--rvc-radio-input-border-radius)',
-      borderWidth: 'var(--rvc-radio-input-border-width)',
-      boxShadow: 'var(--rvc-radio-input-box-shadow)',
-      borderColor: 'var(--rvc-radio-input-border-color)',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: theme('margin.1'),
-      ...theme('components.radio.input'),
-      '&::before': {
-        backgroundColor: 'var(--rvc-radio-input-checked-icon-color)',
-        borderRadius: 'var(--rvc-radio-input-checked-icon-border-radius)',
-        content: '""',
-        opacity: '0',
-        width: theme('width[1.5]'),
-        height: theme('height[1.5]'),
-        ...theme('components.radio.input.toggle'),
-      },
-    },
-  },
-});

package/dist/tailwind/components/rich-text.js

@@ -1,100 +0,0 @@
-/**
- * RichTextEditor component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-rich-text-list-padding': theme('padding[2.5]'),
-    '--rvc-rich-text-list-position': 'inside',
-    '--rvc-rich-text-paragraph-spacing': theme('margin.4'),
-    '--rvc-rich-text-icon-size': theme('width.4'),
-    '--rvc-rich-text-button-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-rich-text-button-padding': theme('padding.1'),
-    '--rvc-rich-text-button-bg-color': 'transparent',
-    '--rvc-rich-text-button-bg-color-hover': theme('colors.slate.100'),
-    '--rvc-rich-text-button-color': theme('colors.slate.600'),
-    '--rvc-rich-text-button-color-active': theme('colors.indigo.700'),
-    '--rvc-rich-text-anchor-color': theme('colors.indigo.700'),
-    '--rvc-rich-text-anchor-font-weight': theme('fontWeight.bold'),
-    '--rvc-rich-text-anchor-text-decoration': 'underline',
-    '--rvc-rich-text-min-height': theme('minHeight.24'),
-  },
-
-  '.rvc-rich-text': {
-    position: 'relative',
-    ...theme('components.richText'),
-
-    '.rvc-rich-text-textarea': {
-      minHeight: 'var(--rvc-rich-text-min-height)',
-      paddingTop: 'calc(var(--rvc-textarea-padding-x) + var(--rvc-rich-text-icon-size) + (var(--rvc-rich-text-button-padding) * 2) + var(--rvc-textarea-padding-y))',
-
-      '> *:not(:last-child)': {
-        marginBottom: 'var(--rvc-rich-text-paragraph-spacing)',
-      },
-
-      'ul, ol': {
-        listStylePosition: 'var(--rvc-rich-text-list-position)',
-        paddingLeft: 'var(--rvc-rich-text-list-padding)',
-
-        'li > *': {
-          display: 'inline',
-        },
-      },
-
-      a: {
-        textDecoration: 'var(--rvc-rich-text-anchor-text-decoration)',
-        fontWeight: 'var(--rvc-rich-text-anchor-font-weight)',
-        color: 'var(--rvc-rich-text-anchor-color)',
-      },
-
-      ul: { listStyleType: 'disc' },
-      ol: { listStyleType: 'decimal' },
-
-      ...theme('components.richText[.rvc-rich-text-textarea]'),
-    },
-
-    '.rvc-rich-text-toolbar': {
-      paddingTop: 'var(--rvc-textarea-padding-x)',
-      paddingRight: 'var(--rvc-textarea-padding-x)',
-      paddingBottom: 'var(--rvc-textarea-padding-x)',
-      paddingLeft: 'var(--rvc-textarea-padding-x)',
-      gap: theme('gap.1'),
-      display: 'flex',
-      alignItems: 'center',
-      position: 'absolute',
-      top: '0',
-      right: '0',
-      left: '0',
-      flexWrap: 'wrap',
-      zIndex: '1',
-      pointerEvents: 'none',
-      ...theme('components.richText[.rvc-rich-text-toolbar]'),
-    },
-
-    '.rvc-rich-text-button': {
-      borderRadius: 'var(--rvc-rich-text-button-border-radius)',
-      padding: 'var(--rvc-rich-text-button-padding)',
-      backgroundColor: 'var(--rvc-rich-text-button-bg-color)',
-      color: 'var(--rvc-rich-text-button-color)',
-      pointerEvents: 'auto',
-      ...theme('components.richText[.rvc-rich-text-button]'),
-
-      '&:hover': {
-        backgroundColor: 'var(--rvc-rich-text-button-bg-color-hover)',
-        ...theme('components.richText[.rvc-rich-text-button][&:hover]'),
-      },
-
-      svg: {
-        width: 'var(--rvc-rich-text-icon-size)',
-        height: 'var(--rvc-rich-text-icon-size)',
-        ...theme('components.richText[.rvc-rich-text-button][svg]'),
-      },
-
-      '&.rvc-rich-text-button-active': {
-        color: 'var(--rvc-rich-text-button-color-active)',
-        ...theme('components.richText[.rvc-rich-text-button][&.rvc-rich-text-button-active]'),
-      },
-    },
-  },
-});

package/dist/tailwind/components/select.js

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

package/dist/tailwind/components/table.js

@@ -1,109 +0,0 @@
-/**
- * DataTable component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-table-head-border-color': 'var(--rvc-base-border-dark-color)',
-    '--rvc-table-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-table-border-style': 'var(--rvc-base-border-style)',
-    '--rvc-table-border-width': 'var(--rvc-base-border-width)',
-    '--rvc-table-head-bg-color': theme('colors.slate.200'),
-    '--rvc-table-bg-color': theme('colors.slate.50'),
-    '--rvc-table-font-size': '0.875rem',
-    '--rvc-table-head-font-size': '0.875rem',
-    '--rvc-table-head-font-weight': theme('fontWeight.medium'),
-    '--rvc-table-font-weight': theme('fontWeight.normal'),
-    '--rvc-table-padding-x': theme('padding.2'),
-    '--rvc-table-padding-y': theme('padding.3'),
-    '--rvc-table-white-space': 'nowrap',
-    '--rvc-table-line-height': '1.1',
-    '--rvc-table-spinner-size': theme('size.5'),
-  },
-
-  '.rvc-table': {
-    ...theme('components.table'),
-
-    '&.rvc-table-striped': {
-      thead: {
-        th: {
-          paddingRight: 'var(--rvc-table-padding-x)',
-          paddingLeft: 'var(--rvc-table-padding-x)',
-          backgroundColor: 'var(--rvc-table-head-bg-color)',
-        },
-      },
-
-      'tr:nth-of-type(even)': {
-        td: {
-          backgroundColor: 'var(--rvc-table-bg-color)',
-        },
-      },
-
-      td: {
-        paddingRight: 'var(--rvc-table-padding-x)',
-        paddingLeft: 'var(--rvc-table-padding-x)',
-      },
-    },
-
-    '&:not(.rvc-table-striped)': {
-      thead: {
-        th: {
-          borderBottomWidth: 'var(--rvc-table-border-width)',
-          borderBottomColor: 'var(--rvc-table-head-border-color)',
-          borderBottomStyle: 'var(--rvc-table-border-style)',
-
-          '&:not(:first-child,:last-child)': {
-            paddingRight: 'var(--rvc-table-padding-x)',
-            paddingLeft: 'var(--rvc-table-padding-x)',
-          },
-        },
-      },
-
-      'tr:not(:last-child)': {
-        td: {
-          borderBottomWidth: 'var(--rvc-table-border-width)',
-          borderBottomColor: 'var(--rvc-table-border-color)',
-          borderBottomStyle: 'var(--rvc-table-border-style)',
-        },
-      },
-
-      'td:not(:first-child,:last-child)': {
-        paddingRight: 'var(--rvc-table-padding-x)',
-        paddingLeft: 'var(--rvc-table-padding-x)',
-      },
-    },
-
-    thead: {
-      th: {
-        paddingTop: 'var(--rvc-table-padding-y)',
-        paddingBottom: 'var(--rvc-table-padding-y)',
-        fontSize: 'var(--rvc-table-head-font-size)',
-        fontWeight: 'var(--rvc-table-head-font-weight)',
-        lineHeight: 'var(--rvc-table-line-height)',
-        whiteSpace: 'var(--rvc-table-white-space)',
-      },
-    },
-
-    td: {
-      paddingTop: 'var(--rvc-table-padding-y)',
-      paddingBottom: 'var(--rvc-table-padding-y)',
-      fontSize: 'var(--rvc-table-font-size)',
-      fontWeight: 'var(--rvc-table-font-weight)',
-      lineHeight: 'var(--rvc-table-line-height)',
-      whiteSpace: 'var(--rvc-table-white-space)',
-    },
-
-    '.rvc-table-spinner': {
-      animation: theme('animation.spin'),
-      width: 'var(--rvc-table-spinner-size)',
-      height: 'var(--rvc-table-spinner-size)',
-    },
-
-    'td.rvc-table-state': {
-      borderBottomWidth: 'var(--rvc-table-border-width)',
-      borderBottomColor: 'var(--rvc-table-border-color)',
-      borderBottomStyle: 'var(--rvc-table-border-style)',
-    },
-  },
-});

package/dist/tailwind/components/tabs.js

@@ -1,95 +0,0 @@
-/**
- * Tabs component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    // Custom properties
-    '--rvc-tabs-border-width': 'var(--rvc-base-border-width)',
-    '--rvc-tabs-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-tabs-tab-transition-duration': 'var(--rvc-base-transition-duration)',
-    '--rvc-tabs-tab-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
-    '--rvc-tabs-tab-button-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-tabs-gap': theme('gap.10'),
-    '--rvc-tabs-buttons-gap': theme('gap.4'),
-    '--rvc-tabs-tab-color': theme('colors.slate.600'),
-    '--rvc-tabs-tab-font-weight': theme('fontWeight.medium'),
-    '--rvc-tabs-tab-border-width': theme('borderWidth.2'),
-    '--rvc-tabs-tab-padding-bottom': theme('padding.4'),
-    '--rvc-tabs-tab-hover-color': theme('colors.slate.700'),
-    '--rvc-tabs-tab-hover-border-color': theme('colors.slate.600'),
-    '--rvc-tabs-tab-active-color': theme('colors.indigo.600'),
-    '--rvc-tabs-tab-active-border-color': theme('colors.indigo.600'),
-    '--rvc-tabs-tab-button-height': theme('height.9'),
-    '--rvc-tabs-tab-button-padding-x': theme('padding.3'),
-    '--rvc-tabs-tab-active-button-bg-color': theme('colors.indigo.100'),
-  },
-
-  '.rvc-tabs': {
-    borderBottomWidth: 'var(--rvc-tabs-border-width)',
-    borderColor: 'var(--rvc-tabs-border-color)',
-    ...theme('components.tabs'),
-
-    '&.rvc-tabs-buttons': {
-      borderBottomWidth: '0',
-      ...theme('components.tabs.buttons'),
-
-      '.rvc-tabs-nav': {
-        gap: 'var(--rvc-tabs-buttons-gap)',
-        marginBottom: '0',
-        ...theme('components.tabs.nav.buttons'),
-      },
-
-      '.rvc-tab': {
-        paddingRight: 'var(--rvc-tabs-tab-button-padding-x)',
-        paddingLeft: 'var(--rvc-tabs-tab-button-padding-x)',
-        height: 'var(--rvc-tabs-tab-button-height)',
-        borderRadius: 'var(--rvc-tabs-tab-button-border-radius)',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderBottomWidth: '0',
-        paddingBottom: '0',
-        cursor: 'pointer',
-        ...theme('components.tabs.tab.button'),
-
-        '&.rvc-tab-active': {
-          backgroundColor: 'var(--rvc-tabs-tab-active-button-bg-color)',
-          ...theme('components.tabs.tab.active'),
-        },
-      },
-    },
-
-    '.rvc-tabs-nav': {
-      display: 'flex',
-      gap: 'var(--rvc-tabs-gap)',
-      marginBottom: 'calc(var(--rvc-tabs-border-width) * -1)',
-      ...theme('components.tabs.nav'),
-    },
-
-    '.rvc-tab': {
-      color: 'var(--rvc-tabs-tab-color)',
-      fontWeight: 'var(--rvc-tabs-tab-font-weight)',
-      borderBottomWidth: 'var(--rvc-tabs-tab-border-width)',
-      borderColor: 'transparent',
-      paddingBottom: 'var(--rvc-tabs-tab-padding-bottom)',
-      transitionDuration: 'var(--rvc-tabs-tab-transition-duration)',
-      transitionTimingFunction: 'var(--rvc-tabs-tab-transition-timing-function)',
-      ...theme('components.tabs.tab'),
-
-      // Hover state
-      '&:hover': {
-        color: 'var(--rvc-tabs-tab-hover-color)',
-        borderColor: 'var(--rvc-tabs-tab-hover-border-color)',
-        ...theme('components.tabs.tab[&:hover]'),
-      },
-
-      '&.rvc-tab-active': {
-        color: 'var(--rvc-tabs-tab-active-color)',
-        borderColor: 'var(--rvc-tabs-tab-active-border-color)',
-        ...theme('components.tabs.tab.active'),
-      },
-    },
-  },
-});

package/dist/tailwind/components/textarea.js

@@ -1,53 +0,0 @@
-/**
- * Textarea component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-textarea-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-textarea-border-width': 'var(--rvc-base-border-width)',
-    '--rvc-textarea-border-color': 'var(--rvc-base-border-color)',
-    '--rvc-textarea-font-size': 'var(--rvc-base-input-font-size)',
-    '--rvc-textarea-font-weight': 'var(--rvc-base-input-font-weight)',
-    '--rvc-textarea-box-shadow': 'var(--rvc-base-box-shadow)',
-    '--rvc-textarea-color': 'var(--rvc-base-input-color)',
-    '--rvc-textarea-bg-color': 'var(--rvc-base-input-bg-color)',
-    '--rvc-textarea-padding-x': 'var(--rvc-base-input-padding-x)',
-    '--rvc-textarea-height': 'var(--rvc-base-input-height)',
-    '--rvc-textarea-placeholder-color': 'var(--rvc-base-input-placeholder-color)',
-    '--rvc-textarea-padding-y': theme('padding[1.5]'),
-  },
-
-  '.rvc-textarea': {
-    borderRadius: 'var(--rvc-textarea-border-radius)',
-    borderWidth: 'var(--rvc-textarea-border-width)',
-    borderColor: 'var(--rvc-textarea-border-color)',
-    paddingTop: 'var(--rvc-textarea-padding-y)',
-    paddingRight: 'var(--rvc-textarea-padding-x)',
-    paddingBottom: 'var(--rvc-textarea-padding-y)',
-    paddingLeft: 'var(--rvc-textarea-padding-x)',
-    backgroundColor: 'var(--rvc-textarea-bg-color)',
-    fontSize: 'var(--rvc-textarea-font-size)',
-    fontWeight: 'var(--rvc-textarea-font-weight)',
-    color: 'var(--rvc-textarea-color)',
-    boxShadow: 'var(--rvc-textarea-box-shadow)',
-    minHeight: 'var(--rvc-textarea-height)',
-    display: 'block',
-    backgroundImage: 'none',
-    width: '100%',
-    position: 'relative',
-    appearance: 'none',
-    outlineWidth: 0,
-    ...theme('components.textarea'),
-
-    // Size variants
-    '&.rvc-textarea-sm': {
-      '--rvc-textarea-font-size': 'calc(var(--rvc-base-input-font-size) * 0.9)',
-      '--rvc-textarea-padding-x': 'calc(var(--rvc-base-input-padding-x) * 0.85)',
-      '--rvc-textarea-padding-y': `calc(${theme('padding[1.5]')} * 0.75)`,
-      '--rvc-textarea-height': '1.875rem',
-      ...theme('components.textarea.sm'),
-    },
-  },
-});