@nuraly/lumenui 0.1.0

package/dist/src/components/radio/radio.style.js

@@ -0,0 +1,149 @@
+/**
+ * @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);
+  }
+`;
+//# sourceMappingURL=radio.style.js.map

package/dist/src/components/radio/radio.types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Radio button size variants
+ */
+export declare enum RadioSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+//# sourceMappingURL=radio.types.d.ts.map

package/dist/src/components/radio/radio.types.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Radio button size variants
+ */
+export var RadioSize;
+(function (RadioSize) {
+    RadioSize["Small"] = "small";
+    RadioSize["Medium"] = "medium";
+    RadioSize["Large"] = "large";
+})(RadioSize || (RadioSize = {}));
+//# sourceMappingURL=radio.types.js.map

package/dist/src/components/radio/react.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { NrRadioElement } from './radio.component.js';
+export declare const NrRadio: import("@lit-labs/react").ReactWebComponent<NrRadioElement, {
+    onChange: string;
+    onFocus: string;
+    onBlur: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/radio/react.js

@@ -0,0 +1,19 @@
+/**
+ * @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'
+    }
+});
+//# sourceMappingURL=react.js.map

package/dist/src/components/radio-group/bundle.js

@@ -0,0 +1,430 @@
+import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property as e,customElement as n}from"lit/decorators.js";import{choose as a}from"lit/directives/choose.js";import{classMap as s}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{BaseValidationController as d}from"@nuralyui/common/controllers";import{throttle as u}from"@nuralyui/common/utils";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class h{constructor(t){this.host=t,t.addController(this)}hostConnected(){if(this.host.defaultValue&&!this.host.value){const t=this.host.options.find(t=>t.value===this.host.defaultValue);t&&!this.isOptionDisabled(t)&&this.selectOption(t)}}hostDisconnected(){}selectOption(t){if(this.isOptionDisabled(t))return;const r=this.host.value;this.host.value=t.value,this.dispatchChangeEvent(t,r),this.host.requestUpdate()}getSelectedOption(){return this.host.options.find(t=>t.value===this.host.value)}isOptionSelected(t){return t.value===this.host.value}isOptionDisabled(t){return this.host.disabled||Boolean(t.disabled)}getFormData(){return this.host.name?{[this.host.name]:this.host.value}:{}}reset(){this.host.value=this.host.defaultValue||"",this.host.requestUpdate()}getSelectedValue(){return this.host.value}dispatchChangeEvent(t,r){const o=new CustomEvent("nr-change",{detail:{value:t.value,option:t,oldValue:r},bubbles:!0,composed:!0});this.host.dispatchEvent(o)}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class c{constructor(t,r){this.groupController=r,this.host=t,this.boundKeyDownHandler=this.handleKeyDown.bind(this),t.addController(this)}hostConnected(){this.host.addEventListener("keydown",this.boundKeyDownHandler)}hostDisconnected(){this.host.removeEventListener("keydown",this.boundKeyDownHandler)}handleKeyDown(t){const r=this.host.options;if(!r||0===r.length)return;const o=r.findIndex(t=>this.groupController.isOptionSelected(t));switch(t.key){case"ArrowDown":case"ArrowRight":t.preventDefault(),this.selectNextOption(r,o);break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.selectPreviousOption(r,o);break;case" ":case"Enter":t.preventDefault(),-1===o&&this.selectFirstEnabledOption(r);break;case"Home":t.preventDefault(),this.selectFirstEnabledOption(r);break;case"End":t.preventDefault(),this.selectLastEnabledOption(r)}}selectNextOption(t,r){const o=-1===r?0:r+1;for(let r=0;r<t.length;r++){const i=t[(o+r)%t.length];if(!this.groupController.isOptionDisabled(i)){this.groupController.selectOption(i);break}}}selectPreviousOption(t,r){const o=-1===r?t.length-1:r-1;for(let r=0;r<t.length;r++){const i=t[(o-r+t.length)%t.length];if(!this.groupController.isOptionDisabled(i)){this.groupController.selectOption(i);break}}}selectFirstEnabledOption(t){const r=t.find(t=>!this.groupController.isOptionDisabled(t));r&&this.groupController.selectOption(r)}selectLastEnabledOption(t){const r=t.filter(t=>!this.groupController.isOptionDisabled(t)),o=r[r.length-1];o&&this.groupController.selectOption(o)}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class p{constructor(t){this._focusedIndex=-1,this._hasFocus=!1,this.host=t,this.boundFocusInHandler=this.handleFocusIn.bind(this),this.boundFocusOutHandler=this.handleFocusOut.bind(this),t.addController(this)}hostConnected(){this.host.addEventListener("focusin",this.boundFocusInHandler),this.host.addEventListener("focusout",this.boundFocusOutHandler)}hostDisconnected(){this.host.removeEventListener("focusin",this.boundFocusInHandler),this.host.removeEventListener("focusout",this.boundFocusOutHandler)}get focusedIndex(){return this._focusedIndex}get hasFocus(){return this._hasFocus}setFocusedOption(t){const r=this._focusedIndex;this._focusedIndex=t,r!==t&&this.host.requestUpdate()}getFocusedIndex(){return this._focusedIndex}clearFocus(){this._focusedIndex=-1,this._hasFocus=!1,this.host.requestUpdate()}handleFocusIn(t){var r;this._hasFocus=!0;const o=t.target;if(o&&o.matches('input[type="radio"], nr-button[role="radio"]')){const t=null===(r=this.host.shadowRoot)||void 0===r?void 0:r.querySelectorAll('input[type="radio"], nr-button[role="radio"]');if(t){const r=Array.from(t).indexOf(o);-1!==r&&this.setFocusedOption(r)}}this.host.requestUpdate()}handleFocusOut(t){const r=t.relatedTarget,o=this.host;r&&o.contains(r)||(this._hasFocus=!1,this.host.requestUpdate())}focus(){const t=this.host.options,r=this.host.value,o=t.findIndex(t=>t.value===r);if(-1!==o)return void this.focusOptionAtIndex(o);const i=t.findIndex(t=>!t.disabled);-1!==i&&this.focusOptionAtIndex(i)}blur(){const t=this.host.shadowRoot;if(!t)return;const r=t.querySelector('input[type="radio"]:focus, nr-button[role="radio"]:focus');r&&"function"==typeof r.blur&&r.blur()}focusOptionAtIndex(t){const r=this.host.shadowRoot;if(!r)return;this.updateTabIndices(t);const o=r.querySelectorAll('input[type="radio"]');if(o[t])return void o[t].focus();const i=r.querySelectorAll('nr-button[role="radio"]');i[t]&&i[t].focus()}updateTabIndices(t){const r=this.host.shadowRoot;if(!r)return;const o=this.host.options,i=this.host.value;let e=t;if(void 0===e){const t=o.findIndex(t=>t.value===i);e=-1!==t?t:o.findIndex(t=>!t.disabled)}r.querySelectorAll('input[type="radio"]').forEach((t,r)=>{t.tabIndex=r===e?0:-1});r.querySelectorAll('nr-button[role="radio"]').forEach((t,r)=>{t.tabIndex=r===e?0:-1})}hostUpdated(){this.updateTabIndices()}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class b extends d{validate(){const t=this.host.required,r=this.host.value;return t&&!r?(this._isValid=!1,this._validationMessage="Please select an option",this.requestUpdate(),!1):(this._isValid=!0,this._validationMessage="",this.requestUpdate(),!0)}setCustomValidity(t){this._isValid=!t,this._validationMessage=t,this.requestUpdate()}getFormData(){const t=this.host.name,r=this.host.value;return t?{[t]:r}:{}}reportValidity(){const t=this.validate();if(!t){const t=new CustomEvent("invalid",{detail:{message:this._validationMessage},bubbles:!0,composed:!0});this._host.dispatchEvent(t)}return t}reset(){this.clearValidation()}getFormDataObject(){const t=this.host.name,r=this.host.value;if(!t||!r)return null;const o=new FormData;return o.append(t,r),o}validateOnChange(){this._isValid||this.validate()}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class y{constructor(t){this._rippleEnabled=!0,this.activeRipples=new Set,this.ripplePool=[],this.host=t,this.boundClickHandler=this.handleClick.bind(this),t.addController(this);const r=this.addRippleEffect.bind(this);this.addRippleEffect=u(r,16)}hostConnected(){this.host.addEventListener("click",this.boundClickHandler)}hostDisconnected(){this.host.removeEventListener("click",this.boundClickHandler)}get rippleEnabled(){return this._rippleEnabled}set rippleEnabled(t){this._rippleEnabled=t}handleClick(t){if(!this._rippleEnabled)return;const r=t.target;r&&r.matches('input[type="radio"]')&&this.addRippleToElement(r),r&&r.matches('nr-button[role="radio"]')&&this.addButtonRippleEffect(r)}addRippleEffect(t){const r=t.target;r&&this.addRippleToElement(r)}addRippleToElement(t){t.style.animation="none",t.getAnimations();const r=getComputedStyle(t).getPropertyValue("--nuraly-radio-ripple-duration")||getComputedStyle(t).getPropertyValue("--nuraly-radio-local-ripple-duration")||"300ms";t.style.animation=`radioRipple ${r} ease-out`;const o=this.parseDuration(r);setTimeout(()=>{t.style.animation=""},o)}addButtonRippleEffect(t){const r=this.createRippleElement(t);r&&(t.appendChild(r),setTimeout(()=>{r.parentNode&&r.parentNode.removeChild(r)},600))}createRippleElement(t){const r=this.getRippleElement(t);return r.style.animation="radioRippleSpread 600ms ease-out",r}parseDuration(t){const r=t.match(/^([\d.]+)(s|ms)$/);if(!r)return 300;const o=Number.parseFloat(r[1]);return"s"===r[2]?1e3*o:o}triggerRipple(t){if(!this._rippleEnabled)return;const r=this.host.shadowRoot;if(!r)return;let o=null;o=t?r.querySelector(`input[type="radio"][value="${t}"]`):r.querySelector('input[type="radio"]:checked'),o&&this.addRippleToElement(o)}disableRipple(){this._rippleEnabled=!1}enableRipple(){this._rippleEnabled=!0}clearRipples(){this.activeRipples.forEach(t=>{t.parentNode&&t.parentNode.removeChild(t),this.ripplePool.length<10&&(t.style.animation="",t.style.transform="scale(0)",this.ripplePool.push(t))}),this.activeRipples.clear();const t=this.host.shadowRoot;if(t){t.querySelectorAll('input[type="radio"]').forEach(t=>{t.style.animation=""})}}getRippleElement(t){let r=this.ripplePool.pop();r||(r=document.createElement("span"),r.className="radio-ripple",r.style.position="absolute",r.style.borderRadius="50%",r.style.background="currentColor",r.style.opacity="0.1",r.style.pointerEvents="none");const o=t.getBoundingClientRect(),i=Math.max(o.width,o.height);return r.style.width=`${i}px`,r.style.height=`${i}px`,r.style.left=-i/2+"px",r.style.top=-i/2+"px",r.style.transform="scale(0)",this.activeRipples.add(r),r}addRippleEffectToElement(t){this.addRippleToElement(t)}setRippleEnabled(t){this._rippleEnabled=t}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const g=t`
+  :host {
+    /* ========================================
+     * CSS CUSTOM PROPERTIES - RADIO GROUP
+     * ======================================== */
+    
+    /* Group Layout */
+    --nuraly-radio-group-gap: 12px;
+    --nuraly-radio-group-horizontal-gap: 16px;
+
+    /* Colors - Error/Warning states */
+    --nuraly-radio-group-error-icon-color: var(--nuraly-color-radio-error-icon, #ef4444);
+    --nuraly-radio-group-error-text-color: var(--nuraly-color-radio-error-text, #ef4444);
+    --nuraly-radio-group-warning-icon-color: var(--nuraly-color-radio-warning-icon, #f59e0b);
+    --nuraly-radio-group-warning-text-color: var(--nuraly-color-radio-warning-text, #f59e0b);
+
+    /* Typography */
+    --nuraly-radio-group-font-family: var(--nuraly-font-family-radio, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
+    --nuraly-radio-group-message-font-size: var(--nuraly-font-size-radio-message, 12px);
+
+    /* Button type styling */
+    --nuraly-radio-group-button-border-radius: 4px;
+    --nuraly-radio-group-button-hover-color: var(--nuraly-color-radio-border-hover, #7c3aed);
+
+    /* Slot container styling */
+    --nuraly-radio-group-slot-hover-bg: rgba(124, 58, 237, 0.04);
+    --nuraly-radio-group-slot-selected-bg: rgba(124, 58, 237, 0.08);
+    --nuraly-radio-group-slot-border-radius: 6px;
+
+    /* ========================================
+     * COMPONENT STYLES
+     * ======================================== */
+    
+    width: fit-content;
+    display: block;
+    font-family: var(--nuraly-radio-group-font-family);
+  }
+
+  /* ========================================
+   * RADIO GROUP LAYOUT
+   * ======================================== */
+
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-radio-group-gap);
+  }
+
+  .radio-group.horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--nuraly-radio-group-horizontal-gap);
+  }
+
+  .radio-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  /* ========================================
+   * MESSAGE CONTAINERS (Error/Warning)
+   * ======================================== */
+
+  .radio-wrapper .message-container {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--nuraly-radio-group-message-font-size);
+    padding-left: 28px; /* Align with radio label */
+  }
+
+  nr-icon {
+    display: flex;
+  }
+
+  .radio-wrapper.error nr-icon {
+    --nuraly-icon-color: var(--nuraly-radio-group-error-icon-color);
+  }
+
+  .radio-wrapper.warning nr-icon {
+    --nuraly-icon-color: var(--nuraly-radio-group-warning-icon-color);
+  }
+
+  .radio-wrapper.error .message-container {
+    color: var(--nuraly-radio-group-error-text-color);
+  }
+
+  .radio-wrapper.warning .message-container {
+    color: var(--nuraly-radio-group-warning-text-color);
+  }
+
+  /* ========================================
+   * BUTTON TYPE STYLING
+   * ======================================== */
+
+  .type-button {
+    display: inline-flex;
+    gap: 0px;
+  }
+
+  /* Button border radius for first and last child */
+  .type-button :first-child {
+    --nuraly-button-border-top-left-radius: var(--nuraly-radio-group-button-border-radius);
+    --nuraly-button-border-bottom-left-radius: var(--nuraly-radio-group-button-border-radius);
+  }
+
+  .type-button :last-child {
+    --nuraly-button-border-top-right-radius: var(--nuraly-radio-group-button-border-radius);
+    --nuraly-button-border-bottom-right-radius: var(--nuraly-radio-group-button-border-radius);
+  }
+
+  .type-button nr-button:not(:last-child) {
+    margin-right: -1px;
+  }
+
+  .type-button nr-button {
+    position: relative;
+    z-index: 1;
+  }
+
+  .type-button nr-button[type="default"]:hover {
+    --nuraly-button-color: var(--nuraly-radio-group-button-hover-color);
+    --nuraly-button-border-color: var(--nuraly-radio-group-button-hover-color);
+    z-index: 2;
+  }
+
+  .type-button nr-button[type="primary"] {
+    z-index: 1;
+    position: relative;
+  }
+
+  /* Disabled button states */
+  .type-button nr-button[disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .type-button nr-button[disabled]:hover {
+    z-index: auto;
+    --nuraly-button-border-color: var(--nuraly-button-disabled-border-color, var(--nuraly-button-local-disabled-border-color));
+    --nuraly-button-background-color: var(--nuraly-button-disabled-background-color, var(--nuraly-button-local-disabled-background-color));
+    --nuraly-button-color: var(--nuraly-button-disabled-text-color, var(--nuraly-button-local-disabled-text-color));
+  }
+
+  .type-button nr-button[type="primary"][disabled] {
+    --nuraly-button-background-color: var(--nuraly-button-primary-disabled-background-color, var(--nuraly-button-local-primary-disabled-background-color));
+    --nuraly-button-border-color: var(--nuraly-button-primary-disabled-border-color, var(--nuraly-button-local-primary-disabled-border-color));
+    --nuraly-button-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
+  }
+
+  .type-button nr-button[type="primary"][disabled] nr-icon {
+    --nuraly-icon-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
+    --nuraly-icon-local-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
+  }
+
+  /* ========================================
+   * AUTO WIDTH STYLING
+   * ======================================== */
+
+  :host([auto-width]) .type-button nr-button {
+    --nuraly-button-min-width: 40px;
+    min-width: auto;
+    width: auto;
+  }
+
+  /* Ensure minimum padding for auto-width buttons to prevent them from becoming too small */
+  :host([auto-width]) .type-button nr-button button {
+    min-width: auto;
+    padding-left: max(var(--nuraly-spacing-2), 0.5rem);
+    padding-right: max(var(--nuraly-spacing-2), 0.5rem);
+  }
+
+  /* Icon-only buttons with auto-width should have minimal but adequate padding */
+  :host([auto-width]) .type-button nr-button.icon-only {
+    padding: 0.375rem; /* Even more minimal padding for icon-only */
+    min-width: auto;
+    width: auto;
+  }
+
+  :host([auto-width]) .type-button nr-button.icon-only button {
+    padding: max(0.375rem, var(--nuraly-spacing-2)); /* Ensure minimum 6px padding for icon-only */
+    min-width: auto;
+  }
+
+  /* For small size buttons, use proportionally smaller but still adequate padding */
+  :host([auto-width]) .type-button nr-button[size="small"] button {
+    padding-left: max(var(--nuraly-spacing-1-5), 0.375rem);
+    padding-right: max(var(--nuraly-spacing-1-5), 0.375rem);
+  }
+
+  /* For small size icon-only buttons, use even less but still minimum padding */
+  :host([auto-width]) .type-button nr-button.icon-only[size="small"] button {
+    padding: max(0.25rem, var(--nuraly-spacing-1-5));
+  }
+
+  /* For large size buttons, maintain larger minimum padding */
+  :host([auto-width]) .type-button nr-button[size="large"] button {
+    padding-left: max(var(--nuraly-spacing-4), 0.75rem);
+    padding-right: max(var(--nuraly-spacing-4), 0.75rem);
+  }
+
+  /* For large size icon-only buttons, use proportionally larger padding */
+  :host([auto-width]) .type-button nr-button.icon-only[size="large"] button {
+    padding: max(0.5rem, var(--nuraly-spacing-3));
+  }
+
+  /* ========================================
+   * SLOT-BASED RADIO STYLING
+   * ======================================== */
+
+  .slot-wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 8px;
+    border-radius: var(--nuraly-radio-group-slot-border-radius);
+  }
+
+  .slot-wrapper:hover {
+    background-color: var(--nuraly-radio-group-slot-hover-bg);
+  }
+
+  .slot-wrapper nr-radio {
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  .slot-wrapper .slot-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .slot-container.selected .slot-wrapper {
+    background-color: var(--nuraly-radio-group-slot-selected-bg);
+  }
+
+  /* ========================================
+   * HELPER TEXT SLOT STYLING
+   * ======================================== */
+
+  ::slotted([slot='helper-text']) {
+    color: var(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color, #8c8c8c));
+    font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size, 12px));
+    padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-helper-text-padding-top, 4px));
+    
+    /* Prevent text overflow and ensure proper wrapping without affecting parent width */
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    white-space: normal;
+    max-width: 100%;
+    width: 0;
+    min-width: 100%;
+    box-sizing: border-box;
+    line-height: 1.4;
+    display: block;
+  }
+`;var m,v,f,w,x;!function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(m||(m={})),function(t){t.Left="left",t.Right="right"}(v||(v={})),function(t){t.Default="default",t.Button="button",t.Slot="slot",t.ButtonSlot="button-slot"}(f||(f={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(w||(w={})),function(t){t.Default="default",t.Solid="solid"}(x||(x={}));
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var $=function(t,r,o,i){for(var e,n=arguments.length,a=n<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,o):i,s=t.length-1;s>=0;s--)(e=t[s])&&(a=(n<3?e(a):n>3?e(r,o,a):e(r,o))||a);return n>3&&a&&Object.defineProperty(r,o,a),a};let O=class extends(l(r)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-radio"],this.options=[],this.defaultValue="",this.value="",this.name="radioGroup",this.direction="vertical",this.type=f.Default,this.required=!1,this.disabled=!1,this.size="medium",this.position="left",this.autoWidth=!1,this.helper="",this.groupController=new h(this),this.keyboardController=new c(this,this.groupController),this.focusController=new p(this),this.validationController=new b(this),this.rippleController=new y(this)}get selectedOption(){return this.groupController.getSelectedOption()}isOptionSelected(t){return this.groupController.isOptionSelected(t)}isOptionDisabled(t){return this.groupController.isOptionDisabled(t)}isOptionIconOnly(t){return!(!t.icon||t.label&&""!==t.label.trim())}handleSelectionChange(t){this.groupController.selectOption(t)}setFocusedOption(t){this.focusController.setFocusedOption(t)}handleKeyDown(t){}addRippleEffect(t){this.rippleController.addRippleEffect(t)}validate(){return this.validationController.validate()}get validationMessage(){return this.validationController.validationMessage}get isValid(){return this.validationController.isValid}getFormData(){return this.validationController.getFormData()}reset(){this.validationController.reset()}get formData(){return this.validationController.getFormDataObject()}checkValidity(){return this.validate()}reportValidity(){return this.validationController.reportValidity()}focus(){this.focusController.focus()}blur(){this.focusController.blur()}renderOptionDefault(){return o`
+      <div 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        class="radio-group ${this.direction}"
+      >
+        ${this.options.map((t,r)=>o`
+            <div
+              class="${s({"radio-wrapper":!0,error:"error"===t.state,warning:"warning"===t.state,[t.className||""]:Boolean(t.className)})}"
+              data-theme="${this.currentTheme}"
+              style="${t.style||""}"
+              title="${t.title||""}"
+            >
+              <nr-radio
+                id="${t.id||t.value}"
+                name="${this.name}"
+                value="${t.value}"
+                size="${this.size}"
+                ?checked="${this.isOptionSelected(t)}"
+                ?disabled="${this.isOptionDisabled(t)||this.disabled}"
+                ?required="${this.required}"
+                tabindex="${this.isOptionSelected(t)?"0":"-1"}"
+                @change="${r=>{this.addRippleEffect(r),this.handleSelectionChange(t)}}"
+                @focus="${()=>this.setFocusedOption(r)}"
+              >
+                ${t.label}
+              </nr-radio>
+              ${t.state&&t.message?o`<div class="message-container" id="${t.value}-message">
+                    <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
+                    <span>${t.message}</span>
+                  </div>`:i}
+            </div>
+          `)}
+      </div>
+    `}renderOptionsWithButtons(){return o`
+      <div 
+        class="type-button" 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        @keydown="${this.handleKeyDown}"
+      >
+        ${this.options.map((t,r)=>{const e=this.isOptionSelected(t),n=[e?"selected":"",this.isOptionIconOnly(t)&&this.autoWidth?"icon-only":""].filter(Boolean).join(" ");return o`
+            <nr-button
+              class="${n}"
+              type="${e?"primary":"default"}"
+              size="${this.size}"
+              role="radio"
+              aria-checked="${e}"
+              aria-describedby="${t.state&&t.message?`${t.value}-message`:i}"
+              tabindex="${e?"0":"-1"}"
+              .icon="${t.icon?[t.icon]:[]}"
+              .disabled="${this.isOptionDisabled(t)}"
+              @click="${()=>this.handleSelectionChange(t)}"
+              @focus="${()=>this.setFocusedOption(r)}"
+            >
+              ${t.label}
+            </nr-button>
+            ${t.state&&t.message?o`<div class="message-container" id="${t.value}-message">
+                  <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
+                  <span>${t.message}</span>
+                </div>`:i}
+          `})}
+      </div>
+    `}renderOptionsWithSlots(){return o`
+      <div 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        class="radio-group slot-group ${this.direction}"
+      >
+        ${this.options.map((t,r)=>o`
+            <div
+              class="${s({"radio-wrapper":!0,"slot-container":!0,error:"error"===t.state,warning:"warning"===t.state,selected:this.isOptionSelected(t),[t.className||""]:Boolean(t.className)})}"
+              data-theme="${this.currentTheme}"
+              style="${t.style||""}"
+              title="${t.title||""}"
+            >
+              <div class="slot-wrapper" @click="${()=>this.handleSelectionChange(t)}">
+                <nr-radio
+                  id="${t.id||t.value}"
+                  name="${this.name}"
+                  value="${t.value}"
+                  size="${this.size}"
+                  ?checked="${this.isOptionSelected(t)}"
+                  ?disabled="${this.isOptionDisabled(t)||this.disabled}"
+                  ?required="${this.required}"
+                  tabindex="${this.isOptionSelected(t)?"0":"-1"}"
+                  @change="${r=>{this.addRippleEffect(r),this.handleSelectionChange(t)}}"
+                  @focus="${()=>this.setFocusedOption(r)}"
+                >
+                </nr-radio>
+                <div class="slot-content">
+                  <slot name="${t.value}"></slot>
+                </div>
+              </div>
+              ${t.state&&t.message?o`<div class="message-container" id="${t.value}-message">
+                    <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
+                    <span>${t.message}</span>
+                  </div>`:i}
+            </div>
+          `)}
+      </div>
+    `}renderButtonsWithSlots(){return o`
+      <div 
+        class="type-button" 
+        role="radiogroup" 
+        aria-labelledby="radio-group-label"
+        @keydown="${this.handleKeyDown}"
+      >
+        ${this.options.map((t,r)=>o`
+            <nr-button
+              class="${this.isOptionSelected(t)?"selected":""}"
+              type="${this.isOptionSelected(t)?"primary":"default"}"
+              role="radio"
+              aria-checked="${this.isOptionSelected(t)}"
+              aria-describedby="${t.state&&t.message?`${t.value}-message`:i}"
+              tabindex="${this.isOptionSelected(t)?"0":"-1"}"
+              .disabled="${this.isOptionDisabled(t)}"
+              @click="${()=>this.handleSelectionChange(t)}"
+              @focus="${()=>this.setFocusedOption(r)}"
+            >
+              <slot name="${t.value}" slot="default"></slot>
+            </nr-button>
+            ${t.state&&t.message?o`<div class="message-container" id="${t.value}-message">
+                  <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
+                  <span>${t.message}</span>
+                </div>`:i}
+          `)}
+      </div>
+    `}render(){return o`
+      ${a(this.type,[[f.Default,()=>this.renderOptionDefault()],[f.Button,()=>this.renderOptionsWithButtons()],[f.Slot,()=>this.renderOptionsWithSlots()],[f.ButtonSlot,()=>this.renderButtonsWithSlots()]])}
+      <slot name="helper-text"></slot>
+    `}};O.styles=g,$([e({type:Array})],O.prototype,"options",void 0),$([e({type:String,attribute:"default-value"})],O.prototype,"defaultValue",void 0),$([e({type:String})],O.prototype,"value",void 0),$([e({type:String})],O.prototype,"name",void 0),$([e({type:String})],O.prototype,"direction",void 0),$([e({type:String})],O.prototype,"type",void 0),$([e({type:Boolean})],O.prototype,"required",void 0),$([e({type:Boolean})],O.prototype,"disabled",void 0),$([e({type:String})],O.prototype,"size",void 0),$([e({type:String})],O.prototype,"position",void 0),$([e({type:Boolean,attribute:"auto-width"})],O.prototype,"autoWidth",void 0),$([e({type:String})],O.prototype,"helper",void 0),O=$([n("nr-radio-group")],O);export{O as NrRadioGroupElement,m as RadioButtonDirection,v as RadioButtonPosition,w as RadioButtonSize,f as RadioButtonType,x as RadioButtonVariant};

package/dist/src/components/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+export * from './radio-group.component.js';
+export * from './radio-group.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/radio-group/index.js

@@ -0,0 +1,3 @@
+export * from './radio-group.component.js';
+export * from './radio-group.types.js';
+//# sourceMappingURL=index.js.map