@opalkelly/frontpanel-react-components 0.1.0

package/src/components/FrontPanelRangeSlider/FrontPanelRangeSlider.tsx

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import React from "react";
+
+import { RangeSlider } from "../../primitives";
+
+import FrontPanelRangeSliderProps from "./FrontPanelRangeSlider.props";
+
+import { FrontPanelContext } from "../../contexts";
+
+import { CalculateBitLength } from "../../core";
+
+import { IFrontPanel } from "@opalkelly/frontpanel-alloy-core";
+
+type FrontPanelRangeSliderElement = React.ElementRef<typeof RangeSlider>;
+
+interface FrontPanelRangeSliderCombinedProps
+    extends Omit<
+            React.ComponentPropsWithoutRef<typeof RangeSlider>,
+            "defaultValue" | "value" | "maximumValue" | "onValueChange" | "onValueCommit"
+        >,
+        FrontPanelRangeSliderProps {}
+
+export type { FrontPanelRangeSliderCombinedProps };
+
+/**
+ * `FrontPanelRangeSlider` is a React component that renders a range slider to allow setting the value of a WireIn endpoint
+ * within a specified range of values by clicking and dragging the slider thumb or by using the arrow keys.
+ *
+ * @component
+ * @param {object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the range slider
+ *
+ * @returns {React.Node} The rendered FrontPanelRangeSlider component
+ *
+ * @example
+ * ```jsx
+ * <FrontPanelRangeSlider
+ *     fpEndpoint={{epAddress: 0x00, bitOffset: 1}}
+ *     maximumValue=0xff />
+ * ```
+ */
+const FrontPanelRangeSlider = React.forwardRef<
+    FrontPanelRangeSliderElement,
+    FrontPanelRangeSliderCombinedProps
+>((props, forwardedRef) => {
+    const [value, setValue] = React.useState<bigint>(0n);
+
+    const { device, workQueue } = React.useContext(FrontPanelContext);
+
+    const { fpEndpoint, maximumValue, ...rootProps } = props;
+
+    const targetBitLength: number = React.useMemo(() => {
+        return CalculateBitLength(BigInt(maximumValue));
+    }, [maximumValue]);
+
+    const targetWireBitMask =
+        ((1n << BigInt(targetBitLength)) - 1n) << BigInt(fpEndpoint.bitOffset);
+
+    const onUpdateWireValue = React.useCallback(
+        async (sender: IFrontPanel): Promise<void> => {
+            await workQueue.Post(async () => {
+                const sourceWireValue = await sender.getWireInValue(fpEndpoint.epAddress);
+                const sourceValue =
+                    (BigInt(sourceWireValue) & targetWireBitMask) >> BigInt(fpEndpoint.bitOffset);
+                setValue(sourceValue);
+            });
+        },
+        [fpEndpoint, targetWireBitMask]
+    );
+
+    const onSelectedValueChangeHandler = React.useCallback(
+        (value: number) => {
+            workQueue.Post(async () => {
+                await device.setWireInValue(
+                    fpEndpoint.epAddress,
+                    value << fpEndpoint.bitOffset,
+                    Number(targetWireBitMask)
+                );
+                await device.updateWireIns();
+            });
+        },
+        [device, fpEndpoint, workQueue, targetWireBitMask]
+    );
+
+    React.useEffect(() => {
+        onUpdateWireValue(device);
+    }, [device, onUpdateWireValue]);
+
+    return (
+        <RangeSlider
+            {...rootProps}
+            ref={forwardedRef}
+            defaultValue={Number(value)}
+            maximumValue={maximumValue}
+            onValueChange={onSelectedValueChangeHandler}
+        />
+    );
+});
+
+FrontPanelRangeSlider.displayName = "FrontPanelRangeSlider";
+
+export default FrontPanelRangeSlider;

package/src/components/FrontPanelRangeSlider/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+export { default } from "./FrontPanelRangeSlider";
+
+export { default as FrontPanelRangeSliderProps } from "./FrontPanelRangeSlider.props";

package/src/components/FrontPanelSelectEntry/FrontPanelSelectEntry.stories.tsx

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import React, { useContext } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import withApplication from "../../stories/decorators/Application.decorator";
+import withFrontPanel from "../../stories/decorators/FrontPanel.decorator";
+
+import FrontPanelSelectEntry from "./FrontPanelSelectEntry";
+
+import { FrontPanelContext } from "../../contexts";
+
+import { WireValue } from "@opalkelly/frontpanel-alloy-core";
+
+// Configure Story metadata
+const meta = {
+    title: "Components/FrontPanel/FrontPanelSelectEntry",
+    component: FrontPanelSelectEntry.Root,
+    parameters: {
+        layout: "centered" // Center the component in the Canvas
+    },
+    tags: ["autodocs"], // Automatically generate documentation
+    argTypes: {
+        size: {
+            control: { type: "range", min: 1, max: 3, step: 1 }
+        },
+        disabled: { control: "boolean" }
+    }
+} satisfies Meta<typeof FrontPanelSelectEntry.Root>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Primary Story
+export const Primary: Story = {
+    render: ({ ...args }) => {
+        const { device, workQueue } = useContext(FrontPanelContext);
+
+        const setWireInPromises: Promise<void>[] = [];
+
+        // Initialize the WireIns with unique values.
+        workQueue.Post(async (): Promise<void> => {
+            let byteId = 0;
+
+            for (let address = 0x0; address < 0x20; address++) {
+                let wireValue: WireValue = byteId++;
+                for (let byteIndex = 1; byteIndex < 4; byteIndex++) {
+                    wireValue |= byteId++ << (8 * byteIndex);
+                }
+                setWireInPromises.push(device.setWireInValue(address, wireValue, 0xffffffff));
+            }
+
+            await Promise.all(setWireInPromises);
+            await device.updateWireIns();
+        });
+
+        const { maximumValue, ...props } = args;
+
+        return (
+            <FrontPanelSelectEntry.Root maximumValue={0xffffffffn} {...props}>
+                <FrontPanelSelectEntry.Trigger />
+                <FrontPanelSelectEntry.Content>
+                    <FrontPanelSelectEntry.Group>
+                        <FrontPanelSelectEntry.Label>Fruit Group</FrontPanelSelectEntry.Label>
+                        <FrontPanelSelectEntry.Item value="0">Apple</FrontPanelSelectEntry.Item>
+                        <FrontPanelSelectEntry.Item value="4294967295">
+                            Orange
+                        </FrontPanelSelectEntry.Item>
+                        <FrontPanelSelectEntry.Item value="3740249613" disabled>
+                            Grape
+                        </FrontPanelSelectEntry.Item>
+                    </FrontPanelSelectEntry.Group>
+                    <FrontPanelSelectEntry.Separator />
+                    <FrontPanelSelectEntry.Group>
+                        <FrontPanelSelectEntry.Label>Vegetable Group</FrontPanelSelectEntry.Label>
+                        <FrontPanelSelectEntry.Item value="3735928559">
+                            Carrot
+                        </FrontPanelSelectEntry.Item>
+                        <FrontPanelSelectEntry.Item value="4272750592">
+                            Potato
+                        </FrontPanelSelectEntry.Item>
+                    </FrontPanelSelectEntry.Group>
+                </FrontPanelSelectEntry.Content>
+            </FrontPanelSelectEntry.Root>
+        );
+    },
+    decorators: [withApplication, withFrontPanel],
+    args: {
+        fpEndpoint: { epAddress: 0x00, bitOffset: 1 },
+        // Optional Properties
+        disabled: false,
+        label: {
+            text: "Select Item",
+            verticalPosition: "top",
+            horizontalPosition: "left"
+        },
+        size: 1,
+        tooltip: "Select an item from the list"
+    }
+};

package/src/components/FrontPanelSelectEntry/FrontPanelSelectEntry.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import FrontPanelSelectEntryRoot from "./FrontPanelSelectEntryRoot";
+
+import SelectEntryContent from "../../primitives/SelectEntry/SelectEntryContent";
+import SelectEntryGroup from "../../primitives/SelectEntry/SelectEntryGroup";
+import SelectEntryItem from "../../primitives/SelectEntry/SelectEntryItem";
+import SelectEntryLabel from "../../primitives/SelectEntry/SelectEntryLabel";
+import SelectEntrySeparator from "../../primitives/SelectEntry/SelectEntrySeparator";
+import SelectEntryTrigger from "../../primitives/SelectEntry/SelectEntryTrigger";
+
+const FrontPanelSelectEntry = Object.assign(
+    {},
+    {
+        Root: FrontPanelSelectEntryRoot,
+        Trigger: SelectEntryTrigger,
+        Content: SelectEntryContent,
+        Item: SelectEntryItem,
+        Group: SelectEntryGroup,
+        Label: SelectEntryLabel,
+        Separator: SelectEntrySeparator
+    }
+);
+
+export default FrontPanelSelectEntry;

package/src/components/FrontPanelSelectEntry/FrontPanelSelectEntryRoot.props.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import { EndpointAddressProps } from "../types";
+
+/**
+ * Interface for the properties of the `FrontPanelSelectEntryRoot` component.
+ */
+interface FrontPanelSelectEntryRootProps {
+    /**
+     * Address of the frontpanel endpoint
+     */
+    fpEndpoint: EndpointAddressProps;
+
+    /**
+     * Maximum value that the select entry will allow
+     */
+    maximumValue: bigint;
+}
+
+export default FrontPanelSelectEntryRootProps;

package/src/components/FrontPanelSelectEntry/FrontPanelSelectEntryRoot.tsx

@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import React from "react";
+
+import { SelectEntry } from "../../primitives";
+
+import FrontPanelSelectEntryRootProps from "./FrontPanelSelectEntryRoot.props";
+
+import { FrontPanelContext } from "../../contexts";
+
+import { CalculateBitLength } from "../../core";
+
+import { IFrontPanel, WIREIN_ADDRESS_RANGE } from "@opalkelly/frontpanel-alloy-core";
+
+interface FrontPanelSelectEntryRootCombinedProps
+    extends React.ComponentPropsWithoutRef<typeof SelectEntry.Root>,
+        FrontPanelSelectEntryRootProps {}
+
+export type { FrontPanelSelectEntryRootCombinedProps };
+
+/**
+ * `FrontPanelSelectEntryRoot` is a React component that is the root component of a select entry that
+ * allows setting a WireIn endpoint. The children of this component are used to specify the component
+ * parts. The parts include the trigger that can be clicked on to show a list of options to select from,
+ * and the content that is the list of options.
+ *
+ * @component
+ * @param {object} props - Properties passed to component
+ * @param {object} rootProps - Any additional properties to pass to the root component
+ *
+ * @returns {React.Node} The rendered FrontPanelSelectEntryRoot component
+ *
+ * @example
+ * ```jsx
+ * <FrontPanelSelectEntryRoot
+ *     fpEndpoint={{epAddress: 0x00, bitOffset: 1}}
+ *     maximumValue=2 />
+ *     <FrontPanelSelectEntry.Trigger />
+ *     <FrontPanelSelectEntry.Content>
+ *         <FrontPanelSelectEntry.Group>
+ *             <FrontPanelSelectEntry.Label>Options</FrontPanelSelectEntry.Label>
+ *             <FrontPanelSelectEntry.Item value="0">Option 0</FrontPanelSelectEntry.Option>
+ *             <FrontPanelSelectEntry.Item value="1">Option 1</FrontPanelSelectEntry.Option>
+ *             <FrontPanelSelectEntry.Item value="2">Option 2</FrontPanelSelectEntry.Option>
+ *         </FrontPanelSelectEntry.Group>
+ *    </FrontPanelSelectEntry.Content>
+ * </FrontPanelSelectEntryRoot>
+ * ```
+ */
+const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps> = (props) => {
+    const [value, setValue] = React.useState<bigint>(0n);
+
+    const { device, workQueue } = React.useContext(FrontPanelContext);
+
+    const { fpEndpoint, maximumValue, ...rootProps } = props;
+
+    const targetBitLength: number = React.useMemo(() => {
+        return CalculateBitLength(maximumValue);
+    }, [maximumValue]);
+
+    const targetWireSpanBitMask =
+        ((1n << BigInt(targetBitLength)) - 1n) << BigInt(fpEndpoint.bitOffset);
+
+    const onUpdateWireValue = React.useCallback(
+        async (sender: IFrontPanel): Promise<void> => {
+            await workQueue.Post(async () => {
+                // Get the wire value for the endpoint
+                let sourceWireValue = await sender.getWireInValue(fpEndpoint.epAddress);
+                let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
+                let sourceSpanValue =
+                    (BigInt(sourceWireValue) & targetWireBitMask) >> BigInt(fpEndpoint.bitOffset);
+
+                if (targetWireSpanBitMask > 0xffffffffn) {
+                    // The operations spans multiple endpoints
+                    let currentWireSpanBitOffset = 32n - BigInt(fpEndpoint.bitOffset);
+                    let currentWireSpanBitMask = targetWireSpanBitMask >> 32n;
+
+                    for (
+                        let sourceWireAddress = fpEndpoint.epAddress + 1;
+                        sourceWireAddress <= WIREIN_ADDRESS_RANGE.Maximum &&
+                        currentWireSpanBitMask > 0n;
+                        sourceWireAddress++
+                    ) {
+                        // Get the wire value for the next endpoint
+                        sourceWireValue = await sender.getWireInValue(sourceWireAddress);
+                        targetWireBitMask = currentWireSpanBitMask & 0xffffffffn;
+                        sourceSpanValue |=
+                            (BigInt(sourceWireValue) & targetWireBitMask) <<
+                            currentWireSpanBitOffset;
+
+                        currentWireSpanBitOffset += 32n;
+                        currentWireSpanBitMask >>= 32n;
+                    }
+                }
+
+                setValue(sourceSpanValue);
+            });
+        },
+        [fpEndpoint, targetWireSpanBitMask]
+    );
+
+    const onSelectedValueChangeHandler = React.useCallback(
+        (value: string) => {
+            const targetWireSpanValue = BigInt(value);
+            workQueue.Post(async () => {
+                let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
+                let targetWireValue = Number(
+                    (targetWireSpanValue << BigInt(fpEndpoint.bitOffset)) & targetWireBitMask
+                );
+
+                // Set the wire value for the endpoint
+                await device.setWireInValue(
+                    fpEndpoint.epAddress,
+                    targetWireValue,
+                    Number(targetWireBitMask)
+                );
+
+                if (targetWireSpanBitMask > 0xffffffffn) {
+                    // The operations spans multiple endpoints
+                    let currentWireSpanBitOffset = 32n - BigInt(fpEndpoint.bitOffset);
+                    let currentWireSpanBitMask = targetWireSpanBitMask >> 32n;
+
+                    const maxWireCount = 0x20 - fpEndpoint.epAddress;
+
+                    for (
+                        let wireIndex = 1;
+                        wireIndex < maxWireCount && currentWireSpanBitMask > 0n;
+                        wireIndex++
+                    ) {
+                        targetWireBitMask = currentWireSpanBitMask & 0xffffffffn;
+                        targetWireValue = Number(
+                            (targetWireSpanValue >> currentWireSpanBitOffset) & targetWireBitMask
+                        );
+
+                        // Set the wire value for the next endpoint
+                        await device.setWireInValue(
+                            fpEndpoint.epAddress + wireIndex,
+                            targetWireValue,
+                            Number(targetWireBitMask)
+                        );
+
+                        currentWireSpanBitOffset += 32n;
+                        currentWireSpanBitMask >>= 32n;
+                    }
+                }
+
+                await device.updateWireIns();
+            });
+
+            onUpdateWireValue(device);
+        },
+        [device, fpEndpoint, workQueue, onUpdateWireValue]
+    );
+
+    React.useEffect(() => {
+        onUpdateWireValue(device);
+    }, [device, onUpdateWireValue]);
+
+    return (
+        <SelectEntry.Root
+            {...rootProps}
+            value={value.toString()}
+            onValueChange={onSelectedValueChangeHandler}
+        />
+    );
+};
+
+FrontPanelSelectEntryRoot.displayName = "FrontPanelSelectEntryRoot";
+
+export default FrontPanelSelectEntryRoot;

package/src/components/FrontPanelSelectEntry/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+export { default as FrontPanelSelectEntry } from "./FrontPanelSelectEntry";
+export { default as FrontPanelSelectEntryRoot } from "./FrontPanelSelectEntryRoot";
+export { default as FrontPanelSelectEntryTrigger } from "../../primitives/SelectEntry/SelectEntryTrigger";
+export { default as FrontPanelSelectEntryContent } from "../../primitives/SelectEntry/SelectEntryContent";
+export { default as FrontPanelSelectEntryItem } from "../../primitives/SelectEntry/SelectEntryItem";
+export { default as FrontPanelSelectEntryGroup } from "../../primitives/SelectEntry/SelectEntryGroup";
+export { default as FrontPanelSelectEntryLabel } from "../../primitives/SelectEntry/SelectEntryLabel";
+export { default as FrontPanelSelectEntrySeparator } from "../../primitives/SelectEntry/SelectEntrySeparator";
+
+export { default as FrontPanelSelectEntryRootProps } from "./FrontPanelSelectEntryRoot.props";

package/src/components/FrontPanelToggleSwitch/FrontPanelToggleSwitch.props.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import { EndpointAddressProps } from "../types";
+
+/**
+ * Interface for the properties of the `FrontPanelToggleSwitch` component.
+ */
+interface FrontPanelToggleSwitchProps {
+    /**
+     * Address of the frontpanel endpoint
+     */
+    fpEndpoint: EndpointAddressProps;
+}
+
+export default FrontPanelToggleSwitchProps;

package/src/components/FrontPanelToggleSwitch/FrontPanelToggleSwitch.stories.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import withApplication from "../../stories/decorators/Application.decorator";
+import withFrontPanel from "../../stories/decorators/FrontPanel.decorator";
+
+import FrontPanelToggleSwitch from "./FrontPanelToggleSwitch";
+
+// Configure Story metadata
+const meta = {
+    title: "Components/FrontPanel/FrontPanelToggleSwitch",
+    component: FrontPanelToggleSwitch,
+    parameters: {
+        layout: "centered" // Center the component in the Canvas
+    },
+    tags: ["autodocs"], // Automatically generate documentation
+    argTypes: {
+        size: {
+            control: { type: "range", min: 1, max: 3, step: 1 }
+        },
+        disabled: { control: "boolean" }
+    }
+} satisfies Meta<typeof FrontPanelToggleSwitch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+//Primary Story
+export const Primary: Story = {
+    decorators: [withApplication, withFrontPanel],
+    args: {
+        label: "Toggle Wire",
+        fpEndpoint: { epAddress: 0x00, bitOffset: 1 },
+        // Optional Properties
+        disabled: false,
+        size: 1,
+        tooltip: "Wire endpoint toggle switch"
+    }
+};

package/src/components/FrontPanelToggleSwitch/FrontPanelToggleSwitch.tsx

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+import React from "react";
+
+import { IFrontPanel, WireValue } from "@opalkelly/frontpanel-alloy-core";
+
+import { ToggleState } from "../../core";
+
+import { ToggleSwitch } from "../../primitives";
+
+import { FrontPanelContext } from "../../contexts";
+
+import FrontPanelToggleSwitchProps from "./FrontPanelToggleSwitch.props";
+
+type FrontPanelToggleSwitchElement = React.ElementRef<typeof ToggleSwitch>;
+
+interface FrontPanelToggleSwitchCombinedProps
+    extends Omit<
+            React.ComponentPropsWithoutRef<typeof ToggleSwitch>,
+            "state" | "onToggleStateChanged"
+        >,
+        FrontPanelToggleSwitchProps {}
+
+export type { FrontPanelToggleSwitchCombinedProps };
+
+/**
+ * `FrontPanelToggleSwitch` is a React component that renders a toggle switch with an optional label and or tooltip
+ *  to toggle the state of a WireIn endpoint.
+ *
+ * @component
+ * @param {Object} props - The properties that define the `FrontPanelToggleSwitch` component.
+ * @param {React.Ref<FrontPanelToggleSwitchElement>} forwardedRef - A ref that is forwarded to the `FrontPanelToggleSwitch` component.
+ *
+ * @returns {React.ReactElement} The `FrontPanelToggleSwitch` component.
+ *
+ * @example
+ * ```jsx
+ * <FrontPanelToggleSwitch
+ *    label="Toggle"
+ *    fpEndpoint={{epAddress: 0x00, bitOffset: 1}} />
+ * ```
+ */
+const FrontPanelToggleSwitch = React.forwardRef<
+    FrontPanelToggleSwitchElement,
+    FrontPanelToggleSwitchCombinedProps
+>((props, forwardedRef) => {
+    const [state, setState] = React.useState<ToggleState>(ToggleState.Off);
+
+    const { device, workQueue } = React.useContext(FrontPanelContext);
+
+    const { fpEndpoint, ...buttonProps } = props;
+
+    const targetWireBitMask = 1 << fpEndpoint.bitOffset;
+
+    const onUpdateWireValue = React.useCallback(
+        async (sender: IFrontPanel): Promise<void> => {
+            await workQueue.Post(async () => {
+                // Set the toggle state based on the value of the target bit of the Wire endpoint
+                const sourceWireValue = await sender.getWireInValue(fpEndpoint.epAddress);
+                const sourceBitValue = (sourceWireValue & targetWireBitMask) === targetWireBitMask;
+                const newToggleState = sourceBitValue ? ToggleState.On : ToggleState.Off;
+                setState(newToggleState);
+            });
+        },
+        [fpEndpoint, targetWireBitMask]
+    );
+
+    const onToggleStateChanged = React.useCallback(
+        async (state: ToggleState): Promise<void> => {
+            await workQueue.Post(async () => {
+                // Set the value of the target bit of the Wire endpoint based on the toggle state
+                const targetWireValue: WireValue = state === ToggleState.On ? 0xffffffff : 0;
+
+                await device.setWireInValue(
+                    fpEndpoint.epAddress,
+                    targetWireValue,
+                    targetWireBitMask
+                );
+                await device.updateWireIns();
+            });
+
+            onUpdateWireValue(device);
+        },
+        [device, fpEndpoint, targetWireBitMask, workQueue]
+    );
+
+    React.useEffect(() => {
+        onUpdateWireValue(device);
+    }, [device, onUpdateWireValue]);
+
+    return (
+        <ToggleSwitch
+            ref={forwardedRef}
+            {...buttonProps}
+            state={state}
+            onToggleStateChanged={onToggleStateChanged}
+        />
+    );
+});
+
+FrontPanelToggleSwitch.displayName = "FrontPanelToggleSwitch";
+
+export default FrontPanelToggleSwitch;

package/src/components/FrontPanelToggleSwitch/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2024 Opal Kelly Incorporated
+ *
+ * This source code is licensed under the FrontPanel license.
+ * See the LICENSE file found in the root directory of this project.
+ */
+
+export { default } from "./FrontPanelToggleSwitch";
+
+export { default as FrontPanelToggleSwitchProps } from "./FrontPanelToggleSwitch.props";