@dev-dga/react 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +52 -0
- package/README.md +6 -4
- package/dist/index.cjs +2687 -39
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +612 -11
- package/dist/index.d.ts +612 -11
- package/dist/index.js +2628 -47
- package/dist/index.js.map +1 -1
- package/package.json +7 -4
package/dist/index.js
CHANGED
|
@@ -514,6 +514,47 @@ function ChevronRight(props) {
|
|
|
514
514
|
}
|
|
515
515
|
);
|
|
516
516
|
}
|
|
517
|
+
function ChevronLeft(props) {
|
|
518
|
+
return /* @__PURE__ */ jsx6(
|
|
519
|
+
"svg",
|
|
520
|
+
{
|
|
521
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
522
|
+
width: "1em",
|
|
523
|
+
height: "1em",
|
|
524
|
+
viewBox: "0 0 24 24",
|
|
525
|
+
fill: "none",
|
|
526
|
+
stroke: "currentColor",
|
|
527
|
+
strokeWidth: "2",
|
|
528
|
+
strokeLinecap: "round",
|
|
529
|
+
strokeLinejoin: "round",
|
|
530
|
+
...props,
|
|
531
|
+
children: /* @__PURE__ */ jsx6("path", { d: "m15 18-6-6 6-6" })
|
|
532
|
+
}
|
|
533
|
+
);
|
|
534
|
+
}
|
|
535
|
+
function CalendarIcon(props) {
|
|
536
|
+
return /* @__PURE__ */ jsxs4(
|
|
537
|
+
"svg",
|
|
538
|
+
{
|
|
539
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
540
|
+
width: "1em",
|
|
541
|
+
height: "1em",
|
|
542
|
+
viewBox: "0 0 24 24",
|
|
543
|
+
fill: "none",
|
|
544
|
+
stroke: "currentColor",
|
|
545
|
+
strokeWidth: "2",
|
|
546
|
+
strokeLinecap: "round",
|
|
547
|
+
strokeLinejoin: "round",
|
|
548
|
+
...props,
|
|
549
|
+
children: [
|
|
550
|
+
/* @__PURE__ */ jsx6("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
|
|
551
|
+
/* @__PURE__ */ jsx6("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
|
|
552
|
+
/* @__PURE__ */ jsx6("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
|
|
553
|
+
/* @__PURE__ */ jsx6("line", { x1: "3", x2: "21", y1: "10", y2: "10" })
|
|
554
|
+
]
|
|
555
|
+
}
|
|
556
|
+
);
|
|
557
|
+
}
|
|
517
558
|
function MoreHorizontal(props) {
|
|
518
559
|
return /* @__PURE__ */ jsxs4(
|
|
519
560
|
"svg",
|
|
@@ -533,6 +574,157 @@ function MoreHorizontal(props) {
|
|
|
533
574
|
}
|
|
534
575
|
);
|
|
535
576
|
}
|
|
577
|
+
function Plus(props) {
|
|
578
|
+
return /* @__PURE__ */ jsxs4(
|
|
579
|
+
"svg",
|
|
580
|
+
{
|
|
581
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
582
|
+
width: "1em",
|
|
583
|
+
height: "1em",
|
|
584
|
+
viewBox: "0 0 24 24",
|
|
585
|
+
fill: "none",
|
|
586
|
+
stroke: "currentColor",
|
|
587
|
+
strokeWidth: "3",
|
|
588
|
+
strokeLinecap: "round",
|
|
589
|
+
strokeLinejoin: "round",
|
|
590
|
+
...props,
|
|
591
|
+
children: [
|
|
592
|
+
/* @__PURE__ */ jsx6("path", { d: "M12 5v14" }),
|
|
593
|
+
/* @__PURE__ */ jsx6("path", { d: "M5 12h14" })
|
|
594
|
+
]
|
|
595
|
+
}
|
|
596
|
+
);
|
|
597
|
+
}
|
|
598
|
+
function Star(props) {
|
|
599
|
+
return /* @__PURE__ */ jsx6(
|
|
600
|
+
"svg",
|
|
601
|
+
{
|
|
602
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
603
|
+
width: "1em",
|
|
604
|
+
height: "1em",
|
|
605
|
+
viewBox: "0 0 24 24",
|
|
606
|
+
fill: "currentColor",
|
|
607
|
+
stroke: "none",
|
|
608
|
+
...props,
|
|
609
|
+
children: /* @__PURE__ */ jsx6("path", { d: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
|
|
610
|
+
}
|
|
611
|
+
);
|
|
612
|
+
}
|
|
613
|
+
function Upload(props) {
|
|
614
|
+
return /* @__PURE__ */ jsxs4(
|
|
615
|
+
"svg",
|
|
616
|
+
{
|
|
617
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
618
|
+
width: "1em",
|
|
619
|
+
height: "1em",
|
|
620
|
+
viewBox: "0 0 24 24",
|
|
621
|
+
fill: "none",
|
|
622
|
+
stroke: "currentColor",
|
|
623
|
+
strokeWidth: "2",
|
|
624
|
+
strokeLinecap: "round",
|
|
625
|
+
strokeLinejoin: "round",
|
|
626
|
+
...props,
|
|
627
|
+
children: [
|
|
628
|
+
/* @__PURE__ */ jsx6("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
629
|
+
/* @__PURE__ */ jsx6("path", { d: "M17 8l-5-5-5 5" }),
|
|
630
|
+
/* @__PURE__ */ jsx6("path", { d: "M12 3v12" })
|
|
631
|
+
]
|
|
632
|
+
}
|
|
633
|
+
);
|
|
634
|
+
}
|
|
635
|
+
function Inbox(props) {
|
|
636
|
+
return /* @__PURE__ */ jsxs4(
|
|
637
|
+
"svg",
|
|
638
|
+
{
|
|
639
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
640
|
+
width: "1em",
|
|
641
|
+
height: "1em",
|
|
642
|
+
viewBox: "0 0 24 24",
|
|
643
|
+
fill: "none",
|
|
644
|
+
stroke: "currentColor",
|
|
645
|
+
strokeWidth: "2",
|
|
646
|
+
strokeLinecap: "round",
|
|
647
|
+
strokeLinejoin: "round",
|
|
648
|
+
...props,
|
|
649
|
+
children: [
|
|
650
|
+
/* @__PURE__ */ jsx6("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
|
|
651
|
+
/* @__PURE__ */ jsx6("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
|
|
652
|
+
]
|
|
653
|
+
}
|
|
654
|
+
);
|
|
655
|
+
}
|
|
656
|
+
function Search(props) {
|
|
657
|
+
return /* @__PURE__ */ jsxs4(
|
|
658
|
+
"svg",
|
|
659
|
+
{
|
|
660
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
661
|
+
width: "1em",
|
|
662
|
+
height: "1em",
|
|
663
|
+
viewBox: "0 0 24 24",
|
|
664
|
+
fill: "none",
|
|
665
|
+
stroke: "currentColor",
|
|
666
|
+
strokeWidth: "2",
|
|
667
|
+
strokeLinecap: "round",
|
|
668
|
+
strokeLinejoin: "round",
|
|
669
|
+
...props,
|
|
670
|
+
children: [
|
|
671
|
+
/* @__PURE__ */ jsx6("circle", { cx: "11", cy: "11", r: "8" }),
|
|
672
|
+
/* @__PURE__ */ jsx6("path", { d: "m21 21-4.3-4.3" })
|
|
673
|
+
]
|
|
674
|
+
}
|
|
675
|
+
);
|
|
676
|
+
}
|
|
677
|
+
function CaretUp(props) {
|
|
678
|
+
return /* @__PURE__ */ jsx6(
|
|
679
|
+
"svg",
|
|
680
|
+
{
|
|
681
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
682
|
+
width: "1em",
|
|
683
|
+
height: "1em",
|
|
684
|
+
viewBox: "0 0 24 24",
|
|
685
|
+
fill: "currentColor",
|
|
686
|
+
stroke: "none",
|
|
687
|
+
...props,
|
|
688
|
+
children: /* @__PURE__ */ jsx6("path", { d: "m12 8-6 8h12z" })
|
|
689
|
+
}
|
|
690
|
+
);
|
|
691
|
+
}
|
|
692
|
+
function CaretDown(props) {
|
|
693
|
+
return /* @__PURE__ */ jsx6(
|
|
694
|
+
"svg",
|
|
695
|
+
{
|
|
696
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
697
|
+
width: "1em",
|
|
698
|
+
height: "1em",
|
|
699
|
+
viewBox: "0 0 24 24",
|
|
700
|
+
fill: "currentColor",
|
|
701
|
+
stroke: "none",
|
|
702
|
+
...props,
|
|
703
|
+
children: /* @__PURE__ */ jsx6("path", { d: "m12 16 6-8H6z" })
|
|
704
|
+
}
|
|
705
|
+
);
|
|
706
|
+
}
|
|
707
|
+
function PanelLeft(props) {
|
|
708
|
+
return /* @__PURE__ */ jsxs4(
|
|
709
|
+
"svg",
|
|
710
|
+
{
|
|
711
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
712
|
+
width: "1em",
|
|
713
|
+
height: "1em",
|
|
714
|
+
viewBox: "0 0 24 24",
|
|
715
|
+
fill: "none",
|
|
716
|
+
stroke: "currentColor",
|
|
717
|
+
strokeWidth: "2",
|
|
718
|
+
strokeLinecap: "round",
|
|
719
|
+
strokeLinejoin: "round",
|
|
720
|
+
...props,
|
|
721
|
+
children: [
|
|
722
|
+
/* @__PURE__ */ jsx6("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
|
|
723
|
+
/* @__PURE__ */ jsx6("path", { d: "M9 3v18" })
|
|
724
|
+
]
|
|
725
|
+
}
|
|
726
|
+
);
|
|
727
|
+
}
|
|
536
728
|
|
|
537
729
|
// src/components/Checkbox/Checkbox.tsx
|
|
538
730
|
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
@@ -819,7 +1011,7 @@ function Select({
|
|
|
819
1011
|
"aria-labelledby": rootProps["aria-labelledby"]
|
|
820
1012
|
});
|
|
821
1013
|
const ctx = useContext2(DgaContext);
|
|
822
|
-
const portalContainer = ctx?.rootEl ?? void 0;
|
|
1014
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
823
1015
|
return /* @__PURE__ */ jsxs8("div", { "data-slot": "select-field", className: "ddga-field", children: [
|
|
824
1016
|
label && /* @__PURE__ */ jsxs8("label", { htmlFor: fieldId, className: "ddga-select__label", children: [
|
|
825
1017
|
label,
|
|
@@ -1238,7 +1430,7 @@ function TooltipContent({
|
|
|
1238
1430
|
...props
|
|
1239
1431
|
}) {
|
|
1240
1432
|
const ctx = useContext3(DgaContext);
|
|
1241
|
-
const portalContainer = ctx?.rootEl ?? void 0;
|
|
1433
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
1242
1434
|
return /* @__PURE__ */ jsx15(TooltipPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs11(
|
|
1243
1435
|
TooltipPrimitive.Content,
|
|
1244
1436
|
{
|
|
@@ -1381,7 +1573,7 @@ function ModalContent({
|
|
|
1381
1573
|
...props
|
|
1382
1574
|
}) {
|
|
1383
1575
|
const ctx = useContext4(DgaContext);
|
|
1384
|
-
const portalContainer = ctx?.rootEl ?? void 0;
|
|
1576
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
1385
1577
|
return /* @__PURE__ */ jsxs13(DialogPrimitive.Portal, { container: portalContainer, children: [
|
|
1386
1578
|
/* @__PURE__ */ jsx17(DialogPrimitive.Overlay, { className: "ddga-modal__overlay", "data-slot": "modal-overlay" }),
|
|
1387
1579
|
/* @__PURE__ */ jsxs13(
|
|
@@ -2279,7 +2471,7 @@ function DropdownMenuContent({
|
|
|
2279
2471
|
...props
|
|
2280
2472
|
}) {
|
|
2281
2473
|
const ctx = useContext5(DgaContext);
|
|
2282
|
-
const portalContainer = ctx?.rootEl ?? void 0;
|
|
2474
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
2283
2475
|
return /* @__PURE__ */ jsx26(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx26(
|
|
2284
2476
|
DropdownMenuPrimitive.Content,
|
|
2285
2477
|
{
|
|
@@ -2410,7 +2602,7 @@ function DropdownMenuSubTrigger({
|
|
|
2410
2602
|
}
|
|
2411
2603
|
function DropdownMenuSubContent({ size, className, ...props }) {
|
|
2412
2604
|
const ctx = useContext5(DgaContext);
|
|
2413
|
-
const portalContainer = ctx?.rootEl ?? void 0;
|
|
2605
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
2414
2606
|
return /* @__PURE__ */ jsx26(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx26(
|
|
2415
2607
|
DropdownMenuPrimitive.SubContent,
|
|
2416
2608
|
{
|
|
@@ -2462,7 +2654,7 @@ function DrawerContent({
|
|
|
2462
2654
|
...props
|
|
2463
2655
|
}) {
|
|
2464
2656
|
const ctx = useContext6(DgaContext);
|
|
2465
|
-
const portalContainer = ctx?.rootEl ?? void 0;
|
|
2657
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
2466
2658
|
return /* @__PURE__ */ jsxs20(DialogPrimitive2.Portal, { container: portalContainer, children: [
|
|
2467
2659
|
/* @__PURE__ */ jsx27(DialogPrimitive2.Overlay, { className: "ddga-drawer__overlay", "data-slot": "drawer-overlay" }),
|
|
2468
2660
|
/* @__PURE__ */ jsxs20(
|
|
@@ -2636,7 +2828,7 @@ function Combobox({
|
|
|
2636
2828
|
"aria-labelledby": ariaLabelledBy
|
|
2637
2829
|
});
|
|
2638
2830
|
const providerCtx = useContext7(DgaContext);
|
|
2639
|
-
const portalContainer = providerCtx?.rootEl ?? void 0;
|
|
2831
|
+
const portalContainer = providerCtx?.portalEl ?? providerCtx?.rootEl ?? void 0;
|
|
2640
2832
|
const triggerLabel = useMemo(() => {
|
|
2641
2833
|
if (value === void 0) return null;
|
|
2642
2834
|
if (getLabel) return getLabel(value);
|
|
@@ -2761,49 +2953,2347 @@ function ComboboxSeparator({ className, ...props }) {
|
|
|
2761
2953
|
);
|
|
2762
2954
|
}
|
|
2763
2955
|
|
|
2764
|
-
// src/
|
|
2765
|
-
import {
|
|
2766
|
-
import {
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
as
|
|
2956
|
+
// src/components/DatePicker/DatePicker.tsx
|
|
2957
|
+
import { useCallback as useCallback2, useContext as useContext8, useMemo as useMemo2, useState as useState4 } from "react";
|
|
2958
|
+
import {
|
|
2959
|
+
Button as AriaButton,
|
|
2960
|
+
Calendar as AriaCalendar,
|
|
2961
|
+
CalendarCell as AriaCalendarCell,
|
|
2962
|
+
CalendarGrid as AriaCalendarGrid,
|
|
2963
|
+
CalendarGridBody as AriaCalendarGridBody,
|
|
2964
|
+
CalendarGridHeader as AriaCalendarGridHeader,
|
|
2965
|
+
CalendarHeaderCell as AriaCalendarHeaderCell,
|
|
2966
|
+
CalendarStateContext as AriaCalendarStateContext,
|
|
2967
|
+
DateInput as AriaDateInput,
|
|
2968
|
+
DatePicker as AriaDatePicker,
|
|
2969
|
+
DateSegment as AriaDateSegment,
|
|
2970
|
+
Dialog as AriaDialog,
|
|
2971
|
+
FieldError as AriaFieldError,
|
|
2972
|
+
Group as AriaGroup,
|
|
2973
|
+
I18nProvider,
|
|
2974
|
+
Label as AriaLabel,
|
|
2975
|
+
Popover as AriaPopover,
|
|
2976
|
+
Text as AriaText
|
|
2977
|
+
} from "react-aria-components";
|
|
2978
|
+
import {
|
|
2979
|
+
CalendarDate,
|
|
2980
|
+
GregorianCalendar,
|
|
2981
|
+
IslamicUmalquraCalendar,
|
|
2982
|
+
toCalendar
|
|
2983
|
+
} from "@internationalized/date";
|
|
2984
|
+
import { cva as cva27 } from "class-variance-authority";
|
|
2985
|
+
import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2986
|
+
var datePickerTriggerVariants = cva27("ddga-date-picker-trigger", {
|
|
2987
|
+
variants: {
|
|
2988
|
+
size: {
|
|
2989
|
+
sm: "ddga-date-picker-trigger--sm",
|
|
2990
|
+
md: "ddga-date-picker-trigger--md"
|
|
2991
|
+
},
|
|
2992
|
+
error: {
|
|
2993
|
+
true: "ddga-date-picker-trigger--error"
|
|
2994
|
+
}
|
|
2995
|
+
},
|
|
2996
|
+
defaultVariants: {
|
|
2997
|
+
size: "md"
|
|
2998
|
+
}
|
|
2999
|
+
});
|
|
3000
|
+
var datePickerVariants = datePickerTriggerVariants;
|
|
3001
|
+
function dateToCalendarDate(date) {
|
|
3002
|
+
if (!date) return null;
|
|
3003
|
+
return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
|
|
3004
|
+
}
|
|
3005
|
+
function calendarDateToDate(value) {
|
|
3006
|
+
if (!value) return null;
|
|
3007
|
+
const greg = value.calendar.identifier === "gregory" ? value : toCalendar(value, new GregorianCalendar());
|
|
3008
|
+
return new Date(greg.year, greg.month - 1, greg.day);
|
|
3009
|
+
}
|
|
3010
|
+
function composeLocale(dgaLocale, calendar) {
|
|
3011
|
+
const base = dgaLocale === "ar" ? "ar-SA" : dgaLocale === "en" ? "en-US" : dgaLocale;
|
|
3012
|
+
const isArabic = base.startsWith("ar");
|
|
3013
|
+
if (calendar === "hijri") {
|
|
3014
|
+
return isArabic ? `${base}-u-ca-islamic-umalqura-nu-latn` : `${base}-u-ca-islamic-umalqura`;
|
|
3015
|
+
}
|
|
3016
|
+
return isArabic ? `${base}-u-nu-latn` : base;
|
|
3017
|
+
}
|
|
3018
|
+
var GREGORIAN = new GregorianCalendar();
|
|
3019
|
+
var ISLAMIC_UMALQURA = new IslamicUmalquraCalendar();
|
|
3020
|
+
function secondaryDayNumber(date, mainCalendar) {
|
|
3021
|
+
const other = mainCalendar === "hijri" ? GREGORIAN : ISLAMIC_UMALQURA;
|
|
3022
|
+
return toCalendar(date, other).day;
|
|
3023
|
+
}
|
|
3024
|
+
function CalendarNavHeader({ locale, monthLabel, yearLabel }) {
|
|
3025
|
+
const state = useContext8(AriaCalendarStateContext);
|
|
3026
|
+
const focusedDate = state?.focusedDate ?? null;
|
|
3027
|
+
const focusedYear = focusedDate?.year ?? 0;
|
|
3028
|
+
const focusedCalendar = focusedDate?.calendar ?? GREGORIAN;
|
|
3029
|
+
const minValue = state?.minValue ?? null;
|
|
3030
|
+
const maxValue = state?.maxValue ?? null;
|
|
3031
|
+
const monthNames = useMemo2(() => {
|
|
3032
|
+
if (!focusedDate) return [];
|
|
3033
|
+
const fmt = new Intl.DateTimeFormat(locale, { month: "long" });
|
|
3034
|
+
return Array.from({ length: 12 }, (_, i) => {
|
|
3035
|
+
const cd = new CalendarDate(focusedCalendar, focusedYear, i + 1, 1);
|
|
3036
|
+
const greg = toCalendar(cd, GREGORIAN);
|
|
3037
|
+
const js = new Date(greg.year, greg.month - 1, greg.day);
|
|
3038
|
+
return fmt.format(js);
|
|
3039
|
+
});
|
|
3040
|
+
}, [locale, focusedDate, focusedCalendar, focusedYear]);
|
|
3041
|
+
const yearOptions = useMemo2(() => {
|
|
3042
|
+
if (!focusedDate) return [];
|
|
3043
|
+
const minY = minValue ? toCalendar(minValue, focusedCalendar).year : focusedYear - 100;
|
|
3044
|
+
const maxY = maxValue ? toCalendar(maxValue, focusedCalendar).year : focusedYear + 30;
|
|
3045
|
+
const start = Math.min(minY, focusedYear);
|
|
3046
|
+
const end = Math.max(maxY, focusedYear);
|
|
3047
|
+
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
3048
|
+
}, [focusedDate, focusedCalendar, focusedYear, minValue, maxValue]);
|
|
3049
|
+
if (!state || !focusedDate) return null;
|
|
3050
|
+
return /* @__PURE__ */ jsxs22("div", { className: "ddga-date-picker-calendar__nav-selects", "data-slot": "date-picker-calendar-nav", children: [
|
|
3051
|
+
/* @__PURE__ */ jsx29(
|
|
3052
|
+
"select",
|
|
3053
|
+
{
|
|
3054
|
+
"aria-label": monthLabel,
|
|
3055
|
+
className: "ddga-date-picker-calendar__select ddga-date-picker-calendar__month-select",
|
|
3056
|
+
"data-slot": "date-picker-month-select",
|
|
3057
|
+
value: focusedDate.month,
|
|
3058
|
+
onChange: (e) => state.setFocusedDate(focusedDate.set({ month: Number(e.target.value) })),
|
|
3059
|
+
children: monthNames.map((name, i) => /* @__PURE__ */ jsx29("option", { value: i + 1, children: name }, i + 1))
|
|
3060
|
+
}
|
|
3061
|
+
),
|
|
3062
|
+
/* @__PURE__ */ jsx29(
|
|
3063
|
+
"select",
|
|
3064
|
+
{
|
|
3065
|
+
"aria-label": yearLabel,
|
|
3066
|
+
className: "ddga-date-picker-calendar__select ddga-date-picker-calendar__year-select",
|
|
3067
|
+
"data-slot": "date-picker-year-select",
|
|
3068
|
+
value: focusedDate.year,
|
|
3069
|
+
onChange: (e) => state.setFocusedDate(focusedDate.set({ year: Number(e.target.value) })),
|
|
3070
|
+
children: yearOptions.map((y) => /* @__PURE__ */ jsx29("option", { value: y, children: y }, y))
|
|
3071
|
+
}
|
|
3072
|
+
)
|
|
3073
|
+
] });
|
|
3074
|
+
}
|
|
3075
|
+
function CalendarDayCell({ date, showSecondary, calendarSystem }) {
|
|
3076
|
+
const state = useContext8(AriaCalendarStateContext);
|
|
3077
|
+
const start = state?.visibleRange.start;
|
|
3078
|
+
const isOutside = !!start && (date.year !== start.year || date.month !== start.month);
|
|
3079
|
+
const isOutOfBounds = state ? state.isInvalid(date) : false;
|
|
3080
|
+
if (state && isOutside && !isOutOfBounds) {
|
|
3081
|
+
const selected = state.value;
|
|
3082
|
+
const isSelected = !!selected && selected.year === date.year && selected.month === date.month && selected.day === date.day;
|
|
3083
|
+
const handleSelect = () => {
|
|
3084
|
+
state.setFocusedDate(date);
|
|
3085
|
+
state.selectDate(date);
|
|
3086
|
+
};
|
|
3087
|
+
return /* @__PURE__ */ jsx29("td", { role: "gridcell", children: /* @__PURE__ */ jsx29(
|
|
3088
|
+
"button",
|
|
3089
|
+
{
|
|
3090
|
+
type: "button",
|
|
3091
|
+
tabIndex: -1,
|
|
3092
|
+
className: "ddga-date-picker-calendar__cell",
|
|
3093
|
+
"data-outside-month": "",
|
|
3094
|
+
"data-selected": isSelected ? "" : void 0,
|
|
3095
|
+
"data-slot": "date-picker-day-cell",
|
|
3096
|
+
onClick: handleSelect,
|
|
3097
|
+
children: showSecondary ? /* @__PURE__ */ jsxs22(Fragment2, { children: [
|
|
3098
|
+
/* @__PURE__ */ jsx29("span", { className: "ddga-date-picker-calendar__cell-primary", children: date.day }),
|
|
3099
|
+
/* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-date-picker-calendar__cell-secondary", children: secondaryDayNumber(date, calendarSystem) })
|
|
3100
|
+
] }) : String(date.day)
|
|
3101
|
+
}
|
|
3102
|
+
) });
|
|
3103
|
+
}
|
|
3104
|
+
return /* @__PURE__ */ jsx29(AriaCalendarCell, { date, className: "ddga-date-picker-calendar__cell", children: ({ formattedDate }) => showSecondary ? /* @__PURE__ */ jsxs22(Fragment2, { children: [
|
|
3105
|
+
/* @__PURE__ */ jsx29("span", { className: "ddga-date-picker-calendar__cell-primary", children: formattedDate }),
|
|
3106
|
+
/* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-date-picker-calendar__cell-secondary", children: secondaryDayNumber(date, calendarSystem) })
|
|
3107
|
+
] }) : formattedDate });
|
|
3108
|
+
}
|
|
3109
|
+
function DatePicker({
|
|
3110
|
+
value: controlledValue,
|
|
3111
|
+
defaultValue,
|
|
3112
|
+
onChange,
|
|
3113
|
+
minValue,
|
|
3114
|
+
maxValue,
|
|
3115
|
+
label,
|
|
3116
|
+
helperText,
|
|
3117
|
+
errorMessage,
|
|
3118
|
+
error,
|
|
3119
|
+
required,
|
|
3120
|
+
disabled,
|
|
3121
|
+
size,
|
|
3122
|
+
id,
|
|
2775
3123
|
className,
|
|
2776
|
-
|
|
2777
|
-
|
|
3124
|
+
"aria-label": ariaLabel,
|
|
3125
|
+
"aria-labelledby": ariaLabelledBy,
|
|
3126
|
+
calendar: controlledCalendar,
|
|
3127
|
+
defaultCalendar = "gregorian",
|
|
3128
|
+
onCalendarChange,
|
|
3129
|
+
showCalendarToggle = true,
|
|
3130
|
+
calendarLabels,
|
|
3131
|
+
showSecondaryCalendar = false
|
|
2778
3132
|
}) {
|
|
2779
|
-
const
|
|
2780
|
-
const
|
|
2781
|
-
|
|
2782
|
-
const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
|
|
2783
|
-
const ctxValue = useMemo2(
|
|
2784
|
-
() => ({ dir, locale: resolvedLocale, mode, rootEl }),
|
|
2785
|
-
[dir, resolvedLocale, mode, rootEl]
|
|
3133
|
+
const isValueControlled = controlledValue !== void 0;
|
|
3134
|
+
const [internalValue, setInternalValue] = useState4(
|
|
3135
|
+
() => dateToCalendarDate(defaultValue)
|
|
2786
3136
|
);
|
|
2787
|
-
const
|
|
2788
|
-
const
|
|
2789
|
-
|
|
2790
|
-
|
|
3137
|
+
const value = isValueControlled ? dateToCalendarDate(controlledValue) : internalValue;
|
|
3138
|
+
const handleAriaChange = useCallback2(
|
|
3139
|
+
(next) => {
|
|
3140
|
+
const nextCD = next ? new CalendarDate(next.year, next.month, next.day) : null;
|
|
3141
|
+
if (!isValueControlled) setInternalValue(nextCD);
|
|
3142
|
+
onChange?.(calendarDateToDate(nextCD));
|
|
3143
|
+
},
|
|
3144
|
+
[isValueControlled, onChange]
|
|
3145
|
+
);
|
|
3146
|
+
const isCalendarControlled = controlledCalendar !== void 0;
|
|
3147
|
+
const [internalCalendar, setInternalCalendar] = useState4(defaultCalendar);
|
|
3148
|
+
const calendarSystem = isCalendarControlled ? controlledCalendar : internalCalendar;
|
|
3149
|
+
const setCalendar = useCallback2(
|
|
3150
|
+
(next) => {
|
|
3151
|
+
if (!isCalendarControlled) setInternalCalendar(next);
|
|
3152
|
+
onCalendarChange?.(next);
|
|
3153
|
+
},
|
|
3154
|
+
[isCalendarControlled, onCalendarChange]
|
|
3155
|
+
);
|
|
3156
|
+
const dgaCtx = useContext8(DgaContext);
|
|
3157
|
+
const dgaLocale = dgaCtx?.locale ?? "en";
|
|
3158
|
+
const ariaLocale = useMemo2(
|
|
3159
|
+
() => composeLocale(dgaLocale, calendarSystem),
|
|
3160
|
+
[dgaLocale, calendarSystem]
|
|
3161
|
+
);
|
|
3162
|
+
const portalContainer = dgaCtx?.portalEl ?? dgaCtx?.rootEl ?? void 0;
|
|
3163
|
+
const dgaDir = dgaCtx?.dir ?? "ltr";
|
|
3164
|
+
const PrevChevron = dgaDir === "rtl" ? ChevronRight : ChevronLeft;
|
|
3165
|
+
const NextChevron = dgaDir === "rtl" ? ChevronLeft : ChevronRight;
|
|
3166
|
+
const resolvedLabels = useMemo2(() => {
|
|
3167
|
+
if (calendarLabels) return calendarLabels;
|
|
3168
|
+
const isArabic = dgaLocale.startsWith("ar");
|
|
3169
|
+
return isArabic ? { gregorian: "\u0645\u064A\u0644\u0627\u062F\u064A", hijri: "\u0647\u062C\u0631\u064A" } : { gregorian: "Gregorian", hijri: "Hijri" };
|
|
3170
|
+
}, [calendarLabels, dgaLocale]);
|
|
3171
|
+
const navLabels = useMemo2(
|
|
3172
|
+
() => dgaLocale.startsWith("ar") ? { month: "\u0627\u0644\u0634\u0647\u0631", year: "\u0627\u0644\u0633\u0646\u0629" } : { month: "Month", year: "Year" },
|
|
3173
|
+
[dgaLocale]
|
|
3174
|
+
);
|
|
3175
|
+
const ariaMinValue = useMemo2(() => dateToCalendarDate(minValue) ?? void 0, [minValue]);
|
|
3176
|
+
const ariaMaxValue = useMemo2(() => dateToCalendarDate(maxValue) ?? void 0, [maxValue]);
|
|
3177
|
+
const dialogAriaLabel = ariaLabel ?? (typeof label === "string" ? label : ariaLabelledBy ? void 0 : "Date");
|
|
3178
|
+
const showToggle = showCalendarToggle && !isCalendarControlled;
|
|
3179
|
+
const hasError = !!error;
|
|
3180
|
+
const hasErrorMessage = hasError && errorMessage != null && errorMessage !== "";
|
|
3181
|
+
const hasHelper = !hasErrorMessage && helperText != null && helperText !== "";
|
|
3182
|
+
return /* @__PURE__ */ jsx29(I18nProvider, { locale: ariaLocale, children: /* @__PURE__ */ jsxs22(
|
|
3183
|
+
AriaDatePicker,
|
|
2791
3184
|
{
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
3185
|
+
value,
|
|
3186
|
+
onChange: handleAriaChange,
|
|
3187
|
+
minValue: ariaMinValue,
|
|
3188
|
+
maxValue: ariaMaxValue,
|
|
3189
|
+
isRequired: required,
|
|
3190
|
+
isDisabled: disabled,
|
|
3191
|
+
isInvalid: hasError,
|
|
3192
|
+
shouldCloseOnSelect: true,
|
|
3193
|
+
id,
|
|
3194
|
+
"aria-label": ariaLabel,
|
|
3195
|
+
"aria-labelledby": ariaLabelledBy,
|
|
3196
|
+
className: "ddga-field",
|
|
3197
|
+
"data-slot": "date-picker-field",
|
|
3198
|
+
children: [
|
|
3199
|
+
label && /* @__PURE__ */ jsxs22(AriaLabel, { className: "ddga-date-picker__label", children: [
|
|
3200
|
+
label,
|
|
3201
|
+
required && /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-date-picker__required", children: "*" })
|
|
3202
|
+
] }),
|
|
3203
|
+
/* @__PURE__ */ jsxs22(
|
|
3204
|
+
AriaGroup,
|
|
3205
|
+
{
|
|
3206
|
+
"data-slot": "date-picker-trigger",
|
|
3207
|
+
className: cn(datePickerTriggerVariants({ size, error: hasError }), className),
|
|
3208
|
+
children: [
|
|
3209
|
+
/* @__PURE__ */ jsx29(AriaDateInput, { className: "ddga-date-picker__input", "data-slot": "date-picker-input", children: (segment) => /* @__PURE__ */ jsx29(
|
|
3210
|
+
AriaDateSegment,
|
|
3211
|
+
{
|
|
3212
|
+
segment,
|
|
3213
|
+
className: "ddga-date-picker__segment",
|
|
3214
|
+
"data-slot": "date-picker-segment"
|
|
3215
|
+
}
|
|
3216
|
+
) }),
|
|
3217
|
+
/* @__PURE__ */ jsx29(
|
|
3218
|
+
AriaButton,
|
|
3219
|
+
{
|
|
3220
|
+
className: "ddga-date-picker__icon-button",
|
|
3221
|
+
"aria-label": "Open calendar",
|
|
3222
|
+
"data-slot": "date-picker-trigger-button",
|
|
3223
|
+
children: /* @__PURE__ */ jsx29(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-picker__icon" })
|
|
3224
|
+
}
|
|
3225
|
+
)
|
|
3226
|
+
]
|
|
3227
|
+
}
|
|
3228
|
+
),
|
|
3229
|
+
hasHelper && /* @__PURE__ */ jsx29(
|
|
3230
|
+
AriaText,
|
|
3231
|
+
{
|
|
3232
|
+
slot: "description",
|
|
3233
|
+
className: "ddga-field__message ddga-field__message--helper",
|
|
3234
|
+
"data-slot": "field-helper",
|
|
3235
|
+
children: helperText
|
|
3236
|
+
}
|
|
3237
|
+
),
|
|
3238
|
+
hasErrorMessage && /* @__PURE__ */ jsx29(
|
|
3239
|
+
AriaFieldError,
|
|
3240
|
+
{
|
|
3241
|
+
className: "ddga-field__message ddga-field__message--error",
|
|
3242
|
+
"data-slot": "field-error",
|
|
3243
|
+
children: errorMessage
|
|
3244
|
+
}
|
|
3245
|
+
),
|
|
3246
|
+
/* @__PURE__ */ jsx29(
|
|
3247
|
+
AriaPopover,
|
|
3248
|
+
{
|
|
3249
|
+
UNSTABLE_portalContainer: portalContainer,
|
|
3250
|
+
className: "ddga-date-picker-popover",
|
|
3251
|
+
"data-slot": "date-picker-popover",
|
|
3252
|
+
offset: 6,
|
|
3253
|
+
containerPadding: 12,
|
|
3254
|
+
children: /* @__PURE__ */ jsxs22(
|
|
3255
|
+
AriaDialog,
|
|
3256
|
+
{
|
|
3257
|
+
className: "ddga-date-picker-dialog",
|
|
3258
|
+
"data-slot": "date-picker-dialog",
|
|
3259
|
+
"aria-label": dialogAriaLabel,
|
|
3260
|
+
"aria-labelledby": ariaLabelledBy,
|
|
3261
|
+
children: [
|
|
3262
|
+
showToggle && /* @__PURE__ */ jsxs22(
|
|
3263
|
+
"div",
|
|
3264
|
+
{
|
|
3265
|
+
role: "tablist",
|
|
3266
|
+
"aria-label": "Calendar system",
|
|
3267
|
+
className: "ddga-date-picker-toggle",
|
|
3268
|
+
"data-slot": "date-picker-toggle",
|
|
3269
|
+
children: [
|
|
3270
|
+
/* @__PURE__ */ jsx29(
|
|
3271
|
+
"button",
|
|
3272
|
+
{
|
|
3273
|
+
type: "button",
|
|
3274
|
+
role: "tab",
|
|
3275
|
+
"aria-selected": calendarSystem === "gregorian",
|
|
3276
|
+
className: "ddga-date-picker-toggle__button",
|
|
3277
|
+
"data-active": calendarSystem === "gregorian" ? "" : void 0,
|
|
3278
|
+
onClick: () => setCalendar("gregorian"),
|
|
3279
|
+
children: resolvedLabels.gregorian
|
|
3280
|
+
}
|
|
3281
|
+
),
|
|
3282
|
+
/* @__PURE__ */ jsx29(
|
|
3283
|
+
"button",
|
|
3284
|
+
{
|
|
3285
|
+
type: "button",
|
|
3286
|
+
role: "tab",
|
|
3287
|
+
"aria-selected": calendarSystem === "hijri",
|
|
3288
|
+
className: "ddga-date-picker-toggle__button",
|
|
3289
|
+
"data-active": calendarSystem === "hijri" ? "" : void 0,
|
|
3290
|
+
onClick: () => setCalendar("hijri"),
|
|
3291
|
+
children: resolvedLabels.hijri
|
|
3292
|
+
}
|
|
3293
|
+
)
|
|
3294
|
+
]
|
|
3295
|
+
}
|
|
3296
|
+
),
|
|
3297
|
+
/* @__PURE__ */ jsxs22(AriaCalendar, { className: "ddga-date-picker-calendar", "data-slot": "date-picker-calendar", children: [
|
|
3298
|
+
/* @__PURE__ */ jsxs22("header", { className: "ddga-date-picker-calendar__header", children: [
|
|
3299
|
+
/* @__PURE__ */ jsx29(
|
|
3300
|
+
AriaButton,
|
|
3301
|
+
{
|
|
3302
|
+
slot: "previous",
|
|
3303
|
+
className: "ddga-date-picker-calendar__nav",
|
|
3304
|
+
"data-slot": "date-picker-calendar-prev",
|
|
3305
|
+
children: /* @__PURE__ */ jsx29(PrevChevron, { "aria-hidden": "true" })
|
|
3306
|
+
}
|
|
3307
|
+
),
|
|
3308
|
+
/* @__PURE__ */ jsx29(
|
|
3309
|
+
CalendarNavHeader,
|
|
3310
|
+
{
|
|
3311
|
+
locale: ariaLocale,
|
|
3312
|
+
monthLabel: navLabels.month,
|
|
3313
|
+
yearLabel: navLabels.year
|
|
3314
|
+
}
|
|
3315
|
+
),
|
|
3316
|
+
/* @__PURE__ */ jsx29(
|
|
3317
|
+
AriaButton,
|
|
3318
|
+
{
|
|
3319
|
+
slot: "next",
|
|
3320
|
+
className: "ddga-date-picker-calendar__nav",
|
|
3321
|
+
"data-slot": "date-picker-calendar-next",
|
|
3322
|
+
children: /* @__PURE__ */ jsx29(NextChevron, { "aria-hidden": "true" })
|
|
3323
|
+
}
|
|
3324
|
+
)
|
|
3325
|
+
] }),
|
|
3326
|
+
/* @__PURE__ */ jsxs22(AriaCalendarGrid, { className: "ddga-date-picker-calendar__grid", children: [
|
|
3327
|
+
/* @__PURE__ */ jsx29(AriaCalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx29(AriaCalendarHeaderCell, { className: "ddga-date-picker-calendar__weekday", children: day }) }),
|
|
3328
|
+
/* @__PURE__ */ jsx29(AriaCalendarGridBody, { children: (date) => /* @__PURE__ */ jsx29(
|
|
3329
|
+
CalendarDayCell,
|
|
3330
|
+
{
|
|
3331
|
+
date,
|
|
3332
|
+
showSecondary: showSecondaryCalendar,
|
|
3333
|
+
calendarSystem
|
|
3334
|
+
}
|
|
3335
|
+
) })
|
|
3336
|
+
] })
|
|
3337
|
+
] })
|
|
3338
|
+
]
|
|
3339
|
+
}
|
|
3340
|
+
)
|
|
3341
|
+
}
|
|
3342
|
+
)
|
|
3343
|
+
]
|
|
3344
|
+
}
|
|
3345
|
+
) });
|
|
3346
|
+
}
|
|
3347
|
+
|
|
3348
|
+
// src/components/FileUpload/FileUpload.tsx
|
|
3349
|
+
import { useRef, useState as useState5 } from "react";
|
|
3350
|
+
import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
3351
|
+
function matchesAccept(file, accept) {
|
|
3352
|
+
if (!accept) return true;
|
|
3353
|
+
const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
|
|
3354
|
+
if (tokens.length === 0) return true;
|
|
3355
|
+
const name = file.name.toLowerCase();
|
|
3356
|
+
const type = file.type.toLowerCase();
|
|
3357
|
+
return tokens.some((token) => {
|
|
3358
|
+
if (token.startsWith(".")) return name.endsWith(token);
|
|
3359
|
+
if (token.endsWith("/*")) return type.startsWith(token.slice(0, token.indexOf("/") + 1));
|
|
3360
|
+
return type === token;
|
|
3361
|
+
});
|
|
3362
|
+
}
|
|
3363
|
+
function splitFiles(incoming, config) {
|
|
3364
|
+
const { accept, maxSize, maxFiles, currentCount } = config;
|
|
3365
|
+
const accepted = [];
|
|
3366
|
+
const rejections = [];
|
|
3367
|
+
for (const file of incoming) {
|
|
3368
|
+
const errors = [];
|
|
3369
|
+
if (!matchesAccept(file, accept)) errors.push("file-invalid-type");
|
|
3370
|
+
if (maxSize != null && file.size > maxSize) errors.push("file-too-large");
|
|
3371
|
+
if (errors.length > 0) {
|
|
3372
|
+
rejections.push({ file, errors });
|
|
3373
|
+
continue;
|
|
3374
|
+
}
|
|
3375
|
+
if (maxFiles != null && currentCount + accepted.length >= maxFiles) {
|
|
3376
|
+
rejections.push({ file, errors: ["too-many-files"] });
|
|
3377
|
+
continue;
|
|
3378
|
+
}
|
|
3379
|
+
accepted.push(file);
|
|
3380
|
+
}
|
|
3381
|
+
return { accepted, rejections };
|
|
3382
|
+
}
|
|
3383
|
+
var UNITS = ["B", "KB", "MB", "GB", "TB"];
|
|
3384
|
+
function formatBytes(bytes) {
|
|
3385
|
+
if (bytes === 0) return "0 B";
|
|
3386
|
+
const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), UNITS.length - 1);
|
|
3387
|
+
const value = bytes / 1024 ** exponent;
|
|
3388
|
+
return `${exponent === 0 ? value : value.toFixed(1)} ${UNITS[exponent]}`;
|
|
3389
|
+
}
|
|
3390
|
+
function FileUpload({
|
|
3391
|
+
files,
|
|
3392
|
+
onFilesAdded,
|
|
3393
|
+
onFilesRejected,
|
|
3394
|
+
onRemove,
|
|
3395
|
+
accept,
|
|
3396
|
+
maxSize,
|
|
3397
|
+
maxFiles,
|
|
3398
|
+
multiple = true,
|
|
3399
|
+
disabled = false,
|
|
3400
|
+
required,
|
|
3401
|
+
label,
|
|
3402
|
+
helperText,
|
|
3403
|
+
errorMessage,
|
|
3404
|
+
error,
|
|
3405
|
+
hint = "Drag files here, or click to browse",
|
|
3406
|
+
removeLabel = "Remove",
|
|
3407
|
+
id: externalId,
|
|
3408
|
+
className,
|
|
3409
|
+
...props
|
|
3410
|
+
}) {
|
|
3411
|
+
const inputRef = useRef(null);
|
|
3412
|
+
const [isDragging, setIsDragging] = useState5(false);
|
|
3413
|
+
const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
|
|
3414
|
+
name: "FileUpload",
|
|
3415
|
+
id: externalId,
|
|
3416
|
+
label,
|
|
3417
|
+
error,
|
|
3418
|
+
errorMessage,
|
|
3419
|
+
helperText,
|
|
3420
|
+
"aria-label": props["aria-label"],
|
|
3421
|
+
"aria-labelledby": props["aria-labelledby"]
|
|
3422
|
+
});
|
|
3423
|
+
const effectiveMaxFiles = multiple ? maxFiles : 1;
|
|
3424
|
+
function process2(incoming) {
|
|
3425
|
+
if (disabled || incoming.length === 0) return;
|
|
3426
|
+
const { accepted, rejections } = splitFiles(incoming, {
|
|
3427
|
+
accept,
|
|
3428
|
+
maxSize,
|
|
3429
|
+
maxFiles: effectiveMaxFiles,
|
|
3430
|
+
currentCount: files.length
|
|
3431
|
+
});
|
|
3432
|
+
if (accepted.length > 0) onFilesAdded(accepted);
|
|
3433
|
+
if (rejections.length > 0) onFilesRejected?.(rejections);
|
|
3434
|
+
}
|
|
3435
|
+
function handleInputChange(event) {
|
|
3436
|
+
process2(Array.from(event.target.files ?? []));
|
|
3437
|
+
event.target.value = "";
|
|
3438
|
+
}
|
|
3439
|
+
function handleDrop(event) {
|
|
3440
|
+
event.preventDefault();
|
|
3441
|
+
setIsDragging(false);
|
|
3442
|
+
if (disabled) return;
|
|
3443
|
+
process2(Array.from(event.dataTransfer.files));
|
|
3444
|
+
}
|
|
3445
|
+
function handleDragOver(event) {
|
|
3446
|
+
event.preventDefault();
|
|
3447
|
+
if (!disabled) setIsDragging(true);
|
|
3448
|
+
}
|
|
3449
|
+
function handleDragLeave(event) {
|
|
3450
|
+
if (!event.currentTarget.contains(event.relatedTarget)) {
|
|
3451
|
+
setIsDragging(false);
|
|
3452
|
+
}
|
|
3453
|
+
}
|
|
3454
|
+
return /* @__PURE__ */ jsxs23("div", { "data-slot": "file-upload-field", className: cn("ddga-field", "ddga-file-upload", className), children: [
|
|
3455
|
+
label && /* @__PURE__ */ jsxs23("label", { htmlFor: fieldId, className: "ddga-file-upload__label", children: [
|
|
3456
|
+
label,
|
|
3457
|
+
required && /* @__PURE__ */ jsx30("span", { "aria-hidden": "true", className: "ddga-file-upload__required", children: "*" })
|
|
3458
|
+
] }),
|
|
3459
|
+
/* @__PURE__ */ jsxs23(
|
|
3460
|
+
"div",
|
|
3461
|
+
{
|
|
3462
|
+
"data-slot": "file-upload-dropzone",
|
|
3463
|
+
className: cn(
|
|
3464
|
+
"ddga-file-upload__dropzone",
|
|
3465
|
+
hasError && "ddga-file-upload__dropzone--error"
|
|
3466
|
+
),
|
|
3467
|
+
"data-dragging": isDragging || void 0,
|
|
3468
|
+
"data-disabled": disabled || void 0,
|
|
3469
|
+
"aria-disabled": disabled || void 0,
|
|
3470
|
+
onClick: () => {
|
|
3471
|
+
if (!disabled) inputRef.current?.click();
|
|
3472
|
+
},
|
|
3473
|
+
onDragOver: handleDragOver,
|
|
3474
|
+
onDragLeave: handleDragLeave,
|
|
3475
|
+
onDrop: handleDrop,
|
|
3476
|
+
children: [
|
|
3477
|
+
/* @__PURE__ */ jsx30(Upload, { className: "ddga-file-upload__icon", "aria-hidden": "true" }),
|
|
3478
|
+
/* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__hint", children: hint }),
|
|
3479
|
+
/* @__PURE__ */ jsx30(
|
|
3480
|
+
"input",
|
|
3481
|
+
{
|
|
3482
|
+
...controlProps,
|
|
3483
|
+
ref: inputRef,
|
|
3484
|
+
type: "file",
|
|
3485
|
+
className: "ddga-file-upload__input",
|
|
3486
|
+
accept,
|
|
3487
|
+
multiple,
|
|
3488
|
+
disabled,
|
|
3489
|
+
required,
|
|
3490
|
+
onChange: handleInputChange,
|
|
3491
|
+
onClick: (event) => event.stopPropagation(),
|
|
3492
|
+
"data-slot": "file-upload-input"
|
|
3493
|
+
}
|
|
3494
|
+
)
|
|
3495
|
+
]
|
|
3496
|
+
}
|
|
3497
|
+
),
|
|
3498
|
+
hasErrorMessage && /* @__PURE__ */ jsx30(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
|
|
3499
|
+
hasHelper && /* @__PURE__ */ jsx30(FieldMessage, { id: helperId, variant: "helper", children: helperText }),
|
|
3500
|
+
files.length > 0 && /* @__PURE__ */ jsx30("ul", { "data-slot": "file-upload-list", className: "ddga-file-upload__list", children: files.map((item) => {
|
|
3501
|
+
const status = item.status ?? "pending";
|
|
3502
|
+
return /* @__PURE__ */ jsxs23(
|
|
3503
|
+
"li",
|
|
3504
|
+
{
|
|
3505
|
+
"data-slot": "file-upload-item",
|
|
3506
|
+
"data-status": status,
|
|
3507
|
+
className: "ddga-file-upload__item",
|
|
3508
|
+
children: [
|
|
3509
|
+
/* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__item-icon", "aria-hidden": "true", children: status === "success" ? /* @__PURE__ */ jsx30(Check, {}) : status === "error" ? /* @__PURE__ */ jsx30(AlertCircle, {}) : /* @__PURE__ */ jsx30(Upload, {}) }),
|
|
3510
|
+
/* @__PURE__ */ jsxs23("div", { className: "ddga-file-upload__item-main", children: [
|
|
3511
|
+
/* @__PURE__ */ jsxs23("div", { className: "ddga-file-upload__item-head", children: [
|
|
3512
|
+
/* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__item-name", title: item.file.name, children: item.file.name }),
|
|
3513
|
+
/* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__item-meta", children: formatBytes(item.file.size) })
|
|
3514
|
+
] }),
|
|
3515
|
+
status === "uploading" && /* @__PURE__ */ jsx30(
|
|
3516
|
+
Progress,
|
|
3517
|
+
{
|
|
3518
|
+
size: "sm",
|
|
3519
|
+
value: item.progress ?? 0,
|
|
3520
|
+
"aria-label": `Uploading ${item.file.name}`,
|
|
3521
|
+
className: "ddga-file-upload__item-progress"
|
|
3522
|
+
}
|
|
3523
|
+
),
|
|
3524
|
+
status === "error" && item.error && /* @__PURE__ */ jsx30("span", { role: "alert", className: "ddga-file-upload__item-error", children: item.error })
|
|
3525
|
+
] }),
|
|
3526
|
+
onRemove && /* @__PURE__ */ jsx30(
|
|
3527
|
+
Button,
|
|
3528
|
+
{
|
|
3529
|
+
type: "button",
|
|
3530
|
+
variant: "ghost",
|
|
3531
|
+
size: "icon-sm",
|
|
3532
|
+
"aria-label": `${removeLabel}: ${item.file.name}`,
|
|
3533
|
+
onClick: () => onRemove(item.id),
|
|
3534
|
+
className: "ddga-file-upload__item-remove",
|
|
3535
|
+
children: /* @__PURE__ */ jsx30(Close, { "aria-hidden": "true" })
|
|
3536
|
+
}
|
|
3537
|
+
)
|
|
3538
|
+
]
|
|
3539
|
+
},
|
|
3540
|
+
item.id
|
|
3541
|
+
);
|
|
3542
|
+
}) })
|
|
3543
|
+
] });
|
|
3544
|
+
}
|
|
3545
|
+
|
|
3546
|
+
// src/components/Slider/Slider.tsx
|
|
3547
|
+
import { useId as useId4 } from "react";
|
|
3548
|
+
import { Slider as SliderPrimitive } from "radix-ui";
|
|
3549
|
+
import { cva as cva28 } from "class-variance-authority";
|
|
3550
|
+
import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
3551
|
+
var sliderVariants = cva28("ddga-slider", {
|
|
3552
|
+
variants: {
|
|
3553
|
+
size: {
|
|
3554
|
+
sm: "ddga-slider--sm",
|
|
3555
|
+
md: "ddga-slider--md"
|
|
3556
|
+
},
|
|
3557
|
+
error: {
|
|
3558
|
+
true: "ddga-slider--error"
|
|
3559
|
+
}
|
|
3560
|
+
},
|
|
3561
|
+
defaultVariants: {
|
|
3562
|
+
size: "md"
|
|
3563
|
+
}
|
|
3564
|
+
});
|
|
3565
|
+
var DEFAULT_THUMB_LABELS = ["Minimum", "Maximum"];
|
|
3566
|
+
function toArray(value) {
|
|
3567
|
+
if (value === void 0) return void 0;
|
|
3568
|
+
return Array.isArray(value) ? value : [value];
|
|
3569
|
+
}
|
|
3570
|
+
function Slider({
|
|
3571
|
+
id: externalId,
|
|
3572
|
+
value,
|
|
3573
|
+
defaultValue,
|
|
3574
|
+
onValueChange,
|
|
3575
|
+
onValueCommit,
|
|
3576
|
+
min = 0,
|
|
3577
|
+
max = 100,
|
|
3578
|
+
size,
|
|
3579
|
+
label,
|
|
3580
|
+
helperText,
|
|
3581
|
+
errorMessage,
|
|
3582
|
+
error,
|
|
3583
|
+
showValue = false,
|
|
3584
|
+
formatValue,
|
|
3585
|
+
thumbLabels = DEFAULT_THUMB_LABELS,
|
|
3586
|
+
className,
|
|
3587
|
+
...props
|
|
3588
|
+
}) {
|
|
3589
|
+
const labelId = useId4();
|
|
3590
|
+
const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
|
|
3591
|
+
name: "Slider",
|
|
3592
|
+
id: externalId,
|
|
3593
|
+
label,
|
|
3594
|
+
error,
|
|
3595
|
+
errorMessage,
|
|
3596
|
+
helperText,
|
|
3597
|
+
"aria-label": props["aria-label"],
|
|
3598
|
+
"aria-labelledby": props["aria-labelledby"] ?? (label ? labelId : void 0)
|
|
3599
|
+
});
|
|
3600
|
+
const isRange = Array.isArray(value ?? defaultValue);
|
|
3601
|
+
const valueArray = toArray(value);
|
|
3602
|
+
const defaultArray = toArray(defaultValue) ?? [min];
|
|
3603
|
+
const wrap = (next) => isRange ? next : next[0];
|
|
3604
|
+
const currentForRender = valueArray ?? defaultArray;
|
|
3605
|
+
const fmt = (n) => formatValue ? formatValue(n) : String(n);
|
|
3606
|
+
return /* @__PURE__ */ jsxs24("div", { "data-slot": "slider-field", className: "ddga-field", children: [
|
|
3607
|
+
(label || showValue) && /* @__PURE__ */ jsxs24("div", { className: "ddga-slider__header", children: [
|
|
3608
|
+
label && /* @__PURE__ */ jsx31("span", { id: labelId, className: "ddga-slider__label", children: label }),
|
|
3609
|
+
showValue && /* @__PURE__ */ jsx31("span", { className: "ddga-slider__value", "aria-hidden": "true", children: currentForRender.map(fmt).join(" \u2013 ") })
|
|
3610
|
+
] }),
|
|
3611
|
+
/* @__PURE__ */ jsxs24(
|
|
3612
|
+
SliderPrimitive.Root,
|
|
3613
|
+
{
|
|
3614
|
+
...props,
|
|
3615
|
+
id: fieldId,
|
|
3616
|
+
min,
|
|
3617
|
+
max,
|
|
3618
|
+
value: valueArray,
|
|
3619
|
+
defaultValue: value === void 0 ? defaultArray : void 0,
|
|
3620
|
+
onValueChange: onValueChange ? (next) => onValueChange(wrap(next)) : void 0,
|
|
3621
|
+
onValueCommit: onValueCommit ? (next) => onValueCommit(wrap(next)) : void 0,
|
|
3622
|
+
"aria-invalid": controlProps["aria-invalid"],
|
|
3623
|
+
"data-slot": "slider",
|
|
3624
|
+
className: cn(sliderVariants({ size, error: hasError }), className),
|
|
3625
|
+
children: [
|
|
3626
|
+
/* @__PURE__ */ jsx31(SliderPrimitive.Track, { "data-slot": "slider-track", className: "ddga-slider__track", children: /* @__PURE__ */ jsx31(SliderPrimitive.Range, { "data-slot": "slider-range", className: "ddga-slider__range" }) }),
|
|
3627
|
+
currentForRender.map((thumbValue, index) => /* @__PURE__ */ jsx31(
|
|
3628
|
+
SliderPrimitive.Thumb,
|
|
3629
|
+
{
|
|
3630
|
+
"data-slot": "slider-thumb",
|
|
3631
|
+
className: "ddga-slider__thumb",
|
|
3632
|
+
"aria-label": isRange ? thumbLabels[index] : void 0,
|
|
3633
|
+
"aria-labelledby": !isRange && label ? labelId : void 0,
|
|
3634
|
+
"aria-valuetext": formatValue ? fmt(thumbValue) : void 0,
|
|
3635
|
+
"aria-describedby": controlProps["aria-describedby"]
|
|
3636
|
+
},
|
|
3637
|
+
index
|
|
3638
|
+
))
|
|
3639
|
+
]
|
|
3640
|
+
}
|
|
3641
|
+
),
|
|
3642
|
+
hasErrorMessage && /* @__PURE__ */ jsx31(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
|
|
3643
|
+
hasHelper && /* @__PURE__ */ jsx31(FieldMessage, { id: helperId, variant: "helper", children: helperText })
|
|
3644
|
+
] });
|
|
3645
|
+
}
|
|
3646
|
+
|
|
3647
|
+
// src/components/NumberInput/NumberInput.tsx
|
|
3648
|
+
import { useState as useState6 } from "react";
|
|
3649
|
+
import { cva as cva29 } from "class-variance-authority";
|
|
3650
|
+
import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
3651
|
+
var numberInputVariants = cva29("ddga-number-input", {
|
|
3652
|
+
variants: {
|
|
3653
|
+
size: {
|
|
3654
|
+
sm: "ddga-number-input--sm",
|
|
3655
|
+
md: "ddga-number-input--md",
|
|
3656
|
+
lg: "ddga-number-input--lg"
|
|
3657
|
+
},
|
|
3658
|
+
error: {
|
|
3659
|
+
true: "ddga-number-input--error"
|
|
3660
|
+
}
|
|
3661
|
+
},
|
|
3662
|
+
defaultVariants: {
|
|
3663
|
+
size: "md"
|
|
3664
|
+
}
|
|
3665
|
+
});
|
|
3666
|
+
function clamp(value, min, max) {
|
|
3667
|
+
let next = value;
|
|
3668
|
+
if (min != null) next = Math.max(min, next);
|
|
3669
|
+
if (max != null) next = Math.min(max, next);
|
|
3670
|
+
return next;
|
|
3671
|
+
}
|
|
3672
|
+
function formatNumber(value) {
|
|
3673
|
+
if (!Number.isFinite(value)) return "";
|
|
3674
|
+
return value.toLocaleString("en-US", { useGrouping: false, maximumFractionDigits: 20 });
|
|
3675
|
+
}
|
|
3676
|
+
function NumberInput({
|
|
3677
|
+
id: externalId,
|
|
3678
|
+
value,
|
|
3679
|
+
defaultValue,
|
|
3680
|
+
onValueChange,
|
|
3681
|
+
min,
|
|
3682
|
+
max,
|
|
3683
|
+
step = 1,
|
|
3684
|
+
size,
|
|
3685
|
+
hideControls = false,
|
|
3686
|
+
decrementLabel = "Decrease",
|
|
3687
|
+
incrementLabel = "Increase",
|
|
3688
|
+
label,
|
|
3689
|
+
helperText,
|
|
3690
|
+
errorMessage,
|
|
3691
|
+
error,
|
|
3692
|
+
required,
|
|
3693
|
+
disabled,
|
|
3694
|
+
className,
|
|
3695
|
+
onBlur,
|
|
3696
|
+
onKeyDown,
|
|
3697
|
+
...props
|
|
3698
|
+
}) {
|
|
3699
|
+
const isControlled = value !== void 0;
|
|
3700
|
+
const [internal, setInternal] = useState6(defaultValue ?? null);
|
|
3701
|
+
const numericValue = isControlled ? value : internal;
|
|
3702
|
+
const [draft, setDraft] = useState6(null);
|
|
3703
|
+
const allowDecimal = !Number.isInteger(step);
|
|
3704
|
+
const allowNegative = min == null || min < 0;
|
|
3705
|
+
const displayValue = draft ?? (numericValue == null ? "" : formatNumber(numericValue));
|
|
3706
|
+
const allowedPattern = new RegExp(
|
|
3707
|
+
`^${allowNegative ? "-?" : ""}\\d*${allowDecimal ? "(\\.\\d*)?" : ""}$`
|
|
3708
|
+
);
|
|
3709
|
+
function commit(next) {
|
|
3710
|
+
if (!isControlled) setInternal(next);
|
|
3711
|
+
onValueChange?.(next);
|
|
3712
|
+
}
|
|
3713
|
+
const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
|
|
3714
|
+
name: "NumberInput",
|
|
3715
|
+
id: externalId,
|
|
3716
|
+
label,
|
|
3717
|
+
error,
|
|
3718
|
+
errorMessage,
|
|
3719
|
+
helperText,
|
|
3720
|
+
"aria-label": props["aria-label"],
|
|
3721
|
+
"aria-labelledby": props["aria-labelledby"]
|
|
3722
|
+
});
|
|
3723
|
+
function handleChange(event) {
|
|
3724
|
+
const raw = event.target.value;
|
|
3725
|
+
if (!allowedPattern.test(raw)) return;
|
|
3726
|
+
setDraft(raw);
|
|
3727
|
+
if (raw.trim() === "") {
|
|
3728
|
+
commit(null);
|
|
3729
|
+
return;
|
|
3730
|
+
}
|
|
3731
|
+
const parsed = Number(raw);
|
|
3732
|
+
if (Number.isFinite(parsed)) commit(parsed);
|
|
3733
|
+
}
|
|
3734
|
+
function handleBlur(event) {
|
|
3735
|
+
if (numericValue != null) commit(clamp(numericValue, min, max));
|
|
3736
|
+
setDraft(null);
|
|
3737
|
+
onBlur?.(event);
|
|
3738
|
+
}
|
|
3739
|
+
function stepBy(direction) {
|
|
3740
|
+
const base = numericValue ?? (direction > 0 ? min ?? 0 : max ?? 0);
|
|
3741
|
+
const next = clamp(base + direction * step, min, max);
|
|
3742
|
+
const rounded = allowDecimal ? Number(next.toFixed(10)) : next;
|
|
3743
|
+
commit(rounded);
|
|
3744
|
+
setDraft(null);
|
|
3745
|
+
}
|
|
3746
|
+
function handleKeyDown(event) {
|
|
3747
|
+
if (!disabled) {
|
|
3748
|
+
if (event.key === "ArrowUp") {
|
|
3749
|
+
event.preventDefault();
|
|
3750
|
+
stepBy(1);
|
|
3751
|
+
} else if (event.key === "ArrowDown") {
|
|
3752
|
+
event.preventDefault();
|
|
3753
|
+
stepBy(-1);
|
|
3754
|
+
}
|
|
3755
|
+
}
|
|
3756
|
+
onKeyDown?.(event);
|
|
3757
|
+
}
|
|
3758
|
+
const atMin = min != null && numericValue != null && numericValue <= min;
|
|
3759
|
+
const atMax = max != null && numericValue != null && numericValue >= max;
|
|
3760
|
+
return /* @__PURE__ */ jsxs25("div", { "data-slot": "number-input-field", className: "ddga-field", children: [
|
|
3761
|
+
label && /* @__PURE__ */ jsxs25("label", { htmlFor: fieldId, className: "ddga-number-input__label", children: [
|
|
3762
|
+
label,
|
|
3763
|
+
required && /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", className: "ddga-number-input__required", children: "*" })
|
|
3764
|
+
] }),
|
|
3765
|
+
/* @__PURE__ */ jsxs25(
|
|
3766
|
+
"div",
|
|
3767
|
+
{
|
|
3768
|
+
"data-slot": "number-input-control",
|
|
3769
|
+
className: cn(numberInputVariants({ size, error: hasError }), className),
|
|
3770
|
+
children: [
|
|
3771
|
+
!hideControls && /* @__PURE__ */ jsx32(
|
|
3772
|
+
"button",
|
|
3773
|
+
{
|
|
3774
|
+
type: "button",
|
|
3775
|
+
"data-slot": "number-input-decrement",
|
|
3776
|
+
className: "ddga-number-input__step ddga-number-input__step--decrement",
|
|
3777
|
+
"aria-label": decrementLabel,
|
|
3778
|
+
onClick: () => stepBy(-1),
|
|
3779
|
+
disabled: disabled || atMin,
|
|
3780
|
+
tabIndex: -1,
|
|
3781
|
+
children: /* @__PURE__ */ jsx32(Minus, { "aria-hidden": "true" })
|
|
3782
|
+
}
|
|
3783
|
+
),
|
|
3784
|
+
/* @__PURE__ */ jsx32(
|
|
3785
|
+
"input",
|
|
3786
|
+
{
|
|
3787
|
+
...props,
|
|
3788
|
+
...controlProps,
|
|
3789
|
+
type: "text",
|
|
3790
|
+
inputMode: allowDecimal ? "decimal" : "numeric",
|
|
3791
|
+
value: displayValue,
|
|
3792
|
+
required,
|
|
3793
|
+
disabled,
|
|
3794
|
+
onChange: handleChange,
|
|
3795
|
+
onBlur: handleBlur,
|
|
3796
|
+
onKeyDown: handleKeyDown,
|
|
3797
|
+
"data-slot": "number-input",
|
|
3798
|
+
className: "ddga-number-input__field"
|
|
3799
|
+
}
|
|
3800
|
+
),
|
|
3801
|
+
!hideControls && /* @__PURE__ */ jsx32(
|
|
3802
|
+
"button",
|
|
3803
|
+
{
|
|
3804
|
+
type: "button",
|
|
3805
|
+
"data-slot": "number-input-increment",
|
|
3806
|
+
className: "ddga-number-input__step ddga-number-input__step--increment",
|
|
3807
|
+
"aria-label": incrementLabel,
|
|
3808
|
+
onClick: () => stepBy(1),
|
|
3809
|
+
disabled: disabled || atMax,
|
|
3810
|
+
tabIndex: -1,
|
|
3811
|
+
children: /* @__PURE__ */ jsx32(Plus, { "aria-hidden": "true" })
|
|
3812
|
+
}
|
|
3813
|
+
)
|
|
3814
|
+
]
|
|
3815
|
+
}
|
|
3816
|
+
),
|
|
3817
|
+
hasErrorMessage && /* @__PURE__ */ jsx32(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
|
|
3818
|
+
hasHelper && /* @__PURE__ */ jsx32(FieldMessage, { id: helperId, variant: "helper", children: helperText })
|
|
3819
|
+
] });
|
|
3820
|
+
}
|
|
3821
|
+
|
|
3822
|
+
// src/components/Rating/Rating.tsx
|
|
3823
|
+
import { useRef as useRef2, useState as useState7 } from "react";
|
|
3824
|
+
import { cva as cva30 } from "class-variance-authority";
|
|
3825
|
+
import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3826
|
+
var ratingVariants = cva30("ddga-rating", {
|
|
3827
|
+
variants: {
|
|
3828
|
+
size: {
|
|
3829
|
+
sm: "ddga-rating--sm",
|
|
3830
|
+
md: "ddga-rating--md",
|
|
3831
|
+
lg: "ddga-rating--lg"
|
|
3832
|
+
}
|
|
3833
|
+
},
|
|
3834
|
+
defaultVariants: {
|
|
3835
|
+
size: "md"
|
|
3836
|
+
}
|
|
3837
|
+
});
|
|
3838
|
+
function clamp2(value, min, max) {
|
|
3839
|
+
return Math.min(max, Math.max(min, value));
|
|
3840
|
+
}
|
|
3841
|
+
function defaultValueText(value, max) {
|
|
3842
|
+
return `${value} out of ${max} stars`;
|
|
3843
|
+
}
|
|
3844
|
+
function fillFor(index, value, allowHalf) {
|
|
3845
|
+
if (value >= index + 1) return "full";
|
|
3846
|
+
if (allowHalf && value >= index + 0.5) return "half";
|
|
3847
|
+
return "empty";
|
|
3848
|
+
}
|
|
3849
|
+
function Rating({
|
|
3850
|
+
id: externalId,
|
|
3851
|
+
value,
|
|
3852
|
+
defaultValue,
|
|
3853
|
+
onValueChange,
|
|
3854
|
+
max = 5,
|
|
3855
|
+
allowHalf = false,
|
|
3856
|
+
readOnly = false,
|
|
3857
|
+
disabled = false,
|
|
3858
|
+
size,
|
|
3859
|
+
label,
|
|
3860
|
+
helperText,
|
|
3861
|
+
errorMessage,
|
|
3862
|
+
error,
|
|
3863
|
+
formatValueText = defaultValueText,
|
|
3864
|
+
className,
|
|
3865
|
+
...props
|
|
3866
|
+
}) {
|
|
3867
|
+
const rootRef = useRef2(null);
|
|
3868
|
+
const isControlled = value !== void 0;
|
|
3869
|
+
const [internal, setInternal] = useState7(defaultValue ?? 0);
|
|
3870
|
+
const currentValue = isControlled ? value : internal;
|
|
3871
|
+
const [hover, setHover] = useState7(null);
|
|
3872
|
+
const interactive = !readOnly && !disabled;
|
|
3873
|
+
const stepSize = allowHalf ? 0.5 : 1;
|
|
3874
|
+
const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
|
|
3875
|
+
name: "Rating",
|
|
3876
|
+
id: externalId,
|
|
3877
|
+
label,
|
|
3878
|
+
error,
|
|
3879
|
+
errorMessage,
|
|
3880
|
+
helperText,
|
|
3881
|
+
// role=slider / role=img always have an accessible name (label or the
|
|
3882
|
+
// value text), so suppress the no-label dev warning.
|
|
3883
|
+
"aria-label": props["aria-label"] ?? formatValueText(currentValue, max),
|
|
3884
|
+
"aria-labelledby": props["aria-labelledby"]
|
|
3885
|
+
});
|
|
3886
|
+
const displayValue = hover ?? currentValue;
|
|
3887
|
+
function commit(next) {
|
|
3888
|
+
if (!isControlled) setInternal(next);
|
|
3889
|
+
onValueChange?.(next);
|
|
3890
|
+
}
|
|
3891
|
+
function readDir() {
|
|
3892
|
+
const el = rootRef.current;
|
|
3893
|
+
if (!el || typeof getComputedStyle !== "function") return "ltr";
|
|
3894
|
+
return getComputedStyle(el).direction === "rtl" ? "rtl" : "ltr";
|
|
3895
|
+
}
|
|
3896
|
+
function pointerValue(event, index) {
|
|
3897
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
3898
|
+
let fraction = rect.width ? (event.clientX - rect.left) / rect.width : 1;
|
|
3899
|
+
if (readDir() === "rtl") fraction = 1 - fraction;
|
|
3900
|
+
if (allowHalf) return index + (fraction <= 0.5 ? 0.5 : 1);
|
|
3901
|
+
return index + 1;
|
|
3902
|
+
}
|
|
3903
|
+
function handleKeyDown(event) {
|
|
3904
|
+
if (!interactive) return;
|
|
3905
|
+
const rtl = readDir() === "rtl";
|
|
3906
|
+
let next = null;
|
|
3907
|
+
switch (event.key) {
|
|
3908
|
+
case "ArrowUp":
|
|
3909
|
+
next = currentValue + stepSize;
|
|
3910
|
+
break;
|
|
3911
|
+
case "ArrowDown":
|
|
3912
|
+
next = currentValue - stepSize;
|
|
3913
|
+
break;
|
|
3914
|
+
case "ArrowRight":
|
|
3915
|
+
next = currentValue + (rtl ? -stepSize : stepSize);
|
|
3916
|
+
break;
|
|
3917
|
+
case "ArrowLeft":
|
|
3918
|
+
next = currentValue + (rtl ? stepSize : -stepSize);
|
|
3919
|
+
break;
|
|
3920
|
+
case "Home":
|
|
3921
|
+
next = 0;
|
|
3922
|
+
break;
|
|
3923
|
+
case "End":
|
|
3924
|
+
next = max;
|
|
3925
|
+
break;
|
|
3926
|
+
default:
|
|
3927
|
+
return;
|
|
3928
|
+
}
|
|
3929
|
+
event.preventDefault();
|
|
3930
|
+
commit(clamp2(next, 0, max));
|
|
3931
|
+
}
|
|
3932
|
+
const stars = Array.from({ length: max }, (_, index) => {
|
|
3933
|
+
const level = fillFor(index, displayValue, allowHalf);
|
|
3934
|
+
return /* @__PURE__ */ jsxs26(
|
|
3935
|
+
"span",
|
|
3936
|
+
{
|
|
3937
|
+
"data-slot": "rating-star",
|
|
3938
|
+
"data-fill": level,
|
|
3939
|
+
className: "ddga-rating__star",
|
|
3940
|
+
onPointerMove: interactive ? (event) => setHover(pointerValue(event, index)) : void 0,
|
|
3941
|
+
onClick: interactive ? (event) => commit(pointerValue(event, index)) : void 0,
|
|
3942
|
+
children: [
|
|
3943
|
+
/* @__PURE__ */ jsx33(Star, { className: "ddga-rating__star-bg", "aria-hidden": "true" }),
|
|
3944
|
+
/* @__PURE__ */ jsx33("span", { className: "ddga-rating__star-fill", "aria-hidden": "true", children: /* @__PURE__ */ jsx33(Star, { className: "ddga-rating__star-fg", "aria-hidden": "true" }) })
|
|
3945
|
+
]
|
|
3946
|
+
},
|
|
3947
|
+
index
|
|
3948
|
+
);
|
|
3949
|
+
});
|
|
3950
|
+
const sharedProps = {
|
|
3951
|
+
ref: rootRef,
|
|
3952
|
+
"data-slot": "rating",
|
|
3953
|
+
"data-disabled": disabled || void 0,
|
|
3954
|
+
className: cn(ratingVariants({ size }), hasError && "ddga-rating--error", className),
|
|
3955
|
+
onPointerLeave: interactive ? () => setHover(null) : void 0
|
|
3956
|
+
};
|
|
3957
|
+
const labelledBy = label ? `${fieldId}-label` : props["aria-labelledby"];
|
|
3958
|
+
const ariaLabel = labelledBy ? void 0 : props["aria-label"] ?? "Rating";
|
|
3959
|
+
return /* @__PURE__ */ jsxs26("div", { "data-slot": "rating-field", className: "ddga-field", children: [
|
|
3960
|
+
label && /* @__PURE__ */ jsx33("span", { id: `${fieldId}-label`, className: "ddga-rating__label", children: label }),
|
|
3961
|
+
readOnly ? /* @__PURE__ */ jsx33("div", { ...sharedProps, role: "img", "aria-label": formatValueText(currentValue, max), children: stars }) : /* @__PURE__ */ jsx33(
|
|
3962
|
+
"div",
|
|
3963
|
+
{
|
|
3964
|
+
...sharedProps,
|
|
3965
|
+
role: "slider",
|
|
3966
|
+
id: fieldId,
|
|
3967
|
+
tabIndex: disabled ? -1 : 0,
|
|
3968
|
+
"aria-valuemin": 0,
|
|
3969
|
+
"aria-valuemax": max,
|
|
3970
|
+
"aria-valuenow": currentValue,
|
|
3971
|
+
"aria-valuetext": formatValueText(currentValue, max),
|
|
3972
|
+
"aria-labelledby": labelledBy,
|
|
3973
|
+
"aria-label": ariaLabel,
|
|
3974
|
+
"aria-invalid": controlProps["aria-invalid"],
|
|
3975
|
+
"aria-describedby": controlProps["aria-describedby"],
|
|
3976
|
+
"aria-disabled": disabled || void 0,
|
|
3977
|
+
onKeyDown: handleKeyDown,
|
|
3978
|
+
children: stars
|
|
3979
|
+
}
|
|
3980
|
+
),
|
|
3981
|
+
hasErrorMessage && /* @__PURE__ */ jsx33(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
|
|
3982
|
+
hasHelper && /* @__PURE__ */ jsx33(FieldMessage, { id: helperId, variant: "helper", children: helperText })
|
|
3983
|
+
] });
|
|
3984
|
+
}
|
|
3985
|
+
|
|
3986
|
+
// src/components/Toggle/Toggle.tsx
|
|
3987
|
+
import { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
|
|
3988
|
+
import { cva as cva31 } from "class-variance-authority";
|
|
3989
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
3990
|
+
var toggleVariants = cva31("ddga-toggle", {
|
|
3991
|
+
variants: {
|
|
3992
|
+
variant: {
|
|
3993
|
+
default: "ddga-toggle--default",
|
|
3994
|
+
outline: "ddga-toggle--outline"
|
|
3995
|
+
},
|
|
3996
|
+
size: {
|
|
3997
|
+
sm: "ddga-toggle--sm",
|
|
3998
|
+
md: "ddga-toggle--md",
|
|
3999
|
+
lg: "ddga-toggle--lg"
|
|
4000
|
+
}
|
|
4001
|
+
},
|
|
4002
|
+
defaultVariants: {
|
|
4003
|
+
variant: "default",
|
|
4004
|
+
size: "md"
|
|
4005
|
+
}
|
|
4006
|
+
});
|
|
4007
|
+
var toggleGroupVariants = cva31("ddga-toggle-group", {
|
|
4008
|
+
variants: {
|
|
4009
|
+
variant: {
|
|
4010
|
+
default: "ddga-toggle-group--default",
|
|
4011
|
+
outline: "ddga-toggle-group--outline"
|
|
4012
|
+
},
|
|
4013
|
+
size: {
|
|
4014
|
+
sm: "ddga-toggle-group--sm",
|
|
4015
|
+
md: "ddga-toggle-group--md",
|
|
4016
|
+
lg: "ddga-toggle-group--lg"
|
|
4017
|
+
}
|
|
4018
|
+
},
|
|
4019
|
+
defaultVariants: {
|
|
4020
|
+
variant: "default",
|
|
4021
|
+
size: "md"
|
|
4022
|
+
}
|
|
4023
|
+
});
|
|
4024
|
+
function Toggle({ variant, size, className, ...props }) {
|
|
4025
|
+
return /* @__PURE__ */ jsx34(
|
|
4026
|
+
TogglePrimitive.Root,
|
|
4027
|
+
{
|
|
4028
|
+
"data-slot": "toggle",
|
|
4029
|
+
className: cn(toggleVariants({ variant, size }), className),
|
|
4030
|
+
...props
|
|
4031
|
+
}
|
|
4032
|
+
);
|
|
4033
|
+
}
|
|
4034
|
+
function ToggleGroup({ variant, size, className, ...props }) {
|
|
4035
|
+
if (process.env.NODE_ENV === "development" && !props["aria-label"] && !props["aria-labelledby"]) {
|
|
4036
|
+
console.warn(
|
|
4037
|
+
"[@dev-dga/react] ToggleGroup should have an `aria-label` or `aria-labelledby` so the button group has an accessible name."
|
|
4038
|
+
);
|
|
4039
|
+
}
|
|
4040
|
+
return /* @__PURE__ */ jsx34(
|
|
4041
|
+
ToggleGroupPrimitive.Root,
|
|
4042
|
+
{
|
|
4043
|
+
"data-slot": "toggle-group",
|
|
4044
|
+
className: cn(toggleGroupVariants({ variant, size }), className),
|
|
4045
|
+
...props
|
|
4046
|
+
}
|
|
4047
|
+
);
|
|
4048
|
+
}
|
|
4049
|
+
function ToggleGroupItem({ className, ...props }) {
|
|
4050
|
+
return /* @__PURE__ */ jsx34(
|
|
4051
|
+
ToggleGroupPrimitive.Item,
|
|
4052
|
+
{
|
|
4053
|
+
"data-slot": "toggle-group-item",
|
|
4054
|
+
className: cn("ddga-toggle-group__item", className),
|
|
4055
|
+
...props
|
|
4056
|
+
}
|
|
4057
|
+
);
|
|
4058
|
+
}
|
|
4059
|
+
|
|
4060
|
+
// src/components/DescriptionList/DescriptionList.tsx
|
|
4061
|
+
import { cva as cva32 } from "class-variance-authority";
|
|
4062
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
4063
|
+
var descriptionListVariants = cva32("ddga-description-list", {
|
|
4064
|
+
variants: {
|
|
4065
|
+
orientation: {
|
|
4066
|
+
horizontal: "ddga-description-list--horizontal",
|
|
4067
|
+
vertical: "ddga-description-list--vertical"
|
|
4068
|
+
},
|
|
4069
|
+
divided: {
|
|
4070
|
+
true: "ddga-description-list--divided"
|
|
4071
|
+
}
|
|
4072
|
+
},
|
|
4073
|
+
defaultVariants: {
|
|
4074
|
+
orientation: "horizontal"
|
|
4075
|
+
}
|
|
4076
|
+
});
|
|
4077
|
+
function DescriptionList({ orientation, divided, className, ...props }) {
|
|
4078
|
+
return /* @__PURE__ */ jsx35(
|
|
4079
|
+
"dl",
|
|
4080
|
+
{
|
|
4081
|
+
"data-slot": "description-list",
|
|
4082
|
+
className: cn(descriptionListVariants({ orientation, divided }), className),
|
|
4083
|
+
...props
|
|
4084
|
+
}
|
|
4085
|
+
);
|
|
4086
|
+
}
|
|
4087
|
+
function DescriptionItem({ className, ...props }) {
|
|
4088
|
+
return /* @__PURE__ */ jsx35(
|
|
4089
|
+
"div",
|
|
4090
|
+
{
|
|
4091
|
+
"data-slot": "description-item",
|
|
4092
|
+
className: cn("ddga-description-list__item", className),
|
|
4093
|
+
...props
|
|
4094
|
+
}
|
|
4095
|
+
);
|
|
4096
|
+
}
|
|
4097
|
+
function DescriptionTerm({ className, ...props }) {
|
|
4098
|
+
return /* @__PURE__ */ jsx35(
|
|
4099
|
+
"dt",
|
|
4100
|
+
{
|
|
4101
|
+
"data-slot": "description-term",
|
|
4102
|
+
className: cn("ddga-description-list__term", className),
|
|
4103
|
+
...props
|
|
4104
|
+
}
|
|
4105
|
+
);
|
|
4106
|
+
}
|
|
4107
|
+
function DescriptionDetails({ className, ...props }) {
|
|
4108
|
+
return /* @__PURE__ */ jsx35(
|
|
4109
|
+
"dd",
|
|
4110
|
+
{
|
|
4111
|
+
"data-slot": "description-details",
|
|
4112
|
+
className: cn("ddga-description-list__details", className),
|
|
4113
|
+
...props
|
|
4114
|
+
}
|
|
4115
|
+
);
|
|
4116
|
+
}
|
|
4117
|
+
|
|
4118
|
+
// src/components/EmptyState/EmptyState.tsx
|
|
4119
|
+
import "react";
|
|
4120
|
+
import { Slot as SlotPrimitive9 } from "radix-ui";
|
|
4121
|
+
import { cva as cva33 } from "class-variance-authority";
|
|
4122
|
+
import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
4123
|
+
var emptyStateVariants = cva33("ddga-empty-state", {
|
|
4124
|
+
variants: {
|
|
4125
|
+
variant: {
|
|
4126
|
+
default: "ddga-empty-state--default",
|
|
4127
|
+
search: "ddga-empty-state--search",
|
|
4128
|
+
error: "ddga-empty-state--error",
|
|
4129
|
+
success: "ddga-empty-state--success"
|
|
4130
|
+
},
|
|
4131
|
+
size: {
|
|
4132
|
+
sm: "ddga-empty-state--sm",
|
|
4133
|
+
md: "ddga-empty-state--md",
|
|
4134
|
+
lg: "ddga-empty-state--lg"
|
|
4135
|
+
}
|
|
4136
|
+
},
|
|
4137
|
+
defaultVariants: {
|
|
4138
|
+
variant: "default",
|
|
4139
|
+
size: "md"
|
|
4140
|
+
}
|
|
4141
|
+
});
|
|
4142
|
+
var DEFAULT_ICONS3 = {
|
|
4143
|
+
default: /* @__PURE__ */ jsx36(Inbox, { "aria-hidden": "true" }),
|
|
4144
|
+
search: /* @__PURE__ */ jsx36(Search, { "aria-hidden": "true" }),
|
|
4145
|
+
error: /* @__PURE__ */ jsx36(AlertCircle, { "aria-hidden": "true" }),
|
|
4146
|
+
success: /* @__PURE__ */ jsx36(Check, { "aria-hidden": "true" })
|
|
4147
|
+
};
|
|
4148
|
+
function EmptyState({
|
|
4149
|
+
variant,
|
|
4150
|
+
size,
|
|
4151
|
+
icon,
|
|
4152
|
+
title,
|
|
4153
|
+
description,
|
|
4154
|
+
action,
|
|
4155
|
+
secondaryAction,
|
|
4156
|
+
className,
|
|
4157
|
+
children,
|
|
4158
|
+
...props
|
|
4159
|
+
}) {
|
|
4160
|
+
const resolvedIcon = icon === false ? null : icon !== void 0 ? icon : DEFAULT_ICONS3[variant ?? "default"];
|
|
4161
|
+
return /* @__PURE__ */ jsx36(
|
|
4162
|
+
"div",
|
|
4163
|
+
{
|
|
4164
|
+
"data-slot": "empty-state",
|
|
4165
|
+
"data-variant": variant ?? "default",
|
|
4166
|
+
"data-size": size ?? "md",
|
|
4167
|
+
className: cn(emptyStateVariants({ variant, size }), className),
|
|
4168
|
+
...props,
|
|
4169
|
+
children: children ?? /* @__PURE__ */ jsxs27(Fragment3, { children: [
|
|
4170
|
+
resolvedIcon ? /* @__PURE__ */ jsx36(EmptyStateMedia, { children: resolvedIcon }) : null,
|
|
4171
|
+
title ? /* @__PURE__ */ jsx36(EmptyStateTitle, { children: title }) : null,
|
|
4172
|
+
description ? /* @__PURE__ */ jsx36(EmptyStateDescription, { children: description }) : null,
|
|
4173
|
+
action || secondaryAction ? /* @__PURE__ */ jsxs27(EmptyStateActions, { children: [
|
|
4174
|
+
action,
|
|
4175
|
+
secondaryAction
|
|
4176
|
+
] }) : null
|
|
4177
|
+
] })
|
|
4178
|
+
}
|
|
4179
|
+
);
|
|
4180
|
+
}
|
|
4181
|
+
function EmptyStateMedia({ className, ...props }) {
|
|
4182
|
+
return /* @__PURE__ */ jsx36(
|
|
4183
|
+
"div",
|
|
4184
|
+
{
|
|
4185
|
+
"data-slot": "empty-state-media",
|
|
4186
|
+
"aria-hidden": "true",
|
|
4187
|
+
className: cn("ddga-empty-state__media", className),
|
|
4188
|
+
...props
|
|
4189
|
+
}
|
|
4190
|
+
);
|
|
4191
|
+
}
|
|
4192
|
+
function EmptyStateTitle({ asChild, className, ...props }) {
|
|
4193
|
+
const Comp = asChild ? SlotPrimitive9.Slot : "h3";
|
|
4194
|
+
return /* @__PURE__ */ jsx36(
|
|
4195
|
+
Comp,
|
|
4196
|
+
{
|
|
4197
|
+
"data-slot": "empty-state-title",
|
|
4198
|
+
className: cn("ddga-empty-state__title", className),
|
|
4199
|
+
...props
|
|
4200
|
+
}
|
|
4201
|
+
);
|
|
4202
|
+
}
|
|
4203
|
+
function EmptyStateDescription({ asChild, className, ...props }) {
|
|
4204
|
+
const Comp = asChild ? SlotPrimitive9.Slot : "p";
|
|
4205
|
+
return /* @__PURE__ */ jsx36(
|
|
4206
|
+
Comp,
|
|
4207
|
+
{
|
|
4208
|
+
"data-slot": "empty-state-description",
|
|
4209
|
+
className: cn("ddga-empty-state__description", className),
|
|
4210
|
+
...props
|
|
4211
|
+
}
|
|
4212
|
+
);
|
|
4213
|
+
}
|
|
4214
|
+
function EmptyStateActions({ asChild, className, ...props }) {
|
|
4215
|
+
const Comp = asChild ? SlotPrimitive9.Slot : "div";
|
|
4216
|
+
return /* @__PURE__ */ jsx36(
|
|
4217
|
+
Comp,
|
|
4218
|
+
{
|
|
4219
|
+
"data-slot": "empty-state-actions",
|
|
4220
|
+
className: cn("ddga-empty-state__actions", className),
|
|
4221
|
+
...props
|
|
4222
|
+
}
|
|
4223
|
+
);
|
|
4224
|
+
}
|
|
4225
|
+
|
|
4226
|
+
// src/components/Stat/Stat.tsx
|
|
4227
|
+
import "react";
|
|
4228
|
+
import { cva as cva34 } from "class-variance-authority";
|
|
4229
|
+
import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
4230
|
+
var statVariants = cva34("ddga-stat", {
|
|
4231
|
+
variants: {
|
|
4232
|
+
variant: {
|
|
4233
|
+
flat: "ddga-stat--flat",
|
|
4234
|
+
elevated: "ddga-stat--elevated",
|
|
4235
|
+
accent: "ddga-stat--accent"
|
|
4236
|
+
},
|
|
4237
|
+
size: {
|
|
4238
|
+
sm: "ddga-stat--sm",
|
|
4239
|
+
md: "ddga-stat--md",
|
|
4240
|
+
lg: "ddga-stat--lg"
|
|
4241
|
+
}
|
|
4242
|
+
},
|
|
4243
|
+
defaultVariants: {
|
|
4244
|
+
variant: "flat",
|
|
4245
|
+
size: "md"
|
|
4246
|
+
}
|
|
4247
|
+
});
|
|
4248
|
+
var TREND_ICONS = {
|
|
4249
|
+
up: /* @__PURE__ */ jsx37(CaretUp, { "aria-hidden": "true" }),
|
|
4250
|
+
down: /* @__PURE__ */ jsx37(CaretDown, { "aria-hidden": "true" }),
|
|
4251
|
+
flat: /* @__PURE__ */ jsx37(Minus, { "aria-hidden": "true" })
|
|
4252
|
+
};
|
|
4253
|
+
var TREND_SENTIMENT = {
|
|
4254
|
+
up: "positive",
|
|
4255
|
+
down: "negative",
|
|
4256
|
+
flat: "neutral"
|
|
4257
|
+
};
|
|
4258
|
+
function resolveSentiment(trend, sentiment) {
|
|
4259
|
+
if (sentiment) return sentiment;
|
|
4260
|
+
if (trend) return TREND_SENTIMENT[trend];
|
|
4261
|
+
return void 0;
|
|
4262
|
+
}
|
|
4263
|
+
function Stat({
|
|
4264
|
+
variant,
|
|
4265
|
+
size,
|
|
4266
|
+
label,
|
|
4267
|
+
value,
|
|
4268
|
+
change,
|
|
4269
|
+
changeLabel,
|
|
4270
|
+
trend,
|
|
4271
|
+
sentiment,
|
|
4272
|
+
icon,
|
|
4273
|
+
className,
|
|
4274
|
+
children,
|
|
4275
|
+
...props
|
|
4276
|
+
}) {
|
|
4277
|
+
const resolvedSentiment = resolveSentiment(trend, sentiment);
|
|
4278
|
+
return /* @__PURE__ */ jsxs28(
|
|
4279
|
+
"div",
|
|
4280
|
+
{
|
|
4281
|
+
"data-slot": "stat",
|
|
4282
|
+
"data-variant": variant ?? "flat",
|
|
4283
|
+
"data-trend": trend,
|
|
4284
|
+
"data-sentiment": resolvedSentiment,
|
|
4285
|
+
className: cn(statVariants({ variant, size }), className),
|
|
4286
|
+
...props,
|
|
4287
|
+
children: [
|
|
4288
|
+
label || icon ? /* @__PURE__ */ jsxs28("div", { className: "ddga-stat__label-row", children: [
|
|
4289
|
+
label ? /* @__PURE__ */ jsx37(StatLabel, { children: label }) : null,
|
|
4290
|
+
icon ? /* @__PURE__ */ jsx37("span", { className: "ddga-stat__icon", "aria-hidden": "true", children: icon }) : null
|
|
4291
|
+
] }) : null,
|
|
4292
|
+
value ? /* @__PURE__ */ jsx37(StatValue, { children: value }) : null,
|
|
4293
|
+
change || changeLabel ? /* @__PURE__ */ jsxs28("div", { className: "ddga-stat__change-row", children: [
|
|
4294
|
+
change ? /* @__PURE__ */ jsx37(StatChange, { trend, sentiment, children: change }) : null,
|
|
4295
|
+
changeLabel ? /* @__PURE__ */ jsx37("span", { className: "ddga-stat__change-label", children: changeLabel }) : null
|
|
4296
|
+
] }) : null,
|
|
4297
|
+
children
|
|
4298
|
+
]
|
|
4299
|
+
}
|
|
4300
|
+
);
|
|
4301
|
+
}
|
|
4302
|
+
function StatLabel({ className, ...props }) {
|
|
4303
|
+
return /* @__PURE__ */ jsx37("div", { "data-slot": "stat-label", className: cn("ddga-stat__label", className), ...props });
|
|
4304
|
+
}
|
|
4305
|
+
function StatValue({ className, ...props }) {
|
|
4306
|
+
return /* @__PURE__ */ jsx37("div", { "data-slot": "stat-value", className: cn("ddga-stat__value", className), ...props });
|
|
4307
|
+
}
|
|
4308
|
+
function StatChange({ trend, sentiment, className, children, ...props }) {
|
|
4309
|
+
const resolvedSentiment = resolveSentiment(trend, sentiment);
|
|
4310
|
+
return /* @__PURE__ */ jsxs28(
|
|
4311
|
+
"div",
|
|
4312
|
+
{
|
|
4313
|
+
"data-slot": "stat-change",
|
|
4314
|
+
"data-trend": trend,
|
|
4315
|
+
"data-sentiment": resolvedSentiment,
|
|
4316
|
+
className: cn(
|
|
4317
|
+
"ddga-stat__change",
|
|
4318
|
+
resolvedSentiment ? `ddga-stat__change--${resolvedSentiment}` : null,
|
|
4319
|
+
className
|
|
4320
|
+
),
|
|
4321
|
+
...props,
|
|
4322
|
+
children: [
|
|
4323
|
+
trend ? /* @__PURE__ */ jsx37("span", { className: "ddga-stat__change-icon", children: TREND_ICONS[trend] }) : null,
|
|
4324
|
+
children
|
|
4325
|
+
]
|
|
4326
|
+
}
|
|
4327
|
+
);
|
|
4328
|
+
}
|
|
4329
|
+
|
|
4330
|
+
// src/components/Stat/StatGroup.tsx
|
|
4331
|
+
import { cva as cva35 } from "class-variance-authority";
|
|
4332
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
4333
|
+
var statGroupVariants = cva35("ddga-stat-group", {
|
|
4334
|
+
variants: {
|
|
4335
|
+
orientation: {
|
|
4336
|
+
horizontal: "ddga-stat-group--horizontal",
|
|
4337
|
+
vertical: "ddga-stat-group--vertical"
|
|
4338
|
+
},
|
|
4339
|
+
gap: {
|
|
4340
|
+
sm: "ddga-stat-group--gap-sm",
|
|
4341
|
+
md: "ddga-stat-group--gap-md",
|
|
4342
|
+
lg: "ddga-stat-group--gap-lg"
|
|
4343
|
+
}
|
|
4344
|
+
},
|
|
4345
|
+
defaultVariants: {
|
|
4346
|
+
orientation: "horizontal",
|
|
4347
|
+
gap: "md"
|
|
4348
|
+
}
|
|
4349
|
+
});
|
|
4350
|
+
function StatGroup({ orientation, gap, columns, className, style, ...props }) {
|
|
4351
|
+
return /* @__PURE__ */ jsx38(
|
|
4352
|
+
"div",
|
|
4353
|
+
{
|
|
4354
|
+
"data-slot": "stat-group",
|
|
4355
|
+
className: cn(
|
|
4356
|
+
statGroupVariants({ orientation, gap }),
|
|
4357
|
+
columns != null && "ddga-stat-group--cols",
|
|
4358
|
+
className
|
|
4359
|
+
),
|
|
4360
|
+
style: columns != null ? { "--ddga-stat-group-columns": columns, ...style } : style,
|
|
4361
|
+
...props
|
|
4362
|
+
}
|
|
4363
|
+
);
|
|
4364
|
+
}
|
|
4365
|
+
|
|
4366
|
+
// src/components/Popover/Popover.tsx
|
|
4367
|
+
import { useContext as useContext9 } from "react";
|
|
4368
|
+
import { Popover as PopoverPrimitive2 } from "radix-ui";
|
|
4369
|
+
import { cva as cva36 } from "class-variance-authority";
|
|
4370
|
+
import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
4371
|
+
var popoverContentVariants = cva36("ddga-popover", {
|
|
4372
|
+
variants: {
|
|
4373
|
+
size: {
|
|
4374
|
+
sm: "ddga-popover--sm",
|
|
4375
|
+
md: "ddga-popover--md"
|
|
4376
|
+
}
|
|
4377
|
+
},
|
|
4378
|
+
defaultVariants: {
|
|
4379
|
+
size: "md"
|
|
4380
|
+
}
|
|
4381
|
+
});
|
|
4382
|
+
function Popover(props) {
|
|
4383
|
+
return /* @__PURE__ */ jsx39(PopoverPrimitive2.Root, { ...props });
|
|
4384
|
+
}
|
|
4385
|
+
function PopoverTrigger({ className, ...props }) {
|
|
4386
|
+
return /* @__PURE__ */ jsx39(PopoverPrimitive2.Trigger, { "data-slot": "popover-trigger", className, ...props });
|
|
4387
|
+
}
|
|
4388
|
+
function PopoverAnchor(props) {
|
|
4389
|
+
return /* @__PURE__ */ jsx39(PopoverPrimitive2.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
4390
|
+
}
|
|
4391
|
+
function PopoverContent({
|
|
4392
|
+
size,
|
|
4393
|
+
arrow = false,
|
|
4394
|
+
sideOffset = 6,
|
|
4395
|
+
className,
|
|
4396
|
+
children,
|
|
4397
|
+
...props
|
|
4398
|
+
}) {
|
|
4399
|
+
if (process.env.NODE_ENV === "development" && !props["aria-label"] && !props["aria-labelledby"]) {
|
|
4400
|
+
console.warn(
|
|
4401
|
+
'[@dev-dga/react] PopoverContent renders role="dialog" and should have an `aria-label` or `aria-labelledby` so the panel has an accessible name.'
|
|
4402
|
+
);
|
|
4403
|
+
}
|
|
4404
|
+
const ctx = useContext9(DgaContext);
|
|
4405
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
4406
|
+
return /* @__PURE__ */ jsx39(PopoverPrimitive2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs29(
|
|
4407
|
+
PopoverPrimitive2.Content,
|
|
4408
|
+
{
|
|
4409
|
+
"data-slot": "popover-content",
|
|
4410
|
+
sideOffset,
|
|
4411
|
+
className: cn(popoverContentVariants({ size }), className),
|
|
4412
|
+
...props,
|
|
4413
|
+
children: [
|
|
4414
|
+
children,
|
|
4415
|
+
arrow ? /* @__PURE__ */ jsx39(PopoverPrimitive2.Arrow, { className: "ddga-popover__arrow", width: 16, height: 8 }) : null
|
|
4416
|
+
]
|
|
4417
|
+
}
|
|
4418
|
+
) });
|
|
4419
|
+
}
|
|
4420
|
+
function PopoverClose({
|
|
4421
|
+
className,
|
|
4422
|
+
children,
|
|
4423
|
+
closeLabel = "Close",
|
|
4424
|
+
asChild,
|
|
4425
|
+
...props
|
|
4426
|
+
}) {
|
|
4427
|
+
const hasRenderableChildren = children != null && children !== false;
|
|
4428
|
+
if (asChild || hasRenderableChildren) {
|
|
4429
|
+
return /* @__PURE__ */ jsx39(
|
|
4430
|
+
PopoverPrimitive2.Close,
|
|
4431
|
+
{
|
|
4432
|
+
"data-slot": "popover-close",
|
|
4433
|
+
asChild,
|
|
4434
|
+
className,
|
|
4435
|
+
...props,
|
|
4436
|
+
children
|
|
4437
|
+
}
|
|
4438
|
+
);
|
|
4439
|
+
}
|
|
4440
|
+
return /* @__PURE__ */ jsx39(
|
|
4441
|
+
PopoverPrimitive2.Close,
|
|
4442
|
+
{
|
|
4443
|
+
"data-slot": "popover-close",
|
|
4444
|
+
"aria-label": closeLabel,
|
|
4445
|
+
className: cn("ddga-popover__close", className),
|
|
4446
|
+
...props,
|
|
4447
|
+
children: /* @__PURE__ */ jsx39(Close, { "aria-hidden": "true" })
|
|
4448
|
+
}
|
|
4449
|
+
);
|
|
4450
|
+
}
|
|
4451
|
+
|
|
4452
|
+
// src/components/Sidebar/Sidebar.tsx
|
|
4453
|
+
import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useState as useState9 } from "react";
|
|
4454
|
+
import { Slot as SlotPrimitive10 } from "radix-ui";
|
|
4455
|
+
|
|
4456
|
+
// src/components/Sidebar/SidebarContext.ts
|
|
4457
|
+
import { createContext as createContext3, useContext as useContext10 } from "react";
|
|
4458
|
+
var SidebarContext = createContext3(null);
|
|
4459
|
+
function useSidebar() {
|
|
4460
|
+
const ctx = useContext10(SidebarContext);
|
|
4461
|
+
if (!ctx) {
|
|
4462
|
+
throw new Error("useSidebar must be used within a <SidebarProvider>");
|
|
4463
|
+
}
|
|
4464
|
+
return ctx;
|
|
4465
|
+
}
|
|
4466
|
+
|
|
4467
|
+
// src/components/Sidebar/useIsMobile.ts
|
|
4468
|
+
import { useEffect, useState as useState8 } from "react";
|
|
4469
|
+
function useIsMobile(breakpoint = 768) {
|
|
4470
|
+
const [isMobile, setIsMobile] = useState8(false);
|
|
4471
|
+
useEffect(() => {
|
|
4472
|
+
const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
|
|
4473
|
+
const onChange = () => setIsMobile(mql.matches);
|
|
4474
|
+
onChange();
|
|
4475
|
+
mql.addEventListener("change", onChange);
|
|
4476
|
+
return () => mql.removeEventListener("change", onChange);
|
|
4477
|
+
}, [breakpoint]);
|
|
4478
|
+
return isMobile;
|
|
4479
|
+
}
|
|
4480
|
+
|
|
4481
|
+
// src/components/Sidebar/Sidebar.tsx
|
|
4482
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
4483
|
+
function SidebarProvider({
|
|
4484
|
+
defaultOpen = true,
|
|
4485
|
+
open: openProp,
|
|
4486
|
+
onOpenChange,
|
|
4487
|
+
mobileBreakpoint = 768,
|
|
4488
|
+
keyboardShortcut = true,
|
|
4489
|
+
className,
|
|
4490
|
+
style,
|
|
4491
|
+
children,
|
|
4492
|
+
...props
|
|
4493
|
+
}) {
|
|
4494
|
+
const isMobile = useIsMobile(mobileBreakpoint);
|
|
4495
|
+
const [openMobile, setOpenMobile] = useState9(false);
|
|
4496
|
+
const isControlled = openProp !== void 0;
|
|
4497
|
+
const [openInternal, setOpenInternal] = useState9(defaultOpen);
|
|
4498
|
+
const open = isControlled ? openProp : openInternal;
|
|
4499
|
+
const setOpen = useCallback3(
|
|
4500
|
+
(value2) => {
|
|
4501
|
+
if (!isControlled) setOpenInternal(value2);
|
|
4502
|
+
onOpenChange?.(value2);
|
|
4503
|
+
},
|
|
4504
|
+
[isControlled, onOpenChange]
|
|
4505
|
+
);
|
|
4506
|
+
const toggleSidebar = useCallback3(() => {
|
|
4507
|
+
if (isMobile) {
|
|
4508
|
+
setOpenMobile((v) => !v);
|
|
4509
|
+
return;
|
|
4510
|
+
}
|
|
4511
|
+
if (isControlled) {
|
|
4512
|
+
onOpenChange?.(!open);
|
|
4513
|
+
} else {
|
|
4514
|
+
setOpenInternal((v) => !v);
|
|
4515
|
+
}
|
|
4516
|
+
}, [isMobile, isControlled, onOpenChange, open]);
|
|
4517
|
+
useEffect2(() => {
|
|
4518
|
+
if (!keyboardShortcut) return;
|
|
4519
|
+
const onKeyDown = (e) => {
|
|
4520
|
+
if (e.key.toLowerCase() === "b" && (e.metaKey || e.ctrlKey)) {
|
|
4521
|
+
e.preventDefault();
|
|
4522
|
+
toggleSidebar();
|
|
4523
|
+
}
|
|
4524
|
+
};
|
|
4525
|
+
window.addEventListener("keydown", onKeyDown);
|
|
4526
|
+
return () => window.removeEventListener("keydown", onKeyDown);
|
|
4527
|
+
}, [keyboardShortcut, toggleSidebar]);
|
|
4528
|
+
const state = open ? "expanded" : "collapsed";
|
|
4529
|
+
const value = useMemo3(
|
|
4530
|
+
() => ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }),
|
|
4531
|
+
[state, open, setOpen, openMobile, isMobile, toggleSidebar]
|
|
4532
|
+
);
|
|
4533
|
+
return /* @__PURE__ */ jsx40(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx40(
|
|
4534
|
+
"div",
|
|
4535
|
+
{
|
|
4536
|
+
"data-slot": "sidebar-wrapper",
|
|
4537
|
+
className: cn("ddga-sidebar-wrapper", className),
|
|
4538
|
+
style,
|
|
4539
|
+
...props,
|
|
4540
|
+
children
|
|
4541
|
+
}
|
|
4542
|
+
) });
|
|
4543
|
+
}
|
|
4544
|
+
function Sidebar({
|
|
4545
|
+
variant = "sidebar",
|
|
4546
|
+
collapsible = "icon",
|
|
4547
|
+
side = "start",
|
|
4548
|
+
className,
|
|
4549
|
+
children,
|
|
4550
|
+
"aria-label": ariaLabel = "Sidebar",
|
|
4551
|
+
...props
|
|
4552
|
+
}) {
|
|
4553
|
+
const { isMobile, openMobile, setOpenMobile, state } = useSidebar();
|
|
4554
|
+
if (isMobile) {
|
|
4555
|
+
return /* @__PURE__ */ jsx40(Drawer, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsx40(
|
|
4556
|
+
DrawerContent,
|
|
4557
|
+
{
|
|
4558
|
+
side,
|
|
4559
|
+
size: "sm",
|
|
4560
|
+
"aria-label": ariaLabel,
|
|
4561
|
+
"data-mobile": "true",
|
|
4562
|
+
"data-variant": variant,
|
|
4563
|
+
"data-side": side,
|
|
4564
|
+
className: cn("ddga-sidebar", "ddga-sidebar--mobile", className),
|
|
4565
|
+
children
|
|
4566
|
+
}
|
|
4567
|
+
) });
|
|
4568
|
+
}
|
|
4569
|
+
return /* @__PURE__ */ jsx40(
|
|
4570
|
+
"aside",
|
|
4571
|
+
{
|
|
4572
|
+
"data-slot": "sidebar",
|
|
4573
|
+
"aria-label": ariaLabel,
|
|
4574
|
+
"data-state": state,
|
|
4575
|
+
"data-collapsible": collapsible,
|
|
4576
|
+
"data-variant": variant,
|
|
4577
|
+
"data-side": side,
|
|
4578
|
+
className: cn("ddga-sidebar", className),
|
|
4579
|
+
...props,
|
|
4580
|
+
children
|
|
4581
|
+
}
|
|
4582
|
+
);
|
|
4583
|
+
}
|
|
4584
|
+
function SidebarTrigger({
|
|
4585
|
+
asChild,
|
|
4586
|
+
className,
|
|
4587
|
+
onClick,
|
|
4588
|
+
children,
|
|
4589
|
+
"aria-label": ariaLabel = "Toggle sidebar",
|
|
4590
|
+
...props
|
|
4591
|
+
}) {
|
|
4592
|
+
const { toggleSidebar, open, openMobile, isMobile } = useSidebar();
|
|
4593
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "button";
|
|
4594
|
+
return /* @__PURE__ */ jsx40(
|
|
4595
|
+
Comp,
|
|
4596
|
+
{
|
|
4597
|
+
type: asChild ? void 0 : "button",
|
|
4598
|
+
"data-slot": "sidebar-trigger",
|
|
4599
|
+
"aria-label": asChild ? void 0 : ariaLabel,
|
|
4600
|
+
"aria-haspopup": isMobile ? "dialog" : void 0,
|
|
4601
|
+
"aria-expanded": isMobile ? openMobile : open,
|
|
4602
|
+
className: cn("ddga-sidebar__trigger", className),
|
|
4603
|
+
onClick: (e) => {
|
|
4604
|
+
onClick?.(e);
|
|
4605
|
+
toggleSidebar();
|
|
4606
|
+
},
|
|
4607
|
+
...props,
|
|
4608
|
+
children: children ?? /* @__PURE__ */ jsx40(PanelLeft, { "aria-hidden": "true" })
|
|
4609
|
+
}
|
|
4610
|
+
);
|
|
4611
|
+
}
|
|
4612
|
+
function SidebarRail({
|
|
4613
|
+
className,
|
|
4614
|
+
"aria-label": ariaLabel = "Toggle sidebar",
|
|
4615
|
+
...props
|
|
4616
|
+
}) {
|
|
4617
|
+
const { toggleSidebar } = useSidebar();
|
|
4618
|
+
return /* @__PURE__ */ jsx40(
|
|
4619
|
+
"button",
|
|
4620
|
+
{
|
|
4621
|
+
type: "button",
|
|
4622
|
+
"data-slot": "sidebar-rail",
|
|
4623
|
+
"aria-label": ariaLabel,
|
|
4624
|
+
title: ariaLabel,
|
|
4625
|
+
tabIndex: -1,
|
|
4626
|
+
className: cn("ddga-sidebar__rail", className),
|
|
4627
|
+
onClick: toggleSidebar,
|
|
4628
|
+
...props
|
|
4629
|
+
}
|
|
4630
|
+
);
|
|
4631
|
+
}
|
|
4632
|
+
function SidebarInset({ asChild, className, ...props }) {
|
|
4633
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "main";
|
|
4634
|
+
return /* @__PURE__ */ jsx40(Comp, { "data-slot": "sidebar-inset", className: cn("ddga-sidebar-inset", className), ...props });
|
|
4635
|
+
}
|
|
4636
|
+
function SidebarHeader({ asChild, className, ...props }) {
|
|
4637
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "div";
|
|
4638
|
+
return /* @__PURE__ */ jsx40(Comp, { "data-slot": "sidebar-header", className: cn("ddga-sidebar__header", className), ...props });
|
|
4639
|
+
}
|
|
4640
|
+
function SidebarContent({ asChild, className, ...props }) {
|
|
4641
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "div";
|
|
4642
|
+
return /* @__PURE__ */ jsx40(
|
|
4643
|
+
Comp,
|
|
4644
|
+
{
|
|
4645
|
+
"data-slot": "sidebar-content",
|
|
4646
|
+
className: cn("ddga-sidebar__content", className),
|
|
4647
|
+
...props
|
|
4648
|
+
}
|
|
4649
|
+
);
|
|
4650
|
+
}
|
|
4651
|
+
function SidebarFooter({ asChild, className, ...props }) {
|
|
4652
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "div";
|
|
4653
|
+
return /* @__PURE__ */ jsx40(Comp, { "data-slot": "sidebar-footer", className: cn("ddga-sidebar__footer", className), ...props });
|
|
4654
|
+
}
|
|
4655
|
+
function SidebarSeparator({ className, ...props }) {
|
|
4656
|
+
return /* @__PURE__ */ jsx40(
|
|
4657
|
+
"hr",
|
|
4658
|
+
{
|
|
4659
|
+
"data-slot": "sidebar-separator",
|
|
4660
|
+
className: cn("ddga-sidebar__separator", className),
|
|
4661
|
+
...props
|
|
4662
|
+
}
|
|
4663
|
+
);
|
|
4664
|
+
}
|
|
4665
|
+
|
|
4666
|
+
// src/components/Sidebar/SidebarGroup.tsx
|
|
4667
|
+
import { Slot as SlotPrimitive11 } from "radix-ui";
|
|
4668
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
4669
|
+
function SidebarGroup({ asChild, className, ...props }) {
|
|
4670
|
+
const Comp = asChild ? SlotPrimitive11.Slot : "div";
|
|
4671
|
+
return /* @__PURE__ */ jsx41(
|
|
4672
|
+
Comp,
|
|
4673
|
+
{
|
|
4674
|
+
"data-slot": "sidebar-group",
|
|
4675
|
+
role: "group",
|
|
4676
|
+
className: cn("ddga-sidebar__group", className),
|
|
4677
|
+
...props
|
|
4678
|
+
}
|
|
4679
|
+
);
|
|
4680
|
+
}
|
|
4681
|
+
function SidebarGroupLabel({ asChild, className, ...props }) {
|
|
4682
|
+
const Comp = asChild ? SlotPrimitive11.Slot : "div";
|
|
4683
|
+
return /* @__PURE__ */ jsx41(
|
|
4684
|
+
Comp,
|
|
4685
|
+
{
|
|
4686
|
+
"data-slot": "sidebar-group-label",
|
|
4687
|
+
className: cn("ddga-sidebar__group-label", className),
|
|
4688
|
+
...props
|
|
4689
|
+
}
|
|
4690
|
+
);
|
|
4691
|
+
}
|
|
4692
|
+
function SidebarGroupAction({ asChild, className, ...props }) {
|
|
4693
|
+
const Comp = asChild ? SlotPrimitive11.Slot : "button";
|
|
4694
|
+
return /* @__PURE__ */ jsx41(
|
|
4695
|
+
Comp,
|
|
4696
|
+
{
|
|
4697
|
+
type: asChild ? void 0 : "button",
|
|
4698
|
+
"data-slot": "sidebar-group-action",
|
|
4699
|
+
className: cn("ddga-sidebar__group-action", className),
|
|
4700
|
+
...props
|
|
4701
|
+
}
|
|
4702
|
+
);
|
|
4703
|
+
}
|
|
4704
|
+
function SidebarGroupContent({ asChild, className, ...props }) {
|
|
4705
|
+
const Comp = asChild ? SlotPrimitive11.Slot : "div";
|
|
4706
|
+
return /* @__PURE__ */ jsx41(
|
|
4707
|
+
Comp,
|
|
4708
|
+
{
|
|
4709
|
+
"data-slot": "sidebar-group-content",
|
|
4710
|
+
className: cn("ddga-sidebar__group-content", className),
|
|
4711
|
+
...props
|
|
4712
|
+
}
|
|
4713
|
+
);
|
|
4714
|
+
}
|
|
4715
|
+
|
|
4716
|
+
// src/components/Sidebar/SidebarMenu.tsx
|
|
4717
|
+
import { Slot as SlotPrimitive12 } from "radix-ui";
|
|
4718
|
+
import { cva as cva37 } from "class-variance-authority";
|
|
4719
|
+
|
|
4720
|
+
// src/hooks/useDir.ts
|
|
4721
|
+
function useDir() {
|
|
4722
|
+
return useDga().dir;
|
|
4723
|
+
}
|
|
4724
|
+
|
|
4725
|
+
// src/components/Sidebar/SidebarMenu.tsx
|
|
4726
|
+
import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
4727
|
+
function SidebarMenu({ className, ...props }) {
|
|
4728
|
+
return /* @__PURE__ */ jsx42("ul", { "data-slot": "sidebar-menu", className: cn("ddga-sidebar__menu", className), ...props });
|
|
4729
|
+
}
|
|
4730
|
+
function SidebarMenuItem({ className, ...props }) {
|
|
4731
|
+
return /* @__PURE__ */ jsx42(
|
|
4732
|
+
"li",
|
|
4733
|
+
{
|
|
4734
|
+
"data-slot": "sidebar-menu-item",
|
|
4735
|
+
className: cn("ddga-sidebar__menu-item", className),
|
|
4736
|
+
...props
|
|
4737
|
+
}
|
|
4738
|
+
);
|
|
4739
|
+
}
|
|
4740
|
+
var sidebarMenuButtonVariants = cva37("ddga-sidebar__menu-button", {
|
|
4741
|
+
variants: {
|
|
4742
|
+
size: {
|
|
4743
|
+
sm: "ddga-sidebar__menu-button--sm",
|
|
4744
|
+
md: "ddga-sidebar__menu-button--md",
|
|
4745
|
+
lg: "ddga-sidebar__menu-button--lg"
|
|
4746
|
+
}
|
|
4747
|
+
},
|
|
4748
|
+
defaultVariants: { size: "md" }
|
|
4749
|
+
});
|
|
4750
|
+
function SidebarMenuButton({
|
|
4751
|
+
asChild,
|
|
4752
|
+
isActive,
|
|
4753
|
+
size,
|
|
4754
|
+
tooltip,
|
|
4755
|
+
className,
|
|
4756
|
+
...props
|
|
4757
|
+
}) {
|
|
4758
|
+
const { state, isMobile } = useSidebar();
|
|
4759
|
+
const dir = useDir();
|
|
4760
|
+
const Comp = asChild ? SlotPrimitive12.Slot : "button";
|
|
4761
|
+
const button = /* @__PURE__ */ jsx42(
|
|
4762
|
+
Comp,
|
|
4763
|
+
{
|
|
4764
|
+
type: asChild ? void 0 : "button",
|
|
4765
|
+
"data-slot": "sidebar-menu-button",
|
|
4766
|
+
"data-active": isActive || void 0,
|
|
4767
|
+
"data-size": size ?? "md",
|
|
4768
|
+
"aria-current": isActive ? "page" : void 0,
|
|
4769
|
+
className: cn(sidebarMenuButtonVariants({ size }), className),
|
|
4770
|
+
...props
|
|
4771
|
+
}
|
|
4772
|
+
);
|
|
4773
|
+
if (!tooltip || state !== "collapsed" || isMobile) {
|
|
4774
|
+
return button;
|
|
4775
|
+
}
|
|
4776
|
+
return /* @__PURE__ */ jsxs30(Tooltip, { children: [
|
|
4777
|
+
/* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42("span", { "data-slot": "tooltip-trigger", style: { display: "contents" }, children: button }) }),
|
|
4778
|
+
/* @__PURE__ */ jsx42(TooltipContent, { side: dir === "rtl" ? "left" : "right", children: tooltip })
|
|
4779
|
+
] });
|
|
4780
|
+
}
|
|
4781
|
+
function SidebarMenuAction({ asChild, showOnHover, className, ...props }) {
|
|
4782
|
+
const Comp = asChild ? SlotPrimitive12.Slot : "button";
|
|
4783
|
+
return /* @__PURE__ */ jsx42(
|
|
4784
|
+
Comp,
|
|
4785
|
+
{
|
|
4786
|
+
type: asChild ? void 0 : "button",
|
|
4787
|
+
"data-slot": "sidebar-menu-action",
|
|
4788
|
+
"data-show-on-hover": showOnHover || void 0,
|
|
4789
|
+
className: cn("ddga-sidebar__menu-action", className),
|
|
4790
|
+
...props
|
|
4791
|
+
}
|
|
4792
|
+
);
|
|
4793
|
+
}
|
|
4794
|
+
function SidebarMenuBadge({ className, ...props }) {
|
|
4795
|
+
return /* @__PURE__ */ jsx42(
|
|
4796
|
+
"span",
|
|
4797
|
+
{
|
|
4798
|
+
"data-slot": "sidebar-menu-badge",
|
|
4799
|
+
className: cn("ddga-sidebar__menu-badge", className),
|
|
4800
|
+
...props
|
|
4801
|
+
}
|
|
4802
|
+
);
|
|
4803
|
+
}
|
|
4804
|
+
function SidebarMenuSkeleton({ showIcon, className, ...props }) {
|
|
4805
|
+
return /* @__PURE__ */ jsxs30(
|
|
4806
|
+
"div",
|
|
4807
|
+
{
|
|
4808
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
4809
|
+
className: cn("ddga-sidebar__menu-skeleton", className),
|
|
4810
|
+
...props,
|
|
4811
|
+
children: [
|
|
4812
|
+
showIcon ? /* @__PURE__ */ jsx42(Skeleton, { shape: "circle", width: "1rem", height: "1rem" }) : null,
|
|
4813
|
+
/* @__PURE__ */ jsx42(Skeleton, { shape: "text", className: "ddga-sidebar__menu-skeleton-text" })
|
|
4814
|
+
]
|
|
4815
|
+
}
|
|
4816
|
+
);
|
|
4817
|
+
}
|
|
4818
|
+
function SidebarMenuSub({ className, ...props }) {
|
|
4819
|
+
return /* @__PURE__ */ jsx42(
|
|
4820
|
+
"ul",
|
|
4821
|
+
{
|
|
4822
|
+
"data-slot": "sidebar-menu-sub",
|
|
4823
|
+
className: cn("ddga-sidebar__menu-sub", className),
|
|
4824
|
+
...props
|
|
4825
|
+
}
|
|
4826
|
+
);
|
|
4827
|
+
}
|
|
4828
|
+
function SidebarMenuSubItem({ className, ...props }) {
|
|
4829
|
+
return /* @__PURE__ */ jsx42(
|
|
4830
|
+
"li",
|
|
4831
|
+
{
|
|
4832
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
4833
|
+
className: cn("ddga-sidebar__menu-sub-item", className),
|
|
4834
|
+
...props
|
|
4835
|
+
}
|
|
4836
|
+
);
|
|
4837
|
+
}
|
|
4838
|
+
var sidebarMenuSubButtonVariants = cva37("ddga-sidebar__menu-sub-button", {
|
|
4839
|
+
variants: {
|
|
4840
|
+
size: {
|
|
4841
|
+
sm: "ddga-sidebar__menu-sub-button--sm",
|
|
4842
|
+
md: "ddga-sidebar__menu-sub-button--md"
|
|
4843
|
+
}
|
|
4844
|
+
},
|
|
4845
|
+
defaultVariants: { size: "md" }
|
|
4846
|
+
});
|
|
4847
|
+
function SidebarMenuSubButton({
|
|
4848
|
+
asChild,
|
|
4849
|
+
isActive,
|
|
4850
|
+
size,
|
|
4851
|
+
className,
|
|
4852
|
+
...props
|
|
4853
|
+
}) {
|
|
4854
|
+
const Comp = asChild ? SlotPrimitive12.Slot : "a";
|
|
4855
|
+
return /* @__PURE__ */ jsx42(
|
|
4856
|
+
Comp,
|
|
4857
|
+
{
|
|
4858
|
+
"data-slot": "sidebar-menu-sub-button",
|
|
4859
|
+
"data-active": isActive || void 0,
|
|
4860
|
+
"data-size": size ?? "md",
|
|
4861
|
+
"aria-current": isActive ? "page" : void 0,
|
|
4862
|
+
className: cn(sidebarMenuSubButtonVariants({ size }), className),
|
|
4863
|
+
...props
|
|
4864
|
+
}
|
|
4865
|
+
);
|
|
4866
|
+
}
|
|
4867
|
+
|
|
4868
|
+
// src/components/ScrollArea/ScrollArea.tsx
|
|
4869
|
+
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
|
|
4870
|
+
import { cva as cva38 } from "class-variance-authority";
|
|
4871
|
+
import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
4872
|
+
var scrollAreaVariants = cva38("ddga-scroll-area", {
|
|
4873
|
+
variants: {
|
|
4874
|
+
orientation: {
|
|
4875
|
+
vertical: "ddga-scroll-area--vertical",
|
|
4876
|
+
horizontal: "ddga-scroll-area--horizontal",
|
|
4877
|
+
both: "ddga-scroll-area--both"
|
|
4878
|
+
}
|
|
4879
|
+
},
|
|
4880
|
+
defaultVariants: {
|
|
4881
|
+
orientation: "vertical"
|
|
4882
|
+
}
|
|
4883
|
+
});
|
|
4884
|
+
function warnMissingLabel(ariaLabel, ariaLabelledby) {
|
|
4885
|
+
if (process.env.NODE_ENV === "production") return;
|
|
4886
|
+
if (ariaLabel || ariaLabelledby) return;
|
|
4887
|
+
console.warn(
|
|
4888
|
+
"[dga/ScrollArea] <ScrollArea> has no accessible name. The scroll viewport is keyboard-focusable; pass `aria-label` or `aria-labelledby` so screen-reader users know what region they are scrolling. If the content is itself focusable (e.g. a list of links) and you do not want a labelled region, pass `viewportProps={{ tabIndex: -1 }}`."
|
|
4889
|
+
);
|
|
4890
|
+
}
|
|
4891
|
+
function ScrollArea({
|
|
4892
|
+
className,
|
|
4893
|
+
orientation = "vertical",
|
|
4894
|
+
type = "hover",
|
|
4895
|
+
scrollHideDelay = 600,
|
|
4896
|
+
viewportRef,
|
|
4897
|
+
viewportProps,
|
|
4898
|
+
children,
|
|
4899
|
+
"aria-label": ariaLabel,
|
|
4900
|
+
"aria-labelledby": ariaLabelledby,
|
|
4901
|
+
...props
|
|
4902
|
+
}) {
|
|
4903
|
+
warnMissingLabel(ariaLabel, ariaLabelledby);
|
|
4904
|
+
const hasLabel = Boolean(ariaLabel || ariaLabelledby);
|
|
4905
|
+
const showVertical = orientation === "vertical" || orientation === "both";
|
|
4906
|
+
const showHorizontal = orientation === "horizontal" || orientation === "both";
|
|
4907
|
+
const { className: viewportClassName, ...restViewportProps } = viewportProps ?? {};
|
|
4908
|
+
return /* @__PURE__ */ jsxs31(
|
|
4909
|
+
ScrollAreaPrimitive.Root,
|
|
4910
|
+
{
|
|
4911
|
+
"data-slot": "scroll-area",
|
|
4912
|
+
type,
|
|
4913
|
+
scrollHideDelay,
|
|
4914
|
+
className: cn(scrollAreaVariants({ orientation }), className),
|
|
4915
|
+
...props,
|
|
4916
|
+
children: [
|
|
4917
|
+
/* @__PURE__ */ jsx43(
|
|
4918
|
+
ScrollAreaPrimitive.Viewport,
|
|
4919
|
+
{
|
|
4920
|
+
"data-slot": "scroll-area-viewport",
|
|
4921
|
+
className: cn("ddga-scroll-area__viewport", viewportClassName),
|
|
4922
|
+
ref: viewportRef,
|
|
4923
|
+
tabIndex: 0,
|
|
4924
|
+
role: hasLabel ? "region" : void 0,
|
|
4925
|
+
"aria-label": ariaLabel,
|
|
4926
|
+
"aria-labelledby": ariaLabelledby,
|
|
4927
|
+
...restViewportProps,
|
|
4928
|
+
children
|
|
4929
|
+
}
|
|
4930
|
+
),
|
|
4931
|
+
showVertical ? /* @__PURE__ */ jsx43(
|
|
4932
|
+
ScrollAreaPrimitive.Scrollbar,
|
|
4933
|
+
{
|
|
4934
|
+
"data-slot": "scroll-area-scrollbar",
|
|
4935
|
+
orientation: "vertical",
|
|
4936
|
+
className: "ddga-scroll-area__scrollbar",
|
|
4937
|
+
children: /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Thumb, { className: "ddga-scroll-area__thumb" })
|
|
4938
|
+
}
|
|
4939
|
+
) : null,
|
|
4940
|
+
showHorizontal ? /* @__PURE__ */ jsx43(
|
|
4941
|
+
ScrollAreaPrimitive.Scrollbar,
|
|
4942
|
+
{
|
|
4943
|
+
"data-slot": "scroll-area-scrollbar",
|
|
4944
|
+
orientation: "horizontal",
|
|
4945
|
+
className: "ddga-scroll-area__scrollbar",
|
|
4946
|
+
children: /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Thumb, { className: "ddga-scroll-area__thumb" })
|
|
4947
|
+
}
|
|
4948
|
+
) : null,
|
|
4949
|
+
orientation === "both" ? /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Corner, { className: "ddga-scroll-area__corner" }) : null
|
|
4950
|
+
]
|
|
4951
|
+
}
|
|
4952
|
+
);
|
|
4953
|
+
}
|
|
4954
|
+
|
|
4955
|
+
// src/components/Menubar/Menubar.tsx
|
|
4956
|
+
import { useContext as useContext11 } from "react";
|
|
4957
|
+
import { Menubar as MenubarPrimitive } from "radix-ui";
|
|
4958
|
+
import { cva as cva39 } from "class-variance-authority";
|
|
4959
|
+
import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
4960
|
+
var menubarContentVariants = cva39("ddga-menubar-menu", {
|
|
4961
|
+
variants: {
|
|
4962
|
+
size: {
|
|
4963
|
+
sm: "ddga-menubar-menu--sm",
|
|
4964
|
+
md: "ddga-menubar-menu--md"
|
|
4965
|
+
}
|
|
4966
|
+
},
|
|
4967
|
+
defaultVariants: {
|
|
4968
|
+
size: "md"
|
|
4969
|
+
}
|
|
4970
|
+
});
|
|
4971
|
+
var menubarTriggerVariants = cva39("ddga-menubar__trigger", {
|
|
4972
|
+
variants: {
|
|
4973
|
+
variant: {
|
|
4974
|
+
default: "ddga-menubar__trigger--default",
|
|
4975
|
+
outline: "ddga-menubar__trigger--outline"
|
|
4976
|
+
}
|
|
4977
|
+
},
|
|
4978
|
+
defaultVariants: {
|
|
4979
|
+
variant: "default"
|
|
4980
|
+
}
|
|
4981
|
+
});
|
|
4982
|
+
function Menubar({ className, ...props }) {
|
|
4983
|
+
return /* @__PURE__ */ jsx44(
|
|
4984
|
+
MenubarPrimitive.Root,
|
|
4985
|
+
{
|
|
4986
|
+
"data-slot": "menubar",
|
|
4987
|
+
className: cn("ddga-menubar", className),
|
|
4988
|
+
...props
|
|
4989
|
+
}
|
|
4990
|
+
);
|
|
4991
|
+
}
|
|
4992
|
+
function MenubarMenu(props) {
|
|
4993
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.Menu, { ...props });
|
|
4994
|
+
}
|
|
4995
|
+
function MenubarTrigger({ variant, className, ...props }) {
|
|
4996
|
+
return /* @__PURE__ */ jsx44(
|
|
4997
|
+
MenubarPrimitive.Trigger,
|
|
4998
|
+
{
|
|
4999
|
+
"data-slot": "menubar-trigger",
|
|
5000
|
+
"data-variant": variant ?? "default",
|
|
5001
|
+
className: cn(menubarTriggerVariants({ variant }), className),
|
|
5002
|
+
...props
|
|
5003
|
+
}
|
|
5004
|
+
);
|
|
5005
|
+
}
|
|
5006
|
+
function MenubarContent({ size, className, sideOffset = 6, ...props }) {
|
|
5007
|
+
const ctx = useContext11(DgaContext);
|
|
5008
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
5009
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx44(
|
|
5010
|
+
MenubarPrimitive.Content,
|
|
5011
|
+
{
|
|
5012
|
+
"data-slot": "menubar-content",
|
|
5013
|
+
sideOffset,
|
|
5014
|
+
className: cn(menubarContentVariants({ size }), className),
|
|
5015
|
+
...props
|
|
5016
|
+
}
|
|
5017
|
+
) });
|
|
5018
|
+
}
|
|
5019
|
+
function MenubarItem({
|
|
5020
|
+
className,
|
|
5021
|
+
destructive,
|
|
5022
|
+
startIcon,
|
|
5023
|
+
shortcut,
|
|
5024
|
+
children,
|
|
5025
|
+
...props
|
|
5026
|
+
}) {
|
|
5027
|
+
return /* @__PURE__ */ jsxs32(
|
|
5028
|
+
MenubarPrimitive.Item,
|
|
5029
|
+
{
|
|
5030
|
+
"data-slot": "menubar-item",
|
|
5031
|
+
"data-destructive": destructive ? "" : void 0,
|
|
5032
|
+
className: cn("ddga-menubar-menu__item", className),
|
|
5033
|
+
...props,
|
|
5034
|
+
children: [
|
|
5035
|
+
startIcon ? /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
|
|
5036
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children }),
|
|
5037
|
+
shortcut ? /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__shortcut", "aria-hidden": "true", children: shortcut }) : null
|
|
5038
|
+
]
|
|
5039
|
+
}
|
|
5040
|
+
);
|
|
5041
|
+
}
|
|
5042
|
+
function MenubarCheckboxItem({
|
|
5043
|
+
className,
|
|
5044
|
+
children,
|
|
5045
|
+
onSelect,
|
|
5046
|
+
...props
|
|
5047
|
+
}) {
|
|
5048
|
+
const handleSelect = onSelect ?? ((event) => {
|
|
5049
|
+
event.preventDefault();
|
|
5050
|
+
});
|
|
5051
|
+
return /* @__PURE__ */ jsxs32(
|
|
5052
|
+
MenubarPrimitive.CheckboxItem,
|
|
5053
|
+
{
|
|
5054
|
+
"data-slot": "menubar-checkbox-item",
|
|
5055
|
+
className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--checkable", className),
|
|
5056
|
+
onSelect: handleSelect,
|
|
5057
|
+
...props,
|
|
5058
|
+
children: [
|
|
5059
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx44(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx44(Check, { className: "ddga-menubar-menu__indicator-icon" }) }) }),
|
|
5060
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children })
|
|
5061
|
+
]
|
|
5062
|
+
}
|
|
5063
|
+
);
|
|
5064
|
+
}
|
|
5065
|
+
function MenubarRadioGroup(props) {
|
|
5066
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
|
|
5067
|
+
}
|
|
5068
|
+
function MenubarRadioItem({ className, children, onSelect, ...props }) {
|
|
5069
|
+
const handleSelect = onSelect ?? ((event) => {
|
|
5070
|
+
event.preventDefault();
|
|
5071
|
+
});
|
|
5072
|
+
return /* @__PURE__ */ jsxs32(
|
|
5073
|
+
MenubarPrimitive.RadioItem,
|
|
5074
|
+
{
|
|
5075
|
+
"data-slot": "menubar-radio-item",
|
|
5076
|
+
className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--checkable", className),
|
|
5077
|
+
onSelect: handleSelect,
|
|
5078
|
+
...props,
|
|
5079
|
+
children: [
|
|
5080
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx44(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__radio-dot" }) }) }),
|
|
5081
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children })
|
|
5082
|
+
]
|
|
5083
|
+
}
|
|
5084
|
+
);
|
|
5085
|
+
}
|
|
5086
|
+
function MenubarLabel({ className, ...props }) {
|
|
5087
|
+
return /* @__PURE__ */ jsx44(
|
|
5088
|
+
MenubarPrimitive.Label,
|
|
5089
|
+
{
|
|
5090
|
+
"data-slot": "menubar-label",
|
|
5091
|
+
className: cn("ddga-menubar-menu__group-label", className),
|
|
5092
|
+
...props
|
|
5093
|
+
}
|
|
5094
|
+
);
|
|
5095
|
+
}
|
|
5096
|
+
function MenubarSeparator({ className, ...props }) {
|
|
5097
|
+
return /* @__PURE__ */ jsx44(
|
|
5098
|
+
MenubarPrimitive.Separator,
|
|
5099
|
+
{
|
|
5100
|
+
"data-slot": "menubar-separator",
|
|
5101
|
+
className: cn("ddga-menubar-menu__separator", className),
|
|
5102
|
+
...props
|
|
5103
|
+
}
|
|
5104
|
+
);
|
|
5105
|
+
}
|
|
5106
|
+
function MenubarGroup(props) {
|
|
5107
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.Group, { "data-slot": "menubar-group", ...props });
|
|
5108
|
+
}
|
|
5109
|
+
function MenubarSub(props) {
|
|
5110
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.Sub, { ...props });
|
|
5111
|
+
}
|
|
5112
|
+
function MenubarSubTrigger({ className, startIcon, children, ...props }) {
|
|
5113
|
+
return /* @__PURE__ */ jsxs32(
|
|
5114
|
+
MenubarPrimitive.SubTrigger,
|
|
5115
|
+
{
|
|
5116
|
+
"data-slot": "menubar-sub-trigger",
|
|
5117
|
+
className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--sub", className),
|
|
5118
|
+
...props,
|
|
5119
|
+
children: [
|
|
5120
|
+
startIcon ? /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
|
|
5121
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children }),
|
|
5122
|
+
/* @__PURE__ */ jsx44(ChevronRight, { className: "ddga-menubar-menu__sub-chevron", "aria-hidden": "true" })
|
|
5123
|
+
]
|
|
5124
|
+
}
|
|
5125
|
+
);
|
|
5126
|
+
}
|
|
5127
|
+
function MenubarSubContent({ size, className, ...props }) {
|
|
5128
|
+
const ctx = useContext11(DgaContext);
|
|
5129
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
5130
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx44(
|
|
5131
|
+
MenubarPrimitive.SubContent,
|
|
5132
|
+
{
|
|
5133
|
+
"data-slot": "menubar-sub-content",
|
|
5134
|
+
className: cn(menubarContentVariants({ size }), className),
|
|
5135
|
+
...props
|
|
5136
|
+
}
|
|
5137
|
+
) });
|
|
5138
|
+
}
|
|
5139
|
+
|
|
5140
|
+
// src/components/Timeline/Timeline.tsx
|
|
5141
|
+
import { cva as cva40 } from "class-variance-authority";
|
|
5142
|
+
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
5143
|
+
var timelineVariants = cva40("ddga-timeline", {
|
|
5144
|
+
variants: {
|
|
5145
|
+
size: {
|
|
5146
|
+
sm: "ddga-timeline--sm",
|
|
5147
|
+
md: "ddga-timeline--md"
|
|
5148
|
+
},
|
|
5149
|
+
orientation: {
|
|
5150
|
+
vertical: "ddga-timeline--vertical",
|
|
5151
|
+
horizontal: "ddga-timeline--horizontal"
|
|
5152
|
+
}
|
|
5153
|
+
},
|
|
5154
|
+
defaultVariants: {
|
|
5155
|
+
size: "md",
|
|
5156
|
+
orientation: "vertical"
|
|
5157
|
+
}
|
|
5158
|
+
});
|
|
5159
|
+
var timelineMarkerVariants = cva40("ddga-timeline__marker", {
|
|
5160
|
+
variants: {
|
|
5161
|
+
status: {
|
|
5162
|
+
default: "ddga-timeline__marker--default",
|
|
5163
|
+
success: "ddga-timeline__marker--success",
|
|
5164
|
+
error: "ddga-timeline__marker--error",
|
|
5165
|
+
warning: "ddga-timeline__marker--warning",
|
|
5166
|
+
info: "ddga-timeline__marker--info"
|
|
5167
|
+
}
|
|
5168
|
+
},
|
|
5169
|
+
defaultVariants: {
|
|
5170
|
+
status: "default"
|
|
5171
|
+
}
|
|
5172
|
+
});
|
|
5173
|
+
function Timeline({ size, orientation, className, ...props }) {
|
|
5174
|
+
return /* @__PURE__ */ jsx45(
|
|
5175
|
+
"ol",
|
|
5176
|
+
{
|
|
5177
|
+
"data-slot": "timeline",
|
|
5178
|
+
"data-orientation": orientation ?? "vertical",
|
|
5179
|
+
className: cn(timelineVariants({ size, orientation }), className),
|
|
5180
|
+
...props
|
|
5181
|
+
}
|
|
5182
|
+
);
|
|
5183
|
+
}
|
|
5184
|
+
function TimelineItem({ className, ...props }) {
|
|
5185
|
+
return /* @__PURE__ */ jsx45("li", { "data-slot": "timeline-item", className: cn("ddga-timeline__item", className), ...props });
|
|
5186
|
+
}
|
|
5187
|
+
function TimelineMarker({ status, className, children, ...props }) {
|
|
5188
|
+
const resolved = status ?? "default";
|
|
5189
|
+
const reached = resolved !== "default";
|
|
5190
|
+
return /* @__PURE__ */ jsx45(
|
|
5191
|
+
"span",
|
|
5192
|
+
{
|
|
5193
|
+
"aria-hidden": "true",
|
|
5194
|
+
"data-slot": "timeline-marker",
|
|
5195
|
+
"data-status": resolved,
|
|
5196
|
+
"data-reached": reached ? "" : void 0,
|
|
5197
|
+
className: cn(timelineMarkerVariants({ status }), className),
|
|
5198
|
+
...props,
|
|
5199
|
+
children: children ?? /* @__PURE__ */ jsx45("span", { className: "ddga-timeline__dot" })
|
|
5200
|
+
}
|
|
5201
|
+
);
|
|
5202
|
+
}
|
|
5203
|
+
function TimelineContent({ className, ...props }) {
|
|
5204
|
+
return /* @__PURE__ */ jsx45(
|
|
5205
|
+
"div",
|
|
5206
|
+
{
|
|
5207
|
+
"data-slot": "timeline-content",
|
|
5208
|
+
className: cn("ddga-timeline__content", className),
|
|
5209
|
+
...props
|
|
5210
|
+
}
|
|
5211
|
+
);
|
|
5212
|
+
}
|
|
5213
|
+
function TimelineTitle({ className, ...props }) {
|
|
5214
|
+
return /* @__PURE__ */ jsx45("span", { "data-slot": "timeline-title", className: cn("ddga-timeline__title", className), ...props });
|
|
5215
|
+
}
|
|
5216
|
+
function TimelineDescription({ className, ...props }) {
|
|
5217
|
+
return /* @__PURE__ */ jsx45(
|
|
5218
|
+
"span",
|
|
5219
|
+
{
|
|
5220
|
+
"data-slot": "timeline-description",
|
|
5221
|
+
className: cn("ddga-timeline__description", className),
|
|
5222
|
+
...props
|
|
5223
|
+
}
|
|
5224
|
+
);
|
|
5225
|
+
}
|
|
5226
|
+
function TimelineTime({ className, ...props }) {
|
|
5227
|
+
return /* @__PURE__ */ jsx45("time", { "data-slot": "timeline-time", className: cn("ddga-timeline__time", className), ...props });
|
|
5228
|
+
}
|
|
5229
|
+
|
|
5230
|
+
// src/providers/DgaProvider.tsx
|
|
5231
|
+
import { useState as useState10, useMemo as useMemo4, useContext as useContext12, useEffect as useEffect3, useRef as useRef3 } from "react";
|
|
5232
|
+
import { Direction as DirectionPrimitive, Tooltip as TooltipPrimitive2 } from "radix-ui";
|
|
5233
|
+
import { buildTheme } from "@dev-dga/tokens";
|
|
5234
|
+
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
5235
|
+
function DgaProvider({
|
|
5236
|
+
dir = "ltr",
|
|
5237
|
+
locale,
|
|
5238
|
+
mode = "light",
|
|
5239
|
+
theme,
|
|
5240
|
+
as: Component = "div",
|
|
5241
|
+
className,
|
|
5242
|
+
style: consumerStyle,
|
|
5243
|
+
children
|
|
5244
|
+
}) {
|
|
5245
|
+
const parentCtx = useContext12(DgaContext);
|
|
5246
|
+
const isNested = parentCtx !== null;
|
|
5247
|
+
const [rootEl, setRootEl] = useState10(null);
|
|
5248
|
+
const portalRef = useRef3(null);
|
|
5249
|
+
const [portalEl, setPortalEl] = useState10(null);
|
|
5250
|
+
const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
|
|
5251
|
+
const themeVars = useMemo4(() => theme ? buildTheme(theme) : null, [theme]);
|
|
5252
|
+
useEffect3(() => {
|
|
5253
|
+
if (typeof document === "undefined") return;
|
|
5254
|
+
const el = document.createElement("div");
|
|
5255
|
+
el.setAttribute("data-slot", "dga-portal");
|
|
5256
|
+
el.style.position = "relative";
|
|
5257
|
+
el.style.zIndex = "50";
|
|
5258
|
+
document.body.appendChild(el);
|
|
5259
|
+
portalRef.current = el;
|
|
5260
|
+
setPortalEl(el);
|
|
5261
|
+
return () => {
|
|
5262
|
+
el.remove();
|
|
5263
|
+
portalRef.current = null;
|
|
5264
|
+
setPortalEl(null);
|
|
5265
|
+
};
|
|
5266
|
+
}, []);
|
|
5267
|
+
useEffect3(() => {
|
|
5268
|
+
const el = portalRef.current;
|
|
5269
|
+
if (!el) return;
|
|
5270
|
+
el.setAttribute("data-theme", mode);
|
|
5271
|
+
el.setAttribute("dir", dir);
|
|
5272
|
+
el.style.colorScheme = mode;
|
|
5273
|
+
if (themeVars) {
|
|
5274
|
+
for (const [k, v] of Object.entries(themeVars)) {
|
|
5275
|
+
el.style.setProperty(k, String(v));
|
|
5276
|
+
}
|
|
5277
|
+
}
|
|
5278
|
+
}, [mode, dir, themeVars, portalEl]);
|
|
5279
|
+
const ctxValue = useMemo4(
|
|
5280
|
+
() => ({ dir, locale: resolvedLocale, mode, rootEl, portalEl }),
|
|
5281
|
+
[dir, resolvedLocale, mode, rootEl, portalEl]
|
|
5282
|
+
);
|
|
5283
|
+
const inner = /* @__PURE__ */ jsx46(DirectionPrimitive.Provider, { dir, children });
|
|
5284
|
+
return /* @__PURE__ */ jsx46(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx46(
|
|
5285
|
+
Component,
|
|
5286
|
+
{
|
|
5287
|
+
ref: setRootEl,
|
|
5288
|
+
dir,
|
|
5289
|
+
lang: resolvedLocale,
|
|
5290
|
+
"data-slot": "dga-root",
|
|
5291
|
+
"data-theme": mode,
|
|
5292
|
+
className,
|
|
5293
|
+
style: { colorScheme: mode, ...themeVars ?? {}, ...consumerStyle },
|
|
5294
|
+
children: isNested ? inner : /* @__PURE__ */ jsx46(TooltipPrimitive2.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
|
|
5295
|
+
}
|
|
5296
|
+
) });
|
|
2807
5297
|
}
|
|
2808
5298
|
export {
|
|
2809
5299
|
Accordion,
|
|
@@ -2839,6 +5329,11 @@ export {
|
|
|
2839
5329
|
ComboboxGroup,
|
|
2840
5330
|
ComboboxItem,
|
|
2841
5331
|
ComboboxSeparator,
|
|
5332
|
+
DatePicker,
|
|
5333
|
+
DescriptionDetails,
|
|
5334
|
+
DescriptionItem,
|
|
5335
|
+
DescriptionList,
|
|
5336
|
+
DescriptionTerm,
|
|
2842
5337
|
DgaProvider,
|
|
2843
5338
|
Divider,
|
|
2844
5339
|
Drawer,
|
|
@@ -2863,8 +5358,28 @@ export {
|
|
|
2863
5358
|
DropdownMenuSubContent,
|
|
2864
5359
|
DropdownMenuSubTrigger,
|
|
2865
5360
|
DropdownMenuTrigger,
|
|
5361
|
+
EmptyState,
|
|
5362
|
+
EmptyStateActions,
|
|
5363
|
+
EmptyStateDescription,
|
|
5364
|
+
EmptyStateMedia,
|
|
5365
|
+
EmptyStateTitle,
|
|
2866
5366
|
FieldMessage,
|
|
5367
|
+
FileUpload,
|
|
2867
5368
|
Input,
|
|
5369
|
+
Menubar,
|
|
5370
|
+
MenubarCheckboxItem,
|
|
5371
|
+
MenubarContent,
|
|
5372
|
+
MenubarGroup,
|
|
5373
|
+
MenubarItem,
|
|
5374
|
+
MenubarLabel,
|
|
5375
|
+
MenubarMenu,
|
|
5376
|
+
MenubarRadioGroup,
|
|
5377
|
+
MenubarRadioItem,
|
|
5378
|
+
MenubarSeparator,
|
|
5379
|
+
MenubarSub,
|
|
5380
|
+
MenubarSubContent,
|
|
5381
|
+
MenubarSubTrigger,
|
|
5382
|
+
MenubarTrigger,
|
|
2868
5383
|
Modal,
|
|
2869
5384
|
ModalClose,
|
|
2870
5385
|
ModalContent,
|
|
@@ -2873,6 +5388,7 @@ export {
|
|
|
2873
5388
|
ModalHeader,
|
|
2874
5389
|
ModalTitle,
|
|
2875
5390
|
ModalTrigger,
|
|
5391
|
+
NumberInput,
|
|
2876
5392
|
Pagination,
|
|
2877
5393
|
PaginationContent,
|
|
2878
5394
|
PaginationEllipsis,
|
|
@@ -2880,13 +5396,48 @@ export {
|
|
|
2880
5396
|
PaginationLink,
|
|
2881
5397
|
PaginationNext,
|
|
2882
5398
|
PaginationPrevious,
|
|
5399
|
+
Popover,
|
|
5400
|
+
PopoverAnchor,
|
|
5401
|
+
PopoverClose,
|
|
5402
|
+
PopoverContent,
|
|
5403
|
+
PopoverTrigger,
|
|
2883
5404
|
Progress,
|
|
2884
5405
|
Radio,
|
|
2885
5406
|
RadioGroup,
|
|
5407
|
+
Rating,
|
|
5408
|
+
ScrollArea,
|
|
2886
5409
|
Select,
|
|
2887
5410
|
SelectItem,
|
|
5411
|
+
Sidebar,
|
|
5412
|
+
SidebarContent,
|
|
5413
|
+
SidebarFooter,
|
|
5414
|
+
SidebarGroup,
|
|
5415
|
+
SidebarGroupAction,
|
|
5416
|
+
SidebarGroupContent,
|
|
5417
|
+
SidebarGroupLabel,
|
|
5418
|
+
SidebarHeader,
|
|
5419
|
+
SidebarInset,
|
|
5420
|
+
SidebarMenu,
|
|
5421
|
+
SidebarMenuAction,
|
|
5422
|
+
SidebarMenuBadge,
|
|
5423
|
+
SidebarMenuButton,
|
|
5424
|
+
SidebarMenuItem,
|
|
5425
|
+
SidebarMenuSkeleton,
|
|
5426
|
+
SidebarMenuSub,
|
|
5427
|
+
SidebarMenuSubButton,
|
|
5428
|
+
SidebarMenuSubItem,
|
|
5429
|
+
SidebarProvider,
|
|
5430
|
+
SidebarRail,
|
|
5431
|
+
SidebarSeparator,
|
|
5432
|
+
SidebarTrigger,
|
|
2888
5433
|
Skeleton,
|
|
5434
|
+
Slider,
|
|
2889
5435
|
Spinner,
|
|
5436
|
+
Stat,
|
|
5437
|
+
StatChange,
|
|
5438
|
+
StatGroup,
|
|
5439
|
+
StatLabel,
|
|
5440
|
+
StatValue,
|
|
2890
5441
|
Step,
|
|
2891
5442
|
StepDescription,
|
|
2892
5443
|
StepIndicator,
|
|
@@ -2898,7 +5449,17 @@ export {
|
|
|
2898
5449
|
TabsList,
|
|
2899
5450
|
TabsTrigger,
|
|
2900
5451
|
Textarea,
|
|
5452
|
+
Timeline,
|
|
5453
|
+
TimelineContent,
|
|
5454
|
+
TimelineDescription,
|
|
5455
|
+
TimelineItem,
|
|
5456
|
+
TimelineMarker,
|
|
5457
|
+
TimelineTime,
|
|
5458
|
+
TimelineTitle,
|
|
2901
5459
|
Toaster,
|
|
5460
|
+
Toggle,
|
|
5461
|
+
ToggleGroup,
|
|
5462
|
+
ToggleGroupItem,
|
|
2902
5463
|
Tooltip,
|
|
2903
5464
|
TooltipContent,
|
|
2904
5465
|
TooltipTrigger,
|
|
@@ -2916,32 +5477,52 @@ export {
|
|
|
2916
5477
|
comboboxVariants,
|
|
2917
5478
|
createToast,
|
|
2918
5479
|
createToastStore,
|
|
5480
|
+
datePickerVariants,
|
|
5481
|
+
descriptionListVariants,
|
|
2919
5482
|
dividerVariants,
|
|
2920
5483
|
drawerVariants,
|
|
2921
5484
|
dropdownMenuVariants,
|
|
5485
|
+
emptyStateVariants,
|
|
2922
5486
|
inputVariants,
|
|
5487
|
+
menubarContentVariants,
|
|
5488
|
+
menubarTriggerVariants,
|
|
2923
5489
|
modalContentVariants,
|
|
5490
|
+
numberInputVariants,
|
|
2924
5491
|
paginationLinkVariants,
|
|
2925
5492
|
paginationVariants,
|
|
5493
|
+
popoverContentVariants,
|
|
2926
5494
|
progressVariants,
|
|
2927
5495
|
radioGroupVariants,
|
|
2928
5496
|
radioVariants,
|
|
5497
|
+
ratingVariants,
|
|
5498
|
+
scrollAreaVariants,
|
|
2929
5499
|
selectTriggerVariants,
|
|
5500
|
+
sidebarMenuButtonVariants,
|
|
5501
|
+
sidebarMenuSubButtonVariants,
|
|
2930
5502
|
skeletonVariants,
|
|
5503
|
+
sliderVariants,
|
|
2931
5504
|
spinnerVariants,
|
|
5505
|
+
statGroupVariants,
|
|
5506
|
+
statVariants,
|
|
2932
5507
|
stepVariants,
|
|
2933
5508
|
stepsVariants,
|
|
2934
5509
|
switchVariants,
|
|
2935
5510
|
tabsListVariants,
|
|
2936
5511
|
tabsVariants,
|
|
2937
5512
|
textareaVariants,
|
|
5513
|
+
timelineMarkerVariants,
|
|
5514
|
+
timelineVariants,
|
|
2938
5515
|
toast,
|
|
2939
5516
|
toastStore,
|
|
2940
5517
|
toastVariants,
|
|
2941
5518
|
toastViewportVariants,
|
|
5519
|
+
toggleGroupVariants,
|
|
5520
|
+
toggleVariants,
|
|
2942
5521
|
tooltipContentVariants,
|
|
2943
5522
|
useDga,
|
|
2944
5523
|
useDir,
|
|
2945
|
-
useFieldA11y
|
|
5524
|
+
useFieldA11y,
|
|
5525
|
+
useIsMobile,
|
|
5526
|
+
useSidebar
|
|
2946
5527
|
};
|
|
2947
5528
|
//# sourceMappingURL=index.js.map
|