@jmruthers/pace-core 0.5.193 → 0.6.2

package/src/components/Select/hooks/useSelectEvents.ts

@@ -0,0 +1,87 @@
+import * as React from "react";
+import type { UseSelectEventsProps } from "../types";
+
+/**
+ * Hook for managing Select event handlers.
+ * Handles click outside, keyboard navigation, and focus management.
+ * 
+ * @param props - Select events configuration
+ */
+export const useSelectEvents = ({
+  state,
+  actions,
+  selectRef,
+}: UseSelectEventsProps) => {
+  const [isSelecting, setIsSelecting] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleCloseSelect = () => {
+      actions.setOpen(false);
+    };
+
+    const selectElement = selectRef.current as HTMLElement;
+    if (selectElement) {
+      selectElement.addEventListener("closeSelect", handleCloseSelect);
+      return () => {
+        selectElement.removeEventListener("closeSelect", handleCloseSelect);
+      };
+    }
+  }, [actions, selectRef]);
+
+  React.useEffect(() => {
+    if (!state.open) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const selectElement = selectRef.current;
+      if (!selectElement) return;
+
+      const target = event.target as Node;
+
+      if (!selectElement.contains(target) && !isSelecting) {
+        actions.setOpen(false);
+      }
+    };
+
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside, true);
+    }, 100);
+
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [state.open, actions, selectRef, isSelecting]);
+
+  React.useEffect(() => {
+    let timeoutId: NodeJS.Timeout | null = null;
+    let isMounted = true;
+
+    const handleSelectItemMouseDown = () => {
+      if (!isMounted) return;
+
+      setIsSelecting(true);
+      timeoutId = setTimeout(() => {
+        if (isMounted) {
+          setIsSelecting(false);
+        }
+      }, 150);
+    };
+
+    document.addEventListener(
+      "selectItemMouseDown",
+      handleSelectItemMouseDown as EventListener
+    );
+    return () => {
+      isMounted = false;
+      document.removeEventListener(
+        "selectItemMouseDown",
+        handleSelectItemMouseDown as EventListener
+      );
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, []);
+
+  return { isSelecting };
+};

package/src/components/Select/hooks/useSelectSearch.ts

@@ -0,0 +1,91 @@
+import * as React from "react";
+import type { UseSelectSearchProps } from "../types";
+
+/**
+ * Hook for managing Select search functionality.
+ * Filters select items based on search term.
+ * 
+ * @param props - Select search configuration
+ */
+export const useSelectSearch = ({
+  children,
+  searchable = false,
+  searchTerm: controlledSearchTerm,
+  onSearchChange,
+}: UseSelectSearchProps) => {
+  const [internalSearchTerm, setInternalSearchTerm] = React.useState("");
+  const [filteredChildren, setFilteredChildren] =
+    React.useState<React.ReactNode>(children);
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const searchTerm =
+    controlledSearchTerm !== undefined
+      ? controlledSearchTerm
+      : internalSearchTerm;
+
+  const setSearchTerm = React.useCallback(
+    (term: string) => {
+      if (controlledSearchTerm === undefined) {
+        setInternalSearchTerm(term);
+      }
+      onSearchChange?.(term);
+    },
+    [controlledSearchTerm, onSearchChange]
+  );
+
+  React.useEffect(() => {
+    if (!searchable || !searchTerm) {
+      setFilteredChildren(children);
+      return;
+    }
+
+    const filterChildren = (nodes: React.ReactNode): React.ReactNode => {
+      return React.Children.map(nodes, (child) => {
+        if (!React.isValidElement(child)) return child;
+
+        const childProps = child.props as {
+          "data-testid"?: string;
+          value?: unknown;
+          children?: React.ReactNode;
+          [key: string]: unknown;
+        };
+        const isSelectItem =
+          childProps &&
+          (childProps["data-testid"] === "select-item" ||
+            childProps.value !== undefined);
+
+        if (isSelectItem) {
+          const childText = React.Children.toArray(
+            childProps.children
+          ).join(" ");
+          const searchLower = searchTerm.toLowerCase();
+
+          if (childText.toLowerCase().includes(searchLower)) {
+            return child;
+          }
+          return null;
+        }
+
+        if (childProps.children) {
+          const filteredChildChildren = filterChildren(childProps.children);
+          if (React.Children.count(filteredChildChildren) > 0) {
+            return React.cloneElement(child, {}, filteredChildChildren);
+          }
+          return null;
+        }
+
+        return child;
+      });
+    };
+
+    const filtered = filterChildren(children);
+    setFilteredChildren(filtered);
+  }, [children, searchTerm, searchable]);
+
+  return {
+    searchTerm,
+    setSearchTerm,
+    filteredChildren,
+    searchInputRef,
+  };
+};

package/src/components/Select/hooks/useSelectState.ts

@@ -0,0 +1,104 @@
+import * as React from "react";
+import type {
+  SelectActions,
+  SelectState,
+  UseSelectStateProps,
+} from "../types";
+
+/**
+ * Hook for managing Select component state.
+ * Handles controlled and uncontrolled value, open state, and disabled state.
+ * 
+ * @param props - Select state configuration
+ * @returns Select state and actions
+ */
+export const useSelectState = ({
+  value: controlledValue,
+  defaultValue = "",
+  selectedText: controlledSelectedText,
+  open: controlledOpen,
+  defaultOpen = false,
+  disabled = false,
+  onValueChange,
+  onOpenChange,
+}: UseSelectStateProps) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [internalSelectedText, setInternalSelectedText] = React.useState("");
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const selectedText =
+    controlledSelectedText !== undefined
+      ? controlledSelectedText
+      : internalSelectedText;
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const setValue = React.useCallback(
+    (newValue: string, newText: string) => {
+      if (controlledValue === undefined) {
+        setInternalValue(newValue);
+        setInternalSelectedText(newText);
+      }
+      onValueChange?.(newValue);
+
+      if (controlledOpen === undefined) {
+        setInternalOpen(false);
+      }
+      onOpenChange?.(false);
+    },
+    [controlledValue, onValueChange, controlledOpen, onOpenChange]
+  );
+
+  const setOpen = React.useCallback(
+    (newOpen: boolean) => {
+      if (disabled) {
+        return;
+      }
+
+      if (newOpen) {
+        const allTriggers = document.querySelectorAll(
+          '[data-testid="select-trigger"]'
+        );
+        allTriggers.forEach((trigger) => {
+          if (trigger.getAttribute("aria-expanded") === "true") {
+            const selectRoot = trigger.closest('[data-testid="select-root"]');
+            if (selectRoot) {
+              const closeEvent = new CustomEvent("closeSelect");
+              selectRoot.dispatchEvent(closeEvent);
+            }
+          }
+        });
+      }
+
+      if (controlledOpen === undefined) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [controlledOpen, onOpenChange, disabled]
+  );
+
+  const setSelectedText = React.useCallback(
+    (newText: string) => {
+      if (controlledSelectedText === undefined) {
+        setInternalSelectedText(newText);
+      }
+    },
+    [controlledSelectedText]
+  );
+
+  const state: SelectState = {
+    value,
+    selectedText,
+    open,
+    disabled,
+  };
+
+  const actions: SelectActions = {
+    setValue,
+    setOpen,
+    setSelectedText,
+  };
+
+  return { state, actions };
+};

package/src/components/Select/index.ts

@@ -1 +1,9 @@
-export * from './Select'; 
+export * from './Select';
+export type {
+  SelectContentProps,
+  SelectContextValue,
+  SelectItemProps,
+  SelectProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from './types'; 

package/src/components/Select/types.ts

@@ -0,0 +1,123 @@
+import * as React from "react";
+import type { ButtonProps } from "../Button/Button";
+
+/**
+ * Direction for Select dropdown opening.
+ * Controls whether the dropdown opens upward or downward.
+ */
+export type SelectDirection = "up" | "down";
+
+export interface SelectState {
+  value: string;
+  selectedText: string;
+  open: boolean;
+  disabled: boolean;
+}
+
+export interface SelectActions {
+  setValue: (value: string, text: string) => void;
+  setOpen: (open: boolean) => void;
+  setSelectedText: (text: string) => void;
+}
+
+export interface SelectEventHandlers {
+  onValueChange?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * Props for the useSelectState hook.
+ */
+export interface UseSelectStateProps {
+  value?: string;
+  defaultValue?: string;
+  selectedText?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * Props for the useSelectEvents hook.
+ */
+export interface UseSelectEventsProps {
+  state: SelectState;
+  actions: SelectActions;
+  selectRef: React.RefObject<HTMLElement | null>;
+}
+
+/**
+ * Props for the useSelectSearch hook.
+ */
+export interface UseSelectSearchProps {
+  children: React.ReactNode;
+  searchable?: boolean;
+  searchTerm?: string;
+  onSearchChange?: (term: string) => void;
+}
+
+/**
+ * Select context value interface.
+ * Provides state and actions to Select child components.
+ */
+export interface SelectContextValue extends SelectState {
+  actions: SelectActions;
+  registerItem?: (value: string, text: string) => void;
+  unregisterItem?: (value: string) => void;
+  direction?: SelectDirection;
+}
+
+/**
+ * Props for the Select root component.
+ */
+export interface SelectProps
+  extends Omit<
+    React.HTMLAttributes<HTMLFormElement>,
+    "onChange" | "onKeyDown" | "onFocus" | "onBlur"
+  > {
+  children: React.ReactNode;
+  className?: string;
+  direction?: SelectDirection;
+}
+
+/**
+ * Props for the SelectTrigger component.
+ */
+export interface SelectTriggerProps
+  extends Omit<ButtonProps, "onClick" | "onKeyDown"> {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+/**
+ * Props for the SelectValue component.
+ */
+export interface SelectValueProps {
+  placeholder?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * Props for the SelectContent component.
+ */
+export interface SelectContentProps {
+  children: React.ReactNode;
+  className?: string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  maxHeight?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Props for the SelectItem component.
+ */
+export interface SelectItemProps {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}

package/src/components/Select/utils/text.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+/**
+ * Extracts text content from React children.
+ * Recursively extracts all text content from a React node tree.
+ * 
+ * @param children - React children to extract text from
+ * @returns Extracted text content as a string
+ */
+export const getTextContent = (children: React.ReactNode): string => {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return children.toString();
+  if (React.isValidElement(children)) {
+    const props = children.props as {
+      children?: React.ReactNode;
+      [key: string]: unknown;
+    };
+    if (props.children) {
+      return getTextContent(props.children);
+    }
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextContent).join("");
+  }
+  return "";
+};

package/src/components/SessionRestorationLoader/SessionRestorationLoader.tsx

@@ -30,13 +30,14 @@
  * - High contrast support
  *
  * @dependencies
- * - React 18+ - Component framework
+ * - React 19+ - Component framework
  * - LoadingSpinner - Spinner component
  * - Tailwind CSS - Styling
  */
 
 import React from 'react';
 import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
+import { Alert } from '../Alert';
 import { cn } from '../../utils/core/cn';
 
 export interface SessionRestorationLoaderProps {
@@ -51,7 +52,7 @@ export const SessionRestorationLoader: React.FC<SessionRestorationLoaderProps> =
   className
 }) => {
   return (
-    <div
+    <Alert
       className={cn(
         'flex flex-col items-center justify-center h-screen w-full gap-4 text-center p-4 bg-background',
         className
@@ -61,10 +62,8 @@ export const SessionRestorationLoader: React.FC<SessionRestorationLoaderProps> =
       aria-label={message}
     >
       <LoadingSpinner size="lg" />
-      <div className="text-sm text-sec-600">
-        {message}
-      </div>
-    </div>
+      <span className="text-sm text-sec-600">{message}</span>
+    </Alert>
   );
 };
 

package/src/components/Switch/Switch.tsx

@@ -24,7 +24,7 @@
  *   const [checked, setChecked] = React.useState(false);
  *   
  *   return (
- *     <div className="flex items-center gap-2">
+ *     <>
  *       <Switch 
  *         checked={checked} 
  *         onCheckedChange={setChecked}
@@ -33,7 +33,7 @@
  *       <label htmlFor="notifications">
  *         Enable notifications
  *       </label>
- *     </div>
+ *     </>
  *   );
  * }
  * ```
@@ -44,12 +44,12 @@
  * 
  * function FormExample() {
  *   return (
- *     <div className="flex items-center gap-2">
+ *     <>
  *       <Switch id="terms" />
  *       <Label htmlFor="terms">
  *         I agree to the terms and conditions
  *       </Label>
- *     </div>
+ *     </>
  *   );
  * }
  * ```

package/src/components/Table/Table.tsx

@@ -85,7 +85,7 @@
  * - Caption for table description
  *
  * @dependencies
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling
  */
 

package/src/components/Tabs/Tabs.tsx

@@ -199,7 +199,7 @@ export interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof
  * @example
  * ```tsx
  * <TabsContent value="tab1">
- *   <div>Content for tab 1</div>
+ *   <section>Content for tab 1</section>
  * </TabsContent>
  * ```
  */

package/src/components/Textarea/Textarea.tsx

@@ -93,35 +93,33 @@ export interface TextareaProps
  * />
  * ```
  */
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, variant = 'default', size = 'md', error, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          // Base styles (matching Input component)
-          'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          
-          // Variant styles
-          {
-            'border-input': variant === 'default' && !error,
-            'border-destructive focus-visible:ring-destructive': variant === 'destructive' || error,
-          },
-          
-          // Size styles
-          {
-            'min-h-[60px] px-2 py-1 text-xs': size === 'sm',
-            'min-h-[80px] px-3 py-2 text-sm': size === 'md',
-            'min-h-[100px] px-4 py-3 text-base': size === 'lg',
-          },
-          
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+function Textarea({ className, variant = 'default', size = 'md', error, ref, ...props }: TextareaProps & { ref?: React.Ref<HTMLTextAreaElement> }) {
+  return (
+    <textarea
+      className={cn(
+        // Base styles (matching Input component)
+        'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        
+        // Variant styles
+        {
+          'border-input': variant === 'default' && !error,
+          'border-destructive focus-visible:ring-destructive': variant === 'destructive' || error,
+        },
+        
+        // Size styles
+        {
+          'min-h-[60px] px-2 py-1 text-xs': size === 'sm',
+          'min-h-[80px] px-3 py-2 text-sm': size === 'md',
+          'min-h-[100px] px-4 py-3 text-base': size === 'lg',
+        },
+        
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
 
 Textarea.displayName = 'Textarea';
 

package/src/components/Toast/Toast.tsx

@@ -81,7 +81,7 @@
  * @dependencies
  * - @radix-ui/react-toast - Core toast functionality
  * - lucide-react - Icons
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling
  */
 
@@ -267,6 +267,10 @@ ToastDescription.displayName = ToastPrimitives.Description.displayName
 
 export interface ToastProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> {}
 
+/**
+ * Type for toast action elements.
+ * Represents a React element that can be used as a toast action button.
+ */
 export interface ToastActionElement extends React.ReactElement<typeof ToastAction> {}
 
 /**

package/src/components/Tooltip/Tooltip.tsx

@@ -36,10 +36,10 @@
  *       <Button>Advanced Tooltip</Button>
  *     </TooltipTrigger>
  *     <TooltipContent side="top" className="bg-main-500 text-main-50">
- *       <div className="space-y-1">
+ *       <section className="space-y-1">
  *         <p className="font-semibold">Advanced Tooltip</p>
  *         <p className="text-xs">With custom styling</p>
- *       </div>
+ *       </section>
  *     </TooltipContent>
  *   </TooltipRoot>
  * </TooltipProvider>
@@ -67,7 +67,7 @@
  *
  * @dependencies
  * - @radix-ui/react-tooltip - Core tooltip functionality
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling and animations
  */