asterui 0.11.0 → 0.12.1

package/README.md

@@ -102,109 +102,7 @@ export default function App() {
 
 ## Components
 
-### General
-- **Typography** - Text, Title, Paragraph, and Link components with consistent styling
-
-### Actions
-- **Button** - Buttons with multiple types, sizes, and variants
-- **Dropdown** - Composable dropdown menu with trigger, items, and dividers
-- **FloatButton** - Floating action button with BackTop variant
-- **ThemeController** - Theme switcher with swap and dropdown modes
-
-### Data Entry
-- **Autocomplete** - Search and select with keyboard navigation and filtering
-- **Cascader** - Cascade selection for hierarchical data
-- **Checkbox** - Checkboxes with sizes, colors, and indeterminate state
-- **ColorPicker** - Color selection with presets and custom colors
-- **DatePicker** - Interactive calendar date picker with custom formatting
-- **Fieldset** - Fieldset container with legend
-- **FileInput** - File input with sizes and colors
-- **Form** - Form component with React Hook Form integration and validation
-- **Input** - Text inputs with types, sizes, colors, and input masking
-- **InputNumber** - Numeric input with increment/decrement controls
-- **Label** - Form labels with required indicator and floating labels
-- **Mention** - Input with @mention support for tagging users
-- **OTPInput** - One-time password input with auto-focus
-- **Radio** - Radio buttons with group support
-- **Range** - Range slider with min, max, and step support
-- **Rating** - Star rating component
-- **Segmented** - Inline toggle for switching between mutually exclusive options
-- **Select** - Select dropdown with sizes and colors
-- **Textarea** - Multiline text input
-- **TimePicker** - Time input with hour and minute selection
-- **Toggle** - Toggle switches with sizes and colors
-- **Transfer** - Double-column transfer for moving items between lists
-- **TreeSelect** - Tree selection dropdown for hierarchical data
-- **Upload** - File upload with drag and drop support
-
-### Data Display
-- **Avatar** - User avatars with sizes, shapes, and group support
-- **Badge** - Notification badges, status indicators, and ribbons
-- **Card** - Composable card component with body, title, actions, and figure
-- **Carousel** - Image carousel with navigation and indicators
-- **Chart** - Data visualization with ApexCharts and theme integration
-- **Chat** - Chat message bubbles with avatars and timestamps
-- **Collapse** - Collapsible content panels
-- **Descriptions** - Display multiple read-only fields in groups
-- **Empty** - Empty state placeholder with custom images and actions
-- **Image** - Image component with fallback and preview support
-- **List** - Vertical list layout with customizable rows
-- **Pagination** - Page navigation with multiple sizes
-- **QRCode** - QR code generator
-- **Stats** - Statistics display with figures and actions
-- **Steps** - Step progress indicator
-- **Table** - Feature-rich data table with sorting and pagination
-- **Tag** - Categorization labels with colors and close button
-- **Timeline** - Timeline component for displaying chronological events
-- **Tree** - Hierarchical tree view with expand/collapse and selection
-
-### Layout
-- **Affix** - Make elements stick to viewport when scrolling
-- **Divider** - Horizontal and vertical dividers with optional text
-- **Drawer** - Sidebar drawer with multiple placements
-- **Footer** - Footer component with title sections
-- **Grid** - Flexible grid system with Row and Col components
-- **Hero** - Hero section with overlay and content wrapping
-- **Indicator** - Position indicators on elements
-- **Join** - Join multiple elements together seamlessly
-- **Layout** - Page layout with Header, Sider, Content, and Footer
-- **Masonry** - Responsive masonry grid layout
-- **Space** - Layout component for consistent spacing between elements
-- **Splitter** - Resizable split panes for adjustable layouts
-
-### Responsive
-- **Show/Hide** - Conditionally render content based on breakpoint
-- **useBreakpoint** - Hook for detecting current breakpoint and screen width
-
-### Navigation
-- **Breadcrumb** - Breadcrumb navigation trail
-- **Menu** - Menu with vertical, horizontal, and inline modes
-- **Navbar** - Navigation bar with start, center, and end sections
-- **Tabs** - Tab navigation with multiple variants
-
-### Feedback
-- **Alert** - Alert messages with multiple types and dismissible option
-- **Loading** - Loading spinners with sizes and overlay support
-- **Modal** - Modal dialogs with imperative API
-- **Notification** - Toast notifications with auto-dismiss and stacking
-- **Popconfirm** - Confirmation popover for actions
-- **Popover** - Floating content triggered by hover or click
-- **Progress** - Progress bars with colors and indeterminate state
-- **RadialProgress** - Circular progress indicator
-- **Result** - Result pages for operation outcomes
-- **Skeleton** - Loading placeholder with animated shimmer effect
-- **Tooltip** - Tooltips with multiple placements
-- **Tour** - Guided tour with spotlight and step navigation
-
-### Mockup
-- **Browser** - Browser window mockup with URL bar
-- **Code** - Terminal-style code display with line highlighting
-- **Phone** - iPhone-style phone frame mockup
-- **Window** - OS-style window frame mockup
-
-## Demo
-
-View live examples and documentation at [https://asterui.com](https://asterui.com)
+90+ components including forms, data display, navigation, feedback, and layout. See the full list at [asterui.com/components](https://asterui.com/components).
 
 ## Requirements
 

package/dist/components/Anchor.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+export interface AnchorLinkItem {
+    /** Target element id (without #) */
+    href: string;
+    /** Link title */
+    title: React.ReactNode;
+    /** Nested links */
+    children?: AnchorLinkItem[];
+}
+export interface AnchorProps {
+    /** Anchor links (alternative to Anchor.Link children) */
+    items?: AnchorLinkItem[];
+    /** Layout direction */
+    direction?: 'horizontal' | 'vertical';
+    /** Offset from top when calculating scroll position */
+    offsetTop?: number;
+    /** Target scroll container (default: window) */
+    getContainer?: () => HTMLElement | Window;
+    /** Callback when active link changes */
+    onChange?: (activeLink: string) => void;
+    /** Callback when link is clicked */
+    onClick?: (e: React.MouseEvent, link: {
+        href: string;
+        title: React.ReactNode;
+    }) => void;
+    /** Currently active link (controlled) */
+    activeLink?: string;
+    /** Custom class name */
+    className?: string;
+    /** Anchor.Link children */
+    children?: React.ReactNode;
+}
+export interface AnchorLinkProps {
+    /** Target element id (without #) */
+    href: string;
+    /** Link title */
+    title: React.ReactNode;
+    /** Nested links */
+    children?: React.ReactNode;
+    /** Custom class name */
+    className?: string;
+}
+export declare const Anchor: React.FC<AnchorProps> & {
+    Link: React.FC<AnchorLinkProps>;
+};

package/dist/components/Diff.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface DiffProps {
+    /** Left side content (revealed when dragging) */
+    left: React.ReactNode;
+    /** Right side content (hidden when dragging) */
+    right: React.ReactNode;
+    /** Aspect ratio class (e.g., "aspect-16/9", "aspect-4/3", "aspect-square") */
+    aspect?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Diff: React.FC<DiffProps>;

package/dist/components/Form.d.ts

@@ -5,6 +5,8 @@ export interface FormProps<TFieldValues extends FieldValues = FieldValues> exten
     onFinish?: SubmitHandler<TFieldValues>;
     initialValues?: UseFormProps<TFieldValues>['defaultValues'];
     layout?: 'vertical' | 'horizontal' | 'inline';
+    /** Label width in pixels for horizontal layout (default: 80) */
+    labelWidth?: number;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     children: React.ReactNode;
 }
@@ -26,6 +28,7 @@ export interface FormRule {
     message?: string;
     validate?: (value: any) => boolean | string | Promise<boolean | string>;
 }
+export type ValidateTrigger = 'onChange' | 'onBlur' | 'onSubmit' | ('onChange' | 'onBlur' | 'onSubmit')[];
 export interface FormItemProps {
     name?: string | string[];
     label?: string;
@@ -36,6 +39,20 @@ export interface FormItemProps {
     inline?: boolean;
     className?: string;
     children: React.ReactElement;
+    /** Tooltip text to show next to label */
+    tooltip?: string;
+    /** Additional content below the form control */
+    extra?: React.ReactNode;
+    /** Show validation feedback icon */
+    hasFeedback?: boolean;
+    /** Field names that this field depends on for validation */
+    dependencies?: string[];
+    /** When to trigger validation */
+    validateTrigger?: ValidateTrigger;
+    /** Initial value for this field (overrides Form's initialValues) */
+    initialValue?: any;
+    /** Hide this field (still validates and submits) */
+    hidden?: boolean;
 }
 export interface FormListProps<TFieldValues extends FieldValues = FieldValues> {
     name: FieldArrayPath<TFieldValues>;
@@ -45,8 +62,8 @@ export interface FormListProps<TFieldValues extends FieldValues = FieldValues> {
         move: (from: number, to: number) => void;
     }) => React.ReactNode;
 }
-declare function FormRoot<TFieldValues extends FieldValues = FieldValues>({ form: externalForm, onFinish, initialValues, layout, size, children, className, noValidate, ...props }: FormProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
-declare function FormItem({ name, label, help, required, rules, valuePropName, inline, className, children, }: FormItemProps): import("react/jsx-runtime").JSX.Element;
+declare function FormRoot<TFieldValues extends FieldValues = FieldValues>({ form: externalForm, onFinish, initialValues, layout, labelWidth, size, children, className, noValidate, ...props }: FormProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormItem({ name, label, help, required, rules, valuePropName, inline, className, children, tooltip, extra, hasFeedback, dependencies, validateTrigger, initialValue, hidden, }: FormItemProps): import("react/jsx-runtime").JSX.Element;
 declare function FormList<TFieldValues extends FieldValues = FieldValues>({ name, children, }: FormListProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export declare function useFormInstance<TFieldValues extends FieldValues = FieldValues>(): UseFormReturn<TFieldValues, any, TFieldValues> & {
     setFieldValue: import('react-hook-form').UseFormSetValue<TFieldValues>;
@@ -58,9 +75,17 @@ export declare function useFormInstance<TFieldValues extends FieldValues = Field
     isFieldTouched: (name: string) => boolean;
     getFieldError: (name: string) => string | undefined;
 };
+export interface FormErrorListProps {
+    /** Specific field names to show errors for (shows all errors if not specified) */
+    fields?: string[];
+    /** Custom className */
+    className?: string;
+}
+declare function FormErrorList({ fields, className }: FormErrorListProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const Form: typeof FormRoot & {
     Item: typeof FormItem;
     List: typeof FormList;
+    ErrorList: typeof FormErrorList;
     useForm: typeof useFormInstance;
 };
 export type { UseFormReturn as FormInstance };

package/dist/components/Kbd.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+    /** Size of the kbd */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Key content */
+    children?: React.ReactNode;
+}
+export declare const Kbd: React.FC<KbdProps>;

package/dist/components/Radio.d.ts

@@ -5,11 +5,17 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     className?: string;
     children?: React.ReactNode;
 }
+export interface RadioGroupChangeEvent {
+    target: {
+        value: string | number;
+        name?: string;
+    };
+}
 export interface RadioGroupProps {
     children: React.ReactNode;
     value?: string | number;
     defaultValue?: string | number;
-    onChange?: (value: string | number) => void;
+    onChange?: (e: RadioGroupChangeEvent) => void;
     name?: string;
     className?: string;
 }

package/dist/components/Status.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export type StatusType = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+export type StatusSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface StatusProps {
+    /** Status color type */
+    type?: StatusType;
+    /** Status size */
+    size?: StatusSize;
+    /** Ping animation effect */
+    ping?: boolean;
+    /** Bounce animation effect */
+    bounce?: boolean;
+    /** Accessibility label */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Status: React.FC<StatusProps>;

package/dist/components/TextRotate.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export type TextRotateDuration = 6000 | 9000 | 12000 | 15000 | 18000;
+export interface TextRotateProps {
+    /** Text items to rotate through (max 6) */
+    items: React.ReactNode[];
+    /** Animation duration in ms (default 10000) */
+    duration?: TextRotateDuration;
+    /** Center text horizontally */
+    centered?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const TextRotate: React.FC<TextRotateProps>;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Affix } from './components/Affix';
 export type { AffixProps } from './components/Affix';
+export { Anchor } from './components/Anchor';
+export type { AnchorProps, AnchorLinkProps, AnchorLinkItem } from './components/Anchor';
 export { Alert } from './components/Alert';
 export type { AlertProps } from './components/Alert';
 export { Autocomplete } from './components/Autocomplete';
@@ -38,6 +40,8 @@ export { DatePicker } from './components/DatePicker';
 export type { DatePickerProps } from './components/DatePicker';
 export { Descriptions } from './components/Descriptions';
 export type { DescriptionsProps, DescriptionsItemProps, DescriptionsSize, DescriptionsLayout } from './components/Descriptions';
+export { Diff } from './components/Diff';
+export type { DiffProps } from './components/Diff';
 export { Divider } from './components/Divider';
 export type { DividerProps } from './components/Divider';
 export { Drawer } from './components/Drawer';
@@ -53,7 +57,7 @@ export type { FloatButtonProps, BackTopProps } from './components/FloatButton';
 export { Footer } from './components/Footer';
 export type { FooterProps, FooterTitleProps } from './components/Footer';
 export { Form, useFormInstance } from './components/Form';
-export type { FormProps, FormItemProps, FormRule, FormInstance } from './components/Form';
+export type { FormProps, FormItemProps, FormRule, FormInstance, FormErrorListProps, ValidateTrigger } from './components/Form';
 export { Grid, Row, Col } from './components/Grid';
 export type { RowProps, ColProps } from './components/Grid';
 export { Hero } from './components/Hero';
@@ -72,6 +76,8 @@ export { InputNumber } from './components/InputNumber';
 export type { InputNumberProps } from './components/InputNumber';
 export { Join } from './components/Join';
 export type { JoinProps } from './components/Join';
+export { Kbd } from './components/Kbd';
+export type { KbdProps } from './components/Kbd';
 export { Label } from './components/Label';
 export type { LabelProps, FloatingLabelProps } from './components/Label';
 export { Layout, useSiderContext } from './components/Layout';
@@ -115,7 +121,7 @@ export type { ProgressProps } from './components/Progress';
 export { QRCode } from './components/QRCode';
 export type { QRCodeProps, QRCodeErrorLevel, QRCodeType, QRCodeStatus } from './components/QRCode';
 export { Radio } from './components/Radio';
-export type { RadioProps, RadioGroupProps } from './components/Radio';
+export type { RadioProps, RadioGroupProps, RadioGroupChangeEvent } from './components/Radio';
 export { RadialProgress } from './components/RadialProgress';
 export type { RadialProgressProps } from './components/RadialProgress';
 export { Range } from './components/Range';
@@ -138,6 +144,8 @@ export { Stack } from './components/Stack';
 export type { StackProps } from './components/Stack';
 export { Stats } from './components/Stat';
 export type { StatsProps, StatProps } from './components/Stat';
+export { Status } from './components/Status';
+export type { StatusProps, StatusType, StatusSize } from './components/Status';
 export { Steps } from './components/Steps';
 export type { StepsProps, StepProps } from './components/Steps';
 export { Table } from './components/Table';
@@ -146,6 +154,8 @@ export { Tabs } from './components/Tabs';
 export type { TabsProps, TabPanelProps } from './components/Tabs';
 export { Textarea } from './components/Textarea';
 export type { TextareaProps } from './components/Textarea';
+export { TextRotate } from './components/TextRotate';
+export type { TextRotateProps, TextRotateDuration } from './components/TextRotate';
 export { Tag, CheckableTag } from './components/Tag';
 export type { TagProps, CheckableTagProps } from './components/Tag';
 export { ThemeController } from './components/ThemeController';