@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/radio/radio.style.ts

@@ -0,0 +1,150 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    font-family: var(--nuraly-font-family-radio, var(--nuraly-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .radio-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-radio-gap, 8px);
+  }
+
+  .radio-input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    width: 0;
+    height: 0;
+  }
+
+  .radio-circle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--nuraly-border-radius-radio, 50%);
+    border: var(--nuraly-border-width-radio, 2px) solid var(--nuraly-color-radio-border, #d9d9d9);
+    background: var(--nuraly-color-radio-background, #ffffff);
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  /* Size variants */
+  :host([size="small"]) .radio-circle {
+    width: var(--nuraly-size-radio-small, 16px);
+    height: var(--nuraly-size-radio-small, 16px);
+  }
+
+  :host([size="medium"]) .radio-circle,
+  :host(:not([size])) .radio-circle {
+    width: var(--nuraly-size-radio-medium, 20px);
+    height: var(--nuraly-size-radio-medium, 20px);
+  }
+
+  :host([size="large"]) .radio-circle {
+    width: var(--nuraly-size-radio-large, 24px);
+    height: var(--nuraly-size-radio-large, 24px);
+  }
+
+  .radio-circle::after {
+    content: '';
+    display: block;
+    border-radius: var(--nuraly-border-radius-radio-dot, 50%);
+    background: var(--nuraly-color-radio-dot, #1677ff);
+    transform: scale(0);
+    transition: transform 0.2s ease;
+  }
+
+  :host([size="small"]) .radio-circle::after {
+    width: 8px;
+    height: 8px;
+  }
+
+  :host([size="medium"]) .radio-circle::after,
+  :host(:not([size])) .radio-circle::after {
+    width: 10px;
+    height: 10px;
+  }
+
+  :host([size="large"]) .radio-circle::after {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* Checked state */
+  :host([checked]) .radio-circle {
+    border-color: var(--nuraly-color-radio-checked-border, #1677ff);
+  }
+
+  :host([checked]) .radio-circle::after {
+    transform: scale(1);
+  }
+
+  /* Focus state */
+  .radio-input:focus-visible + .radio-circle {
+    outline: 2px solid var(--nuraly-color-radio-border-focus, #1677ff);
+    outline-offset: 2px;
+  }
+
+  /* Hover state */
+  :host(:not([disabled]):hover) .radio-circle {
+    border-color: var(--nuraly-color-radio-border-hover, #1677ff);
+  }
+
+  /* Disabled state */
+  :host([disabled]) .radio-circle {
+    background: var(--nuraly-color-radio-disabled-background, #f5f5f5);
+    border-color: var(--nuraly-color-radio-disabled-border, #d9d9d9);
+  }
+
+  :host([disabled][checked]) .radio-circle::after {
+    background: var(--nuraly-color-radio-disabled-dot, #bfbfbf);
+  }
+
+  /* Label - using nr-label component */
+  .radio-label {
+    display: inline-block;
+    line-height: 1.5;
+  }
+
+  nr-label.radio-label {
+    --nuraly-label-color: var(--nuraly-color-radio-label, #262626);
+    --nuraly-label-font-size: var(--nuraly-font-size-radio-label, 14px);
+  }
+
+  /* Size-based label font sizes */
+  :host([size="small"]) nr-label.radio-label {
+    --nuraly-label-font-size: var(--nuraly-font-size-small, 12px);
+  }
+
+  :host([size="medium"]) nr-label.radio-label,
+  :host(:not([size])) nr-label.radio-label {
+    --nuraly-label-font-size: var(--nuraly-font-size-body, 14px);
+  }
+
+  :host([size="large"]) nr-label.radio-label {
+    --nuraly-label-font-size: var(--nuraly-font-size-large, 16px);
+  }
+
+  :host([disabled]) nr-label.radio-label {
+    --nuraly-label-color: var(--nuraly-color-radio-disabled-text, #bfbfbf);
+  }
+`;

package/components/ui/nuraly-ui/src/components/radio/radio.types.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Radio button size variants
+ */
+export enum RadioSize {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large'
+}

package/components/ui/nuraly-ui/src/components/radio/react.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { NrRadioElement } from './radio.component.js';
+
+export const NrRadio = createComponent({
+  tagName: 'nr-radio',
+  elementClass: NrRadioElement,
+  react: React,
+  events: {
+    onChange: 'nr-change',
+    onFocus: 'nr-focus',
+    onBlur: 'nr-blur'
+  }
+});

package/components/ui/nuraly-ui/src/components/radio-group/controllers/focus.controller.ts

@@ -0,0 +1,251 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FocusController } from '../interfaces/focus-controller.interface.js';
+
+/**
+ * Controller that manages focus state and focus handling for radio groups
+ * Implements proper focus management with accessibility compliance
+ * 
+ * Features:
+ * - Tracks focused radio option index
+ * - Manages focus state transitions
+ * - Provides focus/blur methods for programmatic control
+ * - Handles roving tabindex for accessibility
+ * 
+ * @example
+ * ```typescript
+ * const controller = new RadioFocusController(hostElement);
+ * controller.setFocusedOption(1); // Focus second option
+ * controller.focus(); // Programmatically focus the group
+ * ```
+ */
+export class RadioFocusController implements FocusController {
+  private host: any; // RadioElement host
+  private _focusedIndex: number = -1;
+  private _hasFocus: boolean = false;
+  
+  private boundFocusInHandler: (event: FocusEvent) => void;
+  private boundFocusOutHandler: (event: FocusEvent) => void;
+
+  /**
+   * Creates a new RadioFocusController instance
+   * Sets up event handlers for focus management
+   * 
+   * @param host - The host radio element
+   */
+  constructor(host: any) {
+    this.host = host;
+    this.boundFocusInHandler = this.handleFocusIn.bind(this);
+    this.boundFocusOutHandler = this.handleFocusOut.bind(this);
+    host.addController(this);
+  }
+
+  /**
+   * Called when the host element is connected to the DOM
+   * Sets up focus event listeners for the radio group
+   */
+  hostConnected() {
+    (this.host as any).addEventListener('focusin', this.boundFocusInHandler);
+    (this.host as any).addEventListener('focusout', this.boundFocusOutHandler);
+  }
+
+  /**
+   * Called when the host element is disconnected from the DOM
+   * Removes focus event listeners to prevent memory leaks
+   */
+  hostDisconnected() {
+    (this.host as any).removeEventListener('focusin', this.boundFocusInHandler);
+    (this.host as any).removeEventListener('focusout', this.boundFocusOutHandler);
+  }
+
+  /**
+   * Gets the index of the currently focused radio option
+   * 
+   * @returns The focused option index, -1 if none focused
+   * 
+   * @example
+   * ```typescript
+   * const index = controller.focusedIndex;
+   * console.log(`Option ${index} is focused`);
+   * ```
+   */
+  get focusedIndex(): number {
+    return this._focusedIndex;
+  }
+
+  /**
+   * Checks if the radio group currently has focus
+   * 
+   * @returns True if any option in the group has focus, false otherwise
+   * 
+   * @example
+   * ```typescript
+   * if (controller.hasFocus) {
+   *   console.log('Radio group is focused');
+   * }
+   * ```
+   */
+  get hasFocus(): boolean {
+    return this._hasFocus;
+  }
+
+  /**
+   * Sets the focused option by index
+   * Updates internal state and triggers re-render if needed
+   * 
+   * @param index - The index of the option to focus
+   * 
+   * @example
+   * ```typescript
+   * controller.setFocusedOption(2); // Focus third option
+   * ```
+   */
+  setFocusedOption(index: number): void {
+    const oldIndex = this._focusedIndex;
+    this._focusedIndex = index;
+    
+    if (oldIndex !== index) {
+      this.host.requestUpdate();
+    }
+  }
+
+  /**
+   * Get the currently focused option index (method version for interface compliance)
+   * @returns The focused option index or -1 if none focused
+   */
+  getFocusedIndex(): number {
+    return this._focusedIndex;
+  }
+
+  clearFocus(): void {
+    this._focusedIndex = -1;
+    this._hasFocus = false;
+    this.host.requestUpdate();
+  }
+
+  // Event handlers
+  private handleFocusIn(event: FocusEvent): void {
+    this._hasFocus = true;
+    
+    // Determine which option received focus
+    const target = event.target as HTMLElement;
+    
+    if (target && target.matches('input[type="radio"], nr-button[role="radio"]')) {
+      const inputs = (this.host as any).shadowRoot?.querySelectorAll('input[type="radio"], nr-button[role="radio"]');
+      if (inputs) {
+        const index = Array.from(inputs).indexOf(target);
+        if (index !== -1) {
+          this.setFocusedOption(index);
+        }
+      }
+    }
+    
+    this.host.requestUpdate();
+  }
+
+  private handleFocusOut(event: FocusEvent): void {
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    const host = this.host as any;
+    
+    // Check if focus is moving outside the radio group
+    if (!relatedTarget || !host.contains(relatedTarget)) {
+      this._hasFocus = false;
+      this.host.requestUpdate();
+    }
+  }
+
+  // Programmatic focus methods
+  focus(): void {
+    const options = this.host.options;
+    const selectedValue = this.host.value;
+    
+    // Focus the selected option if one exists
+    const selectedIndex = options.findIndex((option: any) => option.value === selectedValue);
+    if (selectedIndex !== -1) {
+      this.focusOptionAtIndex(selectedIndex);
+      return;
+    }
+    
+    // Otherwise focus the first non-disabled option
+    const firstEnabledIndex = options.findIndex((option: any) => !option.disabled);
+    if (firstEnabledIndex !== -1) {
+      this.focusOptionAtIndex(firstEnabledIndex);
+    }
+  }
+
+  blur(): void {
+    const host = this.host as any;
+    const shadowRoot = host.shadowRoot;
+    
+    if (!shadowRoot) return;
+
+    // Find and blur any focused radio input or button
+    const focusedElement = shadowRoot.querySelector('input[type="radio"]:focus, nr-button[role="radio"]:focus');
+    if (focusedElement && typeof focusedElement.blur === 'function') {
+      focusedElement.blur();
+    }
+  }
+
+  private focusOptionAtIndex(index: number): void {
+    const host = this.host as any;
+    const shadowRoot = host.shadowRoot;
+    
+    if (!shadowRoot) return;
+
+    // Update tab indices first
+    this.updateTabIndices(index);
+
+    // Focus the element at the specified index
+    const radioInputs = shadowRoot.querySelectorAll('input[type="radio"]');
+    if (radioInputs[index]) {
+      radioInputs[index].focus();
+      return;
+    }
+
+    const buttons = shadowRoot.querySelectorAll('nr-button[role="radio"]');
+    if (buttons[index]) {
+      buttons[index].focus();
+      return;
+    }
+  }
+
+  // Tab index management for proper keyboard navigation
+  updateTabIndices(focusedIndex?: number): void {
+    const host = this.host as any;
+    const shadowRoot = host.shadowRoot;
+    
+    if (!shadowRoot) return;
+
+    const options = this.host.options;
+    const selectedValue = this.host.value;
+    
+    // Determine which option should be tabbable
+    let tabbableIndex = focusedIndex;
+    if (tabbableIndex === undefined) {
+      // If no specific index, use selected option or first enabled option
+      const selectedIndex = options.findIndex((option: any) => option.value === selectedValue);
+      tabbableIndex = selectedIndex !== -1 ? selectedIndex : options.findIndex((option: any) => !option.disabled);
+    }
+
+    // Update radio inputs
+    const radioInputs = shadowRoot.querySelectorAll('input[type="radio"]');
+    radioInputs.forEach((input: HTMLInputElement, index: number) => {
+      input.tabIndex = index === tabbableIndex ? 0 : -1;
+    });
+
+    // Update buttons (for button-style radio)
+    const buttons = shadowRoot.querySelectorAll('nr-button[role="radio"]');
+    buttons.forEach((button: any, index: number) => {
+      button.tabIndex = index === tabbableIndex ? 0 : -1;
+    });
+  }
+
+  // Method to be called after rendering to update tab indices
+  hostUpdated(): void {
+    this.updateTabIndices();
+  }
+}

package/components/ui/nuraly-ui/src/components/radio-group/controllers/group.controller.ts

@@ -0,0 +1,198 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { RadioButtonOption } from '../radio-group.types.js';
+import { SelectionController, RadioHost } from '../interfaces/index.js';
+
+/**
+ * Controller that manages radio group state and selection logic
+ * Implements type-safe selection operations with proper error handling
+ * 
+ * @example
+ * ```typescript
+ * const controller = new RadioGroupController(hostElement);
+ * controller.selectOption(option); // Type-safe selection
+ * ```
+ */
+export class RadioGroupController implements SelectionController {
+  readonly host: RadioHost;
+  
+  constructor(host: RadioHost & { dispatchEvent: (event: Event) => void }) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  /**
+   * Called when the host element is connected to the DOM
+   * Initializes the default selection if provided
+   * 
+   * @fires change - When default value is set automatically
+   */
+  hostConnected() {
+    // Initialize default selection if provided
+    if (this.host.defaultValue && !this.host.value) {
+      const defaultOption = this.host.options.find((opt: RadioButtonOption) => opt.value === this.host.defaultValue);
+      if (defaultOption && !this.isOptionDisabled(defaultOption)) {
+        this.selectOption(defaultOption);
+      }
+    }
+  }
+
+  /**
+   * Called when the host element is disconnected from the DOM
+   * Performs cleanup operations
+   */
+  hostDisconnected() {
+    // Cleanup if needed
+  }
+
+  /**
+   * Selects a radio option and dispatches change events
+   * Implements proper error handling for disabled options
+   * 
+   * @param option - The radio option to select
+   * @throws {Error} When option is disabled or invalid
+   * @fires change - When selection changes successfully
+   * 
+   * @example
+   * ```typescript
+   * controller.selectOption({ value: 'option1', label: 'Option 1' });
+   * ```
+   */
+  selectOption(option: RadioButtonOption): void {
+    if (this.isOptionDisabled(option)) {
+      return;
+    }
+
+    const oldValue = this.host.value;
+    this.host.value = option.value;
+    
+    // Dispatch change event
+    this.dispatchChangeEvent(option, oldValue);
+    
+    this.host.requestUpdate();
+  }
+
+  /**
+   * Gets the currently selected radio option
+   * 
+   * @returns The selected option object or undefined if none selected
+   * 
+   * @example
+   * ```typescript
+   * const selected = controller.getSelectedOption();
+   * console.log(selected?.label); // "Option 1"
+   * ```
+   */
+  getSelectedOption(): RadioButtonOption | undefined {
+    return this.host.options.find((option: RadioButtonOption) => option.value === this.host.value);
+  }
+
+  /**
+   * Checks if a specific option is currently selected
+   * 
+   * @param option - The option to check
+   * @returns True if the option is selected, false otherwise
+   * 
+   * @example
+   * ```typescript
+   * const isSelected = controller.isOptionSelected(option);
+   * ```
+   */
+  isOptionSelected(option: RadioButtonOption): boolean {
+    return option.value === this.host.value;
+  }
+
+  /**
+   * Checks if a specific option is disabled
+   * Takes into account both global disabled state and option-specific disabled state
+   * 
+   * @param option - The option to check
+   * @returns True if the option is disabled, false otherwise
+   * 
+   * @example
+   * ```typescript
+   * if (!controller.isOptionDisabled(option)) {
+   *   controller.selectOption(option);
+   * }
+   * ```
+   */
+  isOptionDisabled(option: RadioButtonOption): boolean {
+    return this.host.disabled || Boolean(option.disabled);
+  }
+
+  /**
+   * Gets form data for native form submission
+   * Returns key-value pair suitable for FormData
+   * 
+   * @returns Object with form field name and selected value
+   * 
+   * @example
+   * ```typescript
+   * const formData = controller.getFormData();
+   * // { "radioGroup": "selectedValue" }
+   * ```
+   */
+  getFormData(): { [key: string]: string } {
+    return this.host.name ? { [this.host.name]: this.host.value } : {};
+  }
+
+  /**
+   * Resets the radio group to its default value
+   * Triggers re-render to update the UI
+   * 
+   * @fires change - When reset changes the selected value
+   * 
+   * @example
+   * ```typescript
+   * controller.reset(); // Resets to defaultValue or empty
+   * ```
+   */
+  reset(): void {
+    this.host.value = this.host.defaultValue || '';
+    this.host.requestUpdate();
+  }
+
+  /**
+   * Gets the currently selected value as a string
+   * Convenience method for accessing the raw value
+   * 
+   * @returns The selected value string, empty string if none selected
+   * 
+   * @example
+   * ```typescript
+   * const value = controller.getSelectedValue();
+   * console.log(value); // "option1"
+   * ```
+   */
+  getSelectedValue(): string {
+    return this.host.value;
+  }
+
+  /**
+   * Dispatches a change event when selection changes
+   * Creates a custom event with detailed information about the change
+   * 
+   * @param option - The newly selected option
+   * @param oldValue - The previously selected value
+   * @fires change - Custom event with selection details
+   * 
+   * @private
+   */
+  private dispatchChangeEvent(option: RadioButtonOption, oldValue: string): void {
+    const changeEvent = new CustomEvent('nr-change', {
+      detail: {
+        value: option.value,
+        option: option,
+        oldValue: oldValue
+      },
+      bubbles: true,
+      composed: true
+    });
+
+    (this.host as any).dispatchEvent(changeEvent);
+  }
+}

package/components/ui/nuraly-ui/src/components/radio-group/controllers/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+export { RadioGroupController } from './group.controller.js';
+export { RadioKeyboardController } from './keyboard.controller.js';
+export { RadioFocusController } from './focus.controller.js';
+export { RadioValidationController } from './validation.controller.js';
+export { RadioRippleController } from './ripple.controller.js';