feat(component): Allow Label as self-closing tag, resolves #173

src/lib/components/FormControls/Label.spec.tsx

@@ -1,7 +1,6 @@
 import { render } from '@testing-library/react';
 import { HiGlobe, HiLockClosed } from 'react-icons/hi';
 import { describe, expect, it } from 'vitest';
-
 import { Button } from '../Button';
 import { Checkbox } from './Checkbox';
 import { FileInput } from './FileInput';
@@ -13,14 +12,8 @@ import { TextInput } from './TextInput';
 import { ToggleSwitch } from './ToggleSwitch';
 
 describe.concurrent('Components / Form controls / Label', () => {
-  it('should render', () => {
-    render(<Label>Hello</Label>);
-  });
-
   describe('A11y', () => {
     it('should provide accessible name to any form control associated by `htmlFor`', () => {
-      const { getByLabelText } = render(<TestForm />);
-
       const inputLabels = [
         'Your email',
         'Your password',
@@ -31,9 +24,23 @@ describe.concurrent('Components / Form controls / Label', () => {
         'Your message',
       ];
 
+      const { getByLabelText } = render(<TestForm />);
+
       inputLabels.forEach((label) => expect(getByLabelText(label)).toHaveAccessibleName(label));
     });
   });
+
+  describe('Rendering', () => {
+    it('should render', () => {
+      render(<Label>Hello</Label>);
+    });
+
+    describe('`value=".."`', () => {
+      it('should render', () => {
+        render(<Label value="Hello" />);
+      });
+    });
+  });
 });
 
 const TestForm = (): JSX.Element => (

src/lib/components/FormControls/Label.tsx

@@ -1,20 +1,23 @@
-import type { ComponentProps, FC } from 'react';
 import classNames from 'classnames';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
 type Color = 'gray' | 'green' | 'red';
 
-export type LabelProps = ComponentProps<'label'> & {
+export interface LabelProps extends PropsWithChildren<ComponentProps<'label'>> {
   color?: Color;
-};
+  value?: string;
+}
 
 const colorClasses: Record<Color, string> = {
   gray: 'text-gray-900 dark:text-gray-300',
   green: 'text-green-700 dark:text-green-500',
   red: 'text-red-700 dark:text-red-500',
 };
 
-export const Label: FC<LabelProps> = ({ children, color = 'gray', className, ...props }) => (
-  <label className={classNames('text-sm font-medium', colorClasses[color], className)} {...props}>
-    {children}
-  </label>
-);
+export const Label: FC<LabelProps> = ({ children, color = 'gray', className, value, ...props }): JSX.Element => {
+  return (
+    <label className={classNames('text-sm font-medium', colorClasses[color], className)} {...props}>
+      {value ?? children ?? ''}
+    </label>
+  );
+};