@opalkelly/frontpanel-react-components 0.1.0

package/dist/esm/types/primitives/SelectEntry/SelectEntryContent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+import "../../index.css";
+import "./SelectEntryContent.css";
+interface SelectContentCombinedProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+    container?: React.ComponentProps<typeof SelectPrimitive.Portal>["container"];
+}
+export type { SelectContentCombinedProps };
+declare const SelectEntryContent: React.ForwardRefExoticComponent<SelectContentCombinedProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectEntryContent;

package/dist/esm/types/primitives/SelectEntry/SelectEntryGroup.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+import "../../index.css";
+import "./SelectEntryGroup.css";
+interface SelectEntryGroupCombinedProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {
+}
+export type { SelectEntryGroupCombinedProps };
+declare const SelectEntryGroup: React.ForwardRefExoticComponent<SelectEntryGroupCombinedProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectEntryGroup;

package/dist/esm/types/primitives/SelectEntry/SelectEntryItem.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+import "../../index.css";
+import "./SelectEntryItem.css";
+interface SelectEntryItemCombinedProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+}
+export type { SelectEntryItemCombinedProps };
+declare const SelectEntryItem: React.ForwardRefExoticComponent<SelectEntryItemCombinedProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectEntryItem;

package/dist/esm/types/primitives/SelectEntry/SelectEntryLabel.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+import "../../index.css";
+import "./SelectEntryLabel.css";
+interface SelectEntryLabelCombinedProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {
+}
+export type { SelectEntryLabelCombinedProps };
+declare const SelectEntryLabel: React.ForwardRefExoticComponent<SelectEntryLabelCombinedProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectEntryLabel;

package/dist/esm/types/primitives/SelectEntry/SelectEntryRoot.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+import SelectEntryRootProps from "./SelectEntryRoot.props";
+export declare const SelectEntryContext: React.Context<SelectEntryRootCombinedProps>;
+interface SelectEntryRootCombinedProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, SelectEntryRootProps {
+}
+export type { SelectEntryRootCombinedProps };
+/**
+ * `SelectEntryRoot` is a React component that is the root component of a select entry. 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
+ *
+ * @returns {ReactNode} The rendered SelectEntryRoot component
+ *
+ * @example
+ * ```jsx
+ * <SelectEntryRoot>
+ *     <SelectEntry.Trigger />
+ *     <SelectEntry.Content>
+ *         <SelectEntry.Group>
+ *            <SelectEntry.Label>Options</SelectEntry.Label>
+ *            <SelectEntry.Item value="0">Option 0</SelectEntry.Item>
+ *            <SelectEntry.Item value="1">Option 1</SelectEntry.Item>
+ *        </SelectEntry.Group>
+ *     </SelectEntry.Content>
+ * </SelectEntryRoot>
+ * ```
+ */
+declare const SelectEntryRoot: React.FC<SelectEntryRootCombinedProps>;
+export default SelectEntryRoot;

package/dist/esm/types/primitives/SelectEntry/SelectEntryRoot.props.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 LabelProps from "../Label/Label.props";
+export type SelectEntrySize = 1 | 2 | 3;
+/**
+ * Interface for the properties of the `SelectEntryRoot` component.
+ */
+interface SelectEntryRootProps {
+    /**
+     * Optional CSS class to apply to the select entry root
+     */
+    className?: string;
+    /**
+     * Optional label properties for the select entry root
+     */
+    label?: LabelProps;
+    /**
+     * Optional size of the select entry root
+     * @default 1
+     */
+    size?: SelectEntrySize;
+    /**
+     * Optional tooltip text to be displayed on hover
+     */
+    tooltip?: string;
+}
+export default SelectEntryRootProps;

package/dist/esm/types/primitives/SelectEntry/SelectEntrySeparator.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+import "../../index.css";
+import "./SelectEntrySeparator.css";
+interface SelectEntrySeparatorCombinedProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {
+}
+export type { SelectEntrySeparatorCombinedProps };
+declare const SelectEntrySeparator: React.ForwardRefExoticComponent<SelectEntrySeparatorCombinedProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectEntrySeparator;

package/dist/esm/types/primitives/SelectEntry/SelectEntryTrigger.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 * as SelectPrimitive from "@radix-ui/react-select";
+import SelectEntryTriggerProps from "./SelectEntryTrigger.props";
+import "../../index.css";
+import "./SelectEntryTrigger.css";
+interface SelectEntryTriggerCombinedProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, "asChild">, SelectEntryTriggerProps {
+}
+export type { SelectEntryTriggerCombinedProps };
+declare const SelectEntryTrigger: React.ForwardRefExoticComponent<SelectEntryTriggerCombinedProps & React.RefAttributes<HTMLButtonElement>>;
+export default SelectEntryTrigger;

package/dist/esm/types/primitives/SelectEntry/SelectEntryTrigger.props.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+/**
+ * Interface for the properties of the `SelectEntryTrigger` component.
+ */
+interface SelectEntryTriggerProps {
+    /**
+     * Optional placeholder text to be displayed when no value is selected
+     */
+    placeholder?: string;
+}
+export default SelectEntryTriggerProps;

package/dist/esm/types/primitives/SelectEntry/index.d.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 } from "./SelectEntry";
+export { default as SelectEntryRoot } from "./SelectEntryRoot";
+export { default as SelectEntryTrigger } from "./SelectEntryTrigger";
+export { default as SelectEntryContent } from "./SelectEntryContent";
+export { default as SelectEntryItem } from "./SelectEntryItem";
+export { default as SelectEntryGroup } from "./SelectEntryGroup";
+export { default as SelectEntryLabel } from "./SelectEntryLabel";
+export { default as SelectEntrySeparator } from "./SelectEntrySeparator";
+export { default as SelectEntryRootProps } from "./SelectEntryRoot.props";
+export { SelectEntrySize } from "./SelectEntryRoot.props";
+export { default as SelectEntryTriggerProps } from "./SelectEntryTrigger.props";

package/dist/esm/types/primitives/Toggle/Toggle.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.
+ */
+import React from "react";
+import ToggleProps from "./Toggle.props";
+import "../../index.css";
+import "./Toggle.css";
+interface ToggleCombinedProps extends React.ComponentPropsWithoutRef<"button">, ToggleProps {
+}
+export type { ToggleCombinedProps };
+/**
+ * `Toggle` is a React component that renders a toggle button to toggle between an "on" and "off"
+ * state when the button is clicked. Notification of the state transtion is provided through the
+ * `onToggleStateChanged` event handler.
+ *
+ * @component
+ * @param {Object} props - The properties that define the `Toggle` component.
+ * @param {React.Ref<ToggleElement>} forwardedRef - A ref that is forwarded to the `Toggle` component.
+ *
+ * @returns {React.ReactElement} The `Toggle` component.
+ *
+ * @example
+ * ```jsx
+ * <Toggle
+ *    state={ToggleState.On}
+ *    onToggleStateChanged={(newState) => console.log(newState)}>
+ *   <span>Toggle<span>
+ * </Toggle>
+ * ```
+ */
+declare const Toggle: React.ForwardRefExoticComponent<ToggleCombinedProps & React.RefAttributes<HTMLButtonElement>>;
+export default Toggle;

package/dist/esm/types/primitives/Toggle/Toggle.props.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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" />
+import { ToggleState } from "../../core";
+export type ToggleSize = 1 | 2 | 3;
+export type ToggleStateChangeEventHandler = (state: ToggleState) => void;
+/**
+ * Interface for the properties of the `Toggle` component.
+ */
+interface ToggleProps extends React.PropsWithChildren<NonNullable<unknown>> {
+    /**
+     * Current state of the toggle, defined in ToggleState
+     */
+    state: ToggleState;
+    /**
+     * Optional CSS class to apply to the toggle
+     */
+    className?: string;
+    /**
+     * Optional size of the toggle
+     * @default 1
+     */
+    size?: ToggleSize;
+    /**
+     * Optional tooltip text to be displayed on hover
+     */
+    tooltip?: string;
+    /**
+     * Optional event handler for the toggle state change event
+     */
+    onToggleStateChanged?: ToggleStateChangeEventHandler;
+}
+export default ToggleProps;

package/dist/esm/types/primitives/Toggle/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 "./Toggle";
+export { default as ToggleProps } from "./Toggle.props";
+export { ToggleSize, ToggleStateChangeEventHandler } from "./Toggle.props";

package/dist/esm/types/primitives/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 ToggleSwitchProps from "./ToggleSwitch.props";
+import "../../index.css";
+import "./ToggleSwitch.css";
+/**
+ * `ToggleSwitch` is a React component that renders a toggle switch with a label and a switch button
+ * that represents the current toggle state. When the switch is clicked, the toggle
+ * state will transition to the next state. Notification of the state transtion is provided through the
+ * `onToggleStateChanged` event handler.
+ *
+ * @component
+ * @param {Object} props - Properties passed to component
+ * @param {React.Ref<ToggleSwitchElement>} forwardedRef - Forwarded ref for the button
+ *
+ * @returns {React.ReactElement} The rendered ToggleSwitch component
+ *
+ * @example
+ * ```jsx
+ * <ToggleSwitch
+ *     label="Toggle"
+ *     state={ToggleState.On}
+ *     onToggleStateChanged={(newState) => console.log(newState)} />
+ * ```
+ */
+declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export default ToggleSwitch;

package/dist/esm/types/primitives/ToggleSwitch/ToggleSwitch.props.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 ToggleProps from "../Toggle/Toggle.props";
+/**
+ * Interface for the properties of the `ToggleSwitch` component.
+ */
+interface ToggleSwitchProps extends ToggleProps {
+    /**
+     * Label to be displayed on the toggle switch
+     */
+    label: string;
+    /**
+     * Optional disable the toggle switch
+     * @default false
+     */
+    disabled?: boolean;
+}
+export default ToggleSwitchProps;

package/dist/esm/types/primitives/ToggleSwitch/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 "./ToggleSwitch";
+export { default as ToggleSwitchProps } from "./ToggleSwitch.props";

package/dist/esm/types/primitives/Tooltip/Tooltip.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.
+ */
+import React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import TooltipProps from "./Tooltip.props";
+import "../../index.css";
+import "./Tooltip.css";
+interface TooltipCombinedProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>, Omit<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, "content">, TooltipProps {
+    content: NonNullable<TooltipProps["content"]>;
+    container?: React.ComponentProps<typeof TooltipPrimitive.Portal>["container"];
+}
+export type { TooltipCombinedProps };
+/**
+ * `Tooltip` is a React component that displays a popup with text when the mouse cursor hovers
+ * over the child component.
+ *
+ * @component *
+ * @param {object} props - Properties passed to component
+ * @param {React.Ref} forwardedRef - Forwarded ref for the button
+ *
+ * @returns {ReactElement} The rendered Tooltip component
+ *
+ * @example
+ * ```jsx
+ * <Tooltip content="Tooltip text">
+ *   <button>Hover over me</button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipCombinedProps & React.RefAttributes<HTMLDivElement>>;
+export default Tooltip;

package/dist/esm/types/primitives/Tooltip/Tooltip.props.d.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.
+ */
+import { ReactNode } from "react";
+/**
+ * Interface for the properties of the `Tooltip` component.
+ */
+interface TooltipProps extends React.PropsWithChildren<NonNullable<unknown>> {
+    /**
+     * Content to be displayed within the tooltip
+     */
+    content: ReactNode;
+}
+export default TooltipProps;

package/dist/esm/types/primitives/Tooltip/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 "./Tooltip";
+export { default as TooltipProps } from "./Tooltip.props";

package/dist/esm/types/primitives/TooltipUtility.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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, { ReactNode } from "react";
+interface TooltipProps {
+    tooltip?: string;
+}
+export declare function withTooltip<T extends TooltipProps>(targetComponent: ReactNode): (props: T) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+export {};

package/dist/esm/types/primitives/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 Application } from "./Application";
+export { default as Button } from "./Button";
+export { ButtonSize, ButtonStateChangeEventHandler, ButtonClickEventHandler } from "./Button";
+export { default as Indicator } from "./Indicator";
+export { IndicatorSize, IndicatorState } from "./Indicator";
+export { default as Label } from "./Label";
+export { LabelHorizontalPosition, LabelVerticalPosition } from "./Label";
+export { default as NumberDisplay } from "./NumberDisplay";
+export { NumberDisplaySize } from "./NumberDisplay";
+export { default as NumberEntry } from "./NumberEntry";
+export { NumberEntrySize, NumberEntryValueChangeEventHandler } from "./NumberEntry";
+export { default as RangeSlider } from "./RangeSlider";
+export { default as SelectEntry, SelectEntryRoot, SelectEntryTrigger, SelectEntryContent, SelectEntryItem, SelectEntryGroup, SelectEntryLabel, SelectEntrySeparator } from "./SelectEntry";
+export { SelectEntrySize } from "./SelectEntry";
+export { default as Toggle } from "./Toggle";
+export { ToggleSize, ToggleStateChangeEventHandler } from "./Toggle";
+export { default as ToggleSwitch } from "./ToggleSwitch";
+export { default as Tooltip } from "./Tooltip";