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

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'),
-    },
-  },
-});

package/dist/tailwind/components/toast.js

@@ -1,188 +0,0 @@
-/**
- * Toast component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    // Custom properties
-    '--rvc-toast-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-toast-transition-duration': 'var(--rvc-base-transition-duration)',
-    '--rvc-toast-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
-    '--rvc-toast-border-width': 'var(--rvc-base-border-width)',
-    '--rvc-toast-padding-x': theme('padding.6'),
-    '--rvc-toast-padding-y': theme('padding.6'),
-    '--rvc-toast-max-width': theme('maxWidth.xl'),
-    '--rvc-toast-min-width': theme('maxWidth.xl'),
-    '--rvc-toast-font-size': theme('fontSize.base.0'),
-    '--rvc-toast-gap': theme('gap[1.5]'),
-    '--rvc-toast-anchor-decoration': 'underline',
-    '--rvc-toast-icon-size': theme('width.6'),
-    '--rvc-toast-title-font-weight': theme('fontWeight.medium'),
-    '--rvc-toast-transition-property': theme('transitionProperty.colors'),
-    '--rvc-toast-offset': theme('width.6'),
-
-    // Default color variables
-    '--rvc-toast-bg-color': theme('colors.blue.50'),
-    '--rvc-toast-border-color': theme('colors.blue.200'),
-    '--rvc-toast-color': theme('colors.blue.700'),
-    '--rvc-toast-icon-color': theme('colors.blue.500'),
-    '--rvc-toast-title-color': theme('colors.blue.800'),
-    '--rvc-toast-close-bg-color': theme('colors.blue.200'),
-    '--rvc-toast-close-hover-bg-color': theme('colors.blue.300'),
-    '--rvc-toast-anchor-color': 'inherit',
-    '--rvc-toast-anchor-hover-color': theme('colors.blue.600'),
-  },
-
-  '.rvc-toast': {
-    gap: 'var(--rvc-toast-gap)',
-    paddingTop: 'var(--rvc-toast-padding-y)',
-    paddingBottom: 'var(--rvc-toast-padding-y)',
-    paddingLeft: 'var(--rvc-toast-padding-x)',
-    paddingRight: 'var(--rvc-toast-padding-x)',
-    borderRadius: 'var(--rvc-toast-border-radius)',
-    fontSize: 'var(--rvc-toast-font-size)',
-    backgroundColor: 'var(--rvc-toast-bg-color)',
-    color: 'var(--rvc-toast-color)',
-    maxWidth: 'var(--rvc-toast-max-width)',
-    minWidth: 'var(--rvc-toast-min-width)',
-    borderWidth: 'var(--rvc-toast-border-width)',
-    borderColor: 'var(--rvc-toast-border-color)',
-    filter: 'drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05))',
-    display: 'flex',
-    position: 'fixed',
-    left: '50%',
-    transform: 'translateX(-50%)',
-    overflow: 'hidden',
-    zIndex: '99',
-    ...theme('components.toast'),
-
-    '&.rvc-toast-bottom': {
-      bottom: 'var(--rvc-toast-offset)',
-      ...theme('components.toast.bottom'),
-    },
-
-    '&.rvc-toast-top': {
-      top: 'var(--rvc-toast-offset)',
-      ...theme('components.toast.top'),
-    },
-
-    // Elements
-    a: {
-      textDecoration: 'var(--rvc-toast-anchor-decoration)',
-      transitionProperty: 'var(--rvc-toast-transition-property)',
-      transitionDuration: 'var(--rvc-toast-transition-duration)',
-      transitionTimingFunction: 'var(--rvc-toast-transition-timing-function)',
-      color: 'var(--rvc-toast-anchor-color)',
-      ...theme('components.toast.a'),
-
-      '&:hover': {
-        color: 'var(--rvc-toast-anchor-hover-color)',
-        ...theme('components.toast.a[&:hover]'),
-      },
-    },
-
-    'ul,ol': {
-      listStylePosition: 'inside',
-      margin: 0,
-      paddingLeft: theme('padding.2'),
-      ...theme('components.toast[ul,ol]'),
-    },
-
-    ul: {
-      listStyleType: 'disc',
-      ...theme('components.toast.ul'),
-    },
-
-    ol: {
-      listStyleType: 'decimal',
-      ...theme('components.toast.ol'),
-    },
-
-    '.rvc-toast-close': {
-      backgroundColor: 'var(--rvc-toast-close-bg-color)',
-      color: 'var(--rvc-toast-icon-color)',
-      borderBottomLeftRadius: 'var(--rvc-toast-border-radius)',
-      transitionProperty: 'var(--rvc-toast-transition-property)',
-      transitionDuration: 'var(--rvc-toast-transition-duration)',
-      transitionTimingFunction: 'var(--rvc-toast-transition-timing-function)',
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      position: 'absolute',
-      top: '0',
-      right: '0',
-      padding: theme('padding[1.5]'),
-      ...theme('components.toast[.rvc-toast-close]'),
-
-      '&:hover': {
-        backgroundColor: 'var(--rvc-toast-close-hover-bg-color)',
-        color: 'var(--rvc-toast-icon-hover-color)',
-        ...theme('components.toast[.rvc-toast-close][&:hover]'),
-      },
-    },
-
-    '.rvc-toast-icon': {
-      width: 'var(--rvc-toast-icon-size)',
-      height: 'var(--rvc-toast-icon-size)',
-      color: 'var(--rvc-toast-icon-color)',
-      display: 'block',
-      flexShrink: '0',
-      ...theme('components.toast[.rvc-toast-icon]'),
-    },
-
-    '.rvc-toast-title': {
-      color: 'var(--rvc-toast-title-color)',
-      fontWeight: 'var(--rvc-toast-title-font-weight)',
-      display: 'block',
-      marginBottom: theme('margin.2'),
-      ...theme('components.toast[.rvc-toast-title]'),
-
-      '&:last-child': {
-        marginBottom: '0',
-        ...theme('components.toast[.rvc-toast-title][&:last-child]'),
-      },
-    },
-
-    // Color variants
-    '&.rvc-toast-info': {
-      ...theme('components.toast.info'),
-    },
-
-    '&.rvc-toast-warning': {
-      '--rvc-toast-bg-color': theme('colors.yellow.50'),
-      '--rvc-toast-border-color': theme('colors.yellow.200'),
-      '--rvc-toast-color': theme('colors.yellow.700'),
-      '--rvc-toast-icon-color': theme('colors.yellow.500'),
-      '--rvc-toast-title-color': theme('colors.yellow.800'),
-      '--rvc-toast-close-bg-color': theme('colors.yellow.200'),
-      '--rvc-toast-close-hover-bg-color': theme('colors.yellow.300'),
-      '--rvc-toast-anchor-hover-color': theme('colors.yellow.600'),
-      ...theme('components.toast.warning'),
-    },
-
-    '&.rvc-toast-success': {
-      '--rvc-toast-bg-color': theme('colors.green.50'),
-      '--rvc-toast-border-color': theme('colors.green.200'),
-      '--rvc-toast-color': theme('colors.green.700'),
-      '--rvc-toast-icon-color': theme('colors.green.500'),
-      '--rvc-toast-title-color': theme('colors.green.800'),
-      '--rvc-toast-close-bg-color': theme('colors.green.200'),
-      '--rvc-toast-close-hover-bg-color': theme('colors.green.300'),
-      '--rvc-toast-anchor-hover-color': theme('colors.green.600'),
-      ...theme('components.toast.success'),
-    },
-
-    '&.rvc-toast-danger': {
-      '--rvc-toast-bg-color': theme('colors.red.50'),
-      '--rvc-toast-border-color': theme('colors.red.200'),
-      '--rvc-toast-color': theme('colors.red.700'),
-      '--rvc-toast-icon-color': theme('colors.red.500'),
-      '--rvc-toast-title-color': theme('colors.red.800'),
-      '--rvc-toast-close-bg-color': theme('colors.red.200'),
-      '--rvc-toast-close-hover-bg-color': theme('colors.red.300'),
-      '--rvc-toast-anchor-hover-color': theme('colors.red.600'),
-      ...theme('components.toast.danger'),
-    },
-  },
-});

package/dist/tailwind/components/tooltip.js

@@ -1,74 +0,0 @@
-import { withAlphaValue } from 'tailwindcss/lib/util/withAlphaVariable';
-
-/**
- * Tooltip component
- *
- * @param {Object} theme - The global theme object
- */
-export default (theme) => ({
-  ':root': {
-    '--rvc-tooltip-transition-duration': 'var(--rvc-base-transition-duration)',
-    '--rvc-tooltip-transition-timing-function': 'var(--rvc-base-transition-timing-function)',
-    '--rvc-tooltip-border-radius': 'var(--rvc-base-border-radius)',
-    '--rvc-tooltip-color': theme('colors.white'),
-    '--rvc-tooltip-transition-property': 'opacity, visibility',
-    '--rvc-tooltip-text-align': 'left',
-    '--rvc-tooltip-padding-x': theme('padding.4'),
-    '--rvc-tooltip-padding-y': theme('padding.4'),
-    '--rvc-tooltip-width': theme('width.max'),
-    '--rvc-tooltip-bg-color': withAlphaValue(theme('colors.slate.700'), 0.6),
-    '--rvc-tooltip-arrow-size': theme('width.3'),
-    '--rvc-tooltip-blur-size': theme('blur.sm'),
-  },
-
-  '.rvc-tooltip': {
-    zIndex: 10,
-    color: 'var(--rvc-tooltip-color)',
-    transitionProperty: 'var(--rvc-tooltip-transition-property)',
-    transitionDuration: 'var(--rvc-tooltip-transition-duration)',
-    transitionTimingFunction: 'var(--rvc-tooltip-transition-timing-function)',
-    textAlign: 'var(--rvc-tooltip-text-align)',
-    paddingTop: 'var(--rvc-tooltip-padding-y)',
-    paddingRight: 'var(--rvc-tooltip-padding-x)',
-    paddingBottom: 'var(--rvc-tooltip-padding-y)',
-    paddingLeft: 'var(--rvc-tooltip-padding-x)',
-    width: 'var(--rvc-tooltip-width)',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    ...theme('components.tooltip'),
-
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      borderRadius: 'var(--rvc-tooltip-border-radius)',
-      backgroundColor: 'var(--rvc-tooltip-bg-color)',
-      zIndex: -1,
-    },
-
-    // Arrow
-    '.rvc-tooltip-arrow': {
-      backgroundColor: 'var(--rvc-tooltip-bg-color)',
-      width: 'var(--rvc-tooltip-arrow-size)',
-      height: 'var(--rvc-tooltip-arrow-size)',
-      clipPath: 'polygon(0 0, 50% 50%, 100% 0)',
-      zIndex: -1,
-    },
-
-    '&.rvc-tooltip-blur::before, &.rvc-tooltip-blur .rvc-tooltip-arrow': {
-      backdropFilter: 'blur(var(--rvc-tooltip-blur-size))',
-    },
-
-    // Size variants
-    '&.rvc-tooltip-sm': {
-      '--rvc-tooltip-padding-x': theme('padding.2'),
-      '--rvc-tooltip-padding-y': theme('padding.0'),
-      '--rvc-tooltip-arrow-size': theme('width[1.5]'),
-      ...theme('components.tooltip.sm'),
-    },
-  },
-});

package/dist/tailwind/index.js

@@ -1,94 +0,0 @@
-import plugin from 'tailwindcss/plugin';
-
-// Base
-import base from './base/index.js';
-
-// Components
-import accordion from './components/accordion.js';
-import alert from './components/alert.js';
-import badge from './components/badge.js';
-import button from './components/button.js';
-import checkbox from './components/checkbox.js';
-import combobox from './components/combobox.js';
-import drawer from './components/drawer.js';
-import dropdown from './components/dropdown.js';
-import emptyState from './components/empty-state.js';
-import input from './components/input.js';
-import lightswitch from './components/lightswitch.js';
-import modal from './components/modal.js';
-import pagination from './components/pagination.js';
-import radio from './components/radio.js';
-import richText from './components/rich-text.js';
-import select from './components/select.js';
-import table from './components/table.js';
-import tabs from './components/tabs.js';
-import textarea from './components/textarea.js';
-import toast from './components/toast.js';
-import tooltip from './components/tooltip.js';
-
-/**
- * Tailwind Theme plugin
- *
- * @type {import('tailwindcss').Plugin}
- *
- * @param {import('tailwindcss').AddComponents} addComponents
- * @param {import('tailwindcss').Theme} theme
- *
- * @returns {void}
- */
-export default plugin.withOptions(
-  () => ({ addComponents, addBase, theme }) => {
-    addBase(base(theme));
-    addComponents([
-      accordion(theme),
-      alert(theme),
-      badge(theme),
-      button(theme),
-      checkbox(theme),
-      combobox(theme),
-      drawer(theme),
-      dropdown(theme),
-      emptyState(theme),
-      input(theme),
-      lightswitch(theme),
-      pagination(theme),
-      modal(theme),
-      radio(theme),
-      richText(theme),
-      select(theme),
-      table(theme),
-      tabs(theme),
-      textarea(theme),
-      toast(theme),
-      tooltip(theme),
-    ], { respectPrefix: false });
-  },
-  () => ({
-    safelist: [
-      // Base
-      'rvc-focus',
-      // Components
-      'rvc-accordion',
-      'rvc-alert',
-      'rvc-badge',
-      'rvc-button',
-      'rvc-checkbox',
-      'rvc-combobox',
-      'rvc-drawer',
-      'rvc-dropdown',
-      'rvc-empty-state',
-      'rvc-input',
-      'rvc-lightswitch-group',
-      'rvc-modal',
-      'rvc-radio',
-      'rvc-rich-text',
-      'rvc-pagination',
-      'rvc-select',
-      'rvc-table',
-      'rvc-tabs',
-      'rvc-textarea',
-      'rvc-toast',
-      'rvc-tooltip',
-    ],
-  }),
-);