@datalayer/primer-addons 0.0.5 → 0.0.6

package/README.md

@@ -2,11 +2,13 @@
 
 [![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
 
-# ⚛️ Addons for Primer React
+# ⚛️ ➕ Primer Addons
+
+> Additional components for Primer React.
 
 This repository contains additional React.js components for the [@primer/react](https://github.com/primer/react) tookit.
 
-The componnents are compliant with the Primer theming framework and aims to respect the [Primer design system](https://primer.style).
+The components are compliant with the Primer theming framework and aims to respect the [Primer design system](https://primer.style).
 
 A Storybook showcasing the components and their options is available on https://primer-addons.datalayer.tech.
 

package/lib/components/slider/Slider.d.ts

@@ -1,3 +1,19 @@
-/// <reference types="react" />
-export declare const Slider: () => JSX.Element;
+interface CommonProps {
+    min: number;
+    max: number;
+    value: number;
+    displayValue?: boolean;
+    orientation?: "horizontal" | "vertical";
+    width?: string | number;
+    onChange: (value: number) => void;
+}
+type ConditionalProps = {
+    markers: true;
+    step: number;
+} | {
+    markers?: false;
+    step?: number;
+};
+export type SliderProps = CommonProps & ConditionalProps;
+export declare const Slider: ({ min, max, value, step, markers, displayValue, orientation, width, onChange, }: SliderProps) => JSX.Element;
 export default Slider;

package/lib/components/slider/Slider.js

@@ -1,5 +1,23 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-export const Slider = () => {
-    return _jsx(_Fragment, { children: "Slider" });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CounterLabel } from "@primer/react";
+import { useEffect, useState } from "react";
+export const Slider = ({ min, max, value, step, markers = false, displayValue = false, orientation = "horizontal", width = "200px", onChange, }) => {
+    const [sliderVal, setSliderVal] = useState(value);
+    useEffect(() => {
+        setSliderVal(value);
+    }, [value]);
+    const handleSliderChange = (event) => {
+        const newValue = Number(event.target.value);
+        setSliderVal(newValue);
+        onChange(newValue);
+    };
+    // Warning: unreliable
+    const sliderStyle = {
+        width,
+        ...(orientation === "vertical" ? { transform: "rotate(-90deg)" } : {}),
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx("input", { type: "range", name: "slider", min: min, max: max, value: sliderVal, step: step ?? "any", list: "slider-markers", style: sliderStyle, onChange: handleSliderChange }), 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
+                _jsx("option", { value: e }, `slider-marker-${e}`))) })), displayValue && orientation === "horizontal" && _jsx(CounterLabel, { sx: { ml: 2 }, children: sliderVal })] }));
 };
 export default Slider;

package/lib/components/toolbar/Toolbar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface Props {
+export interface ToolbarProps {
     align?: "center" | "flex-start" | "flex-end" | "space-evenly" | "space-around" | "space-between";
     gap?: string;
     height?: string;
@@ -11,5 +11,5 @@ export interface Props {
     border?: boolean;
     children: React.ReactNode | React.ReactNode[];
 }
-export declare const Toolbar: ({ align, height, gap, padding, heading, backgroundColor, borderBottomHeight, borderBottomColor, border, children, }: Props) => JSX.Element;
+export declare const Toolbar: ({ align, height, gap, padding, heading, backgroundColor, borderBottomHeight, borderBottomColor, border, children, }: ToolbarProps) => JSX.Element;
 export default Toolbar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",