feat(components): add reusable design system components

src/components/Alert/index.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+type AlertSize = 'sm' | 'md';
+
+interface AlertProps {
+  variant?: AlertVariant;
+  size?: AlertSize;
+  title?: string;
+  children: ReactNode;
+  className?: string;
+  icon?: ReactNode;
+}
+
+export default function Alert({
+  variant = 'info',
+  size = 'md',
+  title,
+  children,
+  className,
+  icon,
+}: AlertProps): ReactNode {
+  const defaultIcons = {
+    info: 'ℹ️',
+    success: '✓',
+    warning: '⚠',
+    error: '✕',
+  };
+
+  return (
+    <div
+      className={clsx(
+        styles.alert,
+        styles[`alert--${variant}`],
+        styles[`alert--${size}`],
+        className
+      )}
+      role="alert"
+    >
+      <div className={styles.alertIcon}>
+        {icon || <span className={styles.iconEmoji}>{defaultIcons[variant]}</span>}
+      </div>
+      <div className={styles.alertContent}>
+        {title && <div className={styles.alertTitle}>{title}</div>}
+        <div className={styles.alertMessage}>{children}</div>
+      </div>
+    </div>
+  );
+}
+

src/components/Alert/styles.module.css

@@ -0,0 +1,109 @@
+.alert {
+  display: flex;
+  gap: var(--ode-spacing-4);
+  padding: var(--ode-spacing-4);
+  border-radius: var(--ode-border-radius-md);
+  border: var(--ode-border-width-thin) solid;
+  font-family: var(--ode-font-family-sans);
+}
+
+.alert--sm {
+  padding: var(--ode-spacing-3);
+  gap: var(--ode-spacing-3);
+}
+
+.alert--md {
+  padding: var(--ode-spacing-4);
+  gap: var(--ode-spacing-4);
+}
+
+.alertIcon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  padding-top: var(--ode-spacing-0_5);
+}
+
+.iconEmoji {
+  font-size: var(--ode-font-size-lg);
+  line-height: 1;
+}
+
+.alertContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ode-spacing-2);
+}
+
+.alertTitle {
+  font-size: var(--ode-font-size-base);
+  font-weight: var(--ode-font-weight-semibold);
+  line-height: var(--ode-line-height-tight);
+}
+
+.alertMessage {
+  font-size: var(--ode-font-size-sm);
+  line-height: var(--ode-line-height-relaxed);
+}
+
+.alert--sm .alertTitle {
+  font-size: var(--ode-font-size-sm);
+}
+
+.alert--sm .alertMessage {
+  font-size: var(--ode-font-size-xs);
+}
+
+/* Info Variant */
+.alert--info {
+  background-color: var(--ode-color-semantic-info-50);
+  border-color: var(--ode-color-semantic-info-500);
+  color: var(--ode-color-semantic-info-600);
+}
+
+[data-theme='dark'] .alert--info {
+  background-color: rgba(33, 150, 243, 0.1);
+  border-color: var(--ode-color-semantic-info-500);
+  color: #90caf9;
+}
+
+/* Success Variant */
+.alert--success {
+  background-color: var(--ode-color-semantic-success-50);
+  border-color: var(--ode-color-semantic-success-500);
+  color: var(--ode-color-semantic-success-600);
+}
+
+[data-theme='dark'] .alert--success {
+  background-color: rgba(52, 199, 89, 0.1);
+  border-color: var(--ode-color-semantic-success-500);
+  color: #81c784;
+}
+
+/* Warning Variant */
+.alert--warning {
+  background-color: var(--ode-color-semantic-warning-50);
+  border-color: var(--ode-color-semantic-warning-500);
+  color: var(--ode-color-semantic-warning-600);
+}
+
+[data-theme='dark'] .alert--warning {
+  background-color: rgba(255, 149, 0, 0.1);
+  border-color: var(--ode-color-semantic-warning-500);
+  color: #ffb74d;
+}
+
+/* Error Variant */
+.alert--error {
+  background-color: var(--ode-color-semantic-error-50);
+  border-color: var(--ode-color-semantic-error-500);
+  color: var(--ode-color-semantic-error-600);
+}
+
+[data-theme='dark'] .alert--error {
+  background-color: rgba(244, 67, 54, 0.1);
+  border-color: var(--ode-color-semantic-error-500);
+  color: #e57373;
+}
+

src/components/Badge/index.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+type BadgeSize = 'sm' | 'md';
+
+interface BadgeProps {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  children: ReactNode;
+  className?: string;
+}
+
+export default function Badge({
+  variant = 'primary',
+  size = 'md',
+  children,
+  className,
+}: BadgeProps): ReactNode {
+  return (
+    <span
+      className={clsx(
+        styles.badge,
+        styles[`badge--${variant}`],
+        styles[`badge--${size}`],
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+

src/components/Badge/styles.module.css

@@ -0,0 +1,99 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--ode-font-family-sans);
+  font-weight: var(--ode-font-weight-medium);
+  line-height: var(--ode-line-height-none);
+  border-radius: var(--ode-border-radius-full);
+  white-space: nowrap;
+}
+
+/* Size Variants */
+.badge--sm {
+  padding: var(--ode-spacing-0_5) var(--ode-spacing-2);
+  font-size: var(--ode-font-size-xs);
+}
+
+.badge--md {
+  padding: var(--ode-spacing-1) var(--ode-spacing-3);
+  font-size: var(--ode-font-size-sm);
+}
+
+/* Primary Variant */
+.badge--primary {
+  background-color: var(--ode-color-brand-primary-100);
+  color: var(--ode-color-brand-primary-700);
+}
+
+[data-theme='dark'] .badge--primary {
+  background-color: var(--ode-color-brand-primary-900);
+  color: var(--ode-color-brand-primary-200);
+}
+
+/* Secondary Variant */
+.badge--secondary {
+  background-color: var(--ode-color-brand-secondary-100);
+  color: var(--ode-color-brand-secondary-800);
+}
+
+[data-theme='dark'] .badge--secondary {
+  background-color: var(--ode-color-brand-secondary-900);
+  color: var(--ode-color-brand-secondary-200);
+}
+
+/* Success Variant */
+.badge--success {
+  background-color: var(--ode-color-semantic-success-50);
+  color: var(--ode-color-semantic-success-600);
+}
+
+[data-theme='dark'] .badge--success {
+  background-color: rgba(46, 125, 50, 0.2);
+  color: #81c784;
+}
+
+/* Warning Variant */
+.badge--warning {
+  background-color: var(--ode-color-semantic-warning-50);
+  color: var(--ode-color-semantic-warning-600);
+}
+
+[data-theme='dark'] .badge--warning {
+  background-color: rgba(217, 119, 6, 0.2);
+  color: #ffb74d;
+}
+
+/* Error Variant */
+.badge--error {
+  background-color: var(--ode-color-semantic-error-50);
+  color: var(--ode-color-semantic-error-600);
+}
+
+[data-theme='dark'] .badge--error {
+  background-color: rgba(220, 38, 38, 0.2);
+  color: #e57373;
+}
+
+/* Info Variant */
+.badge--info {
+  background-color: var(--ode-color-semantic-info-50);
+  color: var(--ode-color-semantic-info-600);
+}
+
+[data-theme='dark'] .badge--info {
+  background-color: rgba(37, 99, 235, 0.2);
+  color: #64b5f6;
+}
+
+/* Neutral Variant */
+.badge--neutral {
+  background-color: var(--ode-color-neutral-100);
+  color: var(--ode-color-neutral-700);
+}
+
+[data-theme='dark'] .badge--neutral {
+  background-color: var(--ode-color-neutral-800);
+  color: var(--ode-color-neutral-200);
+}
+

src/components/Button/index.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode, ButtonHTMLAttributes } from 'react';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'pill-light' | 'pill-dark';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface BaseButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+interface ButtonAsButton extends BaseButtonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> {
+  href?: never;
+  to?: never;
+  onClick?: () => void;
+}
+
+interface ButtonAsLink extends BaseButtonProps {
+  href?: string;
+  to?: string;
+  onClick?: never;
+}
+
+type ButtonProps = ButtonAsButton | ButtonAsLink;
+
+export default function Button({
+  variant = 'primary',
+  size = 'md',
+  children,
+  className,
+  disabled = false,
+  href,
+  to,
+  onClick,
+  ...props
+}: ButtonProps): ReactNode {
+  const classes = clsx(
+    styles.button,
+    styles[`button--${variant}`],
+    styles[`button--${size}`],
+    disabled && styles['button--disabled'],
+    className
+  );
+
+  if (href || to) {
+    return (
+      <Link
+        to={href || to}
+        className={classes}
+        {...(props as any)}
+      >
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      className={classes}
+      disabled={disabled}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+