@kushagradhawan/kookie-ui 0.1.69 → 0.1.71

package/src/components/chatbar.tsx

@@ -1121,13 +1121,28 @@ const RowEnd = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'
 });
 RowEnd.displayName = 'Chatbar.RowEnd';
 
-interface SendProps extends Omit<IconButtonProps, 'size'> {
+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, ...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();
@@ -1149,8 +1164,8 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
     <IconButton
       {...(buttonProps as any)}
       ref={forwardedRef as any}
-      size={ctx.size}
-      variant={ctx.open ? 'solid' : 'ghost'}
+      size={sizeProp ?? ctx.size}
+      variant={variantProp ?? (ctx.open ? 'solid' : 'ghost')}
       disabled={disabled || ctx.disabled || ctx.readOnly}
       className={classNames('rt-ChatbarSend', className)}
       style={{
@@ -1160,7 +1175,8 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
       }}
       asChild={asChild}
       onClick={handleClick}
-      aria-label={buttonProps['aria-label'] ?? 'Send'}
+      aria-label={ariaLabel ?? (ariaLabelledby ? undefined : 'Send')}
+      aria-labelledby={ariaLabelledby}
     >
       {children ?? (
         <svg

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