@sytechui/slider 2.4.29
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/LICENSE +21 -0
- package/README.md +24 -0
- package/dist/chunk-CJCHSOKZ.mjs +67 -0
- package/dist/chunk-IQZHN75L.mjs +42 -0
- package/dist/chunk-M2PJK6HJ.mjs +97 -0
- package/dist/chunk-ORNKXCKK.mjs +305 -0
- package/dist/index.d.mts +10 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +518 -0
- package/dist/index.mjs +13 -0
- package/dist/slider-thumb.d.mts +9 -0
- package/dist/slider-thumb.d.ts +9 -0
- package/dist/slider-thumb.js +152 -0
- package/dist/slider-thumb.mjs +8 -0
- package/dist/slider.d.mts +15 -0
- package/dist/slider.d.ts +15 -0
- package/dist/slider.js +510 -0
- package/dist/slider.mjs +10 -0
- package/dist/use-slider-Bo_Y5OvC.d.mts +235 -0
- package/dist/use-slider-Bo_Y5OvC.d.ts +235 -0
- package/dist/use-slider-thumb.d.mts +9 -0
- package/dist/use-slider-thumb.d.ts +9 -0
- package/dist/use-slider-thumb.js +120 -0
- package/dist/use-slider-thumb.mjs +7 -0
- package/dist/use-slider.d.mts +9 -0
- package/dist/use-slider.d.ts +9 -0
- package/dist/use-slider.js +328 -0
- package/dist/use-slider.mjs +7 -0
- package/package.json +62 -0
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/slider-thumb.tsx
|
|
22
|
+
var slider_thumb_exports = {};
|
|
23
|
+
__export(slider_thumb_exports, {
|
|
24
|
+
default: () => slider_thumb_default
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(slider_thumb_exports);
|
|
27
|
+
var import_system = require("@sytechui/system");
|
|
28
|
+
var import_tooltip = require("@sytechui/tooltip");
|
|
29
|
+
var import_react_utils2 = require("@sytechui/react-utils");
|
|
30
|
+
var import_visually_hidden = require("@react-aria/visually-hidden");
|
|
31
|
+
|
|
32
|
+
// src/use-slider-thumb.ts
|
|
33
|
+
var import_slider = require("@react-aria/slider");
|
|
34
|
+
var import_react_utils = require("@sytechui/react-utils");
|
|
35
|
+
var import_react = require("react");
|
|
36
|
+
var import_interactions = require("@react-aria/interactions");
|
|
37
|
+
var import_focus = require("@react-aria/focus");
|
|
38
|
+
var import_shared_utils = require("@sytechui/shared-utils");
|
|
39
|
+
var import_i18n = require("@react-aria/i18n");
|
|
40
|
+
function useSliderThumb(props) {
|
|
41
|
+
const {
|
|
42
|
+
ref,
|
|
43
|
+
as,
|
|
44
|
+
state,
|
|
45
|
+
index,
|
|
46
|
+
name,
|
|
47
|
+
trackRef,
|
|
48
|
+
className,
|
|
49
|
+
tooltipProps,
|
|
50
|
+
isVertical,
|
|
51
|
+
showTooltip,
|
|
52
|
+
getTooltipValue,
|
|
53
|
+
formatOptions,
|
|
54
|
+
renderThumb,
|
|
55
|
+
...otherProps
|
|
56
|
+
} = props;
|
|
57
|
+
const Component = as || "div";
|
|
58
|
+
const domRef = (0, import_react_utils.useDOMRef)(ref);
|
|
59
|
+
const inputRef = (0, import_react.useRef)(null);
|
|
60
|
+
const numberFormatter = (0, import_i18n.useNumberFormatter)(formatOptions);
|
|
61
|
+
const { thumbProps, inputProps, isDragging, isFocused } = (0, import_slider.useSliderThumb)(
|
|
62
|
+
{
|
|
63
|
+
index,
|
|
64
|
+
trackRef,
|
|
65
|
+
inputRef,
|
|
66
|
+
name,
|
|
67
|
+
...otherProps
|
|
68
|
+
},
|
|
69
|
+
state
|
|
70
|
+
);
|
|
71
|
+
const { hoverProps, isHovered } = (0, import_interactions.useHover)({
|
|
72
|
+
isDisabled: state.isDisabled
|
|
73
|
+
});
|
|
74
|
+
const { focusProps, isFocusVisible } = (0, import_focus.useFocusRing)();
|
|
75
|
+
const { pressProps, isPressed } = (0, import_interactions.usePress)({
|
|
76
|
+
isDisabled: state.isDisabled
|
|
77
|
+
});
|
|
78
|
+
const getThumbProps = (props2 = {}) => {
|
|
79
|
+
return {
|
|
80
|
+
ref: domRef,
|
|
81
|
+
"data-slot": "thumb",
|
|
82
|
+
"data-hover": (0, import_shared_utils.dataAttr)(isHovered),
|
|
83
|
+
"data-pressed": (0, import_shared_utils.dataAttr)(isPressed),
|
|
84
|
+
"data-dragging": (0, import_shared_utils.dataAttr)(isDragging),
|
|
85
|
+
"data-focused": (0, import_shared_utils.dataAttr)(isFocused),
|
|
86
|
+
"data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
|
|
87
|
+
"aria-label": props2["aria-label"] || `Slider thumb ${index !== void 0 ? `${index + 1}` : ""}`,
|
|
88
|
+
...(0, import_shared_utils.mergeProps)(thumbProps, pressProps, hoverProps, otherProps),
|
|
89
|
+
className,
|
|
90
|
+
...props2
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
const getTooltipProps = () => {
|
|
94
|
+
const stateValue = (tooltipProps == null ? void 0 : tooltipProps.content) ? tooltipProps.content : getTooltipValue ? state.values.length === 1 ? getTooltipValue(state.values[index != null ? index : 0]) : getTooltipValue(state.values, index != null ? index : 0) : state.values[index != null ? index : 0];
|
|
95
|
+
const value = numberFormatter && typeof stateValue === "number" ? numberFormatter.format(stateValue) : stateValue;
|
|
96
|
+
return {
|
|
97
|
+
...tooltipProps,
|
|
98
|
+
placement: (tooltipProps == null ? void 0 : tooltipProps.placement) ? tooltipProps == null ? void 0 : tooltipProps.placement : isVertical ? "right" : "top",
|
|
99
|
+
content: (tooltipProps == null ? void 0 : tooltipProps.content) ? tooltipProps == null ? void 0 : tooltipProps.content : value,
|
|
100
|
+
updatePositionDeps: [isDragging, isHovered, isFocused, isFocusVisible, value],
|
|
101
|
+
isOpen: (tooltipProps == null ? void 0 : tooltipProps.isOpen) !== void 0 ? tooltipProps == null ? void 0 : tooltipProps.isOpen : isHovered || isDragging || isFocused || isFocusVisible,
|
|
102
|
+
role: "tooltip",
|
|
103
|
+
"aria-label": `Current value: ${value}`
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
const getInputProps = (props2 = {}) => {
|
|
107
|
+
return {
|
|
108
|
+
ref: inputRef,
|
|
109
|
+
...(0, import_shared_utils.mergeProps)(inputProps, focusProps),
|
|
110
|
+
...props2
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
return {
|
|
114
|
+
Component,
|
|
115
|
+
index,
|
|
116
|
+
showTooltip,
|
|
117
|
+
renderThumb,
|
|
118
|
+
getThumbProps,
|
|
119
|
+
getTooltipProps,
|
|
120
|
+
getInputProps
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// src/slider-thumb.tsx
|
|
125
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
126
|
+
var SliderThumb = (0, import_system.forwardRef)((props, ref) => {
|
|
127
|
+
const {
|
|
128
|
+
Component,
|
|
129
|
+
index,
|
|
130
|
+
renderThumb,
|
|
131
|
+
showTooltip,
|
|
132
|
+
getTooltipProps,
|
|
133
|
+
getThumbProps,
|
|
134
|
+
getInputProps
|
|
135
|
+
} = useSliderThumb({
|
|
136
|
+
...props,
|
|
137
|
+
ref
|
|
138
|
+
});
|
|
139
|
+
const thumbProps = {
|
|
140
|
+
...getThumbProps(),
|
|
141
|
+
index,
|
|
142
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...getInputProps() }) })
|
|
143
|
+
};
|
|
144
|
+
const content = (0, import_react_utils2.renderFn)({
|
|
145
|
+
Component,
|
|
146
|
+
props: thumbProps,
|
|
147
|
+
renderCustom: renderThumb
|
|
148
|
+
});
|
|
149
|
+
return showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip, { ...getTooltipProps(), children: content }) : content;
|
|
150
|
+
});
|
|
151
|
+
SliderThumb.displayName = "HeroUI.SliderThumb";
|
|
152
|
+
var slider_thumb_default = SliderThumb;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as _sytechui_system from '@sytechui/system';
|
|
2
|
+
import { U as UseSliderProps } from './use-slider-Bo_Y5OvC.mjs';
|
|
3
|
+
import 'react';
|
|
4
|
+
import '@react-stately/slider';
|
|
5
|
+
import '@sytechui/theme';
|
|
6
|
+
import '@sytechui/react-utils';
|
|
7
|
+
import '@react-aria/slider';
|
|
8
|
+
import '@sytechui/tooltip';
|
|
9
|
+
import '@react-types/shared';
|
|
10
|
+
|
|
11
|
+
interface SliderProps extends Omit<UseSliderProps, "isVertical" | "hasMarks" | "hasSingleThumb"> {
|
|
12
|
+
}
|
|
13
|
+
declare const Slider: _sytechui_system.InternalForwardRefRenderFunction<"div", SliderProps, never>;
|
|
14
|
+
|
|
15
|
+
export { type SliderProps, Slider as default };
|
package/dist/slider.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as _sytechui_system from '@sytechui/system';
|
|
2
|
+
import { U as UseSliderProps } from './use-slider-Bo_Y5OvC.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
import '@react-stately/slider';
|
|
5
|
+
import '@sytechui/theme';
|
|
6
|
+
import '@sytechui/react-utils';
|
|
7
|
+
import '@react-aria/slider';
|
|
8
|
+
import '@sytechui/tooltip';
|
|
9
|
+
import '@react-types/shared';
|
|
10
|
+
|
|
11
|
+
interface SliderProps extends Omit<UseSliderProps, "isVertical" | "hasMarks" | "hasSingleThumb"> {
|
|
12
|
+
}
|
|
13
|
+
declare const Slider: _sytechui_system.InternalForwardRefRenderFunction<"div", SliderProps, never>;
|
|
14
|
+
|
|
15
|
+
export { type SliderProps, Slider as default };
|