shadcn-glass-ui 2.2.0 → 2.2.3

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 (47) hide show
  1. package/CHANGELOG.md +12 -46
  2. package/README.md +11 -12
  3. package/context7.json +4 -15
  4. package/dist/cli/index.cjs +1 -1
  5. package/dist/components.cjs +4 -4
  6. package/dist/components.d.ts +90 -161
  7. package/dist/components.js +1 -1
  8. package/dist/hooks.cjs +2 -2
  9. package/dist/index.cjs +1064 -2292
  10. package/dist/index.cjs.map +1 -1
  11. package/dist/index.js +1055 -2256
  12. package/dist/index.js.map +1 -1
  13. package/dist/r/alert-glass.json +1 -1
  14. package/dist/r/badge-glass.json +1 -1
  15. package/dist/r/button-glass.json +1 -1
  16. package/dist/r/card-glass.json +40 -0
  17. package/dist/r/input-glass.json +1 -1
  18. package/dist/r/modal-glass.json +5 -5
  19. package/dist/r/registry.json +7 -1
  20. package/dist/r/tooltip-glass.json +1 -1
  21. package/dist/shadcn-glass-ui.css +1 -1
  22. package/dist/{theme-context-D_cb9KzA.cjs → theme-context-BEA8K_rq.cjs} +2 -2
  23. package/dist/{theme-context-D_cb9KzA.cjs.map → theme-context-BEA8K_rq.cjs.map} +1 -1
  24. package/dist/themes.cjs +1 -1
  25. package/dist/{trust-score-card-glass-CTsEVRD3.cjs → trust-score-card-glass-DTS1RdIt.cjs} +189 -341
  26. package/dist/trust-score-card-glass-DTS1RdIt.cjs.map +1 -0
  27. package/dist/{trust-score-card-glass-CUStm4o_.js → trust-score-card-glass-Dg4_b_g_.js} +158 -238
  28. package/dist/trust-score-card-glass-Dg4_b_g_.js.map +1 -0
  29. package/dist/{use-focus--Hw2nevi.cjs → use-focus-CdoUzFQ8.cjs} +2 -2
  30. package/dist/{use-focus--Hw2nevi.cjs.map → use-focus-CdoUzFQ8.cjs.map} +1 -1
  31. package/dist/{use-wallpaper-tint-B4oMQsXQ.cjs → use-wallpaper-tint-Rq5UgY9L.cjs} +2 -2
  32. package/dist/{use-wallpaper-tint-B4oMQsXQ.cjs.map → use-wallpaper-tint-Rq5UgY9L.cjs.map} +1 -1
  33. package/dist/{utils-BqeJ4aco.cjs → utils-NLnOCttr.cjs} +2 -2
  34. package/dist/{utils-BqeJ4aco.cjs.map → utils-NLnOCttr.cjs.map} +1 -1
  35. package/dist/utils.cjs +1 -1
  36. package/docs/ADVANCED_PATTERNS.md +7 -5
  37. package/docs/AI_USAGE.md +0 -1
  38. package/docs/BEST_PRACTICES.md +0 -2
  39. package/docs/BREAKING_CHANGES.md +0 -1
  40. package/docs/COMPONENTS_CATALOG.md +1 -4
  41. package/docs/COMPONENT_PATTERNS.md +325 -0
  42. package/docs/GETTING_STARTED.md +52 -28
  43. package/docs/api/README.md +0 -2
  44. package/docs/api/variables/ModalGlass.md +5 -4
  45. package/package.json +2 -4
  46. package/dist/trust-score-card-glass-CTsEVRD3.cjs.map +0 -1
  47. package/dist/trust-score-card-glass-CUStm4o_.js.map +0 -1
package/dist/index.js CHANGED
@@ -1,18 +1,103 @@
1
- import { $ as BaseProgressGlass, $t as DropdownMenuGlassShortcut, A as useChartHeight, An as InteractiveCard, At as notificationVariants, B as adaptEventsOfChild, Bt as GlassCardTitle, C as sparklineContainerVariants, Cn as AvatarGlassImage, Ct as skeletonVariants, D as Tooltip, Dn as AlertGlass, Dt as PopoverGlassLegacy, E as Cell, En as statusSizes, Et as PopoverGlassContent, F as selectLegendPayload, Ft as GlassCardAction, G as SegmentedControlGlass, Gt as DropdownMenuGlassContent, H as isNumber, Ht as DropdownGlass, I as useAppDispatch, It as GlassCardContent, J as progressSizes, Jt as DropdownMenuGlassLabel, K as RainbowProgressGlass, Kt as DropdownMenuGlassGroup, L as useAppSelector, Lt as GlassCardDescription, M as useMargin, Mn as TouchTarget, Mt as modalSizes, N as ResponsiveContainer, Nn as alertVariants, Nt as InputGlass, O as setLegendSettings, On as AlertGlassDescription, Ot as PopoverGlassTrigger, P as useElementOffset, Pt as GlassCard, Q as StatusIndicatorGlass, Qt as DropdownMenuGlassSeparator, R as getUniqPayload, Rt as GlassCardFooter, S as sparklineBarVariants, Sn as AvatarGlassFallback, St as SkeletonGlass, T as Bar, Tn as avatarSizes, Tt as PopoverGlassAnchor, U as useLegendPortal, Ut as DropdownMenuGlass, V as Symbols, Vt as cardIntensity, W as Surface, Wt as DropdownMenuGlassCheckboxItem, X as LanguageBarGlass, Xt as DropdownMenuGlassRadioGroup, Y as ProfileAvatarGlass, Yt as DropdownMenuGlassPortal, Z as FlagAlertGlass, Zt as DropdownMenuGlassRadioItem, _ as ContributionMetricsGlass, _n as ButtonGlass, _t as SliderGlass, a as HeaderBrandingGlass, an as inputVariants, at as insightCardVariants, b as AICardGlass, bn as badgeVariants, bt as useDirection, c as YearCardGlass, cn as Presence, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, dn as useLayoutEffect2, dt as TooltipGlassProvider, en as DropdownMenuGlassSub, et as ThemeToggleGlass, f as RepositoryMetadataGlass, fn as useCallbackRef, ft as TooltipGlassSimple, g as MetricCardGlass, gn as CheckboxGlass, gt as TabsGlass, h as MetricsGridGlass, hn as CircularProgressGlass, ht as toggleSizes, i as HeaderNavGlass, in as ComboBoxGlass, it as InsightCardGlass, j as useChartWidth, jn as FormFieldWrapper, jt as ModalGlass, k as setLegendSize, kn as AlertGlassTitle, kt as NotificationGlass, l as UserStatsLineGlass, ln as useSize, lt as TooltipGlass, m as RepositoryCardGlass, mn as composeEventHandlers, mt as ToggleGlass, n as ProjectsListGlass, nn as DropdownMenuGlassSubTrigger, nt as SortDropdownGlass, o as FlagsSectionGlass, on as Primitive$3, ot as insightVariantConfig, p as RepositoryHeaderGlass, pn as useComposedRefs, pt as TooltipGlassTrigger, q as ProgressGlass, qt as DropdownMenuGlassItem, r as ProfileHeaderGlass, rn as DropdownMenuGlassTrigger, rt as SearchBoxGlass, s as CareerStatsGlass, sn as useControllableState, st as IconButtonGlass, t as TrustScoreCardGlass, tn as DropdownMenuGlassSubContent, tt as StatItemGlass, u as UserInfoGlass, un as useId$1, ut as TooltipGlassContent, v as CircularMetricGlass, vn as buttonGlassVariants, vt as createCollection, w as BarChart, wn as AvatarGlassSimple, wt as PopoverGlass, x as SparklineGlass, xn as AvatarGlass, xt as clamp, y as CareerStatsHeaderGlass, yn as BadgeGlass, yt as usePrevious, z as resolveDefaultProps, zt as GlassCardHeader } from "./trust-score-card-glass-CUStm4o_.js";
1
+ import { $ as BaseProgressGlass, $t as useLayoutEffect2, A as useChartHeight, At as modalSizes, B as adaptEventsOfChild, Bt as DropdownMenuGlassLabel, C as sparklineContainerVariants, Ct as PopoverGlassAnchor, D as Tooltip, Dt as NotificationGlass, E as Cell, Et as PopoverGlassTrigger, F as selectLegendPayload, Ft as DropdownMenuGlass, G as SegmentedControlGlass, Gt as DropdownMenuGlassShortcut, H as isNumber, Ht as DropdownMenuGlassRadioGroup, I as useAppDispatch, It as DropdownMenuGlassCheckboxItem, J as progressSizes, Jt as DropdownMenuGlassSubTrigger, K as RainbowProgressGlass, Kt as DropdownMenuGlassSub, L as useAppSelector, Lt as DropdownMenuGlassContent, M as useMargin, Mt as GlassCard, N as ResponsiveContainer, Nt as cardIntensity, O as setLegendSettings, Ot as notificationVariants, P as useElementOffset, Pt as DropdownGlass, Q as StatusIndicatorGlass, Qt as Presence, R as getUniqPayload, Rt as DropdownMenuGlassGroup, S as sparklineBarVariants, St as PopoverGlass, T as Bar, Tt as PopoverGlassLegacy, U as useLegendPortal, Ut as DropdownMenuGlassRadioItem, V as Symbols, Vt as DropdownMenuGlassPortal, W as Surface, Wt as DropdownMenuGlassSeparator, X as LanguageBarGlass, Xt as ComboBoxGlass, Y as ProfileAvatarGlass, Yt as DropdownMenuGlassTrigger, Z as FlagAlertGlass, Zt as inputVariants, _ as ContributionMetricsGlass, _n as AlertGlassTitle, _t as SliderGlass, a as HeaderBrandingGlass, an as ButtonGlass, at as insightCardVariants, b as AICardGlass, bn as TouchTarget, bt as SkeletonGlass, c as YearCardGlass, cn as badgeVariants, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, dn as AvatarGlassImage, dt as TooltipGlassProvider, en as useCallbackRef, et as ThemeToggleGlass, f as RepositoryMetadataGlass, fn as AvatarGlassSimple, ft as TooltipGlassSimple, g as MetricCardGlass, gn as AlertGlassDescription, gt as TabsGlass, h as MetricsGridGlass, hn as AlertGlass, ht as toggleSizes, i as HeaderNavGlass, in as CheckboxGlass, it as InsightCardGlass, j as useChartWidth, jt as InputGlass, k as setLegendSize, kt as ModalGlass, l as UserStatsLineGlass, ln as AvatarGlass, lt as TooltipGlass, m as RepositoryCardGlass, mn as statusSizes, mt as ToggleGlass, n as ProjectsListGlass, nn as composeEventHandlers, nt as SortDropdownGlass, o as FlagsSectionGlass, on as buttonGlassVariants, ot as insightVariantConfig, p as RepositoryHeaderGlass, pn as avatarSizes, pt as TooltipGlassTrigger, q as ProgressGlass, qt as DropdownMenuGlassSubContent, r as ProfileHeaderGlass, rn as CircularProgressGlass, rt as SearchBoxGlass, s as CareerStatsGlass, sn as BadgeGlass, st as IconButtonGlass, t as TrustScoreCardGlass, tn as useComposedRefs, tt as StatItemGlass, u as UserInfoGlass, un as AvatarGlassFallback, ut as TooltipGlassContent, v as CircularMetricGlass, vn as InteractiveCard, vt as useDirection, w as BarChart, wt as PopoverGlassContent, x as SparklineGlass, xn as alertVariants, xt as skeletonVariants, y as CareerStatsHeaderGlass, yn as FormFieldWrapper, yt as clamp, z as resolveDefaultProps, zt as DropdownMenuGlassItem } from "./trust-score-card-glass-Dg4_b_g_.js";
2
2
  import { t as cn } from "./utils-CcyeqpKQ.js";
3
3
  import { n as useHover, t as useFocus } from "./use-focus-CX0TJJIj.js";
4
4
  import { a as getThemeConfig, i as getNextTheme, n as THEME_CONFIG, o as useTheme, r as ThemeProvider, t as THEMES } from "./theme-context-_T5r1KG4.js";
5
5
  import { n as useResponsive, t as useWallpaperTint } from "./use-wallpaper-tint-DUgmytlY.js";
6
6
  import * as React$1 from "react";
7
- import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
8
- import { Check, ChevronDown, Circle, Menu, PanelLeft, PanelLeftClose, PanelLeftOpen, X } from "lucide-react";
7
+ import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
8
+ import { Check, ChevronDown, Menu, PanelLeft, PanelLeftClose, PanelLeftOpen, X } from "lucide-react";
9
9
  import { clsx } from "clsx";
10
10
  import { cva } from "class-variance-authority";
11
11
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
12
12
  import { Slot, createSlot } from "@radix-ui/react-slot";
13
13
  import { createPortal } from "react-dom";
14
- import * as DialogPrimitive from "@radix-ui/react-dialog";
15
- import { Toggle } from "@radix-ui/react-toggle";
14
+ var blurMap = {
15
+ subtle: "var(--blur-sm)",
16
+ medium: "var(--blur-md)",
17
+ strong: "var(--blur-lg)"
18
+ };
19
+ var bgVarMap = {
20
+ subtle: "var(--card-subtle-bg)",
21
+ medium: "var(--card-medium-bg)",
22
+ strong: "var(--card-strong-bg)"
23
+ };
24
+ var borderVarMap = {
25
+ subtle: "var(--card-subtle-border)",
26
+ medium: "var(--card-medium-border)",
27
+ strong: "var(--card-strong-border)"
28
+ };
29
+ var glowVarMap = {
30
+ blue: "var(--glow-blue)",
31
+ violet: "var(--glow-violet)",
32
+ cyan: "var(--glow-cyan)"
33
+ };
34
+ function CardGlassRoot({ className, intensity = "medium", glow = null, hover = false, style, ...props }) {
35
+ const cardStyles = {
36
+ background: bgVarMap[intensity],
37
+ borderColor: borderVarMap[intensity],
38
+ backdropFilter: `blur(${blurMap[intensity]})`,
39
+ WebkitBackdropFilter: `blur(${blurMap[intensity]})`,
40
+ boxShadow: glow ? glowVarMap[glow] : "var(--glow-neutral)",
41
+ ...style
42
+ };
43
+ return /* @__PURE__ */ jsx("div", {
44
+ "data-slot": "card",
45
+ className: cn("flex flex-col gap-6 rounded-xl border py-6 transition-all duration-300", "text-[var(--text-primary)]", hover && "hover:shadow-lg hover:border-[var(--card-hover-border)] cursor-pointer", className),
46
+ style: cardStyles,
47
+ ...props
48
+ });
49
+ }
50
+ function CardGlassHeader({ className, ...props }) {
51
+ return /* @__PURE__ */ jsx("div", {
52
+ "data-slot": "card-header",
53
+ className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6", "has-data-[slot=card-action]:grid-cols-[1fr_auto]", "[.border-b]:pb-6", className),
54
+ ...props
55
+ });
56
+ }
57
+ function CardGlassTitle({ className, ...props }) {
58
+ return /* @__PURE__ */ jsx("div", {
59
+ "data-slot": "card-title",
60
+ className: cn("leading-none font-semibold text-[var(--text-primary)]", className),
61
+ ...props
62
+ });
63
+ }
64
+ function CardGlassDescription({ className, ...props }) {
65
+ return /* @__PURE__ */ jsx("div", {
66
+ "data-slot": "card-description",
67
+ className: cn("text-sm text-[var(--text-muted)]", className),
68
+ ...props
69
+ });
70
+ }
71
+ function CardGlassAction({ className, ...props }) {
72
+ return /* @__PURE__ */ jsx("div", {
73
+ "data-slot": "card-action",
74
+ className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
75
+ ...props
76
+ });
77
+ }
78
+ function CardGlassContent({ className, ...props }) {
79
+ return /* @__PURE__ */ jsx("div", {
80
+ "data-slot": "card-content",
81
+ className: cn("px-6", className),
82
+ ...props
83
+ });
84
+ }
85
+ function CardGlassFooter({ className, ...props }) {
86
+ return /* @__PURE__ */ jsx("div", {
87
+ "data-slot": "card-footer",
88
+ className: cn("flex items-center gap-2 px-6 [.border-t]:pt-6", className),
89
+ ...props
90
+ });
91
+ }
92
+ const CardGlass = {
93
+ Root: CardGlassRoot,
94
+ Header: CardGlassHeader,
95
+ Title: CardGlassTitle,
96
+ Description: CardGlassDescription,
97
+ Action: CardGlassAction,
98
+ Content: CardGlassContent,
99
+ Footer: CardGlassFooter
100
+ };
16
101
  const stepperRootVariants = cva("flex w-full", {
17
102
  variants: { orientation: {
18
103
  horizontal: "flex-col",
@@ -373,637 +458,38 @@ const StepperGlass = {
373
458
  Step: StepperStep,
374
459
  Content: StepperContent
375
460
  };
376
- function createContextScope$3(scopeName, createContextScopeDeps = []) {
377
- let defaultContexts = [];
378
- function createContext3(rootComponentName, defaultContext) {
379
- const BaseContext = React$1.createContext(defaultContext);
380
- const index = defaultContexts.length;
381
- defaultContexts = [...defaultContexts, defaultContext];
382
- const Provider = (props) => {
383
- const { scope, children, ...context } = props;
384
- const Context = scope?.[scopeName]?.[index] || BaseContext;
385
- const value = React$1.useMemo(() => context, Object.values(context));
386
- return /* @__PURE__ */ jsx(Context.Provider, {
387
- value,
388
- children
389
- });
390
- };
391
- Provider.displayName = rootComponentName + "Provider";
392
- function useContext2(consumerName, scope) {
393
- const Context = scope?.[scopeName]?.[index] || BaseContext;
394
- const context = React$1.useContext(Context);
395
- if (context) return context;
396
- if (defaultContext !== void 0) return defaultContext;
397
- throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
398
- }
399
- return [Provider, useContext2];
400
- }
401
- const createScope = () => {
402
- const scopeContexts = defaultContexts.map((defaultContext) => {
403
- return React$1.createContext(defaultContext);
404
- });
405
- return function useScope(scope) {
406
- const contexts = scope?.[scopeName] || scopeContexts;
407
- return React$1.useMemo(() => ({ [`__scope${scopeName}`]: {
408
- ...scope,
409
- [scopeName]: contexts
410
- } }), [scope, contexts]);
411
- };
412
- };
413
- createScope.scopeName = scopeName;
414
- return [createContext3, composeContextScopes$4(createScope, ...createContextScopeDeps)];
415
- }
416
- function composeContextScopes$4(...scopes) {
417
- const baseScope = scopes[0];
418
- if (scopes.length === 1) return baseScope;
419
- const createScope = () => {
420
- const scopeHooks = scopes.map((createScope2) => ({
421
- useScope: createScope2(),
422
- scopeName: createScope2.scopeName
423
- }));
424
- return function useComposedScopes(overrideScopes) {
425
- const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
426
- const currentScope = useScope(overrideScopes)[`__scope${scopeName}`];
427
- return {
428
- ...nextScopes2,
429
- ...currentScope
430
- };
431
- }, {});
432
- return React$1.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
433
- };
434
- };
435
- createScope.scopeName = baseScope.scopeName;
436
- return createScope;
461
+ var MOBILE_BREAKPOINT = 768;
462
+ var SIDEBAR_COOKIE_NAME = "sidebar:state";
463
+ var SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
464
+ var SidebarContext = createContext(null);
465
+ function useSidebar() {
466
+ const context = useContext(SidebarContext);
467
+ if (!context) throw new Error("useSidebar must be used within SidebarGlass.Provider. Wrap your component tree with <SidebarGlass.Provider>.");
468
+ return context;
437
469
  }
438
- var Primitive$4 = [
439
- "a",
440
- "button",
441
- "div",
442
- "form",
443
- "h2",
444
- "h3",
445
- "img",
446
- "input",
447
- "label",
448
- "li",
449
- "nav",
450
- "ol",
451
- "p",
452
- "select",
453
- "span",
454
- "svg",
455
- "ul"
456
- ].reduce((primitive, node) => {
457
- const Slot$1 = createSlot(`Primitive.${node}`);
458
- const Node = React$1.forwardRef((props, forwardedRef) => {
459
- const { asChild, ...primitiveProps } = props;
460
- const Comp = asChild ? Slot$1 : node;
461
- if (typeof window !== "undefined") window[Symbol.for("radix-ui")] = true;
462
- return /* @__PURE__ */ jsx(Comp, {
463
- ...primitiveProps,
464
- ref: forwardedRef
465
- });
466
- });
467
- Node.displayName = `Primitive.${node}`;
468
- return {
469
- ...primitive,
470
- [node]: Node
471
- };
472
- }, {});
473
- function createContextScope$4(scopeName, createContextScopeDeps = []) {
474
- let defaultContexts = [];
475
- function createContext3(rootComponentName, defaultContext) {
476
- const BaseContext = React$1.createContext(defaultContext);
477
- const index = defaultContexts.length;
478
- defaultContexts = [...defaultContexts, defaultContext];
479
- const Provider = (props) => {
480
- const { scope, children, ...context } = props;
481
- const Context = scope?.[scopeName]?.[index] || BaseContext;
482
- const value = React$1.useMemo(() => context, Object.values(context));
483
- return /* @__PURE__ */ jsx(Context.Provider, {
484
- value,
485
- children
486
- });
487
- };
488
- Provider.displayName = rootComponentName + "Provider";
489
- function useContext2(consumerName, scope) {
490
- const Context = scope?.[scopeName]?.[index] || BaseContext;
491
- const context = React$1.useContext(Context);
492
- if (context) return context;
493
- if (defaultContext !== void 0) return defaultContext;
494
- throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
470
+ const SidebarProvider = ({ children, open: controlledOpen, onOpenChange, defaultOpen = true, side = "left", variant = "sidebar", collapsible = "offcanvas", cookieName = SIDEBAR_COOKIE_NAME, keyboardShortcut = "b" }) => {
471
+ const [internalOpen, setInternalOpen] = useState(() => {
472
+ if (typeof document !== "undefined") {
473
+ const sidebarCookie = document.cookie.split(";").find((c) => c.trim().startsWith(`${cookieName}=`));
474
+ if (sidebarCookie) return sidebarCookie.split("=")[1] === "true";
495
475
  }
496
- return [Provider, useContext2];
497
- }
498
- const createScope = () => {
499
- const scopeContexts = defaultContexts.map((defaultContext) => {
500
- return React$1.createContext(defaultContext);
501
- });
502
- return function useScope(scope) {
503
- const contexts = scope?.[scopeName] || scopeContexts;
504
- return React$1.useMemo(() => ({ [`__scope${scopeName}`]: {
505
- ...scope,
506
- [scopeName]: contexts
507
- } }), [scope, contexts]);
508
- };
509
- };
510
- createScope.scopeName = scopeName;
511
- return [createContext3, composeContextScopes$3(createScope, ...createContextScopeDeps)];
512
- }
513
- function composeContextScopes$3(...scopes) {
514
- const baseScope = scopes[0];
515
- if (scopes.length === 1) return baseScope;
516
- const createScope = () => {
517
- const scopeHooks = scopes.map((createScope2) => ({
518
- useScope: createScope2(),
519
- scopeName: createScope2.scopeName
520
- }));
521
- return function useComposedScopes(overrideScopes) {
522
- const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
523
- const currentScope = useScope(overrideScopes)[`__scope${scopeName}`];
524
- return {
525
- ...nextScopes2,
526
- ...currentScope
527
- };
528
- }, {});
529
- return React$1.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
530
- };
531
- };
532
- createScope.scopeName = baseScope.scopeName;
533
- return createScope;
534
- }
535
- var Primitive$5 = [
536
- "a",
537
- "button",
538
- "div",
539
- "form",
540
- "h2",
541
- "h3",
542
- "img",
543
- "input",
544
- "label",
545
- "li",
546
- "nav",
547
- "ol",
548
- "p",
549
- "select",
550
- "span",
551
- "svg",
552
- "ul"
553
- ].reduce((primitive, node) => {
554
- const Slot$1 = createSlot(`Primitive.${node}`);
555
- const Node = React$1.forwardRef((props, forwardedRef) => {
556
- const { asChild, ...primitiveProps } = props;
557
- const Comp = asChild ? Slot$1 : node;
558
- if (typeof window !== "undefined") window[Symbol.for("radix-ui")] = true;
559
- return /* @__PURE__ */ jsx(Comp, {
560
- ...primitiveProps,
561
- ref: forwardedRef
562
- });
476
+ return defaultOpen;
563
477
  });
564
- Node.displayName = `Primitive.${node}`;
565
- return {
566
- ...primitive,
567
- [node]: Node
568
- };
569
- }, {});
570
- var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
571
- var EVENT_OPTIONS = {
572
- bubbles: false,
573
- cancelable: true
574
- };
575
- var GROUP_NAME = "RovingFocusGroup";
576
- var [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME);
577
- var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope$4(GROUP_NAME, [createCollectionScope]);
578
- var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
579
- var RovingFocusGroup = React$1.forwardRef((props, forwardedRef) => {
580
- return /* @__PURE__ */ jsx(Collection.Provider, {
581
- scope: props.__scopeRovingFocusGroup,
582
- children: /* @__PURE__ */ jsx(Collection.Slot, {
583
- scope: props.__scopeRovingFocusGroup,
584
- children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, {
585
- ...props,
586
- ref: forwardedRef
587
- })
588
- })
589
- });
590
- });
591
- RovingFocusGroup.displayName = GROUP_NAME;
592
- var RovingFocusGroupImpl = React$1.forwardRef((props, forwardedRef) => {
593
- const { __scopeRovingFocusGroup, orientation, loop = false, dir, currentTabStopId: currentTabStopIdProp, defaultCurrentTabStopId, onCurrentTabStopIdChange, onEntryFocus, preventScrollOnEntryFocus = false, ...groupProps } = props;
594
- const ref = React$1.useRef(null);
595
- const composedRefs = useComposedRefs(forwardedRef, ref);
596
- const direction = useDirection(dir);
597
- const [currentTabStopId, setCurrentTabStopId] = useControllableState({
598
- prop: currentTabStopIdProp,
599
- defaultProp: defaultCurrentTabStopId ?? null,
600
- onChange: onCurrentTabStopIdChange,
601
- caller: GROUP_NAME
602
- });
603
- const [isTabbingBackOut, setIsTabbingBackOut] = React$1.useState(false);
604
- const handleEntryFocus = useCallbackRef(onEntryFocus);
605
- const getItems = useCollection(__scopeRovingFocusGroup);
606
- const isClickFocusRef = React$1.useRef(false);
607
- const [focusableItemsCount, setFocusableItemsCount] = React$1.useState(0);
608
- React$1.useEffect(() => {
609
- const node = ref.current;
610
- if (node) {
611
- node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
612
- return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
613
- }
614
- }, [handleEntryFocus]);
615
- return /* @__PURE__ */ jsx(RovingFocusProvider, {
616
- scope: __scopeRovingFocusGroup,
617
- orientation,
618
- dir: direction,
619
- loop,
620
- currentTabStopId,
621
- onItemFocus: React$1.useCallback((tabStopId) => setCurrentTabStopId(tabStopId), [setCurrentTabStopId]),
622
- onItemShiftTab: React$1.useCallback(() => setIsTabbingBackOut(true), []),
623
- onFocusableItemAdd: React$1.useCallback(() => setFocusableItemsCount((prevCount) => prevCount + 1), []),
624
- onFocusableItemRemove: React$1.useCallback(() => setFocusableItemsCount((prevCount) => prevCount - 1), []),
625
- children: /* @__PURE__ */ jsx(Primitive$5.div, {
626
- tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
627
- "data-orientation": orientation,
628
- ...groupProps,
629
- ref: composedRefs,
630
- style: {
631
- outline: "none",
632
- ...props.style
633
- },
634
- onMouseDown: composeEventHandlers(props.onMouseDown, () => {
635
- isClickFocusRef.current = true;
636
- }),
637
- onFocus: composeEventHandlers(props.onFocus, (event) => {
638
- const isKeyboardFocus = !isClickFocusRef.current;
639
- if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
640
- const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
641
- event.currentTarget.dispatchEvent(entryFocusEvent);
642
- if (!entryFocusEvent.defaultPrevented) {
643
- const items = getItems().filter((item) => item.focusable);
644
- focusFirst([
645
- items.find((item) => item.active),
646
- items.find((item) => item.id === currentTabStopId),
647
- ...items
648
- ].filter(Boolean).map((item) => item.ref.current), preventScrollOnEntryFocus);
649
- }
650
- }
651
- isClickFocusRef.current = false;
652
- }),
653
- onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
654
- })
655
- });
656
- });
657
- var ITEM_NAME$2 = "RovingFocusGroupItem";
658
- var RovingFocusGroupItem = React$1.forwardRef((props, forwardedRef) => {
659
- const { __scopeRovingFocusGroup, focusable = true, active = false, tabStopId, children, ...itemProps } = props;
660
- const autoId = useId$1();
661
- const id = tabStopId || autoId;
662
- const context = useRovingFocusContext(ITEM_NAME$2, __scopeRovingFocusGroup);
663
- const isCurrentTabStop = context.currentTabStopId === id;
664
- const getItems = useCollection(__scopeRovingFocusGroup);
665
- const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
666
- React$1.useEffect(() => {
667
- if (focusable) {
668
- onFocusableItemAdd();
669
- return () => onFocusableItemRemove();
670
- }
671
- }, [
672
- focusable,
673
- onFocusableItemAdd,
674
- onFocusableItemRemove
675
- ]);
676
- return /* @__PURE__ */ jsx(Collection.ItemSlot, {
677
- scope: __scopeRovingFocusGroup,
678
- id,
679
- focusable,
680
- active,
681
- children: /* @__PURE__ */ jsx(Primitive$5.span, {
682
- tabIndex: isCurrentTabStop ? 0 : -1,
683
- "data-orientation": context.orientation,
684
- ...itemProps,
685
- ref: forwardedRef,
686
- onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
687
- if (!focusable) event.preventDefault();
688
- else context.onItemFocus(id);
689
- }),
690
- onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
691
- onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
692
- if (event.key === "Tab" && event.shiftKey) {
693
- context.onItemShiftTab();
694
- return;
695
- }
696
- if (event.target !== event.currentTarget) return;
697
- const focusIntent = getFocusIntent(event, context.orientation, context.dir);
698
- if (focusIntent !== void 0) {
699
- if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
700
- event.preventDefault();
701
- let candidateNodes = getItems().filter((item) => item.focusable).map((item) => item.ref.current);
702
- if (focusIntent === "last") candidateNodes.reverse();
703
- else if (focusIntent === "prev" || focusIntent === "next") {
704
- if (focusIntent === "prev") candidateNodes.reverse();
705
- const currentIndex = candidateNodes.indexOf(event.currentTarget);
706
- candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
707
- }
708
- setTimeout(() => focusFirst(candidateNodes));
709
- }
710
- }),
711
- children: typeof children === "function" ? children({
712
- isCurrentTabStop,
713
- hasTabStop: currentTabStopId != null
714
- }) : children
715
- })
716
- });
717
- });
718
- RovingFocusGroupItem.displayName = ITEM_NAME$2;
719
- var MAP_KEY_TO_FOCUS_INTENT = {
720
- ArrowLeft: "prev",
721
- ArrowUp: "prev",
722
- ArrowRight: "next",
723
- ArrowDown: "next",
724
- PageUp: "first",
725
- Home: "first",
726
- PageDown: "last",
727
- End: "last"
728
- };
729
- function getDirectionAwareKey(key, dir) {
730
- if (dir !== "rtl") return key;
731
- return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
732
- }
733
- function getFocusIntent(event, orientation, dir) {
734
- const key = getDirectionAwareKey(event.key, dir);
735
- if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
736
- if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
737
- return MAP_KEY_TO_FOCUS_INTENT[key];
738
- }
739
- function focusFirst(candidates, preventScroll = false) {
740
- const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
741
- for (const candidate of candidates) {
742
- if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
743
- candidate.focus({ preventScroll });
744
- if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
745
- }
746
- }
747
- function wrapArray(array, startIndex) {
748
- return array.map((_, index) => array[(startIndex + index) % array.length]);
749
- }
750
- var Root$3 = RovingFocusGroup;
751
- var Item = RovingFocusGroupItem;
752
- var TOGGLE_GROUP_NAME = "ToggleGroup";
753
- var [createToggleGroupContext, createToggleGroupScope] = createContextScope$3(TOGGLE_GROUP_NAME, [createRovingFocusGroupScope]);
754
- var useRovingFocusGroupScope$1 = createRovingFocusGroupScope();
755
- var ToggleGroup = React.forwardRef((props, forwardedRef) => {
756
- const { type, ...toggleGroupProps } = props;
757
- if (type === "single") return /* @__PURE__ */ jsx(ToggleGroupImplSingle, {
758
- ...toggleGroupProps,
759
- ref: forwardedRef
760
- });
761
- if (type === "multiple") return /* @__PURE__ */ jsx(ToggleGroupImplMultiple, {
762
- ...toggleGroupProps,
763
- ref: forwardedRef
764
- });
765
- throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
766
- });
767
- ToggleGroup.displayName = TOGGLE_GROUP_NAME;
768
- var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
769
- var ToggleGroupImplSingle = React.forwardRef((props, forwardedRef) => {
770
- const { value: valueProp, defaultValue, onValueChange = () => {}, ...toggleGroupSingleProps } = props;
771
- const [value, setValue] = useControllableState({
772
- prop: valueProp,
773
- defaultProp: defaultValue ?? "",
774
- onChange: onValueChange,
775
- caller: TOGGLE_GROUP_NAME
776
- });
777
- return /* @__PURE__ */ jsx(ToggleGroupValueProvider, {
778
- scope: props.__scopeToggleGroup,
779
- type: "single",
780
- value: React.useMemo(() => value ? [value] : [], [value]),
781
- onItemActivate: setValue,
782
- onItemDeactivate: React.useCallback(() => setValue(""), [setValue]),
783
- children: /* @__PURE__ */ jsx(ToggleGroupImpl, {
784
- ...toggleGroupSingleProps,
785
- ref: forwardedRef
786
- })
787
- });
788
- });
789
- var ToggleGroupImplMultiple = React.forwardRef((props, forwardedRef) => {
790
- const { value: valueProp, defaultValue, onValueChange = () => {}, ...toggleGroupMultipleProps } = props;
791
- const [value, setValue] = useControllableState({
792
- prop: valueProp,
793
- defaultProp: defaultValue ?? [],
794
- onChange: onValueChange,
795
- caller: TOGGLE_GROUP_NAME
796
- });
797
- const handleButtonActivate = React.useCallback((itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]), [setValue]);
798
- const handleButtonDeactivate = React.useCallback((itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)), [setValue]);
799
- return /* @__PURE__ */ jsx(ToggleGroupValueProvider, {
800
- scope: props.__scopeToggleGroup,
801
- type: "multiple",
802
- value,
803
- onItemActivate: handleButtonActivate,
804
- onItemDeactivate: handleButtonDeactivate,
805
- children: /* @__PURE__ */ jsx(ToggleGroupImpl, {
806
- ...toggleGroupMultipleProps,
807
- ref: forwardedRef
808
- })
809
- });
810
- });
811
- ToggleGroup.displayName = TOGGLE_GROUP_NAME;
812
- var [ToggleGroupContext$1, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
813
- var ToggleGroupImpl = React.forwardRef((props, forwardedRef) => {
814
- const { __scopeToggleGroup, disabled = false, rovingFocus = true, orientation, dir, loop = true, ...toggleGroupProps } = props;
815
- const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeToggleGroup);
816
- const direction = useDirection(dir);
817
- const commonProps = {
818
- role: "group",
819
- dir: direction,
820
- ...toggleGroupProps
821
- };
822
- return /* @__PURE__ */ jsx(ToggleGroupContext$1, {
823
- scope: __scopeToggleGroup,
824
- rovingFocus,
825
- disabled,
826
- children: rovingFocus ? /* @__PURE__ */ jsx(Root$3, {
827
- asChild: true,
828
- ...rovingFocusGroupScope,
829
- orientation,
830
- dir: direction,
831
- loop,
832
- children: /* @__PURE__ */ jsx(Primitive$4.div, {
833
- ...commonProps,
834
- ref: forwardedRef
835
- })
836
- }) : /* @__PURE__ */ jsx(Primitive$4.div, {
837
- ...commonProps,
838
- ref: forwardedRef
839
- })
840
- });
841
- });
842
- var ITEM_NAME$1 = "ToggleGroupItem";
843
- var ToggleGroupItem = React.forwardRef((props, forwardedRef) => {
844
- const valueContext = useToggleGroupValueContext(ITEM_NAME$1, props.__scopeToggleGroup);
845
- const context = useToggleGroupContext(ITEM_NAME$1, props.__scopeToggleGroup);
846
- const rovingFocusGroupScope = useRovingFocusGroupScope$1(props.__scopeToggleGroup);
847
- const pressed = valueContext.value.includes(props.value);
848
- const disabled = context.disabled || props.disabled;
849
- const commonProps = {
850
- ...props,
851
- pressed,
852
- disabled
853
- };
854
- const ref = React.useRef(null);
855
- return context.rovingFocus ? /* @__PURE__ */ jsx(Item, {
856
- asChild: true,
857
- ...rovingFocusGroupScope,
858
- focusable: !disabled,
859
- active: pressed,
860
- ref,
861
- children: /* @__PURE__ */ jsx(ToggleGroupItemImpl, {
862
- ...commonProps,
863
- ref: forwardedRef
864
- })
865
- }) : /* @__PURE__ */ jsx(ToggleGroupItemImpl, {
866
- ...commonProps,
867
- ref: forwardedRef
868
- });
869
- });
870
- ToggleGroupItem.displayName = ITEM_NAME$1;
871
- var ToggleGroupItemImpl = React.forwardRef((props, forwardedRef) => {
872
- const { __scopeToggleGroup, value, ...itemProps } = props;
873
- const valueContext = useToggleGroupValueContext(ITEM_NAME$1, __scopeToggleGroup);
874
- const singleProps = {
875
- role: "radio",
876
- "aria-checked": props.pressed,
877
- "aria-pressed": void 0
878
- };
879
- return /* @__PURE__ */ jsx(Toggle, {
880
- ...valueContext.type === "single" ? singleProps : void 0,
881
- ...itemProps,
882
- ref: forwardedRef,
883
- onPressedChange: (pressed) => {
884
- if (pressed) valueContext.onItemActivate(value);
885
- else valueContext.onItemDeactivate(value);
886
- }
887
- });
888
- });
889
- var Root2$1 = ToggleGroup;
890
- var Item2$1 = ToggleGroupItem;
891
- var ToggleGroupContext = React$1.createContext({
892
- size: "default",
893
- variant: "default"
894
- });
895
- var toggleGroupItemVariants = cva([
896
- "inline-flex items-center justify-center rounded-md text-sm font-medium",
897
- "transition-all duration-200",
898
- "focus:outline-none focus-visible:ring-2",
899
- "focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2",
900
- "disabled:pointer-events-none disabled:opacity-50"
901
- ], {
902
- variants: {
903
- variant: {
904
- default: [
905
- "bg-[var(--toggle-group-item-bg,transparent)]",
906
- "hover:bg-[var(--toggle-group-item-hover-bg,var(--glass-bg-subtle))]",
907
- "data-[state=on]:bg-[var(--toggle-group-item-active-bg,var(--semantic-primary-subtle))]",
908
- "data-[state=on]:text-[var(--toggle-group-item-active-text,var(--semantic-primary))]"
909
- ],
910
- outline: [
911
- "border border-[var(--toggle-group-item-border,var(--glass-border))]",
912
- "bg-transparent",
913
- "hover:bg-[var(--toggle-group-item-hover-bg,var(--glass-bg-subtle))]",
914
- "data-[state=on]:border-[var(--semantic-primary)]",
915
- "data-[state=on]:bg-[var(--toggle-group-item-active-bg,var(--semantic-primary-subtle))]",
916
- "data-[state=on]:text-[var(--toggle-group-item-active-text,var(--semantic-primary))]"
917
- ]
918
- },
919
- size: {
920
- default: "h-10 px-3",
921
- sm: "h-8 px-2",
922
- lg: "h-11 px-4"
923
- }
924
- },
925
- defaultVariants: {
926
- variant: "default",
927
- size: "default"
928
- }
929
- });
930
- function ToggleGroupGlassRootImpl(props, ref) {
931
- const { className, variant = "default", size = "default", children, ...rest } = props;
932
- const containerClasses = cn("inline-flex items-center justify-center gap-1", "rounded-lg p-1", "bg-[var(--toggle-group-bg,var(--glass-bg-subtle))]", "border border-[var(--toggle-group-border,var(--glass-border))]", className);
933
- const contextValue = {
934
- size: size ?? "default",
935
- variant: variant ?? "default"
936
- };
937
- if (props.type === "multiple") return /* @__PURE__ */ jsx(Root2$1, {
938
- ref,
939
- className: containerClasses,
940
- ...rest,
941
- children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
942
- value: contextValue,
943
- children
944
- })
945
- });
946
- return /* @__PURE__ */ jsx(Root2$1, {
947
- ref,
948
- className: containerClasses,
949
- ...rest,
950
- children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
951
- value: contextValue,
952
- children
953
- })
954
- });
955
- }
956
- var ToggleGroupGlassRoot = React$1.forwardRef(ToggleGroupGlassRootImpl);
957
- ToggleGroupGlassRoot.displayName = "ToggleGroupGlassRoot";
958
- var ToggleGroupGlassItem = React$1.forwardRef(({ className, children, variant, size, ...props }, ref) => {
959
- const context = React$1.useContext(ToggleGroupContext);
960
- return /* @__PURE__ */ jsx(Item2$1, {
961
- ref,
962
- className: cn(toggleGroupItemVariants({
963
- variant: variant ?? context.variant,
964
- size: size ?? context.size
965
- }), className),
966
- ...props,
967
- children
968
- });
969
- });
970
- ToggleGroupGlassItem.displayName = "ToggleGroupGlassItem";
971
- const ToggleGroupGlass = {
972
- Root: ToggleGroupGlassRoot,
973
- Item: ToggleGroupGlassItem
974
- };
975
- var MOBILE_BREAKPOINT = 768;
976
- var SIDEBAR_COOKIE_NAME = "sidebar:state";
977
- var SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
978
- var SidebarContext = createContext(null);
979
- function useSidebar() {
980
- const context = useContext(SidebarContext);
981
- if (!context) throw new Error("useSidebar must be used within SidebarGlass.Provider. Wrap your component tree with <SidebarGlass.Provider>.");
982
- return context;
983
- }
984
- const SidebarProvider = ({ children, open: controlledOpen, onOpenChange, defaultOpen = true, side = "left", variant = "sidebar", collapsible = "offcanvas", cookieName = SIDEBAR_COOKIE_NAME, keyboardShortcut = "b" }) => {
985
- const [internalOpen, setInternalOpen] = useState(() => {
986
- if (typeof document !== "undefined") {
987
- const sidebarCookie = document.cookie.split(";").find((c) => c.trim().startsWith(`${cookieName}=`));
988
- if (sidebarCookie) return sidebarCookie.split("=")[1] === "true";
989
- }
990
- return defaultOpen;
991
- });
992
- const isControlled = controlledOpen !== void 0;
993
- const open = isControlled ? controlledOpen : internalOpen;
994
- const setOpen = useCallback((value$1) => {
995
- if (!isControlled) setInternalOpen(value$1);
996
- onOpenChange?.(value$1);
997
- if (typeof document !== "undefined") document.cookie = `${cookieName}=${value$1}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
998
- }, [
999
- isControlled,
1000
- onOpenChange,
1001
- cookieName
1002
- ]);
1003
- const [openMobile, setOpenMobile] = useState(false);
1004
- const [isMobile, setIsMobile] = useState(() => {
1005
- if (typeof window === "undefined") return false;
1006
- return window.innerWidth < MOBILE_BREAKPOINT;
478
+ const isControlled = controlledOpen !== void 0;
479
+ const open = isControlled ? controlledOpen : internalOpen;
480
+ const setOpen = useCallback((value$1) => {
481
+ if (!isControlled) setInternalOpen(value$1);
482
+ onOpenChange?.(value$1);
483
+ if (typeof document !== "undefined") document.cookie = `${cookieName}=${value$1}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
484
+ }, [
485
+ isControlled,
486
+ onOpenChange,
487
+ cookieName
488
+ ]);
489
+ const [openMobile, setOpenMobile] = useState(false);
490
+ const [isMobile, setIsMobile] = useState(() => {
491
+ if (typeof window === "undefined") return false;
492
+ return window.innerWidth < MOBILE_BREAKPOINT;
1007
493
  });
1008
494
  useEffect(() => {
1009
495
  if (typeof window === "undefined") return;
@@ -1379,875 +865,342 @@ const SidebarGlass = {
1379
865
  MenuSubItem: SidebarMenuSubItem,
1380
866
  MenuSubButton: SidebarMenuSubButton
1381
867
  };
1382
- var NAME = "Separator";
1383
- var DEFAULT_ORIENTATION = "horizontal";
1384
- var ORIENTATIONS = ["horizontal", "vertical"];
1385
- var Separator = React$1.forwardRef((props, forwardedRef) => {
1386
- const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
1387
- const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
1388
- const ariaOrientation = orientation === "vertical" ? orientation : void 0;
1389
- const semanticProps = decorative ? { role: "none" } : {
1390
- "aria-orientation": ariaOrientation,
1391
- role: "separator"
1392
- };
1393
- return /* @__PURE__ */ jsx(Primitive$3.div, {
1394
- "data-orientation": orientation,
1395
- ...semanticProps,
1396
- ...domProps,
1397
- ref: forwardedRef
1398
- });
1399
- });
1400
- Separator.displayName = NAME;
1401
- function isValidOrientation(orientation) {
1402
- return ORIENTATIONS.includes(orientation);
1403
- }
1404
- var Root$2 = Separator;
1405
- var SeparatorGlass = React$1.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(Root$2, {
1406
- ref,
1407
- decorative,
1408
- orientation,
1409
- className: cn("shrink-0", "bg-[var(--separator-bg,var(--glass-border))]", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
1410
- ...props
1411
- }));
1412
- SeparatorGlass.displayName = "SeparatorGlass";
1413
- var Primitive$2 = [
1414
- "a",
1415
- "button",
1416
- "div",
1417
- "form",
1418
- "h2",
1419
- "h3",
1420
- "img",
1421
- "input",
1422
- "label",
1423
- "li",
1424
- "nav",
1425
- "ol",
1426
- "p",
1427
- "select",
1428
- "span",
1429
- "svg",
1430
- "ul"
1431
- ].reduce((primitive, node) => {
1432
- const Slot$1 = createSlot(`Primitive.${node}`);
1433
- const Node = React$1.forwardRef((props, forwardedRef) => {
1434
- const { asChild, ...primitiveProps } = props;
1435
- const Comp = asChild ? Slot$1 : node;
1436
- if (typeof window !== "undefined") window[Symbol.for("radix-ui")] = true;
1437
- return /* @__PURE__ */ jsx(Comp, {
1438
- ...primitiveProps,
1439
- ref: forwardedRef
1440
- });
1441
- });
1442
- Node.displayName = `Primitive.${node}`;
1443
- return {
1444
- ...primitive,
1445
- [node]: Node
1446
- };
1447
- }, {});
1448
- function createContextScope$2(scopeName, createContextScopeDeps = []) {
1449
- let defaultContexts = [];
1450
- function createContext3(rootComponentName, defaultContext) {
1451
- const BaseContext = React$1.createContext(defaultContext);
1452
- const index = defaultContexts.length;
1453
- defaultContexts = [...defaultContexts, defaultContext];
1454
- const Provider = (props) => {
1455
- const { scope, children, ...context } = props;
1456
- const Context = scope?.[scopeName]?.[index] || BaseContext;
1457
- const value = React$1.useMemo(() => context, Object.values(context));
1458
- return /* @__PURE__ */ jsx(Context.Provider, {
1459
- value,
1460
- children
1461
- });
1462
- };
1463
- Provider.displayName = rootComponentName + "Provider";
1464
- function useContext2(consumerName, scope) {
1465
- const Context = scope?.[scopeName]?.[index] || BaseContext;
1466
- const context = React$1.useContext(Context);
1467
- if (context) return context;
1468
- if (defaultContext !== void 0) return defaultContext;
1469
- throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
868
+ function _extends$1() {
869
+ return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
870
+ for (var e = 1; e < arguments.length; e++) {
871
+ var t = arguments[e];
872
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
1470
873
  }
1471
- return [Provider, useContext2];
874
+ return n;
875
+ }, _extends$1.apply(null, arguments);
876
+ }
877
+ function ownKeys$1(e, r) {
878
+ var t = Object.keys(e);
879
+ if (Object.getOwnPropertySymbols) {
880
+ var o = Object.getOwnPropertySymbols(e);
881
+ r && (o = o.filter(function(r$1) {
882
+ return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
883
+ })), t.push.apply(t, o);
1472
884
  }
1473
- const createScope = () => {
1474
- const scopeContexts = defaultContexts.map((defaultContext) => {
1475
- return React$1.createContext(defaultContext);
1476
- });
1477
- return function useScope(scope) {
1478
- const contexts = scope?.[scopeName] || scopeContexts;
1479
- return React$1.useMemo(() => ({ [`__scope${scopeName}`]: {
1480
- ...scope,
1481
- [scopeName]: contexts
1482
- } }), [scope, contexts]);
1483
- };
1484
- };
1485
- createScope.scopeName = scopeName;
1486
- return [createContext3, composeContextScopes$2(createScope, ...createContextScopeDeps)];
885
+ return t;
1487
886
  }
1488
- function composeContextScopes$2(...scopes) {
1489
- const baseScope = scopes[0];
1490
- if (scopes.length === 1) return baseScope;
1491
- const createScope = () => {
1492
- const scopeHooks = scopes.map((createScope2) => ({
1493
- useScope: createScope2(),
1494
- scopeName: createScope2.scopeName
1495
- }));
1496
- return function useComposedScopes(overrideScopes) {
1497
- const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
1498
- const currentScope = useScope(overrideScopes)[`__scope${scopeName}`];
1499
- return {
1500
- ...nextScopes2,
1501
- ...currentScope
1502
- };
1503
- }, {});
1504
- return React$1.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
1505
- };
1506
- };
1507
- createScope.scopeName = baseScope.scopeName;
1508
- return createScope;
887
+ function _objectSpread$1(e) {
888
+ for (var r = 1; r < arguments.length; r++) {
889
+ var t = null != arguments[r] ? arguments[r] : {};
890
+ r % 2 ? ownKeys$1(Object(t), !0).forEach(function(r$1) {
891
+ _defineProperty$1(e, r$1, t[r$1]);
892
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r$1) {
893
+ Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
894
+ });
895
+ }
896
+ return e;
1509
897
  }
1510
- function useStateMachine(initialState, machine) {
1511
- return React$1.useReducer((state, event) => {
1512
- return machine[state][event] ?? state;
1513
- }, initialState);
898
+ function _defineProperty$1(e, r, t) {
899
+ return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
900
+ value: t,
901
+ enumerable: !0,
902
+ configurable: !0,
903
+ writable: !0
904
+ }) : e[r] = t, e;
1514
905
  }
1515
- var SCROLL_AREA_NAME = "ScrollArea";
1516
- var [createScrollAreaContext, createScrollAreaScope] = createContextScope$2(SCROLL_AREA_NAME);
1517
- var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
1518
- var ScrollArea$1 = React$1.forwardRef((props, forwardedRef) => {
1519
- const { __scopeScrollArea, type = "hover", dir, scrollHideDelay = 600, ...scrollAreaProps } = props;
1520
- const [scrollArea, setScrollArea] = React$1.useState(null);
1521
- const [viewport, setViewport] = React$1.useState(null);
1522
- const [content, setContent] = React$1.useState(null);
1523
- const [scrollbarX, setScrollbarX] = React$1.useState(null);
1524
- const [scrollbarY, setScrollbarY] = React$1.useState(null);
1525
- const [cornerWidth, setCornerWidth] = React$1.useState(0);
1526
- const [cornerHeight, setCornerHeight] = React$1.useState(0);
1527
- const [scrollbarXEnabled, setScrollbarXEnabled] = React$1.useState(false);
1528
- const [scrollbarYEnabled, setScrollbarYEnabled] = React$1.useState(false);
1529
- const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));
1530
- const direction = useDirection(dir);
1531
- return /* @__PURE__ */ jsx(ScrollAreaProvider, {
1532
- scope: __scopeScrollArea,
1533
- type,
1534
- dir: direction,
1535
- scrollHideDelay,
1536
- scrollArea,
1537
- viewport,
1538
- onViewportChange: setViewport,
1539
- content,
1540
- onContentChange: setContent,
1541
- scrollbarX,
1542
- onScrollbarXChange: setScrollbarX,
1543
- scrollbarXEnabled,
1544
- onScrollbarXEnabledChange: setScrollbarXEnabled,
1545
- scrollbarY,
1546
- onScrollbarYChange: setScrollbarY,
1547
- scrollbarYEnabled,
1548
- onScrollbarYEnabledChange: setScrollbarYEnabled,
1549
- onCornerWidthChange: setCornerWidth,
1550
- onCornerHeightChange: setCornerHeight,
1551
- children: /* @__PURE__ */ jsx(Primitive$2.div, {
1552
- dir: direction,
1553
- ...scrollAreaProps,
1554
- ref: composedRefs,
1555
- style: {
1556
- position: "relative",
1557
- ["--radix-scroll-area-corner-width"]: cornerWidth + "px",
1558
- ["--radix-scroll-area-corner-height"]: cornerHeight + "px",
1559
- ...props.style
1560
- }
1561
- })
1562
- });
1563
- });
1564
- ScrollArea$1.displayName = SCROLL_AREA_NAME;
1565
- var VIEWPORT_NAME = "ScrollAreaViewport";
1566
- var ScrollAreaViewport = React$1.forwardRef((props, forwardedRef) => {
1567
- const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
1568
- const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
1569
- const composedRefs = useComposedRefs(forwardedRef, React$1.useRef(null), context.onViewportChange);
1570
- return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
1571
- dangerouslySetInnerHTML: { __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}` },
1572
- nonce
1573
- }), /* @__PURE__ */ jsx(Primitive$2.div, {
1574
- "data-radix-scroll-area-viewport": "",
1575
- ...viewportProps,
1576
- ref: composedRefs,
1577
- style: {
1578
- overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
1579
- overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
1580
- ...props.style
1581
- },
1582
- children: /* @__PURE__ */ jsx("div", {
1583
- ref: context.onContentChange,
1584
- style: {
1585
- minWidth: "100%",
1586
- display: "table"
1587
- },
1588
- children
1589
- })
1590
- })] });
1591
- });
1592
- ScrollAreaViewport.displayName = VIEWPORT_NAME;
1593
- var SCROLLBAR_NAME = "ScrollAreaScrollbar";
1594
- var ScrollAreaScrollbar = React$1.forwardRef((props, forwardedRef) => {
1595
- const { forceMount, ...scrollbarProps } = props;
1596
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1597
- const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
1598
- const isHorizontal = props.orientation === "horizontal";
1599
- React$1.useEffect(() => {
1600
- isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
1601
- return () => {
1602
- isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
1603
- };
1604
- }, [
1605
- isHorizontal,
1606
- onScrollbarXEnabledChange,
1607
- onScrollbarYEnabledChange
1608
- ]);
1609
- return context.type === "hover" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarHover, {
1610
- ...scrollbarProps,
1611
- ref: forwardedRef,
1612
- forceMount
1613
- }) : context.type === "scroll" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarScroll, {
1614
- ...scrollbarProps,
1615
- ref: forwardedRef,
1616
- forceMount
1617
- }) : context.type === "auto" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
1618
- ...scrollbarProps,
1619
- ref: forwardedRef,
1620
- forceMount
1621
- }) : context.type === "always" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
1622
- ...scrollbarProps,
1623
- ref: forwardedRef
1624
- }) : null;
1625
- });
1626
- ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
1627
- var ScrollAreaScrollbarHover = React$1.forwardRef((props, forwardedRef) => {
1628
- const { forceMount, ...scrollbarProps } = props;
1629
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1630
- const [visible, setVisible] = React$1.useState(false);
1631
- React$1.useEffect(() => {
1632
- const scrollArea = context.scrollArea;
1633
- let hideTimer = 0;
1634
- if (scrollArea) {
1635
- const handlePointerEnter = () => {
1636
- window.clearTimeout(hideTimer);
1637
- setVisible(true);
1638
- };
1639
- const handlePointerLeave = () => {
1640
- hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
1641
- };
1642
- scrollArea.addEventListener("pointerenter", handlePointerEnter);
1643
- scrollArea.addEventListener("pointerleave", handlePointerLeave);
1644
- return () => {
1645
- window.clearTimeout(hideTimer);
1646
- scrollArea.removeEventListener("pointerenter", handlePointerEnter);
1647
- scrollArea.removeEventListener("pointerleave", handlePointerLeave);
1648
- };
1649
- }
1650
- }, [context.scrollArea, context.scrollHideDelay]);
1651
- return /* @__PURE__ */ jsx(Presence, {
1652
- present: forceMount || visible,
1653
- children: /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
1654
- "data-state": visible ? "visible" : "hidden",
1655
- ...scrollbarProps,
1656
- ref: forwardedRef
1657
- })
1658
- });
1659
- });
1660
- var ScrollAreaScrollbarScroll = React$1.forwardRef((props, forwardedRef) => {
1661
- const { forceMount, ...scrollbarProps } = props;
1662
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1663
- const isHorizontal = props.orientation === "horizontal";
1664
- const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
1665
- const [state, send] = useStateMachine("hidden", {
1666
- hidden: { SCROLL: "scrolling" },
1667
- scrolling: {
1668
- SCROLL_END: "idle",
1669
- POINTER_ENTER: "interacting"
1670
- },
1671
- interacting: {
1672
- SCROLL: "interacting",
1673
- POINTER_LEAVE: "idle"
1674
- },
1675
- idle: {
1676
- HIDE: "hidden",
1677
- SCROLL: "scrolling",
1678
- POINTER_ENTER: "interacting"
1679
- }
1680
- });
1681
- React$1.useEffect(() => {
1682
- if (state === "idle") {
1683
- const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
1684
- return () => window.clearTimeout(hideTimer);
1685
- }
1686
- }, [
1687
- state,
1688
- context.scrollHideDelay,
1689
- send
1690
- ]);
1691
- React$1.useEffect(() => {
1692
- const viewport = context.viewport;
1693
- const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
1694
- if (viewport) {
1695
- let prevScrollPos = viewport[scrollDirection];
1696
- const handleScroll = () => {
1697
- const scrollPos = viewport[scrollDirection];
1698
- if (prevScrollPos !== scrollPos) {
1699
- send("SCROLL");
1700
- debounceScrollEnd();
1701
- }
1702
- prevScrollPos = scrollPos;
1703
- };
1704
- viewport.addEventListener("scroll", handleScroll);
1705
- return () => viewport.removeEventListener("scroll", handleScroll);
1706
- }
1707
- }, [
1708
- context.viewport,
1709
- isHorizontal,
1710
- send,
1711
- debounceScrollEnd
1712
- ]);
1713
- return /* @__PURE__ */ jsx(Presence, {
1714
- present: forceMount || state !== "hidden",
1715
- children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
1716
- "data-state": state === "hidden" ? "hidden" : "visible",
1717
- ...scrollbarProps,
1718
- ref: forwardedRef,
1719
- onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
1720
- onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
1721
- })
1722
- });
1723
- });
1724
- var ScrollAreaScrollbarAuto = React$1.forwardRef((props, forwardedRef) => {
1725
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1726
- const { forceMount, ...scrollbarProps } = props;
1727
- const [visible, setVisible] = React$1.useState(false);
1728
- const isHorizontal = props.orientation === "horizontal";
1729
- const handleResize = useDebounceCallback(() => {
1730
- if (context.viewport) {
1731
- const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
1732
- const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
1733
- setVisible(isHorizontal ? isOverflowX : isOverflowY);
1734
- }
1735
- }, 10);
1736
- useResizeObserver(context.viewport, handleResize);
1737
- useResizeObserver(context.content, handleResize);
1738
- return /* @__PURE__ */ jsx(Presence, {
1739
- present: forceMount || visible,
1740
- children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
1741
- "data-state": visible ? "visible" : "hidden",
1742
- ...scrollbarProps,
1743
- ref: forwardedRef
1744
- })
1745
- });
1746
- });
1747
- var ScrollAreaScrollbarVisible = React$1.forwardRef((props, forwardedRef) => {
1748
- const { orientation = "vertical", ...scrollbarProps } = props;
1749
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1750
- const thumbRef = React$1.useRef(null);
1751
- const pointerOffsetRef = React$1.useRef(0);
1752
- const [sizes, setSizes] = React$1.useState({
1753
- content: 0,
1754
- viewport: 0,
1755
- scrollbar: {
1756
- size: 0,
1757
- paddingStart: 0,
1758
- paddingEnd: 0
1759
- }
1760
- });
1761
- const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
1762
- const commonProps = {
1763
- ...scrollbarProps,
1764
- sizes,
1765
- onSizesChange: setSizes,
1766
- hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
1767
- onThumbChange: (thumb) => thumbRef.current = thumb,
1768
- onThumbPointerUp: () => pointerOffsetRef.current = 0,
1769
- onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
1770
- };
1771
- function getScrollPosition(pointerPos, dir) {
1772
- return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
1773
- }
1774
- if (orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollAreaScrollbarX, {
1775
- ...commonProps,
1776
- ref: forwardedRef,
1777
- onThumbPositionChange: () => {
1778
- if (context.viewport && thumbRef.current) {
1779
- const scrollPos = context.viewport.scrollLeft;
1780
- const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
1781
- thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
1782
- }
1783
- },
1784
- onWheelScroll: (scrollPos) => {
1785
- if (context.viewport) context.viewport.scrollLeft = scrollPos;
1786
- },
1787
- onDragScroll: (pointerPos) => {
1788
- if (context.viewport) context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
1789
- }
1790
- });
1791
- if (orientation === "vertical") return /* @__PURE__ */ jsx(ScrollAreaScrollbarY, {
1792
- ...commonProps,
1793
- ref: forwardedRef,
1794
- onThumbPositionChange: () => {
1795
- if (context.viewport && thumbRef.current) {
1796
- const scrollPos = context.viewport.scrollTop;
1797
- const offset = getThumbOffsetFromScroll(scrollPos, sizes);
1798
- thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
1799
- }
1800
- },
1801
- onWheelScroll: (scrollPos) => {
1802
- if (context.viewport) context.viewport.scrollTop = scrollPos;
1803
- },
1804
- onDragScroll: (pointerPos) => {
1805
- if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
1806
- }
1807
- });
1808
- return null;
1809
- });
1810
- var ScrollAreaScrollbarX = React$1.forwardRef((props, forwardedRef) => {
1811
- const { sizes, onSizesChange, ...scrollbarProps } = props;
1812
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1813
- const [computedStyle, setComputedStyle] = React$1.useState();
1814
- const ref = React$1.useRef(null);
1815
- const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
1816
- React$1.useEffect(() => {
1817
- if (ref.current) setComputedStyle(getComputedStyle(ref.current));
1818
- }, [ref]);
1819
- return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
1820
- "data-orientation": "horizontal",
1821
- ...scrollbarProps,
1822
- ref: composeRefs,
1823
- sizes,
1824
- style: {
1825
- bottom: 0,
1826
- left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
1827
- right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
1828
- ["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
1829
- ...props.style
1830
- },
1831
- onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
1832
- onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
1833
- onWheelScroll: (event, maxScrollPos) => {
1834
- if (context.viewport) {
1835
- const scrollPos = context.viewport.scrollLeft + event.deltaX;
1836
- props.onWheelScroll(scrollPos);
1837
- if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
1838
- }
1839
- },
1840
- onResize: () => {
1841
- if (ref.current && context.viewport && computedStyle) onSizesChange({
1842
- content: context.viewport.scrollWidth,
1843
- viewport: context.viewport.offsetWidth,
1844
- scrollbar: {
1845
- size: ref.current.clientWidth,
1846
- paddingStart: toInt(computedStyle.paddingLeft),
1847
- paddingEnd: toInt(computedStyle.paddingRight)
1848
- }
1849
- });
1850
- }
1851
- });
1852
- });
1853
- var ScrollAreaScrollbarY = React$1.forwardRef((props, forwardedRef) => {
1854
- const { sizes, onSizesChange, ...scrollbarProps } = props;
1855
- const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1856
- const [computedStyle, setComputedStyle] = React$1.useState();
1857
- const ref = React$1.useRef(null);
1858
- const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
1859
- React$1.useEffect(() => {
1860
- if (ref.current) setComputedStyle(getComputedStyle(ref.current));
1861
- }, [ref]);
1862
- return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
1863
- "data-orientation": "vertical",
1864
- ...scrollbarProps,
1865
- ref: composeRefs,
1866
- sizes,
1867
- style: {
1868
- top: 0,
1869
- right: context.dir === "ltr" ? 0 : void 0,
1870
- left: context.dir === "rtl" ? 0 : void 0,
1871
- bottom: "var(--radix-scroll-area-corner-height)",
1872
- ["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
1873
- ...props.style
1874
- },
1875
- onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
1876
- onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
1877
- onWheelScroll: (event, maxScrollPos) => {
1878
- if (context.viewport) {
1879
- const scrollPos = context.viewport.scrollTop + event.deltaY;
1880
- props.onWheelScroll(scrollPos);
1881
- if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
1882
- }
1883
- },
1884
- onResize: () => {
1885
- if (ref.current && context.viewport && computedStyle) onSizesChange({
1886
- content: context.viewport.scrollHeight,
1887
- viewport: context.viewport.offsetHeight,
1888
- scrollbar: {
1889
- size: ref.current.clientHeight,
1890
- paddingStart: toInt(computedStyle.paddingTop),
1891
- paddingEnd: toInt(computedStyle.paddingBottom)
1892
- }
1893
- });
1894
- }
1895
- });
1896
- });
1897
- var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
1898
- var ScrollAreaScrollbarImpl = React$1.forwardRef((props, forwardedRef) => {
1899
- const { __scopeScrollArea, sizes, hasThumb, onThumbChange, onThumbPointerUp, onThumbPointerDown, onThumbPositionChange, onDragScroll, onWheelScroll, onResize, ...scrollbarProps } = props;
1900
- const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
1901
- const [scrollbar, setScrollbar] = React$1.useState(null);
1902
- const composeRefs = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
1903
- const rectRef = React$1.useRef(null);
1904
- const prevWebkitUserSelectRef = React$1.useRef("");
1905
- const viewport = context.viewport;
1906
- const maxScrollPos = sizes.content - sizes.viewport;
1907
- const handleWheelScroll = useCallbackRef(onWheelScroll);
1908
- const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
1909
- const handleResize = useDebounceCallback(onResize, 10);
1910
- function handleDragScroll(event) {
1911
- if (rectRef.current) onDragScroll({
1912
- x: event.clientX - rectRef.current.left,
1913
- y: event.clientY - rectRef.current.top
1914
- });
906
+ function _toPropertyKey$1(t) {
907
+ var i = _toPrimitive$1(t, "string");
908
+ return "symbol" == typeof i ? i : i + "";
909
+ }
910
+ function _toPrimitive$1(t, r) {
911
+ if ("object" != typeof t || !t) return t;
912
+ var e = t[Symbol.toPrimitive];
913
+ if (void 0 !== e) {
914
+ var i = e.call(t, r || "default");
915
+ if ("object" != typeof i) return i;
916
+ throw new TypeError("@@toPrimitive must return a primitive value.");
1915
917
  }
1916
- React$1.useEffect(() => {
1917
- const handleWheel = (event) => {
1918
- const element = event.target;
1919
- if (scrollbar?.contains(element)) handleWheelScroll(event, maxScrollPos);
1920
- };
1921
- document.addEventListener("wheel", handleWheel, { passive: false });
1922
- return () => document.removeEventListener("wheel", handleWheel, { passive: false });
1923
- }, [
1924
- viewport,
1925
- scrollbar,
1926
- maxScrollPos,
1927
- handleWheelScroll
1928
- ]);
1929
- React$1.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
1930
- useResizeObserver(scrollbar, handleResize);
1931
- useResizeObserver(context.content, handleResize);
1932
- return /* @__PURE__ */ jsx(ScrollbarProvider, {
1933
- scope: __scopeScrollArea,
1934
- scrollbar,
1935
- hasThumb,
1936
- onThumbChange: useCallbackRef(onThumbChange),
1937
- onThumbPointerUp: useCallbackRef(onThumbPointerUp),
1938
- onThumbPositionChange: handleThumbPositionChange,
1939
- onThumbPointerDown: useCallbackRef(onThumbPointerDown),
1940
- children: /* @__PURE__ */ jsx(Primitive$2.div, {
1941
- ...scrollbarProps,
1942
- ref: composeRefs,
1943
- style: {
1944
- position: "absolute",
1945
- ...scrollbarProps.style
1946
- },
1947
- onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
1948
- if (event.button === 0) {
1949
- event.target.setPointerCapture(event.pointerId);
1950
- rectRef.current = scrollbar.getBoundingClientRect();
1951
- prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
1952
- document.body.style.webkitUserSelect = "none";
1953
- if (context.viewport) context.viewport.style.scrollBehavior = "auto";
1954
- handleDragScroll(event);
1955
- }
1956
- }),
1957
- onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
1958
- onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
1959
- const element = event.target;
1960
- if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId);
1961
- document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
1962
- if (context.viewport) context.viewport.style.scrollBehavior = "";
1963
- rectRef.current = null;
1964
- })
1965
- })
1966
- });
1967
- });
1968
- var THUMB_NAME = "ScrollAreaThumb";
1969
- var ScrollAreaThumb = React$1.forwardRef((props, forwardedRef) => {
1970
- const { forceMount, ...thumbProps } = props;
1971
- const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
1972
- return /* @__PURE__ */ jsx(Presence, {
1973
- present: forceMount || scrollbarContext.hasThumb,
1974
- children: /* @__PURE__ */ jsx(ScrollAreaThumbImpl, {
1975
- ref: forwardedRef,
1976
- ...thumbProps
1977
- })
918
+ return ("string" === r ? String : Number)(t);
919
+ }
920
+ var SIZE = 32;
921
+ var defaultLegendContentDefaultProps = {
922
+ align: "center",
923
+ iconSize: 14,
924
+ inactiveColor: "#ccc",
925
+ layout: "horizontal",
926
+ verticalAlign: "middle"
927
+ };
928
+ function Icon(_ref) {
929
+ var { data, iconType, inactiveColor } = _ref;
930
+ var halfSize = SIZE / 2;
931
+ var sixthSize = SIZE / 6;
932
+ var thirdSize = SIZE / 3;
933
+ var color = data.inactive ? inactiveColor : data.color;
934
+ var preferredIcon = iconType !== null && iconType !== void 0 ? iconType : data.type;
935
+ if (preferredIcon === "none") return null;
936
+ if (preferredIcon === "plainline") {
937
+ var _data$payload;
938
+ return /* @__PURE__ */ React$1.createElement("line", {
939
+ strokeWidth: 4,
940
+ fill: "none",
941
+ stroke: color,
942
+ strokeDasharray: (_data$payload = data.payload) === null || _data$payload === void 0 ? void 0 : _data$payload.strokeDasharray,
943
+ x1: 0,
944
+ y1: halfSize,
945
+ x2: SIZE,
946
+ y2: halfSize,
947
+ className: "recharts-legend-icon"
948
+ });
949
+ }
950
+ if (preferredIcon === "line") return /* @__PURE__ */ React$1.createElement("path", {
951
+ strokeWidth: 4,
952
+ fill: "none",
953
+ stroke: color,
954
+ d: "M0,".concat(halfSize, "h").concat(thirdSize, "\n A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(2 * thirdSize, ",").concat(halfSize, "\n H").concat(SIZE, "M").concat(2 * thirdSize, ",").concat(halfSize, "\n A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(thirdSize, ",").concat(halfSize),
955
+ className: "recharts-legend-icon"
1978
956
  });
1979
- });
1980
- var ScrollAreaThumbImpl = React$1.forwardRef((props, forwardedRef) => {
1981
- const { __scopeScrollArea, style, ...thumbProps } = props;
1982
- const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
1983
- const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
1984
- const { onThumbPositionChange } = scrollbarContext;
1985
- const composedRef = useComposedRefs(forwardedRef, (node) => scrollbarContext.onThumbChange(node));
1986
- const removeUnlinkedScrollListenerRef = React$1.useRef(void 0);
1987
- const debounceScrollEnd = useDebounceCallback(() => {
1988
- if (removeUnlinkedScrollListenerRef.current) {
1989
- removeUnlinkedScrollListenerRef.current();
1990
- removeUnlinkedScrollListenerRef.current = void 0;
1991
- }
1992
- }, 100);
1993
- React$1.useEffect(() => {
1994
- const viewport = scrollAreaContext.viewport;
1995
- if (viewport) {
1996
- const handleScroll = () => {
1997
- debounceScrollEnd();
1998
- if (!removeUnlinkedScrollListenerRef.current) {
1999
- removeUnlinkedScrollListenerRef.current = addUnlinkedScrollListener(viewport, onThumbPositionChange);
2000
- onThumbPositionChange();
2001
- }
2002
- };
2003
- onThumbPositionChange();
2004
- viewport.addEventListener("scroll", handleScroll);
2005
- return () => viewport.removeEventListener("scroll", handleScroll);
2006
- }
2007
- }, [
2008
- scrollAreaContext.viewport,
2009
- debounceScrollEnd,
2010
- onThumbPositionChange
2011
- ]);
2012
- return /* @__PURE__ */ jsx(Primitive$2.div, {
2013
- "data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
2014
- ...thumbProps,
2015
- ref: composedRef,
2016
- style: {
2017
- width: "var(--radix-scroll-area-thumb-width)",
2018
- height: "var(--radix-scroll-area-thumb-height)",
2019
- ...style
2020
- },
2021
- onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
2022
- const thumbRect = event.target.getBoundingClientRect();
2023
- const x = event.clientX - thumbRect.left;
2024
- const y = event.clientY - thumbRect.top;
2025
- scrollbarContext.onThumbPointerDown({
2026
- x,
2027
- y
2028
- });
2029
- }),
2030
- onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
957
+ if (preferredIcon === "rect") return /* @__PURE__ */ React$1.createElement("path", {
958
+ stroke: "none",
959
+ fill: color,
960
+ d: "M0,".concat(SIZE / 8, "h").concat(SIZE, "v").concat(SIZE * 3 / 4, "h").concat(-SIZE, "z"),
961
+ className: "recharts-legend-icon"
2031
962
  });
2032
- });
2033
- ScrollAreaThumb.displayName = THUMB_NAME;
2034
- var CORNER_NAME = "ScrollAreaCorner";
2035
- var ScrollAreaCorner = React$1.forwardRef((props, forwardedRef) => {
2036
- const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
2037
- const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
2038
- return context.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ jsx(ScrollAreaCornerImpl, {
2039
- ...props,
2040
- ref: forwardedRef
2041
- }) : null;
2042
- });
2043
- ScrollAreaCorner.displayName = CORNER_NAME;
2044
- var ScrollAreaCornerImpl = React$1.forwardRef((props, forwardedRef) => {
2045
- const { __scopeScrollArea, ...cornerProps } = props;
2046
- const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
2047
- const [width, setWidth] = React$1.useState(0);
2048
- const [height, setHeight] = React$1.useState(0);
2049
- const hasSize = Boolean(width && height);
2050
- useResizeObserver(context.scrollbarX, () => {
2051
- const height2 = context.scrollbarX?.offsetHeight || 0;
2052
- context.onCornerHeightChange(height2);
2053
- setHeight(height2);
963
+ if (/* @__PURE__ */ React$1.isValidElement(data.legendIcon)) {
964
+ var iconProps = _objectSpread$1({}, data);
965
+ delete iconProps.legendIcon;
966
+ return /* @__PURE__ */ React$1.cloneElement(data.legendIcon, iconProps);
967
+ }
968
+ return /* @__PURE__ */ React$1.createElement(Symbols, {
969
+ fill: color,
970
+ cx: halfSize,
971
+ cy: halfSize,
972
+ size: SIZE,
973
+ sizeType: "diameter",
974
+ type: preferredIcon
2054
975
  });
2055
- useResizeObserver(context.scrollbarY, () => {
2056
- const width2 = context.scrollbarY?.offsetWidth || 0;
2057
- context.onCornerWidthChange(width2);
2058
- setWidth(width2);
976
+ }
977
+ function Items(props) {
978
+ var { payload, iconSize, layout, formatter, inactiveColor, iconType } = props;
979
+ var viewBox = {
980
+ x: 0,
981
+ y: 0,
982
+ width: SIZE,
983
+ height: SIZE
984
+ };
985
+ var itemStyle = {
986
+ display: layout === "horizontal" ? "inline-block" : "block",
987
+ marginRight: 10
988
+ };
989
+ var svgStyle = {
990
+ display: "inline-block",
991
+ verticalAlign: "middle",
992
+ marginRight: 4
993
+ };
994
+ return payload.map((entry, i) => {
995
+ var finalFormatter = entry.formatter || formatter;
996
+ var className = clsx({
997
+ "recharts-legend-item": true,
998
+ ["legend-item-".concat(i)]: true,
999
+ inactive: entry.inactive
1000
+ });
1001
+ if (entry.type === "none") return null;
1002
+ var color = entry.inactive ? inactiveColor : entry.color;
1003
+ var finalValue = finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value;
1004
+ return /* @__PURE__ */ React$1.createElement("li", _extends$1({
1005
+ className,
1006
+ style: itemStyle,
1007
+ key: "legend-item-".concat(i)
1008
+ }, adaptEventsOfChild(props, entry, i)), /* @__PURE__ */ React$1.createElement(Surface, {
1009
+ width: iconSize,
1010
+ height: iconSize,
1011
+ viewBox,
1012
+ style: svgStyle,
1013
+ "aria-label": "".concat(finalValue, " legend icon")
1014
+ }, /* @__PURE__ */ React$1.createElement(Icon, {
1015
+ data: entry,
1016
+ iconType,
1017
+ inactiveColor
1018
+ })), /* @__PURE__ */ React$1.createElement("span", {
1019
+ className: "recharts-legend-item-text",
1020
+ style: { color }
1021
+ }, finalValue));
2059
1022
  });
2060
- return hasSize ? /* @__PURE__ */ jsx(Primitive$2.div, {
2061
- ...cornerProps,
2062
- ref: forwardedRef,
2063
- style: {
2064
- width,
2065
- height,
2066
- position: "absolute",
2067
- right: context.dir === "ltr" ? 0 : void 0,
2068
- left: context.dir === "rtl" ? 0 : void 0,
2069
- bottom: 0,
2070
- ...props.style
1023
+ }
1024
+ var DefaultLegendContent = (outsideProps) => {
1025
+ var props = resolveDefaultProps(outsideProps, defaultLegendContentDefaultProps);
1026
+ var { payload, layout, align } = props;
1027
+ if (!payload || !payload.length) return null;
1028
+ var finalStyle = {
1029
+ padding: 0,
1030
+ margin: 0,
1031
+ textAlign: layout === "horizontal" ? align : "left"
1032
+ };
1033
+ return /* @__PURE__ */ React$1.createElement("ul", {
1034
+ className: "recharts-default-legend",
1035
+ style: finalStyle
1036
+ }, /* @__PURE__ */ React$1.createElement(Items, _extends$1({}, props, { payload })));
1037
+ };
1038
+ function useLegendPayload() {
1039
+ return useAppSelector(selectLegendPayload);
1040
+ }
1041
+ var _excluded = ["contextPayload"];
1042
+ function _extends() {
1043
+ return _extends = Object.assign ? Object.assign.bind() : function(n) {
1044
+ for (var e = 1; e < arguments.length; e++) {
1045
+ var t = arguments[e];
1046
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
2071
1047
  }
2072
- }) : null;
2073
- });
2074
- function toInt(value) {
2075
- return value ? parseInt(value, 10) : 0;
1048
+ return n;
1049
+ }, _extends.apply(null, arguments);
2076
1050
  }
2077
- function getThumbRatio(viewportSize, contentSize) {
2078
- const ratio = viewportSize / contentSize;
2079
- return isNaN(ratio) ? 0 : ratio;
1051
+ function ownKeys(e, r) {
1052
+ var t = Object.keys(e);
1053
+ if (Object.getOwnPropertySymbols) {
1054
+ var o = Object.getOwnPropertySymbols(e);
1055
+ r && (o = o.filter(function(r$1) {
1056
+ return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
1057
+ })), t.push.apply(t, o);
1058
+ }
1059
+ return t;
2080
1060
  }
2081
- function getThumbSize(sizes) {
2082
- const ratio = getThumbRatio(sizes.viewport, sizes.content);
2083
- const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
2084
- const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
2085
- return Math.max(thumbSize, 18);
1061
+ function _objectSpread(e) {
1062
+ for (var r = 1; r < arguments.length; r++) {
1063
+ var t = null != arguments[r] ? arguments[r] : {};
1064
+ r % 2 ? ownKeys(Object(t), !0).forEach(function(r$1) {
1065
+ _defineProperty(e, r$1, t[r$1]);
1066
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r$1) {
1067
+ Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
1068
+ });
1069
+ }
1070
+ return e;
2086
1071
  }
2087
- function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
2088
- const thumbSizePx = getThumbSize(sizes);
2089
- const thumbCenter = thumbSizePx / 2;
2090
- const offset = pointerOffset || thumbCenter;
2091
- const thumbOffsetFromEnd = thumbSizePx - offset;
2092
- const minPointerPos = sizes.scrollbar.paddingStart + offset;
2093
- const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
2094
- const maxScrollPos = sizes.content - sizes.viewport;
2095
- const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
2096
- return linearScale([minPointerPos, maxPointerPos], scrollRange)(pointerPos);
1072
+ function _defineProperty(e, r, t) {
1073
+ return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
1074
+ value: t,
1075
+ enumerable: !0,
1076
+ configurable: !0,
1077
+ writable: !0
1078
+ }) : e[r] = t, e;
2097
1079
  }
2098
- function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
2099
- const thumbSizePx = getThumbSize(sizes);
2100
- const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
2101
- const scrollbar = sizes.scrollbar.size - scrollbarPadding;
2102
- const maxScrollPos = sizes.content - sizes.viewport;
2103
- const maxThumbPos = scrollbar - thumbSizePx;
2104
- const scrollWithoutMomentum = clamp(scrollPos, dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0]);
2105
- return linearScale([0, maxScrollPos], [0, maxThumbPos])(scrollWithoutMomentum);
1080
+ function _toPropertyKey(t) {
1081
+ var i = _toPrimitive(t, "string");
1082
+ return "symbol" == typeof i ? i : i + "";
1083
+ }
1084
+ function _toPrimitive(t, r) {
1085
+ if ("object" != typeof t || !t) return t;
1086
+ var e = t[Symbol.toPrimitive];
1087
+ if (void 0 !== e) {
1088
+ var i = e.call(t, r || "default");
1089
+ if ("object" != typeof i) return i;
1090
+ throw new TypeError("@@toPrimitive must return a primitive value.");
1091
+ }
1092
+ return ("string" === r ? String : Number)(t);
1093
+ }
1094
+ function _objectWithoutProperties(e, t) {
1095
+ if (null == e) return {};
1096
+ var o, r, i = _objectWithoutPropertiesLoose(e, t);
1097
+ if (Object.getOwnPropertySymbols) {
1098
+ var n = Object.getOwnPropertySymbols(e);
1099
+ for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
1100
+ }
1101
+ return i;
2106
1102
  }
2107
- function linearScale(input, output) {
2108
- return (value) => {
2109
- if (input[0] === input[1] || output[0] === output[1]) return output[0];
2110
- const ratio = (output[1] - output[0]) / (input[1] - input[0]);
2111
- return output[0] + ratio * (value - input[0]);
2112
- };
1103
+ function _objectWithoutPropertiesLoose(r, e) {
1104
+ if (null == r) return {};
1105
+ var t = {};
1106
+ for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
1107
+ if (-1 !== e.indexOf(n)) continue;
1108
+ t[n] = r[n];
1109
+ }
1110
+ return t;
2113
1111
  }
2114
- function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
2115
- return scrollPos > 0 && scrollPos < maxScrollPos;
1112
+ function defaultUniqBy(entry) {
1113
+ return entry.value;
2116
1114
  }
2117
- var addUnlinkedScrollListener = (node, handler = () => {}) => {
2118
- let prevPosition = {
2119
- left: node.scrollLeft,
2120
- top: node.scrollTop
2121
- };
2122
- let rAF = 0;
2123
- (function loop() {
2124
- const position = {
2125
- left: node.scrollLeft,
2126
- top: node.scrollTop
2127
- };
2128
- const isHorizontalScroll = prevPosition.left !== position.left;
2129
- const isVerticalScroll = prevPosition.top !== position.top;
2130
- if (isHorizontalScroll || isVerticalScroll) handler();
2131
- prevPosition = position;
2132
- rAF = window.requestAnimationFrame(loop);
2133
- })();
2134
- return () => window.cancelAnimationFrame(rAF);
2135
- };
2136
- function useDebounceCallback(callback, delay) {
2137
- const handleCallback = useCallbackRef(callback);
2138
- const debounceTimerRef = React$1.useRef(0);
2139
- React$1.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
2140
- return React$1.useCallback(() => {
2141
- window.clearTimeout(debounceTimerRef.current);
2142
- debounceTimerRef.current = window.setTimeout(handleCallback, delay);
2143
- }, [handleCallback, delay]);
1115
+ function LegendContent(props) {
1116
+ var { contextPayload } = props, otherProps = _objectWithoutProperties(props, _excluded);
1117
+ var finalPayload = getUniqPayload(contextPayload, props.payloadUniqBy, defaultUniqBy);
1118
+ var contentProps = _objectSpread(_objectSpread({}, otherProps), {}, { payload: finalPayload });
1119
+ if (/* @__PURE__ */ React$1.isValidElement(props.content)) return /* @__PURE__ */ React$1.cloneElement(props.content, contentProps);
1120
+ if (typeof props.content === "function") return /* @__PURE__ */ React$1.createElement(props.content, contentProps);
1121
+ return /* @__PURE__ */ React$1.createElement(DefaultLegendContent, contentProps);
2144
1122
  }
2145
- function useResizeObserver(element, onResize) {
2146
- const handleResize = useCallbackRef(onResize);
2147
- useLayoutEffect2(() => {
2148
- let rAF = 0;
2149
- if (element) {
2150
- const resizeObserver = new ResizeObserver(() => {
2151
- cancelAnimationFrame(rAF);
2152
- rAF = window.requestAnimationFrame(handleResize);
2153
- });
2154
- resizeObserver.observe(element);
2155
- return () => {
2156
- window.cancelAnimationFrame(rAF);
2157
- resizeObserver.unobserve(element);
2158
- };
2159
- }
2160
- }, [element, handleResize]);
1123
+ function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
1124
+ var { layout, align, verticalAlign } = props;
1125
+ var hPos, vPos;
1126
+ if (!style || (style.left === void 0 || style.left === null) && (style.right === void 0 || style.right === null)) if (align === "center" && layout === "vertical") hPos = { left: ((chartWidth || 0) - box.width) / 2 };
1127
+ else hPos = align === "right" ? { right: margin && margin.right || 0 } : { left: margin && margin.left || 0 };
1128
+ if (!style || (style.top === void 0 || style.top === null) && (style.bottom === void 0 || style.bottom === null)) if (verticalAlign === "middle") vPos = { top: ((chartHeight || 0) - box.height) / 2 };
1129
+ else vPos = verticalAlign === "bottom" ? { bottom: margin && margin.bottom || 0 } : { top: margin && margin.top || 0 };
1130
+ return _objectSpread(_objectSpread({}, hPos), vPos);
2161
1131
  }
2162
- var Root$1 = ScrollArea$1;
2163
- var Viewport = ScrollAreaViewport;
2164
- var Corner = ScrollAreaCorner;
2165
- var ScrollBarGlass = React$1.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
2166
- ref,
2167
- orientation,
2168
- className: cn("flex touch-none select-none transition-colors", "bg-[var(--scrollbar-track,transparent)]", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className),
2169
- ...props,
2170
- children: /* @__PURE__ */ jsx(ScrollAreaThumb, { className: cn("relative flex-1 rounded-full", "bg-[var(--scrollbar-thumb,var(--glass-border))]", "hover:bg-[var(--scrollbar-thumb-hover,var(--glass-border-hover))]", "transition-colors") })
2171
- }));
2172
- ScrollBarGlass.displayName = "ScrollBarGlass";
2173
- var ScrollAreaGlass = React$1.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxs(Root$1, {
2174
- ref,
2175
- className: cn("relative overflow-hidden", className),
2176
- ...props,
2177
- children: [
2178
- /* @__PURE__ */ jsx(Viewport, {
2179
- className: "h-full w-full rounded-[inherit]",
2180
- children
2181
- }),
2182
- (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBarGlass, { orientation: "vertical" }),
2183
- (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBarGlass, { orientation: "horizontal" }),
2184
- /* @__PURE__ */ jsx(Corner, {})
2185
- ]
2186
- }));
2187
- ScrollAreaGlass.displayName = "ScrollAreaGlass";
2188
- function createContextScope$1(scopeName, createContextScopeDeps = []) {
2189
- let defaultContexts = [];
2190
- function createContext3(rootComponentName, defaultContext) {
2191
- const BaseContext = React$1.createContext(defaultContext);
2192
- const index = defaultContexts.length;
2193
- defaultContexts = [...defaultContexts, defaultContext];
2194
- const Provider = (props) => {
2195
- const { scope, children, ...context } = props;
2196
- const Context = scope?.[scopeName]?.[index] || BaseContext;
2197
- const value = React$1.useMemo(() => context, Object.values(context));
2198
- return /* @__PURE__ */ jsx(Context.Provider, {
2199
- value,
2200
- children
2201
- });
2202
- };
2203
- Provider.displayName = rootComponentName + "Provider";
2204
- function useContext2(consumerName, scope) {
2205
- const Context = scope?.[scopeName]?.[index] || BaseContext;
2206
- const context = React$1.useContext(Context);
2207
- if (context) return context;
2208
- if (defaultContext !== void 0) return defaultContext;
2209
- throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
2210
- }
2211
- return [Provider, useContext2];
2212
- }
2213
- const createScope = () => {
2214
- const scopeContexts = defaultContexts.map((defaultContext) => {
2215
- return React$1.createContext(defaultContext);
2216
- });
2217
- return function useScope(scope) {
2218
- const contexts = scope?.[scopeName] || scopeContexts;
2219
- return React$1.useMemo(() => ({ [`__scope${scopeName}`]: {
2220
- ...scope,
2221
- [scopeName]: contexts
2222
- } }), [scope, contexts]);
2223
- };
2224
- };
2225
- createScope.scopeName = scopeName;
2226
- return [createContext3, composeContextScopes$1(createScope, ...createContextScopeDeps)];
1132
+ function LegendSettingsDispatcher(props) {
1133
+ var dispatch = useAppDispatch();
1134
+ useEffect(() => {
1135
+ dispatch(setLegendSettings(props));
1136
+ }, [dispatch, props]);
1137
+ return null;
2227
1138
  }
2228
- function composeContextScopes$1(...scopes) {
2229
- const baseScope = scopes[0];
2230
- if (scopes.length === 1) return baseScope;
2231
- const createScope = () => {
2232
- const scopeHooks = scopes.map((createScope2) => ({
2233
- useScope: createScope2(),
2234
- scopeName: createScope2.scopeName
2235
- }));
2236
- return function useComposedScopes(overrideScopes) {
2237
- const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
2238
- const currentScope = useScope(overrideScopes)[`__scope${scopeName}`];
2239
- return {
2240
- ...nextScopes2,
2241
- ...currentScope
2242
- };
2243
- }, {});
2244
- return React$1.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
1139
+ function LegendSizeDispatcher(props) {
1140
+ var dispatch = useAppDispatch();
1141
+ useEffect(() => {
1142
+ dispatch(setLegendSize(props));
1143
+ return () => {
1144
+ dispatch(setLegendSize({
1145
+ width: 0,
1146
+ height: 0
1147
+ }));
2245
1148
  };
2246
- };
2247
- createScope.scopeName = baseScope.scopeName;
2248
- return createScope;
1149
+ }, [dispatch, props]);
1150
+ return null;
1151
+ }
1152
+ function getWidthOrHeight(layout, height, width, maxWidth) {
1153
+ if (layout === "vertical" && isNumber(height)) return { height };
1154
+ if (layout === "horizontal") return { width: width || maxWidth };
1155
+ return null;
1156
+ }
1157
+ var legendDefaultProps = {
1158
+ align: "center",
1159
+ iconSize: 14,
1160
+ itemSorter: "value",
1161
+ layout: "horizontal",
1162
+ verticalAlign: "bottom"
1163
+ };
1164
+ function Legend(outsideProps) {
1165
+ var props = resolveDefaultProps(outsideProps, legendDefaultProps);
1166
+ var contextPayload = useLegendPayload();
1167
+ var legendPortalFromContext = useLegendPortal();
1168
+ var margin = useMargin();
1169
+ var { width: widthFromProps, height: heightFromProps, wrapperStyle, portal: portalFromProps } = props;
1170
+ var [lastBoundingBox, updateBoundingBox] = useElementOffset([contextPayload]);
1171
+ var chartWidth = useChartWidth();
1172
+ var chartHeight = useChartHeight();
1173
+ if (chartWidth == null || chartHeight == null) return null;
1174
+ var maxWidth = chartWidth - ((margin === null || margin === void 0 ? void 0 : margin.left) || 0) - ((margin === null || margin === void 0 ? void 0 : margin.right) || 0);
1175
+ var widthOrHeight = getWidthOrHeight(props.layout, heightFromProps, widthFromProps, maxWidth);
1176
+ var outerStyle = portalFromProps ? wrapperStyle : _objectSpread(_objectSpread({
1177
+ position: "absolute",
1178
+ width: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.width) || widthFromProps || "auto",
1179
+ height: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.height) || heightFromProps || "auto"
1180
+ }, getDefaultPosition(wrapperStyle, props, margin, chartWidth, chartHeight, lastBoundingBox)), wrapperStyle);
1181
+ var legendPortal = portalFromProps !== null && portalFromProps !== void 0 ? portalFromProps : legendPortalFromContext;
1182
+ if (legendPortal == null || contextPayload == null) return null;
1183
+ return /* @__PURE__ */ createPortal(/* @__PURE__ */ React$1.createElement("div", {
1184
+ className: "recharts-legend-wrapper",
1185
+ style: outerStyle,
1186
+ ref: updateBoundingBox
1187
+ }, /* @__PURE__ */ React$1.createElement(LegendSettingsDispatcher, {
1188
+ layout: props.layout,
1189
+ align: props.align,
1190
+ verticalAlign: props.verticalAlign,
1191
+ itemSorter: props.itemSorter
1192
+ }), !portalFromProps && /* @__PURE__ */ React$1.createElement(LegendSizeDispatcher, {
1193
+ width: lastBoundingBox.width,
1194
+ height: lastBoundingBox.height
1195
+ }), /* @__PURE__ */ React$1.createElement(LegendContent, _extends({}, props, widthOrHeight, {
1196
+ margin,
1197
+ chartWidth,
1198
+ chartHeight,
1199
+ contextPayload
1200
+ }))), legendPortal);
2249
1201
  }
2250
- var Primitive$1 = [
1202
+ Legend.displayName = "Legend";
1203
+ var Primitive = [
2251
1204
  "a",
2252
1205
  "button",
2253
1206
  "div",
@@ -2281,145 +1234,7 @@ var Primitive$1 = [
2281
1234
  ...primitive,
2282
1235
  [node]: Node
2283
1236
  };
2284
- }, {});
2285
- var COLLAPSIBLE_NAME = "Collapsible";
2286
- var [createCollapsibleContext, createCollapsibleScope] = createContextScope$1(COLLAPSIBLE_NAME);
2287
- var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
2288
- var Collapsible = React$1.forwardRef((props, forwardedRef) => {
2289
- const { __scopeCollapsible, open: openProp, defaultOpen, disabled, onOpenChange, ...collapsibleProps } = props;
2290
- const [open, setOpen] = useControllableState({
2291
- prop: openProp,
2292
- defaultProp: defaultOpen ?? false,
2293
- onChange: onOpenChange,
2294
- caller: COLLAPSIBLE_NAME
2295
- });
2296
- return /* @__PURE__ */ jsx(CollapsibleProvider, {
2297
- scope: __scopeCollapsible,
2298
- disabled,
2299
- contentId: useId$1(),
2300
- open,
2301
- onOpenToggle: React$1.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
2302
- children: /* @__PURE__ */ jsx(Primitive$1.div, {
2303
- "data-state": getState$1(open),
2304
- "data-disabled": disabled ? "" : void 0,
2305
- ...collapsibleProps,
2306
- ref: forwardedRef
2307
- })
2308
- });
2309
- });
2310
- Collapsible.displayName = COLLAPSIBLE_NAME;
2311
- var TRIGGER_NAME = "CollapsibleTrigger";
2312
- var CollapsibleTrigger = React$1.forwardRef((props, forwardedRef) => {
2313
- const { __scopeCollapsible, ...triggerProps } = props;
2314
- const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
2315
- return /* @__PURE__ */ jsx(Primitive$1.button, {
2316
- type: "button",
2317
- "aria-controls": context.contentId,
2318
- "aria-expanded": context.open || false,
2319
- "data-state": getState$1(context.open),
2320
- "data-disabled": context.disabled ? "" : void 0,
2321
- disabled: context.disabled,
2322
- ...triggerProps,
2323
- ref: forwardedRef,
2324
- onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
2325
- });
2326
- });
2327
- CollapsibleTrigger.displayName = TRIGGER_NAME;
2328
- var CONTENT_NAME = "CollapsibleContent";
2329
- var CollapsibleContent = React$1.forwardRef((props, forwardedRef) => {
2330
- const { forceMount, ...contentProps } = props;
2331
- const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
2332
- return /* @__PURE__ */ jsx(Presence, {
2333
- present: forceMount || context.open,
2334
- children: ({ present }) => /* @__PURE__ */ jsx(CollapsibleContentImpl, {
2335
- ...contentProps,
2336
- ref: forwardedRef,
2337
- present
2338
- })
2339
- });
2340
- });
2341
- CollapsibleContent.displayName = CONTENT_NAME;
2342
- var CollapsibleContentImpl = React$1.forwardRef((props, forwardedRef) => {
2343
- const { __scopeCollapsible, present, children, ...contentProps } = props;
2344
- const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
2345
- const [isPresent, setIsPresent] = React$1.useState(present);
2346
- const ref = React$1.useRef(null);
2347
- const composedRefs = useComposedRefs(forwardedRef, ref);
2348
- const heightRef = React$1.useRef(0);
2349
- const height = heightRef.current;
2350
- const widthRef = React$1.useRef(0);
2351
- const width = widthRef.current;
2352
- const isOpen = context.open || isPresent;
2353
- const isMountAnimationPreventedRef = React$1.useRef(isOpen);
2354
- const originalStylesRef = React$1.useRef(void 0);
2355
- React$1.useEffect(() => {
2356
- const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
2357
- return () => cancelAnimationFrame(rAF);
2358
- }, []);
2359
- useLayoutEffect2(() => {
2360
- const node = ref.current;
2361
- if (node) {
2362
- originalStylesRef.current = originalStylesRef.current || {
2363
- transitionDuration: node.style.transitionDuration,
2364
- animationName: node.style.animationName
2365
- };
2366
- node.style.transitionDuration = "0s";
2367
- node.style.animationName = "none";
2368
- const rect = node.getBoundingClientRect();
2369
- heightRef.current = rect.height;
2370
- widthRef.current = rect.width;
2371
- if (!isMountAnimationPreventedRef.current) {
2372
- node.style.transitionDuration = originalStylesRef.current.transitionDuration;
2373
- node.style.animationName = originalStylesRef.current.animationName;
2374
- }
2375
- setIsPresent(present);
2376
- }
2377
- }, [context.open, present]);
2378
- return /* @__PURE__ */ jsx(Primitive$1.div, {
2379
- "data-state": getState$1(context.open),
2380
- "data-disabled": context.disabled ? "" : void 0,
2381
- id: context.contentId,
2382
- hidden: !isOpen,
2383
- ...contentProps,
2384
- ref: composedRefs,
2385
- style: {
2386
- [`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
2387
- [`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
2388
- ...props.style
2389
- },
2390
- children: isOpen && children
2391
- });
2392
- });
2393
- function getState$1(open) {
2394
- return open ? "open" : "closed";
2395
- }
2396
- var Root = Collapsible;
2397
- var Trigger = CollapsibleTrigger;
2398
- var Content = CollapsibleContent;
2399
- var CollapsibleGlassRoot = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Root, {
2400
- ref,
2401
- className: cn("w-full", className),
2402
- ...props
2403
- }));
2404
- CollapsibleGlassRoot.displayName = "CollapsibleGlassRoot";
2405
- var CollapsibleGlassTrigger = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Trigger, {
2406
- ref,
2407
- className: cn("flex w-full items-center justify-between", "focus-visible:outline-none focus-visible:ring-2", "focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2", className),
2408
- ...props
2409
- }));
2410
- CollapsibleGlassTrigger.displayName = "CollapsibleGlassTrigger";
2411
- var CollapsibleGlassContent = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Content, {
2412
- ref,
2413
- className: cn("overflow-hidden transition-all", "data-[state=closed]:animate-collapsible-up", "data-[state=open]:animate-collapsible-down", className),
2414
- ...props,
2415
- children
2416
- }));
2417
- CollapsibleGlassContent.displayName = "CollapsibleGlassContent";
2418
- const CollapsibleGlass = {
2419
- Root: CollapsibleGlassRoot,
2420
- Trigger: CollapsibleGlassTrigger,
2421
- Content: CollapsibleGlassContent
2422
- };
1237
+ }, {});
2423
1238
  function createContextScope(scopeName, createContextScopeDeps = []) {
2424
1239
  let defaultContexts = [];
2425
1240
  function createContext3(rootComponentName, defaultContext) {
@@ -2482,679 +1297,663 @@ function composeContextScopes(...scopes) {
2482
1297
  createScope.scopeName = baseScope.scopeName;
2483
1298
  return createScope;
2484
1299
  }
2485
- var Primitive = [
2486
- "a",
2487
- "button",
2488
- "div",
2489
- "form",
2490
- "h2",
2491
- "h3",
2492
- "img",
2493
- "input",
2494
- "label",
2495
- "li",
2496
- "nav",
2497
- "ol",
2498
- "p",
2499
- "select",
2500
- "span",
2501
- "svg",
2502
- "ul"
2503
- ].reduce((primitive, node) => {
2504
- const Slot$1 = createSlot(`Primitive.${node}`);
2505
- const Node = React$1.forwardRef((props, forwardedRef) => {
2506
- const { asChild, ...primitiveProps } = props;
2507
- const Comp = asChild ? Slot$1 : node;
2508
- if (typeof window !== "undefined") window[Symbol.for("radix-ui")] = true;
2509
- return /* @__PURE__ */ jsx(Comp, {
2510
- ...primitiveProps,
1300
+ function useStateMachine(initialState, machine) {
1301
+ return React$1.useReducer((state, event) => {
1302
+ return machine[state][event] ?? state;
1303
+ }, initialState);
1304
+ }
1305
+ var SCROLL_AREA_NAME = "ScrollArea";
1306
+ var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
1307
+ var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
1308
+ var ScrollArea$1 = React$1.forwardRef((props, forwardedRef) => {
1309
+ const { __scopeScrollArea, type = "hover", dir, scrollHideDelay = 600, ...scrollAreaProps } = props;
1310
+ const [scrollArea, setScrollArea] = React$1.useState(null);
1311
+ const [viewport, setViewport] = React$1.useState(null);
1312
+ const [content, setContent] = React$1.useState(null);
1313
+ const [scrollbarX, setScrollbarX] = React$1.useState(null);
1314
+ const [scrollbarY, setScrollbarY] = React$1.useState(null);
1315
+ const [cornerWidth, setCornerWidth] = React$1.useState(0);
1316
+ const [cornerHeight, setCornerHeight] = React$1.useState(0);
1317
+ const [scrollbarXEnabled, setScrollbarXEnabled] = React$1.useState(false);
1318
+ const [scrollbarYEnabled, setScrollbarYEnabled] = React$1.useState(false);
1319
+ const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));
1320
+ const direction = useDirection(dir);
1321
+ return /* @__PURE__ */ jsx(ScrollAreaProvider, {
1322
+ scope: __scopeScrollArea,
1323
+ type,
1324
+ dir: direction,
1325
+ scrollHideDelay,
1326
+ scrollArea,
1327
+ viewport,
1328
+ onViewportChange: setViewport,
1329
+ content,
1330
+ onContentChange: setContent,
1331
+ scrollbarX,
1332
+ onScrollbarXChange: setScrollbarX,
1333
+ scrollbarXEnabled,
1334
+ onScrollbarXEnabledChange: setScrollbarXEnabled,
1335
+ scrollbarY,
1336
+ onScrollbarYChange: setScrollbarY,
1337
+ scrollbarYEnabled,
1338
+ onScrollbarYEnabledChange: setScrollbarYEnabled,
1339
+ onCornerWidthChange: setCornerWidth,
1340
+ onCornerHeightChange: setCornerHeight,
1341
+ children: /* @__PURE__ */ jsx(Primitive.div, {
1342
+ dir: direction,
1343
+ ...scrollAreaProps,
1344
+ ref: composedRefs,
1345
+ style: {
1346
+ position: "relative",
1347
+ ["--radix-scroll-area-corner-width"]: cornerWidth + "px",
1348
+ ["--radix-scroll-area-corner-height"]: cornerHeight + "px",
1349
+ ...props.style
1350
+ }
1351
+ })
1352
+ });
1353
+ });
1354
+ ScrollArea$1.displayName = SCROLL_AREA_NAME;
1355
+ var VIEWPORT_NAME = "ScrollAreaViewport";
1356
+ var ScrollAreaViewport = React$1.forwardRef((props, forwardedRef) => {
1357
+ const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
1358
+ const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
1359
+ const composedRefs = useComposedRefs(forwardedRef, React$1.useRef(null), context.onViewportChange);
1360
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
1361
+ dangerouslySetInnerHTML: { __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}` },
1362
+ nonce
1363
+ }), /* @__PURE__ */ jsx(Primitive.div, {
1364
+ "data-radix-scroll-area-viewport": "",
1365
+ ...viewportProps,
1366
+ ref: composedRefs,
1367
+ style: {
1368
+ overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
1369
+ overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
1370
+ ...props.style
1371
+ },
1372
+ children: /* @__PURE__ */ jsx("div", {
1373
+ ref: context.onContentChange,
1374
+ style: {
1375
+ minWidth: "100%",
1376
+ display: "table"
1377
+ },
1378
+ children
1379
+ })
1380
+ })] });
1381
+ });
1382
+ ScrollAreaViewport.displayName = VIEWPORT_NAME;
1383
+ var SCROLLBAR_NAME = "ScrollAreaScrollbar";
1384
+ var ScrollAreaScrollbar = React$1.forwardRef((props, forwardedRef) => {
1385
+ const { forceMount, ...scrollbarProps } = props;
1386
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1387
+ const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
1388
+ const isHorizontal = props.orientation === "horizontal";
1389
+ React$1.useEffect(() => {
1390
+ isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
1391
+ return () => {
1392
+ isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
1393
+ };
1394
+ }, [
1395
+ isHorizontal,
1396
+ onScrollbarXEnabledChange,
1397
+ onScrollbarYEnabledChange
1398
+ ]);
1399
+ return context.type === "hover" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarHover, {
1400
+ ...scrollbarProps,
1401
+ ref: forwardedRef,
1402
+ forceMount
1403
+ }) : context.type === "scroll" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarScroll, {
1404
+ ...scrollbarProps,
1405
+ ref: forwardedRef,
1406
+ forceMount
1407
+ }) : context.type === "auto" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
1408
+ ...scrollbarProps,
1409
+ ref: forwardedRef,
1410
+ forceMount
1411
+ }) : context.type === "always" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
1412
+ ...scrollbarProps,
1413
+ ref: forwardedRef
1414
+ }) : null;
1415
+ });
1416
+ ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
1417
+ var ScrollAreaScrollbarHover = React$1.forwardRef((props, forwardedRef) => {
1418
+ const { forceMount, ...scrollbarProps } = props;
1419
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1420
+ const [visible, setVisible] = React$1.useState(false);
1421
+ React$1.useEffect(() => {
1422
+ const scrollArea = context.scrollArea;
1423
+ let hideTimer = 0;
1424
+ if (scrollArea) {
1425
+ const handlePointerEnter = () => {
1426
+ window.clearTimeout(hideTimer);
1427
+ setVisible(true);
1428
+ };
1429
+ const handlePointerLeave = () => {
1430
+ hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
1431
+ };
1432
+ scrollArea.addEventListener("pointerenter", handlePointerEnter);
1433
+ scrollArea.addEventListener("pointerleave", handlePointerLeave);
1434
+ return () => {
1435
+ window.clearTimeout(hideTimer);
1436
+ scrollArea.removeEventListener("pointerenter", handlePointerEnter);
1437
+ scrollArea.removeEventListener("pointerleave", handlePointerLeave);
1438
+ };
1439
+ }
1440
+ }, [context.scrollArea, context.scrollHideDelay]);
1441
+ return /* @__PURE__ */ jsx(Presence, {
1442
+ present: forceMount || visible,
1443
+ children: /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
1444
+ "data-state": visible ? "visible" : "hidden",
1445
+ ...scrollbarProps,
2511
1446
  ref: forwardedRef
2512
- });
1447
+ })
2513
1448
  });
2514
- Node.displayName = `Primitive.${node}`;
2515
- return {
2516
- ...primitive,
2517
- [node]: Node
2518
- };
2519
- }, {});
2520
- var RADIO_NAME = "Radio";
2521
- var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
2522
- var [RadioProvider, useRadioContext] = createRadioContext(RADIO_NAME);
2523
- var Radio = React$1.forwardRef((props, forwardedRef) => {
2524
- const { __scopeRadio, name, checked = false, required, disabled, value = "on", onCheck, form, ...radioProps } = props;
2525
- const [button, setButton] = React$1.useState(null);
2526
- const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
2527
- const hasConsumerStoppedPropagationRef = React$1.useRef(false);
2528
- const isFormControl = button ? form || !!button.closest("form") : true;
2529
- return /* @__PURE__ */ jsxs(RadioProvider, {
2530
- scope: __scopeRadio,
2531
- checked,
2532
- disabled,
2533
- children: [/* @__PURE__ */ jsx(Primitive.button, {
2534
- type: "button",
2535
- role: "radio",
2536
- "aria-checked": checked,
2537
- "data-state": getState(checked),
2538
- "data-disabled": disabled ? "" : void 0,
2539
- disabled,
2540
- value,
2541
- ...radioProps,
2542
- ref: composedRefs,
2543
- onClick: composeEventHandlers(props.onClick, (event) => {
2544
- if (!checked) onCheck?.();
2545
- if (isFormControl) {
2546
- hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
2547
- if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
1449
+ });
1450
+ var ScrollAreaScrollbarScroll = React$1.forwardRef((props, forwardedRef) => {
1451
+ const { forceMount, ...scrollbarProps } = props;
1452
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1453
+ const isHorizontal = props.orientation === "horizontal";
1454
+ const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
1455
+ const [state, send] = useStateMachine("hidden", {
1456
+ hidden: { SCROLL: "scrolling" },
1457
+ scrolling: {
1458
+ SCROLL_END: "idle",
1459
+ POINTER_ENTER: "interacting"
1460
+ },
1461
+ interacting: {
1462
+ SCROLL: "interacting",
1463
+ POINTER_LEAVE: "idle"
1464
+ },
1465
+ idle: {
1466
+ HIDE: "hidden",
1467
+ SCROLL: "scrolling",
1468
+ POINTER_ENTER: "interacting"
1469
+ }
1470
+ });
1471
+ React$1.useEffect(() => {
1472
+ if (state === "idle") {
1473
+ const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
1474
+ return () => window.clearTimeout(hideTimer);
1475
+ }
1476
+ }, [
1477
+ state,
1478
+ context.scrollHideDelay,
1479
+ send
1480
+ ]);
1481
+ React$1.useEffect(() => {
1482
+ const viewport = context.viewport;
1483
+ const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
1484
+ if (viewport) {
1485
+ let prevScrollPos = viewport[scrollDirection];
1486
+ const handleScroll = () => {
1487
+ const scrollPos = viewport[scrollDirection];
1488
+ if (prevScrollPos !== scrollPos) {
1489
+ send("SCROLL");
1490
+ debounceScrollEnd();
2548
1491
  }
2549
- })
2550
- }), isFormControl && /* @__PURE__ */ jsx(RadioBubbleInput, {
2551
- control: button,
2552
- bubbles: !hasConsumerStoppedPropagationRef.current,
2553
- name,
2554
- value,
2555
- checked,
2556
- required,
2557
- disabled,
2558
- form,
2559
- style: { transform: "translateX(-100%)" }
2560
- })]
1492
+ prevScrollPos = scrollPos;
1493
+ };
1494
+ viewport.addEventListener("scroll", handleScroll);
1495
+ return () => viewport.removeEventListener("scroll", handleScroll);
1496
+ }
1497
+ }, [
1498
+ context.viewport,
1499
+ isHorizontal,
1500
+ send,
1501
+ debounceScrollEnd
1502
+ ]);
1503
+ return /* @__PURE__ */ jsx(Presence, {
1504
+ present: forceMount || state !== "hidden",
1505
+ children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
1506
+ "data-state": state === "hidden" ? "hidden" : "visible",
1507
+ ...scrollbarProps,
1508
+ ref: forwardedRef,
1509
+ onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
1510
+ onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
1511
+ })
2561
1512
  });
2562
1513
  });
2563
- Radio.displayName = RADIO_NAME;
2564
- var INDICATOR_NAME = "RadioIndicator";
2565
- var RadioIndicator = React$1.forwardRef((props, forwardedRef) => {
2566
- const { __scopeRadio, forceMount, ...indicatorProps } = props;
2567
- const context = useRadioContext(INDICATOR_NAME, __scopeRadio);
1514
+ var ScrollAreaScrollbarAuto = React$1.forwardRef((props, forwardedRef) => {
1515
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1516
+ const { forceMount, ...scrollbarProps } = props;
1517
+ const [visible, setVisible] = React$1.useState(false);
1518
+ const isHorizontal = props.orientation === "horizontal";
1519
+ const handleResize = useDebounceCallback(() => {
1520
+ if (context.viewport) {
1521
+ const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
1522
+ const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
1523
+ setVisible(isHorizontal ? isOverflowX : isOverflowY);
1524
+ }
1525
+ }, 10);
1526
+ useResizeObserver(context.viewport, handleResize);
1527
+ useResizeObserver(context.content, handleResize);
2568
1528
  return /* @__PURE__ */ jsx(Presence, {
2569
- present: forceMount || context.checked,
2570
- children: /* @__PURE__ */ jsx(Primitive.span, {
2571
- "data-state": getState(context.checked),
2572
- "data-disabled": context.disabled ? "" : void 0,
2573
- ...indicatorProps,
1529
+ present: forceMount || visible,
1530
+ children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
1531
+ "data-state": visible ? "visible" : "hidden",
1532
+ ...scrollbarProps,
2574
1533
  ref: forwardedRef
2575
1534
  })
2576
1535
  });
2577
1536
  });
2578
- RadioIndicator.displayName = INDICATOR_NAME;
2579
- var BUBBLE_INPUT_NAME = "RadioBubbleInput";
2580
- var RadioBubbleInput = React$1.forwardRef(({ __scopeRadio, control, checked, bubbles = true, ...props }, forwardedRef) => {
2581
- const ref = React$1.useRef(null);
2582
- const composedRefs = useComposedRefs(ref, forwardedRef);
2583
- const prevChecked = usePrevious(checked);
2584
- const controlSize = useSize(control);
2585
- React$1.useEffect(() => {
2586
- const input = ref.current;
2587
- if (!input) return;
2588
- const inputProto = window.HTMLInputElement.prototype;
2589
- const setChecked = Object.getOwnPropertyDescriptor(inputProto, "checked").set;
2590
- if (prevChecked !== checked && setChecked) {
2591
- const event = new Event("click", { bubbles });
2592
- setChecked.call(input, checked);
2593
- input.dispatchEvent(event);
1537
+ var ScrollAreaScrollbarVisible = React$1.forwardRef((props, forwardedRef) => {
1538
+ const { orientation = "vertical", ...scrollbarProps } = props;
1539
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1540
+ const thumbRef = React$1.useRef(null);
1541
+ const pointerOffsetRef = React$1.useRef(0);
1542
+ const [sizes, setSizes] = React$1.useState({
1543
+ content: 0,
1544
+ viewport: 0,
1545
+ scrollbar: {
1546
+ size: 0,
1547
+ paddingStart: 0,
1548
+ paddingEnd: 0
2594
1549
  }
2595
- }, [
2596
- prevChecked,
2597
- checked,
2598
- bubbles
2599
- ]);
2600
- return /* @__PURE__ */ jsx(Primitive.input, {
2601
- type: "radio",
2602
- "aria-hidden": true,
2603
- defaultChecked: checked,
2604
- ...props,
2605
- tabIndex: -1,
2606
- ref: composedRefs,
2607
- style: {
2608
- ...props.style,
2609
- ...controlSize,
2610
- position: "absolute",
2611
- pointerEvents: "none",
2612
- opacity: 0,
2613
- margin: 0
1550
+ });
1551
+ const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
1552
+ const commonProps = {
1553
+ ...scrollbarProps,
1554
+ sizes,
1555
+ onSizesChange: setSizes,
1556
+ hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
1557
+ onThumbChange: (thumb) => thumbRef.current = thumb,
1558
+ onThumbPointerUp: () => pointerOffsetRef.current = 0,
1559
+ onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
1560
+ };
1561
+ function getScrollPosition(pointerPos, dir) {
1562
+ return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
1563
+ }
1564
+ if (orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollAreaScrollbarX, {
1565
+ ...commonProps,
1566
+ ref: forwardedRef,
1567
+ onThumbPositionChange: () => {
1568
+ if (context.viewport && thumbRef.current) {
1569
+ const scrollPos = context.viewport.scrollLeft;
1570
+ const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
1571
+ thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
1572
+ }
1573
+ },
1574
+ onWheelScroll: (scrollPos) => {
1575
+ if (context.viewport) context.viewport.scrollLeft = scrollPos;
1576
+ },
1577
+ onDragScroll: (pointerPos) => {
1578
+ if (context.viewport) context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
2614
1579
  }
2615
1580
  });
2616
- });
2617
- RadioBubbleInput.displayName = BUBBLE_INPUT_NAME;
2618
- function getState(checked) {
2619
- return checked ? "checked" : "unchecked";
2620
- }
2621
- var ARROW_KEYS = [
2622
- "ArrowUp",
2623
- "ArrowDown",
2624
- "ArrowLeft",
2625
- "ArrowRight"
2626
- ];
2627
- var RADIO_GROUP_NAME = "RadioGroup";
2628
- var [createRadioGroupContext, createRadioGroupScope] = createContextScope(RADIO_GROUP_NAME, [createRovingFocusGroupScope, createRadioScope]);
2629
- var useRovingFocusGroupScope = createRovingFocusGroupScope();
2630
- var useRadioScope = createRadioScope();
2631
- var [RadioGroupProvider, useRadioGroupContext] = createRadioGroupContext(RADIO_GROUP_NAME);
2632
- var RadioGroup = React$1.forwardRef((props, forwardedRef) => {
2633
- const { __scopeRadioGroup, name, defaultValue, value: valueProp, required = false, disabled = false, orientation, dir, loop = true, onValueChange, ...groupProps } = props;
2634
- const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
2635
- const direction = useDirection(dir);
2636
- const [value, setValue] = useControllableState({
2637
- prop: valueProp,
2638
- defaultProp: defaultValue ?? null,
2639
- onChange: onValueChange,
2640
- caller: RADIO_GROUP_NAME
2641
- });
2642
- return /* @__PURE__ */ jsx(RadioGroupProvider, {
2643
- scope: __scopeRadioGroup,
2644
- name,
2645
- required,
2646
- disabled,
2647
- value,
2648
- onValueChange: setValue,
2649
- children: /* @__PURE__ */ jsx(Root$3, {
2650
- asChild: true,
2651
- ...rovingFocusGroupScope,
2652
- orientation,
2653
- dir: direction,
2654
- loop,
2655
- children: /* @__PURE__ */ jsx(Primitive.div, {
2656
- role: "radiogroup",
2657
- "aria-required": required,
2658
- "aria-orientation": orientation,
2659
- "data-disabled": disabled ? "" : void 0,
2660
- dir: direction,
2661
- ...groupProps,
2662
- ref: forwardedRef
2663
- })
2664
- })
1581
+ if (orientation === "vertical") return /* @__PURE__ */ jsx(ScrollAreaScrollbarY, {
1582
+ ...commonProps,
1583
+ ref: forwardedRef,
1584
+ onThumbPositionChange: () => {
1585
+ if (context.viewport && thumbRef.current) {
1586
+ const scrollPos = context.viewport.scrollTop;
1587
+ const offset = getThumbOffsetFromScroll(scrollPos, sizes);
1588
+ thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
1589
+ }
1590
+ },
1591
+ onWheelScroll: (scrollPos) => {
1592
+ if (context.viewport) context.viewport.scrollTop = scrollPos;
1593
+ },
1594
+ onDragScroll: (pointerPos) => {
1595
+ if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
1596
+ }
2665
1597
  });
1598
+ return null;
2666
1599
  });
2667
- RadioGroup.displayName = RADIO_GROUP_NAME;
2668
- var ITEM_NAME = "RadioGroupItem";
2669
- var RadioGroupItem = React$1.forwardRef((props, forwardedRef) => {
2670
- const { __scopeRadioGroup, disabled, ...itemProps } = props;
2671
- const context = useRadioGroupContext(ITEM_NAME, __scopeRadioGroup);
2672
- const isDisabled = context.disabled || disabled;
2673
- const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
2674
- const radioScope = useRadioScope(__scopeRadioGroup);
1600
+ var ScrollAreaScrollbarX = React$1.forwardRef((props, forwardedRef) => {
1601
+ const { sizes, onSizesChange, ...scrollbarProps } = props;
1602
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1603
+ const [computedStyle, setComputedStyle] = React$1.useState();
2675
1604
  const ref = React$1.useRef(null);
2676
- const composedRefs = useComposedRefs(forwardedRef, ref);
2677
- const checked = context.value === itemProps.value;
2678
- const isArrowKeyPressedRef = React$1.useRef(false);
1605
+ const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
2679
1606
  React$1.useEffect(() => {
2680
- const handleKeyDown = (event) => {
2681
- if (ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
2682
- };
2683
- const handleKeyUp = () => isArrowKeyPressedRef.current = false;
2684
- document.addEventListener("keydown", handleKeyDown);
2685
- document.addEventListener("keyup", handleKeyUp);
2686
- return () => {
2687
- document.removeEventListener("keydown", handleKeyDown);
2688
- document.removeEventListener("keyup", handleKeyUp);
2689
- };
2690
- }, []);
2691
- return /* @__PURE__ */ jsx(Item, {
2692
- asChild: true,
2693
- ...rovingFocusGroupScope,
2694
- focusable: !isDisabled,
2695
- active: checked,
2696
- children: /* @__PURE__ */ jsx(Radio, {
2697
- disabled: isDisabled,
2698
- required: context.required,
2699
- checked,
2700
- ...radioScope,
2701
- ...itemProps,
2702
- name: context.name,
2703
- ref: composedRefs,
2704
- onCheck: () => context.onValueChange(itemProps.value),
2705
- onKeyDown: composeEventHandlers((event) => {
2706
- if (event.key === "Enter") event.preventDefault();
2707
- }),
2708
- onFocus: composeEventHandlers(itemProps.onFocus, () => {
2709
- if (isArrowKeyPressedRef.current) ref.current?.click();
2710
- })
2711
- })
2712
- });
2713
- });
2714
- RadioGroupItem.displayName = ITEM_NAME;
2715
- var INDICATOR_NAME2 = "RadioGroupIndicator";
2716
- var RadioGroupIndicator = React$1.forwardRef((props, forwardedRef) => {
2717
- const { __scopeRadioGroup, ...indicatorProps } = props;
2718
- return /* @__PURE__ */ jsx(RadioIndicator, {
2719
- ...useRadioScope(__scopeRadioGroup),
2720
- ...indicatorProps,
2721
- ref: forwardedRef
1607
+ if (ref.current) setComputedStyle(getComputedStyle(ref.current));
1608
+ }, [ref]);
1609
+ return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
1610
+ "data-orientation": "horizontal",
1611
+ ...scrollbarProps,
1612
+ ref: composeRefs,
1613
+ sizes,
1614
+ style: {
1615
+ bottom: 0,
1616
+ left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
1617
+ right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
1618
+ ["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
1619
+ ...props.style
1620
+ },
1621
+ onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
1622
+ onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
1623
+ onWheelScroll: (event, maxScrollPos) => {
1624
+ if (context.viewport) {
1625
+ const scrollPos = context.viewport.scrollLeft + event.deltaX;
1626
+ props.onWheelScroll(scrollPos);
1627
+ if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
1628
+ }
1629
+ },
1630
+ onResize: () => {
1631
+ if (ref.current && context.viewport && computedStyle) onSizesChange({
1632
+ content: context.viewport.scrollWidth,
1633
+ viewport: context.viewport.offsetWidth,
1634
+ scrollbar: {
1635
+ size: ref.current.clientWidth,
1636
+ paddingStart: toInt(computedStyle.paddingLeft),
1637
+ paddingEnd: toInt(computedStyle.paddingRight)
1638
+ }
1639
+ });
1640
+ }
2722
1641
  });
2723
1642
  });
2724
- RadioGroupIndicator.displayName = INDICATOR_NAME2;
2725
- var Root2 = RadioGroup;
2726
- var Item2 = RadioGroupItem;
2727
- var Indicator = RadioGroupIndicator;
2728
- var RadioGroupGlassRoot = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Root2, {
2729
- ref,
2730
- className: cn("grid gap-2", className),
2731
- ...props
2732
- }));
2733
- RadioGroupGlassRoot.displayName = "RadioGroupGlassRoot";
2734
- var RadioGroupGlassItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Item2, {
2735
- ref,
2736
- className: cn("aspect-square h-4 w-4 rounded-full", "border border-[var(--radio-border,var(--glass-border))]", "bg-[var(--radio-bg,transparent)]", "text-[var(--radio-indicator,var(--semantic-primary))]", "ring-offset-background", "focus:outline-none focus-visible:ring-2", "focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:border-[var(--radio-border-checked,var(--semantic-primary))]", "data-[state=checked]:bg-[var(--radio-bg-checked,var(--semantic-primary-subtle))]", "transition-all duration-200", className),
2737
- ...props,
2738
- children: /* @__PURE__ */ jsx(Indicator, {
2739
- className: "flex items-center justify-center",
2740
- children: /* @__PURE__ */ jsx(Circle, { className: cn("h-2.5 w-2.5 fill-current text-current", "drop-shadow-[0_0_4px_var(--semantic-primary)]") })
2741
- })
2742
- }));
2743
- RadioGroupGlassItem.displayName = "RadioGroupGlassItem";
2744
- const RadioGroupGlass = {
2745
- Root: RadioGroupGlassRoot,
2746
- Item: RadioGroupGlassItem
2747
- };
2748
- var sheetVariants = cva([
2749
- "fixed z-50 gap-4 p-6",
2750
- "bg-[var(--sheet-bg,var(--modal-bg))]",
2751
- "border-[var(--sheet-border,var(--modal-border))]",
2752
- "backdrop-blur-lg",
2753
- "transition-all duration-300 ease-in-out",
2754
- "data-[state=open]:animate-in data-[state=closed]:animate-out"
2755
- ], {
2756
- variants: { side: {
2757
- top: ["inset-x-0 top-0 border-b", "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"],
2758
- bottom: ["inset-x-0 bottom-0 border-t", "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"],
2759
- left: ["inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"],
2760
- right: ["inset-y-0 right-0 h-full w-3/4 border-r sm:max-w-sm", "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"]
2761
- } },
2762
- defaultVariants: { side: "right" }
2763
- });
2764
- var SheetGlassRoot = DialogPrimitive.Root;
2765
- var SheetGlassTrigger = DialogPrimitive.Trigger;
2766
- var SheetGlassClose = DialogPrimitive.Close;
2767
- var SheetGlassPortal = DialogPrimitive.Portal;
2768
- var SheetGlassOverlay = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
2769
- ref,
2770
- className: cn("fixed inset-0 z-50", "bg-[var(--sheet-overlay,var(--modal-overlay))]", "backdrop-blur-sm", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
2771
- ...props
2772
- }));
2773
- SheetGlassOverlay.displayName = "SheetGlassOverlay";
2774
- var SheetGlassContent = React$1.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetGlassPortal, { children: [/* @__PURE__ */ jsx(SheetGlassOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
2775
- ref,
2776
- className: cn(sheetVariants({ side }), className),
2777
- ...props,
2778
- children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
2779
- className: cn("absolute right-4 top-4 rounded-sm", "opacity-70 ring-offset-background", "transition-opacity hover:opacity-100", "focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:ring-offset-2", "disabled:pointer-events-none", "data-[state=open]:bg-secondary"),
2780
- children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
2781
- className: "sr-only",
2782
- children: "Close"
2783
- })]
2784
- })]
2785
- })] }));
2786
- SheetGlassContent.displayName = "SheetGlassContent";
2787
- var SheetGlassHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
2788
- className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
2789
- ...props
2790
- });
2791
- SheetGlassHeader.displayName = "SheetGlassHeader";
2792
- var SheetGlassFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
2793
- className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
2794
- ...props
2795
- });
2796
- SheetGlassFooter.displayName = "SheetGlassFooter";
2797
- var SheetGlassTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
2798
- ref,
2799
- className: cn("text-lg font-semibold", "text-[var(--sheet-title,var(--text-primary))]", className),
2800
- ...props
2801
- }));
2802
- SheetGlassTitle.displayName = "SheetGlassTitle";
2803
- var SheetGlassDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
2804
- ref,
2805
- className: cn("text-sm", "text-[var(--sheet-description,var(--text-muted))]", className),
2806
- ...props
2807
- }));
2808
- SheetGlassDescription.displayName = "SheetGlassDescription";
2809
- const SheetGlass = {
2810
- Root: SheetGlassRoot,
2811
- Trigger: SheetGlassTrigger,
2812
- Close: SheetGlassClose,
2813
- Portal: SheetGlassPortal,
2814
- Overlay: SheetGlassOverlay,
2815
- Content: SheetGlassContent,
2816
- Header: SheetGlassHeader,
2817
- Footer: SheetGlassFooter,
2818
- Title: SheetGlassTitle,
2819
- Description: SheetGlassDescription
2820
- };
2821
- function _extends$1() {
2822
- return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
2823
- for (var e = 1; e < arguments.length; e++) {
2824
- var t = arguments[e];
2825
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
2826
- }
2827
- return n;
2828
- }, _extends$1.apply(null, arguments);
2829
- }
2830
- function ownKeys$1(e, r) {
2831
- var t = Object.keys(e);
2832
- if (Object.getOwnPropertySymbols) {
2833
- var o = Object.getOwnPropertySymbols(e);
2834
- r && (o = o.filter(function(r$1) {
2835
- return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
2836
- })), t.push.apply(t, o);
2837
- }
2838
- return t;
2839
- }
2840
- function _objectSpread$1(e) {
2841
- for (var r = 1; r < arguments.length; r++) {
2842
- var t = null != arguments[r] ? arguments[r] : {};
2843
- r % 2 ? ownKeys$1(Object(t), !0).forEach(function(r$1) {
2844
- _defineProperty$1(e, r$1, t[r$1]);
2845
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r$1) {
2846
- Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
2847
- });
2848
- }
2849
- return e;
2850
- }
2851
- function _defineProperty$1(e, r, t) {
2852
- return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
2853
- value: t,
2854
- enumerable: !0,
2855
- configurable: !0,
2856
- writable: !0
2857
- }) : e[r] = t, e;
2858
- }
2859
- function _toPropertyKey$1(t) {
2860
- var i = _toPrimitive$1(t, "string");
2861
- return "symbol" == typeof i ? i : i + "";
2862
- }
2863
- function _toPrimitive$1(t, r) {
2864
- if ("object" != typeof t || !t) return t;
2865
- var e = t[Symbol.toPrimitive];
2866
- if (void 0 !== e) {
2867
- var i = e.call(t, r || "default");
2868
- if ("object" != typeof i) return i;
2869
- throw new TypeError("@@toPrimitive must return a primitive value.");
2870
- }
2871
- return ("string" === r ? String : Number)(t);
2872
- }
2873
- var SIZE = 32;
2874
- var defaultLegendContentDefaultProps = {
2875
- align: "center",
2876
- iconSize: 14,
2877
- inactiveColor: "#ccc",
2878
- layout: "horizontal",
2879
- verticalAlign: "middle"
2880
- };
2881
- function Icon(_ref) {
2882
- var { data, iconType, inactiveColor } = _ref;
2883
- var halfSize = SIZE / 2;
2884
- var sixthSize = SIZE / 6;
2885
- var thirdSize = SIZE / 3;
2886
- var color = data.inactive ? inactiveColor : data.color;
2887
- var preferredIcon = iconType !== null && iconType !== void 0 ? iconType : data.type;
2888
- if (preferredIcon === "none") return null;
2889
- if (preferredIcon === "plainline") {
2890
- var _data$payload;
2891
- return /* @__PURE__ */ React$1.createElement("line", {
2892
- strokeWidth: 4,
2893
- fill: "none",
2894
- stroke: color,
2895
- strokeDasharray: (_data$payload = data.payload) === null || _data$payload === void 0 ? void 0 : _data$payload.strokeDasharray,
2896
- x1: 0,
2897
- y1: halfSize,
2898
- x2: SIZE,
2899
- y2: halfSize,
2900
- className: "recharts-legend-icon"
1643
+ var ScrollAreaScrollbarY = React$1.forwardRef((props, forwardedRef) => {
1644
+ const { sizes, onSizesChange, ...scrollbarProps } = props;
1645
+ const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
1646
+ const [computedStyle, setComputedStyle] = React$1.useState();
1647
+ const ref = React$1.useRef(null);
1648
+ const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
1649
+ React$1.useEffect(() => {
1650
+ if (ref.current) setComputedStyle(getComputedStyle(ref.current));
1651
+ }, [ref]);
1652
+ return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
1653
+ "data-orientation": "vertical",
1654
+ ...scrollbarProps,
1655
+ ref: composeRefs,
1656
+ sizes,
1657
+ style: {
1658
+ top: 0,
1659
+ right: context.dir === "ltr" ? 0 : void 0,
1660
+ left: context.dir === "rtl" ? 0 : void 0,
1661
+ bottom: "var(--radix-scroll-area-corner-height)",
1662
+ ["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
1663
+ ...props.style
1664
+ },
1665
+ onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
1666
+ onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
1667
+ onWheelScroll: (event, maxScrollPos) => {
1668
+ if (context.viewport) {
1669
+ const scrollPos = context.viewport.scrollTop + event.deltaY;
1670
+ props.onWheelScroll(scrollPos);
1671
+ if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
1672
+ }
1673
+ },
1674
+ onResize: () => {
1675
+ if (ref.current && context.viewport && computedStyle) onSizesChange({
1676
+ content: context.viewport.scrollHeight,
1677
+ viewport: context.viewport.offsetHeight,
1678
+ scrollbar: {
1679
+ size: ref.current.clientHeight,
1680
+ paddingStart: toInt(computedStyle.paddingTop),
1681
+ paddingEnd: toInt(computedStyle.paddingBottom)
1682
+ }
1683
+ });
1684
+ }
1685
+ });
1686
+ });
1687
+ var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
1688
+ var ScrollAreaScrollbarImpl = React$1.forwardRef((props, forwardedRef) => {
1689
+ const { __scopeScrollArea, sizes, hasThumb, onThumbChange, onThumbPointerUp, onThumbPointerDown, onThumbPositionChange, onDragScroll, onWheelScroll, onResize, ...scrollbarProps } = props;
1690
+ const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
1691
+ const [scrollbar, setScrollbar] = React$1.useState(null);
1692
+ const composeRefs = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
1693
+ const rectRef = React$1.useRef(null);
1694
+ const prevWebkitUserSelectRef = React$1.useRef("");
1695
+ const viewport = context.viewport;
1696
+ const maxScrollPos = sizes.content - sizes.viewport;
1697
+ const handleWheelScroll = useCallbackRef(onWheelScroll);
1698
+ const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
1699
+ const handleResize = useDebounceCallback(onResize, 10);
1700
+ function handleDragScroll(event) {
1701
+ if (rectRef.current) onDragScroll({
1702
+ x: event.clientX - rectRef.current.left,
1703
+ y: event.clientY - rectRef.current.top
2901
1704
  });
2902
1705
  }
2903
- if (preferredIcon === "line") return /* @__PURE__ */ React$1.createElement("path", {
2904
- strokeWidth: 4,
2905
- fill: "none",
2906
- stroke: color,
2907
- d: "M0,".concat(halfSize, "h").concat(thirdSize, "\n A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(2 * thirdSize, ",").concat(halfSize, "\n H").concat(SIZE, "M").concat(2 * thirdSize, ",").concat(halfSize, "\n A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(thirdSize, ",").concat(halfSize),
2908
- className: "recharts-legend-icon"
2909
- });
2910
- if (preferredIcon === "rect") return /* @__PURE__ */ React$1.createElement("path", {
2911
- stroke: "none",
2912
- fill: color,
2913
- d: "M0,".concat(SIZE / 8, "h").concat(SIZE, "v").concat(SIZE * 3 / 4, "h").concat(-SIZE, "z"),
2914
- className: "recharts-legend-icon"
1706
+ React$1.useEffect(() => {
1707
+ const handleWheel = (event) => {
1708
+ const element = event.target;
1709
+ if (scrollbar?.contains(element)) handleWheelScroll(event, maxScrollPos);
1710
+ };
1711
+ document.addEventListener("wheel", handleWheel, { passive: false });
1712
+ return () => document.removeEventListener("wheel", handleWheel, { passive: false });
1713
+ }, [
1714
+ viewport,
1715
+ scrollbar,
1716
+ maxScrollPos,
1717
+ handleWheelScroll
1718
+ ]);
1719
+ React$1.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
1720
+ useResizeObserver(scrollbar, handleResize);
1721
+ useResizeObserver(context.content, handleResize);
1722
+ return /* @__PURE__ */ jsx(ScrollbarProvider, {
1723
+ scope: __scopeScrollArea,
1724
+ scrollbar,
1725
+ hasThumb,
1726
+ onThumbChange: useCallbackRef(onThumbChange),
1727
+ onThumbPointerUp: useCallbackRef(onThumbPointerUp),
1728
+ onThumbPositionChange: handleThumbPositionChange,
1729
+ onThumbPointerDown: useCallbackRef(onThumbPointerDown),
1730
+ children: /* @__PURE__ */ jsx(Primitive.div, {
1731
+ ...scrollbarProps,
1732
+ ref: composeRefs,
1733
+ style: {
1734
+ position: "absolute",
1735
+ ...scrollbarProps.style
1736
+ },
1737
+ onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
1738
+ if (event.button === 0) {
1739
+ event.target.setPointerCapture(event.pointerId);
1740
+ rectRef.current = scrollbar.getBoundingClientRect();
1741
+ prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
1742
+ document.body.style.webkitUserSelect = "none";
1743
+ if (context.viewport) context.viewport.style.scrollBehavior = "auto";
1744
+ handleDragScroll(event);
1745
+ }
1746
+ }),
1747
+ onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
1748
+ onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
1749
+ const element = event.target;
1750
+ if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId);
1751
+ document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
1752
+ if (context.viewport) context.viewport.style.scrollBehavior = "";
1753
+ rectRef.current = null;
1754
+ })
1755
+ })
2915
1756
  });
2916
- if (/* @__PURE__ */ React$1.isValidElement(data.legendIcon)) {
2917
- var iconProps = _objectSpread$1({}, data);
2918
- delete iconProps.legendIcon;
2919
- return /* @__PURE__ */ React$1.cloneElement(data.legendIcon, iconProps);
2920
- }
2921
- return /* @__PURE__ */ React$1.createElement(Symbols, {
2922
- fill: color,
2923
- cx: halfSize,
2924
- cy: halfSize,
2925
- size: SIZE,
2926
- sizeType: "diameter",
2927
- type: preferredIcon
1757
+ });
1758
+ var THUMB_NAME = "ScrollAreaThumb";
1759
+ var ScrollAreaThumb = React$1.forwardRef((props, forwardedRef) => {
1760
+ const { forceMount, ...thumbProps } = props;
1761
+ const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
1762
+ return /* @__PURE__ */ jsx(Presence, {
1763
+ present: forceMount || scrollbarContext.hasThumb,
1764
+ children: /* @__PURE__ */ jsx(ScrollAreaThumbImpl, {
1765
+ ref: forwardedRef,
1766
+ ...thumbProps
1767
+ })
2928
1768
  });
2929
- }
2930
- function Items(props) {
2931
- var { payload, iconSize, layout, formatter, inactiveColor, iconType } = props;
2932
- var viewBox = {
2933
- x: 0,
2934
- y: 0,
2935
- width: SIZE,
2936
- height: SIZE
2937
- };
2938
- var itemStyle = {
2939
- display: layout === "horizontal" ? "inline-block" : "block",
2940
- marginRight: 10
2941
- };
2942
- var svgStyle = {
2943
- display: "inline-block",
2944
- verticalAlign: "middle",
2945
- marginRight: 4
2946
- };
2947
- return payload.map((entry, i) => {
2948
- var finalFormatter = entry.formatter || formatter;
2949
- var className = clsx({
2950
- "recharts-legend-item": true,
2951
- ["legend-item-".concat(i)]: true,
2952
- inactive: entry.inactive
2953
- });
2954
- if (entry.type === "none") return null;
2955
- var color = entry.inactive ? inactiveColor : entry.color;
2956
- var finalValue = finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value;
2957
- return /* @__PURE__ */ React$1.createElement("li", _extends$1({
2958
- className,
2959
- style: itemStyle,
2960
- key: "legend-item-".concat(i)
2961
- }, adaptEventsOfChild(props, entry, i)), /* @__PURE__ */ React$1.createElement(Surface, {
2962
- width: iconSize,
2963
- height: iconSize,
2964
- viewBox,
2965
- style: svgStyle,
2966
- "aria-label": "".concat(finalValue, " legend icon")
2967
- }, /* @__PURE__ */ React$1.createElement(Icon, {
2968
- data: entry,
2969
- iconType,
2970
- inactiveColor
2971
- })), /* @__PURE__ */ React$1.createElement("span", {
2972
- className: "recharts-legend-item-text",
2973
- style: { color }
2974
- }, finalValue));
1769
+ });
1770
+ var ScrollAreaThumbImpl = React$1.forwardRef((props, forwardedRef) => {
1771
+ const { __scopeScrollArea, style, ...thumbProps } = props;
1772
+ const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
1773
+ const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
1774
+ const { onThumbPositionChange } = scrollbarContext;
1775
+ const composedRef = useComposedRefs(forwardedRef, (node) => scrollbarContext.onThumbChange(node));
1776
+ const removeUnlinkedScrollListenerRef = React$1.useRef(void 0);
1777
+ const debounceScrollEnd = useDebounceCallback(() => {
1778
+ if (removeUnlinkedScrollListenerRef.current) {
1779
+ removeUnlinkedScrollListenerRef.current();
1780
+ removeUnlinkedScrollListenerRef.current = void 0;
1781
+ }
1782
+ }, 100);
1783
+ React$1.useEffect(() => {
1784
+ const viewport = scrollAreaContext.viewport;
1785
+ if (viewport) {
1786
+ const handleScroll = () => {
1787
+ debounceScrollEnd();
1788
+ if (!removeUnlinkedScrollListenerRef.current) {
1789
+ removeUnlinkedScrollListenerRef.current = addUnlinkedScrollListener(viewport, onThumbPositionChange);
1790
+ onThumbPositionChange();
1791
+ }
1792
+ };
1793
+ onThumbPositionChange();
1794
+ viewport.addEventListener("scroll", handleScroll);
1795
+ return () => viewport.removeEventListener("scroll", handleScroll);
1796
+ }
1797
+ }, [
1798
+ scrollAreaContext.viewport,
1799
+ debounceScrollEnd,
1800
+ onThumbPositionChange
1801
+ ]);
1802
+ return /* @__PURE__ */ jsx(Primitive.div, {
1803
+ "data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
1804
+ ...thumbProps,
1805
+ ref: composedRef,
1806
+ style: {
1807
+ width: "var(--radix-scroll-area-thumb-width)",
1808
+ height: "var(--radix-scroll-area-thumb-height)",
1809
+ ...style
1810
+ },
1811
+ onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
1812
+ const thumbRect = event.target.getBoundingClientRect();
1813
+ const x = event.clientX - thumbRect.left;
1814
+ const y = event.clientY - thumbRect.top;
1815
+ scrollbarContext.onThumbPointerDown({
1816
+ x,
1817
+ y
1818
+ });
1819
+ }),
1820
+ onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
2975
1821
  });
2976
- }
2977
- var DefaultLegendContent = (outsideProps) => {
2978
- var props = resolveDefaultProps(outsideProps, defaultLegendContentDefaultProps);
2979
- var { payload, layout, align } = props;
2980
- if (!payload || !payload.length) return null;
2981
- var finalStyle = {
2982
- padding: 0,
2983
- margin: 0,
2984
- textAlign: layout === "horizontal" ? align : "left"
2985
- };
2986
- return /* @__PURE__ */ React$1.createElement("ul", {
2987
- className: "recharts-default-legend",
2988
- style: finalStyle
2989
- }, /* @__PURE__ */ React$1.createElement(Items, _extends$1({}, props, { payload })));
2990
- };
2991
- function useLegendPayload() {
2992
- return useAppSelector(selectLegendPayload);
2993
- }
2994
- var _excluded = ["contextPayload"];
2995
- function _extends() {
2996
- return _extends = Object.assign ? Object.assign.bind() : function(n) {
2997
- for (var e = 1; e < arguments.length; e++) {
2998
- var t = arguments[e];
2999
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
1822
+ });
1823
+ ScrollAreaThumb.displayName = THUMB_NAME;
1824
+ var CORNER_NAME = "ScrollAreaCorner";
1825
+ var ScrollAreaCorner = React$1.forwardRef((props, forwardedRef) => {
1826
+ const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
1827
+ const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
1828
+ return context.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ jsx(ScrollAreaCornerImpl, {
1829
+ ...props,
1830
+ ref: forwardedRef
1831
+ }) : null;
1832
+ });
1833
+ ScrollAreaCorner.displayName = CORNER_NAME;
1834
+ var ScrollAreaCornerImpl = React$1.forwardRef((props, forwardedRef) => {
1835
+ const { __scopeScrollArea, ...cornerProps } = props;
1836
+ const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
1837
+ const [width, setWidth] = React$1.useState(0);
1838
+ const [height, setHeight] = React$1.useState(0);
1839
+ const hasSize = Boolean(width && height);
1840
+ useResizeObserver(context.scrollbarX, () => {
1841
+ const height2 = context.scrollbarX?.offsetHeight || 0;
1842
+ context.onCornerHeightChange(height2);
1843
+ setHeight(height2);
1844
+ });
1845
+ useResizeObserver(context.scrollbarY, () => {
1846
+ const width2 = context.scrollbarY?.offsetWidth || 0;
1847
+ context.onCornerWidthChange(width2);
1848
+ setWidth(width2);
1849
+ });
1850
+ return hasSize ? /* @__PURE__ */ jsx(Primitive.div, {
1851
+ ...cornerProps,
1852
+ ref: forwardedRef,
1853
+ style: {
1854
+ width,
1855
+ height,
1856
+ position: "absolute",
1857
+ right: context.dir === "ltr" ? 0 : void 0,
1858
+ left: context.dir === "rtl" ? 0 : void 0,
1859
+ bottom: 0,
1860
+ ...props.style
3000
1861
  }
3001
- return n;
3002
- }, _extends.apply(null, arguments);
3003
- }
3004
- function ownKeys(e, r) {
3005
- var t = Object.keys(e);
3006
- if (Object.getOwnPropertySymbols) {
3007
- var o = Object.getOwnPropertySymbols(e);
3008
- r && (o = o.filter(function(r$1) {
3009
- return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
3010
- })), t.push.apply(t, o);
3011
- }
3012
- return t;
3013
- }
3014
- function _objectSpread(e) {
3015
- for (var r = 1; r < arguments.length; r++) {
3016
- var t = null != arguments[r] ? arguments[r] : {};
3017
- r % 2 ? ownKeys(Object(t), !0).forEach(function(r$1) {
3018
- _defineProperty(e, r$1, t[r$1]);
3019
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r$1) {
3020
- Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
3021
- });
3022
- }
3023
- return e;
3024
- }
3025
- function _defineProperty(e, r, t) {
3026
- return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
3027
- value: t,
3028
- enumerable: !0,
3029
- configurable: !0,
3030
- writable: !0
3031
- }) : e[r] = t, e;
3032
- }
3033
- function _toPropertyKey(t) {
3034
- var i = _toPrimitive(t, "string");
3035
- return "symbol" == typeof i ? i : i + "";
3036
- }
3037
- function _toPrimitive(t, r) {
3038
- if ("object" != typeof t || !t) return t;
3039
- var e = t[Symbol.toPrimitive];
3040
- if (void 0 !== e) {
3041
- var i = e.call(t, r || "default");
3042
- if ("object" != typeof i) return i;
3043
- throw new TypeError("@@toPrimitive must return a primitive value.");
3044
- }
3045
- return ("string" === r ? String : Number)(t);
1862
+ }) : null;
1863
+ });
1864
+ function toInt(value) {
1865
+ return value ? parseInt(value, 10) : 0;
3046
1866
  }
3047
- function _objectWithoutProperties(e, t) {
3048
- if (null == e) return {};
3049
- var o, r, i = _objectWithoutPropertiesLoose(e, t);
3050
- if (Object.getOwnPropertySymbols) {
3051
- var n = Object.getOwnPropertySymbols(e);
3052
- for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
3053
- }
3054
- return i;
1867
+ function getThumbRatio(viewportSize, contentSize) {
1868
+ const ratio = viewportSize / contentSize;
1869
+ return isNaN(ratio) ? 0 : ratio;
3055
1870
  }
3056
- function _objectWithoutPropertiesLoose(r, e) {
3057
- if (null == r) return {};
3058
- var t = {};
3059
- for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
3060
- if (-1 !== e.indexOf(n)) continue;
3061
- t[n] = r[n];
3062
- }
3063
- return t;
1871
+ function getThumbSize(sizes) {
1872
+ const ratio = getThumbRatio(sizes.viewport, sizes.content);
1873
+ const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
1874
+ const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
1875
+ return Math.max(thumbSize, 18);
3064
1876
  }
3065
- function defaultUniqBy(entry) {
3066
- return entry.value;
1877
+ function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
1878
+ const thumbSizePx = getThumbSize(sizes);
1879
+ const thumbCenter = thumbSizePx / 2;
1880
+ const offset = pointerOffset || thumbCenter;
1881
+ const thumbOffsetFromEnd = thumbSizePx - offset;
1882
+ const minPointerPos = sizes.scrollbar.paddingStart + offset;
1883
+ const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
1884
+ const maxScrollPos = sizes.content - sizes.viewport;
1885
+ const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
1886
+ return linearScale([minPointerPos, maxPointerPos], scrollRange)(pointerPos);
3067
1887
  }
3068
- function LegendContent(props) {
3069
- var { contextPayload } = props, otherProps = _objectWithoutProperties(props, _excluded);
3070
- var finalPayload = getUniqPayload(contextPayload, props.payloadUniqBy, defaultUniqBy);
3071
- var contentProps = _objectSpread(_objectSpread({}, otherProps), {}, { payload: finalPayload });
3072
- if (/* @__PURE__ */ React$1.isValidElement(props.content)) return /* @__PURE__ */ React$1.cloneElement(props.content, contentProps);
3073
- if (typeof props.content === "function") return /* @__PURE__ */ React$1.createElement(props.content, contentProps);
3074
- return /* @__PURE__ */ React$1.createElement(DefaultLegendContent, contentProps);
1888
+ function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
1889
+ const thumbSizePx = getThumbSize(sizes);
1890
+ const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
1891
+ const scrollbar = sizes.scrollbar.size - scrollbarPadding;
1892
+ const maxScrollPos = sizes.content - sizes.viewport;
1893
+ const maxThumbPos = scrollbar - thumbSizePx;
1894
+ const scrollWithoutMomentum = clamp(scrollPos, dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0]);
1895
+ return linearScale([0, maxScrollPos], [0, maxThumbPos])(scrollWithoutMomentum);
3075
1896
  }
3076
- function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
3077
- var { layout, align, verticalAlign } = props;
3078
- var hPos, vPos;
3079
- if (!style || (style.left === void 0 || style.left === null) && (style.right === void 0 || style.right === null)) if (align === "center" && layout === "vertical") hPos = { left: ((chartWidth || 0) - box.width) / 2 };
3080
- else hPos = align === "right" ? { right: margin && margin.right || 0 } : { left: margin && margin.left || 0 };
3081
- if (!style || (style.top === void 0 || style.top === null) && (style.bottom === void 0 || style.bottom === null)) if (verticalAlign === "middle") vPos = { top: ((chartHeight || 0) - box.height) / 2 };
3082
- else vPos = verticalAlign === "bottom" ? { bottom: margin && margin.bottom || 0 } : { top: margin && margin.top || 0 };
3083
- return _objectSpread(_objectSpread({}, hPos), vPos);
1897
+ function linearScale(input, output) {
1898
+ return (value) => {
1899
+ if (input[0] === input[1] || output[0] === output[1]) return output[0];
1900
+ const ratio = (output[1] - output[0]) / (input[1] - input[0]);
1901
+ return output[0] + ratio * (value - input[0]);
1902
+ };
3084
1903
  }
3085
- function LegendSettingsDispatcher(props) {
3086
- var dispatch = useAppDispatch();
3087
- useEffect(() => {
3088
- dispatch(setLegendSettings(props));
3089
- }, [dispatch, props]);
3090
- return null;
1904
+ function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
1905
+ return scrollPos > 0 && scrollPos < maxScrollPos;
3091
1906
  }
3092
- function LegendSizeDispatcher(props) {
3093
- var dispatch = useAppDispatch();
3094
- useEffect(() => {
3095
- dispatch(setLegendSize(props));
3096
- return () => {
3097
- dispatch(setLegendSize({
3098
- width: 0,
3099
- height: 0
3100
- }));
1907
+ var addUnlinkedScrollListener = (node, handler = () => {}) => {
1908
+ let prevPosition = {
1909
+ left: node.scrollLeft,
1910
+ top: node.scrollTop
1911
+ };
1912
+ let rAF = 0;
1913
+ (function loop() {
1914
+ const position = {
1915
+ left: node.scrollLeft,
1916
+ top: node.scrollTop
3101
1917
  };
3102
- }, [dispatch, props]);
3103
- return null;
3104
- }
3105
- function getWidthOrHeight(layout, height, width, maxWidth) {
3106
- if (layout === "vertical" && isNumber(height)) return { height };
3107
- if (layout === "horizontal") return { width: width || maxWidth };
3108
- return null;
3109
- }
3110
- var legendDefaultProps = {
3111
- align: "center",
3112
- iconSize: 14,
3113
- itemSorter: "value",
3114
- layout: "horizontal",
3115
- verticalAlign: "bottom"
1918
+ const isHorizontalScroll = prevPosition.left !== position.left;
1919
+ const isVerticalScroll = prevPosition.top !== position.top;
1920
+ if (isHorizontalScroll || isVerticalScroll) handler();
1921
+ prevPosition = position;
1922
+ rAF = window.requestAnimationFrame(loop);
1923
+ })();
1924
+ return () => window.cancelAnimationFrame(rAF);
3116
1925
  };
3117
- function Legend(outsideProps) {
3118
- var props = resolveDefaultProps(outsideProps, legendDefaultProps);
3119
- var contextPayload = useLegendPayload();
3120
- var legendPortalFromContext = useLegendPortal();
3121
- var margin = useMargin();
3122
- var { width: widthFromProps, height: heightFromProps, wrapperStyle, portal: portalFromProps } = props;
3123
- var [lastBoundingBox, updateBoundingBox] = useElementOffset([contextPayload]);
3124
- var chartWidth = useChartWidth();
3125
- var chartHeight = useChartHeight();
3126
- if (chartWidth == null || chartHeight == null) return null;
3127
- var maxWidth = chartWidth - ((margin === null || margin === void 0 ? void 0 : margin.left) || 0) - ((margin === null || margin === void 0 ? void 0 : margin.right) || 0);
3128
- var widthOrHeight = getWidthOrHeight(props.layout, heightFromProps, widthFromProps, maxWidth);
3129
- var outerStyle = portalFromProps ? wrapperStyle : _objectSpread(_objectSpread({
3130
- position: "absolute",
3131
- width: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.width) || widthFromProps || "auto",
3132
- height: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.height) || heightFromProps || "auto"
3133
- }, getDefaultPosition(wrapperStyle, props, margin, chartWidth, chartHeight, lastBoundingBox)), wrapperStyle);
3134
- var legendPortal = portalFromProps !== null && portalFromProps !== void 0 ? portalFromProps : legendPortalFromContext;
3135
- if (legendPortal == null || contextPayload == null) return null;
3136
- return /* @__PURE__ */ createPortal(/* @__PURE__ */ React$1.createElement("div", {
3137
- className: "recharts-legend-wrapper",
3138
- style: outerStyle,
3139
- ref: updateBoundingBox
3140
- }, /* @__PURE__ */ React$1.createElement(LegendSettingsDispatcher, {
3141
- layout: props.layout,
3142
- align: props.align,
3143
- verticalAlign: props.verticalAlign,
3144
- itemSorter: props.itemSorter
3145
- }), !portalFromProps && /* @__PURE__ */ React$1.createElement(LegendSizeDispatcher, {
3146
- width: lastBoundingBox.width,
3147
- height: lastBoundingBox.height
3148
- }), /* @__PURE__ */ React$1.createElement(LegendContent, _extends({}, props, widthOrHeight, {
3149
- margin,
3150
- chartWidth,
3151
- chartHeight,
3152
- contextPayload
3153
- }))), legendPortal);
1926
+ function useDebounceCallback(callback, delay) {
1927
+ const handleCallback = useCallbackRef(callback);
1928
+ const debounceTimerRef = React$1.useRef(0);
1929
+ React$1.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
1930
+ return React$1.useCallback(() => {
1931
+ window.clearTimeout(debounceTimerRef.current);
1932
+ debounceTimerRef.current = window.setTimeout(handleCallback, delay);
1933
+ }, [handleCallback, delay]);
3154
1934
  }
3155
- Legend.displayName = "Legend";
1935
+ function useResizeObserver(element, onResize) {
1936
+ const handleResize = useCallbackRef(onResize);
1937
+ useLayoutEffect2(() => {
1938
+ let rAF = 0;
1939
+ if (element) {
1940
+ const resizeObserver = new ResizeObserver(() => {
1941
+ cancelAnimationFrame(rAF);
1942
+ rAF = window.requestAnimationFrame(handleResize);
1943
+ });
1944
+ resizeObserver.observe(element);
1945
+ return () => {
1946
+ window.cancelAnimationFrame(rAF);
1947
+ resizeObserver.unobserve(element);
1948
+ };
1949
+ }
1950
+ }, [element, handleResize]);
1951
+ }
1952
+ var Root = ScrollArea$1;
1953
+ var Viewport = ScrollAreaViewport;
1954
+ var Corner = ScrollAreaCorner;
3156
1955
  function ScrollArea({ className, children, ...props }) {
3157
- return /* @__PURE__ */ jsxs(Root$1, {
1956
+ return /* @__PURE__ */ jsxs(Root, {
3158
1957
  "data-slot": "scroll-area",
3159
1958
  className: cn("relative", className),
3160
1959
  ...props,
@@ -3836,6 +2635,6 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
3836
2635
  size: "default"
3837
2636
  }
3838
2637
  });
3839
- export { AICardGlass, AlertGlass, AlertGlassDescription, AlertGlassTitle, AvatarGlass, AvatarGlassFallback, AvatarGlassImage, AvatarGlassSimple, BadgeGlass, Bar, BarChart, BaseProgressGlass, ButtonGlass, CareerStatsGlass, CareerStatsHeaderGlass, Cell, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CheckboxGlass, CircularMetricGlass, CircularProgressGlass, CollapsibleGlass, CollapsibleGlassContent, CollapsibleGlassRoot, CollapsibleGlassTrigger, ComboBoxGlass, ContributionMetricsGlass, DropdownGlass, DropdownMenuGlass, DropdownMenuGlassCheckboxItem, DropdownMenuGlassContent, DropdownMenuGlassGroup, DropdownMenuGlassItem, DropdownMenuGlassLabel, DropdownMenuGlassPortal, DropdownMenuGlassRadioGroup, DropdownMenuGlassRadioItem, DropdownMenuGlassSeparator, DropdownMenuGlassShortcut, DropdownMenuGlassSub, DropdownMenuGlassSubContent, DropdownMenuGlassSubTrigger, DropdownMenuGlassTrigger, ExpandableHeaderGlass, FlagAlertGlass, FlagsSectionGlass, FormFieldWrapper, GlassCard, GlassCardAction, GlassCardContent, GlassCardDescription, GlassCardFooter, GlassCardHeader, GlassCardTitle, HeaderBrandingGlass, HeaderNavGlass, IconButtonGlass, InputGlass, InsightCardGlass, InteractiveCard, LanguageBarGlass, MetricCardGlass, MetricsGridGlass, ModalGlass, NotificationGlass, PopoverGlass, PopoverGlassAnchor, PopoverGlassContent, PopoverGlassLegacy, PopoverGlassTrigger, ProfileAvatarGlass, ProfileHeaderGlass, ProgressGlass, ProjectsListGlass, RadioGroupGlass, RadioGroupGlassItem, RadioGroupGlassRoot, RainbowProgressGlass, RepositoryCardGlass, RepositoryHeaderGlass, RepositoryMetadataGlass, ResponsiveContainer, ScrollAreaGlass, ScrollBarGlass, SearchBoxGlass, SegmentedControlGlass, SeparatorGlass, SheetGlass, SheetGlassClose, SheetGlassContent, SheetGlassDescription, SheetGlassFooter, SheetGlassHeader, SheetGlassOverlay, SheetGlassPortal, SheetGlassRoot, SheetGlassTitle, SheetGlassTrigger, SidebarGlass, SkeletonGlass, SliderGlass, SortDropdownGlass, SparklineGlass, SplitLayoutAccordion, SplitLayoutGlass, StatItemGlass, StatusIndicatorGlass, StepperGlass, THEMES, THEME_CONFIG, TabsGlass, ThemeProvider, ThemeToggleGlass, ToggleGlass, ToggleGroupGlass, ToggleGroupGlassItem, ToggleGroupGlassRoot, TooltipGlass, TooltipGlassContent, TooltipGlassProvider, TooltipGlassSimple, TooltipGlassTrigger, TouchTarget, TrustScoreCardGlass, TrustScoreDisplayGlass, UserInfoGlass, UserStatsLineGlass, YearCardGlass, alertVariants, avatarSizes, badgeVariants, buttonGlassVariants, cardIntensity, cn, dropdownAlign, getNextTheme, getThemeConfig, inputVariants, insightCardVariants, insightVariantConfig, modalSizes, notificationVariants, progressSizes, alertVariants$1 as shadcnAlertVariants, badgeVariants$1 as shadcnBadgeVariants, buttonVariants as shadcnButtonVariants, skeletonVariants, sparklineBarVariants, sparklineContainerVariants, statusSizes, stepperConnectorVariants, stepperContentVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperLabelVariants, stepperListVariants, stepperRootVariants, stepperStepContainerVariants, toggleSizes, tooltipPositions, useChart, useFocus, useHover, useResponsive, useSidebar, useSplitLayout, useSplitLayoutOptional, useTheme, useWallpaperTint };
2638
+ export { AICardGlass, AlertGlass, AlertGlassDescription, AlertGlassTitle, AvatarGlass, AvatarGlassFallback, AvatarGlassImage, AvatarGlassSimple, BadgeGlass, Bar, BarChart, BaseProgressGlass, ButtonGlass, CardGlass, CardGlassAction, CardGlassContent, CardGlassDescription, CardGlassFooter, CardGlassHeader, CardGlassRoot, CardGlassTitle, CareerStatsGlass, CareerStatsHeaderGlass, Cell, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CheckboxGlass, CircularMetricGlass, CircularProgressGlass, ComboBoxGlass, ContributionMetricsGlass, DropdownGlass, DropdownMenuGlass, DropdownMenuGlassCheckboxItem, DropdownMenuGlassContent, DropdownMenuGlassGroup, DropdownMenuGlassItem, DropdownMenuGlassLabel, DropdownMenuGlassPortal, DropdownMenuGlassRadioGroup, DropdownMenuGlassRadioItem, DropdownMenuGlassSeparator, DropdownMenuGlassShortcut, DropdownMenuGlassSub, DropdownMenuGlassSubContent, DropdownMenuGlassSubTrigger, DropdownMenuGlassTrigger, ExpandableHeaderGlass, FlagAlertGlass, FlagsSectionGlass, FormFieldWrapper, GlassCard, HeaderBrandingGlass, HeaderNavGlass, IconButtonGlass, InputGlass, InsightCardGlass, InteractiveCard, LanguageBarGlass, MetricCardGlass, MetricsGridGlass, ModalGlass, NotificationGlass, PopoverGlass, PopoverGlassAnchor, PopoverGlassContent, PopoverGlassLegacy, PopoverGlassTrigger, ProfileAvatarGlass, ProfileHeaderGlass, ProgressGlass, ProjectsListGlass, RainbowProgressGlass, RepositoryCardGlass, RepositoryHeaderGlass, RepositoryMetadataGlass, ResponsiveContainer, SearchBoxGlass, SegmentedControlGlass, SidebarGlass, SkeletonGlass, SliderGlass, SortDropdownGlass, SparklineGlass, SplitLayoutAccordion, SplitLayoutGlass, StatItemGlass, StatusIndicatorGlass, StepperGlass, THEMES, THEME_CONFIG, TabsGlass, ThemeProvider, ThemeToggleGlass, ToggleGlass, TooltipGlass, TooltipGlassContent, TooltipGlassProvider, TooltipGlassSimple, TooltipGlassTrigger, TouchTarget, TrustScoreCardGlass, TrustScoreDisplayGlass, UserInfoGlass, UserStatsLineGlass, YearCardGlass, alertVariants, avatarSizes, badgeVariants, buttonGlassVariants, cardIntensity, cn, dropdownAlign, getNextTheme, getThemeConfig, inputVariants, insightCardVariants, insightVariantConfig, modalSizes, notificationVariants, progressSizes, alertVariants$1 as shadcnAlertVariants, badgeVariants$1 as shadcnBadgeVariants, buttonVariants as shadcnButtonVariants, skeletonVariants, sparklineBarVariants, sparklineContainerVariants, statusSizes, stepperConnectorVariants, stepperContentVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperLabelVariants, stepperListVariants, stepperRootVariants, stepperStepContainerVariants, toggleSizes, tooltipPositions, useChart, useFocus, useHover, useResponsive, useSidebar, useSplitLayout, useSplitLayoutOptional, useTheme, useWallpaperTint };
3840
2639
 
3841
2640
  //# sourceMappingURL=index.js.map