@reliability-design/web 1.0.2

package/dist/components/rel-radio/rel-radio.ts

@@ -0,0 +1,187 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  supportingText?: string;
+  disabled?: boolean;
+  error?: boolean;
+}
+
+@customElement("rel-radio")
+export class RelRadio extends LitElement {
+  @property({ type: Array }) options: RadioOption[] = [];
+
+  @property({ type: String }) name: string = "radio-group";
+
+  @property({ type: String }) selectedValue: string | null = null;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .rel-radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-xs);
+    }
+
+    .rel-radio-option {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--rel-spacing-space-3xs);
+      cursor: pointer;
+      position: relative;
+    }
+
+    .radio-main {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    .rel-radio-option input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .radio-custom {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--rel-colors-black);
+      border-radius: 50%;
+      display: inline-block;
+      position: relative;
+      flex-shrink: 0;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .rel-radio-option input:focus + .radio-custom {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-black);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .rel-radio-option input:checked + .radio-custom::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 10px;
+      height: 10px;
+      background-color: var(--rel-colors-black);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    /* Error state */
+    .rel-radio-option.error .radio-custom {
+      border-color: var(--rel-colors-red-secondary);
+    }
+
+    .rel-radio-option.error input:checked + .radio-custom::after {
+      background-color: var(--rel-colors-red-secondary);
+    }
+
+    .rel-radio-option.error .radio-label,
+    .rel-radio-option.error .radio-supporting {
+      color: var(--rel-colors-red-secondary);
+    }
+
+    .rel-radio-option.error input:focus + .radio-custom {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-red-secondary);
+    }
+
+    /* Disabled state */
+    .rel-radio-option.disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
+    }
+
+    .rel-radio-option.disabled .radio-label,
+    .rel-radio-option.disabled .radio-supporting {
+      cursor: not-allowed !important;
+    }
+
+    /* Text styles */
+    .radio-label {
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+      line-height: var(--rel-lineHeights-sm);
+    }
+
+    .radio-supporting {
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-colors-gray-placeholder);
+      margin-left: 28px;
+      line-height: var(--rel-lineHeights-xs);
+    }
+
+    .radio-supporting.error-text {
+      color: var(--rel-colors-red-secondary);
+    }
+  `;
+
+  private onChange(value: string) {
+    this.selectedValue = value;
+    this.dispatchEvent(
+      new CustomEvent("changed", {
+        detail: { value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private isChecked(value: string): boolean {
+    return this.selectedValue === value;
+  }
+
+  private renderOption(option: RadioOption) {
+    const isChecked = this.isChecked(option.value);
+    const classes = [
+      "rel-radio-option",
+      option.disabled ? "disabled" : "",
+      option.error ? "error" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return html`
+      <label class="${classes}">
+        <div class="radio-main">
+          <input
+            type="radio"
+            name="${this.name}"
+            .value="${option.value}"
+            .checked="${isChecked}"
+            ?disabled="${option.disabled}"
+            @change="${() => !option.disabled && this.onChange(option.value)}" />
+          <span class="radio-custom"></span>
+          <span class="radio-label">${option.label}</span>
+        </div>
+
+        ${option.supportingText
+          ? html`
+              <div class="radio-supporting ${option.error ? "error-text" : ""}">
+                ${option.supportingText}
+              </div>
+            `
+          : ""}
+      </label>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="rel-radio-group">
+        ${this.options.map((option) => this.renderOption(option))}
+      </div>
+    `;
+  }
+}