@radui/ui 1.0.0 → 1.1.0

package/dist/styles/clarity/TabNav/tab-nav.clarity.scss

@@ -0,0 +1,69 @@
+// TabNav — Clarity design system aligned.
+// Mirrors the Tabs list recipe so link-based and panel-based tabs read as one system.
+// State is driven by the stable data contract: data-state="active" (also exposed as aria-current="page")
+// and data-disabled.
+
+.rad-ui-tab-nav {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--rad-ui-density-gap-xs);
+    width: fit-content;
+    padding: var(--rad-ui-density-gap-xs);
+    border-radius: var(--rad-ui-control-radius-pill);
+    background-color: var(--rad-ui-surface-muted);
+    box-shadow: var(--rad-ui-inset-border-shadow), var(--rad-ui-control-shadow);
+
+    &[data-orientation="vertical"] {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .rad-ui-tab-nav-link {
+        position: relative;
+        color: var(--rad-ui-text-muted);
+        font-family: var(--rad-ui-font-sans);
+        padding: var(--rad-ui-control-padding-y-sm) var(--rad-ui-control-padding-x-md);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: var(--rad-ui-control-height-sm);
+        border-radius: var(--rad-ui-control-radius-pill);
+        font-size: var(--rad-ui-component-font-size-xs);
+        font-weight: var(--rad-ui-component-font-weight-medium);
+        line-height: var(--rad-ui-component-line-height-tight);
+        text-decoration: none;
+        cursor: pointer;
+        transition: color var(--rad-ui-motion-duration-fast) ease, background-color var(--rad-ui-motion-duration-fast) ease;
+
+        &:hover {
+            color: var(--rad-ui-text-primary);
+        }
+
+        &:focus-visible {
+            z-index: 2;
+            color: var(--rad-ui-text-primary);
+            background-color: var(--rad-ui-surface-canvas);
+            outline: none;
+            box-shadow: var(--rad-ui-focus-ring-shadow), var(--rad-ui-selected-control-shadow);
+        }
+
+        &[data-state="active"] {
+            z-index: 1;
+            color: var(--rad-ui-text-primary);
+            font-weight: var(--rad-ui-component-font-weight-semibold);
+            background-color: var(--rad-ui-surface-canvas);
+            box-shadow: var(--rad-ui-selected-control-shadow-lg);
+        }
+
+        &[data-state="active"]:focus-visible {
+            box-shadow: var(--rad-ui-focus-ring-shadow), var(--rad-ui-selected-control-shadow-lg);
+        }
+
+        &[data-disabled] {
+            opacity: 0.5;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+    }
+}

package/dist/styles/clarity/Table/table.clarity.scss

@@ -0,0 +1,128 @@
+// Parts are styled through their namespaced classes (`-head`, `-row`,
+// `-cell-header`, `-cell`). The legacy unprefixed defaults (`header`, `row`,
+// `cell-header`, `cell`) disappear as soon as a consumer passes `className`,
+// so they must not carry the design-system styles.
+.rad-ui-table-wrapper {
+    border: var(--rad-ui-border-width-default) solid var(--rad-ui-color-accent-500);
+    border-radius: var(--rad-ui-panel-radius-lg);
+    overflow: hidden;
+
+    &[data-resizable] {
+        overflow-x: auto;
+    }
+
+    &[data-resizing] .rad-ui-table-column-resize-handle[data-state="active"]::before {
+        opacity: 1;
+        width: var(--rad-ui-border-width-2);
+        background: var(--rad-ui-focus-ring-color);
+    }
+
+    &[data-resize-handle-visibility="always"] .rad-ui-table-column-resize-handle::before {
+        opacity: 1;
+    }
+
+    &[data-resize-handle-visibility="hover"] .rad-ui-table-cell-header[data-resizable]:hover .rad-ui-table-column-resize-handle::before {
+        opacity: 1;
+    }
+
+    .rad-ui-table {
+        width: 100%;
+        text-align: start;
+        vertical-align: top;
+        border-spacing: 0;
+        box-sizing: border-box;
+        color: var(--rad-ui-text-primary);
+
+        &[data-resizable] {
+            min-width: 100%;
+        }
+    }
+
+    .rad-ui-table-head {
+        vertical-align: inherit;
+        font-size: var(--rad-ui-font-size-2);
+    }
+
+    .rad-ui-table-cell-header {
+        // Same inline padding as body cells so header text aligns with its column.
+        padding: var(--rad-ui-spacing-3) var(--rad-ui-spacing-4);
+        vertical-align: inherit;
+        text-align: start;
+        font-weight: 500;
+        background-color: var(--rad-ui-color-accent-200);
+        border-bottom: var(--rad-ui-border-width-default) solid var(--rad-ui-color-accent-500);
+
+        &[data-resizable] {
+            position: relative;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding-right: var(--rad-ui-spacing-3);
+        }
+    }
+
+    .rad-ui-table-column-resize-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        width: var(--rad-ui-spacing-3);
+        cursor: col-resize;
+        touch-action: none;
+        user-select: none;
+        z-index: 1;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: var(--rad-ui-border-width-default);
+            background: var(--rad-ui-border-soft);
+            opacity: 0;
+            transition:
+                opacity var(--rad-ui-motion-duration-fast) var(--rad-ui-motion-easing-standard),
+                background-color var(--rad-ui-motion-duration-fast) var(--rad-ui-motion-easing-standard),
+                width var(--rad-ui-motion-duration-fast) var(--rad-ui-motion-easing-standard);
+        }
+
+        &:hover::before,
+        &:focus-visible::before,
+        &:active::before,
+        &[data-state="active"]::before {
+            opacity: 1;
+            width: var(--rad-ui-border-width-2);
+            background: var(--rad-ui-focus-ring-color);
+        }
+
+        &:focus-visible {
+            outline: none;
+        }
+    }
+
+    .rad-ui-table-row {
+        vertical-align: inherit;
+        background-color: var(--rad-ui-color-accent-50);
+    }
+
+    // Row dividers live on the cells: borders on <tr> are not rendered with
+    // `border-collapse: separate` (the table uses border-spacing: 0).
+    .rad-ui-table-body .rad-ui-table-row:not(:last-child) > .rad-ui-table-cell {
+        border-bottom: var(--rad-ui-border-width-default) solid var(--rad-ui-color-accent-300);
+    }
+
+    .rad-ui-table-cell {
+        padding: var(--rad-ui-spacing-3) var(--rad-ui-spacing-4);
+        vertical-align: inherit;
+        color: var(--rad-ui-text-primary);
+        font-weight: 400;
+        font-size: var(--rad-ui-font-size-2);
+
+        &[data-resizable] {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}

package/dist/styles/clarity/Tabs/tabs.clarity.scss

@@ -0,0 +1,91 @@
+/** TABS  */
+.rad-ui-tabs{
+    display: flex;
+    flex-direction: column;
+    gap: var(--rad-ui-density-gap-lg);
+
+    &[data-orientation="vertical"] {
+        flex-direction: row;
+        align-items: flex-start;
+    }
+
+    .rad-ui-tabs-list{
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--rad-ui-density-gap-xs);
+        width: fit-content;
+        padding: var(--rad-ui-density-gap-xs);
+        border-radius: var(--rad-ui-control-radius-pill);
+        background-color: var(--rad-ui-surface-muted);
+        box-shadow: var(--rad-ui-inset-border-shadow), var(--rad-ui-control-shadow);
+
+        &[aria-orientation="vertical"] {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .rad-ui-tabs-trigger {
+            position: relative;
+            color: var(--rad-ui-text-muted);
+            font-family: var(--rad-ui-font-sans);
+            padding: var(--rad-ui-control-padding-y-sm) var(--rad-ui-control-padding-x-md);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: var(--rad-ui-control-height-sm);
+            border-radius: var(--rad-ui-control-radius-pill);
+            font-size: var(--rad-ui-component-font-size-xs);
+            font-weight: var(--rad-ui-component-font-weight-medium);
+            line-height: var(--rad-ui-component-line-height-tight);
+            cursor: pointer;
+
+            &:focus-visible{
+                z-index: 2;
+                color: var(--rad-ui-text-primary);
+                background-color: var(--rad-ui-surface-canvas);
+                outline: none;
+                box-shadow: var(--rad-ui-focus-ring-shadow), var(--rad-ui-selected-control-shadow);
+            }
+
+            &[data-state="active"]{
+                z-index: 1;
+                color: var(--rad-ui-text-primary);
+                font-weight: var(--rad-ui-component-font-weight-semibold);
+                background-color: var(--rad-ui-surface-canvas);
+                box-shadow: var(--rad-ui-selected-control-shadow-lg);
+            }
+
+            &[data-state="active"]:focus-visible{
+                box-shadow: var(--rad-ui-focus-ring-shadow), var(--rad-ui-selected-control-shadow-lg);
+            }
+
+            &:hover{
+                color: var(--rad-ui-text-primary);
+            }
+
+            &[data-disabled] {
+                opacity: 0.5;
+                pointer-events: none;
+            }
+        }
+    }
+
+    .rad-ui-tab-content{
+        flex: 1 1 auto;
+        min-width: 0;
+        max-width: 100%;
+
+        &:focus-visible {
+            outline: none;
+            box-shadow: var(--rad-ui-focus-ring-shadow), var(--rad-ui-shadow-lg);
+        }
+
+        padding: var(--rad-ui-control-padding-x-lg);
+        color: var(--rad-ui-text-primary);
+        border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+        border-radius: var(--rad-ui-panel-radius-lg);
+        background-color: var(--rad-ui-surface-panel);
+        box-shadow: var(--rad-ui-shadow-lg);
+    }
+}

package/dist/styles/clarity/Text/text.clarity.scss

@@ -0,0 +1,5 @@
+
+.rad-ui-text {
+    font-size: var(--rad-ui-font-size-3); // 16px
+    line-height: var(--rad-ui-line-height-3); // 1.5 -> 24px
+}

package/dist/styles/clarity/TextArea/textarea.clarity.scss

@@ -0,0 +1,146 @@
+.rad-ui-text-area {
+  textarea {
+    display: block;
+    width: 100%;
+    min-height: 7.5rem;
+    box-sizing: border-box;
+    resize: vertical;
+    font-family: var(--rad-ui-font-sans);
+    font-size: var(--rad-ui-component-font-size-comfortable);
+    line-height: var(--rad-ui-line-height-3);
+    padding: 0.875rem 1rem;
+    border-radius: var(--rad-ui-radius-lg);
+    color: var(--rad-ui-text-primary);
+    background-color: var(--rad-ui-field-background);
+    border: 1px solid var(--rad-ui-field-border);
+    box-shadow: var(--rad-ui-shadow-xs);
+
+    &::placeholder {
+      color: var(--rad-ui-field-placeholder);
+      font-size: inherit;
+    }
+
+    &:disabled,
+    &:read-only {
+      background-color: var(--rad-ui-disabled-background);
+      color: var(--rad-ui-disabled-text);
+      border-color: var(--rad-ui-disabled-border);
+      cursor: not-allowed;
+
+      &::placeholder {
+        color: var(--rad-ui-field-placeholder);
+      }
+    }
+
+    // Disabled tokens are barely distinct from the field surface; dim like Button and Select.
+    &:disabled {
+      opacity: 0.5;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--rad-ui-color-accent-500);
+      background-color: var(--rad-ui-surface-panel);
+      box-shadow: var(--rad-ui-focus-ring-shadow), var(--rad-ui-shadow-xs);
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--rad-ui-solid-background);
+      border-radius: 6px;
+      border: 3px solid transparent;
+      background-clip: content-box;
+
+      &:hover {
+        background-color: var(--rad-ui-solid-hover);
+      }
+    }
+  }
+
+  &[data-size="small"] textarea {
+    font-size: var(--rad-ui-font-size-2);
+    min-height: 6rem;
+    padding: 0.75rem 0.875rem;
+  }
+
+  &[data-size="medium"] textarea {
+    font-size: var(--rad-ui-font-size-3);
+  }
+
+  &[data-size="large"] textarea {
+    font-size: var(--rad-ui-font-size-4);
+    min-height: 9rem;
+    padding: 1.125rem 1.25rem;
+  }
+
+  &[data-resize="horizontal"] textarea {
+    resize: horizontal;
+  }
+
+  &[data-resize="vertical"] textarea {
+    resize: vertical;
+  }
+
+  &[data-resize="none"] textarea {
+    resize: none;
+  }
+
+  &[data-resize="both"] textarea {
+    resize: both;
+  }
+
+  &[data-radius="none"] textarea {
+    border-radius: 0;
+  }
+
+  &[data-radius="small"] textarea {
+    border-radius: 4px;
+  }
+
+  &[data-radius="medium"] textarea {
+    border-radius: var(--rad-ui-radius-lg);
+  }
+
+  &[data-radius="large"] textarea {
+    border-radius: var(--rad-ui-radius-xl);
+  }
+
+  &[data-radius="full"] textarea {
+    border-radius: 16px;
+  }
+
+  &:where([data-variant="soft"]) textarea {
+    border-color: transparent;
+    background-color: var(--rad-ui-surface-subtle);
+    color: var(--rad-ui-text-primary);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rad-ui-border-soft) 55%, transparent);
+  }
+
+  &:where([data-variant="outline"]) textarea {
+    background-color: transparent;
+    border: 1px solid var(--rad-ui-border-default);
+    box-shadow: var(--rad-ui-shadow-none);
+  }
+
+  &:where([data-variant="solid"]) textarea {
+    background-color: var(--rad-ui-surface-panel);
+    border: 1px solid var(--rad-ui-border-soft);
+  }
+
+  &:where([data-variant="ghost"]) textarea {
+    background-color: transparent;
+    border: 1px solid transparent;
+    box-shadow: var(--rad-ui-shadow-none);
+
+    &:focus {
+      border-color: var(--rad-ui-border-default);
+    }
+  }
+}

package/dist/styles/clarity/TextField/text-field.clarity.scss

@@ -0,0 +1,120 @@
+.rad-ui-text-field{
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    min-height: 2rem;
+    box-sizing: border-box;
+    padding: 0 0.75rem;
+    border: 1px solid var(--rad-ui-field-border);
+    border-radius: 0.625rem;
+    background-color: var(--rad-ui-field-background);
+    box-shadow:
+        0 0 0 1px color-mix(in oklab, var(--rad-ui-surface-canvas) 40%, transparent),
+        0 6px 18px -18px color-mix(in oklab, var(--rad-ui-color-gray-900) 14%, transparent);
+
+    &:focus-within {
+        border-color: var(--rad-ui-color-gray-700);
+        background-color: var(--rad-ui-field-background);
+        box-shadow:
+            0 0 0 1px color-mix(in oklab, var(--rad-ui-color-gray-300) 24%, var(--rad-ui-surface-panel)),
+            0 6px 18px -18px color-mix(in oklab, var(--rad-ui-color-gray-900) 16%, transparent);
+    }
+
+    // The whole field (not the bare input inside it) shows the focus ring.
+    &:has(.rad-ui-text-field-input:focus-visible) {
+        box-shadow: var(--rad-ui-focus-ring-shadow);
+    }
+
+    &:has(.rad-ui-text-field-input:disabled),
+    &:has(.rad-ui-text-field-input:read-only) {
+        background-color: var(--rad-ui-disabled-background);
+        border-color: var(--rad-ui-disabled-border);
+        box-shadow: none;
+    }
+
+    // Disabled tokens are barely distinct from the field surface; dim like Button and Select.
+    &:has(.rad-ui-text-field-input:disabled) {
+        opacity: 0.5;
+    }
+}
+
+.rad-ui-text-field-input{
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 100%;
+    height: calc(2rem - 2px);
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: color-mix(in oklab, var(--rad-ui-color-gray-1000) 90%, white);
+    font-family: var(--rad-ui-font-sans);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    letter-spacing: -0.01em;
+
+    &::placeholder {
+        color: var(--rad-ui-field-placeholder);
+    }
+
+    &:disabled,
+    &:read-only {
+        color: var(--rad-ui-disabled-text);
+        cursor: not-allowed;
+    }
+}
+
+.rad-ui-text-field-slot{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--rad-ui-color-gray-950);
+    white-space: nowrap;
+    cursor: text;
+
+    svg {
+        width: 1rem;
+        height: 1rem;
+        stroke-width: 1.9;
+    }
+}
+
+.rad-ui-text-field-reset{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--rad-ui-color-gray-950);
+    cursor: pointer;
+
+    &:focus {
+        outline: none;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    svg {
+        width: 1rem;
+        height: 1rem;
+        stroke-width: 1.9;
+    }
+}
+
+.rad-ui-text-field-slot[data-text-field-slot="end"] {
+    margin-left: auto;
+}
+
+// The root draws the focus ring; suppress the theme's per-input ring.
+.rad-ui-text-field-input:focus-visible {
+    box-shadow: none;
+}