@brijbyte/agentic-ui 0.0.4 → 0.0.5

package/src/popover/parts.tsx

@@ -1,10 +1,6 @@
 /**
  * Styled primitives for Popover.
  *
- * Use these when you need full control over the popover's behaviour
- * (controlled state, custom positioning, anchor overrides) while keeping
- * all agentic-ui styles applied.
- *
  * @example
  * ```tsx
  * import { Popover } from '@base-ui/react/popover';
@@ -36,6 +32,7 @@ import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import styles from "./popover.module.css";
 import { PopupArrow } from "../shared/PopupArrow";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BasePositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;
 type BasePopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;
@@ -45,52 +42,40 @@ type BaseCloseProps = ComponentPropsWithoutRef<typeof BasePopover.Close>;
 type BaseArrowProps = ComponentPropsWithoutRef<typeof BasePopover.Arrow>;
 type BaseViewportProps = ComponentPropsWithoutRef<typeof BasePopover.Viewport>;
 
-export interface PopoverPositionerProps extends Omit<BasePositionerProps, "className"> {
-  className?: string;
-}
-export interface PopoverPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-export interface PopoverTitleProps extends Omit<BaseTitleProps, "className"> {
-  className?: string;
-}
-export interface PopoverDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
-  className?: string;
-}
-export interface PopoverCloseProps extends Omit<BaseCloseProps, "className"> {
-  className?: string;
-}
-export interface PopoverArrowProps extends Omit<BaseArrowProps, "className"> {
-  className?: string;
-}
-export interface PopoverViewportProps extends Omit<BaseViewportProps, "className"> {
-  className?: string;
-}
+export interface PopoverPositionerProps extends BasePositionerProps {}
+export interface PopoverPopupProps extends BasePopupProps {}
+export interface PopoverTitleProps extends BaseTitleProps {}
+export interface PopoverDescriptionProps extends BaseDescriptionProps {}
+export interface PopoverCloseProps extends BaseCloseProps {}
+export interface PopoverArrowProps extends BaseArrowProps {}
+export interface PopoverViewportProps extends BaseViewportProps {}
 
 export const PopoverPositioner = forwardRef<ComponentRef<typeof BasePopover.Positioner>, PopoverPositionerProps>(function PopoverPositioner(
   { className, ...props },
   ref,
 ) {
-  return <BasePopover.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} {...props} />;
+  return <BasePopover.Positioner ref={ref} className={(state) => cx(styles.positioner, resolveClassName(className, state))} {...props} />;
 });
 
 export const PopoverPopup = forwardRef<ComponentRef<typeof BasePopover.Popup>, PopoverPopupProps>(function PopoverPopup(
   { className, ...props },
   ref,
 ) {
-  return <BasePopover.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+  return <BasePopover.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;
 });
 
 export const PopoverTitle = forwardRef<ComponentRef<typeof BasePopover.Title>, PopoverTitleProps>(function PopoverTitle(
   { className, ...props },
   ref,
 ) {
-  return <BasePopover.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+  return <BasePopover.Title ref={ref} className={(state) => cx(styles.title, resolveClassName(className, state))} {...props} />;
 });
 
 export const PopoverDescription = forwardRef<ComponentRef<typeof BasePopover.Description>, PopoverDescriptionProps>(
   function PopoverDescription({ className, ...props }, ref) {
-    return <BasePopover.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+    return (
+      <BasePopover.Description ref={ref} className={(state) => cx(styles.description, resolveClassName(className, state))} {...props} />
+    );
   },
 );
 
@@ -98,14 +83,14 @@ export const PopoverClose = forwardRef<ComponentRef<typeof BasePopover.Close>, P
   { className, ...props },
   ref,
 ) {
-  return <BasePopover.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+  return <BasePopover.Close ref={ref} className={(state) => cx(styles.close, resolveClassName(className, state))} {...props} />;
 });
 
 export const PopoverViewport = forwardRef<ComponentRef<typeof BasePopover.Viewport>, PopoverViewportProps>(function PopoverViewport(
   { className, ...props },
   ref,
 ) {
-  return <BasePopover.Viewport ref={ref} className={`${styles.viewport} ${className ?? ""}`} {...props} />;
+  return <BasePopover.Viewport ref={ref} className={(state) => cx(styles.viewport, resolveClassName(className, state))} {...props} />;
 });
 
 export const PopoverArrow = forwardRef<ComponentRef<typeof BasePopover.Arrow>, PopoverArrowProps>(function PopoverArrow(
@@ -113,7 +98,7 @@ export const PopoverArrow = forwardRef<ComponentRef<typeof BasePopover.Arrow>, P
   ref,
 ) {
   return (
-    <BasePopover.Arrow ref={ref} className={`${styles.arrow} ${className ?? ""}`} {...props}>
+    <BasePopover.Arrow ref={ref} className={(state) => cx(styles.arrow, resolveClassName(className, state))} {...props}>
       {children ?? <PopupArrow fillClass={styles["arrow-fill"]!} seamClass={styles["arrow-seam"]!} />}
     </BasePopover.Arrow>
   );

package/src/progress/parts.tsx

@@ -17,16 +17,15 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Progress as BaseProgress } from "@base-ui/react/progress";
 import styles from "./progress.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseTrackProps = ComponentPropsWithoutRef<typeof BaseProgress.Track>;
 type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseProgress.Indicator>;
 
-export interface ProgressTrackProps extends Omit<BaseTrackProps, "className"> {
-  className?: string;
+export interface ProgressTrackProps extends BaseTrackProps {
   size?: "sm" | "md" | "lg";
 }
-export interface ProgressIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
-  className?: string;
+export interface ProgressIndicatorProps extends BaseIndicatorProps {
   status?: "default" | "success" | "warning" | "error";
 }
 
@@ -34,7 +33,13 @@ export const ProgressTrack = forwardRef<ComponentRef<typeof BaseProgress.Track>,
   { className, size = "md", ...props },
   ref,
 ) {
-  return <BaseProgress.Track ref={ref} className={`${styles.track} ${styles[`track-${size}`]} ${className ?? ""}`} {...props} />;
+  return (
+    <BaseProgress.Track
+      ref={ref}
+      className={(state) => cx(styles.track, styles[`track-${size}`], resolveClassName(className, state))}
+      {...props}
+    />
+  );
 });
 
 export const ProgressIndicator = forwardRef<ComponentRef<typeof BaseProgress.Indicator>, ProgressIndicatorProps>(function ProgressIndicator(
@@ -44,7 +49,9 @@ export const ProgressIndicator = forwardRef<ComponentRef<typeof BaseProgress.Ind
   return (
     <BaseProgress.Indicator
       ref={ref}
-      className={[styles.indicator, status !== "default" ? styles[`indicator-${status}`] : "", className ?? ""].filter(Boolean).join(" ")}
+      className={(state) =>
+        cx(styles.indicator, status !== "default" ? styles[`indicator-${status}`] : undefined, resolveClassName(className, state))
+      }
       {...props}
     />
   );

package/src/radio/parts.tsx

@@ -20,24 +20,23 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Radio as BaseRadio } from "@base-ui/react/radio";
 import styles from "./radio.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseRootProps = ComponentPropsWithoutRef<typeof BaseRadio.Root>;
 type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseRadio.Indicator>;
 
-export interface RadioRootProps extends Omit<BaseRootProps, "className"> {
-  className?: string;
-}
-export interface RadioIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
-  className?: string;
-}
+export interface RadioRootProps extends BaseRootProps {}
+export interface RadioIndicatorProps extends BaseIndicatorProps {}
 
 export const RadioRoot = forwardRef<ComponentRef<typeof BaseRadio.Root>, RadioRootProps>(function RadioRoot({ className, ...props }, ref) {
-  return <BaseRadio.Root ref={ref} className={`${styles.radio} ${className ?? ""}`} {...props} />;
+  return <BaseRadio.Root ref={ref} className={(state) => cx(styles.radio, resolveClassName(className, state))} {...props} />;
 });
 
 export const RadioIndicator = forwardRef<ComponentRef<typeof BaseRadio.Indicator>, RadioIndicatorProps>(function RadioIndicator(
   { className, ...props },
   ref,
 ) {
-  return <BaseRadio.Indicator ref={ref} keepMounted className={`${styles.indicator} ${className ?? ""}`} {...props} />;
+  return (
+    <BaseRadio.Indicator ref={ref} keepMounted className={(state) => cx(styles.indicator, resolveClassName(className, state))} {...props} />
+  );
 });

package/src/radio-group/parts.tsx

@@ -17,16 +17,15 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import styles from "./radio-group.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseGroupProps = ComponentPropsWithoutRef<typeof BaseRadioGroup>;
 
-export interface RadioGroupRootProps extends Omit<BaseGroupProps, "className"> {
-  className?: string;
-}
+export interface RadioGroupRootProps extends BaseGroupProps {}
 
 export const RadioGroupRoot = forwardRef<ComponentRef<typeof BaseRadioGroup>, RadioGroupRootProps>(function RadioGroupRoot(
   { className, ...props },
   ref,
 ) {
-  return <BaseRadioGroup ref={ref} className={`${styles.group} ${className ?? ""}`} {...props} />;
+  return <BaseRadioGroup ref={ref} className={(state) => cx(styles.group, resolveClassName(className, state))} {...props} />;
 });

package/src/select/parts.tsx

@@ -33,6 +33,7 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef, ReactNode } from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import styles from "./select.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;
 type BaseValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;
@@ -46,41 +47,20 @@ type BaseGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;
 type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;
 type BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseSelect.Separator>;
 
-export interface SelectTriggerProps extends Omit<BaseTriggerProps, "className"> {
-  className?: string;
-}
-export interface SelectValueProps extends Omit<BaseValueProps, "className"> {
-  className?: string;
-}
-export interface SelectPositionerProps extends Omit<BasePositionerProps, "className"> {
-  className?: string;
-}
-export interface SelectPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-export interface SelectListProps extends Omit<BaseListProps, "className"> {
-  className?: string;
-}
-export interface SelectItemProps extends Omit<BaseItemProps, "className"> {
-  className?: string;
-}
-export interface SelectItemTextProps extends Omit<BaseItemTextProps, "className"> {
-  className?: string;
-}
-export interface SelectItemIndicatorProps extends Omit<BaseItemIndicatorProps, "className"> {
-  className?: string;
+export interface SelectTriggerProps extends BaseTriggerProps {}
+export interface SelectValueProps extends BaseValueProps {}
+export interface SelectPositionerProps extends BasePositionerProps {}
+export interface SelectPopupProps extends BasePopupProps {}
+export interface SelectListProps extends BaseListProps {}
+export interface SelectItemProps extends BaseItemProps {}
+export interface SelectItemTextProps extends BaseItemTextProps {}
+export interface SelectItemIndicatorProps extends BaseItemIndicatorProps {
   /** Custom icon. Defaults to a checkmark SVG. */
   children?: ReactNode;
 }
-export interface SelectGroupProps extends Omit<BaseGroupProps, "className"> {
-  className?: string;
-}
-export interface SelectGroupLabelProps extends Omit<BaseGroupLabelProps, "className"> {
-  className?: string;
-}
-export interface SelectSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
-  className?: string;
-}
+export interface SelectGroupProps extends BaseGroupProps {}
+export interface SelectGroupLabelProps extends BaseGroupLabelProps {}
+export interface SelectSeparatorProps extends BaseSeparatorProps {}
 
 function DefaultCheckIcon() {
   return (
@@ -94,42 +74,49 @@ export const SelectTrigger = forwardRef<ComponentRef<typeof BaseSelect.Trigger>,
   { className, ...props },
   ref,
 ) {
-  return <BaseSelect.Trigger ref={ref} className={`${styles.trigger} ${className ?? ""}`} {...props} />;
+  return <BaseSelect.Trigger ref={ref} className={(state) => cx(styles.trigger, resolveClassName(className, state))} {...props} />;
 });
 
 export const SelectValue = forwardRef<ComponentRef<typeof BaseSelect.Value>, SelectValueProps>(function SelectValue(
   { className, ...props },
   ref,
 ) {
-  return <BaseSelect.Value ref={ref} className={`${styles["trigger-value"]} ${className ?? ""}`} {...props} />;
+  return <BaseSelect.Value ref={ref} className={(state) => cx(styles["trigger-value"], resolveClassName(className, state))} {...props} />;
 });
 
 export const SelectPositioner = forwardRef<ComponentRef<typeof BaseSelect.Positioner>, SelectPositionerProps>(function SelectPositioner(
   { className, sideOffset = 4, ...props },
   ref,
 ) {
-  return <BaseSelect.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} sideOffset={sideOffset} {...props} />;
+  return (
+    <BaseSelect.Positioner
+      ref={ref}
+      className={(state) => cx(styles.positioner, resolveClassName(className, state))}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
 });
 
 export const SelectPopup = forwardRef<ComponentRef<typeof BaseSelect.Popup>, SelectPopupProps>(function SelectPopup(
   { className, ...props },
   ref,
 ) {
-  return <BaseSelect.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+  return <BaseSelect.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;
 });
 
 export const SelectList = forwardRef<ComponentRef<typeof BaseSelect.List>, SelectListProps>(function SelectList(
   { className, ...props },
   ref,
 ) {
-  return <BaseSelect.List ref={ref} className={`${styles.list ?? ""} ${className ?? ""}`} {...props} />;
+  return <BaseSelect.List ref={ref} className={(state) => cx(styles.list ?? "", resolveClassName(className, state))} {...props} />;
 });
 
 export const SelectItem = forwardRef<ComponentRef<typeof BaseSelect.Item>, SelectItemProps>(function SelectItem(
   { className, ...props },
   ref,
 ) {
-  return <BaseSelect.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...props} />;
+  return <BaseSelect.Item ref={ref} className={(state) => cx(styles.item, resolveClassName(className, state))} {...props} />;
 });
 
 export const SelectItemText = forwardRef<ComponentRef<typeof BaseSelect.ItemText>, SelectItemTextProps>(function SelectItemText(
@@ -142,7 +129,11 @@ export const SelectItemText = forwardRef<ComponentRef<typeof BaseSelect.ItemText
 export const SelectItemIndicator = forwardRef<ComponentRef<typeof BaseSelect.ItemIndicator>, SelectItemIndicatorProps>(
   function SelectItemIndicator({ className, children, ...props }, ref) {
     return (
-      <BaseSelect.ItemIndicator ref={ref} className={`${styles["item-indicator"]} ${className ?? ""}`} {...props}>
+      <BaseSelect.ItemIndicator
+        ref={ref}
+        className={(state) => cx(styles["item-indicator"], resolveClassName(className, state))}
+        {...props}
+      >
         {children ?? <DefaultCheckIcon />}
       </BaseSelect.ItemIndicator>
     );
@@ -160,12 +151,14 @@ export const SelectGroupLabel = forwardRef<ComponentRef<typeof BaseSelect.GroupL
   { className, ...props },
   ref,
 ) {
-  return <BaseSelect.GroupLabel ref={ref} className={`${styles["group-label"]} ${className ?? ""}`} {...props} />;
+  return (
+    <BaseSelect.GroupLabel ref={ref} className={(state) => cx(styles["group-label"], resolveClassName(className, state))} {...props} />
+  );
 });
 
 export const SelectSeparator = forwardRef<ComponentRef<typeof BaseSelect.Separator>, SelectSeparatorProps>(function SelectSeparator(
   { className, ...props },
   ref,
 ) {
-  return <BaseSelect.Separator ref={ref} className={`${styles.separator} ${className ?? ""}`} {...props} />;
+  return <BaseSelect.Separator ref={ref} className={(state) => cx(styles.separator, resolveClassName(className, state))} {...props} />;
 });

package/src/slider/parts.tsx

@@ -20,6 +20,7 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Slider as BaseSlider } from "@base-ui/react/slider";
 import styles from "./slider.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseControlProps = ComponentPropsWithoutRef<typeof BaseSlider.Control>;
 type BaseTrackProps = ComponentPropsWithoutRef<typeof BaseSlider.Track>;
@@ -28,63 +29,51 @@ type BaseThumbProps = ComponentPropsWithoutRef<typeof BaseSlider.Thumb>;
 type BaseLabelProps = ComponentPropsWithoutRef<typeof BaseSlider.Label>;
 type BaseValueProps = ComponentPropsWithoutRef<typeof BaseSlider.Value>;
 
-export interface SliderControlProps extends Omit<BaseControlProps, "className"> {
-  className?: string;
-}
-export interface SliderTrackProps extends Omit<BaseTrackProps, "className"> {
-  className?: string;
-}
-export interface SliderIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
-  className?: string;
-}
-export interface SliderThumbProps extends Omit<BaseThumbProps, "className"> {
-  className?: string;
-}
-export interface SliderLabelProps extends Omit<BaseLabelProps, "className"> {
-  className?: string;
-}
-export interface SliderValueProps extends Omit<BaseValueProps, "className"> {
-  className?: string;
-}
+export interface SliderControlProps extends BaseControlProps {}
+export interface SliderTrackProps extends BaseTrackProps {}
+export interface SliderIndicatorProps extends BaseIndicatorProps {}
+export interface SliderThumbProps extends BaseThumbProps {}
+export interface SliderLabelProps extends BaseLabelProps {}
+export interface SliderValueProps extends BaseValueProps {}
 
 export const SliderControl = forwardRef<ComponentRef<typeof BaseSlider.Control>, SliderControlProps>(function SliderControl(
   { className, ...props },
   ref,
 ) {
-  return <BaseSlider.Control ref={ref} className={`${styles.control} ${className ?? ""}`} {...props} />;
+  return <BaseSlider.Control ref={ref} className={(state) => cx(styles.control, resolveClassName(className, state))} {...props} />;
 });
 
 export const SliderTrack = forwardRef<ComponentRef<typeof BaseSlider.Track>, SliderTrackProps>(function SliderTrack(
   { className, ...props },
   ref,
 ) {
-  return <BaseSlider.Track ref={ref} className={`${styles.track} ${className ?? ""}`} {...props} />;
+  return <BaseSlider.Track ref={ref} className={(state) => cx(styles.track, resolveClassName(className, state))} {...props} />;
 });
 
 export const SliderIndicator = forwardRef<ComponentRef<typeof BaseSlider.Indicator>, SliderIndicatorProps>(function SliderIndicator(
   { className, ...props },
   ref,
 ) {
-  return <BaseSlider.Indicator ref={ref} className={`${styles.indicator} ${className ?? ""}`} {...props} />;
+  return <BaseSlider.Indicator ref={ref} className={(state) => cx(styles.indicator, resolveClassName(className, state))} {...props} />;
 });
 
 export const SliderThumb = forwardRef<ComponentRef<typeof BaseSlider.Thumb>, SliderThumbProps>(function SliderThumb(
   { className, ...props },
   ref,
 ) {
-  return <BaseSlider.Thumb ref={ref} className={`${styles.thumb} ${className ?? ""}`} {...props} />;
+  return <BaseSlider.Thumb ref={ref} className={(state) => cx(styles.thumb, resolveClassName(className, state))} {...props} />;
 });
 
 export const SliderLabel = forwardRef<ComponentRef<typeof BaseSlider.Label>, SliderLabelProps>(function SliderLabel(
   { className, ...props },
   ref,
 ) {
-  return <BaseSlider.Label ref={ref} className={`${styles.label} ${className ?? ""}`} {...props} />;
+  return <BaseSlider.Label ref={ref} className={(state) => cx(styles.label, resolveClassName(className, state))} {...props} />;
 });
 
 export const SliderValue = forwardRef<ComponentRef<typeof BaseSlider.Value>, SliderValueProps>(function SliderValue(
   { className, ...props },
   ref,
 ) {
-  return <BaseSlider.Value ref={ref} className={`${styles.value} ${className ?? ""}`} {...props} />;
+  return <BaseSlider.Value ref={ref} className={(state) => cx(styles.value, resolveClassName(className, state))} {...props} />;
 });

package/src/styles/reset-scoped.css

@@ -0,0 +1,112 @@
+/**
+ * @brijbyte/agentic-ui — Scoped reset
+ *
+ * A class-anchored mirror of reset.css for use in sandboxed environments
+ * (e.g. documentation demo canvases) where you want the same baseline as
+ * a real app that imports reset.css — without touching html/body globally.
+ *
+ * Usage:
+ *   @import "@brijbyte/agentic-ui/reset-scoped";
+ *
+ *   <div class="agentic-reset">
+ *     <!-- your component demo here -->
+ *   </div>
+ *
+ * Rules are kept in exact 1-to-1 correspondence with reset.css.
+ * html  → .agentic-reset
+ * body  → .agentic-reset
+ * Keep both files in sync when either changes.
+ */
+
+@layer base {
+  .agentic-reset,
+  .agentic-reset *,
+  .agentic-reset *::before,
+  .agentic-reset *::after {
+    box-sizing: border-box;
+  }
+
+  .agentic-reset * {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* html rules → applied to the root of the scoped subtree */
+  .agentic-reset {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    tab-size: 2;
+  }
+
+  /* body rules → same root */
+  .agentic-reset {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-normal);
+    color: var(--color-primary);
+    background-color: var(--color-canvas);
+  }
+
+  .agentic-reset img,
+  .agentic-reset picture,
+  .agentic-reset video,
+  .agentic-reset canvas,
+  .agentic-reset svg {
+    display: block;
+    max-width: 100%;
+  }
+
+  .agentic-reset input,
+  .agentic-reset button,
+  .agentic-reset textarea,
+  .agentic-reset select {
+    font: inherit;
+  }
+
+  .agentic-reset * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .agentic-reset p,
+  .agentic-reset h1,
+  .agentic-reset h2,
+  .agentic-reset h3,
+  .agentic-reset h4,
+  .agentic-reset h5,
+  .agentic-reset h6 {
+    overflow-wrap: break-word;
+  }
+
+  .agentic-reset h1,
+  .agentic-reset h2,
+  .agentic-reset h3,
+  .agentic-reset h4,
+  .agentic-reset h5,
+  .agentic-reset h6 {
+    font-family: var(--font-display);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+    color: var(--color-primary);
+  }
+
+  .agentic-reset * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-thumb) var(--color-track);
+  }
+
+  .agentic-reset *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .agentic-reset *::-webkit-scrollbar-thumb {
+    background: var(--color-thumb);
+    border-radius: var(--radius-full);
+  }
+
+  .agentic-reset *::-webkit-scrollbar-track {
+    background: var(--color-track);
+  }
+}

package/src/switch/parts.tsx

@@ -18,27 +18,24 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Switch as BaseSwitch } from "@base-ui/react/switch";
 import styles from "./switch.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseRootProps = ComponentPropsWithoutRef<typeof BaseSwitch.Root>;
 type BaseThumbProps = ComponentPropsWithoutRef<typeof BaseSwitch.Thumb>;
 
-export interface SwitchRootProps extends Omit<BaseRootProps, "className"> {
-  className?: string;
-}
-export interface SwitchThumbProps extends Omit<BaseThumbProps, "className"> {
-  className?: string;
-}
+export interface SwitchRootProps extends BaseRootProps {}
+export interface SwitchThumbProps extends BaseThumbProps {}
 
 export const SwitchRoot = forwardRef<ComponentRef<typeof BaseSwitch.Root>, SwitchRootProps>(function SwitchRoot(
   { className, ...props },
   ref,
 ) {
-  return <BaseSwitch.Root ref={ref} className={`${styles["thumb-track"]} ${className ?? ""}`} {...props} />;
+  return <BaseSwitch.Root ref={ref} className={(state) => cx(styles["thumb-track"], resolveClassName(className, state))} {...props} />;
 });
 
 export const SwitchThumb = forwardRef<ComponentRef<typeof BaseSwitch.Thumb>, SwitchThumbProps>(function SwitchThumb(
   { className, ...props },
   ref,
 ) {
-  return <BaseSwitch.Thumb ref={ref} className={`${styles.thumb} ${className ?? ""}`} {...props} />;
+  return <BaseSwitch.Thumb ref={ref} className={(state) => cx(styles.thumb, resolveClassName(className, state))} {...props} />;
 });

package/src/tabs/parts.tsx

@@ -20,29 +20,24 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import styles from "./tabs.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseListProps = ComponentPropsWithoutRef<typeof BaseTabs.List>;
 type BaseTabProps = ComponentPropsWithoutRef<typeof BaseTabs.Tab>;
 type BasePanelProps = ComponentPropsWithoutRef<typeof BaseTabs.Panel>;
 
-export interface TabsListProps extends Omit<BaseListProps, "className"> {
-  className?: string;
-}
-export interface TabsTabProps extends Omit<BaseTabProps, "className"> {
-  className?: string;
-}
-export interface TabsPanelProps extends Omit<BasePanelProps, "className"> {
-  className?: string;
-}
+export interface TabsListProps extends BaseListProps {}
+export interface TabsTabProps extends BaseTabProps {}
+export interface TabsPanelProps extends BasePanelProps {}
 
 export const TabsList = forwardRef<ComponentRef<typeof BaseTabs.List>, TabsListProps>(function TabsList({ className, ...props }, ref) {
-  return <BaseTabs.List ref={ref} className={`${styles.list} ${className ?? ""}`} {...props} />;
+  return <BaseTabs.List ref={ref} className={(state) => cx(styles.list, resolveClassName(className, state))} {...props} />;
 });
 
 export const TabsTab = forwardRef<ComponentRef<typeof BaseTabs.Tab>, TabsTabProps>(function TabsTab({ className, ...props }, ref) {
-  return <BaseTabs.Tab ref={ref} className={`${styles.tab} ${className ?? ""}`} {...props} />;
+  return <BaseTabs.Tab ref={ref} className={(state) => cx(styles.tab, resolveClassName(className, state))} {...props} />;
 });
 
 export const TabsPanel = forwardRef<ComponentRef<typeof BaseTabs.Panel>, TabsPanelProps>(function TabsPanel({ className, ...props }, ref) {
-  return <BaseTabs.Panel ref={ref} className={`${styles.panel} ${className ?? ""}`} {...props} />;
+  return <BaseTabs.Panel ref={ref} className={(state) => cx(styles.panel, resolveClassName(className, state))} {...props} />;
 });