import type * as CSS from "csstype";
import type { NubeSDKState } from "./main";
import type { UISlot } from "./slots";
import type { Prettify } from "./utility";

/* -------------------------------------------------------------------------- */
/*                               Utility Types                                */
/* -------------------------------------------------------------------------- */

/**
 * Defines units for size measurements.
 */
export type SizeUnit = "em" | "rem" | "px" | "%";

/**
 * Represents a flexible size definition.
 * It can be a number, a string with a unit, or "auto".
 */
export type Size = `${number}${SizeUnit}` | number | "auto";

/**
 * Ensures URLs are secure by enforcing "https://".
 */
export type SecurityURL = `https://${string}`;

/**
 * Defines possible alignment values for flex container content.
 */
export type FlexContent =
	| "start"
	| "center"
	| "space-between"
	| "space-around"
	| "space-evenly";

/**
 * Defines possible alignment values for flex items.
 */
export type FlexItems = "start" | "center" | "end" | "stretch";

/**
 * Represents the range of opacity values for theme colors.
 */
export type ThemeColorOpacityRange =
	| 0
	| 5
	| 10
	| 20
	| 30
	| 40
	| 50
	| 60
	| 70
	| 80
	| 90;

/**
 * Represents a theme color class that can generate CSS custom properties.
 */
export interface ThemeColorInterface {
	opacity(opacity: ThemeColorOpacityRange): string;
	toValue(): string;
	toString(): string;
}

export type ThemeColorValue = string;
export type ThemeColorOpacityValue = string;

/**
 * Primitive CSS values that can be used in theme definitions.
 */
type ThemeCSSPrimitive = string | number;

/**
 * Represents values that can be used in theme-aware CSS properties.
 */
export type ThemeCSSValue =
	| ThemeColorInterface
	| ThemeColorOpacityValue
	| ThemeCSSPrimitive;

/**
 * Maps properties that should use the Size type
 */
type SizePropertyKeys =
	| "width"
	| "height"
	| "minWidth"
	| "minHeight"
	| "maxWidth"
	| "maxHeight"
	| "top"
	| "right"
	| "bottom"
	| "left"
	| "margin"
	| "marginTop"
	| "marginBottom"
	| "marginLeft"
	| "marginRight"
	| "padding"
	| "paddingTop"
	| "paddingBottom"
	| "paddingLeft"
	| "paddingRight"
	| "fontSize"
	| "lineHeight"
	| "borderWidth"
	| "borderRadius";

/**
 * Applies Size only to size properties.
 * The others remain as string | number.
 */
type EnhancedCSSProperties = {
	[K in keyof CSS.Properties]?: K extends SizePropertyKeys
		? Size | ThemeCSSValue
		: CSS.Properties[K] | ThemeCSSValue;
};

/**
 * Define named styles for Nube components.
 * This type combines CSS properties with theme-aware values and Size types for layout properties.
 */
export type NubeComponentStyle = Partial<EnhancedCSSProperties>;

/* -------------------------------------------------------------------------- */
/*                            Box Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `box` component.
 */
export type NubeComponentBoxProps = Prettify<
	NubeComponentProps &
		ChildrenProps &
		Partial<{
			width: Size;
			height: Size;
			margin: Size;
			padding: Size;
			gap: Size;
			direction: "row" | "col";
			style?: NubeComponentStyle;
			reverse: boolean;
			background: string;
			color: string;
			justifyContent: FlexContent;
			alignItems: FlexItems;
			alignContent: FlexContent;
			borderRadius: Size;
		}>
>;

/**
 * Represents a `box` component, used as a layout container.
 */
export type NubeComponentBox = Prettify<
	NubeComponentBase &
		NubeComponentBoxProps & {
			type: "box";
		}
>;

/* -------------------------------------------------------------------------- */
/*                            Col Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `col` component.
 * Inherits properties from `box`, excluding `direction`.
 */
export type NubeComponentColumnProps = Omit<NubeComponentBoxProps, "direction">;

/**
 * Represents a `column` component, used for column-based layouts.
 */
export type NubeComponentColumn = Prettify<
	NubeComponentBase &
		NubeComponentColumnProps & {
			type: "col";
		}
>;

/* -------------------------------------------------------------------------- */
/*                            Row Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `row` component.
 * Inherits properties from `box`, excluding `direction`.
 */
export type NubeComponentRowProps = Omit<NubeComponentBoxProps, "direction">;

/**
 * Represents a `row` component, used for row-based layouts.
 */
export type NubeComponentRow = Prettify<
	NubeComponentBase &
		NubeComponentRowProps & {
			type: "row";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Field Component                                  */
/* -------------------------------------------------------------------------- */

/**
 * Defines a handler for components with events.
 */
export type NubeComponentEventHandler<
	Events extends string,
	Value = string,
> = (data: { type: Events; state: NubeSDKState; value?: Value }) => void;

/**
 * Defines a handler for field-related events.
 */
export type NubeComponentFieldEventHandler = NubeComponentEventHandler<
	"change" | "focus" | "blur",
	string
>;

/**
 * Represents the properties available for a `field` component.
 */
export type NubeComponentFieldProps = Prettify<
	NubeComponentBase & {
		name: string;
		label: string;
		value?: string;
		placeholder?: string;
		disabled?: boolean;
		mask?: string;
		autoFocus?: boolean;
		style?: {
			container?: NubeComponentStyle;
			label?: NubeComponentStyle;
			input?: NubeComponentStyle;
		};
		onChange?: NubeComponentFieldEventHandler;
		onBlur?: NubeComponentFieldEventHandler;
		onFocus?: NubeComponentFieldEventHandler;
	}
>;

/**
 * Represents a `field` component, used for form inputs.
 */
export type NubeComponentField = Prettify<
	NubeComponentBase &
		NubeComponentFieldProps & {
			type: "field";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           NumberField Component                                */
/* -------------------------------------------------------------------------- */

export type NubeComponentNumberFieldEventHandler = NubeComponentEventHandler<
	"change" | "focus" | "blur" | "increment" | "decrement",
	string
>;

/**
 * Represents the properties available for a `numberfield` component.
 */
export type NubeComponentNumberFieldProps = Prettify<
	NubeComponentBase & {
		name: string;
		label: string;
		value?: number;
		min?: number;
		max?: number;
		step?: number;
		disabled?: boolean;
		style?: {
			container?: NubeComponentStyle;
			wrapper?: NubeComponentStyle;
			label?: NubeComponentStyle;
			input?: NubeComponentStyle;
			decrementButton?: NubeComponentStyle;
			incrementButton?: NubeComponentStyle;
		};
		onChange?: NubeComponentNumberFieldEventHandler;
		onBlur?: NubeComponentNumberFieldEventHandler;
		onFocus?: NubeComponentNumberFieldEventHandler;
		onIncrement?: NubeComponentNumberFieldEventHandler;
		onDecrement?: NubeComponentNumberFieldEventHandler;
	}
>;

/**
 * Represents a `numberfield` component, used for numeric form inputs with increment/decrement buttons.
 */
export type NubeComponentNumberField = Prettify<
	NubeComponentBase &
		NubeComponentNumberFieldProps & {
			type: "numberfield";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Accordion Component                              */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for an `accordion` component.
 */
export type NubeComponentAccordionRootProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			defaultValue: string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents an `accordion` component, used for accordions.
 */
export type NubeComponentAccordionRoot = Prettify<
	NubeComponentBase &
		NubeComponentAccordionRootProps & { type: "accordionRoot" }
>;

/* -------------------------------------------------------------------------- */
/*                        Accordion Header Component                          */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for an `accordion` header component.
 */
export type NubeComponentAccordionHeaderProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			style?: NubeComponentStyle;
			showIcon?: boolean;
		}
>;

/**
 * Represents an `accordion` header component, used for accordion headers.
 */
export type NubeComponentAccordionHeader = Prettify<
	NubeComponentBase &
		NubeComponentAccordionHeaderProps & { type: "accordionHeader" }
>;

/* -------------------------------------------------------------------------- */
/*                            Accordion Content Component                     */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for an `accordion` content component.
 */
export type NubeComponentAccordionContentProps = Prettify<
	NubeComponentBase & ChildrenProps
>;

/**
 * Represents an `accordion` content component, used for accordion content.
 */
export type NubeComponentAccordionContent = Prettify<
	NubeComponentBase &
		NubeComponentAccordionContentProps & { type: "accordionContent" }
>;

/* -------------------------------------------------------------------------- */
/*                            Accordion Item Component                        */
/* -------------------------------------------------------------------------- */

/**
 * Represents the event handler for Accordion Item component
 */
export type NubeComponentAccordionItemEventHandler = NubeComponentEventHandler<
	"click",
	string
>;

/**
 * Represents the properties available for an `accordion` item component.
 */
export type NubeComponentAccordionItemProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			value: string;
			onToggle?: NubeComponentAccordionItemEventHandler;
		}
>;

/**
 * Represents an `accordion` item component, used for accordion items.
 */
export type NubeComponentAccordionItem = Prettify<
	NubeComponentBase &
		NubeComponentAccordionItemProps & { type: "accordionItem" }
>;

/* -------------------------------------------------------------------------- */
/*                            Select Component                                */
/* -------------------------------------------------------------------------- */

export type NubeComponentSelectEventHandler = NubeComponentEventHandler<
	"change",
	string
>;

/**
 * Represents the properties available for a `select` component.
 */
export type NubeComponentSelectProps = Prettify<
	NubeComponentBase & {
		name: string;
		label: string;
		value?: string;
		disabled?: boolean;
		style?: {
			label?: NubeComponentStyle;
			select?: NubeComponentStyle;
		};
		options: { label: string; value: string; disabled?: boolean }[];
		onChange?: NubeComponentSelectEventHandler;
	}
>;

/**
 * Represents a `select` component, used for select inputs.
 */
export type NubeComponentSelect = Prettify<
	NubeComponentBase &
		NubeComponentSelectProps & {
			type: "select";
		}
>;

/* -------------------------------------------------------------------------- */
/*                          Button Component                                */
/* -------------------------------------------------------------------------- */

export type NubeComponentButtonEventHandler = NubeComponentEventHandler<
	"click",
	string
>;

/**
 * Represents the properties available for a `button` component.
 */
export type NubeComponentButtonProps = Prettify<
	NubeComponentBase &
		Partial<{
			children: NubeComponentChildren;
			disabled: boolean;
			variant: "primary" | "secondary" | "transparent" | "link";
			width: Size;
			height: Size;
			style?: NubeComponentStyle;
			onClick: NubeComponentButtonEventHandler;
			ariaLabel: string;
		}>
>;

/**
 * Represents a `button` component.
 */
export type NubeComponentButton = Prettify<
	NubeComponentBase &
		NubeComponentButtonProps & {
			type: "button";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Link Component                                  */
/* -------------------------------------------------------------------------- */

export type NubeComponentLinkEventHandler = NubeComponentEventHandler<
	"click",
	string
>;

/**
 * Represents the properties available for a `link` component.
 */
export type NubeComponentLinkProps = Prettify<
	NubeComponentBase &
		Partial<{
			children: NubeComponentChildren;
			href: string;
			target?: "_blank";
			variant?: "primary" | "secondary" | "transparent" | "link";
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `link` component, used for navigation links.
 */
export type NubeComponentLink = Prettify<
	NubeComponentBase &
		NubeComponentLinkProps & {
			type: "link";
		}
>;

/* -------------------------------------------------------------------------- */
/*                            Check Component                                 */
/* -------------------------------------------------------------------------- */

/**
 * Represents the event handler for Check component
 */
export type NubeComponentCheckEventHandler = NubeComponentEventHandler<
	"change",
	boolean
>;

/**
 * Represents the properties available for a `checkbox` component.
 */
export type NubeComponentCheckboxProps = Prettify<
	NubeComponentBase & {
		name: string;
		label: string;
		checked: boolean;
		onChange?: NubeComponentCheckEventHandler;
		style?: {
			container?: NubeComponentStyle;
			label?: NubeComponentStyle;
			checkbox?: NubeComponentStyle;
		};
	}
>;

/**
 * Represents a `checkbox` component, used for checkboxs.
 */
export type NubeComponentCheckbox = Prettify<
	NubeComponentBase &
		NubeComponentCheckboxProps & {
			type: "check";
		}
>;

/* -------------------------------------------------------------------------- */
/*                          Textarea Component                                */
/* -------------------------------------------------------------------------- */

export type NubeComponentTextareaEventHandler = NubeComponentEventHandler<
	"change" | "focus" | "blur",
	string
>;

/**
 * Represents the properties available for a `textarea` component.
 */
export type NubeComponentTextareaProps = Prettify<
	NubeComponentBase & {
		name: string;
		label: string;
		maxLength?: number;
		row?: number;
		value?: string;
		mask?: string;
		autoFocus?: boolean;
		onChange?: NubeComponentTextareaEventHandler;
		onBlur?: NubeComponentTextareaEventHandler;
		onFocus?: NubeComponentTextareaEventHandler;
		style?: {
			container?: NubeComponentStyle;
			label?: NubeComponentStyle;
			input?: NubeComponentStyle;
		};
	}
>;

/**
 * Represents a `textarea` component, used for textareas.
 */
export type NubeComponentTextarea = Prettify<
	NubeComponentBase &
		NubeComponentTextareaProps & {
			type: "txtarea";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Image Component                                  */
/* -------------------------------------------------------------------------- */

/**
 * Represents an image source with optional media conditions.
 */
export type ImageSource = {
	src: string;
	media?: string;
};

/**
 * Represents the properties available for an `image` component.
 */
export type NubeComponentImageProps = Prettify<
	NubeComponentBase & {
		src: string;
		alt: string;
		sources?: ImageSource[];
		width?: Size;
		height?: Size;
		style?: NubeComponentStyle;
	}
>;

/**
 * Represents an `image` component, used to display images.
 */
export type NubeComponentImage = Prettify<
	NubeComponentBase &
		NubeComponentImageProps & {
			type: "img";
		}
>;

/* -------------------------------------------------------------------------- */
/*                         Progress Component                                 */
/* -------------------------------------------------------------------------- */

/**
 * Represents ARIA properties for accessibility in progress components.
 */
export type ProgressAriaProps = {
	"aria-valuemax"?: number;
	"aria-valuemin"?: number;
	"aria-valuenow"?: number;
	"aria-label"?: string;
};

/**
 * Represents the properties available for a `progress` component.
 */
export type NubeComponentProgressProps = Prettify<
	NubeComponentBase &
		ProgressAriaProps & {
			value?: number;
			max?: number;
			style?: NubeComponentStyle;
		}
>;

/**
 * Represents a `progress` component, used to display completion progress of a task.
 */
export type NubeComponentProgress = Prettify<
	NubeComponentBase &
		NubeComponentProgressProps & {
			type: "progress";
		}
>;

/* -------------------------------------------------------------------------- */
/*                         Iframe Component                                  */
/* -------------------------------------------------------------------------- */

export type JsonValue =
	| string
	| number
	| boolean
	| null
	| JsonValue[]
	| { [key: string]: JsonValue };

export type JsonObject = { [key: string]: JsonValue };

export type NubeComponentIframeEventHandler = NubeComponentEventHandler<
	"message",
	JsonObject
>;

/**
 * Payload the iframe document may `postMessage` to the host when `autoresize` is enabled.
 * Dimensions are applied in pixels on the host iframe element.
 */
export type NubeIframeResizePostMessage = {
	type: "resize";
	height?: number;
	width?: number;
};

/**
 * Represents the properties available for an `iframe` component.
 * Designed for third-party content integration in e-commerce stores.
 */
export type NubeComponentIframeProps = Prettify<
	NubeComponentBase & {
		/** Third-party content URL (HTTPS only for security) */
		src: SecurityURL;
		/** Widget width (controlled by third-party) */
		width?: Size;
		/** Widget height (controlled by third-party) */
		height?: Size;
		/** Security sandbox restrictions (defaults to safe third-party settings) */
		sandbox?: string;
		/** Basic styling within platform theme constraints */
		style?: NubeComponentStyle;
		/**
		 * When `true`, the host listens for child `postMessage` with {@link NubeIframeResizePostMessage}
		 * and updates the iframe size (px). Independent of `onMessage`. Requires stable iframe identity
		 */
		autoresize?: boolean;
		/** Event handler for messages from the iframe */
		onMessage?: NubeComponentIframeEventHandler;
	}
>;

/**
 * Represents an `iframe` component, used to embed external content.
 */
export type NubeComponentIframe = Prettify<
	NubeComponentBase &
		NubeComponentIframeProps & {
			type: "iframe";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Video Component                                  */
/* -------------------------------------------------------------------------- */

/** Payload emitted with the `play`, `pause` and `ended` video events. */
export type NubeComponentVideoTimePayload = {
	/** Playback position in seconds when the event fired. */
	currentTime: number;
};

/** Payload emitted with the `progress` video event (fires roughly every 1s). */
export type NubeComponentVideoProgressPayload = {
	percent: number;
	currentTime: number;
	duration: number;
};

/** Payload emitted with the `buffer` video event. */
export type NubeComponentVideoBufferPayload = {
	buffering: boolean;
};

export type NubeComponentVideoPlayHandler = NubeComponentEventHandler<
	"play",
	NubeComponentVideoTimePayload
>;
export type NubeComponentVideoPauseHandler = NubeComponentEventHandler<
	"pause",
	NubeComponentVideoTimePayload
>;
export type NubeComponentVideoEndedHandler = NubeComponentEventHandler<
	"ended",
	NubeComponentVideoTimePayload
>;
export type NubeComponentVideoProgressHandler = NubeComponentEventHandler<
	"progress",
	NubeComponentVideoProgressPayload
>;
export type NubeComponentVideoBufferHandler = NubeComponentEventHandler<
	"buffer",
	NubeComponentVideoBufferPayload
>;

/** Payload emitted with the `open` event (video entered fullscreen). No structured data. */
export type NubeComponentVideoOpenPayload = Record<string, never>;
/** Payload emitted with the `close` event (video exited fullscreen). No structured data. */
export type NubeComponentVideoClosePayload = Record<string, never>;

export type NubeComponentVideoOpenHandler = NubeComponentEventHandler<
	"open",
	NubeComponentVideoOpenPayload
>;
export type NubeComponentVideoCloseHandler = NubeComponentEventHandler<
	"close",
	NubeComponentVideoClosePayload
>;

/* -------------------------------------------------------------------------- */
/*                      Video source-specific errors                          */
/* -------------------------------------------------------------------------- */

/**
 * Error codes reported by `Video.Player` (the self-hosted MP4 / HLS / DASH
 * source). `invalid_source` / `engine_load_failed` are raised by the SDK before
 * playback; the four `media_err_*` codes mirror the HTML media element's
 * `MediaError.code` as readable strings; `playback_error` covers a media
 * failure with no known code.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code
 */
export type NubeComponentVideoPlayerErrorCode =
	| "invalid_source"
	| "engine_load_failed"
	| "media_err_aborted"
	| "media_err_network"
	| "media_err_decode"
	| "media_err_src_not_supported"
	| "playback_error";

/**
 * Payload delivered to `Video.Player`'s `onError`. `source` identifies the
 * provider — errors are source-specific, so there is no shared union across
 * providers (see {@link NubeComponentVideoYouTubeErrorPayload}).
 */
export type NubeComponentVideoPlayerErrorPayload = {
	source: "video-player";
	code: NubeComponentVideoPlayerErrorCode;
	message: string;
};

/**
 * Error codes reported by `Video.YouTube`. `invalid_source` is raised by the
 * SDK before playback; the rest map the YouTube IFrame API's numeric `onError`
 * codes to readable strings.
 *
 * @see https://developers.google.com/youtube/iframe_api_reference#onError
 */
export type NubeComponentVideoYouTubeErrorCode =
	| "invalid_source"
	| "invalid_video_id"
	| "html5_error"
	| "video_not_found"
	| "embedding_not_allowed"
	| "playback_error";

/**
 * Payload delivered to `Video.YouTube`'s `onError`. Its own `source` / `code`,
 * distinct from {@link NubeComponentVideoPlayerErrorPayload} — there is no
 * shared union across providers.
 */
export type NubeComponentVideoYouTubeErrorPayload = {
	source: "video-youtube";
	code: NubeComponentVideoYouTubeErrorCode;
	message: string;
};

export type NubeComponentVideoPlayerErrorHandler = NubeComponentEventHandler<
	"error",
	NubeComponentVideoPlayerErrorPayload
>;
export type NubeComponentVideoYouTubeErrorHandler = NubeComponentEventHandler<
	"error",
	NubeComponentVideoYouTubeErrorPayload
>;

/**
 * Properties for `Video.Root` — the source-agnostic wrapper that owns layout,
 * shared playback modifiers and the source-agnostic playback events. Wrap a
 * `Video.Player` (self-hosted) or a `Video.YouTube` (embed) plus any overlay
 * children, which render over the video when the fullscreen lightbox is open.
 *
 * Errors are NOT here: they are source-specific and belong to each player
 * (see `Video.Player`'s and `Video.YouTube`'s own `onError`).
 */
export type NubeComponentVideoRootProps = Prettify<
	NubeComponentBase & {
		width?: Size;
		height?: Size;
		style?: NubeComponentStyle;
		/** Autoplay on mount. Always muted when `true` (enforced by the component). */
		autoplay?: boolean;
		muted?: boolean;
		loop?: boolean;
		onPlay?: NubeComponentVideoPlayHandler;
		onPause?: NubeComponentVideoPauseHandler;
		onEnded?: NubeComponentVideoEndedHandler;
		onProgress?: NubeComponentVideoProgressHandler;
		onBuffer?: NubeComponentVideoBufferHandler;
		/** Fired when the video enters the fullscreen overlay. */
		onOpen?: NubeComponentVideoOpenHandler;
		/** Fired when the fullscreen overlay closes. */
		onClose?: NubeComponentVideoCloseHandler;
		children: NubeComponentChildren;
	}
>;

/**
 * Represents a `Video.Root` component, the wrapper for a self-hosted video.
 */
export type NubeComponentVideoRoot = Prettify<
	NubeComponentBase &
		NubeComponentVideoRootProps & {
			type: "videoRoot";
		}
>;

/**
 * Properties for `Video.Player` — a self-hosted video source (MP4, HLS or DASH)
 * rendered by the SDK's bundled player engine. Must be a child of `Video.Root`.
 */
export type NubeComponentVideoPlayerProps = Prettify<
	NubeComponentBase & {
		/** Video source URL (HTTPS only). MP4, HLS (`.m3u8`) or DASH (`.mpd`). */
		src: SecurityURL;
		/** Poster image shown before playback (HTTPS only). */
		poster?: SecurityURL;
		/** Show the player's default controls. Defaults to `true`. */
		controls?: boolean;
		/**
		 * Aspect ratio as `"width/height"` (e.g. `"16/9"`, `"9/16"`). Defaults to
		 * `"16/9"`. Ignored in fullscreen, where the video letterboxes to fit the viewport.
		 */
		aspectRatio?: string;
		/**
		 * Enable the fullscreen "lightbox": an absoluteFill overlay that fills the
		 * viewport (CSS, not native fullscreen) with a mandatory close button and
		 * `Video.Root`'s overlay children rendered on top.
		 */
		lightbox?: boolean;
		/**
		 * Observe source-specific errors from this player. The handler receives a
		 * {@link NubeComponentVideoPlayerErrorPayload}. Distinct from `Video.Root`'s
		 * source-agnostic playback events.
		 */
		onError?: NubeComponentVideoPlayerErrorHandler;
	}
>;

/**
 * Represents a `Video.Player` component, a self-hosted video source.
 */
export type NubeComponentVideoPlayer = Prettify<
	NubeComponentBase &
		NubeComponentVideoPlayerProps & {
			type: "videoPlayer";
		}
>;

/**
 * Props for the `Video.YouTube` component.
 */
export type NubeComponentVideoYouTubeProps = Prettify<
	NubeComponentBase & {
		/** YouTube video ID (e.g. `"YE7VzlLtp-4"`) or a youtube.com / youtu.be URL. */
		src: string;
		/** Show the YouTube player controls. Defaults to `false`. */
		controls?: boolean;
		/**
		 * Allow fullscreen via YouTube's native fullscreen button. Defaults to
		 * `true`. The button lives in YouTube's control bar, so it is only
		 * reachable when `controls` is `true`. No custom fullscreen overlay is
		 * provided (prohibited by YouTube's embedded-player terms).
		 */
		allowFullscreen?: boolean;
		/**
		 * Observe source-specific errors from this embed. The handler receives a
		 * {@link NubeComponentVideoYouTubeErrorPayload}. Distinct from
		 * `Video.Root`'s source-agnostic playback events.
		 */
		onError?: NubeComponentVideoYouTubeErrorHandler;
	}
>;

/**
 * Represents a `Video.YouTube` component, a YouTube embed backed by the
 * official IFrame Player API. No lightbox (ToS prohibits overlaying YouTube).
 */
export type NubeComponentVideoYouTube = Prettify<
	NubeComponentBase &
		NubeComponentVideoYouTubeProps & {
			type: "videoYouTube";
		}
>;

/* -------------------------------------------------------------------------- */
/*                        VideoStories Component                              */
/* -------------------------------------------------------------------------- */

/** A single story in the playlist: a self-hosted video with an optional poster. */
export type VideoStoriesItem = {
	/**
	 * MP4, HLS (`.m3u8`) or DASH (`.mpd`) source. Must be an **absolute**
	 * https URL (e.g. `https://cdn.example.com/video.mp4`).
	 * Items with an unsafe URL are dropped before render.
	 */
	src: SecurityURL;
	/** Poster image shown before playback. Must be an absolute https URL. */
	poster?: SecurityURL;
};

/** Payload emitted with the `open` VideoStories event. */
export type NubeComponentVideoStoriesOpenPayload = {
	/** Index of the story that was active when the overlay opened. */
	index: number;
	/** Total number of stories in the playlist. */
	total: number;
};

/** Payload emitted with the `close` and `change` VideoStories events. */
export type NubeComponentVideoStoriesIndexPayload = {
	/** Index of the active story at the time of the event. */
	index: number;
};

/** Payload emitted with the `complete` VideoStories event. */
export type NubeComponentVideoStoriesCompletePayload = {
	/** Total number of stories in the playlist. */
	total: number;
};

/** Payload emitted with the `error` VideoStories event. */
export type NubeComponentVideoStoriesErrorPayload = {
	/** Index of the story that failed to load or play. */
	index: number;
};

export type NubeComponentVideoStoriesOpenHandler = NubeComponentEventHandler<
	"open",
	NubeComponentVideoStoriesOpenPayload
>;
export type NubeComponentVideoStoriesCloseHandler = NubeComponentEventHandler<
	"close",
	NubeComponentVideoStoriesIndexPayload
>;
export type NubeComponentVideoStoriesChangeHandler = NubeComponentEventHandler<
	"change",
	NubeComponentVideoStoriesIndexPayload
>;
export type NubeComponentVideoStoriesCompleteHandler =
	NubeComponentEventHandler<
		"complete",
		NubeComponentVideoStoriesCompletePayload
	>;
export type NubeComponentVideoStoriesErrorHandler = NubeComponentEventHandler<
	"error",
	NubeComponentVideoStoriesErrorPayload
>;

/**
 * Properties for `VideoStories` — a vertical, stories-style player for a
 * sequence of self-hosted videos (Instagram/WhatsApp-style). Plays inline as
 * a compact card; tapping the card expands to a fullscreen overlay.
 */
export type NubeComponentVideoStoriesProps = Prettify<
	NubeComponentBase & {
		/** The ordered playlist. */
		items: VideoStoriesItem[];
		/** Inline card width in px (renders as a 9:16 card). Defaults to `96`. */
		width?: number | string;
		/** Start muted. Defaults to `true` (browser autoplay policy); user can unmute. */
		startMuted?: boolean;
		/** Press-and-hold the story to pause; release to resume. Defaults to `true`. */
		pauseOnHold?: boolean;
		/**
		 * Tap the left/right thirds to navigate to the previous/next story
		 * (both inline and fullscreen). Defaults to `true`.
		 */
		tapToNavigate?: boolean;
		/**
		 * Advance to the next story when the current one ends. Defaults to `true`;
		 * when `false`, playback stops on the last frame of each story.
		 */
		autoAdvance?: boolean;
		/**
		 * After the last story, restart from the first instead of completing.
		 * Defaults to `false`. Only meaningful together with `autoAdvance`.
		 */
		loop?: boolean;
		style?: NubeComponentStyle;
		/** Emitted (observe-only) when the fullscreen overlay opens. */
		onOpen?: NubeComponentVideoStoriesOpenHandler;
		/** Emitted (observe-only) when the fullscreen overlay closes. */
		onClose?: NubeComponentVideoStoriesCloseHandler;
		/** Emitted (observe-only) when the active story changes. */
		onChange?: NubeComponentVideoStoriesChangeHandler;
		/** Emitted (observe-only) when the last story finishes. */
		onComplete?: NubeComponentVideoStoriesCompleteHandler;
		/** Emitted (observe-only) when a story fails to load or play. */
		onError?: NubeComponentVideoStoriesErrorHandler;
		children?: NubeComponentChildren;
	}
>;

/**
 * Represents a `videoStories` component, a stories-style video playlist.
 */
export type NubeComponentVideoStories = Prettify<
	NubeComponentBase &
		NubeComponentVideoStoriesProps & {
			type: "videoStories";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Txt Component                                    */
/* -------------------------------------------------------------------------- */

/**
 * Defines possible text formatting modifiers.
 */
export type TxtModifier =
	| "bold"
	| "italic"
	| "underline"
	| "strike"
	| "lowercase"
	| "uppercase"
	| "capitalize";

/**
 * Represents the properties available for a `text` component.
 */
export type NubeComponentTextProps = Prettify<
	NubeComponentBase & {
		color?: string;
		background?: string;
		heading?: 1 | 2 | 3 | 4 | 5 | 6;
		modifiers?: TxtModifier[];
		inline?: boolean;
		style?: NubeComponentStyle;
		children?: NubeComponentChildren;
		/**
		 * When `true`, renders a copy button that copies the text content to the
		 * clipboard.
		 */
		showCopyButton?: boolean;
	}
>;

/**
 * Represents a `text` component, used for displaying text with formatting options.
 */
export type NubeComponentText = Prettify<
	NubeComponentBase &
		NubeComponentTextProps & {
			type: "txt";
		}
>;

/* -------------------------------------------------------------------------- */
/*                          Toast Component                                   */
/* -------------------------------------------------------------------------- */

export type NubeComponentToastVariant =
	| "success"
	| "error"
	| "warning"
	| "info";

/**
 * Represents the properties available for a `toast` root component.
 */
export type NubeComponentToastRootProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			variant?: NubeComponentToastVariant;
			duration?: number;
			style?: NubeComponentStyle;
		}
>;

/**
 * Represents a `toast` root component, used for toasts.
 */
export type NubeComponentToastRoot = Prettify<
	NubeComponentBase &
		NubeComponentToastRootProps & {
			type: "toastRoot";
		}
>;

/**
 * Represents the properties available for a `toast` title component.
 */
export type NubeComponentToastTitleProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			style?: NubeComponentStyle;
		}
>;

/**
 * Represents a `toast` title component, used for toast titles.
 */
export type NubeComponentToastTitle = Prettify<
	NubeComponentBase &
		NubeComponentToastTitleProps & {
			type: "toastTitle";
		}
>;

/**
 * Represents the properties available for a `toast` description component.
 */
export type NubeComponentToastDescriptionProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			style?: NubeComponentStyle;
		}
>;

/**
 * Represents a `toast` description component, used for toast descriptions.
 */
export type NubeComponentToastDescription = Prettify<
	NubeComponentBase &
		NubeComponentToastDescriptionProps & {
			type: "toastDescription";
		}
>;

/* -------------------------------------------------------------------------- */
/*                            Form Components                                 */
/* -------------------------------------------------------------------------- */

/**
 * HTTP methods supported by `formRoot` submissions.
 */
export type FormHTTPMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";

/**
 * Input types supported by `formField`. Mirrors the subset of `<input type>`
 * values that can be safely materialized and validated on the host DOM.
 */
export type FormFieldInputType = "text" | "email" | "tel" | "number" | "file";

/**
 * Keys of the native `ValidityState` interface that `formField` exposes to
 * `formFieldError` via the `match` prop. `rangeOverflow` is reused for the
 * custom `maxSize` validation on `file` fields.
 */
export type FormFieldValidityStateKey =
	| "valueMissing"
	| "typeMismatch"
	| "tooShort"
	| "tooLong"
	| "patternMismatch"
	| "rangeOverflow"
	| "rangeUnderflow";

/**
 * Event handler for every event `formRoot` emits — mirrors the alias
 * convention used by `Field`/`Select`/`Check`/`Button` (one handler type
 * per component covering all of its events). The `value` is always a
 * string because UI values cross the worker boundary as strings:
 *  - on `"change"`: JSON-stringified `NubeFormData` snapshot of the form
 *  - on `"success"`: HTTP status code as a string
 *  - on `"fail"`: the error message
 */
export type NubeComponentFormRootEventHandler = NubeComponentEventHandler<
	"change" | "success" | "fail",
	string
>;

/**
 * Shape of the data carried in the JSON-stringified `value` delivered to
 * `formRoot.onChange`. Keyed by the `name` prop of each descendant field.
 * For `formField` instances with `inputType: "file"`, the value is the
 * file name only — the underlying `Blob` is never transferred across the
 * worker boundary.
 *
 * `formRoot.onChange` follows the same wire shape as `field.onChange` /
 * `select.onChange` / `check.onChange` — a `NubeComponentEventHandler`
 * with a string `value`. Consumers JSON-parse the value when they need a
 * structured snapshot:
 *
 *     onChange: (event) => {
 *       const data = JSON.parse(event.value ?? "{}") as NubeFormData;
 *       // …
 *     }
 */
export type NubeFormData = Record<string, string>;

/**
 * Convenience alias for the parameter passed to `formRoot.onChange`.
 * Equivalent to `Parameters<NubeComponentFormRootEventHandler>[0]` narrowed
 * to the `"change"` event. The `value` field is the JSON-stringified
 * {@link NubeFormData} snapshot of the form; parse it when you need
 * structured access:
 *
 *     onChange: (event: NubeFormChangeEvent) => {
 *       const data = JSON.parse(event.value ?? "{}") as NubeFormData;
 *       // …
 *     }
 */
export type NubeFormChangeEvent = {
	type: "change";
	state: NubeSDKState;
	value?: string;
};

/**
 * Represents the properties available for a `formRoot` component.
 *
 * `formRoot` declares a native HTML form whose submission is handled on the
 * main thread (the worker only describes it). On submit the adapter builds a
 * `FormData`, calls `fetch(target, { method, body })`, and dispatches the
 * outcome back to the worker through `onSuccess`/`onFail`.
 */
export type NubeComponentFormRootProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			/** HTTP method used for the submission. Defaults to `POST`. */
			method?: FormHTTPMethod;
			/** Destination URL. */
			target: string;
			/**
			 * Fires after every native `change` event from a descendant
			 * field. Mirrors the standard handler shape used by `field`,
			 * `select` and `check`: `event.value` is a JSON-stringified
			 * snapshot of the form keyed by each field's `name`. Files
			 * contribute only their `name` string (Blobs do not cross the
			 * worker boundary). Parse the value when you need structured
			 * access (see {@link NubeFormData}).
			 *
			 * The `react-adapter` coalesces bursts of change events through
			 * a 100 ms trailing-edge debounce so a single keystroke run
			 * results in a single call.
			 */
			onChange?: NubeComponentFormRootEventHandler;
			/** Callback invoked after a successful submit (value is the HTTP status). */
			onSuccess?: NubeComponentFormRootEventHandler;
			/** Callback invoked when the submit fails (value is the error message). */
			onFail?: NubeComponentFormRootEventHandler;
			style?: NubeComponentStyle;
		}
>;

/**
 * Represents a `formRoot` component, used as the container for declarative
 * forms whose submit is executed on the main thread.
 */
export type NubeComponentFormRoot = Prettify<
	NubeComponentBase & NubeComponentFormRootProps & { type: "formRoot" }
>;

/**
 * Represents the properties available for a `formField` component.
 *
 * A `formField` is the declarative counterpart of an HTML `<input>` bound to
 * the surrounding `formRoot`. Validation uses the native Constraint
 * Validation API; `maxSize` for `inputType: "file"` is handled by the adapter
 * and mapped to `rangeOverflow`.
 *
 * Note: the HTML `type` attribute is exposed as `inputType` to avoid
 * collision with the component discriminator (`type: "formField"`).
 */
export type NubeComponentFormFieldProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			/** HTML `<input>` type. */
			inputType: FormFieldInputType;
			/** Field name as it appears in the submitted `FormData`. */
			name: string;
			/** Floating label rendered next to the input (mirrors `Field.label`). */
			label: string;
			/** Marks the field as required, failing with `valueMissing` when empty. */
			required?: boolean;
			/** Minimum number of characters, failing with `tooShort` when unmet. */
			minLength?: number;
			/** Maximum number of characters, failing with `tooLong` when exceeded. */
			maxLength?: number;
			/** Regular expression source used for `pattern` validation. */
			pattern?: string;
			/** Accepted file types, only for `inputType: "file"`. */
			accept?: string;
			/** Maximum file size in bytes, only for `inputType: "file"`. */
			maxSize?: number;
			/** Current value of the field. */
			value?: string;
			/** Style slots, same shape as `Field.style` for visual parity. */
			style?: {
				container?: NubeComponentStyle;
				label?: NubeComponentStyle;
				input?: NubeComponentStyle;
			};
		}
>;

/**
 * Represents a `formField` component, used for inputs inside a `formRoot`.
 */
export type NubeComponentFormField = Prettify<
	NubeComponentBase & NubeComponentFormFieldProps & { type: "formField" }
>;

/**
 * Represents the properties available for a `formFieldError` component.
 *
 * Must be a direct child of `formField`. The error stays in the DOM at all
 * times and its visibility is controlled via CSS, using the parent
 * `formField`'s `data-validity-state` / `data-validity-error` attributes.
 */
export type NubeComponentFormFieldErrorProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			/** The ValidityState key that activates this message. */
			match: FormFieldValidityStateKey;
			style?: NubeComponentStyle;
		}
>;

/**
 * Represents a `formFieldError` component, used for inline validation
 * messages associated with a single `formField`.
 */
export type NubeComponentFormFieldError = Prettify<
	NubeComponentBase &
		NubeComponentFormFieldErrorProps & { type: "formFieldError" }
>;

/**
 * Represents the properties available for a `formSelect` component.
 *
 * Dropdown counterpart of `formField`. Mirrors the public `select` props but
 * adds Form-driven validation. `valueMissing` is the only failing key
 * produced by default (when `required` and no option selected).
 */
export type NubeComponentFormSelectProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			/** Field name as it appears in the submitted `FormData`. */
			name: string;
			/** Floating label rendered next to the select. */
			label: string;
			/** Selectable options (mirrors `select.options`). */
			options: { label: string; value: string }[];
			/** Default selected value. */
			value?: string;
			required?: boolean;
			disabled?: boolean;
			/** Style slots, same shape as `select.style`. */
			style?: {
				container?: NubeComponentStyle;
				label?: NubeComponentStyle;
				select?: NubeComponentStyle;
			};
		}
>;

/**
 * Represents a `formSelect` component, used for select inputs inside a
 * `formRoot`.
 */
export type NubeComponentFormSelect = Prettify<
	NubeComponentBase & NubeComponentFormSelectProps & { type: "formSelect" }
>;

/**
 * Represents the properties available for a `formRadio` component.
 *
 * Radio-group counterpart of `formField`. Renders a group of radio inputs
 * sharing the same `name` and adds Form-driven validation. `valueMissing`
 * is the only failing key produced by default (when `required` and no
 * option is selected).
 */
export type NubeComponentFormRadioProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			/** Field name as it appears in the submitted `FormData`. */
			name: string;
			/** Group label rendered above the options. */
			label: string;
			/** Selectable options (mirrors `select.options`). */
			options: { label: string; value: string }[];
			/** Default selected value. */
			value?: string;
			required?: boolean;
			disabled?: boolean;
			/** Style slots mirroring the group, label and individual options. */
			style?: {
				container?: NubeComponentStyle;
				label?: NubeComponentStyle;
				option?: NubeComponentStyle;
				radio?: NubeComponentStyle;
			};
		}
>;

/**
 * Represents a `formRadio` component, used for radio-group inputs inside a
 * `formRoot`.
 */
export type NubeComponentFormRadio = Prettify<
	NubeComponentBase & NubeComponentFormRadioProps & { type: "formRadio" }
>;

/**
 * Represents the properties available for a `formCheckbox` component.
 *
 * Single checkbox bound to the surrounding `formRoot`. Mirrors the public
 * `checkbox` props but adds Form-driven validation. `valueMissing` is the
 * only failing key produced by default (when `required` and unchecked).
 */
export type NubeComponentFormCheckboxProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			/** Field name as it appears in the submitted `FormData`. */
			name: string;
			/** Label displayed next to the checkbox. */
			label: string;
			/** Initial checked state. */
			checked?: boolean;
			/** Value submitted when checked (defaults to the browser's `"on"`). */
			value?: string;
			required?: boolean;
			disabled?: boolean;
			/** Style slots, same shape as `checkbox.style`. */
			style?: {
				container?: NubeComponentStyle;
				label?: NubeComponentStyle;
				checkbox?: NubeComponentStyle;
			};
		}
>;

/**
 * Represents a `formCheckbox` component, used for single checkboxes inside a
 * `formRoot`.
 */
export type NubeComponentFormCheckbox = Prettify<
	NubeComponentBase & NubeComponentFormCheckboxProps & { type: "formCheckbox" }
>;

/**
 * Shared shape for the conditional `formRoot` content blocks
 * (`formSuccess`, `formFailure`, `formSending`). Each is a simple
 * container; the rendering gate lives in `formRoot`, which only mounts
 * the matching block in non-`idle` states.
 */
type NubeComponentFormConditionalProps = Prettify<
	NubeComponentBase &
		ChildrenProps & {
			style?: NubeComponentStyle;
		}
>;

/**
 * Represents the properties available for a `formSuccess` component.
 * Mounted by `formRoot` when the submit fetch resolves with `ok: true`.
 */
export type NubeComponentFormSuccessProps = NubeComponentFormConditionalProps;

/**
 * Represents a `formSuccess` component — replaces the form's children
 * with success feedback when the submit succeeds.
 */
export type NubeComponentFormSuccess = Prettify<
	NubeComponentBase & NubeComponentFormSuccessProps & { type: "formSuccess" }
>;

/**
 * Represents the properties available for a `formFailure` component.
 * Mounted by `formRoot` when the submit fetch rejects or the response
 * is not `ok`.
 */
export type NubeComponentFormFailureProps = NubeComponentFormConditionalProps;

/**
 * Represents a `formFailure` component — replaces the form's children
 * with error feedback when the submit fails.
 */
export type NubeComponentFormFailure = Prettify<
	NubeComponentBase & NubeComponentFormFailureProps & { type: "formFailure" }
>;

/**
 * Represents the properties available for a `formSending` component.
 * Mounted by `formRoot` while the submit fetch is in flight (typically
 * used for loaders / skeletons).
 */
export type NubeComponentFormSendingProps = NubeComponentFormConditionalProps;

/**
 * Represents a `formSending` component — replaces the form's children
 * with a "loading" UI while the submit request is pending.
 */
export type NubeComponentFormSending = Prettify<
	NubeComponentBase & NubeComponentFormSendingProps & { type: "formSending" }
>;

/**
 * Represents the properties available for a `formResetter` component.
 *
 * Equivalent to `<button type="reset">`. Children render as the button
 * label. Mirrors the style surface of `formSubmitter` exactly except
 * `onClick`, which is owned by the surrounding `formRoot` (the click maps
 * to the native form reset, which `formRoot` listens to via `onReset` and
 * walks its registered fields to clear React-controlled state).
 */
export type NubeComponentFormResetterProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			disabled: boolean;
			variant: "primary" | "secondary" | "transparent" | "link";
			width: Size;
			height: Size;
			style: NubeComponentStyle;
			ariaLabel: string;
		}>
>;

/**
 * Represents a `formResetter` component, used to clear all descendant form
 * fields back to their initial state.
 */
export type NubeComponentFormResetter = Prettify<
	NubeComponentBase & NubeComponentFormResetterProps & { type: "formResetter" }
>;

/**
 * Represents the properties available for a `formSubmitter` component.
 *
 * Equivalent to `<button type="submit">`. Children render as the button
 * label. Mirrors the style surface of the platform's `button` component —
 * `variant`, `disabled`, `width`, `height`, `style`, `ariaLabel` — except
 * `onClick`, since submission is owned by the surrounding `formRoot`.
 */
export type NubeComponentFormSubmitterProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			disabled: boolean;
			variant: "primary" | "secondary" | "transparent" | "link";
			width: Size;
			height: Size;
			style: NubeComponentStyle;
			ariaLabel: string;
		}>
>;

/**
 * Represents a `formSubmitter` component, used to trigger submission of the
 * surrounding `formRoot`.
 */
export type NubeComponentFormSubmitter = Prettify<
	NubeComponentBase &
		NubeComponentFormSubmitterProps & { type: "formSubmitter" }
>;

/* -------------------------------------------------------------------------- */
/*                          Popover Component                                 */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `popover` root component.
 */
export type NubeComponentPopoverRootProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			defaultOpen: boolean;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `popover` root component, used as the container that controls
 * the visibility of its content when the trigger button is clicked.
 */
export type NubeComponentPopoverRoot = Prettify<
	NubeComponentBase &
		NubeComponentPopoverRootProps & {
			type: "popoverRoot";
		}
>;

/**
 * Represents the properties available for a `popover` button component.
 * Inherits the style and props of the `button` component, except for `onClick`,
 * which is managed internally to toggle the popover content.
 */
export type NubeComponentPopoverButtonProps = Prettify<
	Omit<NubeComponentButtonProps, "onClick"> &
		Partial<{
			/**
			 * When `true`, the popover button does not render its own `button`
			 * element. Instead, it merges the trigger behavior onto its single
			 * child element, letting you provide a custom trigger.
			 */
			asChild: boolean;
		}>
>;

/**
 * Represents a `popover` button component, used as the trigger that toggles
 * the visibility of the popover content.
 */
export type NubeComponentPopoverButton = Prettify<
	NubeComponentBase &
		NubeComponentPopoverButtonProps & {
			type: "popoverButton";
		}
>;

/**
 * Represents the properties available for a `popover` content component.
 * Inherits the style and props of the `box` component.
 */
export type NubeComponentPopoverContentProps = Prettify<NubeComponentBoxProps>;

/**
 * Represents a `popover` content component, used to display the floating
 * content that becomes visible when the popover button is clicked.
 */
export type NubeComponentPopoverContent = Prettify<
	NubeComponentBase &
		NubeComponentPopoverContentProps & {
			type: "popoverContent";
		}
>;

/* -------------------------------------------------------------------------- */
/*                          Fragment Component                                */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `fragment` component.
 */
export type NubeComponentFragmentProps = Prettify<
	NubeComponentBase & ChildrenProps
>;

/**
 * Represents a `fragment` component, used as a logical grouping element.
 */
export type NubeComponentFragment = Prettify<
	NubeComponentFragmentProps & {
		type: "fragment";
	}
>;

/* -------------------------------------------------------------------------- */
/*                           Icon Component                                   */
/* -------------------------------------------------------------------------- */

export type NubeComponentIconName =
	| "infinite"
	| "peso"
	| "pix"
	| "accordion"
	| "align-center"
	| "align-left"
	| "align-right"
	| "apps-list"
	| "apps"
	| "archive"
	| "arrow-left"
	| "arrow-right"
	| "arrows-horizontal"
	| "arrows-vertical"
	| "backspace"
	| "bag"
	| "barcode"
	| "bold"
	| "box-packed"
	| "box-unpacked"
	| "briefcase"
	| "browser-search"
	| "browser"
	| "calculator"
	| "calendar-days"
	| "calendar"
	| "camera"
	| "cash"
	| "cashier"
	| "chat-dots"
	| "check-circle"
	| "check"
	| "chevron-down"
	| "chevron-left"
	| "chevron-right"
	| "chevron-up"
	| "christ"
	| "clock"
	| "close"
	| "code"
	| "cog"
	| "color-palette"
	| "copy"
	| "credit-card"
	| "desktop"
	| "discount-circle"
	| "diskette"
	| "download"
	| "drag-dots"
	| "drag"
	| "drink"
	| "drop"
	| "drums"
	| "duplicate"
	| "ecosystem"
	| "edit"
	| "ellipsis"
	| "exclamation-circle"
	| "exclamation-triangle"
	| "external-link"
	| "eye-off"
	| "eye"
	| "file-alt"
	| "file"
	| "fingerprint"
	| "fire"
	| "flag"
	| "font"
	| "forbidden"
	| "generative-stars"
	| "gift-box"
	| "gift-card"
	| "glasses"
	| "globe"
	| "google"
	| "guitar"
	| "heart"
	| "history"
	| "home"
	| "id-card"
	| "info-circle"
	| "invoice"
	| "italic"
	| "life-ring"
	| "lightbulb"
	| "link-off"
	| "link"
	| "list"
	| "location"
	| "lock-open"
	| "lock"
	| "log-out"
	| "magic-wand"
	| "mail"
	| "marketing"
	| "mate"
	| "menu"
	| "meta"
	| "mobile"
	| "money"
	| "moon"
	| "notification"
	| "obelisk"
	| "online-store"
	| "ordered-list"
	| "paper-plane"
	| "pencil"
	| "picture"
	| "planet"
	| "play"
	| "plus-circle"
	| "printer"
	| "pyramid"
	| "qr-code"
	| "question-circle"
	| "real"
	| "redo"
	| "remove-format"
	| "repeat"
	| "rocket"
	| "scooter"
	| "search"
	| "share"
	| "shopping-cart"
	| "shot"
	| "size-height"
	| "size-width"
	| "sliders"
	| "star"
	| "stats"
	| "steps"
	| "sticky-note"
	| "stop"
	| "store"
	| "subcategory"
	| "sun"
	| "tag"
	| "telephone"
	| "text-size"
	| "tiendanube"
	| "tiktok"
	| "tools"
	| "transfer-peso"
	| "transfer-real"
	| "trash"
	| "truck"
	| "undo"
	| "university"
	| "upload"
	| "user-circle"
	| "user-group"
	| "user"
	| "vertical-stacks"
	| "volume"
	| "wallet"
	| "whatsapp";

/**
 * Represents the properties available for an `icon` component.
 */
export type NubeComponentIconProps = Prettify<
	NubeComponentBase & {
		name: NubeComponentIconName;
		size?: Size;
		color?: string;
	}
>;

/**
 * Represents an `icon` component, used for displaying icons.
 */
export type NubeComponentIcon = Prettify<
	NubeComponentBase & NubeComponentIconProps & { type: "icon" }
>;

/* -------------------------------------------------------------------------- */
/*                           SVG Components                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for an `svg` component.
 */
export type NubeComponentSvgProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			width: string | number;
			height: string | number;
			viewBox: string;
			version: string;
			fill: string;
			stroke: string;
			strokeWidth: number | string;
			preserveAspectRatio: string;
			style?: NubeComponentStyle;
			xmlns?: string;
		}>
>;

/**
 * Represents an `svg` component, used as the root container for SVG graphics.
 */
export type NubeComponentSvg = Prettify<
	NubeComponentBase &
		NubeComponentSvgProps & {
			type: "svgRoot";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Circle Component                                 */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `circle` component.
 */
export type NubeComponentCircleProps = Prettify<
	NubeComponentBase &
		Partial<{
			cx: number | string;
			cy: number | string;
			r: number | string;
			fill: string;
			stroke: string;
			strokeWidth: number | string;
			strokeDasharray: string;
			strokeDashoffset: number | string;
			strokeLinecap: "butt" | "round" | "square";
			strokeLinejoin: "miter" | "round" | "bevel";
			opacity: number;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `circle` component, used for drawing circles in SVG.
 */
export type NubeComponentCircle = Prettify<
	NubeComponentBase &
		NubeComponentCircleProps & {
			type: "svgCircle";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Path Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `path` component.
 */
export type NubeComponentPathProps = Prettify<
	NubeComponentBase &
		Partial<{
			d: string;
			fill: string;
			stroke: string;
			strokeWidth: number | string;
			strokeDasharray: string;
			strokeDashoffset: number | string;
			strokeLinecap: "butt" | "round" | "square";
			strokeLinejoin: "miter" | "round" | "bevel";
			fillRule: "nonzero" | "evenodd";
			clipRule: "nonzero" | "evenodd";
			opacity: number;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `path` component, used for drawing custom paths in SVG.
 */
export type NubeComponentPath = Prettify<
	NubeComponentBase &
		NubeComponentPathProps & {
			type: "svgPath";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           G Component                                      */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `g` component.
 */
export type NubeComponentGProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			transform: string;
			opacity: number;
			style?: NubeComponentStyle;
			stroke: string;
			strokeWidth: number | string;
			strokeDasharray: string;
			strokeDashoffset: number | string;
			strokeLinecap: "butt" | "round" | "square";
			strokeLinejoin: "miter" | "round" | "bevel";
			fill: string;
		}>
>;

/**
 * Represents a `g` component, used for grouping SVG elements.
 */
export type NubeComponentG = Prettify<
	NubeComponentBase &
		NubeComponentGProps & {
			type: "svgG";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Rect Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `rect` component.
 */
export type NubeComponentRectProps = Prettify<
	NubeComponentBase &
		Partial<{
			x: number | string;
			y: number | string;
			width: number | string;
			height: number | string;
			rx: number | string;
			ry: number | string;
			fill: string;
			stroke: string;
			strokeWidth: number | string;
			strokeDasharray: string;
			clipPath: string;
			strokeDashoffset: number | string;
			strokeLinecap: "butt" | "round" | "square";
			strokeLinejoin: "miter" | "round" | "bevel";
			opacity: number;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `rect` component, used for drawing rectangles in SVG.
 */
export type NubeComponentRect = Prettify<
	NubeComponentBase &
		NubeComponentRectProps & {
			type: "svgRect";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Line Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `line` component.
 */
export type NubeComponentLineProps = Prettify<
	NubeComponentBase &
		Partial<{
			x1: number | string;
			y1: number | string;
			x2: number | string;
			y2: number | string;
			stroke: string;
			strokeWidth: number | string;
			strokeDasharray: string;
			strokeDashoffset: number | string;
			strokeLinecap: "butt" | "round" | "square";
			opacity: number;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `line` component, used for drawing lines in SVG.
 */
export type NubeComponentLine = Prettify<
	NubeComponentBase &
		NubeComponentLineProps & {
			type: "svgLine";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Ellipse Component                                */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for an `ellipse` component.
 */
export type NubeComponentEllipseProps = Prettify<
	NubeComponentBase &
		Partial<{
			cx: number | string;
			cy: number | string;
			rx: number | string;
			ry: number | string;
			fill: string;
			stroke: string;
			strokeWidth: number | string;
			strokeDasharray: string;
			strokeDashoffset: number | string;
			strokeLinecap: "butt" | "round" | "square";
			strokeLinejoin: "miter" | "round" | "bevel";
			opacity: number;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents an `ellipse` component, used for drawing ellipses in SVG.
 */
export type NubeComponentEllipse = Prettify<
	NubeComponentBase &
		NubeComponentEllipseProps & {
			type: "svgEllipse";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Polygon Component                                */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `polygon` component.
 */
export type NubeComponentPolygonProps = Prettify<
	NubeComponentBase &
		Partial<{
			points: string;
			fill: string;
			stroke: string;
			strokeWidth: number | string;
			strokeDasharray: string;
			strokeDashoffset: number | string;
			strokeLinecap: "butt" | "round" | "square";
			strokeLinejoin: "miter" | "round" | "bevel";
			fillRule: "nonzero" | "evenodd";
			opacity: number;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `polygon` component, used for drawing polygons in SVG.
 */
export type NubeComponentPolygon = Prettify<
	NubeComponentBase &
		NubeComponentPolygonProps & {
			type: "svgPolygon";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Polyline Component                               */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `polyline` component.
 */
export type NubeComponentPolylineProps = Prettify<
	NubeComponentBase &
		Partial<{
			points: string;
			fill: string;
			stroke: string;
			strokeWidth: number | string;
			strokeDasharray: string;
			strokeDashoffset: number | string;
			strokeLinecap: "butt" | "round" | "square";
			strokeLinejoin: "miter" | "round" | "bevel";
			opacity: number;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `polyline` component, used for drawing polylines in SVG.
 */
export type NubeComponentPolyline = Prettify<
	NubeComponentBase &
		NubeComponentPolylineProps & {
			type: "svgPolyline";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Text Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `text` component in SVG.
 */
export type NubeComponentSvgTextProps = Prettify<
	NubeComponentBase &
		Partial<{
			x: number | string;
			y: number | string;
			dx: number | string;
			dy: number | string;
			textAnchor: "start" | "middle" | "end";
			fontSize: number | string;
			fontFamily: string;
			fontWeight: string | number;
			fontStyle: "normal" | "italic" | "oblique";
			textDecoration: string;
			fill: string;
			stroke: string;
			strokeWidth: number | string;
			opacity: number;
			style?: NubeComponentStyle;
			children?: string;
			strokeDasharray: string;
			strokeDashoffset: number | string;
			strokeLinecap: "butt" | "round" | "square";
			strokeLinejoin: "miter" | "round" | "bevel";
		}>
>;

/**
 * Represents a `text` component in SVG, used for displaying text.
 */
export type NubeComponentSvgText = Prettify<
	NubeComponentBase &
		NubeComponentSvgTextProps & {
			type: "svgText";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           TSpan Component                                  */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `tspan` component.
 */
export type NubeComponentTSpanProps = Prettify<
	NubeComponentBase &
		Partial<{
			x: number | string;
			y: number | string;
			dx: number | string;
			dy: number | string;
			fontSize: number | string;
			fontFamily: string;
			fontWeight: string | number;
			fontStyle: "normal" | "italic" | "oblique";
			fill: string;
			stroke: string;
			strokeWidth: number | string;
			opacity: number;
			style?: NubeComponentStyle;
			children?: string;
		}>
>;

/**
 * Represents a `tspan` component, used for text spans within SVG text.
 */
export type NubeComponentTSpan = Prettify<
	NubeComponentBase &
		NubeComponentTSpanProps & {
			type: "svgTspan";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Defs Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `defs` component.
 */
export type NubeComponentDefsProps = Prettify<
	NubeComponentBase & ChildrenProps
>;

/**
 * Represents a `defs` component, used for defining reusable elements in SVG.
 */
export type NubeComponentDefs = Prettify<
	NubeComponentBase &
		NubeComponentDefsProps & {
			type: "svgDefs";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Stop Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `stop` component.
 */
export type NubeComponentStopProps = Prettify<
	NubeComponentBase &
		Partial<{
			offset: number | string;
			stopColor: string;
			stopOpacity: number | string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `stop` component, used in gradients.
 */
export type NubeComponentStop = Prettify<
	NubeComponentBase &
		NubeComponentStopProps & {
			type: "svgStop";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           LinearGradient Component                         */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `linearGradient` component.
 */
export type NubeComponentLinearGradientProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			id: string;
			x1: number | string;
			y1: number | string;
			x2: number | string;
			y2: number | string;
			gradientUnits: "userSpaceOnUse" | "objectBoundingBox";
			gradientTransform: string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `linearGradient` component, used for linear gradients.
 */
export type NubeComponentLinearGradient = Prettify<
	NubeComponentBase &
		NubeComponentLinearGradientProps & {
			type: "svgLinearGradient";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           RadialGradient Component                         */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `radialGradient` component.
 */
export type NubeComponentRadialGradientProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			id: string;
			cx: number | string;
			cy: number | string;
			r: number | string;
			fx: number | string;
			fy: number | string;
			rx: number | string;
			ry: number | string;
			gradientUnits: "userSpaceOnUse" | "objectBoundingBox";
			gradientTransform: string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `radialGradient` component, used for radial gradients.
 */
export type NubeComponentRadialGradient = Prettify<
	NubeComponentBase &
		NubeComponentRadialGradientProps & {
			type: "svgRadialGradient";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Mask Component                                   */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `mask` component.
 */
export type NubeComponentMaskProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			id: string;
			x: number | string;
			y: number | string;
			width: number | string;
			height: number | string;
			maskUnits: "userSpaceOnUse" | "objectBoundingBox";
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `mask` component, used for masking SVG elements.
 */
export type NubeComponentMask = Prettify<
	NubeComponentBase &
		NubeComponentMaskProps & {
			type: "svgMask";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           ClipPath Component                               */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `clipPath` component.
 */
export type NubeComponentClipPathProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			id: string;
			clipPathUnits: "userSpaceOnUse" | "objectBoundingBox";
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `clipPath` component, used for clipping SVG elements.
 */
export type NubeComponentClipPath = Prettify<
	NubeComponentBase &
		NubeComponentClipPathProps & {
			type: "svgClipPath";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Use Component                                    */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `use` component.
 */
export type NubeComponentUseProps = Prettify<
	NubeComponentBase &
		Partial<{
			href: string;
			x: number | string;
			y: number | string;
			width: number | string;
			height: number | string;
			transform: string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `use` component, used for reusing SVG elements.
 */
export type NubeComponentUse = Prettify<
	NubeComponentBase &
		NubeComponentUseProps & {
			type: "svgUse";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Symbol Component                                 */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `symbol` component.
 */
export type NubeComponentSymbolProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			id: string;
			viewBox: string;
			preserveAspectRatio: string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `symbol` component, used for defining reusable symbols.
 */
export type NubeComponentSymbol = Prettify<
	NubeComponentBase &
		NubeComponentSymbolProps & {
			type: "svgSymbol";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Pattern Component                                */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `pattern` component.
 */
export type NubeComponentPatternProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			id: string;
			x: number | string;
			y: number | string;
			width: number | string;
			height: number | string;
			patternUnits: "userSpaceOnUse" | "objectBoundingBox";
			patternTransform: string;
			viewBox: string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `pattern` component, used for creating patterns.
 */
export type NubeComponentPattern = Prettify<
	NubeComponentBase &
		NubeComponentPatternProps & {
			type: "svgPattern";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Filter Component                                 */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `filter` component.
 */
export type NubeComponentFilterProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			id: string;
			x: number | string;
			y: number | string;
			width: number | string;
			height: number | string;
			filterUnits: "userSpaceOnUse" | "objectBoundingBox";
			primitiveUnits: "userSpaceOnUse" | "objectBoundingBox";
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `filter` component, used for applying filters to SVG elements.
 */
export type NubeComponentFilter = Prettify<
	NubeComponentBase &
		NubeComponentFilterProps & {
			type: "svgFilter";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           FeGaussianBlur Component                         */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `feGaussianBlur` component.
 */
export type NubeComponentFeGaussianBlurProps = Prettify<
	NubeComponentBase &
		Partial<{
			stdDeviation: number | string;
			edgeMode: "duplicate" | "wrap" | "none";
			in: string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `feGaussianBlur` component, used for blur effects.
 */
export type NubeComponentFeGaussianBlur = Prettify<
	NubeComponentBase &
		NubeComponentFeGaussianBlurProps & {
			type: "svgFeGaussianBlur";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           FeOffset Component                               */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `feOffset` component.
 */
export type NubeComponentFeOffsetProps = Prettify<
	NubeComponentBase &
		Partial<{
			dx: number | string;
			dy: number | string;
			in: string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `feOffset` component, used for offset effects.
 */
export type NubeComponentFeOffset = Prettify<
	NubeComponentBase &
		NubeComponentFeOffsetProps & {
			type: "svgFeOffset";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           FeMerge Component                                */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `feMerge` component.
 */
export type NubeComponentFeMergeProps = Prettify<
	NubeComponentBase & ChildrenProps
>;

/**
 * Represents a `feMerge` component, used for merging filter effects.
 */
export type NubeComponentFeMerge = Prettify<
	NubeComponentBase &
		NubeComponentFeMergeProps & {
			type: "svgFeMerge";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           FeMergeNode Component                            */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `feMergeNode` component.
 */
export type NubeComponentFeMergeNodeProps = Prettify<
	NubeComponentBase &
		Partial<{
			in: string;
			style?: NubeComponentStyle;
		}>
>;

/**
 * Represents a `feMergeNode` component, used within feMerge.
 */
export type NubeComponentFeMergeNode = Prettify<
	NubeComponentBase &
		NubeComponentFeMergeNodeProps & {
			type: "svgFeMergeNode";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           SideScroll Component                             */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `sidescroll` component.
 */
export type NubeComponentSideScrollProps = Prettify<
	NubeComponentBase &
		ChildrenProps &
		Partial<{
			gap?: Size;
			hideScrollbar?: boolean;
			step?: number;
			style?: NubeComponentStyle;
			width?: Size;
		}>
>;

/**
 * Represents a `sidescroll` component, used for horizontal scrolling containers.
 */
export type NubeComponentSideScroll = Prettify<
	NubeComponentBase &
		NubeComponentSideScrollProps & {
			type: "sidescroll";
		}
>;

/* -------------------------------------------------------------------------- */
/*                           Markdown Component                                */
/* -------------------------------------------------------------------------- */

/**
 * Represents the properties available for a `markdown` component.
 */
export type NubeComponentMarkdownProps = Prettify<
	NubeComponentBase & {
		content: string;
	}
>;

/**
 * Represents a `markdown` component, used for rendering markdown content.
 */
export type NubeComponentMarkdown = Prettify<
	NubeComponentBase &
		NubeComponentMarkdownProps & {
			type: "markdown";
		}
>;

/* -------------------------------------------------------------------------- */
/*                         Basic Definitions                                  */
/* -------------------------------------------------------------------------- */

/**
 * Represents a unique identifier for a UI component.
 */
export type NubeComponentId = string;

/**
 * Defines basic properties for all UI components.
 */
export type NubeComponentProps = {
	id?: NubeComponentId;
	key?: string | number;
	// DON'T USE THIS, USED INTERNALLY BY THE SDK, ANY VALUE PASSED HERE WILL BE OVERWRITTEN
	__internalId?: NubeComponentId;
};

/**
 * Defines the base structure for all UI components.
 */
export type NubeComponentBase = {
	styled?: string;
} & NubeComponentProps;

/**
 * Defines components that can have child elements.
 */
export type ChildrenProps = {
	children?: NubeComponentChildren;
};

/**
 * Represents any valid Nube component type.
 */
export type NubeComponent =
	| string
	| NubeComponentBox
	| NubeComponentColumn
	| NubeComponentRow
	| NubeComponentField
	| NubeComponentNumberField
	| NubeComponentFragment
	| NubeComponentImage
	| NubeComponentProgress
	| NubeComponentIframe
	| NubeComponentVideoRoot
	| NubeComponentVideoPlayer
	| NubeComponentVideoYouTube
	| NubeComponentVideoStories
	| NubeComponentText
	| NubeComponentCheckbox
	| NubeComponentTextarea
	| NubeComponentButton
	| NubeComponentLink
	| NubeComponentSelect
	| NubeComponentAccordionRoot
	| NubeComponentAccordionItem
	| NubeComponentAccordionContent
	| NubeComponentAccordionHeader
	| NubeComponentToastRoot
	| NubeComponentToastTitle
	| NubeComponentToastDescription
	| NubeComponentPopoverRoot
	| NubeComponentPopoverButton
	| NubeComponentPopoverContent
	| NubeComponentIcon
	| NubeComponentSideScroll
	| NubeComponentMarkdown
	| NubeComponentSvg
	| NubeComponentCircle
	| NubeComponentPath
	| NubeComponentG
	| NubeComponentRect
	| NubeComponentLine
	| NubeComponentEllipse
	| NubeComponentPolygon
	| NubeComponentPolyline
	| NubeComponentSvgText
	| NubeComponentTSpan
	| NubeComponentDefs
	| NubeComponentStop
	| NubeComponentLinearGradient
	| NubeComponentRadialGradient
	| NubeComponentMask
	| NubeComponentClipPath
	| NubeComponentUse
	| NubeComponentSymbol
	| NubeComponentPattern
	| NubeComponentFilter
	| NubeComponentFeGaussianBlur
	| NubeComponentFeOffset
	| NubeComponentFeMerge
	| NubeComponentFeMergeNode
	| NubeComponentFormRoot
	| NubeComponentFormField
	| NubeComponentFormFieldError
	| NubeComponentFormSelect
	| NubeComponentFormCheckbox
	| NubeComponentFormRadio
	| NubeComponentFormResetter
	| NubeComponentFormSubmitter
	| NubeComponentFormSuccess
	| NubeComponentFormFailure
	| NubeComponentFormSending;

/**
 * Represents the children of a UI component.
 */
export type NubeComponentChildren =
	| string
	| NubeComponent
	| (string | NubeComponent)[];

/**
 * Represents components that can contain other components as children.
 */
export type NubeComponentWithChildren =
	| NubeComponentBox
	| NubeComponentColumn
	| NubeComponentRow
	| NubeComponentLink
	| NubeComponentSideScroll
	| NubeComponentPopoverRoot
	| NubeComponentPopoverContent
	| NubeComponentSvg
	| NubeComponentG
	| NubeComponentDefs
	| NubeComponentLinearGradient
	| NubeComponentRadialGradient
	| NubeComponentMask
	| NubeComponentClipPath
	| NubeComponentSymbol
	| NubeComponentPattern
	| NubeComponentFilter
	| NubeComponentFeMerge
	| NubeComponentFormRoot
	| NubeComponentFormField
	| NubeComponentFormFieldError
	| NubeComponentFormSelect
	| NubeComponentFormCheckbox
	| NubeComponentFormRadio
	| NubeComponentFormResetter
	| NubeComponentFormSubmitter
	| NubeComponentFormSuccess
	| NubeComponentFormFailure
	| NubeComponentFormSending;

/**
 * Represents the value of a UI component, typically used for form inputs.
 */
export type UIValue = string;

/**
 * Represents a mapping of UI slots to their respective components.
 */
export type UISlots = Partial<
	Record<
		UISlot,
		NubeComponent | NubeComponent[] | Record<string, NubeComponent>
	>
>;

/**
 * Represents a mapping of UI component IDs to their respective values.
 */
export type UIValues = Record<NubeComponentId, UIValue>;

/**
 * Represents the UI state, including dynamically injected components and their values.
 */
export type UI = {
	/**
	 * Contains dynamically injected components into specific UI slots.
	 */
	slots: UISlots;

	/**
	 * Stores values associated with specific UI components, typically form inputs.
	 */
	values: UIValues;
};

/**
 * Type for components that have been styled with the styled function.
 * Extends NubeComponent with the styled property containing CSS.
 */
export type NubeComponentWithStyle = NubeComponent & { styled: string };