@mirohq/design-system-slider 0.1.17 → 0.2.0

package/dist/main.js

@@ -7,7 +7,10 @@ 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 designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
+var designSystemStyles = require('@mirohq/design-system-styles');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
+var designSystemBaseTextField = require('@mirohq/design-system-base-text-field');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,57 +38,40 @@ const StyledRange = designSystemStitches.styled(reactSlider.Range, {
 const SliderContext = React.createContext({});
 const SliderProvider = ({
   children,
-  disabled,
-  ariaDisabled
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  SliderContext.Provider,
-  {
-    value: {
-      disabled,
-      ariaDisabled
+  min,
+  value: valueProp,
+  onValueChange: onValueChangeProp,
+  ...restProps
+}) => {
+  const [value, setSliderValue] = React.useState(valueProp != null ? valueProp : min);
+  const onValueChange = React.useCallback(
+    (value2) => {
+      setSliderValue(value2);
+      if (onValueChangeProp != null) {
+        onValueChangeProp(value2);
+      }
     },
-    children
-  }
-);
-const useSliderContext = () => React.useContext(SliderContext);
-
-const Range = React__default["default"].forwardRef((props, forwardRef) => {
-  const { disabled, ariaDisabled } = useSliderContext();
+    [onValueChangeProp]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledRange,
+    SliderContext.Provider,
     {
-      ...props,
-      disabled,
-      ariaDisabled,
-      ref: forwardRef
+      value: {
+        ...restProps,
+        min,
+        value,
+        onValueChange
+      },
+      children
     }
   );
-});
-
-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 useSliderContext = () => React.useContext(SliderContext);
 
-const Track = React__default["default"].forwardRef((props, forwardRef) => {
+const Range = React__default["default"].forwardRef((props, forwardRef) => {
   const { disabled, ariaDisabled } = useSliderContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledTrack,
+    StyledRange,
     {
       ...props,
       disabled,
@@ -103,14 +89,19 @@ const StyledThumb = designSystemStitches.styled(reactSlider.Thumb, {
   borderRadius: "$round",
   border: "1px solid $border-neutrals-controls",
   cursor: "pointer",
+  outline: "none",
   _hover: {
     boxShadow: "$focus-controls",
-    border: "1px solid $border-primary-hover"
+    borderColor: "$border-primary-hover"
   },
-  "&:active": {
+  "&:active, &[data-pressed]": {
     boxShadow: "$focus-controls",
-    border: "1px solid $border-primary-active"
+    borderColor: "$border-primary-active"
   },
+  ...designSystemStyles.focus.css({
+    boxShadow: "$focus-controls",
+    borderColor: "$border-primary-selected"
+  }),
   variants: {
     disabled: {
       true: {
@@ -141,24 +132,129 @@ const StyledThumb = designSystemStitches.styled(reactSlider.Thumb, {
 
 const Thumb = React__default["default"].forwardRef((props, forwardRef) => {
   const { disabled, ariaDisabled } = useSliderContext();
+  const elementProps = designSystemUseAriaDisabled.useAriaDisabled({
+    ...props,
+    ariaDisabled
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledThumb, { ...elementProps, disabled, ref: forwardRef });
+});
+
+const StyledSlider = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  flexDirection: "row",
+  gap: "$100",
+  alignItems: "center"
+});
+
+const StyledValue = designSystemStitches.styled("span", {});
+
+const Value = React__default["default"].forwardRef((props, forwardRef) => {
+  const { value } = useSliderContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { ...props, ref: forwardRef, children: value });
+});
+
+const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"]';
+const StyledInput = designSystemStitches.styled("input", {
+  all: "unset",
+  display: "block",
+  maxWidth: "$11",
+  height: "$8",
+  padding: "0 $50",
+  textAlign: "center",
+  ...designSystemBaseTextField.textFieldStyles.variants.idle,
+  ...designSystemBaseTextField.textFieldStyles.v1.idle,
+  "&:read-only": designSystemBaseTextField.textFieldStyles.v1.readOnly,
+  '&:disabled, &[aria-disabled="true"]': {
+    ...designSystemBaseTextField.textFieldStyles.variants.disabled,
+    ...designSystemBaseTextField.textFieldStyles.base.disabled
+  },
+  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
+    _hover: designSystemBaseTextField.textFieldStyles.variants.hovered
+  },
+  ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: designSystemBaseTextField.textFieldStyles.base.placeholder.v1,
+  ...designSystemStyles.focus.css({
+    ...designSystemBaseTextField.textFieldStyles.v1.focused
+  }),
+  "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
+    "-webkit-appearance": "none",
+    margin: 0
+  },
+  "&[type=number]": {
+    "-moz-appearance": "textfield"
+  }
+});
+
+const Input = React__default["default"].forwardRef((props, forwardRef) => {
+  const {
+    value,
+    onValueChange,
+    onValueCommit,
+    min,
+    max,
+    step,
+    disabled,
+    ariaDisabled
+  } = useSliderContext();
+  const [inputValue, setInputValue] = React.useState(value.toString());
+  React.useEffect(() => {
+    setInputValue(value.toString());
+  }, [value]);
+  const elementProps = designSystemUseAriaDisabled.useAriaDisabled({
+    ...props,
+    ariaDisabled,
+    onKeyUp: (e) => {
+      if (e.key === "Enter") {
+        let valueToSet = Number(inputValue);
+        if (max !== void 0 && valueToSet > max) {
+          valueToSet = max;
+        } else if (min !== void 0 && valueToSet < min) {
+          valueToSet = min;
+        } else if (step !== void 0 && valueToSet % step !== 0) {
+          valueToSet = Math.round(valueToSet / step) * step;
+        }
+        setInputValue(valueToSet.toString());
+        onValueChange(valueToSet);
+        onValueCommit == null ? void 0 : onValueCommit(valueToSet);
+      }
+    },
+    onChange: (e) => {
+      setInputValue(e.target.value);
+    }
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledThumb,
+    StyledInput,
     {
-      ...props,
-      disabled,
-      ariaDisabled,
-      ref: forwardRef
+      ...elementProps,
+      type: "number",
+      ref: forwardRef,
+      value: inputValue,
+      disabled
     }
   );
 });
 
-const StyledSliderComponent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+const StyledTrack = designSystemStitches.styled(reactSlider.Track, {
+  backgroundColor: "$background-neutrals-scrollbar",
+  position: "relative",
+  flexGrow: 1,
+  borderRadius: "$round",
+  height: "6px",
   display: "flex",
-  flexDirection: "row",
-  gap: "$100",
-  alignItems: "center"
+  alignItems: "center",
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    },
+    ariaDisabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    }
+  }
 });
-const StyledSliderRoot = designSystemStitches.styled(reactSlider.Root, {
+const StyledRoot = designSystemStitches.styled(reactSlider.Root, {
   position: "relative",
   display: "flex",
   alignItems: "center",
@@ -168,68 +264,90 @@ const StyledSliderRoot = designSystemStitches.styled(reactSlider.Root, {
   height: "20px"
 });
 
-const Slider = React__default["default"].forwardRef(
+const Track = React__default["default"].forwardRef(
   ({
-    step = 1,
-    disabled = false,
-    "aria-disabled": ariaDisabled = false,
-    min,
-    max,
-    value,
-    onValueCommit,
-    onValueChange,
     children,
+    css,
+    // @ts-expect-error className required when extending the component with styled()
+    className,
     ...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]
-    );
+    const {
+      value,
+      min,
+      max,
+      step,
+      onValueCommit,
+      onValueChange,
+      disabled,
+      ariaDisabled
+    } = useSliderContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
-      SliderProvider,
+      StyledRoot,
       {
+        css,
+        className,
+        step,
         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
-        ] })
+        "aria-disabled": ariaDisabled,
+        value: [value],
+        ref: forwardRef,
+        min,
+        max,
+        onValueCommit: (value2) => onValueCommit == null ? void 0 : onValueCommit(value2[0]),
+        onValueChange: (value2) => onValueChange(value2[0]),
+        onPointerDown: (e) => {
+          if (designSystemUtils.booleanify(ariaDisabled)) {
+            e.preventDefault();
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          StyledTrack,
+          {
+            ...restProps,
+            disabled,
+            ariaDisabled,
+            ref: forwardRef,
+            children
+          }
+        )
       }
     );
   }
 );
+
+const Slider = React__default["default"].forwardRef(
+  ({
+    step = 1,
+    disabled = false,
+    "aria-disabled": ariaDisabled = false,
+    min = 0,
+    max = 100,
+    value,
+    onValueCommit,
+    onValueChange,
+    children,
+    ...restProps
+  }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
+    SliderProvider,
+    {
+      value,
+      onValueCommit,
+      onValueChange,
+      step,
+      min,
+      max,
+      disabled,
+      ariaDisabled: designSystemUtils.booleanify(ariaDisabled),
+      children: /* @__PURE__ */ jsxRuntime.jsx(StyledSlider, { ...restProps, ref: forwardRef, children })
+    }
+  )
+);
 Slider.Track = Track;
 Slider.Range = Range;
 Slider.Thumb = Thumb;
+Slider.Value = Value;
+Slider.Input = Input;
 
 exports.Slider = Slider;
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +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  cursor: 'pointer',\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-disabled',\n        border: 'none',\n        boxShadow: 'none',\n        cursor: 'default',\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-disabled',\n        border: 'none',\n        boxShadow: 'none',\n        cursor: 'default',\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  alignItems: 'center',\n})\n\nexport const StyledSliderRoot = styled(Root, {\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  touchAction: 'none',\n  flex: 1,\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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"}
+{"version":3,"file":"main.js","sources":["../src/partials/range.styled.tsx","../src/use-slider-context.tsx","../src/partials/range.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/slider.styled.tsx","../src/partials/value.styled.tsx","../src/partials/value.tsx","../src/partials/input.styled.tsx","../src/partials/input.tsx","../src/partials/track.styled.tsx","../src/partials/track.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, useCallback, useContext, useState } from 'react'\n\ninterface SharedProps {\n  disabled: boolean\n  ariaDisabled: boolean\n  min: number\n  max: number\n  step?: number\n  onValueCommit?: (value: number) => void\n}\n\ninterface SliderContextProps extends SharedProps {\n  value: number\n  onValueChange: (value: number) => void\n}\n\nexport interface SliderProviderProps extends SharedProps {\n  value?: number\n  onValueChange?: (value: number) => void\n}\n\nconst SliderContext = createContext<SliderContextProps>({} as any)\n\nexport const SliderProvider = ({\n  children,\n  min,\n  value: valueProp,\n  onValueChange: onValueChangeProp,\n  ...restProps\n}: React.PropsWithChildren<SliderProviderProps>): JSX.Element => {\n  const [value, setSliderValue] = useState<number>(valueProp ?? min)\n  const onValueChange = useCallback(\n    (value: number): void => {\n      setSliderValue(value)\n      if (onValueChangeProp != null) {\n        onValueChangeProp(value)\n      }\n    },\n    [onValueChangeProp]\n  )\n\n  return (\n    <SliderContext.Provider\n      value={{\n        ...restProps,\n        min,\n        value,\n        onValueChange,\n      }}\n    >\n      {children}\n    </SliderContext.Provider>\n  )\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 { Thumb as RadixThumb } from '@radix-ui/react-slider'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\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  cursor: 'pointer',\n  outline: 'none',\n\n  _hover: {\n    boxShadow: '$focus-controls',\n    borderColor: '$border-primary-hover',\n  },\n\n  '&:active, &[data-pressed]': {\n    boxShadow: '$focus-controls',\n    borderColor: '$border-primary-active',\n  },\n\n  ...focus.css({\n    boxShadow: '$focus-controls',\n    borderColor: '$border-primary-selected',\n  }),\n\n  variants: {\n    disabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n        border: 'none',\n        boxShadow: 'none',\n        cursor: 'default',\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-disabled',\n        border: 'none',\n        boxShadow: 'none',\n        cursor: 'default',\n      },\n    },\n  },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\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  const elementProps = useAriaDisabled({\n    ...props,\n    ariaDisabled,\n  })\n\n  return <StyledThumb {...elementProps} disabled={disabled} ref={forwardRef} />\n})\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledSlider = styled(Primitive.div, {\n  display: 'flex',\n  flexDirection: 'row',\n  gap: '$100',\n  alignItems: 'center',\n})\n\nexport type StyledSliderProps = StrictComponentProps<typeof StyledSlider>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const StyledValue = styled('span', {})\nexport type StyledValueProps = ComponentPropsWithRef<typeof StyledValue>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useSliderContext } from '../use-slider-context'\nimport type { StyledValueProps } from './value.styled'\nimport { StyledValue } from './value.styled'\n\nexport interface ValueProps extends StyledValueProps {}\n\nexport const Value = React.forwardRef<\n  ElementRef<typeof StyledValue>,\n  ValueProps\n>((props, forwardRef) => {\n  const { value } = useSliderContext()\n\n  return (\n    <StyledValue {...props} ref={forwardRef}>\n      {value}\n    </StyledValue>\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport { textFieldStyles } from '@mirohq/design-system-base-text-field'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst disabledAndReadonlySelectors =\n  ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledInput = styled('input', {\n  all: 'unset',\n  display: 'block',\n  maxWidth: '$11',\n  height: '$8',\n  padding: '0 $50',\n  textAlign: 'center',\n\n  ...textFieldStyles.variants.idle,\n  ...textFieldStyles.v1.idle,\n\n  '&:read-only': textFieldStyles.v1.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...textFieldStyles.variants.disabled,\n    ...textFieldStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: textFieldStyles.variants.hovered,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n    textFieldStyles.base.placeholder.v1,\n\n  ...focus.css({\n    ...textFieldStyles.v1.focused,\n  }),\n\n  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n    '-webkit-appearance': 'none',\n    margin: 0,\n  },\n  '&[type=number]': {\n    '-moz-appearance': 'textfield',\n  },\n})\nexport type StyledInputProps = ComponentPropsWithRef<typeof StyledInput>\n","import React, { useEffect, useState } from 'react'\nimport type { ElementRef } from 'react'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { useSliderContext } from '../use-slider-context'\nimport type { StyledInputProps } from './input.styled'\nimport { StyledInput } from './input.styled'\n\nexport interface ValueProps extends StyledInputProps {}\n\nexport const Input = React.forwardRef<\n  ElementRef<typeof StyledInput>,\n  ValueProps\n>((props, forwardRef) => {\n  const {\n    value,\n    onValueChange,\n    onValueCommit,\n    min,\n    max,\n    step,\n    disabled,\n    ariaDisabled,\n  } = useSliderContext()\n  const [inputValue, setInputValue] = useState(value.toString())\n\n  useEffect(() => {\n    setInputValue(value.toString())\n  }, [value])\n\n  const elementProps = useAriaDisabled({\n    ...props,\n    ariaDisabled,\n    onKeyUp: e => {\n      if (e.key === 'Enter') {\n        let valueToSet = Number(inputValue)\n        if (max !== undefined && valueToSet > max) {\n          valueToSet = max\n        } else if (min !== undefined && valueToSet < min) {\n          valueToSet = min\n        } else if (step !== undefined && valueToSet % step !== 0) {\n          valueToSet = Math.round(valueToSet / step) * step\n        }\n\n        setInputValue(valueToSet.toString())\n        onValueChange(valueToSet)\n        onValueCommit?.(valueToSet)\n      }\n    },\n    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n      setInputValue(e.target.value)\n    },\n  })\n\n  return (\n    <StyledInput\n      {...elementProps}\n      type='number'\n      ref={forwardRef}\n      value={inputValue}\n      disabled={disabled}\n    />\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root, Track as RadixTrack } from '@radix-ui/react-slider'\n\nexport const StyledTrack = styled(RadixTrack, {\n  backgroundColor: '$background-neutrals-scrollbar',\n  position: 'relative',\n  flexGrow: 1,\n  borderRadius: '$round',\n  height: '6px',\n  display: 'flex',\n  alignItems: 'center',\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})\n\nexport const StyledRoot = styled(Root, {\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  touchAction: 'none',\n  flex: 1,\n  height: '20px',\n})\n\nexport type StyledTrackProps = StrictComponentProps<typeof StyledTrack>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { useSliderContext } from '../use-slider-context'\nimport { StyledRoot, StyledTrack } from './track.styled'\nimport type { StyledTrackProps } from './track.styled'\n\nexport interface TrackProps extends StyledTrackProps {}\n\nexport const Track = React.forwardRef<\n  ElementRef<typeof StyledRoot>,\n  TrackProps\n>(\n  (\n    {\n      children,\n      css,\n      // @ts-expect-error className required when extending the component with styled()\n      className,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const {\n      value,\n      min,\n      max,\n      step,\n      onValueCommit,\n      onValueChange,\n      disabled,\n      ariaDisabled,\n    } = useSliderContext()\n\n    return (\n      <StyledRoot\n        css={css}\n        // @ts-expect-error className required when extending the component with styled()\n        className={className}\n        step={step}\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        value={[value]}\n        ref={forwardRef}\n        min={min}\n        max={max}\n        onValueCommit={value => onValueCommit?.(value[0])}\n        onValueChange={value => onValueChange(value[0])}\n        onPointerDown={e => {\n          if (booleanify(ariaDisabled)) {\n            e.preventDefault()\n          }\n        }}\n      >\n        <StyledTrack\n          {...restProps}\n          disabled={disabled}\n          ariaDisabled={ariaDisabled}\n          ref={forwardRef}\n        >\n          {children}\n        </StyledTrack>\n      </StyledRoot>\n    )\n  }\n)\n","import type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport React from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { Range } from './partials/range'\nimport { Thumb } from './partials/thumb'\nimport type { StyledSliderProps } from './slider.styled'\nimport { StyledSlider } from './slider.styled'\nimport { SliderProvider } from './use-slider-context'\nimport { Value } from './partials/value'\nimport { Input } from './partials/input'\nimport { Track } from './partials/track'\n\nexport interface SliderProps extends StyledSliderProps {\n  /**\n   * The maximum value for the range.\n   * @default 100\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   * @default 0\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 StyledSlider>,\n  SliderProps\n>(\n  (\n    {\n      step = 1,\n      disabled = false,\n      'aria-disabled': ariaDisabled = false,\n      min = 0,\n      max = 100,\n      value,\n      onValueCommit,\n      onValueChange,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <SliderProvider\n      value={value}\n      onValueCommit={onValueCommit}\n      onValueChange={onValueChange}\n      step={step}\n      min={min}\n      max={max}\n      disabled={disabled}\n      ariaDisabled={booleanify(ariaDisabled)}\n    >\n      <StyledSlider {...restProps} ref={forwardRef}>\n        {children}\n      </StyledSlider>\n    </SliderProvider>\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  Value: typeof Value\n  Input: typeof Input\n}\n\nSlider.Track = Track\nSlider.Range = Range\nSlider.Thumb = Thumb\nSlider.Value = Value\nSlider.Input = Input\n"],"names":["styled","RadixRange","createContext","useState","useCallback","value","jsx","useContext","React","RadixThumb","focus","useAriaDisabled","Primitive","textFieldStyles","useEffect","RadixTrack","Root","booleanify"],"mappings":"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"}

package/dist/module.js

@@ -1,9 +1,12 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { createContext, useContext, useState, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import React, { createContext, useState, useCallback, useContext, useEffect } 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 { Range as Range$1, Thumb as Thumb$1, Track as Track$1, Root } from '@radix-ui/react-slider';
 import { styled } from '@mirohq/design-system-stitches';
+import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
+import { focus } from '@mirohq/design-system-styles';
 import { Primitive } from '@mirohq/design-system-primitive';
+import { textFieldStyles } from '@mirohq/design-system-base-text-field';
 
 const StyledRange = styled(Range$1, {
   position: "absolute",
@@ -27,57 +30,40 @@ const StyledRange = styled(Range$1, {
 const SliderContext = createContext({});
 const SliderProvider = ({
   children,
-  disabled,
-  ariaDisabled
-}) => /* @__PURE__ */ jsx(
-  SliderContext.Provider,
-  {
-    value: {
-      disabled,
-      ariaDisabled
+  min,
+  value: valueProp,
+  onValueChange: onValueChangeProp,
+  ...restProps
+}) => {
+  const [value, setSliderValue] = useState(valueProp != null ? valueProp : min);
+  const onValueChange = useCallback(
+    (value2) => {
+      setSliderValue(value2);
+      if (onValueChangeProp != null) {
+        onValueChangeProp(value2);
+      }
     },
-    children
-  }
-);
-const useSliderContext = () => useContext(SliderContext);
-
-const Range = React.forwardRef((props, forwardRef) => {
-  const { disabled, ariaDisabled } = useSliderContext();
+    [onValueChangeProp]
+  );
   return /* @__PURE__ */ jsx(
-    StyledRange,
+    SliderContext.Provider,
     {
-      ...props,
-      disabled,
-      ariaDisabled,
-      ref: forwardRef
+      value: {
+        ...restProps,
+        min,
+        value,
+        onValueChange
+      },
+      children
     }
   );
-});
-
-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 useSliderContext = () => useContext(SliderContext);
 
-const Track = React.forwardRef((props, forwardRef) => {
+const Range = React.forwardRef((props, forwardRef) => {
   const { disabled, ariaDisabled } = useSliderContext();
   return /* @__PURE__ */ jsx(
-    StyledTrack,
+    StyledRange,
     {
       ...props,
       disabled,
@@ -95,14 +81,19 @@ const StyledThumb = styled(Thumb$1, {
   borderRadius: "$round",
   border: "1px solid $border-neutrals-controls",
   cursor: "pointer",
+  outline: "none",
   _hover: {
     boxShadow: "$focus-controls",
-    border: "1px solid $border-primary-hover"
+    borderColor: "$border-primary-hover"
   },
-  "&:active": {
+  "&:active, &[data-pressed]": {
     boxShadow: "$focus-controls",
-    border: "1px solid $border-primary-active"
+    borderColor: "$border-primary-active"
   },
+  ...focus.css({
+    boxShadow: "$focus-controls",
+    borderColor: "$border-primary-selected"
+  }),
   variants: {
     disabled: {
       true: {
@@ -133,24 +124,129 @@ const StyledThumb = styled(Thumb$1, {
 
 const Thumb = React.forwardRef((props, forwardRef) => {
   const { disabled, ariaDisabled } = useSliderContext();
+  const elementProps = useAriaDisabled({
+    ...props,
+    ariaDisabled
+  });
+  return /* @__PURE__ */ jsx(StyledThumb, { ...elementProps, disabled, ref: forwardRef });
+});
+
+const StyledSlider = styled(Primitive.div, {
+  display: "flex",
+  flexDirection: "row",
+  gap: "$100",
+  alignItems: "center"
+});
+
+const StyledValue = styled("span", {});
+
+const Value = React.forwardRef((props, forwardRef) => {
+  const { value } = useSliderContext();
+  return /* @__PURE__ */ jsx(StyledValue, { ...props, ref: forwardRef, children: value });
+});
+
+const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"]';
+const StyledInput = styled("input", {
+  all: "unset",
+  display: "block",
+  maxWidth: "$11",
+  height: "$8",
+  padding: "0 $50",
+  textAlign: "center",
+  ...textFieldStyles.variants.idle,
+  ...textFieldStyles.v1.idle,
+  "&:read-only": textFieldStyles.v1.readOnly,
+  '&:disabled, &[aria-disabled="true"]': {
+    ...textFieldStyles.variants.disabled,
+    ...textFieldStyles.base.disabled
+  },
+  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
+    _hover: textFieldStyles.variants.hovered
+  },
+  ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: textFieldStyles.base.placeholder.v1,
+  ...focus.css({
+    ...textFieldStyles.v1.focused
+  }),
+  "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
+    "-webkit-appearance": "none",
+    margin: 0
+  },
+  "&[type=number]": {
+    "-moz-appearance": "textfield"
+  }
+});
+
+const Input = React.forwardRef((props, forwardRef) => {
+  const {
+    value,
+    onValueChange,
+    onValueCommit,
+    min,
+    max,
+    step,
+    disabled,
+    ariaDisabled
+  } = useSliderContext();
+  const [inputValue, setInputValue] = useState(value.toString());
+  useEffect(() => {
+    setInputValue(value.toString());
+  }, [value]);
+  const elementProps = useAriaDisabled({
+    ...props,
+    ariaDisabled,
+    onKeyUp: (e) => {
+      if (e.key === "Enter") {
+        let valueToSet = Number(inputValue);
+        if (max !== void 0 && valueToSet > max) {
+          valueToSet = max;
+        } else if (min !== void 0 && valueToSet < min) {
+          valueToSet = min;
+        } else if (step !== void 0 && valueToSet % step !== 0) {
+          valueToSet = Math.round(valueToSet / step) * step;
+        }
+        setInputValue(valueToSet.toString());
+        onValueChange(valueToSet);
+        onValueCommit == null ? void 0 : onValueCommit(valueToSet);
+      }
+    },
+    onChange: (e) => {
+      setInputValue(e.target.value);
+    }
+  });
   return /* @__PURE__ */ jsx(
-    StyledThumb,
+    StyledInput,
     {
-      ...props,
-      disabled,
-      ariaDisabled,
-      ref: forwardRef
+      ...elementProps,
+      type: "number",
+      ref: forwardRef,
+      value: inputValue,
+      disabled
     }
   );
 });
 
-const StyledSliderComponent = styled(Primitive.div, {
+const StyledTrack = styled(Track$1, {
+  backgroundColor: "$background-neutrals-scrollbar",
+  position: "relative",
+  flexGrow: 1,
+  borderRadius: "$round",
+  height: "6px",
   display: "flex",
-  flexDirection: "row",
-  gap: "$100",
-  alignItems: "center"
+  alignItems: "center",
+  variants: {
+    disabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    },
+    ariaDisabled: {
+      true: {
+        backgroundColor: "$background-neutrals-disabled"
+      }
+    }
+  }
 });
-const StyledSliderRoot = styled(Root, {
+const StyledRoot = styled(Root, {
   position: "relative",
   display: "flex",
   alignItems: "center",
@@ -160,68 +256,90 @@ const StyledSliderRoot = styled(Root, {
   height: "20px"
 });
 
-const Slider = React.forwardRef(
+const Track = React.forwardRef(
   ({
-    step = 1,
-    disabled = false,
-    "aria-disabled": ariaDisabled = false,
-    min,
-    max,
-    value,
-    onValueCommit,
-    onValueChange,
     children,
+    css,
+    // @ts-expect-error className required when extending the component with styled()
+    className,
     ...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]
-    );
+    const {
+      value,
+      min,
+      max,
+      step,
+      onValueCommit,
+      onValueChange,
+      disabled,
+      ariaDisabled
+    } = useSliderContext();
     return /* @__PURE__ */ jsx(
-      SliderProvider,
+      StyledRoot,
       {
+        css,
+        className,
+        step,
         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
-        ] })
+        "aria-disabled": ariaDisabled,
+        value: [value],
+        ref: forwardRef,
+        min,
+        max,
+        onValueCommit: (value2) => onValueCommit == null ? void 0 : onValueCommit(value2[0]),
+        onValueChange: (value2) => onValueChange(value2[0]),
+        onPointerDown: (e) => {
+          if (booleanify(ariaDisabled)) {
+            e.preventDefault();
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          StyledTrack,
+          {
+            ...restProps,
+            disabled,
+            ariaDisabled,
+            ref: forwardRef,
+            children
+          }
+        )
       }
     );
   }
 );
+
+const Slider = React.forwardRef(
+  ({
+    step = 1,
+    disabled = false,
+    "aria-disabled": ariaDisabled = false,
+    min = 0,
+    max = 100,
+    value,
+    onValueCommit,
+    onValueChange,
+    children,
+    ...restProps
+  }, forwardRef) => /* @__PURE__ */ jsx(
+    SliderProvider,
+    {
+      value,
+      onValueCommit,
+      onValueChange,
+      step,
+      min,
+      max,
+      disabled,
+      ariaDisabled: booleanify(ariaDisabled),
+      children: /* @__PURE__ */ jsx(StyledSlider, { ...restProps, ref: forwardRef, children })
+    }
+  )
+);
 Slider.Track = Track;
 Slider.Range = Range;
 Slider.Thumb = Thumb;
+Slider.Value = Value;
+Slider.Input = Input;
 
 export { Slider };
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +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  cursor: 'pointer',\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-disabled',\n        border: 'none',\n        boxShadow: 'none',\n        cursor: 'default',\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-disabled',\n        border: 'none',\n        boxShadow: 'none',\n        cursor: 'default',\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  alignItems: 'center',\n})\n\nexport const StyledSliderRoot = styled(Root, {\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  touchAction: 'none',\n  flex: 1,\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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"}
+{"version":3,"file":"module.js","sources":["../src/partials/range.styled.tsx","../src/use-slider-context.tsx","../src/partials/range.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/slider.styled.tsx","../src/partials/value.styled.tsx","../src/partials/value.tsx","../src/partials/input.styled.tsx","../src/partials/input.tsx","../src/partials/track.styled.tsx","../src/partials/track.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, useCallback, useContext, useState } from 'react'\n\ninterface SharedProps {\n  disabled: boolean\n  ariaDisabled: boolean\n  min: number\n  max: number\n  step?: number\n  onValueCommit?: (value: number) => void\n}\n\ninterface SliderContextProps extends SharedProps {\n  value: number\n  onValueChange: (value: number) => void\n}\n\nexport interface SliderProviderProps extends SharedProps {\n  value?: number\n  onValueChange?: (value: number) => void\n}\n\nconst SliderContext = createContext<SliderContextProps>({} as any)\n\nexport const SliderProvider = ({\n  children,\n  min,\n  value: valueProp,\n  onValueChange: onValueChangeProp,\n  ...restProps\n}: React.PropsWithChildren<SliderProviderProps>): JSX.Element => {\n  const [value, setSliderValue] = useState<number>(valueProp ?? min)\n  const onValueChange = useCallback(\n    (value: number): void => {\n      setSliderValue(value)\n      if (onValueChangeProp != null) {\n        onValueChangeProp(value)\n      }\n    },\n    [onValueChangeProp]\n  )\n\n  return (\n    <SliderContext.Provider\n      value={{\n        ...restProps,\n        min,\n        value,\n        onValueChange,\n      }}\n    >\n      {children}\n    </SliderContext.Provider>\n  )\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 { Thumb as RadixThumb } from '@radix-ui/react-slider'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\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  cursor: 'pointer',\n  outline: 'none',\n\n  _hover: {\n    boxShadow: '$focus-controls',\n    borderColor: '$border-primary-hover',\n  },\n\n  '&:active, &[data-pressed]': {\n    boxShadow: '$focus-controls',\n    borderColor: '$border-primary-active',\n  },\n\n  ...focus.css({\n    boxShadow: '$focus-controls',\n    borderColor: '$border-primary-selected',\n  }),\n\n  variants: {\n    disabled: {\n      true: {\n        backgroundColor: '$background-neutrals-disabled',\n        border: 'none',\n        boxShadow: 'none',\n        cursor: 'default',\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-disabled',\n        border: 'none',\n        boxShadow: 'none',\n        cursor: 'default',\n      },\n    },\n  },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\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  const elementProps = useAriaDisabled({\n    ...props,\n    ariaDisabled,\n  })\n\n  return <StyledThumb {...elementProps} disabled={disabled} ref={forwardRef} />\n})\n","import type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledSlider = styled(Primitive.div, {\n  display: 'flex',\n  flexDirection: 'row',\n  gap: '$100',\n  alignItems: 'center',\n})\n\nexport type StyledSliderProps = StrictComponentProps<typeof StyledSlider>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const StyledValue = styled('span', {})\nexport type StyledValueProps = ComponentPropsWithRef<typeof StyledValue>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useSliderContext } from '../use-slider-context'\nimport type { StyledValueProps } from './value.styled'\nimport { StyledValue } from './value.styled'\n\nexport interface ValueProps extends StyledValueProps {}\n\nexport const Value = React.forwardRef<\n  ElementRef<typeof StyledValue>,\n  ValueProps\n>((props, forwardRef) => {\n  const { value } = useSliderContext()\n\n  return (\n    <StyledValue {...props} ref={forwardRef}>\n      {value}\n    </StyledValue>\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport { textFieldStyles } from '@mirohq/design-system-base-text-field'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst disabledAndReadonlySelectors =\n  ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledInput = styled('input', {\n  all: 'unset',\n  display: 'block',\n  maxWidth: '$11',\n  height: '$8',\n  padding: '0 $50',\n  textAlign: 'center',\n\n  ...textFieldStyles.variants.idle,\n  ...textFieldStyles.v1.idle,\n\n  '&:read-only': textFieldStyles.v1.readOnly,\n\n  '&:disabled, &[aria-disabled=\"true\"]': {\n    ...textFieldStyles.variants.disabled,\n    ...textFieldStyles.base.disabled,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})`]: {\n    _hover: textFieldStyles.variants.hovered,\n  },\n\n  [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n    textFieldStyles.base.placeholder.v1,\n\n  ...focus.css({\n    ...textFieldStyles.v1.focused,\n  }),\n\n  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {\n    '-webkit-appearance': 'none',\n    margin: 0,\n  },\n  '&[type=number]': {\n    '-moz-appearance': 'textfield',\n  },\n})\nexport type StyledInputProps = ComponentPropsWithRef<typeof StyledInput>\n","import React, { useEffect, useState } from 'react'\nimport type { ElementRef } from 'react'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { useSliderContext } from '../use-slider-context'\nimport type { StyledInputProps } from './input.styled'\nimport { StyledInput } from './input.styled'\n\nexport interface ValueProps extends StyledInputProps {}\n\nexport const Input = React.forwardRef<\n  ElementRef<typeof StyledInput>,\n  ValueProps\n>((props, forwardRef) => {\n  const {\n    value,\n    onValueChange,\n    onValueCommit,\n    min,\n    max,\n    step,\n    disabled,\n    ariaDisabled,\n  } = useSliderContext()\n  const [inputValue, setInputValue] = useState(value.toString())\n\n  useEffect(() => {\n    setInputValue(value.toString())\n  }, [value])\n\n  const elementProps = useAriaDisabled({\n    ...props,\n    ariaDisabled,\n    onKeyUp: e => {\n      if (e.key === 'Enter') {\n        let valueToSet = Number(inputValue)\n        if (max !== undefined && valueToSet > max) {\n          valueToSet = max\n        } else if (min !== undefined && valueToSet < min) {\n          valueToSet = min\n        } else if (step !== undefined && valueToSet % step !== 0) {\n          valueToSet = Math.round(valueToSet / step) * step\n        }\n\n        setInputValue(valueToSet.toString())\n        onValueChange(valueToSet)\n        onValueCommit?.(valueToSet)\n      }\n    },\n    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n      setInputValue(e.target.value)\n    },\n  })\n\n  return (\n    <StyledInput\n      {...elementProps}\n      type='number'\n      ref={forwardRef}\n      value={inputValue}\n      disabled={disabled}\n    />\n  )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root, Track as RadixTrack } from '@radix-ui/react-slider'\n\nexport const StyledTrack = styled(RadixTrack, {\n  backgroundColor: '$background-neutrals-scrollbar',\n  position: 'relative',\n  flexGrow: 1,\n  borderRadius: '$round',\n  height: '6px',\n  display: 'flex',\n  alignItems: 'center',\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})\n\nexport const StyledRoot = styled(Root, {\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  userSelect: 'none',\n  touchAction: 'none',\n  flex: 1,\n  height: '20px',\n})\n\nexport type StyledTrackProps = StrictComponentProps<typeof StyledTrack>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { useSliderContext } from '../use-slider-context'\nimport { StyledRoot, StyledTrack } from './track.styled'\nimport type { StyledTrackProps } from './track.styled'\n\nexport interface TrackProps extends StyledTrackProps {}\n\nexport const Track = React.forwardRef<\n  ElementRef<typeof StyledRoot>,\n  TrackProps\n>(\n  (\n    {\n      children,\n      css,\n      // @ts-expect-error className required when extending the component with styled()\n      className,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const {\n      value,\n      min,\n      max,\n      step,\n      onValueCommit,\n      onValueChange,\n      disabled,\n      ariaDisabled,\n    } = useSliderContext()\n\n    return (\n      <StyledRoot\n        css={css}\n        // @ts-expect-error className required when extending the component with styled()\n        className={className}\n        step={step}\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        value={[value]}\n        ref={forwardRef}\n        min={min}\n        max={max}\n        onValueCommit={value => onValueCommit?.(value[0])}\n        onValueChange={value => onValueChange(value[0])}\n        onPointerDown={e => {\n          if (booleanify(ariaDisabled)) {\n            e.preventDefault()\n          }\n        }}\n      >\n        <StyledTrack\n          {...restProps}\n          disabled={disabled}\n          ariaDisabled={ariaDisabled}\n          ref={forwardRef}\n        >\n          {children}\n        </StyledTrack>\n      </StyledRoot>\n    )\n  }\n)\n","import type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport React from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { Range } from './partials/range'\nimport { Thumb } from './partials/thumb'\nimport type { StyledSliderProps } from './slider.styled'\nimport { StyledSlider } from './slider.styled'\nimport { SliderProvider } from './use-slider-context'\nimport { Value } from './partials/value'\nimport { Input } from './partials/input'\nimport { Track } from './partials/track'\n\nexport interface SliderProps extends StyledSliderProps {\n  /**\n   * The maximum value for the range.\n   * @default 100\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   * @default 0\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 StyledSlider>,\n  SliderProps\n>(\n  (\n    {\n      step = 1,\n      disabled = false,\n      'aria-disabled': ariaDisabled = false,\n      min = 0,\n      max = 100,\n      value,\n      onValueCommit,\n      onValueChange,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => (\n    <SliderProvider\n      value={value}\n      onValueCommit={onValueCommit}\n      onValueChange={onValueChange}\n      step={step}\n      min={min}\n      max={max}\n      disabled={disabled}\n      ariaDisabled={booleanify(ariaDisabled)}\n    >\n      <StyledSlider {...restProps} ref={forwardRef}>\n        {children}\n      </StyledSlider>\n    </SliderProvider>\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  Value: typeof Value\n  Input: typeof Input\n}\n\nSlider.Track = Track\nSlider.Range = Range\nSlider.Thumb = Thumb\nSlider.Value = Value\nSlider.Input = Input\n"],"names":["RadixRange","value","RadixThumb","RadixTrack"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,10 +1,11 @@
 import * as react from 'react';
-import react__default, { ForwardRefExoticComponent } from 'react';
+import react__default, { ComponentPropsWithRef, 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';
+import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 
 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;
@@ -19,40 +20,55 @@ 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<{
+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.SliderTrackProps & react.RefAttributes<HTMLSpanElement>>, {
+}, {}> & _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 StyledTrackProps = StrictComponentProps<typeof StyledTrack>;
+declare type StyledThumbProps = StrictComponentProps<typeof StyledThumb>;
 
-interface TrackProps extends StyledTrackProps {
+interface ThumbProps extends StyledThumbProps {
 }
-declare const Track: react__default.ForwardRefExoticComponent<Omit<TrackProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
+declare const Thumb: react__default.ForwardRefExoticComponent<Omit<ThumbProps, "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<{
+declare const StyledSlider: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
+declare type StyledSliderProps = StrictComponentProps<typeof StyledSlider>;
+
+declare const StyledValue: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<"span">, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLSpanElement>> & _mirohq_design_system_stitches.StitchesInternals<"span", {}, {}>;
+declare type StyledValueProps = ComponentPropsWithRef<typeof StyledValue>;
+
+interface ValueProps$1 extends StyledValueProps {
+}
+declare const Value: react__default.ForwardRefExoticComponent<Omit<ValueProps$1, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
+
+declare const StyledInput: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<"input">, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLInputElement>> & _mirohq_design_system_stitches.StitchesInternals<"input", {}, {}>;
+declare type StyledInputProps = ComponentPropsWithRef<typeof StyledInput>;
+
+interface ValueProps extends StyledInputProps {
+}
+declare const Input: react__default.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & react__default.RefAttributes<HTMLInputElement>>;
+
+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.SliderThumbProps & react.RefAttributes<HTMLSpanElement>>, {
+}, {}> & _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 StyledThumbProps = StrictComponentProps<typeof StyledThumb>;
+declare type StyledTrackProps = StrictComponentProps<typeof StyledTrack>;
 
-interface ThumbProps extends StyledThumbProps {
+interface TrackProps extends StyledTrackProps {
 }
-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>;
+declare const Track: react__default.ForwardRefExoticComponent<Omit<TrackProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
 
 interface SliderProps extends StyledSliderProps {
     /**
      * The maximum value for the range.
+     * @default 100
      */
-    max: number;
+    max?: number;
     /**
      * The children components of the slider.
      */
@@ -60,9 +76,10 @@ interface SliderProps extends StyledSliderProps {
     /**
      * The controlled value of the slider. Must be used in conjunction with onValueChange.
      */
-    value?: number[];
+    value?: number;
     /**
      * The minimum value for the range.
+     * @default 0
      */
     min?: number;
     /**
@@ -77,11 +94,11 @@ interface SliderProps extends StyledSliderProps {
      * 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;
+    onValueCommit?: (value: number) => void;
     /**
      * Event handler called when the value changes.
      */
-    onValueChange?: (value: number[]) => void;
+    onValueChange?: (value: number) => void;
     /**
      * When true, prevents the user from interacting with the slider but focus
      * is still possible.
@@ -93,6 +110,8 @@ interface Partials {
     Track: typeof Track;
     Range: typeof Range;
     Thumb: typeof Thumb;
+    Value: typeof Value;
+    Input: typeof Input;
 }
 
 export { Slider, SliderProps, RangeProps as SliderRangeProps, ThumbProps as SliderThumbProps, TrackProps as SliderTrackProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-slider",
-  "version": "0.1.17",
+  "version": "0.2.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,10 +27,13 @@
   },
   "dependencies": {
     "@radix-ui/react-slider": "^1.2.0",
+    "@mirohq/design-system-base-text-field": "^0.2.2",
     "@mirohq/design-system-primitive": "^1.1.2",
     "@mirohq/design-system-stitches": "^2.6.29",
-    "@mirohq/design-system-utils": "^0.15.4",
-    "@mirohq/design-system-types": "^0.10.0"
+    "@mirohq/design-system-types": "^0.10.0",
+    "@mirohq/design-system-styles": "^1.2.29",
+    "@mirohq/design-system-use-aria-disabled": "^0.2.0",
+    "@mirohq/design-system-utils": "^0.15.4"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",