@datalayer/core 0.0.1 → 0.0.3

package/lib/components/nbgrader/NbGradesDetails.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Heading, Text } from "@primer/react";
+import { Box } from "@datalayer/primer-addons";
+export const NbGradesDetails = (props) => {
+    const { studentItem } = props;
+    return (studentItem && studentItem?.nbgrades ?
+        _jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: studentItem?.nbgrades.map(nb => {
+                        return _jsx(Box, { children: _jsxs(Text, { sx: { fontSize: "small" }, children: [nb.grade_id_s, ": ", nb.score_f] }) });
+                    }) }), _jsx(Box, { mt: 3, children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Total" }) }), _jsxs(Box, { mt: 3, children: [studentItem?.nbgradesTotalScore, " / ", studentItem?.nbgradesTotalPoints] })] })
+        :
+            _jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: "Please grade your assignment." })] }));
+};
+export default NbGradesDetails;

package/lib/components/nbgrader/index.d.ts

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

package/lib/components/nbgrader/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './NbGradesDetails';

package/lib/components/notebooks/JupyterNotebook.d.ts

@@ -0,0 +1,12 @@
+import { BoxPanel } from '@lumino/widgets';
+type IJupyterNotebooProps = {
+    boxPanel: BoxPanel;
+    height?: string;
+};
+export declare const JupyterNotebook: {
+    (props: IJupyterNotebooProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        height: string;
+    };
+};
+export default JupyterNotebook;

package/lib/components/notebooks/JupyterNotebook.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Box } from "@datalayer/primer-addons";
+import { Lumino } from '@datalayer/jupyter-react';
+export const JupyterNotebook = (props) => {
+    const { boxPanel, height } = props;
+    return (_jsx("div", { style: { position: 'relative' }, children: _jsx(Box, { className: "jp-LabShell", sx: {
+                position: 'relative',
+                '& .dla-Jupyter-Notebook': {
+                    height,
+                    maxHeight: 1000,
+                    width: '100%'
+                },
+                '& .jp-MainAreaWidget': {
+                    width: '100%',
+                    height,
+                },
+                '& .jp-Toolbar': {
+                    width: '100% !important'
+                },
+                '& .jp-NotebookPanel-notebook': {
+                    width: '100% !important',
+                    height,
+                },
+                '& .lm-mod-hidden': {
+                    display: 'unset !important'
+                }
+            }, children: _jsx(Lumino, { children: boxPanel }) }) }));
+};
+JupyterNotebook.defaultProps = {
+    height: '100%',
+};
+export default JupyterNotebook;

package/lib/components/notebooks/JupyterNotebookToolbar.d.ts

@@ -0,0 +1,2 @@
+export declare const JupyterNotebookToolbar: () => import("react/jsx-runtime").JSX.Element;
+export default JupyterNotebookToolbar;

package/lib/components/notebooks/JupyterNotebookToolbar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { CircleCurrentColorIcon, CircleGreenIcon, CircleOrangeIcon } from '@datalayer/icons-react';
+import { Text } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { Sparklines, SparklinesBars, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
+import { DatalayerThemeProvider } from '../../theme';
+function boxMullerRandom() {
+    let phase = false;
+    let x1;
+    let x2;
+    let w;
+    return (function () {
+        if ((phase = !phase)) {
+            do {
+                x1 = 2.0 * Math.random() - 1.0;
+                x2 = 2.0 * Math.random() - 1.0;
+                w = x1 * x1 + x2 * x2;
+            } while (w >= 1.0);
+            w = Math.sqrt((-2.0 * Math.log(w)) / w);
+            return x1 * w;
+        }
+        else {
+            return x2 * w;
+        }
+    })();
+}
+function randomData(n = 30) {
+    return Array.apply(0, Array(n)).map(boxMullerRandom);
+}
+const SAMPLE_DATA_30 = randomData(30);
+const SAMPLE_DATA_100 = randomData(100);
+export const JupyterNotebookToolbar = () => {
+    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { display: "flex", m: 5, children: [_jsxs(Box, { ml: 3, children: [_jsx(Box, { mb: 3, children: _jsx(Text, { children: "Notebook Kernel: python3" }) }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { width: 100, height: 100, children: _jsxs(Sparklines, { data: SAMPLE_DATA_30, children: [_jsx(SparklinesLine, { color: "#fa7e17" }), _jsx(SparklinesReferenceLine, { type: "mean" })] }) }), _jsx(Box, { width: 100, height: 100, ml: 3, children: _jsxs(Sparklines, { data: SAMPLE_DATA_100, children: [_jsx(SparklinesBars, { style: { fill: '#41c3f9', fillOpacity: '.25' } }), _jsx(SparklinesLine, { style: { stroke: '#41c3f9', fill: 'none' } })] }) })] })] }), _jsxs(Box, { ml: 6, children: [_jsx(Box, { mb: 3, children: _jsx(Text, { children: "Running Cells" }) }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsx(CircleGreenIcon, {}) }), _jsx(Box, { children: _jsx(CircleCurrentColorIcon, { style: { color: 'white' } }) }), _jsx(Box, { children: _jsx(CircleCurrentColorIcon, { style: { color: 'white' } }) }), _jsx(Box, { children: _jsx(CircleOrangeIcon, {}) }), _jsx(Box, { children: _jsx(CircleGreenIcon, {}) }), _jsx(Box, { children: _jsx(CircleCurrentColorIcon, { style: { color: 'white' } }) })] })] }), _jsx(Box, { ml: 6, children: _jsx(Box, { mb: 3, children: _jsx(Text, { children: "Credit: 12/100" }) }) })] }) }));
+};
+export default JupyterNotebookToolbar;

package/lib/components/notebooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './JupyterNotebook';
+export * from './JupyterNotebookToolbar';

package/lib/components/notebooks/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './JupyterNotebook';
+export * from './JupyterNotebookToolbar';

package/lib/components/primer/Helper.d.ts

@@ -0,0 +1,32 @@
+import React, { Ref, PropsWithChildren } from 'react';
+import { AnimateProps } from '@primer/react-brand';
+/**
+ * Layout
+ */
+export declare const Container: ({ children, style }: {
+    children: React.ReactElement[] | React.ReactElement;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+type RedlineBackgroundProps = {
+    height?: number;
+    hasBorder?: boolean;
+};
+export declare function RedlineBackground({ height, hasBorder, ...rest }: PropsWithChildren<RedlineBackgroundProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Base Types
+ *
+ * Component helper type to be extended by component types, e.g.:
+ * type CustomComponentProps = BaseProps<HTMLDivElement> & { ... }
+ *
+ * Example use:
+ *   const CustomComponent = forwardRef<HTMLDivElement, CustomComponentProps>(({className, ...props}, ref) => { ... })
+ *   // OR:
+ *   const CustomComponent = forwardRef(({className: CustomComponentProps, ...props}, ref: Ref<HTMLDivElement>) => { ... })
+ */
+export type BaseProps<T> = {
+    className?: string;
+    id?: string;
+    ref?: Ref<T>;
+    animate?: AnimateProps;
+};
+export {};

package/lib/components/primer/Helper.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Layout
+ */
+export const Container = ({ children, style }) => _jsx("div", { style: { maxWidth: 1024, margin: '0 auto', ...style }, children: children });
+export function RedlineBackground({ height, hasBorder = true, ...rest }) {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            overflow: 'hidden',
+            border: hasBorder ? '1px solid var(--base-color-scale-red-2)' : undefined,
+            backgroundImage: 'linear-gradient(45deg, var(--base-color-scale-red-0) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 50%, var(--base-color-scale-red-0) 50%, var(--base-color-scale-red-0) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 100%)',
+            backgroundSize: '5.66px 5.66px',
+            WebkitBoxPack: 'center',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height
+        }, ...rest }));
+}

package/lib/components/primer/Portals.d.ts

@@ -0,0 +1,9 @@
+import "@primer/react-brand/lib/css/main.css";
+/**
+ * Ensure we define a root for Primer portal root.
+ *
+ *  @see https://github.com/primer/react/blob/main/packages/react/src/Portal/Portal.tsx#L23
+ *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
+ */
+export declare const setupPrimerPortals: () => void;
+export default setupPrimerPortals;

package/lib/components/primer/Portals.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { registerPortalRoot } from "@primer/react";
+// import { render } from 'react-dom';
+// import { Styles } from './Styles';
+const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
+import "@primer/react-brand/lib/css/main.css";
+/**
+ * Ensure we define a root for Primer portal root.
+ *
+ *  @see https://github.com/primer/react/blob/main/packages/react/src/Portal/Portal.tsx#L23
+ *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
+ */
+export const setupPrimerPortals = () => {
+    const div = document.body;
+    div.dataset['portalRoot'] = 'true';
+    div.dataset['colorMode'] = 'light';
+    div.dataset['lightTheme'] = 'light';
+    div.dataset['darkTheme'] = 'dark';
+    div.id = PRIMER_PORTAL_ROOT_ID;
+    registerPortalRoot(div);
+    //  render(<Styles/>, div);
+};
+export default setupPrimerPortals;

package/lib/components/primer/Styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Styles: () => import("react/jsx-runtime").JSX.Element;
+export default Styles;

package/lib/components/primer/Styles.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { ThemeProvider, BaseStyles } from '@primer/react';
+import { jupyterLabTheme } from '@datalayer/jupyter-react';
+export const Styles = () => {
+    return _jsx(_Fragment, { children: _jsx(ThemeProvider, { theme: jupyterLabTheme, children: _jsx(BaseStyles, {}) }) });
+};
+export default Styles;

package/lib/components/primer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Helper';
+export * from './Portals';

package/lib/components/primer/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './Helper';
+export * from './Portals';

package/lib/components/progress/ConsumptionBar.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Consumption progress bar properties
+ */
+export interface IConsumptionBarProps {
+    /**
+     * Credits burning rate per second
+     */
+    burningRate: number;
+    /**
+     * Consumption start timestamp
+     */
+    startedAt: number;
+    /**
+     * Consumption expiration timestamp
+     */
+    expiredAt?: number;
+    /**
+     * Progress bar refresh interval in milliseconds
+     */
+    refreshInterval?: number;
+    /**
+     * Component CSS styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback on progress bar click event
+     */
+    onClick?: () => void;
+    /**
+     * Callback on progress update.
+     *
+     * Progress is a percentage between 0 and 100.
+     * Duration is the kernel max duration in seconds.
+     */
+    onUpdate?: (progress: number, duration: number) => void;
+}
+/**
+ * Consumption progress bar
+ */
+export declare function ConsumptionBar(props: IConsumptionBarProps): JSX.Element;

package/lib/components/progress/ConsumptionBar.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { ProgressBar, Tooltip, Button } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { useInterval } from 'usehooks-ts';
+const CRITICAL_LEVEL = 90;
+const WARNING_LEVEL = 75;
+/**
+ * Consumption progress bar
+ */
+export function ConsumptionBar(props) {
+    const { expiredAt, startedAt, burningRate, onClick, onUpdate, refreshInterval = 2000, style } = props;
+    const duration = useMemo(() => (expiredAt ? expiredAt - startedAt : Date.now() / 1000 - startedAt), [expiredAt, startedAt]);
+    const [progress, setProgress] = useState(expiredAt
+        ? Math.min(Math.max(0, ((Date.now() / 1000 - startedAt) / duration) * 100), 100)
+        : 100);
+    useEffect(() => {
+        if (onUpdate) {
+            onUpdate(progress, duration);
+        }
+    }, [onUpdate, progress, duration]);
+    useInterval(() => {
+        if (expiredAt) {
+            setProgress(Math.min(Math.max(0, ((Date.now() / 1000 - startedAt) / duration) * 100), 100));
+        }
+    }, refreshInterval);
+    const bg = expiredAt
+        ? progress > CRITICAL_LEVEL
+            ? 'danger.emphasis'
+            : progress > WARNING_LEVEL
+                ? 'severe.emphasis'
+                : 'success.emphasis'
+        : 'neutral.emphasis';
+    const burntCredits = duration * burningRate;
+    const title = duration
+        ? `${((1 - progress / 100) * duration).toFixed(0)} seconds left - ${((progress / 100) * burntCredits).toFixed(2)} / ${burntCredits.toFixed(2)} credits`
+        : `Started at ${new Date(startedAt * 1000).toISOString()} - ${burntCredits.toFixed(2)} credits consumed`;
+    return (_jsx(_Fragment, { children: _jsx(Tooltip, { text: title, direction: "w", children: _jsx(Button, { variant: "invisible", children: _jsx(Box, { sx: { width: '70px' }, children: _jsx(ProgressBar, { tabIndex: onClick ? 0 : -1, style: style, animated: expiredAt ? false : true, bg: bg, progress: progress, onClick: onClick, onKeyDown: onClick
+                            ? event => {
+                                if (event.key === 'Enter' || event.key === 'Space') {
+                                    onClick();
+                                }
+                            }
+                            : undefined }) }) }) }) }));
+}

package/lib/components/progress/CreditsIndicator.d.ts

@@ -0,0 +1,27 @@
+import type { IRemoteServicesManager } from "../../api";
+type ICreditsIndicatorProps = {
+    /**
+     * Kernel service manager
+     */
+    serviceManager: IRemoteServicesManager;
+    /**
+     * Kernel ID
+     */
+    kernelId: string;
+    /**
+     * Callback on progress bar click event
+     */
+    onClick?: () => void;
+    /**
+     * Callback on progress update.
+     *
+     * Progress is a percentage between 0 and 100.
+     * Duration is the kernel max duration
+     */
+    onUpdate?: (progress: number, duration: number) => void;
+};
+/**
+ * Credits indicator component.
+ */
+export declare function CreditsIndicator(props: ICreditsIndicatorProps): JSX.Element | null;
+export {};

package/lib/components/progress/CreditsIndicator.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState, useEffect } from "react";
+import { Box } from "@datalayer/primer-addons";
+import { ConsumptionBar } from "../../components/progress";
+/**
+ * Credits indicator component.
+ */
+export function CreditsIndicator(props) {
+    const { serviceManager, kernelId, onClick, onUpdate } = props;
+    const [model, setModel] = useState();
+    useEffect(() => {
+        serviceManager.runtimesManager.findById(kernelId).then(model => {
+            setModel(model);
+        });
+    }, [kernelId, serviceManager]);
+    return model ?
+        _jsx(Box, { display: "flex", style: { alignItems: 'center' }, children: _jsx(ConsumptionBar, { startedAt: parseFloat(model.started_at), expiredAt: model.expired_at ? parseFloat(model.expired_at) : undefined, burningRate: model.burning_rate, onClick: onClick, onUpdate: onUpdate, style: { cursor: 'pointer' } }) })
+        :
+            _jsx(_Fragment, {});
+}

package/lib/components/progress/ProgressBar.d.ts

@@ -0,0 +1,2 @@
+export declare const ProgressBar: () => import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/lib/components/progress/ProgressBar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+import { ProgressBar as PrimerProgressBar } from '@primer/react';
+export const ProgressBar = () => {
+    const [progress, setProgress] = useState(0);
+    useInterval(() => {
+        if (progress >= 100) {
+            setProgress(0);
+        }
+        else {
+            setProgress(progress + 1);
+        }
+    }, 100);
+    return _jsx(PrimerProgressBar, { progress: progress, "aria-label": "" });
+};
+export default ProgressBar;

package/lib/components/progress/ProgressRing.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Progress ring segment properties
+ */
+export interface IProgressRingItemProps {
+    /**
+     * Progress
+     *
+     * Value must be between 0 and 100.
+     */
+    progress: number;
+    /**
+     * Segment color.
+     *
+     * Default to foreground-color-accent
+     */
+    color?: string;
+}
+/**
+ * Progress ring properties
+ */
+export interface IProgressRingProps extends React.SVGAttributes<SVGElement>, IProgressRingItemProps {
+    /**
+     * Accessible short description
+     */
+    title?: string;
+}
+export declare const PROGRESS_SEGMENTS: number;
+/**
+ * Progress ring component
+ *
+ * Children {@link Item} must be order in decreasing progress order.
+ */
+export declare function ProgressRing(props: React.PropsWithChildren<IProgressRingProps>): JSX.Element;
+export declare namespace ProgressRing {
+    var Item: (props: IProgressRingItemProps) => JSX.Element;
+}

package/lib/components/progress/ProgressRing.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PROGRESS_SEGMENTS = 44;
+/**
+ * Progress ring segment
+ */
+function Item(props) {
+    return (_jsx("circle", { className: "determinate", style: {
+            stroke: props.color ?? 'var(--fgColor-accent)',
+            fill: 'none',
+            strokeWidth: '2px',
+            strokeLinecap: 'butt',
+            transformOrigin: '50% 50%',
+            transform: 'rotate(-90deg)',
+            transition: 'all 0.2s ease-in-out',
+            strokeDasharray: `${(PROGRESS_SEGMENTS * props.progress) / 100}px ${PROGRESS_SEGMENTS}px`
+        }, cx: "8px", cy: "8px", r: "7px" }));
+}
+/**
+ * Progress ring component
+ *
+ * Children {@link Item} must be order in decreasing progress order.
+ */
+export function ProgressRing(props) {
+    const { children, progress, color, title, ...others } = props;
+    return (_jsxs("svg", { className: "dla-progress-ring", viewBox: "0 0 16 16", role: "progressbar", "aria-valuenow": props.progress, "aria-valuemin": 0, "aria-valuemax": 100, ...others, children: [title && _jsx("title", { children: title }), _jsx("circle", { className: "background", cx: "8px", cy: "8px", r: "7px", style: {
+                    stroke: 'var(--control-bgColor-rest)',
+                    fill: 'none',
+                    strokeWidth: '2px'
+                } }), children ?? _jsx(Item, { progress: progress, color: color })] }));
+}
+ProgressRing.Item = Item;

package/lib/components/progress/Timer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Timer displaying the time as text.
+ *
+ * Duration should be provided in seconds.
+ */
+export declare function Timer(props: {
+    duration: number;
+}): JSX.Element;
+export default Timer;

package/lib/components/progress/Timer.js

@@ -0,0 +1,28 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState, useEffect } from 'react';
+import { Text } from '@primer/react';
+/**
+ * Timer displaying the time as text.
+ *
+ * Duration should be provided in seconds.
+ */
+export function Timer(props) {
+    const [remaining, setRemaining] = useState(props.duration);
+    useEffect(() => {
+        setRemaining(props.duration);
+    }, [props.duration]);
+    useEffect(() => {
+        const timeoutIndex = setTimeout(() => {
+            setRemaining(remaining - 1);
+        }, 1000);
+        return () => {
+            clearTimeout(timeoutIndex);
+        };
+    }, [remaining]);
+    return _jsxs(Text, { as: "span", children: [remaining.toFixed(0), "s"] });
+}
+export default Timer;

package/lib/components/progress/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ConsumptionBar';
+export * from './CreditsIndicator';
+export * from './ProgressBar';
+export * from './ProgressRing';
+export * from './Timer';

package/lib/components/progress/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './ConsumptionBar';
+export * from './CreditsIndicator';
+export * from './ProgressBar';
+export * from './ProgressRing';
+export * from './Timer';

package/lib/components/runtimes/RuntimeCellVariables.d.ts

@@ -0,0 +1,39 @@
+import { ITranslator } from '@jupyterlab/translation';
+/**
+ * {@link KernelCellVariables} properties
+ */
+interface IKernelCellVariablesProps {
+    /**
+     * Variable names to be imported
+     */
+    inputs: string[];
+    /**
+     * Importable variable names
+     */
+    getInputOptions?: () => Promise<string[]>;
+    /**
+     * Set the variable names to be imported
+     */
+    setInputs: (values: string[]) => void;
+    /**
+     * Variable name to be exported
+     */
+    output?: string;
+    /**
+     * Exportable variable names
+     */
+    getOutputOptions?: () => Promise<string[]>;
+    /**
+     * Set the variable name to be exported
+     */
+    setOutput: (value?: string) => void;
+    /**
+     * Application translator object
+     */
+    translator?: ITranslator;
+}
+/**
+ * Kernel variables picker
+ */
+export declare function KernelCellVariables(props: IKernelCellVariablesProps): JSX.Element;
+export default KernelCellVariables;