feat: web-components (#8715)

.github/labeler.yml

@@ -1,47 +1,39 @@
-'packages:builders':
+packages:builders:
   - packages/builders/*
   - packages/builders/**/*
-
+packages:collection:
-'packages:collection':
   - packages/collection/*
   - packages/collection/**/*
-
+packages:discord.js:
-'packages:discord.js':
   - packages/discord.js/*
   - packages/discord.js/**/*
-
+packages:docgen:
-'packages:docgen':
   - packages/docgen/*
   - packages/docgen/**/*
-
+packages:guide:
-'packages:guide':
   - packages/guide/*
   - packages/guide/**/*
-
+packages:proxy:
-'packages:proxy':
   - packages/proxy/*
   - packages/proxy/**/*
-
+packages:proxy-container:
-'packages:proxy-container':
   - packages/proxy-container/*
   - packages/proxy-container/**/*
-
+packages:rest:
-'packages:rest':
   - packages/rest/*
   - packages/rest/**/*
-
+packages:util:
-'packages:util':
   - packages/util/*
   - packages/util/**/*
-
+packages:voice:
-'packages:voice':
   - packages/voice/*
   - packages/voice/**/*
-
+packages:website:
-'packages:website':
   - packages/website/*
   - packages/website/**/*
-
+packages/web-components:
-'packages:ws':
+  - packages:web-components/*
+  - packages:web-components/**/*
+packages:ws:
   - packages/ws/*
   - packages/ws/**/*

.github/labels.yml

@@ -1,106 +1,108 @@
-- name: 'api changes'
+- name: api changes
   color: '5663e9'
-- name: 'api support'
+- name: api support
   color: '5663e9'
-- name: 'backlog'
+- name: backlog
-  color: '7ef7ef'
+  color: 7ef7ef
-- name: 'blocked'
+- name: blocked
-  color: 'fc1423'
+  color: fc1423
-- name: 'bug'
+- name: bug
-  color: 'd73a4a'
+  color: d73a4a
-- name: 'caching'
+- name: caching
-  color: '80c042'
+  color: 80c042
-- name: 'chore'
+- name: chore
-  color: 'ffffff'
+  color: ffffff
-- name: 'ci'
+- name: ci
-  color: '0075ca'
+  color: 0075ca
-- name: 'dependencies'
+- name: dependencies
-  color: '276bd1'
+  color: 276bd1
-- name: 'discussion'
+- name: discussion
-  color: 'b6b1f9'
+  color: b6b1f9
-- name: 'discord'
+- name: discord
   color: '5663e9'
-- name: 'documentation'
+- name: documentation
-  color: '0075ca'
+  color: 0075ca
-- name: 'duplicate'
+- name: duplicate
-  color: 'cfd3d7'
+  color: cfd3d7
-- name: 'error handling'
+- name: error handling
-  color: '80c042'
+  color: 80c042
-- name: 'feature request'
+- name: feature request
-  color: 'fcf95a'
+  color: fcf95a
-- name: 'gateway'
+- name: gateway
-  color: '80c042'
+  color: 80c042
-- name: 'good first issue'
+- name: good first issue
-  color: '7057ff'
+  color: 7057ff
-- name: 'has PR'
+- name: has PR
-  color: '4b1f8e'
+  color: 4b1f8e
-- name: 'help wanted'
+- name: help wanted
   color: '008672'
-- name: 'interactions'
+- name: interactions
-  color: '80c042'
+  color: 80c042
-- name: 'in progress'
+- name: in progress
-  color: 'ffccd7'
+  color: ffccd7
-- name: 'in review'
+- name: in review
-  color: 'aed5fc'
+  color: aed5fc
-- name: 'invalid'
+- name: invalid
-  color: 'e4e669'
+  color: e4e669
-- name: 'need repro'
+- name: need repro
-  color: 'c66037'
+  color: c66037
-- name: 'packages:builders'
+- name: packages:builders
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:collection'
+- name: packages:collection
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:discord.js'
+- name: packages:discord.js
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:docgen'
+- name: packages:docgen
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:guide'
+- name: packages:guide
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:proxy'
+- name: packages:proxy
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:proxy-container'
+- name: packages:proxy-container
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:rest'
+- name: packages:rest
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:util'
+- name: packages:util
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:voice'
+- name: packages:voice
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:website'
+- name: packages:website
-  color: 'fbca04'
+  color: fbca04
-- name: 'packages:ws'
+- name: packages:web-components
-  color: 'fbca04'
+  color: fbca04
-- name: 'performance'
+- name: packages:ws
-  color: '80c042'
+  color: fbca04
-- name: 'permissions'
+- name: performance
-  color: '80c042'
+  color: 80c042
-- name: 'priority:high'
+- name: permissions
-  color: 'fc1423'
+  color: 80c042
-- name: 'question (please use Discord instead)'
+- name: priority:high
-  color: 'd876e3'
+  color: fc1423
-- name: 'ratelimits'
+- name: question (please use Discord instead)
-  color: '80c042'
+  color: d876e3
-- name: 'refactor'
+- name: ratelimits
-  color: '1d637f'
+  color: 80c042
-- name: 'regression'
+- name: refactor
-  color: 'ea8785'
+  color: 1d637f
-- name: 'REST'
+- name: regression
-  color: '80c042'
+  color: ea8785
-- name: 'semver:major'
+- name: REST
-  color: 'c10f47'
+  color: 80c042
-- name: 'semver:minor'
+- name: semver:major
-  color: 'e4f486'
+  color: c10f47
-- name: 'semver:patch'
+- name: semver:minor
-  color: 'e8be8b'
+  color: e4f486
-- name: 'sharding'
+- name: semver:patch
-  color: '80c042'
+  color: e8be8b
-- name: 'tests'
+- name: sharding
-  color: 'f06dff'
+  color: 80c042
-- name: 'threads'
+- name: tests
-  color: '80c042'
+  color: f06dff
-- name: 'typings'
+- name: threads
-  color: '80c042'
+  color: 80c042
-- name: 'utility'
+- name: typings
-  color: '80c042'
+  color: 80c042
-- name: 'wontfix'
+- name: utility
-  color: 'ffffff'
+  color: 80c042
+- name: wontfix
+  color: ffffff

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
 	"*": "prettier --ignore-unknown --write",
-	"{src/**,__tests__/**}.{mjs,js,ts}": "eslint --ext mjs,js,ts --fix",
+	"{src/**,__tests__/**}.{mjs,js,cjs,ts,tsx,astro}": "eslint --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix",
-	"src/**.ts": "vitest related --run"
+	"src/**.ts": "vitest related --run --config ./vitest.config.ts"
 }

.vscode/settings.json

@@ -11,6 +11,6 @@
 	"files.associations": {
 		"*.mdx": "markdown"
 	},
-	"unocss.root": "./packages/website",
+	"unocss.root": "./packages/web-components",
 	"typescript.tsdk": "node_modules/typescript/lib"
 }

packages/actions/package.json

@@ -6,8 +6,8 @@
 	"scripts": {
 		"test": "vitest run",
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format"
 	},
 	"main": "./dist/index.mjs",

packages/api-extractor-utils/package.json

@@ -5,8 +5,8 @@
 	"private": true,
 	"scripts": {
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format"
 	},
 	"main": "./dist/index.js",

packages/builders/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"test": "vitest run",
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"docs": "downlevel-dts dist docs/dist --to=3.7 && api-extractor run --local",
 		"prepack": "yarn lint && yarn test && yarn build",

packages/collection/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"test": "vitest run",
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"docs": "downlevel-dts dist docs/dist --to=3.7 && api-extractor run --local",
 		"prepack": "yarn lint && yarn test && yarn build",

packages/docgen/package.json

@@ -4,8 +4,8 @@
 	"description": "The docs.json generator for discord.js and its related projects",
 	"scripts": {
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"prepack": "yarn format && yarn build"
 	},

packages/guide/astro.config.ts

@@ -14,7 +14,9 @@ export default defineConfig({
 		image({
 			serviceEntryPoint: '@astrojs/image/sharp',
 		}),
-		Unocss(),
+		Unocss({
+			configFile: fileURLToPath(new URL('../ui/unocss.config.ts', import.meta.url)),
+		}),
 	],
 	markdown: {
 		remarkPlugins: [[remarkCodeHike, { autoImport: false, theme: shikiThemeDarkPlus, lineNumbers: true }]],

packages/guide/package.json

@@ -1,15 +1,15 @@
 {
 	"name": "@discordjs/guide",
 	"version": "0.1.0",
-	"description": "",
+	"description": "Imagine a guide... that explores the many possibilities for your discord.js bot",
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
-		"build:prod": "astro build",
+		"build:prod": "yarn workspace @discordjs/ui run build && astro build",
 		"dev": "astro dev",
 		"preview": "astro preview",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx,astro",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx,astro --fix"
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix"
 	},
 	"type": "module",
 	"contributors": [
@@ -38,6 +38,7 @@
 		"@astrojs/mdx": "^0.11.4",
 		"@astrojs/react": "^1.1.4",
 		"@code-hike/mdx": "^0.7.4",
+		"@discordjs/ui": "workspace:^",
 		"@vscode/codicons": "^0.0.32",
 		"ariakit": "^2.0.0-next.41",
 		"astro": "^1.4.5",

packages/guide/src/components/SidebarItems.tsx

@@ -1,5 +1,5 @@
+import { Section } from '@discordjs/ui';
 import type { MDXInstance } from 'astro';
-import { Section } from './Section.jsx';
 
 export type MDXPage = MDXInstance<{ category: string; title: string }>;
 

packages/guide/src/pages/creating-your-bot/index.mdx

@@ -4,12 +4,12 @@ title: Initial files
 category: Creating your bot
 ---
 
+import { CH } from '@code-hike/mdx/components';
+import { Section } from '@discordjs/ui';
 import { Tip } from '../../components/Tip.jsx';
 import { Caution } from '../../components/Caution.jsx';
 import { DocsLink } from '../../components/DocsLink.jsx';
 import { ResultingCode } from '../../components/ResultingCode.jsx';
-import { CH } from '@code-hike/mdx/components';
-import { Section } from '../../components/Section.jsx';
 
 # Initial files
 
@@ -119,7 +119,7 @@ console.log(process.env.DISCORD_TOKEN);
 	`.gitignore`](/creating-your-bot/#git-and-gitignore).
 </Caution>
 
-<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded dense background gutter>
+<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded background gutter>
 While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe:
 
 - Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18)

packages/proxy-container/package.json

@@ -4,8 +4,8 @@
 	"description": "Lightweight HTTP proxy for Discord's API, brought to you as a container 📦",
 	"scripts": {
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts --fix",
 		"fmt": "yarn format",
 		"prepack": "yarn lint && yarn test && yarn build"
 	},

packages/proxy/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"test": "vitest run",
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"docs": "downlevel-dts dist docs/dist --to=3.7 && api-extractor run --local",
 		"prepack": "yarn lint && yarn test && yarn build",

packages/rest/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"test": "vitest run",
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"docs": "downlevel-dts dist docs/dist --to=3.7 && api-extractor run --local",
 		"prepack": "yarn lint && yarn test && yarn build",

packages/scripts/package.json

@@ -5,8 +5,8 @@
 	"private": true,
 	"scripts": {
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format"
 	},
 	"main": "./dist/index.js",

packages/ui/.cliff-jumperrc.json

@@ -0,0 +1,5 @@
+{
+	"name": "ui",
+	"org": "discordjs",
+	"packagePath": "packages/ui"
+}

packages/ui/.eslintrc.json

@@ -0,0 +1,12 @@
+{
+	"extends": ["../../.eslintrc.json", "neon/react", "neon/prettier"],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"rules": {
+		"react/react-in-jsx-scope": 0,
+		"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
+	}
+}

packages/ui/.gitignore

@@ -0,0 +1,27 @@
+# Packages
+node_modules/
+
+# Log files
+logs/
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Env
+.env
+
+# Dist
+dist/
+typings/
+docs/**/*
+!docs/index.json
+!docs/README.md
+
+# Miscellaneous
+.tmp/
+coverage/
+tsconfig.tsbuildinfo

packages/ui/.ladle/components.tsx

@@ -0,0 +1,5 @@
+import type { GlobalProvider } from '@ladle/react';
+import '@unocss/reset/tailwind.css';
+import 'uno.css';
+
+export const Provider: GlobalProvider = ({ children }) => <>{children}</>;

packages/ui/.lintstagedrc.cjs

@@ -0,0 +1 @@
+module.exports = require('../../.lintstagedrc.json');

packages/ui/.prettierignore

@@ -0,0 +1,8 @@
+# Autogenerated
+CHANGELOG.md
+.turbo
+dist/
+docs/**/*
+!docs/index.yml
+!docs/README.md
+coverage/

packages/ui/.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require('../../.prettierrc.json');

packages/ui/LICENSE

@@ -0,0 +1,188 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

packages/ui/api-extractor.json

@@ -0,0 +1,376 @@
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+	/**
+	 * Optionally specifies another JSON config file that this file extends from.  This provides a way for
+	 * standard settings to be shared across multiple projects.
+	 *
+	 * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
+	 * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
+	 * resolved using NodeJS require().
+	 *
+	 * SUPPORTED TOKENS: none
+	 * DEFAULT VALUE: ""
+	 */
+	// "extends": "./shared/api-extractor-base.json"
+	// "extends": "my-package/include/api-extractor-base.json"
+
+	/**
+	 * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
+	 * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
+	 *
+	 * The path is resolved relative to the folder of the config file that contains the setting.
+	 *
+	 * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
+	 * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
+	 * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
+	 * will be reported.
+	 *
+	 * SUPPORTED TOKENS: <lookup>
+	 * DEFAULT VALUE: "<lookup>"
+	 */
+	// "projectFolder": "..",
+
+	/**
+	 * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
+	 * analyzes the symbols exported by this module.
+	 *
+	 * The file extension must be ".d.ts" and not ".ts".
+	 *
+	 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+	 * prepend a folder token such as "<projectFolder>".
+	 *
+	 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+	 */
+	"mainEntryPointFilePath": "<projectFolder>/dist/index.d.ts",
+
+	/**
+	 * A list of NPM package names whose exports should be treated as part of this package.
+	 *
+	 * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
+	 * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
+	 * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
+	 * imports library2.  To avoid this, we can specify:
+	 *
+	 *   "bundledPackages": [ "library2" ],
+	 *
+	 * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
+	 * local files for library1.
+	 */
+	"bundledPackages": [],
+
+	/**
+	 * Determines how the TypeScript compiler engine will be invoked by API Extractor.
+	 */
+	"compiler": {
+		/**
+		 * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * Note: This setting will be ignored if "overrideTsconfig" is used.
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
+		 */
+		// "tsconfigFilePath": "<projectFolder>/tsconfig.json",
+		/**
+		 * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
+		 * The object must conform to the TypeScript tsconfig schema:
+		 *
+		 * http://json.schemastore.org/tsconfig
+		 *
+		 * If omitted, then the tsconfig.json file will be read from the "projectFolder".
+		 *
+		 * DEFAULT VALUE: no overrideTsconfig section
+		 */
+		// "overrideTsconfig": {
+		//   . . .
+		// }
+		/**
+		 * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
+		 * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
+		 * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
+		 * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
+		 *
+		 * DEFAULT VALUE: false
+		 */
+		// "skipLibCheck": true,
+	},
+
+	/**
+	 * Configures how the API report file (*.api.md) will be generated.
+	 */
+	"apiReport": {
+		/**
+		 * (REQUIRED) Whether to generate an API report.
+		 */
+		"enabled": false
+
+		/**
+		 * The filename for the API report files.  It will be combined with "reportFolder" or "reportTempFolder" to produce
+		 * a full file path.
+		 *
+		 * The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
+		 *
+		 * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<unscopedPackageName>.api.md"
+		 */
+		// "reportFileName": "<unscopedPackageName>.api.md",
+
+		/**
+		 * Specifies the folder where the API report file is written.  The file name portion is determined by
+		 * the "reportFileName" setting.
+		 *
+		 * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
+		 * e.g. for an API review.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/temp/"
+		 */
+		// "reportFolder": "<projectFolder>/temp/",
+
+		/**
+		 * Specifies the folder where the temporary report file is written.  The file name portion is determined by
+		 * the "reportFileName" setting.
+		 *
+		 * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
+		 * If they are different, a production build will fail.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/temp/"
+		 */
+		// "reportTempFolder": "<projectFolder>/temp/"
+	},
+
+	/**
+	 * Configures how the doc model file (*.api.json) will be generated.
+	 */
+	"docModel": {
+		/**
+		 * (REQUIRED) Whether to generate a doc model file.
+		 */
+		"enabled": true,
+
+		/**
+		 * The output path for the doc model file.  The file extension should be ".api.json".
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
+		 */
+		"apiJsonFilePath": "<projectFolder>/docs/docs.api.json"
+	},
+
+	/**
+	 * Configures how the .d.ts rollup file will be generated.
+	 */
+	"dtsRollup": {
+		/**
+		 * (REQUIRED) Whether to generate the .d.ts rollup file.
+		 */
+		"enabled": false
+
+		/**
+		 * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
+		 * This file will include all declarations that are exported by the main entry point.
+		 *
+		 * If the path is an empty string, then this file will not be written.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
+		 */
+		// "untrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>.d.ts",
+
+		/**
+		 * Specifies the output path for a .d.ts rollup file to be generated with trimming for an "alpha" release.
+		 * This file will include only declarations that are marked as "@public", "@beta", or "@alpha".
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: ""
+		 */
+		// "alphaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-alpha.d.ts",
+
+		/**
+		 * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
+		 * This file will include only declarations that are marked as "@public" or "@beta".
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: ""
+		 */
+		// "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
+
+		/**
+		 * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
+		 * This file will include only declarations that are marked as "@public".
+		 *
+		 * If the path is an empty string, then this file will not be written.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: ""
+		 */
+		// "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
+
+		/**
+		 * When a declaration is trimmed, by default it will be replaced by a code comment such as
+		 * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
+		 * declaration completely.
+		 *
+		 * DEFAULT VALUE: false
+		 */
+		// "omitTrimmingComments": true
+	},
+
+	/**
+	 * Configures how the tsdoc-metadata.json file will be generated.
+	 */
+	"tsdocMetadata": {
+		/**
+		 * Whether to generate the tsdoc-metadata.json file.
+		 *
+		 * DEFAULT VALUE: true
+		 */
+		// "enabled": true,
+		/**
+		 * Specifies where the TSDoc metadata file should be written.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
+		 * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
+		 * falls back to "tsdoc-metadata.json" in the package folder.
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<lookup>"
+		 */
+		// "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
+	},
+
+	/**
+	 * Specifies what type of newlines API Extractor should use when writing output files.  By default, the output files
+	 * will be written with Windows-style newlines.  To use POSIX-style newlines, specify "lf" instead.
+	 * To use the OS's default newline kind, specify "os".
+	 *
+	 * DEFAULT VALUE: "crlf"
+	 */
+	"newlineKind": "lf",
+
+	/**
+	 * Configures how API Extractor reports error and warning messages produced during analysis.
+	 *
+	 * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
+	 */
+	"messages": {
+		/**
+		 * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
+		 * the input .d.ts files.
+		 *
+		 * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
+		 *
+		 * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+		 */
+		"compilerMessageReporting": {
+			/**
+			 * Configures the default routing for messages that don't match an explicit rule in this table.
+			 */
+			"default": {
+				/**
+				 * Specifies whether the message should be written to the the tool's output log.  Note that
+				 * the "addToApiReportFile" property may supersede this option.
+				 *
+				 * Possible values: "error", "warning", "none"
+				 *
+				 * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
+				 * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
+				 * the "--local" option), the warning is displayed but the build will not fail.
+				 *
+				 * DEFAULT VALUE: "warning"
+				 */
+				"logLevel": "warning"
+
+				/**
+				 * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
+				 * then the message will be written inside that file; otherwise, the message is instead logged according to
+				 * the "logLevel" option.
+				 *
+				 * DEFAULT VALUE: false
+				 */
+				// "addToApiReportFile": false
+			}
+
+			// "TS2551": {
+			//   "logLevel": "warning",
+			//   "addToApiReportFile": true
+			// },
+			//
+			// . . .
+		},
+
+		/**
+		 * Configures handling of messages reported by API Extractor during its analysis.
+		 *
+		 * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
+		 *
+		 * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
+		 */
+		"extractorMessageReporting": {
+			"default": {
+				"logLevel": "warning"
+				// "addToApiReportFile": false
+			}
+
+			// "ae-extra-release-tag": {
+			//   "logLevel": "warning",
+			//   "addToApiReportFile": true
+			// },
+			//
+			// . . .
+		},
+
+		/**
+		 * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
+		 *
+		 * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
+		 *
+		 * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+		 */
+		"tsdocMessageReporting": {
+			"default": {
+				"logLevel": "warning"
+				// "addToApiReportFile": false
+			}
+
+			// "tsdoc-link-tag-unescaped-text": {
+			//   "logLevel": "warning",
+			//   "addToApiReportFile": true
+			// },
+			//
+			// . . .
+		}
+	}
+}

packages/ui/cliff.toml

@@ -0,0 +1,63 @@
+[changelog]
+header = """
+# Changelog
+
+All notable changes to this project will be documented in this file.\n
+"""
+body = """
+{% if version %}\
+	# [{{ version | trim_start_matches(pat="v") }}]\
+	{% if previous %}\
+		{% if previous.version %}\
+			(https://github.com/discordjs/discord.js/compare/{{ previous.version }}...{{ version }})\
+		{% else %}\
+			(https://github.com/discordjs/discord.js/tree/{{ version }})\
+		{% endif %}\
+	{% endif %} \
+	- ({{ timestamp | date(format="%Y-%m-%d") }})
+{% else %}\
+	# [unreleased]
+{% endif %}\
+{% for group, commits in commits | group_by(attribute="group") %}
+	## {{ group | upper_first }}
+	{% for commit in commits %}
+		- {% if commit.scope %}\
+			**{{commit.scope}}:** \
+		  {% endif %}\
+			{{ commit.message | upper_first }} ([{{ commit.id | truncate(length=7, end="") }}](https://github.com/discordjs/discord.js/commit/{{ commit.id }}))\
+		{% if commit.breaking %}\
+			{% for breakingChange in commit.footers %}\
+				\n{% raw %}  {% endraw %}- **{{ breakingChange.token }}{{ breakingChange.separator }}** {{ breakingChange.value }}\
+			{% endfor %}\
+		{% endif %}\
+	{% endfor %}
+{% endfor %}\n
+"""
+trim = true
+footer = ""
+
+[git]
+conventional_commits = true
+filter_unconventional = true
+commit_parsers = [
+	{ message = "^feat", group = "Features"},
+	{ message = "^fix", group = "Bug Fixes"},
+	{ message = "^docs", group = "Documentation"},
+	{ message = "^perf", group = "Performance"},
+	{ message = "^refactor", group = "Refactor"},
+	{ message = "^typings", group = "Typings"},
+	{ message = "^types", group = "Typings"},
+	{ message = ".*deprecated", body = ".*deprecated", group = "Deprecation"},
+	{ message = "^revert", skip = true},
+	{ message = "^style", group = "Styling"},
+	{ message = "^test", group = "Testing"},
+	{ message = "^chore", skip = true},
+	{ message = "^ci", skip = true},
+	{ message = "^build", skip = true},
+	{ body = ".*security", group = "Security"},
+]
+filter_commits = true
+tag_pattern = "@discordjs/ui-components@[0-9]*"
+ignore_tags = ""
+date_order = true
+sort_commits = "newest"

packages/ui/package.json

@@ -0,0 +1,74 @@
+{
+	"name": "@discordjs/ui",
+	"version": "0.1.0",
+	"description": "",
+	"scripts": {
+		"test": "vitest run --config ../../vitest.config.ts",
+		"build": "vite build",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix",
+		"prepack": "yarn build && yarn lint",
+		"changelog": "git cliff --prepend ./CHANGELOG.md -u -c ./cliff.toml -r ../../ --include-path 'packages/ui/*'",
+		"release": "cliff-jumper",
+		"storybook": "ladle serve"
+	},
+	"type": "module",
+	"module": "./dist/ui.js",
+	"typings": "./dist/index.d.ts",
+	"exports": {
+		"import": "./dist/ui.js",
+		"types": "./dist/index.d.ts"
+	},
+	"directories": {
+		"lib": "src"
+	},
+	"files": [
+		"dist"
+	],
+	"contributors": [
+		"Crawl <icrawltogo@gmail.com>",
+		"SpaceEEC <spaceeec@yahoo.com>",
+		"Vlad Frangu <kingdgrizzle@gmail.com>",
+		"Aura Román <kyradiscord@gmail.com>"
+	],
+	"license": "Apache-2.0",
+	"keywords": [],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/discordjs/discord.js.git"
+	},
+	"bugs": {
+		"url": "https://github.com/discordjs/discord.js/issues"
+	},
+	"homepage": "https://discord.js.org",
+	"dependencies": {
+		"ariakit": "^2.0.0-next.41",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-icons": "^4.4.0"
+	},
+	"devDependencies": {
+		"@favware/cliff-jumper": "^1.8.8",
+		"@ladle/react": "^2.4.3",
+		"@types/node": "^16.11.64",
+		"@types/react-dom": "^18.0.6",
+		"@unocss/reset": "^0.45.26",
+		"@vitejs/plugin-react": "^2.1.0",
+		"@vitest/coverage-c8": "^0.23.4",
+		"cross-env": "^7.0.3",
+		"eslint": "^8.24.0",
+		"eslint-config-neon": "^0.1.34",
+		"prettier": "^2.7.1",
+		"typescript": "^4.8.4",
+		"unocss": "^0.45.26",
+		"vite": "^3.1.6",
+		"vite-plugin-dts": "^1.6.5",
+		"vitest": "^0.23.4"
+	},
+	"engines": {
+		"node": ">=16.9.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/ui/src/lib/components/Section.stories.tsx

@@ -0,0 +1,58 @@
+import type { Story } from '@ladle/react';
+import type { PropsWithChildren } from 'react';
+import { Section, type SectionOptions } from './Section.jsx';
+
+export const Default = () => <Section title="Test">Test 1234</Section>;
+
+export const Padded = () => (
+	<Section padded title="Test">
+		Test 1234
+	</Section>
+);
+
+export const Background = () => (
+	<Section background title="Test">
+		Test 1234
+	</Section>
+);
+
+export const Dense = () => (
+	<Section dense title="Test">
+		Test 1234
+	</Section>
+);
+
+export const Gutter = () => (
+	<Section gutter title="Test">
+		Test 1234
+	</Section>
+);
+
+export const Playground: Story<PropsWithChildren<SectionOptions>> = ({
+	title,
+	background,
+	defaultClosed,
+	dense,
+	gutter,
+	padded,
+}: PropsWithChildren<SectionOptions>) => (
+	<Section
+		background={background}
+		defaultClosed={defaultClosed}
+		dense={dense}
+		gutter={gutter}
+		padded={padded}
+		title={title}
+	>
+		Test 1234
+	</Section>
+);
+
+Playground.args = {
+	title: 'Test',
+	background: true,
+	defaultClosed: false,
+	dense: false,
+	gutter: true,
+	padded: true,
+};

packages/ui/src/lib/components/Section.tsx

@@ -2,6 +2,16 @@ import { Disclosure, DisclosureContent, useDisclosureState } from 'ariakit/discl
 import type { PropsWithChildren } from 'react';
 import { VscChevronDown } from 'react-icons/vsc';
 
+export interface SectionOptions {
+	background?: boolean | undefined;
+	defaultClosed?: boolean | undefined;
+	dense?: boolean | undefined;
+	gutter?: boolean | undefined;
+	icon?: JSX.Element | undefined;
+	padded?: boolean | undefined;
+	title: string;
+}
+
 export function Section({
 	title,
 	icon,
@@ -11,15 +21,7 @@ export function Section({
 	background = false,
 	gutter = false,
 	children,
-}: PropsWithChildren<{
+}: PropsWithChildren<SectionOptions>) {
-	background?: boolean;
-	defaultClosed?: boolean;
-	dense?: boolean;
-	gutter?: boolean;
-	icon?: JSX.Element;
-	padded?: boolean;
-	title: string;
-}>) {
 	const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });
 
 	return (

packages/ui/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './components/Section.jsx';

packages/ui/tsconfig.eslint.json

@@ -0,0 +1,20 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true
+	},
+	"include": [
+		"**/*.ts",
+		"**/*.tsx",
+		"**/*.js",
+		"**/*.mjs",
+		"**/*.jsx",
+		"**/*.test.ts",
+		"**/*.test.js",
+		"**/*.test.mjs",
+		"**/*.spec.ts",
+		"**/*.spec.js",
+		"**/*.spec.mjs"
+	],
+	"exclude": []
+}

packages/ui/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"baseUrl": ".",
+		"noEmit": true,
+		"allowJs": false,
+		"incremental": true,
+		"skipLibCheck": true,
+		"paths": {
+			"~/*": ["./src/*"]
+		}
+	},
+	"include": ["src/**/*.ts", "src/**/*.tsx", ".ladle/**/*.tsx", "types.d.ts"],
+	"exclude": ["node_modules"]
+}

packages/ui/unocss.config.ts

@@ -62,4 +62,18 @@ export default defineConfig({
 			},
 		}),
 	],
+	include: [
+		/.vue$/,
+		/.vue?vue/,
+		/.svelte$/,
+		/.[jt]sx$/,
+		/.mdx?$/,
+		/.astro$/,
+		/.elm$/,
+		/.html$/,
+		// eslint-disable-next-line prefer-named-capture-group, unicorn/no-unsafe-regex
+		/.*\/ui\.js(.*)?$/,
+		// eslint-disable-next-line prefer-named-capture-group, unicorn/no-unsafe-regex
+		/.*\/ui\.mjs(.*)?$/,
+	],
 });

packages/ui/vite.config.ts

@@ -0,0 +1,20 @@
+import { resolve } from 'node:path';
+import react from '@vitejs/plugin-react';
+import Unocss from 'unocss/vite';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+	plugins: [react(), dts(), Unocss()],
+	build: {
+		lib: {
+			entry: resolve(__dirname, 'src/lib/index.ts'),
+			formats: ['es'],
+			name: 'ui',
+			fileName: 'ui',
+		},
+		rollupOptions: {
+			external: ['react', 'react-dom', 'ariakit/disclosure', 'react-icons/vsc'],
+		},
+	},
+});

packages/util/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"build": "tsup",
 		"test": "vitest run && tsd",
-		"lint": "prettier --check . && TIMING=1 eslint src --ext mjs,js,ts",
+		"lint": "prettier --check . && TIMING=1 eslint src --ext .mjs,.js,.ts",
-		"format": "prettier --write . && TIMING=1 eslint src --ext mjs,js,ts --fix",
+		"format": "prettier --write . && TIMING=1 eslint src --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"docs": "downlevel-dts dist docs/dist --to=3.7 && api-extractor run --local",
 		"prepack": "yarn lint && yarn test && yarn build",

packages/voice/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"build": "tsup",
 		"test": "jest --coverage",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"docs": "downlevel-dts dist docs/dist --to=3.7 && api-extractor run --local",
 		"prepack": "yarn lint && yarn test && yarn build",

packages/website/package.json

@@ -1,21 +1,21 @@
 {
 	"name": "@discordjs/website",
 	"version": "0.1.0",
-	"description": "A set of builders that you can use when creating your bot",
+	"description": "Imagine a bot... the most popular way to build discord bots",
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
 		"build:local": "yarn run --top-level docs --force && cross-env NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
-		"build:prod": "yarn workspace @discordjs/api-extractor-utils run build && yarn workspace @discordjs/scripts run build && yarn build:css && yarn build:next",
+		"build:prod": "yarn workspace @discordjs/api-extractor-utils run build && yarn workspace @discordjs/scripts run build && yarn workspace @discordjs/ui run build && yarn build:css && yarn build:next",
 		"build:next": "next build",
 		"build:css": "yarn generate:css",
 		"build:search_indicies": "yarn node scripts/generateAllIndicies.js",
 		"dev": "yarn run --top-level docs && concurrently 'yarn dev:css' 'yarn dev:next'",
 		"dev:next": "next dev",
 		"dev:css": "yarn generate:css --watch",
-		"generate:css": "unocss 'src/**/*.tsx' --out-file ./src/styles/unocss.css",
+		"generate:css": "unocss 'src/**/*.tsx' '../ui/src/**/*.tsx' --out-file ./src/styles/unocss.css --config ../ui/unocss.config.ts",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx --fix"
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix"
 	},
 	"type": "module",
 	"contributors": [
@@ -42,6 +42,7 @@
 	"dependencies": {
 		"@discordjs/api-extractor-utils": "workspace:^",
 		"@discordjs/scripts": "workspace:^",
+		"@discordjs/ui": "workspace:^",
 		"@microsoft/api-extractor-model": "7.24.0",
 		"@microsoft/tsdoc": "0.14.1",
 		"@vscode/codicons": "^0.0.32",

packages/website/src/components/DocContainer.tsx

@@ -5,6 +5,7 @@ import type {
 	ApiClassJSON,
 	ApiInterfaceJSON,
 } from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
 import type { ReactNode } from 'react';
 import { Fragment, type PropsWithChildren } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars-2';
@@ -19,7 +20,6 @@ import {
 } from 'react-icons/vsc';
 import { useMedia } from 'react-use';
 import { HyperlinkedText } from './HyperlinkedText';
-import { Section } from './Section';
 import { SyntaxHighlighter } from './SyntaxHighlighter';
 import { TableOfContentItems } from './TableOfContentItems';
 import { TypeParamTable } from './TypeParamTable';

packages/website/src/components/Section.tsx

@@ -1,43 +0,0 @@
-import { Disclosure, DisclosureContent, useDisclosureState } from 'ariakit/disclosure';
-import type { PropsWithChildren } from 'react';
-import { VscChevronDown } from 'react-icons/vsc';
-
-export function Section({
-	title,
-	icon,
-	padded = false,
-	dense = false,
-	defaultClosed = false,
-	children,
-}: PropsWithChildren<{
-	defaultClosed?: boolean;
-	dense?: boolean;
-	icon?: JSX.Element;
-	padded?: boolean;
-	title: string;
-}>) {
-	const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });
-
-	return (
-		<div className="flex flex-col">
-			<Disclosure
-				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
-				state={disclosure}
-			>
-				<div className="flex flex-row place-content-between place-items-center">
-					<div className="flex flex-row place-items-center gap-3">
-						{icon ?? null}
-						<span className="font-semibold">{title}</span>
-					</div>
-					<VscChevronDown
-						className={`transform transition duration-150 ease-in-out ${disclosure.open ? 'rotate-180' : 'rotate-0'}`}
-						size={20}
-					/>
-				</div>
-			</Disclosure>
-			<DisclosureContent state={disclosure}>
-				{padded ? <div className={`py-5 ${dense ? 'mx-2 px-0' : 'px-4.5 mx-6.5'}`}>{children}</div> : children}
-			</DisclosureContent>
-		</div>
-	);
-}

packages/website/src/components/Sections.tsx

@@ -4,13 +4,13 @@ import type {
 	ParameterDocumentation,
 	ApiConstructorJSON,
 } from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
 import { useMemo } from 'react';
 import { VscSymbolConstant, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
 import { useMedia } from 'react-use';
 import { MethodList } from './MethodList';
 import { ParameterTable } from './ParameterTable';
 import { PropertyList } from './PropertyList';
-import { Section } from './Section';
 import { TSDoc } from './tsdoc/TSDoc';
 
 export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] }) {

packages/website/src/components/SidebarItems.tsx

@@ -1,3 +1,4 @@
+import { Section } from '@discordjs/ui';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { type Dispatch, type SetStateAction, useEffect, useState, useMemo } from 'react';
@@ -9,7 +10,6 @@ import {
 	VscSymbolVariable,
 	VscSymbolMethod,
 } from 'react-icons/vsc';
-import { Section } from './Section';
 import type { GroupedMembers, Members } from './SidebarLayout';
 
 function groupMembers(members: Members): GroupedMembers {

packages/website/src/components/model/Enum.tsx

@@ -1,9 +1,9 @@
 import type { ApiEnumJSON } from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
 import { VscSymbolEnumMember } from 'react-icons/vsc';
 import { useMedia } from 'react-use';
 import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
 import { DocContainer } from '../DocContainer';
-import { Section } from '../Section';
 
 export function Enum({ data }: { data: ApiEnumJSON }) {
 	const matches = useMedia('(max-width: 768px)', true);

packages/website/unocss.config.ts

@@ -1,65 +0,0 @@
-import { defineConfig, presetTypography, presetUno, presetWebFonts } from 'unocss';
-
-export default defineConfig({
-	theme: {
-		colors: {
-			blurple: {
-				50: '#e0e3ff',
-				100: '#cdd2ff',
-				200: '#9ea7ff',
-				300: '#7782fa',
-				DEFAULT: '#5865F2',
-				500: '#3d48c3',
-				600: '#293294',
-				700: '#1a2165',
-				800: '#0e1137',
-				900: '#020208',
-			},
-		},
-	},
-	presets: [
-		presetUno({ dark: 'class' }),
-		presetWebFonts({
-			provider: 'bunny',
-			fonts: {
-				mono: ['JetBrains Mono', 'JetBrains Mono:400,600,700'],
-			},
-		}),
-		presetTypography({
-			cssExtend: {
-				pre: {
-					padding: '1em',
-					'line-height': '1.5',
-					'border-radius': '4px',
-				},
-				code: {
-					'font-size': '1em',
-					'font-weight': 'unset',
-				},
-				':where(:not(pre) > code)::before': {
-					content: '""',
-				},
-				':where(:not(pre) > code)::after': {
-					content: '""',
-				},
-				a: {
-					color: '#5865F2',
-					'text-decoration': 'none',
-				},
-				'a > img': {
-					display: 'inline-block',
-				},
-				h2: {
-					'margin-top': '1.25em',
-				},
-				h3: {
-					'margin-top': '0.75em',
-				},
-				// eslint-disable-next-line id-length
-				p: {
-					margin: '.5em 0',
-				},
-			},
-		}),
-	],
-});

packages/ws/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"test": "vitest run",
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"docs": "downlevel-dts dist docs/dist --to=3.7 && api-extractor run --local",
 		"prepack": "yarn build && yarn lint",
 		"changelog": "git cliff --prepend ./CHANGELOG.md -u -c ./cliff.toml -r ../../ --include-path 'packages/ws/*'",