@kushagradhawan/kookie-ui 0.1.70 → 0.1.72

package/src/components/button.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { BaseButton } from './_internal/base-button.js';
 import { Tooltip } from './tooltip.js';
+import { useTooltipWrapper } from '../hooks/use-tooltip-wrapper.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 
 /**
@@ -84,9 +85,7 @@ type ButtonProps<C extends React.ElementType = 'button'> = ButtonOwnProps & {
  * Button component type that supports polymorphic rendering
  * @template C - The element type to render as
  */
-type ButtonComponent = <C extends React.ElementType = 'button'>(
-  props: ButtonProps<C> & { ref?: React.ForwardedRef<ButtonElement> },
-) => React.ReactElement | null;
+type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonProps<C> & { ref?: React.ForwardedRef<ButtonElement> }) => React.ReactElement | null;
 
 /**
  * Button component for triggering actions throughout your interface
@@ -113,27 +112,11 @@ type ButtonComponent = <C extends React.ElementType = 'button'>(
  */
 const Button = React.forwardRef(
   (
-    {
-      className,
-      tooltip,
-      tooltipSide = 'top',
-      tooltipAlign = 'center',
-      tooltipDelayDuration,
-      tooltipDisableHoverableContent,
-      overrideStyles,
-      ...props
-    }: ButtonProps,
+    { className, style, tooltip, tooltipSide = 'top', tooltipAlign = 'center', tooltipDelayDuration, tooltipDisableHoverableContent, overrideStyles, ...props }: ButtonProps,
     forwardedRef: React.ForwardedRef<ButtonElement>,
   ) => {
-    // Generate unique ID for tooltip accessibility
-    const tooltipId = React.useId();
-    const hasTooltip = Boolean(tooltip);
-
-    // Prepare accessibility props for tooltip integration
-    const tooltipAccessibilityProps = React.useMemo(
-      () => (hasTooltip ? { 'aria-describedby': tooltipId } : {}),
-      [hasTooltip, tooltipId],
-    );
+    // Use shared tooltip wrapper hook for accessibility props
+    const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
 
     // Create the base button element with tooltip accessibility props
     // Map overrideStyles to CSS variables consumed by the override variant rules
@@ -152,7 +135,7 @@ const Button = React.forwardRef(
         setVar(`--button-override-${prefix}filter`, s.filter);
         setVar(`--button-override-${prefix}outline`, s.outline);
         setVar(`--button-override-${prefix}outline-offset`, s.outlineOffset);
-        setVar(`--button-override-${prefix}opacity`, s.opacity as any);
+        setVar(`--button-override-${prefix}opacity`, s.opacity);
       };
 
       apply('', overrideStyles.normal);
@@ -167,35 +150,23 @@ const Button = React.forwardRef(
         setVar('--button-override-focus-outline-offset', overrideStyles.focus.outlineOffset);
       }
 
-      return vars as unknown as React.CSSProperties;
+      return vars as React.CSSProperties;
     }, [overrideStyles]);
 
-    const button = (
-      <BaseButton
-        {...props}
-        {...tooltipAccessibilityProps}
-        ref={forwardedRef}
-        className={classNames('rt-Button', className)}
-        style={overrideVars ? { ...overrideVars, ...(props as any).style } : (props as any).style}
-      />
-    );
+    // Combine override styles with user-provided styles
+    const combinedStyle = React.useMemo(() => (overrideVars ? { ...overrideVars, ...style } : style), [overrideVars, style]);
+
+    const button = <BaseButton {...props} {...tooltipAccessibilityProps} ref={forwardedRef} className={classNames('rt-Button', className)} style={combinedStyle} />;
 
     // If no tooltip is provided, return the button as-is for better performance
-    if (!tooltip) {
+    if (!hasTooltip) {
       return button;
     }
 
     // Wrap with Tooltip when tooltip content is provided
     // This creates a compound component that handles both button and tooltip functionality
     return (
-      <Tooltip
-        content={tooltip}
-        side={tooltipSide}
-        align={tooltipAlign}
-        delayDuration={tooltipDelayDuration}
-        disableHoverableContent={tooltipDisableHoverableContent}
-        id={tooltipId}
-      >
+      <Tooltip content={tooltip} side={tooltipSide} align={tooltipAlign} delayDuration={tooltipDelayDuration} disableHoverableContent={tooltipDisableHoverableContent} id={tooltipId}>
         {button}
       </Tooltip>
     );

package/src/components/chatbar.tsx

@@ -1121,13 +1121,16 @@ const RowEnd = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'
 });
 RowEnd.displayName = 'Chatbar.RowEnd';
 
-type SendProps = IconButtonProps & {
+type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> & {
+  /** Optional override for accessible name. Defaults to "Send". */
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
   asChild?: boolean;
   clearOnSend?: boolean;
 };
 
 const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef) => {
-  const { asChild, clearOnSend = true, disabled, children, className, style, size: sizeProp, variant: variantProp, ...buttonProps } = props;
+  const { asChild, clearOnSend = true, disabled, children, className, style, size: sizeProp, variant: variantProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...buttonProps } = props;
   const ctx = useChatbarContext();
 
   const trimmed = ctx.value.trim();
@@ -1160,7 +1163,8 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
       }}
       asChild={asChild}
       onClick={handleClick}
-      aria-label={(buttonProps as any)['aria-label'] ?? 'Send'}
+      aria-label={ariaLabel ?? (ariaLabelledby ? undefined : 'Send')}
+      aria-labelledby={ariaLabelledby}
     >
       {children ?? (
         <svg

package/src/components/icon-button.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { BaseButton } from './_internal/base-button.js';
 import { Tooltip } from './tooltip.js';
+import { useTooltipWrapper } from '../hooks/use-tooltip-wrapper.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 
 type IconButtonElement = React.ElementRef<typeof BaseButton>;
@@ -57,9 +58,7 @@ type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProp
  * IconButton component type that supports polymorphic rendering
  * @template C - The element type to render as
  */
-type IconButtonComponent = <C extends React.ElementType = 'button'>(
-  props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },
-) => React.ReactElement | null;
+type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> }) => React.ReactElement | null;
 
 /**
  * IconButton component for compact, accessible icon-only interactions
@@ -103,68 +102,45 @@ type IconButtonComponent = <C extends React.ElementType = 'button'>(
  */
 const IconButton = React.forwardRef(
   (
-    {
-      className,
-      tooltip,
-      tooltipSide = 'top',
-      tooltipAlign = 'center',
-      tooltipDelayDuration,
-      tooltipDisableHoverableContent,
-      ...props
-    }: IconButtonProps,
+    { className, tooltip, tooltipSide = 'top', tooltipAlign = 'center', tooltipDelayDuration, tooltipDisableHoverableContent, ...props }: IconButtonProps,
     forwardedRef: React.ForwardedRef<IconButtonElement>,
   ) => {
-    // Generate unique ID for tooltip accessibility
-    const tooltipId = React.useId();
+    // Use shared tooltip wrapper hook for accessibility props
+    const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
+
     // Runtime accessibility validation to ensure WCAG compliance
     // This helps catch accessibility issues during development
     const hasAriaLabel = 'aria-label' in props && props['aria-label'];
     const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];
     const hasChildren = 'children' in props && props.children;
 
-    // Throw descriptive error if no accessible name is provided
+    // Validate accessible name - throw in development, log error in production
     if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {
-      throw new Error(
+      const errorMessage =
         'IconButton: Icon buttons must have an accessible name. Please provide either:' +
-          '\n- aria-label prop with descriptive text' +
-          '\n- aria-labelledby prop referencing a label element' +
-          '\n- or visible text children',
-      );
-    }
+        '\n- aria-label prop with descriptive text' +
+        '\n- aria-labelledby prop referencing a label element' +
+        '\n- or visible text children';
 
-    // Prepare accessibility props for tooltip integration
-    const hasTooltip = Boolean(tooltip);
-    const tooltipAccessibilityProps = React.useMemo(
-      () => (hasTooltip ? { 'aria-describedby': tooltipId } : {}),
-      [hasTooltip, tooltipId],
-    );
+      if (process.env.NODE_ENV === 'development') {
+        throw new Error(errorMessage);
+      } else {
+        console.error(errorMessage);
+      }
+    }
 
     // Create the base icon button element with accessibility props
-    const iconButton = (
-      <BaseButton
-        {...props}
-        {...tooltipAccessibilityProps}
-        ref={forwardedRef}
-        className={classNames('rt-IconButton', className)}
-      />
-    );
+    const iconButton = <BaseButton {...props} {...tooltipAccessibilityProps} ref={forwardedRef} className={classNames('rt-IconButton', className)} />;
 
     // If no tooltip is provided, return the icon button as-is for better performance
-    if (!tooltip) {
+    if (!hasTooltip) {
       return iconButton;
     }
 
     // Wrap with Tooltip when tooltip content is provided
     // This creates a compound component that handles both button and tooltip functionality
     return (
-      <Tooltip
-        content={tooltip}
-        side={tooltipSide}
-        align={tooltipAlign}
-        delayDuration={tooltipDelayDuration}
-        disableHoverableContent={tooltipDisableHoverableContent}
-        id={tooltipId}
-      >
+      <Tooltip content={tooltip} side={tooltipSide} align={tooltipAlign} delayDuration={tooltipDelayDuration} disableHoverableContent={tooltipDisableHoverableContent} id={tooltipId}>
         {iconButton}
       </Tooltip>
     );

package/src/components/image.css

@@ -63,7 +63,7 @@
   .rt-Image {
     border: 1px solid CanvasText;
   }
-  
+
   /* Enhanced focus visibility in forced colors mode */
   .rt-Image:where(:focus-visible) {
     outline: 2px solid Highlight;
@@ -78,7 +78,9 @@
  */
 .rt-Image:where(:any-link, button, label) {
   cursor: pointer;
-  transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
+  transition:
+    var(--transition-card),
+    filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
 
   /* 
    * Hover effects with progressive enhancement
@@ -87,7 +89,7 @@
   @media (hover: hover) {
     &:where(:hover) {
       box-shadow: var(--shadow-3); /* Subtle elevation on hover */
-      filter: brightness(1.05) contrast(1.02); /* Slight brightness/contrast boost */
+      filter: brightness(1.08) contrast(1.02); /* Slight brightness/contrast boost */
     }
   }
 
@@ -116,13 +118,15 @@
  */
 :where(:any-link, button, label) {
   cursor: pointer;
-  transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
+  transition:
+    var(--transition-card),
+    filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
 
   /* Hover effects for wrapper elements */
   @media (hover: hover) {
     &:where(:hover) {
       /* box-shadow: var(--shadow-3); */
-      filter: brightness(1.05) contrast(1.02);
+      filter: brightness(1.08) contrast(1.02);
     }
   }
 
@@ -141,8 +145,6 @@
   outline-offset: -2px;
 }
 
-
-
 /* 
  * Object-fit variants for responsive image scaling
  * These classes control how images are resized to fit their containers
@@ -217,7 +219,7 @@
   color: var(--gray-11); /* Subtle but readable color */
   margin-top: var(--space-2); /* Consistent spacing from image */
   text-align: center; /* Centered alignment for visual balance */
-  
+
   /* 
    * Text wrapping and hyphenation for better layout
    * Prevents caption text from breaking the layout

package/src/components/shell.context.tsx

@@ -45,6 +45,7 @@ export interface ShellContextValue {
 
 const ShellContext = React.createContext<ShellContextValue | null>(null);
 
+/** @internal Shell root context. Prefer slice hooks (useSidebarMode, useShellActions, etc.). */
 export function useShell() {
   const ctx = React.useContext(ShellContext);
   if (!ctx) throw new Error('Shell components must be used within <Shell.Root>');

package/src/components/shell.hooks.ts

@@ -3,7 +3,7 @@ import type { Breakpoint, PresentationValue, ResponsivePresentation } from './sh
 import { _BREAKPOINTS } from './shell.types.js';
 import { useShell } from './shell.context.js';
 
-export function useResponsivePresentation(presentation: ResponsivePresentation): PresentationValue {
+function useResponsivePresentation(presentation: ResponsivePresentation): PresentationValue {
   const { currentBreakpoint } = useShell();
 
   return React.useMemo(() => {
@@ -35,7 +35,7 @@ export function useResponsivePresentation(presentation: ResponsivePresentation):
  * If no value is defined for the current breakpoint, search smaller breakpoints down to 'initial'.
  * Returns undefined when passed a responsive map with no matching key across the chain.
  */
-export function useResponsiveValue<T>(value: T | Partial<Record<Breakpoint, T>> | undefined): T | undefined {
+function useResponsiveValue<T>(value: T | Partial<Record<Breakpoint, T>> | undefined): T | undefined {
   const { currentBreakpoint } = useShell();
 
   return React.useMemo(() => {
@@ -64,3 +64,68 @@ export function useResponsiveValue<T>(value: T | Partial<Record<Breakpoint, T>>
     return undefined;
   }, [value, currentBreakpoint]);
 }
+
+type ResponsiveStateValue<T> = T | Partial<Record<Breakpoint, T>>;
+
+interface UseResponsiveInitialStateOptions<T> {
+  controlledValue?: ResponsiveStateValue<T>;
+  defaultValue?: ResponsiveStateValue<T>;
+  currentValue: T;
+  setValue: (value: T) => void;
+  breakpointReady: boolean;
+  onInit?: (value: T) => void;
+  onResponsiveChange?: (value: T) => void;
+  controlledIsResponsive?: boolean;
+}
+
+interface UseResponsiveInitialStateResult<T> {
+  resolvedControlled?: T;
+  resolvedDefault?: T;
+}
+
+function useResponsiveInitialState<T>({
+  controlledValue,
+  defaultValue,
+  currentValue,
+  setValue,
+  breakpointReady,
+  onInit,
+  onResponsiveChange,
+  controlledIsResponsive = false,
+}: UseResponsiveInitialStateOptions<T>): UseResponsiveInitialStateResult<T> {
+  const resolvedControlled = useResponsiveValue(controlledValue);
+  const resolvedDefault = useResponsiveValue(defaultValue);
+
+  const lastControlledRef = React.useRef<T | undefined>(undefined);
+  React.useEffect(() => {
+    if (resolvedControlled === undefined) return;
+    lastControlledRef.current = resolvedControlled;
+    if (currentValue === resolvedControlled) {
+      if (controlledIsResponsive) {
+        onResponsiveChange?.(resolvedControlled);
+      }
+      return;
+    }
+    setValue(resolvedControlled);
+    if (controlledIsResponsive) {
+      onResponsiveChange?.(resolvedControlled);
+    }
+  }, [resolvedControlled, currentValue, setValue, onResponsiveChange, controlledIsResponsive]);
+
+  const didInitRef = React.useRef(false);
+  React.useEffect(() => {
+    if (didInitRef.current) return;
+    if (!breakpointReady) return;
+    if (typeof controlledValue !== 'undefined') return;
+    if (resolvedDefault === undefined) return;
+    didInitRef.current = true;
+    if (currentValue !== resolvedDefault) {
+      setValue(resolvedDefault);
+    }
+    onInit?.(resolvedDefault);
+  }, [breakpointReady, controlledValue, resolvedDefault, currentValue, setValue, onInit]);
+
+  return { resolvedControlled, resolvedDefault };
+}
+
+export { useResponsivePresentation, useResponsiveValue, useResponsiveInitialState };