@undefine-ui/design-system 2.15.0 → 3.0.0

package/README.md

@@ -77,17 +77,19 @@ Storybook (`pnpm dev:storybook`) documents each component and token surface.
 
 ### Icon library
 
-The package includes a comprehensive icon library with 26 SVG icons organized by category.
+The package includes a comprehensive icon library with 35 SVG icons organized by category.
 
 **Available icons:**
 
-- **Navigation:** NavArrowLeft, NavArrowRight, NavArrowDown, LongArrowUpLeftSolid
-- **User:** UserFill, UserOutline
+- **Navigation:** NavArrowLeft, NavArrowRight, NavArrowDown, NavArrowDownSolid, LongArrowUpLeftSolid
+- **User:** UserSolid, User, Building, Bank
 - **Form Controls:** CheckboxDefault, CheckboxSelect, CheckboxIndeterminate, RadioDefault, RadioSelect
-- **Actions:** Search, Copy, Trash, XMark, XMarkSolid, CloudUpload, Settings
-- **Feedback:** InfoCircleFill, InfoCircleOutline, ClipboardCheck, Loader, BellNotification
+- **Actions:** Search, Copy, Trash, XMark, XMarkSolid, CloudUpload, Download, Settings, Plus, PlusSquare, Attachment
+- **Feedback:** InfoCircleSolid, InfoCircle, CheckCircleSolid, HelpCircle, ClipboardCheck, Loader, BellNotification
 - **Visibility:** Eye, EyeClosed
-- **System:** KeyCommand
+- **Date & Time:** Calendar, Clock
+- **Data:** SortUp, SortDown
+- **System:** KeyCommand, Circle
 
 **Usage:**
 
@@ -98,7 +100,7 @@ import { Icon } from '@undefine-ui/design-system';
 <Icon icon="Search" sx={{ width: 24, height: 24 }} />
 
 // With custom color
-<Icon icon="InfoCircleFill" sx={{ width: 32, height: 32, color: 'primary.main' }} />
+<Icon icon="InfoCircleSolid" sx={{ width: 32, height: 32, color: 'primary.main' }} />
 
 // Different sizes
 <Icon icon="Loader" sx={{ width: 16, height: 16 }} />
@@ -230,6 +232,60 @@ import { Image } from '@undefine-ui/design-system';
 - Use `srcSet` with appropriate sizes for optimal image delivery
 - Set `observerMargin="400px"` to preload images slightly before viewport
 
+### Date Pickers (React Hook Form)
+
+Form-ready date picker components integrated with React Hook Form. Includes `RHFDatePicker`, `RHFTimePicker`, and `RHFDateTimePicker` for seamless form state management.
+
+**Usage:**
+
+```tsx
+import { Form, RHFDatePicker, RHFTimePicker, RHFDateTimePicker } from '@undefine-ui/design-system';
+import { useForm } from 'react-hook-form';
+
+const MyForm = () => {
+  const methods = useForm({
+    defaultValues: {
+      birthDate: null,
+      meetingTime: null,
+      eventStart: null
+    }
+  });
+
+  return (
+    <Form methods={methods} onSubmit={(data) => console.log(data)}>
+      {/* Date Picker */}
+      <RHFDatePicker name="birthDate" label="Birth Date" />
+
+      {/* Time Picker */}
+      <RHFTimePicker name="meetingTime" label="Meeting Time" />
+
+      {/* DateTime Picker */}
+      <RHFDateTimePicker name="eventStart" label="Event Start" />
+
+      {/* Clearable variant */}
+      <RHFDatePicker name="deadline" label="Deadline" clearable />
+    </Form>
+  );
+};
+```
+
+**Props (shared by all variants):**
+
+- `name` - Form field name for react-hook-form (required)
+- `label` - Label for the picker input
+- `helperText` - Helper text displayed below the input
+- `clearable` - Enable clear button (default: `false`)
+- `disabled` - Disable the picker (default: `false`)
+- All MUI X DatePicker/TimePicker/DateTimePicker props are supported
+
+**Features:**
+
+- **Form integration:** Automatically syncs with react-hook-form state
+- **Validation:** Displays validation errors from react-hook-form
+- **Clearable:** Optional clear button to reset the value
+- **Theme-styled:** Uses your theme's TextField styling
+- **Click-to-open:** Opens picker on text field click
+
 ### OTP Input
 
 A one-time password input component with keyboard navigation, paste support, and validation. Perfect for email/SMS verification, PIN codes, and security codes.