@brijbyte/agentic-ui 0.0.3 → 0.0.5

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/switch/switch.module.css

@@ -6,10 +6,14 @@
     cursor: pointer;
     user-select: none;
   }
-  .root[data-disabled] {
-    opacity: 0.44;
+  /* data-disabled lives on the inner button, not the label wrapper.
+     Use :has() to dim the label text, and target the track directly. */
+  .root:has([data-disabled]) {
     cursor: not-allowed;
   }
+  .root:has([data-disabled]) .label {
+    opacity: 0.44;
+  }
   .thumb-track {
     position: relative;
     width: 36px;
@@ -24,6 +28,11 @@
     outline: none;
     flex-shrink: 0;
   }
+  .thumb-track[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
   .thumb-track:focus-visible {
     box-shadow: var(--shadow-focus);
   }

package/src/switch/switch.tsx

@@ -4,19 +4,31 @@ import { Switch as BaseSwitch } from "@base-ui/react/switch";
 import styles from "./switch.module.css";
 
 export interface SwitchProps {
+  /** Controlled checked state. */
   checked?: boolean;
+  /** Initial checked state (uncontrolled). */
   defaultChecked?: boolean;
+  /** Prevent interaction. */
   disabled?: boolean;
+  /** Mark the field as required for form validation. */
   required?: boolean;
+  /** HTML name attribute for form submission. */
   name?: string;
+  /** HTML value attribute for form submission. */
   value?: string;
   /** Called when checked state changes. `eventDetails` is the base-ui event details object. */
   onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
+  /** Label content rendered next to the switch. */
   children?: ReactNode;
+  /** Override the auto-generated element id. */
   id?: string;
   className?: string;
 }
 
+/**
+ * Toggle for boolean settings. Renders a track with a sliding thumb and
+ * an optional label. Wraps `@base-ui/react` Switch.
+ */
 export function Switch({ children, id, className, onCheckedChange, ...props }: SwitchProps) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const switchId = id ?? useId();

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} />;
 });

package/src/tabs/tabs.tsx

@@ -11,14 +11,21 @@ export interface TabItem {
 }
 
 export interface TabsProps {
+  /** Array of tab definitions to render. */
   items: TabItem[];
+  /** Currently active tab value (controlled). */
   value?: string;
+  /** Initially active tab value (uncontrolled). Defaults to the first item. */
   defaultValue?: string;
-  /** `eventDetails` is the base-ui event details object. */
+  /** Called when the active tab changes. `eventDetails` is the base-ui event details object. */
   onValueChange?: (value: unknown, eventDetails: unknown) => void;
   className?: string;
 }
 
+/**
+ * Tab navigation for switching between content panels. Each tab can have
+ * an optional icon and can be individually disabled.
+ */
 export function Tabs({ items, className, ...props }: TabsProps) {
   const defaultVal = props.defaultValue ?? items[0]?.value;
 

package/src/toast/parts.tsx

@@ -20,6 +20,7 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import styles from "./toast.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseRootProps = ComponentPropsWithoutRef<typeof BaseToast.Root>;
 type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;
@@ -27,50 +28,40 @@ type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Descriptio
 type BaseCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;
 type BaseViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;
 
-export interface ToastRootProps extends Omit<BaseRootProps, "className"> {
-  className?: string;
-}
-export interface ToastTitleProps extends Omit<BaseTitleProps, "className"> {
-  className?: string;
-}
-export interface ToastDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
-  className?: string;
-}
-export interface ToastCloseProps extends Omit<BaseCloseProps, "className"> {
-  className?: string;
-}
-export interface ToastViewportPartProps extends Omit<BaseViewportProps, "className"> {
-  className?: string;
-}
+export interface ToastRootProps extends BaseRootProps {}
+export interface ToastTitleProps extends BaseTitleProps {}
+export interface ToastDescriptionProps extends BaseDescriptionProps {}
+export interface ToastCloseProps extends BaseCloseProps {}
+export interface ToastViewportPartProps extends BaseViewportProps {}
 
 export const ToastRoot = forwardRef<ComponentRef<typeof BaseToast.Root>, ToastRootProps>(function ToastRoot({ className, ...props }, ref) {
-  return <BaseToast.Root ref={ref} className={`${styles.toast} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Root ref={ref} className={(state) => cx(styles.toast, resolveClassName(className, state))} {...props} />;
 });
 
 export const ToastTitle = forwardRef<ComponentRef<typeof BaseToast.Title>, ToastTitleProps>(function ToastTitle(
   { className, ...props },
   ref,
 ) {
-  return <BaseToast.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Title ref={ref} className={(state) => cx(styles.title, resolveClassName(className, state))} {...props} />;
 });
 
 export const ToastDescription = forwardRef<ComponentRef<typeof BaseToast.Description>, ToastDescriptionProps>(function ToastDescription(
   { className, ...props },
   ref,
 ) {
-  return <BaseToast.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Description ref={ref} className={(state) => cx(styles.description, resolveClassName(className, state))} {...props} />;
 });
 
 export const ToastClose = forwardRef<ComponentRef<typeof BaseToast.Close>, ToastCloseProps>(function ToastClose(
   { className, ...props },
   ref,
 ) {
-  return <BaseToast.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Close ref={ref} className={(state) => cx(styles.close, resolveClassName(className, state))} {...props} />;
 });
 
 export const ToastViewportPart = forwardRef<ComponentRef<typeof BaseToast.Viewport>, ToastViewportPartProps>(function ToastViewportPart(
   { className, ...props },
   ref,
 ) {
-  return <BaseToast.Viewport ref={ref} className={`${styles.viewport} ${className ?? ""}`} {...props} />;
+  return <BaseToast.Viewport ref={ref} className={(state) => cx(styles.viewport, resolveClassName(className, state))} {...props} />;
 });

package/src/toast/toast.tsx

@@ -77,8 +77,11 @@ const DEFAULT_LIMIT: Record<NonNullable<ToastViewportProps["variant"]>, number>
 
 export interface ToastProviderProps {
   children: ReactNode;
+  /** Layout style for the viewport. @default "list" */
   variant?: ToastViewportProps["variant"];
+  /** Maximum number of toasts shown at once. */
   limit?: number;
+  /** Auto-dismiss delay in milliseconds. */
   timeout?: number;
 }
 
@@ -91,6 +94,10 @@ const MAX_LIMIT: Record<NonNullable<ToastViewportProps["variant"]>, number> = {
   list: 5,
 };
 
+/**
+ * Drop-in provider that wires limit defaults to the chosen viewport variant.
+ * Use this instead of base-ui's `Toast.Provider` when using `ToastViewport`.
+ */
 export function ToastProvider({ children, variant = "list", limit, timeout }: ToastProviderProps) {
   const resolvedLimit = Math.min(limit ?? DEFAULT_LIMIT[variant], MAX_LIMIT[variant]);
   return (
@@ -100,6 +107,10 @@ export function ToastProvider({ children, variant = "list", limit, timeout }: To
   );
 }
 
+/**
+ * Renders and manages toast notifications. Supports `"stacked"` (Sonner-style
+ * fanned cards) and `"list"` (vertically stacked, each fully visible) layouts.
+ */
 export function ToastViewport({ variant = "list", limit: _limit }: ToastViewportProps) {
   const manager = useToastManager();
   const isStacked = variant === "stacked";

package/src/tooltip/parts.tsx

@@ -25,38 +25,33 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import styles from "./tooltip.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BasePositionerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>;
 type BasePopupProps = ComponentPropsWithoutRef<typeof BaseTooltip.Popup>;
 type BaseArrowProps = ComponentPropsWithoutRef<typeof BaseTooltip.Arrow>;
 
-export interface TooltipPositionerProps extends Omit<BasePositionerProps, "className"> {
-  className?: string;
-}
-export interface TooltipPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-export interface TooltipArrowProps extends Omit<BaseArrowProps, "className"> {
-  className?: string;
-}
+export interface TooltipPositionerProps extends BasePositionerProps {}
+export interface TooltipPopupProps extends BasePopupProps {}
+export interface TooltipArrowProps extends BaseArrowProps {}
 
 export const TooltipPositioner = forwardRef<ComponentRef<typeof BaseTooltip.Positioner>, TooltipPositionerProps>(function TooltipPositioner(
   { className, ...props },
   ref,
 ) {
-  return <BaseTooltip.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} {...props} />;
+  return <BaseTooltip.Positioner ref={ref} className={(state) => cx(styles.positioner, resolveClassName(className, state))} {...props} />;
 });
 
 export const TooltipPopup = forwardRef<ComponentRef<typeof BaseTooltip.Popup>, TooltipPopupProps>(function TooltipPopup(
   { className, ...props },
   ref,
 ) {
-  return <BaseTooltip.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+  return <BaseTooltip.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;
 });
 
 export const TooltipArrow = forwardRef<ComponentRef<typeof BaseTooltip.Arrow>, TooltipArrowProps>(function TooltipArrow(
   { className, ...props },
   ref,
 ) {
-  return <BaseTooltip.Arrow ref={ref} className={`${styles.arrow} ${className ?? ""}`} {...props} />;
+  return <BaseTooltip.Arrow ref={ref} className={(state) => cx(styles.arrow, resolveClassName(className, state))} {...props} />;
 });

package/src/tooltip/tooltip.tsx

@@ -3,13 +3,22 @@ import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import styles from "./tooltip.module.css";
 
 export interface TooltipProps {
+  /** Text or rich content shown inside the tooltip popup. */
   content: ReactNode;
+  /** The element that triggers the tooltip on hover/focus. */
   children: ReactElement;
+  /** Hover delay in milliseconds before the tooltip appears. @default 400 */
   delay?: number;
+  /** Which side of the trigger the tooltip appears on. @default "top" */
   side?: "top" | "bottom" | "left" | "right";
+  /** Alignment along the side axis. @default "center" */
   align?: "start" | "center" | "end";
 }
 
+/**
+ * Accessible popup shown on hover or focus. Automatically positions itself
+ * with an arrow and supports configurable delay, side, and alignment.
+ */
 export function Tooltip({ content, children, delay = 400, side = "top", align = "center" }: TooltipProps) {
   return (
     <BaseTooltip.Provider delay={delay}>

package/src/utils/resolveClassName.ts

@@ -0,0 +1,24 @@
+/**
+ * Resolves a base-ui className prop (string | function | undefined) into a string.
+ * When the className is a function, it is called with the component state.
+ * Used by styled parts to merge our fixed style class with the consumer's className.
+ *
+ * @example
+ * ```tsx
+ * // In a styled part, prepend our class while preserving function className support:
+ * className={(state) => cx(styles.root, resolveClassName(className, state))}
+ * ```
+ */
+export function resolveClassName<State>(
+  className: string | ((state: State) => string | undefined) | undefined,
+  state: State,
+): string | undefined {
+  return typeof className === "function" ? className(state) : className;
+}
+
+/**
+ * Joins class name strings, filtering out falsy values.
+ */
+export function cx(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(" ");
+}