@semiont/react-ui 0.2.30 → 0.2.31

package/src/examples/ButtonUsageExample.tsx

@@ -0,0 +1,242 @@
+/**
+ * Example: Using the CSS-agnostic Button component
+ *
+ * This demonstrates how to use the Button component with different
+ * styling approaches and all its features.
+ */
+
+import React from 'react';
+import { Button, ButtonGroup } from '../components/Button/Button';
+
+// Import styles (users can replace this with their own styles)
+import '../styles/index.css';
+
+export function ButtonUsageExample() {
+  const [loading, setLoading] = React.useState(false);
+
+  const handleClick = () => {
+    setLoading(true);
+    // Simulate async operation
+    setTimeout(() => setLoading(false), 2000);
+  };
+
+  return (
+    <div className="button-examples">
+      <h2>Button Component Examples</h2>
+
+      {/* Variants */}
+      <section>
+        <h3>Variants</h3>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button variant="primary">Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="tertiary">Tertiary</Button>
+          <Button variant="danger">Danger</Button>
+          <Button variant="warning">Warning</Button>
+          <Button variant="ghost">Ghost</Button>
+        </div>
+      </section>
+
+      {/* Sizes */}
+      <section>
+        <h3>Sizes</h3>
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
+          <Button size="xs">Extra Small</Button>
+          <Button size="sm">Small</Button>
+          <Button size="md">Medium</Button>
+          <Button size="lg">Large</Button>
+          <Button size="xl">Extra Large</Button>
+        </div>
+      </section>
+
+      {/* With Icons */}
+      <section>
+        <h3>With Icons</h3>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button
+            variant="primary"
+            leftIcon={
+              <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 7a1 1 0 012 0v4a1 1 0 11-2 0V7zm2 8a1 1 0 100-2 1 1 0 000 2z"/>
+              </svg>
+            }
+          >
+            With Left Icon
+          </Button>
+
+          <Button
+            variant="secondary"
+            rightIcon={
+              <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"/>
+              </svg>
+            }
+          >
+            With Right Icon
+          </Button>
+
+          <Button
+            variant="tertiary"
+            leftIcon={
+              <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"/>
+                <path d="M3 5a2 2 0 012-2 1 1 0 000 2H5a2 2 0 00-2 2v6h2V7h10v6h2V7a2 2 0 00-2-2h-.5a1 1 0 000-2H15a2 2 0 012 2v8a2 2 0 01-2 2h-2v3a1 1 0 11-2 0v-3H9v3a1 1 0 11-2 0v-3H5a2 2 0 01-2-2V5z"/>
+              </svg>
+            }
+            rightIcon={
+              <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd"/>
+              </svg>
+            }
+          >
+            Both Icons
+          </Button>
+        </div>
+      </section>
+
+      {/* Icon Only */}
+      <section>
+        <h3>Icon Only Buttons</h3>
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <Button variant="primary" size="sm" iconOnly>
+            <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"/>
+            </svg>
+          </Button>
+
+          <Button variant="secondary" size="md" iconOnly>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"/>
+            </svg>
+          </Button>
+
+          <Button variant="ghost" size="lg" iconOnly>
+            <svg width="24" height="24" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd"/>
+            </svg>
+          </Button>
+        </div>
+      </section>
+
+      {/* States */}
+      <section>
+        <h3>States</h3>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button variant="primary">Normal</Button>
+          <Button variant="primary" active>Active/Pressed</Button>
+          <Button variant="primary" disabled>Disabled</Button>
+          <Button variant="primary" loading onClick={handleClick}>
+            {loading ? 'Loading...' : 'Click to Load'}
+          </Button>
+        </div>
+      </section>
+
+      {/* Full Width */}
+      <section>
+        <h3>Full Width</h3>
+        <div style={{ maxWidth: '400px' }}>
+          <Button variant="primary" fullWidth>
+            Full Width Button
+          </Button>
+        </div>
+      </section>
+
+      {/* Button Groups */}
+      <section>
+        <h3>Button Groups</h3>
+
+        <div style={{ marginBottom: '1rem' }}>
+          <h4>Horizontal Group</h4>
+          <ButtonGroup orientation="horizontal" spacing="sm">
+            <Button variant="secondary" size="sm">First</Button>
+            <Button variant="secondary" size="sm">Second</Button>
+            <Button variant="secondary" size="sm">Third</Button>
+          </ButtonGroup>
+        </div>
+
+        <div style={{ marginBottom: '1rem' }}>
+          <h4>Attached Group</h4>
+          <ButtonGroup orientation="horizontal" attached>
+            <Button variant="primary">Previous</Button>
+            <Button variant="primary" active>Current</Button>
+            <Button variant="primary">Next</Button>
+          </ButtonGroup>
+        </div>
+
+        <div style={{ marginBottom: '1rem' }}>
+          <h4>Vertical Group</h4>
+          <ButtonGroup orientation="vertical" spacing="xs">
+            <Button variant="ghost" fullWidth>Option 1</Button>
+            <Button variant="ghost" fullWidth>Option 2</Button>
+            <Button variant="ghost" fullWidth>Option 3</Button>
+          </ButtonGroup>
+        </div>
+
+        <div>
+          <h4>Mixed Variants Group</h4>
+          <ButtonGroup orientation="horizontal" spacing="md">
+            <Button variant="danger">Delete</Button>
+            <Button variant="warning">Archive</Button>
+            <Button variant="primary">Save</Button>
+          </ButtonGroup>
+        </div>
+      </section>
+
+      {/* Custom Styling */}
+      <section>
+        <h3>Custom Styling</h3>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          {/* Example with inline styles */}
+          <Button
+            variant="primary"
+            style={{
+              backgroundColor: '#8b5cf6',
+              borderRadius: '9999px',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em'
+            }}
+          >
+            Custom Inline Styles
+          </Button>
+
+          {/* Example with custom className */}
+          <Button
+            variant="secondary"
+            className="custom-button-class"
+          >
+            Custom Class
+          </Button>
+        </div>
+      </section>
+
+      {/* Accessibility Example */}
+      <section>
+        <h3>Accessibility</h3>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button
+            variant="primary"
+            aria-label="Save document"
+            aria-describedby="save-description"
+          >
+            Save
+          </Button>
+          <span id="save-description" style={{ fontSize: '0.875rem', color: '#6b7280' }}>
+            Saves the current document to your drafts
+          </span>
+        </div>
+      </section>
+
+      {/* Form Integration */}
+      <section>
+        <h3>Form Integration</h3>
+        <form onSubmit={(e) => { e.preventDefault(); alert('Form submitted!'); }}>
+          <div style={{ display: 'flex', gap: '1rem' }}>
+            <Button type="button" variant="ghost">Cancel</Button>
+            <Button type="reset" variant="secondary">Reset</Button>
+            <Button type="submit" variant="primary">Submit</Button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}

package/src/examples/button-css-modules.module.css

@@ -0,0 +1,164 @@
+/**
+ * Example: Button styling with CSS Modules
+ *
+ * This shows how to style the Button component using CSS Modules
+ * by targeting the data attributes with module-scoped styles.
+ */
+
+/* Base button styles */
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+/* Primary variant */
+.button[data-variant="primary"] {
+  background-color: #0080ff;
+  color: #ffffff;
+}
+
+.button[data-variant="primary"]:hover:not(:disabled) {
+  background-color: #0066cc;
+}
+
+.button[data-variant="primary"]:active:not(:disabled) {
+  background-color: #0052a3;
+}
+
+/* Secondary variant */
+.button[data-variant="secondary"] {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.button[data-variant="secondary"]:hover:not(:disabled) {
+  background-color: #e5e7eb;
+}
+
+.button[data-variant="secondary"]:active:not(:disabled) {
+  background-color: #d1d5db;
+}
+
+/* Ghost variant */
+.button[data-variant="ghost"] {
+  background-color: transparent;
+  color: currentColor;
+}
+
+.button[data-variant="ghost"]:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Size variants */
+.button[data-size="sm"] {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: 0.25rem;
+  min-height: 2rem;
+}
+
+.button[data-size="md"] {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border-radius: 0.375rem;
+  min-height: 2.5rem;
+}
+
+.button[data-size="lg"] {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+  border-radius: 0.375rem;
+  min-height: 3rem;
+}
+
+/* Icon-only styles */
+.button[data-icon-only="true"][data-size="sm"] {
+  padding: 0.375rem;
+  width: 2rem;
+}
+
+.button[data-icon-only="true"][data-size="md"] {
+  padding: 0.5rem;
+  width: 2.5rem;
+}
+
+.button[data-icon-only="true"][data-size="lg"] {
+  padding: 0.75rem;
+  width: 3rem;
+}
+
+/* Full width */
+.button[data-full-width="true"] {
+  width: 100%;
+}
+
+/* Loading state */
+.button[data-loading="true"] {
+  color: transparent;
+  pointer-events: none;
+}
+
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* Focus styles */
+.button:focus-visible {
+  outline: 2px solid #0080ff;
+  outline-offset: 2px;
+}
+
+/* Disabled state */
+.button:disabled,
+.button[data-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Icon spacing */
+.iconLeft {
+  margin-right: 0.5rem;
+}
+
+.iconRight {
+  margin-left: 0.5rem;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none !important;
+  }
+
+  .spinner {
+    animation: none !important;
+    transform: translate(-50%, -50%) !important;
+  }
+
+  @keyframes spin {
+    from, to {
+      transform: translate(-50%, -50%);
+    }
+  }
+}

package/src/examples/button-styled-components.tsx

@@ -0,0 +1,215 @@
+/**
+ * Example: Button styling with Styled Components (CSS-in-JS)
+ *
+ * This shows how to style the Button component using styled-components
+ * by wrapping it and styling based on data attributes.
+ */
+
+import styled from 'styled-components';
+import { Button as SemiontButton } from '../components/Button/Button';
+
+// Styled wrapper for the Button component
+export const StyledButton = styled(SemiontButton)`
+  /* Base styles */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: ${props => props.theme?.typography?.fontFamily?.sans || 'system-ui, -apple-system, sans-serif'};
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+
+  /* Primary variant */
+  &[data-variant="primary"] {
+    background-color: ${props => props.theme?.colors?.primary?.[500] || '#0080ff'};
+    color: white;
+
+    &:hover:not(:disabled) {
+      background-color: ${props => props.theme?.colors?.primary?.[600] || '#0066cc'};
+    }
+
+    &:active:not(:disabled) {
+      background-color: ${props => props.theme?.colors?.primary?.[700] || '#0052a3'};
+    }
+  }
+
+  /* Secondary variant */
+  &[data-variant="secondary"] {
+    background-color: ${props => props.theme?.colors?.neutral?.[100] || '#f3f4f6'};
+    color: ${props => props.theme?.colors?.neutral?.[900] || '#111827'};
+
+    &:hover:not(:disabled) {
+      background-color: ${props => props.theme?.colors?.neutral?.[200] || '#e5e7eb'};
+    }
+
+    &:active:not(:disabled) {
+      background-color: ${props => props.theme?.colors?.neutral?.[300] || '#d1d5db'};
+    }
+  }
+
+  /* Tertiary variant */
+  &[data-variant="tertiary"] {
+    background-color: transparent;
+    color: ${props => props.theme?.colors?.primary?.[500] || '#0080ff'};
+    box-shadow: inset 0 0 0 1px ${props => (props.theme?.colors?.primary?.[500] || '#0080ff') + '33'};
+
+    &:hover:not(:disabled) {
+      background-color: ${props => (props.theme?.colors?.primary?.[500] || '#0080ff') + '0a'};
+    }
+  }
+
+  /* Ghost variant */
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    color: inherit;
+
+    &:hover:not(:disabled) {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    &:active:not(:disabled) {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  /* Danger variant */
+  &[data-variant="danger"] {
+    background-color: ${props => props.theme?.colors?.error || '#ef4444'};
+    color: white;
+
+    &:hover:not(:disabled) {
+      background-color: ${props => props.theme?.colors?.errorDark || '#dc2626'};
+    }
+  }
+
+  /* Warning variant */
+  &[data-variant="warning"] {
+    background-color: ${props => props.theme?.colors?.warning || '#f59e0b'};
+    color: ${props => props.theme?.colors?.neutral?.[900] || '#111827'};
+
+    &:hover:not(:disabled) {
+      background-color: ${props => props.theme?.colors?.warningDark || '#d97706'};
+    }
+  }
+
+  /* Size variants */
+  &[data-size="xs"] {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    border-radius: 0.125rem;
+    min-height: 1.75rem;
+  }
+
+  &[data-size="sm"] {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    border-radius: 0.25rem;
+    min-height: 2rem;
+  }
+
+  &[data-size="md"] {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    border-radius: 0.375rem;
+    min-height: 2.5rem;
+  }
+
+  &[data-size="lg"] {
+    padding: 0.625rem 1.5rem;
+    font-size: 1.125rem;
+    border-radius: 0.375rem;
+    min-height: 3rem;
+  }
+
+  &[data-size="xl"] {
+    padding: 0.75rem 2rem;
+    font-size: 1.25rem;
+    border-radius: 0.5rem;
+    min-height: 3.5rem;
+  }
+
+  /* Icon-only buttons */
+  &[data-icon-only="true"] {
+    &[data-size="xs"] {
+      padding: 0.25rem;
+      width: 1.75rem;
+    }
+
+    &[data-size="sm"] {
+      padding: 0.375rem;
+      width: 2rem;
+    }
+
+    &[data-size="md"] {
+      padding: 0.5rem;
+      width: 2.5rem;
+    }
+
+    &[data-size="lg"] {
+      padding: 0.625rem;
+      width: 3rem;
+    }
+
+    &[data-size="xl"] {
+      padding: 0.75rem;
+      width: 3.5rem;
+    }
+  }
+
+  /* Full width */
+  &[data-full-width="true"] {
+    width: 100%;
+  }
+
+  /* Loading state */
+  &[data-loading="true"] {
+    pointer-events: none;
+    opacity: 0.75;
+  }
+
+  /* Focus styles */
+  &:focus-visible {
+    outline: 2px solid ${props => props.theme?.colors?.primary?.[500] || '#0080ff'};
+    outline-offset: 2px;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+// Example usage with theme
+const theme = {
+  colors: {
+    primary: '#0080ff',
+    primaryDark: '#0066cc',
+    primaryDarker: '#0052a3',
+    secondary: '#00ffff',
+    danger: '#ef4444',
+    dangerDark: '#dc2626',
+    warning: '#f59e0b',
+    warningDark: '#d97706',
+    gray100: '#f3f4f6',
+    gray200: '#e5e7eb',
+    gray300: '#d1d5db',
+    gray900: '#111827',
+  },
+  fonts: {
+    sans: 'Inter, system-ui, -apple-system, sans-serif',
+  }
+};
+
+// Example component using styled button
+export function ExampleStyledButton() {
+  return (
+    <StyledButton variant="primary" size="md">
+      Styled Components Button
+    </StyledButton>
+  );
+}

package/src/examples/button-tailwind.css

@@ -0,0 +1,51 @@
+/**
+ * Example: Button styling with Tailwind CSS
+ *
+ * This shows how to style the Button component using Tailwind utilities
+ * by targeting the data attributes.
+ */
+
+/* Primary button with Tailwind */
+.semiont-button[data-variant="primary"] {
+  @apply bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700;
+  @apply transition-colors duration-200;
+}
+
+/* Size variants with Tailwind */
+.semiont-button[data-size="sm"] {
+  @apply px-3 py-1.5 text-sm rounded;
+}
+
+.semiont-button[data-size="md"] {
+  @apply px-4 py-2 text-base rounded-md;
+}
+
+.semiont-button[data-size="lg"] {
+  @apply px-6 py-3 text-lg rounded-md;
+}
+
+/* Loading state */
+.semiont-button[data-loading="true"] {
+  @apply pointer-events-none opacity-75;
+}
+
+/* Full width */
+.semiont-button[data-full-width="true"] {
+  @apply w-full;
+}
+
+/* Icon-only button */
+.semiont-button[data-icon-only="true"] {
+  @apply p-2 aspect-square;
+}
+
+/* Focus styles */
+.semiont-button {
+  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+}
+
+/* Disabled state */
+.semiont-button:disabled,
+.semiont-button[data-disabled="true"] {
+  @apply opacity-50 cursor-not-allowed;
+}