@radui/ui 1.0.0 → 1.1.0

package/dist/styles/clarity/Minimap/minimap.clarity.scss

@@ -0,0 +1,92 @@
+.rad-ui-minimap {
+    .rad-ui-minimap-item {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        outline: none;
+        background: transparent;
+        border: none;
+        padding: 0;
+        text-align: left;
+
+        .rad-ui-minimap-track {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+            
+            .rad-ui-minimap-bubble {
+                border: 1px solid transparent;
+                background-color: var(--rad-ui-surface-muted);
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                display: inline-flex;
+                flex:none;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+                top: 3px;
+                font-size: 11px;
+                font-weight: 500;
+                color: var(--rad-ui-text-secondary);
+                box-shadow: var(--rad-ui-shadow-none);
+
+                &[data-in-view="true"] {
+                    border-color: var(--rad-ui-surface-inverse);
+                    background-color: var(--rad-ui-surface-inverse);
+                    color: var(--rad-ui-surface-canvas);
+                    box-shadow: var(--rad-ui-shadow-none);
+                }
+
+            }
+
+            .rad-ui-minimap-line {
+                display: block;
+                border: 1px solid var(--rad-ui-border-soft);
+                width: 1px;
+                height: 100%;
+
+                &[data-in-view="true"] {
+                    border: 1px solid var(--rad-ui-surface-inverse);
+                }
+            }
+
+        }
+
+        .rad-ui-minimap-content {
+            padding-left: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            padding-bottom: 0px;
+            color: var(--rad-ui-text-secondary);
+            font-size: var(--rad-ui-component-font-size-dense);
+            line-height: 1.3;
+            padding-top: 4px;
+            padding-bottom: 14px;
+
+            > * {
+                margin: 0;
+                font: inherit;
+                line-height: inherit;
+                color: inherit;
+                letter-spacing: inherit;
+            }
+        }
+
+        &:focus-visible {
+            .rad-ui-minimap-bubble {
+                box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+            }
+
+            .rad-ui-minimap-content {
+                color: var(--rad-ui-text-primary);
+            }
+        }
+
+        &:last-child .rad-ui-minimap-line {
+            display: none;
+        }
+    }
+}

package/dist/styles/clarity/NavigationMenu/navigation-menu.clarity.scss

@@ -0,0 +1,128 @@
+.rad-ui-navigation-menu-root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--rad-ui-border-soft);
+  border-radius: var(--rad-ui-radius-lg);
+  background-color: var(--rad-ui-surface-panel);
+  box-shadow: var(--rad-ui-shadow-sm);
+}
+
+.rad-ui-navigation-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.rad-ui-navigation-menu-trigger,
+.rad-ui-navigation-menu-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.25rem;
+  padding: 0.5rem 0.9rem;
+  border: none;
+  border-radius: var(--rad-ui-radius-lg);
+  background-color: transparent;
+  color: var(--rad-ui-text-primary);
+  font-size: var(--rad-ui-font-size-2);
+  font-weight: 500;
+  line-height: var(--rad-ui-line-height-1);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--rad-ui-motion-duration-fast) ease,
+    color var(--rad-ui-motion-duration-fast) ease,
+    box-shadow var(--rad-ui-motion-duration-fast) ease;
+
+  &:hover {
+    background-color: var(--rad-ui-surface-subtle);
+    color: var(--rad-ui-text-primary);
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--rad-ui-focus-ring-shadow-sm);
+  }
+}
+
+.rad-ui-navigation-menu-trigger {
+  position: relative;
+  gap: 0.5rem;
+
+  &::after {
+    content: '';
+    width: 0.42rem;
+    height: 0.42rem;
+    border-right: 1.5px solid currentcolor;
+    border-bottom: 1.5px solid currentcolor;
+    transform: rotate(45deg) translateY(-1px);
+    transform-origin: center;
+    opacity: 0.75;
+    transition: transform var(--rad-ui-motion-duration-fast) ease;
+  }
+
+  &[data-state="open"] {
+    background-color: var(--rad-ui-surface-subtle);
+    color: var(--rad-ui-text-primary);
+    box-shadow: var(--rad-ui-shadow-xs);
+
+    &::after {
+      transform: rotate(-135deg) translateX(-1px);
+    }
+  }
+}
+
+.rad-ui-navigation-menu-content {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 0;
+  min-width: 12rem;
+  width: auto;
+  max-width: min(28rem, calc(100vw - 2rem));
+  box-sizing: border-box;
+  padding: 0.4rem;
+  border: 1px solid var(--rad-ui-border-soft);
+  border-radius: var(--rad-ui-radius-lg);
+  background-color: var(--rad-ui-surface-panel);
+  box-shadow: var(--rad-ui-shadow-lg);
+  z-index: 100;
+
+  // Invisible hover bridge over the gap above the panel, so moving the pointer from the
+  // trigger into the content never leaves the item.
+  &::before {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    bottom: 100%;
+    height: var(--rad-ui-spacing-2);
+  }
+}
+
+.rad-ui-navigation-menu-content .rad-ui-navigation-menu-link {
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  min-height: 2.25rem;
+  border-radius: var(--rad-ui-radius-md);
+  padding: 0.65rem 0.8rem;
+  color: var(--rad-ui-text-secondary);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.rad-ui-navigation-menu-content .rad-ui-navigation-menu-link:hover,
+.rad-ui-navigation-menu-content .rad-ui-navigation-menu-link:focus-visible {
+  background-color: var(--rad-ui-surface-subtle);
+  color: var(--rad-ui-text-primary);
+}
+
+.rad-ui-navigation-menu-link[aria-current="page"],
+.rad-ui-navigation-menu-link[data-active="true"] {
+  background-color: var(--rad-ui-surface-subtle);
+  color: var(--rad-ui-text-primary);
+  box-shadow: inset 0 0 0 1px var(--rad-ui-border-soft);
+}

package/dist/styles/clarity/NumberField/number-field.clarity.scss

@@ -0,0 +1,135 @@
+.rad-ui-number-field-root {
+    display: inline-grid;
+    grid-template-columns: minmax(0, var(--rad-ui-number-field-input-width, 4.5rem)) 2.5rem;
+    grid-template-rows: repeat(2, 1rem);
+    height: 2rem;
+    overflow: hidden;
+    width: fit-content;
+    max-width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--rad-ui-field-border);
+    border-radius: var(--rad-ui-radius-md);
+    background-color: var(--rad-ui-field-background);
+    color: var(--rad-ui-color-gray-1000);
+    box-shadow: var(--rad-ui-shadow-xs);
+
+    &:focus-within {
+        border-color: var(--rad-ui-color-gray-700);
+        box-shadow: var(--rad-ui-focus-ring-shadow), var(--rad-ui-shadow-xs);
+    }
+
+    &:has(.rad-ui-number-field-input:disabled) {
+        background-color: var(--rad-ui-disabled-background);
+        border-color: var(--rad-ui-disabled-border);
+        box-shadow: none;
+    }
+}
+
+.rad-ui-number-field-input {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0 0.875rem;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--rad-ui-color-gray-1000);
+    font-family: var(--rad-ui-font-sans);
+    font-size: 1rem;
+    line-height: 1;
+    letter-spacing: 0;
+
+    &::placeholder {
+        color: var(--rad-ui-field-placeholder);
+    }
+
+    &:disabled {
+        color: var(--rad-ui-disabled-text);
+        cursor: not-allowed;
+    }
+
+    &:read-only {
+        color: var(--rad-ui-color-gray-1000);
+        cursor: text;
+    }
+
+    // The root draws the focus ring; suppress the theme's per-input ring so the
+    // field does not show a second rectangle inside the rounded border.
+    &:focus-visible {
+        box-shadow: none;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+    }
+
+    appearance: textfield;
+}
+
+.rad-ui-number-field-increment,
+.rad-ui-number-field-decrement {
+    position: relative;
+    grid-column: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 1rem;
+    box-sizing: border-box;
+    padding: 0;
+    border: 0;
+    border-left: 1px solid var(--rad-ui-color-gray-600);
+    background: transparent;
+    color: var(--rad-ui-color-gray-950);
+    font-size: 0;
+    line-height: 0;
+    cursor: pointer;
+
+    &::before {
+        content: '';
+        width: 0.375rem;
+        height: 0.375rem;
+        border-top: 1.5px solid currentcolor;
+        border-left: 1.5px solid currentcolor;
+    }
+
+    &:hover {
+        background-color: var(--rad-ui-surface-hover);
+        color: var(--rad-ui-color-gray-1000);
+    }
+
+    &:focus-visible {
+        z-index: 1;
+        outline: none;
+        box-shadow: var(--rad-ui-focus-ring-shadow-inset);
+    }
+
+    &:disabled {
+        color: var(--rad-ui-text-muted);
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+}
+
+.rad-ui-number-field-increment {
+    grid-row: 1;
+
+    &::before {
+        transform: translateY(0.125rem) rotate(45deg);
+    }
+}
+
+.rad-ui-number-field-decrement {
+    grid-row: 2;
+    border-top: 1px solid var(--rad-ui-color-gray-600);
+
+    &::before {
+        transform: translateY(-0.125rem) rotate(225deg);
+    }
+}

package/dist/styles/clarity/Popover/popover.clarity.scss

@@ -0,0 +1,106 @@
+.rad-ui-popover-content {
+  position: relative;
+  min-width: min(20rem, calc(100vw - 2rem));
+  padding: 1rem;
+  border: 1px solid var(--rad-ui-border-soft);
+  border-radius: var(--rad-ui-panel-radius-md);
+  background: var(--rad-ui-color-gray-50);
+  color: var(--rad-ui-text-primary);
+  box-shadow: var(--rad-ui-shadow-lg);
+  outline: none;
+
+  &[data-state="open"] {
+    animation: rad-ui-popover-enter var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-entrance);
+  }
+
+  &[data-state="closed"] {
+    animation: rad-ui-popover-exit var(--rad-ui-motion-duration-fast) var(--rad-ui-motion-easing-standard);
+  }
+
+  @media (width <= 640px) {
+    min-width: calc(100vw - 1.5rem);
+    border-radius: var(--rad-ui-panel-radius-sm);
+  }
+}
+
+.rad-ui-popover-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--rad-ui-text-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--rad-ui-motion-duration-fast) ease,
+    color var(--rad-ui-motion-duration-fast) ease,
+    transform var(--rad-ui-motion-duration-fast) ease;
+
+  &:hover {
+    background-color: var(--rad-ui-surface-subtle);
+    color: var(--rad-ui-text-primary);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--rad-ui-focus-ring-shadow-offset-panel);
+  }
+}
+
+.rad-ui-popover-arrow {
+  display: block;
+  fill: var(--rad-ui-color-gray-50);
+  stroke: var(--rad-ui-border-soft);
+  stroke-width: 1px;
+  filter: var(--rad-ui-overlay-arrow-shadow);
+  vector-effect: non-scaling-stroke;
+
+  path {
+    fill: var(--rad-ui-color-gray-50);
+    stroke: var(--rad-ui-border-soft);
+    stroke-width: 1px;
+  }
+}
+
+@keyframes rad-ui-popover-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rad-ui-popover-exit {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.rad-ui-popover-title {
+  font-size: var(--rad-ui-font-size-2);
+  font-weight: var(--rad-ui-component-font-weight-medium);
+  line-height: var(--rad-ui-component-line-height-tight);
+  color: var(--rad-ui-text-primary);
+  margin: 0;
+  margin-bottom: var(--rad-ui-spacing-1);
+}
+
+.rad-ui-popover-description {
+  font-size: var(--rad-ui-font-size-2);
+  font-weight: var(--rad-ui-component-font-weight-regular);
+  line-height: var(--rad-ui-component-line-height-normal);
+  color: var(--rad-ui-text-secondary);
+  margin: 0;
+}

package/dist/styles/clarity/Progress/progress.clarity.scss

@@ -0,0 +1,38 @@
+// Progress — Clarity design system aligned
+// Track: step 3 (200) — subtle interactive surface, low visual weight
+// Indicator: step 10 (900) — solid, accessible, high contrast fill
+.rad-ui-progress {
+    background: var(--rad-ui-surface-muted); // step 3 — subtle surface for track
+    border: none;
+    overflow: hidden;
+    height: var(--rad-ui-spacing-1);
+    border-radius: var(--rad-ui-control-radius-pill);
+    width: 100%;
+    max-width: calc(var(--rad-ui-overlay-width-md) + var(--rad-ui-size-10) + var(--rad-ui-spacing-1));
+
+    .rad-ui-progress-indicator {
+        background: var(--rad-ui-color-accent-800); // accent — solid fill, brand signal
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        transition: transform var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard);
+    }
+}
+
+// Indeterminate (value={null}): a sliding segment communicates ongoing work.
+.rad-ui-progress[data-state="indeterminate"] .rad-ui-progress-indicator {
+    width: 40%;
+    transition: none;
+    animation: rad-ui-progress-indeterminate calc(var(--rad-ui-motion-duration-normal) * 6) var(--rad-ui-motion-easing-standard) infinite;
+}
+
+@keyframes rad-ui-progress-indeterminate {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(250%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rad-ui-progress[data-state="indeterminate"] .rad-ui-progress-indicator {
+        animation-duration: calc(var(--rad-ui-motion-duration-normal) * 15);
+    }
+}

package/dist/styles/clarity/Quote/quote.clarity.scss

@@ -0,0 +1,26 @@
+// Quote — Clarity design system aligned
+// step 11 (950) — accessible secondary text
+.rad-ui-quote {
+  font-style: italic;
+  color: var(--rad-ui-text-secondary);
+  quotes: "\201C" "\201D" "\2018" "\2019";
+
+  &::before {
+    content: open-quote;
+  }
+
+  &::after {
+    content: close-quote;
+  }
+
+  // Quote is phrasing content: truncate in place (inline-block) instead of
+  // forcing a line break before and after the quote.
+  &[data-truncate] {
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: bottom;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/dist/styles/clarity/Radio/radio.clarity.scss

@@ -0,0 +1,76 @@
+// Radio — Clarity design system aligned
+// Unchecked border: border-strong (step 8) — same as Checkbox
+// Hover border: step 9 (800)
+// Checked border: accent-700 — solid color, clear selection signal
+// Indicator dot: accent-800 — solid, high contrast fill
+.rad-ui-radio {
+  appearance: none;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  outline: none;
+  margin: 0;
+  border: none;
+  border-radius: var(--rad-ui-radius-full);
+  background: none;
+  vertical-align: middle;
+  cursor: pointer;
+
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 50%;
+    background-color: var(--rad-ui-color-gray-50);  // step 1 — canvas bg
+    border: 1px solid var(--rad-ui-border-strong);  // matches Checkbox; step 6 was near-invisible in dark mode
+    box-shadow: var(--rad-ui-control-shadow);
+    box-sizing: border-box;
+    transition: border-color var(--rad-ui-motion-duration-fast) ease;
+  }
+
+  &::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: transparent;
+    transform: scale(0.6);
+    transition: transform var(--rad-ui-motion-duration-fast) ease, background-color var(--rad-ui-motion-duration-fast) ease;
+  }
+
+  &:hover::before {
+    border-color: var(--rad-ui-color-gray-800); // one step past border-strong on hover
+  }
+
+  &[data-checked="true"]::before {
+    border-color: var(--rad-ui-color-accent-700); // accent — selected state signal
+    background-color: var(--rad-ui-color-gray-100); // step 2 — subtle surface behind dot
+    box-shadow:
+      inset 0 0 0 1px color-mix(in oklab, var(--rad-ui-color-accent-200) 60%, transparent),
+      var(--rad-ui-control-shadow);
+  }
+
+  &[data-checked="true"]::after {
+    background-color: var(--rad-ui-color-accent-800); // accent — solid indicator dot
+    transform: scale(1);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--rad-ui-focus-ring-shadow-sm);
+  }
+
+  // Radio emits `data-disabled=""` (presence), so match on presence rather than "true".
+  &[data-disabled],
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}