alouette/dist/definitions/ui/containers/EditableSection.d.ts

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

import { type ReactNode } from "react";
import type { Accent } from "../../core/AlouetteConfig";
import type { PressableBoxProps } from "../actions/PressableBox";
import type { SVGIconElement } from "../primitives/Icon";
import { type BoxProps } from "./Box";
export interface EditableSectionProps extends Pick<BoxProps, "className"> {
    accent?: Accent;
    /** Heading of the section, and the label of the region for assistive tech. */
    title: string;
    /**
     * Rendered beside the title — a Badge, or anything short. It stays out of
     * the region's accessible name, which is the title alone.
     */
    titleBadge?: ReactNode;
    /** Muted helper text under the title. */
    details?: ReactNode;
    /** Names the edit button for assistive tech — it has no visible text. */
    editAriaLabel: string;
    editIcon?: SVGIconElement;
    /** Variant of the edit IconButton. */
    editIconVariant?: PressableBoxProps["variant"];
    disabled?: boolean;
    onEdit: () => void;
    /** The read-only body: as many blocks as the section needs. */
    children: ReactNode;
}
/**
 * A titled section holding a block of read-only content behind a single edit
 * affordance. Where EditableItem is one label with a summary that fits beside
 * it, this is a section whose value spans several lines. Owns no editor: pair
 * it with FormEditableSection for a react-hook-form modal, or compose your own
 * Modal from `onEdit`.
 *
 * It brings no material of its own — the caller picks it through `className`:
 * `surface` for a card, `surface lowered`, an outline, or nothing inside a
 * container that already has one.
 */
export declare function EditableSection({ title, titleBadge, details, editAriaLabel, editIcon, editIconVariant, accent, className, disabled, onEdit, children, }: EditableSectionProps): ReactNode;
/**
 * @deprecated Renamed `EditableSection`, which applies no material itself:
 * write `<EditableSection className="surface">`.
 */
export declare function EditableSurface({ className, ...props }: EditableSectionProps): ReactNode;
/** @deprecated Renamed `EditableSectionProps`. */
export type EditableSurfaceProps = EditableSectionProps;
//# sourceMappingURL=EditableSection.d.ts.map