@decky/ui 3.26.0

package/dist/components/TextField.d.ts

@@ -0,0 +1,22 @@
+import { ChangeEventHandler, HTMLAttributes, ReactNode, FC } from 'react';
+export interface TextFieldProps extends HTMLAttributes<HTMLInputElement> {
+    label?: ReactNode;
+    requiredLabel?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    bShowCopyAction?: boolean;
+    bShowClearAction?: boolean;
+    bAlwaysShowClearAction?: boolean;
+    bIsPassword?: boolean;
+    rangeMin?: number;
+    rangeMax?: number;
+    mustBeNumeric?: boolean;
+    mustBeURL?: boolean;
+    mustBeEmail?: boolean;
+    focusOnMount?: boolean;
+    tooltip?: string;
+    inlineControls?: ReactNode;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    value?: string;
+}
+export declare const TextField: FC<TextFieldProps>;

package/dist/components/TextField.js

@@ -0,0 +1,2 @@
+import { CommonUIModule } from '../webpack';
+export const TextField = Object.values(CommonUIModule).find((mod) => mod?.validateUrl && mod?.validateEmail);

package/dist/components/Toggle.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface ToggleProps {
+    value: boolean;
+    disabled?: boolean;
+    onChange?(checked: boolean): void;
+    navRef?: any;
+}
+export declare const Toggle: FC<ToggleProps>;

package/dist/components/Toggle.js

@@ -0,0 +1,2 @@
+import { CommonUIModule } from '../webpack';
+export const Toggle = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('.ToggleOff)'));

package/dist/components/ToggleField.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ItemProps } from './Item';
+export interface ToggleFieldProps extends ItemProps {
+    highlightOnFocus?: boolean;
+    checked: boolean;
+    disabled?: boolean;
+    onChange?(checked: boolean): void;
+}
+export declare const ToggleField: FC<ToggleFieldProps>;

package/dist/components/ToggleField.js

@@ -0,0 +1,2 @@
+import { CommonUIModule } from '../webpack';
+export const ToggleField = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('ToggleField,fallback'));

package/dist/components/index.d.ts

@@ -0,0 +1,25 @@
+export * from './Button';
+export * from './ButtonItem';
+export * from './Carousel';
+export * from './ControlsList';
+export * from './Dialog';
+export * from './DialogCheckbox';
+export * from './Dropdown';
+export * from './Field';
+export * from './Focusable';
+export * from './FocusRing';
+export * from './FooterLegend';
+export * from './Marquee';
+export * from './Menu';
+export * from './Modal';
+export * from './Panel';
+export * from './ProgressBar';
+export * from './SidebarNavigation';
+export * from './SliderField';
+export * from './Spinner';
+export * from './SteamSpinner';
+export * from './Tabs';
+export * from './TextField';
+export * from './Toggle';
+export * from './ToggleField';
+export * from './Scroll';

package/dist/components/index.js

@@ -0,0 +1,25 @@
+export * from './Button';
+export * from './ButtonItem';
+export * from './Carousel';
+export * from './ControlsList';
+export * from './Dialog';
+export * from './DialogCheckbox';
+export * from './Dropdown';
+export * from './Field';
+export * from './Focusable';
+export * from './FocusRing';
+export * from './FooterLegend';
+export * from './Marquee';
+export * from './Menu';
+export * from './Modal';
+export * from './Panel';
+export * from './ProgressBar';
+export * from './SidebarNavigation';
+export * from './SliderField';
+export * from './Spinner';
+export * from './SteamSpinner';
+export * from './Tabs';
+export * from './TextField';
+export * from './Toggle';
+export * from './ToggleField';
+export * from './Scroll';

package/dist/custom-components/ColorPickerModal.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+interface ColorPickerModalProps {
+    closeModal: () => void;
+    onConfirm?(HSLString: string): any;
+    title?: string;
+    defaultH?: number;
+    defaultS?: number;
+    defaultL?: number;
+    defaultA?: number;
+}
+export declare const ColorPickerModal: FC<ColorPickerModalProps>;
+export {};

package/dist/custom-components/ColorPickerModal.js

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { ConfirmModal, SliderField } from '../components';
+import { gamepadSliderClasses } from '../utils/static-classes';
+export const ColorPickerModal = ({ closeModal, onConfirm = () => { }, title = 'Color Picker', defaultH = 0, defaultS = 100, defaultL = 50, defaultA = 1, }) => {
+    const [H, setH] = useState(defaultH);
+    const [S, setS] = useState(defaultS);
+    const [L, setL] = useState(defaultL);
+    const [A, setA] = useState(defaultA);
+    const colorPickerCSSVars = {
+        '--decky-color-picker-hvalue': `${H}`,
+        '--decky-color-picker-svalue': `${S}%`,
+        '--decky-color-picker-lvalue': `${L}%`,
+        '--decky-color-picker-avalue': `${A}`,
+    };
+    return (window.SP_REACT.createElement(ConfirmModal, { bAllowFullSize: true, onCancel: closeModal, onOK: () => {
+            onConfirm(`hsla(${H}, ${S}%, ${L}%, ${A})`);
+            closeModal();
+        } },
+        window.SP_REACT.createElement("style", null, `
+        /* This removes the cyan track color that is behind the slider head */
+        .ColorPicker_Container .${gamepadSliderClasses.SliderTrack} {
+          --left-track-color: #0000;
+          /* This is for compatibility with the "Colored Toggles" CSSLoader Theme*/
+          --colored-toggles-main-color: #0000;
+        }
+
+        .ColorPicker_HSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            270deg,
+            hsla(360, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(270, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(180, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(90, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(0, var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_SSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), 0%, var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), 100%, var(--decky-color-picker-lvalue), var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_LSlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 0%, var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 50%, var(--decky-color-picker-avalue)),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), 100%, var(--decky-color-picker-avalue))
+          );
+        }
+
+        .ColorPicker_ASlider .${gamepadSliderClasses.SliderTrack} {
+          background: linear-gradient(
+            90deg,
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), 0),
+            hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), 1)
+          );
+        }
+        `),
+        window.SP_REACT.createElement("div", { className: "ColorPicker_ColorDisplayContainer", style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: '1em',
+                marginTop: '-2.5em',
+            } },
+            window.SP_REACT.createElement("div", null,
+                window.SP_REACT.createElement("span", { style: { fontSize: '1.5em' } },
+                    window.SP_REACT.createElement("b", null, title))),
+            window.SP_REACT.createElement("div", { style: {
+                    backgroundColor: `hsla(${H}, ${S}%, ${L}%, ${A})`,
+                    width: '40px',
+                    height: '40px',
+                } })),
+        window.SP_REACT.createElement("div", { className: "ColorPicker_Container", style: colorPickerCSSVars },
+            window.SP_REACT.createElement("div", { className: "ColorPicker_HSlider" },
+                window.SP_REACT.createElement(SliderField, { showValue: true, editableValue: true, label: "Hue", value: H, min: 0, max: 360, onChange: setH })),
+            window.SP_REACT.createElement("div", { className: "ColorPicker_SSlider" },
+                window.SP_REACT.createElement(SliderField, { showValue: true, editableValue: true, label: "Saturation", value: S, min: 0, max: 100, onChange: setS })),
+            window.SP_REACT.createElement("div", { className: "ColorPicker_LSlider" },
+                window.SP_REACT.createElement(SliderField, { showValue: true, editableValue: true, label: "Lightness", value: L, min: 0, max: 100, onChange: setL })),
+            window.SP_REACT.createElement("div", { className: "ColorPicker_ASlider" },
+                window.SP_REACT.createElement(SliderField, { showValue: true, editableValue: true, label: "Alpha", value: A, step: 0.1, min: 0, max: 1, onChange: setA })))));
+};

package/dist/custom-components/ReorderableList.d.ts

@@ -0,0 +1,26 @@
+import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
+import { FieldProps } from '../components';
+export type ReorderableEntry<T> = {
+    label: ReactNode;
+    data?: T;
+    position: number;
+};
+export type ReorderableListProps<T> = {
+    entries: ReorderableEntry<T>[];
+    onSave: (entries: ReorderableEntry<T>[]) => void;
+    interactables?: JSXElementConstructor<{
+        entry: ReorderableEntry<T>;
+    }>;
+    fieldProps?: FieldProps;
+    animate?: boolean;
+};
+export declare function ReorderableList<T>(props: ReorderableListProps<T>): JSX.Element;
+export type ReorderableListEntryProps<T> = {
+    fieldProps?: FieldProps;
+    listData: ReorderableEntry<T>[];
+    entryData: ReorderableEntry<T>;
+    reorderEntryFunc: CallableFunction;
+    reorderEnabled: boolean;
+    animate: boolean;
+    children: ReactElement | null;
+};

package/dist/custom-components/ReorderableList.js

@@ -0,0 +1,84 @@
+import { Fragment, useEffect, useState } from 'react';
+import { Field, Focusable, GamepadButton } from '../components';
+export function ReorderableList(props) {
+    if (props.animate === undefined)
+        props.animate = true;
+    const [entryList, setEntryList] = useState(props.entries.sort((a, b) => a.position - b.position));
+    const [reorderEnabled, setReorderEnabled] = useState(false);
+    useEffect(() => {
+        setEntryList(props.entries.sort((a, b) => a.position - b.position));
+    }, [props.entries]);
+    function toggleReorderEnabled() {
+        let newReorderValue = !reorderEnabled;
+        setReorderEnabled(newReorderValue);
+        if (!newReorderValue) {
+            props.onSave(entryList);
+        }
+    }
+    function saveOnBackout(e) {
+        const event = e;
+        if (event.detail.button == GamepadButton.CANCEL && reorderEnabled) {
+            setReorderEnabled(!reorderEnabled);
+            props.onSave(entryList);
+        }
+    }
+    return (window.SP_REACT.createElement(Fragment, null,
+        window.SP_REACT.createElement("div", { style: {
+                width: 'inherit',
+                height: 'inherit',
+                flex: '1 1 1px',
+                scrollPadding: '48px 0px',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-start',
+                alignContent: 'stretch',
+            } },
+            window.SP_REACT.createElement(Focusable, { onSecondaryButton: toggleReorderEnabled, onSecondaryActionDescription: reorderEnabled ? 'Save Order' : 'Reorder', onClick: toggleReorderEnabled, onButtonDown: saveOnBackout }, entryList.map((entry) => (window.SP_REACT.createElement(ReorderableItem, { animate: props.animate, listData: entryList, entryData: entry, reorderEntryFunc: setEntryList, reorderEnabled: reorderEnabled, fieldProps: props.fieldProps }, props.interactables ? window.SP_REACT.createElement(props.interactables, { entry: entry }) : null)))))));
+}
+function ReorderableItem(props) {
+    const [isSelected, _setIsSelected] = useState(false);
+    const [isSelectedLastFrame, setIsSelectedLastFrame] = useState(false);
+    const listEntries = props.listData;
+    function onReorder(e) {
+        if (!props.reorderEnabled)
+            return;
+        const event = e;
+        const currentIdx = listEntries.findIndex((entryData) => entryData === props.entryData);
+        const currentIdxValue = listEntries[currentIdx];
+        if (currentIdx < 0)
+            return;
+        let targetPosition = -1;
+        if (event.detail.button == GamepadButton.DIR_DOWN) {
+            targetPosition = currentIdxValue.position + 1;
+        }
+        else if (event.detail.button == GamepadButton.DIR_UP) {
+            targetPosition = currentIdxValue.position - 1;
+        }
+        if (targetPosition >= listEntries.length || targetPosition < 0)
+            return;
+        let otherToUpdate = listEntries.find((entryData) => entryData.position === targetPosition);
+        if (!otherToUpdate)
+            return;
+        let currentPosition = currentIdxValue.position;
+        currentIdxValue.position = otherToUpdate.position;
+        otherToUpdate.position = currentPosition;
+        props.reorderEntryFunc([...listEntries].sort((a, b) => a.position - b.position));
+    }
+    async function setIsSelected(val) {
+        _setIsSelected(val);
+        for (let i = 0; i < 3; i++)
+            await new Promise((res) => requestAnimationFrame(res));
+        setIsSelectedLastFrame(val);
+    }
+    return (window.SP_REACT.createElement("div", { style: props.animate
+            ? {
+                transition: isSelected || isSelectedLastFrame
+                    ? ''
+                    : 'transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1)',
+                transform: !props.reorderEnabled || isSelected ? 'scale(1)' : 'scale(0.9)',
+                opacity: !props.reorderEnabled || isSelected ? 1 : 0.7,
+            }
+            : {} },
+        window.SP_REACT.createElement(Field, { label: props.entryData.label, ...props.fieldProps, focusable: !props.children, onButtonDown: onReorder, onGamepadBlur: () => setIsSelected(false), onGamepadFocus: () => setIsSelected(true) },
+            window.SP_REACT.createElement(Focusable, { style: { display: 'flex', width: '100%', position: 'relative' } }, props.children))));
+}

package/dist/custom-components/SuspensefulImage.d.ts

@@ -0,0 +1,7 @@
+import { FC, ImgHTMLAttributes } from 'react';
+interface SuspensefulImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    suspenseWidth?: string | number;
+    suspenseHeight?: string | number;
+}
+export declare const SuspensefulImage: FC<SuspensefulImageProps>;
+export {};

package/dist/custom-components/SuspensefulImage.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { Spinner } from '../components';
+export const SuspensefulImage = (props) => {
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+    useEffect(() => {
+        setLoading(true);
+        setError(false);
+        const img = new Image();
+        img.src = props.src || '';
+        img.addEventListener('load', () => {
+            setLoading(false);
+        });
+        img.addEventListener('error', () => {
+            setError(true);
+        });
+    }, [props.src]);
+    return loading ? (window.SP_REACT.createElement("div", { style: {
+            width: props.suspenseWidth || props.style?.width,
+            height: props.suspenseHeight || props.style?.height,
+            background: 'rgba(255, 255, 255, 0.2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        } }, error ? 'Missing image' : window.SP_REACT.createElement(Spinner, { style: { height: '48px' } }))) : (window.SP_REACT.createElement("img", { ...props }));
+};

package/dist/custom-components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SuspensefulImage';
+export * from './ColorPickerModal';
+export * from './ReorderableList';

package/dist/custom-components/index.js

@@ -0,0 +1,3 @@
+export * from './SuspensefulImage';
+export * from './ColorPickerModal';
+export * from './ReorderableList';

package/dist/custom-hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useQuickAccessVisible';

package/dist/custom-hooks/index.js

@@ -0,0 +1 @@
+export * from './useQuickAccessVisible';

package/dist/custom-hooks/useQuickAccessVisible.d.ts

@@ -0,0 +1 @@
+export declare function useQuickAccessVisible(): boolean;

package/dist/custom-hooks/useQuickAccessVisible.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { getGamepadNavigationTrees } from '../utils';
+function getQuickAccessWindow() {
+    const navTrees = getGamepadNavigationTrees();
+    return (navTrees.find((tree) => tree?.id === 'QuickAccess-NA')?.m_Root?.m_element?.ownerDocument.defaultView ?? null);
+}
+export function useQuickAccessVisible() {
+    const [isHidden, setIsHidden] = useState(getQuickAccessWindow()?.document.hidden ?? false);
+    useEffect(() => {
+        const quickAccessWindow = getQuickAccessWindow();
+        if (quickAccessWindow === null) {
+            console.error('Could not get window of QuickAccess menu!');
+            return;
+        }
+        const onVisibilityChange = () => setIsHidden(quickAccessWindow.document.hidden);
+        quickAccessWindow.addEventListener('visibilitychange', onVisibilityChange);
+        return () => {
+            quickAccessWindow.removeEventListener('visibilitychange', onVisibilityChange);
+        };
+    }, []);
+    return !isHidden;
+}

package/dist/deck-hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useParams';

package/dist/deck-hooks/index.js

@@ -0,0 +1 @@
+export * from './useParams';

package/dist/deck-hooks/useParams.d.ts

@@ -0,0 +1 @@
+export declare const useParams: <T>() => T;

package/dist/deck-hooks/useParams.js

@@ -0,0 +1,2 @@
+import { ReactRouter } from '../webpack';
+export const useParams = Object.values(ReactRouter).find((val) => /return (\w)\?\1\.params:{}/.test(`${val}`));