@enonic/ui 0.41.1 → 0.42.0

package/README.md

@@ -54,47 +54,45 @@ yarn add @enonic/ui preact @radix-ui/react-slot focus-trap-react
 
 ## Usage
 
-### Import Components
-
-```tsx
-import { Button, Input } from '@enonic/ui';
-
-function App() {
-  return (
-    <div>
-      <Button variant='primary' size='md'>
-        Click Me
-      </Button>
-      <Input placeholder='Enter text...' />
-    </div>
-  );
-}
-```
-
 ### Styles
 
+> **Important**: Components render unstyled without CSS setup. Choose one of the paths below before importing components.
+
 #### Tailwind CSS
 
-If your project uses Tailwind CSS, you can import the styles directly from the library:
+If your project uses Tailwind CSS, import the preset in your main CSS file:
 
 ```css
-/* Import Tailwind CSS */
 @import 'tailwindcss';
-/* Required by some components that use animations */
 @import 'tw-animate-css';
-
-/* Preset styles (includes tokens, base, and utilities) */
 @import '@enonic/ui/preset.css';
 ```
 
 #### CSS Only
 
-If you only need the pre-built CSS styles:
+If your project does not use Tailwind CSS, import the pre-built stylesheet instead:
 
 ```css
 @import '@enonic/ui/style.css';
 ```
 
+### Import Components
+
+```tsx
+import { Button, Input } from '@enonic/ui';
+
+function App() {
+  return (
+    <div>
+      <Button variant='primary' size='md'>
+        Click Me
+      </Button>
+      <Input placeholder='Enter text...' />
+    </div>
+  );
+}
+```
+
 ## Peer Dependencies
 
 This library requires one of the following frameworks:

package/dist/types/components/dialog/dialog.d.ts

@@ -60,7 +60,7 @@ export type DialogFooterProps = {
 export type DialogDefaultHeaderProps = {
     title: string;
     titleId?: string;
-    description?: string;
+    description?: ReactNode;
     descriptionId?: string;
     withClose?: boolean;
 } & ComponentPropsWithoutRef<typeof DialogHeader>;
@@ -68,7 +68,7 @@ export type DialogStepHeaderProps = {
     step: string;
     title: string;
     titleId?: string;
-    description?: string;
+    description?: ReactNode;
     descriptionId?: string;
     helper?: string;
     withClose?: boolean;

package/dist/types/components/input/input.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
 export type InputProps = {
     label?: string;
-    description?: string;
+    description?: ReactNode;
     error?: string;
     startAddon?: string | ReactElement;
     endAddon?: string | ReactElement;

package/dist/types/components/list-item/list-item.d.ts

@@ -15,7 +15,7 @@ export type ListItemContentProps = {
 export type ListItemDefaultContentProps = {
     className?: string;
     label?: string;
-    description?: string;
+    description?: ReactNode;
     metadata?: string;
     icon?: ReactNode;
 };

package/dist/types/components/textarea/textarea.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export type TextAreaProps = {
     label?: string;
-    description?: string;
+    description?: ReactNode;
     error?: string;
     disabled?: boolean;
     readOnly?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enonic/ui",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "description": "Enonic UI Component Library",
   "author": "Enonic",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "typescript",
     "tailwind"
   ],
+  "style": "dist/styles/style.css",
   "type": "module",
   "main": "dist/enonic-ui.cjs",
   "module": "dist/enonic-ui.es.js",
@@ -59,7 +60,8 @@
     "preact": ">=10.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-virtuoso": "^4.0.0"
+    "react-virtuoso": "^4.0.0",
+    "tw-animate-css": "^1.0.0"
   },
   "peerDependenciesMeta": {
     "preact": {
@@ -73,6 +75,9 @@
     },
     "react-virtuoso": {
       "optional": true
+    },
+    "tw-animate-css": {
+      "optional": true
     }
   },
   "devDependencies": {