@plexui/vue 0.0.0-stage → 0.1.1

package/dist/types/components/Menu/internal.d.ts

@@ -0,0 +1,179 @@
+import { type ComputedRef, type InjectionKey, type Ref, type ShallowRef } from "vue";
+export declare const SELECTION_KEYS: string[];
+export declare const FIRST_LAST_KEYS: string[];
+export declare const isLastKey: (key: string) => boolean;
+export declare const SUB_OPEN_KEYS: {
+    ltr: string[];
+    rtl: string[];
+};
+export declare const SUB_CLOSE_KEYS: {
+    ltr: string[];
+    rtl: string[];
+};
+export declare const ITEM_SELECT = "menu.itemSelect";
+export type Direction = "ltr" | "rtl";
+export type CheckedState = boolean | "indeterminate";
+type Point = {
+    x: number;
+    y: number;
+};
+type Polygon = Point[];
+type Side = "left" | "right";
+export type GraceIntent = {
+    area: Polygon;
+    side: Side;
+};
+/** A `{ current }` box, like a React ref: plain state no render depends on. */
+export type Box<T> = {
+    current: T;
+};
+export declare const box: <T>(current: T) => Box<T>;
+export type MenuRootInternals = {
+    /** Radix `rootContext.onClose`: closes the whole menu */
+    onClose: () => void;
+    /** Set by keydown, cleared by the next pointer event (Radix's isUsingKeyboardRef) */
+    isUsingKeyboard: Box<boolean>;
+    dir: ComputedRef<Direction>;
+    modal: () => boolean;
+    /** The root trigger element, focused when the menu closes */
+    trigger: ShallowRef<HTMLElement | null>;
+};
+export declare const MenuRootInternalsKey: InjectionKey<MenuRootInternals>;
+export declare const useMenuRootInternals: () => MenuRootInternals;
+/** Radix's keyboard tracking: any keydown, until the next pointer event. */
+export declare const trackKeyboardUse: (isUsingKeyboard: Box<boolean>) => () => void;
+export type MenuLevel = {
+    open: () => boolean;
+    /** Radix's controlled `setOpen`: reports a change only when it differs */
+    onOpenChange: (open: boolean) => void;
+    /** The level's content element while it is mounted */
+    content: ShallowRef<HTMLElement | null>;
+};
+export declare const MenuLevelKey: InjectionKey<MenuLevel>;
+export declare const useMenuLevel: () => MenuLevel;
+export type MenuSubInternals = {
+    triggerId: string;
+    contentId: string;
+    trigger: ShallowRef<HTMLElement | null>;
+};
+export declare const MenuSubInternalsKey: InjectionKey<MenuSubInternals>;
+export declare const useMenuSubInternals: () => MenuSubInternals;
+export type ItemRecord = {
+    id: symbol;
+    element: () => HTMLElement | null;
+    disabled: () => boolean;
+};
+export type MenuContentContext = {
+    register: (item: ItemRecord) => () => void;
+    /** Items in document order */
+    getItems: () => ItemRecord[];
+    searchRef: Box<string>;
+    currentTabStopId: Ref<symbol | null>;
+    onItemFocus: (id: symbol) => void;
+    onItemShiftTab: () => void;
+    onItemEnter: (event: PointerEvent) => void;
+    onItemLeave: (event: PointerEvent) => void;
+    onTriggerLeave: (event: PointerEvent) => void;
+    pointerGraceTimer: Box<number>;
+    onPointerGraceIntentChange: (intent: GraceIntent | null) => void;
+};
+export declare const MenuContentContextKey: InjectionKey<MenuContentContext>;
+export declare const useMenuContentContext: () => MenuContentContext;
+/**
+ * State and callbacks of one content element (root or submenu): the item
+ * collection, typeahead buffer, current tab stop and pointer grace area.
+ */
+export declare const provideMenuContentContext: (getContent: () => HTMLElement | null) => {
+    context: MenuContentContext;
+    contentHandlers: (isUsingKeyboard: Box<boolean>) => {
+        onKeydown: (event: KeyboardEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+        onMousedown: () => void;
+        onFocusin: (event: FocusEvent) => void;
+        onFocusout: () => void;
+    };
+    resetSearch: () => void;
+};
+export declare const whenMouse: <E extends PointerEvent>(handler: (event: E) => void) => (event: E) => void;
+export declare const focusFirst: (candidates: HTMLElement[]) => void;
+/** RovingFocusGroup's focus intent for a vertical group */
+export declare const getFocusIntent: (event: KeyboardEvent, dir: Direction) => "first" | "last" | "next" | "prev" | undefined;
+export declare const getOpenState: (open: boolean) => "open" | "closed";
+export declare const isIndeterminate: (checked?: CheckedState) => checked is "indeterminate";
+export declare const getCheckedState: (checked: CheckedState) => "indeterminate" | "checked" | "unchecked";
+type Handler<E extends Event = Event> = (event: E) => void;
+/** Calls a Vue listener value (a function or an array of them). */
+export declare const callListener: (listener: unknown, event: Event) => void;
+/**
+ * Radix's composeEventHandlers: the consumer's handler runs first, ours only
+ * when it did not call preventDefault().
+ */
+export declare const compose: <E extends Event>(consumer: unknown, ours?: Handler<E>, { checkForDefaultPrevented }?: {
+    checkForDefaultPrevented?: boolean | undefined;
+}) => (event: E) => void;
+export type ItemImplHandlers = {
+    onClick?: Handler<MouseEvent>;
+    onClickCapture?: Handler<MouseEvent>;
+    onPointerdown?: Handler<PointerEvent>;
+    onPointerup?: Handler<PointerEvent>;
+    onPointermove?: Handler<PointerEvent>;
+    onPointerleave?: Handler<PointerEvent>;
+    onKeydown?: Handler<KeyboardEvent>;
+    onFocusin?: Handler<FocusEvent>;
+    onFocusout?: Handler<FocusEvent>;
+    onMousedown?: Handler<MouseEvent>;
+};
+/**
+ * One focusable menu item: registers in the content's collection and
+ * returns its attributes plus the handlers of MenuItemImpl and the roving
+ * focus item, run after `outer` (the item kind's own handlers) the way Radix
+ * composes them.
+ */
+export declare const useMenuItemImpl: (disabled: () => boolean) => {
+    element: ShallowRef<HTMLElement | null, HTMLElement | null>;
+    setElement: (el: unknown) => void;
+    attrs: () => {
+        role: string;
+        tabindex: number;
+        "data-orientation": string;
+        "data-highlighted": string | undefined;
+        "aria-disabled": true | undefined;
+        "data-disabled": string | undefined;
+    };
+    handlers: (outer: ItemImplHandlers) => ItemImplHandlers;
+    contentContext: MenuContentContext;
+    rootInternals: MenuRootInternals;
+};
+/**
+ * Radix MenuItem's select behaviour on top of `useMenuItemImpl`: click,
+ * pointer-up selection after a pointer-down elsewhere, Enter / Space.
+ */
+export declare const useMenuItemSelect: (impl: ReturnType<typeof useMenuItemImpl>, disabled: () => boolean, onSelect: () => ((event: Event) => void) | undefined) => {
+    handlers: (consumer: Record<string, unknown>, linkComponent?: boolean) => ItemImplHandlers;
+};
+/**
+ * Every listener of a selectable item: the element's own `listeners` first,
+ * then the item's handlers (the order of Radix's Slot), plus `after`
+ * handlers that run between the two for pointer moves and leaves.
+ */
+export declare const selectableItemListeners: (impl: ReturnType<typeof useMenuItemImpl>, select: ReturnType<typeof useMenuItemSelect>, listeners: Record<string, unknown>, after?: {
+    onPointermove?: Handler<PointerEvent>;
+    onPointerleave?: Handler<PointerEvent>;
+}, linkComponent?: boolean) => {
+    onClick?: Handler<MouseEvent>;
+    onClickCapture?: Handler<MouseEvent>;
+    onPointerdown?: Handler<PointerEvent>;
+    onPointerup?: Handler<PointerEvent>;
+    onPointermove?: Handler<PointerEvent>;
+    onPointerleave?: Handler<PointerEvent>;
+    onKeydown?: Handler<KeyboardEvent>;
+    onFocusin?: Handler<FocusEvent>;
+    onFocusout?: Handler<FocusEvent>;
+    onMousedown?: Handler<MouseEvent>;
+};
+/** Splits Vue attrs into listeners (`onX`) and the rest. */
+export declare const splitListeners: (attrs: Record<string, unknown>) => {
+    listeners: Record<string, unknown>;
+    rest: Record<string, unknown>;
+};
+export {};

package/dist/types/components/OTPInput/OTPInput.d.ts

@@ -0,0 +1,67 @@
+import { type PropType } from "vue";
+/**
+ * Port of packages/ui/src/components/OTPInput/OTPInput.tsx. Controlled with
+ * `value` (`v-model:value`); emits `update:value` and `change` when the
+ * digits change and `complete` when every cell is filled.
+ */
+export declare const OTPInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Number of digit cells. @default 6 */
+    length: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: StringConstructor;
+    /** Group sizes, e.g. [3, 3] puts a gap after the third cell */
+    grouping: PropType<number[]>;
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorMessage: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: string) => true;
+    change: (_value: string) => true;
+    complete: (_value: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Number of digit cells. @default 6 */
+    length: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: StringConstructor;
+    /** Group sizes, e.g. [3, 3] puts a gap after the third cell */
+    grouping: PropType<number[]>;
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorMessage: StringConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((_value: string) => any) | undefined;
+    "onUpdate:value"?: ((_value: string) => any) | undefined;
+    onComplete?: ((_value: string) => any) | undefined;
+}>, {
+    invalid: boolean;
+    disabled: boolean;
+    length: number;
+    autoFocus: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type OTPInputProps = InstanceType<typeof OTPInput>["$props"];

package/dist/types/components/OTPInput/index.d.ts

@@ -0,0 +1 @@
+export { OTPInput, type OTPInputProps } from "./OTPInput.js";

package/dist/types/components/PlexUIProvider/PlexUIProvider.d.ts

@@ -0,0 +1,28 @@
+import { type Component, type InjectionKey, type PropType } from "vue";
+/** Component used to render internal links: `"a"` or your router's link (e.g. vue-router's `RouterLink`). */
+export type LinkComponent = Component | "a";
+type PlexUIContextValue = {
+    linkComponent: LinkComponent;
+};
+export declare const PlexUIContextKey: InjectionKey<PlexUIContextValue>;
+/**
+ * Shared context for all Plex UI components - wrap your app in this
+ * provider to use Plex UI components.
+ *
+ * It only holds the component used for rendering links, like the React
+ * provider.
+ */
+export declare const PlexUIProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    linkComponent: {
+        type: PropType<LinkComponent>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    linkComponent: {
+        type: PropType<LinkComponent>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export {};

package/dist/types/components/PlexUIProvider/index.d.ts

@@ -0,0 +1 @@
+export { PlexUIProvider, type LinkComponent } from "./PlexUIProvider.js";

package/dist/types/components/PlexUIProvider/internal.d.ts

@@ -0,0 +1,4 @@
+import { type ComputedRef } from "vue";
+import { type LinkComponent } from "./PlexUIProvider.js";
+/** The provider's link component, kept current when the provider's prop changes. */
+export declare function useLinkComponent(): ComputedRef<LinkComponent>;

package/dist/types/components/Popover/Popover.d.ts

@@ -0,0 +1,146 @@
+import { type ExtractPropTypes, type PropType } from "vue";
+export type PopoverSide = "top" | "right" | "bottom" | "left";
+export type PopoverAlign = "start" | "center" | "end";
+declare const PopoverComponent: import("vue").DefineComponent<ExtractPropTypes<{
+    /** Controlled visibility (`v-model:open`); uncontrolled when omitted */
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Opens on hover and focus instead of click. @default false */
+    showOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Delay before a hover popover opens, in milliseconds. @default 150 */
+    hoverOpenDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (_nextState: boolean) => true;
+}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
+    /** Controlled visibility (`v-model:open`); uncontrolled when omitted */
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Opens on hover and focus instead of click. @default false */
+    showOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Delay before a hover popover opens, in milliseconds. @default 150 */
+    hoverOpenDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    "onUpdate:open"?: ((_nextState: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    showOnHover: boolean;
+    hoverOpenDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Renders its child (a button, link, ...) as the popover trigger. Like
+ * `Popover.Trigger` in React it takes no other props: attributes on it are
+ * not passed on.
+ */
+export declare const PopoverTrigger: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pointerdown: (_event: PointerEvent) => true;
+    click: (_event: MouseEvent) => true;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClick?: ((_event: MouseEvent) => any) | undefined;
+    onPointerdown?: ((_event: PointerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * The floating panel. `class` lands on the panel. The default slot receives
+ * `{ close, shake }`, the same functions `usePopoverController()` returns.
+ */
+export declare const PopoverContent: import("vue").DefineComponent<ExtractPropTypes<{
+    /** Avoids collisions with the viewport and scroll containers. @default true */
+    avoidCollisions: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** `width` of the popover; numbers are pixels. @default "auto" */
+    width: PropType<number | "auto">;
+    /** `min-width` of the popover; numbers are pixels. @default 300 */
+    minWidth: PropType<number | "auto">;
+    /** `max-width` of the popover, in pixels */
+    maxWidth: NumberConstructor;
+    /** Preferred side of the trigger. @default "bottom" */
+    side: PropType<PopoverSide>;
+    /** Distance from the trigger, in pixels. @default 8 */
+    sideOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Preferred alignment against the trigger. @default "center" */
+    align: PropType<PopoverAlign>;
+    /** Offset from the "start" or "end" alignment, in pixels. @default 0 */
+    alignOffset: NumberConstructor;
+    /** Translucent popover surface. @default false */
+    translucent: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Moves focus into the popover when it opens. @default true */
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
+    /** Avoids collisions with the viewport and scroll containers. @default true */
+    avoidCollisions: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** `width` of the popover; numbers are pixels. @default "auto" */
+    width: PropType<number | "auto">;
+    /** `min-width` of the popover; numbers are pixels. @default 300 */
+    minWidth: PropType<number | "auto">;
+    /** `max-width` of the popover, in pixels */
+    maxWidth: NumberConstructor;
+    /** Preferred side of the trigger. @default "bottom" */
+    side: PropType<PopoverSide>;
+    /** Distance from the trigger, in pixels. @default 8 */
+    sideOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Preferred alignment against the trigger. @default "center" */
+    align: PropType<PopoverAlign>;
+    /** Offset from the "start" or "end" alignment, in pixels. @default 0 */
+    alignOffset: NumberConstructor;
+    /** Translucent popover surface. @default false */
+    translucent: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Moves focus into the popover when it opens. @default true */
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    sideOffset: number;
+    avoidCollisions: boolean;
+    translucent: boolean;
+    autoFocus: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Popover root. Uncontrolled by default; bind `v-model:open` to control it. */
+export declare const Popover: typeof PopoverComponent & {
+    Trigger: typeof PopoverTrigger;
+    Content: typeof PopoverContent;
+};
+export type PopoverProps = InstanceType<typeof PopoverComponent>["$props"];
+export type PopoverContentProps = InstanceType<typeof PopoverContent>["$props"];
+export {};

package/dist/types/components/Popover/deferredPointerDownOutside.d.ts

@@ -0,0 +1,19 @@
+type OutsideEvent = CustomEvent<{
+    originalEvent: PointerEvent;
+}>;
+/**
+ * A layer's own dismiss affordance (a dialog overlay): pressing it dismisses
+ * even when something stops the events, as Radix's dismissable surfaces.
+ */
+export declare const dismissableSurfaces: Set<Element>;
+/**
+ * Listeners for Reka's `pointerDownOutside` and `focusOutside`; `dismiss`
+ * runs on the click that completes a deferred press. `reset` drops a pending
+ * press (the layer closed some other way); unmounting does it too.
+ */
+export declare const useDeferredPointerDownOutside: (dismiss: (originalEvent: PointerEvent) => void) => {
+    onPointerDownOutside: (event: OutsideEvent) => void;
+    onFocusOutside: (event: Event) => void;
+    reset: () => void;
+};
+export {};

package/dist/types/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover, PopoverContent, PopoverTrigger, type PopoverAlign, type PopoverContentProps, type PopoverProps, type PopoverSide, } from "./Popover.js";
+export { usePopoverController } from "./usePopoverController.js";

package/dist/types/components/Popover/pointerIntent.d.ts

@@ -0,0 +1,8 @@
+export type Polygon = Point[];
+type Point = {
+    x: number;
+    y: number;
+};
+export declare const createPointerIntentArea: (event: PointerEvent, hoverTarget: HTMLElement) => Point[];
+export declare function isPointInPolygon(point: Point, polygon: Polygon): boolean;
+export {};

package/dist/types/components/Popover/usePopoverContext.d.ts

@@ -0,0 +1,21 @@
+import { type ComputedRef, type InjectionKey, type Ref } from "vue";
+export type PopoverContextValue = {
+    open: ComputedRef<boolean>;
+    setOpen: (next: boolean) => void;
+    shake: Ref<boolean>;
+    setShake: (next: boolean) => void;
+    showOnHover: ComputedRef<boolean>;
+    temporarilyPreventClickToClose: Ref<boolean>;
+    onTriggerEnter: () => void;
+    onTriggerLeave: () => void;
+    hoverOpenFocusedWithTab: {
+        current: boolean;
+    };
+    isPointerInTransitRef: {
+        current: boolean;
+    };
+    triggerRef: Ref<HTMLElement | null>;
+    contentRef: Ref<HTMLElement | null>;
+};
+export declare const PopoverContextKey: InjectionKey<PopoverContextValue>;
+export declare const usePopoverContext: () => PopoverContextValue;

package/dist/types/components/Popover/usePopoverController.d.ts

@@ -0,0 +1,8 @@
+export declare const usePopoverClose: () => () => void;
+export declare const usePopoverShake: () => () => void;
+export declare const usePopoverController: () => {
+    /** Plays a short shake animation on the popover. */
+    shake: () => void;
+    /** Imperatively closes the popover. */
+    close: () => void;
+};

package/dist/types/components/Progress/Progress.d.ts

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, type PropType } from "vue";
+declare const ProgressComponent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * Current progress value, between `0` and `max`.
+     * Omit (or pass `null`) for an indeterminate state.
+     */
+    value: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    /** Maximum value. @default 100 */
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Accessible value text for the current value. @default "<percentage>%" */
+    getValueLabel: PropType<(value: number, max: number) => string>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Current progress value, between `0` and `max`.
+     * Omit (or pass `null`) for an indeterminate state.
+     */
+    value: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    /** Maximum value. @default 100 */
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Accessible value text for the current value. @default "<percentage>%" */
+    getValueLabel: PropType<(value: number, max: number) => string>;
+}>> & Readonly<{}>, {
+    value: number | null;
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type ProgressOwnProps = InstanceType<typeof ProgressComponent>["$props"];
+/** Progress props plus the native <div> attributes that fall through to the root, as in React. */
+export type ProgressProps = ProgressOwnProps & Omit<HTMLAttributes, keyof ProgressOwnProps>;
+export declare const Progress: typeof ProgressComponent & {
+    new (): {
+        $props: ProgressProps;
+    };
+};
+export {};

package/dist/types/components/Progress/index.d.ts

@@ -0,0 +1 @@
+export { Progress, type ProgressProps } from "./Progress.js";