@reformer/ui-kit 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alexandr Bukhtatyy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# @reformer/ui-kit
+
+Headless UI components for `@reformer/core` - build accessible, fully customizable form interfaces.
+
+## Features
+
+- **Headless** - No default styles, complete design freedom
+- **Compound Components** - Declarative, composable API
+- **Render Props** - Full control over rendering
+- **TypeScript** - Fully typed with generics support
+- **Tree-shakable** - Import only what you need
+
+## Installation
+
+```bash
+npm install @reformer/cdk @reformer/core
+```
+
+## Components
+
+### FormArray
+
+Manage dynamic form arrays with add/remove functionality.
+
+```tsx
+import { FormArray } from '@reformer/cdk/form-array';
+
+<FormArray.Root control={form.items}>
+  <FormArray.Empty>
+    <p>No items yet</p>
+  </FormArray.Empty>
+
+  <FormArray.List>
+    {({ control, index, remove }) => (
+      <div>
+        <span>Item #{index + 1}</span>
+        <ItemForm control={control} />
+        <button onClick={remove}>Remove</button>
+      </div>
+    )}
+  </FormArray.List>
+
+  <FormArray.AddButton>Add Item</FormArray.AddButton>
+</FormArray.Root>;
+```
+
+### FormWizard
+
+Build multi-step form wizards with validation.
+
+```tsx
+import { FormWizard } from '@reformer/cdk/form-wizard';
+
+<FormWizard form={form} config={config}>
+  <FormWizard.Indicator steps={STEPS}>
+    {({ steps, goToStep }) => (
+      <nav>
+        {steps.map((step) => (
+          <button
+            key={step.number}
+            onClick={() => goToStep(step.number)}
+            disabled={!step.canNavigate}
+          >
+            {step.title}
+          </button>
+        ))}
+      </nav>
+    )}
+  </FormWizard.Indicator>
+
+  <FormWizard.Step component={Step1} control={form} />
+  <FormWizard.Step component={Step2} control={form} />
+
+  <FormWizard.Actions onSubmit={handleSubmit}>
+    {({ prev, next, submit, isFirstStep, isLastStep }) => (
+      <div>
+        {!isFirstStep && <button {...prev}>Back</button>}
+        {!isLastStep ? <button {...next}>Next</button> : <button {...submit}>Submit</button>}
+      </div>
+    )}
+  </FormWizard.Actions>
+</FormWizard>;
+```
+
+## Hooks
+
+For full customization, use the hooks directly:
+
+```tsx
+import { useFormArray } from '@reformer/cdk/form-array';
+import { useFormWizard } from '@reformer/cdk/form-wizard';
+```
+
+## License
+
+MIT

package/dist/components/form-array/form-array-section.d.ts

@@ -0,0 +1,60 @@
+import { ComponentType, ReactNode } from 'react';
+import { ArrayNode, FieldPathNode, FormArrayProxy, FormFields, FormProxy } from '@reformer/core';
+import { FieldWrapperProps } from '@reformer/renderer-react';
+export interface FormArraySectionProps<T extends FormFields> {
+    /**
+     * Резолвится автоматически: уже-резолвленный ArrayNode/FormArrayProxy ИЛИ
+     * FieldPathNode (path.<arrayField>) — в этом случае через `form` + navigator.
+     */
+    control: FormArrayProxy<T> | ArrayNode<T> | FieldPathNode<unknown, unknown> | undefined;
+    /** React FC получает `control: FormProxy<T>` для каждого элемента. */
+    itemComponent: ComponentType<{
+        control: FormProxy<T>;
+    }>;
+    /** Заголовок секции (рендерится h3). */
+    title?: string;
+    /** Метка для каждого item — строка-префикс или функция. */
+    itemLabel?: string | ((control: FormProxy<T>, index: number) => string);
+    /** Текст кнопки добавления. По умолчанию `'+ Добавить'`. */
+    addButtonLabel?: string;
+    /** Текст кнопки удаления. По умолчанию `'Удалить'`. */
+    removeButtonLabel?: string;
+    /** Сообщение пустого состояния. */
+    emptyMessage?: string;
+    /** Подсказка под пустым состоянием. */
+    emptyMessageHint?: string;
+    /**
+     * Условие видимости секции. Если `false` — секция полностью скрыта.
+     * Удобно для toggle-чекбоксов вида «У меня есть имущество».
+     */
+    hasItems?: boolean;
+    /**
+     * Plain-leaf значения для новых items (передаётся в `FormArray.AddButton`).
+     * НЕ FieldConfig — только примитивы по форме item-типа `T`.
+     *
+     * Тип `Partial<T>` — TS проверит, что initialValue совместим с типом элемента.
+     * Передавайте generic явно для лучшей type-safety:
+     * `<FormArraySection<PropertyItem> initialValue={createPropertyItem()} ...>`.
+     */
+    initialValue?: Partial<T>;
+    /** Показывать «Удалить» когда остался один элемент. По умолчанию `false`. */
+    showRemoveOnSingle?: boolean;
+    /** Максимум items — AddButton отключается при достижении. */
+    maxItems?: number;
+    /** Внешний className секции. */
+    className?: string;
+    /** Класс card-обёртки каждого item. */
+    cardClassName?: string;
+    /**
+     * FormProxy. Авто-инъектится `RenderNodeComponent` через
+     * `__selfManagedChildren` маркер. Передавать вручную — только при
+     * использовании вне стандартного render-tree.
+     */
+    form?: FormProxy<unknown>;
+    /**
+     * Field wrapper для дочерних полей. Авто-инъектится `RenderNodeComponent`;
+     * переопределить для использования другого wrapper в этой секции.
+     */
+    fieldWrapper?: ComponentType<FieldWrapperProps>;
+}
+export declare function FormArraySection<T extends FormFields>({ control, itemComponent: ItemComponent, title, itemLabel, addButtonLabel, removeButtonLabel, emptyMessage, emptyMessageHint, hasItems, initialValue, showRemoveOnSingle, maxItems, className, cardClassName, form, }: FormArraySectionProps<T>): ReactNode;

package/dist/components/form-array/index.d.ts

@@ -0,0 +1,2 @@
+export { FormArraySection } from './form-array-section';
+export type { FormArraySectionProps } from './form-array-section';

package/dist/components/form-wizard/form-wizard-actions.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { FormWizardActionsRenderProps } from '@reformer/cdk/form-wizard';
+export interface FormWizardActionsProps extends FormWizardActionsRenderProps {
+    className?: string;
+    prevLabel?: string;
+    nextLabel?: string;
+    submitLabel?: string;
+    validatingLabel?: string;
+    submittingLabel?: string;
+}
+export declare const FormWizardActions: FC<FormWizardActionsProps>;

package/dist/components/form-wizard/form-wizard-progress.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from 'react';
+import { FormWizardProgressRenderProps } from '@reformer/cdk/form-wizard';
+export interface FormWizardProgressProps extends FormWizardProgressRenderProps {
+    className?: string;
+    format?: (props: FormWizardProgressRenderProps) => ReactNode;
+}
+export declare const FormWizardProgress: FC<FormWizardProgressProps>;

package/dist/components/form-wizard/form-wizard.d.ts

@@ -0,0 +1,40 @@
+import { ComponentType, ReactElement, ReactNode } from 'react';
+import { FormWizard as FormWizardHeadless, FormWizardActionsProps as HeadlessFormWizardActionsProps, FormWizardHandle, FormWizardProps as FormWizardHeadlessProps } from '@reformer/cdk/form-wizard';
+import { FormProxy } from '@reformer/core';
+import { RenderNode } from '@reformer/renderer-react';
+/**
+ * Полиморфное тело шага.
+ *
+ * - FC получает `control={form}`.
+ * - ReactNode рендерится напрямую (статический JSX).
+ * - RenderNode<T> рендерится через `<RenderNodeComponent>`.
+ */
+export type FormWizardStepBody<T> = ComponentType<{
+    control: FormProxy<T>;
+}> | ReactNode | RenderNode<T>;
+export interface FormWizardStep<T> {
+    /** Step number (1-based). */
+    number: number;
+    /** Step title shown in indicator. */
+    title: string;
+    /** Optional icon (string или ReactNode). Передаётся в headless Indicator. */
+    icon?: string;
+    /** Body — FC | ReactNode | RenderNode<T>. */
+    body: FormWizardStepBody<T>;
+}
+export interface FormWizardProps<T extends Record<string, any>> extends FormWizardHeadlessProps<T> {
+    className?: string;
+    steps: FormWizardStep<T>[];
+    onSubmit: HeadlessFormWizardActionsProps['onSubmit'];
+}
+declare const FormWizardForwarded: <T extends Record<string, any>>(props: FormWizardProps<T> & {
+    ref?: React.Ref<FormWizardHandle<T>>;
+}) => ReactElement | null;
+type FormWizardCompound = typeof FormWizardForwarded & {
+    Indicator: typeof FormWizardHeadless.Indicator;
+    Step: typeof FormWizardHeadless.Step;
+    Actions: typeof FormWizardHeadless.Actions;
+    Progress: typeof FormWizardHeadless.Progress;
+};
+declare const FormWizard: FormWizardCompound;
+export { FormWizard };

package/dist/components/form-wizard/index.d.ts

@@ -0,0 +1,8 @@
+export { FormWizard } from './form-wizard';
+export type { FormWizardProps, FormWizardStep, FormWizardStepBody } from './form-wizard';
+export { StepIndicator } from './step-indicator';
+export type { StepIndicatorProps } from './step-indicator';
+export { FormWizardActions } from './form-wizard-actions';
+export type { FormWizardActionsProps } from './form-wizard-actions';
+export { FormWizardProgress } from './form-wizard-progress';
+export type { FormWizardProgressProps } from './form-wizard-progress';

package/dist/components/form-wizard/step-indicator.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { FormWizardIndicatorStepWithState, FormWizardIndicatorRenderProps } from '@reformer/cdk/form-wizard';
+export interface StepIndicatorProps extends FormWizardIndicatorRenderProps {
+    className?: string;
+    /** Aria-label контейнера навигации. По умолчанию «Шаги формы». */
+    navAriaLabel?: string;
+    /** Кастомный шаблон aria-label для шага. Получает {step}. */
+    stepAriaLabel?: (step: FormWizardIndicatorStepWithState) => string;
+}
+export declare const StepIndicator: FC<StepIndicatorProps>;

package/dist/components/state/error-state.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface ErrorStateProps {
+    error: string;
+    title?: string;
+    onRetry?: () => void;
+    retryLabel?: string;
+    className?: string;
+}
+export declare function ErrorState({ error, title, onRetry, retryLabel, className, }: ErrorStateProps): ReactNode;
+export {};

package/dist/components/state/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorState } from './error-state';
+export { LoadingState } from './loading-state';

package/dist/components/state/loading-state.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface LoadingStateProps {
+    title?: string;
+    subtitle?: string;
+    className?: string;
+}
+export declare function LoadingState({ title, subtitle, className, }: LoadingStateProps): ReactNode;
+export {};

package/dist/components/ui/async-boundary.d.ts

@@ -0,0 +1,63 @@
+import { ComponentType, ReactNode } from 'react';
+/** Состояние асинхронной операции, ожидаемое {@link AsyncBoundary}. */
+export type AsyncStatus = 'loading' | 'error' | 'ready';
+/** Props компонента {@link AsyncBoundary}. */
+export interface AsyncBoundaryProps {
+    /** Текущее состояние асинхронной операции. Управляется снаружи. */
+    status: AsyncStatus;
+    /** Компонент, рендерящийся при `status === 'loading'`. Без props. Если не передан — `null`. */
+    LoadingComponent?: ComponentType;
+    /** Компонент, рендерящийся при `status === 'error'`. Без props. Если не передан — `null`. */
+    ErrorComponent?: ComponentType;
+    /** Контент, рендерящийся при `status === 'ready'`. */
+    children?: ReactNode;
+}
+/**
+ * Контейнер с тремя состояниями (`loading`/`error`/`ready`). В состоянии `ready`
+ * отображает `children`. Для loading/error используются переданные slot-компоненты
+ * (`ComponentType`, без props — для кастомизации передай тонкую обёртку).
+ *
+ * Это не Suspense-boundary: ничего не throw'ится, состоянием управляешь сам.
+ *
+ * @example Загрузка списка с обработкой ошибки
+ * ```tsx
+ * import { useEffect, useState } from 'react';
+ * import { AsyncBoundary, type AsyncStatus } from '@reformer/ui-kit';
+ *
+ * function CountriesPage() {
+ *   const [status, setStatus] = useState<AsyncStatus>('loading');
+ *   const [countries, setCountries] = useState<string[]>([]);
+ *
+ *   useEffect(() => {
+ *     fetch('/api/countries')
+ *       .then((r) => r.json())
+ *       .then((d) => { setCountries(d); setStatus('ready'); })
+ *       .catch(() => setStatus('error'));
+ *   }, []);
+ *
+ *   return (
+ *     <AsyncBoundary
+ *       status={status}
+ *       LoadingComponent={() => <p>Загружаем страны...</p>}
+ *       ErrorComponent={() => <p>Ошибка загрузки</p>}
+ *     >
+ *       <ul>{countries.map((c) => <li key={c}>{c}</li>)}</ul>
+ *     </AsyncBoundary>
+ *   );
+ * }
+ * ```
+ *
+ * @example Внутри RenderSchema (статус подставляется через `patchProps`)
+ * ```tsx
+ * import { AsyncBoundary } from '@reformer/ui-kit';
+ *
+ * createRenderSchema((path) => ({
+ *   selector: 'data-boundary',
+ *   component: AsyncBoundary,
+ *   componentProps: { status: 'loading', LoadingComponent: Spinner },
+ *   children: [...],
+ * }));
+ * // позже: schema.node('data-boundary').patchProps({ status: 'ready' });
+ * ```
+ */
+export declare function AsyncBoundary({ status, LoadingComponent, ErrorComponent, children, }: AsyncBoundaryProps): ReactNode;

package/dist/components/ui/box.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+/**
+ * Props компонента Box
+ */
+export interface BoxProps {
+    /** CSS класс для стилизации */
+    className?: string;
+    /** Дочерние элементы */
+    children?: ReactNode;
+}
+/**
+ * Box - базовый контейнер-обёртка.
+ *
+ * Простой `<div>` для группировки элементов в `RenderSchema`. Используйте
+ * `className` для настройки layout через atomic CSS (Tailwind).
+ *
+ * @example Вертикальный список полей в RenderSchema
+ * ```typescript
+ * {
+ *   component: Box,
+ *   componentProps: { className: 'flex flex-col gap-4' },
+ *   children: [
+ *     { component: path.email },
+ *     { component: path.password },
+ *   ],
+ * }
+ * ```
+ *
+ * @example Двухколоночная сетка
+ * ```typescript
+ * {
+ *   component: Box,
+ *   componentProps: { className: 'grid grid-cols-2 gap-4' },
+ *   children: [
+ *     { component: path.firstName },
+ *     { component: path.lastName },
+ *   ],
+ * }
+ * ```
+ */
+export declare function Box({ className, children }: BoxProps): ReactNode;

package/dist/components/ui/button.d.ts

@@ -0,0 +1,35 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Базовая кнопка на shadcn/Radix `Slot`. Поддерживает 6 вариантов
+ * (`default`/`destructive`/`outline`/`secondary`/`ghost`/`link`), 6 размеров
+ * (`default`/`sm`/`lg`/`icon`/`icon-sm`/`icon-lg`) и `asChild` для замены
+ * корневого DOM-узла на дочерний элемент (например, `<Link>` из роутера).
+ *
+ * @example Variants matrix (для design-system документации)
+ * ```tsx
+ * import { Button } from '@reformer/ui-kit';
+ *
+ * {(['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const).map(
+ *   (v) => <Button key={v} variant={v}>{v}</Button>
+ * )}
+ * ```
+ *
+ * @example asChild + react-router Link (стили кнопки на анкоре)
+ * ```tsx
+ * import { Link } from 'react-router-dom';
+ * import { Button } from '@reformer/ui-kit';
+ *
+ * <Button asChild variant="outline" size="lg">
+ *   <Link to="/dashboard">Открыть дашборд</Link>
+ * </Button>
+ * ```
+ */
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button };

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+/** Props компонента {@link Checkbox}. */
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+    /** Дополнительный CSS-класс для самого input. */
+    className?: string;
+    /** Состояние чекбокса. `undefined` рендерится как `false`. */
+    value?: boolean;
+    /** Вызывается при изменении. Получает `event.target.checked`. */
+    onChange?: (value: boolean) => void;
+    /** Срабатывает при потере фокуса. */
+    onBlur?: () => void;
+    /** Подпись справа от чекбокса. Если опущена — рендерится только сам контрол. */
+    label?: string;
+    /** Блокирует переключение. */
+    disabled?: boolean;
+    /** Test-id для e2e (используется как `data-testid` на input). */
+    'data-testid'?: string;
+}
+/**
+ * Чекбокс с опциональной подписью справа. Контракт `value`/`onChange` —
+ * `boolean`, не строка.
+ *
+ * `FormField` из `@reformer/ui-kit` детектит `Checkbox` и не рендерит верхний
+ * `Label`, чтобы не дублировать подпись.
+ *
+ * @example Согласие с условиями
+ * ```tsx
+ * import { Checkbox } from '@reformer/ui-kit';
+ *
+ * <Checkbox
+ *   value={agree}
+ *   onChange={setAgree}
+ *   label="Согласен с условиями обработки персональных данных"
+ * />
+ * ```
+ *
+ * @example Без подписи (label справа добавляется снаружи)
+ * ```tsx
+ * import { Checkbox } from '@reformer/ui-kit';
+ *
+ * <div className="flex items-center gap-2">
+ *   <Checkbox value={hasMortgage} onChange={setHasMortgage} />
+ *   <span>У меня уже есть ипотека</span>
+ * </div>
+ * ```
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };

package/dist/components/ui/collapsible.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+/**
+ * Props компонента Collapsible
+ */
+export interface CollapsibleProps {
+    /** Заголовок секции */
+    title: string;
+    /** Начальное состояние (развёрнуто по умолчанию) */
+    defaultOpen?: boolean;
+    /** CSS класс для контейнера */
+    className?: string;
+    /** CSS класс для заголовка */
+    titleClassName?: string;
+    /** CSS класс для контента */
+    contentClassName?: string;
+    /** Дочерние элементы */
+    children?: ReactNode;
+}
+/**
+ * Collapsible - сворачиваемая секция формы.
+ *
+ * Заголовок-кнопка переключает видимость `children`. Состояние локальное
+ * (`useState`), внешний control пока не поддерживается — для управляемого
+ * варианта используй `RenderSchema.node('selector').setHidden(true)` поверх
+ * обычного `Box`.
+ *
+ * @example Свёрнута по умолчанию
+ * ```typescript
+ * {
+ *   component: Collapsible,
+ *   componentProps: {
+ *     title: 'Дополнительные параметры',
+ *     defaultOpen: false,
+ *     className: 'border rounded p-4',
+ *     titleClassName: 'font-semibold w-full text-left',
+ *   },
+ *   children: [
+ *     { component: path.notes },
+ *     { component: path.tags },
+ *   ],
+ * }
+ * ```
+ *
+ * @example Развёрнута, со специальным фоном контента
+ * ```typescript
+ * {
+ *   component: Collapsible,
+ *   componentProps: {
+ *     title: 'Адрес доставки',
+ *     defaultOpen: true,
+ *     contentClassName: 'mt-2 bg-gray-50 p-3 rounded',
+ *   },
+ *   children: [
+ *     { component: path.deliveryAddress },
+ *   ],
+ * }
+ * ```
+ */
+export declare function Collapsible({ title, defaultOpen, className, titleClassName, contentClassName, children, }: CollapsibleProps): ReactNode;

package/dist/components/ui/example-card.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+/** Props компонента {@link ExampleCard}. */
+export interface ExampleCardProps {
+    /** Заголовок карточки (обязательный). */
+    title: string;
+    /** Описание под заголовком. */
+    description?: string;
+    /** Контент примера, отображаемый в режиме «пример». */
+    children: React.ReactNode;
+    /** Текст исходного кода, копируемый в clipboard в режиме «код». */
+    code: string;
+    /** Дополнительный CSS-класс контейнера. */
+    className?: string;
+    /** Tailwind-класс фона карточки. По умолчанию `'bg-white'`. */
+    bgColor?: string;
+}
+/**
+ * Карточка-обёртка для демонстрации компонентов в playground: заголовок,
+ * описание, область с примером и кнопка переключения исходного кода с
+ * copy-to-clipboard.
+ *
+ * Утилита для playground/документации, не для продакшена.
+ *
+ * @example Базовое использование
+ * ```tsx
+ * import { ExampleCard, Input } from '@reformer/ui-kit';
+ * import { useState } from 'react';
+ *
+ * function Demo() {
+ *   const [v, setV] = useState<string | null>(null);
+ *   return (
+ *     <ExampleCard
+ *       title="Input — базовый"
+ *       description="Однострочное поле с placeholder"
+ *       code={`<Input value={v} onChange={setV} placeholder="Email" />`}
+ *     >
+ *       <Input value={v} onChange={setV} placeholder="Email" />
+ *     </ExampleCard>
+ *   );
+ * }
+ * ```
+ *
+ * @example С кастомным фоном (для подсветки группы)
+ * ```tsx
+ * import { ExampleCard, Button } from '@reformer/ui-kit';
+ *
+ * <ExampleCard
+ *   title="Destructive button"
+ *   description="Кнопка опасного действия"
+ *   bgColor="bg-red-50"
+ *   code={`<Button variant="destructive">Delete</Button>`}
+ * >
+ *   <Button variant="destructive">Delete</Button>
+ * </ExampleCard>
+ * ```
+ */
+export declare function ExampleCard({ title, description, children, code, className, bgColor, }: ExampleCardProps): import("react/jsx-runtime").JSX.Element;