@elliemae/ds-slider-v2 3.26.0-next.4

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSliderV2T {\n  export type ValueType<TMultiple extends boolean> = TMultiple extends true\n    ? [number, number]\n    : TMultiple extends false\n    ? number\n    : number | [number, number];\n\n  export interface RequiredProps<TMultiple extends boolean> {\n    value: ValueType<TMultiple>;\n    minValue: number;\n    maxValue: number;\n  }\n\n  export interface DefaultProps<TMultiple extends boolean> {\n    multiple: TMultiple;\n    disabled: boolean;\n    step: number;\n    onValueChange: (newValue: ValueType<TMultiple>) => void;\n    withTickMarks: boolean;\n    withTickMarksValues: boolean;\n    customTickMarksValues: string[];\n  }\n\n  export interface OptionalProps extends PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {\n    className?: string;\n  }\n\n  export interface Props<TMultiple extends boolean = false>\n    extends Partial<DefaultProps<TMultiple>>,\n      OptionalProps,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n\n  export interface InternalProps<TMultiple extends boolean = false>\n    extends DefaultProps<TMultiple>,\n      OptionalProps,\n      XstyledProps,\n      RequiredProps<TMultiple> {}\n}\n\nexport const defaultProps: DSSliderV2T.DefaultProps<boolean> = {\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n  multiple: false as boolean,\n};\n\nexport const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>> = {\n  ...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  disabled: PropTypes.bool.description('disable slider').defaultValue(false),\n  minValue: PropTypes.number.description('min value for slider').defaultValue(0),\n  maxValue: PropTypes.number.description('max value for slider').defaultValue(100),\n  step: PropTypes.number.description('steps of values from min to max').defaultValue(5),\n  onValueChange: PropTypes.func.description('change handler').defaultValue(() => {}),\n  withTickMarks: PropTypes.bool.description('add tick marks between steps').defaultValue(false),\n  withTickMarksValues: PropTypes.bool.description('add step value to tickmark').defaultValue(false),\n  customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n    .description('Explicitly set tickmark values for custom tickmarks')\n    .defaultValue([]),\n};\n\nexport const DSSliderV2PropTypesSchema = DSSliderV2PropTypes as unknown as WeakValidationMap<\n  DSSliderV2T.Props<boolean>\n>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB,uBAAuB;AA2CzC,MAAM,eAAkD;AAAA,EAC7D,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU;AACZ;AAEO,MAAM,sBAAqE;AAAA,EAChF,GAAG,yBAAyB,gBAAgB,eAAe;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,KAAK;AAAA,EACzE,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,CAAC;AAAA,EAC7E,UAAU,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,GAAG;AAAA,EAC/E,MAAM,UAAU,OAAO,YAAY,iCAAiC,EAAE,aAAa,CAAC;AAAA,EACpF,eAAe,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,KAAK;AAAA,EAC5F,qBAAqB,UAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AAAA,EAChG,uBAAuB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAC/F,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AACpB;AAEO,MAAM,4BAA4B;",
+  "names": []
+}

package/dist/esm/styles.js

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { getTrackBackground } from "react-range";
+import { Grid } from "@elliemae/ds-grid";
+import { styled } from "@elliemae/ds-system";
+import { DSSliderV2Name, SLIDER_V2_SLOTS } from "./constants/index.js";
+const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;
+const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;
+const StyledTrack = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })`
+  position: relative;
+  height: ${(props) => props.theme.space.xxxs};
+  width: 100%;
+  min-width: ${(props) => props.theme.space.xl};
+  border-radius: ${(props) => props.theme.space.xxxs};
+  background: ${(props) => props.disabled ? props.theme.colors.neutral[100] : getTrackBackground({
+  values: props.rangeValues,
+  colors: props.multiple ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]] : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],
+  min: props.minValue,
+  max: props.maxValue
+})};
+`;
+const StyledDot = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })`
+  &:after {
+    content: '';
+    background: ${(props) => props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400]};
+    border-radius: ${(props) => props.theme.space.xxxs};
+    display: block;
+    position: relative;
+    width: 2px;
+    height: 2px;
+  }
+`;
+const StyledDotsContainer = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`
+  padding: 0 2px;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: ${(props) => props.theme.zIndex.tooltip - 1};
+`;
+const StyledTickMarkValue = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })`
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  min-height: ${(props) => props.theme.space.xs};
+  overflow: visible;
+  width: ${(props) => props.theme.space.xxxs};
+  color: ${(props) => props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500]};
+`;
+const StyledTickMarksContainer = styled("div", {
+  name: DSSliderV2Name,
+  slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER
+})`
+  display: flex;
+  justify-content: space-between;
+  // this next property-value rever the sanitize.css value
+  overflow-wrap: normal;
+`;
+const StyledThumb = styled("div", { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })`
+  height: 20px;
+  width: 20px;
+  top: 0;
+  background-color: ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral["000"]};
+  border-radius: 10px;
+  border: 1px solid ${(props) => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400]};
+
+  :focus {
+    border: 2px solid brand-700;
+    outline: unset;
+  }
+
+  :hover {
+    background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[100] : theme.colors.brand[200]};
+  }
+
+  z-index: ${(props) => props.theme.zIndex.tooltip};
+`;
+export {
+  StyledDot,
+  StyledDotsContainer,
+  StyledRangeWrapper,
+  StyledThumb,
+  StyledTickMarkValue,
+  StyledTickMarksContainer,
+  StyledTrack,
+  StyledWrapper
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getTrackBackground } from 'react-range';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.ROOT })``;\n\nexport const StyledRangeWrapper = styled(Grid, { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.RANGE_WRAPPER })``;\n\nexport const StyledTrack = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TRACK })<{\n  disabled: boolean;\n  multiple: boolean;\n  minValue: number;\n  maxValue: number;\n  rangeValues: [number] | [number, number];\n}>`\n  position: relative;\n  height: ${(props) => props.theme.space.xxxs};\n  width: 100%;\n  min-width: ${(props) => props.theme.space.xl};\n  border-radius: ${(props) => props.theme.space.xxxs};\n  background: ${(props) =>\n    props.disabled\n      ? props.theme.colors.neutral[100]\n      : getTrackBackground({\n          values: props.rangeValues,\n          colors: props.multiple\n            ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n            : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n          min: props.minValue,\n          max: props.maxValue,\n        })};\n`;\n\nexport const StyledDot = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT })<{ isActive: boolean }>`\n  &:after {\n    content: '';\n    background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n    border-radius: ${(props) => props.theme.space.xxxs};\n    display: block;\n    position: relative;\n    width: 2px;\n    height: 2px;\n  }\n`;\n\nexport const StyledDotsContainer = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.DOT_CONTAINER })`\n  padding: 0 2px;\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ${(props) => props.theme.zIndex.tooltip - 1};\n`;\n\nexport const StyledTickMarkValue = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.TICK_MARK_VALUE })<{\n  isSelected: boolean;\n}>`\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  min-height: ${(props) => props.theme.space.xs};\n  overflow: visible;\n  width: ${(props) => props.theme.space.xxxs};\n  color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nexport const StyledTickMarksContainer = styled('div', {\n  name: DSSliderV2Name,\n  slot: SLIDER_V2_SLOTS.TICK_MARK_CONTAINER,\n})`\n  display: flex;\n  justify-content: space-between;\n  // this next property-value rever the sanitize.css value\n  overflow-wrap: normal;\n`;\n\nexport const StyledThumb = styled('div', { name: DSSliderV2Name, slot: SLIDER_V2_SLOTS.THUMB })<{ disabled: boolean }>`\n  height: 20px;\n  width: 20px;\n  top: 0;\n  background-color: ${(props) =>\n    props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000']};\n  border-radius: 10px;\n  border: 1px solid ${(props) => (props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400])};\n\n  :focus {\n    border: 2px solid brand-700;\n    outline: unset;\n  }\n\n  :hover {\n    background-color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[100] : theme.colors.brand[200])};\n  }\n\n  z-index: ${(props) => props.theme.zIndex.tooltip};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,KAAK,CAAC;AAEvF,MAAM,qBAAqB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,CAAC;AAErG,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA,YAQlF,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,eAE1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBACzB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAChC,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,GAAG,IAC9B,mBAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,WACV,CAAC,MAAM,MAAM,OAAO,QAAQ,GAAG,GAAG,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,GAAG,GAAG,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC;AAAA;AAGF,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,IAAI,CAAC;AAAA;AAAA;AAAA,kBAGxE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,qBACxF,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWjG,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU;AAAA;AAG9C,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA,gBAMhG,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC7B,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAGnG,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,gBAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIxE,CAAC,UACnB,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,sBAEjE,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ3F,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,aAGlG,CAAC,UAAU,MAAM,MAAM,OAAO;AAAA;",
+  "names": []
+}

package/dist/esm/typescript-testing/typescript-slider-v2-valid.js

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DSSliderV2 } from "../index.js";
+const testRequiredProps = {
+  value: 0,
+  minValue: 0,
+  maxValue: 100
+};
+const testOptionalProps = {};
+const testPartialDefaults = {
+  multiple: false
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  multiple: false,
+  disabled: false,
+  step: 5,
+  onValueChange: () => {
+  },
+  withTickMarks: false,
+  withTickMarksValues: false,
+  customTickMarksValues: []
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  value: 0,
+  minValue: 0,
+  maxValue: 100,
+  multiple: false
+};
+const testInferedTypeCompatibility = {
+  value: 0,
+  minValue: 0,
+  maxValue: 100,
+  multiple: false
+};
+const testDefinitionAsConst = {
+  value: 0,
+  minValue: 0,
+  maxValue: 100,
+  multiple: false
+};
+const onSingleValueChange = (value) => {
+};
+const onMultipleValueChange = (value) => {
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(DSSliderV2, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(DSSliderV2, { value: 0, minValue: 0, maxValue: 100, onValueChange: onSingleValueChange }),
+  /* @__PURE__ */ jsx(DSSliderV2, { multiple: true, value: [0, 100], minValue: 0, maxValue: 100, onValueChange: onMultipleValueChange })
+] });
+//# sourceMappingURL=typescript-slider-v2-valid.js.map

package/dist/esm/typescript-testing/typescript-slider-v2-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-slider-v2-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSliderV2 } from '../index.js';\nimport type { DSSliderV2T } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSliderV2T.Props<boolean>;\ntype ComponentPropsInternals = DSSliderV2T.InternalProps<boolean>;\ntype ComponentPropsDefaultProps = DSSliderV2T.DefaultProps<boolean>;\ntype ComponentPropsOptionalProps = DSSliderV2T.OptionalProps;\ntype ComponentPropsRequiredProps = DSSliderV2T.RequiredProps<boolean>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  multiple: false,\n};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  multiple: false,\n  disabled: false,\n  step: 5,\n  onValueChange: () => {},\n  withTickMarks: false,\n  withTickMarksValues: false,\n  customTickMarksValues: [],\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  multiple: false,\n} as const;\n\nconst onSingleValueChange = (value: number) => {};\nconst onMultipleValueChange = (value: [number, number]) => {};\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSliderV2 {...testExplicitDefinition} />\n    <DSSliderV2 {...testInferedTypeCompatibility} />\n    <DSSliderV2 {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSliderV2 value={0} minValue={0} maxValue={100} onValueChange={onSingleValueChange} />\n    {/* multiple auto inference works */}\n    <DSSliderV2 multiple value={[0, 100]} minValue={0} maxValue={100} onValueChange={onMultipleValueChange} />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiFrB,mBAEE,KAFF;AAhFF,SAAS,kBAAkB;AAU3B,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AACZ;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AACZ;AACA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB,CAAC;AAC1B;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ;AAEA,MAAM,sBAAsB,CAAC,UAAkB;AAAC;AAChD,MAAM,wBAAwB,CAAC,UAA4B;AAAC;AAE5D,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC,oBAAC,cAAW,OAAO,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,qBAAqB;AAAA,EAEtF,oBAAC,cAAW,UAAQ,MAAC,OAAO,CAAC,GAAG,GAAG,GAAG,UAAU,GAAG,UAAU,KAAK,eAAe,uBAAuB;AAAA,GAC1G;",
+  "names": []
+}

package/dist/esm/utils/inRange.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const inRange = (value, range) => {
+  const [left, right] = range;
+  if (right === void 0) {
+    return value === left;
+  }
+  return left <= value && value <= right;
+};
+export {
+  inRange
+};
+//# sourceMappingURL=inRange.js.map

package/dist/esm/utils/inRange.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/inRange.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const inRange = (value: number, range: [number] | [number, number]) => {\n  const [left, right] = range;\n\n  if (right === undefined) {\n    return value === left;\n  }\n  return left <= value && value <= right;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,UAAU,CAAC,OAAe,UAAuC;AAC5E,QAAM,CAAC,MAAM,KAAK,IAAI;AAEtB,MAAI,UAAU,QAAW;AACvB,WAAO,UAAU;AAAA,EACnB;AACA,SAAO,QAAQ,SAAS,SAAS;AACnC;",
+  "names": []
+}

package/dist/esm/utils/thumbLabels.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const conformedThumbLabel = ({
+  rangeValues,
+  customTickMarksValues,
+  index,
+  step,
+  minValue
+}) => {
+  let msg = `Value: `;
+  if (customTickMarksValues.length) {
+    const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];
+    msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;
+  } else {
+    msg += `${rangeValues[index].toFixed(1)}`;
+  }
+  return msg;
+};
+export {
+  conformedThumbLabel
+};
+//# sourceMappingURL=thumbLabels.js.map

package/dist/esm/utils/thumbLabels.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/thumbLabels.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const conformedThumbLabel = ({\n  rangeValues,\n  customTickMarksValues,\n  index,\n  step,\n  minValue,\n}: {\n  rangeValues: [number] | [number, number];\n  customTickMarksValues: string[];\n  index: number;\n  step: number;\n  minValue: number;\n}) => {\n  let msg = `Value: `;\n  if (customTickMarksValues.length) {\n    const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n    msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n  } else {\n    msg += `${rangeValues[index].toFixed(1)}`;\n  }\n\n  return msg;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,MAAI,MAAM;AACV,MAAI,sBAAsB,QAAQ;AAChC,UAAM,aAAa,sBAAsB,KAAK,OAAO,YAAY,KAAK,IAAI,YAAY,IAAI,CAAC;AAC3F,WAAO,GAAG,cAAc,YAAY,KAAK,EAAE,QAAQ,CAAC;AAAA,EACtD,OAAO;AACL,WAAO,GAAG,YAAY,KAAK,EAAE,QAAQ,CAAC;AAAA,EACxC;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/types/DSSliderV2.d.ts

@@ -0,0 +1,7 @@
+import { type DSSliderV2T } from './react-desc-prop-types.js';
+declare const DSSliderV2: {
+    <TMultiple extends boolean = false>(props: DSSliderV2T.Props<TMultiple>): import("react/jsx-runtime.js").JSX.Element;
+    displayName: string;
+};
+declare const DSSliderV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSSliderV2T.Props<boolean>>;
+export { DSSliderV2, DSSliderV2WithSchema };

package/dist/types/DSSliderV2CTX.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { DSSliderV2CTX } from './config/useSliderV2.js';
+/** Context for cross component communication */
+export declare const DSSliderV2Context: import("react").Context<DSSliderV2CTX<boolean>>;
+export default DSSliderV2Context;

package/dist/types/config/useSliderV2.d.ts

@@ -0,0 +1,20 @@
+import type { XstyledProps } from '@elliemae/ds-props-helpers';
+import { type DSSliderV2T } from '../react-desc-prop-types.js';
+export interface DSSliderV2CTX<TMultiple extends boolean> {
+    propsWithDefault: DSSliderV2T.InternalProps<TMultiple>;
+    xstyledProps: XstyledProps;
+    instanceUid: string;
+    rangeValues: [number, number] | [number];
+    tickMarkPositions: number[];
+    getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;
+    getOwnerPropsArguments: () => Record<string, unknown>;
+}
+export declare const useSliderV2: <TMultiple extends boolean>(propsFromUser: DSSliderV2T.Props<TMultiple>) => {
+    getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;
+    getOwnerPropsArguments: () => {};
+    propsWithDefault: DSSliderV2T.InternalProps<TMultiple>;
+    xstyledProps: XstyledProps;
+    instanceUid: string;
+    rangeValues: [number, number] | [number];
+    tickMarkPositions: number[];
+};

package/dist/types/config/useTickMarksValues.d.ts

@@ -0,0 +1,2 @@
+import type { DSSliderV2T } from '../react-desc-prop-types.js';
+export declare const useTickMarksValues: <TMultiple extends boolean>(props: DSSliderV2T.InternalProps<TMultiple>) => number[];

package/dist/types/config/useValidateProps.d.ts

@@ -0,0 +1,5 @@
+import type { WeakValidationMap } from 'react';
+import { type DSSliderV2T } from '../react-desc-prop-types.js';
+export declare const useValidateProps: <TMultiple extends boolean>(props: DSSliderV2T.InternalProps<TMultiple>, propTypes: WeakValidationMap<unknown>, { tickMarkPositions }: {
+    tickMarkPositions: number[];
+}) => void;

package/dist/types/constants/index.d.ts

@@ -0,0 +1,12 @@
+export declare const DSSliderV2Name = "DSSliderV2";
+export declare const SLIDER_V2_SLOTS: {
+    readonly ROOT: "root";
+    readonly RANGE_WRAPPER: "range-wrapper";
+    readonly TRACK: "track";
+    readonly DOT: "dot";
+    readonly DOT_CONTAINER: "dot-container";
+    readonly TICK_MARK_VALUE: "tick-mark-value";
+    readonly TICK_MARK_CONTAINER: "tick-mark-container";
+    readonly THUMB: "thumb";
+};
+export declare const SLIDER_V2_DATA_TESTID: Record<string, string>;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { DSSliderV2, DSSliderV2WithSchema } from './DSSliderV2.js';
+export { type DSSliderV2T } from './react-desc-prop-types.js';
+export { DSSliderV2Name, SLIDER_V2_SLOTS, SLIDER_V2_DATA_TESTID } from './constants/index.js';

package/dist/types/parts/MainContent.d.ts

@@ -0,0 +1 @@
+export declare const MainContent: () => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/Thumb.d.ts

@@ -0,0 +1,2 @@
+import type { IRenderThumbParams } from 'react-range/lib/types.js';
+export declare const Thumb: ({ index, props, isDragged }: IRenderThumbParams) => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/TickMarks.d.ts

@@ -0,0 +1 @@
+export declare const TickMarks: () => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/TickMarksValues.d.ts

@@ -0,0 +1 @@
+export declare const TickMarksValues: () => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/Track.d.ts

@@ -0,0 +1,2 @@
+import type { IRenderTrackParams } from 'react-range/lib/types.js';
+export declare const Track: ({ children, props, disabled }: IRenderTrackParams) => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,30 @@
+import type { XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
+import { DSSliderV2Name, SLIDER_V2_SLOTS } from './constants/index.js';
+import type { WeakValidationMap } from 'react';
+export declare namespace DSSliderV2T {
+    type ValueType<TMultiple extends boolean> = TMultiple extends true ? [number, number] : TMultiple extends false ? number : number | [number, number];
+    interface RequiredProps<TMultiple extends boolean> {
+        value: ValueType<TMultiple>;
+        minValue: number;
+        maxValue: number;
+    }
+    interface DefaultProps<TMultiple extends boolean> {
+        multiple: TMultiple;
+        disabled: boolean;
+        step: number;
+        onValueChange: (newValue: ValueType<TMultiple>) => void;
+        withTickMarks: boolean;
+        withTickMarksValues: boolean;
+        customTickMarksValues: string[];
+    }
+    interface OptionalProps extends PropsForGlobalOnSlots<typeof DSSliderV2Name, typeof SLIDER_V2_SLOTS> {
+        className?: string;
+    }
+    interface Props<TMultiple extends boolean = false> extends Partial<DefaultProps<TMultiple>>, OptionalProps, XstyledProps, RequiredProps<TMultiple> {
+    }
+    interface InternalProps<TMultiple extends boolean = false> extends DefaultProps<TMultiple>, OptionalProps, XstyledProps, RequiredProps<TMultiple> {
+    }
+}
+export declare const defaultProps: DSSliderV2T.DefaultProps<boolean>;
+export declare const DSSliderV2PropTypes: DSPropTypesSchema<DSSliderV2T.Props<boolean>>;
+export declare const DSSliderV2PropTypesSchema: WeakValidationMap<DSSliderV2T.Props<boolean>>;

package/dist/types/styles.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const StyledWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledRangeWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledTrack: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    disabled: boolean;
+    multiple: boolean;
+    minValue: number;
+    maxValue: number;
+    rangeValues: [number] | [number, number];
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledDot: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    isActive: boolean;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledDotsContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledTickMarkValue: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    isSelected: boolean;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledTickMarksContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledThumb: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    disabled: boolean;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/tests/axe-core.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/events.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/render.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/typescript-testing/typescript-slider-v2-valid.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/inRange.d.ts

@@ -0,0 +1 @@
+export declare const inRange: (value: number, range: [number] | [number, number]) => boolean;

package/dist/types/utils/thumbLabels.d.ts

@@ -0,0 +1,7 @@
+export declare const conformedThumbLabel: ({ rangeValues, customTickMarksValues, index, step, minValue, }: {
+    rangeValues: [number] | [number, number];
+    customTickMarksValues: string[];
+    index: number;
+    step: number;
+    minValue: number;
+}) => string;

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@elliemae/ds-slider-v2",
+  "version": "3.26.0-next.4",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Slider V 2",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "react-range": "~1.8.14",
+    "uid": "^2.0.2",
+    "@elliemae/ds-grid": "3.26.0-next.4",
+    "@elliemae/ds-props-helpers": "3.26.0-next.4",
+    "@elliemae/ds-system": "3.26.0-next.4",
+    "@elliemae/ds-tooltip": "3.26.0-next.4",
+    "@elliemae/ds-truncated-tooltip-text": "3.26.0-next.4",
+    "@elliemae/ds-utilities": "3.26.0-next.4"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "lodash": "^4.17.21",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-monorepo-devops": "3.26.0-next.4"
+  },
+  "peerDependencies": {
+    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/react": "~12.1.3",
+    "@testing-library/user-event": "~13.5.0",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../scripts/dts.mjs",
+    "dts:withdeps": "pnpm --filter {.}... dts",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}