extract ui to lib

src/components/Label.tsx

@@ -0,0 +1,55 @@
+import type { ElementType, ReactNode } from 'react';
+
+type LabelVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'body'
+  | 'body2'
+  | 'caption'
+  | 'error'
+  | 'code';
+
+type LabelProps<T extends ElementType> = {
+  variant?: LabelVariant;
+  as?: T;
+  className?: string;
+  children: ReactNode;
+};
+
+const variantClassMap: Record<LabelVariant, string> = {
+  h1: 'ui-title text-3xl font-bold',
+  h2: 'ui-title text-2xl font-semibold',
+  h3: 'ui-title text-xl font-semibold',
+  h4: 'ui-title text-base font-semibold',
+  body: 'ui-body-primary text-sm',
+  body2: 'ui-body-secondary text-sm',
+  caption: 'ui-kicker text-xs font-semibold uppercase tracking-[0.12em]',
+  error: 'ui-error text-sm',
+  code: 'ui-code text-sm font-mono'
+};
+
+const variantTagMap: Record<LabelVariant, ElementType> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h3',
+  body: 'p',
+  body2: 'p',
+  caption: 'p',
+  error: 'p',
+  code: 'code'
+};
+
+export function Label<T extends ElementType = 'p'>({
+  variant = 'body',
+  as,
+  className = '',
+  children
+}: Readonly<LabelProps<T>>) {
+  const Component = as ?? variantTagMap[variant];
+  const classes = `${variantClassMap[variant]} ${className}`.trim();
+
+  return <Component className={classes}>{children}</Component>;
+}