feat(ui): add Button, Modal, Spinner, Toast, and Tooltip components with styles

- Implemented Button component with various props for customization.
- Created Modal component with header, content, and footer subcomponents.
- Added Spinner component for loading indicators.
- Developed Toast component for displaying notifications.
- Introduced Tooltip component for contextual hints with keyboard shortcuts.
- Added corresponding CSS modules for styling each component.
- Updated index file to export new components.
- Configured TypeScript settings for the UI package.

packages/shared/src/components/channel/FileUploadModal.module.css

@@ -0,0 +1,142 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px 20px 4px;
+}
+
+.destination {
+	font-size: 13px;
+	color: var(--text-secondary, #a0a3a8);
+}
+
+.destination strong {
+	color: var(--text-primary, #fff);
+	font-weight: 600;
+}
+
+.previewGrid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	max-height: 320px;
+	overflow-y: auto;
+}
+
+.preview {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 10px;
+	width: 140px;
+	background-color: var(--background-secondary, rgba(255, 255, 255, 0.03));
+	border: 1px solid var(--background-modifier-accent, rgba(255, 255, 255, 0.06));
+	border-radius: 8px;
+}
+
+.removeButton {
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	padding: 0;
+	background-color: rgba(0, 0, 0, 0.7);
+	border: none;
+	border-radius: 4px;
+	color: #fff;
+	cursor: pointer;
+	z-index: 1;
+	transition: background-color 0.1s;
+}
+
+.removeButton:hover {
+	background-color: var(--status-danger, #da373c);
+}
+
+.previewImage {
+	width: 100%;
+	height: 100px;
+	object-fit: cover;
+	border-radius: 6px;
+	background-color: rgba(0, 0, 0, 0.3);
+}
+
+.previewIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100px;
+	background-color: rgba(88, 101, 242, 0.12);
+	color: var(--brand-primary, #5865f2);
+	border-radius: 6px;
+}
+
+.previewMeta {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.previewName {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--text-primary, #fff);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.previewSize {
+	font-size: 11px;
+	color: var(--text-primary-muted, #a0a3a8);
+}
+
+.captionLabel {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.captionLabelText {
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--text-primary-muted, #a0a3a8);
+}
+
+.captionInput {
+	width: 100%;
+	padding: 10px 12px;
+	background-color: var(--background-tertiary, rgba(0, 0, 0, 0.3));
+	border: 1px solid transparent;
+	border-radius: 6px;
+	color: var(--text-primary, #fff);
+	font-size: 14px;
+	font-family: inherit;
+	outline: none;
+	box-sizing: border-box;
+	transition: border-color 0.1s;
+}
+
+.captionInput:focus {
+	border-color: var(--brand-primary, #5865f2);
+}
+
+.errorBanner {
+	padding: 10px 12px;
+	background-color: rgba(234, 80, 80, 0.15);
+	border: 1px solid rgba(234, 80, 80, 0.45);
+	border-radius: 6px;
+	color: var(--text-primary, #fff);
+	font-size: 13px;
+	line-height: 1.45;
+	word-break: break-word;
+}