@canvas-components/react-components 0.1.1 → 0.1.5

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.
Files changed (8) hide show
  1. package/README.md +168 -0
  2. package/dist/index.cjs +936 -309
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +286 -2
  5. package/dist/index.d.ts +286 -2
  6. package/dist/index.js +712 -110
  7. package/dist/index.js.map +1 -1
  8. package/package.json +7 -3
package/dist/index.cjs CHANGED
@@ -1,18 +1,28 @@
1
1
  'use strict';
2
2
 
3
- var react = require('react');
3
+ var React = require('react');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var reactDom = require('react-dom');
6
6
 
7
- // src/components/checkbox/index.tsx
8
-
9
- // src/shared/class-names.ts
10
- function joinClassNames(...values) {
11
- return values.filter(Boolean).join(" ");
7
+ function _interopNamespace(e) {
8
+ if (e && e.__esModule) return e;
9
+ var n = Object.create(null);
10
+ if (e) {
11
+ Object.keys(e).forEach(function (k) {
12
+ if (k !== 'default') {
13
+ var d = Object.getOwnPropertyDescriptor(e, k);
14
+ Object.defineProperty(n, k, d.get ? d : {
15
+ enumerable: true,
16
+ get: function () { return e[k]; }
17
+ });
18
+ }
19
+ });
20
+ }
21
+ n.default = e;
22
+ return Object.freeze(n);
12
23
  }
13
24
 
14
- // src/shared/prefix.ts
15
- var REACT_COMPONENT_PREFIX = "canvas-react";
25
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
16
26
 
17
27
  // #style-inject:#style-inject
18
28
  function styleInject(css, { insertAt } = {}) {
@@ -36,9 +46,20 @@ function styleInject(css, { insertAt } = {}) {
36
46
  }
37
47
  }
38
48
 
49
+ // src/styles/variables.css
50
+ styleInject(":root {\n --canvas-react-color-primary: #1677ff;\n --canvas-react-color-primary-hover: #4096ff;\n --canvas-react-color-border: #d9d9d9;\n --canvas-react-color-border-strong: #bfbfbf;\n --canvas-react-color-text: #1f2937;\n --canvas-react-color-text-muted: #6b7280;\n --canvas-react-color-bg: #ffffff;\n --canvas-react-color-bg-soft: #f5f5f5;\n --canvas-react-color-bg-hover: #f3f4f6;\n --canvas-react-color-bg-active: #e6f4ff;\n --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n --canvas-react-radius-sm: 6px;\n --canvas-react-radius-md: 8px;\n --canvas-react-control-height: 32px;\n --canvas-react-font-size: 14px;\n --canvas-react-control-padding-inline: 11px;\n --canvas-react-control-padding-block: 0px;\n --canvas-react-content-zoom: 1;\n}\n");
51
+
52
+ // src/shared/class-names.ts
53
+ function joinClassNames(...values) {
54
+ return values.filter(Boolean).join(" ");
55
+ }
56
+
57
+ // src/shared/prefix.ts
58
+ var REACT_COMPONENT_PREFIX = "canvas-react";
59
+
39
60
  // src/components/checkbox/style.css
40
61
  styleInject('@import "../../styles/variables.css";\n.canvas-react-checkbox {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n user-select: none;\n}\n.canvas-react-checkbox-disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-checkbox-input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-checkbox-box {\n position: relative;\n flex: none;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border-strong);\n border-radius: 4px;\n background: var(--canvas-react-color-bg);\n transition:\n border-color 0.2s ease,\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n}\n.canvas-react-checkbox:hover .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-checkbox-input:focus-visible + .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box,\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-checkbox-box::after {\n position: absolute;\n content: "";\n opacity: 0;\n box-sizing: border-box;\n transform: scale(0);\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box::after {\n top: 50%;\n left: 22%;\n width: 5.5px;\n height: 9px;\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n transform: translateY(-58%) rotate(45deg) scale(1);\n transform-origin: center;\n opacity: 1;\n}\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box::after {\n top: 50%;\n left: 50%;\n width: 8px;\n border-bottom: 2px solid #fff;\n transform: translate(-50%, -50%);\n opacity: 1;\n}\n.canvas-react-checkbox-label {\n min-width: 0;\n}\n');
41
- var ReactCheckbox = react.forwardRef(
62
+ var ReactCheckbox = React.forwardRef(
42
63
  function ReactCheckbox2(props, ref) {
43
64
  const {
44
65
  checked,
@@ -49,14 +70,14 @@ var ReactCheckbox = react.forwardRef(
49
70
  style,
50
71
  ...restProps
51
72
  } = props;
52
- const inputRef = react.useRef(null);
53
- react.useEffect(() => {
73
+ const inputRef = React.useRef(null);
74
+ React.useEffect(() => {
54
75
  if (!inputRef.current) {
55
76
  return;
56
77
  }
57
78
  inputRef.current.indeterminate = indeterminate;
58
79
  }, [indeterminate]);
59
- react.useImperativeHandle(ref, () => ({
80
+ React.useImperativeHandle(ref, () => ({
60
81
  focus: () => inputRef.current?.focus(),
61
82
  blur: () => inputRef.current?.blur(),
62
83
  input: inputRef.current
@@ -93,8 +114,8 @@ var ReactCheckbox = react.forwardRef(
93
114
  );
94
115
 
95
116
  // src/components/input/style.css
96
- styleInject('@import "../../styles/variables.css";\n.canvas-react-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0 11px;\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n}\n.canvas-react-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-input-suffix {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding-right: 11px;\n}\n.canvas-react-input-clear {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-input-affix-wrapper:hover .canvas-react-input-clear,\n.canvas-react-input-affix-wrapper:focus-within .canvas-react-input-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-input-clear:hover {\n color: #6b7280;\n transform: rotate(90deg);\n}\n.canvas-react-input-clear-icon,\n.canvas-react-input-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-input-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-input-clear-icon::before {\n transform: rotate(90deg);\n}\n');
97
- var ReactInput = react.forwardRef(
117
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n}\n.canvas-react-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-input-suffix {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-input-clear {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-input-affix-wrapper:hover .canvas-react-input-clear,\n.canvas-react-input-affix-wrapper:focus-within .canvas-react-input-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-input-clear:hover {\n color: #6b7280;\n transform: rotate(90deg);\n}\n.canvas-react-input-clear-icon,\n.canvas-react-input-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-input-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-input-clear-icon::before {\n transform: rotate(90deg);\n}\n');
118
+ var ReactInput = React.forwardRef(
98
119
  function ReactInput2(props, ref) {
99
120
  const {
100
121
  allowClear = true,
@@ -175,9 +196,113 @@ var ReactInput = react.forwardRef(
175
196
  }
176
197
  }
177
198
  );
199
+ var DEFAULT_CONTENT_SCALE = {
200
+ scale: 1
201
+ };
202
+ var ReactContentScaleContext = React.createContext(DEFAULT_CONTENT_SCALE);
203
+ function ReactContentScaleProvider(props) {
204
+ const { children, scale = 1 } = props;
205
+ const value = React.useMemo(() => {
206
+ const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
207
+ return { scale: nextScale };
208
+ }, [scale]);
209
+ return /* @__PURE__ */ jsxRuntime.jsx(ReactContentScaleContext.Provider, { value, children });
210
+ }
211
+ function useReactContentScale() {
212
+ return React.useContext(ReactContentScaleContext);
213
+ }
214
+ function toContentLayoutSize(size, scale) {
215
+ const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
216
+ if (nextScale === 1) {
217
+ return size;
218
+ }
219
+ return size / nextScale;
220
+ }
221
+ function useReactTransition(options) {
222
+ const {
223
+ appear = true,
224
+ duration = 0,
225
+ name = "canvas-react-transition",
226
+ show
227
+ } = options;
228
+ const enterDuration = resolveDuration(duration, "enter");
229
+ const leaveDuration = resolveDuration(duration, "leave");
230
+ const previousShowRef = React.useRef(show);
231
+ const [rendered, setRendered] = React.useState(show);
232
+ const [phase, setPhase] = React.useState(() => {
233
+ if (!show) {
234
+ return "leave-to";
235
+ }
236
+ return appear ? "enter-from" : "entered";
237
+ });
238
+ React.useLayoutEffect(() => {
239
+ if (previousShowRef.current === show) {
240
+ return;
241
+ }
242
+ previousShowRef.current = show;
243
+ if (show) {
244
+ setRendered(true);
245
+ setPhase("enter-from");
246
+ return;
247
+ }
248
+ setPhase("leave-from");
249
+ }, [show]);
250
+ React.useLayoutEffect(() => {
251
+ let firstFrameId = null;
252
+ let secondFrameId = null;
253
+ let timerId = null;
254
+ if (phase === "enter-from" || phase === "leave-from") {
255
+ firstFrameId = window.requestAnimationFrame(() => {
256
+ secondFrameId = window.requestAnimationFrame(() => {
257
+ setPhase(phase === "enter-from" ? "enter-to" : "leave-to");
258
+ });
259
+ });
260
+ } else if (phase === "enter-to") {
261
+ timerId = window.setTimeout(() => {
262
+ setPhase("entered");
263
+ }, enterDuration);
264
+ } else if (phase === "leave-to" && rendered) {
265
+ timerId = window.setTimeout(() => {
266
+ setRendered(false);
267
+ }, leaveDuration);
268
+ }
269
+ return () => {
270
+ if (firstFrameId !== null) {
271
+ window.cancelAnimationFrame(firstFrameId);
272
+ }
273
+ if (secondFrameId !== null) {
274
+ window.cancelAnimationFrame(secondFrameId);
275
+ }
276
+ if (timerId !== null) {
277
+ window.clearTimeout(timerId);
278
+ }
279
+ };
280
+ }, [enterDuration, leaveDuration, phase, rendered]);
281
+ return {
282
+ className: resolveTransitionClassName(name, phase),
283
+ phase,
284
+ rendered
285
+ };
286
+ }
287
+ function ReactTransition(props) {
288
+ const { children, ...options } = props;
289
+ const state = useReactTransition(options);
290
+ return state.rendered ? children(state) : null;
291
+ }
292
+ function resolveTransitionClassName(name, phase) {
293
+ if (phase === "entered") {
294
+ return void 0;
295
+ }
296
+ const direction = phase.startsWith("enter") ? "enter" : "leave";
297
+ return `${name}-${phase} ${name}-${direction}-active`;
298
+ }
299
+ function resolveDuration(duration, direction) {
300
+ const value = typeof duration === "number" ? duration : duration[direction] ?? 0;
301
+ return Number.isFinite(value) && value > 0 ? value : 0;
302
+ }
178
303
 
179
304
  // src/components/popup/style.css
180
- styleInject('@import "../../styles/variables.css";\n.canvas-react-popup {\n position: fixed;\n z-index: 1200;\n box-sizing: border-box;\n pointer-events: auto;\n}\n.canvas-react-popup-surface {\n overflow: hidden;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-md);\n background: var(--canvas-react-color-bg);\n box-shadow: var(--canvas-react-shadow-popup);\n transform-origin: top center;\n transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.canvas-react-popup-surface-enter,\n.canvas-react-popup-surface-leave {\n opacity: 0;\n transform: translateY(-6px) scale(0.98);\n}\n.canvas-react-popup-leave {\n pointer-events: none;\n}\n.canvas-react-popup-surface-entered {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n');
305
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-popup {\n position: fixed;\n z-index: 1200;\n box-sizing: border-box;\n pointer-events: auto;\n}\n.canvas-react-popup-surface {\n overflow: hidden;\n border: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-radius: var(--canvas-react-radius-md, 8px);\n background: var(--canvas-react-color-bg, #ffffff);\n box-shadow: var( --canvas-react-shadow-popup, 0 8px 24px rgba(15, 23, 42, 0.16) );\n transform-origin: top center;\n}\n.canvas-react-popup-surface-enter-active,\n.canvas-react-popup-surface-leave-active {\n transition: opacity 0.18s ease-out, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.canvas-react-popup-surface-enter-from,\n.canvas-react-popup-surface-leave-to {\n opacity: 0;\n transform: translateY(-6px) scale(0.98);\n}\n.canvas-react-popup-surface-enter-to,\n.canvas-react-popup-surface-leave-from {\n opacity: 1;\n transform: translate(0) scale(1);\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popup-surface {\n transform-origin: bottom center;\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popup-surface-enter-from,\n.canvas-react-popup[data-placement^=top] .canvas-react-popup-surface-leave-to {\n transform: translateY(6px) scale(0.98);\n}\n.canvas-react-popup[data-placement^=bottom] .canvas-react-popup-surface {\n transform-origin: top center;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popup-surface {\n transform-origin: center right;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popup-surface-enter-from,\n.canvas-react-popup[data-placement^=left] .canvas-react-popup-surface-leave-to {\n transform: translateX(6px) scale(0.98);\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popup-surface {\n transform-origin: center left;\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popup-surface-enter-from,\n.canvas-react-popup[data-placement^=right] .canvas-react-popup-surface-leave-to {\n transform: translateX(-6px) scale(0.98);\n}\n.canvas-react-popup-leave {\n pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-popup-surface-enter-active,\n .canvas-react-popup-surface-leave-active {\n transition-duration: 0.01ms;\n }\n}\n');
181
306
  var POPUP_MOTION_DURATION = 180;
182
307
  function ReactPopup(props) {
183
308
  const {
@@ -196,41 +321,16 @@ function ReactPopup(props) {
196
321
  surfaceStyle,
197
322
  zIndex = 1200
198
323
  } = props;
199
- const [position, setPosition] = react.useState(null);
200
- const [rendered, setRendered] = react.useState(open);
201
- const [motionState, setMotionState] = react.useState(
202
- open ? "entered" : "leave"
203
- );
204
- const surfaceRef = react.useRef(null);
205
- const timerRef = react.useRef(null);
206
- react.useEffect(() => {
207
- if (timerRef.current != null) {
208
- window.clearTimeout(timerRef.current);
209
- timerRef.current = null;
210
- }
211
- if (open) {
212
- setRendered(true);
213
- setMotionState("enter");
214
- const frameId = window.requestAnimationFrame(() => {
215
- setMotionState("entered");
216
- });
217
- return () => {
218
- window.cancelAnimationFrame(frameId);
219
- };
220
- }
221
- setMotionState("leave");
222
- timerRef.current = window.setTimeout(() => {
223
- setRendered(false);
224
- timerRef.current = null;
225
- }, POPUP_MOTION_DURATION);
226
- return () => {
227
- if (timerRef.current != null) {
228
- window.clearTimeout(timerRef.current);
229
- timerRef.current = null;
230
- }
231
- };
232
- }, [open]);
233
- react.useLayoutEffect(() => {
324
+ const { scale: contentScale } = useReactContentScale();
325
+ const transition = useReactTransition({
326
+ duration: POPUP_MOTION_DURATION,
327
+ name: `${REACT_COMPONENT_PREFIX}-popup-surface`,
328
+ show: open
329
+ });
330
+ const { rendered } = transition;
331
+ const [position, setPosition] = React.useState(null);
332
+ const surfaceRef = React.useRef(null);
333
+ React.useLayoutEffect(() => {
234
334
  if (!rendered) {
235
335
  return;
236
336
  }
@@ -241,14 +341,15 @@ function ReactPopup(props) {
241
341
  }
242
342
  const nextPosition = resolvePopupPosition({
243
343
  anchor: nextAnchor,
344
+ contentScale,
244
345
  matchAnchorWidth,
245
346
  minWidth,
246
347
  offset,
247
348
  placement,
248
- popupRect: resolvePopupSurfaceRect(surfaceRef.current)
349
+ popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
249
350
  });
250
351
  setPosition((prev) => {
251
- if (prev?.left === nextPosition.left && prev?.top === nextPosition.top && prev?.width === nextPosition.width && prev?.minWidth === nextPosition.minWidth) {
352
+ if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
252
353
  return prev;
253
354
  }
254
355
  return nextPosition;
@@ -274,13 +375,14 @@ function ReactPopup(props) {
274
375
  }, [
275
376
  anchorRect,
276
377
  anchorRef,
378
+ contentScale,
277
379
  matchAnchorWidth,
278
380
  minWidth,
279
381
  offset,
280
382
  rendered,
281
383
  placement
282
384
  ]);
283
- react.useLayoutEffect(() => {
385
+ React.useLayoutEffect(() => {
284
386
  if (!rendered || !position || !surfaceRef.current) {
285
387
  return;
286
388
  }
@@ -291,14 +393,15 @@ function ReactPopup(props) {
291
393
  }
292
394
  const nextPosition = resolvePopupPosition({
293
395
  anchor: nextAnchor,
396
+ contentScale,
294
397
  matchAnchorWidth,
295
398
  minWidth,
296
399
  offset,
297
400
  placement,
298
- popupRect: resolvePopupSurfaceRect(surfaceRef.current)
401
+ popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
299
402
  });
300
403
  setPosition((prev) => {
301
- if (prev?.left === nextPosition.left && prev?.top === nextPosition.top && prev?.width === nextPosition.width && prev?.minWidth === nextPosition.minWidth) {
404
+ if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
302
405
  return prev;
303
406
  }
304
407
  return nextPosition;
@@ -315,6 +418,7 @@ function ReactPopup(props) {
315
418
  }, [
316
419
  anchorRect,
317
420
  anchorRef,
421
+ contentScale,
318
422
  matchAnchorWidth,
319
423
  minWidth,
320
424
  offset,
@@ -322,7 +426,7 @@ function ReactPopup(props) {
322
426
  placement,
323
427
  position
324
428
  ]);
325
- react.useEffect(() => {
429
+ React.useEffect(() => {
326
430
  if (!rendered) {
327
431
  return;
328
432
  }
@@ -351,27 +455,33 @@ function ReactPopup(props) {
351
455
  if (!rendered || !position) {
352
456
  return null;
353
457
  }
458
+ const contentScaleStyle = contentScale !== 1 ? {
459
+ transform: `scale(${contentScale})`,
460
+ transformOrigin: "top left"
461
+ } : void 0;
354
462
  return reactDom.createPortal(
355
463
  /* @__PURE__ */ jsxRuntime.jsx(
356
464
  "div",
357
465
  {
358
466
  className: joinClassNames(
359
467
  `${REACT_COMPONENT_PREFIX}-popup`,
360
- `${REACT_COMPONENT_PREFIX}-popup-${motionState}`,
468
+ transition.phase.startsWith("leave") && `${REACT_COMPONENT_PREFIX}-popup-leave`,
361
469
  className
362
470
  ),
363
471
  style: {
364
- ...position,
472
+ ...position.style,
365
473
  ...style,
474
+ ...contentScaleStyle,
366
475
  zIndex
367
476
  },
477
+ "data-placement": position.placement,
368
478
  children: /* @__PURE__ */ jsxRuntime.jsx(
369
479
  "div",
370
480
  {
371
481
  ref: surfaceRef,
372
482
  className: joinClassNames(
373
483
  `${REACT_COMPONENT_PREFIX}-popup-surface`,
374
- `${REACT_COMPONENT_PREFIX}-popup-surface-${motionState}`,
484
+ transition.className,
375
485
  surfaceClassName
376
486
  ),
377
487
  style: surfaceStyle,
@@ -384,12 +494,25 @@ function ReactPopup(props) {
384
494
  );
385
495
  }
386
496
  function resolvePopupPosition(params) {
387
- const { anchor, matchAnchorWidth, minWidth, offset, placement, popupRect } = params;
497
+ const {
498
+ anchor,
499
+ contentScale,
500
+ matchAnchorWidth,
501
+ minWidth,
502
+ offset,
503
+ placement,
504
+ popupRect
505
+ } = params;
388
506
  const margin = 8;
389
507
  const viewportWidth = window.innerWidth;
390
508
  const viewportHeight = window.innerHeight;
391
- const preferredWidth = popupRect?.width ?? Math.max(minWidth ?? 0, matchAnchorWidth ? anchor.width : 0);
392
- const popupWidth = preferredWidth;
509
+ const layoutMinWidth = typeof minWidth === "number" ? minWidth : void 0;
510
+ const layoutAnchorWidth = toContentLayoutSize(anchor.width, contentScale);
511
+ const preferredVisualWidth = popupRect?.width ?? Math.max(
512
+ (minWidth ?? 0) * contentScale,
513
+ matchAnchorWidth ? anchor.width : 0
514
+ );
515
+ const popupWidth = preferredVisualWidth;
393
516
  const popupHeight = popupRect?.height ?? 0;
394
517
  const isHorizontalPlacement = placement.startsWith("left") || placement.startsWith("right");
395
518
  const preferredVertical = placement.startsWith("top") ? "top" : placement.endsWith("Top") ? "top" : "bottom";
@@ -429,12 +552,32 @@ function resolvePopupPosition(params) {
429
552
  const maxLeft = Math.max(margin, viewportWidth - popupWidth - margin);
430
553
  const left = clamp(rawLeft, margin, maxLeft);
431
554
  return {
432
- left,
433
- top,
434
- width: matchAnchorWidth ? anchor.width : void 0,
435
- minWidth: minWidth ?? (matchAnchorWidth ? anchor.width : void 0)
555
+ placement: resolvePlacement({
556
+ horizontal: resolvedHorizontal,
557
+ isHorizontalPlacement,
558
+ vertical: resolvedVertical
559
+ }),
560
+ style: {
561
+ left,
562
+ top,
563
+ width: matchAnchorWidth ? layoutAnchorWidth : void 0,
564
+ minWidth: layoutMinWidth ?? (matchAnchorWidth ? layoutAnchorWidth : void 0)
565
+ }
436
566
  };
437
567
  }
568
+ function resolvePlacement(params) {
569
+ const { horizontal, isHorizontalPlacement, vertical } = params;
570
+ if (isHorizontalPlacement) {
571
+ if (horizontal === "left") {
572
+ return vertical === "top" ? "leftTop" : "leftBottom";
573
+ }
574
+ return vertical === "top" ? "rightTop" : "rightBottom";
575
+ }
576
+ if (vertical === "top") {
577
+ return horizontal === "left" ? "topLeft" : "topRight";
578
+ }
579
+ return horizontal === "left" ? "bottomLeft" : "bottomRight";
580
+ }
438
581
  function resolveRawTop(params) {
439
582
  const { anchor, isHorizontalPlacement, offset, popupHeight, vertical } = params;
440
583
  if (isHorizontalPlacement) {
@@ -470,18 +613,19 @@ function resolveAnchorRect(element) {
470
613
  height: rect.height
471
614
  };
472
615
  }
473
- function resolvePopupSurfaceRect(element) {
616
+ function resolvePopupSurfaceRect(element, contentScale = 1) {
474
617
  if (!element) {
475
618
  return null;
476
619
  }
620
+ const scale = typeof contentScale === "number" && Number.isFinite(contentScale) && contentScale > 0 ? contentScale : 1;
477
621
  return {
478
- height: element.offsetHeight,
479
- width: element.offsetWidth
622
+ height: element.offsetHeight * scale,
623
+ width: element.offsetWidth * scale
480
624
  };
481
625
  }
482
626
 
483
627
  // src/components/color/style.css
484
- styleInject(".canvas-react-color-wrap {\n display: inline-flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n.canvas-react-color {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n min-height: 0;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n}\n.canvas-react-color:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n color: #9ca3af;\n background: var(--canvas-react-color-bg-soft);\n cursor: not-allowed;\n}\n.canvas-react-color-preview {\n flex: 0 0 24px;\n height: 24px;\n margin-left: 3px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n}\n.canvas-react-color-input-wrap {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: 0;\n border: 0;\n box-shadow: none;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-color-input {\n cursor: pointer;\n text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n flex: 0 0 auto;\n width: 7px;\n height: 7px;\n margin-right: 11px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: rotate(45deg) translateY(-2px);\n transition: transform 0.18s ease;\n}\n.canvas-react-color-arrow-open {\n transform: rotate(225deg) translate(-1px, -1px);\n}\n.canvas-react-color-dropdown {\n overflow: hidden;\n}\n.canvas-react-color-panel {\n padding: 12px;\n box-sizing: border-box;\n}\n.canvas-react-color-saturation {\n position: relative;\n height: 150px;\n overflow: hidden;\n border-radius: 6px;\n cursor: crosshair;\n background-image:\n linear-gradient(\n to top,\n #000,\n transparent),\n linear-gradient(\n to right,\n #fff,\n transparent);\n touch-action: none;\n}\n.canvas-react-color-saturation-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border: 2px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.canvas-react-color-controls {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 12px;\n}\n.canvas-react-color-current {\n flex: 0 0 28px;\n height: 28px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 50%;\n}\n.canvas-react-color-hue {\n width: 100%;\n height: 12px;\n margin: 0;\n appearance: none;\n border-radius: 999px;\n background:\n linear-gradient(\n to right,\n #f00,\n #ff0,\n #0f0,\n #0ff,\n #00f,\n #f0f,\n #f00);\n cursor: pointer;\n}\n.canvas-react-color-hue::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n appearance: none;\n border: 2px solid #fff;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);\n}\n.canvas-react-color-value-row {\n display: grid;\n grid-template-columns: 36px 1fr;\n align-items: center;\n gap: 8px;\n margin-top: 12px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-color-value-row .canvas-react-input-affix-wrapper {\n height: 28px;\n}\n.canvas-react-color-presets {\n display: grid;\n grid-template-columns: repeat(8, 20px);\n gap: 7px;\n margin-top: 12px;\n}\n.canvas-react-color-preset {\n width: 20px;\n height: 20px;\n padding: 0;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.16s ease, box-shadow 0.16s ease;\n}\n.canvas-react-color-preset:hover {\n transform: scale(1.12);\n}\n.canvas-react-color-preset-selected {\n box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--canvas-react-color-primary);\n}\n");
628
+ styleInject(".canvas-react-color-wrap {\n display: inline-flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n.canvas-react-color {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n min-height: 0;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n}\n.canvas-react-color:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n color: #9ca3af;\n background: var(--canvas-react-color-bg-soft);\n cursor: not-allowed;\n}\n.canvas-react-color-preview {\n flex: 0 0 auto;\n width: calc(24px * var(--canvas-react-content-zoom, 1));\n height: calc(24px * var(--canvas-react-content-zoom, 1));\n margin-left: 3px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n}\n.canvas-react-color-input-wrap {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: 0;\n border: 0;\n box-shadow: none;\n}\n.canvas-react-color .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-color-input {\n cursor: pointer;\n text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n flex: 0 0 auto;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n margin-right: var(--canvas-react-control-padding-inline, 11px);\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: rotate(45deg) translateY(-2px);\n transition: transform 0.18s ease;\n}\n.canvas-react-color-arrow-open {\n transform: rotate(225deg) translate(-1px, -1px);\n}\n.canvas-react-color-dropdown {\n overflow: hidden;\n}\n.canvas-react-color-panel {\n padding: 12px;\n box-sizing: border-box;\n}\n.canvas-react-color-saturation {\n position: relative;\n height: 150px;\n overflow: hidden;\n border-radius: 6px;\n cursor: crosshair;\n background-image:\n linear-gradient(\n to top,\n #000,\n transparent),\n linear-gradient(\n to right,\n #fff,\n transparent);\n touch-action: none;\n}\n.canvas-react-color-saturation-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border: 2px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.canvas-react-color-controls {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 12px;\n}\n.canvas-react-color-current {\n flex: 0 0 28px;\n height: 28px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 50%;\n}\n.canvas-react-color-hue {\n width: 100%;\n height: 12px;\n margin: 0;\n appearance: none;\n border-radius: 999px;\n background:\n linear-gradient(\n to right,\n #f00,\n #ff0,\n #0f0,\n #0ff,\n #00f,\n #f0f,\n #f00);\n cursor: pointer;\n}\n.canvas-react-color-hue::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n appearance: none;\n border: 2px solid #fff;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);\n}\n.canvas-react-color-value-row {\n display: grid;\n grid-template-columns: 36px 1fr;\n align-items: center;\n gap: 8px;\n margin-top: 12px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-color-value-row .canvas-react-input-affix-wrapper {\n height: 28px;\n}\n.canvas-react-color-presets {\n display: grid;\n grid-template-columns: repeat(8, 20px);\n gap: 7px;\n margin-top: 12px;\n}\n.canvas-react-color-preset {\n width: 20px;\n height: 20px;\n padding: 0;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.16s ease, box-shadow 0.16s ease;\n}\n.canvas-react-color-preset:hover {\n transform: scale(1.12);\n}\n.canvas-react-color-preset-selected {\n box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--canvas-react-color-primary);\n}\n");
485
629
  var DEFAULT_COLOR = "#1677ff";
486
630
  var PRESET_COLORS = [
487
631
  "#ff4d4f",
@@ -497,7 +641,7 @@ var PRESET_COLORS = [
497
641
  "#8c8c8c",
498
642
  "#ffffff"
499
643
  ];
500
- var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
644
+ var ReactColorPicker = React.forwardRef(function ReactColorPicker2(props, ref) {
501
645
  const {
502
646
  autoFocus,
503
647
  className,
@@ -511,22 +655,23 @@ var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
511
655
  presets = PRESET_COLORS,
512
656
  style,
513
657
  value,
658
+ showArrow = true,
514
659
  ...restProps
515
660
  } = props;
516
- const triggerRef = react.useRef(null);
517
- const inputRef = react.useRef(null);
518
- const popupRef = react.useRef(null);
661
+ const triggerRef = React.useRef(null);
662
+ const inputRef = React.useRef(null);
663
+ const popupRef = React.useRef(null);
519
664
  const resolvedValue = normalizeHexColor(value) ?? DEFAULT_COLOR;
520
- const [open, setOpen] = react.useState(false);
521
- const [draftValue, setDraftValue] = react.useState(resolvedValue);
522
- const [hexText, setHexText] = react.useState(resolvedValue.toUpperCase());
523
- const hsv = react.useMemo(() => hexToHsv(draftValue), [draftValue]);
524
- react.useImperativeHandle(ref, () => inputRef.current);
525
- react.useEffect(() => {
665
+ const [open, setOpen] = React.useState(false);
666
+ const [draftValue, setDraftValue] = React.useState(resolvedValue);
667
+ const [hexText, setHexText] = React.useState(resolvedValue.toUpperCase());
668
+ const hsv = React.useMemo(() => hexToHsv(draftValue), [draftValue]);
669
+ React.useImperativeHandle(ref, () => inputRef.current);
670
+ React.useEffect(() => {
526
671
  setDraftValue(resolvedValue);
527
672
  setHexText(resolvedValue.toUpperCase());
528
673
  }, [resolvedValue]);
529
- react.useEffect(() => {
674
+ React.useEffect(() => {
530
675
  if (autoFocus) {
531
676
  inputRef.current?.focus();
532
677
  }
@@ -604,7 +749,7 @@ var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
604
749
  }
605
750
  }
606
751
  ),
607
- /* @__PURE__ */ jsxRuntime.jsx(
752
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
608
753
  "span",
609
754
  {
610
755
  className: joinClassNames(
@@ -612,7 +757,7 @@ var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
612
757
  open && `${REACT_COMPONENT_PREFIX}-color-arrow-open`
613
758
  )
614
759
  }
615
- )
760
+ ) : null
616
761
  ]
617
762
  }
618
763
  ),
@@ -771,7 +916,7 @@ function clamp2(value, min, max) {
771
916
  }
772
917
 
773
918
  // src/components/year/style.css
774
- styleInject('@import "../../styles/variables.css";\n.canvas-react-year-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-year {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: 0 11px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-year:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-year-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-year-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-year-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-year-input-wrap:hover,\n.canvas-react-year-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-year-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-year-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 14px;\n min-width: 14px;\n height: 14px;\n margin-left: 8px;\n}\n.canvas-react-year-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-year:hover .canvas-react-year-arrow,\n.canvas-react-year-open .canvas-react-year-arrow {\n border-color: #6b7280;\n}\n.canvas-react-year-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-year-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-year:hover .canvas-react-year-clear,\n.canvas-react-year-open .canvas-react-year-clear,\n.canvas-react-year:focus-within .canvas-react-year-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-year:hover .canvas-react-year-actions-clearable .canvas-react-year-arrow,\n.canvas-react-year-open .canvas-react-year-actions-clearable .canvas-react-year-arrow,\n.canvas-react-year:focus-within .canvas-react-year-actions-clearable .canvas-react-year-arrow {\n opacity: 0;\n}\n.canvas-react-year-clear-icon,\n.canvas-react-year-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-year-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-year-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-year-dropdown {\n padding: 0;\n}\n.canvas-react-year-panel {\n overflow: hidden;\n border-radius: 12px;\n}\n.canvas-react-year-header {\n display: grid;\n grid-template-columns: 40px 1fr 40px;\n align-items: center;\n height: 44px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-year-title {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text);\n font-size: 16px;\n font-weight: 600;\n line-height: 1;\n text-align: center;\n cursor: pointer;\n transition: color 0.18s ease;\n}\n.canvas-react-year-title:hover {\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-year-nav {\n position: relative;\n height: 100%;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: color 0.18s ease, background-color 0.18s ease;\n}\n.canvas-react-year-nav:hover {\n color: var(--canvas-react-color-primary);\n background: rgba(22, 119, 255, 0.05);\n}\n.canvas-react-year-nav-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition: border-color 0.18s ease, transform 0.18s ease;\n}\n.canvas-react-year-nav:hover .canvas-react-year-nav-arrow {\n border-color: var(--canvas-react-color-primary);\n}\n.canvas-react-year-nav-arrow-left {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-year-nav-arrow-right {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-year-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 8px 4px;\n padding: 16px 12px 12px;\n}\n.canvas-react-year-cell {\n height: 40px;\n border: none;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-year-cell:hover {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-year-cell-selected {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-year-cell-muted {\n color: #c4c7cf;\n}\n');
919
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-year-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-year {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-year:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-year-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-year-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-year-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-year .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-year-input-wrap:hover,\n.canvas-react-year-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-year-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-year-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-year-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-year:hover .canvas-react-year-arrow,\n.canvas-react-year-open .canvas-react-year-arrow {\n border-color: #6b7280;\n}\n.canvas-react-year-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-year-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-year:hover .canvas-react-year-clear,\n.canvas-react-year-open .canvas-react-year-clear,\n.canvas-react-year:focus-within .canvas-react-year-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-year:hover .canvas-react-year-actions-clearable .canvas-react-year-arrow,\n.canvas-react-year-open .canvas-react-year-actions-clearable .canvas-react-year-arrow,\n.canvas-react-year:focus-within .canvas-react-year-actions-clearable .canvas-react-year-arrow {\n opacity: 0;\n}\n.canvas-react-year-clear-icon,\n.canvas-react-year-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-year-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-year-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-year-dropdown {\n padding: 0;\n}\n.canvas-react-year-panel {\n overflow: hidden;\n border-radius: 12px;\n}\n.canvas-react-year-header {\n display: grid;\n grid-template-columns: 40px 1fr 40px;\n align-items: center;\n height: 44px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-year-title {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text);\n font-size: 16px;\n font-weight: 600;\n line-height: 1;\n text-align: center;\n cursor: pointer;\n transition: color 0.18s ease;\n}\n.canvas-react-year-title:hover {\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-year-nav {\n position: relative;\n height: 100%;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: color 0.18s ease, background-color 0.18s ease;\n}\n.canvas-react-year-nav:hover {\n color: var(--canvas-react-color-primary);\n background: rgba(22, 119, 255, 0.05);\n}\n.canvas-react-year-nav-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition: border-color 0.18s ease, transform 0.18s ease;\n}\n.canvas-react-year-nav:hover .canvas-react-year-nav-arrow {\n border-color: var(--canvas-react-color-primary);\n}\n.canvas-react-year-nav-arrow-left {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-year-nav-arrow-right {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-year-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 8px 4px;\n padding: 16px 12px 12px;\n}\n.canvas-react-year-cell {\n height: 40px;\n border: none;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-year-cell:hover {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-year-cell-selected {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-year-cell-muted {\n color: #c4c7cf;\n}\n');
775
920
 
776
921
  // src/components/date/style.css
777
922
  styleInject('@import "../month/style.css";\n.canvas-react-date-panel {\n padding-bottom: 8px;\n}\n.canvas-react-date-weekdays,\n.canvas-react-date-grid {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 6px 4px;\n padding: 0 12px;\n}\n.canvas-react-date-weekdays {\n padding-top: 12px;\n padding-bottom: 8px;\n}\n.canvas-react-date-weekday {\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n text-align: center;\n}\n.canvas-react-date-cell {\n height: 36px;\n}\n');
@@ -780,7 +925,7 @@ var MONTHS = Array.from(
780
925
  (_, index) => String(index + 1).padStart(2, "0")
781
926
  );
782
927
  var WEEKDAY_LABELS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
783
- var ReactDatePicker = react.forwardRef(
928
+ var ReactDatePicker = React.forwardRef(
784
929
  function ReactDatePicker2(props, ref) {
785
930
  const {
786
931
  autoFocus,
@@ -793,51 +938,52 @@ var ReactDatePicker = react.forwardRef(
793
938
  placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F",
794
939
  popupClassName,
795
940
  allowClear = true,
941
+ showArrow = true,
796
942
  style,
797
943
  value,
798
944
  ...restProps
799
945
  } = props;
800
- const triggerRef = react.useRef(null);
801
- const inputRef = react.useRef(null);
802
- const popupRef = react.useRef(null);
803
- const skipFocusOpenRef = react.useRef(false);
804
- const [open, setOpen] = react.useState(false);
805
- const [mode, setMode] = react.useState("date");
806
- const parsedValue = react.useMemo(() => parseDateValue(value), [value]);
807
- const [panelDate, setPanelDate] = react.useState(() => ({
946
+ const triggerRef = React.useRef(null);
947
+ const inputRef = React.useRef(null);
948
+ const popupRef = React.useRef(null);
949
+ const skipFocusOpenRef = React.useRef(false);
950
+ const [open, setOpen] = React.useState(false);
951
+ const [mode, setMode] = React.useState("date");
952
+ const parsedValue = React.useMemo(() => parseDateValue(value), [value]);
953
+ const [panelDate, setPanelDate] = React.useState(() => ({
808
954
  day: parsedValue?.day ?? 1,
809
955
  month: parsedValue?.month ?? (/* @__PURE__ */ new Date()).getMonth() + 1,
810
956
  year: parsedValue?.year ?? (/* @__PURE__ */ new Date()).getFullYear()
811
957
  }));
812
- const yearPanelStart = react.useMemo(
958
+ const yearPanelStart = React.useMemo(
813
959
  () => resolveDecadeStart(panelDate.year),
814
960
  [panelDate.year]
815
961
  );
816
- const decadePanelStart = react.useMemo(
962
+ const decadePanelStart = React.useMemo(
817
963
  () => Math.floor(yearPanelStart / 100) * 100,
818
964
  [yearPanelStart]
819
965
  );
820
- const yearItems = react.useMemo(
966
+ const yearItems = React.useMemo(
821
967
  () => Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index),
822
968
  [yearPanelStart]
823
969
  );
824
- const decadeItems = react.useMemo(
970
+ const decadeItems = React.useMemo(
825
971
  () => Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10),
826
972
  [decadePanelStart]
827
973
  );
828
- const calendarDays = react.useMemo(
974
+ const calendarDays = React.useMemo(
829
975
  () => buildCalendarDays(panelDate.year, panelDate.month),
830
976
  [panelDate.month, panelDate.year]
831
977
  );
832
978
  const displayValue = parsedValue == null ? "" : `${parsedValue.year}-${String(parsedValue.month).padStart(2, "0")}-${String(parsedValue.day).padStart(2, "0")}`;
833
979
  const showClear = allowClear && !disabled && displayValue.length > 0;
834
- react.useImperativeHandle(ref, () => inputRef.current);
835
- react.useEffect(() => {
980
+ React.useImperativeHandle(ref, () => inputRef.current);
981
+ React.useEffect(() => {
836
982
  if (autoFocus) {
837
983
  inputRef.current?.focus();
838
984
  }
839
985
  }, [autoFocus]);
840
- react.useEffect(() => {
986
+ React.useEffect(() => {
841
987
  if (!open) {
842
988
  return;
843
989
  }
@@ -922,7 +1068,7 @@ var ReactDatePicker = react.forwardRef(
922
1068
  }
923
1069
  }
924
1070
  ),
925
- /* @__PURE__ */ jsxRuntime.jsxs(
1071
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
926
1072
  "span",
927
1073
  {
928
1074
  className: joinClassNames(
@@ -952,7 +1098,7 @@ var ReactDatePicker = react.forwardRef(
952
1098
  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
953
1099
  }
954
1100
  ) : null,
955
- /* @__PURE__ */ jsxRuntime.jsx(
1101
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
956
1102
  "span",
957
1103
  {
958
1104
  className: joinClassNames(
@@ -960,10 +1106,10 @@ var ReactDatePicker = react.forwardRef(
960
1106
  open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
961
1107
  )
962
1108
  }
963
- )
1109
+ ) : null
964
1110
  ]
965
1111
  }
966
- )
1112
+ ) : null
967
1113
  ]
968
1114
  }
969
1115
  ),
@@ -1292,9 +1438,9 @@ function resolveDecadeStart(year) {
1292
1438
  }
1293
1439
 
1294
1440
  // src/components/date-range/style.css
1295
- styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n@import "../time/style.css";\n.canvas-react-date-range-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-date-range {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: 0 11px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-date-range-control {\n position: relative;\n}\n.canvas-react-date-range:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-date-range-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-date-range-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-date-range-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-date-range-input-wrap:hover,\n.canvas-react-date-range-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-date-range-hidden-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-date-range-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-date-range-values {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-date-range-value {\n position: relative;\n display: flex;\n flex: 1 1 0;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n min-width: 0;\n height: 100%;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: 1;\n text-align: left;\n box-sizing: border-box;\n cursor: pointer;\n}\n.canvas-react-date-range-value::after {\n position: absolute;\n right: 0;\n bottom: -1px;\n left: 0;\n height: 2px;\n border-radius: 999px;\n background: transparent;\n content: "";\n transition: background-color 0.18s ease;\n}\n.canvas-react-date-range-value-active::after {\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-date-range-value-text {\n display: block;\n width: 100%;\n min-width: 0;\n height: auto;\n padding: 0;\n border: none;\n outline: none;\n overflow: hidden;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n}\n@supports (height: 1lh) {\n .canvas-react-date-range-value-text {\n height: 1lh;\n }\n}\n.canvas-react-date-range-value-text::placeholder {\n color: inherit;\n opacity: 1;\n}\n.canvas-react-date-range-separator {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-date-range-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 14px;\n min-width: 14px;\n height: 14px;\n margin-left: 8px;\n}\n.canvas-react-date-range-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-arrow,\n.canvas-react-date-range-open .canvas-react-date-range-arrow {\n border-color: #6b7280;\n}\n.canvas-react-date-range-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-date-range-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-clear,\n.canvas-react-date-range-open .canvas-react-date-range-clear,\n.canvas-react-date-range:focus-within .canvas-react-date-range-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-date-range-clear-icon,\n.canvas-react-date-range-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-date-range-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-date-range-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-date-range-dropdown {\n padding: 4px;\n}\n.canvas-react-date-range-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-date-range-calendars {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-date-range-calendar {\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n}\n.canvas-react-date-range-calendar + .canvas-react-date-range-calendar {\n border-left: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-date-range-calendar .canvas-react-year-title {\n cursor: default;\n}\n.canvas-react-date-range-calendar .canvas-react-year-nav:disabled {\n cursor: default;\n opacity: 0;\n}\n.canvas-react-date-range-calendar .canvas-react-date-grid {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-date-range-cell {\n position: relative;\n border-radius: 0;\n}\n.canvas-react-date-range-cell.canvas-react-year-cell-selected {\n background: rgba(22, 119, 255, 0.12);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-date-range-cell::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: transparent;\n content: "";\n}\n.canvas-react-date-range-cell-in-range {\n background: rgba(22, 119, 255, 0.12);\n}\n.canvas-react-date-range-cell-in-range::before {\n background: transparent;\n}\n.canvas-react-date-range-cell-range-start {\n border-top-left-radius: var(--canvas-react-radius-sm);\n border-bottom-left-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start::before {\n left: 0;\n}\n.canvas-react-date-range-cell-range-end {\n border-top-right-radius: var(--canvas-react-radius-sm);\n border-bottom-right-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-end::before {\n right: 0;\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end {\n border-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end::before {\n left: 0;\n right: 0;\n}\n.canvas-react-date-range-cell-text {\n position: relative;\n z-index: 1;\n}\n.canvas-react-date-range-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 4px 4px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n');
1441
+ styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n@import "../time/style.css";\n.canvas-react-date-range-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-date-range {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-date-range-control {\n position: relative;\n}\n.canvas-react-date-range:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-date-range-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-date-range-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-date-range-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-date-range .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-date-range-input-wrap:hover,\n.canvas-react-date-range-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-date-range-hidden-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-date-range-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-date-range-values {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-date-range-value {\n position: relative;\n display: flex;\n flex: 1 1 0;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n min-width: 0;\n height: 100%;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: 1;\n text-align: left;\n box-sizing: border-box;\n cursor: pointer;\n}\n.canvas-react-date-range-value::after {\n position: absolute;\n right: 0;\n bottom: -1px;\n left: 0;\n height: 2px;\n border-radius: 999px;\n background: transparent;\n content: "";\n transition: background-color 0.18s ease;\n}\n.canvas-react-date-range-value-active::after {\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-date-range-value-text {\n display: block;\n width: 100%;\n min-width: 0;\n height: auto;\n padding: 0;\n border: none;\n outline: none;\n overflow: hidden;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n}\n@supports (height: 1lh) {\n .canvas-react-date-range-value-text {\n height: 1lh;\n }\n}\n.canvas-react-date-range-value-text::placeholder {\n color: inherit;\n opacity: 1;\n}\n.canvas-react-date-range-separator {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-date-range-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-date-range-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-arrow,\n.canvas-react-date-range-open .canvas-react-date-range-arrow {\n border-color: #6b7280;\n}\n.canvas-react-date-range-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-date-range-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-clear,\n.canvas-react-date-range-open .canvas-react-date-range-clear,\n.canvas-react-date-range:focus-within .canvas-react-date-range-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-date-range-clear-icon,\n.canvas-react-date-range-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-date-range-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-date-range-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-date-range-dropdown {\n padding: 4px;\n}\n.canvas-react-date-range-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-date-range-calendars {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-date-range-calendar {\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n}\n.canvas-react-date-range-calendar + .canvas-react-date-range-calendar {\n border-left: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-date-range-calendar .canvas-react-year-title {\n cursor: default;\n}\n.canvas-react-date-range-calendar .canvas-react-year-nav:disabled {\n cursor: default;\n opacity: 0;\n}\n.canvas-react-date-range-calendar .canvas-react-date-grid {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-date-range-cell {\n position: relative;\n border-radius: 0;\n}\n.canvas-react-date-range-cell.canvas-react-year-cell-selected {\n background: rgba(22, 119, 255, 0.12);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-date-range-cell::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: transparent;\n content: "";\n}\n.canvas-react-date-range-cell-in-range {\n background: rgba(22, 119, 255, 0.12);\n}\n.canvas-react-date-range-cell-in-range::before {\n background: transparent;\n}\n.canvas-react-date-range-cell-range-start {\n border-top-left-radius: var(--canvas-react-radius-sm);\n border-bottom-left-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start::before {\n left: 0;\n}\n.canvas-react-date-range-cell-range-end {\n border-top-right-radius: var(--canvas-react-radius-sm);\n border-bottom-right-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-end::before {\n right: 0;\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end {\n border-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end::before {\n left: 0;\n right: 0;\n}\n.canvas-react-date-range-cell-text {\n position: relative;\n z-index: 1;\n}\n.canvas-react-date-range-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 4px 4px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n');
1296
1442
  var WEEKDAY_LABELS2 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
1297
- var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props, ref) {
1443
+ var ReactDateRangePicker = React.forwardRef(function ReactDateRangePicker2(props, ref) {
1298
1444
  const {
1299
1445
  autoFocus,
1300
1446
  className,
@@ -1307,41 +1453,42 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
1307
1453
  popupClassName,
1308
1454
  rangeSeparator = " ~ ",
1309
1455
  allowClear = true,
1456
+ showArrow = true,
1310
1457
  style,
1311
1458
  value,
1312
1459
  ...restProps
1313
1460
  } = props;
1314
- const triggerRef = react.useRef(null);
1315
- const startInputRef = react.useRef(null);
1316
- const endInputRef = react.useRef(null);
1317
- const popupRef = react.useRef(null);
1318
- const skipFocusOpenRef = react.useRef(false);
1319
- const [open, setOpen] = react.useState(false);
1320
- const [activePart, setActivePart] = react.useState("start");
1321
- const [draftRange, setDraftRange] = react.useState(
1461
+ const triggerRef = React.useRef(null);
1462
+ const startInputRef = React.useRef(null);
1463
+ const endInputRef = React.useRef(null);
1464
+ const popupRef = React.useRef(null);
1465
+ const skipFocusOpenRef = React.useRef(false);
1466
+ const [open, setOpen] = React.useState(false);
1467
+ const [activePart, setActivePart] = React.useState("start");
1468
+ const [draftRange, setDraftRange] = React.useState(
1322
1469
  () => parseDateRangeValue(value)
1323
1470
  );
1324
- const [hoverDate, setHoverDate] = react.useState(null);
1325
- const [leftPanel, setLeftPanel] = react.useState(
1471
+ const [hoverDate, setHoverDate] = React.useState(null);
1472
+ const [leftPanel, setLeftPanel] = React.useState(
1326
1473
  () => resolveInitialPanelMonth(parseDateRangeValue(value))
1327
1474
  );
1328
- const rightPanel = react.useMemo(() => shiftMonth2(leftPanel, 1), [leftPanel]);
1329
- const leftCalendarDays = react.useMemo(
1475
+ const rightPanel = React.useMemo(() => shiftMonth2(leftPanel, 1), [leftPanel]);
1476
+ const leftCalendarDays = React.useMemo(
1330
1477
  () => buildCalendarDays2(leftPanel.year, leftPanel.month),
1331
1478
  [leftPanel.month, leftPanel.year]
1332
1479
  );
1333
- const rightCalendarDays = react.useMemo(
1480
+ const rightCalendarDays = React.useMemo(
1334
1481
  () => buildCalendarDays2(rightPanel.year, rightPanel.month),
1335
1482
  [rightPanel.month, rightPanel.year]
1336
1483
  );
1337
1484
  const showClear = allowClear && !disabled && (draftRange.start.length > 0 || draftRange.end.length > 0);
1338
- react.useImperativeHandle(ref, () => startInputRef.current);
1339
- react.useEffect(() => {
1485
+ React.useImperativeHandle(ref, () => startInputRef.current);
1486
+ React.useEffect(() => {
1340
1487
  if (autoFocus) {
1341
1488
  startInputRef.current?.focus();
1342
1489
  }
1343
1490
  }, [autoFocus]);
1344
- react.useEffect(() => {
1491
+ React.useEffect(() => {
1345
1492
  const nextRange = parseDateRangeValue(value);
1346
1493
  setDraftRange(nextRange);
1347
1494
  setLeftPanel(resolveInitialPanelMonth(nextRange));
@@ -1525,7 +1672,7 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
1525
1672
  }
1526
1673
  )
1527
1674
  ] }),
1528
- /* @__PURE__ */ jsxRuntime.jsxs(
1675
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
1529
1676
  "span",
1530
1677
  {
1531
1678
  className: joinClassNames(
@@ -1561,7 +1708,7 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
1561
1708
  )
1562
1709
  }
1563
1710
  ) : null,
1564
- /* @__PURE__ */ jsxRuntime.jsx(
1711
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
1565
1712
  "span",
1566
1713
  {
1567
1714
  className: joinClassNames(
@@ -1569,10 +1716,10 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
1569
1716
  open && `${REACT_COMPONENT_PREFIX}-date-range-arrow-open`
1570
1717
  )
1571
1718
  }
1572
- )
1719
+ ) : null
1573
1720
  ]
1574
1721
  }
1575
- )
1722
+ ) : null
1576
1723
  ]
1577
1724
  }
1578
1725
  ),
@@ -2028,9 +2175,9 @@ function TimeSelectionPanel(props) {
2028
2175
  }
2029
2176
  function TimeColumn(props) {
2030
2177
  const { onSelect, options, selectedValue } = props;
2031
- const listRef = react.useRef(null);
2032
- const scrollTimerRef = react.useRef(null);
2033
- const ignoreScrollRef = react.useRef(false);
2178
+ const listRef = React.useRef(null);
2179
+ const scrollTimerRef = React.useRef(null);
2180
+ const ignoreScrollRef = React.useRef(false);
2034
2181
  const scrollToValue = (nextValue, behavior) => {
2035
2182
  const listElement = listRef.current;
2036
2183
  if (!listElement) {
@@ -2067,14 +2214,14 @@ function TimeColumn(props) {
2067
2214
  ignoreScrollRef.current = false;
2068
2215
  }, behavior === "smooth" ? 180 : 120);
2069
2216
  };
2070
- react.useEffect(() => {
2217
+ React.useEffect(() => {
2071
2218
  return () => {
2072
2219
  if (scrollTimerRef.current != null) {
2073
2220
  window.clearTimeout(scrollTimerRef.current);
2074
2221
  }
2075
2222
  };
2076
2223
  }, []);
2077
- react.useEffect(() => {
2224
+ React.useEffect(() => {
2078
2225
  const listElement = listRef.current;
2079
2226
  if (!listElement) {
2080
2227
  return;
@@ -2186,16 +2333,16 @@ function getCurrentTimeValue() {
2186
2333
  }
2187
2334
 
2188
2335
  // src/components/time/style.css
2189
- styleInject('@import "../../styles/variables.css";\n.canvas-react-time-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-time {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: 0 11px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-time:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-time-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-time-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-time-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-time-input-wrap:hover,\n.canvas-react-time-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-time-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-time-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 14px;\n min-width: 14px;\n height: 14px;\n margin-left: 8px;\n}\n.canvas-react-time-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-time:hover .canvas-react-time-arrow,\n.canvas-react-time-open .canvas-react-time-arrow {\n border-color: #6b7280;\n}\n.canvas-react-time-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-time-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-time-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-time:hover .canvas-react-time-clear,\n.canvas-react-time-open .canvas-react-time-clear,\n.canvas-react-time:focus-within .canvas-react-time-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-time:hover .canvas-react-time-actions-clearable .canvas-react-time-arrow,\n.canvas-react-time-open .canvas-react-time-actions-clearable .canvas-react-time-arrow,\n.canvas-react-time:focus-within .canvas-react-time-actions-clearable .canvas-react-time-arrow {\n opacity: 0;\n}\n.canvas-react-time-clear-icon,\n.canvas-react-time-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-time-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-time-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-time-dropdown {\n padding: 4px;\n}\n.canvas-react-time-popup-panel,\n.canvas-react-time-range-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-time-range-control {\n position: relative;\n}\n.canvas-react-time-range-hidden-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-time-range-values {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-time-range-value {\n position: relative;\n display: flex;\n flex: 1 1 0;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n height: 100%;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: 1;\n text-align: left;\n box-sizing: border-box;\n cursor: pointer;\n}\n.canvas-react-time-range-value::after {\n position: absolute;\n right: 0;\n bottom: -1px;\n left: 0;\n height: 2px;\n border-radius: 999px;\n background: transparent;\n content: "";\n transition: background-color 0.18s ease;\n}\n.canvas-react-time-range-value-active::after {\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-time-range-value-text {\n display: block;\n width: 100%;\n min-width: 0;\n height: auto;\n padding: 0;\n border: none;\n outline: none;\n overflow: hidden;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n}\n@supports (height: 1lh) {\n .canvas-react-time-range-value-text {\n height: 1lh;\n }\n}\n.canvas-react-time-range-value-text::placeholder {\n color: inherit;\n opacity: 1;\n}\n.canvas-react-time-range-separator {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-time-popup-header {\n padding: 0 4px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n box-sizing: border-box;\n}\n.canvas-react-time-panel {\n min-width: 216px;\n}\n.canvas-react-time-header,\n.canvas-react-time-body {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 4px;\n}\n.canvas-react-time-header {\n align-items: center;\n height: 44px;\n margin-bottom: 4px;\n}\n.canvas-react-time-popup-header .canvas-react-time-header {\n height: 44px;\n margin-bottom: 0;\n}\n.canvas-react-time-body {\n position: relative;\n}\n.canvas-react-time-popup-content {\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-time-popup-content .canvas-react-time-panel {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n width: 100%;\n min-height: 100%;\n}\n.canvas-react-time-popup-content .canvas-react-time-body {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-time-popup-content .canvas-react-time-column {\n display: flex;\n min-height: 0;\n}\n.canvas-react-time-popup-content .canvas-react-time-column-list {\n flex: 1 1 auto;\n max-height: none;\n min-height: 0;\n}\n.canvas-react-time-selection-highlight {\n position: absolute;\n left: 0;\n right: 0;\n top: 50%;\n height: 32px;\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg-active);\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n}\n.canvas-react-time-column {\n position: relative;\n z-index: 1;\n}\n.canvas-react-time-column-label {\n padding: 4px 0;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n text-align: center;\n}\n.canvas-react-time-column-list {\n max-height: 196px;\n overflow-y: auto;\n padding: 0 4px;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n scroll-behavior: smooth;\n scroll-snap-type: y mandatory;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.canvas-react-time-column-list::-webkit-scrollbar {\n display: none;\n}\n.canvas-react-time-option {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 32px;\n padding: 0 6px;\n border: none;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n font-size: var(--canvas-react-font-size);\n line-height: 1;\n cursor: pointer;\n scroll-snap-align: center;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-time-option:hover {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-time-option-selected {\n color: var(--canvas-react-color-primary);\n font-weight: 500;\n}\n.canvas-react-time-footer,\n.canvas-react-time-popup-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 4px 4px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-footer-now,\n.canvas-react-time-footer-confirm {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 28px;\n padding: 0 12px;\n border-radius: var(--canvas-react-radius-sm);\n font-size: 12px;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease;\n}\n.canvas-react-time-footer-now {\n border: none;\n background: transparent;\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-time-footer-now:hover {\n color: var(--canvas-react-color-primary-hover);\n background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-time-footer-confirm {\n border: 1px solid var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #fff;\n}\n.canvas-react-time-footer-confirm:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-time-range-dropdown {\n width: 260px;\n}\n.canvas-react-time-range-header {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-range-content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n}\n.canvas-react-time-range-header-tab {\n height: 44px;\n padding: 0 10px;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-time-range-header-tab + .canvas-react-time-range-header-tab {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-range-header-tab:hover {\n color: var(--canvas-react-color-primary-hover);\n background: rgba(22, 119, 255, 0.05);\n}\n.canvas-react-time-range-header-tab-active {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n');
2336
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-time-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-time {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-time:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-time-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-time-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-time-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-time .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-time-input-wrap:hover,\n.canvas-react-time-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-time-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-time-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-time-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-time:hover .canvas-react-time-arrow,\n.canvas-react-time-open .canvas-react-time-arrow {\n border-color: #6b7280;\n}\n.canvas-react-time-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-time-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-time-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-time:hover .canvas-react-time-clear,\n.canvas-react-time-open .canvas-react-time-clear,\n.canvas-react-time:focus-within .canvas-react-time-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-time:hover .canvas-react-time-actions-clearable .canvas-react-time-arrow,\n.canvas-react-time-open .canvas-react-time-actions-clearable .canvas-react-time-arrow,\n.canvas-react-time:focus-within .canvas-react-time-actions-clearable .canvas-react-time-arrow {\n opacity: 0;\n}\n.canvas-react-time-clear-icon,\n.canvas-react-time-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-time-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-time-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-time-dropdown {\n padding: 4px;\n}\n.canvas-react-time-popup-panel,\n.canvas-react-time-range-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-time-range-control {\n position: relative;\n}\n.canvas-react-time-range-hidden-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-time-range-values {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-time-range-value {\n position: relative;\n display: flex;\n flex: 1 1 0;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n height: 100%;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: 1;\n text-align: left;\n box-sizing: border-box;\n cursor: pointer;\n}\n.canvas-react-time-range-value::after {\n position: absolute;\n right: 0;\n bottom: -1px;\n left: 0;\n height: 2px;\n border-radius: 999px;\n background: transparent;\n content: "";\n transition: background-color 0.18s ease;\n}\n.canvas-react-time-range-value-active::after {\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-time-range-value-text {\n display: block;\n width: 100%;\n min-width: 0;\n height: auto;\n padding: 0;\n border: none;\n outline: none;\n overflow: hidden;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n}\n@supports (height: 1lh) {\n .canvas-react-time-range-value-text {\n height: 1lh;\n }\n}\n.canvas-react-time-range-value-text::placeholder {\n color: inherit;\n opacity: 1;\n}\n.canvas-react-time-range-separator {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-time-popup-header {\n padding: 0 4px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n box-sizing: border-box;\n}\n.canvas-react-time-panel {\n min-width: 216px;\n}\n.canvas-react-time-header,\n.canvas-react-time-body {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 4px;\n}\n.canvas-react-time-header {\n align-items: center;\n height: 44px;\n margin-bottom: 4px;\n}\n.canvas-react-time-popup-header .canvas-react-time-header {\n height: 44px;\n margin-bottom: 0;\n}\n.canvas-react-time-body {\n position: relative;\n}\n.canvas-react-time-popup-content {\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-time-popup-content .canvas-react-time-panel {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n width: 100%;\n min-height: 100%;\n}\n.canvas-react-time-popup-content .canvas-react-time-body {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-time-popup-content .canvas-react-time-column {\n display: flex;\n min-height: 0;\n}\n.canvas-react-time-popup-content .canvas-react-time-column-list {\n flex: 1 1 auto;\n max-height: none;\n min-height: 0;\n}\n.canvas-react-time-selection-highlight {\n position: absolute;\n left: 0;\n right: 0;\n top: 50%;\n height: 32px;\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg-active);\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n}\n.canvas-react-time-column {\n position: relative;\n z-index: 1;\n}\n.canvas-react-time-column-label {\n padding: 4px 0;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n text-align: center;\n}\n.canvas-react-time-column-list {\n max-height: 196px;\n overflow-y: auto;\n padding: 0 4px;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n scroll-behavior: smooth;\n scroll-snap-type: y mandatory;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.canvas-react-time-column-list::-webkit-scrollbar {\n display: none;\n}\n.canvas-react-time-option {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 32px;\n padding: 0 6px;\n border: none;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n font-size: var(--canvas-react-font-size);\n line-height: 1;\n cursor: pointer;\n scroll-snap-align: center;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-time-option:hover {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-time-option-selected {\n color: var(--canvas-react-color-primary);\n font-weight: 500;\n}\n.canvas-react-time-footer,\n.canvas-react-time-popup-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 4px 4px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-footer-now,\n.canvas-react-time-footer-confirm {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 28px;\n padding: 0 12px;\n border-radius: var(--canvas-react-radius-sm);\n font-size: 12px;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease;\n}\n.canvas-react-time-footer-now {\n border: none;\n background: transparent;\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-time-footer-now:hover {\n color: var(--canvas-react-color-primary-hover);\n background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-time-footer-confirm {\n border: 1px solid var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #fff;\n}\n.canvas-react-time-footer-confirm:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-time-range-dropdown {\n width: 260px;\n}\n.canvas-react-time-range-header {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-range-content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n}\n.canvas-react-time-range-header-tab {\n height: 44px;\n padding: 0 10px;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-time-range-header-tab + .canvas-react-time-range-header-tab {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-range-header-tab:hover {\n color: var(--canvas-react-color-primary-hover);\n background: rgba(22, 119, 255, 0.05);\n}\n.canvas-react-time-range-header-tab-active {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n');
2190
2337
 
2191
2338
  // src/components/datetime/style.css
2192
- styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n.canvas-react-datetime-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-datetime {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: 0 11px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-datetime:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-datetime-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-datetime-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-datetime-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-datetime-input-wrap:hover,\n.canvas-react-datetime-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-datetime-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-datetime-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 14px;\n min-width: 14px;\n height: 14px;\n margin-left: 8px;\n}\n.canvas-react-datetime-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-datetime:hover .canvas-react-datetime-arrow,\n.canvas-react-datetime-open .canvas-react-datetime-arrow {\n border-color: #6b7280;\n}\n.canvas-react-datetime-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-datetime-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-datetime-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-datetime:hover .canvas-react-datetime-clear,\n.canvas-react-datetime-open .canvas-react-datetime-clear,\n.canvas-react-datetime:focus-within .canvas-react-datetime-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-datetime:hover .canvas-react-datetime-actions-clearable .canvas-react-datetime-arrow,\n.canvas-react-datetime-open .canvas-react-datetime-actions-clearable .canvas-react-datetime-arrow,\n.canvas-react-datetime:focus-within .canvas-react-datetime-actions-clearable .canvas-react-datetime-arrow {\n opacity: 0;\n}\n.canvas-react-datetime-clear-icon,\n.canvas-react-datetime-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-datetime-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-datetime-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-datetime-dropdown {\n padding: 4px;\n}\n.canvas-react-datetime-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-datetime-header {\n display: grid;\n grid-template-columns: 296px 218px;\n gap: 8px;\n align-items: stretch;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-datetime-header-date {\n border-right: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-datetime-header-date .canvas-react-year-header,\n.canvas-react-datetime-header-time .canvas-react-time-header {\n border-bottom: none;\n}\n.canvas-react-datetime-header-time {\n display: block;\n min-width: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-datetime-content {\n display: grid;\n grid-template-columns: 296px 218px;\n gap: 8px;\n flex: 1 1 auto;\n min-height: 0;\n align-items: stretch;\n}\n.canvas-react-datetime-date-panel {\n display: flex;\n flex-direction: column;\n min-height: 0;\n border-right: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-datetime-time-panel {\n overflow: hidden;\n display: flex;\n min-height: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-datetime-header-time .canvas-react-time-header {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 4px;\n align-items: center;\n width: 100%;\n height: 44px;\n margin-bottom: 0;\n box-sizing: border-box;\n}\n.canvas-react-datetime-header-time .canvas-react-time-column-label {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-panel {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n width: 100%;\n min-height: 100%;\n min-width: 210px;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-body {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-column {\n display: flex;\n min-height: 0;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-column-list {\n flex: 1 1 auto;\n max-height: none;\n min-height: 0;\n}\n.canvas-react-datetime-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 8px 0 0;\n margin-top: 8px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n');
2339
+ styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n.canvas-react-datetime-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-datetime {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-datetime:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-datetime-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-datetime-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-datetime-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-datetime .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-datetime-input-wrap:hover,\n.canvas-react-datetime-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-datetime-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-datetime-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-datetime-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-datetime:hover .canvas-react-datetime-arrow,\n.canvas-react-datetime-open .canvas-react-datetime-arrow {\n border-color: #6b7280;\n}\n.canvas-react-datetime-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-datetime-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-datetime-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-datetime:hover .canvas-react-datetime-clear,\n.canvas-react-datetime-open .canvas-react-datetime-clear,\n.canvas-react-datetime:focus-within .canvas-react-datetime-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-datetime:hover .canvas-react-datetime-actions-clearable .canvas-react-datetime-arrow,\n.canvas-react-datetime-open .canvas-react-datetime-actions-clearable .canvas-react-datetime-arrow,\n.canvas-react-datetime:focus-within .canvas-react-datetime-actions-clearable .canvas-react-datetime-arrow {\n opacity: 0;\n}\n.canvas-react-datetime-clear-icon,\n.canvas-react-datetime-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-datetime-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-datetime-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-datetime-dropdown {\n padding: 4px;\n}\n.canvas-react-datetime-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-datetime-header {\n display: grid;\n grid-template-columns: 296px 218px;\n gap: 8px;\n align-items: stretch;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-datetime-header-date {\n border-right: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-datetime-header-date .canvas-react-year-header,\n.canvas-react-datetime-header-time .canvas-react-time-header {\n border-bottom: none;\n}\n.canvas-react-datetime-header-time {\n display: block;\n min-width: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-datetime-content {\n display: grid;\n grid-template-columns: 296px 218px;\n gap: 8px;\n flex: 1 1 auto;\n min-height: 0;\n align-items: stretch;\n}\n.canvas-react-datetime-date-panel {\n display: flex;\n flex-direction: column;\n min-height: 0;\n border-right: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-datetime-time-panel {\n overflow: hidden;\n display: flex;\n min-height: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-datetime-header-time .canvas-react-time-header {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 4px;\n align-items: center;\n width: 100%;\n height: 44px;\n margin-bottom: 0;\n box-sizing: border-box;\n}\n.canvas-react-datetime-header-time .canvas-react-time-column-label {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-panel {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n width: 100%;\n min-height: 100%;\n min-width: 210px;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-body {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-column {\n display: flex;\n min-height: 0;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-column-list {\n flex: 1 1 auto;\n max-height: none;\n min-height: 0;\n}\n.canvas-react-datetime-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 8px 0 0;\n margin-top: 8px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n');
2193
2340
  var MONTHS2 = Array.from(
2194
2341
  { length: 12 },
2195
2342
  (_, index) => String(index + 1).padStart(2, "0")
2196
2343
  );
2197
2344
  var WEEKDAY_LABELS3 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
2198
- var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props, ref) {
2345
+ var ReactDateTimePicker = React.forwardRef(function ReactDateTimePicker2(props, ref) {
2199
2346
  const {
2200
2347
  autoFocus,
2201
2348
  className,
@@ -2207,49 +2354,50 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
2207
2354
  placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4",
2208
2355
  popupClassName,
2209
2356
  allowClear = true,
2357
+ showArrow = true,
2210
2358
  style,
2211
2359
  value,
2212
2360
  ...restProps
2213
2361
  } = props;
2214
- const triggerRef = react.useRef(null);
2215
- const inputRef = react.useRef(null);
2216
- const popupRef = react.useRef(null);
2217
- const skipFocusOpenRef = react.useRef(false);
2218
- const [open, setOpen] = react.useState(false);
2219
- const [mode, setMode] = react.useState("date");
2220
- const parsedValue = react.useMemo(() => parseDateTimeValue(value), [value]);
2221
- const [draftDateTime, setDraftDateTime] = react.useState(
2362
+ const triggerRef = React.useRef(null);
2363
+ const inputRef = React.useRef(null);
2364
+ const popupRef = React.useRef(null);
2365
+ const skipFocusOpenRef = React.useRef(false);
2366
+ const [open, setOpen] = React.useState(false);
2367
+ const [mode, setMode] = React.useState("date");
2368
+ const parsedValue = React.useMemo(() => parseDateTimeValue(value), [value]);
2369
+ const [draftDateTime, setDraftDateTime] = React.useState(
2222
2370
  () => createDraftDateTime(parsedValue)
2223
2371
  );
2224
- const yearPanelStart = react.useMemo(
2372
+ const yearPanelStart = React.useMemo(
2225
2373
  () => resolveDecadeStart2(draftDateTime.year),
2226
2374
  [draftDateTime.year]
2227
2375
  );
2228
- const decadePanelStart = react.useMemo(
2376
+ const decadePanelStart = React.useMemo(
2229
2377
  () => Math.floor(yearPanelStart / 100) * 100,
2230
2378
  [yearPanelStart]
2231
2379
  );
2232
- const yearItems = react.useMemo(
2380
+ const yearItems = React.useMemo(
2233
2381
  () => Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index),
2234
2382
  [yearPanelStart]
2235
2383
  );
2236
- const decadeItems = react.useMemo(
2384
+ const decadeItems = React.useMemo(
2237
2385
  () => Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10),
2238
2386
  [decadePanelStart]
2239
2387
  );
2240
- const calendarDays = react.useMemo(
2388
+ const calendarDays = React.useMemo(
2241
2389
  () => buildCalendarDays3(draftDateTime.year, draftDateTime.month),
2242
2390
  [draftDateTime.month, draftDateTime.year]
2243
2391
  );
2244
2392
  const displayValue = parsedValue == null ? "" : `${formatDateValue(parsedValue)} ${formatTimeValue(parsedValue)}`;
2245
2393
  const showClear = allowClear && !disabled && displayValue.length > 0;
2246
- react.useImperativeHandle(ref, () => inputRef.current);
2247
- react.useEffect(() => {
2394
+ React.useImperativeHandle(ref, () => inputRef.current);
2395
+ React.useEffect(() => {
2248
2396
  if (autoFocus) {
2249
2397
  inputRef.current?.focus();
2250
2398
  }
2251
2399
  }, [autoFocus]);
2252
- react.useEffect(() => {
2400
+ React.useEffect(() => {
2253
2401
  if (!open) {
2254
2402
  return;
2255
2403
  }
@@ -2330,7 +2478,7 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
2330
2478
  }
2331
2479
  }
2332
2480
  ),
2333
- /* @__PURE__ */ jsxRuntime.jsxs(
2481
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
2334
2482
  "span",
2335
2483
  {
2336
2484
  className: joinClassNames(
@@ -2360,7 +2508,7 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
2360
2508
  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-datetime-clear-icon` })
2361
2509
  }
2362
2510
  ) : null,
2363
- /* @__PURE__ */ jsxRuntime.jsx(
2511
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
2364
2512
  "span",
2365
2513
  {
2366
2514
  className: joinClassNames(
@@ -2368,10 +2516,10 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
2368
2516
  open && `${REACT_COMPONENT_PREFIX}-datetime-arrow-open`
2369
2517
  )
2370
2518
  }
2371
- )
2519
+ ) : null
2372
2520
  ]
2373
2521
  }
2374
- )
2522
+ ) : null
2375
2523
  ]
2376
2524
  }
2377
2525
  ),
@@ -2832,7 +2980,7 @@ var MONTHS3 = Array.from(
2832
2980
  (_, index) => String(index + 1).padStart(2, "0")
2833
2981
  );
2834
2982
  var WEEKDAY_LABELS4 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
2835
- var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicker2(props, ref) {
2983
+ var ReactDateTimeRangePicker = React.forwardRef(function ReactDateTimeRangePicker2(props, ref) {
2836
2984
  const {
2837
2985
  autoFocus,
2838
2986
  className,
@@ -2845,68 +2993,69 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
2845
2993
  popupClassName,
2846
2994
  rangeSeparator = " ~ ",
2847
2995
  allowClear = true,
2996
+ showArrow = true,
2848
2997
  style,
2849
2998
  value,
2850
2999
  ...restProps
2851
3000
  } = props;
2852
- const triggerRef = react.useRef(null);
2853
- const startInputRef = react.useRef(null);
2854
- const endInputRef = react.useRef(null);
2855
- const popupRef = react.useRef(null);
2856
- const skipFocusOpenRef = react.useRef(false);
2857
- const [open, setOpen] = react.useState(false);
2858
- const [activePart, setActivePart] = react.useState("start");
2859
- const [mode, setMode] = react.useState(
3001
+ const triggerRef = React.useRef(null);
3002
+ const startInputRef = React.useRef(null);
3003
+ const endInputRef = React.useRef(null);
3004
+ const popupRef = React.useRef(null);
3005
+ const skipFocusOpenRef = React.useRef(false);
3006
+ const [open, setOpen] = React.useState(false);
3007
+ const [activePart, setActivePart] = React.useState("start");
3008
+ const [mode, setMode] = React.useState(
2860
3009
  "date"
2861
3010
  );
2862
- const [draftRange, setDraftRange] = react.useState(
3011
+ const [draftRange, setDraftRange] = React.useState(
2863
3012
  () => parseDateTimeRangeValue(value)
2864
3013
  );
2865
- const activeValue = react.useMemo(
3014
+ const activeValue = React.useMemo(
2866
3015
  () => activePart === "start" ? draftRange.start : draftRange.end,
2867
3016
  [activePart, draftRange.end, draftRange.start]
2868
3017
  );
2869
- const parsedActiveValue = react.useMemo(
3018
+ const parsedActiveValue = React.useMemo(
2870
3019
  () => parseDateTimeValue2(activeValue),
2871
3020
  [activeValue]
2872
3021
  );
2873
- const [draftDateTime, setDraftDateTime] = react.useState(
3022
+ const [draftDateTime, setDraftDateTime] = React.useState(
2874
3023
  () => createDraftDateTime2(parsedActiveValue)
2875
3024
  );
2876
3025
  const showClear = allowClear && !disabled && (draftRange.start.length > 0 || draftRange.end.length > 0);
2877
- const yearPanelStart = react.useMemo(
3026
+ const yearPanelStart = React.useMemo(
2878
3027
  () => resolveDecadeStart3(draftDateTime.year),
2879
3028
  [draftDateTime.year]
2880
3029
  );
2881
- const decadePanelStart = react.useMemo(
3030
+ const decadePanelStart = React.useMemo(
2882
3031
  () => Math.floor(yearPanelStart / 100) * 100,
2883
3032
  [yearPanelStart]
2884
3033
  );
2885
- const yearItems = react.useMemo(
3034
+ const yearItems = React.useMemo(
2886
3035
  () => Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index),
2887
3036
  [yearPanelStart]
2888
3037
  );
2889
- const decadeItems = react.useMemo(
3038
+ const decadeItems = React.useMemo(
2890
3039
  () => Array.from(
2891
3040
  { length: 12 },
2892
3041
  (_, index) => decadePanelStart - 10 + index * 10
2893
3042
  ),
2894
3043
  [decadePanelStart]
2895
3044
  );
2896
- const calendarDays = react.useMemo(
3045
+ const calendarDays = React.useMemo(
2897
3046
  () => buildCalendarDays4(draftDateTime.year, draftDateTime.month),
2898
3047
  [draftDateTime.month, draftDateTime.year]
2899
3048
  );
2900
- react.useImperativeHandle(ref, () => startInputRef.current);
2901
- react.useEffect(() => {
3049
+ React.useImperativeHandle(ref, () => startInputRef.current);
3050
+ React.useEffect(() => {
2902
3051
  if (autoFocus) {
2903
3052
  startInputRef.current?.focus();
2904
3053
  }
2905
3054
  }, [autoFocus]);
2906
- react.useEffect(() => {
3055
+ React.useEffect(() => {
2907
3056
  setDraftRange(parseDateTimeRangeValue(value));
2908
3057
  }, [rangeSeparator, value]);
2909
- react.useEffect(() => {
3058
+ React.useEffect(() => {
2910
3059
  if (!open) {
2911
3060
  return;
2912
3061
  }
@@ -3084,7 +3233,7 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
3084
3233
  }
3085
3234
  )
3086
3235
  ] }),
3087
- /* @__PURE__ */ jsxRuntime.jsxs(
3236
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
3088
3237
  "span",
3089
3238
  {
3090
3239
  className: joinClassNames(
@@ -3120,7 +3269,7 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
3120
3269
  )
3121
3270
  }
3122
3271
  ) : null,
3123
- /* @__PURE__ */ jsxRuntime.jsx(
3272
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
3124
3273
  "span",
3125
3274
  {
3126
3275
  className: joinClassNames(
@@ -3128,10 +3277,10 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
3128
3277
  open && `${REACT_COMPONENT_PREFIX}-datetime-arrow-open`
3129
3278
  )
3130
3279
  }
3131
- )
3280
+ ) : null
3132
3281
  ]
3133
3282
  }
3134
- )
3283
+ ) : null
3135
3284
  ]
3136
3285
  }
3137
3286
  ),
@@ -3640,20 +3789,20 @@ function compareDateTimeValue(left, right) {
3640
3789
  styleInject(".canvas-react-image-preview {\n position: fixed;\n inset: 0;\n z-index: 1100;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px;\n background: rgba(0, 0, 0, 0.72);\n backdrop-filter: blur(2px);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.canvas-react-image-preview-entered {\n opacity: 1;\n}\n.canvas-react-image-preview-leave {\n opacity: 0;\n}\n.canvas-react-image-preview-image {\n max-width: 90vw;\n max-height: 86vh;\n object-fit: contain;\n border-radius: 4px;\n box-shadow: 0 12px 48px rgba(0, 0, 0, 0.32);\n opacity: 0;\n transition: transform 0.2s ease, opacity 0.2s ease;\n user-select: none;\n}\n.canvas-react-image-preview-entered .canvas-react-image-preview-image {\n opacity: 1;\n}\n.canvas-react-image-preview-leave .canvas-react-image-preview-image {\n opacity: 0;\n}\n.canvas-react-image-preview-close {\n position: fixed;\n top: 20px;\n right: 24px;\n width: 40px;\n height: 40px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n color: #fff;\n background: rgba(255, 255, 255, 0.14);\n font: 30px/38px sans-serif;\n cursor: pointer;\n}\n.canvas-react-image-preview-toolbar {\n position: fixed;\n bottom: 28px;\n left: 50%;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 10px;\n color: #fff;\n background: rgba(0, 0, 0, 0.64);\n border-radius: 22px;\n box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);\n transform: translateX(-50%);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.canvas-react-image-preview-entered .canvas-react-image-preview-toolbar {\n opacity: 1;\n}\n.canvas-react-image-preview-tool {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 0;\n border-radius: 6px;\n color: inherit;\n background: transparent;\n font: 20px/1 sans-serif;\n cursor: pointer;\n}\n.canvas-react-image-preview-tool:hover:not(:disabled) {\n background: rgba(255, 255, 255, 0.16);\n}\n.canvas-react-image-preview-tool:disabled {\n color: rgba(255, 255, 255, 0.35);\n cursor: not-allowed;\n}\n.canvas-react-image-preview-scale {\n min-width: 48px;\n color: rgba(255, 255, 255, 0.88);\n font-size: 12px;\n text-align: center;\n}\n");
3641
3790
  function ReactImagePreview(props) {
3642
3791
  const { open, src, alt = "preview", onClose } = props;
3643
- const [scale, setScale] = react.useState(1);
3644
- const [rotation, setRotation] = react.useState(0);
3645
- const [flipX, setFlipX] = react.useState(false);
3646
- const [flipY, setFlipY] = react.useState(false);
3647
- const [motionState, setMotionState] = react.useState(
3792
+ const [scale, setScale] = React.useState(1);
3793
+ const [rotation, setRotation] = React.useState(0);
3794
+ const [flipX, setFlipX] = React.useState(false);
3795
+ const [flipY, setFlipY] = React.useState(false);
3796
+ const [motionState, setMotionState] = React.useState(
3648
3797
  "enter"
3649
3798
  );
3650
- const closeTimerRef = react.useRef(null);
3799
+ const closeTimerRef = React.useRef(null);
3651
3800
  const requestClose = () => {
3652
3801
  if (motionState === "leave") return;
3653
3802
  setMotionState("leave");
3654
3803
  closeTimerRef.current = window.setTimeout(onClose, 200);
3655
3804
  };
3656
- react.useEffect(() => {
3805
+ React.useEffect(() => {
3657
3806
  if (!open) return;
3658
3807
  setScale(1);
3659
3808
  setRotation(0);
@@ -3663,7 +3812,7 @@ function ReactImagePreview(props) {
3663
3812
  const frame = requestAnimationFrame(() => setMotionState("entered"));
3664
3813
  return () => cancelAnimationFrame(frame);
3665
3814
  }, [open, src]);
3666
- react.useEffect(() => {
3815
+ React.useEffect(() => {
3667
3816
  if (!open) return;
3668
3817
  const handleKeyDown = (event) => {
3669
3818
  if (event.key === "Escape") requestClose();
@@ -3671,7 +3820,7 @@ function ReactImagePreview(props) {
3671
3820
  window.addEventListener("keydown", handleKeyDown);
3672
3821
  return () => window.removeEventListener("keydown", handleKeyDown);
3673
3822
  }, [open, motionState]);
3674
- react.useEffect(
3823
+ React.useEffect(
3675
3824
  () => () => {
3676
3825
  if (closeTimerRef.current != null) {
3677
3826
  window.clearTimeout(closeTimerRef.current);
@@ -3800,7 +3949,7 @@ var MONTHS4 = Array.from(
3800
3949
  { length: 12 },
3801
3950
  (_, index) => String(index + 1).padStart(2, "0")
3802
3951
  );
3803
- var ReactMonthPicker = react.forwardRef(
3952
+ var ReactMonthPicker = React.forwardRef(
3804
3953
  function ReactMonthPicker2(props, ref) {
3805
3954
  const {
3806
3955
  autoFocus,
@@ -3813,40 +3962,41 @@ var ReactMonthPicker = react.forwardRef(
3813
3962
  placeholder = "\u8BF7\u9009\u62E9\u6708\u4EFD",
3814
3963
  popupClassName,
3815
3964
  allowClear = true,
3965
+ showArrow = true,
3816
3966
  style,
3817
3967
  value,
3818
3968
  ...restProps
3819
3969
  } = props;
3820
- const triggerRef = react.useRef(null);
3821
- const inputRef = react.useRef(null);
3822
- const popupRef = react.useRef(null);
3823
- const skipFocusOpenRef = react.useRef(false);
3824
- const [open, setOpen] = react.useState(false);
3825
- const [mode, setMode] = react.useState("month");
3826
- const parsedValue = react.useMemo(() => parseMonthValue(value), [value]);
3827
- const [panelYear, setPanelYear] = react.useState(
3970
+ const triggerRef = React.useRef(null);
3971
+ const inputRef = React.useRef(null);
3972
+ const popupRef = React.useRef(null);
3973
+ const skipFocusOpenRef = React.useRef(false);
3974
+ const [open, setOpen] = React.useState(false);
3975
+ const [mode, setMode] = React.useState("month");
3976
+ const parsedValue = React.useMemo(() => parseMonthValue(value), [value]);
3977
+ const [panelYear, setPanelYear] = React.useState(
3828
3978
  () => parsedValue?.year ?? (/* @__PURE__ */ new Date()).getFullYear()
3829
3979
  );
3830
- const yearPanelStart = react.useMemo(() => resolveDecadeStart4(panelYear), [panelYear]);
3831
- const decadePanelStart = react.useMemo(
3980
+ const yearPanelStart = React.useMemo(() => resolveDecadeStart4(panelYear), [panelYear]);
3981
+ const decadePanelStart = React.useMemo(
3832
3982
  () => Math.floor(yearPanelStart / 100) * 100,
3833
3983
  [yearPanelStart]
3834
3984
  );
3835
- const yearItems = react.useMemo(() => {
3985
+ const yearItems = React.useMemo(() => {
3836
3986
  return Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index);
3837
3987
  }, [yearPanelStart]);
3838
- const decadeItems = react.useMemo(() => {
3988
+ const decadeItems = React.useMemo(() => {
3839
3989
  return Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10);
3840
3990
  }, [decadePanelStart]);
3841
3991
  const displayValue = parsedValue == null ? "" : `${parsedValue.year}-${parsedValue.month}`;
3842
3992
  const showClear = allowClear && !disabled && displayValue.length > 0;
3843
- react.useImperativeHandle(ref, () => inputRef.current);
3844
- react.useEffect(() => {
3993
+ React.useImperativeHandle(ref, () => inputRef.current);
3994
+ React.useEffect(() => {
3845
3995
  if (autoFocus) {
3846
3996
  inputRef.current?.focus();
3847
3997
  }
3848
3998
  }, [autoFocus]);
3849
- react.useEffect(() => {
3999
+ React.useEffect(() => {
3850
4000
  if (!open) {
3851
4001
  return;
3852
4002
  }
@@ -3927,7 +4077,7 @@ var ReactMonthPicker = react.forwardRef(
3927
4077
  }
3928
4078
  }
3929
4079
  ),
3930
- /* @__PURE__ */ jsxRuntime.jsxs(
4080
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
3931
4081
  "span",
3932
4082
  {
3933
4083
  className: joinClassNames(
@@ -3957,7 +4107,7 @@ var ReactMonthPicker = react.forwardRef(
3957
4107
  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
3958
4108
  }
3959
4109
  ) : null,
3960
- /* @__PURE__ */ jsxRuntime.jsx(
4110
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
3961
4111
  "span",
3962
4112
  {
3963
4113
  className: joinClassNames(
@@ -3965,10 +4115,10 @@ var ReactMonthPicker = react.forwardRef(
3965
4115
  open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
3966
4116
  )
3967
4117
  }
3968
- )
4118
+ ) : null
3969
4119
  ]
3970
4120
  }
3971
- )
4121
+ ) : null
3972
4122
  ]
3973
4123
  }
3974
4124
  ),
@@ -4190,8 +4340,8 @@ function resolveDecadeStart4(year) {
4190
4340
  }
4191
4341
 
4192
4342
  // src/components/number-input/style.css
4193
- styleInject('@import "../../styles/variables.css";\n.canvas-react-number-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-number-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-number-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-number-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0 11px;\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-number-input::-webkit-outer-spin-button,\n.canvas-react-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-number-input-suffix {\n display: inline-flex;\n align-items: center;\n padding-right: 11px;\n}\n.canvas-react-number-input-clear {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover .canvas-react-number-input-clear,\n.canvas-react-number-input-affix-wrapper:focus-within .canvas-react-number-input-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-number-input-clear:hover {\n color: #6b7280;\n transform: rotate(90deg);\n}\n.canvas-react-number-input-clear-icon,\n.canvas-react-number-input-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-number-input-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-number-input-clear-icon::before {\n transform: rotate(90deg);\n}\n');
4194
- var ReactNumberInput = react.forwardRef(
4343
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-number-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-number-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-number-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-number-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-number-input::-webkit-outer-spin-button,\n.canvas-react-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-number-input-suffix {\n display: inline-flex;\n align-items: center;\n padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-number-input-clear {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover .canvas-react-number-input-clear,\n.canvas-react-number-input-affix-wrapper:focus-within .canvas-react-number-input-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-number-input-clear:hover {\n color: #6b7280;\n transform: rotate(90deg);\n}\n.canvas-react-number-input-clear-icon,\n.canvas-react-number-input-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-number-input-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-number-input-clear-icon::before {\n transform: rotate(90deg);\n}\n');
4344
+ var ReactNumberInput = React.forwardRef(
4195
4345
  function ReactNumberInput2(props, ref) {
4196
4346
  const {
4197
4347
  className,
@@ -4204,8 +4354,8 @@ var ReactNumberInput = react.forwardRef(
4204
4354
  value,
4205
4355
  ...restProps
4206
4356
  } = props;
4207
- const [inputValue, setInputValue] = react.useState(toDisplayValue(value));
4208
- react.useEffect(() => {
4357
+ const [inputValue, setInputValue] = React.useState(toDisplayValue(value));
4358
+ React.useEffect(() => {
4209
4359
  setInputValue(toDisplayValue(value));
4210
4360
  }, [value]);
4211
4361
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4260,9 +4410,241 @@ function toDisplayValue(value) {
4260
4410
  return value == null ? "" : String(value);
4261
4411
  }
4262
4412
 
4413
+ // src/components/input-number/style.css
4414
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-input-number {\n box-sizing: border-box;\n display: inline-flex;\n align-items: stretch;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n overflow: hidden;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-number:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-number-focused {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-number-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler {\n position: relative;\n display: flex;\n flex: 0 0 28px;\n align-items: center;\n justify-content: center;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: color 0.16s ease, background-color 0.16s ease;\n}\n.canvas-react-input-number-handler-down {\n border-right: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler-up {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler:hover:not(:disabled) {\n color: var(--canvas-react-color-primary);\n background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-input-number-handler:disabled {\n color: #c4c7cf;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler-icon {\n position: relative;\n display: block;\n width: 10px;\n height: 10px;\n}\n.canvas-react-input-number-handler-icon::before,\n.canvas-react-input-number-handler-icon::after {\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n background: currentColor;\n border-radius: 1px;\n transform: translate(-50%, -50%);\n}\n.canvas-react-input-number-handler-icon::before {\n width: 10px;\n height: 1.5px;\n}\n.canvas-react-input-number-handler-up .canvas-react-input-number-handler-icon::after {\n width: 1.5px;\n height: 10px;\n}\n.canvas-react-input-number-input-wrap {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-input-number-input {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0 8px;\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n text-align: center;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-input-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-input-number-input::-webkit-outer-spin-button,\n.canvas-react-input-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-input-number-addon {\n flex: 0 0 auto;\n padding-right: 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n user-select: none;\n}\n');
4415
+ var ReactInputNumber = React.forwardRef(
4416
+ function ReactInputNumber2(props, ref) {
4417
+ const {
4418
+ addonAfter,
4419
+ className,
4420
+ defaultValue = null,
4421
+ disabled,
4422
+ formatter,
4423
+ max,
4424
+ min,
4425
+ onBlur,
4426
+ onChange,
4427
+ onCommit,
4428
+ onFocus,
4429
+ onKeyDown,
4430
+ parser,
4431
+ precision,
4432
+ step = 1,
4433
+ style,
4434
+ value,
4435
+ ...restProps
4436
+ } = props;
4437
+ const isControlled = value !== void 0;
4438
+ const [innerValue, setInnerValue] = React.useState(
4439
+ isControlled ? value ?? null : defaultValue
4440
+ );
4441
+ const currentValue = isControlled ? value ?? null : innerValue;
4442
+ const [draftText, setDraftText] = React.useState(
4443
+ formatDisplayValue(
4444
+ currentValue,
4445
+ formatter,
4446
+ resolvePrecision(precision, step),
4447
+ step
4448
+ )
4449
+ );
4450
+ const [focused, setFocused] = React.useState(false);
4451
+ const resolvedPrecision = React.useMemo(
4452
+ () => resolvePrecision(precision, step),
4453
+ [precision, step]
4454
+ );
4455
+ React.useEffect(() => {
4456
+ if (!focused) {
4457
+ setDraftText(
4458
+ formatDisplayValue(currentValue, formatter, resolvedPrecision, step)
4459
+ );
4460
+ }
4461
+ }, [currentValue, focused, formatter, resolvedPrecision, step]);
4462
+ const commitValue = (nextValue) => {
4463
+ const normalized = normalizeNumberValue(nextValue, {
4464
+ min,
4465
+ max,
4466
+ precision: resolvedPrecision
4467
+ });
4468
+ if (!isControlled) {
4469
+ setInnerValue(normalized);
4470
+ }
4471
+ onChange?.(normalized);
4472
+ onCommit?.(normalized);
4473
+ setDraftText(
4474
+ formatDisplayValue(normalized, formatter, resolvedPrecision, step)
4475
+ );
4476
+ return normalized;
4477
+ };
4478
+ const stepBy = (direction) => {
4479
+ if (disabled) {
4480
+ return;
4481
+ }
4482
+ const base = currentValue == null || !Number.isFinite(currentValue) ? 0 : currentValue;
4483
+ const next = base + direction * step;
4484
+ commitValue(next);
4485
+ };
4486
+ const atMin = currentValue != null && min != null && currentValue <= min + Number.EPSILON;
4487
+ const atMax = currentValue != null && max != null && currentValue >= max - Number.EPSILON;
4488
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4489
+ "span",
4490
+ {
4491
+ className: joinClassNames(
4492
+ `${REACT_COMPONENT_PREFIX}-input-number`,
4493
+ focused && `${REACT_COMPONENT_PREFIX}-input-number-focused`,
4494
+ disabled && `${REACT_COMPONENT_PREFIX}-input-number-disabled`,
4495
+ className
4496
+ ),
4497
+ style,
4498
+ children: [
4499
+ /* @__PURE__ */ jsxRuntime.jsx(
4500
+ "button",
4501
+ {
4502
+ type: "button",
4503
+ tabIndex: -1,
4504
+ disabled: disabled || atMin,
4505
+ className: joinClassNames(
4506
+ `${REACT_COMPONENT_PREFIX}-input-number-handler`,
4507
+ `${REACT_COMPONENT_PREFIX}-input-number-handler-down`
4508
+ ),
4509
+ "aria-label": "\u51CF\u5C11",
4510
+ onMouseDown: (event) => {
4511
+ event.preventDefault();
4512
+ },
4513
+ onClick: () => {
4514
+ stepBy(-1);
4515
+ },
4516
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4517
+ "span",
4518
+ {
4519
+ className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
4520
+ "aria-hidden": "true"
4521
+ }
4522
+ )
4523
+ }
4524
+ ),
4525
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-input-wrap`, children: [
4526
+ /* @__PURE__ */ jsxRuntime.jsx(
4527
+ "input",
4528
+ {
4529
+ ...restProps,
4530
+ ref,
4531
+ disabled,
4532
+ inputMode: "decimal",
4533
+ value: draftText,
4534
+ className: `${REACT_COMPONENT_PREFIX}-input-number-input`,
4535
+ onFocus: (event) => {
4536
+ setFocused(true);
4537
+ onFocus?.(event);
4538
+ },
4539
+ onChange: (event) => {
4540
+ const nextText = event.target.value;
4541
+ setDraftText(nextText);
4542
+ const parsed = parser ? parser(nextText) : parseNumberText(nextText);
4543
+ if (!isControlled) {
4544
+ setInnerValue(parsed);
4545
+ }
4546
+ onChange?.(parsed);
4547
+ },
4548
+ onBlur: (event) => {
4549
+ setFocused(false);
4550
+ const parsed = parser ? parser(event.target.value) : parseNumberText(event.target.value);
4551
+ commitValue(parsed);
4552
+ onBlur?.(event);
4553
+ },
4554
+ onKeyDown: (event) => {
4555
+ if (event.key === "ArrowUp") {
4556
+ event.preventDefault();
4557
+ stepBy(1);
4558
+ } else if (event.key === "ArrowDown") {
4559
+ event.preventDefault();
4560
+ stepBy(-1);
4561
+ } else if (event.key === "Enter") {
4562
+ const parsed = parser ? parser(event.currentTarget.value) : parseNumberText(event.currentTarget.value);
4563
+ commitValue(parsed);
4564
+ }
4565
+ onKeyDown?.(event);
4566
+ }
4567
+ }
4568
+ ),
4569
+ addonAfter != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-addon`, children: addonAfter }) : null
4570
+ ] }),
4571
+ /* @__PURE__ */ jsxRuntime.jsx(
4572
+ "button",
4573
+ {
4574
+ type: "button",
4575
+ tabIndex: -1,
4576
+ disabled: disabled || atMax,
4577
+ className: joinClassNames(
4578
+ `${REACT_COMPONENT_PREFIX}-input-number-handler`,
4579
+ `${REACT_COMPONENT_PREFIX}-input-number-handler-up`
4580
+ ),
4581
+ "aria-label": "\u589E\u52A0",
4582
+ onMouseDown: (event) => {
4583
+ event.preventDefault();
4584
+ },
4585
+ onClick: () => {
4586
+ stepBy(1);
4587
+ },
4588
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4589
+ "span",
4590
+ {
4591
+ className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
4592
+ "aria-hidden": "true"
4593
+ }
4594
+ )
4595
+ }
4596
+ )
4597
+ ]
4598
+ }
4599
+ );
4600
+ }
4601
+ );
4602
+ function parseNumberText(value) {
4603
+ const text = value.trim().replace(/%/g, "");
4604
+ if (!text) {
4605
+ return null;
4606
+ }
4607
+ const nextValue = Number(text);
4608
+ return Number.isFinite(nextValue) ? nextValue : null;
4609
+ }
4610
+ function resolvePrecision(precision, step) {
4611
+ if (typeof precision === "number" && Number.isInteger(precision) && precision >= 0) {
4612
+ return precision;
4613
+ }
4614
+ const stepText = String(step);
4615
+ if (!stepText.includes(".")) {
4616
+ return 0;
4617
+ }
4618
+ return stepText.split(".")[1]?.length ?? 0;
4619
+ }
4620
+ function normalizeNumberValue(value, options) {
4621
+ if (value == null || !Number.isFinite(value)) {
4622
+ return null;
4623
+ }
4624
+ let next = value;
4625
+ if (options.min != null) {
4626
+ next = Math.max(options.min, next);
4627
+ }
4628
+ if (options.max != null) {
4629
+ next = Math.min(options.max, next);
4630
+ }
4631
+ const factor = 10 ** options.precision;
4632
+ return Math.round(next * factor) / factor;
4633
+ }
4634
+ function formatDisplayValue(value, formatter, precision, step) {
4635
+ if (formatter) {
4636
+ return formatter(value);
4637
+ }
4638
+ if (value == null || !Number.isFinite(value)) {
4639
+ return "";
4640
+ }
4641
+ const digits = resolvePrecision(precision, step);
4642
+ return digits > 0 ? value.toFixed(digits) : String(Math.round(value));
4643
+ }
4644
+
4263
4645
  // src/components/virtual-list/style.css
4264
4646
  styleInject('@import "../../styles/variables.css";\n.canvas-react-virtual-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-virtual-list-inner {\n position: relative;\n min-width: 100%;\n}\n.canvas-react-virtual-list-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
4265
- var ReactVirtualList = react.forwardRef(function ReactVirtualListInner(props, ref) {
4647
+ var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, ref) {
4266
4648
  const {
4267
4649
  className,
4268
4650
  empty,
@@ -4276,19 +4658,19 @@ var ReactVirtualList = react.forwardRef(function ReactVirtualListInner(props, re
4276
4658
  style,
4277
4659
  virtual = true
4278
4660
  } = props;
4279
- const hostRef = react.useRef(null);
4280
- const [scrollTop, setScrollTop] = react.useState(0);
4661
+ const hostRef = React.useRef(null);
4662
+ const [scrollTop, setScrollTop] = React.useState(0);
4281
4663
  const useVirtual = virtual && items.length * itemHeight > height;
4282
4664
  const startIndex = useVirtual ? Math.max(0, Math.floor(scrollTop / itemHeight) - overscan) : 0;
4283
4665
  const endIndex = useVirtual ? Math.min(
4284
4666
  items.length - 1,
4285
4667
  Math.ceil((scrollTop + height) / itemHeight) + overscan
4286
4668
  ) : items.length - 1;
4287
- const visibleItems = react.useMemo(
4669
+ const visibleItems = React.useMemo(
4288
4670
  () => items.slice(startIndex, endIndex + 1),
4289
4671
  [endIndex, items, startIndex]
4290
4672
  );
4291
- react.useImperativeHandle(ref, () => ({
4673
+ React.useImperativeHandle(ref, () => ({
4292
4674
  scrollToIndex: (index) => {
4293
4675
  const element = hostRef.current;
4294
4676
  if (!element || index < 0) {
@@ -4346,8 +4728,8 @@ var ReactVirtualList = react.forwardRef(function ReactVirtualListInner(props, re
4346
4728
  });
4347
4729
 
4348
4730
  // src/components/select/style.css
4349
- styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: 0 11px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-select:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-select-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 14px;\n min-width: 14px;\n height: 14px;\n margin-left: 8px;\n}\n.canvas-react-select-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n opacity: 1;\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-select-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n padding: 4px;\n}\n.canvas-react-select-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n position: relative;\n}\n.canvas-react-select-option {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n padding: 0 11px;\n border-radius: var(--canvas-react-radius-sm);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
4350
- var ReactSelect = react.forwardRef(
4731
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-select:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-select-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n opacity: 1;\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-select-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n padding: 4px;\n}\n.canvas-react-select-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n position: relative;\n}\n.canvas-react-select-option {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n padding: 0 11px;\n border-radius: var(--canvas-react-radius-sm);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
4732
+ var ReactSelect = React.forwardRef(
4351
4733
  function ReactSelect2(props, ref) {
4352
4734
  const {
4353
4735
  autoFocus,
@@ -4363,24 +4745,25 @@ var ReactSelect = react.forwardRef(
4363
4745
  placeholder,
4364
4746
  popupClassName,
4365
4747
  allowClear = true,
4748
+ showArrow = true,
4366
4749
  showSearch = false,
4367
4750
  style,
4368
4751
  value,
4369
4752
  virtual = true,
4370
4753
  ...restProps
4371
4754
  } = props;
4372
- const triggerRef = react.useRef(null);
4373
- const inputRef = react.useRef(null);
4374
- const listRef = react.useRef(null);
4375
- const skipFocusOpenRef = react.useRef(false);
4376
- const [open, setOpen] = react.useState(false);
4377
- const selectedIndex = react.useMemo(
4755
+ const triggerRef = React.useRef(null);
4756
+ const inputRef = React.useRef(null);
4757
+ const listRef = React.useRef(null);
4758
+ const skipFocusOpenRef = React.useRef(false);
4759
+ const [open, setOpen] = React.useState(false);
4760
+ const selectedIndex = React.useMemo(
4378
4761
  () => options.findIndex((option) => String(option.value) === String(value ?? "")),
4379
4762
  [options, value]
4380
4763
  );
4381
4764
  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : void 0;
4382
- const [keyword, setKeyword] = react.useState(selectedOption?.label ?? "");
4383
- const filteredOptions = react.useMemo(() => {
4765
+ const [keyword, setKeyword] = React.useState(selectedOption?.label ?? "");
4766
+ const filteredOptions = React.useMemo(() => {
4384
4767
  if (!showSearch) {
4385
4768
  return options;
4386
4769
  }
@@ -4392,27 +4775,27 @@ var ReactSelect = react.forwardRef(
4392
4775
  return option.label.toLowerCase().includes(search) || String(option.value).toLowerCase().includes(search);
4393
4776
  });
4394
4777
  }, [keyword, options]);
4395
- const [activeIndex, setActiveIndex] = react.useState(() => {
4778
+ const [activeIndex, setActiveIndex] = React.useState(() => {
4396
4779
  return selectedIndex >= 0 ? selectedIndex : 0;
4397
4780
  });
4398
- react.useImperativeHandle(ref, () => inputRef.current);
4399
- react.useEffect(() => {
4781
+ React.useImperativeHandle(ref, () => inputRef.current);
4782
+ React.useEffect(() => {
4400
4783
  if (autoFocus) {
4401
4784
  inputRef.current?.focus();
4402
4785
  }
4403
4786
  }, [autoFocus]);
4404
- react.useEffect(() => {
4787
+ React.useEffect(() => {
4405
4788
  if (!open) {
4406
4789
  setKeyword(selectedOption?.label ?? "");
4407
4790
  }
4408
4791
  }, [open, selectedOption]);
4409
- react.useEffect(() => {
4792
+ React.useEffect(() => {
4410
4793
  const nextIndex = filteredOptions.findIndex(
4411
4794
  (option) => String(option.value) === String(value ?? "")
4412
4795
  );
4413
4796
  setActiveIndex(nextIndex >= 0 ? nextIndex : 0);
4414
4797
  }, [filteredOptions, value]);
4415
- react.useEffect(() => {
4798
+ React.useEffect(() => {
4416
4799
  if (!open) {
4417
4800
  return;
4418
4801
  }
@@ -4554,7 +4937,7 @@ var ReactSelect = react.forwardRef(
4554
4937
  }
4555
4938
  }
4556
4939
  ),
4557
- /* @__PURE__ */ jsxRuntime.jsxs(
4940
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
4558
4941
  "span",
4559
4942
  {
4560
4943
  className: joinClassNames(
@@ -4582,7 +4965,7 @@ var ReactSelect = react.forwardRef(
4582
4965
  )
4583
4966
  }
4584
4967
  ) : null,
4585
- /* @__PURE__ */ jsxRuntime.jsx(
4968
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
4586
4969
  "span",
4587
4970
  {
4588
4971
  className: joinClassNames(
@@ -4590,10 +4973,10 @@ var ReactSelect = react.forwardRef(
4590
4973
  open && `${REACT_COMPONENT_PREFIX}-select-arrow-open`
4591
4974
  )
4592
4975
  }
4593
- )
4976
+ ) : null
4594
4977
  ]
4595
4978
  }
4596
- )
4979
+ ) : null
4597
4980
  ]
4598
4981
  }
4599
4982
  ),
@@ -4678,14 +5061,14 @@ function ReactPagination(props) {
4678
5061
  simple,
4679
5062
  total
4680
5063
  } = props;
4681
- const [quickValue, setQuickValue] = react.useState("");
5064
+ const [quickValue, setQuickValue] = React.useState("");
4682
5065
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
4683
5066
  const safeCurrent = clampPage(current, totalPages);
4684
5067
  const range = total === 0 ? [0, 0] : [
4685
5068
  (safeCurrent - 1) * pageSize + 1,
4686
5069
  Math.min(safeCurrent * pageSize, total)
4687
5070
  ];
4688
- const pages = react.useMemo(
5071
+ const pages = React.useMemo(
4689
5072
  () => buildPageItems(safeCurrent, totalPages, showLessItems),
4690
5073
  [safeCurrent, totalPages, showLessItems]
4691
5074
  );
@@ -4832,11 +5215,245 @@ function clampPage(page, totalPages) {
4832
5215
  }
4833
5216
  return Math.min(Math.max(1, Math.trunc(page)), totalPages);
4834
5217
  }
5218
+ var compatibleIdSeed = 0;
5219
+ function useCompatibleId(prefix = "canvas-react-id") {
5220
+ const nativeUseId = React__namespace.useId;
5221
+ const fallbackIdRef = React__namespace.useRef();
5222
+ if (!fallbackIdRef.current) {
5223
+ compatibleIdSeed += 1;
5224
+ fallbackIdRef.current = `${prefix}-${compatibleIdSeed}`;
5225
+ }
5226
+ return nativeUseId ? nativeUseId() : fallbackIdRef.current;
5227
+ }
5228
+
5229
+ // src/components/popconfirm/style.css
5230
+ styleInject('@import "../../styles/variables.css";\n.canvas-react-popconfirm-trigger {\n display: inline-flex;\n max-width: 100%;\n}\n.canvas-react-popconfirm-trigger-disabled {\n cursor: not-allowed;\n}\n.canvas-react-popconfirm-popup {\n overflow: visible;\n}\n.canvas-react-popconfirm {\n position: relative;\n box-sizing: border-box;\n width: max-content;\n min-width: 180px;\n max-width: 320px;\n padding: 12px;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n line-height: 1.5;\n}\n.canvas-react-popconfirm-arrow {\n position: absolute;\n z-index: 1;\n box-sizing: border-box;\n width: 10px;\n height: 10px;\n border: 0;\n background: var(--canvas-react-color-bg, #ffffff);\n pointer-events: none;\n transform: rotate(45deg);\n}\n.canvas-react-popup[data-placement^=bottom] .canvas-react-popconfirm-arrow {\n top: -5px;\n border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popconfirm-arrow {\n bottom: -5px;\n border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Left] .canvas-react-popconfirm-arrow {\n left: 24px;\n}\n.canvas-react-popup[data-placement$=Right] .canvas-react-popconfirm-arrow {\n right: 24px;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popconfirm-arrow {\n right: -5px;\n border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popconfirm-arrow {\n left: -5px;\n border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Top] .canvas-react-popconfirm-arrow {\n top: 18px;\n}\n.canvas-react-popup[data-placement$=Bottom] .canvas-react-popconfirm-arrow {\n bottom: 18px;\n}\n.canvas-react-popconfirm-message {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n.canvas-react-popconfirm-icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n margin-top: 2px;\n color: #faad14;\n font-size: 12px;\n line-height: 1;\n}\n.canvas-react-popconfirm-default-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #faad14;\n color: #ffffff;\n font-size: 11px;\n font-weight: 700;\n line-height: 1;\n}\n.canvas-react-popconfirm-text {\n min-width: 0;\n}\n.canvas-react-popconfirm-title {\n color: var(--canvas-react-color-text);\n font-weight: 500;\n word-break: break-word;\n}\n.canvas-react-popconfirm-description {\n margin-top: 4px;\n color: var(--canvas-react-color-text-muted);\n word-break: break-word;\n}\n.canvas-react-popconfirm-actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 12px;\n}\n.canvas-react-popconfirm-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: 26px;\n min-width: 48px;\n padding: 0 10px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: 12px;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-popconfirm-button:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-popconfirm-button-primary {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #ffffff;\n}\n.canvas-react-popconfirm-button-primary:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n color: #ffffff;\n}\n.canvas-react-popconfirm-button:disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-popconfirm-button:disabled:hover {\n border-color: var(--canvas-react-color-border);\n color: var(--canvas-react-color-text);\n}\n.canvas-react-popconfirm-button-primary:disabled:hover {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #ffffff;\n}\n.canvas-react-popconfirm-loading {\n width: 12px;\n height: 12px;\n border: 2px solid rgba(255, 255, 255, 0.45);\n border-top-color: #ffffff;\n border-radius: 50%;\n animation: canvas-react-popconfirm-loading 0.8s linear infinite;\n}\n@keyframes canvas-react-popconfirm-loading {\n to {\n transform: rotate(360deg);\n }\n}\n');
5231
+ function ReactPopconfirm(props) {
5232
+ const {
5233
+ cancelButtonProps,
5234
+ cancelText = "\u53D6\u6D88",
5235
+ children,
5236
+ className,
5237
+ confirmLoading,
5238
+ defaultOpen = false,
5239
+ description,
5240
+ disabled = false,
5241
+ icon,
5242
+ offset = 8,
5243
+ okButtonProps,
5244
+ okText = "\u786E\u5B9A",
5245
+ onCancel,
5246
+ onConfirm,
5247
+ onOpenChange,
5248
+ open,
5249
+ placement = "topLeft",
5250
+ popupClassName,
5251
+ popupStyle,
5252
+ showCancel = true,
5253
+ style,
5254
+ title,
5255
+ zIndex
5256
+ } = props;
5257
+ const triggerRef = React.useRef(null);
5258
+ const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
5259
+ const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
5260
+ const titleId = useCompatibleId("canvas-react-popconfirm-title");
5261
+ const descriptionId = useCompatibleId("canvas-react-popconfirm-description");
5262
+ const controlled = open !== void 0;
5263
+ const mergedOpen = controlled ? Boolean(open) : innerOpen;
5264
+ const popupOpen = mergedOpen && !disabled;
5265
+ const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
5266
+ const hasTitle = title !== null && title !== void 0 && title !== false;
5267
+ const hasDescription = description !== null && description !== void 0 && description !== false;
5268
+ const {
5269
+ className: okButtonClassName,
5270
+ disabled: okButtonDisabled,
5271
+ ...restOkButtonProps
5272
+ } = okButtonProps ?? {};
5273
+ const {
5274
+ className: cancelButtonClassName,
5275
+ disabled: cancelButtonDisabled,
5276
+ ...restCancelButtonProps
5277
+ } = cancelButtonProps ?? {};
5278
+ React.useEffect(() => {
5279
+ if (!disabled || !mergedOpen) {
5280
+ return;
5281
+ }
5282
+ if (!controlled) {
5283
+ setInnerOpen(false);
5284
+ }
5285
+ onOpenChange?.(false);
5286
+ }, [controlled, disabled, mergedOpen, onOpenChange]);
5287
+ const setOpen = (nextOpen) => {
5288
+ const safeOpen = disabled ? false : nextOpen;
5289
+ if (!controlled) {
5290
+ setInnerOpen(safeOpen);
5291
+ }
5292
+ if (safeOpen !== mergedOpen) {
5293
+ onOpenChange?.(safeOpen);
5294
+ }
5295
+ };
5296
+ const handleConfirm = (event) => {
5297
+ if (mergedConfirmLoading || okButtonDisabled) {
5298
+ return;
5299
+ }
5300
+ const result = onConfirm?.(event);
5301
+ if (isPromiseLike(result)) {
5302
+ setInnerConfirmLoading(true);
5303
+ Promise.resolve(result).then(() => {
5304
+ setOpen(false);
5305
+ }).catch(() => void 0).finally(() => {
5306
+ setInnerConfirmLoading(false);
5307
+ });
5308
+ return;
5309
+ }
5310
+ setOpen(false);
5311
+ };
5312
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5313
+ /* @__PURE__ */ jsxRuntime.jsx(
5314
+ "span",
5315
+ {
5316
+ ref: triggerRef,
5317
+ className: joinClassNames(
5318
+ `${REACT_COMPONENT_PREFIX}-popconfirm-trigger`,
5319
+ disabled && `${REACT_COMPONENT_PREFIX}-popconfirm-trigger-disabled`,
5320
+ className
5321
+ ),
5322
+ style,
5323
+ "aria-expanded": popupOpen,
5324
+ "aria-haspopup": "dialog",
5325
+ onClick: () => {
5326
+ if (disabled) {
5327
+ return;
5328
+ }
5329
+ setOpen(!mergedOpen);
5330
+ },
5331
+ children
5332
+ }
5333
+ ),
5334
+ /* @__PURE__ */ jsxRuntime.jsx(
5335
+ ReactPopup,
5336
+ {
5337
+ open: popupOpen,
5338
+ anchorRef: triggerRef,
5339
+ offset,
5340
+ placement,
5341
+ zIndex,
5342
+ surfaceClassName: joinClassNames(
5343
+ `${REACT_COMPONENT_PREFIX}-popconfirm-popup`,
5344
+ `${REACT_COMPONENT_PREFIX}-popconfirm-placement-${placement}`,
5345
+ popupClassName
5346
+ ),
5347
+ surfaceStyle: popupStyle,
5348
+ onOpenChange: setOpen,
5349
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
5350
+ "div",
5351
+ {
5352
+ className: `${REACT_COMPONENT_PREFIX}-popconfirm`,
5353
+ role: "alertdialog",
5354
+ "aria-labelledby": hasTitle ? titleId : void 0,
5355
+ "aria-describedby": hasDescription ? descriptionId : void 0,
5356
+ children: [
5357
+ /* @__PURE__ */ jsxRuntime.jsx(
5358
+ "span",
5359
+ {
5360
+ className: `${REACT_COMPONENT_PREFIX}-popconfirm-arrow`,
5361
+ "aria-hidden": "true"
5362
+ }
5363
+ ),
5364
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-message`, children: [
5365
+ icon !== null ? /* @__PURE__ */ jsxRuntime.jsx(
5366
+ "span",
5367
+ {
5368
+ className: `${REACT_COMPONENT_PREFIX}-popconfirm-icon`,
5369
+ "aria-hidden": "true",
5370
+ children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(
5371
+ "span",
5372
+ {
5373
+ className: `${REACT_COMPONENT_PREFIX}-popconfirm-default-icon`,
5374
+ children: "!"
5375
+ }
5376
+ )
5377
+ }
5378
+ ) : null,
5379
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-text`, children: [
5380
+ hasTitle ? /* @__PURE__ */ jsxRuntime.jsx(
5381
+ "div",
5382
+ {
5383
+ id: titleId,
5384
+ className: `${REACT_COMPONENT_PREFIX}-popconfirm-title`,
5385
+ children: title
5386
+ }
5387
+ ) : null,
5388
+ hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(
5389
+ "div",
5390
+ {
5391
+ id: descriptionId,
5392
+ className: `${REACT_COMPONENT_PREFIX}-popconfirm-description`,
5393
+ children: description
5394
+ }
5395
+ ) : null
5396
+ ] })
5397
+ ] }),
5398
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-actions`, children: [
5399
+ showCancel ? /* @__PURE__ */ jsxRuntime.jsx(
5400
+ "button",
5401
+ {
5402
+ ...restCancelButtonProps,
5403
+ type: "button",
5404
+ className: joinClassNames(
5405
+ `${REACT_COMPONENT_PREFIX}-popconfirm-button`,
5406
+ `${REACT_COMPONENT_PREFIX}-popconfirm-button-cancel`,
5407
+ cancelButtonClassName
5408
+ ),
5409
+ disabled: mergedConfirmLoading || cancelButtonDisabled,
5410
+ onClick: (event) => {
5411
+ onCancel?.(event);
5412
+ setOpen(false);
5413
+ },
5414
+ children: cancelText
5415
+ }
5416
+ ) : null,
5417
+ /* @__PURE__ */ jsxRuntime.jsxs(
5418
+ "button",
5419
+ {
5420
+ ...restOkButtonProps,
5421
+ type: "button",
5422
+ className: joinClassNames(
5423
+ `${REACT_COMPONENT_PREFIX}-popconfirm-button`,
5424
+ `${REACT_COMPONENT_PREFIX}-popconfirm-button-primary`,
5425
+ okButtonClassName
5426
+ ),
5427
+ disabled: mergedConfirmLoading || okButtonDisabled,
5428
+ onClick: handleConfirm,
5429
+ children: [
5430
+ mergedConfirmLoading ? /* @__PURE__ */ jsxRuntime.jsx(
5431
+ "span",
5432
+ {
5433
+ className: `${REACT_COMPONENT_PREFIX}-popconfirm-loading`,
5434
+ "aria-hidden": "true"
5435
+ }
5436
+ ) : null,
5437
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: okText })
5438
+ ]
5439
+ }
5440
+ )
5441
+ ] })
5442
+ ]
5443
+ }
5444
+ )
5445
+ }
5446
+ )
5447
+ ] });
5448
+ }
5449
+ function isPromiseLike(value) {
5450
+ return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
5451
+ }
4835
5452
 
4836
5453
  // src/components/quarter/style.css
4837
5454
  styleInject('@import "../year/style.css";\n.canvas-react-quarter-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 12px 8px;\n}\n.canvas-react-quarter-cell {\n height: 56px;\n font-size: 16px;\n font-weight: 600;\n}\n');
4838
5455
  var QUARTERS = ["Q1", "Q2", "Q3", "Q4"];
4839
- var ReactQuarterPicker = react.forwardRef(
5456
+ var ReactQuarterPicker = React.forwardRef(
4840
5457
  function ReactQuarterPicker2(props, ref) {
4841
5458
  const {
4842
5459
  autoFocus,
@@ -4849,39 +5466,40 @@ var ReactQuarterPicker = react.forwardRef(
4849
5466
  placeholder = "\u8BF7\u9009\u62E9\u5B63\u5EA6",
4850
5467
  popupClassName,
4851
5468
  allowClear = true,
5469
+ showArrow = true,
4852
5470
  style,
4853
5471
  value,
4854
5472
  ...restProps
4855
5473
  } = props;
4856
- const triggerRef = react.useRef(null);
4857
- const inputRef = react.useRef(null);
4858
- const popupRef = react.useRef(null);
4859
- const skipFocusOpenRef = react.useRef(false);
4860
- const [open, setOpen] = react.useState(false);
4861
- const [mode, setMode] = react.useState("quarter");
4862
- const parsedValue = react.useMemo(() => parseQuarterValue(value), [value]);
4863
- const [panelYear, setPanelYear] = react.useState(
5474
+ const triggerRef = React.useRef(null);
5475
+ const inputRef = React.useRef(null);
5476
+ const popupRef = React.useRef(null);
5477
+ const skipFocusOpenRef = React.useRef(false);
5478
+ const [open, setOpen] = React.useState(false);
5479
+ const [mode, setMode] = React.useState("quarter");
5480
+ const parsedValue = React.useMemo(() => parseQuarterValue(value), [value]);
5481
+ const [panelYear, setPanelYear] = React.useState(
4864
5482
  () => parsedValue?.year ?? (/* @__PURE__ */ new Date()).getFullYear()
4865
5483
  );
4866
- const yearPanelStart = react.useMemo(() => resolveDecadeStart5(panelYear), [panelYear]);
4867
- const decadePanelStart = react.useMemo(() => {
5484
+ const yearPanelStart = React.useMemo(() => resolveDecadeStart5(panelYear), [panelYear]);
5485
+ const decadePanelStart = React.useMemo(() => {
4868
5486
  return Math.floor(yearPanelStart / 100) * 100;
4869
5487
  }, [yearPanelStart]);
4870
- const yearItems = react.useMemo(() => {
5488
+ const yearItems = React.useMemo(() => {
4871
5489
  return Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index);
4872
5490
  }, [yearPanelStart]);
4873
- const decadeItems = react.useMemo(() => {
5491
+ const decadeItems = React.useMemo(() => {
4874
5492
  return Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10);
4875
5493
  }, [decadePanelStart]);
4876
5494
  const displayValue = parsedValue == null ? "" : `${parsedValue.year}-${parsedValue.quarter}`;
4877
5495
  const showClear = allowClear && !disabled && displayValue.length > 0;
4878
- react.useImperativeHandle(ref, () => inputRef.current);
4879
- react.useEffect(() => {
5496
+ React.useImperativeHandle(ref, () => inputRef.current);
5497
+ React.useEffect(() => {
4880
5498
  if (autoFocus) {
4881
5499
  inputRef.current?.focus();
4882
5500
  }
4883
5501
  }, [autoFocus]);
4884
- react.useEffect(() => {
5502
+ React.useEffect(() => {
4885
5503
  if (!open) {
4886
5504
  return;
4887
5505
  }
@@ -4962,7 +5580,7 @@ var ReactQuarterPicker = react.forwardRef(
4962
5580
  }
4963
5581
  }
4964
5582
  ),
4965
- /* @__PURE__ */ jsxRuntime.jsxs(
5583
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
4966
5584
  "span",
4967
5585
  {
4968
5586
  className: joinClassNames(
@@ -4992,7 +5610,7 @@ var ReactQuarterPicker = react.forwardRef(
4992
5610
  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
4993
5611
  }
4994
5612
  ) : null,
4995
- /* @__PURE__ */ jsxRuntime.jsx(
5613
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
4996
5614
  "span",
4997
5615
  {
4998
5616
  className: joinClassNames(
@@ -5000,10 +5618,10 @@ var ReactQuarterPicker = react.forwardRef(
5000
5618
  open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
5001
5619
  )
5002
5620
  }
5003
- )
5621
+ ) : null
5004
5622
  ]
5005
5623
  }
5006
- )
5624
+ ) : null
5007
5625
  ]
5008
5626
  }
5009
5627
  ),
@@ -5216,7 +5834,7 @@ function parseQuarterValue(value) {
5216
5834
  function resolveDecadeStart5(year) {
5217
5835
  return Math.floor(year / 10) * 10;
5218
5836
  }
5219
- var ReactTimePicker = react.forwardRef(
5837
+ var ReactTimePicker = React.forwardRef(
5220
5838
  function ReactTimePicker2(props, ref) {
5221
5839
  const {
5222
5840
  autoFocus,
@@ -5229,26 +5847,27 @@ var ReactTimePicker = react.forwardRef(
5229
5847
  placeholder = "HH:mm:ss",
5230
5848
  popupClassName,
5231
5849
  allowClear = true,
5850
+ showArrow = true,
5232
5851
  style,
5233
5852
  value,
5234
5853
  ...restProps
5235
5854
  } = props;
5236
- const triggerRef = react.useRef(null);
5237
- const inputRef = react.useRef(null);
5238
- const popupRef = react.useRef(null);
5239
- const skipFocusOpenRef = react.useRef(false);
5240
- const [open, setOpen] = react.useState(false);
5241
- const [draftValue, setDraftValue] = react.useState(value ?? "");
5242
- const parsedValue = react.useMemo(() => parseTimeValue(value), [value]);
5855
+ const triggerRef = React.useRef(null);
5856
+ const inputRef = React.useRef(null);
5857
+ const popupRef = React.useRef(null);
5858
+ const skipFocusOpenRef = React.useRef(false);
5859
+ const [open, setOpen] = React.useState(false);
5860
+ const [draftValue, setDraftValue] = React.useState(value ?? "");
5861
+ const parsedValue = React.useMemo(() => parseTimeValue(value), [value]);
5243
5862
  const displayValue = parsedValue ? formatTimeValue(parsedValue) : value ?? "";
5244
5863
  const showClear = allowClear && !disabled && typeof value === "string" && value.trim().length > 0;
5245
- react.useImperativeHandle(ref, () => inputRef.current);
5246
- react.useEffect(() => {
5864
+ React.useImperativeHandle(ref, () => inputRef.current);
5865
+ React.useEffect(() => {
5247
5866
  if (autoFocus) {
5248
5867
  inputRef.current?.focus();
5249
5868
  }
5250
5869
  }, [autoFocus]);
5251
- react.useEffect(() => {
5870
+ React.useEffect(() => {
5252
5871
  setDraftValue(value ?? "");
5253
5872
  }, [value]);
5254
5873
  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-time-wrap`, children: [
@@ -5328,7 +5947,7 @@ var ReactTimePicker = react.forwardRef(
5328
5947
  }
5329
5948
  }
5330
5949
  ),
5331
- /* @__PURE__ */ jsxRuntime.jsxs(
5950
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
5332
5951
  "span",
5333
5952
  {
5334
5953
  className: joinClassNames(
@@ -5358,7 +5977,7 @@ var ReactTimePicker = react.forwardRef(
5358
5977
  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-time-clear-icon` })
5359
5978
  }
5360
5979
  ) : null,
5361
- /* @__PURE__ */ jsxRuntime.jsx(
5980
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
5362
5981
  "span",
5363
5982
  {
5364
5983
  className: joinClassNames(
@@ -5366,10 +5985,10 @@ var ReactTimePicker = react.forwardRef(
5366
5985
  open && `${REACT_COMPONENT_PREFIX}-time-arrow-open`
5367
5986
  )
5368
5987
  }
5369
- )
5988
+ ) : null
5370
5989
  ]
5371
5990
  }
5372
- )
5991
+ ) : null
5373
5992
  ]
5374
5993
  }
5375
5994
  ),
@@ -5453,7 +6072,7 @@ function handleInputBlur4(params) {
5453
6072
  setOpen(false);
5454
6073
  onBlur?.(event);
5455
6074
  }
5456
- var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props, ref) {
6075
+ var ReactTimeRangePicker = React.forwardRef(function ReactTimeRangePicker2(props, ref) {
5457
6076
  const {
5458
6077
  autoFocus,
5459
6078
  className,
@@ -5467,25 +6086,26 @@ var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props
5467
6086
  rangeSeparator = " ~ ",
5468
6087
  style,
5469
6088
  value,
6089
+ showArrow = true,
5470
6090
  ...restProps
5471
6091
  } = props;
5472
- const triggerRef = react.useRef(null);
5473
- const startInputRef = react.useRef(null);
5474
- const endInputRef = react.useRef(null);
5475
- const popupRef = react.useRef(null);
5476
- const [open, setOpen] = react.useState(false);
5477
- const [activePart, setActivePart] = react.useState("start");
5478
- const skipFocusOpenRef = react.useRef(false);
5479
- const [draftRange, setDraftRange] = react.useState(
6092
+ const triggerRef = React.useRef(null);
6093
+ const startInputRef = React.useRef(null);
6094
+ const endInputRef = React.useRef(null);
6095
+ const popupRef = React.useRef(null);
6096
+ const [open, setOpen] = React.useState(false);
6097
+ const [activePart, setActivePart] = React.useState("start");
6098
+ const skipFocusOpenRef = React.useRef(false);
6099
+ const [draftRange, setDraftRange] = React.useState(
5480
6100
  () => parseTimeRangeValue(value)
5481
6101
  );
5482
- react.useImperativeHandle(ref, () => startInputRef.current);
5483
- react.useEffect(() => {
6102
+ React.useImperativeHandle(ref, () => startInputRef.current);
6103
+ React.useEffect(() => {
5484
6104
  if (autoFocus) {
5485
6105
  startInputRef.current?.focus();
5486
6106
  }
5487
6107
  }, [autoFocus]);
5488
- react.useEffect(() => {
6108
+ React.useEffect(() => {
5489
6109
  setDraftRange(parseTimeRangeValue(value));
5490
6110
  }, [rangeSeparator, value]);
5491
6111
  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-time-wrap`, children: [
@@ -5648,7 +6268,7 @@ var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props
5648
6268
  }
5649
6269
  )
5650
6270
  ] }),
5651
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-time-actions`, children: /* @__PURE__ */ jsxRuntime.jsx(
6271
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-time-actions`, children: /* @__PURE__ */ jsxRuntime.jsx(
5652
6272
  "span",
5653
6273
  {
5654
6274
  className: joinClassNames(
@@ -5656,7 +6276,7 @@ var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props
5656
6276
  open && `${REACT_COMPONENT_PREFIX}-time-arrow-open`
5657
6277
  )
5658
6278
  }
5659
- ) })
6279
+ ) }) : null
5660
6280
  ]
5661
6281
  }
5662
6282
  ),
@@ -5772,7 +6392,7 @@ function compareTimeValue(left, right) {
5772
6392
  const rightSeconds = Number(rightValue.hour) * 3600 + Number(rightValue.minute) * 60 + Number(rightValue.second);
5773
6393
  return leftSeconds - rightSeconds;
5774
6394
  }
5775
- var ReactYearPicker = react.forwardRef(
6395
+ var ReactYearPicker = React.forwardRef(
5776
6396
  function ReactYearPicker2(props, ref) {
5777
6397
  const {
5778
6398
  autoFocus,
@@ -5785,38 +6405,39 @@ var ReactYearPicker = react.forwardRef(
5785
6405
  placeholder = "\u8BF7\u9009\u62E9\u5E74\u4EFD",
5786
6406
  popupClassName,
5787
6407
  allowClear = true,
6408
+ showArrow = true,
5788
6409
  style,
5789
6410
  value,
5790
6411
  ...restProps
5791
6412
  } = props;
5792
- const triggerRef = react.useRef(null);
5793
- const inputRef = react.useRef(null);
5794
- const popupRef = react.useRef(null);
5795
- const skipFocusOpenRef = react.useRef(false);
5796
- const [open, setOpen] = react.useState(false);
5797
- const [mode, setMode] = react.useState("year");
5798
- const selectedYear = react.useMemo(() => parseYearValue(value), [value]);
5799
- const [panelStartYear, setPanelStartYear] = react.useState(
6413
+ const triggerRef = React.useRef(null);
6414
+ const inputRef = React.useRef(null);
6415
+ const popupRef = React.useRef(null);
6416
+ const skipFocusOpenRef = React.useRef(false);
6417
+ const [open, setOpen] = React.useState(false);
6418
+ const [mode, setMode] = React.useState("year");
6419
+ const selectedYear = React.useMemo(() => parseYearValue(value), [value]);
6420
+ const [panelStartYear, setPanelStartYear] = React.useState(
5800
6421
  () => resolveDecadeStart6(selectedYear ?? (/* @__PURE__ */ new Date()).getFullYear())
5801
6422
  );
5802
6423
  const displayValue = selectedYear == null ? "" : String(selectedYear);
5803
6424
  const showClear = allowClear && !disabled && displayValue.length > 0;
5804
- const yearItems = react.useMemo(() => {
6425
+ const yearItems = React.useMemo(() => {
5805
6426
  return Array.from({ length: 12 }, (_, index) => panelStartYear - 1 + index);
5806
6427
  }, [panelStartYear]);
5807
- const decadePanelStart = react.useMemo(() => {
6428
+ const decadePanelStart = React.useMemo(() => {
5808
6429
  return Math.floor(panelStartYear / 100) * 100;
5809
6430
  }, [panelStartYear]);
5810
- const decadeItems = react.useMemo(() => {
6431
+ const decadeItems = React.useMemo(() => {
5811
6432
  return Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10);
5812
6433
  }, [decadePanelStart]);
5813
- react.useImperativeHandle(ref, () => inputRef.current);
5814
- react.useEffect(() => {
6434
+ React.useImperativeHandle(ref, () => inputRef.current);
6435
+ React.useEffect(() => {
5815
6436
  if (autoFocus) {
5816
6437
  inputRef.current?.focus();
5817
6438
  }
5818
6439
  }, [autoFocus]);
5819
- react.useEffect(() => {
6440
+ React.useEffect(() => {
5820
6441
  if (!open) {
5821
6442
  return;
5822
6443
  }
@@ -5897,7 +6518,7 @@ var ReactYearPicker = react.forwardRef(
5897
6518
  }
5898
6519
  }
5899
6520
  ),
5900
- /* @__PURE__ */ jsxRuntime.jsxs(
6521
+ showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
5901
6522
  "span",
5902
6523
  {
5903
6524
  className: joinClassNames(
@@ -5927,7 +6548,7 @@ var ReactYearPicker = react.forwardRef(
5927
6548
  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
5928
6549
  }
5929
6550
  ) : null,
5930
- /* @__PURE__ */ jsxRuntime.jsx(
6551
+ showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
5931
6552
  "span",
5932
6553
  {
5933
6554
  className: joinClassNames(
@@ -5935,10 +6556,10 @@ var ReactYearPicker = react.forwardRef(
5935
6556
  open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
5936
6557
  )
5937
6558
  }
5938
- )
6559
+ ) : null
5939
6560
  ]
5940
6561
  }
5941
- )
6562
+ ) : null
5942
6563
  ]
5943
6564
  }
5944
6565
  ),
@@ -6099,21 +6720,27 @@ function resolveDecadeStart6(year) {
6099
6720
  exports.REACT_COMPONENT_PREFIX = REACT_COMPONENT_PREFIX;
6100
6721
  exports.ReactCheckbox = ReactCheckbox;
6101
6722
  exports.ReactColorPicker = ReactColorPicker;
6723
+ exports.ReactContentScaleProvider = ReactContentScaleProvider;
6102
6724
  exports.ReactDatePicker = ReactDatePicker;
6103
6725
  exports.ReactDateRangePicker = ReactDateRangePicker;
6104
6726
  exports.ReactDateTimePicker = ReactDateTimePicker;
6105
6727
  exports.ReactDateTimeRangePicker = ReactDateTimeRangePicker;
6106
6728
  exports.ReactImagePreview = ReactImagePreview;
6107
6729
  exports.ReactInput = ReactInput;
6730
+ exports.ReactInputNumber = ReactInputNumber;
6108
6731
  exports.ReactMonthPicker = ReactMonthPicker;
6109
6732
  exports.ReactNumberInput = ReactNumberInput;
6110
6733
  exports.ReactPagination = ReactPagination;
6734
+ exports.ReactPopconfirm = ReactPopconfirm;
6111
6735
  exports.ReactPopup = ReactPopup;
6112
6736
  exports.ReactQuarterPicker = ReactQuarterPicker;
6113
6737
  exports.ReactSelect = ReactSelect;
6114
6738
  exports.ReactTimePicker = ReactTimePicker;
6115
6739
  exports.ReactTimeRangePicker = ReactTimeRangePicker;
6740
+ exports.ReactTransition = ReactTransition;
6116
6741
  exports.ReactVirtualList = ReactVirtualList;
6117
6742
  exports.ReactYearPicker = ReactYearPicker;
6743
+ exports.useReactContentScale = useReactContentScale;
6744
+ exports.useReactTransition = useReactTransition;
6118
6745
  //# sourceMappingURL=index.cjs.map
6119
6746
  //# sourceMappingURL=index.cjs.map