@mirohq/design-system-slider 0.1.0-slider.0

package/dist/main.js

@@ -0,0 +1,231 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystemUtils = require('@mirohq/design-system-utils');
+var reactSlider = require('@radix-ui/react-slider');
+var designSystemStitches = require('@mirohq/design-system-stitches');
+var designSystemPrimitive = require('@mirohq/design-system-primitive');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const StyledRange = designSystemStitches.styled(reactSlider.Range, {
+  position: "absolute",
+  backgroundColor: "$background-primary-prominent",
+  borderRadius: "$round",
+  height: "100%",
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    },
+    ariaDisabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    }
+  }
+});
+
+const SliderContext = React.createContext({});
+const SliderProvider = ({
+  children,
+  disabled,
+  ariaDisabled
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  SliderContext.Provider,
+  {
+    value: {
+      disabled,
+      ariaDisabled
+    },
+    children
+  }
+);
+const useSliderContext = () => React.useContext(SliderContext);
+
+const Range = React__default["default"].forwardRef((props, forwardRef) => {
+  const { disabled, ariaDisabled } = useSliderContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledRange,
+    {
+      ...props,
+      disabled,
+      ariaDisabled,
+      ref: forwardRef
+    }
+  );
+});
+
+const StyledTrack = designSystemStitches.styled(reactSlider.Track, {
+  backgroundColor: "$background-neutrals-scrollbar",
+  position: "relative",
+  flexGrow: 1,
+  borderRadius: "$round",
+  height: "6px",
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    },
+    ariaDisabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    }
+  }
+});
+
+const Track = React__default["default"].forwardRef((props, forwardRef) => {
+  const { disabled, ariaDisabled } = useSliderContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledTrack,
+    {
+      ...props,
+      disabled,
+      ariaDisabled,
+      ref: forwardRef
+    }
+  );
+});
+
+const StyledThumb = designSystemStitches.styled(reactSlider.Thumb, {
+  display: "block",
+  width: "20px",
+  height: "20px",
+  backgroundColor: "$background-neutrals",
+  borderRadius: "$round",
+  border: "1px solid $border-neutrals-controls",
+  _hover: {
+    boxShadow: "$focus-controls",
+    border: "1px solid $border-primary-hover"
+  },
+  "&:active": {
+    boxShadow: "$focus-controls",
+    border: "1px solid $border-primary-active"
+  },
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: "$background-neutrals-controls-disabled",
+        border: "none",
+        boxShadow: "none",
+        _hover: {
+          boxShadow: "none",
+          border: "none"
+        },
+        "&:active": {
+          boxShadow: "none",
+          border: "none"
+        }
+      }
+    },
+    ariaDisabled: {
+      true: {
+        backgroundColor: "$background-neutrals-controls-disabled",
+        border: "none",
+        boxShadow: "none"
+      }
+    }
+  }
+});
+
+const Thumb = React__default["default"].forwardRef((props, forwardRef) => {
+  const { disabled, ariaDisabled } = useSliderContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledThumb,
+    {
+      ...props,
+      disabled,
+      ariaDisabled,
+      ref: forwardRef
+    }
+  );
+});
+
+const StyledSliderComponent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  flexDirection: "row",
+  gap: "$100"
+});
+const StyledSliderRoot = designSystemStitches.styled(reactSlider.Root, {
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  userSelect: "none",
+  touchAction: "none",
+  width: "200px",
+  height: "20px"
+});
+
+const Slider = React__default["default"].forwardRef(
+  ({
+    step = 1,
+    disabled = false,
+    "aria-disabled": ariaDisabled = false,
+    min,
+    max,
+    value,
+    onValueCommit,
+    onValueChange,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    var _a, _b;
+    const [sliderValue, setSliderValue] = React.useState(
+      (_b = (_a = value == null ? void 0 : value[0]) != null ? _a : min) != null ? _b : 0
+    );
+    const onSliderValueChange = React.useCallback(
+      (value2) => {
+        setSliderValue(value2[0]);
+        if (onValueChange != null) {
+          onValueChange(value2);
+        }
+      },
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SliderProvider,
+      {
+        disabled,
+        ariaDisabled: designSystemUtils.booleanify(ariaDisabled),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledSliderComponent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledSliderRoot,
+            {
+              ...restProps,
+              step,
+              disabled,
+              "aria-disabled": ariaDisabled,
+              defaultValue: [sliderValue],
+              ref: forwardRef,
+              min,
+              max,
+              onValueCommit,
+              onValueChange: onSliderValueChange,
+              onPointerDown: (e) => {
+                if (designSystemUtils.booleanify(ariaDisabled)) {
+                  e.preventDefault();
+                }
+              },
+              children
+            }
+          ),
+          sliderValue
+        ] })
+      }
+    );
+  }
+);
+Slider.Track = Track;
+Slider.Range = Range;
+Slider.Thumb = Thumb;
+
+exports.Slider = Slider;
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../src/partials/range.styled.tsx","../src/use-slider-context.tsx","../src/partials/range.tsx","../src/partials/track.styled.tsx","../src/partials/track.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/slider.styled.tsx","../src/slider.tsx"],"sourcesContent":["import { Range as RadixRange } from '@radix-ui/react-slider'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledRange = styled(RadixRange, {\n  position: 'absolute',\n  backgroundColor: '$background-primary-prominent',\n  borderRadius: '$round',\n  height: '100%',\n\n  variants: {\n    disabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n      },\n    },\n    ariaDisabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n      },\n    },\n  },\n})\nexport type StyledRangeProps = StrictComponentProps<typeof StyledRange>\n","import React, { createContext, useContext } from 'react'\n\ninterface SliderContextProps {\n  disabled: boolean\n  ariaDisabled: boolean\n}\n\nexport interface SliderProviderProps {\n  disabled: boolean\n  ariaDisabled: boolean\n}\n\nconst SliderContext = createContext<SliderContextProps>({} as any)\n\nexport const SliderProvider = ({\n  children,\n  disabled,\n  ariaDisabled,\n}: React.PropsWithChildren<SliderProviderProps>): JSX.Element => (\n  <SliderContext.Provider\n    value={{\n      disabled,\n      ariaDisabled,\n    }}\n  >\n    {children}\n  </SliderContext.Provider>\n)\n\nexport const useSliderContext = (): SliderContextProps =>\n  useContext(SliderContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledRangeProps } from './range.styled'\nimport { StyledRange } from './range.styled'\nimport { useSliderContext } from '../use-slider-context'\n\nexport interface RangeProps extends StyledRangeProps {}\n\nexport const Range = React.forwardRef<\n  ElementRef<typeof StyledRange>,\n  RangeProps\n>((props, forwardRef) => {\n  const { disabled, ariaDisabled } = useSliderContext()\n\n  return (\n    <StyledRange\n      {...props}\n      disabled={disabled}\n      ariaDisabled={ariaDisabled}\n      ref={forwardRef}\n    />\n  )\n})\n","import { Track as RadixTrack } from '@radix-ui/react-slider'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrack = styled(RadixTrack, {\n  backgroundColor: '$background-neutrals-scrollbar',\n  position: 'relative',\n  flexGrow: 1,\n  borderRadius: '$round',\n  height: '6px',\n\n  variants: {\n    disabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n      },\n    },\n    ariaDisabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n      },\n    },\n  },\n})\nexport type StyledTrackProps = StrictComponentProps<typeof StyledTrack>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledTrackProps } from './track.styled'\nimport { StyledTrack } from './track.styled'\nimport { useSliderContext } from '../use-slider-context'\n\nexport interface TrackProps extends StyledTrackProps {}\n\nexport const Track = React.forwardRef<\n  ElementRef<typeof StyledTrack>,\n  TrackProps\n>((props, forwardRef) => {\n  const { disabled, ariaDisabled } = useSliderContext()\n\n  return (\n    <StyledTrack\n      {...props}\n      disabled={disabled}\n      ariaDisabled={ariaDisabled}\n      ref={forwardRef}\n    />\n  )\n})\n","import { Thumb as RadixThumb } from '@radix-ui/react-slider'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n  display: 'block',\n  width: '20px',\n  height: '20px',\n  backgroundColor: '$background-neutrals',\n  borderRadius: '$round',\n  border: '1px solid $border-neutrals-controls',\n\n  _hover: {\n    boxShadow: '$focus-controls',\n    border: '1px solid $border-primary-hover',\n  },\n\n  '&:active': {\n    boxShadow: '$focus-controls',\n    border: '1px solid $border-primary-active',\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        backgroundColor: '$background-neutrals-controls-disabled',\n        border: 'none',\n        boxShadow: 'none',\n\n        _hover: {\n          boxShadow: 'none',\n          border: 'none',\n        },\n\n        '&:active': {\n          boxShadow: 'none',\n          border: 'none',\n        },\n      },\n    },\n    ariaDisabled: {\n      true: {\n        backgroundColor: '$background-neutrals-controls-disabled',\n        border: 'none',\n        boxShadow: 'none',\n      },\n    },\n  },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledThumbProps } from './thumb.styled'\nimport { StyledThumb } from './thumb.styled'\nimport { useSliderContext } from '../use-slider-context'\n\nexport interface ThumbProps extends StyledThumbProps {}\n\nexport const Thumb = React.forwardRef<\n  ElementRef<typeof StyledThumb>,\n  ThumbProps\n>((props, forwardRef) => {\n  const { disabled, ariaDisabled } = useSliderContext()\n\n  return (\n    <StyledThumb\n      {...props}\n      disabled={disabled}\n      ariaDisabled={ariaDisabled}\n      ref={forwardRef}\n    />\n  )\n})\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-slider'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledSliderComponent = styled(Primitive.div, {\n  display: 'flex',\n  flexDirection: 'row',\n  gap: '$100',\n})\n\nexport const StyledSliderRoot = styled(Root, {\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  touchAction: 'none',\n  width: '200px',\n  height: '20px',\n})\n\nexport type StyledSliderProps = StrictComponentProps<typeof StyledSliderRoot>\n","import type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport React, { useCallback, useState } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { Range } from './partials/range'\nimport { Track } from './partials/track'\nimport { Thumb } from './partials/thumb'\nimport type { StyledSliderProps } from './slider.styled'\nimport { StyledSliderComponent, StyledSliderRoot } from './slider.styled'\nimport { SliderProvider } from './use-slider-context'\n\nexport interface SliderProps extends StyledSliderProps {\n  /**\n   * The maximum value for the range.\n   */\n  max: number\n\n  /**\n   * The children components of the slider.\n   */\n  children: React.ReactNode\n\n  /**\n   * The controlled value of the slider. Must be used in conjunction with onValueChange.\n   */\n  value?: number[]\n\n  /**\n   * The minimum value for the range.\n   */\n  min?: number\n\n  /**\n   * The stepping interval.\n   */\n  step?: number\n\n  /**\n   * When true, prevents the user from interacting with the slider.\n   */\n  disabled?: boolean\n\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number[]) => void\n\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number[]) => void\n\n  /**\n   * When true, prevents the user from interacting with the slider but focus\n   * is still possible.\n   */\n  'aria-disabled'?: Booleanish\n}\n\nexport const Slider = React.forwardRef<\n  ElementRef<typeof StyledSliderRoot>,\n  SliderProps\n>(\n  (\n    {\n      step = 1,\n      disabled = false,\n      'aria-disabled': ariaDisabled = false,\n      min,\n      max,\n      value,\n      onValueCommit,\n      onValueChange,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const [sliderValue, setSliderValue] = useState<number>(\n      value?.[0] ?? min ?? 0\n    )\n    const onSliderValueChange = useCallback(\n      (value: number[]): void => {\n        setSliderValue(value[0])\n        if (onValueChange != null) {\n          onValueChange(value)\n        }\n      },\n      [onValueChange]\n    )\n\n    return (\n      <SliderProvider\n        disabled={disabled}\n        ariaDisabled={booleanify(ariaDisabled)}\n      >\n        <StyledSliderComponent>\n          <StyledSliderRoot\n            {...restProps}\n            step={step}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            defaultValue={[sliderValue]}\n            ref={forwardRef}\n            min={min}\n            max={max}\n            onValueCommit={onValueCommit}\n            onValueChange={onSliderValueChange}\n            onPointerDown={e => {\n              if (booleanify(ariaDisabled)) {\n                e.preventDefault()\n              }\n            }}\n          >\n            {children}\n          </StyledSliderRoot>\n          {sliderValue}\n        </StyledSliderComponent>\n      </SliderProvider>\n    )\n  }\n) as ForwardRefExoticComponent<SliderProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Track: typeof Track\n  Range: typeof Range\n  Thumb: typeof Thumb\n}\n\nSlider.Track = Track\nSlider.Range = Range\nSlider.Thumb = Thumb\n"],"names":["styled","RadixRange","createContext","jsx","useContext","React","RadixTrack","RadixThumb","Primitive","Root","useState","useCallback","value","booleanify"],"mappings":"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"}

package/dist/module.js

@@ -0,0 +1,223 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { booleanify } from '@mirohq/design-system-utils';
+import { Range as Range$1, Track as Track$1, Thumb as Thumb$1, Root } from '@radix-ui/react-slider';
+import { styled } from '@mirohq/design-system-stitches';
+import { Primitive } from '@mirohq/design-system-primitive';
+
+const StyledRange = styled(Range$1, {
+  position: "absolute",
+  backgroundColor: "$background-primary-prominent",
+  borderRadius: "$round",
+  height: "100%",
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    },
+    ariaDisabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    }
+  }
+});
+
+const SliderContext = createContext({});
+const SliderProvider = ({
+  children,
+  disabled,
+  ariaDisabled
+}) => /* @__PURE__ */ jsx(
+  SliderContext.Provider,
+  {
+    value: {
+      disabled,
+      ariaDisabled
+    },
+    children
+  }
+);
+const useSliderContext = () => useContext(SliderContext);
+
+const Range = React.forwardRef((props, forwardRef) => {
+  const { disabled, ariaDisabled } = useSliderContext();
+  return /* @__PURE__ */ jsx(
+    StyledRange,
+    {
+      ...props,
+      disabled,
+      ariaDisabled,
+      ref: forwardRef
+    }
+  );
+});
+
+const StyledTrack = styled(Track$1, {
+  backgroundColor: "$background-neutrals-scrollbar",
+  position: "relative",
+  flexGrow: 1,
+  borderRadius: "$round",
+  height: "6px",
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    },
+    ariaDisabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    }
+  }
+});
+
+const Track = React.forwardRef((props, forwardRef) => {
+  const { disabled, ariaDisabled } = useSliderContext();
+  return /* @__PURE__ */ jsx(
+    StyledTrack,
+    {
+      ...props,
+      disabled,
+      ariaDisabled,
+      ref: forwardRef
+    }
+  );
+});
+
+const StyledThumb = styled(Thumb$1, {
+  display: "block",
+  width: "20px",
+  height: "20px",
+  backgroundColor: "$background-neutrals",
+  borderRadius: "$round",
+  border: "1px solid $border-neutrals-controls",
+  _hover: {
+    boxShadow: "$focus-controls",
+    border: "1px solid $border-primary-hover"
+  },
+  "&:active": {
+    boxShadow: "$focus-controls",
+    border: "1px solid $border-primary-active"
+  },
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: "$background-neutrals-controls-disabled",
+        border: "none",
+        boxShadow: "none",
+        _hover: {
+          boxShadow: "none",
+          border: "none"
+        },
+        "&:active": {
+          boxShadow: "none",
+          border: "none"
+        }
+      }
+    },
+    ariaDisabled: {
+      true: {
+        backgroundColor: "$background-neutrals-controls-disabled",
+        border: "none",
+        boxShadow: "none"
+      }
+    }
+  }
+});
+
+const Thumb = React.forwardRef((props, forwardRef) => {
+  const { disabled, ariaDisabled } = useSliderContext();
+  return /* @__PURE__ */ jsx(
+    StyledThumb,
+    {
+      ...props,
+      disabled,
+      ariaDisabled,
+      ref: forwardRef
+    }
+  );
+});
+
+const StyledSliderComponent = styled(Primitive.div, {
+  display: "flex",
+  flexDirection: "row",
+  gap: "$100"
+});
+const StyledSliderRoot = styled(Root, {
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  userSelect: "none",
+  touchAction: "none",
+  width: "200px",
+  height: "20px"
+});
+
+const Slider = React.forwardRef(
+  ({
+    step = 1,
+    disabled = false,
+    "aria-disabled": ariaDisabled = false,
+    min,
+    max,
+    value,
+    onValueCommit,
+    onValueChange,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    var _a, _b;
+    const [sliderValue, setSliderValue] = useState(
+      (_b = (_a = value == null ? void 0 : value[0]) != null ? _a : min) != null ? _b : 0
+    );
+    const onSliderValueChange = useCallback(
+      (value2) => {
+        setSliderValue(value2[0]);
+        if (onValueChange != null) {
+          onValueChange(value2);
+        }
+      },
+      [onValueChange]
+    );
+    return /* @__PURE__ */ jsx(
+      SliderProvider,
+      {
+        disabled,
+        ariaDisabled: booleanify(ariaDisabled),
+        children: /* @__PURE__ */ jsxs(StyledSliderComponent, { children: [
+          /* @__PURE__ */ jsx(
+            StyledSliderRoot,
+            {
+              ...restProps,
+              step,
+              disabled,
+              "aria-disabled": ariaDisabled,
+              defaultValue: [sliderValue],
+              ref: forwardRef,
+              min,
+              max,
+              onValueCommit,
+              onValueChange: onSliderValueChange,
+              onPointerDown: (e) => {
+                if (booleanify(ariaDisabled)) {
+                  e.preventDefault();
+                }
+              },
+              children
+            }
+          ),
+          sliderValue
+        ] })
+      }
+    );
+  }
+);
+Slider.Track = Track;
+Slider.Range = Range;
+Slider.Thumb = Thumb;
+
+export { Slider };
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sources":["../src/partials/range.styled.tsx","../src/use-slider-context.tsx","../src/partials/range.tsx","../src/partials/track.styled.tsx","../src/partials/track.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/slider.styled.tsx","../src/slider.tsx"],"sourcesContent":["import { Range as RadixRange } from '@radix-ui/react-slider'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledRange = styled(RadixRange, {\n  position: 'absolute',\n  backgroundColor: '$background-primary-prominent',\n  borderRadius: '$round',\n  height: '100%',\n\n  variants: {\n    disabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n      },\n    },\n    ariaDisabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n      },\n    },\n  },\n})\nexport type StyledRangeProps = StrictComponentProps<typeof StyledRange>\n","import React, { createContext, useContext } from 'react'\n\ninterface SliderContextProps {\n  disabled: boolean\n  ariaDisabled: boolean\n}\n\nexport interface SliderProviderProps {\n  disabled: boolean\n  ariaDisabled: boolean\n}\n\nconst SliderContext = createContext<SliderContextProps>({} as any)\n\nexport const SliderProvider = ({\n  children,\n  disabled,\n  ariaDisabled,\n}: React.PropsWithChildren<SliderProviderProps>): JSX.Element => (\n  <SliderContext.Provider\n    value={{\n      disabled,\n      ariaDisabled,\n    }}\n  >\n    {children}\n  </SliderContext.Provider>\n)\n\nexport const useSliderContext = (): SliderContextProps =>\n  useContext(SliderContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledRangeProps } from './range.styled'\nimport { StyledRange } from './range.styled'\nimport { useSliderContext } from '../use-slider-context'\n\nexport interface RangeProps extends StyledRangeProps {}\n\nexport const Range = React.forwardRef<\n  ElementRef<typeof StyledRange>,\n  RangeProps\n>((props, forwardRef) => {\n  const { disabled, ariaDisabled } = useSliderContext()\n\n  return (\n    <StyledRange\n      {...props}\n      disabled={disabled}\n      ariaDisabled={ariaDisabled}\n      ref={forwardRef}\n    />\n  )\n})\n","import { Track as RadixTrack } from '@radix-ui/react-slider'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledTrack = styled(RadixTrack, {\n  backgroundColor: '$background-neutrals-scrollbar',\n  position: 'relative',\n  flexGrow: 1,\n  borderRadius: '$round',\n  height: '6px',\n\n  variants: {\n    disabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n      },\n    },\n    ariaDisabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n      },\n    },\n  },\n})\nexport type StyledTrackProps = StrictComponentProps<typeof StyledTrack>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledTrackProps } from './track.styled'\nimport { StyledTrack } from './track.styled'\nimport { useSliderContext } from '../use-slider-context'\n\nexport interface TrackProps extends StyledTrackProps {}\n\nexport const Track = React.forwardRef<\n  ElementRef<typeof StyledTrack>,\n  TrackProps\n>((props, forwardRef) => {\n  const { disabled, ariaDisabled } = useSliderContext()\n\n  return (\n    <StyledTrack\n      {...props}\n      disabled={disabled}\n      ariaDisabled={ariaDisabled}\n      ref={forwardRef}\n    />\n  )\n})\n","import { Thumb as RadixThumb } from '@radix-ui/react-slider'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n  display: 'block',\n  width: '20px',\n  height: '20px',\n  backgroundColor: '$background-neutrals',\n  borderRadius: '$round',\n  border: '1px solid $border-neutrals-controls',\n\n  _hover: {\n    boxShadow: '$focus-controls',\n    border: '1px solid $border-primary-hover',\n  },\n\n  '&:active': {\n    boxShadow: '$focus-controls',\n    border: '1px solid $border-primary-active',\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        backgroundColor: '$background-neutrals-controls-disabled',\n        border: 'none',\n        boxShadow: 'none',\n\n        _hover: {\n          boxShadow: 'none',\n          border: 'none',\n        },\n\n        '&:active': {\n          boxShadow: 'none',\n          border: 'none',\n        },\n      },\n    },\n    ariaDisabled: {\n      true: {\n        backgroundColor: '$background-neutrals-controls-disabled',\n        border: 'none',\n        boxShadow: 'none',\n      },\n    },\n  },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledThumbProps } from './thumb.styled'\nimport { StyledThumb } from './thumb.styled'\nimport { useSliderContext } from '../use-slider-context'\n\nexport interface ThumbProps extends StyledThumbProps {}\n\nexport const Thumb = React.forwardRef<\n  ElementRef<typeof StyledThumb>,\n  ThumbProps\n>((props, forwardRef) => {\n  const { disabled, ariaDisabled } = useSliderContext()\n\n  return (\n    <StyledThumb\n      {...props}\n      disabled={disabled}\n      ariaDisabled={ariaDisabled}\n      ref={forwardRef}\n    />\n  )\n})\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-slider'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledSliderComponent = styled(Primitive.div, {\n  display: 'flex',\n  flexDirection: 'row',\n  gap: '$100',\n})\n\nexport const StyledSliderRoot = styled(Root, {\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  touchAction: 'none',\n  width: '200px',\n  height: '20px',\n})\n\nexport type StyledSliderProps = StrictComponentProps<typeof StyledSliderRoot>\n","import type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport React, { useCallback, useState } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { Range } from './partials/range'\nimport { Track } from './partials/track'\nimport { Thumb } from './partials/thumb'\nimport type { StyledSliderProps } from './slider.styled'\nimport { StyledSliderComponent, StyledSliderRoot } from './slider.styled'\nimport { SliderProvider } from './use-slider-context'\n\nexport interface SliderProps extends StyledSliderProps {\n  /**\n   * The maximum value for the range.\n   */\n  max: number\n\n  /**\n   * The children components of the slider.\n   */\n  children: React.ReactNode\n\n  /**\n   * The controlled value of the slider. Must be used in conjunction with onValueChange.\n   */\n  value?: number[]\n\n  /**\n   * The minimum value for the range.\n   */\n  min?: number\n\n  /**\n   * The stepping interval.\n   */\n  step?: number\n\n  /**\n   * When true, prevents the user from interacting with the slider.\n   */\n  disabled?: boolean\n\n  /**\n   * Event handler called when the value changes at the end of an interaction.\n   * Useful when you only need to capture a final value e.g. to update a backend service.\n   */\n  onValueCommit?: (value: number[]) => void\n\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number[]) => void\n\n  /**\n   * When true, prevents the user from interacting with the slider but focus\n   * is still possible.\n   */\n  'aria-disabled'?: Booleanish\n}\n\nexport const Slider = React.forwardRef<\n  ElementRef<typeof StyledSliderRoot>,\n  SliderProps\n>(\n  (\n    {\n      step = 1,\n      disabled = false,\n      'aria-disabled': ariaDisabled = false,\n      min,\n      max,\n      value,\n      onValueCommit,\n      onValueChange,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const [sliderValue, setSliderValue] = useState<number>(\n      value?.[0] ?? min ?? 0\n    )\n    const onSliderValueChange = useCallback(\n      (value: number[]): void => {\n        setSliderValue(value[0])\n        if (onValueChange != null) {\n          onValueChange(value)\n        }\n      },\n      [onValueChange]\n    )\n\n    return (\n      <SliderProvider\n        disabled={disabled}\n        ariaDisabled={booleanify(ariaDisabled)}\n      >\n        <StyledSliderComponent>\n          <StyledSliderRoot\n            {...restProps}\n            step={step}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            defaultValue={[sliderValue]}\n            ref={forwardRef}\n            min={min}\n            max={max}\n            onValueCommit={onValueCommit}\n            onValueChange={onSliderValueChange}\n            onPointerDown={e => {\n              if (booleanify(ariaDisabled)) {\n                e.preventDefault()\n              }\n            }}\n          >\n            {children}\n          </StyledSliderRoot>\n          {sliderValue}\n        </StyledSliderComponent>\n      </SliderProvider>\n    )\n  }\n) as ForwardRefExoticComponent<SliderProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Track: typeof Track\n  Range: typeof Range\n  Thumb: typeof Thumb\n}\n\nSlider.Track = Track\nSlider.Range = Range\nSlider.Thumb = Thumb\n"],"names":["RadixRange","RadixTrack","RadixThumb","value"],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,98 @@
+import * as react from 'react';
+import react__default, { ForwardRefExoticComponent } from 'react';
+import { Booleanish } from '@mirohq/design-system-types';
+import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
+import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import { StrictComponentProps } from '@mirohq/design-system-stitches';
+import * as _radix_ui_react_slider from '@radix-ui/react-slider';
+
+declare const StyledRange: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_slider.SliderRangeProps & react.RefAttributes<HTMLSpanElement>>>, "disabled" | "ariaDisabled"> & _stitches_react_types_styled_component.TransformProps<{
+    disabled?: boolean | "true" | undefined;
+    ariaDisabled?: boolean | "true" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_slider.SliderRangeProps & react.RefAttributes<HTMLSpanElement>>, {
+    disabled?: boolean | "true" | undefined;
+    ariaDisabled?: boolean | "true" | undefined;
+}, {}>;
+declare type StyledRangeProps = StrictComponentProps<typeof StyledRange>;
+
+interface RangeProps extends StyledRangeProps {
+}
+declare const Range: react__default.ForwardRefExoticComponent<Omit<RangeProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
+
+declare const StyledTrack: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_slider.SliderTrackProps & react.RefAttributes<HTMLSpanElement>>>, "disabled" | "ariaDisabled"> & _stitches_react_types_styled_component.TransformProps<{
+    disabled?: boolean | "true" | undefined;
+    ariaDisabled?: boolean | "true" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_slider.SliderTrackProps & react.RefAttributes<HTMLSpanElement>>, {
+    disabled?: boolean | "true" | undefined;
+    ariaDisabled?: boolean | "true" | undefined;
+}, {}>;
+declare type StyledTrackProps = StrictComponentProps<typeof StyledTrack>;
+
+interface TrackProps extends StyledTrackProps {
+}
+declare const Track: react__default.ForwardRefExoticComponent<Omit<TrackProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
+
+declare const StyledThumb: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_slider.SliderThumbProps & react.RefAttributes<HTMLSpanElement>>>, "disabled" | "ariaDisabled"> & _stitches_react_types_styled_component.TransformProps<{
+    disabled?: boolean | "true" | undefined;
+    ariaDisabled?: boolean | "true" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_slider.SliderThumbProps & react.RefAttributes<HTMLSpanElement>>, {
+    disabled?: boolean | "true" | undefined;
+    ariaDisabled?: boolean | "true" | undefined;
+}, {}>;
+declare type StyledThumbProps = StrictComponentProps<typeof StyledThumb>;
+
+interface ThumbProps extends StyledThumbProps {
+}
+declare const Thumb: react__default.ForwardRefExoticComponent<Omit<ThumbProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
+
+declare const StyledSliderRoot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_slider.SliderProps & react.RefAttributes<HTMLSpanElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_slider.SliderProps & react.RefAttributes<HTMLSpanElement>>, {}, {}>;
+declare type StyledSliderProps = StrictComponentProps<typeof StyledSliderRoot>;
+
+interface SliderProps extends StyledSliderProps {
+    /**
+     * The maximum value for the range.
+     */
+    max: number;
+    /**
+     * The children components of the slider.
+     */
+    children: react__default.ReactNode;
+    /**
+     * The controlled value of the slider. Must be used in conjunction with onValueChange.
+     */
+    value?: number[];
+    /**
+     * The minimum value for the range.
+     */
+    min?: number;
+    /**
+     * The stepping interval.
+     */
+    step?: number;
+    /**
+     * When true, prevents the user from interacting with the slider.
+     */
+    disabled?: boolean;
+    /**
+     * Event handler called when the value changes at the end of an interaction.
+     * Useful when you only need to capture a final value e.g. to update a backend service.
+     */
+    onValueCommit?: (value: number[]) => void;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: number[]) => void;
+    /**
+     * When true, prevents the user from interacting with the slider but focus
+     * is still possible.
+     */
+    'aria-disabled'?: Booleanish;
+}
+declare const Slider: ForwardRefExoticComponent<SliderProps> & Partials;
+interface Partials {
+    Track: typeof Track;
+    Range: typeof Range;
+    Thumb: typeof Thumb;
+}
+
+export { Slider, SliderProps, RangeProps as SliderRangeProps, ThumbProps as SliderThumbProps, TrackProps as SliderTrackProps };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@mirohq/design-system-slider",
+  "version": "0.1.0-slider.0",
+  "description": "",
+  "author": "Miro",
+  "source": "src/index.ts",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/main.js",
+      "import": "./dist/module.js",
+      "types": "./dist/types.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@stitches/react": "^1.2.8",
+    "react": "^16.14 || ^17 || ^18"
+  },
+  "dependencies": {
+    "@radix-ui/react-slider": "^1.2.0",
+    "@mirohq/design-system-primitive": "^1.1.2",
+    "@mirohq/design-system-utils": "^0.15.4",
+    "@mirohq/design-system-stitches": "^2.6.11"
+  },
+  "scripts": {
+    "build": "rollup -c ../../../rollup.config.js",
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm clean"
+  }
+}