@opalkelly/frontpanel-react-components 0.1.0

package/dist/cjs/types/primitives/Application/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./Application";

package/dist/cjs/types/primitives/Button/Button.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 ButtonProps from "./Button.props";
+import "../../index.css";
+import "./Button.css";
+interface ButtonCombinedProps extends React.ComponentPropsWithoutRef<"button">, ButtonProps {
+}
+export type { ButtonCombinedProps };
+/**
+ * `Button` is a React component that renders a button with an optional label and optional tooltip.
+ * The button event handlers provide notification when the button is clicked, pressed, or released
+ * and can be used to perform actions in response to these events.
+ *
+ * @component
+ * @param {object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the button
+ *
+ * @returns {React.Node} The rendered Button component
+ *
+ * @example
+ * ```jsx
+ * <Button
+ *     label="Button"
+ *     onButtonClick={() => console.log("Button clicked")} />
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonCombinedProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/cjs/types/primitives/Button/Button.props.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 type ButtonSize = 1 | 2 | 3;
+export type ButtonStateChangeEventHandler = () => void;
+export type ButtonClickEventHandler = () => void;
+/**
+ * Interface for the properties of the `Button` component.
+ */
+interface ButtonProps {
+    /**
+     * Label text to be displayed in the button
+     */
+    label: string;
+    /**
+     * Optional CSS class to apply to the button
+     */
+    className?: string;
+    /**
+     * Optional size of the button
+     * @default 1
+     */
+    size?: ButtonSize;
+    /**
+     * Optional tooltip text to be displayed on hover
+     */
+    tooltip?: string;
+    /**
+     * Optional event handler for the button down event
+     */
+    onButtonDown?: ButtonStateChangeEventHandler;
+    /**
+     * Optional event handler for the button up event
+     */
+    onButtonUp?: ButtonStateChangeEventHandler;
+    /**
+     * Optional event handler for the button click event
+     */
+    onButtonClick?: ButtonClickEventHandler;
+}
+export default ButtonProps;

package/dist/cjs/types/primitives/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Button";
+export { default as ButtonProps } from "./Button.props";
+export { ButtonSize, ButtonStateChangeEventHandler, ButtonClickEventHandler } from "./Button.props";

package/dist/cjs/types/primitives/DigitEntry/DigitEntry.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 DigitEntryProps from "./DigitEntry.props";
+import "../../index.css";
+import "./DigitEntry.css";
+/**
+ * `DigitEntry` is a React component that renders a digit entry field to allow setting the value of the digit represented
+ * in binary, octal, decimal, or hexadecimal number systems. The value of the digit can be entered by key or the current
+ * value can be incremented or decremented using the up and down arrow keys and or the mouse wheel. A maximum and minimum
+ * value can be specified to limit the range of values that the digit entry field can have. Indicators are displayed to
+ * show when the value can be incremented or decremented based on the maximum and minimum values.
+ *
+ * @component
+ * @param {Object} props - Properties passed to component
+ * @param {React.Ref<DigitEntryElement>} forwardedRef - Forwarded ref for the number display
+ *
+ * @returns {React.ReactElement} The rendered DigitEntry component
+ *
+ * @example
+ * ```jsx
+ * <DigitEntry
+ *     value={0}
+ *     maximum={5}
+ *     minimum={2} />
+ * ```
+ */
+declare const DigitEntry: React.FC<DigitEntryProps>;
+export default DigitEntry;

package/dist/cjs/types/primitives/DigitEntry/DigitEntry.props.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 { NumeralSystem } from "../../core";
+export type DigitEntryVariant = "standard" | "compact";
+export type DigitEntrySize = 1 | 2 | 3;
+export type DigitEntryValueChangeEventHandler = (value: number, isKeyDown: boolean) => void;
+/**
+ * Interface for the properties of the `DigitEntry` component.
+ */
+interface DigitEntryProps {
+    /**
+     * The current value of the digit entry
+     */
+    value: number;
+    /**
+     * Optional CSS class to apply to the digit entry
+     */
+    className?: string;
+    /**
+     * The maximum value that the digit entry can have
+     */
+    maximum?: number;
+    /**
+     * The minimum value that the digit entry can have
+     */
+    minimum?: number;
+    /**
+     * The numeral system for the digit entry
+     * @default Decimal
+     */
+    numeralSystem?: NumeralSystem;
+    /**
+     * Size of the digit entry
+     * @default 1
+     */
+    size?: DigitEntrySize;
+    /**
+     * Variant of the digit entry
+     * @default standard
+     */
+    variant?: DigitEntryVariant;
+    /**
+     * Optional event handler for the value changed event
+     */
+    onValueChanged?: DigitEntryValueChangeEventHandler;
+}
+export default DigitEntryProps;

package/dist/cjs/types/primitives/DigitEntry/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 "./DigitEntry";
+export { default as DigitEntryProps } from "./DigitEntry.props";
+export { DigitEntryVariant, DigitEntrySize, DigitEntryValueChangeEventHandler } from "./DigitEntry.props";

package/dist/cjs/types/primitives/Indicator/Indicator.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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 IndicatorProps from "./Indicator.props";
+import "../../index.css";
+import "./Indicator.css";
+/**
+ * `Indicator` is a React component that renders an indicator that represents the state of a boolean value with an
+ * optional tooltip.
+ *
+ * @component
+ * @param {object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the indicator
+ *
+ * @returns {React.Node} The rendered Indicator component
+ *
+ * @example
+ * ```jsx
+ * <Indicator
+ *     label="Indicator"
+ *     state={true} />
+ * ```
+ */
+declare const Indicator: React.ForwardRefExoticComponent<IndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export default Indicator;

package/dist/cjs/types/primitives/Indicator/Indicator.props.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 type IndicatorSize = 1 | 2 | 3;
+export type IndicatorState = boolean;
+/**
+ * Interface for the properties of the `Indicator` component.
+ */
+interface IndicatorProps {
+    /**
+     * Label to be displayed on the indicator
+     */
+    label: string;
+    /**
+     * Current state of the indicator
+     */
+    state: IndicatorState;
+    /**
+     * Optional CSS class to apply to the indicator
+     */
+    className?: string;
+    /**
+     * Optional size of the indicator
+     * @default 1
+     */
+    size?: IndicatorSize;
+    /**
+     * Optional tooltip text to be displayed on hover
+     */
+    tooltip?: string;
+}
+export default IndicatorProps;

package/dist/cjs/types/primitives/Indicator/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 "./Indicator";
+export { default as IndicatorProps } from "./Indicator.props";
+export { IndicatorSize, IndicatorState } from "./Indicator.props";

package/dist/cjs/types/primitives/Label/Label.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 LabelProps from "./Label.props";
+import "../../index.css";
+import "./Label.css";
+/**
+ * `Label` is a React component that renders a label with optional positioning.
+ *
+ * @component
+ * @param {object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the indicator
+ *
+ * @returns {ReactNode} The rendered Label component
+ *
+ * @example
+ * ```jsx
+ * <Label
+ *     text="Label"
+ *     horizontalPosition="left"
+ *     verticalPosition="top">
+ *     <input type="text" />
+ * </Label>
+ * ```
+ */
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLDivElement>>;
+export default Label;

package/dist/cjs/types/primitives/Label/Label.props.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+export type LabelVerticalPosition = "top" | "bottom";
+export type LabelHorizontalPosition = "left" | "right";
+/**
+ * Interface for the properties of the `Label` component.
+ */
+interface LabelProps extends React.PropsWithChildren<NonNullable<unknown>> {
+    /**
+     * Text to be displayed on the label
+     */
+    text: string;
+    /**
+     * Optional CSS class to apply to the label
+     */
+    className?: string;
+    /**
+     * Optional horizontal position of the label, defined in LabelHorizontalPosition
+     * @default "left"
+     */
+    horizontalPosition?: LabelHorizontalPosition;
+    /**
+     * Optional vertical position of the label, defined in LabelVerticalPosition
+     * @default "top"
+     */
+    verticalPosition?: LabelVerticalPosition;
+}
+export default LabelProps;

package/dist/cjs/types/primitives/Label/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 "./Label";
+export { default as LabelProps } from "./Label.props";
+export { LabelHorizontalPosition, LabelVerticalPosition } from "./Label.props";

package/dist/cjs/types/primitives/NumberDisplay/NumberDisplay.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 NumberDisplayProps from "./NumberDisplay.props";
+import "../../index.css";
+import "./NumberDisplay.css";
+/**
+ * `NumberDisplay` is a React component that renders a number represented in binary, octal,
+ * decimal, or hexadecimal numeral systems with optional tooltip. It also allows to
+ * optionally set the decimal scale of the number when using the decimal numeral system.
+ *
+ * @component
+ * @param {object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the NumberDisplay
+ * @returns {React.Node} The rendered NumberDisplay component
+ *
+ * @example
+ * ```jsx
+ * <NumberDisplay
+ *    label="Number Display"
+ *    value={23456}
+ *    maximumValue={65535}
+ *    minimumValue={0} />
+ * ```
+ */
+declare const NumberDisplay: React.ForwardRefExoticComponent<NumberDisplayProps & React.RefAttributes<HTMLDivElement>>;
+export default NumberDisplay;

package/dist/cjs/types/primitives/NumberDisplay/NumberDisplay.props.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 { NumeralSystem } from "../../core";
+import { LabelProps } from "../Label";
+export type NumberDisplaySize = 1 | 2 | 3;
+/**
+ * Interface for the properties of the `NumberDisplay` component.
+ */
+interface NumberDisplayProps {
+    /**
+     * Current value to be displayed
+     */
+    value: bigint;
+    /**
+     * Maximum value that can be displayed
+     */
+    maximumValue: bigint;
+    /**
+     * Minimum value that can be displayed
+     */
+    minimumValue: bigint;
+    /**
+     * Optional CSS class to apply to the number display
+     */
+    className?: string;
+    /**
+     * Optional label properties for the number display
+     */
+    label?: LabelProps;
+    /**
+     * Optional size of the number display
+     * @default 1
+     */
+    size?: NumberDisplaySize;
+    /**
+     * Optional tooltip text to be displayed on hover
+     */
+    tooltip?: string;
+    /**
+     * Optional numeral system to be used for the number display, defined in NumeralSystem
+     */
+    numeralSystem?: NumeralSystem;
+    /**
+     * Optional decimal scale for the number entry (Only used when numeral system is NumeralSystem.Decimal)
+     */
+    decimalScale?: number;
+}
+export default NumberDisplayProps;

package/dist/cjs/types/primitives/NumberDisplay/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 "./NumberDisplay";
+export { default as NumberDisplayProps } from "./NumberDisplay.props";
+export { NumberDisplaySize } from "./NumberDisplay.props";

package/dist/cjs/types/primitives/NumberEntry/NumberEntry.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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 NumberEntryProps from "./NumberEntry.props";
+import "../../index.css";
+import "./NumberEntry.css";
+/**
+ * `NumberEntry` is a React component that renders a number entry field to allow setting the value of a number
+ * represented in binary, octal, decimal, or hexadecimal numeral systems. The values of the individual digits of
+ * the number can be entered by key or they can incremented and decremented using the up and down arrow keys and or
+ * the mouse wheel. The maximum and minimum values of the number can be specified to limit the range of values that
+ * that can be set. Each individual digit shows an indicator to show if the value of that digit can be incremented
+ * or decremented based on the maximum and minimum values.
+ *
+ * @component
+ * @param {Object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the number display
+ *
+ * @returns {React.Node} The rendered NumberEntry component.
+ *
+ * @example
+ * ```jsx
+ * <NumberEntry
+ *     value={0}
+ *     maximumValue={65535}
+ *     minimumValue={0} />
+ * ```
+ */
+declare const NumberEntry: React.ForwardRefExoticComponent<NumberEntryProps & React.RefAttributes<HTMLDivElement>>;
+export default NumberEntry;

package/dist/cjs/types/primitives/NumberEntry/NumberEntry.props.d.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 { NumeralSystem } from "../../core";
+import { LabelProps } from "../Label";
+import { DigitEntryVariant } from "../DigitEntry";
+export type NumberEntrySize = 1 | 2 | 3;
+export type NumberEntryValueChangeEventHandler = (value: bigint) => void;
+/**
+ * Interface for the properties of the `NumberEntry` component.
+ */
+interface NumberEntryProps {
+    /**
+     * Current value of the number entry
+     */
+    value: bigint;
+    /**
+     * Maximum value that can be entered
+     */
+    maximumValue: bigint;
+    /**
+     * Minimum value that can be entered
+     */
+    minimumValue: bigint;
+    /**
+     * Optional CSS class to apply to the number entry
+     */
+    className?: string;
+    /**
+     * Optional decimal scale for the number entry (Only used when numeral system is NumeralSystem.Decimal)
+     */
+    decimalScale?: number;
+    /**
+     * Optional disable the number entry
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional label properties for the number entry
+     */
+    label?: LabelProps;
+    /**
+     * Optional numeral system to be used for the number entry, defined in NumeralSystem
+     * @default Decimal
+     */
+    numeralSystem?: NumeralSystem;
+    /**
+     * Optional Size of the number entry
+     * @default 1
+     */
+    size?: NumberEntrySize;
+    /**
+     * Optional tooltip text to be displayed on hover
+     */
+    tooltip?: string;
+    /**
+     * Optional variant of the digit entry
+     * @default standard
+     */
+    variant?: DigitEntryVariant;
+    /**
+     * Optional event handler for the value changed event
+     */
+    onValueChange?: NumberEntryValueChangeEventHandler;
+}
+export default NumberEntryProps;

package/dist/cjs/types/primitives/NumberEntry/NumberEntryDigits.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 NumberEntryDigitsProps from "./NumberEntryDigits.props";
+import "../../index.css";
+import "./NumberEntry.css";
+/**
+ * `NumberEntryDigits` is a React component that renders a list of `DigitEntry` components.
+ * Each `DigitEntry` represents a digit in a number entry field.
+ * The digits are displayed in the specified numeral system and can be incremented and decremented.
+ *
+ * @component
+ * @param {Object} props - The properties that define the `NumberEntryDigits` component.
+ * @param {number} props.size - The size of the digits in the number entry field. Default is 1.
+ * @param {number} props.numeralSystem - The numeral system to use for displaying the digits.
+ * @param {number} props.decimalScale - The scale of the decimal part of the number entry field. Default is 0.
+ * @param {Array} props.digitStates - An array of objects that represent the state of each digit in the number entry field.
+ * @param {function} props.onDigitStatesChange - Function to be called when the state of any digit in the number entry field changes.
+ *
+ * @returns {React.ReactElement} The `NumberEntryDigits` component.
+ */
+declare const NumberEntryDigits: React.FC<NumberEntryDigitsProps>;
+export default NumberEntryDigits;

package/dist/cjs/types/primitives/NumberEntry/NumberEntryDigits.props.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 { NumeralSystem } from "../../core";
+import { DigitEntryVariant } from "../DigitEntry";
+export type DigitEntrySize = 1 | 2 | 3;
+export type DigitEntryStatesChangeEventHandler = (digitStates: readonly DigitEntryState[], isKeyDown: boolean) => void;
+export type DigitEntryState = {
+    id: number;
+    value: number;
+    maximum?: number;
+    minimum?: number;
+};
+interface NumberEntryDigitsProps {
+    /**
+     * Variant of the digit entry
+     */
+    variant?: DigitEntryVariant;
+    /**
+     * Size of the digit entry
+     */
+    size: DigitEntrySize;
+    /**
+     * Numeral system to be used for the number entry, defined in NumeralSystem enum
+     */
+    numeralSystem: NumeralSystem;
+    /**
+     * Current value of the number entry
+     */
+    digitStates: DigitEntryState[];
+    /**
+     * Optional decimal scale for the number entry (Only used when numeral system is NumeralSystem.Decimal)
+     */
+    decimalScale?: number;
+    /**
+     * Event handler for the number entries state change event
+     */
+    onDigitStatesChange?: DigitEntryStatesChangeEventHandler;
+}
+export default NumberEntryDigitsProps;

package/dist/cjs/types/primitives/NumberEntry/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 "./NumberEntry";
+export { default as NumberEntryProps } from "./NumberEntry.props";
+export { NumberEntrySize, NumberEntryValueChangeEventHandler } from "./NumberEntry.props";

package/dist/cjs/types/primitives/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 RangeSliderProps from "./RangeSlider.props";
+import "../../index.css";
+import "./RangeSlider.css";
+/**
+ * `RangeSlider` is a React component that renders a range slider to allow setting a value within a specified
+ * range by clicking and dragging the slider thumb or by using the arrow keys. The slider can optionally show
+ * a label and/or a tooltip.
+ *
+ * @component
+ * @param {object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the range slider
+ *
+ * @returns {React.Node} The rendered RangeSlider component
+ *
+ * @example
+ * ```jsx
+ * <RangeSlider
+ *    defaultValue={50}
+ *    maximumValue={100}
+ *    minimumValue={0}
+ *    valueStep={1}
+ *    onValueChange={(value) => console.log(value)} />
+ * ```
+ */
+declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<HTMLSpanElement>>;
+export default RangeSlider;