@marwes-ui/react 0.0.3

package/dist/index.d.ts

@@ -0,0 +1,779 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Preset, ThemeOverrides, ThemeMode, System, Theme, ButtonOptions, InputOptions, iconRegistry, IconSize, IconStrokeWidth, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize } from '@marwes-ui/core';
+export { Preset, System, Theme, ThemeOverrides } from '@marwes-ui/core';
+import * as React from 'react';
+
+type MarwesProviderProps = {
+    preset?: Preset;
+    theme?: ThemeOverrides;
+    /**
+     * Current theme mode. Determines light or dark color palette.
+     * When changed, efficiently switches theme colors without recreating the entire system.
+     */
+    mode?: ThemeMode;
+    /**
+     * Callback fired when mode should change.
+     * Users are responsible for managing mode state and persistence (e.g., localStorage).
+     *
+     * Example with persistence:
+     * ```tsx
+     * const [mode, setMode] = useState<ThemeMode>(
+     *   () => (localStorage.getItem('theme-mode') as ThemeMode) ?? 'light'
+     * );
+     *
+     * const handleModeChange = (newMode: ThemeMode) => {
+     *   setMode(newMode);
+     *   localStorage.setItem('theme-mode', newMode);
+     * };
+     *
+     * <MarwesProvider mode={mode} onModeChange={handleModeChange}>
+     * ```
+     */
+    onModeChange?: (mode: ThemeMode) => void;
+    children: React.ReactNode;
+};
+declare function MarwesProvider({ preset, theme, mode, onModeChange, children, }: MarwesProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useSystem(): System;
+
+declare function useTheme(): Theme;
+
+type ButtonProps = ButtonOptions & {
+    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    className?: string;
+};
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Semantic Button Variants - AI-Friendly Components
+ *
+ * These variants encode best practices and automatically set AI-friendly
+ * metadata, making it easier for both developers and AI tools to understand
+ * the purpose and behavior of each button.
+ */
+type DangerButtonProps = Omit<ButtonProps, "tone" | "action"> & {
+    /**
+     * Override automatic confirmation requirement.
+     * Defaults to `true` for destructive actions.
+     */
+    confirmation?: boolean;
+};
+/**
+ * DangerButton - For destructive actions like delete, remove, or irreversible operations.
+ *
+ * **AI Context:**
+ * - Sets `tone="danger"` for visual warning
+ * - Sets `action="delete"` to indicate destructive behavior
+ * - Enables confirmation by default
+ * - Adds `data-destructive="true"` for AI parsing
+ *
+ * @example
+ * ```tsx
+ * import { DangerButton } from "@marwes-ui/react";
+ *
+ * export function Example() {
+ *   return <DangerButton onClick={deleteProject}>Delete Project</DangerButton>;
+ * }
+ * ```
+ */
+declare function DangerButton(props: DangerButtonProps): react_jsx_runtime.JSX.Element;
+type CreateButtonProps = Omit<ButtonProps, "action">;
+/**
+ * CreateButton - For creation actions like adding new items or entities.
+ *
+ * **AI Context:**
+ * - Sets `action="create"` to indicate creation behavior
+ * - Uses primary tone by default
+ * - Adds `data-creative="true"` for AI parsing
+ *
+ * @example
+ * ```tsx
+ * <CreateButton onClick={createProject}>
+ *   New Project
+ * </CreateButton>
+ * ```
+ */
+declare function CreateButton(props: CreateButtonProps): react_jsx_runtime.JSX.Element;
+type SubmitButtonProps = Omit<ButtonProps, "action" | "as">;
+/**
+ * SubmitButton - For form submissions.
+ *
+ * **AI Context:**
+ * - Sets `action="submit"` and `type="submit"`
+ * - Adds `data-context="form-submit"` for AI parsing
+ * - Automatically uses button element (not anchor)
+ *
+ * @example
+ * ```tsx
+ * <SubmitButton>Submit</SubmitButton>
+ * ```
+ */
+declare function SubmitButton(props: SubmitButtonProps): react_jsx_runtime.JSX.Element;
+type CancelButtonProps = Omit<ButtonProps, "action" | "variant">;
+/**
+ * CancelButton - For cancel or reset actions.
+ *
+ * **AI Context:**
+ * - Sets `action="cancel"` to indicate cancellation
+ * - Uses ghost variant and secondary tone by default
+ * - Adds `data-cancel="true"` for AI parsing
+ *
+ * @example
+ * ```tsx
+ * <CancelButton onClick={handleCancel}>
+ *   Cancel
+ * </CancelButton>
+ * ```
+ */
+declare function CancelButton(props: CancelButtonProps): react_jsx_runtime.JSX.Element;
+type LinkButtonProps = Omit<ButtonProps, "action" | "as"> & {
+    /**
+     * The URL to navigate to. Required for LinkButton.
+     */
+    href: string;
+};
+/**
+ * LinkButton - For navigation actions that look like buttons.
+ *
+ * **AI Context:**
+ * - Sets `action="navigate"` to indicate navigation
+ * - Uses anchor element with button styling
+ * - Adds `data-navigation="true"` for AI parsing
+ *
+ * @example
+ * ```tsx
+ * <LinkButton href="/dashboard">
+ *   Go to Dashboard
+ * </LinkButton>
+ * ```
+ */
+declare function LinkButton(props: LinkButtonProps): react_jsx_runtime.JSX.Element;
+type PrimaryButtonProps = Omit<ButtonProps, "tone" | "as"> & {};
+/**
+ * PrimaryButton - For general use when no specific semantic variant fits.
+ *
+ * @example
+ * ```tsx
+ * <PrimaryButton onClick={handlePrimaryAction}>
+ *   Do something important
+ * </PrimaryButton>
+ * ```
+ */
+declare function PrimaryButton(props: PrimaryButtonProps): react_jsx_runtime.JSX.Element;
+type SecondaryButtonProps = Omit<ButtonProps, "tone" | "as"> & {};
+/**
+ * SecondaryButton - For general use when no specific semantic variant fits.
+ *
+ * @example
+ * ```tsx
+ * <SecondaryButton onClick={handleSecondaryAction}>
+ *   Do something important
+ * </SecondaryButton>
+ * ```
+ */
+declare function SecondaryButton(props: SecondaryButtonProps): react_jsx_runtime.JSX.Element;
+type TextButtonProps = Omit<ButtonProps, "tone" | "as"> & {};
+/**
+ * TextButton - For general use when no specific semantic variant fits.
+ *
+ * @example
+ * ```tsx
+ * <TextButton onClick={handleTextAction}>
+ *   Do something important
+ * </TextButton>
+ * ```
+ */
+declare function TextButton(props: TextButtonProps): react_jsx_runtime.JSX.Element;
+
+type InputProps = InputOptions & {
+    onValueChange?: (value: string) => void;
+    className?: string;
+};
+declare function Input(props: InputProps): react_jsx_runtime.JSX.Element;
+
+type IconName = keyof typeof iconRegistry;
+type IconProps = {
+    name: IconName;
+    /**
+     * Token ("xs"|"sm"|"md"|"lg") or a raw px number.
+     * Defaults to system.theme.icon.size
+     */
+    size?: IconSize | number;
+    /**
+     * Token ("xs"|"sm"|"md"|"lg") or a raw number.
+     * Defaults to system.theme.icon.strokeWidth
+     */
+    strokeWidth?: IconStrokeWidth | number;
+    /**
+     * Common props
+     */
+    className?: string;
+    "aria-label"?: string;
+    decorative?: boolean;
+};
+declare function Icon({ name, size, strokeWidth, className, "aria-label": ariaLabel, decorative, }: IconProps): react_jsx_runtime.JSX.Element;
+
+declare function useRenderKitDebug(renderKit: unknown, componentName: string): void;
+
+/**
+ * React adapter for Marwes Checkbox.
+ * - Renders a native <input type="checkbox"> using the core render kit.
+ * - Applies strict a11y fields and CSS vars.
+ * - Sets `indeterminate` via DOM property (not an HTML attribute).
+ */
+
+type CheckboxProps = CheckboxProps$1 & {
+    /**
+     * Called with the next checked value when the user toggles the checkbox.
+     * For indeterminate state: browser toggling typically results in `checked=true` and `indeterminate=false`
+     * unless you keep controlling it.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Escape hatch for consumers that want raw event access.
+     * (Optional – keep if you want parity with other components.)
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+};
+/**
+ * Checkbox (Atom)
+ *
+ * Low-level checkbox control built on a native `<input type="checkbox">`.
+ * Use this when you need custom layout or when the label/description is handled
+ * elsewhere (e.g. inside a list item, table row, or custom field wrapper).
+ *
+ * For most forms, prefer `CheckboxField`, which composes `Checkbox` with
+ * label/description/error wiring and consistent spacing.
+ *
+ * Accessibility
+ * - Provide **either** `ariaLabel` **or** `ariaLabelledBy` (or use `CheckboxField` which wires a `<label>`).
+ * - Use `ariaDescribedBy` to connect supporting text (help/error).
+ * - `indeterminate` is applied via a DOM property, not an HTML attribute.
+ *
+ * @example Basic (uncontrolled)
+ * ```tsx
+ * <Checkbox ariaLabel="Subscribe to updates" defaultChecked />
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [checked, setChecked] = React.useState(false);
+ *
+ * <Checkbox
+ *   ariaLabel="Accept terms"
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ * ```
+ *
+ * @example Indeterminate (mixed)
+ * ```tsx
+ * const [checked, setChecked] = React.useState(false);
+ * const [mixed, setMixed] = React.useState(true);
+ *
+ * <Checkbox
+ *   ariaLabel="Select all"
+ *   checked={checked}
+ *   indeterminate={mixed}
+ *   onCheckedChange={(next) => {
+ *     setMixed(false);   // first interaction clears mixed state
+ *     setChecked(next);
+ *   }}
+ * />
+ * ```
+ *
+ * @example With external label + description
+ * ```tsx
+ * const id = "terms";
+ * const descId = "terms-desc";
+ *
+ * <>
+ *   <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+ *     <Checkbox id={id} ariaDescribedBy={descId} />
+ *     <label htmlFor={id}>I accept the terms</label>
+ *   </div>
+ *   <div id={descId}>Required to continue.</div>
+ * </>
+ * ```
+ */
+declare function Checkbox(props: CheckboxProps): React.ReactElement;
+
+/**
+ * React adapter for Marwes Divider component.
+ * - Renders semantic <hr> using the core divider recipe.
+ * - Supports 7 size variants: xxs/xs/sm/md/lg/xl/xxl.
+ * - Supports horizontal and vertical orientation.
+ * - Figma reference: node-id=1-932
+ */
+
+type DividerProps = DividerOptions & Omit<React.HTMLAttributes<HTMLHRElement>, "children"> & {
+    /**
+     * Size variant for the divider.
+     * Maps to pixel values: xxs=1px, xs=8px, sm=16px, md=32px, lg=48px, xl=64px, xxl=80px
+     * @default "md"
+     */
+    size?: DividerSize;
+    /**
+     * Orientation of the divider.
+     * @default "horizontal"
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+};
+/**
+ * Divider
+ *
+ * Semantic separator rendered as `<hr>`.
+ * Supports size variants and both horizontal and vertical orientations.
+ *
+ * @example Basic usage (horizontal, medium size)
+ * ```tsx
+ * <Divider />
+ * ```
+ *
+ * @example Different sizes
+ * ```tsx
+ * <Divider size="xxs" /> //  1px hairline
+ * <Divider size="sm" />  // 16px
+ * <Divider size="lg" />  // 48px
+ * ```
+ *
+ * @example Vertical divider
+ * ```tsx
+ * <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+ *   <span>Left content</span>
+ *   <Divider orientation="vertical" size="sm" />
+ *   <span>Right content</span>
+ * </div>
+ * ```
+ *
+ * @example With custom ID
+ * ```tsx
+ * <Divider id="section-break" />
+ * ```
+ */
+declare const Divider: React.ForwardRefExoticComponent<DividerOptions & Omit<React.HTMLAttributes<HTMLHRElement>, "children"> & {
+    /**
+     * Size variant for the divider.
+     * Maps to pixel values: xxs=1px, xs=8px, sm=16px, md=32px, lg=48px, xl=64px, xxl=80px
+     * @default "md"
+     */
+    size?: DividerSize;
+    /**
+     * Orientation of the divider.
+     * @default "horizontal"
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLHRElement>>;
+
+/**
+ * React adapter for Marwes H1 component.
+ * - Renders semantic <h1> using the core heading recipe.
+ * - Supports size override for visual/semantic mismatch.
+ */
+
+type H1Props = Omit<HeadingOptions, "level"> & {
+    /**
+     * Visual size override.
+     * Allows using h1 semantics with different visual styling.
+     * @default "h1"
+     */
+    size?: HeadingSize;
+    /**
+     * Content of the heading.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+};
+/**
+ * H1 (Heading Level 1)
+ *
+ * Semantic top-level heading rendered as `<h1>`.
+ * Supports visual size override for cases where semantic and visual hierarchy differ.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <H1>Page Title</H1>
+ * ```
+ *
+ * @example With size override
+ * ```tsx
+ * <H1 size="h2">Visually smaller but semantically h1</H1>
+ * ```
+ *
+ * @example With ID for anchor linking
+ * ```tsx
+ * <H1 id="introduction">Introduction</H1>
+ * ```
+ */
+declare function H1(props: H1Props): React.ReactElement;
+
+/**
+ * React adapter for Marwes H2 component.
+ * - Renders semantic <h2> using the core heading recipe.
+ * - Supports size override for visual/semantic mismatch.
+ */
+
+type H2Props = Omit<HeadingOptions, "level"> & {
+    /**
+     * Visual size override.
+     * Allows using h2 semantics with different visual styling.
+     * @default "h2"
+     */
+    size?: HeadingSize;
+    /**
+     * Content of the heading.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+};
+/**
+ * H2 (Heading Level 2)
+ *
+ * Semantic section heading rendered as `<h2>`.
+ * Supports visual size override for cases where semantic and visual hierarchy differ.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <H2>Section Title</H2>
+ * ```
+ *
+ * @example With size override
+ * ```tsx
+ * <H2 size="h1">Visually larger but semantically h2</H2>
+ * ```
+ */
+declare function H2(props: H2Props): React.ReactElement;
+
+/**
+ * React adapter for Marwes H3 component.
+ * - Renders semantic <h3> using the core heading recipe.
+ * - Supports size override for visual/semantic mismatch.
+ */
+
+type H3Props = Omit<HeadingOptions, "level"> & {
+    /**
+     * Visual size override.
+     * Allows using h3 semantics with different visual styling.
+     * @default "h3"
+     */
+    size?: HeadingSize;
+    /**
+     * Content of the heading.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+};
+/**
+ * H3 (Heading Level 3)
+ *
+ * Semantic subsection heading rendered as `<h3>`.
+ * Supports visual size override for cases where semantic and visual hierarchy differ.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <H3>Subsection Title</H3>
+ * ```
+ *
+ * @example With size override
+ * ```tsx
+ * <H3 size="h2">Visually larger but semantically h3</H3>
+ * ```
+ */
+declare function H3(props: H3Props): React.ReactElement;
+
+/**
+ * React adapter for Marwes Paragraph component.
+ * - Renders semantic <p> using the core paragraph recipe.
+ * - Supports size variants: sm/md/lg.
+ */
+
+type ParagraphProps = ParagraphOptions & {
+    /**
+     * Size variant.
+     * @default "md"
+     */
+    size?: ParagraphSize;
+    /**
+     * Content of the paragraph.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+};
+/**
+ * Paragraph
+ *
+ * Semantic text block rendered as `<p>`.
+ * Supports size variants for different text contexts.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Paragraph>This is a standard paragraph.</Paragraph>
+ * ```
+ *
+ * @example With size variant
+ * ```tsx
+ * <Paragraph size="sm">Small text for disclaimers.</Paragraph>
+ * <Paragraph size="lg">Emphasized lead paragraph.</Paragraph>
+ * ```
+ *
+ * @example With ID
+ * ```tsx
+ * <Paragraph id="intro">Introduction text.</Paragraph>
+ * ```
+ */
+declare function Paragraph(props: ParagraphProps): React.ReactElement;
+
+type CheckboxFieldProps = {
+    /** Optional: if omitted, we generate one via useId(). */
+    id?: string;
+    /** Field content (rendered by adapter). */
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    /** Props forwarded to the Checkbox atom. */
+    checkbox: CheckboxProps;
+    /** Additional aria-describedby IDs to merge with internal description/error IDs. */
+    ariaDescribedBy?: string;
+};
+/**
+ * CheckboxField (Molecule) — Recommended
+ *
+ * A convenient, accessible wrapper around `Checkbox` that provides:
+ * - a clickable `<label>` wired via `htmlFor`/`id`
+ * - optional `description` and `error` regions
+ * - automatic `aria-describedby` wiring (description + error + any external ids)
+ * - automatic invalid state when `error` is present
+ *
+ * Use `CheckboxField` for most forms. Use `Checkbox` directly only when you need
+ * a highly custom layout (tables, list rows, compound list items, etc.).
+ *
+ * Accessibility
+ * - Generates a stable `id` via `useId()` when `id` is not provided.
+ * - Always renders a real `<label>` element connected to the checkbox control.
+ * - When `description` and/or `error` are present, it sets `aria-describedby`
+ *   on the checkbox to reference their ids.
+ * - When `error` is present, the checkbox is marked invalid (aria-invalid via core).
+ *
+ * @example Minimal (recommended)
+ * ```tsx
+ * <CheckboxField
+ *   label="Subscribe to updates"
+ *   checkbox={{ defaultChecked: true }}
+ * />
+ * ```
+ *
+ * @example With description
+ * ```tsx
+ * <CheckboxField
+ *   label="Subscribe to updates"
+ *   description="We'll only email you about important product changes."
+ *   checkbox={{}}
+ * />
+ * ```
+ *
+ * @example With error (invalid state)
+ * ```tsx
+ * <CheckboxField
+ *   label="Accept terms"
+ *   error="You must accept the terms to continue."
+ *   checkbox={{ required: true }}
+ * />
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [checked, setChecked] = React.useState(false);
+ *
+ * <CheckboxField
+ *   label="Accept terms"
+ *   checkbox={{
+ *     checked,
+ *     onCheckedChange: setChecked,
+ *   }}
+ * />
+ * ```
+ *
+ * @example Indeterminate (mixed)
+ * ```tsx
+ * const [checked, setChecked] = React.useState(false);
+ * const [mixed, setMixed] = React.useState(true);
+ *
+ * <CheckboxField
+ *   label="Select all"
+ *   description="Applies to all items in the current view."
+ *   checkbox={{
+ *     checked,
+ *     indeterminate: mixed,
+ *     onCheckedChange: (next) => {
+ *       setMixed(false);
+ *       setChecked(next);
+ *     },
+ *   }}
+ * />
+ * ```
+ *
+ * @example Custom describedBy (merge with internal description/error)
+ * ```tsx
+ * <CheckboxField
+ *   ariaDescribedBy="my-extra-help"
+ *   label="Enable telemetry"
+ *   description="Helps us improve the product."
+ *   checkbox={{}}
+ * />
+ *
+ * <div id="my-extra-help">This setting can be changed later.</div>
+ * ```
+ */
+declare function CheckboxField(props: CheckboxFieldProps): React.ReactElement;
+
+type InputFieldProps = {
+    /** Optional: if omitted, we generate one via useId(). */
+    id?: string;
+    /** Field label (required for accessibility). */
+    label: React.ReactNode;
+    /** Optional helper text shown below the input. */
+    helperText?: React.ReactNode;
+    /** Optional error message. When present, input is marked invalid. */
+    error?: React.ReactNode;
+    /** Props forwarded to the Input atom. */
+    input: InputProps;
+    /** Additional aria-describedby IDs to merge with internal helper/error IDs. */
+    ariaDescribedBy?: string;
+};
+/**
+ * InputField (Molecule) — Recommended
+ *
+ * A convenient, accessible wrapper around `Input` that provides:
+ * - a visible `<label>` wired via `htmlFor`/`id`
+ * - optional `helperText` and `error` regions
+ * - automatic `aria-describedby` wiring (helperText + error + any external ids)
+ * - automatic invalid state when `error` is present
+ *
+ * Use `InputField` for most forms. Use `Input` directly only when you need
+ * a highly custom layout or composite inputs.
+ *
+ * Accessibility
+ * - Generates a stable `id` via `useId()` when `id` is not provided.
+ * - Always renders a visible `<label>` element connected to the input control.
+ * - When `helperText` and/or `error` are present, it sets `aria-describedby`
+ *   on the input to reference their ids.
+ * - When `error` is present, the input is marked invalid (aria-invalid).
+ * - Error region has `aria-live="polite"` for screen reader announcements.
+ *
+ * @example Minimal (recommended)
+ * ```tsx
+ * <InputField
+ *   label="Email address"
+ *   input={{ type: "email", placeholder: "you@example.com" }}
+ * />
+ * ```
+ *
+ * @example With helper text
+ * ```tsx
+ * <InputField
+ *   label="Username"
+ *   helperText="Choose a unique username between 3-20 characters."
+ *   input={{ type: "text", placeholder: "johnsmith" }}
+ * />
+ * ```
+ *
+ * @example With error (invalid state)
+ * ```tsx
+ * <InputField
+ *   label="Password"
+ *   error="Password must be at least 8 characters."
+ *   input={{ type: "password", required: true }}
+ * />
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [email, setEmail] = React.useState("");
+ *
+ * <InputField
+ *   label="Email"
+ *   input={{
+ *     type: "email",
+ *     value: email,
+ *     onValueChange: setEmail,
+ *   }}
+ * />
+ * ```
+ *
+ * @example Disabled
+ * ```tsx
+ * <InputField
+ *   label="Account ID"
+ *   helperText="This value cannot be changed."
+ *   input={{ value: "ACC-12345", disabled: true }}
+ * />
+ * ```
+ *
+ * @example Read-only
+ * ```tsx
+ * <InputField
+ *   label="Account created"
+ *   input={{ value: "January 15, 2026", readOnly: true }}
+ * />
+ * ```
+ *
+ * @example Custom describedBy (merge with internal helper/error)
+ * ```tsx
+ * <InputField
+ *   ariaDescribedBy="my-extra-help"
+ *   label="API Key"
+ *   helperText="Your key is stored securely."
+ *   input={{ type: "password" }}
+ * />
+ *
+ * <div id="my-extra-help">This can be regenerated from your settings.</div>
+ * ```
+ */
+declare function InputField(props: InputFieldProps): React.ReactElement;
+
+export { Button, type ButtonProps, CancelButton, type CancelButtonProps, Checkbox, CheckboxField, type CheckboxFieldProps, type CheckboxProps, CreateButton, type CreateButtonProps, DangerButton, type DangerButtonProps, Divider, type DividerProps, H1, type H1Props, H2, type H2Props, H3, type H3Props, Icon, type IconProps, Input, InputField, type InputFieldProps, type InputProps, LinkButton, type LinkButtonProps, MarwesProvider, type MarwesProviderProps, Paragraph, type ParagraphProps, PrimaryButton, type PrimaryButtonProps, SecondaryButton, type SecondaryButtonProps, SubmitButton, type SubmitButtonProps, TextButton, type TextButtonProps, useRenderKitDebug, useSystem, useTheme };