asterui 0.12.0 → 0.12.2

package/README.md

@@ -102,7 +102,7 @@ export default function App() {
 
 ## Components
 
-80+ components including forms, data display, navigation, feedback, and layout. See the full list at [asterui.com/components](https://asterui.com/components).
+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/Calendar.d.ts

@@ -0,0 +1,23 @@
+import { en, fr, MonthCalendarProps as BaseMonthCalendarProps, WeekCalendarProps as BaseWeekCalendarProps, CalendarEvent, CalendarLocale } from '@vinctus/calendar';
+export type { CalendarEvent, CalendarLocale };
+export { en, fr };
+export interface MonthCalendarProps<T extends CalendarEvent = CalendarEvent> extends Omit<BaseMonthCalendarProps<T>, 'theme'> {
+    className?: string;
+}
+export interface WeekCalendarProps<T extends CalendarEvent = CalendarEvent> extends Omit<BaseWeekCalendarProps<T>, 'theme'> {
+    className?: string;
+}
+declare const MonthCalendar: {
+    <T extends CalendarEvent = CalendarEvent>({ className, ...props }: MonthCalendarProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const WeekCalendar: {
+    <T extends CalendarEvent = CalendarEvent>({ className, ...props }: WeekCalendarProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface CalendarComponent {
+    Month: typeof MonthCalendar;
+    Week: typeof WeekCalendar;
+}
+export declare const Calendar: CalendarComponent;
+export default Calendar;

package/dist/components/Checkbox.d.ts

@@ -1,9 +1,19 @@
 import { default as React } from 'react';
+export interface CheckboxSwapConfig {
+    /** Content shown when checked */
+    on: React.ReactNode;
+    /** Content shown when unchecked */
+    off: React.ReactNode;
+    /** Animation effect for the swap transition */
+    effect?: 'rotate' | 'flip';
+}
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     children?: React.ReactNode;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'success' | 'warning' | 'info' | 'error';
     indeterminate?: boolean;
+    /** Swap mode: toggle between two visual states instead of showing a checkbox */
+    swap?: CheckboxSwapConfig;
     className?: string;
 }
 export interface CheckboxOptionType {

package/dist/components/Dock.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface DockItemConfig {
+    /** Icon element */
+    icon: React.ReactNode;
+    /** Label text */
+    label?: string;
+    /** Whether this item is active */
+    active?: boolean;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Click handler for this item */
+    onClick?: () => void;
+}
+export interface DockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Dock items configuration */
+    items?: DockItemConfig[];
+    /** Size variant */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Controlled active index */
+    activeIndex?: number;
+    /** Callback when an item is clicked */
+    onChange?: (index: number) => void;
+    /** Children (alternative to items prop) */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface DockItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Whether this item is active */
+    active?: boolean;
+    /** Children (icon and optional label) */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Dock: React.ForwardRefExoticComponent<DockProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<DockItemProps & React.RefAttributes<HTMLButtonElement>>;
+};

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/Mask.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export type MaskShape = 'squircle' | 'heart' | 'hexagon' | 'hexagon-2' | 'decagon' | 'pentagon' | 'diamond' | 'square' | 'circle' | 'star' | 'star-2' | 'triangle' | 'triangle-2' | 'triangle-3' | 'triangle-4';
+export type MaskHalf = 'half-1' | 'half-2';
+export interface MaskProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Shape of the mask */
+    shape: MaskShape;
+    /** Show only half of the mask */
+    half?: MaskHalf;
+    /** Content to mask (typically an image) */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Mask: React.ForwardRefExoticComponent<MaskProps & React.RefAttributes<HTMLDivElement>>;

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/index.css

@@ -0,0 +1 @@
+.month-calendar{background-color:var(--calendar-bg-primary);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;height:100%;width:100%}.month-calendar .month-calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.month-calendar .month-calendar-month-display h2{font-size:18px;font-weight:500;margin:0}.month-calendar .month-calendar-weekday-header{border-bottom:1px solid var(--calendar-border-primary);display:grid;grid-template-columns:repeat(7,1fr)}.month-calendar .month-calendar-weekday-header .month-calendar-weekday-cell{color:var(--calendar-text-secondary);font-size:12px;font-weight:500;padding:4px 0;text-align:center;text-transform:uppercase}.month-calendar .month-calendar-grid{border-left:1px solid var(--calendar-border-primary);display:grid;flex:1;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr)}.month-calendar .month-calendar-cell{border-bottom:1px solid var(--calendar-border-primary);border-right:1px solid var(--calendar-border-primary);cursor:pointer;overflow:hidden;padding:4px;position:relative}.month-calendar .month-calendar-cell:hover{background-color:var(--calendar-bg-hover)}.month-calendar .month-calendar-cell .month-calendar-date-number-container{display:flex;justify-content:center;margin-bottom:2px}.month-calendar .month-calendar-cell .month-calendar-date-number{align-items:center;color:var(--calendar-text-primary);display:flex;font-size:12px;justify-content:center;line-height:1}.month-calendar .month-calendar-cell .month-calendar-events-container{display:flex;flex-direction:column}.month-calendar .month-calendar-other-month{background-color:var(--calendar-bg-secondary)}.month-calendar .month-calendar-other-month .month-calendar-date-number{color:var(--calendar-text-muted)}.month-calendar .month-calendar-past{opacity:.6}.month-calendar .month-calendar-past .month-calendar-date-number{color:var(--calendar-text-muted)}.month-calendar .month-calendar-past .month-calendar-event{opacity:.8}.month-calendar .month-calendar-past-non-interactive{cursor:not-allowed}.month-calendar .month-calendar-past-non-interactive .month-calendar-event{cursor:pointer}.month-calendar .month-calendar-today{background-color:var(--calendar-bg-today)}.month-calendar .month-calendar-today .month-calendar-today-number{color:var(--calendar-accent-primary);font-weight:700}.month-calendar .month-calendar-selected{outline:2px solid var(--calendar-accent-primary);z-index:1}.month-calendar .month-calendar-event{align-items:center;border-radius:3px;color:var(--calendar-text-event);cursor:pointer;display:flex;font-size:12px;line-height:1;overflow:hidden;padding:3px 4px;transition:background-color .1s ease;white-space:nowrap}.month-calendar .month-calendar-event:hover{background-color:var(--calendar-bg-event-hover)}.month-calendar .month-calendar-event .month-calendar-event-dot{border-radius:50%;display:inline-block;flex-shrink:0;height:8px;margin-right:6px;width:8px}.month-calendar .month-calendar-event .month-calendar-event-title{overflow:hidden;white-space:nowrap}.month-calendar .month-calendar-ellipsis{text-overflow:ellipsis}.month-calendar .month-calendar-cancelled-event{text-decoration:line-through}.month-calendar .month-calendar-future-event{color:var(--calendar-text-future-event)}.month-calendar .month-calendar-more-events{border-radius:3px;color:var(--calendar-text-secondary);cursor:pointer;font-size:11px}.month-calendar .month-calendar-more-events:hover{background-color:var(--calendar-bg-event-hover)}.calendar-light{--calendar-bg-primary:#fff;--calendar-bg-secondary:#f8f9fa;--calendar-bg-hover:#f8f9fa;--calendar-bg-today:#e8f0fe;--calendar-bg-time-label:#fafafa;--calendar-bg-day-hover:#f0f6ff;--calendar-bg-event-hover:rgba(0,0,0,.04);--calendar-border-primary:#e0e0e0;--calendar-border-secondary:#f0f0f0;--calendar-text-primary:#3c4043;--calendar-text-secondary:#70757a;--calendar-text-muted:#80868b;--calendar-text-time:#8c8c8c;--calendar-text-event:#000;--calendar-text-future-event:#3c4043;--calendar-accent-primary:#1a73e8;--calendar-scrollbar-track:#f1f1f1;--calendar-scrollbar-thumb:#c1c1c1;--calendar-scrollbar-thumb-hover:#a8a8a8}.calendar-dark{--calendar-bg-primary:#1f1f1f;--calendar-bg-secondary:#2a2a2a;--calendar-bg-hover:#2a2a2a;--calendar-bg-today:#1e3a5f;--calendar-bg-time-label:#1a1a1a;--calendar-bg-day-hover:#2a3f5f;--calendar-bg-event-hover:hsla(0,0%,100%,.08);--calendar-border-primary:#434343;--calendar-border-secondary:#383838;--calendar-text-primary:#e8e8e8;--calendar-text-secondary:#b8b8b8;--calendar-text-muted:grey;--calendar-text-time:#999;--calendar-text-event:#fff;--calendar-text-future-event:#d0d0d0;--calendar-accent-primary:#4a9eff;--calendar-scrollbar-track:#2a2a2a;--calendar-scrollbar-thumb:#4a4a4a;--calendar-scrollbar-thumb-hover:#5a5a5a}.week-calendar{display:flex;flex-direction:column;height:100%;overflow:hidden}.week-calendar,.week-calendar .week-calendar-header{background:var(--calendar-bg-primary);border-bottom:1px solid var(--calendar-border-secondary)}.week-calendar .week-calendar-header{display:grid;grid-template-columns:80px repeat(7,1fr)}.week-calendar .week-calendar-day-header{cursor:pointer;padding:2px 8px;text-align:center;transition:background-color .2s}.week-calendar .week-calendar-day-header:hover{background-color:var(--calendar-bg-day-hover)}.week-calendar .week-calendar-day-header.week-calendar-day-header-past-non-interactive{cursor:not-allowed}.week-calendar .week-calendar-day-name{color:var(--calendar-text-secondary);font-size:12px;font-weight:500;margin-bottom:0;text-transform:uppercase}.week-calendar .week-calendar-day-name.week-calendar-day-name-past{color:var(--calendar-text-muted)}.week-calendar .week-calendar-day-number{align-items:center;color:var(--calendar-text-primary);display:flex;font-size:12px;font-weight:500;justify-content:center;margin:0 auto;transition:all .2s}.week-calendar .week-calendar-day-number.week-calendar-day-number-today{color:var(--calendar-accent-primary);font-weight:700}.week-calendar .week-calendar-day-number.week-calendar-day-number-past{color:var(--calendar-text-muted)}.week-calendar .week-calendar-body{flex:1;overflow-y:auto}.week-calendar .week-calendar-time-row{border-bottom:1px solid var(--calendar-border-secondary);display:grid;grid-template-columns:80px repeat(7,1fr);height:80px}.week-calendar .week-calendar-time-row:last-child{border-bottom:none}.week-calendar .week-calendar-time-label{align-items:flex-start;background:var(--calendar-bg-time-label);border-left:1px solid var(--calendar-border-secondary);border-right:1px solid var(--calendar-border-secondary);color:var(--calendar-text-time);display:flex;font-size:12px;justify-content:flex-end;padding:4px 8px 8px;text-align:right}.week-calendar .week-calendar-time-cell{border-right:1px solid var(--calendar-border-secondary);cursor:pointer;display:flex;flex-direction:column;height:80px;justify-content:flex-start;overflow-y:auto;padding:4px 2px;position:relative}.week-calendar .week-calendar-time-cell:last-child{border-right:none}.week-calendar .week-calendar-time-cell:hover{background-color:var(--calendar-bg-day-hover)}.week-calendar .week-calendar-time-cell.week-calendar-time-cell-non-interactive{cursor:not-allowed}.week-calendar .week-calendar-time-cell.week-calendar-time-cell-non-interactive:hover{background-color:var(--calendar-bg-day-hover);cursor:not-allowed}.week-calendar .week-calendar-time-cell.week-calendar-time-cell-non-interactive .week-calendar-event{cursor:pointer}.week-calendar .week-calendar-event{align-items:center;border-radius:3px;color:var(--calendar-text-event);cursor:pointer;display:flex;flex-shrink:0;font-size:12px;line-height:1;margin-bottom:1px;overflow:hidden;padding:3px 4px;transition:background-color .1s ease;white-space:nowrap}.week-calendar .week-calendar-event:hover{background-color:var(--calendar-bg-event-hover)}.week-calendar .week-calendar-event:last-child{margin-bottom:0}.week-calendar .week-calendar-event.week-calendar-event-cancelled{text-decoration:line-through}.week-calendar .week-calendar-event.week-calendar-event-future{color:var(--calendar-text-primary)}.week-calendar .week-calendar-event-dot{border-radius:50%;display:inline-block;flex-shrink:0;height:8px;margin-right:6px;width:8px}.week-calendar .week-calendar-event-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.week-calendar-body::-webkit-scrollbar{width:8px}.week-calendar-body::-webkit-scrollbar-track{background:var(--calendar-scrollbar-track)}.week-calendar-body::-webkit-scrollbar-thumb{background:var(--calendar-scrollbar-thumb);border-radius:4px}.week-calendar-body::-webkit-scrollbar-thumb:hover{background:var(--calendar-scrollbar-thumb-hover)}@media(max-width:768px){.week-calendar .week-calendar-time-column{width:60px}.week-calendar .week-calendar-header,.week-calendar .week-calendar-time-row{grid-template-columns:60px repeat(7,1fr)}.week-calendar .week-calendar-time-label{font-size:10px;padding:4px}.week-calendar .week-calendar-day-name,.week-calendar .week-calendar-day-number{font-size:10px}.week-calendar .week-calendar-event{font-size:10px;padding:2px 4px}}

package/dist/index.d.ts

@@ -15,11 +15,14 @@ export type { BreadcrumbProps, BreadcrumbItemProps } from './components/Breadcru
 export { Button } from './components/Button';
 export type { ButtonProps } from './components/Button';
 export { Checkbox } from './components/Checkbox';
-export type { CheckboxProps, CheckboxGroupProps, CheckboxOptionType } from './components/Checkbox';
+export type { CheckboxProps, CheckboxGroupProps, CheckboxOptionType, CheckboxSwapConfig } from './components/Checkbox';
 export { Chat } from './components/Chat';
 export type { ChatProps } from './components/Chat';
 export { ColorPicker } from './components/ColorPicker';
 export type { ColorPickerProps } from './components/ColorPicker';
+export { Calendar } from './components/Calendar';
+export type { MonthCalendarProps, WeekCalendarProps, CalendarEvent, CalendarLocale } from './components/Calendar';
+export { en as calendarEn, fr as calendarFr } from './components/Calendar';
 export { Card } from './components/Card';
 export type { CardProps, CardGridProps } from './components/Card';
 export { Cascader } from './components/Cascader';
@@ -42,6 +45,8 @@ 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 { Dock } from './components/Dock';
+export type { DockProps, DockItemProps, DockItemConfig } from './components/Dock';
 export { Divider } from './components/Divider';
 export type { DividerProps } from './components/Divider';
 export { Drawer } from './components/Drawer';
@@ -57,7 +62,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';
@@ -86,6 +91,8 @@ export { List } from './components/List';
 export type { ListProps, ListRowProps } from './components/List';
 export { Loading } from './components/Loading';
 export type { LoadingProps } from './components/Loading';
+export { Mask } from './components/Mask';
+export type { MaskProps, MaskShape, MaskHalf } from './components/Mask';
 export { Masonry } from './components/Masonry';
 export type { MasonryProps } from './components/Masonry';
 export { Mention } from './components/Mention';
@@ -121,7 +128,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';
@@ -144,6 +151,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';