Split codebase (#455)

apps/yaak-client/components/core/Label.tsx

@@ -0,0 +1,49 @@
+import classNames from "classnames";
+import type { HTMLAttributes, ReactNode } from "react";
+import { IconTooltip } from "./IconTooltip";
+
+export function Label({
+  htmlFor,
+  className,
+  children,
+  visuallyHidden,
+  tags = [],
+  required,
+  rightSlot,
+  help,
+  ...props
+}: HTMLAttributes<HTMLLabelElement> & {
+  htmlFor: string | null;
+  required?: boolean;
+  tags?: string[];
+  visuallyHidden?: boolean;
+  rightSlot?: ReactNode;
+  children: ReactNode;
+  help?: ReactNode;
+}) {
+  return (
+    <label
+      htmlFor={htmlFor ?? undefined}
+      className={classNames(
+        className,
+        visuallyHidden && "sr-only",
+        "flex-shrink-0 text-sm",
+        "text-text-subtle whitespace-nowrap flex items-center gap-1 mb-0.5",
+      )}
+      {...props}
+    >
+      <span>
+        {children}
+        {required === true && <span className="text-text-subtlest">*</span>}
+      </span>
+      {tags.map((tag, i) => (
+        // oxlint-disable-next-line react/no-array-index-key
+        <span key={i} className="text-xs text-text-subtlest">
+          ({tag})
+        </span>
+      ))}
+      {help && <IconTooltip tabIndex={-1} content={help} />}
+      {rightSlot && <div className="ml-auto">{rightSlot}</div>}
+    </label>
+  );
+}