oceanic-component-helper/dist/index.d.ts

Use Discord Components with style. This is designed for Oceanic.js but has no runtime dependencies! If support for raw components is added in future, it certainly should support Discord.js and Dysnomia too.

import type { ActionRowBase, ChannelSelectMenu, ChannelTypes, Component, ContainerComponent, FileComponent, MediaGalleryComponent, MediaGalleryItem, MentionableSelectMenu, PremiumButton, RoleSelectMenu, SectionComponent, SelectOption, SeparatorComponent, SeparatorSpacingSize, StringSelectMenu, TextButton, TextDisplayComponent, TextInput, ThumbnailComponent, URLButton, UserSelectMenu } from "oceanic.js";
export type ActionRowProps = Omit<ActionRowBase<never>, "components" | "type">;
/**
 * Create an  {@link ComponentTypes.ACTION_ROW | ACTION_ROW} component.
 * @param items a list of message or modal components
 * @param props optional properties (id)
 * @returns an {@link ActionRowBase} object with item type inferred.
 */
export declare function ActionRow<T extends Component>(items?: T[], props?: ActionRowProps): ActionRowBase<T>;
export type TextButtonProps = Omit<TextButton, "label" | "customID" | "style" | "type"> & {
    style?: TextButton["style"];
};
/**
 * Create a {@link ComponentTypes.BUTTON | BUTTON} component with a custom ID.
 * Clicks can be handled with {@link ClientEvents.interactionCreate}.
 * @param label text to display on the button
 * @param customID custom ID to handle interactions
 * @param props optional properties (disabled, emoji, id, style)
 * @returns a {@link TextButton} object
 */
export declare function TextButton(label: string, customID: string, props?: TextButtonProps): TextButton;
export type URLButtonProps = Omit<URLButton, "label" | "url" | "style" | "type">;
/**
 * Create a {@link ComponentTypes.BUTTON | BUTTON} component with the {@link ButtonStyles.LINK | LINK} style.
 * @param label text to display on the button
 * @param url URL to open on click
 * @param props optional properties (disabled, emoji, id)
 * @returns a {@link URLButton} object
 */
export declare function URLButton(label: string, url: string, props?: URLButtonProps): URLButton;
export type PremiumButtonProps = Omit<PremiumButton, "skuID" | "style" | "type">;
/**
 * Create a {@link ComponentTypes.BUTTON | BUTTON} component with the {@link ButtonStyles.PREMIUM | PREMIUM} style.
 * @param skuID identifier for a purchasable [SKU](https://discord.com/developers/docs/resources/sku)
 * @param props optional properties (disabled, id)
 * @returns a {@link PremiumButton} object
 */
export declare function PremiumButton(skuID: string, props?: PremiumButtonProps): PremiumButton;
export type StringSelectProps = Omit<StringSelectMenu, "customID" | "options" | "type">;
/**
 * Create a {@link ComponentTypes.STRING_SELECT | STRING_SELECT} component.
 * Selection can be handled with {@link ClientEvents.interactionCreate}.
 * @param customID custom ID to handle interactions
 * @param options list of options
 * @param props optional properties (disabled, id, maxValues, minValues, placeholder)
 * @returns a {@link StringSelectMenu} object
 */
export declare function StringSelect(customID: string, options?: SelectOption[], props?: StringSelectProps): StringSelectMenu;
export type SelectOptionProps = Omit<SelectOption, "label" | "value">;
export declare function SelectOption(label: string, value: string, props?: SelectOptionProps): SelectOption;
export type TextInputProps = Omit<TextInput, "label" | "customID" | "style" | "type">;
/**
 * Create a {@link ComponentTypes.TEXT_INPUT | TEXT_INPUT} component with the {@link TextInputStyles.SHORT | SHORT} style.
 * Submission can be handled with {@link ClientEvents.interactionCreate}.
 * @param customID custom ID to handle interactions
 * @param options list of options
 * @param props optional properties (id, maxLength, minLength, placeholder, required, value)
 * @returns a {@link TextInput} object
 */
export declare function LineInput(label: string, customID: string, props?: TextInputProps): TextInput;
/**
 * Create a {@link ComponentTypes.TEXT_INPUT | TEXT_INPUT} component with the {@link TextInputStyles.PARAGRAPH | PARAGRAPH} style.
 * Submission can be handled with {@link ClientEvents.interactionCreate}.
 * @param customID custom ID to handle interactions
 * @param options list of options
 * @param props optional properties (id, maxLength, minLength, placeholder, required, value)
 * @returns a {@link TextInput} object
 */
export declare function ParagraphInput(label: string, customID: string, props?: TextInputProps): TextInput;
export type UserSelectProps = Omit<UserSelectMenu, "customID" | "type">;
/**
 * Create a {@link ComponentTypes.USER_SELECT | USER_SELECT} component.
 * Selection can be handled with {@link ClientEvents.interactionCreate}.
 * @param customID custom ID to handle interactions
 * @param props optional properties (defaultValues, disabled, id, maxValues, minValues, placeholder)
 * @returns a {@link UserSelectMenu} object
 */
export declare function UserSelect(customID: string, props?: UserSelectProps): UserSelectMenu;
export type RoleSelectProps = Omit<RoleSelectMenu, "customID" | "type">;
/**
 * Create a {@link ComponentTypes.ROLE_SELECT | ROLE_SELECT} component.
 * Selection can be handled with {@link ClientEvents.interactionCreate}.
 * @param customID custom ID to handle interactions
 * @param props optional properties (defaultValues, disabled, id, maxValues, minValues, placeholder)
 * @returns a {@link RoleSelectMenu} object
 */
export declare function RoleSelect(customID: string, props?: RoleSelectProps): RoleSelectMenu;
export type MentionableSelectProps = Omit<MentionableSelectMenu, "customID" | "type">;
/**
 * Create a {@link ComponentTypes.MENTIONABLE_SELECT | MENTIONABLE_SELECT} component.
 * Selection can be handled with {@link ClientEvents.interactionCreate}.
 * @param customID custom ID to handle interactions
 * @param props optional properties (defaultValues, disabled, id, maxValues, minValues, placeholder)
 * @returns a {@link RoleSelectMenu} object
 */
export declare function MentionableSelect(customID: string, props?: MentionableSelectProps): MentionableSelectMenu;
export type ChannelSelectProps = Omit<ChannelSelectMenu, "customID" | "channelTypes" | "type">;
/**
 * Create a {@link ComponentTypes.CHANNEL_SELECT | CHANNEL_SELECT} component.
 * Selection can be handled with {@link ClientEvents.interactionCreate}.
 * @param customID custom ID to handle interactions
 * @param props optional properties (defaultValues, disabled, id, maxValues, minValues, placeholder)
 * @returns a {@link RoleSelectMenu} object
 */
export declare function ChannelSelect(customID: string, channelTypes: ChannelTypes[], props?: ChannelSelectProps): ChannelSelectMenu;
export type SectionProps = Omit<SectionComponent, "components" | "accessory" | "type">;
/**
 * Create a {@link ComponentTypes.SECTION | SECTION} component.
 * @param rows 1 to 3 rows of text
 * @param accessory thumnail or button appearing on the right
 * @param props optional properties (id)
 * @returns a {@link SectionComponent}
 */
export declare function Section(rows: string[], accessory: SectionComponent["accessory"], props?: SectionProps): SectionComponent;
export type TextProps = Omit<TextDisplayComponent, "content" | "type">;
/**
 * Create a {@link ComponentTypes.TEXT_DISPLAY | TEXT_DISPLAY} component.
 * @param content markdown text
 * @param optional properties (id)
 * @returns a {@link TextDisplayComponent}
 */
export declare function Text(content: string, props?: TextProps): TextDisplayComponent;
export type ThumbnailProps = Omit<ThumbnailComponent, "media" | "type">;
/**
 * Create a {@link ComponentTypes.THUMBNAIL | THUMBNAIL} component.
 * @param url media URL
 * @param props optional properties (description, id, spoiler)
 * @returns a {@link ThumbnailComponent}
 */
export declare function Thumbnail(url: string, props?: ThumbnailProps): ThumbnailComponent;
export type GalleryProps = Omit<MediaGalleryComponent, "items" | "type">;
/**
 * Create a {@link ComponentTypes.MEDIA_GALLERY | MEDIA_GALLERY} component.
 * @param url media URL
 * @param props optional properties (id)
 * @returns a {@link MediaGalleryComponent}
 */
export declare function Gallery(items?: MediaGalleryItem[], props?: GalleryProps): MediaGalleryComponent;
export type GalleryItemProps = Omit<MediaGalleryItem, "media">;
/**
 * Create a media gallery item.
 * @param url media URL
 * @param props optional properties (description, spoiler)
 * @returns a {@link MediaGalleryItem}
 */
export declare function GalleryItem(url: string, props?: GalleryItemProps): MediaGalleryItem;
export type FileProps = Omit<FileComponent, "file" | "type">;
/**
 * Create a {@link ComponentTypes.FILE | FILE} component.
 * @param file the filename used in {@link CreateMessageOptions.files} - without the attachment:// prefix
 * @param props optional properties (id, spoiler)
 * @returns a {@link FileComponent}
 */
export declare function File(file: string, props?: FileProps): FileComponent;
export type SeparatorProps = Omit<SeparatorComponent, "divider" | "spacing" | "type">;
/**
 * Create a non-divider {@link ComponentTypes.SEPARATOR | SEPARATOR} component.
 * @param spacing spacing size
 * @param props optional properties (id)
 * @returns a {@link SeparatorComponent}
 */
export declare function Spacer(spacing?: SeparatorSpacingSize, props?: SeparatorProps): SeparatorComponent;
/**
 * Create a divider {@link ComponentTypes.SEPARATOR | SEPARATOR} component.
 * @param spacing spacing size
 * @param props optional properties (id)
 * @returns a {@link SeparatorComponent}
 */
export declare function Divider(spacing?: SeparatorSpacingSize, props?: SeparatorProps): SeparatorComponent;
export type ContainerProps = Omit<ContainerComponent, "type" | "components">;
/**
 * Create a {@link ComponentTypes.CONTAINER | CONTAINER} component.
 * @param items child components to appear in the container
 * @param props optional properties (accentColor, id, spoiler)
 * @returns a {@link ContainerComponent}
 */
export declare function Container(items?: ContainerComponent["components"], props?: ContainerProps): ContainerComponent;