@undefine-ui/design-system 3.6.2 → 3.7.1

package/README.md

@@ -62,6 +62,7 @@ const ThemeSwitcher = () => {
 ```tsx
 import {
   CopyButton,
+  CustomFormLabel,
   Field,
   Form,
   Icon,
@@ -813,6 +814,65 @@ import { OTPInput, Field } from '@undefine-ui/design-system';
 
 The `Field.OTP` component automatically integrates with React Hook Form, providing validation and error handling out of the box.
 
+### FormLabel
+
+A custom form label component with support for optional text, tooltips, and custom icons. Perfect for creating consistent form field labels across your application.
+
+**Usage:**
+
+```tsx
+import { CustomFormLabel } from '@undefine-ui/design-system';
+
+// Basic label
+<CustomFormLabel label="Email Address" />
+
+// Optional field label
+<CustomFormLabel label="Phone Number" optional />
+
+// With tooltip
+<CustomFormLabel
+  label="API Key"
+  tooltip="Your API key can be found in the developer settings."
+/>
+
+// Optional with tooltip
+<CustomFormLabel
+  label="Company Name"
+  optional
+  tooltip="Enter your company name if applicable."
+/>
+
+// With custom icon
+<CustomFormLabel
+  label="Password"
+  tooltip="Password must be at least 8 characters long."
+  icon={<Icon icon="HelpCircle" sx={{ width: 16, height: 16, color: 'primary.main' }} />}
+/>
+
+// Complete form example
+<Box>
+  <CustomFormLabel label="Full Name" />
+  <TextField fullWidth placeholder="Enter your full name" size="small" />
+</Box>
+```
+
+**Props:**
+
+- `label` - Label text to display (required)
+- `optional` - Show "(Optional)" text after label (default: `false`)
+- `tooltip` - Tooltip text shown on hover of info icon
+- `icon` - Custom icon for tooltip (default: `InfoCircle` icon)
+- `sx` - MUI sx prop for styling
+- All MUI `FormLabelProps` are supported (except `children`)
+
+**Features:**
+
+- **Optional indicator:** Shows "(Optional)" text for non-required fields
+- **Tooltip support:** Info icon with tooltip for additional context
+- **Custom icons:** Replace default info icon with custom icons
+- **Flexible styling:** Supports all MUI FormLabel props and sx styling
+- **Theme integration:** Uses theme variables for consistent styling
+
 ### Dialog
 
 Custom dialog components with close button and feedback variations. Includes a base `CustomDialog` with a close button positioned on the right, and a `FeedbackDialog` for success, error, and confirmation states.