@destyler/dynamic 0.0.6 → 0.0.7-beta.1

package/dist/index.d.ts

@@ -1,4 +1,356 @@
-export { DynamicClear, DynamicClearProps, DynamicInput, DynamicInputProps, DynamicItem, DynamicItemDelete, DynamicItemDeleteProps, DynamicItemProops, DynamicItemText, DynamicItemTextProps, DynamicRoot, DynamicRootProps, dynamicClearProps, dynamicInputProps, dynamicItemDeleteProps, dynamicItemProps, dynamicItemTextProps, dynamicRootProps } from './component.js';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+import { InteractOutsideHandlers } from '@zag-js/interact-outside';
+export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { LiveRegion } from '@zag-js/live-region';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "control" | "input" | "clearTrigger" | "item" | "itemPreview" | "itemInput" | "itemText" | "itemDeleteTrigger">;
+
+interface ValueChangeDetails {
+    value: string[];
+}
+interface InputValueChangeDetails {
+    inputValue: string;
+}
+interface HighlightChangeDetails {
+    highlightedValue: string | null;
+}
+type ValidityState = 'rangeOverflow' | 'invalidTag';
+interface ValidityChangeDetails {
+    reason: ValidityState;
+}
+interface ValidateArgs {
+    inputValue: string;
+    value: string[];
+}
+interface IntlTranslations {
+    clearTriggerLabel: string;
+    deleteTagTriggerLabel: (value: string) => string;
+    tagSelected: (value: string) => string;
+    tagAdded: (value: string) => string;
+    tagsPasted: (value: string[]) => string;
+    tagEdited: (value: string) => string;
+    tagUpdated: (value: string) => string;
+    tagDeleted: (value: string) => string;
+    noTagsSelected?: string | undefined;
+    inputLabel?: (count: number) => string;
+}
+type Log = {
+    type: 'add' | 'update' | 'delete' | 'select';
+    value: string;
+} | {
+    type: 'clear';
+} | {
+    type: 'paste';
+    values: string[];
+} | {
+    type: 'set';
+    values: string[];
+};
+type ElementIds = Partial<{
+    root: string;
+    input: string;
+    hiddenInput: string;
+    clearBtn: string;
+    label: string;
+    control: string;
+    item: (opts: ItemProps) => string;
+    itemDeleteTrigger: (opts: ItemProps) => string;
+    itemInput: (opts: ItemProps) => string;
+}>;
+interface PublicContext extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
+    /**
+     * The ids of the elements in the tags input. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * Specifies the localized strings that identifies the accessibility elements and their states
+     */
+    translations: IntlTranslations;
+    /**
+     * The max length of the input.
+     */
+    maxLength?: number | undefined;
+    /**
+     * The character that serves has:
+     * - event key to trigger the addition of a new tag
+     * - character used to split tags when pasting into the input
+     *
+     * @default ","
+     */
+    delimiter?: string | RegExp | undefined;
+    /**
+     * Whether the input should be auto-focused
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Whether the tags input should be disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the tags input should be read-only
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether the tags input is invalid
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Whether the tags input is required
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether a tag can be edited after creation, by pressing `Enter` or double clicking.
+     * @default true
+     */
+    editable?: boolean | undefined;
+    /**
+     * The tag input's value
+     */
+    inputValue: string;
+    /**
+     * The tag values
+     */
+    value: string[];
+    /**
+     * Callback fired when the tag values is updated
+     */
+    onValueChange?: (details: ValueChangeDetails) => void;
+    /**
+     * Callback fired when the input value is updated
+     */
+    onInputValueChange?: (details: InputValueChangeDetails) => void;
+    /**
+     * Callback fired when a tag is highlighted by pointer or keyboard navigation
+     */
+    onHighlightChange?: (details: HighlightChangeDetails) => void;
+    /**
+     * Callback fired when the max tag count is reached or the `validateTag` function returns `false`
+     */
+    onValueInvalid?: (details: ValidityChangeDetails) => void;
+    /**
+     * Returns a boolean that determines whether a tag can be added.
+     * Useful for preventing duplicates or invalid tag values.
+     */
+    validate?: (details: ValidateArgs) => boolean;
+    /**
+     * The behavior of the tags input when the input is blurred
+     * - `"add"`: add the input value as a new tag
+     * - `"clear"`: clear the input value
+     */
+    blurBehavior?: 'clear' | 'add' | undefined;
+    /**
+     * Whether to add a tag when you paste values into the tag input
+     * @default false
+     */
+    addOnPaste?: boolean | undefined;
+    /**
+     * The max number of tags
+     * @default Infinity
+     */
+    max: number;
+    /**
+     * Whether to allow tags to exceed max. In this case,
+     * we'll attach `data-invalid` to the root
+     */
+    allowOverflow?: boolean | undefined;
+    /**
+     * The name attribute for the input. Useful for form submissions
+     */
+    name?: string | undefined;
+    /**
+     * The associate form of the underlying input element.
+     */
+    form?: string | undefined;
+}
+type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
+type ComputedContext = Readonly<{
+    /**
+     * @computed
+     * The string value of the tags input
+     */
+    valueAsString: string;
+    /**
+     * @computed
+     * The trimmed value of the input
+     */
+    trimmedInputValue: string;
+    /**
+     * @computed
+     * Whether the tags input is interactive
+     */
+    isInteractive: boolean;
+    /**
+     * @computed
+     * Whether the tags input is at the maximum allowed number of tags
+     */
+    isAtMax: boolean;
+    /**
+     * @computed
+     * The total number of tags
+     */
+    count: number;
+    /**
+     * @computed
+     * Whether the tags input is exceeding the max number of tags
+     */
+    isOverflowing: boolean;
+    /**
+     * @computed
+     * Whether the tags input is disabled
+     */
+    isDisabled: boolean;
+}>;
+interface PrivateContext {
+    /**
+     * @internal
+     * The output log for the screen reader to speak
+     */
+    log: {
+        current: Log | null;
+        prev: Log | null;
+    };
+    /**
+     * @internal
+     * The live region to announce changes to the user
+     */
+    liveRegion: LiveRegion | null;
+    /**
+     * @internal
+     * The `id` of the currently highlighted tag
+     */
+    highlightedTagId: string | null;
+    /**
+     * @internal
+     * The index of the deleted tag. Used to determine the next tag to focus.
+     */
+    idx?: number | undefined;
+    /**
+     * @internal
+     * The `id` of the currently edited tag
+     */
+    editedTagId: string | null;
+    /**
+     * @internal
+     * The value of the currently edited tag
+     */
+    editedTagValue: string;
+    /**
+     * @internal
+     * Whether the fieldset is disabled
+     */
+    fieldsetDisabled: boolean;
+}
+interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
+}
+interface MachineState {
+    value: 'idle' | 'navigating:tag' | 'focused:input' | 'editing:tag';
+    tags: 'focused' | 'editing';
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+interface ItemProps {
+    index: string | number;
+    value: string;
+    disabled?: boolean | undefined;
+}
+interface ItemState {
+    /**
+     * The underlying id of the item
+     */
+    id: string;
+    /**
+     * Whether the item is being edited
+     */
+    editing: boolean;
+    /**
+     * Whether the item is highlighted
+     */
+    highlighted: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled: boolean;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the tags are empty
+     */
+    empty: boolean;
+    /**
+     * The value of the tags entry input.
+     */
+    inputValue: string;
+    /**
+     * The value of the tags as an array of strings.
+     */
+    value: string[];
+    /**
+     * The value of the tags as a string.
+     */
+    valueAsString: string;
+    /**
+     * The number of the tags.
+     */
+    count: number;
+    /**
+     * Whether the tags have reached the max limit.
+     */
+    atMax: boolean;
+    /**
+     * Function to set the value of the tags.
+     */
+    setValue: (value: string[]) => void;
+    /**
+     * Function to clear the value of the tags.
+     */
+    clearValue: (id?: string) => void;
+    /**
+     * Function to add a tag to the tags.
+     */
+    addValue: (value: string) => void;
+    /**
+     * Function to set the value of a tag at the given index.
+     */
+    setValueAtIndex: (index: number, value: string) => void;
+    /**
+     * Function to set the value of the tags entry input.
+     */
+    setInputValue: (value: string) => void;
+    /**
+     * Function to clear the value of the tags entry input.
+     */
+    clearInputValue: () => void;
+    /**
+     * Function to focus the tags entry input.
+     */
+    focus: () => void;
+    /**
+     * Returns the state of a tag
+     */
+    getItemState: (props: ItemProps) => ItemState;
+    getRootProps: () => T['element'];
+    getLabelProps: () => T['label'];
+    getControlProps: () => T['element'];
+    getInputProps: () => T['input'];
+    getHiddenInputProps: () => T['input'];
+    getClearTriggerProps: () => T['button'];
+    getItemProps: (options: ItemProps) => T['element'];
+    getItemPreviewProps: (options: ItemProps) => T['element'];
+    getItemTextProps: (options: ItemProps) => T['element'];
+    getItemInputProps: (options: ItemProps) => T['input'];
+    getItemDeleteTriggerProps: (options: ItemProps) => T['button'];
+}
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare const props: ("ids" | "translations" | "maxLength" | "delimiter" | "autoFocus" | "disabled" | "readOnly" | "invalid" | "required" | "editable" | "inputValue" | "value" | "onValueChange" | "onInputValueChange" | "onHighlightChange" | "onValueInvalid" | "validate" | "blurBehavior" | "addOnPaste" | "max" | "allowOverflow" | "name" | "form" | "dir" | "id" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "translations" | "maxLength" | "delimiter" | "autoFocus" | "disabled" | "readOnly" | "invalid" | "required" | "editable" | "inputValue" | "value" | "onValueChange" | "onInputValueChange" | "onHighlightChange" | "onValueInvalid" | "validate" | "blurBehavior" | "addOnPaste" | "max" | "allowOverflow" | "name" | "form" | "dir" | "id" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemProps, type ItemState, type ValidateArgs, type ValidityChangeDetails, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };