@kushagradhawan/kookie-ui 0.1.28 → 0.1.30

package/src/components/radio-cards.css

@@ -8,12 +8,7 @@
 }
 
 .rt-RadioCardsItem {
-  --base-card-padding-top: var(--radio-cards-item-padding-y);
-  --base-card-padding-right: var(--radio-cards-item-padding-x);
-  --base-card-padding-bottom: var(--radio-cards-item-padding-y);
-  --base-card-padding-left: var(--radio-cards-item-padding-x);
-  --base-card-border-radius: var(--radio-cards-item-border-radius);
-  --base-card-border-width: var(--radio-cards-item-border-width);
+  --base-card-border-width: var(--border-width-standard);
 
   display: flex;
   align-items: center;
@@ -26,12 +21,10 @@
   }
   /* stylelint-disable-next-line selector-max-type */
   & > :where(svg) {
-    /* Don’t squish icons */
+    /* Don't squish icons */
     flex-shrink: 0;
   }
-  &::after {
-    outline-offset: -1px;
-  }
+
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -42,115 +35,40 @@
 
 @breakpoints {
   .rt-RadioCardsRoot {
-    /* 40px height for the card with one line of text */
+    /* Size 1 */
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
-      --radio-cards-item-padding-x: var(--space-3);
-      --radio-cards-item-padding-y: calc(var(--space-3) * var(--spacing-multiplier-medium));
-      --radio-cards-item-border-radius: var(--radius-3);
     }
-    /* 48px height for the card with one line of text */
+    /* Size 2 */
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
-      --radio-cards-item-padding-x: var(--space-4);
-      --radio-cards-item-padding-y: calc(var(--space-4) * var(--spacing-multiplier-medium));
-      --radio-cards-item-border-radius: var(--radius-3);
     }
-    /* 64px height for the card with one line of text */
+    /* Size 3 */
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-3);
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
-      --radio-cards-item-padding-x: var(--space-5);
-      --radio-cards-item-padding-y: calc(var(--space-5) * var(--spacing-multiplier-medium));
-      --radio-cards-item-border-radius: var(--radius-4);
     }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*         Variants / Surface          */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-:where(.rt-RadioCardsRoot.rt-variant-surface) {
-  .rt-RadioCardsItem {
-    --radio-cards-item-border-width: var(--border-width-standard);
-    --radio-cards-item-background-color: var(--color-surface);
-
-    transition: var(--transition-card);
-
-    &::before {
-      background-color: var(--radio-cards-item-background-color);
-    }
-    &::after {
-      box-shadow: var(--base-card-surface-box-shadow);
+    /* Size 4 */
+    &:where(.rt-r-size-4) {
+      font-size: var(--font-size-3);
+      --line-height: var(--line-height-3);
+      --letter-spacing: var(--letter-spacing-3);
     }
-    @media (hover: hover) {
-      &:where(:not(:disabled):not([data-state='checked']):hover) {
-        transition-duration: var(--duration-1);
-        &::after {
-          box-shadow: var(--base-card-surface-hover-box-shadow);
-        }
-      }
+    /* Size 5 */
+    &:where(.rt-r-size-5) {
+      font-size: var(--font-size-4);
+      --line-height: var(--line-height-4);
+      --letter-spacing: var(--letter-spacing-4);
     }
   }
-
-  /* Component-level panel background overrides (higher specificity) */
-  &:where([data-panel-background='solid']) .rt-RadioCardsItem {
-    --color-surface: var(--color-surface-solid);
-  }
-
-  &:where([data-panel-background='translucent']) .rt-RadioCardsItem {
-    --color-surface: var(--color-surface-translucent);
-  }
 }
 
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*         Variants / Classic          */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-:where(.rt-RadioCardsRoot.rt-variant-classic) {
-  .rt-RadioCardsItem {
-    --radio-cards-item-border-width: var(--border-width-standard);
-    --radio-cards-item-background-color: var(--color-surface);
-
-    transition: var(--transition-card);
-    box-shadow: var(--base-card-classic-box-shadow-outer);
 
-    &::before {
-      background-color: var(--radio-cards-item-background-color);
-    }
-    &::after {
-      box-shadow: var(--base-card-classic-box-shadow-inner);
-    }
-    @media (hover: hover) {
-      &:where(:not(:disabled):not([data-state='checked']):hover) {
-        transition-duration: var(--duration-1);
-        box-shadow: var(--base-card-classic-hover-box-shadow-outer);
-        &::after {
-          box-shadow: var(--base-card-classic-hover-box-shadow-inner);
-        }
-      }
-    }
-  }
-
-  /* Component-level panel background overrides (higher specificity) */
-  &:where([data-panel-background='solid']) .rt-RadioCardsItem {
-    --color-surface: var(--color-surface-solid);
-  }
-
-  &:where([data-panel-background='translucent']) .rt-RadioCardsItem {
-    --color-surface: var(--color-surface-translucent);
-  }
-}
 
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
@@ -160,13 +78,10 @@
 
 .rt-RadioCardsItem:where([data-state='checked']) {
   transition: var(--transition-fast);
-  &::after {
-    outline: var(--focus-outline-width) solid var(--accent-indicator);
-  }
+  outline: var(--focus-outline-width) solid var(--accent-indicator);
+  outline-offset: -1px;
   :where(.rt-RadioCardsRoot.rt-high-contrast) & {
-    &::after {
-      outline-color: var(--accent-12);
-    }
+    outline-color: var(--accent-12);
   }
 }
 
@@ -178,16 +93,13 @@
 
 .rt-RadioCardsItem:where(:focus-visible) {
   transition: var(--transition-focus);
-  &::after {
-    outline: var(--focus-outline-width) solid var(--focus-8);
-  }
+  outline: var(--focus-outline-width) solid var(--focus-8);
+  outline-offset: -1px;
   &:where([data-state='checked']) {
     &::before {
       background-image: linear-gradient(var(--focus-a3), var(--focus-a3));
     }
-    &::after {
-      outline-color: var(--focus-10);
-    }
+    outline-color: var(--focus-10);
   }
 }
 
@@ -207,7 +119,5 @@
   &::before {
     background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
   }
-  &::after {
-    outline-color: var(--gray-8);
-  }
+  outline-color: var(--gray-8);
 }

package/src/components/radio-cards.props.tsx

@@ -5,8 +5,8 @@ import { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
-const variants = ['surface', 'classic'] as const;
+const sizes = ['1', '2', '3', '4', '5'] as const;
+const variants = ['outline', 'classic', 'ghost', 'soft', 'surface'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const radioCardsRootPropDefs = {

package/src/components/radio-cards.tsx

@@ -10,7 +10,19 @@ import { useThemeContext } from './theme.js';
 
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
+import type { GetPropDefTypes, Responsive } from '../props/prop-def.js';
+
+type RadioCardsContextValue = {
+  size?: Responsive<(typeof radioCardsRootPropDefs.size.values)[number]>;
+  variant?: (typeof radioCardsRootPropDefs.variant.values)[number];
+};
+
+const RadioCardsContext = React.createContext<RadioCardsContextValue | undefined>(undefined);
+
+const useRadioCardsContext = () => {
+  const context = React.useContext(RadioCardsContext);
+  return context;
+};
 
 type RadioCardsRootElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;
 type RadioCardsRootOwnProps = GetPropDefTypes<typeof radioCardsRootPropDefs>;
@@ -32,15 +44,17 @@ const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootPro
       ...rootProps
     } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
     return (
-      <Grid asChild>
-        <RadioGroupPrimitive.Root
-          data-accent-color={color}
-          data-panel-background={panelBackground}
-          {...rootProps}
-          ref={forwardedRef}
-          className={classNames('rt-RadioCardsRoot', className)}
-        />
-      </Grid>
+      <RadioCardsContext.Provider value={{ size: props.size, variant: props.variant }}>
+        <Grid asChild>
+          <RadioGroupPrimitive.Root
+            data-accent-color={color}
+            data-panel-background={panelBackground}
+            {...rootProps}
+            ref={forwardedRef}
+            className={classNames('rt-RadioCardsRoot', className)}
+          />
+        </Grid>
+      </RadioCardsContext.Provider>
     );
   },
 );
@@ -51,14 +65,27 @@ interface RadioCardsItemProps
   extends ComponentPropsWithout<typeof RadioGroupPrimitive.Item, RemovedProps>,
     MarginProps {}
 const RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <RadioGroupPrimitive.Item
-      {...props}
-      asChild={false}
-      ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-BaseCard', 'rt-RadioCardsItem', className)}
-    />
-  ),
+  ({ className, ...props }, forwardedRef) => {
+    const context = useRadioCardsContext();
+    const variantClass = context?.variant ? `rt-variant-${context.variant}` : undefined;
+    const sizeClass = context?.size ? `rt-r-size-${context.size}` : undefined;
+
+    return (
+      <RadioGroupPrimitive.Item
+        {...props}
+        asChild={false}
+        ref={forwardedRef}
+        className={classNames(
+          'rt-reset',
+          'rt-BaseCard',
+          'rt-RadioCardsItem',
+          variantClass,
+          sizeClass,
+          className,
+        )}
+      />
+    );
+  },
 );
 RadioCardsItem.displayName = 'RadioCards.Item';
 

package/src/components/radio.tsx

@@ -26,18 +26,19 @@ interface RadioProps extends RadioInputProps, MarginProps, RadioOwnProps {}
 
 const Radio = React.forwardRef<RadioElement, RadioProps>((props, forwardedRef) => {
   const ref = React.useRef<RadioElement>(null);
-  const { className, color, onChange, onValueChange, ...radioProps } = extractProps(
+  const { className, color, material, onChange, onValueChange, ...radioProps } = extractProps(
     props,
     radioPropDefs,
-    marginPropDefs
+    marginPropDefs,
   );
   return (
     <input
       type="radio"
       data-accent-color={color}
+      data-material={material}
       {...radioProps}
       onChange={composeEventHandlers(onChange, (event) =>
-        onValueChange?.(event.currentTarget.value)
+        onValueChange?.(event.currentTarget.value),
       )}
       ref={composeRefs(ref, forwardedRef)}
       className={classNames('rt-reset', 'rt-BaseRadioRoot', 'rt-RadioRoot', className)}

package/src/components/scroll-area.css

@@ -39,7 +39,7 @@
 
 .rt-ScrollAreaViewport > * {
   display: block !important;
-  width: fit-content;
+  min-width: 0;
   flex-grow: 1;
 }
 

package/src/components/segmented-control.css

@@ -10,8 +10,6 @@
   grid-auto-columns: 1fr;
   align-items: stretch;
   color: var(--gray-12);
-  background-color: var(--color-surface);
-  background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
   position: relative;
   min-width: max-content;
 
@@ -22,26 +20,27 @@
   /* Create a new stacking context */
   isolation: isolate;
 
-  /* Theme-level translucent override */
-  :where([data-panel-background='translucent']) & {
-    background-color: var(--color-surface-translucent);
-    background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
-    backdrop-filter: var(--backdrop-filter-panel);
+  /* 
+   * 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 overrides (higher specificity) */
-  &:where([data-panel-background='solid']) {
-    background-color: var(--color-surface);
-    background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
+  /* 
+   * 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-panel: none;
+    --backdrop-filter-components: none;
   }
-
-  &:where([data-panel-background='translucent']) {
-    background-color: var(--color-surface-translucent);
-    background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
-    backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+  
+  &: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 */
@@ -158,10 +157,6 @@
 :where(.radix-themes) {
   --segmented-control-indicator-background-color: var(--color-background);
 }
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --segmented-control-indicator-background-color: var(--gray-a3);
-}
 
 .rt-SegmentedControlIndicator {
   display: none;
@@ -178,6 +173,7 @@
     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: '';
   }
 
@@ -263,8 +259,14 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-.rt-SegmentedControlItemLabel {
+.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);
@@ -273,7 +275,7 @@
 @breakpoints {
   .rt-SegmentedControlRoot {
     &:where(.rt-r-size-1) {
-      --segmented-control-border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-large)), var(--radius-full));
+      --segmented-control-border-radius: max(var(--radius-1), var(--radius-full));
       height: var(--space-5);
 
       & :where(.rt-SegmentedControlItemLabel) {
@@ -281,7 +283,14 @@
         letter-spacing: var(--letter-spacing-1);
         padding-left: var(--space-3);
         padding-right: var(--space-3);
-        gap: var(--space-1);
+        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) {
@@ -293,7 +302,14 @@
         letter-spacing: var(--letter-spacing-2);
         padding-left: var(--space-4);
         padding-right: var(--space-4);
-        gap: var(--space-2);
+        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) {
@@ -305,7 +321,33 @@
         letter-spacing: var(--letter-spacing-3);
         padding-left: var(--space-4);
         padding-right: var(--space-4);
-        gap: var(--space-3);
+        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));
+      height: var(--space-8);
+
+      & :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);
+        }
       }
     }
   }
@@ -313,48 +355,25 @@
 
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*         Variants / Surface          */
+/*         Variants / Soft             */
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-.rt-SegmentedControlRoot:where(.rt-variant-surface) {
-  & :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator) {
-    &::before {
-      box-shadow: 0 0 0 var(--border-width-standard) var(--gray-a4);
-    }
+.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%);
   }
-}
 
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*         Variants / Classic          */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    background-color: var(--gray-3);
+  }
 
-.rt-SegmentedControlRoot:where(.rt-variant-classic) {
-  & :where(.rt-SegmentedControlItem:not([disabled])) ~ :where(.rt-SegmentedControlIndicator) {
-    &::before {
-      /* Use the same elevated 3D effect as Button classic variant */
-      /* prettier-ignore */
-      box-shadow:
-        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
-        inset 0 var(--classic-border-width) var(--white-a12),
-        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
-        inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6),
-        0 0 0 var(--classic-border-width) var(--gray-a5),
-        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
-
-      :where(.dark, .dark-theme) &,
-      :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
-        /* prettier-ignore */
-        box-shadow:
-          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
-          inset 0 var(--classic-border-width) var(--gray-a11),
-          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
-          inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
-          0 0 0 var(--classic-border-width-thick) var(--gray-a7),
-          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
-      }
-    }
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   }
 }

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

@@ -2,13 +2,13 @@ import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
-const variants = ['surface', 'classic'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['soft'] 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: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
   panelBackground: {
     type: 'enum',
     className: 'rt-panel-background',