@typlog/ui 0.10.0 → 0.11.0

package/dist/components/inset.css

@@ -0,0 +1,73 @@
+
+.ui-Inset {
+  box-sizing: border-box;
+  --margin-top: 0px;
+  --margin-right: 0px;
+  --margin-bottom: 0px;
+  --margin-left: 0px;
+  overflow: hidden;
+  margin-top: var(--margin-top-override);
+  margin-right: var(--margin-right-override);
+  margin-bottom: var(--margin-bottom-override);
+  margin-left: var(--margin-left-override);
+}
+.ui-Inset > * {
+  --margin-top-override: initial;
+  --margin-right-override: initial;
+  --margin-bottom-override: initial;
+  --margin-left-override: initial;
+}
+.ui-Inset:where(.r-clip-border-box) {
+  --inset-border-radius-calc: calc(var(--inset-border-radius, 0px) - var(--inset-border-width, 0px));
+  --inset-padding-top-calc: var(--inset-padding-top, 0px);
+  --inset-padding-right-calc: var(--inset-padding-right, 0px);
+  --inset-padding-bottom-calc: var(--inset-padding-bottom, 0px);
+  --inset-padding-left-calc: var(--inset-padding-left, 0px);
+}
+.ui-Inset:where(.r-clip-padding-box) {
+  --inset-border-radius-calc: var(--inset-border-radius, 0px);
+  --inset-padding-top-calc: calc(var(--inset-padding-top, 0px) + var(--inset-border-width, 0px));
+  --inset-padding-right-calc: calc(var(--inset-padding-right, 0px) + var(--inset-border-width, 0px));
+  --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
+  --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
+}
+.ui-Inset:where(.inset-top) {
+  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+  --margin-bottom-override: var(--margin-bottom);
+  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+  border-top-left-radius: var(--inset-border-radius-calc);
+  border-top-right-radius: var(--inset-border-radius-calc);
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui-Inset:where(.inset-bottom) {
+  --margin-top-override: var(--margin-top);
+  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-bottom-left-radius: var(--inset-border-radius-calc);
+  border-bottom-right-radius: var(--inset-border-radius-calc);
+}
+.ui-Inset:where(.inset-left) {
+  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+  --margin-right-override: var(--margin-right);
+  border-top-left-radius: var(--inset-border-radius-calc);
+  border-top-right-radius: 0px;
+  border-bottom-left-radius: var(--inset-border-radius-calc);
+  border-bottom-right-radius: 0px;
+}
+.ui-Inset:where(.inset-right) {
+  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+  --margin-left-override: var(--margin-left);
+  border-top-left-radius: 0px;
+  border-top-right-radius: var(--inset-border-radius-calc);
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: var(--inset-border-radius-calc);
+}

package/dist/components/pagination.css

@@ -0,0 +1,299 @@
+
+.ui-Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  vertical-align: top;
+  font-style: normal;
+  font-weight: var(--button-font-weight);
+  text-align: center;
+  white-space: nowrap;
+  height: var(--button-height);
+  padding-left: var(--button-padding-x);
+  padding-right: var(--button-padding-x);
+}
+.ui-Button:where(.r-variant-ghost) {
+  --button-font-weight: var(--font-weight-regular);
+}
+.ui-Button:where(:not(.r-variant-ghost)) {
+  --button-font-weight: var(--font-weight-medium);
+}
+.ui-Button:where([data-disabled]) {
+  cursor: not-allowed;
+}
+.ui-Button:where(.r-size-1) {
+  gap: var(--space-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  border-radius: max(var(--radius-1), var(--radius-full));
+  --button-height: var(--space-5);
+  --button-padding-x: var(--space-2);
+}
+.ui-Button:where(.r-size-1):where(.r-variant-ghost) {
+  --button-ghost-padding-y: var(--space-1);
+}
+.ui-Button:where(.r-size-2) {
+  gap: var(--space-2);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  border-radius: max(var(--radius-2), var(--radius-full));
+  --button-height: var(--space-6);
+  --button-padding-x: var(--space-3);
+}
+.ui-Button:where(.r-size-2):where(.r-variant-ghost) {
+  gap: var(--space-1);
+  --button-padding-x: var(--space-2);
+  --button-ghost-padding-y: var(--space-1);
+}
+.ui-Button:where(.r-size-3) {
+  gap: var(--space-3);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  letter-spacing: var(--letter-spacing-3);
+  border-radius: max(var(--radius-3), var(--radius-full));
+  --button-height: var(--space-7);
+  --button-padding-x: var(--space-4);
+}
+.ui-Button:where(.r-size-3):where(.r-variant-ghost) {
+  gap: var(--space-2);
+  --button-padding-x: var(--space-3);
+  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
+}
+.ui-Button:where(.r-size-4) {
+  gap: var(--space-3);
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+  letter-spacing: var(--letter-spacing-4);
+  border-radius: max(var(--radius-4), var(--radius-full));
+  --button-height: var(--space-8);
+  --button-padding-x: var(--space-5);
+}
+.ui-Button:where(.r-size-4):where(.r-variant-ghost) {
+  gap: var(--space-2);
+  --button-padding-x: var(--space-4);
+  --button-ghost-padding-y: var(--space-2);
+}
+
+/* solid */
+.ui-root {
+  --button-solid-active-filter: brightness(0.92) saturate(1.1);
+  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
+}
+:is(.dark, .dark-theme) .ui-root {
+  --button-solid-active-filter: brightness(1.08);
+  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
+}
+.ui-Button:where(.r-variant-solid) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-solid):where(:hover) {
+    background-color: var(--accent-10);
+}
+}
+.ui-Button:where(.r-variant-solid):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-Button:where(.r-variant-solid):where(:active) {
+  background-color: var(--accent-10);
+  filter: var(--button-solid-active-filter);
+}
+.ui-Button:where(.r-variant-solid):where(.r-high-contrast) {
+  background-color: var(--accent-12);
+  color: var(--gray-1);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-solid):where(.r-high-contrast:hover) {
+    background-color: var(--accent-12);
+    filter: var(--button-solid-high-contrast-hover-filter);
+}
+}
+.ui-Button:where(.r-variant-solid):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+  outline: none;
+  filter: none;
+}
+
+/* soft / ghost */
+.ui-Button:where(.r-variant-soft, .r-variant-ghost) {
+  color: var(--accent-a11);
+}
+.ui-Button:where(.r-variant-soft, .r-variant-ghost):where(.r-high-contrast) {
+  color: var(--accent-12);
+}
+.ui-Button:where(.r-variant-soft):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+.ui-Button:where(.r-variant-soft) {
+  background-color: var(--accent-a3);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-soft):where(:hover) {
+    background-color: var(--accent-a4);
+}
+}
+.ui-Button:where(.r-variant-soft):where(:focus-visible) {
+  outline: 2px solid var(--accent-8);
+  outline-offset: -1px;
+}
+.ui-Button:where(.r-variant-soft):where(:active) {
+  background-color: var(--accent-a5);
+}
+.ui-Button:where(.r-variant-soft):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+.ui-Button:where(.r-variant-ghost) {
+  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-ghost):where(:hover) {
+    background-color: var(--accent-a3);
+}
+}
+.ui-Button:where(.r-variant-ghost):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+.ui-Button:where(.r-variant-ghost):where(:active) {
+  background-color: var(--accent-a4);
+}
+.ui-Button:where(.r-variant-ghost):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: transparent;
+}
+
+/* classic */
+.ui-Button:where(.r-variant-classic) {
+  box-shadow: var(--shadow-2);
+  background-color: var(--color-background);
+}
+.ui-Button:where(.r-variant-classic):where(.r-high-contrast) {
+  color: var(--gray-12);
+  box-shadow: 0 0 0 1px var(--gray-a6), 0 1px 1px 0 var(--black-a4), 0 2px 1px -1px var(--black-a2), 0 1px 3px 0 var(--black-a1);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-classic):where(:hover) {
+    color: var(--accent-a11);
+    background-color: var(--gray-a2);
+}
+.ui-Button:where(.r-variant-classic):where(.r-high-contrast):where(:hover) {
+    color: var(--accent-12);
+}
+}
+.ui-Button:where(.r-variant-classic):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-Button:where(.r-variant-classic):where(:active:not([data-disabled])) {
+  box-shadow: var(--shadow-1);
+}
+.ui-Button:where(.r-variant-classic):where([data-disabled]) {
+  color: var(--gray-a10);
+  background-color: var(--gray-a2);
+}
+
+/* outline */
+.ui-Button:where(.r-variant-outline) {
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-outline):where(:hover) {
+    background-color: var(--accent-a2);
+}
+}
+.ui-Button:where(.r-variant-outline):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+.ui-Button:where(.r-variant-outline):where(.r-high-contrast) {
+  box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
+  color: var(--accent-12);
+}
+.ui-Button:where(.r-variant-outline):where(:active) {
+  background-color: var(--accent-a4);
+}
+.ui-Button:where(.r-variant-outline):where([data-disabled]) {
+  color: var(--gray-a8);
+  box-shadow: inset 0 0 0 1px var(--gray-a7);
+  background-color: transparent;
+}
+
+/* surface */
+.ui-Button:where(.r-variant-surface) {
+  background-color: var(--accent-surface);
+  box-shadow: inset 0 0 0 1px var(--accent-a7);
+  color: var(--accent-a11);
+}
+@media (hover: hover) {
+.ui-Button:where(.r-variant-surface):where(:hover) {
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
+}
+}
+.ui-Button:where(.r-variant-surface):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+.ui-Button:where(.r-variant-surface):where(.r-high-contrast) {
+  color: var(--accent-12);
+}
+.ui-Button:where(.r-variant-surface):where(:active) {
+  background-color: var(--accent-a4);
+}
+.ui-Button:where(.r-variant-surface):where([data-disabled]) {
+  color: var(--gray-a8);
+  box-shadow: inset 0 0 0 1px var(--gray-a6);
+  background-color: var(--gray-a2);
+}
+
+.ui-Button.ui-IconButton:where(:not(.r-variant-ghost)) {
+  height: var(--button-height);
+  width: var(--button-height);
+  padding: 0;
+}
+.ui-IconButton:where(.r-variant-ghost) {
+  padding: var(--icon-button-ghost-padding);
+}
+.ui-IconButton:where(.r-size-1) {
+  --icon-button-ghost-padding: var(--space-1);
+}
+.ui-IconButton:where(.r-size-2) {
+  --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
+}
+.ui-IconButton:where(.r-size-3) {
+  --icon-button-ghost-padding: var(--space-2);
+}
+.ui-IconButton:where(.r-size-4) {
+  --icon-button-ghost-padding: var(--space-3);
+}
+
+.ui-Pagination {
+  display: flex;
+  align-items: center;
+}
+.ui-Pagination:where(.r-size-1) {
+  gap: var(--space-1);
+}
+.ui-Pagination:where(.r-size-2) {
+  gap: var(--space-2);
+}
+.ui-Pagination:where(.r-size-3) {
+  gap: var(--space-3);
+}
+.ui-Pagination:where(.r-size-4) {
+  gap: var(--space-4);
+}
+.ui-Pagination:where(.r-variant-ghost) {
+  gap: 0;
+}

package/dist/components/popover.css

@@ -0,0 +1,69 @@
+
+.ui-PopoverContent {
+  --inset-padding-top: var(--popover-content-padding);
+  --inset-padding-right: var(--popover-content-padding);
+  --inset-padding-bottom: var(--popover-content-padding);
+  --inset-padding-left: var(--popover-content-padding);
+
+  background-color: var(--color-panel-solid);
+  box-shadow: var(--shadow-5);
+  min-width: var(--reka-popover-trigger-width);
+  max-width: var(--reka-popover-content-available-width);
+  outline: 0;
+  overflow: auto;
+  position: relative;
+  padding: var(--popover-content-padding);
+  box-sizing: border-box;
+  transform-origin: var(--reka-popover-content-transform-origin);
+}
+.ui-PopoverContent:where([data-size="1"]) {
+  --popover-content-padding: var(--space-3);
+  border-radius: var(--radius-4);
+}
+.ui-PopoverContent:where([data-size="2"]) {
+  --popover-content-padding: var(--space-4);
+  border-radius: var(--radius-4);
+}
+.ui-PopoverContent:where([data-size="3"]) {
+  --popover-content-padding: var(--space-5);
+  border-radius: var(--radius-5);
+}
+.ui-PopoverContent:where([data-size="4"]) {
+  --popover-content-padding: var(--space-6);
+  border-radius: var(--radius-5);
+}
+@media (prefers-reduced-motion: no-preference) {
+.ui-PopperContent {
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-PopperContent:where([data-state='open']) {
+    animation-duration: 160ms;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='top']) {
+    animation-name: ui-slide-from-top, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='bottom']) {
+    animation-name: ui-slide-from-bottom, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='left']) {
+    animation-name: ui-slide-from-left, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='right']) {
+    animation-name: ui-slide-from-right, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='closed']) {
+    animation-duration: 100ms;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='top']) {
+    animation-name: ui-slide-from-top, ui-fade-out;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='bottom']) {
+    animation-name: ui-slide-from-bottom, ui-fade-out;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='left']) {
+    animation-name: ui-slide-from-left, ui-fade-out;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='right']) {
+    animation-name: ui-slide-from-right, ui-fade-out;
+}
+}

package/dist/components/quota.css

@@ -0,0 +1,14 @@
+
+.ui-Quota {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: var(--space-2);
+  background-color: var(--slate-4);
+}
+.ui-QuotaValue {
+  border-radius: var(--radius-full);
+  width: 100%;
+  height: 100%;
+}

package/dist/components/radio.css

@@ -0,0 +1,211 @@
+
+.ui-Radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+  flex-shrink: 0;
+  cursor: default;
+  width: var(--radio-size);
+  height: var(--radio-size);
+  border: none;
+  box-shadow: none;
+}
+.ui-Radio:checked {
+  /* reset for tailwind */
+  background-image: none;
+}
+.ui-Radio:focus {
+  /* reset for tailwind */
+  box-shadow: none;
+}
+.ui-Radio:where(:disabled, [data-disabled]) {
+  cursor: not-allowed;
+}
+.ui-Radio::before {
+  content: '';
+  display: block;
+  height: var(--radio-size);
+  width: var(--radio-size);
+  border-radius: 100%;
+}
+.ui-Radio::after {
+  pointer-events: none;
+  position: absolute;
+  height: var(--radio-size);
+  width: var(--radio-size);
+  border-radius: 100%;
+  /* Scale via transform to achieve perfect sub-pixel positioning */
+  transform: scale(0.4);
+}
+.ui-Radio:where(:checked, [data-state='checked'])::after {
+  content: '';
+}
+.ui-Radio:where(:focus-visible)::before {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-Radio:where(.r-size-1) {
+  --radio-size: calc(var(--space-4) * 0.875);
+}
+.ui-Radio:where(.r-size-2) {
+  --radio-size: var(--space-4);
+}
+.ui-Radio:where(.r-size-3) {
+  --radio-size: calc(var(--space-4) * 1.25);
+}
+.ui-Radio:where(.r-variant-surface):where(:not(:checked), [data-state='unchecked'])::before {
+  background-color: var(--color-surface);
+  box-shadow: inset 0 0 0 1px var(--gray-a7);
+}
+.ui-Radio:where(.r-variant-surface):where(:checked, [data-state='checked'])::before {
+  background-color: var(--accent-indicator);
+}
+.ui-Radio:where(.r-variant-surface)::after {
+  background-color: var(--accent-contrast);
+}
+.ui-Radio:where(.r-variant-surface):where(.r-high-contrast):where(:checked, [data-state='checked'])::before {
+  background-color: var(--accent-12);
+}
+.ui-Radio:where(.r-variant-surface):where(.r-high-contrast)::after {
+  background-color: var(--accent-1);
+}
+.ui-Radio:where(.r-variant-surface):where(:disabled, [data-disabled])::before {
+  box-shadow: inset 0 0 0 1px var(--gray-a6);
+  background-color: var(--gray-a3);
+}
+.ui-Radio:where(.r-variant-surface):where(:disabled, [data-disabled])::after {
+  background-color: var(--gray-a8);
+}
+.ui-Radio:where(.r-variant-soft)::before {
+  background-color: var(--accent-a4);
+}
+.ui-Radio:where(.r-variant-soft)::after {
+  background-color: var(--accent-a11);
+}
+.ui-Radio:where(.r-variant-soft):where(.r-high-contrast)::after {
+  background-color: var(--accent-12);
+}
+.ui-Radio:where(.r-variant-soft):where(:focus-visible)::before {
+  outline-color: var(--accent-a8);
+}
+.ui-Radio:where(.r-variant-soft):where(:disabled, [data-disabled])::before {
+  background-color: var(--gray-a3);
+}
+.ui-Radio:where(.r-variant-soft):where(:disabled, [data-disabled])::after {
+  background-color: var(--gray-a8);
+}
+
+.ui-RadioGroupItem {
+  display: flex;
+  align-items: center;
+  gap: .5em;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.ui-Card {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  font-style: normal;
+  text-align: start;
+  box-sizing: border-box;
+  border-radius: var(--card-border-radius);
+  padding: var(--card-padding);
+  border-color: var(--card-border-color, var(--gray-a5));
+  border-width: var(--card-border-width, 1px);
+  border-style: solid;
+  --inset-padding-top: var(--card-padding);
+  --inset-padding-right: var(--card-padding);
+  --inset-padding-bottom: var(--card-padding);
+  --inset-padding-left: var(--card-padding);
+}
+.ui-Card:where(:-moz-any-link, button, label):where(:hover) {
+  --card-border-color: var(--gray-a7);
+}
+.ui-Card:where(:any-link, button, label):where(:hover) {
+  --card-border-color: var(--gray-a7);
+}
+.ui-Card:where(:-moz-any-link, button, label):where(:focus-visible) {
+  --card-border-color: var(--focus-8);
+  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+.ui-Card:where(:any-link, button, label):where(:focus-visible) {
+  --card-border-color: var(--focus-8);
+  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+.ui-Card:where(.r-size-1) {
+  --card-padding: var(--space-3);
+  --card-border-radius: max(var(--radius-4), var(--radius-full));
+}
+.ui-Card:where(.r-size-2) {
+  --card-padding: var(--space-4);
+  --card-border-radius: max(var(--radius-4), var(--radius-full));
+}
+.ui-Card:where(.r-size-3) {
+  --card-padding: var(--space-5);
+  --card-border-radius: max(var(--radius-5), var(--radius-full));
+}
+.ui-Card:where(.r-size-4) {
+  --card-padding: var(--space-6);
+  --card-border-radius: max(var(--radius-5), var(--radius-full));
+}
+.ui-Card:where(.r-size-5) {
+  --card-padding: var(--space-8);
+  --card-border-radius: max(var(--radius-6), var(--radius-full));
+}
+.ui-Card:where(.r-variant-soft) {
+  border-color: var(--gray-2);
+  background-color: var(--gray-2);
+}
+.ui-Card:where(.r-variant-soft):where(:-moz-any-link, button, label):where(:hover) {
+  border-color: var(--gray-a5);
+}
+.ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
+  border-color: var(--gray-a5);
+}
+
+.ui-RadioCardsItem .ui-Card {
+  width: 100%;
+  height: 100%;
+}
+.ui-RadioCardsItem:where([data-state="checked"]) .ui-Card {
+  --card-border-color: var(--accent-10);
+  box-shadow: 0 0 0 1px var(--accent-10);
+}
+
+.ui-RadioTabsList {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  background-color: var(--gray-a3);
+  padding: var(--radio-tabs-list-padding);
+  border-radius: var(--radio-tabs-list-radius);
+}
+.ui-RadioTabsList:where(.r-size-1) {
+  --radio-tabs-list-padding: var(--space-1);
+  --radio-tabs-list-radius: var(--radius-2);
+  --radio-tabs-item-padding: 3px 6px;
+  --radio-tabs-item-radius: var(--radius-1);
+}
+.ui-RadioTabsList:where(.r-size-2) {
+  --radio-tabs-list-padding: var(--space-1);
+  --radio-tabs-list-radius: var(--radius-4);
+  --radio-tabs-item-padding: 4px 8px;
+  --radio-tabs-item-radius: var(--radius-2);
+}
+.ui-RadioTabsList [role="radio"] {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  padding: var(--radio-tabs-item-padding);
+  border-radius: var(--radio-tabs-item-radius);
+}
+.ui-RadioTabsList [data-state="checked"] {
+  color: var(--gray-12);
+  background-color: var(--color-background);
+  box-shadow: var(--shadow-2);
+}