@nuralyui/radio-group 0.0.6 → 0.0.7

package/radio.style.js

@@ -1,339 +0,0 @@
-/**
- * @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

@@ -1 +0,0 @@
-{"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

@@ -1,37 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"]}