feat: label and poll jsx components

apps/test-bot/package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@types/ms": "^2.1.0",
+    "cross-env": "^10.1.0",
     "tsx": "^4.7.0"
   }
 }

apps/test-bot/src/app/commands/(general)/poll.tsx

@@ -0,0 +1,27 @@
+import {
+  Poll,
+  PollQuestion,
+  PollAnswer,
+  CommandData,
+  ChatInputCommand,
+} from 'commandkit';
+import { PollData } from 'discord.js';
+
+export const command: CommandData = {
+  name: 'poll',
+  description: 'Create a poll',
+};
+
+export const chatInput: ChatInputCommand = async (ctx) => {
+  const poll: PollData = (
+    <Poll>
+      <PollQuestion>What's your favorite color?</PollQuestion>
+      <PollAnswer emoji="🟥">Red</PollAnswer>
+      <PollAnswer emoji="🟦">Blue</PollAnswer>
+      <PollAnswer emoji="🟩">Green</PollAnswer>
+      <PollAnswer>Other</PollAnswer>
+    </Poll>
+  );
+
+  await ctx.interaction.reply({ poll });
+};

apps/test-bot/src/app/commands/(interactions)/+middleware.ts

@@ -4,8 +4,6 @@ import { MessageFlags } from 'discord.js';
 export function beforeExecute(ctx: MiddlewareContext) {
   Logger.info('Pre-command middleware');
 
-  console.log({ isAI: ctx.ai });
-
   const user = ctx.isInteraction() ? ctx.interaction.user : ctx.message.author;
 
   if (ctx.commandName === 'prompt' && user.id === '159985870458322944') {

apps/test-bot/src/app/commands/(interactions)/prompt.tsx

@@ -3,11 +3,14 @@ import {
   Modal,
   ShortInput,
   ParagraphInput,
+  Label,
   OnModalKitSubmit,
   MessageCommandContext,
   ChatInputCommandContext,
+  StringSelectMenu,
+  StringSelectMenuOption,
 } from 'commandkit';
-import { MessageFlags } from 'discord.js';
+import { ComponentType, MessageFlags } from 'discord.js';
 
 export const command: CommandData = {
   name: 'prompt',
@@ -17,9 +20,10 @@ export const command: CommandData = {
 const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
   const name = interaction.fields.getTextInputValue('name');
   const description = interaction.fields.getTextInputValue('description');
+  const select = interaction.fields.getField('select');
 
   await interaction.reply({
-    content: `Name: ${name}\nDescription: ${description}`,
+    content: `Name: ${name}\nDescription: ${description}\nSelect: ${select}`,
     flags: MessageFlags.Ephemeral,
   });
 
@@ -28,13 +32,38 @@ const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
 
 export async function chatInput(ctx: ChatInputCommandContext) {
   const modal = (
-    <Modal title={'Modal'} onSubmit={handleSubmit}>
-      <ShortInput customId="name" label="Name" placeholder="John" required />
-      <ParagraphInput
-        customId="description"
-        label={'Description'}
-        placeholder={'Enter a description here...'}
-      />
+    <Modal title="Modal" onSubmit={handleSubmit}>
+      <Label label="Name" description="Enter your name">
+        <ShortInput customId="name" placeholder="John Doe" required />
+      </Label>
+      <Label label="Description" description="Enter a description here...">
+        <ParagraphInput
+          customId="description"
+          placeholder="Lorem ipsum dolor sit amet..."
+        />
+      </Label>
+      <Label label="Select" description="Select an option">
+        <StringSelectMenu customId="select">
+          <StringSelectMenuOption
+            label="Option 1"
+            value="option1"
+            description="This is the first option"
+            emoji="👍"
+          />
+          <StringSelectMenuOption
+            label="Option 2"
+            value="option2"
+            description="This is the second option"
+            emoji="👍"
+          />
+          <StringSelectMenuOption
+            label="Option 3"
+            value="option3"
+            description="This is the third option"
+            emoji="👍"
+          />
+        </StringSelectMenu>
+      </Label>
     </Modal>
   );
 

apps/website/docs/api-reference/commandkit/classes/button-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ButtonKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/button/ButtonKit.ts" sourceLine="64" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/button/ButtonKit.ts" sourceLine="64" packageName="commandkit" />
 
 A builder for creating buttons with additional features like interaction collectors and event handling.
 

apps/website/docs/api-reference/commandkit/classes/channel-select-menu-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ChannelSelectMenuKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/ChannelSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/ChannelSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
 
 A builder for creating channel select menus with additional features like interaction collectors and event handling.
 This class extends the ChannelSelectMenuBuilder from discord.js and adds methods for handling interactions.

apps/website/docs/api-reference/commandkit/classes/mentionable-select-menu-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## MentionableSelectMenuKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/MentionableSelectMenuKit.ts" sourceLine="35" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/MentionableSelectMenuKit.ts" sourceLine="35" packageName="commandkit" />
 
 
 

apps/website/docs/api-reference/commandkit/classes/modal-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ModalKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/modal/ModalKit.ts" sourceLine="65" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/ModalKit.ts" sourceLine="65" packageName="commandkit" />
 
 A builder for creating modals with additional features like interaction collectors and event handling.
 This class extends the ModalBuilder from discord.js and adds methods for handling interactions.

apps/website/docs/api-reference/commandkit/classes/role-select-menu-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## RoleSelectMenuKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/RoleSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/RoleSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
 
 A builder for creating role select menus with additional features like interaction collectors and event handling.
 This class extends the RoleSelectMenuBuilder from discord.js and adds methods for handling interactions.

apps/website/docs/api-reference/commandkit/classes/string-select-menu-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## StringSelectMenuKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/StringSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/StringSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
 
 A builder for creating string select menus with additional features like interaction collectors and event handling.
 This class extends the StringSelectMenuBuilder from discord.js and adds methods for handling interactions.

apps/website/docs/api-reference/commandkit/classes/user-select-menu-kit.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## UserSelectMenuKit
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/UserSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/UserSelectMenuKit.ts" sourceLine="40" packageName="commandkit" />
 
 A builder for creating user select menus with additional features like interaction collectors and event handling.
 This class extends the UserSelectMenuBuilder from discord.js and adds methods for handling interactions.

apps/website/docs/api-reference/commandkit/functions/action-row.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ActionRow
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/action-row/ActionRow.ts" sourceLine="17" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/action-row/ActionRow.ts" sourceLine="17" packageName="commandkit" />
 
 The action row component.
 

apps/website/docs/api-reference/commandkit/functions/button.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## Button
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/button/Button.ts" sourceLine="41" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/button/Button.ts" sourceLine="41" packageName="commandkit" />
 
 The button component.
 

apps/website/docs/api-reference/commandkit/functions/channel-select-menu.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ChannelSelectMenu
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/SelectMenu.ts" sourceLine="298" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/SelectMenu.ts" sourceLine="298" packageName="commandkit" />
 
 The ChannelSelectMenu component.
 

apps/website/docs/api-reference/commandkit/functions/container.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## Container
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v2/container.ts" sourceLine="35" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/display/container.ts" sourceLine="35" packageName="commandkit" />
 
 The components v2 container component
 

apps/website/docs/api-reference/commandkit/functions/create-element.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## createElement
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/common/element.ts" sourceLine="97" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/common/element.ts" sourceLine="96" packageName="commandkit" />
 
 The createElement function is used to create CommandKit elements.
 

apps/website/docs/api-reference/commandkit/functions/emit-warning.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## emitWarning
 
-<GenerationInfo sourceFile="packages/commandkit/src/utils/warn-unstable.ts" sourceLine="8" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/utils/warning.ts" sourceLine="9" packageName="commandkit" />
 
 Emit a warning message to the console as a CommandKitWarning.
 

apps/website/docs/api-reference/commandkit/functions/file.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## File
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v2/file.ts" sourceLine="20" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/display/file.ts" sourceLine="20" packageName="commandkit" />
 
 The file component
 

apps/website/docs/api-reference/commandkit/functions/fragment.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## Fragment
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/common/element.ts" sourceLine="82" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/common/element.ts" sourceLine="81" packageName="commandkit" />
 
 Represents a fragment of CommandKit elements.
 

apps/website/docs/api-reference/commandkit/functions/get-element.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## getElement
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/common/element.ts" sourceLine="63" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/common/element.ts" sourceLine="62" packageName="commandkit" />
 
 Gets the element data for a specific CommandKit element.
 

apps/website/docs/api-reference/commandkit/functions/is-command-kit-element.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## isCommandKitElement
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/common/element.ts" sourceLine="48" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/common/element.ts" sourceLine="47" packageName="commandkit" />
 
 Checks if the given element is a CommandKit element.
 

apps/website/docs/api-reference/commandkit/functions/label.mdx

@@ -0,0 +1,40 @@
+---
+title: "Label"
+isDefaultIndex: false
+generated: true
+---
+
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+<!-- This file was generated from the CommandKit source. Do not modify. Instead, re-run the "docgen" script -->
+
+
+## Label
+
+<GenerationInfo sourceFile="packages/commandkit/src/components/display/label.ts" sourceLine="31" packageName="commandkit" />
+
+The label component wraps modal components with text as a label and optional description.
+
+
+
+*Example*
+
+```tsx
+import { Label } from 'commandkit';
+
+const label = <Label label="Name" description="Enter your name">
+<ShortInput customId="name" label="Name" placeholder="John" required />
+</Label>;
+```
+
+```ts title="Signature"
+function Label(props: LabelProps): void
+```
+Parameters
+
+### props
+
+<MemberInfo kind="parameter" type={`<a href='/docs/api-reference/commandkit/interfaces/label-props#labelprops'>LabelProps</a>`} />
+

apps/website/docs/api-reference/commandkit/functions/media-gallery-item.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## MediaGalleryItem
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v2/media-gallery.ts" sourceLine="59" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/display/media-gallery.ts" sourceLine="59" packageName="commandkit" />
 
 The media gallery item component
 

apps/website/docs/api-reference/commandkit/functions/media-gallery.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## MediaGallery
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v2/media-gallery.ts" sourceLine="27" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/display/media-gallery.ts" sourceLine="27" packageName="commandkit" />
 
 The media gallery component
 

apps/website/docs/api-reference/commandkit/functions/mentionable-select-menu.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## MentionableSelectMenu
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/select-menu/SelectMenu.ts" sourceLine="266" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/select-menu/SelectMenu.ts" sourceLine="266" packageName="commandkit" />
 
 The MentionableSelectMenu component.
 

apps/website/docs/api-reference/commandkit/functions/modal.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## Modal
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/modal/Modal.ts" sourceLine="31" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="32" packageName="commandkit" />
 
 The modal component.
 

apps/website/docs/api-reference/commandkit/functions/paragraph-input.mdx

@@ -13,7 +13,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## ParagraphInput
 
-<GenerationInfo sourceFile="packages/commandkit/src/components/v1/modal/Modal.ts" sourceLine="145" packageName="commandkit" />
+<GenerationInfo sourceFile="packages/commandkit/src/components/interactive/modal/Modal.ts" sourceLine="149" packageName="commandkit" />
 
 The paragraph text input component.