@nuralyui/radio-group 0.0.6

package/radio.style.js

@@ -0,0 +1,339 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    /* ========================================
+     * CSS CUSTOM PROPERTIES
+     * ======================================== */
+    
+    /* Layout and sizing */
+    --nuraly-radio-local-size: 14px;
+    --nuraly-radio-local-dot-size: 3px;
+    --nuraly-radio-local-focus-dot-size: 2px;
+    --nuraly-radio-local-margin-right: 10px;
+    --nuraly-radio-local-container-margin-top: 10px;
+    --nuraly-radio-local-direction-horizontal-container-margin-top: 0px;
+    --nuraly-radio-local-position-right-margin-right: 0px;
+    --nuraly-radio-local-position-right-margin-left: 10px;
+
+    /* Colors - Light theme defaults */
+    --nuraly-radio-local-background-color: var(--nuraly-color-radio-background, #ffffff);
+    --nuraly-radio-local-dot-color: var(--nuraly-color-radio-dot, #7c3aed);
+    --nuraly-radio-local-border-color: var(--nuraly-color-radio-border, #d9d9d9);
+    --nuraly-radio-local-hover-border-color: var(--nuraly-color-radio-border-hover, #7c3aed);
+    --nuraly-radio-local-hover-enhanced-color: var(--nuraly-color-radio-hover-enhanced, #8b5cf6);
+    --nuraly-radio-local-checked-border-color: var(--nuraly-color-radio-checked-border, #7c3aed);
+    --nuraly-radio-local-focus-border-color: var(--nuraly-color-radio-border-focus, #7c3aed);
+    --nuraly-radio-local-error-border-color: var(--nuraly-color-radio-error-border, #ef4444);
+    --nuraly-radio-local-error-icon-color: var(--nuraly-color-radio-error-icon, #ef4444);
+    --nuraly-radio-local-error-text-color: var(--nuraly-color-radio-error-text, #ef4444);
+    --nuraly-radio-local-warning-icon-color: var(--nuraly-color-radio-warning-icon, #f59e0b);
+
+    /* Typography */
+    --nuraly-radio-local-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-local-label-font-size: var(--nuraly-font-size-radio-label, 15px);
+    --nuraly-radio-local-message-font-size: var(--nuraly-font-size-radio-message, 12px);
+
+    /* States */
+    --nuraly-radio-local-disabled-opacity: 0.5;
+
+    /* Animation and transitions */
+    --nuraly-radio-local-transition-duration: 0.2s;
+    --nuraly-radio-local-ripple-duration: 0.2s;
+    --nuraly-radio-local-ripple-color: var(--nuraly-color-radio-ripple, rgba(124, 58, 237, 0.2));
+    --nuraly-radio-local-ripple-max-size: 8px;
+
+    /* Focus and interaction */
+    --nuraly-radio-local-focus-outline-width: 2px;
+    --nuraly-radio-local-focus-outline-color: var(--nuraly-color-radio-focus-outline, rgba(124, 58, 237, 0.2));
+
+    /* Hover ring */
+    --nuraly-radio-local-hover-ring-width: 4px;
+    --nuraly-radio-local-hover-ring-color: var(--nuraly-color-radio-hover-ring, rgba(124, 58, 237, 0.1));
+
+    /* Button type borders */
+    --nuraly-radio-local-button-border-radius: 4px;
+
+    /* ========================================
+     * COMPONENT STYLES
+     * ======================================== */
+    
+    width: fit-content;
+    display: block;
+    font-family: var(--nuraly-radio-font-family, var(--nuraly-radio-local-font-family));
+  }
+
+  :host([direction='horizontal']) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  :host([position='right']) .radio {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+
+  :host([position='right']) span {
+    flex-grow: 1;
+  }
+
+  :host([position='right'][direction='horizontal']) span {
+    flex-grow: 0;
+  }
+
+  :host([position='right']) input[type='radio'] {
+    margin-right: var(--nuraly-radio-position-right-margin-right, var(--nuraly-radio-local-position-right-margin-right));
+    margin-left: var(--nuraly-radio-position-right-margin-left, var(--nuraly-radio-local-position-right-margin-left));
+  }
+
+  :host([direction='horizontal']) .radio {
+    margin-top: var(--nuraly-radio-direction-horizontal-container-margin-top, var(--nuraly-radio-local-direction-horizontal-container-margin-top));
+  }
+
+  input[type='radio'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: var(--nuraly-radio-size, var(--nuraly-radio-local-size));
+    height: var(--nuraly-radio-size, var(--nuraly-radio-local-size));
+    padding: var(--nuraly-radio-dot-size, var(--nuraly-radio-local-dot-size));
+    background-color: var(--nuraly-radio-background-color, var(--nuraly-radio-local-background-color));
+    background-clip: content-box;
+    border: 1px solid var(--nuraly-radio-border-color, var(--nuraly-radio-local-border-color));
+    border-radius: 50%;
+    margin: 0px;
+    margin-right: var(--nuraly-radio-margin-right, var(--nuraly-radio-local-margin-right));
+    cursor: pointer;
+    position: relative;
+    transition: all var(--nuraly-radio-transition-duration, var(--nuraly-radio-local-transition-duration));
+  }
+
+  /* Hover ring effect using box-shadow - no layout shift */
+  .radio:hover input[type='radio']:not(:disabled) {
+    border-color: var(--nuraly-radio-hover-border-color, var(--nuraly-radio-local-hover-border-color));
+    box-shadow: 0 0 0 var(--nuraly-radio-hover-ring-width, var(--nuraly-radio-local-hover-ring-width)) 
+                var(--nuraly-radio-hover-ring-color, var(--nuraly-radio-local-hover-ring-color));
+  }
+
+  .error input[type='radio'] {
+    border: 1px solid var(--nuraly-radio-error-border-color, var(--nuraly-radio-local-error-border-color));
+  }
+
+  input[type='radio']:focus {
+    border: 2px solid var(--nuraly-radio-focus-border-color, var(--nuraly-radio-local-focus-border-color));
+    padding: var(--nuraly-radio-focus-dot-size, var(--nuraly-radio-local-focus-dot-size));
+    outline: none;
+    box-shadow: 0 0 0 var(--nuraly-radio-focus-outline-width, var(--nuraly-radio-local-focus-outline-width)) 
+                var(--nuraly-radio-focus-outline-color, var(--nuraly-radio-local-focus-outline-color));
+  }
+
+  .error input[type='radio']:focus {
+    border: 1px solid var(--nuraly-radio-error-border-color, var(--nuraly-radio-local-error-border-color));
+    padding: var(--nuraly-radio-dot-size, var(--nuraly-radio-local-dot-size));
+  }
+
+  input[type='radio']:checked {
+    background-color: var(--nuraly-radio-dot-color, var(--nuraly-radio-local-dot-color));
+    border-color: var(--nuraly-radio-checked-border-color, var(--nuraly-radio-local-checked-border-color));
+    animation: radioRipple var(--nuraly-radio-ripple-duration, var(--nuraly-radio-local-ripple-duration)) ease-out;
+  }
+
+  /* Ripple effect animation */
+  @keyframes radioRipple {
+    0% {
+      box-shadow: 0 0 0 0 var(--nuraly-radio-ripple-color, var(--nuraly-radio-local-ripple-color));
+    }
+    50% {
+      box-shadow: 0 0 0 var(--nuraly-radio-ripple-max-size, var(--nuraly-radio-local-ripple-max-size)) 
+                  var(--nuraly-radio-ripple-color, var(--nuraly-radio-local-ripple-color));
+    }
+    100% {
+      box-shadow: 0 0 0 var(--nuraly-radio-ripple-max-size, var(--nuraly-radio-local-ripple-max-size)) 
+                  transparent;
+    }
+  }
+
+  input[type='radio']:disabled,
+  .radio-container:has(input[type='radio']:disabled) {
+    opacity: var(--nuraly-radio-disabled-opacity, var(--nuraly-radio-local-disabled-opacity));
+  }
+
+  .input-container {
+    display: flex;
+  }
+
+  .radio {
+    display: flex;
+    align-items: center;
+    margin-top: var(--nuraly-radio-container-margin-top, var(--nuraly-radio-local-container-margin-top));
+    font-size: var(--nuraly-radio-label-font-size, var(--nuraly-radio-local-label-font-size));
+    cursor: pointer;
+    flex-grow: 1;
+  }
+
+  .message-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: var(--nuraly-radio-message-font-size, var(--nuraly-radio-local-message-font-size));
+  }
+
+  nr-icon {
+    display: flex;
+  }
+
+  .error nr-icon {
+    --nuraly-icon-color: var(--nuraly-radio-error-icon-color, var(--nuraly-radio-local-error-icon-color));
+  }
+
+  .warning nr-icon {
+    --nuraly-icon-color: var(--nuraly-radio-warning-icon-color, var(--nuraly-radio-local-warning-icon-color));
+  }
+
+  .error .message-container {
+    color: var(--nuraly-radio-error-text-color, var(--nuraly-radio-local-error-text-color));
+  }
+
+  .radio:has(input:disabled) {
+    cursor: not-allowed;
+  }
+
+  input:disabled {
+    cursor: not-allowed;
+  }
+
+  .type-button {
+    display: inline-flex;
+    gap: 0px; /* Always no gap */
+  }
+
+  /* Button styling - no layout shifts */
+  .type-button :first-child {
+    --nuraly-button-border-top-left-radius: var(--nuraly-radio-button-border-radius, var(--nuraly-radio-local-button-border-radius));
+    --nuraly-button-border-bottom-left-radius: var(--nuraly-radio-button-border-radius, var(--nuraly-radio-local-button-border-radius));
+  }
+
+  .type-button :last-child {
+    --nuraly-button-border-top-right-radius: var(--nuraly-radio-button-border-radius, var(--nuraly-radio-local-button-border-radius));
+    --nuraly-button-border-bottom-right-radius: var(--nuraly-radio-button-border-radius, var(--nuraly-radio-local-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-hover-border-color, var(--nuraly-radio-local-hover-border-color));
+    --nuraly-button-border-color: var(--nuraly-radio-hover-border-color, var(--nuraly-radio-local-hover-border-color));
+    z-index: 2;
+  }
+
+  /* Selected buttons use primary type and inherit primary button styling */
+  .type-button nr-button[type="primary"] {
+    z-index: 1;
+    position: relative;
+  }
+
+  /* Disabled button states in groups */
+  .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));
+  }
+
+  /* Disabled primary buttons in groups */
+  .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));
+  }
+
+  /* Slot-based radio styling */
+  .slot-container {
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .slot-container:hover {
+    background-color: rgba(124, 58, 237, 0.04);
+    border-radius: 6px;
+  }
+
+  .slot-container.selected {
+    background-color: rgba(124, 58, 237, 0.08);
+    border-radius: 6px;
+  }
+
+  .slot-radio {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    cursor: pointer;
+    padding-left: 8px;
+  }
+
+  .slot-radio input[type="radio"] {
+    margin: 0;
+    flex-shrink: 0;
+    align-self: center;
+  }
+
+  .slot-content {
+    flex: 1;
+    width: 100%;
+  }
+
+  /* Hide radio input for slot-only content */
+  .slot-container.no-radio .radio-input {
+    display: none;
+  }
+
+  /* Dark theme overrides */
+  .radio-container[data-theme="dark"] input[type='radio'] {
+    --nuraly-radio-local-dot-color: #1677ff;
+    --nuraly-radio-local-border-color: #434343;
+    --nuraly-radio-local-hover-border-color: #1677ff;
+    --nuraly-radio-local-hover-enhanced-color: #4096ff;
+    --nuraly-radio-local-checked-border-color: #1677ff;
+    --nuraly-radio-local-focus-border-color: #1677ff;
+    --nuraly-radio-local-focus-outline-color: rgba(22, 119, 255, 0.3);
+    --nuraly-radio-local-ripple-color: rgba(22, 119, 255, 0.3);
+    --nuraly-radio-local-hover-ring-color: rgba(22, 119, 255, 0.15);
+  }
+
+  .radio-container[data-theme="dark"] input[type='radio'] {
+    border-color: var(--nuraly-radio-border-color, var(--nuraly-radio-local-border-color));
+  }
+
+  .radio-container[data-theme="dark"] input[type='radio']:checked {
+    background-color: var(--nuraly-radio-dot-color, var(--nuraly-radio-local-dot-color));
+  }
+
+  .radio-container[data-theme="dark"] input[type='radio']:focus {
+    border-color: var(--nuraly-radio-focus-border-color, var(--nuraly-radio-local-focus-border-color));
+  }
+`;
+//# sourceMappingURL=radio.style.js.map

package/radio.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.style.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2UxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    /* ========================================\n     * CSS CUSTOM PROPERTIES\n     * ======================================== */\n    \n    /* Layout and sizing */\n    --nuraly-radio-local-size: 14px;\n    --nuraly-radio-local-dot-size: 3px;\n    --nuraly-radio-local-focus-dot-size: 2px;\n    --nuraly-radio-local-margin-right: 10px;\n    --nuraly-radio-local-container-margin-top: 10px;\n    --nuraly-radio-local-direction-horizontal-container-margin-top: 0px;\n    --nuraly-radio-local-position-right-margin-right: 0px;\n    --nuraly-radio-local-position-right-margin-left: 10px;\n\n    /* Colors - Light theme defaults */\n    --nuraly-radio-local-background-color: var(--nuraly-color-radio-background, #ffffff);\n    --nuraly-radio-local-dot-color: var(--nuraly-color-radio-dot, #7c3aed);\n    --nuraly-radio-local-border-color: var(--nuraly-color-radio-border, #d9d9d9);\n    --nuraly-radio-local-hover-border-color: var(--nuraly-color-radio-border-hover, #7c3aed);\n    --nuraly-radio-local-hover-enhanced-color: var(--nuraly-color-radio-hover-enhanced, #8b5cf6);\n    --nuraly-radio-local-checked-border-color: var(--nuraly-color-radio-checked-border, #7c3aed);\n    --nuraly-radio-local-focus-border-color: var(--nuraly-color-radio-border-focus, #7c3aed);\n    --nuraly-radio-local-error-border-color: var(--nuraly-color-radio-error-border, #ef4444);\n    --nuraly-radio-local-error-icon-color: var(--nuraly-color-radio-error-icon, #ef4444);\n    --nuraly-radio-local-error-text-color: var(--nuraly-color-radio-error-text, #ef4444);\n    --nuraly-radio-local-warning-icon-color: var(--nuraly-color-radio-warning-icon, #f59e0b);\n\n    /* Typography */\n    --nuraly-radio-local-font-family: var(--nuraly-font-family-radio, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif);\n    --nuraly-radio-local-label-font-size: var(--nuraly-font-size-radio-label, 15px);\n    --nuraly-radio-local-message-font-size: var(--nuraly-font-size-radio-message, 12px);\n\n    /* States */\n    --nuraly-radio-local-disabled-opacity: 0.5;\n\n    /* Animation and transitions */\n    --nuraly-radio-local-transition-duration: 0.2s;\n    --nuraly-radio-local-ripple-duration: 0.2s;\n    --nuraly-radio-local-ripple-color: var(--nuraly-color-radio-ripple, rgba(124, 58, 237, 0.2));\n    --nuraly-radio-local-ripple-max-size: 8px;\n\n    /* Focus and interaction */\n    --nuraly-radio-local-focus-outline-width: 2px;\n    --nuraly-radio-local-focus-outline-color: var(--nuraly-color-radio-focus-outline, rgba(124, 58, 237, 0.2));\n\n    /* Hover ring */\n    --nuraly-radio-local-hover-ring-width: 4px;\n    --nuraly-radio-local-hover-ring-color: var(--nuraly-color-radio-hover-ring, rgba(124, 58, 237, 0.1));\n\n    /* Button type borders */\n    --nuraly-radio-local-button-border-radius: 4px;\n\n    /* ========================================\n     * COMPONENT STYLES\n     * ======================================== */\n    \n    width: fit-content;\n    display: block;\n    font-family: var(--nuraly-radio-font-family, var(--nuraly-radio-local-font-family));\n  }\n\n  :host([direction='horizontal']) {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n  }\n\n  :host([position='right']) .radio {\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n  }\n\n  :host([position='right']) span {\n    flex-grow: 1;\n  }\n\n  :host([position='right'][direction='horizontal']) span {\n    flex-grow: 0;\n  }\n\n  :host([position='right']) input[type='radio'] {\n    margin-right: var(--nuraly-radio-position-right-margin-right, var(--nuraly-radio-local-position-right-margin-right));\n    margin-left: var(--nuraly-radio-position-right-margin-left, var(--nuraly-radio-local-position-right-margin-left));\n  }\n\n  :host([direction='horizontal']) .radio {\n    margin-top: var(--nuraly-radio-direction-horizontal-container-margin-top, var(--nuraly-radio-local-direction-horizontal-container-margin-top));\n  }\n\n  input[type='radio'] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    width: var(--nuraly-radio-size, var(--nuraly-radio-local-size));\n    height: var(--nuraly-radio-size, var(--nuraly-radio-local-size));\n    padding: var(--nuraly-radio-dot-size, var(--nuraly-radio-local-dot-size));\n    background-color: var(--nuraly-radio-background-color, var(--nuraly-radio-local-background-color));\n    background-clip: content-box;\n    border: 1px solid var(--nuraly-radio-border-color, var(--nuraly-radio-local-border-color));\n    border-radius: 50%;\n    margin: 0px;\n    margin-right: var(--nuraly-radio-margin-right, var(--nuraly-radio-local-margin-right));\n    cursor: pointer;\n    position: relative;\n    transition: all var(--nuraly-radio-transition-duration, var(--nuraly-radio-local-transition-duration));\n  }\n\n  /* Hover ring effect using box-shadow - no layout shift */\n  .radio:hover input[type='radio']:not(:disabled) {\n    border-color: var(--nuraly-radio-hover-border-color, var(--nuraly-radio-local-hover-border-color));\n    box-shadow: 0 0 0 var(--nuraly-radio-hover-ring-width, var(--nuraly-radio-local-hover-ring-width)) \n                var(--nuraly-radio-hover-ring-color, var(--nuraly-radio-local-hover-ring-color));\n  }\n\n  .error input[type='radio'] {\n    border: 1px solid var(--nuraly-radio-error-border-color, var(--nuraly-radio-local-error-border-color));\n  }\n\n  input[type='radio']:focus {\n    border: 2px solid var(--nuraly-radio-focus-border-color, var(--nuraly-radio-local-focus-border-color));\n    padding: var(--nuraly-radio-focus-dot-size, var(--nuraly-radio-local-focus-dot-size));\n    outline: none;\n    box-shadow: 0 0 0 var(--nuraly-radio-focus-outline-width, var(--nuraly-radio-local-focus-outline-width)) \n                var(--nuraly-radio-focus-outline-color, var(--nuraly-radio-local-focus-outline-color));\n  }\n\n  .error input[type='radio']:focus {\n    border: 1px solid var(--nuraly-radio-error-border-color, var(--nuraly-radio-local-error-border-color));\n    padding: var(--nuraly-radio-dot-size, var(--nuraly-radio-local-dot-size));\n  }\n\n  input[type='radio']:checked {\n    background-color: var(--nuraly-radio-dot-color, var(--nuraly-radio-local-dot-color));\n    border-color: var(--nuraly-radio-checked-border-color, var(--nuraly-radio-local-checked-border-color));\n    animation: radioRipple var(--nuraly-radio-ripple-duration, var(--nuraly-radio-local-ripple-duration)) ease-out;\n  }\n\n  /* Ripple effect animation */\n  @keyframes radioRipple {\n    0% {\n      box-shadow: 0 0 0 0 var(--nuraly-radio-ripple-color, var(--nuraly-radio-local-ripple-color));\n    }\n    50% {\n      box-shadow: 0 0 0 var(--nuraly-radio-ripple-max-size, var(--nuraly-radio-local-ripple-max-size)) \n                  var(--nuraly-radio-ripple-color, var(--nuraly-radio-local-ripple-color));\n    }\n    100% {\n      box-shadow: 0 0 0 var(--nuraly-radio-ripple-max-size, var(--nuraly-radio-local-ripple-max-size)) \n                  transparent;\n    }\n  }\n\n  input[type='radio']:disabled,\n  .radio-container:has(input[type='radio']:disabled) {\n    opacity: var(--nuraly-radio-disabled-opacity, var(--nuraly-radio-local-disabled-opacity));\n  }\n\n  .input-container {\n    display: flex;\n  }\n\n  .radio {\n    display: flex;\n    align-items: center;\n    margin-top: var(--nuraly-radio-container-margin-top, var(--nuraly-radio-local-container-margin-top));\n    font-size: var(--nuraly-radio-label-font-size, var(--nuraly-radio-local-label-font-size));\n    cursor: pointer;\n    flex-grow: 1;\n  }\n\n  .message-container {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: var(--nuraly-radio-message-font-size, var(--nuraly-radio-local-message-font-size));\n  }\n\n  nr-icon {\n    display: flex;\n  }\n\n  .error nr-icon {\n    --nuraly-icon-color: var(--nuraly-radio-error-icon-color, var(--nuraly-radio-local-error-icon-color));\n  }\n\n  .warning nr-icon {\n    --nuraly-icon-color: var(--nuraly-radio-warning-icon-color, var(--nuraly-radio-local-warning-icon-color));\n  }\n\n  .error .message-container {\n    color: var(--nuraly-radio-error-text-color, var(--nuraly-radio-local-error-text-color));\n  }\n\n  .radio:has(input:disabled) {\n    cursor: not-allowed;\n  }\n\n  input:disabled {\n    cursor: not-allowed;\n  }\n\n  .type-button {\n    display: inline-flex;\n    gap: 0px; /* Always no gap */\n  }\n\n  /* Button styling - no layout shifts */\n  .type-button :first-child {\n    --nuraly-button-border-top-left-radius: var(--nuraly-radio-button-border-radius, var(--nuraly-radio-local-button-border-radius));\n    --nuraly-button-border-bottom-left-radius: var(--nuraly-radio-button-border-radius, var(--nuraly-radio-local-button-border-radius));\n  }\n\n  .type-button :last-child {\n    --nuraly-button-border-top-right-radius: var(--nuraly-radio-button-border-radius, var(--nuraly-radio-local-button-border-radius));\n    --nuraly-button-border-bottom-right-radius: var(--nuraly-radio-button-border-radius, var(--nuraly-radio-local-button-border-radius));\n  }\n\n  .type-button nr-button:not(:last-child) {\n    margin-right: -1px;\n  }\n\n  .type-button nr-button {\n    position: relative;\n    z-index: 1;\n  }\n\n  .type-button nr-button[type=\"default\"]:hover {\n    --nuraly-button-color: var(--nuraly-radio-hover-border-color, var(--nuraly-radio-local-hover-border-color));\n    --nuraly-button-border-color: var(--nuraly-radio-hover-border-color, var(--nuraly-radio-local-hover-border-color));\n    z-index: 2;\n  }\n\n  /* Selected buttons use primary type and inherit primary button styling */\n  .type-button nr-button[type=\"primary\"] {\n    z-index: 1;\n    position: relative;\n  }\n\n  /* Disabled button states in groups */\n  .type-button nr-button[disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .type-button nr-button[disabled]:hover {\n    z-index: auto;\n    --nuraly-button-border-color: var(--nuraly-button-disabled-border-color, var(--nuraly-button-local-disabled-border-color));\n    --nuraly-button-background-color: var(--nuraly-button-disabled-background-color, var(--nuraly-button-local-disabled-background-color));\n    --nuraly-button-color: var(--nuraly-button-disabled-text-color, var(--nuraly-button-local-disabled-text-color));\n  }\n\n  /* Disabled primary buttons in groups */\n  .type-button nr-button[type=\"primary\"][disabled] {\n    --nuraly-button-background-color: var(--nuraly-button-primary-disabled-background-color, var(--nuraly-button-local-primary-disabled-background-color));\n    --nuraly-button-border-color: var(--nuraly-button-primary-disabled-border-color, var(--nuraly-button-local-primary-disabled-border-color));\n    --nuraly-button-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n  }\n\n  .type-button nr-button[type=\"primary\"][disabled] nr-icon {\n    --nuraly-icon-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n    --nuraly-icon-local-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n  }\n\n  /* Slot-based radio styling */\n  .slot-container {\n    cursor: pointer;\n    transition: all 0.2s ease;\n  }\n\n  .slot-container:hover {\n    background-color: rgba(124, 58, 237, 0.04);\n    border-radius: 6px;\n  }\n\n  .slot-container.selected {\n    background-color: rgba(124, 58, 237, 0.08);\n    border-radius: 6px;\n  }\n\n  .slot-radio {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    cursor: pointer;\n    padding-left: 8px;\n  }\n\n  .slot-radio input[type=\"radio\"] {\n    margin: 0;\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  .slot-content {\n    flex: 1;\n    width: 100%;\n  }\n\n  /* Hide radio input for slot-only content */\n  .slot-container.no-radio .radio-input {\n    display: none;\n  }\n\n  /* Dark theme overrides */\n  .radio-container[data-theme=\"dark\"] input[type='radio'] {\n    --nuraly-radio-local-dot-color: #1677ff;\n    --nuraly-radio-local-border-color: #434343;\n    --nuraly-radio-local-hover-border-color: #1677ff;\n    --nuraly-radio-local-hover-enhanced-color: #4096ff;\n    --nuraly-radio-local-checked-border-color: #1677ff;\n    --nuraly-radio-local-focus-border-color: #1677ff;\n    --nuraly-radio-local-focus-outline-color: rgba(22, 119, 255, 0.3);\n    --nuraly-radio-local-ripple-color: rgba(22, 119, 255, 0.3);\n    --nuraly-radio-local-hover-ring-color: rgba(22, 119, 255, 0.15);\n  }\n\n  .radio-container[data-theme=\"dark\"] input[type='radio'] {\n    border-color: var(--nuraly-radio-border-color, var(--nuraly-radio-local-border-color));\n  }\n\n  .radio-container[data-theme=\"dark\"] input[type='radio']:checked {\n    background-color: var(--nuraly-radio-dot-color, var(--nuraly-radio-local-dot-color));\n  }\n\n  .radio-container[data-theme=\"dark\"] input[type='radio']:focus {\n    border-color: var(--nuraly-radio-focus-border-color, var(--nuraly-radio-local-focus-border-color));\n  }\n`;\n"]}

package/radio.type.d.ts

@@ -0,0 +1,37 @@
+export declare type RadioButtonOption = {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    state?: RadioButtonState;
+    message?: string;
+    htmlContent?: string;
+    className?: string;
+    style?: string;
+    title?: string;
+    id?: string;
+};
+export declare type RadioButtonState = 'error' | 'warning';
+export declare enum RadioButtonDirection {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+export declare enum RadioButtonPosition {
+    Left = "left",
+    Right = "right"
+}
+export declare enum RadioButtonType {
+    Default = "default",
+    Button = "button",
+    Slot = "slot"
+}
+export declare enum RadioButtonSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+export declare enum RadioButtonVariant {
+    Default = "default",
+    Solid = "solid"
+}
+//# sourceMappingURL=radio.type.d.ts.map

package/radio.type.js

@@ -0,0 +1,28 @@
+export var RadioButtonDirection;
+(function (RadioButtonDirection) {
+    RadioButtonDirection["Horizontal"] = "horizontal";
+    RadioButtonDirection["Vertical"] = "vertical";
+})(RadioButtonDirection || (RadioButtonDirection = {}));
+export var RadioButtonPosition;
+(function (RadioButtonPosition) {
+    RadioButtonPosition["Left"] = "left";
+    RadioButtonPosition["Right"] = "right";
+})(RadioButtonPosition || (RadioButtonPosition = {}));
+export var RadioButtonType;
+(function (RadioButtonType) {
+    RadioButtonType["Default"] = "default";
+    RadioButtonType["Button"] = "button";
+    RadioButtonType["Slot"] = "slot";
+})(RadioButtonType || (RadioButtonType = {}));
+export var RadioButtonSize;
+(function (RadioButtonSize) {
+    RadioButtonSize["Small"] = "small";
+    RadioButtonSize["Medium"] = "medium";
+    RadioButtonSize["Large"] = "large";
+})(RadioButtonSize || (RadioButtonSize = {}));
+export var RadioButtonVariant;
+(function (RadioButtonVariant) {
+    RadioButtonVariant["Default"] = "default";
+    RadioButtonVariant["Solid"] = "solid";
+})(RadioButtonVariant || (RadioButtonVariant = {}));
+//# sourceMappingURL=radio.type.js.map

package/radio.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.type.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio.type.ts"],"names":[],"mappings":"AAgBA,MAAM,CAAN,IAAY,oBAGX;AAHD,WAAY,oBAAoB;IAC9B,iDAAyB,CAAA;IACzB,6CAAqB,CAAA;AACvB,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,QAG/B;AAED,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,oCAAa,CAAA;IACb,sCAAe,CAAA;AACjB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;IACzB,sCAAmB,CAAA;IACnB,oCAAiB,CAAA;IACjB,gCAAa,CAAA;AACf,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B;AAED,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,kCAAe,CAAA;AACjB,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B","sourcesContent":["export type RadioButtonOption = {\n  value: string;\n  label: string;\n  icon?: string;\n  disabled?: boolean;\n  state?: RadioButtonState;\n  message?: string;\n  htmlContent?: string; // Support for HTML content instead of plain label\n  className?: string; // Custom CSS class for the option\n  style?: string; // Inline styles for the option\n  title?: string; // Tooltip text\n  id?: string; // Custom ID for the option\n};\n\nexport type RadioButtonState = 'error' | 'warning';\n\nexport enum RadioButtonDirection {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n\nexport enum RadioButtonPosition {\n  Left = 'left',\n  Right = 'right',\n}\n\nexport enum RadioButtonType {\n  Default = 'default',\n  Button = 'button',\n  Slot = 'slot',\n}\n\nexport enum RadioButtonSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\n\nexport enum RadioButtonVariant {\n  Default = 'default',\n  Solid = 'solid',\n}\n"]}

package/react.d.ts

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

package/react.js

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { NrRadioGroupElement } from './radio-group.component.js';
+export const NrRadioGroup = createComponent({
+    tagName: 'nr-radio-group',
+    elementClass: NrRadioGroupElement,
+    react: React,
+    events: {
+        onChanged: 'nr-change'
+    }
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/radio-group/react.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,mBAAmB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,SAAS,EAAE,WAAW;KACvB;CACF,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { NrRadioGroupElement } from './radio-group.component.js';\n\nexport const NrRadioGroup = createComponent({\n  tagName: 'nr-radio-group',\n  elementClass: NrRadioGroupElement,\n  react: React,\n  events: {\n    onChanged: 'nr-change'\n  }\n});\n"]}