@datalayer/primer-addons 1.0.17 → 1.0.19

package/lib/components/color/ColorSwatch.js

@@ -0,0 +1,62 @@
+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 { useLayoutEffect, useRef, useState } from "react";
+import { Box, Text } from "@primer/react";
+import { useThemeStore } from "../../theme/useThemeStore";
+/** Convert an `rgb()` / `rgba()` string to a `#rrggbb` hex value. */
+function rgbToHex(rgb) {
+    const match = rgb.match(/rgba?\(([^)]+)\)/);
+    if (!match) {
+        return null;
+    }
+    const parts = match[1].split(",").map((part) => part.trim());
+    if (parts.length < 3) {
+        return null;
+    }
+    const [r, g, b] = parts.map((part) => parseInt(part, 10));
+    if ([r, g, b].some((channel) => Number.isNaN(channel))) {
+        return null;
+    }
+    const toHex = (channel) => channel.toString(16).padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Theme-aware color swatch. Renders a block filled with `color`, then reads
+ * the resolved value via `getComputedStyle` and displays it as a hex string.
+ * The resolved value recomputes whenever the active theme or color mode
+ * changes, so swatches backed by CSS custom properties stay in sync.
+ */
+export function ColorSwatch({ color, label, showValue = true, height = 54, }) {
+    const ref = useRef(null);
+    const { theme, colorMode } = useThemeStore();
+    const [hex, setHex] = useState(null);
+    useLayoutEffect(() => {
+        const raf = requestAnimationFrame(() => {
+            if (!ref.current) {
+                return;
+            }
+            const rgb = getComputedStyle(ref.current).backgroundColor;
+            setHex(rgbToHex(rgb));
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [color, theme, colorMode]);
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            gridTemplateRows: `${height}px auto`,
+            border: "1px solid",
+            borderColor: "var(--borderColor-default)",
+            borderRadius: 2,
+            overflow: "hidden",
+            minWidth: 0,
+        }, children: [_jsx(Box, { ref: ref, style: { backgroundColor: color } }), _jsxs(Box, { sx: { p: 2, display: "grid", gap: 1 }, children: [_jsx(Text, { sx: {
+                            fontSize: 0,
+                            color: "fg.default",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                        }, title: label ?? color, children: label ?? color }), showValue && hex ? (_jsx(Text, { sx: { fontSize: 0, color: "fg.muted", fontFamily: "mono" }, children: hex })) : null] })] }));
+}
+export default ColorSwatch;

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

@@ -0,0 +1 @@
+export * from "./ColorSwatch";

package/lib/components/color/index.js

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

package/lib/components/content-loader/ContentLoader.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "@primer/react";
+import { Box, useTheme } from "@primer/react";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import 'react-loading-skeleton/dist/skeleton.css';
 export const ContentLoader = (props) => {
-    return (_jsx(Box, { children: _jsx(SkeletonTheme, { children: _jsx(Skeleton, { ...props }) }) }));
+    const { colorMode } = useTheme();
+    const isDark = colorMode !== 'day';
+    return (_jsx(Box, { children: _jsx(SkeletonTheme, { baseColor: isDark ? 'var(--bgColor-muted, #21262d)' : 'var(--bgColor-muted, #ebebeb)', highlightColor: isDark ? 'var(--borderColor-muted, #30363d)' : 'var(--borderColor-muted, #f5f5f5)', children: _jsx(Skeleton, { ...props }) }) }));
 };
 export default ContentLoader;

package/lib/components/icons/CircleIcon.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@primer/react';
 import { CircleCurrentColorIcon } from '@datalayer/icons-react';
-const COLORS = {
-    'danger': 'danger',
-};
 export const CircleIcon = ({ color = 'white', variant = 'fg', }) => {
     const { theme } = useTheme();
-    return (_jsx(CircleCurrentColorIcon, { fill: theme?.colors[COLORS[color]][variant] ?? color ?? 'white' }));
+    const colorGroup = theme?.colors?.[color];
+    const resolvedColor = colorGroup && typeof colorGroup === 'object'
+        ? colorGroup[variant] ??
+            colorGroup.fg
+        : undefined;
+    return (_jsx(CircleCurrentColorIcon, { fill: resolvedColor ?? color ?? 'currentColor', color: resolvedColor ?? color ?? 'currentColor' }));
 };
 export default CircleIcon;

package/lib/components/index.d.ts

@@ -1,11 +1,17 @@
 export * from "./appearance/AppearanceControls";
 export * from "./appearance/AppearanceControlsWithStore";
+export * from "./appearance/AppearanceMenu";
+export * from "./appearance/ColorModeCircle";
+export * from "./appearance/ThemePreviewCard";
+export * from "./appearance/ThemeCircle";
 export * from "./box/Box";
 export * from "./card/Card";
+export * from "./color";
 export * from "./content-loader/ContentLoader";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
-export * from "./overlay/Overlay";
+export * from "./side-overlay/SideOverlay";
+export * from "./sliding-panel/SlidingPanel";
 export * from "./slider/Slider";
 export * from "./logo";
 export * from "./appearance";

package/lib/components/index.js

@@ -1,11 +1,17 @@
 export * from "./appearance/AppearanceControls";
 export * from "./appearance/AppearanceControlsWithStore";
+export * from "./appearance/AppearanceMenu";
+export * from "./appearance/ColorModeCircle";
+export * from "./appearance/ThemePreviewCard";
+export * from "./appearance/ThemeCircle";
 export * from "./box/Box";
 export * from "./card/Card";
+export * from "./color";
 export * from "./content-loader/ContentLoader";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
-export * from "./overlay/Overlay";
+export * from "./side-overlay/SideOverlay";
+export * from "./sliding-panel/SlidingPanel";
 export * from "./slider/Slider";
 export * from "./logo";
 export * from "./appearance";

package/lib/components/logo/AI2.d.ts

@@ -0,0 +1,20 @@
+import { type SVGProps } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface AI2Props extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    variant?: ThemeVariant;
+    colorMode?: 'light' | 'dark' | 'auto';
+    /** Colour of the "I" glyph. */
+    primaryColor?: string;
+    /** Colour of the "A" glyph. */
+    secondaryColor?: string;
+}
+/**
+ * Alternate AI glyph mark.
+ *
+ * A is rendered with an oblique left bar, a right vertical bar,
+ * and a horizontal crossbar.
+ * I is rendered as a simple vertical bar.
+ */
+export declare const AI2: import("react").ForwardRefExoticComponent<AI2Props & import("react").RefAttributes<SVGSVGElement>>;
+export default AI2;

package/lib/components/logo/AI2.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { forwardRef } from 'react';
+import { getLogoColors } from './DatalayerLogo';
+/**
+ * Alternate AI glyph mark.
+ *
+ * A is rendered with an oblique left bar, a right vertical bar,
+ * and a horizontal crossbar.
+ * I is rendered as a simple vertical bar.
+ */
+export const AI2 = forwardRef(function AI2({ size = 24, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, ...svgProps }, ref) {
+    const themed = getLogoColors(variant, colorMode);
+    const resolvedPrimary = primaryColor ?? themed.primary;
+    const resolvedSecondary = secondaryColor ?? themed.textColor;
+    const barWidth = 3.1;
+    const leftBarBottomInnerX = -2.2 + barWidth;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "-2.2 0 26.2 24", width: size, height: size, role: "img", "aria-label": "AI2", ref: ref, ...svgProps, children: [_jsx("path", { d: `M15.35 3.5h${barWidth}V20h-${barWidth}z`, fill: resolvedPrimary }), _jsx("path", { d: `M-2.2 20 9.8 3.5h${barWidth}L${leftBarBottomInnerX} 20H-2.2z`, fill: resolvedSecondary }), _jsx("path", { d: `M10.35 3.5h${barWidth}V20h-${barWidth}z`, fill: resolvedSecondary }), _jsx("path", { d: "M3.5 12.95h9.6v2.75H3.5z", fill: resolvedSecondary })] }));
+});
+export default AI2;

package/lib/components/logo/DI.d.ts

@@ -0,0 +1,19 @@
+import { type SVGProps } from 'react';
+import { type ThemeVariant } from '../../theme';
+export interface DIProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    size?: number;
+    variant?: ThemeVariant;
+    colorMode?: 'light' | 'dark' | 'auto';
+    /** Colour of the "I" glyph. */
+    primaryColor?: string;
+    /** Colour of the "D" glyph. */
+    secondaryColor?: string;
+}
+/**
+ * DI glyph mark.
+ *
+ * Uses the same public API and semantic color mapping as AI:
+ * primaryColor styles the "I", secondaryColor styles the "D".
+ */
+export declare const DI: import("react").ForwardRefExoticComponent<DIProps & import("react").RefAttributes<SVGSVGElement>>;
+export default DI;

package/lib/components/logo/DI.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { forwardRef } from 'react';
+import { getLogoColors } from './DatalayerLogo';
+/**
+ * DI glyph mark.
+ *
+ * Uses the same public API and semantic color mapping as AI:
+ * primaryColor styles the "I", secondaryColor styles the "D".
+ */
+export const DI = forwardRef(function DI({ size = 24, variant = 'datalayer', colorMode = 'light', primaryColor, secondaryColor, ...svgProps }, ref) {
+    const themed = getLogoColors(variant, colorMode);
+    const resolvedPrimary = primaryColor ?? themed.primary;
+    const resolvedSecondary = secondaryColor ?? themed.textColor;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: size, height: size, role: "img", "aria-label": "DI", ref: ref, ...svgProps, children: [_jsx("path", { d: "M2 3.932H5V20.068075H2ZM3.5 3.932H6.5L12.933 20.068075H9.933ZM2 17.068075H11.4V20.068075H2Z", fill: resolvedSecondary, strokeWidth: 0.25 }), _jsx("path", { d: "m10.788825 3.932 6.43325 16.136075h3.5279L14.316725 3.932H10.788825Z", fill: resolvedPrimary, strokeWidth: 0.25 })] }));
+});
+export default DI;

package/lib/components/logo/DatalayerLogo.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { forwardRef, useId } from 'react';
-import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, } from '../../theme';
+import { datalayerColors, spatialColors, lovelyColors, matrixColors, earthColors, sandColors, ivoryColors, sunColors, } from '../../theme';
 /**
  * Gradient pattern derived from the original brand logo SVG:
  *   - Left bars:  accent → brand (bright → mid)
@@ -93,6 +93,54 @@ export const THEME_LOGO_COLORS = {
             secondaryGradient: [earthColors.oceanHover, earthColors.oceanAccent],
         },
     },
+    sand: {
+        light: {
+            primary: sandColors.sandBrand,
+            secondary: sandColors.sandText,
+            textColor: sandColors.gray,
+            primaryGradient: [sandColors.sandAccent, sandColors.sandBrand],
+            secondaryGradient: [sandColors.sandHover, sandColors.sandText],
+        },
+        dark: {
+            primary: sandColors.sandBright,
+            secondary: sandColors.sandAccent,
+            textColor: sandColors.gray,
+            primaryGradient: [sandColors.sandBright, sandColors.sandBrand],
+            secondaryGradient: [sandColors.sandHover, sandColors.sandAccent],
+        },
+    },
+    ivory: {
+        light: {
+            primary: ivoryColors.ivoryBrand,
+            secondary: ivoryColors.ivoryText,
+            textColor: ivoryColors.gray,
+            primaryGradient: [ivoryColors.ivoryAccent, ivoryColors.ivoryBrand],
+            secondaryGradient: [ivoryColors.ivoryHover, ivoryColors.ivoryText],
+        },
+        dark: {
+            primary: ivoryColors.ivoryBright,
+            secondary: ivoryColors.ivoryAccent,
+            textColor: ivoryColors.gray,
+            primaryGradient: [ivoryColors.ivoryBright, ivoryColors.ivoryBrand],
+            secondaryGradient: [ivoryColors.ivoryHover, ivoryColors.ivoryAccent],
+        },
+    },
+    sun: {
+        light: {
+            primary: sunColors.sunBrand,
+            secondary: sunColors.sunText,
+            textColor: sunColors.gray,
+            primaryGradient: [sunColors.sunAccent, sunColors.sunBrand],
+            secondaryGradient: [sunColors.sunHover, sunColors.sunText],
+        },
+        dark: {
+            primary: sunColors.sunBright,
+            secondary: sunColors.sunAccent,
+            textColor: sunColors.gray,
+            primaryGradient: [sunColors.sunBright, sunColors.sunBrand],
+            secondaryGradient: [sunColors.sunHover, sunColors.sunAccent],
+        },
+    },
 };
 export function getLogoColors(variant = 'datalayer', colorMode = 'light') {
     const mode = colorMode === 'auto' ? 'light' : colorMode;

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

@@ -1,4 +1,6 @@
 export * from './AI';
+export * from './AI2';
+export * from './DI';
 export * from './DatalayerLogo';
 export * from './DatalayerLogoText';
 export * from './DatalayerText';

package/lib/components/logo/index.js

@@ -1,4 +1,6 @@
 export * from './AI';
+export * from './AI2';
+export * from './DI';
 export * from './DatalayerLogo';
 export * from './DatalayerLogoText';
 export * from './DatalayerText';

package/lib/components/{overlay/Overlay.d.ts → side-overlay/SideOverlay.d.ts}

@@ -1,4 +1,4 @@
-export interface OverlayProps {
+export interface SideOverlayProps {
     closeButtonRef?: React.RefObject<HTMLButtonElement>;
     content: JSX.Element;
     direction?: 'left' | 'right';
@@ -9,5 +9,5 @@ export interface OverlayProps {
     width?: number | string;
     zIndex?: number;
 }
-export declare const Overlay: ({ width, direction, zIndex, ...rest }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
-export default Overlay;
+export declare const SideOverlay: ({ width, direction, zIndex, ...rest }: SideOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export default SideOverlay;

package/lib/components/{overlay/Overlay.js → side-overlay/SideOverlay.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { IconButton, Overlay as PrimerOverlay, BaseStyles, ThemeProvider, useTheme } from "@primer/react";
+import { IconButton, Overlay as PrimerOverlay, ThemeProvider, useTheme } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
 import { Box } from '../box/Box';
 const PrimerAddonOverlay = (props) => {
@@ -25,19 +25,19 @@ const PrimerAddonOverlay = (props) => {
         }
         closeOverlay();
     };
-    const overlayContent = (_jsx(ThemeProvider, { theme: theme, colorMode: colorMode, children: _jsx(BaseStyles, { children: _jsxs(Box, { sx: {
-                    /* We need to remove the padding */
-                    height: `calc(100vh - ${top}px - 8px)`,
-                    width,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    padding: '4px'
-                }, children: [_jsx(Box, { sx: {
-                            display: 'flex',
-                            justifyContent: 'right',
-                            width: '100%'
-                        }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) }) }));
+    const overlayContent = (_jsx(ThemeProvider, { theme: theme, colorMode: colorMode, children: _jsxs(Box, { sx: {
+                /* We need to remove the padding */
+                height: `calc(100vh - ${top}px - 8px)`,
+                width,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                padding: '4px'
+            }, children: [_jsx(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'right',
+                        width: '100%'
+                    }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-label": "Close" }) }), content] }) }));
     return (closeButtonRef && openButtonRef ?
         _jsx(_Fragment, { children: isOpen ?
                 direction === 'left' ?
@@ -48,7 +48,7 @@ const PrimerAddonOverlay = (props) => {
         :
             _jsx(_Fragment, {}));
 };
-export const Overlay = ({ width = '500px', direction = 'left', zIndex = 100, ...rest }) => {
+export const SideOverlay = ({ width = '500px', direction = 'left', zIndex = 100, ...rest }) => {
     return (_jsx(PrimerAddonOverlay, { width: width, direction: direction, zIndex: zIndex, ...rest }));
 };
-export default Overlay;
+export default SideOverlay;

package/lib/components/side-overlay/SideOverlay.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { SideOverlayProps } from '../..';
+declare const meta: {
+    title: string;
+    component: ({ width, direction, zIndex, ...rest }: SideOverlayProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SideOverlayDayLeft: Story;
+export declare const SideOverlayDayRight: Story;
+export declare const SideOverlayNightLeft: Story;
+export declare const SideOverlayNightRight: Story;

package/lib/components/{overlay/Overlay.stories.js → side-overlay/SideOverlay.stories.js}

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import { Heading, Text, Box, Button } from "@primer/react";
-import { Overlay } from '../..';
+import { SideOverlay } from '../..';
 const meta = {
-    title: 'Components/Overlay',
-    component: Overlay,
+    title: 'Components/SideOverlay',
+    component: SideOverlay,
     // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
     tags: ['autodocs'],
     parameters: {
@@ -13,42 +13,42 @@ const meta = {
     },
 };
 export default meta;
-const ThemedOverlay = (props) => {
+const ThemedSideOverlay = (props) => {
     const [isOpen, setIsOpen] = useState(false);
     const openButtonRef = useRef(null);
     const closeButtonRef = useRef(null);
     const headingRef = useRef(null);
-    return (_jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => { setIsOpen(!isOpen); }, children: "Open overlay" }), _jsx(Overlay, { ...props, isOpen: isOpen, setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef })] })] }) }));
+    return (_jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => { setIsOpen(!isOpen); }, children: "Open overlay" }), _jsx(SideOverlay, { ...props, isOpen: isOpen, setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef })] })] }) }));
 };
-export const OverlayDayLeft = {
+export const SideOverlayDayLeft = {
     args: {
         content: _jsx(Text, { children: "\uD83D\uDC48 Look, left aligned, no heading." }),
         direction: "left",
         width: '500px',
     },
-    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "day" })
+    render: (args) => _jsx(ThemedSideOverlay, { ...args, colorMode: "day" })
 };
-export const OverlayDayRight = {
+export const SideOverlayDayRight = {
     args: {
         content: _jsx(Text, { children: "Look, right aligned, on heading \uD83D\uDC49" }),
         direction: "right",
         width: '500px',
     },
-    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "day" })
+    render: (args) => _jsx(ThemedSideOverlay, { ...args, colorMode: "day" })
 };
-export const OverlayNightLeft = {
+export const SideOverlayNightLeft = {
     args: {
         content: _jsx(Text, { children: "\uD83D\uDC48 Look, left aligned, no heading." }),
         direction: "left",
         width: '300px',
     },
-    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "night" })
+    render: (args) => _jsx(ThemedSideOverlay, { ...args, colorMode: "night" })
 };
-export const OverlayNightRight = {
+export const SideOverlayNightRight = {
     args: {
         content: _jsx(Text, { children: "Look, right aligned, on heading \uD83D\uDC49" }),
         direction: "right",
         width: '300px',
     },
-    render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "night" })
+    render: (args) => _jsx(ThemedSideOverlay, { ...args, colorMode: "night" })
 };

package/lib/components/slider/Slider.js

@@ -17,7 +17,8 @@ export const Slider = ({ name = "slider", id = "slider", min = 0, max = 10, valu
     const sliderStyle = {
         width,
         ...(orientation === "vertical" ? { transform: "rotate(-90deg)" } : {}),
-        colorScheme: colorMode == 'day' ? 'light' : 'dark'
+        colorScheme: colorMode == 'day' ? 'light' : 'dark',
+        accentColor: 'var(--fgColor-accent)',
     };
     return (_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx("input", { type: "range", id: id, name: name, min: min, max: max, value: sliderVal, step: step ?? "any", list: "slider-markers", style: sliderStyle, onChange: handleSliderChange, disabled: disabled }), markers && step && (_jsx("datalist", { id: "slider-markers", children: Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => min + i * step).map((e) => (
                 // TODO: Supply markers as array and show them here

package/lib/components/sliding-panel/SlidingPanel.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type SlidingPanelPosition = 'north' | 'south' | 'west' | 'east';
+export type SlidingPanelVariant = 'default' | 'info' | 'success' | 'warning' | 'error' | 'danger';
+export interface SlidingPanelProps {
+    isOpen: boolean;
+    message: ReactNode;
+    details?: ReactNode;
+    onDismiss?: () => void;
+    position?: SlidingPanelPosition;
+    variant?: SlidingPanelVariant;
+    durationMs?: number;
+    transitionMs?: number;
+    zIndex?: number;
+    offset?: number;
+    panelSize?: number | string;
+    fullWidth?: boolean;
+}
+export declare const SlidingPanel: ({ isOpen, message, details, onDismiss, position, variant, durationMs, transitionMs, zIndex, offset, panelSize, fullWidth, }: SlidingPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SlidingPanel;