@undefine-ui/design-system 2.14.2 → 2.15.0

package/README.md

@@ -291,6 +291,78 @@ 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.
 
+### Empty Content
+
+A flexible empty state component for displaying placeholder content when data is unavailable. Perfect for empty lists, search results, or any state where content hasn't been loaded yet.
+
+**Usage:**
+
+```tsx
+import { EmptyContent } from '@undefine-ui/design-system';
+
+// Basic usage
+<EmptyContent title="No data" />
+
+// With description
+<EmptyContent
+  title="No results found"
+  description="Try adjusting your search or filter to find what you're looking for."
+/>
+
+// With image
+<EmptyContent
+  title="No notifications"
+  description="You're all caught up!"
+  imgUrl="/assets/icons/empty/ic-notification.svg"
+/>
+
+// Filled variant (with background)
+<EmptyContent
+  filled
+  title="No items in cart"
+  description="Add items to your cart to see them here."
+/>
+
+// With action button
+<EmptyContent
+  title="No projects yet"
+  description="Create your first project to get started."
+  action={
+    <Button variant="contained">Create Project</Button>
+  }
+/>
+
+// Custom styling with slotProps
+<EmptyContent
+  title="Custom Styled"
+  description="Customize title and description styles."
+  slotProps={{
+    title: { color: 'primary.main', fontWeight: 700 },
+    description: { color: 'text.secondary', maxWidth: 300 }
+  }}
+/>
+```
+
+**Props:**
+
+- `title` - Title text to display (default: `'No data'`)
+- `description` - Description text below the title
+- `imgUrl` - URL for an optional image to display
+- `filled` - Show filled background variant with border (default: `false`)
+- `action` - Optional action element (button, link, etc.)
+- `slotProps` - Custom styles for `img`, `title`, and `description` slots
+- `sx` - MUI sx prop for container styling
+- All `StackProps` from MUI are supported
+
+**Features:**
+
+- **Flexible layout:** Centers content vertically and horizontally
+- **Filled variant:** Adds background color and dashed border
+- **Image support:** Display custom illustrations or icons
+- **Action slot:** Add buttons or links for user interaction
+- **Customizable:** Style individual elements via slotProps
+- **Theme integration:** Uses theme variables for consistent styling
+
 ### Logo assets
 
 The package exports two Logo components:
@@ -351,7 +423,7 @@ Everything is re-exported from `src/index.ts`. Key groups:
 
 | Group      | Exports                                                                                                                                                                      |
 | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components | `CopyButton`, `HookForm` helpers (`Form`, `Field`, `RHFSwitch`, etc.), `Icon`, `Image`, `Logo`, `LoadingScreen`, `OTPInput`, `Table`, `Upload`                               |
+| Components | `CopyButton`, `EmptyContent`, `HookForm` helpers (`Form`, `Field`, `RHFSwitch`, etc.), `Icon`, `Image`, `Logo`, `LoadingScreen`, `OTPInput`, `Table`, `Upload`               |
 | Hooks      | `useBoolean`, `useCopyToClipboard`, `useEventListener`, `useLocalStorage`, `useResponsive`, `useSettings`, `useSetState`, `useScrollOffsetTop`, `usePopover`, `useCountdown` |
 | Contexts   | `SettingsProvider`, `SettingsContext`, `defaultSettings`, `SettingsValueProps`                                                                                               |
 | Theme      | `ThemeProvider`, `createTheme`, `colorSchemes`, `components`, `palette`, `radius`, `shadows`, `customSpacing`, utilities such as `varAlpha`, `bgGradient`, `hideScrollX/Y`   |