@radui/ui 1.0.0 → 1.1.0

package/dist/styles/clarity/Toast/toast.clarity.scss

@@ -0,0 +1,203 @@
+/* ── Toast – Clarity ─────────────────────────────────────────────────────── */
+
+.rad-ui-toast-viewport {
+    position: fixed;
+    z-index: var(--rad-ui-z-index-portal, 9999);
+    list-style: none;
+    margin: 0;
+    padding: 0 1rem 1rem;
+    width: 356px;
+    max-width: calc(100vw - 2rem);
+    outline: none;
+    height: calc(var(--viewport-height, 0px) + 1rem);
+
+    &[data-position="bottom-right"]  { bottom: 3rem; right: 1.5rem; }
+    &[data-position="bottom-left"]   { bottom: 3rem; left: 1.5rem; }
+    &[data-position="bottom-center"] { bottom: 3rem; left: 50%; transform: translateX(-50%); }
+    &[data-position="top-right"]     { top: 1.5rem; right: 1.5rem; }
+    &[data-position="top-left"]      { top: 1.5rem; left: 1.5rem; }
+    &[data-position="top-center"]    { top: 1.5rem; left: 50%; transform: translateX(-50%); }
+}
+
+/* ── Item ────────────────────────────────────────────────────────────────── */
+
+.rad-ui-toast-item {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    list-style: none;
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+    transform-origin: bottom center;
+    transform:
+        translateY(var(--y, 0px))
+        translateY(var(--swipe-y, 0px))
+        scale(var(--scale, 1));
+
+    /* Sonner [data-sonner-toast]: transform/opacity 400ms (+ height in Sonner; omitted here). */
+    transition: transform var(--rad-ui-motion-duration-slow) ease, opacity var(--rad-ui-motion-duration-slow) ease, box-shadow var(--rad-ui-motion-duration-normal) ease;
+
+    /* Exit: same full slide for front and behind (Sonner front path) — avoids 40% / mismatched timing flicker */
+    &[data-leaving] {
+        pointer-events: none;
+        opacity: 0;
+        transform:
+            translateY(calc(var(--toast-lift, -1) * -100%))
+            translateY(var(--swipe-y, 0px))
+            scale(var(--scale, 1));
+        transition: transform var(--rad-ui-motion-duration-slow) ease, opacity var(--rad-ui-motion-duration-slow) ease, box-shadow var(--rad-ui-motion-duration-normal) ease;
+    }
+
+    &:not([data-mounted]) {
+        opacity: 0;
+        transform: translateY(100%) scale(var(--scale, 1));
+    }
+
+    &[data-restack-skip] {
+        transition: none;
+    }
+
+    &[data-swiping] {
+        transition: none;
+        cursor: grabbing;
+    }
+
+    /* Back toasts: clamp height to front toast height */
+    &[data-behind] {
+        height: var(--front-height);
+    }
+
+    [data-position^="top"] & {
+        bottom: auto;
+        top: 0;
+        transform-origin: top center;
+
+        &:not([data-mounted]) {
+            transform: translateY(-100%) scale(var(--scale, 1));
+        }
+    }
+
+    /* Gap filler so hover works between cards */
+    &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: 16px;
+    }
+}
+
+/* ── Content ─────────────────────────────────────────────────────────────── */
+
+.rad-ui-toast-content {
+    overflow: hidden;
+    border-radius: var(--rad-ui-radius-xl, 0.75rem);
+    padding: 0.875rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    position: relative;
+    background-color: var(--rad-ui-surface-panel);
+    border: 1px solid var(--rad-ui-border-soft);
+    box-shadow: var(--rad-ui-shadow-md);
+    color: var(--rad-ui-text-primary);
+}
+
+/* Back toasts: hide text, keep card background visible */
+.rad-ui-toast-item[data-behind] .rad-ui-toast-title,
+.rad-ui-toast-item[data-behind] .rad-ui-toast-description,
+.rad-ui-toast-item[data-behind] .rad-ui-toast-action,
+.rad-ui-toast-item[data-behind] .rad-ui-toast-close {
+    opacity: 0;
+    transition: opacity var(--rad-ui-motion-duration-slow) ease;
+}
+
+.rad-ui-toast-item:not([data-behind]) .rad-ui-toast-title,
+.rad-ui-toast-item:not([data-behind]) .rad-ui-toast-description,
+.rad-ui-toast-item:not([data-behind]) .rad-ui-toast-action,
+.rad-ui-toast-item:not([data-behind]) .rad-ui-toast-close {
+    opacity: 1;
+    transition: opacity var(--rad-ui-motion-duration-slow) ease;
+}
+
+/* ── Title ───────────────────────────────────────────────────────────────── */
+
+.rad-ui-toast-title {
+    margin: 0;
+    font-size: var(--rad-ui-font-size-2, 0.875rem);
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--rad-ui-text-primary);
+    letter-spacing: -0.025em;
+}
+
+/* ── Description ─────────────────────────────────────────────────────────── */
+
+.rad-ui-toast-description {
+    margin: 0;
+    font-size: var(--rad-ui-font-size-1, 0.8125rem);
+    line-height: 1.5;
+    color: var(--rad-ui-text-secondary);
+    letter-spacing: -0.01em;
+}
+
+/* ── Action ──────────────────────────────────────────────────────────────── */
+
+.rad-ui-toast-action {
+    margin-top: 0.5rem;
+    align-self: flex-start;
+    font-size: var(--rad-ui-font-size-1, 0.8125rem);
+    font-weight: 500;
+    padding: 0.25rem 0.625rem;
+    border-radius: var(--rad-ui-radius-md, 0.375rem);
+    border: 1px solid var(--rad-ui-border-default);
+    background: transparent;
+    color: var(--rad-ui-text-primary);
+    cursor: pointer;
+    line-height: 1.5;
+    transition: background-color var(--rad-ui-motion-duration-fast) ease;
+    &:hover { background-color: var(--rad-ui-surface-hover); }
+    &:focus-visible { outline: none; box-shadow: var(--rad-ui-ring-shadow-sm); }
+}
+
+/* ── Close ───────────────────────────────────────────────────────────────── */
+
+.rad-ui-toast-close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--rad-ui-radius-sm, 0.25rem);
+    border: none;
+    background: transparent;
+    color: var(--rad-ui-text-muted);
+    cursor: pointer;
+    font-size: 0.875rem;
+    line-height: 1;
+    padding: 0;
+    transition: background-color var(--rad-ui-motion-duration-fast) ease;
+    &:hover { background-color: var(--rad-ui-surface-hover); }
+    &:focus-visible { outline: none; box-shadow: var(--rad-ui-ring-shadow-sm); }
+}
+
+/* ── Variants ────────────────────────────────────────────────────────────── */
+
+.rad-ui-toast-item[data-variant="success"] .rad-ui-toast-content { border-color: var(--rad-ui-success-border); }
+.rad-ui-toast-item[data-variant="error"]   .rad-ui-toast-content { border-color: var(--rad-ui-danger-border); }
+.rad-ui-toast-item[data-variant="warning"] .rad-ui-toast-content { border-color: var(--rad-ui-warning-border); }
+.rad-ui-toast-item[data-variant="info"]    .rad-ui-toast-content { border-color: var(--rad-ui-info-border); }
+
+/* ── Reduced motion ──────────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+    .rad-ui-toast-item { transition: opacity var(--rad-ui-motion-duration-fast) ease; }
+    .rad-ui-toast-item:not([data-mounted]) { opacity: 0; transition: none; }
+    .rad-ui-toast-item[data-leaving] { opacity: 0; }
+}

package/dist/styles/clarity/Toggle/toggle.clarity.scss

@@ -0,0 +1,51 @@
+.rad-ui-toggle {
+    color: var(--rad-ui-text-primary);
+    background-color: var(--rad-ui-surface-subtle);
+    min-height: 2.25rem;
+    min-width: 2.25rem;
+    padding: 0 0.75rem;
+    border-radius: var(--rad-ui-radius-lg);
+    display: inline-flex;
+    gap: var(--rad-ui-spacing-2);
+    font-size: var(--rad-ui-font-size-2);
+    line-height: var(--rad-ui-line-height-1);
+    font-weight: 600;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--rad-ui-border-soft);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rad-ui-surface-panel) 55%, transparent);
+
+    &:hover {
+        background-color: color-mix(in oklab, var(--rad-ui-surface-panel) 88%, transparent);
+        border-color: var(--rad-ui-border-default);
+    }
+
+    &[data-state="on"],
+    &[aria-pressed="true"] {
+        // Pressed must read as selected, never as disabled: keep primary text
+        // contrast and signal state through fill, border, and inset ring.
+        background-color: var(--rad-ui-item-selected-background);
+        border-color: var(--rad-ui-border-strong);
+        color: var(--rad-ui-item-selected-text);
+        box-shadow:
+            var(--rad-ui-control-shadow),
+            inset 0 0 0 1px var(--rad-ui-color-accent-600);
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: var(--rad-ui-focus-ring-shadow), inset 0 0 0 1px color-mix(in oklab, var(--rad-ui-surface-panel) 55%, transparent);
+    }
+
+    &[data-disabled],
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    svg {
+        width: var(--rad-ui-size-4);
+        height: var(--rad-ui-size-4);
+        flex-shrink: 0;
+    }
+}

package/dist/styles/clarity/ToggleGroup/toggle-group.clarity.scss

@@ -0,0 +1,103 @@
+// Segmented control: single pill, internal dividers, neutral selected fill
+.rad-ui-toggle-group {
+    display: inline-flex;
+    align-items: stretch;
+    gap: 0;
+    padding: 0;
+    border-radius: 0.625rem;
+    background-color: var(--rad-ui-color-gray-50);
+    border: 1px solid var(--rad-ui-color-gray-500);
+
+    &[data-orientation="vertical"] {
+        flex-direction: column;
+    }
+
+    .rad-ui-toggle-group-item {
+        all: unset;
+        box-sizing: border-box;
+        position: relative;
+        min-height: 2.375rem;
+        padding: 0 0.75rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.375rem;
+        line-height: var(--rad-ui-line-height-2);
+        flex: 1 1 0;
+        min-width: 0;
+
+        &[data-icon-only] {
+            min-width: 2.375rem;
+            min-height: 2.375rem;
+            padding: 0;
+            gap: 0;
+        }
+
+        cursor: pointer;
+        color: var(--rad-ui-color-gray-1000);
+        background-color: var(--rad-ui-color-gray-50);
+        border-radius: 0;
+        transition:
+            background-color var(--rad-ui-motion-duration-fast) ease,
+            color var(--rad-ui-motion-duration-fast) ease;
+
+        &:hover:not([data-disabled], :disabled, [aria-pressed="true"]) {
+            background-color: var(--rad-ui-color-gray-100);
+        }
+
+        // Pressed must be distinguishable from the resting fill (gray-50 vs gray-200 alone is
+        // nearly invisible), so pair the selected fill with an inset accent ring like Toggle.
+        &[aria-pressed="true"] {
+            background-color: var(--rad-ui-item-selected-background);
+            color: var(--rad-ui-item-selected-text);
+            box-shadow: inset 0 0 0 1px var(--rad-ui-color-accent-600);
+        }
+
+        // After the pressed rule so keyboard focus stays visible on pressed items too.
+        &:focus-visible {
+            outline: none;
+            box-shadow: var(--rad-ui-focus-ring-shadow-inset);
+            z-index: 1;
+        }
+
+        &[data-disabled],
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        svg {
+            width: var(--rad-ui-size-4);
+            height: var(--rad-ui-size-4);
+            flex-shrink: 0;
+        }
+    }
+
+    &:not([data-orientation="vertical"]) .rad-ui-toggle-group-item:not(:last-child) {
+        border-right: 1px solid var(--rad-ui-color-gray-500);
+    }
+
+    &:not([data-orientation="vertical"]) .rad-ui-toggle-group-item:first-child {
+        border-top-left-radius: calc(0.625rem - 1px);
+        border-bottom-left-radius: calc(0.625rem - 1px);
+    }
+
+    &:not([data-orientation="vertical"]) .rad-ui-toggle-group-item:last-child {
+        border-top-right-radius: calc(0.625rem - 1px);
+        border-bottom-right-radius: calc(0.625rem - 1px);
+    }
+
+    &[data-orientation="vertical"] .rad-ui-toggle-group-item:not(:last-child) {
+        border-bottom: 1px solid var(--rad-ui-color-gray-500);
+    }
+
+    &[data-orientation="vertical"] .rad-ui-toggle-group-item:first-child {
+        border-top-left-radius: calc(0.625rem - 1px);
+        border-top-right-radius: calc(0.625rem - 1px);
+    }
+
+    &[data-orientation="vertical"] .rad-ui-toggle-group-item:last-child {
+        border-bottom-left-radius: calc(0.625rem - 1px);
+        border-bottom-right-radius: calc(0.625rem - 1px);
+    }
+}

package/dist/styles/clarity/Toolbar/toolbar.clarity.scss

@@ -0,0 +1,140 @@
+// Toolbar — Clarity-aligned chrome.
+// The root is a compact in-flow bar that hugs its controls. Every interactive
+// child (button, link, toggle item) shares one control recipe so heights,
+// radius, hover, pressed and focus treatments line up across the bar.
+.rad-ui-toolbar {
+    // Concentric radius: the child control radius plus the root padding.
+    --rad-ui-toolbar-padding: var(--rad-ui-spacing-1);
+    --rad-ui-toolbar-control-height: var(--rad-ui-control-height-sm);
+    --rad-ui-toolbar-control-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-toolbar-padding);
+    border-radius: calc(var(--rad-ui-toolbar-control-radius) + var(--rad-ui-toolbar-padding));
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+    background-color: var(--rad-ui-surface-panel);
+
+    &[data-orientation='vertical'] {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .rad-ui-toolbar-button,
+    .rad-ui-toolbar-link,
+    .rad-ui-toolbar-toggle-item {
+        all: unset;
+        box-sizing: border-box;
+        position: relative;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--rad-ui-density-gap-sm);
+        min-width: var(--rad-ui-toolbar-control-height);
+        min-height: var(--rad-ui-toolbar-control-height);
+        padding: 0 var(--rad-ui-control-padding-x-sm);
+        border-radius: var(--rad-ui-toolbar-control-radius);
+        background-color: transparent;
+        color: var(--rad-ui-text-primary);
+        font-family: inherit;
+        font-size: var(--rad-ui-component-font-size-sm);
+        font-weight: var(--rad-ui-component-font-weight-medium);
+        line-height: var(--rad-ui-component-line-height-tight);
+        white-space: nowrap;
+        cursor: pointer;
+        user-select: none;
+        transition:
+            background-color var(--rad-ui-motion-duration-fast) ease,
+            box-shadow var(--rad-ui-motion-duration-fast) ease,
+            color var(--rad-ui-motion-duration-fast) ease;
+
+        &:hover:not([data-disabled], :disabled, [aria-disabled='true'], [data-state='on']) {
+            background-color: var(--rad-ui-surface-hover);
+        }
+
+        &:focus-visible {
+            outline: none;
+            box-shadow: var(--rad-ui-focus-ring-shadow-sm);
+            z-index: 1;
+        }
+
+        &[data-disabled],
+        &:disabled,
+        &[aria-disabled='true'] {
+            color: var(--rad-ui-disabled-text);
+            cursor: not-allowed;
+        }
+
+        svg {
+            width: var(--rad-ui-icon-size-sm);
+            height: var(--rad-ui-icon-size-sm);
+            flex-shrink: 0;
+        }
+    }
+
+    // Links keep an underline so they read as navigation, not as an action.
+    .rad-ui-toolbar-link {
+        text-decoration: underline;
+        text-decoration-color: currentcolor;
+        text-decoration-thickness: 1px;
+        text-underline-offset: 0.18em;
+
+        &:hover {
+            text-decoration-thickness: 2px;
+        }
+    }
+
+    // Toggle items read as toolbar buttons. The pressed state is a lifted
+    // canvas fill with the selected-control ring, so it is distinguishable
+    // from hover without relying on color alone.
+    .rad-ui-toolbar-toggle-group {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--rad-ui-density-gap-xs);
+        padding: 0;
+    }
+
+    &[data-orientation='vertical'] .rad-ui-toolbar-toggle-group {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .rad-ui-toolbar-toggle-item {
+        &[data-state='on'] {
+            background-color: var(--rad-ui-surface-canvas);
+            color: var(--rad-ui-text-primary);
+            box-shadow: var(--rad-ui-selected-control-shadow);
+        }
+
+        &[data-state='on']:focus-visible {
+            box-shadow: var(--rad-ui-selected-control-shadow), var(--rad-ui-focus-ring-shadow-sm);
+        }
+    }
+
+    .rad-ui-toolbar-separator {
+        background-color: var(--rad-ui-border-soft);
+        align-self: center;
+        width: var(--rad-ui-border-width-default);
+        height: var(--rad-ui-icon-size-md);
+        margin: 0 var(--rad-ui-density-gap-sm);
+        flex-shrink: 0;
+    }
+
+    &[data-orientation='vertical'] .rad-ui-toolbar-separator {
+        align-self: stretch;
+        width: auto;
+        height: var(--rad-ui-border-width-default);
+        margin: var(--rad-ui-density-gap-sm) 0;
+    }
+
+    .rad-ui-toolbar-meta {
+        margin-left: var(--rad-ui-spacing-2);
+        margin-right: auto;
+        font-size: var(--rad-ui-component-font-size-sm);
+        color: var(--rad-ui-text-muted);
+        white-space: nowrap;
+    }
+}

package/dist/styles/clarity/Tooltip/tooltip.clarity.scss

@@ -0,0 +1,37 @@
+.rad-ui-tooltip-floating-element {
+  z-index: var(--rad-ui-z-index-portal);
+
+  // Outer element handles positioning via Floating UI inline styles
+  // Do not add transform transitions here!
+}
+
+.rad-ui-tooltip-content-inner {
+  background-color: var(--rad-ui-tooltip-background);
+  color: var(--rad-ui-tooltip-text);
+  font-size: var(--rad-ui-font-size-2);
+  line-height: var(--rad-ui-size-5);
+  font-weight: 500;
+  padding: 0.625rem 1rem;
+  border-radius: var(--rad-ui-radius-lg);
+  box-shadow: var(--rad-ui-shadow-sm);
+  border: var(--rad-ui-border-width-default) solid var(--rad-ui-tooltip-border);
+  animation: rad-ui-tooltip-slide-in 200ms var(--rad-ui-motion-easing-entrance);
+  will-change: transform, opacity;
+  position: relative;
+
+  .rad-ui-tooltip-arrow {
+    fill: var(--rad-ui-tooltip-background);
+  }
+}
+
+@keyframes rad-ui-tooltip-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px) scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/dist/styles/clarity/Tree/tree.clarity.scss

@@ -0,0 +1,103 @@
+.rad-ui-tree {
+    --tree-chevron-size: 1.25rem;
+    --tree-branch-gap: 0.625rem;
+    --tree-line: color-mix(in oklab, var(--rad-ui-border-soft) 50%, transparent);
+
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 100%;
+
+    .rad-ui-tree-branch {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin: 2px 0 0;
+        margin-inline-start: 0.5rem;
+        padding-inline-start: var(--tree-branch-gap);
+        border-inline-start: 1px solid var(--tree-line);
+    }
+
+    .rad-ui-tree-branch .rad-ui-tree-item {
+        position: relative;
+
+        &::before {
+            content: "";
+            position: absolute;
+            inset-inline-start: calc(-1 * var(--tree-branch-gap));
+            width: var(--tree-branch-gap);
+            top: 50%;
+            height: 1px;
+            background: var(--tree-line);
+            transform: translateY(-50%);
+            pointer-events: none;
+        }
+    }
+
+    .rad-ui-tree-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        min-height: var(--rad-ui-size-8);
+        padding: 0.375rem 0.75rem;
+        gap: 0.25rem;
+        background-color: var(--rad-ui-surface-panel);
+        border-radius: var(--rad-ui-radius-sm);
+        border: 1px solid transparent;
+        font-size: var(--rad-ui-component-font-size-comfortable);
+        font-weight: 500;
+        color: var(--rad-ui-text-primary);
+        cursor: pointer;
+        text-align: start;
+
+        &:hover {
+            background-color: var(--rad-ui-surface-subtle);
+        }
+
+        &:focus-visible {
+            outline: none;
+            background-color: var(--rad-ui-surface-subtle);
+            box-shadow: var(--rad-ui-focus-ring-shadow);
+        }
+
+        &[data-toggled="true"] {
+            background-color: var(--rad-ui-surface-subtle);
+        }
+
+        &[data-selected="true"] {
+            background-color: var(--rad-ui-color-accent-100);
+            border-color: var(--rad-ui-color-accent-500);
+        }
+
+        &[data-disabled="true"] {
+            color: var(--rad-ui-text-muted);
+            pointer-events: none;
+            opacity: 0.5;
+        }
+    }
+
+    .rad-ui-tree-item-chevron {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--tree-chevron-size);
+        min-width: var(--tree-chevron-size);
+        color: var(--rad-ui-text-muted);
+    }
+
+    .rad-ui-tree-item-chevron svg {
+        flex-shrink: 0;
+        transition: transform var(--rad-ui-motion-duration-fast) ease;
+        transform: rotate(0deg);
+    }
+
+    .rad-ui-tree-item[data-has-children="true"][data-toggled="true"] .rad-ui-tree-item-chevron svg {
+        transform: rotate(90deg);
+    }
+
+    .rad-ui-tree-item-label {
+        flex: 1;
+        min-width: 0;
+    }
+}