asterui 0.12.32 → 0.12.35

package/README.md

@@ -2,16 +2,48 @@
 
 A comprehensive React component library built with [DaisyUI](https://daisyui.com) and [Tailwind CSS](https://tailwindcss.com).
 
-## Prerequisites
+## Demo
 
-AsterUI requires Tailwind CSS v4 and DaisyUI v5 to be configured in your project.
+View the documentation at: [https://asterui.com](https://asterui.com)
 
-Install Tailwind and DaisyUI:
+## Quick Start
+
+The fastest way to get started is with `create-asterui`, which sets up a new project with Vite, Tailwind CSS v4, DaisyUI v5, and AsterUI pre-configured:
+
+```bash
+npm create asterui@latest
+# or
+pnpm create asterui@latest
+# or
+yarn create asterui
+```
+
+The CLI will guide you through interactive prompts to configure:
+- **Language** - TypeScript (recommended) or JavaScript
+- **Themes** - Light/Dark, Business/Corporate, all themes, or custom selection
+- **Package manager** - npm, pnpm, or yarn (auto-detected)
+- **Optional components** - Chart, QRCode, VirtualList (adds required peer dependencies)
+
+Then start the dev server:
 
 ```bash
+cd my-app
+npm run dev
+```
+
+## Manual Installation
+
+To add AsterUI to an existing project, you'll need Tailwind CSS v4 and DaisyUI v5.
+
+### 1. Install dependencies
+
+```bash
+npm install asterui
 npm install -D tailwindcss @tailwindcss/vite daisyui
 ```
 
+### 2. Configure Vite
+
 Add the Tailwind plugin to your `vite.config.ts`:
 
 ```ts
@@ -24,7 +56,9 @@ export default defineConfig({
 })
 ```
 
-Configure your CSS file (e.g., `src/index.css`):
+### 3. Configure CSS
+
+Update your CSS file (e.g., `src/index.css`):
 
 ```css
 @import "tailwindcss";
@@ -34,16 +68,6 @@ Configure your CSS file (e.g., `src/index.css`):
 
 The `@source` directive tells Tailwind to scan the AsterUI package for classes to include in your build.
 
-## Installation
-
-```bash
-npm install asterui
-# or
-pnpm add asterui
-# or
-yarn add asterui
-```
-
 ## Usage
 
 ```tsx
@@ -53,46 +77,46 @@ const { Link, Paragraph } = Typography
 
 export default function App() {
   const handleSubmit = (values: { email: string; password: string; remember: boolean }) => {
-      Modal.success({
-        title: 'Login Successful',
-        content: <pre className="text-left">{JSON.stringify(values, null, 2)}</pre>,
-      })
+    Modal.success({
+      title: 'Login Successful',
+      content: <pre className="text-left">{JSON.stringify(values, null, 2)}</pre>,
+    })
   }
 
   return (
     <Flex justify="center" align="center" minHeight="screen" className="bg-base-200 p-4">
       <Card title="Sign In" className="w-full max-w-md">
         <Form onFinish={handleSubmit} initialValues={{ remember: false }}>
-          <Form.Item name="email" label="Email" rules={[{ required: true }, { type: 'email' }]}>
-            <Input placeholder="you@example.com" />
+        <Form.Item name="email" label="Email" rules={[{ required: true }, { type: 'email' }]}>
+          <Input placeholder="you@example.com" />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="Password"
+          rules={[
+            { required: true },
+            { min: 8, message: 'Password must be at least 8 characters' },
+            { pattern: /[A-Z]/, message: 'Must contain an uppercase letter' },
+            { pattern: /[a-z]/, message: 'Must contain a lowercase letter' },
+            { pattern: /[0-9]/, message: 'Must contain a number' },
+            { pattern: /[!@#$%^&*.?]/, message: 'Must contain a special character' },
+          ]}
+        >
+          <Input type="password" placeholder="Enter your password" />
+        </Form.Item>
+        <Space justify="between" align="center" className="mb-4">
+          <Form.Item name="remember" valuePropName="checked" inline>
+            <Checkbox>Remember me</Checkbox>
           </Form.Item>
-          <Form.Item
-            name="password"
-            label="Password"
-            rules={[
-              { required: true },
-              { min: 8, message: 'Password must be at least 8 characters' },
-              { pattern: /[A-Z]/, message: 'Must contain an uppercase letter' },
-              { pattern: /[a-z]/, message: 'Must contain a lowercase letter' },
-              { pattern: /[0-9]/, message: 'Must contain a number' },
-              { pattern: /[!@#$%^&*.?]/, message: 'Must contain a special character' },
-            ]}
-          >
-            <Input type="password" placeholder="Enter your password" />
-          </Form.Item>
-          <Space justify="between" align="center" className="mb-4">
-            <Form.Item name="remember" valuePropName="checked" inline>
-              <Checkbox>Remember me</Checkbox>
-            </Form.Item>
-            <Link size="sm">Forgot password?</Link>
-          </Space>
-          <Button color="primary" htmlType="submit" shape="block">
-            Sign In
-          </Button>
-          <Divider>or</Divider>
-          <Paragraph align="center" size="sm">
-            Don't have an account? <Link>Sign up</Link>
-          </Paragraph>
+          <Link size="sm">Forgot password?</Link>
+        </Space>
+        <Button color="primary" htmlType="submit" shape="block">
+          Sign In
+        </Button>
+        <Divider>or</Divider>
+        <Paragraph align="center" size="sm">
+          Don't have an account? <Link>Sign up</Link>
+        </Paragraph>
         </Form>
       </Card>
     </Flex>
@@ -104,6 +128,24 @@ export default function App() {
 
 90+ components including forms, data display, navigation, feedback, and layout. See the full list at [asterui.com/components](https://asterui.com/components).
 
+## Optional Components
+
+Some components require additional peer dependencies and use separate imports:
+
+```bash
+# For Chart component
+npm install apexcharts
+import { Chart } from 'asterui/chart'
+
+# For QRCode component
+npm install qrcode
+import { QRCode } from 'asterui/qrcode'
+
+# For VirtualList component
+npm install @tanstack/react-virtual
+import { VirtualList } from 'asterui/virtuallist'
+```
+
 ## Requirements
 
 - React 18 or 19

package/dist/components/Drawer.d.ts

@@ -1,13 +1,19 @@
 import { default as React } from 'react';
 export type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
 export type DrawerSize = 'default' | 'large' | number;
-export interface DrawerProps {
+export interface DrawerPushConfig {
+    /** Distance to push parent drawer (default: 180) */
+    distance?: number;
+}
+export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Drawer content */
     children: React.ReactNode;
     /** Whether the drawer is visible */
     open?: boolean;
     /** Callback when drawer is closed */
-    onClose?: () => void;
+    onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;
+    /** Callback after open/close animation completes */
+    afterOpenChange?: (open: boolean) => void;
     /** Drawer title */
     title?: React.ReactNode;
     /** Direction drawer slides from */
@@ -36,16 +42,40 @@ export interface DrawerProps {
     rootClassName?: string;
     /** Style for drawer panel */
     style?: React.CSSProperties;
+    /** Style for drawer header */
+    headerStyle?: React.CSSProperties;
+    /** Style for drawer body/content area */
+    bodyStyle?: React.CSSProperties;
+    /** Style for drawer footer */
+    footerStyle?: React.CSSProperties;
+    /** Style for drawer wrapper (includes mask) */
+    rootStyle?: React.CSSProperties;
+    /** Style for mask/backdrop */
+    maskStyle?: React.CSSProperties;
     /** z-index of drawer */
     zIndex?: number;
     /** Destroy content when closed */
     destroyOnClose?: boolean;
+    /** Pre-render drawer content (keep in DOM even when closed) */
+    forceRender?: boolean;
     /** Where to place initial focus */
     initialFocus?: 'close' | 'content';
+    /** Show loading skeleton */
+    loading?: boolean;
+    /** Custom container for portal (false to disable portal) */
+    getContainer?: HTMLElement | (() => HTMLElement) | false;
+    /** Nested drawer push behavior */
+    push?: boolean | DrawerPushConfig;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+export interface DrawerRef {
+    /** The drawer panel element */
+    nativeElement: HTMLDivElement | null;
 }
 /**
  * Drawer - A panel that slides in from the edge of the screen.
  * Use for forms, details, or task panels.
- * For responsive sidebar navigation, use SidebarDrawer instead.
+ * For responsive sidebar navigation, use ResponsiveDrawer instead.
  */
-export declare function Drawer({ children, open, onClose, title, placement, size, width, height, closable, mask, maskClosable, keyboard, footer, extra, className, rootClassName, style, zIndex, destroyOnClose, initialFocus, }: DrawerProps): React.ReactPortal | null;
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerRef>>;