migration wip

components/forms/FormLabel.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+/**
+ * FormLabel Component
+ * Consistent label styling with required indicator and help text tooltip
+ */
+
+export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  htmlFor?: string;
+  required?: boolean;
+  helpText?: string;
+  optionalText?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const FormLabel: React.FC<FormLabelProps> = ({
+  htmlFor,
+  required = false,
+  helpText,
+  optionalText = '(optional)',
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={cn(
+        'block text-sm font-semibold text-text-primary mb-2',
+        'font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className
+      )}
+      {...props}
+    >
+      <span className="inline-flex items-center gap-1">
+        {children}
+        {required && (
+          <span className="text-danger" aria-label="required">
+            *
+          </span>
+        )}
+        {!required && optionalText && (
+          <span className="text-xs text-text-secondary font-normal">
+            {optionalText}
+          </span>
+        )}
+      </span>
+      {helpText && (
+        <span className="ml-2 text-xs text-text-secondary font-normal">
+          {helpText}
+        </span>
+      )}
+    </label>
+  );
+};
+
+FormLabel.displayName = 'FormLabel';
+
+export default FormLabel;