@domphy/ui 0.5.0 → 0.7.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { ValueOrState, PartialElement, DomphyElement, Notifier, Handler } from '@domphy/core';
+import { ValueOrState, PartialElement, DomphyElement, State } from '@domphy/core';
 import { ThemeColor } from '@domphy/theme';
 import { Placement as Placement$1 } from '@floating-ui/dom';
 export { Placement } from '@floating-ui/dom';
@@ -374,50 +374,34 @@ declare function menuItem(props?: {
     color?: ThemeColor;
 }): PartialElement;
 
-type FieldStatus = "error" | "warning" | "success" | undefined;
-type FieldMessages = {
-    error?: string;
-    warning?: string;
-    success?: string;
-};
-type FieldValidator = (value: unknown) => FieldMessages | null | Promise<FieldMessages | null>;
-declare class FieldState {
-    _notifier: Notifier;
-    _value: unknown;
-    _initValue: unknown;
-    _messages: FieldMessages;
-    _touched: boolean;
-    _validator: FieldValidator | undefined;
-    _pending: boolean;
-    _validationToken: number;
-    constructor(initValue: unknown, validator?: FieldValidator);
-    value(listener?: Handler): unknown;
-    setValue(val: unknown): void;
-    dirty(listener?: Handler): boolean;
-    touched(listener?: Handler): boolean;
-    setTouched(): void;
-    configure(initValue?: unknown, validator?: FieldValidator): void;
-    message(type: keyof FieldMessages, listener?: Handler): string | undefined;
-    status(listener?: Handler): FieldStatus;
-    setMessages(next: FieldMessages): void;
-    reset(): void;
-    validate(): void;
-    _dispose(): void;
+/**
+ * One keyframe. Shorthands `x`/`y` (px), `scale`, `rotate` (deg) compose into a
+ * single `transform`; any other key is a raw CSS property (e.g. `opacity`,
+ * `backgroundColor`).
+ */
+type MotionKeyframe = {
+    x?: number | string;
+    y?: number | string;
+    scale?: number | string;
+    rotate?: number | string;
+} & Record<string, string | number>;
+interface MotionProps {
+    /** Starting keyframe applied before the enter animation. */
+    initial?: MotionKeyframe;
+    /** Target keyframe. Pass a `State` to re-animate whenever it changes. */
+    animate?: MotionKeyframe | State<MotionKeyframe>;
+    /** Keyframe animated to before the element is removed. */
+    exit?: MotionKeyframe;
+    transition?: {
+        /** ms, default 300. */
+        duration?: number;
+        /** ms, default 0. */
+        delay?: number;
+        /** CSS easing, default "ease". */
+        easing?: string;
+        iterations?: number;
+    };
 }
+declare function motion(props?: MotionProps): PartialElement;
 
-declare class FormState {
-    fields: Map<string, FieldState>;
-    setField(path: string, initValue?: unknown, validator?: FieldValidator): FieldState;
-    getField(path: string): FieldState;
-    removeField(path: string): void;
-    get valid(): boolean;
-    reset(): void;
-    snapshot(): Record<string, unknown>;
-    _dispose(): void;
-}
-
-declare function form(state: FormState): PartialElement;
-
-declare function field(path: string, validator?: FieldValidator): PartialElement;
-
-export { type FieldMessages, FieldState, type FieldStatus, type FieldValidator, FormState, abbreviation, alert, avatar, badge, blockquote, breadcrumb, breadcrumbEllipsis, button, buttonSwitch, card, code, combobox, command, commandItem, commandSearch, descriptionList, details, dialog, divider, drawer, emphasis, field, figure, form, formGroup, heading, horizontalRule, icon, image, inputCheckbox, inputColor, inputDateTime, inputFile, inputNumber, inputOTP, inputRadio, inputRange, inputSearch, inputSwitch, inputText, keyboard, label, link, mark, menu, menuItem, orderedList, pagination, paragraph, popover, popoverArrow, preformated, progress, select, selectBox, selectItem, selectList, skeleton, small, spinner, splitter, splitterHandle, splitterPanel, strong, subscript, superscript, tab, tabPanel, table, tabs, tag, textarea, toast, toggle, toggleGroup, tooltip, transitionGroup, unorderedList };
+export { type MotionKeyframe, type MotionProps, abbreviation, alert, avatar, badge, blockquote, breadcrumb, breadcrumbEllipsis, button, buttonSwitch, card, code, combobox, command, commandItem, commandSearch, descriptionList, details, dialog, divider, drawer, emphasis, figure, formGroup, heading, horizontalRule, icon, image, inputCheckbox, inputColor, inputDateTime, inputFile, inputNumber, inputOTP, inputRadio, inputRange, inputSearch, inputSwitch, inputText, keyboard, label, link, mark, menu, menuItem, motion, orderedList, pagination, paragraph, popover, popoverArrow, preformated, progress, select, selectBox, selectItem, selectList, skeleton, small, spinner, splitter, splitterHandle, splitterPanel, strong, subscript, superscript, tab, tabPanel, table, tabs, tag, textarea, toast, toggle, toggleGroup, tooltip, transitionGroup, unorderedList };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ValueOrState, PartialElement, DomphyElement, Notifier, Handler } from '@domphy/core';
+import { ValueOrState, PartialElement, DomphyElement, State } from '@domphy/core';
 import { ThemeColor } from '@domphy/theme';
 import { Placement as Placement$1 } from '@floating-ui/dom';
 export { Placement } from '@floating-ui/dom';
@@ -374,50 +374,34 @@ declare function menuItem(props?: {
     color?: ThemeColor;
 }): PartialElement;
 
-type FieldStatus = "error" | "warning" | "success" | undefined;
-type FieldMessages = {
-    error?: string;
-    warning?: string;
-    success?: string;
-};
-type FieldValidator = (value: unknown) => FieldMessages | null | Promise<FieldMessages | null>;
-declare class FieldState {
-    _notifier: Notifier;
-    _value: unknown;
-    _initValue: unknown;
-    _messages: FieldMessages;
-    _touched: boolean;
-    _validator: FieldValidator | undefined;
-    _pending: boolean;
-    _validationToken: number;
-    constructor(initValue: unknown, validator?: FieldValidator);
-    value(listener?: Handler): unknown;
-    setValue(val: unknown): void;
-    dirty(listener?: Handler): boolean;
-    touched(listener?: Handler): boolean;
-    setTouched(): void;
-    configure(initValue?: unknown, validator?: FieldValidator): void;
-    message(type: keyof FieldMessages, listener?: Handler): string | undefined;
-    status(listener?: Handler): FieldStatus;
-    setMessages(next: FieldMessages): void;
-    reset(): void;
-    validate(): void;
-    _dispose(): void;
+/**
+ * One keyframe. Shorthands `x`/`y` (px), `scale`, `rotate` (deg) compose into a
+ * single `transform`; any other key is a raw CSS property (e.g. `opacity`,
+ * `backgroundColor`).
+ */
+type MotionKeyframe = {
+    x?: number | string;
+    y?: number | string;
+    scale?: number | string;
+    rotate?: number | string;
+} & Record<string, string | number>;
+interface MotionProps {
+    /** Starting keyframe applied before the enter animation. */
+    initial?: MotionKeyframe;
+    /** Target keyframe. Pass a `State` to re-animate whenever it changes. */
+    animate?: MotionKeyframe | State<MotionKeyframe>;
+    /** Keyframe animated to before the element is removed. */
+    exit?: MotionKeyframe;
+    transition?: {
+        /** ms, default 300. */
+        duration?: number;
+        /** ms, default 0. */
+        delay?: number;
+        /** CSS easing, default "ease". */
+        easing?: string;
+        iterations?: number;
+    };
 }
+declare function motion(props?: MotionProps): PartialElement;
 
-declare class FormState {
-    fields: Map<string, FieldState>;
-    setField(path: string, initValue?: unknown, validator?: FieldValidator): FieldState;
-    getField(path: string): FieldState;
-    removeField(path: string): void;
-    get valid(): boolean;
-    reset(): void;
-    snapshot(): Record<string, unknown>;
-    _dispose(): void;
-}
-
-declare function form(state: FormState): PartialElement;
-
-declare function field(path: string, validator?: FieldValidator): PartialElement;
-
-export { type FieldMessages, FieldState, type FieldStatus, type FieldValidator, FormState, abbreviation, alert, avatar, badge, blockquote, breadcrumb, breadcrumbEllipsis, button, buttonSwitch, card, code, combobox, command, commandItem, commandSearch, descriptionList, details, dialog, divider, drawer, emphasis, field, figure, form, formGroup, heading, horizontalRule, icon, image, inputCheckbox, inputColor, inputDateTime, inputFile, inputNumber, inputOTP, inputRadio, inputRange, inputSearch, inputSwitch, inputText, keyboard, label, link, mark, menu, menuItem, orderedList, pagination, paragraph, popover, popoverArrow, preformated, progress, select, selectBox, selectItem, selectList, skeleton, small, spinner, splitter, splitterHandle, splitterPanel, strong, subscript, superscript, tab, tabPanel, table, tabs, tag, textarea, toast, toggle, toggleGroup, tooltip, transitionGroup, unorderedList };
+export { type MotionKeyframe, type MotionProps, abbreviation, alert, avatar, badge, blockquote, breadcrumb, breadcrumbEllipsis, button, buttonSwitch, card, code, combobox, command, commandItem, commandSearch, descriptionList, details, dialog, divider, drawer, emphasis, figure, formGroup, heading, horizontalRule, icon, image, inputCheckbox, inputColor, inputDateTime, inputFile, inputNumber, inputOTP, inputRadio, inputRange, inputSearch, inputSwitch, inputText, keyboard, label, link, mark, menu, menuItem, motion, orderedList, pagination, paragraph, popover, popoverArrow, preformated, progress, select, selectBox, selectItem, selectList, skeleton, small, spinner, splitter, splitterHandle, splitterPanel, strong, subscript, superscript, tab, tabPanel, table, tabs, tag, textarea, toast, toggle, toggleGroup, tooltip, transitionGroup, unorderedList };