@3fn/core 14.0.0 → 15.0.0

package/src/components/core/Button-CTA/examples/BasicUsage.tsx

@@ -1,219 +0,0 @@
-/**
- * Basic Usage Examples for Button-CTA Component
- * 
- * This file demonstrates simple, common usage patterns for the Button-CTA component.
- * Each example shows a different aspect of the component's basic functionality.
- * 
- * Stemma System Naming: [Family]-[Type] = Button-CTA
- * Component Type: Standalone (no behavioral variants)
- * 
- * @module Button-CTA/examples/BasicUsage
- */
-
-import { ButtonCTA } from '../platforms/web/ButtonCTA.web';
-
-/**
- * Example 1: Default Button (Medium, Primary)
- * 
- * The simplest usage with only required props. This demonstrates the default
- * button appearance with medium size and primary style.
- * 
- * Default values:
- * - size: 'medium' (48px height)
- * - variant: 'primary' (filled background with primary color)
- * - noWrap: false (text wraps if needed)
- * 
- * @example
- * ```html
- * <button-cta label="Click me"></button-cta>
- * ```
- */
-export function defaultButton(): void {
-  const button = document.createElement('button-cta') as ButtonCTA;
-  button.label = 'Click me';
-  
-  // Add event listener for button press
-  button.addEventListener('press', () => {
-    console.log('Default button clicked!');
-  });
-  
-  document.body.appendChild(button);
-}
-
-/**
- * Example 2: Button with Custom Label
- * 
- * Demonstrates how to set a custom label text. The label should be concise
- * and action-oriented to clearly communicate the button's purpose.
- * 
- * Best practices for labels:
- * - Use action verbs (Save, Submit, Continue, Cancel)
- * - Keep it short (1-3 words)
- * - Be specific about the action
- * - Consider internationalization (text may be longer in other languages)
- * 
- * @example
- * ```html
- * <button-cta label="Save Changes"></button-cta>
- * ```
- */
-export function customLabelButton(): void {
-  const button = document.createElement('button-cta') as ButtonCTA;
-  button.label = 'Save Changes';
-  
-  // Add event listener for button press
-  button.addEventListener('press', () => {
-    console.log('Save Changes button clicked!');
-  });
-  
-  document.body.appendChild(button);
-}
-
-/**
- * Example 3: Button with onPress Handler
- * 
- * Demonstrates how to attach a click/press handler to respond to user interaction.
- * The handler is called when the button is clicked, tapped, or activated via
- * keyboard (Enter or Space key).
- * 
- * The 'press' event:
- * - Bubbles up through the DOM
- * - Works with click, tap, Enter key, and Space key
- * - Provides originalEvent in event.detail for advanced use cases
- * 
- * @example
- * ```typescript
- * const button = document.createElement('button-cta') as ButtonCTA;
- * button.label = 'Submit Form';
- * button.addEventListener('press', handleSubmit);
- * ```
- */
-export function buttonWithHandler(): void {
-  const button = document.createElement('button-cta') as ButtonCTA;
-  button.label = 'Submit Form';
-  
-  // Define a handler function
-  const handleSubmit = () => {
-    console.log('Form submitted!');
-    // In a real application, you would:
-    // - Validate form data
-    // - Send data to server
-    // - Show success/error message
-    // - Navigate to next page
-  };
-  
-  // Attach the handler to the 'press' event
-  button.addEventListener('press', handleSubmit);
-  
-  document.body.appendChild(button);
-}
-
-/**
- * Example 4: Unavailable Actions (no disabled state)
- * 
- * DesignerPunk does not support disabled states for usability and
- * accessibility reasons. If an action is unavailable, the component
- * should not be rendered.
- * 
- * For in-flight async operations (e.g. form submission), use the loading
- * state instead of disabling the button. For actions the user cannot take
- * yet, keep the button interactive and validate on press, or do not render
- * the button at all.
- * 
- * @example
- * ```typescript
- * // Conditionally render instead of disabling
- * if (userCanSubmit) {
- *   const button = document.createElement('button-cta') as ButtonCTA;
- *   button.label = 'Submit';
- *   button.addEventListener('press', handleSubmit);
- *   document.body.appendChild(button);
- * }
- * ```
- */
-export function conditionallyRenderedButton(): void {
-  const button = document.createElement('button-cta') as ButtonCTA;
-  button.label = 'Submit';
-  
-  button.addEventListener('press', () => {
-    console.log('Submitted');
-  });
-  
-  document.body.appendChild(button);
-}
-
-/**
- * Example 5: All Examples Together
- * 
- * Demonstrates how to render all basic examples in a single container.
- * This is useful for testing and visual comparison of different button states.
- * 
- * @example
- * ```typescript
- * renderAllBasicExamples();
- * ```
- */
-export function renderAllBasicExamples(): void {
-  // Create container for examples
-  const container = document.createElement('div');
-  container.style.padding = '24px';
-  container.style.display = 'flex';
-  container.style.flexDirection = 'column';
-  container.style.gap = '16px';
-  
-  // Example 1: Default button
-  const defaultBtn = document.createElement('button-cta') as ButtonCTA;
-  defaultBtn.label = 'Default Button';
-  defaultBtn.addEventListener('press', () => console.log('Default clicked'));
-  container.appendChild(defaultBtn);
-  
-  // Example 2: Custom label
-  const customLabelBtn = document.createElement('button-cta') as ButtonCTA;
-  customLabelBtn.label = 'Save Changes';
-  customLabelBtn.addEventListener('press', () => console.log('Save clicked'));
-  container.appendChild(customLabelBtn);
-  
-  // Example 3: With handler
-  const handlerBtn = document.createElement('button-cta') as ButtonCTA;
-  handlerBtn.label = 'Submit Form';
-  handlerBtn.addEventListener('press', () => {
-    console.log('Form submitted!');
-    alert('Form submitted successfully!');
-  });
-  container.appendChild(handlerBtn);
-  
-  // Add container to document
-  document.body.appendChild(container);
-}
-
-/**
- * Usage Instructions
- * 
- * To use these examples in your application:
- * 
- * 1. Import the example functions:
- *    ```typescript
- *    import { defaultButton, customLabelButton } from './examples/BasicUsage';
- *    ```
- * 
- * 2. Call the example function to render the button:
- *    ```typescript
- *    defaultButton(); // Renders default button
- *    ```
- * 
- * 3. Or render all examples at once:
- *    ```typescript
- *    import { renderAllBasicExamples } from './examples/BasicUsage';
- *    renderAllBasicExamples();
- *    ```
- * 
- * 4. For HTML usage (without TypeScript):
- *    ```html
- *    <button-cta label="Click me"></button-cta>
- *    <script>
- *      document.querySelector('button-cta').addEventListener('press', () => {
- *        console.log('Clicked!');
- *      });
- *    </script>
- *    ```
- */

package/src/components/core/Button-CTA/examples/Variants.html

@@ -1,263 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <!--
-    VALIDATION FILE - NOT DOCUMENTATION
-    
-    This HTML file validates that Button-CTA examples work correctly.
-    It is NOT the source of truth for component documentation.
-    
-    For component usage and examples, see: ../README.md
-    
-    Stemma System Naming: [Family]-[Type] = Button-CTA
-    Component Type: Standalone (no behavioral variants)
-    
-    Purpose: Automated validation that examples remain functional
-    Usage: Run validation script or open in browser for manual testing
-  -->
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Button-CTA Validation - Variants</title>
-  <style>
-    body {
-      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      padding: 24px;
-      max-width: 1000px;
-      margin: 0 auto;
-    }
-    
-    .example-section {
-      margin-bottom: 32px;
-      padding: 16px;
-      border: 1px solid #e0e0e0;
-      border-radius: 8px;
-    }
-    
-    .example-section h2 {
-      margin-top: 0;
-      font-size: 18px;
-      font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-weight: 600;
-      color: #333;
-    }
-    
-    .example-section p {
-      color: #666;
-      margin-bottom: 16px;
-    }
-    
-    .variant-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 16px;
-      margin-top: 16px;
-    }
-    
-    .variant-item {
-      padding: 16px;
-      background: #f9f9f9;
-      border-radius: 4px;
-      text-align: center;
-    }
-    
-    .variant-item h3 {
-      margin: 0 0 12px 0;
-      font-size: 14px;
-      font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-weight: 600;
-      color: #666;
-    }
-    
-    .variant-item .specs {
-      margin-top: 8px;
-      font-size: 12px;
-      color: #999;
-    }
-    
-    .comparison-table {
-      width: 100%;
-      border-collapse: collapse;
-      margin-top: 16px;
-    }
-    
-    .comparison-table th,
-    .comparison-table td {
-      padding: 12px;
-      text-align: left;
-      border-bottom: 1px solid #e0e0e0;
-    }
-    
-    .comparison-table th {
-      background: #f5f5f5;
-      font-weight: 600;
-    }
-    
-    .comparison-table td:first-child {
-      font-weight: 500;
-    }
-  </style>
-</head>
-<body>
-  <h1 style="font-family: Rajdhani, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600;">Button-CTA - Size and Style Variants</h1>
-  
-  <div style="background: #e6fff5; padding: 16px; border-radius: 8px; border-left: 4px solid #00FF88; margin-bottom: 24px;">
-    <strong style="font-family: Rajdhani, sans-serif;">✨ Updated Design System:</strong> Buttons now use Rajdhani typography and the updated color palette with purple for primary actions.
-  </div>
-  
-  <div class="example-section">
-    <h2>Size Variants</h2>
-    <p>Three size variants provide flexibility for different UI contexts and hierarchies.</p>
-    <div class="variant-grid">
-      <div class="variant-item">
-        <h3>Small (40px)</h3>
-        <button-cta label="Small Button" size="small"></button-cta>
-        <div class="specs">
-          Height: 40px<br>
-          Typography: bodyMd<br>
-          Padding: 16px horizontal
-        </div>
-      </div>
-      <div class="variant-item">
-        <h3>Medium (48px)</h3>
-        <button-cta label="Medium Button" size="medium"></button-cta>
-        <div class="specs">
-          Height: 48px<br>
-          Typography: bodyMd<br>
-          Padding: 24px horizontal
-        </div>
-      </div>
-      <div class="variant-item">
-        <h3>Large (56px)</h3>
-        <button-cta label="Large Button" size="large"></button-cta>
-        <div class="specs">
-          Height: 56px<br>
-          Typography: bodyLg<br>
-          Padding: 32px horizontal
-        </div>
-      </div>
-    </div>
-  </div>
-  
-  <div class="example-section">
-    <h2>Style Variants</h2>
-    <p>Three visual styles establish clear hierarchy and distinguish between primary and secondary actions.</p>
-    <div class="variant-grid">
-      <div class="variant-item">
-        <h3>Primary</h3>
-        <button-cta label="Primary Action" variant="primary"></button-cta>
-        <div class="specs">
-          Filled background<br>
-          Primary color<br>
-          High emphasis
-        </div>
-      </div>
-      <div class="variant-item">
-        <h3>Secondary</h3>
-        <button-cta label="Secondary Action" variant="secondary"></button-cta>
-        <div class="specs">
-          Outlined border<br>
-          Primary color text<br>
-          Medium emphasis
-        </div>
-      </div>
-      <div class="variant-item">
-        <h3>Tertiary</h3>
-        <button-cta label="Tertiary Action" variant="tertiary"></button-cta>
-        <div class="specs">
-          Text only<br>
-          Primary color text<br>
-          Low emphasis
-        </div>
-      </div>
-    </div>
-  </div>
-  
-  <div class="example-section">
-    <h2>Size × Style Matrix</h2>
-    <p>All combinations of size and style variants work together seamlessly.</p>
-    <table class="comparison-table">
-      <thead>
-        <tr>
-          <th>Size</th>
-          <th>Primary</th>
-          <th>Secondary</th>
-          <th>Tertiary</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Small</td>
-          <td><button-cta label="Small Primary" size="small" variant="primary"></button-cta></td>
-          <td><button-cta label="Small Secondary" size="small" variant="secondary"></button-cta></td>
-          <td><button-cta label="Small Tertiary" size="small" variant="tertiary"></button-cta></td>
-        </tr>
-        <tr>
-          <td>Medium</td>
-          <td><button-cta label="Medium Primary" size="medium" variant="primary"></button-cta></td>
-          <td><button-cta label="Medium Secondary" size="medium" variant="secondary"></button-cta></td>
-          <td><button-cta label="Medium Tertiary" size="medium" variant="tertiary"></button-cta></td>
-        </tr>
-        <tr>
-          <td>Large</td>
-          <td><button-cta label="Large Primary" size="large" variant="primary"></button-cta></td>
-          <td><button-cta label="Large Secondary" size="large" variant="secondary"></button-cta></td>
-          <td><button-cta label="Large Tertiary" size="large" variant="tertiary"></button-cta></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  
-  <div class="example-section">
-    <h2>Usage Guidance</h2>
-    <p>When to use each variant:</p>
-    <table class="comparison-table">
-      <thead>
-        <tr>
-          <th>Variant</th>
-          <th>Use Case</th>
-          <th>Example</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Small Primary</td>
-          <td>Compact spaces, inline actions</td>
-          <td>Table row actions, card buttons</td>
-        </tr>
-        <tr>
-          <td>Medium Primary</td>
-          <td>Standard forms, dialogs</td>
-          <td>Form submit, modal confirm</td>
-        </tr>
-        <tr>
-          <td>Large Primary</td>
-          <td>Hero sections, prominent CTAs</td>
-          <td>Landing page signup, checkout</td>
-        </tr>
-        <tr>
-          <td>Secondary</td>
-          <td>Alternative actions</td>
-          <td>Cancel, back, secondary options</td>
-        </tr>
-        <tr>
-          <td>Tertiary</td>
-          <td>Low-priority actions</td>
-          <td>Learn more, skip, dismiss</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  
-  <script type="module">
-    // Import the Button-CTA web component
-    // Stemma System: Button-CTA follows [Family]-[Type] naming pattern
-    import { ButtonCTA } from '../platforms/web/ButtonCTA.web.js';
-    
-    // All variants follow the same token-based styling system:
-    // - Size variants control height, padding, and typography
-    // - Style variants control background, border, and text color
-    // - All values derived from design system tokens
-    // - Mathematical relationships maintained across all variants
-  </script>
-</body>
-</html>

package/src/components/core/Button-CTA/examples/WithIcon.html

@@ -1,166 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <!--
-    VALIDATION FILE - NOT DOCUMENTATION
-    
-    This HTML file validates that Button-CTA examples work correctly.
-    It is NOT the source of truth for component documentation.
-    
-    For component usage and examples, see: ../README.md
-    
-    Stemma System Naming: [Family]-[Type] = Button-CTA
-    Component Type: Standalone (no behavioral variants)
-    
-    Purpose: Automated validation that examples remain functional
-    Usage: Run validation script or open in browser for manual testing
-  -->
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Button-CTA Validation - With Icon</title>
-  <style>
-    body {
-      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      padding: 24px;
-      max-width: 800px;
-      margin: 0 auto;
-    }
-    
-    .example-section {
-      margin-bottom: 32px;
-      padding: 16px;
-      border: 1px solid #e0e0e0;
-      border-radius: 8px;
-    }
-    
-    .example-section h2 {
-      margin-top: 0;
-      font-size: 18px;
-      font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-weight: 600;
-      color: #333;
-    }
-    
-    .example-section p {
-      color: #666;
-      margin-bottom: 16px;
-    }
-    
-    .button-container {
-      display: flex;
-      gap: 16px;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-    
-    .comparison {
-      display: flex;
-      gap: 16px;
-      margin-top: 12px;
-    }
-    
-    .comparison-item {
-      flex: 1;
-      padding: 12px;
-      background: #f9f9f9;
-      border-radius: 4px;
-    }
-    
-    .comparison-item h3 {
-      margin: 0 0 8px 0;
-      font-size: 14px;
-      font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-weight: 600;
-      color: #666;
-    }
-  </style>
-</head>
-<body>
-  <h1 style="font-family: Rajdhani, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600;">Button-CTA - Icon Integration Examples</h1>
-  
-  <div style="background: #e6fff5; padding: 16px; border-radius: 8px; border-left: 4px solid #00FF88; margin-bottom: 24px;">
-    <strong style="font-family: Rajdhani, sans-serif;">✨ Updated Design System:</strong> Buttons use Rajdhani typography and integrate seamlessly with the Icon system.
-  </div>
-  
-  <div class="example-section">
-    <h2>Example 1: Button with Leading Icon</h2>
-    <p>Buttons can include an optional leading icon to enhance meaning and visual appeal.</p>
-    <div class="button-container">
-      <button-cta label="Save" icon="save"></button-cta>
-      <button-cta label="Delete" icon="trash-2" variant="secondary"></button-cta>
-      <button-cta label="Settings" icon="settings" variant="tertiary"></button-cta>
-    </div>
-  </div>
-  
-  <div class="example-section">
-    <h2>Example 2: Icon Size Selection</h2>
-    <p>Icon size automatically adjusts based on button size: size100 (24px) for small/medium, size125 (32px) for large.</p>
-    <div class="button-container">
-      <button-cta label="Small" icon="check" size="small"></button-cta>
-      <button-cta label="Medium" icon="check" size="medium"></button-cta>
-      <button-cta label="Large" icon="check" size="large"></button-cta>
-    </div>
-  </div>
-  
-  <div class="example-section">
-    <h2>Example 3: Optical Balance Effect</h2>
-    <p>Secondary and tertiary buttons apply optical balance blend to icons for visual weight compensation.</p>
-    <div class="comparison">
-      <div class="comparison-item">
-        <h3>Primary (No Blend)</h3>
-        <button-cta label="Primary" icon="star" variant="primary"></button-cta>
-      </div>
-      <div class="comparison-item">
-        <h3>Secondary (With Blend)</h3>
-        <button-cta label="Secondary" icon="star" variant="secondary"></button-cta>
-      </div>
-      <div class="comparison-item">
-        <h3>Tertiary (With Blend)</h3>
-        <button-cta label="Tertiary" icon="star" variant="tertiary"></button-cta>
-      </div>
-    </div>
-  </div>
-  
-  <div class="example-section">
-    <h2>Example 4: Icon-Text Spacing</h2>
-    <p>Spacing between icon and text adjusts based on button size: tight (4px) for small, normal (8px) for medium/large.</p>
-    <div class="button-container">
-      <button-cta label="Small Spacing" icon="arrow-right" size="small"></button-cta>
-      <button-cta label="Medium Spacing" icon="arrow-right" size="medium"></button-cta>
-      <button-cta label="Large Spacing" icon="arrow-right" size="large"></button-cta>
-    </div>
-  </div>
-  
-  <div class="example-section">
-    <h2>Example 5: With and Without Icons</h2>
-    <p>Comparison showing buttons with and without icons for the same action.</p>
-    <div class="comparison">
-      <div class="comparison-item">
-        <h3>Without Icon</h3>
-        <button-cta label="Continue"></button-cta>
-      </div>
-      <div class="comparison-item">
-        <h3>With Icon</h3>
-        <button-cta label="Continue" icon="arrow-right"></button-cta>
-      </div>
-    </div>
-  </div>
-  
-  <script type="module">
-    // Import the Button-CTA web component
-    // Stemma System: Button-CTA follows [Family]-[Type] naming pattern
-    import { ButtonCTA } from '../platforms/web/ButtonCTA.web.js';
-    
-    // Note: Icons are automatically rendered by the Button-CTA component
-    // using the Icon System (Spec 004). The icon prop accepts any valid
-    // icon name from the Feather icon set.
-    
-    // Icon behavior:
-    // - Icons are marked as decorative (aria-hidden="true")
-    // - Icon color inherits from button text color
-    // - Optical balance blend applied to secondary/tertiary styles
-    // - Icon size scales with button size
-    // - Icon-text spacing follows design system tokens
-  </script>
-</body>
-</html>

package/src/components/core/Button-CTA/index.ts

@@ -1,20 +0,0 @@
-/**
- * Button-CTA Component Exports
- * 
- * Central export point for Button-CTA component types, tokens, and utilities.
- * 
- * Stemma System Naming: [Family]-[Type] = Button-CTA
- * Component Type: Standalone (no behavioral variants)
- * 
- * @module Button-CTA
- */
-
-// Type definitions
-export type { ButtonProps, ButtonSize, ButtonStyle } from './types';
-
-// Component tokens
-export { ButtonCTATokens, getButtonCTAMinWidth } from './Button-CTA.tokens';
-export type { ButtonCTAMinWidthVariant } from './Button-CTA.tokens';
-
-// Platform implementations are imported directly from their platform-specific paths
-// e.g., import { ButtonCTA } from './platforms/web/ButtonCTA.web';