@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/radio-group.tsx

@@ -9,10 +9,8 @@ import { radioGroupRootPropDefs } from './radio-group.props.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 const RADIO_GROUP_NAME = 'RadioGroup';
@@ -35,7 +33,6 @@ interface RadioGroupRootProps
       typeof RadioGroupPrimitive.Root,
       'asChild' | 'color' | 'defaultChecked'
     >,
-    MarginProps,
     RadioGroupRootOwnProps {}
 const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootProps>(
   (
@@ -48,7 +45,7 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
     forwardedRef
   ) => {
     const size = useThemeSize(sizeProp, radioGroupRootPropDefs.size);
-    const { __scopeRadioGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
+    const { __scopeRadioGroup, className, ...rootProps } = props;
     const radioGroupScope = useRadioGroupScope(__scopeRadioGroup);
     return (
       <RadioGroupProvider
@@ -61,7 +58,7 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
           {...radioGroupScope}
           {...rootProps}
           ref={forwardedRef}
-          className={classNames('rt-RadioGroupRoot', className)}
+          className={classNames('kui-RadioGroupRoot', className)}
         />
       </RadioGroupProvider>
     );
@@ -71,8 +68,7 @@ RadioGroupRoot.displayName = 'RadioGroup.Root';
 
 type RadioGroupItemElement = React.ElementRef<typeof RadioGroupItemRadio>;
 interface RadioGroupItemProps
-  extends ComponentPropsWithout<typeof RadioGroupItemRadio, RemovedProps>,
-    MarginProps {}
+  extends ComponentPropsWithout<typeof RadioGroupItemRadio, RemovedProps> {}
 const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(
   (_props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {
     const { __scopeRadioGroup, children, className, style, ...props } = _props;
@@ -85,7 +81,7 @@ const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemPro
         <Text
           as="label"
           size={size}
-          className={classNames('rt-RadioGroupItem', className)}
+          className={classNames('kui-RadioGroupItem', className)}
           style={style}
         >
           <RadioGroupItemRadio
@@ -93,7 +89,7 @@ const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemPro
             {...props}
             ref={forwardedRef}
           />
-          {children && <span className="rt-RadioGroupItemInner">{children}</span>}
+          {children && <span className="kui-RadioGroupItemInner">{children}</span>}
         </Text>
       );
     }
@@ -122,8 +118,7 @@ const RadioGroupItemRadio = React.forwardRef<
   const radioGroupScope = useRadioGroupScope(__scopeRadioGroup);
   const { color, className } = extractProps(
     { ...props, ...context },
-    radioGroupRootPropDefs,
-    marginPropDefs
+    radioGroupRootPropDefs
   );
   return (
     <RadioGroupPrimitive.Item
@@ -132,7 +127,7 @@ const RadioGroupItemRadio = React.forwardRef<
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-BaseRadioRoot', className)}
+      className={classNames('kui-reset', 'kui-BaseRadioRoot', className)}
     />
   );
 });

package/src/components/radio.tsx

@@ -5,11 +5,9 @@ import classNames from 'classnames';
 import { composeEventHandlers } from 'radix-ui/internal';
 
 import { radioPropDefs } from './radio.props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { NotInputRadioAttributes } from '../helpers/input-attributes.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -23,14 +21,13 @@ type RadioInputProps = ComponentPropsWithout<
   'input',
   NotInputRadioAttributes | 'color' | 'defaultValue' | 'value'
 >;
-interface RadioProps extends RadioInputProps, MarginProps, RadioOwnProps {}
+interface RadioProps extends RadioInputProps, RadioOwnProps {}
 
 const Radio = React.forwardRef<RadioElement, RadioProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, radioPropDefs.size);
   const { className, color, onChange, onValueChange, ...radioProps } = extractProps(
     props,
     radioPropDefs,
-    marginPropDefs,
   );
   return (
     <input
@@ -41,7 +38,7 @@ const Radio = React.forwardRef<RadioElement, RadioProps>((ownProps, forwardedRef
         onValueChange?.(event.currentTarget.value),
       )}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-BaseRadioRoot', 'rt-RadioRoot', className)}
+      className={classNames('kui-reset', 'kui-BaseRadioRoot', 'kui-RadioRoot', className)}
     />
   );
 });

package/src/components/reset.css

@@ -2,7 +2,7 @@
 /* Disable selector-max-type rule to target individual element types. */
 /* Make sure these tags are wrapped in `:where()` for 0 specificity. */
 
-.rt-reset {
+.kui-reset {
   /* * * * * * * * * * * * * * * * * * * */
   /*                                     */
   /*              Margins                */

package/src/components/reset.tsx

@@ -10,7 +10,7 @@ interface ResetProps extends ComponentPropsWithout<typeof Slot.Root, RemovedProp
 const Reset = React.forwardRef<HTMLElement, ResetProps>(
   ({ className, children, ...props }, forwardedRef) => {
     return (
-      <Slot.Root {...props} ref={forwardedRef} className={classNames('rt-reset', className)}>
+      <Slot.Root {...props} ref={forwardedRef} className={classNames('kui-reset', className)}>
         {requireReactElement(children)}
       </Slot.Root>
     );

package/src/components/schemas/base-button.schema.ts

@@ -3,8 +3,8 @@ import { z } from 'zod';
 /**
  * BaseButton Zod schema - Single source of truth for all button component props
  *
- * This schema defines the core button functionality used by Button, IconButton,
- * ToggleButton, and ToggleIconButton components. It ensures consistency across
+ * This schema defines the core button functionality used by the Button and Toggle
+ * components. It ensures consistency across
  * the design system and provides machine-readable validation.
  *
  * @example
@@ -118,17 +118,6 @@ export const BaseButtonSchema = z
       .default(false)
       .describe('Loading state that shows a spinner and disables interaction'),
 
-    /**
-     * Flush mode that removes visual padding for seamless text integration
-     * Only effective with ghost variant
-     * @default false
-     */
-    flush: z
-      .boolean()
-      .optional()
-      .default(false)
-      .describe('Flush mode that removes visual padding for seamless text integration'),
-
     /**
      * Disabled state
      * @default false

package/src/components/schemas/button.schema.ts

@@ -28,7 +28,11 @@ import { BaseButtonSchema } from './base-button.schema.js';
  * });
  * ```
  */
-export const ButtonSchema = BaseButtonSchema.extend({
+/**
+ * Button's own fields, before the rules that span fields. Toggle extends this, since a
+ * refined schema cannot be extended.
+ */
+export const ButtonObjectSchema = BaseButtonSchema.extend({
   /**
    * Content to display in the tooltip on hover/focus
    */
@@ -88,6 +92,14 @@ export const ButtonSchema = BaseButtonSchema.extend({
     .describe('Whether to disable hoverable content behavior'),
 }).strict();
 
+export const ButtonSchema = ButtonObjectSchema.refine(
+  (data) => !data.iconOnly || Boolean(data['aria-label'] || data['aria-labelledby']),
+  {
+    message: "An iconOnly Button must have either 'aria-label' or 'aria-labelledby' for accessibility",
+    path: ['aria-label'],
+  },
+);
+
 /**
  * Type derived from Button Zod schema
  * This ensures type safety and consistency with the schema

package/src/components/schemas/index.ts

@@ -27,17 +27,9 @@ export type { BaseButtonProps } from './base-button.schema.js';
 export { ButtonSchema, parseButtonProps } from './button.schema.js';
 export type { ButtonProps } from './button.schema.js';
 
-// IconButton schemas
-export { IconButtonSchema, parseIconButtonProps } from './icon-button.schema.js';
-export type { IconButtonProps } from './icon-button.schema.js';
-
-// ToggleButton schemas
-export { ToggleButtonSchema, parseToggleButtonProps } from './toggle-button.schema.js';
-export type { ToggleButtonProps } from './toggle-button.schema.js';
-
-// ToggleIconButton schemas
-export { ToggleIconButtonSchema, parseToggleIconButtonProps } from './toggle-icon-button.schema.js';
-export type { ToggleIconButtonProps } from './toggle-icon-button.schema.js';
+// Toggle schemas
+export { ToggleSchema, parseToggleProps } from './toggle.schema.js';
+export type { ToggleProps } from './toggle.schema.js';
 
 // Shell schemas
 export {

package/src/components/schemas/toggle.schema.ts

@@ -0,0 +1,102 @@
+import { z } from 'zod';
+import { ButtonObjectSchema } from './button.schema.js';
+
+/**
+ * Toggle Zod schema - Single source of truth for Toggle component props
+ *
+ * Toggle is a Button that stays pressed, built on Radix UI's Toggle primitive. Set `iconOnly`
+ * for a square toggle holding only an icon; it then needs `aria-label` or `aria-labelledby`.
+ *
+ * @example
+ * ```tsx
+ * const props = ToggleSchema.parse({ defaultPressed: false, variant: 'outline' });
+ *
+ * const iconProps = ToggleSchema.parse({ iconOnly: true, 'aria-label': 'Bold' });
+ * ```
+ */
+export const ToggleSchema = ButtonObjectSchema.extend({
+  /**
+   * Controlled pressed state
+   * When provided, the component is controlled and the pressed state is managed externally
+   */
+  pressed: z.boolean().optional().describe('Controlled pressed state'),
+
+  /**
+   * Callback when pressed state changes
+   * Called with the new pressed state when the toggle is activated
+   */
+  onPressedChange: z.function().optional().describe('Callback when pressed state changes'),
+
+  /**
+   * Default pressed state for uncontrolled usage
+   * Used as the initial pressed state when the component is uncontrolled
+   */
+  defaultPressed: z.boolean().optional().describe('Default pressed state for uncontrolled usage'),
+})
+  .refine((data) => !data.iconOnly || Boolean(data['aria-label'] || data['aria-labelledby']), {
+    message: "An iconOnly Toggle must have either 'aria-label' or 'aria-labelledby' for accessibility",
+    path: ['aria-label'],
+  })
+  .refine(
+    (data) => {
+      // If pressed is provided, onPressedChange should also be provided for controlled usage
+      if (data.pressed !== undefined && data.onPressedChange === undefined) {
+        return false;
+      }
+      return true;
+    },
+    {
+      message: 'When using controlled mode (pressed prop), onPressedChange must also be provided',
+      path: ['onPressedChange'],
+    },
+  )
+  .refine(
+    (data) => {
+      // Cannot have both controlled and uncontrolled props
+      if (data.pressed !== undefined && data.defaultPressed !== undefined) {
+        return false;
+      }
+      return true;
+    },
+    {
+      message:
+        'Cannot use both controlled (pressed) and uncontrolled (defaultPressed) props together',
+      path: ['pressed', 'defaultPressed'],
+    },
+  );
+
+/**
+ * Type derived from Toggle Zod schema
+ * This ensures type safety and consistency with the schema
+ */
+export type ToggleProps = z.infer<typeof ToggleSchema>;
+
+/**
+ * Development-only helper to validate and normalize Toggle props
+ * This function should only be used in development mode
+ *
+ * @param props - Props to validate and normalize
+ * @returns Validated and normalized props
+ *
+ * @example
+ * ```tsx
+ * // In development, this will validate props and show helpful errors
+ * const invalidProps = parseToggleProps({
+ *   pressed: true,
+ *   defaultPressed: false
+ *   // Missing onPressedChange and conflicting controlled/uncontrolled
+ * });
+ * // Throws: "Cannot use both controlled (pressed) and uncontrolled (defaultPressed) props together"
+ *
+ * const validProps = parseToggleProps({
+ *   pressed: true,
+ *   onPressedChange: (pressed) => setPressed(pressed)
+ * });
+ * ```
+ */
+export function parseToggleProps(props: unknown): ToggleProps {
+  if (process.env.NODE_ENV === 'development') {
+    return ToggleSchema.parse(props);
+  }
+  return props as ToggleProps;
+}

package/src/components/scroll-area.css

@@ -1,4 +1,4 @@
-.radix-themes {
+.kui-theme {
   --scrollarea-scrollbar-horizontal-margin-top: var(--space-2);
   --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-2);
   --scrollarea-scrollbar-horizontal-margin-left: var(--space-2);
@@ -11,7 +11,7 @@
   --scrollarea-scrollbar-border-radius: var(--radius-control-1);
 }
 
-.rt-ScrollAreaRoot {
+.kui-ScrollAreaRoot {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -19,7 +19,7 @@
   height: 100%;
 }
 
-.rt-ScrollAreaViewport {
+.kui-ScrollAreaViewport {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -27,7 +27,7 @@
   /* iOS momentum scrolling */
   -webkit-overflow-scrolling: touch;
 
-  &:where(:focus-visible) + :where(.rt-ScrollAreaViewportFocusRing) {
+  &:where(:focus-visible) + :where(.kui-ScrollAreaViewportFocusRing) {
     position: absolute;
     inset: 0;
     pointer-events: none;
@@ -36,18 +36,18 @@
   }
 
   /* Stop Chrome back/forward two-finger swipe when there is a horizontal scrollbar */
-  &:where(:has(.rt-ScrollAreaScrollbar[data-orientation='horizontal'])) {
+  &:where(:has(.kui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
     overscroll-behavior-x: contain;
   }
 }
 
-.rt-ScrollAreaViewport > * {
+.kui-ScrollAreaViewport > * {
   display: block !important;
   min-width: 0;
   flex-grow: 1;
 }
 
-.rt-ScrollAreaScrollbar {
+.kui-ScrollAreaScrollbar {
   display: flex;
   /* Ensures no selection */
   user-select: none;
@@ -64,7 +64,7 @@
   }
 }
 
-.rt-ScrollAreaThumb {
+.kui-ScrollAreaThumb {
   position: relative;
 
   &::before {
@@ -86,7 +86,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-ScrollAreaScrollbar {
+.kui-ScrollAreaScrollbar {
   border-radius: var(--scrollarea-scrollbar-border-radius);
   &:where([data-orientation='horizontal']) {
     margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
@@ -102,13 +102,13 @@
   }
 }
 
-.rt-ScrollAreaThumb {
-  background-color: var(--gray-a6);
+.kui-ScrollAreaThumb {
+  background-color: var(--neutral-a6);
   border-radius: inherit;
 
   @media (hover: hover) {
     &:where(:hover) {
-      background-color: var(--gray-a8);
+      background-color: var(--neutral-a8);
     }
   }
 }
@@ -132,8 +132,8 @@
  * Shared by ScrollArea (on its viewport) and MessageScroller (on its viewport). Scrollbars are
  * siblings of the viewport, outside the mask, so the thumb stays crisp.
  */
-:where(.rt-ScrollAreaRoot[data-fade]) > .rt-ScrollAreaViewport,
-.rt-MessageScrollerViewport:where([data-fade]) {
+:where(.kui-ScrollAreaRoot[data-fade]) > .kui-ScrollAreaViewport,
+.kui-MessageScrollerViewport:where([data-fade]) {
   mask-image: linear-gradient(
     to bottom,
     transparent 0%,
@@ -144,7 +144,7 @@
 }
 
 :root,
-.radix-themes {
+.kui-theme {
   --scroll-fade-size: var(--space-7);
 }
 
@@ -152,7 +152,7 @@
  * A band is above the scroller it floats over and above nothing else. The reach hooks inherit,
  * so a scroller nested inside another takes the designed length, not its ancestor's band.
  */
-:where(.rt-ScrollAreaViewport, .rt-MessageScrollerViewport) :where(.rt-ScrollAreaRoot, .rt-MessageScrollerViewport) {
+:where(.kui-ScrollAreaViewport, .kui-MessageScrollerViewport) :where(.kui-ScrollAreaRoot, .kui-MessageScrollerViewport) {
   --scroll-fade-start: initial;
   --scroll-fade-end: initial;
 }

package/src/components/scroll-area.tsx

@@ -6,13 +6,9 @@ import { useComposedRefs } from 'radix-ui/internal';
 import { scrollAreaPropDefs } from './scroll-area.props.js';
 import { useScrollEdges } from '../hooks/use-scroll-edges.js';
 import { useThumbSync } from '../hooks/use-thumb-sync.js';
-import { extractMarginProps } from '../helpers/extract-margin-props.js';
-import { getMarginStyles } from '../helpers/get-margin-styles.js';
 import { getSubtree } from '../helpers/get-subtree.js';
-import { mergeStyles } from '../helpers/merge-styles.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Viewport>;
@@ -20,12 +16,8 @@ type ScrollAreaOwnProps = GetPropDefTypes<typeof scrollAreaPropDefs>;
 interface ScrollAreaProps
   extends ComponentPropsWithout<typeof ScrollAreaPrimitive.Root, RemovedProps>,
     ComponentPropsWithout<typeof ScrollAreaPrimitive.Viewport, RemovedProps | 'dir'>,
-    MarginProps,
     ScrollAreaOwnProps {}
 const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props, forwardedRef) => {
-  const { rest: marginRest, ...marginProps } = extractMarginProps(props);
-  const [marginClassNames, marginCustomProperties] = getMarginStyles(marginProps);
-
   const {
     asChild,
     children,
@@ -38,7 +30,7 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     scrollbars = scrollAreaPropDefs.scrollbars.default,
     fade = scrollAreaPropDefs.fade.default,
     ...viewportProps
-  } = marginRest;
+  } = props;
   const setEdgesElement = useScrollEdges<HTMLDivElement>(fade);
   const setThumbViewport = useThumbSync<HTMLDivElement>();
   const viewportRef = useComposedRefs(forwardedRef, setEdgesElement, setThumbViewport);
@@ -47,9 +39,9 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     <ScrollAreaPrimitive.Root
       type={type}
       scrollHideDelay={scrollHideDelay}
-      className={classNames('rt-ScrollAreaRoot', marginClassNames, className)}
+      className={classNames('kui-ScrollAreaRoot', className)}
       data-fade={fade ? '' : undefined}
-      style={mergeStyles(marginCustomProperties, style)}
+      style={style}
       asChild={asChild}
     >
       {getSubtree({ asChild, children }, (children) => (
@@ -57,20 +49,20 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
           <ScrollAreaPrimitive.Viewport
             {...viewportProps}
             ref={viewportRef}
-            className="rt-ScrollAreaViewport"
+            className="kui-ScrollAreaViewport"
           >
             {children}
           </ScrollAreaPrimitive.Viewport>
 
-          <div className="rt-ScrollAreaViewportFocusRing" />
+          <div className="kui-ScrollAreaViewportFocusRing" />
 
           {scrollbars !== 'vertical' ? (
             <ScrollAreaPrimitive.Scrollbar
               data-radius={radius}
               orientation="horizontal"
-              className="rt-ScrollAreaScrollbar"
+              className="kui-ScrollAreaScrollbar"
             >
-              <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
+              <ScrollAreaPrimitive.Thumb className="kui-ScrollAreaThumb" />
             </ScrollAreaPrimitive.Scrollbar>
           ) : null}
 
@@ -78,14 +70,14 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
             <ScrollAreaPrimitive.Scrollbar
               data-radius={radius}
               orientation="vertical"
-              className="rt-ScrollAreaScrollbar"
+              className="kui-ScrollAreaScrollbar"
             >
-              <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
+              <ScrollAreaPrimitive.Thumb className="kui-ScrollAreaThumb" />
             </ScrollAreaPrimitive.Scrollbar>
           ) : null}
 
           {scrollbars === 'both' ? (
-            <ScrollAreaPrimitive.Corner className="rt-ScrollAreaCorner" />
+            <ScrollAreaPrimitive.Corner className="kui-ScrollAreaCorner" />
           ) : null}
         </>
       ))}