east-hub-ui/index.js

Modern UI components library built with React and Tailwind CSS 4

// East Hub UI Plugin for Tailwind CSS 4

// Main plugin function
export default function (api) {
  // Add button base styles
  api.addComponents({
    '.east-btn': {
      'display': 'inline-flex',
      'align-items': 'center',
      'justify-content': 'center',
      'border-radius': '0.375rem',
      'font-weight': '500',
      'transition-property': 'color, background-color, border-color, text-decoration-color, fill, stroke',
      'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
      'transition-duration': '150ms',
      'cursor': 'pointer',
    },

    // Button sizes
    '.east-btn-sm': {
      'padding': '0.375rem 0.75rem',
      'font-size': '0.875rem',
      'line-height': '1.25rem',
    },
    '.east-btn-md': {
      'padding': '0.5rem 1rem',
      'font-size': '0.875rem',
      'line-height': '1.25rem',
    },
    '.east-btn-lg': {
      'padding': '0.75rem 1.5rem',
      'font-size': '1rem',
      'line-height': '1.5rem',
    },
    '.east-btn-full': {
      'width': '100%',
      'padding': '0.5rem 1rem',
      'font-size': '0.875rem',
      'line-height': '1.25rem',
    },

    // Button variants - Default (Gray)
    '.east-btn-default': {
      'background-color': 'var(--color-gray-600, #4b5563)',
      'color': 'white',
      '&:hover': {
        'background-color': 'var(--color-gray-700, #374151)',
      },
    },
    '.east-btn-default-faded': {
      'background-color': 'color-mix(in oklab, var(--color-gray-600, #4b5563) 20%, transparent)',
      'color': 'var(--color-gray-600, #4b5563)',
      '&:hover': {
        'background-color': 'color-mix(in oklab, var(--color-gray-600, #4b5563) 30%, transparent)',
      },
    },
    '.east-btn-default-bordered': {
      'border': '1px solid var(--color-gray-600, #4b5563)',
      'color': 'var(--color-gray-600, #4b5563)',
      '&:hover': {
        'background-color': 'color-mix(in oklab, var(--color-gray-600, #4b5563) 10%, transparent)',
      },
    },

    // Button variants - Primary (Blue)
    '.east-btn-primary': {
      'background-color': 'var(--color-blue-600, #2563eb)',
      'color': 'white',
      '&:hover': {
        'background-color': 'var(--color-blue-700, #1d4ed8)',
      },
    },
    '.east-btn-primary-faded': {
      'background-color': 'color-mix(in oklab, var(--color-blue-600, #2563eb) 20%, transparent)',
      'color': 'var(--color-blue-600, #2563eb)',
      '&:hover': {
        'background-color': 'color-mix(in oklab, var(--color-blue-600, #2563eb) 30%, transparent)',
      },
    },
    '.east-btn-primary-bordered': {
      'border': '1px solid var(--color-blue-600, #2563eb)',
      'color': 'var(--color-blue-600, #2563eb)',
      '&:hover': {
        'background-color': 'color-mix(in oklab, var(--color-blue-600, #2563eb) 10%, transparent)',
      },
    },

    // Button variants - Success (Green)
    '.east-btn-success': {
      'background-color': 'var(--color-green-600, #16a34a)',
      'color': 'white',
      '&:hover': {
        'background-color': 'var(--color-green-700, #15803d)',
      },
    },
  });

  // Add utility classes
  api.addUtilities({
    '.east-loading': {
      'opacity': '0.7',
      'pointer-events': 'none',
      'position': 'relative',
      '&::after': {
        'content': '""',
        'border': '2px solid transparent',
        'border-top-color': 'currentColor',
        'border-left-color': 'currentColor',
        'border-radius': '50%',
        'width': '1em',
        'height': '1em',
        'position': 'absolute',
        'right': '0.625em',
        'animation': 'east-spinner 0.6s linear infinite',
      },
    },
  });

  // Add keyframes
  api.addBase({
    '@keyframes east-spinner': {
      'to': {
        'transform': 'rotate(360deg)',
      },
    },
  });
}