@semiont/react-ui 0.2.30 → 0.2.31

package/src/integrations/tailwind-plugin.js

@@ -0,0 +1,224 @@
+/**
+ * Tailwind CSS Plugin for Semiont Components
+ *
+ * This plugin provides utilities for styling Semiont components
+ * using Tailwind CSS classes while respecting the data-attribute architecture.
+ */
+
+const plugin = require('tailwindcss/plugin');
+const { tokens } = require('../design-tokens');
+
+module.exports = plugin(function({ addBase, addComponents, addUtilities, theme }) {
+  // Add base styles for CSS variables
+  addBase({
+    ':root': Object.entries(tokens.colors.primary).reduce((acc, [key, value]) => ({
+      ...acc,
+      [`--semiont-color-primary-${key}`]: value
+    }), {}),
+  });
+
+  // Add component styles
+  addComponents({
+    // Button component styles
+    '.semiont-button': {
+      '@apply relative inline-flex items-center justify-center': {},
+      '@apply font-medium transition-all duration-200': {},
+      '@apply focus:outline-none focus:ring-2 focus:ring-offset-2': {},
+      '@apply disabled:opacity-50 disabled:cursor-not-allowed': {},
+    },
+
+    // Button variants
+    '.semiont-button[data-variant="primary"]': {
+      '@apply bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700': {},
+      '@apply focus:ring-blue-500': {},
+    },
+    '.semiont-button[data-variant="secondary"]': {
+      '@apply bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300': {},
+      '@apply focus:ring-gray-500': {},
+    },
+    '.semiont-button[data-variant="tertiary"]': {
+      '@apply bg-transparent text-blue-600 ring-1 ring-inset ring-blue-200': {},
+      '@apply hover:bg-blue-50 hover:ring-blue-300 active:bg-blue-100': {},
+      '@apply focus:ring-blue-500': {},
+    },
+    '.semiont-button[data-variant="danger"]': {
+      '@apply bg-red-500 text-white hover:bg-red-600 active:bg-red-700': {},
+      '@apply focus:ring-red-500': {},
+    },
+    '.semiont-button[data-variant="warning"]': {
+      '@apply bg-amber-500 text-gray-900 hover:bg-amber-600 active:bg-amber-700': {},
+      '@apply focus:ring-amber-500': {},
+    },
+    '.semiont-button[data-variant="ghost"]': {
+      '@apply bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200': {},
+      '@apply focus:ring-gray-500': {},
+    },
+
+    // Button sizes
+    '.semiont-button[data-size="xs"]': {
+      '@apply px-2 py-1 text-xs rounded min-h-[1.75rem]': {},
+    },
+    '.semiont-button[data-size="sm"]': {
+      '@apply px-3 py-1.5 text-sm rounded min-h-[2rem]': {},
+    },
+    '.semiont-button[data-size="md"]': {
+      '@apply px-4 py-2 text-base rounded-md min-h-[2.5rem]': {},
+    },
+    '.semiont-button[data-size="lg"]': {
+      '@apply px-6 py-2.5 text-lg rounded-md min-h-[3rem]': {},
+    },
+    '.semiont-button[data-size="xl"]': {
+      '@apply px-8 py-3 text-xl rounded-lg min-h-[3.5rem]': {},
+    },
+
+    // Icon-only buttons
+    '.semiont-button[data-icon-only="true"][data-size="xs"]': {
+      '@apply p-1 w-7 h-7': {},
+    },
+    '.semiont-button[data-icon-only="true"][data-size="sm"]': {
+      '@apply p-1.5 w-8 h-8': {},
+    },
+    '.semiont-button[data-icon-only="true"][data-size="md"]': {
+      '@apply p-2 w-10 h-10': {},
+    },
+    '.semiont-button[data-icon-only="true"][data-size="lg"]': {
+      '@apply p-2.5 w-12 h-12': {},
+    },
+    '.semiont-button[data-icon-only="true"][data-size="xl"]': {
+      '@apply p-3 w-14 h-14': {},
+    },
+
+    // Full width
+    '.semiont-button[data-full-width="true"]': {
+      '@apply w-full': {},
+    },
+
+    // Loading state
+    '.semiont-button[data-loading="true"]': {
+      '@apply pointer-events-none': {},
+    },
+    '.semiont-button[data-loading="true"] .semiont-button-content': {
+      '@apply invisible': {},
+    },
+    '.semiont-button[data-loading="true"] .semiont-button-icon': {
+      '@apply invisible': {},
+    },
+
+    // Button spinner
+    '.semiont-button-spinner': {
+      '@apply absolute inset-0 flex items-center justify-center': {},
+    },
+    '.semiont-spinner-svg': {
+      '@apply animate-spin w-5 h-5': {},
+    },
+
+    // Button content and icons
+    '.semiont-button-content': {
+      '@apply inline-flex items-center': {},
+    },
+    '.semiont-button-icon': {
+      '@apply inline-flex items-center justify-center flex-shrink-0': {},
+    },
+    '.semiont-button-icon-left': {
+      '@apply mr-2': {},
+    },
+    '.semiont-button-icon-right': {
+      '@apply ml-2': {},
+    },
+
+    // Button group
+    '.semiont-button-group': {
+      '@apply flex': {},
+    },
+    '.semiont-button-group[data-orientation="horizontal"]': {
+      '@apply flex-row': {},
+    },
+    '.semiont-button-group[data-orientation="vertical"]': {
+      '@apply flex-col': {},
+    },
+
+    // Button group spacing
+    '.semiont-button-group[data-spacing="xs"]': {
+      '@apply gap-1': {},
+    },
+    '.semiont-button-group[data-spacing="sm"]': {
+      '@apply gap-2': {},
+    },
+    '.semiont-button-group[data-spacing="md"]': {
+      '@apply gap-4': {},
+    },
+    '.semiont-button-group[data-spacing="lg"]': {
+      '@apply gap-6': {},
+    },
+
+    // Attached button groups
+    '.semiont-button-group[data-attached="true"]': {
+      '@apply gap-0': {},
+    },
+    '.semiont-button-group[data-attached="true"][data-orientation="horizontal"] .semiont-button:not(:first-child)': {
+      '@apply rounded-l-none -ml-px': {},
+    },
+    '.semiont-button-group[data-attached="true"][data-orientation="horizontal"] .semiont-button:not(:last-child)': {
+      '@apply rounded-r-none': {},
+    },
+    '.semiont-button-group[data-attached="true"][data-orientation="vertical"] .semiont-button:not(:first-child)': {
+      '@apply rounded-t-none -mt-px': {},
+    },
+    '.semiont-button-group[data-attached="true"][data-orientation="vertical"] .semiont-button:not(:last-child)': {
+      '@apply rounded-b-none': {},
+    },
+  });
+
+  // Add utility classes for custom data attributes
+  addUtilities({
+    '.semiont-variant-primary': {
+      '&[data-variant="primary"]': {
+        '@apply bg-blue-500 text-white': {},
+      },
+    },
+    '.semiont-variant-secondary': {
+      '&[data-variant="secondary"]': {
+        '@apply bg-gray-100 text-gray-900': {},
+      },
+    },
+    '.semiont-size-sm': {
+      '&[data-size="sm"]': {
+        '@apply px-3 py-1.5 text-sm': {},
+      },
+    },
+    '.semiont-size-md': {
+      '&[data-size="md"]': {
+        '@apply px-4 py-2 text-base': {},
+      },
+    },
+    '.semiont-size-lg': {
+      '&[data-size="lg"]': {
+        '@apply px-6 py-2.5 text-lg': {},
+      },
+    },
+  });
+}, {
+  // Plugin configuration
+  theme: {
+    extend: {
+      colors: {
+        semiont: {
+          primary: tokens.colors.primary,
+          secondary: tokens.colors.secondary,
+          semantic: tokens.colors.semantic,
+          neutral: tokens.colors.neutral,
+        },
+      },
+      spacing: tokens.spacing,
+      fontSize: tokens.typography.fontSize,
+      borderRadius: tokens.borderRadius,
+      transitionDuration: tokens.transitions.duration,
+    },
+  },
+});
+
+// Export for CommonJS
+module.exports.semiontPlugin = module.exports;
+
+// Export for ESM
+module.exports.default = module.exports;

package/src/styles/base/reset.css

@@ -0,0 +1,105 @@
+/**
+ * CSS Reset / Normalize
+ *
+ * Minimal reset to ensure consistent cross-browser rendering
+ * while maintaining semantic HTML defaults
+ */
+
+/* Box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margins and paddings */
+html,
+body,
+div,
+span,
+h1, h2, h3, h4, h5, h6,
+p,
+a,
+img,
+ul, ol, li,
+table, tbody, tfoot, thead, tr, th, td,
+article, aside, footer, header, nav, section {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* Set default font */
+body {
+  font-family: var(--semiont-font-sans);
+  line-height: 1.5;
+  color: var(--semiont-text-primary);
+  background-color: var(--semiont-bg-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Remove list styles */
+ul,
+ol {
+  list-style: none;
+}
+
+/* Remove default table spacing */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Make images responsive by default */
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Reset button styles */
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
+
+/* Reset link styles */
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Form elements */
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+/* Remove spinner from number inputs */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  appearance: textfield;
+}
+
+/* Focus visible for accessibility */
+:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+}
+
+/* Remove focus outline for mouse users */
+:focus:not(:focus-visible) {
+  outline: none;
+}