@salesmind-ai/design-system 0.2.1 → 0.3.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/dist/AppearancePanel-UT57J69V.d.cts +51 -0
- package/dist/AppearancePanel-UT57J69V.d.ts +51 -0
- package/dist/AppearanceProvider-C36a8-eb.d.cts +45 -0
- package/dist/AppearanceProvider-C36a8-eb.d.ts +45 -0
- package/dist/Breadcrumb-RX-B_gDV.d.cts +44 -0
- package/dist/Breadcrumb-RX-B_gDV.d.ts +44 -0
- package/dist/ExportMenu-A2TLFiVv.d.cts +311 -0
- package/dist/ExportMenu-C8qck5AT.d.ts +311 -0
- package/dist/SectionShell-BfBw5q0Y.d.cts +18 -0
- package/dist/SectionShell-BfBw5q0Y.d.ts +18 -0
- package/dist/Select-BdZmK0Lt.d.cts +66 -0
- package/dist/Select-BdZmK0Lt.d.ts +66 -0
- package/dist/admin/index.cjs +2941 -0
- package/dist/admin/index.cjs.map +1 -0
- package/dist/admin/index.css +4145 -0
- package/dist/admin/index.css.map +1 -0
- package/dist/admin/index.d.cts +491 -0
- package/dist/admin/index.d.ts +491 -0
- package/dist/admin/index.js +2918 -0
- package/dist/admin/index.js.map +1 -0
- package/dist/{audit-CiyPkxk1.d.cts → audit-BS2fn7M4.d.ts} +2 -51
- package/dist/{audit-CiyPkxk1.d.ts → audit-DwCmg32J.d.cts} +2 -51
- package/dist/blog/index.cjs +1074 -0
- package/dist/blog/index.cjs.map +1 -0
- package/dist/blog/index.css +1422 -0
- package/dist/blog/index.css.map +1 -0
- package/dist/blog/index.d.cts +233 -0
- package/dist/blog/index.d.ts +233 -0
- package/dist/blog/index.js +1056 -0
- package/dist/blog/index.js.map +1 -0
- package/dist/chart-types-BGVVO-zl.d.cts +208 -0
- package/dist/chart-types-BGVVO-zl.d.ts +208 -0
- package/dist/charts/index.cjs +2698 -0
- package/dist/charts/index.cjs.map +1 -0
- package/dist/charts/index.css +1167 -0
- package/dist/charts/index.css.map +1 -0
- package/dist/charts/index.d.cts +453 -0
- package/dist/charts/index.d.ts +453 -0
- package/dist/charts/index.js +2682 -0
- package/dist/charts/index.js.map +1 -0
- package/dist/core/index.cjs +526 -395
- package/dist/core/index.cjs.map +1 -1
- package/dist/core/index.css +294 -0
- package/dist/core/index.css.map +1 -1
- package/dist/core/index.d.cts +7 -982
- package/dist/core/index.d.ts +7 -982
- package/dist/core/index.js +476 -351
- package/dist/core/index.js.map +1 -1
- package/dist/i18n/index.cjs +585 -0
- package/dist/i18n/index.cjs.map +1 -0
- package/dist/i18n/index.d.cts +855 -0
- package/dist/i18n/index.d.ts +855 -0
- package/dist/i18n/index.js +547 -0
- package/dist/i18n/index.js.map +1 -0
- package/dist/index.d.cts +22 -1290
- package/dist/index.d.ts +22 -1290
- package/dist/marketing/index.cjs +2144 -3023
- package/dist/marketing/index.cjs.map +1 -1
- package/dist/marketing/index.css +3729 -4824
- package/dist/marketing/index.css.map +1 -1
- package/dist/marketing/index.d.cts +1351 -4
- package/dist/marketing/index.d.ts +1351 -4
- package/dist/marketing/index.js +2190 -3054
- package/dist/marketing/index.js.map +1 -1
- package/dist/motion/index.cjs +1230 -0
- package/dist/motion/index.cjs.map +1 -0
- package/dist/motion/index.css +699 -0
- package/dist/motion/index.css.map +1 -0
- package/dist/motion/index.d.cts +68 -0
- package/dist/motion/index.d.ts +68 -0
- package/dist/motion/index.js +1218 -0
- package/dist/motion/index.js.map +1 -0
- package/dist/nav/index.cjs +1533 -0
- package/dist/nav/index.cjs.map +1 -0
- package/dist/nav/index.css +1984 -0
- package/dist/nav/index.css.map +1 -0
- package/dist/nav/index.d.cts +279 -0
- package/dist/nav/index.d.ts +279 -0
- package/dist/nav/index.js +1501 -0
- package/dist/nav/index.js.map +1 -0
- package/dist/report/index.cjs +26 -1649
- package/dist/report/index.cjs.map +1 -1
- package/dist/report/index.css +0 -963
- package/dist/report/index.css.map +1 -1
- package/dist/report/index.d.cts +4 -2
- package/dist/report/index.d.ts +4 -2
- package/dist/report/index.js +27 -1640
- package/dist/report/index.js.map +1 -1
- package/dist/sections/index.cjs +385 -0
- package/dist/sections/index.cjs.map +1 -0
- package/dist/sections/index.css +818 -0
- package/dist/sections/index.css.map +1 -0
- package/dist/sections/index.d.cts +69 -0
- package/dist/sections/index.d.ts +69 -0
- package/dist/sections/index.js +374 -0
- package/dist/sections/index.js.map +1 -0
- package/dist/social-proof/index.cjs +1254 -0
- package/dist/social-proof/index.cjs.map +1 -0
- package/dist/social-proof/index.css +1416 -0
- package/dist/social-proof/index.css.map +1 -0
- package/dist/social-proof/index.d.cts +258 -0
- package/dist/social-proof/index.d.ts +258 -0
- package/dist/social-proof/index.js +1237 -0
- package/dist/social-proof/index.js.map +1 -0
- package/dist/theme/index.cjs +573 -0
- package/dist/theme/index.cjs.map +1 -0
- package/dist/theme/index.css +464 -0
- package/dist/theme/index.css.map +1 -0
- package/dist/theme/index.d.cts +48 -0
- package/dist/theme/index.d.ts +48 -0
- package/dist/theme/index.js +558 -0
- package/dist/theme/index.js.map +1 -0
- package/dist/types-DAlgDGzw.d.cts +52 -0
- package/dist/types-DAlgDGzw.d.ts +52 -0
- package/dist/web/index.d.cts +3 -2
- package/dist/web/index.d.ts +3 -2
- package/package.json +68 -9
- package/dist/ExportMenu-hEe5MhLq.d.cts +0 -1027
- package/dist/ExportMenu-hEe5MhLq.d.ts +0 -1027
- package/dist/index-B64suAAc.d.cts +0 -1498
- package/dist/index-B64suAAc.d.ts +0 -1498
package/dist/core/index.cjs
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React39 = require('react');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var
|
|
5
|
+
var clsx28 = require('clsx');
|
|
6
6
|
var reactSlot = require('@radix-ui/react-slot');
|
|
7
7
|
var input = require('@base-ui/react/input');
|
|
8
8
|
var checkbox = require('@base-ui/react/checkbox');
|
|
9
9
|
var _switch = require('@base-ui/react/switch');
|
|
10
|
+
var select = require('@base-ui/react/select');
|
|
10
11
|
var dialog = require('@base-ui/react/dialog');
|
|
11
12
|
var tooltip = require('@base-ui/react/tooltip');
|
|
12
13
|
var ReactDOM = require('react-dom');
|
|
@@ -16,8 +17,8 @@ var reactIntl = require('react-intl');
|
|
|
16
17
|
|
|
17
18
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
19
|
|
|
19
|
-
var
|
|
20
|
-
var
|
|
20
|
+
var React39__default = /*#__PURE__*/_interopDefault(React39);
|
|
21
|
+
var clsx28__default = /*#__PURE__*/_interopDefault(clsx28);
|
|
21
22
|
var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
|
|
22
23
|
|
|
23
24
|
// src/tokens/motion.ts
|
|
@@ -345,18 +346,18 @@ function prefersReducedMotion() {
|
|
|
345
346
|
if (typeof window === "undefined") return false;
|
|
346
347
|
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
347
348
|
}
|
|
348
|
-
var AppearanceContext =
|
|
349
|
+
var AppearanceContext = React39.createContext(null);
|
|
349
350
|
function AppearanceProvider({
|
|
350
351
|
initialSettings,
|
|
351
352
|
disablePersistence = false,
|
|
352
353
|
children
|
|
353
354
|
}) {
|
|
354
|
-
const [settings, setSettings] =
|
|
355
|
+
const [settings, setSettings] = React39.useState(() => ({
|
|
355
356
|
...DEFAULT_SETTINGS,
|
|
356
357
|
...initialSettings
|
|
357
358
|
}));
|
|
358
|
-
const [hydrated, setHydrated] =
|
|
359
|
-
|
|
359
|
+
const [hydrated, setHydrated] = React39.useState(false);
|
|
360
|
+
React39.useEffect(() => {
|
|
360
361
|
if (!disablePersistence) {
|
|
361
362
|
const loaded = loadSettings();
|
|
362
363
|
setSettings({
|
|
@@ -367,13 +368,13 @@ function AppearanceProvider({
|
|
|
367
368
|
}
|
|
368
369
|
setHydrated(true);
|
|
369
370
|
}, []);
|
|
370
|
-
|
|
371
|
+
React39.useEffect(() => {
|
|
371
372
|
applySettings(settings);
|
|
372
373
|
if (!disablePersistence && hydrated) {
|
|
373
374
|
saveSettings(settings);
|
|
374
375
|
}
|
|
375
376
|
}, [settings, disablePersistence, hydrated]);
|
|
376
|
-
|
|
377
|
+
React39.useEffect(() => {
|
|
377
378
|
if (typeof window === "undefined") return;
|
|
378
379
|
const mediaQuery = window.matchMedia("(prefers-color-scheme: light)");
|
|
379
380
|
const handleChange = (e) => {
|
|
@@ -390,7 +391,7 @@ function AppearanceProvider({
|
|
|
390
391
|
mediaQuery.addEventListener("change", handleChange);
|
|
391
392
|
return () => mediaQuery.removeEventListener("change", handleChange);
|
|
392
393
|
}, []);
|
|
393
|
-
|
|
394
|
+
React39.useEffect(() => {
|
|
394
395
|
if (typeof window === "undefined") return;
|
|
395
396
|
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
396
397
|
const handleChange = () => {
|
|
@@ -399,28 +400,28 @@ function AppearanceProvider({
|
|
|
399
400
|
mediaQuery.addEventListener("change", handleChange);
|
|
400
401
|
return () => mediaQuery.removeEventListener("change", handleChange);
|
|
401
402
|
}, [settings]);
|
|
402
|
-
const setTheme =
|
|
403
|
+
const setTheme = React39.useCallback((theme) => {
|
|
403
404
|
setSettings((prev) => ({ ...prev, theme }));
|
|
404
405
|
}, []);
|
|
405
|
-
const setBrand =
|
|
406
|
+
const setBrand = React39.useCallback((brand) => {
|
|
406
407
|
setSettings((prev) => ({ ...prev, brand }));
|
|
407
408
|
}, []);
|
|
408
|
-
const setNavPlacement =
|
|
409
|
+
const setNavPlacement = React39.useCallback((navPlacement) => {
|
|
409
410
|
setSettings((prev) => ({ ...prev, navPlacement }));
|
|
410
411
|
}, []);
|
|
411
|
-
const setDensity =
|
|
412
|
+
const setDensity = React39.useCallback((density) => {
|
|
412
413
|
setSettings((prev) => ({ ...prev, density }));
|
|
413
414
|
}, []);
|
|
414
|
-
const setRadius =
|
|
415
|
+
const setRadius = React39.useCallback((radius) => {
|
|
415
416
|
setSettings((prev) => ({ ...prev, radius }));
|
|
416
417
|
}, []);
|
|
417
|
-
const setCustomColor =
|
|
418
|
+
const setCustomColor = React39.useCallback((customColor) => {
|
|
418
419
|
setSettings((prev) => ({ ...prev, customColor, brand: "custom" }));
|
|
419
420
|
}, []);
|
|
420
|
-
const setAppearance =
|
|
421
|
+
const setAppearance = React39.useCallback((partial) => {
|
|
421
422
|
setSettings((prev) => ({ ...prev, ...partial }));
|
|
422
423
|
}, []);
|
|
423
|
-
const resetToDefaults =
|
|
424
|
+
const resetToDefaults = React39.useCallback(() => {
|
|
424
425
|
setSettings(DEFAULT_SETTINGS);
|
|
425
426
|
}, []);
|
|
426
427
|
const contextValue = {
|
|
@@ -437,7 +438,7 @@ function AppearanceProvider({
|
|
|
437
438
|
return /* @__PURE__ */ jsxRuntime.jsx(AppearanceContext.Provider, { value: contextValue, children });
|
|
438
439
|
}
|
|
439
440
|
function useAppearance() {
|
|
440
|
-
const context =
|
|
441
|
+
const context = React39.useContext(AppearanceContext);
|
|
441
442
|
if (!context) {
|
|
442
443
|
throw new Error("useAppearance must be used within an AppearanceProvider");
|
|
443
444
|
}
|
|
@@ -448,7 +449,7 @@ function initializeAppearance(settings) {
|
|
|
448
449
|
const merged = { ...loaded, ...settings };
|
|
449
450
|
applySettings(merged);
|
|
450
451
|
}
|
|
451
|
-
var AppearancePanel =
|
|
452
|
+
var AppearancePanel = React39__default.default.forwardRef(
|
|
452
453
|
({ className, labels: l }, ref) => {
|
|
453
454
|
const {
|
|
454
455
|
theme,
|
|
@@ -465,7 +466,7 @@ var AppearancePanel = React38__default.default.forwardRef(
|
|
|
465
466
|
setCustomColor,
|
|
466
467
|
resetToDefaults
|
|
467
468
|
} = useAppearance();
|
|
468
|
-
const colorPickerId =
|
|
469
|
+
const colorPickerId = React39.useId();
|
|
469
470
|
const themeOptions = [
|
|
470
471
|
{ value: "light", label: l?.themeLight ?? "Light" },
|
|
471
472
|
{ value: "light-contrast", label: l?.themeLightContrast ?? "Light (High Contrast)" },
|
|
@@ -490,14 +491,14 @@ var AppearancePanel = React38__default.default.forwardRef(
|
|
|
490
491
|
{ value: "playful", label: l?.radiusPlayful ?? "Playful", description: l?.radiusPlayfulDescription ?? "Rounded corners" },
|
|
491
492
|
{ value: "sharp", label: l?.radiusSharp ?? "Sharp", description: l?.radiusSharpDescription ?? "Technical feel" }
|
|
492
493
|
];
|
|
493
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className:
|
|
494
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx28__default.default("ds-appearance-panel", className), children: [
|
|
494
495
|
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-appearance-panel__title", children: l?.title ?? "Appearance Settings" }),
|
|
495
496
|
/* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
|
|
496
497
|
/* @__PURE__ */ jsxRuntime.jsx("legend", { className: "ds-appearance-panel__legend", children: l?.themeHeading ?? "Theme" }),
|
|
497
498
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options", children: themeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
498
499
|
"label",
|
|
499
500
|
{
|
|
500
|
-
className:
|
|
501
|
+
className: clsx28__default.default(
|
|
501
502
|
"ds-appearance-panel__option",
|
|
502
503
|
theme === option.value && "ds-appearance-panel__option--active"
|
|
503
504
|
),
|
|
@@ -524,7 +525,7 @@ var AppearancePanel = React38__default.default.forwardRef(
|
|
|
524
525
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options", children: brandOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
525
526
|
"label",
|
|
526
527
|
{
|
|
527
|
-
className:
|
|
528
|
+
className: clsx28__default.default(
|
|
528
529
|
"ds-appearance-panel__option",
|
|
529
530
|
brand === option.value && "ds-appearance-panel__option--active"
|
|
530
531
|
),
|
|
@@ -570,7 +571,7 @@ var AppearancePanel = React38__default.default.forwardRef(
|
|
|
570
571
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: densityOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
571
572
|
"label",
|
|
572
573
|
{
|
|
573
|
-
className:
|
|
574
|
+
className: clsx28__default.default(
|
|
574
575
|
"ds-appearance-panel__option",
|
|
575
576
|
"ds-appearance-panel__option--toggle",
|
|
576
577
|
density === option.value && "ds-appearance-panel__option--active"
|
|
@@ -601,7 +602,7 @@ var AppearancePanel = React38__default.default.forwardRef(
|
|
|
601
602
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: radiusOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
602
603
|
"label",
|
|
603
604
|
{
|
|
604
|
-
className:
|
|
605
|
+
className: clsx28__default.default(
|
|
605
606
|
"ds-appearance-panel__option",
|
|
606
607
|
"ds-appearance-panel__option--toggle",
|
|
607
608
|
radius === option.value && "ds-appearance-panel__option--active"
|
|
@@ -632,7 +633,7 @@ var AppearancePanel = React38__default.default.forwardRef(
|
|
|
632
633
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-appearance-panel__options", children: navOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
633
634
|
"label",
|
|
634
635
|
{
|
|
635
|
-
className:
|
|
636
|
+
className: clsx28__default.default(
|
|
636
637
|
"ds-appearance-panel__option",
|
|
637
638
|
navPlacement === option.value && "ds-appearance-panel__option--active"
|
|
638
639
|
),
|
|
@@ -659,9 +660,9 @@ var AppearancePanel = React38__default.default.forwardRef(
|
|
|
659
660
|
}
|
|
660
661
|
);
|
|
661
662
|
AppearancePanel.displayName = "AppearancePanel";
|
|
662
|
-
var Button =
|
|
663
|
+
var Button = React39__default.default.forwardRef(
|
|
663
664
|
({ className, variant = "primary", size = "md", asChild = false, isLoading = false, children, disabled, ...props }, ref) => {
|
|
664
|
-
const buttonClass =
|
|
665
|
+
const buttonClass = clsx28__default.default(
|
|
665
666
|
"ds-button",
|
|
666
667
|
`ds-button--${variant}`,
|
|
667
668
|
size === "icon" ? "ds-button--icon ds-button--md" : `ds-button--${size}`,
|
|
@@ -704,21 +705,21 @@ var Button = React38__default.default.forwardRef(
|
|
|
704
705
|
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
|
|
705
706
|
}
|
|
706
707
|
),
|
|
707
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className:
|
|
708
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx28__default.default("ds-button__content", isLoading && "ds-button__content--hidden"), children })
|
|
708
709
|
]
|
|
709
710
|
}
|
|
710
711
|
);
|
|
711
712
|
}
|
|
712
713
|
);
|
|
713
714
|
Button.displayName = "Button";
|
|
714
|
-
var ButtonGroup =
|
|
715
|
+
var ButtonGroup = React39__default.default.forwardRef(
|
|
715
716
|
({ orientation = "horizontal", fullWidth = false, size = "md", className, children, ...props }, ref) => {
|
|
716
717
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
717
718
|
"div",
|
|
718
719
|
{
|
|
719
720
|
ref,
|
|
720
721
|
role: "group",
|
|
721
|
-
className:
|
|
722
|
+
className: clsx28__default.default(
|
|
722
723
|
"ds-button-group",
|
|
723
724
|
`ds-button-group--${orientation}`,
|
|
724
725
|
fullWidth && "ds-button-group--full-width",
|
|
@@ -732,11 +733,11 @@ var ButtonGroup = React38__default.default.forwardRef(
|
|
|
732
733
|
}
|
|
733
734
|
);
|
|
734
735
|
ButtonGroup.displayName = "ButtonGroup";
|
|
735
|
-
var TextField =
|
|
736
|
+
var TextField = React39__default.default.forwardRef(
|
|
736
737
|
({ className, label, error, helperText, endAdornment, id, ...props }, ref) => {
|
|
737
|
-
const generatedId =
|
|
738
|
+
const generatedId = React39__default.default.useId();
|
|
738
739
|
const inputId = id || generatedId;
|
|
739
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
740
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx28__default.default("ds-textfield", className), children: [
|
|
740
741
|
label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "ds-textfield__label", children: label }),
|
|
741
742
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-textfield__input-wrapper", children: [
|
|
742
743
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -744,7 +745,7 @@ var TextField = React38__default.default.forwardRef(
|
|
|
744
745
|
{
|
|
745
746
|
id: inputId,
|
|
746
747
|
ref,
|
|
747
|
-
className:
|
|
748
|
+
className: clsx28__default.default(
|
|
748
749
|
"ds-textfield__input",
|
|
749
750
|
error && "ds-textfield__input--error",
|
|
750
751
|
endAdornment && "ds-textfield__input--adorned"
|
|
@@ -754,36 +755,36 @@ var TextField = React38__default.default.forwardRef(
|
|
|
754
755
|
),
|
|
755
756
|
endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-textfield__adornment", children: endAdornment })
|
|
756
757
|
] }),
|
|
757
|
-
helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className:
|
|
758
|
+
helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx28__default.default("ds-textfield__helper", error && "ds-textfield__helper--error"), children: helperText })
|
|
758
759
|
] });
|
|
759
760
|
}
|
|
760
761
|
);
|
|
761
762
|
TextField.displayName = "TextField";
|
|
762
|
-
var TextArea =
|
|
763
|
+
var TextArea = React39.forwardRef(
|
|
763
764
|
({ className, label, error, helperText, id, ...props }, ref) => {
|
|
764
|
-
const generatedId =
|
|
765
|
+
const generatedId = React39.useId();
|
|
765
766
|
const inputId = id || generatedId;
|
|
766
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
767
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx28__default.default("ds-textarea", className), children: [
|
|
767
768
|
label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "ds-textarea__label", children: label }),
|
|
768
769
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-textarea__input-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
769
770
|
"textarea",
|
|
770
771
|
{
|
|
771
772
|
id: inputId,
|
|
772
773
|
ref,
|
|
773
|
-
className:
|
|
774
|
+
className: clsx28__default.default("ds-textarea__input", error && "ds-textarea__input--error"),
|
|
774
775
|
...props
|
|
775
776
|
}
|
|
776
777
|
) }),
|
|
777
|
-
helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className:
|
|
778
|
+
helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx28__default.default("ds-textarea__helper", error && "ds-textarea__helper--error"), children: helperText })
|
|
778
779
|
] });
|
|
779
780
|
}
|
|
780
781
|
);
|
|
781
782
|
TextArea.displayName = "TextArea";
|
|
782
|
-
var Checkbox =
|
|
783
|
+
var Checkbox = React39__default.default.forwardRef(
|
|
783
784
|
({ className, label, id, ...props }, ref) => {
|
|
784
|
-
const generatedId =
|
|
785
|
+
const generatedId = React39__default.default.useId();
|
|
785
786
|
const checkboxId = id || generatedId;
|
|
786
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
787
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx28__default.default("ds-checkbox-wrapper", className), children: [
|
|
787
788
|
/* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Root, { id: checkboxId, ref, className: "ds-checkbox", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: "ds-checkbox__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
788
789
|
"svg",
|
|
789
790
|
{
|
|
@@ -808,8 +809,8 @@ var Checkbox = React38__default.default.forwardRef(
|
|
|
808
809
|
}
|
|
809
810
|
);
|
|
810
811
|
Checkbox.displayName = "Checkbox";
|
|
811
|
-
var RadioGroupContext =
|
|
812
|
-
var RadioGroup =
|
|
812
|
+
var RadioGroupContext = React39.createContext(null);
|
|
813
|
+
var RadioGroup = React39.forwardRef(
|
|
813
814
|
({
|
|
814
815
|
className,
|
|
815
816
|
name,
|
|
@@ -819,14 +820,14 @@ var RadioGroup = React38.forwardRef(
|
|
|
819
820
|
children,
|
|
820
821
|
...props
|
|
821
822
|
}, ref) => {
|
|
822
|
-
const generatedName =
|
|
823
|
+
const generatedName = React39.useId();
|
|
823
824
|
const groupName = name || generatedName;
|
|
824
825
|
return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: { name: groupName, value, onChange: onValueChange }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
825
826
|
"div",
|
|
826
827
|
{
|
|
827
828
|
ref,
|
|
828
829
|
role: "radiogroup",
|
|
829
|
-
className:
|
|
830
|
+
className: clsx28__default.default(
|
|
830
831
|
"ds-radio-group",
|
|
831
832
|
orientation === "horizontal" && "ds-radio-group--horizontal",
|
|
832
833
|
className
|
|
@@ -838,10 +839,10 @@ var RadioGroup = React38.forwardRef(
|
|
|
838
839
|
}
|
|
839
840
|
);
|
|
840
841
|
RadioGroup.displayName = "RadioGroup";
|
|
841
|
-
var Radio =
|
|
842
|
+
var Radio = React39.forwardRef(
|
|
842
843
|
({ className, label, value, disabled, id, onChange, ...props }, ref) => {
|
|
843
|
-
const context =
|
|
844
|
-
const generatedId =
|
|
844
|
+
const context = React39.useContext(RadioGroupContext);
|
|
845
|
+
const generatedId = React39.useId();
|
|
845
846
|
const radioId = id || generatedId;
|
|
846
847
|
const name = context?.name || props.name;
|
|
847
848
|
const isChecked = context?.value !== void 0 ? context.value === value : props.checked;
|
|
@@ -852,7 +853,7 @@ var Radio = React38.forwardRef(
|
|
|
852
853
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
853
854
|
"label",
|
|
854
855
|
{
|
|
855
|
-
className:
|
|
856
|
+
className: clsx28__default.default("ds-radio-wrapper", disabled && "ds-radio-wrapper--disabled", className),
|
|
856
857
|
children: [
|
|
857
858
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
858
859
|
"input",
|
|
@@ -869,7 +870,7 @@ var Radio = React38.forwardRef(
|
|
|
869
870
|
...props
|
|
870
871
|
}
|
|
871
872
|
),
|
|
872
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
873
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx28__default.default("ds-radio", isChecked && "ds-radio--checked"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-radio__indicator" }) }),
|
|
873
874
|
label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-radio__label", children: label })
|
|
874
875
|
]
|
|
875
876
|
}
|
|
@@ -877,50 +878,174 @@ var Radio = React38.forwardRef(
|
|
|
877
878
|
}
|
|
878
879
|
);
|
|
879
880
|
Radio.displayName = "Radio";
|
|
880
|
-
var Switch =
|
|
881
|
+
var Switch = React39__default.default.forwardRef(
|
|
881
882
|
({ className, label, id, ...props }, ref) => {
|
|
882
|
-
const generatedId =
|
|
883
|
+
const generatedId = React39__default.default.useId();
|
|
883
884
|
const switchId = id || generatedId;
|
|
884
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
885
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx28__default.default("ds-switch-wrapper", className), children: [
|
|
885
886
|
/* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Root, { id: switchId, ref, className: "ds-switch", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: "ds-switch__thumb" }) }),
|
|
886
887
|
label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: switchId, className: "ds-switch__label", children: label })
|
|
887
888
|
] });
|
|
888
889
|
}
|
|
889
890
|
);
|
|
890
891
|
Switch.displayName = "Switch";
|
|
892
|
+
function Select({
|
|
893
|
+
value,
|
|
894
|
+
defaultValue,
|
|
895
|
+
onValueChange,
|
|
896
|
+
disabled,
|
|
897
|
+
required,
|
|
898
|
+
name,
|
|
899
|
+
items,
|
|
900
|
+
children
|
|
901
|
+
}) {
|
|
902
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
903
|
+
select.Select.Root,
|
|
904
|
+
{
|
|
905
|
+
value,
|
|
906
|
+
defaultValue,
|
|
907
|
+
onValueChange: onValueChange ? (val) => onValueChange(val) : void 0,
|
|
908
|
+
disabled,
|
|
909
|
+
required,
|
|
910
|
+
name,
|
|
911
|
+
items,
|
|
912
|
+
children
|
|
913
|
+
}
|
|
914
|
+
);
|
|
915
|
+
}
|
|
916
|
+
Select.displayName = "Select";
|
|
917
|
+
var SelectTrigger = React39__default.default.forwardRef(
|
|
918
|
+
({ className, placeholder = "Select...", size = "md", ...props }, ref) => {
|
|
919
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-select__trigger-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
920
|
+
select.Select.Trigger,
|
|
921
|
+
{
|
|
922
|
+
ref,
|
|
923
|
+
className: clsx28__default.default("ds-select__trigger", `ds-select__trigger--${size}`, className),
|
|
924
|
+
"aria-label": props["aria-label"] || (typeof placeholder === "string" ? placeholder : "Select"),
|
|
925
|
+
...props,
|
|
926
|
+
children: [
|
|
927
|
+
/* @__PURE__ */ jsxRuntime.jsx(select.Select.Value, { className: "ds-select__value", placeholder }),
|
|
928
|
+
/* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { className: "ds-select__icon", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
|
|
929
|
+
]
|
|
930
|
+
}
|
|
931
|
+
) });
|
|
932
|
+
}
|
|
933
|
+
);
|
|
934
|
+
SelectTrigger.displayName = "SelectTrigger";
|
|
935
|
+
var SelectContent = React39__default.default.forwardRef(
|
|
936
|
+
({ className, side = "bottom", sideOffset = 4, align = "start", children, ...props }, ref) => {
|
|
937
|
+
return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
938
|
+
select.Select.Positioner,
|
|
939
|
+
{
|
|
940
|
+
side,
|
|
941
|
+
sideOffset,
|
|
942
|
+
align,
|
|
943
|
+
alignItemWithTrigger: false,
|
|
944
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { ref, className: clsx28__default.default("ds-select__content", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.List, { className: "ds-select__list", children }) })
|
|
945
|
+
}
|
|
946
|
+
) });
|
|
947
|
+
}
|
|
948
|
+
);
|
|
949
|
+
SelectContent.displayName = "SelectContent";
|
|
950
|
+
var SelectItem = React39__default.default.forwardRef(
|
|
951
|
+
({ className, value, children, disabled, ...props }, ref) => {
|
|
952
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
953
|
+
select.Select.Item,
|
|
954
|
+
{
|
|
955
|
+
ref,
|
|
956
|
+
value,
|
|
957
|
+
disabled,
|
|
958
|
+
className: clsx28__default.default("ds-select__item", className),
|
|
959
|
+
...props,
|
|
960
|
+
children: [
|
|
961
|
+
/* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { className: "ds-select__item-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }),
|
|
962
|
+
/* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children })
|
|
963
|
+
]
|
|
964
|
+
}
|
|
965
|
+
);
|
|
966
|
+
}
|
|
967
|
+
);
|
|
968
|
+
SelectItem.displayName = "SelectItem";
|
|
969
|
+
var SelectGroup = React39__default.default.forwardRef(
|
|
970
|
+
({ className, label, children, ...props }, ref) => {
|
|
971
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Group, { ref, className: clsx28__default.default("ds-select__group", className), ...props, children: [
|
|
972
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(select.Select.GroupLabel, { className: "ds-select__group-label", children: label }),
|
|
973
|
+
children
|
|
974
|
+
] });
|
|
975
|
+
}
|
|
976
|
+
);
|
|
977
|
+
SelectGroup.displayName = "SelectGroup";
|
|
978
|
+
var SelectSeparator = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
979
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-select__separator", className), ...props });
|
|
980
|
+
});
|
|
981
|
+
SelectSeparator.displayName = "SelectSeparator";
|
|
982
|
+
function ChevronDownIcon() {
|
|
983
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
984
|
+
"svg",
|
|
985
|
+
{
|
|
986
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
987
|
+
width: "16",
|
|
988
|
+
height: "16",
|
|
989
|
+
viewBox: "0 0 24 24",
|
|
990
|
+
fill: "none",
|
|
991
|
+
stroke: "currentColor",
|
|
992
|
+
strokeWidth: "2",
|
|
993
|
+
strokeLinecap: "round",
|
|
994
|
+
strokeLinejoin: "round",
|
|
995
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
|
|
996
|
+
}
|
|
997
|
+
);
|
|
998
|
+
}
|
|
999
|
+
function CheckIcon() {
|
|
1000
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1001
|
+
"svg",
|
|
1002
|
+
{
|
|
1003
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1004
|
+
width: "14",
|
|
1005
|
+
height: "14",
|
|
1006
|
+
viewBox: "0 0 24 24",
|
|
1007
|
+
fill: "none",
|
|
1008
|
+
stroke: "currentColor",
|
|
1009
|
+
strokeWidth: "2",
|
|
1010
|
+
strokeLinecap: "round",
|
|
1011
|
+
strokeLinejoin: "round",
|
|
1012
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
|
|
1013
|
+
}
|
|
1014
|
+
);
|
|
1015
|
+
}
|
|
891
1016
|
var Dialog = dialog.Dialog.Root;
|
|
892
1017
|
var DialogTrigger = dialog.Dialog.Trigger;
|
|
893
1018
|
var DialogClose = dialog.Dialog.Close;
|
|
894
|
-
var DialogTitle =
|
|
1019
|
+
var DialogTitle = React39__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { ref, className: clsx28__default.default("ds-dialog__title", className), ...props }));
|
|
895
1020
|
DialogTitle.displayName = "DialogTitle";
|
|
896
|
-
var DialogDescription =
|
|
1021
|
+
var DialogDescription = React39__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
897
1022
|
dialog.Dialog.Description,
|
|
898
1023
|
{
|
|
899
1024
|
ref,
|
|
900
|
-
className:
|
|
1025
|
+
className: clsx28__default.default("ds-dialog__description", className),
|
|
901
1026
|
...props
|
|
902
1027
|
}
|
|
903
1028
|
));
|
|
904
1029
|
DialogDescription.displayName = "DialogDescription";
|
|
905
|
-
var DialogContent =
|
|
1030
|
+
var DialogContent = React39__default.default.forwardRef(
|
|
906
1031
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
|
|
907
1032
|
/* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { className: "ds-dialog__backdrop" }),
|
|
908
|
-
/* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Popup, { ref, className:
|
|
1033
|
+
/* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Popup, { ref, className: clsx28__default.default("ds-dialog__content", className), ...props, children })
|
|
909
1034
|
] })
|
|
910
1035
|
);
|
|
911
1036
|
DialogContent.displayName = "DialogContent";
|
|
912
|
-
var DialogHeader =
|
|
913
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1037
|
+
var DialogHeader = React39__default.default.forwardRef(
|
|
1038
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-dialog__header", className), ...props })
|
|
914
1039
|
);
|
|
915
1040
|
DialogHeader.displayName = "DialogHeader";
|
|
916
|
-
var DialogFooter =
|
|
917
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1041
|
+
var DialogFooter = React39__default.default.forwardRef(
|
|
1042
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-dialog__footer", className), ...props })
|
|
918
1043
|
);
|
|
919
1044
|
DialogFooter.displayName = "DialogFooter";
|
|
920
1045
|
var TooltipProvider = tooltip.Tooltip.Provider;
|
|
921
1046
|
var TooltipRoot = tooltip.Tooltip.Root;
|
|
922
1047
|
var TooltipTrigger = tooltip.Tooltip.Trigger;
|
|
923
|
-
var TooltipContent =
|
|
1048
|
+
var TooltipContent = React39__default.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Positioner, { sideOffset: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip.Popup, { ref, className: clsx28__default.default("ds-tooltip__content", className), ...props, children: [
|
|
924
1049
|
children,
|
|
925
1050
|
/* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "ds-tooltip__arrow" })
|
|
926
1051
|
] }) }) }));
|
|
@@ -931,26 +1056,26 @@ var Tooltip = ({ content, children, delay = 200 }) => {
|
|
|
931
1056
|
/* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: content })
|
|
932
1057
|
] }) });
|
|
933
1058
|
};
|
|
934
|
-
var Badge =
|
|
1059
|
+
var Badge = React39__default.default.forwardRef(
|
|
935
1060
|
({ className, variant = "default", ...props }, ref) => {
|
|
936
1061
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
937
1062
|
"span",
|
|
938
1063
|
{
|
|
939
1064
|
ref,
|
|
940
|
-
className:
|
|
1065
|
+
className: clsx28__default.default("ds-badge", `ds-badge--${variant}`, className),
|
|
941
1066
|
...props
|
|
942
1067
|
}
|
|
943
1068
|
);
|
|
944
1069
|
}
|
|
945
1070
|
);
|
|
946
1071
|
Badge.displayName = "Badge";
|
|
947
|
-
var StatusBadge =
|
|
1072
|
+
var StatusBadge = React39__default.default.forwardRef(
|
|
948
1073
|
({ variant = "default", size = "md", dot = false, className, children }, ref) => {
|
|
949
1074
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
950
1075
|
"span",
|
|
951
1076
|
{
|
|
952
1077
|
ref,
|
|
953
|
-
className:
|
|
1078
|
+
className: clsx28__default.default(
|
|
954
1079
|
"ds-status-badge",
|
|
955
1080
|
`ds-status-badge--${variant}`,
|
|
956
1081
|
`ds-status-badge--${size}`,
|
|
@@ -1039,7 +1164,7 @@ var DefaultIcons = {
|
|
|
1039
1164
|
}
|
|
1040
1165
|
)
|
|
1041
1166
|
};
|
|
1042
|
-
var Alert =
|
|
1167
|
+
var Alert = React39__default.default.forwardRef(
|
|
1043
1168
|
({ className, variant = "info", title, icon, children, ...props }, ref) => {
|
|
1044
1169
|
const renderedIcon = icon || DefaultIcons[variant];
|
|
1045
1170
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1047,7 +1172,7 @@ var Alert = React38__default.default.forwardRef(
|
|
|
1047
1172
|
{
|
|
1048
1173
|
ref,
|
|
1049
1174
|
role: "alert",
|
|
1050
|
-
className:
|
|
1175
|
+
className: clsx28__default.default("ds-alert", `ds-alert--${variant}`, className),
|
|
1051
1176
|
...props,
|
|
1052
1177
|
children: [
|
|
1053
1178
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-alert__icon", "aria-hidden": "true", children: renderedIcon }),
|
|
@@ -1061,9 +1186,9 @@ var Alert = React38__default.default.forwardRef(
|
|
|
1061
1186
|
}
|
|
1062
1187
|
);
|
|
1063
1188
|
Alert.displayName = "Alert";
|
|
1064
|
-
var ToastContext =
|
|
1189
|
+
var ToastContext = React39.createContext(void 0);
|
|
1065
1190
|
var useToast = () => {
|
|
1066
|
-
const context =
|
|
1191
|
+
const context = React39.useContext(ToastContext);
|
|
1067
1192
|
if (!context) {
|
|
1068
1193
|
throw new Error("useToast must be used within a ToastProvider");
|
|
1069
1194
|
}
|
|
@@ -1077,7 +1202,7 @@ var ToastItem = ({
|
|
|
1077
1202
|
onDismiss,
|
|
1078
1203
|
dismissLabel = "Close"
|
|
1079
1204
|
}) => {
|
|
1080
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
1205
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx28__default.default("ds-toast-root", `ds-toast--${variant}`), "data-state": "open", role: "alert", children: [
|
|
1081
1206
|
title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-title", children: title }),
|
|
1082
1207
|
description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-description", children: description }),
|
|
1083
1208
|
action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-action", children: action }),
|
|
@@ -1118,14 +1243,14 @@ var ToastItem = ({
|
|
|
1118
1243
|
] });
|
|
1119
1244
|
};
|
|
1120
1245
|
var ToastProvider = ({ children }) => {
|
|
1121
|
-
const [toasts, setToasts] =
|
|
1122
|
-
const [mounted, setMounted] =
|
|
1123
|
-
const idCounter =
|
|
1124
|
-
|
|
1125
|
-
const removeToast =
|
|
1246
|
+
const [toasts, setToasts] = React39.useState([]);
|
|
1247
|
+
const [mounted, setMounted] = React39.useState(false);
|
|
1248
|
+
const idCounter = React39.useRef(0);
|
|
1249
|
+
React39.useEffect(() => setMounted(true), []);
|
|
1250
|
+
const removeToast = React39.useCallback((id) => {
|
|
1126
1251
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
1127
1252
|
}, []);
|
|
1128
|
-
const addToast =
|
|
1253
|
+
const addToast = React39.useCallback(
|
|
1129
1254
|
({ duration = 5e3, ...props }) => {
|
|
1130
1255
|
const id = `toast-${++idCounter.current}`;
|
|
1131
1256
|
const newToast = { ...props, id, duration };
|
|
@@ -1147,18 +1272,18 @@ var ToastProvider = ({ children }) => {
|
|
|
1147
1272
|
] });
|
|
1148
1273
|
};
|
|
1149
1274
|
var DropdownMenu = menu.Menu.Root;
|
|
1150
|
-
var DropdownMenuTrigger =
|
|
1275
|
+
var DropdownMenuTrigger = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
1151
1276
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1152
1277
|
menu.Menu.Trigger,
|
|
1153
1278
|
{
|
|
1154
1279
|
ref,
|
|
1155
|
-
className:
|
|
1280
|
+
className: clsx28__default.default("ds-dropdown-menu__trigger", className),
|
|
1156
1281
|
...props
|
|
1157
1282
|
}
|
|
1158
1283
|
);
|
|
1159
1284
|
});
|
|
1160
1285
|
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
|
1161
|
-
var DropdownMenuContent =
|
|
1286
|
+
var DropdownMenuContent = React39__default.default.forwardRef(
|
|
1162
1287
|
({ className, side = "bottom", align = "start", sideOffset = 4, alignOffset = 0, ...props }, ref) => {
|
|
1163
1288
|
return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1164
1289
|
menu.Menu.Positioner,
|
|
@@ -1171,7 +1296,7 @@ var DropdownMenuContent = React38__default.default.forwardRef(
|
|
|
1171
1296
|
menu.Menu.Popup,
|
|
1172
1297
|
{
|
|
1173
1298
|
ref,
|
|
1174
|
-
className:
|
|
1299
|
+
className: clsx28__default.default("ds-dropdown-menu__content", className),
|
|
1175
1300
|
...props
|
|
1176
1301
|
}
|
|
1177
1302
|
)
|
|
@@ -1180,23 +1305,23 @@ var DropdownMenuContent = React38__default.default.forwardRef(
|
|
|
1180
1305
|
}
|
|
1181
1306
|
);
|
|
1182
1307
|
DropdownMenuContent.displayName = "DropdownMenuContent";
|
|
1183
|
-
var DropdownMenuItem =
|
|
1308
|
+
var DropdownMenuItem = React39__default.default.forwardRef(
|
|
1184
1309
|
({ className, ...props }, ref) => {
|
|
1185
|
-
return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Item, { ref, className:
|
|
1310
|
+
return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Item, { ref, className: clsx28__default.default("ds-dropdown-menu__item", className), ...props });
|
|
1186
1311
|
}
|
|
1187
1312
|
);
|
|
1188
1313
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
1189
|
-
var DropdownMenuSeparator =
|
|
1190
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1314
|
+
var DropdownMenuSeparator = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
1315
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-dropdown-menu__separator", className), ...props });
|
|
1191
1316
|
});
|
|
1192
1317
|
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
|
|
1193
|
-
var DropdownMenuLabel =
|
|
1194
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1318
|
+
var DropdownMenuLabel = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
1319
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-dropdown-menu__label", className), ...props });
|
|
1195
1320
|
});
|
|
1196
1321
|
DropdownMenuLabel.displayName = "DropdownMenuLabel";
|
|
1197
|
-
var EmptyState =
|
|
1322
|
+
var EmptyState = React39__default.default.forwardRef(
|
|
1198
1323
|
({ icon, title, description, action, className, ...props }, ref) => {
|
|
1199
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className:
|
|
1324
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx28__default.default("ds-empty-state", className), ...props, children: [
|
|
1200
1325
|
icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-empty-state__icon", children: icon }),
|
|
1201
1326
|
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-empty-state__title", children: title }),
|
|
1202
1327
|
description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-empty-state__description", children: description }),
|
|
@@ -1205,48 +1330,48 @@ var EmptyState = React38__default.default.forwardRef(
|
|
|
1205
1330
|
}
|
|
1206
1331
|
);
|
|
1207
1332
|
EmptyState.displayName = "EmptyState";
|
|
1208
|
-
var Card =
|
|
1209
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1333
|
+
var Card = React39__default.default.forwardRef(
|
|
1334
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-card", className), ...props })
|
|
1210
1335
|
);
|
|
1211
1336
|
Card.displayName = "Card";
|
|
1212
|
-
var CardHeader =
|
|
1213
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1337
|
+
var CardHeader = React39__default.default.forwardRef(
|
|
1338
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-card__header", className), ...props })
|
|
1214
1339
|
);
|
|
1215
1340
|
CardHeader.displayName = "CardHeader";
|
|
1216
|
-
var CardTitle =
|
|
1341
|
+
var CardTitle = React39__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: clsx28__default.default("ds-card__title", className), ...props }));
|
|
1217
1342
|
CardTitle.displayName = "CardTitle";
|
|
1218
|
-
var CardDescription =
|
|
1343
|
+
var CardDescription = React39__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx28__default.default("ds-card__description", className), ...props }));
|
|
1219
1344
|
CardDescription.displayName = "CardDescription";
|
|
1220
|
-
var CardContent =
|
|
1221
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1345
|
+
var CardContent = React39__default.default.forwardRef(
|
|
1346
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-card__content", className), ...props })
|
|
1222
1347
|
);
|
|
1223
1348
|
CardContent.displayName = "CardContent";
|
|
1224
|
-
var CardFooter =
|
|
1225
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1349
|
+
var CardFooter = React39__default.default.forwardRef(
|
|
1350
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-card__footer", className), ...props })
|
|
1226
1351
|
);
|
|
1227
1352
|
CardFooter.displayName = "CardFooter";
|
|
1228
|
-
var AccordionContext =
|
|
1353
|
+
var AccordionContext = React39__default.default.createContext(null);
|
|
1229
1354
|
function useAccordionContext() {
|
|
1230
|
-
const ctx =
|
|
1355
|
+
const ctx = React39__default.default.useContext(AccordionContext);
|
|
1231
1356
|
if (!ctx) {
|
|
1232
1357
|
throw new Error("Accordion compound components must be used within <Accordion>");
|
|
1233
1358
|
}
|
|
1234
1359
|
return ctx;
|
|
1235
1360
|
}
|
|
1236
|
-
var AccordionItemContext =
|
|
1361
|
+
var AccordionItemContext = React39__default.default.createContext(null);
|
|
1237
1362
|
function useAccordionItemContext() {
|
|
1238
|
-
const ctx =
|
|
1363
|
+
const ctx = React39__default.default.useContext(AccordionItemContext);
|
|
1239
1364
|
if (!ctx) {
|
|
1240
1365
|
throw new Error("AccordionTrigger/AccordionContent must be used within <AccordionItem>");
|
|
1241
1366
|
}
|
|
1242
1367
|
return ctx;
|
|
1243
1368
|
}
|
|
1244
|
-
var Accordion =
|
|
1369
|
+
var Accordion = React39__default.default.forwardRef(
|
|
1245
1370
|
({ className, type = "single", defaultValue = [], collapsible: _collapsible, children, ...props }, ref) => {
|
|
1246
|
-
const [openItems, setOpenItems] =
|
|
1371
|
+
const [openItems, setOpenItems] = React39__default.default.useState(
|
|
1247
1372
|
() => new Set(defaultValue)
|
|
1248
1373
|
);
|
|
1249
|
-
const toggle =
|
|
1374
|
+
const toggle = React39__default.default.useCallback(
|
|
1250
1375
|
(value) => {
|
|
1251
1376
|
setOpenItems((prev) => {
|
|
1252
1377
|
const next = new Set(prev);
|
|
@@ -1263,19 +1388,19 @@ var Accordion = React38__default.default.forwardRef(
|
|
|
1263
1388
|
},
|
|
1264
1389
|
[type]
|
|
1265
1390
|
);
|
|
1266
|
-
const contextValue =
|
|
1391
|
+
const contextValue = React39__default.default.useMemo(
|
|
1267
1392
|
() => ({ openItems, toggle }),
|
|
1268
1393
|
[openItems, toggle]
|
|
1269
1394
|
);
|
|
1270
|
-
return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1395
|
+
return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-accordion", className), ...props, children }) });
|
|
1271
1396
|
}
|
|
1272
1397
|
);
|
|
1273
1398
|
Accordion.displayName = "Accordion";
|
|
1274
|
-
var AccordionItem =
|
|
1399
|
+
var AccordionItem = React39__default.default.forwardRef(
|
|
1275
1400
|
({ className, value, children, ...props }, ref) => {
|
|
1276
1401
|
const { openItems } = useAccordionContext();
|
|
1277
1402
|
const isOpen = openItems.has(value);
|
|
1278
|
-
const contextValue =
|
|
1403
|
+
const contextValue = React39__default.default.useMemo(
|
|
1279
1404
|
() => ({ value, isOpen }),
|
|
1280
1405
|
[value, isOpen]
|
|
1281
1406
|
);
|
|
@@ -1283,7 +1408,7 @@ var AccordionItem = React38__default.default.forwardRef(
|
|
|
1283
1408
|
"div",
|
|
1284
1409
|
{
|
|
1285
1410
|
ref,
|
|
1286
|
-
className:
|
|
1411
|
+
className: clsx28__default.default("ds-accordion__item", className),
|
|
1287
1412
|
"data-state": isOpen ? "open" : "closed",
|
|
1288
1413
|
...props,
|
|
1289
1414
|
children
|
|
@@ -1292,7 +1417,7 @@ var AccordionItem = React38__default.default.forwardRef(
|
|
|
1292
1417
|
}
|
|
1293
1418
|
);
|
|
1294
1419
|
AccordionItem.displayName = "AccordionItem";
|
|
1295
|
-
var AccordionTrigger =
|
|
1420
|
+
var AccordionTrigger = React39__default.default.forwardRef(({ className, children, ...props }, ref) => {
|
|
1296
1421
|
const { toggle } = useAccordionContext();
|
|
1297
1422
|
const { value, isOpen } = useAccordionItemContext();
|
|
1298
1423
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1300,7 +1425,7 @@ var AccordionTrigger = React38__default.default.forwardRef(({ className, childre
|
|
|
1300
1425
|
{
|
|
1301
1426
|
ref,
|
|
1302
1427
|
type: "button",
|
|
1303
|
-
className:
|
|
1428
|
+
className: clsx28__default.default("ds-accordion__trigger", className),
|
|
1304
1429
|
"aria-expanded": isOpen,
|
|
1305
1430
|
onClick: () => toggle(value),
|
|
1306
1431
|
...props,
|
|
@@ -1327,13 +1452,13 @@ var AccordionTrigger = React38__default.default.forwardRef(({ className, childre
|
|
|
1327
1452
|
);
|
|
1328
1453
|
});
|
|
1329
1454
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
1330
|
-
var AccordionContent =
|
|
1455
|
+
var AccordionContent = React39__default.default.forwardRef(({ className, children, ...props }, ref) => {
|
|
1331
1456
|
const { isOpen } = useAccordionItemContext();
|
|
1332
|
-
const contentRef =
|
|
1333
|
-
const [height, setHeight] =
|
|
1457
|
+
const contentRef = React39__default.default.useRef(null);
|
|
1458
|
+
const [height, setHeight] = React39__default.default.useState(
|
|
1334
1459
|
isOpen ? void 0 : 0
|
|
1335
1460
|
);
|
|
1336
|
-
|
|
1461
|
+
React39__default.default.useEffect(() => {
|
|
1337
1462
|
const el = contentRef.current;
|
|
1338
1463
|
if (!el) return;
|
|
1339
1464
|
if (isOpen) {
|
|
@@ -1355,7 +1480,7 @@ var AccordionContent = React38__default.default.forwardRef(({ className, childre
|
|
|
1355
1480
|
"div",
|
|
1356
1481
|
{
|
|
1357
1482
|
ref: contentRef,
|
|
1358
|
-
className:
|
|
1483
|
+
className: clsx28__default.default("ds-accordion__content", className),
|
|
1359
1484
|
style: {
|
|
1360
1485
|
height: height !== void 0 ? `${height}px` : "auto"
|
|
1361
1486
|
},
|
|
@@ -1366,13 +1491,13 @@ var AccordionContent = React38__default.default.forwardRef(({ className, childre
|
|
|
1366
1491
|
);
|
|
1367
1492
|
});
|
|
1368
1493
|
AccordionContent.displayName = "AccordionContent";
|
|
1369
|
-
var Label =
|
|
1494
|
+
var Label = React39__default.default.forwardRef(
|
|
1370
1495
|
({ className, disabled, ...props }, ref) => {
|
|
1371
1496
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1372
1497
|
"label",
|
|
1373
1498
|
{
|
|
1374
1499
|
ref,
|
|
1375
|
-
className:
|
|
1500
|
+
className: clsx28__default.default("ds-label", disabled && "ds-label--disabled", className),
|
|
1376
1501
|
"data-disabled": disabled || void 0,
|
|
1377
1502
|
...props
|
|
1378
1503
|
}
|
|
@@ -1380,20 +1505,20 @@ var Label = React38__default.default.forwardRef(
|
|
|
1380
1505
|
}
|
|
1381
1506
|
);
|
|
1382
1507
|
Label.displayName = "Label";
|
|
1383
|
-
var Skeleton =
|
|
1508
|
+
var Skeleton = React39__default.default.forwardRef(
|
|
1384
1509
|
({ className, ...props }, ref) => {
|
|
1385
1510
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1386
1511
|
"div",
|
|
1387
1512
|
{
|
|
1388
1513
|
ref,
|
|
1389
|
-
className:
|
|
1514
|
+
className: clsx28__default.default("ds-skeleton", className),
|
|
1390
1515
|
...props
|
|
1391
1516
|
}
|
|
1392
1517
|
);
|
|
1393
1518
|
}
|
|
1394
1519
|
);
|
|
1395
1520
|
Skeleton.displayName = "Skeleton";
|
|
1396
|
-
var Separator =
|
|
1521
|
+
var Separator = React39__default.default.forwardRef(
|
|
1397
1522
|
({ className, orientation = "horizontal", ...props }, ref) => {
|
|
1398
1523
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1399
1524
|
"div",
|
|
@@ -1401,7 +1526,7 @@ var Separator = React38__default.default.forwardRef(
|
|
|
1401
1526
|
ref,
|
|
1402
1527
|
role: "separator",
|
|
1403
1528
|
"aria-orientation": orientation,
|
|
1404
|
-
className:
|
|
1529
|
+
className: clsx28__default.default(
|
|
1405
1530
|
"ds-separator",
|
|
1406
1531
|
`ds-separator--${orientation}`,
|
|
1407
1532
|
className
|
|
@@ -1412,19 +1537,19 @@ var Separator = React38__default.default.forwardRef(
|
|
|
1412
1537
|
}
|
|
1413
1538
|
);
|
|
1414
1539
|
Separator.displayName = "Separator";
|
|
1415
|
-
var SheetContext =
|
|
1540
|
+
var SheetContext = React39__default.default.createContext(void 0);
|
|
1416
1541
|
function useSheetContext() {
|
|
1417
|
-
const ctx =
|
|
1542
|
+
const ctx = React39__default.default.useContext(SheetContext);
|
|
1418
1543
|
if (!ctx) {
|
|
1419
1544
|
throw new Error("Sheet compound components must be used within a <Sheet> parent.");
|
|
1420
1545
|
}
|
|
1421
1546
|
return ctx;
|
|
1422
1547
|
}
|
|
1423
1548
|
var Sheet = ({ open: controlledOpen, onOpenChange, children }) => {
|
|
1424
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
1549
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React39__default.default.useState(false);
|
|
1425
1550
|
const isControlled = controlledOpen !== void 0;
|
|
1426
1551
|
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
1427
|
-
const handleOpenChange =
|
|
1552
|
+
const handleOpenChange = React39__default.default.useCallback(
|
|
1428
1553
|
(next) => {
|
|
1429
1554
|
if (!isControlled) {
|
|
1430
1555
|
setUncontrolledOpen(next);
|
|
@@ -1436,7 +1561,7 @@ var Sheet = ({ open: controlledOpen, onOpenChange, children }) => {
|
|
|
1436
1561
|
return /* @__PURE__ */ jsxRuntime.jsx(SheetContext.Provider, { value: { open, onOpenChange: handleOpenChange }, children });
|
|
1437
1562
|
};
|
|
1438
1563
|
Sheet.displayName = "Sheet";
|
|
1439
|
-
var SheetTrigger =
|
|
1564
|
+
var SheetTrigger = React39__default.default.forwardRef(
|
|
1440
1565
|
({ onClick, asChild = false, ...props }, ref) => {
|
|
1441
1566
|
const { onOpenChange } = useSheetContext();
|
|
1442
1567
|
const handleClick = (e) => {
|
|
@@ -1448,7 +1573,7 @@ var SheetTrigger = React38__default.default.forwardRef(
|
|
|
1448
1573
|
}
|
|
1449
1574
|
);
|
|
1450
1575
|
SheetTrigger.displayName = "SheetTrigger";
|
|
1451
|
-
var SheetClose =
|
|
1576
|
+
var SheetClose = React39__default.default.forwardRef(
|
|
1452
1577
|
({ onClick, asChild = false, ...props }, ref) => {
|
|
1453
1578
|
const { onOpenChange } = useSheetContext();
|
|
1454
1579
|
const handleClick = (e) => {
|
|
@@ -1460,7 +1585,7 @@ var SheetClose = React38__default.default.forwardRef(
|
|
|
1460
1585
|
}
|
|
1461
1586
|
);
|
|
1462
1587
|
SheetClose.displayName = "SheetClose";
|
|
1463
|
-
var SheetContent =
|
|
1588
|
+
var SheetContent = React39__default.default.forwardRef(
|
|
1464
1589
|
({ side = "right", className, children, ...props }, ref) => {
|
|
1465
1590
|
const { open, onOpenChange } = useSheetContext();
|
|
1466
1591
|
if (!open) return null;
|
|
@@ -1479,7 +1604,7 @@ var SheetContent = React38__default.default.forwardRef(
|
|
|
1479
1604
|
{
|
|
1480
1605
|
ref,
|
|
1481
1606
|
role: "dialog",
|
|
1482
|
-
className:
|
|
1607
|
+
className: clsx28__default.default("ds-sheet__content", `ds-sheet__content--${side}`, className),
|
|
1483
1608
|
...props,
|
|
1484
1609
|
children
|
|
1485
1610
|
}
|
|
@@ -1490,45 +1615,45 @@ var SheetContent = React38__default.default.forwardRef(
|
|
|
1490
1615
|
}
|
|
1491
1616
|
);
|
|
1492
1617
|
SheetContent.displayName = "SheetContent";
|
|
1493
|
-
var SheetHeader =
|
|
1494
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1618
|
+
var SheetHeader = React39__default.default.forwardRef(
|
|
1619
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-sheet__header", className), ...props })
|
|
1495
1620
|
);
|
|
1496
1621
|
SheetHeader.displayName = "SheetHeader";
|
|
1497
|
-
var SheetTitle =
|
|
1622
|
+
var SheetTitle = React39__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: clsx28__default.default("ds-sheet__title", className), ...props }));
|
|
1498
1623
|
SheetTitle.displayName = "SheetTitle";
|
|
1499
|
-
var SheetDescription =
|
|
1624
|
+
var SheetDescription = React39__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx28__default.default("ds-sheet__description", className), ...props }));
|
|
1500
1625
|
SheetDescription.displayName = "SheetDescription";
|
|
1501
|
-
var SheetFooter =
|
|
1502
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1626
|
+
var SheetFooter = React39__default.default.forwardRef(
|
|
1627
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-sheet__footer", className), ...props })
|
|
1503
1628
|
);
|
|
1504
1629
|
SheetFooter.displayName = "SheetFooter";
|
|
1505
|
-
var AvatarContext =
|
|
1630
|
+
var AvatarContext = React39__default.default.createContext({
|
|
1506
1631
|
hasImage: false,
|
|
1507
1632
|
imageError: false,
|
|
1508
1633
|
onImageError: () => {
|
|
1509
1634
|
}
|
|
1510
1635
|
});
|
|
1511
|
-
var Avatar =
|
|
1636
|
+
var Avatar = React39__default.default.forwardRef(
|
|
1512
1637
|
({ size = "md", className, children, ...props }, ref) => {
|
|
1513
|
-
const [imageError, setImageError] =
|
|
1514
|
-
const [hasImage, setHasImage] =
|
|
1515
|
-
|
|
1638
|
+
const [imageError, setImageError] = React39__default.default.useState(false);
|
|
1639
|
+
const [hasImage, setHasImage] = React39__default.default.useState(false);
|
|
1640
|
+
React39__default.default.useEffect(() => {
|
|
1516
1641
|
let found = false;
|
|
1517
|
-
|
|
1518
|
-
if (
|
|
1642
|
+
React39__default.default.Children.forEach(children, (child) => {
|
|
1643
|
+
if (React39__default.default.isValidElement(child) && child.type === AvatarImage) {
|
|
1519
1644
|
found = true;
|
|
1520
1645
|
}
|
|
1521
1646
|
});
|
|
1522
1647
|
setHasImage(found);
|
|
1523
1648
|
}, [children]);
|
|
1524
|
-
const onImageError =
|
|
1649
|
+
const onImageError = React39__default.default.useCallback(() => {
|
|
1525
1650
|
setImageError(true);
|
|
1526
1651
|
}, []);
|
|
1527
1652
|
return /* @__PURE__ */ jsxRuntime.jsx(AvatarContext.Provider, { value: { hasImage, imageError, onImageError }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1528
1653
|
"span",
|
|
1529
1654
|
{
|
|
1530
1655
|
ref,
|
|
1531
|
-
className:
|
|
1656
|
+
className: clsx28__default.default("ds-avatar", `ds-avatar--${size}`, className),
|
|
1532
1657
|
...props,
|
|
1533
1658
|
children
|
|
1534
1659
|
}
|
|
@@ -1536,8 +1661,8 @@ var Avatar = React38__default.default.forwardRef(
|
|
|
1536
1661
|
}
|
|
1537
1662
|
);
|
|
1538
1663
|
Avatar.displayName = "Avatar";
|
|
1539
|
-
var AvatarImage =
|
|
1540
|
-
const { imageError, onImageError } =
|
|
1664
|
+
var AvatarImage = React39__default.default.forwardRef(({ className, onError, ...props }, ref) => {
|
|
1665
|
+
const { imageError, onImageError } = React39__default.default.useContext(AvatarContext);
|
|
1541
1666
|
const handleError = (e) => {
|
|
1542
1667
|
onImageError();
|
|
1543
1668
|
onError?.(e);
|
|
@@ -1547,32 +1672,32 @@ var AvatarImage = React38__default.default.forwardRef(({ className, onError, ...
|
|
|
1547
1672
|
"img",
|
|
1548
1673
|
{
|
|
1549
1674
|
ref,
|
|
1550
|
-
className:
|
|
1675
|
+
className: clsx28__default.default("ds-avatar__image", className),
|
|
1551
1676
|
onError: handleError,
|
|
1552
1677
|
...props
|
|
1553
1678
|
}
|
|
1554
1679
|
);
|
|
1555
1680
|
});
|
|
1556
1681
|
AvatarImage.displayName = "AvatarImage";
|
|
1557
|
-
var AvatarFallback =
|
|
1558
|
-
const { hasImage, imageError } =
|
|
1682
|
+
var AvatarFallback = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
1683
|
+
const { hasImage, imageError } = React39__default.default.useContext(AvatarContext);
|
|
1559
1684
|
if (hasImage && !imageError) return null;
|
|
1560
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className:
|
|
1685
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx28__default.default("ds-avatar__fallback", className), ...props });
|
|
1561
1686
|
});
|
|
1562
1687
|
AvatarFallback.displayName = "AvatarFallback";
|
|
1563
|
-
var PopoverContext =
|
|
1688
|
+
var PopoverContext = React39__default.default.createContext(null);
|
|
1564
1689
|
function usePopoverContext() {
|
|
1565
|
-
const context =
|
|
1690
|
+
const context = React39__default.default.useContext(PopoverContext);
|
|
1566
1691
|
if (!context) {
|
|
1567
1692
|
throw new Error("Popover compound components must be used within <Popover>");
|
|
1568
1693
|
}
|
|
1569
1694
|
return context;
|
|
1570
1695
|
}
|
|
1571
1696
|
var Popover = ({ open: controlledOpen, onOpenChange, children }) => {
|
|
1572
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
1697
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React39__default.default.useState(false);
|
|
1573
1698
|
const isControlled = controlledOpen !== void 0;
|
|
1574
1699
|
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
1575
|
-
const setOpen =
|
|
1700
|
+
const setOpen = React39__default.default.useCallback(
|
|
1576
1701
|
(value) => {
|
|
1577
1702
|
if (!isControlled) {
|
|
1578
1703
|
setUncontrolledOpen(value);
|
|
@@ -1581,17 +1706,17 @@ var Popover = ({ open: controlledOpen, onOpenChange, children }) => {
|
|
|
1581
1706
|
},
|
|
1582
1707
|
[isControlled, onOpenChange]
|
|
1583
1708
|
);
|
|
1584
|
-
const toggle =
|
|
1709
|
+
const toggle = React39__default.default.useCallback(() => {
|
|
1585
1710
|
setOpen(!open);
|
|
1586
1711
|
}, [open, setOpen]);
|
|
1587
|
-
const contextValue =
|
|
1712
|
+
const contextValue = React39__default.default.useMemo(
|
|
1588
1713
|
() => ({ open, setOpen, toggle }),
|
|
1589
1714
|
[open, setOpen, toggle]
|
|
1590
1715
|
);
|
|
1591
1716
|
return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-popover", children }) });
|
|
1592
1717
|
};
|
|
1593
1718
|
Popover.displayName = "Popover";
|
|
1594
|
-
var PopoverTrigger =
|
|
1719
|
+
var PopoverTrigger = React39__default.default.forwardRef(
|
|
1595
1720
|
({ className, onClick, asChild = false, ...props }, ref) => {
|
|
1596
1721
|
const { toggle } = usePopoverContext();
|
|
1597
1722
|
const handleClick = (e) => {
|
|
@@ -1604,7 +1729,7 @@ var PopoverTrigger = React38__default.default.forwardRef(
|
|
|
1604
1729
|
{
|
|
1605
1730
|
ref,
|
|
1606
1731
|
type: "button",
|
|
1607
|
-
className:
|
|
1732
|
+
className: clsx28__default.default("ds-popover__trigger", className),
|
|
1608
1733
|
onClick: handleClick,
|
|
1609
1734
|
...props
|
|
1610
1735
|
}
|
|
@@ -1612,7 +1737,7 @@ var PopoverTrigger = React38__default.default.forwardRef(
|
|
|
1612
1737
|
}
|
|
1613
1738
|
);
|
|
1614
1739
|
PopoverTrigger.displayName = "PopoverTrigger";
|
|
1615
|
-
var PopoverContent =
|
|
1740
|
+
var PopoverContent = React39__default.default.forwardRef(
|
|
1616
1741
|
({ className, side = "bottom", align = "center", ...props }, ref) => {
|
|
1617
1742
|
const { open } = usePopoverContext();
|
|
1618
1743
|
if (!open) return null;
|
|
@@ -1620,7 +1745,7 @@ var PopoverContent = React38__default.default.forwardRef(
|
|
|
1620
1745
|
"div",
|
|
1621
1746
|
{
|
|
1622
1747
|
ref,
|
|
1623
|
-
className:
|
|
1748
|
+
className: clsx28__default.default(
|
|
1624
1749
|
"ds-popover__content",
|
|
1625
1750
|
`ds-popover__content--${side}`,
|
|
1626
1751
|
`ds-popover__content--align-${align}`,
|
|
@@ -1632,7 +1757,7 @@ var PopoverContent = React38__default.default.forwardRef(
|
|
|
1632
1757
|
}
|
|
1633
1758
|
);
|
|
1634
1759
|
PopoverContent.displayName = "PopoverContent";
|
|
1635
|
-
var PopoverClose =
|
|
1760
|
+
var PopoverClose = React39__default.default.forwardRef(({ className, onClick, ...props }, ref) => {
|
|
1636
1761
|
const { setOpen } = usePopoverContext();
|
|
1637
1762
|
const handleClick = (e) => {
|
|
1638
1763
|
setOpen(false);
|
|
@@ -1643,14 +1768,14 @@ var PopoverClose = React38__default.default.forwardRef(({ className, onClick, ..
|
|
|
1643
1768
|
{
|
|
1644
1769
|
ref,
|
|
1645
1770
|
type: "button",
|
|
1646
|
-
className:
|
|
1771
|
+
className: clsx28__default.default("ds-popover__close", className),
|
|
1647
1772
|
onClick: handleClick,
|
|
1648
1773
|
...props
|
|
1649
1774
|
}
|
|
1650
1775
|
);
|
|
1651
1776
|
});
|
|
1652
1777
|
PopoverClose.displayName = "PopoverClose";
|
|
1653
|
-
var Progress =
|
|
1778
|
+
var Progress = React39__default.default.forwardRef(
|
|
1654
1779
|
({ className, value = 0, max = 100, ...props }, ref) => {
|
|
1655
1780
|
const percentage = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
|
|
1656
1781
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1661,7 +1786,7 @@ var Progress = React38__default.default.forwardRef(
|
|
|
1661
1786
|
"aria-valuenow": value,
|
|
1662
1787
|
"aria-valuemin": 0,
|
|
1663
1788
|
"aria-valuemax": max,
|
|
1664
|
-
className:
|
|
1789
|
+
className: clsx28__default.default("ds-progress", className),
|
|
1665
1790
|
...props,
|
|
1666
1791
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1667
1792
|
"div",
|
|
@@ -1675,19 +1800,19 @@ var Progress = React38__default.default.forwardRef(
|
|
|
1675
1800
|
}
|
|
1676
1801
|
);
|
|
1677
1802
|
Progress.displayName = "Progress";
|
|
1678
|
-
var ScrollArea =
|
|
1803
|
+
var ScrollArea = React39__default.default.forwardRef(
|
|
1679
1804
|
({ className, children, ...props }, ref) => {
|
|
1680
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
1805
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-scroll-area", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-scroll-area__viewport", children }) });
|
|
1681
1806
|
}
|
|
1682
1807
|
);
|
|
1683
1808
|
ScrollArea.displayName = "ScrollArea";
|
|
1684
|
-
var ScrollBar =
|
|
1809
|
+
var ScrollBar = React39__default.default.forwardRef(
|
|
1685
1810
|
({ className, orientation = "vertical", ...props }, ref) => {
|
|
1686
1811
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1687
1812
|
"div",
|
|
1688
1813
|
{
|
|
1689
1814
|
ref,
|
|
1690
|
-
className:
|
|
1815
|
+
className: clsx28__default.default(
|
|
1691
1816
|
"ds-scroll-area__scrollbar",
|
|
1692
1817
|
`ds-scroll-area__scrollbar--${orientation}`,
|
|
1693
1818
|
className
|
|
@@ -1698,55 +1823,55 @@ var ScrollBar = React38__default.default.forwardRef(
|
|
|
1698
1823
|
}
|
|
1699
1824
|
);
|
|
1700
1825
|
ScrollBar.displayName = "ScrollBar";
|
|
1701
|
-
var Breadcrumb =
|
|
1826
|
+
var Breadcrumb = React39__default.default.forwardRef(
|
|
1702
1827
|
({ className, "aria-label": ariaLabel = "Breadcrumb", ...props }, ref) => {
|
|
1703
1828
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1704
1829
|
"nav",
|
|
1705
1830
|
{
|
|
1706
1831
|
ref,
|
|
1707
1832
|
"aria-label": ariaLabel,
|
|
1708
|
-
className:
|
|
1833
|
+
className: clsx28__default.default("ds-breadcrumb", className),
|
|
1709
1834
|
...props
|
|
1710
1835
|
}
|
|
1711
1836
|
);
|
|
1712
1837
|
}
|
|
1713
1838
|
);
|
|
1714
1839
|
Breadcrumb.displayName = "Breadcrumb";
|
|
1715
|
-
var BreadcrumbList =
|
|
1840
|
+
var BreadcrumbList = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
1716
1841
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1717
1842
|
"ol",
|
|
1718
1843
|
{
|
|
1719
1844
|
ref,
|
|
1720
|
-
className:
|
|
1845
|
+
className: clsx28__default.default("ds-breadcrumb__list", className),
|
|
1721
1846
|
...props
|
|
1722
1847
|
}
|
|
1723
1848
|
);
|
|
1724
1849
|
});
|
|
1725
1850
|
BreadcrumbList.displayName = "BreadcrumbList";
|
|
1726
|
-
var BreadcrumbItem =
|
|
1851
|
+
var BreadcrumbItem = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
1727
1852
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1728
1853
|
"li",
|
|
1729
1854
|
{
|
|
1730
1855
|
ref,
|
|
1731
|
-
className:
|
|
1856
|
+
className: clsx28__default.default("ds-breadcrumb__item", className),
|
|
1732
1857
|
...props
|
|
1733
1858
|
}
|
|
1734
1859
|
);
|
|
1735
1860
|
});
|
|
1736
1861
|
BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
1737
|
-
var BreadcrumbLink =
|
|
1862
|
+
var BreadcrumbLink = React39__default.default.forwardRef(({ className, asChild = false, ...props }, ref) => {
|
|
1738
1863
|
const Comp = asChild ? reactSlot.Slot : "a";
|
|
1739
1864
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1740
1865
|
Comp,
|
|
1741
1866
|
{
|
|
1742
1867
|
ref,
|
|
1743
|
-
className:
|
|
1868
|
+
className: clsx28__default.default("ds-breadcrumb__link", className),
|
|
1744
1869
|
...props
|
|
1745
1870
|
}
|
|
1746
1871
|
);
|
|
1747
1872
|
});
|
|
1748
1873
|
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
1749
|
-
var BreadcrumbPage =
|
|
1874
|
+
var BreadcrumbPage = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
1750
1875
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1751
1876
|
"span",
|
|
1752
1877
|
{
|
|
@@ -1754,39 +1879,39 @@ var BreadcrumbPage = React38__default.default.forwardRef(({ className, ...props
|
|
|
1754
1879
|
role: "link",
|
|
1755
1880
|
"aria-current": "page",
|
|
1756
1881
|
"aria-disabled": "true",
|
|
1757
|
-
className:
|
|
1882
|
+
className: clsx28__default.default("ds-breadcrumb__page", className),
|
|
1758
1883
|
...props
|
|
1759
1884
|
}
|
|
1760
1885
|
);
|
|
1761
1886
|
});
|
|
1762
1887
|
BreadcrumbPage.displayName = "BreadcrumbPage";
|
|
1763
|
-
var BreadcrumbSeparator =
|
|
1888
|
+
var BreadcrumbSeparator = React39__default.default.forwardRef(({ className, children, ...props }, ref) => {
|
|
1764
1889
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1765
1890
|
"li",
|
|
1766
1891
|
{
|
|
1767
1892
|
ref,
|
|
1768
1893
|
role: "presentation",
|
|
1769
1894
|
"aria-hidden": "true",
|
|
1770
|
-
className:
|
|
1895
|
+
className: clsx28__default.default("ds-breadcrumb__separator", className),
|
|
1771
1896
|
...props,
|
|
1772
1897
|
children: children ?? "/"
|
|
1773
1898
|
}
|
|
1774
1899
|
);
|
|
1775
1900
|
});
|
|
1776
1901
|
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
|
|
1777
|
-
var BreadcrumbEllipsis =
|
|
1902
|
+
var BreadcrumbEllipsis = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
1778
1903
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1779
1904
|
"span",
|
|
1780
1905
|
{
|
|
1781
1906
|
ref,
|
|
1782
|
-
className:
|
|
1907
|
+
className: clsx28__default.default("ds-breadcrumb__ellipsis", className),
|
|
1783
1908
|
...props,
|
|
1784
1909
|
children: "\u2026"
|
|
1785
1910
|
}
|
|
1786
1911
|
);
|
|
1787
1912
|
});
|
|
1788
1913
|
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
|
|
1789
|
-
var Toggle =
|
|
1914
|
+
var Toggle = React39__default.default.forwardRef(
|
|
1790
1915
|
({
|
|
1791
1916
|
className,
|
|
1792
1917
|
pressed: controlledPressed,
|
|
@@ -1796,7 +1921,7 @@ var Toggle = React38__default.default.forwardRef(
|
|
|
1796
1921
|
onClick,
|
|
1797
1922
|
...props
|
|
1798
1923
|
}, ref) => {
|
|
1799
|
-
const [uncontrolledPressed, setUncontrolledPressed] =
|
|
1924
|
+
const [uncontrolledPressed, setUncontrolledPressed] = React39__default.default.useState(false);
|
|
1800
1925
|
const isControlled = controlledPressed !== void 0;
|
|
1801
1926
|
const pressed = isControlled ? controlledPressed : uncontrolledPressed;
|
|
1802
1927
|
const handleClick = (e) => {
|
|
@@ -1812,7 +1937,7 @@ var Toggle = React38__default.default.forwardRef(
|
|
|
1812
1937
|
{
|
|
1813
1938
|
ref,
|
|
1814
1939
|
type: "button",
|
|
1815
|
-
className:
|
|
1940
|
+
className: clsx28__default.default(
|
|
1816
1941
|
"ds-toggle",
|
|
1817
1942
|
`ds-toggle--${variant}`,
|
|
1818
1943
|
`ds-toggle--${size}`,
|
|
@@ -1827,19 +1952,19 @@ var Toggle = React38__default.default.forwardRef(
|
|
|
1827
1952
|
}
|
|
1828
1953
|
);
|
|
1829
1954
|
Toggle.displayName = "Toggle";
|
|
1830
|
-
var ToggleGroupContext =
|
|
1955
|
+
var ToggleGroupContext = React39__default.default.createContext({
|
|
1831
1956
|
type: "single",
|
|
1832
1957
|
value: [],
|
|
1833
1958
|
onItemToggle: () => {
|
|
1834
1959
|
}
|
|
1835
1960
|
});
|
|
1836
|
-
var ToggleGroup =
|
|
1961
|
+
var ToggleGroup = React39__default.default.forwardRef(
|
|
1837
1962
|
({ className, type, value, onValueChange, children, ...props }, ref) => {
|
|
1838
|
-
const normalizedValue =
|
|
1963
|
+
const normalizedValue = React39__default.default.useMemo(() => {
|
|
1839
1964
|
if (value === void 0) return [];
|
|
1840
1965
|
return Array.isArray(value) ? value : [value];
|
|
1841
1966
|
}, [value]);
|
|
1842
|
-
const onItemToggle =
|
|
1967
|
+
const onItemToggle = React39__default.default.useCallback(
|
|
1843
1968
|
(itemValue) => {
|
|
1844
1969
|
if (type === "single") {
|
|
1845
1970
|
const next = normalizedValue.includes(itemValue) ? "" : itemValue;
|
|
@@ -1851,7 +1976,7 @@ var ToggleGroup = React38__default.default.forwardRef(
|
|
|
1851
1976
|
},
|
|
1852
1977
|
[type, normalizedValue, onValueChange]
|
|
1853
1978
|
);
|
|
1854
|
-
const ctx =
|
|
1979
|
+
const ctx = React39__default.default.useMemo(
|
|
1855
1980
|
() => ({ type, value: normalizedValue, onItemToggle }),
|
|
1856
1981
|
[type, normalizedValue, onItemToggle]
|
|
1857
1982
|
);
|
|
@@ -1860,7 +1985,7 @@ var ToggleGroup = React38__default.default.forwardRef(
|
|
|
1860
1985
|
{
|
|
1861
1986
|
ref,
|
|
1862
1987
|
role: "group",
|
|
1863
|
-
className:
|
|
1988
|
+
className: clsx28__default.default("ds-toggle-group", className),
|
|
1864
1989
|
...props,
|
|
1865
1990
|
children
|
|
1866
1991
|
}
|
|
@@ -1868,8 +1993,8 @@ var ToggleGroup = React38__default.default.forwardRef(
|
|
|
1868
1993
|
}
|
|
1869
1994
|
);
|
|
1870
1995
|
ToggleGroup.displayName = "ToggleGroup";
|
|
1871
|
-
var ToggleGroupItem =
|
|
1872
|
-
const ctx =
|
|
1996
|
+
var ToggleGroupItem = React39__default.default.forwardRef(({ className, value, children, onClick, ...props }, ref) => {
|
|
1997
|
+
const ctx = React39__default.default.useContext(ToggleGroupContext);
|
|
1873
1998
|
const pressed = ctx.value.includes(value);
|
|
1874
1999
|
const handleClick = (e) => {
|
|
1875
2000
|
ctx.onItemToggle(value);
|
|
@@ -1881,7 +2006,7 @@ var ToggleGroupItem = React38__default.default.forwardRef(({ className, value, c
|
|
|
1881
2006
|
ref,
|
|
1882
2007
|
type: "button",
|
|
1883
2008
|
"aria-pressed": pressed,
|
|
1884
|
-
className:
|
|
2009
|
+
className: clsx28__default.default(
|
|
1885
2010
|
"ds-toggle-group__item",
|
|
1886
2011
|
pressed && "ds-toggle-group__item--pressed",
|
|
1887
2012
|
className
|
|
@@ -1893,7 +2018,7 @@ var ToggleGroupItem = React38__default.default.forwardRef(({ className, value, c
|
|
|
1893
2018
|
);
|
|
1894
2019
|
});
|
|
1895
2020
|
ToggleGroupItem.displayName = "ToggleGroupItem";
|
|
1896
|
-
var Slider =
|
|
2021
|
+
var Slider = React39__default.default.forwardRef(
|
|
1897
2022
|
({
|
|
1898
2023
|
className,
|
|
1899
2024
|
value: controlledValue,
|
|
@@ -1905,7 +2030,7 @@ var Slider = React38__default.default.forwardRef(
|
|
|
1905
2030
|
disabled = false,
|
|
1906
2031
|
...props
|
|
1907
2032
|
}, ref) => {
|
|
1908
|
-
const [uncontrolledValue, setUncontrolledValue] =
|
|
2033
|
+
const [uncontrolledValue, setUncontrolledValue] = React39__default.default.useState(defaultValue);
|
|
1909
2034
|
const isControlled = controlledValue !== void 0;
|
|
1910
2035
|
const value = isControlled ? controlledValue : uncontrolledValue;
|
|
1911
2036
|
const handleChange = (e) => {
|
|
@@ -1920,7 +2045,7 @@ var Slider = React38__default.default.forwardRef(
|
|
|
1920
2045
|
"div",
|
|
1921
2046
|
{
|
|
1922
2047
|
ref,
|
|
1923
|
-
className:
|
|
2048
|
+
className: clsx28__default.default("ds-slider", disabled && "ds-slider--disabled", className),
|
|
1924
2049
|
...props,
|
|
1925
2050
|
children: [
|
|
1926
2051
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-slider__track", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1953,27 +2078,27 @@ var Slider = React38__default.default.forwardRef(
|
|
|
1953
2078
|
}
|
|
1954
2079
|
);
|
|
1955
2080
|
Slider.displayName = "Slider";
|
|
1956
|
-
var CollapsibleContext =
|
|
2081
|
+
var CollapsibleContext = React39__default.default.createContext(null);
|
|
1957
2082
|
function useCollapsibleContext() {
|
|
1958
|
-
const context =
|
|
2083
|
+
const context = React39__default.default.useContext(CollapsibleContext);
|
|
1959
2084
|
if (!context) {
|
|
1960
2085
|
throw new Error("Collapsible compound components must be used within <Collapsible>");
|
|
1961
2086
|
}
|
|
1962
2087
|
return context;
|
|
1963
2088
|
}
|
|
1964
|
-
var Collapsible =
|
|
2089
|
+
var Collapsible = React39__default.default.forwardRef(
|
|
1965
2090
|
({ className, open: controlledOpen, onOpenChange, children, ...props }, ref) => {
|
|
1966
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
2091
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React39__default.default.useState(false);
|
|
1967
2092
|
const isControlled = controlledOpen !== void 0;
|
|
1968
2093
|
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
1969
|
-
const toggle =
|
|
2094
|
+
const toggle = React39__default.default.useCallback(() => {
|
|
1970
2095
|
const next = !open;
|
|
1971
2096
|
if (!isControlled) {
|
|
1972
2097
|
setUncontrolledOpen(next);
|
|
1973
2098
|
}
|
|
1974
2099
|
onOpenChange?.(next);
|
|
1975
2100
|
}, [open, isControlled, onOpenChange]);
|
|
1976
|
-
const contextValue =
|
|
2101
|
+
const contextValue = React39__default.default.useMemo(
|
|
1977
2102
|
() => ({ open, toggle }),
|
|
1978
2103
|
[open, toggle]
|
|
1979
2104
|
);
|
|
@@ -1981,7 +2106,7 @@ var Collapsible = React38__default.default.forwardRef(
|
|
|
1981
2106
|
"div",
|
|
1982
2107
|
{
|
|
1983
2108
|
ref,
|
|
1984
|
-
className:
|
|
2109
|
+
className: clsx28__default.default("ds-collapsible", className),
|
|
1985
2110
|
"data-state": open ? "open" : "closed",
|
|
1986
2111
|
...props,
|
|
1987
2112
|
children
|
|
@@ -1990,7 +2115,7 @@ var Collapsible = React38__default.default.forwardRef(
|
|
|
1990
2115
|
}
|
|
1991
2116
|
);
|
|
1992
2117
|
Collapsible.displayName = "Collapsible";
|
|
1993
|
-
var CollapsibleTrigger =
|
|
2118
|
+
var CollapsibleTrigger = React39__default.default.forwardRef(({ className, onClick, ...props }, ref) => {
|
|
1994
2119
|
const { toggle } = useCollapsibleContext();
|
|
1995
2120
|
const handleClick = (e) => {
|
|
1996
2121
|
toggle();
|
|
@@ -2001,20 +2126,20 @@ var CollapsibleTrigger = React38__default.default.forwardRef(({ className, onCli
|
|
|
2001
2126
|
{
|
|
2002
2127
|
ref,
|
|
2003
2128
|
type: "button",
|
|
2004
|
-
className:
|
|
2129
|
+
className: clsx28__default.default("ds-collapsible__trigger", className),
|
|
2005
2130
|
onClick: handleClick,
|
|
2006
2131
|
...props
|
|
2007
2132
|
}
|
|
2008
2133
|
);
|
|
2009
2134
|
});
|
|
2010
2135
|
CollapsibleTrigger.displayName = "CollapsibleTrigger";
|
|
2011
|
-
var CollapsibleContent =
|
|
2136
|
+
var CollapsibleContent = React39__default.default.forwardRef(({ className, children, ...props }, ref) => {
|
|
2012
2137
|
const { open } = useCollapsibleContext();
|
|
2013
|
-
const contentRef =
|
|
2014
|
-
const [maxHeight, setMaxHeight] =
|
|
2138
|
+
const contentRef = React39__default.default.useRef(null);
|
|
2139
|
+
const [maxHeight, setMaxHeight] = React39__default.default.useState(
|
|
2015
2140
|
open ? void 0 : 0
|
|
2016
2141
|
);
|
|
2017
|
-
|
|
2142
|
+
React39__default.default.useEffect(() => {
|
|
2018
2143
|
const el = contentRef.current;
|
|
2019
2144
|
if (!el) return;
|
|
2020
2145
|
if (open) {
|
|
@@ -2036,7 +2161,7 @@ var CollapsibleContent = React38__default.default.forwardRef(({ className, child
|
|
|
2036
2161
|
"div",
|
|
2037
2162
|
{
|
|
2038
2163
|
ref: contentRef,
|
|
2039
|
-
className:
|
|
2164
|
+
className: clsx28__default.default("ds-collapsible__content", className),
|
|
2040
2165
|
"data-state": open ? "open" : "closed",
|
|
2041
2166
|
style: {
|
|
2042
2167
|
maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : "none"
|
|
@@ -2048,9 +2173,9 @@ var CollapsibleContent = React38__default.default.forwardRef(({ className, child
|
|
|
2048
2173
|
);
|
|
2049
2174
|
});
|
|
2050
2175
|
CollapsibleContent.displayName = "CollapsibleContent";
|
|
2051
|
-
var HoverCardContext =
|
|
2176
|
+
var HoverCardContext = React39__default.default.createContext(null);
|
|
2052
2177
|
function useHoverCardContext() {
|
|
2053
|
-
const context =
|
|
2178
|
+
const context = React39__default.default.useContext(HoverCardContext);
|
|
2054
2179
|
if (!context) {
|
|
2055
2180
|
throw new Error("HoverCard compound components must be used within <HoverCard>");
|
|
2056
2181
|
}
|
|
@@ -2061,31 +2186,31 @@ var HoverCard = ({
|
|
|
2061
2186
|
closeDelay = 100,
|
|
2062
2187
|
children
|
|
2063
2188
|
}) => {
|
|
2064
|
-
const [open, setOpen] =
|
|
2065
|
-
const openTimerRef =
|
|
2066
|
-
const closeTimerRef =
|
|
2067
|
-
const onOpen =
|
|
2189
|
+
const [open, setOpen] = React39__default.default.useState(false);
|
|
2190
|
+
const openTimerRef = React39__default.default.useRef();
|
|
2191
|
+
const closeTimerRef = React39__default.default.useRef();
|
|
2192
|
+
const onOpen = React39__default.default.useCallback(() => {
|
|
2068
2193
|
clearTimeout(closeTimerRef.current);
|
|
2069
2194
|
openTimerRef.current = setTimeout(() => setOpen(true), openDelay);
|
|
2070
2195
|
}, [openDelay]);
|
|
2071
|
-
const onClose =
|
|
2196
|
+
const onClose = React39__default.default.useCallback(() => {
|
|
2072
2197
|
clearTimeout(openTimerRef.current);
|
|
2073
2198
|
closeTimerRef.current = setTimeout(() => setOpen(false), closeDelay);
|
|
2074
2199
|
}, [closeDelay]);
|
|
2075
|
-
|
|
2200
|
+
React39__default.default.useEffect(() => {
|
|
2076
2201
|
return () => {
|
|
2077
2202
|
clearTimeout(openTimerRef.current);
|
|
2078
2203
|
clearTimeout(closeTimerRef.current);
|
|
2079
2204
|
};
|
|
2080
2205
|
}, []);
|
|
2081
|
-
const contextValue =
|
|
2206
|
+
const contextValue = React39__default.default.useMemo(
|
|
2082
2207
|
() => ({ open, onOpen, onClose }),
|
|
2083
2208
|
[open, onOpen, onClose]
|
|
2084
2209
|
);
|
|
2085
2210
|
return /* @__PURE__ */ jsxRuntime.jsx(HoverCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-hover-card", children }) });
|
|
2086
2211
|
};
|
|
2087
2212
|
HoverCard.displayName = "HoverCard";
|
|
2088
|
-
var HoverCardTrigger =
|
|
2213
|
+
var HoverCardTrigger = React39__default.default.forwardRef(({ className, onMouseEnter, onMouseLeave, ...props }, ref) => {
|
|
2089
2214
|
const { onOpen, onClose } = useHoverCardContext();
|
|
2090
2215
|
const handleMouseEnter = (e) => {
|
|
2091
2216
|
onOpen();
|
|
@@ -2099,7 +2224,7 @@ var HoverCardTrigger = React38__default.default.forwardRef(({ className, onMouse
|
|
|
2099
2224
|
"span",
|
|
2100
2225
|
{
|
|
2101
2226
|
ref,
|
|
2102
|
-
className:
|
|
2227
|
+
className: clsx28__default.default("ds-hover-card__trigger", className),
|
|
2103
2228
|
onMouseEnter: handleMouseEnter,
|
|
2104
2229
|
onMouseLeave: handleMouseLeave,
|
|
2105
2230
|
...props
|
|
@@ -2107,7 +2232,7 @@ var HoverCardTrigger = React38__default.default.forwardRef(({ className, onMouse
|
|
|
2107
2232
|
);
|
|
2108
2233
|
});
|
|
2109
2234
|
HoverCardTrigger.displayName = "HoverCardTrigger";
|
|
2110
|
-
var HoverCardContent =
|
|
2235
|
+
var HoverCardContent = React39__default.default.forwardRef(
|
|
2111
2236
|
({ className, side = "bottom", align = "center", onMouseEnter, onMouseLeave, ...props }, ref) => {
|
|
2112
2237
|
const { open, onOpen, onClose } = useHoverCardContext();
|
|
2113
2238
|
const handleMouseEnter = (e) => {
|
|
@@ -2123,7 +2248,7 @@ var HoverCardContent = React38__default.default.forwardRef(
|
|
|
2123
2248
|
"div",
|
|
2124
2249
|
{
|
|
2125
2250
|
ref,
|
|
2126
|
-
className:
|
|
2251
|
+
className: clsx28__default.default(
|
|
2127
2252
|
"ds-hover-card__content",
|
|
2128
2253
|
`ds-hover-card__content--${side}`,
|
|
2129
2254
|
`ds-hover-card__content--align-${align}`,
|
|
@@ -2137,13 +2262,13 @@ var HoverCardContent = React38__default.default.forwardRef(
|
|
|
2137
2262
|
}
|
|
2138
2263
|
);
|
|
2139
2264
|
HoverCardContent.displayName = "HoverCardContent";
|
|
2140
|
-
var AspectRatio =
|
|
2265
|
+
var AspectRatio = React39__default.default.forwardRef(
|
|
2141
2266
|
({ className, ratio = 1, style, children, ...props }, ref) => {
|
|
2142
2267
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2143
2268
|
"div",
|
|
2144
2269
|
{
|
|
2145
2270
|
ref,
|
|
2146
|
-
className:
|
|
2271
|
+
className: clsx28__default.default("ds-aspect-ratio", className),
|
|
2147
2272
|
style: { ...style, paddingBottom: `${1 / ratio * 100}%` },
|
|
2148
2273
|
...props,
|
|
2149
2274
|
children
|
|
@@ -2152,7 +2277,7 @@ var AspectRatio = React38__default.default.forwardRef(
|
|
|
2152
2277
|
}
|
|
2153
2278
|
);
|
|
2154
2279
|
AspectRatio.displayName = "AspectRatio";
|
|
2155
|
-
var Pagination =
|
|
2280
|
+
var Pagination = React39__default.default.forwardRef(
|
|
2156
2281
|
({ className, "aria-label": ariaLabel = "pagination", ...props }, ref) => {
|
|
2157
2282
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2158
2283
|
"nav",
|
|
@@ -2160,43 +2285,43 @@ var Pagination = React38__default.default.forwardRef(
|
|
|
2160
2285
|
ref,
|
|
2161
2286
|
role: "navigation",
|
|
2162
2287
|
"aria-label": ariaLabel,
|
|
2163
|
-
className:
|
|
2288
|
+
className: clsx28__default.default("ds-pagination", className),
|
|
2164
2289
|
...props
|
|
2165
2290
|
}
|
|
2166
2291
|
);
|
|
2167
2292
|
}
|
|
2168
2293
|
);
|
|
2169
2294
|
Pagination.displayName = "Pagination";
|
|
2170
|
-
var PaginationContent =
|
|
2295
|
+
var PaginationContent = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
2171
2296
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2172
2297
|
"ul",
|
|
2173
2298
|
{
|
|
2174
2299
|
ref,
|
|
2175
|
-
className:
|
|
2300
|
+
className: clsx28__default.default("ds-pagination__content", className),
|
|
2176
2301
|
...props
|
|
2177
2302
|
}
|
|
2178
2303
|
);
|
|
2179
2304
|
});
|
|
2180
2305
|
PaginationContent.displayName = "PaginationContent";
|
|
2181
|
-
var PaginationItem =
|
|
2306
|
+
var PaginationItem = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
2182
2307
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2183
2308
|
"li",
|
|
2184
2309
|
{
|
|
2185
2310
|
ref,
|
|
2186
|
-
className:
|
|
2311
|
+
className: clsx28__default.default("ds-pagination__item", className),
|
|
2187
2312
|
...props
|
|
2188
2313
|
}
|
|
2189
2314
|
);
|
|
2190
2315
|
});
|
|
2191
2316
|
PaginationItem.displayName = "PaginationItem";
|
|
2192
|
-
var PaginationLink =
|
|
2317
|
+
var PaginationLink = React39__default.default.forwardRef(({ className, isActive = false, size = "md", asChild = false, ...props }, ref) => {
|
|
2193
2318
|
const Comp = asChild ? reactSlot.Slot : "button";
|
|
2194
2319
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2195
2320
|
Comp,
|
|
2196
2321
|
{
|
|
2197
2322
|
ref,
|
|
2198
2323
|
"aria-current": isActive ? "page" : void 0,
|
|
2199
|
-
className:
|
|
2324
|
+
className: clsx28__default.default(
|
|
2200
2325
|
"ds-pagination__link",
|
|
2201
2326
|
`ds-pagination__link--${size}`,
|
|
2202
2327
|
isActive && "ds-pagination__link--active",
|
|
@@ -2207,13 +2332,13 @@ var PaginationLink = React38__default.default.forwardRef(({ className, isActive
|
|
|
2207
2332
|
);
|
|
2208
2333
|
});
|
|
2209
2334
|
PaginationLink.displayName = "PaginationLink";
|
|
2210
|
-
var PaginationPrevious =
|
|
2335
|
+
var PaginationPrevious = React39__default.default.forwardRef(({ className, label = "Previous", "aria-label": ariaLabel = "Go to previous page", ...props }, ref) => {
|
|
2211
2336
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2212
2337
|
PaginationLink,
|
|
2213
2338
|
{
|
|
2214
2339
|
ref,
|
|
2215
2340
|
"aria-label": ariaLabel,
|
|
2216
|
-
className:
|
|
2341
|
+
className: clsx28__default.default("ds-pagination__prev", className),
|
|
2217
2342
|
...props,
|
|
2218
2343
|
children: [
|
|
2219
2344
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2238,13 +2363,13 @@ var PaginationPrevious = React38__default.default.forwardRef(({ className, label
|
|
|
2238
2363
|
);
|
|
2239
2364
|
});
|
|
2240
2365
|
PaginationPrevious.displayName = "PaginationPrevious";
|
|
2241
|
-
var PaginationNext =
|
|
2366
|
+
var PaginationNext = React39__default.default.forwardRef(({ className, label = "Next", "aria-label": ariaLabel = "Go to next page", ...props }, ref) => {
|
|
2242
2367
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2243
2368
|
PaginationLink,
|
|
2244
2369
|
{
|
|
2245
2370
|
ref,
|
|
2246
2371
|
"aria-label": ariaLabel,
|
|
2247
|
-
className:
|
|
2372
|
+
className: clsx28__default.default("ds-pagination__next", className),
|
|
2248
2373
|
...props,
|
|
2249
2374
|
children: [
|
|
2250
2375
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
|
|
@@ -2269,13 +2394,13 @@ var PaginationNext = React38__default.default.forwardRef(({ className, label = "
|
|
|
2269
2394
|
);
|
|
2270
2395
|
});
|
|
2271
2396
|
PaginationNext.displayName = "PaginationNext";
|
|
2272
|
-
var PaginationEllipsis =
|
|
2397
|
+
var PaginationEllipsis = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
2273
2398
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2274
2399
|
"span",
|
|
2275
2400
|
{
|
|
2276
2401
|
ref,
|
|
2277
2402
|
"aria-hidden": "true",
|
|
2278
|
-
className:
|
|
2403
|
+
className: clsx28__default.default("ds-pagination__ellipsis", className),
|
|
2279
2404
|
...props,
|
|
2280
2405
|
children: "..."
|
|
2281
2406
|
}
|
|
@@ -2291,14 +2416,14 @@ var levelToElement = {
|
|
|
2291
2416
|
h5: "h5",
|
|
2292
2417
|
h6: "h6"
|
|
2293
2418
|
};
|
|
2294
|
-
var Heading =
|
|
2419
|
+
var Heading = React39__default.default.forwardRef(
|
|
2295
2420
|
({ className, level = "h2", as, children, ...props }, ref) => {
|
|
2296
2421
|
const Comp = as ?? levelToElement[level];
|
|
2297
2422
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2298
2423
|
Comp,
|
|
2299
2424
|
{
|
|
2300
2425
|
ref,
|
|
2301
|
-
className:
|
|
2426
|
+
className: clsx28__default.default("ds-heading", `ds-heading--${level}`, className),
|
|
2302
2427
|
...props,
|
|
2303
2428
|
children
|
|
2304
2429
|
}
|
|
@@ -2306,14 +2431,14 @@ var Heading = React38__default.default.forwardRef(
|
|
|
2306
2431
|
}
|
|
2307
2432
|
);
|
|
2308
2433
|
Heading.displayName = "Heading";
|
|
2309
|
-
var Text =
|
|
2434
|
+
var Text = React39__default.default.forwardRef(
|
|
2310
2435
|
({ className, variant = "body", as = "p", children, ...props }, ref) => {
|
|
2311
2436
|
const Comp = as;
|
|
2312
2437
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2313
2438
|
Comp,
|
|
2314
2439
|
{
|
|
2315
2440
|
ref,
|
|
2316
|
-
className:
|
|
2441
|
+
className: clsx28__default.default("ds-text", `ds-text--${variant}`, className),
|
|
2317
2442
|
...props,
|
|
2318
2443
|
children
|
|
2319
2444
|
}
|
|
@@ -2321,13 +2446,13 @@ var Text = React38__default.default.forwardRef(
|
|
|
2321
2446
|
}
|
|
2322
2447
|
);
|
|
2323
2448
|
Text.displayName = "Text";
|
|
2324
|
-
var Prose =
|
|
2449
|
+
var Prose = React39__default.default.forwardRef(
|
|
2325
2450
|
({ className, children, ...props }, ref) => {
|
|
2326
2451
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2327
2452
|
"div",
|
|
2328
2453
|
{
|
|
2329
2454
|
ref,
|
|
2330
|
-
className:
|
|
2455
|
+
className: clsx28__default.default("ds-prose", className),
|
|
2331
2456
|
...props,
|
|
2332
2457
|
children
|
|
2333
2458
|
}
|
|
@@ -2335,24 +2460,24 @@ var Prose = React38__default.default.forwardRef(
|
|
|
2335
2460
|
}
|
|
2336
2461
|
);
|
|
2337
2462
|
Prose.displayName = "Prose";
|
|
2338
|
-
var CarouselContext =
|
|
2463
|
+
var CarouselContext = React39__default.default.createContext(void 0);
|
|
2339
2464
|
function useCarouselContext() {
|
|
2340
|
-
const ctx =
|
|
2465
|
+
const ctx = React39__default.default.useContext(CarouselContext);
|
|
2341
2466
|
if (!ctx) {
|
|
2342
2467
|
throw new Error("Carousel compound components must be used within a <Carousel> parent.");
|
|
2343
2468
|
}
|
|
2344
2469
|
return ctx;
|
|
2345
2470
|
}
|
|
2346
|
-
var Carousel =
|
|
2471
|
+
var Carousel = React39__default.default.forwardRef(
|
|
2347
2472
|
({ className, children, ...props }, ref) => {
|
|
2348
|
-
const scrollRef =
|
|
2349
|
-
return /* @__PURE__ */ jsxRuntime.jsx(CarouselContext.Provider, { value: { scrollRef }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
2473
|
+
const scrollRef = React39__default.default.useRef(null);
|
|
2474
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CarouselContext.Provider, { value: { scrollRef }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-carousel", className), ...props, children }) });
|
|
2350
2475
|
}
|
|
2351
2476
|
);
|
|
2352
2477
|
Carousel.displayName = "Carousel";
|
|
2353
|
-
var CarouselContent =
|
|
2478
|
+
var CarouselContent = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
2354
2479
|
const { scrollRef } = useCarouselContext();
|
|
2355
|
-
const mergedRef =
|
|
2480
|
+
const mergedRef = React39__default.default.useCallback(
|
|
2356
2481
|
(node) => {
|
|
2357
2482
|
scrollRef.current = node;
|
|
2358
2483
|
if (typeof ref === "function") {
|
|
@@ -2363,14 +2488,14 @@ var CarouselContent = React38__default.default.forwardRef(({ className, ...props
|
|
|
2363
2488
|
},
|
|
2364
2489
|
[ref, scrollRef]
|
|
2365
2490
|
);
|
|
2366
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergedRef, className:
|
|
2491
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergedRef, className: clsx28__default.default("ds-carousel__content", className), ...props });
|
|
2367
2492
|
});
|
|
2368
2493
|
CarouselContent.displayName = "CarouselContent";
|
|
2369
|
-
var CarouselItem =
|
|
2370
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
2494
|
+
var CarouselItem = React39__default.default.forwardRef(
|
|
2495
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-carousel__item", className), ...props })
|
|
2371
2496
|
);
|
|
2372
2497
|
CarouselItem.displayName = "CarouselItem";
|
|
2373
|
-
var CarouselPrevious =
|
|
2498
|
+
var CarouselPrevious = React39__default.default.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Previous slide", ...props }, ref) => {
|
|
2374
2499
|
const { scrollRef } = useCarouselContext();
|
|
2375
2500
|
const handleClick = (e) => {
|
|
2376
2501
|
const container = scrollRef.current;
|
|
@@ -2386,7 +2511,7 @@ var CarouselPrevious = React38__default.default.forwardRef(({ className, onClick
|
|
|
2386
2511
|
{
|
|
2387
2512
|
ref,
|
|
2388
2513
|
type: "button",
|
|
2389
|
-
className:
|
|
2514
|
+
className: clsx28__default.default("ds-carousel__prev", className),
|
|
2390
2515
|
"aria-label": ariaLabel,
|
|
2391
2516
|
onClick: handleClick,
|
|
2392
2517
|
...props,
|
|
@@ -2404,7 +2529,7 @@ var CarouselPrevious = React38__default.default.forwardRef(({ className, onClick
|
|
|
2404
2529
|
);
|
|
2405
2530
|
});
|
|
2406
2531
|
CarouselPrevious.displayName = "CarouselPrevious";
|
|
2407
|
-
var CarouselNext =
|
|
2532
|
+
var CarouselNext = React39__default.default.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Next slide", ...props }, ref) => {
|
|
2408
2533
|
const { scrollRef } = useCarouselContext();
|
|
2409
2534
|
const handleClick = (e) => {
|
|
2410
2535
|
const container = scrollRef.current;
|
|
@@ -2420,7 +2545,7 @@ var CarouselNext = React38__default.default.forwardRef(({ className, onClick, ch
|
|
|
2420
2545
|
{
|
|
2421
2546
|
ref,
|
|
2422
2547
|
type: "button",
|
|
2423
|
-
className:
|
|
2548
|
+
className: clsx28__default.default("ds-carousel__next", className),
|
|
2424
2549
|
"aria-label": ariaLabel,
|
|
2425
2550
|
onClick: handleClick,
|
|
2426
2551
|
...props,
|
|
@@ -2446,9 +2571,9 @@ function mergeRefs(...refs) {
|
|
|
2446
2571
|
});
|
|
2447
2572
|
};
|
|
2448
2573
|
}
|
|
2449
|
-
var CommandContext =
|
|
2574
|
+
var CommandContext = React39__default.default.createContext(void 0);
|
|
2450
2575
|
function useCommandContext() {
|
|
2451
|
-
const ctx =
|
|
2576
|
+
const ctx = React39__default.default.useContext(CommandContext);
|
|
2452
2577
|
if (!ctx) {
|
|
2453
2578
|
throw new Error("Command compound components must be used within a <Command> parent.");
|
|
2454
2579
|
}
|
|
@@ -2458,16 +2583,16 @@ function getOptionElements(listEl) {
|
|
|
2458
2583
|
if (!listEl) return [];
|
|
2459
2584
|
return Array.from(listEl.querySelectorAll('[role="option"]'));
|
|
2460
2585
|
}
|
|
2461
|
-
var Command =
|
|
2586
|
+
var Command = React39__default.default.forwardRef(
|
|
2462
2587
|
({ className, value: controlledValue, onValueChange, onKeyDown, children, ...props }, ref) => {
|
|
2463
|
-
const [uncontrolledValue, setUncontrolledValue] =
|
|
2464
|
-
const [activeId, setActiveId] =
|
|
2465
|
-
const listRef =
|
|
2588
|
+
const [uncontrolledValue, setUncontrolledValue] = React39__default.default.useState("");
|
|
2589
|
+
const [activeId, setActiveId] = React39__default.default.useState(null);
|
|
2590
|
+
const listRef = React39__default.default.useRef(null);
|
|
2466
2591
|
const isControlled = controlledValue !== void 0;
|
|
2467
2592
|
const search = isControlled ? controlledValue : uncontrolledValue;
|
|
2468
|
-
const inputId =
|
|
2469
|
-
const listId =
|
|
2470
|
-
const setSearch =
|
|
2593
|
+
const inputId = React39__default.default.useId();
|
|
2594
|
+
const listId = React39__default.default.useId();
|
|
2595
|
+
const setSearch = React39__default.default.useCallback(
|
|
2471
2596
|
(next) => {
|
|
2472
2597
|
if (!isControlled) {
|
|
2473
2598
|
setUncontrolledValue(next);
|
|
@@ -2476,7 +2601,7 @@ var Command = React38__default.default.forwardRef(
|
|
|
2476
2601
|
},
|
|
2477
2602
|
[isControlled, onValueChange]
|
|
2478
2603
|
);
|
|
2479
|
-
|
|
2604
|
+
React39__default.default.useEffect(() => {
|
|
2480
2605
|
const frame = requestAnimationFrame(() => {
|
|
2481
2606
|
const items = getOptionElements(listRef.current);
|
|
2482
2607
|
if (items.length > 0) {
|
|
@@ -2487,7 +2612,7 @@ var Command = React38__default.default.forwardRef(
|
|
|
2487
2612
|
});
|
|
2488
2613
|
return () => cancelAnimationFrame(frame);
|
|
2489
2614
|
}, [search]);
|
|
2490
|
-
const handleKeyDown =
|
|
2615
|
+
const handleKeyDown = React39__default.default.useCallback(
|
|
2491
2616
|
(e) => {
|
|
2492
2617
|
const items = getOptionElements(listRef.current);
|
|
2493
2618
|
if (items.length === 0) {
|
|
@@ -2538,7 +2663,7 @@ var Command = React38__default.default.forwardRef(
|
|
|
2538
2663
|
},
|
|
2539
2664
|
[activeId, onKeyDown]
|
|
2540
2665
|
);
|
|
2541
|
-
const ctx =
|
|
2666
|
+
const ctx = React39__default.default.useMemo(
|
|
2542
2667
|
() => ({ search, setSearch, activeId, setActiveId, listRef, inputId, listId }),
|
|
2543
2668
|
[search, setSearch, activeId, inputId, listId]
|
|
2544
2669
|
);
|
|
@@ -2546,7 +2671,7 @@ var Command = React38__default.default.forwardRef(
|
|
|
2546
2671
|
"div",
|
|
2547
2672
|
{
|
|
2548
2673
|
ref,
|
|
2549
|
-
className:
|
|
2674
|
+
className: clsx28__default.default("ds-command", className),
|
|
2550
2675
|
onKeyDown: handleKeyDown,
|
|
2551
2676
|
...props,
|
|
2552
2677
|
children
|
|
@@ -2555,7 +2680,7 @@ var Command = React38__default.default.forwardRef(
|
|
|
2555
2680
|
}
|
|
2556
2681
|
);
|
|
2557
2682
|
Command.displayName = "Command";
|
|
2558
|
-
var CommandInput =
|
|
2683
|
+
var CommandInput = React39__default.default.forwardRef(({ className, onChange, ...props }, ref) => {
|
|
2559
2684
|
const { search, setSearch, activeId, inputId, listId } = useCommandContext();
|
|
2560
2685
|
const handleChange = (e) => {
|
|
2561
2686
|
setSearch(e.target.value);
|
|
@@ -2597,7 +2722,7 @@ var CommandInput = React38__default.default.forwardRef(({ className, onChange, .
|
|
|
2597
2722
|
"aria-activedescendant": activeId ?? void 0,
|
|
2598
2723
|
"aria-autocomplete": "list",
|
|
2599
2724
|
autoComplete: "off",
|
|
2600
|
-
className:
|
|
2725
|
+
className: clsx28__default.default("ds-command__input", className),
|
|
2601
2726
|
value: search,
|
|
2602
2727
|
onChange: handleChange,
|
|
2603
2728
|
...props
|
|
@@ -2606,7 +2731,7 @@ var CommandInput = React38__default.default.forwardRef(({ className, onChange, .
|
|
|
2606
2731
|
] });
|
|
2607
2732
|
});
|
|
2608
2733
|
CommandInput.displayName = "CommandInput";
|
|
2609
|
-
var CommandList =
|
|
2734
|
+
var CommandList = React39__default.default.forwardRef(
|
|
2610
2735
|
({ className, ...props }, ref) => {
|
|
2611
2736
|
const { listRef, listId } = useCommandContext();
|
|
2612
2737
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2615,27 +2740,27 @@ var CommandList = React38__default.default.forwardRef(
|
|
|
2615
2740
|
ref: mergeRefs(ref, listRef),
|
|
2616
2741
|
id: listId,
|
|
2617
2742
|
role: "listbox",
|
|
2618
|
-
className:
|
|
2743
|
+
className: clsx28__default.default("ds-command__list", className),
|
|
2619
2744
|
...props
|
|
2620
2745
|
}
|
|
2621
2746
|
);
|
|
2622
2747
|
}
|
|
2623
2748
|
);
|
|
2624
2749
|
CommandList.displayName = "CommandList";
|
|
2625
|
-
var CommandEmpty =
|
|
2626
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
2750
|
+
var CommandEmpty = React39__default.default.forwardRef(
|
|
2751
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-command__empty", className), ...props })
|
|
2627
2752
|
);
|
|
2628
2753
|
CommandEmpty.displayName = "CommandEmpty";
|
|
2629
|
-
var CommandGroup =
|
|
2630
|
-
({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className:
|
|
2754
|
+
var CommandGroup = React39__default.default.forwardRef(
|
|
2755
|
+
({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx28__default.default("ds-command__group", className), ...props, children: [
|
|
2631
2756
|
heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-command__group-heading", children: heading }),
|
|
2632
2757
|
children
|
|
2633
2758
|
] })
|
|
2634
2759
|
);
|
|
2635
2760
|
CommandGroup.displayName = "CommandGroup";
|
|
2636
|
-
var CommandItem =
|
|
2761
|
+
var CommandItem = React39__default.default.forwardRef(
|
|
2637
2762
|
({ className, onSelect, onClick, onKeyDown, onPointerEnter, id: externalId, ...props }, ref) => {
|
|
2638
|
-
const generatedId =
|
|
2763
|
+
const generatedId = React39__default.default.useId();
|
|
2639
2764
|
const { activeId, setActiveId } = useCommandContext();
|
|
2640
2765
|
const itemId = externalId || generatedId;
|
|
2641
2766
|
const isActive = activeId === itemId;
|
|
@@ -2662,7 +2787,7 @@ var CommandItem = React38__default.default.forwardRef(
|
|
|
2662
2787
|
tabIndex: 0,
|
|
2663
2788
|
"aria-selected": isActive,
|
|
2664
2789
|
"data-active": isActive || void 0,
|
|
2665
|
-
className:
|
|
2790
|
+
className: clsx28__default.default("ds-command__item", className),
|
|
2666
2791
|
onClick: handleClick,
|
|
2667
2792
|
onKeyDown: handleKeyDown,
|
|
2668
2793
|
onPointerEnter: handlePointerEnter,
|
|
@@ -2672,7 +2797,7 @@ var CommandItem = React38__default.default.forwardRef(
|
|
|
2672
2797
|
}
|
|
2673
2798
|
);
|
|
2674
2799
|
CommandItem.displayName = "CommandItem";
|
|
2675
|
-
var CommandSeparator =
|
|
2800
|
+
var CommandSeparator = React39__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-command__separator", className), ...props }));
|
|
2676
2801
|
CommandSeparator.displayName = "CommandSeparator";
|
|
2677
2802
|
var SIZE_CLASSES = {
|
|
2678
2803
|
sm: "ds-dialog__content--sm",
|
|
@@ -2689,7 +2814,7 @@ var CommandDialog = ({
|
|
|
2689
2814
|
}) => /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2690
2815
|
DialogContent,
|
|
2691
2816
|
{
|
|
2692
|
-
className:
|
|
2817
|
+
className: clsx28__default.default("ds-command-dialog", SIZE_CLASSES[size], className),
|
|
2693
2818
|
children: [
|
|
2694
2819
|
/* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "ds-command-dialog__sr-title", children: title }),
|
|
2695
2820
|
children
|
|
@@ -2697,19 +2822,19 @@ var CommandDialog = ({
|
|
|
2697
2822
|
}
|
|
2698
2823
|
) });
|
|
2699
2824
|
CommandDialog.displayName = "CommandDialog";
|
|
2700
|
-
var DrawerContext =
|
|
2825
|
+
var DrawerContext = React39__default.default.createContext(void 0);
|
|
2701
2826
|
function useDrawerContext() {
|
|
2702
|
-
const ctx =
|
|
2827
|
+
const ctx = React39__default.default.useContext(DrawerContext);
|
|
2703
2828
|
if (!ctx) {
|
|
2704
2829
|
throw new Error("Drawer compound components must be used within a <Drawer> parent.");
|
|
2705
2830
|
}
|
|
2706
2831
|
return ctx;
|
|
2707
2832
|
}
|
|
2708
2833
|
var Drawer = ({ open: controlledOpen, onOpenChange, children }) => {
|
|
2709
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
2834
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React39__default.default.useState(false);
|
|
2710
2835
|
const isControlled = controlledOpen !== void 0;
|
|
2711
2836
|
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
2712
|
-
const handleOpenChange =
|
|
2837
|
+
const handleOpenChange = React39__default.default.useCallback(
|
|
2713
2838
|
(next) => {
|
|
2714
2839
|
if (!isControlled) {
|
|
2715
2840
|
setUncontrolledOpen(next);
|
|
@@ -2721,7 +2846,7 @@ var Drawer = ({ open: controlledOpen, onOpenChange, children }) => {
|
|
|
2721
2846
|
return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: { open, onOpenChange: handleOpenChange }, children });
|
|
2722
2847
|
};
|
|
2723
2848
|
Drawer.displayName = "Drawer";
|
|
2724
|
-
var DrawerTrigger =
|
|
2849
|
+
var DrawerTrigger = React39__default.default.forwardRef(({ onClick, ...props }, ref) => {
|
|
2725
2850
|
const { onOpenChange } = useDrawerContext();
|
|
2726
2851
|
const handleClick = (e) => {
|
|
2727
2852
|
onOpenChange(true);
|
|
@@ -2730,7 +2855,7 @@ var DrawerTrigger = React38__default.default.forwardRef(({ onClick, ...props },
|
|
|
2730
2855
|
return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, type: "button", onClick: handleClick, ...props });
|
|
2731
2856
|
});
|
|
2732
2857
|
DrawerTrigger.displayName = "DrawerTrigger";
|
|
2733
|
-
var DrawerClose =
|
|
2858
|
+
var DrawerClose = React39__default.default.forwardRef(({ onClick, ...props }, ref) => {
|
|
2734
2859
|
const { onOpenChange } = useDrawerContext();
|
|
2735
2860
|
const handleClick = (e) => {
|
|
2736
2861
|
onOpenChange(false);
|
|
@@ -2739,7 +2864,7 @@ var DrawerClose = React38__default.default.forwardRef(({ onClick, ...props }, re
|
|
|
2739
2864
|
return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, type: "button", onClick: handleClick, ...props });
|
|
2740
2865
|
});
|
|
2741
2866
|
DrawerClose.displayName = "DrawerClose";
|
|
2742
|
-
var DrawerContent =
|
|
2867
|
+
var DrawerContent = React39__default.default.forwardRef(
|
|
2743
2868
|
({ className, children, ...props }, ref) => {
|
|
2744
2869
|
const { open, onOpenChange } = useDrawerContext();
|
|
2745
2870
|
if (!open) return null;
|
|
@@ -2758,7 +2883,7 @@ var DrawerContent = React38__default.default.forwardRef(
|
|
|
2758
2883
|
{
|
|
2759
2884
|
ref,
|
|
2760
2885
|
role: "dialog",
|
|
2761
|
-
className:
|
|
2886
|
+
className: clsx28__default.default("ds-drawer__content", className),
|
|
2762
2887
|
...props,
|
|
2763
2888
|
children: [
|
|
2764
2889
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-drawer__handle", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-drawer__handle-bar" }) }),
|
|
@@ -2772,16 +2897,16 @@ var DrawerContent = React38__default.default.forwardRef(
|
|
|
2772
2897
|
}
|
|
2773
2898
|
);
|
|
2774
2899
|
DrawerContent.displayName = "DrawerContent";
|
|
2775
|
-
var DrawerHeader =
|
|
2776
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
2900
|
+
var DrawerHeader = React39__default.default.forwardRef(
|
|
2901
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-drawer__header", className), ...props })
|
|
2777
2902
|
);
|
|
2778
2903
|
DrawerHeader.displayName = "DrawerHeader";
|
|
2779
|
-
var DrawerTitle =
|
|
2904
|
+
var DrawerTitle = React39__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: clsx28__default.default("ds-drawer__title", className), ...props }));
|
|
2780
2905
|
DrawerTitle.displayName = "DrawerTitle";
|
|
2781
|
-
var DrawerDescription =
|
|
2906
|
+
var DrawerDescription = React39__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx28__default.default("ds-drawer__description", className), ...props }));
|
|
2782
2907
|
DrawerDescription.displayName = "DrawerDescription";
|
|
2783
|
-
var DrawerFooter =
|
|
2784
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
2908
|
+
var DrawerFooter = React39__default.default.forwardRef(
|
|
2909
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-drawer__footer", className), ...props })
|
|
2785
2910
|
);
|
|
2786
2911
|
DrawerFooter.displayName = "DrawerFooter";
|
|
2787
2912
|
var DEFAULT_WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
@@ -2828,13 +2953,13 @@ function getCalendarGrid(year, month) {
|
|
|
2828
2953
|
}
|
|
2829
2954
|
return weeks;
|
|
2830
2955
|
}
|
|
2831
|
-
var Calendar =
|
|
2956
|
+
var Calendar = React39__default.default.forwardRef(
|
|
2832
2957
|
({ className, selected, onSelect, month, onMonthChange, labels, ...props }, ref) => {
|
|
2833
2958
|
const weekdayLabels = labels?.weekdays ?? DEFAULT_WEEKDAY_LABELS;
|
|
2834
2959
|
const monthNames = labels?.months ?? DEFAULT_MONTH_NAMES;
|
|
2835
2960
|
const formatDayLabel = labels?.formatDayLabel ?? ((d) => d.toDateString());
|
|
2836
2961
|
const today = /* @__PURE__ */ new Date();
|
|
2837
|
-
const [internalMonth, setInternalMonth] =
|
|
2962
|
+
const [internalMonth, setInternalMonth] = React39__default.default.useState(
|
|
2838
2963
|
() => month ?? selected ?? /* @__PURE__ */ new Date()
|
|
2839
2964
|
);
|
|
2840
2965
|
const displayedMonth = month ?? internalMonth;
|
|
@@ -2852,7 +2977,7 @@ var Calendar = React38__default.default.forwardRef(
|
|
|
2852
2977
|
const handleDayClick = (date) => {
|
|
2853
2978
|
onSelect?.(date);
|
|
2854
2979
|
};
|
|
2855
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className:
|
|
2980
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx28__default.default("ds-calendar", className), ...props, children: [
|
|
2856
2981
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-calendar__header", children: [
|
|
2857
2982
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2858
2983
|
"button",
|
|
@@ -2916,7 +3041,7 @@ var Calendar = React38__default.default.forwardRef(
|
|
|
2916
3041
|
"button",
|
|
2917
3042
|
{
|
|
2918
3043
|
type: "button",
|
|
2919
|
-
className:
|
|
3044
|
+
className: clsx28__default.default(
|
|
2920
3045
|
"ds-calendar__day",
|
|
2921
3046
|
isSelected && "ds-calendar__day--selected",
|
|
2922
3047
|
isToday && "ds-calendar__day--today",
|
|
@@ -2934,14 +3059,14 @@ var Calendar = React38__default.default.forwardRef(
|
|
|
2934
3059
|
}
|
|
2935
3060
|
);
|
|
2936
3061
|
Calendar.displayName = "Calendar";
|
|
2937
|
-
var InputOTPContext =
|
|
3062
|
+
var InputOTPContext = React39__default.default.createContext({
|
|
2938
3063
|
value: "",
|
|
2939
3064
|
activeIndex: -1
|
|
2940
3065
|
});
|
|
2941
|
-
var InputOTP =
|
|
3066
|
+
var InputOTP = React39__default.default.forwardRef(
|
|
2942
3067
|
({ className, length = 6, value = "", onChange, children, "aria-label": ariaLabel = "One-time password", ...props }, ref) => {
|
|
2943
|
-
const inputRef =
|
|
2944
|
-
const [activeIndex, setActiveIndex] =
|
|
3068
|
+
const inputRef = React39__default.default.useRef(null);
|
|
3069
|
+
const [activeIndex, setActiveIndex] = React39__default.default.useState(-1);
|
|
2945
3070
|
const handleChange = (e) => {
|
|
2946
3071
|
const newValue = e.target.value.replace(/[^0-9]/g, "").slice(0, length);
|
|
2947
3072
|
onChange?.(newValue);
|
|
@@ -2960,7 +3085,7 @@ var InputOTP = React38__default.default.forwardRef(
|
|
|
2960
3085
|
const handleContainerClick = () => {
|
|
2961
3086
|
inputRef.current?.focus();
|
|
2962
3087
|
};
|
|
2963
|
-
const contextValue =
|
|
3088
|
+
const contextValue = React39__default.default.useMemo(
|
|
2964
3089
|
() => ({ value, activeIndex }),
|
|
2965
3090
|
[value, activeIndex]
|
|
2966
3091
|
);
|
|
@@ -2968,7 +3093,7 @@ var InputOTP = React38__default.default.forwardRef(
|
|
|
2968
3093
|
"div",
|
|
2969
3094
|
{
|
|
2970
3095
|
ref,
|
|
2971
|
-
className:
|
|
3096
|
+
className: clsx28__default.default("ds-input-otp", className),
|
|
2972
3097
|
onClick: handleContainerClick,
|
|
2973
3098
|
...props,
|
|
2974
3099
|
children: [
|
|
@@ -2997,13 +3122,13 @@ var InputOTP = React38__default.default.forwardRef(
|
|
|
2997
3122
|
}
|
|
2998
3123
|
);
|
|
2999
3124
|
InputOTP.displayName = "InputOTP";
|
|
3000
|
-
var InputOTPGroup =
|
|
3001
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
3125
|
+
var InputOTPGroup = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
3126
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-input-otp__group", className), ...props });
|
|
3002
3127
|
});
|
|
3003
3128
|
InputOTPGroup.displayName = "InputOTPGroup";
|
|
3004
|
-
var InputOTPSlot =
|
|
3129
|
+
var InputOTPSlot = React39__default.default.forwardRef(
|
|
3005
3130
|
({ className, index, ...props }, ref) => {
|
|
3006
|
-
const { value, activeIndex } =
|
|
3131
|
+
const { value, activeIndex } = React39__default.default.useContext(InputOTPContext);
|
|
3007
3132
|
const char = value[index] ?? "";
|
|
3008
3133
|
const isActive = activeIndex === index;
|
|
3009
3134
|
const isFilled = char !== "";
|
|
@@ -3011,7 +3136,7 @@ var InputOTPSlot = React38__default.default.forwardRef(
|
|
|
3011
3136
|
"div",
|
|
3012
3137
|
{
|
|
3013
3138
|
ref,
|
|
3014
|
-
className:
|
|
3139
|
+
className: clsx28__default.default(
|
|
3015
3140
|
"ds-input-otp__slot",
|
|
3016
3141
|
isActive && "ds-input-otp__slot--active",
|
|
3017
3142
|
isFilled && "ds-input-otp__slot--filled",
|
|
@@ -3024,8 +3149,8 @@ var InputOTPSlot = React38__default.default.forwardRef(
|
|
|
3024
3149
|
}
|
|
3025
3150
|
);
|
|
3026
3151
|
InputOTPSlot.displayName = "InputOTPSlot";
|
|
3027
|
-
var InputOTPSeparator =
|
|
3028
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
3152
|
+
var InputOTPSeparator = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
3153
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-input-otp__separator", className), role: "separator", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3029
3154
|
"svg",
|
|
3030
3155
|
{
|
|
3031
3156
|
width: "8",
|
|
@@ -3037,33 +3162,33 @@ var InputOTPSeparator = React38__default.default.forwardRef(({ className, ...pro
|
|
|
3037
3162
|
) });
|
|
3038
3163
|
});
|
|
3039
3164
|
InputOTPSeparator.displayName = "InputOTPSeparator";
|
|
3040
|
-
var ContextMenuContext =
|
|
3165
|
+
var ContextMenuContext = React39__default.default.createContext({
|
|
3041
3166
|
open: false,
|
|
3042
3167
|
position: { x: 0, y: 0 },
|
|
3043
3168
|
onClose: () => {
|
|
3044
3169
|
}
|
|
3045
3170
|
});
|
|
3046
3171
|
function ContextMenu({ children }) {
|
|
3047
|
-
const [open, setOpen] =
|
|
3048
|
-
const [position, setPosition] =
|
|
3049
|
-
const handleOpen =
|
|
3172
|
+
const [open, setOpen] = React39__default.default.useState(false);
|
|
3173
|
+
const [position, setPosition] = React39__default.default.useState({ x: 0, y: 0 });
|
|
3174
|
+
const handleOpen = React39__default.default.useCallback((x, y) => {
|
|
3050
3175
|
setPosition({ x, y });
|
|
3051
3176
|
setOpen(true);
|
|
3052
3177
|
}, []);
|
|
3053
|
-
const handleClose =
|
|
3178
|
+
const handleClose = React39__default.default.useCallback(() => {
|
|
3054
3179
|
setOpen(false);
|
|
3055
3180
|
}, []);
|
|
3056
|
-
const contextValue =
|
|
3181
|
+
const contextValue = React39__default.default.useMemo(
|
|
3057
3182
|
() => ({ open, position, onClose: handleClose }),
|
|
3058
3183
|
[open, position, handleClose]
|
|
3059
3184
|
);
|
|
3060
3185
|
return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuInternalContext.Provider, { value: { onOpen: handleOpen }, children: /* @__PURE__ */ jsxRuntime.jsx(ContextMenuContext.Provider, { value: contextValue, children }) });
|
|
3061
3186
|
}
|
|
3062
3187
|
ContextMenu.displayName = "ContextMenu";
|
|
3063
|
-
var ContextMenuInternalContext =
|
|
3188
|
+
var ContextMenuInternalContext = React39__default.default.createContext({ onOpen: () => {
|
|
3064
3189
|
} });
|
|
3065
|
-
var ContextMenuTrigger =
|
|
3066
|
-
const { onOpen } =
|
|
3190
|
+
var ContextMenuTrigger = React39__default.default.forwardRef(({ className, onContextMenu, ...props }, ref) => {
|
|
3191
|
+
const { onOpen } = React39__default.default.useContext(ContextMenuInternalContext);
|
|
3067
3192
|
const handleContextMenu = (e) => {
|
|
3068
3193
|
e.preventDefault();
|
|
3069
3194
|
onOpen(e.clientX, e.clientY);
|
|
@@ -3073,17 +3198,17 @@ var ContextMenuTrigger = React38__default.default.forwardRef(({ className, onCon
|
|
|
3073
3198
|
"div",
|
|
3074
3199
|
{
|
|
3075
3200
|
ref,
|
|
3076
|
-
className:
|
|
3201
|
+
className: clsx28__default.default("ds-context-menu__trigger", className),
|
|
3077
3202
|
onContextMenu: handleContextMenu,
|
|
3078
3203
|
...props
|
|
3079
3204
|
}
|
|
3080
3205
|
);
|
|
3081
3206
|
});
|
|
3082
3207
|
ContextMenuTrigger.displayName = "ContextMenuTrigger";
|
|
3083
|
-
var ContextMenuContent =
|
|
3084
|
-
const { open, position, onClose } =
|
|
3085
|
-
const contentRef =
|
|
3086
|
-
const mergedRef =
|
|
3208
|
+
var ContextMenuContent = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
3209
|
+
const { open, position, onClose } = React39__default.default.useContext(ContextMenuContext);
|
|
3210
|
+
const contentRef = React39__default.default.useRef(null);
|
|
3211
|
+
const mergedRef = React39__default.default.useCallback(
|
|
3087
3212
|
(node) => {
|
|
3088
3213
|
contentRef.current = node;
|
|
3089
3214
|
if (typeof ref === "function") ref(node);
|
|
@@ -3091,7 +3216,7 @@ var ContextMenuContent = React38__default.default.forwardRef(({ className, ...pr
|
|
|
3091
3216
|
},
|
|
3092
3217
|
[ref]
|
|
3093
3218
|
);
|
|
3094
|
-
|
|
3219
|
+
React39__default.default.useEffect(() => {
|
|
3095
3220
|
if (!open) return;
|
|
3096
3221
|
const handleClickOutside = (e) => {
|
|
3097
3222
|
if (contentRef.current && !contentRef.current.contains(e.target)) {
|
|
@@ -3120,7 +3245,7 @@ var ContextMenuContent = React38__default.default.forwardRef(({ className, ...pr
|
|
|
3120
3245
|
{
|
|
3121
3246
|
ref: mergedRef,
|
|
3122
3247
|
role: "menu",
|
|
3123
|
-
className:
|
|
3248
|
+
className: clsx28__default.default("ds-context-menu__content", className),
|
|
3124
3249
|
style: { top: position.y, left: position.x },
|
|
3125
3250
|
...props
|
|
3126
3251
|
}
|
|
@@ -3129,9 +3254,9 @@ var ContextMenuContent = React38__default.default.forwardRef(({ className, ...pr
|
|
|
3129
3254
|
);
|
|
3130
3255
|
});
|
|
3131
3256
|
ContextMenuContent.displayName = "ContextMenuContent";
|
|
3132
|
-
var ContextMenuItem =
|
|
3257
|
+
var ContextMenuItem = React39__default.default.forwardRef(
|
|
3133
3258
|
({ className, onSelect, onClick, ...props }, ref) => {
|
|
3134
|
-
const { onClose } =
|
|
3259
|
+
const { onClose } = React39__default.default.useContext(ContextMenuContext);
|
|
3135
3260
|
const handleClick = (e) => {
|
|
3136
3261
|
onSelect?.();
|
|
3137
3262
|
onClose();
|
|
@@ -3142,7 +3267,7 @@ var ContextMenuItem = React38__default.default.forwardRef(
|
|
|
3142
3267
|
{
|
|
3143
3268
|
ref,
|
|
3144
3269
|
role: "menuitem",
|
|
3145
|
-
className:
|
|
3270
|
+
className: clsx28__default.default("ds-context-menu__item", className),
|
|
3146
3271
|
onClick: handleClick,
|
|
3147
3272
|
...props
|
|
3148
3273
|
}
|
|
@@ -3150,45 +3275,45 @@ var ContextMenuItem = React38__default.default.forwardRef(
|
|
|
3150
3275
|
}
|
|
3151
3276
|
);
|
|
3152
3277
|
ContextMenuItem.displayName = "ContextMenuItem";
|
|
3153
|
-
var ContextMenuSeparator =
|
|
3278
|
+
var ContextMenuSeparator = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
3154
3279
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3155
3280
|
"div",
|
|
3156
3281
|
{
|
|
3157
3282
|
ref,
|
|
3158
3283
|
role: "separator",
|
|
3159
|
-
className:
|
|
3284
|
+
className: clsx28__default.default("ds-context-menu__separator", className),
|
|
3160
3285
|
...props
|
|
3161
3286
|
}
|
|
3162
3287
|
);
|
|
3163
3288
|
});
|
|
3164
3289
|
ContextMenuSeparator.displayName = "ContextMenuSeparator";
|
|
3165
|
-
var ContextMenuLabel =
|
|
3290
|
+
var ContextMenuLabel = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
3166
3291
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3167
3292
|
"div",
|
|
3168
3293
|
{
|
|
3169
3294
|
ref,
|
|
3170
|
-
className:
|
|
3295
|
+
className: clsx28__default.default("ds-context-menu__label", className),
|
|
3171
3296
|
...props
|
|
3172
3297
|
}
|
|
3173
3298
|
);
|
|
3174
3299
|
});
|
|
3175
3300
|
ContextMenuLabel.displayName = "ContextMenuLabel";
|
|
3176
|
-
var FormFieldContext =
|
|
3301
|
+
var FormFieldContext = React39__default.default.createContext(void 0);
|
|
3177
3302
|
function useFormField() {
|
|
3178
|
-
const ctx =
|
|
3303
|
+
const ctx = React39__default.default.useContext(FormFieldContext);
|
|
3179
3304
|
if (!ctx) {
|
|
3180
3305
|
throw new Error("useFormField must be used within a <FormField>");
|
|
3181
3306
|
}
|
|
3182
3307
|
return ctx;
|
|
3183
3308
|
}
|
|
3184
|
-
var FormItemContext =
|
|
3309
|
+
var FormItemContext = React39__default.default.createContext(void 0);
|
|
3185
3310
|
function FormField({ name, children, value, onChange, onBlur, error }) {
|
|
3186
|
-
const id =
|
|
3187
|
-
const contextValue =
|
|
3311
|
+
const id = React39__default.default.useId();
|
|
3312
|
+
const contextValue = React39__default.default.useMemo(
|
|
3188
3313
|
() => ({ id: `${id}-form-item`, name, error }),
|
|
3189
3314
|
[id, name, error]
|
|
3190
3315
|
);
|
|
3191
|
-
const fieldProps =
|
|
3316
|
+
const fieldProps = React39__default.default.useMemo(
|
|
3192
3317
|
() => ({
|
|
3193
3318
|
value: value ?? "",
|
|
3194
3319
|
onChange: onChange ?? (() => {
|
|
@@ -3203,35 +3328,35 @@ function FormField({ name, children, value, onChange, onBlur, error }) {
|
|
|
3203
3328
|
return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: contextValue, children: children(fieldProps) });
|
|
3204
3329
|
}
|
|
3205
3330
|
FormField.displayName = "FormField";
|
|
3206
|
-
var FormItem =
|
|
3331
|
+
var FormItem = React39__default.default.forwardRef(
|
|
3207
3332
|
({ className, ...props }, ref) => {
|
|
3208
|
-
const id =
|
|
3209
|
-
const contextValue =
|
|
3210
|
-
return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
3333
|
+
const id = React39__default.default.useId();
|
|
3334
|
+
const contextValue = React39__default.default.useMemo(() => ({ id }), [id]);
|
|
3335
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-form__item", className), ...props }) });
|
|
3211
3336
|
}
|
|
3212
3337
|
);
|
|
3213
3338
|
FormItem.displayName = "FormItem";
|
|
3214
|
-
var FormLabel =
|
|
3215
|
-
const fieldCtx =
|
|
3339
|
+
var FormLabel = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
3340
|
+
const fieldCtx = React39__default.default.useContext(FormFieldContext);
|
|
3216
3341
|
const hasError = !!fieldCtx?.error;
|
|
3217
3342
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3218
3343
|
"label",
|
|
3219
3344
|
{
|
|
3220
3345
|
ref,
|
|
3221
3346
|
htmlFor: fieldCtx?.id,
|
|
3222
|
-
className:
|
|
3347
|
+
className: clsx28__default.default("ds-form__label", hasError && "ds-form__label--error", className),
|
|
3223
3348
|
...props
|
|
3224
3349
|
}
|
|
3225
3350
|
);
|
|
3226
3351
|
});
|
|
3227
3352
|
FormLabel.displayName = "FormLabel";
|
|
3228
|
-
var FormControl =
|
|
3353
|
+
var FormControl = React39__default.default.forwardRef(
|
|
3229
3354
|
({ className, children, ...props }, ref) => {
|
|
3230
|
-
const fieldCtx =
|
|
3355
|
+
const fieldCtx = React39__default.default.useContext(FormFieldContext);
|
|
3231
3356
|
const descriptionId = fieldCtx ? `${fieldCtx.id}-description` : void 0;
|
|
3232
3357
|
const messageId = fieldCtx ? `${fieldCtx.id}-message` : void 0;
|
|
3233
3358
|
const hasError = !!fieldCtx?.error;
|
|
3234
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className:
|
|
3359
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx28__default.default("ds-form__control", className), ...props, children: React39__default.default.isValidElement(children) ? React39__default.default.cloneElement(children, {
|
|
3235
3360
|
id: fieldCtx?.id,
|
|
3236
3361
|
"aria-describedby": descriptionId,
|
|
3237
3362
|
"aria-invalid": hasError || void 0,
|
|
@@ -3240,21 +3365,21 @@ var FormControl = React38__default.default.forwardRef(
|
|
|
3240
3365
|
}
|
|
3241
3366
|
);
|
|
3242
3367
|
FormControl.displayName = "FormControl";
|
|
3243
|
-
var FormDescription =
|
|
3244
|
-
const fieldCtx =
|
|
3368
|
+
var FormDescription = React39__default.default.forwardRef(({ className, ...props }, ref) => {
|
|
3369
|
+
const fieldCtx = React39__default.default.useContext(FormFieldContext);
|
|
3245
3370
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3246
3371
|
"p",
|
|
3247
3372
|
{
|
|
3248
3373
|
ref,
|
|
3249
3374
|
id: fieldCtx ? `${fieldCtx.id}-description` : void 0,
|
|
3250
|
-
className:
|
|
3375
|
+
className: clsx28__default.default("ds-form__description", className),
|
|
3251
3376
|
...props
|
|
3252
3377
|
}
|
|
3253
3378
|
);
|
|
3254
3379
|
});
|
|
3255
3380
|
FormDescription.displayName = "FormDescription";
|
|
3256
|
-
var FormMessage =
|
|
3257
|
-
const fieldCtx =
|
|
3381
|
+
var FormMessage = React39__default.default.forwardRef(({ className, children, ...props }, ref) => {
|
|
3382
|
+
const fieldCtx = React39__default.default.useContext(FormFieldContext);
|
|
3258
3383
|
const message = children ?? fieldCtx?.error;
|
|
3259
3384
|
if (!message) return null;
|
|
3260
3385
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3263,7 +3388,7 @@ var FormMessage = React38__default.default.forwardRef(({ className, children, ..
|
|
|
3263
3388
|
ref,
|
|
3264
3389
|
id: fieldCtx ? `${fieldCtx.id}-message` : void 0,
|
|
3265
3390
|
role: "alert",
|
|
3266
|
-
className:
|
|
3391
|
+
className: clsx28__default.default("ds-form__message", className),
|
|
3267
3392
|
...props,
|
|
3268
3393
|
children: message
|
|
3269
3394
|
}
|
|
@@ -3321,7 +3446,7 @@ function extractSpacingStyles(props) {
|
|
|
3321
3446
|
if (props.gap !== void 0) styles.gap = resolveSpacing(props.gap);
|
|
3322
3447
|
return styles;
|
|
3323
3448
|
}
|
|
3324
|
-
var Box =
|
|
3449
|
+
var Box = React39.forwardRef(
|
|
3325
3450
|
({ as: Component = "div", className, style, children, ...props }, ref) => {
|
|
3326
3451
|
const spacingStyles = extractSpacingStyles(props);
|
|
3327
3452
|
const { m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py, gap, ...domProps } = props;
|
|
@@ -3329,7 +3454,7 @@ var Box = React38.forwardRef(
|
|
|
3329
3454
|
Component,
|
|
3330
3455
|
{
|
|
3331
3456
|
ref,
|
|
3332
|
-
className:
|
|
3457
|
+
className: clsx28__default.default("ds-box", className),
|
|
3333
3458
|
style: { ...spacingStyles, ...style },
|
|
3334
3459
|
...domProps,
|
|
3335
3460
|
children
|
|
@@ -3338,13 +3463,13 @@ var Box = React38.forwardRef(
|
|
|
3338
3463
|
}
|
|
3339
3464
|
);
|
|
3340
3465
|
Box.displayName = "Box";
|
|
3341
|
-
var Stack =
|
|
3466
|
+
var Stack = React39.forwardRef(
|
|
3342
3467
|
({ direction = "column", align, justify, wrap, className, style, ...props }, ref) => {
|
|
3343
3468
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3344
3469
|
Box,
|
|
3345
3470
|
{
|
|
3346
3471
|
ref,
|
|
3347
|
-
className:
|
|
3472
|
+
className: clsx28__default.default("ds-stack", direction === "row" && "ds-stack--horizontal", className),
|
|
3348
3473
|
style: {
|
|
3349
3474
|
alignItems: align,
|
|
3350
3475
|
justifyContent: justify === "between" ? "space-between" : justify,
|
|
@@ -3358,14 +3483,14 @@ var Stack = React38.forwardRef(
|
|
|
3358
3483
|
);
|
|
3359
3484
|
Stack.displayName = "Stack";
|
|
3360
3485
|
var MAX_RESPONSIVE_COLS = 6;
|
|
3361
|
-
var Grid =
|
|
3486
|
+
var Grid = React39.forwardRef(
|
|
3362
3487
|
({ columns, rows, align, justify, fixed, className, style, ...props }, ref) => {
|
|
3363
3488
|
const useColClass = typeof columns === "number" && columns >= 1 && columns <= MAX_RESPONSIVE_COLS;
|
|
3364
3489
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3365
3490
|
Box,
|
|
3366
3491
|
{
|
|
3367
3492
|
ref,
|
|
3368
|
-
className:
|
|
3493
|
+
className: clsx28__default.default(
|
|
3369
3494
|
"ds-grid",
|
|
3370
3495
|
useColClass && `ds-grid--cols-${columns}`,
|
|
3371
3496
|
fixed && "ds-grid--fixed",
|
|
@@ -3395,7 +3520,7 @@ var CONTAINER_SIZE_MAP = {
|
|
|
3395
3520
|
// 80rem — max-w-7xl
|
|
3396
3521
|
full: "100%"
|
|
3397
3522
|
};
|
|
3398
|
-
var Container =
|
|
3523
|
+
var Container = React39.forwardRef(
|
|
3399
3524
|
({ size, fluid, maxWidth, className, style, ...props }, ref) => {
|
|
3400
3525
|
let resolvedMaxWidth;
|
|
3401
3526
|
if (fluid) {
|
|
@@ -3409,7 +3534,7 @@ var Container = React38.forwardRef(
|
|
|
3409
3534
|
Box,
|
|
3410
3535
|
{
|
|
3411
3536
|
ref,
|
|
3412
|
-
className:
|
|
3537
|
+
className: clsx28__default.default("ds-container", className),
|
|
3413
3538
|
style: {
|
|
3414
3539
|
maxWidth: resolvedMaxWidth,
|
|
3415
3540
|
...style
|
|
@@ -3420,13 +3545,13 @@ var Container = React38.forwardRef(
|
|
|
3420
3545
|
}
|
|
3421
3546
|
);
|
|
3422
3547
|
Container.displayName = "Container";
|
|
3423
|
-
var Section =
|
|
3548
|
+
var Section = React39.forwardRef(
|
|
3424
3549
|
({ padding = "md", className, children, ...props }, ref) => {
|
|
3425
3550
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3426
3551
|
"section",
|
|
3427
3552
|
{
|
|
3428
3553
|
ref,
|
|
3429
|
-
className:
|
|
3554
|
+
className: clsx28__default.default("ds-section-block", `ds-section-block--${padding}`, className),
|
|
3430
3555
|
...props,
|
|
3431
3556
|
children
|
|
3432
3557
|
}
|
|
@@ -3434,19 +3559,19 @@ var Section = React38.forwardRef(
|
|
|
3434
3559
|
}
|
|
3435
3560
|
);
|
|
3436
3561
|
Section.displayName = "Section";
|
|
3437
|
-
var VisuallyHidden =
|
|
3562
|
+
var VisuallyHidden = React39.forwardRef(
|
|
3438
3563
|
({ className, ...props }, ref) => {
|
|
3439
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className:
|
|
3564
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx28__default.default("ds-visually-hidden", className), ...props });
|
|
3440
3565
|
}
|
|
3441
3566
|
);
|
|
3442
3567
|
VisuallyHidden.displayName = "VisuallyHidden";
|
|
3443
|
-
var Tabs =
|
|
3568
|
+
var Tabs = React39__default.default.forwardRef(
|
|
3444
3569
|
({ className, orientation = "horizontal", ...props }, ref) => {
|
|
3445
3570
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3446
3571
|
tabs.Tabs.Root,
|
|
3447
3572
|
{
|
|
3448
3573
|
ref,
|
|
3449
|
-
className:
|
|
3574
|
+
className: clsx28__default.default("ds-tabs", `ds-tabs--${orientation}`, className),
|
|
3450
3575
|
orientation,
|
|
3451
3576
|
...props
|
|
3452
3577
|
}
|
|
@@ -3454,21 +3579,21 @@ var Tabs = React38__default.default.forwardRef(
|
|
|
3454
3579
|
}
|
|
3455
3580
|
);
|
|
3456
3581
|
Tabs.displayName = "Tabs";
|
|
3457
|
-
var TabsList =
|
|
3582
|
+
var TabsList = React39__default.default.forwardRef(
|
|
3458
3583
|
({ className, ...props }, ref) => {
|
|
3459
|
-
return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { ref, className:
|
|
3584
|
+
return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { ref, className: clsx28__default.default("ds-tabs__list", className), ...props });
|
|
3460
3585
|
}
|
|
3461
3586
|
);
|
|
3462
3587
|
TabsList.displayName = "TabsList";
|
|
3463
|
-
var TabsTrigger =
|
|
3588
|
+
var TabsTrigger = React39__default.default.forwardRef(
|
|
3464
3589
|
({ className, children, ...props }, ref) => {
|
|
3465
|
-
return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Tab, { ref, className:
|
|
3590
|
+
return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Tab, { ref, className: clsx28__default.default("ds-tabs__trigger", className), ...props, children });
|
|
3466
3591
|
}
|
|
3467
3592
|
);
|
|
3468
3593
|
TabsTrigger.displayName = "TabsTrigger";
|
|
3469
|
-
var TabsContent =
|
|
3594
|
+
var TabsContent = React39__default.default.forwardRef(
|
|
3470
3595
|
({ className, ...props }, ref) => {
|
|
3471
|
-
return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { ref, className:
|
|
3596
|
+
return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { ref, className: clsx28__default.default("ds-tabs__content", className), ...props });
|
|
3472
3597
|
}
|
|
3473
3598
|
);
|
|
3474
3599
|
TabsContent.displayName = "TabsContent";
|
|
@@ -3581,7 +3706,7 @@ function DSIntlProvider({
|
|
|
3581
3706
|
}
|
|
3582
3707
|
function useMessage() {
|
|
3583
3708
|
const intl = reactIntl.useIntl();
|
|
3584
|
-
const formatMessage =
|
|
3709
|
+
const formatMessage = React39.useCallback(
|
|
3585
3710
|
(descriptor, values) => {
|
|
3586
3711
|
return intl.formatMessage(descriptor, values);
|
|
3587
3712
|
},
|
|
@@ -3619,7 +3744,7 @@ function useTextDirection() {
|
|
|
3619
3744
|
}
|
|
3620
3745
|
function useNumberFormat() {
|
|
3621
3746
|
const intl = reactIntl.useIntl();
|
|
3622
|
-
const formatNumber =
|
|
3747
|
+
const formatNumber = React39.useCallback(
|
|
3623
3748
|
(value, options) => {
|
|
3624
3749
|
return intl.formatNumber(value, options);
|
|
3625
3750
|
},
|
|
@@ -3629,7 +3754,7 @@ function useNumberFormat() {
|
|
|
3629
3754
|
}
|
|
3630
3755
|
function useDateFormat() {
|
|
3631
3756
|
const intl = reactIntl.useIntl();
|
|
3632
|
-
const formatDate =
|
|
3757
|
+
const formatDate = React39.useCallback(
|
|
3633
3758
|
(value, options) => {
|
|
3634
3759
|
return intl.formatDate(value, options);
|
|
3635
3760
|
},
|
|
@@ -3639,7 +3764,7 @@ function useDateFormat() {
|
|
|
3639
3764
|
}
|
|
3640
3765
|
function useRelativeTime() {
|
|
3641
3766
|
const intl = reactIntl.useIntl();
|
|
3642
|
-
const formatRelativeTime =
|
|
3767
|
+
const formatRelativeTime = React39.useCallback(
|
|
3643
3768
|
(value, unit, options) => {
|
|
3644
3769
|
return intl.formatRelativeTime(value, unit, options);
|
|
3645
3770
|
},
|
|
@@ -4151,6 +4276,12 @@ exports.SPACING = SPACING;
|
|
|
4151
4276
|
exports.ScrollArea = ScrollArea;
|
|
4152
4277
|
exports.ScrollBar = ScrollBar;
|
|
4153
4278
|
exports.Section = Section;
|
|
4279
|
+
exports.Select = Select;
|
|
4280
|
+
exports.SelectContent = SelectContent;
|
|
4281
|
+
exports.SelectGroup = SelectGroup;
|
|
4282
|
+
exports.SelectItem = SelectItem;
|
|
4283
|
+
exports.SelectSeparator = SelectSeparator;
|
|
4284
|
+
exports.SelectTrigger = SelectTrigger;
|
|
4154
4285
|
exports.Separator = Separator;
|
|
4155
4286
|
exports.Sheet = Sheet;
|
|
4156
4287
|
exports.SheetClose = SheetClose;
|