import { NubeComponentBoxProps, NubeComponentBox, NubeComponentColumnProps, NubeComponentColumn, NubeComponentRowProps, NubeComponentRow, NubeComponentFieldProps, NubeComponentField, NubeComponentNumberFieldProps, NubeComponentNumberField, NubeComponentFragmentProps, NubeComponentFragment, NubeComponentImageProps, NubeComponentImage, NubeComponentProgressProps, NubeComponentProgress, NubeComponentIframeProps, NubeComponentIframe, NubeComponentVideoPlayerProps, NubeComponentVideoPlayer, NubeComponentVideoRootProps, NubeComponentVideoRoot, NubeComponentVideoYouTubeProps, NubeComponentVideoYouTube, NubeComponentVideoStoriesProps, NubeComponentVideoStories, NubeComponentTextProps, NubeComponentText, NubeComponentCheckboxProps, NubeComponentCheckbox, NubeComponentTextareaProps, NubeComponentTextarea, NubeComponentButtonProps, NubeComponentButton, NubeComponentSelectProps, NubeComponentSelect, NubeComponentLinkProps, NubeComponentLink, NubeComponentAccordionRootProps, NubeComponentAccordionRoot, NubeComponentAccordionItemProps, NubeComponentAccordionItem, NubeComponentAccordionContentProps, NubeComponentAccordionContent, NubeComponentAccordionHeaderProps, NubeComponentAccordionHeader, NubeComponentToastRootProps, NubeComponentToastRoot, NubeComponentToastTitleProps, NubeComponentToastTitle, NubeComponentToastDescriptionProps, NubeComponentToastDescription, NubeComponentPopoverRootProps, NubeComponentPopoverRoot, NubeComponentPopoverButtonProps, NubeComponentPopoverButton, NubeComponentPopoverContentProps, NubeComponentPopoverContent, NubeComponentIconProps, NubeComponentIcon, NubeComponentMarkdownProps, NubeComponentMarkdown, NubeComponentSideScrollProps, NubeComponentSideScroll, NubeComponentTableDataRow, NubeComponentTableRootProps, NubeComponentTableRoot, NubeComponentTableHeaderProps, NubeComponentTableHeader, NubeComponentTableBodyProps, NubeComponentTableBody, NubeComponentTableRowProps, NubeComponentTableRow, NubeComponentTableCellProps, NubeComponentTableCell, NubeComponentTableColumnHeaderCellProps, NubeComponentTableColumnHeaderCell, NubeComponentTableRowHeaderCellProps, NubeComponentTableRowHeaderCell, NubeComponentSvgProps, NubeComponentSvg, NubeComponentCircleProps, NubeComponentCircle, NubeComponentPathProps, NubeComponentPath, NubeComponentGProps, NubeComponentG, NubeComponentRectProps, NubeComponentRect, NubeComponentLineProps, NubeComponentLine, NubeComponentEllipseProps, NubeComponentEllipse, NubeComponentPolygonProps, NubeComponentPolygon, NubeComponentPolylineProps, NubeComponentPolyline, NubeComponentSvgTextProps, NubeComponentSvgText, NubeComponentTSpanProps, NubeComponentTSpan, NubeComponentDefsProps, NubeComponentDefs, NubeComponentStopProps, NubeComponentStop, NubeComponentLinearGradientProps, NubeComponentLinearGradient, NubeComponentRadialGradientProps, NubeComponentRadialGradient, NubeComponentMaskProps, NubeComponentMask, NubeComponentClipPathProps, NubeComponentClipPath, NubeComponentUseProps, NubeComponentUse, NubeComponentSymbolProps, NubeComponentSymbol, NubeComponentPatternProps, NubeComponentPattern, NubeComponentFilterProps, NubeComponentFilter, NubeComponentFeGaussianBlurProps, NubeComponentFeGaussianBlur, NubeComponentFeOffsetProps, NubeComponentFeOffset, NubeComponentFeMergeProps, NubeComponentFeMerge, NubeComponentFeMergeNodeProps, NubeComponentFeMergeNode, NubeComponentFormRootProps, NubeComponentFormRoot, NubeComponentFormFieldProps, NubeComponentFormField, NubeComponentFormFieldErrorProps, NubeComponentFormFieldError, NubeComponentFormSelectProps, NubeComponentFormSelect, NubeComponentFormCheckboxProps, NubeComponentFormCheckbox, NubeComponentFormRadioProps, NubeComponentFormRadio, NubeComponentFormResetterProps, NubeComponentFormResetter, NubeComponentFormSubmitterProps, NubeComponentFormSubmitter, NubeComponentFormSuccessProps, NubeComponentFormSuccess, NubeComponentFormFailureProps, NubeComponentFormFailure, NubeComponentFormSendingProps, NubeComponentFormSending, NubeComponentStyle, ThemeColorInterface, ThemeColorOpacityRange, NubeComponentProps, NubeComponent } from '@tiendanube/nube-sdk-types';
export { ThemeCSSValue, ThemeColorOpacityValue, ThemeColorValue } from '@tiendanube/nube-sdk-types';

/**
 * Creates a `box` component.
 *
 * A `box` is a flexible container that can be used for layout purposes.
 * It supports properties like width, height, padding, margin, and flex-based alignment.
 *
 * @param props - The properties for configuring the box component.
 * @returns A `NubeComponentBox` object representing the box component.
 */
declare const box: (props: NubeComponentBoxProps) => NubeComponentBox;

/**
 * Creates a `column` component.
 *
 * A `column` is a flexible column container that can be used for structuring layouts.
 * It inherits most properties from `box`, except for the `direction` property.
 *
 * @param props - The properties for configuring the column component.
 * @returns A `NubeComponentColumn` object representing the column component.
 */
declare const column: (props: NubeComponentColumnProps) => NubeComponentColumn;

/**
 * Creates a `row` component.
 *
 * A `row` is a flexible container used for structuring layouts in a horizontal direction.
 * It inherits most properties from `box`, except for the `direction` property.
 *
 * @param props - The properties for configuring the row component.
 * @returns A `NubeComponentRow` object representing the row component.
 */
declare const row: (props: NubeComponentRowProps) => NubeComponentRow;

/**
 * Creates a `field` component.
 *
 * A `field` represents an input element in a form, such as text fields, dropdowns, or checkboxes.
 * It supports properties like `name`, `label`, and event handlers (`onChange`, `onBlur`, `onFocus`).
 *
 * @param props - The properties for configuring the field component.
 * @returns A `NubeComponentField` object representing the form field.
 */
declare const field: (props: NubeComponentFieldProps) => NubeComponentField;

/**
 * Creates a `numberfield` component.
 *
 * A `numberfield` represents a numeric input element with increment/decrement buttons.
 * It supports properties like `name`, `label`, `min`, `max`, `step`, and event handlers.
 *
 * @param props - The properties for configuring the numberfield component.
 * @returns A `NubeComponentNumberField` object representing the numeric form field.
 */
declare const numberfield: (props: NubeComponentNumberFieldProps) => NubeComponentNumberField;

/**
 * Creates a `fragment` component.
 *
 * A `fragment` is a logical grouping element that allows multiple children
 * to be wrapped without introducing an additional DOM node.
 *
 * @param props - The properties for configuring the fragment component.
 * @returns A `NubeComponentFragment` object representing the fragment.
 */
declare const fragment: (props: NubeComponentFragmentProps) => NubeComponentFragment;

/**
 * @deprecated This component has been deprecated since version `0.8.0`. Please use the `image` component instead.
 */
declare const img: (props: NubeComponentImageProps) => NubeComponentImage;
/**
 * Creates an `image` (image) component.
 *
 * The `image` component is used to display images. It supports properties such as
 * `src`, `alt`, `width`, `height`, and responsive `sources` for different screen sizes.
 *
 * @param props - The properties for configuring the image component.
 * @returns A `NubeComponentImage` object representing the image component.
 */
declare const image: (props: NubeComponentImageProps) => NubeComponentImage;

/**
 * Creates a `progress` component.
 *
 * A `progress` represents a completion progress of a task. It supports properties such as `value` and `max`
 * to define the progress range and current state. When no value is provided, the progress bar
 * displays in an indeterminate state.
 *
 * @param props - The properties for configuring the progress component.
 * @returns A `NubeComponentProgress` object representing the progress component.
 */
declare const progress: (props: NubeComponentProgressProps) => NubeComponentProgress;

/**
 * Creates an `iframe` component.
 *
 * Embeds external content. Supports `src`, `width`, `height`, `sandbox`, `style`,
 * `onMessage` (runtime receives child messages), and `autoresize` (host resizes the iframe
 * when the child posts `{ type: "resize", height?, width? }`).
 *
 * @param props - The properties for configuring the iframe component.
 * @returns A `NubeComponentIframe` object representing the iframe component.
 */
declare const iframe: (props: NubeComponentIframeProps) => NubeComponentIframe;

/**
 * Creates a `videoRoot` component.
 *
 * `Video.Root` is the source-agnostic wrapper for a video. It owns
 * layout (`width`, `height`, `style`), shared playback modifiers (`autoplay`,
 * `muted`, `loop`) and the source-agnostic playback event handlers (`onPlay`,
 * `onPause`, `onEnded`, `onProgress`, `onBuffer`). It must contain a
 * `Video.Player` or a `Video.YouTube`, optionally followed by overlay children
 * that render over the video when the fullscreen lightbox is open. Errors are
 * source-specific and belong to each player's own `onError`.
 *
 * @param props - The properties for configuring the video root component.
 * @returns A `NubeComponentVideoRoot` object representing the video root component.
 */
declare const videoRoot: (props: NubeComponentVideoRootProps) => NubeComponentVideoRoot;
/**
 * Creates a `videoPlayer` component.
 *
 * `Video.Player` is a self-hosted video source (MP4, HLS or DASH) rendered by
 * the SDK's bundled player engine. It must be a child of `Video.Root`, which
 * owns the shared playback modifiers and events.
 *
 * @param props - The properties for configuring the video player component.
 * @returns A `NubeComponentVideoPlayer` object representing the video player component.
 */
declare const videoPlayer: (props: NubeComponentVideoPlayerProps) => NubeComponentVideoPlayer;
/**
 * Creates a `videoYouTube` component.
 *
 * `Video.YouTube` embeds a YouTube video via the official IFrame Player API.
 * It must be a child of `Video.Root`. No lightbox is available (YouTube ToS
 * prohibits overlaying or cropping the embed).
 *
 * @param props - The properties for configuring the YouTube video component.
 * @returns A `NubeComponentVideoYouTube` object representing the YouTube component.
 */
declare const videoYouTube: (props: NubeComponentVideoYouTubeProps) => NubeComponentVideoYouTube;

/**
 * Creates a `videoStories` component.
 *
 * `VideoStories` is a vertical, stories-style player for a sequence of
 * self-hosted videos (MP4, HLS or DASH). It renders inline as a compact 9:16
 * card; tapping the card expands to a fullscreen overlay. Events (`onOpen`,
 * `onClose`, `onChange`, `onComplete`, `onError`) are observe-only — they
 * never gate playback.
 *
 * @param props - The properties for configuring the video stories component.
 * @returns A `NubeComponentVideoStories` object.
 */
declare const videoStories: (props: NubeComponentVideoStoriesProps) => NubeComponentVideoStories;

/**
 * Creates a `txt` (text) component.
 *
 * The `txt` component is used to render text with optional styling.
 * It supports properties such as `color`, `background`, `heading` levels (h1-h6),
 * text formatting `modifiers` (bold, italic, etc.), and inline display.
 *
 * @param props - The properties for configuring the text component.
 * @returns A `NubeComponentTxt` object representing the text component.
 */
declare const text: (props: NubeComponentTextProps) => NubeComponentText;
/**
 * @deprecated This component has been deprecated since version `0.8.0`. Please use the `text` component instead.
 */
declare const txt: (props: NubeComponentTextProps) => NubeComponentText;

/**
 * @deprecated This component has been deprecated since version `0.8.0`. Please use the `checkbox` component instead.
 */
declare const check: (props: NubeComponentCheckboxProps) => NubeComponentCheckbox;
/**
 * Creates a `checkbox` component.
 *
 * A `checkbox` represents a selectable field that can be toggled between checked and unchecked states.
 * It is typically used to allow users to select one or more options.
 * Supports properties such as `name`, `label`, `checked`, and event handlers (`onChange`).
 *
 * @param props - The properties for configuring the checkbox component.
 * @returns A `NubeComponentCheckbox` object representing the checkbox.
 */
declare const checkbox: (props: NubeComponentCheckboxProps) => NubeComponentCheckbox;

/**
 * @deprecated This component has been deprecated since version `0.8.0`. Please use the `textarea` component instead.
 */
declare const txtarea: (props: NubeComponentTextareaProps) => NubeComponentTextarea;
/**
 * Creates a `textarea` component.
 *
 * A `textarea` represents a multi-line text input field that allows users to enter longer texts.
 * It supports properties such as `name`, `value`, and event handlers (`onChange`, `onBlur`, `onFocus`).
 *
 * @param props - The properties for configuring the textarea component.
 * @returns A `NubeComponentTextarea` object representing the textarea component.
 */
declare const textarea: (props: NubeComponentTextareaProps) => NubeComponentTextarea;

/**
 * Creates a `button` component.
 *
 * A `button` represents a clickable element typically used to trigger an action or submit a form.
 * It supports properties such as `text`, `onClick`, and style configurations.
 *
 * @param props - The properties for configuring the button component.
 * @returns A `NubeComponentButton` object representing the button component.
 */
declare const button: (props: NubeComponentButtonProps) => NubeComponentButton;

/**
 * Creates a `select` component.
 *
 * A `select` represents a dropdown menu that allows users to select one option from a list.
 * It supports properties such as `name`, `label`, `options`, and event handlers (`onChange`).
 */
declare const select: (props: NubeComponentSelectProps) => NubeComponentSelect;

/**
 * Creates a `link` component.
 *
 * The `link` component is used for navigation links. It supports properties such as
 * `href`, `target`, `rel`, `disabled`, `variant`, and `onClick` event handling.
 * Links can be styled with different variants (primary, secondary, transparent)
 * and support both internal and external navigation.
 *
 * @param props - The properties for configuring the link component.
 * @returns A `NubeComponentLink` object representing the link component.
 */
declare const link: (props: NubeComponentLinkProps) => NubeComponentLink;

/**
 * Creates an `accordion` component.
 *
 * An `accordion` is a vertically stacked list of items that can be expanded or collapsed to reveal their content.
 * It supports properties such as `defaultValue` for controlling which item is expanded by default, and custom styling.
 */
declare const accordionRoot: (props: NubeComponentAccordionRootProps) => NubeComponentAccordionRoot;

/**
 * Creates an `accordion-item` component.
 *
 * An `accordion-item` represents a single item within an accordion.
 * Each item contains a header that can be clicked to show/hide its content.
 * It supports properties such as `title`, `content`, `isExpanded`, and event handlers (`onToggle`).
 */
declare const accordionItem: (props: NubeComponentAccordionItemProps) => NubeComponentAccordionItem;

/**
 * Creates an `accordion-content` component.
 *
 * An `accordion-content` represents the content of an accordion item.
 * It supports properties such as `children`.
 */
declare const accordionContent: (props: NubeComponentAccordionContentProps) => NubeComponentAccordionContent;

/**
 * Creates an `accordion-header` component.
 *
 * An `accordion-header` represents the header of an accordion item.
 * It supports properties such as `children`.
 */
declare const accordionHeader: (props: NubeComponentAccordionHeaderProps) => NubeComponentAccordionHeader;

/**
 * Creates a `toast` component.
 *
 * A `toast` is a small notification that appears at the bottom of the screen to inform the user about an action or a message.
 * It supports properties such as `type` for controlling the type of toast, and custom styling.
 */
declare const toastRoot: (props: NubeComponentToastRootProps) => NubeComponentToastRoot;

/**
 * Creates a `toast` title component.
 *
 * A `toast` title is a small notification that appears at the bottom of the screen to inform the user about an action or a message.
 * It supports properties such as `children` for the title text, and custom styling.
 */
declare const toastTitle: (props: NubeComponentToastTitleProps) => NubeComponentToastTitle;

/**
 * Creates a `toast` description component.
 *
 * A `toast` description is a small notification that appears at the bottom of the screen to inform the user about an action or a message.
 * It supports properties such as `children` for the description text, and custom styling.
 */
declare const toastDescription: (props: NubeComponentToastDescriptionProps) => NubeComponentToastDescription;

/**
 * Creates a `popover` root component.
 *
 * A `popover` is a floating container whose content becomes visible when its
 * trigger button is clicked. The root acts as the wrapper that holds both the
 * `popover-button` and the `popover-content`.
 * It supports properties such as `defaultOpen` and custom styling.
 */
declare const popoverRoot: (props: NubeComponentPopoverRootProps) => NubeComponentPopoverRoot;

/**
 * Creates a `popover` button component.
 *
 * A `popover-button` is the trigger that toggles the visibility of the popover
 * content. It inherits the style and props of the `button` component, except
 * for `onClick`, which is managed internally to control the popover.
 */
declare const popoverButton: (props: NubeComponentPopoverButtonProps) => NubeComponentPopoverButton;

/**
 * Creates a `popover` content component.
 *
 * A `popover-content` holds the floating content that becomes visible when the
 * popover button is clicked. It inherits the style and props of the `box`
 * component and uses theme variables for its default background, border and
 * box shadow.
 */
declare const popoverContent: (props: NubeComponentPopoverContentProps) => NubeComponentPopoverContent;

/**
 * Creates an `icon` component.
 *
 * @param props - The properties for configuring the icon component.
 * @returns A `NubeComponentIcon` object representing the icon.
 */
declare const icon: (props: NubeComponentIconProps) => NubeComponentIcon;

/**
 * Creates a `markdown` component.
 *
 * The `markdown` component is used to render markdown content.
 * It supports properties such as `content` for the markdown string.
 *
 * @param props - The properties for configuring the markdown component.
 * @returns A `NubeComponentMarkdown` object representing the markdown component.
 */
declare const markdown: (props: NubeComponentMarkdownProps) => NubeComponentMarkdown;

/**
 * Creates a `sidescroll` component.
 *
 * A `sidescroll` is a horizontal scrolling container that allows users to scroll through content
 * that extends beyond the container's visible width. It supports customizable gap between items
 * and can optionally hide the scrollbar for a cleaner appearance.
 *
 * @param props - The properties for configuring the sidescroll component.
 * @returns A `NubeComponentSideScroll` object representing the sidescroll component.
 */
declare const sideScroll: (props: NubeComponentSideScrollProps) => NubeComponentSideScroll;

/**
 * Creates a `table` root component.
 *
 * A `table` root is the wrapper that groups the header and the body of a table.
 * It supports properties such as `size`, `variant`, `layout` and custom styling.
 *
 * The table can also be declared from raw data through `data` and `columns`.
 * When both are provided, `children` is ignored and the header and the body
 * are rendered from the data. The `key` of each column is restricted to the
 * keys present in the rows of `data`.
 */
declare const tableRoot: <T extends NubeComponentTableDataRow>(props: NubeComponentTableRootProps<T>) => NubeComponentTableRoot<T>;

/**
 * Creates a `table` header component.
 *
 * A `table` header groups the rows that contain the column headings of a table.
 * It expects `tableRow` components as children.
 */
declare const tableHeader: (props: NubeComponentTableHeaderProps) => NubeComponentTableHeader;

/**
 * Creates a `table` body component.
 *
 * A `table` body groups the rows that contain the data of a table.
 * It expects `tableRow` components as children.
 */
declare const tableBody: (props: NubeComponentTableBodyProps) => NubeComponentTableBody;

/**
 * Creates a `table` row component.
 *
 * A `table` row groups the cells of a single row of a table.
 * It supports the `align` property to control the vertical alignment of its cells.
 */
declare const tableRow: (props: NubeComponentTableRowProps) => NubeComponentTableRow;

/**
 * Creates a `table` cell component.
 *
 * A `table` cell is a basic data cell of a table.
 * It supports properties such as `justify`, `width`, `minWidth`, `maxWidth`,
 * `colSpan`, `rowSpan` and custom styling.
 */
declare const tableCell: (props: NubeComponentTableCellProps) => NubeComponentTableCell;

/**
 * Creates a `table` column header cell component.
 *
 * A `table` column header cell is the heading of a column of a table and
 * should be placed inside a row of a `tableHeader`.
 * It supports the same properties as a `tableCell`.
 */
declare const tableColumnHeaderCell: (props: NubeComponentTableColumnHeaderCellProps) => NubeComponentTableColumnHeaderCell;

/**
 * Creates a `table` row header cell component.
 *
 * A `table` row header cell is the heading of a row of a table and is
 * usually the first cell of a row of a `tableBody`.
 * It supports the same properties as a `tableCell`.
 */
declare const tableRowHeaderCell: (props: NubeComponentTableRowHeaderCellProps) => NubeComponentTableRowHeaderCell;

/**
 * Creates an `svgRoot` component.
 *
 * An `svgRoot` is the root container for SVG graphics, defining the coordinate system
 * and viewport for all child SVG elements. It supports properties like width, height,
 * viewBox, and preserveAspectRatio.
 *
 * @param props - The properties for configuring the svgRoot component.
 * @returns A `NubeComponentSvg` object representing the svgRoot component.
 */
declare const svgRoot: (props: NubeComponentSvgProps) => NubeComponentSvg;

/**
 * Creates a `svgCircle` component.
 *
 * A `svgCircle` is used for drawing circles in SVG graphics. It supports properties
 * like center coordinates (cx, cy), radius (r), fill, stroke, and various stroke
 * styling options.
 *
 * @param props - The properties for configuring the svgCircle component.
 * @returns A `NubeComponentCircle` object representing the svgCircle component.
 */
declare const svgCircle: (props: NubeComponentCircleProps) => NubeComponentCircle;

/**
 * Creates a `svgPath` component.
 *
 * A `svgPath` is used for drawing custom paths in SVG graphics using path commands.
 * It supports properties like path data (d), fill, stroke, and various styling options
 * for creating complex shapes and curves.
 *
 * @param props - The properties for configuring the svgPath component.
 * @returns A `NubeComponentPath` object representing the svgPath component.
 */
declare const svgPath: (props: NubeComponentPathProps) => NubeComponentPath;

/**
 * Creates a `svgG` component.
 *
 * A `svgG` is used for grouping SVG elements together. It can contain other SVG
 * elements as children and supports properties like transform and opacity that
 * apply to all child elements.
 *
 * @param props - The properties for configuring the svgG component.
 * @returns A `NubeComponentG` object representing the svgG component.
 */
declare const svgG: (props: NubeComponentGProps) => NubeComponentG;

/**
 * Creates a `svgRect` component.
 *
 * A `svgRect` is used for drawing rectangles in SVG graphics. It supports properties
 * like position (x, y), size (width, height), corner radius (rx, ry), fill, stroke,
 * and various styling options.
 *
 * @param props - The properties for configuring the svgRect component.
 * @returns A `NubeComponentRect` object representing the svgRect component.
 */
declare const svgRect: (props: NubeComponentRectProps) => NubeComponentRect;

/**
 * Creates a `svgLine` component.
 *
 * A `svgLine` is used for drawing straight lines in SVG graphics. It supports
 * properties like start point (x1, y1), end point (x2, y2), stroke, strokeWidth,
 * and various stroke styling options.
 *
 * @param props - The properties for configuring the svgLine component.
 * @returns A `NubeComponentLine` object representing the svgLine component.
 */
declare const svgLine: (props: NubeComponentLineProps) => NubeComponentLine;

/**
 * Creates a `svgEllipse` component.
 *
 * A `svgEllipse` is used for drawing ellipses in SVG graphics. It supports properties
 * like center coordinates (cx, cy), radius (rx, ry), fill, stroke, and various
 * styling options for creating oval shapes.
 *
 * @param props - The properties for configuring the svgEllipse component.
 * @returns A `NubeComponentEllipse` object representing the svgEllipse component.
 */
declare const svgEllipse: (props: NubeComponentEllipseProps) => NubeComponentEllipse;

/**
 * Creates a `svgPolygon` component.
 *
 * A `svgPolygon` is used for drawing closed polygons in SVG graphics. It supports
 * properties like points (defining the polygon vertices), fill, stroke, and various
 * styling options for creating multi-sided shapes.
 *
 * @param props - The properties for configuring the svgPolygon component.
 * @returns A `NubeComponentPolygon` object representing the svgPolygon component.
 */
declare const svgPolygon: (props: NubeComponentPolygonProps) => NubeComponentPolygon;

/**
 * Creates a `svgPolyline` component.
 *
 * A `svgPolyline` is used for drawing open polylines in SVG graphics. It supports
 * properties like points (defining the line segments), fill, stroke, and various
 * styling options for creating connected line segments.
 *
 * @param props - The properties for configuring the svgPolyline component.
 * @returns A `NubeComponentPolyline` object representing the svgPolyline component.
 */
declare const svgPolyline: (props: NubeComponentPolylineProps) => NubeComponentPolyline;

/**
 * Creates a `svgText` component.
 *
 * A `svgText` is used for rendering text in SVG graphics. It supports properties
 * like position (x, y), font styling (fontSize, fontFamily, fontWeight), text
 * alignment, fill, stroke, and various styling options for text rendering.
 *
 * @param props - The properties for configuring the svgText component.
 * @returns A `NubeComponentSvgText` object representing the svgText component.
 */
declare const svgText: (props: NubeComponentSvgTextProps) => NubeComponentSvgText;

/**
 * Creates a `svgTspan` component.
 *
 * A `svgTspan` is used for styling portions of text within SVG text elements.
 * It supports properties like position (x, y), font styling, fill, stroke, and
 * various styling options for text spans within SVG text.
 *
 * @param props - The properties for configuring the svgTspan component.
 * @returns A `NubeComponentTSpan` object representing the svgTspan component.
 */
declare const svgTspan: (props: NubeComponentTSpanProps) => NubeComponentTSpan;

/**
 * Creates a `svgDefs` component.
 *
 * A `svgDefs` is used for defining reusable SVG elements like gradients, patterns,
 * filters, and other definitions. It can contain child elements that define
 * reusable graphics objects.
 *
 * @param props - The properties for configuring the svgDefs component.
 * @returns A `NubeComponentDefs` object representing the svgDefs component.
 */
declare const svgDefs: (props: NubeComponentDefsProps) => NubeComponentDefs;

/**
 * Creates a `svgStop` component.
 *
 * A `svgStop` is used within gradient definitions to specify color stops. It supports
 * properties like offset (position in the gradient), stopColor, and stopOpacity
 * for defining gradient color transitions.
 *
 * @param props - The properties for configuring the svgStop component.
 * @returns A `NubeComponentStop` object representing the svgStop component.
 */
declare const svgStop: (props: NubeComponentStopProps) => NubeComponentStop;

/**
 * Creates a `svgLinearGradient` component.
 *
 * A `svgLinearGradient` is used for defining linear gradients in SVG graphics.
 * It supports properties like gradient direction (x1, y1, x2, y2), gradientUnits,
 * and can contain stop elements to define color transitions.
 *
 * @param props - The properties for configuring the svgLinearGradient component.
 * @returns A `NubeComponentLinearGradient` object representing the svgLinearGradient component.
 */
declare const svgLinearGradient: (props: NubeComponentLinearGradientProps) => NubeComponentLinearGradient;

/**
 * Creates a `svgRadialGradient` component.
 *
 * A `svgRadialGradient` is used for defining radial gradients in SVG graphics.
 * It supports properties like center (cx, cy), radius (r), focal point (fx, fy),
 * gradientUnits, and can contain stop elements to define color transitions.
 *
 * @param props - The properties for configuring the svgRadialGradient component.
 * @returns A `NubeComponentRadialGradient` object representing the svgRadialGradient component.
 */
declare const svgRadialGradient: (props: NubeComponentRadialGradientProps) => NubeComponentRadialGradient;

/**
 * Creates a `svgMask` component.
 *
 * A `svgMask` is used for defining masks in SVG graphics that control the opacity
 * of other elements. It supports properties like position (x, y), size (width, height),
 * maskUnits, and can contain child elements that define the mask content.
 *
 * @param props - The properties for configuring the svgMask component.
 * @returns A `NubeComponentMask` object representing the svgMask component.
 */
declare const svgMask: (props: NubeComponentMaskProps) => NubeComponentMask;

/**
 * Creates a `svgClipPath` component.
 *
 * A `svgClipPath` is used for defining clipping paths in SVG graphics that restrict
 * the rendering area of other elements. It supports properties like clipPathUnits
 * and can contain child elements that define the clipping shape.
 *
 * @param props - The properties for configuring the svgClipPath component.
 * @returns A `NubeComponentClipPath` object representing the svgClipPath component.
 */
declare const svgClipPath: (props: NubeComponentClipPathProps) => NubeComponentClipPath;

/**
 * Creates a `svgUse` component.
 *
 * A `svgUse` is used for referencing and reusing other SVG elements. It supports
 * properties like href (reference to the element), position (x, y), size (width, height),
 * and transform for positioning and scaling the referenced element.
 *
 * @param props - The properties for configuring the svgUse component.
 * @returns A `NubeComponentUse` object representing the svgUse component.
 */
declare const svgUse: (props: NubeComponentUseProps) => NubeComponentUse;

/**
 * Creates a `svgSymbol` component.
 *
 * A `svgSymbol` is used for defining reusable symbols in SVG graphics. It supports
 * properties like viewBox, preserveAspectRatio, and can contain child elements
 * that define the symbol content for later reuse with the use element.
 *
 * @param props - The properties for configuring the svgSymbol component.
 * @returns A `NubeComponentSymbol` object representing the svgSymbol component.
 */
declare const svgSymbol: (props: NubeComponentSymbolProps) => NubeComponentSymbol;

/**
 * Creates a `svgPattern` component.
 *
 * A `svgPattern` is used for defining repeating patterns in SVG graphics. It supports
 * properties like position (x, y), size (width, height), patternUnits, viewBox,
 * and can contain child elements that define the pattern content.
 *
 * @param props - The properties for configuring the svgPattern component.
 * @returns A `NubeComponentPattern` object representing the svgPattern component.
 */
declare const svgPattern: (props: NubeComponentPatternProps) => NubeComponentPattern;

/**
 * Creates a `svgFilter` component.
 *
 * A `svgFilter` is used for defining filter effects in SVG graphics. It supports
 * properties like position (x, y), size (width, height), filterUnits, primitiveUnits,
 * and can contain filter primitive elements that define the filter operations.
 *
 * @param props - The properties for configuring the svgFilter component.
 * @returns A `NubeComponentFilter` object representing the svgFilter component.
 */
declare const svgFilter: (props: NubeComponentFilterProps) => NubeComponentFilter;

/**
 * Creates a `svgFeGaussianBlur` component.
 *
 * A `svgFeGaussianBlur` is a filter primitive that applies a Gaussian blur effect
 * to SVG graphics. It supports properties like stdDeviation (blur amount) and
 * edgeMode for handling edge pixels during blurring.
 *
 * @param props - The properties for configuring the svgFeGaussianBlur component.
 * @returns A `NubeComponentFeGaussianBlur` object representing the svgFeGaussianBlur component.
 */
declare const svgFeGaussianBlur: (props: NubeComponentFeGaussianBlurProps) => NubeComponentFeGaussianBlur;

/**
 * Creates a `svgFeOffset` component.
 *
 * A `svgFeOffset` is a filter primitive that offsets the input image by a specified
 * amount. It supports properties like dx, dy (offset distances) and in (input source)
 * for creating shadow and displacement effects.
 *
 * @param props - The properties for configuring the svgFeOffset component.
 * @returns A `NubeComponentFeOffset` object representing the svgFeOffset component.
 */
declare const svgFeOffset: (props: NubeComponentFeOffsetProps) => NubeComponentFeOffset;

/**
 * Creates a `svgFeMerge` component.
 *
 * A `svgFeMerge` is a filter primitive that merges multiple input images together.
 * It can contain feMergeNode elements that specify the input sources to be merged
 * in order, creating composite effects from multiple filter operations.
 *
 * @param props - The properties for configuring the svgFeMerge component.
 * @returns A `NubeComponentFeMerge` object representing the svgFeMerge component.
 */
declare const svgFeMerge: (props: NubeComponentFeMergeProps) => NubeComponentFeMerge;

/**
 * Creates a `svgFeMergeNode` component.
 *
 * A `svgFeMergeNode` is used within feMerge elements to specify input sources
 * for merging operations. It supports the in property to reference the input
 * source that should be included in the merge operation.
 *
 * @param props - The properties for configuring the svgFeMergeNode component.
 * @returns A `NubeComponentFeMergeNode` object representing the svgFeMergeNode component.
 */
declare const svgFeMergeNode: (props: NubeComponentFeMergeNodeProps) => NubeComponentFeMergeNode;

/**
 * Creates a `formRoot` component.
 *
 * A `formRoot` declares a native HTML form whose submission is executed on
 * the main thread. On submit the host adapter builds a `FormData` from the
 * descendant `formField` inputs, performs `fetch(target, { method, body })`,
 * and dispatches the outcome back to the worker through the optional
 * `onSuccess` / `onFail` callbacks.
 *
 * @param props - The properties for configuring the formRoot component.
 * @returns A `NubeComponentFormRoot` object representing the form container.
 */
declare const formRoot: (props: NubeComponentFormRootProps) => NubeComponentFormRoot;

/**
 * Creates a `formField` component.
 *
 * A `formField` is the declarative counterpart of an HTML `<input>` bound to
 * the surrounding `formRoot`. It supports the native Constraint Validation
 * API attributes (`required`, `minLength`, `maxLength`, `pattern`) and an
 * extra `maxSize` for `inputType: "file"` that the adapter maps to
 * `rangeOverflow`.
 *
 * @param props - The properties for configuring the formField component.
 * @returns A `NubeComponentFormField` object representing the form input.
 */
declare const formField: (props: NubeComponentFormFieldProps) => NubeComponentFormField;

/**
 * Creates a `formFieldError` component.
 *
 * A `formFieldError` is an inline validation message associated with a
 * single `formField`. It must be a direct child of `formField`. The error
 * remains in the DOM at all times and its visibility is controlled via CSS
 * using the parent's `data-validity-state` / `data-validity-error`
 * attributes.
 *
 * @param props - The properties for configuring the formFieldError component.
 * @returns A `NubeComponentFormFieldError` object representing the message.
 */
declare const formFieldError: (props: NubeComponentFormFieldErrorProps) => NubeComponentFormFieldError;

/**
 * Creates a `formSelect` component.
 *
 * A `formSelect` is the dropdown counterpart of `formField`, bound to the
 * surrounding `formRoot`. It mirrors the public `select` props but adds
 * Form-driven validation (data-validity-state, blur-triggered pristine
 * transition, force-validation on submit).
 *
 * @param props - The properties for configuring the formSelect component.
 * @returns A `NubeComponentFormSelect` object representing the select.
 */
declare const formSelect: (props: NubeComponentFormSelectProps) => NubeComponentFormSelect;

/**
 * Creates a `formCheckbox` component.
 *
 * A `formCheckbox` is a single checkbox bound to the surrounding `formRoot`.
 * It mirrors the public `checkbox` props but adds Form-driven validation
 * (`required` is mapped to the native `valueMissing` validity key).
 *
 * @param props - The properties for configuring the formCheckbox component.
 * @returns A `NubeComponentFormCheckbox` object representing the checkbox.
 */
declare const formCheckbox: (props: NubeComponentFormCheckboxProps) => NubeComponentFormCheckbox;

/**
 * Creates a `formRadio` component.
 *
 * A `formRadio` renders a group of radio inputs bound to the surrounding
 * `formRoot`. It mirrors the public `select` props shape (a list of
 * `{ label, value }` options + an optional default `value`) but renders as
 * a radio group and adds Form-driven validation (`required` is mapped to
 * the native `valueMissing` validity key when no option is selected).
 *
 * @param props - The properties for configuring the formRadio component.
 * @returns A `NubeComponentFormRadio` object representing the radio group.
 */
declare const formRadio: (props: NubeComponentFormRadioProps) => NubeComponentFormRadio;

/**
 * Creates a `formResetter` component.
 *
 * A `formResetter` is equivalent to `<button type="reset">` and clears every
 * descendant form field back to its initial value when clicked. The reset
 * is handled by the surrounding `formRoot` listening to the native form
 * `reset` event — no worker round-trip is required.
 *
 * @param props - The properties for configuring the formResetter component.
 * @returns A `NubeComponentFormResetter` object representing the button.
 */
declare const formResetter: (props: NubeComponentFormResetterProps) => NubeComponentFormResetter;

/**
 * Creates a `formSubmitter` component.
 *
 * A `formSubmitter` is equivalent to `<button type="submit">` and triggers
 * the submission of the surrounding `formRoot`. Children render as the
 * button label.
 *
 * @param props - The properties for configuring the formSubmitter component.
 * @returns A `NubeComponentFormSubmitter` object representing the button.
 */
declare const formSubmitter: (props: NubeComponentFormSubmitterProps) => NubeComponentFormSubmitter;

/**
 * Creates a `formSuccess` component.
 *
 * Conditional container rendered by `formRoot` when the submit fetch
 * resolves with `ok: true`. While shown, the regular form children are
 * unmounted; only this block and its descendants are visible. A
 * `formResetter` placed inside returns the form to the `idle` state.
 *
 * @param props - The properties for configuring the formSuccess component.
 * @returns A `NubeComponentFormSuccess` object.
 */
declare const formSuccess: (props: NubeComponentFormSuccessProps) => NubeComponentFormSuccess;

/**
 * Creates a `formFailure` component.
 *
 * Conditional container rendered by `formRoot` when the submit fetch
 * rejects or the response is not `ok`. Mount/unmount semantics mirror
 * `formSuccess`.
 *
 * @param props - The properties for configuring the formFailure component.
 * @returns A `NubeComponentFormFailure` object.
 */
declare const formFailure: (props: NubeComponentFormFailureProps) => NubeComponentFormFailure;

/**
 * Creates a `formSending` component.
 *
 * Conditional container rendered by `formRoot` while the submit fetch
 * is in flight. Typically used for loaders / skeletons.
 *
 * @param props - The properties for configuring the formSending component.
 * @returns A `NubeComponentFormSending` object.
 */
declare const formSending: (props: NubeComponentFormSendingProps) => NubeComponentFormSending;

declare const StyleSheet: {
    readonly create: <T extends {
        [key: string]: NubeComponentStyle;
    }>(styles: T) => T;
};

declare class ThemeColor implements ThemeColorInterface {
    private readonly token;
    constructor(token: string);
    opacity(opacity: ThemeColorOpacityRange): string;
    toValue(): string;
    toString(): string;
}

declare const theme: {
    readonly color: {
        readonly accent: ThemeColor;
        readonly main: {
            readonly foreground: ThemeColor;
            readonly background: ThemeColor;
        };
        /**
         * Checkout exposes these tokens with a leading underscore (`--_success`),
         * while the storefront exposes them without it (`--success`). Declaring the
         * underscore-free name as the `var()` fallback keeps a single theme object
         * working in both environments.
         */
        readonly success: {
            readonly light: "var(--_success-light, var(--success-light))";
            readonly medium: "var(--_success, var(--success))";
            readonly dark: "var(--_success-dark, var(--success-dark))";
        };
        readonly warning: {
            readonly light: "var(--_warning-light, var(--warning-light))";
            readonly medium: "var(--_warning, var(--warning))";
            readonly dark: "var(--_warning-dark, var(--warning-dark))";
        };
        readonly danger: {
            readonly light: "var(--_danger-light, var(--danger-light))";
            readonly medium: "var(--_danger, var(--danger))";
            readonly dark: "var(--_danger-dark, var(--danger-dark))";
        };
        readonly info: {
            readonly light: "var(--_info-light, var(--info-light))";
            readonly medium: "var(--_info, var(--info))";
            readonly dark: "var(--_info-dark, var(--info-dark))";
        };
        readonly neutral: {
            readonly light: "var(--_neutral-light, var(--neutral-light))";
            readonly medium: "var(--_neutral, var(--neutral))";
            readonly dark: "var(--_neutral-dark, var(--neutral-dark))";
        };
        readonly text: {
            readonly high: "var(--text-foreground-high)";
            readonly medium: "var(--text-foreground-medium)";
            readonly low: "var(--text-foreground-low)";
        };
    };
    readonly typography: {
        /**
         * Same underscore fallback as the semantic colors above: Checkout exposes
         * these tokens as `--_*`, the storefront without the underscore.
         */
        readonly body: {
            readonly font: "var(--_body-font, var(--body-font))";
            readonly fontSize: "var(--_body-font-size, var(--body-font-size))";
            readonly lineHeight: "var(--_body-font-leading, var(--body-font-leading))";
        };
        readonly xl: {
            readonly fontSize: "var(--_font-xl, var(--font-xl))";
            readonly lineHeight: "var(--_font-xl-leading, var(--font-xl-leading))";
        };
        readonly lg: {
            readonly fontSize: "var(--_font-lg, var(--font-lg))";
            readonly lineHeight: "var(--_font-lg-leading, var(--font-lg-leading))";
        };
        readonly base: {
            readonly fontSize: "var(--_font-base, var(--font-base))";
            readonly lineHeight: "var(--_font-base-leading, var(--font-base-leading))";
        };
        readonly md: {
            readonly fontSize: "var(--_font-md, var(--font-md))";
            readonly lineHeight: "var(--_font-md-leading, var(--font-md-leading))";
        };
        readonly sm: {
            readonly fontSize: "var(--_font-sm, var(--font-sm))";
            readonly lineHeight: "var(--_font-sm-leading, var(--font-sm-leading))";
        };
        readonly xs: {
            readonly fontSize: "var(--_font-xs, var(--font-xs))";
            readonly lineHeight: "var(--_font-xs-leading, var(--font-xs-leading))";
        };
    };
    readonly border: {
        readonly color: "var(--border-color)";
        readonly radius: "var(--border-radius)";
    };
    readonly box: {
        readonly border: {
            readonly color: "var(--box-border-color)";
            readonly radius: "var(--box-border-radius)";
        };
    };
    readonly input: {
        readonly border: {
            readonly color: "var(--input-border-color)";
        };
    };
    readonly button: {
        readonly foreground: "var(--button-foreground)";
        readonly background: "var(--button-background)";
        /**
         * @deprecated Use button.border.color instead.
         */
        readonly borderColor: "var(--button-border-color)";
        /**
         * @deprecated Use button.border.radius instead.
         */
        readonly borderRadius: "var(--button-border-radius)";
        /**
         * @deprecated Use button.border.width instead.
         */
        readonly borderWidth: "var(--button-border-width)";
        readonly border: {
            readonly color: "var(--button-border-color)";
            readonly radius: "var(--button-border-radius)";
            readonly width: "var(--button-border-width)";
        };
    };
    readonly label: {
        readonly foreground: "var(--label-foreground)";
        readonly background: "var(--label-background)";
    };
    readonly header: {
        readonly foreground: "var(--header-foreground)";
        readonly background: "var(--header-background)";
        readonly logo: {
            readonly maxWidth: "var(--header-logo-max-width)";
            readonly maxHeight: "var(--header-logo-max-height)";
            readonly font: "var(--header-logo-font)";
            readonly fontSize: "var(--header-logo-font-size)";
            readonly fontWeight: "var(--header-logo-font-weight)";
            readonly textTransform: "var(--header-logo-text-transform)";
            readonly letterSpacing: "var(--header-logo-letter-spacing)";
        };
    };
    readonly footer: {
        readonly foreground: "var(--footer-foreground)";
        readonly background: "var(--footer-background)";
    };
    readonly heading: {
        readonly font: "var(--heading-font)";
        readonly fontWeight: "var(--heading-font-weight)";
        readonly textTransform: "var(--heading-text-transform)";
        readonly letterSpacing: "var(--heading-letter-spacing)";
    };
};
type Theme = typeof theme;

/**
 * Type for functions that create Nube components.
 * This is used to ensure type safety when creating styled components.
 */
type NubeComponentFunction<Props = NubeComponentProps> = (props: Props) => NubeComponent;
/**
 * `styled` allows declarative styling with CSS-in-JS.
 * The CSS is inserted directly into the `styled` prop as a string literal.
 */
declare function styled<Props extends NubeComponentProps>(baseComponent: NubeComponentFunction<Props>): (strings: TemplateStringsArray, ...exprs: unknown[]) => typeof baseComponent;

type KeyframesObject = {
    name: string;
    css: string;
    toString(): string;
};
/**
 * Generates a unique name and returns a keyframes object that can be interpolated in template literals.
 */
declare function keyframes(strings: TemplateStringsArray, ...exprs: unknown[]): KeyframesObject;

export { StyleSheet, type Theme, accordionContent, accordionHeader, accordionItem, accordionRoot, box, button, check, checkbox, column, field, formCheckbox, formFailure, formField, formFieldError, formRadio, formResetter, formRoot, formSelect, formSending, formSubmitter, formSuccess, fragment, icon, iframe, image, img, keyframes, link, markdown, numberfield, popoverButton, popoverContent, popoverRoot, progress, row, select, sideScroll, styled, svgCircle, svgClipPath, svgDefs, svgEllipse, svgFeGaussianBlur, svgFeMerge, svgFeMergeNode, svgFeOffset, svgFilter, svgG, svgLine, svgLinearGradient, svgMask, svgPath, svgPattern, svgPolygon, svgPolyline, svgRadialGradient, svgRect, svgRoot, svgStop, svgSymbol, svgText, svgTspan, svgUse, tableBody, tableCell, tableColumnHeaderCell, tableHeader, tableRoot, tableRow, tableRowHeaderCell, text, textarea, theme, toastDescription, toastRoot, toastTitle, txt, txtarea, videoPlayer, videoRoot, videoStories, videoYouTube };