@clubmed/trident-ui/ui/hooks/useSlots.d.ts

Shared ClubMed React UI components

import { ReactNode } from 'react';
/**
 * A hook that organizes React children into named slots based on their `data-slot` attribute.
 *
 * Children without a `data-slot` attribute or with a slot name not in the allowed list
 * are collected under the default "children" slot. This pattern enables flexible component
 * composition similar to named slots in other frameworks.
 *
 * @param children - The React children to organize into slots. Can be null, boolean, or undefined.
 * @param allowed - Optional array of allowed slot names. If empty, all slot names are accepted.
 *                  If provided, only children with matching slot names will be organized into their
 *                  respective slots; others fall back to the "children" slot.
 *
 * @returns A record mapping slot names to arrays of React nodes. Always includes a "children" slot
 *          for unslotted or disallowed content.
 *
 * @example
 * ```tsx
 * function Card({ children }: { children: ReactNode }) {
 *   const slots = useSlots(children, ['header', 'footer']);
 *
 *   return (
 *     <div>
 *       <header>{slots.header}</header>
 *       <main>{slots.children}</main>
 *       <footer>{slots.footer}</footer>
 *     </div>
 *   );
 * }
 *
 * // Usage:
 * <Card>
 *   <div data-slot="header">Card Header</div>
 *   <p>Main content goes here</p>
 *   <div data-slot="footer">Card Footer</div>
 * </Card>
 * ```
 */
export declare function useSlots(children: ReactNode | null | boolean | undefined, allowed?: string[]): Record<string, ReactNode[]>;