@radui/ui 1.0.1 → 1.1.0

package/dist/styles/clarity/Dialog/dialog.clarity.scss

@@ -0,0 +1,205 @@
+@use '../Button/button.clarity';
+
+.rad-ui-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--rad-ui-z-index-overlay);
+  background-color: var(--rad-ui-overlay-scrim);
+  backdrop-filter: blur(var(--rad-ui-blur-lg));
+  overflow: hidden;
+  transition:
+    opacity var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+    visibility var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard);
+  
+  &[data-state="open"] {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  &[data-state="closed"] {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+.rad-ui-dialog-trigger {
+  @extend .rad-ui-button-root;
+}
+
+.rad-ui-dialog-content {
+  --rad-ui-dialog-body-font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+  --rad-ui-dialog-title-font-size-mobile: calc(var(--rad-ui-font-size-3) - (var(--rad-ui-spacing-1) / 4));
+  --rad-ui-dialog-inline-padding: var(--rad-ui-spacing-4);
+  --rad-ui-dialog-inline-padding-mobile: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: var(--rad-ui-z-index-portal);
+  width: 100%;
+  max-width: var(--rad-ui-overlay-width-lg);
+  transform: translate(-50%, -50%);
+  padding: var(--rad-ui-spacing-4) var(--rad-ui-dialog-inline-padding) 0;
+  border-radius: var(--rad-ui-panel-radius-lg);
+  background-color: var(--rad-ui-surface-panel);
+  color: var(--rad-ui-text-primary);
+  border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+  box-shadow: var(--rad-ui-elevation-lg-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  transition:
+    opacity var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+    visibility var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+    transform var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard);
+  
+  &[data-state="open"] {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  
+  &[data-state="closed"] {
+    opacity: 0;
+    visibility: hidden;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  
+  &:focus {
+    outline: none;
+  }
+  
+  // Nested child components
+  .rad-ui-dialog-title {
+    font-size: var(--rad-ui-font-size-3);
+    font-weight: var(--rad-ui-component-font-weight-medium);
+    line-height: calc(var(--rad-ui-component-line-height-tight) + 0.15);
+    margin: 0;
+    margin-bottom: var(--rad-ui-spacing-2);
+    color: var(--rad-ui-text-primary);
+    letter-spacing: -0.05em;
+  }
+
+  .rad-ui-dialog-description {
+    max-width: calc(var(--rad-ui-overlay-width-lg) - var(--rad-ui-spacing-12) - var(--rad-ui-size-4));
+    font-size: var(--rad-ui-dialog-body-font-size);
+    font-weight: var(--rad-ui-component-font-weight-regular);
+    line-height: calc(var(--rad-ui-component-line-height-normal) + 0.2);
+    margin: 0;
+    margin-bottom: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+    color: var(--rad-ui-text-secondary);
+    letter-spacing: -0.025em;
+  }
+
+  .rad-ui-dialog-footer {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--rad-ui-spacing-2);
+    margin: 0 calc(var(--rad-ui-dialog-inline-padding) * -1);
+    padding: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs)) var(--rad-ui-dialog-inline-padding) var(--rad-ui-spacing-4);
+    border-top: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+    background-color: var(--rad-ui-surface-subtle);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+
+    @media (width >= 640px) {
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+  
+  // Close renders as a ghost control so text children ("Close") get real
+  // padding and icon-only children stay square. By default it sits in the
+  // header corner, with its label edge aligned to the content inline padding.
+  .rad-ui-dialog-close {
+    position: absolute;
+    right: calc(var(--rad-ui-dialog-inline-padding) - var(--rad-ui-control-padding-x-sm));
+    top: calc(var(--rad-ui-spacing-2) + var(--rad-ui-density-gap-xs));
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rad-ui-density-gap-sm);
+    min-width: var(--rad-ui-control-height-sm);
+    min-height: var(--rad-ui-control-height-sm);
+    padding: 0 var(--rad-ui-control-padding-x-sm);
+    border: var(--rad-ui-border-width-default) solid transparent;
+    border-radius: var(--rad-ui-control-radius-md);
+    background-color: transparent;
+    color: var(--rad-ui-text-secondary);
+    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;
+    opacity: 1;
+    cursor: pointer;
+    transition:
+      background-color var(--rad-ui-motion-duration-fast) ease,
+      border-color var(--rad-ui-motion-duration-fast) ease,
+      color var(--rad-ui-motion-duration-fast) ease;
+
+    svg {
+      width: var(--rad-ui-icon-size-sm);
+      height: var(--rad-ui-icon-size-sm);
+      flex-shrink: 0;
+    }
+
+    &:hover {
+      color: var(--rad-ui-text-primary);
+      background-color: var(--rad-ui-surface-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--rad-ui-focus-ring-shadow);
+    }
+
+    &:disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+
+  // Inside the footer the close is an in-flow secondary action, not a corner
+  // control, so the footer keeps its content instead of rendering empty.
+  .rad-ui-dialog-footer .rad-ui-dialog-close {
+    position: static;
+    min-height: var(--rad-ui-control-height-md);
+    padding: 0 var(--rad-ui-control-padding-x-md);
+    border-color: var(--rad-ui-border-default);
+    background-color: var(--rad-ui-surface-panel);
+    color: var(--rad-ui-text-primary);
+    box-shadow: var(--rad-ui-control-shadow);
+
+    &:hover {
+      background-color: var(--rad-ui-surface-hover);
+      border-color: var(--rad-ui-border-strong);
+    }
+  }
+  
+  // Responsive adjustments
+  @media (width <= 640px) {
+    max-width: calc(100% - 2rem);
+    margin: var(--rad-ui-spacing-4);
+    padding: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs)) var(--rad-ui-dialog-inline-padding-mobile) 0;
+    border-radius: calc(var(--rad-ui-panel-radius-md) + var(--rad-ui-density-gap-xs));
+
+    .rad-ui-dialog-title {
+      font-size: var(--rad-ui-dialog-title-font-size-mobile);
+      margin-bottom: var(--rad-ui-spacing-2);
+    }
+
+    .rad-ui-dialog-description {
+      font-size: var(--rad-ui-dialog-body-font-size);
+      margin-bottom: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+    }
+
+    .rad-ui-dialog-footer {
+      margin: 0 calc(var(--rad-ui-dialog-inline-padding-mobile) * -1);
+      padding: var(--rad-ui-spacing-3) var(--rad-ui-dialog-inline-padding-mobile) var(--rad-ui-dialog-inline-padding-mobile);
+    }
+  }
+}

package/dist/styles/clarity/Disclosure/disclosure.clarity.scss

@@ -0,0 +1,56 @@
+.rad-ui-disclosure-root{
+    border: 1px solid var(--rad-ui-border-soft);
+    border-radius: var(--rad-ui-radius-lg);
+    background-color: var(--rad-ui-surface-panel);
+    
+     .rad-ui-disclosure-item{
+         margin: 0;
+         border-bottom: 1px solid var(--rad-ui-border-soft);
+
+        &:focus-within{
+            color: var(--rad-ui-text-primary);
+        }
+    
+
+     .rad-ui-disclosure-trigger{
+         display: flex;
+         width: 100%;
+         padding: var(--rad-ui-spacing-4);
+         font-weight: 600;
+         color: var(--rad-ui-text-primary);
+         background-color: transparent;
+         border: none;
+         text-align: left;
+         cursor: pointer;
+
+         &:focus-visible{
+            outline: none;
+            box-shadow: var(--rad-ui-focus-ring-shadow-inset);
+         }
+
+         &:hover {
+            background-color: var(--rad-ui-surface-subtle);
+         }
+       
+     }
+
+     .rad-ui-disclosure-content{
+        // No vertical padding on the animated element: the height animation cannot go below
+        // padding, so the last 1rem would snap away when the close finishes. The bottom
+        // spacing lives in a pseudo-element inside the box, which collapses with the height.
+        padding: 0 var(--rad-ui-spacing-4);
+        background-color: var(--rad-ui-surface-panel);
+        color: var(--rad-ui-text-muted);
+
+        &::after {
+            content: "";
+            display: block;
+            height: var(--rad-ui-spacing-4);
+        }
+     }
+
+     &:last-child {
+        border-bottom: none;
+     }
+    }
+}

package/dist/styles/clarity/Drawer/drawer.clarity.scss

@@ -0,0 +1,331 @@
+@use '../Button/button.clarity';
+
+$open-duration: var(--rad-ui-drawer-open-duration, var(--rad-ui-motion-duration-slower));
+$close-duration: var(--rad-ui-drawer-close-duration, var(--rad-ui-motion-duration-slow));
+$open-easing: var(--rad-ui-motion-easing-entrance);
+$close-easing: var(--rad-ui-motion-easing-standard);
+
+.rad-ui-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--rad-ui-z-index-overlay);
+  background-color: var(--rad-ui-overlay-scrim);
+  backdrop-filter: blur(var(--rad-ui-blur-lg));
+  overflow: hidden;
+  transition:
+    opacity    $close-duration $close-easing,
+    visibility $close-duration $close-easing;
+
+  &[data-state="open"] {
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity    $open-duration $open-easing,
+      visibility $open-duration $open-easing;
+  }
+
+  &[data-state="closed"] {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+.rad-ui-drawer-trigger {
+  @extend .rad-ui-button-root;
+
+  position: relative;
+  isolation: isolate;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      var(--rad-ui-focus-ring-shadow-offset-panel),
+      var(--rad-ui-shadow-md);
+  }
+}
+
+.rad-ui-drawer-content {
+  position: fixed;
+  z-index: var(--rad-ui-z-index-portal);
+  background-color: var(--rad-ui-surface-panel);
+  color: var(--rad-ui-text-primary);
+  border: 1px solid var(--rad-ui-border-soft);
+  box-shadow: var(--rad-ui-elevation-lg-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: visible;
+
+  // Prevent the browser from intercepting a vertical swipe as page scroll while the
+  // drawer is being dragged.
+  overscroll-behavior: contain;
+  transition:
+    opacity    $close-duration $close-easing,
+    visibility $close-duration $close-easing,
+    transform  $close-duration $close-easing;
+
+  // While a swipe is in progress, we disable transitions so the transform tracks
+  // the finger without lag, then restore the authored easing for the release.
+  &[data-swiping="true"] {
+    transition-duration: 0ms !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0ms !important;
+    &[data-swiping="true"] { transition-duration: 0ms !important; }
+  }
+
+  // ── Side drawers ──────────────────────────────────────────────────────────
+
+  &[data-swipe-direction="left"] {
+    top: 0; left: 0; bottom: 0;
+    width: min(24rem, 85vw);
+    border-radius: 0 var(--rad-ui-radius-xl) var(--rad-ui-radius-xl) 0;
+    border-left: none;
+
+    // Handle is first child → sits on the right (open) edge
+    &:has(.rad-ui-drawer-handle) { flex-direction: row-reverse; }
+
+    &[data-child-open="true"] {
+      width: calc(min(24rem, 85vw) + var(--drawer-peek-offset, 0px));
+    }
+
+    &[data-state="open"] {
+      opacity: 1; visibility: visible;
+      transform: translateX(calc(-1 * var(--rad-ui-drawer-snap-point-offset, 0px) + var(--rad-ui-drawer-swipe-movement-x, 0px)));
+      transition:
+        opacity    $open-duration $open-easing,
+        visibility $open-duration $open-easing,
+        transform  $open-duration $open-easing,
+        width      $open-duration $open-easing;
+    }
+    &[data-state="closed"] { opacity: 0; visibility: hidden; transform: translateX(-100%); }
+  }
+
+  &[data-swipe-direction="right"] {
+    top: 0; right: 0; bottom: 0;
+    width: min(24rem, 85vw);
+    border-radius: var(--rad-ui-radius-xl) 0 0 var(--rad-ui-radius-xl);
+    border-right: none;
+
+    // Handle is first child → sits on the left (open) edge
+    &:has(.rad-ui-drawer-handle) { flex-direction: row; }
+
+    &[data-child-open="true"] {
+      width: calc(min(24rem, 85vw) + var(--drawer-peek-offset, 0px));
+    }
+
+    &[data-state="open"] {
+      opacity: 1; visibility: visible;
+      transform: translateX(calc(var(--rad-ui-drawer-snap-point-offset, 0px) + var(--rad-ui-drawer-swipe-movement-x, 0px)));
+      transition:
+        opacity    $open-duration $open-easing,
+        visibility $open-duration $open-easing,
+        transform  $open-duration $open-easing,
+        width      $open-duration $open-easing;
+    }
+    &[data-state="closed"] { opacity: 0; visibility: hidden; transform: translateX(100%); }
+  }
+
+  // ── Top / bottom drawers ──────────────────────────────────────────────────
+
+  &[data-swipe-direction="top"] {
+    left: 0; right: 0; top: 0;
+    height: min(24rem, 85vh);
+    border-radius: 0 0 var(--rad-ui-radius-xl) var(--rad-ui-radius-xl);
+    border-top: none;
+
+    // Handle is first child → column-reverse puts it at the bottom (open edge)
+    &:has(.rad-ui-drawer-handle) { flex-direction: column-reverse; }
+
+    &[data-child-open="true"] {
+      height: calc(min(24rem, 85vh) + var(--drawer-peek-offset, 0px));
+    }
+
+    &[data-state="open"] {
+      opacity: 1; visibility: visible;
+      transform: translateY(calc(-1 * var(--rad-ui-drawer-snap-point-offset, 0px) + var(--rad-ui-drawer-swipe-movement-y, 0px)));
+      transition:
+        opacity    $open-duration $open-easing,
+        visibility $open-duration $open-easing,
+        transform  $open-duration $open-easing,
+        height     $open-duration $open-easing;
+    }
+    &[data-state="closed"] { opacity: 0; visibility: hidden; transform: translateY(-100%); }
+  }
+
+  &[data-swipe-direction="bottom"] {
+    left: 0; right: 0; bottom: 0;
+    height: min(24rem, 85vh);
+    border-radius: var(--rad-ui-radius-xl) var(--rad-ui-radius-xl) 0 0;
+    border-bottom: none;
+
+    &[data-child-open="true"] {
+      height: calc(min(24rem, 85vh) + var(--drawer-peek-offset, 0px));
+    }
+
+    &[data-state="open"] {
+      opacity: 1; visibility: visible;
+      transform: translateY(calc(var(--rad-ui-drawer-snap-point-offset, 0px) + var(--rad-ui-drawer-swipe-movement-y, 0px)));
+      transition:
+        opacity    $open-duration $open-easing,
+        visibility $open-duration $open-easing,
+        transform  $open-duration $open-easing,
+        height     $open-duration $open-easing;
+    }
+    &[data-state="closed"] { opacity: 0; visibility: hidden; transform: translateY(100%); }
+  }
+
+  // ── Handle ───────────────────────────────────────────────────────────────
+  // In-flow element — the outer content switches flex-direction per direction
+  // so the handle always lands on the open (dismissal) edge.
+
+  .rad-ui-drawer-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+
+    &[data-dragging] { cursor: grabbing; }
+
+    // Bottom / top → full-width horizontal bar
+    &[data-direction="bottom"],
+    &[data-direction="top"] {
+      width: 100%;
+      height: 2.25rem;
+
+      .rad-ui-drawer-handle-grip {
+        width: 2.75rem;
+        height: 0.3rem;
+        margin: auto;
+      }
+    }
+
+    // Right / left → full-height vertical bar on the open edge
+    &[data-direction="right"],
+    &[data-direction="left"] {
+      width: 2.25rem;
+      height: 100%;
+
+      .rad-ui-drawer-handle-grip {
+        width: 0.3rem;
+        height: 2.75rem;
+        margin: auto;
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      .rad-ui-drawer-handle-grip {
+        box-shadow: 0 0 0 2px var(--rad-ui-surface-panel), 0 0 0 4px var(--rad-ui-ring-strong);
+      }
+    }
+
+    &:hover .rad-ui-drawer-handle-grip {
+      background-color: var(--rad-ui-text-muted);
+    }
+
+    &[data-dragging] .rad-ui-drawer-handle-grip {
+      background-color: var(--rad-ui-text-secondary);
+      transform: scale(1.1);
+    }
+  }
+
+  .rad-ui-drawer-handle-grip {
+    display: block;
+    border-radius: 9999px;
+    background-color: var(--rad-ui-border-strong);
+    flex-shrink: 0;
+    transition:
+      background-color var(--rad-ui-motion-duration-fast) ease,
+      transform var(--rad-ui-motion-duration-normal) ease;
+  }
+
+  // Inner content wrapper — fills remaining space in a column
+  .rad-ui-drawer-content-inner {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    position: relative; // for absolute-positioned close button
+  }
+
+  // ── Inner elements ────────────────────────────────────────────────────────
+
+  .rad-ui-drawer-title {
+    font-size: var(--rad-ui-font-size-3);
+    font-weight: 500;
+    line-height: 1.15;
+    margin: 0 0 0.5rem;
+    color: var(--rad-ui-text-primary);
+    letter-spacing: -0.05em;
+    padding: 1.25rem 1.25rem 0;
+  }
+
+  .rad-ui-drawer-description {
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.45;
+    margin: 0 0 0.875rem;
+    color: var(--rad-ui-text-secondary);
+    letter-spacing: -0.025em;
+    padding: 0 1.25rem;
+  }
+
+  // Close renders as a ghost control so text children ("Close") get real
+  // padding and icon-only children stay square. Its label edge aligns with the
+  // title's inline padding instead of hugging the viewport edge.
+  .rad-ui-drawer-close {
+    position: absolute;
+    right: calc(var(--rad-ui-spacing-5) - var(--rad-ui-control-padding-x-sm));
+    top: var(--rad-ui-spacing-3);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rad-ui-density-gap-sm);
+    min-width: var(--rad-ui-control-height-sm);
+    min-height: var(--rad-ui-control-height-sm);
+    padding: 0 var(--rad-ui-control-padding-x-sm);
+    border: var(--rad-ui-border-width-default) solid transparent;
+    border-radius: var(--rad-ui-control-radius-md);
+    background-color: transparent;
+    color: var(--rad-ui-text-secondary);
+    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;
+    transition:
+      background-color var(--rad-ui-motion-duration-fast) ease,
+      border-color var(--rad-ui-motion-duration-fast) ease,
+      color var(--rad-ui-motion-duration-fast) ease;
+
+    svg {
+      width: var(--rad-ui-icon-size-sm);
+      height: var(--rad-ui-icon-size-sm);
+      flex-shrink: 0;
+    }
+
+    &:hover {
+      color: var(--rad-ui-text-primary);
+      background-color: var(--rad-ui-surface-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--rad-ui-focus-ring-shadow);
+    }
+
+    &:disabled { pointer-events: none; opacity: 0.5; }
+  }
+}