@radui/ui 1.0.0 → 1.1.0

package/dist/styles/clarity/DropdownMenu/dropdown-menu.clarity.scss

@@ -0,0 +1,187 @@
+.rad-ui-dropdown-menu-root {
+    position: relative;
+    display: inline-block;
+    width: max-content;
+}
+
+.rad-ui-dropdown-menu-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: var(--rad-ui-radius-md);
+    padding: 0 0.875rem;
+    min-height: 2.25rem;
+    font-size: var(--rad-ui-font-size-2);
+    background-color: var(--rad-ui-surface-panel);
+    color: var(--rad-ui-text-primary);
+    border: 1px solid var(--rad-ui-border);
+    cursor: pointer;
+    width: 100%;
+    box-sizing: border-box;
+    box-shadow: var(--rad-ui-shadow-xs);
+
+    &:hover {
+        border-color: var(--rad-ui-border-strong);
+        background-color: var(--rad-ui-surface-subtle);
+    }
+
+    &:focus-visible, &:focus {
+        outline: none;
+        box-shadow: var(--rad-ui-focus-ring-shadow);
+    }
+
+    &[aria-disabled="true"] {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+.rad-ui-dropdown-menu-content {
+    z-index: var(--rad-ui-z-index-portal);
+    background-color: var(--rad-ui-surface-panel);
+    border-radius: var(--rad-ui-radius-lg);
+    border: 1px solid var(--rad-ui-border);
+    box-shadow: var(--rad-ui-elevation-lg-shadow);
+    min-width: 12.25rem;
+    width: max-content;
+    display: flex;
+    flex-direction: column;
+    padding: 0.375rem;
+
+    &[data-state="closed"] {
+        display: none;
+    }
+
+    &:focus-visible, &:focus {
+        outline: none;
+    }
+    
+}
+
+.rad-ui-dropdown-menu-sub-trigger {
+    font-size: var(--rad-ui-font-size-2);
+    line-height: 1.4;
+    color: var(--rad-ui-text-primary);
+    padding: 0.5rem 0.625rem;
+    user-select: none;
+    outline: none;
+    cursor: pointer;
+    border-radius: var(--rad-ui-radius-md);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    gap: var(--rad-ui-spacing-3);
+    background: none;
+    border: none;
+    white-space: nowrap;
+
+    > *:last-child:not(:first-child) {
+        margin-inline-start: auto;
+        flex-shrink: 0;
+    }
+
+    &:hover {
+        background-color: var(--rad-ui-surface-hover);
+    }
+
+    &:focus-visible, &:focus {
+        outline: none;
+        background-color: var(--rad-ui-surface-hover);
+        box-shadow: var(--rad-ui-focus-ring-shadow-inset);
+    }
+
+    &[data-highlighted] {
+        background-color: var(--rad-ui-surface-hover);
+        color: var(--rad-ui-text-primary);
+    }
+
+    &[data-disabled] {
+        color: var(--rad-ui-text-muted);
+        pointer-events: none;
+        opacity: 0.5;
+    }
+}
+
+.rad-ui-dropdown-menu-item {
+    font-size: var(--rad-ui-font-size-2);
+    line-height: 1.4;
+    color: var(--rad-ui-text-primary);
+    padding: 0.5rem 0.625rem;
+    user-select: none;
+    outline: none;
+    cursor: pointer;
+    border-radius: var(--rad-ui-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    gap: var(--rad-ui-spacing-3);
+    background: none;
+    border: none;
+    white-space: nowrap;
+
+    &:hover {
+        background-color: var(--rad-ui-surface-hover);
+    }
+
+    &:focus-visible, &:focus {
+        outline: none;
+        background-color: var(--rad-ui-surface-hover);
+        box-shadow: var(--rad-ui-focus-ring-shadow-inset);
+    }
+
+    &[data-highlighted] {
+        background-color: var(--rad-ui-surface-hover);
+        color: var(--rad-ui-text-primary);
+    }
+
+    &[data-disabled] {
+        color: var(--rad-ui-text-muted);
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    &[aria-selected="true"] {
+        background-color: var(--rad-ui-surface-hover);
+        color: var(--rad-ui-text-primary);
+        font-weight: 500;
+    }
+}
+
+.rad-ui-dropdown-menu-separator {
+    background-color: var(--rad-ui-border-soft);
+    align-self: stretch;
+}
+
+.rad-ui-dropdown-menu-separator-vertical{
+    margin: 0 8px;
+    width: 1px;
+}
+
+.rad-ui-dropdown-menu-separator-horizontal{
+    margin: 0.375rem -0.375rem;
+    height: 1px;
+}
+
+.rad-ui-dropdown-menu-label {
+    font-size: var(--rad-ui-font-size-1);
+    font-weight: 500;
+    color: var(--rad-ui-text-muted);
+    padding: 0.375rem 0.625rem 0.125rem;
+}
+
+.rad-ui-dropdown-menu-shortcut {
+    margin-left: 1.25rem;
+    font-size: var(--rad-ui-font-size-1);
+    color: var(--rad-ui-text-muted);
+}
+
+.rad-ui-dropdown-menu-sub-icon {
+    flex-shrink: 0;
+    color: var(--rad-ui-text-muted);
+}

package/dist/styles/clarity/Em/em.clarity.scss

@@ -0,0 +1,3 @@
+.rad-ui-em {
+    font-style: italic;
+}

package/dist/styles/clarity/Fieldset/fieldset.clarity.scss

@@ -0,0 +1,49 @@
+/* Fieldset had no recipe in either theme: the component emits `data-slot`,
+   `data-invalid` and `data-disabled`, but nothing consumed them, so it rendered
+   with the UA default border and `invalid` did nothing visually. Styling is kept
+   to the reset plus typography so a bare <Fieldset> no longer looks like a
+   browser-default form group. */
+
+.rad-ui-fieldset {
+  min-width: 0; // UA sets min-inline-size: min-content, which breaks flex/grid parents
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rad-ui-spacing-2);
+}
+
+.rad-ui-fieldset-legend {
+  padding: 0;
+  font-size: var(--rad-ui-font-size-3);
+  font-weight: 600;
+  line-height: var(--rad-ui-line-height-2);
+  color: var(--rad-ui-text-primary);
+}
+
+.rad-ui-fieldset-description {
+  margin: 0;
+  font-size: var(--rad-ui-font-size-2);
+  line-height: var(--rad-ui-line-height-3);
+  color: var(--rad-ui-text-secondary);
+}
+
+.rad-ui-fieldset-message {
+  margin: 0;
+  font-size: var(--rad-ui-font-size-2);
+  line-height: var(--rad-ui-line-height-3);
+  color: var(--rad-ui-text-secondary);
+}
+
+// The root carries `invalid`; the message is the part that reads as an error,
+// so it takes the red only when the fieldset is invalid.
+.rad-ui-fieldset-message[data-invalid] {
+  color: var(--rad-ui-danger-text);
+}
+
+.rad-ui-fieldset[data-disabled],
+.rad-ui-fieldset:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}

package/dist/styles/clarity/Heading/heading.clarity.scss

@@ -0,0 +1,46 @@
+
+.rad-ui-h1{
+    font-weight: bold;
+    font-size: 60px;
+    letter-spacing: -3px;
+    line-height:72px;
+    color: var(--rad-ui-text-strong);
+}
+
+.rad-ui-h2{
+    font-weight: bold;
+    font-size: 35px;
+    letter-spacing: -1px;
+    line-height:42px;
+    color: var(--rad-ui-text-strong);
+}
+
+.rad-ui-h3{
+    font-weight: bold;
+    font-size: 28px;
+    line-height:34px;
+    color: var(--rad-ui-text-strong);
+}
+
+.rad-ui-h4{
+    font-weight: bold;
+    font-size: 24px;
+    line-height: var(--rad-ui-line-height-1); // 24px at 24px
+    color: var(--rad-ui-text-strong);
+}
+
+.rad-ui-h5{
+    font-weight: bold;
+    font-size: var(--rad-ui-font-size-5); // 20px
+    letter-spacing: 1px;
+    line-height: calc(var(--rad-ui-font-size-3) * var(--rad-ui-line-height-3)); // 24px
+    color: var(--rad-ui-text-strong);
+}
+
+.rad-ui-h6{
+    font-weight: bold;
+    font-size: var(--rad-ui-font-size-4); // 18px
+    line-height: calc(var(--rad-ui-font-size-3) * var(--rad-ui-line-height-3)); // 24px
+    letter-spacing: 1px;
+    color: var(--rad-ui-text-strong);
+}

package/dist/styles/clarity/HoverCard/hover-card.clarity.scss

@@ -0,0 +1,43 @@
+.rad-ui-hover-card {
+    background-color: var(--rad-ui-surface);
+    padding: 0.875rem 1rem 0.9375rem;
+    box-shadow: var(--rad-ui-elevation-lg-shadow);
+    border-radius: var(--rad-ui-radius-xl);
+    border: 1px solid var(--rad-ui-border-soft);
+    max-width: 21rem;
+    color: var(--rad-ui-text-primary);
+    font-size: var(--rad-ui-font-size-2);
+
+    .rad-ui-hover-card-arrow {
+        fill: var(--rad-ui-surface);
+    }
+
+    &[data-size="small"] {
+        padding: 0.625rem 0.75rem;
+        max-width: 16rem;
+        font-size: var(--rad-ui-font-size-1);
+        border-radius: var(--rad-ui-radius-lg);
+    }
+
+    &[data-size="medium"] {
+        padding: 0.875rem 1rem 0.9375rem;
+        max-width: 21rem;
+        font-size: var(--rad-ui-font-size-2);
+    }
+
+    &[data-size="large"] {
+        padding: 1.25rem 1.375rem 1.375rem;
+        max-width: 28rem;
+        font-size: var(--rad-ui-font-size-3);
+        border-radius: calc(var(--rad-ui-radius-xl) + 0.25rem);
+    }
+}
+
+.rad-ui-hover-card-trigger {
+    color: var(--rad-ui-text-primary);
+    text-decoration: underline;
+    text-underline-offset: 0.18em;
+    font-size: 0.95rem;
+    font-weight: 500;
+    cursor: pointer;
+}

package/dist/styles/clarity/Kbd/kbd.clarity.scss

@@ -0,0 +1,55 @@
+.rad-ui-kbd{
+    --rad-ui-kbd-inset-shadow: inset 0 calc(var(--rad-ui-border-width-default) * -1) 0 var(--rad-ui-border-default);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-family: inherit;
+    font-weight: 400;
+    vertical-align: text-top;
+    white-space: nowrap;
+    user-select: none;
+    position: relative;
+    top: -0.03em;
+    font-size: .75em;
+    min-width: 1.75em;
+    line-height: 1.7em;
+    box-sizing: border-box;
+    padding-left: .5em;
+    padding-right: .5em;
+    padding-bottom: .05em;
+    word-spacing: -.1em;
+    border-radius: calc(2* .35em);
+    height: fit-content;
+    color: var(--rad-ui-text-primary);
+    background-color: var(--rad-ui-surface-panel);
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+    box-shadow: var(--rad-ui-kbd-inset-shadow), var(--rad-ui-control-shadow-hover);
+
+
+    /** Kbd Sizes */
+    &[data-size="small"]{
+        font-size: small;
+        padding: calc(var(--rad-ui-spacing-1) / 2) var(--rad-ui-spacing-2);
+        height: var(--rad-ui-control-height-xs);
+    }
+
+    &[data-size="medium"]{
+        font-size: medium;
+        padding: var(--rad-ui-spacing-1) var(--rad-ui-spacing-3);
+        height: var(--rad-ui-control-height-sm);
+    }
+
+    &[data-size="large"]{
+        font-size: large;
+        padding: var(--rad-ui-spacing-1) var(--rad-ui-spacing-4);
+        height: var(--rad-ui-size-10);
+    }
+
+    &[data-size="x-large"]{
+        font-size: x-large;
+        padding: var(--rad-ui-spacing-1) var(--rad-ui-spacing-6);
+        height: var(--rad-ui-size-12);
+    }
+}

package/dist/styles/clarity/Label/label.clarity.scss

@@ -0,0 +1,11 @@
+// Label — Clarity design system aligned. Text that names a form control.
+.rad-ui-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rad-ui-spacing-2);
+    color: var(--rad-ui-text-primary);
+    font-family: var(--rad-ui-font-sans);
+    font-size: var(--rad-ui-font-size-2);
+    font-weight: 500;
+    line-height: var(--rad-ui-line-height-2);
+}

package/dist/styles/clarity/Link/link.clarity.scss

@@ -0,0 +1,41 @@
+.rad-ui-link {
+    color: var(--rad-ui-color-accent-1000);
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-color: currentcolor;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.14em;
+
+    // Hover keeps a readable text step (950); 900 drops below 4.5:1 for most scales.
+    &:hover {
+      color: var(--rad-ui-color-accent-950);
+      text-decoration-color: currentcolor;
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      // Outset ring: a 1px contained ring on inline text overlaps the glyphs and
+      // underline and is hard to see.
+      box-shadow: var(--rad-ui-focus-ring-shadow-outset);
+      border-radius: 0.2rem;
+    }
+
+ /** link Sizes */
+    &[data-size="small"]{
+      font-size: small;
+    }
+
+    &[data-size="medium"]{
+      font-size: medium;
+    }
+
+    &[data-size="large"]{
+      font-size: large;
+    }
+
+    &[data-size="x-large"]{
+      font-size: x-large;
+    }
+
+}

package/dist/styles/clarity/Menubar/menubar.clarity.scss

@@ -0,0 +1,149 @@
+@use '../Button/button.clarity';
+
+// Menubar root is a compact in-flow bar: it hugs its triggers instead of
+// stretching to its flex/grid line, and stays flat (no elevation) because it
+// is not a floating surface.
+.rad-ui-menubar-root {
+    // Concentric radius: trigger radius plus the root padding.
+    --rad-ui-menubar-padding: var(--rad-ui-spacing-1);
+    --rad-ui-menubar-trigger-radius: var(--rad-ui-control-radius-sm);
+
+    display: inline-flex;
+    align-items: center;
+    height: fit-content;
+    gap: var(--rad-ui-density-gap-xs);
+    padding: var(--rad-ui-menubar-padding);
+    border-radius: calc(var(--rad-ui-menubar-trigger-radius) + var(--rad-ui-menubar-padding));
+    background-color: var(--rad-ui-surface-panel);
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+}
+
+.rad-ui-menubar-menu {
+    display: contents;
+}
+
+.rad-ui-menubar-trigger {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--rad-ui-control-height-sm);
+    padding: 0 var(--rad-ui-control-padding-x-sm);
+    outline: none;
+    user-select: none;
+    font-family: inherit;
+    font-weight: var(--rad-ui-component-font-weight-medium);
+    line-height: var(--rad-ui-component-line-height-tight);
+    border-radius: var(--rad-ui-menubar-trigger-radius);
+    font-size: var(--rad-ui-component-font-size-sm);
+    color: var(--rad-ui-text-primary);
+    background: transparent;
+    cursor: default;
+    white-space: nowrap;
+    transition:
+        background-color var(--rad-ui-motion-duration-fast) ease,
+        box-shadow var(--rad-ui-motion-duration-fast) ease;
+
+    &:hover {
+        background-color: var(--rad-ui-surface-hover);
+    }
+
+    &[data-state="open"] {
+        background-color: var(--rad-ui-surface-canvas);
+        box-shadow: var(--rad-ui-selected-control-shadow);
+    }
+
+    &:focus-visible {
+        box-shadow: var(--rad-ui-focus-ring-shadow-sm);
+    }
+
+    &[data-state="open"]:focus-visible {
+        box-shadow: var(--rad-ui-selected-control-shadow), var(--rad-ui-focus-ring-shadow-sm);
+    }
+
+    &[data-disabled] {
+        pointer-events: none;
+        color: var(--rad-ui-disabled-text);
+    }
+}
+
+.rad-ui-menubar-content {
+    /* Must not animate `transform` here — Floating UI positions via inline transform. */
+    z-index: var(--rad-ui-z-index-portal);
+    min-width: 12.75rem;
+    background-color: var(--rad-ui-surface-panel);
+    border-radius: var(--rad-ui-radius-lg);
+    border: 1px solid var(--rad-ui-border);
+    padding: 0.375rem;
+    box-shadow: var(--rad-ui-elevation-lg-shadow);
+    animation: rad-ui-menubar-content-enter var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-entrance);
+
+    &[data-state="closed"] {
+        display: none;
+    }
+}
+
+.rad-ui-menubar-item,
+.rad-ui-menubar-sub-trigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    box-sizing: border-box;
+    gap: var(--rad-ui-spacing-3);
+    border-radius: var(--rad-ui-radius-md);
+    padding: 0.5rem 0.625rem;
+    font-size: var(--rad-ui-font-size-2);
+    line-height: 1.4;
+    color: var(--rad-ui-text-primary);
+    user-select: none;
+    outline: none;
+    cursor: default;
+    white-space: nowrap;
+    text-align: left;
+
+    > *:last-child:not(:first-child) {
+        margin-inline-start: auto;
+        flex-shrink: 0;
+    }
+
+    &[data-highlighted], &:focus, &:hover {
+        background-color: var(--rad-ui-surface-hover);
+        color: var(--rad-ui-text-primary);
+        cursor: pointer;
+    }
+
+    &[data-disabled] {
+        color: var(--rad-ui-text-muted);
+        pointer-events: none;
+    }
+}
+
+.rad-ui-menubar-separator {
+    height: 1px;
+    background-color: var(--rad-ui-border-soft);
+    margin: 0.375rem 0;
+}
+
+.rad-ui-menubar-shortcut {
+    margin-left: 1.25rem;
+    font-size: var(--rad-ui-font-size-1);
+    color: var(--rad-ui-text-muted);
+}
+
+.rad-ui-menubar-sub-icon {
+    flex-shrink: 0;
+    color: var(--rad-ui-text-muted);
+}
+
+@keyframes rad-ui-menubar-content-enter {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}

package/dist/styles/clarity/Meter/meter.clarity.scss

@@ -0,0 +1,39 @@
+// Meter — Clarity design system aligned (same track/fill recipe as Progress)
+// Track: subtle muted surface; indicator: semantic fill by state.
+.rad-ui-meter {
+    background: var(--rad-ui-surface-muted);
+    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-meter-indicator {
+        background: var(--rad-ui-color-accent-800);
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        transition: transform var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard);
+    }
+
+    // Semantic state (relative to low / high / optimum) is also exposed via
+    // data-state, so the color is never the only signal.
+    .rad-ui-meter-indicator[data-state="low"] {
+        background: var(--rad-ui-warning-solid);
+    }
+
+    .rad-ui-meter-indicator[data-state="high"] {
+        background: var(--rad-ui-info-solid);
+    }
+
+    .rad-ui-meter-indicator[data-state="optimum"] {
+        background: var(--rad-ui-success-solid);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rad-ui-meter .rad-ui-meter-indicator {
+        transition: none;
+    }
+}