@radui/ui 1.0.0 → 1.1.0

package/dist/styles/clarity/Slider/slider.clarity.scss

@@ -0,0 +1,203 @@
+// Slider — Clarity design system aligned
+// Track bg: step 5 (400) — contrasted interactive rail
+// Track border: step 8 (700) — defined rail edge
+// Track end caps: step 5 (400) bg, step 8 (700) border
+// Range fill: accent-700 — brand/solid color
+// Thumb bg: step 1 (50) — canvas bg (clean, no hue)
+// Thumb border: step 7 (600) — default border
+// Thumb hover/active/dragging border: accent-600/700 — interactive signal
+// Mark line: step 7 (600) — default border
+// Mark label: step 11 (950) — supporting content
+.rad-ui-slider {
+  position: relative;
+  width: 100%;
+  max-width: var(--rad-ui-slider-inline-size, calc(var(--rad-ui-overlay-width-md) + var(--rad-ui-spacing-6)));
+  min-height: var(--rad-ui-control-height-sm);
+  display: flex;
+  align-items: center;
+  touch-action: none;
+  user-select: none;
+
+  .rad-ui-slider-track {
+    position: relative;
+    width: 100%;
+    height: var(--rad-ui-slider-track-size, calc(var(--rad-ui-density-gap-sm) + var(--rad-ui-density-gap-xs)));
+    border-radius: var(--rad-ui-control-radius-pill);
+    background-color: var(--rad-ui-color-gray-400); // step 5 — contrasted interactive rail
+    box-shadow:
+      inset 0 0 0 var(--rad-ui-border-width-default) var(--rad-ui-color-gray-700),
+      var(--rad-ui-control-shadow);
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      width: var(--rad-ui-density-gap-md);
+      height: var(--rad-ui-density-gap-md);
+      border-radius: var(--rad-ui-control-radius-pill);
+      background-color: var(--rad-ui-color-gray-400); // step 5
+      border: var(--rad-ui-border-width-default) solid var(--rad-ui-color-gray-700); // step 8 — defined edge
+      transform: translateY(-50%);
+    }
+
+    &::before { left: calc(var(--rad-ui-density-gap-xs) * -1); }
+    &::after  { right: calc(var(--rad-ui-density-gap-xs) * -1); }
+  }
+
+  .rad-ui-slider-range {
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--rad-ui-color-accent-700); // accent — brand fill
+    box-shadow: inset 0 0 0 var(--rad-ui-border-width-default) var(--rad-ui-color-accent-600);
+  }
+
+  .rad-ui-slider-thumb,
+  .rad-ui-slider-thumb-lower,
+  .rad-ui-slider-thumb-upper {
+    width: var(--rad-ui-icon-size-md);
+    height: var(--rad-ui-icon-size-md);
+    background-color: var(--rad-ui-color-gray-50);  // step 1 — canvas bg
+    border-radius: var(--rad-ui-control-radius-pill);
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-color-gray-600); // step 7 — default border
+    box-shadow: var(--rad-ui-control-shadow);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 2;
+    transition: border-color var(--rad-ui-motion-duration-fast) ease, box-shadow var(--rad-ui-motion-duration-fast) ease;
+
+    &:hover {
+      border-color: var(--rad-ui-color-accent-600); // accent — hover signal
+      box-shadow: var(--rad-ui-control-shadow-hover);
+    }
+
+    &[data-state="active"] {
+      border-color: var(--rad-ui-color-accent-700);
+      transform: translateY(-50%) scale(1.04);
+      box-shadow: var(--rad-ui-control-shadow-active);
+    }
+
+    &[data-state="dragging"] {
+      border-color: var(--rad-ui-color-accent-700);
+      transform: translateY(-50%) scale(1.08);
+      box-shadow: var(--rad-ui-control-shadow-active);
+    }
+
+    &[data-disabled="true"] {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--rad-ui-focus-ring-shadow);
+    }
+  }
+
+  .rad-ui-slider-marks {
+    position: absolute;
+    inset: calc(var(--rad-ui-density-gap-lg) * -1) 0 0 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .rad-ui-slider-mark {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .rad-ui-slider-mark-line {
+      background-color: var(--rad-ui-color-gray-600); // step 7 — default border
+      border-radius: var(--rad-ui-density-gap-xs);
+    }
+
+    .rad-ui-slider-mark-label {
+      position: absolute;
+      font-size: var(--rad-ui-component-font-size-xs);
+      font-weight: var(--rad-ui-component-font-weight-regular);
+      color: var(--rad-ui-text-secondary);
+      background-color: transparent;
+      padding: var(--rad-ui-border-width-default) var(--rad-ui-density-gap-sm);
+      border-radius: var(--rad-ui-density-gap-xs);
+      border: none;
+      box-shadow: var(--rad-ui-shadow-none);
+    }
+
+    &:not(.rad-ui-slider-mark-custom) .rad-ui-slider-mark-line {
+      width: var(--rad-ui-density-gap-md);
+      height: var(--rad-ui-density-gap-xs);
+      opacity: 0.8;
+    }
+
+    &.rad-ui-slider-mark-custom {
+      .rad-ui-slider-mark-line  { background-color: var(--rad-ui-border-strong); }
+      .rad-ui-slider-mark-label { font-weight: var(--rad-ui-component-font-weight-medium); color: var(--rad-ui-text-primary); }
+    }
+  }
+
+  &[data-orientation="vertical"] {
+    height: var(--rad-ui-slider-block-size, calc(var(--rad-ui-overlay-width-sm) - var(--rad-ui-size-10)));
+    width: calc(var(--rad-ui-control-height-md) + var(--rad-ui-density-gap-md));
+    flex-direction: column;
+
+    .rad-ui-slider-track {
+      height: 100%;
+      width: var(--rad-ui-slider-track-size, calc(var(--rad-ui-density-gap-sm) + var(--rad-ui-density-gap-xs)));
+
+      &::before,
+      &::after {
+        left: 50%;
+        top: auto;
+        transform: translateX(-50%);
+      }
+
+      &::before { top: calc(var(--rad-ui-density-gap-xs) * -1); }
+      &::after  { bottom: calc(var(--rad-ui-density-gap-xs) * -1); }
+    }
+
+    .rad-ui-slider-thumb,
+    .rad-ui-slider-thumb-lower,
+    .rad-ui-slider-thumb-upper {
+      left: 50%;
+      top: auto;
+      transform: translateX(-50%);
+
+      &[data-state="active"] {
+        border-color: var(--rad-ui-color-accent-700);
+        transform: translateX(-50%) scale(1.04);
+        box-shadow: var(--rad-ui-control-shadow-active);
+      }
+
+      &[data-state="dragging"] {
+        border-color: var(--rad-ui-color-accent-700);
+        transform: translateX(-50%) scale(1.08);
+        box-shadow: var(--rad-ui-control-shadow-active);
+      }
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: var(--rad-ui-focus-ring-shadow);
+      }
+    }
+
+    .rad-ui-slider-range { width: 100%; }
+
+    .rad-ui-slider-mark {
+      flex-direction: row;
+      align-items: center;
+
+      .rad-ui-slider-mark-label {
+        top: 50%;
+        right: var(--rad-ui-density-gap-xl);
+        transform: translateY(-50%);
+        margin: 0;
+        white-space: nowrap;
+      }
+
+      .rad-ui-slider-mark-line { width: var(--rad-ui-density-gap-xs); height: var(--rad-ui-density-gap-md); }
+    }
+  }
+}

package/dist/styles/clarity/Spinner/spinner.clarity.scss

@@ -0,0 +1,52 @@
+// Spinner — Clarity design system aligned
+// Track ring: accent-300 — light, low-weight accent surface (step 4 equivalent)
+// Active arc: accent-800 — solid, high contrast accent (step 9 equivalent)
+@keyframes rad-ui-spinner-spin {
+    0%   { transform: rotate(0deg);   opacity: 0.3; }
+    25%  { opacity: 0.6; }
+    50%  { opacity: 0.8; }
+    75%  { opacity: 0.6; }
+    100% { transform: rotate(360deg); opacity: 0.3; }
+}
+
+.rad-ui-spinner-container {
+    // Inline so a spinner can sit next to text, e.g. inside a button.
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: center;
+
+    // The rotating square's bounding box grows past the circle mid-rotation, which creates
+    // transient scrollable overflow in the parent; the circle itself never leaves this box.
+    overflow: hidden;
+    border-radius: 100%;
+}
+
+.rad-ui-spinner {
+    animation: rad-ui-spinner-spin 1.3s linear infinite;
+    border-style: solid;
+    border-color: var(--rad-ui-color-accent-300); // accent step 4 — light track ring
+    border-top-color: var(--rad-ui-color-accent-800); // accent step 9 — solid active arc
+    border-radius: 100%;
+    width: 30px;
+    height: 30px;
+    border-width: 3px;
+
+    &[data-size="small"] {
+        border-width: 2px;
+        width: 20px;
+        height: 20px;
+    }
+
+    &[data-size="medium"] {
+        border-width: 3px;
+        width: 30px;
+        height: 30px;
+    }
+
+    &[data-size="large"] {
+        border-width: 4px;
+        width: 40px;
+        height: 40px;
+    }
+}

package/dist/styles/clarity/Splitter/splitter.clarity.scss

@@ -0,0 +1,151 @@
+// Splitter — Clarity design system aligned
+// Outer border: step 6 (500) — light border
+// Panel bg: step 2 (100) — subtle surface
+// Handle divider line: step 6 (500) — light border/separator
+// Handle divider line active: accent focus color — interaction signal
+// Handle grip pill default: step 9 (800) — solid UI element
+
+.rad-ui-splitter {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  user-select: none;
+  touch-action: none;
+  overflow: hidden;
+  border-radius: var(--rad-ui-radius-lg);
+  border: 1px solid var(--rad-ui-color-gray-500); // step 6 — light border
+  background-color: var(--rad-ui-color-gray-100); // step 2 — subtle surface
+
+  .rad-ui-splitter-panel {
+    position: relative;
+    background-color: var(--rad-ui-color-gray-100); // step 2 — subtle surface
+    flex-shrink: 1;
+    flex-grow: 0;
+    min-width: 0;
+    min-height: 0;
+
+    > * {
+      box-sizing: border-box;
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+
+  .rad-ui-splitter-handle {
+    position: relative;
+    background: transparent;
+    border: 0;
+    border-radius: var(--rad-ui-radius-full);
+    outline: none;
+    flex-shrink: 0;
+    flex-grow: 0;
+    user-select: none;
+    touch-action: none;
+    z-index: 10;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--rad-ui-shadow-none);
+    }
+
+    &[aria-orientation="horizontal"] {
+      height: 100%;
+      cursor: col-resize;
+      width: 11px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 1px;
+        transform: translateX(-50%);
+        background: var(--rad-ui-color-gray-500); // step 6 — separator line
+        transition: background-color var(--rad-ui-motion-duration-fast) ease, width var(--rad-ui-motion-duration-fast) ease;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0.3125rem;
+        height: 1.75rem;
+        transform: translate(-50%, -50%);
+        border-radius: var(--rad-ui-radius-full);
+        background: var(--rad-ui-solid-background);
+        opacity: 1;
+      }
+
+      &:hover::before,
+      &:focus-visible::before,
+      &.active::before,
+      &:active::before {
+        width: 2px;
+        background: var(--rad-ui-focus-ring-color); // accent — interaction signal
+      }
+
+      &[data-disabled]::before {
+        width: 1px;
+        background: var(--rad-ui-color-gray-500);
+      }
+    }
+
+    &[aria-orientation="vertical"] {
+      width: 100%;
+      cursor: row-resize;
+      height: 11px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 50%;
+        height: 1px;
+        transform: translateY(-50%);
+        background: var(--rad-ui-color-gray-500); // step 6 — separator line
+        transition: background-color var(--rad-ui-motion-duration-fast) ease, height var(--rad-ui-motion-duration-fast) ease;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 1.75rem;
+        height: 0.3125rem;
+        transform: translate(-50%, -50%);
+        border-radius: var(--rad-ui-radius-full);
+        background: var(--rad-ui-solid-background);
+        opacity: 1;
+      }
+
+      &:hover::before,
+      &:focus-visible::before,
+      &.active::before,
+      &:active::before {
+        height: 2px;
+        background: var(--rad-ui-focus-ring-color); // accent — interaction signal
+      }
+
+      &[data-disabled]::before {
+        height: 1px;
+        background: var(--rad-ui-color-gray-500);
+      }
+    }
+  }
+
+  // Declared after the orientation blocks so it overrides their resize cursors.
+  .rad-ui-splitter-handle[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rad-ui-splitter-handle::before {
+      transition: none;
+    }
+  }
+}

package/dist/styles/clarity/Steps/steps.clarity.scss

@@ -0,0 +1,143 @@
+// Steps — Clarity design system aligned
+// Bubble border (default): step 6 (500) — light border
+// Bubble bg (default): step 2 (100) — subtle surface
+// Bubble text (default): step 8 (700) — muted/disabled text
+// Connector line (default): step 6 (500) — light separator
+// Active bubble border: accent-500 — interactive selected state
+// Active bubble bg: accent-50 — subtle accent surface
+// Active bubble text: accent-900 — accessible accent text
+// Active bubble ring: accent-100 — soft glow
+// Completed bubble bg: accent-800 — solid accent fill
+// Completed bubble border: accent-600 — solid border
+// Completed line: accent-800 — solid accent connector
+// Title: step 11 (1000) — primary text
+// Description: step 8 (700) — supporting content
+
+.rad-ui-steps {
+    .rad-ui-steps-item {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        position: relative;
+
+        .rad-ui-steps-track {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+
+            .rad-ui-steps-bubble {
+                width: 32px;
+                height: 32px;
+                border: 1px solid var(--rad-ui-color-gray-500); // step 6 — light border
+                background-color: var(--rad-ui-color-gray-100); // step 2 — subtle surface
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                font-weight: 600;
+                color: var(--rad-ui-text-secondary);
+                z-index: 2;
+                transition: border-color var(--rad-ui-motion-duration-fast) ease, background-color var(--rad-ui-motion-duration-fast) ease;
+            }
+
+            .rad-ui-steps-line {
+                width: 2px;
+                flex: 1;
+                min-height: 20px;
+                background-color: var(--rad-ui-color-gray-500); // step 6 — light separator
+                margin: 4px 0;
+                border-radius: 1px;
+                transition: background-color var(--rad-ui-motion-duration-fast) ease;
+            }
+        }
+
+        &[data-state="active"] {
+            .rad-ui-steps-bubble {
+                border-color: var(--rad-ui-color-accent-500);   // accent — active border
+                background-color: var(--rad-ui-color-accent-50); // accent — subtle surface
+                color: var(--rad-ui-color-accent-900);           // accent — accessible text
+                box-shadow: 0 0 0 4px var(--rad-ui-color-accent-100); // accent — soft ring
+            }
+        }
+
+        &[data-state="completed"] {
+            .rad-ui-steps-bubble {
+                border-color: var(--rad-ui-color-accent-600);   // accent — solid border
+                background-color: var(--rad-ui-color-accent-800); // accent — solid fill
+                color: var(--rad-ui-color-gray-50);              // step 1 — inverse text
+            }
+
+            // stylelint-disable-next-line no-descending-specificity
+            .rad-ui-steps-track .rad-ui-steps-line {
+                background-color: var(--rad-ui-color-accent-800); // accent — completed connector
+            }
+        }
+
+        .rad-ui-steps-content {
+            padding-bottom: 24px;
+            padding-top: 4px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+
+            .rad-ui-steps-title {
+                font-size: 15px;
+                font-weight: 600;
+                color: var(--rad-ui-color-gray-1000); // step 11 — primary text
+                line-height: 1.2;
+            }
+
+            .rad-ui-steps-description {
+                font-size: 13px;
+                color: var(--rad-ui-text-secondary);
+                line-height: 1.4;
+            }
+        }
+
+        &:last-child {
+            .rad-ui-steps-line {
+                display: none;
+            }
+
+            .rad-ui-steps-content {
+                padding-bottom: 0;
+            }
+        }
+    }
+
+    // Horizontal orientation: steps sit in a row; the track runs left-to-right with the
+    // connector line filling the gap to the next step.
+    &[data-orientation="horizontal"] {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+
+        .rad-ui-steps-item {
+            flex: 1 1 0;
+            flex-direction: column;
+            gap: var(--rad-ui-spacing-2);
+            min-width: 0;
+
+            .rad-ui-steps-track {
+                flex-direction: row;
+                width: 100%;
+
+                .rad-ui-steps-line {
+                    width: auto;
+                    height: var(--rad-ui-border-width-2);
+                    min-height: var(--rad-ui-spacing-0);
+                    min-width: 20px;
+                    margin: 0 var(--rad-ui-spacing-1);
+                }
+            }
+
+            .rad-ui-steps-content {
+                padding-bottom: var(--rad-ui-spacing-0);
+                padding-inline-end: var(--rad-ui-spacing-4);
+                overflow-wrap: anywhere;
+            }
+        }
+    }
+}

package/dist/styles/clarity/Strong/strong.clarity.scss

@@ -0,0 +1,6 @@
+// Strong — Clarity design system aligned
+// step 11 (1000) — max contrast, primary text, headings
+.rad-ui-strong {
+    font-weight: 700;
+    color: var(--rad-ui-text-strong); // step 11 — primary text
+}

package/dist/styles/clarity/Switch/switch.clarity.scss

@@ -0,0 +1,89 @@
+// Switch — Clarity design system aligned
+// Off track bg: step 4 (300) — muted filled track
+// Off track border: step 7 (600) — defined border
+// Off hover bg/border: step 5/8 (400/700) — stronger muted state
+// On track bg: accent-800 — solid accent fill
+// On track border: accent-600 — solid accent border
+// Thumb bg: step 3 (200) — filled muted knob
+// Thumb border: step 8 (700) — defined knob edge
+// Thumb checked bg: accent-50 — subtle accent tint on knob
+
+.rad-ui-switch {
+  --rad-ui-switch-width: calc(var(--rad-ui-size-10) + var(--rad-ui-spacing-1));
+  --rad-ui-switch-height: calc(var(--rad-ui-size-6) + (var(--rad-ui-spacing-1) / 2));
+  --rad-ui-switch-thumb-shift: calc(var(--rad-ui-size-5) - (var(--rad-ui-spacing-1) / 2));
+
+  all: unset;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  line-height: 0;
+  width: var(--rad-ui-switch-width);
+  height: var(--rad-ui-switch-height);
+  border-radius: var(--rad-ui-control-radius-pill);
+  background-color: var(--rad-ui-color-gray-300); // step 4 — muted filled track
+  border: var(--rad-ui-border-width-default) solid var(--rad-ui-color-gray-600);  // step 7 — defined border
+  cursor: pointer;
+  transition:
+    background-color var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+    border-color var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+    box-shadow var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+    opacity var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard);
+
+  &:hover {
+    background-color: var(--rad-ui-color-gray-400); // step 5 — stronger muted fill
+    border-color: var(--rad-ui-color-gray-700); // step 8 — stronger border
+  }
+
+  &[data-state="checked"] {
+    background-color: var(--rad-ui-color-accent-800); // accent — solid fill
+    border-color: var(--rad-ui-color-accent-600);     // accent — solid border
+  }
+
+  &[data-disabled],
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--rad-ui-focus-ring-shadow);
+  }
+
+  .rad-ui-switch-indicator {
+    position: absolute;
+    top: 50%;
+    left: var(--rad-ui-border-width-default);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--rad-ui-size-5);
+    height: var(--rad-ui-size-5);
+    border-radius: var(--rad-ui-control-radius-pill);
+    background-color: var(--rad-ui-color-gray-200);  // step 3 — filled muted knob
+    box-shadow:
+      var(--rad-ui-shadow-xs),
+      inset 0 0 0 1px var(--rad-ui-color-gray-700); // step 8 — defined knob edge
+
+    transform: translateY(-50%) translateX(0);
+    transition:
+      transform var(--rad-ui-motion-duration-slow) var(--rad-ui-motion-easing-spring),
+      background-color var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+      box-shadow var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard);
+
+    &[data-state="checked"] {
+      transform: translateY(-50%) translateX(var(--rad-ui-switch-thumb-shift));
+      background-color: var(--rad-ui-color-accent-50); // accent — subtle tint on knob
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rad-ui-switch,
+  .rad-ui-switch .rad-ui-switch-indicator {
+    transition-duration: var(--rad-ui-motion-duration-reduced);
+  }
+}