@dev-dga/react 0.6.0 → 0.8.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 +54 -0
- package/README.md +6 -4
- package/dist/index.cjs +2735 -127
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +709 -11
- package/dist/index.d.ts +709 -11
- package/dist/index.js +2632 -137
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
package/dist/index.js
CHANGED
|
@@ -80,6 +80,16 @@ var buttonVariants = cva2("ddga-button", {
|
|
|
80
80
|
*/
|
|
81
81
|
inverted: {
|
|
82
82
|
true: "ddga-button--inverted"
|
|
83
|
+
},
|
|
84
|
+
/**
|
|
85
|
+
* Floating action button: fully-rounded + elevated. Orthogonal to `variant`
|
|
86
|
+
* (color) and `size` — pair with `size="icon"` for a circular FAB, or a text
|
|
87
|
+
* size for an extended pill FAB. Positioning (`position: fixed`, safe-area
|
|
88
|
+
* insets) is the consumer's responsibility — see the placement recipe in the
|
|
89
|
+
* stories. Keep it a modifier, not a `Fab` wrapper component.
|
|
90
|
+
*/
|
|
91
|
+
fab: {
|
|
92
|
+
true: "ddga-button--fab"
|
|
83
93
|
}
|
|
84
94
|
},
|
|
85
95
|
compoundVariants: [],
|
|
@@ -93,6 +103,7 @@ function Button({
|
|
|
93
103
|
size,
|
|
94
104
|
fullWidth,
|
|
95
105
|
inverted,
|
|
106
|
+
fab,
|
|
96
107
|
loading,
|
|
97
108
|
disabled,
|
|
98
109
|
startIcon,
|
|
@@ -122,7 +133,7 @@ function Button({
|
|
|
122
133
|
"aria-busy": loading || void 0,
|
|
123
134
|
"data-slot": "button",
|
|
124
135
|
className: cn(
|
|
125
|
-
buttonVariants({ variant, size, fullWidth, inverted }),
|
|
136
|
+
buttonVariants({ variant, size, fullWidth, inverted, fab }),
|
|
126
137
|
loading && "ddga-button--loading",
|
|
127
138
|
className
|
|
128
139
|
),
|
|
@@ -632,6 +643,136 @@ function Upload(props) {
|
|
|
632
643
|
}
|
|
633
644
|
);
|
|
634
645
|
}
|
|
646
|
+
function Inbox(props) {
|
|
647
|
+
return /* @__PURE__ */ jsxs4(
|
|
648
|
+
"svg",
|
|
649
|
+
{
|
|
650
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
651
|
+
width: "1em",
|
|
652
|
+
height: "1em",
|
|
653
|
+
viewBox: "0 0 24 24",
|
|
654
|
+
fill: "none",
|
|
655
|
+
stroke: "currentColor",
|
|
656
|
+
strokeWidth: "2",
|
|
657
|
+
strokeLinecap: "round",
|
|
658
|
+
strokeLinejoin: "round",
|
|
659
|
+
...props,
|
|
660
|
+
children: [
|
|
661
|
+
/* @__PURE__ */ jsx6("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
|
|
662
|
+
/* @__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" })
|
|
663
|
+
]
|
|
664
|
+
}
|
|
665
|
+
);
|
|
666
|
+
}
|
|
667
|
+
function Search(props) {
|
|
668
|
+
return /* @__PURE__ */ jsxs4(
|
|
669
|
+
"svg",
|
|
670
|
+
{
|
|
671
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
672
|
+
width: "1em",
|
|
673
|
+
height: "1em",
|
|
674
|
+
viewBox: "0 0 24 24",
|
|
675
|
+
fill: "none",
|
|
676
|
+
stroke: "currentColor",
|
|
677
|
+
strokeWidth: "2",
|
|
678
|
+
strokeLinecap: "round",
|
|
679
|
+
strokeLinejoin: "round",
|
|
680
|
+
...props,
|
|
681
|
+
children: [
|
|
682
|
+
/* @__PURE__ */ jsx6("circle", { cx: "11", cy: "11", r: "8" }),
|
|
683
|
+
/* @__PURE__ */ jsx6("path", { d: "m21 21-4.3-4.3" })
|
|
684
|
+
]
|
|
685
|
+
}
|
|
686
|
+
);
|
|
687
|
+
}
|
|
688
|
+
function CaretUp(props) {
|
|
689
|
+
return /* @__PURE__ */ jsx6(
|
|
690
|
+
"svg",
|
|
691
|
+
{
|
|
692
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
693
|
+
width: "1em",
|
|
694
|
+
height: "1em",
|
|
695
|
+
viewBox: "0 0 24 24",
|
|
696
|
+
fill: "currentColor",
|
|
697
|
+
stroke: "none",
|
|
698
|
+
...props,
|
|
699
|
+
children: /* @__PURE__ */ jsx6("path", { d: "m12 8-6 8h12z" })
|
|
700
|
+
}
|
|
701
|
+
);
|
|
702
|
+
}
|
|
703
|
+
function CaretDown(props) {
|
|
704
|
+
return /* @__PURE__ */ jsx6(
|
|
705
|
+
"svg",
|
|
706
|
+
{
|
|
707
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
708
|
+
width: "1em",
|
|
709
|
+
height: "1em",
|
|
710
|
+
viewBox: "0 0 24 24",
|
|
711
|
+
fill: "currentColor",
|
|
712
|
+
stroke: "none",
|
|
713
|
+
...props,
|
|
714
|
+
children: /* @__PURE__ */ jsx6("path", { d: "m12 16 6-8H6z" })
|
|
715
|
+
}
|
|
716
|
+
);
|
|
717
|
+
}
|
|
718
|
+
function ExternalLink(props) {
|
|
719
|
+
return /* @__PURE__ */ jsxs4(
|
|
720
|
+
"svg",
|
|
721
|
+
{
|
|
722
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
723
|
+
width: "1em",
|
|
724
|
+
height: "1em",
|
|
725
|
+
viewBox: "0 0 24 24",
|
|
726
|
+
fill: "none",
|
|
727
|
+
stroke: "currentColor",
|
|
728
|
+
strokeWidth: "2",
|
|
729
|
+
strokeLinecap: "round",
|
|
730
|
+
strokeLinejoin: "round",
|
|
731
|
+
...props,
|
|
732
|
+
children: [
|
|
733
|
+
/* @__PURE__ */ jsx6("path", { d: "M15 3h6v6" }),
|
|
734
|
+
/* @__PURE__ */ jsx6("path", { d: "M10 14 21 3" }),
|
|
735
|
+
/* @__PURE__ */ jsx6("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
|
|
736
|
+
]
|
|
737
|
+
}
|
|
738
|
+
);
|
|
739
|
+
}
|
|
740
|
+
function QuoteMark(props) {
|
|
741
|
+
return /* @__PURE__ */ jsx6(
|
|
742
|
+
"svg",
|
|
743
|
+
{
|
|
744
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
745
|
+
width: "1em",
|
|
746
|
+
height: "1em",
|
|
747
|
+
viewBox: "0 0 24 24",
|
|
748
|
+
fill: "currentColor",
|
|
749
|
+
stroke: "none",
|
|
750
|
+
...props,
|
|
751
|
+
children: /* @__PURE__ */ jsx6("path", { d: "M7 7C4.8 7 3 8.8 3 11s1.8 4 4 4c.2 0 .4 0 .6-.1C7.2 16.4 6 17.5 4.2 17.7L4 17.7V20c3.6-.3 6-3.2 6-7v-1.2C10 8.7 8.4 7 7 7zM18 7c-2.2 0-4 1.8-4 4s1.8 4 4 4c.2 0 .4 0 .6-.1-.4 1.5-1.6 2.6-3.4 2.8l-.2 0V20c3.6-.3 6-3.2 6-7v-1.2C21 8.7 19.4 7 18 7z" })
|
|
752
|
+
}
|
|
753
|
+
);
|
|
754
|
+
}
|
|
755
|
+
function PanelLeft(props) {
|
|
756
|
+
return /* @__PURE__ */ jsxs4(
|
|
757
|
+
"svg",
|
|
758
|
+
{
|
|
759
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
760
|
+
width: "1em",
|
|
761
|
+
height: "1em",
|
|
762
|
+
viewBox: "0 0 24 24",
|
|
763
|
+
fill: "none",
|
|
764
|
+
stroke: "currentColor",
|
|
765
|
+
strokeWidth: "2",
|
|
766
|
+
strokeLinecap: "round",
|
|
767
|
+
strokeLinejoin: "round",
|
|
768
|
+
...props,
|
|
769
|
+
children: [
|
|
770
|
+
/* @__PURE__ */ jsx6("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
|
|
771
|
+
/* @__PURE__ */ jsx6("path", { d: "M9 3v18" })
|
|
772
|
+
]
|
|
773
|
+
}
|
|
774
|
+
);
|
|
775
|
+
}
|
|
635
776
|
|
|
636
777
|
// src/components/Checkbox/Checkbox.tsx
|
|
637
778
|
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
@@ -1747,9 +1888,10 @@ function ToastItem({ toast: t, store, closeButton, closeLabel, hideIcon }) {
|
|
|
1747
1888
|
}
|
|
1748
1889
|
|
|
1749
1890
|
// src/components/Tabs/Tabs.tsx
|
|
1891
|
+
import "react";
|
|
1750
1892
|
import { Tabs as TabsPrimitive } from "radix-ui";
|
|
1751
1893
|
import { cva as cva17 } from "class-variance-authority";
|
|
1752
|
-
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1894
|
+
import { Fragment, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1753
1895
|
var tabsVariants = cva17("ddga-tabs", {
|
|
1754
1896
|
variants: {
|
|
1755
1897
|
variant: {
|
|
@@ -1793,13 +1935,49 @@ function TabsList({ fullWidth, className, ...props }) {
|
|
|
1793
1935
|
}
|
|
1794
1936
|
);
|
|
1795
1937
|
}
|
|
1796
|
-
function TabsTrigger({
|
|
1938
|
+
function TabsTrigger({
|
|
1939
|
+
className,
|
|
1940
|
+
startIcon,
|
|
1941
|
+
endIcon,
|
|
1942
|
+
children,
|
|
1943
|
+
asChild,
|
|
1944
|
+
...props
|
|
1945
|
+
}) {
|
|
1946
|
+
const hasIcon = startIcon != null || endIcon != null;
|
|
1947
|
+
const hasText = children != null && children !== "" && typeof children !== "boolean";
|
|
1948
|
+
const isIconOnly = !asChild && hasIcon && !hasText;
|
|
1949
|
+
if (process.env.NODE_ENV === "development") {
|
|
1950
|
+
if (isIconOnly && !props["aria-label"] && !props["aria-labelledby"]) {
|
|
1951
|
+
console.warn(
|
|
1952
|
+
"[@dev-dga/react] An icon-only TabsTrigger (icon with no text label) requires an aria-label or aria-labelledby for screen reader accessibility."
|
|
1953
|
+
);
|
|
1954
|
+
}
|
|
1955
|
+
if (asChild && hasIcon) {
|
|
1956
|
+
console.warn(
|
|
1957
|
+
"[@dev-dga/react] TabsTrigger `startIcon`/`endIcon` are ignored when `asChild` is set \u2014 render the icons inside your child element instead."
|
|
1958
|
+
);
|
|
1959
|
+
}
|
|
1960
|
+
}
|
|
1797
1961
|
return /* @__PURE__ */ jsx19(
|
|
1798
1962
|
TabsPrimitive.Trigger,
|
|
1799
1963
|
{
|
|
1800
1964
|
"data-slot": "tabs-trigger",
|
|
1801
|
-
|
|
1802
|
-
|
|
1965
|
+
asChild,
|
|
1966
|
+
className: cn("ddga-tabs__trigger", isIconOnly && "ddga-tabs__trigger--icon-only", className),
|
|
1967
|
+
...props,
|
|
1968
|
+
children: asChild ? children : /* @__PURE__ */ jsxs15(Fragment, { children: [
|
|
1969
|
+
startIcon && /* @__PURE__ */ jsx19(
|
|
1970
|
+
"span",
|
|
1971
|
+
{
|
|
1972
|
+
className: "ddga-tabs__icon",
|
|
1973
|
+
"data-slot": "tabs-trigger-start-icon",
|
|
1974
|
+
"aria-hidden": "true",
|
|
1975
|
+
children: startIcon
|
|
1976
|
+
}
|
|
1977
|
+
),
|
|
1978
|
+
children,
|
|
1979
|
+
endIcon && /* @__PURE__ */ jsx19("span", { className: "ddga-tabs__icon", "data-slot": "tabs-trigger-end-icon", "aria-hidden": "true", children: endIcon })
|
|
1980
|
+
] })
|
|
1803
1981
|
}
|
|
1804
1982
|
);
|
|
1805
1983
|
}
|
|
@@ -1899,7 +2077,7 @@ function BreadcrumbEllipsis({ className, ...props }) {
|
|
|
1899
2077
|
// src/components/Pagination/Pagination.tsx
|
|
1900
2078
|
import { Slot as SlotPrimitive7 } from "radix-ui";
|
|
1901
2079
|
import { cva as cva19 } from "class-variance-authority";
|
|
1902
|
-
import { Fragment, jsx as jsx21, jsxs as
|
|
2080
|
+
import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1903
2081
|
var paginationVariants = cva19("ddga-pagination", {
|
|
1904
2082
|
variants: {
|
|
1905
2083
|
size: {
|
|
@@ -1970,7 +2148,7 @@ function PaginationPrevious({
|
|
|
1970
2148
|
"data-slot": "pagination-previous",
|
|
1971
2149
|
className: cn("ddga-pagination__nav", "ddga-pagination__nav--previous", className),
|
|
1972
2150
|
...props,
|
|
1973
|
-
children: children ?? /* @__PURE__ */
|
|
2151
|
+
children: children ?? /* @__PURE__ */ jsxs16(Fragment2, { children: [
|
|
1974
2152
|
/* @__PURE__ */ jsx21(ChevronRight, { className: "ddga-pagination__nav-icon ddga-pagination__nav-icon--previous" }),
|
|
1975
2153
|
/* @__PURE__ */ jsx21("span", { children: label })
|
|
1976
2154
|
] })
|
|
@@ -1992,7 +2170,7 @@ function PaginationNext({
|
|
|
1992
2170
|
"data-slot": "pagination-next",
|
|
1993
2171
|
className: cn("ddga-pagination__nav", "ddga-pagination__nav--next", className),
|
|
1994
2172
|
...props,
|
|
1995
|
-
children: children ?? /* @__PURE__ */
|
|
2173
|
+
children: children ?? /* @__PURE__ */ jsxs16(Fragment2, { children: [
|
|
1996
2174
|
/* @__PURE__ */ jsx21("span", { children: label }),
|
|
1997
2175
|
/* @__PURE__ */ jsx21(ChevronRight, { className: "ddga-pagination__nav-icon ddga-pagination__nav-icon--next" })
|
|
1998
2176
|
] })
|
|
@@ -2016,7 +2194,7 @@ function PaginationEllipsis({ className, ...props }) {
|
|
|
2016
2194
|
// src/components/Accordion/Accordion.tsx
|
|
2017
2195
|
import { Accordion as AccordionPrimitive } from "radix-ui";
|
|
2018
2196
|
import { cva as cva20 } from "class-variance-authority";
|
|
2019
|
-
import { jsx as jsx22, jsxs as
|
|
2197
|
+
import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2020
2198
|
var accordionVariants = cva20("ddga-accordion", {
|
|
2021
2199
|
variants: {
|
|
2022
2200
|
size: {
|
|
@@ -2049,7 +2227,7 @@ function AccordionItem({ className, ...props }) {
|
|
|
2049
2227
|
);
|
|
2050
2228
|
}
|
|
2051
2229
|
function AccordionTrigger({ className, children, ...props }) {
|
|
2052
|
-
return /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "ddga-accordion__header", children: /* @__PURE__ */
|
|
2230
|
+
return /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "ddga-accordion__header", children: /* @__PURE__ */ jsxs17(
|
|
2053
2231
|
AccordionPrimitive.Trigger,
|
|
2054
2232
|
{
|
|
2055
2233
|
"data-slot": "accordion-trigger",
|
|
@@ -2083,7 +2261,7 @@ function AccordionContent({ className, children, ...props }) {
|
|
|
2083
2261
|
|
|
2084
2262
|
// src/components/Steps/Steps.tsx
|
|
2085
2263
|
import { cva as cva21 } from "class-variance-authority";
|
|
2086
|
-
import { jsx as jsx23, jsxs as
|
|
2264
|
+
import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2087
2265
|
var stepsVariants = cva21("ddga-steps", {
|
|
2088
2266
|
variants: {
|
|
2089
2267
|
size: {
|
|
@@ -2136,7 +2314,7 @@ function Step({ state, className, ...props }) {
|
|
|
2136
2314
|
);
|
|
2137
2315
|
}
|
|
2138
2316
|
function StepIndicator({ step, className, ...props }) {
|
|
2139
|
-
return /* @__PURE__ */
|
|
2317
|
+
return /* @__PURE__ */ jsxs18(
|
|
2140
2318
|
"span",
|
|
2141
2319
|
{
|
|
2142
2320
|
"aria-hidden": "true",
|
|
@@ -2206,7 +2384,7 @@ function Skeleton({ shape, animation, width, height, className, style, ...props
|
|
|
2206
2384
|
// src/components/Progress/Progress.tsx
|
|
2207
2385
|
import { Progress as ProgressPrimitive } from "radix-ui";
|
|
2208
2386
|
import { cva as cva23 } from "class-variance-authority";
|
|
2209
|
-
import { jsx as jsx25, jsxs as
|
|
2387
|
+
import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2210
2388
|
var progressVariants = cva23("ddga-progress", {
|
|
2211
2389
|
variants: {
|
|
2212
2390
|
size: {
|
|
@@ -2269,30 +2447,60 @@ function Progress({ value = null, max = 100, size, color, className, ...props })
|
|
|
2269
2447
|
}
|
|
2270
2448
|
var CIRCULAR_SIZES = { sm: 32, md: 48, lg: 72 };
|
|
2271
2449
|
var CIRCULAR_DEFAULT_THICKNESS = { sm: 4, md: 5, lg: 6 };
|
|
2450
|
+
var SEGMENT_GAP_FRACTION = 0.16;
|
|
2272
2451
|
function CircularProgress({
|
|
2273
2452
|
value = null,
|
|
2274
2453
|
max = 100,
|
|
2275
2454
|
size,
|
|
2276
2455
|
color,
|
|
2277
2456
|
thickness,
|
|
2457
|
+
segments,
|
|
2278
2458
|
showLabel = false,
|
|
2279
2459
|
className,
|
|
2280
2460
|
...props
|
|
2281
2461
|
}) {
|
|
2282
2462
|
const isIndeterminate = value === null;
|
|
2463
|
+
const isSegmented = typeof segments === "number" && segments >= 2;
|
|
2283
2464
|
const sizeKey = size ?? "md";
|
|
2284
2465
|
const diameter = CIRCULAR_SIZES[sizeKey];
|
|
2285
2466
|
const strokeWidth = thickness ?? CIRCULAR_DEFAULT_THICKNESS[sizeKey];
|
|
2286
2467
|
const radius = (diameter - strokeWidth) / 2;
|
|
2287
2468
|
const circumference = 2 * Math.PI * radius;
|
|
2469
|
+
const center = diameter / 2;
|
|
2288
2470
|
const pct = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
|
|
2289
2471
|
const dashOffset = isIndeterminate ? circumference * 0.75 : circumference * (1 - pct / 100);
|
|
2290
2472
|
const state = isIndeterminate ? "indeterminate" : value >= max ? "complete" : "loading";
|
|
2291
|
-
|
|
2473
|
+
const segmentEls = isSegmented && segments ? (() => {
|
|
2474
|
+
const filled = isIndeterminate ? 0 : Math.round(pct / 100 * segments);
|
|
2475
|
+
const segAngle = 360 / segments;
|
|
2476
|
+
const gapAngle = segAngle * SEGMENT_GAP_FRACTION;
|
|
2477
|
+
const segLen = circumference * ((1 - SEGMENT_GAP_FRACTION) / segments);
|
|
2478
|
+
return Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx25(
|
|
2479
|
+
"circle",
|
|
2480
|
+
{
|
|
2481
|
+
className: cn(
|
|
2482
|
+
"ddga-circular-progress__segment",
|
|
2483
|
+
i < filled && "ddga-circular-progress__segment--filled"
|
|
2484
|
+
),
|
|
2485
|
+
cx: center,
|
|
2486
|
+
cy: center,
|
|
2487
|
+
r: radius,
|
|
2488
|
+
fill: "none",
|
|
2489
|
+
strokeWidth,
|
|
2490
|
+
strokeLinecap: "butt",
|
|
2491
|
+
strokeDasharray: `${segLen} ${circumference}`,
|
|
2492
|
+
transform: `rotate(${-90 + i * segAngle + gapAngle / 2} ${center} ${center})`
|
|
2493
|
+
},
|
|
2494
|
+
i
|
|
2495
|
+
));
|
|
2496
|
+
})() : null;
|
|
2497
|
+
const labelText = isSegmented ? `${segments ? Math.round(pct / 100 * segments) : 0}/${segments}` : `${Math.round(pct)}%`;
|
|
2498
|
+
return /* @__PURE__ */ jsxs19(
|
|
2292
2499
|
"div",
|
|
2293
2500
|
{
|
|
2294
2501
|
"data-slot": "circular-progress",
|
|
2295
2502
|
"data-state": state,
|
|
2503
|
+
"data-segmented": isSegmented ? "" : void 0,
|
|
2296
2504
|
role: "progressbar",
|
|
2297
2505
|
"aria-valuemin": 0,
|
|
2298
2506
|
"aria-valuemax": max,
|
|
@@ -2301,7 +2509,7 @@ function CircularProgress({
|
|
|
2301
2509
|
style: { inlineSize: diameter, blockSize: diameter },
|
|
2302
2510
|
...props,
|
|
2303
2511
|
children: [
|
|
2304
|
-
/* @__PURE__ */
|
|
2512
|
+
/* @__PURE__ */ jsx25(
|
|
2305
2513
|
"svg",
|
|
2306
2514
|
{
|
|
2307
2515
|
className: "ddga-circular-progress__svg",
|
|
@@ -2310,13 +2518,13 @@ function CircularProgress({
|
|
|
2310
2518
|
height: diameter,
|
|
2311
2519
|
"aria-hidden": "true",
|
|
2312
2520
|
focusable: "false",
|
|
2313
|
-
children: [
|
|
2521
|
+
children: isSegmented ? segmentEls : /* @__PURE__ */ jsxs19(Fragment3, { children: [
|
|
2314
2522
|
/* @__PURE__ */ jsx25(
|
|
2315
2523
|
"circle",
|
|
2316
2524
|
{
|
|
2317
2525
|
className: "ddga-circular-progress__track",
|
|
2318
|
-
cx:
|
|
2319
|
-
cy:
|
|
2526
|
+
cx: center,
|
|
2527
|
+
cy: center,
|
|
2320
2528
|
r: radius,
|
|
2321
2529
|
fill: "none",
|
|
2322
2530
|
strokeWidth
|
|
@@ -2326,24 +2534,21 @@ function CircularProgress({
|
|
|
2326
2534
|
"circle",
|
|
2327
2535
|
{
|
|
2328
2536
|
className: "ddga-circular-progress__indicator",
|
|
2329
|
-
cx:
|
|
2330
|
-
cy:
|
|
2537
|
+
cx: center,
|
|
2538
|
+
cy: center,
|
|
2331
2539
|
r: radius,
|
|
2332
2540
|
fill: "none",
|
|
2333
2541
|
strokeWidth,
|
|
2334
2542
|
strokeLinecap: "round",
|
|
2335
2543
|
strokeDasharray: circumference,
|
|
2336
2544
|
strokeDashoffset: dashOffset,
|
|
2337
|
-
transform: `rotate(-90 ${
|
|
2545
|
+
transform: `rotate(-90 ${center} ${center})`
|
|
2338
2546
|
}
|
|
2339
2547
|
)
|
|
2340
|
-
]
|
|
2548
|
+
] })
|
|
2341
2549
|
}
|
|
2342
2550
|
),
|
|
2343
|
-
showLabel && !isIndeterminate ? /* @__PURE__ */
|
|
2344
|
-
Math.round(pct),
|
|
2345
|
-
"%"
|
|
2346
|
-
] }) : null
|
|
2551
|
+
showLabel && !isIndeterminate ? /* @__PURE__ */ jsx25("span", { className: "ddga-circular-progress__label", "aria-hidden": "true", children: labelText }) : null
|
|
2347
2552
|
]
|
|
2348
2553
|
}
|
|
2349
2554
|
);
|
|
@@ -2353,7 +2558,7 @@ function CircularProgress({
|
|
|
2353
2558
|
import { useContext as useContext5 } from "react";
|
|
2354
2559
|
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
|
|
2355
2560
|
import { cva as cva24 } from "class-variance-authority";
|
|
2356
|
-
import { jsx as jsx26, jsxs as
|
|
2561
|
+
import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2357
2562
|
var dropdownMenuVariants = cva24("ddga-dropdown-menu", {
|
|
2358
2563
|
variants: {
|
|
2359
2564
|
size: {
|
|
@@ -2397,7 +2602,7 @@ function DropdownMenuItem({
|
|
|
2397
2602
|
children,
|
|
2398
2603
|
...props
|
|
2399
2604
|
}) {
|
|
2400
|
-
return /* @__PURE__ */
|
|
2605
|
+
return /* @__PURE__ */ jsxs20(
|
|
2401
2606
|
DropdownMenuPrimitive.Item,
|
|
2402
2607
|
{
|
|
2403
2608
|
"data-slot": "dropdown-menu-item",
|
|
@@ -2421,7 +2626,7 @@ function DropdownMenuCheckboxItem({
|
|
|
2421
2626
|
const handleSelect = onSelect ?? ((event) => {
|
|
2422
2627
|
event.preventDefault();
|
|
2423
2628
|
});
|
|
2424
|
-
return /* @__PURE__ */
|
|
2629
|
+
return /* @__PURE__ */ jsxs20(
|
|
2425
2630
|
DropdownMenuPrimitive.CheckboxItem,
|
|
2426
2631
|
{
|
|
2427
2632
|
"data-slot": "dropdown-menu-checkbox-item",
|
|
@@ -2447,7 +2652,7 @@ function DropdownMenuRadioItem({
|
|
|
2447
2652
|
const handleSelect = onSelect ?? ((event) => {
|
|
2448
2653
|
event.preventDefault();
|
|
2449
2654
|
});
|
|
2450
|
-
return /* @__PURE__ */
|
|
2655
|
+
return /* @__PURE__ */ jsxs20(
|
|
2451
2656
|
DropdownMenuPrimitive.RadioItem,
|
|
2452
2657
|
{
|
|
2453
2658
|
"data-slot": "dropdown-menu-radio-item",
|
|
@@ -2493,7 +2698,7 @@ function DropdownMenuSubTrigger({
|
|
|
2493
2698
|
children,
|
|
2494
2699
|
...props
|
|
2495
2700
|
}) {
|
|
2496
|
-
return /* @__PURE__ */
|
|
2701
|
+
return /* @__PURE__ */ jsxs20(
|
|
2497
2702
|
DropdownMenuPrimitive.SubTrigger,
|
|
2498
2703
|
{
|
|
2499
2704
|
"data-slot": "dropdown-menu-sub-trigger",
|
|
@@ -2524,7 +2729,7 @@ function DropdownMenuSubContent({ size, className, ...props }) {
|
|
|
2524
2729
|
import { useContext as useContext6 } from "react";
|
|
2525
2730
|
import { Dialog as DialogPrimitive2, Slot as SlotPrimitive8 } from "radix-ui";
|
|
2526
2731
|
import { cva as cva25 } from "class-variance-authority";
|
|
2527
|
-
import { jsx as jsx27, jsxs as
|
|
2732
|
+
import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2528
2733
|
var drawerVariants = cva25("ddga-drawer", {
|
|
2529
2734
|
variants: {
|
|
2530
2735
|
side: {
|
|
@@ -2562,9 +2767,9 @@ function DrawerContent({
|
|
|
2562
2767
|
}) {
|
|
2563
2768
|
const ctx = useContext6(DgaContext);
|
|
2564
2769
|
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
2565
|
-
return /* @__PURE__ */
|
|
2770
|
+
return /* @__PURE__ */ jsxs21(DialogPrimitive2.Portal, { container: portalContainer, children: [
|
|
2566
2771
|
/* @__PURE__ */ jsx27(DialogPrimitive2.Overlay, { className: "ddga-drawer__overlay", "data-slot": "drawer-overlay" }),
|
|
2567
|
-
/* @__PURE__ */
|
|
2772
|
+
/* @__PURE__ */ jsxs21(
|
|
2568
2773
|
DialogPrimitive2.Content,
|
|
2569
2774
|
{
|
|
2570
2775
|
"data-slot": "drawer-content",
|
|
@@ -2638,7 +2843,7 @@ import {
|
|
|
2638
2843
|
import { Command } from "cmdk";
|
|
2639
2844
|
import { Popover as PopoverPrimitive } from "radix-ui";
|
|
2640
2845
|
import { cva as cva26 } from "class-variance-authority";
|
|
2641
|
-
import { jsx as jsx28, jsxs as
|
|
2846
|
+
import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2642
2847
|
var comboboxTriggerVariants = cva26("ddga-combobox-trigger", {
|
|
2643
2848
|
variants: {
|
|
2644
2849
|
size: {
|
|
@@ -2742,13 +2947,13 @@ function Combobox({
|
|
|
2742
2947
|
return itemLabels.get(value) ?? null;
|
|
2743
2948
|
}, [value, getLabel, itemLabels]);
|
|
2744
2949
|
const searchId = useId3();
|
|
2745
|
-
return /* @__PURE__ */ jsx28(ComboboxContext.Provider, { value: ctx, children: /* @__PURE__ */
|
|
2746
|
-
label && /* @__PURE__ */
|
|
2950
|
+
return /* @__PURE__ */ jsx28(ComboboxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs22("div", { "data-slot": "combobox-field", className: "ddga-field", children: [
|
|
2951
|
+
label && /* @__PURE__ */ jsxs22("label", { htmlFor: fieldId, className: "ddga-combobox__label", children: [
|
|
2747
2952
|
label,
|
|
2748
2953
|
required && /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", className: "ddga-combobox__required", children: "*" })
|
|
2749
2954
|
] }),
|
|
2750
|
-
/* @__PURE__ */
|
|
2751
|
-
/* @__PURE__ */ jsx28(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */
|
|
2955
|
+
/* @__PURE__ */ jsxs22(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
|
|
2956
|
+
/* @__PURE__ */ jsx28(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
|
|
2752
2957
|
"button",
|
|
2753
2958
|
{
|
|
2754
2959
|
type: "button",
|
|
@@ -2776,7 +2981,7 @@ function Combobox({
|
|
|
2776
2981
|
onOpenAutoFocus: (event) => {
|
|
2777
2982
|
event.preventDefault();
|
|
2778
2983
|
},
|
|
2779
|
-
children: /* @__PURE__ */
|
|
2984
|
+
children: /* @__PURE__ */ jsxs22(
|
|
2780
2985
|
Command,
|
|
2781
2986
|
{
|
|
2782
2987
|
id: searchId,
|
|
@@ -2792,7 +2997,7 @@ function Combobox({
|
|
|
2792
2997
|
className: "ddga-combobox-input"
|
|
2793
2998
|
}
|
|
2794
2999
|
),
|
|
2795
|
-
/* @__PURE__ */
|
|
3000
|
+
/* @__PURE__ */ jsxs22(Command.List, { "data-slot": "combobox-list", className: "ddga-combobox-list", children: [
|
|
2796
3001
|
/* @__PURE__ */ jsx28(Command.Empty, { "data-slot": "combobox-empty", className: "ddga-combobox-empty", children: emptyMessage }),
|
|
2797
3002
|
children
|
|
2798
3003
|
] })
|
|
@@ -2817,7 +3022,7 @@ function ComboboxItem({
|
|
|
2817
3022
|
}) {
|
|
2818
3023
|
const { value: selectedValue, select } = useComboboxContext("ComboboxItem");
|
|
2819
3024
|
const isSelected = selectedValue === value;
|
|
2820
|
-
return /* @__PURE__ */
|
|
3025
|
+
return /* @__PURE__ */ jsxs22(
|
|
2821
3026
|
Command.Item,
|
|
2822
3027
|
{
|
|
2823
3028
|
value,
|
|
@@ -2889,7 +3094,7 @@ import {
|
|
|
2889
3094
|
toCalendar
|
|
2890
3095
|
} from "@internationalized/date";
|
|
2891
3096
|
import { cva as cva27 } from "class-variance-authority";
|
|
2892
|
-
import { Fragment as
|
|
3097
|
+
import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2893
3098
|
var datePickerTriggerVariants = cva27("ddga-date-picker-trigger", {
|
|
2894
3099
|
variants: {
|
|
2895
3100
|
size: {
|
|
@@ -2954,7 +3159,7 @@ function CalendarNavHeader({ locale, monthLabel, yearLabel }) {
|
|
|
2954
3159
|
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
2955
3160
|
}, [focusedDate, focusedCalendar, focusedYear, minValue, maxValue]);
|
|
2956
3161
|
if (!state || !focusedDate) return null;
|
|
2957
|
-
return /* @__PURE__ */
|
|
3162
|
+
return /* @__PURE__ */ jsxs23("div", { className: "ddga-date-picker-calendar__nav-selects", "data-slot": "date-picker-calendar-nav", children: [
|
|
2958
3163
|
/* @__PURE__ */ jsx29(
|
|
2959
3164
|
"select",
|
|
2960
3165
|
{
|
|
@@ -3001,14 +3206,14 @@ function CalendarDayCell({ date, showSecondary, calendarSystem }) {
|
|
|
3001
3206
|
"data-selected": isSelected ? "" : void 0,
|
|
3002
3207
|
"data-slot": "date-picker-day-cell",
|
|
3003
3208
|
onClick: handleSelect,
|
|
3004
|
-
children: showSecondary ? /* @__PURE__ */
|
|
3209
|
+
children: showSecondary ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
|
|
3005
3210
|
/* @__PURE__ */ jsx29("span", { className: "ddga-date-picker-calendar__cell-primary", children: date.day }),
|
|
3006
3211
|
/* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-date-picker-calendar__cell-secondary", children: secondaryDayNumber(date, calendarSystem) })
|
|
3007
3212
|
] }) : String(date.day)
|
|
3008
3213
|
}
|
|
3009
3214
|
) });
|
|
3010
3215
|
}
|
|
3011
|
-
return /* @__PURE__ */ jsx29(AriaCalendarCell, { date, className: "ddga-date-picker-calendar__cell", children: ({ formattedDate }) => showSecondary ? /* @__PURE__ */
|
|
3216
|
+
return /* @__PURE__ */ jsx29(AriaCalendarCell, { date, className: "ddga-date-picker-calendar__cell", children: ({ formattedDate }) => showSecondary ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
|
|
3012
3217
|
/* @__PURE__ */ jsx29("span", { className: "ddga-date-picker-calendar__cell-primary", children: formattedDate }),
|
|
3013
3218
|
/* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-date-picker-calendar__cell-secondary", children: secondaryDayNumber(date, calendarSystem) })
|
|
3014
3219
|
] }) : formattedDate });
|
|
@@ -3086,7 +3291,7 @@ function DatePicker({
|
|
|
3086
3291
|
const hasError = !!error;
|
|
3087
3292
|
const hasErrorMessage = hasError && errorMessage != null && errorMessage !== "";
|
|
3088
3293
|
const hasHelper = !hasErrorMessage && helperText != null && helperText !== "";
|
|
3089
|
-
return /* @__PURE__ */ jsx29(I18nProvider, { locale: ariaLocale, children: /* @__PURE__ */
|
|
3294
|
+
return /* @__PURE__ */ jsx29(I18nProvider, { locale: ariaLocale, children: /* @__PURE__ */ jsxs23(
|
|
3090
3295
|
AriaDatePicker,
|
|
3091
3296
|
{
|
|
3092
3297
|
value,
|
|
@@ -3103,11 +3308,11 @@ function DatePicker({
|
|
|
3103
3308
|
className: "ddga-field",
|
|
3104
3309
|
"data-slot": "date-picker-field",
|
|
3105
3310
|
children: [
|
|
3106
|
-
label && /* @__PURE__ */
|
|
3311
|
+
label && /* @__PURE__ */ jsxs23(AriaLabel, { className: "ddga-date-picker__label", children: [
|
|
3107
3312
|
label,
|
|
3108
3313
|
required && /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-date-picker__required", children: "*" })
|
|
3109
3314
|
] }),
|
|
3110
|
-
/* @__PURE__ */
|
|
3315
|
+
/* @__PURE__ */ jsxs23(
|
|
3111
3316
|
AriaGroup,
|
|
3112
3317
|
{
|
|
3113
3318
|
"data-slot": "date-picker-trigger",
|
|
@@ -3158,7 +3363,7 @@ function DatePicker({
|
|
|
3158
3363
|
"data-slot": "date-picker-popover",
|
|
3159
3364
|
offset: 6,
|
|
3160
3365
|
containerPadding: 12,
|
|
3161
|
-
children: /* @__PURE__ */
|
|
3366
|
+
children: /* @__PURE__ */ jsxs23(
|
|
3162
3367
|
AriaDialog,
|
|
3163
3368
|
{
|
|
3164
3369
|
className: "ddga-date-picker-dialog",
|
|
@@ -3166,7 +3371,7 @@ function DatePicker({
|
|
|
3166
3371
|
"aria-label": dialogAriaLabel,
|
|
3167
3372
|
"aria-labelledby": ariaLabelledBy,
|
|
3168
3373
|
children: [
|
|
3169
|
-
showToggle && /* @__PURE__ */
|
|
3374
|
+
showToggle && /* @__PURE__ */ jsxs23(
|
|
3170
3375
|
"div",
|
|
3171
3376
|
{
|
|
3172
3377
|
role: "tablist",
|
|
@@ -3201,8 +3406,8 @@ function DatePicker({
|
|
|
3201
3406
|
]
|
|
3202
3407
|
}
|
|
3203
3408
|
),
|
|
3204
|
-
/* @__PURE__ */
|
|
3205
|
-
/* @__PURE__ */
|
|
3409
|
+
/* @__PURE__ */ jsxs23(AriaCalendar, { className: "ddga-date-picker-calendar", "data-slot": "date-picker-calendar", children: [
|
|
3410
|
+
/* @__PURE__ */ jsxs23("header", { className: "ddga-date-picker-calendar__header", children: [
|
|
3206
3411
|
/* @__PURE__ */ jsx29(
|
|
3207
3412
|
AriaButton,
|
|
3208
3413
|
{
|
|
@@ -3230,7 +3435,7 @@ function DatePicker({
|
|
|
3230
3435
|
}
|
|
3231
3436
|
)
|
|
3232
3437
|
] }),
|
|
3233
|
-
/* @__PURE__ */
|
|
3438
|
+
/* @__PURE__ */ jsxs23(AriaCalendarGrid, { className: "ddga-date-picker-calendar__grid", children: [
|
|
3234
3439
|
/* @__PURE__ */ jsx29(AriaCalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx29(AriaCalendarHeaderCell, { className: "ddga-date-picker-calendar__weekday", children: day }) }),
|
|
3235
3440
|
/* @__PURE__ */ jsx29(AriaCalendarGridBody, { children: (date) => /* @__PURE__ */ jsx29(
|
|
3236
3441
|
CalendarDayCell,
|
|
@@ -3254,7 +3459,7 @@ function DatePicker({
|
|
|
3254
3459
|
|
|
3255
3460
|
// src/components/FileUpload/FileUpload.tsx
|
|
3256
3461
|
import { useRef, useState as useState5 } from "react";
|
|
3257
|
-
import { jsx as jsx30, jsxs as
|
|
3462
|
+
import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
3258
3463
|
function matchesAccept(file, accept) {
|
|
3259
3464
|
if (!accept) return true;
|
|
3260
3465
|
const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
|
|
@@ -3358,12 +3563,12 @@ function FileUpload({
|
|
|
3358
3563
|
setIsDragging(false);
|
|
3359
3564
|
}
|
|
3360
3565
|
}
|
|
3361
|
-
return /* @__PURE__ */
|
|
3362
|
-
label && /* @__PURE__ */
|
|
3566
|
+
return /* @__PURE__ */ jsxs24("div", { "data-slot": "file-upload-field", className: cn("ddga-field", "ddga-file-upload", className), children: [
|
|
3567
|
+
label && /* @__PURE__ */ jsxs24("label", { htmlFor: fieldId, className: "ddga-file-upload__label", children: [
|
|
3363
3568
|
label,
|
|
3364
3569
|
required && /* @__PURE__ */ jsx30("span", { "aria-hidden": "true", className: "ddga-file-upload__required", children: "*" })
|
|
3365
3570
|
] }),
|
|
3366
|
-
/* @__PURE__ */
|
|
3571
|
+
/* @__PURE__ */ jsxs24(
|
|
3367
3572
|
"div",
|
|
3368
3573
|
{
|
|
3369
3574
|
"data-slot": "file-upload-dropzone",
|
|
@@ -3406,7 +3611,7 @@ function FileUpload({
|
|
|
3406
3611
|
hasHelper && /* @__PURE__ */ jsx30(FieldMessage, { id: helperId, variant: "helper", children: helperText }),
|
|
3407
3612
|
files.length > 0 && /* @__PURE__ */ jsx30("ul", { "data-slot": "file-upload-list", className: "ddga-file-upload__list", children: files.map((item) => {
|
|
3408
3613
|
const status = item.status ?? "pending";
|
|
3409
|
-
return /* @__PURE__ */
|
|
3614
|
+
return /* @__PURE__ */ jsxs24(
|
|
3410
3615
|
"li",
|
|
3411
3616
|
{
|
|
3412
3617
|
"data-slot": "file-upload-item",
|
|
@@ -3414,8 +3619,8 @@ function FileUpload({
|
|
|
3414
3619
|
className: "ddga-file-upload__item",
|
|
3415
3620
|
children: [
|
|
3416
3621
|
/* @__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, {}) }),
|
|
3417
|
-
/* @__PURE__ */
|
|
3418
|
-
/* @__PURE__ */
|
|
3622
|
+
/* @__PURE__ */ jsxs24("div", { className: "ddga-file-upload__item-main", children: [
|
|
3623
|
+
/* @__PURE__ */ jsxs24("div", { className: "ddga-file-upload__item-head", children: [
|
|
3419
3624
|
/* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__item-name", title: item.file.name, children: item.file.name }),
|
|
3420
3625
|
/* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__item-meta", children: formatBytes(item.file.size) })
|
|
3421
3626
|
] }),
|
|
@@ -3454,7 +3659,7 @@ function FileUpload({
|
|
|
3454
3659
|
import { useId as useId4 } from "react";
|
|
3455
3660
|
import { Slider as SliderPrimitive } from "radix-ui";
|
|
3456
3661
|
import { cva as cva28 } from "class-variance-authority";
|
|
3457
|
-
import { jsx as jsx31, jsxs as
|
|
3662
|
+
import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
3458
3663
|
var sliderVariants = cva28("ddga-slider", {
|
|
3459
3664
|
variants: {
|
|
3460
3665
|
size: {
|
|
@@ -3510,12 +3715,12 @@ function Slider({
|
|
|
3510
3715
|
const wrap = (next) => isRange ? next : next[0];
|
|
3511
3716
|
const currentForRender = valueArray ?? defaultArray;
|
|
3512
3717
|
const fmt = (n) => formatValue ? formatValue(n) : String(n);
|
|
3513
|
-
return /* @__PURE__ */
|
|
3514
|
-
(label || showValue) && /* @__PURE__ */
|
|
3718
|
+
return /* @__PURE__ */ jsxs25("div", { "data-slot": "slider-field", className: "ddga-field", children: [
|
|
3719
|
+
(label || showValue) && /* @__PURE__ */ jsxs25("div", { className: "ddga-slider__header", children: [
|
|
3515
3720
|
label && /* @__PURE__ */ jsx31("span", { id: labelId, className: "ddga-slider__label", children: label }),
|
|
3516
3721
|
showValue && /* @__PURE__ */ jsx31("span", { className: "ddga-slider__value", "aria-hidden": "true", children: currentForRender.map(fmt).join(" \u2013 ") })
|
|
3517
3722
|
] }),
|
|
3518
|
-
/* @__PURE__ */
|
|
3723
|
+
/* @__PURE__ */ jsxs25(
|
|
3519
3724
|
SliderPrimitive.Root,
|
|
3520
3725
|
{
|
|
3521
3726
|
...props,
|
|
@@ -3554,7 +3759,7 @@ function Slider({
|
|
|
3554
3759
|
// src/components/NumberInput/NumberInput.tsx
|
|
3555
3760
|
import { useState as useState6 } from "react";
|
|
3556
3761
|
import { cva as cva29 } from "class-variance-authority";
|
|
3557
|
-
import { jsx as jsx32, jsxs as
|
|
3762
|
+
import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3558
3763
|
var numberInputVariants = cva29("ddga-number-input", {
|
|
3559
3764
|
variants: {
|
|
3560
3765
|
size: {
|
|
@@ -3664,12 +3869,12 @@ function NumberInput({
|
|
|
3664
3869
|
}
|
|
3665
3870
|
const atMin = min != null && numericValue != null && numericValue <= min;
|
|
3666
3871
|
const atMax = max != null && numericValue != null && numericValue >= max;
|
|
3667
|
-
return /* @__PURE__ */
|
|
3668
|
-
label && /* @__PURE__ */
|
|
3872
|
+
return /* @__PURE__ */ jsxs26("div", { "data-slot": "number-input-field", className: "ddga-field", children: [
|
|
3873
|
+
label && /* @__PURE__ */ jsxs26("label", { htmlFor: fieldId, className: "ddga-number-input__label", children: [
|
|
3669
3874
|
label,
|
|
3670
3875
|
required && /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", className: "ddga-number-input__required", children: "*" })
|
|
3671
3876
|
] }),
|
|
3672
|
-
/* @__PURE__ */
|
|
3877
|
+
/* @__PURE__ */ jsxs26(
|
|
3673
3878
|
"div",
|
|
3674
3879
|
{
|
|
3675
3880
|
"data-slot": "number-input-control",
|
|
@@ -3729,7 +3934,7 @@ function NumberInput({
|
|
|
3729
3934
|
// src/components/Rating/Rating.tsx
|
|
3730
3935
|
import { useRef as useRef2, useState as useState7 } from "react";
|
|
3731
3936
|
import { cva as cva30 } from "class-variance-authority";
|
|
3732
|
-
import { jsx as jsx33, jsxs as
|
|
3937
|
+
import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3733
3938
|
var ratingVariants = cva30("ddga-rating", {
|
|
3734
3939
|
variants: {
|
|
3735
3940
|
size: {
|
|
@@ -3838,7 +4043,7 @@ function Rating({
|
|
|
3838
4043
|
}
|
|
3839
4044
|
const stars = Array.from({ length: max }, (_, index) => {
|
|
3840
4045
|
const level = fillFor(index, displayValue, allowHalf);
|
|
3841
|
-
return /* @__PURE__ */
|
|
4046
|
+
return /* @__PURE__ */ jsxs27(
|
|
3842
4047
|
"span",
|
|
3843
4048
|
{
|
|
3844
4049
|
"data-slot": "rating-star",
|
|
@@ -3863,7 +4068,7 @@ function Rating({
|
|
|
3863
4068
|
};
|
|
3864
4069
|
const labelledBy = label ? `${fieldId}-label` : props["aria-labelledby"];
|
|
3865
4070
|
const ariaLabel = labelledBy ? void 0 : props["aria-label"] ?? "Rating";
|
|
3866
|
-
return /* @__PURE__ */
|
|
4071
|
+
return /* @__PURE__ */ jsxs27("div", { "data-slot": "rating-field", className: "ddga-field", children: [
|
|
3867
4072
|
label && /* @__PURE__ */ jsx33("span", { id: `${fieldId}-label`, className: "ddga-rating__label", children: label }),
|
|
3868
4073
|
readOnly ? /* @__PURE__ */ jsx33("div", { ...sharedProps, role: "img", "aria-label": formatValueText(currentValue, max), children: stars }) : /* @__PURE__ */ jsx33(
|
|
3869
4074
|
"div",
|
|
@@ -4022,78 +4227,2255 @@ function DescriptionDetails({ className, ...props }) {
|
|
|
4022
4227
|
);
|
|
4023
4228
|
}
|
|
4024
4229
|
|
|
4025
|
-
// src/
|
|
4026
|
-
import
|
|
4027
|
-
import {
|
|
4028
|
-
import {
|
|
4029
|
-
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
|
|
4035
|
-
|
|
4230
|
+
// src/components/EmptyState/EmptyState.tsx
|
|
4231
|
+
import "react";
|
|
4232
|
+
import { Slot as SlotPrimitive9 } from "radix-ui";
|
|
4233
|
+
import { cva as cva33 } from "class-variance-authority";
|
|
4234
|
+
import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
4235
|
+
var emptyStateVariants = cva33("ddga-empty-state", {
|
|
4236
|
+
variants: {
|
|
4237
|
+
variant: {
|
|
4238
|
+
default: "ddga-empty-state--default",
|
|
4239
|
+
search: "ddga-empty-state--search",
|
|
4240
|
+
error: "ddga-empty-state--error",
|
|
4241
|
+
success: "ddga-empty-state--success"
|
|
4242
|
+
},
|
|
4243
|
+
size: {
|
|
4244
|
+
sm: "ddga-empty-state--sm",
|
|
4245
|
+
md: "ddga-empty-state--md",
|
|
4246
|
+
lg: "ddga-empty-state--lg"
|
|
4247
|
+
}
|
|
4248
|
+
},
|
|
4249
|
+
defaultVariants: {
|
|
4250
|
+
variant: "default",
|
|
4251
|
+
size: "md"
|
|
4252
|
+
}
|
|
4253
|
+
});
|
|
4254
|
+
var DEFAULT_ICONS3 = {
|
|
4255
|
+
default: /* @__PURE__ */ jsx36(Inbox, { "aria-hidden": "true" }),
|
|
4256
|
+
search: /* @__PURE__ */ jsx36(Search, { "aria-hidden": "true" }),
|
|
4257
|
+
error: /* @__PURE__ */ jsx36(AlertCircle, { "aria-hidden": "true" }),
|
|
4258
|
+
success: /* @__PURE__ */ jsx36(Check, { "aria-hidden": "true" })
|
|
4259
|
+
};
|
|
4260
|
+
function EmptyState({
|
|
4261
|
+
variant,
|
|
4262
|
+
size,
|
|
4263
|
+
icon,
|
|
4264
|
+
title,
|
|
4265
|
+
description,
|
|
4266
|
+
action,
|
|
4267
|
+
secondaryAction,
|
|
4036
4268
|
className,
|
|
4037
|
-
|
|
4038
|
-
|
|
4269
|
+
children,
|
|
4270
|
+
...props
|
|
4039
4271
|
}) {
|
|
4040
|
-
const
|
|
4041
|
-
|
|
4042
|
-
|
|
4043
|
-
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
|
|
4047
|
-
|
|
4048
|
-
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
|
|
4052
|
-
|
|
4053
|
-
|
|
4054
|
-
|
|
4055
|
-
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
portalRef.current = null;
|
|
4059
|
-
setPortalEl(null);
|
|
4060
|
-
};
|
|
4061
|
-
}, []);
|
|
4062
|
-
useEffect(() => {
|
|
4063
|
-
const el = portalRef.current;
|
|
4064
|
-
if (!el) return;
|
|
4065
|
-
el.setAttribute("data-theme", mode);
|
|
4066
|
-
el.setAttribute("dir", dir);
|
|
4067
|
-
el.style.colorScheme = mode;
|
|
4068
|
-
if (themeVars) {
|
|
4069
|
-
for (const [k, v] of Object.entries(themeVars)) {
|
|
4070
|
-
el.style.setProperty(k, String(v));
|
|
4071
|
-
}
|
|
4272
|
+
const resolvedIcon = icon === false ? null : icon !== void 0 ? icon : DEFAULT_ICONS3[variant ?? "default"];
|
|
4273
|
+
return /* @__PURE__ */ jsx36(
|
|
4274
|
+
"div",
|
|
4275
|
+
{
|
|
4276
|
+
"data-slot": "empty-state",
|
|
4277
|
+
"data-variant": variant ?? "default",
|
|
4278
|
+
"data-size": size ?? "md",
|
|
4279
|
+
className: cn(emptyStateVariants({ variant, size }), className),
|
|
4280
|
+
...props,
|
|
4281
|
+
children: children ?? /* @__PURE__ */ jsxs28(Fragment5, { children: [
|
|
4282
|
+
resolvedIcon ? /* @__PURE__ */ jsx36(EmptyStateMedia, { children: resolvedIcon }) : null,
|
|
4283
|
+
title ? /* @__PURE__ */ jsx36(EmptyStateTitle, { children: title }) : null,
|
|
4284
|
+
description ? /* @__PURE__ */ jsx36(EmptyStateDescription, { children: description }) : null,
|
|
4285
|
+
action || secondaryAction ? /* @__PURE__ */ jsxs28(EmptyStateActions, { children: [
|
|
4286
|
+
action,
|
|
4287
|
+
secondaryAction
|
|
4288
|
+
] }) : null
|
|
4289
|
+
] })
|
|
4072
4290
|
}
|
|
4073
|
-
}, [mode, dir, themeVars, portalEl]);
|
|
4074
|
-
const ctxValue = useMemo3(
|
|
4075
|
-
() => ({ dir, locale: resolvedLocale, mode, rootEl, portalEl }),
|
|
4076
|
-
[dir, resolvedLocale, mode, rootEl, portalEl]
|
|
4077
4291
|
);
|
|
4078
|
-
|
|
4079
|
-
|
|
4080
|
-
|
|
4292
|
+
}
|
|
4293
|
+
function EmptyStateMedia({ className, ...props }) {
|
|
4294
|
+
return /* @__PURE__ */ jsx36(
|
|
4295
|
+
"div",
|
|
4081
4296
|
{
|
|
4082
|
-
|
|
4083
|
-
|
|
4084
|
-
|
|
4085
|
-
|
|
4086
|
-
"data-theme": mode,
|
|
4087
|
-
className,
|
|
4088
|
-
style: { colorScheme: mode, ...themeVars ?? {}, ...consumerStyle },
|
|
4089
|
-
children: isNested ? inner : /* @__PURE__ */ jsx36(TooltipPrimitive2.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
|
|
4297
|
+
"data-slot": "empty-state-media",
|
|
4298
|
+
"aria-hidden": "true",
|
|
4299
|
+
className: cn("ddga-empty-state__media", className),
|
|
4300
|
+
...props
|
|
4090
4301
|
}
|
|
4091
|
-
)
|
|
4302
|
+
);
|
|
4303
|
+
}
|
|
4304
|
+
function EmptyStateTitle({ asChild, className, ...props }) {
|
|
4305
|
+
const Comp = asChild ? SlotPrimitive9.Slot : "h3";
|
|
4306
|
+
return /* @__PURE__ */ jsx36(
|
|
4307
|
+
Comp,
|
|
4308
|
+
{
|
|
4309
|
+
"data-slot": "empty-state-title",
|
|
4310
|
+
className: cn("ddga-empty-state__title", className),
|
|
4311
|
+
...props
|
|
4312
|
+
}
|
|
4313
|
+
);
|
|
4314
|
+
}
|
|
4315
|
+
function EmptyStateDescription({ asChild, className, ...props }) {
|
|
4316
|
+
const Comp = asChild ? SlotPrimitive9.Slot : "p";
|
|
4317
|
+
return /* @__PURE__ */ jsx36(
|
|
4318
|
+
Comp,
|
|
4319
|
+
{
|
|
4320
|
+
"data-slot": "empty-state-description",
|
|
4321
|
+
className: cn("ddga-empty-state__description", className),
|
|
4322
|
+
...props
|
|
4323
|
+
}
|
|
4324
|
+
);
|
|
4325
|
+
}
|
|
4326
|
+
function EmptyStateActions({ asChild, className, ...props }) {
|
|
4327
|
+
const Comp = asChild ? SlotPrimitive9.Slot : "div";
|
|
4328
|
+
return /* @__PURE__ */ jsx36(
|
|
4329
|
+
Comp,
|
|
4330
|
+
{
|
|
4331
|
+
"data-slot": "empty-state-actions",
|
|
4332
|
+
className: cn("ddga-empty-state__actions", className),
|
|
4333
|
+
...props
|
|
4334
|
+
}
|
|
4335
|
+
);
|
|
4092
4336
|
}
|
|
4093
4337
|
|
|
4094
|
-
// src/
|
|
4095
|
-
|
|
4096
|
-
|
|
4338
|
+
// src/components/Stat/Stat.tsx
|
|
4339
|
+
import "react";
|
|
4340
|
+
import { cva as cva34 } from "class-variance-authority";
|
|
4341
|
+
import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
4342
|
+
var statVariants = cva34("ddga-stat", {
|
|
4343
|
+
variants: {
|
|
4344
|
+
variant: {
|
|
4345
|
+
flat: "ddga-stat--flat",
|
|
4346
|
+
elevated: "ddga-stat--elevated",
|
|
4347
|
+
accent: "ddga-stat--accent",
|
|
4348
|
+
// Soft sentiment-tinted gradient surface (reuses the accent tint vars).
|
|
4349
|
+
gradient: "ddga-stat--gradient"
|
|
4350
|
+
},
|
|
4351
|
+
size: {
|
|
4352
|
+
sm: "ddga-stat--sm",
|
|
4353
|
+
md: "ddga-stat--md",
|
|
4354
|
+
lg: "ddga-stat--lg",
|
|
4355
|
+
// Hero/display size for headline KPIs (display-scale value).
|
|
4356
|
+
xl: "ddga-stat--xl"
|
|
4357
|
+
}
|
|
4358
|
+
},
|
|
4359
|
+
defaultVariants: {
|
|
4360
|
+
variant: "flat",
|
|
4361
|
+
size: "md"
|
|
4362
|
+
}
|
|
4363
|
+
});
|
|
4364
|
+
var TREND_ICONS = {
|
|
4365
|
+
up: /* @__PURE__ */ jsx37(CaretUp, { "aria-hidden": "true" }),
|
|
4366
|
+
down: /* @__PURE__ */ jsx37(CaretDown, { "aria-hidden": "true" }),
|
|
4367
|
+
flat: /* @__PURE__ */ jsx37(Minus, { "aria-hidden": "true" })
|
|
4368
|
+
};
|
|
4369
|
+
var TREND_SENTIMENT = {
|
|
4370
|
+
up: "positive",
|
|
4371
|
+
down: "negative",
|
|
4372
|
+
flat: "neutral"
|
|
4373
|
+
};
|
|
4374
|
+
function resolveSentiment(trend, sentiment) {
|
|
4375
|
+
if (sentiment) return sentiment;
|
|
4376
|
+
if (trend) return TREND_SENTIMENT[trend];
|
|
4377
|
+
return void 0;
|
|
4378
|
+
}
|
|
4379
|
+
function Stat({
|
|
4380
|
+
variant,
|
|
4381
|
+
size,
|
|
4382
|
+
label,
|
|
4383
|
+
value,
|
|
4384
|
+
change,
|
|
4385
|
+
changeLabel,
|
|
4386
|
+
trend,
|
|
4387
|
+
sentiment,
|
|
4388
|
+
changeVariant,
|
|
4389
|
+
icon,
|
|
4390
|
+
className,
|
|
4391
|
+
children,
|
|
4392
|
+
...props
|
|
4393
|
+
}) {
|
|
4394
|
+
const resolvedSentiment = resolveSentiment(trend, sentiment);
|
|
4395
|
+
return /* @__PURE__ */ jsxs29(
|
|
4396
|
+
"div",
|
|
4397
|
+
{
|
|
4398
|
+
"data-slot": "stat",
|
|
4399
|
+
"data-variant": variant ?? "flat",
|
|
4400
|
+
"data-trend": trend,
|
|
4401
|
+
"data-sentiment": resolvedSentiment,
|
|
4402
|
+
className: cn(statVariants({ variant, size }), className),
|
|
4403
|
+
...props,
|
|
4404
|
+
children: [
|
|
4405
|
+
label || icon ? /* @__PURE__ */ jsxs29("div", { className: "ddga-stat__label-row", children: [
|
|
4406
|
+
label ? /* @__PURE__ */ jsx37(StatLabel, { children: label }) : null,
|
|
4407
|
+
icon ? /* @__PURE__ */ jsx37("span", { className: "ddga-stat__icon", "aria-hidden": "true", children: icon }) : null
|
|
4408
|
+
] }) : null,
|
|
4409
|
+
value ? /* @__PURE__ */ jsx37(StatValue, { children: value }) : null,
|
|
4410
|
+
change || changeLabel ? /* @__PURE__ */ jsxs29("div", { className: "ddga-stat__change-row", children: [
|
|
4411
|
+
change ? /* @__PURE__ */ jsx37(StatChange, { trend, sentiment, variant: changeVariant, children: change }) : null,
|
|
4412
|
+
changeLabel ? /* @__PURE__ */ jsx37("span", { className: "ddga-stat__change-label", children: changeLabel }) : null
|
|
4413
|
+
] }) : null,
|
|
4414
|
+
children
|
|
4415
|
+
]
|
|
4416
|
+
}
|
|
4417
|
+
);
|
|
4418
|
+
}
|
|
4419
|
+
function StatLabel({ className, ...props }) {
|
|
4420
|
+
return /* @__PURE__ */ jsx37("div", { "data-slot": "stat-label", className: cn("ddga-stat__label", className), ...props });
|
|
4421
|
+
}
|
|
4422
|
+
function StatValue({ className, ...props }) {
|
|
4423
|
+
return /* @__PURE__ */ jsx37("div", { "data-slot": "stat-value", className: cn("ddga-stat__value", className), ...props });
|
|
4424
|
+
}
|
|
4425
|
+
function StatChart({ className, ...props }) {
|
|
4426
|
+
return /* @__PURE__ */ jsx37("div", { "data-slot": "stat-chart", className: cn("ddga-stat__chart", className), ...props });
|
|
4427
|
+
}
|
|
4428
|
+
function StatChange({ trend, sentiment, variant, className, children, ...props }) {
|
|
4429
|
+
const resolvedSentiment = resolveSentiment(trend, sentiment);
|
|
4430
|
+
return /* @__PURE__ */ jsxs29(
|
|
4431
|
+
"div",
|
|
4432
|
+
{
|
|
4433
|
+
"data-slot": "stat-change",
|
|
4434
|
+
"data-trend": trend,
|
|
4435
|
+
"data-sentiment": resolvedSentiment,
|
|
4436
|
+
className: cn(
|
|
4437
|
+
"ddga-stat__change",
|
|
4438
|
+
resolvedSentiment ? `ddga-stat__change--${resolvedSentiment}` : null,
|
|
4439
|
+
variant === "chip" && "ddga-stat__change--chip",
|
|
4440
|
+
className
|
|
4441
|
+
),
|
|
4442
|
+
...props,
|
|
4443
|
+
children: [
|
|
4444
|
+
trend ? /* @__PURE__ */ jsx37("span", { className: "ddga-stat__change-icon", children: TREND_ICONS[trend] }) : null,
|
|
4445
|
+
children
|
|
4446
|
+
]
|
|
4447
|
+
}
|
|
4448
|
+
);
|
|
4449
|
+
}
|
|
4450
|
+
|
|
4451
|
+
// src/components/Stat/StatGroup.tsx
|
|
4452
|
+
import { cva as cva35 } from "class-variance-authority";
|
|
4453
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
4454
|
+
var statGroupVariants = cva35("ddga-stat-group", {
|
|
4455
|
+
variants: {
|
|
4456
|
+
orientation: {
|
|
4457
|
+
horizontal: "ddga-stat-group--horizontal",
|
|
4458
|
+
vertical: "ddga-stat-group--vertical"
|
|
4459
|
+
},
|
|
4460
|
+
gap: {
|
|
4461
|
+
sm: "ddga-stat-group--gap-sm",
|
|
4462
|
+
md: "ddga-stat-group--gap-md",
|
|
4463
|
+
lg: "ddga-stat-group--gap-lg"
|
|
4464
|
+
}
|
|
4465
|
+
},
|
|
4466
|
+
defaultVariants: {
|
|
4467
|
+
orientation: "horizontal",
|
|
4468
|
+
gap: "md"
|
|
4469
|
+
}
|
|
4470
|
+
});
|
|
4471
|
+
function StatGroup({ orientation, gap, columns, className, style, ...props }) {
|
|
4472
|
+
return /* @__PURE__ */ jsx38(
|
|
4473
|
+
"div",
|
|
4474
|
+
{
|
|
4475
|
+
"data-slot": "stat-group",
|
|
4476
|
+
className: cn(
|
|
4477
|
+
statGroupVariants({ orientation, gap }),
|
|
4478
|
+
columns != null && "ddga-stat-group--cols",
|
|
4479
|
+
className
|
|
4480
|
+
),
|
|
4481
|
+
style: columns != null ? { "--ddga-stat-group-columns": columns, ...style } : style,
|
|
4482
|
+
...props
|
|
4483
|
+
}
|
|
4484
|
+
);
|
|
4485
|
+
}
|
|
4486
|
+
|
|
4487
|
+
// src/components/Popover/Popover.tsx
|
|
4488
|
+
import { useContext as useContext9 } from "react";
|
|
4489
|
+
import { Popover as PopoverPrimitive2 } from "radix-ui";
|
|
4490
|
+
import { cva as cva36 } from "class-variance-authority";
|
|
4491
|
+
import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
4492
|
+
var popoverContentVariants = cva36("ddga-popover", {
|
|
4493
|
+
variants: {
|
|
4494
|
+
size: {
|
|
4495
|
+
sm: "ddga-popover--sm",
|
|
4496
|
+
md: "ddga-popover--md"
|
|
4497
|
+
}
|
|
4498
|
+
},
|
|
4499
|
+
defaultVariants: {
|
|
4500
|
+
size: "md"
|
|
4501
|
+
}
|
|
4502
|
+
});
|
|
4503
|
+
function Popover(props) {
|
|
4504
|
+
return /* @__PURE__ */ jsx39(PopoverPrimitive2.Root, { ...props });
|
|
4505
|
+
}
|
|
4506
|
+
function PopoverTrigger({ className, ...props }) {
|
|
4507
|
+
return /* @__PURE__ */ jsx39(PopoverPrimitive2.Trigger, { "data-slot": "popover-trigger", className, ...props });
|
|
4508
|
+
}
|
|
4509
|
+
function PopoverAnchor(props) {
|
|
4510
|
+
return /* @__PURE__ */ jsx39(PopoverPrimitive2.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
4511
|
+
}
|
|
4512
|
+
function PopoverContent({
|
|
4513
|
+
size,
|
|
4514
|
+
arrow = false,
|
|
4515
|
+
sideOffset = 6,
|
|
4516
|
+
className,
|
|
4517
|
+
children,
|
|
4518
|
+
...props
|
|
4519
|
+
}) {
|
|
4520
|
+
if (process.env.NODE_ENV === "development" && !props["aria-label"] && !props["aria-labelledby"]) {
|
|
4521
|
+
console.warn(
|
|
4522
|
+
'[@dev-dga/react] PopoverContent renders role="dialog" and should have an `aria-label` or `aria-labelledby` so the panel has an accessible name.'
|
|
4523
|
+
);
|
|
4524
|
+
}
|
|
4525
|
+
const ctx = useContext9(DgaContext);
|
|
4526
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
4527
|
+
return /* @__PURE__ */ jsx39(PopoverPrimitive2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs30(
|
|
4528
|
+
PopoverPrimitive2.Content,
|
|
4529
|
+
{
|
|
4530
|
+
"data-slot": "popover-content",
|
|
4531
|
+
sideOffset,
|
|
4532
|
+
className: cn(popoverContentVariants({ size }), className),
|
|
4533
|
+
...props,
|
|
4534
|
+
children: [
|
|
4535
|
+
children,
|
|
4536
|
+
arrow ? /* @__PURE__ */ jsx39(PopoverPrimitive2.Arrow, { className: "ddga-popover__arrow", width: 16, height: 8 }) : null
|
|
4537
|
+
]
|
|
4538
|
+
}
|
|
4539
|
+
) });
|
|
4540
|
+
}
|
|
4541
|
+
function PopoverClose({
|
|
4542
|
+
className,
|
|
4543
|
+
children,
|
|
4544
|
+
closeLabel = "Close",
|
|
4545
|
+
asChild,
|
|
4546
|
+
...props
|
|
4547
|
+
}) {
|
|
4548
|
+
const hasRenderableChildren = children != null && children !== false;
|
|
4549
|
+
if (asChild || hasRenderableChildren) {
|
|
4550
|
+
return /* @__PURE__ */ jsx39(
|
|
4551
|
+
PopoverPrimitive2.Close,
|
|
4552
|
+
{
|
|
4553
|
+
"data-slot": "popover-close",
|
|
4554
|
+
asChild,
|
|
4555
|
+
className,
|
|
4556
|
+
...props,
|
|
4557
|
+
children
|
|
4558
|
+
}
|
|
4559
|
+
);
|
|
4560
|
+
}
|
|
4561
|
+
return /* @__PURE__ */ jsx39(
|
|
4562
|
+
PopoverPrimitive2.Close,
|
|
4563
|
+
{
|
|
4564
|
+
"data-slot": "popover-close",
|
|
4565
|
+
"aria-label": closeLabel,
|
|
4566
|
+
className: cn("ddga-popover__close", className),
|
|
4567
|
+
...props,
|
|
4568
|
+
children: /* @__PURE__ */ jsx39(Close, { "aria-hidden": "true" })
|
|
4569
|
+
}
|
|
4570
|
+
);
|
|
4571
|
+
}
|
|
4572
|
+
|
|
4573
|
+
// src/components/Sidebar/Sidebar.tsx
|
|
4574
|
+
import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useState as useState9 } from "react";
|
|
4575
|
+
import { Slot as SlotPrimitive10 } from "radix-ui";
|
|
4576
|
+
|
|
4577
|
+
// src/components/Sidebar/SidebarContext.ts
|
|
4578
|
+
import { createContext as createContext3, useContext as useContext10 } from "react";
|
|
4579
|
+
var SidebarContext = createContext3(null);
|
|
4580
|
+
function useSidebar() {
|
|
4581
|
+
const ctx = useContext10(SidebarContext);
|
|
4582
|
+
if (!ctx) {
|
|
4583
|
+
throw new Error("useSidebar must be used within a <SidebarProvider>");
|
|
4584
|
+
}
|
|
4585
|
+
return ctx;
|
|
4586
|
+
}
|
|
4587
|
+
|
|
4588
|
+
// src/components/Sidebar/useIsMobile.ts
|
|
4589
|
+
import { useEffect, useState as useState8 } from "react";
|
|
4590
|
+
function useIsMobile(breakpoint = 768) {
|
|
4591
|
+
const [isMobile, setIsMobile] = useState8(false);
|
|
4592
|
+
useEffect(() => {
|
|
4593
|
+
const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
|
|
4594
|
+
const onChange = () => setIsMobile(mql.matches);
|
|
4595
|
+
onChange();
|
|
4596
|
+
mql.addEventListener("change", onChange);
|
|
4597
|
+
return () => mql.removeEventListener("change", onChange);
|
|
4598
|
+
}, [breakpoint]);
|
|
4599
|
+
return isMobile;
|
|
4600
|
+
}
|
|
4601
|
+
|
|
4602
|
+
// src/components/Sidebar/Sidebar.tsx
|
|
4603
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
4604
|
+
function SidebarProvider({
|
|
4605
|
+
defaultOpen = true,
|
|
4606
|
+
open: openProp,
|
|
4607
|
+
onOpenChange,
|
|
4608
|
+
mobileBreakpoint = 768,
|
|
4609
|
+
keyboardShortcut = true,
|
|
4610
|
+
className,
|
|
4611
|
+
style,
|
|
4612
|
+
children,
|
|
4613
|
+
...props
|
|
4614
|
+
}) {
|
|
4615
|
+
const isMobile = useIsMobile(mobileBreakpoint);
|
|
4616
|
+
const [openMobile, setOpenMobile] = useState9(false);
|
|
4617
|
+
const isControlled = openProp !== void 0;
|
|
4618
|
+
const [openInternal, setOpenInternal] = useState9(defaultOpen);
|
|
4619
|
+
const open = isControlled ? openProp : openInternal;
|
|
4620
|
+
const setOpen = useCallback3(
|
|
4621
|
+
(value2) => {
|
|
4622
|
+
if (!isControlled) setOpenInternal(value2);
|
|
4623
|
+
onOpenChange?.(value2);
|
|
4624
|
+
},
|
|
4625
|
+
[isControlled, onOpenChange]
|
|
4626
|
+
);
|
|
4627
|
+
const toggleSidebar = useCallback3(() => {
|
|
4628
|
+
if (isMobile) {
|
|
4629
|
+
setOpenMobile((v) => !v);
|
|
4630
|
+
return;
|
|
4631
|
+
}
|
|
4632
|
+
if (isControlled) {
|
|
4633
|
+
onOpenChange?.(!open);
|
|
4634
|
+
} else {
|
|
4635
|
+
setOpenInternal((v) => !v);
|
|
4636
|
+
}
|
|
4637
|
+
}, [isMobile, isControlled, onOpenChange, open]);
|
|
4638
|
+
useEffect2(() => {
|
|
4639
|
+
if (!keyboardShortcut) return;
|
|
4640
|
+
const onKeyDown = (e) => {
|
|
4641
|
+
if (e.key.toLowerCase() === "b" && (e.metaKey || e.ctrlKey)) {
|
|
4642
|
+
e.preventDefault();
|
|
4643
|
+
toggleSidebar();
|
|
4644
|
+
}
|
|
4645
|
+
};
|
|
4646
|
+
window.addEventListener("keydown", onKeyDown);
|
|
4647
|
+
return () => window.removeEventListener("keydown", onKeyDown);
|
|
4648
|
+
}, [keyboardShortcut, toggleSidebar]);
|
|
4649
|
+
const state = open ? "expanded" : "collapsed";
|
|
4650
|
+
const value = useMemo3(
|
|
4651
|
+
() => ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }),
|
|
4652
|
+
[state, open, setOpen, openMobile, isMobile, toggleSidebar]
|
|
4653
|
+
);
|
|
4654
|
+
return /* @__PURE__ */ jsx40(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx40(
|
|
4655
|
+
"div",
|
|
4656
|
+
{
|
|
4657
|
+
"data-slot": "sidebar-wrapper",
|
|
4658
|
+
className: cn("ddga-sidebar-wrapper", className),
|
|
4659
|
+
style,
|
|
4660
|
+
...props,
|
|
4661
|
+
children
|
|
4662
|
+
}
|
|
4663
|
+
) });
|
|
4664
|
+
}
|
|
4665
|
+
function Sidebar({
|
|
4666
|
+
variant = "sidebar",
|
|
4667
|
+
collapsible = "icon",
|
|
4668
|
+
side = "start",
|
|
4669
|
+
className,
|
|
4670
|
+
children,
|
|
4671
|
+
"aria-label": ariaLabel = "Sidebar",
|
|
4672
|
+
...props
|
|
4673
|
+
}) {
|
|
4674
|
+
const { isMobile, openMobile, setOpenMobile, state } = useSidebar();
|
|
4675
|
+
if (isMobile) {
|
|
4676
|
+
return /* @__PURE__ */ jsx40(Drawer, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsx40(
|
|
4677
|
+
DrawerContent,
|
|
4678
|
+
{
|
|
4679
|
+
side,
|
|
4680
|
+
size: "sm",
|
|
4681
|
+
"aria-label": ariaLabel,
|
|
4682
|
+
"data-mobile": "true",
|
|
4683
|
+
"data-variant": variant,
|
|
4684
|
+
"data-side": side,
|
|
4685
|
+
className: cn("ddga-sidebar", "ddga-sidebar--mobile", className),
|
|
4686
|
+
children
|
|
4687
|
+
}
|
|
4688
|
+
) });
|
|
4689
|
+
}
|
|
4690
|
+
return /* @__PURE__ */ jsx40(
|
|
4691
|
+
"aside",
|
|
4692
|
+
{
|
|
4693
|
+
"data-slot": "sidebar",
|
|
4694
|
+
"aria-label": ariaLabel,
|
|
4695
|
+
"data-state": state,
|
|
4696
|
+
"data-collapsible": collapsible,
|
|
4697
|
+
"data-variant": variant,
|
|
4698
|
+
"data-side": side,
|
|
4699
|
+
className: cn("ddga-sidebar", className),
|
|
4700
|
+
...props,
|
|
4701
|
+
children
|
|
4702
|
+
}
|
|
4703
|
+
);
|
|
4704
|
+
}
|
|
4705
|
+
function SidebarTrigger({
|
|
4706
|
+
asChild,
|
|
4707
|
+
className,
|
|
4708
|
+
onClick,
|
|
4709
|
+
children,
|
|
4710
|
+
"aria-label": ariaLabel = "Toggle sidebar",
|
|
4711
|
+
...props
|
|
4712
|
+
}) {
|
|
4713
|
+
const { toggleSidebar, open, openMobile, isMobile } = useSidebar();
|
|
4714
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "button";
|
|
4715
|
+
return /* @__PURE__ */ jsx40(
|
|
4716
|
+
Comp,
|
|
4717
|
+
{
|
|
4718
|
+
type: asChild ? void 0 : "button",
|
|
4719
|
+
"data-slot": "sidebar-trigger",
|
|
4720
|
+
"aria-label": asChild ? void 0 : ariaLabel,
|
|
4721
|
+
"aria-haspopup": isMobile ? "dialog" : void 0,
|
|
4722
|
+
"aria-expanded": isMobile ? openMobile : open,
|
|
4723
|
+
className: cn("ddga-sidebar__trigger", className),
|
|
4724
|
+
onClick: (e) => {
|
|
4725
|
+
onClick?.(e);
|
|
4726
|
+
toggleSidebar();
|
|
4727
|
+
},
|
|
4728
|
+
...props,
|
|
4729
|
+
children: children ?? /* @__PURE__ */ jsx40(PanelLeft, { "aria-hidden": "true" })
|
|
4730
|
+
}
|
|
4731
|
+
);
|
|
4732
|
+
}
|
|
4733
|
+
function SidebarRail({
|
|
4734
|
+
className,
|
|
4735
|
+
"aria-label": ariaLabel = "Toggle sidebar",
|
|
4736
|
+
...props
|
|
4737
|
+
}) {
|
|
4738
|
+
const { toggleSidebar } = useSidebar();
|
|
4739
|
+
return /* @__PURE__ */ jsx40(
|
|
4740
|
+
"button",
|
|
4741
|
+
{
|
|
4742
|
+
type: "button",
|
|
4743
|
+
"data-slot": "sidebar-rail",
|
|
4744
|
+
"aria-label": ariaLabel,
|
|
4745
|
+
title: ariaLabel,
|
|
4746
|
+
tabIndex: -1,
|
|
4747
|
+
className: cn("ddga-sidebar__rail", className),
|
|
4748
|
+
onClick: toggleSidebar,
|
|
4749
|
+
...props
|
|
4750
|
+
}
|
|
4751
|
+
);
|
|
4752
|
+
}
|
|
4753
|
+
function SidebarInset({ asChild, className, ...props }) {
|
|
4754
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "main";
|
|
4755
|
+
return /* @__PURE__ */ jsx40(Comp, { "data-slot": "sidebar-inset", className: cn("ddga-sidebar-inset", className), ...props });
|
|
4756
|
+
}
|
|
4757
|
+
function SidebarHeader({ asChild, className, ...props }) {
|
|
4758
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "div";
|
|
4759
|
+
return /* @__PURE__ */ jsx40(Comp, { "data-slot": "sidebar-header", className: cn("ddga-sidebar__header", className), ...props });
|
|
4760
|
+
}
|
|
4761
|
+
function SidebarContent({ asChild, className, ...props }) {
|
|
4762
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "div";
|
|
4763
|
+
return /* @__PURE__ */ jsx40(
|
|
4764
|
+
Comp,
|
|
4765
|
+
{
|
|
4766
|
+
"data-slot": "sidebar-content",
|
|
4767
|
+
className: cn("ddga-sidebar__content", className),
|
|
4768
|
+
...props
|
|
4769
|
+
}
|
|
4770
|
+
);
|
|
4771
|
+
}
|
|
4772
|
+
function SidebarFooter({ asChild, className, ...props }) {
|
|
4773
|
+
const Comp = asChild ? SlotPrimitive10.Slot : "div";
|
|
4774
|
+
return /* @__PURE__ */ jsx40(Comp, { "data-slot": "sidebar-footer", className: cn("ddga-sidebar__footer", className), ...props });
|
|
4775
|
+
}
|
|
4776
|
+
function SidebarSeparator({ className, ...props }) {
|
|
4777
|
+
return /* @__PURE__ */ jsx40(
|
|
4778
|
+
"hr",
|
|
4779
|
+
{
|
|
4780
|
+
"data-slot": "sidebar-separator",
|
|
4781
|
+
className: cn("ddga-sidebar__separator", className),
|
|
4782
|
+
...props
|
|
4783
|
+
}
|
|
4784
|
+
);
|
|
4785
|
+
}
|
|
4786
|
+
|
|
4787
|
+
// src/components/Sidebar/SidebarGroup.tsx
|
|
4788
|
+
import { Slot as SlotPrimitive11 } from "radix-ui";
|
|
4789
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
4790
|
+
function SidebarGroup({ asChild, className, ...props }) {
|
|
4791
|
+
const Comp = asChild ? SlotPrimitive11.Slot : "div";
|
|
4792
|
+
return /* @__PURE__ */ jsx41(
|
|
4793
|
+
Comp,
|
|
4794
|
+
{
|
|
4795
|
+
"data-slot": "sidebar-group",
|
|
4796
|
+
role: "group",
|
|
4797
|
+
className: cn("ddga-sidebar__group", className),
|
|
4798
|
+
...props
|
|
4799
|
+
}
|
|
4800
|
+
);
|
|
4801
|
+
}
|
|
4802
|
+
function SidebarGroupLabel({ asChild, className, ...props }) {
|
|
4803
|
+
const Comp = asChild ? SlotPrimitive11.Slot : "div";
|
|
4804
|
+
return /* @__PURE__ */ jsx41(
|
|
4805
|
+
Comp,
|
|
4806
|
+
{
|
|
4807
|
+
"data-slot": "sidebar-group-label",
|
|
4808
|
+
className: cn("ddga-sidebar__group-label", className),
|
|
4809
|
+
...props
|
|
4810
|
+
}
|
|
4811
|
+
);
|
|
4812
|
+
}
|
|
4813
|
+
function SidebarGroupAction({ asChild, className, ...props }) {
|
|
4814
|
+
const Comp = asChild ? SlotPrimitive11.Slot : "button";
|
|
4815
|
+
return /* @__PURE__ */ jsx41(
|
|
4816
|
+
Comp,
|
|
4817
|
+
{
|
|
4818
|
+
type: asChild ? void 0 : "button",
|
|
4819
|
+
"data-slot": "sidebar-group-action",
|
|
4820
|
+
className: cn("ddga-sidebar__group-action", className),
|
|
4821
|
+
...props
|
|
4822
|
+
}
|
|
4823
|
+
);
|
|
4824
|
+
}
|
|
4825
|
+
function SidebarGroupContent({ asChild, className, ...props }) {
|
|
4826
|
+
const Comp = asChild ? SlotPrimitive11.Slot : "div";
|
|
4827
|
+
return /* @__PURE__ */ jsx41(
|
|
4828
|
+
Comp,
|
|
4829
|
+
{
|
|
4830
|
+
"data-slot": "sidebar-group-content",
|
|
4831
|
+
className: cn("ddga-sidebar__group-content", className),
|
|
4832
|
+
...props
|
|
4833
|
+
}
|
|
4834
|
+
);
|
|
4835
|
+
}
|
|
4836
|
+
|
|
4837
|
+
// src/components/Sidebar/SidebarMenu.tsx
|
|
4838
|
+
import { Slot as SlotPrimitive12 } from "radix-ui";
|
|
4839
|
+
import { cva as cva37 } from "class-variance-authority";
|
|
4840
|
+
|
|
4841
|
+
// src/hooks/useDir.ts
|
|
4842
|
+
function useDir() {
|
|
4843
|
+
return useDga().dir;
|
|
4844
|
+
}
|
|
4845
|
+
|
|
4846
|
+
// src/components/Sidebar/SidebarMenu.tsx
|
|
4847
|
+
import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
4848
|
+
function SidebarMenu({ className, ...props }) {
|
|
4849
|
+
return /* @__PURE__ */ jsx42("ul", { "data-slot": "sidebar-menu", className: cn("ddga-sidebar__menu", className), ...props });
|
|
4850
|
+
}
|
|
4851
|
+
function SidebarMenuItem({ className, ...props }) {
|
|
4852
|
+
return /* @__PURE__ */ jsx42(
|
|
4853
|
+
"li",
|
|
4854
|
+
{
|
|
4855
|
+
"data-slot": "sidebar-menu-item",
|
|
4856
|
+
className: cn("ddga-sidebar__menu-item", className),
|
|
4857
|
+
...props
|
|
4858
|
+
}
|
|
4859
|
+
);
|
|
4860
|
+
}
|
|
4861
|
+
var sidebarMenuButtonVariants = cva37("ddga-sidebar__menu-button", {
|
|
4862
|
+
variants: {
|
|
4863
|
+
size: {
|
|
4864
|
+
sm: "ddga-sidebar__menu-button--sm",
|
|
4865
|
+
md: "ddga-sidebar__menu-button--md",
|
|
4866
|
+
lg: "ddga-sidebar__menu-button--lg"
|
|
4867
|
+
}
|
|
4868
|
+
},
|
|
4869
|
+
defaultVariants: { size: "md" }
|
|
4870
|
+
});
|
|
4871
|
+
function SidebarMenuButton({
|
|
4872
|
+
asChild,
|
|
4873
|
+
isActive,
|
|
4874
|
+
size,
|
|
4875
|
+
tooltip,
|
|
4876
|
+
className,
|
|
4877
|
+
...props
|
|
4878
|
+
}) {
|
|
4879
|
+
const { state, isMobile } = useSidebar();
|
|
4880
|
+
const dir = useDir();
|
|
4881
|
+
const Comp = asChild ? SlotPrimitive12.Slot : "button";
|
|
4882
|
+
const button = /* @__PURE__ */ jsx42(
|
|
4883
|
+
Comp,
|
|
4884
|
+
{
|
|
4885
|
+
type: asChild ? void 0 : "button",
|
|
4886
|
+
"data-slot": "sidebar-menu-button",
|
|
4887
|
+
"data-active": isActive || void 0,
|
|
4888
|
+
"data-size": size ?? "md",
|
|
4889
|
+
"aria-current": isActive ? "page" : void 0,
|
|
4890
|
+
className: cn(sidebarMenuButtonVariants({ size }), className),
|
|
4891
|
+
...props
|
|
4892
|
+
}
|
|
4893
|
+
);
|
|
4894
|
+
if (!tooltip || state !== "collapsed" || isMobile) {
|
|
4895
|
+
return button;
|
|
4896
|
+
}
|
|
4897
|
+
return /* @__PURE__ */ jsxs31(Tooltip, { children: [
|
|
4898
|
+
/* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42("span", { "data-slot": "tooltip-trigger", style: { display: "contents" }, children: button }) }),
|
|
4899
|
+
/* @__PURE__ */ jsx42(TooltipContent, { side: dir === "rtl" ? "left" : "right", children: tooltip })
|
|
4900
|
+
] });
|
|
4901
|
+
}
|
|
4902
|
+
function SidebarMenuAction({ asChild, showOnHover, className, ...props }) {
|
|
4903
|
+
const Comp = asChild ? SlotPrimitive12.Slot : "button";
|
|
4904
|
+
return /* @__PURE__ */ jsx42(
|
|
4905
|
+
Comp,
|
|
4906
|
+
{
|
|
4907
|
+
type: asChild ? void 0 : "button",
|
|
4908
|
+
"data-slot": "sidebar-menu-action",
|
|
4909
|
+
"data-show-on-hover": showOnHover || void 0,
|
|
4910
|
+
className: cn("ddga-sidebar__menu-action", className),
|
|
4911
|
+
...props
|
|
4912
|
+
}
|
|
4913
|
+
);
|
|
4914
|
+
}
|
|
4915
|
+
function SidebarMenuBadge({ className, ...props }) {
|
|
4916
|
+
return /* @__PURE__ */ jsx42(
|
|
4917
|
+
"span",
|
|
4918
|
+
{
|
|
4919
|
+
"data-slot": "sidebar-menu-badge",
|
|
4920
|
+
className: cn("ddga-sidebar__menu-badge", className),
|
|
4921
|
+
...props
|
|
4922
|
+
}
|
|
4923
|
+
);
|
|
4924
|
+
}
|
|
4925
|
+
function SidebarMenuSkeleton({ showIcon, className, ...props }) {
|
|
4926
|
+
return /* @__PURE__ */ jsxs31(
|
|
4927
|
+
"div",
|
|
4928
|
+
{
|
|
4929
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
4930
|
+
className: cn("ddga-sidebar__menu-skeleton", className),
|
|
4931
|
+
...props,
|
|
4932
|
+
children: [
|
|
4933
|
+
showIcon ? /* @__PURE__ */ jsx42(Skeleton, { shape: "circle", width: "1rem", height: "1rem" }) : null,
|
|
4934
|
+
/* @__PURE__ */ jsx42(Skeleton, { shape: "text", className: "ddga-sidebar__menu-skeleton-text" })
|
|
4935
|
+
]
|
|
4936
|
+
}
|
|
4937
|
+
);
|
|
4938
|
+
}
|
|
4939
|
+
function SidebarMenuSub({ className, ...props }) {
|
|
4940
|
+
return /* @__PURE__ */ jsx42(
|
|
4941
|
+
"ul",
|
|
4942
|
+
{
|
|
4943
|
+
"data-slot": "sidebar-menu-sub",
|
|
4944
|
+
className: cn("ddga-sidebar__menu-sub", className),
|
|
4945
|
+
...props
|
|
4946
|
+
}
|
|
4947
|
+
);
|
|
4948
|
+
}
|
|
4949
|
+
function SidebarMenuSubItem({ className, ...props }) {
|
|
4950
|
+
return /* @__PURE__ */ jsx42(
|
|
4951
|
+
"li",
|
|
4952
|
+
{
|
|
4953
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
4954
|
+
className: cn("ddga-sidebar__menu-sub-item", className),
|
|
4955
|
+
...props
|
|
4956
|
+
}
|
|
4957
|
+
);
|
|
4958
|
+
}
|
|
4959
|
+
var sidebarMenuSubButtonVariants = cva37("ddga-sidebar__menu-sub-button", {
|
|
4960
|
+
variants: {
|
|
4961
|
+
size: {
|
|
4962
|
+
sm: "ddga-sidebar__menu-sub-button--sm",
|
|
4963
|
+
md: "ddga-sidebar__menu-sub-button--md"
|
|
4964
|
+
}
|
|
4965
|
+
},
|
|
4966
|
+
defaultVariants: { size: "md" }
|
|
4967
|
+
});
|
|
4968
|
+
function SidebarMenuSubButton({
|
|
4969
|
+
asChild,
|
|
4970
|
+
isActive,
|
|
4971
|
+
size,
|
|
4972
|
+
className,
|
|
4973
|
+
...props
|
|
4974
|
+
}) {
|
|
4975
|
+
const Comp = asChild ? SlotPrimitive12.Slot : "a";
|
|
4976
|
+
return /* @__PURE__ */ jsx42(
|
|
4977
|
+
Comp,
|
|
4978
|
+
{
|
|
4979
|
+
"data-slot": "sidebar-menu-sub-button",
|
|
4980
|
+
"data-active": isActive || void 0,
|
|
4981
|
+
"data-size": size ?? "md",
|
|
4982
|
+
"aria-current": isActive ? "page" : void 0,
|
|
4983
|
+
className: cn(sidebarMenuSubButtonVariants({ size }), className),
|
|
4984
|
+
...props
|
|
4985
|
+
}
|
|
4986
|
+
);
|
|
4987
|
+
}
|
|
4988
|
+
|
|
4989
|
+
// src/components/ScrollArea/ScrollArea.tsx
|
|
4990
|
+
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
|
|
4991
|
+
import { cva as cva38 } from "class-variance-authority";
|
|
4992
|
+
import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
4993
|
+
var scrollAreaVariants = cva38("ddga-scroll-area", {
|
|
4994
|
+
variants: {
|
|
4995
|
+
orientation: {
|
|
4996
|
+
vertical: "ddga-scroll-area--vertical",
|
|
4997
|
+
horizontal: "ddga-scroll-area--horizontal",
|
|
4998
|
+
both: "ddga-scroll-area--both"
|
|
4999
|
+
}
|
|
5000
|
+
},
|
|
5001
|
+
defaultVariants: {
|
|
5002
|
+
orientation: "vertical"
|
|
5003
|
+
}
|
|
5004
|
+
});
|
|
5005
|
+
function warnMissingLabel(ariaLabel, ariaLabelledby) {
|
|
5006
|
+
if (process.env.NODE_ENV === "production") return;
|
|
5007
|
+
if (ariaLabel || ariaLabelledby) return;
|
|
5008
|
+
console.warn(
|
|
5009
|
+
"[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 }}`."
|
|
5010
|
+
);
|
|
5011
|
+
}
|
|
5012
|
+
function ScrollArea({
|
|
5013
|
+
className,
|
|
5014
|
+
orientation = "vertical",
|
|
5015
|
+
type = "hover",
|
|
5016
|
+
scrollHideDelay = 600,
|
|
5017
|
+
viewportRef,
|
|
5018
|
+
viewportProps,
|
|
5019
|
+
children,
|
|
5020
|
+
"aria-label": ariaLabel,
|
|
5021
|
+
"aria-labelledby": ariaLabelledby,
|
|
5022
|
+
...props
|
|
5023
|
+
}) {
|
|
5024
|
+
warnMissingLabel(ariaLabel, ariaLabelledby);
|
|
5025
|
+
const hasLabel = Boolean(ariaLabel || ariaLabelledby);
|
|
5026
|
+
const showVertical = orientation === "vertical" || orientation === "both";
|
|
5027
|
+
const showHorizontal = orientation === "horizontal" || orientation === "both";
|
|
5028
|
+
const { className: viewportClassName, ...restViewportProps } = viewportProps ?? {};
|
|
5029
|
+
return /* @__PURE__ */ jsxs32(
|
|
5030
|
+
ScrollAreaPrimitive.Root,
|
|
5031
|
+
{
|
|
5032
|
+
"data-slot": "scroll-area",
|
|
5033
|
+
type,
|
|
5034
|
+
scrollHideDelay,
|
|
5035
|
+
className: cn(scrollAreaVariants({ orientation }), className),
|
|
5036
|
+
...props,
|
|
5037
|
+
children: [
|
|
5038
|
+
/* @__PURE__ */ jsx43(
|
|
5039
|
+
ScrollAreaPrimitive.Viewport,
|
|
5040
|
+
{
|
|
5041
|
+
"data-slot": "scroll-area-viewport",
|
|
5042
|
+
className: cn("ddga-scroll-area__viewport", viewportClassName),
|
|
5043
|
+
ref: viewportRef,
|
|
5044
|
+
tabIndex: 0,
|
|
5045
|
+
role: hasLabel ? "region" : void 0,
|
|
5046
|
+
"aria-label": ariaLabel,
|
|
5047
|
+
"aria-labelledby": ariaLabelledby,
|
|
5048
|
+
...restViewportProps,
|
|
5049
|
+
children
|
|
5050
|
+
}
|
|
5051
|
+
),
|
|
5052
|
+
showVertical ? /* @__PURE__ */ jsx43(
|
|
5053
|
+
ScrollAreaPrimitive.Scrollbar,
|
|
5054
|
+
{
|
|
5055
|
+
"data-slot": "scroll-area-scrollbar",
|
|
5056
|
+
orientation: "vertical",
|
|
5057
|
+
className: "ddga-scroll-area__scrollbar",
|
|
5058
|
+
children: /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Thumb, { className: "ddga-scroll-area__thumb" })
|
|
5059
|
+
}
|
|
5060
|
+
) : null,
|
|
5061
|
+
showHorizontal ? /* @__PURE__ */ jsx43(
|
|
5062
|
+
ScrollAreaPrimitive.Scrollbar,
|
|
5063
|
+
{
|
|
5064
|
+
"data-slot": "scroll-area-scrollbar",
|
|
5065
|
+
orientation: "horizontal",
|
|
5066
|
+
className: "ddga-scroll-area__scrollbar",
|
|
5067
|
+
children: /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Thumb, { className: "ddga-scroll-area__thumb" })
|
|
5068
|
+
}
|
|
5069
|
+
) : null,
|
|
5070
|
+
orientation === "both" ? /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Corner, { className: "ddga-scroll-area__corner" }) : null
|
|
5071
|
+
]
|
|
5072
|
+
}
|
|
5073
|
+
);
|
|
5074
|
+
}
|
|
5075
|
+
|
|
5076
|
+
// src/components/Menubar/Menubar.tsx
|
|
5077
|
+
import { useContext as useContext11 } from "react";
|
|
5078
|
+
import { Menubar as MenubarPrimitive } from "radix-ui";
|
|
5079
|
+
import { cva as cva39 } from "class-variance-authority";
|
|
5080
|
+
import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
5081
|
+
var menubarContentVariants = cva39("ddga-menubar-menu", {
|
|
5082
|
+
variants: {
|
|
5083
|
+
size: {
|
|
5084
|
+
sm: "ddga-menubar-menu--sm",
|
|
5085
|
+
md: "ddga-menubar-menu--md"
|
|
5086
|
+
}
|
|
5087
|
+
},
|
|
5088
|
+
defaultVariants: {
|
|
5089
|
+
size: "md"
|
|
5090
|
+
}
|
|
5091
|
+
});
|
|
5092
|
+
var menubarTriggerVariants = cva39("ddga-menubar__trigger", {
|
|
5093
|
+
variants: {
|
|
5094
|
+
variant: {
|
|
5095
|
+
default: "ddga-menubar__trigger--default",
|
|
5096
|
+
outline: "ddga-menubar__trigger--outline"
|
|
5097
|
+
}
|
|
5098
|
+
},
|
|
5099
|
+
defaultVariants: {
|
|
5100
|
+
variant: "default"
|
|
5101
|
+
}
|
|
5102
|
+
});
|
|
5103
|
+
function Menubar({ className, ...props }) {
|
|
5104
|
+
return /* @__PURE__ */ jsx44(
|
|
5105
|
+
MenubarPrimitive.Root,
|
|
5106
|
+
{
|
|
5107
|
+
"data-slot": "menubar",
|
|
5108
|
+
className: cn("ddga-menubar", className),
|
|
5109
|
+
...props
|
|
5110
|
+
}
|
|
5111
|
+
);
|
|
5112
|
+
}
|
|
5113
|
+
function MenubarMenu(props) {
|
|
5114
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.Menu, { ...props });
|
|
5115
|
+
}
|
|
5116
|
+
function MenubarTrigger({ variant, className, ...props }) {
|
|
5117
|
+
return /* @__PURE__ */ jsx44(
|
|
5118
|
+
MenubarPrimitive.Trigger,
|
|
5119
|
+
{
|
|
5120
|
+
"data-slot": "menubar-trigger",
|
|
5121
|
+
"data-variant": variant ?? "default",
|
|
5122
|
+
className: cn(menubarTriggerVariants({ variant }), className),
|
|
5123
|
+
...props
|
|
5124
|
+
}
|
|
5125
|
+
);
|
|
5126
|
+
}
|
|
5127
|
+
function MenubarContent({ size, className, sideOffset = 6, ...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.Content,
|
|
5132
|
+
{
|
|
5133
|
+
"data-slot": "menubar-content",
|
|
5134
|
+
sideOffset,
|
|
5135
|
+
className: cn(menubarContentVariants({ size }), className),
|
|
5136
|
+
...props
|
|
5137
|
+
}
|
|
5138
|
+
) });
|
|
5139
|
+
}
|
|
5140
|
+
function MenubarItem({
|
|
5141
|
+
className,
|
|
5142
|
+
destructive,
|
|
5143
|
+
startIcon,
|
|
5144
|
+
shortcut,
|
|
5145
|
+
children,
|
|
5146
|
+
...props
|
|
5147
|
+
}) {
|
|
5148
|
+
return /* @__PURE__ */ jsxs33(
|
|
5149
|
+
MenubarPrimitive.Item,
|
|
5150
|
+
{
|
|
5151
|
+
"data-slot": "menubar-item",
|
|
5152
|
+
"data-destructive": destructive ? "" : void 0,
|
|
5153
|
+
className: cn("ddga-menubar-menu__item", className),
|
|
5154
|
+
...props,
|
|
5155
|
+
children: [
|
|
5156
|
+
startIcon ? /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
|
|
5157
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children }),
|
|
5158
|
+
shortcut ? /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__shortcut", "aria-hidden": "true", children: shortcut }) : null
|
|
5159
|
+
]
|
|
5160
|
+
}
|
|
5161
|
+
);
|
|
5162
|
+
}
|
|
5163
|
+
function MenubarCheckboxItem({
|
|
5164
|
+
className,
|
|
5165
|
+
children,
|
|
5166
|
+
onSelect,
|
|
5167
|
+
...props
|
|
5168
|
+
}) {
|
|
5169
|
+
const handleSelect = onSelect ?? ((event) => {
|
|
5170
|
+
event.preventDefault();
|
|
5171
|
+
});
|
|
5172
|
+
return /* @__PURE__ */ jsxs33(
|
|
5173
|
+
MenubarPrimitive.CheckboxItem,
|
|
5174
|
+
{
|
|
5175
|
+
"data-slot": "menubar-checkbox-item",
|
|
5176
|
+
className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--checkable", className),
|
|
5177
|
+
onSelect: handleSelect,
|
|
5178
|
+
...props,
|
|
5179
|
+
children: [
|
|
5180
|
+
/* @__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" }) }) }),
|
|
5181
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children })
|
|
5182
|
+
]
|
|
5183
|
+
}
|
|
5184
|
+
);
|
|
5185
|
+
}
|
|
5186
|
+
function MenubarRadioGroup(props) {
|
|
5187
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
|
|
5188
|
+
}
|
|
5189
|
+
function MenubarRadioItem({ className, children, onSelect, ...props }) {
|
|
5190
|
+
const handleSelect = onSelect ?? ((event) => {
|
|
5191
|
+
event.preventDefault();
|
|
5192
|
+
});
|
|
5193
|
+
return /* @__PURE__ */ jsxs33(
|
|
5194
|
+
MenubarPrimitive.RadioItem,
|
|
5195
|
+
{
|
|
5196
|
+
"data-slot": "menubar-radio-item",
|
|
5197
|
+
className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--checkable", className),
|
|
5198
|
+
onSelect: handleSelect,
|
|
5199
|
+
...props,
|
|
5200
|
+
children: [
|
|
5201
|
+
/* @__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" }) }) }),
|
|
5202
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children })
|
|
5203
|
+
]
|
|
5204
|
+
}
|
|
5205
|
+
);
|
|
5206
|
+
}
|
|
5207
|
+
function MenubarLabel({ className, ...props }) {
|
|
5208
|
+
return /* @__PURE__ */ jsx44(
|
|
5209
|
+
MenubarPrimitive.Label,
|
|
5210
|
+
{
|
|
5211
|
+
"data-slot": "menubar-label",
|
|
5212
|
+
className: cn("ddga-menubar-menu__group-label", className),
|
|
5213
|
+
...props
|
|
5214
|
+
}
|
|
5215
|
+
);
|
|
5216
|
+
}
|
|
5217
|
+
function MenubarSeparator({ className, ...props }) {
|
|
5218
|
+
return /* @__PURE__ */ jsx44(
|
|
5219
|
+
MenubarPrimitive.Separator,
|
|
5220
|
+
{
|
|
5221
|
+
"data-slot": "menubar-separator",
|
|
5222
|
+
className: cn("ddga-menubar-menu__separator", className),
|
|
5223
|
+
...props
|
|
5224
|
+
}
|
|
5225
|
+
);
|
|
5226
|
+
}
|
|
5227
|
+
function MenubarGroup(props) {
|
|
5228
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.Group, { "data-slot": "menubar-group", ...props });
|
|
5229
|
+
}
|
|
5230
|
+
function MenubarSub(props) {
|
|
5231
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.Sub, { ...props });
|
|
5232
|
+
}
|
|
5233
|
+
function MenubarSubTrigger({ className, startIcon, children, ...props }) {
|
|
5234
|
+
return /* @__PURE__ */ jsxs33(
|
|
5235
|
+
MenubarPrimitive.SubTrigger,
|
|
5236
|
+
{
|
|
5237
|
+
"data-slot": "menubar-sub-trigger",
|
|
5238
|
+
className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--sub", className),
|
|
5239
|
+
...props,
|
|
5240
|
+
children: [
|
|
5241
|
+
startIcon ? /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
|
|
5242
|
+
/* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children }),
|
|
5243
|
+
/* @__PURE__ */ jsx44(ChevronRight, { className: "ddga-menubar-menu__sub-chevron", "aria-hidden": "true" })
|
|
5244
|
+
]
|
|
5245
|
+
}
|
|
5246
|
+
);
|
|
5247
|
+
}
|
|
5248
|
+
function MenubarSubContent({ size, className, ...props }) {
|
|
5249
|
+
const ctx = useContext11(DgaContext);
|
|
5250
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
5251
|
+
return /* @__PURE__ */ jsx44(MenubarPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx44(
|
|
5252
|
+
MenubarPrimitive.SubContent,
|
|
5253
|
+
{
|
|
5254
|
+
"data-slot": "menubar-sub-content",
|
|
5255
|
+
className: cn(menubarContentVariants({ size }), className),
|
|
5256
|
+
...props
|
|
5257
|
+
}
|
|
5258
|
+
) });
|
|
5259
|
+
}
|
|
5260
|
+
|
|
5261
|
+
// src/components/Timeline/Timeline.tsx
|
|
5262
|
+
import { cva as cva40 } from "class-variance-authority";
|
|
5263
|
+
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
5264
|
+
var timelineVariants = cva40("ddga-timeline", {
|
|
5265
|
+
variants: {
|
|
5266
|
+
size: {
|
|
5267
|
+
sm: "ddga-timeline--sm",
|
|
5268
|
+
md: "ddga-timeline--md"
|
|
5269
|
+
},
|
|
5270
|
+
orientation: {
|
|
5271
|
+
vertical: "ddga-timeline--vertical",
|
|
5272
|
+
horizontal: "ddga-timeline--horizontal"
|
|
5273
|
+
}
|
|
5274
|
+
},
|
|
5275
|
+
defaultVariants: {
|
|
5276
|
+
size: "md",
|
|
5277
|
+
orientation: "vertical"
|
|
5278
|
+
}
|
|
5279
|
+
});
|
|
5280
|
+
var timelineMarkerVariants = cva40("ddga-timeline__marker", {
|
|
5281
|
+
variants: {
|
|
5282
|
+
status: {
|
|
5283
|
+
default: "ddga-timeline__marker--default",
|
|
5284
|
+
success: "ddga-timeline__marker--success",
|
|
5285
|
+
error: "ddga-timeline__marker--error",
|
|
5286
|
+
warning: "ddga-timeline__marker--warning",
|
|
5287
|
+
info: "ddga-timeline__marker--info"
|
|
5288
|
+
}
|
|
5289
|
+
},
|
|
5290
|
+
defaultVariants: {
|
|
5291
|
+
status: "default"
|
|
5292
|
+
}
|
|
5293
|
+
});
|
|
5294
|
+
function Timeline({ size, orientation, className, ...props }) {
|
|
5295
|
+
return /* @__PURE__ */ jsx45(
|
|
5296
|
+
"ol",
|
|
5297
|
+
{
|
|
5298
|
+
"data-slot": "timeline",
|
|
5299
|
+
"data-orientation": orientation ?? "vertical",
|
|
5300
|
+
className: cn(timelineVariants({ size, orientation }), className),
|
|
5301
|
+
...props
|
|
5302
|
+
}
|
|
5303
|
+
);
|
|
5304
|
+
}
|
|
5305
|
+
function TimelineItem({ className, ...props }) {
|
|
5306
|
+
return /* @__PURE__ */ jsx45("li", { "data-slot": "timeline-item", className: cn("ddga-timeline__item", className), ...props });
|
|
5307
|
+
}
|
|
5308
|
+
function TimelineMarker({ status, className, children, ...props }) {
|
|
5309
|
+
const resolved = status ?? "default";
|
|
5310
|
+
const reached = resolved !== "default";
|
|
5311
|
+
return /* @__PURE__ */ jsx45(
|
|
5312
|
+
"span",
|
|
5313
|
+
{
|
|
5314
|
+
"aria-hidden": "true",
|
|
5315
|
+
"data-slot": "timeline-marker",
|
|
5316
|
+
"data-status": resolved,
|
|
5317
|
+
"data-reached": reached ? "" : void 0,
|
|
5318
|
+
className: cn(timelineMarkerVariants({ status }), className),
|
|
5319
|
+
...props,
|
|
5320
|
+
children: children ?? /* @__PURE__ */ jsx45("span", { className: "ddga-timeline__dot" })
|
|
5321
|
+
}
|
|
5322
|
+
);
|
|
5323
|
+
}
|
|
5324
|
+
function TimelineContent({ className, ...props }) {
|
|
5325
|
+
return /* @__PURE__ */ jsx45(
|
|
5326
|
+
"div",
|
|
5327
|
+
{
|
|
5328
|
+
"data-slot": "timeline-content",
|
|
5329
|
+
className: cn("ddga-timeline__content", className),
|
|
5330
|
+
...props
|
|
5331
|
+
}
|
|
5332
|
+
);
|
|
5333
|
+
}
|
|
5334
|
+
function TimelineTitle({ className, ...props }) {
|
|
5335
|
+
return /* @__PURE__ */ jsx45("span", { "data-slot": "timeline-title", className: cn("ddga-timeline__title", className), ...props });
|
|
5336
|
+
}
|
|
5337
|
+
function TimelineDescription({ className, ...props }) {
|
|
5338
|
+
return /* @__PURE__ */ jsx45(
|
|
5339
|
+
"span",
|
|
5340
|
+
{
|
|
5341
|
+
"data-slot": "timeline-description",
|
|
5342
|
+
className: cn("ddga-timeline__description", className),
|
|
5343
|
+
...props
|
|
5344
|
+
}
|
|
5345
|
+
);
|
|
5346
|
+
}
|
|
5347
|
+
function TimelineTime({ className, ...props }) {
|
|
5348
|
+
return /* @__PURE__ */ jsx45("time", { "data-slot": "timeline-time", className: cn("ddga-timeline__time", className), ...props });
|
|
5349
|
+
}
|
|
5350
|
+
|
|
5351
|
+
// src/components/Command/Command.tsx
|
|
5352
|
+
import { useCallback as useCallback4, useContext as useContext12, useEffect as useEffect3, useRef as useRef3, useState as useState10 } from "react";
|
|
5353
|
+
import { Command as CommandPrimitive } from "cmdk";
|
|
5354
|
+
import { Dialog as DialogPrimitive3, VisuallyHidden } from "radix-ui";
|
|
5355
|
+
import { cva as cva41 } from "class-variance-authority";
|
|
5356
|
+
import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
5357
|
+
var commandVariants = cva41("ddga-command");
|
|
5358
|
+
function Command2({ className, ...props }) {
|
|
5359
|
+
return /* @__PURE__ */ jsx46(CommandPrimitive, { "data-slot": "command", className: cn(commandVariants(), className), ...props });
|
|
5360
|
+
}
|
|
5361
|
+
function CommandInput({
|
|
5362
|
+
className,
|
|
5363
|
+
placeholder,
|
|
5364
|
+
"aria-label": ariaLabel,
|
|
5365
|
+
...props
|
|
5366
|
+
}) {
|
|
5367
|
+
return /* @__PURE__ */ jsxs34("div", { className: "ddga-command__input-wrapper", "data-slot": "command-input-wrapper", children: [
|
|
5368
|
+
/* @__PURE__ */ jsx46(Search, { className: "ddga-command__search-icon", "aria-hidden": "true" }),
|
|
5369
|
+
/* @__PURE__ */ jsx46(
|
|
5370
|
+
CommandPrimitive.Input,
|
|
5371
|
+
{
|
|
5372
|
+
"data-slot": "command-input",
|
|
5373
|
+
className: cn("ddga-command__input", className),
|
|
5374
|
+
placeholder,
|
|
5375
|
+
"aria-label": ariaLabel ?? (typeof placeholder === "string" ? placeholder : void 0),
|
|
5376
|
+
...props
|
|
5377
|
+
}
|
|
5378
|
+
)
|
|
5379
|
+
] });
|
|
5380
|
+
}
|
|
5381
|
+
function CommandList({ className, ...props }) {
|
|
5382
|
+
return /* @__PURE__ */ jsx46(
|
|
5383
|
+
CommandPrimitive.List,
|
|
5384
|
+
{
|
|
5385
|
+
"data-slot": "command-list",
|
|
5386
|
+
className: cn("ddga-command__list", className),
|
|
5387
|
+
...props
|
|
5388
|
+
}
|
|
5389
|
+
);
|
|
5390
|
+
}
|
|
5391
|
+
function CommandEmpty({ className, ...props }) {
|
|
5392
|
+
return /* @__PURE__ */ jsx46(
|
|
5393
|
+
CommandPrimitive.Empty,
|
|
5394
|
+
{
|
|
5395
|
+
"data-slot": "command-empty",
|
|
5396
|
+
className: cn("ddga-command__empty", className),
|
|
5397
|
+
...props
|
|
5398
|
+
}
|
|
5399
|
+
);
|
|
5400
|
+
}
|
|
5401
|
+
function CommandGroup({ className, ...props }) {
|
|
5402
|
+
return /* @__PURE__ */ jsx46(
|
|
5403
|
+
CommandPrimitive.Group,
|
|
5404
|
+
{
|
|
5405
|
+
"data-slot": "command-group",
|
|
5406
|
+
className: cn("ddga-command__group", className),
|
|
5407
|
+
...props
|
|
5408
|
+
}
|
|
5409
|
+
);
|
|
5410
|
+
}
|
|
5411
|
+
function CommandSeparator({
|
|
5412
|
+
className,
|
|
5413
|
+
"aria-hidden": ariaHidden = true,
|
|
5414
|
+
...props
|
|
5415
|
+
}) {
|
|
5416
|
+
return /* @__PURE__ */ jsx46(
|
|
5417
|
+
CommandPrimitive.Separator,
|
|
5418
|
+
{
|
|
5419
|
+
"aria-hidden": ariaHidden,
|
|
5420
|
+
"data-slot": "command-separator",
|
|
5421
|
+
className: cn("ddga-command__separator", className),
|
|
5422
|
+
...props
|
|
5423
|
+
}
|
|
5424
|
+
);
|
|
5425
|
+
}
|
|
5426
|
+
function CommandItem({
|
|
5427
|
+
startIcon,
|
|
5428
|
+
shortcut,
|
|
5429
|
+
className,
|
|
5430
|
+
children,
|
|
5431
|
+
keywords,
|
|
5432
|
+
...props
|
|
5433
|
+
}) {
|
|
5434
|
+
const labelText = typeof children === "string" ? children : void 0;
|
|
5435
|
+
const mergedKeywords = labelText && !keywords?.includes(labelText) ? [...keywords ?? [], labelText] : keywords;
|
|
5436
|
+
return /* @__PURE__ */ jsxs34(
|
|
5437
|
+
CommandPrimitive.Item,
|
|
5438
|
+
{
|
|
5439
|
+
"data-slot": "command-item",
|
|
5440
|
+
className: cn("ddga-command__item", className),
|
|
5441
|
+
keywords: mergedKeywords,
|
|
5442
|
+
...props,
|
|
5443
|
+
children: [
|
|
5444
|
+
startIcon != null && /* @__PURE__ */ jsx46("span", { className: "ddga-command__item-icon", "aria-hidden": "true", children: startIcon }),
|
|
5445
|
+
/* @__PURE__ */ jsx46("span", { className: "ddga-command__item-label", children }),
|
|
5446
|
+
shortcut != null && /* @__PURE__ */ jsx46("span", { className: "ddga-command__item-shortcut", children: shortcut })
|
|
5447
|
+
]
|
|
5448
|
+
}
|
|
5449
|
+
);
|
|
5450
|
+
}
|
|
5451
|
+
function CommandDialog({
|
|
5452
|
+
open: controlledOpen,
|
|
5453
|
+
defaultOpen,
|
|
5454
|
+
onOpenChange,
|
|
5455
|
+
shortcut = "k",
|
|
5456
|
+
label = "Command palette",
|
|
5457
|
+
description,
|
|
5458
|
+
className,
|
|
5459
|
+
filter,
|
|
5460
|
+
shouldFilter,
|
|
5461
|
+
loop,
|
|
5462
|
+
children
|
|
5463
|
+
}) {
|
|
5464
|
+
const [internalOpen, setInternalOpen] = useState10(defaultOpen ?? false);
|
|
5465
|
+
const isControlled = controlledOpen !== void 0;
|
|
5466
|
+
const open = isControlled ? controlledOpen : internalOpen;
|
|
5467
|
+
const setOpen = useCallback4(
|
|
5468
|
+
(next) => {
|
|
5469
|
+
if (!isControlled) setInternalOpen(next);
|
|
5470
|
+
onOpenChange?.(next);
|
|
5471
|
+
},
|
|
5472
|
+
[isControlled, onOpenChange]
|
|
5473
|
+
);
|
|
5474
|
+
const openRef = useRef3(open);
|
|
5475
|
+
useEffect3(() => {
|
|
5476
|
+
openRef.current = open;
|
|
5477
|
+
});
|
|
5478
|
+
useEffect3(() => {
|
|
5479
|
+
if (typeof shortcut !== "string") return;
|
|
5480
|
+
const key = shortcut.toLowerCase();
|
|
5481
|
+
const onKeyDown = (event) => {
|
|
5482
|
+
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === key) {
|
|
5483
|
+
event.preventDefault();
|
|
5484
|
+
setOpen(!openRef.current);
|
|
5485
|
+
}
|
|
5486
|
+
};
|
|
5487
|
+
document.addEventListener("keydown", onKeyDown);
|
|
5488
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
5489
|
+
}, [shortcut, setOpen]);
|
|
5490
|
+
const ctx = useContext12(DgaContext);
|
|
5491
|
+
const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
|
|
5492
|
+
return /* @__PURE__ */ jsx46(DialogPrimitive3.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs34(DialogPrimitive3.Portal, { container: portalContainer, children: [
|
|
5493
|
+
/* @__PURE__ */ jsx46(DialogPrimitive3.Overlay, { className: "ddga-command__overlay", "data-slot": "command-overlay" }),
|
|
5494
|
+
/* @__PURE__ */ jsxs34(
|
|
5495
|
+
DialogPrimitive3.Content,
|
|
5496
|
+
{
|
|
5497
|
+
"data-slot": "command-dialog",
|
|
5498
|
+
className: cn("ddga-command-dialog", className),
|
|
5499
|
+
...description == null ? { "aria-describedby": void 0 } : {},
|
|
5500
|
+
children: [
|
|
5501
|
+
/* @__PURE__ */ jsx46(DialogPrimitive3.Title, { asChild: true, children: /* @__PURE__ */ jsx46(VisuallyHidden.Root, { children: label }) }),
|
|
5502
|
+
description != null && /* @__PURE__ */ jsx46(DialogPrimitive3.Description, { asChild: true, children: /* @__PURE__ */ jsx46(VisuallyHidden.Root, { children: description }) }),
|
|
5503
|
+
/* @__PURE__ */ jsx46(
|
|
5504
|
+
Command2,
|
|
5505
|
+
{
|
|
5506
|
+
"data-slot": "command-dialog-command",
|
|
5507
|
+
className: "ddga-command--dialog",
|
|
5508
|
+
label: typeof label === "string" ? label : "Command palette",
|
|
5509
|
+
filter,
|
|
5510
|
+
shouldFilter,
|
|
5511
|
+
loop,
|
|
5512
|
+
children
|
|
5513
|
+
}
|
|
5514
|
+
)
|
|
5515
|
+
]
|
|
5516
|
+
}
|
|
5517
|
+
)
|
|
5518
|
+
] }) });
|
|
5519
|
+
}
|
|
5520
|
+
|
|
5521
|
+
// src/components/Table/Table.tsx
|
|
5522
|
+
import { cva as cva42 } from "class-variance-authority";
|
|
5523
|
+
import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
5524
|
+
var tableVariants = cva42("ddga-table", {
|
|
5525
|
+
variants: {
|
|
5526
|
+
size: {
|
|
5527
|
+
sm: "ddga-table--sm",
|
|
5528
|
+
md: "ddga-table--md",
|
|
5529
|
+
lg: "ddga-table--lg"
|
|
5530
|
+
},
|
|
5531
|
+
striped: { true: "ddga-table--striped" },
|
|
5532
|
+
divided: { true: "ddga-table--divided" },
|
|
5533
|
+
bordered: { true: "ddga-table--bordered" },
|
|
5534
|
+
stickyHeader: { true: "ddga-table--sticky" }
|
|
5535
|
+
},
|
|
5536
|
+
defaultVariants: {
|
|
5537
|
+
size: "md"
|
|
5538
|
+
}
|
|
5539
|
+
});
|
|
5540
|
+
function Table({
|
|
5541
|
+
size,
|
|
5542
|
+
striped,
|
|
5543
|
+
divided,
|
|
5544
|
+
bordered,
|
|
5545
|
+
stickyHeader,
|
|
5546
|
+
className,
|
|
5547
|
+
maxHeight,
|
|
5548
|
+
"aria-label": ariaLabel,
|
|
5549
|
+
"aria-labelledby": ariaLabelledby,
|
|
5550
|
+
...props
|
|
5551
|
+
}) {
|
|
5552
|
+
const named = Boolean(ariaLabel || ariaLabelledby);
|
|
5553
|
+
if (process.env.NODE_ENV !== "production" && !named) {
|
|
5554
|
+
console.warn(
|
|
5555
|
+
"[ddga] <Table> wraps its table in a horizontally scrollable container. Pass `aria-label` (or `aria-labelledby`) so keyboard and screen-reader users can identify and scroll it. Without a name it degrades to a plain scroll container with no landmark."
|
|
5556
|
+
);
|
|
5557
|
+
}
|
|
5558
|
+
if (process.env.NODE_ENV !== "production" && ariaLabel && ariaLabelledby) {
|
|
5559
|
+
console.warn(
|
|
5560
|
+
"[ddga] <Table> received both `aria-label` and `aria-labelledby`. `aria-labelledby` takes precedence; `aria-label` will be ignored by assistive technology."
|
|
5561
|
+
);
|
|
5562
|
+
}
|
|
5563
|
+
return /* @__PURE__ */ jsx47(
|
|
5564
|
+
"div",
|
|
5565
|
+
{
|
|
5566
|
+
"data-slot": "table-region",
|
|
5567
|
+
className: "ddga-table__region",
|
|
5568
|
+
style: maxHeight != null ? { maxBlockSize: maxHeight, overflowY: "auto" } : void 0,
|
|
5569
|
+
...named ? {
|
|
5570
|
+
role: "region",
|
|
5571
|
+
tabIndex: 0,
|
|
5572
|
+
"aria-label": ariaLabel,
|
|
5573
|
+
"aria-labelledby": ariaLabelledby
|
|
5574
|
+
} : {},
|
|
5575
|
+
children: /* @__PURE__ */ jsx47(
|
|
5576
|
+
"table",
|
|
5577
|
+
{
|
|
5578
|
+
"data-slot": "table",
|
|
5579
|
+
className: cn(tableVariants({ size, striped, divided, bordered, stickyHeader }), className),
|
|
5580
|
+
...props
|
|
5581
|
+
}
|
|
5582
|
+
)
|
|
5583
|
+
}
|
|
5584
|
+
);
|
|
5585
|
+
}
|
|
5586
|
+
function TableHeader({ className, ...props }) {
|
|
5587
|
+
return /* @__PURE__ */ jsx47("thead", { "data-slot": "table-header", className: cn("ddga-table__header", className), ...props });
|
|
5588
|
+
}
|
|
5589
|
+
function TableBody({ className, ...props }) {
|
|
5590
|
+
return /* @__PURE__ */ jsx47("tbody", { "data-slot": "table-body", className: cn("ddga-table__body", className), ...props });
|
|
5591
|
+
}
|
|
5592
|
+
function TableFooter({ className, ...props }) {
|
|
5593
|
+
return /* @__PURE__ */ jsx47("tfoot", { "data-slot": "table-footer", className: cn("ddga-table__footer", className), ...props });
|
|
5594
|
+
}
|
|
5595
|
+
function TableRow({ className, selected, ...props }) {
|
|
5596
|
+
return /* @__PURE__ */ jsx47(
|
|
5597
|
+
"tr",
|
|
5598
|
+
{
|
|
5599
|
+
"data-slot": "table-row",
|
|
5600
|
+
"data-state": selected ? "selected" : void 0,
|
|
5601
|
+
className: cn("ddga-table__row", className),
|
|
5602
|
+
...props
|
|
5603
|
+
}
|
|
5604
|
+
);
|
|
5605
|
+
}
|
|
5606
|
+
function TableHead({
|
|
5607
|
+
className,
|
|
5608
|
+
align,
|
|
5609
|
+
sortable,
|
|
5610
|
+
sortDirection = false,
|
|
5611
|
+
sortLabel,
|
|
5612
|
+
onClick,
|
|
5613
|
+
children,
|
|
5614
|
+
...props
|
|
5615
|
+
}) {
|
|
5616
|
+
const headClass = cn("ddga-table__head", align && `ddga-table__head--align-${align}`, className);
|
|
5617
|
+
if (process.env.NODE_ENV !== "production" && sortable && !sortLabel) {
|
|
5618
|
+
console.warn(
|
|
5619
|
+
'[ddga] <TableHead sortable> has no `sortLabel`. `aria-sort` conveys the sort state, but pass a localized cue (e.g. "activate to sort") so a focused sort button announces its action to screen-reader users.'
|
|
5620
|
+
);
|
|
5621
|
+
}
|
|
5622
|
+
if (!sortable) {
|
|
5623
|
+
return /* @__PURE__ */ jsx47("th", { scope: "col", "data-slot": "table-head", className: headClass, ...props, children });
|
|
5624
|
+
}
|
|
5625
|
+
const ariaSort = sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none";
|
|
5626
|
+
return /* @__PURE__ */ jsx47("th", { scope: "col", "data-slot": "table-head", "aria-sort": ariaSort, className: headClass, ...props, children: /* @__PURE__ */ jsxs35(
|
|
5627
|
+
"button",
|
|
5628
|
+
{
|
|
5629
|
+
type: "button",
|
|
5630
|
+
"data-slot": "table-sort-button",
|
|
5631
|
+
className: "ddga-table__sort-button",
|
|
5632
|
+
onClick,
|
|
5633
|
+
children: [
|
|
5634
|
+
children,
|
|
5635
|
+
sortLabel ? /* @__PURE__ */ jsx47("span", { className: "ddga-sr-only", children: sortLabel }) : null,
|
|
5636
|
+
/* @__PURE__ */ jsx47("span", { className: "ddga-table__sort-icon", "data-slot": "table-sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx47(CaretUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx47(CaretDown, {}) : (
|
|
5637
|
+
// Neutral affordance: stacked carets, dimmed via CSS.
|
|
5638
|
+
/* @__PURE__ */ jsxs35(Fragment6, { children: [
|
|
5639
|
+
/* @__PURE__ */ jsx47(CaretUp, {}),
|
|
5640
|
+
/* @__PURE__ */ jsx47(CaretDown, {})
|
|
5641
|
+
] })
|
|
5642
|
+
) })
|
|
5643
|
+
]
|
|
5644
|
+
}
|
|
5645
|
+
) });
|
|
5646
|
+
}
|
|
5647
|
+
function TableCell({ className, align, ...props }) {
|
|
5648
|
+
return /* @__PURE__ */ jsx47(
|
|
5649
|
+
"td",
|
|
5650
|
+
{
|
|
5651
|
+
"data-slot": "table-cell",
|
|
5652
|
+
className: cn("ddga-table__cell", align && `ddga-table__cell--align-${align}`, className),
|
|
5653
|
+
...props
|
|
5654
|
+
}
|
|
5655
|
+
);
|
|
5656
|
+
}
|
|
5657
|
+
function TableCaption({ className, ...props }) {
|
|
5658
|
+
return /* @__PURE__ */ jsx47(
|
|
5659
|
+
"caption",
|
|
5660
|
+
{
|
|
5661
|
+
"data-slot": "table-caption",
|
|
5662
|
+
className: cn("ddga-table__caption", className),
|
|
5663
|
+
...props
|
|
5664
|
+
}
|
|
5665
|
+
);
|
|
5666
|
+
}
|
|
5667
|
+
|
|
5668
|
+
// src/components/InputOTP/InputOTP.tsx
|
|
5669
|
+
import { useMemo as useMemo4, useRef as useRef4, useState as useState11, Fragment as Fragment7 } from "react";
|
|
5670
|
+
import { cva as cva43 } from "class-variance-authority";
|
|
5671
|
+
import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
5672
|
+
var DEFAULT_PATTERN = "^[0-9]*$";
|
|
5673
|
+
var inputOTPVariants = cva43("ddga-input-otp", {
|
|
5674
|
+
variants: {
|
|
5675
|
+
size: {
|
|
5676
|
+
sm: "ddga-input-otp--sm",
|
|
5677
|
+
md: "ddga-input-otp--md",
|
|
5678
|
+
lg: "ddga-input-otp--lg"
|
|
5679
|
+
},
|
|
5680
|
+
error: {
|
|
5681
|
+
true: "ddga-input-otp--error"
|
|
5682
|
+
}
|
|
5683
|
+
},
|
|
5684
|
+
defaultVariants: {
|
|
5685
|
+
size: "md"
|
|
5686
|
+
}
|
|
5687
|
+
});
|
|
5688
|
+
function resolveGroups(length, groupSizes) {
|
|
5689
|
+
if (!groupSizes || groupSizes.length === 0) return [length];
|
|
5690
|
+
const sum = groupSizes.reduce((total, n) => total + n, 0);
|
|
5691
|
+
if (sum !== length) {
|
|
5692
|
+
if (process.env.NODE_ENV === "development") {
|
|
5693
|
+
console.warn(
|
|
5694
|
+
`[@dev-dga/react] InputOTP: groupSizes must sum to length (${length}); got ${sum}. Falling back to a single group.`
|
|
5695
|
+
);
|
|
5696
|
+
}
|
|
5697
|
+
return [length];
|
|
5698
|
+
}
|
|
5699
|
+
return groupSizes;
|
|
5700
|
+
}
|
|
5701
|
+
function Slot({
|
|
5702
|
+
char,
|
|
5703
|
+
active,
|
|
5704
|
+
caret,
|
|
5705
|
+
mask
|
|
5706
|
+
}) {
|
|
5707
|
+
return /* @__PURE__ */ jsxs36(
|
|
5708
|
+
"div",
|
|
5709
|
+
{
|
|
5710
|
+
"data-slot": "input-otp-slot",
|
|
5711
|
+
"data-active": active || void 0,
|
|
5712
|
+
"data-filled": char != null || void 0,
|
|
5713
|
+
className: "ddga-input-otp__slot",
|
|
5714
|
+
children: [
|
|
5715
|
+
char != null ? mask ? "\u2022" : char : null,
|
|
5716
|
+
caret && /* @__PURE__ */ jsx48("div", { "aria-hidden": "true", "data-slot": "input-otp-caret", className: "ddga-input-otp__caret" })
|
|
5717
|
+
]
|
|
5718
|
+
}
|
|
5719
|
+
);
|
|
5720
|
+
}
|
|
5721
|
+
function InputOTP({
|
|
5722
|
+
id: externalId,
|
|
5723
|
+
length = 6,
|
|
5724
|
+
groupSizes,
|
|
5725
|
+
value,
|
|
5726
|
+
defaultValue,
|
|
5727
|
+
onChange,
|
|
5728
|
+
onComplete,
|
|
5729
|
+
pattern = DEFAULT_PATTERN,
|
|
5730
|
+
mask = false,
|
|
5731
|
+
separator,
|
|
5732
|
+
size,
|
|
5733
|
+
disabled,
|
|
5734
|
+
autoFocus,
|
|
5735
|
+
name,
|
|
5736
|
+
required,
|
|
5737
|
+
label,
|
|
5738
|
+
helperText,
|
|
5739
|
+
errorMessage,
|
|
5740
|
+
error,
|
|
5741
|
+
className,
|
|
5742
|
+
"aria-label": ariaLabel,
|
|
5743
|
+
"aria-labelledby": ariaLabelledby,
|
|
5744
|
+
...props
|
|
5745
|
+
}) {
|
|
5746
|
+
const inputRef = useRef4(null);
|
|
5747
|
+
const [focused, setFocused] = useState11(false);
|
|
5748
|
+
const isControlled = value !== void 0;
|
|
5749
|
+
const [internal, setInternal] = useState11(defaultValue ?? "");
|
|
5750
|
+
const current = isControlled ? value : internal;
|
|
5751
|
+
const compiledPattern = useMemo4(() => {
|
|
5752
|
+
try {
|
|
5753
|
+
return new RegExp(pattern);
|
|
5754
|
+
} catch {
|
|
5755
|
+
if (process.env.NODE_ENV === "development") {
|
|
5756
|
+
console.warn(
|
|
5757
|
+
`[@dev-dga/react] InputOTP: invalid \`pattern\` regex "${pattern}". Falling back to digits-only.`
|
|
5758
|
+
);
|
|
5759
|
+
}
|
|
5760
|
+
return new RegExp(DEFAULT_PATTERN);
|
|
5761
|
+
}
|
|
5762
|
+
}, [pattern]);
|
|
5763
|
+
const completedRef = useRef4(null);
|
|
5764
|
+
const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
|
|
5765
|
+
name: "InputOTP",
|
|
5766
|
+
id: externalId,
|
|
5767
|
+
label,
|
|
5768
|
+
error,
|
|
5769
|
+
errorMessage,
|
|
5770
|
+
helperText,
|
|
5771
|
+
"aria-label": ariaLabel,
|
|
5772
|
+
"aria-labelledby": ariaLabelledby
|
|
5773
|
+
});
|
|
5774
|
+
function handleChange(event) {
|
|
5775
|
+
const next = event.target.value.replace(/[\s-]/g, "").slice(0, length);
|
|
5776
|
+
if (!compiledPattern.test(next)) return;
|
|
5777
|
+
if (!isControlled) setInternal(next);
|
|
5778
|
+
onChange?.(next);
|
|
5779
|
+
if (next.length === length) {
|
|
5780
|
+
if (completedRef.current !== next) {
|
|
5781
|
+
completedRef.current = next;
|
|
5782
|
+
onComplete?.(next);
|
|
5783
|
+
}
|
|
5784
|
+
} else {
|
|
5785
|
+
completedRef.current = null;
|
|
5786
|
+
}
|
|
5787
|
+
}
|
|
5788
|
+
function moveCaretToEnd() {
|
|
5789
|
+
const el = inputRef.current;
|
|
5790
|
+
if (el) el.setSelectionRange(el.value.length, el.value.length);
|
|
5791
|
+
}
|
|
5792
|
+
const groups = resolveGroups(length, groupSizes);
|
|
5793
|
+
const lastGroup = groups.length - 1;
|
|
5794
|
+
const activeIndex = focused ? Math.min(current.length, length - 1) : -1;
|
|
5795
|
+
const inputMode = pattern === DEFAULT_PATTERN ? "numeric" : "text";
|
|
5796
|
+
return /* @__PURE__ */ jsxs36("div", { "data-slot": "input-otp-field", className: "ddga-field", ...props, children: [
|
|
5797
|
+
label && /* @__PURE__ */ jsxs36("label", { htmlFor: fieldId, className: "ddga-input-otp__label", children: [
|
|
5798
|
+
label,
|
|
5799
|
+
required && /* @__PURE__ */ jsx48("span", { "aria-hidden": "true", className: "ddga-input-otp__required", children: "*" })
|
|
5800
|
+
] }),
|
|
5801
|
+
/* @__PURE__ */ jsxs36(
|
|
5802
|
+
"div",
|
|
5803
|
+
{
|
|
5804
|
+
className: cn(inputOTPVariants({ size, error: hasError }), className),
|
|
5805
|
+
"data-slot": "input-otp",
|
|
5806
|
+
children: [
|
|
5807
|
+
/* @__PURE__ */ jsx48(
|
|
5808
|
+
"input",
|
|
5809
|
+
{
|
|
5810
|
+
...controlProps,
|
|
5811
|
+
ref: inputRef,
|
|
5812
|
+
type: "text",
|
|
5813
|
+
inputMode,
|
|
5814
|
+
autoComplete: "one-time-code",
|
|
5815
|
+
value: current,
|
|
5816
|
+
maxLength: length,
|
|
5817
|
+
disabled,
|
|
5818
|
+
autoFocus,
|
|
5819
|
+
name,
|
|
5820
|
+
required,
|
|
5821
|
+
"aria-label": ariaLabel,
|
|
5822
|
+
"aria-labelledby": ariaLabelledby,
|
|
5823
|
+
onChange: handleChange,
|
|
5824
|
+
onFocus: () => {
|
|
5825
|
+
setFocused(true);
|
|
5826
|
+
moveCaretToEnd();
|
|
5827
|
+
},
|
|
5828
|
+
onBlur: () => setFocused(false),
|
|
5829
|
+
onPointerUp: moveCaretToEnd,
|
|
5830
|
+
className: "ddga-input-otp__input",
|
|
5831
|
+
"data-slot": "input-otp-input"
|
|
5832
|
+
}
|
|
5833
|
+
),
|
|
5834
|
+
/* @__PURE__ */ jsx48("div", { dir: "ltr", "aria-hidden": "true", "data-slot": "input-otp-row", className: "ddga-input-otp__row", children: groups.map((count, groupIndex) => {
|
|
5835
|
+
const start = groups.slice(0, groupIndex).reduce((total, n) => total + n, 0);
|
|
5836
|
+
return /* @__PURE__ */ jsxs36(Fragment7, { children: [
|
|
5837
|
+
/* @__PURE__ */ jsx48("div", { "data-slot": "input-otp-group", className: "ddga-input-otp__group", children: Array.from({ length: count }, (_, offset) => {
|
|
5838
|
+
const index = start + offset;
|
|
5839
|
+
return /* @__PURE__ */ jsx48(
|
|
5840
|
+
Slot,
|
|
5841
|
+
{
|
|
5842
|
+
char: current[index],
|
|
5843
|
+
active: index === activeIndex,
|
|
5844
|
+
caret: index === activeIndex && current.length < length,
|
|
5845
|
+
mask
|
|
5846
|
+
},
|
|
5847
|
+
index
|
|
5848
|
+
);
|
|
5849
|
+
}) }),
|
|
5850
|
+
groupIndex < lastGroup && /* @__PURE__ */ jsx48(
|
|
5851
|
+
"span",
|
|
5852
|
+
{
|
|
5853
|
+
"aria-hidden": "true",
|
|
5854
|
+
"data-slot": "input-otp-separator",
|
|
5855
|
+
className: "ddga-input-otp__separator",
|
|
5856
|
+
children: separator ?? /* @__PURE__ */ jsx48("span", { className: "ddga-input-otp__separator-dash" })
|
|
5857
|
+
}
|
|
5858
|
+
)
|
|
5859
|
+
] }, groupIndex);
|
|
5860
|
+
}) })
|
|
5861
|
+
]
|
|
5862
|
+
}
|
|
5863
|
+
),
|
|
5864
|
+
hasErrorMessage && /* @__PURE__ */ jsx48(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
|
|
5865
|
+
hasHelper && /* @__PURE__ */ jsx48(FieldMessage, { id: helperId, variant: "helper", children: helperText })
|
|
5866
|
+
] });
|
|
5867
|
+
}
|
|
5868
|
+
|
|
5869
|
+
// src/components/Link/Link.tsx
|
|
5870
|
+
import "react";
|
|
5871
|
+
import { Slot as SlotPrimitive13 } from "radix-ui";
|
|
5872
|
+
import { cva as cva44 } from "class-variance-authority";
|
|
5873
|
+
import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
5874
|
+
var linkVariants = cva44("ddga-link", {
|
|
5875
|
+
variants: {
|
|
5876
|
+
variant: {
|
|
5877
|
+
// Inline links in running prose. Underlined always — color alone fails
|
|
5878
|
+
// WCAG 1.4.1 when a link sits inside a block of text.
|
|
5879
|
+
default: "ddga-link--default",
|
|
5880
|
+
// Links in UI chrome (footers, meta rows) where context makes them
|
|
5881
|
+
// obviously links: no underline until hover.
|
|
5882
|
+
subtle: "ddga-link--subtle",
|
|
5883
|
+
// Block-level CTAs ("Learn more →"): inline-flex with gapped icons,
|
|
5884
|
+
// no underline. Not for mid-sentence use.
|
|
5885
|
+
standalone: "ddga-link--standalone"
|
|
5886
|
+
}
|
|
5887
|
+
},
|
|
5888
|
+
defaultVariants: {
|
|
5889
|
+
variant: "default"
|
|
5890
|
+
}
|
|
5891
|
+
});
|
|
5892
|
+
function Link({
|
|
5893
|
+
variant,
|
|
5894
|
+
external,
|
|
5895
|
+
startIcon,
|
|
5896
|
+
endIcon,
|
|
5897
|
+
iconFlip,
|
|
5898
|
+
asChild,
|
|
5899
|
+
className,
|
|
5900
|
+
children,
|
|
5901
|
+
rel,
|
|
5902
|
+
...props
|
|
5903
|
+
}) {
|
|
5904
|
+
if (process.env.NODE_ENV === "development" && !asChild && props.href == null) {
|
|
5905
|
+
console.warn(
|
|
5906
|
+
'[@dev-dga/react] Link rendered without an `href`. A link needs an href to be focusable and exposed as a link to assistive tech. Provide `href`, use `asChild` to render your own element (e.g. a router Link), or use `Button variant="ghost"` for an action that is not navigation.'
|
|
5907
|
+
);
|
|
5908
|
+
}
|
|
5909
|
+
const Comp = asChild ? SlotPrimitive13.Slot : "a";
|
|
5910
|
+
const relValue = external ? Array.from(
|
|
5911
|
+
/* @__PURE__ */ new Set([...rel ? rel.split(/\s+/).filter(Boolean) : [], "noopener", "noreferrer"])
|
|
5912
|
+
).join(" ") : rel;
|
|
5913
|
+
const showExternalIcon = external && !endIcon;
|
|
5914
|
+
return /* @__PURE__ */ jsxs37(
|
|
5915
|
+
Comp,
|
|
5916
|
+
{
|
|
5917
|
+
"data-slot": "link",
|
|
5918
|
+
className: cn(linkVariants({ variant }), className),
|
|
5919
|
+
rel: relValue,
|
|
5920
|
+
...props,
|
|
5921
|
+
children: [
|
|
5922
|
+
startIcon && /* @__PURE__ */ jsx49(
|
|
5923
|
+
"span",
|
|
5924
|
+
{
|
|
5925
|
+
className: cn("ddga-link__icon", iconFlip && "ddga-icon-flip"),
|
|
5926
|
+
"data-slot": "link-start-icon",
|
|
5927
|
+
"aria-hidden": "true",
|
|
5928
|
+
children: startIcon
|
|
5929
|
+
}
|
|
5930
|
+
),
|
|
5931
|
+
asChild ? /* @__PURE__ */ jsx49(SlotPrimitive13.Slottable, { children }) : children,
|
|
5932
|
+
endIcon && /* @__PURE__ */ jsx49(
|
|
5933
|
+
"span",
|
|
5934
|
+
{
|
|
5935
|
+
className: cn("ddga-link__icon", iconFlip && "ddga-icon-flip"),
|
|
5936
|
+
"data-slot": "link-end-icon",
|
|
5937
|
+
"aria-hidden": "true",
|
|
5938
|
+
children: endIcon
|
|
5939
|
+
}
|
|
5940
|
+
),
|
|
5941
|
+
showExternalIcon && /* @__PURE__ */ jsx49(
|
|
5942
|
+
"span",
|
|
5943
|
+
{
|
|
5944
|
+
className: "ddga-link__icon ddga-link__icon--external",
|
|
5945
|
+
"data-slot": "link-external-icon",
|
|
5946
|
+
"aria-hidden": "true",
|
|
5947
|
+
children: /* @__PURE__ */ jsx49(ExternalLink, {})
|
|
5948
|
+
}
|
|
5949
|
+
)
|
|
5950
|
+
]
|
|
5951
|
+
}
|
|
5952
|
+
);
|
|
5953
|
+
}
|
|
5954
|
+
|
|
5955
|
+
// src/components/SearchBox/SearchBox.tsx
|
|
5956
|
+
import { useRef as useRef5, useState as useState12 } from "react";
|
|
5957
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
5958
|
+
function setNativeInputValue(el, value) {
|
|
5959
|
+
const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
|
|
5960
|
+
setter?.call(el, value);
|
|
5961
|
+
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
5962
|
+
}
|
|
5963
|
+
function SearchBox({
|
|
5964
|
+
value,
|
|
5965
|
+
defaultValue,
|
|
5966
|
+
onChange,
|
|
5967
|
+
onKeyDown,
|
|
5968
|
+
onSearch,
|
|
5969
|
+
onClear,
|
|
5970
|
+
clearable = true,
|
|
5971
|
+
clearLabel = "Clear search",
|
|
5972
|
+
className,
|
|
5973
|
+
...rest
|
|
5974
|
+
}) {
|
|
5975
|
+
const inputRef = useRef5(null);
|
|
5976
|
+
const isControlled = value !== void 0;
|
|
5977
|
+
const [internal, setInternal] = useState12(
|
|
5978
|
+
defaultValue != null ? String(defaultValue) : ""
|
|
5979
|
+
);
|
|
5980
|
+
const currentValue = isControlled ? String(value ?? "") : internal;
|
|
5981
|
+
const handleChange = (event) => {
|
|
5982
|
+
if (!isControlled) setInternal(event.target.value);
|
|
5983
|
+
onChange?.(event);
|
|
5984
|
+
};
|
|
5985
|
+
const clear = () => {
|
|
5986
|
+
const el = inputRef.current;
|
|
5987
|
+
if (!el) return;
|
|
5988
|
+
setNativeInputValue(el, "");
|
|
5989
|
+
el.focus();
|
|
5990
|
+
onClear?.();
|
|
5991
|
+
};
|
|
5992
|
+
const handleKeyDown = (event) => {
|
|
5993
|
+
onKeyDown?.(event);
|
|
5994
|
+
if (event.defaultPrevented) return;
|
|
5995
|
+
if (event.key === "Enter") {
|
|
5996
|
+
onSearch?.(currentValue);
|
|
5997
|
+
} else if (event.key === "Escape" && currentValue.length > 0) {
|
|
5998
|
+
event.preventDefault();
|
|
5999
|
+
event.stopPropagation();
|
|
6000
|
+
clear();
|
|
6001
|
+
}
|
|
6002
|
+
};
|
|
6003
|
+
const showClear = clearable && currentValue.length > 0;
|
|
6004
|
+
return /* @__PURE__ */ jsx50(
|
|
6005
|
+
Input,
|
|
6006
|
+
{
|
|
6007
|
+
...rest,
|
|
6008
|
+
ref: inputRef,
|
|
6009
|
+
type: "search",
|
|
6010
|
+
value: currentValue,
|
|
6011
|
+
onChange: handleChange,
|
|
6012
|
+
onKeyDown: handleKeyDown,
|
|
6013
|
+
className: cn("ddga-search-box", className),
|
|
6014
|
+
startAdornment: /* @__PURE__ */ jsx50(Search, { "data-slot": "search-box-icon", "aria-hidden": "true" }),
|
|
6015
|
+
endAdornment: showClear ? /* @__PURE__ */ jsx50(
|
|
6016
|
+
Button,
|
|
6017
|
+
{
|
|
6018
|
+
type: "button",
|
|
6019
|
+
variant: "ghost",
|
|
6020
|
+
size: "icon-sm",
|
|
6021
|
+
"aria-label": clearLabel,
|
|
6022
|
+
"data-slot": "search-box-clear",
|
|
6023
|
+
onClick: clear,
|
|
6024
|
+
children: /* @__PURE__ */ jsx50(Close, { "aria-hidden": "true" })
|
|
6025
|
+
}
|
|
6026
|
+
) : void 0
|
|
6027
|
+
}
|
|
6028
|
+
);
|
|
6029
|
+
}
|
|
6030
|
+
|
|
6031
|
+
// src/components/List/List.tsx
|
|
6032
|
+
import { cva as cva45 } from "class-variance-authority";
|
|
6033
|
+
import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
6034
|
+
var listVariants = cva45("ddga-list", {
|
|
6035
|
+
variants: {
|
|
6036
|
+
variant: {
|
|
6037
|
+
plain: "ddga-list--plain",
|
|
6038
|
+
bulleted: "ddga-list--bulleted",
|
|
6039
|
+
numbered: "ddga-list--numbered",
|
|
6040
|
+
lettered: "ddga-list--lettered"
|
|
6041
|
+
},
|
|
6042
|
+
divided: {
|
|
6043
|
+
true: "ddga-list--divided"
|
|
6044
|
+
}
|
|
6045
|
+
},
|
|
6046
|
+
defaultVariants: {
|
|
6047
|
+
variant: "plain"
|
|
6048
|
+
}
|
|
6049
|
+
});
|
|
6050
|
+
function List({ variant, divided, className, start, reversed, ...props }) {
|
|
6051
|
+
const classes = cn(listVariants({ variant, divided }), className);
|
|
6052
|
+
const ordered = variant === "numbered" || variant === "lettered";
|
|
6053
|
+
if (ordered) {
|
|
6054
|
+
return /* @__PURE__ */ jsx51(
|
|
6055
|
+
"ol",
|
|
6056
|
+
{
|
|
6057
|
+
"data-slot": "list",
|
|
6058
|
+
"data-variant": variant,
|
|
6059
|
+
className: classes,
|
|
6060
|
+
start,
|
|
6061
|
+
reversed,
|
|
6062
|
+
...props
|
|
6063
|
+
}
|
|
6064
|
+
);
|
|
6065
|
+
}
|
|
6066
|
+
return /* @__PURE__ */ jsx51("ul", { "data-slot": "list", "data-variant": variant ?? "plain", className: classes, ...props });
|
|
6067
|
+
}
|
|
6068
|
+
function ListItem({ className, ...props }) {
|
|
6069
|
+
return /* @__PURE__ */ jsx51("li", { "data-slot": "list-item", className: cn("ddga-list__item", className), ...props });
|
|
6070
|
+
}
|
|
6071
|
+
function ListItemIcon({ className, ...props }) {
|
|
6072
|
+
return /* @__PURE__ */ jsx51("span", { "data-slot": "list-item-icon", className: cn("ddga-list__icon", className), ...props });
|
|
6073
|
+
}
|
|
6074
|
+
function ListItemContent({
|
|
6075
|
+
primary,
|
|
6076
|
+
secondary,
|
|
6077
|
+
className,
|
|
6078
|
+
children,
|
|
6079
|
+
...props
|
|
6080
|
+
}) {
|
|
6081
|
+
if (process.env.NODE_ENV === "development" && children != null && (primary != null || secondary != null)) {
|
|
6082
|
+
console.warn(
|
|
6083
|
+
"[@dev-dga/react] ListItemContent: `children` overrides `primary`/`secondary`. Pass one or the other, not both."
|
|
6084
|
+
);
|
|
6085
|
+
}
|
|
6086
|
+
return /* @__PURE__ */ jsx51("div", { "data-slot": "list-item-content", className: cn("ddga-list__content", className), ...props, children: children ?? /* @__PURE__ */ jsxs38(Fragment8, { children: [
|
|
6087
|
+
primary != null && primary !== "" && /* @__PURE__ */ jsx51("span", { "data-slot": "list-item-primary", className: "ddga-list__primary", children: primary }),
|
|
6088
|
+
secondary != null && secondary !== "" && /* @__PURE__ */ jsx51("span", { "data-slot": "list-item-secondary", className: "ddga-list__secondary", children: secondary })
|
|
6089
|
+
] }) });
|
|
6090
|
+
}
|
|
6091
|
+
function ListItemAction({ className, ...props }) {
|
|
6092
|
+
return /* @__PURE__ */ jsx51("div", { "data-slot": "list-item-action", className: cn("ddga-list__action", className), ...props });
|
|
6093
|
+
}
|
|
6094
|
+
|
|
6095
|
+
// src/components/Quote/Quote.tsx
|
|
6096
|
+
import "react";
|
|
6097
|
+
import { Slot as SlotPrimitive14 } from "radix-ui";
|
|
6098
|
+
import { cva as cva46 } from "class-variance-authority";
|
|
6099
|
+
import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
6100
|
+
var quoteVariants = cva46("ddga-quote", {
|
|
6101
|
+
variants: {
|
|
6102
|
+
variant: {
|
|
6103
|
+
/** Inline-start accent border (SA Green). The everyday blockquote. */
|
|
6104
|
+
default: "ddga-quote--default",
|
|
6105
|
+
/** Large editorial quote, centered, prominent mark — breaks up prose. */
|
|
6106
|
+
pullquote: "ddga-quote--pullquote",
|
|
6107
|
+
/** Card surface (border + bg + shadow), sized for an avatar + attribution. */
|
|
6108
|
+
testimonial: "ddga-quote--testimonial",
|
|
6109
|
+
/** Bare — no border, no surface. For inline / tightly-composed use. */
|
|
6110
|
+
plain: "ddga-quote--plain"
|
|
6111
|
+
}
|
|
6112
|
+
},
|
|
6113
|
+
defaultVariants: {
|
|
6114
|
+
variant: "default"
|
|
6115
|
+
}
|
|
6116
|
+
});
|
|
6117
|
+
function Quote({
|
|
6118
|
+
variant,
|
|
6119
|
+
quoteMark = false,
|
|
6120
|
+
avatar,
|
|
6121
|
+
author,
|
|
6122
|
+
byline,
|
|
6123
|
+
source,
|
|
6124
|
+
cite,
|
|
6125
|
+
className,
|
|
6126
|
+
children,
|
|
6127
|
+
...props
|
|
6128
|
+
}) {
|
|
6129
|
+
const hasAttribution = author != null || byline != null || source != null;
|
|
6130
|
+
const mark = quoteMark ? /* @__PURE__ */ jsx52(QuoteMark, { "aria-hidden": "true", className: "ddga-quote__mark" }) : null;
|
|
6131
|
+
if (!hasAttribution) {
|
|
6132
|
+
return /* @__PURE__ */ jsxs39(
|
|
6133
|
+
"blockquote",
|
|
6134
|
+
{
|
|
6135
|
+
"data-slot": "quote",
|
|
6136
|
+
"data-variant": variant ?? "default",
|
|
6137
|
+
className: cn(quoteVariants({ variant }), className),
|
|
6138
|
+
cite,
|
|
6139
|
+
...props,
|
|
6140
|
+
children: [
|
|
6141
|
+
mark,
|
|
6142
|
+
/* @__PURE__ */ jsx52(QuoteContent, { children })
|
|
6143
|
+
]
|
|
6144
|
+
}
|
|
6145
|
+
);
|
|
6146
|
+
}
|
|
6147
|
+
return /* @__PURE__ */ jsxs39(
|
|
6148
|
+
"figure",
|
|
6149
|
+
{
|
|
6150
|
+
"data-slot": "quote",
|
|
6151
|
+
"data-variant": variant ?? "default",
|
|
6152
|
+
className: cn(quoteVariants({ variant }), className),
|
|
6153
|
+
...props,
|
|
6154
|
+
children: [
|
|
6155
|
+
/* @__PURE__ */ jsxs39("blockquote", { "data-slot": "quote-blockquote", className: "ddga-quote__blockquote", cite, children: [
|
|
6156
|
+
mark,
|
|
6157
|
+
/* @__PURE__ */ jsx52(QuoteContent, { children })
|
|
6158
|
+
] }),
|
|
6159
|
+
/* @__PURE__ */ jsxs39(QuoteCaption, { children: [
|
|
6160
|
+
avatar != null ? /* @__PURE__ */ jsx52("span", { "data-slot": "quote-avatar", "aria-hidden": "true", className: "ddga-quote__avatar", children: avatar }) : null,
|
|
6161
|
+
/* @__PURE__ */ jsxs39("span", { className: "ddga-quote__attribution", children: [
|
|
6162
|
+
author != null ? /* @__PURE__ */ jsx52(QuoteAuthor, { children: author }) : null,
|
|
6163
|
+
byline != null ? /* @__PURE__ */ jsx52("span", { className: "ddga-quote__byline", children: byline }) : null,
|
|
6164
|
+
source != null ? /* @__PURE__ */ jsx52(QuoteSource, { children: source }) : null
|
|
6165
|
+
] })
|
|
6166
|
+
] })
|
|
6167
|
+
]
|
|
6168
|
+
}
|
|
6169
|
+
);
|
|
6170
|
+
}
|
|
6171
|
+
function QuoteContent({ asChild, className, ...props }) {
|
|
6172
|
+
const Comp = asChild ? SlotPrimitive14.Slot : "div";
|
|
6173
|
+
return /* @__PURE__ */ jsx52(Comp, { "data-slot": "quote-content", className: cn("ddga-quote__content", className), ...props });
|
|
6174
|
+
}
|
|
6175
|
+
function QuoteCaption({ asChild, className, ...props }) {
|
|
6176
|
+
const Comp = asChild ? SlotPrimitive14.Slot : "figcaption";
|
|
6177
|
+
return /* @__PURE__ */ jsx52(Comp, { "data-slot": "quote-caption", className: cn("ddga-quote__caption", className), ...props });
|
|
6178
|
+
}
|
|
6179
|
+
function QuoteAuthor({ asChild, className, ...props }) {
|
|
6180
|
+
const Comp = asChild ? SlotPrimitive14.Slot : "span";
|
|
6181
|
+
return /* @__PURE__ */ jsx52(Comp, { "data-slot": "quote-author", className: cn("ddga-quote__author", className), ...props });
|
|
6182
|
+
}
|
|
6183
|
+
function QuoteSource({ asChild, className, ...props }) {
|
|
6184
|
+
const Comp = asChild ? SlotPrimitive14.Slot : "cite";
|
|
6185
|
+
return /* @__PURE__ */ jsx52(Comp, { "data-slot": "quote-source", className: cn("ddga-quote__source", className), ...props });
|
|
6186
|
+
}
|
|
6187
|
+
|
|
6188
|
+
// src/components/Collapsible/Collapsible.tsx
|
|
6189
|
+
import { Collapsible as CollapsiblePrimitive } from "radix-ui";
|
|
6190
|
+
import { jsx as jsx53 } from "react/jsx-runtime";
|
|
6191
|
+
function Collapsible({ className, ...props }) {
|
|
6192
|
+
return /* @__PURE__ */ jsx53(
|
|
6193
|
+
CollapsiblePrimitive.Root,
|
|
6194
|
+
{
|
|
6195
|
+
"data-slot": "collapsible",
|
|
6196
|
+
className: cn("ddga-collapsible", className),
|
|
6197
|
+
...props
|
|
6198
|
+
}
|
|
6199
|
+
);
|
|
6200
|
+
}
|
|
6201
|
+
function CollapsibleTrigger({ className, ...props }) {
|
|
6202
|
+
return /* @__PURE__ */ jsx53(
|
|
6203
|
+
CollapsiblePrimitive.Trigger,
|
|
6204
|
+
{
|
|
6205
|
+
"data-slot": "collapsible-trigger",
|
|
6206
|
+
className: cn("ddga-collapsible__trigger", className),
|
|
6207
|
+
...props
|
|
6208
|
+
}
|
|
6209
|
+
);
|
|
6210
|
+
}
|
|
6211
|
+
function CollapsibleContent({ className, children, ...props }) {
|
|
6212
|
+
return /* @__PURE__ */ jsx53(
|
|
6213
|
+
CollapsiblePrimitive.Content,
|
|
6214
|
+
{
|
|
6215
|
+
"data-slot": "collapsible-content",
|
|
6216
|
+
className: cn("ddga-collapsible__content", className),
|
|
6217
|
+
...props,
|
|
6218
|
+
children: /* @__PURE__ */ jsx53("div", { className: "ddga-collapsible__content-inner", children })
|
|
6219
|
+
}
|
|
6220
|
+
);
|
|
6221
|
+
}
|
|
6222
|
+
|
|
6223
|
+
// src/components/TagInput/TagInput.tsx
|
|
6224
|
+
import { useRef as useRef6, useState as useState13 } from "react";
|
|
6225
|
+
import { cva as cva47 } from "class-variance-authority";
|
|
6226
|
+
import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
6227
|
+
var tagInputVariants = cva47("ddga-tag-input", {
|
|
6228
|
+
variants: {
|
|
6229
|
+
size: {
|
|
6230
|
+
sm: "ddga-tag-input--sm",
|
|
6231
|
+
md: "ddga-tag-input--md",
|
|
6232
|
+
lg: "ddga-tag-input--lg"
|
|
6233
|
+
},
|
|
6234
|
+
error: {
|
|
6235
|
+
true: "ddga-tag-input--error"
|
|
6236
|
+
}
|
|
6237
|
+
},
|
|
6238
|
+
defaultVariants: {
|
|
6239
|
+
size: "md"
|
|
6240
|
+
}
|
|
6241
|
+
});
|
|
6242
|
+
function TagInput({
|
|
6243
|
+
id: externalId,
|
|
6244
|
+
value,
|
|
6245
|
+
defaultValue,
|
|
6246
|
+
onChange,
|
|
6247
|
+
label,
|
|
6248
|
+
helperText,
|
|
6249
|
+
errorMessage,
|
|
6250
|
+
error,
|
|
6251
|
+
size,
|
|
6252
|
+
disabled,
|
|
6253
|
+
placeholder,
|
|
6254
|
+
max,
|
|
6255
|
+
allowDuplicates = false,
|
|
6256
|
+
caseSensitive = false,
|
|
6257
|
+
validate,
|
|
6258
|
+
delimiters = [","],
|
|
6259
|
+
chipVariant = "secondary",
|
|
6260
|
+
removeLabel = (tag) => `Remove ${tag}`,
|
|
6261
|
+
formatAnnouncement = (tag, action) => `${tag} ${action === "add" ? "added" : "removed"}`,
|
|
6262
|
+
className,
|
|
6263
|
+
...props
|
|
6264
|
+
}) {
|
|
6265
|
+
const isControlled = value !== void 0;
|
|
6266
|
+
const [uncontrolledTags, setUncontrolledTags] = useState13(defaultValue ?? []);
|
|
6267
|
+
const tags = isControlled ? value : uncontrolledTags;
|
|
6268
|
+
const [draft, setDraft] = useState13("");
|
|
6269
|
+
const [announcement, setAnnouncement] = useState13("");
|
|
6270
|
+
const inputRef = useRef6(null);
|
|
6271
|
+
const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
|
|
6272
|
+
name: "TagInput",
|
|
6273
|
+
id: externalId,
|
|
6274
|
+
label,
|
|
6275
|
+
error,
|
|
6276
|
+
errorMessage,
|
|
6277
|
+
helperText,
|
|
6278
|
+
"aria-label": props["aria-label"],
|
|
6279
|
+
"aria-labelledby": props["aria-labelledby"]
|
|
6280
|
+
});
|
|
6281
|
+
const commit = (next) => {
|
|
6282
|
+
if (!isControlled) setUncontrolledTags(next);
|
|
6283
|
+
onChange?.(next);
|
|
6284
|
+
};
|
|
6285
|
+
const norm = (t) => caseSensitive ? t : t.toLowerCase();
|
|
6286
|
+
const accept = (raw, current) => {
|
|
6287
|
+
let next = current;
|
|
6288
|
+
for (const fragment of raw) {
|
|
6289
|
+
const trimmed = fragment.trim();
|
|
6290
|
+
if (!trimmed) continue;
|
|
6291
|
+
if (max !== void 0 && next.length >= max) break;
|
|
6292
|
+
if (!allowDuplicates && next.some((t) => norm(t) === norm(trimmed))) continue;
|
|
6293
|
+
if (validate && !validate(trimmed, next)) continue;
|
|
6294
|
+
next = [...next, trimmed];
|
|
6295
|
+
}
|
|
6296
|
+
return next;
|
|
6297
|
+
};
|
|
6298
|
+
const announceAdded = (added) => {
|
|
6299
|
+
if (added.length > 0) {
|
|
6300
|
+
setAnnouncement(added.map((t) => formatAnnouncement(t, "add")).join(", "));
|
|
6301
|
+
}
|
|
6302
|
+
};
|
|
6303
|
+
const commitDraft = () => {
|
|
6304
|
+
const next = accept([draft], tags);
|
|
6305
|
+
if (next.length > tags.length) {
|
|
6306
|
+
commit(next);
|
|
6307
|
+
announceAdded(next.slice(tags.length));
|
|
6308
|
+
setDraft("");
|
|
6309
|
+
}
|
|
6310
|
+
};
|
|
6311
|
+
const splitPaste = (text) => {
|
|
6312
|
+
const escaped = delimiters.map((d) => d.replace(/[.*+?^${}()|[\]\\-]/g, "\\$&"));
|
|
6313
|
+
const pattern = new RegExp(`[${escaped.join("")}\\n\\r]`);
|
|
6314
|
+
return text.split(pattern);
|
|
6315
|
+
};
|
|
6316
|
+
const removeTag = (index) => {
|
|
6317
|
+
const removed = tags[index];
|
|
6318
|
+
commit(tags.filter((_, i) => i !== index));
|
|
6319
|
+
setAnnouncement(formatAnnouncement(removed, "remove"));
|
|
6320
|
+
inputRef.current?.focus();
|
|
6321
|
+
};
|
|
6322
|
+
const handleKeyDown = (event) => {
|
|
6323
|
+
if (disabled) return;
|
|
6324
|
+
if (event.key === "Enter") {
|
|
6325
|
+
event.preventDefault();
|
|
6326
|
+
if (draft.trim()) commitDraft();
|
|
6327
|
+
} else if (delimiters.includes(event.key)) {
|
|
6328
|
+
event.preventDefault();
|
|
6329
|
+
if (draft.trim()) commitDraft();
|
|
6330
|
+
} else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
|
|
6331
|
+
event.preventDefault();
|
|
6332
|
+
removeTag(tags.length - 1);
|
|
6333
|
+
}
|
|
6334
|
+
};
|
|
6335
|
+
const handlePaste = (event) => {
|
|
6336
|
+
if (disabled) return;
|
|
6337
|
+
const text = event.clipboardData.getData("text");
|
|
6338
|
+
const fragments = splitPaste(text);
|
|
6339
|
+
if (fragments.length <= 1) return;
|
|
6340
|
+
event.preventDefault();
|
|
6341
|
+
const next = accept(fragments, tags);
|
|
6342
|
+
if (next.length > tags.length) {
|
|
6343
|
+
commit(next);
|
|
6344
|
+
announceAdded(next.slice(tags.length));
|
|
6345
|
+
setDraft("");
|
|
6346
|
+
}
|
|
6347
|
+
};
|
|
6348
|
+
const handleBoxMouseDown = (event) => {
|
|
6349
|
+
const target = event.target;
|
|
6350
|
+
if (target === inputRef.current || target.closest("button")) return;
|
|
6351
|
+
event.preventDefault();
|
|
6352
|
+
inputRef.current?.focus();
|
|
6353
|
+
};
|
|
6354
|
+
const chipSize = size === "lg" ? "md" : "sm";
|
|
6355
|
+
return /* @__PURE__ */ jsxs40("div", { "data-slot": "tag-input-field", className: "ddga-field", children: [
|
|
6356
|
+
label && /* @__PURE__ */ jsx54("label", { htmlFor: fieldId, className: "ddga-tag-input__label", children: label }),
|
|
6357
|
+
/* @__PURE__ */ jsxs40(
|
|
6358
|
+
"div",
|
|
6359
|
+
{
|
|
6360
|
+
"data-slot": "tag-input-control",
|
|
6361
|
+
className: cn(tagInputVariants({ size, error: hasError }), className),
|
|
6362
|
+
"data-disabled": disabled || void 0,
|
|
6363
|
+
onMouseDown: disabled ? void 0 : handleBoxMouseDown,
|
|
6364
|
+
children: [
|
|
6365
|
+
tags.length > 0 && /* @__PURE__ */ jsx54("ul", { "data-slot": "tag-input-list", className: "ddga-tag-input__list", role: "list", children: tags.map((tag, index) => /* @__PURE__ */ jsx54(
|
|
6366
|
+
"li",
|
|
6367
|
+
{
|
|
6368
|
+
"data-slot": "tag-input-item",
|
|
6369
|
+
className: "ddga-tag-input__item",
|
|
6370
|
+
role: "listitem",
|
|
6371
|
+
children: /* @__PURE__ */ jsx54(
|
|
6372
|
+
Badge,
|
|
6373
|
+
{
|
|
6374
|
+
variant: chipVariant,
|
|
6375
|
+
size: chipSize,
|
|
6376
|
+
open: true,
|
|
6377
|
+
dismissible: !disabled,
|
|
6378
|
+
onDismiss: () => removeTag(index),
|
|
6379
|
+
closeLabel: removeLabel(tag),
|
|
6380
|
+
children: tag
|
|
6381
|
+
}
|
|
6382
|
+
)
|
|
6383
|
+
},
|
|
6384
|
+
`${tag}-${index}`
|
|
6385
|
+
)) }),
|
|
6386
|
+
/* @__PURE__ */ jsx54(
|
|
6387
|
+
"input",
|
|
6388
|
+
{
|
|
6389
|
+
...props,
|
|
6390
|
+
...controlProps,
|
|
6391
|
+
ref: inputRef,
|
|
6392
|
+
"data-slot": "tag-input",
|
|
6393
|
+
className: "ddga-tag-input__field",
|
|
6394
|
+
type: "text",
|
|
6395
|
+
value: draft,
|
|
6396
|
+
disabled,
|
|
6397
|
+
placeholder: tags.length === 0 ? placeholder : void 0,
|
|
6398
|
+
onChange: (event) => setDraft(event.target.value),
|
|
6399
|
+
onKeyDown: handleKeyDown,
|
|
6400
|
+
onPaste: handlePaste
|
|
6401
|
+
}
|
|
6402
|
+
)
|
|
6403
|
+
]
|
|
6404
|
+
}
|
|
6405
|
+
),
|
|
6406
|
+
/* @__PURE__ */ jsx54("div", { "data-slot": "tag-input-live", className: "ddga-sr-only", role: "status", "aria-live": "polite", children: announcement }),
|
|
6407
|
+
hasErrorMessage && /* @__PURE__ */ jsx54(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
|
|
6408
|
+
hasHelper && /* @__PURE__ */ jsx54(FieldMessage, { id: helperId, variant: "helper", children: helperText })
|
|
6409
|
+
] });
|
|
6410
|
+
}
|
|
6411
|
+
|
|
6412
|
+
// src/providers/DgaProvider.tsx
|
|
6413
|
+
import { useState as useState14, useMemo as useMemo5, useContext as useContext13, useEffect as useEffect4, useRef as useRef7 } from "react";
|
|
6414
|
+
import { Direction as DirectionPrimitive, Tooltip as TooltipPrimitive2 } from "radix-ui";
|
|
6415
|
+
import { buildTheme } from "@dev-dga/tokens";
|
|
6416
|
+
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
6417
|
+
function DgaProvider({
|
|
6418
|
+
dir = "ltr",
|
|
6419
|
+
locale,
|
|
6420
|
+
mode = "light",
|
|
6421
|
+
theme,
|
|
6422
|
+
as: Component = "div",
|
|
6423
|
+
className,
|
|
6424
|
+
style: consumerStyle,
|
|
6425
|
+
children
|
|
6426
|
+
}) {
|
|
6427
|
+
const parentCtx = useContext13(DgaContext);
|
|
6428
|
+
const isNested = parentCtx !== null;
|
|
6429
|
+
const [rootEl, setRootEl] = useState14(null);
|
|
6430
|
+
const portalRef = useRef7(null);
|
|
6431
|
+
const [portalEl, setPortalEl] = useState14(null);
|
|
6432
|
+
const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
|
|
6433
|
+
const themeVars = useMemo5(() => theme ? buildTheme(theme) : null, [theme]);
|
|
6434
|
+
useEffect4(() => {
|
|
6435
|
+
if (typeof document === "undefined") return;
|
|
6436
|
+
const el = document.createElement("div");
|
|
6437
|
+
el.setAttribute("data-slot", "dga-portal");
|
|
6438
|
+
el.style.position = "relative";
|
|
6439
|
+
el.style.zIndex = "50";
|
|
6440
|
+
document.body.appendChild(el);
|
|
6441
|
+
portalRef.current = el;
|
|
6442
|
+
setPortalEl(el);
|
|
6443
|
+
return () => {
|
|
6444
|
+
el.remove();
|
|
6445
|
+
portalRef.current = null;
|
|
6446
|
+
setPortalEl(null);
|
|
6447
|
+
};
|
|
6448
|
+
}, []);
|
|
6449
|
+
useEffect4(() => {
|
|
6450
|
+
const el = portalRef.current;
|
|
6451
|
+
if (!el) return;
|
|
6452
|
+
el.setAttribute("data-theme", mode);
|
|
6453
|
+
el.setAttribute("dir", dir);
|
|
6454
|
+
el.style.colorScheme = mode;
|
|
6455
|
+
if (themeVars) {
|
|
6456
|
+
for (const [k, v] of Object.entries(themeVars)) {
|
|
6457
|
+
el.style.setProperty(k, String(v));
|
|
6458
|
+
}
|
|
6459
|
+
}
|
|
6460
|
+
}, [mode, dir, themeVars, portalEl]);
|
|
6461
|
+
const ctxValue = useMemo5(
|
|
6462
|
+
() => ({ dir, locale: resolvedLocale, mode, rootEl, portalEl }),
|
|
6463
|
+
[dir, resolvedLocale, mode, rootEl, portalEl]
|
|
6464
|
+
);
|
|
6465
|
+
const inner = /* @__PURE__ */ jsx55(DirectionPrimitive.Provider, { dir, children });
|
|
6466
|
+
return /* @__PURE__ */ jsx55(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx55(
|
|
6467
|
+
Component,
|
|
6468
|
+
{
|
|
6469
|
+
ref: setRootEl,
|
|
6470
|
+
dir,
|
|
6471
|
+
lang: resolvedLocale,
|
|
6472
|
+
"data-slot": "dga-root",
|
|
6473
|
+
"data-theme": mode,
|
|
6474
|
+
className,
|
|
6475
|
+
style: { colorScheme: mode, ...themeVars ?? {}, ...consumerStyle },
|
|
6476
|
+
children: isNested ? inner : /* @__PURE__ */ jsx55(TooltipPrimitive2.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
|
|
6477
|
+
}
|
|
6478
|
+
) });
|
|
4097
6479
|
}
|
|
4098
6480
|
export {
|
|
4099
6481
|
Accordion,
|
|
@@ -4125,10 +6507,21 @@ export {
|
|
|
4125
6507
|
CardTitle,
|
|
4126
6508
|
Checkbox,
|
|
4127
6509
|
CircularProgress,
|
|
6510
|
+
Collapsible,
|
|
6511
|
+
CollapsibleContent,
|
|
6512
|
+
CollapsibleTrigger,
|
|
4128
6513
|
Combobox,
|
|
4129
6514
|
ComboboxGroup,
|
|
4130
6515
|
ComboboxItem,
|
|
4131
6516
|
ComboboxSeparator,
|
|
6517
|
+
Command2 as Command,
|
|
6518
|
+
CommandDialog,
|
|
6519
|
+
CommandEmpty,
|
|
6520
|
+
CommandGroup,
|
|
6521
|
+
CommandInput,
|
|
6522
|
+
CommandItem,
|
|
6523
|
+
CommandList,
|
|
6524
|
+
CommandSeparator,
|
|
4132
6525
|
DatePicker,
|
|
4133
6526
|
DescriptionDetails,
|
|
4134
6527
|
DescriptionItem,
|
|
@@ -4158,9 +6551,35 @@ export {
|
|
|
4158
6551
|
DropdownMenuSubContent,
|
|
4159
6552
|
DropdownMenuSubTrigger,
|
|
4160
6553
|
DropdownMenuTrigger,
|
|
6554
|
+
EmptyState,
|
|
6555
|
+
EmptyStateActions,
|
|
6556
|
+
EmptyStateDescription,
|
|
6557
|
+
EmptyStateMedia,
|
|
6558
|
+
EmptyStateTitle,
|
|
4161
6559
|
FieldMessage,
|
|
4162
6560
|
FileUpload,
|
|
4163
6561
|
Input,
|
|
6562
|
+
InputOTP,
|
|
6563
|
+
Link,
|
|
6564
|
+
List,
|
|
6565
|
+
ListItem,
|
|
6566
|
+
ListItemAction,
|
|
6567
|
+
ListItemContent,
|
|
6568
|
+
ListItemIcon,
|
|
6569
|
+
Menubar,
|
|
6570
|
+
MenubarCheckboxItem,
|
|
6571
|
+
MenubarContent,
|
|
6572
|
+
MenubarGroup,
|
|
6573
|
+
MenubarItem,
|
|
6574
|
+
MenubarLabel,
|
|
6575
|
+
MenubarMenu,
|
|
6576
|
+
MenubarRadioGroup,
|
|
6577
|
+
MenubarRadioItem,
|
|
6578
|
+
MenubarSeparator,
|
|
6579
|
+
MenubarSub,
|
|
6580
|
+
MenubarSubContent,
|
|
6581
|
+
MenubarSubTrigger,
|
|
6582
|
+
MenubarTrigger,
|
|
4164
6583
|
Modal,
|
|
4165
6584
|
ModalClose,
|
|
4166
6585
|
ModalContent,
|
|
@@ -4177,26 +6596,82 @@ export {
|
|
|
4177
6596
|
PaginationLink,
|
|
4178
6597
|
PaginationNext,
|
|
4179
6598
|
PaginationPrevious,
|
|
6599
|
+
Popover,
|
|
6600
|
+
PopoverAnchor,
|
|
6601
|
+
PopoverClose,
|
|
6602
|
+
PopoverContent,
|
|
6603
|
+
PopoverTrigger,
|
|
4180
6604
|
Progress,
|
|
6605
|
+
Quote,
|
|
6606
|
+
QuoteAuthor,
|
|
6607
|
+
QuoteCaption,
|
|
6608
|
+
QuoteContent,
|
|
6609
|
+
QuoteSource,
|
|
4181
6610
|
Radio,
|
|
4182
6611
|
RadioGroup,
|
|
4183
6612
|
Rating,
|
|
6613
|
+
ScrollArea,
|
|
6614
|
+
SearchBox,
|
|
4184
6615
|
Select,
|
|
4185
6616
|
SelectItem,
|
|
6617
|
+
Sidebar,
|
|
6618
|
+
SidebarContent,
|
|
6619
|
+
SidebarFooter,
|
|
6620
|
+
SidebarGroup,
|
|
6621
|
+
SidebarGroupAction,
|
|
6622
|
+
SidebarGroupContent,
|
|
6623
|
+
SidebarGroupLabel,
|
|
6624
|
+
SidebarHeader,
|
|
6625
|
+
SidebarInset,
|
|
6626
|
+
SidebarMenu,
|
|
6627
|
+
SidebarMenuAction,
|
|
6628
|
+
SidebarMenuBadge,
|
|
6629
|
+
SidebarMenuButton,
|
|
6630
|
+
SidebarMenuItem,
|
|
6631
|
+
SidebarMenuSkeleton,
|
|
6632
|
+
SidebarMenuSub,
|
|
6633
|
+
SidebarMenuSubButton,
|
|
6634
|
+
SidebarMenuSubItem,
|
|
6635
|
+
SidebarProvider,
|
|
6636
|
+
SidebarRail,
|
|
6637
|
+
SidebarSeparator,
|
|
6638
|
+
SidebarTrigger,
|
|
4186
6639
|
Skeleton,
|
|
4187
6640
|
Slider,
|
|
4188
6641
|
Spinner,
|
|
6642
|
+
Stat,
|
|
6643
|
+
StatChange,
|
|
6644
|
+
StatChart,
|
|
6645
|
+
StatGroup,
|
|
6646
|
+
StatLabel,
|
|
6647
|
+
StatValue,
|
|
4189
6648
|
Step,
|
|
4190
6649
|
StepDescription,
|
|
4191
6650
|
StepIndicator,
|
|
4192
6651
|
StepTitle,
|
|
4193
6652
|
Steps,
|
|
4194
6653
|
Switch,
|
|
6654
|
+
Table,
|
|
6655
|
+
TableBody,
|
|
6656
|
+
TableCaption,
|
|
6657
|
+
TableCell,
|
|
6658
|
+
TableFooter,
|
|
6659
|
+
TableHead,
|
|
6660
|
+
TableHeader,
|
|
6661
|
+
TableRow,
|
|
4195
6662
|
Tabs,
|
|
4196
6663
|
TabsContent,
|
|
4197
6664
|
TabsList,
|
|
4198
6665
|
TabsTrigger,
|
|
6666
|
+
TagInput,
|
|
4199
6667
|
Textarea,
|
|
6668
|
+
Timeline,
|
|
6669
|
+
TimelineContent,
|
|
6670
|
+
TimelineDescription,
|
|
6671
|
+
TimelineItem,
|
|
6672
|
+
TimelineMarker,
|
|
6673
|
+
TimelineTime,
|
|
6674
|
+
TimelineTitle,
|
|
4200
6675
|
Toaster,
|
|
4201
6676
|
Toggle,
|
|
4202
6677
|
ToggleGroup,
|
|
@@ -4216,6 +6691,7 @@ export {
|
|
|
4216
6691
|
cn,
|
|
4217
6692
|
comboboxTriggerVariants,
|
|
4218
6693
|
comboboxVariants,
|
|
6694
|
+
commandVariants,
|
|
4219
6695
|
createToast,
|
|
4220
6696
|
createToastStore,
|
|
4221
6697
|
datePickerVariants,
|
|
@@ -4223,25 +6699,42 @@ export {
|
|
|
4223
6699
|
dividerVariants,
|
|
4224
6700
|
drawerVariants,
|
|
4225
6701
|
dropdownMenuVariants,
|
|
6702
|
+
emptyStateVariants,
|
|
6703
|
+
inputOTPVariants,
|
|
4226
6704
|
inputVariants,
|
|
6705
|
+
linkVariants,
|
|
6706
|
+
listVariants,
|
|
6707
|
+
menubarContentVariants,
|
|
6708
|
+
menubarTriggerVariants,
|
|
4227
6709
|
modalContentVariants,
|
|
4228
6710
|
numberInputVariants,
|
|
4229
6711
|
paginationLinkVariants,
|
|
4230
6712
|
paginationVariants,
|
|
6713
|
+
popoverContentVariants,
|
|
4231
6714
|
progressVariants,
|
|
6715
|
+
quoteVariants,
|
|
4232
6716
|
radioGroupVariants,
|
|
4233
6717
|
radioVariants,
|
|
4234
6718
|
ratingVariants,
|
|
6719
|
+
scrollAreaVariants,
|
|
4235
6720
|
selectTriggerVariants,
|
|
6721
|
+
sidebarMenuButtonVariants,
|
|
6722
|
+
sidebarMenuSubButtonVariants,
|
|
4236
6723
|
skeletonVariants,
|
|
4237
6724
|
sliderVariants,
|
|
4238
6725
|
spinnerVariants,
|
|
6726
|
+
statGroupVariants,
|
|
6727
|
+
statVariants,
|
|
4239
6728
|
stepVariants,
|
|
4240
6729
|
stepsVariants,
|
|
4241
6730
|
switchVariants,
|
|
6731
|
+
tableVariants,
|
|
4242
6732
|
tabsListVariants,
|
|
4243
6733
|
tabsVariants,
|
|
6734
|
+
tagInputVariants,
|
|
4244
6735
|
textareaVariants,
|
|
6736
|
+
timelineMarkerVariants,
|
|
6737
|
+
timelineVariants,
|
|
4245
6738
|
toast,
|
|
4246
6739
|
toastStore,
|
|
4247
6740
|
toastVariants,
|
|
@@ -4251,6 +6744,8 @@ export {
|
|
|
4251
6744
|
tooltipContentVariants,
|
|
4252
6745
|
useDga,
|
|
4253
6746
|
useDir,
|
|
4254
|
-
useFieldA11y
|
|
6747
|
+
useFieldA11y,
|
|
6748
|
+
useIsMobile,
|
|
6749
|
+
useSidebar
|
|
4255
6750
|
};
|
|
4256
6751
|
//# sourceMappingURL=index.js.map
|