4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T14a8,'use client'; import * as React from 'react'; const DEFAULT_SLOT = 'DEFAULT'; type Slot = React.ReactNode; type Slots = Record; type SlotName = typeof DEFAULT_SLOT | (string & {}); type SlotContext = { scope: string }; const SlotContext = React.createContext(null); export function useSlots(caller: string) { const context = React.use(SlotContext); if (!context) { throw new Error(`${caller} must be used inside a Slottable`); } return context; } type Slottable = { scope?: string; strictDefault?: boolean; children: React.ReactNode; }; export function Slottable({ children, scope = 'Slottable', strictDefault = true }: Slottable) { const { slots, template, defaultSlot } = React.useMemo(() => { const slots: Slots = {}; const defaultSlot: React.ReactNode[] = []; let template: TemplateElement | undefined; React.Children.forEach(children, child => { if (isSlot(child)) { const { name: slot = DEFAULT_SLOT, children } = child.props; if (slot in slots) { throw new Error(`Duplicate slot: ${slot} was found`); } slots[slot] = children; return; } if (isTemplate(child)) { if (template) { throw new Error( 'A duplicate Template was found. Only one direct Template child is allowed', ); } template = child; return; } defaultSlot.push(child); }); return { slots, template, defaultSlot, }; }, [children]); if (template == null) { throw new Error(`A single template is required as a direct child of ${scope}`); } const [tree, foundDefault] = React.useMemo( () => traverse(template, { placeholder(placeholder) { const slot = placeholder.props.name ?? DEFAULT_SLOT; const isDefaultSlot = slot === DEFAULT_SLOT; const outlet = isDefaultSlot ? defaultSlot : slots[slot]; return outlet ?? null; }, }), [children], ); const renderDefault = !strictDefault && !foundDefault; const context: SlotContext = { scope }; return ( {tree} {renderDefault && defaultSlot} ); } type Visitors = { placeholder: (element: SlotPlaceholderElement) => React.ReactNode; }; function traverse(template: TemplateElement, visitors: Visitors) { const { placeholder } = visitors; let foundDefault = false; const traverseChildren = (children: React.ReactNode): React.ReactNode[] => { return ( React.Children.map(children, child => { if (isSlotPlaceholder(child)) { const slot = child.props.name ?? DEFAULT_SLOT; const isDefault = slot === DEFAULT_SLOT; if (isDefault && !foundDefault) foundDefault = true; return placeholder(child); } if (isParent(child)) { const { children, ...props } = child.props; return React.cloneElement(child, props, ...traverseChildren(children)); } return child; }) ?? [] ); }; return [traverseChildren(template.props.children), foundDefault as boolean] as const; } const TemplateContext = React.createContext(false); type TemplateProps = { children: React.ReactNode; }; export function Template({ children }: TemplateProps) { const hasTemplate = React.use(TemplateContext); if (hasTemplate) { throw new Error('A duplicate Template was found. Only one direct Template child is allowed'); } return {children}; } type SlotPlaceholderProps = { name?: SlotName; children?: React.ReactNode; }; export function SlotPlaceholder(_props: SlotPlaceholderProps) { return null; } type SlotProps = { name?: SlotName; children: React.ReactNode; }; export function Slot({ name = DEFAULT_SLOT, children }: SlotProps) { const { scope } = useSlots(`Slot: ${name}`); React.useEffect(() => { throw new Error(`Slot: ${name} must be a direct child of ${scope}`); }, [name, scope, children]); return null; } type SlotElement = React.ReactElement; function isSlot(child: React.ReactNode): child is SlotElement { const isElement = React.isValidElement(child); return isElement && child.type === Slot; } type TemplateElement = React.ReactElement; function isTemplate(child: React.ReactNode): child is TemplateElement { const isElement = React.isValidElement(child); return isElement && child.type === Template; } type SlotPlaceholderElement = React.ReactElement; function isSlotPlaceholder(child: React.ReactNode): child is SlotPlaceholderElement { const isElement = React.isValidElement(child); return isElement && child.type === SlotPlaceholder; } type ParentElement = React.ReactElement>; function isParent(child: React.ReactNode): child is ParentElement { const isElement = React.isValidElement(child); return isElement && child.props.children !== undefined; } // TODO: later add ref to the Provider after // TODO: support for Fragment refs' is added 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"components/slot.tsx","content":"$50","type":"registry:component","target":"components/ui/slot.tsx"}],"className":"h-[70svh] min-h-80"}]]}]