@fvc/label 1.0.1 → 1.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997

package/README.md

@@ -0,0 +1,163 @@
+# @fvc/label
+
+`@fvc/label` provides a form label primitive for FE-VIS applications. It handles required indicators, disabled styling, inline error display, and rendering as any HTML element — covering the full range of label use cases in a form system without requiring additional wrapper components.
+
+## Installation
+
+```bash
+bun add @fvc/label
+```
+
+## Peer Dependencies
+
+```bash
+bun add react antd
+```
+
+## Import
+
+```tsx
+import { Label } from '@fvc/label';
+```
+
+## Quick Start
+
+```tsx
+import { Label } from '@fvc/label';
+
+export function EmailField() {
+  return (
+    <>
+      <Label htmlFor="email" required>
+        Email address
+      </Label>
+      <input id="email" type="email" />
+    </>
+  );
+}
+```
+
+## States
+
+| State | Prop | Visual effect |
+| --- | --- | --- |
+| Default | — | Black text (`--black-1000`), 14px Roboto medium |
+| Required | `required` | Appends `*` after the label text |
+| Disabled | `disabled` | Muted colour (`--blue-gray-300`), `not-allowed` cursor |
+| Error | `error="message"` | Replaces `children` with the error string; red text (`--warning-text-color-800`) |
+
+## Common Usage
+
+### Required field
+
+```tsx
+<Label htmlFor="name" required>Full name</Label>
+```
+
+### Disabled
+
+```tsx
+<Label htmlFor="name" disabled>Full name</Label>
+```
+
+### Error state
+
+`error` replaces `children`. The same element serves as both the label and the inline error message — no separate error component needed.
+
+```tsx
+<Label htmlFor="email" error="Enter a valid email address" />
+```
+
+### Combined required and error
+
+```tsx
+<Label htmlFor="email" required error="This field is required" />
+```
+
+### Custom element type
+
+When the label is not semantically a `<label>` element, pass `elementType`. The `htmlFor` attribute is omitted automatically when `elementType` is not `'label'`.
+
+```tsx
+<Label elementType="span">Section heading</Label>
+<Label elementType="p">Description text</Label>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | — | Label text. Replaced by `error` when `error` is provided. |
+| `htmlFor` | `string` | — | Native `htmlFor` attribute. Only applied when `elementType` is `'label'`. |
+| `for` | `string` | — | Alias for `htmlFor`. |
+| `required` | `boolean` | `false` | Appends a `*` indicator after the content. |
+| `disabled` | `boolean` | `false` | Applies disabled styling. |
+| `error` | `string` | — | Replaces `children` and applies error colour when set. |
+| `elementType` | `ElementType` | `'label'` | Renders the label as any HTML or React element. |
+| `testId` | `string` | — | Maps to `data-testid`. |
+| `className` | `string` | — | Additional CSS class names. |
+
+All standard `HTMLAttributes<HTMLElement>` are accepted and forwarded to the root element.
+
+## Consumer Example
+
+```tsx
+import { Label } from '@fvc/label';
+import { Input } from 'antd';
+import { ReactNode } from 'react';
+
+interface FormFieldProps {
+  id: string;
+  label: string;
+  required?: boolean;
+  disabled?: boolean;
+  error?: string;
+  children: ReactNode;
+}
+
+export function FormField({
+  id,
+  label,
+  required,
+  disabled,
+  error,
+  children,
+}: FormFieldProps) {
+  return (
+    <div>
+      <Label htmlFor={id} required={required} disabled={disabled} error={error}>
+        {label}
+      </Label>
+      {children}
+    </div>
+  );
+}
+```
+
+## Testing
+
+Use `testId` when a stable test selector is needed.
+
+```tsx
+<Label testId="email-label" htmlFor="email">Email address</Label>
+```
+
+```tsx
+screen.getByTestId('email-label');
+```
+
+## CSS Classes
+
+| Class | Applied when |
+| --- | --- |
+| `.fvc-label` | Always — base class |
+| `.fvc-label-error` | `error` prop is a non-empty string |
+| `.fvc-label-disabled` | `disabled` is `true` |
+
+## Development
+
+```bash
+bun run lint
+bun run type-check
+bun run test
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fvc/label",
-  "version": "1.0.1",
+  "version": "1.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
   "main": "./dist/lib/index.js",
   "types": "./dist/lib/label/src/index.d.ts",
   "files": [
@@ -29,5 +29,17 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "antd": "^5.0.0"
-  }
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "fvc",
+    "fe-vis-core",
+    "ui",
+    "label",
+    "form",
+    "form-label",
+    "design-system",
+    "antd"
+  ]
 }