@mirohq/design-system-slider 0.1.10 → 0.1.11
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/main.js +2 -2
- package/dist/main.js.map +1 -1
- package/dist/module.js +2 -2
- package/dist/module.js.map +1 -1
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -114,7 +114,7 @@ const StyledThumb = designSystemStitches.styled(reactSlider.Thumb, {
|
|
|
114
114
|
variants: {
|
|
115
115
|
disabled: {
|
|
116
116
|
true: {
|
|
117
|
-
backgroundColor: "$background-neutrals-
|
|
117
|
+
backgroundColor: "$background-neutrals-disabled",
|
|
118
118
|
border: "none",
|
|
119
119
|
boxShadow: "none",
|
|
120
120
|
cursor: "default",
|
|
@@ -130,7 +130,7 @@ const StyledThumb = designSystemStitches.styled(reactSlider.Thumb, {
|
|
|
130
130
|
},
|
|
131
131
|
ariaDisabled: {
|
|
132
132
|
true: {
|
|
133
|
-
backgroundColor: "$background-neutrals-
|
|
133
|
+
backgroundColor: "$background-neutrals-disabled",
|
|
134
134
|
border: "none",
|
|
135
135
|
boxShadow: "none",
|
|
136
136
|
cursor: "default"
|
package/dist/main.js.map
CHANGED
|
@@ -1 +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-controls-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-controls-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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"}
|
|
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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"}
|
package/dist/module.js
CHANGED
|
@@ -106,7 +106,7 @@ const StyledThumb = styled(Thumb$1, {
|
|
|
106
106
|
variants: {
|
|
107
107
|
disabled: {
|
|
108
108
|
true: {
|
|
109
|
-
backgroundColor: "$background-neutrals-
|
|
109
|
+
backgroundColor: "$background-neutrals-disabled",
|
|
110
110
|
border: "none",
|
|
111
111
|
boxShadow: "none",
|
|
112
112
|
cursor: "default",
|
|
@@ -122,7 +122,7 @@ const StyledThumb = styled(Thumb$1, {
|
|
|
122
122
|
},
|
|
123
123
|
ariaDisabled: {
|
|
124
124
|
true: {
|
|
125
|
-
backgroundColor: "$background-neutrals-
|
|
125
|
+
backgroundColor: "$background-neutrals-disabled",
|
|
126
126
|
border: "none",
|
|
127
127
|
boxShadow: "none",
|
|
128
128
|
cursor: "default"
|
package/dist/module.js.map
CHANGED
|
@@ -1 +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-controls-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-controls-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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"}
|
|
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":";;;;;;;AAIa,MAAA,WAAA,GAAc,OAAOA,OAAY,EAAA;AAAA,EAC5C,QAAU,EAAA,UAAA;AAAA,EACV,eAAiB,EAAA,+BAAA;AAAA,EACjB,YAAc,EAAA,QAAA;AAAA,EACd,MAAQ,EAAA,MAAA;AAAA,EAER,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,+BAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,+BAAA;AAAA,OACnB;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACVD,MAAM,aAAA,GAAgB,aAAkC,CAAA,EAAS,CAAA,CAAA;AAE1D,MAAM,iBAAiB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AACF,CACE,qBAAA,GAAA;AAAA,EAAC,aAAc,CAAA,QAAA;AAAA,EAAd;AAAA,IACC,KAAO,EAAA;AAAA,MACL,QAAA;AAAA,MACA,YAAA;AAAA,KACF;AAAA,IAEC,QAAA;AAAA,GAAA;AACH,CAAA,CAAA;AAGW,MAAA,gBAAA,GAAmB,MAC9B,UAAA,CAAW,aAAa,CAAA;;ACrBnB,MAAM,KAAQ,GAAA,KAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAA,MAAM,EAAE,QAAA,EAAU,YAAa,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEpD,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,QAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAK,EAAA,UAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC,CAAA;;ACnBY,MAAA,WAAA,GAAc,OAAOC,OAAY,EAAA;AAAA,EAC5C,eAAiB,EAAA,gCAAA;AAAA,EACjB,QAAU,EAAA,UAAA;AAAA,EACV,QAAU,EAAA,CAAA;AAAA,EACV,YAAc,EAAA,QAAA;AAAA,EACd,MAAQ,EAAA,KAAA;AAAA,EAER,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,+BAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,+BAAA;AAAA,OACnB;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACdM,MAAM,KAAQ,GAAA,KAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAA,MAAM,EAAE,QAAA,EAAU,YAAa,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEpD,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,QAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAK,EAAA,UAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC,CAAA;;ACnBY,MAAA,WAAA,GAAc,OAAOC,OAAY,EAAA;AAAA,EAC5C,OAAS,EAAA,OAAA;AAAA,EACT,KAAO,EAAA,MAAA;AAAA,EACP,MAAQ,EAAA,MAAA;AAAA,EACR,eAAiB,EAAA,sBAAA;AAAA,EACjB,YAAc,EAAA,QAAA;AAAA,EACd,MAAQ,EAAA,qCAAA;AAAA,EACR,MAAQ,EAAA,SAAA;AAAA,EAER,MAAQ,EAAA;AAAA,IACN,SAAW,EAAA,iBAAA;AAAA,IACX,MAAQ,EAAA,iCAAA;AAAA,GACV;AAAA,EAEA,UAAY,EAAA;AAAA,IACV,SAAW,EAAA,iBAAA;AAAA,IACX,MAAQ,EAAA,kCAAA;AAAA,GACV;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,+BAAA;AAAA,QACjB,MAAQ,EAAA,MAAA;AAAA,QACR,SAAW,EAAA,MAAA;AAAA,QACX,MAAQ,EAAA,SAAA;AAAA,QAER,MAAQ,EAAA;AAAA,UACN,SAAW,EAAA,MAAA;AAAA,UACX,MAAQ,EAAA,MAAA;AAAA,SACV;AAAA,QAEA,UAAY,EAAA;AAAA,UACV,SAAW,EAAA,MAAA;AAAA,UACX,MAAQ,EAAA,MAAA;AAAA,SACV;AAAA,OACF;AAAA,KACF;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,+BAAA;AAAA,QACjB,MAAQ,EAAA,MAAA;AAAA,QACR,SAAW,EAAA,MAAA;AAAA,QACX,MAAQ,EAAA,SAAA;AAAA,OACV;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC1CM,MAAM,KAAQ,GAAA,KAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAA,MAAM,EAAE,QAAA,EAAU,YAAa,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEpD,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,QAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAK,EAAA,UAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC,CAAA;;AClBY,MAAA,qBAAA,GAAwB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EACzD,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,KAAA;AAAA,EACf,GAAK,EAAA,MAAA;AAAA,EACL,UAAY,EAAA,QAAA;AACd,CAAC,CAAA,CAAA;AAEY,MAAA,gBAAA,GAAmB,OAAO,IAAM,EAAA;AAAA,EAC3C,QAAU,EAAA,UAAA;AAAA,EACV,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,UAAY,EAAA,MAAA;AAAA,EACZ,WAAa,EAAA,MAAA;AAAA,EACb,IAAM,EAAA,CAAA;AAAA,EACN,MAAQ,EAAA,MAAA;AACV,CAAC,CAAA;;ACyCM,MAAM,SAAS,KAAM,CAAA,UAAA;AAAA,EAI1B,CACE;AAAA,IACE,IAAO,GAAA,CAAA;AAAA,IACP,QAAW,GAAA,KAAA;AAAA,IACX,iBAAiB,YAAe,GAAA,KAAA;AAAA,IAChC,GAAA;AAAA,IACA,GAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AA/EP,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAgFI,IAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA;AAAA,MAAA,CACpC,EAAQ,GAAA,CAAA,EAAA,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,CAAA,CAAA,KAAR,IAAc,GAAA,EAAA,GAAA,GAAA,KAAd,IAAqB,GAAA,EAAA,GAAA,CAAA;AAAA,KACvB,CAAA;AACA,IAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,MAC1B,CAACC,MAA0B,KAAA;AACzB,QAAeA,cAAAA,CAAAA,MAAAA,CAAM,CAAC,CAAC,CAAA,CAAA;AACvB,QAAA,IAAI,iBAAiB,IAAM,EAAA;AACzB,UAAA,aAAA,CAAcA,MAAK,CAAA,CAAA;AAAA,SACrB;AAAA,OACF;AAAA,MACA,CAAC,aAAa,CAAA;AAAA,KAChB,CAAA;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,YAAA,EAAc,WAAW,YAAY,CAAA;AAAA,QAErC,+BAAC,qBACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACE,GAAG,SAAA;AAAA,cACJ,IAAA;AAAA,cACA,QAAA;AAAA,cACA,eAAe,EAAA,YAAA;AAAA,cACf,YAAA,EAAc,CAAC,WAAW,CAAA;AAAA,cAC1B,GAAK,EAAA,UAAA;AAAA,cACL,GAAA;AAAA,cACA,GAAA;AAAA,cACA,aAAA;AAAA,cACA,aAAe,EAAA,mBAAA;AAAA,cACf,eAAe,CAAK,CAAA,KAAA;AAClB,gBAAI,IAAA,UAAA,CAAW,YAAY,CAAG,EAAA;AAC5B,kBAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,iBACnB;AAAA,eACF;AAAA,cAEC,QAAA;AAAA,aAAA;AAAA,WACH;AAAA,UACC,WAAA;AAAA,SACH,EAAA,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAWA,MAAA,CAAO,KAAQ,GAAA,KAAA,CAAA;AACf,MAAA,CAAO,KAAQ,GAAA,KAAA,CAAA;AACf,MAAA,CAAO,KAAQ,GAAA,KAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-slider",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@radix-ui/react-slider": "^1.2.0",
|
|
30
30
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
31
|
-
"@mirohq/design-system-stitches": "^2.6.22",
|
|
32
31
|
"@mirohq/design-system-types": "^0.10.0",
|
|
32
|
+
"@mirohq/design-system-stitches": "^2.6.23",
|
|
33
33
|
"@mirohq/design-system-utils": "^0.15.4"
|
|
34
34
|
},
|
|
35
35
|
"scripts": {
|