@smg-automotive/components 25.11.0-chakra-v3.4 → 25.11.0-chakra-v3.6

package/dist/cjs/components/index.d.ts

@@ -53,4 +53,5 @@ export * from './rangeFilterInput';
 export * from './topVehicleSharedBadge';
 export * from './discreteSlider';
 export * from './formControlSection';
+export * from './rangeSlider';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC"}

package/dist/cjs/components/rangeFilterInput/InputGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RecipeVariantProps } from '@chakra-ui/react';
 import { numberInputRecipe } from 'src/themes/shared/slotRecipes/numberInput';
-import { ChangeCallback, PickedNumberInputProps, RangeFilterInputField } from './index';
+import type { ChangeCallback, PickedNumberInputProps, RangeFilterInputField } from './index';
 type NumberInputVariantProps = RecipeVariantProps<typeof numberInputRecipe>;
 type InputGroupProps<Name extends string> = NumberInputVariantProps & {
     handleChange: (event: ChangeCallback<Name>) => void;

package/dist/cjs/components/rangeFilterInput/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/rangeFilterInput/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAEL,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAI9E,OAAO,EACL,cAAc,EACd,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB,KAAK,uBAAuB,GAAG,kBAAkB,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE5E,KAAK,eAAe,CAAC,IAAI,SAAS,MAAM,IAAI,uBAAuB,GAAG;IACpE,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACpD,UAAU,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAE3B,eAAO,MAAM,UAAU,GAAI,IAAI,SAAS,MAAM,EAAE,qDAM7C,eAAe,CAAC,IAAI,CAAC,sBA4CvB,CAAC"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/rangeFilterInput/InputGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAI9E,OAAO,KAAK,EACV,cAAc,EACd,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB,KAAK,uBAAuB,GAAG,kBAAkB,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE5E,KAAK,eAAe,CAAC,IAAI,SAAS,MAAM,IAAI,uBAAuB,GAAG;IACpE,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACpD,UAAU,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAQ3B,eAAO,MAAM,UAAU,GAAI,IAAI,SAAS,MAAM,EAAE,qDAM7C,eAAe,CAAC,IAAI,CAAC,sBAyEvB,CAAC"}

package/dist/cjs/components/rangeFilterInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/rangeFilterInput/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI/C,MAAM,MAAM,qBAAqB,CAAC,IAAI,IAAI;IACxC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,IAAI,IAAI;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AACF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,EAC7C,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,CACvC,CAAC;AAEF,KAAK,qBAAqB,CAAC,QAAQ,SAAS,MAAM,EAAE,MAAM,SAAS,MAAM,IAAI;IAC3E,IAAI,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACjE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,EAAE,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAE3B,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,SAAS,MAAM,EACvB,MAAM,SAAS,MAAM,EACrB,mDAOC,qBAAqB,CAAC,QAAQ,EAAE,MAAM,CAAC,sBAwBzC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/rangeFilterInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI/C,MAAM,MAAM,qBAAqB,CAAC,IAAI,IAAI;IACxC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,IAAI,IAAI;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,EAC7C,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,CACvC,CAAC;AAEF,KAAK,qBAAqB,CAAC,QAAQ,SAAS,MAAM,EAAE,MAAM,SAAS,MAAM,IAAI;IAC3E,IAAI,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACjE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,EAAE,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAE3B,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,SAAS,MAAM,EACvB,MAAM,SAAS,MAAM,EACrB,mDAOC,qBAAqB,CAAC,QAAQ,EAAE,MAAM,CAAC,sBAsBzC,CAAC"}

package/dist/cjs/components/rangeFilterInputWithSlider/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { NumericMinMaxValue } from '../rangeSlider/RangeSliderWithScale';
+import { Facet, RangeSliderWithChartProps } from '../rangeSlider/RangeSliderWithChart';
+import type { ChangeCallback, PickedNumberInputProps, RangeFilterInputField } from '../rangeFilterInput';
+export type ChangeSliderCallback = {
+    touched: 'min' | 'max';
+    value: NumericMinMaxValue;
+};
+type ChangeRangeInputWithSliderCallback<Name> = {
+    changeType?: 'inputfield' | 'slider';
+} & ChangeCallback<Name>;
+type RangeSliderProps = {
+    facets?: Facet[];
+    rangeSliderScale?: number[];
+    chartHeight?: RangeSliderWithChartProps['chartHeight'];
+} & ({
+    facets: Facet[];
+    chartHeight?: string;
+    rangeSliderScale?: never;
+} | {
+    rangeSliderScale: number[];
+    facets?: never;
+    chartHeight?: never;
+});
+export type Props<NameFrom, NameTo> = {
+    from: RangeFilterInputField<NameFrom>;
+    onChange: (event: ChangeRangeInputWithSliderCallback<NameFrom | NameTo>) => void;
+    onBlur?: (event: ChangeRangeInputWithSliderCallback<NameFrom | NameTo>) => void;
+    to: RangeFilterInputField<NameTo>;
+    unit?: string;
+} & RangeSliderProps & PickedNumberInputProps;
+export declare function RangeFilterInputWithSlider<NameFrom extends string, NameTo extends string>({ rangeSliderScale, facets, unit, onChange, from, to, chartHeight, ...rest }: Props<NameFrom, NameTo>): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/rangeFilterInputWithSlider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/rangeFilterInputWithSlider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,kBAAkB,EAEnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,KAAK,EAEL,yBAAyB,EAC1B,MAAM,qCAAqC,CAAC;AAE7C,OAAO,KAAK,EACV,cAAc,EACd,sBAAsB,EACtB,qBAAqB,EACtB,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,KAAK,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAEF,KAAK,kCAAkC,CAAC,IAAI,IAAI;IAC9C,UAAU,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAC;CACtC,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;AAEzB,KAAK,gBAAgB,GAAG;IACtB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;CACxD,GAAG,CACA;IAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnE;IAAE,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CACtE,CAAC;AAEF,MAAM,MAAM,KAAK,CAAC,QAAQ,EAAE,MAAM,IAAI;IACpC,IAAI,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACtC,QAAQ,EAAE,CACR,KAAK,EAAE,kCAAkC,CAAC,QAAQ,GAAG,MAAM,CAAC,KACzD,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,kCAAkC,CAAC,QAAQ,GAAG,MAAM,CAAC,KACzD,IAAI,CAAC;IACV,EAAE,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,gBAAgB,GAClB,sBAAsB,CAAC;AAEzB,wBAAgB,0BAA0B,CACxC,QAAQ,SAAS,MAAM,EACvB,MAAM,SAAS,MAAM,EACrB,EACA,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,WAAW,EACX,GAAG,IAAI,EACR,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,qBAsFzB"}

package/dist/cjs/components/rangeSlider/Chart.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Facet } from './RangeSliderWithChart';
+interface Props {
+    facets?: Facet[];
+    range: number[];
+    height?: 'sm' | 'normal';
+}
+export declare const Chart: React.FC<Props>;
+export {};
+//# sourceMappingURL=Chart.d.ts.map

package/dist/cjs/components/rangeSlider/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../src/components/rangeSlider/Chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0BjC,CAAC"}

package/dist/cjs/components/rangeSlider/RangeSliderWithChart.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BoxProps } from '@chakra-ui/react';
+import { ChangeCallback, NumericMinMaxValue } from './RangeSliderWithScale';
+export type Facet = {
+    from: number;
+    to?: number | null;
+    value: number;
+};
+export interface RangeSliderWithChartProps {
+    facets: Facet[];
+    selection: NumericMinMaxValue;
+    onSliderChange: (event: ChangeCallback) => void;
+    onSliderRelease: (event: ChangeCallback) => void;
+    chartHeight?: BoxProps['h'];
+}
+export declare const RangeSliderWithChart: React.FC<RangeSliderWithChartProps>;
+//# sourceMappingURL=RangeSliderWithChart.d.ts.map

package/dist/cjs/components/rangeSlider/RangeSliderWithChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSliderWithChart.d.ts","sourceRoot":"","sources":["../../../../src/components/rangeSlider/RangeSliderWithChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EACL,cAAc,EACd,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,cAAc,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwBpE,CAAC"}

package/dist/cjs/components/rangeSlider/RangeSliderWithScale.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+export type NumericMinMaxValue = {
+    min: number | null | undefined;
+    max: number | null | undefined;
+};
+export type ChangeCallback = {
+    touched: 'min' | 'max';
+    value: NumericMinMaxValue;
+};
+interface RangeSliderWithScaleProps {
+    /**
+     * Array of numbers that represents the custom scale of the range slider
+     * @example [0, 100, 200, 300, 400]
+     * @default []
+     * @required
+     */
+    scale: number[];
+    /**
+     * Object that contains the min and max values of the range slider
+     * @example { min: 0, max: 100 }
+     * @default { min: null, max: null }
+     * @required
+     */
+    selection: NumericMinMaxValue;
+    /**
+     * Callback function that is triggered when slider is moving
+     * @param event     contains touched - what thumb is moved and value
+     */
+    onSliderChange: (event: ChangeCallback) => void;
+    /**
+     * Callback function that is triggered when slider is released
+     * @param event     contains touched - what thumb is moved and value
+     */
+    onSliderRelease: (event: ChangeCallback) => void;
+    /**
+     * Function that renders the chart with wrapper
+     * @param range     contains the range of the slider
+     * @returns         the chart component
+     * @example         (range: number[]) => <Chart range={range} />
+     * @default         null
+     */
+    renderChart?: (range: number[]) => React.ReactNode;
+}
+export declare const RangeSliderWithScale: React.FC<RangeSliderWithScaleProps>;
+export {};
+//# sourceMappingURL=RangeSliderWithScale.d.ts.map

package/dist/cjs/components/rangeSlider/RangeSliderWithScale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSliderWithScale.d.ts","sourceRoot":"","sources":["../../../../src/components/rangeSlider/RangeSliderWithScale.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/B,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,KAAK,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAEF,UAAU,yBAAyB;IACjC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB;;;;;OAKG;IACH,SAAS,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CACpD;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAgIpE,CAAC"}

package/dist/cjs/components/rangeSlider/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Slider } from '@chakra-ui/react';
+type SliderRootProps = Omit<React.ComponentProps<typeof Slider.Root>, 'onChange'>;
+export type RangeSliderProps = SliderRootProps & {
+    onChange?: (values: number[]) => void;
+    onChangeEnd?: (values: number[]) => void;
+};
+export declare const RangeSlider: React.FC<RangeSliderProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/rangeSlider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/rangeSlider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,KAAK,eAAe,GAAG,IAAI,CACzB,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,EACxC,UAAU,CACX,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmClD,CAAC"}

package/dist/cjs/index.js

@@ -935,7 +935,7 @@ var sliderSlotRecipe = react$1.defineSlotRecipe({
             flexDirection: 'column',
             fontSize: 'base',
             '--slider-marker-inset': '4px',
-            '--slider-marker-track': '5px',
+            '--slider-marker-track': '4px',
             '--slider-thumb-border': '1px',
             '--slider-thumb-boxShadow': '0 0 0 8px #2988E14D',
         },
@@ -945,13 +945,13 @@ var sliderSlotRecipe = react$1.defineSlotRecipe({
         track: {
             flex: '1',
             height: 'var(--slider-marker-track)',
-            bg: 'gray.300',
-            borderRadius: 'full',
+            bg: 'gray.200',
+            borderRadius: 'sm',
         },
         range: {
-            height: 'var(--slider-marker-inset)',
-            bg: 'gray.800',
-            borderRadius: 'full',
+            height: 'var(--slider-marker-track)',
+            bg: 'gray.900',
+            borderRadius: 'sm',
         },
         markerGroup: {
             position: 'absolute!',
@@ -965,7 +965,7 @@ var sliderSlotRecipe = react$1.defineSlotRecipe({
             borderWidth: 'var(--slider-thumb-border)',
             borderColor: 'gray.400',
             backgroundColor: 'white',
-            translate: '0 -40%',
+            translate: '0 -50%',
             _hover: {
                 cursor: 'pointer',
             },
@@ -1467,7 +1467,9 @@ var numberInputRecipe = react$1.defineSlotRecipe({
         'decrementTrigger',
     ],
     base: {
-        root: {},
+        root: {
+            position: 'relative',
+        },
         input: {
             w: 'full',
             minW: '0',
@@ -8428,36 +8430,74 @@ var InputLeftElement = function (_a) {
     return (React.createElement(react$1.InputElement, { insetY: "0", px: "sm", textStyle: "body-small", pointerEvents: "none" }, unit));
 };
 
+var parseToNumberOrUndef = function (raw) {
+    if (raw.trim() === '')
+        return undefined;
+    var n = Number(raw);
+    return Number.isNaN(n) ? undefined : n;
+};
 var InputGroup = function (_a) {
     var _b;
     var handleChange = _a.handleChange, inputProps = _a.inputProps, onBlur = _a.onBlur, unit = _a.unit, rest = __rest(_a, ["handleChange", "inputProps", "onBlur", "unit"]);
-    var _c = React.useState(false), refocus = _c[0], setRefocus = _c[1];
     var recipe = react$1.useSlotRecipe({ key: 'numberInput' });
-    var _d = recipe.splitVariantProps(rest), recipeProps = _d[0], restProps = _d[1];
+    var _c = recipe.splitVariantProps(rest), recipeProps = _c[0], restProps = _c[1];
     var styles = recipe(recipeProps);
-    return (React.createElement(react$1.NumberInput.Root, __assign({ key: "".concat(inputProps.name, "-").concat(inputProps.value), css: styles.root, width: "full", defaultValue: inputProps.value != null ? String(inputProps.value) : undefined, onValueChange: function (_a) {
-            var valueAsNumber = _a.valueAsNumber;
-            return handleChange({
-                value: valueAsNumber || undefined,
-                name: inputProps.name,
-            });
-        }, onBlur: function (event) {
+    /**
+     * Local string state that represents exactly what the user typed.
+     *
+     * Why string:
+     * - Allows intermediate values ("1" → "10" → "100")
+     * - Prevents cursor jumps and unstable behavior
+     * - Most stable approach with Chakra v3 NumberInput
+     */
+    var _d = React.useState(inputProps.value != null ? String(inputProps.value) : ''), raw = _d[0], setRaw = _d[1];
+    /**
+     * Sync external value changes (e.g. slider moved) back into the input.
+     * Without this, the input would display stale values.
+     */
+    React.useEffect(function () {
+        setRaw(inputProps.value != null ? String(inputProps.value) : '');
+    }, [inputProps.value]);
+    /**
+     * Debounced emit PER INPUT (important!)
+     *
+     * Why per-input debounce:
+     * - Shared debounce caused race conditions between FROM / TO inputs
+     * - Each input must control its own timing
+     *
+     */
+    var debouncedEmit = useDebounce.useDebouncedCallback(function (nextRaw) {
+        handleChange({
+            name: inputProps.name,
+            value: parseToNumberOrUndef(nextRaw),
+        });
+    }, 1000);
+    return (React.createElement(react$1.NumberInput.Root, __assign({ css: styles.root, width: "full", 
+        // Update local string immediately
+        value: raw, onValueChange: function (_a) {
+            var value = _a.value;
+            setRaw(value);
+            debouncedEmit(value);
+        }, 
+        /**
+         * On blur we emit immediately as a safety net,
+         * ensuring the final value is always propagated.
+         */
+        onBlur: function () {
             onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-                value: Number(event.target.value) || undefined,
                 name: inputProps.name,
+                value: parseToNumberOrUndef(raw),
             });
-            setRefocus(false);
-        }, onFocus: function () { return setRefocus(true); } }, restProps),
+        } }, restProps),
         unit ? React.createElement(InputLeftElement, { unit: unit }) : null,
-        React.createElement(react$1.NumberInput.Input, { css: styles.input, placeholder: (_b = inputProps.placeholder) !== null && _b !== void 0 ? _b : '', autoFocus: refocus, "aria-label": inputProps.ariaLabel, fontSize: "base" })));
+        React.createElement(react$1.NumberInput.Input, { css: styles.input, placeholder: (_b = inputProps.placeholder) !== null && _b !== void 0 ? _b : '', "aria-label": inputProps.ariaLabel, fontSize: "base" })));
 };
 
 var RangeFilterInput = function (_a) {
     var from = _a.from, to = _a.to, handleChange = _a.handleChange, unit = _a.unit, onBlur = _a.onBlur, rest = __rest(_a, ["from", "to", "handleChange", "unit", "onBlur"]);
-    var handleChangeDebounced = useDebounce.useDebouncedCallback(handleChange, 1000);
     return (React.createElement(react$1.Flex, null,
-        React.createElement(InputGroup, __assign({ inputProps: from, variant: "inputLeft", handleChange: handleChangeDebounced, onBlur: onBlur, unit: unit }, rest)),
-        React.createElement(InputGroup, __assign({ inputProps: to, variant: "inputRight", handleChange: handleChangeDebounced, onBlur: onBlur, unit: unit }, rest))));
+        React.createElement(InputGroup, __assign({ inputProps: from, variant: "inputLeft", handleChange: handleChange, onBlur: onBlur, unit: unit }, rest)),
+        React.createElement(InputGroup, __assign({ inputProps: to, variant: "inputRight", handleChange: handleChange, onBlur: onBlur, unit: unit }, rest))));
 };
 
 var _a;
@@ -8548,6 +8588,16 @@ var FormControlSection = function (_a) {
         React.createElement(react$1.Field.ErrorText, null, errorMessage)));
 };
 
+var RangeSlider = function (_a) {
+    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 10 : _c, onChange = _a.onChange, onChangeEnd = _a.onChangeEnd, rest = __rest(_a, ["min", "max", "onChange", "onChangeEnd"]);
+    return (React.createElement(react$1.Slider.Root, __assign({ defaultValue: [min, max], min: min, max: max, onValueChange: function (details) { return onChange === null || onChange === void 0 ? void 0 : onChange(details.value); }, onValueChangeEnd: function (details) { return onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(details.value); } }, rest),
+        React.createElement(react$1.Slider.Control, null,
+            React.createElement(react$1.Slider.Track, null,
+                React.createElement(react$1.Slider.Range, null)),
+            React.createElement(react$1.Slider.Thumb, { index: 0, "aria-label": "Min", width: { base: 'md', sm: 'sm' }, height: { base: 'md', sm: 'sm' } }),
+            React.createElement(react$1.Slider.Thumb, { index: 1, "aria-label": "Max", width: { base: 'md', sm: 'sm' }, height: { base: 'md', sm: 'sm' } }))));
+};
+
 Object.defineProperty(exports, "Box", {
     enumerable: true,
     get: function () { return react$1.Box; }
@@ -8748,6 +8798,7 @@ exports.PrintIcon = PrintIcon;
 exports.QualitySealIcon = QualitySealIcon;
 exports.RangeFilterInput = RangeFilterInput;
 exports.RangeIcon = RangeIcon;
+exports.RangeSlider = RangeSlider;
 exports.Rating = Rating;
 exports.RoadIcon = RoadIcon;
 exports.RocketIcon = RocketIcon;