@radui/ui 1.0.0 → 1.1.0

package/dist/index.js

@@ -0,0 +1,69 @@
+'use client';
+
+export { default as Accordion } from './components/Accordion.js';
+export { default as Avatar } from './components/Avatar.js';
+export { default as AvatarGroup } from './components/AvatarGroup.js';
+export { default as AlertDialog } from './components/AlertDialog.js';
+export { default as AspectRatio } from './components/AspectRatio.js';
+export { default as Badge } from './components/Badge.js';
+export { default as Button } from './components/Button.js';
+export { default as BlockQuote } from './components/BlockQuote.js';
+export { default as Breadcrumb } from './components/Breadcrumb.js';
+export { default as Callout } from './components/Callout.js';
+export { default as Card } from './components/Card.js';
+export { default as Code } from './components/Code.js';
+export { default as Dialog } from './components/Dialog.js';
+export { default as Em } from './components/Em.js';
+export { default as Heading } from './components/Heading.js';
+export { default as Text } from './components/Text.js';
+export { default as Kbd } from './components/Kbd.js';
+export { default as Label } from './components/Label.js';
+export { default as LiveRegion } from './components/LiveRegion.js';
+export { default as Progress } from './components/Progress.js';
+export { default as Separator } from './components/Separator.js';
+export { default as Strong } from './components/Strong.js';
+export { default as Switch } from './components/Switch.js';
+export { default as Table } from './components/Table.js';
+export { default as Tabs } from './components/Tabs.js';
+export { default as Toggle } from './components/Toggle.js';
+export { default as ToggleGroup } from './components/ToggleGroup.js';
+export { default as Toolbar } from './components/Toolbar.js';
+export { default as Tooltip } from './components/Tooltip.js';
+export { default as VisuallyHidden } from './components/VisuallyHidden.js';
+export { default as ScrollArea } from './components/ScrollArea.js';
+export { default as Popover } from './components/Popover.js';
+export { default as Theme } from './components/Theme.js';
+export { default as Link } from './components/Link.js';
+export { default as Checkbox } from './components/Checkbox.js';
+export { default as CheckboxCards } from './components/CheckboxCards.js';
+export { default as CheckboxGroup } from './components/CheckboxGroup.js';
+export { default as Collapsible } from './components/Collapsible.js';
+export { default as Combobox } from './components/Combobox.js';
+export { default as Command } from './components/Command.js';
+export { default as ContextMenu } from './components/ContextMenu.js';
+export { default as DataList } from './components/DataList.js';
+export { default as Drawer } from './components/Drawer.js';
+export { default as Disclosure } from './components/Disclosure.js';
+export { default as DropdownMenu } from './components/DropdownMenu.js';
+export { default as Fieldset } from './components/Fieldset.js';
+export { default as HoverCard } from './components/HoverCard.js';
+export { default as Menubar } from './components/Menubar.js';
+export { default as Meter } from './components/Meter.js';
+export { default as Minimap } from './components/Minimap.js';
+export { default as NavigationMenu } from './components/NavigationMenu.js';
+export { default as NumberField } from './components/NumberField.js';
+export { default as Quote } from './components/Quote.js';
+export { default as Radio } from './components/Radio.js';
+export { default as RadioCards } from './components/RadioCards.js';
+export { default as RadioGroup } from './components/RadioGroup.js';
+export { default as Select } from './components/Select.js';
+export { default as Skeleton } from './components/Skeleton.js';
+export { default as Slider } from './components/Slider.js';
+export { default as Spinner } from './components/Spinner.js';
+export { default as Splitter } from './components/Splitter.js';
+export { default as Steps } from './components/Steps.js';
+export { default as TabNav } from './components/TabNav.js';
+export { default as TextArea } from './components/TextArea.js';
+export { default as TextField } from './components/TextField.js';
+export { default as Toast } from './components/Toast.js';
+export { default as Tree } from './components/Tree.js';

package/dist/styles/clarity/Accordion/accordion.clarity.scss

@@ -0,0 +1,147 @@
+.rad-ui-accordion-root {
+  width: 100%;
+
+    .rad-ui-accordion-item {
+      border-bottom: 1px solid var(--rad-ui-border-soft);
+
+    &[data-disabled] {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .rad-ui-accordion-header {
+      display: flex;
+      margin: 0;
+    }
+
+      .rad-ui-accordion-trigger {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--rad-ui-spacing-4);
+      padding: 1rem 4px;
+      font-size: var(--rad-ui-component-font-size-comfortable);
+      font-weight: 600;
+      line-height: 1.4;
+      background-color: transparent;
+      color: var(--rad-ui-text-primary);
+      border: none;
+      cursor: pointer;
+      text-align: left;
+      width: 100%;
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+        border-radius: var(--rad-ui-radius-sm);
+      }
+
+      &[aria-disabled="true"] {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+
+      // Chevron icon
+      svg,
+      .rad-ui-accordion-chevron {
+        height: 1.125rem;
+        width: 1.125rem;
+        flex-shrink: 0;
+        color: var(--rad-ui-text-secondary);
+        transition: transform var(--rad-ui-motion-duration-normal) ease;
+      }
+    }
+
+    &[data-state="open"] {
+      .rad-ui-accordion-trigger {
+        svg,
+        .rad-ui-accordion-chevron {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .rad-ui-accordion-content {
+      overflow: hidden;
+      font-size: var(--rad-ui-component-font-size-comfortable);
+      line-height: 1.6;
+      color: var(--rad-ui-text-secondary);
+
+      .rad-ui-accordion-content-inner {
+        padding-bottom: 1rem;
+
+        > :first-child {
+          margin-top: 0;
+        }
+
+        > :last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    /* Opt-in expand/collapse animation.
+     *
+     * The default panel animates via the inline `height` the Collapsible
+     * primitive sets, which works but is limited to a height tween. This
+     * variant uses the `grid-template-rows: 0fr -> 1fr` technique instead,
+     * which also fades and slides the panel in.
+     *
+     * `height: auto !important` is required, not stylistic: it overrides the
+     * inline height the primitive writes during its own tween. Without it the
+     * two animations fight and the panel snaps. Because the inline height is
+     * discarded, callers using this variant should pass `forceMount` so the
+     * panel stays mounted and the collapse can finish.
+     *
+     * The bottom spacing moves from the panel's `padding-bottom` onto its
+     * last child as a `margin-bottom`. Padding on the grid item does not
+     * collapse with a `0fr` track: the padding box still occupies 1rem, so
+     * the closed panel reserved a 1rem gap under the trigger. A margin on
+     * the child is outside the collapsed track and collapses with it. The
+     * base rule zeroes the last child's margin, so this has to override it;
+     * both selectors compile to (0,5,0) and this one is later in the file.
+     *
+     * Removed in 798f9c8f along with the `WithAnimation` story and left
+     * unreplaced; restored here so the story and the docs example share one
+     * definition. */
+    .rad-ui-accordion-content-animated {
+      height: auto !important;
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--rad-ui-motion-duration-normal) ease;
+
+      .rad-ui-accordion-content-inner {
+        min-height: 0;
+        padding-bottom: 0;
+        transform-origin: top;
+        opacity: 0;
+        transform: translateY(-8px) scaleY(0.96);
+        transition: opacity var(--rad-ui-motion-duration-normal) ease, transform var(--rad-ui-motion-duration-normal) ease;
+
+        > *:last-child {
+          margin-bottom: 1rem;
+        }
+      }
+
+      &[data-state="open"] {
+        grid-template-rows: 1fr;
+
+        .rad-ui-accordion-content-inner {
+          opacity: 1;
+          transform: translateY(0) scaleY(1);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+
+        .rad-ui-accordion-content-inner {
+          opacity: 1;
+          transform: none;
+          transition: none;
+        }
+      }
+    }
+  }
+}

package/dist/styles/clarity/AlertDialog/alert-dialog.clarity.scss

@@ -0,0 +1,199 @@
+@use '../Button/button.clarity';
+
+%rad-ui-alert-dialog-action-skin {
+  @extend .rad-ui-button-root;
+
+  min-height: var(--rad-ui-control-height-md);
+  padding-inline: calc(var(--rad-ui-control-padding-x-md) + var(--rad-ui-density-gap-xs));
+  border-radius: var(--rad-ui-control-radius-lg);
+  font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+  font-weight: var(--rad-ui-component-font-weight-medium);
+  letter-spacing: -0.03em;
+  background-color: var(--rad-ui-surface-inverse);
+  color: var(--rad-ui-text-inverse);
+  border: var(--rad-ui-border-width-default) solid var(--rad-ui-surface-inverse);
+  box-shadow: var(--rad-ui-control-shadow);
+
+  &:hover {
+    background-color: var(--rad-ui-text-primary);
+    border-color: var(--rad-ui-text-primary);
+  }
+}
+
+%rad-ui-alert-dialog-cancel-skin {
+  @extend .rad-ui-button-root;
+
+  min-height: var(--rad-ui-control-height-md);
+  padding-inline: calc(var(--rad-ui-control-padding-x-md) + var(--rad-ui-density-gap-xs));
+  border-radius: var(--rad-ui-control-radius-lg);
+  font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+  font-weight: var(--rad-ui-component-font-weight-medium);
+  letter-spacing: -0.03em;
+  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-control-shadow);
+
+  &:hover {
+    background-color: var(--rad-ui-surface-subtle);
+    border-color: var(--rad-ui-border-default);
+    color: var(--rad-ui-text-primary);
+  }
+}
+
+.rad-ui-alert-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-alert-dialog-trigger {
+  @extend .rad-ui-button-root;
+
+  cursor: pointer;
+}
+
+.rad-ui-alert-dialog-content {
+  --rad-ui-alert-dialog-body-font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+  --rad-ui-alert-dialog-title-font-size-mobile: calc(var(--rad-ui-font-size-3) - (var(--rad-ui-spacing-1) / 4));
+  --rad-ui-alert-dialog-inline-padding: var(--rad-ui-spacing-4);
+  --rad-ui-alert-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-alert-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-default);
+  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-alert-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-alert-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-alert-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-muted);
+    letter-spacing: -0.025em;
+  }
+  
+  .rad-ui-alert-dialog-footer {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--rad-ui-spacing-2);
+    margin: 0 calc(var(--rad-ui-alert-dialog-inline-padding) * -1);
+    padding: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs)) var(--rad-ui-alert-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;
+    }
+    
+    .rad-ui-alert-dialog-action {
+      @extend %rad-ui-alert-dialog-action-skin;
+    }
+    
+    .rad-ui-alert-dialog-cancel {
+      @extend %rad-ui-alert-dialog-cancel-skin;
+    }
+  }
+
+  @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-alert-dialog-inline-padding-mobile) 0;
+    border-radius: calc(var(--rad-ui-panel-radius-md) + var(--rad-ui-density-gap-xs));
+
+    .rad-ui-alert-dialog-title {
+      font-size: var(--rad-ui-alert-dialog-title-font-size-mobile);
+      margin-bottom: var(--rad-ui-spacing-2);
+    }
+
+    .rad-ui-alert-dialog-description {
+      font-size: var(--rad-ui-alert-dialog-body-font-size);
+      margin-bottom: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+    }
+
+    .rad-ui-alert-dialog-footer {
+      margin: 0 calc(var(--rad-ui-alert-dialog-inline-padding-mobile) * -1);
+      padding: var(--rad-ui-spacing-3) var(--rad-ui-alert-dialog-inline-padding-mobile) var(--rad-ui-alert-dialog-inline-padding-mobile);
+    }
+
+    .rad-ui-alert-dialog-action,
+    .rad-ui-alert-dialog-cancel {
+      width: 100%;
+    }
+  }
+}
+
+// Standalone button styles (for when used outside of content context)
+.rad-ui-alert-dialog-action {
+  @extend %rad-ui-alert-dialog-action-skin;
+}
+
+.rad-ui-alert-dialog-cancel {
+  @extend %rad-ui-alert-dialog-cancel-skin;
+}

package/dist/styles/clarity/Avatar/_avatar-base.clarity.scss

@@ -0,0 +1,87 @@
+// Base avatar styles - shared between avatar and avatar-group components
+.rad-ui-avatar {
+  position: relative;
+  display: flex;
+  height: var(--rad-ui-size-10); // h-10
+  width: var(--rad-ui-size-10); // w-10
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--rad-ui-radius-full); // rounded-full
+  
+  .rad-ui-avatar-image {
+    aspect-ratio: 1 / 1;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+
+    // Keep a loading/undecoded image out of the layout so the fallback is the only
+    // visible content until the image is ready (it still loads while hidden).
+    &[data-state="loading"] {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+    }
+  }
+  
+  // Default styles (no color prop) — semantic tokens so dark theme keeps contrast vs canvas
+  .rad-ui-avatar-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    font-size: var(--rad-ui-font-size-2); // text-sm
+    line-height: var(--rad-ui-line-height-1);
+    font-weight: 500; // font-medium
+    color: var(--rad-ui-text-primary);
+    background-color: var(--rad-ui-surface-muted);
+    box-shadow: inset 0 0 0 1px var(--rad-ui-border-soft);
+  }
+  
+  // Size variants - must come before more specific selectors
+  &[data-size="sm"],
+  &[data-size="small"] {
+    height: var(--rad-ui-size-8); // h-8
+    width: var(--rad-ui-size-8); // w-8
+    
+    .rad-ui-avatar-fallback {
+      font-size: var(--rad-ui-font-size-1); // text-xs
+    }
+  }
+  
+  &[data-size="lg"],
+  &[data-size="large"] {
+    height: var(--rad-ui-size-12); // h-12
+    width: var(--rad-ui-size-12); // w-12
+    
+    .rad-ui-avatar-fallback {
+      font-size: var(--rad-ui-font-size-3); // text-base
+    }
+  }
+
+  &[data-rad-ui-has-image] {
+    .rad-ui-avatar-fallback {
+      color: var(--rad-ui-text-primary);
+      background-color: var(--rad-ui-surface-muted);
+      box-shadow: inset 0 0 0 1px var(--rad-ui-border-soft);
+    }
+  }
+
+  // Solid accent fallback: light initials on the 950 step (as Button/Badge solid).
+  // The 800 step cannot carry light or dark text at WCAG AA for most scales
+  // (gray 3.2:1 light / 3.6:1 dark, sky 1.5:1), so it is not used for text surfaces.
+  &[data-color]:not([data-rad-ui-has-image]) {
+    .rad-ui-avatar-fallback {
+      color: var(--rad-ui-color-accent-50);
+      background-color: var(--rad-ui-color-accent-950);
+      box-shadow: var(--rad-ui-shadow-none);
+    }
+  }
+  
+  // Square variant
+  &[data-variant="square"] {
+    border-radius: var(--rad-ui-radius-sm); // rounded-md
+  }
+}

package/dist/styles/clarity/Avatar/avatar.clarity.scss

@@ -0,0 +1 @@
+@use "avatar-base.clarity";

package/dist/styles/clarity/AvatarGroup/avatar-group.clarity.scss

@@ -0,0 +1,122 @@
+/* stylelint-disable no-descending-specificity */
+// Base avatar styles (least specific) - must come first
+@use "../Avatar/avatar-base.clarity";
+
+// Avatar group styles (more specific due to nesting)
+// Note: This file has nested selectors that create specificity conflicts
+// The structure is functionally correct, but stylelint can't handle the nesting properly
+.rad-ui-avatar-group {
+  --rad-ui-avatar-group-overlap: calc(var(--rad-ui-spacing-1) + var(--rad-ui-density-gap-xs));
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  
+  .rad-ui-avatar-group-item {
+    position: relative;
+    display: flex;
+    height: var(--rad-ui-size-10); // h-10
+    width: var(--rad-ui-size-10); // w-10
+    flex-shrink: 0;
+    overflow: hidden;
+    border-radius: var(--rad-ui-radius-full); // rounded-full
+    background-color: var(--rad-ui-surface-panel);
+    box-shadow: 0 0 0 var(--rad-ui-border-width-2) var(--rad-ui-surface-panel);
+    
+    // Overlapping avatars with negative margin
+    &:not(:first-child) {
+      margin-left: calc(var(--rad-ui-avatar-group-overlap) * -1);
+      z-index: 1;
+    }
+    
+    &:first-child {
+      margin-left: 0;
+    }
+    
+    // Nested avatar components - more specific than standalone .rad-ui-avatar
+    .rad-ui-avatar {
+      height: 100%;
+      width: 100%;
+      border-radius: inherit;
+    }
+    
+    .rad-ui-avatar-image,
+    .rad-ui-avatar-group-avatar {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: inherit;
+
+      // Hidden (but still loading) until decoded, so the fallback is the only
+      // visible content while the image is pending.
+      &[data-state="loading"] {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+      }
+    }
+    
+    // Default styles (no color prop) - muted appearance
+    .rad-ui-avatar-fallback,
+    .rad-ui-avatar-group-fallback {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+      border-radius: inherit;
+      font-size: var(--rad-ui-font-size-2); // text-sm
+      line-height: var(--rad-ui-line-height-1);
+      font-weight: 600; // font-semibold
+      color: var(--rad-ui-text-primary);
+      background-color: var(--rad-ui-surface-muted);
+    }
+
+    // Item `color` prop: solid accent fallback (same recipe as Avatar).
+    &[data-color]:not([data-rad-ui-has-image]) {
+      .rad-ui-avatar-fallback,
+      .rad-ui-avatar-group-fallback {
+        color: var(--rad-ui-color-accent-50);
+        background-color: var(--rad-ui-color-accent-950);
+      }
+    }
+  }
+  
+  // Size variants — mirror Avatar sizes (accepts both short and library-standard names)
+  &[data-size="sm"] .rad-ui-avatar-group-item,
+  &[data-size="small"] .rad-ui-avatar-group-item {
+    height: var(--rad-ui-size-8);
+    width: var(--rad-ui-size-8);
+
+    .rad-ui-avatar-fallback,
+    .rad-ui-avatar-group-fallback {
+      font-size: var(--rad-ui-font-size-1);
+    }
+  }
+
+  &[data-size="lg"] .rad-ui-avatar-group-item,
+  &[data-size="large"] .rad-ui-avatar-group-item {
+    height: var(--rad-ui-size-12);
+    width: var(--rad-ui-size-12);
+
+    .rad-ui-avatar-fallback,
+    .rad-ui-avatar-group-fallback {
+      font-size: var(--rad-ui-font-size-3);
+    }
+  }
+
+  &[data-variant="square"] .rad-ui-avatar-group-item {
+    border-radius: var(--rad-ui-radius-sm);
+  }
+
+  // Spacing variant (no overlap) - more specific
+  &[data-variant="spacing"] {
+    gap: var(--rad-ui-spacing-2);
+    
+    .rad-ui-avatar-group-item {
+      margin-left: 0;
+    }
+  }
+  
+}
+/* stylelint-enable no-descending-specificity */