@destyler/switch 0.0.6 → 0.0.7-beta.2

package/dist/index.d.ts

@@ -1,286 +1,143 @@
-import * as vue from 'vue';
-import { PropType, Ref } from 'vue';
-import * as _destyler_primitive from '@destyler/primitive';
-import { ExtractPublicPropTypes } from '@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 { Machine, StateMachine } from '@zag-js/core';
 
-declare const switchRootProps: {
-    /**
-     * @default button
-     */
-    readonly as: {
-        readonly default: "button";
-        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
-        readonly required: false;
-    };
-    /**
-     * The state of the switch when it is initially rendered.
-     * Use when you do not need to control its state.
-     */
-    readonly defaultChecked: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-    };
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "control" | "thumb">;
+
+interface CheckedChangeDetails {
+    checked: boolean;
+}
+type ElementIds = Partial<{
+    root: string;
+    hiddenInput: string;
+    control: string;
+    label: string;
+    thumb: string;
+}>;
+interface PublicContext extends DirectionProperty, CommonProperties {
     /**
-     * The controlled state of the switch.
-     * Can be bind as `v-model:checked`.
+     * The ids of the elements in the switch. Useful for composition.
      */
-    readonly checked: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: undefined;
-    };
+    ids?: ElementIds | undefined;
     /**
-     * When `true`, prevents the user from interacting with the switch.
+     * Specifies the localized strings that identifies the accessibility elements and their states
      */
-    readonly disabled: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-    };
+    label: string;
     /**
-     * When `true`, indicates that the user must check the switch before the owning form can be submitted.
+     * Whether the switch is disabled.
      */
-    readonly required: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-    };
+    disabled?: boolean | undefined;
     /**
-     * The name of the switch. Submitted with its owning form as part of a name/value pair.
+     * If `true`, the switch is marked as invalid.
      */
-    readonly name: {
-        readonly type: PropType<string>;
-        readonly required: false;
-    };
+    invalid?: boolean | undefined;
     /**
-     * Id of the element
+     * If `true`, the switch input is marked as required,
      */
-    readonly id: {
-        readonly type: PropType<string>;
-        readonly required: false;
-    };
+    required?: boolean | undefined;
     /**
-     * The value given as data when submitted with a `name`.
+     * Whether the switch is read-only
      */
-    readonly value: {
-        readonly type: PropType<string>;
-        readonly required: false;
-        readonly default: "on";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-};
-type SwitchRootProps = ExtractPublicPropTypes<typeof switchRootProps>;
-declare const switchRootEmits: {
-    'update:checked': (_checked: boolean) => boolean;
-};
-interface SwitchRootContext {
-    checked?: Ref<boolean>;
-    toggleCheck: () => void;
-    disabled: Ref<boolean | undefined>;
-}
-declare const SwitchRoot: vue.DefineComponent<{
+    readOnly?: boolean | undefined;
     /**
-     * @default button
+     * Function to call when the switch is clicked.
      */
-    readonly as: {
-        readonly default: "button";
-        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
-        readonly required: false;
-    };
+    onCheckedChange?: ((details: CheckedChangeDetails) => void) | undefined;
     /**
-     * The state of the switch when it is initially rendered.
-     * Use when you do not need to control its state.
+     * Whether the switch is checked.
      */
-    readonly defaultChecked: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-    };
+    checked: boolean;
     /**
-     * The controlled state of the switch.
-     * Can be bind as `v-model:checked`.
+     * The name of the input field in a switch
+     * (Useful for form submission).
      */
-    readonly checked: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: undefined;
-    };
+    name?: string | undefined;
     /**
-     * When `true`, prevents the user from interacting with the switch.
+     * The id of the form that the switch belongs to
      */
-    readonly disabled: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-    };
+    form?: string | undefined;
     /**
-     * When `true`, indicates that the user must check the switch before the owning form can be submitted.
+     * The value of switch input. Useful for form submission.
+     * @default "on"
      */
-    readonly required: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-    };
+    value?: string | number | undefined;
+}
+type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
+type ComputedContext = Readonly<{
     /**
-     * The name of the switch. Submitted with its owning form as part of a name/value pair.
+     * Whether the switch is disabled
      */
-    readonly name: {
-        readonly type: PropType<string>;
-        readonly required: false;
-    };
+    isDisabled: boolean;
+}>;
+interface PrivateContext {
     /**
-     * Id of the element
+     * @internal
+     * Whether the checkbox is pressed
      */
-    readonly id: {
-        readonly type: PropType<string>;
-        readonly required: false;
-    };
+    active?: boolean | undefined;
     /**
-     * The value given as data when submitted with a `name`.
+     * @internal
+     * Whether the checkbox has focus
      */
-    readonly value: {
-        readonly type: PropType<string>;
-        readonly required: false;
-        readonly default: "on";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-}, {
-    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
-    toggleCheck: () => void;
-    isFormControl: vue.ComputedRef<boolean>;
-    ariaLabel: vue.ComputedRef<string | null | undefined>;
-    checked: Ref<boolean>;
-    disabled: Ref<boolean | undefined>;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:checked': (_checked: boolean) => boolean;
-}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    focused?: boolean | undefined;
     /**
-     * @default button
+     * @internal
+     * Whether the checkbox has focus visible
      */
-    readonly as: {
-        readonly default: "button";
-        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
-        readonly required: false;
-    };
+    focusVisible?: boolean | undefined;
     /**
-     * The state of the switch when it is initially rendered.
-     * Use when you do not need to control its state.
+     * @internal
+     * Whether the checkbox is hovered
      */
-    readonly defaultChecked: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-    };
+    hovered?: boolean | undefined;
     /**
-     * The controlled state of the switch.
-     * Can be bind as `v-model:checked`.
+     * @internal
+     * Whether the checkbox fieldset is disabled
      */
-    readonly checked: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: undefined;
-    };
+    fieldsetDisabled: boolean;
+}
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+interface MachineState {
+    value: 'ready';
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+interface MachineApi<T extends PropTypes = PropTypes> {
     /**
-     * When `true`, prevents the user from interacting with the switch.
+     * Whether the checkbox is checked
      */
-    readonly disabled: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-    };
+    checked: boolean;
     /**
-     * When `true`, indicates that the user must check the switch before the owning form can be submitted.
+     * Whether the checkbox is disabled
      */
-    readonly required: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-    };
+    disabled: boolean | undefined;
     /**
-     * The name of the switch. Submitted with its owning form as part of a name/value pair.
+     * Whether the checkbox is focused
      */
-    readonly name: {
-        readonly type: PropType<string>;
-        readonly required: false;
-    };
+    focused: boolean | undefined;
     /**
-     * Id of the element
+     * Function to set the checked state of the switch.
      */
-    readonly id: {
-        readonly type: PropType<string>;
-        readonly required: false;
-    };
+    setChecked: (checked: boolean) => void;
     /**
-     * The value given as data when submitted with a `name`.
+     * Function to toggle the checked state of the checkbox
      */
-    readonly value: {
-        readonly type: PropType<string>;
-        readonly required: false;
-        readonly default: "on";
-    };
-    readonly asChild: {
-        readonly type: PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-}>> & {
-    "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
-}, {
-    readonly as: _destyler_primitive.AsTag | vue.Component;
-    readonly checked: boolean;
-    readonly value: string;
-    readonly asChild: boolean;
-}, {}>;
+    toggleChecked: () => void;
+    getRootProps: () => T['label'];
+    getLabelProps: () => T['element'];
+    getThumbProps: () => T['element'];
+    getControlProps: () => T['element'];
+    getHiddenInputProps: () => T['input'];
+}
 
-declare const switchThumbProps: {
-    /**
-     * @default span
-     */
-    readonly as: {
-        readonly default: "span";
-        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
-        readonly required: false;
-    };
-    readonly asChild: {
-        readonly type: vue.PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-};
-type SwitchThumbProps = ExtractPublicPropTypes<typeof switchThumbProps>;
-declare const SwitchThumb: vue.DefineComponent<{
-    /**
-     * @default span
-     */
-    readonly as: {
-        readonly default: "span";
-        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
-        readonly required: false;
-    };
-    readonly asChild: {
-        readonly type: vue.PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-}, {
-    rootContext: SwitchRootContext;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    /**
-     * @default span
-     */
-    readonly as: {
-        readonly default: "span";
-        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
-        readonly required: false;
-    };
-    readonly asChild: {
-        readonly type: vue.PropType<boolean>;
-        readonly required: false;
-        readonly default: false;
-    };
-}>>, {
-    readonly as: _destyler_primitive.AsTag | vue.Component;
-    readonly asChild: boolean;
-}, {}>;
+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: ("label" | "ids" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "value" | "id" | "dir" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "label" | "ids" | "disabled" | "invalid" | "required" | "readOnly" | "onCheckedChange" | "checked" | "name" | "form" | "value" | "id" | "dir" | "getRootNode">];
 
-export { SwitchRoot, type SwitchRootProps, SwitchThumb, type SwitchThumbProps, switchRootEmits, switchRootProps, switchThumbProps };
+export { type MachineApi as Api, type CheckedChangeDetails, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps };