@max-ts/kit 1.8.1 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/PageLayout/Content/styles.css.d.ts.map +1 -1
- package/lib/components/PageLayout/Header/Header.d.ts +9 -1
- package/lib/components/PageLayout/Header/Header.d.ts.map +1 -1
- package/lib/components/PageLayout/Header/styles.css.d.ts.map +1 -1
- package/lib/components/PageLayout/PageLayout.d.ts +1 -1
- package/lib/components/RangeInput/RangeInput.d.ts.map +1 -1
- package/lib/components/RangeInput/useLogic/useLogic.d.ts +8 -6
- package/lib/components/RangeInput/useLogic/useLogic.d.ts.map +1 -1
- package/lib/components/ScalableContainer/ScalableContainer.d.ts +4 -0
- package/lib/components/ScalableContainer/ScalableContainer.d.ts.map +1 -0
- package/lib/components/ScalableContainer/index.d.ts +3 -0
- package/lib/components/ScalableContainer/index.d.ts.map +1 -0
- package/lib/components/ScalableContainer/styles.css.d.ts +5 -0
- package/lib/components/ScalableContainer/styles.css.d.ts.map +1 -0
- package/lib/components/ScalableContainer/types.d.ts +13 -0
- package/lib/components/ScalableContainer/types.d.ts.map +1 -0
- package/lib/components/ScalableContainer/useLogic.d.ts +23 -0
- package/lib/components/ScalableContainer/useLogic.d.ts.map +1 -0
- package/lib/components/Sidebar/styles.css.d.ts.map +1 -1
- package/lib/components/Slider/Slider.d.ts +3 -2
- package/lib/components/Slider/Slider.d.ts.map +1 -1
- package/lib/components/SliderInput/SliderInput.d.ts +14 -0
- package/lib/components/SliderInput/SliderInput.d.ts.map +1 -0
- package/lib/components/SliderInput/index.d.ts +2 -0
- package/lib/components/SliderInput/index.d.ts.map +1 -0
- package/lib/components/SliderInput/styles.css.d.ts +7 -0
- package/lib/components/SliderInput/styles.css.d.ts.map +1 -0
- package/lib/components/SliderInput/useLogic/index.d.ts +2 -0
- package/lib/components/SliderInput/useLogic/index.d.ts.map +1 -0
- package/lib/components/SliderInput/useLogic/useLogic.d.ts +12 -0
- package/lib/components/SliderInput/useLogic/useLogic.d.ts.map +1 -0
- package/lib/components/index.d.ts +2 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/index.mjs +492 -38
- package/lib/stories/DashboardLayout.stories.d.ts.map +1 -1
- package/lib/stories/ScalableContainer.stories.d.ts +14 -0
- package/lib/stories/ScalableContainer.stories.d.ts.map +1 -0
- package/lib/stories/SliderInput.stories.d.ts +8 -0
- package/lib/stories/SliderInput.stories.d.ts.map +1 -0
- package/lib/styles.css +152 -10
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/PageLayout/Content/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/PageLayout/Content/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,eAAe,QAE1B,CAAC"}
|
|
@@ -5,6 +5,14 @@ export type PageHeaderProps = {
|
|
|
5
5
|
* @example <PageHeader title="Заголовок страницы" />
|
|
6
6
|
*/
|
|
7
7
|
title?: string;
|
|
8
|
+
/**
|
|
9
|
+
* HTML title
|
|
10
|
+
* @example <PageHeader htmlTitle="Заголовок страницы" />
|
|
11
|
+
*/
|
|
12
|
+
htmlTitle?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Компонент для отображения триггера бокового меню
|
|
15
|
+
*/
|
|
8
16
|
sidebarTrigger?: ReactElement;
|
|
9
17
|
/**
|
|
10
18
|
* Набор дополнительных действий
|
|
@@ -17,5 +25,5 @@ export type PageHeaderProps = {
|
|
|
17
25
|
className?: string;
|
|
18
26
|
children: ReactElement;
|
|
19
27
|
};
|
|
20
|
-
export declare const Header: ({ actions, className, title, children, sidebarTrigger, }: PageHeaderProps) => import("react").JSX.Element;
|
|
28
|
+
export declare const Header: ({ actions, className, title, children, sidebarTrigger, htmlTitle, }: PageHeaderProps) => import("react").JSX.Element;
|
|
21
29
|
//# sourceMappingURL=Header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/PageLayout/Header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAa,MAAM,OAAO,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,cAAc,CAAC,EAAE,YAAY,CAAC;IAE9B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/PageLayout/Header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAa,MAAM,OAAO,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,CAAC;IAE9B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,qEAOpB,eAAe,gCA0BjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/PageLayout/Header/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/PageLayout/Header/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,QASf,CAAC;AAOH,eAAO,MAAM,OAAO,QASlB,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAOlC,CAAC;AAEH,eAAO,MAAM,cAAc,QAQzB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC"}
|
|
@@ -5,7 +5,7 @@ export type PageLayoutProps = {
|
|
|
5
5
|
};
|
|
6
6
|
export declare const PageLayout: {
|
|
7
7
|
({ children, className }: PageLayoutProps): import("react").JSX.Element;
|
|
8
|
-
Header: ({ actions, className, title, children, sidebarTrigger, }: import("./Header").PageHeaderProps) => import("react").JSX.Element;
|
|
8
|
+
Header: ({ actions, className, title, children, sidebarTrigger, htmlTitle, }: import("./Header").PageHeaderProps) => import("react").JSX.Element;
|
|
9
9
|
Content: (props: import("./Content").PageContentProps) => import("react").JSX.Element;
|
|
10
10
|
Footer: (props: import("./Footer").PageLayoutFooterProps) => import("react").JSX.Element;
|
|
11
11
|
Aside: ({ children, className }: import("./Aside").PageAsideProps) => import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/RangeInput/RangeInput.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,eAAe,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAC1B,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAW,EACX,IAAS,EACT,IAAe,EACf,SAAS,EACT,QAAQ,EACR,WAAW,EACX,WAAW,GACX,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"RangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/RangeInput/RangeInput.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,eAAe,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAC1B,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAW,EACX,IAAS,EACT,IAAe,EACf,SAAS,EACT,QAAQ,EACR,WAAW,EACX,WAAW,GACX,EAAE,eAAe,+BA0EjB"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type ChangeEvent, type KeyboardEvent } from 'react';
|
|
2
|
+
import type { SliderValue } from '../../Slider';
|
|
2
3
|
import type { RangeInputProps } from '../RangeInput';
|
|
3
4
|
export declare const useLogic: ({ min, max, maxValue, minValue, onChange, }: RangeInputProps) => {
|
|
4
5
|
maxId: string;
|
|
5
6
|
minId: string;
|
|
6
7
|
minVal: number;
|
|
7
8
|
maxVal: number;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
sliderValue: readonly [number, number];
|
|
10
|
+
onValueChange: (newValue: SliderValue) => void;
|
|
11
|
+
onMinValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
12
|
+
onMaxValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
13
|
+
onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
|
|
14
|
+
onConfirm: (value: SliderValue) => void;
|
|
13
15
|
};
|
|
14
16
|
//# sourceMappingURL=useLogic.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/RangeInput/useLogic/useLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,
|
|
1
|
+
{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/RangeInput/useLogic/useLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,WAAW,EAChB,KAAK,aAAa,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAwCrD,eAAO,MAAM,QAAQ,GAAI,6CAMtB,eAAe;;;;;;8BAsB4B,WAAW;8BAkB/C,WAAW,CAAC,gBAAgB,CAAC;8BAY7B,WAAW,CAAC,gBAAgB,CAAC;uBAY7B,aAAa,CAAC,gBAAgB,CAAC;uBAW/B,WAAW;CA8BpB,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ScalableContainerProps } from './types';
|
|
2
|
+
declare function ScalableContainer({ initialScale, minScale, maxScale, showToolbar, onScaleChanged, onPositionChanged, onWheel, className, children, style, ...props }: ScalableContainerProps): import("react").JSX.Element;
|
|
3
|
+
export { ScalableContainer };
|
|
4
|
+
//# sourceMappingURL=ScalableContainer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalableContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/ScalableContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,iBAAS,iBAAiB,CAAC,EAC1B,YAAgB,EAChB,QAAc,EACd,QAAY,EACZ,WAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EAAE,sBAAsB,+BAiGxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAclB,CAAC;AAEH,eAAO,MAAM,OAAO,QAoBlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAOlB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export type ScalableContainerPosition = {
|
|
2
|
+
x: number;
|
|
3
|
+
y: number;
|
|
4
|
+
};
|
|
5
|
+
export type ScalableContainerProps = React.ComponentPropsWithoutRef<'div'> & {
|
|
6
|
+
initialScale?: number;
|
|
7
|
+
minScale?: number;
|
|
8
|
+
maxScale?: number;
|
|
9
|
+
showToolbar?: boolean;
|
|
10
|
+
onScaleChanged?: (scale: number) => void;
|
|
11
|
+
onPositionChanged?: (position: ScalableContainerPosition) => void;
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,yBAAyB,GAAG;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;CAClE,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { ScalableContainerProps } from './types';
|
|
2
|
+
type UseLogicParams = Pick<ScalableContainerProps, 'initialScale' | 'minScale' | 'maxScale' | 'onScaleChanged' | 'onPositionChanged'>;
|
|
3
|
+
export declare function useLogic({ initialScale, minScale, maxScale, onScaleChanged, onPositionChanged, }: UseLogicParams): {
|
|
4
|
+
contentStyle: {
|
|
5
|
+
transform: string;
|
|
6
|
+
transition: string;
|
|
7
|
+
};
|
|
8
|
+
cursor: string;
|
|
9
|
+
handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
10
|
+
handlePointerEnd: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
11
|
+
handlePointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
12
|
+
handleTouchEnd: () => void;
|
|
13
|
+
handleTouchMove: (event: React.TouchEvent<HTMLDivElement>) => void;
|
|
14
|
+
handleTouchStart: (event: React.TouchEvent<HTMLDivElement>) => void;
|
|
15
|
+
modifierKey: string;
|
|
16
|
+
reset: () => void;
|
|
17
|
+
showOverlay: boolean;
|
|
18
|
+
viewportRef: import("react").RefObject<HTMLDivElement | null>;
|
|
19
|
+
zoomIn: () => void;
|
|
20
|
+
zoomOut: () => void;
|
|
21
|
+
};
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=useLogic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/useLogic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEX,sBAAsB,EACtB,MAAM,SAAS,CAAC;AAOjB,KAAK,cAAc,GAAG,IAAI,CACzB,sBAAsB,EACpB,cAAc,GACd,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,mBAAmB,CACrB,CAAC;AAuBF,wBAAgB,QAAQ,CAAC,EACxB,YAAgB,EAChB,QAAc,EACd,QAAY,EACZ,cAAc,EACd,iBAAiB,GACjB,EAAE,cAAc;;;;;;+BAqDP,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;8BAyClC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;+BAnBlC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;;6BAmDlC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;8BAbhC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;;;;;;;EAmGzC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/styles.css.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACX,qBAAqB,EACrB,wBAAwB,EACxB,wBAAwB,EACxB,MAAM,SAAS,CAAC;AAcjB,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/styles.css.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACX,qBAAqB,EACrB,wBAAwB,EACxB,wBAAwB,EACxB,MAAM,SAAS,CAAC;AAcjB,eAAO,MAAM,OAAO,QAUlB,CAAC;AAEH,eAAO,MAAM,cAAc,QAQzB,CAAC;AAMH,eAAO,MAAM,GAAG,QAKd,CAAC;AAqBH,eAAO,MAAM,SAAS,QAcpB,CAAC;AAwDH,eAAO,MAAM,aAAa,QAOxB,CAAC;AAEH,eAAO,MAAM,KAAK,QAMhB,CAAC;AAQH,eAAO,MAAM,aAAa,QAOxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAKtB,CAAC;AAEH,eAAO,MAAM,cAAc,QAUzB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAEH,eAAO,MAAM,IAAI,QA8Bf,CAAC;AAoDH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAwBH,eAAO,MAAM,KAAK,QAIhB,CAAC;AAEH,eAAO,MAAM,MAAM,QAKjB,CAAC;AAEH,eAAO,MAAM,MAAM,QAKjB,CAAC;AAEH,eAAO,MAAM,SAAS,QAMpB,CAAC;AAEH,eAAO,MAAM,OAAO,QAOlB,CAAC;AAMH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAEH,eAAO,MAAM,UAAU,QAiBrB,CAAC;AAaH,eAAO,MAAM,WAAW,QAwCtB,CAAC;AAYH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,IAAI,QASf,CAAC;AAEH,eAAO,MAAM,QAAQ,QAEnB,CAAC;AAEH,eAAO,MAAM,UAAU,QA+CrB,CAAC;AAEH,eAAO,MAAM,kBAAkB,0CAc7B,CAAC;AAEH,eAAO,MAAM,eAAe,uCAe1B,CAAC;AA+BH,eAAO,MAAM,UAAU,QAyCrB,CAAC;AA2CH,eAAO,MAAM,SAAS,QAgBpB,CAAC;AA0BH,eAAO,MAAM,YAAY,QAOvB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAInB,CAAC;AAEH,eAAO,MAAM,YAAY,QAGvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,OAAO,QAUlB,CAAC;AAMH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,aAAa,QAoCxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,0CAS7B,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Slider as SliderPrimitive } from '@base-ui/react/slider';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
export type
|
|
4
|
-
|
|
3
|
+
export type SliderValue = number | readonly number[];
|
|
4
|
+
export type SliderProps = SliderPrimitive.Root.Props<SliderValue> & {
|
|
5
|
+
onValueCommit?: (value: SliderValue) => void;
|
|
5
6
|
};
|
|
6
7
|
export declare function Slider({ className, defaultValue, value, min, max, onValueCommit, onValueCommitted, ...props }: SliderProps): React.JSX.Element;
|
|
7
8
|
//# sourceMappingURL=Slider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG;IACnE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC7C,CAAC;AA2BF,wBAAgB,MAAM,CAAC,EACtB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACR,EAAE,WAAW,qBAkDb"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export type SliderInputProps = {
|
|
2
|
+
value?: number | null;
|
|
3
|
+
min: number;
|
|
4
|
+
max: number;
|
|
5
|
+
unit?: string;
|
|
6
|
+
onChange: (value: number) => void;
|
|
7
|
+
width?: number | string;
|
|
8
|
+
size?: 'small' | 'medium' | 'large';
|
|
9
|
+
className?: string;
|
|
10
|
+
isActive?: boolean;
|
|
11
|
+
inputRef?: React.RefObject<HTMLInputElement>;
|
|
12
|
+
};
|
|
13
|
+
export declare function SliderInput({ min, max, onChange, value, width, unit, size, className, isActive, inputRef, }: SliderInputProps): import("react").JSX.Element;
|
|
14
|
+
//# sourceMappingURL=SliderInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderInput.d.ts","sourceRoot":"","sources":["../../../src/components/SliderInput/SliderInput.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,gBAAgB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAC7C,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC3B,GAAG,EACH,GAAG,EACH,QAAQ,EACR,KAAK,EACL,KAAW,EACX,IAAS,EACT,IAAe,EACf,SAAS,EACT,QAAQ,EACR,QAAQ,GACR,EAAE,gBAAgB,+BAuDlB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SliderInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const container: string;
|
|
2
|
+
export declare const activeClass: string;
|
|
3
|
+
export declare const sizes: Record<"small" | "medium" | "large", string>;
|
|
4
|
+
export declare const inputClass: string;
|
|
5
|
+
export declare const textClass: string;
|
|
6
|
+
export declare const slider: string;
|
|
7
|
+
//# sourceMappingURL=styles.css.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/SliderInput/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAgBpB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,KAAK,8CAgBhB,CAAC;AAEH,eAAO,MAAM,UAAU,QAgBrB,CAAC;AAEH,eAAO,MAAM,SAAS,QAEpB,CAAC;AAEH,eAAO,MAAM,MAAM,QAOjB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SliderInput/useLogic/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type ChangeEvent, type KeyboardEvent } from 'react';
|
|
2
|
+
import type { SliderValue } from '../../Slider';
|
|
3
|
+
import type { SliderInputProps } from '../SliderInput';
|
|
4
|
+
export declare const useLogic: ({ min, max, value, onChange }: SliderInputProps) => {
|
|
5
|
+
inputId: string;
|
|
6
|
+
inputValue: number;
|
|
7
|
+
onInputValueChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
8
|
+
onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
|
|
9
|
+
onValueChange: (newValue: SliderValue) => void;
|
|
10
|
+
onConfirm: (value: SliderValue) => void;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=useLogic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/SliderInput/useLogic/useLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,WAAW,EAChB,KAAK,aAAa,EAKlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmBvD,eAAO,MAAM,QAAQ,GAAI,+BAA+B,gBAAgB;;;gCAyB9D,WAAW,CAAC,gBAAgB,CAAC;uBAW7B,aAAa,CAAC,gBAAgB,CAAC;8BAtBK,WAAW;uBAiC/C,WAAW;CAwBpB,CAAC"}
|
|
@@ -42,11 +42,13 @@ export * from './Placeholder';
|
|
|
42
42
|
export * from './Popover';
|
|
43
43
|
export * from './RadioGroup';
|
|
44
44
|
export * from './RangeInput';
|
|
45
|
+
export * from './ScalableContainer';
|
|
45
46
|
export * from './ScrollTopButton';
|
|
46
47
|
export * from './Select';
|
|
47
48
|
export * from './Sheet';
|
|
48
49
|
export * from './Sidebar';
|
|
49
50
|
export * from './Slider';
|
|
51
|
+
export * from './SliderInput';
|
|
50
52
|
export * from './Spinner';
|
|
51
53
|
export * from './Switch';
|
|
52
54
|
export * from './Tabs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
|
package/lib/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Accordion, Checkbox } from "@base-ui/react";
|
|
3
3
|
import clsx_0, { clsx } from "clsx";
|
|
4
|
-
import { ArrowDownNarrowWide, ArrowDownUp, ArrowDownWideNarrow, ArrowLeft, ArrowRight, Calendar1, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, CircleCheck, CircleIcon, Copy, Ellipsis as external_lucide_react_Ellipsis, EllipsisVertical, Info, Loader, Minus, MoreHorizontalIcon, OctagonAlert, PanelLeftIcon, TriangleAlert, XIcon } from "lucide-react";
|
|
4
|
+
import { ArrowDownNarrowWide, ArrowDownUp, ArrowDownWideNarrow, ArrowLeft, ArrowRight, Calendar1, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, CircleCheck, CircleIcon, Copy, Ellipsis as external_lucide_react_Ellipsis, EllipsisVertical, Info, Loader, Minus, MoreHorizontalIcon, OctagonAlert, PanelLeftIcon, RotateCcwIcon, TriangleAlert, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
|
|
5
5
|
import { AlertDialog } from "@base-ui/react/alert-dialog";
|
|
6
6
|
import { Button } from "@base-ui/react/button";
|
|
7
7
|
import react, { Component as external_react_Component, createContext, createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
@@ -3949,11 +3949,16 @@ var Header_styles_css_content = 'style__nvcxbd4';
|
|
|
3949
3949
|
var Header_styles_css_root = 'style__nvcxbd0';
|
|
3950
3950
|
var sidebarTriggerContainer = 'style__nvcxbd2';
|
|
3951
3951
|
var titleContainer = 'style__nvcxbd3';
|
|
3952
|
-
const Header_Header_Header = ({ actions, className, title, children, sidebarTrigger })=>{
|
|
3952
|
+
const Header_Header_Header = ({ actions, className, title, children, sidebarTrigger, htmlTitle })=>{
|
|
3953
3953
|
useEffect(()=>{
|
|
3954
|
+
if (htmlTitle) {
|
|
3955
|
+
document.title = htmlTitle;
|
|
3956
|
+
return;
|
|
3957
|
+
}
|
|
3954
3958
|
if (title) document.title = title;
|
|
3955
3959
|
}, [
|
|
3956
|
-
title
|
|
3960
|
+
title,
|
|
3961
|
+
htmlTitle
|
|
3957
3962
|
]);
|
|
3958
3963
|
return /*#__PURE__*/ jsxs("header", {
|
|
3959
3964
|
className: clsx(Header_styles_css_root, PAGE_HEADER_CLASSNAME, className),
|
|
@@ -4282,11 +4287,26 @@ var styles_css_range = 'style__h9oy583';
|
|
|
4282
4287
|
var Slider_styles_css_root = 'style__h9oy580';
|
|
4283
4288
|
var styles_css_thumb = 'style__h9oy584';
|
|
4284
4289
|
var track = 'style__h9oy582';
|
|
4290
|
+
const getValues = (value, defaultValue, min, max)=>{
|
|
4291
|
+
if ('number' == typeof value) return [
|
|
4292
|
+
value
|
|
4293
|
+
];
|
|
4294
|
+
if (Array.isArray(value)) return [
|
|
4295
|
+
...value
|
|
4296
|
+
];
|
|
4297
|
+
if ('number' == typeof defaultValue) return [
|
|
4298
|
+
defaultValue
|
|
4299
|
+
];
|
|
4300
|
+
if (Array.isArray(defaultValue)) return [
|
|
4301
|
+
...defaultValue
|
|
4302
|
+
];
|
|
4303
|
+
return [
|
|
4304
|
+
min,
|
|
4305
|
+
max
|
|
4306
|
+
];
|
|
4307
|
+
};
|
|
4285
4308
|
function Slider_Slider({ className, defaultValue, value, min = 0, max = 100, onValueCommit, onValueCommitted, ...props }) {
|
|
4286
|
-
const values = __rspack_external_react.useMemo(()=>
|
|
4287
|
-
min,
|
|
4288
|
-
max
|
|
4289
|
-
], [
|
|
4309
|
+
const values = __rspack_external_react.useMemo(()=>getValues(value, defaultValue, min, max), [
|
|
4290
4310
|
value,
|
|
4291
4311
|
defaultValue,
|
|
4292
4312
|
min,
|
|
@@ -4343,37 +4363,84 @@ var RangeInput_styles_css_sizes = {
|
|
|
4343
4363
|
};
|
|
4344
4364
|
var sliderClass = 'style__1pnwkko7';
|
|
4345
4365
|
var styles_css_textClass = 'style__1pnwkko5';
|
|
4366
|
+
const getNumberFromInputValue = (value)=>{
|
|
4367
|
+
const numberValue = Number(value);
|
|
4368
|
+
return Number.isNaN(numberValue) ? null : numberValue;
|
|
4369
|
+
};
|
|
4370
|
+
const clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
|
|
4371
|
+
const normalizeRange = (minValue, maxValue)=>{
|
|
4372
|
+
if (minValue <= maxValue) return [
|
|
4373
|
+
minValue,
|
|
4374
|
+
maxValue
|
|
4375
|
+
];
|
|
4376
|
+
return [
|
|
4377
|
+
maxValue,
|
|
4378
|
+
minValue
|
|
4379
|
+
];
|
|
4380
|
+
};
|
|
4381
|
+
const getSliderValue = (minValue, maxValue, min, max)=>normalizeRange(clamp(minValue, min, max), clamp(maxValue, min, max));
|
|
4382
|
+
const getRangeValue = (value)=>{
|
|
4383
|
+
if (!Array.isArray(value)) return null;
|
|
4384
|
+
const [minValue, maxValue] = value;
|
|
4385
|
+
if (void 0 === minValue || void 0 === maxValue) return null;
|
|
4386
|
+
return [
|
|
4387
|
+
minValue,
|
|
4388
|
+
maxValue
|
|
4389
|
+
];
|
|
4390
|
+
};
|
|
4346
4391
|
const RangeInput_useLogic_useLogic_useLogic = ({ min, max, maxValue, minValue, onChange })=>{
|
|
4347
4392
|
const minId = useId();
|
|
4348
4393
|
const maxId = useId();
|
|
4349
|
-
const [minVal, setMinVal] = useState(min);
|
|
4350
|
-
const [maxVal, setMaxVal] = useState(max);
|
|
4351
|
-
const
|
|
4352
|
-
|
|
4353
|
-
|
|
4354
|
-
|
|
4355
|
-
|
|
4356
|
-
|
|
4394
|
+
const [minVal, setMinVal] = useState(minValue ?? min);
|
|
4395
|
+
const [maxVal, setMaxVal] = useState(maxValue ?? max);
|
|
4396
|
+
const sliderValue = getSliderValue(minVal, maxVal, min, max);
|
|
4397
|
+
const commit = useCallback((nextMinValue, nextMaxValue)=>{
|
|
4398
|
+
const [normalizedMinValue, normalizedMaxValue] = normalizeRange(clamp(nextMinValue, min, max), clamp(nextMaxValue, min, max));
|
|
4399
|
+
setMinVal(normalizedMinValue);
|
|
4400
|
+
setMaxVal(normalizedMaxValue);
|
|
4401
|
+
onChange(normalizedMinValue, normalizedMaxValue);
|
|
4402
|
+
}, [
|
|
4403
|
+
min,
|
|
4404
|
+
max,
|
|
4405
|
+
onChange
|
|
4406
|
+
]);
|
|
4407
|
+
const onValueChange = useCallback((newValue)=>{
|
|
4408
|
+
const rangeValue = getRangeValue(newValue);
|
|
4409
|
+
if (null === rangeValue) return;
|
|
4410
|
+
const [newMinValue, newMaxValue] = rangeValue;
|
|
4411
|
+
const [normalizedMinValue, normalizedMaxValue] = normalizeRange(newMinValue, newMaxValue);
|
|
4412
|
+
setMinVal(normalizedMinValue);
|
|
4413
|
+
setMaxVal(normalizedMaxValue);
|
|
4414
|
+
}, []);
|
|
4415
|
+
const onMinValueChange = useCallback((event)=>{
|
|
4357
4416
|
const { value } = event.target;
|
|
4358
|
-
|
|
4359
|
-
|
|
4360
|
-
|
|
4417
|
+
const numberValue = getNumberFromInputValue(value);
|
|
4418
|
+
if (null !== numberValue) setMinVal(numberValue);
|
|
4419
|
+
}, []);
|
|
4420
|
+
const onMaxValueChange = useCallback((event)=>{
|
|
4361
4421
|
const { value } = event.target;
|
|
4362
|
-
|
|
4363
|
-
|
|
4364
|
-
|
|
4365
|
-
|
|
4366
|
-
|
|
4367
|
-
|
|
4368
|
-
|
|
4369
|
-
|
|
4370
|
-
|
|
4371
|
-
|
|
4372
|
-
|
|
4373
|
-
|
|
4422
|
+
const numberValue = getNumberFromInputValue(value);
|
|
4423
|
+
if (null !== numberValue) setMaxVal(numberValue);
|
|
4424
|
+
}, []);
|
|
4425
|
+
const onKeyDown = useCallback((event)=>{
|
|
4426
|
+
if ('Enter' !== event.key) return;
|
|
4427
|
+
commit(minVal, maxVal);
|
|
4428
|
+
}, [
|
|
4429
|
+
commit,
|
|
4430
|
+
minVal,
|
|
4431
|
+
maxVal
|
|
4432
|
+
]);
|
|
4433
|
+
const onConfirm = useCallback((value)=>{
|
|
4434
|
+
const rangeValue = getRangeValue(value);
|
|
4435
|
+
if (null === rangeValue) return;
|
|
4436
|
+
const [nextMinValue, nextMaxValue] = rangeValue;
|
|
4437
|
+
commit(nextMinValue, nextMaxValue);
|
|
4438
|
+
}, [
|
|
4439
|
+
commit
|
|
4440
|
+
]);
|
|
4374
4441
|
useEffect(()=>{
|
|
4375
|
-
setMinVal(minValue
|
|
4376
|
-
setMaxVal(maxValue
|
|
4442
|
+
setMinVal(minValue ?? min);
|
|
4443
|
+
setMaxVal(maxValue ?? max);
|
|
4377
4444
|
}, [
|
|
4378
4445
|
minValue,
|
|
4379
4446
|
maxValue,
|
|
@@ -4385,6 +4452,7 @@ const RangeInput_useLogic_useLogic_useLogic = ({ min, max, maxValue, minValue, o
|
|
|
4385
4452
|
minId,
|
|
4386
4453
|
minVal,
|
|
4387
4454
|
maxVal,
|
|
4455
|
+
sliderValue,
|
|
4388
4456
|
onValueChange,
|
|
4389
4457
|
onMinValueChange,
|
|
4390
4458
|
onMaxValueChange,
|
|
@@ -4393,7 +4461,7 @@ const RangeInput_useLogic_useLogic_useLogic = ({ min, max, maxValue, minValue, o
|
|
|
4393
4461
|
};
|
|
4394
4462
|
};
|
|
4395
4463
|
function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit = '', size = 'medium', className, isActive, minInputRef, maxInputRef }) {
|
|
4396
|
-
const { onMinValueChange, onMaxValueChange, minVal, maxVal, onKeyDown, onValueChange, onConfirm, minId, maxId } = RangeInput_useLogic_useLogic_useLogic({
|
|
4464
|
+
const { onMinValueChange, onMaxValueChange, minVal, maxVal, onKeyDown, onValueChange, onConfirm, sliderValue, minId, maxId } = RangeInput_useLogic_useLogic_useLogic({
|
|
4397
4465
|
min,
|
|
4398
4466
|
max,
|
|
4399
4467
|
maxValue,
|
|
@@ -4401,6 +4469,7 @@ function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit
|
|
|
4401
4469
|
onChange
|
|
4402
4470
|
});
|
|
4403
4471
|
return /*#__PURE__*/ jsxs("div", {
|
|
4472
|
+
"data-slot": "range-input",
|
|
4404
4473
|
className: clsx(RangeInput_styles_css_container, RangeInput_styles_css_sizes[size], {
|
|
4405
4474
|
[activeClass]: isActive
|
|
4406
4475
|
}, className),
|
|
@@ -4415,6 +4484,7 @@ function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit
|
|
|
4415
4484
|
children: "от"
|
|
4416
4485
|
}),
|
|
4417
4486
|
/*#__PURE__*/ jsx("input", {
|
|
4487
|
+
"data-slot": "range-input-min-field",
|
|
4418
4488
|
className: inputClass,
|
|
4419
4489
|
type: "text",
|
|
4420
4490
|
id: minId,
|
|
@@ -4430,6 +4500,7 @@ function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit
|
|
|
4430
4500
|
children: "до"
|
|
4431
4501
|
}),
|
|
4432
4502
|
/*#__PURE__*/ jsx("input", {
|
|
4503
|
+
"data-slot": "range-input-max-field",
|
|
4433
4504
|
className: inputClass,
|
|
4434
4505
|
type: "text",
|
|
4435
4506
|
id: maxId,
|
|
@@ -4445,14 +4516,12 @@ function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit
|
|
|
4445
4516
|
children: unit
|
|
4446
4517
|
}),
|
|
4447
4518
|
/*#__PURE__*/ jsx("div", {
|
|
4519
|
+
"data-slot": "range-input-slider",
|
|
4448
4520
|
className: sliderClass,
|
|
4449
4521
|
children: /*#__PURE__*/ jsx(Slider_Slider, {
|
|
4450
4522
|
min: min,
|
|
4451
4523
|
max: max,
|
|
4452
|
-
value:
|
|
4453
|
-
Number(minVal),
|
|
4454
|
-
Number(maxVal)
|
|
4455
|
-
],
|
|
4524
|
+
value: sliderValue,
|
|
4456
4525
|
onValueChange: onValueChange,
|
|
4457
4526
|
onValueCommit: onConfirm
|
|
4458
4527
|
})
|
|
@@ -4460,6 +4529,279 @@ function RangeInput({ min, max, onChange, minValue, maxValue, width = 150, unit
|
|
|
4460
4529
|
]
|
|
4461
4530
|
});
|
|
4462
4531
|
}
|
|
4532
|
+
var ScalableContainer_styles_css_content = 'style__uxh2ml3';
|
|
4533
|
+
var ScalableContainer_styles_css_overlay = 'style__uxh2ml2';
|
|
4534
|
+
var toolbar = 'style__uxh2ml1';
|
|
4535
|
+
var ScalableContainer_styles_css_viewport = 'style__uxh2ml0';
|
|
4536
|
+
const DEFAULT_POSITION = {
|
|
4537
|
+
x: 0,
|
|
4538
|
+
y: 0
|
|
4539
|
+
};
|
|
4540
|
+
const OVERLAY_TIMEOUT = 1500;
|
|
4541
|
+
const ZOOM_FACTOR = 1.5;
|
|
4542
|
+
const WHEEL_ZOOM_FACTOR = 0.05;
|
|
4543
|
+
function clampScale(value, minScale, maxScale) {
|
|
4544
|
+
return Math.max(minScale, Math.min(maxScale, value));
|
|
4545
|
+
}
|
|
4546
|
+
function getDistance(firstTouch, secondTouch) {
|
|
4547
|
+
const deltaX = firstTouch.clientX - secondTouch.clientX;
|
|
4548
|
+
const deltaY = firstTouch.clientY - secondTouch.clientY;
|
|
4549
|
+
return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
|
4550
|
+
}
|
|
4551
|
+
function shouldSkipDragStart(target) {
|
|
4552
|
+
if (!(target instanceof Element)) return false;
|
|
4553
|
+
return Boolean(target.closest('button, a, input, textarea, select, label, path, summary, [role="button"], [contenteditable="true"]'));
|
|
4554
|
+
}
|
|
4555
|
+
function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1, maxScale = 4, onScaleChanged, onPositionChanged }) {
|
|
4556
|
+
const initialClampedScale = clampScale(initialScale, minScale, maxScale);
|
|
4557
|
+
const [scale, setScaleState] = useState(initialClampedScale);
|
|
4558
|
+
const [position, setPositionState] = useState(DEFAULT_POSITION);
|
|
4559
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
4560
|
+
const [showOverlay, setShowOverlay] = useState(false);
|
|
4561
|
+
const scaleRef = useRef(initialClampedScale);
|
|
4562
|
+
const positionRef = useRef(DEFAULT_POSITION);
|
|
4563
|
+
const dragStartRef = useRef(DEFAULT_POSITION);
|
|
4564
|
+
const activePointersRef = useRef(new Map());
|
|
4565
|
+
const initialPinchDistanceRef = useRef(0);
|
|
4566
|
+
const initialPinchScaleRef = useRef(initialClampedScale);
|
|
4567
|
+
const overlayTimeoutRef = useRef(void 0);
|
|
4568
|
+
const viewportRef = useRef(null);
|
|
4569
|
+
const setScale = useCallback((value)=>{
|
|
4570
|
+
const nextScale = clampScale(value, minScale, maxScale);
|
|
4571
|
+
scaleRef.current = nextScale;
|
|
4572
|
+
setScaleState(nextScale);
|
|
4573
|
+
onScaleChanged?.(nextScale);
|
|
4574
|
+
}, [
|
|
4575
|
+
maxScale,
|
|
4576
|
+
minScale,
|
|
4577
|
+
onScaleChanged
|
|
4578
|
+
]);
|
|
4579
|
+
const setPosition = useCallback((nextPosition)=>{
|
|
4580
|
+
positionRef.current = nextPosition;
|
|
4581
|
+
setPositionState(nextPosition);
|
|
4582
|
+
onPositionChanged?.(nextPosition);
|
|
4583
|
+
}, [
|
|
4584
|
+
onPositionChanged
|
|
4585
|
+
]);
|
|
4586
|
+
const zoomIn = useCallback(()=>{
|
|
4587
|
+
setScale(scaleRef.current * ZOOM_FACTOR);
|
|
4588
|
+
}, [
|
|
4589
|
+
setScale
|
|
4590
|
+
]);
|
|
4591
|
+
const zoomOut = useCallback(()=>{
|
|
4592
|
+
setScale(scaleRef.current / ZOOM_FACTOR);
|
|
4593
|
+
}, [
|
|
4594
|
+
setScale
|
|
4595
|
+
]);
|
|
4596
|
+
const reset = useCallback(()=>{
|
|
4597
|
+
setScale(initialScale);
|
|
4598
|
+
setPosition(DEFAULT_POSITION);
|
|
4599
|
+
}, [
|
|
4600
|
+
initialScale,
|
|
4601
|
+
setPosition,
|
|
4602
|
+
setScale
|
|
4603
|
+
]);
|
|
4604
|
+
const handlePointerDown = useCallback((event)=>{
|
|
4605
|
+
if ('mouse' === event.pointerType && 0 !== event.button) return;
|
|
4606
|
+
if (shouldSkipDragStart(event.target)) return;
|
|
4607
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
4608
|
+
activePointersRef.current.set(event.pointerId, {
|
|
4609
|
+
x: event.clientX,
|
|
4610
|
+
y: event.clientY
|
|
4611
|
+
});
|
|
4612
|
+
if (1 === activePointersRef.current.size) {
|
|
4613
|
+
setIsDragging(true);
|
|
4614
|
+
dragStartRef.current = {
|
|
4615
|
+
x: event.clientX - positionRef.current.x,
|
|
4616
|
+
y: event.clientY - positionRef.current.y
|
|
4617
|
+
};
|
|
4618
|
+
}
|
|
4619
|
+
}, []);
|
|
4620
|
+
const handlePointerMove = useCallback((event)=>{
|
|
4621
|
+
if (!activePointersRef.current.has(event.pointerId)) return;
|
|
4622
|
+
activePointersRef.current.set(event.pointerId, {
|
|
4623
|
+
x: event.clientX,
|
|
4624
|
+
y: event.clientY
|
|
4625
|
+
});
|
|
4626
|
+
if (1 === activePointersRef.current.size) setPosition({
|
|
4627
|
+
x: event.clientX - dragStartRef.current.x,
|
|
4628
|
+
y: event.clientY - dragStartRef.current.y
|
|
4629
|
+
});
|
|
4630
|
+
}, [
|
|
4631
|
+
setPosition
|
|
4632
|
+
]);
|
|
4633
|
+
const handlePointerEnd = useCallback((event)=>{
|
|
4634
|
+
activePointersRef.current.delete(event.pointerId);
|
|
4635
|
+
const remainingPointer = activePointersRef.current.values().next().value;
|
|
4636
|
+
if (remainingPointer) {
|
|
4637
|
+
dragStartRef.current = {
|
|
4638
|
+
x: remainingPointer.x - positionRef.current.x,
|
|
4639
|
+
y: remainingPointer.y - positionRef.current.y
|
|
4640
|
+
};
|
|
4641
|
+
setIsDragging(true);
|
|
4642
|
+
} else setIsDragging(false);
|
|
4643
|
+
}, []);
|
|
4644
|
+
const handleTouchStart = useCallback((event)=>{
|
|
4645
|
+
if (2 !== event.touches.length) return;
|
|
4646
|
+
initialPinchDistanceRef.current = getDistance(event.touches[0], event.touches[1]);
|
|
4647
|
+
initialPinchScaleRef.current = scaleRef.current;
|
|
4648
|
+
}, []);
|
|
4649
|
+
const handleTouchMove = useCallback((event)=>{
|
|
4650
|
+
if (2 !== event.touches.length || 0 === initialPinchDistanceRef.current) return;
|
|
4651
|
+
event.preventDefault();
|
|
4652
|
+
const distance = getDistance(event.touches[0], event.touches[1]);
|
|
4653
|
+
setScale(initialPinchScaleRef.current * (distance / initialPinchDistanceRef.current));
|
|
4654
|
+
}, [
|
|
4655
|
+
setScale
|
|
4656
|
+
]);
|
|
4657
|
+
const handleTouchEnd = useCallback(()=>{
|
|
4658
|
+
initialPinchDistanceRef.current = 0;
|
|
4659
|
+
}, []);
|
|
4660
|
+
const handleWheel = useCallback((event)=>{
|
|
4661
|
+
const hasModifier = event.metaKey || event.ctrlKey;
|
|
4662
|
+
if (hasModifier) {
|
|
4663
|
+
event.preventDefault();
|
|
4664
|
+
setShowOverlay(false);
|
|
4665
|
+
setScale(scaleRef.current - event.deltaY * WHEEL_ZOOM_FACTOR);
|
|
4666
|
+
} else {
|
|
4667
|
+
setShowOverlay(true);
|
|
4668
|
+
clearTimeout(overlayTimeoutRef.current);
|
|
4669
|
+
overlayTimeoutRef.current = setTimeout(()=>{
|
|
4670
|
+
setShowOverlay(false);
|
|
4671
|
+
}, OVERLAY_TIMEOUT);
|
|
4672
|
+
}
|
|
4673
|
+
}, [
|
|
4674
|
+
setScale
|
|
4675
|
+
]);
|
|
4676
|
+
useEffect(()=>{
|
|
4677
|
+
const viewport = viewportRef.current;
|
|
4678
|
+
if (!viewport) return;
|
|
4679
|
+
viewport.addEventListener('wheel', handleWheel, {
|
|
4680
|
+
passive: false
|
|
4681
|
+
});
|
|
4682
|
+
return ()=>{
|
|
4683
|
+
viewport.removeEventListener('wheel', handleWheel);
|
|
4684
|
+
};
|
|
4685
|
+
}, [
|
|
4686
|
+
handleWheel
|
|
4687
|
+
]);
|
|
4688
|
+
useEffect(()=>()=>{
|
|
4689
|
+
clearTimeout(overlayTimeoutRef.current);
|
|
4690
|
+
}, []);
|
|
4691
|
+
const transform = useMemo(()=>`translate(${position.x}px, ${position.y}px) scale(${scale})`, [
|
|
4692
|
+
position,
|
|
4693
|
+
scale
|
|
4694
|
+
]);
|
|
4695
|
+
const modifierKey = useMemo(()=>{
|
|
4696
|
+
if ("u" < typeof navigator) return 'Ctrl';
|
|
4697
|
+
return /Mac/i.test(navigator.userAgent) ? '⌘' : 'Ctrl';
|
|
4698
|
+
}, []);
|
|
4699
|
+
return {
|
|
4700
|
+
contentStyle: {
|
|
4701
|
+
transform,
|
|
4702
|
+
transition: isDragging ? 'none' : 'transform 0.1s ease-out'
|
|
4703
|
+
},
|
|
4704
|
+
cursor: isDragging ? 'grabbing' : 'grab',
|
|
4705
|
+
handlePointerDown,
|
|
4706
|
+
handlePointerEnd,
|
|
4707
|
+
handlePointerMove,
|
|
4708
|
+
handleTouchEnd,
|
|
4709
|
+
handleTouchMove,
|
|
4710
|
+
handleTouchStart,
|
|
4711
|
+
modifierKey,
|
|
4712
|
+
reset,
|
|
4713
|
+
showOverlay,
|
|
4714
|
+
viewportRef,
|
|
4715
|
+
zoomIn,
|
|
4716
|
+
zoomOut
|
|
4717
|
+
};
|
|
4718
|
+
}
|
|
4719
|
+
function ScalableContainer({ initialScale = 1, minScale = 0.1, maxScale = 4, showToolbar = false, onScaleChanged, onPositionChanged, onWheel, className, children, style, ...props }) {
|
|
4720
|
+
const { contentStyle, cursor, handlePointerDown, handlePointerEnd, handlePointerMove, handleTouchEnd, handleTouchMove, handleTouchStart, modifierKey, reset, showOverlay, viewportRef, zoomIn, zoomOut } = ScalableContainer_useLogic_useLogic({
|
|
4721
|
+
initialScale,
|
|
4722
|
+
minScale,
|
|
4723
|
+
maxScale,
|
|
4724
|
+
onScaleChanged,
|
|
4725
|
+
onPositionChanged
|
|
4726
|
+
});
|
|
4727
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
4728
|
+
ref: viewportRef,
|
|
4729
|
+
"data-slot": "scalable-container",
|
|
4730
|
+
className: clsx(ScalableContainer_styles_css_viewport, className),
|
|
4731
|
+
style: {
|
|
4732
|
+
...style,
|
|
4733
|
+
cursor
|
|
4734
|
+
},
|
|
4735
|
+
onWheel: onWheel,
|
|
4736
|
+
...props,
|
|
4737
|
+
children: [
|
|
4738
|
+
showToolbar && /*#__PURE__*/ jsxs(ButtonGroup, {
|
|
4739
|
+
orientation: "vertical",
|
|
4740
|
+
className: toolbar,
|
|
4741
|
+
"aria-label": "Управление масштабом",
|
|
4742
|
+
children: [
|
|
4743
|
+
/*#__PURE__*/ jsx(Button_Button, {
|
|
4744
|
+
type: "button",
|
|
4745
|
+
onClick: zoomIn,
|
|
4746
|
+
size: "iconSmall",
|
|
4747
|
+
title: "Увеличить",
|
|
4748
|
+
"aria-label": "Увеличить",
|
|
4749
|
+
variant: "outline",
|
|
4750
|
+
children: /*#__PURE__*/ jsx(ZoomInIcon, {
|
|
4751
|
+
size: 16
|
|
4752
|
+
})
|
|
4753
|
+
}),
|
|
4754
|
+
/*#__PURE__*/ jsx(Button_Button, {
|
|
4755
|
+
type: "button",
|
|
4756
|
+
onClick: zoomOut,
|
|
4757
|
+
size: "iconSmall",
|
|
4758
|
+
title: "Уменьшить",
|
|
4759
|
+
"aria-label": "Уменьшить",
|
|
4760
|
+
variant: "outline",
|
|
4761
|
+
children: /*#__PURE__*/ jsx(ZoomOutIcon, {
|
|
4762
|
+
size: 16
|
|
4763
|
+
})
|
|
4764
|
+
}),
|
|
4765
|
+
/*#__PURE__*/ jsx(Button_Button, {
|
|
4766
|
+
type: "button",
|
|
4767
|
+
onClick: reset,
|
|
4768
|
+
size: "iconSmall",
|
|
4769
|
+
title: "Сбросить",
|
|
4770
|
+
"aria-label": "Сбросить",
|
|
4771
|
+
variant: "outline",
|
|
4772
|
+
children: /*#__PURE__*/ jsx(RotateCcwIcon, {
|
|
4773
|
+
size: 16
|
|
4774
|
+
})
|
|
4775
|
+
})
|
|
4776
|
+
]
|
|
4777
|
+
}),
|
|
4778
|
+
/*#__PURE__*/ jsxs("div", {
|
|
4779
|
+
"data-slot": "scalable-container-overlay",
|
|
4780
|
+
className: ScalableContainer_styles_css_overlay,
|
|
4781
|
+
"data-visible": showOverlay,
|
|
4782
|
+
"aria-hidden": !showOverlay,
|
|
4783
|
+
children: [
|
|
4784
|
+
"Используйте ",
|
|
4785
|
+
modifierKey,
|
|
4786
|
+
" + колесо для масштабирования."
|
|
4787
|
+
]
|
|
4788
|
+
}),
|
|
4789
|
+
/*#__PURE__*/ jsx("div", {
|
|
4790
|
+
"data-slot": "scalable-container-content",
|
|
4791
|
+
className: ScalableContainer_styles_css_content,
|
|
4792
|
+
style: contentStyle,
|
|
4793
|
+
onPointerDown: handlePointerDown,
|
|
4794
|
+
onPointerMove: handlePointerMove,
|
|
4795
|
+
onPointerUp: handlePointerEnd,
|
|
4796
|
+
onPointerCancel: handlePointerEnd,
|
|
4797
|
+
onTouchStart: handleTouchStart,
|
|
4798
|
+
onTouchMove: handleTouchMove,
|
|
4799
|
+
onTouchEnd: handleTouchEnd,
|
|
4800
|
+
children: children
|
|
4801
|
+
})
|
|
4802
|
+
]
|
|
4803
|
+
});
|
|
4804
|
+
}
|
|
4463
4805
|
var ScrollTopButton_styles_css_button = 'style__1ou2vjc0';
|
|
4464
4806
|
var styles_css_visible = 'style__1ou2vjc1';
|
|
4465
4807
|
function ScrollTopButton({ onClick, variant = 'outline', ...props }) {
|
|
@@ -5426,6 +5768,118 @@ const Sidebar_Sidebar = Object.assign(SidebarRoot, {
|
|
|
5426
5768
|
MenuSubItem: MenuSubItem,
|
|
5427
5769
|
MenuSubButton: MenuSubButton
|
|
5428
5770
|
});
|
|
5771
|
+
var styles_css_activeClass = 'style__pyzq971';
|
|
5772
|
+
var SliderInput_styles_css_container = 'style__pyzq970';
|
|
5773
|
+
var styles_css_inputClass = 'style__pyzq975';
|
|
5774
|
+
var SliderInput_styles_css_sizes = {
|
|
5775
|
+
small: 'small__pyzq972',
|
|
5776
|
+
medium: 'medium__pyzq973',
|
|
5777
|
+
large: 'large__pyzq974'
|
|
5778
|
+
};
|
|
5779
|
+
var slider = 'style__pyzq977';
|
|
5780
|
+
var SliderInput_styles_css_textClass = 'style__pyzq976';
|
|
5781
|
+
const useLogic_getNumberFromInputValue = (value)=>{
|
|
5782
|
+
const numberValue = Number(value);
|
|
5783
|
+
return Number.isNaN(numberValue) ? null : numberValue;
|
|
5784
|
+
};
|
|
5785
|
+
const useLogic_clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
|
|
5786
|
+
const getSingleValue = (value)=>{
|
|
5787
|
+
if (Array.isArray(value)) return value[0] ?? null;
|
|
5788
|
+
return value;
|
|
5789
|
+
};
|
|
5790
|
+
const SliderInput_useLogic_useLogic_useLogic = ({ min, max, value, onChange })=>{
|
|
5791
|
+
const inputId = useId();
|
|
5792
|
+
const [inputValue, setInputValue] = useState(value ?? min);
|
|
5793
|
+
const commit = useCallback((nextValue)=>{
|
|
5794
|
+
const normalizedValue = useLogic_clamp(nextValue, min, max);
|
|
5795
|
+
setInputValue(normalizedValue);
|
|
5796
|
+
onChange(normalizedValue);
|
|
5797
|
+
}, [
|
|
5798
|
+
min,
|
|
5799
|
+
max,
|
|
5800
|
+
onChange
|
|
5801
|
+
]);
|
|
5802
|
+
const onValueChange = useCallback((newValue)=>{
|
|
5803
|
+
const nextValue = getSingleValue(newValue);
|
|
5804
|
+
if (null === nextValue) return;
|
|
5805
|
+
setInputValue(nextValue);
|
|
5806
|
+
}, []);
|
|
5807
|
+
const onInputValueChange = useCallback((event)=>{
|
|
5808
|
+
const numberValue = useLogic_getNumberFromInputValue(event.target.value);
|
|
5809
|
+
if (null !== numberValue) setInputValue(numberValue);
|
|
5810
|
+
}, []);
|
|
5811
|
+
const onKeyDown = useCallback((event)=>{
|
|
5812
|
+
if ('Enter' !== event.key) return;
|
|
5813
|
+
commit(inputValue);
|
|
5814
|
+
}, [
|
|
5815
|
+
commit,
|
|
5816
|
+
inputValue
|
|
5817
|
+
]);
|
|
5818
|
+
const onConfirm = useCallback((value)=>{
|
|
5819
|
+
const nextValue = getSingleValue(value);
|
|
5820
|
+
if (null === nextValue) return;
|
|
5821
|
+
commit(nextValue);
|
|
5822
|
+
}, [
|
|
5823
|
+
commit
|
|
5824
|
+
]);
|
|
5825
|
+
useEffect(()=>{
|
|
5826
|
+
setInputValue(value ?? min);
|
|
5827
|
+
}, [
|
|
5828
|
+
value,
|
|
5829
|
+
min
|
|
5830
|
+
]);
|
|
5831
|
+
return {
|
|
5832
|
+
inputId,
|
|
5833
|
+
inputValue,
|
|
5834
|
+
onInputValueChange,
|
|
5835
|
+
onKeyDown,
|
|
5836
|
+
onValueChange,
|
|
5837
|
+
onConfirm
|
|
5838
|
+
};
|
|
5839
|
+
};
|
|
5840
|
+
function SliderInput({ min, max, onChange, value, width = 150, unit = '', size = 'medium', className, isActive, inputRef }) {
|
|
5841
|
+
const { inputId, inputValue, onInputValueChange, onKeyDown, onValueChange, onConfirm } = SliderInput_useLogic_useLogic_useLogic({
|
|
5842
|
+
min,
|
|
5843
|
+
max,
|
|
5844
|
+
value,
|
|
5845
|
+
onChange
|
|
5846
|
+
});
|
|
5847
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
5848
|
+
"data-slot": "slider-input",
|
|
5849
|
+
className: clsx(SliderInput_styles_css_container, SliderInput_styles_css_sizes[size], {
|
|
5850
|
+
[styles_css_activeClass]: isActive
|
|
5851
|
+
}, className),
|
|
5852
|
+
style: {
|
|
5853
|
+
width
|
|
5854
|
+
},
|
|
5855
|
+
children: [
|
|
5856
|
+
/*#__PURE__*/ jsx("input", {
|
|
5857
|
+
"data-slot": "slider-input-field",
|
|
5858
|
+
className: styles_css_inputClass,
|
|
5859
|
+
type: "text",
|
|
5860
|
+
id: inputId,
|
|
5861
|
+
value: inputValue,
|
|
5862
|
+
onChange: onInputValueChange,
|
|
5863
|
+
onKeyDown: onKeyDown,
|
|
5864
|
+
ref: inputRef
|
|
5865
|
+
}),
|
|
5866
|
+
unit ? /*#__PURE__*/ jsx(Typography, {
|
|
5867
|
+
className: SliderInput_styles_css_textClass,
|
|
5868
|
+
color: "disabled",
|
|
5869
|
+
variant: "caption",
|
|
5870
|
+
children: unit
|
|
5871
|
+
}) : null,
|
|
5872
|
+
/*#__PURE__*/ jsx(Slider_Slider, {
|
|
5873
|
+
min: min,
|
|
5874
|
+
max: max,
|
|
5875
|
+
value: inputValue,
|
|
5876
|
+
onValueChange: onValueChange,
|
|
5877
|
+
onValueCommit: onConfirm,
|
|
5878
|
+
className: slider
|
|
5879
|
+
})
|
|
5880
|
+
]
|
|
5881
|
+
});
|
|
5882
|
+
}
|
|
5429
5883
|
var Switch_styles_css_root = 'style__gj1ia10';
|
|
5430
5884
|
var Switch_styles_css_thumb = 'style__gj1ia11';
|
|
5431
5885
|
function Switch_Switch({ className, size = 'medium', ...props }) {
|
|
@@ -5524,4 +5978,4 @@ const ToggleGroup = ({ value, onChange, options, size, className, label, multipl
|
|
|
5524
5978
|
]
|
|
5525
5979
|
});
|
|
5526
5980
|
};
|
|
5527
|
-
export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Autocomplete, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScrollTopButton, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, Slider_Slider as Slider, Spinner, Switch_Switch as Switch, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, styles_css_colors as colors, styles_css_variants as variants, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, weights };
|
|
5981
|
+
export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Autocomplete, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScalableContainer, ScrollTopButton, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, SliderInput, Slider_Slider as Slider, Spinner, Switch_Switch as Switch, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, styles_css_colors as colors, styles_css_variants as variants, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, weights };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardLayout.stories.d.ts","sourceRoot":"","sources":["../../src/stories/DashboardLayout.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AASA,wBAOyC;AAOzC,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"DashboardLayout.stories.d.ts","sourceRoot":"","sources":["../../src/stories/DashboardLayout.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AASA,wBAOyC;AAOzC,eAAO,MAAM,OAAO,mCA4BnB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ScalableContainer } from '../components/index.ts';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: typeof ScalableContainer;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
};
|
|
10
|
+
export default _default;
|
|
11
|
+
export declare function Basic(): import("react").JSX.Element;
|
|
12
|
+
export declare function WithToolbar(): import("react").JSX.Element;
|
|
13
|
+
export declare function InsideScrollablePage(): import("react").JSX.Element;
|
|
14
|
+
//# sourceMappingURL=ScalableContainer.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScalableContainer.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ScalableContainer.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAGjD,wBAO2C;AAqB3C,wBAAgB,KAAK,gCAYpB;AAED,wBAAgB,WAAW,gCA2B1B;AAED,wBAAgB,oBAAoB,gCAoBnC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Meta } from 'storybook-react-rsbuild';
|
|
3
|
+
import { SliderInput } from '../components/index.ts';
|
|
4
|
+
declare const _default: Meta<typeof SliderInput>;
|
|
5
|
+
export default _default;
|
|
6
|
+
export declare function Demo(): React.JSX.Element;
|
|
7
|
+
export declare function Active(): React.JSX.Element;
|
|
8
|
+
//# sourceMappingURL=SliderInput.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderInput.stories.d.ts","sourceRoot":"","sources":["../../src/stories/SliderInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;wBAStC,IAAI,CAAC,OAAO,WAAW,CAAC;AAP7B,wBAO8B;AAE9B,wBAAgB,IAAI,sBAkCnB;AAED,wBAAgB,MAAM,sBAcrB"}
|
package/lib/styles.css
CHANGED
|
@@ -3895,9 +3895,8 @@ a.outline__1af895x4:hover {
|
|
|
3895
3895
|
|
|
3896
3896
|
.style__1hr0uh00 {
|
|
3897
3897
|
scroll-behavior: smooth;
|
|
3898
|
-
scrollbar-gutter: stable;
|
|
3899
3898
|
height: auto;
|
|
3900
|
-
padding: var(--spacing-
|
|
3899
|
+
padding: var(--spacing-2);
|
|
3901
3900
|
grid-area: content;
|
|
3902
3901
|
overflow: auto;
|
|
3903
3902
|
}
|
|
@@ -3924,35 +3923,48 @@ a.outline__1af895x4:hover {
|
|
|
3924
3923
|
}
|
|
3925
3924
|
|
|
3926
3925
|
.style__nvcxbd0 {
|
|
3927
|
-
padding: var(--spacing-
|
|
3926
|
+
padding: var(--spacing-2);
|
|
3928
3927
|
grid-area: header;
|
|
3929
3928
|
grid-template-columns: auto auto 1fr auto;
|
|
3930
3929
|
grid-template-areas: "trigger title content actions";
|
|
3931
3930
|
align-items: center;
|
|
3932
|
-
padding-bottom: 0;
|
|
3933
3931
|
display: grid;
|
|
3934
3932
|
}
|
|
3935
3933
|
|
|
3934
|
+
.style__nvcxbd0 > div {
|
|
3935
|
+
align-items: center;
|
|
3936
|
+
display: flex;
|
|
3937
|
+
}
|
|
3938
|
+
|
|
3936
3939
|
.style__nvcxbd1 {
|
|
3937
3940
|
justify-content: flex-end;
|
|
3938
|
-
align-items: center;
|
|
3939
3941
|
column-gap: var(--spacing-2);
|
|
3940
|
-
padding-left: var(--spacing-2);
|
|
3941
3942
|
grid-area: actions;
|
|
3942
|
-
|
|
3943
|
+
}
|
|
3944
|
+
|
|
3945
|
+
.style__nvcxbd1:not(:empty) {
|
|
3946
|
+
padding-left: var(--spacing-2);
|
|
3943
3947
|
}
|
|
3944
3948
|
|
|
3945
3949
|
.style__nvcxbd2 {
|
|
3946
|
-
padding-right: var(--spacing-2);
|
|
3947
3950
|
grid-area: trigger;
|
|
3948
3951
|
}
|
|
3949
3952
|
|
|
3953
|
+
.style__nvcxbd2:not(:empty) {
|
|
3954
|
+
padding-right: var(--spacing-2);
|
|
3955
|
+
}
|
|
3956
|
+
|
|
3950
3957
|
.style__nvcxbd3 {
|
|
3951
|
-
|
|
3958
|
+
column-gap: var(--spacing-2);
|
|
3952
3959
|
grid-area: title;
|
|
3953
3960
|
}
|
|
3954
3961
|
|
|
3962
|
+
.style__nvcxbd3:not(:empty) {
|
|
3963
|
+
padding-right: var(--spacing-2);
|
|
3964
|
+
}
|
|
3965
|
+
|
|
3955
3966
|
.style__nvcxbd4 {
|
|
3967
|
+
column-gap: var(--spacing-2);
|
|
3956
3968
|
grid-area: content;
|
|
3957
3969
|
}
|
|
3958
3970
|
|
|
@@ -4254,12 +4266,68 @@ a.outline__1af895x4:hover {
|
|
|
4254
4266
|
transform: translateX(-50%);
|
|
4255
4267
|
}
|
|
4256
4268
|
|
|
4269
|
+
.style__1pnwkko7 [data-slot="slider-track"] {
|
|
4270
|
+
height: 1px;
|
|
4271
|
+
}
|
|
4272
|
+
|
|
4257
4273
|
@media (width <= 600px) {
|
|
4258
4274
|
.style__1pnwkko0 {
|
|
4259
4275
|
width: 100%;
|
|
4260
4276
|
}
|
|
4261
4277
|
}
|
|
4262
4278
|
|
|
4279
|
+
.style__uxh2ml0 {
|
|
4280
|
+
touch-action: none;
|
|
4281
|
+
width: 100%;
|
|
4282
|
+
height: 100%;
|
|
4283
|
+
position: relative;
|
|
4284
|
+
overflow: hidden;
|
|
4285
|
+
}
|
|
4286
|
+
|
|
4287
|
+
.style__uxh2ml1 {
|
|
4288
|
+
top: 50%;
|
|
4289
|
+
right: var(--spacing-1);
|
|
4290
|
+
z-index: 1;
|
|
4291
|
+
opacity: .5;
|
|
4292
|
+
transition: opacity .2s ease-in-out;
|
|
4293
|
+
position: absolute;
|
|
4294
|
+
transform: translateY(-50%);
|
|
4295
|
+
}
|
|
4296
|
+
|
|
4297
|
+
.style__uxh2ml1:hover {
|
|
4298
|
+
opacity: 1;
|
|
4299
|
+
}
|
|
4300
|
+
|
|
4301
|
+
.style__uxh2ml2 {
|
|
4302
|
+
bottom: var(--spacing-4);
|
|
4303
|
+
z-index: 10;
|
|
4304
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
4305
|
+
border-radius: var(--borderRadius-sm);
|
|
4306
|
+
background-color: var(--colors-background-tooltip);
|
|
4307
|
+
color: var(--colors-foreground-primary);
|
|
4308
|
+
font-size: var(--fontSize-sm);
|
|
4309
|
+
opacity: 0;
|
|
4310
|
+
pointer-events: none;
|
|
4311
|
+
transition: opacity .2s ease-in-out;
|
|
4312
|
+
position: absolute;
|
|
4313
|
+
left: 50%;
|
|
4314
|
+
transform: translateX(-50%);
|
|
4315
|
+
}
|
|
4316
|
+
|
|
4317
|
+
.style__uxh2ml2[data-visible="true"] {
|
|
4318
|
+
opacity: 1;
|
|
4319
|
+
}
|
|
4320
|
+
|
|
4321
|
+
.style__uxh2ml3 {
|
|
4322
|
+
-webkit-user-select: none;
|
|
4323
|
+
user-select: none;
|
|
4324
|
+
justify-content: center;
|
|
4325
|
+
align-items: center;
|
|
4326
|
+
display: flex;
|
|
4327
|
+
position: absolute;
|
|
4328
|
+
inset: 0;
|
|
4329
|
+
}
|
|
4330
|
+
|
|
4263
4331
|
.style__1ou2vjc0 {
|
|
4264
4332
|
bottom: var(--spacing-5);
|
|
4265
4333
|
width: 40px;
|
|
@@ -4836,6 +4904,7 @@ a.outline__1af895x4:hover {
|
|
|
4836
4904
|
|
|
4837
4905
|
.style__1xiua9n1 {
|
|
4838
4906
|
width: 100%;
|
|
4907
|
+
height: 100%;
|
|
4839
4908
|
min-height: 100svh;
|
|
4840
4909
|
display: flex;
|
|
4841
4910
|
}
|
|
@@ -4942,7 +5011,7 @@ a.outline__1af895x4:hover {
|
|
|
4942
5011
|
|
|
4943
5012
|
.style__1xiua9n2[data-variant="floating"] .style__1xiua9n6 {
|
|
4944
5013
|
border: 1px solid var(--colors-border);
|
|
4945
|
-
border-radius: var(--borderRadius-
|
|
5014
|
+
border-radius: var(--borderRadius-md);
|
|
4946
5015
|
box-shadow: var(--elevation-1);
|
|
4947
5016
|
}
|
|
4948
5017
|
|
|
@@ -5542,6 +5611,79 @@ a.outline__1af895x4:hover {
|
|
|
5542
5611
|
}
|
|
5543
5612
|
}
|
|
5544
5613
|
|
|
5614
|
+
.style__pyzq970 {
|
|
5615
|
+
align-items: center;
|
|
5616
|
+
column-gap: var(--spacing-1);
|
|
5617
|
+
background: var(--colors-background-paper);
|
|
5618
|
+
border: 1px solid var(--colors-border);
|
|
5619
|
+
border-radius: var(--borderRadius-md);
|
|
5620
|
+
grid-template-columns: 1fr auto;
|
|
5621
|
+
transition: border .2s;
|
|
5622
|
+
display: grid;
|
|
5623
|
+
position: relative;
|
|
5624
|
+
}
|
|
5625
|
+
|
|
5626
|
+
.style__pyzq971 {
|
|
5627
|
+
border-color: var(--colors-primary);
|
|
5628
|
+
}
|
|
5629
|
+
|
|
5630
|
+
.small__pyzq972 {
|
|
5631
|
+
height: 28px;
|
|
5632
|
+
font-size: var(--fontSize-sm);
|
|
5633
|
+
padding-inline: var(--spacing-2);
|
|
5634
|
+
}
|
|
5635
|
+
|
|
5636
|
+
.medium__pyzq973 {
|
|
5637
|
+
height: 32px;
|
|
5638
|
+
font-size: var(--fontSize-base);
|
|
5639
|
+
padding-inline: var(--spacing-2);
|
|
5640
|
+
}
|
|
5641
|
+
|
|
5642
|
+
.large__pyzq974 {
|
|
5643
|
+
height: 36px;
|
|
5644
|
+
padding-inline: var(--spacing-3);
|
|
5645
|
+
font-size: var(--fontSize-base);
|
|
5646
|
+
}
|
|
5647
|
+
|
|
5648
|
+
.style__pyzq975 {
|
|
5649
|
+
text-align: center;
|
|
5650
|
+
width: 100%;
|
|
5651
|
+
min-width: 24px;
|
|
5652
|
+
font-size: inherit;
|
|
5653
|
+
text-wrap: nowrap;
|
|
5654
|
+
text-overflow: ellipsis;
|
|
5655
|
+
border: none;
|
|
5656
|
+
outline: none;
|
|
5657
|
+
overflow: hidden;
|
|
5658
|
+
}
|
|
5659
|
+
|
|
5660
|
+
.style__pyzq975:focus {
|
|
5661
|
+
border: none;
|
|
5662
|
+
}
|
|
5663
|
+
|
|
5664
|
+
.style__pyzq976 {
|
|
5665
|
+
font-size: inherit;
|
|
5666
|
+
}
|
|
5667
|
+
|
|
5668
|
+
.style__pyzq977 {
|
|
5669
|
+
padding-inline: var(--spacing-2);
|
|
5670
|
+
border-radius: 9999px;
|
|
5671
|
+
position: absolute;
|
|
5672
|
+
bottom: -1px;
|
|
5673
|
+
left: 50%;
|
|
5674
|
+
transform: translateX(-50%);
|
|
5675
|
+
}
|
|
5676
|
+
|
|
5677
|
+
.style__pyzq977 [data-slot="slider-track"] {
|
|
5678
|
+
height: 1px;
|
|
5679
|
+
}
|
|
5680
|
+
|
|
5681
|
+
@media (width <= 600px) {
|
|
5682
|
+
.style__pyzq970 {
|
|
5683
|
+
width: 100%;
|
|
5684
|
+
}
|
|
5685
|
+
}
|
|
5686
|
+
|
|
5545
5687
|
.style__gj1ia10 {
|
|
5546
5688
|
cursor: pointer;
|
|
5547
5689
|
border: 1px solid #0000;
|