@nordcom/nordstar/dist/index.d.ts

An opinionated component library for building human-centric user interfaces.

import { ClassProp } from 'class-variance-authority/types';
import { ClassValue } from 'clsx';
import { ComponentProps } from 'react';
import { ComponentPropsWithoutRef } from 'react';
import { ElementType } from 'react';
import { FC } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { ForwardRefRenderFunction } from 'react';
import { HTMLAttributes } from 'react';
import { HTMLInputTypeAttribute } from 'react';
import { JSX } from 'react';
import * as Primitive from '@radix-ui/react-accordion';
import * as Primitive_2 from '@radix-ui/react-dropdown-menu';
import * as Primitive_3 from '@radix-ui/react-select';
import * as Primitive_4 from '@radix-ui/react-switch';
import * as Primitive_5 from '@radix-ui/react-tooltip';
import { PropsWithoutRef } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import { VariantProps } from 'class-variance-authority';
import { WeakValidationMap } from 'prop-types';

/**
 * `<Accented/>`, a transparent inline wrapper that highlights text with an accent color.
 *
 * @remarks
 * Renders with `display: contents`, so it only affects inherited properties such as
 * `color`. Box-level utilities (padding, background, borders) passed via `className`
 * have no effect unless `display` is also overridden.
 *
 * @param {object} props - `<Accented/>` props.
 * @param {As} [props.as='span'] - The element to render the component as.
 * @param {NordstarColor} [props.color='primary'] - The accent color; `default` inherits the surrounding color.
 * @returns {React.ReactNode} The `<Accented/>` component.
 */
export declare const Accented: InternalForwardRefRenderFunction<"span", AccentedProps, never>;

export declare type AccentedProps = {
    as?: As;
    color?: NordstarColor;
};

/**
 * `<Accordion/>`, a vertically stacked set of collapsible sections.
 *
 * Wraps `@radix-ui/react-accordion` as a compound component: compose `Accordion` with
 * `Accordion.Item`s, each holding an `Accordion.Trigger` and `Accordion.Content`. Set `type="single"`
 * (optionally `collapsible`) to allow one open section at a time, or `type="multiple"` for several.
 * Radix handles the disclosure semantics, roving focus, and keyboard navigation; the surface is
 * re-fitted to the Nordstar token contract, and the trigger chevron rotates on open.
 *
 * @param {object} props - Every `@radix-ui/react-accordion` Root prop (`type`, `collapsible`, `value`, …).
 * @returns {React.ReactNode} The accordion root that scopes its items.
 *
 * @example
 * ```tsx
 * <Accordion type="single" collapsible>
 *     <Accordion.Item value="a">
 *         <Accordion.Trigger>Shipping</Accordion.Trigger>
 *         <Accordion.Content>Ships in 1–2 business days.</Accordion.Content>
 *     </Accordion.Item>
 * </Accordion>
 * ```
 */
export declare const Accordion: ((props: AccordionProps) => JSX.Element) & {
    Content: ForwardRefExoticComponent<Omit<Primitive.AccordionContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    displayName: string;
    Item: ForwardRefExoticComponent<Omit<Primitive.AccordionItemProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    Trigger: ForwardRefExoticComponent<Omit<Primitive.AccordionTriggerProps & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;
};

export declare type AccordionContentProps = ComponentPropsWithoutRef<typeof Primitive.Content>;

export declare type AccordionItemProps = ComponentPropsWithoutRef<typeof Primitive.Item>;

export declare type AccordionProps = ComponentPropsWithoutRef<typeof Primitive.Root>;

export declare type AccordionTriggerProps = ComponentPropsWithoutRef<typeof Primitive.Trigger>;

export declare type As = ElementType;

export declare const Button: InternalForwardRefRenderFunction<"button", ButtonProps, never> & {
    displayName: string;
};

declare type ButtonBaseProps = {
    as?: As;
    variant?: 'outline' | 'solid';
    color?: NordstarColor;
    icon?: ReactNode;
    disabled?: boolean;
    contentClassName?: string;
} & Omit<VariantProps<typeof variants>, 'color'>;

declare type ButtonIconProps = {
    icon: ReactNode;
    iconClassName?: string;
};

declare type ButtonNoIconProps = {
    icon?: undefined;
    iconClassName?: never;
};

export declare type ButtonProps = ButtonBaseProps & (ButtonIconProps | ButtonNoIconProps);

export declare const Card: InternalForwardRefRenderFunction<"section", CardProps, never> & {
    Divider: (({ className, ...props }: CardDividerProps) => JSX.Element) & {
        displayName: string;
    };
    displayName: string;
    Header: (({ children, className, ...props }: HeaderProps_2) => JSX.Element) & {
        displayName: string;
    };
};

export declare type CardDividerProps = {} & ComponentProps<'hr'>;

export declare type CardProps = {
    as?: As;
    variant?: 'outline' | 'solid';
    color?: NordstarColor;
    borderless?: boolean;
    padding?: boolean;
    style?: CSSCustomProperties;
} & Omit<VariantProps<typeof variants_2>, 'color'>;

export declare function cn(...inputs: ClassValue[]): string | undefined;

export declare type CSSCustomProperties = {
    [key: `--${string}`]: string | number;
} & React.CSSProperties;

export declare const Details: InternalForwardRefRenderFunction<"details", DetailsProps, never> & {
    displayName: string;
};

export declare type DetailsProps = {
    label: string;
    style?: CSSCustomProperties;
};

/**
 * `<DropdownMenu/>`, a menu of actions revealed by a trigger button.
 *
 * Wraps `@radix-ui/react-dropdown-menu` as a compound component. Compose `DropdownMenu` with
 * `DropdownMenu.Trigger` and `DropdownMenu.Content`, then fill the content with `DropdownMenu.Item`s,
 * `DropdownMenu.CheckboxItem`s, a `DropdownMenu.RadioGroup` of `DropdownMenu.RadioItem`s, and
 * `DropdownMenu.Label`/`DropdownMenu.Separator` for structure. Nested `DropdownMenu.Sub` +
 * `DropdownMenu.SubTrigger`/`DropdownMenu.SubContent` build submenus. Radix supplies the menu role,
 * roving focus, typeahead, and pointer/keyboard dismissal; the surface is re-fitted to the Nordstar
 * token contract and all indicator icons are inlined (no icon dependency).
 *
 * @param {object} props - Every `@radix-ui/react-dropdown-menu` Root prop (`open`, `modal`, …).
 * @returns {React.ReactNode} The dropdown-menu root that scopes a trigger/content pair.
 *
 * @example
 * ```tsx
 * <DropdownMenu>
 *     <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
 *     <DropdownMenu.Content>
 *         <DropdownMenu.Item onSelect={save}>Save</DropdownMenu.Item>
 *         <DropdownMenu.Separator />
 *         <DropdownMenu.Item onSelect={remove}>Delete</DropdownMenu.Item>
 *     </DropdownMenu.Content>
 * </DropdownMenu>
 * ```
 */
export declare const DropdownMenu: ((props: DropdownMenuProps) => JSX.Element) & {
    CheckboxItem: ForwardRefExoticComponent<Omit<Primitive_2.DropdownMenuCheckboxItemProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    Content: ForwardRefExoticComponent<Omit<Primitive_2.DropdownMenuContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    displayName: string;
    Group: ForwardRefExoticComponent<Primitive_2.DropdownMenuGroupProps & RefAttributes<HTMLDivElement>>;
    Item: ForwardRefExoticComponent<Omit<Primitive_2.DropdownMenuItemProps & RefAttributes<HTMLDivElement>, "ref"> & {
        inset?: boolean;
    } & RefAttributes<HTMLDivElement>>;
    Label: ForwardRefExoticComponent<Omit<Primitive_2.DropdownMenuLabelProps & RefAttributes<HTMLDivElement>, "ref"> & {
        inset?: boolean;
    } & RefAttributes<HTMLDivElement>>;
    RadioGroup: ForwardRefExoticComponent<Primitive_2.DropdownMenuRadioGroupProps & RefAttributes<HTMLDivElement>>;
    RadioItem: ForwardRefExoticComponent<Omit<Primitive_2.DropdownMenuRadioItemProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    Separator: ForwardRefExoticComponent<Omit<Primitive_2.DropdownMenuSeparatorProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    Sub: FC<Primitive_2.DropdownMenuSubProps>;
    SubContent: ForwardRefExoticComponent<Omit<Primitive_2.DropdownMenuSubContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    SubTrigger: ForwardRefExoticComponent<Omit<Primitive_2.DropdownMenuSubTriggerProps & RefAttributes<HTMLDivElement>, "ref"> & {
        inset?: boolean;
    } & RefAttributes<HTMLDivElement>>;
    Trigger: ForwardRefExoticComponent<Primitive_2.DropdownMenuTriggerProps & RefAttributes<HTMLButtonElement>>;
};

export declare type DropdownMenuContentProps = ComponentPropsWithoutRef<typeof Primitive_2.Content>;

export declare type DropdownMenuItemProps = ComponentPropsWithoutRef<typeof Primitive_2.Item> & {
    inset?: boolean;
};

export declare type DropdownMenuLabelProps = ComponentPropsWithoutRef<typeof Primitive_2.Label> & {
    inset?: boolean;
};

export declare type DropdownMenuProps = ComponentPropsWithoutRef<typeof Primitive_2.Root>;

export declare function forwardRef<Component extends As, Props extends object, OmitKeys extends PropertyKey = never>(component: ForwardRefRenderFunction<unknown, PropsWithoutRef<RightJoinProps<PropsOf<Component>, Props> & {
    as?: As;
}>>): InternalForwardRefRenderFunction<Component, Props, OmitKeys>;

export declare const Header: InternalForwardRefRenderFunction<"header", HeaderProps, never> & {
    displayName: string;
    Logo: InternalForwardRefRenderFunction<"section", HeaderLogoProps, never> & {
        displayName: string;
    };
    Menu: InternalForwardRefRenderFunction<"nav", HeaderMenuProps, never> & {
        displayName: string;
        Link: InternalForwardRefRenderFunction<"a", HeaderMenuLinkProps, never> & {
            displayName: string;
        };
    };
};

export declare type HeaderLogoProps = {
    as?: As;
} & ComponentProps<'section'>;

export declare type HeaderMenuLinkProps = {
    as?: As;
};

export declare type HeaderMenuProps = {
    as?: As;
    overflowShadow?: boolean;
};

export declare type HeaderProps = {
    sticky?: boolean;
    style?: CSSCustomProperties | undefined;
} & Omit<ComponentProps<'header'>, 'color'>;

declare type HeaderProps_2 = {} & HTMLAttributes<HTMLDivElement>;

/**
 * `<Heading/>`, a component to render headings.
 *
 * @param {object} props - `<Heading/>` props.
 * @param {string} [props.level='h1'] - The level of the heading.
 * @param {As} [props.as] - The element to render the component as.
 * @returns {ReactNode} The `<Heading/>` component.
 */
export declare const Heading: InternalForwardRefRenderFunction<"h1", HeadingProps, never>;

export declare type HeadingProps = {
    level?: 'h1' | 'h2' | 'h3' | 'h4';
    as?: As;
};

export declare const Input: InternalForwardRefRenderFunction<"textarea" | "input", InputProps<As>, never> & {
    displayName: string;
};

declare type InputBaseProps = {
    color?: NordstarColor;
    label?: string;
} & Omit<VariantProps<typeof variants_3>, 'color'>;

declare type InputNumberProps = {
    as?: Exclude<As, 'textarea'>;
    value?: number;
    defaultValue?: number;
    type: 'number';
    min?: number;
    max?: number;
};

export declare type InputProps<T extends As> = InputBaseProps & (T extends 'textarea' ? InputTextAreaProps : T extends 'number' ? InputNumberProps : InputTextProps);

declare type InputTextAreaProps = {
    as: 'textarea';
    value?: string;
    defaultValue?: string;
    type?: never;
};

declare type InputTextProps = {
    as?: Exclude<As, 'textarea'>;
    value?: string;
    defaultValue?: string;
    type?: Exclude<HTMLInputTypeAttribute, 'number'>;
};

export declare type InternalForwardRefRenderFunction<Component extends As, Props extends object = {}, OmitKeys extends PropertyKey = never> = {
    <AsComponent extends As = Component>(props: MergeWithAs<ComponentPropsWithoutRef<Component>, Omit<ComponentPropsWithoutRef<AsComponent>, OmitKeys>, Props, AsComponent>): ReactElement | null;
    readonly $$typeof: symbol;
    defaultProps?: Partial<Props> | undefined;
    propTypes?: WeakValidationMap<Props> | undefined;
    displayName?: string | undefined;
};

/**
 * `<Kbd/>`, a keyboard-key indicator for documenting shortcuts.
 *
 * Renders a real `<kbd>` element by default so the markup is semantically a keyboard input
 * and assistive tech announces it as such. The chip mirrors Nordstar's bordered, high-contrast
 * surface language; pass `size` to fit it inline with surrounding text or in denser menus.
 *
 * @param {object} props - `<Kbd/>` props.
 * @param {As} [props.as='kbd'] - The element to render the component as.
 * @param {'sm' | 'md'} [props.size='md'] - The chip size.
 * @returns {React.ReactNode} The `<Kbd/>` component.
 *
 * @example
 * ```tsx
 * <Kbd>⌘K</Kbd>
 * <Kbd size="sm">Esc</Kbd>
 * ```
 */
export declare const Kbd: InternalForwardRefRenderFunction<"kbd", KbdProps, never>;

export declare type KbdProps = {
    as?: As;
    /** Size of the key chip. Defaults to `'md'`. */
    size?: 'sm' | 'md';
};

export declare const Label: InternalForwardRefRenderFunction<"label", LabelProps, never>;

export declare type LabelProps = {
    as?: As;
    color?: NordstarColor;
    children?: ReactNode;
};

export declare type MergeWithAs<ComponentProps extends object, AsProps extends object, AdditionalProps extends object = {}, AsComponent extends As = As> = (RightJoinProps<ComponentProps, AdditionalProps> | RightJoinProps<AsProps, AdditionalProps>) & {
    as?: AsComponent;
};

export declare type NordstarColor = 'default' | 'foreground' | 'primary' | 'secondary';

/**
 * `<NordstarProvider/>`, a component that should wrap the entire application.
 * @note When using Next.js make sure to to extract all providers into a client component used inside of your `RootLayout`.
 *
 * @param {object} props - `<NordstarProvider/>` props.
 * @param {ReactNode | ReactNode[]} props.children - The children of the `<NordstarProvider/>` component.
 * @param {string | undefined} [props.className] - The class name for the wrapper element.
 * @param {NordstarTheme} [props.theme] - The theme to use for the application.
 * @returns {ReactNode} The `<NordstarProvider/>` component.
 */
export declare const NordstarProvider: {
    ({ theme, children, className, ...props }: NordstarProviderProps): JSX.Element;
    displayName: string;
};

export declare type NordstarProviderProps = {
    theme: NordstarTheme;
    children?: ReactNode | ReactNode[];
} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

export declare type NordstarTheme = {
    accents: {
        primary: string;
        secondary: string;
    };
    colors?: {
        background?: string;
        backgroundHighlight?: string;
        foreground?: string;
        foregroundHighlight?: string;
        error?: string;
    };
    fonts: {
        heading?: string;
        body: string;
        code?: string;
    };
    border?: {
        width?: number;
        radius?: string;
    };
    layout?: {
        page?: {
            width?: string;
            spacing?: string;
        };
        section?: {
            spacing?: string;
            padding?: string;
        };
        block?: {
            padding?: string;
        };
    };
    duration?: {
        short?: string;
        medium?: string;
    };
};

export declare type OmitCommonProps<Target, OmitAdditionalProps extends PropertyKey = never> = Omit<Target, 'as' | OmitAdditionalProps>;

export declare type PropsOf<T extends As> = ComponentPropsWithoutRef<T> & {
    as?: As;
};

export declare type RightJoinProps<SourceProps extends object = {}, OverrideProps extends object = {}> = OmitCommonProps<SourceProps, keyof OverrideProps> & OverrideProps;

/**
 * `<Select/>`, a dropdown for choosing a single option from a list.
 *
 * Wraps `@radix-ui/react-select` as a compound component: compose `Select` with `Select.Trigger`
 * (which holds a `Select.Value`), then a `Select.Content` of `Select.Item`s, optionally organised
 * with `Select.Group`, `Select.Label`, and `Select.Separator`. Radix provides typeahead, full
 * keyboard control, collision-aware positioning, and native form integration; the surface is
 * re-fitted to the Nordstar token contract. Controlled (`value` + `onValueChange`) and uncontrolled
 * (`defaultValue`) usage both work.
 *
 * @param {object} props - Every `@radix-ui/react-select` Root prop.
 * @returns {React.ReactNode} The select root that scopes a single trigger/content pair.
 *
 * @example
 * ```tsx
 * <Select defaultValue="apple">
 *     <Select.Trigger><Select.Value placeholder="Pick a fruit" /></Select.Trigger>
 *     <Select.Content>
 *         <Select.Item value="apple">Apple</Select.Item>
 *         <Select.Item value="pear">Pear</Select.Item>
 *     </Select.Content>
 * </Select>
 * ```
 */
export declare const Select: ((props: SelectProps) => JSX.Element) & {
    Content: ForwardRefExoticComponent<Omit<Primitive_3.SelectContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    displayName: string;
    Group: ForwardRefExoticComponent<Primitive_3.SelectGroupProps & RefAttributes<HTMLDivElement>>;
    Item: ForwardRefExoticComponent<Omit<Primitive_3.SelectItemProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    Label: ForwardRefExoticComponent<Omit<Primitive_3.SelectLabelProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    Separator: ForwardRefExoticComponent<Omit<Primitive_3.SelectSeparatorProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    Trigger: ForwardRefExoticComponent<Omit<Primitive_3.SelectTriggerProps & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;
    Value: ForwardRefExoticComponent<Primitive_3.SelectValueProps & RefAttributes<HTMLSpanElement>>;
};

export declare type SelectContentProps = ComponentPropsWithoutRef<typeof Primitive_3.Content>;

export declare type SelectItemProps = ComponentPropsWithoutRef<typeof Primitive_3.Item>;

export declare type SelectProps = ComponentPropsWithoutRef<typeof Primitive_3.Root>;

export declare type SelectTriggerProps = ComponentPropsWithoutRef<typeof Primitive_3.Trigger>;

/**
 * `<Separator/>`, a thin rule dividing content along one axis.
 *
 * Hand-rolled (no Radix dependency): the separator is a single element that mirrors the
 * decorative-vs-semantic distinction the WAI-ARIA `separator` role makes. A decorative
 * separator is hidden from assistive tech; a non-decorative one is announced with an
 * explicit `aria-orientation` so screen-reader users perceive the grouping the line implies.
 *
 * @param {object} props - `<Separator/>` props.
 * @param {As} [props.as='div'] - The element to render the component as.
 * @param {'horizontal' | 'vertical'} [props.orientation='horizontal'] - The axis of the rule.
 * @param {boolean} [props.decorative=true] - Hide the rule from the accessibility tree.
 * @returns {React.ReactNode} The `<Separator/>` component.
 *
 * @example
 * ```tsx
 * <Separator />
 * <Separator orientation="vertical" decorative={false} />
 * ```
 */
export declare const Separator: InternalForwardRefRenderFunction<"div", SeparatorProps, never>;

export declare type SeparatorProps = {
    as?: As;
    /** Visual and semantic axis of the rule. Defaults to `'horizontal'`. */
    orientation?: 'horizontal' | 'vertical';
    /**
     * When `true` (default) the rule is purely visual and removed from the accessibility
     * tree (`role="none"`). Set to `false` when the divider conveys a real grouping
     * boundary that assistive tech should announce (`role="separator"`).
     */
    decorative?: boolean;
};

/**
 * `<Switch/>`, a boolean toggle with an animated thumb that slides between off and on.
 *
 * Wraps `@radix-ui/react-switch`, so it is keyboard operable (Space/Enter), exposes the correct
 * `switch` role and `aria-checked`, and integrates with native forms via `name`/`value`. Controlled
 * (`checked` + `onCheckedChange`) and uncontrolled (`defaultChecked`) usage both work. The thumb and
 * track are re-fitted to the Nordstar token contract; the `'default'` color resolves to `foreground`.
 *
 * @param {object} props - `<Switch/>` props. Accepts every `@radix-ui/react-switch` Root prop.
 * @param {'sm' | 'md'} [props.size='md'] - The control size.
 * @param {NordstarColor} [props.color='primary'] - The checked-state color scheme.
 * @returns {React.ReactNode} The `<Switch/>` component.
 *
 * @example
 * ```tsx
 * <Switch defaultChecked color="primary" />
 * <Switch checked={enabled} onCheckedChange={setEnabled} />
 * ```
 */
export declare const Switch: ForwardRefExoticComponent<Omit<Primitive_4.SwitchProps & RefAttributes<HTMLButtonElement>, "ref"> & {
    /** Size of the control. Defaults to `'md'`. */
    size?: "sm" | "md";
    /** Color scheme applied to the checked state. Defaults to `'primary'`. */
    color?: NordstarColor;
} & RefAttributes<HTMLButtonElement>>;

export declare type SwitchProps = ComponentPropsWithoutRef<typeof Primitive_4.Root> & {
    /** Size of the control. Defaults to `'md'`. */
    size?: 'sm' | 'md';
    /** Color scheme applied to the checked state. Defaults to `'primary'`. */
    color?: NordstarColor;
};

/**
 * `<Tooltip/>`, a floating label that explains an element on hover or keyboard focus.
 *
 * Wraps `@radix-ui/react-tooltip` as a compound component: mount `<Tooltip.Provider>` once near the
 * root of the app (or section) to share open/close timing, then compose `<Tooltip>` with
 * `<Tooltip.Trigger>` and `<Tooltip.Content>`. Radix handles focus, dismissal, collision-aware
 * positioning, and the `aria-describedby` wiring; the content is re-fitted to the Nordstar token
 * contract. Tooltips are supplementary — never put essential or interactive content inside one.
 *
 * @param {object} props - Every `@radix-ui/react-tooltip` Root prop (`open`, `defaultOpen`, `delayDuration`, …).
 * @returns {React.ReactNode} The tooltip root that scopes a single trigger/content pair.
 *
 * @example
 * ```tsx
 * <Tooltip.Provider>
 *     <Tooltip>
 *         <Tooltip.Trigger>Hover me</Tooltip.Trigger>
 *         <Tooltip.Content>Helpful hint</Tooltip.Content>
 *     </Tooltip>
 * </Tooltip.Provider>
 * ```
 */
export declare const Tooltip: ((props: TooltipProps) => JSX.Element) & {
    Content: ForwardRefExoticComponent<Omit<Primitive_5.TooltipContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
    displayName: string;
    Provider: FC<Primitive_5.TooltipProviderProps>;
    Trigger: ForwardRefExoticComponent<Primitive_5.TooltipTriggerProps & RefAttributes<HTMLButtonElement>>;
};

export declare type TooltipContentProps = ComponentPropsWithoutRef<typeof Primitive_5.Content>;

export declare type TooltipProps = ComponentPropsWithoutRef<typeof Primitive_5.Root>;

declare const variants: (props?: ({
    color?: "primary" | "secondary" | "foreground" | null | undefined;
    variant?: "outline" | "solid" | null | undefined;
} & ClassProp) | undefined) => string;

declare const variants_2: (props?: ({
    color?: "primary" | "secondary" | "foreground" | null | undefined;
    variant?: "solid" | "outline" | null | undefined;
} & ClassProp) | undefined) => string;

declare const variants_3: (props?: ({
    color?: "primary" | "secondary" | "foreground" | null | undefined;
    variant?: "outline" | "solid" | null | undefined;
} & ClassProp) | undefined) => string;

/**
 * `<View/>`, a component to render the main content of a page.
 *
 * @remarks
 * `className`, `ref` and spread props target the inner content element (`as`,
 * default `<article>`); use `outerClassName`/`outerAs` to style the landmark
 * wrapper (default `<main>`). Only one `<View/>` per page should keep the default
 * `outerAs="main"` — use `outerAs="section"` or `withoutWrapper` for secondary
 * regions to avoid duplicate `<main>` landmarks.
 *
 * Both the wrapper and the content container set `min-w-0` so the component
 * shrinks correctly inside flex/grid parents (e.g. app shells) instead of
 * forcing a page-wide horizontal scrollbar when a single wide child (table,
 * code block, carousel, long URL) would otherwise blow the layout out.
 *
 * @param {object} props - `<View/>` props.
 * @param {As} [props.as] - The element to render the component as.
 * @param {As} [props.outerAs] - The element to render the outer part of the component as.
 * @param {boolean} [props.withoutWrapper] - Don't include the wrapper/outer part of the component.
 * @param {string | undefined} [props.outerClassName] - The class name for the outer part of the component.
 * @returns {ReactNode} The `<View/>` component.
 */
export declare const View: InternalForwardRefRenderFunction<"article", ViewProps, never>;

export declare type ViewProps = {
    as?: As;
    outerAs?: As;
    withoutWrapper?: boolean;
    outerClassName?: string | undefined;
};

export { }