TrueSlots. Finally.

describe.true.tsx

const $LoginForm = createComponentDescriptor('@myapp/LoginForm', {} as LoginFormProps, {
  Input: $Input,
  Button: $Button,
});

type LoginFormProps = {
  header?: Slot< SlotContent >;   // 1️⃣Теперь это не boolean, а тоже слот,
                                  // чтобы можно было его убрать
                                  
  title?: Slot< SlotContent >;    // 2️⃣ Заголовок
  titleEl?: SlotElement;          // и его элемент (никаких React.ReactNode!)
  
  children?: Slot< SlotContent >; // 3️⃣ Да, можно будет влиять на содержимое формы
  controls?: Slot< SlotContent >; // 4️⃣ Добавить кнопку «Отмена» через перегрузку слота, no problem
  
  deps:? Deps< typeof $LoginForm.deps >; // 5️⃣Зависимости
  theme?: Theme<{...}>;                  // 6️⃣Cпека темы
  
  email?: string;
  password?: string;
}

const LoginForm = $LoginForm.createComponent((
  jsx,
  { email, passwordm titleEl },
  { theme, Slot },
  { Input, Button },
) => (
  <Form>
    <Slot name="header" is={ <div className={theme.for('header')}/> }>
      <Slot name="title" is={ [titleEl, <h2/>] }>Вход</Slot>
    </Slot>

    <Slot is={ <div className={theme.for('content')}/> }>
      <Input name="email" value={ email } />
      <Input name="password" value={ password } />
    </Slot>

    <Slot name="controls" is={ <div className={theme.for('controls')}/> }>
      <Button kind="primary"/>
    </Slot>
  </Form>
));