atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/range-slider/range-slider.css

@@ -51,9 +51,8 @@
 
 /* Input sync */
 .slider-input {
-  width: 64px;
+  width: max-content;
   padding: 4px 8px;
-  border: 1.5px solid var(--border-strong, #d1d5db);
   border-radius: 6px;
   font-size: 13px;
   font-weight: 500;
@@ -124,16 +123,46 @@
   height: 24px;
 }
 
-.slider-sm .slider-icon {
+.slider-xxxs .slider-icon {
+  font-size: 8px;
+  height: 12px;
+}
+
+.slider-xxs .slider-icon {
+  font-size: 10px;
+  height: 14px;
+}
+
+.slider-xs .slider-icon {
+  font-size: 12px;
+  height: 16px;
+}
+
+.slider-sm .slider-icon, .slider-small .slider-icon {
   font-size: 14px;
   height: 20px;
 }
 
-.slider-lg .slider-icon {
+.slider-lg .slider-icon, .slider-large .slider-icon {
   font-size: 20px;
   height: 28px;
 }
 
+.slider-xl .slider-icon {
+  font-size: 24px;
+  height: 36px;
+}
+
+.slider-xxl .slider-icon {
+  font-size: 28px;
+  height: 44px;
+}
+
+.slider-xxxl .slider-icon {
+  font-size: 32px;
+  height: 56px;
+}
+
 /* Wrapper */
 .slider-wrapper {
   flex: 1;
@@ -146,14 +175,38 @@
   padding: 0 12px;
 }
 
-.slider-sm .slider-wrapper {
+.slider-xxxs .slider-wrapper {
+  min-height: 12px;
+}
+
+.slider-xxs .slider-wrapper {
+  min-height: 14px;
+}
+
+.slider-xs .slider-wrapper {
+  min-height: 16px;
+}
+
+.slider-sm .slider-wrapper, .slider-small .slider-wrapper {
   min-height: 20px;
 }
 
-.slider-lg .slider-wrapper {
+.slider-lg .slider-wrapper, .slider-large .slider-wrapper {
   min-height: 28px;
 }
 
+.slider-xl .slider-wrapper {
+  min-height: 36px;
+}
+
+.slider-xxl .slider-wrapper {
+  min-height: 44px;
+}
+
+.slider-xxxl .slider-wrapper {
+  min-height: 56px;
+}
+
 .slider-vertical .slider-wrapper {
   flex: 1;
   width: 100%;
@@ -166,58 +219,136 @@
 .slider-track {
   position: relative;
   width: 100%;
+  height: 6px;
   border-radius: 10px;
   cursor: pointer;
   background-color: var(--bg-primary, #e5e7eb);
   margin: 12px 0;
 }
 
-.slider-sm .slider-track {
+.slider-xxxs .slider-track {
+  height: 2px;
+}
+
+.slider-xxs .slider-track {
+  height: 3px;
+}
+
+.slider-xs .slider-track {
+  height: 3px;
+}
+
+.slider-sm .slider-track, .slider-small .slider-track {
   height: 4px;
 }
 
-.slider-md .slider-track {
+.slider-md .slider-track, .slider-medium .slider-track, .slider-default .slider-track {
   height: 6px;
 }
 
-.slider-lg .slider-track {
+.slider-lg .slider-track, .slider-large .slider-track {
   height: 8px;
 }
 
+.slider-xl .slider-track {
+  height: 10px;
+}
+
+.slider-xxl .slider-track {
+  height: 12px;
+}
+
+.slider-xxxl .slider-track {
+  height: 16px;
+}
+
 .slider-vertical .slider-track {
   width: 6px;
   height: 100%;
 }
 
-.slider-vertical.slider-sm .slider-track {
+.slider-vertical.slider-xxxs .slider-track {
+  width: 2px;
+}
+
+.slider-vertical.slider-xxs .slider-track {
+  width: 3px;
+}
+
+.slider-vertical.slider-xs .slider-track {
+  width: 3px;
+}
+
+.slider-vertical.slider-sm .slider-track, .slider-vertical.slider-small .slider-track {
   width: 4px;
 }
 
-.slider-vertical.slider-lg .slider-track {
+.slider-vertical.slider-md .slider-track, .slider-vertical.slider-medium .slider-track, .slider-vertical.slider-default .slider-track {
+  width: 6px;
+}
+
+.slider-vertical.slider-lg .slider-track, .slider-vertical.slider-large .slider-track {
   width: 8px;
 }
 
+.slider-vertical.slider-xl .slider-track {
+  width: 10px;
+}
+
+.slider-vertical.slider-xxl .slider-track {
+  width: 12px;
+}
+
+.slider-vertical.slider-xxxl .slider-track {
+  width: 16px;
+}
+
 /* Range (filled portion) */
 .slider-range {
   position: absolute;
+  height: 6px;
   border-radius: 10px;
   background-color: var(--color-primary, #10b981);
   pointer-events: none;
   transition: background-color 0.2s ease;
 }
 
-.slider-sm .slider-range {
+.slider-xxxs .slider-range {
+  height: 2px;
+}
+
+.slider-xxs .slider-range {
+  height: 3px;
+}
+
+.slider-xs .slider-range {
+  height: 3px;
+}
+
+.slider-sm .slider-range, .slider-small .slider-range {
   height: 4px;
 }
 
-.slider-md .slider-range {
+.slider-md .slider-range, .slider-medium .slider-range, .slider-default .slider-range {
   height: 6px;
 }
 
-.slider-lg .slider-range {
+.slider-lg .slider-range, .slider-large .slider-range {
   height: 8px;
 }
 
+.slider-xl .slider-range {
+  height: 10px;
+}
+
+.slider-xxl .slider-range {
+  height: 12px;
+}
+
+.slider-xxxl .slider-range {
+  height: 16px;
+}
+
 .slider-vertical .slider-range {
   width: 100%;
   height: auto;
@@ -250,21 +381,51 @@
   z-index: 11;
 }
 
-.slider-sm .slider-thumb {
+.slider-xxxs .slider-thumb {
+  width: 8px;
+  height: 8px;
+}
+
+.slider-xxs .slider-thumb {
+  width: 10px;
+  height: 10px;
+}
+
+.slider-xs .slider-thumb {
+  width: 12px;
+  height: 12px;
+}
+
+.slider-sm .slider-thumb, .slider-small .slider-thumb {
   width: 14px;
   height: 14px;
 }
 
-.slider-md .slider-thumb {
+.slider-md .slider-thumb, .slider-medium .slider-thumb, .slider-default .slider-thumb {
   width: 18px;
   height: 18px;
 }
 
-.slider-lg .slider-thumb {
+.slider-lg .slider-thumb, .slider-large .slider-thumb {
   width: 24px;
   height: 24px;
 }
 
+.slider-xl .slider-thumb {
+  width: 30px;
+  height: 30px;
+}
+
+.slider-xxl .slider-thumb {
+  width: 36px;
+  height: 36px;
+}
+
+.slider-xxxl .slider-thumb {
+  width: 44px;
+  height: 44px;
+}
+
 .slider-vertical .slider-thumb {
   left: 50%;
   top: auto;
@@ -287,14 +448,17 @@
   left: 50%;
   transform: translateX(-50%);
   padding: 4px 8px;
-  background-color: rgba(0, 0, 0, 0.85);
-  color: var(--text-standard, #ffffff);
+  background-color: var(--bg-tertiary, #1e293b);
+  color: var(--text-primary, #ffffff);
   font-size: 12px;
-  border-radius: 4px;
+  font-weight: 600;
+  border-radius: 6px;
+  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   animation: tooltipFadeIn 0.2s ease forwards;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .slider-tooltip::after {
@@ -304,7 +468,7 @@
   left: 50%;
   transform: translateX(-50%);
   border: 4px solid transparent;
-  border-top-color: rgba(0, 0, 0, 0.85);
+  border-top-color: var(--bg-tertiary, #1e293b);
 }
 
 .slider-vertical .slider-tooltip {
@@ -319,7 +483,7 @@
   left: -8px;
   transform: translateY(-50%);
   border: 4px solid transparent;
-  border-right-color: rgba(0, 0, 0, 0.85);
+  border-right-color: var(--bg-tertiary, #1e293b);
   border-top-color: transparent;
 }
 
@@ -360,16 +524,51 @@
   transform: translate(-50%, -50%);
 }
 
-.slider-sm .slider-mark-dot {
+.slider-xxxs .slider-mark-dot {
+  width: 3px;
+  height: 3px;
+}
+
+.slider-xxs .slider-mark-dot {
+  width: 4px;
+  height: 4px;
+}
+
+.slider-xs .slider-mark-dot {
+  width: 5px;
+  height: 5px;
+}
+
+.slider-sm .slider-mark-dot, .slider-small .slider-mark-dot {
   width: 6px;
   height: 6px;
 }
 
-.slider-lg .slider-mark-dot {
+.slider-md .slider-mark-dot, .slider-medium .slider-mark-dot, .slider-default .slider-mark-dot {
+  width: 8px;
+  height: 8px;
+}
+
+.slider-lg .slider-mark-dot, .slider-large .slider-mark-dot {
   width: 10px;
   height: 10px;
 }
 
+.slider-xl .slider-mark-dot {
+  width: 12px;
+  height: 12px;
+}
+
+.slider-xxl .slider-mark-dot {
+  width: 14px;
+  height: 14px;
+}
+
+.slider-xxxl .slider-mark-dot {
+  width: 18px;
+  height: 18px;
+}
+
 .slider-mark-label {
   position: absolute;
   top: calc(100% + 8px);
@@ -396,14 +595,38 @@
   letter-spacing: 0.01em;
 }
 
-.slider-sm .slider-value-display {
+.slider-xxxs .slider-value-display {
+  font-size: 9px;
+}
+
+.slider-xxs .slider-value-display {
+  font-size: 10px;
+}
+
+.slider-xs .slider-value-display {
+  font-size: 11px;
+}
+
+.slider-sm .slider-value-display, .slider-small .slider-value-display {
   font-size: 12px;
 }
 
-.slider-lg .slider-value-display {
+.slider-lg .slider-value-display, .slider-large .slider-value-display {
   font-size: 14px;
 }
 
+.slider-xl .slider-value-display {
+  font-size: 16px;
+}
+
+.slider-xxl .slider-value-display {
+  font-size: 18px;
+}
+
+.slider-xxxl .slider-value-display {
+  font-size: 22px;
+}
+
 .slider-vertical .slider-value-display {
   display: none;
 }
@@ -442,14 +665,42 @@
     width: 24px;
     height: 24px;
   }
-  .slider-sm .slider-thumb {
+  .slider-xxxs .slider-thumb {
+    width: 12px;
+    height: 12px;
+  }
+  .slider-xxs .slider-thumb {
+    width: 14px;
+    height: 14px;
+  }
+  .slider-xs .slider-thumb {
+    width: 16px;
+    height: 16px;
+  }
+  .slider-sm .slider-thumb, .slider-small .slider-thumb {
     width: 20px;
     height: 20px;
   }
-  .slider-lg .slider-thumb {
+  .slider-md .slider-thumb, .slider-medium .slider-thumb, .slider-default .slider-thumb {
+    width: 24px;
+    height: 24px;
+  }
+  .slider-lg .slider-thumb, .slider-large .slider-thumb {
     width: 30px;
     height: 30px;
   }
+  .slider-xl .slider-thumb {
+    width: 36px;
+    height: 36px;
+  }
+  .slider-xxl .slider-thumb {
+    width: 42px;
+    height: 42px;
+  }
+  .slider-xxxl .slider-thumb {
+    width: 52px;
+    height: 52px;
+  }
 }
 /* --- Variant: Glass --- */
 .variant-glass .slider-track {
@@ -535,14 +786,16 @@
   border-color: var(--dd-primary-strong, var(--color-primary-hover, #2563eb)) !important;
 }
 .variant-detailed .slider-tooltip {
-  background: var(--bg-primary, #1e293b) !important;
+  background: var(--bg-tertiary, #f1f5f9) !important;
+  color: var(--text-primary, #1e293b) !important;
   border-radius: 10px !important;
   padding: 8px 12px !important;
   font-weight: 700 !important;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
+  border: 1px solid var(--border-default) !important;
 }
 .variant-detailed .slider-tooltip::after {
-  border-top-color: var(--border-subtle, #1e293b) !important;
+  border-top-color: var(--bg-tertiary, #f1f5f9) !important;
 }
 .variant-detailed .slider-mark-dot {
   width: 4px !important;

package/dist/collection/components/range-slider/range-slider.js

@@ -890,14 +890,14 @@ export class RangeSlider {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BasicSize",
-                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "original": "ComponentSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxs\"",
                     "references": {
-                        "BasicSize": {
+                        "ComponentSize": {
                             "location": "import",
                             "path": "../../types/common.type",
-                            "id": "src/types/common.type.d.ts::BasicSize",
-                            "referenceLocation": "BasicSize"
+                            "id": "src/types/common.type.d.ts::ComponentSize",
+                            "referenceLocation": "ComponentSize"
                         }
                     }
                 },