@womp/kookie-ui 0.3.22

package/src/components/segmented-control.css

@@ -0,0 +1,623 @@
+/* stylelint-disable selector-max-specificity */
+.radix-themes {
+  /* Use standard duration token instead of custom duration */
+  --segmented-control-transition-duration: var(--motion-duration-micro); /* Micro-interactions */
+}
+
+.rt-SegmentedControlRoot {
+  display: inline-grid;
+  vertical-align: top;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: stretch;
+  color: var(--gray-12);
+  position: relative;
+  min-width: max-content;
+
+  /* When any item is icon-only, use minmax to ensure square minimum but allow growth */
+  &:where(:has([data-icon-only])) {
+    grid-auto-columns: minmax(var(--segmented-control-height), 1fr);
+  }
+
+  font-family: var(--default-font-family);
+  font-style: normal;
+  text-align: center;
+
+  /* Create a new stacking context */
+  isolation: isolate;
+
+  /* 
+   * Theme-level translucent override
+   * Applies backdrop filter for elevated visual effects
+   */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+  /* 
+   * Component-level material overrides
+   * These ensure proper rendering based on material setting
+   */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+  
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+  /* Disable backdrop-filter when inside elements that already have backdrop-filter */
+  :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
+    backdrop-filter: none !important;
+  }
+}
+
+.rt-SegmentedControlRoot:where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-3);
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*        Vertical Orientation         */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+/* Note: Base vertical grid properties are inside @breakpoints for correct CSS ordering */
+
+.rt-SegmentedControlItem {
+  display: flex;
+  align-items: stretch;
+  user-select: none;
+
+  /* Horizontal orientation (default) */
+  &:where(:first-child) {
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+  &:where(:nth-last-child(2)) {
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:where(:focus-visible) {
+    border-radius: inherit;
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
+  }
+}
+
+/* Vertical orientation - item layout */
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem {
+  flex-direction: column;
+}
+
+/* Vertical orientation - item border radius */
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  border-bottom-left-radius: 0;
+}
+
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem:nth-last-child(2) {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  border-top-right-radius: 0;
+}
+
+.rt-SegmentedControlItemLabel {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+
+  /* stylelint-disable-next-line selector-max-type */
+  & :where(svg) {
+    /* Don’t squish icons */
+    flex-shrink: 0;
+  }
+
+  @media (hover: hover) {
+    :where(.rt-SegmentedControlItem[data-state='off']:not([disabled]):hover) & {
+      background-color: var(--gray-a2);
+    }
+  }
+}
+
+.rt-SegmentedControlItemLabelInactive {
+  position: absolute;
+
+  transition: var(--transition-tabs);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--tab-inactive-letter-spacing);
+  word-spacing: var(--tab-inactive-word-spacing);
+
+  opacity: 1;
+  transition-delay: var(--duration-1); /* Staggered effect like tabs */
+  :where(.rt-SegmentedControlItem[data-state='on']) & {
+    opacity: 0;
+    transition-delay: 0ms; /* Immediate transition for state change */
+  }
+}
+
+.rt-SegmentedControlItemLabelActive {
+  transition: var(--transition-tabs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--tab-active-letter-spacing);
+  word-spacing: var(--tab-active-word-spacing);
+
+  opacity: 0;
+  transition-delay: 0ms; /* Immediate transition for active state like tabs */
+  :where(.rt-SegmentedControlItem[data-state='on']) & {
+    opacity: 1;
+    transition-delay: 0ms; /* Immediate transition for active state */
+  }
+}
+
+.rt-SegmentedControlItemSeparator {
+  /*
+   * Place the separator below the indicator.
+   * Be careful not to introduce a stacking context on ".rt-SegmentedControlItem":
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
+   */
+  z-index: -1;
+
+  /* Horizontal orientation (default) */
+  margin-top: calc(var(--space-1) * 0.75); /* 3px - slightly smaller than space-1 */
+  margin-bottom: calc(var(--space-1) * 0.75); /* 3px */
+  margin-left: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
+  margin-right: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
+  width: var(--border-width-standard); /* 1px */
+  background-color: var(--gray-a4);
+  transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--motion-ease-standard);
+
+  /* Make separators slow to disappear and fast to appear, syncing it well with the indicator motion */
+
+  :where(.rt-SegmentedControlItem:first-child) &,
+  :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) &,
+  :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) + * & {
+    opacity: 0;
+    transition-timing-function: var(--ease-1);
+  }
+  /* Don't transition when the separator is hidden because of the focus outline */
+  :where(.rt-SegmentedControlRoot:has(:focus-visible)) & {
+    transition-duration: 0ms;
+  }
+}
+
+/* Vertical orientation - separator */
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItemSeparator {
+  margin-left: calc(var(--space-1) * 0.75); /* 3px */
+  margin-right: calc(var(--space-1) * 0.75); /* 3px */
+  margin-top: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
+  margin-bottom: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
+  width: auto;
+  height: var(--border-width-standard); /* 1px */
+}
+
+:where(.radix-themes) {
+  --segmented-control-indicator-background-color: var(--color-background);
+}
+
+.rt-SegmentedControlIndicator {
+  display: none;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  pointer-events: none;
+  transition: transform var(--segmented-control-transition-duration) var(--motion-spring-snappy);
+
+  &::before {
+    inset: var(--border-width-standard); /* 1px */
+    position: absolute;
+    border-radius: max(calc(var(--border-width-standard) * 0.5), calc(var(--segmented-control-border-radius) - var(--border-width-standard)));
+    background-color: var(--segmented-control-indicator-background-color);
+    box-shadow: var(--shadow-2);
+    content: '';
+  }
+
+  :where(.rt-SegmentedControlItem[data-state='on']) ~ & {
+    display: block;
+  }
+
+  :where(.rt-SegmentedControlItem[disabled]) ~ & {
+    --segmented-control-indicator-background-color: var(--gray-a3);
+
+    &::before {
+      inset: 0;
+      box-shadow: none;
+    }
+  }
+
+  /* Horizontal orientation (default) - width based on number of items */
+  &:where(:nth-child(2)) {
+    width: calc(100% / 1);
+  }
+  &:where(:nth-child(3)) {
+    width: calc(100% / 2);
+  }
+  &:where(:nth-child(4)) {
+    width: calc(100% / 3);
+  }
+  &:where(:nth-child(5)) {
+    width: calc(100% / 4);
+  }
+  &:where(:nth-child(6)) {
+    width: calc(100% / 5);
+  }
+  &:where(:nth-child(7)) {
+    width: calc(100% / 6);
+  }
+  &:where(:nth-child(8)) {
+    width: calc(100% / 7);
+  }
+  &:where(:nth-child(9)) {
+    width: calc(100% / 8);
+  }
+  &:where(:nth-child(10)) {
+    width: calc(100% / 9);
+  }
+  &:where(:nth-child(11)) {
+    width: calc(100% / 10);
+  }
+
+  /* Horizontal transforms (default) */
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(1)) ~ & {
+    transform: translateX(0%);
+  }
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(2)) ~ & {
+    transform: translateX(100%);
+  }
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(3)) ~ & {
+    transform: translateX(200%);
+  }
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(4)) ~ & {
+    transform: translateX(300%);
+  }
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(5)) ~ & {
+    transform: translateX(400%);
+  }
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(6)) ~ & {
+    transform: translateX(500%);
+  }
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(7)) ~ & {
+    transform: translateX(600%);
+  }
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(8)) ~ & {
+    transform: translateX(700%);
+  }
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(9)) ~ & {
+    transform: translateX(800%);
+  }
+  :where(.rt-SegmentedControlItem[data-state='on']:nth-child(10)) ~ & {
+    transform: translateX(900%);
+  }
+}
+
+/* Vertical orientation - indicator height based on number of items */
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator {
+  width: 100%;
+  height: unset;
+}
+
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(2) {
+  height: calc(100% / 1);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(3) {
+  height: calc(100% / 2);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(4) {
+  height: calc(100% / 3);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(5) {
+  height: calc(100% / 4);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(6) {
+  height: calc(100% / 5);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(7) {
+  height: calc(100% / 6);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(8) {
+  height: calc(100% / 7);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(9) {
+  height: calc(100% / 8);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(10) {
+  height: calc(100% / 9);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(11) {
+  height: calc(100% / 10);
+}
+
+/* Vertical transforms */
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(1) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(0%);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(2) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(100%);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(3) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(200%);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(4) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(300%);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(5) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(400%);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(6) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(500%);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(7) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(600%);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(8) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(700%);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(9) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(800%);
+}
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(10) ~ .rt-SegmentedControlIndicator {
+  transform: translateY(900%);
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Sizes                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-SegmentedControlItemLabel,
+.rt-SegmentedControlItemLabelInactive,
+.rt-SegmentedControlItemLabelActive {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: inherit;
+}
+.rt-SegmentedControlRoot {
+  border-radius: var(--segmented-control-border-radius);
+}
+
+@breakpoints {
+  .rt-SegmentedControlRoot {
+    /* Vertical orientation - grid layout (must be inside @breakpoints for correct CSS ordering) */
+    &:where(.rt-r-orientation-vertical) {
+      grid-auto-flow: row;
+      grid-auto-columns: unset;
+      grid-auto-rows: 1fr;
+      min-width: unset;
+      min-height: max-content;
+    }
+
+    &:where(.rt-r-orientation-vertical):has([data-icon-only]) {
+      grid-auto-columns: unset;
+      grid-auto-rows: minmax(var(--segmented-control-height), 1fr);
+    }
+
+    &:where(.rt-r-size-1) {
+      --segmented-control-border-radius: max(var(--radius-1), var(--radius-full));
+      --segmented-control-height: var(--space-5);
+      height: var(--segmented-control-height);
+
+      /* Vertical: height auto, width determined by content or icon-only */
+      &:where(.rt-r-orientation-vertical) {
+        height: auto;
+        width: auto;
+
+        /* Icon-only gets fixed square width */
+        &:where(:has([data-icon-only])) {
+          width: var(--segmented-control-height);
+        }
+      }
+
+      & :where(.rt-SegmentedControlItemLabel) {
+        font-size: var(--font-size-1);
+        letter-spacing: var(--letter-spacing-1);
+        padding-left: var(--space-3);
+        padding-right: var(--space-3);
+        gap: var(--component-gap-1);
+
+        /* Icon sizing for size 1 */
+        /* stylelint-disable-next-line selector-max-type */
+        & :where(svg) {
+          width: var(--content-icon-size-1);
+          height: var(--content-icon-size-1);
+        }
+      }
+    }
+    &:where(.rt-r-size-2) {
+      --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
+      --segmented-control-height: var(--space-6);
+      height: var(--segmented-control-height);
+
+      /* Vertical: height auto, width determined by content or icon-only */
+      &:where(.rt-r-orientation-vertical) {
+        height: auto;
+        width: auto;
+
+        /* Icon-only gets fixed square width */
+        &:where(:has([data-icon-only])) {
+          width: var(--segmented-control-height);
+        }
+      }
+
+      & :where(.rt-SegmentedControlItemLabel) {
+        font-size: var(--font-size-2);
+        letter-spacing: var(--letter-spacing-2);
+        padding-left: var(--space-4);
+        padding-right: var(--space-4);
+        gap: var(--component-gap-2);
+
+        /* Icon sizing for size 2 */
+        /* stylelint-disable-next-line selector-max-type */
+        & :where(svg) {
+          width: var(--content-icon-size-2);
+          height: var(--content-icon-size-2);
+        }
+      }
+    }
+    &:where(.rt-r-size-3) {
+      --segmented-control-border-radius: max(var(--radius-3), var(--radius-full));
+      --segmented-control-height: var(--space-7);
+      height: var(--segmented-control-height);
+
+      /* Vertical: height auto, width determined by content or icon-only */
+      &:where(.rt-r-orientation-vertical) {
+        height: auto;
+        width: auto;
+
+        /* Icon-only gets fixed square width */
+        &:where(:has([data-icon-only])) {
+          width: var(--segmented-control-height);
+        }
+      }
+
+      & :where(.rt-SegmentedControlItemLabel) {
+        font-size: var(--font-size-3);
+        letter-spacing: var(--letter-spacing-3);
+        padding-left: var(--space-4);
+        padding-right: var(--space-4);
+        gap: var(--component-gap-3);
+
+        /* Icon sizing for size 3 */
+        /* stylelint-disable-next-line selector-max-type */
+        & :where(svg) {
+          width: var(--content-icon-size-3);
+          height: var(--content-icon-size-3);
+        }
+      }
+    }
+    &:where(.rt-r-size-4) {
+      --segmented-control-border-radius: max(var(--radius-4), var(--radius-full));
+      --segmented-control-height: var(--space-8);
+      height: var(--segmented-control-height);
+
+      /* Vertical: height auto, width determined by content or icon-only */
+      &:where(.rt-r-orientation-vertical) {
+        height: auto;
+        width: auto;
+
+        /* Icon-only gets fixed square width */
+        &:where(:has([data-icon-only])) {
+          width: var(--segmented-control-height);
+        }
+      }
+
+      & :where(.rt-SegmentedControlItemLabel) {
+        font-size: var(--font-size-4);
+        letter-spacing: var(--letter-spacing-4);
+        padding-left: var(--space-5);
+        padding-right: var(--space-5);
+        gap: var(--component-gap-4);
+
+        /* Icon sizing for size 4 */
+        /* stylelint-disable-next-line selector-max-type */
+        & :where(svg) {
+          width: var(--content-icon-size-4);
+          height: var(--content-icon-size-4);
+        }
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Soft             */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-SegmentedControlRoot:where(.rt-variant-soft) {
+  /* Base state: solid color for solid panels */
+  background-color: var(--gray-3);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    background-color: var(--gray-3);
+  }
+
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*            Icon-Only Mode           */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+/* 
+ * Icon-only items get minimum square dimensions matching the height,
+ * but can grow to fill available space while keeping icons centered.
+ * This section is placed after size definitions for proper specificity.
+ */
+.rt-SegmentedControlItem:where([data-icon-only]) {
+  /* Horizontal: Minimum square width, but can grow to fill container */
+  min-width: var(--segmented-control-height);
+
+  /* Remove padding and center icon */
+  & :where(.rt-SegmentedControlItemLabel) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+/* Vertical icon-only - minimum square height */
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-icon-only] {
+  min-width: unset;
+  min-height: var(--segmented-control-height);
+}
+
+/* Vertical icon-only - remove top/bottom padding */
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-icon-only] .rt-SegmentedControlItemLabel {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* Vertical icon-only root width (explicit since nested :has() in @breakpoints may not work) */
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-1):has([data-icon-only]) {
+  width: var(--space-5);
+}
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-2):has([data-icon-only]) {
+  width: var(--space-6);
+}
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-3):has([data-icon-only]) {
+  width: var(--space-7);
+}
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-4):has([data-icon-only]) {
+  width: var(--space-8);
+}
+
+/* Vertical text items need vertical padding */
+:where(.rt-r-orientation-vertical):where(.rt-r-size-1) .rt-SegmentedControlItemLabel {
+  padding-top: var(--space-1);
+  padding-bottom: var(--space-1);
+}
+:where(.rt-r-orientation-vertical):where(.rt-r-size-2) .rt-SegmentedControlItemLabel {
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+}
+:where(.rt-r-orientation-vertical):where(.rt-r-size-3) .rt-SegmentedControlItemLabel {
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+}
+:where(.rt-r-orientation-vertical):where(.rt-r-size-4) .rt-SegmentedControlItemLabel {
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+}
+

package/src/components/segmented-control.props.tsx

@@ -0,0 +1,34 @@
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['soft'] as const;
+const orientations = ['horizontal', 'vertical'] as const;
+
+const segmentedControlRootPropDefs = {
+  disabled: { type: 'boolean', className: 'disabled', default: false },
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
+  orientation: {
+    type: 'enum',
+    className: 'rt-r-orientation',
+    values: orientations,
+    default: 'horizontal',
+    responsive: true,
+  },
+  panelBackground: {
+    type: 'enum',
+    className: 'rt-panel-background',
+    values: ['solid', 'translucent'],
+  },
+  ...radiusPropDef,
+} satisfies {
+  disabled?: PropDef<boolean>;
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  orientation: PropDef<(typeof orientations)[number]>;
+  panelBackground: PropDef<'solid' | 'translucent'>;
+};
+
+export { segmentedControlRootPropDefs };